From f5438c4c36ac76c3b0ae1e62571ac6f3a8e1f701 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 22 Apr 2026 20:16:20 +0200 Subject: [PATCH] =?UTF-8?q?docs(specs):=20add=20briefwechsel-fill=20?= =?UTF-8?q?=E2=80=94=205=20concepts=20exploring=20empty-row=20problem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Brainstorming artifact: 5 HTML mockups comparing approaches to fill the sparse right-hand space on /briefwechsel rows (reported by users as "feels empty"): 1. Rich Rows — dense metadata, no images 2. Thumbnail Rows — PDF preview on the left 3. Master-Detail Split — list + persistent preview panel 4. Gallery Cards — grid of letter cards, album style 5. Person Dashboard — insights live on /persons/[id], not here Picked: #2 (Thumbnail Rows) + #5 (Person Dashboard), followed up by final specs in separate commit. Co-Authored-By: Claude Opus 4.7 --- .../specs/briefwechsel-fill/01-rich-rows.html | 195 +++++++++ .../briefwechsel-fill/02-thumbnail-rows.html | 391 ++++++++++++++++++ .../briefwechsel-fill/03-master-detail.html | 222 ++++++++++ .../briefwechsel-fill/04-gallery-cards.html | 227 ++++++++++ .../05-person-dashboard.html | 303 ++++++++++++++ docs/specs/briefwechsel-fill/_shared.css | 102 +++++ docs/specs/briefwechsel-fill/index.html | 290 +++++++++++++ 7 files changed, 1730 insertions(+) create mode 100644 docs/specs/briefwechsel-fill/01-rich-rows.html create mode 100644 docs/specs/briefwechsel-fill/02-thumbnail-rows.html create mode 100644 docs/specs/briefwechsel-fill/03-master-detail.html create mode 100644 docs/specs/briefwechsel-fill/04-gallery-cards.html create mode 100644 docs/specs/briefwechsel-fill/05-person-dashboard.html create mode 100644 docs/specs/briefwechsel-fill/_shared.css create mode 100644 docs/specs/briefwechsel-fill/index.html diff --git a/docs/specs/briefwechsel-fill/01-rich-rows.html b/docs/specs/briefwechsel-fill/01-rich-rows.html new file mode 100644 index 00000000..f8281ddb --- /dev/null +++ b/docs/specs/briefwechsel-fill/01-rich-rows.html @@ -0,0 +1,195 @@ + + + + +Spec 1 — Rich Rows · Briefwechsel + + + + + + + +
+
+
+

Briefwechsel — Fill the Empty Rows

+

Five approaches to turning the empty right-hand space into information that helps users scan and decide.

+
+
+
ConceptRich Rows
+
Spec1 / 5
+
EffortSmall — no new backend data
+
+
+
+ + +
+ + +
+ +
+ DocumentsPersonsLettersAdmin +
+
+
⬆ UPLOAD
+ DE · EN · ES +
MR
+
+
+ +
+ +
+

Concept 1 · Rich Rows — pack more metadata into each row

+ No visuals, no structural change. Each row grows from a single line to a layered block: title (serif), summary (italic), meta row with icons, tag chips, and a right-hand column with archive box, script type and status. +
✚ Zero backend changes✚ Still one scrollable list− Heavier rows; 10-row view becomes ~6–7 rows− Empty-looking when a doc has no summary/tags
+
+ + +
+
+
Person
Walter de Gruyter
+
Korrespondent — optional
Alle Korrespondenten
+
+
+
Newest ↓
+
▾ Filter
+
851 Briefe
+
+
📋 Alle Briefe von Walter de Gruyter — wähle einen Korrespondenten oben um einzugrenzen
+
+ +
+
19401 Brief
+ +
+
←
+
+
Demo leserlicher Brief
+
„letzte Lebenstage von W. Dörpfeld in Griechenland"
+
31. Mai 1940·📍 Belgard·von Gertrud von Rofden
+
DörpfeldGriechenlandprivat
+
+
+
Kasten VII · Mappe 5
+
+
+ +
19235 Briefe
+ +
+
→
+
+
W-0397 – 2. September 1923 – B.Lichterfelde
+
„von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte"
+
2. September 1923·📍 B.Lichterfelde·an Herbert Cram
+
VerlagFamilie
+
+
+
Kasten VI · Mappe 7
+
+
+ +
+
→
+
+
W-0396 – 2. September 1923 – B.Lichterfelde
+
—
+
2. September 1923·📍 B.Lichterfelde·an Herbert Cram
+
+
+
Kasten VI · Mappe 7
+
+
+ +
+
→
+
+
W-0524 – 31. Juli 1923 – Berlin
+
„Glückwunsch zum 60. Geburtstag, Bericht über den Verlag"
+
31. Juli 1923·📍 Berlin·an Walter Dieckmann
+
GeburtstagVerlag
+
+
+
Kasten VI · Mappe 7
+
+
+ +
192237 Briefe
+ +
+
→
+
+
W-0521 – 24. Dezember 1922 – Berlin
+
„Weihnachtsbrief, Erinnerungen an das Jahr und Bitte um ein Bild der Kinder"
+
24. Dezember 1922·📍 Berlin·an Walter Dieckmann
+
WeihnachtenFamiliepersönlich
+
+
+
Kasten V · Mappe 3
+
+
+ +
+
→
+
+
W-0392 – 23. November 1921 – Bad Kissingen
+
„Kurbericht, Gesundheitsupdate, Grüße an die Familie Cram"
+
23. November 1921·📍 Bad Kissingen·an Herbert Cram
+
Kuraufenthalt
+
+
+
Kasten V · Mappe 1
+
+
+ +
+
→
+
+
W-0501 – 13. Dezember 1920 – Berlin
+
—
+
13. Dezember 1920·📍 Berlin·an Walter Dieckmann
+
+
+
Kasten IV · Mappe 8
+
+
+
+
+
+ + + diff --git a/docs/specs/briefwechsel-fill/02-thumbnail-rows.html b/docs/specs/briefwechsel-fill/02-thumbnail-rows.html new file mode 100644 index 00000000..1a0d875d --- /dev/null +++ b/docs/specs/briefwechsel-fill/02-thumbnail-rows.html @@ -0,0 +1,391 @@ + + + + +Spec 2 — Thumbnail Rows · Briefwechsel + + + + + + + +
+
+
+

