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

app/users/repository.py

@@ -43,7 +43,12 @@ async def search_users_by_username(
     exclude_user_id: int | None = None,
 ) -> list[User]:
     normalized = query.lower().strip().lstrip("@")
-    stmt = select(User).where(func.lower(User.username).like(f"%{normalized}%"))
+    stmt = select(User).where(
+        or_(
+            func.lower(User.username).like(f"%{normalized}%"),
+            func.lower(User.email).like(f"%{normalized}%"),
+        )
+    )
     if exclude_user_id is not None:
         stmt = stmt.where(User.id != exclude_user_id)
     stmt = stmt.order_by(User.username.asc()).limit(limit)

app/users/router.py

@@ -4,11 +4,12 @@ from sqlalchemy.ext.asyncio import AsyncSession
 from app.auth.service import get_current_user
 from app.database.session import get_db
 from app.users.models import User
-from app.users.schemas import UserProfileUpdate, UserRead, UserSearchRead
+from app.users.schemas import ContactByEmailRequest, UserProfileUpdate, UserRead, UserSearchRead
 from app.users.service import (
     add_contact,
     block_user,
     get_user_by_id,
+    get_user_by_email,
     get_user_by_username,
     list_blocked_users,
     list_contacts,
@@ -101,6 +102,23 @@ async def add_contact_endpoint(
     await add_contact(db, user_id=current_user.id, contact_user_id=user_id)
 
 
+@router.post("/contacts/by-email", status_code=status.HTTP_204_NO_CONTENT)
+async def add_contact_by_email_endpoint(
+    payload: ContactByEmailRequest,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user),
+) -> None:
+    target = await get_user_by_email(db, payload.email)
+    if not target:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found")
+    if target.id == current_user.id:
+        raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail="Cannot add yourself")
+    is_blocked = await has_block_relation_between_users(db, user_a_id=current_user.id, user_b_id=target.id)
+    if is_blocked:
+        raise HTTPException(status_code=status.HTTP_409_CONFLICT, detail="Cannot add contact while blocked")
+    await add_contact(db, user_id=current_user.id, contact_user_id=target.id)
+
+
 @router.delete("/{user_id}/contacts", status_code=status.HTTP_204_NO_CONTENT)
 async def remove_contact_endpoint(
     user_id: int,

app/users/schemas.py

@@ -40,4 +40,9 @@ class UserSearchRead(BaseModel):
     id: int
     name: str
     username: str
+    email: EmailStr
     avatar_url: str | None = None
+
+
+class ContactByEmailRequest(BaseModel):
+    email: EmailStr

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"