From a392e85f4308a56945ef43fbe1833ae389853ecd Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 24 Mar 2026 23:03:37 +0100
Subject: [PATCH] fix(frontend): move annotation toggle into PDF toolbar and
 add text label

Button was rendered outside the controls bar (below the toolbar). Moved it
inside so it stays in the same row as zoom and page controls. Added a text
label next to the eye icon so the action is self-descriptive.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/PdfViewer.svelte | 69 +++++++++-----------
 1 file changed, 30 insertions(+), 39 deletions(-)

diff --git a/frontend/src/lib/components/PdfViewer.svelte b/frontend/src/lib/components/PdfViewer.svelte
index 6c3deb33..323c3cc6 100644
--- a/frontend/src/lib/components/PdfViewer.svelte
+++ b/frontend/src/lib/components/PdfViewer.svelte
@@ -403,54 +403,45 @@ function zoomOut() {
 					title="Farbe wählen"
 				/>
 			{/if}
-		</div>
-
-		<!-- Annotation visibility toggle (shown when annotations exist) -->
-		{#if annotations.length > 0}
-			<button
-				onclick={() => (showAnnotations = !showAnnotations)}
-				aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
-				title={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
-				class="rounded p-1 transition {showAnnotations
+			<!-- Annotation visibility toggle (shown when annotations exist) -->
+			{#if annotations.length > 0}
+				<button
+					onclick={() => (showAnnotations = !showAnnotations)}
+					aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+					class="flex items-center gap-1.5 rounded px-2 py-1 font-sans text-xs transition {showAnnotations
 						? 'text-gray-300 hover:bg-white/10'
 						: 'bg-white/10 text-brand-mint'}"
-			>
-				{#if showAnnotations}
+				>
 					<svg
-						class="h-4 w-4"
+						class="h-3.5 w-3.5 shrink-0"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
 						stroke-width="2"
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-						/>
+						{#if showAnnotations}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						{:else}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						{/if}
 					</svg>
-				{:else}
-					<svg
-						class="h-4 w-4"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-						/>
-					</svg>
-				{/if}
-			</button>
-		{/if}
+					{showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+				</button>
+			{/if}
+		</div>
 
 		<!-- PDF canvas area -->
 		<div class="relative flex-1 overflow-auto">