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()}