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>

1 files changed, 27 insertions, 5 deletions

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>