Briefwechsel — Fill the Empty Rows

+

Five approaches to turning the empty right-hand space into information that helps users scan and decide.

+
+
+
ConceptThumbnail Rows v2
+
Spec2 / 5
+
EffortMedium — needs PDF thumbnail service
+
+
+
+ + +
+ +
+ +
DocumentsPersonsLettersAdmin
+
⬆ UPLOAD
DE · EN · ES
MR
+
+ +
+ +
+

Concept 2 · Thumbnail Rows — discovery through visual + summary

+ /briefwechsel is for fun discovery, not dense scanning. The row gets a bigger first-page thumbnail (portrait for letters, landscape for postcards); the summary reads like a quote next to it; the right column stays calm — just the date. Rows without a summary remain clean and uncrowded. +
✚ Visual recognition — letters and postcards look like what they are✚ Summary reads as a quote, invites opening the letter✚ Distribution bar gives the bilateral pair its own identity− Depends on the PDF-thumbnail service (open issue)
+
+ + +
Beispiel 1 alle Briefe von Walter de Gruyter · 851
+
Single-sender case: sender is filled, correspondent is open. Direction arrows tell sent vs received.
+ +
+
+
Person
Walter de Gruyter
+
Korrespondent — optional
Alle Korrespondenten
+
+
+
Newest ↓
▾ Filter
+
851 Briefe
+
+
📋 Alle Briefe von Walter de Gruyter — wähle einen Korrespondenten oben um einzugrenzen
+
+ +
+
19401 Brief
+ +
+
+
+
+
+
+
+
Demo leserlicher Brief
+
letzte Lebenstage von W. Dörpfeld in Griechenland — ausführlicher Bericht aus Belgard mit persönlichen Anmerkungen
+
← eingehendGertrud von Rofden·📍 Belgard·DörpfeldGriechenland
+
+
+
31. Mai 1940
+
vor 85 Jahren
+
+
+ +
19235 Briefe
+ +
+
+
+
+
+
+
+
W-0397 – 2. September 1923 – B.Lichterfelde
+
von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte — Notiz auf der Rückseite mit Korrekturen
+
→ ausgehendan Herbert Cram·📍 B.Lichterfelde·VerlagFamilie
+
+
+
2. September 1923
+
vor 102 Jahren
+
+
+ + +
+
+
+
+
+
+
+
Ansichtskarte – 2. September 1923 – B.Lichterfelde
+
kurze Grüße aus B.Lichterfelde, Hinweis auf den kommenden Besuch
+
→ ausgehendan Herbert Cram·📍 B.Lichterfelde·✉ Postkarte
+
+
+
2. September 1923
+
vor 102 Jahren
+
+
+ + +
+
+
+
+
+ 4 S. +
+
+
W-0524 – 31. Juli 1923 – Berlin
+
Glückwunsch zum 60. Geburtstag, Bericht über den Verlag und den anstehenden Umzug nach B.Lichterfelde im kommenden Herbst
+
→ ausgehendan Walter Dieckmann·📍 Berlin·GeburtstagVerlag
+
+
+
31. Juli 1923
+
vor 102 Jahren
+
+
+ + +
+
+
+
+
+
+
+
W-0396 – 2. September 1923 – B.Lichterfelde
+
→ ausgehendan Herbert Cram·📍 B.Lichterfelde
+
+
+
2. September 1923
+
vor 102 Jahren
+
+
+ +
192237 Briefe
+ +
+
+
+
+
+
+
+
W-0521 – 24. Dezember 1922 – Berlin
+
Weihnachtsbrief, Erinnerungen an das Jahr und Bitte um ein Bild der Kinder zum Christfest
+
→ ausgehendan Walter Dieckmann·📍 Berlin·WeihnachtenFamilie
+
+
+
24. Dezember 1922
+
vor 103 Jahren
+
+
+
+ + +
Beispiel 2 Briefwechsel Walter ↔ Herbert · 143
+
Bilateral case: both filters are set. The distribution bar above the list shows how the correspondence is split — instantly visible who wrote more.
+ +
+
+
Person
Walter de Gruyter
+
Korrespondent
Herbert Cram
+
+
+
⇄ Tauschen
+
Newest ↓
▾ Filter
+
143 Briefe im Zeitraum
+
+
+ + +
+
192312 Briefe
+ +
+
+
+
+
+
+
+
W-0397 – 2. September 1923 – B.Lichterfelde
+
von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte
+
→Walter an Herbert·📍 B.Lichterfelde·Verlag
+
+
+
2. September 1923
+
vor 102 Jahren
+
+
+ +
+
+
+
+
+
+
+
H-0213 – 29. August 1923 – Leipzig
+
Antwort auf Walters Anfrage zur Herbstauslieferung, Bitte um Rückmeldung bis Monatsende
+
←Herbert an Walter·📍 Leipzig·Verlag
+
+
+
29. August 1923
+
vor 102 Jahren
+
+
+ +
+
+
+
+
+
+
+
Ansichtskarte – 20. August 1923 – Thüringer Wald
+
Urlaubsgruß, kurze Notiz über Wetter und geplante Rückkehr
+
←Herbert an Walter·📍 Thüringer Wald·✉ Postkarte
+
+
+
20. August 1923
+
vor 102 Jahren
+
+
+ +
+
+
+
+
+ 3 S. +
+
+
W-0392 – 23. November 1921 – Bad Kissingen
+
Kurbericht aus Bad Kissingen, Gesundheitsupdate nach der ersten Woche, Grüße an die Familie Cram
+
→Walter an Herbert·📍 Bad Kissingen·Kuraufenthalt
+
+
+
23. November 1921
+
vor 104 Jahren
+
+
+
+ + +
+ Details: +
    +
  • Thumbnail — 82×106 for portrait, 104×72 for landscape/postcards. Postcards also get a stamp + postmark corner. Kurrent handwriting rendered with slight line skew; typewriter rendered with clean parallel lines. Multi-page letters get a "4 S." badge.
    • +
  • Summary — shown in serif italic with colored quote marks. Reads like a quote from the letter. If empty, the row simply omits the line — no apologetic placeholder.
    • +
  • Right column — date only, in serif. We dropped archive box (only meaningful for one family archive) and any lookup metadata. The right column stays calm on purpose.
    • +
  • Distribution bar — appears only in bilateral mode (both sender and receiver set). Pattern lifted from the existing ConversationTimeline so it's familiar.
    • +
  • Mobile — thumbnail shrinks (72×94 portrait / 82×58 landscape) and the right column wraps under the body.
    • +
