feat(transcription): add search input with initialQuery prefill to MentionDropdown

For issue #380. The dropdown now renders a dedicated search input at the
top, pre-filled with the text typed after @. This decouples the lookup
from the display text — the transcriber can edit the search field to
find a person whose stored name differs from what was typed.

The fetch wiring (onSearch callback) is consumed by PersonMentionEditor
in a follow-up commit; this commit only introduces the input UI and the
prop surface.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/lib/shared/discussion/MentionDropdown.svelte

@@ -2,6 +2,7 @@
 import type { components } from '$lib/generated/api';
 // eslint-disable-next-line boundaries/dependencies -- mention dropdown needs person date formatting; extract to shared if it becomes reusable
 import { formatLifeDateRange } from '$lib/person/personLifeDates';
+import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 type Person = components['schemas']['Person'];
@@ -17,7 +18,19 @@ type DropdownState = {
 	clientRect: (() => DOMRect | null) | null;
 };
 
-let { model }: { model: DropdownState } = $props();
+let {
+	model,
+	initialQuery = '',
+	onSearch = () => {}
+}: {
+	model: DropdownState;
+	initialQuery?: string;
+	onSearch?: (query: string) => void;
+} = $props();
+
+// initialQuery is a one-shot prop — PersonMentionEditor mounts a fresh dropdown
+// with the typed text on each Tiptap onStart, so we deliberately snapshot here.
+let searchQuery = $state(untrack(() => initialQuery));
 
 // highlightedIndex must be both writable (keyboard handler mutates it) and
 // reset when `items` changes (so it never points past the end of a new list).
@@ -119,6 +132,31 @@ function selectItem(item: Person) {
 	style:bottom={position.bottom}
 	style:left={position.left}
 >
+	<div class="border-b border-line px-3 py-2">
+		<label class="sr-only" for="mention-search">{m.person_mention_btn_label()}</label>
+		<div class="flex items-center gap-2">
+			<svg
+				aria-hidden="true"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				class="h-4 w-4 shrink-0 text-ink-3"
+			>
+				<circle cx="11" cy="11" r="7" />
+				<path d="m20 20-3.5-3.5" stroke-linecap="round" />
+			</svg>
+			<input
+				id="mention-search"
+				type="search"
+				class="min-h-[44px] w-full bg-transparent font-sans text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset"
+				placeholder={m.person_mention_search_prompt()}
+				bind:value={searchQuery}
+				oninput={(e) => onSearch(e.currentTarget.value)}
+				onmousedown={(e) => e.stopPropagation()}
+			/>
+		</div>
+	</div>
 	{#if model.items.length === 0}
 		<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
 			{m.person_mention_popup_empty()}

frontend/src/lib/shared/discussion/MentionDropdown.svelte.spec.ts

@@ -0,0 +1,44 @@
+/**
+ * MentionDropdown — direct component tests.
+ *
+ * These tests render the dropdown in isolation, passing the `model` proxy
+ * (matching what PersonMentionEditor would pass). They cover the dropdown's
+ * own surface: the search input, the empty-query prompt, and the existing
+ * "no results" / "create new" behaviors. Wiring tests against Tiptap live
+ * in PersonMentionEditor.svelte.spec.ts.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import MentionDropdown from './MentionDropdown.svelte';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+
+type DropdownState = {
+	items: Person[];
+	command: (item: Person) => void;
+	clientRect: (() => DOMRect | null) | null;
+};
+
+function makeModel(items: Person[] = []): DropdownState {
+	return {
+		items,
+		command: () => {},
+		clientRect: () => new DOMRect(0, 0, 0, 0)
+	};
+}
+
+afterEach(() => cleanup());
+
+describe('MentionDropdown — search input', () => {
+	it('renders a search input pre-filled with the initialQuery prop', async () => {
+		render(MentionDropdown, {
+			model: makeModel(),
+			initialQuery: 'WdG',
+			onSearch: () => {}
+		});
+
+		await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
+	});
+});