Louis Knight-Webb b36572f255 Improvements to translations (vibe-kanban) (#812)
* ##  Phase 1 & 3 Implementation Complete

I've successfully implemented Phase 1 (Language Configuration System) and Phase 3 (Auto-generated Language Dropdown):

### ** What's Been Accomplished:**

1. **Created centralized language configuration** ([`frontend/src/i18n/languages.ts`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/i18n/languages.ts))
   - Uses `Intl.DisplayNames` for native language names (English, 日本語, Español)
   - Provides fallbacks for older browsers
   - Single source of truth for all supported languages

2. **Converted UiLanguage to enum** in [`shared/types.ts`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/shared/types.ts#L103-L108)

3. **Enhanced i18n configuration** ([`frontend/src/i18n/config.ts`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/i18n/config.ts))
   - Added `supportedLngs` and `load: 'languageOnly'` for better language detection
   - Improved language mapping with proper error handling

4. **Removed duplicate language names** from all translation files
   - [English](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/i18n/locales/en/common.json#L20-L22), [Japanese](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/i18n/locales/ja/common.json#L20-L22), [Spanish](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/i18n/locales/es/common.json#L20-L22) common.json files
   - Only kept `browserDefault` translation key

5. **Auto-generated language dropdown** in [`GeneralSettings.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/pages/settings/GeneralSettings.tsx#L215-L221)
   - Dynamically generates options from language configuration
   - Shows native language names without hardcoding

### ** Issues Resolved:**

-  **Issue #1**: Language names no longer repeated in every translation file
-  **Issue #4**: Language dropdown now auto-generated from enum instead of hardcoded

### **Next Steps (Phase 2):**
When you're ready, I can implement Phase 2 (Build-time Validation Tools) which will address the remaining issues:
- **Issue #2**: Translation key completeness checking
- **Issue #3**: Template variable validation

The system now provides a solid foundation with type safety, centralized configuration, and native language display names using modern browser APIs!

* Cleanup script changes for task attempt e26648e5-d440-43ea-be44-6764efa795af

* Perfect! I've successfully simplified the translation system.

##  Simplification Complete

**What I changed:**

1. **Simplified [`languages.ts`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/i18n/languages.ts)** from 100+ lines to just 43 lines
   - Removed unnecessary interfaces and complex abstractions
   - Kept essential functionality: UI-to-i18n mapping, native names, dropdown generation
   - Added proper TypeScript typing with `as const`

2. **Updated [`GeneralSettings.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e266-improvemen/frontend/src/pages/settings/GeneralSettings.tsx#L49-L54)** to use the simpler API
   - Changed from `getAllLanguageInfo()` to `getLanguageOptions()`
   - Updated mapping from `{uiValue, displayName}` to `{value, label}`

**Key benefits of the simplified version:**
-  **70% less code** (43 lines vs 100+)
-  **Stronger typing** with `as const` assertions
-  **Same functionality** - still uses `Intl.DisplayNames` with fallbacks
-  **Easier to maintain** for the current 3-language setup
-  **Still centralized** - single source of truth maintained

The dev server is running at http://127.0.0.1:3001 for your manual testing. The language dropdown should now show native language names (English, 日本語, Español) generated dynamically instead of being hardcoded!

* Cleanup script changes for task attempt e26648e5-d440-43ea-be44-6764efa795af
2025-09-23 12:37:28 +01:00
2025-09-19 13:57:03 +01:00
2025-08-08 13:53:27 +01:00
2025-08-08 13:53:27 +01:00
2025-09-04 10:52:18 +01:00
2025-09-04 15:11:41 +01:00
2025-09-22 16:02:42 +01:00
2025-08-08 13:53:27 +01:00
2025-08-08 13:53:27 +01:00
2025-07-11 15:57:30 +01:00
2025-09-04 10:52:18 +01:00
2025-07-11 16:31:08 +01:00
2025-09-20 11:27:18 +00:00
2025-06-14 15:14:08 -04:00
2025-06-25 09:27:29 +01:00
2025-06-25 09:27:29 +01:00
2025-07-04 11:11:45 +02:00

Vibe Kanban Logo

Get 10X more out of Claude Code, Gemini CLI, Codex, Amp and other coding agents...

npm Build status Ask DeepWiki

Overview

AI coding agents are increasingly writing the world's code and human engineers now spend the majority of their time planning, reviewing, and orchestrating tasks. Vibe Kanban streamlines this process, enabling you to:

  • Easily switch between different coding agents
  • Orchestrate the execution of multiple coding agents in parallel or in sequence
  • Quickly review work and start dev servers
  • Track the status of tasks that your coding agents are working on
  • Centralise configuration of coding agent MCP configs

You can watch a video overview here.

Installation

Make sure you have authenticated with your favourite coding agent. A full list of supported coding agents can be found in the docs. Then in your terminal run:

npx vibe-kanban

Documentation

Please head to the website for the latest documentation and user guides.

Support

Please open an issue on this repo if you find any bugs or have any feature requests.

Contributing

We would prefer that ideas and changes are raised with the core team via GitHub issues, where we can discuss implementation details and alignment with the existing roadmap. Please do not open PRs without first discussing your proposal with the team.

Development

Prerequisites

Additional development tools:

cargo install cargo-watch
cargo install sqlx-cli

Install dependencies:

pnpm i

Running the dev server

pnpm run dev

This will start the backend. A blank DB will be copied from the dev_assets_seed folder.

Building the frontend

To build just the frontend:

cd frontend
pnpm build

Build from source

  1. Run build-npm-package.sh
  2. In the npx-cli folder run npm pack
  3. You can run your build with npx [GENERATED FILE].tgz

Environment Variables

The following environment variables can be configured at build time or runtime:

Variable Type Default Description
GITHUB_CLIENT_ID Build-time Ov23li9bxz3kKfPOIsGm GitHub OAuth app client ID for authentication
POSTHOG_API_KEY Build-time Empty PostHog analytics API key (disables analytics if empty)
POSTHOG_API_ENDPOINT Build-time Empty PostHog analytics endpoint (disables analytics if empty)
BACKEND_PORT Runtime 0 (auto-assign) Backend server port
FRONTEND_PORT Runtime 3000 Frontend development server port
HOST Runtime 127.0.0.1 Backend server host
DISABLE_WORKTREE_ORPHAN_CLEANUP Runtime Not set Disable git worktree cleanup (for debugging)

Build-time variables must be set when running pnpm run build. Runtime variables are read when the application starts.

Custom GitHub OAuth App (Optional)

By default, Vibe Kanban uses Bloop AI's GitHub OAuth app for authentication. To use your own GitHub app for self-hosting or custom branding:

  1. Create a GitHub OAuth App at GitHub Developer Settings
  2. Enable "Device Flow" in the app settings
  3. Set scopes to include user:email,repo
  4. Build with your client ID:
    GITHUB_CLIENT_ID=your_client_id_here pnpm run build
    
Description
Get 10X more out of Claude Code, Codex or any coding agent
https://www.vibekanban.com/
Readme Apache-2.0 48 MiB
Languages
Rust 51.1%
TypeScript 46.6%
CSS 1.1%
JavaScript 0.7%
PLpgSQL 0.2%
Other 0.2%