Localisation for core languages

[01painadam]

Adds full UI internationalisation to the app using next-intl, supporting 5 languages: English, French, Spanish, Portuguese, and Indonesian. All ~270 fixed UI strings across ~45 components are now translatable. English is bundled statically (zero latency for most users); other locales are lazy-loaded on demand and cached in memory.

⚠️ This PR does not translate: dataset content, user-generated content, AI assistant responses, or the landing page (/).

⚠️ Translations are AI driven and need validation

What changed

96 files changed · 4,028 additions · 509 deletions · 22 commits

Infrastructure

• Installed next-intl v4.8.3
• Added app/i18n/config.ts — supported locales, default locale, lazy-loading config
• Added app/i18n/getMessages.ts — async message loader that merges all namespace files per locale
• Added app/i18n/welcomeMessages.ts — standalone welcome messages (used by chatStore before i18n provider mounts)
• Added app/components/providers/index.tsx — I18nProvider wrapping NextIntlClientProvider with reactive locale switching and timeZone="UTC"
• Added app/config/languages.ts and app/components/LanguageSelector.tsx

Locale Files (35 JSON files)

• 7 English namespace files in public/locales/en/: common, chat, dialogs, onboarding, dashboard, landing, errors
• 28 translated files in public/locales/{fr,es,pt,id}/ — real translations for 6 namespaces (landing excluded, remains English)
• 4 welcome prompt files: public/welcome-prompts-{fr,es,pt,id}.json — locale-specific starter prompt suggestions

Migrated Components (~45 files)

Area	Components
App Shell	PageHeader, sidebar, ChatInput, ChatPanelHeader, ContextButton (+hook), ContextTag, ContextMenu, HighlightedFeaturesLayer, LanguageSelector
Chat	ChatMessages, ChatPanel, MessageBubble, Reasoning, CopySelectionTooltip, WelcomeModal, WidgetMessage, ChatDisclaimer, VisualizationDisclaimer, SamplePrompts
Map	MapAreaControls, BasemapSelector, UploadAreaDialog
Dialogs	ThreadActionsMenu, ThreadDeleteDialog, ThreadRenameDialog, ThreadShareDialog, DatasetInfoModal
Insight	InsightProvenanceDrawer
Onboarding	app/onboarding/form.tsx
Dashboard	app/dashboard/page.tsx
Error Pages	not-found.tsx, maintenance/page.tsx, unauthorized/page.tsx
Landing	GlobalHeader (+NavItems component), Hero, FeaturesTabs, HowItWorks, Footer, SupportWorkTabs, TrustedPlatforms, FutureOfMonitoring, TeamSection, NewEraQuote, LatestUpdates, CTA

Store Changes

• authStore.ts — added preferredLanguageCode field, extracted from /auth/me response
• chatStore.ts — buildInitialState respects language, setWelcomeLanguage action, metadata field
• promptStore.ts — loadPromptsForLanguage() fetches locale-specific prompt files
• app/types/chat.ts — added metadata?.preferred_language_code
• app/api/auth/me/route.ts — extracts and returns preferredLanguageCode

Key Patterns

• ChatContextOptions → useChatContextOptions() hook — allows t() calls for context chip labels
• Module-level const arrays (FEATURE_TABS, HOW_STEPS, BASEMAP_OPTIONS) converted to in-component arrays with t() calls
• renderNavItems → NavItems component — GlobalHeader's standalone function couldn't use hooks
• Zustand store errors — use error type codes, translated at component render time (not in the store)
• Brand names kept in English — "Global Nature Watch", "Global Forest Watch", "Land & Carbon Lab", "PREVIEW" are not translated

Language Selector Behavior

• In-app header — globe icon + uppercase language code (e.g. 🌐 EN). Dropdown shows 5 supported languages + an "Other Languages…" info item
• Session-only — header language changes update in-memory Zustand state only. They do not persist to the profile API
• Profile setting — language set during onboarding or in /dashboard is persisted via PATCH and is the authoritative source on page reload
• Resolution order: Authenticated → profile API value on load → header selector for session override. Anonymous → navigator.language if supported → defaults to "en"

Verification

A comprehensive verification document is included at docs/i18n-translations-verification.md with:

• Tables for all ~270 translation keys across 6 namespaces
• All 5 language translations side-by-side
• Source component file(s) for each key
• Step-by-step instructions for how to access each string in the running app

Not in Scope

Item	Reason
Landing page translations (/)	Excluded per request — landing.json remains English-only
Dataset content & metadata	Dynamic content from API
AI assistant responses	Controlled by LLM, not UI strings
User-generated content	Thread names, feedback text, etc.
Landing page body paragraphs (sections 3, 5, 7–10)	Lower priority marketing copy, headings are translated
Toast messages originating in Zustand stores	Kept in English in chat history; some sidebar/store toasts still English

Testing

• Manual verification: switch language via header selector → all chat UI, sidebar, dialogs, onboarding, dashboard, and error pages update
• JSON validation: all 35 locale files parse correctly, key parity verified between English and all 4 non-English locales

Development

1. Add the English string to the relevant JSON file in public/locales/en/
   (e.g., common.json, chat.json, dialogs.json, etc.)
2. Add translations to the same key in all 4 other locale files: es/, fr/,
   id/, pt/
3. Use it in the component via useTranslations:

  const t = useTranslations("common");
  // ...
  {t("languageSelector.aiDisclaimer")}

The locale files are organized by namespace — common.json for shared UI,
chat.json for chat-specific, dialogs.json for modals, landing.json for the
landing page, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
project-zeno-next	Ready	Preview, Comment	Feb 23, 2026 11:52am