feat: implement CanvasMenubar component and integrate keyboard shortcuts

frontend/src/app/canvas/CanvasMenubar.tsx

@@ -0,0 +1,150 @@
+/**
+ * Menubar for the canvas page: Project (Import/Export), Edit (Undo/Redo), View (Fit View, Theme).
+ */
+
+import React, { useEffect } from 'react'
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarTrigger,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarCheckboxItem,
+} from '@/components/ui/menubar'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
+import { useTheme } from '@/lib/themeContext'
+import { Download, FolderOpen, Moon, Redo2, Sun, Undo2 } from 'lucide-react'
+
+export type CanvasMenubarProps = {
+  onImport: () => void
+  onExport: () => void
+  undo: () => void
+  redo: () => void
+  canUndo: boolean
+  canRedo: boolean
+  onFitView?: () => void
+}
+
+const UNDO_KEYS = { key: 'z', shiftKey: false }
+const REDO_KEYS = { key: 'z', shiftKey: true }
+
+function matchKey(ev: KeyboardEvent, want: { key: string; shiftKey: boolean }) {
+  const mod = ev.ctrlKey || ev.metaKey
+  return ev.key.toLowerCase() === want.key && !!mod && !!ev.shiftKey === want.shiftKey
+}
+
+export function CanvasMenubar({
+  onImport,
+  onExport,
+  undo,
+  redo,
+  canUndo,
+  canRedo,
+  onFitView,
+}: CanvasMenubarProps) {
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    const onKeyDown = (ev: KeyboardEvent) => {
+      if (matchKey(ev, UNDO_KEYS)) {
+        if (canUndo) {
+          ev.preventDefault()
+          ev.stopPropagation()
+          undo()
+        }
+        return
+      }
+      if (matchKey(ev, REDO_KEYS)) {
+        if (canRedo) {
+          ev.preventDefault()
+          ev.stopPropagation()
+          redo()
+        }
+      }
+    }
+    window.addEventListener('keydown', onKeyDown, true)
+    return () => window.removeEventListener('keydown', onKeyDown, true)
+  }, [undo, redo, canUndo, canRedo])
+
+  return (
+    <Menubar className="shrink-0 rounded-none border-x-0 border-t-0 border-b-0">
+      <MenubarMenu>
+        <MenubarTrigger className="font-medium">Project</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem onClick={onImport} className="gap-2">
+            <FolderOpen className="h-4 w-4" />
+            Import…
+          </MenubarItem>
+          <MenubarItem onClick={onExport} className="gap-2">
+            <Download className="h-4 w-4" />
+            Export…
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger className="font-medium">Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem onClick={undo} disabled={!canUndo} className="gap-2">
+            <Undo2 className="h-4 w-4" />
+            Undo
+            <span className="ml-auto pl-4">
+              <KbdGroup>
+                <Kbd>⌘ + Z</Kbd>
+              </KbdGroup>
+            </span>
+          </MenubarItem>
+          <MenubarItem onClick={redo} disabled={!canRedo} className="gap-2">
+            <Redo2 className="h-4 w-4" />
+            Redo
+            <span className="ml-auto pl-4">
+              <KbdGroup>
+                <Kbd>⌘ + ⇧ + Z</Kbd>
+              </KbdGroup>
+            </span>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger className="font-medium">View</MenubarTrigger>
+        <MenubarContent>
+          {onFitView && (
+            <MenubarItem onClick={onFitView} className="gap-2">
+              Fit View
+              <span className="ml-auto pl-4">
+                <KbdGroup>
+                  <Kbd>⌘0</Kbd>
+                </KbdGroup>
+              </span>
+            </MenubarItem>
+          )}
+          {onFitView && <MenubarSeparator />}
+          <MenubarSub>
+            <MenubarSubTrigger>Theme</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarCheckboxItem
+                checked={theme === 'light'}
+                onCheckedChange={() => setTheme('light')}
+                className="gap-2"
+              >
+                <Sun className="h-4 w-4" />
+                Light
+              </MenubarCheckboxItem>
+              <MenubarCheckboxItem
+                checked={theme === 'dark'}
+                onCheckedChange={() => setTheme('dark')}
+                className="gap-2"
+              >
+                <Moon className="h-4 w-4" />
+                Dark
+              </MenubarCheckboxItem>
+            </MenubarSubContent>
+          </MenubarSub>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}

frontend/src/app/canvas/CanvasPage.tsx

@@ -37,8 +37,8 @@ import {
   ContextMenuTrigger,
   ContextMenuGroup,
 } from '@/components/ui/context-menu'
-import { CanvasMenubar } from '@/components/CanvasMenubar'
-import { FlowKeyboardShortcuts } from '@/components/FlowKeyboardShortcuts'
+import { CanvasMenubar } from '@/app/canvas/CanvasMenubar'
+import { FlowKeyboardShortcuts } from '@/components/base/FlowKeyboardShortcuts'
 import {
   Empty,
   EmptyContent,
@@ -485,11 +485,10 @@ export function CanvasPage({ projectId: _projectId }: CanvasPageProps) {
       {canvasMessage && (
         <div
           role="status"
-          className={`shrink-0 px-3 py-2 text-sm ${
-            canvasMessage.type === 'success'
-              ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200'
-              : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
-          }`}
+          className={`shrink-0 px-3 py-2 text-sm ${canvasMessage.type === 'success'
+            ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200'
+            : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
+            }`}
         >
           {canvasMessage.text}
         </div>