Skip to content

feat(i18n): add Japanese language support#384

Open
te19oishi wants to merge 3 commits intositeboon:mainfrom
te19oishi:feat/add-japanese-localization
Open

feat(i18n): add Japanese language support#384
te19oishi wants to merge 3 commits intositeboon:mainfrom
te19oishi:feat/add-japanese-localization

Conversation

@te19oishi
Copy link

@te19oishi te19oishi commented Feb 14, 2026

Summary

Add comprehensive Japanese localization with translations for all UI components.

Changes

  • Add Japanese (ja) translation files for all namespaces:
    • auth.json, chat.json, codeEditor.json, common.json, settings.json, sidebar.json, tasks.json
  • Register Japanese locale in config.js and languages.js
  • Extract English tasks translations to separate file for consistency
  • Update TaskList component to use i18n for task-related strings

Translation Guidelines Followed

  • Keep technical terms in English where appropriate (UI, API, CLI, Git, etc.)
  • Maintain natural Japanese expressions while staying concise
  • Ensure consistency with existing i18n patterns in the codebase

Test Plan

  • Tested language switching in UI
  • Verified all translated strings display correctly
  • Checked that TaskMaster AI translations work properly
  • Ensured technical terms remain readable

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Added full Japanese language support across the app (UI, settings, auth, chat, code editor, sidebar, tasks).
    • Task management UI (Kanban, filters, views, help/getting-started, modals, buttons, status/priority labels) now uses translation keys.
    • English task strings added to ensure consistent localization.
    • Language selector updated to include Japanese.

Add comprehensive Japanese localization with translations for all UI components including authentication, chat interface, code editor, settings, sidebar, and task management features.

- Add Japanese translation files for all modules (auth, chat, codeEditor, common, settings, sidebar, tasks)
- Register Japanese language in i18n configuration
- Extract English tasks translations to separate file for consistency
- Update TaskList component to use i18n for task-related strings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 14, 2026

Walkthrough

This PR adds localization: TaskList UI strings are converted to i18n lookups and English/Japanese translation resources (tasks namespace) are added; i18n config and supported languages list are updated to register the new resources and the Japanese locale.

Changes

Cohort / File(s) Summary
Task UI localization
src/components/TaskList.jsx
Replaced hardcoded UI strings with t('...') translation lookups across headings, labels, buttons, statuses, help text and setup flows; added t to memo/deps where needed. No functional control-flow changes.
i18n config & languages
src/i18n/config.js, src/i18n/languages.js
Registered a new tasks namespace and wired en/ja resources into i18n config; added Japanese (ja) to the exported languages list.
English tasks locale
src/i18n/locales/en/tasks.json
Added comprehensive English translation file for TaskMaster UI (notConfigured, gettingStarted, setupModal, helpGuide, filters, kanban, buttons, etc.).
Japanese locales (multiple)
src/i18n/locales/ja/auth.json, src/i18n/locales/ja/chat.json, src/i18n/locales/ja/codeEditor.json, src/i18n/locales/ja/common.json, src/i18n/locales/ja/settings.json, src/i18n/locales/ja/sidebar.json, src/i18n/locales/ja/tasks.json
Added full Japanese translation files across auth, chat, code editor, common UI, settings, sidebar, and tasks; large JSON additions with nested keys and placeholders — worth spot-checking key consistency and JSON validity.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • blackmammoth

Poem

🐰 I hopped through keys and strings today,
swapping words so tasks can softly say —
English, 日本語 now side by side,
tiny hops of text where meanings glide,
a rabbit's cheer for locales far and wide.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(i18n): add Japanese language support' directly and clearly summarizes the main change: adding Japanese language support to the application.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection ✅ Passed ✅ No merge conflicts detected when merging into main

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments
src/i18n/locales/ja/tasks.json (1)

89-90: Sort labels "A-Z" / "Z-A" may confuse Japanese users.

