Switch from svg masks to svg rendering in more places (#31650)

* Replace icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace more icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Swap for outline icons in spotlight & update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch emoji picker to use emoji for header icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update football emoji

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in ExtensionsCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in BaseCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in EmojiPicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in Spotlight

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak emoji and fix disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert size change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/e2e/spotlight/spotlight.spec.ts

@@ -345,10 +345,10 @@ test.describe("Spotlight", () => {
         await expect(resultLocator).toHaveCount(1);
         await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
 
-        await expect(spotlight.dialog.locator(".mx_SpotlightDialog_startGroupChat")).toContainText(
+        await expect(spotlight.dialog.locator("#mx_SpotlightDialog_button_startGroupChat")).toContainText(
             "Start a group chat",
         );
-        await spotlight.dialog.locator(".mx_SpotlightDialog_startGroupChat").click();
+        await spotlight.dialog.locator("#mx_SpotlightDialog_button_startGroupChat").click();
         await expect(page.getByRole("dialog")).toContainText("Direct Messages");
     });
 

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -79,12 +79,8 @@ Please see LICENSE files in the repository root for full details.
             position: relative;
             padding: $spacing-4 $spacing-8 $spacing-4 37px;
 
-            &::before {
+            > svg {
-                background-color: $secondary-content;
+                color: $secondary-content;
-                content: "";
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
                 width: 18px;
                 height: 18px;
                 position: absolute;
@@ -93,23 +89,11 @@ Please see LICENSE files in the repository root for full details.
                 transform: translateY(-50%);
             }
 
-            &.mx_SpotlightDialog_filterPeople::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
-            }
-
-            &.mx_SpotlightDialog_filterPublicRooms::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
-            }
-
-            &.mx_SpotlightDialog_filterPublicSpaces::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
-            }
-
             .mx_SpotlightDialog_filter--close {
-                position: relative;
                 display: inline-block;
-                width: 16px;
+                width: 14px;
-                height: 16px;
+                height: 14px;
+                padding: 1px;
                 background: $system;
                 border-radius: 8px;
                 margin-left: $spacing-8;
@@ -117,17 +101,10 @@ Please see LICENSE files in the repository root for full details.
                 line-height: 16px;
                 color: $secondary-content;
 
-                &::before {
+                svg {
-                    background-color: $secondary-content;
+                    color: $secondary-content;
-                    content: "";
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    mask-size: 14px;
                     width: inherit;
                     height: inherit;
-                    position: absolute;
-                    left: 0;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 }
             }
         }
@@ -386,45 +363,24 @@ Please see LICENSE files in the repository root for full details.
                 margin: 0;
                 padding: 3px $spacing-8 3px $spacing-28;
 
-                &::before {
+                svg {
-                    content: "";
                     display: block;
                     position: absolute;
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    mask-size: contain;
                     left: $spacing-8;
                     width: 16px;
                     height: 16px;
-                    background: var(--cpd-color-icon-primary);
+                    color: var(--cpd-color-icon-primary);
                 }
             }
         }
 
-        .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
-        }
-
-        .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
-        }
-
         .mx_SpotlightDialog_otherSearches {
-            .mx_SpotlightDialog_startChat,
+            .mx_SpotlightDialog_option {
-            .mx_SpotlightDialog_joinRoomAlias,
-            .mx_SpotlightDialog_explorePublicRooms,
-            .mx_SpotlightDialog_explorePublicSpaces,
-            .mx_SpotlightDialog_startGroupChat,
-            .mx_SpotlightDialog_searchMessages {
                 padding-left: $spacing-32;
                 position: relative;
 
-                &::before {
+                svg {
-                    background-color: $secondary-content;
+                    color: $secondary-content;
-                    content: "";
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    mask-size: contain;
                     width: 24px;
                     height: 24px;
                     position: absolute;
@@ -434,30 +390,6 @@ Please see LICENSE files in the repository root for full details.
                 }
             }
 
-            .mx_SpotlightDialog_startChat::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
-            }
-
-            .mx_SpotlightDialog_joinRoomAlias::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
-            }
-
-            .mx_SpotlightDialog_explorePublicRooms::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
-            }
-
-            .mx_SpotlightDialog_explorePublicSpaces::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/space.svg");
-            }
-
-            .mx_SpotlightDialog_startGroupChat::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
-            }
-
-            .mx_SpotlightDialog_searchMessages::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/chat.svg");
-            }
-
             .mx_SpotlightDialog_otherSearches_messageSearchText {
                 font-size: $font-15px;
                 line-height: $font-24px;
@@ -496,27 +428,10 @@ Please see LICENSE files in the repository root for full details.
             display: none;
         }
 
