Unify layouts and create CatalogPage component

- MainNavigation: center tabs on page (absolute positioning)
- SubNavigation: align left instead of center
- Create CatalogPage universal component for list+map pages
- Migrate catalog pages (offers, suppliers, hubs) to CatalogPage
- Remove PageHeader from clientarea pages (redundant with navigation)
- Add topnav layout to supplier detail page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/pages/catalog/hubs/index.vue

@@ -1,62 +1,37 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- Header -->
-    <div class="py-4">
-      <PageHeader :title="t('catalogHubsSection.header.title')" />
-    </div>
+  <CatalogPage
+    :items="items"
+    :loading="isLoading"
+    map-id="hubs-map"
+    point-color="#10b981"
+    :selected-id="selectedHubId"
+    @select="onSelectHub"
+  >
+    <template #filters>
+      <CatalogFilters :filters="filters" v-model="selectedFilter" />
+    </template>
 
-    <!-- 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>
-    </div>
-
-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else
-      ref="listMapRef"
-      :items="items"
-      :selected-item-id="selectedHubId"
-      map-id="hubs-map"
-      point-color="#10b981"
-      @select-item="onSelectHub"
-    >
-      <template #list>
-        <Stack gap="4">
-          <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"
-                :class="{ 'ring-2 ring-primary': hub.uuid === selectedHubId }"
-                @click="onSelectHub(hub.uuid)"
-              />
-            </Stack>
-          </div>
-
-          <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>
-        </Stack>
+    <template #card="{ item }">
+      <template v-for="country in getCountryForHub(item)" :key="country.name">
+        <Text v-if="isFirstInCountry(item)" weight="semibold" class="mb-2">{{ country.name }}</Text>
       </template>
-    </ListMapLayout>
-  </div>
+      <HubCard :hub="item" />
+    </template>
+
+    <template #pagination>
+      <PaginationLoadMore
+        :shown="items.length"
+        :total="total"
+        :can-load-more="canLoadMore"
+        :loading="isLoadingMore"
+        @load-more="loadMore"
+      />
+    </template>
+
+    <template #empty>
+      <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -81,10 +56,22 @@ const {
 
 // Selected hub for map highlighting
 const selectedHubId = ref<string>()
-const listMapRef = ref<{ flyToItem: (uuid: string) => void } | null>(null)
 
-const onSelectHub = (uuid: string) => {
-  selectedHubId.value = uuid
+const onSelectHub = (hub: any) => {
+  selectedHubId.value = hub.uuid
+}
+
+// Helper to get country for hub
+const getCountryForHub = (hub: any) => {
+  return itemsByCountry.value.filter(c => c.hubs.some(h => h.uuid === hub.uuid))
+}
+
+// Check if this hub is first in its country group
+const isFirstInCountry = (hub: any) => {
+  for (const country of itemsByCountry.value) {
+    if (country.hubs[0]?.uuid === hub.uuid) return true
+  }
+  return false
 }
 
 await init()