i18n implemented

app/pages/user/[id].vue

@@ -70,6 +70,7 @@ interface UserProfile {
 
 const route = useRoute()
 const router = useRouter()
+const { locale } = useI18n()
 const userId = computed(() => route.params.id as string)
 
 const { data, error } = await useFetch<UserProfile>(() => `/api/users/${userId.value}`)
@@ -185,7 +186,7 @@ const profileColor = computed(() => data.value?.user.color ?? '#6366f1')
 const profileEffectColor = computed(() => data.value?.user.cardEffectColor ?? profileColor.value)
 const profileBorderColor = computed(() => data.value?.user.cardBorderEffectColor ?? profileColor.value)
 const joinDate = computed(() => data.value
-  ? new Intl.DateTimeFormat('de-DE', { dateStyle: 'long' }).format(new Date(data.value.user.createdAt))
+  ? new Intl.DateTimeFormat(locale.value, { dateStyle: 'long' }).format(new Date(data.value.user.createdAt))
   : '')
 
 const timeAgo = useTimeAgo()
@@ -194,7 +195,7 @@ const timeAgo = useTimeAgo()
 <template>
   <div class="px-4 lg:px-6">
     <p v-if="error" class="text-muted-foreground">
-      Nutzer nicht gefunden.
+      {{ $t('misc.userNotFound') }}
     </p>
 
     <template v-else-if="data">
@@ -232,7 +233,7 @@ const timeAgo = useTimeAgo()
             </p>
             <p class="mt-1 flex items-center gap-1.5 text-sm text-muted-foreground">
               <Icon name="ph:calendar-fill" class="size-3.5" />
-              Mitglied seit {{ joinDate }}
+              {{ $t('misc.memberSince', { date: joinDate }) }}
             </p>
             <div class="mt-3 flex items-center gap-4 text-sm">
               <button
@@ -242,7 +243,7 @@ const timeAgo = useTimeAgo()
                 @click="view = 'uploads'"
               >
                 <Icon name="ph:image-fill" class="size-4" />
-                {{ data.stats.uploads }} Uploads
+                {{ data.stats.uploads }} {{ $t('misc.uploadsCol') }}
               </button>
               <button
                 type="button"
@@ -251,7 +252,7 @@ const timeAgo = useTimeAgo()
                 @click="showComments"
               >
                 <Icon name="ph:chat-fill" class="size-4" />
-                {{ data.stats.comments }} Kommentare
+                {{ data.stats.comments }} {{ $t('misc.commentsCol') }}
               </button>
             </div>
           </div>
@@ -260,14 +261,14 @@ const timeAgo = useTimeAgo()
 
       <section class="mt-6">
         <h2 ref="sectionHeadEl" class="mb-3 font-semibold">
-          {{ view === 'uploads' ? 'Uploads' : 'Kommentare' }}
+          {{ view === 'uploads' ? $t('misc.uploadsCol') : $t('misc.commentsCol') }}
         </h2>
         <template v-if="view === 'uploads'">
           <p v-if="uploadsPending" class="text-sm text-muted-foreground">
-            Lade Uploads…
+            {{ $t('grid.loading') }}
           </p>
           <p v-else-if="!uploads.length" class="text-sm text-muted-foreground">
-            Noch keine Uploads.
+            {{ $t('misc.noUploads') }}
           </p>
           <div v-else class="grid grid-flow-dense grid-cols-4 gap-2 [grid-auto-rows:5rem] sm:grid-cols-6 sm:[grid-auto-rows:5.5rem] md:grid-cols-8 lg:grid-cols-12 lg:[grid-auto-rows:6rem]">
             <UploadTile v-for="upload in uploads" :key="upload.id" :upload="upload" />
@@ -303,10 +304,10 @@ const timeAgo = useTimeAgo()
 
         <template v-else>
           <p v-if="commentsPending" class="text-sm text-muted-foreground">
-            Lade Kommentare…
+            {{ $t('comments.loading') }}
           </p>
           <p v-else-if="!comments?.items.length" class="text-sm text-muted-foreground">
-            Noch keine Kommentare.
+            {{ $t('comments.none') }}
           </p>
           <div v-else class="flex max-w-2xl flex-col divide-y rounded-md border">
             <NuxtLink