From 86c7b9dd0ee8aab0fcc2fec797bd1cd3ec99c8a8 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) -->