feat: enhance deep linking functionality in MainModal and Discover components

src/components/Elements/MainModal/Main.jsx

@@ -151,7 +151,9 @@ function MainModal({ modalClose, deepLinkData }) {
     historyIndexRef.current = -1;
     updateNavButtons();
     if (newTab === TAB_TYPES.DISCOVER) {
-      updateHash(`#${newTab}/all`);
+      const section = deepLinkData?.category || deepLinkData?.section || 'all';
+      const itemId = deepLinkData?.itemId ? `/${deepLinkData.itemId}` : '';
+      updateHash(`#${newTab}/${section}${itemId}`);
     } else if (newTab === TAB_TYPES.LIBRARY) {
       updateHash(`#${newTab}/added`);
     } else {

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

@@ -30,6 +30,15 @@ const Tabs = ({
         };
       }
     }
+    if (deepLinkData?.category && sections) {
+      const section = sections.find((s) => s.name === deepLinkData.category);
+      if (section) {
+        return {
+          label: t(section.label),
+          name: section.name,
+        };
+      }
+    }
     return {
       label: children[0]?.props.label,
       name: children[0]?.props.name,
@@ -78,6 +87,22 @@ const Tabs = ({
     }
   }, []);
 
+  // React to deep link changes (e.g., when navigating to a suggested pack from settings)
+  useEffect(() => {
+    if (deepLinkData && sections) {
+      const targetSection = deepLinkData.section || deepLinkData.category;
+      if (targetSection) {
+        const section = sections.find((s) => s.name === targetSection);
+        if (section && section.name !== currentName) {
+          setCurrentName(section.name);
+          if (contentRef.current) {
+            contentRef.current.scrollTop = 0;
+          }
+        }
+      }
+    }
+  }, [deepLinkData, sections, currentName]);
+
   // useLayoutEffect is appropriate here for synchronous state updates before paint
   useLayoutEffect(() => {
     if (navigationTrigger?.type === 'settings-section' && sections) {

src/features/misc/modals/Modals.jsx

@@ -108,10 +108,17 @@ const Modals = () => {
       }
     };
 
+    const handleHashChange = () => {
+      const linkData = parseDeepLink();
+      setDeepLinkData(linkData);
+    };
+
     EventBus.on('modal', handleModalOpen);
+    window.addEventListener('popstate', handleHashChange);
 
     return () => {
       EventBus.off('modal', handleModalOpen);
+      window.removeEventListener('popstate', handleHashChange);
     };
   }, []);
 

src/features/misc/views/Discover.jsx

@@ -342,6 +342,8 @@ function Discover(props) {
       current="discover"
       currentTab={props.currentTab}
       onSectionChange={props.onSectionChange}
+      sections={sections}
+      deepLinkData={props.deepLinkData}
     >
       {sections.map(({ label, name }) => (
         <div key={name} label={t(label)} name={name}>