StreakFit — PWA Nuxt (thème flamme, logo SF animé)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-19 03:00:18 +02:00
commit 8ee9596529
41 changed files with 24630 additions and 0 deletions
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' })
+const { t, locale, locales, setLocale } = useI18n()
+const auth = useAuthStore()
+
+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">Langue</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>
+
+    <UButton block color="neutral" variant="subtle" icon="i-lucide-log-out" :label="t('auth.logout')" @click="doLogout" />
+  </div>
+</template>