From 3687594cc4e61e3dc433fb3aa1d0e91a8192a05a Mon Sep 17 00:00:00 2001
From: Jonathan Gruber <jonathan.gruber@gridfuse.com>
Date: Tue, 24 Oct 2023 13:17:47 +0200
Subject: [PATCH] feat(#762): Add menu entry for preferences and add shortcut
 fora it

---
 packages/bruno-app/src/components/Sidebar/index.js        | 8 ++++----
 packages/bruno-app/src/providers/App/useIpcEvents.js      | 7 ++++++-
 packages/bruno-app/src/providers/ReduxStore/slices/app.js | 5 +++++
 packages/bruno-electron/src/app/menu-template.js          | 8 ++++++++
 packages/bruno-electron/src/ipc/preferences.js            | 4 ++++
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index 890761971..a6df7141c 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -7,7 +7,7 @@ import Preferences from 'components/Preferences';
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { IconSettings } from '@tabler/icons';
-import { updateLeftSidebarWidth, updateIsDragging } from 'providers/ReduxStore/slices/app';
+import { updateLeftSidebarWidth, updateIsDragging, showPreferences } from 'providers/ReduxStore/slices/app';
 import { useTheme } from 'providers/Theme';
 
 const MIN_LEFT_SIDEBAR_WIDTH = 222;
@@ -15,7 +15,7 @@ const MAX_LEFT_SIDEBAR_WIDTH = 600;
 
 const Sidebar = () => {
   const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
-  const [preferencesOpen, setPreferencesOpen] = useState(false);
+  const preferencesOpen = useSelector((state) => state.app.showPreferences);
 
   const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
 
@@ -78,7 +78,7 @@ const Sidebar = () => {
     <StyledWrapper className="flex relative h-screen">
       <aside>
         <div className="flex flex-row h-screen w-full">
-          {preferencesOpen && <Preferences onClose={() => setPreferencesOpen(false)} />}
+          {preferencesOpen && <Preferences onClose={() => dispatch(showPreferences(false))} />}
 
           <div className="flex flex-col w-full" style={{ width: asideWidth }}>
             <div className="flex flex-col flex-grow">
@@ -92,7 +92,7 @@ const Sidebar = () => {
                   size={18}
                   strokeWidth={1.5}
                   className="mr-2  hover:text-gray-700"
-                  onClick={() => setPreferencesOpen(true)}
+                  onClick={() => dispatch(showPreferences(true))}
                 />
               </div>
               <div className="pl-1" style={{ position: 'relative', top: '3px' }}>
diff --git a/packages/bruno-app/src/providers/App/useIpcEvents.js b/packages/bruno-app/src/providers/App/useIpcEvents.js
index 8e87b1cf9..e5c1bdb64 100644
--- a/packages/bruno-app/src/providers/App/useIpcEvents.js
+++ b/packages/bruno-app/src/providers/App/useIpcEvents.js
@@ -14,7 +14,7 @@ import {
   runFolderEvent,
   brunoConfigUpdateEvent
 } from 'providers/ReduxStore/slices/collections';
-import { updatePreferences } from 'providers/ReduxStore/slices/app';
+import { showPreferences, updatePreferences } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import { openCollectionEvent, collectionAddEnvFileEvent } from 'providers/ReduxStore/slices/collections/actions';
 import { isElectron } from 'utils/common/platform';
@@ -127,6 +127,10 @@ const useIpcEvents = () => {
       dispatch(brunoConfigUpdateEvent(val))
     );
 
+    const showPreferencesListener = ipcRenderer.on('main:open-preferences', () => {
+      dispatch(showPreferences(true));
+    });
+
     const removePreferencesUpdatesListener = ipcRenderer.on('main:load-preferences', (val) => {
       dispatch(updatePreferences(val));
     });
@@ -143,6 +147,7 @@ const useIpcEvents = () => {
       removeProcessEnvUpdatesListener();
       removeConsoleLogListener();
       removeConfigUpdatesListener();
+      showPreferencesListener();
       removePreferencesUpdatesListener();
     };
   }, [isElectron]);
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/app.js b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
index 6f5c849f9..4605f051a 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/app.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
@@ -7,6 +7,7 @@ const initialState = {
   leftSidebarWidth: 222,
   screenWidth: 500,
   showHomePage: false,
+  showPreferences: false,
   preferences: {
     request: {
       sslVerification: true,
@@ -40,6 +41,9 @@ export const appSlice = createSlice({
     hideHomePage: (state) => {
       state.showHomePage = false;
     },
+    showPreferences: (state, action) => {
+      state.showPreferences = action.payload;
+    },
     updatePreferences: (state, action) => {
       state.preferences = action.payload;
     }
@@ -53,6 +57,7 @@ export const {
   updateIsDragging,
   showHomePage,
   hideHomePage,
+  showPreferences,
   updatePreferences
 } = appSlice.actions;
 
diff --git a/packages/bruno-electron/src/app/menu-template.js b/packages/bruno-electron/src/app/menu-template.js
index cc0f1267e..c91740af1 100644
--- a/packages/bruno-electron/src/app/menu-template.js
+++ b/packages/bruno-electron/src/app/menu-template.js
@@ -12,6 +12,14 @@ const template = [
           ipcMain.emit('main:open-collection');
         }
       },
+      {
+        label: 'Preferences',
+        accelerator: 'CommandOrControl+,',
+        click() {
+          ipcMain.emit('main:open-preferences');
+        }
+      },
+      { type: 'separator' },
       { role: 'quit' }
     ]
   },
diff --git a/packages/bruno-electron/src/ipc/preferences.js b/packages/bruno-electron/src/ipc/preferences.js
index 679c74e37..f07c79c06 100644
--- a/packages/bruno-electron/src/ipc/preferences.js
+++ b/packages/bruno-electron/src/ipc/preferences.js
@@ -23,6 +23,10 @@ const registerPreferencesIpc = (mainWindow, watcher, lastOpenedCollections) => {
     }
   });
 
+  ipcMain.on('main:open-preferences', () => {
+    mainWindow.webContents.send('main:open-preferences');
+  });
+
   ipcMain.handle('renderer:save-preferences', async (event, preferences) => {
     try {
       await savePreferences(preferences);