+
+
+
+ + + diff --git a/docs/specs/briefwechsel-fill/03-master-detail.html b/docs/specs/briefwechsel-fill/03-master-detail.html new file mode 100644 index 00000000..074c826c --- /dev/null +++ b/docs/specs/briefwechsel-fill/03-master-detail.html @@ -0,0 +1,222 @@ + + + + +Spec 3 — Master-Detail · Briefwechsel + + + + + + + +
+
+
+

Briefwechsel — Fill the Empty Rows

+

Five approaches to turning the empty right-hand space into information that helps users scan and decide.

+
+
+
ConceptMaster-Detail Split
+
Spec3 / 5
+
EffortMedium — requires selection state
+
+
+
+ + +
+ +
+ +
DocumentsPersonsLettersAdmin
+
⬆ UPLOAD
DE · EN · ES
MR
+
+ +
+ +
+

Concept 3 · Master-Detail Split — list on left, preview panel on right

+ Keep the list compact (it stays scannable). Add a persistent right-hand panel that fills the empty space with a preview of the selected letter — thumbnail, metadata, summary, and a transcription excerpt when available. Click a row to swap its content; "Open" button still navigates to the full document page. +
✚ Users browse 10× more letters per session (no back-nav)✚ Right column is always doing work− On narrow viewports collapses to stacked− Mobile pattern differs — needs sheet/drawer
+
+ + +
+
+
Person
Walter de Gruyter
+
Korrespondent — optional
Alle Korrespondenten
+
+
+
Newest ↓
▾ Filter
+
851 Briefe
+
+
📋 Alle Briefe von Walter de Gruyter — wähle einen Korrespondenten oben um einzugrenzen
+
+ +
+ +
+
19401 Brief
+
+
←
+
+
Demo leserlicher Brief
+
31. Mai 1940·Belgard·Gertrud von Rofden
+
+ +
+ +
19235 Briefe
+ +
+
→
+
+
W-0397 – 2. September 1923 – B.Lichterfelde
+
2. Sep 1923·B.Lichterfelde·Herbert Cram
+
+ +
+ +
+
→
+
+
W-0396 – 2. September 1923 – B.Lichterfelde
+
2. Sep 1923·B.Lichterfelde·Herbert Cram
+
+ +
+ +
+
→
+
+
W-0524 – 31. Juli 1923 – Berlin
+
31. Juli 1923·Berlin·Walter Dieckmann
+
+ +
+ +
+
→
+
+
W-0523 – 12. Mai 1923 – Berlin
+
12. Mai 1923·Berlin·Walter Dieckmann
+
+ +
+ +
+
→
+
+
W-0522 – 7. März 1923 – Lindau Bodensee
+
7. März 1923·Lindau Bodensee·Walter Dieckmann
+
+ +
+ +
192237 Briefe
+ +
+
→
+
+
W-0521 – 24. Dezember 1922 – Berlin
+
24. Dez 1922·Berlin·Walter Dieckmann
+
+ +
+
+ + +
+
+
+
+
→ Ausgehend · an Herbert Cram
+

