Initial commit from monorepo

app/pages/clientarea/addresses/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <Section variant="plain" paddingY="md">
+    <Stack gap="6">
+      <PageHeader
+        :title="t('profileAddresses.header.title')"
+        :actions="[{ label: t('profileAddresses.actions.add'), icon: 'lucide:plus', to: localePath('/clientarea/addresses/new') }]"
+      />
+
+      <Card v-if="isLoading" padding="lg">
+        <Stack align="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
+        </Stack>
+      </Card>
+
+      <template v-else-if="items.length">
+        <NuxtLink :to="localePath('/clientarea/addresses/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
+          <ClientOnly>
+            <MapboxGlobe
+              map-id="addresses-map"
+              :locations="itemsWithCoords"
+              :height="192"
+            />
+          </ClientOnly>
+        </NuxtLink>
+
+        <Grid :cols="1" :md="2" :gap="4">
+          <Card v-for="addr in items" :key="addr.uuid" padding="small" interactive>
+            <div class="flex flex-col gap-1">
+              <div class="flex items-center justify-between">
+                <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
+                <div class="dropdown dropdown-end">
+                  <label tabindex="0" class="btn btn-ghost btn-xs btn-circle">
+                    <Icon name="lucide:more-vertical" size="16" />
+                  </label>
+                  <ul tabindex="0" class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-40">
+                    <li>
+                      <a class="text-error" @click="deleteAddress(addr.uuid)">
+                        <Icon name="lucide:trash-2" size="16" />
+                        {{ t('profileAddresses.actions.delete') }}
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
+
+              <div class="flex items-center justify-between mt-1">
+                <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
+              </div>
+            </div>
+          </Card>
+        </Grid>
+      </template>
+
+      <EmptyState
+        v-else
+        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>
+  </Section>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['auth-oidc']
+})
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const {
+  items,
+  isLoading,
+  itemsWithCoords,
+  deleteAddress,
+  isoToEmoji,
+  init
+} = useTeamAddresses()
+
+await init()
+</script>