-        .mx_SpotlightDialog_metaspaceResult {
+        .mx_SpotlightDialog_metaspaceResult svg {
-            background-color: $secondary-content;
+            color: $secondary-content;
-            mask-position: center;
+            width: inherit;
-            mask-repeat: no-repeat;
+            height: inherit;
-            mask-size: contain;
-
-            &.mx_SpotlightDialog_metaspaceResult_home-space {
-                mask-image: url("@vector-im/compound-design-tokens/icons/home.svg");
-            }
-
-            &.mx_SpotlightDialog_metaspaceResult_favourites-space {
-                mask-image: url("@vector-im/compound-design-tokens/icons/favourite.svg");
-            }
-
-            &.mx_SpotlightDialog_metaspaceResult_people-space {
-                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile.svg");
-            }
-
-            &.mx_SpotlightDialog_metaspaceResult_orphans-space {
-                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
-            }
         }
     }
 }

res/css/views/emojipicker/_EmojiPicker.pcss

@@ -87,34 +87,24 @@ Please see LICENSE files in the repository root for full details.
         align-self: center;
         width: 32px;
         height: 32px;
+        cursor: pointer;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
     }
 }
 
-.mx_EmojiPicker_search_clear {
-    cursor: pointer;
-}
-
 .mx_EmojiPicker_search_icon {
-    width: 20px;
+    width: 18px;
     margin: 8px;
-}
 
