# Adding translations

All locale files can be found under `src/i18n` in the [client repository](https://github.com/DefGuard/client). In order to add a new translation, you will need to create an appropriate folder in this directory. You can refer to the `en` locale as an example.

If you'd like to add a new locale, e.g. French, create an `fr` folder in the `src/i18n` directory and copy the `index.ts` file from the base (`en`) locale folder into your newly created `fr` directory. After copying the file, open it and change the locale name from `en` to `fr` as below:

```typescript
/* eslint-disable no-irregular-whitespace */
/* eslint-disable max-len */
import type { BaseTranslation } from '../i18n-types';

const en = { // <-- change it to fr or other language code of your choice
[...]
} satisfies BaseTranslation;

export default en; // <-- change it to fr or other language code of your choice
```

Now you can edit your index.ts file and translate its strings into the chosen language.

### Generating types

After every change in your translation you will have to generate the locale types in order for the locale to load properly. To do this, you will need to install some client dependencies: at least `typesafe-i18n` but ideally you should setup the whole client development environment in order to preview your translations. You can find the client development prerequisites in the client's readme: <https://github.com/DefGuard/client?tab=readme-ov-file#development>. You will also need to have some node package manager, we use `pnpm`.

The types can be generated by executing one of the following commands in the client directory:

```
pnpm typesafe-i18n
```

or

```
pnpm tauri dev
```

The first command only generates the required locale types, the second one runs the client along with UI hot reload, so you can observe your locale changes in real-time.

### Switching language

Currently client picks the locale based on the operating system's settings. There is no straightforward way to switch the locale in the client by hand, other than to hardcode different `detectedLocale` in `src/components/App/App.tsx` or change your operating system's language. This is a temporary shortcoming and will be changed in the future.