Normalize class names of AppTile and create _AppTile.pcss

cypress/e2e/widgets/stickers.spec.ts

@@ -79,7 +79,7 @@ function sendStickerFromPicker() {
     });
 
     // Sticker picker should close itself after sending.
-    cy.get(".mx_AppTileFullWidth#stickers").should("not.exist");
+    cy.get(".mx_AppTile--fullWidth#stickers").should("not.exist");
 }
 
 function expectTimelineSticker(roomId: string) {

res/css/_components.pcss

@@ -21,6 +21,7 @@
 @import "./components/views/dialogs/polls/_PollListItem.pcss";
 @import "./components/views/dialogs/polls/_PollListItemEnded.pcss";
 @import "./components/views/elements/_AppPermission.pcss";
+@import "./components/views/elements/_AppTile.pcss";
 @import "./components/views/elements/_AppWarning.pcss";
 @import "./components/views/elements/_FilterDropdown.pcss";
 @import "./components/views/elements/_FilterTabGroup.pcss";

res/css/components/views/elements/_AppTile.pcss

@@ -0,0 +1,195 @@
+/*
+Copyright 2023 Suguru Hirahara
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+:root {
+    --AppTile--mini-height: 220px;
+}
+
+.mx_AppTile {
+    display: flex;
+    flex-direction: column;
+
+    .mx_AppTile_menuBar {
+        margin: 0;
+        font-size: $font-12px;
+        background-color: $widget-menu-bar-bg-color;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding-top: 3px;
+        padding-bottom: 6px;
+
+        .mx_AppTile_menuBar_title {
+            line-height: 20px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            .mx_WidgetAvatar {
+                margin-right: 12px;
+            }
+
+            > :last-child {
+                margin-left: 9px;
+            }
+        }
+
+        .mx_AppTile_menuBar_widgets {
+            display: flex;
+            align-items: center;
+
+            .mx_AppTile_menuBar_widgets_button {
+                --size: 24px; /* Size of the button. Its height and width values should be same */
+
+                margin: 0 4px;
+                position: relative;
+                height: var(--size);
+                width: var(--size);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:hover::after {
+                    content: "";
+                    position: absolute;
+                    height: var(--size);
+                    width: var(--size);
+                    background-color: $panel-actions;
+                    border-radius: 50%;
+                    left: 0;
+                    top: 0;
+                }
+
+                .mx_Icon {
+                    color: $muted-fg-color;
+                }
+            }
+        }
+    }
+
+    .mx_AppTile_persistedWrapper {
+        flex: 1;
+
+        div {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    /* appTileBody is embedded to PersistedElement outside of mx_AppTile,
+       so rules to style appTileBody generally should not be included here. */
+    .mx_AppTileBody--large,
+    .mx_AppTileBody--mini {
+        height: inherit;
+        flex: 1;
+    }
+
+    &.mx_AppTile--large,
+    &.mx_AppTile--fullWidth {
+        border: var(--container-border-width) solid $widget-menu-bar-bg-color;
+        background-color: $widget-menu-bar-bg-color;
+    }
+
+    &.mx_AppTile--large {
+        box-sizing: border-box;
+    }
+
+    &.mx_AppTile--fullWidth {
+        width: 100% !important; /* to override the inline style set by the resizer */
+        border-radius: 8px;
+    }
+
+    &.mx_AppTile--mini {
+        width: 100%;
+        height: var(--AppTile--mini-height);
+    }
+}
+
+/* Rules added to this selector style appTileBody generally */
+.mx_AppTileBody {
+    /* Apply to every variant of appTileBody */
+    border-radius: 8px;
+
+    /* const loadingElement */
+    /* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
+    .mx_AppTileBody_fadeInSpinner {
+        /* place spinner and the message at the center of mx_AppTileBody */
+        height: 100%;
+        width: 100%;
+
+        font-weight: bold; /* message next to the spinner */
+        animation-fill-mode: backwards;
+        animation-duration: 200ms;
+        animation-delay: 500ms;
+        animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
+    }
+
+    &.mx_AppTileBody--large,
+    &.mx_AppTileBody--mini {
+        width: 100%;
+        overflow: hidden;
+        height: var(--AppTileBody-height);
+
+        iframe {
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &.mx_AppTileBody--large {
+        --AppTileBody-height: 100%;
+
+        background-color: $widget-body-bg-color;
+
+        iframe {
+            overflow: hidden;
+            padding: 0;
+            margin: 0;
+            display: block;
+        }
+    }
+
+    &.mx_AppTileBody--mini {
+        --AppTileBody-height: var(--AppTile--mini-height);
+    }
+
+    &.mx_AppTileBody--loading {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        height: 100%;
+
+        /* match bg of border so that the cut corners have the right fill */
+        background-color: $widget-body-bg-color !important;
+
+        iframe {
+            display: none;
+        }
+    }
+}
+
+@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

res/css/views/right_panel/_WidgetCard.pcss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_WidgetCard {
-    .mx_AppTileFullWidth {
+    .mx_AppTile.mx_AppTile--fullWidth {
         max-width: unset;
         width: auto !important;
         height: 100%;