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

@@ -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) {

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" />

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)