ui: move audio volume control to top player bar

web/src/pages/ChatsPage.tsx

@@ -31,6 +31,7 @@ export function ChatsPage() {
   const activeTrack = useAudioPlayerStore((s) => s.track);
   const isAudioPlaying = useAudioPlayerStore((s) => s.isPlaying);
   const audioVolume = useAudioPlayerStore((s) => s.volume);
+  const setAudioVolume = useAudioPlayerStore((s) => s.setVolume);
   const toggleAudioPlay = useAudioPlayerStore((s) => s.togglePlay);
   const stopAudio = useAudioPlayerStore((s) => s.stop);
   const audioEl = useAudioPlayerStore((s) => s.audioEl);
@@ -243,7 +244,17 @@ export function ChatsPage() {
                 <button className="rounded bg-slate-700/70 px-2 py-1" onClick={() => { if (audioEl && audioEl.duration) audioEl.currentTime = Math.min(audioEl.duration, audioEl.currentTime + 10); }} type="button">
                   ▶▶
                 </button>
-                <span className="text-[11px] text-slate-400">🔊 {Math.round(audioVolume * 100)}%</span>
+                <span className="text-[11px] text-slate-300">🔊</span>
+                <input
+                  className="h-1.5 w-20 cursor-pointer accent-sky-300"
+                  max={1}
+                  min={0}
+                  onChange={(event) => setAudioVolume(Number(event.target.value))}
+                  step={0.05}
+                  type="range"
+                  value={audioVolume}
+                />
+                <span className="w-9 text-right text-[11px] text-slate-400">{Math.round(audioVolume * 100)}%</span>
                 <button className="rounded bg-slate-700/70 px-2 py-1" onClick={stopAudio} type="button">
                   ✕
                 </button>