i18n - Internationalization¶

Overview¶

The app uses a reactive i18n system that supports English (en) and Spanish (es).

File Structure¶

assets/i18n/
├── en.json   # English translations
└── es.json   # Spanish translations

Translation Keys¶

Keys follow dot notation: section.subsection.key

Examples: - auth.login - Login button text - dashboard.title - Dashboard page title - profile.settings.language - Language setting

Usage¶

Static Text (non-reactive)¶

from shared.i18n import t

ft.Text(t("auth.login"))  # Returns string

Reactive Text (re-renders on language change)¶

from shared.i18n import t_text

ft.Text(t_text("auth.login", page, weight=ft.FontWeight.BOLD))
# Returns ft.Text control registered for reactive updates

NavigationDrawer Destinations¶

from shared.i18n import t_drawer

ft.NavigationDrawerDestination(
    icon=ft.Icons.HOME,
    label=t_drawer(ft.NavigationDrawerDestination(icon=ft.Icons.HOME), "nav.home")
)

Language Switcher¶

from shared.i18n import set_language, Lang, refresh_and_update

async def change_language(page, lang_code):
    await set_language(Lang(lang_code))
    await refresh_and_update(page)

Rules¶

ALL visible texts must use t_text() for reactivity
Only use t() for texts that don't need updates (e.g., error messages that close the page)
Language names ("English", "Español") are NOT translated
Adding a new language: Create new {lang}.json file

Key Files¶

File	Description
`shared/i18n/__init__.py`	Translation service implementation
`shared/i18n/t.py`	Translation function (static)
`shared/i18n/t_text.py`	Reactive text component
`assets/i18n/en.json`	English translations
`assets/i18n/es.json`	Spanish translations

Adding Translations¶

Add key to en.json
Add corresponding key to es.json
Use t_text("key", page) in UI

Testing¶

# Check for missing translations
# Compare en.json and es.json keys

Best Practices¶

Use consistent key naming: section.element.action
Group related keys under same section prefix
Document new keys in comments when adding