Add persistence of collapsed state of space panel

cypress/e2e/space-panel/space-panel.spec.ts

@@ -0,0 +1,47 @@
+/*
+Copyright 2022 Gustavo Santos [email protected]
+
+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.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+
+describe("Create Room", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+
+            cy.initTestUser(synapse, "Jim");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it("should persist state of collapsed after restart of app", () => {
+        cy.get(".mx_SpacePanel").should("have.class", "collapsed");
+        cy.get(".mx_SpacePanel_toggleCollapse").click();
+        cy.get(".mx_SpacePanel").should("not.have.class", "collapsed");
+        cy.reload(true);
+        cy.get(".mx_SpacePanel").should("not.have.class", "collapsed");
+        cy.get(".mx_SpacePanel_toggleCollapse").click();
+        cy.get(".mx_SpacePanel").should("have.class", "collapsed");
+        cy.reload(true);
+        cy.get(".mx_SpacePanel").should("have.class", "collapsed");
+    });
+});

src/components/views/spaces/SpacePanel.tsx

@@ -73,6 +73,8 @@ import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
 
+const KEY_PANEL_IS_COLLAPSED = "mx_space_panel_is_collapsed";
+
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
         return SpaceStore.instance.invitedSpaces;
@@ -329,7 +331,12 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
 );
 
 const SpacePanel = () => {
-    const [isPanelCollapsed, setPanelCollapsed] = useState(true);
+    const [isPanelCollapsed, setPanelCollapsed] = useState(() => {
+        const defaultValue = true;
+        const item = window.localStorage.getItem(KEY_PANEL_IS_COLLAPSED);
+        return item ? JSON.parse(item) : defaultValue;
+    });
+
     const ref = useRef<HTMLDivElement>();
     useLayoutEffect(() => {
         UIStore.instance.trackElementDimensions("SpacePanel", ref.current);
@@ -342,6 +349,10 @@ const SpacePanel = () => {
         }
     });
 
+    useEffect(() => {
+        window.localStorage.setItem(KEY_PANEL_IS_COLLAPSED, isPanelCollapsed);
+    }, [isPanelCollapsed]);
+
     return (
         <DragDropContext
             onDragEnd={(result) => {