refactor(document): extract DocumentMobileMenu from DocumentTopBar

Second step of the Phase 5 split. The kebab dropdown — including clickOutside handling and its own mobileMenuOpen state — becomes its own component named after its visual region. The mobile snippet duplication inside DocumentTopBar is removed; the component owns its mobile-specific markup. TDD: DocumentMobileMenu.svelte.test.ts (7 tests) was red first. The component then made it green (kebab trigger, dropdown open/close on click, transcribe button gated on canWrite × isPdf × !transcribeMode, download link gated on filePath). DocumentTopBar wraps the new component in a md:hidden div so responsive behaviour is unchanged. Existing 18-test DocumentTopBar suite still passes. Refs #496. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 20:43:57 +02:00
parent 71a44b084c
commit bb3fe10688
3 changed files with 255 additions and 124 deletions
--- a/frontend/src/lib/document/DocumentMobileMenu.svelte
+++ b/frontend/src/lib/document/DocumentMobileMenu.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/shared/actions/clickOutside';
+
+type Props = {
+	canWrite: boolean;
+	isPdf: boolean;
+	transcribeMode: boolean;
+	filePath?: string | null;
+	originalFilename?: string | null;
+	fileUrl: string;
+};
+
+let {
+	canWrite,
+	isPdf,
+	transcribeMode = $bindable(),
+	filePath = null,
+	originalFilename = null,
+	fileUrl
+}: Props = $props();
+
+let mobileMenuOpen = $state(false);
+
+function startTranscribe() {
+	transcribeMode = true;
+	mobileMenuOpen = false;
+}
+</script>
+
+<div role="group" class="relative" use:clickOutside onclickoutside={() => (mobileMenuOpen = false)}>
+	<button
+		type="button"
+		onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
+		aria-label={m.topbar_more_actions()}
+		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 canWrite && isPdf && !transcribeMode}
+				<button
+					onclick={startTranscribe}
+					aria-label={m.transcription_mode_label()}
+					aria-pressed={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"
+				>
+					<svg
+						class="h-5 w-5 shrink-0"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+						/>
+					</svg>
+					{m.transcription_mode_label()}
+				</button>
+			{/if}
+
+			{#if filePath}
+				<a
+					href={fileUrl}
+					download={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"
+					title={m.doc_download_title()}
+				>
+					<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>