Move languages to settings menu

src/components/NavbarView.vue

@@ -16,6 +16,12 @@ export default {
     toggle() {
       this.open = !this.open
     }
+  },
+  mounted() {
+    const savedLocale = localStorage.getItem('language')
+    if(savedLocale) {
+      this.$i18n.locale = savedLocale
+    }
   }
 }
 </script>
@@ -29,7 +35,6 @@ export default {
     </div>
 
     <search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
-
     <div class="text-white hidden sm:block">
       <a
         href="https://codeberg.org/dragongoose/safetwitch"
@@ -39,7 +44,7 @@ export default {
       <router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{
         $t('nav.privacy')
       }}</router-link>
-      <language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
+      <router-link to="/settings">{{ $t("nav.settings") }}</router-link>
     </div>
 
     <div class="block sm:hidden">
@@ -57,7 +62,7 @@ export default {
         <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
           <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
           <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
-          <language-switcher></language-switcher>
+          <router-link to="/settings">{{ $t("nav.settings") }}</router-link>
         </ul>
       </div>
     </div>

src/settingsManager.ts

@@ -1,19 +1,35 @@
+export const setLanguage = (selectedLanguage: string, i18n: any) => {
+    // Locales and languages in arrays to match them
+    const locales = ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR']
+    const languages = ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어']
+
+    const locale = locales[languages.indexOf(selectedLanguage)]
+    localStorage.setItem("language", locale)
+    i18n.locale = locale
+}
+
 export function getDefaultSettings() {
     return {
         version: import.meta.env.SAFETWITCH_TAG,
-        audioOnly: {
-            name: 'Audio Only',
-            selected: false,
-            type: 'checkbox'
-        },
+        // audioOnly: {
+        //     name: 'Audio Only',
+        //     selected: false,
+        //     type: 'checkbox'
+        // },
         defaultQuality: {
-            name: 'Default Quality',
+            name: 'defaultQuality',
             options: ['160p', '360p', '480p', '720p', '1080p'],
             selected: '480p',
             type: 'option'
         },
+        language: {
+            name: 'language',
+            options: ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어'],
+            selected: 'English',
+            type: 'option'
+        },
         chatVisible: {
-            name: 'Hide Chat',
+            name: 'chatVisible',
             selected: false,
             type: 'checkbox'
         }

src/views/SettingsView.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { getDefaultSettings, syncUserSettings } from '@/settingsManager'
+import { getDefaultSettings, syncUserSettings, setLanguage } from '@/settingsManager'
 
 export default {
   setup() {
@@ -21,6 +21,8 @@ export default {
     save() {
       const settings = JSON.stringify(this.settings)
       localStorage.setItem('settings', settings)
+      setLanguage(this.settings.language.selected, this.$i18n)
+      window.location.reload()
     }
     //     download() {
     //         var hiddenElement = document.createElement('a');
@@ -47,17 +49,17 @@ export default {
 
 <template>
   <div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white">
-    <h1 class="font-bold text-3xl">Settings</h1>
+    <h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
     <hr class="my-2" />
     <ul class="w-full space-y-1">
       <li v-for="setting in settings" :key="setting.type">
         <div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
-          <label :for="setting.name">{{ setting.name }}</label>
+          <label :for="setting.name">{{ $t(`settings.${setting.name}`)  }}</label>
           <input :name="setting.name" type="checkbox" v-model="setting.selected" />
         </div>
 
         <div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
-          <label :for="setting.name">{{ setting.name }}</label>
+          <label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
           <select
             :name="setting.name"
             type="checkbox"
@@ -73,7 +75,7 @@ export default {
     </ul>
 
     <div class="space-x-2 mt-3">
-      <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button>
+      <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
       <!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
             <input type="file" @change="handleImport" name="fileinput" ref="fileinput"
                 class="bg-ctp-surface0 p-4 py-2 rounded-md"> -->