i18n implemented

app/pages/index.vue

@@ -38,6 +38,7 @@ interface UploadList {
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 const FILTER_KEYS = ['tag', 'type', 'uploader', 'days'] as const
 const hasFilters = computed(() => FILTER_KEYS.some(k => typeof route.query[k] === 'string' && route.query[k]))
 
@@ -140,7 +141,7 @@ const { isOverDropZone } = useDropZone(dropTarget, {
   onDrop(files) {
     const valid = (files ?? []).filter(isMediaFile)
     if (valid.length && !uploading.value) uploadFiles(valid)
-    else if (files?.length) toast.error('Nur Bilder, Videos und Audiodateien sind erlaubt')
+    else if (files?.length) toast.error(t('upload.onlyMedia'))
   },
 })
 
@@ -154,7 +155,7 @@ useEventListener('drop', (e: DragEvent) => {
 
 async function uploadFiles(files: File[]) {
   if (!user.value) {
-    toast.error('Melde dich an, um hochzuladen.')
+    toast.error(t('upload.loginToUploadToast'))
     return
   }
   uploading.value = true
@@ -166,7 +167,7 @@ async function uploadFiles(files: File[]) {
     }))
     const failed = results.filter(r => r.status === 'rejected').length
     if (failed) {
-      toast.error(`${failed} von ${files.length} Dateien fehlgeschlagen`)
+      toast.error(t('upload.failedCount', { failed, total: files.length }))
     }
     await refreshNuxtData('uploads')
     await navigateTo('/')
@@ -186,19 +187,19 @@ async function uploadFiles(files: File[]) {
       <div class="flex flex-col items-center gap-3 rounded-lg border-2 border-dashed border-primary bg-background p-10">
         <Icon name="ph:cloud-arrow-up-fill" class="size-12 text-primary" />
         <p class="text-lg font-medium">
-          {{ uploading ? 'Lädt hoch…' : 'Zum Hochladen loslassen' }}
+          {{ uploading ? $t('upload.uploading') : $t('upload.dropToUpload') }}
         </p>
       </div>
     </div>
     <div ref="filterRowEl" class="mb-2 flex items-center gap-2">
       <UploadFilters />
-      <span v-if="hasFilters" class="text-sm text-muted-foreground">{{ total }} Uploads</span>
+      <span v-if="hasFilters" class="text-sm text-muted-foreground">{{ $t('grid.count', { n: total }) }}</span>
     </div>
     <p v-if="pending" class="text-muted-foreground">
-      Lade Uploads…
+      {{ $t('grid.loading') }}
     </p>
     <p v-else-if="!uploads.length" class="text-muted-foreground">
-      {{ hasFilters ? 'Keine Uploads für die aktiven Filter.' : 'Noch keine Uploads. Sei der Erste!' }}
+      {{ hasFilters ? $t('grid.emptyFiltered') : $t('grid.empty') }}
     </p>
 
     <div v-else class="grid grid-flow-dense grid-cols-4 gap-2 [grid-auto-rows:6.5rem] sm:grid-cols-6 sm:[grid-auto-rows:7rem] md:grid-cols-8 lg:grid-cols-12 lg:[grid-auto-rows:7.5rem]">