Feat: re-arrange tabs with Shift+Ctrl+PageUp/Down

Author: joeytwiddle

packages/bruno-app/src/providers/Hotkeys/index.js

@@ -13,7 +13,7 @@ import {
   saveFolderRoot
 } from 'providers/ReduxStore/slices/collections/actions';
 import { findCollectionByUid, findItemInCollection } from 'utils/collections';
-import { closeTabs, switchTab } from 'providers/ReduxStore/slices/tabs';
+import { closeTabs, reorderTabs, switchTab } from 'providers/ReduxStore/slices/tabs';
 import { getKeyBindingsForActionAllOS } from './keyMappings';
 
 export const HotkeysContext = React.createContext();
@@ -211,6 +211,30 @@ export const HotkeysProvider = (props) => {
     };
   }, [activeTabUid, tabs, collections, dispatch]);
 
+  // Move tab left
+  useEffect(() => {
+    Mousetrap.bind([...getKeyBindingsForActionAllOS('moveTabLeft')], (e) => {
+      dispatch(reorderTabs({ direction: -1 }));
+      return false; // this stops the event bubbling
+    });
+
+    return () => {
+      Mousetrap.unbind([...getKeyBindingsForActionAllOS('moveTabLeft')]);
+    };
+  }, [dispatch]);
+
+  // Move tab right
+  useEffect(() => {
+    Mousetrap.bind([...getKeyBindingsForActionAllOS('moveTabRight')], (e) => {
+      dispatch(reorderTabs({ direction: 1 }));
+      return false; // this stops the event bubbling
+    });
+
+    return () => {
+      Mousetrap.unbind([...getKeyBindingsForActionAllOS('moveTabRight')]);
+    };
+  }, [dispatch]);
+
   return (
     <HotkeysContext.Provider {...props} value="hotkey">
       {showEnvSettingsModal && (

packages/bruno-app/src/providers/Hotkeys/keyMappings.js

@@ -20,6 +20,16 @@ const KeyMapping = {
     windows: 'ctrl+pagedown',
     name: 'Switch to Next Tab'
   },
+  moveTabLeft: {
+    mac: 'ctrl+shift+pageup',
+    windows: 'ctrl+shift+pageup',
+    name: 'Move Tab Left'
+  },
+  moveTabRight: {
+    mac: 'ctrl+shift+pagedown',
+    windows: 'ctrl+shift+pagedown',
+    name: 'Move Tab Right'
+  },
   closeAllTabs: { mac: 'command+shift+w', windows: 'ctrl+shift+w', name: 'Close All Tabs' }
 };
 

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

@@ -162,6 +162,20 @@ export const tabsSlice = createSlice({
       } else{
         console.error("Tab not found!")
       }
+    },
+    reorderTabs: (state, action) => {
+      const activeTab = find(state.tabs, (t) => t.uid === state.activeTabUid);
+      if (!activeTab) return;
+
+      const currentIndex = state.tabs.findIndex((t) => t.uid === state.activeTabUid);
+      const direction = action.payload.direction;
+      const newIndex = currentIndex + direction;
+
+      if (newIndex >= 0 && newIndex < state.tabs.length) {
+        const temp = state.tabs[currentIndex];
+        state.tabs[currentIndex] = state.tabs[newIndex];
+        state.tabs[newIndex] = temp;
+      }
     }
   }
 });
@@ -175,7 +189,8 @@ export const {
   updateResponsePaneTab,
   closeTabs,
   closeAllCollectionTabs,
-  makeTabPermanent
+  makeTabPermanent,
+  reorderTabs
 } = tabsSlice.actions;
 
 export default tabsSlice.reducer;