feat: logos and flux

2026-03-15 14:43:31 +01:00
parent 04c039bdde
commit 449d2cb382
8 changed files with 285 additions and 160 deletions
--- a/frontend/src/app/recollections/RecollectionMenubar.tsx
+++ b/frontend/src/app/recollections/RecollectionMenubar.tsx
@@ -0,0 +1,59 @@
+/**
+ * Shared base menubar for a recollection: Back, optional custom content (from context), Logos/Flux switcher.
+ */
+
+import React from 'react'
+import { Link, NavLink, useParams } from 'react-router-dom'
+import { usePlatform } from '@/app/kosmos/KosmosContext'
+import { ArrowLeft, BookOpen, Workflow } from 'lucide-react'
+import { useRecollectionMenubar } from './RecollectionMenubarContext'
+
+export function RecollectionMenubar() {
+  const { recollectionId } = useParams<{ recollectionId: string }>()
+  const { recollections } = usePlatform()
+  const { customContent } = useRecollectionMenubar()
+
+  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
+  const base = recollectionId ? `/recollections/${recollectionId}` : ''
+  const defaultMiddle = recollection ? (
+    <span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
+  ) : null
+
+  return (
+    <div className="flex h-9 w-full shrink-0 items-center gap-2 border-b border-border/40 bg-background px-2">
+      <Link
+        to="/recollections"
+        aria-label="Back to recollections"
+        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>
+      <div className="flex min-w-0 flex-1 items-center">
+        {customContent ?? defaultMiddle}
+      </div>
+      {base && (
+        <nav className="flex shrink-0 items-center gap-0.5" aria-label="Recollection pages">
+          <NavLink
+            to={`${base}/logos`}
+            end
+            className={({ isActive }) =>
+              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
+            }
+          >
+            <BookOpen className="size-3.5" />
+            Logos
+          </NavLink>
+          <NavLink
+            to={`${base}/flux`}
+            className={({ isActive }) =>
+              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground ${isActive ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground'}`
+            }
+          >
+            <Workflow className="size-3.5" />
+            Flux
+          </NavLink>
+        </nav>
+      )}
+    </div>
+  )
+}