fix(sidebar): fix desktop sidebar collapsed by default on first visit (#305)

- Fix cookie check logic: use `!includes('sidebar_state=false')` instead
  of `includes('sidebar_state=true')` so sidebar defaults to open when
  no cookie is set
- Add --sidebar-width CSS variable binding to desktop sidebar element
- Adjust SIDEBAR_WIDTH_MOBILE value

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/layout/main-layout/index.vue

@@ -17,5 +17,5 @@
 <script setup lang="ts">
 import { SidebarProvider } from '@memohai/ui'
 
-const sidebarDefaultOpen = document.cookie.includes('sidebar_state=true')
+const sidebarDefaultOpen = !document.cookie.includes('sidebar_state=false')
 </script>

packages/ui/src/components/sidebar/Sidebar.vue

@@ -5,7 +5,7 @@ import { Sheet, SheetContent } from '#/components/sheet'
 import SheetDescription from '#/components/sheet/SheetDescription.vue'
 import SheetHeader from '#/components/sheet/SheetHeader.vue'
 import SheetTitle from '#/components/sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -64,6 +64,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
     :data-side="side"
+    :style="{ '--sidebar-width': SIDEBAR_WIDTH }"
   >
     <!-- This is what handles the sidebar gap on desktop  -->
     <div

packages/ui/src/components/sidebar/utils.ts

@@ -4,7 +4,7 @@ import { createContext } from 'reka-ui'
 export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 export const SIDEBAR_WIDTH = '14rem'
-export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_MOBILE = '24rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'