Refactor: use topnav layout + CatalogPage component

- Remove catalog.vue layout and useCatalogLayout.ts (broken provide/inject)
- All catalog/clientarea list pages now use topnav layout
- Pages use CatalogPage component for SearchBar + Map functionality
- Clean architecture: layout handles nav, component handles features

app/pages/clientarea/addresses/index.vue

@@ -1,69 +1,68 @@
 <template>
-  <div>
-    <!-- Add button -->
-    <div class="mb-4">
+  <CatalogPage
+    :items="displayItems"
+    :map-items="itemsWithCoords"
+    :loading="isLoading"
+    with-map
+    map-id="addresses-map"
+    point-color="#10b981"
+    :selected-id="selectedAddressId"
+    :hovered-id="hoveredAddressId"
+    :total-count="items.length"
+    @select="onSelectAddress"
+    @update:hovered-id="hoveredAddressId = $event"
+  >
+    <template #searchBar="{ displayedCount, totalCount }">
+      <CatalogSearchBar
+        v-model:search-query="searchQuery"
+        :active-filters="[]"
+        :displayed-count="displayedCount"
+        :total-count="totalCount"
+        @search="onSearch"
+      />
+    </template>
+
+    <template #header>
       <NuxtLink :to="localePath('/clientarea/addresses/new')">
         <Button variant="outline" class="w-full">
           <Icon name="lucide:plus" size="16" class="mr-2" />
           {{ t('profileAddresses.actions.add') }}
         </Button>
       </NuxtLink>
-    </div>
-
-    <!-- List content -->
-    <div v-if="isLoading" class="flex items-center justify-center py-8">
-      <Card padding="lg">
-        <Stack align="center" justify="center" gap="3">
-          <Spinner />
-          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
-
-    <template v-else>
-      <Stack gap="3">
-        <div
-          v-for="item in displayItems"
-          :key="item.uuid"
-          :class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedAddressId }"
-          @click="onSelectAddress(item)"
-          @mouseenter="hoveredAddressId = item.uuid"
-          @mouseleave="hoveredAddressId = undefined"
-        >
-          <NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
-            <Card padding="sm" interactive>
-              <div class="flex flex-col gap-1">
-                <Text size="base" weight="semibold" class="truncate">{{ item.name }}</Text>
-                <Text tone="muted" size="sm" class="line-clamp-2">{{ item.address }}</Text>
-                <div class="flex items-center mt-1">
-                  <span class="text-lg">{{ isoToEmoji(item.countryCode) }}</span>
-                </div>
-              </div>
-            </Card>
-          </NuxtLink>
-        </div>
-      </Stack>
-
-      <Stack v-if="displayItems.length === 0" align="center" gap="2" class="py-8">
-        <EmptyState
-          icon="📍"
-          :title="t('profileAddresses.empty.title')"
-          :description="t('profileAddresses.empty.description')"
-          :action-label="t('profileAddresses.empty.cta')"
-          :action-to="localePath('/clientarea/addresses/new')"
-          action-icon="lucide:plus"
-        />
-      </Stack>
     </template>
-  </div>
+
+    <template #card="{ item }">
+      <NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
+        <Card padding="sm" interactive>
+          <div class="flex flex-col gap-1">
+            <Text size="base" weight="semibold" class="truncate">{{ item.name }}</Text>
+            <Text tone="muted" size="sm" class="line-clamp-2">{{ item.address }}</Text>
+            <div class="flex items-center mt-1">
+              <span class="text-lg">{{ isoToEmoji(item.countryCode) }}</span>
+            </div>
+          </div>
+        </Card>
+      </NuxtLink>
+    </template>
+
+    <template #empty>
+      <EmptyState
+        icon="📍"
+        :title="t('profileAddresses.empty.title')"
+        :description="t('profileAddresses.empty.description')"
+        :action-label="t('profileAddresses.empty.cta')"
+        :action-to="localePath('/clientarea/addresses/new')"
+        action-icon="lucide:plus"
+      />
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
 import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
-import { provideCatalogLayout } from '~/composables/useCatalogLayout'
 
 definePageMeta({
-  layout: 'catalog',
+  layout: 'topnav',
   middleware: ['auth-oidc']
 })
 
@@ -87,10 +86,6 @@ const searchQuery = ref('')
 const searchWithMap = ref(false)
 const currentBounds = ref<MapBounds | null>(null)
 
-const onBoundsChange = (bounds: MapBounds) => {
-  currentBounds.value = bounds
-}
-
 // Map items
 const itemsWithCoords = computed(() => {
   return items.value.filter(addr =>
@@ -118,56 +113,14 @@ const displayItems = computed(() => {
   })
 })
 
-// Hovered item with coordinates for map highlight
-const hoveredItem = computed(() => {
-  if (!hoveredAddressId.value) return null
-  const item = items.value.find(i => i.uuid === hoveredAddressId.value)
-  if (!item?.latitude || !item?.longitude) return null
-  return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
-})
-
 // Search handler
 const onSearch = () => {
   // TODO: Implement search
 }
 
-// No filters
-const onRemoveFilter = (_id: string) => {}
-
 const onSelectAddress = (item: any) => {
   selectedAddressId.value = item.uuid
 }
 
-// Handle selection from map
-const onMapSelect = (uuid: string) => {
-  const address = items.value.find(i => i.uuid === uuid)
-  if (address) {
-    selectedAddressId.value = uuid
-  }
-}
-
-// Provide data to layout
-provideCatalogLayout({
-  // Custom subnav for clientarea
-  subNavItems: [
-    { label: t('cabinetNav.orders'), path: '/clientarea/orders' },
-    { label: t('cabinetNav.addresses'), path: '/clientarea/addresses' },
-  ],
-  searchQuery,
-  activeFilters: ref([]),
-  displayedCount: computed(() => displayItems.value.length),
-  totalCount: computed(() => items.value.length),
-  onSearch,
-  onRemoveFilter,
-  mapItems: itemsWithCoords,
-  mapId: 'addresses-map',
-  pointColor: '#10b981',
-  hoveredItemId: hoveredAddressId,
-  hoveredItem,
-  onMapSelect,
-  onBoundsChange,
-  searchWithMap
-})
-
 await init()
 </script>