From 4c6f5abd78fa76246f694130bd8b53ecf82ccde8 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 10:25:33 +0700
Subject: [PATCH] UI fixes: identical headers, panel styling, view toggle
 icons, sync map view

- Show mode toggle on all pages (not just catalog)
- Panel background base-300, top-20 spacing from navbar
- View toggle with colored icons in circles
- Sync mapViewMode when selecting (supplier chip -> suppliers view)
---
 app/components/page/CatalogPage.vue | 45 +++++++++++++++++++----------
 app/layouts/topnav.vue              |  2 +-
 app/pages/catalog/index.vue         | 18 +++++++++---
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index e3a773f..073422e 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -29,27 +29,36 @@
     </div>
 
     <!-- View toggle (top RIGHT overlay) - works in both modes -->
-    <div class="absolute top-4 right-4 z-20 hidden lg:block">
-      <div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
+    <div class="absolute top-20 right-4 z-20 hidden lg:block">
+      <div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
         <button
-          class="btn btn-sm join-item"
+          class="btn btn-sm join-item gap-2"
           :class="{ 'btn-active': mapViewMode === 'offers' }"
           @click="setMapViewMode('offers')"
         >
+          <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
+            <Icon name="lucide:shopping-bag" size="12" class="text-white" />
+          </span>
           {{ $t('catalog.views.offers') }}
         </button>
         <button
-          class="btn btn-sm join-item"
+          class="btn btn-sm join-item gap-2"
           :class="{ 'btn-active': mapViewMode === 'hubs' }"
           @click="setMapViewMode('hubs')"
         >
+          <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
+            <Icon name="lucide:warehouse" size="12" class="text-white" />
+          </span>
           {{ $t('catalog.views.hubs') }}
         </button>
         <button
-          class="btn btn-sm join-item"
+          class="btn btn-sm join-item gap-2"
           :class="{ 'btn-active': mapViewMode === 'suppliers' }"
           @click="setMapViewMode('suppliers')"
         >
+          <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
+            <Icon name="lucide:factory" size="12" class="text-white" />
+          </span>
           {{ $t('catalog.views.suppliers') }}
         </button>
       </div>
@@ -58,9 +67,9 @@
     <!-- Left overlay panel (shown when showPanel is true) -->
     <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="absolute top-20 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
     >
-      <div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
+      <div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
         <slot name="panel" />
       </div>
     </div>
@@ -69,27 +78,33 @@
     <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
       <!-- Mobile view toggle -->
       <div class="flex justify-end px-4 mb-2">
-        <div class="join bg-white/95 backdrop-blur shadow-lg rounded-lg">
+        <div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg">
           <button
-            class="btn btn-xs join-item"
+            class="btn btn-xs join-item gap-1"
             :class="{ 'btn-active': mapViewMode === 'offers' }"
             @click="setMapViewMode('offers')"
           >
-            {{ $t('catalog.views.offers') }}
+            <span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #f97316">
+              <Icon name="lucide:shopping-bag" size="10" class="text-white" />
+            </span>
           </button>
           <button
-            class="btn btn-xs join-item"
+            class="btn btn-xs join-item gap-1"
             :class="{ 'btn-active': mapViewMode === 'hubs' }"
             @click="setMapViewMode('hubs')"
           >
-            {{ $t('catalog.views.hubs') }}
+            <span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #22c55e">
+              <Icon name="lucide:warehouse" size="10" class="text-white" />
+            </span>
           </button>
           <button
-            class="btn btn-xs join-item"
+            class="btn btn-xs join-item gap-1"
             :class="{ 'btn-active': mapViewMode === 'suppliers' }"
             @click="setMapViewMode('suppliers')"
           >
-            {{ $t('catalog.views.suppliers') }}
+            <span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
+              <Icon name="lucide:factory" size="10" class="text-white" />
+            </span>
           </button>
         </div>
       </div>
@@ -97,7 +112,7 @@
       <!-- Mobile panel (collapsible) - only when showPanel is true -->
       <div
         v-if="showPanel"
-        class="bg-white/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
+        class="bg-base-300/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
         :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
       >
         <!-- Drag handle -->
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 00eba51..f43262d 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -21,7 +21,7 @@
         :hub-label="hubLabel"
         :quantity="quantity"
         :can-search="canSearch"
-        :show-mode-toggle="isCatalogSection"
+        :show-mode-toggle="true"
         @toggle-theme="toggleTheme"
         @set-catalog-mode="setCatalogMode"
         @sign-out="onClickSignOut"
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index 8dc66c0..ce5c0a0 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -54,6 +54,7 @@ const {
   hubId,
   canSearch,
   mapViewMode,
+  setMapViewMode,
   entityColors,
   selectItem,
   cancelSelect,
@@ -73,11 +74,20 @@ const selectionLoading = computed(() => {
   return false
 })
 
-// Initialize data when selectMode changes
+// Initialize data and sync map view when selectMode changes
 watch(selectMode, async (mode) => {
-  if (mode === 'product') await initProducts()
-  if (mode === 'hub') await initHubs()
-  if (mode === 'supplier') await initSuppliers()
+  if (mode === 'product') {
+    await initProducts()
+    setMapViewMode('offers')
+  }
+  if (mode === 'hub') {
+    await initHubs()
+    setMapViewMode('hubs')
+  }
+  if (mode === 'supplier') {
+    await initSuppliers()
+    setMapViewMode('suppliers')
+  }
 }, { immediate: true })
 
 // Offers data for quote results