feat(03-04): integrate images into EntryCard

- Show image count indicator in collapsed entry view
- Add horizontal scrolling gallery in expanded view
- Edit mode reveals delete buttons on images
- Add ImageUpload and Camera button for adding images
- CameraCapture modal for mobile photo capture
- Updated EntryList to pass entries with images

src/lib/components/EntryCard.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { Entry } from '$lib/server/db/schema';
+	import type { Entry, Image } from '$lib/server/db/schema';
 	import { enhance } from '$app/forms';
 	import { invalidateAll } from '$app/navigation';
 	import { slide } from 'svelte/transition';
+	import ImageGallery from './ImageGallery.svelte';
+	import ImageUpload from './ImageUpload.svelte';
+	import CameraCapture from './CameraCapture.svelte';
+
+	interface EntryWithImages extends Entry {
+		images: Image[];
+	}
 
 	interface Props {
-		entry: Entry;
+		entry: EntryWithImages;
 	}
 
 	let { entry }: Props = $props();
@@ -13,6 +20,10 @@
 	// Expand/collapse state
 	let expanded = $state(false);
 
+	// Image management state
+	let showCamera = $state(false);
+	let editImagesMode = $state(false);
+
 	// Edit state - use $derived to stay in sync with entry prop
 	let editTitle = $state(entry.title || '');
 	let editContent = $state(entry.content);
@@ -123,6 +134,27 @@
 			toggleExpand();
 		}
 	}
+
+	async function handleDeleteImage(imageId: string) {
+		const formData = new FormData();
+		formData.append('imageId', imageId);
+
+		await fetch('?/deleteImage', {
+			method: 'POST',
+			body: formData
+		});
+
+		await invalidateAll();
+	}
+
+	function handleUploadComplete() {
+		// invalidateAll is called by ImageUpload, so nothing extra needed here
+	}
+
+	function handleCameraCapture() {
+		showCamera = false;
+		// invalidateAll is called by CameraCapture
+	}
 </script>
 
 <div class="relative overflow-hidden">
@@ -217,6 +249,22 @@
 				{#if isSaving}
 					<span class="text-xs text-gray-400">Saving...</span>
 				{/if}
+				{#if entry.images?.length > 0 && !expanded}
+					<span
+						class="flex items-center gap-1 text-xs text-gray-500"
+						aria-label="{entry.images.length} image{entry.images.length > 1 ? 's' : ''}"
+					>
+						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+						{entry.images.length}
+					</span>
+				{/if}
 				<span
 					class="text-xs px-2 py-1 rounded-full {entry.type === 'task'
 						? 'bg-blue-100 text-blue-700'
@@ -278,6 +326,59 @@
 					></textarea>
 				</div>
 
+				<!-- Images section -->
+				{#if entry.images?.length > 0}
+					<div>
+						<div class="flex items-center justify-between mb-2">
+							<label class="text-sm font-medium text-gray-700">Images</label>
+							<button
+								type="button"
+								onclick={() => (editImagesMode = !editImagesMode)}
+								class="text-sm text-blue-600 hover:text-blue-700"
+							>
+								{editImagesMode ? 'Done' : 'Edit'}
+							</button>
+						</div>
+						<ImageGallery
+							images={entry.images}
+							entryId={entry.id}
+							editMode={editImagesMode}
+							onDelete={handleDeleteImage}
+						/>
+					</div>
+				{/if}
+
+				<!-- Add image section -->
+				<div>
+					<label class="text-sm font-medium text-gray-700 mb-2 block">Add Image</label>
+					<div class="flex gap-2 items-start">
+						<div class="flex-1">
+							<ImageUpload entryId={entry.id} onUploadComplete={handleUploadComplete} />
+						</div>
+						<button
+							type="button"
+							onclick={() => (showCamera = true)}
+							class="px-4 py-2 border border-gray-300 rounded-lg flex items-center gap-2 hover:bg-gray-50 transition-colors"
+						>
+							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+								/>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+								/>
+							</svg>
+							Camera
+						</button>
+					</div>
+				</div>
+
 				<div class="flex items-center justify-between">
 					<div>
 						<label for="edit-type-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
@@ -334,3 +435,11 @@
 		</div>
 	{/if}
 </div>
+
+{#if showCamera}
+	<CameraCapture
+		entryId={entry.id}
+		onClose={() => (showCamera = false)}
+		onCapture={handleCameraCapture}
+	/>
+{/if}

src/lib/components/EntryList.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-	import type { Entry } from '$lib/server/db/schema';
+	import type { Entry, Image } from '$lib/server/db/schema';
 	import EntryCard from './EntryCard.svelte';
 
+	interface EntryWithImages extends Entry {
+		images: Image[];
+	}
+
 	interface Props {
-		entries: Entry[];
+		entries: EntryWithImages[];
 	}
 
 	let { entries }: Props = $props();