MVP with new UX

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

@@ -0,0 +1,79 @@
+/**
+ * @ai-summary Mobile-optimized vehicles screen with Material Design 3
+ */
+
+import React from 'react';
+import { Box, Typography, Grid } from '@mui/material';
+import { useVehicles } from '../hooks/useVehicles';
+import { VehicleMobileCard } from './VehicleMobileCard';
+import { Vehicle } from '../types/vehicles.types';
+
+interface VehiclesMobileScreenProps {
+  onVehicleSelect?: (vehicle: Vehicle) => void;
+}
+
+const Section: React.FC<{ title: string; children: React.ReactNode; right?: React.ReactNode }> = ({
+  title,
+  children,
+  right
+}) => (
+  <Box sx={{ mb: 3 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+      <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+        {title}
+      </Typography>
+      {right}
+    </Box>
+    {children}
+  </Box>
+);
+
+export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
+  onVehicleSelect
+}) => {
+  const { data: vehicles, isLoading } = useVehicles();
+
+  if (isLoading) {
+    return (
+      <Box sx={{ pb: 10 }}>
+        <Box sx={{ textAlign: 'center', py: 12 }}>
+          <Typography color="text.secondary">Loading vehicles...</Typography>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (!vehicles?.length) {
+    return (
+      <Box sx={{ pb: 10 }}>
+        <Section title="Vehicles">
+          <Box sx={{ textAlign: 'center', py: 12 }}>
+            <Typography color="text.secondary" sx={{ mb: 2 }}>
+              No vehicles added yet
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              Add your first vehicle to get started
+            </Typography>
+          </Box>
+        </Section>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ pb: 10 }}>
+      <Section title="Vehicles">
+        <Grid container spacing={2}>
+          {vehicles.map((vehicle) => (
+            <Grid item xs={12} key={vehicle.id}>
+              <VehicleMobileCard
+                vehicle={vehicle}
+                onClick={() => onVehicleSelect?.(vehicle)}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Section>
+    </Box>
+  );
+};