dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor menus

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-15 21:11:57 +01:00
parent a8bd579043
commit 929359b4bc
8 changed files with 406 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/recollections/RecollectionMenubar.tsx
View File

@@ -1,9 +1,9 @@
/**
* Shared base menubar for a recollection: Back, optional custom content (from context), Logos/Flux switcher.
* Recollection menubar: Back | title + save status | registered menus (middle) | Logos | Flux.
*/
import React from 'react'
import { Link, NavLink, useParams, useLocation } from 'react-router-dom'
import { Link, NavLink, useParams } from 'react-router-dom'
import { usePlatform } from '@/app/kosmos/KosmosContext'
import { ArrowLeft } from 'lucide-react'
import { FluxIcon, LogosIcon } from '@/lib/icons'
@@ -11,20 +11,17 @@ import { useRecollectionMenubar } from './RecollectionMenubarContext'
export function RecollectionMenubar() {
const { recollectionId } = useParams<{ recollectionId: string }>()
const { pathname } = useLocation()
const { recollections } = usePlatform()
const { customContent } = useRecollectionMenubar()
const { titleContent, customContent } = useRecollectionMenubar()
const isFlux = pathname.endsWith('/flux')
const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
const base = recollectionId ? `/recollections/${recollectionId}` : ''
const defaultMiddle = recollection ? (
const defaultTitle = recollection ? (
<span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
) : null
const middleContent = isFlux ? (customContent ?? defaultMiddle) : defaultMiddle
return (
<div className="flex h-9 w-full shrink-0 items-center gap-2 border-b border-border/40 bg-background px-2">
<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"
@@ -32,8 +29,11 @@ export function RecollectionMenubar() {
>
<ArrowLeft className="size-4" />
</Link>
<div className="flex min-w-0 flex-1 items-center">
{middleContent}
<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">
{customContent}
</div>
{base && (
<nav className="flex shrink-0 items-center gap-0.5" aria-label="Recollection pages">