UI refactor (claude)

.gitignore

@@ -5,3 +5,9 @@ __pycache__
 package-lock.json
 .parcel-cache
 *.old
+
+data/*.db*
+
+# macOS duplicate copies
+* 2
+* 2.*

Dockerfile

@@ -14,7 +14,7 @@ RUN npm i --package-lock-only
 RUN npm ci
 
 COPY ./client ./client
-COPY ./tailwind.config.js ./.postcssrc ./
+COPY ./tailwind.config.js ./postcss.config.js ./vite.config.ts ./tsconfig.json ./
 RUN npm run build
 
 # RUNTIME

client/App.tsx

@@ -1,39 +1,63 @@
-import React from 'react';
-import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
+import { lazy, Suspense } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
-import { BASE_URL } from './api';
+import { BASE_URL } from './api'
+import { ToastProvider } from './components/Toast'
 
-import Login from './pages/Login';
-import New from './pages/New';
+import Login from './pages/Login'
 import Home from './pages/Home'
 import AllFlights from './pages/AllFlights'
-import Statistics from './pages/Statistics';
-import Settings from './pages/Settings';
+import { AppShell } from './components/shell/AppShell'
+import { Spinner } from './components/ui/Spinner'
 
-import Navbar from './components/Navbar';
-import { ToastProvider } from './components/Toast';
+const New = lazy(() => import('./pages/New'))
+const Statistics = lazy(() => import('./pages/Statistics'))
+const Settings = lazy(() => import('./pages/Settings'))
+
+function Loading() {
+    return (
+        <div className="flex justify-center py-20">
+            <Spinner />
+        </div>
+    )
+}
 
 export function App() {
     return (
         <ToastProvider>
             <BrowserRouter basename={BASE_URL}>
             <Routes>
                 <Route path="/login" element={<Login />} />
-                <Route element={
-                    <>
-                        <Navbar />
-                        <div className="h-full p-4 overflow-x-auto">
-                            <Outlet />
-                        </div>
-                    </>}>
+                <Route element={<AppShell />}>
                     <Route path="/" element={<Home />} />
-                    <Route path="/new" element={<New />} />
+                    <Route
+                        path="/new"
+                        element={
+                            <Suspense fallback={<Loading />}>
+                                <New />
+                            </Suspense>
+                        }
+                    />
                     <Route path="/flights" element={<AllFlights />} />
-                    <Route path="/statistics" element={<Statistics />} />
-                    <Route path="/settings" element={<Settings />} />
+                    <Route
+                        path="/statistics"
+                        element={
+                            <Suspense fallback={<Loading />}>
+                                <Statistics />
+                            </Suspense>
+                        }
+                    />
+                    <Route
+                        path="/settings"
+                        element={
+                            <Suspense fallback={<Loading />}>
+                                <Settings />
+                            </Suspense>
+                        }
+                    />
                 </Route>
             </Routes>
         </BrowserRouter>
         </ToastProvider>
-    );
+    )
 }