feat: implement leaderboard page with top players, teams, and high scores

- Added a new leaderboard route with server-side loading for top players, teams, and recent high scores.
- Created a new Svelte component for the leaderboard UI, including tabs for players, teams, and scores.
- Implemented ELO ranking display and win/loss statistics for players.
- Added functionality to display team wins and member counts.
- Included recent high scores with player context and map details.
- Enhanced team management features in the teams route, including renaming and member management with permission checks.

src/routes/(app)/admin/+page.server.ts

@@ -3,8 +3,7 @@ import { db } from '$lib/server/db';
 import { user } from '$lib/server/db/auth.schema';
 import { playerRating } from '$lib/server/db/schema';
 import { eq, desc } from 'drizzle-orm';
-import { redirect, error } from '@sveltejs/kit';
-import { requireRole, setUserRole } from '$lib/server/permissions';
+import { requireRole, setUserRole, isRootAdmin } from '$lib/server/permissions';
 import type { PageServerLoad, Actions } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
@@ -14,7 +13,6 @@ export const load: PageServerLoad = async ({ locals }) => {
 		orderBy: desc(user.createdAt)
 	});
 
-	// Fetch ratings for all users
 	const usersWithRatings = await Promise.all(
 		users.map(async (u) => {
 			const rating = await db.query.playerRating.findFirst({
@@ -29,12 +27,16 @@ export const load: PageServerLoad = async ({ locals }) => {
 				createdAt: u.createdAt,
 				elo: rating?.elo ?? 1000,
 				wins: rating?.wins ?? 0,
-				losses: rating?.losses ?? 0
+				losses: rating?.losses ?? 0,
+				isRootAdmin: isRootAdmin(u.email)
 			};
 		})
 	);
 
-	return { users: usersWithRatings };
+	return {
+		users: usersWithRatings,
+		actorIsRootAdmin: isRootAdmin(locals.user!.email)
+	};
 };
 
 export const actions: Actions = {
@@ -50,12 +52,13 @@ export const actions: Actions = {
 			return { error: 'Invalid role' };
 		}
 
-		// Prevent demoting yourself
-		if (userId === locals.user!.id && role !== 'admin') {
-			return { error: "You can't demote yourself" };
+		try {
+			await setUserRole(locals, userId, role as any);
+		} catch (e: any) {
+			// setUserRole throws SvelteKit errors; extract the message
+			return { error: e.body?.message ?? e.message ?? 'Failed to update role' };
 		}
 
-		await setUserRole(userId, role as any);
 		return { success: true };
 	}
 };

src/routes/(app)/admin/+page.svelte

@@ -13,6 +13,13 @@
 		},
 		admin: { label: 'Admin', color: 'bg-red-500/20 text-red-400 border-red-500/30' }
 	};
+
+	// Non-root admins can only assign player/referee
+	const availableRoles = $derived(
+		data.actorIsRootAdmin
+			? ['player', 'referee', 'admin']
+			: ['player', 'referee']
+	);
 </script>
 
 <div class="mx-auto max-w-4xl">
@@ -20,6 +27,9 @@
 		<h1 class="text-2xl font-700 tracking-tight">Admin Panel</h1>
 		<p class="mt-1 text-sm text-text-secondary">
 			{data.users.length} registered user{data.users.length !== 1 ? 's' : ''}
