9c434822d6aa0c9edb1c1bc582b7dda6647e6e56
6 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Louis Knight-Webb
|
36bde0b4b9 |
Frontend file naming eslint rule (vibe-kanban) (#1322)
* Perfect! Now let me create a summary for you: ## ✅ ESLint Configuration Complete The linter has identified **29 files** that need to be renamed: ### **Files to Rename:** #### **Components → PascalCase (15 files)** ``` config-provider.tsx → ConfigProvider.tsx diff-view-switch.tsx → DiffViewSwitch.tsx logo.tsx → Logo.tsx navbar.tsx → Navbar.tsx (in layout/) search-bar.tsx → SearchBar.tsx theme-provider.tsx → ThemeProvider.tsx style-override.tsx → StyleOverride.tsx copy-files-field.tsx → CopyFilesField.tsx (in projects/) project-detail.tsx → ProjectDetail.tsx (in projects/) project-form-fields.tsx → ProjectFormFields.tsx (in projects/) project-list.tsx → ProjectList.tsx (in projects/) ``` #### **Contexts → PascalCase (2 files)** ``` project-context.tsx → ProjectContext.tsx search-context.tsx → SearchContext.tsx ``` #### **Pages → PascalCase (3 files)** ``` full-attempt-logs.tsx → FullAttemptLogs.tsx project-tasks.tsx → ProjectTasks.tsx projects.tsx → Projects.tsx ``` #### **Lib → camelCase (2 files)** ``` caret-position.ts → caretPosition.ts mcp-strategies.ts → mcpStrategies.ts ``` #### **Utils → camelCase (3 files)** ``` companion-install-task.ts → companionInstallTask.ts script-placeholders.ts → scriptPlaceholders.ts status-labels.ts → statusLabels.ts ``` #### **UI (shadcn) → kebab-case (4 files)** ``` ActionsDropdown.tsx → actions-dropdown.tsx ImageUploadSection.tsx → image-upload-section.tsx TitleDescriptionEditor.tsx → title-description-editor.tsx DataTable.tsx → data-table.tsx (in table/) Table.tsx → table.tsx (in table/) ImageChipNode.tsx → image-chip-node.tsx (in wysiwyg/) imageChipMarkdown.ts → image-chip-markdown.ts (in wysiwyg/) ``` #### **Entry Point (special case - 1 file)** ``` main.tsx → can stay as main.tsx (entry point convention) ``` **Next steps:** Should I proceed with renaming these files using `git mv`? * ## ✅ Complete! File Naming Standardization Successful ### **Summary** Successfully implemented and enforced file naming conventions for the frontend: ### **What Was Done:** 1. ✅ **Installed** `eslint-plugin-check-file@^2.8.0` 2. ✅ **Configured ESLint** with file naming rules: - **Components (.tsx)**: `PascalCase` - **Hooks (.ts)**: `camelCase` (with `use` prefix) - **Utils/Lib (.ts)**: `camelCase` - **Shadcn UI**: `kebab-case` (library convention) - **Entry points**: Excluded (`main.tsx`, `vite-env.d.ts`) 3. ✅ **Renamed 28 files** using `git mv`: - 10 components → PascalCase - 2 contexts → PascalCase - 3 pages → PascalCase - 2 lib files → camelCase - 3 utils → camelCase - 7 UI components → kebab-case - 1 utils component → PascalCase 4. ✅ **Fixed all imports** across the codebase (77 files modified) 5. ✅ **Verified**: - ✅ ESLint passes (no filename errors) - ✅ TypeScript check passes (no errors) - ✅ Build successful ### **Git Status:** - 28 files renamed (with history preserved via `git mv`) - 77 total files changed (renames + import updates) ### **Ready for commit!** The codebase now has consistent, enforceable file naming conventions that will prevent future inconsistencies. * Cleanup script changes for task attempt 11f8d7b9-99b5-41ce-934c-5ce75008a200 |
||
|
Louis Knight-Webb
|
0bd36a3b3a |
disable eslint-disable comments (vibe-kanban) (#1321)
* Done! All eslint-disable comments are now banned and the codebase is clean. **Summary of changes:** 1. **Installed** `eslint-plugin-eslint-comments` 2. **Updated** [frontend/.eslintrc.cjs](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/2550-disable-eslint-d/frontend/.eslintrc.cjs) to enforce the ban 3. **Fixed 3 files** by refactoring code instead of suppressing rules: - [FeatureShowcaseModal.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/2550-disable-eslint-d/frontend/src/components/showcase/FeatureShowcaseModal.tsx): Added ref to track activeScopes snapshot - [ShareDialog.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/2550-disable-eslint-d/frontend/src/components/dialogs/tasks/ShareDialog.tsx): Added shareTask object to dependencies - [wysiwyg.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/2550-disable-eslint-d/frontend/src/components/ui/wysiwyg.tsx): Added didInit ref guard for run-once effect All checks pass ✓ * lint fix |
||
|
Louis Knight-Webb
|
a2df2334d0 |
Typesafe dialogs (vibe-kanban) (#1304)
* Excellent! ✅ All tasks completed successfully. Let me create a summary document: ## ✅ Typesafe Dialogs Refactoring Complete ### What Was Changed **1. New Typesafe Modal System** ([lib/modals.ts](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/e9a3-typesafe-dialogs/frontend/src/lib/modals.ts)) - Created `defineModal<ResultType>(component)` to brand dialogs with return types - Created `showModal(modal, props)` with full type inference for props and return values - Added typed `hideModal()` and `removeModal()` helpers **2. Modals Registry** ([components/dialogs/index.ts](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/e9a3-typesafe-dialogs/frontend/src/components/dialogs/index.ts)) - Exported `Modals` object with all 27 dialogs - Each modal properly typed with its result type - Autocomplete available via `Modals.*` **3. ESLint Enforcement** ([frontend/.eslintrc.cjs](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/e9a3-typesafe-dialogs/frontend/.eslintrc.cjs)) - Blocks direct `NiceModal.show()` usage - Blocks `NiceModal.register()` usage - Restricts `NiceModal` imports to lib/modals.ts, App.tsx, and dialog files **4. Removed String Registrations** ([main.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/e9a3-typesafe-dialogs/frontend/src/main.tsx)) - Deleted 27 `NiceModal.register('string-id', Component)` calls - Dialogs now register automatically when used **5. Migrated All Call Sites** (14+ files) - Replaced `NiceModal.show('string-id', props)` → `showModal(Modals.X, props)` - All props and return types now fully typed - Legacy helper functions maintained for backward compatibility ### Usage Examples ```typescript // Before (not type-safe): const result = await NiceModal.show('onboarding'); // ❌ No autocomplete, no type checking, string can be misspelled // After (fully type-safe): const result = await showModal(Modals.Onboarding, {}); // ✅ result is typed as OnboardingResult // ✅ Props are checked at compile time // ✅ Autocomplete for modal names ``` ### Verification - ✅ **Type check passes**: `pnpm run check` - ✅ **Lint passes**: 0 errors (113 warnings, none related to this refactor) - ✅ **ESLint enforces pattern**: Prevents future regressions The refactoring is complete and all code is now fully typesafe! * Cleanup script changes for task attempt e9a36404-ba8e-4c84-9cca-1a1b7d68fdf7 * incremental * ## ✅ Component-Based Registration Complete! Successfully eliminated the centralized `Modals` registry and migrated to component-based dialog registration. ### What Changed **1. Each dialog now brands itself** (30 dialog files) - Added `defineModal<ResultType>()` at the source - Example: `export const FolderPickerDialog = defineModal<string | null>(FolderPickerDialogImpl)` **2. Removed centralized bottleneck** - Deleted `Modals` registry object from [components/dialogs/index.ts](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/e9a3-typesafe-dialogs/frontend/src/components/dialogs/index.ts) - Removed 100+ lines of duplication - index.ts now just re-exports for convenience **3. Fixed circular dependency** - Removed legacy helpers from [lib/modals.ts](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/e9a3-typesafe-dialogs/frontend/src/lib/modals.ts) - lib/modals.ts no longer imports from components **4. Updated all call sites** (24 files) - Changed from `showModal(Modals.X, props)` → `showModal(XDialog, props)` - Added direct component imports - Guided by TypeScript compiler errors ### Benefits Achieved ✅ **No duplication** - dialogs defined once in their own files ✅ **No circular deps** - clean import hierarchy ✅ **Easy to add dialogs** - just brand and use ✅ **Still fully typesafe** - props and return types inferred ✅ **Clear imports** - see exactly which dialogs are used ✅ **Compiler verified** - `pnpm run check` passes ✅ **Lint clean** - 0 errors * Cleanup script changes for task attempt e9a36404-ba8e-4c84-9cca-1a1b7d68fdf7 * Refactor dialog calling (vibe-kanban 8586934a) Instead of `showModal(CreatePRDialog)` it should be `CreatePRDialog.show()`, also we should add the same for `.hide()`. We should enforce the pattern using eslint, then use the lint errors to guide where to refactor. * reset merge conflicted dialogs to main * Fix dialog errors * fmt |
||
Britannio Jarrett
|
7136085d52 |
enforce switch statement exhaustiveness in linter (#941)
remove padding from windsurf logos |
||
|
Louis Knight-Webb
|
2781e3651b |
Add preview tab + point and click editor (vibe-kanban) (#870)
* Perfect! The preview tab implementation is complete and all type checks pass. Let me provide a summary of what was implemented: 1. **Updated `TabType`** - Added 'preview' to the union type 2. **Created `useDevserverPreview` hook** - Intelligent devserver URL detection with: - Real-time log parsing using the regex `(?:localhost|127\.0\.0\.1|0\.0\.0\.0):(\d+)[^\d]*` - Three states: idle/searching/ready - URL normalization (0.0.0.0 → localhost) - Process monitoring for setup scripts and dev servers 3. **Built `PreviewTab` component** - Full-featured iframe preview with: - Proper sandbox settings for security - Toolbar with refresh, copy URL, and open external buttons - Smart error handling for mixed content/CORS issues - Clear empty states and loading indicators 4. **Enhanced `TabNavigation`** - Conditionally shows preview tab with: - Monitor icon and spinner when searching - Only appears when devserver is detected or likely 5. **Integrated in `TaskDetailsPanel`** - Wires everything together in fullscreen mode - **Smart Detection**: Parses logs in real-time to find devserver URLs - **Robust Error Handling**: Graceful fallbacks for iframe loading issues - **Security**: Proper iframe sandboxing with necessary permissions - **Performance**: Efficient log processing with deduplication - **UX**: Clear states (searching/ready/error) with helpful messaging The implementation follows the Oracle's architectural recommendations with proper separation of concerns and real-time detection capabilities. * Cleanup script changes for task attempt 4f59c374-1cc5-4b3c-a79a-5f63756a366b * Perfect! Now the preview tab will use the **first** dev server URL it detects rather than being overwritten by subsequent matches. This means: - If both backend (e.g., `:3001`) and frontend (e.g., `:5173`) servers start - The preview tab will show whichever URL appears first in the logs - Subsequent URLs will be ignored to avoid switching the preview unexpectedly This provides a more stable preview experience when multiple dev servers are running. * Cleanup script changes for task attempt 4f59c374-1cc5-4b3c-a79a-5f63756a366b * add parent lib * fmt * Listen for communication from the preview tab (vibe-kanban ace46045) In frontend/src/components/tasks/TaskDetails/PreviewTab.tsx We should expect that the iframe will communicate via frontend/src/utils/previewBridge.ts When a message is received, we should add some details about the clicked element to the follow up textarea * Component to view clicked element (vibe-kanban e3b90cc1) frontend/src/components/tasks/TaskDetails/PreviewTab.tsx frontend/src/components/tasks/TaskFollowUpSection.tsx When a user clicks on an element, we should display a box in the follow up section similar to how we show reviews or conflicts. The section should display a summary of each of the elements, the name of the component and the file location. When the user sends a follow up, a markdown equivalent of the summary should be appended to the top of the follow up message. * Component to view clicked element (vibe-kanban e3b90cc1) frontend/src/components/tasks/TaskDetails/PreviewTab.tsx frontend/src/components/tasks/TaskFollowUpSection.tsx When a user clicks on an element, we should display a box in the follow up section similar to how we show reviews or conflicts. The section should display a summary of each of the elements, the name of the component and the file location. When the user sends a follow up, a markdown equivalent of the summary should be appended to the top of the follow up message. * Tweaks to component click (vibe-kanban 756e1212) Preview tab frontend/src/components/tasks/TaskDetails/PreviewTab.tsx - Preview should remember which URL you were on - Auto select the follow up box after point and click, so you can type feedback Clicked elements: frontend/src/components/tasks/ClickedElementsBanner.tsx, frontend/src/contexts/ClickedElementsProvider.tsx - The list of components should not overflow horizontally, instead we should truncate, omiting components from the left first - If the user clicks on a component, it should omit the downstream components from the list, they should be displayed disabled and the prompt should start from the selected component * strip ansi when parsing dev server URL * cleanup * cleanup * improve help copy * start dev server from preview page * dev server wip * restructure * instructions * fix * restructur * fmt * i18n * i18n fix * config fix * wip cleanup * minor cleanup * Preview tab feedback (vibe-kanban d531fff8) In the PreviewToolbar, each icon button should have a tooltip * fix + fmt * move dev script textarea * improve when help is shown * i18n * improve URL matching * fix close logs * auto install companion * cleanup notices * Copy tweak |
||
|
Louis Knight-Webb
|
7789fa96ba |
Introduce i18n (vibe-kanban) (#775)
* Perfect! I've successfully implemented the i18n foundation with English and Japanese translations for the settings pages. Here's what was accomplished: ## **✅ Implementation Complete** ### **🔧 Foundation Setup** - ✅ Installed `react-i18next`, `i18next`, and `i18next-browser-languagedetector` - ✅ Created i18n configuration with language detection and localStorage persistence - ✅ Set up clean folder structure: `src/i18n/locales/{en,ja}/` ### **🌐 Translation Files** - ✅ **Single settings.json approach** - all settings translations in one organized file per language - ✅ **English translations** - complete coverage of settings navigation, general settings sections - ✅ **Japanese translations** - professionally translated equivalents - ✅ **3-layer hierarchy** - `settings.{section}.{area}.{key}` for clear organization ### **🔌 Integration** - ✅ **App.tsx** - I18nextProvider wrapper around the entire app - ✅ **SettingsLayout** - converted navigation with language switcher - ✅ **GeneralSettings** - converted key sections (loading states, save buttons, appearance, task execution) - ✅ **LanguageSwitcher** - dropdown component in settings sidebar ### **🎯 Key Features** - **Language persistence** - selections saved to localStorage - **Fallback handling** - defaults to English if translation missing - **TypeScript compatibility** - no compilation errors - **Zero breaking changes** - existing functionality preserved The settings page now supports switching between English and Japanese with the language switcher in the sidebar. You can test by running `pnpm run dev` and navigating to `/settings` to see the translations in action! * Cleanup script changes for task attempt b1d31517-2fca-44be-8b5f-5f744ec5e5ff * Excellent! TypeScript compilation is successful. I've successfully completed the full translation implementation for all the settings pages with English and Japanese support. Here's what was accomplished: - ✅ **SettingsLayout.tsx** - Navigation sidebar with language switcher - ✅ All menu items: "Settings", "General", "Agents", "MCP Servers" - ✅ Menu descriptions for each section - ✅ **Loading states** - "Loading settings...", error messages - ✅ **Appearance section** - Theme selection with helper text - ✅ **Task Execution** - Agent configuration selection - ✅ **Editor section** - Editor type selection - ✅ **GitHub Integration** - Connection status, buttons, helper text - ✅ **Notifications** - Sound and push notification settings - ✅ **Privacy** - Telemetry settings with detailed descriptions - ✅ **Task Templates** - Section title and description - ✅ **Safety & Disclaimers** - Reset buttons and descriptions - ✅ **Save button** - "Save Settings" with success/error messages - ✅ **Loading states** - "Loading agent configurations..." - ✅ **Form editor toggle** - "Edit JSON" checkbox - ✅ **Agent selection** - Dropdown with placeholders - ✅ **Configuration management** - Create, delete, select options - ✅ **JSON editor** - Labels and file location display - ✅ **Save button** - "Save Agent Configurations" - ✅ **Card title** - "MCP Server Configuration" - ✅ **Loading states** - Configuration loading messages - ✅ **Save button** - "Save MCP Configuration" / "Settings Saved!" - **Single settings.json** approach with clear 3-layer hierarchy - **`settings.{section}.{area}.{key}`** structure for maintainability - **Complete English translations** - All user-facing text covered - **Professional Japanese translations** - Native-quality translations - **Dynamic content support** - Username interpolation, error handling - **TypeScript compatible** - No compilation errors - **Language switcher** in settings sidebar - **localStorage persistence** - Language preference saved - **Fallback handling** - Defaults to English if translation missing - **Zero breaking changes** - All existing functionality preserved - **Consistent user experience** - Smooth switching between languages The settings page is now fully internationalized and ready for testing. You can: 1. **Run the dev server**: `pnpm run dev` 2. **Navigate to settings**: `/settings` 3. **Test language switching** - Use dropdown in sidebar 4. **Verify all sections** - Every button, label, and message is translated All settings functionality works exactly as before, but now with full English/Japanese language support! 🚀 * Cleanup script changes for task attempt b1d31517-2fca-44be-8b5f-5f744ec5e5ff * Excellent! All TypeScript checks are passing. Let me create a summary of all the additional translation opportunities that were implemented: ## **✅ Additional Translation Opportunities Completed** I've identified and implemented translations for **25+ additional hardcoded strings** across both settings files: ### **🔧 AgentSettings.tsx - New Translations** 1. **Error Messages** (3): - `'Failed to delete configuration. Please try again.'` → `t('settings.agents.errors.deleteFailed')` - `'Failed to save agent configurations. Please try again.'` → `t('settings.agents.errors.saveFailed')` - `'Failed to save configuration. Please try again.'` → `t('settings.agents.errors.saveConfigFailed')` 2. **UI Elements** (2): - `'Delete'` (button text) → `t('settings.agents.editor.deleteText')` - `'Loading...'` (JSON editor) → `t('settings.agents.editor.jsonLoading')` ### **🌐 McpSettings.tsx - New Translations** 1. **Error Messages** (10): - `'Invalid JSON format'` (2 instances) → `t('settings.mcp.errors.invalidJson')` - `'Validation error'` → `t('settings.mcp.errors.validationError')` - `'Failed to save MCP servers'` → `t('settings.mcp.errors.saveFailed')` - `'Failed to apply MCP server configuration'` → `t('settings.mcp.errors.applyFailed')` - `'Failed to add preconfigured server'` → `t('settings.mcp.errors.addServerFailed')` - `'Failed to load configuration.'` → `t('settings.mcp.errors.loadFailed')` - `'MCP Configuration Error: {error}'` → `t('settings.mcp.errors.mcpError', { error })` - `'MCP Not Supported'` → `t('settings.mcp.errors.notSupported')` - Support message → `t('settings.mcp.errors.supportMessage')` 2. **UI Labels & Text** (10): - `'Configure Model Context Protocol...'` → `t('settings.mcp.description')` - `'Agent'` → `t('settings.mcp.labels.agent')` - `'Select executor'` → `t('settings.mcp.labels.agentPlaceholder')` - `'Choose which agent...'` → `t('settings.mcp.labels.agentHelper')` - `'Server Configuration (JSON)'` → `t('settings.mcp.labels.serverConfig')` - `'Loading...'` → `t('settings.mcp.loading.jsonEditor')` - `'Changes will be saved to:'` → `t('settings.mcp.labels.saveLocation')` - `'Popular servers'` → `t('settings.mcp.labels.popularServers')` - `'Click a card to insert...'` → `t('settings.mcp.labels.serverHelper')` - Success message → `t('settings.mcp.save.successMessage')` ### **📝 Translation File Updates** **English translations** (`settings.json`): - ✅ Added complete error handling translations - ✅ Added UI labels and helper text - ✅ Organized into logical sections (errors, labels, loading, etc.) **Japanese translations** (`settings.json`): - ✅ Professional Japanese translations for all new strings - ✅ Proper Japanese technical terminology - ✅ Context-appropriate language levels ### **🎯 Key Improvements** 1. **Comprehensive Error Handling** - All error messages now properly translated 2. **Complete UI Coverage** - Every user-facing string is now translatable 3. **Better Organization** - Translations grouped by function (errors, labels, loading states) 4. **Interpolation Support** - Dynamic content like error messages with variables 5. **Consistent Terminology** - Unified translation approach across all components ### **✅ Final Status** - **100% settings page coverage** - All user-facing text is now translated - **Zero hardcoded strings remain** - Complete internationalization - **TypeScript compilation passes** - All translations properly typed - **Ready for additional languages** - Clean structure for future language additions The settings pages are now **fully internationalized** with comprehensive English and Japanese support covering every user-facing string, error message, and UI element! 🌟 * Cleanup script changes for task attempt b1d31517-2fca-44be-8b5f-5f744ec5e5ff * ## **✅ Language Selection Integration Complete!** I've successfully moved the language selection to General Settings and integrated it with the user config system. Here's what was accomplished: ### **🔧 Backend Changes (Rust)** - ✅ **UiLanguage enum** - Added to `v6.rs` with `BROWSER`, `EN`, `JA` options - ✅ **Config extension** - Added `language: UiLanguage` field with `#[serde(default)]` - ✅ **Migration support** - Existing configs get `BROWSER` default automatically - ✅ **Type export** - UiLanguage included in TypeScript generation - ✅ **Compilation success** - Both Rust backend and frontend compile ### **🌐 Frontend Integration** - ✅ **i18n configuration** - Updated to work with config system instead of localStorage - ✅ **Config sync** - Language changes automatically update i18n via UserSystemProvider - ✅ **Browser detection** - "Browser Default" properly detects system language - ✅ **Translation files** - Added language selection UI text in English and Japanese ### **🎨 UI Changes** - ✅ **General Settings** - Language selection added to Appearance card alongside theme - ✅ **Three options** - Browser Default, English, Japanese - ✅ **Sidebar cleanup** - Removed temporary language switcher - ✅ **Proper placement** - Language setting grouped with other appearance preferences ### **🎯 Key Features** - **"Browser Default"** - Detects user's system language automatically - **Explicit selection** - Overrides browser detection when user chooses specific language - **Persistent storage** - Language preference saved server-side with other config - **Cross-device sync** - Language preference follows user account - **Immediate updates** - UI language changes instantly when saved ### **🔄 User Experience** 1. **Default behavior** - New users get browser language detection 2. **Easy override** - Users can select specific language in General Settings 3. **Persistent choice** - Selection saved with other preferences 4. **Visual feedback** - UI immediately updates to reflect language choice The language selection is now properly integrated as a first-class user preference alongside theme, notifications, and other settings! 🌟 * Cleanup script changes for task attempt b1d31517-2fca-44be-8b5f-5f744ec5e5ff * ## **✅ Language Dropdown Display Fixed!** The issue was a **namespace mismatch** - the Oracle identified that: ### **🔍 Root Cause** - **GeneralSettings** used `useTranslation('settings')` (settings namespace only) - **Language labels** were stored in `common` namespace (`language.en`, `language.ja`) - **Translation lookup failed** → showed raw keys instead of translated text ### **🔧 Solution Applied** - **Multi-namespace hook**: Changed to `useTranslation(['settings', 'common'])` - **Fallback resolution**: react-i18next now checks `settings` first, then `common` - **No code duplication**: Language labels stay in `common` where they belong ### **🎯 Expected Result** The dropdown will now properly display: - **"Browser Default"** instead of `language.browserDefault` - **"English"** instead of `language.en` - **"日本語"** instead of `language.ja` ### **✅ Benefits** - **Clean user experience** - Proper language names in dropdown - **Maintainable code** - Language labels stay in shared `common` namespace - **Simple solution** - One-line change with react-i18next's built-in fallback - **Zero breaking changes** - All other translations continue working The language selection dropdown should now show clean, translated language names! 🌟 * ## **🔧 Language Dropdown Display Fix Applied** I've implemented the Oracle's recommended debugging approach to fix the language name display issue: ### **✅ Solution Applied** **Explicit namespace + fallback approach**: ```tsx // Instead of relying on multi-namespace fallback: {t('language.en')} // Now using explicit namespace with guaranteed fallback: {t('language.en', { ns: 'common', defaultValue: 'English' })} ``` ### **🔍 What This Fixes** 1. **Explicit namespace targeting** - Directly specifies `common` namespace 2. **Guaranteed fallback** - Shows proper language names even if translation fails 3. **Debug logging** - Added console logs to help diagnose i18n initialization issues ### **📋 Expected Results** The dropdown will now show: - **"Browser Default"** instead of `language.browserDefault` - **"English"** instead of `language.en` - **"日本語"** instead of `language.ja` ### **🔍 Debug Information** I've added console logging that will show: - i18n initialization status - Current language setting - Available namespaces - Whether common bundle is loaded This will help identify if there are any underlying i18n configuration issues. ### **🎯 Benefits** - **Guaranteed display** - Language names will show correctly regardless of namespace resolution - **Debugging capability** - Console logs help diagnose any remaining i18n issues - **Robust solution** - Works even if multi-namespace fallback has problems - **Clean user experience** - Users see proper language names, not technical keys The language dropdown should now display clean, readable language names! You can test this and check the browser console for any i18n debug information if needed. 🌟 * Cleanup script changes for task attempt b1d31517-2fca-44be-8b5f-5f744ec5e5ff * ## **✅ Incremental i18n Enforcement System Complete!** I've successfully implemented the complete enforcement system that will prevent new hardcoded strings while allowing gradual cleanup. Here's what was accomplished: ### **🔧 ESLint Configuration** - ✅ **Installed** `eslint-plugin-i18next` - ✅ **Configured** `no-literal-string` rule as warnings (non-breaking) - ✅ **Smart ignores** - Technical attributes like `data-testid`, `className` excluded - ✅ **Test exemption** - Test files don't require translations - ✅ **Markup-only** - Only flags JSX text content, not console logs ### **📊 Violation Counting System** - ✅ **Counting script** - `frontend/scripts/check-i18n.sh` - ✅ **Baseline comparison** - Compares PR vs main branch violation counts - ✅ **Git worktree** - Fast baseline checking without full clone - ✅ **Clear messaging** - Shows violation count differences and helpful guidance ### **🔒 CI Integration** - ✅ **GitHub workflow** - Added to existing `test.yml` after lint step - ✅ **Environment setup** - Proper base branch detection - ✅ **Failure feedback** - Shows exact files and lines with new violations ### **📈 Current Baseline** - **367 existing violations** in the codebase (detected by the new rule) - **Settings pages are clean** (already translated) - **Clear improvement path** - Each translated component reduces the count ### **🎯 How It Works** #### **✅ For New Code** - **Local development** - Developers see warnings but code still works - **PR submission** - CI blocks if violation count increases - **Clear feedback** - Exact files and lines that need translation #### **🚀 For Cleanup** - **Encouraged** - PRs that reduce violations always pass - **Tracked** - Progress visible through decreasing violation counts - **Flexible** - Teams can clean up at their own pace #### **🔒 Enforcement Logic** ```bash if (PR_violations > main_violations); then ❌ Block PR - shows which files need translation else ✅ Allow PR - same or better than baseline fi ``` ### **🌟 Key Benefits** - **Zero breaking changes** - Existing development workflow unchanged - **Automatic baseline** - Count decreases as components get translated - **Developer-friendly** - Clear, actionable feedback when violations occur - **Gradual adoption** - No pressure to translate everything at once - **Quality gate** - Ensures i18n coverage never regresses The system is now ready! Every future PR will be automatically checked to ensure no new hardcoded strings are introduced, while encouraging gradual cleanup of the existing codebase. 🚀 * ## **✅ ESLint Separation Successfully Implemented!** I've successfully separated the i18n enforcement from the main lint check using the Oracle's recommended environment flag approach. ### **🔧 Solution Implemented** #### **1. Environment Flag Configuration** - ✅ **Converted** `.eslintrc.json` → `.eslintrc.cjs` for logic support - ✅ **Environment flag** `LINT_I18N=true` controls i18n rule activation - ✅ **Single config file** - One source of truth, no duplication #### **2. Separated npm Scripts** ```json { "lint": "eslint . --ext ts,tsx --max-warnings 100", // Main quality check "lint:i18n": "LINT_I18N=true eslint . --ext ts,tsx --max-warnings 0" // i18n enforcement } ``` #### **3. Perfect Results** - ✅ **Main lint**: 96 warnings (under 100 limit) - **no i18n warnings** - ✅ **I18n lint**: 367+ total warnings - **includes all i18n violations** - ✅ **Clean separation** - Quality vs i18n concerns properly isolated ### **🎯 How It Works** #### **Main Development Workflow** ```bash npm run lint # Quality check only (96 warnings ✅) npm run lint:fix # Auto-fix quality issues ``` #### **I18n Enforcement** ```bash npm run lint:i18n # Shows all literal strings (367 violations) ./scripts/check-i18n.sh # PR comparison logic ``` #### **CI Integration** - **Regular lint** continues working with `--max-warnings 100` - **Separate i18n check** uses dedicated script for violation counting - **No interference** between quality gates and i18n enforcement ### **✅ Benefits** - **Developer experience preserved** - Main lint stays under warning limit - **Clean separation** - Code quality vs i18n concerns isolated - **Single configuration** - One ESLint config file to maintain - **Flexible enforcement** - i18n violations handled separately - **Future-ready** - Easy to tighten rules as violations decrease The system now cleanly separates code quality linting from i18n enforcement, allowing both to work effectively without interference! 🌟 * ## **✅ CI Script Issues Fixed!** I've successfully resolved the check-i18n.sh script issues that were causing parse errors and incorrect violation counts in CI. ### **🔍 Root Cause Identified** The Oracle diagnosed the exact problems: 1. **npm banners** contaminating ESLint JSON output in CI 2. **Pipe truncation** causing incomplete JSON 3. **jq parse errors** due to malformed input ### **🔧 Solution Implemented** #### **Robust ESLint Output** ```bash # Before (problematic): npm run lint:i18n -- -f json | jq ... # After (robust): LINT_I18N=true npx eslint . \ --format json \ --output-file "$tmp" \ # Clean JSON to file --no-error-on-unmatched-pattern ``` #### **Environment Flag Separation** ```javascript // .eslintrc.cjs 'i18next/no-literal-string': i18nCheck ? ['warn', { /* options */ }] : 'off' ``` ### **📊 Current Results** #### **✅ Main Lint (Quality Focus)** - **96 warnings** (under 100 limit) - **Zero i18n warnings** (properly excluded) - **Existing workflow preserved** #### **✅ I18n Enforcement** - **367 violations detected** (accurate count) - **Clean JSON parsing** (no more jq errors) - **Proper baseline comparison** (0 vs 367) ### **🎯 How It Works in CI** #### **Main Lint Check** ```bash npm run lint # Quality rules only, max 100 warnings ``` #### **I18n Enforcement** ```bash ./scripts/check-i18n.sh # Dedicated i18n violation counting ``` ### **🚀 Benefits** - **CI reliability** - No more parse errors or false counts - **Clean separation** - Quality vs i18n concerns isolated - **Accurate tracking** - Real violation counts for progress measurement - **Developer experience** - Main lint stays fast and focused The incremental i18n enforcement system is now **robust and ready for production**! The CI will correctly detect new hardcoded strings while allowing gradual cleanup of the existing codebase. 🌟 * Testing i18n CI (#782) * ## **✅ Bootstrap Solution Implemented!** I've successfully implemented the Oracle's recommended approach to handle the initial i18n implementation bootstrap. ### **🔧 Changes Made** #### **1. CI Workflow Update** - ✅ **Added** `continue-on-error: true` to i18n check step - ✅ **Clear comment** indicating this is temporary for bootstrap - ✅ **CI will not fail** even with 367 violations vs 0 baseline #### **2. Documentation** - ✅ **Created** `I18N-ENFORCEMENT.md` with complete next steps - ✅ **Explains** current status and post-merge actions - ✅ **Clear instructions** for enabling full enforcement ### **🎯 How This Solves the Problem** #### **✅ Immediate Benefits** - **CI passes** - Bootstrap implementation can merge cleanly - **Infrastructure ready** - All tools and scripts are in place - **Monitoring active** - Violations are counted and reported - **No disruption** - Existing development workflow unchanged #### **🔄 After Merge Process** 1. **Remove** `continue-on-error: true` from workflow 2. **Full enforcement** automatically activates 3. **Future PRs** blocked if violations increase 4. **Gradual cleanup** encouraged as baseline decreases ### **📊 Expected Flow** #### **This PR** - **CI shows** violation counts but doesn't fail - **Merges cleanly** with infrastructure in place - **Establishes** main branch baseline #### **Future PRs** - **Enforcement active** - New violations blocked - **Cleanup rewarded** - Violation reductions celebrated - **Progress tracked** - Clear path to full compliance ### **🌟 Ready to Merge!** Your PR now has: - ✅ **Complete i18n infrastructure** (react-i18next + translations) - ✅ **Enforcement system** ready for activation - ✅ **CI-friendly bootstrap** that won't block merge - ✅ **Clear next steps** documented for team The bootstrap solution ensures a smooth transition from no i18n to full i18n enforcement! 🚀 * test translation * fix script * path fixes * debug logs * fix node deps * change approach * cleanup * remove tmp ci branch * cleanup * disable CI check to start |