Feat add i18n support (Multi-Language Support)

[MegaLodonn0]

Summary

The main purpose of this pull request is to refactor the application's UI, removing static text to prepare it for multi-language support.

To achieve this, I have integrated the vue-i18n library, established the necessary infrastructure, and fully dynamized the SetupUI.vue component. Thanks to this new foundation, adding new languages in the future will be as simple as adding a single translation file.

Technical Implementation

1. Installed vue-i18n Library:

   • Added vue-i18n@next to the project dependencies, which is fully compatible with the Vue 3 structure.

2. Created Translation Infrastructure:

   • Created a new src/renderer/locales/ directory to host translation files.
   • Migrated all existing UI text from SetupUI.vue into a key-value format in en.json. This file now serves as the primary template for all future languages.

3. Configured i18n.ts:

   • Created a central configuration file at src/renderer/i18n.ts. This file:
     • Loads the translation files (like en.json).
     • Automatically sets the app's starting language based on the user's browser language.
     • Sets English (fallbackLocale: 'en') as the default language if the browser's language is not supported.

4. Integrated into Vue App:

   • The i18n instance was integrated into the app's main entry point (src/renderer/main.ts) using the .use(i18n) directive, making translation functions available globally.

5. Converted UI to Dynamic Translations:

   • All hard-coded text (headers, paragraphs, button labels, error messages, etc.) in SetupUI.vue was replaced with the t('key') function.
   • Dynamic text (e.g., "Detected: 4 cores") and pluralization (e.g., "Core/Cores") are now correctly managed using vue-i18n's parameters and pluralization features.

How to Add a New Language

As requested, I am only leaving the English language pack as the base. To add a new language (e.g., German - de), you just need to follow these steps:

1. Create a new file: Copy en.json and create de.json in the src/renderer/locales/ directory.
2. Translate the values: Open de.json and translate the values from English to German, using the keys from en.json as a reference.
3. Register the language: Open src/renderer/i18n.ts and make these two small changes:
   • Add the import line: import de from './locales/de.json';
   • Add the language to the messages object: de,

[gabrielecabrini]

I think you should translate the comments in createI18n

[MegaLodonn0]

I think you should translate the comments in createI18n

Thanks for feedback. I had accidentally left some Turkish comments in my code. I've just pushed an update.

[MegaLodonn0]

Added support for 5 different languages.

[Levev]

Nice addition, thank you for your time working on this!

I'll be converting this PR to a draft to reflect that it's still in progress, but great job so far!

[Levev]

I think we should focus on laying the groundwork for i18n for now, and adding translations as separate PRs in the future.

Keeping changes logically grouped in separate PRs is a good practice which helps us maintainers out tremendously.