feat(web): refresh audio card UI and enforce outside-click menu close

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,6 +621,7 @@ export function ChatList() {
 
       {ctxChatId && ctxPos
         ? createPortal(
+          <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"
@@ -659,6 +684,7 @@ export function ChatList() {
               >
                 {(chats.find((c) => c.id === ctxChatId) ?? archivedChats.find((c) => c.id === ctxChatId))?.pinned ? "Unpin chat" : "Pin chat"}
               </button>
+            </div>
           </div>,
           document.body
         )

web/src/components/MessageList.tsx

@@ -511,6 +511,7 @@ export function MessageList() {
 
       {ctx
         ? createPortal(
+            <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 }}
@@ -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="truncate font-semibold text-slate-100">{extractFileName(text)}</p>
-            <p className="text-[11px] text-slate-400">Audio file</p>
+            <p className="text-[11px] text-slate-400">Audio</p>
           </div>
         </div>
         <AudioInlinePlayer src={text} title={extractFileName(text)} />
@@ -994,18 +996,23 @@ 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>
 
+        <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-24 cursor-pointer accent-sky-300"
+            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))}
@@ -1013,9 +1020,10 @@ function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
             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">
+        <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">
-          {formatAudioTime(position)} / {formatAudioTime(duration)}
+          ♪
         </span>
       </div>
     </div>