Minor UI Rework + Introduction of Operations view.

frontend/src/components/layout/TopBar.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Sun, Moon, LogOut, User, Menu } from 'lucide-react';
+import { Sun, Moon, LogOut, Menu } from 'lucide-react';
 import { useAuthStore } from '../../store/authStore';
 import { useThemeStore } from '../../store/themeStore';
 import GlobalSearch from './GlobalSearch';
@@ -18,37 +18,69 @@ export default function TopBar({ onMenuClick }: TopBarProps) {
     navigate('/login');
   };
 
+  const initial = (user?.username?.[0] ?? 'A').toUpperCase();
+
   return (
-    <header className="h-14 flex-shrink-0 flex items-center gap-2 sm:gap-4 px-3 sm:px-6 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+    <header
+      className="h-[54px] flex-shrink-0 flex items-center gap-3 px-[22px]"
+      style={{ background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}
+    >
       {/* Hamburger — mobile only */}
       <button
         onClick={onMenuClick}
-        className="md:hidden p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors flex-shrink-0"
+        className="md:hidden p-2 rounded-lg transition-colors flex-shrink-0"
+        style={{ color: 'var(--ink-3)' }}
         aria-label="Open menu"
       >
         <Menu className="w-5 h-5" />
       </button>
 
-      <GlobalSearch />
+      {/* Search */}
+      <div className="flex-1">
+        <GlobalSearch />
+      </div>
+
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {/* Live indicator */}
+        <span
+          className="hidden sm:flex items-center gap-[6px] px-[10px] py-[4px] rounded-full text-[11px] mono"
+          style={{ color: 'var(--ink-3)', border: '1px solid var(--line)' }}
+        >
+          <span
+            className="w-[6px] h-[6px] rounded-full flex-shrink-0"
+            style={{
+              background: 'var(--good)',
+              boxShadow: '0 0 0 2px rgba(141,224,138,0.2), 0 0 6px rgba(141,224,138,0.5)',
+            }}
+          />
+          live
+        </span>
 
-      <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0 ml-auto">
         {/* Theme toggle */}
         <button
           onClick={toggleTheme}
-          className="p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
+          className="p-[7px] rounded-lg transition-colors"
+          style={{ color: 'var(--ink-3)' }}
           title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
         >
-          {theme === 'light' ? (
-            <Moon className="w-4 h-4" />
-          ) : (
-            <Sun className="w-4 h-4" />
-          )}
+          {theme === 'light' ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
         </button>
 
-        {/* User info — hide label on very small screens */}
-        <div className="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-slate-700">
-          <User className="w-3.5 h-3.5 text-gray-500 dark:text-slate-400 flex-shrink-0" />
-          <span className="hidden sm:inline text-sm font-medium text-gray-700 dark:text-slate-200">
+        {/* User chip */}
+        <div
+          className="flex items-center gap-[8px] px-[10px] py-[4px] rounded-[6px]"
+          style={{ background: 'var(--surface-2)' }}
+        >
+          <div
+            className="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold flex-shrink-0"
+            style={{
+              background: 'linear-gradient(135deg, var(--accent), var(--accent-2))',
+              color: 'var(--accent-fg)',
+            }}
+          >
+            {initial}
+          </div>
+          <span className="hidden sm:inline text-[13px] font-medium" style={{ color: 'var(--ink-2)' }}>
             {user?.username}
           </span>
         </div>
@@ -56,7 +88,8 @@ export default function TopBar({ onMenuClick }: TopBarProps) {
         {/* Logout */}
         <button
           onClick={handleLogout}
-          className="p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+          className="p-[7px] rounded-lg transition-colors hover:text-bad"
+          style={{ color: 'var(--ink-4)' }}
           title="Logout"
         >
           <LogOut className="w-4 h-4" />