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

feat: refactor katalogos

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-16 21:29:09 +01:00
parent febca67c9b
commit 5bce586db6
7 changed files with 257 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/recollections/layout/RecollectionActionsContext.tsx
View File

@@ -120,7 +120,7 @@ export function RecollectionActionsProvider({ children }: { children: React.Reac
pathnameRef.current = pathname
const isFluxActive = pathname.endsWith('/flux')
const isLogosActive = pathname.endsWith('/logos') || /\/recollections\/[^/]+\/?$/.test(pathname)
const isLogosActive = pathname.includes('/logos') || /\/recollections\/[^/]+\/?$/.test(pathname)
const activeSlot = isFluxActive ? flux : isLogosActive ? logos : null
const setFluxSlot = useCallback((slot: FluxSlot | null) => {
@@ -179,7 +179,7 @@ export function RecollectionActionsProvider({ children }: { children: React.Reac
)
const currentPath = pathnameRef.current
const fluxActive = currentPath.endsWith('/flux')
const logosActive = currentPath.endsWith('/logos') || /\/recollections\/[^/]+\/?$/.test(currentPath)
const logosActive = currentPath.includes('/logos') || /\/recollections\/[^/]+\/?$/.test(currentPath)
if (written.graph && fluxActive && fluxRef.current?.onRefreshFromStore) {
fluxRef.current.onRefreshFromStore(written.graph)
}

48
frontend/src/app/recollections/layout/RecollectionViewSwitcher.tsx
View File

@@ -5,7 +5,7 @@
import React, { useCallback, useEffect } from 'react'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { FluxIcon, LogosIcon, RecollectionsIcon } from '@/lib/icons'
import { FluxIcon, LogosIcon } from '@/lib/icons'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
function shortcutLabel() {
@@ -19,17 +19,13 @@ export function RecollectionViewSwitcher() {
const navigate = useNavigate()
const base = recollectionId ? `/recollections/${recollectionId}` : ''
type Mode = 'logos' | 'katalogos' | 'flux'
const mode: Mode = pathname.endsWith('/flux')
? 'flux'
: pathname.endsWith('/katalogos')
? 'katalogos'
: 'logos'
type Mode = 'logos' | 'flux'
const mode: Mode = pathname.endsWith('/flux') ? 'flux' : 'logos'
const goRelative = useCallback(
(delta: 1 | -1) => {
if (!base) return
const order: Mode[] = ['logos', 'katalogos', 'flux']
const order: Mode[] = ['logos', 'flux']
const currentIndex = order.indexOf(mode)
const nextMode = order[(currentIndex + (delta === 1 ? 1 : order.length - 1)) % order.length]
navigate(`${base}/${nextMode}`)
@@ -61,11 +57,7 @@ export function RecollectionViewSwitcher() {
const shortcut = shortcutLabel()
const tooltipText =
mode === 'logos'
? `Logos · Next: Katalogos (${shortcut})`
: mode === 'katalogos'
? `Katalogos · Next: Flux (${shortcut})`
: `Flux · Next: Logos (${shortcut})`
mode === 'logos' ? `Logos · Next: Flux (${shortcut})` : `Flux · Next: Logos (${shortcut})`
return (
<div className="flex shrink-0 items-center gap-2">
@@ -75,34 +67,20 @@ export function RecollectionViewSwitcher() {
<button
type="button"
onClick={toggle}
aria-label={
mode === 'logos'
? 'Switch to Katalogos'
: mode === 'katalogos'
? 'Switch to Flux'
: 'Switch to Logos'
}
aria-label={mode === 'logos' ? 'Switch to Flux' : 'Switch to Logos'}
className="h-7 w-7 shrink-0 overflow-hidden rounded-full border border-border/60 bg-background shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<div className="h-full w-full overflow-hidden">
<div
className="flex w-full flex-col transition-transform duration-200 ease-out"
style={{
height: '300%',
transform:
mode === 'logos'
? 'translateY(0)'
: mode === 'katalogos'
? 'translateY(-33.3333%)'
: 'translateY(-66.6667%)',
height: '200%',
transform: mode === 'logos' ? 'translateY(0)' : 'translateY(-50%)',
}}
>
<div className="flex h-9 w-full items-center justify-center">
<LogosIcon className="size-3.5 shrink-0 text-muted-foreground" />
</div>
<div className="flex h-9 w-full items-center justify-center">
<RecollectionsIcon className="size-3.5 shrink-0 text-muted-foreground" />
</div>
<div className="flex h-9 w-full items-center justify-center">
<FluxIcon className="size-3.5 shrink-0 text-muted-foreground" />
</div>
@@ -117,20 +95,12 @@ export function RecollectionViewSwitcher() {
<div
className="flex w-full flex-col transition-transform duration-200 ease-out"
style={{
transform:
mode === 'logos'
? 'translateY(0)'
: mode === 'katalogos'
? 'translateY(-33.3333%)'
: 'translateY(-66.6667%)',
transform: mode === 'logos' ? 'translateY(0)' : 'translateY(-50%)',
}}
>
<span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
Logos
</span>
<span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
Katalogos
</span>
<span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
Flux
</span>