root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Unified Admin Panel: 3 Plugin-Settings in ein zentrales Modal

Browse source 
- Neues AdminPanel.tsx mit Sidebar-Navigation (Soundboard/Streaming/Game Library)
- Lazy-Loading: Daten werden erst beim Tab-Wechsel geladen
- Admin-Button im Header öffnet jetzt das zentrale Panel (Rechtsklick = Logout)
- Admin-Code aus SoundboardTab, StreamingTab und GameLibraryTab entfernt
- ~500 Zeilen Plugin-Code entfernt, durch ~620 Zeilen zentrales Panel ersetzt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-03-09 22:33:09 +01:00
parent 4b23d013f9
commit 3f175ca02c
10 changed files with 6137 additions and 5320 deletions
Download patch file Download diff file Expand all files Collapse all files

4830
web/dist/assets/index-BGKtt2gT.js vendored
View file

File diff suppressed because one or more lines are too long

4830
web/dist/assets/index-BWeAEcYi.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
web/dist/assets/index-TtdZJHkE.css → web/dist/assets/index-Bg-1_rjZ.css vendored
View file

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View file

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gaming Hub</title> <title>Gaming Hub</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>" /> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>" />
<script type="module" crossorigin src="/assets/index-BGKtt2gT.js"></script> <script type="module" crossorigin src="/assets/index-BWeAEcYi.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-TtdZJHkE.css"> <link rel="stylesheet" crossorigin href="/assets/index-Bg-1_rjZ.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

660
web/src/AdminPanel.tsx Normal file
View file

