From fcae19f8318a3bf0bd8908162e56bd0b3d2f3884 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 27 May 2021 12:36:16 +0100
Subject: [PATCH 1/4] Track left panel width using ResizeObserver

---
 src/@types/global.d.ts                  |  2 +
 src/components/structures/LeftPanel.tsx |  8 +++-
 src/stores/UIStore.ts                   | 53 +++++++++++++++++++++----
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index 63966d96fa..22280b8a28 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -43,6 +43,7 @@ import TypingStore from "../stores/TypingStore";
 import { EventIndexPeg } from "../indexing/EventIndexPeg";
 import {VoiceRecordingStore} from "../stores/VoiceRecordingStore";
 import PerformanceMonitor from "../performance";
+import UIStore from "../stores/UIStore";
 
 declare global {
     interface Window {
@@ -82,6 +83,7 @@ declare global {
         mxEventIndexPeg: EventIndexPeg;
         mxPerformanceMonitor: PerformanceMonitor;
         mxPerformanceEntryNames: any;
+        mxUIStore: UIStore;
     }
 
     interface Document {
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 22c60bff1e..80cd9bc465 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -67,6 +67,7 @@ const cssClasses = [
 
 @replaceableComponent("structures.LeftPanel")
 export default class LeftPanel extends React.Component<IProps, IState> {
+    private ref: React.RefObject<HTMLDivElement> = createRef();
     private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
     private groupFilterPanelWatcherRef: string;
     private bgImageWatcherRef: string;
@@ -93,6 +94,10 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         });
     }
 
+    public componentDidMount() {
+        UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
+    }
+
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef);
         SettingsStore.unwatchSetting(this.bgImageWatcherRef);
@@ -100,6 +105,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
+        UIStore.instance.stopTrackingElementDimensions("LeftPanel");
     }
 
     private updateActiveSpace = (activeSpace: Room) => {
@@ -420,7 +426,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         );
 
         return (
-            <div className={containerClasses}>
+            <div className={containerClasses} ref={this.ref}>
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index e7f6070627..7511527eb0 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -24,12 +24,14 @@ export enum UI_EVENTS {
 
 export type ResizeObserverCallbackFunction = (entries: ResizeObserverEntry[]) => void;
 
-
 export default class UIStore extends EventEmitter {
     private static _instance: UIStore = null;
 
     private resizeObserver: ResizeObserver;
 
+    private uiElementDimensions = new Map<string, DOMRectReadOnly>();
+    private trackedUiElements = new Map<Element, string>();
+
     public windowWidth: number;
     public windowHeight: number;
 
@@ -60,14 +62,51 @@ export default class UIStore extends EventEmitter {
         }
     }
 
-    private resizeObserverCallback = (entries: ResizeObserverEntry[]) => {
-        const { width, height } = entries
-            .find(entry => entry.target === document.body)
-            .contentRect;
+    public getElementDimensions(name: string): DOMRectReadOnly {
+        return this.uiElementDimensions.get(name);
+    }
 
-        this.windowWidth = width;
-        this.windowHeight = height;
+    public trackElementDimensions(name: string, element: Element): void {
+        this.trackedUiElements.set(element, name);
+        this.resizeObserver.observe(element);
+    }
+
+    public stopTrackingElementDimensions(name: string): void {
+        let trackedElement: Element;
+        this.trackedUiElements.forEach((trackedElementName, element) => {
+            if (trackedElementName === name) {
+                trackedElement = element;
+            }
+        });
+        if (trackedElement) {
+            this.resizeObserver.unobserve(trackedElement);
+            this.uiElementDimensions.delete(name);
+            this.trackedUiElements.delete(trackedElement);
+        }
+    }
+
+    public isTrackingElementDimensions(name: string): boolean {
+        return this.uiElementDimensions.has(name);
+    }
+
+    private resizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+        const windowEntry = entries.find(entry => entry.target === document.body);
+
+        if (windowEntry) {
+            this.windowWidth = windowEntry.contentRect.width;
+            this.windowHeight = windowEntry.contentRect.height;
+        }
+
+        entries.forEach(entry => {
+            const trackedElementName = this.trackedUiElements.get(entry.target);
+            if (trackedElementName) {
+                this.uiElementDimensions.set(trackedElementName, entry.contentRect);
+                this.emit(trackedElementName, UI_EVENTS.Resize, entry);
+            }
+        });
 
         this.emit(UI_EVENTS.Resize, entries);
     }
 }
+
+window.mxUIStore = UIStore.instance;

From aaca71b316d8ad6451e16a4e108e5328bc685b2e Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 27 May 2021 12:44:53 +0100
Subject: [PATCH 2/4] Reintroduce sticky header width

---
 res/css/views/rooms/_RoomSublist.scss   |  1 +
 src/components/structures/LeftPanel.tsx | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index b3e907af04..bae469ab87 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -61,6 +61,7 @@ limitations under the License.
             &.mx_RoomSublist_headerContainer_sticky {
                 position: fixed;
                 height: 32px; // to match the header container
+                // width set by JS because of a compat issue between Firefox and Chrome
                 width: calc(100% - 15px);
             }
 
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 80cd9bc465..8699c27fdc 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -95,7 +95,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public componentDidMount() {
-        UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
+        UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
+        UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
     }
 
     public componentWillUnmount() {
@@ -105,7 +106,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        UIStore.instance.stopTrackingElementDimensions("LeftPanel");
+        UIStore.instance.stopTrackingElementDimensions("ListContainer");
+        UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
     }
 
     private updateActiveSpace = (activeSpace: Room) => {
@@ -251,10 +253,24 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
                     header.classList.add("mx_RoomSublist_headerContainer_sticky");
                 }
+
+                const listDimensions = UIStore.instance.getElementDimensions("ListContainer");
+                if (listDimensions) {
+                    const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
+                    const headerStickyWidth = listDimensions.width - headerRightMargin;
+                    const newWidth = `${headerStickyWidth}px`;
+                    if (header.style.width !== newWidth) {
+                        header.style.width = newWidth;
+                    }
+                }
             } else if (!style.stickyTop && !style.stickyBottom) {
                 if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
                     header.classList.remove("mx_RoomSublist_headerContainer_sticky");
                 }
