From 7465b1d6a207ee83f56690bfa80b1de07776655f Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 19:32:39 +0700
Subject: [PATCH] Move mode toggle to TopNav, view toggle to map right

- Add [Explore/Quote] mode toggle to MainNavigation.vue (TopNav)
- Remove mode toggle from CatalogPage.vue (now in header)
- Move [Offers/Hubs/Suppliers] view toggle from top-left to top-right on map
- View toggle now visible in both modes (Explore and Quote)
- Simplify mobile layout to show only view toggle
---
 app/components/navigation/MainNavigation.vue | 31 +++++++++++-
 app/components/page/CatalogPage.vue          | 53 ++------------------
 app/layouts/topnav.vue                       |  7 ++-
 3 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index d802376..223e050 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -67,6 +67,28 @@
         </div>
       </div>
 
+      <!-- Catalog mode toggle (only on catalog pages) -->
+      <div v-if="showCatalogModeToggle" class="flex-shrink-0 py-2.5">
+        <div class="tabs tabs-boxed tabs-sm bg-base-200">
+          <button
+            class="tab"
+            :class="{ 'tab-active': catalogMode === 'explore' }"
+            @click="$emit('set-catalog-mode', 'explore')"
+          >
+            <Icon name="lucide:compass" size="14" class="mr-1" />
+            {{ $t('catalog.modes.explore') }}
+          </button>
+          <button
+            class="tab"
+            :class="{ 'tab-active': catalogMode === 'quote' }"
+            @click="$emit('set-catalog-mode', 'quote')"
+          >
+            <Icon name="lucide:search" size="14" class="mr-1" />
+            {{ $t('catalog.modes.quote') }}
+          </button>
+        </div>
+      </div>
+
       <!-- Right: AI + Globe + Team + User -->
       <div class="flex items-center gap-1 flex-shrink-0 py-2.5">
         <!-- AI Assistant button -->
@@ -188,6 +210,8 @@
 import type { SelectMode } from '~/composables/useCatalogSearch'
 import { entityColors } from '~/composables/useCatalogSearch'
 
+import type { CatalogMode } from '~/composables/useCatalogSearch'
+
 const props = defineProps<{
   sessionChecked?: boolean
   loggedIn?: boolean
@@ -207,6 +231,9 @@ const props = defineProps<{
   availableChips?: Array<{ type: string; label: string }>
   selectMode?: SelectMode
   searchQuery?: string
+  // Catalog mode props
+  showCatalogModeToggle?: boolean
+  catalogMode?: CatalogMode
 }>()
 
 defineEmits([
@@ -219,7 +246,9 @@ defineEmits([
   'cancel-select',
   'edit-token',
   'remove-token',
-  'update:search-query'
+  'update:search-query',
+  // Catalog mode
+  'set-catalog-mode'
 ])
 
 const localePath = useLocalePath()
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index f48cdfc..e3a773f 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -28,30 +28,8 @@
       </ClientOnly>
     </div>
 
-    <!-- Mode tabs (top RIGHT overlay) -->
+    <!-- View toggle (top RIGHT overlay) - works in both modes -->
     <div class="absolute top-4 right-4 z-20 hidden lg:block">
-      <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg">
-        <button
-          class="tab"
-          :class="{ 'tab-active': catalogMode === 'explore' }"
-          @click="setCatalogMode('explore')"
-        >
-          <Icon name="lucide:compass" size="16" class="mr-1" />
-          {{ $t('catalog.modes.explore') }}
-        </button>
-        <button
-          class="tab"
-          :class="{ 'tab-active': catalogMode === 'quote' }"
-          @click="setCatalogMode('quote')"
-        >
-          <Icon name="lucide:search" size="16" class="mr-1" />
-          {{ $t('catalog.modes.quote') }}
-        </button>
-      </div>
-    </div>
-
-    <!-- View toggle (top LEFT overlay) - for Explore mode -->
-    <div v-if="catalogMode === 'explore'" class="absolute top-4 left-4 z-20 hidden lg:block">
       <div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
         <button
           class="btn btn-sm join-item"
@@ -81,7 +59,6 @@
     <div
       v-if="showPanel"
       class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
-      :class="catalogMode === 'explore' ? 'top-16' : 'top-4'"
     >
       <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
         <slot name="panel" />
@@ -90,10 +67,9 @@
 
     <!-- Mobile bottom sheet -->
     <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
-      <!-- Mobile toggles -->
-      <div class="flex justify-between items-center px-4 mb-2">
-        <!-- View toggle (Explore mode only) -->
-        <div v-if="catalogMode === 'explore'" class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
+      <!-- Mobile view toggle -->
+      <div class="flex justify-end px-4 mb-2">
+        <div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
           <button
             class="btn btn-xs join-item"
             :class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -116,25 +92,6 @@
             {{ $t('catalog.views.suppliers') }}
           </button>
         </div>
-        <div v-else />
-
-        <!-- Mode toggle -->
-        <div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg tabs-sm">
-          <button
-            class="tab tab-sm"
-            :class="{ 'tab-active': catalogMode === 'explore' }"
-            @click="setCatalogMode('explore')"
-          >
-            {{ $t('catalog.modes.explore') }}
-          </button>
-          <button
-            class="tab tab-sm"
-            :class="{ 'tab-active': catalogMode === 'quote' }"
-            @click="setCatalogMode('quote')"
-          >
-            {{ $t('catalog.modes.quote') }}
-          </button>
-        </div>
       </div>
 
       <!-- Mobile panel (collapsible) - only when showPanel is true -->
@@ -162,7 +119,7 @@
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
-const { mapViewMode, setMapViewMode, catalogMode, setCatalogMode } = useCatalogSearch()
+const { mapViewMode, setMapViewMode } = useCatalogSearch()
 
 interface MapItem {
   uuid: string
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index e577f73..e7a693d 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -16,6 +16,8 @@
         :available-chips="availableChips"
         :select-mode="selectMode"
         :search-query="searchQuery"
+        :show-catalog-mode-toggle="isCatalogSection"
+        :catalog-mode="catalogMode"
         @toggle-theme="toggleTheme"
         @sign-out="onClickSignOut"
         @sign-in="signIn()"
@@ -25,6 +27,7 @@
         @edit-token="editFilter"
         @remove-token="removeFilter"
         @update:search-query="searchQuery = $event"
+        @set-catalog-mode="setCatalogMode"
       />
 
       <!-- Sub Navigation (section-specific tabs) - only for non-catalog sections -->
@@ -56,7 +59,9 @@ const {
   startSelect,
   cancelSelect,
   removeFilter,
-  editFilter
+  editFilter,
+  catalogMode,
+  setCatalogMode
 } = useCatalogSearch()
 
 // Collapsible header for catalog pages