Initial release 0.1.0

src/lib/components/NavIcon.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let { name }: { name: string } = $props();
+</script>
+
+<svg viewBox="0 0 24 24" aria-hidden="true">
+	{#if name === 'inbox'}
+		<path d="M4 5.5h16v13H4zM4 14h4l1.5 2h5l1.5-2h4" />
+	{:else if name === 'library'}
+		<path d="M5 4.5h4v15H5zM10.5 4.5h4v15h-4zM16 5.5l3-1 3.5 14-3 1z" />
+	{:else if name === 'shows'}
+		<path d="M4 6.5h16v13H4zM8 3.5v6M16 3.5v6M4 10h16" />
+	{:else if name === 'archive'}
+		<path d="M4 7h16v13H4zM3 4h18v4H3zM9 12h6" />
+	{:else if name === 'settings'}
+		<circle cx="12" cy="12" r="3" />
+		<path
+			d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"
+		/>
+	{/if}
+</svg>
+
+<style>
+	svg {
+		width: 1.25rem;
+		height: 1.25rem;
+		fill: none;
+		stroke: currentColor;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		stroke-width: 1.7;
+	}
+</style>

src/lib/components/PreviewNotice.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	let { area }: { area: string } = $props();
+</script>
+
+<aside class="preview-notice" aria-label="Hinweis zur Gestaltungsvorschau">
+	<span class="preview-dot" aria-hidden="true"></span>
+	<div>
+		<strong>Gestaltungsvorschau: {area}</strong>
+		<p>
+			In Etappe 1 schreibgeschützt. Die gezeigten Inhalte stammen aus der lokalen SQLite-Datenbank.
+		</p>
+	</div>
+</aside>

src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type Preference = 'system' | 'light' | 'dark';
+	const preferences: Preference[] = ['system', 'light', 'dark'];
+	const labels: Record<Preference, string> = {
+		system: 'System',
+		light: 'Hell',
+		dark: 'Dunkel'
+	};
+	let preference = $state<Preference>('system');
+
+	function apply(next: Preference) {
+		preference = next;
+		const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		document.documentElement.dataset.theme = next === 'system' ? (dark ? 'dark' : 'light') : next;
+		document.documentElement.dataset.themePreference = next;
+		localStorage.setItem('sendewerk-theme', next);
+	}
+
+	function cycle() {
+		const index = preferences.indexOf(preference);
+		apply(preferences[(index + 1) % preferences.length]);
+	}
+
+	onMount(() => {
+		const stored = localStorage.getItem('sendewerk-theme');
+		preference = preferences.includes(stored as Preference) ? (stored as Preference) : 'system';
+		apply(preference);
+		const media = window.matchMedia('(prefers-color-scheme: dark)');
+		const followSystem = () => {
+			if (preference === 'system') apply('system');
+		};
+		media.addEventListener('change', followSystem);
+		return () => media.removeEventListener('change', followSystem);
+	});
+</script>
+
+<button
+	class="theme-toggle"
+	type="button"
+	onclick={cycle}
+	aria-label={`Darstellung: ${labels[preference]}`}
+>
+	<span class="theme-symbol" aria-hidden="true">
+		{preference === 'system' ? '◐' : preference === 'light' ? '○' : '●'}
+	</span>
+	<span>{labels[preference]}</span>
+</button>