feat: user selectable language

frontend/pages/profile.vue

@@ -8,7 +8,6 @@
   import MdiFill from "~icons/mdi/fill";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiAccountMultiple from "~icons/mdi/account-multiple";
-  import type {ViewType} from "~/composables/use-preferences";
 
   definePageMeta({
     middleware: ["auth"],
@@ -35,6 +34,9 @@
   function setDisplayHeader() {
     preferences.value.displayHeaderDecor = !preferences.value.displayHeaderDecor;
   }
+  function setLanguage(lang: string) {
+    preferences.value.language = lang;
+  }
 
   // Currency Selection
   const currency = ref<CurrenciesCurrency>({
@@ -370,6 +372,19 @@
             {{ token }}
           </div>
         </div>
+        <div class="p-5 pt-0 form-control w-full">
+          <label class="label">
+            <span class="label-text">{{ $t("profile.language") }}</span>
+          </label>
+          <select v-model="$i18n.locale" class="select select-bordered">
+            <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">
+              {{ $t(`languages.${lang}`) }}
+            </option>
+          </select>
+          <div class="mt-4">
+            <BaseButton size="sm" @click="setLanguage($i18n.locale)"> {{ $t("profile.update_language") }} </BaseButton>
+          </div>
+        </div>
       </BaseCard>
 
       <BaseCard>