From dedda31d064ddcb4f857f2db851c5a8c1e19deba Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 25 Jan 2026 17:05:49 -1000
Subject: Implement architectural refactors for feature requests #28, #30, #31,
 #33-38

Phase 1: Bugs as First-Class Atoms (#28)
- Add resolved_at column to bugs table (migration 007)
- Add GetUnresolvedBugs(), ResolveBug(), UnresolveBug() store methods
- Include bugs in Tasks tab via BugToAtom() with completion toggle
- Add unit tests for bug resolution

Phase 2: Timeline as Default + Enhancements (#35, #37)
- Change default tab from tasks to timeline
- Add IsCompleted, DaySection, Source fields to TimelineItem
- Group timeline items by today/tomorrow/later sections
- Add completion checkboxes for tasks/cards, grey completed items
- Collapse tomorrow/later sections by default

Phase 3: Shopping Quick-Add (#33)
- Add user_shopping_items table (migration 008)
- Add SaveUserShoppingItem(), GetUserShoppingItems(), ToggleUserShoppingItem()
- Add HandleShoppingQuickAdd() and HandleShoppingToggle() handlers
- Add quick-add form to shopping tab

Phase 4: Mobile Swipe Navigation (#38)
- Add touch event handlers for swipe left/right tab switching
- 50px threshold triggers tab change

Phase 5: Consistent Background Opacity (#30)
- Add CSS variables for panel/card/input/modal backgrounds
- Update templates to use consistent opacity classes

Phase 6: Tab Reorganization (#37)
- Reorganize tabs: Timeline, Shopping, Conditions as main tabs
- Move Tasks, Planning, Meals under Details dropdown

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/partials/shopping-tab.html |  32 +++++-
 web/templates/partials/tasks-tab.html    |   4 +-
 web/templates/partials/timeline-tab.html | 162 ++++++++++++++++++++-----------
 3 files changed, 134 insertions(+), 64 deletions(-)

(limited to 'web/templates/partials')

diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 19c570f..1f589e5 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -4,25 +4,47 @@
      hx-trigger="refresh-tasks from:body"
      hx-target="#tab-content"
      hx-swap="innerHTML">
+
+    <!-- Quick Add Form -->
+    <form hx-post="/shopping/add"
+          hx-target="#tab-content"
+          hx-swap="innerHTML"
+          class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
+        <div class="flex gap-2">
+            <input type="text" name="name" placeholder="Add item..."
+                   class="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm"
+                   required>
+            <select name="store" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30">
+                <option value="Quick Add">Quick Add</option>
+                {{range .Stores}}
+                <option value="{{.Name}}">{{.Name}}</option>
+                {{end}}
+            </select>
+            <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                Add
+            </button>
+        </div>
+    </form>
+
     {{if .Stores}}
     {{range .Stores}}
-    <section class="bg-black/40 backdrop-blur-sm rounded-xl p-4 sm:p-5">
+    <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
         <h2 class="text-xl font-medium mb-4 text-white">{{.Name}}</h2>
         {{range .Categories}}
         <div class="mb-4 last:mb-0">
             {{if .Name}}<h3 class="text-sm text-white/60 mb-2 uppercase tracking-wide">{{.Name}}</h3>{{end}}
             <ul class="space-y-2">
                 {{range .Items}}
-                <li class="flex items-center gap-3 p-3 bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}">
+                <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}">
                     <input type="checkbox" {{if .Checked}}checked{{end}}
                            hx-post="/shopping/toggle"
-                           hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}}}'
+                           hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}},"name":"{{.Name}}"}'
                            hx-target="closest li"
                            hx-swap="outerHTML"
                            class="h-5 w-5 rounded bg-black/40 border-white/30 text-green-500 focus:ring-white/30 cursor-pointer flex-shrink-0">
                     <span class="flex-1 {{if .Checked}}line-through text-white/40{{else}}text-white{{end}}">{{.Name}}</span>
                     {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
-                    <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else}}bg-green-900/50 text-green-300{{end}}">
+                    <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}">
                         {{.Source}}
                     </span>
                 </li>
@@ -35,7 +57,7 @@
     {{else}}
     <div class="text-center py-16 text-white/50">
         <p class="text-lg mb-2">No shopping items</p>
-        <p class="text-sm">Add items from PlanToEat or Trello's Shopping board</p>
+        <p class="text-sm">Use the form above to add items quickly</p>
     </div>
     {{end}}
 </div>
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index db986bb..9e030e4 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -8,7 +8,7 @@
     {{if .Atoms}}
     <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {{range .Atoms}}
-        <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}">
+        <div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}">
             <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                 <!-- Checkbox for completing -->
                 <input type="checkbox"
@@ -70,7 +70,7 @@
         </summary>
         <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 mt-2">
             {{range .FutureAtoms}}
-            <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 opacity-60">
+            <div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 opacity-60">
                 <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                     <input type="checkbox"
                            hx-post="/complete-atom"
diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html
index e73a643..aeaba40 100644
--- a/web/templates/partials/timeline-tab.html
+++ b/web/templates/partials/timeline-tab.html
@@ -5,70 +5,118 @@
      hx-target="#tab-content"
      hx-swap="innerHTML">
 
