✨ Add language options to appearance settings

src/i18n.js

@@ -2,6 +2,11 @@ import { createI18n } from "vue-i18n";
 import { strings } from "@/strings";
 import { ref, watch } from "vue";
 
+export const localeNames = {
+  de: "German",
+  en: "English",
+};
+
 export const language = ref(localStorage.getItem("lang") || "en");
 
 let i18n = createI18n({

src/views/settings/AppearanceSettings.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { theme } from "@/store";
 import RadioButtons from "@/components/settings/radio-buttons.vue";
+import i18n, { language, localeNames } from "@/i18n";
 </script>
 
 <template>
@@ -15,6 +16,14 @@ import RadioButtons from "@/components/settings/radio-buttons.vue";
     :values="['auto', 'light', 'dark']"
     v-model="theme"
   />
+  <div class="spacer" />
+  <h2>{{ $t("settings.heading.language") }}</h2>
+  <p>{{ $t("settings.text.language") }}</p>
+  <RadioButtons
+    :options="i18n.global.availableLocales.map((locale) => localeNames[locale])"
+    :values="i18n.global.availableLocales"
+    v-model="language"
+  />
 </template>
 
 <style scoped>
@@ -25,4 +34,8 @@ h2 {
 p {
   margin: 5px 0px;
 }
+
+.spacer {
+  height: 20px;
+}
 </style>