Display subspaces in minimized space panel

res/css/structures/_SpacePanel.scss

@@ -61,6 +61,10 @@ $activeBorderColor: $secondary-fg-color;
 
         > .mx_SpaceItem {
             padding-left: 16px;
+
+            &.mx_SpaceItem_narrow {
+                padding-left: 4px;
+            }
         }
     }
 
@@ -87,6 +91,7 @@ $activeBorderColor: $secondary-fg-color;
 
         &.mx_SpaceItem_narrow {
             align-self: baseline;
+            max-width: 60px;
         }
     }
 
@@ -126,14 +131,14 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton_selectionWrapper {
             position: relative;
             display: flex;
-            flex: 1;
             align-items: center;
             border-radius: 12px;
             padding: 4px;
         }
 
         &:not(.mx_SpaceButton_narrow) {
             .mx_SpaceButton_selectionWrapper {
+                flex: 1;
                 width: 100%;
                 padding-right: 16px;
                 overflow: hidden;

src/components/views/spaces/SpacePanel.tsx

@@ -177,7 +177,6 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
                 space={s}
                 activeSpaces={activeSpaces}
                 isPanelCollapsed={isPanelCollapsed}
-                onExpand={() => setPanelCollapsed(false)}
             />
         )) }
         { spaces.map((s, i) => (
@@ -194,7 +193,6 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
                         space={s}
                         activeSpaces={activeSpaces}
                         isPanelCollapsed={isPanelCollapsed}
-                        onExpand={() => setPanelCollapsed(false)}
                     />
                 ) }
             </Draggable>

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -139,7 +139,6 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     activeSpaces: Room[];
     isNested?: boolean;
     isPanelCollapsed?: boolean;
-    onExpand?: Function;
     parents?: Set<string>;
     innerRef?: LegacyRef<HTMLLIElement>;
 }
@@ -186,15 +185,8 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             .filter(s => !this.props.parents?.has(s.roomId));
     }
 
-    private get isCollapsed() {
-        return this.state.collapsed || this.props.isPanelCollapsed;
-    }
-
     private toggleCollapse = evt => {
-        if (this.props.onExpand && this.isCollapsed) {
-            this.props.onExpand();
-        }
-        const newCollapsedState = !this.isCollapsed;
+        const newCollapsedState = !this.state.collapsed;
 
         SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState(
             this.props.space.roomId,
@@ -213,7 +205,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const hasChildren = this.state.childSpaces?.length;
         switch (action) {
             case RoomListAction.CollapseSection:
-                if (hasChildren && !this.isCollapsed) {
+                if (hasChildren && !this.state.collapsed) {
                     this.toggleCollapse(ev);
                 } else {
                     const parentItem = this.buttonRef?.current?.parentElement?.parentElement;
@@ -224,7 +216,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
             case RoomListAction.ExpandSection:
                 if (hasChildren) {
-                    if (this.isCollapsed) {
+                    if (this.state.collapsed) {
                         this.toggleCollapse(ev);
                     } else {
                         const childLevel = this.buttonRef?.current?.nextElementSibling;
@@ -252,15 +244,13 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
     render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { space, activeSpaces, isNested, isPanelCollapsed, onExpand, parents, innerRef,
+        const { space, activeSpaces, isNested, isPanelCollapsed, parents, innerRef,
             ...otherProps } = this.props;
 
-        const collapsed = this.isCollapsed;
-
         const itemClasses = classNames(this.props.className, {
             "mx_SpaceItem": true,
             "mx_SpaceItem_narrow": isPanelCollapsed,
-            "collapsed": collapsed,
+            "collapsed": this.state.collapsed,
             "hasSubSpaces": this.state.childSpaces?.length,
         });
 
@@ -271,11 +261,12 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             : SpaceStore.instance.getNotificationState(space.roomId);
 
         let childItems;
-        if (this.state.childSpaces?.length && !collapsed) {
+        if (this.state.childSpaces?.length && !this.state.collapsed) {
             childItems = <SpaceTreeLevel
                 spaces={this.state.childSpaces}
                 activeSpaces={activeSpaces}
                 isNested={true}
+                isPanelCollapsed={isPanelCollapsed}
                 parents={new Set(parents).add(space.roomId)}
             />;
         }
@@ -285,11 +276,17 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 className="mx_SpaceButton_toggleCollapse"
                 onClick={this.toggleCollapse}
                 tabIndex={-1}
-                aria-label={collapsed ? _t("Expand") : _t("Collapse")}
+                aria-label={this.state.collapsed ? _t("Expand") : _t("Collapse")}
             /> : null;
 
         return (
-            <li {...otherProps} className={itemClasses} ref={innerRef} aria-expanded={!collapsed} role="treeitem">
+            <li
+                {...otherProps}
+                className={itemClasses}
+                ref={innerRef}
+                aria-expanded={!this.state.collapsed}
+                role="treeitem"
+            >
                 <SpaceButton
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
@@ -316,13 +313,15 @@ interface ITreeLevelProps {
     spaces: Room[];
     activeSpaces: Room[];
     isNested?: boolean;
+    isPanelCollapsed?: boolean;
     parents: Set<string>;
 }
 
 const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
     spaces,
     activeSpaces,
     isNested,
+    isPanelCollapsed,
     parents,
 }) => {
     return <ul className="mx_SpaceTreeLevel" role="group">
@@ -332,6 +331,7 @@ const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
                 activeSpaces={activeSpaces}
                 space={s}
                 isNested={isNested}
+                isPanelCollapsed={isPanelCollapsed}
                 parents={parents}
             />);
         }) }