Translations Guide

This guide explains how to add new languages, update translations, and maintain the internationalization system for AdbAutoPlayer.

📁 File Structure

frontend/src/lib/i18n/
├── README.md          # This guide
├── i18n.ts           # Translation system core
├── locales.ts        # Language configuration
├── jp.json           # Japanese translations
└── vn.json           # Vietnamese translations

🌐 Currently Supported Languages

• English (en) - Default language
• Japanese (jp) - Partially translated
• Vietnamese (vn) - Partially translated

🚀 Quick Start

Adding a New Language

1. Create translation file: frontend/src/lib/i18n/[language-code].json
2. Update locales.ts: Add language to enum and import
3. Update backend constraint: Add language option to Go backend
4. Test the implementation

Updating Existing Translations

1. Edit the JSON file: Modify translations in existing language files
2. Test in application: Build and verify changes
3. Commit changes: Submit via pull request

📋 Detailed Instructions

1. Adding a New Language

Step 1: Create Translation File

Create a new JSON file: frontend/src/lib/i18n/[language-code].json

{
  "Stop Action": "Your Translation",
  "General Settings": "Your Translation",
  "Language": "Your Translation",
  "Device": "Your Translation",
  "Update": "Your Translation",
  "User Interface": "Your Translation"
}

Step 2: Update Frontend Configuration

Edit frontend/src/lib/i18n/locales.ts:

// Add import
import newLang from "./[language-code].json";

// Add to enum
export enum SupportedLocale {
  EN = "en",
  JP = "jp", 
  VN = "vn",
  NEW_LANG = "[language-code]", // Add this line
}

// Add to locales object
const locales: LocaleDictionary = {
  [SupportedLocale.EN]: {},
  [SupportedLocale.JP]: jp,
  [SupportedLocale.VN]: vn,
  [SupportedLocale.NEW_LANG]: newLang, // Add this line
};

Step 3: Update Backend Configuration

Edit internal/ipc/constraint.go:

"Language": NewSelectConstraint([]string{
    "en",
    "jp", 
    "vn",
    "[language-code]", // Add your language code
}, "en"),

2. Updating Existing Translations

Edit Translation Files

Open the appropriate JSON file and modify translations:

{
  "Old Key": "Updated Translation",
  "New Key": "New Translation"
}

3. Adding More Translations

Find Untranslated Text

1. Run the application in your target language
2. Look for English text that should be translated
3. Check the source code for text strings used with $t() function

Add Missing Translations

Add new key-value pairs to the JSON file:

{
  "Existing Translation": "Existing Value",
  "New English Text": "New Translated Text"
}

🔍 Finding Text to Translate

Common Locations

• Button labels: Look for buttons still showing English text
• Error messages: Check error dialogs and notifications
• Configuration labels: Settings form field names
• Menu categories: Section headers and groupings
• Tooltips: Hover text on buttons and controls

Search in Code

Look for these patterns in the codebase:

// Direct translation calls
$t("Text to translate")

// Template usage
{$t("Text to translate")}

// With interpolation
$t("{{game}} Settings", { game: gameName })

🧪 Testing Your Changes

Verification Checklist

• Language appears in dropdown
• All buttons are translated
• Application builds successfully
• Language switching works smoothly

📝 Example: Complete Translation File (Vietnamese)

{
  "Stop Action": "Dừng Hành Động",
  "General Settings": "Cài Đặt Chung", 
  "Language": "Ngôn Ngữ",
  "Device": "Thiết Bị",
  "Update": "Cập Nhật",
  "User Interface": "Giao Diện Người Dùng",
  "Failed to Save General Settings": "Không thể lưu Cài Đặt Chung",
  "Something went wrong": "Đã xảy ra lỗi"
}

Happy translating! 🌍