fix: persist workspace panel visibility across restarts (#69)

* fix: persist workspace panel visibility across restarts (#40)

Move sidebar and file explorer visibility into global app settings so panel state survives restarts and project switches. Serialize immediate writes, add rollback on failure, and wait on close so the latest toggle is not lost.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: address review feedback for workspace panel persistence (#40)

Capture panel write payloads in the persistence queue, tighten close-request typing, and reuse shared shortcut callback types. This keeps rollback behavior deterministic and aligns the Tauri window API with async close coordination.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

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

Author: gnoviawan

src/renderer/components/TitleBar.test.tsx

@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { TitleBar } from './TitleBar'
+import { useSidebarStore } from '@/stores/sidebar-store'
+import { useFileExplorerStore } from '@/stores/file-explorer-store'
+import * as appSettingsHooks from '@/hooks/use-app-settings'
+
+const { mockUpdatePanelVisibility, mockToastError, mockWindowApi } = vi.hoisted(() => ({
+  mockUpdatePanelVisibility: vi.fn(() => Promise.resolve()),
+  mockToastError: vi.fn(),
+  mockWindowApi: {
+    onMaximizeChange: vi.fn(() => vi.fn()),
+    minimize: vi.fn(),
+    toggleMaximize: vi.fn().mockResolvedValue({ success: true, data: false }),
+    close: vi.fn()
+  }
+}))
+
+vi.mock('@/lib/api', () => ({
+  windowApi: mockWindowApi
+}))
+
+vi.mock('sonner', () => ({
+  toast: {
+    error: mockToastError
+  }
+}))
+
+describe('TitleBar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(appSettingsHooks, 'useUpdatePanelVisibility').mockReturnValue(
+      mockUpdatePanelVisibility
+    )
+    useSidebarStore.setState({ isVisible: true })
+    useFileExplorerStore.setState({ isVisible: true })
+  })
+
+  function renderTitleBar() {
+    return render(
+      <MemoryRouter>
+        <TitleBar />
+      </MemoryRouter>
+    )
+  }
+
+  it('toggles sidebar via persistence-aware updater on click', async () => {
+    renderTitleBar()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide sidebar' }))
+
+    await waitFor(() => {
+      expect(mockUpdatePanelVisibility).toHaveBeenCalledWith('sidebarVisible', false)
+    })
+  })
+
+  it('toggles file explorer via persistence-aware updater on click', async () => {
+    renderTitleBar()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide file explorer' }))
+
+    await waitFor(() => {
+      expect(mockUpdatePanelVisibility).toHaveBeenCalledWith('fileExplorerVisible', false)
+    })
+  })
+
+  it('shows error toast when sidebar persistence update fails', async () => {
+    mockUpdatePanelVisibility.mockRejectedValueOnce(new Error('persist failed'))
+
+    renderTitleBar()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide sidebar' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalledWith('persist failed')
+    })
+  })
+
+  it('shows error toast when file explorer persistence update fails', async () => {
+    mockUpdatePanelVisibility.mockRejectedValueOnce(new Error('persist failed'))
+
+    renderTitleBar()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Hide file explorer' }))
+
+    await waitFor(() => {
+      expect(mockToastError).toHaveBeenCalledWith('persist failed')
+    })
+  })
+})

src/renderer/components/TitleBar.tsx

@@ -1,19 +1,40 @@
 import { useState, useEffect } from 'react'
 import { Minus, Square, Copy, X, PanelLeft, PanelRight, Settings, SlidersHorizontal } from 'lucide-react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { useSidebarStore, useSidebarVisible } from '@/stores/sidebar-store'
-import { useFileExplorerStore, useFileExplorerVisible } from '@/stores/file-explorer-store'
+import { useSidebarVisible } from '@/stores/sidebar-store'
+import { useFileExplorerVisible } from '@/stores/file-explorer-store'
+import { useUpdatePanelVisibility } from '@/hooks/use-app-settings'
 import { windowApi } from '@/lib/api'
+import { toast } from 'sonner'
 
 const focusableButtonClass = 'h-full px-3 hover:bg-secondary inline-flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
 
 export function TitleBar(): React.JSX.Element {
   const [isMaximized, setIsMaximized] = useState(false)
   const isSidebarVisible = useSidebarVisible()
   const isExplorerVisible = useFileExplorerVisible()
+  const updatePanelVisibility = useUpdatePanelVisibility()
   const navigate = useNavigate()
   const location = useLocation()
 
+  const handleToggleSidebar = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+    e.stopPropagation()
+    try {
+      await updatePanelVisibility('sidebarVisible', !isSidebarVisible)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to update sidebar visibility')
+    }
+  }
+
+  const handleToggleFileExplorer = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+    e.stopPropagation()
+    try {
+      await updatePanelVisibility('fileExplorerVisible', !isExplorerVisible)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to update file explorer visibility')
+    }
+  }
+
   useEffect(() => {
     return windowApi.onMaximizeChange((maximized) => {
       setIsMaximized(maximized)
@@ -42,7 +63,9 @@ export function TitleBar(): React.JSX.Element {
         style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
       >
         <button
-          onClick={(e) => { e.stopPropagation(); useSidebarStore.getState().toggleVisibility(); }}
+          onClick={(e) => {
+            void handleToggleSidebar(e)
+          }}
           className={focusableButtonClass}
           title="Toggle sidebar"
           aria-label={isSidebarVisible ? 'Hide sidebar' : 'Show sidebar'}
@@ -55,7 +78,9 @@ export function TitleBar(): React.JSX.Element {
         </button>
 
         <button
-          onClick={(e) => { e.stopPropagation(); useFileExplorerStore.getState().toggleVisibility(); }}
+          onClick={(e) => {
+            void handleToggleFileExplorer(e)
+          }}
           className={focusableButtonClass}
           title="Toggle file explorer"
           aria-label={isExplorerVisible ? 'Hide file explorer' : 'Show file explorer'}