From 9d46bab93f5648b1b1425f7976bda8163ef30b99 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:17:40 +0700
Subject: [PATCH] Fix nav height, view toggle transparency, dynamic map colors
 by view mode

---
 app/components/navigation/MainNavigation.vue |  2 +-
 app/components/page/CatalogPage.vue          | 65 ++++++++++++--------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index b8890cc..3d3b7b2 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="h-20 bg-base-100/80 backdrop-blur-md shadow-md">
+  <header class="h-[100px] bg-base-100/70 backdrop-blur-md shadow-md">
     <!-- Single row: Logo + Search + Icons -->
     <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
       <!-- Left: Logo + Nav links (top aligned) -->
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 9175186..a1f2bca 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -19,7 +19,7 @@
           :items="useServerClustering ? [] : itemsWithCoords"
           :clustered-points="useServerClustering ? clusteredNodes : []"
           :use-server-clustering="useServerClustering"
-          :point-color="pointColor"
+          :point-color="activePointColor"
           :hovered-item-id="hoveredId"
           :hovered-item="hoveredItem"
           @select-item="onMapSelect"
@@ -30,10 +30,10 @@
 
     <!-- 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-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
+      <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
         <button
-          class="btn btn-sm join-item gap-2"
-          :class="{ 'btn-active': mapViewMode === 'offers' }"
+          class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
+          :class="mapViewMode === 'offers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
           @click="setMapViewMode('offers')"
         >
           <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
@@ -42,8 +42,8 @@
           {{ $t('catalog.views.offers') }}
         </button>
         <button
-          class="btn btn-sm join-item gap-2"
-          :class="{ 'btn-active': mapViewMode === 'hubs' }"
+          class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
+          :class="mapViewMode === 'hubs' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
           @click="setMapViewMode('hubs')"
         >
           <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
@@ -52,8 +52,8 @@
           {{ $t('catalog.views.hubs') }}
         </button>
         <button
-          class="btn btn-sm join-item gap-2"
-          :class="{ 'btn-active': mapViewMode === 'suppliers' }"
+          class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
+          :class="mapViewMode === 'suppliers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
           @click="setMapViewMode('suppliers')"
         >
           <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
@@ -78,32 +78,32 @@
     <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-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
+        <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
           <button
-            class="btn btn-xs join-item gap-1"
-            :class="{ 'btn-active': mapViewMode === 'offers' }"
+            class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
+            :class="mapViewMode === 'offers' ? 'bg-white/20' : 'hover:bg-white/10'"
             @click="setMapViewMode('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 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>
           </button>
           <button
-            class="btn btn-xs join-item gap-1"
-            :class="{ 'btn-active': mapViewMode === 'hubs' }"
+            class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
+            :class="mapViewMode === 'hubs' ? 'bg-white/20' : 'hover:bg-white/10'"
             @click="setMapViewMode('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 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>
           </button>
           <button
-            class="btn btn-xs join-item gap-1"
-            :class="{ 'btn-active': mapViewMode === 'suppliers' }"
+            class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
+            :class="mapViewMode === 'suppliers' ? 'bg-white/20' : 'hover:bg-white/10'"
             @click="setMapViewMode('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 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>
           </button>
         </div>
@@ -136,6 +136,24 @@ import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
 
 const { mapViewMode, setMapViewMode } = useCatalogSearch()
 
+// Point color based on map view mode
+const VIEW_MODE_COLORS = {
+  offers: '#f97316',   // orange
+  hubs: '#22c55e',     // green
+  suppliers: '#3b82f6' // blue
+} as const
+
+const activePointColor = computed(() => VIEW_MODE_COLORS[mapViewMode.value] || VIEW_MODE_COLORS.offers)
+
+// Node type for server clustering based on view mode
+const VIEW_MODE_NODE_TYPES = {
+  offers: 'offer',
+  hubs: 'logistics',
+  suppliers: 'supplier'
+} as const
+
+const activeClusterNodeType = computed(() => VIEW_MODE_NODE_TYPES[mapViewMode.value] || VIEW_MODE_NODE_TYPES.offers)
+
 interface MapItem {
   uuid: string
   latitude?: number | null
@@ -170,9 +188,8 @@ const emit = defineEmits<{
   'update:hoveredId': [uuid: string | undefined]
 }>()
 
-// Server-side clustering
-const nodeTypeRef = computed(() => props.clusterNodeType)
-const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, nodeTypeRef)
+// Server-side clustering - use computed node type based on view mode
+const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, activeClusterNodeType)
 
 // Map refs
 const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)