feat: add sidebar width persistence and restoration

packages/bruno-app/src/components/Sidebar/index.js

@@ -4,7 +4,7 @@ import StyledWrapper from './StyledWrapper';
 
 import { useState, useEffect, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { updateLeftSidebarWidth, updateIsDragging } from 'providers/ReduxStore/slices/app';
+import { updateLeftSidebarWidth, updateIsDragging, saveSidebarWidth } from 'providers/ReduxStore/slices/app';
 
 const MIN_LEFT_SIDEBAR_WIDTH = 221;
 const MAX_LEFT_SIDEBAR_WIDTH = 600;
@@ -46,6 +46,10 @@ const Sidebar = () => {
           isDragging: false
         })
       );
+      // Save sidebar width to preferences
+      if (asideWidth !== leftSidebarWidth) {
+        dispatch(saveSidebarWidth(asideWidth));
+      }
     }
   };
   const handleDragbarMouseDown = (e) => {

packages/bruno-app/src/providers/App/useIpcEvents.js

@@ -3,7 +3,7 @@ import {
   showPreferences,
   updateCookies,
   updatePreferences,
-  updateSystemProxyEnvVariables
+  updateSystemProxyEnvVariables,
 } from 'providers/ReduxStore/slices/app';
 import {
   brunoConfigUpdateEvent,

packages/bruno-app/src/providers/ReduxStore/slices/app.js

@@ -141,6 +141,14 @@ export const savePreferences = (preferences) => (dispatch, getState) => {
   });
 };
 
