feat(composer): dock the emoji and sticker picker inline at the top of the composer on native

src/app/components/emoji-board/EmojiBoard.tsx

@@ -371,6 +371,7 @@ type EmojiBoardProps = {
   onStickerSelect?: (mxc: string, shortcode: string, label: string) => void;
   allowTextCustomEmoji?: boolean;
   addToRecentEmoji?: boolean;
+  dock?: boolean;
 };
 
 export function EmojiBoard({
@@ -384,6 +385,7 @@ export function EmojiBoard({
   onStickerSelect,
   allowTextCustomEmoji,
   addToRecentEmoji = true,
+  dock,
 }: EmojiBoardProps) {
   const mx = useMatrixClient();
   const { t } = useTranslation();
@@ -513,6 +515,7 @@ export function EmojiBoard({
       }}
     >
       <EmojiBoardLayout
+        dock={dock}
         header={
           <Box direction="Column" gap="200">
             {onTabChange && <EmojiBoardTabs tab={tab} onTabChange={onTabChange} />}

src/app/components/emoji-board/components/Layout.tsx

@@ -9,11 +9,12 @@ export const EmojiBoardLayout = as<
     header: ReactNode;
     sidebar?: ReactNode;
     children: ReactNode;
+    dock?: boolean;
   }
->(({ className, header, sidebar, children, ...props }, ref) => (
+>(({ className, header, sidebar, children, dock, ...props }, ref) => (
   <Box
-    display="InlineFlex"
+    display={dock ? 'Flex' : 'InlineFlex'}
-    className={classNames(css.Base, className)}
+    className={classNames(css.Base, dock && css.BaseDock, className)}
     direction="Row"
     {...props}
     ref={ref}

src/app/components/emoji-board/components/styles.css.ts

@@ -19,6 +19,21 @@ export const Base = style({
   overflow: 'hidden',
 });
 
+// Docked variant — the board lives inline at the top of the composer on native
+// instead of floating as a pop-out. Full-width, capped height, no shadow/round
+// corners (the composer pill already clips it); only a hairline parts it from
+// the textarea row below.
+export const BaseDock = style({
+  maxWidth: 'unset',
+  width: '100%',
+  height: toRem(320),
+  maxHeight: '46vh',
+  border: 'none',
+  borderBottom: `${config.borderWidth.B300} solid rgba(255, 255, 255, 0.08)`,
+  borderRadius: 0,
+  boxShadow: 'none',
+});
+
 export const Header = style({
   padding: config.space.S300,
   paddingBottom: 0,

src/app/features/room/RoomInput.tsx

@@ -57,7 +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,
   encryptFile,
@@ -216,6 +216,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const isOneOnOne = useIsOneOnOne();
     const commands = useCommands(mx, room);
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
+    const screenSize = useScreenSizeContext();
+    // On native / narrow screens the emoji-sticker board is docked inline at the
+    // top of the composer instead of floating as a pop-out.
+    const dockEmojiBoard = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+    const [emojiBoardTab, setEmojiBoardTab] = useState<EmojiBoardTab | undefined>(undefined);
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevelsContext();
     const creators = useRoomCreators(room);
@@ -601,9 +606,48 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       </IconButton>
     );
 
-    const emojiButton = (
+    const closeEmojiBoard = () => {
-      <UseStateProvider initial={undefined}>
+      setEmojiBoardTab(undefined);
-        {(emojiBoardTab: EmojiBoardTab | undefined, setEmojiBoardTab) => (
+      if (!mobileOrTablet()) ReactEditor.focus(editor);
+    };
+
+    const emojiBoard = (
+      <EmojiBoard
+        tab={emojiBoardTab ?? EmojiBoardTab.Emoji}
+        onTabChange={setEmojiBoardTab}
+        imagePackRooms={imagePackRooms}
+        returnFocusOnDeactivate={false}
+        dock={dockEmojiBoard}
+        onEmojiSelect={handleEmoticonSelect}
+        onCustomEmojiSelect={handleEmoticonSelect}
+        onStickerSelect={handleStickerSelect}
+        requestClose={closeEmojiBoard}
+      />
+    );
+
+    const emojiTriggerButton = (
+      <IconButton
+        ref={emojiBtnRef}
+        aria-pressed={!!emojiBoardTab}
+        onClick={() =>
+          dockEmojiBoard
+            ? setEmojiBoardTab(emojiBoardTab ? undefined : EmojiBoardTab.Emoji)
+            : setEmojiBoardTab(EmojiBoardTab.Emoji)
+        }
+        variant="SurfaceVariant"
+        fill="None"
+        size="300"
+        radii="300"
+      >
+        <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
+    ) : (
       <PopOut
         offset={16}
         alignOffset={-44}
@@ -614,41 +658,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             ? undefined
             : emojiBtnRef.current?.getBoundingClientRect() ?? undefined
         }
-            content={
+        content={emojiBoard}
-              <EmojiBoard
-                tab={emojiBoardTab ?? EmojiBoardTab.Emoji}
-                onTabChange={setEmojiBoardTab}
-                imagePackRooms={imagePackRooms}
-                returnFocusOnDeactivate={false}
-                onEmojiSelect={handleEmoticonSelect}
-                onCustomEmojiSelect={handleEmoticonSelect}
-                onStickerSelect={handleStickerSelect}
-                requestClose={() => {
-                  setEmojiBoardTab((tab) => {
-                    if (tab) {
-                      if (!mobileOrTablet()) ReactEditor.focus(editor);
-                      return undefined;
-                    }
-                    return tab;
-                  });
-                }}
-              />
-            }
       >
-            <IconButton
+        {emojiTriggerButton}
-              ref={emojiBtnRef}
-              aria-pressed={!!emojiBoardTab}
-              onClick={() => setEmojiBoardTab(EmojiBoardTab.Emoji)}
-              variant="SurfaceVariant"
-              fill="None"
-              size="300"
-              radii="300"
-            >
-              <Icon src={StreamComposerIcons.Smile} />
-            </IconButton>
       </PopOut>
-        )}
-      </UseStateProvider>
     );
 
     const sendButton = (
@@ -785,7 +798,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           onKeyUp={handleKeyUp}
           onPaste={handlePaste}
           top={
-            replyDraft && (
+            <>
+              {dockEmojiBoard && emojiBoardTab !== undefined && emojiBoard}
+              {replyDraft && (
                 <div>
                   <Box
                     alignItems="Center"
@@ -821,7 +836,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     </Box>
                   </Box>
                 </div>
-            )
+              )}
+            </>
           }
           bottom={
             <Box