feat: implement deep linking support for marketplace items and tabs

src/components/Elements/MainModal/Main.jsx

@@ -1,11 +1,12 @@
 import variables from 'config/variables';
-import { Suspense, lazy, useState, memo } from 'react';
+import { Suspense, lazy, useState, memo, useEffect } from 'react';
 import { MdClose } from 'react-icons/md';
 
 import './scss/index.scss';
 import { Tooltip } from 'components/Elements';
 import ModalLoader from './components/ModalLoader';
 import { TAB_TYPES } from './constants/tabConfig';
+import { updateHash, onHashChange } from 'utils/deepLinking';
 
 const Settings = lazy(() => import('../../../features/misc/views/Settings'));
 const Addons = lazy(() => import('../../../features/misc/views/Addons'));
@@ -18,8 +19,27 @@ const TAB_COMPONENTS = {
   [TAB_TYPES.MARKETPLACE]: Marketplace,
 };
 
-function MainModal({ modalClose }) {
-  const [currentTab, setCurrentTab] = useState(TAB_TYPES.SETTINGS);
+function MainModal({ modalClose, deepLinkData }) {
+  // Initialize with deep link tab if provided, otherwise default to settings
+  const initialTab = deepLinkData?.tab || TAB_TYPES.SETTINGS;
+  const [currentTab, setCurrentTab] = useState(initialTab);
+
+  useEffect(() => {
+    // Listen for hash changes while modal is open
+    const cleanup = onHashChange((linkData) => {
+      if (linkData && linkData.tab !== currentTab) {
+        setCurrentTab(linkData.tab);
+      }
+    });
+
+    return cleanup;
+  }, [currentTab]);
+
+  const handleChangeTab = (newTab) => {
+    setCurrentTab(newTab);
+    // Update URL hash when tab changes
+    updateHash(`#${newTab}`);
+  };
 
   const TabComponent = TAB_COMPONENTS[currentTab] || Settings;
 
@@ -35,7 +55,7 @@ function MainModal({ modalClose }) {
         </span>
       </Tooltip>
       <Suspense fallback={<ModalLoader />}>
-        <TabComponent changeTab={setCurrentTab} />
+        <TabComponent changeTab={handleChangeTab} deepLinkData={deepLinkData} />
       </Suspense>
     </div>
   );