ui: move audio volume control to top player bar

web/src/components/MessageList.tsx

@@ -957,17 +957,14 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
   const isPlayingGlobal = useAudioPlayerStore((s) => s.isPlaying);
   const durationGlobal = useAudioPlayerStore((s) => s.duration);
   const positionGlobal = useAudioPlayerStore((s) => s.position);
-  const volumeGlobal = useAudioPlayerStore((s) => s.volume);
   const playTrack = useAudioPlayerStore((s) => s.playTrack);
   const togglePlayGlobal = useAudioPlayerStore((s) => s.togglePlay);
   const seekToGlobal = useAudioPlayerStore((s) => s.seekTo);
-  const setVolumeGlobal = useAudioPlayerStore((s) => s.setVolume);
 
   const isActiveTrack = track?.src === src;
   const isPlaying = isActiveTrack && isPlayingGlobal;
   const duration = isActiveTrack ? durationGlobal : 0;
   const position = isActiveTrack ? positionGlobal : 0;
-  const volume = volumeGlobal;
 
   async function togglePlay() {
     if (isActiveTrack) {
@@ -984,10 +981,6 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
     seekToGlobal(nextValue);
   }
 
-  function onVolume(nextValue: number) {
-    setVolumeGlobal(nextValue);
-  }
-
   return (
     <div className="rounded-lg border border-sky-500/40 bg-sky-600/20 px-2 py-1.5">
       <div className="flex items-center gap-2">
@@ -1012,17 +1005,6 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
         <span className="w-20 text-center text-xs tabular-nums text-slate-100">
           {formatAudioTime(position)} / {formatAudioTime(duration)}
         </span>
-
-        <span className="text-xs text-slate-200">🔊</span>
-        <input
-          className="h-1.5 w-16 cursor-pointer accent-slate-100"
-          max={1}
-          min={0}
-          onChange={(event) => onVolume(Number(event.target.value))}
-          step={0.05}
-          type="range"
-          value={volume}
-        />
       </div>
     </div>
   );

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>