Sticker widget improvements. UI/UX/widget capabilities

apps/web/res/css/views/rooms/_Stickers.pcss

@@ -4,25 +4,46 @@
 
 .mx_Stickers_content_container {
     overflow: hidden;
-    height: 300px;
+    height: 450px;
 }
 
 #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 {
-        /* Sticker picker depends on the fixed height previously used for all tiles */
-        height: 283px; /* height of the popout minus the AppTile menu bar */
+    .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%;
     }
 }
 
@@ -44,3 +65,68 @@
     cursor: pointer;
     color: $accent;
 }
+
+.mx_Stickers_sidebar {
+    display: flex;
+    flex: 1 1 0;
+    width: 100%;
+    min-height: 0;
+    overflow: hidden;
+
+    > 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 1 0;
+    width: 100%;
+    min-height: 0;
+}
+
+.mx_Stickers_loading {
+    display: flex;
+    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;
+}

apps/web/src/components/structures/RightPanel.tsx

@@ -34,6 +34,7 @@ import { Action } from "../../dispatcher/actions";
 import { type XOR } from "../../@types/common";
 import ExtensionsCard from "../views/right_panel/ExtensionsCard";
 import MemberListView from "../views/rooms/MemberList/MemberListView";
+import StickerpickerCard from "../views/right_panel/StickerpickerCard";
 
 interface BaseProps {
     overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView)
@@ -277,6 +278,11 @@ export default class RightPanel extends React.Component<Props, IState> {
                     card = <WidgetCard room={this.props.room} widgetId={cardState.widgetId} onClose={this.onClose} />;
                 }
                 break;
+            case RightPanelPhases.StickerPicker:
+                if (!!this.props.room) {
+                    card = <StickerpickerCard onClose={this.onClose} />;
+                }
+                break;
         }
 
         return (

apps/web/src/components/views/context_menus/WidgetContextMenu.tsx

@@ -37,6 +37,8 @@ interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "child
     showUnpin?: boolean;
     // override delete handler
     onDeleteClick?(this: void): void;
+    // override attach to sidebar handler
+    onAttachToSidebarClick?(this: void): void;
     // override edit handler
     onEditClick?(this: void): void;
 }
@@ -89,6 +91,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
     app,
     userWidget,
     onDeleteClick,
+    onAttachToSidebarClick,
     onEditClick,
     showUnpin,
     ...props
@@ -190,6 +193,18 @@ export const WidgetContextMenu: React.FC<IProps> = ({
         );
     }
 
+    let attachToSidebarButton: JSX.Element | undefined;
+    if (onAttachToSidebarClick) {
+        const onClick = (): void => {
+            onAttachToSidebarClick();
+            onFinished();
+        };
+
+        attachToSidebarButton = (
+            <IconizedContextMenuOption onClick={onClick} label={_t("widget|context_menu|attach_to_sidebar")} />
+        );
+    }
+
     let revokeButton: JSX.Element | undefined;
     if (showRevokeButton(cli, roomId, app, userWidget)) {
         const opts: ApprovalOpts = { approved: undefined };
@@ -245,6 +260,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
                 {streamAudioStreamButton}
                 {editButton}
                 {revokeButton}
+                {attachToSidebarButton}
                 {deleteButton}
                 {snapshotButton}
                 {moveLeftButton}

apps/web/src/components/views/elements/AppTile.tsx

@@ -40,7 +40,7 @@ import Spinner from "./Spinner";
 import dis from "../../../dispatcher/dispatcher";
 import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import { ContextMenuButton } from "../../structures/ContextMenu";
+import { ContextMenuButton, toLeftOrRightOf } from "../../structures/ContextMenu";
 import PersistedElement, { getPersistKey } from "./PersistedElement";
 import { WidgetType } from "../../../widgets/WidgetType";
 import { ElementWidget, WidgetMessaging, WidgetMessagingEvent } from "../../../stores/widgets/WidgetMessaging";
@@ -63,7 +63,7 @@ import { toWidgetDescriptor } from "../../../modules/WidgetLifecycleApi";
 import { parseUrl } from "../../../utils/UrlUtils";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore.ts";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases.ts";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel.tsx";
+import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
 
 // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
 // because that would allow the iframe to programmatically remove the sandbox attribute, but
@@ -100,12 +100,16 @@ interface IProps {
     onEditClick?: () => void;
     // Optional onDeleteClickHandler (overrides default behaviour)
     onDeleteClick?: () => void;
+    // Optional onAttachToSidebarClickHandler
+    onAttachToSidebarClick?: () => void;
     // Optionally hide the tile title
     showTitle?: boolean;
     // Optionally handle minimise button pointer events (default false)
     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
@@ -146,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,
@@ -584,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");
                 }
@@ -870,26 +877,27 @@ export default class AppTile extends React.Component<IProps, IState> {
                                     </AccessibleButton>
                                 )}
                                 <I18nContext.Provider value={window.mxModuleApi.i18n}>
