Files
silo/web/src/App.tsx
Forbes 118c32dc14 feat(web): scaffold React + Vite + TypeScript frontend
Phase 1 of frontend migration (epic #6, issue #7).

Project setup (web/):
- React 19, React Router 7, Vite 6, TypeScript 5.7
- Catppuccin Mocha theme CSS variables matching existing Go templates
- Vite dev proxy to Go backend at :8080 for /api/*, /login, /logout,
  /auth/*, /health, /ready

Shared infrastructure:
- api/client.ts: typed fetch wrapper (get/post/put/del) with 401
  redirect and credentials:include for session cookies
- api/types.ts: TypeScript interfaces for all API response types
  (User, Item, Project, Schema, Revision, BOMEntry, Audit, Error)
- context/AuthContext.tsx: AuthProvider calling GET /api/auth/me
- hooks/useAuth.ts: useAuth() hook exposing user/loading/logout

UI shell:
- AppShell.tsx: header nav matching current Go template navbar
  (Items, Projects, Schemas, Audit, Settings) with role badges
  (admin=mauve, editor=blue, viewer=teal) and active tab highlighting
- LoginPage: redirects to Go-served /login during transition
- Placeholder pages: Items, Projects, Schemas fetch from API and
  display data in tables; Audit shows summary stats; Settings shows
  current user profile

Go server changes:
- routes.go: serve web/dist/ at /app/* with SPA index.html fallback
  (only activates when web/dist/ directory exists)
- .gitignore: web/node_modules/, web/dist/
- Makefile: web-install, web-dev, web-build targets
2026-02-06 16:19:52 -06:00

31 lines
1.0 KiB
TypeScript

import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './hooks/useAuth';
import { AppShell } from './components/AppShell';
import { LoginPage } from './pages/LoginPage';
import { ItemsPage } from './pages/ItemsPage';
import { ProjectsPage } from './pages/ProjectsPage';
import { SchemasPage } from './pages/SchemasPage';
import { AuditPage } from './pages/AuditPage';
import { SettingsPage } from './pages/SettingsPage';
export function App() {
const { user, loading } = useAuth();
if (loading) return null;
if (!user) return <LoginPage />;
return (
<Routes>
<Route element={<AppShell />}>
<Route index element={<ItemsPage />} />
<Route path="projects" element={<ProjectsPage />} />
<Route path="schemas" element={<SchemasPage />} />
<Route path="audit" element={<AuditPage />} />
<Route path="settings" element={<SettingsPage />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Route>
</Routes>
);
}