From 7d66a8f6fc617e56d1ddd0155be7bfa76aa5c58c Mon Sep 17 00:00:00 2001
From: Thomas Richter <git@tricnet.de>
Date: Thu, 29 Jan 2026 11:11:41 +0100
Subject: [PATCH] feat(02-03): add expand/collapse and inline editing to
 EntryCard

- Add expanded state for expand/collapse toggle
- Implement inline editing for title, content, and type
- Add 400ms debounced auto-save using fetch to ?/update
- Show 'Saving...' indicator during save
- Add delete button with confirmation dialog
- Use Svelte slide transition for smooth expand/collapse
- Fix button nesting by restructuring layout
---
 src/lib/components/EntryCard.svelte | 203 +++++++++++++++++++++++++---
 1 file changed, 181 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/EntryCard.svelte b/src/lib/components/EntryCard.svelte
index cb120d6..47b2360 100644
--- a/src/lib/components/EntryCard.svelte
+++ b/src/lib/components/EntryCard.svelte
@@ -1,26 +1,88 @@
 <script lang="ts">
 	import type { Entry } from '$lib/server/db/schema';
+	import { enhance } from '$app/forms';
+	import { slide } from 'svelte/transition';
 
 	interface Props {
 		entry: Entry;
 	}
 
 	let { entry }: Props = $props();
+
+	// Expand/collapse state
+	let expanded = $state(false);
+
+	// Edit state - initialize from entry
+	let editTitle = $state(entry.title || '');
+	let editContent = $state(entry.content);
+	let editType = $state(entry.type);
+
+	// Debounced auto-save
+	let saveTimeout: ReturnType<typeof setTimeout>;
+	let isSaving = $state(false);
+
+	async function debouncedSave() {
+		clearTimeout(saveTimeout);
+		saveTimeout = setTimeout(async () => {
+			isSaving = true;
+			const formData = new FormData();
+			formData.append('id', entry.id);
+			formData.append('title', editTitle);
+			formData.append('content', editContent);
+			formData.append('type', editType);
+
+			try {
+				await fetch('?/update', {
+					method: 'POST',
+					body: formData
+				});
+			} finally {
+				isSaving = false;
+			}
+		}, 400);
+	}
+
+	function handleInput() {
+		debouncedSave();
+	}
+
+	function toggleExpand() {
+		if (expanded) {
+			// Collapsing - reset edit state to current entry values
+			editTitle = entry.title || '';
+			editContent = entry.content;
+			editType = entry.type;
+		}
+		expanded = !expanded;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			toggleExpand();
+		}
+	}
 </script>
 
-<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3">
+<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white">
+	<!-- Collapsed view - clickable header -->
 	<div class="flex items-start gap-3">
 		{#if entry.type === 'task'}
-			<form method="POST" action="?/toggleComplete" class="flex items-center">
+			<form method="POST" action="?/toggleComplete" use:enhance>
 				<input type="hidden" name="id" value={entry.id} />
 				<button
 					type="submit"
 					class="w-6 h-6 rounded border-2 border-gray-300 flex items-center justify-center touch-target
-						   {entry.status === 'done' ? 'bg-green-500 border-green-500' : 'hover:border-gray-400'}"
+                 {entry.status === 'done' ? 'bg-green-500 border-green-500' : 'hover:border-gray-400'}"
 					aria-label={entry.status === 'done' ? 'Mark as incomplete' : 'Mark as complete'}
 				>
 					{#if entry.status === 'done'}
-						<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<svg
+							class="w-4 h-4 text-white"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
 							<path
 								stroke-linecap="round"
 								stroke-linejoin="round"
@@ -32,14 +94,19 @@
 				</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}
 
-		<div class="flex-1 min-w-0">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="flex-1 min-w-0 cursor-pointer"
+			role="button"
+			tabindex="0"
+			onclick={toggleExpand}
+			onkeydown={handleKeydown}
+		>
 			<h3
 				class="font-medium text-gray-900 text-base md:text-lg {entry.status === 'done'
 					? 'line-through text-gray-400'
@@ -47,21 +114,113 @@
 			>
 				{entry.title || 'Untitled'}
 			</h3>
-			<p
-				class="text-gray-600 text-sm md:text-base line-clamp-2 {entry.status === 'done'
-					? 'text-gray-400'
-					: ''}"
-			>
-				{entry.content}
-			</p>
+			{#if !expanded}
+				<p
+					class="text-gray-600 text-sm md:text-base line-clamp-2 {entry.status === 'done'
+						? 'text-gray-400'
+						: ''}"
+				>
+					{entry.content}
+				</p>
+			{/if}
 		</div>
 
-		<span
-			class="text-xs px-2 py-1 rounded-full {entry.type === 'task'
-				? 'bg-blue-100 text-blue-700'
-				: 'bg-purple-100 text-purple-700'}"
-		>
-			{entry.type}
-		</span>
+		<div class="flex items-center gap-2">
+			{#if isSaving}
+				<span class="text-xs text-gray-400">Saving...</span>
+			{/if}
+			<span
+				class="text-xs px-2 py-1 rounded-full {entry.type === 'task'
+					? 'bg-blue-100 text-blue-700'
+					: 'bg-purple-100 text-purple-700'}"
+			>
+				{entry.type}
+			</span>
+			<button
+				type="button"
+				onclick={toggleExpand}
+				class="p-1 hover:bg-gray-100 rounded"
+				aria-label={expanded ? 'Collapse entry' : 'Expand entry'}
+			>
+				<svg
+					class="w-5 h-5 text-gray-400 transform transition-transform {expanded
+						? 'rotate-180'
+						: ''}"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 9l-7 7-7-7"
+					/>
+				</svg>
+			</button>
+		</div>
 	</div>
+
+	<!-- Expanded view - edit fields -->
+	{#if expanded}
+		<div transition:slide={{ duration: 200 }} class="mt-4 pl-9 space-y-3">
+			<div>
+				<label for="edit-title-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
+					>Title</label
+				>
+				<input
+					id="edit-title-{entry.id}"
+					bind:value={editTitle}
+					oninput={handleInput}
+					placeholder="Add a title..."
+					class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+				/>
+			</div>
+
+			<div>
+				<label for="edit-content-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
+					>Content</label
+				>
+				<textarea
+					id="edit-content-{entry.id}"
+					bind:value={editContent}
+					oninput={handleInput}
+					rows="4"
+					class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base resize-y focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+				></textarea>
+			</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"
+						>Type</label
+					>
+					<select
+						id="edit-type-{entry.id}"
+						bind:value={editType}
+						onchange={handleInput}
+						class="px-3 py-2 border border-gray-200 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+					>
+						<option value="thought">Thought</option>
+						<option value="task">Task</option>
+					</select>
+				</div>
+
+				<form method="POST" action="?/delete" use:enhance>
+					<input type="hidden" name="id" value={entry.id} />
+					<button
+						type="submit"
+						class="px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg touch-target"
+						onclick={(e) => {
+							if (!confirm('Delete this entry?')) {
+								e.preventDefault();
+							}
+						}}
+					>
+						Delete
+					</button>
+				</form>
+			</div>
+		</div>
+	{/if}
 </article>