initial production version

src/lib/components/layout/DashboardHeader.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { signOut } from '@auth/sveltekit/client';
+
+	let { userName, userEmail }: { userName?: string | null; userEmail?: string | null } = $props();
+</script>
+
+<div class="flex items-center justify-between">
+	<div>
+		<h1 class="text-3xl font-bold">Dashboard</h1>
+		<p class="text-muted-foreground">Welcome back, {userName || userEmail}</p>
+	</div>
+	<div class="flex items-center gap-2">
+		<ThemeToggle />
+		<Button variant="outline" onclick={() => signOut({ callbackUrl: '/' })}>Sign Out</Button>
+	</div>
+</div>

src/lib/components/layout/EmptyState.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import type { Snippet } from 'svelte';
+
+	let {
+		message,
+		description,
+		actionLabel,
+		actionHref,
+		onclick,
+		children
+	}: {
+		message: string;
+		description?: string;
+		actionLabel?: string;
+		actionHref?: string;
+		onclick?: () => void;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="text-center py-8 text-muted-foreground">
+	<p class="text-base">{message}</p>
+	{#if description}
+		<p class="text-sm mt-2">{description}</p>
+	{/if}
+	{#if children}
+		<div class="mt-4">
+			{@render children()}
+		</div>
+	{:else if actionLabel}
+		<Button
+			class="mt-4"
+			onclick={() => {
+				if (onclick) {
+					onclick();
+				} else if (actionHref) {
+					window.location.href = actionHref;
+				}
+			}}
+		>
+			{actionLabel}
+		</Button>
+	{/if}
+</div>

src/lib/components/layout/Navigation.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
+	import { LayoutDashboard } from 'lucide-svelte';
+	import { languageStore } from '$lib/stores/language.svelte';
+
+	let {
+		isAuthenticated = false,
+		showDashboardLink = false
+	}: {
+		isAuthenticated?: boolean;
+		showDashboardLink?: boolean;
+	} = $props();
+
+	const t = $derived(languageStore.t);
+</script>
+
+<nav class="flex items-center gap-1 sm:gap-2 mb-6 w-full">
+	{#if isAuthenticated}
+		<Button variant="outline" size="sm" onclick={() => (window.location.href = '/dashboard')} class="px-2 sm:px-3">
+			<LayoutDashboard class="w-4 h-4" />
+			<span class="hidden sm:inline sm:ml-2">{t.nav.dashboard}</span>
+		</Button>
+	{:else}
+		<Button variant="outline" size="sm" onclick={() => (window.location.href = '/signin')} class="px-2 sm:px-3">
+			{t.auth.signIn}
+		</Button>
+	{/if}
+	<div class="ml-auto flex items-center gap-1 sm:gap-2">
+		<LanguageToggle />
+		<ThemeToggle />
+	</div>
+</nav>

src/lib/components/layout/PageContainer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children, maxWidth = '6xl' }: { children: Snippet; maxWidth?: string } = $props();
+</script>
+
+<div class="min-h-screen p-4 md:p-8">
+	<div class="max-w-{maxWidth} mx-auto space-y-6">
+		{@render children()}
+	</div>
+</div>