diff --git a/src/components/Elements/MainModal/Main.jsx b/src/components/Elements/MainModal/Main.jsx index e4c47361..07145829 100644 --- a/src/components/Elements/MainModal/Main.jsx +++ b/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) => { diff --git a/src/components/Elements/MainModal/backend/Tabs.jsx b/src/components/Elements/MainModal/backend/Tabs.jsx index f24d5e34..44a47543 100644 --- a/src/components/Elements/MainModal/backend/Tabs.jsx +++ b/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]); diff --git a/src/features/misc/modals/Modals.jsx b/src/features/misc/modals/Modals.jsx index c90e7227..5465e0ec 100644 --- a/src/features/misc/modals/Modals.jsx +++ b/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'); + } } }; diff --git a/src/features/misc/views/Settings.jsx b/src/features/misc/views/Settings.jsx index e5ac493e..e72fbcda 100644 --- a/src/features/misc/views/Settings.jsx +++ b/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 }) => (