From 9ae447f14fcdea619d2191215a081867d1ef33af Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 25 Sep 2025 11:54:54 +0100
Subject: [PATCH] Different interface to add space panel items

A bit less flexible but probably simpler and will help keep things
actually consistent rather than just allowing modules to stick any
JSX into the space panel (which means they also have to worry about
styling if they *do* want it to be consistent).
---
 res/css/structures/_SpacePanel.pcss            |  4 ++++
 src/components/views/spaces/SpacePanel.tsx     | 13 ++++++++++++-
 src/components/views/spaces/SpaceTreeLevel.tsx |  5 ++++-
 src/modules/ExtrasApi.ts                       |  8 ++++----
 src/stores/spaces/index.ts                     |  4 ++--
 5 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 64044c4c5c..1aea3ae23b 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -211,6 +211,10 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
+        &.mx_SpaceButton_withIcon .mx_SpaceButton_icon {
+            background-color: $panel-actions;
+        }
+
         &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
             mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
         }
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 6a2ff81555..5436521840 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -341,7 +341,18 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                     </Draggable>
                 ))}
                 {children}
-                {ModuleApi.extras.spacePanelItems.map((renderer) => renderer({ isPanelCollapsed }))}
+                {ModuleApi.extras.spacePanelItems.map((itemProps) => (
+                    <li
+                        key={itemProps.spaceKey}
+                        className={classNames("mx_SpaceItem", {
+                            collapsed: isPanelCollapsed,
+                        })}
+                        role="treeitem"
+                        aria-selected={false} // TODO
+                    >
+                        <SpaceButton {...itemProps} isNarrow={isPanelCollapsed} size="32px" />
+                    </li>
+                ))}
                 {shouldShowComponent(UIComponent.CreateSpaces) && (
                     <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
                 )}
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index d03ac8a1e2..f2c41c367f 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -52,6 +52,7 @@ type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
     className?: string;
     selected?: boolean;
     label: string;
+    icon?: JSX.Element;
     contextMenuTooltip?: string;
     notificationState?: NotificationState;
     isNarrow?: boolean;
@@ -65,6 +66,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
     space,
     spaceKey: _spaceKey,
     className,
+    icon,
     selected,
     label,
     contextMenuTooltip,
@@ -84,7 +86,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
 
     let avatar = (
         <div className="mx_SpaceButton_avatarPlaceholder">
-            <div className="mx_SpaceButton_icon" />
+            <div className="mx_SpaceButton_icon">{icon}</div>
         </div>
     );
     if (space) {
@@ -143,6 +145,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
                 mx_SpaceButton_active: selected,
                 mx_SpaceButton_hasMenuOpen: menuDisplayed,
                 mx_SpaceButton_narrow: isNarrow,
+                mx_SpaceButton_withIcon: Boolean(icon),
             })}
             aria-label={label}
             title={!isNarrow || menuDisplayed ? undefined : label}
diff --git a/src/modules/ExtrasApi.ts b/src/modules/ExtrasApi.ts
index fb98e13280..b82e618bf3 100644
--- a/src/modules/ExtrasApi.ts
+++ b/src/modules/ExtrasApi.ts
@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type SpacePanelItemRenderFunction, type ExtrasApi } from "@element-hq/element-web-module-api";
+import { type SpacePanelItemProps, type ExtrasApi } from "@element-hq/element-web-module-api";
 
 export class ElementWebExtrasApi implements ExtrasApi {
-    public spacePanelItems: SpacePanelItemRenderFunction[] = [];
+    public spacePanelItems: SpacePanelItemProps[] = [];
 
-    public addSpacePanelItem(renderer: SpacePanelItemRenderFunction): void {
-        this.spacePanelItems.push(renderer);
+    public addSpacePanelItem(item: SpacePanelItemProps): void {
+        this.spacePanelItems.push(item);
     }
 }
diff --git a/src/stores/spaces/index.ts b/src/stores/spaces/index.ts
index 5a775692c9..d05435b587 100644
--- a/src/stores/spaces/index.ts
+++ b/src/stores/spaces/index.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Room, type HierarchyRoom } from "matrix-js-sdk/src/matrix";
+import { type HierarchyRoom } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../languageHandler";
 
@@ -42,7 +42,7 @@ export const getMetaSpaceName = (spaceKey: MetaSpace, allRoomsInHome = false): s
     }
 };
 
-export type SpaceKey = MetaSpace | Room["roomId"];
+export type SpaceKey = string;
 
 export interface ISuggestedRoom extends HierarchyRoom {
     viaServers: string[];