The preset selector currently shows text labels like "Vertical 9:16" and "Square 1:1". Adding small visual aspect ratio thumbnails next to each label would make the options much easier to scan and understand at a glance.
What to build
Add a small SVG or CSS rectangle thumbnail next to each preset label in the PresetSelector component. The thumbnail should:
- Show the correct aspect ratio (e.g. a tall narrow box for 9:16, a wide box for 16:9)
- Use the design system colours (
var(--border) fill, var(--accent) border)
- Scale consistently (fit within a ~24x24 px bounding box)
Preset aspect ratios to cover (from src/lib/presets.ts):
- 9:16 (vertical), 16:9 (horizontal), 1:1 (square), 4:5, 4:3, 3:4, 21:9, 9:21, 2:3, 3:2
Files to modify
src/components/PresetSelector.tsx — add thumbnail next to each option label
Acceptance criteria
Screen Recording Required
Your PR for this issue must include a screen recording showing the feature working on your local machine (bun run dev → http://localhost:3000). PRs without a recording will not be merged.
See CONTRIBUTING.md for how to record.
The preset selector currently shows text labels like "Vertical 9:16" and "Square 1:1". Adding small visual aspect ratio thumbnails next to each label would make the options much easier to scan and understand at a glance.
What to build
Add a small SVG or CSS rectangle thumbnail next to each preset label in the
PresetSelectorcomponent. The thumbnail should:var(--border)fill,var(--accent)border)Preset aspect ratios to cover (from
src/lib/presets.ts):Files to modify
src/components/PresetSelector.tsx— add thumbnail next to each option labelAcceptance criteria
Screen Recording Required
Your PR for this issue must include a screen recording showing the feature working on your local machine (
bun run dev→ http://localhost:3000). PRs without a recording will not be merged.