add: internationalization translation to danish

src/routes/+page.svelte

@@ -5,12 +5,16 @@
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
 	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
 	import { goto } from '$app/navigation';
 	import ColorPicker from '$lib/components/ui/ColorPicker.svelte';
 	import type { PageData } from './$types';
+	import { languageStore } from '$lib/stores/language.svelte';
 
 	let { data }: { data: PageData } = $props();
 
+	const t = $derived(languageStore.t);
+
 	let title = $state('');
 	let description = $state('');
 	let color = $state<string | null>(null);
@@ -44,17 +48,18 @@
 		<CardHeader>
 			<div class="flex items-center justify-between">
 				<div>
-					<CardTitle class="text-3xl">Create Your Wishlist</CardTitle>
+					<CardTitle class="text-3xl">{t.wishlist.createTitle}</CardTitle>
 					<CardDescription>
-						Create a wishlist and share it with friends and family
+						{t.wishlist.createDescription}
 					</CardDescription>
 				</div>
-				<div class="flex items-center gap-2">
+				<div class="flex items-center gap-1 sm:gap-2">
+					<LanguageToggle />
 					<ThemeToggle />
 					{#if data.session?.user}
-						<Button variant="outline" onclick={() => goto('/dashboard')}>Dashboard</Button>
+						<Button variant="outline" onclick={() => goto('/dashboard')}>{t.nav.dashboard}</Button>
 					{:else}
-						<Button variant="outline" onclick={() => goto('/signin')}>Sign In</Button>
+						<Button variant="outline" onclick={() => goto('/signin')}>{t.auth.signIn}</Button>
 					{/if}
 				</div>
 			</div>
@@ -62,31 +67,31 @@
 		<CardContent>
 			<form onsubmit={(e) => { e.preventDefault(); createWishlist(); }} class="space-y-4">
 				<div class="space-y-2">
-					<Label for="title">Wishlist Title</Label>
+					<Label for="title">{t.form.wishlistTitle}</Label>
 					<Input
 						id="title"
 						bind:value={title}
-						placeholder="My Birthday Wishlist"
+						placeholder={t.form.wishlistTitlePlaceholder}
 						required
 					/>
 				</div>
 				<div class="space-y-2">
-					<Label for="description">Description (optional)</Label>
+					<Label for="description">{t.form.descriptionOptional}</Label>
 					<Textarea
 						id="description"
 						bind:value={description}
-						placeholder="Add some context for your wishlist..."
+						placeholder={t.form.descriptionPlaceholder}
 						rows={3}
 					/>
 				</div>
 				<div class="space-y-2">
 					<div class="flex items-center justify-between">
-						<Label for="color">Wishlist Color (optional)</Label>
+						<Label for="color">{t.form.wishlistColor}</Label>
 						<ColorPicker bind:color={color} size="sm" />
 					</div>
 				</div>
 				<Button type="submit" class="w-full" disabled={isCreating || !title.trim()}>
-					{isCreating ? 'Creating...' : 'Create Wishlist'}
+					{isCreating ? t.wishlist.creating : t.wishlist.createWishlist}
 				</Button>
 			</form>
 		</CardContent>

src/routes/signin/+page.svelte

@@ -4,11 +4,15 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
 	import type { PageData } from './$types';
 	import { signIn } from '@auth/sveltekit/client';
+	import { languageStore } from '$lib/stores/language.svelte';
 
 	let { data }: { data: PageData } = $props();
 
+	const t = $derived(languageStore.t);
+
 	let isSubmitting = $state(false);
 
 	async function handleSubmit(e: SubmitEvent) {
@@ -34,13 +38,14 @@
 </script>
 
 <div class="min-h-screen flex items-center justify-center p-4">
-	<div class="absolute top-4 right-4">
+	<div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
+		<LanguageToggle />
 		<ThemeToggle />
 	</div>
 	<Card class="w-full max-w-md">
 		<CardHeader>
-			<CardTitle class="text-2xl">Welcome Back</CardTitle>
-			<CardDescription>Sign in to your account</CardDescription>
+			<CardTitle class="text-2xl">{t.auth.welcomeBack}</CardTitle>
+			<CardDescription>{t.auth.signInPrompt}</CardDescription>
 		</CardHeader>
 		<CardContent class="space-y-4">
 			{#if data.registered}
@@ -57,17 +62,17 @@
 
 			<form onsubmit={handleSubmit} class="space-y-4">
 				<div class="space-y-2">
-					<Label for="username">Username</Label>
+					<Label for="username">{t.form.username}</Label>
 					<Input id="username" name="username" type="text" required />
 				</div>
 
 				<div class="space-y-2">
-					<Label for="password">Password</Label>
+					<Label for="password">{t.form.password}</Label>
 					<Input id="password" name="password" type="password" required />
 				</div>
 
 				<Button type="submit" class="w-full" disabled={isSubmitting}>
-					{isSubmitting ? 'Signing in...' : 'Sign In'}
+					{isSubmitting ? t.auth.signingIn : t.auth.signIn}
 				</Button>
 			</form>
 
@@ -77,7 +82,7 @@
 						<span class="w-full border-t"></span>
 					</div>
 					<div class="relative flex justify-center text-xs uppercase">
-						<span class="bg-card px-2 text-muted-foreground">Or continue with</span>
+						<span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
 					</div>
 				</div>
 
@@ -88,14 +93,14 @@
 						class="w-full"
 						onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
 					>
-						Sign in with {provider.name}
+						{t.auth.signIn} with {provider.name}
 					</Button>
 				{/each}
 			{/if}
 
 			<div class="text-center text-sm text-muted-foreground">
-				Don't have an account?
-				<a href="/signup" class="text-primary hover:underline">Sign up</a>
+				{t.auth.dontHaveAccount}
+				<a href="/signup" class="text-primary hover:underline">{t.auth.signUp}</a>
 			</div>
 		</CardContent>
 	</Card>

src/routes/signup/+page.svelte

@@ -4,20 +4,25 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
+	import { LanguageToggle } from '$lib/components/ui/language-toggle';
 	import type { ActionData, PageData } from './$types';
 	import { signIn } from '@auth/sveltekit/client';
+	import { languageStore } from '$lib/stores/language.svelte';
 
 	let { form, data }: { form: ActionData; data: PageData } = $props();
+
+	const t = $derived(languageStore.t);
 </script>
 
 <div class="min-h-screen flex items-center justify-center p-4">
-	<div class="absolute top-4 right-4">
+	<div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
+		<LanguageToggle />
 		<ThemeToggle />
 	</div>
 	<Card class="w-full max-w-md">
 		<CardHeader>
-			<CardTitle class="text-2xl">Create an Account</CardTitle>
-			<CardDescription>Sign up to manage your wishlists</CardDescription>
+			<CardTitle class="text-2xl">{t.auth.createAccount}</CardTitle>
+			<CardDescription>{t.auth.signUpPrompt}</CardDescription>
 		</CardHeader>
 		<CardContent class="space-y-4">
 			{#if form?.error}
@@ -28,26 +33,26 @@
 
 			<form method="POST" class="space-y-4">
 				<div class="space-y-2">
-					<Label for="name">Name</Label>
+					<Label for="name">{t.form.name}</Label>
 					<Input id="name" name="name" type="text" required value={form?.name || ''} />
 				</div>
 
 				<div class="space-y-2">
-					<Label for="username">Username</Label>
+					<Label for="username">{t.form.username}</Label>
 					<Input id="username" name="username" type="text" required value={form?.username || ''} />
 				</div>
 
 				<div class="space-y-2">
-					<Label for="password">Password</Label>
+					<Label for="password">{t.form.password}</Label>
 					<Input id="password" name="password" type="password" required minlength={8} />
 				</div>
 
 				<div class="space-y-2">
-					<Label for="confirmPassword">Confirm Password</Label>
+					<Label for="confirmPassword">{t.form.confirmPassword}</Label>
 					<Input id="confirmPassword" name="confirmPassword" type="password" required minlength={8} />
 				</div>
 
-				<Button type="submit" class="w-full">Sign Up</Button>
+				<Button type="submit" class="w-full">{t.auth.signUp}</Button>
 			</form>
 
 			{#if data.oauthProviders.length > 0}
@@ -56,7 +61,7 @@
 						<span class="w-full border-t"></span>
 					</div>
 					<div class="relative flex justify-center text-xs uppercase">
-						<span class="bg-card px-2 text-muted-foreground">Or continue with</span>
+						<span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
 					</div>
 				</div>
 
@@ -67,14 +72,14 @@
 						class="w-full"
 						onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
 					>
-						Sign up with {provider.name}
+						{t.auth.signUp} with {provider.name}
 					</Button>
 				{/each}
 			{/if}
 
 			<div class="text-center text-sm text-muted-foreground">
-				Already have an account?
-				<a href="/signin" class="text-primary hover:underline">Sign in</a>
+				{t.auth.alreadyHaveAccount}
+				<a href="/signin" class="text-primary hover:underline">{t.auth.signIn}</a>
 			</div>
 		</CardContent>
 	</Card>

src/routes/wishlist/[token]/edit/+page.svelte

@@ -13,9 +13,12 @@
 	import { Button } from "$lib/components/ui/button";
 	import { Search, Lock, LockOpen } from "lucide-svelte";
 	import { enhance } from "$app/forms";
+	import { languageStore } from '$lib/stores/language.svelte';
 
 	let { data }: { data: PageData } = $props();
 
+	const t = $derived(languageStore.t);
+
 	let showAddForm = $state(false);
 	let rearranging = $state(false);
 	let editingItem = $state<Item | null>(null);
@@ -214,10 +217,10 @@
 					variant="outline"
 					class="w-full md:w-auto opacity-60 cursor-not-allowed"
 				>
-					You Own This Wishlist
+					{t.wishlist.youOwnThis}
 				</Button>
 				<p class="text-sm text-muted-foreground mt-2">
-					This wishlist is already in your dashboard as the owner.
+					{t.wishlist.alreadyInDashboard}
 				</p>
 			{:else}
 				<form
@@ -275,7 +278,7 @@
 			<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
 			<Input
 				type="search"
-				placeholder="Search items..."
+				placeholder={t.dashboard.searchPlaceholder}
 				bind:value={searchQuery}
 				class="pl-9"
 			/>
@@ -298,10 +301,10 @@
 			>
 				{#if rearranging}
 					<Lock class="mr-2 h-4 w-4" />
-					Lock Editing
+					{t.wishlist.lockEditing}
 				{:else}
 					<LockOpen class="mr-2 h-4 w-4" />
-					Unlock for Reordering & Deletion
+					{t.wishlist.unlockEditing}
 				{/if}
 			</Button>
 
@@ -311,9 +314,7 @@
 					action="?/deleteWishlist"
 					use:enhance={({ cancel }) => {
 						if (
-							!confirm(
-								"Are you sure you want to delete this wishlist? This action cannot be undone.",
-							)
+							!confirm(t.wishlist.deleteConfirm)
 						) {
 							cancel();
 							return;
@@ -330,7 +331,7 @@
 						variant="destructive"
 						class="w-full md:w-auto"
 					>
-						Delete Wishlist
+						{t.wishlist.deleteWishlist}
 					</Button>
 				</form>
 			{/if}