# Geschichten — Dokumentverknüpfung

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.

Final Spec
2026-05-02
@leonievoss
D

## Dokument-Entdeckung

Lesende entdecken Geschichten, die sich auf einen Brief beziehen, direkt beim Öffnen des Details-Drawers auf der Dokumentdetailseite.

/documents/[id] · DocumentMetadataDrawer
Konzept — US-BLOG-005

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.

### D-1 — Dokument ohne geöffneten Drawer

D-1
Normalzustand: Der Details-Drawer ist geschlossen. Für den Lesenden ändert sich optisch nichts — die Geschichten-Spalte ist erst sichtbar, wenn der Drawer geöffnet wird.
Desktop ≥1024px — Drawer geschlossen, PDF-Viewer füllt die verbleibende Höhe.
Desktop · 1040px · Drawer geschlossen
←
Brief an Franz Raddatz, 12. Juli 1938
12. Juli 1938
FR
Franz Raddatz
EM
Emma Müller
Breslau, den 12. Juli 1938
Dein Vater

#### Hinweis — D-1

    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.

### D-2 — Drawer offen · 4 Spalten mit Geschichten

D-2
Der Drawer wird geöffnet. Weil dieses Dokument mit veröffentlichten Geschichten verknüpft ist, schaltet das Grid von 3 auf 4 Spalten um. Die Geschichten-Spalte erscheint ganz rechts — gleiche typografische Behandlung wie die anderen Spalten.
Desktop ≥1024px — Prop `geschichten.length > 0` ist true, Grid-Klasse ist `lg:grid-cols-4`.
Desktop · 1040px · Drawer offen · 4 Spalten
←
Brief an Franz Raddatz, 12. Juli 1938
12. Juli 1938
FR
Franz Raddatz
EM
Emma Müller
Details
Datum
12. Juli 1938
Ort
Breslau
Status
Hochgeladen
Personen
Absender
FR
Franz Raddatz
Empfänger
EM
Emma Müller
Schlagwörter
Familie Krieg Breslau
Geschichten
Der Sommer in Breslau
von Maria Raddatz · 14. März 2025
Die Hochzeit im Krieg
von Gertrud Koch · 18. Okt. 2024
+ Geschichte anhängen
Breslau, den 12. Juli 1938

#### impl-ref — D-2 · Geschichten-Spalte im Drawer

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"

### D-3 — Mobile · Drawer offen, Geschichten-Spalte gestapelt

D-3
Auf Mobile ist das Grid einspaltig (`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 <640px — kein Person-Chip-Row, kebab statt einzelner Action-Buttons, alle Drawer-Spalten gestapelt.
Mobile · 320px · Drawer offen
9:41 ●●●
←
Brief an Franz Raddatz…
12. Juli 1938
Details
Datum
12. Juli 1938
Ort
Breslau
Status
Hochgeladen
Personen
Absender
FR
Franz Raddatz
Empfänger
EM
Emma Müller
Schlagwörter
Familie Krieg Breslau
Geschichten
Der Sommer in Breslau
von Maria Raddatz · 14. März 2025
Die Hochzeit im Krieg
von Gertrud Koch · 18. Okt. 2024
Alle Geschichten anzeigen →
+ Geschichte anhängen

#### Hinweis — D-3 Mobile

    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.

## LLM-Implementierungsguide

### Backend — Endpunkt-Erweiterung

Der `GET /api/documents/{id}` Response (oder ein separater Endpunkt) muss ein `geschichten`-Array enthalten:

- Felder pro Eintrag: `id`, `title`, `author: { displayName }`, `publishedAt`
- Nur Geschichten mit Status `PUBLISHED` werden zurückgegeben — Filterung auf Service-Ebene, nicht im Controller
- Maximale Anzahl im Response: unbegrenzt; das Frontend blendet einen "Alle anzeigen"-Link ein, wenn mehr als 3 vorhanden sind

### Frontend — Änderungen

1. `+page.server.ts`: `geschichten`-Array aus dem API-Response extrahieren und als Prop an `DocumentMetadataDrawer` übergeben
2. `DocumentMetadataDrawer`: neue Prop `geschichten: Geschichte[]` und `canWrite: boolean` annehmen
3. Grid-Klasse dynamisch: `lg:grid-cols-{geschichten.length > 0 ? 4 : 3}`
4. 4. Spalte konditional rendern: `{#if geschichten.length > 0}`
5. "Alle anzeigen"-Link: nur wenn `geschichten.length > 3`, Link zu `/geschichten?documentId={id}`
6. "+ Geschichte anhängen"-Link: nur wenn `canWrite`, Link zu `/geschichten/new?documentId={id}`

### Keine Änderungen erforderlich

- DocumentTopBar: kein neuer Button, kein neues Icon
- Andere Drawer-Spalten: Details, Personen, Schlagwörter bleiben unverändert
- Mobile Layout: das Grid-Stacking ist automatisch via Tailwind, keine separate Mobile-Logik

### Implementierungsreferenz — Typedefinition

Feld | Typ | Quelle
--- | --- | ---
`id` | `string (UUID)` | Backend
`title` | `string` | Backend
`author.displayName` | `string` | Backend
`publishedAt` | `string (ISO date)` | Backend