From 9485d9841c3b95a01f62984bdeab0c20a0e9580c Mon Sep 17 00:00:00 2001
From: whidix <theodor.vallier@whidix.dev>
Date: Sat, 14 Mar 2026 17:18:58 +0100
Subject: [PATCH] refactor: improve type definitions and event handling in
 CharacterSearchInput component

---
 .../components/CharacterSearchInput.svelte    | 148 ++++++++++--------
 src/routes/(game)/daily/+page.svelte          |   5 +-
 src/routes/(game)/infinite/+page.svelte       |   5 +-
 3 files changed, 90 insertions(+), 68 deletions(-)

diff --git a/src/lib/components/CharacterSearchInput.svelte b/src/lib/components/CharacterSearchInput.svelte
index a856ee0..8eb2f45 100644
--- a/src/lib/components/CharacterSearchInput.svelte
+++ b/src/lib/components/CharacterSearchInput.svelte
@@ -1,16 +1,23 @@
 <script lang="ts">
+	import type { CharacterWithRelations } from '$lib/server/daily-character';
 	import { onMount } from 'svelte';
-	import { createEventDispatcher } from 'svelte';
 
-	export let characters: any[];
-	export let selectedCharacters: any[];
-	
-	const dispatch = createEventDispatcher();
-	
-	let searchInput = '';
-	let highlightedIndex = 0;
-	let dropdownContainer: HTMLDivElement;
-	let searchContainer: HTMLDivElement;
+	let {
+		characters,
+		selectedCharacters,
+		onSelect
+	}: {
+		characters: CharacterWithRelations[];
+		selectedCharacters: CharacterWithRelations[];
+		onSelect: (character: CharacterWithRelations) => void;
+	} = $props();
+
+	const state = $state({
+		searchInput: '',
+		highlightedIndex: 0,
+		dropdownContainer: null as HTMLDivElement | null,
+		searchContainer: null as HTMLDivElement | null
+	});
 
 	function normalizeSearchText(value: string): string {
 		return value
@@ -28,52 +35,67 @@
 		};
 	});
 	
