525 lines
21 KiB
Plaintext
525 lines
21 KiB
Plaintext
<project_specification>
|
|
<project_name>Claude.ai Clone - Language Selection Bug Fix</project_name>
|
|
|
|
<overview>
|
|
This specification fixes a bug in the language selection functionality. The feature was
|
|
originally planned in the initial app_spec.txt (line 127: "Language preferences") and a UI
|
|
component already exists in the settings panel (App.jsx lines 1412-1419), but the functionality
|
|
is incomplete and non-functional.
|
|
|
|
Currently, there is a language selector dropdown in the settings with options for English,
|
|
Español, Français, Deutsch, and 日本語, but it lacks:
|
|
- State management for the selected language
|
|
- Event handlers (onChange) to handle language changes
|
|
- A translation system (i18n)
|
|
- Translation files (en.json, fr.json, etc.)
|
|
- Language context/provider
|
|
- Persistence of language preference
|
|
|
|
This bug fix will complete the implementation by adding the missing functionality so that when
|
|
a language is selected, the entire interface updates immediately to display all text in the
|
|
chosen language. The language preference should persist across sessions.
|
|
|
|
Focus will be on English (default) and French as the primary languages, with the existing
|
|
UI supporting additional languages for future expansion.
|
|
</overview>
|
|
|
|
<current_state>
|
|
<existing_ui>
|
|
Location: src/App.jsx, lines 1412-1419
|
|
Component: Language selector dropdown in settings panel (General/Preferences section)
|
|
Current options: English (en), Español (es), Français (fr), Deutsch (de), 日本語 (ja)
|
|
Status: UI exists but is non-functional (no onChange handler, no state, no translations)
|
|
</existing_ui>
|
|
|
|
<specification_reference>
|
|
Original spec: prompts/app_spec.txt, line 127
|
|
Mentioned as: "Language preferences" in settings_preferences section
|
|
Status: Feature was planned but not fully implemented
|
|
</specification_reference>
|
|
</current_state>
|
|
|
|
<safety_requirements>
|
|
<critical>
|
|
- DO NOT remove or modify the existing language selector UI (lines 1412-1419 in App.jsx)
|
|
- DO NOT break existing functionality when language is changed
|
|
- English must remain the default language
|
|
- Language changes should apply immediately without page refresh
|
|
- All translations must be complete (no missing translations)
|
|
- Maintain backward compatibility with existing code
|
|
- Language preference should be stored and persist across sessions
|
|
- Keep the existing dropdown structure and styling
|
|
- Connect the existing select element to the new translation system
|
|
</critical>
|
|
</safety_requirements>
|
|
|
|
<bug_fixes>
|
|
<fix_language_selection>
|
|
<title>Fix Language Selection Functionality</title>
|
|
<description>
|
|
Complete the implementation of the existing language selector in the settings menu.
|
|
The UI already exists (App.jsx lines 1412-1419) but needs to be made functional.
|
|
|
|
The fix should:
|
|
- Connect the existing select element to state management
|
|
- Add onChange handler to the existing select element
|
|
- Display current selected language (load from localStorage on mount)
|
|
- Apply language changes immediately to the entire interface
|
|
- Save language preference to localStorage
|
|
- Persist language choice across sessions
|
|
|
|
The existing selector is already in the correct location (General/Preferences section
|
|
of settings panel) and has the correct styling, so only the functionality needs to be added.
|
|
</description>
|
|
<priority>1</priority>
|
|
<category>bug_fix</category>
|
|
<type>completion_of_existing_feature</type>
|
|
<implementation_approach>
|
|
- Keep the existing select element in App.jsx (lines 1412-1419)
|
|
- Add useState hook to manage selected language state
|
|
- Add value prop to select element (bound to state)
|
|
- Add onChange handler to select element
|
|
- Load language preference from localStorage on component mount
|
|
- Save language preference to localStorage on change
|
|
- Create translation files/dictionaries for each language
|
|
- Implement language context/provider to manage current language
|
|
- Create translation utility function to retrieve translated strings
|
|
- Update all hardcoded text to use translation function
|
|
- Apply language changes reactively throughout the application
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Open settings menu
|
|
2. Navigate to "General" or "Preferences" section
|
|
3. Locate the existing "Language" selector (should already be visible)
|
|
4. Verify the select element now has a value bound to state (not empty)
|
|
5. Verify default language is "English" (en) on first load
|
|
6. Select "Français" (fr) from the existing language dropdown
|
|
7. Verify onChange handler fires and updates state
|
|
8. Verify entire interface updates immediately to French
|
|
9. Check that all UI elements are translated (buttons, labels, menus)
|
|
10. Navigate to different pages and verify translations persist
|
|
11. Refresh the page and verify language preference is maintained (loaded from localStorage)
|
|
12. Switch back to "English" and verify interface returns to English
|
|
13. Test with new conversations and verify messages/UI are in selected language
|
|
14. Verify the existing select element styling and structure remain unchanged
|
|
</test_steps>
|
|
</fix_language_selection>
|
|
|
|
<fix_translation_system>
|
|
<title>Translation System Infrastructure</title>
|
|
<description>
|
|
Implement a translation system that:
|
|
- Stores translations for English and French
|
|
- Provides a translation function/utility to retrieve translated strings
|
|
- Supports dynamic language switching
|
|
- Handles missing translations gracefully (fallback to English)
|
|
- Organizes translations by feature/component
|
|
|
|
Translation keys should be organized logically:
|
|
- Common UI elements (buttons, labels, placeholders)
|
|
- Settings panel
|
|
- Chat interface
|
|
- Navigation menus
|
|
- Error messages
|
|
- Success messages
|
|
- Tooltips and help text
|
|
</description>
|
|
<priority>1</priority>
|
|
<category>infrastructure</category>
|
|
<type>new_implementation</type>
|
|
<implementation_approach>
|
|
- Create translation files (JSON or JS objects):
|
|
* translations/en.json (English)
|
|
* translations/fr.json (French)
|
|
- Create translation context/provider (React Context)
|
|
- Create useTranslation hook for components
|
|
- Create translation utility function (t() or translate())
|
|
- Organize translations by namespace/feature
|
|
- Implement fallback mechanism for missing translations
|
|
- Ensure type safety for translation keys (TypeScript if applicable)
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Verify translation files exist for both languages
|
|
2. Test translation function with valid keys
|
|
3. Test translation function with invalid keys (should fallback)
|
|
4. Verify all translation keys have values in both languages
|
|
5. Test language switching updates all components
|
|
6. Verify no console errors when switching languages
|
|
</test_steps>
|
|
</fix_translation_system>
|
|
|
|
<fix_ui_translations>
|
|
<title>Complete UI Translation Coverage</title>
|
|
<description>
|
|
Translate all user-facing text in the application to support both English and French:
|
|
|
|
Navigation & Menus:
|
|
- Sidebar navigation items
|
|
- Menu labels
|
|
- Breadcrumbs
|
|
|
|
Chat Interface:
|
|
- Input placeholder text
|
|
- Send button
|
|
- Message status indicators
|
|
- Empty state messages
|
|
- Loading states
|
|
|
|
Settings:
|
|
- All setting section titles
|
|
- Setting option labels
|
|
- Setting descriptions
|
|
- Save/Cancel buttons
|
|
|
|
Buttons & Actions:
|
|
- Primary action buttons
|
|
- Secondary buttons
|
|
- Delete/Remove actions
|
|
- Edit actions
|
|
- Save actions
|
|
|
|
Messages & Notifications:
|
|
- Success messages
|
|
- Error messages
|
|
- Warning messages
|
|
- Info messages
|
|
|
|
Forms:
|
|
- Form labels
|
|
- Input placeholders
|
|
- Validation messages
|
|
- Help text
|
|
|
|
Modals & Dialogs:
|
|
- Modal titles
|
|
- Modal content
|
|
- Confirmation dialogs
|
|
- Cancel/Confirm buttons
|
|
</description>
|
|
<priority>1</priority>
|
|
<category>ui</category>
|
|
<type>translation_implementation</type>
|
|
<implementation_approach>
|
|
- Audit all hardcoded text in the application
|
|
- Replace all hardcoded strings with translation function calls
|
|
- Create translation keys for each text element
|
|
- Add French translations for all keys
|
|
- Test each screen/page to ensure complete translation coverage
|
|
- Verify no English text remains when French is selected
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Set language to French
|
|
2. Navigate through all pages/screens
|
|
3. Verify every text element is translated
|
|
4. Check all buttons, labels, placeholders
|
|
5. Test all modals and dialogs
|
|
6. Verify form validation messages
|
|
7. Check error and success notifications
|
|
8. Verify no English text appears when French is selected
|
|
9. Repeat test with English to ensure nothing broke
|
|
</test_steps>
|
|
</fix_ui_translations>
|
|
|
|
<fix_language_persistence>
|
|
<title>Language Preference Persistence</title>
|
|
<description>
|
|
Ensure that the selected language preference is saved and persists across:
|
|
- Page refreshes
|
|
- Browser sessions
|
|
- Tab closures
|
|
- Application restarts
|
|
|
|
The language preference should be:
|
|
- Stored in localStorage (client-side) or backend user preferences
|
|
- Loaded on application startup
|
|
- Applied immediately when the app loads
|
|
- Synchronized if user is logged in (multi-device support)
|
|
</description>
|
|
<priority>1</priority>
|
|
<category>persistence</category>
|
|
<type>bug_fix</type>
|
|
<implementation_approach>
|
|
- Save language selection to localStorage on change
|
|
- Load language preference on app initialization
|
|
- Apply saved language before rendering UI
|
|
- Optionally sync with backend user preferences if available
|
|
- Handle case where no preference is saved (default to English)
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Select French language
|
|
2. Refresh the page
|
|
3. Verify interface is still in French
|
|
4. Close browser tab and reopen
|
|
5. Verify language preference persists
|
|
6. Clear localStorage and verify defaults to English
|
|
7. Select language again and verify it saves
|
|
</test_steps>
|
|
</fix_language_persistence>
|
|
</bug_fixes>
|
|
|
|
<implementation_notes>
|
|
<existing_code>
|
|
Location: src/App.jsx, lines 1412-1419
|
|
Current code:
|
|
```jsx
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Language</h3>
|
|
<select className="w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-claude-orange focus:border-transparent">
|
|
<option value="en">English</option>
|
|
<option value="es">Español</option>
|
|
<option value="fr">Français</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="ja">日本語</option>
|
|
</select>
|
|
</div>
|
|
```
|
|
|
|
Required changes:
|
|
- Add value={language} to select element
|
|
- Add onChange={(e) => setLanguage(e.target.value)} to select element
|
|
- Add useState for language state
|
|
- Load from localStorage on mount
|
|
- Save to localStorage on change
|
|
</existing_code>
|
|
|
|
<code_structure>
|
|
frontend/
|
|
src/
|
|
App.jsx # UPDATE: Add language state and connect existing select
|
|
components/
|
|
LanguageSelector.jsx # Optional: Extract to component if needed (NEW)
|
|
contexts/
|
|
LanguageContext.jsx # Language context provider (NEW)
|
|
hooks/
|
|
useLanguage.js # Hook to access language and translations (NEW)
|
|
utils/
|
|
translations.js # Translation utility functions (NEW)
|
|
translations/
|
|
en.json # English translations (NEW)
|
|
fr.json # French translations (NEW)
|
|
</code_structure>
|
|
|
|
<translation_structure>
|
|
Translation files should be organized by feature/namespace:
|
|
{
|
|
"common": {
|
|
"save": "Save",
|
|
"cancel": "Cancel",
|
|
"delete": "Delete",
|
|
"edit": "Edit",
|
|
...
|
|
},
|
|
"settings": {
|
|
"title": "Settings",
|
|
"language": "Language",
|
|
"theme": "Theme",
|
|
...
|
|
},
|
|
"chat": {
|
|
"placeholder": "Message Claude...",
|
|
"send": "Send",
|
|
...
|
|
},
|
|
...
|
|
}
|
|
</translation_structure>
|
|
|
|
<storage_approach>
|
|
Store language preference in:
|
|
- localStorage key: "app_language" (value: "en" or "fr")
|
|
- Or backend user preferences if available:
|
|
{
|
|
language: "en" | "fr"
|
|
}
|
|
|
|
Default value: "en" (English)
|
|
</storage_approach>
|
|
|
|
<translation_function>
|
|
Example implementation:
|
|
- useTranslation() hook returns { t, language, setLanguage }
|
|
- t(key) function retrieves translation for current language
|
|
- t("common.save") returns "Save" (en) or "Enregistrer" (fr)
|
|
- Supports nested keys: t("settings.general.title")
|
|
- Falls back to English if translation missing
|
|
</translation_function>
|
|
|
|
<safety_guidelines>
|
|
- Keep all existing functionality intact
|
|
- Default to English if no language preference set
|
|
- Gracefully handle missing translations (fallback to English)
|
|
- Ensure language changes don't cause re-renders that break functionality
|
|
- Test thoroughly to ensure no English text remains when French is selected
|
|
- Maintain code readability with clear translation key naming
|
|
</safety_guidelines>
|
|
</implementation_notes>
|
|
|
|
<ui_components>
|
|
<language_selector>
|
|
<description>Language selector component in settings (ALREADY EXISTS - needs functionality)</description>
|
|
<location>Settings > General/Preferences section (App.jsx lines 1412-1419)</location>
|
|
<current_state>
|
|
- UI exists with dropdown/select element
|
|
- Has 5 language options: English (en), Español (es), Français (fr), Deutsch (de), 日本語 (ja)
|
|
- Styling is already correct
|
|
- Missing: value binding, onChange handler, state management
|
|
</current_state>
|
|
<required_changes>
|
|
- Add value prop bound to language state
|
|
- Add onChange handler to update language state
|
|
- Connect to translation system
|
|
- Add persistence (localStorage)
|
|
</required_changes>
|
|
<display>
|
|
- Keep existing dropdown/select element (no UI changes needed)
|
|
- Shows current selection (via value prop)
|
|
- Updates interface immediately on change (via onChange)
|
|
</display>
|
|
</language_selector>
|
|
</ui_components>
|
|
|
|
<translation_coverage>
|
|
<required_translations>
|
|
All text visible to users must be translated:
|
|
- Navigation menu items
|
|
- Page titles and headers
|
|
- Button labels
|
|
- Form labels and placeholders
|
|
- Input field labels
|
|
- Error messages
|
|
- Success messages
|
|
- Tooltips
|
|
- Help text
|
|
- Modal titles and content
|
|
- Dialog confirmations
|
|
- Empty states
|
|
- Loading states
|
|
- Settings labels and descriptions
|
|
- Chat interface elements
|
|
</required_translations>
|
|
|
|
<translation_examples>
|
|
English -> French:
|
|
- "Settings" -> "Paramètres"
|
|
- "Save" -> "Enregistrer"
|
|
- "Cancel" -> "Annuler"
|
|
- "Delete" -> "Supprimer"
|
|
- "Language" -> "Langue"
|
|
- "Theme" -> "Thème"
|
|
- "Send" -> "Envoyer"
|
|
- "New Conversation" -> "Nouvelle conversation"
|
|
- "Message Claude..." -> "Message à Claude..."
|
|
</translation_examples>
|
|
</translation_coverage>
|
|
|
|
<api_endpoints>
|
|
<if_backend_storage>
|
|
If storing language preference in backend:
|
|
- GET /api/user/preferences - Get user preferences (includes language)
|
|
- PUT /api/user/preferences - Update user preferences (includes language)
|
|
- GET /api/user/preferences/language - Get language preference only
|
|
- PUT /api/user/preferences/language - Update language preference only
|
|
</if_backend_storage>
|
|
|
|
<note>
|
|
If using localStorage only, no API endpoints needed.
|
|
Backend storage is optional but recommended for multi-device sync.
|
|
</note>
|
|
</api_endpoints>
|
|
|
|
<accessibility_requirements>
|
|
- Language selector must be keyboard navigable
|
|
- Language changes must be announced to screen readers
|
|
- Translation quality must be accurate (no machine translation errors)
|
|
- Text direction should be handled correctly (LTR for both languages)
|
|
- Font rendering should support both languages properly
|
|
</accessibility_requirements>
|
|
|
|
<testing_requirements>
|
|
<regression_tests>
|
|
- Verify existing functionality works in both languages
|
|
- Verify language change doesn't break any features
|
|
- Test that default language (English) still works as before
|
|
- Verify all existing features are accessible in both languages
|
|
</regression_tests>
|
|
|
|
<feature_tests>
|
|
- Test language selector in settings
|
|
- Test immediate language change on selection
|
|
- Test language persistence across page refresh
|
|
- Test language persistence across browser sessions
|
|
- Test all UI elements are translated
|
|
- Test translation fallback for missing keys
|
|
- Test switching between languages multiple times
|
|
- Verify no English text appears when French is selected
|
|
- Verify all pages/screens are translated
|
|
</feature_tests>
|
|
|
|
<translation_tests>
|
|
- Verify all translation keys have values in both languages
|
|
- Test translation accuracy (no machine translation errors)
|
|
- Verify consistent terminology across the application
|
|
- Test special characters and accents in French
|
|
- Verify text doesn't overflow UI elements in French (may be longer)
|
|
</translation_tests>
|
|
|
|
<compatibility_tests>
|
|
- Test with different browsers (Chrome, Firefox, Safari, Edge)
|
|
- Test with different screen sizes (responsive design)
|
|
- Test language switching during active conversations
|
|
- Test language switching with modals open
|
|
- Verify language preference syncs across tabs (if applicable)
|
|
</compatibility_tests>
|
|
</testing_requirements>
|
|
|
|
<summary>
|
|
<bug_description>
|
|
The language selection feature was planned in the original specification (app_spec.txt line 127)
|
|
and a UI component was created (App.jsx lines 1412-1419), but the implementation is incomplete.
|
|
The select dropdown exists but has no functionality - it lacks state management, event handlers,
|
|
and a translation system.
|
|
</bug_description>
|
|
|
|
<fix_scope>
|
|
This is a bug fix that completes the existing feature by:
|
|
1. Connecting the existing UI to state management
|
|
2. Adding the missing translation system
|
|
3. Implementing language persistence
|
|
4. Translating all UI text to support English and French
|
|
</fix_scope>
|
|
|
|
<key_principle>
|
|
DO NOT remove or significantly modify the existing language selector UI. Only add the
|
|
missing functionality to make it work.
|
|
</key_principle>
|
|
</summary>
|
|
|
|
<success_criteria>
|
|
<functionality>
|
|
- Users can select language from the existing settings dropdown (English or French)
|
|
- Language changes apply immediately to entire interface
|
|
- Language preference persists across sessions
|
|
- All UI elements are translated when language is changed
|
|
- English remains the default language
|
|
- No functionality is broken by language changes
|
|
- The existing select element in App.jsx (lines 1412-1419) is now functional
|
|
</functionality>
|
|
|
|
<user_experience>
|
|
- Language selector is easy to find in settings
|
|
- Language change is instant and smooth
|
|
- All text is properly translated (no English text in French mode)
|
|
- Translations are accurate and natural
|
|
- Interface layout works well with both languages
|
|
</user_experience>
|
|
|
|
<technical>
|
|
- Translation system is well-organized and maintainable
|
|
- Translation keys are logically structured
|
|
- Language preference is stored reliably
|
|
- No performance degradation with language switching
|
|
- Code is clean and follows existing patterns
|
|
- Easy to add more languages in the future
|
|
</technical>
|
|
</success_criteria>
|
|
</project_specification> |