Replace ISAC attribute dropdowns with search

src/lib/components/SearchableAssignment.svelte

@@ -5,8 +5,9 @@
 		selected = $bindable<string[]>([]),
 		value = $bindable(''),
 		mode = 'multiple',
+		compact = false,
 		excludedIds = [],
-		fieldName,
+		fieldName = '',
 		emptyLabel = 'NO MATCHING RECORDS',
 		subjectLabel = 'TALENTS',
 		searchLabel = `FILTER AVAILABLE ${subjectLabel}`,
@@ -17,8 +18,9 @@
 		selected?: string[];
 		value?: string;
 		mode?: 'multiple' | 'single';
+		compact?: boolean;
 		excludedIds?: string[];
-		fieldName: string;
+		fieldName?: string;
 		emptyLabel?: string;
 		subjectLabel?: string;
 		searchLabel?: string;
@@ -26,6 +28,7 @@
 		emptySelectionLabel?: string;
 	} = $props();
 	let query = $state('');
+	let open = $state(false);
 	const selectedIds = $derived(mode === 'single' ? (value ? [value] : []) : selected);
 	const normalizedQuery = $derived(query.normalize('NFKC').trim().toLocaleLowerCase());
 	const available = $derived(items.filter((item) =>
@@ -35,13 +38,21 @@
 	const visible = $derived(available.slice(0, 30));
 	const selectedItems = $derived(selectedIds.map((id) => items.find((item) => item.id === id)).filter((item): item is Item => Boolean(item)));
 	const toggle = (id: string) => {
-		if (mode === 'single') value = value === id ? '' : id;
+		if (mode === 'single') {
+			value = value === id ? '' : id;
+			if (compact) {
+				open = false;
+				query = '';
+			}
+		}
 		else selected = selected.includes(id) ? selected.filter((value) => value !== id) : [...selected, id];
 	};
 </script>
 
-<div class="assignment-picker">
-	{#each selectedIds as id}<input type="hidden" name={fieldName} value={id}/>{/each}
+<div class="assignment-picker" class:compact class:open onfocusin={() => { if (compact) open = true; }} onfocusout={(event) => {
+	if (compact && !event.currentTarget.contains(event.relatedTarget as Node | null)) open = false;
+}}>
+	{#if fieldName}{#each selectedIds as id}<input type="hidden" name={fieldName} value={id}/>{/each}{/if}
 	<div class="assignment-selected">
 		<div class="assignment-summary"><span>{mode === 'single' ? 'SELECTED' : 'ASSIGNED'}</span><b>{selectedIds.length}</b></div>
 		<div class="assignment-chips">