Unified Admin Panel: 3 Plugin-Settings in ein zentrales Modal
- 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
parent
4b23d013f9
commit
3f175ca02c
10 changed files with 6137 additions and 5320 deletions
660
web/src/AdminPanel.tsx
Normal file
660
web/src/AdminPanel.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import LolstatsTab from './plugins/lolstats/LolstatsTab';
|
|||
import StreamingTab from './plugins/streaming/StreamingTab';
|
||||
import WatchTogetherTab from './plugins/watch-together/WatchTogetherTab';
|
||||
import GameLibraryTab from './plugins/game-library/GameLibraryTab';
|
||||
import AdminPanel from './AdminPanel';
|
||||
|
||||
interface PluginInfo {
|
||||
name: string;
|
||||
|
|
@ -43,6 +44,7 @@ export default function App() {
|
|||
// Centralized admin login state
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [showAdminLogin, setShowAdminLogin] = useState(false);
|
||||
const [showAdminPanel, setShowAdminPanel] = useState(false);
|
||||
const [adminPwd, setAdminPwd] = useState('');
|
||||
const [adminError, setAdminError] = useState('');
|
||||
|
||||
|
|
@ -238,8 +240,9 @@ export default function App() {
|
|||
)}
|
||||
<button
|
||||
className={`hub-admin-btn ${isAdmin ? 'active' : ''}`}
|
||||
onClick={() => isAdmin ? handleAdminLogout() : setShowAdminLogin(true)}
|
||||
title={isAdmin ? 'Admin abmelden' : 'Admin Login'}
|
||||
onClick={() => isAdmin ? setShowAdminPanel(true) : setShowAdminLogin(true)}
|
||||
onContextMenu={e => { if (isAdmin) { e.preventDefault(); handleAdminLogout(); } }}
|
||||
title={isAdmin ? 'Admin Panel (Rechtsklick = Abmelden)' : 'Admin Login'}
|
||||
>
|
||||
{isAdmin ? '\uD83D\uDD13' : '\uD83D\uDD12'}
|
||||
</button>
|
||||
|
|
@ -390,6 +393,10 @@ export default function App() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{showAdminPanel && isAdmin && (
|
||||
<AdminPanel onClose={() => setShowAdminPanel(false)} />
|
||||
)}
|
||||
|
||||
<main className="hub-content">
|
||||
{plugins.length === 0 ? (
|
||||
<div className="hub-empty">
|
||||
|
|
|
|||
|
|
@ -109,11 +109,9 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
|
|||
const filterInputRef = useRef<HTMLInputElement>(null);
|
||||
const [filterQuery, setFilterQuery] = useState('');
|
||||
|
||||
// ── Admin state ──
|
||||
const [showAdmin, setShowAdmin] = useState(false);
|
||||
const isAdmin = isAdminProp ?? false;
|
||||
const [adminProfiles, setAdminProfiles] = useState<any[]>([]);
|
||||
const [adminLoading, setAdminLoading] = useState(false);
|
||||
// ── Admin (centralized in App.tsx) ──
|
||||
const _isAdmin = isAdminProp ?? false;
|
||||
void _isAdmin;
|
||||
|
||||
// ── SSE data sync ──
|
||||
useEffect(() => {
|
||||
|
|
@ -131,39 +129,6 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
|
|||
} 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 ──
|
||||
const connectSteam = useCallback(() => {
|
||||
|
|
@ -513,11 +478,6 @@ export default function GameLibraryTab({ data, isAdmin: isAdminProp }: { data: a
|
|||
</button>
|
||||
)}
|
||||
<div className="gl-login-bar-spacer" />
|
||||
{isAdmin && (
|
||||
<button className="gl-admin-btn" onClick={openAdmin} title="Admin Panel">
|
||||
⚙️
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 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>⚙️ Game Library Admin</h3>
|
||||
<button className="gl-admin-close" onClick={() => setShowAdmin(false)}>✕</button>
|
||||
</div>
|
||||
|
||||
<div className="gl-admin-content">
|
||||
<div className="gl-admin-toolbar">
|
||||
<span className="gl-admin-status-text">✅ Eingeloggt als Admin</span>
|
||||
<button className="gl-admin-refresh-btn" onClick={loadAdminProfiles}>↻ 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"
|
||||
>
|
||||
🗑️ Entfernen
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── GOG Code Dialog (browser fallback only) ── */}
|
||||
{gogDialogOpen && (
|
||||
<div className="gl-dialog-overlay" onClick={() => setGogDialogOpen(false)}>
|
||||
|
|
|
|||
|
|
@ -361,13 +361,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
|
||||
/* ── Admin ── */
|
||||
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 ── */
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
|
@ -636,13 +629,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
return () => document.removeEventListener('click', handler);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (showAdmin && isAdmin) {
|
||||
void loadAdminSounds();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [showAdmin, isAdmin]);
|
||||
|
||||
/* ── Actions ── */
|
||||
async function loadAnalytics() {
|
||||
try {
|
||||
|
|
@ -801,64 +787,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
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 ── */
|
||||
const displaySounds = useMemo(() => {
|
||||
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;
|
||||
}, [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 totalSoundsDisplay = analytics.totalSounds || total;
|
||||
|
||||
|
|
@ -998,15 +906,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
className="admin-btn-icon active"
|
||||
onClick={() => setShowAdmin(true)}
|
||||
title="Admin"
|
||||
>
|
||||
<span className="material-icons">settings</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -1316,7 +1215,14 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
<div className="ctx-sep" />
|
||||
<div className="ctx-item danger" onClick={async () => {
|
||||
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);
|
||||
}}>
|
||||
<span className="material-icons ctx-icon">delete</span>
|
||||
|
|
@ -1397,142 +1303,6 @@ export default function SoundboardTab({ data, isAdmin: isAdminProp }: Soundboard
|
|||
</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 ── */}
|
||||
{isDragging && (
|
||||
<div className="drop-overlay">
|
||||
|
|
|
|||
|
|
@ -72,14 +72,9 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
|
|||
const [openMenu, setOpenMenu] = useState<string | null>(null);
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
|
||||
// ── Admin / Notification Config ──
|
||||
const [showAdmin, setShowAdmin] = useState(false);
|
||||
const isAdmin = isAdminProp ?? false;
|
||||
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 });
|
||||
// ── Admin ──
|
||||
const _isAdmin = isAdminProp ?? false;
|
||||
void _isAdmin; // kept for potential future use
|
||||
|
||||
// ── Refs ──
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
|
|
@ -135,13 +130,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
|
|||
return () => document.removeEventListener('click', handler);
|
||||
}, [openMenu]);
|
||||
|
||||
// Check bot status on mount
|
||||
useEffect(() => {
|
||||
fetch('/api/notifications/status')
|
||||
.then(r => r.json())
|
||||
.then(d => setNotifyStatus(d))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
// ── Send via WS ──
|
||||
const wsSend = useCallback((d: Record<string, any>) => {
|
||||
|
|
@ -603,68 +591,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
|
|||
setOpenMenu(null);
|
||||
}, [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 ──
|
||||
|
||||
|
|
@ -771,11 +697,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
|
|||
{starting ? 'Starte...' : '\u{1F5A5}\uFE0F Stream starten'}
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button className="stream-admin-btn" onClick={openAdmin} title="Notification Einstellungen">
|
||||
{'\u2699\uFE0F'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{streams.length === 0 && !isBroadcasting ? (
|
||||
|
|
@ -880,80 +801,6 @@ export default function StreamingTab({ data, isAdmin: isAdminProp }: { data: any
|
|||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1676,3 +1676,624 @@ html, body {
|
|||
border-radius: 50%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue