feat: enhance column visibility toggle with localized display names and improve layout

src/routes/(game)/infinite/+page.svelte

@@ -11,6 +11,17 @@
 	let isLoaded = false;
 	let score = 0;
 	let columnVisibility: Record<string, boolean> = {};
+	const columnDisplayNames: Record<string, string> = {
+		status: 'Statut',
+		gender: 'Genre',
+		affiliations: 'Affiliations',
+		devilFruitType: 'Fruit',
+		haki: 'Haki',
+		bounty: 'Prime',
+		height: 'Taille',
+		origin: 'Origine',
+		arc: 'Arc'
+	};
 
 	let wasOriginAvailable = false;
 	let wasFruitAvailable = false;
@@ -353,31 +364,36 @@
 		</section>
 
 		{#if currentCharacter}
-			<!-- Column Visibility Toggle -->
-			<section class="mt-10">
-				<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">
-					<h3 class="mb-4 text-lg font-semibold text-amber-300">Colonnes visibles</h3>
-					<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
-						{#each Object.entries(columnVisibility) as [column, isVisible] (column)}
-							<button
-								type="button"
-								onclick={() => toggleColumnVisibility(column)}
-								class="rounded-lg border px-3 py-2 text-sm font-medium transition-colors {isVisible
-									? 'border-amber-300/50 bg-amber-300/10 text-amber-100 hover:bg-amber-300/20'
-									: 'border-white/20 bg-slate-900/40 text-slate-400 hover:bg-slate-900/60'}"
-							>
-								{column}
-							</button>
-						{/each}
-					</div>
-				</div>
-			</section>
-
 			<GuessHistoryTable
 				{selectedCharacters}
 				dailyCharacter={currentCharacter}
 				{columnVisibility}
 			/>
+
+			<!-- Column Visibility Toggle -->
+			<section class="mt-6">
+				<div class="rounded-2xl border border-white/10 bg-white/5 p-3 sm:p-4 backdrop-blur">
+					<div class="mb-3 flex items-center justify-between gap-3">
+						<h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-200">Colonnes</h3>
+						<p class="text-xs text-slate-400">
+							{Object.values(columnVisibility).filter(Boolean).length}/{Object.keys(columnVisibility).length}
+						</p>
+					</div>
+					<div class="flex flex-wrap gap-2">
+						{#each Object.entries(columnVisibility) as [column, isVisible] (column)}
+							<button
+								type="button"
+								onclick={() => toggleColumnVisibility(column)}
+								class="rounded-full border px-2.5 py-1 text-xs font-medium transition-colors {isVisible
+									? 'border-amber-300/50 bg-amber-300/10 text-amber-100 hover:bg-amber-300/20'
+									: 'border-white/20 bg-slate-900/40 text-slate-400 hover:bg-slate-900/60'}"
+							>
+								{columnDisplayNames[column] || column.replace(/([A-Z])/g, ' $1').trim()}
+							</button>
+						{/each}
+					</div>
+				</div>
+			</section>
 		{/if}
 	</div>
 </main>