+export const saveSidebarWidth = (leftSidebarWidth) => (dispatch, getState) => {
+  const { ipcRenderer } = window;
+  return ipcRenderer.invoke('renderer:update-ui-state-snapshot', {
+    type: 'SIDEBAR',
+    data: { width: leftSidebarWidth }
+  });
+};
+
 export const deleteCookiesForDomain = (domain) => (dispatch, getState) => {
   return new Promise((resolve, reject) => {
     const { ipcRenderer } = window;

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -7,7 +7,7 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import trim from 'lodash/trim';
 import path from 'utils/common/path';
-import { insertTaskIntoQueue, toggleSidebarCollapse } from 'providers/ReduxStore/slices/app';
+import { insertTaskIntoQueue, toggleSidebarCollapse, updateLeftSidebarWidth } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import {
   findCollectionByUid,
@@ -2353,24 +2353,31 @@ export const saveCollectionSecurityConfig = (collectionUid, securityConfig) => (
 };
 
 export const hydrateCollectionWithUiStateSnapshot = (payload) => (dispatch, getState) => {
-  const collectionSnapshotData = payload;
+  const uiStateSnapshotData = payload;
   return new Promise((resolve, reject) => {
     const state = getState();
     try {
-      if (!collectionSnapshotData) resolve();
-      const { pathname, selectedEnvironment } = collectionSnapshotData;
-      const collection = findCollectionByPathname(state.collections.collections, pathname);
-      const collectionCopy = cloneDeep(collection);
-      const collectionUid = collectionCopy?.uid;
+      if (!uiStateSnapshotData) resolve();
+
+      if (uiStateSnapshotData.collections) {
+        const { pathname, selectedEnvironment } = uiStateSnapshotData.collections;
+        const collection = findCollectionByPathname(state.collections.collections, pathname);
+        const collectionCopy = cloneDeep(collection);
+        const collectionUid = collectionCopy?.uid;
 
-      // update selected environment
-      if (selectedEnvironment) {
-        const environment = findEnvironmentInCollectionByName(collectionCopy, selectedEnvironment);
-        if (environment) {
-          dispatch(_selectEnvironment({ environmentUid: environment?.uid, collectionUid }));
+        // update selected environment
+        if (selectedEnvironment) {
+          const environment = findEnvironmentInCollectionByName(collectionCopy, selectedEnvironment);
+          if (environment) {
+            dispatch(_selectEnvironment({ environmentUid: environment?.uid, collectionUid }));
+          }
         }
       }
 
+      if (uiStateSnapshotData.sidebar && uiStateSnapshotData.sidebar.width != null) {
+        dispatch(updateLeftSidebarWidth({ leftSidebarWidth: uiStateSnapshotData.sidebar.width }));
+      }
+
       // todo: add any other redux state that you want to save
 
       resolve();

packages/bruno-electron/src/app/collection-watcher.js

@@ -660,7 +660,8 @@ const onWatcherSetupComplete = (win, watchPath, collectionUid, watcher) => {
   const UiStateSnapshotStore = new UiStateSnapshot();
   const collectionsSnapshotState = UiStateSnapshotStore.getCollections();
   const collectionSnapshotState = collectionsSnapshotState?.find(c => c?.pathname == watchPath);
-  win.webContents.send('main:hydrate-app-with-ui-state-snapshot', collectionSnapshotState);
+  const uiSnapshotState = { collections: collectionSnapshotState || {} };
+  win.webContents.send('main:hydrate-app-with-ui-state-snapshot', uiSnapshotState);
 };
 
 class CollectionWatcher {

packages/bruno-electron/src/ipc/preferences.js

@@ -3,6 +3,7 @@ const { getPreferences, savePreferences, preferencesUtil } = require('../store/p
 const { isDirectory } = require('../utils/filesystem');
 const { openCollection } = require('../app/collections');
 const { globalEnvironmentsStore } = require('../store/global-environments');
+const UiStateSnapshot = require('../store/ui-state-snapshot');
 ``;
 const registerPreferencesIpc = (mainWindow, watcher, lastOpenedCollections) => {
   ipcMain.handle('renderer:ready', async (event) => {
@@ -27,6 +28,17 @@ const registerPreferencesIpc = (mainWindow, watcher, lastOpenedCollections) => {
       console.error(error);
     }
 
+    // hydrate UI state snapshot sidebar width
+    try {
+      const UiStateSnapshotStore = new UiStateSnapshot();
+      const sidebarSnapshotState = UiStateSnapshotStore.getSidebar();
+      const uiSnapshotState = { sidebar: sidebarSnapshotState || {} };
+      mainWindow.webContents.send('main:hydrate-app-with-ui-state-snapshot', uiSnapshotState);
+    } catch (error) {
+      console.error('Error loading UI state snapshot');
+      console.error(error);
+    }
+
     // reload last opened collections
     const lastOpened = lastOpenedCollections.getAll();
 

packages/bruno-electron/src/store/preferences.js

@@ -39,7 +39,8 @@ const defaultPreferences = {
     bypassProxy: ''
   },
   layout: {
-    responsePaneOrientation: 'horizontal'
+    responsePaneOrientation: 'horizontal',
+    leftSidebarWidth: 222
   },
   beta: {},
   onboarding: {
@@ -85,7 +86,8 @@ const preferencesSchema = Yup.object().shape({
     bypassProxy: Yup.string().optional().max(1024)
   }),
   layout: Yup.object({
-    responsePaneOrientation: Yup.string().oneOf(['horizontal', 'vertical'])
+    responsePaneOrientation: Yup.string().oneOf(['horizontal', 'vertical']),
+    leftSidebarWidth: Yup.number().min(221).max(600).nullable()
   }),
   beta: Yup.object({
   }),

packages/bruno-electron/src/store/ui-state-snapshot.js

@@ -45,12 +45,33 @@ class UiStateSnapshotStore {
     this.setCollectionByPathname({ collection });
   }
 
+  getSidebar() {
+    return this.store.get('sidebar') || { width: 222 };
+  }
+
+  saveSidebar(sidebar) {
+    this.store.set('sidebar', sidebar);
+  }
+
+  getSidebarWidth() {
+    const sidebar = this.getSidebar();
+    return sidebar && sidebar.width != null ? sidebar.width : 222;
+  }
+
+  updateSidebarWidth(width) {
+    this.saveSidebar({ width });
+  }
+
   update({ type, data }) {
     switch(type) {
       case 'COLLECTION_ENVIRONMENT':
         const { collectionPath, environmentName } = data;
         this.updateCollectionEnvironment({ collectionPath, environmentName });
         break;
+      case 'SIDEBAR':
+        const { width } = data;
+        this.updateSidebarWidth(width);
+        break;
       default:
         break;
     }