i18n front : facettes localisées + Web Push (SW push, abonnement, toggle profil)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/pages/exercises/index.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const { api } = useApi()
 
 interface ExerciseRow { id: number, name: string, slug: string, body_part: string | null, equipment: string | null, target: string | null, image_url: string | null }
-interface Facets { body_parts: string[], equipments: string[], targets: string[], categories: string[] }
+interface Facet { value: string, label: string }
+interface Facets { body_parts: Facet[], equipments: Facet[], targets: Facet[], categories: Facet[] }
 interface Paginated { data: ExerciseRow[], meta: { current_page: number, last_page: number, total: number } }
 
 const search = ref('')
 const bodyPart = ref<string | undefined>()
 const page = ref(1)
 
-const { data: facets } = await useAsyncData('ex-facets', () => api<Facets>('/api/exercises/facets'), { lazy: true })
+const { data: facets } = await useAsyncData('ex-facets', () => api<Facets>('/api/exercises/facets', { query: { locale: locale.value } }), { lazy: true, watch: [locale] })
 
-const query = computed(() => ({ search: search.value || undefined, body_part: bodyPart.value || undefined, page: page.value }))
+const query = computed(() => ({ search: search.value || undefined, body_part: bodyPart.value || undefined, page: page.value, locale: locale.value }))
 const { data, pending } = await useAsyncData<Paginated>(
   'exercises',
   () => api<Paginated>('/api/exercises', { query: query.value }),
@@ -23,7 +24,7 @@ watch([search, bodyPart], () => { page.value = 1 })
 
 const bodyPartOptions = computed(() => [
   { label: t('exercises.all'), value: undefined },
-  ...(facets.value?.body_parts ?? []).map(b => ({ label: b, value: b }))
+  ...(facets.value?.body_parts ?? []).map(b => ({ label: b.label, value: b.value }))
 ])
 </script>
 

app/pages/profile.vue

@@ -2,6 +2,30 @@
 definePageMeta({ middleware: 'auth' })
 const { t, locale, locales, setLocale } = useI18n()
 const auth = useAuthStore()
+const { isSupported, enable, disable, sendTest } = usePush()
+const toast = useToast()
+
+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: 'Rappels activés 🔥', 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()
@@ -44,6 +68,17 @@ async function doLogout() {
       </div>
     </div>
 
+    <UCard v-if="isSupported()" :ui="{ body: 'p-4' }">
+      <div class="flex items-center justify-between gap-3">
+        <div>
+          <p class="font-semibold">Rappels de série 🔥</p>
+          <p class="text-xs text-zinc-500">Un rappel le soir si tu risques de perdre ta flamme.</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="Envoyer un test" @click="sendTest" />
+    </UCard>
+
     <UButton block color="neutral" variant="subtle" icon="i-lucide-log-out" :label="t('auth.logout')" @click="doLogout" />
   </div>
 </template>