Initial Commit

frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

@@ -45,7 +45,7 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
   onLogFuel
 }) => {
   const displayName = vehicle.nickname || 
-    (vehicle.year && vehicle.make ? `${vehicle.year} ${vehicle.make}` : 'Vehicle');
+    [vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ') || 'Vehicle';
   const displayModel = vehicle.model || 'Unknown Model';
 
   return (

frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx

@@ -32,7 +32,7 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
   compact = false
 }) => {
   const displayName = vehicle.nickname || 
-    (vehicle.year && vehicle.make ? `${vehicle.year} ${vehicle.make}` : 'Vehicle');
+    [vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ') || 'Vehicle';
   const displayModel = vehicle.model || 'Unknown Model';
   
   return (

frontend/src/features/vehicles/mobile/VehiclesMobileScreen.tsx

@@ -4,7 +4,8 @@
  */
 
 import React, { useTransition, useEffect } from 'react';
-import { Box, Typography, Grid } from '@mui/material';
+import { Box, Typography, Grid, Fab } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import { useVehicles } from '../hooks/useVehicles';
 import { useOptimisticVehicles } from '../hooks/useOptimisticVehicles';
 import { useVehicleSearch } from '../hooks/useVehicleTransitions';
@@ -14,6 +15,7 @@ import { Vehicle } from '../types/vehicles.types';
 
 interface VehiclesMobileScreenProps {
   onVehicleSelect?: (vehicle: Vehicle) => void;
+  onAddVehicle?: () => void;
 }
 
 const Section: React.FC<{ title: string; children: React.ReactNode; right?: React.ReactNode }> = ({
@@ -33,7 +35,8 @@ const Section: React.FC<{ title: string; children: React.ReactNode; right?: Reac
 );
 
 export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
-  onVehicleSelect
+  onVehicleSelect,
+  onAddVehicle
 }) => {
   const { data: vehicles, isLoading } = useVehicles();
   const [_isPending, startTransition] = useTransition();
@@ -66,7 +69,12 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
     return (
       <Box sx={{ pb: 10 }}>
         <Box sx={{ textAlign: 'center', py: 12 }}>
-          <Typography color="text.secondary">Loading vehicles...</Typography>
+          <Typography color="text.secondary" sx={{ mb: 2 }}>
+            Loading your vehicles...
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            Please wait a moment
+          </Typography>
         </Box>
       </Box>
     );
@@ -74,7 +82,7 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
 
   if (!optimisticVehicles.length) {
     return (
-      <Box sx={{ pb: 10 }}>
+      <Box sx={{ pb: 10, position: 'relative' }}>
         <Section title="Vehicles">
           <Box sx={{ textAlign: 'center', py: 12 }}>
             <Typography color="text.secondary" sx={{ mb: 2 }}>
@@ -85,13 +93,27 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
             </Typography>
           </Box>
         </Section>
+
+        {/* Floating Action Button */}
+        <Fab
+          color="primary"
+          sx={{
+            position: 'fixed',
+            bottom: 80, // Above bottom navigation
+            right: 16,
+            zIndex: 1000
+          }}
+          onClick={() => onAddVehicle?.()}
+        >
+          <AddIcon />
+        </Fab>
       </Box>
     );
   }
 
   return (
     <MobileVehiclesSuspense>
-      <Box sx={{ pb: 10 }}>
+      <Box sx={{ pb: 10, position: 'relative' }}>
         <Section title={`Vehicles ${isOptimisticPending ? '(Updating...)' : ''}`}>
           <Grid container spacing={2}>
             {filteredVehicles.map((vehicle) => (
@@ -104,6 +126,20 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
             ))}
           </Grid>
         </Section>
+
+        {/* Floating Action Button */}
+        <Fab
+          color="primary"
+          sx={{
+            position: 'fixed',
+            bottom: 80, // Above bottom navigation
+            right: 16,
+            zIndex: 1000
+          }}
+          onClick={() => onAddVehicle?.()}
+        >
+          <AddIcon />
+        </Fab>
       </Box>
     </MobileVehiclesSuspense>
   );