From 404375248b0d64cb36a576b6b1fc8e9f3e9e2ff0 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 10:09:55 +0700
Subject: [PATCH] Fix catalog UI: navbar alignment, selection panel, map
 search, infinite scroll

- Fix team selector alignment in navbar (use items-center, fixed height)
- Fix SelectionPanel header padding to account for parent p-4
- Add map search input (white glass, positioned next to panel)
- Add infinite scroll to SelectionPanel with IntersectionObserver
- Products load all at once (no server-side pagination yet)
- Hubs and Suppliers support pagination with loadMore
---
 app/components/catalog/SelectionPanel.vue    | 47 ++++++++++++++++++--
 app/components/navigation/MainNavigation.vue |  6 +--
 app/components/page/CatalogPage.vue          | 26 +++++++++++
 app/composables/useCatalogProducts.ts        | 11 +++++
 app/pages/catalog/index.vue                  | 32 +++++++++++--
 i18n/locales/en/catalog.json                 |  3 +-
 i18n/locales/ru/catalog.json                 |  3 +-
 7 files changed, 117 insertions(+), 11 deletions(-)

diff --git a/app/components/catalog/SelectionPanel.vue b/app/components/catalog/SelectionPanel.vue
index 3c9f5f6..85f4639 100644
--- a/app/components/catalog/SelectionPanel.vue
+++ b/app/components/catalog/SelectionPanel.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full -m-4">
     <!-- Header + Search (white glass, sticky) -->
-    <div class="sticky top-0 z-10 -m-4 mb-0 p-3 rounded-t-xl bg-white/90 backdrop-blur-md border-b border-white/20">
+    <div class="sticky top-0 z-10 p-4 rounded-t-xl bg-white/90 backdrop-blur-md border-b border-white/20">
       <div class="flex items-center justify-between mb-2">
         <h3 class="font-semibold text-base text-base-content">{{ title }}</h3>
         <button class="btn btn-ghost btn-xs btn-circle text-base-content/60 hover:text-base-content" @click="emit('close')">
@@ -17,7 +17,7 @@
     </div>
 
     <!-- List -->
-    <div class="flex-1 pt-3">
+    <div class="flex-1 px-4 pt-3 pb-4 overflow-y-auto">
       <div v-if="loading" class="flex items-center justify-center py-8">
         <span class="loading loading-spinner loading-md" />
       </div>
@@ -64,6 +64,15 @@
             @select="onSelect(item)"
           />
         </template>
+
+        <!-- Infinite scroll sentinel -->
+        <div
+          v-if="hasMore && !searchQuery"
+          ref="loadMoreSentinel"
+          class="flex items-center justify-center py-4"
+        >
+          <span v-if="loadingMore" class="loading loading-spinner loading-sm text-base-content/60" />
+        </div>
       </div>
     </div>
   </div>
@@ -85,16 +94,48 @@ const props = defineProps<{
   suppliers?: Item[]
   selectedId?: string
   loading?: boolean
+  loadingMore?: boolean
+  hasMore?: boolean
 }>()
 
 const emit = defineEmits<{
   'select': [type: string, item: Item]
   'close': []
+  'load-more': []
 }>()
 
 const { t } = useI18n()
 
 const searchQuery = ref('')
