feat: replace animations toggle with display mode selector in settings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/js/core/settings-manager.js

@@ -705,10 +705,9 @@ const Settings = {
             themeSelect.value = localStorage.getItem('intercept-theme') || 'dark';
         }
 
-        // Animations toggle
+        const uiTierSelect = document.getElementById('uiTierSelect');
-        const animationsEnabled = document.getElementById('animationsEnabled');
+        if (uiTierSelect) {
-        if (animationsEnabled) {
+            uiTierSelect.value = localStorage.getItem('intercept-ui-tier') || 'enhanced';
-            animationsEnabled.checked = localStorage.getItem('intercept-animations') !== 'off';
         }
     },
 
@@ -1486,15 +1485,11 @@ function setThemePreference(value) {
 }
 
 /**
- * Set animations preference from the Display settings tab
+ * Set UI tier preference from the Display settings tab
  */
-function setAnimationsEnabled(enabled) {
+function setUiTierPreference(tier) {
-    if (enabled) {
+    document.documentElement.setAttribute('data-ui-tier', tier);
-        document.documentElement.removeAttribute('data-animations');
+    localStorage.setItem('intercept-ui-tier', tier);
-    } else {
-        document.documentElement.setAttribute('data-animations', 'off');
-    }
-    localStorage.setItem('intercept-animations', enabled ? 'on' : 'off');
 }
 
 if (!window._settingsEscapeHandlerBound) {

templates/partials/settings-modal.html

@@ -218,13 +218,13 @@
 
                 <div class="settings-row">
                     <div class="settings-label">
-                        <span class="settings-label-text">Animations</span>
+                        <span class="settings-label-text">Display Mode</span>
-                        <span class="settings-label-desc">Enable visual effects and animations</span>
+                        <span class="settings-label-desc">Lean — no effects (Pi / older hardware) · Enhanced — amber military console</span>
                     </div>
-                    <label class="toggle-switch">
+                    <select id="uiTierSelect" class="settings-select" onchange="setUiTierPreference(this.value)">
-                        <input type="checkbox" id="animationsEnabled" checked onchange="setAnimationsEnabled(this.checked)">
+                        <option value="enhanced">Enhanced</option>
-                        <span class="toggle-slider"></span>
+                        <option value="lean">Lean</option>
-                    </label>
+                    </select>
                 </div>
             </div>