chore: move frontend files

frontend/src/i18n/index.ts

@@ -0,0 +1,77 @@
+import {createI18n} from 'vue-i18n'
+import langEN from './lang/en.json'
+
+export const SUPPORTED_LOCALES = {
+	'en': 'English',
+	'de-DE': 'Deutsch',
+	'de-swiss': 'Schwizertütsch',
+	'ru-RU': 'Русский',
+	'fr-FR': 'Français',
+	'vi-VN': 'Tiếng Việt',
+	'it-IT': 'Italiano',
+	'cs-CZ': 'Čeština',
+	'pl-PL': 'Polski',
+	'nl-NL': 'Nederlands',
+	'pt-PT': 'Português',
+	'zh-CN': '中文',
+	'no-NO': 'Norsk Bokmål',
+	'es-ES': 'Español',
+	'da-DK': 'Dansk',
+	'ja-JP': '日本語',
+	'hu-HU': 'Magyar',
+	'ar-SA': 'اَلْعَرَبِيَّةُ',
+	'sl-SI': 'Slovenščina',
+	// IMPORTANT: Also add new languages to useDayjsLanguageSync
+} as const
+
+export type SupportedLocale = keyof typeof SUPPORTED_LOCALES
+
+export const DEFAULT_LANGUAGE: SupportedLocale= 'en'
+
+export type ISOLanguage = string
+
+// we load all messages async
+export const i18n = createI18n({
+	fallbackLocale: DEFAULT_LANGUAGE,
+	legacy: false,
+	messages: {
+		[DEFAULT_LANGUAGE]: langEN,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	} as Record<SupportedLocale, any>,
+})
+
+export async function setLanguage(lang: SupportedLocale): Promise<SupportedLocale | undefined> {
+	if (!lang) {
+		throw new Error()
+	}
+
+	// do not change language to the current one
+	if (i18n.global.locale.value === lang) {
+		return
+	}
+
+	// If the language hasn't been loaded yet
+	if (!i18n.global.availableLocales.includes(lang)) {
+		try {
+			const messages = await import(`./lang/${lang}.json`)
+			i18n.global.setLocaleMessage(lang, messages.default)
+		} catch (e) {
+			console.error(`Failed to load language ${lang}:`, e)
+			return setLanguage(getBrowserLanguage())
+		}
+	}
+
+	i18n.global.locale.value = lang
+	document.documentElement.lang = lang
+	return lang
+}
+
+export function getBrowserLanguage(): SupportedLocale {
+	const browserLanguage = navigator.language
+
+	const language = Object.keys(SUPPORTED_LOCALES).find(langKey => {
+		return langKey === browserLanguage || langKey.startsWith(browserLanguage + '-')
+	}) as SupportedLocale | undefined
+
+	return language || DEFAULT_LANGUAGE
+}

frontend/src/i18n/useDayjsLanguageSync.ts

@@ -0,0 +1,73 @@
+import {computed, ref, watch} from 'vue'
+import type dayjs from 'dayjs'
+
+import {i18n, type SupportedLocale, type ISOLanguage} from '@/i18n'
+
+export const DAYJS_LOCALE_MAPPING = {
+	'de-de': 'de',
+	'de-swiss': 'de-at',
+	'ru-ru': 'ru',
+	'fr-fr': 'fr',
+	'vi-vn': 'vi',
+	'it-it': 'it',
+	'cs-cz': 'cs',
+	'pl-pl': 'pl',
+	'nl-nl': 'nl',
+	'pt-pt': 'pt',
+	'zh-cn': 'zh-cn',
+	'no-NO': 'nn',
+	'es-ES': 'es',
+	'da-DK': 'da',
+	'ja-JP': 'ja',
+	'hu-HU': 'hu',
+	'ar-SA': 'ar-sa',
+	'sl-SI': 'sl',
+} as Record<SupportedLocale, ISOLanguage>
+
+export const DAYJS_LANGUAGE_IMPORTS = {
+	'de-de': () => import('dayjs/locale/de'),
+	'de-swiss': () => import('dayjs/locale/de-at'),
+	'ru-ru': () => import('dayjs/locale/ru'),
+	'fr-fr': () => import('dayjs/locale/fr'),
+	'vi-vn': () => import('dayjs/locale/vi'),
+	'it-it': () => import('dayjs/locale/it'),
+	'cs-cz': () => import('dayjs/locale/cs'),
+	'pl-pl': () => import('dayjs/locale/pl'),
+	'nl-nl': () => import('dayjs/locale/nl'),
+	'pt-pt': () => import('dayjs/locale/pt'),
+	'zh-cn': () => import('dayjs/locale/zh-cn'),
+	'no-no':  () => import('dayjs/locale/nn'),
+	'es-es':  () => import('dayjs/locale/es'),
+	'da-dk':  () => import('dayjs/locale/da'),
+	'ja-jp':  () => import('dayjs/locale/ja'),
+	'hu-hu':  () => import('dayjs/locale/hu'),
+	'ar-sa':  () => import('dayjs/locale/ar-sa'),
+	'sl-si':  () => import('dayjs/locale/sl'),
+} as Record<SupportedLocale, () => Promise<ILocale>>
+
+export function useDayjsLanguageSync(dayjsGlobal: typeof dayjs) {
+
+	const dayjsLanguageLoaded = ref(false)
+	watch(
+		() => i18n.global.locale.value,
+		async (currentLanguage: string) => {
+			if (!dayjsGlobal) {
+				return
+			}
+			const dayjsLanguageCode = DAYJS_LOCALE_MAPPING[currentLanguage.toLowerCase()] || currentLanguage.toLowerCase()
+			dayjsLanguageLoaded.value = dayjsGlobal.locale() === dayjsLanguageCode
+			if (dayjsLanguageLoaded.value) {
+				return
+			}
+			await DAYJS_LANGUAGE_IMPORTS[currentLanguage.toLowerCase()]()
+			dayjsGlobal.locale(dayjsLanguageCode)
+			dayjsLanguageLoaded.value = true
+		},
+		{immediate: true},
+	)
+
+	// we export the loading state since that's easier to work with
+	const isLoading = computed(() => !dayjsLanguageLoaded.value)
+
+	return isLoading
+}