From 5bd7f0d48605594271e2fcee75d7c6ea820acac5 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 15 Apr 2026 22:48:27 +0200 Subject: [PATCH] docs(#240): add Mission Control Strip spec and pattern alternatives MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds the design decision record for how to expand the dashboard without pushing content below the fold: a full-width 3-column strip (Segmentierung / Transkription / Lesefertig) below the existing grid. - dashboard-expansion-patterns.html — four pattern alternatives evaluated (Tabs, Accordion, Mission Control, Priority Queue) with annotated mockups, engagement feature proposal, and final recommendation. - mission-control-strip-final.html — clean implementation blueprint with pipeline diagram, column definitions, seeded-weekly-shuffle sorting, expert-flag escape hatch, all Tailwind impl-ref values, and backend contracts. Co-Authored-By: Claude Sonnet 4.6 --- docs/specs/dashboard-expansion-patterns.html | 1122 ++++++++++++++++++ docs/specs/mission-control-strip-final.html | 814 +++++++++++++ 2 files changed, 1936 insertions(+) create mode 100644 docs/specs/dashboard-expansion-patterns.html create mode 100644 docs/specs/mission-control-strip-final.html diff --git a/docs/specs/dashboard-expansion-patterns.html b/docs/specs/dashboard-expansion-patterns.html new file mode 100644 index 00000000..0907ca9e --- /dev/null +++ b/docs/specs/dashboard-expansion-patterns.html @@ -0,0 +1,1122 @@ + + + + + +Dashboard Expansion — 4 Layout-Muster (Issue #240) + + + +
+ + +
+

Dashboard Expansion — 4 Layout-Muster

+
+ Issue #240 + Leonie Voss — UX & Accessibility + 15. April 2026 +
+
src/routes/+page.svelte  ·  src/lib/components/Dashboard*.svelte  ·  Muster A Tabs · B Accordion · C Mission Control · D Priority Queue
+
+ +
+

Das Problem

+

+ Die rechte Spalte der Startseite ist mit DropZone + „Metadaten fehlen" bereits ausgelastet. + Issue #240 möchte zwei weitere Karten ergänzen: Transkription ausstehend und Lesefertig. + Direkt gestapelt scrollt die Spalte sofort aus dem sichtbaren Bereich — ein 67-jähriger Nutzer auf einem kleinen + Display sieht die unteren Karten nie. +

+

+ Der Nutzer schlug Tabs vor (Neueste Aktivität / Transkription fehlt / Metadaten fehlen / Lesefertig). + Diese Spec bewertet diesen Vorschlag und zeigt drei weitere Muster im Vergleich. + Alle Muster werden bei 320 px (Mobiltelefon) und Desktop (~55 % Skalierung) gezeigt. +

+
+ + +
+
Ist-Zustand — rechte Spalte überfüllt
+
+
+
+
+ +
Archiv
Personen
Gespräche
+
MR
+
+
+
⌕
Dokumente durchsuchen…
↑↓ Datum
+ Filter
+
+
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
Karl Raddatz
12. Apr
+
Taufurkunde Karl Raddatz
Standesamt
9. Apr
+
Postkarte aus Breslau
Martha Raddatz
7. Apr
+
Familienfoto Sommer 1952
Unbekannt
3. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop oder klicken
+
+
Metadaten fehlen
+
Familienfoto 1952
+
Standesamtsurkunde
+
Reisepass Opa Heinrich
+ Alle anzeigen → +
+
▼ TRANSKRIPTION FEHLT (neu) — scrollt aus dem Sichtfeld
+
▼ LESEFERTIG (neu) — nie sichtbar ohne Scrollen
+
+
+
+
+ Desktop (55 % Skalierung) — zwei neue Karten würden die rechte Spalte sprengen +
+
+
+ +
+ + + + +
+
Muster A — Tabs in der rechten Spalte (Vorschlag des Nutzers)
+ +
Aufgaben-Karte mit Tab-Strip
+
DropZone bleibt oben. Darunter: eine Karte mit drei Tabs (Metadaten / Transkription / Lesefertig).
+ +
+ + Kein zusätzlicher Scroll in der rechten Spalte + + Bekanntes Muster für jüngere Nutzer + + Platzsparend in 300 px + − Inaktive Kategorien unsichtbar — Senioren übersehen sie + − Drei kurze Labels kaum lesbar bei 300 px / 320 px + − JS-Zustand nötig (aktiver Tab) +
+ +

+ Der ursprüngliche Vorschlag nannte vier Tabs für die gesamte Seite (Neueste Aktivität / Transkription / Metadaten / Lesefertig). + Das ist ein UX-Antipattern: „Neueste Aktivität" ist der häufigste Anwendungsfall — ihn hinter einem Klick zu verstecken erhöht den Aufwand für jeden Dashboard-Besuch. + Tabs sollten ausschließlich auf die drei To-do-Widget-Kategorien in der rechten Spalte angewendet werden, nicht auf die gesamte Seite. +

+

+ Accessibility: Tab-Elemente müssen role="tablist", role="tab", aria-selected und + role="tabpanel" tragen. Jeder Tab braucht min-h-[44px] (WCAG 2.2 Touchziel). + Drei Tabs in einer 300-px-Spalte = ~100 px pro Tab — grenzwertig auf Deutsch mit langen Wörtern. +

+ +
+ +
+
+
+
+
⌕ Dokumente…
+
↑
Hochladen
+ +
+
+
Metadaten
+
Transkr.
+
Lesefertig
+
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+
Reisepass Opa
Absender fehlt
+ Alle anzeigen → +
+ +
+
Neueste Aktivität
+
Brief von Oma Martha
+
Taufurkunde Karl R.
+
47 Dok. · 12 Pers.
+
+
+
+ Mobil 320 px +
+ + +
+
+
+ +
Archiv
Personen
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
12. Apr
+
Taufurkunde Karl Raddatz
9. Apr
+
Postkarte aus Breslau
7. Apr
+
Familienfoto Sommer 1952
3. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
+
Metadaten
+
Transkr.
+
Lesefertig
+
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+
Reisepass Opa Heinrich
Absender fehlt
+ Alle anzeigen → +
+
+
+
+
+ Desktop (55 %) — DropZone + Tabbed-Karte; zwei Kategorien versteckt hinter Klick +
+
+ +
+ + + + + + + + + + +
ElementTailwind-KlassenWertHinweis
Tab-Stripflex border-b border-line—ARIA: role="tablist"
Tab inaktivpx-3 py-3 text-xs font-medium text-gray-500 border-b-2 border-transparent whitespace-nowrap -mb-pxmin-h 44 px ✓role="tab" aria-selected="false"
Tab aktivpx-3 py-3 text-xs font-semibold text-ink border-b-2 border-ink -mb-px2 px navy Unterliniearia-selected="true"
Tab-Panelpt-3 focus:outline-none—role="tabpanel" tabindex="0"
Aufgaben-Karterounded-sm border border-line bg-white p-4 flex-1padding 16 pxErsetzt 3 separate Karten
Zeile mit Kontextflex flex-col py-2 border-b border-line last:border-0min-h ~44 pxz. B. „3 von 8 Blöcken geprüft"
+
+
+ +
+ + + + +
+
Muster B — Accordion-Stapel in der rechten Spalte
+ +
Aufklappbare Kategorien
+
DropZone oben. Darunter: drei Accordion-Sektionen, standardmäßig nur die dringlichste offen.
+ +
+ + Alle drei Kategorien-Überschriften immer sichtbar + + Kein JS — implementierbar mit nativem <details> + + Vertraut für 60+ (wie FAQ) + − Inhalt zu 2/3 verborgen (nur Überschriften sichtbar) + − „Lesefertig" wird meist zugeklappt bleiben und übersehen +
+ +

+ Jede Sektion zeigt eine klickbare Kopfzeile (Pfeil + Label + Anzahl). Server-seitig wird die Sektion mit der + höchsten Anzahl als <details open> gerendert. Kein Client-JS nötig — native + <details>/<summary>-Elemente liefern ARIA-Accessibility gratis. + Sortierung der offenen Sektion nach Dringlichkeit: Metadaten → Transkription → Lesefertig. +

+ +
+ +
+
+
+
+
⌕ Dokumente…
+
↑
Hochladen
+
+
+
▼ Metadaten fehlen (5)
+
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+ Alle 5 anzeigen → +
+
+
▶ Transkription fehlt (8)
+
▶ Lesefertig ✓ (3)
+
+
+
Neueste Aktivität
+
Brief von Oma Martha
+
Taufurkunde Karl R.
+
+
+
+ Mobil 320 px +
+ + +
+
+
+ +
Archiv
Personen
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
12. Apr
+
Taufurkunde Karl Raddatz
9. Apr
+
Postkarte aus Breslau
7. Apr
+
Familienfoto Sommer 1952
3. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
+
▼ Metadaten fehlen (5)
+
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+ Alle 5 anzeigen → +
+
+
▶ Transkription fehlt (8)
+
▶ Lesefertig ✓ (3)
+
+
+
+
+
+ Desktop (55 %) — Metadaten-Sektion offen, Transkription und Lesefertig zugeklappt +
+
+ +
+ + + + + + + + + + +
ElementHTML / Tailwind-KlassenWertHinweis
Accordion-Wrapper<details> nativ—Accessibility gratis, kein JS
Accordion-Header<summary class="flex items-center justify-between min-h-[44px] cursor-pointer list-none">min-h 44 px ✓WCAG 2.2 Touchziel
Pfeil-Icontransition-transform group-open:rotate-90w-4 h-4CSS-only; kein JS
Zähler-Badgeml-auto font-mono text-xs text-gray-400—z. B. „(5)"
Dringlichste Sektion<details open>—Server-seitig rendern: if incompleteDocs.length >= needsTrans.length
Accordion-Inhaltpt-1 pb-2 direkt nach <summary>—Keine overflow:hidden-Animation nötig
+
+
+ +
+ + + + +
+
Muster C — Mission-Control-Streifen  ★ Empfohlen
+ +
Volle Breite unterhalb des Hauptgitters
+
Rechte Spalte bleibt unverändert. Unterhalb des Gitters: drei gleichwertige Spalten als neuer horizontaler Aktionsbereich.
+ +
+ + Alle drei Kategorien gleichzeitig sichtbar — kein Klick nötig + + „Neueste Aktivität" bleibt primärer Inhalt, nichts rückt dahinter + + Kein JS-Zustand + + „Lesefertig" bekommt eigene mint-Karte als visuellen Applaus + + Mobil stapeln die drei Spalten natürlich + − Leichtes Scrollen auf Desktop erforderlich + − Sechster API-Aufruf beim Dashboard-Load (via Promise.allSettled isoliert) +
+ +

+ Der Ist-Zustand der rechten Spalte bleibt vollständig erhalten. Die zwei neuen Karten des Issue #240 werden + nicht in die rechte Spalte gepackt, sondern in einen neuen vollbreiten Abschnitt direkt unterhalb des + bestehenden Zwei-Spalten-Gitters. Der Abschnitt ist nur sichtbar, wenn mindestens eine der beiden Kategorien + Einträge hat ({#if needsTranscription.length > 0 || readyToRead.length > 0}). +

+

+ Die „Lesefertig"-Spalte erhält einen mint-gefärbten Hintergrund (bg-mint/10 border-mint) als positives Signal — kein + neutrales To-do, sondern eine Einladung zum Lesen. Leere Zustände zeigen eine kurze Erfolgsmeldung in + bg-mint/5, nicht eine tote weiße Box. +

+ +
+ +
+
+
+
+
⌕ Dokumente…
+ +
↑
Hochladen
+
+
Metadaten fehlen
+
Familienfoto 1952
+
Standesamtsurkunde
+ Alle anzeigen → +
+ +
+
Neueste Aktivität
+
Brief von Oma Martha
+
Taufurkunde Karl R.
+
47 Dok. · 12 Pers.
+
+ +
+
Was braucht Aufmerksamkeit?
+
+
Transkription fehlt
+
Taufurkunde Karl R.
Noch nicht begonnen
+
Reisepass Opa Heinrich
3 von 8 Blöcken geprüft
+ Alle 8 anzeigen → +
+
+
Lesefertig ✓
+
Postkarte aus Breslau
100 % geprüft
+
Brief Oma Martha 1938
95 % geprüft
+ Alle 3 anzeigen → +
+
+
+
+ Mobil 320 px — Streifen stapelt vertikal +
+ + +
+
+
+ +
Archiv
Personen
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+ +
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
12. Apr
+
Taufurkunde Karl Raddatz
9. Apr
+
Postkarte aus Breslau
7. Apr
+
Familienfoto Sommer 1952
3. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
Metadaten fehlen
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+
Reisepass Opa Heinrich
Absender fehlt
+ Alle anzeigen → +
+
+
+ + +
+
Was braucht Aufmerksamkeit?
+
+ +
+
Transkription fehlt
+
Taufurkunde Karl R.
Noch nicht begonnen
+
Reisepass Opa Heinrich
3 von 8 Blöcken geprüft
+
Standesamt 1889
Noch nicht begonnen
+ Alle 8 anzeigen → +
+ +
+
Lesefertig ✓
+
Postkarte aus Breslau
100 % geprüft
+
Brief Oma Martha 1938
95 % geprüft
+
Heiratsurkunde 1921
91 % geprüft
+ Alle 3 lesen → +
+ +
+
✓
+
Alle Dokumente transkribiert
+
Keine offenen Aufgaben
+
+
+
+
+
+ Desktop (55 %) — Hauptgitter unberührt; Streifen darunter zeigt leeren Zustand in Spalte 3 +
+
+ +
+ + + + + + + + + + + + +
ElementTailwind-KlassenWertHinweis
Streifen-Wrappermt-4 bg-white border border-line rounded-sm p-6padding 24 pxDirekt nach bestehendem div.mt-4.grid
Streifen-Titeltext-xs font-bold uppercase tracking-widest text-gray-400 mb-412 px / 700Standard-Section-Title-Muster
3-Spalten-Gridgrid grid-cols-1 gap-4 sm:grid-cols-3gap 16 pxMobil: 1 Spalte, sm+: 3
Transkription-Spaltebg-surface rounded-sm border border-line p-4—Neutral — es ist eine Aufgabe
Lesefertig-Spaltebg-mint/10 rounded-sm border border-mint p-4—Mint-Ton = positives Signal
Leerer Zustandflex flex-col items-center justify-center text-center bg-mint/5 border border-dashed border-mint rounded-sm p-6 min-h-[80px]min-h 80 pxNiemals leere graue Box
Untertext-Zeiletext-xs text-gray-400 mt-0.512 pxz. B. „3 von 8 Blöcken geprüft"
Sichtbarkeit{#if needsTranscription.length > 0 || readyToRead.length > 0}—Streifen komplett ausgeblendet wenn leer
+
+
+ +
+ + + + +
+
Muster D — Priorisierte Aufgabenliste (Priority Queue)
+ +
„Was als nächstes?" — zusammengeführte Liste
+
Alle drei Kategorien in einer sortierten Liste mit Typ-Badge. Ersetzt die separaten drei Karten in der rechten Spalte.
+ +
+ + Keine mentale Auswahl zwischen Kategorien + + Eine einzelne Entscheidungsfläche + − „Lesefertig" verliert seinen Belohnungscharakter (gemischt mit Aufgaben) + − Merge-Logik auf dem Server ist komplexer als zwei separate Queries + − Farb-Badge allein reicht nicht — Icon + Label immer nötig (WCAG 1.4.1) +
+ +

+ Alle drei Kategorien werden in einer einzigen sortierten Liste zusammengeführt. Sortierung: + Metadaten fehlen (blockiert Suche) → Transkription fehlt → Lesefertig. Jede Zeile trägt ein farbkodiertes Label; + Farbe darf niemals der einzige Indikator sein — Icon und Text sind Pflicht (WCAG 1.4.1). +

+

+ Kontrast-Check: Orange-700 auf Weiß = 5,4:1 ✓ AA. Navy auf Weiß = 14,5:1 ✓ AAA. Green-800 auf Weiß = 9,7:1 ✓ AAA. +

+ +
+ +
+
+
+
+
⌕ Dokumente…
+
↑
Hochladen
+
+
Was als nächstes?
+
Familienfoto 1952
⚠ Metadaten fehlen
+
Taufurkunde Karl R.
✏ Noch nicht begonnen
+
Reisepass Opa
✏ 3 von 8 Blöcken
+
Postkarte 1943
✓ Lesefertig
+
+
+
Neueste Aktivität
+
Brief von Oma Martha
+
Taufurkunde Karl R.
+
+
+
+ Mobil 320 px +
+ + +
+
+
+ +
Archiv
Personen
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
12. Apr
+
Taufurkunde Karl Raddatz
9. Apr
+
Postkarte aus Breslau
7. Apr
+
Familienfoto Sommer 1952
3. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
Was als nächstes?
+
Familienfoto 1952
⚠ Metadaten fehlen
+
Standesamtsurkunde
⚠ Datum fehlt
+
Taufurkunde Karl R.
✏ Noch nicht begonnen
+
Reisepass Opa Heinrich
✏ 3 von 8 Blöcken
+
Postkarte aus Breslau
✓ Lesefertig
+
+
+
+
+
+ Desktop (55 %) — eine Liste, drei Typen durch Farbe + Icon + Label unterschieden +
+
+ +
+ + + + + + + + + + + +
ElementTailwind-KlassenWertHinweis
Listen-Wrapperrounded-sm border border-line bg-white p-4 flex-1—Ersetzt separate 3 Karten
Prioritäts-Zeileflex items-start gap-3 py-2 border-b border-line last:border-0 min-h-[44px]min-h 44 px ✓WCAG touch target
Typ-Punktw-2 h-2 rounded-full mt-1.5 shrink-08 × 8 pxNie allein — Label ist Pflicht
Label orangetext-xs text-orange-70012 pxKontrast 5,4:1 ✓ AA
Label navytext-xs text-ink12 pxKontrast 14,5:1 ✓ AAA
Label grüntext-xs text-green-80012 pxKontrast 9,7:1 ✓ AAA
Merge-ServicefindWhatsNext(int size) auf DashboardController—Sortierung: Metadaten → Trans → Lesefertig; per Markus: Threshold als @Param
+
+
+ +
+ + +
+
Vergleich aller vier Muster
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KriteriumA — TabsB — AccordionC — Mission Control ★D — Priority Queue
Alle 3 Kategorien sofort sichtbarNeinNur ÜberschriftenJaNein (gemischt)
Neueste Aktivität bleibt PrimärinhaltJaJaJaJa
60+ Usability (Discovery ohne Klick)MittelÜberschriften sichtbarSehr gutMittel — gemischte Liste
JS-Zustand nötigJa (aktiver Tab)NeinNeinNein
WCAG 2.2 compliance (out of the box)tablist + aria-selected nötigdetails/summary nativKeine neuen AnforderungenFarbe + Icon + Label alle Pflicht
Mobile 320 px3 Tabs zu schmalGutSehr gut — stapelt natürlichGut
„Lesefertig" als visueller ApplausNur wenn Tab aktivNur wenn offenJa — eigene mint-KarteNein — gleichwertig mit Aufgaben
Backend-Merge-KomplexitätGeringGeringGering (2 separate Queries)Mittel (Merge + Sortierung)
Implementierungsaufwand FrontendMittelGeringGeringGering
+
+ + +
+

Empfehlung: Muster C — Mission-Control-Streifen

+

+ Der Mission-Control-Streifen ist das einzige Muster, das alle drei Kategorien gleichzeitig sichtbar macht, + ohne den Primärinhalt zu verstecken oder JS-Zustand zu erzeugen. Scrollen nach unten ist kein Fehler — + versteckter Inhalt schon. +

+
    +
  • Tabs (A) — Gut für kompakten Platz, aber inaktive Kategorien werden von 60+-Nutzern übersehen. Tabs für die gesamte Seite (wie ursprünglich vorgeschlagen) wäre ein Antipattern — Neueste Aktivität wäre hinter einem Klick.
    • +
  • Accordion (B) — Solide Fallback-Option ohne JS, wenn der Streifen aus Platzgründen abgelehnt wird. Alle Kategorien-Überschriften bleiben sichtbar.
    • +
  • Priority Queue (D) — Elegant, aber „Lesefertig" verliert seinen Belohnungscharakter. Die Merge-Logik ist auch komplexer als zwei separate Queries.
    • +
  • Mission Control (C) — Keine versteckten Inhalte. Kein JS. „Lesefertig" bekommt eine eigene mint-getönte Spalte als visuellen Applaus. Mobil stapeln die Spalten ohne weiteren Code. Der einzige Trade-off ist ein leichtes Scrollen auf Desktop.
    • +
+

+ Quick win: Wenn C abgelehnt wird — Muster B (Accordion) als Zweitstimme. Kein Refactoring der rechten Spalte, kein JS, alle Kategorien-Überschriften immer sichtbar. +

+
+ + +
+ + + + +
+
Mission-Control-Streifen v2 — Segmentierung / Transkription / Lesefertig
+ +
Beitragspyramide: Skill-basierte Aufgabentrennung
+
+ Die ursprüngliche „Transkription fehlt"-Spalte wird in zwei klar getrennte Aufgaben aufgeteilt, die + unterschiedliche Fähigkeiten erfordern. Das löst gleichzeitig das Problem der leeren dritten Spalte. +
+ + +
+
+
Kein Segment
+
0 Annotationen
+
+
→
+
+
Segmentiert
+
Rahmen vorhanden, kein Text
+
+
→
+
+
Transkribiert
+
Text vorhanden, review < 90 %
+
+
→
+
+
Lesefertig ✓
+
review ≥ 90 %
+
+
+ Jede Stufe landet in einer eigenen Spalte. Die dritte Spalte ist strukturell nie leer — + Lesefertig-Dokumente erscheinen sobald auch nur eines fertig ist. +
+
+ + +
+
+
Spalte 1 — Segmentierung
+
+ Dokumente ohne Annotationsrahmen. Keine Vorkenntnisse nötig — Rahmen um Textblöcke einzeichnen. Niedrigste Einstiegshürde, breiteste Zielgruppe. +
+
Query: SELECT … WHERE annotation_count = 0
+
+
+
Spalte 2 — Transkription
+
+ Dokumente mit Rahmen, aber wenig/kein Text (text IS NULL OR LENGTH(text) < threshold). Kurrent-Kenntnisse empfohlen. +
+
Query: annotation_count > 0 AND reviewed < 75 %
+
+
+
Spalte 3 — Lesefertig ✓
+
+ Dokumente mit reviewed ≥ 90 %. Belohnungsbereich — kein Auftrag, sondern eine Einladung zum Lesen. +
+
Query: reviewed_pct >= 0.90 (bestehend)
+
+
+ + +
+
Engagement-Elemente — 5 Ideen
+ +
+ +
+
① Fortschritt — drei verschiedene Granularitäten
+
+ Kein globaler Balken bei 1 500 Dokumenten. + Ein Balken bei 0,8 % Füllstand ist psychologisch demotivierender als gar kein Balken + (endowed-progress-Effekt: Menschen brechen auf, wenn das Ziel unerreichbar wirkt). +

+ Stattdessen drei zielgruppengerechte Ansätze: +
    +
  • Segmentierung-Spalte: Wochenpuls — „Diese Woche: +5 Dokumente". Zeigt Schwung, nicht den Berg. Query: COUNT(*) WHERE created_at > NOW() - INTERVAL '7 days'
    • +
  • Transkription-Zeilen: Balkensegment pro Dokument — „3 von 8 Blöcken". Hier ist der Maßstab korrekt: 8 Blöcke sind in einer Sitzung erreichbar. Nur sichtbar wenn annotation_count > 0.
    • +
  • Lesefertig-Zeilen: Prozentzahl als Text — „94 % geprüft". Kein Balken nötig — der Erfolg ist bereits kommuniziert durch die mint-Spalte selbst.
    • +
+
+
+ +
+
② Skill-Label als Zugangsfilter
+
+ Unter dem Spaltentitel: ein kleines Pill-Label mit der Anforderung. „Ohne Vorkenntnisse" (grün) vs. + „Kurrent-Kenntnisse" (neutral). Senkt die Hemmschwelle für Neueinsteiger drastisch — sie sehen sofort, + was sie tun können. +
+
+ +
+
③ Contributor-Avatare (Social Proof)
+
+ Unter dem Titel: kleine Initialen-Bubbles der letzten 3 Beitragenden. Kein Leaderboard (erzeugt + Wettbewerb), aber soziale Sichtbarkeit (erzeugt Zugehörigkeit). „MR, TG und 2 weitere haben hier + mitgemacht." +
+
+ +
+
④ „Starte hier →" CTA-Button
+
+ Jede Aufgaben-Spalte endet mit einem einzelnen, klaren CTA, der direkt zum nächsten zu bearbeitenden + Dokument springt. Kein Auswahlprozess, kein Überlegen — ein Klick, sofort im Dokument. Entscheidungslähmung + ist der Hauptgrund für Non-Participation. +
+
+ +
+
⑤ Lesefertig-Leerstand → Cross-Column-Redirect
+
+ Wenn Lesefertig leer ist (frühe Projektphase), zeigt die Spalte nicht „Noch nichts fertig" als + stille Sackgasse. Stattdessen: „Dokumente erscheinen hier, wenn die Transkription abgeschlossen ist — + jetzt mithelfen →". Der Link springt direkt zur Segmentierungs-Spalte. Leerer Zustand = aktive + Einladung, kein toter Endpunkt. +
+
+ +
+
+ + +
+
+
+
+ +
Archiv
Personen
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
12. Apr
+
Taufurkunde Karl Raddatz
9. Apr
+
Postkarte aus Breslau
7. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
Metadaten fehlen
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+ Alle 5 anzeigen → +
+
+
+ + +
+
Was braucht Aufmerksamkeit?
+
+ + +
+
+
Rahmen einzeichnen
+
✓ Ohne Vorkenntnisse
+ +
+
↑ +5 diese Woche
+
· 1 480 offen
+
+
+
MR
+
TG
+
AS
+
+ 2
+
+
+
Taufurkunde Karl R.
Noch keine Rahmen
+
Standesamt 1889
Noch keine Rahmen
+
Heiratsurkunde 1921
Noch keine Rahmen
+ Jetzt einzeichnen → +
+ + +
+
+
Text eintippen
+
Kurrent hilfreich
+
+
↑ +2 diese Woche
+
· 8 offen
+
+
+
MR
+
1 Person
+
+
+ +
+
Brief v. Oma Martha 1943
+
+
+
0 / 6 Blöcke
+
+
+
+
Reisepass Opa Heinrich
+
+
+
3 / 8 Blöcke
+
+
+
+
Postkarte aus Breslau
+
+
+
0 / 4 Blöcke
+
+
+ Jetzt tippen → +
+ + +
+
+
Lesefertig ✓
+
3 Dokumente bereit
+
+
MR
+
TG
+
+
+ +
+
Postkarte aus Breslau 1943
+
100 % geprüft
+
+
+
Brief Oma Martha 1938
+
95 % geprüft
+
+
+
Heiratsurkunde 1921
+
91 % geprüft
+
+ Alle 3 lesen → +
+ +
+
+
+
+ Desktop (55 %) — v2: Spalten 1+2 aufgeteilt, Lesefertig-Leerstand mit aktivem Cross-Column-CTA +
+
+ + +
+ + + + + + + + + + + + + + + + +
ElementTailwind-Klassen / LogikWertHinweis
Skill-Pill „Ohne Vorkenntnisse"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-50 border border-green-200 text-green-800Kontrast 9,7:1 ✓Klärung für 60+ und Neueinsteiger
Skill-Pill „Kurrent hilfreich"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-surface border border-line text-inkneutral — kein SchreckpunktNicht „Experten nötig" sondern „hilfreich"
Wochenpuls (Segmentierung + Transkription)text-xs font-semibold text-green-700 (Seg.) / text-ink (Trans.)12 pxQuery: COUNT WHERE created_at > NOW() - INTERVAL '7 days'; kein globaler Balken
Per-Dokument-Balken Trackflex-1 h-1 bg-navy/20 rounded-full overflow-hiddenh: 4 pxNur in Transkription-Spalte, nur wenn annotation_count > 0
Per-Dokument-Balken Füllstandh-full bg-navy rounded-full + style="width:{pct}%"—pct = textedBlocks / totalBlocks * 100; Guard: totalBlocks = 0 → width 0
Lesefertig-Prozentzahltext-xs font-semibold text-green-80012 pxKein Balken — die mint-Spalte selbst ist das Erfolgssignal
Contributor-Avatarw-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white24 × 24 pxFarbe per User-ID deterministisch (kein API-Feld nötig)
„Starte hier"-CTAblock w-full text-center text-xs font-semibold text-white bg-ink rounded-sm py-1.5 mt-2 hover:bg-ink-2 transition-colors focus-visible:ring-2 focus-visible:ring-inkmin-h 36 pxLink: /enrich?filter=NEEDS_SEGMENTATION&next=1
Lesefertig-Leerstand CTAinline-flex items-center text-xs font-semibold text-ink border border-ink rounded-sm px-3 py-1 hover:bg-ink hover:text-white transition-colors—Link springt zur Segmentierungs-Ansicht
Contributor-API-FeldGET /api/documents/needs-segmentation → DTO enthält lastContributors: [{initials, colorSeed}]max 3 AvatareNeues DTO-Feld — beachte Nora: nur Initialen, keine Namen
Segmentierung-QueryWHERE NOT EXISTS (SELECT 1 FROM document_annotations WHERE document_id = d.id)—Index auf document_annotations.document_id prüfen (Tobias)
Transkription-QueryEXISTS annotation AND (no blocks OR reviewed_pct < 0.75)—Guard gegen Division durch 0 (Sara)
+
+ + +
+ Datenschutz-Hinweis (Nora): Contributor-Avatare zeigen nur Initialen, niemals volle Namen im DOM. + Das DTO liefert initials + einen deterministischen colorSeed (z. B. Hash der User-ID mod 6 Farben), + keine E-Mail-Adressen oder echten Namen. Das @RequirePermission(READ_ALL) auf den neuen Endpoints gilt auch hier. +
+
+ +
+ + diff --git a/docs/specs/mission-control-strip-final.html b/docs/specs/mission-control-strip-final.html new file mode 100644 index 00000000..3b8e0138 --- /dev/null +++ b/docs/specs/mission-control-strip-final.html @@ -0,0 +1,814 @@ + + + + + +Mission-Control-Streifen — Finale Spec (Issue #240) + + + +
+ + +
+

Mission-Control-Streifen — Finale Spec

+
+ Issue #240 + Leonie Voss — UX & Accessibility + 15. April 2026 + v3 — Final +
+
src/routes/+page.svelte · src/lib/components/DashboardMissionControl.svelte · +page.server.ts
+
+
+

Entscheidung

+

+ Der bestehende Dashboard-Aufbau (Neueste Aktivität links, DropZone + Metadaten-Widget rechts) bleibt unverändert. + Unterhalb des Zwei-Spalten-Gitters erscheint ein neuer vollbreiter Mission-Control-Streifen mit drei + gleichwertigen Spalten: Rahmen einzeichnen (Segmentierung, kein Vorwissen nötig), + Text eintippen (Transkription, Kurrent hilfreich), Lesefertig ✓ (Belohnungsbereich). +

+

+ Die „Transkription fehlt"-Spalte aus Issue #240 wird in Segmentierung + Transkription aufgeteilt, um + eine klare Beitragspyramide zu schaffen: Jeder kann Rahmen einzeichnen — nicht jeder kann Kurrent lesen. + Ein wöchentlich rotierender Sort mit Experten-gesucht-Escape-Hatch verhindert, dass schwer lesbare + Dokumente dauerhaft die Spalte blockieren. +

+
+ + +
+
Dokument-Lebenszyklus
+
+
+
Kein Segment
+
0 Annotationen
+
→ Spalte 1
+
+
→
+
+
Segmentiert
+
Rahmen da, wenig Text
+
→ Spalte 2
+
+
→
+
+
In Review
+
Text da, reviewed < 90 %
+
→ Spalte 2
+
+
→
+
+
Lesefertig ✓
+
reviewed ≥ 90 %
+
→ Spalte 3
+
+
+ „Segmentiert" und „In Review" landen beide in Spalte 2 — + unterschieden durch den per-Dokument-Balken (0 Blöcke vs. N Blöcke). +
+
+ + +
+
+
Spalte 1 — Rahmen einzeichnen
+

Dokumente ohne Annotationsrahmen. Kein Kurrent nötig — Textblöcke markieren reicht.

+

Bedingung: annotation_count = 0

+

Sort: Wöchentliche Rotation (seeded shuffle, s. u.)

+

Fortschritt: Wochenpuls „↑ +5 diese Woche", kein globaler Balken

+
+
+
Spalte 2 — Text eintippen
+

Annotationen vorhanden, aber Text fehlt oder reviewed < 90 %. Kurrent-Kenntnisse hilfreich.

+

Bedingung: annotation_count > 0 AND reviewed_pct < 0.90

+

Sort: Teilfortschritt zuerst, dann wöchentliche Rotation; needsExpert-Flagge schiebt nach hinten

+

Fortschritt: Per-Dokument-Balken „3 / 8 Blöcke"

+
+
+
Spalte 3 — Lesefertig ✓
+

Reviewed ≥ 90 %. Keine Aufgabe — Einladung zum Lesen.

+

Bedingung: reviewed_pct >= 0.90

+

Sort: Neueste zuerst

+

Fortschritt: „94 % geprüft" als Text — kein Balken, die mint-Spalte ist das Signal

+

Leerstand: Cross-Column-Redirect zu Spalte 1

+
+
+
+ +
+ + +
+
Sortierstrategie — Das „zu schwer"-Problem
+
Schwer lesbare Dokumente blockieren die Spalte
+
Wenn dieselben 3 Dokumente immer oben stehen und niemand sie lesen kann, stoppt die Transkription komplett.
+ +
+
Problem: Bei 1 500 Dokumenten ohne Transkription und sortiert nach updated_at + können dieselben 3 besonders schwer lesbaren Dokumente dauerhaft die Spalte blockieren. + Jeder öffnet sie, gibt auf, und die Spalte wird zur Sackgasse.
+
+ +
+ +
+

Option 1 — Zufällig pro Seitenaufruf

+

ORDER BY RANDOM()

+

Jeder Besuch zeigt andere Dokumente. Kein Aufwand, aber chaotisch — kein Nutzer sieht ein Dokument zweimal, + kann nicht gezielt zurückkehren.

+
+ Null Aufwand− Chaotisch− Kein stabiles Lesezeichen
+
+ +
+
★ Empfohlen
+

Option 2 — Teilfortschritt + wöchentliche Rotation

+

Dokumente mit Teilfortschritt (3/8 Blöcke) erscheinen zuerst — am ehesten abschließbar. Dokumente mit 0 Blöcken rotieren wöchentlich durch einen deterministischen Shuffle.

+ ORDER BY textedBlocks DESC, + HASHTEXT(id || EXTRACT(WEEK FROM NOW())::text) +
+ Konsistent innerhalb einer Woche+ Bringt leichte Dokumente an die Oberfläche+ Kein neues Datenbankfeld
+
+ +
+

Option 3 — Manuelle Schwierigkeitsbewertung

+

Beitragende bewerten Dokumente 1–3 nach Versuch. Einfache Dokumente erscheinen zuerst.

+

Beste Langzeitlösung — braucht aber Bewertungs-UI auf der Enrich-Seite und Signalakkumulation.

+
+ Selbstverbessernd− UI-Aufwand− Braucht Zeit bis Signal
+
+
+ + +
+
+ Escape-Hatch: „Experten gesucht"-Flagge (Option 2 ergänzen)
+ Im Enrich-Bereich: ein einzelner Button „Zu schwer — Hilfe gesucht". + Setzt Document.needsExpert = true (1 Boolean, keine Migration wenn Flyway-Migration V{n} hinzugefügt wird). + In der Transkriptions-Spalte zeigen flagged Dokumente einen lila Badge und werden hinter unflagged Dokumenten einsortiert. + Kein Leaderboard, keine Scham — nur ein ehrliches Signal an die Community. +
+
+ + +
+
Mockup: Experten-gesucht-Badge in der Transkriptions-Zeile
+
+ +
+
Reisepass Opa Heinrich 3 / 8 Blöcke
+
+
+
37 %
+
+
+ +
+
Standesamt Breslau 1872 + Experten gesucht +
+
Schrift besonders schwer lesbar — Hilfe willkommen
+
+
+
+ +
+ + + + + + + + + +
ElementSQL / TailwindWertHinweis
Sort TranskriptionORDER BY textedBlocks DESC, HASHTEXT(id::text || EXTRACT(WEEK FROM NOW())::int::text)—Kein neues Feld nötig; ändert sich automatisch jede Woche
needsExpert-FlagALTER TABLE documents ADD COLUMN needs_expert BOOLEAN NOT NULL DEFAULT FALSEFlyway V{n}__add_needs_expert.sqlFlagged Docs ans Ende: ORDER BY needs_expert ASC, ...
Experten-Badgeinline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-purple-50 border border-purple-200 text-purple-700Kontrast 6,8:1 ✓Nur wenn doc.needsExpert === true
„Zu schwer"-Button (Enrich)text-xs text-gray-400 hover:text-gray-600 underline underline-offset-2—Unscheinbar — kein roter Knopf, keine Scham
Endpoint (Flagge setzen)PATCH /api/documents/{id}/needs-expert@RequirePermission(READ_ALL)Jeder angemeldete Nutzer darf flaggen
+
+
+ +
+ + +
+
Mockup — Desktop, normaler Zustand
+ +
+
+
+
+ +
Archiv
Personen
Gespräche
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+ + +
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
Karl Raddatz
12. Apr
+
Taufurkunde Karl Raddatz
Standesamt
9. Apr
+
Postkarte aus Breslau
Martha Raddatz
7. Apr
+
Familienfoto Sommer 1952
Unbekannt
3. Apr
+
47 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
Metadaten fehlen
+
Familienfoto 1952
Titel fehlt
+
Standesamtsurkunde
Datum fehlt
+ Alle 5 anzeigen → +
+
+
+ + +
+
Was braucht Aufmerksamkeit?
+
+ + +
+
+
Rahmen einzeichnen
+
✓ Ohne Vorkenntnisse
+
↑ +5 diese Woche· 1 480 offen
+
+
MR
+
TG
+
AS
+
+ 2
+
+
+
Taufurkunde Karl R.
Noch keine Rahmen
+
Standesamt 1889
Noch keine Rahmen
+
Heiratsurkunde 1921
Noch keine Rahmen
+ Jetzt einzeichnen → +
+ + +
+
+
Text eintippen
+
Kurrent hilfreich
+
↑ +2 diese Woche· 8 offen
+
+
MR
+
1 Person
+
+
+ +
+
Reisepass Opa Heinrich
+
3 / 8 Blöcke
+
+
+
Brief v. Oma Martha 1943
+
0 / 6 Blöcke
+
+ +
+
Standesamt Breslau 1872
Experten gesucht
+
Schrift besonders schwer lesbar
+
+ Jetzt tippen → +
+ + +
+
+
Lesefertig ✓
+
3 Dokumente bereit
+
+
MR
+
TG
+
+
+
+
Postkarte aus Breslau 1943
+
100 % geprüft
+
+
+
Brief Oma Martha 1938
+
95 % geprüft
+
+
+
Heiratsurkunde 1921
+
91 % geprüft
+
+ Alle 3 lesen → +
+ +
+
+
+
+ Desktop (55 %) — normaler Zustand: Teilfortschritt oben, Experten-gesucht-Dokument unten in Spalte 2 +
+
+
+ + +
+
Mockup — Desktop, frühe Projektphase (Lesefertig leer)
+ +
+
+
+
+ +
Archiv
Personen
+
MR
+
+
+
⌕
Dokumente durchsuchen…
+
+
+
+
Neueste Aktivität
+
Brief von Oma Martha, 1943
12. Apr
+
Taufurkunde Karl Raddatz
9. Apr
+
1 500 Dokumente · 12 Personen
+
+
+
↑
Datei hochladen
Drag & Drop
+
+
Metadaten fehlen
+
Familienfoto 1952
+
Standesamtsurkunde
+ Alle anzeigen → +
+
+
+
+
Was braucht Aufmerksamkeit?
+
+
+
+
Rahmen einzeichnen
+
✓ Ohne Vorkenntnisse
+
↑ +3 diese Woche· 1 498 offen
+
MR
1 Person
+
+
Taufurkunde Karl R.
+
Standesamt 1889
+
Heiratsurkunde 1921
+ Jetzt einzeichnen → +
+
+
+
Text eintippen
+
Kurrent hilfreich
+
↑ +1 diese Woche· 2 offen
+
MR
1 Person
+
+
+
Brief v. Oma Martha 1943
+
0 / 6 Blöcke
+
+
+
Reisepass Opa Heinrich
+
0 / 4 Blöcke
+
+ Jetzt tippen → +
+ +
+
✦
+
Noch kein Dokument lesefertig
+
Erscheint hier sobald die Transkription abgeschlossen ist.
+ Jetzt mithelfen → +
+
+
+
+
+ Desktop (55 %) — frühe Phase: 1 500 Dokumente ohne Transkription, Wochenpuls zeigt Schwung statt Berg +
+
+
+ +
+ + +
+
Mockup — Mobil 320 px
+

+ Die rechte Spalte (DropZone + Metadaten) erscheint auf Mobil zuerst im DOM (lg:order-last schiebt sie auf Desktop nach rechts). + Der Streifen stapelt seine drei Spalten vertikal. Jede Spalte hat volle Breite — keine Overflow-Probleme. +

+ +
+ +
+
+
+
+
⌕ Dokumente…
+ +
↑
Hochladen
+
+
Metadaten fehlen
+
Familienfoto 1952
+
Standesamtsurkunde
+
+ +
+
Neueste Aktivität
+
Brief von Oma Martha
+
Taufurkunde Karl R.
+
1 500 Dok. · 12 Pers.
+
+ +
+
Was braucht Aufmerksamkeit?
+ +
+
Rahmen einzeichnen
+
✓ Ohne Vorkenntnisse
+
↑ +5 diese Woche· 1 480 offen
+
Taufurkunde Karl R.
+
Standesamt 1889
+ Jetzt einzeichnen → +
+ +
+
Text eintippen
+
Kurrent hilfreich
+
↑ +2 diese Woche· 8 offen
+
+
Reisepass Opa Heinrich
+
3 / 8 Blöcke
+
+
+
Brief v. Oma Martha 1943
+
0 / 6 Blöcke
+
+ Jetzt tippen → +
+ +
+
Lesefertig ✓
+
3 bereit
+
Postkarte 1943
100 %
+
Brief Oma 1938
95 %
+ Alle lesen → +
+
+
+
+ Mobil 320 px — Streifen stapelt vertikal, volle Breite je Spalte +
+ + +
+
+
Mobile-Reihenfolge (DOM)
+
    +
  1. Suchleiste
    2. +
  2. DropZone (write users only)
    3. +
  3. Metadaten fehlen
    4. +
  4. Neueste Aktivität
    5. +
  5. Was braucht Aufmerksamkeit? +
      +
    1. Rahmen einzeichnen
      2. +
    2. Text eintippen
      3. +
    3. Lesefertig ✓
      4. +
    +
    6. +
+
+
+
+ Touch targets: Alle CTA-Buttons: min-h-[44px] (WCAG 2.2). + Dokument-Zeilen in den Spalten: min-h-[44px] py-2. + Der „Zu schwer"-Button auf der Enrich-Seite: min-h-[44px] als Icon-Button mit aria-label. +
+
+
+
+
+ +
+ + +
+
Engagement-Elemente — Zusammenfassung
+
+
+

① Skill-Pill

+

Unter jedem Spaltentitel. „Ohne Vorkenntnisse" (grün) vs. „Kurrent hilfreich" (navy-neutral). + Senkt die Hemmschwelle — Neueinsteiger sehen sofort, was ohne Kurrent-Kenntnisse möglich ist.

+

bg-green-50 border-green-200 text-green-800 / bg-surface border-line text-ink

+
+
+

② Wochenpuls

+

„↑ +5 diese Woche · 1 480 offen" statt globalem Fortschrittsbalken. + Zeigt Schwung, nicht den Berg. Psychologisch: 0,8 %-Balken ist demotivierender als kein Balken.

+

SELECT COUNT(*) WHERE created_at > NOW() - INTERVAL '7 days'

+
+
+

③ Per-Dokument-Balken

+

Nur in Spalte 2, nur wenn annotation_count > 0. Richtiger Maßstab: + 8 Blöcke sind in einer Sitzung abschließbar. Zeigt auch, welche Dokumente „fast fertig" sind.

+

width: {textedBlocks / totalBlocks * 100}%; Guard: totalBlocks === 0 → width: 0

+
+
+

④ Contributor-Avatare

+

Max. 3 Initialen-Bubbles der letzten Beitragenden pro Spalte. Kein Leaderboard (Wettbewerb) — + soziale Sichtbarkeit (Zugehörigkeit). Farbe deterministisch aus User-ID-Hash.

+

DTO: lastContributors: [{initials, colorIndex}] — nur Initialen, keine Namen (Nora)

+
+
+

⑤ „Starte hier →"-CTA

+

Ein einziger opinionated Button je Aufgaben-Spalte, der direkt zum nächsten Dokument springt. + Entscheidungslähmung ist der Hauptgrund für Non-Participation bei Familienprojekten.

+

/enrich?filter=NEEDS_SEGMENTATION&next=1 (Segmentierung)
/enrich?filter=NEEDS_TRANSCRIPTION&next=1 (Transkription)

+
+
+

⑥ Lesefertig-Leerstand → Redirect

+

Wenn Spalte 3 leer ist (frühe Phase), erscheint kein toter Endpunkt sondern: + „Erscheint hier, sobald die Transkription abgeschlossen ist — jetzt mithelfen →". + Der Link springt zu Spalte 1.

+

{#if readyToRead.length === 0} → DashboardReadyToReadEmpty.svelte

+
+
+
+ +
+ + +
+
Implementation Reference
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ElementTailwind-KlassenPixel / WertHinweis
Streifen-Wrappermt-4 bg-white border border-line rounded-sm p-6padding 24 pxDirekt nach bestehendem div.mt-4.grid
Streifen-Titeltext-xs font-bold uppercase tracking-widest text-gray-400 mb-412 px / 700Standard-Section-Title-Muster
3-Spalten-Gridgrid grid-cols-1 gap-4 sm:grid-cols-3gap 16 pxsm = 640 px; darunter stapeln
Segmentierung-Spaltebg-surface rounded-sm border border-line p-4 flex flex-col gap-3—Neutral
Transkription-Spaltebg-surface rounded-sm border border-line p-4 flex flex-col gap-3—Neutral — es ist eine Aufgabe
Lesefertig-Spalte (gefüllt)bg-mint/10 rounded-sm border border-mint p-4 flex flex-col gap-3—Mint-Ton = Erfolg
Lesefertig-Spalte (leer)flex flex-col items-center justify-center text-center bg-mint/5 border border-dashed border-mint rounded-sm p-6 min-h-[120px]min-h 120 pxKein toter Endpunkt
Skill-Pill easyinline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-50 border border-green-200 text-green-800Kontrast 9,7:1 ✓ AAA—
Skill-Pill kurrentinline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-surface border border-line text-inkKontrast 14,5:1 ✓ AAANeutral — kein Abschreck-Signal
Wochenpuls-Zahltext-xs font-semibold text-green-700 (Seg.) / text-ink (Trans.)12 pxKein globaler Balken
Per-Dokument-Trackflex-1 h-1 bg-navy/20 rounded-full overflow-hiddenh 4 pxNur wenn annotation_count > 0
Per-Dokument-Fillh-full bg-ink rounded-full transition-all + style="width:{pct}%"—Guard: totalBlocks === 0 → 0%
Lesefertig-Prozenttext-xs font-semibold text-green-80012 pxKein Balken — mint-Spalte ist das Signal
Contributor-Avatarw-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white shrink-024 × 24 pxFarbe: 6 Werte, Index = userIdHash % 6
CTA-Button (primär)block w-full text-center text-xs font-semibold text-white bg-ink rounded-sm py-2 mt-2 hover:bg-ink-2 transition-colors focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-1min-h 36 pxaria-label mit Dokumenttitel falls nötig
CTA-Button (ghost, Leerstand)inline-flex items-center text-xs font-semibold text-ink border border-ink rounded-sm px-3 py-2 hover:bg-ink hover:text-white transition-colorsmin-h 36 px—
Experten-gesucht-Badgeinline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-purple-50 border border-purple-200 text-purple-700Kontrast 6,8:1 ✓ AANur wenn doc.needsExpert === true
Sichtbarkeit Streifen{#if needsSegmentation.length > 0 || needsTranscription.length > 0 || readyToRead.length > 0}—Streifen verschwindet wenn alle drei Buckets leer
Dokument-Zeile Mindesthöhemin-h-[44px] flex items-start py-244 px ✓ WCAG 2.2Gilt für alle klickbaren Zeilen
+
+
+ +
+ + +
+
Backend — neue Endpoints & Queries
+
+ + + + + + + + + + + + +
Endpoint / QueryBedingungSortAuth
GET /api/documents/needs-segmentation?size=3NOT EXISTS (SELECT 1 FROM document_annotations WHERE document_id = d.id)HASHTEXT(id::text || week::text)READ_ALL
GET /api/documents/needs-transcription?size=3EXISTS annotation AND (no blocks OR reviewed_pct < 0.90)textedBlocks DESC, needs_expert ASC, HASHTEXT(...)READ_ALL
GET /api/documents/ready-to-read?size=3reviewed_pct >= 0.90updated_at DESCREAD_ALL
PATCH /api/documents/{id}/needs-expertSetzt needs_expert = true—READ_ALL (jeder Nutzer darf flaggen)
GET /api/stats/strip-activityWochenpuls: COUNT(*) WHERE created_at > NOW() - INTERVAL '7 days' pro Bucket—READ_ALL
Flyway-MigrationALTER TABLE documents ADD COLUMN needs_expert BOOLEAN NOT NULL DEFAULT FALSE—V{n}__add_needs_expert_flag.sql
Index prüfen (Tobias)document_annotations(document_id), transcription_blocks(document_id, reviewed)—EXPLAIN ANALYZE vor Merge
Division durch 0 (Sara)Alle reviewed_pct-Queries: CASE WHEN COUNT(*) = 0 THEN 0 ELSE SUM(...)::float / COUNT(*) END——
+
+
+ +
+ + +
+
Neue Svelte-Komponenten
+
+
+

DashboardMissionControl.svelte

+

Wrapper für den vollbreiten Streifen. Props: needsSegmentation, needsTranscription, + readyToRead, weeklyActivity. Rendert die drei Spalten und ist komplett unsichtbar wenn alle Arrays leer sind.

+
+
+

DashboardSegmentationCol.svelte

+

Spalte 1: Skill-Pill, Wochenpuls, Avatare, Dokumentliste, CTA. Keine Balken — keine Dokument-Metadaten vorhanden.

+
+
+

DashboardTranscriptionCol.svelte

+

Spalte 2: Skill-Pill, Wochenpuls, Avatare, per-Dokument-Balken, Experten-Badge bei needsExpert, CTA.

+
+
+

DashboardReadyToReadCol.svelte

+

Spalte 3: Zeigt gefüllten Zustand (Liste mit %-Text) oder leeren Zustand (Cross-Column-Redirect zu Segmentierung).

+
+
+
+
+ Bestehende Komponente bleibt: DashboardNeedsMetadata.svelte ist unverändert — + sie lebt weiterhin in der rechten Spalte. Der Mission-Control-Streifen ist vollständig additiv und ändert nichts am bestehenden Layout. +
+
+
+ +
+ +