5 files changed, 35 insertions, 28 deletions
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 5dffacc..954dc8c 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -218,16 +218,9 @@ async function refreshData() {
 
         if (!refreshResponse.ok) throw new Error('Refresh failed');
 
-        // Reload current tab from cache
-        const tabResponse = await fetch(`/tabs/${currentTab}`);
-
-        if (!tabResponse.ok) throw new Error('Tab reload failed');
-
-        // Get HTML response and update tab content
-        const html = await tabResponse.text();
-        const tabContent = document.getElementById('tab-content');
-        tabContent.innerHTML = html;
-        htmx.process(tabContent);
+        // Trigger HTMX refresh on the current tab — each tab template
+        // has hx-trigger="refresh-tasks from:body" to handle its own reload
+        htmx.trigger(document.body, 'refresh-tasks');
 
         // Update timestamp
         updateLastUpdatedTime();
@@ -275,17 +268,11 @@ async function autoRefresh() {
 
         if (!refreshResponse.ok) throw new Error('Refresh failed');
 
-        // Reload current tab from cache
-        const tabResponse = await fetch(`/tabs/${currentTab}`);
-
-        if (tabResponse.ok) {
-            const html = await tabResponse.text();
-            const tabContent = document.getElementById('tab-content');
-            tabContent.innerHTML = html;
-            htmx.process(tabContent);
-            updateLastUpdatedTime();
-            console.log('Auto-refresh successful');
-        }
+        // Trigger HTMX refresh on the current tab — each tab template
+        // has hx-trigger="refresh-tasks from:body" to handle its own reload
+        htmx.trigger(document.body, 'refresh-tasks');
+        updateLastUpdatedTime();
+        console.log('Auto-refresh successful');
     } catch (error) {
         console.error('Auto-refresh failed:', error);
     }
diff --git a/web/templates/index.html b/web/templates/index.html
index 7e9a38f..9c90570 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -38,10 +38,18 @@
                 </svg>
             </button>
             <span class="text-sm text-white/70 tracking-wider font-light" id="last-updated">{{.LastUpdated.Format "3:04 PM"}}</span>
-            <form method="POST" action="/logout">
-                <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
-                <button type="submit" class="text-white/70 hover:text-white transition-colors text-xs tracking-wide">Logout</button>
-            </form>
+            <div class="flex items-center gap-3">
+                <a href="/settings" class="text-white/70 hover:text-white transition-colors p-1" title="Settings">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    </svg>
+                </a>
+                <form method="POST" action="/logout">
+                    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
+                    <button type="submit" class="text-white/70 hover:text-white transition-colors text-xs tracking-wide">Logout</button>
+                </form>
+            </div>
         </header>
 
         <!-- Tab Navigation -->
diff --git a/web/templates/partials/conditions-tab.html b/web/templates/partials/conditions-tab.html
index 94c2f99..3ded125 100644
--- a/web/templates/partials/conditions-tab.html
+++ b/web/templates/partials/conditions-tab.html
@@ -1,5 +1,9 @@
 {{define "conditions-tab"}}
-<div class="space-y-6 text-shadow-sm">
+<div class="space-y-6 text-shadow-sm"
+     hx-get="/tabs/conditions"
+     hx-trigger="refresh-tasks from:body"
+     hx-target="#tab-content"
+     hx-swap="innerHTML">
     <!-- Kilauea Webcams -->
     <div>
         <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90">
diff --git a/web/templates/partials/meals-tab.html b/web/templates/partials/meals-tab.html
index 5900368..97c3a4e 100644
--- a/web/templates/partials/meals-tab.html
+++ b/web/templates/partials/meals-tab.html
@@ -1,5 +1,9 @@
 {{define "meals-tab"}}
-<div class="space-y-6">
+<div class="space-y-6"
+     hx-get="/tabs/meals"
+     hx-trigger="refresh-tasks from:body"
+     hx-target="#tab-content"
+     hx-swap="innerHTML">
     <!-- PlanToEat Meals Section -->
     {{template "plantoeat-meals" .}}
 </div>
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 345549b..e3742d9 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -1,5 +1,9 @@
 {{define "shopping-tab"}}
-<div class="space-y-6 text-shadow-sm" id="shopping-tab-container">
+<div class="space-y-6 text-shadow-sm" id="shopping-tab-container"
+     hx-get="/tabs/shopping"
+     hx-trigger="refresh-tasks from:body"
+     hx-target="#tab-content"
+     hx-swap="innerHTML">
 
     <!-- Header with View Toggle -->
     <div class="flex items-center justify-between">