Four layout concepts for side-by-side PDF scan viewing and collaborative transcription editing. Users can follow along the original handwritten letter while multiple family members contribute to and refine the transcript together.
The scanned documents are images of handwritten letters — there is no text layer in the PDFs. Family members need to manually transcribe these letters, often collaboratively. The current transcription panel shows read-only text in the bottom panel. These mockups explore how to make transcription a first-class inline editing experience where the scan and transcript are always visible together, and multiple users can contribute simultaneously.
Key constraints: Senior users (60+) need large text and clear visual connection between scan and transcript. The existing annotation system (draw rectangle on PDF + comment thread) stays separate — transcription is a different workflow: line-by-line text entry that maps to the full document, not a specific region.
Open a scanned letter, read the handwriting, type the transcript line by line while seeing the original. Other family members can join and edit the same transcript in real time.
/* Desktop: existing topbar + "Transkribieren" toggle button replaces bottom panel transcription tab. * Activating transcription mode opens a vertical split: PDF left (flex:1) + transcript right (400px default). * Draggable handle between panels (pointer-events on 4px strip, cursor:col-resize). * Transcript toolbar: Edit/Preview/History tabs + presence dots (WebSocket: who is online + who is editing). * Line numbers (mono 12px) + text (serif 16px, editable contenteditable divs or textarea rows). * Colored left-border per active user (2px, distinct hue from a 6-color palette). * "[unleserlich]" placeholder for illegible passages — italic, muted, bracketed. * Status bar: save state (auto-save debounced 2s) + line count + cursor position + last editor. * Mobile: PDF collapses to a fixed-height thumbnail strip (100px) at top, transcript fills remaining space. * Tap thumbnail strip to expand PDF to 60% height (push transcript down). */
| Element | Value | Notes |
|---|---|---|
| Desktop — split view | ||
| PDF panel | flex:1, min-width:300px, bg:#D4D0C8 | Existing PdfViewer component, scroll synced with transcript |
| Transcript panel | 400px default, min:280px, max:60vw, resizable | border-left:1px solid line, bg:surface |
| Resize handle | 4px wide, cursor:col-resize, bg:line | Centered dot indicator (2px × 20px) |
| Toolbar | h:32px, bg:surface, border-bottom, flex row | Edit/Preview/History + presence group right-aligned |
| Line number | DM Mono 12px, muted, width:24px, text-align:right | Sticky on horizontal scroll if transcript is wide |
| Transcript text | Tinos 16px/1.6, color:ink, contenteditable | 18px for senior mode preference |
| User highlight | border-left:2px solid [user-color], bg:rgba([user-color],.08) | 6 distinct hues, assigned round-robin |
| Status bar | h:24px, bg:sand, border-top, mono 11px | Auto-save indicator + line info + last editor |
| Mobile | ||
| PDF strip | 100px fixed height, bg:pdf-bg, border-bottom:2px mint | Tap to expand to 60vh. Pinch-zoom supported. |
| Transcript | flex:1, padding:12px 16px, serif 16px | Line numbers: mono 10px, inline before text |
/* The PDF viewer stays full-width — no resize, no layout shift. * "Transkribieren" button toggles a slide-over panel from the right (transform: translateX). * Panel: position:absolute, top:0, right:0, bottom:0, width:480px. * Background: rgba(255,255,255,.92) + backdrop-filter:blur(8px) — scan bleeds through slightly. * Left border: 2px solid mint (brand accent) to clearly separate from PDF. * Close button (×) in toolbar top-right to dismiss panel. * Same transcript editor as Mockup A: line numbers + editable lines + presence. * Pro: zero layout shift, PDF zoom/pan unaffected. Con: obscures right side of scan. */
| Element | Value | Notes |
|---|---|---|
| Panel | 480px, position:absolute right:0, z:20 | backdrop-filter:blur(8px), rgba(255,255,255,.92) |
| Left accent | border-left:2px solid mint | Brand color boundary |
| Transition | transform 200ms ease-out | translateX(100%) → translateX(0) |
| Shadow | -4px 0 24px rgba(0,0,0,.1) | Depth cue separating from PDF |
/* A fundamentally different layout: no split view. Instead, a single centered column (max-width:800px). * Each "section" = a card with two halves: * Top half: cropped region of the PDF scan (rendered via canvas crop or CSS clip-path from the full PDF). * Bottom half: editable transcript text for that section. * User defines section boundaries by drawing horizontal lines on the PDF (like the annotation tool but simpler). * Sections are numbered and labeled (Anrede, Hauptteil, Schluss — or custom labels). * Presence: per-section indicator showing who is editing that block. * Pro: natural reading flow, works great on mobile without layout changes. Con: requires section-splitting UX. */
| Element | Value | Notes |
|---|---|---|
| Column | max-width:800px, centered, bg:sand, padding:24px | Scrollable single column |
| Section card | border-radius:8px, overflow:hidden, mb:20px | Top: scan crop (pdf-bg). Bottom: surface + transcript. |
| Scan crop | min-height:80px, bg:pdf-bg, centered paper snippet | Canvas-based crop from PDF page at defined Y offsets |
| Transcript block | Tinos 16px/1.7, padding:12px 16px, contenteditable | Per-section editing. User color left-border when active. |
| Section label | Montserrat 11px/600, uppercase, tracking-wide, muted | "Abschnitt 1 — Anrede" etc. |
/* Minimal change from current architecture. The existing DocumentBottomPanel + PanelTranscription stay. * Changes: * 1. PanelTranscription gains an "edit mode" toggle (currently read-only whitespace-pre-wrap text). * 2. Edit mode: contenteditable line-by-line editor with line numbers (same as mockups A/B). * 3. Scroll sync: scrolling the transcript highlights a position marker on the PDF's right edge. * - Implemented via: transcript scroll offset → normalized position → turquoise bar on PDF. * 4. Presence indicators shown in the tab bar (right side) and in the status bar. * 5. Mini toolbar above transcript: Edit/Preview + quick-insert buttons ([unleserlich], [Seitenwechsel]). * 6. Transcription tab gets a turquoise dot when someone is actively editing. * Pro: ships fastest, reuses all existing panel infrastructure. Con: vertical space is limited. */
| Element | Value | Notes |
|---|---|---|
| Panel min height | 200px when transcription tab active in edit mode | Existing drag-to-resize + open/close stays |
| Mini toolbar | h:28px, bg:surface, border-bottom:subtle, flex row | Edit/Preview + [unleserlich] + [Seitenwechsel] quick-insert |
| Scroll sync bar | 3px wide, turquoise, absolute right:0 on PDF area | Height proportional to visible transcript lines / total lines |
| Active tab dot | 5px turquoise circle, absolute top-right of tab | Visible when ≥1 user is editing in real time |
| Quick-insert btns | [unleserlich] and [Seitenwechsel] | Insert at cursor. Rendered as italic muted inline markers. |
Four approaches to the same user need: see the original scan and type/edit a transcript simultaneously, with multiple family members contributing. The documents are scanned handwritten letters (image-only PDFs, no text layer). The transcription must be editable inline — not in a separate "edit" page.
| Mockup | Layout | Pros | Cons | Complexity |
|---|---|---|---|---|
| A | Vertical split (PDF left, transcript right) | Both always visible, resizable, familiar pattern | PDF loses width on narrow screens | Medium |
| B | Slide-over panel on top of PDF | No layout shift, PDF stays full-width | Obscures right side of scan | Low |
| C | Interleaved scan crops + transcript blocks | Best reading flow, works on mobile natively | Requires section-splitting UX, complex PDF cropping | High |
| D | Enhanced existing bottom panel | Fastest to ship, no new layout needed | Vertical space squeeze, scan partially hidden | Low |
contenteditable div or a textarea row. Line numbers (mono font, right-aligned, muted).PATCH /api/documents/{id} with transcription field. Status indicator: "Gespeichert" (green) / "Speichert..." (muted) / "Nicht gespeichert" (error red).font-style:italic; color:ink-3; in square brackets. Insertable via toolbar button or keyboard shortcut (Ctrl+Shift+U).PanelTranscription.svelte — currently read-only. Needs edit mode toggle.DocumentBottomPanel.svelte — existing drag-to-resize panel with tabs. Mockup D enhances this directly.DocumentViewer.svelte — wraps PdfViewer. Mockups A/B need a split or overlay sibling.+page.svelte (document detail) — orchestrates all sub-components. New state: transcribeMode (boolean).DocumentTopBar.svelte — needs a "Transkribieren" toggle button (same pattern as existing annotate button).Document.transcription field (text) already exists. No schema change needed for basic single-user editing.transcription_versions table (document_id, user_id, content, timestamp) for version history./ws/transcription/{documentId} broadcasting Y.js updates.Start with Mockup D (enhanced bottom panel) as the MVP — it requires the least layout changes and builds on existing components. Once validated with users, upgrade to Mockup A (side-by-side split) for the full experience. Mockup C (interleaved) is the most innovative but requires significant PDF rendering work (canvas-based section cropping) and a section-splitting UX that adds complexity.
aria-live="polite" region for save status and presence changes.aria-label attributes.