As a user I want a unified comment drawer on the document detail page so discussion and annotation comments are in one place and the PDF always stays fully visible #60

New Issue

marcel · 2026-03-24T17:54:22+01:00

marcel commented

2026-03-24 17:54:22 +01:00

Context

The document detail page currently has two separate comment surfaces:

Document-level comments — CommentThread in the left metadata sidebar, section 5 "Diskussion". Gets crowded with longer threads and competes with metadata for sidebar space.
Annotation-level comments — AnnotationCommentPanel, an absolute right-0 overlay inside PdfViewer. Opens when a user clicks an annotation.

These two surfaces are disconnected and the sidebar becomes hard to use as discussion grows.

User Journey

A user opens a document. At the bottom of the screen they see a slim collapsed drawer showing two tabs: Diskussion (with a comment count badge) and no annotation tab yet. They click the drawer title bar to expand it to its default height. The Diskussion tab shows the full document thread — they read and reply.

They then click an annotation on the PDF. The drawer switches to a new Annotation · Seite N tab showing that annotation's comments. A back-click on the Diskussion tab returns to the document thread; the annotation tab disappears when the annotation is deselected.

The user drags the top edge of the drawer upward to make it taller when reading a long thread, and back down when they want more PDF visible. The PDF never rerenders during any of this.

Design Decisions

Floating overlay (not a layout-affecting panel)

The drawer is fixed / absolute, positioned at bottom: 0, starting at left: 384px (right edge of the metadata sidebar) and stretching to right: 0. It floats over the PDF. The flex layout of the page — sidebar + main — never changes, so the PDF canvas is never resized or rerendered.

Two tabs

Tab	When visible	Content
Diskussion	Always	Document-level `CommentThread`
Annotation · Seite N	Only when an annotation is active	Annotation-level `CommentThread`

Clicking the Diskussion tab deselects the active annotation and returns to the document thread. The annotation tab disappears when no annotation is selected. Only one annotation tab exists at a time (the most recently clicked).

Collapsed state

Default: collapsed to a ~40px title bar showing the tab labels and a comment count badge on Diskussion. Clicking anywhere on the title bar expands to the default height.

Drag-to-resize

A drag handle on the top edge of the drawer. Dragging up increases height, down decreases. Constraints: min ~180px (enough to see ~2 comments), max ~55vh (leaves the PDF usable). Height is not persisted between page loads.

`AnnotationCommentPanel` removed

AnnotationCommentPanel is replaced entirely by the annotation tab in the drawer. Annotation clicks in PdfViewer set activeAnnotationId as before, but instead of mounting AnnotationCommentPanel, they open the drawer (if collapsed) and activate the annotation tab. The drawer owns the annotation CommentThread.

Sidebar cleanup

Section 5 "Diskussion" and its CommentThread are removed from the sidebar. The sidebar becomes pure document metadata. The footer (document ID / filename) stays.

Keyboard

Escape collapses the drawer if it is expanded (or clears the annotation tab and switches to Diskussion if the annotation tab is active).

E2E Scenarios

Scenario: Document comments appear in the drawer
  Given I am on a document detail page with at least one comment
  When the page loads
  Then a collapsed drawer is visible at the bottom of the PDF area
  And it shows a "Diskussion" tab with a comment count badge
  And the sidebar no longer contains a "Diskussion" section

Scenario: User expands the drawer and reads comments
  Given the drawer is collapsed
  When I click the drawer title bar
  Then the drawer expands to its default height
  And I can see the comment thread

Scenario: User drags the drawer to resize it
  Given the drawer is expanded
  When I drag the top edge of the drawer upward
  Then the drawer height increases
  And the PDF canvas does not change size

Scenario: Clicking an annotation opens the annotation tab
  Given the drawer is visible
  When I click an annotation on the PDF
  Then the drawer expands (if collapsed)
  And an "Annotation" tab becomes active
  And the annotation's comments are shown

Scenario: Returning to document discussion from annotation
  Given the annotation tab is active
  When I click the "Diskussion" tab
  Then the document-level comment thread is shown
  And the annotation is deselected on the PDF

Scenario: Escape collapses the drawer
  Given the drawer is expanded
  When I press Escape
  Then the drawer collapses to its title bar

Implementation Notes

PdfViewer passes onAnnotationClick up or keeps activeAnnotationId internally; either way the drawer needs to know the active annotation ID and the page number for the tab label. Consider lifting activeAnnotationId to the page level so both the drawer and PdfViewer can share it.
The drag resize uses pointerdown/pointermove/pointerup (covers mouse + touch) on the handle element. Store height in a $state variable; apply via style="height: {drawerHeight}px".
Comment count for the badge: the page already loads data.comments server-side — use .length for the initial badge, then keep it in sync via onCountChange.
The drawer component is a new DiscussionDrawer.svelte in src/lib/components/. It accepts documentId, activeAnnotationId, activeAnnotationPage, canComment, currentUserId, canAdmin, initialComments.

