webapp/app/pages/clientarea/addresses/index.vue

<template>
  <div>
    <CatalogPage
      :items="mapPoints"
      :loading="isLoading"
      :use-server-clustering="false"
      map-id="addresses-map"
      point-color="#10b981"
      :hovered-id="hoveredAddressId"
      :show-panel="!selectedAddressId"
      panel-width="w-96"
      :hide-view-toggle="true"
      @select="onMapSelect"
      @update:hovered-id="hoveredAddressId = $event"
    >
      <template #panel>
        <!-- Panel header -->
        <div class="p-4 border-b border-white/10 flex-shrink-0">
          <div class="flex items-center justify-between mb-3">
            <span class="font-semibold">{{ t('cabinetNav.addresses') }}</span>
          </div>

          <!-- Search -->
          <div class="relative mb-3">
            <input
              v-model="searchQuery"
              type="text"
              :placeholder="t('common.search')"
              class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
            />
            <Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
          </div>

          <!-- Add button -->
          <NuxtLink :to="localePath('/clientarea/addresses/new')">
            <button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
              <Icon name="lucide:plus" size="14" class="mr-1" />
              {{ t('profileAddresses.actions.add') }}
            </button>
          </NuxtLink>
        </div>

        <!-- Addresses list -->
        <div class="flex-1 overflow-y-auto p-3 space-y-2">
          <template v-if="displayItems.length > 0">
            <div
              v-for="item in displayItems"
              :key="item.uuid"
              class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
              :class="{ 'ring-2 ring-emerald-500': selectedAddressId === item.uuid }"
              @click="selectedAddressId = item.uuid"
              @mouseenter="hoveredAddressId = item.uuid"
              @mouseleave="hoveredAddressId = undefined"
            >
              <div class="flex items-start gap-2">
                <span class="text-xl">{{ isoToEmoji(item.countryCode) }}</span>
                <div class="flex-1 min-w-0">
                  <div class="font-semibold text-sm truncate">{{ item.name }}</div>
                  <div class="text-xs text-white/60 line-clamp-2">{{ item.address }}</div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="text-center py-8">
              <div class="text-3xl mb-2">📍</div>
              <div class="font-semibold text-sm mb-1">{{ t('profileAddresses.empty.title') }}</div>
              <div class="text-xs text-white/60 mb-3">{{ t('profileAddresses.empty.description') }}</div>
              <NuxtLink :to="localePath('/clientarea/addresses/new')">
                <button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
                  <Icon name="lucide:plus" size="14" class="mr-1" />
                  {{ t('profileAddresses.empty.cta') }}
                </button>
              </NuxtLink>
            </div>
          </template>
        </div>

        <!-- Footer -->
        <div class="p-3 border-t border-white/10 flex-shrink-0">
          <span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ items.length }}</span>
        </div>
      </template>
    </CatalogPage>

    <!-- Address Detail Bottom Sheet -->
    <AddressDetailBottomSheet
      :is-open="!!selectedAddressId"
      :address-uuid="selectedAddressId"
      @close="selectedAddressId = null"
      @deleted="selectedAddressId = null"
    />
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav',
  middleware: ['auth-oidc']
})

const { t } = useI18n()
const localePath = useLocalePath()

const {
  items,
  isLoading,
  isoToEmoji,
  init
} = useTeamAddresses()

const hoveredAddressId = ref<string>()
const searchQuery = ref('')
const selectedAddressId = ref<string | null>(null)

// Map points
const mapPoints = computed(() => {
  return items.value
    .filter(addr => addr.uuid && addr.latitude && addr.longitude)
    .map(addr => ({
      uuid: addr.uuid!,
      name: addr.name || '',
      latitude: Number(addr.latitude),
      longitude: Number(addr.longitude)
    }))
})

// Display items with search filter
const displayItems = computed(() => {
  if (!searchQuery.value) return items.value

  const query = searchQuery.value.toLowerCase()
  return items.value.filter(item =>
    item.name?.toLowerCase().includes(query) ||
    item.address?.toLowerCase().includes(query)
  )
})

const onMapSelect = (item: { uuid?: string | null }) => {
  if (item.uuid) {
    selectedAddressId.value = item.uuid
  }
}

await init()
</script>