feat: localizations

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/ProfileNotifications.vue

@@ -1,69 +1,62 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useL10n } from '@KTXC'
 
-const recentDevices = ref(
-  [
-    {
-      type: 'New for you',
-      email: true,
-      browser: true,
-      app: true,
-    },
-    {
-      type: 'Account activity',
-      email: true,
-      browser: true,
-      app: true,
-    },
-    {
-      type: 'A new browser used to sign in',
-      email: true,
-      browser: true,
-      app: false,
-    },
-    {
-      type: 'A new device is linked',
-      email: true,
-      browser: false,
-      app: false,
-    },
-  ],
-)
+const { t } = useL10n('user_profile')
 
-const selectedNotification = ref('Only when I\'m online')
+const recentDevices = ref([
+  { id: 'newForYou', email: true, browser: true, app: true },
+  { id: 'accountActivity', email: true, browser: true, app: true },
+  { id: 'newBrowserSignIn', email: true, browser: true, app: false },
+  { id: 'newDeviceLinked', email: true, browser: false, app: false },
+])
+
+const notificationTypeLabels = computed<Record<string, string>>(() => ({
+  newForYou: t('notifications.types.newForYou', 'New for you'),
+  accountActivity: t('notifications.types.accountActivity', 'Account activity'),
+  newBrowserSignIn: t('notifications.types.newBrowserSignIn', 'A new browser used to sign in'),
+  newDeviceLinked: t('notifications.types.newDeviceLinked', 'A new device is linked'),
+}))
+
+const notificationTimingOptions = computed(() => [
+  { value: 'online', title: t('notifications.timing.online', 'Only when I\'m online') },
+  { value: 'anytime', title: t('notifications.timing.anytime', 'Anytime') },
+])
+
+const selectedNotification = ref('online')
 </script>
 
 <template>
-  <VCard title="Notifications">
+  <VCard :title="t('notifications.title', 'Notifications')">
     <VCardText>
-      We need permission from your browser to show notifications.
-      <a href="javascript:void(0)">Request Permission</a>
+      {{ t('notifications.permissionDescription', 'We need permission from your browser to show notifications.') }}
+      <a href="javascript:void(0)">{{ t('notifications.requestPermission', 'Request Permission') }}</a>
     </VCardText>
 
     <VTable class="text-no-wrap">
       <thead>
         <tr>
           <th scope="col">
-            Type
+            {{ t('notifications.columns.type', 'Type') }}
           </th>
           <th scope="col">
-            EMAIL
+            {{ t('notifications.columns.email', 'EMAIL') }}
           </th>
           <th scope="col">
-            BROWSER
+            {{ t('notifications.columns.browser', 'BROWSER') }}
           </th>
           <th scope="col">
-            App
+            {{ t('notifications.columns.app', 'App') }}
           </th>
         </tr>
       </thead>
       <tbody>
         <tr
           v-for="device in recentDevices"
-          :key="device.type"
+          :key="device.id"
         >
           <td>
-            {{ device.type }}
+            {{ notificationTypeLabels[device.id] }}
           </td>
           <td>
             <VCheckbox v-model="device.email" />
@@ -82,7 +75,7 @@ const selectedNotification = ref('Only when I\'m online')
     <VCardText>
       <VForm @submit.prevent="() => {}">
         <p class="text-base font-weight-medium">
-          When should we send you notifications?
+          {{ t('notifications.timingQuestion', 'When should we send you notifications?') }}
         </p>
 
         <VRow>
@@ -93,21 +86,21 @@ const selectedNotification = ref('Only when I\'m online')
             <VSelect
               v-model="selectedNotification"
               mandatory
-              :items="['Only when I\'m online', 'Anytime']"
+              :items="notificationTimingOptions"
             />
           </VCol>
         </VRow>
 
         <div class="d-flex flex-wrap gap-4 mt-4">
           <VBtn type="submit">
-            Save Changes
+            {{ t('actions.saveChanges', 'Save changes') }}
           </VBtn>
           <VBtn
             color="secondary"
             variant="outlined"
             type="reset"
           >
-            Reset
+            {{ t('actions.reset', 'Reset') }}
           </VBtn>
         </div>
       </VForm>