Added this stupid vibecoded app as a test

2026-08-06 09:58:06 +02:00
parent d9e05fb487
commit a9860f4c94
51 changed files with 10154 additions and 7 deletions
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { theme } from '$lib/stores/theme.svelte';
+	import { iconButton } from '$lib/ui/classes';
+
+	const isDark = $derived(theme.resolved === 'dark');
+	const nextLabel = $derived(isDark ? 'Switch to light theme' : 'Switch to dark theme');
+	// "Following your system" matters: it is the difference between a pinned
+	// preference and one that will change under the user later.
+	const title = $derived(
+		theme.preference === 'system'
+			? `Following your system (${theme.resolved}). ${nextLabel}.`
+			: nextLabel
+	);
+</script>
+
+<button
+	type="button"
+	onclick={() => theme.toggle()}
+	class={iconButton}
+	aria-label={nextLabel}
+	{title}
+>
+	{#if isDark}
+		<!-- Sun: clicking moves to light -->
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+			stroke-linecap="round"
+			class="size-4"
+			aria-hidden="true"
+		>
+			<circle cx="12" cy="12" r="4" />
+			<path
+				d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"
+			/>
+		</svg>
+	{:else}
+		<!-- Moon: clicking moves to dark -->
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.8"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="size-4"
+			aria-hidden="true"
+		>
+			<path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8Z" />
+		</svg>
+	{/if}
+</button>