Erweiterung der Komponentenbibliothek
Die gemeinsame Komponentenbibliothek in packages/ui/ wurde von 22 auf 50 vorkonfigurierte shadcn/ui-Komponenten ausgebaut. Neu hinzugekommen sind Accordion, Avatar, Calendar, Carousel, Checkbox, Collapsible, Command, Drawer, Input OTP, Menubar, Pagination, Radio Group, Resizable, Scroll Area, Separator, Slider, Switch, Table, Tabs, Toggle, Toggle Group sowie Typography – allesamt mit konsistentem Spacing, Border Radius und Color Tokens.
Das Dashboard verfügt jetzt über eine automatische Breadcrumb-Navigationsleiste, die die aktuelle Routenhierarchie widerspiegelt.
Extrahierte gemeinsame Komponenten
Sieben Komponenten wurden aus wiederkehrenden Mustern im Dashboard in eigenständige, wiederverwendbare Module ausgelagert.
Drei Layout-Wrapper reduzieren den Boilerplate-Code für häufige Seitenmuster: LegalPage umschließt die Datenschutz-, AGB- und Impressumsseiten mit einer einheitlichen Struktur. DashboardFeaturePage kombiniert Feature-Gate-Prüfung, Suspense-Boundaries und LoadingSpinner in einem einzigen Wrapper, der von den vier KI-Feature-Seiten genutzt wird. CenteredPage stellt das zentrierte Layout bereit, das von Fehler-, Not-Found- und Logout-Seiten gemeinsam verwendet wird. CollapsibleSection fügt einen Toggle mit Anzahl der Einträge und einer Aktion zum Leeren hinzu – extrahiert aus den Verlaufskomponenten für Content- und Bildgenerierung.
Neue Hilfskomponenten
Sechs neue Komponenten erweitern das UI-Toolkit um gängige Interaktionsmuster. CopyButton rendert einen Copy-to-Clipboard-Button, der nach dem Klick für zwei Sekunden ein Check-Icon anzeigt. StatusBadge zeigt semantische Statusindikatoren mit fünf Varianten an (success, warning, error, info, neutral). StatCard ist eine KPI-Anzeigecard, die ein Icon, ein optionales Badge, einen formatierten Wert und untergeordnete Inhalte akzeptiert.
ConfirmDialog hüllt den shadcn/ui AlertDialog mit Variantenunterstützung für destruktive und warnende Bestätigungsabläufe inklusive Ladezustand ein. LoadingButton erweitert den shadcn/ui Button um einen integrierten Ladespinner, der während asynchroner Operationen automatisch deaktiviert wird. CreditCost rendert ein eingebettetes Coins-Icon mit Kostentext zur Anzeige der Credit-Kosten für KI-Features.
Contributors
Sascha Rahn