From bf010a23c37e835a0fcf50e5f5f41b3fd0e1108b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 17 Apr 2026 12:17:22 +0200
Subject: [PATCH] docs(tag-input): add clarifying comments for non-obvious
 design decisions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SvelteMap satisfies svelte/prefer-svelte-reactivity; $derived.by() handles reactivity
- ‹›› prefix only on depth=0 context ancestors; indentation serves deeper nodes
- fetchedForQuery set after suggestions causes harmless double $derived evaluation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/TagInput.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/lib/components/TagInput.svelte b/frontend/src/lib/components/TagInput.svelte
index 416953d6..0442869c 100644
--- a/frontend/src/lib/components/TagInput.svelte
+++ b/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}