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/api/chats.ts

@@ -2,8 +2,10 @@ import { http } from "./http";
 import type { Chat, ChatType, Message, MessageType } from "../chat/types";
 import axios from "axios";
 
-export async function getChats(): Promise<Chat[]> {
-  const { data } = await http.get<Chat[]>("/chats");
+export async function getChats(query?: string): Promise<Chat[]> {
+  const { data } = await http.get<Chat[]>("/chats", {
+    params: query?.trim() ? { query: query.trim() } : undefined
+  });
   return data;
 }
 
@@ -30,6 +32,16 @@ export async function getMessages(chatId: number, beforeId?: number): Promise<Me
   return data;
 }
 
+export async function searchMessages(query: string, chatId?: number): Promise<Message[]> {
+  const { data } = await http.get<Message[]>("/messages/search", {
+    params: {
+      query,
+      chat_id: chatId
+    }
+  });
+  return data;
+}
+
 export async function sendMessage(chatId: number, text: string, type: MessageType = "text"): Promise<Message> {
   const { data } = await http.post<Message>("/messages", { chat_id: chatId, text, type });
   return data;

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>
   );
 }

web/src/components/NewChatPanel.tsx

@@ -5,14 +5,16 @@ import type { ChatType, UserSearchItem } from "../chat/types";
 import { useChatStore } from "../store/chatStore";
 
 type CreateMode = "group" | "channel";
