feat(modal): new navigation with back and forth arrow

src/features/marketplace/views/Browse.jsx

@@ -147,7 +147,24 @@ class Marketplace extends PureComponent {
 
       // Update URL hash with item ID for deep linking
       if (info.data?.id) {
-        updateHash(`#marketplace/${info.data.type}/${info.data.id}`);
+        updateHash(`#discover/${info.data.type}/${info.data.id}`);
+      }
+
+      // Notify parent about product view for breadcrumbs
+      if (this.props.onProductView) {
+        this.props.onProductView({
+          id: info.data.id,
+          type: info.data.type,
+          name: info.data.display_name || info.data.name,
+          onBack: () => this.toggle('main'),
+          onBackToAll: () => {
+            this.toggle('main');
+            updateHash('#discover/all');
+            if (this.props.onResetToAll) {
+              this.props.onResetToAll();
+            }
+          },
+        });
       }
 
       document.querySelector('#modal').scrollTop = 0;
@@ -171,11 +188,16 @@ class Marketplace extends PureComponent {
       });
 
       // Update hash for collection deep linking
-      updateHash(`#marketplace/collection/${data}`);
+      updateHash(`#discover/collection/${data}`);
     } else {
       this.setState({ item: {}, relatedItems: [] });
       // Clear hash when returning to main view
-      updateHash('#marketplace');
+      updateHash(`#discover/${this.props.type}`);
+
+      // Clear product view for breadcrumbs
+      if (this.props.onProductView) {
+        this.props.onProductView(null);
+      }
     }
   }
 
@@ -331,6 +353,21 @@ class Marketplace extends PureComponent {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    // Handle navigation trigger changes
+    if (this.props.navigationTrigger && this.props.navigationTrigger !== prevProps.navigationTrigger) {
+      const { type, data } = this.props.navigationTrigger;
+
+      if (type === 'product' && data) {
+        // Navigate to product
+        this.toggle('item', { id: data.id, type: data.type });
+      } else if (type === 'main' || type === 'section') {
+        // Navigate to main view (browse/listing page)
+        this.toggle('main');
+      }
+    }
+  }
+
   componentWillUnmount() {
     // stop making requests
     this.controller.abort();

src/features/marketplace/views/ItemPage.jsx

@@ -185,7 +185,7 @@ class ItemPage extends PureComponent {
             modalClose={() => this.setState({ shareModal: false })}
           />
         </Modal>
-        <Header
+        {/* <Header
           title={
             this.props.addons
               ? variables.getMessage('modals.main.addons.added')
@@ -200,7 +200,7 @@ class ItemPage extends PureComponent {
           }
           report={false}
           goBack={this.props.toggleFunction}
-        />
+        /> */}
         <div className="itemPage">
           <div className="itemShowcase">
             <div className="subHeader">

src/features/misc/views/Discover.jsx

@@ -4,26 +4,71 @@ import { memo } from 'react';
 import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
 import MarketplaceTab from '../../marketplace/views/Browse';
 
-function Discover({ changeTab, deepLinkData, currentTab }) {
+function Discover({
+  changeTab,
+  deepLinkData,
+  currentTab,
+  onSectionChange,
+  onProductView,
+  resetToAll,
+  onResetToAll,
+  navigationTrigger,
+}) {
   return (
-    <Tabs changeTab={(type) => changeTab(type)} current="discover" currentTab={currentTab}>
+    <Tabs
+      changeTab={(type) => changeTab(type)}
+      current="discover"
+      currentTab={currentTab}
+      onSectionChange={onSectionChange}
+      resetToFirst={resetToAll}
+    >
       <div label={variables.getMessage('modals.main.marketplace.all')} name="all">
-        <MarketplaceTab type="all" deepLinkData={deepLinkData} />
+        <MarketplaceTab
+          type="all"
+          deepLinkData={deepLinkData}
+          onProductView={onProductView}
+          onResetToAll={onResetToAll}
+          navigationTrigger={navigationTrigger}
+        />
       </div>
       <div label={variables.getMessage('modals.main.marketplace.photo_packs')} name="photo_packs">
-        <MarketplaceTab type="photo_packs" deepLinkData={deepLinkData} />
+        <MarketplaceTab
+          type="photo_packs"
+          deepLinkData={deepLinkData}
+          onProductView={onProductView}
+          onResetToAll={onResetToAll}
+          navigationTrigger={navigationTrigger}
+        />
       </div>
       <div label={variables.getMessage('modals.main.marketplace.quote_packs')} name="quote_packs">
-        <MarketplaceTab type="quote_packs" deepLinkData={deepLinkData} />
+        <MarketplaceTab
+          type="quote_packs"
+          deepLinkData={deepLinkData}
+          onProductView={onProductView}
+          onResetToAll={onResetToAll}
+          navigationTrigger={navigationTrigger}
+        />
       </div>
       <div
         label={variables.getMessage('modals.main.marketplace.preset_settings')}
         name="preset_settings"
       >
-        <MarketplaceTab type="preset_settings" deepLinkData={deepLinkData} />
+        <MarketplaceTab
+          type="preset_settings"
+          deepLinkData={deepLinkData}
+          onProductView={onProductView}
+          onResetToAll={onResetToAll}
+          navigationTrigger={navigationTrigger}
+        />
       </div>
       <div label={variables.getMessage('modals.main.marketplace.collections')} name="collections">
-        <MarketplaceTab type="collections" deepLinkData={deepLinkData} />
+        <MarketplaceTab
+          type="collections"
+          deepLinkData={deepLinkData}
+          onProductView={onProductView}
+          onResetToAll={onResetToAll}
+          navigationTrigger={navigationTrigger}
+        />
       </div>
     </Tabs>
   );

src/features/misc/views/Library.jsx

@@ -7,7 +7,12 @@ import Create from '../../marketplace/views/Create';
 
 function Library(props) {
   return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="library" currentTab={props.currentTab}>
+    <Tabs
+      changeTab={(type) => props.changeTab(type)}
+      current="library"
+      currentTab={props.currentTab}
+      onSectionChange={props.onSectionChange}
+    >
       <div label={variables.getMessage('modals.main.addons.added')} name="added">
         <Added />
       </div>

src/features/misc/views/Settings.jsx

@@ -90,7 +90,12 @@ const sections = [
 
 function Settings(props) {
   return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="settings" currentTab={props.currentTab}>
+    <Tabs
+      changeTab={(type) => props.changeTab(type)}
+      current="settings"
+      currentTab={props.currentTab}
+      onSectionChange={props.onSectionChange}
+    >
       {sections.map(({ label, name, component: Component }) => (
         <div key={name} label={variables.getMessage(label)} name={name}>
           <Component />