From be9470d669acd74339f7010e35ea715590e33433 Mon Sep 17 00:00:00 2001
From: Sebastian <Sebastian@sebastians.codes>
Date: Fri, 17 Oct 2025 15:58:54 +0200
Subject: [PATCH] quick ui cleanup

---
 .../(tournament)/tournament/+page.svelte      | 111 +++++++++---------
 .../tournament/[slug]/+page.svelte            |   5 -
 .../[registration]/+page.svelte               |  39 +++---
 3 files changed, 74 insertions(+), 81 deletions(-)

diff --git a/web/src/routes/(tournament)/tournament/+page.svelte b/web/src/routes/(tournament)/tournament/+page.svelte
index 5e076c9..9fcfafa 100644
--- a/web/src/routes/(tournament)/tournament/+page.svelte
+++ b/web/src/routes/(tournament)/tournament/+page.svelte
@@ -20,17 +20,19 @@
 	const tournaments = $derived(() => sortTournaments(tournamentList));
 
 	function upsertTournament(tournament: TournamentInfo) {
-		const index = tournamentList.findIndex((item) => item.id === tournament.id);
+		const index = tournamentList.findIndex((item: { id: number }) => item.id === tournament.id);
 		if (index >= 0) {
-			tournamentList = tournamentList.map((item, idx) => (idx === index ? tournament : item));
+			tournamentList = tournamentList.map((item: any, idx: any) =>
+				idx === index ? tournament : item
+			);
 			return;
 		}
 		tournamentList = [...tournamentList, tournament];
 	}
 
 	function removeTournament(id: number) {
-		if (!tournamentList.some((item) => item.id === id)) return;
-		tournamentList = tournamentList.filter((item) => item.id !== id);
+		if (!tournamentList.some((item: { id: number }) => item.id === id)) return;
+		tournamentList = tournamentList.filter((item: { id: number }) => item.id !== id);
 	}
 
 	function formatDate(value: string | null) {
@@ -63,10 +65,10 @@
 		return `${count} ${count === 1 ? 'spelare' : 'spelare'}`;
 	}
 
