feat(web): inline chat search and global audio bar

- replace modal message search with header inline search controls

- add global top audio bar linked to active inline audio player

- improve chat info header variants and light theme readability

web/src/components/ChatList.tsx

@@ -289,7 +289,7 @@ export function ChatList() {
                 <p className="px-2 py-1 text-[10px] uppercase tracking-wide text-slate-400">Messages</p>
                 {messageResults.slice(0, 5).map((message) => (
                   <button
-                    className="block w-full rounded-lg px-2 py-1.5 text-left hover:bg-slate-800"
+                    className="block w-full rounded-lg px-2 py-2 text-left hover:bg-slate-800"
                     key={`message-${message.id}`}
                     onClick={async () => {
                       setActiveChatId(message.chat_id);
@@ -300,7 +300,7 @@ export function ChatList() {
                       setMessageResults([]);
                     }}
                   >
-                    <p className="truncate text-[11px] text-slate-400">chat #{message.chat_id}</p>
+                    <p className="truncate text-[11px] text-slate-400">{chatDisplayNameById(chats, message.chat_id)}</p>
                     <p className="truncate text-xs font-semibold">{message.text || "[media]"}</p>
                   </button>
                 ))}
@@ -539,6 +539,17 @@ function chatLabel(chat: { display_title?: string | null; title: string | null;
   return "Channel";
 }
 
+function chatDisplayNameById(
+  chats: Array<{ id: number; display_title?: string | null; title: string | null; type: "private" | "group" | "channel"; is_saved?: boolean }>,
+  chatId: number
+): string {
+  const chat = chats.find((item) => item.id === chatId);
+  if (!chat) {
+    return "Unknown chat";
+  }
+  return chatLabel(chat);
+}
+
 function chatMetaLabel(chat: {
   type: "private" | "group" | "channel";
   is_saved?: boolean;