Visual redesign: design system, refined ops console aesthetic

- Full component library (Button, Input, Label, Select, Modal, Table, Badge, Card, etc.)
- Tailwind design tokens: IBM Plex Sans + JetBrains Mono, teal accent, semantic status colors
- NavBar with logo, responsive hamburger menu, real logout
- All pages redesigned: Login, Dashboard (KPI cards), Machines, SyncPairs, JobHistory, JobDetail, SSHKeys, Settings
- Fixed: hover:bg-gray-750 dead class, window.location.href navigation bug
- Replaced alert()/confirm() with sonner toasts and accessible modals
- Added ErrorBoundary, skip link, accessible modal dialogs (Radix)
- Icons: lucide-react throughout, copy/download buttons
- 1.0.5 → 1.0.6

web/src/App.tsx

@@ -1,14 +1,48 @@
-import { BrowserRouter, Routes, Route, Navigate, NavLink, Outlet } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+  Navigate,
+  NavLink,
+  Outlet,
+  useNavigate,
+} from 'react-router-dom';
 import { useState, useEffect } from 'react';
+import { Toaster } from 'sonner';
+import {
+  Database,
+  LayoutDashboard,
+  Server,
+  GitCompare,
+  History,
+  Key,
+  Settings as SettingsIcon,
+  LogOut,
+  Menu,
+  X,
+} from 'lucide-react';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { Spinner } from './components/ui/Spinner';
+import { Button } from './components/ui/Button';
+import { cn } from './lib/utils';
 import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
 import Machines from './pages/Machines';
 import SyncPairs from './pages/SyncPairs';
 import JobHistory from './pages/JobHistory';
 import JobDetail from './pages/JobDetail';
-import Settings from './pages/Settings';
+import SettingsPage from './pages/Settings';
 import SSHKeys from './pages/SSHKeys';
 
