Fix navigation layout and search behavior

- Reorder topnav components: search bar before submenu
- GlobalSearchBar: use page navigation instead of dropdowns
- Remove icons from MainNavigation and SubNavigation
- Create ListMapLayout universal component for list+map pages
- Migrate catalog pages (offers, suppliers, hubs) to ListMapLayout

app/components/search/GlobalSearchBar.vue

@@ -5,35 +5,20 @@
         @submit.prevent="handleSearch"
         class="flex items-center bg-base-100 rounded-full border border-base-300 shadow-sm hover:shadow-md transition-shadow"
       >
-        <!-- Product field -->
-        <div class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300">
+        <!-- Product field (clickable, navigates to /goods) -->
+        <div
+          class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300 cursor-pointer"
+          @click="goToProductSelection"
+        >
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.product') }}
           </label>
-          <div class="dropdown w-full">
-            <input
-              v-model="productQuery"
-              type="text"
-              :placeholder="$t('search.product_placeholder')"
-              class="w-full bg-transparent outline-none text-sm"
-              @focus="showProductDropdown = true"
-              @input="filterProducts"
-            />
-            <ul
-              v-if="showProductDropdown && filteredProducts.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="product in filteredProducts" :key="product.uuid">
-                <a @click="selectProduct(product)">
-                  {{ product.name }}
-                  <span class="text-xs text-base-content/50">{{ product.categoryName }}</span>
-                </a>
-              </li>
-            </ul>
+          <div class="text-sm" :class="productDisplay ? 'text-base-content' : 'text-base-content/50'">
+            {{ productDisplay || $t('search.product_placeholder') }}
           </div>
         </div>
 
-        <!-- Quantity field -->
+        <!-- Quantity field (editable) -->
         <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 border-r border-base-300">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.quantity') }}
@@ -45,39 +30,25 @@
               min="1"
               :placeholder="$t('search.quantity_placeholder')"
               class="w-16 bg-transparent outline-none text-sm"
+              @change="syncQuantityToStore"
             />
-            <select v-model="unit" class="bg-transparent outline-none text-sm text-base-content/70">
+            <select v-model="unit" class="bg-transparent outline-none text-sm text-base-content/70" @change="syncQuantityToStore">
               <option value="t">{{ $t('units.t') }}</option>
               <option value="kg">{{ $t('units.kg') }}</option>
             </select>
           </div>
         </div>
 
-        <!-- Destination field -->
-        <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50">
+        <!-- Destination field (clickable, navigates to /select-location) -->
+        <div
+          class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 cursor-pointer"
+          @click="goToLocationSelection"
+        >
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.destination') }}
           </label>
-          <div class="dropdown w-full">
-            <input
-              v-model="destinationQuery"
-              type="text"
-              :placeholder="$t('search.destination_placeholder')"
-              class="w-full bg-transparent outline-none text-sm"
-              @focus="showDestinationDropdown = true"
-              @input="searchDestinations"
-            />
-            <ul
-              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 filteredDestinations" :key="dest.uuid">
-                <a @click="selectDestination(dest)">
-                  {{ dest.name }}
-                  <span class="text-xs text-base-content/50">{{ dest.country }}</span>
-                </a>
-              </li>
-            </ul>
+          <div class="text-sm" :class="locationDisplay ? 'text-base-content' : 'text-base-content/50'">
+            {{ locationDisplay || $t('search.destination_placeholder') }}
           </div>
         </div>
 
@@ -96,100 +67,64 @@
 
 <script setup lang="ts">
 const emit = defineEmits<{
-  search: [params: { productUuid?: string; quantity?: number; unit?: string; destinationUuid?: string }]
+  search: [params: { productUuid?: string; quantity?: number; unit?: string; locationUuid?: string }]
 }>()
 
 const router = useRouter()
 const localePath = useLocalePath()
 const searchStore = useSearchStore()
-const { execute } = useGraphQL()
 
-// Product search
-const productQuery = ref('')
-const selectedProduct = ref<{ uuid: string; name: string; categoryName?: string } | null>(null)
-const showProductDropdown = ref(false)
-const allProducts = ref<Array<{ uuid: string; name: string; categoryName?: string }>>([])
+// Read from searchStore
+const productDisplay = computed(() => searchStore.searchForm.product || '')
+const productUuid = computed(() => searchStore.searchForm.productUuid || '')
+const locationDisplay = computed(() => searchStore.searchForm.location || '')
+const locationUuid = computed(() => searchStore.searchForm.locationUuid || '')
 
