added change language into settings

frontend/src/locales/cs.json

@@ -167,6 +167,7 @@
 		"accountTitle": "Nastavení účtu",
 		"loggedInAs": "Přihlášený uživatel",
 		"themeTitle": "Vzhled",
+		"languageTitle": "Jazyk",
 		"logout": "Odhlásit se"
 	}
 }

frontend/src/locales/de.json

@@ -167,6 +167,7 @@
 		"accountTitle": "Kontoeinstellungen",
 		"loggedInAs": "Angemeldet als",
 		"themeTitle": "Darstellung",
+		"languageTitle": "Sprache",
 		"logout": "Abmelden"
 	}
 }

frontend/src/locales/en.json

@@ -167,6 +167,7 @@
 		"accountTitle": "Account settings",
 		"loggedInAs": "Logged in as",
 		"themeTitle": "Appearance",
+		"languageTitle": "Language",
 		"logout": "Log out"
 	}
 }

frontend/src/locales/es.json

@@ -167,6 +167,7 @@
 		"accountTitle": "Ajustes de cuenta",
 		"loggedInAs": "Sesión iniciada como",
 		"themeTitle": "Apariencia",
+		"languageTitle": "Idioma",
 		"logout": "Cerrar sesión"
 	}
 }

frontend/src/locales/sk.json

@@ -167,6 +167,7 @@
 		"accountTitle": "Nastavenia účtu",
 		"loggedInAs": "Prihlásený používateľ",
 		"themeTitle": "Vzhľad",
+		"languageTitle": "Jazyk",
 		"logout": "Odhlásiť sa"
 	}
 }

frontend/src/views/SettingsView.vue

@@ -1,12 +1,41 @@
-<script setup lang="ts">
+<script setup lang="ts">
+import { computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import ThemeToggle from '@/components/common/ThemeToggle.vue'
+import i18n from '@/i18n'
+import { SUPPORTED_LOCALES, type AppLocale } from '@/i18n'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
 const auth = useAuthStore()
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
+
+const isSupportedLocale = (value: string): value is AppLocale => {
+	return SUPPORTED_LOCALES.includes(value as AppLocale)
+}
+
+const setLocale = (value: string) => {
+	if (!isSupportedLocale(value)) {
+		return
+	}
+	i18n.global.locale.value = value
+	document.documentElement.setAttribute('lang', value)
+	localStorage.setItem('locale', value)
+}
+
+const localeValue = computed({
+	get: () => i18n.global.locale.value as AppLocale,
+	set: (value: string) => setLocale(value),
+})
+
+watch(
+	() => i18n.global.locale.value,
+	(nextLocale) => {
+		document.documentElement.setAttribute('lang', nextLocale)
+	},
+	{ immediate: true },
+)
 
 const onLogout = async () => {
 	await auth.logout()
@@ -25,6 +54,16 @@ const onLogout = async () => {
 				<span>{{ t('settings.themeTitle') }}</span>
 				<ThemeToggle />
 			</div>
+			<div class="settings-card__theme">
+				<span>{{ t('settings.languageTitle') }}</span>
+				<label class="locale-control" :aria-label="t('settings.languageTitle')">
+					<select v-model="localeValue">
+						<option v-for="lang in SUPPORTED_LOCALES" :key="lang" :value="lang">
+							{{ t(`locale.${lang}`) }}
+						</option>
+					</select>
+				</label>
+			</div>
 			<button class="btn btn-danger" type="button" @click="onLogout">{{ t('settings.logout') }}</button>
 		</section>
 	</section>