feat: logos and flux

frontend/src/app/recollections/RecollectionLayout.tsx

@@ -0,0 +1,43 @@
+/**
+ * Layout for a single recollection: shared menubar (with optional custom content from active page) and outlet.
+ */
+
+import React, { useEffect } from 'react'
+import { Link, Outlet, useParams } from 'react-router-dom'
+import { usePlatform } from '@/app/kosmos/KosmosContext'
+import { RecollectionMenubarProvider } from './RecollectionMenubarContext'
+import { RecollectionMenubar } from './RecollectionMenubar'
+
+export function RecollectionLayout() {
+  const { recollectionId } = useParams<{ recollectionId: string }>()
+  const { recollections, recordRecollectionAccess } = usePlatform()
+
+  useEffect(() => {
+    if (recollectionId) recordRecollectionAccess(recollectionId)
+  }, [recollectionId, recordRecollectionAccess])
+
+  const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
+
+  if (!recollectionId) return null
+  if (!recollection) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8">
+        <p className="text-sm text-muted-foreground">Recollection not found.</p>
+        <Link to="/recollections" className="text-sm text-primary hover:underline">
+          Back to recollections
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <RecollectionMenubarProvider>
+      <div className="flex min-h-0 flex-1 flex-col">
+        <RecollectionMenubar />
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          <Outlet />
+        </div>
+      </div>
+    </RecollectionMenubarProvider>
+  )
+}