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

feat(ui): Fuzzy-Button neben Suche verschoben; Icon-only (blur_on) mit Tooltip und ARIA-Label

Browse source
This commit is contained in:
vibe-bot 2025-08-10 18:39:43 +02:00
parent 4f14b0fded
commit fdf0dea3e6
1 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/App.tsx
View file

@ -325,13 +325,6 @@ export default function App() {
<button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => { <button className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" onClick={async () => {
try { const res = await fetch('/api/sounds'); const data = await res.json(); const items = data?.items || []; if (!items.length || !selected) return; const rnd = items[Math.floor(Math.random()*items.length)]; const [guildId, channelId] = selected.split(':'); await playSound(rnd.name, guildId, channelId, volume, rnd.relativePath);} catch {} try { const res = await fetch('/api/sounds'); const data = await res.json(); const items = data?.items || []; if (!items.length || !selected) return; const rnd = items[Math.floor(Math.random()*items.length)]; const [guildId, channelId] = selected.split(':'); await playSound(rnd.name, guildId, channelId, volume, rnd.relativePath);} catch {}
}}>Random</button> }}>Random</button>
<button
className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${fuzzy ? 'bg-green-600 hover:bg-green-500 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'}`}
onClick={() => setFuzzy((v) => !v)}
title="Fuzzy-Suche umschalten"
>
Fuzzy {fuzzy ? 'ON' : 'OFF'}
</button>
<button <button
className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${ className={`font-bold py-3 px-6 rounded-lg transition duration-300 ${
chaosMode chaosMode
@ -349,9 +342,20 @@ export default function App() {
<div className="control-panel rounded-xl p-6 mb-8"> <div className="control-panel rounded-xl p-6 mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-center"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-center">
<div className="relative"> <div className="flex items-center gap-3">
<input className="input-field pl-10 with-left-icon" placeholder="Nach Sounds suchen..." value={query} onChange={(e)=>setQuery(e.target.value)} /> <button
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>search</span> className={`font-bold p-3 rounded-lg transition duration-300 ${fuzzy ? 'bg-green-600 hover:bg-green-500 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'}`}
onClick={() => setFuzzy((v) => !v)}
title="Fuzzy-Suche umschalten"
aria-label="Fuzzy-Suche umschalten"
aria-pressed={fuzzy}
>
<span className="material-icons" aria-hidden="true">blur_on</span>
</button>
<div className="relative flex-1">
<input className="input-field pl-10 with-left-icon w-full" placeholder="Nach Sounds suchen..." value={query} onChange={(e)=>setQuery(e.target.value)} />
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>search</span>
</div>
</div> </div>
<div className="relative"> <div className="relative">
<CustomSelect channels={channels} value={selected} onChange={setSelected} /> <CustomSelect channels={channels} value={selected} onChange={setSelected} />