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/routes/+page.server.ts

@@ -2,11 +2,13 @@ import type { PageServerLoad, Actions } from './$types';
 import { fail } from '@sveltejs/kit';
 import { entryRepository } from '$lib/server/db/repository';
 
-export const load: PageServerLoad = async () => {
-	const entries = entryRepository.getOrdered({ showCompleted: false });
+export const load: PageServerLoad = async ({ url }) => {
+	const showCompleted = url.searchParams.get('showCompleted') === 'true';
+	const entries = entryRepository.getOrdered({ showCompleted });
 
 	return {
-		entries
+		entries,
+		showCompleted
 	};
 };
 

src/routes/+page.svelte

@@ -1,8 +1,32 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import EntryList from '$lib/components/EntryList.svelte';
 	import QuickCapture from '$lib/components/QuickCapture.svelte';
+	import CompletedToggle from '$lib/components/CompletedToggle.svelte';
+	import { preferences } from '$lib/stores/preferences.svelte';
+	import { get } from 'svelte/store';
 
 	let { data } = $props();
+
+	// Sync URL with preference on mount (client-side only)
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const urlShowCompleted = page.url.searchParams.get('showCompleted') === 'true';
+			const prefShowCompleted = get(preferences).showCompleted;
+
+			// Only sync if different and not already matching
+			if (urlShowCompleted !== prefShowCompleted) {
+				const url = new URL(page.url);
+				if (prefShowCompleted) {
+					url.searchParams.set('showCompleted', 'true');
+				} else {
+					url.searchParams.delete('showCompleted');
+				}
+				goto(url.toString(), { replaceState: true, invalidateAll: true });
+			}
+		}
+	});
 </script>
 
 <svelte:head>
@@ -11,8 +35,9 @@
 
 <main class="min-h-screen bg-gray-50 pb-40">
 	<header class="bg-white border-b border-gray-200 sticky top-0 z-10">
-		<div class="max-w-2xl mx-auto px-4 py-4">
+		<div class="max-w-2xl mx-auto px-4 py-4 flex items-center justify-between">
 			<h1 class="text-xl font-bold text-gray-900">TaskPlaner</h1>
+			<CompletedToggle />
 		</div>
 	</header>