Fix sticky headers over/under extending themselves in the new room list

Fixes https://github.com/vector-im/riot-web/issues/14095

src/components/structures/LeftPanel2.tsx

@@ -19,7 +19,6 @@ import TagPanel from "./TagPanel";
 import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
-import SearchBox from "./SearchBox";
 import RoomList2 from "../views/rooms/RoomList2";
 import { Action } from "../../dispatcher/actions";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -30,6 +29,8 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import { createRef } from "react";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -41,6 +42,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 
 interface IProps {
     isMinimized: boolean;
+    resizeNotifier: ResizeNotifier;
 }
 
 interface IState {
@@ -49,6 +51,8 @@ interface IState {
 }
 
 export default class LeftPanel2 extends React.Component<IProps, IState> {
+    private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
+
     // TODO: Properly support TagPanel
     // TODO: Properly support searching/filtering
     // TODO: Properly support breadcrumbs
@@ -65,10 +69,15 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+
+        // We watch the middle panel because we don't actually get resized, the middle panel does.
+        // We listen to the noisy channel to avoid choppy reaction times.
+        this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
     }
 
     public componentWillUnmount() {
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
     }
 
     private onSearch = (term: string): void => {
@@ -86,9 +95,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         }
     };
 
-    // TODO: Apply this on resize, init, etc for reliability
-    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
-        const list = ev.target as HTMLDivElement;
+    private handleStickyHeaders(list: HTMLDivElement) {
         const rlRect = list.getBoundingClientRect();
         const bottom = rlRect.bottom;
         const top = rlRect.top;
@@ -123,6 +130,18 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 header.style.top = `unset`;
             }
         }
+    }
+
+    // TODO: Apply this on resize, init, etc for reliability
+    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
+        const list = ev.target as HTMLDivElement;
+        this.handleStickyHeaders(list);
+    };
+
+    private onResize = () => {
+        console.log("Resize width");
+        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
+        this.handleStickyHeaders(this.listContainerRef.current);
     };
 
     private renderHeader(): React.ReactNode {
@@ -230,9 +249,11 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel2_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
-                    <div className="mx_LeftPanel2_actualRoomListContainer" onScroll={this.onScroll}>
-                        {roomList}
-                    </div>
+                    <div
+                        className="mx_LeftPanel2_actualRoomListContainer"
+                        onScroll={this.onScroll}
+                        ref={this.listContainerRef}
+                    >{roomList}</div>
                 </aside>
             </div>
         );

src/components/structures/LoggedInView.tsx

@@ -677,7 +677,10 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
             // TODO: Supply props like collapsed and disabled to LeftPanel2
             leftPanel = (
-                <LeftPanel2 isMinimized={this.props.collapseLhs || false} />
+                <LeftPanel2
+                    isMinimized={this.props.collapseLhs || false}
+                    resizeNotifier={this.props.resizeNotifier}
+                />
             );
         }
 

src/utils/ResizeNotifier.js

@@ -15,9 +15,13 @@ limitations under the License.
 */
 
 /**
- * Fires when the middle panel has been resized.
+ * Fires when the middle panel has been resized (throttled).
  * @event module:utils~ResizeNotifier#"middlePanelResized"
  */
+/**
+ * Fires when the middle panel has been resized by a pixel.
+ * @event module:utils~ResizeNotifier#"middlePanelResizedNoisy"
+ */
 import { EventEmitter } from "events";
 import { throttle } from "lodash";
 
@@ -29,15 +33,24 @@ export default class ResizeNotifier extends EventEmitter {
         this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
     }
 
+    _noisyMiddlePanel() {
+        this.emit("middlePanelResizedNoisy");
+    }
+
+    _updateMiddlePanel() {
+        this._throttledMiddlePanel();
+        this._noisyMiddlePanel();
+    }
+
     // can be called in quick succession
     notifyLeftHandleResized() {
         // don't emit event for own region
-        this._throttledMiddlePanel();
+        this._updateMiddlePanel();
     }
 
     // can be called in quick succession
     notifyRightHandleResized() {
-        this._throttledMiddlePanel();
+        this._updateMiddlePanel();
     }
 
     // can be called in quick succession
@@ -48,7 +61,7 @@ export default class ResizeNotifier extends EventEmitter {
         // taller than the available space
         this.emit("leftPanelResized");
 
-        this._throttledMiddlePanel();
+        this._updateMiddlePanel();
     }
 }