From 1f9107b620a45ac2c9c82b2ec75e197655b55f97 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 9 Jun 2026 12:59:58 +0200 Subject: [PATCH] docs(journey-editor): update README and strike stale spec references Add JourneyEditor, JourneyItemRow, JourneyAddBar, GeschichteSidebar to the geschichte README props table. Strike @dnd-kit/svelte-dnd-action library refs and raw orange-*/blue-600 color classes in the editor spec HTML. Co-Authored-By: Claude Sonnet 4.6 --- docs/specs/lesereisen-editor-spec.html | 16 ++++++++-------- frontend/src/lib/geschichte/README.md | 24 ++++++++++++++---------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/docs/specs/lesereisen-editor-spec.html b/docs/specs/lesereisen-editor-spec.html index 6b9ea590..c4565d7e 100644 --- a/docs/specs/lesereisen-editor-spec.html +++ b/docs/specs/lesereisen-editor-spec.html @@ -500,7 +500,7 @@ ElementWertHinweise Item-Zeile allgemein - Item-Containerflex items-stretch bg-white border border-line rounded-sm mb-2 overflow-hiddeninterlude: bg-orange-50 border-orange-200 + Item-Containerflex items-stretch bg-white border border-line rounded-sm mb-2 overflow-hiddeninterlude: bg-orange-50 border-orange-200 → --color-interlude-bg / --color-interlude-border CSS tokens Drag-Handlew-4 bg-surface border-r border-line flex items-center justify-center cursor-grab shrink-0aria-label="Reihenfolge ändern"; cursor-grabbing während Drag Positions-Nr.w-5 text-[10px] font-bold text-ink-3 flex items-start justify-center pt-2 shrink-0aus Array-Index, nicht item.position Entfernen-Buttonw-6 flex items-start justify-center pt-2 shrink-0× aria-label="Eintrag entfernen"; hover: text-red-500; Confirm nur wenn note vorhanden @@ -508,18 +508,18 @@ Brieftiteltext-[11px] font-semibold text-ink leading-snug mb-0.5document.title Briefmetatext-xs text-ink-3formatDate(doc.documentDate) · "von X" oder "von X an Y" Notiz-Textarea (sichtbar)w-full min-h-[40px] font-serif text-xs italic bg-surface border border-line rounded-sm p-1.5 resize-none focus:border-primary focus:bg-white mt-2auto-expand; bind:value={item.note} - „Notiz hinzufügen" Linktext-xs font-semibold text-blue-600 inline-flex items-center gap-1 mt-1togglet Notiz-Textarea + „Notiz hinzufügen" Linktext-xs font-semibold text-blue-600 → text-xs text-ink-3 underline hover:text-accenttogglet Notiz-Textarea „Notiz entfernen" Linktext-xs text-ink-3 inline-flex items-center gap-1 mt-1zeigt sich wenn note.trim() nicht leer; setzt note = '' und blendet Textarea aus Interlude-Item - Interlude-Containerbg-orange-50 border-orange-200 (überschreibt Item-Container)kein Positions-Kreis; Positions-Spalte zeigt Icon statt Zahl - Label „Zwischentext"text-[9px] font-bold uppercase tracking-widest text-orange-700 mb-1immer sichtbar; nicht editierbar - Zwischentext-Textareaw-full min-h-[44px] font-serif text-xs italic bg-white/60 border border-orange-200 rounded-sm p-1.5 resize-none focus:border-orange-400bind:value={item.note}; auto-expand; min 44px für Touch-Target + Interlude-Containerbg-orange-50 border-orange-200 → --color-interlude-bg left-accent border via --color-interlude-borderkein Positions-Kreis; Positions-Spalte zeigt Icon statt Zahl + Label „Zwischentext"text-orange-700 → color: var(--color-interlude-label)immer sichtbar; nicht editierbar + Zwischentext-Textareaborder-orange-200 focus:border-orange-400 → border-line focus-visible:ring-focus-ringbind:value={item.note}; auto-expand; min 44px für Touch-Target Aktionsleiste Add Barflex gap-2 pt-2 pb-1immer unten sichtbar, auch wenn Liste gefüllt „Brief hinzufügen" Buttonborder border-dashed border-line rounded-sm px-3 py-1.5 text-xs font-semibold text-ink-2 hover:border-primary hover:text-primary flex items-center gap-1öffnet existierende DocumentPicker-Komponente als Dropdown/Modal „Zwischentext hinzufügen" Buttongleich wie Brief-Buttonfügt neues Interlude-Item am Ende ein; Fokus auf das neue Textarea Drag-to-Reorder - Bibliothek@dnd-kit/core oder svelte-dnd-action (bereits im Projekt prüfen)kein neues Package ohne Absprache + Bibliothek@dnd-kit/core oder svelte-dnd-action → createBlockDragDrop<JourneyItemView> aus $lib/document/transcription/useBlockDragDrop.sveltekein externes Package; pointer-Events + data-drag-handle / data-block-wrapper Kontrakt Reorder-API-CallPUT /api/geschichten/{id}/items/reorder — body: [{id, position}] für alle Itemsnach jedem Drop ausgelöst; optimistisch: lokalen State sofort aktualisieren AccessibilityDrag-Handle: role="button" tabIndex=0; Keyboard: Space startet Drag, Arrow hoch/runter verschiebt, Space/Enter bestätigt, Esc abbrichtWCAG 2.1 SC 2.1.1 @@ -720,7 +720,7 @@ Split entfällt@media (max-width: 768px): flex-col; Sidebar-Sektionen als Collapsibles am Endegleich wie GeschichteEditor auf Mobile Collapsiblesdetails/summary oder eigene boolean-Toggle; Personen + Status separatgeschlossen beim ersten Laden; Fokus öffnet Touch & Drag - Drag auf MobileLong-Press (500ms) auf dem Drag-Handle aktiviert Dragdnd-kit unterstützt Touch nativ; kein separates Config nötig + Drag auf MobileMove-Up/Down Buttons statt Drag (44px touch targets)dnd-kit unterstützt Touch nativ → Pointer-Drag nur Desktop; Keyboard via Pfeil-Buttons Touch Target Itemsmin-h-[44px] für jede Item-ZeileWCAG 2.2 AA; durch Padding gesichert Add-Buttonsflex-1; volle verfügbare Breite geteiltmin-h-[44px] als Touch-Target Savebar @@ -779,7 +779,7 @@

