feat(02-03): add CompletedToggle to show/hide completed tasks

- Create CompletedToggle component with checkbox UI
- Add showCompleted URL param to +page.server.ts load function
- Update +page.svelte to sync preferences with URL
- Toggle state persists in localStorage via preferences store
- Clicking toggle updates URL and invalidates data for server filter

src/lib/components/CompletedToggle.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { preferences } from '$lib/stores/preferences.svelte';
+	import { get } from 'svelte/store';
+
+	let showCompleted = $state(false);
+
+	// Initialize and sync with URL on mount
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			showCompleted = get(preferences).showCompleted;
+		}
+	});
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		showCompleted = target.checked;
+
+		// Update preference store
+		preferences.update((p) => ({ ...p, showCompleted }));
+
+		// Update URL to refresh data from server
+		const url = new URL(page.url);
+		if (showCompleted) {
+			url.searchParams.set('showCompleted', 'true');
+		} else {
+			url.searchParams.delete('showCompleted');
+		}
+		goto(url.toString(), { invalidateAll: true });
+	}
+</script>
+
+<label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer select-none">
+	<input
+		type="checkbox"
+		checked={showCompleted}
+		onchange={handleChange}
+		class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+	/>
+	Show completed
+</label>