Homepage Improvements

frontend/src/App.tsx

@@ -4,7 +4,7 @@
 
 import React, { useState, useEffect, useTransition, useCallback, lazy } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useIsAuthInitialized } from './core/auth/auth-gate';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -238,6 +238,7 @@ const AddVehicleScreen: React.FC<AddVehicleScreenProps> = ({ onBack, onAdded })
 
 function App() {
   const { isLoading, isAuthenticated, user } = useAuth0();
+  const location = useLocation();
   const isAuthGateReady = useIsAuthInitialized();
   const [_isPending, startTransition] = useTransition();
   console.log('[DEBUG App] Render check - isLoading:', isLoading, 'isAuthenticated:', isAuthenticated, 'isAuthGateReady:', isAuthGateReady);
@@ -363,6 +364,10 @@ function App() {
 
   console.log('MotoVaultPro status:', { isLoading, isAuthenticated, mobileMode, activeScreen, vehicleSubScreen, userAgent: navigator.userAgent });
 
+  const isGarageRoute = location.pathname === '/garage' || location.pathname.startsWith('/garage/');
+  const isCallbackRoute = location.pathname === '/callback';
+  const shouldShowHomePage = !isGarageRoute && !isCallbackRoute;
+
   // Enhanced navigation handlers for mobile
   const handleVehicleSelect = useCallback((vehicle: Vehicle) => {
     setSelectedVehicle(vehicle);
@@ -416,7 +421,18 @@ function App() {
     );
   }
 
-  if (!isAuthenticated) {
+  if (isCallbackRoute) {
+    return (
+      <ThemeProvider theme={md3Theme}>
+        <CssBaseline />
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-lg">Processing login...</div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  if (shouldShowHomePage) {
     return (
       <ThemeProvider theme={md3Theme}>
         <CssBaseline />
@@ -426,6 +442,10 @@ function App() {
     );
   }
 
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
   // Wait for auth gate to be ready before rendering protected routes
   // This prevents a race condition where the page renders before the auth token is ready
   if (!isAuthGateReady) {
@@ -615,17 +635,16 @@ function App() {
         <Layout mobileMode={false}>
         <RouteSuspense>
           <Routes>
-            <Route path="/" element={<Navigate to="/vehicles" replace />} />
-            <Route path="/callback" element={<div>Processing login...</div>} />
-            <Route path="/vehicles" element={<VehiclesPage />} />
-            <Route path="/vehicles/:id" element={<VehicleDetailPage />} />
-            <Route path="/fuel-logs" element={<FuelLogsPage />} />
-            <Route path="/documents" element={<DocumentsPage />} />
-            <Route path="/documents/:id" element={<DocumentDetailPage />} />
-            <Route path="/maintenance" element={<MaintenancePage />} />
-            <Route path="/stations" element={<StationsPage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="*" element={<Navigate to="/vehicles" replace />} />
+            <Route path="/garage" element={<Navigate to="/garage/vehicles" replace />} />
+            <Route path="/garage/vehicles" element={<VehiclesPage />} />
+            <Route path="/garage/vehicles/:id" element={<VehicleDetailPage />} />
+            <Route path="/garage/fuel-logs" element={<FuelLogsPage />} />
+            <Route path="/garage/documents" element={<DocumentsPage />} />
+            <Route path="/garage/documents/:id" element={<DocumentDetailPage />} />
+            <Route path="/garage/maintenance" element={<MaintenancePage />} />
+            <Route path="/garage/stations" element={<StationsPage />} />
+            <Route path="/garage/settings" element={<SettingsPage />} />
+            <Route path="*" element={<Navigate to="/garage/vehicles" replace />} />
           </Routes>
         </RouteSuspense>
         <DebugInfo />