From 27ee7c583656ec3e12cf4330d56647d86e6a3914 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 24 Jun 2021 17:51:11 +0100
Subject: [PATCH 01/34] Move backdrop filter to a canvas based solution

---
 res/css/structures/_LeftPanel.scss          |  1 -
 res/css/structures/_MatrixChat.scss         | 10 +++++
 res/css/structures/_SpacePanel.scss         |  1 +
 res/themes/light/css/_mods.scss             | 21 ---------
 src/components/structures/BackdropPanel.tsx | 50 +++++++++++++++++++++
 src/components/structures/LeftPanel.tsx     | 34 +++++---------
 src/components/structures/LoggedInView.tsx  | 19 +++++++-
 src/components/views/spaces/SpacePanel.tsx  | 25 ++++++++++-
 src/stores/OwnProfileStore.ts               | 17 +++++++
 9 files changed, 129 insertions(+), 49 deletions(-)
 create mode 100644 src/components/structures/BackdropPanel.tsx

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index c7dd678c076..d9db8b4fedb 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -43,7 +43,6 @@ $roomListCollapsedWidth: 68px;
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
-        background-color: $roomlist-bg-color;
         flex: 1 0 0;
         min-width: 0;
         // Create another flexbox (this time a column) for the room list components
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index a220c5d5052..2e5ffbcd821 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -35,6 +35,16 @@ limitations under the License.
     height: 100%;
 }
 
+.mx_BackdropPanel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+    z-index: 0;
+    opacity: .15;
+}
+
 .mx_MatrixToolbar {
     order: 1;
 
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index e64057d16c9..21c1bed18fb 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -27,6 +27,7 @@ $activeBorderColor: $secondary-fg-color;
     background-color: $groupFilterPanel-bg-color;
     padding: 0;
     margin: 0;
+    position: relative;
 
     // Create another flexbox so the Panel fills the container
     display: flex;
diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.scss
index fbca58dfb1e..15f6d4b0fe6 100644
--- a/res/themes/light/css/_mods.scss
+++ b/res/themes/light/css/_mods.scss
@@ -4,27 +4,6 @@
 // set the user avatar (if any) as a background so
 // it can be blurred by the tag panel and room list
 
-@supports (backdrop-filter: none) {
-    .mx_LeftPanel {
-        background-image: var(--avatar-url, unset);
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: left top;
-    }
-
-    .mx_GroupFilterPanel {
-        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
-    }
-
-    .mx_SpacePanel {
-        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
-    }
-
-    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
-        backdrop-filter: blur($roomlist-background-blur-amount);
-    }
-}
-
 .mx_RoomSublist_showNButton {
     background-color: transparent !important;
 }
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
new file mode 100644
index 00000000000..daaae418c47
--- /dev/null
+++ b/src/components/structures/BackdropPanel.tsx
@@ -0,0 +1,50 @@
+import React, { createRef } from "react";
+
+interface IProps {
+    width?: number;
+    height?: number;
+    backgroundImage?: ImageBitmap;
+    blur?: string;
+}
+
+
+export default class BackdropPanel extends React.PureComponent<IProps> {
+    private canvasRef: React.RefObject<HTMLCanvasElement> = createRef();
+    private ctx: CanvasRenderingContext2D;
+
+    static defaultProps = {
+        blur: "60px",
+    }
+
+    public componentDidMount() {
+        this.ctx = this.canvasRef.current.getContext("2d");
+    }
+
+    public componentDidUpdate() {
+        if (this.props.backgroundImage) {
+            requestAnimationFrame(this.refreshBackdropImage);
+        }
+    }
+
+    private refreshBackdropImage = (): void => {
+        const { width, height, backgroundImage } = this.props;
+        this.canvasRef.current.width = width;
+        this.canvasRef.current.height = height;
+
+        const destinationX = width - backgroundImage.width;
+        const destinationY = height - backgroundImage.height;
+
+        this.ctx.filter = `blur(${this.props.blur})`;
+        this.ctx.drawImage(
+            backgroundImage,
+            Math.min(destinationX, 0),
+            Math.min(destinationY, 0),
+            Math.max(width, backgroundImage.width),
+            Math.max(height, backgroundImage.height),
+        );
+    }
+
+    public render() {
+        return <canvas ref={this.canvasRef} className="mx_BackdropPanel" />;
+    }
+}
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index af22db13502..f71817480ed 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -36,18 +36,18 @@ import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import RoomListNumResults from "../views/rooms/RoomListNumResults";
 import LeftPanelWidget from "./LeftPanelWidget";
 import {replaceableComponent} from "../../utils/replaceableComponent";
-import {mediaFromMxc} from "../../customisations/Media";
 import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
+import BackdropPanel from "./BackdropPanel";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
+    backgroundImage?: ImageBitmap;
 }
 
 interface IState {
@@ -85,16 +85,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
         SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        this.bgImageWatcherRef = SettingsStore.watchSetting(
-            "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
         this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
             this.setState({showGroupFilterPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
         });
     }
 
     public componentDidMount() {
+        UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
         UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
         UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
         // Using the passive option to not block the main thread
@@ -104,10 +102,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     public componentWillUnmount() {
         SettingsStore.unwatchSetting(this.groupFilterPanelWatcherRef);
-        SettingsStore.unwatchSetting(this.bgImageWatcherRef);
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
         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("ListContainer");
         UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
@@ -144,23 +140,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     };
 
-    private onBackgroundImageUpdate = () => {
-        // Note: we do this in the LeftPanel as it uses this variable most prominently.
-        const avatarSize = 32; // arbitrary
-        let avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
-        const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
-        if (settingBgMxc) {
-            avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize);
-        }
-
-        const avatarUrlProp = `url(${avatarUrl})`;
-        if (!avatarUrl) {
-            document.body.style.removeProperty("--avatar-url");
-        } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
-            document.body.style.setProperty("--avatar-url", avatarUrlProp);
-        }
-    };
-
     private handleStickyHeaders(list: HTMLDivElement) {
         if (this.isDoingStickyHeaders) return;
         this.isDoingStickyHeaders = true;
@@ -453,8 +432,15 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             "mx_AutoHideScrollbar",
         );
 
