fix(composer): Escape closes the emoji and sticker boards (#304)

The board opens with focus in its search field, and its FocusTrap used
the shared stopPropagation helper, which ignores Escape while an input
is focused, so Escape never closed it (Chromium, Firefox, WebKit).
Always close on Escape here, still stopping the key from closing the
room or modal underneath. The GIF picker already uses the default.

Fixes #304

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.23",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.23",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.23/element-call-embedded-0.25.0-lotus.23.tgz",
-      "integrity": "sha512-vRmcWeJcU0Accyl2x3mqNEzrIe8djE5BekyYbYOSCsMflC98rZgD1mO7KOe7bA1cX7gparRf6sAt1fotHoU+bA==",
+      "version": "0.25.0-lotus.22",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.22/element-call-embedded-0.25.0-lotus.22.tgz",
+      "integrity": "sha512-AimDKZA4xUKEEyl2XUFUSUDl03tBKFv88T/3igKyH2VqNSPMGnqcQJC5HXIkHLTWrOmg8kLcJ//FFbqlUZiLcA==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.23",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/AccountDataEditor.tsx

@@ -297,7 +297,7 @@ export function AccountDataEditor({
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton type="button" onClick={requestClose} variant="Surface" aria-label="Close">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/CallEmbedProvider.tsx

@@ -89,9 +89,6 @@ import { zIndices } from '../styles/zIndex';
 
 const PIP_MIN_W = 200;
 const PIP_MIN_H = 112;
-/** [Gitea #323] Minimised PiP bar size. */
-const PIP_MINI_W = 220;
-const PIP_MINI_H = 40;
 
 type Corner = 'se' | 'sw' | 'ne' | 'nw';
 
@@ -984,28 +981,6 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   );
 
   const [pipIsFullscreen, setPipIsFullscreen] = useState(false);
-  // [Gitea #323] Minimised PiP: a small draggable bar (room name + expand)
-  // instead of the video. Remembered; phones start minimised.
-  const [pipMinimized, setPipMinimized] = useState<boolean>(() => {
-    try {
-      const v = localStorage.getItem('pip-minimized');
-      if (v !== null) return v === '1';
-    } catch {
-      /* storage unavailable */
-    }
-    return window.innerWidth < 600;
-  });
-  const pipFullSizeRef = React.useRef({ width: 280, height: 158 });
-  const togglePipMinimized = useCallback(() => {
-    setPipMinimized((m) => {
-      try {
-        localStorage.setItem('pip-minimized', m ? '0' : '1');
-      } catch {
-        /* storage unavailable */
-      }
-      return !m;
-    });
-  }, []);
   useEffect(() => {
     const onFsChange = () => setPipIsFullscreen(!!document.fullscreenElement);
     document.addEventListener('fullscreenchange', onFsChange);
@@ -1103,26 +1078,6 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     }
   }, [pipMode, callVisible]);
 
-  // [Gitea #323] Apply the minimised / full PiP size (after the entry effect
-  // below has positioned and sized it). Keeps the bar on screen.
-  React.useEffect(() => {
-    const el = callEmbedRef.current;
-    if (!el || !pipMode) return;
-    if (pipMinimized) {
-      if (el.offsetHeight > PIP_MINI_H) {
-        pipFullSizeRef.current = { width: el.offsetWidth, height: el.offsetHeight };
-      }
-      el.style.width = `${PIP_MINI_W}px`;
-      el.style.height = `${PIP_MINI_H}px`;
-    } else {
-      el.style.width = `${pipFullSizeRef.current.width}px`;
-      el.style.height = `${pipFullSizeRef.current.height}px`;
-    }
-    const rect = el.getBoundingClientRect();
-    el.style.left = `${Math.max(0, Math.min(rect.left, window.innerWidth - el.offsetWidth))}px`;
-    el.style.top = `${Math.max(0, Math.min(rect.top, window.innerHeight - el.offsetHeight))}px`;
-  }, [pipMode, pipMinimized, callEmbedRef]);
-
   React.useEffect(() => {
     if (!pipMode) return;
     const onPipWindowResize = (): void => {
@@ -1441,50 +1396,19 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 position: 'absolute',
                 inset: 0,
                 zIndex: 1,
-                // Minimised: cover the frame so only the bar shows.
-                background: pipMinimized ? color.Surface.Container : 'transparent',
+                background: 'transparent',
                 cursor: 'grab',
                 // [Gitea #43] The call's "Share your screen?" prompt is drawn
                 // inside the frame: let the click reach its Share button.
                 pointerEvents: pipPromptOpen ? 'none' : undefined,
                 display: 'flex',
+                alignItems: 'flex-start',
                 justifyContent: 'flex-end',
-                alignItems: pipMinimized ? 'center' : 'flex-start',
                 padding: '6px',
               }}
             >
-              <div
-                style={{
-                  display: 'flex',
-                  gap: config.space.S100,
-                  alignItems: 'center',
-                  ...(pipMinimized ? { width: '100%' } : {}),
-                }}
-              >
-                {/* Leftmost: the top-right corner is a resize handle. */}
-                <IconButton
-                  type="button"
-                  size="300"
-                  radii="300"
-                  variant="Surface"
-                  fill="None"
-                  aria-label={pipMinimized ? 'Expand call' : 'Minimise call'}
-                  aria-pressed={pipMinimized}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    togglePipMinimized();
-                  }}
-                  onMouseDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
-                  style={{
-                    background: 'rgba(0,0,0,0.65)',
-                    backdropFilter: 'blur(4px)',
-                    color: '#fff',
-                  }}
-                >
-                  <Icon size="100" src={pipMinimized ? Icons.ChevronTop : Icons.Minus} />
-                </IconButton>
-                {!pipMinimized && document.fullscreenEnabled && (
+              <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
+                {document.fullscreenEnabled && (
                   <IconButton
                     type="button"
                     size="300"
@@ -1516,23 +1440,14 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                     fontSize: '11px',
                     fontWeight: 600,
                     pointerEvents: 'none',
-                    ...(pipMinimized
-                      ? {
-                          flexGrow: 1,
-                          minWidth: 0,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                        }
-                      : {}),
                   }}
                 >
-                  {pipMinimized ? `↗ ${callEmbed.room.name ?? 'Call'}` : '↗ Return to call'}
+                  ↗ Return to call
                 </div>
               </div>
             </div>
-            {!pipMinimized && <PipMuteOverlay callEmbed={callEmbed} />}
-            {(pipMinimized ? [] : (['se', 'sw', 'ne', 'nw'] as Corner[])).map((corner) => {
+            <PipMuteOverlay callEmbed={callEmbed} />
+            {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
               const s = corner.includes('s');
               const e2 = corner.includes('e');
               const dots = [

src/app/components/DeviceVerificationSetup.tsx

@@ -315,7 +315,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
               Setup Device Verification
             </Text>
           </Box>
-          <IconButton type="button" size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -361,7 +361,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
               Reset Device Verification
             </Text>
           </Box>
-          <IconButton type="button" size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

src/app/components/create-room/utils.ts

@@ -139,11 +139,8 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
       data.allowFederation,
       data.additionalCreators,
     ),
-    // [Gitea #328] Every non-space room gets call.member at user level, not just
-    // voice rooms: the call button is shown in private group rooms too, and with
-    // Synapse's state_default (50) only admins could start or join a call there
-    // ("You don't have permission to join!").
-    power_level_content_override: createVoiceRoomPowerLevelsOverride(),
+    power_level_content_override:
+      data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
     initial_state: initialState,
   };
 

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

@@ -19,7 +19,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { EmojiData, IEmoji, emojiGroups, emojis, loadEmojiData } from '../../plugins/emoji';
 import { useEmojiGroupLabels } from './useEmojiGroupLabels';
 import { useEmojiGroupIcons } from './useEmojiGroupIcons';
-import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
+import { preventScrollWithArrowKey } from '../../utils/keyboard';
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
@@ -612,7 +612,13 @@ export function EmojiBoard({
           !editableActiveElement() && isKeyHotkey(['arrowdown', 'arrowright'], evt),
         isKeyBackward: (evt: KeyboardEvent) =>
           !editableActiveElement() && isKeyHotkey(['arrowup', 'arrowleft'], evt),
-        escapeDeactivates: stopPropagation,
+        // [Gitea #304] The board opens with focus in its search field, where
+        // the shared stopPropagation helper ignores Escape. Always close here,
+        // without letting the key also close the room/modal underneath.
+        escapeDeactivates: (evt: KeyboardEvent) => {
+          evt.stopPropagation();
+          return true;
+        },
       }}
     >
       <EmojiBoardLayout

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -275,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton type="button" onClick={requestClose} variant="Surface" aria-label="Close">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room/PollCreator.tsx

@@ -143,7 +143,7 @@ export function PollCreator({ roomId, threadRootId, onClose }: PollCreatorProps)
                   Create Poll
                 </Text>
               </Box>
-              <IconButton type="button" size="300" radii="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ReportRoomModal.tsx

@@ -118,7 +118,7 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
                   Report Room
                 </Text>
               </Box>
-              <IconButton type="button" size="300" onClick={onClose} radii="300" aria-label="Close">
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ReportUserModal.tsx

@@ -124,7 +124,7 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
                   Report User
                 </Text>
               </Box>
-              <IconButton type="button" size="300" onClick={onClose} radii="300" aria-label="Close">
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ScheduleMessageModal.tsx

@@ -202,7 +202,7 @@ export function ScheduleMessageModal({
                   {title}
                 </Text>
               </Box>
-              <IconButton type="button" size="300" radii="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/message/Message.tsx

@@ -725,13 +725,7 @@ export const MessageDeleteItem = as<
                     Delete Message
                   </Text>
                 </Box>
-                <IconButton
-                  type="button"
-                  size="300"
-                  onClick={handleClose}
-                  radii="300"
-                  aria-label="Close"
-                >
+                <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
@@ -871,13 +865,7 @@ export const MessageReportItem = as<
                     Report Message
                   </Text>
                 </Box>
-                <IconButton
-                  type="button"
-                  size="300"
-                  onClick={handleClose}
-                  radii="300"
-                  aria-label="Close"
-                >
+                <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>

src/app/features/room/message/Reactions.tsx

@@ -69,15 +69,8 @@ export const Reactions = as<'div', ReactionsProps>(
     const measure = useCallback(() => {
       const container = containerRef.current;
       if (!container) return;
-      // [Gitea #305] The width the chips actually get (content box). The border
-      // box grows by 4 px while collapsed (margin -2 / padding 2), and measuring
-      // it made a row within 4 px of fitting flip collapsed↔expanded every frame.
-      const cs = getComputedStyle(container);
-      const rowWidth =
-        container.clientWidth -
-        (parseFloat(cs.paddingLeft) || 0) -
-        (parseFloat(cs.paddingRight) || 0);
-      const gap = parseFloat(cs.columnGap) || 8;
+      const rowWidth = container.getBoundingClientRect().width;
+      const gap = parseFloat(getComputedStyle(container).columnGap) || 8;
       const chips = keys ? keys.split('\u0000').map((k) => chipRefs.current.get(k)) : [];
       const widths = chips.map((el) => el?.getBoundingClientRect().width ?? 0);
       const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 48;
@@ -117,21 +110,8 @@ export const Reactions = as<'div', ReactionsProps>(
         style={{
           ...props.style,
           ...(collapsed && rowHeight
-            ? // 2px breathing room so row-1 focus outlines are not clipped. Longhand
-              // margins so the timeline's marginTop survives (Gitea #305: the
-              // `margin` shorthand overrode it and, once removed, cleared it).
-              {
-                maxHeight: rowHeight + 4,
-                overflow: 'hidden',
-                padding: 2,
-                marginLeft: -2,
-                marginRight: -2,
-                marginBottom: -2,
-                marginTop:
-                  props.style?.marginTop !== undefined
-                    ? `calc(${typeof props.style.marginTop === 'number' ? `${props.style.marginTop}px` : props.style.marginTop} - 2px)`
-                    : -2,
-              }
+            ? // 2px breathing room so row-1 focus outlines are not clipped.
+              { maxHeight: rowHeight + 4, overflow: 'hidden', padding: 2, margin: -2 }
             : {}),
         }}
         ref={(el) => {

src/app/plugins/call/CallEmbed.ts

@@ -31,7 +31,6 @@ import { verifyDenoiseAssets } from './denoiseSmokeCheck';
 import { canDelegateCapability } from './utils';
 import { getCallPageUrl } from './callPageUrl';
 import { restrictWidgetMessages } from '../widgetTransport';
-import { isRingableRoom } from '../../utils/callRing';
 
 // Maximum time to wait for the embedded Element Call iframe to progress from
 // initial load to a ready/joined state. If it hasn't by then, we assume the
@@ -252,18 +251,8 @@ export class CallEmbed {
       verifyDenoiseAssets(denoiseModel).catch(() => undefined);
     }
 
-    // [Gitea #295] Only ask Element Call to notify where a call can ring at all
-    // (DMs, invite-only groups outside a space). In a voice channel or space
-    // room the notification carries an @room mention, so every member got a
-    // highlighted ping (and phone push) whenever a moderator hopped in, and
-    // other clients showed it as a missed call.
-    // `none` needs element-call-embedded ≥ 0.25.0-lotus.23 (older builds ignore it).
     if (CallEmbed.startingCall(intent)) {
-      let notify = 'none';
-      if (isRingableRoom(room, CallEmbed.dmCall(intent))) {
-        notify = CallEmbed.dmCall(intent) ? 'ring' : 'notification';
-      }
-      params.append('sendNotificationType', notify);
+      params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
     }
 
     // [Gitea #43] On its own origin when config.json sets elementCallUrl.