Skip to content

feat(i18n): add i18n infrastructure and zh-CN localization with in-app language switching#6

Open
haomingbai wants to merge 1 commit intoAryagm:mainfrom
haomingbai:main
Open

feat(i18n): add i18n infrastructure and zh-CN localization with in-app language switching#6
haomingbai wants to merge 1 commit intoAryagm:mainfrom
haomingbai:main

Conversation

@haomingbai
Copy link
Copy Markdown

Summary

This PR adds a full i18n foundation to BlockDL and ships the first non-English translation (zh-CN), including an in-app language switcher.

It also refactors locale configuration/matching for easier future translation contributions and documents the translation workflow in the README.

What’s Included

  • Added i18n infrastructure (provider, context, hooks, message catalogs)
  • Added complete zh-CN translation catalog
  • Added in-app language switcher (header dropdown) with persisted locale selection
  • Localized key UI surfaces:
    • App header/help dialogs
    • Block palette (layers/templates/categories/tags)
    • Layer cards + parameter editor labels/options
    • Welcome modal
    • Undo/redo tooltips
    • Code viewer UI
  • Localized runtime validation/error messages (shape/DAG/layer validation)
  • Localized generated code comments shown in CodeViewer (Chinese mode)
  • Default startup language is now English (saved user preference still respected)
  • Split locale config and matching logic:
    • src/i18n/locales.ts (translation-facing config)
    • src/i18n/locale-matcher.ts (matching logic)
    • src/i18n/i18n.ts kept as a stable façade
  • Added README docs for “How to add a translation”

Why

Previously, locale switching was not practical:

  • there was no in-app language selector
  • many components rendered raw English strings directly
  • layer/template metadata and runtime errors bypassed i18n

This PR fixes that and makes future translations easier to add with mostly config/catalog changes.

Locale Matching Design

  • Locale registry is data-driven (REGISTERED_LOCALES)
  • Matching supports exact alias match, prefix match, and primary-language fallback
  • Accept-Language style input with q= weights is supported
  • Matching logic is isolated from translation registry changes

Validation

  • npm run build

Notes / Follow-ups

  • React Flow built-in controls/tooltips may still use upstream/default text unless replaced/customized.
  • Additional UI areas can be localized incrementally using existing t() helpers and semantic key helpers.

Checklist

  • i18n infrastructure added
  • zh-CN translations added
  • In-app language switching added
  • English default preserved for first run
  • README updated with translation instructions
  • Build passes

…tcher

- add i18n infrastructure (provider, locale registry, matcher, message catalogs)
- add full zh-CN translations and catalog sync/generation workflow
- add in-app language switcher with persisted locale selection
- localize main UI components, layer cards/editor, welcome modal, and tooltips
- localize runtime validation/errors and generated code comments in CodeViewer
- default startup locale to English (saved preference still respected)
- split locale config and matching logic into `locales.ts` / `locale-matcher.ts`
- document how to add new translations in `README.md`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant