fix(composer): isolate the web emoji pop-out state so opening it no longer re-renders the whole composer

src/app/features/room/RoomInput.tsx

@@ -57,6 +57,7 @@ import {
   getMentions,
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
+import { UseStateProvider } from '../../components/UseStateProvider';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import {
   TUploadContent,
@@ -606,34 +607,29 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       </IconButton>
     );
 
-    const closeEmojiBoard = () => {
+    // The native dock renders the board in the composer's top slot, so its
-      setEmojiBoardTab(undefined);
+    // open/close state lives here (only read on native). Desktop keeps its
-      if (!mobileOrTablet()) ReactEditor.focus(editor);
+    // state isolated inside the UseStateProvider below so opening the pop-out
-    };
+    // doesn't re-render the whole composer.
-
+    const dockedEmojiBoard = dockEmojiBoard && emojiBoardTab !== undefined && (
-    const emojiBoard = (
       <EmojiBoard
-        tab={emojiBoardTab ?? EmojiBoardTab.Emoji}
+        tab={emojiBoardTab}
         onTabChange={setEmojiBoardTab}
         imagePackRooms={imagePackRooms}
         returnFocusOnDeactivate={false}
-        dock={dockEmojiBoard}
+        dock
         onEmojiSelect={handleEmoticonSelect}
         onCustomEmojiSelect={handleEmoticonSelect}
         onStickerSelect={handleStickerSelect}
-        requestClose={closeEmojiBoard}
+        requestClose={() => setEmojiBoardTab(undefined)}
       />
     );
 
-    const emojiTriggerButton = (
+    const emojiButton = dockEmojiBoard ? (
       <IconButton
         ref={emojiBtnRef}
         aria-pressed={!!emojiBoardTab}
-        onClick={() =>
+        onClick={() => setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)}
-          dockEmojiBoard
-            ? setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)
-            : setEmojiBoardTab(EmojiBoardTab.Emoji)
-        }
         variant="SurfaceVariant"
         fill="None"
         size="300"
@@ -641,27 +637,54 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       >
         <Icon src={StreamComposerIcons.Smile} />
       </IconButton>
-    );
-
-    // Native docks the board inline (rendered in the composer's top slot); the
-    // desktop trigger keeps the floating pop-out anchored to the button.
-    const emojiButton = dockEmojiBoard ? (
-      emojiTriggerButton
     ) : (
+      <UseStateProvider initial={undefined}>
+        {(emojiTab: EmojiBoardTab | undefined, setEmojiTab) => (
           <PopOut
             offset={16}
             alignOffset={-44}
             position="Top"
             align="End"
             anchor={
-          emojiBoardTab === undefined
+              emojiTab === undefined
                 ? undefined
                 : emojiBtnRef.current?.getBoundingClientRect() ?? undefined
             }
-        content={emojiBoard}
+            content={
+              <EmojiBoard
+                tab={emojiTab ?? EmojiBoardTab.Emoji}
+                onTabChange={setEmojiTab}
+                imagePackRooms={imagePackRooms}
+                returnFocusOnDeactivate={false}
+                onEmojiSelect={handleEmoticonSelect}
+                onCustomEmojiSelect={handleEmoticonSelect}
+                onStickerSelect={handleStickerSelect}
+                requestClose={() => {
+                  setEmojiTab((tab) => {
+                    if (tab) {
+                      if (!mobileOrTablet()) ReactEditor.focus(editor);
+                      return undefined;
+                    }
+                    return tab;
+                  });
+                }}
+              />
+            }
           >
-        {emojiTriggerButton}
+            <IconButton
+              ref={emojiBtnRef}
+              aria-pressed={!!emojiTab}
+              onClick={() => setEmojiTab(EmojiBoardTab.Emoji)}
+              variant="SurfaceVariant"
+              fill="None"
+              size="300"
+              radii="300"
+            >
+              <Icon src={StreamComposerIcons.Smile} />
+            </IconButton>
           </PopOut>
+        )}
+      </UseStateProvider>
     );
 
     const sendButton = (
@@ -799,7 +822,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           onPaste={handlePaste}
           top={
             <>
-              {dockEmojiBoard && emojiBoardTab !== undefined && emojiBoard}
+              {dockedEmojiBoard}
               {replyDraft && (
                 <div>
                   <Box