From f10044eac1997537bcdf7699f5b4284aac16f8e2 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 1 Feb 2026 14:47:50 -1000
Subject: Improve shopping mode and flatten nav bar

Shopping mode:
- Click to complete items (deletes user items, hides external items)
- Add print button with compact two-column print layout
- Fix CSRF token for HTMX requests
- Fix input clearing with proper htmx:afterRequest handler
- Remove "Quick Add" store option, require valid store

Navigation:
- Replace dropdown menu with flat nav showing all tabs
- Remove unused dropdown JS

Tests:
- Add TestHandleShoppingModeComplete for user and external items

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/index.html                        |  78 ++++++------------
 web/templates/partials/shopping-mode-items.html |  22 ++----
 web/templates/partials/shopping-tab.html        |   3 +-
 web/templates/shopping-mode.html                | 100 ++++++++++++++++++------
 4 files changed, 111 insertions(+), 92 deletions(-)

(limited to 'web/templates')

diff --git a/web/templates/index.html b/web/templates/index.html
index 5322ca6..7e9a38f 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -46,8 +46,7 @@
 
         <!-- Tab Navigation -->
         <div class="mb-4 sm:mb-6 no-print">
-            <nav class="flex space-x-1 bg-panel backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
-                <!-- Main Tabs -->
+            <nav class="flex flex-wrap gap-1 bg-panel backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
                 <button
                     class="tab-button {{if eq .ActiveTab "timeline"}}tab-button-active{{end}}"
                     hx-get="/tabs/timeline"
@@ -56,6 +55,14 @@
                     onclick="setActiveTab(this)">
                     🗓️ Timeline
                 </button>
+                <button
+                    class="tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
+                    hx-get="/tabs/tasks"
+                    hx-target="#tab-content"
+                    hx-push-url="?tab=tasks"
+                    onclick="setActiveTab(this)">
+                    ✓ Tasks
+                </button>
                 <button
                     class="tab-button {{if eq .ActiveTab "shopping"}}tab-button-active{{end}}"
                     hx-get="/tabs/shopping"
@@ -64,44 +71,25 @@
                     onclick="setActiveTab(this)">
                     🛒 Shopping
                 </button>
+                <button
+                    class="tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}"
+                    hx-get="/tabs/meals"
+                    hx-target="#tab-content"
+                    hx-push-url="?tab=meals"
+                    onclick="setActiveTab(this)">
+                    🍽️ Meals
+                </button>
+                <button
+                    class="tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}"
+                    hx-get="/tabs/planning"
+                    hx-target="#tab-content"
+                    hx-push-url="?tab=planning"
+                    onclick="setActiveTab(this)">
+                    📋 Planning
+                </button>
                 <a href="/conditions" class="tab-button">
                     🌋 Conditions
                 </a>
-
-                <!-- Details Dropdown -->
-                <div class="relative" id="details-dropdown">
-                    <button
-                        class="tab-button {{if or (eq .ActiveTab "tasks") (eq .ActiveTab "planning") (eq .ActiveTab "meals")}}tab-button-active{{end}}"
-                        onclick="toggleDetailsDropdown(event)">
-                        📁 Details ▾
-                    </button>
-                    <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-black/90 backdrop-blur-md rounded-lg p-1 min-w-[140px] z-[100] border border-white/20 shadow-lg">
-                        <button
-                            class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "tasks"}}bg-white/20 text-white{{end}}"
-                            hx-get="/tabs/tasks"
-                            hx-target="#tab-content"
-                            hx-push-url="?tab=tasks"
-                            onclick="setActiveTab(this); closeDetailsDropdown();">
-                            ✓ Tasks
-                        </button>
-                        <button
-                            class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "planning"}}bg-white/20 text-white{{end}}"
-                            hx-get="/tabs/planning"
-                            hx-target="#tab-content"
-                            hx-push-url="?tab=planning"
-                            onclick="setActiveTab(this); closeDetailsDropdown();">
-                            📋 Planning
-                        </button>
-                        <button
-                            class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "meals"}}bg-white/20 text-white{{end}}"
-                            hx-get="/tabs/meals"
-                            hx-target="#tab-content"
-                            hx-push-url="?tab=meals"
-                            onclick="setActiveTab(this); closeDetailsDropdown();">
-                            🍽️ Meals
-                        </button>
-                    </div>
-                </div>
             </nav>
         </div>
 
