04072dc94b
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m6s
175 lines
4.7 KiB
Markdown
175 lines
4.7 KiB
Markdown
# Bilingual UI Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Add Chinese and English UI support with Chinese as the default and a runtime switch button.
|
|
|
|
**Architecture:** `App` owns locale state and provides it through a lightweight translation context. UI components read localized strings from a shared dictionary and switch instantly without changing backend-facing request values.
|
|
|
|
**Tech Stack:** React, TypeScript, Vite, Vitest, Testing Library
|
|
|
|
---
|
|
|
|
### Task 1: Add failing tests for app-level language switching
|
|
|
|
**Files:**
|
|
- Create: `src/App.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Add tests that verify:
|
|
|
|
- the upload screen defaults to Chinese copy
|
|
- clicking the English switch updates visible text to English
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run: `npm run test -- src/App.test.tsx`
|
|
Expected: FAIL because no locale state or switcher exists yet
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Do not implement here; continue to later tasks.
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run after Tasks 2 through 4.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/App.test.tsx src/App.tsx src/i18n.ts src/components/*.tsx
|
|
git commit -m "test: cover bilingual UI switching"
|
|
```
|
|
|
|
### Task 2: Add translation infrastructure
|
|
|
|
**Files:**
|
|
- Create: `src/i18n.tsx`
|
|
- Modify: `src/App.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Covered by Task 1.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run: `npm run test -- src/App.test.tsx`
|
|
Expected: FAIL due to missing locale provider and switch control
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
- Add locale type and translation dictionary
|
|
- Add a small React context and translation hook
|
|
- Store locale in `App` with `zh` as default
|
|
- Add a visible `中文 / English` switcher
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run after localized components are updated.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/i18n.tsx src/App.tsx src/App.test.tsx
|
|
git commit -m "feat: add lightweight UI locale infrastructure"
|
|
```
|
|
|
|
### Task 3: Localize the upload flow
|
|
|
|
**Files:**
|
|
- Modify: `src/components/UploadScreen.tsx`
|
|
- Modify: `src/components/TrimModal.tsx`
|
|
- Modify: `src/components/UploadScreen.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Extend or add tests only if needed beyond Task 1.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run: `npm run test -- src/App.test.tsx src/components/UploadScreen.test.tsx`
|
|
Expected: FAIL because upload copy and language labels remain English-only
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
- Localize upload-screen copy
|
|
- Localize target-language labels while preserving stable backend names
|
|
- Localize trim modal copy
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run: `npm run test -- src/App.test.tsx src/components/UploadScreen.test.tsx`
|
|
Expected: PASS
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/UploadScreen.tsx src/components/TrimModal.tsx src/components/UploadScreen.test.tsx src/i18n.tsx
|
|
git commit -m "feat: localize upload flow"
|
|
```
|
|
|
|
### Task 4: Localize editor and modal surfaces
|
|
|
|
**Files:**
|
|
- Modify: `src/components/EditorScreen.tsx`
|
|
- Modify: `src/components/ExportModal.tsx`
|
|
- Modify: `src/components/VoiceMarketModal.tsx`
|
|
- Modify: `src/components/EditorScreen.test.tsx`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Reuse the app-level switch test where possible.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run: `npm run test -- src/App.test.tsx src/components/EditorScreen.test.tsx`
|
|
Expected: FAIL if editor or modal copy remains untranslated
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
- Localize editor copy and labels
|
|
- Localize export modal copy
|
|
- Localize voice market modal copy
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run: `npm run test -- src/App.test.tsx src/components/EditorScreen.test.tsx`
|
|
Expected: PASS
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/components/EditorScreen.tsx src/components/ExportModal.tsx src/components/VoiceMarketModal.tsx src/components/EditorScreen.test.tsx src/i18n.tsx
|
|
git commit -m "feat: localize editor and modal UI"
|
|
```
|
|
|
|
### Task 5: Verify targeted bilingual behavior
|
|
|
|
**Files:**
|
|
- Modify only if verification exposes gaps
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Only add one if targeted verification finds a missing translation path.
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Only if needed.
|
|
|
|
**Step 3: Write minimal implementation**
|
|
|
|
Apply the smallest follow-up fix needed.
|
|
|
|
**Step 4: Run test to verify it passes**
|
|
|
|
Run: `npm run test -- src/App.test.tsx src/components/UploadScreen.test.tsx src/components/EditorScreen.test.tsx`
|
|
Expected: PASS
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add src/App.tsx src/i18n.tsx src/components/UploadScreen.tsx src/components/TrimModal.tsx src/components/EditorScreen.tsx src/components/ExportModal.tsx src/components/VoiceMarketModal.tsx
|
|
git commit -m "test: verify bilingual UI"
|
|
```
|