- Add useViewMode hook: manages panel visibility state (editor-only, editor-list, all) - Persist view mode preference in localStorage - Add Option+1 (editor only), Option+2 (editor + note list), Option+3 (all panels) - Add collapse button (CaretLeft icon) in sidebar title bar - Extract useDialogs hook from App to reduce component size - Extract SidebarTitleBar component to reduce Sidebar complexity - Listen for Tauri menu events to support macOS View menu (wired next) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { useState, useCallback, useEffect } from 'react'
|
|
import { isTauri } from '../mock-tauri'
|
|
|
|
export type ViewMode = 'editor-only' | 'editor-list' | 'all'
|
|
|
|
const STORAGE_KEY = 'laputa-view-mode'
|
|
|
|
function loadViewMode(): ViewMode {
|
|
try {
|
|
const stored = localStorage.getItem(STORAGE_KEY)
|
|
if (stored === 'editor-only' || stored === 'editor-list' || stored === 'all') return stored
|
|
} catch { /* ignore */ }
|
|
return 'all'
|
|
}
|
|
|
|
export function useViewMode() {
|
|
const [viewMode, setViewModeState] = useState<ViewMode>(loadViewMode)
|
|
|
|
const setViewMode = useCallback((mode: ViewMode) => {
|
|
setViewModeState(mode)
|
|
try { localStorage.setItem(STORAGE_KEY, mode) } catch { /* ignore */ }
|
|
}, [])
|
|
|
|
const sidebarVisible = viewMode === 'all'
|
|
const noteListVisible = viewMode === 'all' || viewMode === 'editor-list'
|
|
|
|
// Listen for Tauri menu events
|
|
useEffect(() => {
|
|
if (!isTauri()) return
|
|
|
|
let cleanup: (() => void) | undefined
|
|
import('@tauri-apps/api/event').then(({ listen }) => {
|
|
const unlisten = listen<string>('menu-event', (event) => {
|
|
if (event.payload === 'view-editor-only') setViewMode('editor-only')
|
|
else if (event.payload === 'view-editor-list') setViewMode('editor-list')
|
|
else if (event.payload === 'view-all') setViewMode('all')
|
|
})
|
|
cleanup = () => { unlisten.then((fn) => fn()) }
|
|
}).catch(() => { /* not in Tauri */ })
|
|
|
|
return () => cleanup?.()
|
|
}, [setViewMode])
|
|
|
|
return { viewMode, setViewMode, sidebarVisible, noteListVisible }
|
|
}
|