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

<script lang="ts">
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'];

// The dropdown receives a single reactive state object. PersonMentionEditor
// mutates fields on this object (model.items = ..., etc.) and Svelte's $state
// proxy reactivity propagates the change here. This is the supported way to
// update an imperatively-mounted Svelte 5 component — `mount` does not return
// settable prop accessors.
type DropdownState = {
	items: Person[];
	command: (item: Person) => void;
	clientRect: (() => DOMRect | null) | null;
};

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).
// A pure $derived is read-only and cannot serve both needs, so $state + $effect
// is the correct pattern here. The autofixer suggestion to use $derived does not
// apply: the mutation in onKeyDown is not a derivation.
let highlightedIndex = $state(0);

$effect(() => {
	// Read model.items to subscribe; reset index whenever the list is replaced.
	void model.items;
	highlightedIndex = 0;
});

// ---------------------------------------------------------------------------
// Positioning — flip strategy: open upward when there is not enough room
// below the cursor to show the dropdown without clipping the viewport.
// ---------------------------------------------------------------------------

type Position = {
	top: string | null;
	bottom: string | null;
	left: string;
};

const DROPDOWN_CLEARANCE_PX = 200;

const position = $derived.by<Position>(() => {
	const cr = model.clientRect;
	if (!cr) return { top: '0px', bottom: null, left: '0px' };
	const rect = cr();
	if (!rect) return { top: '0px', bottom: null, left: '0px' };

	// Some editors report a caret DOMRect with zero width; fall back to rect.x.
	const left = `${rect.width === 0 ? rect.x : rect.left}px`;

	if (window.innerHeight - rect.bottom < DROPDOWN_CLEARANCE_PX) {
		// Not enough space below — anchor bottom of dropdown to top of caret.
		return {
			top: null,
			bottom: `${window.innerHeight - rect.top}px`,
			left
		};
	}

	return { top: `${rect.bottom}px`, bottom: null, left };
});

// ---------------------------------------------------------------------------
// Keyboard handler — exported so Tiptap's render() can forward events.
// Returns true when the event is consumed (prevents the editor's default).
// ---------------------------------------------------------------------------

export function onKeyDown(event: KeyboardEvent): boolean {
	const len = model.items.length;
	if (event.key === 'ArrowDown') {
		highlightedIndex = (highlightedIndex + 1) % Math.max(len, 1);
		return true;
	}

	if (event.key === 'ArrowUp') {
		highlightedIndex = (highlightedIndex - 1 + Math.max(len, 1)) % Math.max(len, 1);
		return true;
	}

	if (event.key === 'Enter') {
		const selected = model.items[highlightedIndex];
		if (selected) {
			model.command(selected);
		}
		return true;
	}

	// Escape: let the suggestion plugin handle it (return false = not consumed).
	return false;
}

function selectItem(item: Person) {
	model.command(item);
}
</script>

<!--
	Mounted imperatively to document.body by the Tiptap suggestion plugin.
	Positioned absolutely relative to the viewport using inline styles derived
	from the Tiptap clientRect() callback.

	SECURITY: This component receives pre-filtered Person[] items from the
	parent — it does NOT fetch. The parent's fetch relies on the SvelteKit Vite
	proxy injecting the auth_token cookie as the Authorization header.
	Mounted in transcribe mode behind WRITE_ALL — never reachable to
	unauthenticated users.
-->
<div
	class="fixed z-50 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
	role="listbox"
	aria-label={m.person_mention_btn_label()}
	style:top={position.top}
	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"
				data-test-search-input
				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()}
		</p>
		<!--
			Empty-state escape hatch — without it the transcriber has to close
			the dropdown, navigate to /persons/new, come back, and re-type the
			query. target=_blank keeps the document and editor state intact;
			rel=noopener prevents reverse-tabnabbing on the new tab. Leonie #5621.
		-->
		<a
			href="/persons/new"
			target="_blank"
			rel="noopener"
			class="flex min-h-[44px] items-center gap-2 border-t border-line px-3 py-2.5 font-sans text-sm font-medium text-brand-navy hover:bg-canvas focus:bg-canvas focus:outline-none"
			onmousedown={(e) => e.preventDefault()}
		>
			{m.person_mention_create_new()}
			<span aria-hidden="true">→</span>
		</a>
	{:else}
		{#each model.items as person, i (person.id)}
			<div
				class={[
					'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
					// brand-mint ring (≈2.5:1 on white) fails WCAG 1.4.11 Non-Text
					// Contrast for a meaningful keyboard-highlight indicator. brand-navy
					// gives ~14.5:1 against the bg-brand-mint/20 row. Leonie #5621.
					i === highlightedIndex && 'bg-brand-mint/20 ring-2 ring-brand-navy ring-inset'
				]}
				role="option"
				aria-selected={i === highlightedIndex}
				data-test-person-id={person.id}
				tabindex="-1"
				onmousedown={(e) => {
					// Prevent blur on the editor before the selection fires.
					e.preventDefault();
					selectItem(person);
				}}
			>
				<span class="truncate font-serif text-base text-ink">{person.displayName}</span>
				{#if formatLifeDateRange(person.birthYear, person.deathYear)}
					<span class="truncate font-sans text-xs text-ink-3">
						{formatLifeDateRange(person.birthYear, person.deathYear)}
					</span>
				{/if}
			</div>
		{/each}
	{/if}
</div>