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

@@ -20,17 +20,25 @@ type DropdownState = {
 
 let {
 	model,
-	initialQuery = '',
+	editorQuery = '',
 	onSearch = () => {}
 }: {
 	model: DropdownState;
-	initialQuery?: string;
+	/** Text typed after `@` in the host editor. Mirrors into the search input
+	 *  until the user takes manual ownership by typing into the input itself. */
+	editorQuery?: string;
 	onSearch?: (query: string) => void;
 } = $props();
 
-// initialQuery is a one-shot prop — PersonMentionEditor mounts a fresh dropdown
+let searchQuery = $state(untrack(() => editorQuery));
-// with the typed text on each Tiptap onStart, so we deliberately snapshot here.
+let userHasEdited = $state(false);
-let searchQuery = $state(untrack(() => initialQuery));
+
+// Mirror the editor's typed text until the user takes ownership.
+$effect(() => {
+	if (!userHasEdited) {
+		searchQuery = editorQuery;
+	}
+});
 
 // 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).
@@ -153,15 +161,24 @@ function selectItem(item: Person) {
 				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)}
+				oninput={(e) => {
+					userHasEdited = true;
+					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">
+		{#if searchQuery.trim() === ''}
-			{m.person_mention_popup_empty()}
+			<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
-		</p>
+				{m.person_mention_search_prompt()}
+			</p>
+		{:else}
+			<p class="px-3 py-2.5 font-sans text-sm text-ink-3">
+				{m.person_mention_popup_empty()}
+			</p>
+		{/if}
 		<!--
 			Empty-state escape hatch — without it the transcriber has to close
 			the dropdown, navigate to /persons/new, come back, and re-type the

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

@@ -12,6 +12,7 @@ import { cleanup, render } from 'vitest-browser-svelte';
 import { page, userEvent } from 'vitest/browser';
 import MentionDropdown from './MentionDropdown.svelte';
 import type { components } from '$lib/generated/api';
+import { m } from '$lib/paraglide/messages.js';
 
 type Person = components['schemas']['Person'];
 
@@ -32,10 +33,10 @@ function makeModel(items: Person[] = []): DropdownState {
 afterEach(() => cleanup());
 
 describe('MentionDropdown — search input', () => {
-	it('renders a search input pre-filled with the initialQuery prop', async () => {
+	it('renders a search input pre-filled with the editorQuery prop', async () => {
 		render(MentionDropdown, {
 			model: makeModel(),
-			initialQuery: 'WdG',
+			editorQuery: 'WdG',
 			onSearch: () => {}
 		});
 
@@ -45,7 +46,7 @@ describe('MentionDropdown — search input', () => {
 	it('exposes a data-test-search-input attribute for E2E selectors', async () => {
 		render(MentionDropdown, {
 			model: makeModel(),
-			initialQuery: '',
+			editorQuery: '',
 			onSearch: () => {}
 		});
 
@@ -54,11 +55,33 @@ describe('MentionDropdown — search input', () => {
 		expect((input as HTMLInputElement).type).toBe('search');
 	});
 
+	it('shows "enter a name" prompt when search is empty (not "no results")', async () => {
+		render(MentionDropdown, {
+			model: makeModel([]),
+			editorQuery: '',
+			onSearch: () => {}
+		});
+
+		await expect.element(page.getByText(m.person_mention_search_prompt())).toBeVisible();
+		await expect.element(page.getByText(m.person_mention_popup_empty())).not.toBeInTheDocument();
+	});
+
+	it('shows "no results" when search has a query but the list is empty', async () => {
+		render(MentionDropdown, {
+			model: makeModel([]),
+			editorQuery: 'WdG',
+			onSearch: () => {}
+		});
+
+		await expect.element(page.getByText(m.person_mention_popup_empty())).toBeVisible();
+		await expect.element(page.getByText(m.person_mention_search_prompt())).not.toBeInTheDocument();
+	});
+
 	it('invokes onSearch with the current value whenever the user types', async () => {
 		const onSearch = vi.fn();
 		render(MentionDropdown, {
 			model: makeModel(),
-			initialQuery: '',
+			editorQuery: '',
 			onSearch
 		});
 

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

@@ -42,10 +42,12 @@ let dropdownState = $state<{
 	items: Person[];
 	command: (item: Person) => void;
 	clientRect: (() => DOMRect | null) | null;
+	editorQuery: string;
 }>({
 	items: [],
 	command: () => {},
-	clientRect: null
+	clientRect: null,
+	editorQuery: ''
 });
 
 type DropdownExports = {
@@ -187,14 +189,27 @@ onMount(() => {
 									displayName: renderProps.query
 								});
 							dropdownState.clientRect = renderProps.clientRect ?? null;
+							dropdownState.editorQuery = renderProps.query;
 						};
 
 						return {
 							onStart(renderProps) {
-								updateState(renderProps as unknown as LooseRenderProps);
+								const loose = renderProps as unknown as LooseRenderProps;
+								updateState(loose);
+								// MentionDropdown reads `editorQuery` off the shared state
+								// proxy via its `editorQuery` prop binding below — this is
+								// the same pattern as `model.items`. We do not pass it as a
+								// separate prop because Svelte 5's mount() does not expose
+								// settable prop accessors, so we route through the proxy.
 								const mounted = mount(MentionDropdown, {
 									target: document.body,
-									props: { model: dropdownState }
+									props: {
+										model: dropdownState,
+										get editorQuery() {
+											return dropdownState.editorQuery;
+										},
+										onSearch: () => {}
+									}
 								});
 								component = mounted as object;
 								exports = mounted as unknown as DropdownExports;

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

@@ -161,6 +161,21 @@ describe('PersonMentionEditor — typeahead', () => {
 	});
 });
 
+// ─── AC-1: search input prefilled with text typed after @ ───────────────────
+
+describe('PersonMentionEditor — AC-1: search input prefill', () => {
+	it('prefills the dropdown search input with the text typed after @', async () => {
+		mockFetchEmpty();
+		renderHost();
+
+		await userEvent.type(page.getByRole('textbox'), '@WdG');
+
+		await vi.waitFor(async () => {
+			await expect.element(page.getByRole('searchbox')).toHaveValue('WdG');
+		});
+	});
+});
+
 // ─── AC-1: typed text becomes displayName, not DB name ───────────────────────
 
 describe('PersonMentionEditor — AC-1: typed text as displayName', () => {