modals fully translated

src/renderer/components/modal/modal-types/guard-modal.component.tsx

@@ -3,10 +3,12 @@ import { useState } from "react";
 import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png"
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
     const [guardCode, setGuardCode] = useState('');
+    const t = useTranslation();
 
     const login = () => {
       if(!guardCode){ return; }
@@ -15,15 +17,15 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); login();}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Steam Guard</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.guard.title")}</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <div className="mb-4">
-            <label className="block font-bold tracking-wide text-gray-800 dark:text-gray-200" htmlFor="guard">Guard Code</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder="Enter your Guard code"/>
+            <label className="block font-bold tracking-wide text-gray-800 dark:text-gray-200" htmlFor="guard">{t("modals.guard.inputs.guard-code.label")}</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder={t("modals.guard.inputs.guard-code.placeholder")}/>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Login"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text={t("misc.cancel")}/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text={t("modals.guard.buttons.submit")}/>
         </div>
     </form>
   )

src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx

@@ -1,21 +1,22 @@
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { ModalExitCode, ModalResponse } from "renderer/services/modale.service";
 import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png"
 
 export function InstallationFolderModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
-
+   const t = useTranslation();
 
   return (
     <>
         <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">installation folder</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.install-folder.title")}</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
-        <p className="max-w-sm text-gray-800 dark:text-gray-200">Changing the default installation folder for Beat Saber instances will cause all installed data to be moved to the new folder.</p>
+        <p className="max-w-sm text-gray-800 dark:text-gray-200">{t("modals.install-folder.description")}</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="Choose Folder"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="modals.install-folder.buttons.submit"/>
         </div>
     </>
   )

src/renderer/components/modal/modal-types/login-modal.component.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { ModalExitCode, ModalResponse } from "renderer/services/modale.service";
 import BeatImpatient from '../../../../../assets/images/apngs/beat-impatient.png'
 
@@ -9,6 +10,7 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [stay, setStay] = useState(true);
+    const t = useTranslation();
 
     const loggin = () => {
         if(!username || !password){ return; }
@@ -17,23 +19,23 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); loggin();}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Steam Login</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.steam-login.title")}</h1>
         <BsmImage className="mx-auto h-20" image={BeatImpatient} />
         <div className="mb-2">
-            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">Username</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
+            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">{t("modals.steam-login.inputs.username.label")}</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder={t("modals.steam-login.inputs.username.placeholder")}/>
         </div>
         <div className="mb-2">
-            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">Password</label>
-            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
+            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">{t("modals.steam-login.inputs.password.label")}</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder={t("modals.steam-login.inputs.password.placeholder")}/>
         </div>
         <div className="flex items-center content-center justify-start mb-3">
             <input onChange={e => setStay(e.target.checked)} checked={stay} className="mr-1" type="checkbox" name="stay" id="stay" />
-            <label className="cursor-pointer text-gray-800 dark:text-gray-200" htmlFor="stay">Stay connected</label>
+            <label className="cursor-pointer text-gray-800 dark:text-gray-200" htmlFor="stay">{t("modals.steam-login.inputs.stay.label")}</label>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Login"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text={t("modals.steam-login.buttons.submit")}/>
         </div>
     </form>
   )

src/renderer/components/modal/modal-types/uninstall-modal.component.tsx

@@ -3,19 +3,21 @@ import BeatConflict from "../../../../../assets/images/apngs/beat-conflict.png"
 import { BSVersion } from "main/services/bs-version-manager.service";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
 import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function UninstallModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
     const version = ModalService.getInsance().getModalData<BSVersion>();
+    const t = useTranslation();
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Uninstall</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">{t("modals.bs-uninstall.title")}</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
-        <p className="max-w-sm text-gray-800 dark:text-gray-200">Are you sure you want to uninstall BeatSaber {version.BSVersion} ? You will have to re-download it to play it.</p>
+        <p className="max-w-sm text-gray-800 dark:text-gray-200">{t("modals.bs-uninstall.description", {version: version.BSVersion})}</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
-            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
-            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Uninstall"/>
+            <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="misc.cancel"/>
+            <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="modals.bs-uninstall.buttons.submit"/>
         </div>
     </form>
   )

src/renderer/hooks/use-translation.hook.ts

@@ -1,12 +1,11 @@
 import { I18nService } from "renderer/services/i18n.service"
 
-export function useTranslation(): (translationKey: string) => string{
+export function useTranslation(): (translationKey: string, args?: Record<string, string>) => string{
    
    const i18nService = I18nService.getInstance();
 
-   return (key: string) => {
-      if(!key){ return ""; }
+   return (key: string, args?: Record<string, string>) => {
       const tranlatables = key.split(" ");
-      return tranlatables.map((key) => i18nService.translate(key)).join(" ");
+      return tranlatables.map((key) => i18nService.translate(key, args)).join(" ");
    }
 }

src/renderer/services/i18n.service.ts

@@ -44,12 +44,14 @@ export class I18nService {
       this.configService.set("language" as DefaultConfigKey, this.getSupportedLanguages().includes(lang) ? lang : this.LANG_FALLBACK);
    }
 
-   public translate(translationKey: string): string{
-      const cachedTranlation = this.cache.get(translationKey);
-      if(!!cachedTranlation){ return cachedTranlation; }
-      const tranlated = getProperty(this.dictionary, translationKey);
-      tranlated && this.cache.set(translationKey, tranlated);
-      return tranlated || translationKey;
+   public translate(translationKey: string, args?: Record<string, string>): string{
+      let translated = this.cache.get(translationKey);
+      if(!translated){
+         translated = getProperty(this.dictionary, translationKey);
+         translated ? this.cache.set(translated, translationKey) : translated = translationKey;
+      }
+      args && Object.keys(args).forEach(key => translated = translated.replaceAll(`{${key}}`, args[key]));
+      return translated;
    }