W-0397 – 2. September 1923 – B.Lichterfelde

+
+
✕
+
+
+
+
+
+
+
+
Datum
2. September 1923
+
Ort
B.Lichterfelde
+
Absender
Walter de Gruyter
+
Empfänger
Herbert Cram
+
Archiv
Kasten VI · Mappe 7
+
+
„von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte — Notiz auf der Rückseite mit Korrekturen zur Publikationsliste."
+
VerlagFamilieKorrespondenz
+
+
+
+ Transkription (Auszug) + „Lieber Herbert, heute erreichte mich Dein Brief vom 29. August, und ich danke Dir herzlich für die ausführliche Schilderung. Die Angelegenheit mit dem Verlag soll am Montag abschließend besprochen werden — ich werde Dir sogleich Bescheid geben. In Belgard waren wir alle wohl, und die Kinder grüßen …" +
+
+
◎ In Briefwechsel öffnen
+
↗ Vollständiges Dokument
+
+
+
Tipp: Pfeiltasten ↑↓ zum Durchblättern, Enter zum Öffnen.
+
+
+
+
+ + + diff --git a/docs/specs/briefwechsel-fill/04-gallery-cards.html b/docs/specs/briefwechsel-fill/04-gallery-cards.html new file mode 100644 index 00000000..740f81a5 --- /dev/null +++ b/docs/specs/briefwechsel-fill/04-gallery-cards.html @@ -0,0 +1,227 @@ + + + + +Spec 4 — Gallery Cards · Briefwechsel + + + + + + + +
+
+
+

Briefwechsel — Fill the Empty Rows

+

Five approaches to turning the empty right-hand space into information that helps users scan and decide.

+
+
+
ConceptGallery Cards
+
Spec4 / 5
+
EffortLarge — structural change + thumbnail service
+
+
+
+ + +
+ +
+ +
DocumentsPersonsLettersAdmin
+
⬆ UPLOAD
DE · EN · ES
MR
+
+ +
+ +
+

Concept 4 · Gallery Cards — grid of letter cards, album style

+ Replace the list with a 4-column (collapses to 3 → 2) grid. Each card is a miniature letter card with thumbnail, title, date, correspondent, and a 3-line summary. Year bands replace dividers. The page becomes a family-letter-album. +
✚ Beautiful browsing for archive overview✚ Most "filled" of all concepts — no empty space− Chronological scanning is worse than lists− 851 letters → ~213 rows in grid, long page or needs paging
+
+ + +
+
+
Person
Walter de Gruyter
+
Korrespondent — optional
Alle Korrespondenten
+
+
+
Newest ↓
▾ Filter
+
☰ Liste▦ Galerie
+
851 Briefe
+
+
📋 Alle Briefe von Walter de Gruyter — wähle einen Korrespondenten oben um einzugrenzen
+
+ +
1940 1 Brief
+
+
+
+
+ ← eingehend +
+
+

Demo leserlicher Brief

+
31. Mai 1940 · Belgard
+
von Gertrud von Rofden
+
„letzte Lebenstage von W. Dörpfeld in Griechenland — ausführlicher Bericht"
+
DörpfeldGriechenland
+
+
+
+ +
1923 5 Briefe
+
+
+
+
+ → ausgehend +
+
+

W-0397 – 2. September 1923 – B.Lichterfelde

+
2. September 1923 · B.Lichterfelde
+
an Herbert Cram
+
„von Elsbeth geschriebener Kommentar, den Herbert zum Brief erzählte"
+
VerlagFamilie
+
+
+ +
+
+
+ → ausgehend +
+
+

W-0396 – 2. September 1923 – B.Lichterfelde

