Skip to content

feat(gallery): add Style Detail Modal with phone UI controls preview#155

Open
jlinux wants to merge 1 commit intonextlevelbuilder:mainfrom
jlinux:feat/style-detail-modal
Open

feat(gallery): add Style Detail Modal with phone UI controls preview#155
jlinux wants to merge 1 commit intonextlevelbuilder:mainfrom
jlinux:feat/style-detail-modal

Conversation

@jlinux
Copy link

@jlinux jlinux commented Feb 10, 2026

Summary

  • Click any StyleCard to open a full-screen detail modal with a two-column layout
  • Left column: iPhone mockup frame rendering 9 interactive UI controls (buttons, text input, toggle switch, checkbox, radio, card, badges, slider, nav bar) styled with the selected style's CSS properties
  • Right column: color palette, metadata badges, expandable CSS code / AI prompt / checklist / details sections
  • Responsive (desktop two-column, mobile single-column), ESC / backdrop click to close, dark mode support

Test plan

  • Click a StyleCard → modal opens with phone mockup + details panel
  • Verify all 9 controls inside the phone frame use the style's colors, border-radius, shadows, fonts
  • Toggle switches and slider are interactive (click/drag)
  • ESC key closes the modal
  • Clicking the backdrop closes the modal
  • Dark mode toggle works correctly inside the modal
  • Mobile viewport shows single-column layout

🤖 Generated with Claude Code

Click any StyleCard to open a full-screen modal showing the style applied
to 9 interactive phone UI controls (buttons, inputs, toggles, checkboxes,
radios, cards, badges, slider, nav bar) inside an iPhone mockup frame.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant