feat(web): add built-in sticker and GIF picker

app/chats/service.py

@@ -27,7 +27,25 @@ from app.messages.repository import (
     list_chat_message_ids,
 )
 from app.realtime.presence import get_users_online_map
-from app.users.repository import get_user_by_id, has_block_relation_between_users
+from app.users.repository import get_user_by_id, has_block_relation_between_users, is_user_in_contacts
+
+
+async def _can_view_last_seen(*, db: AsyncSession, target_user, viewer_user_id: int) -> bool:
+    if target_user.id == viewer_user_id:
+        return True
+    if target_user.privacy_last_seen == "everyone":
+        return True
+    if target_user.privacy_last_seen == "nobody":
+        return False
+    return await is_user_in_contacts(db, owner_user_id=target_user.id, candidate_user_id=viewer_user_id)
+
+
+async def _can_invite_to_group(*, db: AsyncSession, target_user, actor_user_id: int) -> bool:
+    if target_user.id == actor_user_id:
+        return False
+    if target_user.privacy_group_invites == "everyone":
+        return True
+    return await is_user_in_contacts(db, owner_user_id=target_user.id, candidate_user_id=actor_user_id)
 
 
 async def serialize_chat_for_user(
@@ -61,9 +79,12 @@ async def serialize_chat_for_user(
                 display_title = counterpart.name or counterpart.username
                 counterpart_name = counterpart.name
                 counterpart_username = counterpart.username
-                counterpart_last_seen_at = counterpart.last_seen_at
+                presence_allowed = await _can_view_last_seen(db=db, target_user=counterpart, viewer_user_id=user_id)
+                counterpart_last_seen_at = counterpart.last_seen_at if presence_allowed else None
             presence = await get_users_online_map([counterpart_id])
-            counterpart_is_online = presence.get(counterpart_id, False)
+            if counterpart:
+                presence_allowed = await _can_view_last_seen(db=db, target_user=counterpart, viewer_user_id=user_id)
+                counterpart_is_online = presence.get(counterpart_id, False) if presence_allowed else None
     else:
         member_ids = await repository.list_chat_member_user_ids(db, chat_id=chat.id)
         members_count = len(member_ids)
@@ -175,6 +196,13 @@ async def create_chat_for_user(db: AsyncSession, *, creator_id: int, payload: Ch
         user = await get_user_by_id(db, member_id)
         if not user:
             raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=f"User {member_id} not found")
+        if payload.type in {ChatType.GROUP, ChatType.CHANNEL}:
+            can_invite = await _can_invite_to_group(db=db, target_user=user, actor_user_id=creator_id)
+            if not can_invite:
+                raise HTTPException(
+                    status_code=status.HTTP_403_FORBIDDEN,
+                    detail=f"User {member_id} does not allow group invites from you",
+                )
 
     chat = await repository.create_chat_with_meta(
         db,
@@ -287,6 +315,8 @@ async def add_chat_member_for_user(
     target_user = await get_user_by_id(db, target_user_id)
     if not target_user:
         raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found")
+    if not await _can_invite_to_group(db=db, target_user=target_user, actor_user_id=actor_user_id):
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="User does not allow group invites from you")
     existing = await repository.get_chat_member(db, chat_id=chat_id, user_id=target_user_id)
     if existing:
         return existing

app/users/repository.py

@@ -140,6 +140,16 @@ async def get_contact_relation(db: AsyncSession, *, user_id: int, contact_user_i
     return result.scalar_one_or_none()
 
 
+async def is_user_in_contacts(db: AsyncSession, *, owner_user_id: int, candidate_user_id: int) -> bool:
+    result = await db.execute(
+        select(UserContact.id).where(
+            UserContact.user_id == owner_user_id,
+            UserContact.contact_user_id == candidate_user_id,
+        ).limit(1)
+    )
+    return result.scalar_one_or_none() is not None
+
+
 async def list_contacts(db: AsyncSession, *, user_id: int) -> list[User]:
     stmt = (
         select(User)

app/users/router.py

@@ -16,6 +16,8 @@ from app.users.service import (
     has_block_relation_between_users,
     remove_contact,
     search_users_by_username,
+    serialize_user_for_viewer,
+    serialize_user_search_for_viewer,
     unblock_user,
     update_user_profile,
 )
@@ -43,7 +45,7 @@ async def search_users(
         limit=limit,
         exclude_user_id=current_user.id,
     )
-    return users
+    return [await serialize_user_search_for_viewer(db, target_user=user, viewer_user_id=current_user.id) for user in users]
 
 
 @router.put("/profile", response_model=UserRead)
@@ -69,7 +71,7 @@ async def update_profile(
         privacy_avatar=payload.privacy_avatar,
         privacy_group_invites=payload.privacy_group_invites,
     )
-    return updated
+    return await serialize_user_for_viewer(db, target_user=updated, viewer_user_id=current_user.id)
 
 
 @router.get("/blocked", response_model=list[UserSearchRead])
@@ -77,7 +79,8 @@ async def read_blocked_users(
     db: AsyncSession = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ) -> list[UserSearchRead]:
-    return await list_blocked_users(db, user_id=current_user.id)
+    users = await list_blocked_users(db, user_id=current_user.id)
+    return [await serialize_user_search_for_viewer(db, target_user=user, viewer_user_id=current_user.id) for user in users]
 
 
 @router.get("/contacts", response_model=list[UserSearchRead])
@@ -85,7 +88,8 @@ async def read_contacts(
     db: AsyncSession = Depends(get_db),
     current_user: User = Depends(get_current_user),
 ) -> list[UserSearchRead]:
-    return await list_contacts(db, user_id=current_user.id)
+    users = await list_contacts(db, user_id=current_user.id)
+    return [await serialize_user_search_for_viewer(db, target_user=user, viewer_user_id=current_user.id) for user in users]
 
 
 @router.post("/{user_id}/contacts", status_code=status.HTTP_204_NO_CONTENT)
@@ -163,4 +167,4 @@ async def read_user(user_id: int, db: AsyncSession = Depends(get_db), _current_u
     user = await get_user_by_id(db, user_id)
     if not user:
         raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found")
-    return user
+    return await serialize_user_for_viewer(db, target_user=user, viewer_user_id=_current_user.id)

app/users/service.py

@@ -2,6 +2,7 @@ from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.users import repository
 from app.users.models import User
+from app.users.schemas import UserRead, UserSearchRead
 
 
 async def get_user_by_id(db: AsyncSession, user_id: int) -> User | None:
@@ -96,3 +97,51 @@ async def remove_contact(db: AsyncSession, *, user_id: int, contact_user_id: int
 
 async def list_contacts(db: AsyncSession, *, user_id: int) -> list[User]:
     return await repository.list_contacts(db, user_id=user_id)
+
+
+async def can_view_user_avatar(db: AsyncSession, *, target_user: User, viewer_user_id: int) -> bool:
+    if target_user.id == viewer_user_id:
+        return True
+    if target_user.privacy_avatar == "everyone":
+        return True
+    if target_user.privacy_avatar == "nobody":
+        return False
+    return await repository.is_user_in_contacts(db, owner_user_id=target_user.id, candidate_user_id=viewer_user_id)
+
+
+async def can_view_user_last_seen(db: AsyncSession, *, target_user: User, viewer_user_id: int) -> bool:
+    if target_user.id == viewer_user_id:
+        return True
+    if target_user.privacy_last_seen == "everyone":
+        return True
+    if target_user.privacy_last_seen == "nobody":
+        return False
+    return await repository.is_user_in_contacts(db, owner_user_id=target_user.id, candidate_user_id=viewer_user_id)
+
+
+async def can_invite_user_to_groups(db: AsyncSession, *, target_user: User, actor_user_id: int) -> bool:
+    if target_user.id == actor_user_id:
+        return False
+    if target_user.privacy_group_invites == "everyone":
+        return True
+    return await repository.is_user_in_contacts(db, owner_user_id=target_user.id, candidate_user_id=actor_user_id)
+
+
+async def serialize_user_for_viewer(db: AsyncSession, *, target_user: User, viewer_user_id: int) -> UserRead:
+    payload = UserRead.model_validate(target_user).model_dump()
+    if not await can_view_user_avatar(db, target_user=target_user, viewer_user_id=viewer_user_id):
+        payload["avatar_url"] = None
+    if target_user.id != viewer_user_id:
+        payload["allow_private_messages"] = True
+        payload["privacy_last_seen"] = "everyone"
+        payload["privacy_avatar"] = "everyone"
+        payload["privacy_group_invites"] = "everyone"
+        payload["twofa_enabled"] = False
+    return UserRead.model_validate(payload)
+
+
+async def serialize_user_search_for_viewer(db: AsyncSession, *, target_user: User, viewer_user_id: int) -> UserSearchRead:
+    payload = UserSearchRead.model_validate(target_user).model_dump()
+    if not await can_view_user_avatar(db, target_user=target_user, viewer_user_id=viewer_user_id):
+        payload["avatar_url"] = None
+    return UserSearchRead.model_validate(payload)

docs/api-reference.md

@@ -755,6 +755,18 @@ Response: `200` + `ChatNotificationSettingsRead`
 
 Note: mentions (`@username`) are delivered even when chat is muted.
 
+## 3.7 Privacy enforcement notes
+
+- User profile privacy is enforced server-side:
+  - `privacy_avatar` controls whether other users receive `avatar_url`.
+  - `privacy_last_seen` controls whether private-chat counterpart presence fields are visible:
+    - `counterpart_is_online`
+    - `counterpart_last_seen_at`
+- For `contacts` mode, visibility is granted only when the viewer is in target user's contacts.
+- Group/channel invite restrictions are enforced by `privacy_group_invites`:
+  - Users with `contacts` can be added only by users present in their contacts list.
+  - Applies to group/channel creation with initial members and admin add-member action.
+
 ### POST `/api/v1/chats/{chat_id}/archive`
 
 Auth required.  

docs/core-checklist-status.md

@@ -25,8 +25,8 @@ Legend:
 16. Media & Attachments - `DONE` (upload/preview/download/gallery)
 17. Voice Messages - `PARTIAL` (record/send/play/seek/speed; UX still being polished)
 18. Circle Video Messages - `PARTIAL` (send/play present, recording UX basic)
-19. Stickers - `TODO`
+19. Stickers - `PARTIAL` (web sticker picker with preset pack)
-20. GIF - `TODO` (native GIF search/favorites not implemented)
+20. GIF - `PARTIAL` (web GIF picker with preset catalog + local search)
 21. Message History/Search - `DONE` (history/pagination/chat+global search)
 22. Text Formatting - `PARTIAL` (bold/italic/underline/spoiler/mono/links supported; toolbar still evolving)
 23. Groups - `PARTIAL` (create/add/remove/invite link; advanced moderation partial)

web/src/components/MessageComposer.tsx

@@ -7,6 +7,28 @@ import { getAppPreferences } from "../utils/preferences";
 
 type RecordingState = "idle" | "recording" | "locked";
 
+const STICKER_PRESETS: Array<{ name: string; url: string }> = [
+  { name: "Thumbs Up", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f44d.png" },
+  { name: "Party", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f389.png" },
+  { name: "Fire", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f525.png" },
+  { name: "Heart", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/2764.png" },
+  { name: "Cool", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f60e.png" },
+  { name: "Rocket", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f680.png" },
+  { name: "Clap", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f44f.png" },
+  { name: "Star", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/2b50.png" },
+];
+
+const GIF_PRESETS: Array<{ name: string; url: string }> = [
+  { name: "Cat Typing", url: "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" },
+  { name: "Thumbs Up", url: "https://media.giphy.com/media/111ebonMs90YLu/giphy.gif" },
+  { name: "Excited", url: "https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif" },
+  { name: "Dance", url: "https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" },
+  { name: "Nice", url: "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif" },
+  { name: "Wow", url: "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" },
+  { name: "Thanks", url: "https://media.giphy.com/media/26ufdipQqU2lhNA4g/giphy.gif" },
+  { name: "Success", url: "https://media.giphy.com/media/4T7e4DmcrP9du/giphy.gif" },
+];
+
 export function MessageComposer() {
   const activeChatId = useChatStore((s) => s.activeChatId);
   const chats = useChatStore((s) => s.chats);
@@ -48,6 +70,9 @@ export function MessageComposer() {
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [showAttachMenu, setShowAttachMenu] = useState(false);
   const [showFormatMenu, setShowFormatMenu] = useState(false);
+  const [showStickerMenu, setShowStickerMenu] = useState(false);
+  const [showGifMenu, setShowGifMenu] = useState(false);
+  const [gifQuery, setGifQuery] = useState("");
   const [captionDraft, setCaptionDraft] = useState("");
   const mediaInputRef = useRef<HTMLInputElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -214,6 +239,26 @@ export function MessageComposer() {
     }
   }
 
+  async function sendPresetMedia(url: string) {
+    if (!activeChatId || !me || !canSendInActiveChat) {
+      return;
+    }
+    const clientMessageId = makeClientMessageId();
+    const replyToMessageId = activeChatId ? (replyToByChat[activeChatId]?.id ?? undefined) : undefined;
+    addOptimisticMessage({ chatId: activeChatId, senderId: me.id, type: "image", text: url, clientMessageId });
+    try {
+      const message = await sendMessageWithClientId(activeChatId, url, "image", clientMessageId, replyToMessageId);
+      confirmMessageByClientId(activeChatId, clientMessageId, message);
+      setReplyToMessage(activeChatId, null);
+      setShowStickerMenu(false);
+      setShowGifMenu(false);
+      setGifQuery("");
+    } catch {
+      removeOptimisticMessage(activeChatId, clientMessageId);
+      setUploadError("Failed to send media");
+    }
+  }
+
   function onComposerKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
     if (event.key !== "Enter") {
       return;
@@ -746,6 +791,60 @@ export function MessageComposer() {
         </div>
       ) : null}
 
+      {showStickerMenu ? (
+        <div className="mb-2 rounded-xl border border-slate-700/80 bg-slate-900/95 p-2">
+          <div className="mb-2 flex items-center justify-between">
+            <p className="text-xs font-semibold text-slate-200">Stickers</p>
+            <button className="rounded bg-slate-700 px-2 py-1 text-[11px]" onClick={() => setShowStickerMenu(false)} type="button">
+              Close
+            </button>
+          </div>
+          <div className="grid grid-cols-4 gap-2 md:grid-cols-8">
+            {STICKER_PRESETS.map((sticker) => (
+              <button
+                className="rounded-lg bg-slate-800/80 p-2 hover:bg-slate-700"
+                key={sticker.url}
+                onClick={() => void sendPresetMedia(sticker.url)}
+                title={sticker.name}
+                type="button"
+              >
+                <img alt={sticker.name} className="mx-auto h-9 w-9 object-contain" draggable={false} src={sticker.url} />
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {showGifMenu ? (
+        <div className="mb-2 rounded-xl border border-slate-700/80 bg-slate-900/95 p-2">
+          <div className="mb-2 flex items-center justify-between gap-2">
+            <p className="text-xs font-semibold text-slate-200">GIF</p>
+            <input
+              className="w-full max-w-xs rounded border border-slate-700/80 bg-slate-800/80 px-2 py-1 text-xs outline-none placeholder:text-slate-400 focus:border-sky-500"
+              onChange={(event) => setGifQuery(event.target.value)}
+              placeholder="Search GIF"
+              value={gifQuery}
+            />
+            <button className="rounded bg-slate-700 px-2 py-1 text-[11px]" onClick={() => setShowGifMenu(false)} type="button">
+              Close
+            </button>
+          </div>
+          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+            {GIF_PRESETS.filter((item) => item.name.toLowerCase().includes(gifQuery.trim().toLowerCase())).map((gif) => (
+              <button
+                className="overflow-hidden rounded-lg bg-slate-800/80 hover:bg-slate-700"
+                key={gif.url}
+                onClick={() => void sendPresetMedia(gif.url)}
+                title={gif.name}
+                type="button"
+              >
+                <img alt={gif.name} className="h-20 w-full object-cover md:h-24" draggable={false} src={gif.url} />
+              </button>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
       {!canSendInActiveChat && activeChat?.type === "channel" ? (
         <div className="mb-2 rounded-xl border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
           Read-only channel: only owners and admins can post.
@@ -811,6 +910,32 @@ export function MessageComposer() {
           />
         </div>
 
+        <button
+          className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
+          disabled={!canSendInActiveChat}
+          onClick={() => {
+            setShowGifMenu(false);
+            setShowStickerMenu((v) => !v);
+          }}
+          type="button"
+          title="Stickers"
+        >
+          🙂
+        </button>
+
+        <button
+          className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
+          disabled={!canSendInActiveChat}
+          onClick={() => {
+            setShowStickerMenu(false);
+            setShowGifMenu((v) => !v);
+          }}
+          type="button"
+          title="GIF"
+        >
+          GIF
+        </button>
+
         <button
           className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700"
           onClick={() => setShowFormatMenu((v) => !v)}