+
2. September 1923 · B.Lichterfelde
+
an Herbert Cram
+
+
+
+ +
+
+
+ → ausgehend +
+
+

W-0524 – 31. Juli 1923 – Berlin

+
31. Juli 1923 · Berlin
+
an Walter Dieckmann
+
„Glückwunsch zum 60. Geburtstag, Bericht über den Verlag"
+
GeburtstagVerlag
+
+
+ +
+
+
+ → ausgehend +
+
+

W-0523 – 12. Mai 1923 – Berlin

+
12. Mai 1923 · Berlin
+
an Walter Dieckmann
+
„Routinebericht des Verlagsgeschäfts, Rückfragen zu Auftragslage"
+
Verlag
+
+
+
+ +
1922 37 Briefe
+
+
+
+
+ → ausgehend +
+
+

W-0521 – 24. Dezember 1922 – Berlin

+
24. Dezember 1922 · Berlin
+
an Walter Dieckmann
+
„Weihnachtsbrief, Erinnerungen an das Jahr und Bitte um ein Bild der Kinder"
+
WeihnachtenFamilie
+
+
+
+
+
+ → ausgehend +
+
+

W-0392 – 23. Nov 1921 – Bad Kissingen

+
23. November 1921 · Bad Kissingen
+
an Herbert Cram
+
„Kurbericht, Gesundheitsupdate, Grüße an die Familie"
+
Kuraufenthalt
+
+
+
+
+
+ → ausgehend +
+
+

W-0501 – 13. Dez 1920 – Berlin

+
13. Dezember 1920 · Berlin
+
an Walter Dieckmann
+
+
+
+
+
+
+ → ausgehend +
+
+

W-0484 – 27. Dez 1919 – Berlin

+
27. Dezember 1919 · Berlin
+
an Walter Dieckmann
+
„Jahreswechselgrüße, kurzer Bericht über den Zustand des Verlags"
+
Neujahr
+
+
+
+ +
+
+ + + diff --git a/docs/specs/briefwechsel-fill/05-person-dashboard.html b/docs/specs/briefwechsel-fill/05-person-dashboard.html new file mode 100644 index 00000000..4cad1f80 --- /dev/null +++ b/docs/specs/briefwechsel-fill/05-person-dashboard.html @@ -0,0 +1,303 @@ + + + + +Spec 5 — Person Dashboard · Briefwechsel Insights + + + + + + + +
+
+
+

Briefwechsel — Fill the Empty Rows

+

Insights belong on the person detail page, not on the letter list. This spec mocks the dashboard that replaces the "empty feeling" problem at its proper home.

+
+
+
ConceptPerson Dashboard
+
Spec5 / 5
+
Page/persons/[id] (not /briefwechsel)
+
+
+
+ + +
+ +
+ +
DocumentsPersonsLettersAdmin
+
⬆ UPLOAD
DE · EN · ES
MR
+
+ +
+ +
+

Concept 5 · Person Dashboard — insights live on /persons/[id], not on /briefwechsel

+ The /briefwechsel page stays focused on reading letters. The archive-level understanding (how much, with whom, when, about what) is moved to the person detail page, where it's useful in all contexts — not only when a correspondent is selected. A "Briefwechsel öffnen" button ties the two pages together. +
✚ /briefwechsel stays calm and focused✚ Dashboard is useful on every visit to a person, not just during letter review✚ Each dashboard element links back into /briefwechsel with filters− Separates the work over two pages — needs a clear handoff button
+
+ +
← Zurück
+ +
+ +
+
+
WG
+
Walter de Gruyter
+
1862 – 1923
+
Verleger und Namensgeber des Verlags Walter de Gruyter. Langjährige Korrespondenz mit Familie Dieckmann und Herbert Cram rund um Verlag, Familie und Kuraufenthalte.
+
+ ◎ Bearbeiten + ↗ Briefwechsel öffnen +
+
+
+

Namens­varianten

+
    +
  • Walter de GruyterHauptname
    • +
  • W. de GruyterAbkürzung
    • +
  • Dr. Walter de Gruytermit Titel
    • +
+
+
+ + +
+
+
+

Korrespondenz-Überblick

+ ↗ Briefwechsel öffnen +
+ +
+
851
Briefe gesamt
+
612
ausgehend
+
239
eingehend
+
42
Jahre
+
+ +
+

Aktivität über die Jahre Spitzenjahr 1922 · 78 Briefe

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
18981922 ▲1940
+
+ +
+

Richtungsverteilung

+
+ → 612 ausgehend · 72% + ← 239 eingehend · 28% +
+
+ + +
+
+ +
+
+

Häufigste Korrespondenten Top 6 von 87

+
+
⇄Walter Dieckmann184
+
⇄Herbert Cram143
+
⇄Ella Dieckmann88
+
⇄Eugenie de Gruyter77
+
⇄Gertrud von Rofden58
+
⇄Käthe Dieckmann47
+
+ +
+ +
+