-	$: filteredCharacters = characters.filter(char => {
-		const searchTerm = normalizeSearchText(searchInput);
-		const nameMatches = normalizeSearchText(char.name).includes(searchTerm);
+	const filteredCharacters = $derived.by(() => {
+		const searchTerm = normalizeSearchText(state.searchInput);
 
-		let epithetsMatches = false;
-		if (char.epithets) {
-			try {
-				const parsedEpithets = typeof char.epithets === 'string'
-					? JSON.parse(char.epithets)
-					: char.epithets;
+		return characters.filter((char) => {
+			const nameMatches = normalizeSearchText(char.name).includes(searchTerm);
 
-				if (Array.isArray(parsedEpithets)) {
-					epithetsMatches = parsedEpithets.some((epithet: string) =>
-						normalizeSearchText(epithet).includes(searchTerm)
-					);
-				} else if (typeof parsedEpithets === 'string') {
-					epithetsMatches = normalizeSearchText(parsedEpithets).includes(searchTerm);
+			let epithetsMatches = false;
+			if (char.epithets) {
+				try {
+					const parsedEpithets =
+						typeof char.epithets === 'string' ? JSON.parse(char.epithets) : char.epithets;
+
+					if (Array.isArray(parsedEpithets)) {
+						epithetsMatches = parsedEpithets.some((epithet: string) =>
+							normalizeSearchText(epithet).includes(searchTerm)
+						);
+					} else if (typeof parsedEpithets === 'string') {
+						epithetsMatches = normalizeSearchText(parsedEpithets).includes(searchTerm);
+					}
+				} catch {
+					epithetsMatches = normalizeSearchText(String(char.epithets)).includes(searchTerm);
 				}
-			} catch {
-				epithetsMatches = normalizeSearchText(String(char.epithets)).includes(searchTerm);
 			}
-		}
 
-		return (nameMatches || epithetsMatches) &&
-			!selectedCharacters.some(selected => selected.id === char.id);
+			return (nameMatches || epithetsMatches) &&
+				!selectedCharacters.some((selected) => selected.id === char.id);
+		});
 	});
 
-	// Reset highlighted index when filtered list changes
-	$: if (filteredCharacters) {
-		highlightedIndex = 0;
-	}
-
-	// Scroll highlighted item into view
-	$: if (dropdownContainer && highlightedIndex >= 0) {
-		const highlightedButton = dropdownContainer.querySelector(
-			`button:nth-child(${highlightedIndex + 1})`
-		) as HTMLElement;
-		if (highlightedButton) {
-			highlightedButton.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+	// Reset highlighted index when filtered list changes.
+	$effect(() => {
+		const nextFilteredCharacters = filteredCharacters;
+		if (!nextFilteredCharacters) {
+			return;
 		}
-	}
+		state.highlightedIndex = 0;
+	});
 
-	function selectCharacter(character: any) {
-		dispatch('select', character);
-		searchInput = '';
-		highlightedIndex = 0;
+	// Scroll highlighted item into view.
+	$effect(() => {
+		const nextFilteredCharacters = filteredCharacters;
+
+		if (!state.dropdownContainer || state.highlightedIndex < 0) {
+			return;
+		}
+
+		if (state.highlightedIndex >= nextFilteredCharacters.length) {
+			return;
+		}
+
+		const highlightedButton = state.dropdownContainer.querySelector(
+			`button:nth-child(${state.highlightedIndex + 1})`
+		) as HTMLElement | null;
+
+		highlightedButton?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+	});
+
+	function selectCharacter(character: CharacterWithRelations) {
+		onSelect(character);
+		state.searchInput = '';
+		state.highlightedIndex = 0;
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
@@ -82,16 +104,19 @@
 		switch (event.key) {
 			case 'ArrowDown':
 				event.preventDefault();
-				highlightedIndex = Math.min(highlightedIndex + 1, filteredCharacters.length - 1);
+				state.highlightedIndex = Math.min(
+					state.highlightedIndex + 1,
+					filteredCharacters.length - 1
+				);
 				break;
 			case 'ArrowUp':
 				event.preventDefault();
-				highlightedIndex = Math.max(highlightedIndex - 1, 0);
+				state.highlightedIndex = Math.max(state.highlightedIndex - 1, 0);
 				break;
 			case 'Enter':
 				event.preventDefault();
-				if (filteredCharacters[highlightedIndex]) {
-					selectCharacter(filteredCharacters[highlightedIndex]);
+				if (filteredCharacters[state.highlightedIndex]) {
+					selectCharacter(filteredCharacters[state.highlightedIndex]);
 				}
 				break;
 		}
@@ -99,16 +124,15 @@
 
 	function submitGuess() {
 		if (filteredCharacters.length === 0) return;
-		const characterToSelect =
-			filteredCharacters[highlightedIndex] ?? filteredCharacters[0];
+		const characterToSelect = filteredCharacters[state.highlightedIndex] ?? filteredCharacters[0];
 		if (characterToSelect) {
 			selectCharacter(characterToSelect);
 		}
 	}
 	
 	function handleClickOutside(event: MouseEvent) {
-		if (searchContainer && !searchContainer.contains(event.target as Node)) {
-			searchInput = '';
+		if (state.searchContainer && !state.searchContainer.contains(event.target as Node)) {
+			state.searchInput = '';
 		}
 	}
 </script>
@@ -116,21 +140,21 @@
 <div class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur z-10">
 	<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Entrer une supposition</h2>
 	<div class="mt-4 flex flex-col gap-3 sm:flex-row">
-		<div bind:this={searchContainer} class="relative w-full">
+		<div bind:this={state.searchContainer} class="relative w-full">
 			<input
-				bind:value={searchInput}
+				bind:value={state.searchInput}
 				class="w-full rounded-full border border-amber-200/30 bg-slate-900/60 px-5 py-3 text-sm text-slate-100 placeholder:text-slate-400 focus:border-amber-200/70 focus:outline-none"
 				placeholder="Nom du personnage"
 				type="text"
 				onkeydown={handleKeydown}
 			/>
-			{#if searchInput.length > 0 && filteredCharacters.length > 0}
-				<div bind:this={dropdownContainer} class="absolute top-full left-0 right-0 mt-2 max-h-96 overflow-y-auto rounded-2xl border border-amber-200/30 bg-slate-900/90 backdrop-blur z-10">
+			{#if state.searchInput.length > 0 && filteredCharacters.length > 0}
+				<div bind:this={state.dropdownContainer} class="absolute top-full left-0 right-0 mt-2 max-h-96 overflow-y-auto rounded-2xl border border-amber-200/30 bg-slate-900/90 backdrop-blur z-10">
 					{#each filteredCharacters as character, index (character.id)}
 						<button
-							class="w-full px-5 py-4 text-left text-base text-slate-100 transition border-b border-slate-800/50 last:border-b-0 flex items-center gap-4 {index === highlightedIndex ? 'bg-slate-700' : 'hover:bg-slate-800/70'}"
+							class="w-full px-5 py-4 text-left text-base text-slate-100 transition border-b border-slate-800/50 last:border-b-0 flex items-center gap-4 {index === state.highlightedIndex ? 'bg-slate-700' : 'hover:bg-slate-800/70'}"
 							type="button"
-							onmouseenter={() => highlightedIndex = index}
+							onmouseenter={() => (state.highlightedIndex = index)}
 							onclick={() => selectCharacter(character)}
 						>
 							{#if character.pictureUrl}
@@ -166,7 +190,7 @@
 		<button
 			type="button"
 			onclick={submitGuess}
-			disabled={searchInput.length === 0 || filteredCharacters.length === 0}
+			disabled={state.searchInput.length === 0 || filteredCharacters.length === 0}
 			class="rounded-full bg-amber-300 px-6 py-3 text-sm font-semibold text-slate-900 transition hover:bg-amber-200 disabled:cursor-not-allowed disabled:opacity-50"
 		>
 			Valider
diff --git a/src/routes/(game)/daily/+page.svelte b/src/routes/(game)/daily/+page.svelte
index cb2af84..e146432 100644
--- a/src/routes/(game)/daily/+page.svelte
+++ b/src/routes/(game)/daily/+page.svelte
@@ -147,8 +147,7 @@
 	$: columnVisibility = data.columnVisibility || {};
 	$: hasWon = selectedCharacters.some(char => char.id === dailyCharacter.id);
 	
-	function handleCharacterSelect(event: CustomEvent) {
-		const character = event.detail;
+	function handleCharacterSelect(character: CharacterWithRelations) {
 		selectCharacter(character);
 	}
 	
@@ -306,7 +305,7 @@
 			<CharacterSearchInput 
 				{characters}
 				{selectedCharacters}
-				on:select={handleCharacterSelect}
+				onSelect={handleCharacterSelect}
 			/>
 			{/if}
 		</section>
diff --git a/src/routes/(game)/infinite/+page.svelte b/src/routes/(game)/infinite/+page.svelte
index 840bdce..9c10b0b 100644
--- a/src/routes/(game)/infinite/+page.svelte
+++ b/src/routes/(game)/infinite/+page.svelte
@@ -299,8 +299,7 @@
 		selectedCharacters = [];
 	}
 
-	function handleCharacterSelect(event: CustomEvent) {
-		const character = event.detail;
+	function handleCharacterSelect(character: CharacterWithRelations) {
 		selectCharacter(character);
 	}
 
@@ -619,7 +618,7 @@
 					<CharacterSearchInput
 						{characters}
 						{selectedCharacters}
-						on:select={handleCharacterSelect}
+						onSelect={handleCharacterSelect}
 					/>
 				{/if}
 			{:else}