Entdeckung verlinkter Geschichten über die Dokumentdetailseite. Die Geschichten-Spalte erscheint im Details-Drawer als vierte Spalte neben Details, Personen und Schlagwörtern — nur wenn mindestens eine veröffentlichte Geschichte mit diesem Dokument verknüpft ist.
Lesende entdecken Geschichten, die sich auf einen Brief beziehen, direkt beim Öffnen des Details-Drawers auf der Dokumentdetailseite.
Es wird kein neuer Button in die DocumentTopBar eingefügt. Der bestehende "Details"-Toggle ist der einzige Einstiegspunkt — er öffnet den DocumentMetadataDrawer, der bereits Details, Personen und Schlagwörter enthält. Die Geschichten-Spalte erscheint dort als vierte Spalte, wenn mindestens eine veröffentlichte Geschichte mit diesem Dokument verknüpft ist.
Wenn keine Geschichte verknüpft ist, zeigt der Drawer das gewohnte 3-spaltige Layout — kein leerer Zustand, kein Hinweis, kein Platzhalter. Stille ist korrekt (US-BLOG-005 verlangt keinen Empty State). Die Grid-Klasse wechselt konditionell von lg:grid-cols-3 zu lg:grid-cols-4 über eine Prop.
Die Prop geschichten: Geschichte[] wird vom +page.server.ts der Dokumentdetailseite befüllt. Nur veröffentlichte Geschichten werden übergeben — die Filterung erfolgt auf Serviceebene im Backend. Der DocumentMetadataDrawer ist rein präsentational und trifft keine eigenen Datenbankabfragen.
Keine Änderung an der DocumentTopBar. Der "Details"-Button ist bereits implementiert und öffnet/schließt den Drawer. Dieser Screen zeigt den geschlossenen Zustand — identisch mit dem heutigen Verhalten.
geschichten.length > 0 ist true, Grid-Klasse ist lg:grid-cols-4.| Element | Wert / Klasse | Hinweis |
|---|---|---|
| Grid | ||
| Grid mit Geschichten | grid grid-cols-1 gap-6 lg:grid-cols-4 |
Konditional: geschichten.length > 0 |
| Grid ohne Geschichten | grid grid-cols-1 gap-6 lg:grid-cols-3 |
Default — keine Änderung |
| Spalten-Heading | ||
| Col 4 Heading | mb-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase |
Identisch mit Col 1–3 Headings |
| Story-Einträge | ||
| Eintrags-Wrapper | space-y-3 |
|
| Story-Titel-Link | block font-serif text-sm text-ink hover:text-primary hover:underline |
Verlinkt auf /geschichten/[id] |
| Story-Meta | font-sans text-[10px] text-ink-3 |
"von [author] · [date]" |
| Aktionslinks | ||
| "Alle anzeigen" Link | font-sans text-[10px] text-ink-3 hover:text-primary |
Nur wenn stories.length > 3; verlinkt auf /geschichten?documentId=xxx |
| "+ Geschichte anhängen" | font-sans text-[10px] text-turquoise hover:underline |
Nur sichtbar für BLOG_WRITE — via canWrite-Prop |
| Props | ||
| Neue Prop | geschichten: Geschichte[] |
Wird von +page.server.ts an DocumentMetadataDrawer übergeben |
| Neue Prop | canWrite: boolean |
Steuert Sichtbarkeit von "+ Geschichte anhängen" |
grid-cols-1). Alle vier Abschnitte stapeln sich vertikal. Die Geschichten-Spalte erscheint als letzter Block — unterhalb von Schlagwörtern. Layout und Typografie sind identisch mit Desktop, nur volle Breite.Mobile erfordert keine eigene Komponente. Das Tailwind-Grid `grid-cols-1 lg:grid-cols-4` erledigt das Stacking automatisch. Die Geschichten-Spalte erscheint zuletzt im DOM (nach Schlagwörter) — das ist die korrekte Lesereihenfolge auf Mobile.
Der GET /api/documents/{id} Response (oder ein separater Endpunkt) muss ein geschichten-Array enthalten:
id, title, author: { displayName }, publishedAtPUBLISHED werden zurückgegeben — Filterung auf Service-Ebene, nicht im Controller+page.server.ts: geschichten-Array aus dem API-Response extrahieren und als Prop an DocumentMetadataDrawer übergebenDocumentMetadataDrawer: neue Prop geschichten: Geschichte[] und canWrite: boolean annehmenlg:grid-cols-{geschichten.length > 0 ? 4 : 3}{#if geschichten.length > 0}geschichten.length > 3, Link zu /geschichten?documentId={id}canWrite, Link zu /geschichten/new?documentId={id}| Feld | Typ | Quelle |
|---|---|---|
id | string (UUID) | Backend |
title | string | Backend |
author.displayName | string | Backend |
publishedAt | string (ISO date) | Backend |