Files

T

fspecii c219edb037 Add i18n system with 4-language support (en/zh/ja/ko)

- Add I18nContext provider with useI18n hook and localStorage persistence
- Add translations.ts with complete strings for English, Chinese, Japanese, Korean
- Wrap App in I18nProvider, replace hardcoded toast messages with t() calls
- Add language selector to SettingsModal with Globe icon
- Add localization credits in About section
- Default language: English
- Add I18N_USAGE.md documentation

2026-02-08 18:19:08 +02:00

1.4 KiB

Raw Blame History

ACE-Step UI — Internationalization Guide

Overview

The project supports 4 languages: English (default), Chinese, Japanese, and Korean.

Architecture

ace-step-ui/
├── i18n/
│   └── translations.ts          # All translation strings
├── context/
│   └── I18nContext.tsx          # React context + useI18n hook
└── components/                   # i18n-enabled components

Usage

1. Use translations in a component

import { useI18n } from '../context/I18nContext';

function YourComponent() {
  const { t } = useI18n();
  return <div>{t('yourTranslationKey')}</div>;
}

2. Switch language

Users can switch language in Settings. Programmatically:

const { language, setLanguage } = useI18n();
setLanguage('en'); // 'en' | 'zh' | 'ja' | 'ko'

3. Add a new translation key

Add the key to all 4 languages in i18n/translations.ts:

export const translations = {
  en: { yourNewKey: 'English text' },
  zh: { yourNewKey: '中文文本' },
  ja: { yourNewKey: '日本語テキスト' },
  ko: { yourNewKey: '한국어 텍스트' },
};

Language Persistence

The selected language is stored in localStorage and restored on next visit. Default is English.

Notes

All keys must exist in every language object
TypeScript's TranslationKey type enforces key safety
If a key is missing, the raw key name is returned as fallback

1.4 KiB Raw Blame History