From d7160af908cb6205a7a74bc500e4fdbbae94b5e9 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 12:42:07 +0300
Subject: [PATCH] ui: move audio volume control to top player bar

---
 web/src/components/MessageList.tsx | 18 ------------------
 web/src/pages/ChatsPage.tsx        | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/web/src/components/MessageList.tsx b/web/src/components/MessageList.tsx
index b472160..4af5935 100644
--- a/web/src/components/MessageList.tsx
+++ b/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>
   );
diff --git a/web/src/pages/ChatsPage.tsx b/web/src/pages/ChatsPage.tsx
index c81ba37..e900fa4 100644
--- a/web/src/pages/ChatsPage.tsx
+++ b/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>