-                                    <WidgetContextMenu
-                                        trigger={
-                                            <ContextMenuButton
-                                                className="mx_AppTileMenuBar_widgets_button"
-                                                label={_t("common|options")}
-                                                isExpanded={this.state.menuDisplayed}
-                                                ref={this.contextMenuButton}
-                                                onClick={this.onContextMenuClick}
-                                            >
-                                                <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
-                                            </ContextMenuButton>
-                                        }
-                                        app={this.props.app}
-                                        onFinished={this.closeContextMenu}
-                                        showUnpin={!this.props.userWidget}
-                                        userWidget={this.props.userWidget}
-                                        onEditClick={this.props.onEditClick}
-                                        onDeleteClick={this.props.onDeleteClick}
-                                        menuDisplayed={this.state.menuDisplayed}
-                                    />
+                                    <ContextMenuButton
+                                        className="mx_AppTileMenuBar_widgets_button"
+                                        label={_t("common|options")}
+                                        isExpanded={this.state.menuDisplayed}
+                                        ref={this.contextMenuButton}
+                                        onClick={this.onContextMenuClick}
+                                    >
+                                        <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
+                                    </ContextMenuButton>
+                                    {this.state.menuDisplayed && this.contextMenuButton.current && (
+                                        <WidgetContextMenu
+                                            app={this.props.app}
+                                            onFinished={this.closeContextMenu}
+                                            showUnpin={!this.props.userWidget}
+                                            userWidget={this.props.userWidget}
+                                            onEditClick={this.props.onEditClick}
+                                            onDeleteClick={this.props.onDeleteClick}
+                                            onAttachToSidebarClick={this.props.onAttachToSidebarClick}
+                                            {...toLeftOrRightOf(this.contextMenuButton.current.getBoundingClientRect())}
+                                        />
+                                    )}
                                 </I18nContext.Provider>
                             </span>
                         </div>

apps/web/src/components/views/right_panel/ExtensionsCard.tsx

@@ -20,7 +20,7 @@ import {
 import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
 import { _t } from "../../../languageHandler";
-import { useContextMenu } from "../../structures/ContextMenu";
+import { toLeftOrRightOf, useContextMenu } from "../../structures/ContextMenu";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { type IApp } from "../../../stores/WidgetStore";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@@ -31,7 +31,7 @@ import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import EmptyState from "./EmptyState";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents.ts";
 import { UIComponent } from "../../../settings/UIFeature.ts";
-import { WidgetContextMenu } from "../../../viewmodels/right-panel/WidgetContextMenuViewModel.tsx";
+import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
 
 interface Props {
     room: Room;
@@ -107,21 +107,23 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
             </AccessibleButton>
 
             {canModifyWidget && (
-                <WidgetContextMenu
-                    app={app}
-                    onFinished={closeMenu}
-                    menuDisplayed={menuDisplayed}
-                    trigger={
-                        <AccessibleButton
-                            ref={handle}
-                            className="mx_ExtensionsCard_app_options"
-                            onClick={openMenu}
-                            title={_t("common|options")}
-                        >
-                            <OverflowHorizontalIcon />
-                        </AccessibleButton>
-                    }
-                />
+                <>
+                    <AccessibleButton
+                        ref={handle}
+                        className="mx_ExtensionsCard_app_options"
+                        onClick={openMenu}
+                        title={_t("common|options")}
+                    >
+                        <OverflowHorizontalIcon />
+                    </AccessibleButton>
+                    {menuDisplayed && handle.current && (
+                        <WidgetContextMenu
+                            app={app}
+                            onFinished={closeMenu}
+                            {...toLeftOrRightOf(handle.current.getBoundingClientRect())}
+                        />
+                    )}
+                </>
             )}
 
             <AccessibleButton