Add Explore/Quote dual mode to catalog page

- Add CatalogMode type (explore/quote) to useCatalogSearch
- Create ExplorePanel component with view toggle (offers/hubs/suppliers)
- Create QuoteForm and QuotePanel components for search form
- Refactor CatalogPage to fullscreen map with overlay panel
- Simplify catalog/index.vue to use new components
- Add translations for modes and quote form (ru/en)

The catalog now has two modes:
- Explore: Browse map with offers/hubs/suppliers toggle
- Quote: Search form with product/hub/qty filters to find offers

app/pages/catalog/index.vue

@@ -1,69 +1,102 @@
 <template>
   <CatalogPage
-    :items="currentItems"
     :loading="isLoading"
-    :total-count="currentItems.length"
-    :grid-columns="3"
-    :with-map="showMap"
-    :full-width-map="fullWidthMap"
-    :use-server-clustering="useServerClustering"
+    :use-server-clustering="true"
     :cluster-node-type="clusterNodeType"
     map-id="unified-catalog-map"
     :point-color="mapPointColor"
-    :hovered-id="hoveredId"
+    :items="[]"
     @select="onMapSelect"
-    @update:hovered-id="hoveredId = $event"
   >
-    <template #header>
-      <Text v-if="!isLoading" tone="muted">{{ headerText }}</Text>
-    </template>
-
-    <template #card="{ item }">
-      <!-- Product card -->
-      <ProductCard
-        v-if="cardType === 'product'"
-        :product="item"
-        selectable
-        :is-selected="item.uuid === hoveredId"
-        @select="onSelectProduct({ uuid: item.uuid, name: item.name })"
-        @hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
+    <!-- Quote panel slot -->
+    <template #quote-panel>
+      <QuotePanel
+        :product-id="productId"
+        :product-label="getFilterLabel('product', productId)"
+        :hub-id="hubId"
+        :hub-label="getFilterLabel('hub', hubId)"
+        :supplier-id="supplierId"
+        :supplier-label="getFilterLabel('supplier', supplierId)"
+        :quantity="quantity"
+        :can-search="canSearch"
+        :show-results="showQuoteResults"
+        :loading="offersLoading"
+        :offers="offers"
+        @edit-filter="onEditFilter"
+        @remove-filter="onRemoveFilter"
+        @update-quantity="onUpdateQuantity"
+        @search="onSearch"
+        @clear-all="onClearAll"
+        @select-offer="onSelectOffer"
       />
-
-      <!-- Supplier card -->
-      <SupplierCard
-        v-else-if="cardType === 'supplier'"
-        :supplier="item"
-        selectable
-        :is-selected="item.uuid === hoveredId"
-        @select="onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })"
-      />
-
-      <!-- Hub card -->
-      <HubCard
-        v-else-if="cardType === 'hub'"
-        :hub="item"
-        selectable
-        :is-selected="item.uuid === hoveredId"
-        @select="onSelectHub({ uuid: item.uuid, name: item.name })"
-        @hover="(h: boolean) => hoveredId = h ? item.uuid : undefined"
-      />
-
-      <!-- Offer card -->
-      <OfferCard
-        v-else-if="cardType === 'offer'"
-        :offer="item"
-        linkable
-      />
-    </template>
-
-    <template #empty>
-      <Text v-if="displayMode !== 'map-default'" tone="muted">{{ t('catalog.empty.noResults') }}</Text>
     </template>
   </CatalogPage>
