From 1a2693bcd6ba26b5b505e0238820a43899f9f635 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 8 Jan 2026 08:13:22 +0700
Subject: [PATCH] feat(ui): redesign GlobalSearchBar, split layouts, and remove
 hero section

- Make GlobalSearchBar functional with searchStore integration
- Add destination search using hubs/nodes GraphQL query
- Navigate to /request page instead of /catalog/offers
- Remove hero section from index.vue (search is now in header)
- Add padding (px-3 lg:px-6) to topnav layout
- Implement split layout for catalog pages (offers, hubs, suppliers)
  - Left side: filters + scrollable card list (40%)
  - Right side: map (60%, hidden on mobile)
---
 app/components/search/GlobalSearchBar.vue |  81 +++++++++++-----
 app/layouts/topnav.vue                    |   2 +-
 app/pages/catalog/hubs/index.vue          |  88 +++++++++---------
 app/pages/catalog/offers/index.vue        |  90 +++++++++---------
 app/pages/catalog/suppliers/index.vue     |  80 ++++++++--------
 app/pages/index.vue                       | 107 ----------------------
 6 files changed, 194 insertions(+), 254 deletions(-)

diff --git a/app/components/search/GlobalSearchBar.vue b/app/components/search/GlobalSearchBar.vue
index 5d0c5ba..ff3cfec 100644
--- a/app/components/search/GlobalSearchBar.vue
+++ b/app/components/search/GlobalSearchBar.vue
@@ -68,10 +68,10 @@
               @input="searchDestinations"
             />
             <ul
-              v-if="showDestinationDropdown && destinations.length > 0"
+              v-if="showDestinationDropdown && filteredDestinations.length > 0"
               class="dropdown-content menu bg-base-100 rounded-box z-50 w-64 max-h-60 overflow-auto p-2 shadow-lg border border-base-300 mt-2"
             >
-              <li v-for="dest in destinations" :key="dest.uuid">
+              <li v-for="dest in filteredDestinations" :key="dest.uuid">
                 <a @click="selectDestination(dest)">
                   {{ dest.name }}
                   <span class="text-xs text-base-content/50">{{ dest.country }}</span>
