Add shopping quick-add feature

- Add Shopping tab to action modal (Ctrl+K)
- Add /partials/shopping-lists endpoint to fetch lists from Shopping board
- Store dropdown populated dynamically from Trello
- Items added via existing unified-add endpoint

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 51 insertions, 1 deletions

diff --git a/web/templates/index.html b/web/templates/index.html
index f525a09..32c0857 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -87,7 +87,11 @@
                 <div class="flex gap-2">
                     <button onclick="switchActionTab('add')" id="tab-add"
                             class="px-3 py-1 rounded-lg text-sm font-medium bg-white/20 text-white">
-                        ✓ Quick Add
+                        ✓ Task
+                    </button>
+                    <button onclick="switchActionTab('shopping')" id="tab-shopping"
+                            class="px-3 py-1 rounded-lg text-sm font-medium text-white/60 hover:bg-white/10">
+                        🛒 Shopping
                     </button>
                     <button onclick="switchActionTab('bug')" id="tab-bug"
                             class="px-3 py-1 rounded-lg text-sm font-medium text-white/60 hover:bg-white/10">
@@ -125,6 +129,30 @@
                 </form>
             </div>
 
+            <!-- Shopping Tab -->
+            <div id="panel-shopping" class="p-4 hidden">
+                <form hx-post="/unified-add"
+                      hx-swap="none"
+                      hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); htmx.trigger(document.body, 'refresh-tasks'); }">
+                    <input type="hidden" name="source" value="trello">
+                    <input type="text"
+                           name="title"
+                           placeholder="Item name..."
+                           class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
+                           required>
+                    <select name="list_id"
+                            id="shopping-list-select"
+                            class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white mb-3"
+                            required>
+                        <option value="">Select store...</option>
+                    </select>
+                    <button type="submit"
+                            class="w-full bg-green-900/50 hover:bg-green-900/70 text-green-300 px-4 py-2 rounded-lg text-sm font-medium">
+                        Add to Shopping List
+                    </button>
+                </form>
+            </div>
+
             <!-- Bug Report Tab -->
             <div id="panel-bug" class="p-4 hidden">
                 <form hx-post="/bugs"
@@ -171,13 +199,35 @@
         }
         function switchActionTab(tab) {
             document.getElementById('panel-add').classList.toggle('hidden', tab !== 'add');
+            document.getElementById('panel-shopping').classList.toggle('hidden', tab !== 'shopping');
             document.getElementById('panel-bug').classList.toggle('hidden', tab !== 'bug');
+            // Task tab styling
             document.getElementById('tab-add').classList.toggle('bg-white/20', tab === 'add');
             document.getElementById('tab-add').classList.toggle('text-white', tab === 'add');
             document.getElementById('tab-add').classList.toggle('text-white/60', tab !== 'add');
+            // Shopping tab styling
+            document.getElementById('tab-shopping').classList.toggle('bg-green-900/50', tab === 'shopping');
+            document.getElementById('tab-shopping').classList.toggle('text-green-300', tab === 'shopping');
+            document.getElementById('tab-shopping').classList.toggle('text-white/60', tab !== 'shopping');
+            // Bug tab styling
             document.getElementById('tab-bug').classList.toggle('bg-red-900/50', tab === 'bug');
             document.getElementById('tab-bug').classList.toggle('text-red-300', tab === 'bug');
             document.getElementById('tab-bug').classList.toggle('text-white/60', tab !== 'bug');
+            // Load shopping lists when switching to shopping tab
+            if (tab === 'shopping') {
+                loadShoppingLists();
+            }
+        }
+        function loadShoppingLists() {
+            var select = document.getElementById('shopping-list-select');
+            if (select.options.length <= 1) {
+                fetch('/partials/shopping-lists')
+                    .then(function(r) { return r.text(); })
+                    .then(function(html) {
+                        select.innerHTML = '<option value="">Select store...</option>' + html;
+                    })
+                    .catch(function(e) { console.error('Failed to load shopping lists:', e); });
+            }
         }
         // Keyboard shortcut: Ctrl+K or Cmd+K
         document.addEventListener('keydown', function(e) {