From 56be3ed34829f40f98e7f7c2d09d8effdf2cd26e Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Fri, 13 Feb 2026 19:41:23 -0600
Subject: [PATCH] chore: add Year Make Model subtitle to vehicle cards and hide
 empty VIN (refs #167)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../vehicles/components/VehicleCard.tsx       | 21 +++++++++++++------
 .../vehicles/mobile/VehicleMobileCard.tsx     | 12 ++++++-----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/vehicles/components/VehicleCard.tsx b/frontend/src/features/vehicles/components/VehicleCard.tsx
index 276b85d..81a4784 100644
--- a/frontend/src/features/vehicles/components/VehicleCard.tsx
+++ b/frontend/src/features/vehicles/components/VehicleCard.tsx
@@ -9,7 +9,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { Vehicle } from '../types/vehicles.types';
 import { useUnits } from '../../../core/units/UnitsContext';
 import { VehicleImage } from './VehicleImage';
-import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
+import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
 
 interface VehicleCardProps {
   vehicle: Vehicle;
@@ -26,6 +26,7 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
 }) => {
   const { formatDistance } = useUnits();
   const displayName = getVehicleLabel(vehicle);
+  const subtitle = getVehicleSubtitle(vehicle);
 
   return (
     <Card 
@@ -46,13 +47,21 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
         <CardContent>
           <VehicleImage vehicle={vehicle} height={96} />
           
-          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
+          <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
             {displayName}
           </Typography>
-          
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
-            VIN: {vehicle.vin}
-          </Typography>
+
+          {subtitle && (
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+              {subtitle}
+            </Typography>
+          )}
+
+          {vehicle.vin && (
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+              VIN: {vehicle.vin}
+            </Typography>
+          )}
           
           {vehicle.licensePlate && (
             <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
diff --git a/frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx b/frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
index 14aec11..316703f 100644
--- a/frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
+++ b/frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import { Card, CardActionArea, Box, Typography } from '@mui/material';
 import { Vehicle } from '../types/vehicles.types';
 import { VehicleImage } from '../components/VehicleImage';
-import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
+import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
 
 interface VehicleMobileCardProps {
   vehicle: Vehicle;
@@ -20,7 +20,7 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
   compact = false
 }) => {
   const displayName = getVehicleLabel(vehicle);
-  const displayModel = vehicle.model || 'Unknown Model';
+  const subtitle = getVehicleSubtitle(vehicle);
   
   return (
     <Card 
@@ -37,9 +37,11 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
           <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
             {displayName}
           </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {displayModel}
-          </Typography>
+          {subtitle && (
+            <Typography variant="body2" color="text.secondary">
+              {subtitle}
+            </Typography>
+          )}
           {vehicle.licensePlate && (
             <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
               {vehicle.licensePlate}