Internationalization (i18n)

[danditomaso]

Description

This pull request introduces internationalization (i18n) support for the web client, this is one part of a larger overall effort to support multiple languages across all Meshtastic apps. Hardcoded strings have been extracted from various React components and replaced with translation keys using react-i18next. The en.json locale file is the base strings file where all other translations will be based on this file, future strings added to the app will need a corresponding key as well.

The primary goal of these changes is to make the application more accessible and maintainable for future localization efforts.

Related Issues

Organisation wide effort
Fixes #57

Changes Made

Replaced strings in the following components:

• Dialogs
• Configuration pages (Device and Module config tabs, main config page titles, and toast messages)
• Nodes page (table content and status messages)
• Messaging page
• Map page
• Individual configuration sections (Bluetooth, Device, Display, LoRa, Network, Position, Power, Security)
• Core UI elements like Input fields and Filter controls
• Dashboard page

Checklist

• Code follows project style guidelines
• Documentation has been updated or added
• Tests have been added or updated
• All CI checks pass
• Dependent changes have been merged

Additional Notes

[vercel]

@danditomaso is attempting to deploy a commit to the Meshtastic Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull Request Overview

This PR adds internationalization support for the web client by replacing hardcoded string literals with translation keys via the react-i18next library. Key changes include:

• Refactoring of multiple dialogs, components, and UI elements to use translation functions.
• Updates to package.json for i18next and related plugins.
• Adjustments to component logic to include i18next hook integrations.

Reviewed Changes

Copilot reviewed 52 out of 52 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/components/KeyBackupReminder.tsx	Uses t() for backup reminder message.
src/components/Dialog/UnsafeRolesDialog.tsx	Refactors dialog titles/descriptions with translation keys.
src/components/Dialog/TracerouteResponseDialog.tsx	Uses translations for dialog title and fallback node names.
src/components/Dialog/ShutdownDialog.tsx	Replaces static strings with translation keys in UI elements.
src/components/Dialog/RemoveNodeDialog.tsx	Applies internationalized text for dialogs & button labels.
src/components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx	Uses t() for dialog title, description, and button texts.
src/components/Dialog/RebootOTADialog.tsx	Translation keys now govern title, description, placeholder, and button texts.
src/components/Dialog/RebootDialog.tsx	Internationalizes dialog titles, button names, & descriptions.
src/components/Dialog/QRDialog.tsx	Refactors QR dialog texts with translation functions.
src/components/Dialog/PkiRegenerateDialog.tsx	Integrates translations for dialog text defaults.
src/components/Dialog/PKIBackupDialog.tsx	Uses translation keys in print/download dialogs.
src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx	Applies i18n to labels, button texts, and descriptions.
src/components/Dialog/NewDeviceDialog.tsx	Updates dialog title, tab labels, and error messages with translations.
src/components/Dialog/LocationResponseDialog.tsx	Uses t() for location details and dialog title.
src/components/Dialog/ImportDialog.tsx	Internationalizes error messages, labels, and button texts.
src/components/Dialog/DeviceNameDialog.tsx	Refactors device name change dialog labels and buttons with translations.
src/components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx	Applies t() for title and button texts in message deletion dialog.
src/components/CommandPalette/index.tsx	Uses translations for command group labels and button aria labels.
src/components/BatteryStatus.tsx	Integrates translations for battery status texts and units.
package.json	Adds new i18next dependencies and related packages.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web-test	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2025 0:13am

[Hunter275]

I am so excited for this!

[philon-]

Fantastic work!

My inline comments may be a little off - GitHub only allows comments on changed lines(?)

Also, for future reference it might be good to document how contributors should add new strings the proper way so that they get synced to Crowdin

[danditomaso]

Fantastic work!

My inline comments may be a little off - GitHub only allows comments on changed lines(?)

Also, for future reference it might be good to document how contributors should add new strings the proper way so that they get synced to Crowdin

Thanks for the detailed review. I had switched from using dots to underscores to break up long key names, but switched half way through and I guess I left some of the unmodified strings in place. I believe I've resolved most of your questions, though one of them wasnt clear and I was hoping for some clarification before I can respond.

[philon-]

Looks good to me!