feat: implement CanvasMenubar component and integrate keyboard shortcuts

frontend/src/app/platform/AppSidebar.tsx

@@ -53,10 +53,10 @@ export function AppSidebar({
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton size="lg" tooltip="Zui" className="font-semibold">
-                <span className="flex size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground text-xs">
+                <span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground text-xs">
                   Zo
                 </span>
-                <span>Zui</span>
+                <span className="group-data-[collapsible=icon]:hidden">Zui</span>
               </SidebarMenuButton>
             </SidebarMenuItem>
           </SidebarMenu>

frontend/src/app/platform/NewProjectDialog.tsx

@@ -27,7 +27,7 @@ type NewProjectDialogProps = {
 export function NewProjectDialog({ onCreate, trigger }: NewProjectDialogProps) {
   const [open, setOpen] = useState(false)
   const [name, setName] = useState('')
-  const [iconId, setIconId] = useState<ProjectIconId>('layout')
+  const [iconId, setIconId] = useState<ProjectIconId>('cat')
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
@@ -41,7 +41,7 @@ export function NewProjectDialog({ onCreate, trigger }: NewProjectDialogProps) {
     }
     onCreate(project)
     setName('')
-    setIconId('layout')
+    setIconId('cat')
     setOpen(false)
   }
 

frontend/src/app/platform/icon-map.tsx

@@ -1,27 +1,40 @@
 /**
  * Map project icon ids to Lucide icons for the sidebar.
+ * Only Lucide "Animals" category icons are allowed for projects.
  */
 
 import {
-  LayoutDashboard,
-  Folder,
-  FileStack,
-  Sparkles,
-  Box,
-  Layers,
+  Bird,
+  Bug,
+  Cat,
+  Dog,
+  Egg,
+  Fish,
+  Rabbit,
+  Rat,
+  Shrimp,
+  Snail,
+  Squirrel,
+  Turtle,
   type LucideIcon,
 } from 'lucide-react'
 import type { ProjectIconId } from './types'
 
 export const PROJECT_ICON_MAP: Record<ProjectIconId, LucideIcon> = {
-  layout: LayoutDashboard,
-  folder: Folder,
-  'file-stack': FileStack,
-  sparkles: Sparkles,
-  box: Box,
-  layers: Layers,
+  bird: Bird,
+  bug: Bug,
+  cat: Cat,
+  dog: Dog,
+  fish: Fish,
+  rat: Rat,
+  rabbit: Rabbit,
+  squirrel: Squirrel,
+  turtle: Turtle,
+  snail: Snail,
+  shrimp: Shrimp,
+  egg: Egg
 }
 
 export function getProjectIcon(iconId: string): LucideIcon {
-  return PROJECT_ICON_MAP[iconId as ProjectIconId] ?? LayoutDashboard
+  return PROJECT_ICON_MAP[iconId as ProjectIconId] ?? Cat
 }

frontend/src/app/platform/types.ts

@@ -12,13 +12,20 @@ export type Project = {
   createdAt: number
 }
 
+/** Project icon ids: Lucide "Animals" category only */
 export const PROJECT_ICON_IDS = [
-  'layout',
-  'folder',
-  'file-stack',
-  'sparkles',
-  'box',
-  'layers',
+  'bird',
+  'bug',
+  'cat',
+  'dog',
+  'fish',
+  'rat',
+  'rabbit',
+  'squirrel',
+  'turtle',
+  'snail',
+  'shrimp',
+  'egg'
 ] as const
 
 export type ProjectIconId = (typeof PROJECT_ICON_IDS)[number]