feat: localizations

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

src/views/ProfilePage.vue

@@ -1,20 +1,24 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import ProfileAccount from '@/components/ProfileAccount.vue'
 import ProfileNotifications from '@/components/ProfileNotifications.vue'
+import ProfilePreferences from '@/components/ProfilePreferences.vue'
 import ProfileSecurity from '@/components/ProfileSecurity.vue'
+import { useL10n } from '@KTXC'
 
 const route = useRoute()
+const { t } = useL10n('user_profile')
 
 const activeTab = ref(route.params.tab || 'account')
 
 // tabs
-const tabs = [
-  { title: 'Account', icon: 'mdi-account-outline', tab: 'account' },
-  { title: 'Security', icon: 'mdi-lock-outline', tab: 'security' },
-  { title: 'Notifications', icon: 'mdi-bell-outline', tab: 'notifications' },
-]
+const tabs = computed(() => [
+  { title: t('tabs.account', 'Account'), icon: 'mdi-account-outline', tab: 'account' },
+  { title: t('tabs.security', 'Security'), icon: 'mdi-lock-outline', tab: 'security' },
+  { title: t('tabs.preferences', 'Preferences'), icon: 'mdi-tune', tab: 'preferences' },
+  { title: t('tabs.notifications', 'Notifications'), icon: 'mdi-bell-outline', tab: 'notifications' },
+])
 </script>
 
 <template>
@@ -61,6 +65,11 @@ const tabs = [
       <VWindowItem value="notifications">
         <ProfileNotifications />
       </VWindowItem>
+
+      <!-- Preferences -->
+      <VWindowItem value="preferences">
+        <ProfilePreferences />
+      </VWindowItem>
     </VWindow>
   </PerfectScrollbar>
 </template>