Häufigste Orte Top 5 von 42

+
+
📍 Berlin412
+
📍 B.Lichterfelde180
+
📍 Bad Kissingen58
+
📍 Cöln37
+
📍 Belgard26
+
+
+
+ +
+

Beliebte Schlagwörter Klick filtert den Briefwechsel

+
+ Verlag + Familie + Geburtstag + Weihnachten + Kuraufenthalt + Reise + Geschäft + Krieg + Krankheit + Schule + Hochzeit + Tod + Namenstag + Neujahr +
+
+
+ + +
+
Geschriebene Briefe 612 Briefe · Alle anzeigen →
+
W-0397 – 2. September 1923 – B.Lichterfeldean Herbert Cram
+
W-0521 – 24. Dezember 1922 – Berlinan Walter Dieckmann
+
W-0392 – 23. November 1921 – Bad Kissingenan Herbert Cram
+
+ +
+
Empfangene Briefe 239 Briefe · Alle anzeigen →
+
Demo leserlicher Briefvon Gertrud von Rofden
+
+
+
+ +
+ How this ties back to /briefwechsel: +
    +
  • Every correspondent row → /briefwechsel?senderId=<person>&receiverId=<other> (bilateral view)
    • +
  • Every location → /briefwechsel?senderId=<person>&location=<x>
    • +
  • Every tag → /briefwechsel?senderId=<person>&tag=<x>
    • +
  • Every histogram year → /briefwechsel?…&from=YYYY-01-01&to=YYYY-12-31
    • +
