localize

name	localize
description	Localize ryOS apps and components by extracting hardcoded strings, replacing with translation keys, and syncing across languages. Use when localizing an app, adding i18n support, translating UI text, or working with translation files.

Localize App or Component

Workflow Checklist

- [ ] 1. Extract hardcoded strings
- [ ] 2. Replace with t() calls in source files
- [ ] 3. Add English translations to en/translation.json
- [ ] 4. Sync translations across languages
- [ ] 5. Machine translate [TODO] keys
- [ ] 6. Validate coverage and terminology

Step 1: Extract Hardcoded Strings

bun run i18n:extract --pattern [PATTERN]

Step 2: Replace Strings with t() Calls

For each component:

1. Add import: import { useTranslation } from "react-i18next";
2. Add hook: const { t } = useTranslation();
3. Replace strings: t("apps.[appName].category.key")
4. Add t to dependency arrays for useMemo/useCallback

Key Structure

apps.[appName].menu.*        # Menu labels
apps.[appName].dialogs.*     # Dialog titles/descriptions
apps.[appName].status.*      # Status messages
apps.[appName].toasts.*      # Toast titles/descriptions
apps.[appName].empty.*       # Empty-state titles/hints
apps.[appName].ariaLabels.*  # Accessibility labels
apps.[appName].help.*        # Help items (auto-translated)
apps.[appName].speech.*      # Spoken feedback / speech labels
apps.[appName].conversion.*  # Unit conversion labels
apps.[appName].angle.*       # Angle-mode labels
common.auth.*                # Shared login/signup/recovery dialog labels

Common Patterns

// Basic
t()


(, { :  })


isPlaying ? () : ()