frontend/src/lib/components/TagInput.svelte

@@ -23,6 +23,7 @@ let activeIndex = $state(-1);
 let showSuggestions = $state(false);
 
 const orderedSuggestions = $derived.by((): SuggestionEntry[] => {
+	// SvelteMap satisfies svelte/prefer-svelte-reactivity; reactivity comes from $derived.by() re-evaluation
 	const byId = new SvelteMap(suggestions.filter((s) => s.id).map((s) => [s.id!, s]));
 	const childrenOf = new SvelteMap<string, Tag[]>();
 	const roots: Tag[] = [];
@@ -66,6 +67,7 @@ async function fetchSuggestions(query: string) {
 			const currentTags = untrack(() => tags);
 			const currentNames = new Set(currentTags.map((t) => t.name));
 			suggestions = data.filter((t) => !currentNames.has(t.name));
+			// fetchedForQuery set after suggestions: $derived fires twice but second run is correct
 			fetchedForQuery = query.toLowerCase();
 			showSuggestions = true;
 		}
@@ -192,6 +194,7 @@ function handleKeydown(e: KeyboardEvent) {
 							onclick={() => addTag(s.tag)}
 							onkeydown={(e) => e.key === 'Enter' && addTag(s.tag)}
 						>
+							<!-- › only on root context ancestors; depth>0 nodes rely on indentation instead -->
 							{#if !s.isDirectMatch && s.depth === 0}
 								<span class="mr-1" aria-hidden="true">›</span>
 							{/if}