As a user I want a focused document view with a resizable bottom panel so I can read documents, transcriptions, and discussions without sidebar clutter #62

New Issue

marcel · 2026-03-24T22:04:07+01:00

marcel commented

2026-03-24 22:04:07 +01:00

Background

User interviews found the current left sidebar too crowded. Key complaints:

Reading long transcriptions in the narrow sidebar column is uncomfortable
Metadata, transcription, history, and discussion all compete for sidebar space
There is no way to focus on the document alone

The goal is a layout where the document (PDF/image) fills the full viewport and contextual content (metadata, transcription, discussion, history) is accessible via a resizable bottom panel — without causing the PDF to re-render when the panel opens or resizes.

Layout

┌─────────────────────────────────────────────────────────────────┐
│ ← Back │ [Title truncated]  [date · sender → receivers]  [Edit][↓]│  ← top bar
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│                    PDF / Image viewer                           │
│                    (full width, full height)                    │
│                                                                 │
│                                                                 │
├── drag handle ──────────────────────────────────────────────────┤
│ [Metadaten] [Transkription] [Diskussion] [Verlauf]   [×]        │  ← tab bar
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│                    Active tab content                           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key behaviour

The document viewer is position: fixed / fills the full space beneath the top bar at all times. The bottom panel floats over it (position: fixed at the bottom). This is the same principle as the planned annotation drawer from #60 — the PDF canvas never resizes.
Clicking any tab opens the panel to its last-used height (default ~320 px). The × button collapses it back to just the tab bar.
The drag handle allows resizing between ~80 px (collapsed — only tab bar) and ~80 % of viewport height.
Panel state (open/closed, height, active tab) is persisted in localStorage so it survives navigation.
On documents without a file the panel opens to Metadaten by default (since the document area is otherwise empty).

Top bar compact metadata row

Replace the standalone <h1> with a two-line compact area:

[title, truncated with title tooltip]
[date short · sender initials/name → receiver name(s), truncated after 2 with "+N"]

This keeps sender/receiver context visible without allocating a full sidebar column, and handles the "long title + many receivers" case gracefully via truncation.

Tab contents

