Files
zui/frontend/src/app/recollections/RecollectionLayout.tsx
2026-03-16 00:15:36 +01:00

52 lines
1.9 KiB
TypeScript

/**
* Layout for a single recollection: shared menubar and flipping card (Logos front / Flux back).
*/
import React, { useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
import { usePlatform } from '@/app/kosmos/KosmosContext'
import { RecollectionMenubarProvider } from './RecollectionMenubarContext'
import { RecollectionActionsProvider } from './RecollectionActionsContext'
import { RecollectionTitleContent } from './RecollectionTitleContent'
import { RecollectionMenubar } from './RecollectionMenubar'
import { RecollectionViewSwitcher } from './RecollectionViewSwitcher'
import { FlippingCardView } from './FlippingCardView'
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="relative flex min-h-0 flex-1 flex-col">
<RecollectionMenubar />
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
<FlippingCardView />
</div>
<RecollectionViewSwitcher />
</div>
</RecollectionActionsProvider>
</RecollectionMenubarProvider>
)
}