feat: logos and flux

frontend/src/app/canvas/CanvasPage.tsx

@@ -36,7 +36,8 @@ import { ContextMenu, ContextMenuTrigger } from '@/components/ui/context-menu'
 import { CanvasContextMenuContent } from '@/app/canvas/CanvasContextMenuContent'
 import { useCanvasConnectionPathFromStore } from '@/app/canvas/useCanvasConnectionPathFromStore'
 import { dispatchCanvasCommand } from '@/app/canvas/canvasStore'
-import { CanvasMenubar } from '@/app/canvas/CanvasMenubar'
+import { useRecollectionMenubar } from '@/app/recollections/RecollectionMenubarContext'
+import { FluxMenubarContent } from '@/app/recollections/flux/FluxMenubarContent'
 import { createContextualNode } from '@/app/canvas/ContextualZoomNode'
 import { ViewportDisplayProvider } from '@/app/canvas/ViewportDisplayContext'
 import { FlowKeyboardShortcuts } from '@/components/graph/FlowKeyboardShortcuts'
@@ -427,6 +428,52 @@ export function CanvasPage({ recollectionId }: CanvasPageProps) {
     flowActionsRef.current?.pasteAtViewportCenter?.()
   }, [])
 
+  const { setCustomContent } = useRecollectionMenubar()
+  useEffect(() => {
+    setCustomContent(
+      <FluxMenubarContent
+        onImport={handleImportRecollection}
+        onExport={handleExportRecollection}
+        onSave={
+          recollectionId
+            ? () => {
+                save()
+                toast.success('Saved')
+              }
+            : undefined
+        }
+        canSave={Boolean(recollectionId)}
+        saveStatus={saveStatus}
+        undo={undo}
+        redo={redo}
+        canUndo={canUndo}
+        canRedo={canRedo}
+        onDuplicate={handleDuplicate}
+        onCopy={handleCopy}
+        onPaste={handlePaste}
+        canDuplicate={selectedNodes.length > 0}
+        canCopy={selectedNodes.length === 1}
+        onFitView={() => flowActionsRef.current?.fitView?.()}
+      />
+    )
+    return () => setCustomContent(null)
+  }, [
+    setCustomContent,
+    recollectionId,
+    saveStatus,
+    canUndo,
+    canRedo,
+    selectedNodes.length,
+    save,
+    undo,
+    redo,
+    handleDuplicate,
+    handleCopy,
+    handlePaste,
+    handleImportRecollection,
+    handleExportRecollection,
+  ])
+
   const graphContextValue = useMemo(
     () => ({ setNodes, setEdges, graphRef, edges }),
     [setNodes, setEdges, edges]
@@ -646,30 +693,6 @@ export function CanvasPage({ recollectionId }: CanvasPageProps) {
         onChange={onImportFileChange}
         aria-hidden
       />
-      <CanvasMenubar
-        onImport={handleImportRecollection}
-        onExport={handleExportRecollection}
-        onSave={
-          recollectionId
-            ? () => {
-                save()
-                toast.success('Saved')
-              }
-            : undefined
-        }
-        canSave={Boolean(recollectionId)}
-        saveStatus={saveStatus}
-        undo={undo}
-        redo={redo}
-        canUndo={canUndo}
-        canRedo={canRedo}
-        onDuplicate={handleDuplicate}
-        onCopy={handleCopy}
-        onPaste={handlePaste}
-        canDuplicate={selectedNodes.length > 0}
-        canCopy={selectedNodes.length === 1}
-        onFitView={() => flowActionsRef.current?.fitView?.()}
-      />
       <div className="flex-1 min-h-0 relative flex flex-col">
         <div className="flex-1 min-h-0 flex flex-col">
           <GraphContext.Provider value={graphContextValue}>