refactor(i18n): isolate Vue I18n instances per request for SSR

Replace global I18n singleton with a factory function
Inject request-specific I18n instances into Nuxt app and SEO metadata
Prevent cross-request locale state pollution during server-side rendering

frontend/src/i18n.ts

@@ -18,13 +18,22 @@ type SystemWordingsResponse = {
 
 export type MessageKey = keyof typeof messages.en;
 
-export const i18n = createI18n({
-  legacy: false,
-  globalInjection: true,
-  locale: readStoredLocale(),
-  fallbackLocale: defaultLocale,
-  messages
-});
+export function createPokopiaI18n(initialLocale = readStoredLocale()) {
+  return createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: initialLocale || defaultLocale,
+    fallbackLocale: defaultLocale,
+    messages
+  });
+}
+
+type PokopiaI18n = ReturnType<typeof createPokopiaI18n>;
+let activeI18n: PokopiaI18n | null = null;
+
+export function setActiveI18n(instance: PokopiaI18n): void {
+  activeI18n = instance;
+}
 
 export function setSystemWordingsApiBaseUrl(value: unknown): void {
   setSystemWordingsApiBaseUrls({ browser: value, server: value });
@@ -54,7 +63,7 @@ function activeApiBaseUrl(): string {
   return typeof window === 'undefined' ? serverApiBaseUrl : browserApiBaseUrl;
 }
 
-function readStoredLocale(): string {
+export function readStoredLocale(): string {
   if (typeof localStorage === 'undefined') {
     return defaultLocale;
   }
@@ -64,11 +73,11 @@ function readStoredLocale(): string {
 }
 
 function globalLocaleRef() {
-  return i18n.global.locale as unknown as { value: string };
+  return activeI18n?.global.locale as unknown as { value: string } | undefined;
 }
 
 export function getCurrentLocale(): string {
-  return globalLocaleRef().value || defaultLocale;
+  return globalLocaleRef()?.value || defaultLocale;
 }
 
 function isMessageTree(value: SystemWordingTree[string] | undefined): value is SystemWordingTree {
@@ -97,6 +106,11 @@ function builtInMessagesFor(locale: string): SystemWordingTree {
 }
 
 export async function loadSystemWordings(locale = getCurrentLocale(), force = false): Promise<void> {
+  if (!activeI18n) {
+    return;
+  }
+
+  const targetI18n = activeI18n;
   const targetLocale = locale || defaultLocale;
   if (!force && loadedWordingLocales.has(targetLocale)) {
     return;
@@ -116,13 +130,13 @@ export async function loadSystemWordings(locale = getCurrentLocale(), force = fa
       }
 
       const data = (await response.json()) as SystemWordingsResponse;
-      i18n.global.setLocaleMessage(
+      targetI18n.global.setLocaleMessage(
         targetLocale,
         mergeMessageTrees(messages[defaultLocale], messages[targetLocale], data.messages) as never
       );
       loadedWordingLocales.add(targetLocale);
     } catch {
-      i18n.global.setLocaleMessage(targetLocale, builtInMessagesFor(targetLocale) as never);
+      targetI18n.global.setLocaleMessage(targetLocale, builtInMessagesFor(targetLocale) as never);
     } finally {
       pendingWordingLoads.delete(targetLocale);
     }
@@ -134,7 +148,10 @@ export async function loadSystemWordings(locale = getCurrentLocale(), force = fa
 
 export function setCurrentLocale(locale: string): void {
   const nextLocale = locale || defaultLocale;
-  globalLocaleRef().value = nextLocale;
+  const localeRef = globalLocaleRef();
+  if (localeRef) {
+    localeRef.value = nextLocale;
+  }
 
   if (typeof document !== 'undefined') {
     document.documentElement.lang = nextLocale;
@@ -157,5 +174,3 @@ export function onLocaleChange(callback: () => void): () => void {
   window.addEventListener(localeChangeEvent, callback);
   return () => window.removeEventListener(localeChangeEvent, callback);
 }
-
-setCurrentLocale(getCurrentLocale());

frontend/src/seo.ts

@@ -1,5 +1,6 @@
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
-import { getCurrentLocale, i18n } from './i18n';
+import { getCurrentLocale } from './i18n';
+import { defaultLocale, systemWordingMessages, type SystemWordingTree } from '../../system-wordings';
 
 const siteName = 'Pokopia Wiki';
 const defaultCanonicalPath = '/';
@@ -10,6 +11,7 @@ let currentSeo = resolveSeo();
 const seoListeners = new Set<(seo: ResolvedSeoConfig) => void>();
 
 type TranslationValues = Record<string, string | number>;
+type Translator = (key: string, values?: TranslationValues) => string;
 
 export type RouteSeoConfig = {
   title?: string;
@@ -39,7 +41,12 @@ export type ResolvedSeoConfig = {
   structuredData: Record<string, unknown>;
 };
 
-const translate = i18n.global.t as (key: string, values?: TranslationValues) => string;
+const messages = systemWordingMessages as unknown as Record<string, SystemWordingTree>;
+let activeTranslator: Translator | null = null;
+
+export function setSeoTranslator(translator: Translator): void {
+  activeTranslator = translator;
+}
 
 export function setConfiguredSiteUrl(value: unknown): void {
   if (typeof value === 'string' && value.trim() !== '') {
@@ -86,7 +93,24 @@ function metaTitle(title?: string): string {
 }
 
 function metaDescription(description?: string): string {
-  return description?.trim() || translate('seo.siteDescription');
+  return description?.trim() || translateSeo('seo.siteDescription');
+}
+
+function builtInTranslate(key: string, values: TranslationValues = {}): string {
+  let message: SystemWordingTree[string] | undefined = messages[defaultLocale];
+  for (const part of key.split('.')) {
+    message = typeof message === 'object' && message !== null ? message[part] : undefined;
+  }
+
+  if (typeof message !== 'string') {
+    return key;
+  }
+
+  return Object.entries(values).reduce((nextMessage, [name, value]) => nextMessage.replaceAll(`{${name}}`, String(value)), message);
+}
+
+function translateSeo(key: string, values?: TranslationValues, translator = activeTranslator): string {
+  return translator ? translator(key, values) : builtInTranslate(key, values);
 }
 
 export function resolveSeo(config: SeoConfig = {}): ResolvedSeoConfig {
@@ -119,7 +143,7 @@ export function resolveSeo(config: SeoConfig = {}): ResolvedSeoConfig {
   };
 }
 
-export function routeSeoConfig(route: RouteLocationNormalizedLoaded): SeoConfig {
+export function routeSeoConfig(route: RouteLocationNormalizedLoaded, translator?: Translator): SeoConfig {
   const routeSeo = route.meta.seo as RouteSeoConfig | undefined;
   const canonicalPath =
     typeof routeSeo?.canonicalPath === 'function'
@@ -127,16 +151,16 @@ export function routeSeoConfig(route: RouteLocationNormalizedLoaded): SeoConfig
       : routeSeo?.canonicalPath ?? route.path ?? defaultCanonicalPath;
 
   return {
-    title: routeSeo?.titleKey ? translate(routeSeo.titleKey) : routeSeo?.title,
-    description: routeSeo?.descriptionKey ? translate(routeSeo.descriptionKey) : routeSeo?.description,
+    title: routeSeo?.titleKey ? translateSeo(routeSeo.titleKey, undefined, translator) : routeSeo?.title,
+    description: routeSeo?.descriptionKey ? translateSeo(routeSeo.descriptionKey, undefined, translator) : routeSeo?.description,
     canonicalPath,
     image: routeSeo?.image,
     noindex: routeSeo?.noindex
   };
 }
 
-export function resolveRouteSeo(route: RouteLocationNormalizedLoaded): ResolvedSeoConfig {
-  return resolveSeo(routeSeoConfig(route));
+export function resolveRouteSeo(route: RouteLocationNormalizedLoaded, translator?: Translator): ResolvedSeoConfig {
+  return resolveSeo(routeSeoConfig(route, translator));
 }
 
 export function onSeoChange(callback: (seo: ResolvedSeoConfig) => void): () => void {