layout UI

src/routes/(app)/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user ?? null
+	};
+};

src/routes/(app)/+layout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import Sidebar from '$lib/components/Sidebar.svelte';
+	import Header from '$lib/components/Header.svelte';
+
+	let { children } = $props();
+</script>
+
+<div class="flex min-h-dvh">
+	<Sidebar />
+	<div class="ml-56 flex flex-1 flex-col">
+		<Header />
+		<main class="flex-1 p-6">
+			{@render children()}
+		</main>
+	</div>
+</div>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+	import './layout.css';
+
+	let { data }: PageProps = $props();
+</script>
+
+<div class="mx-auto max-w-4xl">
+	<h1 class="font-700 text-2xl tracking-tight">
+		{#if data.user}
+			Welcome back, <span class="text-accent">{data.user.name}</span>
+		{:else}
+			Welcome to <span class="text-accent">VASH</span>
+		{/if}
+	</h1>
+	<p class="mt-2 text-sm text-text-secondary">Automated esports match management for osu!</p>
+
+	<div class="mt-8 grid grid-cols-3 gap-4">
+		<a
+			href="/matches"
+			class="group rounded-lg border border-border bg-surface-800 p-5 transition-colors hover:border-accent/40 hover:bg-surface-700"
+		>
+			<div class="text-2xl">⚔</div>
+			<h2 class="font-600 mt-3 text-sm">Matches</h2>
+			<p class="mt-1 text-xs text-text-secondary">Create and manage competitive matches</p>
+		</a>
+
+		<a
+			href="/mappools"
+			class="group rounded-lg border border-border bg-surface-800 p-5 transition-colors hover:border-accent/40 hover:bg-surface-700"
+		>
+			<div class="text-2xl">♫</div>
+			<h2 class="font-600 mt-3 text-sm">Mappools</h2>
+			<p class="mt-1 text-xs text-text-secondary">Build and share beatmap pools</p>
+		</a>
+
+		<a
+			href="/teams"
+			class="group rounded-lg border border-border bg-surface-800 p-5 transition-colors hover:border-accent/40 hover:bg-surface-700"
+		>
+			<div class="text-2xl">⚑</div>
+			<h2 class="font-600 mt-3 text-sm">Teams</h2>
+			<p class="mt-1 text-xs text-text-secondary">Manage your teams and rosters</p>
+		</a>
+	</div>
+</div>

src/routes/(app)/layout.css

@@ -0,0 +1,43 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+@theme {
+	--color-surface-900: #0a0a0f;
+	--color-surface-800: #12121a;
+	--color-surface-700: #1a1a25;
+	--color-surface-600: #24243a;
+	--color-accent: #ff66ab;
+	--color-accent-hover: #ff85be;
+	--color-accent-dim: #ff66ab33;
+	--color-text-primary: #eeeef0;
+	--color-text-secondary: #8888a0;
+	--color-border: #2a2a3d;
+	--font-display: 'Geist', system-ui, sans-serif;
+	--font-body: 'Geist', system-ui, sans-serif;
+	--font-mono: 'Geist Mono', ui-monospace, monospace;
+}
+
+html {
+	background-color: var(--color-surface-900);
+	color: var(--color-text-primary);
+	font-family: var(--font-body);
+}
+
+body {
+	min-height: 100dvh;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+	width: 6px;
+}
+::-webkit-scrollbar-track {
+	background: var(--color-surface-900);
+}
+::-webkit-scrollbar-thumb {
+	background: var(--color-surface-600);
+	border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: var(--color-accent);
+}

src/routes/+layout.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	import './layout.css';
-	import favicon from '$lib/assets/favicon.svg';
-
-	let { children } = $props();
-</script>
-
-<svelte:head><link rel="icon" href={favicon} /></svelte:head>
-{@render children()}

src/routes/+page.svelte

@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

src/routes/layout.css

@@ -1,2 +0,0 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/typography';

src/routes/page.svelte.spec.ts

@@ -1,13 +0,0 @@
-import { page } from 'vitest/browser';
-import { describe, expect, it } from 'vitest';
-import { render } from 'vitest-browser-svelte';
-import Page from './+page.svelte';
-
-describe('/+page.svelte', () => {
-	it('should render h1', async () => {
-		render(Page);
-
-		const heading = page.getByRole('heading', { level: 1 });
-		await expect.element(heading).toBeInTheDocument();
-	});
-});