Extract Extensions into their own right panel tab

playwright/e2e/integration-manager/utils.ts

@@ -19,8 +19,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
 export async function openIntegrationManager(app: ElementAppPage) {
     const { page } = app;
     await app.toggleRoomInfoPanel();
-    await page
-        .locator(".mx_RoomSummaryCard_appsGroup")
-        .getByRole("button", { name: "Add widgets, bridges & bots" })
-        .click();
+    await page.getByRole("tab", { name: "Extensions" }).click();
+    await page.getByRole("button", { name: "Add extensions" }).click();
 }

playwright/e2e/right-panel/right-panel.spec.ts

@@ -73,7 +73,8 @@ test.describe("RightPanel", () => {
         test("should handle clicking add widgets", async ({ page, app }) => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
-            await page.getByRole("button", { name: "Add widgets, bridges & bots" }).click();
+            await page.getByRole("tab", { name: "Extensions" }).click();
+            await page.getByRole("button", { name: "Add extensions" }).click();
             await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
         });
 

res/css/_components.pcss

@@ -260,6 +260,7 @@
 @import "./views/right_panel/_BaseCard.pcss";
 @import "./views/right_panel/_EmptyState.pcss";
 @import "./views/right_panel/_EncryptionInfo.pcss";
+@import "./views/right_panel/_ExtensionsCard.pcss";
 @import "./views/right_panel/_PinnedMessagesCard.pcss";
 @import "./views/right_panel/_RightPanelTabs.pcss";
 @import "./views/right_panel/_RoomSummaryCard.pcss";

res/css/views/right_panel/_BaseCard.pcss

@@ -98,50 +98,6 @@ limitations under the License.
         scrollbar-gutter: stable;
     }
 
-    .mx_BaseCard_Group {
-        margin: $spacing-20 0 $spacing-16;
-
-        & > * {
-            margin-left: $spacing-12;
-            margin-right: $spacing-12;
-        }
-
-        > h2 {
-            color: $tertiary-content;
-            font: var(--cpd-font-body-sm-medium);
-            margin: $spacing-12;
-        }
-
-        .mx_BaseCard_Button {
-            padding: 10px;
-            padding-inline-start: $spacing-12;
-            margin: 0;
-            position: relative;
-            font: var(--cpd-font-heading-sm-medium);
-            height: 20px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            display: flex;
-
-            .mx_BaseCard_Button_sublabel {
-                color: $tertiary-content;
-                margin-left: auto;
-            }
-
-            &:hover {
-                background-color: rgba(141, 151, 165, 0.1);
-            }
-
-            &.mx_AccessibleButton_disabled {
-                padding-right: $spacing-12;
-                &::after {
-                    content: unset;
-                }
-            }
-        }
-    }
-
     .mx_BaseCard_footer {
         padding-top: $spacing-4;
         text-align: center;

res/css/views/right_panel/_ExtensionsCard.pcss

@@ -0,0 +1,145 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_ExtensionsCard {
+    --cpd-separator-inset: var(--cpd-space-4x);
+    --cpd-separator-spacing: var(--cpd-space-4x);
+
+    .mx_BaseCard_header {
+        /* Hide the line between the header and the body of the card */
+        border-block-end: none;
+
+        /* Styling for the "Add extensions" button */
+        button {
+            width: 100%;
+        }
+    }
+
+    .mx_AutoHideScrollbar {
+        padding: 0 var(--cpd-space-4x);
+        box-sizing: border-box;
+    }
+
+    .mx_ExtensionsCard_container {
+        text-align: center;
+        margin: $spacing-20 var(--cpd-space-4x) 0;
+    }
+
+    .mx_ExtensionsCard_Button {
+        /* this button is special so we have to override some of the original styling */
+        /* as we will be applying it in its children */
+        padding: 0;
+        height: auto;
+        color: $tertiary-content;
+        position: relative;
+
+        .mx_WidgetAvatar {
+            flex-shrink: 0;
+        }
+
+        .mx_ExtensionsCard_icon_app {
+            padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+
+            p {
+                margin: 0 var(--cpd-space-3x);
+                color: $primary-content;
+            }
+        }
+
+        .mx_ExtensionsCard_app_pinToggle,
+        .mx_ExtensionsCard_app_options {
+            position: absolute;
+            top: 0;
+            height: 100%; /* to give bigger interactive zone */
+            width: 24px;
+            padding: var(--cpd-space-3x) var(--cpd-space-1x);
+            box-sizing: border-box;
+            min-width: 24px; /* prevent flexbox crushing */
+
+            &:hover {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    height: 24px;
+                    width: 24px;
+                    top: var(--cpd-space-2x); /* equal to padding-top of parent */
+                    left: 0;
+                    border-radius: 12px;
+                    background-color: rgba(141, 151, 165, 0.1);
+                }
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: 16px;
+                width: 16px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 16px;
+                background-color: $icon-button-color;
+            }
+        }
+
+        .mx_ExtensionsCard_app_pinToggle {
+            right: 8px;
+
+            &::before {
+                mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
+            }
+        }
+
+        .mx_ExtensionsCard_app_options {
+            right: 32px; /* 24 + 8 */
+            &::before {
+                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+            }
+        }
+
+        &.mx_ExtensionsCard_Button_pinned {
+            &::after {
+                opacity: 0.2;
+            }
+
+            .mx_ExtensionsCard_app_pinToggle::before {
+                background-color: $accent;
+            }
+        }
+
+        &::before {
+            content: unset;
+        }
+
+        &::after {
+            top: var(--cpd-space-2x); /* re-align based on the height change */
+            pointer-events: none; /* pass through to the real button */
+        }
+    }
+
+    /* Set layout for everyone button */
+    a[data-kind="primary"] {
+        margin-top: var(--cpd-space-10x);
+    }
+
+    .mx_EmptyState::before {
+        /* Overlap the Add extensions button */
+        top: -76px;
+    }
+}

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -33,24 +33,6 @@ limitations under the License.
         text-overflow: ellipsis;
     }
 
