final touches for beta skymoney (at least i think)

web/src/App.tsx

@@ -1,63 +1,18 @@
-import { Link, NavLink, Route, Routes } from "react-router-dom";
-import DashboardPage from "./pages/DashboardPage";
-import IncomePage from "./pages/IncomePage";
-import TransactionsPage from "./pages/TransactionsPage";
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+import { SessionTimeoutWarning } from "./components/SessionTimeoutWarning";
+import NavBar from "./components/NavBar";
 
 export default function App() {
   return (
-    <div className="min-h-screen bg-[--color-bg] text-[--color-fg]">
-      <TopNav />
-      <main className="container">
-        <Routes>
-          <Route path="/" element={<DashboardPage />} />
-          <Route path="/income" element={<IncomePage />} />
-          <Route path="/transactions" element={<TransactionsPage />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
+    <>
+      <SessionTimeoutWarning />
+      <NavBar />
+      <main className="container py-6 h-full">
+        <Suspense fallback={<div className="muted text-sm">Loading…</div>}>
+          <Outlet />
+        </Suspense>
       </main>
-      <footer className="container py-8 text-center text-sm muted">
-        SkyMoney • {new Date().getFullYear()}
-      </footer>
-    </div>
-  );
-}
-
-function TopNav() {
-  return (
-    <header className="border-b border-[--color-ink] bg-[--color-panel]">
-      <div className="container h-14 flex items-center gap-4">
-        <Link to="/" className="font-bold">
-          SkyMoney
-        </Link>
-        <Nav to="/">Dashboard</Nav>
-        <Nav to="/income">Income</Nav>
-        <Nav to="/transactions">Transactions</Nav>
-        <div className="ml-auto text-xs muted">demo user</div>
-      </div>
-    </header>
-  );
-}
-
-function Nav({ to, children }: { to: string; children: React.ReactNode }) {
-  return (
-    <NavLink
-      to={to}
-      className={({ isActive }) =>
-        "px-3 py-1 rounded-xl hover:bg-[--color-ink]/60 " +
-        (isActive ? "bg-[--color-ink]" : "")
-      }
-      end
-    >
-      {children}
-    </NavLink>
-  );
-}
-
-function NotFound() {
-  return (
-    <div className="p-6">
-      <h1 className="text-xl font-bold mb-2">404</h1>
-      <p className="muted">This page got lost in the budget cuts.</p>
-    </div>
+    </>
   );
 }