Remove is mobile checks from sidebar

apps/desktop/src/renderer/components/layouts/layout-sidebar-footer.tsx

@@ -11,7 +11,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  useSidebar,
 } from '@/renderer/components/ui/sidebar';
 import { Avatar } from '@/renderer/components/avatars/avatar';
 import { useAccount } from '@/renderer/contexts/account';
@@ -24,7 +23,6 @@ import { AccountReadState } from '@/shared/types/radars';
 
 export function LayoutSidebarFooter() {
   const account = useAccount();
-  const sidebar = useSidebar();
   const navigate = useNavigate();
   const radar = useRadar();
 
@@ -76,7 +74,7 @@ export function LayoutSidebarFooter() {
           </DropdownMenuTrigger>
           <DropdownMenuContent
             className="w-[--radix-dropdown-menu-trigger-width] min-w-80 rounded-lg"
-            side={sidebar.isMobile ? 'bottom' : 'right'}
+            side="right"
             align="end"
             sideOffset={4}
           >

apps/desktop/src/renderer/components/layouts/layout-sidebar-header.tsx

@@ -15,7 +15,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  useSidebar,
 } from '@/renderer/components/ui/sidebar';
 import { ChevronsUpDown, Settings, Plus, Bell, Check } from 'lucide-react';
 import { useRadar } from '@/renderer/contexts/radar';
@@ -26,7 +25,6 @@ export const LayoutSidebarHeader = () => {
   const workspace = useWorkspace();
   const account = useAccount();
   const navigate = useNavigate();
-  const sidebar = useSidebar();
   const radar = useRadar();
 
   const [open, setOpen] = React.useState(false);
@@ -77,7 +75,7 @@ export const LayoutSidebarHeader = () => {
           <DropdownMenuContent
             className="w-[--radix-dropdown-menu-trigger-width] min-w-80 rounded-lg"
             align="start"
-            side={sidebar.isMobile ? 'bottom' : 'right'}
+            side="right"
             sideOffset={4}
           >
             <DropdownMenuItem key={workspace.id} className="p-0">

apps/desktop/src/renderer/components/ui/sidebar.tsx

@@ -1,15 +1,11 @@
-'use client';
-
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { VariantProps, cva } from 'class-variance-authority';
 
-import { useIsMobile } from '@/renderer/hooks/use-mobile';
 import { cn } from '@/shared/lib/utils';
 import { Button } from '@/renderer/components/ui/button';
 import { Input } from '@/renderer/components/ui/input';
 import { Separator } from '@/renderer/components/ui/separator';
-import { Sheet, SheetContent } from '@/renderer/components/ui/sheet';
 import { Skeleton } from '@/renderer/components/ui/skeleton';
 import {
   Tooltip,
@@ -19,10 +15,7 @@ import {
 } from '@/renderer/components/ui/tooltip';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 
-const SIDEBAR_COOKIE_NAME = 'sidebar:state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
@@ -30,9 +23,6 @@ type SidebarContext = {
   state: 'expanded' | 'collapsed';
   open: boolean;
   setOpen: (open: boolean) => void;
-  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean;
   toggleSidebar: () => void;
 };
 
@@ -67,9 +57,6 @@ const SidebarProvider = React.forwardRef<
     },
     ref
   ) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = React.useState(defaultOpen);
@@ -83,19 +70,14 @@ const SidebarProvider = React.forwardRef<
         }
 
         _setOpen(value);
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
       },
       [setOpenProp, open]
     );
 
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
+      setOpen((open) => !open);
+    }, [setOpen]);
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
@@ -122,12 +104,9 @@ const SidebarProvider = React.forwardRef<
         state,
         open,
         setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
         toggleSidebar,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [state, open, setOpen, toggleSidebar]
     );
 
     return (
@@ -176,7 +155,7 @@ const Sidebar = React.forwardRef<
     },
     ref
   ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const { state, open, setOpen, toggleSidebar } = useSidebar();
 
     if (collapsible === 'none') {
       return (
@@ -193,26 +172,6 @@ const Sidebar = React.forwardRef<
       );
     }
 
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      );
-    }
-
     return (
       <div
         ref={ref}
@@ -558,7 +517,7 @@ const SidebarMenuButton = React.forwardRef<
     ref
   ) => {
     const Comp = asChild ? Slot : 'button';
-    const { isMobile, state } = useSidebar();
+    const { state } = useSidebar();
 
     const button = (
       <Comp
@@ -587,7 +546,7 @@ const SidebarMenuButton = React.forwardRef<
         <TooltipContent
           side="right"
           align="center"
-          hidden={state !== 'collapsed' || isMobile}
+          hidden={state !== 'collapsed'}
           {...tooltip}
         />
       </Tooltip>

apps/desktop/src/renderer/hooks/use-mobile.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined
-  );
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener('change', onChange);
-  }, []);
-
-  return !!isMobile;
-}