From 8b0895071924f13f4a1d870ed459eca8abfbfc3e Mon Sep 17 00:00:00 2001
From: whidix <theodor.vallier@whidix.dev>
Date: Sat, 14 Mar 2026 17:29:57 +0100
Subject: [PATCH] refactor: streamline character selection and improve
 rendering logic in +page.svelte

---
 .../(admin)/admin/characters/+page.svelte     | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/routes/(admin)/admin/characters/+page.svelte b/src/routes/(admin)/admin/characters/+page.svelte
index 822325b..8ea878f 100644
--- a/src/routes/(admin)/admin/characters/+page.svelte
+++ b/src/routes/(admin)/admin/characters/+page.svelte
@@ -15,13 +15,11 @@
 	let filterGender = $state('all');
 	let filterArc = $state('all');
 	let filterHaki = $state<'all' | 'observation' | 'armament' | 'conqueror' | 'none'>('all');
-	let selectedCharacterId = $state<string | null>(null);
 	let isEditModalOpen = $state(false);
 	let isSaving = $state(false);
 	let saveMessage = $state<{ type: 'success' | 'error'; text: string } | null>(null);
 	let dailyModeToast = $state<{ type: 'success' | 'error'; text: string } | null>(null);
 	let selectedChar = $state<any>(null);
-	let showOriginalValue = $state<Record<string, boolean>>({});
 
 	const showDailyModeToast = (type: 'success' | 'error', text: string) => {
 		dailyModeToast = { type, text };
@@ -38,12 +36,6 @@
 		}
 	};
 
-	const getFandomUrl = (url: string | null | undefined) => {
-		if (!url) return null;
-		if (url.startsWith('http://') || url.startsWith('https://')) return url;
-		return `https://onepiece.fandom.com/fr/wiki/${url}`;
-	};
-
 	let editForm = $state<any>({
 		id: '',
 		name: '',
@@ -98,7 +90,6 @@
 	};
 
 	const openEditModal = (char: any) => {
-		selectedCharacterId = char.id;
 		selectedChar = char;
 		
 		const override = char.override || {};
@@ -123,13 +114,11 @@
 			arcId: override.arcId !== null && override.arcId !== undefined ? override.arcId : (char.arcId || ''),
 			status: override.status ?? ''
 		};
-		showOriginalValue = {};
 		isEditModalOpen = true;
 	};
 
 	const closeModal = () => {
 		isEditModalOpen = false;
-		selectedCharacterId = null;
 		selectedChar = null;
 		editForm = {
 			id: '',
@@ -179,6 +168,7 @@
 				}, 3000);
 			}
 		} catch (error) {
+			console.error('Error deleting character:', error);
 			saveMessage = {
 				type: 'error',
 				text: 'Error deleting character'
@@ -221,7 +211,7 @@
 			class="rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
 		>
 			<option value="all">All Statuses</option>
-			{#each data.availableStatuses as status}
+			{#each data.availableStatuses as status (status)}
 				<option value={status}>{status}</option>
 			{/each}
 		</select>
@@ -230,7 +220,7 @@
 			class="rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
 		>
 			<option value="all">All Genders</option>
-			{#each data.availableGenders as gender}
+			{#each data.availableGenders as gender (gender)}
 				<option value={gender}>{gender}</option>
 			{/each}
 		</select>
@@ -239,8 +229,8 @@
 			class="rounded-lg bg-slate-700 px-4 py-2 text-sm text-white outline-none transition focus:ring-2 focus:ring-amber-600"
 		>
 			<option value="all">All Arcs</option>
-			{#each data.arcs as arc}
-				<option value={String(arc.id)}>{arc.name}</option>
+			{#each data.arcs as arc (arc.id)}
+				<option value={arc.id}>{arc.name}</option>
 			{/each}
 		</select>
 		<select
@@ -284,17 +274,17 @@
 					</tr>
 				</thead>
 				<tbody>
-				{#each filteredCharacters as char}
+				{#each filteredCharacters as char (char.id)}
 					<tr class="border-b border-white/5 hover:bg-slate-800/50">
 						<!-- Character -->
 						<td class="px-4 py-4 text-sm text-white w-64 max-w-64 {isFieldOverridden(char, 'name') || isFieldOverridden(char, 'pictureUrl') ? 'bg-amber-500/10' : ''}">
 							<div class="flex items-center gap-3 min-w-0">
-								{#if getFandomUrl(char.displayValues.url)}
+								{#if char.displayValues.url}
 									<a
-										href={getFandomUrl(char.displayValues.url)}
+										href={"https://onepiece.fandom.com/fr/wiki/" + char.displayValues.url}
 										target="_blank"
 										rel="noopener noreferrer"
-										class="flex-shrink-0 transition-opacity hover:opacity-80"
+										class="shrink-0 transition-opacity hover:opacity-80"
 									>
 										{#if char.displayValues.pictureUrl}
 											<img
@@ -315,18 +305,18 @@
 											src={char.displayValues.pictureUrl}
 											alt={char.displayValues.name}
 											loading="lazy"
-											class="h-10 w-10 flex-shrink-0 rounded-full object-cover"
+											class="h-10 w-10 shrink-0 rounded-full object-cover"
 										/>
 									{:else}
-										<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-slate-700 text-gray-400">
+										<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-700 text-gray-400">
 											{char.displayValues.name?.charAt(0).toUpperCase() || '?'}
 										</div>
 									{/if}
 								{/if}
 								<div class="flex flex-col min-w-0">
-									{#if getFandomUrl(char.displayValues.url)}
+									{#if char.displayValues.url}
 										<a
-											href={getFandomUrl(char.displayValues.url)}
+											href="https://onepiece.fandom.com/fr/wiki/${char.displayValues.url}"
 											target="_blank"
 											rel="noopener noreferrer"
 											class="font-medium truncate text-white hover:text-amber-200 hover:underline"
@@ -461,7 +451,7 @@
 	{/if}
 
 	{#if dailyModeToast}
-		<div class="fixed right-6 top-6 z-[60]">
+		<div class="fixed right-6 top-6 z-60">
 			<div
 				class={`rounded-lg border px-4 py-3 text-sm font-medium shadow-lg backdrop-blur ${
 					dailyModeToast.type === 'success'
@@ -628,7 +618,7 @@
 								class="w-full rounded-lg border border-gray-500 bg-slate-800 px-3 py-2 text-white"
 							>
 							<option value="">None</option>
-							{#each data.arcs as arc}
+							{#each data.arcs as arc (arc.id)}
 								<option value={arc.id}>{arc.name}</option>
 								{/each}
 							</select>
@@ -651,7 +641,7 @@
 								class="w-full rounded-lg border border-gray-500 bg-slate-800 px-3 py-2 text-white"
 							>
 							<option value="">None</option>
-							{#each data.devilFruits as fruit}
+							{#each data.devilFruits as fruit (fruit.id)}
 								<option value={fruit.id}>{fruit.name}</option>
 								{/each}
 							</select>