From dba7d46f3ec91d26a597a50dede7b6ca292c728f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 8 Jan 2025 17:42:17 +0200
Subject: [PATCH] feat(editor): Persist sidebar collapsed status preference
 (#12505)

---
 .../editor-ui/src/components/MainSidebar.vue  | 32 ++++++++-----------
 packages/editor-ui/src/stores/ui.store.ts     |  9 ++++--
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 35f2d71f41..e5fb044a80 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -185,12 +185,9 @@ onMounted(async () => {
 		});
 	}
 
-	await nextTick(() => {
-		uiStore.sidebarMenuCollapsed = window.innerWidth < 900;
-		fullyExpanded.value = !isCollapsed.value;
-	});
-
 	becomeTemplateCreatorStore.startMonitoringCta();
+
+	await nextTick(onResizeEnd);
 });
 
 onBeforeUnmount(() => {
@@ -273,22 +270,21 @@ const handleSelect = (key: string) => {
 	}
 };
 
-const onResize = (event: UIEvent) => {
-	void callDebounced(onResizeEnd, { debounceTime: 100 }, event);
-};
+function onResize() {
+	void callDebounced(onResizeEnd, { debounceTime: 250 });
+}
 
-const onResizeEnd = async (event: UIEvent) => {
-	const browserWidth = (event.target as Window).outerWidth;
-	await checkWidthAndAdjustSidebar(browserWidth);
-};
-
-const checkWidthAndAdjustSidebar = async (width: number) => {
-	if (width < 900) {
+async function onResizeEnd() {
+	if (window.outerWidth < 900) {
 		uiStore.sidebarMenuCollapsed = true;
-		await nextTick();
-		fullyExpanded.value = !isCollapsed.value;
+	} else {
+		uiStore.sidebarMenuCollapsed = uiStore.sidebarMenuCollapsedPreference;
 	}
-};
+
+	void nextTick(() => {
+		fullyExpanded.value = !isCollapsed.value;
+	});
+}
 
 const {
 	menu,
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index dfab03f8f3..21928cfe39 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -65,6 +65,7 @@ import {
 } from './ui.utils';
 import { computed, ref } from 'vue';
 import type { Connection } from '@vue-flow/core';
+import { useLocalStorage } from '@vueuse/core';
 
 let savedTheme: ThemeOption = 'system';
 
@@ -151,7 +152,8 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	});
 
 	const modalStack = ref<string[]>([]);
-	const sidebarMenuCollapsed = ref<boolean>(true);
+	const sidebarMenuCollapsedPreference = useLocalStorage<boolean>('sidebar.collapsed', false);
+	const sidebarMenuCollapsed = ref<boolean>(sidebarMenuCollapsedPreference.value);
 	const currentView = ref<string>('');
 	const draggable = ref<Draggable>({
 		isDragging: false,
@@ -502,7 +504,9 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	};
 
 	const toggleSidebarMenuCollapse = () => {
-		sidebarMenuCollapsed.value = !sidebarMenuCollapsed.value;
+		const newCollapsedState = !sidebarMenuCollapsed.value;
+		sidebarMenuCollapsedPreference.value = newCollapsedState;
+		sidebarMenuCollapsed.value = newCollapsedState;
 	};
 
 	const getCurlToJson = async (curlCommand: string) => {
@@ -592,6 +596,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
 		nodeViewInitialized,
 		addFirstStepOnLoad,
 		sidebarMenuCollapsed,
+		sidebarMenuCollapsedPreference,
 		bannerStack,
 		theme,
 		modalsById,