Japanese text sorts by kana order (あ→ん), not A-Z. If task titles are primarily in Japanese, these labels are misleading. Consider using locale-appropriate labels like "タイトル(昇順)" / "タイトル(降順)" or "タイトル(あ-わ)" / "タイトル(わ-あ)".

Proposed fix
-    "titleAsc": "タイトル(A-Z)",
-    "titleDesc": "タイトル(Z-A)",
+    "titleAsc": "タイトル(昇順)",
+    "titleDesc": "タイトル(降順)",
src/components/TaskList.jsx (1)

644-644: Date formatting ignores the active i18n locale.

toLocaleDateString() without arguments uses the browser's default locale, not the app's selected language. If a user switches to Japanese in-app while their browser is set to English, the date in the PRD tooltip won't match.

Consider passing i18next.language (available from the hook) to ensure consistency:

Proposed fix
-  title={t('prd.modified', { date: new Date(prd.modified).toLocaleDateString() })}
+  title={t('prd.modified', { date: new Date(prd.modified).toLocaleDateString(i18n.language) })}

You'll also need to destructure i18n from the hook:

- const { t } = useTranslation('tasks');
+ const { t, i18n } = useTranslation('tasks');

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
src/components/TaskList.jsx (2)

146-190: ⚠️ Potential issue | 🟠 Major

Kanban column titles are hardcoded English.

These column headers ("📋 To Do", "🚀 In Progress", "✅ Done", "🚫 Blocked", "⏳ Deferred", "❌ Cancelled") are user-visible and should use t() lookups for consistency with the rest of the i18n effort.


906-1051: ⚠️ Potential issue | 🟠 Major

Entire Help Guide modal is untranslated.

The "Getting Started with TaskMaster" modal (Lines 916–1046) contains extensive user-facing content — titles, step descriptions, example prompts, pro tips, and the learn-more section — all hardcoded in English. This is a significant block of untranslated UI text.

🤖 Fix all issues with AI agents
In `@src/components/TaskList.jsx`:
- Line 37: The component wires up useTranslation('tasks') but many user-facing
literals remain hardcoded; replace those with i18n keys and t(...) calls (e.g.,
change the search input placeholder from "Search tasks..." to
t('search.placeholder'), the filter labels like "Filters", "Status", "Priority",
"Sort By" to
t('filters.title')/t('filters.status')/t('filters.priority')/t('filters.sortBy'),
Kanban column titles (currently "📋 To Do", "🚀 In Progress", "✅ Done") to
t('kanban.todo')/t('kanban.inProgress')/t('kanban.done'), empty-column messages,
action buttons ("Add PRD", "Add Task", "Create New PRD", "PRDs") to appropriate
t(...) keys, sort buttons ("ID", "Status", "Priority"), "Clear Filters", the
"Showing X of Y tasks" string, the no-results message, view toggle titles
("Kanban view", "List view", "Grid view"), and the Help Guide modal content;
update the JSX where these literals appear (search input placeholder, filter UI,
KanbanColumn title props, CreatePRDButton/AddTask handlers, SortButton labels,
help modal component) to use t('...') keys and add the corresponding keys to the
'tasks' locale file so all user-facing text in TaskList.jsx comes from i18n.
🧹 Nitpick comments (3)
src/i18n/locales/ja/sidebar.json (1)

107-108: Japanese doesn't need _one/_other plural forms.

i18next treats Japanese as a language with no plural distinction — it only uses the _other suffix (or the base key). The sessionCount_one key on Line 107 will never be selected. This is harmless since both values are identical, but you could simplify by keeping only the base key sessionCount or sessionCount_other.

src/i18n/config.js (1)

78-104: tasks namespace missing for ko and zh-CN — intentional but worth noting.

The tasks namespace is registered for en and ja but not for ko or zh-CN. This works correctly due to fallbackLng: 'en' on Line 111, but Korean and Chinese users will see English task strings. Consider adding a tracking issue for parity if those locales are actively maintained.

src/i18n/locales/ja/common.json (1)

71-77: Duplicated relative-time strings between time and fileTree sections.

fileTree.minAgo / fileTree.hoursAgo / fileTree.daysAgo (lines 115-117) duplicate time.minutesAgo / time.hoursAgo / time.daysAgo (lines 73-75) with slightly different key names. If the English source file has the same duplication, this is fine for now, but consolidating into a single shared section would reduce future translation drift.

Also applies to: 114-117

Address CodeRabbit review feedback by completing i18n migration for all user-facing strings in TaskList component.

Changes:
- Replace all hardcoded English strings with t() calls in TaskList.jsx
  - Filter section labels (Status, Priority, Sort By)
  - Sort options (ID, Title, Status, Priority with directions)
  - Filter actions (showing count, clear filters)
  - Quick sort buttons
  - Kanban empty state messages
  - No matching tasks message
  - Help Guide modal (complete translation)
  - PRD-related labels and buttons
- Restructure search translation key from 'searchPlaceholder' to 'search.placeholder'
- Remove unnecessary Japanese plural form 'sessionCount_one' (Japanese has no plural distinction)

All translation keys already exist in both en/tasks.json and ja/tasks.json.

Fixes issues identified in CodeRabbit review.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)
src/components/TaskList.jsx (3)

