Admin Patterns

Werkzeuge · Admin

Admin Patterns

Drop-in-Schalen für Admin-Editoren und List-Pages: Sidebar, Topbar, Save-Bar, Status-Line, List-Toolbar, Draft-Banner. Sichern Look-and-Feel-Parität über alle Content-Typen.

AdminSidebarStable

@repo/ui/AdminSidebar

Vertikale Navigation für Admin-Layouts. Kollabiert auf eine Icon-Schiene (~64 px), hebt aktive Items via longest-prefix match aus pathname hervor.

Die Sidebar links auf dieser Seite ist eine echte Instanz von AdminSidebar. Eine zweite Demo-Instanz hier wäre redundant — siehe oben.

AdminTopbarStable

@repo/ui/AdminTopbar

Topbar mit Page-Title, optionalem Back-Button, beliebigen Actions (z. B. Theme-Toggle) und User-Menu. Pendant zu AdminSidebar.

Die Topbar oben auf jeder Seite ist eine echte Instanz von AdminTopbar — Page-Title aus der Pathname-Map, Theme-Cycle in den Actions, kein User (Designsystem-Referenz, keine Sitzung).

EditorSaveBarStable

@repo/ui/EditorSaveBar

Geteilter Save-Bar-Shell für jeden Admin-Editor. Optional: status-line, change-note, danger-Action; immer: primary-CTA + ggf. secondary-CTAs.

Entwurf — wird beim Speichern als Draft abgelegt.

SimpleStatusLineStable

@repo/ui/SimpleStatusLine

Ein-Zeilen 'Was passiert beim Speichern?'-Indikator für Editoren ohne Draft-Overlay (Course, LearningPath, Leitlinie, Speaker, …). Mappt status auf eine vorformulierte Nachricht.

Entwurf — wird beim Speichern abgelegt.

Live — beim Speichern sofort sichtbar.

Archiviert — nicht mehr in Listen.

ListToolbar + useListFiltersStable

@repo/ui/ListToolbar

Generische List-Page-Toolbar — Suchfeld, Chips/Select/Toggle-Filter, Reset. Pure UI, holds no state. Pair mit useListFilters-Hook für client-seitige Such-/Filter-Logik.

ComboboxStable

@repo/ui/Combobox

Searchable Single-Select. Drop-in-Replacement für <Select> auf langen Listen (Sprecher, Leitlinien, …).

DraftModeBannerStable

@repo/ui/DraftModeBanner

Banner an der Oberseite einer Vorschauseite. Erkennbar machen: 'Hier sehen Sie unveröffentlichte Änderungen' + Beenden-Link. In Web/Admin auf Preview-Routes gerendert.

Vorschau-Modus aktiv — Unveröffentlichte Änderungen werden angezeigt.Vorschau beenden