egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: vehicle cards show Year Make Model and hide empty VIN (#162) #167

New Issue
Closed
opened 2026-02-13 22:22:53 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:22:53 +00:00
Owner
Copy Link

Relates to #162

Severity: High

Problem

Vehicle list cards show brand logo, nickname/name, VIN, license, and odometer -- but no year/make/model line on the desktop card itself (only nickname). The card for "YOTA" doesn't tell you it's a 2025 Toyota Camry unless you click in. Additionally, several cards show "VIN:" with nothing after it (empty), which takes up space and looks broken.

Recommendation

  • Show Year Make Model as a subtitle on each card (e.g. "2025 Toyota Camry")
  • Hide the VIN row entirely when no VIN is provided, or show a subtle "No VIN" placeholder

Acceptance Criteria

  • Vehicle cards display Year Make Model as a subtitle line
  • Empty VIN rows are hidden or show a consistent placeholder
  • Card layout remains clean and scannable
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: High ## Problem Vehicle list cards show brand logo, nickname/name, VIN, license, and odometer -- but no year/make/model line on the desktop card itself (only nickname). The card for "YOTA" doesn't tell you it's a 2025 Toyota Camry unless you click in. Additionally, several cards show "VIN:" with nothing after it (empty), which takes up space and looks broken. ## Recommendation - Show Year Make Model as a subtitle on each card (e.g. "2025 Toyota Camry") - Hide the VIN row entirely when no VIN is provided, or show a subtle "No VIN" placeholder ## Acceptance Criteria - Vehicle cards display Year Make Model as a subtitle line - Empty VIN rows are hidden or show a consistent placeholder - Card layout remains clean and scannable - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:23:24 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:23:39 +00:00
egullickson commented 2026-02-14 01:15:18 +00:00
Author
Owner
Copy Link

Implementation Plan (from #162 -- Milestone 7)

Phase: 3 (Vehicle display consistency) | Priority: High | Depends on: #165 (Milestone 1 -- shared utilities) | Blocks: None

Context

Vehicle cards only show the display name (nickname or fallback). Users need to see Year Make Model as a subtitle for quick identification. VIN is shown even when empty on desktop cards.

Implementation

1. In frontend/src/features/vehicles/components/VehicleCard.tsx (desktop):

  • Import getVehicleSubtitle from @/core/utils/vehicleDisplay
  • Add Year Make Model subtitle line below the display name using getVehicleSubtitle(vehicle)
  • Wrap VIN display (line ~54) in conditional: {vehicle.vin && <Typography>VIN: {vehicle.vin}</Typography>}
  • VIN currently shows unconditionally -- this hides it when empty

2. In frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx (mobile):

  • Import getVehicleSubtitle from @/core/utils/vehicleDisplay
  • Add Year Make Model subtitle below the display name using getVehicleSubtitle(vehicle) (show only if subtitle is non-empty)
  • Mobile card does NOT currently show VIN, so no VIN changes needed here

Files

  • frontend/src/features/vehicles/components/VehicleCard.tsx
  • frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx

Commit Convention

chore: add Year Make Model subtitle to vehicle cards and hide empty VIN (refs #167)

Test Criteria

  • Desktop cards show "2025 Toyota Camry" subtitle below the display name
  • Mobile cards show the same subtitle
  • Empty VIN is hidden on desktop cards (no blank "VIN:" row)
  • Vehicles with only a nickname still show Year Make Model as subtitle
  • Vehicles with insufficient data (less than 2 of year/make/model) show no subtitle
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 7) **Phase**: 3 (Vehicle display consistency) | **Priority**: High | **Depends on**: #165 (Milestone 1 -- shared utilities) | **Blocks**: None ### Context Vehicle cards only show the display name (nickname or fallback). Users need to see Year Make Model as a subtitle for quick identification. VIN is shown even when empty on desktop cards. ### Implementation **1. In `frontend/src/features/vehicles/components/VehicleCard.tsx` (desktop):** - Import `getVehicleSubtitle` from `@/core/utils/vehicleDisplay` - Add Year Make Model subtitle line below the display name using `getVehicleSubtitle(vehicle)` - Wrap VIN display (line ~54) in conditional: `{vehicle.vin && <Typography>VIN: {vehicle.vin}</Typography>}` - VIN currently shows unconditionally -- this hides it when empty **2. In `frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx` (mobile):** - Import `getVehicleSubtitle` from `@/core/utils/vehicleDisplay` - Add Year Make Model subtitle below the display name using `getVehicleSubtitle(vehicle)` (show only if subtitle is non-empty) - Mobile card does NOT currently show VIN, so no VIN changes needed here ### Files - `frontend/src/features/vehicles/components/VehicleCard.tsx` - `frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx` ### Commit Convention ``` chore: add Year Make Model subtitle to vehicle cards and hide empty VIN (refs #167) ``` ### Test Criteria - Desktop cards show "2025 Toyota Camry" subtitle below the display name - Mobile cards show the same subtitle - Empty VIN is hidden on desktop cards (no blank "VIN:" row) - Vehicles with only a nickname still show Year Make Model as subtitle - Vehicles with insufficient data (less than 2 of year/make/model) show no subtitle - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-14 01:40:47 +00:00
egullickson commented 2026-02-14 01:41:31 +00:00
Author
Owner
Copy Link

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

Desktop VehicleCard.tsx:

  • Added getVehicleSubtitle import and usage
  • Year Make Model subtitle displayed below display name (conditional on 2+ parts)
  • VIN row now conditionally hidden when empty ({vehicle.vin && ...})

Mobile VehicleMobileCard.tsx:

  • Replaced hardcoded vehicle.model || 'Unknown Model' with getVehicleSubtitle(vehicle)
  • Subtitle conditionally rendered (hidden when insufficient data)

Verification

  • TypeScript type-check: PASS
  • ESLint: PASS
  • Commit: 56be3ed on branch issue-162-ux-design-audit-cleanup

Verdict: PASS | Next: Visual verification on mobile and desktop viewports

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes **Desktop `VehicleCard.tsx`:** - Added `getVehicleSubtitle` import and usage - Year Make Model subtitle displayed below display name (conditional on 2+ parts) - VIN row now conditionally hidden when empty (`{vehicle.vin && ...}`) **Mobile `VehicleMobileCard.tsx`:** - Replaced hardcoded `vehicle.model || 'Unknown Model'` with `getVehicleSubtitle(vehicle)` - Subtitle conditionally rendered (hidden when insufficient data) ### Verification - TypeScript type-check: PASS - ESLint: PASS - Commit: `56be3ed` on branch `issue-162-ux-design-audit-cleanup` *Verdict*: PASS | *Next*: Visual verification on mobile and desktop viewports
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No Label
status
in-progress
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No project
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#167
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?