@@ -297,22 +285,6 @@
         function closeTaskModal() {
             document.getElementById('task-edit-modal').classList.add('hidden');
         }
-        // Details dropdown functions
-        function toggleDetailsDropdown(e) {
-            e.stopPropagation();
-            var menu = document.getElementById('details-menu');
-            menu.classList.toggle('hidden');
-        }
-        function closeDetailsDropdown() {
-            document.getElementById('details-menu').classList.add('hidden');
-        }
-        // Close dropdown when clicking outside
-        document.addEventListener('click', function(e) {
-            var dropdown = document.getElementById('details-dropdown');
-            if (dropdown && !dropdown.contains(e.target)) {
-                closeDetailsDropdown();
-            }
-        });
     </script>
 
     <!-- Task Edit Modal -->
diff --git a/web/templates/partials/shopping-mode-items.html b/web/templates/partials/shopping-mode-items.html
index fdf0674..5dad772 100644
--- a/web/templates/partials/shopping-mode-items.html
+++ b/web/templates/partials/shopping-mode-items.html
@@ -2,28 +2,19 @@
 <div class="space-y-2">
     {{if .Items}}
     {{range .Items}}
-    <div class="item-row flex items-center gap-3 p-4 bg-white/5 rounded-xl border border-white/10 cursor-pointer {{if .Checked}}item-checked{{end}}"
-         hx-post="/shopping/mode/{{$.StoreName}}/toggle"
-         hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}}}'
+    {{if not .Checked}}
+    <div class="flex items-center gap-3 p-4 bg-white/5 rounded-xl border border-white/10 cursor-pointer"
+         hx-post="/shopping/mode/{{$.StoreName}}/complete"
+         hx-vals='{"id":"{{.ID}}","source":"{{.Source}}"}'
          hx-target="#shopping-items"
          hx-swap="innerHTML">
 
         <!-- Checkbox visual -->
-        <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0
-                    {{if .Checked}}bg-green-500/30 border-green-500{{else}}border-white/30{{end}}">
-            {{if .Checked}}
-            <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-            </svg>
-            {{end}}
-        </div>
+        <div class="w-6 h-6 rounded-full border-2 border-white/30 flex items-center justify-center flex-shrink-0"></div>
 
         <!-- Item content -->
         <div class="flex-1 min-w-0">
-            <span class="item-name text-white block">{{.Name}}</span>
-            {{if .Quantity}}
-            <span class="text-sm text-white/50">{{.Quantity}}</span>
-            {{end}}
+            <span class="text-white">{{.Name}}</span>{{if .Quantity}} <span class="text-sm text-white/50 item-qty">({{.Quantity}})</span>{{end}}
         </div>
 
         <!-- Source badge -->
@@ -35,6 +26,7 @@
         </span>
     </div>
     {{end}}
+    {{end}}
     {{else}}
     <div class="text-center py-16 text-white/50">
         <p class="text-lg mb-2">No items</p>
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index e5fa3e6..0b22c15 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -33,8 +33,7 @@
             <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>
+            <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" required>
                 {{range .Stores}}
                 <option value="{{.Name}}">{{.Name}}</option>
                 {{end}}
diff --git a/web/templates/shopping-mode.html b/web/templates/shopping-mode.html
index 88d8561..b2f129a 100644
--- a/web/templates/shopping-mode.html
+++ b/web/templates/shopping-mode.html
@@ -14,20 +14,6 @@
             margin: 0;
             padding: 0;
         }