-.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+    svg {
-    pointer-events: none;
+        width: 100%;
-}
+        height: 100%;
-
+        color: $primary-content;
-.mx_EmojiPicker_search_icon::after {
+    }
-    mask: url("@vector-im/compound-design-tokens/icons/search.svg") no-repeat;
-    mask-size: 100%;
-    background-color: $primary-content;
-    content: "";
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-}
-
-.mx_EmojiPicker_search_clear::after {
-    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
 }
 
 .mx_EmojiPicker_category {

res/css/views/right_panel/_ExtensionsCard.pcss

@@ -58,7 +58,13 @@ Please see LICENSE files in the repository root for full details.
             width: 24px;
             padding: var(--cpd-space-3x) var(--cpd-space-1x);
             box-sizing: border-box;
-            min-width: 24px; /* prevent flexbox crushing */
+            flex-shrink: 0;
+
+            svg {
+                width: 16px;
+                height: 16px;
+                color: $icon-button-color;
+            }
 
             &:hover {
                 &::after {
@@ -72,32 +78,14 @@ Please see LICENSE files in the repository root for full details.
                     background-color: rgb(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("@vector-im/compound-design-tokens/icons/pin-solid.svg");
-            }
         }
 
         .mx_ExtensionsCard_app_options {
             right: 32px; /* 24 + 8 */
-            &::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-            }
         }
 
         &.mx_ExtensionsCard_Button_pinned {
@@ -105,8 +93,8 @@ Please see LICENSE files in the repository root for full details.
                 opacity: 0.2;
             }
 
-            .mx_ExtensionsCard_app_pinToggle::before {
+            .mx_ExtensionsCard_app_pinToggle svg {
-                background-color: $accent;
+                color: $accent;
             }
         }
 

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

@@ -160,12 +160,8 @@ $accent-1400: var(--cpd-color-green-1400);
                     background-color: $quinary-content !important;
                     color: $background !important;
 
-                    &.mx_SpotlightDialog_startChat::before,
+                    svg {
-                    &.mx_SpotlightDialog_joinRoomAlias::before,
+                        color: $background !important;
-                    &.mx_SpotlightDialog_explorePublicRooms::before,
-                    &.mx_SpotlightDialog_startGroupChat::before,
-                    &.mx_SpotlightDialog_searchMessages::before {
-                        background-color: $background !important;
                     }
 
                     .mx_DecoratedRoomAvatar_icon::before {

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -7,22 +7,21 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type WebSearch as WebSearchEvent } from "@matrix-org/analytics-events/types/typescript/WebSearch";
-import classNames from "classnames";
 import { capitalize, sum } from "lodash";
 import {
+    type HierarchyRoom,
     type IPublicRoomsChunkRoom,
+    JoinRule,
     type MatrixClient,
+    type Room,
     RoomMember,
     RoomType,
-    type Room,
-    type HierarchyRoom,
-    JoinRule,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { normalize } from "matrix-js-sdk/src/utils";
 import React, {
-    type JSX,
     type ChangeEvent,
+    type JSX,
     useCallback,
     useContext,
     useEffect,
@@ -31,6 +30,17 @@ import React, {
     useState,
 } from "react";
 import sanitizeHtml from "sanitize-html";
+import {
+    ChatIcon,
+    RoomIcon,
+    SpaceIcon,
+    UserProfileIcon,
+    FavouriteIcon,
+    HomeIcon,
+    GroupIcon,
+    CloseIcon,
+    LinkIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 import {
@@ -62,7 +72,7 @@ import { type RoomNotificationState } from "../../../../stores/notifications/Roo
 import { RoomNotificationStateStore } from "../../../../stores/notifications/RoomNotificationStateStore";
 import { RecentAlgorithm } from "../../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import { SdkContextClass } from "../../../../contexts/SDKContext";
-import { getMetaSpaceName } from "../../../../stores/spaces";
+import { getMetaSpaceName, MetaSpace } from "../../../../stores/spaces";
 import SpaceStore from "../../../../stores/spaces/SpaceStore";
 import { DirectoryMember, type Member, startDmOnFirstMessage } from "../../../../utils/direct-messages";
 import DMRoomMap from "../../../../utils/DMRoomMap";
@@ -131,6 +141,30 @@ function filterToLabel(filter: Filter): string {
     }
 }
 
+function filterToIcon(filter: Filter): JSX.Element {
+    switch (filter) {
+        case Filter.People:
+            return <UserProfileIcon />;
+        case Filter.PublicRooms:
+            return <RoomIcon />;
+        case Filter.PublicSpaces:
+            return <SpaceIcon />;
+    }
+}
+
+function metaspaceToIcon(key: MetaSpace): JSX.Element | undefined {
+    switch (key) {
+        case MetaSpace.Home:
+            return <HomeIcon />;
+        case MetaSpace.Favourites:
+            return <FavouriteIcon />;
+        case MetaSpace.People:
+            return <UserProfileIcon />;
+        case MetaSpace.Orphans:
+            return <RoomIcon />;
+    }
+}
+
 interface IBaseResult {
     section: Section;
     filter: Filter[];
@@ -396,14 +430,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
             ...SpaceStore.instance.enabledMetaSpaces.map((spaceKey) => ({
                 section: Section.Spaces,
                 filter: [] as Filter[],
-                avatar: (
+                avatar: <div className="mx_SpotlightDialog_metaspaceResult">{metaspaceToIcon(spaceKey)}</div>,
-                    <div
-                        className={classNames(
-                            "mx_SpotlightDialog_metaspaceResult",
-                            `mx_SpotlightDialog_metaspaceResult_${spaceKey}`,
-                        )}
-                    />
-                ),
                 name: getMetaSpaceName(spaceKey, SpaceStore.instance.allRoomsInHome),
                 onClick() {
                     SpaceStore.instance.setActiveSpace(spaceKey);
@@ -584,34 +611,30 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     {filter !== Filter.PublicSpaces && supportsSpaceFiltering && (
                         <Option
                             id="mx_SpotlightDialog_button_explorePublicSpaces"
-                            className="mx_SpotlightDialog_explorePublicSpaces"
                             onClick={() => setFilter(Filter.PublicSpaces)}
                         >
+                            {filterToIcon(Filter.PublicSpaces)}
                             {filterToLabel(Filter.PublicSpaces)}
                         </Option>
                     )}
                     {filter !== Filter.PublicRooms && (
                         <Option
                             id="mx_SpotlightDialog_button_explorePublicRooms"
-                            className="mx_SpotlightDialog_explorePublicRooms"
                             onClick={() => setFilter(Filter.PublicRooms)}
                         >
+                            {filterToIcon(Filter.PublicRooms)}
                             {filterToLabel(Filter.PublicRooms)}
                         </Option>
                     )}
                     {filter !== Filter.People && (
-                        <Option
+                        <Option id="mx_SpotlightDialog_button_startChat" onClick={() => setFilter(Filter.People)}>
-                            id="mx_SpotlightDialog_button_startChat"
+                            {filterToIcon(Filter.People)}
-                            className="mx_SpotlightDialog_startChat"
-                            onClick={() => setFilter(Filter.People)}
-                        >
                             {filterToLabel(Filter.People)}
                         </Option>
                     )}
                     {filter === null && (
                         <Option
                             id="mx_SpotlightDialog_button_searchMessages"
-                            className="mx_SpotlightDialog_searchMessages"
                             onClick={() => {
                                 defaultDispatcher.dispatch({
                                     action: Action.FocusMessageSearch,
@@ -620,6 +643,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                 onFinished();
                             }}
                         >
+                            <ChatIcon />
                             {_t("spotlight_dialog|messages_label")}
                         </Option>
                     )}
@@ -919,7 +943,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     <div>
                         <Option
                             id="mx_SpotlightDialog_button_joinRoomAlias"
-                            className="mx_SpotlightDialog_joinRoomAlias"
                             onClick={(ev) => {
                                 defaultDispatcher.dispatch<ViewRoomPayload>({
                                     action: Action.ViewRoom,
@@ -931,6 +954,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                 onFinished();
                             }}
                         >
+                            <RoomIcon />
                             {_t("spotlight_dialog|join_button_text", {
                                 roomAddress: trimmedQuery,
                             })}
@@ -961,6 +985,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         title={inviteLinkCopied ? _t("common|copied") : _t("action|copy")}
                     >
                         <span className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">
+                            <LinkIcon />
                             {_t("spotlight_dialog|copy_link_text")}
                         </span>
                     </TooltipOption>
@@ -985,6 +1010,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         }
                     >
                         <span className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">
+                            <RoomIcon />
                             {_t("spotlight_dialog|create_new_room_button")}
                         </span>
                     </Option>
@@ -1003,9 +1029,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     <h4 id="mx_SpotlightDialog_section_groupChat">{_t("spotlight_dialog|group_chat_section_title")}</h4>
                     <Option
                         id="mx_SpotlightDialog_button_startGroupChat"
-                        className="mx_SpotlightDialog_startGroupChat"
                         onClick={() => showStartChatInviteDialog(trimmedQuery)}
                     >
+                        <GroupIcon />
                         {_t("spotlight_dialog|start_group_chat_button")}
                     </Option>
                 </div>
@@ -1244,13 +1270,8 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
             >
                 <div className="mx_SpotlightDialog_searchBox mx_textinput">
                     {filter !== null && (
-                        <div
+                        <div className="mx_SpotlightDialog_filter">
-                            className={classNames("mx_SpotlightDialog_filter", {
+                            {filterToIcon(filter)}
-                                mx_SpotlightDialog_filterPeople: filter === Filter.People,
-                                mx_SpotlightDialog_filterPublicRooms: filter === Filter.PublicRooms,
-                                mx_SpotlightDialog_filterPublicSpaces: filter === Filter.PublicSpaces,
-                            })}
-                        >
                             <span>{filterToLabel(filter)}</span>
                             <AccessibleButton
                                 tabIndex={-1}
@@ -1259,7 +1280,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                 })}
                                 className="mx_SpotlightDialog_filter--close"
                                 onClick={() => setFilter(null)}
-                            />
+                            >
+                                <CloseIcon />
+                            </AccessibleButton>
                         </div>
                     )}
                     <input

src/components/views/emojipicker/Search.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX } from "react";
+import { CloseIcon, SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -52,12 +53,18 @@ class Search extends React.PureComponent<IProps> {
             rightButton = (
                 <button
                     onClick={() => this.props.onChange("")}
-                    className="mx_EmojiPicker_search_icon mx_EmojiPicker_search_clear"
+                    className="mx_EmojiPicker_search_clear"
                     title={_t("emoji_picker|cancel_search_label")}
-                />
+                >
+                    <CloseIcon />
+                </button>
             );
         } else {
-            rightButton = <span className="mx_EmojiPicker_search_icon" />;
+            rightButton = (
+                <span className="mx_EmojiPicker_search_icon">
+                    <SearchIcon />
+                </span>
+            );
         }
 
         return (

src/components/views/right_panel/ExtensionsCard.tsx

@@ -10,8 +10,12 @@ import React, { type JSX, useEffect, useMemo, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 import { Button, Link, Separator, Text } from "@vector-im/compound-web";
-import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
+import {
-import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
+    PlusIcon,
+    ExtensionsIcon,
+    OverflowHorizontalIcon,
+    PinSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
@@ -124,7 +128,9 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
                     isExpanded={menuDisplayed}
                     onClick={openMenu}
                     title={_t("common|options")}
-                />
+                >
+                    <OverflowHorizontalIcon />
+                </ContextMenuTooltipButton>
             )}
 
             <AccessibleButton
@@ -132,7 +138,9 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
                 onClick={togglePin}
                 title={pinTitle}
                 disabled={cannotPin}
-            />
+            >
+                <PinSolidIcon />
+            </AccessibleButton>
 
             {contextMenu}
         </div>

test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx

@@ -33,6 +33,8 @@ import { SettingLevel } from "../../../../../src/settings/SettingLevel";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import SdkConfig from "../../../../../src/SdkConfig";
 import { Action } from "../../../../../src/dispatcher/actions";
+import { MetaSpace } from "../../../../../src/stores/spaces";
+import SpaceStore from "../../../../../src/stores/spaces/SpaceStore.ts";
 
 jest.useFakeTimers();
 
@@ -699,4 +701,29 @@ describe("Spotlight Dialog", () => {
             expect(keyboardPrompt?.textContent).not.toContain("→");
         });
     });
+
+    describe("metaspaces", () => {
+        beforeEach(() => {
+            jest.spyOn(SpaceStore.instance, "enabledMetaSpaces", "get").mockReturnValue([
+                MetaSpace.Home,
+                MetaSpace.Favourites,
+                MetaSpace.People,
+                MetaSpace.Orphans,
+            ]);
+        });
+
+        it.each([MetaSpace.Home, MetaSpace.Favourites, MetaSpace.People])(
+            "should show metaspace %s",
+            async (metaSpace) => {
+                const onFinished = jest.fn();
+                const { asFragment, container } = render(
+                    <SpotlightDialog initialText={metaSpace.split("-")[0]} onFinished={onFinished} />,
+                );
+                await waitFor(() =>
+                    expect(container.querySelector(".mx_SpotlightDialog_metaspaceResult")).toBeInTheDocument(),
+                );
+                expect(asFragment()).toMatchSnapshot();
+            },
+        );
+    });
 });

test/unit-tests/components/views/dialogs/__snapshots__/SpotlightDialog-test.tsx.snap

@@ -0,0 +1,759 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Spotlight Dialog metaspaces should show metaspace favourites-space 1`] = `
+<DocumentFragment>
+  <div
+    id="mx_SpotlightDialog_keyboardPrompt"
+  >
+    <span>
+      Use 
+      <kbd>
+        ↓
+      </kbd>
+      <kbd>
+        ↑
+      </kbd>
+       to scroll
+    </span>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-label="Search Dialog"
+    class="mx_SpotlightDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    />
+    <div
+      class="mx_SpotlightDialog_searchBox mx_textinput"
+    >
+      <input
+        aria-activedescendant="mx_SpotlightDialog_button_result_Favourites"
+        aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+        aria-label="Search"
+        aria-owns="mx_SpotlightDialog_content"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        placeholder="Search"
+        spellcheck="false"
+        type="text"
+        value="favourites"
+      />
+    </div>
+    <div
+      aria-activedescendant="mx_SpotlightDialog_button_result_Favourites"
+      aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+      id="mx_SpotlightDialog_content"
+      role="listbox"
+    >
+      <div
+        aria-labelledby="mx_SpotlightDialog_section_spaces"
+        class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+        role="group"
+      >
+        <h4
+          id="mx_SpotlightDialog_section_spaces"
+        >
+          Spaces you're in
+        </h4>
+        <div>
+          <li
+            aria-selected="true"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_result_Favourites"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="mx_SpotlightDialog_metaspaceResult"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004zM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706z"
+                />
+              </svg>
+            </div>
+            Favourites
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+        </div>
+      </div>
+      <div
+        aria-labelledby="mx_SpotlightDialog_section_otherSearches"
+        class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
+        role="group"
+      >
+        <h4
+          id="mx_SpotlightDialog_section_otherSearches"
+        >
+          Use "favourites" to search
+        </h4>
+        <div>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_explorePublicSpaces"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
+              />
+            </svg>
+            Public spaces
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_explorePublicRooms"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+              />
+            </svg>
+            Public rooms
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_startChat"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+              />
+              <path
+                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
+              />
+            </svg>
+            People
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_searchMessages"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+              />
+            </svg>
+            Messages
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`Spotlight Dialog metaspaces should show metaspace home-space 1`] = `
+<DocumentFragment>
+  <div
+    id="mx_SpotlightDialog_keyboardPrompt"
+  >
+    <span>
+      Use 
+      <kbd>
+        ↓
+      </kbd>
+      <kbd>
+        ↑
+      </kbd>
+       to scroll
+    </span>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-label="Search Dialog"
+    class="mx_SpotlightDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    />
+    <div
+      class="mx_SpotlightDialog_searchBox mx_textinput"
+    >
+      <input
+        aria-activedescendant="mx_SpotlightDialog_button_result_Home"
+        aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+        aria-label="Search"
+        aria-owns="mx_SpotlightDialog_content"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        placeholder="Search"
+        spellcheck="false"
+        type="text"
+        value="home"
+      />
+    </div>
+    <div
+      aria-activedescendant="mx_SpotlightDialog_button_result_Home"
+      aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+      id="mx_SpotlightDialog_content"
+      role="listbox"
+    >
+      <div
+        aria-labelledby="mx_SpotlightDialog_section_spaces"
+        class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+        role="group"
+      >
+        <h4
+          id="mx_SpotlightDialog_section_spaces"
+        >
+          Spaces you're in
+        </h4>
+        <div>
+          <li
+            aria-selected="true"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_result_Home"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="mx_SpotlightDialog_metaspaceResult"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M16 11v8h3V9.177l-7-3.889-7 3.889V19h3v-8zm-6 10H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0l7 3.89A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-5v-8h-4z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+            Home
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+        </div>
+      </div>
+      <div
+        aria-labelledby="mx_SpotlightDialog_section_otherSearches"
+        class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
+        role="group"
+      >
+        <h4
+          id="mx_SpotlightDialog_section_otherSearches"
+        >
+          Use "home" to search
+        </h4>
+        <div>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_explorePublicSpaces"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
+              />
+            </svg>
+            Public spaces
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_explorePublicRooms"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+              />
+            </svg>
+            Public rooms
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_startChat"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+              />
+              <path
+                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
+              />
+            </svg>
+            People
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_searchMessages"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+              />
+            </svg>
+            Messages
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`Spotlight Dialog metaspaces should show metaspace people-space 1`] = `
+<DocumentFragment>
+  <div
+    id="mx_SpotlightDialog_keyboardPrompt"
+  >
+    <span>
+      Use 
+      <kbd>
+        ↓
+      </kbd>
+      <kbd>
+        ↑
+      </kbd>
+       to scroll
+    </span>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-label="Search Dialog"
+    class="mx_SpotlightDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    />
+    <div
+      class="mx_SpotlightDialog_searchBox mx_textinput"
+    >
+      <input
+        aria-activedescendant="mx_SpotlightDialog_button_result_People"
+        aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+        aria-label="Search"
+        aria-owns="mx_SpotlightDialog_content"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        placeholder="Search"
+        spellcheck="false"
+        type="text"
+        value="people"
+      />
+    </div>
+    <div
+      aria-activedescendant="mx_SpotlightDialog_button_result_People"
+      aria-describedby="mx_SpotlightDialog_keyboardPrompt"
+      id="mx_SpotlightDialog_content"
+      role="listbox"
+    >
+      <div
+        aria-labelledby="mx_SpotlightDialog_section_spaces"
+        class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
+        role="group"
+      >
+        <h4
+          id="mx_SpotlightDialog_section_spaces"
+        >
+          Spaces you're in
+        </h4>
+        <div>
+          <li
+            aria-selected="true"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_result_People"
+            role="option"
+            tabindex="-1"
+          >
+            <div
+              class="mx_SpotlightDialog_metaspaceResult"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
+                />
+                <path
+                  d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                />
+                <path
+                  d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
+                />
+              </svg>
+            </div>
+            People
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+        </div>
+      </div>
+      <div
+        aria-labelledby="mx_SpotlightDialog_section_otherSearches"
+        class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
+        role="group"
+      >
+        <h4
+          id="mx_SpotlightDialog_section_otherSearches"
+        >
+          Use "people" to search
+        </h4>
+        <div>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_explorePublicSpaces"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
+              />
+            </svg>
+            Public spaces
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_explorePublicRooms"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+              />
+            </svg>
+            Public rooms
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_startChat"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
+              />
+              <path
+                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+              />
+              <path
+                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
+              />
+            </svg>
+            People
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+          <li
+            aria-selected="false"
+            class="mx_AccessibleButton mx_SpotlightDialog_option"
+            id="mx_SpotlightDialog_button_searchMessages"
+            role="option"
+            tabindex="-1"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+              />
+            </svg>
+            Messages
+            <div
+              class="mx_SpotlightDialog_option--endAdornment"
+            >
+              <kbd
+                aria-hidden="true"
+                class="mx_SpotlightDialog_enterPrompt"
+              >
+                ↵
+              </kbd>
+            </div>
+          </li>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap

@@ -216,7 +216,19 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           class="mx_AccessibleButton mx_ExtensionsCard_app_pinToggle"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357z"
+            />
+          </svg>
+        </div>
       </div>
       <div
         class="mx_BaseCard_Button mx_ExtensionsCard_Button"
@@ -257,7 +269,19 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           class="mx_AccessibleButton mx_ExtensionsCard_app_pinToggle"
           role="button"
           tabindex="0"
-        />
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357z"
+            />
+          </svg>
+        </div>
       </div>
     </div>
   </div>