feat: add search APIs and telegram-like chats sidebar flow

- implement chat query filtering and message search endpoints

- add db indexes for search fields

- activate chats search input in web

- replace inline create panel with floating TG-style action menu

web/src/components/ChatList.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+import { useAuthStore } from "../store/authStore";
 import { useChatStore } from "../store/chatStore";
 import { NewChatPanel } from "./NewChatPanel";
 
@@ -6,29 +8,69 @@ export function ChatList() {
   const messagesByChat = useChatStore((s) => s.messagesByChat);
   const activeChatId = useChatStore((s) => s.activeChatId);
   const setActiveChatId = useChatStore((s) => s.setActiveChatId);
+  const loadChats = useChatStore((s) => s.loadChats);
+  const me = useAuthStore((s) => s.me);
+  const [search, setSearch] = useState("");
+  const [tab, setTab] = useState<"all" | "people" | "groups" | "channels">("all");
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      void loadChats(search.trim() ? search : undefined);
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [search, loadChats]);
+
+  const filteredChats = chats.filter((chat) => {
+    if (tab === "people") {
+      return chat.type === "private";
+    }
+    if (tab === "groups") {
+      return chat.type === "group";
+    }
+    if (tab === "channels") {
+      return chat.type === "channel";
+    }
+    return true;
+  });
+
+  const tabs: Array<{ id: "all" | "people" | "groups" | "channels"; label: string }> = [
+    { id: "all", label: "All" },
+    { id: "people", label: "Люди" },
+    { id: "groups", label: "Groups" },
+    { id: "channels", label: "Каналы" }
+  ];
 
   return (
-    <aside className="flex h-full w-full max-w-xs flex-col bg-slate-900/60">
-      <div className="border-b border-slate-700/50 px-4 py-3">
-        <div className="mb-3 flex items-center justify-between">
-          <p className="text-base font-semibold tracking-wide">Chats</p>
-          <span className="rounded-full bg-slate-700/70 px-2 py-1 text-[11px] text-slate-200">{chats.length}</span>
+    <aside className="relative flex h-full w-full max-w-xs flex-col bg-slate-900/60">
+      <div className="border-b border-slate-700/50 px-3 py-3">
+        <div className="mb-2 flex items-center gap-2">
+          <button className="rounded-lg bg-slate-700/70 px-2 py-2 text-xs">☰</button>
+          <label className="block flex-1">
+            <input
+              className="w-full rounded-full border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
+              placeholder="Search"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </label>
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sky-500/30 text-xs font-semibold uppercase text-sky-100">
+            {(me?.username || "u").slice(0, 1)}
+          </div>
+        </div>
+        <div className="flex items-center gap-3 overflow-x-auto pt-1 text-sm">
+          {tabs.map((item) => (
+            <button
+              className={`whitespace-nowrap pb-1.5 ${tab === item.id ? "border-b-2 border-sky-400 font-semibold text-sky-300" : "text-slate-300/80"}`}
+              key={item.id}
+              onClick={() => setTab(item.id)}
+            >
+              {item.label}
+            </button>
+          ))}
         </div>
-        <label className="block">
-          <input
-            className="w-full rounded-xl border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
-            placeholder="Search chats..."
-            disabled
-            value=""
-            readOnly
-          />
-        </label>
       </div>
-
-      <NewChatPanel />
-
       <div className="tg-scrollbar flex-1 overflow-auto">
-        {chats.map((chat) => (
+        {filteredChats.map((chat) => (
           <button
             className={`block w-full border-b border-slate-800/60 px-4 py-3 text-left transition ${
               activeChatId === chat.id ? "bg-sky-500/20" : "hover:bg-slate-800/65"
@@ -53,6 +95,7 @@ export function ChatList() {
           </button>
         ))}
       </div>
+      <NewChatPanel />
     </aside>
   );
 }