@ -0,0 +1,660 @@
import { useState, useEffect, useMemo, useCallback } from 'react';
/* ══════════════════════════════════════════════════════════════════
TYPES
══════════════════════════════════════════════════════════════════ */
type Sound = {
fileName: string;
name: string;
folder?: string;
relativePath?: string;
};
type SoundsResponse = {
items: Sound[];
total: number;
folders: Array<{ key: string; name: string; count: number }>;
};
interface AdminPanelProps {
onClose: () => void;
}
/* ══════════════════════════════════════════════════════════════════
API HELPERS
══════════════════════════════════════════════════════════════════ */
const SB_API = '/api/soundboard';
async function fetchAllSounds(): Promise<SoundsResponse> {
const url = new URL(`${SB_API}/sounds`, window.location.origin);
url.searchParams.set('folder', '__all__');
url.searchParams.set('fuzzy', '0');
const res = await fetch(url.toString());
if (!res.ok) throw new Error('Fehler beim Laden der Sounds');
return res.json();
}
async function apiAdminDelete(paths: string[]): Promise<void> {
const res = await fetch(`${SB_API}/admin/sounds/delete`, {
method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
body: JSON.stringify({ paths }),
});
if (!res.ok) throw new Error('Loeschen fehlgeschlagen');
}
async function apiAdminRename(from: string, to: string): Promise<string> {
const res = await fetch(`${SB_API}/admin/sounds/rename`, {
method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
body: JSON.stringify({ from, to }),
});
if (!res.ok) throw new Error('Umbenennen fehlgeschlagen');
const data = await res.json();
return data?.to as string;
}
function apiUploadFile(
file: File,
onProgress: (pct: number) => void,
): Promise<string> {
return new Promise((resolve, reject) => {
const form = new FormData();
form.append('files', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', `${SB_API}/upload`);
xhr.upload.onprogress = e => {
if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100));
};
xhr.onload = () => {
if (xhr.status === 200) {
try {
const data = JSON.parse(xhr.responseText);
resolve(data.files?.[0]?.name ?? file.name);
} catch { resolve(file.name); }
} else {
try { reject(new Error(JSON.parse(xhr.responseText).error)); }
catch { reject(new Error(`HTTP ${xhr.status}`)); }
}
};
xhr.onerror = () => reject(new Error('Netzwerkfehler'));
xhr.send(form);
});
}
/* ══════════════════════════════════════════════════════════════════
COMPONENT
══════════════════════════════════════════════════════════════════ */
type AdminTab = 'soundboard' | 'streaming' | 'game-library';
export default function AdminPanel({ onClose }: AdminPanelProps) {
const [activeTab, setActiveTab] = useState<AdminTab>('soundboard');
// ── Toast ──
const [toast, setToast] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
const notify = useCallback((msg: string, type: 'info' | 'error' = 'info') => {
setToast({ msg, type });
setTimeout(() => setToast(null), 3000);
}, []);
// ── Escape key ──
useEffect(() => {
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, [onClose]);
/* ════════════════════════════════════════════════════════════════
SOUNDBOARD ADMIN STATE
════════════════════════════════════════════════════════════════ */
const [sbSounds, setSbSounds] = useState<Sound[]>([]);
const [sbLoading, setSbLoading] = useState(false);
const [sbQuery, setSbQuery] = useState('');
const [sbSelection, setSbSelection] = useState<Record<string, boolean>>({});
const [sbRenameTarget, setSbRenameTarget] = useState('');
const [sbRenameValue, setSbRenameValue] = useState('');
const [sbUploadProgress, setSbUploadProgress] = useState<number | null>(null);
const soundKey = useCallback((s: Sound) => s.relativePath ?? s.fileName, []);
const loadSbSounds = useCallback(async () => {
setSbLoading(true);
try {
const d = await fetchAllSounds();
setSbSounds(d.items || []);
} catch (e: any) {
notify(e?.message || 'Sounds konnten nicht geladen werden', 'error');
} finally {
setSbLoading(false);
}
}, [notify]);
// Load on first tab switch
const [sbLoaded, setSbLoaded] = useState(false);
useEffect(() => {
if (activeTab === 'soundboard' && !sbLoaded) {
setSbLoaded(true);
void loadSbSounds();
}
}, [activeTab, sbLoaded, loadSbSounds]);
const sbFiltered = useMemo(() => {
const q = sbQuery.trim().toLowerCase();
if (!q) return sbSounds;
return sbSounds.filter(s => {
const key = soundKey(s).toLowerCase();
return s.name.toLowerCase().includes(q)
|| (s.folder || '').toLowerCase().includes(q)
|| key.includes(q);
});
}, [sbQuery, sbSounds, soundKey]);
const sbSelectedPaths = useMemo(() =>
Object.keys(sbSelection).filter(k => sbSelection[k]),
[sbSelection]);
const sbSelectedVisibleCount = useMemo(() =>
sbFiltered.filter(s => !!sbSelection[soundKey(s)]).length,
[sbFiltered, sbSelection, soundKey]);
const sbAllVisibleSelected = sbFiltered.length > 0 && sbSelectedVisibleCount === sbFiltered.length;
function sbToggleSelection(path: string) {
setSbSelection(prev => ({ ...prev, [path]: !prev[path] }));
}
function sbStartRename(sound: Sound) {
setSbRenameTarget(soundKey(sound));
setSbRenameValue(sound.name);
}
function sbCancelRename() {
setSbRenameTarget('');
setSbRenameValue('');
}
async function sbSubmitRename() {
if (!sbRenameTarget) return;
const baseName = sbRenameValue.trim().replace(/\.(mp3|wav)$/i, '');
if (!baseName) {
notify('Bitte einen gueltigen Namen eingeben', 'error');
return;
}
try {
await apiAdminRename(sbRenameTarget, baseName);
notify('Sound umbenannt');
sbCancelRename();
await loadSbSounds();
} catch (e: any) {
notify(e?.message || 'Umbenennen fehlgeschlagen', 'error');
}
}
async function sbDeletePaths(paths: string[]) {
if (paths.length === 0) return;
try {
await apiAdminDelete(paths);
notify(paths.length === 1 ? 'Sound geloescht' : `${paths.length} Sounds geloescht`);
setSbSelection({});
sbCancelRename();
await loadSbSounds();
} catch (e: any) {
notify(e?.message || 'Loeschen fehlgeschlagen', 'error');
}
}
async function sbUpload(file: File) {
setSbUploadProgress(0);
try {
await apiUploadFile(file, pct => setSbUploadProgress(pct));
notify(`"${file.name}" hochgeladen`);
await loadSbSounds();
} catch (e: any) {
notify(e?.message || 'Upload fehlgeschlagen', 'error');
} finally {
setSbUploadProgress(null);
}
}
/* ════════════════════════════════════════════════════════════════
STREAMING ADMIN STATE
════════════════════════════════════════════════════════════════ */
const [stAvailableChannels, setStAvailableChannels] = useState<Array<{ channelId: string; channelName: string; guildId: string; guildName: string }>>([]);
const [stNotifyConfig, setStNotifyConfig] = useState<Array<{ channelId: string; channelName: string; guildId: string; guildName: string; events: string[] }>>([]);
const [stConfigLoading, setStConfigLoading] = useState(false);
const [stConfigSaving, setStConfigSaving] = useState(false);
const [stNotifyStatus, setStNotifyStatus] = useState<{ online: boolean; botTag: string | null }>({ online: false, botTag: null });
const loadStreamingConfig = useCallback(async () => {
setStConfigLoading(true);
try {
const [statusResp, chResp, cfgResp] = await Promise.all([
fetch('/api/notifications/status'),
fetch('/api/notifications/channels', { credentials: 'include' }),
fetch('/api/notifications/config', { credentials: 'include' }),
]);
if (statusResp.ok) {
const d = await statusResp.json();
setStNotifyStatus(d);
}
if (chResp.ok) {
const chData = await chResp.json();
setStAvailableChannels(chData.channels || []);
}
if (cfgResp.ok) {
const cfgData = await cfgResp.json();
setStNotifyConfig(cfgData.channels || []);
}
} catch { /* silent */ }
finally { setStConfigLoading(false); }
}, []);
const [stLoaded, setStLoaded] = useState(false);
useEffect(() => {
if (activeTab === 'streaming' && !stLoaded) {
setStLoaded(true);
void loadStreamingConfig();
}
}, [activeTab, stLoaded, loadStreamingConfig]);
const stToggleEvent = useCallback((channelId: string, channelName: string, guildId: string, guildName: string, event: string) => {
setStNotifyConfig(prev => {
const existing = prev.find(c => c.channelId === channelId);
if (existing) {
const hasEvent = existing.events.includes(event);
const newEvents = hasEvent
? existing.events.filter(e => e !== event)
: [...existing.events, event];
if (newEvents.length === 0) {
return prev.filter(c => c.channelId !== channelId);
}
return prev.map(c => c.channelId === channelId ? { ...c, events: newEvents } : c);
} else {
return [...prev, { channelId, channelName, guildId, guildName, events: [event] }];
}
});
}, []);
const stIsEnabled = useCallback((channelId: string, event: string): boolean => {
const ch = stNotifyConfig.find(c => c.channelId === channelId);
return ch?.events.includes(event) ?? false;
}, [stNotifyConfig]);
const stSaveConfig = useCallback(async () => {
setStConfigSaving(true);
try {
await fetch('/api/notifications/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ channels: stNotifyConfig }),
credentials: 'include',
});
notify('Konfiguration gespeichert');
} catch {
notify('Speichern fehlgeschlagen', 'error');
} finally {
setStConfigSaving(false);
}
}, [stNotifyConfig, notify]);
/* ════════════════════════════════════════════════════════════════
GAME LIBRARY ADMIN STATE
════════════════════════════════════════════════════════════════ */
const [glProfiles, setGlProfiles] = useState<any[]>([]);
const [glLoading, setGlLoading] = useState(false);
const loadGlProfiles = useCallback(async () => {
setGlLoading(true);
try {
const resp = await fetch('/api/game-library/admin/profiles', { credentials: 'include' });
if (resp.ok) {
const d = await resp.json();
setGlProfiles(d.profiles || []);
}
} catch { /* silent */ }
finally { setGlLoading(false); }
}, []);
const [glLoaded, setGlLoaded] = useState(false);
useEffect(() => {
if (activeTab === 'game-library' && !glLoaded) {
setGlLoaded(true);
void loadGlProfiles();
}
}, [activeTab, glLoaded, loadGlProfiles]);
const glDeleteProfile = useCallback(async (profileId: string, displayName: string) => {
if (!confirm(`Profil "${displayName}" wirklich komplett loeschen? (Alle verknuepften Daten werden entfernt)`)) return;
try {
const resp = await fetch(`/api/game-library/admin/profile/${profileId}`, {
method: 'DELETE',
credentials: 'include',
});
if (resp.ok) {
notify('Profil geloescht');
loadGlProfiles();
}
} catch {
notify('Loeschen fehlgeschlagen', 'error');
}
}, [loadGlProfiles, notify]);
/* ════════════════════════════════════════════════════════════════
TAB CONFIG
════════════════════════════════════════════════════════════════ */
const tabs: { id: AdminTab; icon: string; label: string }[] = [
{ id: 'soundboard', icon: '\uD83C\uDFB5', label: 'Soundboard' },
{ id: 'streaming', icon: '\uD83D\uDCFA', label: 'Streaming' },
{ id: 'game-library', icon: '\uD83C\uDFAE', label: 'Game Library' },
];
/* ════════════════════════════════════════════════════════════════
RENDER
════════════════════════════════════════════════════════════════ */
return (
<div className="ap-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
<div className="ap-modal">
{/* ── Sidebar ── */}
<div className="ap-sidebar">
<div className="ap-sidebar-title">{'\u2699\uFE0F'} Admin</div>
<nav className="ap-nav">
{tabs.map(t => (
<button
key={t.id}
className={`ap-nav-item ${activeTab === t.id ? 'active' : ''}`}
onClick={() => setActiveTab(t.id)}
>
<span className="ap-nav-icon">{t.icon}</span>
<span className="ap-nav-label">{t.label}</span>
</button>
))}
</nav>
</div>
{/* ── Content ── */}
<div className="ap-content">
<div className="ap-header">
<h2 className="ap-title">
{tabs.find(t => t.id === activeTab)?.icon}{' '}
{tabs.find(t => t.id === activeTab)?.label}
</h2>
<button className="ap-close" onClick={onClose}>{'\u2715'}</button>
</div>
<div className="ap-body">
{/* ═══════════════════ SOUNDBOARD TAB ═══════════════════ */}
{activeTab === 'soundboard' && (
<div className="ap-tab-content">
<div className="ap-toolbar">
<input
type="text"
className="ap-search"
value={sbQuery}
onChange={e => setSbQuery(e.target.value)}
placeholder="Nach Name, Ordner oder Pfad filtern..."
/>
<button
className="ap-btn ap-btn-outline"
onClick={() => { void loadSbSounds(); }}
disabled={sbLoading}
>
{'\u21BB'} Aktualisieren
</button>
</div>
{/* Upload */}
<label className="ap-upload-zone">
<input
type="file"
accept=".mp3,.wav"
style={{ display: 'none' }}
onChange={e => {
const file = e.target.files?.[0];
if (file) sbUpload(file);
e.target.value = '';
}}
/>
{sbUploadProgress !== null ? (
<span className="ap-upload-progress">Upload: {sbUploadProgress}%</span>
) : (
<span className="ap-upload-text">{'\u2B06\uFE0F'} Datei hochladen (MP3 / WAV)</span>
)}
</label>
{/* Bulk actions */}
<div className="ap-bulk-row">
<label className="ap-select-all">
<input
type="checkbox"
checked={sbAllVisibleSelected}
onChange={e => {
const checked = e.target.checked;
const next = { ...sbSelection };
sbFiltered.forEach(s => { next[soundKey(s)] = checked; });
setSbSelection(next);
}}
/>
<span>Alle sichtbaren ({sbSelectedVisibleCount}/{sbFiltered.length})</span>
</label>
<button
className="ap-btn ap-btn-danger"
disabled={sbSelectedPaths.length === 0}
onClick={async () => {
if (!window.confirm(`Wirklich ${sbSelectedPaths.length} Sound(s) loeschen?`)) return;
await sbDeletePaths(sbSelectedPaths);
}}
>
{'\uD83D\uDDD1\uFE0F'} Ausgewaehlte loeschen
</button>
</div>
{/* Sound list */}
<div className="ap-list-wrap">
{sbLoading ? (
<div className="ap-empty">Lade Sounds...</div>
) : sbFiltered.length === 0 ? (
<div className="ap-empty">Keine Sounds gefunden.</div>
) : (
<div className="ap-list">
{sbFiltered.map(sound => {
const key = soundKey(sound);
const editing = sbRenameTarget === key;
return (
<div className="ap-item" key={key}>
<label className="ap-item-check">
<input
type="checkbox"
checked={!!sbSelection[key]}
onChange={() => sbToggleSelection(key)}
/>
</label>
<div className="ap-item-main">
<div className="ap-item-name">{sound.name}</div>
<div className="ap-item-meta">
{sound.folder ? `Ordner: ${sound.folder}` : 'Root'}
{' \u00B7 '}
{key}
</div>
{editing && (
<div className="ap-rename-row">
<input
className="ap-rename-input"
value={sbRenameValue}
onChange={e => setSbRenameValue(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter') void sbSubmitRename();
if (e.key === 'Escape') sbCancelRename();
}}
placeholder="Neuer Name..."
autoFocus
/>
<button className="ap-btn ap-btn-primary ap-btn-sm" onClick={() => { void sbSubmitRename(); }}>
Speichern
</button>
<button className="ap-btn ap-btn-outline ap-btn-sm" onClick={sbCancelRename}>
Abbrechen
</button>
</div>
)}
</div>
{!editing && (
<div className="ap-item-actions">
<button className="ap-btn ap-btn-outline ap-btn-sm" onClick={() => sbStartRename(sound)}>
Umbenennen
</button>
<button
className="ap-btn ap-btn-danger ap-btn-sm"
onClick={async () => {
if (!window.confirm(`Sound "${sound.name}" loeschen?`)) return;
await sbDeletePaths([key]);
}}
>
Loeschen
</button>
</div>
)}
</div>
);
})}
</div>
)}
</div>
</div>
)}
{/* ═══════════════════ STREAMING TAB ═══════════════════ */}
{activeTab === 'streaming' && (
<div className="ap-tab-content">
<div className="ap-toolbar">
<span className="ap-status-badge">
<span className={`ap-status-dot ${stNotifyStatus.online ? 'online' : ''}`} />
{stNotifyStatus.online
? <>Bot online: <b>{stNotifyStatus.botTag}</b></>
: <>Bot offline</>}
</span>
<button
className="ap-btn ap-btn-outline"
onClick={() => { void loadStreamingConfig(); }}
disabled={stConfigLoading}
>
{'\u21BB'} Aktualisieren
</button>
</div>
{stConfigLoading ? (
<div className="ap-empty">Lade Kanaele...</div>
) : stAvailableChannels.length === 0 ? (
<div className="ap-empty">
{stNotifyStatus.online
? 'Keine Text-Kanaele gefunden. Bot hat moeglicherweise keinen Zugriff.'
: 'Bot ist nicht verbunden. Bitte DISCORD_TOKEN_NOTIFICATIONS konfigurieren.'}
</div>
) : (
<>
<p className="ap-hint">
Waehle die Kanaele, in die Benachrichtigungen gesendet werden sollen:
</p>
<div className="ap-channel-list">
{stAvailableChannels.map(ch => (
<div key={ch.channelId} className="ap-channel-row">
<div className="ap-channel-info">
<span className="ap-channel-name">#{ch.channelName}</span>
<span className="ap-channel-guild">{ch.guildName}</span>
</div>
<div className="ap-channel-toggles">
<label className={`ap-toggle ${stIsEnabled(ch.channelId, 'stream_start') ? 'active' : ''}`}>
<input
type="checkbox"
checked={stIsEnabled(ch.channelId, 'stream_start')}
onChange={() => stToggleEvent(ch.channelId, ch.channelName, ch.guildId, ch.guildName, 'stream_start')}
/>
{'\uD83D\uDD34'} Stream Start
</label>
<label className={`ap-toggle ${stIsEnabled(ch.channelId, 'stream_end') ? 'active' : ''}`}>
<input
type="checkbox"
checked={stIsEnabled(ch.channelId, 'stream_end')}
onChange={() => stToggleEvent(ch.channelId, ch.channelName, ch.guildId, ch.guildName, 'stream_end')}
/>
{'\u23F9\uFE0F'} Stream Ende
</label>
</div>
</div>
))}
</div>
<div className="ap-save-row">
<button
className="ap-btn ap-btn-primary"
onClick={stSaveConfig}
disabled={stConfigSaving}
>
{stConfigSaving ? 'Speichern...' : '\uD83D\uDCBE Speichern'}
</button>
</div>
</>
)}
</div>
)}
{/* ═══════════════════ GAME LIBRARY TAB ═══════════════════ */}
{activeTab === 'game-library' && (
<div className="ap-tab-content">
<div className="ap-toolbar">
<span className="ap-status-badge">
<span className="ap-status-dot online" />
Eingeloggt als Admin
</span>
<button
className="ap-btn ap-btn-outline"
onClick={() => { void loadGlProfiles(); }}
disabled={glLoading}
>
{'\u21BB'} Aktualisieren
</button>
</div>
{glLoading ? (
<div className="ap-empty">Lade Profile...</div>
) : glProfiles.length === 0 ? (
<div className="ap-empty">Keine Profile vorhanden.</div>
) : (
<div className="ap-profile-list">
{glProfiles.map((p: any) => (
<div key={p.id} className="ap-profile-row">
<img className="ap-profile-avatar" src={p.avatarUrl} alt={p.displayName} />
<div className="ap-profile-info">
<span className="ap-profile-name">{p.displayName}</span>
<span className="ap-profile-details">
{p.steamName && <span className="ap-platform-badge steam">Steam: {p.steamGames}</span>}
{p.gogName && <span className="ap-platform-badge gog">GOG: {p.gogGames}</span>}
<span className="ap-profile-total">{p.totalGames} Spiele</span>
</span>
</div>
<button
className="ap-btn ap-btn-danger ap-btn-sm"
onClick={() => glDeleteProfile(p.id, p.displayName)}
>
{'\uD83D\uDDD1\uFE0F'} Entfernen
</button>
</div>
))}
</div>
)}
</div>
)}
</div>
</div>
{/* ── Toast ── */}
{toast && (
<div className={`ap-toast ${toast.type}`}>
{toast.type === 'error' ? '\u274C' : '\u2705'} {toast.msg}
</div>
)}
</div>
</div>
);
}

