Really huge mass update; Getting everything up-to-spec and implementing a wide range of features

frontend/src/App.tsx

@@ -3,16 +3,19 @@ import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { AuthContext, useAuthProvider } from "./hooks/useAuth";
-import { useTheme } from "./hooks/useTheme";
+import { ThemeProvider, useTheme } from "./hooks/useTheme";
 import { Layout } from "./components/Layout";
 import { Login } from "./pages/Login";
+import { Overview } from "./pages/Overview";
 import { Dashboard } from "./pages/Dashboard";
 import { PreviewDetail } from "./pages/PreviewDetail";
 import { Settings } from "./pages/Settings";
 import { Repos } from "./pages/Repos";
+import { RepoConfig } from "./pages/RepoConfig";
 import { Admin } from "./pages/Admin";
 import { SetupWizard } from "./pages/SetupWizard";
 import { Privacy } from "./pages/Privacy";
+import { Loader2 } from "lucide-react";
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = React.useContext(AuthContext);
@@ -24,7 +27,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
 
   if (loading) return (
     <div className="min-h-screen flex items-center justify-center">
-      <div className="text-2xl animate-spin">⚙️</div>
+      <Loader2 size={32} className="animate-spin text-blue-600 dark:text-blue-400" />
     </div>
   );
 
@@ -48,9 +51,8 @@ function SetupCheck({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
-export default function App() {
-  const auth = useAuthProvider();
-  useTheme();
+function AppContent({ auth }: { auth: ReturnType<typeof useAuthProvider> }) {
+  const { resolvedTheme } = useTheme();
 
   return (
     <AuthContext.Provider value={auth}>
@@ -60,7 +62,7 @@ export default function App() {
         hideProgressBar={false}
         newestOnTop
         closeOnClick
-        theme="colored"
+        theme={resolvedTheme}
       />
       <Routes>
         <Route path="/login" element={
@@ -79,9 +81,11 @@ export default function App() {
             <SetupCheck>
               <Layout>
                 <Routes>
-                  <Route path="/" element={<Dashboard />} />
+                  <Route path="/" element={<Overview />} />
+                  <Route path="/previews" element={<Dashboard />} />
                   <Route path="/previews/:id" element={<PreviewDetail />} />
                   <Route path="/repos" element={<Repos />} />
+                  <Route path="/repos/:owner/:repo" element={<RepoConfig />} />
                   <Route path="/settings" element={<Settings />} />
                   <Route path="/admin" element={<Admin />} />
                   <Route path="*" element={<Navigate to="/" replace />} />
@@ -94,3 +98,13 @@ export default function App() {
     </AuthContext.Provider>
   );
 }
+
+export default function App() {
+  const auth = useAuthProvider();
+
+  return (
+    <ThemeProvider>
+      <AppContent auth={auth} />
+    </ThemeProvider>
+  );
+}