feat(web): redesign frontend to Discord-style Soundboard UI

Browse source

Complete rewrite of App.tsx and styles.css to match the Discord-style
soundboard mockup design:

- Topbar: logo, custom channel dropdown, centered live clock, connection status
- Toolbar: category tabs (Alle/Neu/Favoriten), search, Random/Party/Stop
  buttons, card size slider, theme color dots (5 themes)
- Main: responsive square card grid with initial letter avatars, ripple
  effects, playing animations, favorite stars, NEW badges
- Bottom bar: now-playing wave indicator, volume slider
- Context menu on right-click (play, favorite, admin delete)
- Party mode overlay, toast notifications, admin panel
- All API integration preserved (SSE, channels, volume, play, party)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

...

This commit is contained in:

Bot 2026-03-01 15:20:33 +01:00

parent e0bbe03851

commit da0ae2b9a6

2 changed files with 1383 additions and 1233 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

1991

web/src/styles.css

View file

File diff suppressed because it is too large Load diff