11
web/src/App.tsx
View file

@ -5,6 +5,7 @@ import LolstatsTab from './plugins/lolstats/LolstatsTab';
import StreamingTab from './plugins/streaming/StreamingTab'; import StreamingTab from './plugins/streaming/StreamingTab';
import WatchTogetherTab from './plugins/watch-together/WatchTogetherTab'; import WatchTogetherTab from './plugins/watch-together/WatchTogetherTab';
import GameLibraryTab from './plugins/game-library/GameLibraryTab'; import GameLibraryTab from './plugins/game-library/GameLibraryTab';
import AdminPanel from './AdminPanel';
interface PluginInfo { interface PluginInfo {
name: string; name: string;
@ -43,6 +44,7 @@ export default function App() {
// Centralized admin login state // Centralized admin login state
const [isAdmin, setIsAdmin] = useState(false); const [isAdmin, setIsAdmin] = useState(false);
const [showAdminLogin, setShowAdminLogin] = useState(false); const [showAdminLogin, setShowAdminLogin] = useState(false);
const [showAdminPanel, setShowAdminPanel] = useState(false);
const [adminPwd, setAdminPwd] = useState(''); const [adminPwd, setAdminPwd] = useState('');
const [adminError, setAdminError] = useState(''); const [adminError, setAdminError] = useState('');
@ -238,8 +240,9 @@ export default function App() {
)} )}
<button <button
className={`hub-admin-btn ${isAdmin ? 'active' : ''}`} className={`hub-admin-btn ${isAdmin ? 'active' : ''}`}
onClick={() => isAdmin ? handleAdminLogout() : setShowAdminLogin(true)} onClick={() => isAdmin ? setShowAdminPanel(true) : setShowAdminLogin(true)}
title={isAdmin ? 'Admin abmelden' : 'Admin Login'} onContextMenu={e => { if (isAdmin) { e.preventDefault(); handleAdminLogout(); } }}
title={isAdmin ? 'Admin Panel (Rechtsklick = Abmelden)' : 'Admin Login'}
> >
{isAdmin ? '\uD83D\uDD13' : '\uD83D\uDD12'} {isAdmin ? '\uD83D\uDD13' : '\uD83D\uDD12'}
</button> </button>
@ -390,6 +393,10 @@ export default function App() {
</div> </div>
)} )}
{showAdminPanel && isAdmin && (
<AdminPanel onClose={() => setShowAdminPanel(false)} />
)}
<main className="hub-content"> <main className="hub-content">
{plugins.length === 0 ? ( {plugins.length === 0 ? (
<div className="hub-empty"> <div className="hub-empty">

94
web/src/plugins/game-library/GameLibraryTab.tsx
View file

@ -109,11 +109,9 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
const filterInputRef = useRef<HTMLInputElement>(null); const filterInputRef = useRef<HTMLInputElement>(null);
const [filterQuery, setFilterQuery] = useState(''); const [filterQuery, setFilterQuery] = useState('');
// ── Admin state ── // ── Admin (centralized in App.tsx) ──
const [showAdmin, setShowAdmin] = useState(false); const _isAdmin = isAdminProp ?? false;
const isAdmin = isAdminProp ?? false; void _isAdmin;
const [adminProfiles, setAdminProfiles] = useState<any[]>([]);
const [adminLoading, setAdminLoading] = useState(false);
// ── SSE data sync ── // ── SSE data sync ──
useEffect(() => { useEffect(() => {
@ -131,39 +129,6 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
} catch { /* silent */ } } catch { /* silent */ }
}, []); }, []);
// ── Admin: load profiles ──
const loadAdminProfiles = useCallback(async () => {
setAdminLoading(true);
try {
const resp = await fetch('/api/game-library/admin/profiles', { credentials: 'include' });
if (resp.ok) {
const d = await resp.json();
setAdminProfiles(d.profiles || []);
}
} catch { /* silent */ }
finally { setAdminLoading(false); }
}, []);
// ── Admin: open panel ──
const openAdmin = useCallback(() => {
setShowAdmin(true);
if (isAdmin) loadAdminProfiles();
}, [isAdmin, loadAdminProfiles]);
// ── Admin: delete profile ──
const adminDeleteProfile = useCallback(async (profileId: string, displayName: string) => {
if (!confirm(`Profil "${displayName}" wirklich komplett loeschen? (Alle verknuepften Daten werden entfernt)`)) return;
try {
const resp = await fetch(`/api/game-library/admin/profile/${profileId}`, {
method: 'DELETE',
credentials: 'include',
});
if (resp.ok) {
loadAdminProfiles();
fetchProfiles();
}
} catch { /* silent */ }
}, [loadAdminProfiles, fetchProfiles]);
// ── Steam login ── // ── Steam login ──
const connectSteam = useCallback(() => { const connectSteam = useCallback(() => {
@ -513,11 +478,6 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
</button> </button>
)} )}
<div className="gl-login-bar-spacer" /> <div className="gl-login-bar-spacer" />
{isAdmin && (
<button className="gl-admin-btn" onClick={openAdmin} title="Admin Panel">
&#x2699;&#xFE0F;
</button>
)}
</div> </div>
{/* ── Profile Chips ── */} {/* ── Profile Chips ── */}
@ -944,54 +904,6 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
); );
})()} })()}
{/* ── Admin Panel ── */}
{showAdmin && (
<div className="gl-dialog-overlay" onClick={() => setShowAdmin(false)}>
<div className="gl-admin-panel" onClick={e => e.stopPropagation()}>
<div className="gl-admin-header">
<h3>&#x2699;&#xFE0F; Game Library Admin</h3>
<button className="gl-admin-close" onClick={() => setShowAdmin(false)}>&#x2715;</button>
</div>
<div className="gl-admin-content">
<div className="gl-admin-toolbar">
<span className="gl-admin-status-text">&#x2705; Eingeloggt als Admin</span>
<button className="gl-admin-refresh-btn" onClick={loadAdminProfiles}>&#x21bb; Aktualisieren</button>
</div>
{adminLoading ? (
<div className="gl-loading">Lade Profile...</div>
) : adminProfiles.length === 0 ? (
<p className="gl-search-results-title">Keine Profile vorhanden.</p>
) : (
<div className="gl-admin-list">
{adminProfiles.map((p: any) => (
<div key={p.id} className="gl-admin-item">
<img className="gl-admin-item-avatar" src={p.avatarUrl} alt={p.displayName} />
<div className="gl-admin-item-info">
<span className="gl-admin-item-name">{p.displayName}</span>
<span className="gl-admin-item-details">
{p.steamName && <span className="gl-platform-badge steam">Steam: {p.steamGames}</span>}
{p.gogName && <span className="gl-platform-badge gog">GOG: {p.gogGames}</span>}
<span className="gl-admin-item-total">{p.totalGames} Spiele</span>
</span>
</div>
<button
className="gl-admin-delete-btn"
onClick={() => adminDeleteProfile(p.id, p.displayName)}
title="Profil loeschen"
>
&#x1F5D1;&#xFE0F; Entfernen
</button>
</div>
))}
</div>
)}
</div>
</div>
</div>
)}
{/* ── GOG Code Dialog (browser fallback only) ── */} {/* ── GOG Code Dialog (browser fallback only) ── */}
{gogDialogOpen && ( {gogDialogOpen && (
<div className="gl-dialog-overlay" onClick={() => setGogDialogOpen(false)}> <div className="gl-dialog-overlay" onClick={() => setGogDialogOpen(false)}>

246
web/src/plugins/soundboard/SoundboardTab.tsx
View file

@ -361,13 +361,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
/* ── Admin ── */ /* ── Admin ── */
const isAdmin = isAdminProp ?? false; const isAdmin = isAdminProp ?? false;
const [showAdmin, setShowAdmin] = useState(false);
const [adminSounds, setAdminSounds] = useState<Sound[]>([]);
const [adminLoading, setAdminLoading] = useState(false);
const [adminQuery, setAdminQuery] = useState('');
const [adminSelection, setAdminSelection] = useState<Record<string, boolean>>({});
const [renameTarget, setRenameTarget] = useState('');
const [renameValue, setRenameValue] = useState('');
/* ── Drag & Drop Upload ── */ /* ── Drag & Drop Upload ── */
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@ -636,13 +629,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
return () => document.removeEventListener('click', handler); return () => document.removeEventListener('click', handler);
}, []); }, []);
useEffect(() => {
if (showAdmin && isAdmin) {
void loadAdminSounds();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showAdmin, isAdmin]);
/* ── Actions ── */ /* ── Actions ── */
async function loadAnalytics() { async function loadAnalytics() {
try { try {
@ -801,64 +787,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
setFavs(prev => ({ ...prev, [key]: !prev[key] })); setFavs(prev => ({ ...prev, [key]: !prev[key] }));
} }
async function loadAdminSounds() {
setAdminLoading(true);
try {
const d = await fetchSounds('', '__all__', undefined, false);
setAdminSounds(d.items || []);
} catch (e: any) {
notify(e?.message || 'Admin-Sounds konnten nicht geladen werden', 'error');
} finally {
setAdminLoading(false);
}
}
function toggleAdminSelection(path: string) {
setAdminSelection(prev => ({ ...prev, [path]: !prev[path] }));
}
function startRename(sound: Sound) {
setRenameTarget(soundKey(sound));
setRenameValue(sound.name);
}
function cancelRename() {
setRenameTarget('');
setRenameValue('');
}
async function submitRename() {
if (!renameTarget) return;
const baseName = renameValue.trim().replace(/\.(mp3|wav)$/i, '');
if (!baseName) {
notify('Bitte einen gueltigen Namen eingeben', 'error');
return;
}
try {
await apiAdminRename(renameTarget, baseName);
notify('Sound umbenannt');
cancelRename();
setRefreshKey(k => k + 1);
if (showAdmin) await loadAdminSounds();
} catch (e: any) {
notify(e?.message || 'Umbenennen fehlgeschlagen', 'error');
}
}
async function deleteAdminPaths(paths: string[]) {
if (paths.length === 0) return;
try {
await apiAdminDelete(paths);
notify(paths.length === 1 ? 'Sound geloescht' : `${paths.length} Sounds geloescht`);
setAdminSelection({});
cancelRename();
setRefreshKey(k => k + 1);
if (showAdmin) await loadAdminSounds();
} catch (e: any) {
notify(e?.message || 'Loeschen fehlgeschlagen', 'error');
}
}
/* ── Computed ── */ /* ── Computed ── */
const displaySounds = useMemo(() => { const displaySounds = useMemo(() => {
if (activeTab === 'favorites') return sounds.filter(s => favs[s.relativePath ?? s.fileName]); if (activeTab === 'favorites') return sounds.filter(s => favs[s.relativePath ?? s.fileName]);
@ -896,26 +824,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
return groups; return groups;
}, [channels]); }, [channels]);
const adminFilteredSounds = useMemo(() => {
const q = adminQuery.trim().toLowerCase();
if (!q) return adminSounds;
return adminSounds.filter(s => {
const key = soundKey(s).toLowerCase();
return s.name.toLowerCase().includes(q)
|| (s.folder || '').toLowerCase().includes(q)
|| key.includes(q);
});
}, [adminQuery, adminSounds, soundKey]);
const selectedAdminPaths = useMemo(() =>
Object.keys(adminSelection).filter(k => adminSelection[k]),
[adminSelection]);
const selectedVisibleCount = useMemo(() =>
adminFilteredSounds.filter(s => !!adminSelection[soundKey(s)]).length,
[adminFilteredSounds, adminSelection, soundKey]);
const allVisibleSelected = adminFilteredSounds.length > 0 && selectedVisibleCount === adminFilteredSounds.length;
const analyticsTop = analytics.mostPlayed.slice(0, 10); const analyticsTop = analytics.mostPlayed.slice(0, 10);
const totalSoundsDisplay = analytics.totalSounds || total; const totalSoundsDisplay = analytics.totalSounds || total;
@ -998,15 +906,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
)} )}
</div> </div>
)} )}
{isAdmin && (
<button
className="admin-btn-icon active"
onClick={() => setShowAdmin(true)}
title="Admin"
>
<span className="material-icons">settings</span>
</button>
)}
</div> </div>
</header> </header>
@ -1316,7 +1215,14 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
<div className="ctx-sep" /> <div className="ctx-sep" />
<div className="ctx-item danger" onClick={async () => { <div className="ctx-item danger" onClick={async () => {
const path = ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName; const path = ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName;
await deleteAdminPaths([path]); if (!window.confirm(`Sound "${ctxMenu.sound.name}" loeschen?`)) { setCtxMenu(null); return; }
try {
await apiAdminDelete([path]);
notify('Sound geloescht');
setRefreshKey(k => k + 1);
} catch (e: any) {
notify(e?.message || 'Loeschen fehlgeschlagen', 'error');
}
setCtxMenu(null); setCtxMenu(null);
}}> }}>
<span className="material-icons ctx-icon">delete</span> <span className="material-icons ctx-icon">delete</span>
@ -1397,142 +1303,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
</div> </div>
)} )}
{/* ═══ ADMIN PANEL ═══ */}
{showAdmin && (
<div className="admin-overlay" onClick={e => { if (e.target === e.currentTarget) setShowAdmin(false); }}>
<div className="admin-panel">
<h3>
Admin
<button className="admin-close" onClick={() => setShowAdmin(false)}>
<span className="material-icons" style={{ fontSize: 18 }}>close</span>
</button>
</h3>
<div className="admin-shell">
<div className="admin-header-row">
<p className="admin-status">Eingeloggt als Admin</p>
<div className="admin-actions-inline">
<button
className="admin-btn-action outline"
onClick={() => { void loadAdminSounds(); }}
disabled={adminLoading}
>
Aktualisieren
</button>
</div>
</div>
<div className="admin-field admin-search-field">
<label>Sounds verwalten</label>
<input
type="text"
value={adminQuery}
onChange={e => setAdminQuery(e.target.value)}
placeholder="Nach Name, Ordner oder Pfad filtern..."
/>
</div>
<div className="admin-bulk-row">
<label className="admin-select-all">
<input
type="checkbox"
checked={allVisibleSelected}
onChange={e => {
const checked = e.target.checked;
const next = { ...adminSelection };
adminFilteredSounds.forEach(s => { next[soundKey(s)] = checked; });
setAdminSelection(next);
}}
/>
<span>Alle sichtbaren auswaehlen ({selectedVisibleCount}/{adminFilteredSounds.length})</span>
</label>
<button
className="admin-btn-action danger"
disabled={selectedAdminPaths.length === 0}
onClick={async () => {
if (!window.confirm(`Wirklich ${selectedAdminPaths.length} Sound(s) loeschen?`)) return;
await deleteAdminPaths(selectedAdminPaths);
}}
>
Ausgewaehlte loeschen
</button>
</div>
<div className="admin-list-wrap">
{adminLoading ? (
<div className="admin-empty">Lade Sounds...</div>
) : adminFilteredSounds.length === 0 ? (
<div className="admin-empty">Keine Sounds gefunden.</div>
) : (
<div className="admin-list">
{adminFilteredSounds.map(sound => {
const key = soundKey(sound);
const editing = renameTarget === key;
return (
<div className="admin-item" key={key}>
<label className="admin-item-check">
<input
type="checkbox"
checked={!!adminSelection[key]}
onChange={() => toggleAdminSelection(key)}
/>
</label>
<div className="admin-item-main">
<div className="admin-item-name">{sound.name}</div>
<div className="admin-item-meta">
{sound.folder ? `Ordner: ${sound.folder}` : 'Root'}
{' \u00B7 '}
{key}
</div>
{editing && (
<div className="admin-rename-row">
<input
value={renameValue}
onChange={e => setRenameValue(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter') void submitRename();
if (e.key === 'Escape') cancelRename();
}}
placeholder="Neuer Name..."
/>
<button className="admin-btn-action primary" onClick={() => { void submitRename(); }}>
Speichern
</button>
<button className="admin-btn-action outline" onClick={cancelRename}>
Abbrechen
</button>
</div>
)}
</div>
{!editing && (
<div className="admin-item-actions">
<button className="admin-btn-action outline" onClick={() => startRename(sound)}>
Umbenennen
</button>
<button
className="admin-btn-action danger ghost"
onClick={async () => {
if (!window.confirm(`Sound "${sound.name}" loeschen?`)) return;
await deleteAdminPaths([key]);
}}
>
Loeschen
</button>
</div>
)}
</div>
);
})}
</div>
)}
</div>
</div>
</div>
</div>
)}
{/* ── Drag & Drop Overlay ── */} {/* ── Drag & Drop Overlay ── */}
{isDragging && ( {isDragging && (
<div className="drop-overlay"> <div className="drop-overlay">

159
web/src/plugins/streaming/StreamingTab.tsx
View file

@ -72,14 +72,9 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
const [openMenu, setOpenMenu] = useState<string | null>(null); const [openMenu, setOpenMenu] = useState<string | null>(null);
const [copiedId, setCopiedId] = useState<string | null>(null); const [copiedId, setCopiedId] = useState<string | null>(null);
// ── Admin / Notification Config ── // ── Admin ──
const [showAdmin, setShowAdmin] = useState(false); const _isAdmin = isAdminProp ?? false;
const isAdmin = isAdminProp ?? false; void _isAdmin; // kept for potential future use
const [availableChannels, setAvailableChannels] = useState<Array<{ channelId: string; channelName: string; guildId: string; guildName: string }>>([]);
const [notifyConfig, setNotifyConfig] = useState<Array<{ channelId: string; channelName: string; guildId: string; guildName: string; events: string[] }>>([]);
const [configLoading, setConfigLoading] = useState(false);
const [configSaving, setConfigSaving] = useState(false);
const [notifyStatus, setNotifyStatus] = useState<{ online: boolean; botTag: string | null }>({ online: false, botTag: null });
// ── Refs ── // ── Refs ──
const wsRef = useRef<WebSocket | null>(null); const wsRef = useRef<WebSocket | null>(null);
@ -135,13 +130,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
return () => document.removeEventListener('click', handler); return () => document.removeEventListener('click', handler);
}, [openMenu]); }, [openMenu]);
// Check bot status on mount
useEffect(() => {
fetch('/api/notifications/status')
.then(r => r.json())
.then(d => setNotifyStatus(d))
.catch(() => {});
}, []);
// ── Send via WS ── // ── Send via WS ──
const wsSend = useCallback((d: Record<string, any>) => { const wsSend = useCallback((d: Record<string, any>) => {
@ -603,68 +591,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
setOpenMenu(null); setOpenMenu(null);
}, [buildStreamLink]); }, [buildStreamLink]);
const loadNotifyConfig = useCallback(async () => {
setConfigLoading(true);
try {
const [chResp, cfgResp] = await Promise.all([
fetch('/api/notifications/channels', { credentials: 'include' }),
fetch('/api/notifications/config', { credentials: 'include' }),
]);
if (chResp.ok) {
const chData = await chResp.json();
setAvailableChannels(chData.channels || []);
}
if (cfgResp.ok) {
const cfgData = await cfgResp.json();
setNotifyConfig(cfgData.channels || []);
}
} catch { /* silent */ }
finally { setConfigLoading(false); }
}, []);
const openAdmin = useCallback(() => {
setShowAdmin(true);
if (isAdmin) loadNotifyConfig();
}, [isAdmin, loadNotifyConfig]);
const toggleChannelEvent = useCallback((channelId: string, channelName: string, guildId: string, guildName: string, event: string) => {
setNotifyConfig(prev => {
const existing = prev.find(c => c.channelId === channelId);
if (existing) {
const hasEvent = existing.events.includes(event);
const newEvents = hasEvent
? existing.events.filter(e => e !== event)
: [...existing.events, event];
if (newEvents.length === 0) {
return prev.filter(c => c.channelId !== channelId);
}
return prev.map(c => c.channelId === channelId ? { ...c, events: newEvents } : c);
} else {
return [...prev, { channelId, channelName, guildId, guildName, events: [event] }];
}
});
}, []);
const saveNotifyConfig = useCallback(async () => {
setConfigSaving(true);
try {
const resp = await fetch('/api/notifications/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ channels: notifyConfig }),
credentials: 'include',
});
if (resp.ok) {
// brief visual feedback handled by configSaving state
}
} catch { /* silent */ }
finally { setConfigSaving(false); }
}, [notifyConfig]);
const isChannelEventEnabled = useCallback((channelId: string, event: string): boolean => {
const ch = notifyConfig.find(c => c.channelId === channelId);
return ch?.events.includes(event) ?? false;
}, [notifyConfig]);
// ── Render ── // ── Render ──
@ -771,11 +697,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
{starting ? 'Starte...' : '\u{1F5A5}\uFE0F Stream starten'} {starting ? 'Starte...' : '\u{1F5A5}\uFE0F Stream starten'}
</button> </button>
)} )}
{isAdmin && (
<button className="stream-admin-btn" onClick={openAdmin} title="Notification Einstellungen">
{'\u2699\uFE0F'}
</button>
)}
</div> </div>
{streams.length === 0 && !isBroadcasting ? ( {streams.length === 0 && !isBroadcasting ? (
@ -880,80 +801,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
</div> </div>
)} )}
{/* ── Notification Admin Modal ── */}
{showAdmin && (
<div className="stream-admin-overlay" onClick={() => setShowAdmin(false)}>
<div className="stream-admin-panel" onClick={e => e.stopPropagation()}>
<div className="stream-admin-header">
<h3>{'\uD83D\uDD14'} Benachrichtigungen</h3>
<button className="stream-admin-close" onClick={() => setShowAdmin(false)}>{'\u2715'}</button>
</div>
<div className="stream-admin-content">
<div className="stream-admin-toolbar">
<span className="stream-admin-status">
{notifyStatus.online
? <>{'\u2705'} Bot online: <b>{notifyStatus.botTag}</b></>
: <>{'\u26A0\uFE0F'} Bot offline — <code>DISCORD_TOKEN_NOTIFICATIONS</code> setzen</>}
</span>
</div>
{configLoading ? (
<div className="stream-admin-loading">Lade Kan{'\u00E4'}le...</div>
) : availableChannels.length === 0 ? (
<div className="stream-admin-empty">
{notifyStatus.online
? 'Keine Text-Kan\u00E4le gefunden. Bot hat m\u00F6glicherweise keinen Zugriff.'
: 'Bot ist nicht verbunden. Bitte DISCORD_TOKEN_NOTIFICATIONS konfigurieren.'}
</div>
) : (
<>
<p className="stream-admin-hint">
W{'\u00E4'}hle die Kan{'\u00E4'}le, in die Benachrichtigungen gesendet werden sollen:
</p>
<div className="stream-admin-channel-list">
{availableChannels.map(ch => (
<div key={ch.channelId} className="stream-admin-channel">
<div className="stream-admin-channel-info">
<span className="stream-admin-channel-name">#{ch.channelName}</span>
<span className="stream-admin-channel-guild">{ch.guildName}</span>
</div>
<div className="stream-admin-channel-events">
<label className={`stream-admin-event-toggle${isChannelEventEnabled(ch.channelId, 'stream_start') ? ' active' : ''}`}>
<input
type="checkbox"
checked={isChannelEventEnabled(ch.channelId, 'stream_start')}
onChange={() => toggleChannelEvent(ch.channelId, ch.channelName, ch.guildId, ch.guildName, 'stream_start')}
/>
{'\uD83D\uDD34'} Stream Start
</label>
<label className={`stream-admin-event-toggle${isChannelEventEnabled(ch.channelId, 'stream_end') ? ' active' : ''}`}>
<input
type="checkbox"
checked={isChannelEventEnabled(ch.channelId, 'stream_end')}
onChange={() => toggleChannelEvent(ch.channelId, ch.channelName, ch.guildId, ch.guildName, 'stream_end')}
/>
{'\u23F9\uFE0F'} Stream Ende
</label>
</div>
</div>
))}
</div>
<div className="stream-admin-actions">
<button
className="stream-btn stream-admin-save"
onClick={saveNotifyConfig}
disabled={configSaving}
>
{configSaving ? 'Speichern...' : '\uD83D\uDCBE Speichern'}
</button>
</div>
</>
)}
</div>
</div>
</div>
)}
</div> </div>
); );
} }

