feat(chat): add native emoji pickers for chat input and reactions

web/src/components/DMChat.tsx

@@ -5,7 +5,8 @@ import { useAuthStore } from "../stores/auth.ts";
 import { useTypingStore } from "../stores/typing.ts";
 import { useLayoutStore } from "../stores/layout.ts";
 import { GiphyPicker, type Gif } from "./GiphyPicker.tsx";
-import { EmojiPicker } from "./EmojiPicker.tsx";
+import { EmojiPicker as KaomojiPicker } from "./EmojiPicker.tsx";
+import Picker, { Theme } from 'emoji-picker-react';
 import { FormatToolbar } from "./FormatToolbar.tsx";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -76,6 +77,7 @@ export function DMChat() {
   const [error, setError] = useState<string | null>(null);
   const [showGifPicker, setShowGifPicker] = useState(false);
   const [showKaomoji, setShowKaomoji] = useState(false);
+  const [showNativeEmoji, setShowNativeEmoji] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -282,6 +284,19 @@ export function DMChat() {
         >
           [GIF]
         </button>
+        <button
+          type="button"
+          onClick={() => {
+            setShowNativeEmoji((prev) => !prev);
+            setShowKaomoji(false);
+            setShowGifPicker(false);
+          }}
+          disabled={!id}
+          className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+          title="Toggle native emoji picker"
+        >
+          [E]
+        </button>
         <button
           type="button"
           onClick={() => setShowKaomoji((prev) => !prev)}
@@ -292,11 +307,22 @@ export function DMChat() {
           [☺]
         </button>
         {showKaomoji && (
-          <EmojiPicker
+          <KaomojiPicker
             onSelect={(emoji) => setInput((prev) => prev + emoji)}
             onClose={() => setShowKaomoji(false)}
           />
         )}
+        {showNativeEmoji && (
+          <div className="absolute bottom-full right-0 mb-2 z-50">
+            <Picker
+              theme={Theme.DARK}
+              onEmojiClick={(emoji) => {
+                setInput((prev) => prev + emoji.emoji);
+                setShowNativeEmoji(false);
+              }}
+            />
+          </div>
+        )}
       </form>
     </div>
   );