-const filteredProducts = computed(() => {
-  if (!productQuery.value) return allProducts.value.slice(0, 10)
-  const q = productQuery.value.toLowerCase()
-  return allProducts.value.filter(p =>
-    p.name.toLowerCase().includes(q) ||
-    p.categoryName?.toLowerCase().includes(q)
-  ).slice(0, 10)
-})
+// Quantity - local state synced with store
+const quantity = ref<number | undefined>(
+  searchStore.searchForm.quantity ? Number(searchStore.searchForm.quantity) : undefined
+)
+const unit = ref(searchStore.searchForm.unit || 't')
 
-const filterProducts = () => {
-  showProductDropdown.value = true
+const syncQuantityToStore = () => {
+  if (quantity.value) {
+    searchStore.setQuantity(String(quantity.value))
+  }
+  searchStore.setUnit(unit.value)
 }
 
-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 || '')
+// Navigation to selection pages
+const goToProductSelection = () => {
+  navigateTo(localePath('/goods'))
 }
 
-// Quantity
-const quantity = ref<number | undefined>()
-const unit = ref('t')
-
-// Destination search (using hubs/nodes)
-const destinationQuery = ref('')
-const selectedDestination = ref<{ uuid: string; name: string; country?: string } | null>(null)
-const showDestinationDropdown = ref(false)
-const allDestinations = ref<Array<{ uuid: string; name: string; country?: string }>>([])
-
-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
-}
-
-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 || '')
+const goToLocationSelection = () => {
+  navigateTo(localePath('/select-location'))
 }
 
 // Can search - need at least product selected
 const canSearch = computed(() => {
-  return !!selectedProduct.value
+  return !!productUuid.value
 })
 
-// Search handler - navigate to /request like the old search form
+// Search handler - navigate to /request
 const handleSearch = () => {
   if (!canSearch.value) return
 
   // Sync quantity to store
-  if (quantity.value) {
-    searchStore.setQuantity(String(quantity.value))
-    searchStore.setUnit(unit.value)
-  }
+  syncQuantityToStore()
 
   const query: Record<string, string | undefined> = {
-    productUuid: selectedProduct.value?.uuid,
-    product: selectedProduct.value?.name,
+    productUuid: productUuid.value || undefined,
+    product: productDisplay.value || undefined,
     quantity: quantity.value ? String(quantity.value) : undefined,
-    locationUuid: selectedDestination.value?.uuid,
-    location: selectedDestination.value?.name
+    locationUuid: locationUuid.value || undefined,
+    location: locationDisplay.value || undefined
   }
 
-  // Remove undefined values
+  // Remove undefined/empty values
   Object.keys(query).forEach(key => {
-    if (query[key] === undefined) delete query[key]
+    if (!query[key]) delete query[key]
   })
 
   router.push({
@@ -198,50 +133,23 @@ const handleSearch = () => {
   })
 
   emit('search', {
-    productUuid: selectedProduct.value?.uuid,
+    productUuid: productUuid.value,
     quantity: quantity.value,
     unit: unit.value,
-    destinationUuid: selectedDestination.value?.uuid
+    locationUuid: locationUuid.value
   })
 }
 
-// Load products on mount
-onMounted(async () => {
-  try {
-    const { GetProductsDocument } = await import('~/composables/graphql/public/exchange-generated')
-    const result = await execute(GetProductsDocument, {}, 'public', 'exchange')
-    allProducts.value = result?.getProducts || []
-  } catch (error) {
-    console.error('Failed to load products:', error)
+// Watch store changes to sync quantity
+watch(() => searchStore.searchForm.quantity, (val) => {
+  if (val) {
+    quantity.value = Number(val)
   }
-})
+}, { immediate: true })
 
-// 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)
+watch(() => searchStore.searchForm.unit, (val) => {
+  if (val) {
+    unit.value = val
   }
-})
-
-// Close dropdowns on click outside
-onMounted(() => {
-  const handler = (e: MouseEvent) => {
-    const target = e.target as HTMLElement
-    if (!target.closest('.dropdown')) {
-      showProductDropdown.value = false
-      showDestinationDropdown.value = false
-    }
-  }
-  document.addEventListener('click', handler)
-  onUnmounted(() => document.removeEventListener('click', handler))
-})
+}, { immediate: true })
 </script>
-