-        .item-row {
-            transition: all 0.2s ease;
-        }
-        .item-row:active {
-            transform: scale(0.98);
-            background: rgba(255,255,255,0.15);
-        }
-        .item-checked {
-            opacity: 0.5;
-        }
-        .item-checked .item-name {
-            text-decoration: line-through;
-            color: rgba(255,255,255,0.4);
-        }
         .store-switcher {
             scrollbar-width: none;
             -ms-overflow-style: none;
@@ -35,11 +21,62 @@
         .store-switcher::-webkit-scrollbar {
             display: none;
         }
+        .flash-success {
+            background: rgba(34, 197, 94, 0.2);
+            border-radius: 8px;
+        }
+        @media print {
+            * {
+                text-shadow: none !important;
+            }
+            body {
+                background: white !important;
+                color: black !important;
+                font-size: 10px !important;
+                line-height: 1.2 !important;
+            }
+            .no-print {
+                display: none !important;
+            }
+            main {
+                padding: 0 !important;
+            }
+            #shopping-items > div {
+                display: grid !important;
+                grid-template-columns: 1fr 1fr !important;
+                gap: 0 12px !important;
+            }
+            #shopping-items > div > div {
+                background: none !important;
+                border: none !important;
+                border-radius: 0 !important;
+                padding: 1px 0 !important;
+                color: black !important;
+                gap: 3px !important;
+            }
+            #shopping-items span {
+                color: black !important;
+                font-size: 10px !important;
+            }
+            #shopping-items .item-qty {
+                font-size: 8px !important;
+                color: #666 !important;
+            }
+            #shopping-items .rounded-full {
+                width: 8px !important;
+                height: 8px !important;
+                border-width: 1px !important;
+                border-color: #888 !important;
+            }
+            #shopping-items .text-xs {
+                display: none !important;
+            }
+        }
     </style>
 </head>
-<body class="text-white">
+<body class="text-white" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
     <!-- Header -->
-    <header class="sticky top-0 z-50 bg-black/40 backdrop-blur-lg border-b border-white/10">
+    <header class="sticky top-0 z-50 bg-black/40 backdrop-blur-lg border-b border-white/10 no-print">
         <div class="flex items-center justify-between px-4 py-3">
             <a href="/?tab=shopping" class="text-white/70 hover:text-white p-2 -ml-2">
                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -47,7 +84,11 @@
                 </svg>
             </a>
             <h1 class="text-lg font-semibold">{{.StoreName}}</h1>
-            <div class="w-10"></div>
+            <button onclick="window.print()" class="text-white/70 hover:text-white p-2 -mr-2">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
+                </svg>
+            </button>
         </div>
 
         <!-- Store Switcher -->
@@ -64,18 +105,22 @@
         {{end}}
     </header>
 
+    <!-- Print Header -->
+    <div class="hidden print:block mb-1">
+        <h1 class="text-sm font-semibold text-black">{{.StoreName}}</h1>
+    </div>
+
     <!-- Items List -->
     <main class="p-4" id="shopping-items">
         {{template "shopping-mode-items" .}}
     </main>
 
     <!-- Quick Add Form (Fixed at Bottom) -->
-    <div class="fixed bottom-0 left-0 right-0 bg-black/60 backdrop-blur-lg border-t border-white/10 p-4">
-        <form hx-post="/shopping/add"
+    <div class="fixed bottom-0 left-0 right-0 bg-black/60 backdrop-blur-lg border-t border-white/10 p-4 no-print">
+        <form id="quick-add-form" hx-post="/shopping/add"
               hx-target="#shopping-items"
               hx-swap="innerHTML"
-              hx-on::after-request="if(event.detail.successful) this.reset();"
-              class="flex gap-2">
+              class="flex gap-2 transition-all">
             <input type="hidden" name="store" value="{{.StoreName}}">
             <input type="hidden" name="mode" value="shopping-mode">
             <input type="text" name="name" placeholder="Add item..."
@@ -88,6 +133,17 @@
     </div>
 
     <!-- Spacer for fixed bottom form -->
-    <div class="h-24"></div>
+    <div class="h-24 no-print"></div>
+
+    <script>
+    document.body.addEventListener('htmx:afterRequest', function(evt) {
+        if (evt.detail.elt.id === 'quick-add-form' && evt.detail.successful) {
+            evt.detail.elt.reset();
+            evt.detail.elt.querySelector('input[name=name]').focus();
+            evt.detail.elt.classList.add('flash-success');
+            setTimeout(function() { evt.detail.elt.classList.remove('flash-success'); }, 300);
+        }
+    });
+    </script>
 </body>
 </html>
-- 
cgit v1.2.3