Phase 4: Rich card features — labels, checklists, comments, attachments, categories

Add full CRUD + UI for all card sub-resources (tags/labels, assignees, checklists
with items, comments with markdown, file attachments). Restructure CardModal into
a two-column layout with lazy-loaded data. Upgrade card thumbnails with named label
pills, urgency-colored due date badges, checklist progress indicators, and SVG icons.
Add board categories with filtering on the listing page. Include markdown rendering
with DOMPurify sanitization and .prose CSS styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/CommentList.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { renderMarkdown, initDOMPurify } from '$lib/utils/markdown.js';
+	import { formatDistanceToNow } from 'date-fns';
+
+	type Comment = {
+		id: string;
+		content: string;
+		createdAt: string;
+		updatedAt: string;
+		userId: string;
+		user: { id: string; name: string; avatarUrl: string | null };
+	};
+
+	type Props = {
+		cardId: string;
+		boardId: string;
+		columnId: string | undefined;
+		comments: Comment[];
+		currentUserId: string;
+		canEdit: boolean;
+	};
+
+	let { cardId, boardId, columnId, comments = [], currentUserId, canEdit }: Props = $props();
+
+	let localComments = $state<Comment[]>(comments);
+	let newContent = $state('');
+	let submitting = $state(false);
+	let editingId = $state<string | null>(null);
+	let editContent = $state('');
+	let ready = $state(false);
+
+	onMount(async () => {
+		await initDOMPurify();
+		ready = true;
+	});
+
+	$effect(() => {
+		localComments = comments;
+	});
+
+	const basePath = $derived(`/api/boards/${boardId}/columns/${columnId}/cards/${cardId}/comments`);
+
+	async function addComment() {
+		if (!newContent.trim()) return;
+		submitting = true;
+		const res = await fetch(basePath, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ content: newContent.trim() })
+		});
+		if (res.ok) {
+			const data = await res.json();
+			localComments = [data.comment, ...localComments];
+			newContent = '';
+		}
+		submitting = false;
+	}
+
+	async function updateComment(commentId: string) {
+		if (!editContent.trim()) return;
+		const res = await fetch(`${basePath}/${commentId}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ content: editContent.trim() })
+		});
+		if (res.ok) {
+			const data = await res.json();
+			localComments = localComments.map((c) => (c.id === commentId ? data.comment : c));
+			editingId = null;
+		}
+	}
+
+	async function deleteComment(commentId: string) {
+		const res = await fetch(`${basePath}/${commentId}`, { method: 'DELETE' });
+		if (res.ok) {
+			localComments = localComments.filter((c) => c.id !== commentId);
+		}
+	}
+
+	function startEdit(comment: Comment) {
+		editingId = comment.id;
+		editContent = comment.content;
+	}
+</script>
+
+<div>
+	<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Comments</h3>
+
+	<!-- Add comment -->
+	{#if canEdit}
+		<div class="mb-4">
+			<textarea
+				bind:value={newContent}
+				rows="3"
+				placeholder="Write a comment... (Markdown supported)"
+				class="w-full rounded-lg border border-gray-300 p-3 text-sm resize-y focus:border-[var(--color-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
+			></textarea>
+			<div class="flex justify-end mt-1">
+				<button
+					onclick={addComment}
+					disabled={submitting || !newContent.trim()}
+					class="rounded bg-[var(--color-primary)] px-3 py-1.5 text-sm text-white hover:bg-[var(--color-primary-hover)] transition disabled:opacity-50"
+				>
+					{submitting ? 'Posting...' : 'Comment'}
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Comment list -->
+	<div class="space-y-3">
+		{#each localComments as comment}
+			<div class="flex gap-2">
+				<div class="w-7 h-7 rounded-full bg-[var(--color-primary)] text-white text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
+					{comment.user.name[0].toUpperCase()}
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="flex items-center gap-2 mb-0.5">
+						<span class="text-sm font-medium text-gray-800">{comment.user.name}</span>
+						<span class="text-xs text-gray-400">
+							{formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
+						</span>
+					</div>
+					{#if editingId === comment.id}
+						<div>
+							<textarea
+								bind:value={editContent}
+								rows="3"
+								class="w-full rounded border border-gray-300 p-2 text-sm resize-y focus:border-[var(--color-primary)] focus:outline-none"
+							></textarea>
+							<div class="flex gap-2 mt-1">
+								<button
+									onclick={() => updateComment(comment.id)}
+									class="rounded bg-[var(--color-primary)] px-2 py-1 text-xs text-white"
+								>
+									Save
+								</button>
+								<button
+									onclick={() => (editingId = null)}
+									class="text-xs text-gray-500 hover:text-gray-700"
+								>
+									Cancel
+								</button>
+							</div>
+						</div>
+					{:else}
+						<div class="prose text-sm text-gray-700">
+							{#if ready}
+								{@html renderMarkdown(comment.content)}
+							{:else}
+								<p class="whitespace-pre-wrap">{comment.content}</p>
+							{/if}
+						</div>
+						<div class="flex gap-2 mt-1">
+							{#if comment.userId === currentUserId}
+								<button
+									onclick={() => startEdit(comment)}
+									class="text-xs text-gray-400 hover:text-gray-600"
+								>
+									Edit
+								</button>
+							{/if}
+							{#if comment.userId === currentUserId || canEdit}
+								<button
+									onclick={() => deleteComment(comment.id)}
+									class="text-xs text-gray-400 hover:text-red-500"
+								>
+									Delete
+								</button>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	{#if localComments.length === 0}
+		<p class="text-xs text-gray-400 italic">No comments yet</p>
+	{/if}
+</div>