feat(translation): on-device message translation

Add per-message translation that runs entirely on-device via the
Chromium built-in Translator + LanguageDetector APIs. Message text
never leaves the machine and never touches a cloud service, preserving
the E2EE guarantee. When the on-device engine is unavailable
(non-Chromium / mobile) the feature simply hides itself; there is no
network fallback.

- Engine abstraction (utils/translation): TranslationEngine interface
  plus a chromeTranslationEngine implementation (feature-detected,
  caches translator/detector instances, download-progress monitor).
  Pure lang-code helpers (normalize/sameLanguage/curated targets) with
  unit tests.
- Settings: translateTargetLang (default English) + autoTranslate
  (opt-in), with a Messages settings tile — a target-language select
  and an auto-translate switch, disabled with a note where unsupported.
- useMessageTranslation hook + shared per-event toggle atom-family and a
  persisted LRU cache so scrollback never re-translates.
- UI: a Translate / Show Original message-menu action, an inline
  "Translated from <lang> - Show original" chip, and a body swap in
  m.text/m.emote/m.notice that renders the translated text through the
  plain-text path (linkify + emoji) inside a dir=auto span for RTL.
- Auto-translate flips foreign messages whose model is already
  downloaded; first-time downloads keep the manual chip (user gesture).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/utils/translation/langUtils.ts

@@ -0,0 +1,87 @@
+// Pure language-code helpers for the on-device translation feature. No DOM / no
+// engine — unit-testable in isolation (langUtils.test.ts).
+
+/**
+ * Normalize a BCP-47 tag to the base language subtag, lowercased:
+ *   "en-US" -> "en", "ZH" -> "zh", "pt-BR" -> "pt".
+ * Chinese is a common exception where script matters (zh-Hant vs zh-Hans); we
+ * keep the script subtag for `zh` so a Traditional/Simplified distinction isn't
+ * flattened. Everything else collapses to the primary subtag.
+ */
+export function normalizeLang(code: string | undefined | null): string {
+  if (!code) return '';
+  const lower = code.trim().toLowerCase();
+  if (!lower) return '';
+  const parts = lower.split(/[-_]/);
+  const base = parts[0];
+  if (base === 'zh' && (parts[1] === 'hant' || parts[1] === 'hans')) {
+    return `zh-${parts[1]}`;
+  }
+  return base;
+}
+
+/** True when two language tags refer to the same base language. */
+export function sameLanguage(a: string | undefined | null, b: string | undefined | null): boolean {
+  const na = normalizeLang(a);
+  const nb = normalizeLang(b);
+  return na !== '' && na === nb;
+}
+
+/**
+ * Curated list of target languages offered in the "Translate messages into"
+ * setting — the common languages the on-device engine can produce. Codes are the
+ * normalized base tags passed to the engine.
+ */
+export const TRANSLATE_TARGET_LANGUAGES: ReadonlyArray<{ code: string; name: string }> = [
+  { code: 'en', name: 'English' },
+  { code: 'es', name: 'Spanish' },
+  { code: 'fr', name: 'French' },
+  { code: 'de', name: 'German' },
+  { code: 'it', name: 'Italian' },
+  { code: 'pt', name: 'Portuguese' },
+  { code: 'nl', name: 'Dutch' },
+  { code: 'pl', name: 'Polish' },
+  { code: 'ru', name: 'Russian' },
+  { code: 'uk', name: 'Ukrainian' },
+  { code: 'tr', name: 'Turkish' },
+  { code: 'ar', name: 'Arabic' },
+  { code: 'he', name: 'Hebrew' },
+  { code: 'hi', name: 'Hindi' },
+  { code: 'bn', name: 'Bengali' },
+  { code: 'ja', name: 'Japanese' },
+  { code: 'ko', name: 'Korean' },
+  { code: 'zh', name: 'Chinese' },
+  { code: 'vi', name: 'Vietnamese' },
+  { code: 'th', name: 'Thai' },
+  { code: 'id', name: 'Indonesian' },
+  { code: 'sv', name: 'Swedish' },
+  { code: 'cs', name: 'Czech' },
+  { code: 'ro', name: 'Romanian' },
+  { code: 'el', name: 'Greek' },
+  { code: 'fa', name: 'Persian' },
+];
+
+const CURATED_NAME = new Map(TRANSLATE_TARGET_LANGUAGES.map((l) => [l.code, l.name]));
+
+/**
+ * Human-readable language name for a code, e.g. "de" -> "German". Prefers
+ * `Intl.DisplayNames` (localized) and falls back to the curated map, then the
+ * raw code. `uiLocale` picks the display locale for the name.
+ */
+export function languageName(code: string, uiLocale = 'en'): string {
+  const norm = normalizeLang(code);
+  if (!norm) return code;
+  try {
+    const dn = new Intl.DisplayNames([uiLocale], { type: 'language' });
+    const name = dn.of(norm);
+    if (name && name.toLowerCase() !== norm) return name;
+  } catch {
+    /* Intl.DisplayNames unsupported or bad code — fall through */
+  }
+  return CURATED_NAME.get(norm) ?? norm;
+}
+
+/** Is `code` in the curated target-language list? (validates a persisted setting) */
+export function isSupportedTargetLang(code: string): boolean {
+  return CURATED_NAME.has(normalizeLang(code));
+}