Use the separator as border between roomlist and main panel (#33598)

* Remove border from roomlist container

The separator will act as the border so we no longer need the roomlist
border.

* Use pointer events to detect click event

Otherwise the onClick handler would run when you resize the panel.

* Support showing the border in separator

* Update tests

* Disable double click behaviour on separator

* Fix screenshot tests failing

apps/web/src/viewmodels/structures/ResizerViewModel.ts

@@ -47,8 +47,15 @@ export class ResizerViewModel
      */
     private panelHandle?: PanelImperativeHandle;
 
+    /**
+     * Needed to distinguish between a drag and a click on the separator.
+     */
+    private readonly mouseClickHandler: MouseClickHandler;
+
     public constructor() {
         super(undefined, getInitialState());
+        // Run onSeparatorClick when the separator is clicked.
+        this.mouseClickHandler = new MouseClickHandler(this.onSeparatorClick);
     }
 
     public onLeftPanelResize = debounce((panelSize: PanelSize): void => {
@@ -79,13 +86,25 @@ export class ResizerViewModel
         this.panelHandle = handle;
     };
 
-    public onSeparatorClick = (): void => {
+    private onSeparatorClick = (): void => {
         if (this.panelHandle?.isCollapsed()) {
             const lastSize = SettingsStore.getValue("RoomList.panelSize");
             this.panelHandle.resize(`${lastSize ?? 100}%`);
         }
     };
 
+    public onPointerUp = (): void => {
+        this.mouseClickHandler.onPointerUp();
+    };
+
+    public onPointerMove = (): void => {
+        this.mouseClickHandler.onPointerMove();
+    };
+
+    public onPointerDown = (): void => {
+        this.mouseClickHandler.onPointerDown();
+    };
+
     public onFocus = (): void => {
         /**
          * The intention here is to make the separator visible when it is focused by keyboard
@@ -108,3 +127,26 @@ export class ResizerViewModel
         this.snapshot.merge({ isFocusedViaKeyboard: false });
     };
 }
+
+/**
+ * Dragging the separator will emit a click event.
+ * This class uses pointer event handlers to distinguish between a drag and a click
+ * on the separator.
+ */
+class MouseClickHandler {
+    public constructor(private readonly onClick: () => void) {}
+
+    private isResize = false;
+
+    public onPointerUp = (): void => {
+        if (!this.isResize) this.onClick();
+    };
+
+    public onPointerDown = (): void => {
+        this.isResize = false;
+    };
+
+    public onPointerMove = (): void => {
+        this.isResize = true;
+    };
+}