+			{#if data.actorIsRootAdmin}
+				<span class="ml-2 rounded bg-red-500/20 px-1.5 py-0.5 text-[10px] font-700 text-red-400">ROOT ADMIN</span>
+			{/if}
 		</p>
 	</div>
 
@@ -39,6 +49,8 @@
 
 		{#each data.users as u}
 			{@const badge = roleBadge[u.role] ?? roleBadge.player}
+			{@const isProtected = u.isRootAdmin}
+			{@const canChangeRole = !isProtected && (data.actorIsRootAdmin || u.role !== 'admin')}
 			<div
 				class="grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-4 border-b border-border/50 px-4 py-3 last:border-b-0"
 			>
@@ -55,7 +67,12 @@
 
 				<!-- Name -->
 				<div class="min-w-0">
-					<p class="truncate text-sm font-500">{u.name}</p>
+					<div class="flex items-center gap-2">
+						<p class="truncate text-sm font-500">{u.name}</p>
+						{#if u.isRootAdmin}
+							<span class="rounded bg-red-500/20 px-1.5 py-0.5 text-[10px] font-700 text-red-400">ROOT</span>
+						{/if}
+					</div>
 					<p class="truncate text-xs text-text-secondary">{u.email}</p>
 				</div>
 
@@ -69,35 +86,68 @@
 				</span>
 
 				<!-- Role selector -->
-				<form
-					method="post"
-					action="?/setRole"
-					use:enhance={() => {
-						actionError = '';
-						return async ({ result }) => {
-							if (
-								result.type === 'failure' ||
-								(result.type === 'success' && (result.data as any)?.error)
-							) {
-								actionError = (result.data as any)?.error ?? 'Failed to update role';
-							}
-						};
-					}}
-					class="flex items-center gap-2"
-				>
-					<input type="hidden" name="userId" value={u.id} />
-					<select
-						name="role"
-						value={u.role}
-						onchange={(e) => e.currentTarget.form?.requestSubmit()}
-						class="rounded-md border px-2 py-1 text-xs font-500 {badge.color} cursor-pointer bg-transparent focus:outline-none"
+				{#if canChangeRole}
+					<form
+						method="post"
+						action="?/setRole"
+						use:enhance={() => {
+							actionError = '';
+							return async ({ result }) => {
+								if (
+									result.type === 'failure' ||
+									(result.type === 'success' && (result.data as any)?.error)
+								) {
+									actionError = (result.data as any)?.error ?? 'Failed to update role';
+								}
+							};
+						}}
+						class="flex items-center gap-2"
 					>
-						<option value="player" class="bg-surface-800 text-text-primary">Player</option>
-						<option value="referee" class="bg-surface-800 text-text-primary">Referee</option>
-						<option value="admin" class="bg-surface-800 text-text-primary">Admin</option>
-					</select>
-				</form>
+						<input type="hidden" name="userId" value={u.id} />
+						<select
+							name="role"
+							value={u.role}
+							onchange={(e) => e.currentTarget.form?.requestSubmit()}
+							class="rounded-md border px-2 py-1 text-xs font-500 {badge.color} cursor-pointer bg-transparent focus:outline-none"
+						>
+							{#each availableRoles as r}
+								<option value={r} class="bg-surface-800 text-text-primary">
+									{r.charAt(0).toUpperCase() + r.slice(1)}
+								</option>
+							{/each}
+						</select>
+					</form>
+				{:else}
+					<span class="rounded-md border px-2 py-1 text-xs font-500 {badge.color}">
+						{badge.label}
+					</span>
+				{/if}
 			</div>
 		{/each}
 	</div>
+
+	<!-- Permission Info -->
+	<div class="mt-6 rounded-lg border border-border bg-surface-800 p-5">
+		<h2 class="text-sm font-600">Permission Levels</h2>
+		<div class="mt-3 flex flex-col gap-2 text-xs text-text-secondary">
+			<div class="flex items-center gap-2">
+				<span class="rounded bg-surface-600 px-1.5 py-0.5 font-600 text-text-secondary">Player</span>
+				Create account, join queue, create/manage own mappools and teams
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="rounded bg-yellow-500/20 px-1.5 py-0.5 font-600 text-yellow-400">Referee</span>
+				All player permissions + manage any match, force start games
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="rounded bg-red-500/20 px-1.5 py-0.5 font-600 text-red-400">Admin</span>
+				Full access + manage all mappools/teams + promote players to referee
+			</div>
+			{#if data.actorIsRootAdmin}
+				<div class="flex items-center gap-2">
+					<span class="rounded bg-red-500/20 px-1.5 py-0.5 font-700 text-red-400">Root Admin</span>
+					Can promote/demote admins. Set via ROOT_ADMIN_EMAIL env var. Cannot be demoted.
+				</div>
+			{/if}
+		</div>
+	</div>
 </div>