+
+                if (header.style.width) {
+                    header.style.removeProperty('width');
+                }
             }
         }
 

From 29c4d9ffd01277c280568ed374eb858b7f414f94 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 28 May 2021 10:03:46 +0100
Subject: [PATCH 3/4] Restore toggle LHS logic

---
 src/components/structures/MatrixChat.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index c01437b313..32916a590b 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -232,6 +232,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private accountPasswordTimer?: NodeJS.Timeout;
     private focusComposer: boolean;
     private subTitleStatus: string;
+    private prevWindowWidth: number;
 
     private readonly loggedInView: React.RefObject<LoggedInViewType>;
     private readonly dispatcherRef: any;
@@ -277,6 +278,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             }
         }
 
+        this.prevWindowWidth = UIStore.instance.windowWidth || 1000;
         UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);
 
         this.pageChanging = false;
@@ -1821,13 +1823,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         const LHS_THRESHOLD = 1000;
         const width = UIStore.instance.windowWidth;
 
-        if (width <= LHS_THRESHOLD && !this.state.collapseLhs) {
-            dis.dispatch({ action: 'hide_left_panel' });
-        }
-        if (width > LHS_THRESHOLD && this.state.collapseLhs) {
+        if (this.prevWindowWidth < LHS_THRESHOLD && width >= LHS_THRESHOLD) {
             dis.dispatch({ action: 'show_left_panel' });
         }
 
+        if (this.prevWindowWidth >= LHS_THRESHOLD && width < LHS_THRESHOLD) {
+            dis.dispatch({ action: 'hide_left_panel' });
+        }
+
+        this.prevWindowWidth = width;
         this.state.resizeNotifier.notifyWindowResized();
     };
 

From 650b683761728c562b1f30cef7d72447c9e27d32 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 28 May 2021 10:31:42 +0100
Subject: [PATCH 4/4] Reposition sticky headers when layout has changed

---
 src/components/structures/LeftPanel.tsx    | 7 +++++++
 src/components/views/rooms/RoomList.tsx    | 2 ++
 src/components/views/rooms/RoomSublist.tsx | 4 ++++
 3 files changed, 13 insertions(+)

diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 8699c27fdc..7df4bcadf3 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -110,6 +110,12 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
     }
 
+    public componentDidUpdate(prevProps: IProps, prevState: IState): void {
+        if (prevState.activeSpace !== this.state.activeSpace) {
+            this.refreshStickyHeaders();
+        }
+    }
+
     private updateActiveSpace = (activeSpace: Room) => {
         this.setState({ activeSpace });
     };
@@ -429,6 +435,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             onBlur={this.onBlur}
             isMinimized={this.props.isMinimized}
             activeSpace={this.state.activeSpace}
+            onListCollapse={this.refreshStickyHeaders}
         />;
 
         const containerClasses = classNames({
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 896021f918..8b36341ed0 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -55,6 +55,7 @@ interface IProps {
     onKeyDown: (ev: React.KeyboardEvent) => void;
     onFocus: (ev: React.FocusEvent) => void;
     onBlur: (ev: React.FocusEvent) => void;
+    onListCollapse?: (isExpanded: boolean) => void;
     resizeNotifier: ResizeNotifier;
     isMinimized: boolean;
     activeSpace: Room;
@@ -538,6 +539,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     extraTiles={extraTiles}
                     resizeNotifier={this.props.resizeNotifier}
                     alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
+                    onListCollapse={this.props.onListCollapse}
                 />
             });
     }
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index eee93f6b01..df00524b3b 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -78,6 +78,7 @@ interface IProps {
     alwaysVisible?: boolean;
     resizeNotifier: ResizeNotifier;
     extraTiles?: ReactComponentElement<typeof ExtraTile>[];
+    onListCollapse?: (isExpanded: boolean) => void;
 
     // TODO: Account for https://github.com/vector-im/element-web/issues/14179
 }
@@ -472,6 +473,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     private toggleCollapsed = () => {
         this.layout.isCollapsed = this.state.isExpanded;
         this.setState({isExpanded: !this.layout.isCollapsed});
+        if (this.props.onListCollapse) {
+            this.props.onListCollapse(!this.layout.isCollapsed)
+        }
     };
 
     private onHeaderKeyDown = (ev: React.KeyboardEvent) => {