-    .mx_RoomSummaryCard_aboutGroup {
-        .mx_RoomSummaryCard_Button {
-            padding-left: 44px;
-
-            &::before {
-                content: "";
-                position: absolute;
-                top: 8px;
-                left: 10px;
-                height: 24px;
-                width: 24px;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                background-color: $icon-button-color;
-            }
-        }
-    }
-
     .mx_RoomSummaryCard_topic {
         padding: 0 12px;
 
@@ -97,131 +79,6 @@ limitations under the License.
         }
     }
 
-    .mx_RoomSummaryCard_appsGroup {
-        .mx_RoomSummaryCard_Button {
-            /* this button is special so we have to override some of the original styling */
-            /* as we will be applying it in its children */
-            padding: 0;
-            height: auto;
-            color: $tertiary-content;
-
-            .mx_RoomSummaryCard_icon_app {
-                padding: 10px 48px 10px 12px; /* based on typical mx_RoomSummaryCard_Button padding */
-                text-overflow: ellipsis;
-                overflow: hidden;
-                display: flex;
-                justify-content: center;
-                span {
-                    /* Center aligned and Spacing matched with the About section above the Widgets section */
-                    margin-right: 10px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    color: $primary-content;
-                }
-            }
-
-            .mx_RoomSummaryCard_app_pinToggle,
-            .mx_RoomSummaryCard_app_maximiseToggle,
-            .mx_RoomSummaryCard_app_options {
-                position: absolute;
-                top: 0;
-                height: 100%; /* to give bigger interactive zone */
-                width: 24px;
-                padding: 12px 4px;
-                box-sizing: border-box;
-                min-width: 24px; /* prevent flexbox crushing */
-
-                &:hover {
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        height: 24px;
-                        width: 24px;
-                        top: 8px; /* equal to padding-top of parent */
-                        left: 0;
-                        border-radius: 12px;
-                        background-color: rgba(141, 151, 165, 0.1);
-                    }
-                }
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    height: 16px;
-                    width: 16px;
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    mask-size: 16px;
-                    background-color: $icon-button-color;
-                }
-            }
-
-            .mx_RoomSummaryCard_app_pinToggle {
-                right: 8px;
-
-                &::before {
-                    mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
-                }
-            }
-            .mx_RoomSummaryCard_app_maximiseToggle {
-                right: 32px; /* 24 + 8 */
-
-                &::before {
-                    mask-size: 14px;
-                    mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
-                }
-            }
-
-            .mx_RoomSummaryCard_app_options {
-                right: 56px; /* 2*24 + 8 */
-                display: none;
-                &::before {
-                    mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
-                }
-            }
-
-            &.mx_RoomSummaryCard_Button_pinned {
-                &::after {
-                    opacity: 0.2;
-                }
-
-                .mx_RoomSummaryCard_app_pinToggle::before {
-                    background-color: $accent;
-                }
-            }
-
-            &.mx_RoomSummaryCard_Button_maximised {
-                &::after {
-                    opacity: 0.2;
-                }
-
-                .mx_RoomSummaryCard_app_maximiseToggle::before {
-                    background-color: $accent;
-                }
-            }
-
-            &:hover {
-                .mx_RoomSummaryCard_icon_app {
-                    padding-right: 72px;
-                }
-
-                .mx_RoomSummaryCard_app_options {
-                    display: unset;
-                }
-            }
-
-            &::before {
-                content: unset;
-            }
-
-            &::after {
-                top: 8px; /* re-align based on the height change */
-                pointer-events: none; /* pass through to the real button */
-            }
-        }
-    }
-
     .mx_AccessibleButton_kind_link {
         margin-top: 12px;
         margin-bottom: 12px;

res/themes/light-high-contrast/css/_light-high-contrast.pcss

@@ -64,14 +64,6 @@ $accent-1400: var(--cpd-color-green-1400);
     outline-offset: 2px;
 }
 
-/* Add padding, so the outline is not chopped off on the left */
-.mx_BaseCard {
-    padding-left: 4px !important; /* Remove 4 to allow 4 in mx_BaseCard_Group */
-}
-.mx_BaseCard_Group {
-    padding-left: 4px !important;
-}
-
 .mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
     color: $secondary-content;
     opacity: 1 !important;