feat(chat): emote popover

src/components/Chat/Chat.tsx

@@ -48,7 +48,7 @@
   BadgePressData,
   MessageActionData,
 } from './components/ChatMessage/ChatMessage';
-import { EmotePreviewSheet } from './components/EmotePreviewSheet';
+import { EmoteDetailSheet } from './components/EmoteDetailSheet';
 import {
   EmoteSheet,
   EmotePickerItem,
@@ -101,7 +101,6 @@
   const debugModalRef = useRef<BottomSheetModal>(null);
   const chatInputRef = useRef<TextInput>(null);
 
-  const emotePreviewSheetRef = useRef<BottomSheetModal>(null);
   const badgePreviewSheetRef = useRef<BottomSheetModal>(null);
   const actionSheetRef = useRef<BottomSheetModal>(null);
 
@@ -114,6 +113,7 @@
   const [selectedEmote, setSelectedEmote] = useState<EmotePressData | null>(
     null,
   );
+  const [isEmotePopoverVisible, setIsEmotePopoverVisible] = useState(false);
   const [selectedBadge, setSelectedBadge] = useState<BadgePressData | null>(
     null,
   );
@@ -660,9 +660,20 @@
   }, []);
 
   // Shared sheet handlers - lifted from per-message to single instances
-  const handleEmoteLongPress = useCallback((emote: EmotePressData) => {
-    setSelectedEmote(emote);
-    emotePreviewSheetRef.current?.present();
+  const handleEmotePress = useCallback(
+    (
+      emote: EmotePressData,
+      _position?: { x: number; y: number; width: number; height: number },
+    ) => {
+      setSelectedEmote(emote);
+      setIsEmotePopoverVisible(true);
+    },
+    [],
+  );
+
+  const handleEmotePopoverClose = useCallback(() => {
+    setIsEmotePopoverVisible(false);
+    setSelectedEmote(null);
   }, []);
 
   const handleBadgeLongPress = useCallback((badge: BadgePressData) => {
@@ -787,7 +798,7 @@
         onReply={handleReply}
         replyDisplayName={msg.replyDisplayName}
         replyBody={msg.replyBody}
-        onEmotePress={handleEmoteLongPress}
+        onEmotePress={handleEmotePress}
         onBadgePress={handleBadgeLongPress}
         onMessageLongPress={handleMessageLongPress}
         getMentionColor={getMentionColor}
@@ -799,7 +810,7 @@
     ),
     [
       handleReply,
-      handleEmoteLongPress,
+      handleEmotePress,
       handleBadgeLongPress,
       handleMessageLongPress,
       getMentionColor,
@@ -910,12 +921,11 @@
         />
 
         {/* Shared bottom sheets - single instances instead of per-message */}
-        {selectedEmote && (
-          <EmotePreviewSheet
-            ref={emotePreviewSheetRef}
-            selectedEmote={selectedEmote}
-          />
-        )}
+        <EmoteDetailSheet
+          selectedEmote={selectedEmote}
+          isVisible={isEmotePopoverVisible}
+          onClose={handleEmotePopoverClose}
+        />
 
         {selectedBadge && (
           <BadgePreviewSheet

src/components/Chat/components/ChatMessage/ChatMessage.tsx

@@ -65,7 +65,10 @@ function ChatMessageComponent<
   getMentionColor,
 }: ChatMessageType<TNoticeType, TVariant> & {
   onReply: (args: OnReply<TNoticeType>) => void;
-  onEmotePress?: (data: EmotePressData) => void;
+  onEmotePress?: (
+    data: EmotePressData,
+    position: { x: number; y: number; width: number; height: number },
+  ) => void;
   onBadgePress?: (data: BadgePressData) => void;
   onMessageLongPress?: (data: MessageActionData<TNoticeType>) => void;
   getMentionColor?: (username: string) => string;
@@ -90,9 +93,12 @@ function ChatMessageComponent<
   }
 
   const handleEmotePress = useCallback(
-    (part: ParsedPart) => {
+    (
+      part: ParsedPart,
+      position: { x: number; y: number; width: number; height: number },
+    ) => {
       if (part.type === 'emote') {
-        onEmotePress?.(part);
+        onEmotePress?.(part, position);
       }
     },
     [onEmotePress],
@@ -129,7 +135,15 @@ function ChatMessageComponent<
             <EmoteRenderer
               key={index}
               part={part}
-              handleEmotePress={handleEmotePress}
+              handleEmotePress={emotePart => {
+                // Measure the emote to get position, but we don't need it for bottom sheet
+                handleEmotePress(emotePart, {
+                  x: 0,
+                  y: 0,
+                  width: 0,
+                  height: 0,
+                });
+              }}
             />
           );
         }
@@ -394,7 +408,10 @@ export const ChatMessage = MemoizedChatMessage as <
 >(
   props: ChatMessageType<TNoticeType, TVariant> & {
     onReply: (args: OnReply<TNoticeType>) => void;
-    onEmotePress?: (data: EmotePressData) => void;
+    onEmotePress?: (
+      data: EmotePressData,
+      position: { x: number; y: number; width: number; height: number },
+    ) => void;
     onBadgePress?: (data: BadgePressData) => void;
     onMessageLongPress?: (data: MessageActionData<TNoticeType>) => void;
     getMentionColor?: (username: string) => string;