feat(contacts): switch contacts UX to email-first flow

- expose email in user search/contact responses

- add add-contact-by-email API endpoint

- show email in contacts/search and add contact form by email in Contacts tab

web/src/api/users.ts

@@ -48,6 +48,10 @@ export async function addContact(userId: number): Promise<void> {
   await http.post(`/users/${userId}/contacts`);
 }
 
+export async function addContactByEmail(email: string): Promise<void> {
+  await http.post("/users/contacts/by-email", { email });
+}
+
 export async function removeContact(userId: number): Promise<void> {
   await http.delete(`/users/${userId}/contacts`);
 }

web/src/chat/types.ts

@@ -100,6 +100,7 @@ export interface UserSearchItem {
   id: number;
   name: string;
   username: string;
+  email?: string;
   avatar_url: string | null;
 }
 

web/src/components/ChatList.tsx

@@ -3,7 +3,7 @@ import { createPortal } from "react-dom";
 import { archiveChat, clearChat, createPrivateChat, deleteChat, getChats, getSavedMessagesChat, joinChat, pinChat, unarchiveChat, unpinChat } from "../api/chats";
 import { globalSearch } from "../api/search";
 import type { DiscoverChat, Message, UserSearchItem } from "../chat/types";
-import { addContact, listContacts, removeContact, updateMyProfile } from "../api/users";
+import { addContact, addContactByEmail, listContacts, removeContact, updateMyProfile } from "../api/users";
 import { useAuthStore } from "../store/authStore";
 import { useChatStore } from "../store/chatStore";
 import { NewChatPanel } from "./NewChatPanel";
@@ -27,6 +27,8 @@ export function ChatList() {
   const [archivedLoading, setArchivedLoading] = useState(false);
   const [contactsLoading, setContactsLoading] = useState(false);
   const [contacts, setContacts] = useState<UserSearchItem[]>([]);
+  const [contactEmail, setContactEmail] = useState("");
+  const [contactEmailError, setContactEmailError] = useState<string | null>(null);
   const [ctxChatId, setCtxChatId] = useState<number | null>(null);
   const [ctxPos, setCtxPos] = useState<{ x: number; y: number } | null>(null);
   const [deleteModalChatId, setDeleteModalChatId] = useState<number | null>(null);
@@ -331,7 +333,7 @@ export function ChatList() {
                       type="button"
                     >
                       <p className="truncate text-xs font-semibold">{user.name}</p>
-                      <p className="truncate text-[11px] text-slate-400">@{user.username}</p>
+                      <p className="truncate text-[11px] text-slate-400">{user.email || `@${user.username}`}</p>
                     </button>
                     <button
                       className="rounded bg-slate-700 px-2 py-1 text-[10px] hover:bg-slate-600"
@@ -435,6 +437,43 @@ export function ChatList() {
         {tab === "contacts" && contactsLoading ? (
           <p className="px-4 py-3 text-xs text-slate-400">Loading contacts...</p>
         ) : null}
+        {tab === "contacts" ? (
+          <div className="border-b border-slate-800/60 px-4 py-3">
+            <p className="mb-2 text-[10px] uppercase tracking-wide text-slate-400">Add contact (Email)</p>
+            <div className="flex gap-2">
+              <input
+                className="w-full rounded bg-slate-800 px-3 py-2 text-xs outline-none"
+                placeholder="name@example.com"
+                type="email"
+                value={contactEmail}
+                onChange={(e) => {
+                  setContactEmail(e.target.value);
+                  setContactEmailError(null);
+                }}
+              />
+              <button
+                className="rounded bg-sky-500 px-3 py-2 text-xs font-semibold text-slate-950"
+                onClick={async () => {
+                  const email = contactEmail.trim();
+                  if (!email) {
+                    return;
+                  }
+                  try {
+                    await addContactByEmail(email);
+                    setContactEmail("");
+                    setContacts(await listContacts());
+                  } catch {
+                    setContactEmailError("User with this email not found");
+                  }
+                }}
+                type="button"
+              >
+                Add
+              </button>
+            </div>
+            {contactEmailError ? <p className="mt-1 text-[11px] text-red-400">{contactEmailError}</p> : null}
+          </div>
+        ) : null}
         {tab === "contacts" && !contactsLoading && contacts.length === 0 ? (
           <p className="px-4 py-3 text-xs text-slate-400">No contacts yet</p>
         ) : null}
@@ -451,7 +490,7 @@ export function ChatList() {
                   type="button"
                 >
                   <p className="truncate text-sm font-semibold">{user.name}</p>
-                  <p className="truncate text-xs text-slate-400">@{user.username}</p>
+                  <p className="truncate text-xs text-slate-400">{user.email || `@${user.username}`}</p>
                 </button>
                 <button
                   className="rounded bg-slate-700 px-2 py-1 text-[10px] text-red-200 hover:bg-slate-600"