From 2fee76ea41f37e3a068273c05a98b892ab29228c Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Tue, 13 Jan 2026 14:09:50 -1000
Subject: Add Trello card creation and completion UI (Phase 3 Step 3)

Implement interactive Trello card management with HTMX:

Frontend:
- Create trello-board.html partial with add card form
- Add collapsible form with list selector and card title input
- Add completion checkbox on each card
- Update trello-boards.html to use new partial
- Use HTMX for seamless partial updates (hx-post, hx-swap)

Backend:
- Add HandleCreateCard: creates card and re-renders board
- Add HandleCompleteCard: marks card as closed
- Register /cards and /cards/complete POST routes

Features:
- Add cards to any list via dropdown
- Mark cards complete with checkbox (removes from view)
- Real-time board updates without full page reload
- Glassmorphism styling for form

All tests pass. Full Trello write operations now available in UI.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 web/templates/partials/trello-board.html  | 82 +++++++++++++++++++++++++++++++
 web/templates/partials/trello-boards.html | 29 +----------
 2 files changed, 83 insertions(+), 28 deletions(-)
 create mode 100644 web/templates/partials/trello-board.html

(limited to 'web/templates')

diff --git a/web/templates/partials/trello-board.html b/web/templates/partials/trello-board.html
new file mode 100644
index 0000000..0b176cd
--- /dev/null
+++ b/web/templates/partials/trello-board.html
@@ -0,0 +1,82 @@
+{{define "trello-board"}}
+<div class="board-card">
+    <!-- Board Header -->
+    <div class="flex items-center justify-between mb-4">
+        <h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3>
+    </div>
+
+    <!-- Add Card Form (Collapsible) -->
+    {{if .Lists}}
+    <details class="mb-4">
+        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
+            + Add Card
+        </summary>
+        <form hx-post="/cards"
+              hx-target="closest .board-card"
+              hx-swap="outerHTML"
+              class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg">
+            <input type="hidden" name="board_id" value="{{.ID}}">
+
+            <select name="list_id"
+                    required
+                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                <option value="">Select list...</option>
+                {{range .Lists}}
+                <option value="{{.ID}}">{{.Name}}</option>
+                {{end}}
+            </select>
+
+            <input type="text"
+                   name="name"
+                   placeholder="Card title"
+                   required
+                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+
+            <button type="submit"
+                    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                Add Card
+            </button>
+        </form>
+    </details>
+    {{end}}
+
+    <!-- Cards List -->
+    <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
+        {{range .Cards}}
+        <div class="trello-card-item">
+            <div class="flex items-start gap-2">
+                <!-- Complete Checkbox -->
+                <input type="checkbox"
+                       hx-post="/cards/complete"
+                       hx-vals='{"card_id": "{{.ID}}"}'
+                       hx-target="closest .trello-card-item"
+                       hx-swap="outerHTML"
+                       class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+
+                <div class="flex-1">
+                    <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p>
+                    <div class="flex flex-wrap gap-2 items-center">
+                        {{if .ListName}}
+                        <span class="badge bg-gray-100 text-gray-700">
+                            {{.ListName}}
+                        </span>
+                        {{end}}
+                        {{if .DueDate}}
+                        <span class="badge bg-red-100 text-red-800">
+                            Due: {{.DueDate.Format "Jan 2"}}
+                        </span>
+                        {{end}}
+                        {{if .URL}}
+                        <a href="{{.URL}}" target="_blank"
+                           class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
+                            View →
+                        </a>
+                        {{end}}
+                    </div>
+                </div>
+            </div>
+        </div>
+        {{end}}
+    </div>
+</div>
+{{end}}
diff --git a/web/templates/partials/trello-boards.html b/web/templates/partials/trello-boards.html
index bd460cf..3d42517 100644
--- a/web/templates/partials/trello-boards.html
+++ b/web/templates/partials/trello-boards.html
@@ -11,34 +11,7 @@
     <div class="card-grid mb-6">
         {{range .Boards}}
         {{if .Cards}}
-        <div class="board-card">
-            <h3 class="font-bold text-lg text-gray-900 mb-4">{{.Name}}</h3>
-            <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
-                {{range .Cards}}
-                <div class="trello-card-item">
-                    <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p>
-                    <div class="flex flex-wrap gap-2 items-center">
-                        {{if .ListName}}
-                        <span class="badge bg-gray-100 text-gray-700">
-                            {{.ListName}}
-                        </span>
-                        {{end}}
-                        {{if .DueDate}}
-                        <span class="badge bg-red-100 text-red-800">
-                            Due: {{.DueDate.Format "Jan 2"}}
-                        </span>
-                        {{end}}
-                        {{if .URL}}
-                        <a href="{{.URL}}" target="_blank"
-                           class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
-                            View →
-                        </a>
-                        {{end}}
-                    </div>
-                </div>
-                {{end}}
-            </div>
-        </div>
+        {{template "trello-board" .}}
         {{end}}
         {{end}}
     </div>
-- 
cgit v1.2.3