+
+  <!-- Product selection modal -->
+  <dialog ref="productModalRef" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box max-w-2xl max-h-[80vh]">
+      <h3 class="font-bold text-lg mb-4">{{ t('catalog.quote.selectProduct') }}</h3>
+      <div class="overflow-y-auto max-h-[60vh]">
+        <div v-if="productsLoading" class="flex justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <button
+            v-for="product in products"
+            :key="product.uuid"
+            class="btn btn-ghost justify-start"
+            @click="selectProduct(product)"
+          >
+            <Icon name="lucide:package" size="16" />
+            {{ product.name }}
+          </button>
+        </div>
+      </div>
+      <div class="modal-action">
+        <form method="dialog">
+          <button class="btn">{{ t('common.cancel') }}</button>
+        </form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+
+  <!-- Hub selection modal -->
+  <dialog ref="hubModalRef" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box max-w-2xl max-h-[80vh]">
+      <h3 class="font-bold text-lg mb-4">{{ t('catalog.quote.selectHub') }}</h3>
+      <div class="overflow-y-auto max-h-[60vh]">
+        <div v-if="hubsLoading" class="flex justify-center py-8">
+          <span class="loading loading-spinner loading-md" />
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <button
+            v-for="hub in hubs"
+            :key="hub.uuid"
+            class="btn btn-ghost justify-start"
+            @click="selectHub(hub)"
+          >
+            <Icon name="lucide:map-pin" size="16" />
+            {{ hub.name }}
+            <span v-if="hub.country" class="text-base-content/60 text-sm ml-auto">{{ hub.country }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="modal-action">
+        <form method="dialog">
+          <button class="btn">{{ t('common.cancel') }}</button>
+        </form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
 </template>
 
 <script setup lang="ts">
-import { GetProductsDocument } from '~/composables/graphql/public/geo-generated'
 import { GetOffersDocument } from '~/composables/graphql/public/exchange-generated'
 
 definePageMeta({
@@ -72,331 +105,169 @@ definePageMeta({
 
 const { t } = useI18n()
 const { execute } = useGraphQL()
+const router = useRouter()
+const localePath = useLocalePath()
 
 const {
-  selectMode,
-  displayMode,
+  catalogMode,
   productId,
   supplierId,
   hubId,
-  searchQuery,
-  activeTokens,
-  availableChips,
-  startSelect,
-  cancelSelect,
+  quantity,
+  canSearch,
+  mapViewMode,
+  entityColors,
   selectItem,
   removeFilter,
-  editFilter,
+  clearAll,
   setLabel,
-  mapViewMode,
-  entityColors
+  filterLabels
 } = useCatalogSearch()
 
 // Composables for data
 const { items: products, isLoading: productsLoading, init: initProducts } = useCatalogProducts()
-const { items: suppliers, isLoading: suppliersLoading, init: initSuppliers } = useCatalogSuppliers()
 const { items: hubs, isLoading: hubsLoading, init: initHubs } = useCatalogHubs()
 
-// Local state for specific queries
-const hubsForProduct = ref<any[]>([])
-const productsFromSupplier = ref<any[]>([])
-const productsInHub = ref<any[]>([])
+// Modal refs
+const productModalRef = ref<HTMLDialogElement | null>(null)
+const hubModalRef = ref<HTMLDialogElement | null>(null)
+
+// Offers data for quote results
 const offers = ref<any[]>([])
-const specificLoading = ref(false)
+const offersLoading = ref(false)
+const showQuoteResults = ref(false)
 
-const hoveredId = ref<string>()
+// Loading state
+const isLoading = computed(() => offersLoading.value)
 
-// Determine what to show
-const cardType = computed(() => {
-  switch (displayMode.value) {
-    case 'grid-products':
-    case 'grid-products-from-supplier':
-    case 'grid-products-in-hub':
-      return 'product'
-    case 'grid-suppliers':
-      return 'supplier'
-    case 'grid-hubs':
-    case 'grid-hubs-for-product':
-      return 'hub'
-    case 'grid-offers':
-      return 'offer'
-    default:
-      return 'product'
-  }
-})
-
-// Always show map on /catalog
-const showMap = computed(() => true)
-
-// Full width map when not in select mode (after filter is selected or default map view)
-// selectMode is active = grid + map, after selection or default = only map
-const fullWidthMap = computed(() => !selectMode.value)
-
-// Use server clustering for grids that need it
-const useServerClustering = computed(() => {
-  // Products grid - show offers clusters
-  // Hubs grid - show hubs clusters
-  // Offers grid - show offer clusters
-  // Default map - show all offers clusters
-  return ['map-default', 'grid-products', 'grid-hubs', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)
-})
-
-const clusterNodeType = computed(() => {
-  // When in full width map mode, use mapViewMode preference
-  if (!selectMode.value) {
-    if (mapViewMode.value === 'offers') return 'offer'
-    if (mapViewMode.value === 'hubs') return 'logistics'
-    if (mapViewMode.value === 'suppliers') return 'supplier'
-  }
-  // For products/offers/default map show offer locations
-  if (['map-default', 'grid-products', 'grid-offers', 'grid-products-from-supplier', 'grid-products-in-hub'].includes(displayMode.value)) {
-    return 'offer'
-  }
-  // For hubs show logistics nodes
-  return 'logistics'
-})
-
-const mapPointColor = computed(() => {
-  // When in full width map mode, use mapViewMode preference
-  if (!selectMode.value) {
-    if (mapViewMode.value === 'offers') return entityColors.offer // orange
-    if (mapViewMode.value === 'hubs') return entityColors.hub // green
-    if (mapViewMode.value === 'suppliers') return entityColors.supplier // blue
-  }
-  if (cardType.value === 'supplier') return entityColors.supplier // blue
-  if (cardType.value === 'hub') return entityColors.hub // green
-  if (cardType.value === 'offer') return entityColors.offer // orange
-  return entityColors.product // orange
-})
-
-const headerText = computed(() => {
-  switch (displayMode.value) {
-    case 'grid-products': return t('catalog.headers.selectProduct')
-    case 'grid-suppliers': return t('catalog.headers.selectSupplier')
-    case 'grid-hubs': return t('catalog.headers.selectHub')
-    case 'grid-hubs-for-product': return t('catalog.headers.hubsForProduct')
-    case 'grid-products-from-supplier': return t('catalog.headers.productsFromSupplier')
-    case 'grid-products-in-hub': return t('catalog.headers.productsInHub')
-    case 'grid-offers': return t('catalog.headers.offers')
-    default: return ''
-  }
-})
-
-const isLoading = computed(() => {
-  if (specificLoading.value) return true
-  switch (displayMode.value) {
-    case 'grid-products': return productsLoading.value
-    case 'grid-suppliers': return suppliersLoading.value
-    case 'grid-hubs': return hubsLoading.value
-    default: return false
-  }
-})
-
-// Filter items by search query
-const filterBySearch = (items: any[]) => {
-  if (!searchQuery.value.trim()) return items
-  const q = searchQuery.value.toLowerCase()
-  return items.filter(item =>
-    item.name?.toLowerCase().includes(q) ||
-    item.productName?.toLowerCase().includes(q) ||
-    item.teamName?.toLowerCase().includes(q) ||
-    item.locationName?.toLowerCase().includes(q) ||
-    item.country?.toLowerCase().includes(q)
-  )
+// Get filter label from cache
+const getFilterLabel = (type: string, id: string | undefined): string | undefined => {
+  if (!id) return undefined
+  return filterLabels.value[type]?.[id]
 }
 
-const currentItems = computed(() => {
-  let items: any[] = []
-
-  switch (displayMode.value) {
-    case 'grid-products':
-      items = products.value
-      break
-    case 'grid-suppliers':
-      items = suppliers.value
-      break
-    case 'grid-hubs':
-      items = hubs.value
-      break
-    case 'grid-hubs-for-product':
-      items = hubsForProduct.value
-      break
-    case 'grid-products-from-supplier':
-      items = productsFromSupplier.value
-      break
-    case 'grid-products-in-hub':
-      items = productsInHub.value
-      break
-    case 'grid-offers':
-      items = offers.value
-      break
-    case 'map-default':
-    default:
-      items = []
-  }
-
-  return filterBySearch(items)
+// Cluster node type based on map view mode
+const clusterNodeType = computed(() => {
+  if (mapViewMode.value === 'offers') return 'offer'
+  if (mapViewMode.value === 'hubs') return 'logistics'
+  if (mapViewMode.value === 'suppliers') return 'supplier'
+  return 'offer'
 })
 
-// Fetch data based on displayMode
-const fetchSpecificData = async () => {
-  specificLoading.value = true
+// Map point color based on map view mode
+const mapPointColor = computed(() => {
+  if (mapViewMode.value === 'offers') return entityColors.offer
+  if (mapViewMode.value === 'hubs') return entityColors.hub
+  if (mapViewMode.value === 'suppliers') return entityColors.supplier
+  return entityColors.offer
+})
+
+// Handle map item selection
+const onMapSelect = (item: any) => {
+  // Navigate to offer detail page if in quote mode with results
+  if (catalogMode.value === 'quote' && item.uuid) {
+    // Could navigate to offer detail
+    console.log('Selected from map:', item)
+  }
+}
+
+// Edit filter - open modal
+const onEditFilter = async (type: string) => {
+  if (type === 'product') {
+    await initProducts()
+    productModalRef.value?.showModal()
+  } else if (type === 'hub') {
+    await initHubs()
+    hubModalRef.value?.showModal()
+  }
+}
+
+// Remove filter
+const onRemoveFilter = (type: string) => {
+  removeFilter(type)
+  showQuoteResults.value = false
+  offers.value = []
+}
+
+// Update quantity
+const onUpdateQuantity = (value: string) => {
+  // Store in URL
+  const route = useRoute()
+  const newQuery = { ...route.query }
+  if (value) {
+    newQuery.qty = value
+  } else {
+    delete newQuery.qty
+  }
+  router.push({ query: newQuery })
+}
+
+// Select product from modal
+const selectProduct = (product: any) => {
+  selectItem('product', product.uuid, product.name)
+  productModalRef.value?.close()
+  showQuoteResults.value = false
+  offers.value = []
+}
+
+// Select hub from modal
+const selectHub = (hub: any) => {
+  selectItem('hub', hub.uuid, hub.name)
+  hubModalRef.value?.close()
+  showQuoteResults.value = false
+  offers.value = []
+}
+
+// Search for offers
+const onSearch = async () => {
+  if (!canSearch.value) return
+
+  offersLoading.value = true
+  showQuoteResults.value = true
+
   try {
-    if (displayMode.value === 'grid-hubs-for-product' && productId.value) {
-      // Get hubs for product via offers
-      const data = await execute(
-        GetOffersDocument,
-        { productUuid: productId.value },
-        'public',
-        'exchange'
-      )
-      const offersData = data?.getOffers || []
+    const vars: any = {}
+    if (productId.value) vars.productUuid = productId.value
+    if (supplierId.value) vars.teamUuid = supplierId.value
+    if (hubId.value) vars.locationUuid = hubId.value
 
-      // Set product name from first offer
-      if (offersData.length > 0 && offersData[0].productName) {
-        setLabel('product', productId.value, offersData[0].productName)
+    const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
+    offers.value = data?.getOffers || []
+
+    // Update labels from response
+    if (offers.value.length > 0) {
+      const first = offers.value[0]
+      if (productId.value && first.productName) {
+        setLabel('product', productId.value, first.productName)
       }
-
-      // Extract unique hubs
-      const hubsMap = new Map<string, any>()
-      offersData.forEach((offer: any) => {
-        if (offer.locationUuid && !hubsMap.has(offer.locationUuid)) {
-          hubsMap.set(offer.locationUuid, {
-            uuid: offer.locationUuid,
-            name: offer.locationName,
-            country: offer.locationCountry,
-            countryCode: offer.locationCountryCode,
-            latitude: offer.locationLatitude,
-            longitude: offer.locationLongitude
-          })
-        }
-      })
-      hubsForProduct.value = Array.from(hubsMap.values())
-    }
-
-    if (displayMode.value === 'grid-products-from-supplier' && supplierId.value) {
-      const data = await execute(
-        GetOffersDocument,
-        { teamUuid: supplierId.value },
-        'public',
-        'exchange'
-      )
-      const offersData = data?.getOffers || []
-
-      // Set supplier name
-      if (offersData.length > 0 && offersData[0].teamName) {
-        setLabel('supplier', supplierId.value, offersData[0].teamName)
+      if (hubId.value && first.locationName) {
+        setLabel('hub', hubId.value, first.locationName)
       }
-
-      // Extract unique products
-      const productsMap = new Map<string, any>()
-      offersData.forEach((offer: any) => {
-        if (offer.productUuid && !productsMap.has(offer.productUuid)) {
-          productsMap.set(offer.productUuid, {
-            uuid: offer.productUuid,
-            name: offer.productName,
-            categoryName: offer.categoryName
-          })
-        }
-      })
-      productsFromSupplier.value = Array.from(productsMap.values())
-    }
-
-    if (displayMode.value === 'grid-products-in-hub' && hubId.value) {
-      const data = await execute(
-        GetOffersDocument,
-        { locationUuid: hubId.value },
-        'public',
-        'exchange'
-      )
-      const offersData = data?.getOffers || []
-
-      // Set hub name
-      if (offersData.length > 0 && offersData[0].locationName) {
-        setLabel('hub', hubId.value, offersData[0].locationName)
+      if (supplierId.value && first.teamName) {
+        setLabel('supplier', supplierId.value, first.teamName)
       }
-
-      // Extract unique products
-      const productsMap = new Map<string, any>()
-      offersData.forEach((offer: any) => {
-        if (offer.productUuid && !productsMap.has(offer.productUuid)) {
-          productsMap.set(offer.productUuid, {
-            uuid: offer.productUuid,
-            name: offer.productName,
-            categoryName: offer.categoryName
-          })
-        }
-      })
-      productsInHub.value = Array.from(productsMap.values())
-    }
-
-    if (displayMode.value === 'grid-offers') {
-      const vars: any = {}
-      if (productId.value) vars.productUuid = productId.value
-      if (supplierId.value) vars.teamUuid = supplierId.value
-      if (hubId.value) vars.locationUuid = hubId.value
-
-      const data = await execute(GetOffersDocument, vars, 'public', 'exchange')
-      offers.value = data?.getOffers || []
     }
   } finally {
-    specificLoading.value = false
+    offersLoading.value = false
   }
 }
 
-// Initialize base data
-const initBaseData = async () => {
-  if (displayMode.value === 'grid-products') await initProducts()
-  if (displayMode.value === 'grid-suppliers') await initSuppliers()
-  if (displayMode.value === 'grid-hubs') await initHubs()
+// Clear all filters
+const onClearAll = () => {
+  clearAll()
+  showQuoteResults.value = false
+  offers.value = []
 }
 
-// Watch displayMode and fetch appropriate data
-watch(displayMode, async (mode) => {
-  if (['grid-products', 'grid-suppliers', 'grid-hubs'].includes(mode)) {
-    await initBaseData()
-  } else if (['grid-hubs-for-product', 'grid-products-from-supplier', 'grid-products-in-hub', 'grid-offers'].includes(mode)) {
-    await fetchSpecificData()
-  }
-}, { immediate: true })
-
-// Selection handlers
-const onSelectProduct = (product: { uuid: string; name: string }) => {
-  selectItem('product', product.uuid, product.name)
-}
-
-const onSelectSupplier = (supplier: { uuid: string; name: string }) => {
-  selectItem('supplier', supplier.uuid, supplier.name)
-}
-
-const onSelectHub = (hub: { uuid: string; name: string }) => {
-  selectItem('hub', hub.uuid, hub.name)
-}
-
-const onMapSelect = (item: any) => {
-  if (cardType.value === 'product') {
-    onSelectProduct({ uuid: item.uuid, name: item.name })
-  } else if (cardType.value === 'supplier') {
-    onSelectSupplier({ uuid: item.uuid || item.teamUuid, name: item.name })
-  } else if (cardType.value === 'hub') {
-    onSelectHub({ uuid: item.uuid, name: item.name })
+// Select offer - navigate to detail page
+const onSelectOffer = (offer: any) => {
+  if (offer.uuid && offer.productUuid) {
+    router.push(localePath(`/catalog/offers/${offer.productUuid}?offer=${offer.uuid}`))
   }
 }
 
 // SEO
-useHead(() => {
-  let title = t('catalog.hero.title')
-
-  if (displayMode.value === 'grid-products') {
-    title = t('catalog.headers.selectProduct')
-  } else if (displayMode.value === 'grid-suppliers') {
-    title = t('catalog.headers.selectSupplier')
-  } else if (displayMode.value === 'grid-hubs') {
-    title = t('catalog.headers.selectHub')
-  } else if (displayMode.value === 'grid-offers') {
-    title = t('catalog.headers.offers')
-  }
-
-  return { title }
-})
+useHead(() => ({
+  title: t('catalog.hero.title')
+}))
 </script>