From d4d922dbf0e9badbd58f6e8e8436fcecfa0bf1eb Mon Sep 17 00:00:00 2001
From: Anonymus2000 <54113952+Nil2000@users.noreply.github.com>
Date: Thu, 30 Jan 2025 00:48:23 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Save=20sidebar=20locked=20state?=
 =?UTF-8?q?=20in=20local=20storage=20(#1956)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #1933

---------

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
---
 .../editor/components/BlocksSideBar.tsx       | 19 +++++++++++++++----
 apps/builder/src/features/editor/constants.ts |  2 ++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/builder/src/features/editor/components/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
index 5233d7cd4..4b194bcf0 100644
--- a/apps/builder/src/features/editor/components/BlocksSideBar.tsx
+++ b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
@@ -25,7 +25,7 @@ import { isDefined } from "@typebot.io/lib/utils";
 import type React from "react";
 import { useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { headerHeight } from "../constants";
+import { headerHeight, leftSidebarLockedStorageKey } from "../constants";
 import { BlockCard } from "./BlockCard";
 import { BlockCardOverlay } from "./BlockCardOverlay";
 import {
@@ -49,8 +49,12 @@ export const BlocksSideBar = () => {
     x: 0,
     y: 0,
   });
-  const [isLocked, setIsLocked] = useState(true);
-  const [isExtended, setIsExtended] = useState(true);
+  const [isLocked, setIsLocked] = useState(
+    localStorage.getItem(leftSidebarLockedStorageKey) === "true",
+  );
+  const [isExtended, setIsExtended] = useState(
+    localStorage.getItem(leftSidebarLockedStorageKey) === "true",
+  );
   const [searchInput, setSearchInput] = useState("");
 
   const closeSideBar = useDebouncedCallback(() => setIsExtended(false), 200);
@@ -86,7 +90,14 @@ export const BlocksSideBar = () => {
   };
   useEventListener("mouseup", handleMouseUp);
 
-  const handleLockClick = () => setIsLocked(!isLocked);
+  const handleLockClick = () => {
+    try {
+      localStorage.setItem(leftSidebarLockedStorageKey, String(!isLocked));
+    } catch (error) {
+      console.error(error);
+    }
+    setIsLocked(!isLocked);
+  };
 
   const handleDockBarEnter = () => {
     closeSideBar.flush();
diff --git a/apps/builder/src/features/editor/constants.ts b/apps/builder/src/features/editor/constants.ts
index ded639d02..14f26a0b5 100644
--- a/apps/builder/src/features/editor/constants.ts
+++ b/apps/builder/src/features/editor/constants.ts
@@ -1 +1,3 @@
 export const headerHeight = 56;
+
+export const leftSidebarLockedStorageKey = "isLeftSidebarLocked";