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

2026-03-08 13:32:26 +03:00
parent c214cc8fd8
commit 10b11b065f
2 changed files with 127 additions and 2 deletions
--- a/docs/core-checklist-status.md
+++ b/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`
-20. GIF - `TODO` (native GIF search/favorites not implemented)
+19. Stickers - `PARTIAL` (web sticker picker with preset pack)
+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)
--- a/web/src/components/MessageComposer.tsx
+++ b/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)}