feat: cross-modal tab navigation

src/components/Elements/MainModal/backend/TabContext.jsx

@@ -9,35 +9,49 @@ export const useTab = () => {
 
 export const TabProvider = ({ children }) => {
   const [activeTab, setActiveTab] = useState('settings');
-  const [subTab, setSubTab] = useState(variables.getMessage('modals.main.marketplace.product.overview'));
+  const [subTab, setSubTab] = useState(
+    variables.getMessage('modals.main.marketplace.product.overview'),
+  );
   const [subSection, setSubSection] = useState('');
   const [direction, setDirection] = useState(1);
 
-  const changeTab = (type) => {
+  const changeTab = (tab, subtab = '', section = '') => {
     const tabs = [
       { id: 'settings', label: 'Settings' },
       { id: 'addons', label: 'Addons' },
       { id: 'marketplace', label: 'Marketplace' },
     ];
 
-    const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
-    const newIndex = tabs.findIndex((tab) => tab.id === type);
+    const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+    const newIndex = tabs.findIndex((t) => t.id === tab);
 
     setDirection(newIndex > currentIndex ? 1 : -1);
-    setActiveTab(type);
-    if(type === 'settings') {
+    setSubTab(subtab);
+    if (tab === 'settings' && subtab === '' && section === '') {
       setSubTab(variables.getMessage('modals.main.marketplace.product.overview'));
-    } else {
-      setSubTab('');
     }
+
+    setActiveTab(tab);
+    setSubSection(section);
   };
 
   const setSection = (type) => {
     setSubTab(type);
-  }
+  };
 
   return (
-    <TabContext.Provider value={{ activeTab, subTab, direction, subSection, changeTab, setSubTab, setSection, setSubSection }}>
+    <TabContext.Provider
+      value={{
+        activeTab,
+        subTab,
+        direction,
+        subSection,
+        changeTab,
+        setSubTab,
+        setSection,
+        setSubSection,
+      }}
+    >
       {children}
     </TabContext.Provider>
   );