-onMount(() => {
-	const stop = listenToTournamentEvents(upsertTournament, removeTournament, {
-		endpoint: '/api/public-events'
-	});
+	onMount(() => {
+		const stop = listenToTournamentEvents(upsertTournament, removeTournament, {
+			endpoint: '/api/public-events'
+		});
 		return () => {
 			stop();
 		};
@@ -80,66 +82,59 @@ onMount(() => {
 <div class="min-h-screen bg-slate-950 text-slate-100">
 	<div class="mx-auto max-w-6xl space-y-12 px-4 py-16 sm:py-20">
 		<header class="space-y-3 text-center">
-			<p class="text-xs uppercase tracking-[0.4em] text-indigo-300">VBytes LAN</p>
+			<p class="text-xs tracking-[0.4em] text-indigo-300 uppercase">VBytes LAN</p>
 			<h1 class="text-4xl font-bold sm:text-5xl">Turneringar</h1>
-			<p class="mx-auto max-w-2xl text-base text-slate-300">
-				Samla laget, följ brackets i realtid och håll koll på allt som händer under turneringarna.
-			</p>
 		</header>
 
 		{#if tournaments().length > 0}
 			<div class="flex flex-wrap justify-center gap-8">
 				{#each tournaments() as tournament}
-					<article class="group w-full max-w-md flex flex-col rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900/70 to-slate-900/50 p-8 shadow-xl transition duration-200 hover:-translate-y-1 hover:border-indigo-400/70 hover:shadow-indigo-500/25">
-						<div class="flex items-center justify-between gap-3 text-xs uppercase tracking-wide">
-							<span class="font-semibold text-indigo-200">{tournament.game}</span>
-							<span class="rounded-full border border-slate-700 px-3 py-1 text-[0.7rem] font-semibold text-slate-300">
-								{registrationSummary(tournament)}
-							</span>
-						</div>
-						<h2 class="mt-4 text-3xl font-semibold text-slate-50">{tournament.title}</h2>
-						{#if tournament.tagline}
-							<p class="mt-3 text-base text-slate-300">{tournament.tagline}</p>
-						{:else if tournament.description}
-							<p class="mt-3 text-base text-slate-400">{tournament.description}</p>
-						{/if}
-						<dl class="mt-6 space-y-3 text-sm text-slate-300">
-							{#if tournament.start_at}
-								<div class="flex items-center gap-3 text-[0.95rem]">
-									<span class="text-indigo-200">Start:</span>
-									<span>{formatDate(tournament.start_at) ?? tournament.start_at}</span>
-								</div>
-							{/if}
-							{#if tournament.location}
-								<div class="flex items-center gap-3 text-[0.95rem]">
-									<span class="text-indigo-200">Plats:</span>
-									<span>{tournament.location}</span>
-								</div>
-							{/if}
-							{#if tournament.contact}
-								<div class="flex items-center gap-3 text-[0.95rem]">
-									<span class="text-indigo-200">Kontakt:</span>
-									<span>{tournament.contact}</span>
-								</div>
-							{/if}
-						</dl>
-						<div class="mt-auto pt-8">
-							{#if tournament.slug}
-								<a
-									href={`/tournament/${tournament.slug}`}
-									class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-white transition hover:bg-indigo-600"
+					<a href={`/tournament/${tournament.slug}`}>
+						<article
+							class="group flex w-full max-w-md flex-col rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900/70 to-slate-900/50 p-8 shadow-xl transition duration-200 hover:-translate-y-1 hover:border-indigo-400/70 hover:shadow-indigo-500/25"
+						>
+							<div class="flex items-center justify-between gap-3 text-xs tracking-wide uppercase">
+								<span class="font-semibold text-indigo-200">{tournament.game}</span>
+								<span
+									class="rounded-full border border-slate-700 px-3 py-1 text-[0.7rem] font-semibold text-slate-300"
 								>
-									Visa turnering
-								</a>
-							{:else}
-								<span class="text-xs text-slate-500">Ingen publik sida tillgänglig.</span>
+									{registrationSummary(tournament)}
+								</span>
+							</div>
+							<h2 class="mt-4 text-3xl font-semibold text-slate-50">{tournament.title}</h2>
+							{#if tournament.tagline}
+								<p class="mt-3 text-base text-slate-300">{tournament.tagline}</p>
+							{:else if tournament.description}
+								<p class="mt-3 text-base text-slate-400">{tournament.description}</p>
 							{/if}
-						</div>
-					</article>
+							<dl class="mt-6 space-y-3 text-sm text-slate-300">
+								{#if tournament.start_at}
+									<div class="flex items-center gap-3 text-[0.95rem]">
+										<span class="text-indigo-200">Start:</span>
+										<span>{formatDate(tournament.start_at) ?? tournament.start_at}</span>
+									</div>
+								{/if}
+								{#if tournament.location}
+									<div class="flex items-center gap-3 text-[0.95rem]">
+										<span class="text-indigo-200">Plats:</span>
+										<span>{tournament.location}</span>
+									</div>
+								{/if}
+								{#if tournament.contact}
+									<div class="flex items-center gap-3 text-[0.95rem]">
+										<span class="text-indigo-200">Kontakt:</span>
+										<span>{tournament.contact}</span>
+									</div>
+								{/if}
+							</dl>
+						</article>
+					</a>
 				{/each}
 			</div>
 		{:else}
-			<p class="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 px-6 py-12 text-center text-sm text-slate-400">
+			<p
+				class="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 px-6 py-12 text-center text-sm text-slate-400"
+			>
 				Inga turneringar är publicerade ännu. Kom tillbaka senare!
 			</p>
 		{/if}
@@ -147,7 +142,7 @@ onMount(() => {
 		<div class="text-center">
 			<a
 				href="/admin"
-				class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-6 py-3 text-sm font-semibold uppercase tracking-wide text-white transition hover:bg-indigo-600"
+				class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-6 py-3 text-sm font-semibold tracking-wide text-white uppercase transition hover:bg-indigo-600"
 			>
 				Till admin
 			</a>
diff --git a/web/src/routes/(tournament)/tournament/[slug]/+page.svelte b/web/src/routes/(tournament)/tournament/[slug]/+page.svelte
index 6d3dcaf..848a9f5 100644
--- a/web/src/routes/(tournament)/tournament/[slug]/+page.svelte
+++ b/web/src/routes/(tournament)/tournament/[slug]/+page.svelte
@@ -418,11 +418,6 @@
 										Anmälan bekräftad
 									</h2>
 									<p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p>
-									{#if signup.successRegistrationId}
-										<p class="text-xs tracking-wide text-indigo-200 uppercase">
-											Anmälan #{signup.successRegistrationId}
-										</p>
-									{/if}
 								</header>
 
 								<section
diff --git a/web/src/routes/(tournament)/tournament/[slug]/signup-success/[registration]/+page.svelte b/web/src/routes/(tournament)/tournament/[slug]/signup-success/[registration]/+page.svelte
index 2141f7a..15e463f 100644
--- a/web/src/routes/(tournament)/tournament/[slug]/signup-success/[registration]/+page.svelte
+++ b/web/src/routes/(tournament)/tournament/[slug]/signup-success/[registration]/+page.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-	import type {
-		TournamentRegistrationDetail,
-		TournamentSignupField
-	} from '$lib/types';
+	import type { TournamentRegistrationDetail, TournamentSignupField } from '$lib/types';
 
 	const props = $props<{ data: TournamentRegistrationDetail }>();
 	const { tournament, registration } = props.data;
@@ -39,18 +36,20 @@
 <div class="min-h-screen bg-slate-950 text-slate-100">
 	<div class="mx-auto flex min-h-screen max-w-4xl flex-col gap-8 px-4 py-12">
 		<header class="space-y-4 rounded-2xl bg-slate-900/70 p-6 text-center shadow-lg">
-			<p class="text-xs uppercase tracking-[0.4em] text-indigo-300">VBytes LAN</p>
+			<p class="text-xs tracking-[0.4em] text-indigo-300 uppercase">VBytes LAN</p>
 			<h1 class="text-3xl font-bold sm:text-4xl">Anmälan bekräftad</h1>
 			<p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p>
-			<p class="text-xs uppercase tracking-wide text-indigo-200">
-				Skapad {formatDateTime(registration.created_at) ?? registration.created_at}
-			</p>
 		</header>
 
-		<section class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 md:grid-cols-2">
+		<section
+			class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 md:grid-cols-2"
+		>
 			<div class="space-y-3">
 				<h2 class="text-lg font-semibold text-slate-100">Turnering</h2>
-				<p class="text-sm text-slate-300"><span class="font-medium text-slate-100">Spel:</span> {tournament.game}</p>
+				<p class="text-sm text-slate-300">
+					<span class="font-medium text-slate-100">Spel:</span>
+					{tournament.game}
+				</p>
 				{#if tournament.start_at}
 					<p class="text-sm text-slate-300">
 						<span class="font-medium text-slate-100">Start:</span>
@@ -59,7 +58,8 @@
 				{/if}
 				{#if tournament.location}
 					<p class="text-sm text-slate-300">
-						<span class="font-medium text-slate-100">Plats:</span> {tournament.location}
+						<span class="font-medium text-slate-100">Plats:</span>
+						{tournament.location}
 					</p>
 				{/if}
 			</div>
@@ -75,7 +75,8 @@
 				{/if}
 				{#if tournament.contact}
 					<p class="text-sm text-slate-300">
-						<span class="font-medium text-slate-100">Kontakt:</span> {tournament.contact}
+						<span class="font-medium text-slate-100">Kontakt:</span>
+						{tournament.contact}
 					</p>
 				{/if}
 			</div>
@@ -84,14 +85,16 @@
 		<section class="space-y-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6">
 			<h2 class="text-lg font-semibold text-slate-100">Anmälningsuppgifter</h2>
 			{#if entryFields.length === 0}
-				<p class="rounded-md border border-dashed border-slate-700 px-4 py-3 text-sm text-slate-300">
+				<p
+					class="rounded-md border border-dashed border-slate-700 px-4 py-3 text-sm text-slate-300"
+				>
 					Den här turneringen kräver inga uppgifter utöver spelare.
 				</p>
 			{:else}
 				<div class="grid gap-3 md:grid-cols-2">
 					{#each entryFields as field}
 						<div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3">
-							<p class="text-xs uppercase tracking-wide text-indigo-200">{field.label}</p>
+							<p class="text-xs tracking-wide text-indigo-200 uppercase">{field.label}</p>
 							<p class="mt-1 text-sm text-slate-100">{fieldValue(entryValues, field) || '—'}</p>
 						</div>
 					{/each}
@@ -113,7 +116,9 @@
 				<div class="space-y-3">
 					{#each participantValues as participant, index}
 						<div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3">
-							<p class="text-xs font-semibold uppercase tracking-wide text-indigo-200">Spelare {index + 1}</p>
+							<p class="text-xs font-semibold tracking-wide text-indigo-200 uppercase">
+								Spelare {index + 1}
+							</p>
 							<ul class="mt-2 space-y-1 text-sm text-slate-100">
 								{#each participantFields as field}
 									<li>
@@ -129,9 +134,7 @@
 		</section>
 
 		<footer class="mt-auto flex flex-col gap-3 text-center text-sm text-slate-400">
-			<p>
-				Behöver du uppdatera informationen? Kontakta arrangören eller skicka in en ny anmälan.
-			</p>
+			<p>Behöver du uppdatera informationen? Kontakta arrangören eller skicka in en ny anmälan.</p>
 			<div class="flex flex-wrap justify-center gap-3">
 				<a
 					href="/"