621
web/src/styles.css
View file

@ -1676,3 +1676,624 @@ html, body {
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
/* ══════════════════════════════════════════════
UNIFIED ADMIN PANEL (ap-*)
══════════════════════════════════════════════ */
.ap-overlay {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
animation: fade-in 150ms ease;
}
.ap-modal {
display: flex;
width: min(940px, calc(100vw - 40px));
height: min(620px, calc(100vh - 60px));
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
animation: hub-modal-in 200ms ease;
position: relative;
}
/* ── Sidebar ── */
.ap-sidebar {
width: 210px;
min-width: 210px;
background: var(--bg-deep);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 0;
}
.ap-sidebar-title {
padding: 18px 20px 14px;
font-size: 15px;
font-weight: 700;
color: var(--text-normal);
letter-spacing: -0.01em;
border-bottom: 1px solid var(--border);
}
.ap-nav {
display: flex;
flex-direction: column;
padding: 8px;
gap: 2px;
}
.ap-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: none;
border-left: 3px solid transparent;
background: transparent;
color: var(--text-muted);
font-family: var(--font);
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-radius: 0 var(--radius) var(--radius) 0;
transition: all var(--transition);
text-align: left;
}
.ap-nav-item:hover {
color: var(--text-normal);
background: var(--bg-secondary);
}
.ap-nav-item.active {
color: var(--accent);
background: rgba(var(--accent-rgb), 0.1);
border-left-color: var(--accent);
font-weight: 600;
}
.ap-nav-icon {
font-size: 16px;
line-height: 1;
}
.ap-nav-label {
line-height: 1;
}
/* ── Content Area ── */
.ap-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ap-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.ap-title {
font-size: 16px;
font-weight: 700;
color: var(--text-normal);
margin: 0;
}
.ap-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 16px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all var(--transition);
}
.ap-close:hover {
color: var(--text-normal);
background: rgba(255, 255, 255, 0.08);
}
.ap-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
scrollbar-width: thin;
scrollbar-color: var(--bg-tertiary) transparent;
}
.ap-body::-webkit-scrollbar {
width: 6px;
}
.ap-body::-webkit-scrollbar-thumb {
background: var(--bg-tertiary);
border-radius: 3px;
}
.ap-tab-content {
display: flex;
flex-direction: column;
gap: 12px;
animation: fade-in 150ms ease;
}
/* ── Toolbar ── */
.ap-toolbar {
display: flex;
align-items: center;
gap: 10px;
}
.ap-search {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-secondary);
color: var(--text-normal);
font-size: 13px;
font-family: var(--font);
}
.ap-search:focus {
outline: none;
border-color: var(--accent);
}
.ap-search::placeholder {
color: var(--text-faint);
}
/* ── Buttons ── */
.ap-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
border: none;
border-radius: var(--radius);
font-family: var(--font);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.ap-btn:disabled {
opacity: 0.5;
cursor: default;
}
.ap-btn-primary {
background: var(--accent);
color: #fff;
}
.ap-btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
}
.ap-btn-danger {
background: rgba(237, 66, 69, 0.15);
color: var(--danger);
border: 1px solid rgba(237, 66, 69, 0.3);
}
.ap-btn-danger:hover:not(:disabled) {
background: rgba(237, 66, 69, 0.25);
}
.ap-btn-outline {
background: var(--bg-secondary);
color: var(--text-muted);
border: 1px solid var(--border);
}
.ap-btn-outline:hover:not(:disabled) {
color: var(--text-normal);
border-color: var(--text-faint);
}
.ap-btn-sm {
padding: 5px 10px;
font-size: 12px;
}
/* ── Upload Zone ── */
.ap-upload-zone {
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
border: 2px dashed var(--border);
border-radius: var(--radius);
background: var(--bg-secondary);
cursor: pointer;
transition: all var(--transition);
color: var(--text-muted);
font-size: 13px;
}
.ap-upload-zone:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(var(--accent-rgb), 0.05);
}
.ap-upload-progress {
color: var(--accent);
font-weight: 600;
}
/* ── Bulk Row ── */
.ap-bulk-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
}
.ap-select-all {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
}
.ap-select-all input[type="checkbox"] {
accent-color: var(--accent);
}
/* ── Sound List ── */
.ap-list-wrap {
flex: 1;
min-height: 0;
}
.ap-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.ap-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius);
background: var(--bg-secondary);
transition: background var(--transition);
}
.ap-item:hover {
background: var(--bg-tertiary);
}
.ap-item-check {
flex-shrink: 0;
cursor: pointer;
}
.ap-item-check input[type="checkbox"] {
accent-color: var(--accent);
}
.ap-item-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ap-item-name {
font-size: 13px;
font-weight: 600;
color: var(--text-normal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ap-item-meta {
font-size: 11px;
color: var(--text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ap-item-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.ap-rename-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.ap-rename-input {
flex: 1;
padding: 5px 8px;
border: 1px solid var(--accent);
border-radius: var(--radius);
background: var(--bg-deep);
color: var(--text-normal);
font-size: 12px;
font-family: var(--font);
}
.ap-rename-input:focus {
outline: none;
}
/* ── Empty ── */
.ap-empty {
text-align: center;
color: var(--text-muted);
padding: 40px 16px;
font-size: 13px;
}
/* ── Hint ── */
.ap-hint {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
/* ── Status Badge ── */
.ap-status-badge {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-muted);
}
.ap-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
flex-shrink: 0;
}
.ap-status-dot.online {
background: var(--success);
animation: pulse-dot 2s ease-in-out infinite;
}
/* ── Channel List (Streaming) ── */
.ap-channel-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.ap-channel-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: var(--radius);
background: var(--bg-secondary);
transition: background var(--transition);
}
.ap-channel-row:hover {
background: var(--bg-tertiary);
}
.ap-channel-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ap-channel-name {
font-size: 13px;
font-weight: 600;
color: var(--text-normal);
}
.ap-channel-guild {
font-size: 11px;
color: var(--text-faint);
}
.ap-channel-toggles {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.ap-toggle {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius);
transition: all var(--transition);
}
.ap-toggle input[type="checkbox"] {
accent-color: var(--accent);
}
.ap-toggle.active {
color: var(--accent);
background: rgba(var(--accent-rgb), 0.08);
}
/* ── Save Row ── */
.ap-save-row {
display: flex;
justify-content: flex-end;
padding-top: 8px;
}
/* ── Profile List (Game Library) ── */
.ap-profile-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.ap-profile-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius);
background: var(--bg-secondary);
transition: background var(--transition);
}
.ap-profile-row:hover {
background: var(--bg-tertiary);
}
.ap-profile-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.ap-profile-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ap-profile-name {
font-size: 14px;
font-weight: 600;
color: var(--text-normal);
}
.ap-profile-details {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
}
.ap-platform-badge {
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
font-size: 10px;
}
.ap-platform-badge.steam {
background: rgba(66, 133, 244, 0.15);
color: #64b5f6;
}
.ap-platform-badge.gog {
background: rgba(171, 71, 188, 0.15);
color: #ce93d8;
}
.ap-profile-total {
color: var(--text-faint);
}
/* ── Toast ── */
.ap-toast {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 500;
background: var(--bg-tertiary);
color: var(--text-normal);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
animation: fade-in 150ms ease;
z-index: 10;
}
.ap-toast.error {
background: rgba(237, 66, 69, 0.2);
color: #f87171;
}
/* ── Admin Panel Responsive ── */
@media (max-width: 768px) {
.ap-modal {
flex-direction: column;
width: calc(100vw - 16px);
height: calc(100vh - 32px);
}
.ap-sidebar {
width: 100%;
min-width: 100%;
flex-direction: row;
border-right: none;
border-bottom: 1px solid var(--border);
overflow-x: auto;
}
.ap-sidebar-title {
display: none;
}
.ap-nav {
flex-direction: row;
padding: 4px 8px;
gap: 4px;
}
.ap-nav-item {
border-left: none;
border-bottom: 3px solid transparent;
border-radius: var(--radius) var(--radius) 0 0;
padding: 8px 12px;
white-space: nowrap;
}
.ap-nav-item.active {
border-left-color: transparent;
border-bottom-color: var(--accent);
}
.ap-channel-toggles {
flex-direction: column;
gap: 4px;
}
}