From 3210fc0d20b0b46a907c9bba1f2d46bff5e74af9 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Fri, 16 Jan 2026 15:27:52 +0000
Subject: [PATCH] Move time, theme, deps, and help to nav bar

Relocate header utilities (UTC clock, theme toggle, dependencies
button, help button) to the navigation bar. Elements are grouped
logically with the clock on its own and tool buttons together,
all aligned to the far right of the nav bar.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/css/index.css | 226 ++++++++++++++++++++-----------------------
 templates/index.html |  26 ++---
 2 files changed, 121 insertions(+), 131 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index 69196c9..82df9b2 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -737,6 +737,112 @@ header h1 {
     color: var(--bg-primary);
 }
 
+/* Nav Bar Utilities (clock, theme, tools) */
+.nav-utilities {
+    display: none;
+    align-items: center;
+    gap: 12px;
+    margin-left: auto;
+}
+
+@media (min-width: 1024px) {
+    .nav-utilities {
+        display: flex;
+    }
+}
+
+.nav-clock {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+}
+
+.nav-clock .utc-label {
+    font-size: 9px;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.nav-clock .utc-time {
+    color: var(--accent-cyan);
+    font-weight: 600;
+}
+
+.nav-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border-color);
+}
+
+.nav-tools {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.nav-tool-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.nav-tool-btn:hover {
+    background: var(--bg-elevated);
+    border-color: var(--border-color);
+    color: var(--accent-cyan);
+}
+
+/* Theme toggle icon states in nav bar */
+.nav-tool-btn .icon-sun,
+.nav-tool-btn .icon-moon {
+    position: absolute;
+    transition: opacity 0.2s, transform 0.2s;
+    font-size: 14px;
+}
+
+.nav-tool-btn .icon-sun {
+    opacity: 0;
+    transform: rotate(-90deg);
+}
+
+.nav-tool-btn .icon-moon {
+    opacity: 1;
+    transform: rotate(0deg);
+}
+
+[data-theme="light"] .nav-tool-btn .icon-sun {
+    opacity: 1;
+    transform: rotate(0deg);
+}
+
+[data-theme="light"] .nav-tool-btn .icon-moon {
+    opacity: 0;
+    transform: rotate(90deg);
+}
+
+/* Deps button status colors */
+#depsBtn.all-ok {
+    color: var(--accent-green);
+}
+
+#depsBtn.has-missing {
+    color: var(--accent-orange);
+}
+
 .version-badge {
     font-size: 0.6rem;
     font-weight: 500;
@@ -860,43 +966,6 @@ header h1 .tagline {
     justify-content: center;
 }
 
-/* UTC Clock in header */
-.header-clock {
-    position: static;
-    transform: none;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-left: auto;
-}
-
-@media (min-width: 1024px) {
-    .header-clock {
-        position: absolute;
-        top: 50%;
-        left: 20px;
-        transform: translateY(-50%);
-        font-size: 12px;
-        gap: 8px;
-        margin-left: 0;
-    }
-}
-
-.header-clock .utc-time {
-    color: var(--accent-cyan);
-    font-weight: 600;
-}
-
-.header-clock .utc-label {
-    font-size: 9px;
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
 /* Active mode indicator */
 .active-mode-indicator {
     display: inline-flex;
@@ -921,89 +990,6 @@ header h1 .tagline {
     animation: pulse-glow 2s infinite;
 }
 
-.help-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 20px;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    font-size: 16px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-}
-
-.help-btn:hover {
-    border-color: var(--accent-cyan);
-    color: var(--accent-cyan);
-    background: var(--bg-secondary);
-}
-
-#depsBtn {
-    right: 60px;
-}
-
-.theme-toggle {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 100px;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    font-size: 16px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-}
-
-.theme-toggle:hover {
-    border-color: var(--accent-cyan);
-    color: var(--accent-cyan);
-    background: var(--bg-secondary);
-}
-
-.theme-toggle .icon-sun,
-.theme-toggle .icon-moon {
-    position: absolute;
-    transition: opacity 0.2s, transform 0.2s;
-}
-
-.theme-toggle .icon-sun {
-    opacity: 0;
-    transform: rotate(-90deg);
-}
-
-.theme-toggle .icon-moon {
-    opacity: 1;
-    transform: rotate(0deg);
-}
-
-[data-theme="light"] .theme-toggle .icon-sun {
-    opacity: 1;
-    transform: rotate(0deg);
-}
-
-[data-theme="light"] .theme-toggle .icon-moon {
-    opacity: 0;
-    transform: rotate(90deg);
-}
-
 .help-modal {
     display: none;
     position: fixed;
diff --git a/templates/index.html b/templates/index.html
index 911e839..9909f9b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -198,17 +198,6 @@
             <span></span>
             <span></span>
         </button>
-        <!-- UTC Clock -->
-        <div class="header-clock hide-mobile">
-            <span class="utc-label">UTC</span>
-            <span class="utc-time" id="headerUtcTime">--:--:--</span>
-        </div>
-        <button class="theme-toggle" onclick="toggleTheme()" title="Toggle Light/Dark Theme">
-            <span class="icon-moon">🌙</span>
-            <span class="icon-sun">☀️</span>
-        </button>
-        <button class="help-btn" onclick="showDependencies()" title="Check Tool Dependencies" id="depsBtn" style="margin-right: 5px;">🔧</button>
-        <button class="help-btn" onclick="showHelp()" title="Help & Documentation">?</button>
         <div class="logo">
             <svg width="50" height="50" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <!-- Signal brackets - left side -->
@@ -392,6 +381,21 @@
                 <span class="nav-icon">🖥️</span><span class="nav-label">Full Dashboard</span>
             </a>
         </div>
+        <div class="nav-utilities">
+            <div class="nav-clock">
+                <span class="utc-label">UTC</span>
+                <span class="utc-time" id="headerUtcTime">--:--:--</span>
+            </div>
+            <div class="nav-divider"></div>
+            <div class="nav-tools">
+                <button class="nav-tool-btn" onclick="toggleTheme()" title="Toggle Light/Dark Theme">
+                    <span class="icon-moon">🌙</span>
+                    <span class="icon-sun">☀️</span>
+                </button>
+                <button class="nav-tool-btn" onclick="showDependencies()" title="Check Tool Dependencies" id="depsBtn">🔧</button>
+                <button class="nav-tool-btn" onclick="showHelp()" title="Help & Documentation">?</button>
+            </div>
+        </div>
     </nav>
 
     <!-- Mobile Navigation Bar (simplified mode switching) -->