feat: Collapsible Navigator (#571)

ui/app/(app)/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels'
+import { useEffect, useRef } from 'react'
+import { Group, Panel, Separator, useDefaultLayout, type PanelImperativeHandle } from 'react-resizable-panels'
 
 import { ActivityBubble } from '@/components/ActivityBubble'
 import { AppErrorBoundary } from '@/components/AppErrorBoundary'
@@ -11,14 +12,34 @@ import { Panels } from '@/components/Panels'
 import { WelcomeScreen } from '@/components/WelcomeScreen'
 import { useScene } from '@/hooks/useScene'
 import { useGetMeta } from '@/lib/api/default/default'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { cn } from '@/lib/utils'
 
 const LAYOUT_ID = 'koharu-main-layout-v3'
 
 export default function Page() {
+  const hasProject = useScene().scene !== null
+  const showNavigator = useEditorUiStore((s) => s.showNavigator)
+  const setShowNavigator = useEditorUiStore((s) => s.setShowNavigator)
+  const leftPanelRef = useRef<PanelImperativeHandle>(null)
+
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
     id: LAYOUT_ID,
     panelIds: ['left', 'center', 'right'],
   })
+
+  // Sync store -> panel state
+  useEffect(() => {
+    const panel = leftPanelRef.current
+    if (!panel) return
+
+    if (showNavigator && panel.isCollapsed()) {
+      panel.expand()
+    } else if (!showNavigator && !panel.isCollapsed()) {
+      panel.collapse()
+    }
+  }, [showNavigator])
+
   const { data: meta } = useGetMeta({
     query: {
       retry: false,
@@ -26,7 +47,6 @@ export default function Page() {
       staleTime: Infinity,
     },
   })
-  const hasProject = useScene().scene !== null
 
   if (!meta) {
     return <AppInitializationSkeleton />
@@ -46,10 +66,30 @@ export default function Page() {
         onLayoutChanged={onLayoutChanged}
         className='flex min-h-0 flex-1'
       >
-        <Panel id='left' defaultSize={160} minSize={160} maxSize={250}>
+        <Panel
+          panelRef={leftPanelRef}
+          id='left'
+          defaultSize={160}
+          minSize={160}
+          maxSize={250}
+          collapsible
+          collapsedSize={0}
+          onResize={(size) => {
+            if (size.asPercentage === 0 && showNavigator) {
+              setShowNavigator(false)
+            } else if (size.asPercentage > 0 && !showNavigator) {
+              setShowNavigator(true)
+            }
+          }}
+        >
           <Navigator />
         </Panel>
-        <Separator className='w-1 bg-border/40 transition-colors hover:bg-border' />
+        <Separator
+          className={cn(
+            'w-px bg-border transition-colors hover:bg-border',
+            !showNavigator && 'hidden',
+          )}
+        />
         <Panel id='center' minSize={480}>
           <AppErrorBoundary>
             <div className='flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden'>
@@ -58,7 +98,7 @@ export default function Page() {
             </div>
           </AppErrorBoundary>
         </Panel>
-        <Separator className='w-1 bg-border/40 transition-colors hover:bg-border' />
+        <Separator className='w-px bg-border transition-colors hover:bg-border' />
         <Panel id='right' defaultSize={280} minSize={280} maxSize={400}>
           <AppErrorBoundary>
             <Panels />

ui/components/Navigator.tsx

@@ -41,7 +41,7 @@ export function Navigator() {
     <div
       data-testid='navigator-panel'
       data-total-pages={totalPages}
-      className='flex h-full min-h-0 w-full flex-col border-r bg-muted/50'
+      className='flex h-full min-h-0 w-full flex-col bg-muted/50'
     >
       <div className='flex items-center justify-between border-b border-border px-2 py-1.5'>
         <div>

ui/components/canvas/ToolRail.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { MousePointer, VectorSquare, Brush, Bandage, Eraser } from 'lucide-react'
+import { MousePointer, VectorSquare, Brush, Bandage, Eraser, PanelLeft } from 'lucide-react'
 import type { ComponentType } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -53,11 +53,38 @@ const MODES: ModeDefinition[] = [
 export function ToolRail() {
   const mode = useEditorUiStore((state) => state.mode)
   const setMode = useEditorUiStore((state) => state.setMode)
+  const showNavigator = useEditorUiStore((state) => state.showNavigator)
+  const setShowNavigator = useEditorUiStore((state) => state.setShowNavigator)
   const shortcuts = usePreferencesStore((state) => state.shortcuts)
   const { t } = useTranslation()
 
   return (
     <div className='flex w-11 flex-col border-r border-border bg-card'>
+      {/* Navigator Toggle Section - Height matches Navigator Header (py-1.5 + 2 lines of text-xs = 44px) */}
+      <div className='flex h-[44px] shrink-0 items-center justify-center'>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              data-testid='tool-navigator-toggle'
+              data-active={showNavigator}
+              onClick={() => setShowNavigator(!showNavigator)}
+              className='border border-transparent text-muted-foreground data-[active=true]:text-primary'
+              aria-label={showNavigator ? t('navigator.hide') : t('navigator.show')}
+              aria-pressed={showNavigator}
+            >
+              <PanelLeft className='h-4 w-4' />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side='right' sideOffset={8}>
+            {showNavigator ? t('navigator.hide') : t('navigator.show')}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+
+      <div className='h-px w-full bg-border' />
+
       <div className='flex flex-1 flex-col items-center gap-1 py-2'>
         {MODES.map((item) => {
           const label = t(item.labelKey)

ui/lib/stores/editorUiStore.ts

@@ -64,6 +64,10 @@ type EditorUiState = {
   error?: { id: number; message: string }
   showError: (message: string) => void
   clearError: () => void
+
+  // page navigator panel
+  showNavigator: boolean
+  setShowNavigator: (show: boolean) => void
 }
 
 const initialState = {
@@ -80,6 +84,7 @@ const initialState = {
   selectedTarget: undefined as LlmTarget | undefined,
   selectedLanguage: undefined as string | undefined,
   error: undefined as { id: number; message: string } | undefined,
+  showNavigator: true,
 }
 
 export const useEditorUiStore = create<EditorUiState>((set) => ({
@@ -133,4 +138,6 @@ export const useEditorUiStore = create<EditorUiState>((set) => ({
     clearDismissTimer()
     set({ error: undefined })
   },
+
+  setShowNavigator: (show) => set({ showNavigator: show }),
 }))

ui/public/locales/en-US/translation.json

@@ -84,6 +84,8 @@
   },
   "navigator": {
     "title": "Navigator",
+    "show": "Show Navigator",
+    "hide": "Hide Navigator",
     "pages_one": "{{count}} page",
     "pages_other": "{{count}} pages",
     "empty": "No documents",

ui/public/locales/es-ES/translation.json

@@ -68,6 +68,8 @@
   },
   "navigator": {
     "title": "Navegador",
+    "show": "Mostrar navegador",
+    "hide": "Ocultar navegador",
     "pages_one": "{{count}} página",
     "pages_other": "{{count}} páginas",
     "empty": "No hay documentos",

ui/public/locales/ja-JP/translation.json

@@ -68,6 +68,8 @@
   },
   "navigator": {
     "title": "ナビゲーター",
+    "show": "ナビゲーターを表示",
+    "hide": "ナビゲーターを非表示",
     "pages_one": "{{count}} ページ",
     "pages_other": "{{count}} ページ",
     "empty": "ドキュメントがありません",

ui/public/locales/ko-KR/translation.json

@@ -68,6 +68,8 @@
   },
   "navigator": {
     "title": "내비게이터",
+    "show": "내비게이터 표시",
+    "hide": "내비게이터 숨기기",
     "pages_one": "{{count}} 페이지",
     "pages_other": "{{count}} 페이지",
     "empty": "문서 없음",

ui/public/locales/pt-BR/translation.json

@@ -69,6 +69,8 @@
   },
   "navigator": {
     "title": "Navegador",
+    "show": "Mostrar navegador",
+    "hide": "Ocultar navegador",
     "pages_one": "{{count}} página",
     "pages_other": "{{count}} páginas",
     "empty": "Nenhum documento",

ui/public/locales/ru-RU/translation.json

@@ -68,6 +68,8 @@
   },
   "navigator": {
     "title": "Навигатор",
+    "show": "Показать навигатор",
+    "hide": "Скрыть навигатор",
     "pages_one": "{{count}} стр.",
     "pages_other": "{{count}} стр.",
     "empty": "Нет документов",

ui/public/locales/tr-TR/translation.json

@@ -68,6 +68,8 @@
   },
   "navigator": {
     "title": "Gezgin",
+    "show": "Gezgini Göster",
+    "hide": "Gezgini Gizle",
     "pages_one": "{{count}} sayfa",
     "pages_other": "{{count}} sayfa",
     "empty": "Belge yok",

ui/public/locales/zh-CN/translation.json

@@ -68,6 +68,8 @@
   },
   "navigator": {
     "title": "导航",
+    "show": "显示导航器",
+    "hide": "隐藏导航器",
     "pages_one": "{{count}} 页",
     "pages_other": "{{count}} 页",
     "empty": "没有文档",

ui/public/locales/zh-TW/translation.json

@@ -67,7 +67,9 @@
     "cancelling": "停止中..."
   },
   "navigator": {
-    "title": "導覽",
+    "title": "導航",
+    "show": "顯示導航器",
+    "hide": "隱藏導航器",
     "pages_one": "{{count}} 頁",
     "pages_other": "{{count}} 頁",
     "empty": "沒有文件",