feat: enhance platform context with recent project tracking and access recording

frontend/src/app/canvas/CanvasMenubar.tsx

@@ -2,8 +2,8 @@
  * 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 React, { useEffect, useMemo } from 'react'
+import { Link, useParams } from 'react-router-dom'
 import {
   Menubar,
   MenubarContent,
@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/menubar'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { useTheme } from '@/lib/themeContext'
+import { usePlatform } from '@/app/platform/platformContext'
 import { ArrowLeft, Download, FolderOpen, Moon, Redo2, Sun, Undo2 } from 'lucide-react'
 
 export type CanvasMenubarProps = {
@@ -48,6 +49,12 @@ export function CanvasMenubar({
   onFitView,
 }: CanvasMenubarProps) {
   const { theme, setTheme } = useTheme()
+  const { projectId } = useParams<{ projectId: string }>()
+  const { projects } = usePlatform()
+  const projectName = useMemo(
+    () => (projectId ? projects.find((p) => p.id === projectId)?.name ?? null : null),
+    [projectId, projects]
+  )
 
   useEffect(() => {
     const onKeyDown = (ev: KeyboardEvent) => {
@@ -72,87 +79,94 @@ export function CanvasMenubar({
   }, [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
+    <div className="relative flex h-9 w-full shrink-0 items-center border-b border-border/40 bg-background">
+      <Menubar className="flex-1 shrink-0 rounded-none border-0 border-b-0 bg-transparent p-0 shadow-none">
+        <Link
+          to="/projects"
+          aria-label="Back to projects"
+          className="flex shrink-0 items-center rounded-sm px-2 py-1 ml-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>⌘0</Kbd>
+                  <Kbd>⌘ + Z</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>
+            <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>
+      {projectName && (
+        <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 truncate max-w-[40%] text-sm font-medium text-foreground">
+          {projectName}
+        </span>
+      )}
+    </div>
   )
 }