i18n implemented

app/components/UserHoverCard.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
 }>()
 
 const { summaries, ensureSummary } = useUserSummaries()
+const { locale } = useI18n()
 const summary = computed(() => summaries.value[props.userId])
 const avatar = computed(() => summary.value?.avatarUrl ?? props.userAvatarUrl ?? null)
 const color = computed(() => summary.value?.color ?? props.userColor ?? null)
@@ -37,7 +38,7 @@ function onOpen(open: boolean) {
 }
 
 function formatDate(value: string) {
-  return new Date(value).toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' })
+  return new Date(value).toLocaleDateString(locale.value, { day: '2-digit', month: 'short', year: 'numeric' })
 }
 </script>
 
@@ -78,18 +79,18 @@ function formatDate(value: string) {
           </p>
           <p v-if="summary" class="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
             <Icon name="ph:calendar-fill" class="size-3" />
-            seit {{ formatDate(summary.createdAt) }}
+            {{ $t('misc.since', { date: formatDate(summary.createdAt) }) }}
           </p>
         </div>
       </div>
       <div v-if="summary" class="relative mt-3 flex items-center gap-4 border-t pt-3 text-xs text-muted-foreground">
         <span class="flex items-center gap-1.5">
           <Icon name="ph:cloud-arrow-up-fill" class="size-3.5" />
-          {{ summary.stats.uploads }} Uploads
+          {{ summary.stats.uploads }} {{ $t('misc.uploadsCol') }}
         </span>
         <span class="flex items-center gap-1.5">
           <Icon name="ph:chat-fill" class="size-3.5" />
-          {{ summary.stats.comments }} Kommentare
+          {{ summary.stats.comments }} {{ $t('misc.commentsCol') }}
         </span>
       </div>
       <CardBorderEffect v-if="borderEffect" :effect="borderEffect" :color="summary?.cardBorderEffectColor ?? color ?? '#6366f1'" />