As a user I want the annotation toggle in the document header so I can easily find and activate annotation mode #61

New Issue

marcel · 2026-03-24T18:01:56+01:00

marcel commented

2026-03-24 18:01:56 +01:00

Context

The "Annotieren" toggle button currently lives inside PdfViewer's dark controls toolbar, alongside page navigation and zoom buttons. It is text-only, small, and easy to miss. Users with ANNOTATE_ALL permission may not discover the feature at all.

User Journey

A user with annotation permission opens a document that has a PDF. In the page header — next to the "Bearbeiten" button — they see an icon button for annotation mode. Clicking it activates annotation mode; the button visually changes to indicate it is active. Clicking it again deactivates. The color picker remains in the PDF toolbar (close to where drawing happens). The button is absent for non-PDF documents and for users without ANNOTATE_ALL.

Design Decisions

What moves to the header

The toggle button only moves to the header. Icon: Note-Add-MD.svg from the existing degruyter icon library.

Inactive: outlined icon button, same style as the download button (border-transparent bg-brand-sand/50 p-2 hover:bg-brand-mint)
Active: filled/highlighted style to show mode is on (e.g. bg-brand-mint text-brand-navy)
title / aria-label: "Annotieren" / "Annotieren beenden"

The color picker stays in the toolbar — it is contextually close to the canvas where drawing happens and does not need to be globally reachable.

The disabled "Annotieren" placeholder button (shown to users without permission) is removed entirely — it provides no value to users who cannot act on it.

Conditional display

Show only when all three are true:

data.canAnnotate
doc.filePath is set
doc.contentType starts with application/pdf

State lifting

annotateMode is currently $state inside PdfViewer. It needs to be lifted to +page.svelte and passed into PdfViewer as a prop so both the header button and the viewer share the same value. Use Svelte 5 $bindable() on the prop.

Implementation Plan

PdfViewer.svelte
- Add annotateMode as a $bindable() prop (default false)
- Remove the "Annotieren"/"Fertig" toggle button from the controls bar
- Remove the disabled placeholder button for users without permission
- Keep the color picker ({#if annotateMode} <input type="color"> {/if}) in the toolbar
+page.svelte
- Add let annotateMode = $state(false)
- Pass bind:annotateMode to <PdfViewer>
- Add the icon button to the header, left of "Bearbeiten", conditionally rendered

E2E Scenarios

Scenario: Annotation button visible in header for permitted user on PDF
  Given I am logged in as a user with ANNOTATE_ALL
  And I open a document with a PDF file
  Then I see an annotation icon button in the page header
  And the button is left of the Bearbeiten button

Scenario: Annotation button activates annotation mode
  Given I am on a document detail page with a PDF
  When I click the annotation icon button in the header
  Then annotation mode is active on the PDF canvas
  And the header button shows an active/highlighted state

Scenario: Annotation button not visible for non-PDF documents
  Given I am logged in as a user with ANNOTATE_ALL
  And I open a document without a PDF file
  Then no annotation button is shown in the header

Scenario: Annotation button not visible for users without permission
  Given I am logged in as a user without ANNOTATE_ALL
  And I open a document with a PDF file
  Then no annotation button is shown in the header

## Context The "Annotieren" toggle button currently lives inside `PdfViewer`'s dark controls toolbar, alongside page navigation and zoom buttons. It is text-only, small, and easy to miss. Users with `ANNOTATE_ALL` permission may not discover the feature at all. ## User Journey A user with annotation permission opens a document that has a PDF. In the page header — next to the "Bearbeiten" button — they see an icon button for annotation mode. Clicking it activates annotation mode; the button visually changes to indicate it is active. Clicking it again deactivates. The color picker remains in the PDF toolbar (close to where drawing happens). The button is absent for non-PDF documents and for users without `ANNOTATE_ALL`. ## Design Decisions ### What moves to the header The **toggle button only** moves to the header. Icon: `Note-Add-MD.svg` from the existing degruyter icon library. - Inactive: outlined icon button, same style as the download button (`border-transparent bg-brand-sand/50 p-2 hover:bg-brand-mint`) - Active: filled/highlighted style to show mode is on (e.g. `bg-brand-mint text-brand-navy`) - `title` / `aria-label`: "Annotieren" / "Annotieren beenden" ### What stays in the PdfViewer toolbar The **color picker** stays in the toolbar — it is contextually close to the canvas where drawing happens and does not need to be globally reachable. The disabled "Annotieren" placeholder button (shown to users without permission) is **removed entirely** — it provides no value to users who cannot act on it. ### Conditional display Show only when all three are true: - `data.canAnnotate` - `doc.filePath` is set - `doc.contentType` starts with `application/pdf` ### State lifting `annotateMode` is currently `$state` inside `PdfViewer`. It needs to be lifted to `+page.svelte` and passed into `PdfViewer` as a prop so both the header button and the viewer share the same value. Use Svelte 5 `$bindable()` on the prop. ## Implementation Plan 1. **`PdfViewer.svelte`** - Add `annotateMode` as a `$bindable()` prop (default `false`) - Remove the "Annotieren"/"Fertig" toggle button from the controls bar - Remove the disabled placeholder button for users without permission - Keep the color picker (`{#if annotateMode} <input type="color"> {/if}`) in the toolbar 2. **`+page.svelte`** - Add `let annotateMode = $state(false)` - Pass `bind:annotateMode` to `<PdfViewer>` - Add the icon button to the header, left of "Bearbeiten", conditionally rendered ## E2E Scenarios ``` Scenario: Annotation button visible in header for permitted user on PDF Given I am logged in as a user with ANNOTATE_ALL And I open a document with a PDF file Then I see an annotation icon button in the page header And the button is left of the Bearbeiten button Scenario: Annotation button activates annotation mode Given I am on a document detail page with a PDF When I click the annotation icon button in the header Then annotation mode is active on the PDF canvas And the header button shows an active/highlighted state Scenario: Annotation button not visible for non-PDF documents Given I am logged in as a user with ANNOTATE_ALL And I open a document without a PDF file Then no annotation button is shown in the header Scenario: Annotation button not visible for users without permission Given I am logged in as a user without ANNOTATE_ALL And I open a document with a PDF file Then no annotation button is shown in the header ```

marcel referenced this issue from a commit

2026-03-24 18:19:07 +01:00

test(e2e): update reader annotation test to match post-#61 behaviour

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 closed this issue

2026-03-25 14:14:19 +01:00

Sign in to join this conversation.