mirror of
https://github.com/temetro/temetro.git
synced 2026-08-11 11:09:04 +00:00
Khalid Abdi
d237504af9
Add three UI locales (so/ar/de) with full ~1,660-key translations alongside en/fr, selectable in Settings → Profile. Arabic gets full right-to-left support: - config.ts registers the locales and exports a `dirFor` helper; an inline <head> script in layout.tsx sets <html dir/lang> before first paint (no RTL flash), and i18n-provider keeps them in sync on language change. - ~160 physical direction utilities converted to logical (ms/me/ps/pe/ start/end/text-start/text-end); directional chevrons/arrows get rtl:rotate-180; chat-bubble align variants fixed to logical. - IBM Plex Sans Arabic appended to the sans/heading font stacks for per-character Arabic fallback. - Language persists to the backend user_settings and re-applies on sign-in so it roams across devices (localStorage stays the offline source of truth). - New scripts/check-locales.mjs (npm run check-locales) enforces key/placeholder parity and Arabic CLDR plural completeness. Bump to 0.3.0. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
28 lines
903 B
TypeScript
28 lines
903 B
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import type * as React from "react";
|
|
import { I18nextProvider } from "react-i18next";
|
|
|
|
import i18n, { dirFor } from "@/lib/i18n/config";
|
|
|
|
export function I18nProvider({ children }: { children: React.ReactNode }) {
|
|
// Keep <html lang/dir> in sync with the active language. The inline script in
|
|
// app/layout.tsx sets these before first paint (avoiding an RTL flash); this
|
|
// effect keeps them correct after hydration and on every language switch.
|
|
useEffect(() => {
|
|
const apply = (lng: string) => {
|
|
const root = document.documentElement;
|
|
root.lang = lng;
|
|
root.dir = dirFor(lng);
|
|
};
|
|
apply(i18n.resolvedLanguage ?? i18n.language);
|
|
i18n.on("languageChanged", apply);
|
|
return () => {
|
|
i18n.off("languageChanged", apply);
|
|
};
|
|
}, []);
|
|
|
|
return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
|
|
}
|