Unified translation classes, fixed missing toaster translation and improved the error styling report.

2 files changed, 36 insertions, 105 deletions

diff --git a/frontend/src/components/modals/PluginInstallModal.tsx b/frontend/src/components/modals/PluginInstallModal.tsx
index 0e8e3d47..b37dbc65 100644
--- a/frontend/src/components/modals/PluginInstallModal.tsx
+++ b/frontend/src/components/modals/PluginInstallModal.tsx
@@ -2,7 +2,7 @@ import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import TPluginInstallModal, { TranslatedPart } from './TPluginInstallModal';
+import TranslationHelper, { TranslationClass } from '../../utils/TranslationHelper';
 
 interface PluginInstallModalProps {
   artifact: string;
@@ -39,21 +39,47 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({
       onCancel={async () => {
         await onCancel();
       }}
-      strTitle={<TPluginInstallModal trans_part={TranslatedPart.TITLE} trans_type={installType} artifact={artifact} />}
+      strTitle={
+        <div>
+          <TranslationHelper
+            trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+            trans_text="title"
+            i18n_args={{ artifact: artifact }}
+            install_type={installType}
+          />
+        </div>
+      }
       strOKButtonText={
         loading ? (
-          <TPluginInstallModal trans_part={TranslatedPart.BUTTON_PROC} trans_type={installType} />
+          <div>
+            <TranslationHelper
+              trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+              trans_text="button_processing"
+              install_type={installType}
+            />
+          </div>
         ) : (
-          <TPluginInstallModal trans_part={TranslatedPart.BUTTON_IDLE} trans_type={installType} />
+          <div>
+            <TranslationHelper
+              trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+              trans_text="button_idle"
+              install_type={installType}
+            />
+          </div>
         )
       }
     >
-      <TPluginInstallModal
-        trans_part={TranslatedPart.DESC}
-        trans_type={installType}
-        artifact={artifact}
-        version={version ? version : ''}
-      />
+      <div>
+        <TranslationHelper
+          trans_class={TranslationClass.PLUGIN_INSTALL_MODAL}
+          trans_text="desc"
+          i18n_args={{
+            artifact: artifact,
+            version: version,
+          }}
+          install_type={installType}
+        />
+      </div>
       {hash == 'False' && <span style={{ color: 'red' }}>{t('PluginInstallModal.no_hash')}</span>}
     </ConfirmModal>
   );
diff --git a/frontend/src/components/modals/TPluginInstallModal.tsx b/frontend/src/components/modals/TPluginInstallModal.tsx
deleted file mode 100644
index 3866560e..00000000
--- a/frontend/src/components/modals/TPluginInstallModal.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { FC } from 'react';
-import { Translation } from 'react-i18next';
-
-import { InstallType } from '../../plugin';
-
-export enum TranslatedPart {
-  TITLE,
-  DESC,
-  BUTTON_IDLE,
-  BUTTON_PROC,
-}
-interface TPluginInstallModalProps {
-  trans_part: TranslatedPart;
-  trans_type: number;
-  artifact?: string;
-  version?: string;
-}
-
-const TPluginInstallModal: FC<TPluginInstallModalProps> = ({ trans_part, trans_type, artifact, version }) => {
-  return (
-    <Translation>
-      {(t, {}) => {
-        switch (trans_part) {
-          case TranslatedPart.TITLE:
-            switch (trans_type) {
-              case InstallType.INSTALL:
-                return <div>{t('PluginInstallModal.install.title', { artifact: artifact })}</div>;
-              case InstallType.REINSTALL:
-                return <div>{t('PluginInstallModal.reinstall.title', { artifact: artifact })}</div>;
-              case InstallType.UPDATE:
-                return <div>{t('PluginInstallModal.update.title', { artifact: artifact })}</div>;
-              default:
-                return null;
-            }
-          case TranslatedPart.DESC:
-            switch (trans_type) {
-              case InstallType.INSTALL:
-                return (
-                  <div>
-                    {t('PluginInstallModal.install.desc', {
-                      artifact: artifact,
-                      version: version,
-                    })}
-                  </div>
-                );
-              case InstallType.REINSTALL:
-                return (
-                  <div>
-                    {t('PluginInstallModal.reinstall.desc', {
-                      artifact: artifact,
-                      version: version,
-                    })}
-                  </div>
-                );
-              case InstallType.UPDATE:
-                return (
-                  <div>
-                    {t('PluginInstallModal.update.desc', {
-                      artifact: artifact,
-                      version: version,
-                    })}
-                  </div>
-                );
-              default:
-                return null;
-            }
-          case TranslatedPart.BUTTON_IDLE:
-            switch (trans_type) {
-              case InstallType.INSTALL:
-                return <div>{t('PluginInstallModal.install.button_idle')}</div>;
-              case InstallType.REINSTALL:
-                return <div>{t('PluginInstallModal.reinstall.button_idle')}</div>;
-              case InstallType.UPDATE:
-                return <div>{t('PluginInstallModal.update.button_idle')}</div>;
-              default:
-                return null;
-            }
-          case TranslatedPart.BUTTON_PROC:
-            switch (trans_type) {
-              case InstallType.INSTALL:
-                return <div>{t('PluginInstallModal.install.button_processing')}</div>;
-              case InstallType.REINSTALL:
-                return <div>{t('PluginInstallModal.reinstall.button_processing')}</div>;
-              case InstallType.UPDATE:
-                return <div>{t('PluginInstallModal.update.button_processing')}</div>;
-              default:
-                return null;
-            }
-        }
-      }}
-    </Translation>
-  );
-};
-
-export default TPluginInstallModal;