Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-06-08 14:11:54 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tier toggle button to nav; migrate data-animations restore to data-ui-tier

Browse Source
This commit is contained in:
James Smith
2026-05-19 22:20:31 +01:00
parent 678aefd76e
commit 95776f5519
1 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/nav.html
+25 -17
View File
@@ -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)