[FEATURE] UI - Add language selection in user settings

argilla-frontend/components/features/user-settings/UserSettingsContent.vue

@@ -57,6 +57,13 @@
       />
       <UserSettingsTheme />
     </div>
+    <div class="form-group">
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('userSettings.language')"
+      />
+      <UserSettingsLanguage />
+    </div>
   </div>
 </template>
 

argilla-frontend/components/features/user-settings/UserSettingsLanguage.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="language-switch">
+    <div
+      class="language-switch__item"
+      v-for="(language, index) in languages"
+      :key="index"
+    >
+      <input
+        type="radio"
+        :id="language"
+        :value="language"
+        v-model="$i18n.locale"
+        @input="setLocale(language)"
+      />
+      <label :for="language"> {{ language }}</label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      languages: this.$i18n.locales.map((l) => l.code).sort(),
+    };
+  },
+  methods: {
+    setLocale(locale) {
+      this.$i18n.setLocale(locale);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.language-switch {
+  display: flex;
+  gap: $base-space * 2;
+  padding: $base-space * 2 0;
+}
+input {
+  display: none;
+}
+label {
+  display: flex;
+  flex-direction: column;
+  gap: $base-space;
+  align-items: center;
+  min-width: 40px;
+  padding: $base-space * 2;
+  background: var(--bg-opacity-4);
+  border-radius: 6px;
+  border: 1px solid var(--bg-opacity-4);
+  color: var(--fg-secondary);
+  text-transform: uppercase;
+  &:hover {
+    transition: color 0.3s ease;
+    color: var(--fg-primary);
+  }
+}
+input:checked + label {
+  border-color: var(--fg-cuaternary);
+  color: var(--fg-primary);
+}
+</style>

argilla-frontend/nuxt.config.ts

@@ -63,8 +63,6 @@ const config: NuxtConfig = {
 
     { src: "~/plugins/di" },
 
-    { src: "~/plugins/language" },
-
     { src: "~/plugins/plugins/axios.ts" },
     { src: "~/plugins/plugins/axios-cache.ts" },
     { src: "~/plugins/plugins/svg-icon.js" },

argilla-frontend/translation/de.js

@@ -88,6 +88,7 @@ export default {
     apiKeyDescription:
       "API-Keys erlauben es die Datensätze über das Python SDK zu verwalten.",
     theme: "Theme",
+    language: "Sprache",
     copyKey: "API-Key kopieren",
   },
   userAvatarTooltip: {

argilla-frontend/translation/en.js

@@ -86,6 +86,7 @@ export default {
     apiKeyDescription:
       "API key tokens allow you to manage datasets using the Python SDK.",
     theme: "Theme",
+    language: "Language",
     copyKey: "Copy key",
   },
   userAvatarTooltip: {

argilla-frontend/translation/es.js

@@ -84,6 +84,8 @@ export default {
     apiKey: "Clave de API",
     apiKeyDescription:
       "Los tokens de clave API permiten administrar datasets utilizando el SDK de Python",
+    theme: "Tema",
+    language: "Idioma",
     copyKey: "Copiar clave",
   },
   userAvatarTooltip: {