feat: user selectable language

frontend/composables/use-preferences.ts

@@ -11,6 +11,7 @@ export type LocationViewPreferences = {
   theme: DaisyTheme;
   itemsPerTablePage: number;
   displayHeaderDecor: boolean;
+  language?: string;
 };
 
 /**
@@ -28,6 +29,7 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
       theme: "homebox",
       itemsPerTablePage: 10,
       displayHeaderDecor: true,
+      language: null,
     },
     { mergeDefaults: true }
   );

frontend/locales/en.json

@@ -124,7 +124,9 @@
     "url": "URL",
     "user_profile": "User Profile",
     "user_profile_sub": "Invite users, and manage your account.",
-    "display_header": "{ currentValue, select, true {Hide Header} false {Show Header} other {Not Hit}}"
+    "display_header": "{ currentValue, select, true {Hide Header} false {Show Header} other {Not Hit}}",
+    "language": "Language",
+    "update_language": "Update Language"
   },
   "tools": {
     "reports": "Reports",
@@ -163,5 +165,25 @@
       "set_primary_photo_sub": "In version v0.10.0 of Homebox, the primary image field was added to attachments of type photo. This action will set the primary image field to the first image in the attachments array in the database, if it is not already set. '<a class=\"link\" href=\"https://github.com/hay-kot/homebox/pull/576\">'See GitHub PR #576'</a>'",
       "set_primary_photo_button": "Set Primary Photo"
     }
+  },
+  "languages": {
+    "ca": "Catalan",
+    "de": "German",
+    "en": "English",
+    "es": "Spanish",
+    "fr": "French",
+    "hu": "Hungarian",
+    "it": "Italian",
+    "nl": "Dutch",
+    "pl": "Polish",
+    "pt-BR": "Portuguese (Brazil)",
+    "ru": "Russian",
+    "sl": "Slovenian",
+    "sv": "Swedish",
+    "tr": "Turkish",
+    "zh-CN": "Chinese (Simplified)",
+    "zh-HK": "Chinese (Hong Kong)",
+    "zh-MO": "Chinese (Macau)",
+    "zh-TW": "Chinese (Traditional)"
   }
 }

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>

frontend/plugins/i18n.ts

@@ -20,11 +20,12 @@ export default defineNuxtPlugin(({ vueApp }) => {
     }
     return matched;
   }
+  const preferences = useViewPreferences();
   const i18n = createI18n({
     fallbackLocale: "en",
     globalInjection: true,
     legacy: false,
-    locale: checkDefaultLanguage() || "en",
+    locale: preferences.value.language || checkDefaultLanguage() || "en",
     messageCompiler,
     messages: messages(),
   });