From 95776f5519776957757ef4411295e246684869ae Mon Sep 17 00:00:00 2001
From: James Smith <jamessmith1@outlook.com>
Date: Tue, 19 May 2026 22:20:31 +0100
Subject: [PATCH] feat: add tier toggle button to nav; migrate data-animations
 restore to data-ui-tier

---
 templates/partials/nav.html | 42 ++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index 6e630e5..592c5df 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -190,9 +190,11 @@
         </a>
         <div class="nav-divider"></div>
         <div class="nav-tools">
-            <button type="button" class="nav-tool-btn" onclick="toggleAnimations()" title="Toggle Animations" aria-label="Toggle animations">
-                <span class="icon-effects-on icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>
-                <span class="icon-effects-off icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/><line x1="2" y1="2" x2="22" y2="22"/></svg></span>
+            <button type="button" class="nav-tool-btn nav-tier-btn" onclick="toggleUiTier()" title="Switch display mode" aria-label="Switch display mode" style="width:auto;padding:0 8px;gap:4px;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;">
+                <span class="icon-tier-lean icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg></span>
+                <span class="icon-tier-enhanced icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
+                <span class="tier-label-lean">LEAN</span>
+                <span class="tier-label-enhanced">ENHANCED</span>
             </button>
             <button type="button" class="nav-tool-btn" onclick="toggleTheme()" title="Toggle Light/Dark Theme" aria-label="Toggle theme">
                 <span class="icon-moon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></span>
@@ -456,14 +458,13 @@
         });
     }
 
-    if (typeof toggleAnimations === 'undefined') {
-        window.toggleAnimations = function() {
+    if (typeof toggleUiTier === 'undefined') {
+        window.toggleUiTier = function() {
             const html = document.documentElement;
-            const current = html.getAttribute('data-animations') || 'on';
-            const next = current === 'on' ? 'off' : 'on';
-            html.setAttribute('data-animations', next);
-            localStorage.setItem('intercept-animations', next);
-            localStorage.removeItem('animations');
+            const current = html.getAttribute('data-ui-tier') || 'enhanced';
+            const next = current === 'lean' ? 'enhanced' : 'lean';
+            html.setAttribute('data-ui-tier', next);
+            localStorage.setItem('intercept-ui-tier', next);
         };
     }
 
@@ -528,14 +529,21 @@
             document.documentElement.setAttribute('data-theme', savedTheme);
         }
 
-        const legacyAnimations = localStorage.getItem('animations');
-        const savedAnimations = localStorage.getItem('intercept-animations') || legacyAnimations;
-        if (legacyAnimations && !localStorage.getItem('intercept-animations')) {
-            localStorage.setItem('intercept-animations', legacyAnimations);
-            localStorage.removeItem('animations');
+        // Migrate old animations pref: animations=off → tier=lean
+        const oldAnimations = localStorage.getItem('intercept-animations') || localStorage.getItem('animations');
+        if (oldAnimations && !localStorage.getItem('intercept-ui-tier')) {
+            if (oldAnimations === 'off') {
+                localStorage.setItem('intercept-ui-tier', 'lean');
+            }
         }
-        if (savedAnimations) {
-            document.documentElement.setAttribute('data-animations', savedAnimations);
+        localStorage.removeItem('intercept-animations');
+        localStorage.removeItem('animations');
+
+        // Apply tier (default to enhanced if none saved)
+        const savedTier = localStorage.getItem('intercept-ui-tier') || 'enhanced';
+        document.documentElement.setAttribute('data-ui-tier', savedTier);
+        if (!localStorage.getItem('intercept-ui-tier')) {
+            localStorage.setItem('intercept-ui-tier', 'enhanced');
         }
 
         // UTC Clock update (if not already defined by parent page)