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.
This commit is contained in:
2026-07-07 20:40:24 -04:00
parent bfa006f4ab
commit 93c22e844e
4 changed files with 59 additions and 28 deletions
-6
View File
@@ -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>
);
}
+1 -5
View File
@@ -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>
-9
View File
@@ -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">