refactor: move person domain components and utils to lib/person/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/person/PersonMultiSelect.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+import type { components } from '$lib/generated/api';
+import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
+type Person = components['schemas']['Person'];
+
+interface Props {
+	selectedPersons?: Person[];
+}
+
+let { selectedPersons = $bindable([]) }: Props = $props();
+
+let searchTerm = $state('');
+let results: Person[] = $state([]);
+let showDropdown = $state(false);
+let loading = $state(false);
+let debounceTimer: ReturnType<typeof setTimeout>;
+let inputEl: HTMLInputElement;
+let dropdownStyle = $state('');
+
+function updateDropdownPosition() {
+	if (!inputEl) return;
+	const rect = inputEl.getBoundingClientRect();
+	dropdownStyle = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px`;
+}
+
+function handleInput() {
+	showDropdown = true;
+	clearTimeout(debounceTimer);
+	debounceTimer = setTimeout(async () => {
+		if (searchTerm.length < 1) {
+			results = [];
+			return;
+		}
+		loading = true;
+		try {
+			const res = await fetch(`/api/persons?q=${encodeURIComponent(searchTerm)}`);
+			if (res.ok) {
+				const all: Person[] = await res.json();
+				results = all.filter((p) => !selectedPersons.some((s) => s.id === p.id));
+			}
+		} catch {
+			results = [];
+		} finally {
+			loading = false;
+		}
+	}, 300);
+}
+
+function selectPerson(person: Person) {
+	selectedPersons = [...selectedPersons, person];
+	searchTerm = '';
+	showDropdown = false;
+	results = [];
+}
+
+function removePerson(id: string | undefined) {
+	selectedPersons = selectedPersons.filter((p) => p.id !== id);
+}
+</script>
+
+<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
+
+{#each selectedPersons as person (person.id)}
+	<input type="hidden" name="receiverIds" value={person.id} />
+{/each}
+
+<div class="relative" use:clickOutside onclickoutside={() => (showDropdown = false)}>
+	<div
+		class="flex min-h-[38px] flex-wrap gap-2 rounded border border-line bg-surface p-2 shadow-sm focus-within:ring-2 focus-within:ring-focus-ring focus-within:outline-none"
+	>
+		{#each selectedPersons as person (person.id)}
+			<span
+				class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
+			>
+				{person.displayName}
+				<button
+					type="button"
+					onclick={() => removePerson(person.id)}
+					class="ml-0.5 text-ink/50 hover:text-red-500 focus:outline-none"
+					aria-label={m.comp_multiselect_remove()}
+				>
+					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</span>
+		{/each}
+
+		<input
+			bind:this={inputEl}
+			type="text"
+			autocomplete="off"
+			bind:value={searchTerm}
+			oninput={handleInput}
+			onfocus={() => { updateDropdownPosition(); showDropdown = true; }}
+			placeholder={selectedPersons.length === 0 ? m.comp_multiselect_placeholder() : ''}
+			class="min-w-[120px] flex-1 border-none bg-transparent p-1 text-sm outline-none focus:ring-0"
+		/>
+	</div>
+
+	{#if showDropdown && (results.length > 0 || loading)}
+		<div
+			style={dropdownStyle}
+			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
+		>
+			{#if loading}
+				<div class="p-2 text-sm text-ink-2">{m.comp_multiselect_loading()}</div>
+			{:else}
+				{#each results as person (person.id)}
+					<div
+						class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
+						onclick={() => selectPerson(person)}
+						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
+						role="button"
+						tabindex="0"
+					>
+						{person.displayName}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>