feat(#22): Use translation keys in files

legalconsenthub/app/pages/index.vue

@@ -1,13 +1,13 @@
 <template>
   <UDashboardPanel id="home">
     <template #header>
-      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
+      <UDashboardNavbar :title="$t('common.home')" :ui="{ right: 'gap-3' }">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
 
         <template #right>
-          Aktuelle Organisation
+          {{ $t('organization.current') }}
           <USelect
             v-model="selectedOrganizationId"
             :items="organizations"
@@ -20,7 +20,7 @@
             class="w-48"
           />
 
-          <UTooltip text="Notifications" :shortcuts="['N']">
+          <UTooltip :text="$t('notifications.tooltip')" :shortcuts="['N']">
             <UButton color="neutral" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
               <UChip :show="unreadCount > 0" color="error" inset>
                 <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
@@ -31,7 +31,7 @@
 
           <UButton
             icon="i-lucide-circle-plus"
-            label="Neuer Mitbestimmungsantrag"
+            :label="$t('applicationForms.createNew')"
             to="/create"
             :disabled="!canWriteApplicationForms"
             size="xl"
@@ -86,18 +86,18 @@
             <div class="flex items-center gap-2 text-sm">
               <UIcon name="i-lucide-pencil" class="size-4 text-muted shrink-0" />
               <span class="text-muted">
-                Zuletzt bearbeitet von
+                {{ $t('applicationForms.lastEditedBy') }}
                 <span class="font-medium text-highlighted">{{ applicationFormElem.lastModifiedBy.name }}</span>
-                am {{ formatDate(applicationFormElem.modifiedAt) }}
+                {{ $t('common.on') }} {{ formatDate(applicationFormElem.modifiedAt) }}
               </span>
             </div>
 
             <div class="flex items-center gap-2 text-sm">
               <UIcon name="i-lucide-user-plus" class="size-4 text-muted shrink-0" />
               <span class="text-muted">
-                Erstellt von
+                {{ $t('applicationForms.createdBy') }}
                 <span class="font-medium text-highlighted">{{ applicationFormElem.createdBy.name }}</span>
-                am {{ formatDate(applicationFormElem.createdAt) }}
+                {{ $t('common.on') }} {{ formatDate(applicationFormElem.createdAt) }}
               </span>
             </div>
           </div>
@@ -122,6 +122,7 @@ const { getAllApplicationForms, deleteApplicationFormById } = useApplicationForm
 const route = useRoute()
 const userStore = useUserStore()
 const { organizations, selectedOrganization } = storeToRefs(userStore)
+const { t: $t } = useI18n()
 
 // Inject notification state from layout
 const { isNotificationsSlideoverOpen, unreadCount } = inject('notificationState', {
@@ -178,7 +179,7 @@ const applicationForms = computed({
 function getLinksForApplicationForm(applicationForm: ApplicationFormDto) {
   return [
     {
-      label: 'Löschen',
+      label: $t('common.delete'),
       icon: 'i-lucide-trash',
       to: `?delete&id=${applicationForm.id}`,
       disabled: !canWriteApplicationForms.value