From 7bd995a04573efde2369bd238577b6864e11ce0d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 22:46:32 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20add=20AnnotateHintStrip=20=E2=80=94?=
 =?UTF-8?q?=2018px=20hint=20strip,=20hidden=20md:flex,=20annotateMode=20ga?=
 =?UTF-8?q?ted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/AnnotateHintStrip.svelte   | 18 +++++++++++++
 .../AnnotateHintStrip.svelte.spec.ts          | 27 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 frontend/src/lib/components/AnnotateHintStrip.svelte
 create mode 100644 frontend/src/lib/components/AnnotateHintStrip.svelte.spec.ts

diff --git a/frontend/src/lib/components/AnnotateHintStrip.svelte b/frontend/src/lib/components/AnnotateHintStrip.svelte
new file mode 100644
index 00000000..bf20337f
--- /dev/null
+++ b/frontend/src/lib/components/AnnotateHintStrip.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+type Props = {
+	annotateMode: boolean;
+};
+
+let { annotateMode }: Props = $props();
+</script>
+
+{#if annotateMode}
+	<div
+		data-testid="annotate-hint-strip"
+		class="hidden h-[18px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
+		style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
+	>
+		<span class="text-[10px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
+		<span class="text-[10px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/AnnotateHintStrip.svelte.spec.ts b/frontend/src/lib/components/AnnotateHintStrip.svelte.spec.ts
new file mode 100644
index 00000000..80f72c13
--- /dev/null
+++ b/frontend/src/lib/components/AnnotateHintStrip.svelte.spec.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AnnotateHintStrip from './AnnotateHintStrip.svelte';
+
+afterEach(cleanup);
+
+describe('AnnotateHintStrip', () => {
+	it('is absent from the DOM when annotateMode is false', async () => {
+		render(AnnotateHintStrip, { annotateMode: false });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).not.toBeInTheDocument();
+	});
+
+	it('is present in the DOM when annotateMode is true', async () => {
+		render(AnnotateHintStrip, { annotateMode: true });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).toBeInTheDocument();
+	});
+
+	it('has hidden md:flex class to hide below 768px', async () => {
+		render(AnnotateHintStrip, { annotateMode: true });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).toHaveClass('hidden');
+		await expect.element(strip).toHaveClass('md:flex');
+	});
+});