Add a lightweight alternative to PersistedElement for stickers

little-pretty-cat · little-pretty-cat · commit daa99e8eabc4 · 2026-04-01T17:03:54.000+02:00
Fix Widget API behavior in sidebar mode.
diff --git a/apps/web/res/css/views/rooms/_Stickers.pcss b/apps/web/res/css/views/rooms/_Stickers.pcss
@@ -8,22 +8,43 @@
 }
 
 #mx_persistedElement_stickerPicker {
-    .mx_AppTileFullWidth {
+    .mx_Stickers_hostInner_popover .mx_AppTileFullWidth {
         height: unset;
         box-sizing: border-box;
         border-left: none;
         border-right: none;
         border-bottom: none;
     }
 
-    .mx_AppTileMenuBar {
+    .mx_Stickers_hostInner_popover .mx_AppTileMenuBar {
         padding: 0;
     }
 
-    iframe {
+    .mx_Stickers_hostInner_popover iframe {
         /* Sticker picker depends on a fixed popover height */
         height: 433px; /* 450px popover minus the AppTile menu bar */
     }
+
+    .mx_Stickers_hostInner_sidebar,
+    .mx_Stickers_hostInner_sidebar .mx_AppTileFullWidth,
+    .mx_Stickers_hostInner_sidebar .mx_AppTileBody--large,
+    .mx_Stickers_hostInner_sidebar .mx_AppTile_persistedWrapper {
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+    }
+
+    .mx_Stickers_hostInner_sidebar .mx_AppTileFullWidth,
+    .mx_Stickers_hostInner_sidebar .mx_AppTileBody--large,
+    .mx_Stickers_hostInner_sidebar .mx_AppTile_persistedWrapper {
+        display: flex;
+        flex: 1 1 0;
+        flex-direction: column;
+    }
+
+    .mx_Stickers_hostInner_sidebar iframe {
+        height: 100%;
+    }
 }
 
 .mx_Stickers_contentPlaceholder {
@@ -47,28 +68,65 @@
 
 .mx_Stickers_sidebar {
     display: flex;
-    flex: 1;
+    flex: 1 1 0;
     width: 100%;
     min-height: 0;
     overflow: hidden;
 
-    .mx_AppTileFullWidth {
-        width: 100% !important;
-        max-width: unset;
+    > div {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        min-height: 0;
     }
+
+    > div > div {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.mx_Stickers_host {
+    display: flex;
+    width: 100%;
+    min-height: 0;
+}
+
+.mx_Stickers_host_popover {
+    height: 100%;
+}
+
+.mx_Stickers_host_sidebar {
+    flex: 1 1 0;
+    height: 100%;
+}
+
+.mx_Stickers_hostInner {
+    display: flex;
+    min-height: 0;
+}
+
+.mx_Stickers_hostInner_sidebar {
+    flex: 1 1 0;
 }
 
 .mx_Stickers_sidebarPlaceholder {
     display: flex;
-    flex: 1;
+    flex: 1 1 0;
     width: 100%;
     min-height: 0;
 }
 
 .mx_Stickers_loading {
     display: flex;
-    flex: 1;
+    flex: 1 1 0;
     min-height: 0;
     align-items: center;
     justify-content: center;
 }
+
+.mx_WidgetCard > .mx_Stickers_sidebar,
+.mx_WidgetCard > .mx_Stickers_sidebarPlaceholder {
+    flex: 1 1 0;
+    min-height: 0;
+}
diff --git a/apps/web/src/components/views/elements/AppTile.tsx b/apps/web/src/components/views/elements/AppTile.tsx
@@ -108,6 +108,8 @@ interface IProps {
     handleMinimisePointerEvents?: boolean;
     // Optionally hide the popout widget icon
     showPopout?: boolean;
+    // Whether sending a sticker should close the sticker picker widget
+    closeOnStickerSend?: boolean;
     // Is this an instance of a user widget
     userWidget: boolean;
     // sets the pointer-events property on the iframe
@@ -148,6 +150,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         showMenubar: true,
         showTitle: true,
         showPopout: true,
+        closeOnStickerSend: true,
         handleMinimisePointerEvents: false,
         userWidget: false,
         miniMode: false,
@@ -586,7 +589,9 @@ export default class AppTile extends React.Component<IProps, IState> {
                             threadId: this.props.threadId,
                         },
                     });
-                    dis.dispatch({ action: "stickerpicker_close" });
+                    if (this.props.closeOnStickerSend) {
+                        dis.dispatch({ action: "stickerpicker_close" });
+                    }
                 } else {
                     logger.warn("Ignoring sticker message. Invalid capability");
                 }
diff --git a/apps/web/src/components/views/rooms/Stickerpicker.tsx b/apps/web/src/components/views/rooms/Stickerpicker.tsx
@@ -8,12 +8,10 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type Room, ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type IWidget } from "matrix-widget-api";
 
 import { _t, _td } from "../../../languageHandler";
-import AppTile from "../elements/AppTile";
+import type { TranslationKey } from "../../../languageHandler";
 import Spinner from "../elements/Spinner";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import WidgetUtils, { type UserWidget } from "../../../utils/WidgetUtils";
@@ -28,13 +26,7 @@ import GenericElementContextMenu from "../context_menus/GenericElementContextMen
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { setStickerpickerAttachedToSidebar } from "./StickerpickerSidebarStore";
-
-// This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
-// We sit in a context menu, so this should be given to the context menu.
-const STICKERPICKER_Z_INDEX = 3500;
-
-// Key to store the widget's AppTile under in PersistedElement
-const PERSISTED_ELEMENT_KEY = "stickerPicker";
+import StickerpickerHost, { PERSISTED_ELEMENT_KEY, STICKERPICKER_Z_INDEX } from "./StickerpickerHost";
 
 interface IProps {
     room: Room;
@@ -61,7 +53,6 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     public static currentWidget?: UserWidget;
 
     private dispatcherRef?: string;
-
     private prevSentVisibility?: boolean;
 
     private popoverWidth = 340;
@@ -135,7 +126,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         this.dispatcherRef = dis.register(this.onAction);
 
         // Track updates to widget state in account data
-        MatrixClientPeg.safeGet().on(ClientEvent.AccountData, this.updateWidget);
+        this.props.room.client.on(ClientEvent.AccountData, this.updateWidget);
 
         if (this.props.displayMode === "popover") {
             RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
@@ -145,8 +136,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     }
 
     public componentWillUnmount(): void {
-        const client = MatrixClientPeg.get();
-        if (client) client.removeListener(ClientEvent.AccountData, this.updateWidget);
+        this.props.room.client.removeListener(ClientEvent.AccountData, this.updateWidget);
         if (this.props.displayMode === "popover") {
             RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
         }
@@ -260,92 +250,44 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         }
     }
 
-    private getStickerpickerApp(): IWidget | null {
-        const stickerpickerWidget = this.state.stickerpickerWidget;
-        if (!stickerpickerWidget?.content?.url) return null;
-
-        stickerpickerWidget.content.name = stickerpickerWidget.content.name || _t("common|stickerpack");
-
-        return {
-            id: stickerpickerWidget.id,
-            url: stickerpickerWidget.content.url,
-            name: stickerpickerWidget.content.name,
-            type: stickerpickerWidget.content.type,
-            data: stickerpickerWidget.content.data,
-            creatorUserId: stickerpickerWidget.content.creatorUserId || stickerpickerWidget.sender,
-        };
-    }
-
-    private renderStickerpickerApp(stickerApp: IWidget, sidebarMode = false): JSX.Element {
-        const stickerpickerWidget = this.state.stickerpickerWidget!;
-
-        return (
-            <AppTile
-                app={stickerApp}
-                room={this.props.room}
-                threadId={this.props.threadId}
-                fullWidth={true}
-                userId={MatrixClientPeg.safeGet().credentials.userId!}
-                creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.safeGet().credentials.userId!}
-                waitForIframeLoad={true}
-                showMenubar={!sidebarMode}
-                onEditClick={this.launchManageIntegrations}
-                onDeleteClick={this.removeStickerpickerWidgets}
-                onAttachToSidebarClick={this.props.displayMode === "popover" ? this.attachToSidebar : undefined}
-                showTitle={false}
-                showPopout={false}
-                handleMinimisePointerEvents={true}
-                userWidget={true}
-                showLayoutButtons={false}
-            />
-        );
-    }
-
-    public getStickerpickerContent(): JSX.Element {
+    private renderStickerpickerWidget(displayMode: "popover" | "sidebar"): JSX.Element {
         if (this.state.imError) {
             return this.errorStickerpickerContent();
         }
 
-        const stickerApp = this.getStickerpickerApp();
-
-        if (stickerApp) {
+        if (this.state.stickerpickerWidget?.content?.url) {
             return (
-                <div className="mx_Stickers_content_container">
-                    <div
-                        id="stickersContent"
-                        className="mx_Stickers_content"
-                        style={{
-                            border: "none",
-                            height: this.popoverHeight,
-                            width: this.popoverWidth,
-                        }}
-                    >
-                        <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
-                            {this.renderStickerpickerApp(stickerApp)}
-                        </PersistedElement>
-                    </div>
-                </div>
+                <StickerpickerHost
+                    room={this.props.room}
+                    threadId={this.props.threadId}
+                    stickerpickerWidget={this.state.stickerpickerWidget}
+                    displayMode={displayMode}
+                    popoverWidth={this.popoverWidth}
+                    popoverHeight={this.popoverHeight}
+                    onEditClick={this.launchManageIntegrations}
+                    onDeleteClick={this.removeStickerpickerWidgets}
+                    onAttachToSidebarClick={this.attachToSidebar}
+                />
             );
         }
 
         return this.defaultStickerpickerContent();
     }
 
-    public getSidebarStickerpickerContent(): JSX.Element {
-        if (this.state.imError) {
-            return this.errorStickerpickerContent();
-        }
+    public getStickerpickerContent(): JSX.Element {
+        return this.renderStickerpickerWidget("popover");
+    }
 
+    public getSidebarStickerpickerContent(): JSX.Element {
         if (!this.state.widgetStateLoaded) {
             return <div className="mx_Stickers_sidebar">{this.loadingStickerpickerContent()}</div>;
         }
 
-        const stickerApp = this.getStickerpickerApp();
-        if (stickerApp) {
-            return <div className="mx_Stickers_sidebar">{this.renderStickerpickerApp(stickerApp, true)}</div>;
+        if (this.state.imError) {
+            return this.errorStickerpickerContent();
         }
 
-        return <div className="mx_Stickers_sidebarPlaceholder">{this.defaultStickerpickerContent()}</div>;
+        return <div className="mx_Stickers_sidebar">{this.renderStickerpickerWidget("sidebar")}</div>;
     }
 
     /**
diff --git a/apps/web/src/components/views/rooms/StickerpickerHost.tsx b/apps/web/src/components/views/rooms/StickerpickerHost.tsx
