From a7a9aa3dcfe4b90d9b32791c8313a0019ad11289 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Tue, 13 Jan 2026 14:20:41 -1000
Subject: Implement Todoist write operations - Handlers & UI (Part 2)

Complete Todoist task creation and completion functionality:

Handlers:
- Update aggregateData to fetch and populate Projects
- Add HandleCreateTask: creates task, refreshes list, re-renders
- Add HandleCompleteTask: marks task complete, returns empty
- Both handlers pass Projects to template for dropdown

Routes:
- Register POST /tasks for task creation
- Register POST /tasks/complete for task completion

UI (todoist-tasks.html):
- Add Quick Add form with collapsible details element
- Project selector dropdown (iterates over .Projects)
- Content input field with validation
- HTMX integration: hx-post, hx-target, hx-swap
- Functional completion checkboxes on each task
- Remove disabled attribute from checkboxes
- Add todoist-task-item wrapper class for HTMX targeting
- Glassmorphism styling for form

Features:
- Create Todoist tasks with optional project assignment
- Mark tasks complete with single click (disappears)
- Real-time task list updates without page reload
- Seamless HTMX partial updates

All tests pass. Full Todoist write operations now live in UI!

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 web/templates/partials/todoist-tasks.html | 49 ++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

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

diff --git a/web/templates/partials/todoist-tasks.html b/web/templates/partials/todoist-tasks.html
index 7595ac7..25faf47 100644
--- a/web/templates/partials/todoist-tasks.html
+++ b/web/templates/partials/todoist-tasks.html
@@ -1,17 +1,58 @@
 {{define "todoist-tasks"}}
-<section class="card">
+<section class="card" id="todoist-list">
     <!-- Section Header with Brand Color -->
     <div class="flex items-center gap-3 mb-6">
         <div class="w-1 h-8 bg-todoist rounded"></div>
         <h2 class="text-2xl font-bold text-gray-900">Todoist Tasks</h2>
     </div>
 
+    <!-- Quick Add Form -->
+    {{if .Projects}}
+    <details class="mb-6" open>
+        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors mb-2">
+            + Quick Add Task
+        </summary>
+        <form hx-post="/tasks"
+              hx-target="#todoist-list"
+              hx-swap="outerHTML"
+              class="mt-3 space-y-3 bg-white/40 p-4 rounded-lg">
+
+            <input type="text"
+                   name="content"
+                   placeholder="Task content"
+                   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">
+
+            <select name="project_id"
+                    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 project (optional)...</option>
+                {{range .Projects}}
+                <option value="{{.ID}}">{{.Name}}</option>
+                {{end}}
+            </select>
+
+            <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 Task
+            </button>
+        </form>
+    </details>
+    {{end}}
+
+    <!-- Tasks List -->
     {{if .Tasks}}
     <div class="space-y-3">
         {{range .Tasks}}
-        <div class="task-item">
-            <input type="checkbox" {{if .Completed}}checked{{end}}
-                   class="mt-1 h-5 w-5 text-todoist rounded border-gray-300" disabled>
+        <div class="todoist-task-item task-item">
+            <!-- Functional Checkbox -->
+            <input type="checkbox"
+                   {{if .Completed}}checked{{end}}
+                   hx-post="/tasks/complete"
+                   hx-vals='{"task_id": "{{.ID}}"}'
+                   hx-target="closest .todoist-task-item"
+                   hx-swap="outerHTML"
+                   class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+
             <div class="flex-1">
                 <p class="font-medium text-gray-900 {{if .Completed}}line-through text-gray-500{{end}}">
                     {{.Content}}
-- 
cgit v1.2.3