@@ -101,6 +101,8 @@ const emit = defineEmits<{
 
 const router = useRouter()
 const localePath = useLocalePath()
+const searchStore = useSearchStore()
+const { execute } = useGraphQL()
 
 // Product search
 const productQuery = ref('')
@@ -125,53 +127,74 @@ const selectProduct = (product: typeof selectedProduct.value) => {
   selectedProduct.value = product
   productQuery.value = product?.name || ''
   showProductDropdown.value = false
+  // Sync to searchStore
+  searchStore.setProduct(product?.name || '')
+  searchStore.setProductUuid(product?.uuid || '')
 }
 
 // Quantity
 const quantity = ref<number | undefined>()
 const unit = ref('t')
 
-// Destination search
+// Destination search (using hubs/nodes)
 const destinationQuery = ref('')
 const selectedDestination = ref<{ uuid: string; name: string; country?: string } | null>(null)
 const showDestinationDropdown = ref(false)
-const destinations = ref<Array<{ uuid: string; name: string; country?: string }>>([])
+const allDestinations = ref<Array<{ uuid: string; name: string; country?: string }>>([])
 
-const searchDestinations = async () => {
+const filteredDestinations = computed(() => {
+  if (!destinationQuery.value) return allDestinations.value.slice(0, 10)
+  const q = destinationQuery.value.toLowerCase()
+  return allDestinations.value.filter(d =>
+    d.name?.toLowerCase().includes(q) ||
+    d.country?.toLowerCase().includes(q)
+  ).slice(0, 10)
+})
+
+const searchDestinations = () => {
   showDestinationDropdown.value = true
-  // TODO: implement destination search via GraphQL
 }
 
 const selectDestination = (dest: typeof selectedDestination.value) => {
   selectedDestination.value = dest
   destinationQuery.value = dest?.name || ''
   showDestinationDropdown.value = false
+  // Sync to searchStore
+  searchStore.setLocation(dest?.name || '')
+  searchStore.setLocationUuid(dest?.uuid || '')
 }
 
-// Can search
+// Can search - need at least product selected
 const canSearch = computed(() => {
   return !!selectedProduct.value
 })
 
-// Search handler
+// Search handler - navigate to /request like the old search form
 const handleSearch = () => {
   if (!canSearch.value) return
 
-  const params: Record<string, string> = {}
-  if (selectedProduct.value?.uuid) {
-    params.product = selectedProduct.value.uuid
-  }
+  // Sync quantity to store
   if (quantity.value) {
-    params.quantity = String(quantity.value)
-    params.unit = unit.value
-  }
-  if (selectedDestination.value?.uuid) {
-    params.destination = selectedDestination.value.uuid
+    searchStore.setQuantity(String(quantity.value))
+    searchStore.setUnit(unit.value)
   }
 
+  const query: Record<string, string | undefined> = {
+    productUuid: selectedProduct.value?.uuid,
+    product: selectedProduct.value?.name,
+    quantity: quantity.value ? String(quantity.value) : undefined,
+    locationUuid: selectedDestination.value?.uuid,
+    location: selectedDestination.value?.name
+  }
+
+  // Remove undefined values
+  Object.keys(query).forEach(key => {
+    if (query[key] === undefined) delete query[key]
+  })
+
   router.push({
-    path: localePath('/catalog/offers'),
-    query: params
+    path: localePath('/request'),
+    query: query as Record<string, string>
   })
 
   emit('search', {
@@ -185,15 +208,29 @@ const handleSearch = () => {
 // Load products on mount
 onMounted(async () => {
   try {
-    const { query } = useGraphQL()
     const { GetProductsDocument } = await import('~/composables/graphql/public/exchange-generated')
-    const result = await query(GetProductsDocument, {}, 'exchange', 'public')
-    allProducts.value = result.getProducts || []
+    const result = await execute(GetProductsDocument, {}, 'public', 'exchange')
+    allProducts.value = result?.getProducts || []
   } catch (error) {
     console.error('Failed to load products:', error)
   }
 })
 
+// Load destinations (hubs/nodes) on mount
+onMounted(async () => {
+  try {
+    const { GetNodesDocument } = await import('~/composables/graphql/public/geo-generated')
+    const result = await execute(GetNodesDocument, { limit: 100, offset: 0 }, 'public', 'geo')
+    allDestinations.value = (result?.nodes || []).filter((n: any) => n?.uuid && n?.name).map((n: any) => ({
+      uuid: n.uuid,
+      name: n.name,
+      country: n.country
+    }))
+  } catch (error) {
+    console.error('Failed to load destinations:', error)
+  }
+})
+
 // Close dropdowns on click outside
 onMounted(() => {
   const handler = (e: MouseEvent) => {
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 02acbc5..17fb4ff 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -23,7 +23,7 @@
     <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
 
     <!-- Page content -->
-    <main class="flex-1 flex flex-col min-h-0">
+    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
       <slot />
     </main>
   </div>
diff --git a/app/pages/catalog/hubs/index.vue b/app/pages/catalog/hubs/index.vue
index ac5d1c7..8e4a207 100644
--- a/app/pages/catalog/hubs/index.vue
+++ b/app/pages/catalog/hubs/index.vue
@@ -1,57 +1,64 @@
 <template>
-  <Stack gap="6">
-    <Section variant="plain" paddingY="md">
+  <div class="flex flex-col h-[calc(100vh-200px)]">
+    <!-- Header -->
+    <div class="py-4">
       <PageHeader :title="t('catalogHubsSection.header.title')" />
-    </Section>
+    </div>
 
-    <Section v-if="isLoading" variant="plain" paddingY="md">
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
       <Card padding="lg">
         <Stack align="center" justify="center" gap="3">
           <Spinner />
           <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
         </Stack>
       </Card>
-    </Section>
+    </div>
 
-    <Section v-else variant="plain" paddingY="md">
-      <Stack gap="6">
-        <NuxtLink :to="localePath('/catalog/hubs/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="hubs-map"
-              :locations="itemsWithCoords"
-              :height="192"
-            />
-          </ClientOnly>
-        </NuxtLink>
+    <!-- Split Layout -->
+    <div v-else class="flex-1 flex gap-4 min-h-0">
+      <!-- Left side: Filters + Cards (scrollable) -->
+      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+        <Stack gap="4">
+          <CatalogFilters :filters="filters" v-model="selectedFilter" />
 
-        <CatalogFilters :filters="filters" v-model="selectedFilter" />
+          <div v-for="country in itemsByCountry" :key="country.name" class="space-y-3">
+            <Text weight="semibold">{{ country.name }}</Text>
+            <Stack gap="3">
+              <HubCard
+                v-for="hub in country.hubs"
+                :key="hub.uuid"
+                :hub="hub"
+              />
+            </Stack>
+          </div>
 
-        <div v-for="country in itemsByCountry" :key="country.name" class="space-y-3">
-          <Text weight="semibold">{{ country.name }}</Text>
-          <Grid :cols="1" :md="2" :lg="3" :gap="4">
-            <HubCard
-              v-for="hub in country.hubs"
-              :key="hub.uuid"
-              :hub="hub"
-            />
-          </Grid>
-        </div>
+          <PaginationLoadMore
+            :shown="items.length"
+            :total="total"
+            :can-load-more="canLoadMore"
+            :loading="isLoadingMore"
+            @load-more="loadMore"
+          />
 
-        <PaginationLoadMore
-          :shown="items.length"
-          :total="total"
-          :can-load-more="canLoadMore"
-          :loading="isLoadingMore"
-          @load-more="loadMore"
-        />
-
-        <Stack v-if="items.length === 0" align="center" gap="2">
-          <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
+          <Stack v-if="items.length === 0" align="center" gap="2">
+            <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
+          </Stack>
         </Stack>
-      </Stack>
-    </Section>
-  </Stack>
+      </div>
+
+      <!-- Right side: Map (sticky, hidden on mobile) -->
+      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
+        <ClientOnly>
+          <MapboxGlobe
+            map-id="hubs-map"
+            :locations="itemsWithCoords"
+            class="h-full w-full"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -60,7 +67,6 @@ definePageMeta({
 })
 
 const { t } = useI18n()
-const localePath = useLocalePath()
 
 const {
   items,
diff --git a/app/pages/catalog/offers/index.vue b/app/pages/catalog/offers/index.vue
index 7d0063f..32ebd51 100644
--- a/app/pages/catalog/offers/index.vue
+++ b/app/pages/catalog/offers/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <Stack gap="6">
-    <Section variant="plain" paddingY="md">
+  <div class="flex flex-col h-[calc(100vh-200px)]">
+    <!-- Header -->
+    <div class="py-4">
       <PageHeader :title="pageTitle">
         <template v-if="selectedProduct" #actions>
           <NuxtLink :to="localePath('/catalog/offers')" class="btn btn-ghost btn-sm">
@@ -9,20 +10,20 @@
           </NuxtLink>
         </template>
       </PageHeader>
-    </Section>
+    </div>
 
     <!-- Loading state -->
-    <Section v-if="isLoading || productsLoading" variant="plain" paddingY="md">
+    <div v-if="isLoading || productsLoading" class="flex-1 flex items-center justify-center">
       <Card padding="lg">
         <Stack align="center" justify="center" gap="3">
           <Spinner />
           <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
         </Stack>
       </Card>
-    </Section>
+    </div>
 
     <!-- Products catalog (when no product selected) -->
-    <Section v-else-if="!selectedProductUuid" variant="plain" paddingY="md">
+    <div v-else-if="!selectedProductUuid" class="flex-1 overflow-y-auto py-4">
       <Stack gap="4">
         <Grid :cols="1" :md="2" :lg="3" :gap="4">
           <Card
@@ -43,45 +44,49 @@
           <Text tone="muted">{{ t('catalogOffersSection.empty.no_products') }}</Text>
         </Stack>
       </Stack>
-    </Section>
+    </div>
 
-    <!-- Offers for selected product -->
-    <Section v-else variant="plain" paddingY="md">
-      <Stack gap="4">
-        <NuxtLink :to="offersMapLink" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="offers-map"
-              :locations="itemsWithCoords"
-              :height="192"
+    <!-- Offers for selected product - Split Layout -->
+    <div v-else class="flex-1 flex gap-4 min-h-0">
+      <!-- Left side: Filters + Cards (scrollable) -->
+      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+        <Stack gap="4">
+          <CatalogFilters :filters="filters" v-model="selectedFilter" />
+
+          <Stack gap="3">
+            <OfferCard
+              v-for="offer in items"
+              :key="offer.uuid"
+              :offer="offer"
             />
-          </ClientOnly>
-        </NuxtLink>
+          </Stack>
 
-        <CatalogFilters :filters="filters" v-model="selectedFilter" />
-
-        <Grid :cols="1" :md="2" :lg="3" :gap="4">
-          <OfferCard
-            v-for="offer in items"
-            :key="offer.uuid"
-            :offer="offer"
+          <PaginationLoadMore
+            :shown="items.length"
+            :total="total"
+            :can-load-more="canLoadMore"
+            :loading="isLoadingMore"
+            @load-more="loadMore"
           />
-        </Grid>
 
-        <PaginationLoadMore
-          :shown="items.length"
-          :total="total"
-          :can-load-more="canLoadMore"
-          :loading="isLoadingMore"
-          @load-more="loadMore"
-        />
-
-        <Stack v-if="total === 0" align="center" gap="2">
-          <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+          <Stack v-if="total === 0" align="center" gap="2">
+            <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+          </Stack>
         </Stack>
-      </Stack>
-    </Section>
-  </Stack>
+      </div>
+
+      <!-- Right side: Map (sticky, hidden on mobile) -->
+      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
+        <ClientOnly>
+          <MapboxGlobe
+            map-id="offers-map"
+            :locations="itemsWithCoords"
+            class="h-full w-full"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -132,13 +137,6 @@ const pageTitle = computed(() => {
   return t('catalogOffersSection.header.select_product')
 })
 
-const offersMapLink = computed(() => {
-  if (selectedProductUuid.value) {
-    return localePath(`/catalog/offers/map?product=${selectedProductUuid.value}`)
-  }
-  return localePath('/catalog/offers/map')
-})
-
 const selectProduct = (product: any) => {
   router.push({
     path: route.path,
diff --git a/app/pages/catalog/suppliers/index.vue b/app/pages/catalog/suppliers/index.vue
index 3d00f4a..ac31c9c 100644
--- a/app/pages/catalog/suppliers/index.vue
+++ b/app/pages/catalog/suppliers/index.vue
@@ -1,54 +1,61 @@
 <template>
-  <Stack gap="6">
-    <Section variant="plain" paddingY="md">
+  <div class="flex flex-col h-[calc(100vh-200px)]">
+    <!-- Header -->
+    <div class="py-4">
       <PageHeader :title="t('catalogSuppliersSection.header.title')" />
-    </Section>
+    </div>
 
-    <Section v-if="isLoading" variant="plain" paddingY="md">
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
       <Card padding="lg">
         <Stack align="center" justify="center" gap="3">
           <Spinner />
           <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
         </Stack>
       </Card>
-    </Section>
+    </div>
 
-    <Section v-else variant="plain" paddingY="md">
-      <Stack gap="4">
-        <NuxtLink :to="localePath('/catalog/suppliers/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
-          <ClientOnly>
-            <MapboxGlobe
-              map-id="suppliers-map"
-              :locations="itemsWithCoords"
-              :height="192"
+    <!-- Split Layout -->
+    <div v-else class="flex-1 flex gap-4 min-h-0">
+      <!-- Left side: Filters + Cards (scrollable) -->
+      <div class="w-full lg:w-2/5 overflow-y-auto pr-2">
+        <Stack gap="4">
+          <CatalogFilters :filters="filters" v-model="selectedFilter" />
+
+          <Stack gap="3">
+            <SupplierCard
+              v-for="supplier in items"
+              :key="supplier.uuid || supplier.teamUuid"
+              :supplier="supplier"
             />
-          </ClientOnly>
-        </NuxtLink>
+          </Stack>
 
-        <CatalogFilters :filters="filters" v-model="selectedFilter" />
-
-        <Grid :cols="1" :md="2" :lg="3" :gap="4">
-          <SupplierCard
-            v-for="supplier in items"
-            :key="supplier.uuid || supplier.teamUuid"
-            :supplier="supplier"
+          <PaginationLoadMore
+            :shown="items.length"
+            :total="total"
+            :can-load-more="canLoadMore"
+            :loading="isLoadingMore"
+            @load-more="loadMore"
           />
-        </Grid>
 
-        <PaginationLoadMore
-          :shown="items.length"
-          :total="total"
-          :can-load-more="canLoadMore"
-          :loading="isLoadingMore"
-          @load-more="loadMore"
-        />
-
-        <Stack v-if="total === 0" align="center" gap="2">
-          <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+          <Stack v-if="total === 0" align="center" gap="2">
+            <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+          </Stack>
         </Stack>
-      </Stack>
-    </Section>
-  </Stack>
+      </div>
+
+      <!-- Right side: Map (sticky, hidden on mobile) -->
+      <div class="hidden lg:block lg:w-3/5 rounded-lg overflow-hidden">
+        <ClientOnly>
+          <MapboxGlobe
+            map-id="suppliers-map"
+            :locations="itemsWithCoords"
+            class="h-full w-full"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -57,7 +64,6 @@ definePageMeta({
 })
 
 const { t } = useI18n()
-const localePath = useLocalePath()
 
 const {
   items,
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 2fff8b1..9909ac7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,68 +1,5 @@
 <template>
   <Stack gap="12">
-    <Section variant="hero">
-      <Stack gap="6">
-          <Heading :level="1" tone="inverse">{{ $t('search.title') }}</Heading>
-          <Text tone="inverse">{{ $t('search.description') }}</Text>
-
-          <Card padding="lg">
-            <Stack gap="6">
-              <!-- Search form -->
-              <Grid :cols="1" :md="4" :gap="4">
-                <Stack gap="2">
-                  <Text tag="p" size="base" weight="semibold">{{ $t('search.product_label') }}</Text>
-                  <FieldButton
-                    :value="searchStore.searchForm.product"
-                    :placeholder="$t('search.product_placeholder')"
-                    @click="navigateTo(localePath('/goods'))"
-                  />
-                </Stack>
-
-                <Stack gap="2">
-                  <Text tag="p" size="base" weight="semibold">{{ $t('search.quantity_label') }}</Text>
-                  <Input
-                    type="number"
-                    v-model="searchStore.searchForm.quantity"
-                    :placeholder="$t('search.quantity_placeholder')"
-                  />
-                </Stack>
-
-                <Stack gap="2">
-                  <Text tag="p" size="base" weight="semibold">{{ $t('search.location_label') }}</Text>
-                  <FieldButton
-                    :value="searchStore.searchForm.location"
-                    :placeholder="$t('search.location_placeholder')"
-                    @click="navigateTo(localePath({ path: '/select-location', query: { mode: 'search' } }))"
-                  />
-                </Stack>
-
-                <Stack gap="2" align="stretch">
-                  <Text tag="p" size="base" weight="semibold" tone="muted"> </Text>
-                  <Button type="button" @click="handleSearch">
-                    {{ searchError ? $t('search.error') : $t('search.search_button') }}
-                  </Button>
-                </Stack>
-              </Grid>
-            </Stack>
-          </Card>
-
-          <Stack v-if="popularExamples.length" gap="2" align="center">
-            <Text tone="inverse" size="sm">{{ $t('search.popular_requests') }}</Text>
-            <Stack direction="row" gap="2" justify="center" align="center" class="flex-wrap text-center">
-              <button
-                v-for="example in popularExamples"
-                :key="`${example.product}-${example.location}`"
-                type="button"
-                class="badge badge-dash badge-primary text-sm"
-                @click="fillExample(example)"
-              >
-                {{ example.product }} {{ example.quantity }}{{ $t('search.units.tons_short') }} → {{ example.location }}
-              </button>
-            </Stack>
-          </Stack>
-        </Stack>
-    </Section>
-
     <Section variant="plain">
       <Stack gap="8" align="center">
           <Heading :level="2">{{ $t('roles.title') }}</Heading>
@@ -152,48 +89,4 @@
 definePageMeta({
   layout: 'topnav'
 })
-
-const { t } = useI18n()
-const searchStore = useSearchStore()
-const searchError = ref('')
-const localePath = useLocalePath()
-const popularExamples = computed(() => ([
-  { product: t('search.examples.metal_sheet.product'), quantity: 120, location: t('search.examples.metal_sheet.location') },
-  { product: t('search.examples.green_coffee.product'), quantity: 200, location: t('search.examples.green_coffee.location') },
-  { product: t('search.examples.wheat.product'), quantity: 500, location: t('search.examples.wheat.location') },
-  { product: t('search.examples.cocoa.product'), quantity: 150, location: t('search.examples.cocoa.location') },
-]))
-
-const handleSearch = () => {
-  const location = (searchStore.searchForm.location || '').trim()
-  const productText = (searchStore.searchForm.product || '').trim()
-  const hasProduct = !!(searchStore.searchForm.productUuid || productText)
-
-  if (!location) {
-    searchError.value = t('search.validation.fill_product_location')
-    setTimeout(() => (searchError.value = ''), 2000)
-    return
-  }
-
-  if (!hasProduct) {
-    navigateTo(localePath('/goods'))
-    return
-  }
-
-  const query = {
-    productUuid: searchStore.searchForm.productUuid || undefined,
-    product: productText || undefined,
-    quantity: searchStore.searchForm.quantity || undefined,
-    locationUuid: searchStore.searchForm.locationUuid || undefined,
-    location: searchStore.searchForm.location || undefined
-  }
-
-  navigateTo(localePath({ path: '/request', query }))
-}
-
-const fillExample = (example) => {
-  searchStore.searchForm.product = example.product
-  searchStore.searchForm.quantity = example.quantity
-  searchStore.searchForm.location = example.location
-}
 </script>