feat(#22): Use translation keys in files

legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue

@@ -1,7 +1,7 @@
 <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>
@@ -9,7 +9,7 @@
         <template #right>
           <UButton
             icon="i-lucide-circle-plus"
-            label="Neuer Mitbestimmungsantrag"
+            :label="$t('applicationForms.createNew')"
             to="/create"
             :disabled="!canWriteApplicationForms"
             size="xl"
@@ -59,6 +59,7 @@ import { useUserStore } from '~~/stores/useUserStore'
 
 const route = useRoute()
 const toast = useToast()
+const { t: $t } = useI18n()
 
 definePageMeta({
   // Prevent whole page from re-rendering when navigating between sections to keep state
@@ -113,7 +114,7 @@ async function onSave() {
     const updated = await updateForm(applicationForm.value.id, applicationForm.value)
     if (updated) {
       updateApplicationForm(updated)
-      toast.add({ title: 'Success', description: 'Application form saved', color: 'success' })
+      toast.add({ title: $t('common.success'), description: $t('applicationForms.saved'), color: 'success' })
     }
   }
 }
@@ -122,7 +123,7 @@ async function onSubmit() {
   if (applicationForm.value) {
     await submitApplicationForm(applicationForm.value.id)
     await navigateTo('/')
-    toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
+    toast.add({ title: $t('common.success'), description: $t('applicationForms.submitted'), color: 'success' })
   }
 }
 

legalconsenthub/app/pages/application-forms/[id]/versions.vue

@@ -2,7 +2,7 @@
 <template>
   <UDashboardPanel id="versions">
     <template #header>
-      <UDashboardNavbar :title="`Versionen: ${applicationForm?.name}`">
+      <UDashboardNavbar :title="$t('versions.pageTitle', { name: applicationForm?.name })">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -15,7 +15,12 @@
 
     <template #body>
       <div class="p-6">
-        <VersionHistory v-if="applicationForm" :application-form-id="applicationForm.id" :current-form="applicationForm" @restored="handleRestored" />
+        <VersionHistory
+          v-if="applicationForm"
+          :application-form-id="applicationForm.id"
+          :current-form="applicationForm"
+          @restored="handleRestored"
+        />
       </div>
     </template>
   </UDashboardPanel>
@@ -25,6 +30,7 @@
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
+const { t: $t } = useI18n()
 
 definePageMeta({
   key: (route) => `${route.params.id}-versions`
@@ -36,8 +42,8 @@ const { applicationForm, navigationLinks: links, refresh } = await useApplicatio
 async function handleRestored() {
   await refresh()
   toast.add({
-    title: 'Version wiederhergestellt',
-    description: 'Das Formular wurde auf die ausgewählte Version zurückgesetzt.',
+    title: $t('versions.restored'),
+    description: $t('versions.restoredDescription'),
     color: 'success'
   })
   router.push(`/application-forms/${applicationForm.value.id}/0`)