zui/frontend/src/app/canvas/CanvasMenubar.tsx

/**
 * Menubar for the canvas page: Project (Import/Export), Edit (Undo/Redo), View (Fit View, Theme).
 */

import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
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 { ArrowLeft, 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">
      <Link
        to="/projects"
        aria-label="Back to projects"
        className="flex shrink-0 items-center rounded-sm px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"
      >
        <ArrowLeft className="size-4" />
      </Link>
      <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>
  )
}