From c45ba1d0c27dbf70aeffec2c8cd2838d51e5a901 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 19:59:55 +0200
Subject: [PATCH] feat(ST-509): add description textarea to Todo create and
 edit cards

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/(app)/todos/page.tsx       |  1 +
 components/todos/todo-list.tsx | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/app/(app)/todos/page.tsx b/app/(app)/todos/page.tsx
index b2c6fd3..27f07f4 100644
--- a/app/(app)/todos/page.tsx
+++ b/app/(app)/todos/page.tsx
@@ -29,6 +29,7 @@ export default async function TodosPage() {
         todos={todos.map(t => ({
           id: t.id,
           title: t.title,
+          description: t.description ?? null,
           done: t.done,
           created_at: t.created_at.toISOString(),
           product_id: t.product_id ?? null,
diff --git a/components/todos/todo-list.tsx b/components/todos/todo-list.tsx
index 2eb7497..40f2af3 100644
--- a/components/todos/todo-list.tsx
+++ b/components/todos/todo-list.tsx
@@ -17,6 +17,7 @@ import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import {
@@ -30,6 +31,7 @@ import {
 interface Todo {
   id: string
   title: string
+  description: string | null
   done: boolean
   created_at: string
   product_id: string | null
@@ -292,6 +294,13 @@ function TodoCard({
               autoComplete="off"
             />
           </div>
+          <Textarea
+            name="description"
+            placeholder="Beschrijving (optioneel, max 2000 tekens)…"
+            disabled={isDemo}
+            maxLength={2000}
+            rows={4}
+          />
           {typeof createState?.error === 'string' && (
             <p className="text-xs text-error">{createState.error}</p>
           )}
@@ -331,6 +340,14 @@ function TodoCard({
             autoComplete="off"
           />
         </div>
+        <Textarea
+          name="description"
+          defaultValue={activeTodo.description ?? ''}
+          placeholder="Beschrijving (optioneel, max 2000 tekens)…"
+          disabled={isDemo}
+          maxLength={2000}
+          rows={4}
+        />
         <label className="flex items-center gap-2 text-sm cursor-pointer w-fit select-none">
           <input
             type="checkbox"