Drag-to-Reorder

diff --git a/frontend/src/lib/geschichte/README.md b/frontend/src/lib/geschichte/README.md index 49024cfc..f1e6e959 100644 --- a/frontend/src/lib/geschichte/README.md +++ b/frontend/src/lib/geschichte/README.md @@ -4,7 +4,7 @@ UI for family stories (Geschichte) and reading journeys (Lesereise): the rich-te ## What this domain owns -Components: `GeschichteEditor.svelte`, `GeschichtenCard.svelte`, `GeschichteListRow.svelte`, `StoryReader.svelte`, `JourneyReader.svelte`, `JourneyItemCard.svelte`, `JourneyInterlude.svelte`. +Components: `GeschichteEditor.svelte`, `GeschichteSidebar.svelte`, `JourneyEditor.svelte`, `JourneyItemRow.svelte`, `JourneyAddBar.svelte`, `GeschichtenCard.svelte`, `GeschichteListRow.svelte`, `StoryReader.svelte`, `JourneyReader.svelte`, `JourneyItemCard.svelte`, `JourneyInterlude.svelte`. Utilities: `utils.ts`. ## What this domain does NOT own @@ -15,15 +15,19 @@ Utilities: `utils.ts`. ## Key components -| Component | Used in | Notes | -| -------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------- | -| `GeschichteEditor.svelte` | `/geschichten/new`, `/geschichten/[id]/edit` | Rich-text editor with person/document @-mentions and inline embeds | -| `GeschichtenCard.svelte` | Person-detail sidebar | Sidebar card showing the 3 most recent stories linked to a person — NOT the list page | -| `GeschichteListRow.svelte` | `/geschichten` (list) | Row component for the list; shows JOURNEY type badge (`text-xs` orange pill) | -| `StoryReader.svelte` | `/geschichten/[id]` (STORY branch) | Renders sanitised rich-text body, persons section, documents section, and author actions | -| `JourneyReader.svelte` | `/geschichten/[id]` (JOURNEY branch) | Renders intro paragraph, ordered items list, empty-state; delegates to ItemCard/Interlude | -| `JourneyItemCard.svelte` | `JourneyReader.svelte` | Whole-card `` for a document item; dated/undated aria-label, ✎ annotation glyph | -| `JourneyInterlude.svelte` | `JourneyReader.svelte` | Typographic aside between letters; ❦ glyph, `aria-label="Kuratorennotiz"` | +| Component | Used in | Notes | +| -------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | +| `GeschichteEditor.svelte` | `/geschichten/new`, `/geschichten/[id]/edit` | Rich-text editor (TipTap) for STORY type; delegates sidebar to `GeschichteSidebar` | +| `GeschichteSidebar.svelte` | `GeschichteEditor`, `JourneyEditor` | Status badge + PersonMultiSelect sidebar; `
` mobile collapsibles with 44px touch targets | +| `JourneyEditor.svelte` | `/geschichten/[id]/edit` (JOURNEY branch) | Curator editing surface: title, intro textarea, ordered item list with drag/reorder, add bar, save/publish | +| `JourneyItemRow.svelte` | `JourneyEditor.svelte` | Item row: drag handle, move-up/down, note textarea (PATCH on blur), inline remove confirm | +| `JourneyAddBar.svelte` | `JourneyEditor.svelte` | Two add buttons: document picker (`DocumentPickerDropdown`) and interlude draft form | +| `GeschichtenCard.svelte` | Person-detail sidebar | Sidebar card showing the 3 most recent stories linked to a person — NOT the list page | +| `GeschichteListRow.svelte` | `/geschichten` (list) | Row component for the list; shows JOURNEY type badge (`text-xs` orange pill) | +| `StoryReader.svelte` | `/geschichten/[id]` (STORY branch) | Renders sanitised rich-text body, persons section, documents section, and author actions | +| `JourneyReader.svelte` | `/geschichten/[id]` (JOURNEY branch) | Renders intro paragraph, ordered items list, empty-state; delegates to ItemCard/Interlude | +| `JourneyItemCard.svelte` | `JourneyReader.svelte` | Whole-card `` for a document item; dated/undated aria-label, ✎ annotation glyph | +| `JourneyInterlude.svelte` | `JourneyReader.svelte` | Typographic aside between letters; ❦ glyph, `aria-label="Kuratorennotiz"` | ## utils.ts