feat(marketplace): use web ui

src/components/Elements/MainModal/Main.jsx

@@ -26,6 +26,7 @@ function MainModal({ modalClose, deepLinkData }) {
   const [productView, setProductView] = useState(null);
   const [resetDiscoverToAll, setResetDiscoverToAll] = useState(false);
   const [navigationTrigger, setNavigationTrigger] = useState(null);
+  const [iframeBreadcrumbs, setIframeBreadcrumbs] = useState([]);
 
   // Clear product view when changing tabs
   useEffect(() => {
@@ -172,6 +173,7 @@ function MainModal({ modalClose, deepLinkData }) {
         currentTab={currentTab}
         currentSection={currentSection}
         productView={productView}
+        iframeBreadcrumbs={iframeBreadcrumbs}
         onTabChange={handleChangeTab}
         onClose={modalClose}
         onBack={handleBack}
@@ -187,6 +189,7 @@ function MainModal({ modalClose, deepLinkData }) {
           currentTab={currentTab}
           onSectionChange={handleSectionChange}
           onProductView={handleProductView}
+          onBreadcrumbsChange={setIframeBreadcrumbs}
           resetToAll={resetDiscoverToAll}
           onResetToAll={handleResetDiscoverToAll}
           navigationTrigger={navigationTrigger}

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

@@ -47,8 +47,8 @@ const Tabs = ({ children, navbar = false, currentTab: activeTab, onSectionChange
     setShowReminder(false);
   };
 
-  // Only show sidebar for Settings tab
-  const showSidebar = activeTab === TAB_TYPES.SETTINGS;
+  // Show sidebar for Settings and Discover tabs
+  const showSidebar = activeTab === TAB_TYPES.SETTINGS || activeTab === TAB_TYPES.DISCOVER;
 
   return (
     <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>

src/components/Elements/MainModal/components/ModalTopBar.jsx

@@ -20,6 +20,7 @@ function ModalTopBar({
   currentTab,
   currentSection,
   productView,
+  iframeBreadcrumbs,
   onTabChange,
   onClose,
   onBack,
@@ -34,7 +35,7 @@ function ModalTopBar({
     : '';
 
   // Determine breadcrumb path with click handlers
-  const breadcrumbPath = [];
+  let breadcrumbPath = [];
 
   if (currentTabLabel) {
     breadcrumbPath.push({
@@ -42,7 +43,26 @@ function ModalTopBar({
       onClick: productView ? productView.onBackToAll : null, // Clickable if viewing a product
     });
 
-    if (productView) {
+    // Check if we have iframe breadcrumbs (from Discover iframe)
+    // If so, only use the last item (the item name) and keep our section
+    if (iframeBreadcrumbs && iframeBreadcrumbs.length > 0) {
+      // Get the last breadcrumb item (the item name)
+      const lastCrumb = iframeBreadcrumbs[iframeBreadcrumbs.length - 1];
+
+      // Add current section if available
+      if (currentSection) {
+        breadcrumbPath.push({
+          label: currentSection,
+          onClick: () => onBack(), // Clickable to go back
+        });
+      }
+
+      // Add the item name from iframe
+      breadcrumbPath.push({
+        label: lastCrumb.label,
+        onClick: null, // Current item - not clickable
+      });
+    } else if (productView) {
       console.log('ModalTopBar productView:', productView);
       console.log('fromCollection:', productView.fromCollection, 'isCollection:', productView.isCollection, 'collectionTitle:', productView.collectionTitle);