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 ++++++++++++++++--------------------------------
 1 file changed, 25 insertions(+), 53 deletions(-)

(limited to 'web/templates/index.html')

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 -->
-- 
cgit v1.2.3