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

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>

web/src/App.tsx

@@ -1,65 +1,71 @@
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import {
   fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume,
-  adminStatus, adminLogin, adminLogout, adminDelete, adminRename,
+  adminStatus, adminLogin, adminLogout, adminDelete,
-  playUrl, fetchCategories, createCategory, assignCategories, clearBadges,
+  fetchCategories, partyStart, partyStop, subscribeEvents,
-  updateCategory, deleteCategory, partyStart, partyStop, subscribeEvents,
   getSelectedChannels, setSelectedChannel,
 } from './api';
 import type { VoiceChannelInfo, Sound, Category } from './types';
 import { getCookie, setCookie } from './cookies';
 
-/* ── Category Color Palette ── */
+const THEMES = [
+  { id: 'default', color: '#5865f2', label: 'Discord' },
+  { id: 'purple', color: '#9b59b6', label: 'Midnight' },
+  { id: 'forest', color: '#2ecc71', label: 'Forest' },
+  { id: 'sunset', color: '#e67e22', label: 'Sunset' },
+  { id: 'ocean', color: '#3498db', label: 'Ocean' },
+];
+
 const CAT_PALETTE = [
   '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6',
   '#f97316', '#06b6d4', '#ef4444', '#a855f7', '#84cc16',
   '#d946ef', '#0ea5e9', '#f43f5e', '#10b981',
 ];
 
-const THEMES = [
-  { id: 'midnight', label: 'Midnight' },
-  { id: 'daylight', label: 'Daylight' },
-  { id: 'neon', label: 'Neon' },
-  { id: 'vapor', label: 'Vapor' },
-  { id: 'matrix', label: 'Matrix' },
-];
-
 type Tab = 'all' | 'favorites' | 'recent';
-type BtnSize = 'S' | 'M' | 'L';
-const BTN_SIZES: { id: BtnSize; label: string }[] = [
-  { id: 'S', label: 'S' },
-  { id: 'M', label: 'M' },
-  { id: 'L', label: 'L' },
-];
 
 export default function App() {
-  /* ── State ── */
+  /* ── Data ── */
   const [sounds, setSounds] = useState<Sound[]>([]);
   const [total, setTotal] = useState(0);
   const [folders, setFolders] = useState<Array<{ key: string; name: string; count: number }>>([]);
   const [categories, setCategories] = useState<Category[]>([]);
 
+  /* ── Navigation ── */
   const [activeTab, setActiveTab] = useState<Tab>('all');
   const [activeFolder, setActiveFolder] = useState('');
   const [query, setQuery] = useState('');
 
+  /* ── Channels ── */
   const [channels, setChannels] = useState<VoiceChannelInfo[]>([]);
   const [selected, setSelected] = useState('');
   const selectedRef = useRef('');
+  const [channelOpen, setChannelOpen] = useState(false);
 
+  /* ── Playback ── */
   const [volume, setVolume] = useState(1);
-  const [favs, setFavs] = useState<Record<string, boolean>>({});
+  const [lastPlayed, setLastPlayed] = useState('');
-  const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'midnight');
-  const [btnSize, setBtnSize] = useState<BtnSize>(() => (localStorage.getItem('jb-btn-size') as BtnSize) || 'M');
-  const [isAdmin, setIsAdmin] = useState(false);
-  const [showAdmin, setShowAdmin] = useState(false);
 
+  /* ── Preferences ── */
+  const [favs, setFavs] = useState<Record<string, boolean>>({});
+  const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'default');
+  const [cardSize, setCardSize] = useState(() => parseInt(localStorage.getItem('jb-card-size') || '110'));
+
+  /* ── Party ── */
   const [chaosMode, setChaosMode] = useState(false);
   const [partyActiveGuilds, setPartyActiveGuilds] = useState<string[]>([]);
   const chaosModeRef = useRef(false);
 
-  const [lastPlayed, setLastPlayed] = useState('');
+  /* ── Admin ── */
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [showAdmin, setShowAdmin] = useState(false);
+  const [adminPwd, setAdminPwd] = useState('');
+
+  /* ── UI ── */
   const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
+  const [clock, setClock] = useState('');
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; sound: Sound } | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
 
   /* ── Refs ── */
   useEffect(() => { chaosModeRef.current = chaosMode; }, [chaosMode]);
