diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/templates/index.html | 52 |
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) { |