Tab	Content moved from sidebar
Metadaten	Details group (date, location, archive location, tags) + Persons group (sender card, receiver cards, conversation link)
Transkription	Summary + Transcription — now in a comfortable full-width reading column (max ~70 ch) centred in the panel
Diskussion	`CommentThread` + annotation comments (absorbs the planned floating drawer from #60)
Verlauf	History collapsible with version list and diff viewer

The AnnotationCommentPanel that currently lives inside PdfViewer is removed; annotation-related discussion moves to the Diskussion tab. The annotateMode state is lifted to the page level so the Annotieren button can move to the top bar (supersedes #61).

Supersedes / closes

Supersedes #60 (floating discussion drawer) — the bottom panel is that drawer, unified with all other content
Supersedes #61 (move annotation button to header) — included in this redesign

User Journey

User opens a document. The PDF fills the entire screen. Only the top bar is visible (back, title, compact who/when, edit, download).
User wants context: they click Metadaten in the bottom tab bar. A panel slides up showing date, location, sender, and receivers.
User wants to read the transcription: they click Transkription. The panel expands or they drag the handle up. The text renders in a comfortable wide column — no more narrow sidebar.
User wants to discuss a passage: they click Diskussion. The comment thread is visible while the document remains in view above the panel.
User wants to annotate: they click the Annotieren button in the top bar (only shown for users with ANNOTATE_ALL). Annotation mode activates on the PDF. When they click an annotation, the Diskussion tab opens automatically and scrolls to the annotation thread.
User wants full focus on the document: they click × on the panel. The PDF fills the screen completely.

E2E Scenarios

Scenario: Bottom panel is closed by default
  Given I open a document with a PDF
  Then the PDF viewer fills the full viewport
  And the panel content is not visible
  And the tab bar is visible at the bottom

Scenario: Opening the Metadaten tab shows sender and date
  Given I open a document detail page
  When I click the Metadaten tab
  Then the panel slides open
  And I can see the document date
  And I can see the sender's name

Scenario: Transkription tab renders the full text in a wide column
  Given I open a document that has a transcription
  When I click the Transkription tab
  Then the transcription text is visible in the panel

Scenario: Diskussion tab shows the comment thread
  Given I open a document
  When I click the Diskussion tab
  Then the comment input and existing comments are visible

Scenario: Closing the panel with × restores full-screen document view
  Given the panel is open
  When I click the × close button
  Then the panel collapses and only the tab bar remains visible

Scenario: Panel height persists after reload
  Given I have opened the panel and dragged it to a custom height
  When I reload the page
  Then the panel opens at the same height

Implementation notes

Component structure

+page.svelte
  ├─ DocumentTopBar.svelte        (new — top bar with compact metadata)
  ├─ DocumentViewer.svelte        (new — wraps PdfViewer / image / no-file states)
  └─ DocumentBottomPanel.svelte   (new — floating panel with tabs + drag)
       ├─ PanelMetadata.svelte    (Details + Persons sections)
       ├─ PanelTranscription.svelte
       ├─ PanelDiscussion.svelte  (CommentThread)
       └─ PanelHistory.svelte     (History versions + diff)

Drag-to-resize

Use pointermove / pointerup on the drag handle (touch-action: none). Store height in a $state variable and sync to localStorage. Clamp between MIN_HEIGHT (48 px — tab bar only) and MAX_HEIGHT (80 vh).

No PDF rerender

The document viewer uses position: absolute; inset: 0 within a relatively-positioned container that fills the remaining viewport below the top bar. The bottom panel is position: fixed; bottom: 0; left: 0; right: 0. Opening / resizing the panel never changes the document viewer's bounding box.

Annotation integration

annotateMode: boolean and activeAnnotationId: string | null are lifted from PdfViewer to +page.svelte and passed down as $bindable() props.
Clicking an annotation rectangle sets activeAnnotationId and switches the panel to the Diskussion tab.
The top bar shows the Annotieren button only when data.canAnnotate && doc.contentType?.startsWith('application/pdf').

## Background User interviews found the current left sidebar too crowded. Key complaints: - Reading long transcriptions in the narrow sidebar column is uncomfortable - Metadata, transcription, history, and discussion all compete for sidebar space - There is no way to focus on the document alone The goal is a layout where the document (PDF/image) fills the full viewport and contextual content (metadata, transcription, discussion, history) is accessible via a resizable bottom panel — without causing the PDF to re-render when the panel opens or resizes. ## Layout ``` ┌─────────────────────────────────────────────────────────────────┐ │ ← Back │ [Title truncated] [date · sender → receivers] [Edit][↓]│ ← top bar ├─────────────────────────────────────────────────────────────────┤ │ │ │ PDF / Image viewer │ │ (full width, full height) │ │ │ │ │ ├── drag handle ──────────────────────────────────────────────────┤ │ [Metadaten] [Transkription] [Diskussion] [Verlauf] [×] │ ← tab bar ├─────────────────────────────────────────────────────────────────┤ │ │ │ Active tab content │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Key behaviour - The document viewer is `position: fixed` / fills the full space beneath the top bar at all times. The bottom panel **floats over** it (`position: fixed` at the bottom). This is the same principle as the planned annotation drawer from #60 — the PDF canvas never resizes. - Clicking any tab opens the panel to its last-used height (default ~320 px). The × button collapses it back to just the tab bar. - The drag handle allows resizing between ~80 px (collapsed — only tab bar) and ~80 % of viewport height. - Panel state (open/closed, height, active tab) is persisted in `localStorage` so it survives navigation. - On documents **without a file** the panel opens to Metadaten by default (since the document area is otherwise empty). ### Top bar compact metadata row Replace the standalone `<h1>` with a two-line compact area: ``` [title, truncated with title tooltip] [date short · sender initials/name → receiver name(s), truncated after 2 with "+N"] ``` This keeps sender/receiver context visible without allocating a full sidebar column, and handles the "long title + many receivers" case gracefully via truncation. ### Tab contents | Tab | Content moved from sidebar | |---|---| | **Metadaten** | Details group (date, location, archive location, tags) + Persons group (sender card, receiver cards, conversation link) | | **Transkription** | Summary + Transcription — now in a comfortable full-width reading column (max ~70 ch) centred in the panel | | **Diskussion** | `CommentThread` + annotation comments (absorbs the planned floating drawer from #60) | | **Verlauf** | History collapsible with version list and diff viewer | The `AnnotationCommentPanel` that currently lives inside `PdfViewer` is removed; annotation-related discussion moves to the Diskussion tab. The `annotateMode` state is lifted to the page level so the Annotieren button can move to the top bar (supersedes #61). ## Supersedes / closes - Supersedes #60 (floating discussion drawer) — the bottom panel is that drawer, unified with all other content - Supersedes #61 (move annotation button to header) — included in this redesign ## User Journey 1. User opens a document. The PDF fills the entire screen. Only the top bar is visible (back, title, compact who/when, edit, download). 2. User wants context: they click **Metadaten** in the bottom tab bar. A panel slides up showing date, location, sender, and receivers. 3. User wants to read the transcription: they click **Transkription**. The panel expands or they drag the handle up. The text renders in a comfortable wide column — no more narrow sidebar. 4. User wants to discuss a passage: they click **Diskussion**. The comment thread is visible while the document remains in view above the panel. 5. User wants to annotate: they click the **Annotieren** button in the top bar (only shown for users with `ANNOTATE_ALL`). Annotation mode activates on the PDF. When they click an annotation, the Diskussion tab opens automatically and scrolls to the annotation thread. 6. User wants full focus on the document: they click × on the panel. The PDF fills the screen completely. ## E2E Scenarios ``` Scenario: Bottom panel is closed by default Given I open a document with a PDF Then the PDF viewer fills the full viewport And the panel content is not visible And the tab bar is visible at the bottom Scenario: Opening the Metadaten tab shows sender and date Given I open a document detail page When I click the Metadaten tab Then the panel slides open And I can see the document date And I can see the sender's name Scenario: Transkription tab renders the full text in a wide column Given I open a document that has a transcription When I click the Transkription tab Then the transcription text is visible in the panel Scenario: Diskussion tab shows the comment thread Given I open a document When I click the Diskussion tab Then the comment input and existing comments are visible Scenario: Closing the panel with × restores full-screen document view Given the panel is open When I click the × close button Then the panel collapses and only the tab bar remains visible Scenario: Panel height persists after reload Given I have opened the panel and dragged it to a custom height When I reload the page Then the panel opens at the same height ``` ## Implementation notes ### Component structure ``` +page.svelte ├─ DocumentTopBar.svelte (new — top bar with compact metadata) ├─ DocumentViewer.svelte (new — wraps PdfViewer / image / no-file states) └─ DocumentBottomPanel.svelte (new — floating panel with tabs + drag) ├─ PanelMetadata.svelte (Details + Persons sections) ├─ PanelTranscription.svelte ├─ PanelDiscussion.svelte (CommentThread) └─ PanelHistory.svelte (History versions + diff) ``` ### Drag-to-resize Use `pointermove` / `pointerup` on the drag handle (`touch-action: none`). Store height in a `$state` variable and sync to `localStorage`. Clamp between `MIN_HEIGHT` (48 px — tab bar only) and `MAX_HEIGHT` (80 vh). ### No PDF rerender The document viewer uses `position: absolute; inset: 0` within a relatively-positioned container that fills the remaining viewport below the top bar. The bottom panel is `position: fixed; bottom: 0; left: 0; right: 0`. Opening / resizing the panel never changes the document viewer's bounding box. ### Annotation integration - `annotateMode: boolean` and `activeAnnotationId: string | null` are lifted from `PdfViewer` to `+page.svelte` and passed down as `$bindable()` props. - Clicking an annotation rectangle sets `activeAnnotationId` and switches the panel to the Diskussion tab. - The top bar shows the Annotieren button only when `data.canAnnotate && doc.contentType?.startsWith('application/pdf')`.

marcel referenced this issue from a commit

2026-03-24 22:46:07 +01:00

feat(frontend): add floating bottom panel to document detail page

marcel closed this issue

2026-03-25 12:38:47 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#62