@@ -74,6 +80,24 @@ export default function App() {
   const guildId = selected ? selected.split(':')[0] : '';
   const channelId = selected ? selected.split(':')[1] : '';
 
+  const selectedChannel = useMemo(() =>
+    channels.find(c => `${c.guildId}:${c.channelId}` === selected),
+  [channels, selected]);
+
+  /* ── Clock ── */
+  useEffect(() => {
+    const update = () => {
+      const now = new Date();
+      const h = String(now.getHours()).padStart(2, '0');
+      const m = String(now.getMinutes()).padStart(2, '0');
+      const s = String(now.getSeconds()).padStart(2, '0');
+      setClock(`${h}:${m}:${s}`);
+    };
+    update();
+    const id = setInterval(update, 1000);
+    return () => clearInterval(id);
+  }, []);
+
   /* ── Init ── */
   useEffect(() => {
     (async () => {
@@ -94,14 +118,20 @@ export default function App() {
 
   /* ── Theme ── */
   useEffect(() => {
-    document.body.setAttribute('data-theme', theme);
+    if (theme === 'default') document.body.removeAttribute('data-theme');
+    else document.body.setAttribute('data-theme', theme);
     localStorage.setItem('jb-theme', theme);
   }, [theme]);
 
-  /* ── Button Size ── */
+  /* ── Card size ── */
   useEffect(() => {
-    localStorage.setItem('jb-btn-size', btnSize);
+    const r = document.documentElement;
-  }, [btnSize]);
+    r.style.setProperty('--card-size', cardSize + 'px');
+    const ratio = cardSize / 110;
+    r.style.setProperty('--card-emoji', Math.round(28 * ratio) + 'px');
+    r.style.setProperty('--card-font', Math.max(9, Math.round(11 * ratio)) + 'px');
+    localStorage.setItem('jb-card-size', String(cardSize));
+  }, [cardSize]);
 
   /* ── SSE ── */
   useEffect(() => {
@@ -146,14 +176,13 @@ export default function App() {
         let folderParam = '__all__';
         if (activeTab === 'recent') folderParam = '__recent__';
         else if (activeFolder) folderParam = activeFolder;
-
         const s = await fetchSounds(query, folderParam, undefined, false);
         setSounds(s.items);
         setTotal(s.total);
         setFolders(s.folders);
       } catch (e: any) { notify(e?.message || 'Sounds-Fehler', 'error'); }
     })();
-  }, [activeTab, activeFolder, query]);
+  }, [activeTab, activeFolder, query, refreshKey]);
 
   /* ── Favs persistence ── */
   useEffect(() => {
@@ -174,6 +203,13 @@ export default function App() {
     }
   }, [selected]);
 
+  /* ── Close dropdowns on outside click ── */
+  useEffect(() => {
+    const handler = () => { setChannelOpen(false); setCtxMenu(null); };
+    document.addEventListener('click', handler);
+    return () => document.removeEventListener('click', handler);
+  }, []);
+
   /* ── Actions ── */
   async function handlePlay(s: Sound) {
     if (!selected) return notify('Bitte einen Voice-Channel auswählen', 'error');
@@ -190,8 +226,8 @@ export default function App() {
   }
 
   async function handleRandom() {
-    if (!sounds.length || !selected) return;
+    if (!displaySounds.length || !selected) return;
-    const rnd = sounds[Math.floor(Math.random() * sounds.length)];
+    const rnd = displaySounds[Math.floor(Math.random() * displaySounds.length)];
     handlePlay(rnd);
   }
 
@@ -205,11 +241,32 @@ export default function App() {
     }
   }
 
+  async function handleChannelSelect(ch: VoiceChannelInfo) {
+    const v = `${ch.guildId}:${ch.channelId}`;
+    setSelected(v);
+    setChannelOpen(false);
+    try { await setSelectedChannel(ch.guildId, ch.channelId); } catch { }
+  }
+
+  function toggleFav(key: string) {
+    setFavs(prev => ({ ...prev, [key]: !prev[key] }));
+  }
+
+  async function handleAdminLogin() {
+    try {
+      const ok = await adminLogin(adminPwd);
+      if (ok) { setIsAdmin(true); setAdminPwd(''); notify('Admin eingeloggt'); }
+      else notify('Falsches Passwort', 'error');
+    } catch { notify('Login fehlgeschlagen', 'error'); }
+  }
+
+  async function handleAdminLogout() {
+    try { await adminLogout(); setIsAdmin(false); notify('Ausgeloggt'); } catch { }
+  }
+
   /* ── Computed ── */
   const displaySounds = useMemo(() => {
-    if (activeTab === 'favorites') {
+    if (activeTab === 'favorites') return sounds.filter(s => favs[s.relativePath ?? s.fileName]);
-      return sounds.filter(s => favs[s.relativePath ?? s.fileName]);
-    }
     return sounds;
   }, [sounds, activeTab, favs]);
 
