feat: add internationalization with gt-next

[SamEggert]

What does this PR do?

This PR adds comprehensive internationalization (i18n) support to the Comp platform using the gt-next library from General Translation. The implementation includes:

• Complete onboarding and dashboard internationalization - All UI components, forms, navigation, and static content are now translatable
• Locale switching functionality - Added a locale selector in the user menu for seamless language switching
• Spanish translations included - Local translations for Spanish (ES) are provided as a demonstration

Scope and Limitations:

• ✅ Translated: All dashboard UI, navigation, forms, buttons, labels, and static content
• ❌ Not translated: Database content (tasks, policies, controls), external integrations outside /apps/app

This implementation was created by Locadex, an AI internationalization engineer that automatically analyzes codebases and implements our i18n library gt-next.

Visual Demo

trycompai-locadex.mp4

Video Demo:

• Demonstrates the complete internationalized dashboard
• Shows locale switching via the user menu selector
• Highlights translated UI components across different pages
• Shows Spanish translations in action

How to Demo This Internationalized App

To test the internationalization features:

1. Checkout the branch:

   git checkout locadex/setup-i18n

2. Install dependencies:

   bun install

3. Run the application:

   bun run dev

4. Switch locales:

   • Navigate to the user menu (top-right corner)
   • Use the new Locale Selector to switch between English and Spanish
   • Observe the dashboard content updating in real-time

Technical Implementation Overview

This implementation uses the gt-next library with the following key components:

Core Setup Files:

• GTProvider - Added to the root layout (app/layout.tsx) to provide translation context
• gt.config.json - Configuration file specifying locales, project ID, and translation file locations
• loadTranslations.ts - Handles loading local translation files from /public/_gt/[locale].json

How It Works:

• JSX/HTML content wrapped in <T> components automatically translates (e.g., <T><p>Hello World</p></T>)
• String translations use useGT() hook in client components or getGT() function in server components:

  // Client component
  const t = useGT();
  const message = t("Welcome to the dashboard");
  
  // Server component  
  const t = await getGT();
  const title = t("Page Title");

• Locale switching with the <LocaleSelector> component updates all translated content in real-time
• Translation files are stored locally as JSON with hashed keys for efficiency

Development Features:

To test different translation modes, you can:

• Local translations: Current setup uses local files (default)
• CDN translations: Rename loadTranslations.ts to _loadTranslations.ts to disable local files and switch to CDN mode (requires GT_API_KEY and GT_PROJECT_ID)

For complete implementation details, visit our documentation.

Expanding Internationalization

Adding New Locales

To add additional languages to your application:

1. Configure gt-next CLI:

   cd apps/app
   npx gtx-cli configure

2. Generate translations:

   npx gtx-cli translate

   Note: This requires an API key (see authentication below)

3. Authenticate (for translation generation):

   npx gtx-cli auth

   Get your API key by creating an account at https://generaltranslation.com/

Automated Internationalization with Locadex GitHub App

For continuous internationalization install our Locadex GitHub App:

Installation Steps:

1. Create Account: Visit https://generaltranslation.com/

2. Connect to GitHub: Click "Connect to GitHub"

   

   Note: This routes through Stripe for our Pro plan, but includes a free month trial

3. Install GitHub App: Follow the installation flow on github

   
   • Select your organization
   • Choose the comp repository
   • Click "Install and Authorize"

4. Repository Setup: After installation, you'll see your repository listed

   

   Click the "Connect" button to access configuration.

5. Configure Locadex:

   
   • Locales: Select target languages for translation
   • NextJS App Directory: ./apps/app (for monorepos)
   • Package Manager: Select bun

   Since this PR already includes the setup, you can skip installation and have Locadex monitor for new PRs.

How Locadex Works:

• Automatic PR Monitoring: Locadex watches for new pull requests
• Smart Internationalization: Analyzes changes and applies our library automatically
• Seamless Integration: Makes commits directly to PR branches or creates separate PRs
• Zero Configuration: Works without requiring team members to learn i18n implementation

For detailed documentation, visit: https://generaltranslation.com/en/docs/platform

Contact & Support

Questions or interested in using our internationalization platform?

📧 Contact: [email protected]
💬 Slack: Feel free to add me to a slack channel for direct support
🌐 Platform: https://generaltranslation.com/

Mandatory Tasks

• I have self-reviewed the code
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - This is an additive feature that doesn't change existing functionality
• I confirm automated tests are in place that prove my fix is effective or that my feature works. N/A - This is a UI internationalization feature; functionality remains unchanged

How should this be tested?

Environment Setup:

• No additional environment variables required for testing - Spanish translations are included locally in this PR
• For CDN features (optional): Add GT_API_KEY and GT_PROJECT_ID from the General Translation platform
• Standard development environment setup

Test Scenarios:

1. Locale Switching:

   • Navigate through different pages while switching locales
   • Verify UI elements translate correctly
   • Confirm layout remains intact across languages

2. Content Coverage:

   • Test all major dashboard sections (policies, risks, tasks, etc.)
   • Verify forms, buttons, and navigation elements are translated
   • Check that English remains the default fallback

3. User Experience:

   • Ensure locale preference persists across sessions
   • Verify smooth transitions when switching languages
   • Test that functionality remains unaffected

Expected Results:

• All static UI content should translate between English and Spanish
• Database-driven content (tasks, policies, controls) will remain in original language
• Application functionality should remain completely unchanged

Checklist

• I have read the contributing guide
• My code follows the style guidelines of this project
• I have commented my code, particularly in hard-to-understand areas
• I have checked that my changes generate no new warnings

[vercel]

@SamEggert is attempting to deploy a commit to the Comp AI Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[claudfuen]

@SamEggert This looks great! Will take a look and do some testing and let you know if we have any feedback.