feat(02-04): add swipe-to-delete gesture for mobile

- Install svelte-gestures package for touch gesture support
- Add useSwipe hook to EntryCard for left-swipe detection
- Implement delete confirmation overlay on swipe
- Add red delete background revealed during swipe
- Maintain desktop delete button in expanded view

package-lock.json

@@ -12,6 +12,7 @@
 				"better-sqlite3": "^12.6.2",
 				"drizzle-orm": "^0.45.1",
 				"nanoid": "^5.1.6",
+				"svelte-gestures": "^5.2.2",
 				"svelte-persisted-store": "^0.12.0",
 				"tailwindcss": "^4.1.18",
 				"zod": "^4.3.6"
@@ -4722,6 +4723,12 @@
 				}
 			}
 		},
+		"node_modules/svelte-gestures": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-5.2.2.tgz",
+			"integrity": "sha512-Y+chXPaSx8OsPoFppUwPk8PJzgrZ7xoDJKXeiEc7JBqyKKzXer9hlf8F9O34eFuAWB4/WQEvccACvyBplESL7A==",
+			"license": "MIT"
+		},
 		"node_modules/svelte-persisted-store": {
 			"version": "0.12.0",
 			"resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.12.0.tgz",

package.json

@@ -35,6 +35,7 @@
 		"better-sqlite3": "^12.6.2",
 		"drizzle-orm": "^0.45.1",
 		"nanoid": "^5.1.6",
+		"svelte-gestures": "^5.2.2",
 		"svelte-persisted-store": "^0.12.0",
 		"tailwindcss": "^4.1.18",
 		"zod": "^4.3.6"

src/lib/components/EntryCard.svelte

@@ -2,6 +2,7 @@
 	import type { Entry } from '$lib/server/db/schema';
 	import { enhance } from '$app/forms';
 	import { slide } from 'svelte/transition';
+	import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
 
 	interface Props {
 		entry: Entry;
@@ -21,6 +22,41 @@
 	let saveTimeout: ReturnType<typeof setTimeout>;
 	let isSaving = $state(false);
 
+	// Swipe state
+	let swipeOffset = $state(0);
+	let isConfirmingDelete = $state(false);
+
+	function handleSwipe(event: SwipeCustomEvent) {
+		const { direction } = event.detail;
+		if (direction === 'left') {
+			isConfirmingDelete = true;
+		}
+	}
+
+	// Create swipe gesture using useSwipe hook
+	const swipeGesture = useSwipe(handleSwipe, () => ({
+		timeframe: 300,
+		minSwipeDistance: 60,
+		touchAction: 'pan-y'
+	}));
+
+	function cancelDelete() {
+		isConfirmingDelete = false;
+		swipeOffset = 0;
+	}
+
+	async function confirmDelete() {
+		const formData = new FormData();
+		formData.append('id', entry.id);
+
+		await fetch('?/delete', {
+			method: 'POST',
+			body: formData
+		});
+
+		window.location.reload();
+	}
+
 	async function debouncedSave() {
 		clearTimeout(saveTimeout);
 		saveTimeout = setTimeout(async () => {
@@ -64,7 +100,30 @@
 	}
 </script>
 
-<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white">
+<div class="relative overflow-hidden">
+	<!-- Delete background revealed during swipe -->
+	<div
+		class="absolute inset-y-0 right-0 w-24 bg-red-500 flex items-center justify-center"
+		aria-hidden="true"
+	>
+		<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+			/>
+		</svg>
+	</div>
+
+	<!-- Swipeable entry card -->
+	<article
+		{...swipeGesture}
+		style="transform: translateX({swipeOffset}px); transition: {swipeOffset === 0
+			? 'transform 0.2s'
+			: 'none'}"
+		class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white relative"
+	>
 		<!-- Collapsed view - clickable header -->
 		<div class="flex items-start gap-3">
 			{#if entry.type === 'task'}
@@ -94,7 +153,9 @@
 					</button>
 				</form>
 			{:else}
-			<span class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
+				<span
+					class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0"
+				>
 					<span class="text-purple-600 text-xs font-medium">T</span>
 				</span>
 			{/if}
@@ -224,3 +285,25 @@
 			</div>
 		{/if}
 	</article>
+
+	<!-- Delete confirmation overlay -->
+	{#if isConfirmingDelete}
+		<div
+			class="absolute inset-0 bg-white/95 flex items-center justify-center gap-4 z-10"
+			transition:slide={{ duration: 150 }}
+		>
+			<button
+				onclick={cancelDelete}
+				class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg touch-target min-w-[44px] min-h-[44px]"
+			>
+				Cancel
+			</button>
+			<button
+				onclick={confirmDelete}
+				class="px-4 py-2 bg-red-600 text-white rounded-lg touch-target min-w-[44px] min-h-[44px]"
+			>
+				Delete
+			</button>
+		</div>
+	{/if}
+</div>