From 58208787e74559c746c1763a592ee59ba0bab416 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 12:55:55 +0300
Subject: [PATCH] feat(web): refresh audio card UI and enforce outside-click
 menu close

---
 web/src/components/ChatList.tsx    | 150 +++++++++++++++++------------
 web/src/components/MessageList.tsx |  50 ++++++----
 2 files changed, 117 insertions(+), 83 deletions(-)

diff --git a/web/src/components/ChatList.tsx b/web/src/components/ChatList.tsx
index dab8c61..ef8b08e 100644
--- a/web/src/components/ChatList.tsx
+++ b/web/src/components/ChatList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { archiveChat, clearChat, createPrivateChat, deleteChat, getChats, getSavedMessagesChat, joinChat, leaveChat, pinChat, unarchiveChat, unpinChat } from "../api/chats";
 import { globalSearch } from "../api/search";
@@ -46,6 +46,9 @@ export function ChatList() {
   const [profileAllowPrivateMessages, setProfileAllowPrivateMessages] = useState(true);
   const [profileError, setProfileError] = useState<string | null>(null);
   const [profileSaving, setProfileSaving] = useState(false);
+  const sidebarRef = useRef<HTMLElement | null>(null);
+  const burgerMenuRef = useRef<HTMLDivElement | null>(null);
+  const burgerButtonRef = useRef<HTMLButtonElement | null>(null);
   const deleteModalChat = chats.find((chat) => chat.id === deleteModalChatId) ?? null;
   const canDeleteForEveryone = Boolean(
     deleteModalChat &&
@@ -168,6 +171,25 @@ export function ChatList() {
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
 
+  useEffect(() => {
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (ctxChatId) {
+        setCtxChatId(null);
+        setCtxPos(null);
+      }
+      if (menuOpen) {
+        const inMenu = burgerMenuRef.current?.contains(target ?? null) ?? false;
+        const inButton = burgerButtonRef.current?.contains(target ?? null) ?? false;
+        if (!inMenu && !inButton) {
+          setMenuOpen(false);
+        }
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [ctxChatId, menuOpen]);
+
   useEffect(() => {
     applyAppearancePreferences(getAppPreferences());
   }, []);
@@ -271,10 +293,11 @@ export function ChatList() {
   }
 
   return (
-    <aside className="relative flex h-full w-full flex-col bg-slate-900/60" onClick={() => { setCtxChatId(null); setCtxPos(null); setMenuOpen(false); }}>
+    <aside ref={sidebarRef} className="relative flex h-full w-full flex-col bg-slate-900/60" onClick={() => { setCtxChatId(null); setCtxPos(null); setMenuOpen(false); }}>
       <div className="border-b border-slate-700/50 px-3 py-3">
         <div className="relative mb-2 flex items-center gap-2">
           <button
+            ref={burgerButtonRef}
             className="rounded-lg bg-slate-700/70 px-2 py-2 text-xs"
             onClick={(e) => {
               e.stopPropagation();
@@ -285,6 +308,7 @@ export function ChatList() {
           </button>
           {menuOpen ? (
             <div
+              ref={burgerMenuRef}
               className="absolute left-0 top-11 z-40 w-56 rounded-xl border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl"
               onClick={(e) => e.stopPropagation()}
             >
@@ -597,68 +621,70 @@ export function ChatList() {
 
       {ctxChatId && ctxPos
         ? createPortal(
-          <div className="fixed z-[100] w-44 rounded-lg border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl" style={{ left: ctxPos.x, top: ctxPos.y }} onClick={(e) => e.stopPropagation()}>
-            <button
-              className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800"
-              onClick={() => {
-                setDeleteModalChatId(ctxChatId);
-                setCtxChatId(null);
-                setCtxPos(null);
-                setDeleteForAll(false);
-              }}
-            >
-              {(() => {
-                const chat = chats.find((c) => c.id === ctxChatId);
-                if (!chat) return "Delete chat";
-                if (chat.is_saved) return "Clear chat";
-                if (chat.type === "channel" && chat.my_role === "member") return "Leave channel";
-                return "Delete chat";
-              })()}
-            </button>
-            <button
-              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
-              onClick={async () => {
-                const target = chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId);
-                if (!target) {
-                  return;
-                }
-                if (target.archived) {
-                  await unarchiveChat(target.id);
-                } else {
-                  await archiveChat(target.id);
-                }
-                await loadChats();
-                const nextArchived = await getChats(undefined, true);
-                setArchivedChats(nextArchived);
-                setCtxChatId(null);
-                setCtxPos(null);
-              }}
-            >
-              {(chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId))?.archived ? "Unarchive" : "Archive"}
-            </button>
-            <button
-              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
-              onClick={async () => {
-                const target = chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId);
-                if (!target) {
-                  return;
-                }
-                if (target.pinned) {
-                  await unpinChat(target.id);
-                } else {
-                  await pinChat(target.id);
-                }
-                await loadChats();
-                if (tab === "archived") {
+          <div className="fixed inset-0 z-[99]" onClick={() => { setCtxChatId(null); setCtxPos(null); }}>
+            <div className="fixed z-[100] w-44 rounded-lg border border-slate-700/80 bg-slate-900/95 p-1 shadow-2xl" style={{ left: ctxPos.x, top: ctxPos.y }} onClick={(e) => e.stopPropagation()}>
+              <button
+                className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-300 hover:bg-slate-800"
+                onClick={() => {
+                  setDeleteModalChatId(ctxChatId);
+                  setCtxChatId(null);
+                  setCtxPos(null);
+                  setDeleteForAll(false);
+                }}
+              >
+                {(() => {
+                  const chat = chats.find((c) => c.id === ctxChatId);
+                  if (!chat) return "Delete chat";
+                  if (chat.is_saved) return "Clear chat";
+                  if (chat.type === "channel" && chat.my_role === "member") return "Leave channel";
+                  return "Delete chat";
+                })()}
+              </button>
+              <button
+                className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
+                onClick={async () => {
+                  const target = chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId);
+                  if (!target) {
+                    return;
+                  }
+                  if (target.archived) {
+                    await unarchiveChat(target.id);
+                  } else {
+                    await archiveChat(target.id);
+                  }
+                  await loadChats();
                   const nextArchived = await getChats(undefined, true);
                   setArchivedChats(nextArchived);
-                }
-                setCtxChatId(null);
-                setCtxPos(null);
-              }}
-            >
-              {(chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId))?.pinned ? "Unpin chat" : "Pin chat"}
-            </button>
+                  setCtxChatId(null);
+                  setCtxPos(null);
+                }}
+              >
+                {(chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId))?.archived ? "Unarchive" : "Archive"}
+              </button>
+              <button
+                className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-slate-800"
+                onClick={async () => {
+                  const target = chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId);
+                  if (!target) {
+                    return;
+                  }
+                  if (target.pinned) {
+                    await unpinChat(target.id);
+                  } else {
+                    await pinChat(target.id);
+                  }
+                  await loadChats();
+                  if (tab === "archived") {
+                    const nextArchived = await getChats(undefined, true);
+                    setArchivedChats(nextArchived);
+                  }
+                  setCtxChatId(null);
+                  setCtxPos(null);
+                }}
+              >
+                {(chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId))?.pinned ? "Unpin chat" : "Pin chat"}
+              </button>
+            </div>
           </div>,
           document.body
         )
diff --git a/web/src/components/MessageList.tsx b/web/src/components/MessageList.tsx
index e52a030..abab732 100644
--- a/web/src/components/MessageList.tsx
+++ b/web/src/components/MessageList.tsx
@@ -511,11 +511,12 @@ export function MessageList() {
 
       {ctx
         ? createPortal(
-            <div
-              className="fixed z-[110] w-56 rounded-xl border border-slate-700/90 bg-slate-900/95 p-1.5 shadow-2xl"
-              style={{ left: ctx.x, top: ctx.y }}
-              onClick={(event) => event.stopPropagation()}
-            >
+            <div className="fixed inset-0 z-[109]" onClick={() => setCtx(null)}>
+              <div
+                className="fixed z-[110] w-56 rounded-xl border border-slate-700/90 bg-slate-900/95 p-1.5 shadow-2xl"
+                style={{ left: ctx.x, top: ctx.y }}
+                onClick={(event) => event.stopPropagation()}
+              >
               <div className="mb-1 flex flex-wrap gap-1 rounded-lg bg-slate-800/80 p-1">
                 {QUICK_REACTIONS.map((emoji) => (
                   <button
@@ -623,6 +624,7 @@ export function MessageList() {
                   </button>
                 </>
               ) : null}
+              </div>
             </div>,
             document.body
           )
@@ -854,10 +856,10 @@ function renderMessageContent(
         opts.onAttachmentContextMenu(event, text);
       }}>
         <div className="mb-1 flex items-center gap-2 text-xs text-slate-300">
-          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-slate-700/80">🎵</span>
+          <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500/25 text-emerald-200">🎵</span>
           <div className="min-w-0">
-            <p className="truncate font-semibold text-slate-200">{extractFileName(text)}</p>
-            <p className="text-[11px] text-slate-400">Audio file</p>
+            <p className="truncate font-semibold text-slate-100">{extractFileName(text)}</p>
+            <p className="text-[11px] text-slate-400">Audio</p>
           </div>
         </div>
         <AudioInlinePlayer src={text} title={extractFileName(text)} />
@@ -994,28 +996,34 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
   }
 
   return (
-    <div className="rounded-lg border border-sky-500/40 bg-sky-600/20 px-2 py-1.5">
+    <div className="rounded-lg border border-slate-600/70 bg-slate-900/60 px-2 py-2">
       <div className="flex items-center gap-2">
         <button
-          className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-slate-900/70 text-xs text-white hover:bg-slate-900"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500/80 text-xs text-slate-950 hover:bg-emerald-400"
           onClick={() => void togglePlay()}
           type="button"
         >
           {isPlaying ? "❚❚" : "▶"}
         </button>
 
-        <input
-          className="h-1.5 w-24 cursor-pointer accent-sky-300"
-          max={Math.max(duration, 0.01)}
-          min={0}
-          onChange={(event) => onSeek(Number(event.target.value))}
-          step={0.1}
-          type="range"
-          value={Math.min(position, Math.max(duration, 0.01))}
-        />
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex items-center justify-between gap-2 text-[11px] text-slate-300">
+            <span className="truncate">{title}</span>
+            <span className="tabular-nums">{formatAudioTime(position)} / {formatAudioTime(duration)}</span>
+          </div>
+          <input
+            className="h-1.5 w-full cursor-pointer accent-emerald-300"
+            max={Math.max(duration, 0.01)}
+            min={0}
+            onChange={(event) => onSeek(Number(event.target.value))}
+            step={0.1}
+            type="range"
+            value={Math.min(position, Math.max(duration, 0.01))}
+          />
+        </div>
 
-        <span className="w-20 text-center text-xs tabular-nums text-slate-100">
-          {formatAudioTime(position)} / {formatAudioTime(duration)}
+        <span className="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-slate-800 px-1 text-[10px] text-slate-300">
+          ♪
         </span>
       </div>
     </div>