+const loadMoreSentinel = ref<HTMLElement | null>(null)
+
+// Infinite scroll using IntersectionObserver
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0]
+      if (entry?.isIntersecting && props.hasMore && !props.loadingMore && !searchQuery.value) {
+        emit('load-more')
+      }
+    },
+    { threshold: 0.1 }
+  )
+})
+
+watch(loadMoreSentinel, (el) => {
+  if (el && observer) {
+    observer.observe(el)
+  }
+})
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+})
 
 const title = computed(() => {
   switch (props.selectMode) {
diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 2e7d039..d04dc0d 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -143,8 +143,8 @@
         </template>
       </div>
 
-      <!-- Right: AI + Globe + Team + User (top aligned) -->
-      <div class="flex items-start gap-1 flex-shrink-0 pt-3">
+      <!-- Right: AI + Globe + Team + User (centered vertically) -->
+      <div class="flex items-center gap-1 flex-shrink-0">
         <!-- AI Assistant button -->
         <NuxtLink
           :to="localePath('/clientarea/ai')"
@@ -192,7 +192,7 @@
           <div class="dropdown dropdown-end">
             <button
               tabindex="0"
-              class="flex items-center gap-1 px-2 py-1 rounded-lg transition-colors"
+              class="h-8 flex items-center gap-1 px-2 rounded-lg transition-colors"
               :class="glassStyle ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
             >
               <Icon name="lucide:building-2" size="16" />
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index e38539f..9d314dd 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -38,6 +38,29 @@
       <span class="text-white text-sm">{{ $t('common.loading') }}</span>
     </div>
 
+    <!-- Map search input (top LEFT, next to panel or at left edge) -->
+    <div
+      class="absolute top-[116px] z-20 hidden lg:block"
+      :class="showPanel ? 'left-[420px]' : 'left-4'"
+    >
+      <div class="flex items-center gap-2 bg-white/80 backdrop-blur-md rounded-full shadow-lg border border-white/40 px-4 py-2 w-64">
+        <Icon name="lucide:search" size="18" class="text-base-content/60 flex-shrink-0" />
+        <input
+          v-model="mapSearchQuery"
+          type="text"
+          :placeholder="$t('catalog.search.searchOnMap')"
+          class="flex-1 bg-transparent outline-none text-sm text-base-content placeholder:text-base-content/50"
+        />
+        <button
+          v-if="mapSearchQuery"
+          class="text-base-content/40 hover:text-base-content transition-colors"
+          @click="mapSearchQuery = ''"
+        >
+          <Icon name="lucide:x" size="16" />
+        </button>
+      </div>
+    </div>
+
     <!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
     <div class="absolute top-[116px] right-4 z-20 hidden lg:block">
       <div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
@@ -229,6 +252,9 @@ const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void }
 // Selected item from map click
 const selectedMapItem = ref<MapItem | null>(null)
 
+// Map search query
+const mapSearchQuery = ref('')
+
 // Mobile panel state
 const mobilePanelExpanded = ref(false)
 
diff --git a/app/composables/useCatalogProducts.ts b/app/composables/useCatalogProducts.ts
index 60b9763..1832025 100644
--- a/app/composables/useCatalogProducts.ts
+++ b/app/composables/useCatalogProducts.ts
@@ -3,11 +3,15 @@ import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
 // Shared state
 const items = ref<any[]>([])
 const isLoading = ref(false)
+const isLoadingMore = ref(false)
 const isInitialized = ref(false)
 
 export function useCatalogProducts() {
   const { execute } = useGraphQL()
 
+  // Products don't have server-side pagination yet, so we load all at once
+  const canLoadMore = computed(() => false)
+
   const fetchProducts = async () => {
     if (isLoading.value) return
     isLoading.value = true
@@ -25,6 +29,10 @@ export function useCatalogProducts() {
     }
   }
 
+  const loadMore = async () => {
+    // No-op: products don't support pagination yet
+  }
+
   const init = async () => {
     if (!isInitialized.value && items.value.length === 0) {
       await fetchProducts()
@@ -34,8 +42,11 @@ export function useCatalogProducts() {
   return {
     items,
     isLoading,
+    isLoadingMore,
     isInitialized,
+    canLoadMore,
     fetchProducts,
+    loadMore,
     init
   }
 }
diff --git a/app/pages/catalog/index.vue b/app/pages/catalog/index.vue
index b8f072f..0af6278 100644
--- a/app/pages/catalog/index.vue
+++ b/app/pages/catalog/index.vue
@@ -19,8 +19,11 @@
         :hubs="hubs"
         :suppliers="suppliers"
         :loading="selectionLoading"
+        :loading-more="selectionLoadingMore"
+        :has-more="selectionHasMore"
         @select="onSelectItem"
         @close="cancelSelect"
+        @load-more="onLoadMore"
       />
 
       <!-- Quote results: show offers after search -->
@@ -62,9 +65,9 @@ const {
 } = useCatalogSearch()
 
 // Composables for data (initialize immediately when selectMode changes)
-const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
-const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
-const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
+const { items: products, isLoading: productsLoading, isLoadingMore: productsLoadingMore, canLoadMore: productsCanLoadMore, loadMore: loadMoreProducts, init: initProducts } = useCatalogProducts()
+const { items: hubs, isLoading: hubsLoading, isLoadingMore: hubsLoadingMore, canLoadMore: hubsCanLoadMore, loadMore: loadMoreHubs, init: initHubs } = useCatalogHubs()
+const { items: suppliers, isLoading: suppliersLoading, isLoadingMore: suppliersLoadingMore, canLoadMore: suppliersCanLoadMore, loadMore: loadMoreSuppliers, init: initSuppliers } = useCatalogSuppliers()
 
 // Selection loading state
 const selectionLoading = computed(() => {
@@ -74,6 +77,29 @@ const selectionLoading = computed(() => {
   return false
 })
 
+// Selection loading more state
+const selectionLoadingMore = computed(() => {
+  if (selectMode.value === 'product') return productsLoadingMore.value
+  if (selectMode.value === 'hub') return hubsLoadingMore.value
+  if (selectMode.value === 'supplier') return suppliersLoadingMore.value
+  return false
+})
+
+// Selection has more state
+const selectionHasMore = computed(() => {
+  if (selectMode.value === 'product') return productsCanLoadMore.value
+  if (selectMode.value === 'hub') return hubsCanLoadMore.value
+  if (selectMode.value === 'supplier') return suppliersCanLoadMore.value
+  return false
+})
+
+// Load more handler
+const onLoadMore = () => {
+  if (selectMode.value === 'product') loadMoreProducts()
+  if (selectMode.value === 'hub') loadMoreHubs()
+  if (selectMode.value === 'supplier') loadMoreSuppliers()
+}
+
 // Initialize data and sync map view when selectMode changes
 watch(selectMode, async (mode) => {
   if (mode === 'product') {
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index 6d1da01..e587eb9 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -11,7 +11,8 @@
       "refine": "Refine...",
       "searchProducts": "Search products...",
       "searchSuppliers": "Search suppliers...",
-      "searchHubs": "Search hubs..."
+      "searchHubs": "Search hubs...",
+      "searchOnMap": "Search on map..."
     },
     "hero": {
       "title": "Find the best offer",
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index a7b0841..b699f4e 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -11,7 +11,8 @@
       "refine": "Уточнить...",
       "searchProducts": "Поиск товаров...",
       "searchSuppliers": "Поиск поставщиков...",
-      "searchHubs": "Поиск хабов..."
+      "searchHubs": "Поиск хабов...",
+      "searchOnMap": "Поиск на карте..."
     },
     "hero": {
       "title": "Найдите лучшее предложение",