+ The dashboard is the discovery surface; /briefwechsel is the reading surface. +
+
+
+ + + diff --git a/docs/specs/briefwechsel-fill/_shared.css b/docs/specs/briefwechsel-fill/_shared.css new file mode 100644 index 00000000..9735fa08 --- /dev/null +++ b/docs/specs/briefwechsel-fill/_shared.css @@ -0,0 +1,102 @@ +/* Shared CSS for briefwechsel-fill specs */ +:root { + --brand-navy: #002850; + --brand-mint: #A6DAD8; + --brand-sand: #E4E2D7; + --bg: #ECEAE4; + --surface: #ffffff; + --line: #E4E2D7; + --line-2: #EFEDE6; + --muted: #F7F5F2; + --ink: #1A1A1A; + --ink-3: #666; + --primary: #002850; + --accent: #2F9E95; +} +*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} +body{font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5} +.font-serif{font-family:'Merriweather',Georgia,serif} + +/* ── Spec meta header ─── */ +.spec-meta{background:var(--brand-navy);color:#fff;padding:18px 28px;border-bottom:3px solid var(--brand-mint)} +.spec-meta-inner{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} +.spec-meta h1{font-size:18px;font-weight:800;letter-spacing:.4px} +.spec-meta h1 span{opacity:.5;font-weight:400} +.spec-meta p{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;max-width:600px} +.spec-meta-right{font-size:11px;display:flex;gap:20px;flex-wrap:wrap} +.spec-meta-right div strong{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.45);font-weight:800;margin-bottom:2px} +.spec-nav{background:#0a1e36;padding:10px 28px;border-bottom:1px solid rgba(255,255,255,.08)} +.spec-nav-inner{max-width:1440px;margin:0 auto;display:flex;gap:4px;font-size:11px;flex-wrap:wrap;align-items:center} +.spec-nav a{color:rgba(255,255,255,.55);text-decoration:none;padding:4px 10px;border-radius:3px;font-weight:600} +.spec-nav a:hover{color:#fff;background:rgba(255,255,255,.06)} +.spec-nav a.on{color:var(--brand-navy);background:var(--brand-mint)} +.spec-nav .lbl{color:rgba(255,255,255,.3);font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-right:8px} + +/* ── Real page chrome ─── */ +.page-wrap{background:var(--bg);min-height:calc(100vh - 120px)} +.hdr{background:var(--brand-navy);color:#fff;padding:0 32px;height:64px;display:flex;align-items:center;gap:40px} +.hdr-logo{font-size:16px;font-weight:900;letter-spacing:1.5px} +.hdr-nav{display:flex;gap:28px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px} +.hdr-nav a{color:rgba(255,255,255,.7);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent} +.hdr-nav a.on{color:#fff;border-color:var(--brand-mint)} +.hdr-right{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:11px;color:rgba(255,255,255,.65)} +.hdr-upload{border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:6px 12px;font-weight:700;letter-spacing:.5px} +.hdr-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-mint);color:var(--brand-navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px} + +.page{max-width:1440px;margin:0 auto;padding:28px 32px} + +.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.02);padding:20px 24px;margin-bottom:24px} +.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:14px} +.fl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:6px} +.fi{height:40px;border:1px solid #D1D5DB;border-radius:2px;background:#fff;padding:0 12px;font-size:13px;display:flex;align-items:center;font-family:'Merriweather',serif} +.fi.empty{color:#bbb;font-style:italic} +.filter-actions{display:flex;gap:8px;align-items:center} +.btn{height:34px;border:1px solid #D1D5DB;background:#F7F5F2;border-radius:2px;padding:0 12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#444;display:inline-flex;align-items:center;gap:6px} +.count{margin-left:auto;font-size:13px;color:#555} +.count b{color:var(--brand-navy)} + +.hintbar{margin-top:14px;background:#e9f5f4;border:1px solid #c8e6e4;border-radius:2px;padding:10px 14px;font-size:12px;color:#1a3e3c;display:flex;align-items:center;gap:8px} +.hintbar b{color:var(--brand-navy)} + +/* ── Year divider ─── */ +.year-divider{display:flex;align-items:baseline;gap:12px;background:var(--muted);border-top:2px solid var(--line);border-bottom:1px solid var(--line);padding:8px 14px} +.year-divider .y{font-size:22px;font-weight:900;color:var(--brand-navy);letter-spacing:-.5px} +.year-divider .n{font-size:12px;font-weight:700;color:#888} + +/* ── Status dots ─── */ +.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0} +.dot.uploaded{background:var(--brand-mint)} +.dot.transcribed{background:var(--brand-mint)} +.dot.reviewed{background:rgba(0,40,80,.55)} +.dot.archived{background:var(--brand-navy)} + +/* ── Direction indicator ─── */ +.dir{width:16px;height:16px;flex-shrink:0;opacity:.6} +.dir-out{color:var(--primary)} +.dir-in{color:var(--accent)} + +/* ── Concept intro banner ─── */ +.concept-intro{background:#fff;border-left:4px solid var(--brand-mint);padding:14px 20px;margin-bottom:24px;font-size:13px;color:#333;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.04)} +.concept-intro h2{font-size:14px;font-weight:800;color:var(--brand-navy);margin-bottom:4px} +.concept-intro .gain,.concept-intro .cost{display:inline-block;font-size:11px;margin-right:14px;margin-top:6px} +.concept-intro .gain{color:#166534} +.concept-intro .cost{color:#92400E} + +/* ── Mock letter thumbnail ─── */ +.thumb{background:linear-gradient(180deg,#fdfcf7 0%,#f6f3ea 100%);border:1px solid #d9d4c6;box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(0,0,0,.05);position:relative;overflow:hidden;flex-shrink:0;border-radius:1px} +.thumb::before{content:'';position:absolute;top:0;left:0;right:0;height:28%;background:linear-gradient(135deg,rgba(166,218,216,.25) 0%,transparent 60%)} +.thumb-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:20% 12% 20% 12%} +.thumb-lines i{display:block;height:1px;background:rgba(0,40,80,.2)} +.thumb-lines i:nth-child(odd){width:95%} +.thumb-lines i:nth-child(3n){width:70%} +.thumb-lines i:nth-child(5n){width:80%} +.thumb.handwritten .thumb-lines{padding:15% 10%;gap:4px} +.thumb.handwritten .thumb-lines i{height:1.2px;background:rgba(0,40,80,.35);transform:rotate(-.6deg)} + +/* ── Tag chip ─── */ +.tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;background:var(--brand-mint);color:var(--brand-navy);padding:2px 7px;border-radius:10px;letter-spacing:.3px} +.tag.muted{background:#EEE8DC;color:#666} + +/* ── Links & generic ─── */ +a{color:inherit} +.hide{display:none} diff --git a/docs/specs/briefwechsel-fill/index.html b/docs/specs/briefwechsel-fill/index.html new file mode 100644 index 00000000..3c5e4a77 --- /dev/null +++ b/docs/specs/briefwechsel-fill/index.html @@ -0,0 +1,290 @@ + + + + +Briefwechsel — Fill the Empty Rows · Overview + + + + + + + +
+
+
+

Briefwechsel — Fill the Empty Rows

+

Five approaches. The first four change the /briefwechsel row itself; the fifth puts insights where they belong — on the person detail page.

+
+
+
Page/briefwechsel  ·  /persons/[id]
+
BriefRows feel sparse — ~60% of row width is empty
+
+
+
+ + +
+ +
+
+

The situation

+

On /briefwechsel?senderId=… (e.g. 851 letters for Walter de Gruyter), each row shows only title, date, location and counterpart — leaving the right half empty. The question is: what belongs there?

+

The five specs answer differently. Specs 1–4 rework the row itself. Spec 5 argues the archive-level view (top correspondents, activity, tag cloud) belongs on /persons/[id], not here — and mocks the dashboard that lives there instead.

+
+
+

Data we can use today

+
    +
  • Title / Filename ✓
    • +
  • Document date ✓
    • +
  • Location ✓
    • +
  • Sender / receivers ✓
    • +
  • Summary text ✓
    • +
  • Tags ✓
    • +
  • Archive box & folder ✓
    • +
  • PDF thumbnail open issue
    • +
+

Removed from earlier drafts: status lifecycle (will be dropped from the product) and script type (only set after OCR, unreliable).

+
+
+ +
Concepts that rework /briefwechsel Specs 1–4
+ +
+ + 01 +
+
Demo leserlicher Brief
31. Mai 1940 · Belgard
„letzte Lebenstage…"
Dörpfeld
VII · 5
+
W-0397 – 2. Sep 1923
B.Lichterfelde · H. Cram
„von Elsbeth…"
Verlag
VI · 7
+
W-0521 – 24. Dez 1922
Berlin · W. Dieckmann
„Weihnachtsbrief…"
Weihn.
V · 3
+
+
+

Rich Rows

+

Pack summary, tags and archive box into each row. No images, no structural change. Fastest to ship.

+
ScanningSmall effort
+
+ + + + 02 +
+
Demo leserlicher Brief„letzte Lebenstage von W. Dörpfeld…"← Gertrud · Belgard31. Mai 1940
+
W-0397 – 2. Sep 1923„von Elsbeth geschriebener Kommentar…"→ H. Cram · B.Lichterfelde2. Sep 1923
+
W-0521 – 24. Dez 1922„Weihnachtsbrief, Bitte um Bild…"→ W. Dieckmann · Berlin24. Dez 1922
+
+
+

Thumbnail Rows

+

PDF preview on the left anchors each row. Summary (when filled) becomes the readable context line.

+
RecognitionNeeds thumbnails
+
+ + + + 03 +
+
+
Demo Brief
+
W-0397
+
W-0396
+
W-0524
+
W-0523
+
+
+
+
W-03972. Sep 1923
B.Lichterfelde
→ H. Cram

„von Elsbeth…"
+
+
+
+

Master-Detail Split

+

Compact list left, sticky preview right. Click a row → thumbnail, metadata, summary, excerpt. Browse without losing context.

+
Reading flowMobile pattern needed
+
+ + + + 04 +
+
Demo Brief
+
W-0397 · 2 Sep
+
W-0396 · 2 Sep
+
W-0524 · 31 Jul
+
W-0523 · 12 Mai
+
W-0522 · 7 Mär
+
+
+

Gallery Cards

+

Abandon the list for a 4-column grid. Thumbnail-first, family-album feel. Biggest visual change.

+
BrowsingPoor date-scanning
+
+ +
+ +
The archive-level view moves to /persons/[id] Spec 5 · separate page
+ +
+ + 05 +
+
+
WG
+
Walter de Gruyter
+
1862–1923
+
+
+
Korrespondenz-Überblick ↗ Briefwechsel
+
+
851
gesamt
+
612
→
+
239
←
+
42J
Jahre
+
+
+
W. Dieckmann184H. Cram143E. Dieckmann88
+
VerlagFamilieWeihn.KurReise
+
+
+
+

Person Dashboard (/persons/[id])

+

The /briefwechsel list stays calm and reading-focused; the archive-level view — activity over years, top correspondents, top locations, tag cloud — lives on the person detail page, where it's useful every time you open a person, not only during letter review.

+

Every correspondent, location, tag and year on the dashboard links into /briefwechsel with pre-filled filters, so the dashboard is the discovery surface and /briefwechsel is the reading surface.

+
DiscoveryWorks for bilateral too (always scoped to the person)Needs aggregation endpoints
+
+ +
+ +
+ + + + + + + + + + + +
ConceptBest for user who wants to…Visual changeNew backendEffortMobile
1 · Rich RowsScan quickly, see summary + tags on every letterRow height 2× currentNoneSmallRight column collapses
2 · Thumbnail RowsRecognise letters visually, pick up where they left offThumbnail on the leftPDF thumbnail service (open issue)MediumFine
3 · Master-DetailFlip through letters in a reading sessionTwo-column splitNone mandatoryMediumDrawer / sheet needed
4 · Gallery CardsBrowse the collection as an albumFull structural change (list → grid)PDF thumbnail serviceLargeGrid reflows 4 → 2
5 · Person DashboardUnderstand a person's correspondence at a glanceNew section on /persons/[id]Aggregation endpoints (per-year, per-correspondent, per-location, per-tag)MediumStacks naturally
+
+ +
+ Proposed path forward: +
    +
  1. Ship Spec 1 (Rich Rows) now — it uses data we already have and tests whether "empty rows" is really the problem, or whether it's "not enough context to decide which letter to open".
    2. +
  2. Build Spec 5 (Person Dashboard) next — it's independent of /briefwechsel and turns the person page into a real archive overview.
    3. +
  3. Upgrade to Spec 2 (Thumbnail Rows) once the thumbnail service lands — it layers cleanly on top of Spec 1 without throwing work away.
    4. +
+
Specs 3 and 4 remain on the table but are bigger re-architectures — revisit after watching how users behave with 1 + 5 + 2.
+
+
+ + +