streakfit-web/app/pages/profile.vue

<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
const { t, locale, locales, setLocale } = useI18n()
const auth = useAuthStore()
const { api, ensureCsrf } = useApi()
const { isSupported, enable, disable, sendTest } = usePush()
const toast = useToast()

// Matériel possédé (config profil) : sert au filtre "mon matos" du catalogue d'exercices.
const { data: facets } = await useAsyncData(
  'profile-facets',
  () => api<{ equipments: { value: string, label: string }[] }>('/api/exercises/facets', { query: { locale: locale.value } }),
  { lazy: true, watch: [locale] }
)
const equipmentItems = computed(() => (facets.value?.equipments ?? []).map(e => ({ label: e.label, value: e.value })))
const gear = ref<string[]>([...(auth.user?.available_equipment ?? [])])
watch(() => auth.user?.available_equipment, v => { gear.value = [...(v ?? [])] })
const savingGear = ref(false)
async function saveGear() {
  savingGear.value = true
  try {
    await ensureCsrf()
    await api('/api/me', { method: 'PATCH', body: { available_equipment: gear.value } })
    await auth.fetchMe()
    toast.add({ title: t('profile.gearSaved'), color: 'primary' })
  } catch {
    toast.add({ title: t('common.error'), color: 'error' })
  } finally {
    savingGear.value = false
  }
}

const pushOn = ref(auth.push.enabled)
const pushLoading = ref(false)

async function togglePush(val: boolean) {
  pushLoading.value = true
  try {
    if (val) {
      await enable(auth.push.vapid_public_key || '')
      pushOn.value = true
      toast.add({ title: t('profile.remindersOn'), color: 'primary' })
    } else {
      await disable()
      pushOn.value = false
    }
  } catch (e) {
    pushOn.value = false
    toast.add({ title: (e as Error).message || t('common.error'), color: 'error' })
  } finally {
    pushLoading.value = false
  }
}

async function doLogout() {
  await auth.logout()
  await navigateTo('/login')
}
</script>

<template>
  <div class="space-y-6">
    <div class="flex items-center gap-4">
      <div class="size-16 rounded-full sf-flame-bg flex items-center justify-center text-white text-2xl font-black">
        {{ auth.user?.name?.[0]?.toUpperCase() }}
      </div>
      <div>
        <h1 class="text-xl font-black">{{ auth.user?.name }}</h1>
        <p class="text-sm text-zinc-500">{{ auth.user?.email }}</p>
      </div>
    </div>

    <UCard v-if="auth.streak" :ui="{ body: 'p-4' }">
      <div class="grid grid-cols-3 text-center">
        <div><p class="text-2xl font-black sf-flame-text">{{ auth.streak.current }}</p><p class="text-xs text-zinc-500">{{ t('dashboard.streakDays') }}</p></div>
        <div><p class="text-2xl font-black">{{ auth.streak.longest }}</p><p class="text-xs text-zinc-500">{{ t('dashboard.longest') }}</p></div>
        <div><p class="text-2xl font-black text-sky-500">{{ auth.streak.freezes }}</p><p class="text-xs text-zinc-500">{{ t('dashboard.freezes') }}</p></div>
      </div>
    </UCard>

    <div>
      <p class="text-sm font-semibold text-zinc-500 mb-2">{{ t('profile.language') }}</p>
      <div class="flex gap-2">
        <UButton
          v-for="l in (locales as { code: string, name: string }[])"
          :key="l.code"
          :color="locale === l.code ? 'primary' : 'neutral'"
          :variant="locale === l.code ? 'solid' : 'subtle'"
          size="sm"
          :label="l.name"
          @click="setLocale(l.code as 'fr' | 'en' | 'pt-BR')"
        />
      </div>
    </div>

    <div>
      <p class="text-sm font-semibold text-zinc-500 mb-2">{{ t('profile.equipment') }}</p>
      <p class="text-xs text-zinc-500 mb-2">{{ t('profile.equipmentDesc') }}</p>
      <USelectMenu
        v-model="gear"
        :items="equipmentItems"
        value-key="value"
        multiple
        searchable
        :placeholder="t('profile.equipmentPlaceholder')"
        size="lg"
        class="w-full"
      />
      <UButton
        class="mt-2"
        color="primary"
        size="sm"
        icon="i-lucide-save"
        :loading="savingGear"
        :label="t('common.save')"
        @click="saveGear"
      />
    </div>

    <UCard v-if="isSupported()" :ui="{ body: 'p-4' }">
      <div class="flex items-center justify-between gap-3">
        <div>
          <p class="font-semibold">{{ t('profile.reminders') }}</p>
          <p class="text-xs text-zinc-500">{{ t('profile.remindersDesc') }}</p>
        </div>
        <USwitch v-model="pushOn" :loading="pushLoading" @update:model-value="togglePush" />
      </div>
      <UButton v-if="pushOn" size="xs" variant="link" color="neutral" class="mt-1 -ml-2" :label="t('profile.test')" @click="sendTest" />
    </UCard>

    <UButton block color="neutral" variant="subtle" icon="i-lucide-log-out" :label="t('auth.logout')" @click="doLogout" />
  </div>
</template>