From 7c3a8b024d64eedad9ecb05284237285a5aceec8 Mon Sep 17 00:00:00 2001
From: Thomas Richter <git@tricnet.de>
Date: Thu, 29 Jan 2026 11:06:51 +0100
Subject: [PATCH] feat(02-02): add EntryCard and EntryList components

- EntryCard displays entry with type indicator (checkbox/badge)
- Tasks have checkbox for toggle completion via form action
- Thoughts show purple "T" badge indicator
- Completed tasks show strikethrough styling
- EntryList renders entries with mobile compact/desktop card layout
- Type badge shows blue for task, purple for thought

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/lib/components/EntryCard.svelte | 67 +++++++++++++++++++++++++++++
 src/lib/components/EntryList.svelte | 23 ++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 src/lib/components/EntryCard.svelte
 create mode 100644 src/lib/components/EntryList.svelte

diff --git a/src/lib/components/EntryCard.svelte b/src/lib/components/EntryCard.svelte
new file mode 100644
index 0000000..cb120d6
--- /dev/null
+++ b/src/lib/components/EntryCard.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Entry } from '$lib/server/db/schema';
+
+	interface Props {
+		entry: Entry;
+	}
+
+	let { entry }: Props = $props();
+</script>
+
+<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3">
+	<div class="flex items-start gap-3">
+		{#if entry.type === 'task'}
+			<form method="POST" action="?/toggleComplete" class="flex items-center">
+				<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'}"
+					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">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{/if}
+				</button>
+			</form>
+		{:else}
+			<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">
+			<h3
+				class="font-medium text-gray-900 text-base md:text-lg {entry.status === 'done'
+					? 'line-through text-gray-400'
+					: ''}"
+			>
+				{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>
+		</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>
+</article>
diff --git a/src/lib/components/EntryList.svelte b/src/lib/components/EntryList.svelte
new file mode 100644
index 0000000..2a2cdad
--- /dev/null
+++ b/src/lib/components/EntryList.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Entry } from '$lib/server/db/schema';
+	import EntryCard from './EntryCard.svelte';
+
+	interface Props {
+		entries: Entry[];
+	}
+
+	let { entries }: Props = $props();
+</script>
+
+{#if entries.length === 0}
+	<div class="text-center py-12 text-gray-500">
+		<p class="text-lg">No entries yet</p>
+		<p class="text-sm mt-1">Use the capture bar below to add your first entry</p>
+	</div>
+{:else}
+	<div class="divide-y divide-gray-100 md:divide-y-0 md:space-y-3">
+		{#each entries as entry (entry.id)}
+			<EntryCard {entry} />
+		{/each}
+	</div>
+{/if}