feat(user): use user language from store after logging in

src/i18n/index.ts

@@ -1,5 +1,6 @@
 import {createI18n} from 'vue-i18n'
 import langEN from './lang/en.json'
+import {useAuthStore} from '@/stores/auth'
 
 export const SUPPORTED_LOCALES = {
 	'en': 'English',
@@ -54,9 +55,14 @@ export async function setLanguage(lang: SupportedLocale = getCurrentLanguage()):
 }
 
 export function getCurrentLanguage(): SupportedLocale {
-	const savedLanguage = localStorage.getItem('language') as SupportedLocale | null
+	try {
-	if (savedLanguage !== null) {
+		const authStore = useAuthStore()
-		return savedLanguage
+		if (authStore.settings.language !== null) {
+			return authStore.settings.language
+		}
+	} catch (e) {
+		// This may happen on the very first load of Vikunja because setting the language is attempted very early in the lifecycle
+		console.debug('could not load language from store:', e)
 	}
 
 	const browserLanguage = navigator.language
@@ -67,8 +73,3 @@ export function getCurrentLanguage(): SupportedLocale {
 
 	return language || DEFAULT_LANGUAGE
 }
-
-export async function saveLanguage(lang: SupportedLocale) {
-	localStorage.setItem('language', lang)
-	await setLanguage()
-}

src/modelTypes/IUserSettings.ts

@@ -3,6 +3,7 @@ import type {IAbstract} from './IAbstract'
 import type {IProject} from './IProject'
 import type {PrefixMode} from '@/modules/parseTaskText'
 import type {BasicColorSchema} from '@vueuse/core'
+import type {SupportedLocale} from '@/i18n'
 
 export interface IFrontendSettings {
 	playSoundWhenDone: boolean
@@ -20,6 +21,6 @@ export interface IUserSettings extends IAbstract {
 	defaultProjectId: undefined | IProject['id']
 	weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
 	timezone: string
-	language: string
+	language: SupportedLocale
 	frontendSettings: IFrontendSettings
 }

src/stores/auth.ts

@@ -2,7 +2,7 @@ import {computed, readonly, ref} from 'vue'
 import {acceptHMRUpdate, defineStore} from 'pinia'
 
 import {AuthenticatedHTTPFactory, HTTPFactory} from '@/helpers/fetcher'
-import {getCurrentLanguage, i18n, saveLanguage, setLanguage} from '@/i18n'
+import {getCurrentLanguage, i18n, setLanguage} from '@/i18n'
 import {objectToSnakeCase} from '@/helpers/case'
 import UserModel, {getAvatarUrl, getDisplayName} from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
@@ -331,10 +331,9 @@ export const useAuthStore = defineStore('auth', () => {
 		const cancel = setModuleLoading(setIsLoadingGeneralSettings)
 		try {
 			const updateSettingsPromise = userSettingsService.update(settings)
-			const saveLanguagePromise = saveLanguage(settings.language)
+			await setLanguage()
 			await updateSettingsPromise
 			setUserSettings({...settings})
-			await saveLanguagePromise
 			if (showMessage) {
 				success({message: i18n.global.t('user.settings.general.savedSuccess')})
 			}