refactor(frontend): shadcn-Dialog-Wrapper um fehlende Sub-Komponenten erweitern #86

New issue

Closed

opened 2026-06-22 17:12:01 +00:00 by niboer · 0 comments

niboer commented

2026-06-22 17:12:01 +00:00

Owner

Beschreibung

Der Dialog-Wrapper in rontend/src/lib/components/ui/dialog.svelte wrapt nur DialogPrimitive.Root aus bits-ui. Sub-Komponenten wie Trigger, Content, Overlay, Portal, Title, Description werden nicht exportiert. Seiten muessen daher direkt its-ui importieren, was den shadcn-Abstraktionslayer umgeht.

Motivation

In der Gaesteliste-Implementation (#72) zwang dies zu folgendem inkonsistenten Import:

ypescript import { Dialog as DialogPrimitive } from 'bits-ui';

Statt des einheitlichen Pfads $lib/components/ui/dialog.svelte. Das erschwert:

Austausch von bits-ui gegen eine andere Bibliothek (Vendor-Lock-in)
Einheitliches Styling aller Dialoge (CSS-Anpassungen muessen 2x gemacht werden)
Lesbarkeit und Konsistenz im Codebase

Vorgeschlagene Umsetzung

Den Dialog-Wrapper erweitern, sodass er die bits-ui-Sub-Komponenten als benannte Snippets/Slots exportiert:

/components/ui/dialog.svelte ??? Root (bestehend, bind:open) ??? Trigger (wrapper um DialogPrimitive.Trigger) ??? Content (wrapper mit shadcn-Standard-Klassen) ??? Overlay (wrapper mit shadcn-Dimming) ??? Portal (wrapper um DialogPrimitive.Portal) ??? Title (wrapper mit shadcn-Typografie) ??? Description (wrapper mit muted-Typografie)

Analog zum Pattern des utton.svelte oder adge.svelte.

Akzeptanzkriterien

Dialog.Trigger akzeptiert children-Snippet
Dialog.Content hat shadcn-Standard-Klassen (Position, Shadow, Padding)
Dialog.Overlay hat g-black/40-Standard
Dialog.Title setzt ext-lg font-semibold
Dialog.Description setzt ext-sm text-muted-foreground
Bestehende Nutzung in +page.svelte kann auf $lib/components/ui/dialog.svelte umgestellt werden
Kein direkter bits-ui-Import mehr fuer Dialoge noetig

Alternativen

Die /guests-Route als separate Route beibehalten (wie urspruenglich in design.md geplant), dann waere nur eine Seite betroffen.

### Beschreibung Der Dialog-Wrapper in rontend/src/lib/components/ui/dialog.svelte wrapt nur DialogPrimitive.Root aus bits-ui. Sub-Komponenten wie Trigger, Content, Overlay, Portal, Title, Description werden nicht exportiert. Seiten muessen daher direkt its-ui importieren, was den shadcn-Abstraktionslayer umgeht. ### Motivation In der Gaesteliste-Implementation (#72) zwang dies zu folgendem inkonsistenten Import: ` ypescript import { Dialog as DialogPrimitive } from 'bits-ui'; ` Statt des einheitlichen Pfads $lib/components/ui/dialog.svelte. Das erschwert: - Austausch von bits-ui gegen eine andere Bibliothek (Vendor-Lock-in) - Einheitliches Styling aller Dialoge (CSS-Anpassungen muessen 2x gemacht werden) - Lesbarkeit und Konsistenz im Codebase ### Vorgeschlagene Umsetzung Den Dialog-Wrapper erweitern, sodass er die bits-ui-Sub-Komponenten als benannte Snippets/Slots exportiert: ` /components/ui/dialog.svelte ??? Root (bestehend, bind:open) ??? Trigger (wrapper um DialogPrimitive.Trigger) ??? Content (wrapper mit shadcn-Standard-Klassen) ??? Overlay (wrapper mit shadcn-Dimming) ??? Portal (wrapper um DialogPrimitive.Portal) ??? Title (wrapper mit shadcn-Typografie) ??? Description (wrapper mit muted-Typografie) ` Analog zum Pattern des utton.svelte oder adge.svelte. ### Akzeptanzkriterien - [ ] Dialog.Trigger akzeptiert children-Snippet - [ ] Dialog.Content hat shadcn-Standard-Klassen (Position, Shadow, Padding) - [ ] Dialog.Overlay hat g-black/40-Standard - [ ] Dialog.Title setzt ext-lg font-semibold - [ ] Dialog.Description setzt ext-sm text-muted-foreground - [ ] Bestehende Nutzung in +page.svelte kann auf $lib/components/ui/dialog.svelte umgestellt werden - [ ] Kein direkter bits-ui-Import mehr fuer Dialoge noetig ### Alternativen Die /guests-Route als separate Route beibehalten (wie urspruenglich in design.md geplant), dann waere nur eine Seite betroffen.

niboer added this to the MS10: Vollständige UI milestone

2026-06-22 17:12:01 +00:00

niboer added the

component/frontend

prio/medium

type/refactor

labels

2026-06-22 17:12:01 +00:00

niboer referenced this issue from a commit

2026-06-22 17:37:02 +00:00

refactor(frontend): shadcn-Dialog-Wrapper in modulare Sub-Komponenten aufgeteilt

niboer referenced this issue from a commit