Better install process UX, fix reinstallingv2.0.4-afb2c7c-pre

3 files changed, 56 insertions, 19 deletions

diff --git a/frontend/src/components/modals/PluginInstallModal.tsx b/frontend/src/components/modals/PluginInstallModal.tsx
new file mode 100644
index 00000000..992ce748
--- /dev/null
+++ b/frontend/src/components/modals/PluginInstallModal.tsx
@@ -0,0 +1,42 @@
+import { ModalRoot, QuickAccessTab, Router, Spinner, sleep, staticClasses } from 'decky-frontend-lib';
+import { FC, useState } from 'react';
+
+interface PluginInstallModalProps {
+  artifact: string;
+  version: string;
+  hash: string;
+  // reinstall: boolean;
+  onOK(): void;
+  onCancel(): void;
+  closeModal?(): void;
+}
+
+const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, hash, onOK, onCancel, closeModal }) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  return (
+    <ModalRoot
+      bOKDisabled={loading}
+      closeModal={closeModal}
+      onOK={async () => {
+        setLoading(true);
+        await onOK();
+        Router.NavigateBackOrOpenMenu();
+        await sleep(250);
+        setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
+      }}
+      onCancel={async () => {
+        await onCancel();
+      }}
+    >
+      <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
+        {hash == 'False' ? <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3> : null}
+        <div style={{ flexDirection: 'row' }}>
+          {loading && <Spinner style={{ width: '20px' }} />} {loading ? 'Installing' : 'Install'} {artifact}
+          {version ? ' version ' + version : null}?
+        </div>
+      </div>
+    </ModalRoot>
+  );
+};
+
+export default PluginInstallModal;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 364ccb1b..188c1330 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -21,7 +21,7 @@ window.importDeckyPlugin = function (name: string) {
 window.syncDeckyPlugins = async function () {
   const plugins = await (await fetch('http://127.0.0.1:1337/plugins')).json();
   for (const plugin of plugins) {
-    window.DeckyPluginLoader?.importPlugin(plugin);
+    if (!window.DeckyPluginLoader.hasPlugin(plugin)) window.DeckyPluginLoader?.importPlugin(plugin);
   }
 };
 
diff --git a/frontend/src/plugin-loader.tsx b/frontend/src/plugin-loader.tsx
index 02febcdb..98cb3c06 100644
--- a/frontend/src/plugin-loader.tsx
+++ b/frontend/src/plugin-loader.tsx
@@ -1,8 +1,9 @@
-import { ModalRoot, QuickAccessTab, Router, showModal, sleep, staticClasses } from 'decky-frontend-lib';
+import { ModalRoot, QuickAccessTab, showModal, staticClasses } from 'decky-frontend-lib';
 import { FaPlug } from 'react-icons/fa';
 
 import { DeckyState, DeckyStateContextProvider } from './components/DeckyState';
 import LegacyPlugin from './components/LegacyPlugin';
+import PluginInstallModal from './components/modals/PluginInstallModal';
 import PluginView from './components/PluginView';
 import SettingsPage from './components/settings';
 import StorePage from './components/store/Store';
@@ -55,23 +56,13 @@ class PluginLoader extends Logger {
 
   public addPluginInstallPrompt(artifact: string, version: string, request_id: string, hash: string) {
     showModal(
-      <ModalRoot
-        onOK={async () => {
-          await this.callServerMethod('confirm_plugin_install', { request_id });
-          Router.NavigateBackOrOpenMenu();
-          await sleep(250);
-          setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
-        }}
-        onCancel={() => {
-          this.callServerMethod('cancel_plugin_install', { request_id });
-        }}
-      >
-        <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
-          {hash == 'False' ? <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3> : null}
-          Install {artifact}
-          {version ? ' version ' + version : null}?
-        </div>
-      </ModalRoot>,
+      <PluginInstallModal
+        artifact={artifact}
+        version={version}
+        hash={hash}
+        onOK={() => this.callServerMethod('confirm_plugin_install', { request_id })}
+        onCancel={() => this.callServerMethod('cancel_plugin_install', { request_id })}
+      />,
     );
   }
 
@@ -97,6 +88,10 @@ class PluginLoader extends Logger {
     );
   }
 
+  public hasPlugin(name: string) {
+    return Boolean(this.plugins.find((plugin) => plugin.name == name));
+  }
+
   public dismountAll() {
     for (const plugin of this.plugins) {
       this.log(`Dismounting ${plugin.name}`);