From 8dbb6f43577b8a86e94ef7aaee196f9743356643 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 18 Jan 2026 15:24:58 -1000
Subject: Implement unified task completion with cache sync (Phase 3 Step 7)

Add checkbox UI to Tasks tab for completing Todoist tasks and archiving
Trello cards. Fix cache synchronization so completed items stay gone
after page reload by deleting them from SQLite cache after API success.

- Add HandleCompleteAtom handler routing to Todoist/Trello APIs
- Add DeleteTask/DeleteCard store methods for cache removal
- Add htmx.process() calls after innerHTML updates in app.js
- Add comprehensive tests for completion and cache behavior

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/partials/tasks-tab.html | 41 +++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 14 deletions(-)

(limited to 'web/templates/partials/tasks-tab.html')

diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index 43afa7d..9379e5c 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -10,12 +10,33 @@
         {{if .Atoms}}
         <div class="space-y-4">
             {{range .Atoms}}
-            <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}}">
-                <div class="flex items-start justify-between">
+            <div class="task-item bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}}">
+                <div class="flex items-start gap-4">
+
+                    <!-- Checkbox -->
+                    <div class="pt-1">
+                        <input type="checkbox"
+                               class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
+                               hx-post="/complete-atom"
+                               hx-trigger="change"
+                               hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
+                               hx-target="closest .task-item"
+                               hx-swap="outerHTML">
+                    </div>
+
                     <div class="flex-1">
-                        <div class="flex items-center gap-3 mb-2">
-                            <span class="text-2xl">{{.SourceIcon}}</span>
-                            <h3 class="text-lg font-semibold text-gray-900">{{.Title}}</h3>
+                        <div class="flex items-center justify-between mb-2">
+                            <div class="flex items-center gap-3">
+                                <span class="text-2xl">{{.SourceIcon}}</span>
+                                <h3 class="text-lg font-semibold text-gray-900">{{.Title}}</h3>
+                            </div>
+                            {{if .URL}}
+                            <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 transition-colors">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                </svg>
+                            </a>
+                            {{end}}
                         </div>
 
                         {{if .Description}}
@@ -49,14 +70,6 @@
                             {{end}}
                         </div>
                     </div>
-
-                    {{if .URL}}
-                    <a href="{{.URL}}" target="_blank" class="ml-4 text-primary-600 hover:text-primary-800 transition-colors">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-                        </svg>
-                    </a>
-                    {{end}}
                 </div>
             </div>
             {{end}}
@@ -68,4 +81,4 @@
         {{end}}
     </section>
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
-- 
cgit v1.2.3