-    {{$currentDay := ""}}
-    {{range .Items}}
-        {{$day := .Time.Format "Monday, January 2"}}
-        {{if ne $day $currentDay}}
-            {{if ne $currentDay ""}}
-                </div> <!-- Close previous day items -->
-            </div> <!-- Close previous day container -->
+    <!-- Today Section -->
+    {{if .TodayItems}}
+    <div>
+        <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2">
+            <span>📅</span> Today
+        </h2>
+        <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
+            {{range .TodayItems}}
+            {{template "timeline-item" .}}
             {{end}}
-            {{$currentDay = $day}}
-            <div>
-                <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2">
-                    <span>🗓️</span> {{$day}}
-                </h2>
-                <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
+        </div>
+    </div>
+    {{end}}
+
+    <!-- Tomorrow Section (Collapsed) -->
+    {{if .TomorrowItems}}
+    <details class="group">
+        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
+            <span>🗓️</span> Tomorrow
+            <span class="text-sm font-normal text-white/50">({{len .TomorrowItems}} items)</span>
+            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+        </summary>
+        <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
+            {{range .TomorrowItems}}
+            {{template "timeline-item" .}}
+            {{end}}
+        </div>
+    </details>
+    {{end}}
+
+    <!-- Later Section (Collapsed) -->
+    {{if .LaterItems}}
+    <details class="group">
+        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/60 cursor-pointer hover:text-white/80 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
+            <span>📆</span> Later
+            <span class="text-sm font-normal text-white/40">({{len .LaterItems}} items)</span>
+            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+        </summary>
+        <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
+            {{range .LaterItems}}
+            {{template "timeline-item" .}}
+            {{end}}
+        </div>
+    </details>
+    {{end}}
+
+    {{if and (not .TodayItems) (not .TomorrowItems) (not .LaterItems)}}
+    <div class="text-center py-8 text-white/50">
+        <p>No items found for the selected range.</p>
+    </div>
+    {{end}}
+
+</div>
+{{end}}
+
+{{define "timeline-item"}}
+<div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 relative {{if .IsCompleted}}opacity-60{{end}}">
+    <!-- Time Indicator -->
+    <div class="absolute -left-[21px] top-4 w-2.5 h-2.5 rounded-full
+        {{if eq .Type "event"}}bg-blue-500{{else if eq .Type "meal"}}bg-orange-500{{else if eq .Type "task"}}bg-green-500{{else}}bg-purple-500{{end}}">
+    </div>
+
+    <div class="flex items-start gap-3 p-3">
+        <!-- Checkbox for tasks/cards -->
+        {{if or (eq .Type "task") (eq .Type "card")}}
+        <input type="checkbox"
+               {{if .IsCompleted}}checked{{end}}
+               hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}"
+               hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
+               hx-target="closest div.rounded-lg"
+               hx-swap="outerHTML"
+               class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
         {{end}}
 
-        <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 relative">
-            <!-- Time Indicator -->
-            <div class="absolute -left-[21px] top-4 w-2.5 h-2.5 rounded-full 
-                {{if eq .Type "event"}}bg-blue-500{{else if eq .Type "meal"}}bg-orange-500{{else if eq .Type "task"}}bg-green-500{{else}}bg-purple-500{{end}}">
+        <div class="flex flex-col items-center min-w-[60px] text-xs text-white/50 pt-0.5">
+            <span class="font-medium text-white/80">{{.Time.Format "3:04 PM"}}</span>
+            {{if .EndTime}}
+                <span class="text-[10px] opacity-70">{{.EndTime.Format "3:04 PM"}}</span>
+            {{end}}
+        </div>
+
+        <div class="flex-1 min-w-0">
+            <div class="flex items-start justify-between gap-2">
+                <h3 class="text-sm text-white font-medium break-words {{if .IsCompleted}}line-through text-white/50{{end}}">{{.Title}}</h3>
+                {{if .URL}}
+                <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white flex-shrink-0">
+                    <svg class="w-4 h-4" 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 class="flex items-start gap-3 p-3">
-                <div class="flex flex-col items-center min-w-[60px] text-xs text-white/50 pt-0.5">
-                    <span class="font-medium text-white/80">{{.Time.Format "3:04 PM"}}</span>
-                    {{if .EndTime}}
-                        <span class="text-[10px] opacity-70">{{.EndTime.Format "3:04 PM"}}</span>
-                    {{end}}
-                </div>
-                
-                <div class="flex-1 min-w-0">
-                    <div class="flex items-start justify-between gap-2">
-                        <h3 class="text-sm text-white font-medium break-words">{{.Title}}</h3>
-                        {{if .URL}}
-                        <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white flex-shrink-0">
-                            <svg class="w-4 h-4" 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}}
-                    <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p>
-                    {{end}}
+            {{if .Description}}
+            <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p>
+            {{end}}
 
-                    <div class="flex items-center gap-2 mt-2">
-                        <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider">
-                            {{.Type}}
-                        </span>
-                    </div>
-                </div>
+            <div class="flex items-center gap-2 mt-2">
+                <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider">
+                    {{.Type}}
+                </span>
+                {{if .IsCompleted}}
+                <span class="text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-400 uppercase tracking-wider">
+                    done
+                </span>
+                {{end}}
             </div>
         </div>
-    {{end}}
-    
-    {{if ne $currentDay ""}}
-        </div> <!-- Close last day items -->
-    </div> <!-- Close last day container -->
-    {{else}}
-        <div class="text-center py-8 text-white/50">
-            <p>No items found for the selected range.</p>
-        </div>
-    {{end}}
-
+    </div>
 </div>
 {{end}}
-- 
cgit v1.2.3