Add style icons for Movie Formats, Music Formats and Game Platforms

[mforce]

Problem

Movie formats (DVD, Blu-ray, UHD, VHS, Digital), music formats (CD, Vinyl) and game platforms (PS5, Switch, Xbox, etc.) are currently rendered as plain text pills/badges or checkbox labels. They carry a lot of visual weight in both the read-only detail view and the edit form, but have no iconic treatment to make them instantly recognizable at a glance.

Current rendering

Context	Movie formats	Music format	Game platform
Detail view	Text pill in hero section (DetailView.tsx:116)	Text pill inline with year (DetailView.tsx:230)	Platform label in subtitle + Digital/Physical pill (DetailView.tsx:330-345)
Edit form	Toggle buttons with text labels (MovieForm.tsx:229)	<Select> dropdown (AlbumForm.tsx:192)	<Select> dropdown with search (GameForm.tsx:164)
List cards	Joined text string in tertiary line (MoviesList.tsx)	—	—

Proposed solution

Add small SVG icon components for each format/platform value and display them alongside the text labels everywhere these values appear.

1. Icon components

Create a shared icon module:

src/client/components/FormatIcons.tsx

Exporting:

// Movie format icons
export function MovieFormatIcon({ format }: { format: MovieFormat }) { … }

// Music format icons
export function MusicFormatIcon({ format }: { format: MusicFormat }) { … }

// Game platform icon
export function PlatformIcon({ platform }: { platform: GamePlatform }) { … }

Each icon is a small inline SVG (~20×20px) with a distinctive silhouette:

Movie formats:

• DVD — disc with "DVD" ring label
• Blu-ray — disc with blue accent ring
• UHD Blu-ray — disc with "4K" or crown accent
• VHS — cassette tape outline
• Digital — download/cloud icon

Music formats:

• CD — disc with center hole
• Vinyl — disc with grooves and large center label
• Other — generic disc/question mark

Game platforms: Use a unified icon strategy since there are ~30 platforms. Two approaches:

1. Curated set — hand-design ~15-20 recognizable platform silhouettes (PS5, Switch, Xbox, Steam Deck, NES, etc.) and fall back to a generic console icon for lesser-used ones
2. Logo-style badges — small monochrome brand-inspired marks (e.g., PS circle-cross-triangle-square motif, Nintendo "N" mark, Xbox "X", Steam deck outline)

Approach 1 is safer from a licensing standpoint. The generic fallback covers Other and any future additions.

2. Update detail view (DetailView.tsx)

• Movie formats: prepend icon to each format pill → <MovieFormatIcon /> DVD
• Music format: prepend icon to format pill in year row → <MusicFormatIcon /> CD
• Game platform: show <PlatformIcon /> next to the platform label in subtitle area

3. Update edit forms

• MovieForm.tsx: prepend icon to each format toggle button
• AlbumForm.tsx: show icon in the Select dropdown (or beside the selected value)
• GameForm.tsx: show icon beside selected platform in dropdown

4. Update list cards

• MoviesList.tsx: show small format icon(s) in the tertiary line instead of (or alongside) the joined text
• MusicList.tsx / GamesList.tsx: same treatment where format/platform is shown

Design constraints

• Icons should be monochrome, inheriting the category theme color via currentColor
• Size: 16-20px in detail view, 14-16px in list cards
• No external icon library dependency — keep as inline SVGs in one file
• Fallback: if an icon variant is missing, render nothing (graceful, no blank boxes)

File changes

File	Change
src/client/components/FormatIcons.tsx	New — SVG icon components
src/client/components/DetailView.tsx	Prepend icons to format/platform pills
src/client/components/MovieForm.tsx	Prepend icons to format toggle buttons
src/client/components/AlbumForm.tsx	Show icon in/beside format select
src/client/components/GameForm.tsx	Show icon in/beside platform select
src/client/pages/MoviesList.tsx	Show icon(s) in tertiary line
src/client/pages/MusicList.tsx	Show icon where applicable
src/client/pages/GamesList.tsx	Show icon where applicable

Out of scope

• Animated or colored icons
• Icons for DigitalStore values (separate concern)
• Icons in the filters panel (text-only filters are fine)

Verification

• npm run build clean (no TypeScript errors)
• npm test passes
• Each format/platform renders its icon on the detail page
• Each format/platform shows its icon in the edit form
• Missing/unmapped platforms fall back to generic icon without errors
• Icons scale correctly in list/medium/big card view modes