+        const panelDimensions = UIStore.instance.getElementDimensions("LeftPanel");
+
         return (
             <div className={containerClasses} ref={this.ref}>
+                <BackdropPanel
+                    backgroundImage={this.props.backgroundImage}
+                    width={panelDimensions?.width}
+                    height={panelDimensions?.height}
+                />
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 5ad67232a43..da6163e6a9c 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -59,6 +59,10 @@ import {replaceableComponent} from "../../utils/replaceableComponent";
 import CallHandler, { CallHandlerEvent } from '../../CallHandler';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
+import { OwnProfileStore } from '../../stores/OwnProfileStore';
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import { mediaFromMxc } from "../../customisations/Media";
+
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -120,6 +124,7 @@ interface IState {
     usageLimitEventTs?: number;
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
+    backgroundImage?: ImageBitmap;
 }
 
 /**
@@ -198,6 +203,8 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.resizer = this._createResizer();
         this.resizer.attach();
         this._loadResizerPreferences();
+
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage);
     }
 
     componentWillUnmount() {
@@ -206,10 +213,17 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
+        OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
         SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
         this.resizer.detach();
     }
 
+    private refreshBackgroundImage = async (): Promise<void> => {
+        this.setState({
+            backgroundImage: await OwnProfileStore.instance.getAvatarBitmap(),
+        });
+    }
+
     private onCallsChanged = () => {
         this.setState({
             activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
@@ -633,10 +647,13 @@ class LoggedInView extends React.Component<IProps, IState> {
                 >
                     <ToastContainer />
                     <div ref={this._resizeContainer} className={bodyClasses}>
-                        { SettingsStore.getValue("feature_spaces") ? <SpacePanel /> : null }
+                        { SettingsStore.getValue("feature_spaces")
+                            ? <SpacePanel backgroundImage={this.state.backgroundImage} />
+                            : null }
                         <LeftPanel
                             isMinimized={this.props.collapseLhs || false}
                             resizeNotifier={this.props.resizeNotifier}
+                            backgroundImage={this.state.backgroundImage}
                         />
                         <ResizeHandle />
                         { pageElement }
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index b33fcf89151..7e8ba2bd3b9 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -43,6 +43,8 @@ import { Key } from "../../../Keyboard";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
 import SettingsStore from "../../../settings/SettingsStore";
+import BackdropPanel from "../../structures/BackdropPanel";
+import UIStore from "../../../stores/UIStore";
 
 interface IButtonProps {
     space?: Room;
@@ -178,7 +180,11 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
     </div>;
 });
 
-const SpacePanel = () => {
+interface IProps {
+    backgroundImage?: ImageBitmap;
+}
+
+const SpacePanel = (props: IProps) => {
     // We don't need the handle as we position the menu in a constant location
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<void>();
@@ -261,6 +267,15 @@ const SpacePanel = () => {
         openMenu();
     };
 
+    const ref: React.RefObject<HTMLUListElement> = useRef(null);
+    useEffect(() => {
+        UIStore.instance.trackElementDimensions("SpacePanel", ref.current);
+        return () => {
+            UIStore.instance.stopTrackingElementDimensions("SpacePanel");
+        }
+    }, []);
+    const panelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
+
     return (
         <DragDropContext onDragEnd={result => {
             if (!result.destination) return; // dropped outside the list
@@ -271,7 +286,13 @@ const SpacePanel = () => {
                     <ul
                         className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
                         onKeyDown={onKeyDownHandler}
+                        ref={ref}
                     >
+                        <BackdropPanel
+                            backgroundImage={props.backgroundImage}
+                            width={panelDimensions?.width}
+                            height={panelDimensions?.height}
+                        />
                         <Droppable droppableId="top-level-spaces">
                             {(provided, snapshot) => (
                                 <AutoHideScrollbar
diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts
index bb45456f1ec..aa5dd822adb 100644
--- a/src/stores/OwnProfileStore.ts
+++ b/src/stores/OwnProfileStore.ts
@@ -23,6 +23,7 @@ import { throttle } from "lodash";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { _t } from "../languageHandler";
 import {mediaFromMxc} from "../customisations/Media";
+import SettingsStore from "../settings/SettingsStore";
 
 interface IState {
     displayName?: string;
@@ -137,6 +138,22 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         await this.updateState({displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url});
     };
 
+    public async getAvatarBitmap(avatarSize = 32): Promise<ImageBitmap> {
+        let avatarUrl = this.getHttpAvatarUrl(avatarSize);
+        const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
+        if (settingBgMxc) {
+            avatarUrl = mediaFromMxc(settingBgMxc).getSquareThumbnailHttp(avatarSize);
+        }
+
+        if (avatarUrl) {
+            const response = await fetch(avatarUrl);
+            const blob = await response.blob();
+            return await createImageBitmap(blob);
+        } else {
+            return null;
+        }
+    }
+
     private onStateEvents = throttle(async (ev: MatrixEvent) => {
         const myUserId = MatrixClientPeg.get().getUserId();
         if (ev.getType() === 'm.room.member' && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {

From 652ad3617d52725bcaaae254a5f030b3bea9d02b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 09:20:03 +0100
Subject: [PATCH 02/34] Backdrop filter compatibility for Firefox and Safari

---
 package.json                                |  1 +
 res/css/structures/_LeftPanel.scss          |  1 +
 src/components/structures/BackdropPanel.tsx | 21 ++++++++++++------
 src/components/structures/LeftPanel.tsx     |  2 +-
 src/components/structures/LoggedInView.tsx  |  2 +-
 src/components/views/spaces/SpacePanel.tsx  |  2 +-
 src/stores/OwnProfileStore.ts               | 11 +++++-----
 src/utils/drawable.ts                       | 24 +++++++++++++++++++++
 yarn.lock                                   |  5 +++++
 9 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/drawable.ts

diff --git a/package.json b/package.json
index 6b369e9c277..60840fbe920 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "cheerio": "^1.0.0-rc.9",
     "classnames": "^2.2.6",
     "commonmark": "^0.29.3",
+    "context-filter-polyfill": "^0.2.4",
     "counterpart": "^0.18.6",
     "diff-dom": "^4.2.2",
     "diff-match-patch": "^1.0.5",
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index d9db8b4fedb..f5a27a2568d 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -26,6 +26,7 @@ $roomListCollapsedWidth: 68px;
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
     contain: content;
+    position: relative;
 
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index daaae418c47..c20845c4aec 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -1,9 +1,10 @@
 import React, { createRef } from "react";
+import "context-filter-polyfill";
 
 interface IProps {
     width?: number;
     height?: number;
-    backgroundImage?: ImageBitmap;
+    backgroundImage?: CanvasImageSource;
     blur?: string;
 }
 
@@ -31,20 +32,28 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         this.canvasRef.current.width = width;
         this.canvasRef.current.height = height;
 
-        const destinationX = width - backgroundImage.width;
-        const destinationY = height - backgroundImage.height;
+        const imageWidth = (backgroundImage as ImageBitmap).width
+            || (backgroundImage as HTMLImageElement).naturalWidth;
+        const imageHeight = (backgroundImage as ImageBitmap).height
+                || (backgroundImage as HTMLImageElement).naturalHeight;
+
+        const destinationX = width - imageWidth;
+        const destinationY = height - imageHeight;
 
         this.ctx.filter = `blur(${this.props.blur})`;
         this.ctx.drawImage(
             backgroundImage,
             Math.min(destinationX, 0),
             Math.min(destinationY, 0),
-            Math.max(width, backgroundImage.width),
-            Math.max(height, backgroundImage.height),
+            Math.max(width, imageWidth),
+            Math.max(height, imageHeight),
         );
     }
 
     public render() {
-        return <canvas ref={this.canvasRef} className="mx_BackdropPanel" />;
+        return <canvas
+            ref={this.canvasRef}
+            className="mx_BackdropPanel"
+        />;
     }
 }
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index f71817480ed..4b4d593fce5 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -47,7 +47,7 @@ import BackdropPanel from "./BackdropPanel";
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
-    backgroundImage?: ImageBitmap;
+    backgroundImage?: CanvasImageSource;
 }
 
 interface IState {
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index da6163e6a9c..371de3679bc 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -124,7 +124,7 @@ interface IState {
     usageLimitEventTs?: number;
     useCompactLayout: boolean;
     activeCalls: Array<MatrixCall>;
-    backgroundImage?: ImageBitmap;
+    backgroundImage?: CanvasImageSource;
 }
 
 /**
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 7e8ba2bd3b9..eeddc23588f 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -181,7 +181,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
 });
 
 interface IProps {
-    backgroundImage?: ImageBitmap;
+    backgroundImage?: CanvasImageSource;
 }
 
 const SpacePanel = (props: IProps) => {
diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts
index aa5dd822adb..3bbadad567d 100644
--- a/src/stores/OwnProfileStore.ts
+++ b/src/stores/OwnProfileStore.ts
@@ -19,11 +19,12 @@ import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { User } from "matrix-js-sdk/src/models/user";
-import { throttle } from "lodash";
+import { memoize, throttle } from "lodash";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { _t } from "../languageHandler";
 import {mediaFromMxc} from "../customisations/Media";
 import SettingsStore from "../settings/SettingsStore";
+import { getDrawable } from "../utils/drawable";
 
 interface IState {
     displayName?: string;
@@ -138,7 +139,7 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         await this.updateState({displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url});
     };
 
-    public async getAvatarBitmap(avatarSize = 32): Promise<ImageBitmap> {
+    public async getAvatarBitmap(avatarSize = 32): Promise<CanvasImageSource> {
         let avatarUrl = this.getHttpAvatarUrl(avatarSize);
         const settingBgMxc = SettingsStore.getValue("RoomList.backgroundImage");
         if (settingBgMxc) {
@@ -146,14 +147,14 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         }
 
         if (avatarUrl) {
-            const response = await fetch(avatarUrl);
-            const blob = await response.blob();
-            return await createImageBitmap(blob);
+            return await this.buildBitmap(avatarUrl);
         } else {
             return null;
         }
     }
 
+    private buildBitmap = memoize(getDrawable);
+
     private onStateEvents = throttle(async (ev: MatrixEvent) => {
         const myUserId = MatrixClientPeg.get().getUserId();
         if (ev.getType() === 'm.room.member' && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {
diff --git a/src/utils/drawable.ts b/src/utils/drawable.ts
new file mode 100644
index 00000000000..b6e6af2e32c
--- /dev/null
+++ b/src/utils/drawable.ts
@@ -0,0 +1,24 @@
+/**
+ * Fetch an image using the best available method based on browser compatibility
+ * @param url the URL of the image to fetch
+ * @returns a canvas drawable object
+ */
+export async function getDrawable(url: string): Promise<CanvasImageSource> {
+    if ('createImageBitmap' in window) {
+        const response = await fetch(url);
+        const blob = await response.blob();
+        return await createImageBitmap(blob);
+    } else {
+        return new Promise((resolve, reject) => {
+            const img = document.createElement("img");
+            img.crossOrigin = "anonymous";
+            img.onload = function() {
+                resolve(img);
+            }
+            img.onerror = function(e) {
+                reject(e);
+            }
+            img.src = url;
+        });
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 32ca30a9961..4584604cef8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2652,6 +2652,11 @@ content-type@^1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+context-filter-polyfill@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/context-filter-polyfill/-/context-filter-polyfill-0.2.4.tgz#ecf88d3197e7c3a47e9a7ae2d5167b703945a5d4"
+  integrity sha512-LDZ3WiTzo6kIeJM7j8kPSgZf+gbD1cV1GaLyYO8RWvAg25cO3zUo3d2KizO0w9hAezNwz7tTbuWKpPdvLWzKqQ==
+
 convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"

From e628cac06b76ae3c8a29ee787a91c0a200a8c1fe Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 09:36:12 +0100
Subject: [PATCH 03/34] Improve image drawing fill strategy

---
 src/components/structures/BackdropPanel.tsx | 24 +++++++++++++++------
 src/components/structures/LoggedInView.tsx  |  1 -
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index c20845c4aec..4da8543452c 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -37,16 +37,28 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         const imageHeight = (backgroundImage as ImageBitmap).height
                 || (backgroundImage as HTMLImageElement).naturalHeight;
 
-        const destinationX = width - imageWidth;
-        const destinationY = height - imageHeight;
+        const contentRatio = imageWidth / imageHeight;
+        const containerRatio = width / height;
+        let resultHeight;
+        let resultWidth;
+        if (contentRatio > containerRatio) {
+            resultHeight = height;
+            resultWidth = height * contentRatio;
+        } else {
+            resultWidth = width;
+            resultHeight = width / contentRatio;
+        }
+
+        const x = (width - resultWidth) / 2;
+        const y = (height - resultHeight) / 2;
 
         this.ctx.filter = `blur(${this.props.blur})`;
         this.ctx.drawImage(
             backgroundImage,
-            Math.min(destinationX, 0),
-            Math.min(destinationY, 0),
-            Math.max(width, imageWidth),
-            Math.max(height, imageHeight),
+            x,
+            y,
+            resultWidth,
+            resultHeight,
         );
     }
 
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 371de3679bc..534e8e0df54 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -61,7 +61,6 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
 import { OwnProfileStore } from '../../stores/OwnProfileStore';
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import { mediaFromMxc } from "../../customisations/Media";
 
 
 // We need to fetch each pinned message individually (if we don't already have it)

From 31a363d03b27de18ea77d57b23e1603d72d046ec Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 10:49:28 +0100
Subject: [PATCH 04/34] mock canvas filter polyfill in tests

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2478060a57d..3e7ee56346a 100644
--- a/package.json
+++ b/package.json
@@ -186,7 +186,8 @@
       "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
       "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
       "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
-      "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js"
+      "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+      "context-filter-polyfill": "<rootDir>/__mocks__/empty.js"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"

From bf89aa909e2bbb055c98755896ec765cf020a165 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 11:46:38 +0100
Subject: [PATCH 05/34] Add BackdropPanel copyright header

---
 src/components/structures/BackdropPanel.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 4da8543452c..ddfba98dad1 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import React, { createRef } from "react";
 import "context-filter-polyfill";
 

From a17b13f83a27f6d809edd787249f1ea6df0a5f3c Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 11:47:33 +0100
Subject: [PATCH 06/34] Add drawable copyright header

---
 src/components/structures/BackdropPanel.tsx |  2 +-
 src/utils/drawable.ts                       | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index ddfba98dad1..940f0dae9bb 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -26,7 +26,7 @@ interface IProps {
 
 
 export default class BackdropPanel extends React.PureComponent<IProps> {
-    private canvasRef: React.RefObject<HTMLCanvasElement> = createRef();
+    private canvasRef = createRef<HTMLCanvasElement>();
     private ctx: CanvasRenderingContext2D;
 
     static defaultProps = {
diff --git a/src/utils/drawable.ts b/src/utils/drawable.ts
index b6e6af2e32c..fe45549f7f8 100644
--- a/src/utils/drawable.ts
+++ b/src/utils/drawable.ts
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 /**
  * Fetch an image using the best available method based on browser compatibility
  * @param url the URL of the image to fetch

From 533d5ad664d043c0d2e754e9c3550ed720070ab1 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 11:49:24 +0100
Subject: [PATCH 07/34] Specify return type for drawable promise

---
 src/utils/drawable.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/drawable.ts b/src/utils/drawable.ts
index fe45549f7f8..2b377747f71 100644
--- a/src/utils/drawable.ts
+++ b/src/utils/drawable.ts
@@ -25,7 +25,7 @@ export async function getDrawable(url: string): Promise<CanvasImageSource> {
         const blob = await response.blob();
         return await createImageBitmap(blob);
     } else {
-        return new Promise((resolve, reject) => {
+        return new Promise<HTMLImageElement>((resolve, reject) => {
             const img = document.createElement("img");
             img.crossOrigin = "anonymous";
             img.onload = function() {

From 5932b93325dca5e82557a2ba6014bf5c0077a01e Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 25 Jun 2021 14:09:49 +0100
Subject: [PATCH 08/34] make backdrop closer to what is happening in production

---
 res/css/structures/_GroupFilterPanel.scss     |  2 +-
 res/css/structures/_MatrixChat.scss           |  2 +-
 src/components/structures/BackdropPanel.tsx   |  5 +++++
 src/components/structures/GroupFilterPanel.js | 17 +++++++++++++++--
 src/components/structures/LeftPanel.tsx       |  2 +-
 src/components/views/spaces/SpacePanel.tsx    |  1 +
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
index 444435dd572..f7c70ec7698 100644
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_GroupFilterPanel {
     flex: 1;
-    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
+    position: relative;
 
     display: flex;
     flex-direction: column;
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 2e5ffbcd821..ca470e6cb42 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -42,7 +42,7 @@ limitations under the License.
     width: 100%;
     min-height: 100%;
     z-index: 0;
-    opacity: .15;
+    pointer-events: none;
 }
 
 .mx_MatrixToolbar {
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 940f0dae9bb..741f8109bfd 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -22,6 +22,7 @@ interface IProps {
     height?: number;
     backgroundImage?: CanvasImageSource;
     blur?: string;
+    opacity?: number;
 }
 
 
@@ -31,6 +32,7 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
 
     static defaultProps = {
         blur: "60px",
+        opacity: .15,
     }
 
     public componentDidMount() {
@@ -82,6 +84,9 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         return <canvas
             ref={this.canvasRef}
             className="mx_BackdropPanel"
+            style={{
+                opacity: this.props.opacity,
+            }}
         />;
     }
 }
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index f1c28d588ae..eee09a2cf8b 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -29,7 +29,9 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
-import {replaceableComponent} from "../../utils/replaceableComponent";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import BackdropPanel from "./BackdropPanel";
+import UIStore from "../../stores/UIStore";
 
 @replaceableComponent("structures.GroupFilterPanel")
 class GroupFilterPanel extends React.Component {
@@ -40,6 +42,8 @@ class GroupFilterPanel extends React.Component {
         selectedTags: [],
     };
 
+    ref = React.createRef()
+
     componentDidMount() {
         this.unmounted = false;
         this.context.on("Group.myMembership", this._onGroupMyMembership);
@@ -56,6 +60,7 @@ class GroupFilterPanel extends React.Component {
         });
         // This could be done by anything with a matrix client
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
+        UIStore.instance.trackElementDimensions("GroupPanel", this.ref.current);
     }
 
     componentWillUnmount() {
@@ -65,6 +70,7 @@ class GroupFilterPanel extends React.Component {
         if (this._groupFilterOrderStoreToken) {
             this._groupFilterOrderStoreToken.remove();
         }
+        UIStore.instance.stopTrackingElementDimensions("GroupPanel");
     }
 
     _onGroupMyMembership = () => {
@@ -147,7 +153,14 @@ class GroupFilterPanel extends React.Component {
             );
         }
 
-        return <div className={classes} onClick={this.onClearFilterClick}>
+        const panelDimensions = UIStore.instance.getElementDimensions("GroupPanel");
+
+        return <div className={classes} onClick={this.onClearFilterClick} ref={this.ref}>
+            <BackdropPanel
+                backgroundImage={this.props.backgroundImage}
+                width={panelDimensions?.width}
+                height={panelDimensions?.height}
+            />
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
                 onClick={this.onClick}
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 4b4d593fce5..f382ebbdf28 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -405,7 +405,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
-                    <GroupFilterPanel />
+                    <GroupFilterPanel backgroundImage={this.props.backgroundImage} />
                     {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
                 </div>
             );
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index eeddc23588f..f0c3d9ead35 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -292,6 +292,7 @@ const SpacePanel = (props: IProps) => {
                             backgroundImage={props.backgroundImage}
                             width={panelDimensions?.width}
                             height={panelDimensions?.height}
+                            opacity={.3}
                         />
                         <Droppable droppableId="top-level-spaces">
                             {(provided, snapshot) => (

From 7e6d3780ce312bf42a03bfd12ae02cc8527a0afc Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 6 Jul 2021 14:00:43 +0200
Subject: [PATCH 09/34] Update benchmark action for lockfile diff

---
 .github/workflows/develop.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
index 3c3807e33b4..4af34f5f771 100644
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@@ -29,7 +29,7 @@ jobs:
                 path: ./cache
                 key: ${{ runner.os }}-benchmark
             - name: Store benchmark result
-              uses: matrix-org/github-action-benchmark@jsperfentry-1
+              uses: matrix-org/github-action-benchmark@jsperfentry-3
               with:
                 tool: 'jsperformanceentry'
                 output-file-path: test/end-to-end-tests/performance-entries.json

From dc17bfe59893665f90e5ef8e4c46b08c53f7bf05 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 6 Jul 2021 14:37:39 +0200
Subject: [PATCH 10/34] Update benchmark action for lockfile diff

---
 .github/workflows/develop.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
index 4af34f5f771..2bd2aebc8c9 100644
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@@ -29,7 +29,7 @@ jobs:
                 path: ./cache
                 key: ${{ runner.os }}-benchmark
             - name: Store benchmark result
-              uses: matrix-org/github-action-benchmark@jsperfentry-3
+              uses: matrix-org/github-action-benchmark@jsperfentry-4
               with:
                 tool: 'jsperformanceentry'
                 output-file-path: test/end-to-end-tests/performance-entries.json

From d6c3a22a253705d0d65fa900321d33f1aad01634 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 6 Jul 2021 15:10:33 +0200
Subject: [PATCH 11/34] fix lockfiles

---
 .github/workflows/develop.yml |  2 +-
 yarn.lock                     | 27 +++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
index 2bd2aebc8c9..3c3807e33b4 100644
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@@ -29,7 +29,7 @@ jobs:
                 path: ./cache
                 key: ${{ runner.os }}-benchmark
             - name: Store benchmark result
-              uses: matrix-org/github-action-benchmark@jsperfentry-4
+              uses: matrix-org/github-action-benchmark@jsperfentry-1
               with:
                 tool: 'jsperformanceentry'
                 output-file-path: test/end-to-end-tests/performance-entries.json
diff --git a/yarn.lock b/yarn.lock
index 9a332421a41..55119b4ad63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1677,6 +1677,11 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/retry@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
+
 "@types/sanitize-html@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.3.1.tgz#094d696b83b7394b016e96342bbffa6a028795ce"
@@ -5450,10 +5455,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-matrix-js-sdk@12.0.0:
-  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.0.tgz#8ee7cc37661476341d0c792a1a12bc78b19f9fdd"
-  integrity sha512-DHeq87Sx9Dv37FYyvZkmA1VYsQUNaVgc3QzMUkFwoHt1T4EZzgyYpdsp3uYruJzUW0ACvVJcwFdrU4e1VS97dQ==
+matrix-js-sdk@12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.0.1.tgz#3a63881f743420a4d39474daa39bd0fb90930d43"
+  integrity sha512-HkOWv8QHojceo3kPbC+vAIFUjsRAig6MBvEY35UygS3g2dL0UcJ5Qx09/2wcXtu6dowlDnWsz2HHk62tS2cklA==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
@@ -5461,6 +5466,7 @@ matrix-js-sdk@12.0.0:
     bs58 "^4.0.1"
     content-type "^1.0.4"
     loglevel "^1.7.1"
+    p-retry "^4.5.0"
     qs "^6.9.6"
     request "^2.88.2"
     unhomoglyph "^1.0.6"
@@ -6012,6 +6018,14 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-retry@^4.5.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.0.tgz#9de15ae696278cffe86fce2d8f73b7f894f8bc9e"
+  integrity sha512-SAHbQEwg3X5DRNaLmWjT+DlGc93ba5i+aP3QLfVNDncQEQO4xjbYW4N/lcVTSuP0aJietGfx2t94dJLzfBMpXw==
+  dependencies:
+    "@types/retry" "^0.12.0"
+    retry "^0.13.1"
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -6821,6 +6835,11 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+retry@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
+  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"

From 8f345dc1ba7db00f0187919ae088128165c094f6 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Mon, 12 Jul 2021 13:51:46 +0200
Subject: [PATCH 12/34] Rework backdrop to draw one image with two different
 level of blur

---
 res/css/structures/_LeftPanel.scss            |   1 -
 res/css/structures/_MatrixChat.scss           |   4 +-
 res/css/structures/_SpacePanel.scss           |   1 -
 src/components/structures/BackdropPanel.tsx   | 106 +++++++++++++-----
 src/components/structures/GroupFilterPanel.js |   8 --
 src/components/structures/LeftPanel.tsx       |  11 +-
 src/components/structures/LoggedInView.tsx    |   7 +-
 src/components/views/spaces/SpacePanel.tsx    |  12 +-
 8 files changed, 89 insertions(+), 61 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 9cfe78d5462..4bd6b1e816e 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -18,7 +18,6 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
 $roomListCollapsedWidth: 68px;
 
 .mx_LeftPanel {
-    background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
     max-width: 50%;
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index ca470e6cb42..77dc5f44542 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -39,10 +39,10 @@ limitations under the License.
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
     min-height: 100%;
     z-index: 0;
     pointer-events: none;
+    overflow: hidden;
 }
 
 .mx_MatrixToolbar {
@@ -76,7 +76,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(canvas) {
     background-color: $primary-bg-color;
 
     flex: 1 1 0;
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 21c1bed18fb..619c127f7b3 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -24,7 +24,6 @@ $activeBorderColor: $secondary-fg-color;
 
 .mx_SpacePanel {
     flex: 0 0 auto;
-    background-color: $groupFilterPanel-bg-color;
     padding: 0;
     margin: 0;
     position: relative;
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 61c8509adb6..5493fff3a60 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -17,25 +17,44 @@ limitations under the License.
 import React, { createRef } from "react";
 import "context-filter-polyfill";
 
+import UIStore from "../../stores/UIStore";
+
 interface IProps {
-    width?: number;
-    height?: number;
     backgroundImage?: CanvasImageSource;
-    blur?: string;
-    opacity?: number;
 }
 
-export default class BackdropPanel extends React.PureComponent<IProps> {
-    private canvasRef = createRef<HTMLCanvasElement>();
-    private ctx: CanvasRenderingContext2D;
+interface IState {
+    spacePanelWidth: number;
+    roomListWidth: number;
+    viewportHeight: number;
+}
+
+export default class BackdropPanel extends React.PureComponent<IProps, IState> {
+    private spacesCanvasRef = createRef<HTMLCanvasElement>();
+    private roomListCanvasRef = createRef<HTMLCanvasElement>();
 
-    static defaultProps = {
-        blur: "60px",
-        opacity: .15,
-    };
+    private spacesCtx: CanvasRenderingContext2D;
+    private roomListCtx: CanvasRenderingContext2D;
+
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            spacePanelWidth: 0,
+            roomListWidth: 0,
+            viewportHeight: UIStore.instance.windowHeight,
+        };
+    }
 
     public componentDidMount() {
-        this.ctx = this.canvasRef.current.getContext("2d");
+        this.spacesCtx = this.spacesCanvasRef.current.getContext("2d");
+        this.roomListCtx = this.roomListCanvasRef.current.getContext("2d");
+        UIStore.instance.on("SpacePanel", this.onResize);
+        UIStore.instance.on("LeftPanel", this.onResize);
+    }
+
+    public componentWillUnmount() {
+        UIStore.instance.off("SpacePanel", this.onResize);
+        UIStore.instance.off("LeftPanel", this.onResize);
     }
 
     public componentDidUpdate() {
@@ -44,15 +63,25 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         }
     }
 
+    private onResize = () => {
+        const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
+        const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
+        this.setState({
+            spacePanelWidth: spacePanelDimensions ? spacePanelDimensions.width : 0,
+            roomListWidth: roomListDimensions ? roomListDimensions.width : 0,
+            viewportHeight: UIStore.instance.windowHeight,
+        });
+    };
+
     private refreshBackdropImage = (): void => {
-        const { width, height, backgroundImage } = this.props;
-        this.canvasRef.current.width = width;
-        this.canvasRef.current.height = height;
+        const width = this.state.spacePanelWidth + this.state.roomListWidth;
+        const height = this.state.viewportHeight;
+        const { backgroundImage } = this.props;
 
         const imageWidth = (backgroundImage as ImageBitmap).width
-            || (backgroundImage as HTMLImageElement).naturalWidth;
+        || (backgroundImage as HTMLImageElement).naturalWidth;
         const imageHeight = (backgroundImage as ImageBitmap).height
-                || (backgroundImage as HTMLImageElement).naturalHeight;
+        || (backgroundImage as HTMLImageElement).naturalHeight;
 
         const contentRatio = imageWidth / imageHeight;
         const containerRatio = width / height;
@@ -69,23 +98,48 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         const x = (width - resultWidth) / 2;
         const y = (height - resultHeight) / 2;
 
-        this.ctx.filter = `blur(${this.props.blur})`;
-        this.ctx.drawImage(
+        this.spacesCanvasRef.current.width = this.state.spacePanelWidth;
+        this.spacesCanvasRef.current.height = this.state.viewportHeight;
+        this.roomListCanvasRef.current.width = this.state.roomListWidth;
+        this.roomListCanvasRef.current.height = this.state.viewportHeight;
+
+        this.spacesCtx.filter = `blur(30px)`;
+        this.roomListCtx.filter = `blur(60px)`;
+        this.spacesCtx.drawImage(
             backgroundImage,
             x,
             y,
             resultWidth,
             resultHeight,
         );
+        this.roomListCtx.drawImage(
+            backgroundImage,
+            0, 0,
+            imageWidth, imageHeight,
+            x - this.state.spacePanelWidth,
+            y,
+            resultWidth,
+            resultHeight,
+        );
     };
 
     public render() {
-        return <canvas
-            ref={this.canvasRef}
-            className="mx_BackdropPanel"
-            style={{
-                opacity: this.props.opacity,
-            }}
-        />;
+        return <>
+            <canvas
+                ref={this.spacesCanvasRef}
+                className="mx_BackdropPanel"
+                style={{
+                    opacity: .15,
+                }}
+            />
+            <canvas
+                style={{
+                    transform: `translateX(${this.state.spacePanelWidth}px)`,
+                    opacity: .1,
+                }}
+                ref={this.roomListCanvasRef}
+                className="mx_BackdropPanel"
+            />
+        </>;
     }
 }
diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.js
index 98ce3684c85..348e1fe4978 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.js
@@ -30,7 +30,6 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
 import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import BackdropPanel from "./BackdropPanel";
 import UIStore from "../../stores/UIStore";
 
 @replaceableComponent("structures.GroupFilterPanel")
@@ -153,14 +152,7 @@ class GroupFilterPanel extends React.Component {
             );
         }
 
-        const panelDimensions = UIStore.instance.getElementDimensions("GroupPanel");
-
         return <div className={classes} onClick={this.onClearFilterClick} ref={this.ref}>
-            <BackdropPanel
-                backgroundImage={this.props.backgroundImage}
-                width={panelDimensions?.width}
-                height={panelDimensions?.height}
-            />
             <AutoHideScrollbar
                 className="mx_GroupFilterPanel_scroller"
                 onClick={this.onClick}
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 09d51b37321..0e9b032fdb3 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -43,12 +43,10 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore";
 import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
-import BackdropPanel from "./BackdropPanel";
 
 interface IProps {
     isMinimized: boolean;
     resizeNotifier: ResizeNotifier;
-    backgroundImage?: CanvasImageSource;
 }
 
 interface IState {
@@ -426,7 +424,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
                 <div className="mx_LeftPanel_GroupFilterPanelContainer">
-                    <GroupFilterPanel backgroundImage={this.props.backgroundImage} />
+                    <GroupFilterPanel />
                     {SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null}
                 </div>
             );
@@ -453,15 +451,8 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             "mx_AutoHideScrollbar",
         );
 
-        const panelDimensions = UIStore.instance.getElementDimensions("LeftPanel");
-
         return (
             <div className={containerClasses} ref={this.ref}>
-                <BackdropPanel
-                    backgroundImage={this.props.backgroundImage}
-                    width={panelDimensions?.width}
-                    height={panelDimensions?.height}
-                />
                 {leftLeftPanel}
                 <aside className="mx_LeftPanel_roomListContainer">
                     {this.renderHeader()}
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 5706e2e0321..9fa3fac9f49 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -65,6 +65,7 @@ import ToastContainer from './ToastContainer';
 import MyGroups from "./MyGroups";
 import UserView from "./UserView";
 import GroupView from "./GroupView";
+import BackdropPanel from "./BackdropPanel";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -643,13 +644,15 @@ class LoggedInView extends React.Component<IProps, IState> {
                 >
                     <ToastContainer />
                     <div ref={this._resizeContainer} className={bodyClasses}>
+                        <BackdropPanel
+                            backgroundImage={this.state.backgroundImage}
+                        />
                         { SettingsStore.getValue("feature_spaces")
-                            ? <SpacePanel backgroundImage={this.state.backgroundImage} />
+                            ? <SpacePanel />
                             : null }
                         <LeftPanel
                             isMinimized={this.props.collapseLhs || false}
                             resizeNotifier={this.props.resizeNotifier}
-                            backgroundImage={this.state.backgroundImage}
                         />
                         <ResizeHandle />
                         { pageElement }
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 2fd75f062ca..34aad4e0dda 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -43,7 +43,6 @@ import { Key } from "../../../Keyboard";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
 import SettingsStore from "../../../settings/SettingsStore";
-import BackdropPanel from "../../structures/BackdropPanel";
 import UIStore from "../../../stores/UIStore";
 
 interface IButtonProps {
@@ -180,9 +179,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
     </div>;
 });
 
-interface IProps {
-    backgroundImage?: CanvasImageSource;
-}
+interface IProps {}
 
 const SpacePanel = (props: IProps) => {
     // We don't need the handle as we position the menu in a constant location
@@ -274,7 +271,6 @@ const SpacePanel = (props: IProps) => {
             UIStore.instance.stopTrackingElementDimensions("SpacePanel");
         };
     }, []);
-    const panelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
 
     return (
         <DragDropContext onDragEnd={result => {
@@ -288,12 +284,6 @@ const SpacePanel = (props: IProps) => {
                         onKeyDown={onKeyDownHandler}
                         ref={ref}
                     >
-                        <BackdropPanel
-                            backgroundImage={props.backgroundImage}
-                            width={panelDimensions?.width}
-                            height={panelDimensions?.height}
-                            opacity={.3}
-                        />
                         <Droppable droppableId="top-level-spaces">
                             {(provided, snapshot) => (
                                 <AutoHideScrollbar

From 7f58a21aac4797825b6fb22593fc15df70d6fb8c Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Fri, 13 Aug 2021 18:12:02 +0200
Subject: [PATCH 13/34] Improve BackdropPanel performance by ignoring React

---
 src/components/structures/BackdropPanel.tsx | 70 ++++++++++++---------
 src/components/views/spaces/SpacePanel.tsx  | 10 ++-
 2 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 5493fff3a60..9f4d6399689 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -23,26 +23,22 @@ interface IProps {
     backgroundImage?: CanvasImageSource;
 }
 
-interface IState {
-    spacePanelWidth: number;
-    roomListWidth: number;
-    viewportHeight: number;
-}
-
-export default class BackdropPanel extends React.PureComponent<IProps, IState> {
+export default class BackdropPanel extends React.PureComponent<IProps> {
     private spacesCanvasRef = createRef<HTMLCanvasElement>();
     private roomListCanvasRef = createRef<HTMLCanvasElement>();
 
     private spacesCtx: CanvasRenderingContext2D;
     private roomListCtx: CanvasRenderingContext2D;
 
+    private sizes = {
+        spacePanelWidth: 0,
+        roomListWidth: 0,
+        height: 0,
+    };
+    private currentFrame?: number;
+
     constructor(props: IProps) {
         super(props);
-        this.state = {
-            spacePanelWidth: 0,
-            roomListWidth: 0,
-            viewportHeight: UIStore.instance.windowHeight,
-        };
     }
 
     public componentDidMount() {
@@ -52,30 +48,41 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
         UIStore.instance.on("LeftPanel", this.onResize);
     }
 
-    public componentWillUnmount() {
-        UIStore.instance.off("SpacePanel", this.onResize);
-        UIStore.instance.off("LeftPanel", this.onResize);
-    }
-
     public componentDidUpdate() {
         if (this.props.backgroundImage) {
-            requestAnimationFrame(this.refreshBackdropImage);
+            this.refreshBackdropImage();
         }
     }
 
+    public componentWillUnmount() {
+        UIStore.instance.off("SpacePanel", this.onResize);
+        UIStore.instance.off("LeftPanel", this.onResize);
+    }
+
     private onResize = () => {
         const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
         const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
-        this.setState({
-            spacePanelWidth: spacePanelDimensions ? spacePanelDimensions.width : 0,
-            roomListWidth: roomListDimensions ? roomListDimensions.width : 0,
-            viewportHeight: UIStore.instance.windowHeight,
-        });
+        this.sizes = {
+            spacePanelWidth: spacePanelDimensions?.width ?? 0,
+            roomListWidth: roomListDimensions?.width ?? 0,
+            height: UIStore.instance.windowHeight,
+        };
+        if (this.props.backgroundImage) {
+            this.refreshBackdropImage();
+        }
+    };
+
+    private animate = () => {
+        if (this.currentFrame !== undefined) {
+            cancelAnimationFrame(this.currentFrame);
+            this.currentFrame = undefined;
+        }
+        this.currentFrame = requestAnimationFrame(this.refreshBackdropImage);
     };
 
     private refreshBackdropImage = (): void => {
-        const width = this.state.spacePanelWidth + this.state.roomListWidth;
-        const height = this.state.viewportHeight;
+        const { spacePanelWidth, roomListWidth, height } = this.sizes;
+        const width = spacePanelWidth + roomListWidth;
         const { backgroundImage } = this.props;
 
         const imageWidth = (backgroundImage as ImageBitmap).width
@@ -98,10 +105,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
         const x = (width - resultWidth) / 2;
         const y = (height - resultHeight) / 2;
 
-        this.spacesCanvasRef.current.width = this.state.spacePanelWidth;
-        this.spacesCanvasRef.current.height = this.state.viewportHeight;
-        this.roomListCanvasRef.current.width = this.state.roomListWidth;
-        this.roomListCanvasRef.current.height = this.state.viewportHeight;
+        this.spacesCanvasRef.current.width = spacePanelWidth;
+        this.spacesCanvasRef.current.height = height;
+        this.roomListCanvasRef.current.width = roomListWidth;
+        this.roomListCanvasRef.current.height = height;
+        this.roomListCanvasRef.current.style.transform = `translateX(${spacePanelWidth}px)`;
 
         this.spacesCtx.filter = `blur(30px)`;
         this.roomListCtx.filter = `blur(60px)`;
@@ -116,7 +124,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
-            x - this.state.spacePanelWidth,
+            x - spacePanelWidth,
             y,
             resultWidth,
             resultHeight,
@@ -134,7 +142,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             />
             <canvas
                 style={{
-                    transform: `translateX(${this.state.spacePanelWidth}px)`,
+                    transform: `translateX(0)`,
                     opacity: .1,
                 }}
                 ref={this.roomListCanvasRef}
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 53998e334f0..2fa08e21086 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, Dispatch, ReactNode, SetStateAction, useEffect, useState } from "react";
+import React, { ComponentProps, Dispatch, ReactNode, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -42,8 +42,8 @@ import IconizedContextMenu, {
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
 import SettingsStore from "../../../settings/SettingsStore";
-import UIStore from "../../../stores/UIStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
+import UIStore from "../../../stores/UIStore";
 
 const useSpaces = (): [Room[], Room[], Room | null] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -207,6 +207,11 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
 
 const SpacePanel = () => {
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
+    const ref = useRef<HTMLUListElement>();
+    useLayoutEffect(() => {
+        UIStore.instance.trackElementDimensions("SpacePanel", ref.current);
+        return () => UIStore.instance.stopTrackingElementDimensions("SpacePanel");
+    }, []);
 
     const onKeyDown = (ev: React.KeyboardEvent) => {
         let handled = true;
@@ -281,6 +286,7 @@ const SpacePanel = () => {
                         onKeyDown={onKeyDownHandler}
                         role="tree"
                         aria-label={_t("Spaces")}
+                        ref={ref}
                     >
                         <Droppable droppableId="top-level-spaces">
                             { (provided, snapshot) => (

From 94a5013beb1b1118eebe6347f5fa58b8c35c7833 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Fri, 13 Aug 2021 19:03:20 +0200
Subject: [PATCH 14/34] temp

---
 res/themes/dark/css/_dark.scss              |  6 +-
 res/themes/light/css/_light.scss            |  7 ++-
 src/components/structures/BackdropPanel.tsx | 69 ++++++++++-----------
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 8c305b9828b..53cba6f4400 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -239,8 +239,10 @@ $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
-$roomlist-background-blur-amount: 60px;
-$groupFilterPanel-background-blur-amount: 30px;
+:root {
+    --roomlist-background-blur-amount: 60px;
+    --groupFilterPanel-background-blur-amount: 30px;
+}
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index e64fe12d3b9..4978edee556 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -362,9 +362,10 @@ $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
-$roomlist-background-blur-amount: 40px;
-$groupFilterPanel-background-blur-amount: 20px;
-
+:root {
+    --roomlist-background-blur-amount: 40px;
+    --groupFilterPanel-background-blur-amount: 20px;
+}
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
 // Bubble tiles
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 9f4d6399689..12428354501 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -27,31 +27,21 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
     private spacesCanvasRef = createRef<HTMLCanvasElement>();
     private roomListCanvasRef = createRef<HTMLCanvasElement>();
 
-    private spacesCtx: CanvasRenderingContext2D;
-    private roomListCtx: CanvasRenderingContext2D;
-
     private sizes = {
         spacePanelWidth: 0,
         roomListWidth: 0,
         height: 0,
     };
-    private currentFrame?: number;
+    private style = getComputedStyle(document.documentElement);
 
     constructor(props: IProps) {
         super(props);
     }
 
     public componentDidMount() {
-        this.spacesCtx = this.spacesCanvasRef.current.getContext("2d");
-        this.roomListCtx = this.roomListCanvasRef.current.getContext("2d");
         UIStore.instance.on("SpacePanel", this.onResize);
         UIStore.instance.on("LeftPanel", this.onResize);
-    }
-
-    public componentDidUpdate() {
-        if (this.props.backgroundImage) {
-            this.refreshBackdropImage();
-        }
+        this.onResize();
     }
 
     public componentWillUnmount() {
@@ -59,28 +49,31 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         UIStore.instance.off("LeftPanel", this.onResize);
     }
 
-    private onResize = () => {
-        const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
-        const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
-        this.sizes = {
-            spacePanelWidth: spacePanelDimensions?.width ?? 0,
-            roomListWidth: roomListDimensions?.width ?? 0,
-            height: UIStore.instance.windowHeight,
-        };
+    public componentDidUpdate(prevProps: IProps) {
         if (this.props.backgroundImage) {
-            this.refreshBackdropImage();
+            this.onResize();
         }
-    };
+        if (prevProps.backgroundImage && !this.props.backgroundImage) {
+            this.forceUpdate();
+        }
+    }
 
-    private animate = () => {
-        if (this.currentFrame !== undefined) {
-            cancelAnimationFrame(this.currentFrame);
-            this.currentFrame = undefined;
+    private onResize = () => {
+        if (this.props.backgroundImage) {
+            const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
+            const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
+            this.sizes = {
+                spacePanelWidth: spacePanelDimensions?.width ?? 0,
+                roomListWidth: roomListDimensions?.width ?? 0,
+                height: UIStore.instance.windowHeight,
+            };
+            this.refreshBackdropImage();
         }
-        this.currentFrame = requestAnimationFrame(this.refreshBackdropImage);
     };
 
     private refreshBackdropImage = (): void => {
+        const spacesCtx = this.spacesCanvasRef.current.getContext("2d");
+        const roomListCtx = this.roomListCanvasRef.current.getContext("2d");
         const { spacePanelWidth, roomListWidth, height } = this.sizes;
         const width = spacePanelWidth + roomListWidth;
         const { backgroundImage } = this.props;
@@ -111,16 +104,21 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         this.roomListCanvasRef.current.height = height;
         this.roomListCanvasRef.current.style.transform = `translateX(${spacePanelWidth}px)`;
 
-        this.spacesCtx.filter = `blur(30px)`;
-        this.roomListCtx.filter = `blur(60px)`;
-        this.spacesCtx.drawImage(
+        const spacesBlur = this.style.getPropertyValue('--roomlist-background-blur-amount');
+        const roomListBlur = this.style.getPropertyValue('--groupFilterPanel-background-blur-amount');
+
+        spacesCtx.filter = `blur(${spacesBlur})`;
+        roomListCtx.filter = `blur(${roomListBlur})`;
+        spacesCtx.drawImage(
             backgroundImage,
+            0, 0,
+            imageWidth, imageHeight,
             x,
             y,
             resultWidth,
             resultHeight,
         );
-        this.roomListCtx.drawImage(
+        roomListCtx.drawImage(
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
@@ -132,22 +130,23 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
     };
 
     public render() {
-        return <>
+        if (!this.props.backgroundImage) return null;
+        return <div>
             <canvas
                 ref={this.spacesCanvasRef}
                 className="mx_BackdropPanel"
                 style={{
-                    opacity: .15,
+                    opacity: .19,
                 }}
             />
             <canvas
                 style={{
                     transform: `translateX(0)`,
-                    opacity: .1,
+                    opacity: .12,
                 }}
                 ref={this.roomListCanvasRef}
                 className="mx_BackdropPanel"
             />
-        </>;
+        </div>;
     }
 }

From 582b5c90a4d027df2cc8b19038bd369ac900cf6a Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Mon, 16 Aug 2021 14:26:21 +0200
Subject: [PATCH 15/34] Properly sepearate left column from timeline

---
 res/css/_components.scss                    |  1 +
 res/css/structures/_BackdropPanel.scss      | 33 +++++++++++++++++++++
 res/css/structures/_LeftPanel.scss          |  1 -
 res/css/structures/_MatrixChat.scss         | 16 ++--------
 res/css/structures/_RoomView.scss           |  2 ++
 src/components/structures/BackdropPanel.tsx |  6 ++--
 src/components/structures/LoggedInView.tsx  |  2 +-
 7 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 res/css/structures/_BackdropPanel.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 035caec36ac..f6c63630465 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -17,6 +17,7 @@
 @import "./structures/_LeftPanelWidget.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
+@import "./structures/_BackdropPanel.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NonUrgentToastContainer.scss";
 @import "./structures/_NotificationPanel.scss";
diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
new file mode 100644
index 00000000000..3415a49d2e5
--- /dev/null
+++ b/res/css/structures/_BackdropPanel.scss
@@ -0,0 +1,33 @@
+/*
+Copyright 2021 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BackdropPanel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+}
+
+.mx_BackdropPanel--canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 4bd6b1e816e..f0203f6905f 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -20,7 +20,6 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel {
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
-    max-width: 50%;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 77dc5f44542..43bf1b9c3c2 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -29,22 +29,10 @@ limitations under the License.
 .mx_MatrixChat_wrapper {
     display: flex;
 
-    flex-direction: column;
-
     width: 100%;
     height: 100%;
 }
 
-.mx_BackdropPanel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-height: 100%;
-    z-index: 0;
-    pointer-events: none;
-    overflow: hidden;
-}
-
 .mx_MatrixToolbar {
     order: 1;
 
@@ -57,10 +45,10 @@ limitations under the License.
 
     display: flex;
 
-    order: 2;
-
     flex: 1;
+    flex-grow: 0;
     min-height: 0;
+    max-width: 50%;
 }
 
 .mx_MatrixChat_syncError {
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 831f186ed49..84f28b5ada8 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -18,6 +18,8 @@ limitations under the License.
     word-wrap: break-word;
     display: flex;
     flex-direction: column;
+    flex: 1;
+    position: relative;
 }
 
 
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 12428354501..c1c1e784aaa 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -131,10 +131,10 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
 
     public render() {
         if (!this.props.backgroundImage) return null;
-        return <div>
+        return <div className="mx_BackdropPanel">
             <canvas
                 ref={this.spacesCanvasRef}
-                className="mx_BackdropPanel"
+                className="mx_BackdropPanel--canvas"
                 style={{
                     opacity: .19,
                 }}
@@ -145,7 +145,7 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
                     opacity: .12,
                 }}
                 ref={this.roomListCanvasRef}
-                className="mx_BackdropPanel"
+                className="mx_BackdropPanel--canvas"
             />
         </div>;
     }
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 62e6f577807..2371aec384f 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -644,8 +644,8 @@ class LoggedInView extends React.Component<IProps, IState> {
                             resizeNotifier={this.props.resizeNotifier}
                         />
                         <ResizeHandle />
-                        { pageElement }
                     </div>
+                    { pageElement }
                 </div>
                 <CallContainer />
                 <NonUrgentToastContainer />

From bad37e65db1984b0ee02b05f0f24ba0b6ac5d032 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Mon, 16 Aug 2021 16:52:32 +0200
Subject: [PATCH 16/34] Add missing position:relative;

---
 res/css/structures/_MatrixChat.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 43bf1b9c3c2..c837aee7917 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_MatrixChat {
+    position: relative;
     width: 100%;
     height: 100%;
 

From a2797795b2f9731a3a67d67a8667ca98b5466921 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Mon, 16 Aug 2021 16:52:41 +0200
Subject: [PATCH 17/34] Add proper glass-like look

---
 res/css/structures/_BackdropPanel.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 3415a49d2e5..3bcceb1d55b 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -20,6 +20,16 @@ limitations under the License.
   top: 0;
   height: 100vh;
   width: 100%;
+
+  &:before {
+    content: ' ';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    width: 100%;
+    background-color: rgba(255, 255, 255, .02);
+  }
 }
 
 .mx_BackdropPanel--canvas {
@@ -30,4 +40,11 @@ limitations under the License.
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
+
+    &:first-of-type {
+      opacity: 0.19;
+    }
+    &:last-of-type {
+      opacity:0.12;
+    }
 }

From bdb5f3bb9f0325c755afd9130b4218185dbd001d Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 15:25:10 +0200
Subject: [PATCH 18/34] Refactor GroupFilterPanel to typescript

---
 ...oupFilterPanel.js => GroupFilterPanel.tsx} | 57 ++++++++++++-------
 1 file changed, 38 insertions(+), 19 deletions(-)
 rename src/components/structures/{GroupFilterPanel.js => GroupFilterPanel.tsx} (74%)

diff --git a/src/components/structures/GroupFilterPanel.js b/src/components/structures/GroupFilterPanel.tsx
similarity index 74%
rename from src/components/structures/GroupFilterPanel.js
rename to src/components/structures/GroupFilterPanel.tsx
index 348e1fe4978..3e7c6e9b17f 100644
--- a/src/components/structures/GroupFilterPanel.js
+++ b/src/components/structures/GroupFilterPanel.tsx
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import type { EventSubscription } from "fbemitter";
 import React from 'react';
 import GroupFilterOrderStore from '../../stores/GroupFilterOrderStore';
 
@@ -32,23 +33,41 @@ import UserTagTile from "../views/elements/UserTagTile";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
 
+interface IGroupFilterPanelProps {
+
+}
+
+// FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+type OrderedTagsTemporaryType = Array<{}>;
+// FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+type SelectedTagsTemporaryType = Array<{}>;
+
+interface IGroupFilterPanelState {
+    // FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+    orderedTags: OrderedTagsTemporaryType;
+    // FIXME: Properly type this after migrating GroupFilterOrderStore.js to Typescript
+    selectedTags: SelectedTagsTemporaryType;
+}
+
 @replaceableComponent("structures.GroupFilterPanel")
-class GroupFilterPanel extends React.Component {
-    static contextType = MatrixClientContext;
+class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFilterPanelState> {
+    public static contextType = MatrixClientContext;
 
-    state = {
+    public state = {
         orderedTags: [],
         selectedTags: [],
     };
 
-    ref = React.createRef()
+    private ref = React.createRef<HTMLDivElement>();
+    private unmounted = false;
+    private groupFilterOrderStoreToken?: EventSubscription;
 
-    componentDidMount() {
+    public componentDidMount() {
         this.unmounted = false;
-        this.context.on("Group.myMembership", this._onGroupMyMembership);
-        this.context.on("sync", this._onClientSync);
+        this.context.on("Group.myMembership", this.onGroupMyMembership);
+        this.context.on("sync", this.onClientSync);
 
-        this._groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
+        this.groupFilterOrderStoreToken = GroupFilterOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
             }
@@ -62,22 +81,22 @@ class GroupFilterPanel extends React.Component {
         UIStore.instance.trackElementDimensions("GroupPanel", this.ref.current);
     }
 
-    componentWillUnmount() {
+    public componentWillUnmount() {
         this.unmounted = true;
-        this.context.removeListener("Group.myMembership", this._onGroupMyMembership);
-        this.context.removeListener("sync", this._onClientSync);
-        if (this._groupFilterOrderStoreToken) {
-            this._groupFilterOrderStoreToken.remove();
+        this.context.removeListener("Group.myMembership", this.onGroupMyMembership);
+        this.context.removeListener("sync", this.onClientSync);
+        if (this.groupFilterOrderStoreToken) {
+            this.groupFilterOrderStoreToken.remove();
         }
         UIStore.instance.stopTrackingElementDimensions("GroupPanel");
     }
 
-    _onGroupMyMembership = () => {
+    private onGroupMyMembership = () => {
         if (this.unmounted) return;
         dis.dispatch(GroupActions.fetchJoinedGroups(this.context));
     };
 
-    _onClientSync = (syncState, prevState) => {
+    private onClientSync = (syncState, prevState) => {
         // Consider the client reconnected if there is no error with syncing.
         // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
         const reconnected = syncState !== "ERROR" && prevState !== syncState;
@@ -87,18 +106,18 @@ class GroupFilterPanel extends React.Component {
         }
     };
 
-    onClick = e => {
+    private onClick = e => {
         // only dispatch if its not a no-op
         if (this.state.selectedTags.length > 0) {
             dis.dispatch({ action: 'deselect_tags' });
         }
     };
 
-    onClearFilterClick = ev => {
+    private onClearFilterClick = ev => {
         dis.dispatch({ action: 'deselect_tags' });
     };
 
-    renderGlobalIcon() {
+    private renderGlobalIcon() {
         if (!SettingsStore.getValue("feature_communities_v2_prototypes")) return null;
 
         return (
@@ -109,7 +128,7 @@ class GroupFilterPanel extends React.Component {
         );
     }
 
-    render() {
+    public render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const ActionButton = sdk.getComponent('elements.ActionButton');
 

From a999cad49db7dec102717b93e6a780bb8ed53bef Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 16:07:17 +0200
Subject: [PATCH 19/34] Properly cache blur effect

---
 res/css/structures/_BackdropPanel.scss      |  1 +
 res/themes/dark/css/dark.scss               |  4 --
 src/components/structures/BackdropPanel.tsx | 76 ++++++++++++++-------
 src/components/structures/LeftPanel.tsx     |  6 +-
 4 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 3bcceb1d55b..1ed2e4330e2 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -20,6 +20,7 @@ limitations under the License.
   top: 0;
   height: 100vh;
   width: 100%;
+  overflow: hidden;
 
   &:before {
     content: ' ';
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
index 600cfd528a4..df83d6db88b 100644
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@@ -2,10 +2,6 @@
 @import "../../light/css/_paths.scss";
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
-// important this goes before _mods,
-// as $groupFilterPanel-background-blur-amount and
-// $roomlist-background-blur-amount
-// are overridden in _dark.scss
 @import "_dark.scss";
 @import "../../light/css/_mods.scss";
 @import "../../../../res/css/_components.scss";
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index c1c1e784aaa..e61f7833234 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -23,48 +23,54 @@ interface IProps {
     backgroundImage?: CanvasImageSource;
 }
 
-export default class BackdropPanel extends React.PureComponent<IProps> {
-    private spacesCanvasRef = createRef<HTMLCanvasElement>();
-    private roomListCanvasRef = createRef<HTMLCanvasElement>();
+interface IState {
+    // Left Panel image
+    lpImage?: string;
+    // Left-left panel image
+    llpImage?: string;
+}
+
+export default class BackdropPanel extends React.PureComponent<IProps, IState> {
+    private leftLeftPanelRef = createRef<HTMLCanvasElement>();
+    private leftPanelRef = createRef<HTMLCanvasElement>();
 
     private sizes = {
-        spacePanelWidth: 0,
-        roomListWidth: 0,
+        leftLeftPanelWidth: 0,
+        leftPanelWidth: 0,
         height: 0,
     };
     private style = getComputedStyle(document.documentElement);
 
     constructor(props: IProps) {
         super(props);
+        this.state = {};
     }
 
     public componentDidMount() {
         UIStore.instance.on("SpacePanel", this.onResize);
-        UIStore.instance.on("LeftPanel", this.onResize);
+        UIStore.instance.on("GroupFilterPanelContainer", this.onResize);
         this.onResize();
     }
 
     public componentWillUnmount() {
         UIStore.instance.off("SpacePanel", this.onResize);
-        UIStore.instance.off("LeftPanel", this.onResize);
     }
 
     public componentDidUpdate(prevProps: IProps) {
-        if (this.props.backgroundImage) {
+        if (prevProps.backgroundImage !== this.props.backgroundImage) {
+            this.setState({});
             this.onResize();
         }
-        if (prevProps.backgroundImage && !this.props.backgroundImage) {
-            this.forceUpdate();
-        }
     }
 
     private onResize = () => {
         if (this.props.backgroundImage) {
+            const groupFilterPanelDimensions = UIStore.instance.getElementDimensions("GroupFilterPanelContainer");
             const spacePanelDimensions = UIStore.instance.getElementDimensions("SpacePanel");
             const roomListDimensions = UIStore.instance.getElementDimensions("LeftPanel");
             this.sizes = {
-                spacePanelWidth: spacePanelDimensions?.width ?? 0,
-                roomListWidth: roomListDimensions?.width ?? 0,
+                leftLeftPanelWidth: spacePanelDimensions?.width ?? groupFilterPanelDimensions?.width ?? 0,
+                leftPanelWidth: roomListDimensions?.width ?? 0,
                 height: UIStore.instance.windowHeight,
             };
             this.refreshBackdropImage();
@@ -72,10 +78,10 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
     };
 
     private refreshBackdropImage = (): void => {
-        const spacesCtx = this.spacesCanvasRef.current.getContext("2d");
-        const roomListCtx = this.roomListCanvasRef.current.getContext("2d");
-        const { spacePanelWidth, roomListWidth, height } = this.sizes;
-        const width = spacePanelWidth + roomListWidth;
+        const spacesCtx = this.leftLeftPanelRef.current.getContext("2d");
+        const roomListCtx = this.leftPanelRef.current.getContext("2d");
+        const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
+        const width = leftLeftPanelWidth + leftPanelWidth;
         const { backgroundImage } = this.props;
 
         const imageWidth = (backgroundImage as ImageBitmap).width
@@ -98,11 +104,11 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         const x = (width - resultWidth) / 2;
         const y = (height - resultHeight) / 2;
 
-        this.spacesCanvasRef.current.width = spacePanelWidth;
-        this.spacesCanvasRef.current.height = height;
-        this.roomListCanvasRef.current.width = roomListWidth;
-        this.roomListCanvasRef.current.height = height;
-        this.roomListCanvasRef.current.style.transform = `translateX(${spacePanelWidth}px)`;
+        this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
+        this.leftLeftPanelRef.current.height = height;
+        this.leftPanelRef.current.width = (window.screen.width * 0.5) - leftLeftPanelWidth;
+        this.leftPanelRef.current.height = height;
+        this.leftPanelRef.current.style.transform = `translateX(${leftLeftPanelWidth}px)`;
 
         const spacesBlur = this.style.getPropertyValue('--roomlist-background-blur-amount');
         const roomListBlur = this.style.getPropertyValue('--groupFilterPanel-background-blur-amount');
@@ -122,29 +128,49 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
-            x - spacePanelWidth,
+            x - leftLeftPanelWidth,
             y,
             resultWidth,
             resultHeight,
         );
+        this.setState({
+            lpImage: this.leftPanelRef.current.toDataURL('image/jpeg', 1),
+            llpImage: this.leftLeftPanelRef.current.toDataURL('image/jpeg', 1),
+
+        });
     };
 
     public render() {
         if (!this.props.backgroundImage) return null;
         return <div className="mx_BackdropPanel">
+            <img
+                className="mx_BackdropPanel--canvas"
+                style={{
+                    opacity: .19,
+                }}
+                src={this.state.llpImage} />
+            <img
+                className="mx_BackdropPanel--canvas"
+                style={{
+                    opacity: .12,
+                }}
+                src={this.state.lpImage} />
             <canvas
-                ref={this.spacesCanvasRef}
+                ref={this.leftLeftPanelRef
+                }
                 className="mx_BackdropPanel--canvas"
                 style={{
+                    display: this.state.lpImage ? 'none' : 'block',
                     opacity: .19,
                 }}
             />
             <canvas
                 style={{
+                    display: this.state.lpImage ? 'none' : 'block',
                     transform: `translateX(0)`,
                     opacity: .12,
                 }}
-                ref={this.roomListCanvasRef}
+                ref={this.leftPanelRef}
                 className="mx_BackdropPanel--canvas"
             />
         </div>;
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 82db9a2e2ea..0d8f9d87251 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -69,6 +69,7 @@ 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 groupFilterPanelContainer = createRef<HTMLDivElement>();
     private bgImageWatcherRef: string;
     private focusedElement = null;
     private isDoingStickyHeaders = false;
@@ -93,6 +94,9 @@ 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);
+        if (this.groupFilterPanelContainer.current) {
+            UIStore.instance.trackElementDimensions("GroupFilterPanelContainer", this.groupFilterPanelContainer.current);
+        }
         UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
         // Using the passive option to not block the main thread
         // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
@@ -420,7 +424,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         let leftLeftPanel;
         if (this.state.showGroupFilterPanel) {
             leftLeftPanel = (
-                <div className="mx_LeftPanel_GroupFilterPanelContainer">
+                <div className="mx_LeftPanel_GroupFilterPanelContainer" ref={this.groupFilterPanelContainer}>
                     <GroupFilterPanel />
                     { SettingsStore.getValue("feature_custom_tags") ? <CustomRoomTagPanel /> : null }
                 </div>

From 2ee26d0681d9283b27201b210dc1046128c85f48 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 17:47:40 +0200
Subject: [PATCH 20/34] Make the blur as-close to the css one as possible

---
 res/css/structures/_BackdropPanel.scss      | 10 +++----
 res/themes/dark/css/_dark.scss              |  4 +--
 res/themes/light/css/_light.scss            |  4 +--
 src/components/structures/BackdropPanel.tsx | 31 +++++++++------------
 4 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 1ed2e4330e2..79af211ba4e 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -29,7 +29,7 @@ limitations under the License.
     top: 0;
     height: 100vh;
     width: 100%;
-    background-color: rgba(255, 255, 255, .02);
+    background-color: rgba(255, 255, 255, .055);
   }
 }
 
@@ -42,10 +42,10 @@ limitations under the License.
     pointer-events: none;
     overflow: hidden;
 
-    &:first-of-type {
-      opacity: 0.19;
+    &:nth-of-type(2n-1) {
+      opacity: 0.2;
     }
-    &:last-of-type {
-      opacity:0.12;
+    &:nth-of-type(2n) {
+      opacity:0.1;
     }
 }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 53cba6f4400..854fa9f168b 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -240,8 +240,8 @@ $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 :root {
-    --roomlist-background-blur-amount: 60px;
-    --groupFilterPanel-background-blur-amount: 30px;
+    --llp-background-blur: 60px;
+    --lp-background-blur: 30px;
 }
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 4978edee556..706f4946fae 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -363,8 +363,8 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 :root {
-    --roomlist-background-blur-amount: 40px;
-    --groupFilterPanel-background-blur-amount: 20px;
+    --llp-background-blur: 40px;
+    --lp-background-blur: 20px;
 }
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index e61f7833234..6faf47fcaf4 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -78,16 +78,14 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
     };
 
     private refreshBackdropImage = (): void => {
-        const spacesCtx = this.leftLeftPanelRef.current.getContext("2d");
-        const roomListCtx = this.leftPanelRef.current.getContext("2d");
+        const leftLeftPanelContext = this.leftLeftPanelRef.current.getContext("2d");
+        const leftPanelContext = this.leftPanelRef.current.getContext("2d");
         const { leftLeftPanelWidth, leftPanelWidth, height } = this.sizes;
         const width = leftLeftPanelWidth + leftPanelWidth;
         const { backgroundImage } = this.props;
 
-        const imageWidth = (backgroundImage as ImageBitmap).width
-        || (backgroundImage as HTMLImageElement).naturalWidth;
-        const imageHeight = (backgroundImage as ImageBitmap).height
-        || (backgroundImage as HTMLImageElement).naturalHeight;
+        const imageWidth = (backgroundImage as ImageBitmap).width;
+        const imageHeight = (backgroundImage as ImageBitmap).height;
 
         const contentRatio = imageWidth / imageHeight;
         const containerRatio = width / height;
@@ -101,7 +99,9 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             resultHeight = width / contentRatio;
         }
 
-        const x = (width - resultWidth) / 2;
+        // This value has been chosen to be as close with rendering as the css-only
+        // backdrop-filter: blur effect was, mostly takes effect for vertical pictures.
+        const x = width * 0.1;
         const y = (height - resultHeight) / 2;
 
         this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
@@ -110,12 +110,12 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
         this.leftPanelRef.current.height = height;
         this.leftPanelRef.current.style.transform = `translateX(${leftLeftPanelWidth}px)`;
 
-        const spacesBlur = this.style.getPropertyValue('--roomlist-background-blur-amount');
-        const roomListBlur = this.style.getPropertyValue('--groupFilterPanel-background-blur-amount');
+        const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
+        const roomListBlur = this.style.getPropertyValue('--lp-background-blur');
 
-        spacesCtx.filter = `blur(${spacesBlur})`;
-        roomListCtx.filter = `blur(${roomListBlur})`;
-        spacesCtx.drawImage(
+        leftLeftPanelContext.filter = `blur(${spacesBlur})`;
+        leftPanelContext.filter = `blur(${roomListBlur})`;
+        leftLeftPanelContext.drawImage(
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
@@ -124,7 +124,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             resultWidth,
             resultHeight,
         );
-        roomListCtx.drawImage(
+        leftPanelContext.drawImage(
             backgroundImage,
             0, 0,
             imageWidth, imageHeight,
@@ -146,13 +146,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
             <img
                 className="mx_BackdropPanel--canvas"
                 style={{
-                    opacity: .19,
                 }}
                 src={this.state.llpImage} />
             <img
                 className="mx_BackdropPanel--canvas"
                 style={{
-                    opacity: .12,
                 }}
                 src={this.state.lpImage} />
             <canvas
@@ -161,14 +159,11 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
                 className="mx_BackdropPanel--canvas"
                 style={{
                     display: this.state.lpImage ? 'none' : 'block',
-                    opacity: .19,
                 }}
             />
             <canvas
                 style={{
                     display: this.state.lpImage ? 'none' : 'block',
-                    transform: `translateX(0)`,
-                    opacity: .12,
                 }}
                 ref={this.leftPanelRef}
                 className="mx_BackdropPanel--canvas"

From de2eb5b6dd8612a2764da38dbf2d2d7d3cebf354 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 17:59:26 +0200
Subject: [PATCH 21/34] Satisfy linter

---
 res/css/structures/_BackdropPanel.scss     | 26 +++++++++++-----------
 src/components/structures/LeftPanel.tsx    |  3 ++-
 src/components/views/spaces/SpacePanel.tsx | 11 ++++++++-
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 79af211ba4e..1960bd94e4e 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -15,22 +15,22 @@ limitations under the License.
 */
 
 .mx_BackdropPanel {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100vh;
-  width: 100%;
-  overflow: hidden;
-
-  &:before {
-    content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     height: 100vh;
     width: 100%;
-    background-color: rgba(255, 255, 255, .055);
-  }
+    overflow: hidden;
+
+    &::before {
+        content: " ";
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        width: 100%;
+        background-color: rgba(255, 255, 255, 0.055);
+    }
 }
 
 .mx_BackdropPanel--canvas {
@@ -43,9 +43,9 @@ limitations under the License.
     overflow: hidden;
 
     &:nth-of-type(2n-1) {
-      opacity: 0.2;
+        opacity: 0.2;
     }
     &:nth-of-type(2n) {
-      opacity:0.1;
+        opacity: 0.1;
     }
 }
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 0d8f9d87251..6c418e93667 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> {
         UIStore.instance.trackElementDimensions("LeftPanel", this.ref.current);
         UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
         if (this.groupFilterPanelContainer.current) {
-            UIStore.instance.trackElementDimensions("GroupFilterPanelContainer", this.groupFilterPanelContainer.current);
+            const componentName = "GroupFilterPanelContainer";
+            UIStore.instance.trackElementDimensions(componentName, this.groupFilterPanelContainer.current);
         }
         UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
         // Using the passive option to not block the main thread
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 2fa08e21086..d2e09c0d692 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -14,7 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, Dispatch, ReactNode, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, {
+    ComponentProps,
+    Dispatch,
+    ReactNode,
+    SetStateAction,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";

From 515fc244b6ef03f02f859599d41e35d35e14e883 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 18:00:39 +0200
Subject: [PATCH 22/34] Revert useless change

---
 res/css/structures/_MatrixChat.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index c837aee7917..90e28fb0a98 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -65,7 +65,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(canvas) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
     background-color: $primary-bg-color;
 
     flex: 1 1 0;

From 78d48b1d8bb847570f9e17bdd882d1000539637f Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 18:03:22 +0200
Subject: [PATCH 23/34] Fix weird code style

---
 src/components/structures/BackdropPanel.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 6faf47fcaf4..47b967edd18 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -145,17 +145,12 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
         return <div className="mx_BackdropPanel">
             <img
                 className="mx_BackdropPanel--canvas"
-                style={{
-                }}
                 src={this.state.llpImage} />
             <img
                 className="mx_BackdropPanel--canvas"
-                style={{
-                }}
                 src={this.state.lpImage} />
             <canvas
-                ref={this.leftLeftPanelRef
-                }
+                ref={this.leftLeftPanelRef}
                 className="mx_BackdropPanel--canvas"
                 style={{
                     display: this.state.lpImage ? 'none' : 'block',

From eb242041a5776770bab1be751b2b29045831d986 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 18:56:19 +0200
Subject: [PATCH 24/34] Fix missing background tonality without avatar

---
 res/css/structures/_BackdropPanel.scss     |  2 +-
 res/css/structures/_LeftPanel.scss         |  9 +++++++++
 res/css/structures/_SpacePanel.scss        |  7 +++++++
 res/themes/dark/css/_dark.scss             |  1 +
 res/themes/light/css/_light.scss           |  1 +
 src/components/structures/LoggedInView.tsx | 10 ++++++----
 6 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index 1960bd94e4e..be709ec7f38 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -29,7 +29,7 @@ limitations under the License.
         top: 0;
         height: 100vh;
         width: 100%;
-        background-color: rgba(255, 255, 255, 0.055);
+        background-color: var(--lp-background-overlay)
     }
 }
 
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index f0203f6905f..db634cd71f2 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -17,7 +17,15 @@ limitations under the License.
 $groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 $roomListCollapsedWidth: 68px;
 
+.mx_MatrixChat--with-avatar {
+    .mx_LeftPanel,
+    .mx_LeftPanel .mx_LeftPanel_roomListContainer {
+        background-color: transparent;
+    }
+}
+
 .mx_LeftPanel {
+    background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
     min-width: 206px;
 
@@ -42,6 +50,7 @@ $roomListCollapsedWidth: 68px;
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
+        background-color: $roomlist-bg-color;
         flex: 1 0 0;
         min-width: 0;
         // Create another flexbox (this time a column) for the room list components
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 39727cdf7a2..e271d6bb00c 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -22,7 +22,14 @@ $activeBorderTransparentGap: 1px;
 $activeBackgroundColor: $roomtile-selected-bg-color;
 $activeBorderColor: $secondary-fg-color;
 
+.mx_MatrixChat--with-avatar {
+    .mx_SpacePanel {
+        background-color: transparent;
+    }
+}
+
 .mx_SpacePanel {
+    background-color: $groupFilterPanel-bg-color;
     flex: 0 0 auto;
     padding: 0;
     margin: 0;
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 854fa9f168b..6b28e095874 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -242,6 +242,7 @@ $appearance-tab-border-color: $room-highlight-color;
 :root {
     --llp-background-blur: 60px;
     --lp-background-blur: 30px;
+    --lp-background-overlay: rgba(255, 255, 255, 0.055);
 }
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 706f4946fae..8667a137570 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -365,6 +365,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
 :root {
     --llp-background-blur: 40px;
     --lp-background-blur: 20px;
+    --lp-background-overlay: rgba(0, 0, 0, 0.055);
 }
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 2371aec384f..4b595c5bf2e 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -67,6 +67,7 @@ import UserView from "./UserView";
 import GroupView from "./GroupView";
 import BackdropPanel from "./BackdropPanel";
 import SpaceStore from "../../stores/SpaceStore";
+import classNames from 'classnames';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -614,10 +615,11 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
         }
 
-        let bodyClasses = 'mx_MatrixChat';
-        if (this.state.useCompactLayout) {
-            bodyClasses += ' mx_MatrixChat_useCompactLayout';
-        }
+        const bodyClasses = classNames({
+            'mx_MatrixChat': true,
+            'mx_MatrixChat_useCompactLayout': this.state.useCompactLayout,
+            'mx_MatrixChat--with-avatar': this.state.backgroundImage,
+        });
 
         const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
             return (

From 3fd95ad374d4e825c5ad22b7e61dfe6f2485cba1 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 19:09:58 +0200
Subject: [PATCH 25/34] Fix missing coma

---
 res/css/structures/_BackdropPanel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.scss
index be709ec7f38..c7ada2b0a54 100644
--- a/res/css/structures/_BackdropPanel.scss
+++ b/res/css/structures/_BackdropPanel.scss
@@ -29,7 +29,7 @@ limitations under the License.
         top: 0;
         height: 100vh;
         width: 100%;
-        background-color: var(--lp-background-overlay)
+        background-color: var(--lp-background-overlay);
     }
 }
 

From a7bda2b73eaf78d2bc3c6722325db2bd9d3a81c0 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 19:33:59 +0200
Subject: [PATCH 26/34] Better blur values for nicer experience

---
 res/themes/dark/css/_dark.scss   | 6 +++---
 res/themes/light/css/_light.scss | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 6b28e095874..cce7d6ab67d 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -238,10 +238,10 @@ $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
 
-// blur amounts for left left panel (only for element theme, used in _mods.scss)
+// blur amounts for left left panel (only for element theme)
 :root {
-    --llp-background-blur: 60px;
-    --lp-background-blur: 30px;
+    --llp-background-blur: 160px;
+    --lp-background-blur: 90px;
     --lp-background-overlay: rgba(255, 255, 255, 0.055);
 }
 
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 8667a137570..982ca7cf08e 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -361,10 +361,10 @@ $voice-playback-button-fg-color: $message-body-panel-icon-fg-color;
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
 
-// blur amounts for left left panel (only for element theme, used in _mods.scss)
+// blur amounts for left left panel (only for element theme)
 :root {
-    --llp-background-blur: 40px;
-    --lp-background-blur: 20px;
+    --llp-background-blur: 120px;
+    --lp-background-blur: 60px;
     --lp-background-overlay: rgba(0, 0, 0, 0.055);
 }
 $composer-shadow-color: rgba(0, 0, 0, 0.04);

From b1c724ad66387b9abd96c91e9f2e42259dae0dfb Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 19:34:18 +0200
Subject: [PATCH 27/34] Fix invalid width for blurred sidebar

---
 src/components/structures/BackdropPanel.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 47b967edd18..cd116b77735 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -106,9 +106,8 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
 
         this.leftLeftPanelRef.current.width = leftLeftPanelWidth;
         this.leftLeftPanelRef.current.height = height;
-        this.leftPanelRef.current.width = (window.screen.width * 0.5) - leftLeftPanelWidth;
+        this.leftPanelRef.current.width = (window.screen.width * 0.5);
         this.leftPanelRef.current.height = height;
-        this.leftPanelRef.current.style.transform = `translateX(${leftLeftPanelWidth}px)`;
 
         const spacesBlur = this.style.getPropertyValue('--llp-background-blur');
         const roomListBlur = this.style.getPropertyValue('--lp-background-blur');

From 6310949bc8f548c1f001e483a7330057c600691f Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 19:45:52 +0200
Subject: [PATCH 28/34] Fix background blur not being shown on first load

---
 src/components/structures/LoggedInView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 4b595c5bf2e..8a8e7fd375c 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -200,6 +200,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage);
         this.loadResizerPreferences();
+        this.refreshBackgroundImage();
     }
 
     componentWillUnmount() {

From b5178a3ffd003625fc9ecb10872b36fdbae6598b Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Tue, 17 Aug 2021 19:56:10 +0200
Subject: [PATCH 29/34] Fix fonts  for inputs being of wrong colors

---
 res/css/_common.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index fa925eba5b0..ae565d2fe81 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -168,7 +168,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 // it has the appearance of a text box so the controls
 // appear to be part of the input
 
-.mx_Dialog, .mx_MatrixChat {
+.mx_Dialog, .mx_MatrixChat_wrapper {
     .mx_textinput > input[type=text],
     .mx_textinput > input[type=search] {
         border: none;

From e83722e9d91f66f5ab10e9f4fd751e9a8b6caf52 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Wed, 18 Aug 2021 13:56:19 +0200
Subject: [PATCH 30/34] Fix missing background color in GroupFilterPanel

---
 res/css/structures/_GroupFilterPanel.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
index f7c70ec7698..c62230edfc6 100644
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MatrixChat--with-avatar {
+    .mx_GroupFilterPanel {
+        background-color: transparent;
+    }
+}
+
 .mx_GroupFilterPanel {
+    background-color: $groupFilterPanel-bg-color;
     flex: 1;
     cursor: pointer;
     position: relative;

From d65f6dd002a40d1e036d66d0ab18edb0095d85d8 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Thu, 19 Aug 2021 07:11:40 +0200
Subject: [PATCH 31/34] Fix bad merge

---
 src/components/structures/LoggedInView.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index cdbb6562fb9..44c65c73ff6 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -221,11 +221,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         });
     };
 
-    private onCallsChanged = () => {
-        this.setState({
-            activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
-        });
-
     private onAction = (payload): void => {
         switch (payload.action) {
             case 'call_state': {

From 468bb5cdcfd9fa6cd1c30f4b0006d3542d4c8489 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Thu, 19 Aug 2021 07:14:13 +0200
Subject: [PATCH 32/34] Fix mr comments

---
 src/components/structures/BackdropPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index cd116b77735..fe188519787 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -54,6 +54,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
 
     public componentWillUnmount() {
         UIStore.instance.off("SpacePanel", this.onResize);
+        UIStore.instance.on("GroupFilterPanelContainer", this.onResize);
     }
 
     public componentDidUpdate(prevProps: IProps) {

From fe1d0e66fed3701074d742eb880e5385676fc1ab Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Thu, 19 Aug 2021 07:14:28 +0200
Subject: [PATCH 33/34] Remove useless constructor

---
 src/components/structures/BackdropPanel.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index fe188519787..9a371822223 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -41,10 +41,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
     };
     private style = getComputedStyle(document.documentElement);
 
-    constructor(props: IProps) {
-        super(props);
-        this.state = {};
-    }
+    public state = {};
 
     public componentDidMount() {
         UIStore.instance.on("SpacePanel", this.onResize);

From fa03b10409df45e9d2c3092fa3167ae4fa28310e Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <dariuszn@element.io>
Date: Thu, 19 Aug 2021 08:23:33 +0200
Subject: [PATCH 34/34] Fix missing type for state

---
 src/components/structures/BackdropPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/BackdropPanel.tsx b/src/components/structures/BackdropPanel.tsx
index 9a371822223..2dd4b18fb9e 100644
--- a/src/components/structures/BackdropPanel.tsx
+++ b/src/components/structures/BackdropPanel.tsx
@@ -41,7 +41,7 @@ export default class BackdropPanel extends React.PureComponent<IProps, IState> {
     };
     private style = getComputedStyle(document.documentElement);
 
-    public state = {};
+    public state: IState = {};
 
     public componentDidMount() {
         UIStore.instance.on("SpacePanel", this.onResize);