feat: implement auth, projects, and frontend foundation

2026-05-17 20:21:55 +00:00
parent e7819bfc82
commit 71d9fe6406
88 changed files with 10936 additions and 47 deletions
@@ -0,0 +1,56 @@
+import { Link, NavLink, Outlet } from "react-router-dom";
+
+import { useAuth } from "../state/auth";
+
+const NAV_ITEMS = [
+  { to: "/", label: "Dashboard" },
+  { to: "/projects", label: "Projects" },
+  { to: "/repositories", label: "Repositories" },
+  { to: "/ssh-keys", label: "SSH Keys" },
+  { to: "/settings", label: "Settings" }
+];
+
+export const AppShell = () => {
+  const { user, logout } = useAuth();
+
+  return (
+    <div className="shell">
+      <header className="shell-header">
+        <Link className="brand" to="/">
+          Headquarter
+        </Link>
+        <div className="header-actions">
+          <div className="user-chip">{user?.name ?? "User"}</div>
+          <button
+            className="ghost-button"
+            onClick={() => {
+              void logout();
+            }}
+            type="button"
+          >
+            Logout
+          </button>
+        </div>
+      </header>
+
+      <div className="shell-body">
+        <aside className="shell-nav" aria-label="Primary navigation">
+          {NAV_ITEMS.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
+              end={item.to === "/"}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </aside>
+
+        <main className="shell-content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};