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

UX: Titel/Labels für Channel- und Theme-Auswahl hinzugefügt

Browse source
This commit is contained in:
vibe-bot 2025-08-10 17:52:33 +02:00
parent 62890e0e85
commit 4f14b0fded
1 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/App.tsx
View file

@ -386,10 +386,10 @@ export default function App() {
</div> </div>
<div className="flex items-center space-x-3 lg:col-span-2"> <div className="flex items-center space-x-3 lg:col-span-2">
<div className="relative flex-grow"> <div className="relative flex-grow">
<select className="input-field appearance-none pl-10" value={theme} onChange={(e)=>setTheme(e.target.value)}> <select title="Theme Auswahl" className="input-field appearance-none pl-10" value={theme} onChange={(e)=>setTheme(e.target.value)}>
<option value="dark">Dark</option> <option value="dark">Theme: Dark</option>
<option value="rainbow">Rainbow</option> <option value="rainbow">Theme: Rainbow</option>
<option value="420">420</option> <option value="420">Theme: 420</option>
</select> </select>
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>palette</span> <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>palette</span>
<span className="material-icons absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style={{color:'var(--text-secondary)'}}>unfold_more</span> <span className="material-icons absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" style={{color:'var(--text-secondary)'}}>unfold_more</span>
@ -673,8 +673,14 @@ function CustomSelect({ channels, value, onChange }: SelectProps) {
return ( return (
<div className="control select custom-select" ref={ref}> <div className="control select custom-select" ref={ref}>
<button ref={triggerRef} type="button" className="select-trigger" onClick={() => setOpen(v => !v)}> <button
{current ? `${current.guildName} – ${current.channelName}` : 'Channel wählen'} ref={triggerRef}
type="button"
className="select-trigger"
onClick={() => setOpen(v => !v)}
title={current ? `Channel: ${current.guildName} – ${current.channelName}` : 'Channel wählen'}
>
{current ? `Channel: ${current.guildName} – ${current.channelName}` : 'Channel wählen'}
<span className="chev">▾</span> <span className="chev">▾</span>
</button> </button>
{open && typeof document !== 'undefined' && ReactDOM.createPortal( {open && typeof document !== 'undefined' && ReactDOM.createPortal(