feat(ui): add layout, tab bar, login and logout

src/lib/components/FormError.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { message }: { message?: string } = $props();
+</script>
+
+{#if message}
+	<p class="mt-1 text-sm text-red-700" role="alert">{message}</p>
+{/if}

src/lib/components/MoneyText.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { formatCents } from '$lib/domain/money';
+
+	let {
+		cents,
+		currency,
+		signed = false,
+		class: className = ''
+	}: { cents: number; currency: string; signed?: boolean; class?: string } = $props();
+
+	const text = $derived(
+		signed && cents > 0 ? `+${formatCents(cents, currency)}` : formatCents(cents, currency)
+	);
+	const tone = $derived(
+		!signed ? '' : cents > 0 ? 'text-green-700' : cents < 0 ? 'text-red-700' : 'text-gray-500'
+	);
+</script>
+
+<span class="tabular-nums {tone} {className}">{text}</span>

src/lib/components/TabBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { PublicUser } from '$lib/domain/types';
+
+	let { user }: { user: PublicUser } = $props();
+
+	const tabs = $derived([
+		{ href: '/', label: 'Expenses', icon: '🧾' },
+		{ href: '/balances', label: 'Balances', icon: '⚖️' },
+		{ href: '/expenses/new', label: 'Add', icon: '➕' },
+		...(user.role === 'admin' ? [{ href: '/admin', label: 'Admin', icon: '🛠️' }] : []),
+		{ href: '/me', label: 'Me', icon: '👤' }
+	]);
+
+	const isActive = (href: string) =>
+		href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
+</script>
+
+<nav
+	class="fixed inset-x-0 bottom-0 z-10 border-t border-gray-200 bg-white pb-[env(safe-area-inset-bottom)]"
+>
+	<ul class="mx-auto flex max-w-lg justify-around">
+		{#each tabs as tab (tab.href)}
+			<li class="flex-1">
+				<a
+					href={tab.href}
+					class="flex flex-col items-center py-2 text-xs {isActive(tab.href)
+						? 'font-semibold text-green-700'
+						: 'text-gray-500'}"
+					aria-current={isActive(tab.href) ? 'page' : undefined}
+				>
+					<span class="text-lg" aria-hidden="true">{tab.icon}</span>
+					{tab.label}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

src/routes/+layout.server.ts

@@ -0,0 +1,8 @@
+import { toPublicUser } from '$lib/domain/types';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = ({ locals }) => ({
+	user: locals.user ? toPublicUser(locals.user) : null,
+	currency: locals.app.config.currency,
+	readOnly: !locals.app.guard.canWrite
+});

src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import '../app.css';
+	import TabBar from '$lib/components/TabBar.svelte';
+	import type { LayoutProps } from './$types';
+
+	let { data, children }: LayoutProps = $props();
+</script>
+
+<svelte:head>
+	<title>Splitwise</title>
+</svelte:head>
+
+<div class="mx-auto min-h-dvh w-full max-w-lg pb-24">
+	{#if data.user && data.readOnly}
+		<div class="bg-amber-100 px-4 py-2 text-sm text-amber-900">
+			Read-only mode: another instance of the app is active. Changes are disabled for a few minutes.
+		</div>
+	{/if}
+	{@render children()}
+</div>
+
+{#if data.user}
+	<TabBar user={data.user} />
+{/if}

src/routes/login/+page.server.ts

@@ -0,0 +1,34 @@
+import { dev } from '$app/environment';
+import { createSessionToken, SESSION_COOKIE, SESSION_TTL_SECONDS } from '$lib/server/auth/session';
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async ({ request, locals, cookies, url }) => {
+		const form = await request.formData();
+		const username = String(form.get('username') ?? '').trim();
+		const password = String(form.get('password') ?? '');
+		if (!username || !password)
+			return fail(400, { error: 'Enter your username and password', username });
+		if (!locals.app.loginLimiter.allow(username.toLowerCase())) {
+			return fail(429, { error: 'Too many attempts. Wait a minute and try again.', username });
+		}
+		const user = await locals.app.users.authenticate(username, password);
+		if (!user) return fail(400, { error: 'Invalid username or password', username });
+
+		const token = createSessionToken(
+			{ uid: user.id, sv: user.sessionVersion },
+			locals.app.config.sessionSecret
+		);
+		cookies.set(SESSION_COOKIE, token, {
+			path: '/',
+			httpOnly: true,
+			sameSite: 'lax',
+			secure: !dev,
+			maxAge: SESSION_TTL_SECONDS
+		});
+
+		const next = url.searchParams.get('next');
+		redirect(303, next && next.startsWith('/') && !next.startsWith('//') ? next : '/');
+	}
+};

src/routes/login/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import FormError from '$lib/components/FormError.svelte';
+	import type { PageProps } from './$types';
+
+	let { form }: PageProps = $props();
+</script>
+
+<main class="flex min-h-dvh flex-col justify-center px-6">
+	<h1 class="mb-8 text-center text-3xl font-bold text-green-700">Splitwise</h1>
+	<form method="POST" use:enhance class="space-y-4">
+		<div>
+			<label for="username">Username</label>
+			<input
+				id="username"
+				name="username"
+				autocomplete="username"
+				autocapitalize="none"
+				required
+				value={form?.username ?? ''}
+			/>
+		</div>
+		<div>
+			<label for="password">Password</label>
+			<input id="password" name="password" type="password" autocomplete="current-password" required />
+		</div>
+		<FormError message={form?.error} />
+		<button type="submit" class="w-full rounded-lg bg-green-700 py-3 font-semibold text-white"
+			>Log in</button
+		>
+	</form>
+</main>

src/routes/logout/+server.ts

@@ -0,0 +1,7 @@
+import { SESSION_COOKIE } from '$lib/server/auth/session';
+import { redirect, type RequestHandler } from '@sveltejs/kit';
+
+export const POST: RequestHandler = ({ cookies }) => {
+	cookies.delete(SESSION_COOKIE, { path: '/' });
+	redirect(303, '/login');
+};