feat: deep links for rest of settings

src/components/Elements/MainModal/Main.jsx

@@ -54,6 +54,16 @@ function MainModal({ modalClose, deepLinkData }) {
           setCurrentTab(linkData.tab);
         }
 
+        // Handle settings section navigation
+        if (linkData.tab === TAB_TYPES.SETTINGS && linkData.section) {
+          setNavigationTrigger({
+            type: 'settings-section',
+            data: linkData.section,
+            timestamp: Date.now(),
+          });
+          return;
+        }
+
         // Handle product and collection navigation
         if (linkData.itemId && linkData.collection && linkData.fromCollection) {
           // Product viewed from within a collection
@@ -119,7 +129,7 @@ function MainModal({ modalClose, deepLinkData }) {
     }
   };
 
-  const handleSectionChange = (section) => {
+  const handleSectionChange = (section, sectionName) => {
     setCurrentSection(section);
     // Update URL hash when section changes
     if (currentTab === TAB_TYPES.DISCOVER) {
@@ -135,10 +145,10 @@ function MainModal({ modalClose, deepLinkData }) {
       if (sectionKey) {
         updateHash(`#${currentTab}/${sectionKey}`);
       }
+    } else if (currentTab === TAB_TYPES.SETTINGS && sectionName) {
+      // For Settings tab, update with the section name
+      updateHash(`#${currentTab}/${sectionName}`, false);
     }
-
-    // Don't add section changes to history - they're automatic
-    // Only track user-initiated navigation (tab switches and product views)
   };
 
   const handleProductView = (product) => {

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

@@ -11,9 +11,30 @@ const Tabs = ({
   currentTab: activeTab,
   onSectionChange,
   resetToFirst,
+  deepLinkData,
+  navigationTrigger,
+  sections,
 }) => {
-  const [currentTab, setCurrentTab] = useState(children[0]?.props.label);
-  const [currentName, setCurrentName] = useState(children[0]?.props.name);
+  // Find initial section from deep link if available
+  const getInitialSection = () => {
+    if (deepLinkData?.section && sections) {
+      const section = sections.find((s) => s.name === deepLinkData.section);
+      if (section) {
+        return {
+          label: variables.getMessage(section.label),
+          name: section.name,
+        };
+      }
+    }
+    return {
+      label: children[0]?.props.label,
+      name: children[0]?.props.name,
+    };
+  };
+
+  const initial = getInitialSection();
+  const [currentTab, setCurrentTab] = useState(initial.label);
+  const [currentName, setCurrentName] = useState(initial.name);
   const [showReminder, setShowReminder] = useState(localStorage.getItem('showReminder') === 'true');
 
   const handleTabClick = (tab, name) => {
@@ -24,26 +45,38 @@ const Tabs = ({
     setCurrentTab(tab);
     setCurrentName(name);
 
-    // Notify parent of section change
+    // Notify parent of section change with both label and name
     if (onSectionChange) {
-      onSectionChange(tab);
+      onSectionChange(tab, name);
     }
   };
 
   // Notify parent of initial section on mount
   useEffect(() => {
     if (onSectionChange && currentTab) {
-      onSectionChange(currentTab);
+      onSectionChange(currentTab, currentName);
     }
   }, []);
 
+  // Handle navigation trigger for settings sections (popstate)
+  useEffect(() => {
+    if (navigationTrigger?.type === 'settings-section' && sections) {
+      const section = sections.find((s) => s.name === navigationTrigger.data);
+      if (section) {
+        const label = variables.getMessage(section.label);
+        setCurrentTab(label);
+        setCurrentName(section.name);
+      }
+    }
+  }, [navigationTrigger, sections]);
+
   // Reset to first tab when requested
   useEffect(() => {
     if (resetToFirst) {
       setCurrentTab(children[0]?.props.label);
       setCurrentName(children[0]?.props.name);
       if (onSectionChange) {
-        onSectionChange(children[0]?.props.label);
+        onSectionChange(children[0]?.props.label, children[0]?.props.name);
       }
     }
   }, [resetToFirst]);

src/features/misc/modals/Modals.jsx

@@ -7,7 +7,7 @@ import Navbar from '../../navbar/Navbar';
 import Preview from '../../helpers/preview/Preview';
 
 import EventBus from 'utils/eventbus';
-import { parseDeepLink, shouldAutoOpenModal } from 'utils/deepLinking';
+import { parseDeepLink, shouldAutoOpenModal, updateHash } from 'utils/deepLinking';
 
 import Welcome from 'features/welcome/Welcome';
 
@@ -88,6 +88,10 @@ const Modals = () => {
 
     if (action !== false) {
       variables.stats.postEvent('modal', `Opened ${type.replace('Modal', '')}`);
+      // Set initial hash when opening main modal
+      if (type === 'mainModal') {
+        updateHash('#settings');
+      }
     }
   };
 

src/features/misc/views/Settings.jsx

@@ -95,6 +95,9 @@ function Settings(props) {
       current="settings"
       currentTab={props.currentTab}
       onSectionChange={props.onSectionChange}
+      deepLinkData={props.deepLinkData}
+      navigationTrigger={props.navigationTrigger}
+      sections={sections}
     >
       {sections.map(({ label, name, component: Component }) => (
         <div key={name} label={variables.getMessage(label)} name={name}>