From 6d161f3482e044f5e0d435ac55fc1bab7c889aa5 Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daddelolymp.de>
Date: Wed, 11 Mar 2026 11:36:29 +0100
Subject: [PATCH] Centralize color theme: single picker in Settings modal

- Add Settings button (gear icon) to header
- Add Settings modal with unified color theme picker
- Move theme state to App.tsx, apply data-theme on .hub-app root
- Global CSS themes: ember, amethyst, jade, ocean, rose
- Remove per-plugin theme pickers from Soundboard and Radio
- Remove per-plugin theme CSS from soundboard.css and styles.css
- Radio globe colors update via MutationObserver on theme change
- Single localStorage key: hub-theme (replaces jb-theme + radio-theme)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/App.tsx                              |  59 ++++-
 web/src/plugins/radio/RadioTab.tsx           |  38 ++--
 web/src/plugins/soundboard/SoundboardTab.tsx |  26 +--
 web/src/plugins/soundboard/soundboard.css    |  47 ----
 web/src/styles.css                           | 227 ++++++++++++++-----
 5 files changed, 245 insertions(+), 152 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 03968ed..ca4e00b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -48,6 +48,14 @@ export function registerTab(pluginName: string, component: React.FC<{ data: any;
 
 type UpdateStatus = 'idle' | 'checking' | 'available' | 'downloading' | 'ready' | 'upToDate' | 'error';
 
+const APP_THEMES = [
+  { id: 'default', color: '#e67e22', label: 'Ember' },
+  { id: 'purple', color: '#9b59b6', label: 'Amethyst' },
+  { id: 'forest', color: '#2ecc71', label: 'Jade' },
+  { id: 'ocean', color: '#3498db', label: 'Ocean' },
+  { id: 'cherry', color: '#e74c6f', label: 'Rose' },
+];
+
 export default function App() {
   const [connected, setConnected] = useState(false);
   const [plugins, setPlugins] = useState<PluginInfo[]>([]);
@@ -58,8 +66,16 @@ export default function App() {
     localStorage.setItem('hub_activeTab', tab);
   };
   const [showVersionModal, setShowVersionModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
   const [pluginData, setPluginData] = useState<Record<string, any>>({});
 
+  // ── Global Theme ──
+  const [theme, setThemeRaw] = useState(() => localStorage.getItem('hub-theme') || 'default');
+  const setTheme = (t: string) => {
+    setThemeRaw(t);
+    localStorage.setItem('hub-theme', t);
+  };
+
   // ── Unified Auth State ──
   const [user, setUser] = useState<AuthUser>({ authenticated: false });
   const [providers, setProviders] = useState<AuthProviders>({ discord: false, steam: false, admin: false });
@@ -248,7 +264,7 @@ export default function App() {
   }
 
   return (
-    <div className="hub-app">
+    <div className="hub-app" data-theme={theme}>
       <header className="hub-header">
         <div className="hub-header-left">
           <span className="hub-logo">{'\u{1F3AE}'}</span>
@@ -310,6 +326,16 @@ export default function App() {
             )}
           </button>
 
+          <button
+            className="hub-settings-btn"
+            onClick={() => setShowSettingsModal(true)}
+            title="Einstellungen"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </button>
           <button
             className="hub-refresh-btn"
             onClick={() => window.location.reload()}
@@ -343,6 +369,37 @@ export default function App() {
       </header>
 
 
+      {/* Settings Modal */}
+      {showSettingsModal && (
+        <div className="hub-settings-overlay" onClick={() => setShowSettingsModal(false)}>
+          <div className="hub-settings-modal" onClick={e => e.stopPropagation()}>
+            <div className="hub-settings-modal-header">
+              <span>Einstellungen</span>
+              <button className="hub-settings-modal-close" onClick={() => setShowSettingsModal(false)}>
+                {'\u2715'}
+              </button>
+            </div>
+            <div className="hub-settings-modal-body">
+              <div className="hub-settings-section">
+                <span className="hub-settings-section-label">Farbschema</span>
+                <div className="hub-settings-theme-grid">
+                  {APP_THEMES.map(t => (
+                    <button
+                      key={t.id}
+                      className={`hub-settings-theme-btn ${theme === t.id ? 'active' : ''}`}
+                      onClick={() => setTheme(t.id)}
+                    >
+                      <span className="hub-settings-theme-dot" style={{ background: t.color }} />
+                      <span className="hub-settings-theme-label">{t.label}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showVersionModal && (
         <div className="hub-version-overlay" onClick={() => setShowVersionModal(false)}>
           <div className="hub-version-modal" onClick={e => e.stopPropagation()}>
diff --git a/web/src/plugins/radio/RadioTab.tsx b/web/src/plugins/radio/RadioTab.tsx
index 60b9c89..629d08a 100644
--- a/web/src/plugins/radio/RadioTab.tsx
+++ b/web/src/plugins/radio/RadioTab.tsx
@@ -54,13 +54,6 @@ interface VoiceStats {
   connectedSince: string | null;
 }
 
-const THEMES = [
-  { id: 'default', color: '#e67e22', label: 'Sunset' },
-  { id: 'purple', color: '#9b59b6', label: 'Midnight' },
-  { id: 'forest', color: '#2ecc71', label: 'Forest' },
-  { id: 'ocean', color: '#3498db', label: 'Ocean' },
-  { id: 'cherry', color: '#e74c6f', label: 'Cherry' },
-];
 
 // ── Zoom scaling constants ──
 const BASE_ALT = 2.0;
@@ -71,7 +64,6 @@ export default function RadioTab({ data }: { data: any }) {
   const globeRef = useRef<any>(null);
   const rotationResumeRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  const [theme, setTheme] = useState(() => localStorage.getItem('radio-theme') || 'default');
   const [places, setPlaces] = useState<RadioPlace[]>([]);
   const [selectedPlace, setSelectedPlace] = useState<RadioPlace | null>(null);
   const [stations, setStations] = useState<RadioChannel[]>([]);
@@ -152,17 +144,24 @@ export default function RadioTab({ data }: { data: any }) {
     }
   }, [data, selectedGuild]);
 
-  // ── Theme persist + update globe colors ──
+  // ── Update globe colors when global theme changes ──
   useEffect(() => {
-    localStorage.setItem('radio-theme', theme);
-    if (globeRef.current && containerRef.current) {
-      const style = getComputedStyle(containerRef.current.parentElement!);
+    function updateGlobeColors() {
+      if (!globeRef.current || !containerRef.current) return;
+      const style = getComputedStyle(containerRef.current);
       const accentRgb = style.getPropertyValue('--accent-rgb').trim();
+      if (!accentRgb) return;
       globeRef.current
         .pointColor(() => `rgba(${accentRgb}, 0.85)`)
         .atmosphereColor(`rgba(${accentRgb}, 0.25)`);
     }
-  }, [theme]);
+    updateGlobeColors();
+    const app = document.querySelector('.hub-app');
+    if (!app) return;
+    const observer = new MutationObserver(updateGlobeColors);
+    observer.observe(app, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => observer.disconnect();
+  }, []);
 
   // ── Helper: pause globe rotation for 5s (only resumes if no panel open) ──
   const selectedPlaceRef = useRef(selectedPlace);
@@ -466,7 +465,7 @@ export default function RadioTab({ data }: { data: any }) {
   const currentGuild = guilds.find(g => g.id === selectedGuild);
 
   return (
-    <div className="radio-container" data-theme={theme}>
+    <div className="radio-container">
 
       {/* ═══ TOPBAR ═══ */}
       <header className="radio-topbar">
@@ -526,17 +525,6 @@ export default function RadioTab({ data }: { data: any }) {
               <button className="radio-topbar-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
             </>
           )}
-          <div className="radio-theme-inline">
-            {THEMES.map(t => (
-              <div
-                key={t.id}
-                className={`radio-theme-dot ${theme === t.id ? 'active' : ''}`}
-                style={{ background: t.color }}
-                title={t.label}
-                onClick={() => setTheme(t.id)}
-              />
-            ))}
-          </div>
         </div>
       </header>
 
diff --git a/web/src/plugins/soundboard/SoundboardTab.tsx b/web/src/plugins/soundboard/SoundboardTab.tsx
index a58c165..dc877bb 100644
--- a/web/src/plugins/soundboard/SoundboardTab.tsx
+++ b/web/src/plugins/soundboard/SoundboardTab.tsx
@@ -266,13 +266,6 @@ function apiUploadFileWithName(
    CONSTANTS
    ══════════════════════════════════════════════════════════════════ */
 
-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',
@@ -350,7 +343,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
 
   /* ── 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 ── */
@@ -500,11 +492,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  /* ── Theme (persist only, data-theme is set on .sb-app div) ── */
-  useEffect(() => {
-    localStorage.setItem('jb-theme', theme);
-  }, [theme]);
-
   /* ── Card size (scoped to .sb-app container) ── */
   const sbAppRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -834,7 +821,7 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
      RENDER
      ════════════════════════════════════════════ */
   return (
-    <div className="sb-app" data-theme={theme} ref={sbAppRef}>
+    <div className="sb-app" ref={sbAppRef}>
       {chaosMode && <div className="party-overlay active" />}
 
       {/* ═══ TOPBAR ═══ */}
@@ -1048,17 +1035,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
           />
         </div>
 
-        <div className="theme-selector">
-          {THEMES.map(t => (
-            <div
-              key={t.id}
-              className={`theme-dot ${theme === t.id ? 'active' : ''}`}
-              style={{ background: t.color }}
-              title={t.label}
-              onClick={() => setTheme(t.id)}
-            />
-          ))}
-        </div>
       </div>
 
       <div className="analytics-strip">
diff --git a/web/src/plugins/soundboard/soundboard.css b/web/src/plugins/soundboard/soundboard.css
index 4abee5f..b608ae4 100644
--- a/web/src/plugins/soundboard/soundboard.css
+++ b/web/src/plugins/soundboard/soundboard.css
@@ -43,53 +43,6 @@
   color-scheme: dark;
 }
 
-/* ── Theme: Midnight Purple ── */
-.sb-app[data-theme="purple"] {
-  --bg-deep: #13111c;
-  --bg-primary: #1a1726;
-  --bg-secondary: #241f35;
-  --bg-tertiary: #2e2845;
-  --accent: #9b59b6;
-  --accent-rgb: 155, 89, 182;
-  --accent-hover: #8e44ad;
-  --accent-glow: rgba(155, 89, 182, .45);
-}
-
-/* ── Theme: Forest ── */
-.sb-app[data-theme="forest"] {
-  --bg-deep: #0f1a14;
-  --bg-primary: #142119;
-  --bg-secondary: #1c2e22;
-  --bg-tertiary: #253a2c;
-  --accent: #2ecc71;
-  --accent-rgb: 46, 204, 113;
-  --accent-hover: #27ae60;
-  --accent-glow: rgba(46, 204, 113, .4);
-}
-
-/* ── Theme: Sunset ── */
-.sb-app[data-theme="sunset"] {
-  --bg-deep: #1a1210;
-  --bg-primary: #231815;
-  --bg-secondary: #2f201c;
-  --bg-tertiary: #3d2a24;
-  --accent: #e67e22;
-  --accent-rgb: 230, 126, 34;
-  --accent-hover: #d35400;
-  --accent-glow: rgba(230, 126, 34, .4);
-}
-
-/* ── Theme: Ocean ── */
-.sb-app[data-theme="ocean"] {
-  --bg-deep: #0a1628;
-  --bg-primary: #0f1e33;
-  --bg-secondary: #162a42;
-  --bg-tertiary: #1e3652;
-  --accent: #3498db;
-  --accent-rgb: 52, 152, 219;
-  --accent-hover: #2980b9;
-  --accent-glow: rgba(52, 152, 219, .4);
-}
 
 /* ────────────────────────────────────────────
    App Layout
diff --git a/web/src/styles.css b/web/src/styles.css
index 3fa0bf7..3c4676d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -32,6 +32,71 @@
   --header-height: 44px;
 }
 
+/* ── Global App Themes ── */
+.hub-app[data-theme="purple"] {
+  --bg-deep: #13111c;
+  --bg-primary: #1a1726;
+  --bg-secondary: #241f35;
+  --bg-tertiary: #2e2845;
+  --bg-card: #241f35;
+  --bg-card-hover: #2e2845;
+  --bg-input: #110f19;
+  --bg-header: #161320;
+  --accent: #9b59b6;
+  --accent-rgb: 155, 89, 182;
+  --accent-hover: #8e44ad;
+  --accent-dim: rgba(155, 89, 182, 0.15);
+  --accent-border: rgba(155, 89, 182, 0.35);
+}
+
+.hub-app[data-theme="forest"] {
+  --bg-deep: #0f1a14;
+  --bg-primary: #142119;
+  --bg-secondary: #1c2e22;
+  --bg-tertiary: #253a2c;
+  --bg-card: #1c2e22;
+  --bg-card-hover: #253a2c;
+  --bg-input: #0c150f;
+  --bg-header: #111c16;
+  --accent: #2ecc71;
+  --accent-rgb: 46, 204, 113;
+  --accent-hover: #27ae60;
+  --accent-dim: rgba(46, 204, 113, 0.15);
+  --accent-border: rgba(46, 204, 113, 0.35);
+}
+
+.hub-app[data-theme="ocean"] {
+  --bg-deep: #0a1628;
+  --bg-primary: #0f1e33;
+  --bg-secondary: #162a42;
+  --bg-tertiary: #1e3652;
+  --bg-card: #162a42;
+  --bg-card-hover: #1e3652;
+  --bg-input: #081220;
+  --bg-header: #0c1a2e;
+  --accent: #3498db;
+  --accent-rgb: 52, 152, 219;
+  --accent-hover: #2980b9;
+  --accent-dim: rgba(52, 152, 219, 0.15);
+  --accent-border: rgba(52, 152, 219, 0.35);
+}
+
+.hub-app[data-theme="cherry"] {
+  --bg-deep: #1a0f14;
+  --bg-primary: #22141a;
+  --bg-secondary: #301c25;
+  --bg-tertiary: #3e2530;
+  --bg-card: #301c25;
+  --bg-card-hover: #3e2530;
+  --bg-input: #150c10;
+  --bg-header: #1d1117;
+  --accent: #e74c6f;
+  --accent-rgb: 231, 76, 111;
+  --accent-hover: #c0392b;
+  --accent-dim: rgba(231, 76, 111, 0.15);
+  --accent-border: rgba(231, 76, 111, 0.35);
+}
+
 /* ── Reset & Base ── */
 *,
 *::before,
@@ -347,6 +412,114 @@ html, body {
   max-width: 300px;
 }
 
+/* ── Settings Button (Icon-Button per Styleguide §7) ── */
+.hub-settings-btn {
+  padding: 6px;
+  background: none;
+  color: var(--text-muted);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hub-settings-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-normal);
+}
+
+/* ── Settings Modal ── */
+.hub-settings-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+.hub-settings-modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  width: 340px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+.hub-settings-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-normal);
+  border-bottom: 1px solid var(--border);
+}
+.hub-settings-modal-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+  border-radius: var(--radius);
+  transition: all var(--transition);
+}
+.hub-settings-modal-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-normal);
+}
+.hub-settings-modal-body {
+  padding: 16px 20px 20px;
+}
+.hub-settings-section-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+}
+.hub-settings-theme-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.hub-settings-theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.hub-settings-theme-btn:hover {
+  color: var(--text-normal);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.hub-settings-theme-btn.active {
+  border-color: var(--accent);
+  color: var(--text-normal);
+  background: var(--accent-dim);
+}
+.hub-settings-theme-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 /* ── Refresh Button (Icon-Button per Styleguide §7) ── */
 .hub-refresh-btn {
   padding: 6px;
@@ -808,60 +981,6 @@ html, body {
   height: 100%;
   overflow: hidden;
   background: var(--bg-deep);
-
-  /* Default-Theme Vars (scoped, damit data-theme sie überschreiben kann) */
-  --bg-deep: #1a1810;
-  --bg-primary: #211e17;
-  --bg-secondary: #2a2620;
-  --bg-tertiary: #322d26;
-  --text-normal: #dbdee1;
-  --text-muted: #949ba4;
-  --text-faint: #6d6f78;
-  --accent: #e67e22;
-  --accent-rgb: 230, 126, 34;
-  --accent-hover: #d35400;
-  --border: rgba(255, 255, 255, 0.06);
-}
-
-/* ── Radio Themes ── */
-.radio-container[data-theme="purple"] {
-  --bg-deep: #13111c;
-  --bg-primary: #1a1726;
-  --bg-secondary: #241f35;
-  --bg-tertiary: #2e2845;
-  --accent: #9b59b6;
-  --accent-rgb: 155, 89, 182;
-  --accent-hover: #8e44ad;
-}
-
-.radio-container[data-theme="forest"] {
-  --bg-deep: #0f1a14;
-  --bg-primary: #142119;
-  --bg-secondary: #1c2e22;
-  --bg-tertiary: #253a2c;
-  --accent: #2ecc71;
-  --accent-rgb: 46, 204, 113;
-  --accent-hover: #27ae60;
-}
-
-.radio-container[data-theme="ocean"] {
-  --bg-deep: #0a1628;
-  --bg-primary: #0f1e33;
-  --bg-secondary: #162a42;
-  --bg-tertiary: #1e3652;
-  --accent: #3498db;
-  --accent-rgb: 52, 152, 219;
-  --accent-hover: #2980b9;
-}
-
-.radio-container[data-theme="cherry"] {
-  --bg-deep: #1a0f14;
-  --bg-primary: #22141a;
-  --bg-secondary: #301c25;
-  --bg-tertiary: #3e2530;
-  --accent: #e74c6f;
-  --accent-rgb: 231, 76, 111;
-  --accent-hover: #c0392b;
 }
 
 /* ── Globe ── */