From 663df37d9235bfe7854356c322735790e2b89029 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 11:03:16 +0300
Subject: [PATCH] fix(web): media preview labels and burger menu interactions

- show emoji+media type in chat list preview

- prevent burger menu from closing immediately via event propagation
---
 web/src/components/ChatList.tsx | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/web/src/components/ChatList.tsx b/web/src/components/ChatList.tsx
index 6e4a701..14c8485 100644
--- a/web/src/components/ChatList.tsx
+++ b/web/src/components/ChatList.tsx
@@ -173,9 +173,20 @@ export function ChatList() {
     <aside 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 className="rounded-lg bg-slate-700/70 px-2 py-2 text-xs" onClick={() => setMenuOpen((v) => !v)}>☰</button>
+          <button
+            className="rounded-lg bg-slate-700/70 px-2 py-2 text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              setMenuOpen((v) => !v);
+            }}
+          >
+            ☰
+          </button>
           {menuOpen ? (
-            <div 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">
+            <div
+              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()}
+            >
               <button className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-slate-800" onClick={() => { setProfileOpen(true); setMenuOpen(false); }}>
                 My Profile
               </button>
@@ -569,17 +580,17 @@ function chatPreviewLabel(chat: {
   online_count?: number | null;
   subscribers_count?: number | null;
 }): string {
+  if (chat.last_message_type && chat.last_message_type !== "text") {
+    if (chat.last_message_type === "image") return "🖼 Photo";
+    if (chat.last_message_type === "video") return "🎬 Video";
+    if (chat.last_message_type === "audio") return "🎵 Audio";
+    if (chat.last_message_type === "voice") return "🎤 Voice message";
+    if (chat.last_message_type === "file") return "📎 File";
+    if (chat.last_message_type === "circle_video") return "🎥 Video message";
+  }
   if (chat.last_message_text?.trim()) {
     return chat.last_message_text.trim();
   }
-  if (chat.last_message_type) {
-    if (chat.last_message_type === "image") return "Photo";
-    if (chat.last_message_type === "video") return "Video";
-    if (chat.last_message_type === "audio") return "Audio";
-    if (chat.last_message_type === "voice") return "Voice message";
-    if (chat.last_message_type === "file") return "File";
-    if (chat.last_message_type === "circle_video") return "Video message";
-  }
   return chatMetaLabel(chat);
 }