feat(i18n): add Japanese language support#384
feat(i18n): add Japanese language support#384te19oishi wants to merge 3 commits intositeboon:mainfrom
Conversation
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>
WalkthroughThis 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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
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. Comment |
There was a problem hiding this comment.
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 | 🟠 MajorKanban 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 | 🟠 MajorEntire 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/_otherplural forms.i18next treats Japanese as a language with no plural distinction — it only uses the
_othersuffix (or the base key). ThesessionCount_onekey on Line 107 will never be selected. This is harmless since both values are identical, but you could simplify by keeping only the base keysessionCountorsessionCount_other.src/i18n/config.js (1)
78-104:tasksnamespace missing forkoandzh-CN— intentional but worth noting.The
tasksnamespace is registered forenandjabut not forkoorzh-CN. This works correctly due tofallbackLng: '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 betweentimeandfileTreesections.
fileTree.minAgo/fileTree.hoursAgo/fileTree.daysAgo(lines 115-117) duplicatetime.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>
There was a problem hiding this comment.
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 | 🟡 MinorHardcoded 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 | 🟡 MinorHardcoded 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 | 🟡 MinorStatus 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 viat().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>
Summary
Add comprehensive Japanese localization with translations for all UI components.
Changes
auth.json,chat.json,codeEditor.json,common.json,settings.json,sidebar.json,tasks.jsonconfig.jsandlanguages.jsTranslation Guidelines Followed
Test Plan
🤖 Generated with Claude Code
Summary by CodeRabbit