597-605: ⚠️ Potential issue | 🟡 Minor

Hardcoded English tooltip on the PRD dropdown button.

Line 599 still contains a hardcoded English string: `${existingPRDs.length} PRD${existingPRDs.length > 1 ? 's' : ''} available`. This should use a translation key with interpolation (e.g., t('buttons.prdsAvailable', { count: existingPRDs.length })), especially since Japanese doesn't have plural distinctions.

Proposed fix
-                      title={`${existingPRDs.length} PRD${existingPRDs.length > 1 ? 's' : ''} available`}
+                      title={t('buttons.prdsAvailable', { count: existingPRDs.length })}

And add the corresponding keys to your locale files:

  • en/tasks.json: "prdsAvailable": "{{count}} PRD(s) available"
  • ja/tasks.json: "prdsAvailable": "{{count}}件のPRDがあります"

640-648: ⚠️ Potential issue | 🟡 Minor

Hardcoded English "Modified:" prefix in PRD item tooltip.

Line 644 uses a hardcoded English prefix. Consider using a translation key.

Proposed fix
-                              title={`Modified: ${new Date(prd.modified).toLocaleDateString()}`}
+                              title={t('prd.modified', { date: new Date(prd.modified).toLocaleDateString() })}

699-722: ⚠️ Potential issue | 🟡 Minor

Status and priority filter options still render untranslated values.

Lines 702 and 721 capitalize the raw status/priority strings with JS (status.charAt(0).toUpperCase() + ...), so users will always see English values like "In-progress", "High", etc. regardless of locale. Consider mapping these to translated labels via t().

Proposed fix
                 {statuses.map(status => (
                   <option key={status} value={status}>
-                    {status.charAt(0).toUpperCase() + status.slice(1).replace('-', ' ')}
+                    {t(`statuses.${status}`, status.charAt(0).toUpperCase() + status.slice(1).replace('-', ' '))}
                   </option>
                 ))}
                 {priorities.map(priority => (
                   <option key={priority} value={priority}>
-                    {priority.charAt(0).toUpperCase() + priority.slice(1)}
+                    {t(`priorities.${priority}`, priority.charAt(0).toUpperCase() + priority.slice(1))}
                   </option>
                 ))}

Using t(key, defaultValue) provides a graceful fallback if a key is missing.

Complete remaining i18n improvements identified in CodeRabbit review.

Changes:
- Replace hardcoded PRD dropdown tooltip with t('buttons.prdsAvailable')
- Replace hardcoded "Modified:" prefix with t('prd.modified')
- Add translations for status filter options (pending, in-progress, done, blocked, deferred, cancelled)
- Add translations for priority filter options (high, medium, low)
- Use t() with fallback values for graceful degradation

All changes maintain backward compatibility and provide proper Japanese translations.

Addresses all minor issues from CodeRabbit review siteboon#2.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
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