From 51348ad26ad360d3d1f6a334446275a7944f01cb Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 1 Apr 2026 10:11:50 +0200
Subject: [PATCH] feat(topbar): add mobile kebab menu for annotate/download
 actions hidden below md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/DocumentTopBar.svelte  | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index faeb6273..1cdf5948 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/personFormat';
+import { clickOutside } from '$lib/actions/clickOutside';
 import PersonChipRow from './PersonChipRow.svelte';
 import DocumentStatusChip from './DocumentStatusChip.svelte';
 import AnnotateHintStrip from './AnnotateHintStrip.svelte';
@@ -38,6 +39,8 @@ const overflowPersons = $derived(receivers.slice(2));
 
 const shortDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'short') : null);
 const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long') : null);
+
+let mobileMenuOpen = $state(false);
 </script>
 
 <div data-topbar class="border-b border-line bg-surface shadow-sm">
@@ -163,6 +166,95 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
 					/>
 				</a>
 			{/if}
+
+			<!-- Kebab menu — mobile only, contains actions hidden below md -->
+			{#if (canAnnotate && isPdf) || doc.filePath}
+				<div
+					role="group"
+					class="relative md:hidden"
+					use:clickOutside
+					onclickoutside={() => (mobileMenuOpen = false)}
+				>
+					<button
+						type="button"
+						onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
+						aria-label="Weitere Aktionen"
+						aria-haspopup="true"
+						aria-expanded={mobileMenuOpen}
+						class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary"
+					>
+						<img
+							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/View-More-MD.svg"
+							alt=""
+							aria-hidden="true"
+							class="h-5 w-5"
+						/>
+					</button>
+
+					{#if mobileMenuOpen}
+						<div
+							role="menu"
+							class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
+						>
+							{#if canAnnotate && isPdf && !annotateMode}
+								<button
+									role="menuitem"
+									onclick={() => {
+										annotateMode = true;
+										mobileMenuOpen = false;
+									}}
+									class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
+								>
+									<img
+										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+										alt=""
+										aria-hidden="true"
+										class="h-5 w-5 shrink-0"
+									/>
+									{m.doc_panel_annotate()}
+								</button>
+							{/if}
+
+							{#if canAnnotate && isPdf && annotateMode}
+								<button
+									role="menuitem"
+									onclick={() => {
+										annotateMode = false;
+										mobileMenuOpen = false;
+									}}
+									class="flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary"
+								>
+									<img
+										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+										alt=""
+										aria-hidden="true"
+										class="h-5 w-5 shrink-0 invert"
+									/>
+									{m.doc_panel_annotate_stop()}
+								</button>
+							{/if}
+
+							{#if doc.filePath}
+								<a
+									role="menuitem"
+									href={fileUrl}
+									download={doc.originalFilename}
+									onclick={() => (mobileMenuOpen = false)}
+									class="flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
+								>
+									<img
+										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
+										alt=""
+										aria-hidden="true"
+										class="h-5 w-5 shrink-0"
+									/>
+									{m.doc_download_title()}
+								</a>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
 		</div>
 	</div>