From f9127d5272042f4980ece8b39a47613f95eeaf8e Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sat, 31 Jan 2026 21:23:56 -1000
Subject: Fix timeline calendar view and shopping UI bugs (#56, #65-73)

- #56: Add overflow-hidden to card/panel classes to prevent content overflow
- #65: Fix Google Tasks not showing by including tasks without due dates
- #66: Add no-cache headers to prevent stale template responses
- #67: Increase dropdown z-index to 100 for proper layering
- #69: Implement calendar-style Today section with hourly grid (6am-10pm),
       duration-based event heights, and compact overdue/all-day section
- #70: Only reset shopping-mode form on successful submission
- #71: Remove checkboxes from shopping tab (only show in shopping mode)
- #72: Add inline add-item input at end of each store section
- #73: Add Grouped/Flat view toggle for shopping list

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/partials/shopping-tab.html | 69 +++++++++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 9 deletions(-)

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

diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 4d0ac02..e5fa3e6 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -1,10 +1,29 @@
 {{define "shopping-tab"}}
 <div class="space-y-6 text-shadow-sm"
-     hx-get="/tabs/shopping"
+     hx-get="/tabs/shopping{{if not .Grouped}}?grouped=false{{end}}"
      hx-trigger="refresh-tasks from:body"
      hx-target="#tab-content"
      hx-swap="innerHTML">
 
+    <!-- Header with View Toggle -->
+    <div class="flex items-center justify-between">
+        <h2 class="text-lg font-medium text-white/80">Shopping List</h2>
+        <div class="flex gap-2">
+            <button hx-get="/tabs/shopping?grouped=true"
+                    hx-target="#tab-content"
+                    hx-swap="innerHTML"
+                    class="px-3 py-1.5 rounded-lg text-sm transition-colors {{if .Grouped}}bg-white/20 text-white{{else}}bg-white/5 text-white/50 hover:bg-white/10{{end}}">
+                Grouped
+            </button>
+            <button hx-get="/tabs/shopping?grouped=false"
+                    hx-target="#tab-content"
+                    hx-swap="innerHTML"
+                    class="px-3 py-1.5 rounded-lg text-sm transition-colors {{if not .Grouped}}bg-white/20 text-white{{else}}bg-white/5 text-white/50 hover:bg-white/10{{end}}">
+                Flat
+            </button>
+        </div>
+    </div>
+
     <!-- Quick Add Form -->
     <form hx-post="/shopping/add"
           hx-target="#tab-content"
@@ -27,6 +46,8 @@
     </form>
 
     {{if .Stores}}
+    {{if .Grouped}}
+    <!-- Grouped View: Items by Store -->
     {{range .Stores}}
     <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
         <div class="flex items-center justify-between mb-4">
@@ -44,14 +65,8 @@
             {{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-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-target="#tab-content"
-                           hx-swap="innerHTML"
-                           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>
+                <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5">
+                    <span class="flex-1 text-white">{{.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 if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}">
                         {{.Source}}
@@ -61,6 +76,42 @@
             </ul>
         </div>
         {{end}}
+        <!-- Inline Add Item -->
+        <form hx-post="/shopping/add"
+              hx-target="#tab-content"
+              hx-swap="innerHTML"
+              class="mt-3 flex gap-2">
+            <input type="hidden" name="store" value="{{.Name}}">
+            <input type="text" name="name" placeholder="Add to {{.Name}}..."
+                   class="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-white/20 text-sm"
+                   required>
+            <button type="submit" class="bg-white/10 hover:bg-white/20 text-white/70 hover:text-white px-3 py-2 rounded-lg text-sm transition-colors">
+                +
+            </button>
+        </form>
+    </section>
+    {{end}}
+    {{else}}
+    <!-- Flat View: All Items in One List -->
+    <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
+        <ul class="space-y-2">
+            {{range .Stores}}
+            {{range .Categories}}
+            {{range .Items}}
+            <li class="flex items-center gap-3 p-3 bg-card bg-card-hover transition-colors rounded-lg border border-white/5">
+                <span class="flex-1 text-white">{{.Name}}</span>
+                {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
+                <span class="text-xs px-2 py-0.5 rounded bg-white/10 text-white/50">
+                    {{.Store}}
+                </span>
+                <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>
+            {{end}}
+            {{end}}
+            {{end}}
+        </ul>
     </section>
     {{end}}
     {{else}}
-- 
cgit v1.2.3