switch to sveltekit and make big progress

src/lib/components/app-layout.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import {
+		Breadcrumb,
+		BreadcrumbItem,
+		BreadcrumbList,
+		BreadcrumbSeparator
+	} from '$lib/components/ui/breadcrumb';
+	import type { BreadcrumbItem as BreadcrumbItemType } from '../../app';
+	import { cn } from '$lib/utils';
+	import { getContext } from 'svelte';
+	import Nav from '$lib/components/nav.svelte';
+	import type { User } from '@/server/db/schema/users';
+
+	let {
+		breadcrumbs,
+		className,
+		children
+	}: { breadcrumbs: BreadcrumbItemType[]; className?: string; children: any } = $props();
+
+	const user = getContext<User>('user');
+</script>
+
+<div class="mx-auto flex min-h-screen max-w-7xl flex-col px-4 pt-4 pb-8 sm:px-6 lg:px-8">
+	<!-- Header -->
+	<header class="flex flex-col gap-4 pb-8">
+		<div class="flex items-center justify-between">
+			<div class="flex-1">
+				<a href="/" class="text-primary text-2xl font-bold">FlbxCup</a>
+			</div>
+			<div class="flex items-center gap-4">
+				{#if user}
+					<div class="text-muted-foreground text-sm">
+						Welcome, {user.username || 'User'}
+					</div>
+					<a href="/auth/logout" class="text-primary text-sm hover:underline">Logout</a>
+				{:else}
+					<a href="/auth/login" class="text-primary text-sm hover:underline">Login</a>
+				{/if}
+			</div>
+		</div>
+		<div class="border-b pb-2">
+			<Nav />
+		</div>
+	</header>
+
+	<!-- Breadcrumbs -->
+	{#if breadcrumbs?.length}
+		<Breadcrumb class="mb-6">
+			<BreadcrumbList>
+				{#each breadcrumbs as crumb, i}
+					<BreadcrumbItem>
+						<a href={crumb.href} class={cn(i === breadcrumbs.length - 1 ? 'font-medium' : '')}>
+							{crumb.title}
+						</a>
+					</BreadcrumbItem>
+					{#if i < breadcrumbs.length - 1}
+						<BreadcrumbSeparator />
+					{/if}
+				{/each}
+			</BreadcrumbList>
+		</Breadcrumb>
+	{/if}
+
+	<!-- Main content -->
+	<main class={cn('flex-1', className)}>
+		{@render children?.()}
+	</main>
+
+	<!-- Footer -->
+	<footer class="text-muted-foreground mt-12 border-t pt-6 text-center text-sm">
+		<p>© {new Date().getFullYear()} FlbxCup. All rights reserved.</p>
+	</footer>
+</div>