3 files changed, 128 insertions, 10 deletions
diff --git a/frontend/src/components/modals/PluginInstallModal.tsx b/frontend/src/components/modals/PluginInstallModal.tsx
index 7f0683ee..0e8e3d47 100644
--- a/frontend/src/components/modals/PluginInstallModal.tsx
+++ b/frontend/src/components/modals/PluginInstallModal.tsx
@@ -1,18 +1,31 @@
 import { ConfirmModal, Navigation, QuickAccessTab } from 'decky-frontend-lib';
 import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import TPluginInstallModal, { TranslatedPart } from './TPluginInstallModal';
 
 interface PluginInstallModalProps {
   artifact: string;
   version: string;
   hash: string;
-  // reinstall: boolean;
+  installType: number;
   onOK(): void;
   onCancel(): void;
   closeModal?(): void;
 }
 
-const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, hash, onOK, onCancel, closeModal }) => {
+const PluginInstallModal: FC<PluginInstallModalProps> = ({
+  artifact,
+  version,
+  hash,
+  installType,
+  onOK,
+  onCancel,
+  closeModal,
+}) => {
   const [loading, setLoading] = useState<boolean>(false);
+  const { t } = useTranslation();
+
   return (
     <ConfirmModal
       bOKDisabled={loading}
@@ -26,14 +39,22 @@ const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, ha
       onCancel={async () => {
         await onCancel();
       }}
-      strTitle={`Install ${artifact}`}
-      strOKButtonText={loading ? 'Installing' : 'Install'}
+      strTitle={<TPluginInstallModal trans_part={TranslatedPart.TITLE} trans_type={installType} artifact={artifact} />}
+      strOKButtonText={
+        loading ? (
+          <TPluginInstallModal trans_part={TranslatedPart.BUTTON_PROC} trans_type={installType} />
+        ) : (
+          <TPluginInstallModal trans_part={TranslatedPart.BUTTON_IDLE} trans_type={installType} />
+        )
+      }
     >
-      Are you sure you want to install {artifact}
-      {version ? ` ${version}` : ''}?
-      {hash == 'False' && (
-        <span style={{ color: 'red' }}> This plugin does not have a hash, you are installing it at your own risk.</span>
-      )}
+      <TPluginInstallModal
+        trans_part={TranslatedPart.DESC}
+        trans_type={installType}
+        artifact={artifact}
+        version={version ? version : ''}
+      />
+      {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
new file mode 100644
index 00000000..3866560e
--- /dev/null
+++ b/frontend/src/components/modals/TPluginInstallModal.tsx
@@ -0,0 +1,95 @@
+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;
diff --git a/frontend/src/components/modals/filepicker/index.tsx b/frontend/src/components/modals/filepicker/index.tsx
index ec3fc260..629f4ec5 100644
--- a/frontend/src/components/modals/filepicker/index.tsx
+++ b/frontend/src/components/modals/filepicker/index.tsx
@@ -2,6 +2,7 @@ import { DialogButton, Focusable, SteamSpinner, TextField } from 'decky-frontend
 import { useEffect } from 'react';
 import { FunctionComponent, useState } from 'react';
 import { FileIcon, defaultStyles } from 'react-file-icon';
+import { useTranslation } from 'react-i18next';
 import { FaArrowUp, FaFolder } from 'react-icons/fa';
 
 import Logger from '../../../logger';
@@ -47,6 +48,7 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
   onSubmit,
   closeModal,
 }) => {
+  const { t } = useTranslation();
   if (startPath.endsWith('/')) startPath = startPath.substring(0, startPath.length - 1); // remove trailing path
   const [path, setPath] = useState<string>(startPath);
   const [listing, setListing] = useState<FileListing>({ files: [], realpath: path });
@@ -158,7 +160,7 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
             closeModal?.();
           }}
         >
-          Use this folder
+          {t('FilePickerIndex.folder.select')}
         </DialogButton>
       )}
     </div>