From aa3e464b3510fddc711509c1c2f88e0ab9d4d3bb Mon Sep 17 00:00:00 2001
From: Your Name <aa@bb.com>
Date: Tue, 8 Sep 2026 02:45:55 +0800
Subject: [PATCH] feat(web): emoji picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plain system-emoji grid (README §3.3's mockup itself has no custom emoji
asset list, just gray placeholder tiles captioned "use system emoji or a
branded pack" -- matches the old app's own reasoning, no WeChat/QQ-style
sticker art available). Recent-emoji tab persists via localStorage, capped
at 30, same as the old app's send-message.jsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../features/messages/ConversationView.tsx    | 22 +++++-
 web/src/features/messages/EmojiPanel.tsx      | 74 +++++++++++++++++++
 2 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 web/src/features/messages/EmojiPanel.tsx

diff --git a/web/src/features/messages/ConversationView.tsx b/web/src/features/messages/ConversationView.tsx
index b637c4fd..481ddf1d 100644
--- a/web/src/features/messages/ConversationView.tsx
+++ b/web/src/features/messages/ConversationView.tsx
@@ -5,6 +5,7 @@ import type { StoredMessage } from 'tinode-sdk';
 import { Drafty } from 'tinode-sdk';
 
 import { Icon } from '@/app/Icon';
+import { EmojiPanel } from '@/features/messages/EmojiPanel';
 import { ForwardPickerModal } from '@/features/messages/ForwardPickerModal';
 import { MessageContextMenu } from '@/features/messages/MessageContextMenu';
 import { MessageRow } from '@/features/messages/MessageBubble';
@@ -46,6 +47,7 @@ export function ConversationView() {
   const [loadingOlder, setLoadingOlder] = useState(false);
   const [replyTo, setReplyTo] = useState<StoredMessage | null>(null);
   const [forwardMsg, setForwardMsg] = useState<StoredMessage | null>(null);
+  const [emojiOpen, setEmojiOpen] = useState(false);
   const streamRef = useRef<HTMLDivElement>(null);
   const autoScrollRef = useRef(true);
 
@@ -288,8 +290,24 @@ export function ConversationView() {
               </button>
             </div>
           ) : null}
-          <div className="flex items-center gap-1 px-1 pb-1">
-            <Icon name="sentiment_satisfied_alt" className="grid h-8.5 w-8.5 place-items-center rounded text-[22px] text-icon-default" />
+          <div className="relative flex items-center gap-1 px-1 pb-1">
+            <button
+              type="button"
+              onClick={() => setEmojiOpen((v) => !v)}
+              className={`grid h-8.5 w-8.5 place-items-center rounded text-[22px] ${emojiOpen ? 'bg-accent-soft-bg text-accent' : 'text-icon-default'}`}
+            >
+              <Icon name="sentiment_satisfied_alt" />
+            </button>
+            {emojiOpen ? (
+              <div className="absolute bottom-full left-0 z-20 mb-2">
+                <EmojiPanel
+                  onPick={(emoji) => {
+                    setDraft((d) => d + emoji);
+                    setEmojiOpen(false);
+                  }}
+                />
+              </div>
+            ) : null}
             <label className="grid h-8.5 w-8.5 cursor-pointer place-items-center rounded text-[22px] text-icon-default">
               <Icon name="image" />
               <input type="file" accept="image/*" onChange={handlePickImage} className="hidden" />
diff --git a/web/src/features/messages/EmojiPanel.tsx b/web/src/features/messages/EmojiPanel.tsx
new file mode 100644
index 00000000..0f04eab8
--- /dev/null
+++ b/web/src/features/messages/EmojiPanel.tsx
@@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+// README §3.3: "表情图位（使用系统 Emoji 或品牌表情包）" -- the design mockup itself has no
+// specific emoji asset list, just gray placeholder tiles captioned "use system emoji or a branded
+// pack." This is a plain Unicode emoji grid (no custom art), same call the old app made (per its own
+// comment: no WeChat/QQ-style sticker assets available, system emoji is the fallback).
+const EMOJI = [
+  '😀', '😁', '😂', '🤣', '😊', '😍', '😘', '😜', '🤔', '😐', '😴', '😭', '😡', '🥳', '😱', '🤯', '🥰', '😇', '🙃', '😉',
+  '👍', '👎', '👏', '🙏', '💪', '🤝', '✌️', '👌', '🤞', '👋', '❤️', '💔', '💯', '🔥', '✨', '🎉', '🎂', '☕', '🍺', '🌹',
+];
+
+interface EmojiPanelProps {
+  onPick: (emoji: string) => void;
+}
+
+export function EmojiPanel({ onPick }: EmojiPanelProps) {
+  const [tab, setTab] = useState<'recent' | 'all'>('all');
+  const recent = (() => {
+    try {
+      return JSON.parse(localStorage.getItem('im-recent-emoji') || '[]') as string[];
+    } catch {
+      return [];
+    }
+  })();
+
+  const pick = (emoji: string) => {
+    const next = [emoji, ...recent.filter((e) => e !== emoji)].slice(0, 30);
+    try {
+      localStorage.setItem('im-recent-emoji', JSON.stringify(next));
+    } catch {
+      /* storage unavailable -- recents just won't persist */
+    }
+    onPick(emoji);
+  };
+
+  const list = tab === 'recent' ? recent : EMOJI;
+
+  return (
+    <div className="w-[320px] rounded-xl border border-border-panel bg-white p-2 shadow-menu">
+      <div className="mb-1 flex gap-1 px-1">
+        <button
+          type="button"
+          onClick={() => setTab('recent')}
+          className={`rounded-lg px-2.5 py-1 text-xs ${tab === 'recent' ? 'bg-accent-soft-bg text-accent' : 'text-text-tertiary-2'}`}
+        >
+          最近
+        </button>
+        <button
+          type="button"
+          onClick={() => setTab('all')}
+          className={`rounded-lg px-2.5 py-1 text-xs ${tab === 'all' ? 'bg-accent-soft-bg text-accent' : 'text-text-tertiary-2'}`}
+        >
+          表情
+        </button>
+      </div>
+      {list.length === 0 ? (
+        <div className="py-6 text-center text-xs text-text-tertiary-4">暂无最近使用</div>
+      ) : (
+        <div className="grid grid-cols-8 gap-1">
+          {list.map((emoji, i) => (
+            <button
+              key={`${emoji}-${i}`}
+              type="button"
+              onClick={() => pick(emoji)}
+              className="grid h-9 w-9 place-items-center rounded-lg text-xl hover:bg-surface-rail"
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}