From 81801dcd8805e57c27f966d932a155a8b3840417 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:08:19 +0100 Subject: [PATCH 01/16] Redesign refresh button to match CI styleguide [skip ci] --- web/src/styles.css | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/web/src/styles.css b/web/src/styles.css index 4d5c046..775631a 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -349,19 +349,27 @@ html, body { /* ── Refresh Button ── */ .hub-refresh-btn { - background: none; - border: none; - color: var(--text-muted); - font-size: 1rem; - cursor: pointer; - padding: 4px 6px; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border: 1px solid var(--border); border-radius: var(--radius); - transition: all var(--transition); + background: var(--bg-secondary); + color: var(--text-muted); + font-size: 14px; line-height: 1; + cursor: pointer; + transition: all var(--transition); } .hub-refresh-btn:hover { color: var(--accent); - background: rgba(230, 126, 34, 0.1); + border-color: var(--accent-border); + background: var(--accent-dim); +} +.hub-refresh-btn:active { + transform: scale(0.95); } /* ── Admin Button (header) ── */ From 0f43f78d7162f2e17f44609f619ccf1d3ba29f8b Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:20:43 +0100 Subject: [PATCH 02/16] Redesign refresh button: SVG icon, ghost style, spin hover Replace emoji with clean SVG refresh icon. Remove border for ghost-style matching other header elements. Add 180deg rotation on hover for visual feedback. Co-Authored-By: Claude Opus 4.6 --- web/src/App.tsx | 7 ++++++- web/src/styles.css | 21 ++++++++++++--------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 2347765..03968ed 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -315,7 +315,12 @@ export default function App() { onClick={() => window.location.reload()} title="Seite neu laden" > - {'\u{1F504}'} + + + + + + Date: Wed, 11 Mar 2026 11:22:02 +0100 Subject: [PATCH 03/16] =?UTF-8?q?Fix=20refresh=20button=20to=20match=20Sty?= =?UTF-8?q?leguide=20=C2=A77=20Icon-Button=20pattern?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use --bg-tertiary hover + --text-normal instead of accent colors. Remove custom spin animation and scale transform. Strict adherence to the documented Icon-Button component pattern. Co-Authored-By: Claude Opus 4.6 --- web/src/styles.css | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/web/src/styles.css b/web/src/styles.css index 89bfb94..3fa0bf7 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -347,32 +347,22 @@ html, body { max-width: 300px; } -/* ── Refresh Button ── */ +/* ── Refresh Button (Icon-Button per Styleguide §7) ── */ .hub-refresh-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; - width: 28px; - height: 28px; - border: none; - border-radius: var(--radius); - background: transparent; - color: var(--text-muted); - cursor: pointer; - transition: color var(--transition), background var(--transition); -} -.hub-refresh-btn svg { - transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hub-refresh-btn:hover { - color: var(--accent); - background: var(--accent-dim); -} -.hub-refresh-btn:hover svg { - transform: rotate(180deg); -} -.hub-refresh-btn:active { - transform: scale(0.92); + background: var(--bg-tertiary); + color: var(--text-normal); } /* ── Admin Button (header) ── */ From 0d06125abc50402facd7cc6957fcb0700d6e22b1 Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:23:14 +0000 Subject: [PATCH 04/16] v1.9.1 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index f8e233b..9ab8337 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.0 +1.9.1 From 0c9bccfab6b49f7f4f862d87192a1dfc46e97e30 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:26:37 +0100 Subject: [PATCH 05/16] Remove daddelolymp image mirror from CI Daddelolymp is backup mirror only, never builds or hosts images. All builds and deployments happen exclusively on adriahub. Co-Authored-By: Claude Opus 4.6 --- .forgejo/workflows/build-deploy.yml | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/.forgejo/workflows/build-deploy.yml b/.forgejo/workflows/build-deploy.yml index 19322d6..fc78b7a 100644 --- a/.forgejo/workflows/build-deploy.yml +++ b/.forgejo/workflows/build-deploy.yml @@ -6,7 +6,6 @@ on: env: REGISTRY: forgejo.adriahub.de - REGISTRY_MIRROR: forgejo.daddelolymp.de IMAGE: root/gaming-hub jobs: @@ -67,27 +66,13 @@ jobs: docker push ${{ env.REGISTRY }}/${{ env.IMAGE }}:latest fi - - name: Mirror to registry (daddelolymp) - run: | - echo "${{ secrets.REGISTRY_DADDELOLYMP_PASSWORD }}" | docker login ${{ env.REGISTRY_MIRROR }} -u root --password-stdin - docker tag ${{ env.REGISTRY }}/${{ env.IMAGE }}:${{ steps.vars.outputs.tag }} \ - ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:${{ steps.vars.outputs.tag }} - docker push ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:${{ steps.vars.outputs.tag }} - if [ "${GITHUB_REF_NAME}" = "main" ]; then - docker tag ${{ env.REGISTRY }}/${{ env.IMAGE }}:latest \ - ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:latest - docker push ${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:latest - fi - - name: Cleanup build artifacts if: always() run: | TAG="${{ steps.vars.outputs.tag }}" docker rmi "${{ env.REGISTRY }}/${{ env.IMAGE }}:${TAG}" 2>/dev/null || true - docker rmi "${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:${TAG}" 2>/dev/null || true if [ "${GITHUB_REF_NAME}" = "main" ]; then docker rmi "${{ env.REGISTRY }}/${{ env.IMAGE }}:latest" 2>/dev/null || true - docker rmi "${{ env.REGISTRY_MIRROR }}/${{ env.IMAGE }}:latest" 2>/dev/null || true fi docker image prune -f 2>/dev/null || true docker builder prune -f --keep-storage=4GB 2>/dev/null || true From 8a7f9fd93f0c462634d8d84379485e8221bf56cb Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:27:37 +0000 Subject: [PATCH 06/16] v1.9.2 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 9ab8337..8fdcf38 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.1 +1.9.2 From aa7ce227b099f28076df6cb76784420292dad698 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:28:37 +0100 Subject: [PATCH 07/16] Use single data mount for deploy, remove legacy jukebox sounds path MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sounds now live in /mnt/cache/appdata/gaming-hub/data/sounds/ directly — no separate mount needed. Co-Authored-By: Claude Opus 4.6 --- .forgejo/workflows/build-deploy.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.forgejo/workflows/build-deploy.yml b/.forgejo/workflows/build-deploy.yml index fc78b7a..0fcf4c5 100644 --- a/.forgejo/workflows/build-deploy.yml +++ b/.forgejo/workflows/build-deploy.yml @@ -117,7 +117,6 @@ jobs: -e DISCORD_CLIENT_ID="${{ secrets.DISCORD_CLIENT_ID }}" \ -e DISCORD_CLIENT_SECRET="${{ secrets.DISCORD_CLIENT_SECRET }}" \ -v /mnt/cache/appdata/gaming-hub/data:/data:rw \ - -v /mnt/cache/appdata/dockge/container/jukebox/sounds/:/data/sounds:rw \ "$DEPLOY_IMAGE" docker ps --filter name="$CONTAINER_NAME" From 00b6bc9d2f1a0179b59da4abbba7994e083a5198 Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:29:30 +0000 Subject: [PATCH 08/16] v1.9.3 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 8fdcf38..77fee73 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.2 +1.9.3 From 6d161f3482e044f5e0d435ac55fc1bab7c889aa5 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:36:29 +0100 Subject: [PATCH 09/16] 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 --- 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([]); @@ -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>({}); + // ── 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({ authenticated: false }); const [providers, setProviders] = useState({ discord: false, steam: false, admin: false }); @@ -248,7 +264,7 @@ export default function App() { } return ( -
+
{'\u{1F3AE}'} @@ -310,6 +326,16 @@ export default function App() { )} +
+ {/* Settings Modal */} + {showSettingsModal && ( +
setShowSettingsModal(false)}> +
e.stopPropagation()}> +
+ Einstellungen + +
+
+
+ Farbschema +
+ {APP_THEMES.map(t => ( + + ))} +
+
+
+
+
+ )} + {showVersionModal && (
setShowVersionModal(false)}>
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(null); const rotationResumeRef = useRef>(undefined); - const [theme, setTheme] = useState(() => localStorage.getItem('radio-theme') || 'default'); const [places, setPlaces] = useState([]); const [selectedPlace, setSelectedPlace] = useState(null); const [stations, setStations] = useState([]); @@ -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 ( -
+
{/* ═══ TOPBAR ═══ */}
@@ -526,17 +525,6 @@ export default function RadioTab({ data }: { data: any }) { )} -
- {THEMES.map(t => ( -
setTheme(t.id)} - /> - ))} -
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>({}); - 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(null); useEffect(() => { @@ -834,7 +821,7 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard RENDER ════════════════════════════════════════════ */ return ( -
+
{chaosMode &&
} {/* ═══ TOPBAR ═══ */} @@ -1048,17 +1035,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard />
-
- {THEMES.map(t => ( -
setTheme(t.id)} - /> - ))} -
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 ── */ From c9d8fac884b54f0cc40da294373e2e60a51ed0b8 Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:37:24 +0000 Subject: [PATCH 10/16] v1.9.4 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 77fee73..d615fd0 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.3 +1.9.4 From 967f72f080fedb6cc10714b1d91cb98d442a3a42 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:41:47 +0100 Subject: [PATCH 11/16] Fix: Soundboard inherits global theme instead of hardcoded Discord Blurple Removed hardcoded --accent, --bg-*, --text-*, --font, --radius, --transition from .sb-app so it inherits theme vars from .hub-app[data-theme]. Keeps only soundboard-specific vars (modifiers, shadows, card sizes). Co-Authored-By: Claude Opus 4.6 --- web/src/plugins/soundboard/soundboard.css | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/web/src/plugins/soundboard/soundboard.css b/web/src/plugins/soundboard/soundboard.css index b608ae4..c796ce1 100644 --- a/web/src/plugins/soundboard/soundboard.css +++ b/web/src/plugins/soundboard/soundboard.css @@ -6,35 +6,20 @@ Theme Variables — Default (Discord Blurple) ──────────────────────────────────────────── */ .sb-app { - --bg-deep: #1a1810; - --bg-primary: #211e17; - --bg-secondary: #2a2620; - --bg-tertiary: #322d26; + /* Inherits all theme vars (--bg-*, --accent-*, --text-*) from .hub-app */ + --accent-glow: rgba(var(--accent-rgb), 0.45); --bg-modifier-hover: rgba(79, 84, 92, .16); --bg-modifier-active: rgba(79, 84, 92, .24); --bg-modifier-selected: rgba(79, 84, 92, .32); - --text-normal: #dbdee1; - --text-muted: #949ba4; - --text-faint: #6d6f78; - - --accent: #5865f2; - --accent-rgb: 88, 101, 242; - --accent-hover: #4752c4; - --accent-glow: rgba(88, 101, 242, .45); - --green: #23a55a; --red: #f23f42; --yellow: #f0b232; --white: #ffffff; - --font: 'DM Sans', 'Outfit', 'gg sans', 'Noto Sans', Whitney, 'Helvetica Neue', Helvetica, Arial, sans-serif; - --radius: 8px; - --radius-lg: 12px; --shadow-low: 0 1px 3px rgba(0, 0, 0, .24); --shadow-med: 0 4px 12px rgba(0, 0, 0, .32); --shadow-high: 0 8px 24px rgba(0, 0, 0, .4); - --transition: 150ms cubic-bezier(.4, 0, .2, 1); --card-size: 110px; --card-emoji: 28px; From cccdf6dd5ae1ace48bc5920b03121ebf1c0313e8 Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:42:56 +0000 Subject: [PATCH 12/16] v1.9.5 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index d615fd0..158c747 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.4 +1.9.5 From f03fe63bd3b5aa4fac1991ee43850b92f443c082 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:45:20 +0100 Subject: [PATCH 13/16] Move clock from Soundboard to app header, display next to version Clock now shows globally in the header (left of version badge) instead of being Soundboard-only. Smaller size to fit header layout. Co-Authored-By: Claude Opus 4.6 --- web/src/App.tsx | 18 ++++++++++++ web/src/plugins/soundboard/SoundboardTab.tsx | 22 -------------- web/src/plugins/soundboard/soundboard.css | 30 -------------------- web/src/styles.css | 14 +++++++++ 4 files changed, 32 insertions(+), 52 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index ca4e00b..a51e0b5 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -76,6 +76,21 @@ export default function App() { localStorage.setItem('hub-theme', t); }; + // ── Clock ── + const [clock, setClock] = useState(''); + 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); + }, []); + // ── Unified Auth State ── const [user, setUser] = useState({ authenticated: false }); const [providers, setProviders] = useState({ discord: false, steam: false, admin: false }); @@ -348,6 +363,9 @@ export default function App() { + + {clock.slice(0, 5)}{clock.slice(5)} + { diff --git a/web/src/plugins/soundboard/SoundboardTab.tsx b/web/src/plugins/soundboard/SoundboardTab.tsx index dc877bb..8c13796 100644 --- a/web/src/plugins/soundboard/SoundboardTab.tsx +++ b/web/src/plugins/soundboard/SoundboardTab.tsx @@ -374,7 +374,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard /* ── 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); @@ -460,20 +459,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard 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 () => { @@ -814,9 +799,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard const analyticsTop = analytics.mostPlayed.slice(0, 10); const totalSoundsDisplay = analytics.totalSounds || total; - const clockMain = clock.slice(0, 5); - const clockSec = clock.slice(5); - /* ════════════════════════════════════════════ RENDER ════════════════════════════════════════════ */ @@ -870,10 +852,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
-
-
{clockMain}{clockSec}
-
-
{lastPlayed && (
diff --git a/web/src/plugins/soundboard/soundboard.css b/web/src/plugins/soundboard/soundboard.css index c796ce1..60fae3f 100644 --- a/web/src/plugins/soundboard/soundboard.css +++ b/web/src/plugins/soundboard/soundboard.css @@ -80,28 +80,6 @@ letter-spacing: -.02em; } -/* ── Clock ── */ -.clock-wrap { - flex: 1; - display: flex; - justify-content: center; -} - -.clock { - font-size: 22px; - font-weight: 700; - color: var(--text-normal); - letter-spacing: .02em; - font-variant-numeric: tabular-nums; - opacity: .9; -} - -.clock-seconds { - font-size: 14px; - color: var(--text-faint); - font-weight: 500; -} - .topbar-right { display: flex; align-items: center; @@ -1668,14 +1646,6 @@ text-overflow: ellipsis; } - .clock { - font-size: 16px; - } - - .clock-seconds { - font-size: 11px; - } - .tb-btn span:not(.tb-icon) { display: none; } diff --git a/web/src/styles.css b/web/src/styles.css index 3c4676d..9a38deb 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -292,6 +292,20 @@ html, body { line-height: 1; } +/* ── Clock ── */ +.hub-clock { + font-size: 13px; + font-weight: 600; + color: var(--text-muted); + font-variant-numeric: tabular-nums; + letter-spacing: .02em; +} +.hub-clock-sec { + font-size: 10px; + color: var(--text-faint); + font-weight: 400; +} + .hub-version { font-size: 12px; color: var(--text-faint); From 9753b7daaa2582a96122b6d14489ac9e5f735d03 Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:46:26 +0000 Subject: [PATCH 14/16] v1.9.6 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 158c747..7bc1c40 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.5 +1.9.6 From de10a547b58e1b753c3497ec4c5b3ad5bb9ebfcf Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 11 Mar 2026 11:47:06 +0100 Subject: [PATCH 15/16] Soundboard: remove grid size slider, move Verbunden to toolbar Grid size slider removed (default 110px kept). Connection indicator moved from topbar-right into the toolbar where the slider was. Co-Authored-By: Claude Opus 4.6 --- web/src/plugins/soundboard/SoundboardTab.tsx | 44 ++++------------- web/src/plugins/soundboard/soundboard.css | 51 -------------------- 2 files changed, 10 insertions(+), 85 deletions(-) diff --git a/web/src/plugins/soundboard/SoundboardTab.tsx b/web/src/plugins/soundboard/SoundboardTab.tsx index 8c13796..213ff84 100644 --- a/web/src/plugins/soundboard/SoundboardTab.tsx +++ b/web/src/plugins/soundboard/SoundboardTab.tsx @@ -343,7 +343,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard /* ── Preferences ── */ const [favs, setFavs] = useState>({}); - const [cardSize, setCardSize] = useState(() => parseInt(localStorage.getItem('jb-card-size') || '110')); /* ── Party ── */ const [chaosMode, setChaosMode] = useState(false); @@ -477,18 +476,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - /* ── Card size (scoped to .sb-app container) ── */ - const sbAppRef = useRef(null); - useEffect(() => { - const el = sbAppRef.current; - if (!el) return; - el.style.setProperty('--card-size', cardSize + 'px'); - const ratio = cardSize / 110; - el.style.setProperty('--card-emoji', Math.round(28 * ratio) + 'px'); - el.style.setProperty('--card-font', Math.max(9, Math.round(11 * ratio)) + 'px'); - localStorage.setItem('jb-card-size', String(cardSize)); - }, [cardSize]); - /* ── SSE via props.data instead of own EventSource ── */ useEffect(() => { if (!data) return; @@ -803,7 +790,7 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard RENDER ════════════════════════════════════════════ */ return ( -
+
{chaosMode &&
} {/* ═══ TOPBAR ═══ */} @@ -862,15 +849,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard Last Played: {lastPlayed}
)} - {selected && ( -
setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails"> - - Verbunden - {voiceStats?.voicePing != null && ( - {voiceStats.voicePing}ms - )} -
- )}
@@ -1001,17 +979,15 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard Stop -
- grid_view - setCardSize(parseInt(e.target.value))} - /> -
+ {selected && ( +
setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails"> + + Verbunden + {voiceStats?.voicePing != null && ( + {voiceStats.voicePing}ms + )} +
+ )}
diff --git a/web/src/plugins/soundboard/soundboard.css b/web/src/plugins/soundboard/soundboard.css index 60fae3f..ff87762 100644 --- a/web/src/plugins/soundboard/soundboard.css +++ b/web/src/plugins/soundboard/soundboard.css @@ -598,56 +598,6 @@ border-color: var(--red); } -/* ── Size Slider ── */ -.size-control { - display: flex; - align-items: center; - gap: 6px; - padding: 4px 10px; - border-radius: 4px; - background: var(--bg-tertiary); - border: 1px solid rgba(255, 255, 255, .06); -} - -.size-control .sc-icon { - font-size: 14px; - color: var(--text-faint); -} - -.size-slider { - -webkit-appearance: none; - appearance: none; - width: 70px; - height: 3px; - border-radius: 2px; - background: var(--bg-modifier-selected); - outline: none; - cursor: pointer; -} - -.size-slider::-webkit-slider-thumb { - -webkit-appearance: none; - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--accent); - cursor: pointer; - transition: transform var(--transition); -} - -.size-slider::-webkit-slider-thumb:hover { - transform: scale(1.3); -} - -.size-slider::-moz-range-thumb { - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--accent); - border: none; - cursor: pointer; -} - /* ── Theme Selector ── */ .theme-selector { display: flex; @@ -1626,7 +1576,6 @@ order: -1; } - .size-control, .theme-selector { display: none; } From 38fb648e15eaf59f269cc0ddd631b6ad0d3f5dee Mon Sep 17 00:00:00 2001 From: Forgejo CI Date: Wed, 11 Mar 2026 10:47:59 +0000 Subject: [PATCH 16/16] v1.9.7 [skip ci] --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 7bc1c40..fee0a27 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.9.6 +1.9.7