Unify CatalogPage: fixed map, hover support, delete ListMapLayout

app/pages/clientarea/addresses/index.vue

@@ -1,71 +1,40 @@
 <template>
-  <div class="flex flex-col flex-1 min-h-0">
-    <!-- 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('profileAddresses.states.loading') }}</Text>
-        </Stack>
-      </Card>
-    </div>
+  <CatalogPage
+    :items="itemsForMap"
+    :loading="isLoading"
+    map-id="addresses-map"
+    point-color="#10b981"
+    :selected-id="selectedAddressId"
+    v-model:hovered-id="hoveredAddressId"
+    @select="onSelectAddress"
+  >
+    <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>
+    </template>
 
-    <!-- ListMapLayout -->
-    <ListMapLayout
-      v-else-if="items.length"
-      :items="itemsForMap"
-      :selected-item-id="selectedAddressId"
-      :hovered-item-id="hoveredAddressId"
-      map-id="addresses-map"
-      point-color="#10b981"
-      @select-item="onSelectAddress"
-    >
-      <template #list>
-        <Stack gap="4">
-          <!-- Add new address button -->
-          <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>
+    <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>
 
-          <!-- Address cards -->
-          <Stack gap="3">
-            <NuxtLink
-              v-for="addr in items"
-              :key="addr.uuid"
-              :to="localePath(`/clientarea/addresses/${addr.uuid}`)"
-              class="block"
-            >
-              <Card
-                padding="sm"
-                interactive
-                :class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
-                @click.prevent="onSelectAddress(addr.uuid)"
-                @mouseenter="hoveredAddressId = addr.uuid"
-                @mouseleave="hoveredAddressId = undefined"
-              >
-                <div class="flex flex-col gap-1">
-                  <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
-                  <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
-                  <div class="flex items-center mt-1">
-                    <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
-                  </div>
-                </div>
-              </Card>
-            </NuxtLink>
-          </Stack>
-
-          <Stack v-if="items.length === 0" align="center" gap="2">
-            <Text tone="muted">{{ t('profileAddresses.empty.title') }}</Text>
-          </Stack>
-        </Stack>
-      </template>
-    </ListMapLayout>
-
-    <!-- Empty state -->
-    <div v-else class="flex-1 flex items-center justify-center">
+    <template #empty>
       <EmptyState
         icon="📍"
         :title="t('profileAddresses.empty.title')"
@@ -74,8 +43,8 @@
         :action-to="localePath('/clientarea/addresses/new')"
         action-icon="lucide:plus"
       />
-    </div>
-  </div>
+    </template>
+  </CatalogPage>
 </template>
 
 <script setup lang="ts">
@@ -97,19 +66,21 @@ const {
 const selectedAddressId = ref<string>()
 const hoveredAddressId = ref<string>()
 
-// Map items for ListMapLayout
+// Map items for CatalogPage
 const itemsForMap = computed(() => {
   return items.value.map(addr => ({
     uuid: addr.uuid,
     name: addr.name,
+    address: addr.address,
     latitude: addr.latitude,
     longitude: addr.longitude,
+    countryCode: addr.countryCode,
     country: addr.countryCode
   }))
 })
 
-const onSelectAddress = (uuid: string) => {
-  selectedAddressId.value = uuid
+const onSelectAddress = (item: any) => {
+  selectedAddressId.value = item.uuid
 }
 
 await init()