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-boards.html | 29 +----------------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

(limited to 'web/templates/partials/trello-boards.html')

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