44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
/**
|
|
* 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>
|
|
)
|
|
}
|