40 lines
1.6 KiB
TypeScript
40 lines
1.6 KiB
TypeScript
/**
|
|
* Recollection menubar: Back | title + save status | registered menus (middle).
|
|
*/
|
|
|
|
import React from 'react'
|
|
import { Link, useParams } from 'react-router-dom'
|
|
import { usePlatform } from '@/app/kosmos/KosmosContext'
|
|
import { ArrowLeft } from 'lucide-react'
|
|
import { useRecollectionMenubar } from './RecollectionMenubarContext'
|
|
import { RecollectionEditViewMenus } from './RecollectionEditViewMenus'
|
|
|
|
export function RecollectionMenubar() {
|
|
const { recollectionId } = useParams<{ recollectionId: string }>()
|
|
const { recollections } = usePlatform()
|
|
const { titleContent } = useRecollectionMenubar()
|
|
|
|
const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
|
|
const defaultTitle = 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 overflow-visible 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 shrink-0 items-center gap-1.5">
|
|
{titleContent ?? defaultTitle}
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 items-center gap-1 overflow-visible">
|
|
<RecollectionEditViewMenus />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|