## Context The document detail page currently has two separate comment surfaces: 1. **Document-level comments** — `CommentThread` in the left metadata sidebar, section 5 "Diskussion". Gets crowded with longer threads and competes with metadata for sidebar space. 2. **Annotation-level comments** — `AnnotationCommentPanel`, an `absolute right-0` overlay inside `PdfViewer`. Opens when a user clicks an annotation. These two surfaces are disconnected and the sidebar becomes hard to use as discussion grows. ## User Journey A user opens a document. At the bottom of the screen they see a slim collapsed drawer showing two tabs: **Diskussion** (with a comment count badge) and no annotation tab yet. They click the drawer title bar to expand it to its default height. The **Diskussion** tab shows the full document thread — they read and reply. They then click an annotation on the PDF. The drawer switches to a new **Annotation · Seite N** tab showing that annotation's comments. A back-click on the **Diskussion** tab returns to the document thread; the annotation tab disappears when the annotation is deselected. The user drags the top edge of the drawer upward to make it taller when reading a long thread, and back down when they want more PDF visible. The PDF never rerenders during any of this. ## Design Decisions ### Floating overlay (not a layout-affecting panel) The drawer is `fixed` / `absolute`, positioned at `bottom: 0`, starting at `left: 384px` (right edge of the metadata sidebar) and stretching to `right: 0`. It floats over the PDF. The flex layout of the page — sidebar + main — never changes, so the PDF canvas is never resized or rerendered. ### Two tabs | Tab | When visible | Content | |---|---|---| | **Diskussion** | Always | Document-level `CommentThread` | | **Annotation · Seite N** | Only when an annotation is active | Annotation-level `CommentThread` | Clicking the **Diskussion** tab deselects the active annotation and returns to the document thread. The annotation tab disappears when no annotation is selected. Only one annotation tab exists at a time (the most recently clicked). ### Collapsed state Default: collapsed to a ~40px title bar showing the tab labels and a comment count badge on **Diskussion**. Clicking anywhere on the title bar expands to the default height. ### Drag-to-resize A drag handle on the top edge of the drawer. Dragging up increases height, down decreases. Constraints: min ~180px (enough to see ~2 comments), max ~55vh (leaves the PDF usable). Height is not persisted between page loads. ### `AnnotationCommentPanel` removed `AnnotationCommentPanel` is replaced entirely by the annotation tab in the drawer. Annotation clicks in `PdfViewer` set `activeAnnotationId` as before, but instead of mounting `AnnotationCommentPanel`, they open the drawer (if collapsed) and activate the annotation tab. The drawer owns the annotation `CommentThread`. ### Sidebar cleanup Section 5 "Diskussion" and its `CommentThread` are removed from the sidebar. The sidebar becomes pure document metadata. The footer (document ID / filename) stays. ### Keyboard `Escape` collapses the drawer if it is expanded (or clears the annotation tab and switches to Diskussion if the annotation tab is active). ## E2E Scenarios ``` Scenario: Document comments appear in the drawer Given I am on a document detail page with at least one comment When the page loads Then a collapsed drawer is visible at the bottom of the PDF area And it shows a "Diskussion" tab with a comment count badge And the sidebar no longer contains a "Diskussion" section Scenario: User expands the drawer and reads comments Given the drawer is collapsed When I click the drawer title bar Then the drawer expands to its default height And I can see the comment thread Scenario: User drags the drawer to resize it Given the drawer is expanded When I drag the top edge of the drawer upward Then the drawer height increases And the PDF canvas does not change size Scenario: Clicking an annotation opens the annotation tab Given the drawer is visible When I click an annotation on the PDF Then the drawer expands (if collapsed) And an "Annotation" tab becomes active And the annotation's comments are shown Scenario: Returning to document discussion from annotation Given the annotation tab is active When I click the "Diskussion" tab Then the document-level comment thread is shown And the annotation is deselected on the PDF Scenario: Escape collapses the drawer Given the drawer is expanded When I press Escape Then the drawer collapses to its title bar ``` ## Implementation Notes - `PdfViewer` passes `onAnnotationClick` up or keeps `activeAnnotationId` internally; either way the drawer needs to know the active annotation ID and the page number for the tab label. Consider lifting `activeAnnotationId` to the page level so both the drawer and PdfViewer can share it. - The drag resize uses `pointerdown`/`pointermove`/`pointerup` (covers mouse + touch) on the handle element. Store height in a `$state` variable; apply via `style="height: {drawerHeight}px"`. - Comment count for the badge: the page already loads `data.comments` server-side — use `.length` for the initial badge, then keep it in sync via `onCountChange`. - The drawer component is a new `DiscussionDrawer.svelte` in `src/lib/components/`. It accepts `documentId`, `activeAnnotationId`, `activeAnnotationPage`, `canComment`, `currentUserId`, `canAdmin`, `initialComments`.

marcel referenced this issue

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

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

marcel referenced this issue from a commit

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

feat(frontend): add discussion sub-tab navigation for annotation threads

marcel referenced this issue

2026-03-24 22:48:03 +01:00

feat: discussion sub-tab navigation for annotation threads (#60) #63

marcel closed this issue

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

Sign in to join this conversation.