feat(ui): badge polish, DnD feedback, typography system, image lightbox
Badge component:
- Dismissible variant with X button (onDismiss prop)
- Pulse animation variant (pulse prop)
- Enhanced dot-only mode for standalone colored circles
Drag-and-drop visual feedback:
- PlaylistTrackListSortableItem: opacity + shadow + ring on drag, border insertion line
- QueueView: dragOverIndex tracking, bg-primary/5 drop zone highlight
- PlaylistDetailView: same DnD feedback pattern
Typography standardization:
- 9 utility classes: text-display, text-heading-1..4, text-body-lg, text-body, text-caption, text-label
- Applied to 8 page headings (Dashboard, Settings, Library, Search, etc.)
- DESIGN_TOKENS.md updated with typography reference
Image lightbox:
- Keyboard navigation: ArrowLeft/Right for gallery, Escape to close
- Image counter pill: "2 / 5" with backdrop-blur
- Zoom toggle: click to zoom in/out with scale transition
- Loading skeleton: pulse placeholder while image loads
Co-authored-by: Cursor <cursoragent@cursor.com>
8f69e0ab0a