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

feat: redesign navs

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-16 22:28:30 +01:00
parent 5bce586db6
commit 96cb3701ba
18 changed files with 501 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/app/recollections/layout/RecollectionEditViewMenus.tsx
View File

@@ -46,17 +46,21 @@ export function RecollectionEditViewMenus() {
return () => window.removeEventListener('keydown', onKeyDown, true)
}, [activeSlot])
const menus = useMemo(() => {
if (!activeSlot) return null
const hasFluxOnly =
fluxSlot &&
(fluxSlot.onDuplicate != null || fluxSlot.onCopy != null || fluxSlot.onPaste != null)
return (
<Menubar className="shrink-0 rounded-none border-0 bg-transparent p-0 shadow-none">
const hasFluxOnly =
fluxSlot &&
(fluxSlot.onDuplicate != null || fluxSlot.onCopy != null || fluxSlot.onPaste != null)
const menus = useMemo(
() => (
<Menubar className="h-9 shrink-0 rounded-none border-0 bg-transparent p-0 shadow-none">
<MenubarMenu>
<MenubarTrigger className="font-normal text-muted-foreground">Edit</MenubarTrigger>
<MenubarTrigger className="h-9 font-normal text-muted-foreground">Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem onClick={activeSlot.undo} disabled={!activeSlot.canUndo} className="gap-2">
<MenubarItem
onClick={() => activeSlot?.undo()}
disabled={!activeSlot?.canUndo}
className="gap-2"
>
<Undo2 className="h-4 w-4" />
Undo
<span className="ml-auto pl-4">
@@ -65,7 +69,11 @@ export function RecollectionEditViewMenus() {
</KbdGroup>
</span>
</MenubarItem>
<MenubarItem onClick={activeSlot.redo} disabled={!activeSlot.canRedo} className="gap-2">
<MenubarItem
onClick={() => activeSlot?.redo()}
disabled={!activeSlot?.canRedo}
className="gap-2"
>
<Redo2 className="h-4 w-4" />
Redo
<span className="ml-auto pl-4">
@@ -74,13 +82,13 @@ export function RecollectionEditViewMenus() {
</KbdGroup>
</span>
</MenubarItem>
{hasFluxOnly && (
{hasFluxOnly && fluxSlot && (
<>
<MenubarSeparator />
{fluxSlot!.onDuplicate != null && (
{fluxSlot.onDuplicate != null && (
<MenubarItem
onClick={fluxSlot!.onDuplicate}
disabled={!fluxSlot!.canDuplicate}
onClick={fluxSlot.onDuplicate}
disabled={!fluxSlot.canDuplicate}
className="gap-2"
>
<CopyPlus className="h-4 w-4" />
@@ -92,10 +100,10 @@ export function RecollectionEditViewMenus() {
</span>
</MenubarItem>
)}
{fluxSlot!.onCopy != null && (
{fluxSlot.onCopy != null && (
<MenubarItem
onClick={fluxSlot!.onCopy}
disabled={!fluxSlot!.canCopy}
onClick={fluxSlot.onCopy}
disabled={!fluxSlot.canCopy}
className="gap-2"
>
<Copy className="h-4 w-4" />
@@ -107,8 +115,8 @@ export function RecollectionEditViewMenus() {
</span>
</MenubarItem>
)}
{fluxSlot!.onPaste != null && (
<MenubarItem onClick={fluxSlot!.onPaste} className="gap-2">
{fluxSlot.onPaste != null && (
<MenubarItem onClick={fluxSlot.onPaste} className="gap-2">
<ClipboardPaste className="h-4 w-4" />
Paste
<span className="ml-auto pl-4">
@@ -123,7 +131,7 @@ export function RecollectionEditViewMenus() {
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger className="font-normal text-muted-foreground">View</MenubarTrigger>
<MenubarTrigger className="h-9 font-normal text-muted-foreground">View</MenubarTrigger>
<MenubarContent>
{fluxSlot?.onFitView && (
<MenubarItem onClick={fluxSlot.onFitView} className="gap-2">
@@ -138,8 +146,9 @@ export function RecollectionEditViewMenus() {
</MenubarContent>
</MenubarMenu>
</Menubar>
)
}, [activeSlot, fluxSlot])
),
[activeSlot, fluxSlot, hasFluxOnly]
)
return menus
}