@@ -225,109 +282,180 @@ export default function App() {
     return m;
   }, [visibleFolders]);
 
-  /* ── Admin State ── */
+  const channelsByGuild = useMemo(() => {
-  const [adminPwd, setAdminPwd] = useState('');
+    const groups: Record<string, VoiceChannelInfo[]> = {};
+    channels.forEach(c => {
+      if (!groups[c.guildName]) groups[c.guildName] = [];
+      groups[c.guildName].push(c);
+    });
+    return groups;
+  }, [channels]);
 
-  async function handleAdminLogin() {
+  const clockMain = clock.slice(0, 5);
-    try {
+  const clockSec = clock.slice(5);
-      const ok = await adminLogin(adminPwd);
-      if (ok) { setIsAdmin(true); setAdminPwd(''); notify('Admin eingeloggt'); }
-      else notify('Falsches Passwort', 'error');
-    } catch { notify('Login fehlgeschlagen', 'error'); }
-  }
 
-  async function handleAdminLogout() {
+  /* ════════════════════════════════════════════
-    try { await adminLogout(); setIsAdmin(false); notify('Ausgeloggt'); } catch { }
+     RENDER
-  }
+     ════════════════════════════════════════════ */
-
-  /* ── Render ── */
   return (
-    <div className={`app-shell ${chaosMode ? 'party-active' : ''}`} data-btn-size={btnSize}>
+    <div className="app">
+      {chaosMode && <div className="party-overlay active" />}
 
-      {/* ════════ Header ════════ */}
+      {/* ═══ TOPBAR ═══ */}
-      <header className="header">
+      <header className="topbar">
-        <div className="logo">JUKEBOX</div>
+        <div className="topbar-left">
+          <div className="app-logo">
+            <span className="material-icons" style={{ fontSize: 16, color: 'white' }}>music_note</span>
+          </div>
+          <span className="app-title">Soundboard</span>
 
-        <div className="header-search">
+          {/* Channel Dropdown */}
+          <div className="channel-dropdown" onClick={e => e.stopPropagation()}>
+            <button
+              className={`channel-btn ${channelOpen ? 'open' : ''}`}
+              onClick={() => setChannelOpen(!channelOpen)}
+            >
+              <span className="material-icons cb-icon">headset</span>
+              {selected && <span className="channel-status" />}
+              <span className="channel-label">{selectedChannel?.channelName || 'Channel...'}</span>
+              <span className={`material-icons chevron`}>expand_more</span>
+            </button>
+            {channelOpen && (
+              <div className="channel-menu visible">
+                {Object.entries(channelsByGuild).map(([guild, chs]) => (
+                  <React.Fragment key={guild}>
+                    <div className="channel-menu-header">{guild}</div>
+                    {chs.map(ch => (
+                      <div
+                        key={`${ch.guildId}:${ch.channelId}`}
+                        className={`channel-option ${`${ch.guildId}:${ch.channelId}` === selected ? 'active' : ''}`}
+                        onClick={() => handleChannelSelect(ch)}
+                      >
+                        <span className="material-icons co-icon">volume_up</span>
+                        {ch.channelName}
+                      </div>
+                    ))}
+                  </React.Fragment>
+                ))}
+                {channels.length === 0 && (
+                  <div className="channel-option" style={{ color: 'var(--text-faint)', cursor: 'default' }}>
+                    Keine Channels verfügbar
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="clock-wrap">
+          <div className="clock">{clockMain}<span className="clock-seconds">{clockSec}</span></div>
+        </div>
+
+        <div className="topbar-right">
+          {selected && (
+            <div className="connection">
+              <span className="conn-dot" />
+              Verbunden
+            </div>
+          )}
+          <button
+            className={`admin-btn-icon ${isAdmin ? 'active' : ''}`}
+            onClick={() => setShowAdmin(true)}
+            title="Admin"
+          >
+            <span className="material-icons">settings</span>
+          </button>
+        </div>
+      </header>
+
+      {/* ═══ TOOLBAR ═══ */}
+      <div className="toolbar">
+        <div className="cat-tabs">
+          <button
+            className={`cat-tab ${activeTab === 'all' ? 'active' : ''}`}
+            onClick={() => { setActiveTab('all'); setActiveFolder(''); }}
+          >
+            Alle
+            <span className="tab-count">{total}</span>
+          </button>
+          <button
+            className={`cat-tab ${activeTab === 'recent' ? 'active' : ''}`}
+            onClick={() => { setActiveTab('recent'); setActiveFolder(''); }}
+          >
+            Neu hinzugefügt
+          </button>
+          <button
+            className={`cat-tab ${activeTab === 'favorites' ? 'active' : ''}`}
+            onClick={() => { setActiveTab('favorites'); setActiveFolder(''); }}
+          >
+            Favoriten
+            {favCount > 0 && <span className="tab-count">{favCount}</span>}
+          </button>
+        </div>
+
+        <div className="search-wrap">
           <span className="material-icons search-icon">search</span>
           <input
+            className="search-input"
             type="text"
-            placeholder="Sound suchen..."
+            placeholder="Suchen..."
             value={query}
             onChange={e => setQuery(e.target.value)}
           />
           {query && (
             <button className="search-clear" onClick={() => setQuery('')}>
-              <span className="material-icons" style={{ fontSize: 16 }}>close</span>
+              <span className="material-icons" style={{ fontSize: 14 }}>close</span>
             </button>
           )}
         </div>
 
-        <div className="header-meta">
+        <div className="toolbar-spacer" />
-          <div className="sound-count">
-            <strong>{total}</strong> Sounds
-          </div>
 
-          <div className="size-toggle" title="Button-Größe">
+        <button className="tb-btn random" onClick={handleRandom} title="Zufälliger Sound">
-            {BTN_SIZES.map(s => (
+          <span className="material-icons tb-icon">shuffle</span>
-              <button
+          Random
-                key={s.id}
-                className={`size-opt ${btnSize === s.id ? 'active' : ''}`}
-                onClick={() => setBtnSize(s.id)}
-              >
-                {s.label}
         </button>
-            ))}
+
+        <button
+          className={`tb-btn party ${chaosMode ? 'active' : ''}`}
+          onClick={toggleParty}
+          title="Party Mode"
+        >
+          <span className="material-icons tb-icon">{chaosMode ? 'celebration' : 'auto_awesome'}</span>
+          {chaosMode ? 'Party!' : 'Party'}
+        </button>
+
+        <button className="tb-btn stop" onClick={handleStop} title="Alle stoppen">
+          <span className="material-icons tb-icon">stop</span>
+          Stop
+        </button>
+
+        <div className="size-control" title="Button-Größe">
+          <span className="material-icons sc-icon">grid_view</span>
+          <input
+            type="range"
+            className="size-slider"
+            min={80}
+            max={160}
+            value={cardSize}
+            onChange={e => setCardSize(parseInt(e.target.value))}
+          />
         </div>
 
-          <select
+        <div className="theme-selector">
-            className="select-clean"
-            value={theme}
-            onChange={e => setTheme(e.target.value)}
-          >
           {THEMES.map(t => (
-              <option key={t.id} value={t.id}>{t.label}</option>
+            <div
+              key={t.id}
+              className={`theme-dot ${theme === t.id ? 'active' : ''}`}
+              style={{ background: t.color }}
+              title={t.label}
+              onClick={() => setTheme(t.id)}
+            />
           ))}
-          </select>
-
-          <button
-            className={`admin-toggle ${isAdmin ? 'is-admin' : ''}`}
-            onClick={() => setShowAdmin(true)}
-            title="Admin"
-          >
-            <span className="material-icons" style={{ fontSize: 18 }}>settings</span>
-          </button>
         </div>
-      </header>
+      </div>
 
-      {/* ════════ Tab Bar ════════ */}
+      {/* ═══ FOLDER CHIPS ═══ */}
-      <nav className="tab-bar">
-        <button
-          className={`tab-btn ${activeTab === 'all' ? 'active' : ''}`}
-          onClick={() => { setActiveTab('all'); setActiveFolder(''); }}
-        >
-          <span className="material-icons" style={{ fontSize: 16 }}>library_music</span>
-          All Sounds
-          <span className="tab-badge">{total}</span>
-        </button>
-        <button
-          className={`tab-btn ${activeTab === 'favorites' ? 'active' : ''}`}
-          onClick={() => { setActiveTab('favorites'); setActiveFolder(''); }}
-        >
-          <span className="material-icons" style={{ fontSize: 16 }}>star</span>
-          Favorites
-          {favCount > 0 && <span className="tab-badge">{favCount}</span>}
-        </button>
-        <button
-          className={`tab-btn ${activeTab === 'recent' ? 'active' : ''}`}
-          onClick={() => { setActiveTab('recent'); setActiveFolder(''); }}
-        >
-          <span className="material-icons" style={{ fontSize: 16 }}>schedule</span>
-          Recently Added
-        </button>
-      </nav>
-
-      {/* ════════ Category Filter ════════ */}
       {activeTab === 'all' && visibleFolders.length > 0 && (
         <div className="category-strip">
           {visibleFolders.map(f => {
@@ -338,133 +466,108 @@ export default function App() {
                 key={f.key}
                 className={`cat-chip ${isActive ? 'active' : ''}`}
                 onClick={() => setActiveFolder(isActive ? '' : f.key)}
-                style={isActive ? { borderColor: color, color, background: `${color}12` } : undefined}
+                style={isActive ? { borderColor: color, color } : undefined}
               >
                 <span className="cat-dot" style={{ background: color }} />
                 {f.name.replace(/\s*\(\d+\)\s*$/, '')}
-                <span style={{ opacity: 0.5, fontSize: 10, fontWeight: 700 }}>{f.count}</span>
+                <span className="cat-count">{f.count}</span>
               </button>
             );
           })}
         </div>
       )}
 
-      {/* ════════ Sound Grid ════════ */}
+      {/* ═══ MAIN ═══ */}
-      <div className="sounds-area">
+      <main className="main">
         {displaySounds.length === 0 ? (
-          <div className="sounds-empty">
+          <div className="empty-state visible">
-            <span className="material-icons">
+            <div className="empty-emoji">{activeTab === 'favorites' ? '⭐' : '🔇'}</div>
-              {activeTab === 'favorites' ? 'star_border' : 'music_off'}
+            <div className="empty-title">
-            </span>
-            <p>
               {activeTab === 'favorites'
-                ? 'Noch keine Favorites — klick den Stern!'
+                ? 'Noch keine Favoriten'
                 : query
                   ? `Kein Sound für "${query}" gefunden`
                   : 'Keine Sounds vorhanden'}
-            </p>
+            </div>
+            <div className="empty-desc">
+              {activeTab === 'favorites'
+                ? 'Klick den Stern auf einem Sound!'
+                : 'Hier gibt\'s noch nichts zu hören.'}
+            </div>
           </div>
         ) : (
-          <div className="sounds-grid">
+          <div className="sound-grid">
             {displaySounds.map((s, idx) => {
               const key = s.relativePath ?? s.fileName;
               const isFav = !!favs[key];
-              const color = s.folder ? folderColorMap[s.folder] || '#555' : '#555';
-              const isNew = s.badges?.includes('new');
-              const isTop = s.badges?.includes('top');
               const isPlaying = lastPlayed === s.name;
+              const isNew = s.isRecent || s.badges?.includes('new');
+              const initial = s.name.charAt(0).toUpperCase();
+              const folderColor = s.folder ? (folderColorMap[s.folder] || 'var(--accent)') : 'var(--accent)';
 
               return (
-                <button
+                <div
                   key={key}
-                  className={`sound-btn ${isPlaying ? 'is-playing' : ''}`}
+                  className={`sound-card ${isPlaying ? 'playing' : ''}`}
-                  onClick={() => handlePlay(s)}
+                  style={{ animationDelay: `${Math.min(idx * 20, 400)}ms` }}
-                  title={`${s.name}${s.folder ? ` (${s.folder})` : ''}`}
-                  style={{ animationDelay: `${Math.min(idx * 8, 400)}ms` }}
-                >
-                  <span className="cat-bar" style={{ background: color }} />
-                  <span className="sound-label">{s.name}</span>
-
-                  {isNew && <span className="badge-dot new" />}
-                  {isTop && !isNew && <span className="badge-dot top" />}
-
-                  <span
-                    className={`fav-star ${isFav ? 'is-fav' : ''}`}
                   onClick={e => {
-                      e.stopPropagation();
+                    const card = e.currentTarget;
-                      setFavs(prev => ({ ...prev, [key]: !prev[key] }));
+                    const rect = card.getBoundingClientRect();
+                    const ripple = document.createElement('div');
+                    ripple.className = 'ripple';
+                    const sz = Math.max(rect.width, rect.height);
+                    ripple.style.width = ripple.style.height = sz + 'px';
+                    ripple.style.left = (e.clientX - rect.left - sz / 2) + 'px';
+                    ripple.style.top = (e.clientY - rect.top - sz / 2) + 'px';
+                    card.appendChild(ripple);
+                    setTimeout(() => ripple.remove(), 500);
+                    handlePlay(s);
                   }}
+                  onContextMenu={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setCtxMenu({
+                      x: Math.min(e.clientX, window.innerWidth - 170),
+                      y: Math.min(e.clientY, window.innerHeight - 140),
+                      sound: s,
+                    });
+                  }}
+                  title={`${s.name}${s.folder ? ` (${s.folder})` : ''}`}
                 >
-                    <span className="material-icons" style={{ fontSize: 14 }}>
+                  {isNew && <span className="new-badge">NEU</span>}
-                      {isFav ? 'star' : 'star_border'}
+                  <span
+                    className={`fav-star ${isFav ? 'active' : ''}`}
+                    onClick={e => { e.stopPropagation(); toggleFav(key); }}
+                  >
+                    <span className="material-icons fav-icon">{isFav ? 'star' : 'star_border'}</span>
                   </span>
-                  </span>
+                  <span className="sound-emoji" style={{ color: folderColor }}>{initial}</span>
-                </button>
+                  <span className="sound-name">{s.name}</span>
+                  {s.folder && <span className="sound-duration">{s.folder}</span>}
+                  <div className="playing-indicator">
+                    <div className="wave-bar" /><div className="wave-bar" />
+                    <div className="wave-bar" /><div className="wave-bar" />
+                  </div>
+                </div>
               );
             })}
           </div>
         )}
-      </div>
+      </main>
 
-      {/* ════════ Control Bar ════════ */}
+      {/* ═══ BOTTOM BAR ═══ */}
-      <div className="control-bar">
+      <div className="bottombar">
-        <div className="ctrl-section left">
-          <div className="channel-wrap">
-            <span className="material-icons">headset_mic</span>
-            <select
-              className="channel-select"
-              value={selected}
-              onChange={async e => {
-                const v = e.target.value;
-                setSelected(v);
-                try {
-                  const [g, c] = v.split(':');
-                  await setSelectedChannel(g, c);
-                } catch { }
-              }}
-            >
-              <option value="" disabled>Channel...</option>
-              {channels.map(c => (
-                <option key={`${c.guildId}:${c.channelId}`} value={`${c.guildId}:${c.channelId}`}>
-                  {c.guildName} · {c.channelName}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {lastPlayed && (
         <div className="now-playing">
-              <span className="material-icons" style={{ fontSize: 14, verticalAlign: -2, marginRight: 4 }}>play_arrow</span>
+          <div className={`np-waves ${lastPlayed ? 'active' : ''}`}>
-              <span>{lastPlayed}</span>
+            <div className="np-wave-bar" /><div className="np-wave-bar" />
+            <div className="np-wave-bar" /><div className="np-wave-bar" />
           </div>
-          )}
+          <span className="np-label">Spielt:</span>
+          <span className="np-name">{lastPlayed || '—'}</span>
         </div>
-
+        <div className="volume-section">
-        <div className="ctrl-section center">
-          <button className="ctrl-btn stop" onClick={handleStop} title="Stop">
-            <span className="material-icons">stop</span>
-            <span>Stop</span>
-          </button>
-
-          <button className="ctrl-btn shuffle" onClick={handleRandom} title="Zufälliger Sound">
-            <span className="material-icons">shuffle</span>
-            <span>Random</span>
-          </button>
-
-          <button
-            className={`ctrl-btn party ${chaosMode ? 'active' : ''}`}
-            onClick={toggleParty}
-            title="Partymode"
-          >
-            <span className="material-icons">{chaosMode ? 'celebration' : 'auto_awesome'}</span>
-            <span>{chaosMode ? 'Party!' : 'Party'}</span>
-          </button>
-        </div>
-
-        <div className="ctrl-section right">
-          <div className="volume-wrap">
           <span
-              className="material-icons"
+            className="material-icons volume-icon"
             onClick={() => {
               const newVol = volume > 0 ? 0 : 0.5;
               setVolume(newVol);
@@ -474,33 +577,74 @@ export default function App() {
             {volume === 0 ? 'volume_off' : volume < 0.5 ? 'volume_down' : 'volume_up'}
           </span>
           <input
-              className="volume-slider"
             type="range"
-              min={0} max={1} step={0.01}
+            className="volume-slider"
+            min={0}
+            max={1}
+            step={0.01}
             value={volume}
             onChange={async e => {
               const v = parseFloat(e.target.value);
               setVolume(v);
               if (guildId) try { await setVolumeLive(guildId, v); } catch { }
             }}
-              style={{ '--fill': `${Math.round(volume * 100)}%` } as React.CSSProperties}
+            style={{ '--vol': `${Math.round(volume * 100)}%` } as React.CSSProperties}
           />
           <span className="volume-pct">{Math.round(volume * 100)}%</span>
         </div>
       </div>
-      </div>
 
-      {/* ════════ Notification Toast ════════ */}
+      {/* ═══ CONTEXT MENU ═══ */}
+      {ctxMenu && (
+        <div
+          className="ctx-menu visible"
+          style={{ left: ctxMenu.x, top: ctxMenu.y }}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="ctx-item" onClick={() => { handlePlay(ctxMenu.sound); setCtxMenu(null); }}>
+            <span className="material-icons ctx-icon">play_arrow</span>
+            Abspielen
+          </div>
+          <div className="ctx-item" onClick={() => {
+            toggleFav(ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName);
+            setCtxMenu(null);
+          }}>
+            <span className="material-icons ctx-icon">
+              {favs[ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName] ? 'star' : 'star_border'}
+            </span>
+            Favorit
+          </div>
+          {isAdmin && (
+            <>
+              <div className="ctx-sep" />
+              <div className="ctx-item danger" onClick={async () => {
+                const path = ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName;
+                try {
+                  await adminDelete([path]);
+                  notify('Sound gelöscht');
+                  setRefreshKey(k => k + 1);
+                } catch { notify('Löschen fehlgeschlagen', 'error'); }
+                setCtxMenu(null);
+              }}>
+                <span className="material-icons ctx-icon">delete</span>
+                Löschen
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* ═══ TOAST ═══ */}
       {notification && (
         <div className={`toast ${notification.type}`}>
-          <span className="material-icons" style={{ fontSize: 16 }}>
+          <span className="material-icons toast-icon">
             {notification.type === 'error' ? 'error_outline' : 'check_circle'}
           </span>
           {notification.msg}
         </div>
       )}
 
-      {/* ════════ Admin Panel Overlay ════════ */}
+      {/* ═══ ADMIN PANEL ═══ */}
       {showAdmin && (
         <div className="admin-overlay" onClick={e => { if (e.target === e.currentTarget) setShowAdmin(false); }}>
           <div className="admin-panel">
@@ -510,11 +654,10 @@ export default function App() {
                 <span className="material-icons" style={{ fontSize: 18 }}>close</span>
               </button>
             </h3>
-
             {!isAdmin ? (
               <div>
                 <div className="admin-field">
-                  <label>Password</label>
+                  <label>Passwort</label>
                   <input
                     type="password"
                     value={adminPwd}
@@ -523,18 +666,12 @@ export default function App() {
                     placeholder="Admin-Passwort..."
                   />
                 </div>
-                <button className="admin-btn primary" onClick={handleAdminLogin}>
+                <button className="admin-btn-action primary" onClick={handleAdminLogin}>Login</button>
-                  Login
-                </button>
               </div>
             ) : (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-                <p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+                <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>Eingeloggt als Admin</p>
-                  Eingeloggt als Admin
+                <button className="admin-btn-action outline" onClick={handleAdminLogout}>Logout</button>
-                </p>
-                <button className="admin-btn outline" onClick={handleAdminLogout}>
-                  Logout
-                </button>
               </div>
             )}
           </div>