feat(i18n): add multilingual UI locales

ui/src/core/i18n/I18nProvider.test.tsx

@@ -0,0 +1,46 @@
+import { act, render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { AppI18nProvider, createAppI18n, defaultLocale } from '@core/i18n'
+
+describe('AppI18nProvider', () => {
+  it('syncs document language and direction with the active i18n language', async () => {
+    const i18n = createAppI18n('ar')
+
+    render(
+      <AppI18nProvider i18n={i18n}>
+        <div />
+      </AppI18nProvider>,
+    )
+
+    expect(document.documentElement).toHaveAttribute('lang', 'ar')
+    expect(document.documentElement).toHaveAttribute('dir', 'rtl')
+
+    await act(async () => {
+      await i18n.changeLanguage('he')
+    })
+
+    expect(document.documentElement).toHaveAttribute('lang', 'he')
+    expect(document.documentElement).toHaveAttribute('dir', 'rtl')
+
+    await act(async () => {
+      await i18n.changeLanguage(defaultLocale)
+    })
+
+    expect(document.documentElement).toHaveAttribute('lang', defaultLocale)
+    expect(document.documentElement).toHaveAttribute('dir', 'ltr')
+  })
+
+  it('uses default document metadata for unsupported locales', () => {
+    const i18n = createAppI18n('zz')
+
+    render(
+      <AppI18nProvider i18n={i18n}>
+        <div />
+      </AppI18nProvider>,
+    )
+
+    expect(document.documentElement).toHaveAttribute('lang', defaultLocale)
+    expect(document.documentElement).toHaveAttribute('dir', 'ltr')
+  })
+})

ui/src/core/i18n/I18nProvider.tsx

@@ -1,13 +1,42 @@
-import type { PropsWithChildren } from 'react'
+import { useEffect, type PropsWithChildren } from 'react'
 import { I18nextProvider } from 'react-i18next'
 
 import { appI18n } from './i18n'
+import { getDocumentLocale, getLocaleDirection } from './locales'
 
 import type { i18n } from 'i18next'
 
+const syncDocumentLocale = (language: string) => {
+  const locale = getDocumentLocale(language)
+
+  document.documentElement.lang = locale
+  document.documentElement.dir = getLocaleDirection(locale)
+}
+
+const I18nDocumentMetadata = ({ i18n }: { i18n: i18n }) => {
+  useEffect(() => {
+    syncDocumentLocale(i18n.resolvedLanguage ?? i18n.language)
+
+    const handleLanguageChanged = (language: string) => {
+      syncDocumentLocale(language)
+    }
+
+    i18n.on('languageChanged', handleLanguageChanged)
+
+    return () => {
+      i18n.off('languageChanged', handleLanguageChanged)
+    }
+  }, [i18n])
+
+  return null
+}
+
 export const AppI18nProvider = ({
   children,
   i18n = appI18n,
 }: PropsWithChildren<{ i18n?: i18n }>) => (
-  <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+  <I18nextProvider i18n={i18n}>
+    <I18nDocumentMetadata i18n={i18n} />
+    {children}
+  </I18nextProvider>
 )