From 93c22e844e5dbf2d568093678cdb882350ff3ba9 Mon Sep 17 00:00:00 2001
From: Daniel Arroyo <darroylat@gmail.com>
Date: Tue, 7 Jul 2026 20:40:24 -0400
Subject: [PATCH] Add persistent navbar with SSH Keys link

Refactor App.tsx to use Layout + Outlet pattern with sticky navbar
containing: Dashboard | Machines | Sync Pairs | Jobs | SSH Keys | Settings.
Clean up redundant button row from Dashboard and inline SSH Keys links.
---
 web/src/App.tsx             | 66 ++++++++++++++++++++++++++++++++-----
 web/src/pages/Dashboard.tsx |  6 ----
 web/src/pages/Machines.tsx  |  6 +---
 web/src/pages/Settings.tsx  |  9 -----
 4 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 8a0fc58..ba9e1c4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, NavLink, Outlet } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import Login from './pages/Login';
 import Dashboard from './pages/Dashboard';
@@ -20,18 +20,68 @@ function ProtectedRoute({ children }: { children: JSX.Element }) {
   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' },
+  ];
+
+  return (
+    <nav className="sticky top-0 z-50 bg-gray-900 border-b border-gray-700">
+      <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'
+                }`
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-900">
+      <NavBar />
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
 export default function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/login" element={<Login />} />
-        <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
-        <Route path="/machines" element={<ProtectedRoute><Machines /></ProtectedRoute>} />
-        <Route path="/sync-pairs" element={<ProtectedRoute><SyncPairs /></ProtectedRoute>} />
-        <Route path="/jobs" element={<ProtectedRoute><JobHistory /></ProtectedRoute>} />
-        <Route path="/jobs/:id" element={<ProtectedRoute><JobDetail /></ProtectedRoute>} />
-        <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
-        <Route path="/ssh-keys" element={<ProtectedRoute><SSHKeys /></ProtectedRoute>} />
+        <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>
     </BrowserRouter>
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index de02c5c..363f672 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { api, Machine, Job } from '../api/client';
 
 export default function Dashboard() {
@@ -66,11 +65,6 @@ export default function Dashboard() {
           </table>
         )}
       </div>
-      <div className="mt-4 flex gap-4">
-        <Link to="/machines" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Machines</Link>
-        <Link to="/sync-pairs" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Sync Pairs</Link>
-        <Link to="/jobs" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">All Jobs</Link>
-      </div>
     </div>
   );
 }
diff --git a/web/src/pages/Machines.tsx b/web/src/pages/Machines.tsx
index 6eafbb3..30c2ca3 100644
--- a/web/src/pages/Machines.tsx
+++ b/web/src/pages/Machines.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { api, Machine, SSHKey } from '../api/client';
 
 export default function Machines() {
@@ -77,10 +76,7 @@ export default function Machines() {
   return (
     <div className="p-6">
       <div className="flex justify-between items-center mb-6">
-        <div className="flex items-center gap-4">
-          <h1 className="text-2xl font-bold">Machines</h1>
-          <Link to="/ssh-keys" className="text-sm text-blue-400 hover:text-blue-300">Manage SSH Keys</Link>
-        </div>
+        <h1 className="text-2xl font-bold">Machines</h1>
         <button onClick={() => setShowForm(true)} className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
           Add Machine
         </button>
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 3ee9592..9ba1cf2 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 
 export default function Settings() {
   const [pubKey, setPubKey] = useState('');
@@ -36,14 +35,6 @@ export default function Settings() {
         </button>
       </div>
 
-      <div className="bg-gray-800 rounded-lg p-4 mb-6">
-        <h2 className="text-lg font-semibold mb-3">SSH Keys</h2>
-        <p className="text-gray-400 text-sm mb-3">
-          Manage SSH key pairs for authenticating to remote machines. Go to the{' '}
-          <Link to="/ssh-keys" className="text-blue-400 hover:text-blue-300">SSH Keys page</Link>.
-        </p>
-      </div>
-
       <div className="bg-gray-800 rounded-lg p-4">
         <h2 className="text-lg font-semibold mb-3">Quick Reference</h2>
         <div className="text-gray-400 text-sm space-y-2">