From f12c59800a8c6bdc221a0f2faaa7081abf3aa2b2 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Tue, 6 Jun 2023 23:37:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20language=20options=20to=20app?=
 =?UTF-8?q?earance=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n.js                               |  5 +++++
 src/views/settings/AppearanceSettings.vue | 13 +++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/i18n.js b/src/i18n.js
index e175b04..2330173 100644
--- a/src/i18n.js
+++ b/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({
diff --git a/src/views/settings/AppearanceSettings.vue b/src/views/settings/AppearanceSettings.vue
index ece240f..ca8d5da 100644
--- a/src/views/settings/AppearanceSettings.vue
+++ b/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>