+type DialogMode = "none" | "private" | "group" | "channel";
 
 export function NewChatPanel() {
-  const [mode, setMode] = useState<CreateMode>("group");
+  const [dialog, setDialog] = useState<DialogMode>("none");
   const [query, setQuery] = useState("");
   const [title, setTitle] = useState("");
   const [results, setResults] = useState<UserSearchItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
   const setActiveChatId = useChatStore((s) => s.setActiveChatId);
 
   const normalizedQuery = useMemo(() => query.trim(), [query]);
@@ -46,6 +48,7 @@ export function NewChatPanel() {
     try {
       await createPrivateChat(userId);
       await refreshChatsAndSelectLast();
+      setDialog("none");
       setQuery("");
       setResults([]);
     } catch {
@@ -55,7 +58,7 @@ export function NewChatPanel() {
     }
   }
 
-  async function createByType(event: FormEvent) {
+  async function createByType(event: FormEvent, mode: CreateMode) {
     event.preventDefault();
     if (!title.trim()) {
       setError("Title is required");
@@ -66,6 +69,7 @@ export function NewChatPanel() {
     try {
       await createChat(mode as ChatType, title.trim(), []);
       await refreshChatsAndSelectLast();
+      setDialog("none");
       setTitle("");
     } catch {
       setError("Failed to create chat");
@@ -74,56 +78,103 @@ export function NewChatPanel() {
     }
   }
 
+  function closeDialog() {
+    setDialog("none");
+    setError(null);
+  }
+
   return (
-    <div className="border-b border-slate-700/50 bg-slate-900/45 p-3">
-      <div className="mb-2 flex gap-2 text-xs">
+    <>
+      <div className="absolute bottom-4 right-4 z-20">
+        {menuOpen ? (
+          <div className="mb-2 w-44 rounded-xl border border-slate-700/80 bg-slate-900/95 p-1 shadow-xl">
+            <button
+              className="block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800"
+              onClick={() => {
+                setDialog("channel");
+                setMenuOpen(false);
+              }}
+            >
+              New Channel
+            </button>
+            <button
+              className="block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800"
+              onClick={() => {
+                setDialog("group");
+                setMenuOpen(false);
+              }}
+            >
+              New Group
+            </button>
+            <button
+              className="block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800"
+              onClick={() => {
+                setDialog("private");
+                setMenuOpen(false);
+              }}
+            >
+              New Message
+            </button>
+          </div>
+        ) : null}
         <button
-          className={`rounded-lg px-2.5 py-1.5 ${mode === "group" ? "bg-sky-500 text-slate-950" : "bg-slate-700/70 hover:bg-slate-700"}`}
-          onClick={() => setMode("group")}
+          className="h-12 w-12 rounded-full bg-sky-500 text-xl font-semibold text-slate-950 shadow-lg hover:bg-sky-400"
+          onClick={() => setMenuOpen((v) => !v)}
         >
-          Group
-        </button>
-        <button
-          className={`rounded-lg px-2.5 py-1.5 ${mode === "channel" ? "bg-sky-500 text-slate-950" : "bg-slate-700/70 hover:bg-slate-700"}`}
-          onClick={() => setMode("channel")}
-        >
-          Channel
+          {menuOpen ? "×" : "+"}
         </button>
       </div>
 
-      <div className="mb-3 space-y-2">
-        <p className="text-xs text-slate-400">Новый диалог</p>
-        <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="@username"
-          value={query}
-          onChange={(e) => void handleSearch(e.target.value)}
-        />
-        <div className="tg-scrollbar max-h-32 overflow-auto">
-          {results.map((user) => (
-            <button
-              className="mb-1 block w-full rounded-lg bg-slate-800/90 px-2 py-1.5 text-left text-sm hover:bg-slate-700/90"
-              key={user.id}
-              onClick={() => void createPrivate(user.id)}
-            >
-              @{user.username}
-            </button>
-          ))}
-          {normalizedQuery && results.length === 0 ? <p className="text-xs text-slate-400">No users</p> : null}
+      {dialog !== "none" ? (
+        <div className="absolute inset-0 z-30 flex items-end justify-center bg-slate-950/55 p-3">
+          <div className="w-full max-w-sm rounded-2xl border border-slate-700/80 bg-slate-900 p-3 shadow-2xl">
+            <div className="mb-2 flex items-center justify-between">
+              <p className="text-sm font-semibold">
+                {dialog === "private" ? "New Message" : dialog === "group" ? "New Group" : "New Channel"}
+              </p>
+              <button className="rounded-md bg-slate-700/80 px-2 py-1 text-xs" onClick={closeDialog}>
+                Close
+              </button>
+            </div>
+
+            {dialog === "private" ? (
+              <div className="space-y-2">
+                <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="@username"
+                  value={query}
+                  onChange={(e) => void handleSearch(e.target.value)}
+                />
+                <div className="tg-scrollbar max-h-44 overflow-auto">
+                  {results.map((user) => (
+                    <button
+                      className="mb-1 block w-full rounded-lg bg-slate-800 px-3 py-2 text-left text-sm hover:bg-slate-700"
+                      key={user.id}
+                      onClick={() => void createPrivate(user.id)}
+                    >
+                      @{user.username}
+                    </button>
+                  ))}
+                  {normalizedQuery && results.length === 0 ? <p className="text-xs text-slate-400">No users</p> : null}
+                </div>
+              </div>
+            ) : (
+              <form className="space-y-2" onSubmit={(e) => void createByType(e, dialog as CreateMode)}>
+                <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={dialog === "group" ? "Group title" : "Channel title"}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+                <button className="w-full rounded-lg bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60" disabled={loading} type="submit">
+                  Create {dialog}
+                </button>
+              </form>
+            )}
+            {error ? <p className="mt-2 text-xs text-red-400">{error}</p> : null}
+          </div>
         </div>
-      </div>
-      <form className="space-y-2" onSubmit={(e) => void createByType(e)}>
-        <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={mode === "group" ? "Group title" : "Channel title"}
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-        />
-        <button className="w-full rounded-lg bg-sky-500 px-2 py-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60" disabled={loading} type="submit">
-          Create {mode}
-        </button>
-      </form>
-      {error ? <p className="mt-2 text-xs text-red-400">{error}</p> : null}
-    </div>
+      ) : null}
+    </>
   );
 }

web/src/store/chatStore.ts

@@ -7,7 +7,7 @@ interface ChatState {
   activeChatId: number | null;
   messagesByChat: Record<number, Message[]>;
   typingByChat: Record<number, number[]>;
-  loadChats: () => Promise<void>;
+  loadChats: (query?: string) => Promise<void>;
   setActiveChatId: (chatId: number | null) => void;
   loadMessages: (chatId: number) => Promise<void>;
   prependMessage: (chatId: number, message: Message) => void;
@@ -29,9 +29,11 @@ export const useChatStore = create<ChatState>((set, get) => ({
   activeChatId: null,
   messagesByChat: {},
   typingByChat: {},
-  loadChats: async () => {
-    const chats = await getChats();
-    set({ chats, activeChatId: chats[0]?.id ?? null });
+  loadChats: async (query) => {
+    const chats = await getChats(query);
+    const currentActive = get().activeChatId;
+    const nextActive = chats.some((chat) => chat.id === currentActive) ? currentActive : (chats[0]?.id ?? null);
+    set({ chats, activeChatId: nextActive });
   },
   setActiveChatId: (chatId) => set({ activeChatId: chatId }),
   loadMessages: async (chatId) => {