diff --git a/frontend/src/app/canvas/CanvasMenubar.tsx b/frontend/src/app/canvas/CanvasMenubar.tsx index 7a5a2eb..a2e5ac2 100644 --- a/frontend/src/app/canvas/CanvasMenubar.tsx +++ b/frontend/src/app/canvas/CanvasMenubar.tsx @@ -34,8 +34,6 @@ export type CanvasMenubarProps = { canDuplicate?: boolean canCopy?: boolean onFitView?: () => void - showMinimap?: boolean - onToggleMinimap?: (visible: boolean) => void } const UNDO_KEYS = { key: 'z', shiftKey: false } @@ -59,8 +57,6 @@ export function CanvasMenubar({ canDuplicate = false, canCopy = false, onFitView, - showMinimap = false, - onToggleMinimap, }: CanvasMenubarProps) { const { projectId } = useParams<{ projectId: string }>() const { projects, renameProject } = usePlatform() @@ -233,18 +229,6 @@ export function CanvasMenubar({ )} - {onToggleMinimap != null && ( - <> - - onToggleMinimap(checked)} - className="gap-2" - > - Minimap - - - )} diff --git a/frontend/src/app/canvas/CanvasPage.tsx b/frontend/src/app/canvas/CanvasPage.tsx index b6e67af..e4892e1 100644 --- a/frontend/src/app/canvas/CanvasPage.tsx +++ b/frontend/src/app/canvas/CanvasPage.tsx @@ -25,6 +25,7 @@ import { import { AnimatedEdge } from '@/components/base/AnimatedEdge' import FlowContext from '@/lib/flowContext' import { useTheme } from '@/lib/themeContext' +import { usePlatform } from '@/app/platform/platformContext' import { useGraphStateWithHistory } from '@/hooks/useGraphStateWithHistory' import { ContextMenu, @@ -148,6 +149,7 @@ function getInitialGraph(projectId: string | undefined): { nodes: AppNode[]; edg export function CanvasPage({ projectId }: CanvasPageProps) { const { theme } = useTheme() + const { showMinimap } = usePlatform() const initialGraph = useMemo(() => getInitialGraph(projectId), [projectId]) const { nodes, @@ -190,7 +192,6 @@ export function CanvasPage({ projectId }: CanvasPageProps) { const [lastCreatedNodeId, setLastCreatedNodeId] = React.useState(null) const [isPanning, setIsPanning] = React.useState(false) const [isSelecting, setIsSelecting] = React.useState(false) - const [showMinimap, setShowMinimap] = React.useState(false) const [ariaAnnouncement, setAriaAnnouncement] = React.useState(null) const nodesRef = useRef(nodes) nodesRef.current = nodes @@ -570,8 +571,6 @@ export function CanvasPage({ projectId }: CanvasPageProps) { canDuplicate={selectedNodes.length > 0} canCopy={selectedNodes.length === 1} onFitView={() => flowActionsRef.current?.fitView?.()} - showMinimap={showMinimap} - onToggleMinimap={setShowMinimap} /> {apiTodosCount !== null && (
diff --git a/frontend/src/app/platform/SettingsDialog.tsx b/frontend/src/app/platform/SettingsDialog.tsx index 3631f8b..5b71b70 100644 --- a/frontend/src/app/platform/SettingsDialog.tsx +++ b/frontend/src/app/platform/SettingsDialog.tsx @@ -18,8 +18,10 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select' +import { Switch } from '@/components/ui/switch' import { useTheme } from '@/lib/themeContext' import type { Theme } from '@/lib/themeContext' +import { usePlatform } from './platformContext' import { Sun, Sparkles } from 'lucide-react' type SettingsSection = 'appearance' | 'ai' @@ -32,6 +34,7 @@ export function SettingsDialog({ const [open, setOpen] = useState(false) const [section, setSection] = useState('appearance') const { theme, setTheme } = useTheme() + const { showMinimap, setShowMinimap } = usePlatform() return ( @@ -88,6 +91,21 @@ export function SettingsDialog({
+
+

+ Canvas +

+
+ + +
+
)} {section === 'ai' && ( diff --git a/frontend/src/app/platform/platformContext.tsx b/frontend/src/app/platform/platformContext.tsx index df64d25..232c097 100644 --- a/frontend/src/app/platform/platformContext.tsx +++ b/frontend/src/app/platform/platformContext.tsx @@ -11,8 +11,24 @@ import { PROJECT_VERSION } from './projectGraphStorage' const STORAGE_KEY = 'zui_platform_projects' const ORDER_STORAGE_KEY = 'zui_platform_project_order' const RECENT_STORAGE_KEY = 'zui_platform_recent_project_ids' +const CANVAS_MINIMAP_KEY = 'zui_canvas_show_minimap' const RECENT_MAX = 5 +function loadShowMinimap(): boolean { + try { + const raw = localStorage.getItem(CANVAS_MINIMAP_KEY) + if (raw === 'true') return true + if (raw === 'false') return false + } catch {} + return false +} + +function saveShowMinimap(value: boolean) { + try { + localStorage.setItem(CANVAS_MINIMAP_KEY, JSON.stringify(value)) + } catch {} +} + function loadOrder(): string[] { try { const raw = localStorage.getItem(ORDER_STORAGE_KEY) @@ -107,6 +123,9 @@ export type PlatformContextValue = { updateLastEdited: (id: string) => void reorderProjects: (orderedIds: string[]) => void restoreProject: (project: Project, graphSnapshot: GraphSnapshot | null) => void + /** Canvas: show React Flow minimap (persisted) */ + showMinimap: boolean + setShowMinimap: (value: boolean) => void } const PlatformContext = createContext(null) @@ -115,6 +134,12 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) { const [projects, setProjects] = useState(loadProjects) const [projectOrder, setProjectOrder] = useState(loadOrder) const [recentProjectIds, setRecentProjectIds] = useState(loadRecentIds) + const [showMinimap, setShowMinimapState] = useState(loadShowMinimap) + + const setShowMinimap = useCallback((value: boolean) => { + setShowMinimapState(value) + saveShowMinimap(value) + }, []) const persist = useCallback((next: Project[]) => { setProjects(next) @@ -220,6 +245,8 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) { updateLastEdited, reorderProjects, restoreProject, + showMinimap, + setShowMinimap, }), [ projects, @@ -234,6 +261,8 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) { updateLastEdited, reorderProjects, restoreProject, + showMinimap, + setShowMinimap, ] )