+const navItems = [
+  { to: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { to: '/machines', label: 'Machines', icon: Server },
+  { to: '/sync-pairs', label: 'Sync Pairs', icon: GitCompare },
+  { to: '/jobs', label: 'Jobs', icon: History },
+  { to: '/ssh-keys', label: 'SSH Keys', icon: Key },
+  { to: '/settings', label: 'Settings', icon: SettingsIcon },
+];
+
 function ProtectedRoute({ children }: { children: JSX.Element }) {
   const [authed, setAuthed] = useState<boolean | null>(null);
   useEffect(() => {
@@ -16,54 +50,155 @@ function ProtectedRoute({ children }: { children: JSX.Element }) {
       .then(r => setAuthed(r.ok))
       .catch(() => setAuthed(false));
   }, []);
-  if (authed === null) return <div className="p-4">Loading...</div>;
+  if (authed === null) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-canvas">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
   return authed ? children : <Navigate to="/login" />;
 }
 
 function NavBar() {
-  const navItems = [
-    { to: '/', label: 'Dashboard' },
-    { to: '/machines', label: 'Machines' },
-    { to: '/sync-pairs', label: 'Sync Pairs' },
-    { to: '/jobs', label: 'Jobs' },
-    { to: '/ssh-keys', label: 'SSH Keys' },
-    { to: '/settings', label: 'Settings' },
-  ];
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    try {
+      await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
+    } catch {}
+    localStorage.removeItem('auth');
+    navigate('/login');
+  };
 
   return (
-    <nav className="sticky top-0 z-50 bg-gray-900 border-b border-gray-700">
+    <header className="sticky top-0 z-50 bg-surface border-b border-border">
       <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center h-14 gap-1">
-          <span className="text-white font-bold text-lg mr-4">SyncServer</span>
-          {navItems.map(item => (
-            <NavLink
-              key={item.to}
-              to={item.to}
-              end={item.to === '/'}
-              className={({ isActive }) =>
-                `px-3 py-1.5 rounded text-sm font-medium transition-colors ${
-                  isActive
-                    ? 'text-white bg-gray-800'
-                    : 'text-gray-400 hover:text-white hover:bg-gray-800'
-                }`
-              }
+        <div className="flex items-center h-14 gap-6">
+          <a
+            href="/"
+            className="flex items-center gap-2.5 text-fg font-bold text-base hover:text-accent transition-colors shrink-0"
+          >
+            <div className="rounded-card bg-accent/10 p-1">
+              <Database className="h-4 w-4 text-accent" />
+            </div>
+            <span className="hidden sm:inline">SyncServer</span>
+          </a>
+
+          <nav className="hidden md:flex items-center gap-0.5 flex-1">
+            {navItems.map(item => {
+              const Icon = item.icon;
+              return (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  end={item.to === '/'}
+                  className={({ isActive }) =>
+                    cn(
+                      'flex items-center gap-1.5 px-3 py-1.5 rounded-card text-sm font-medium transition-all duration-150',
+                      isActive
+                        ? 'bg-surface-raised text-fg'
+                        : 'text-fg-muted hover:text-fg hover:bg-surface-raised'
+                    )
+                  }
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  {item.label}
+                </NavLink>
+              );
+            })}
+          </nav>
+
+          <div className="flex items-center gap-2 ml-auto">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={handleLogout}
+              className="text-fg-muted hover:text-fg hidden sm:flex"
+              title="Logout"
             >
-              {item.label}
-            </NavLink>
-          ))}
+              <LogOut className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setMobileOpen(v => !v)}
+              className="md:hidden text-fg-muted"
+            >
+              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </Button>
+          </div>
         </div>
+
+        {mobileOpen && (
+          <nav className="md:hidden pb-3 flex flex-col gap-0.5 animate-slide-up">
+            {navItems.map(item => {
+              const Icon = item.icon;
+              return (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  end={item.to === '/'}
+                  onClick={() => setMobileOpen(false)}
+                  className={({ isActive }) =>
+                    cn(
+                      'flex items-center gap-2 px-3 py-2 rounded-card text-sm font-medium transition-all',
+                      isActive
+                        ? 'bg-surface-raised text-fg'
+                        : 'text-fg-muted hover:text-fg hover:bg-surface-raised'
+                    )
+                  }
+                >
+                  <Icon className="h-4 w-4" />
+                  {item.label}
+                </NavLink>
+              );
+            })}
+            <button
+              onClick={() => {
+                setMobileOpen(false);
+                handleLogout();
+              }}
+              className="flex items-center gap-2 px-3 py-2 rounded-card text-sm font-medium text-fg-muted hover:text-fg hover:bg-surface-raised mt-1 border-t border-border pt-3"
+            >
+              <LogOut className="h-4 w-4" />
+              Logout
+            </button>
+          </nav>
+        )}
       </div>
-    </nav>
+    </header>
   );
 }
 
 function Layout() {
   return (
-    <div className="min-h-screen bg-gray-900">
+    <div className="min-h-screen bg-canvas">
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-card focus:bg-surface-raised focus:text-fg focus:outline-none focus:ring-2 focus:ring-accent/40"
+      >
+        Skip to content
+      </a>
       <NavBar />
-      <main>
+      <main id="main-content" className="max-w-7xl mx-auto px-4 py-6">
         <Outlet />
       </main>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          classNames: {
+            error: 'bg-surface-raised border border-rose-500/30 text-fg',
+            success: 'bg-surface-raised border border-emerald-500/30 text-fg',
+            warning: 'bg-surface-raised border border-amber-500/30 text-fg',
+            info: 'bg-surface-raised border border-sky-500/30 text-fg',
+          },
+        }}
+        theme="dark"
+        richColors
+        closeButton
+      />
     </div>
   );
 }
@@ -71,19 +206,27 @@ function Layout() {
 export default function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route element={<ProtectedRoute><Layout /></ProtectedRoute>}>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/machines" element={<Machines />} />
-          <Route path="/sync-pairs" element={<SyncPairs />} />
-          <Route path="/jobs" element={<JobHistory />} />
-          <Route path="/jobs/:id" element={<JobDetail />} />
-          <Route path="/ssh-keys" element={<SSHKeys />} />
-          <Route path="/settings" element={<Settings />} />
-        </Route>
-        <Route path="*" element={<Navigate to="/" />} />
-      </Routes>
+      <ErrorBoundary>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route
+            element={
+              <ProtectedRoute>
+                <Layout />
+              </ProtectedRoute>
+            }
+          >
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/machines" element={<Machines />} />
+            <Route path="/sync-pairs" element={<SyncPairs />} />
+            <Route path="/jobs" element={<JobHistory />} />
+            <Route path="/jobs/:id" element={<JobDetail />} />
+            <Route path="/ssh-keys" element={<SSHKeys />} />
+            <Route path="/settings" element={<SettingsPage />} />
+          </Route>
+          <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+      </ErrorBoundary>
     </BrowserRouter>
   );
 }