Files
zui/frontend/src/app/recollections/RecollectionLayout.tsx
2026-03-16 09:51:45 +01:00

49 lines
1.7 KiB
TypeScript

/**
* Layout for a single recollection: shared menubar and nested routes for Logos / Katalogos / Flux.
*/
import React, { useEffect } from 'react'
import { Link, Outlet, useParams } from 'react-router-dom'
import { usePlatform } from '@/app/kosmos/KosmosContext'
import { RecollectionMenubarProvider } from './layout/RecollectionMenubarContext'
import { RecollectionActionsProvider } from './layout/RecollectionActionsContext'
import { RecollectionTitleContent } from './layout/RecollectionTitleContent'
import { RecollectionMenubar } from './layout/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>
<RecollectionActionsProvider>
<RecollectionTitleContent />
<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>
</RecollectionActionsProvider>
</RecollectionMenubarProvider>
)
}