Move clock from Soundboard to app header, display next to version

Clock now shows globally in the header (left of version badge) instead
of being Soundboard-only. Smaller size to fit header layout.

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

web/src/App.tsx

@@ -76,6 +76,21 @@ export default function App() {
     localStorage.setItem('hub-theme', t);
   };
 
+  // ── Clock ──
+  const [clock, setClock] = useState('');
+  useEffect(() => {
+    const update = () => {
+      const now = new Date();
+      const h = String(now.getHours()).padStart(2, '0');
+      const m = String(now.getMinutes()).padStart(2, '0');
+      const s = String(now.getSeconds()).padStart(2, '0');
+      setClock(`${h}:${m}:${s}`);
+    };
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, []);
+
   // ── Unified Auth State ──
   const [user, setUser] = useState<AuthUser>({ authenticated: false });
   const [providers, setProviders] = useState<AuthProviders>({ discord: false, steam: false, admin: false });
@@ -348,6 +363,9 @@ export default function App() {
               <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
             </svg>
           </button>
+          <span className="hub-clock">
+            {clock.slice(0, 5)}<span className="hub-clock-sec">{clock.slice(5)}</span>
+          </span>
           <span
             className="hub-version hub-version-clickable"
             onClick={() => {

web/src/plugins/soundboard/SoundboardTab.tsx

@@ -374,7 +374,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
 
   /* ── UI ── */
   const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
-  const [clock, setClock] = useState('');
   const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; sound: Sound } | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
 
@@ -460,20 +459,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
     channels.find(c => `${c.guildId}:${c.channelId}` === selected),
   [channels, selected]);
 
-  /* ── Clock ── */
-  useEffect(() => {
-    const update = () => {
-      const now = new Date();
-      const h = String(now.getHours()).padStart(2, '0');
-      const m = String(now.getMinutes()).padStart(2, '0');
-      const s = String(now.getSeconds()).padStart(2, '0');
-      setClock(`${h}:${m}:${s}`);
-    };
-    update();
-    const id = setInterval(update, 1000);
-    return () => clearInterval(id);
-  }, []);
-
   /* ── Init ── */
   useEffect(() => {
     (async () => {
@@ -814,9 +799,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
   const analyticsTop = analytics.mostPlayed.slice(0, 10);
   const totalSoundsDisplay = analytics.totalSounds || total;
 
-  const clockMain = clock.slice(0, 5);
-  const clockSec = clock.slice(5);
-
   /* ════════════════════════════════════════════
      RENDER
      ════════════════════════════════════════════ */
@@ -870,10 +852,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
           </div>
         </div>
 
-        <div className="clock-wrap">
-          <div className="clock">{clockMain}<span className="clock-seconds">{clockSec}</span></div>
-        </div>
-
         <div className="topbar-right">
           {lastPlayed && (
             <div className="now-playing">

web/src/plugins/soundboard/soundboard.css

@@ -80,28 +80,6 @@
   letter-spacing: -.02em;
 }
 
-/* ── Clock ── */
-.clock-wrap {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.clock {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--text-normal);
-  letter-spacing: .02em;
-  font-variant-numeric: tabular-nums;
-  opacity: .9;
-}
-
-.clock-seconds {
-  font-size: 14px;
-  color: var(--text-faint);
-  font-weight: 500;
-}
-
 .topbar-right {
   display: flex;
   align-items: center;
@@ -1668,14 +1646,6 @@
     text-overflow: ellipsis;
   }
 
-  .clock {
-    font-size: 16px;
-  }
-
-  .clock-seconds {
-    font-size: 11px;
-  }
-
   .tb-btn span:not(.tb-icon) {
     display: none;
   }

web/src/styles.css

@@ -292,6 +292,20 @@ html, body {
   line-height: 1;
 }
 
+/* ── Clock ── */
+.hub-clock {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: .02em;
+}
+.hub-clock-sec {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-weight: 400;
+}
+
 .hub-version {
   font-size: 12px;
   color: var(--text-faint);