root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): Tab-Klick ohne Full-Reload; Channel-Auswahl in localStorage persistieren

Browse source
This commit is contained in:
vibe-bot 2025-08-08 02:37:53 +02:00
parent acf14a7688
commit 7920fa7abe
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web/src/App.tsx
View file

@ -22,7 +22,12 @@ export default function App() {
setTotal(s.total); setTotal(s.total);
setFolders(s.folders); setFolders(s.folders);
setChannels(c); setChannels(c);
if (c[0]) setSelected(`${c[0].guildId}:${c[0].channelId}`); const stored = localStorage.getItem('selectedChannel');
if (stored && c.find(x => `${x.guildId}:${x.channelId}` === stored)) {
setSelected(stored);
} else if (c[0]) {
setSelected(`${c[0].guildId}:${c[0].channelId}`);
}
} catch (e: any) { } catch (e: any) {
setError(e?.message || 'Fehler beim Laden'); setError(e?.message || 'Fehler beim Laden');
} }
@ -39,6 +44,10 @@ export default function App() {
return () => clearInterval(interval); return () => clearInterval(interval);
}, [activeFolder]); }, [activeFolder]);
useEffect(() => {
if (selected) localStorage.setItem('selectedChannel', selected);
}, [selected]);
const filtered = useMemo(() => { const filtered = useMemo(() => {
const q = query.trim().toLowerCase(); const q = query.trim().toLowerCase();
if (!q) return sounds; if (!q) return sounds;
@ -111,6 +120,7 @@ export default function App() {
<button <button
key={f.key} key={f.key}
className={`tab ${activeFolder === f.key ? 'active' : ''}`} className={`tab ${activeFolder === f.key ? 'active' : ''}`}
type="button"
onClick={async () => { onClick={async () => {
setActiveFolder(f.key); setActiveFolder(f.key);
const resp = await fetchSounds(query, f.key); const resp = await fetchSounds(query, f.key);
@ -129,7 +139,7 @@ export default function App() {
<section className="grid"> <section className="grid">
{filtered.map((s) => ( {filtered.map((s) => (
<button key={`${s.fileName}-${s.name}`} className="sound" onClick={() => handlePlay(s.name, s.relativePath)} disabled={loading}> <button key={`${s.fileName}-${s.name}`} className="sound" type="button" onClick={() => handlePlay(s.name, s.relativePath)} disabled={loading}>
{s.name} {s.name}
</button> </button>
))} ))}