fix: version is no longer missing from plugin list (#417)v2.7.0-pre1v2.7.0

3 files changed, 45 insertions, 22 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 4871c7cf..630f4230 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,7 @@
     }
   },
   "dependencies": {
-    "decky-frontend-lib": "^3.20.4",
+    "decky-frontend-lib": "3.20.5",
     "react-file-icon": "^1.3.0",
     "react-icons": "^4.8.0",
     "react-markdown": "^8.0.6",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 02ad974d..f09d2ed2 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -2,8 +2,8 @@ lockfileVersion: '6.0'
 
 dependencies:
   decky-frontend-lib:
-    specifier: ^3.20.4
-    version: 3.20.4
+    specifier: 3.20.5
+    version: 3.20.5
   react-file-icon:
     specifier: ^1.3.0
     version: 1.3.0(react-dom@16.14.0)(react@16.14.0)
@@ -832,8 +832,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001473
-      electron-to-chromium: 1.4.349
+      caniuse-lite: 1.0.30001474
+      electron-to-chromium: 1.4.352
       node-releases: 2.0.10
       update-browserslist-db: 1.0.10(browserslist@4.21.5)
     dev: true
@@ -873,8 +873,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /caniuse-lite@1.0.30001473:
-    resolution: {integrity: sha512-ewDad7+D2vlyy+E4UJuVfiBsU69IL+8oVmTuZnH5Q6CIUbxNfI50uVpRHbUPDD6SUaN2o0Lh4DhTrvLG/Tn1yg==}
+  /caniuse-lite@1.0.30001474:
+    resolution: {integrity: sha512-iaIZ8gVrWfemh5DG3T9/YqarVZoYf0r188IjaGwx68j4Pf0SGY6CQkmJUIE+NZHkkecQGohzXmBGEwWDr9aM3Q==}
     dev: true
 
   /ccount@2.0.1:
@@ -1007,8 +1007,8 @@ packages:
     dependencies:
       ms: 2.1.2
 
-  /decky-frontend-lib@3.20.4:
-    resolution: {integrity: sha512-DJgVonmk3lmRc/9w2FM/CE2WXlsl2E9bbEYl9FMtiptQmMJCkrBqoQM49J4QpEYdn9akHYYw/wcGa56/zJupOw==}
+  /decky-frontend-lib@3.20.5:
+    resolution: {integrity: sha512-aXllFYhWovoiyBHNzH8PW9EYgXotY9ysuU9icFNgrOWFotyJV+2KGLnfYEyBlDNiexKvXKVRKPw1gRFX2hP4AQ==}
     dev: false
 
   /decode-named-character-reference@1.0.2:
@@ -1064,8 +1064,8 @@ packages:
       path-type: 4.0.0
     dev: true
 
-  /electron-to-chromium@1.4.349:
-    resolution: {integrity: sha512-34LBfVDiL6byWorSmQOPwq4gD5wpN8Mhh5yPGQr67FbcxsfUS0BDJP9y6RykSgeWVUfSkN/2dChywnsrmKVyUg==}
+  /electron-to-chromium@1.4.352:
+    resolution: {integrity: sha512-ikFUEyu5/q+wJpMOxWxTaEVk2M1qKqTGKKyfJmod1CPZxKfYnxVS41/GCBQg21ItBpZybyN8sNpRqCUGm+Zc4Q==}
     dev: true
 
   /emoji-regex@8.0.0:
diff --git a/frontend/src/components/settings/pages/plugin_list/index.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx
index d9a85e9f..ac954601 100644
--- a/frontend/src/components/settings/pages/plugin_list/index.tsx
+++ b/frontend/src/components/settings/pages/plugin_list/index.tsx
@@ -10,22 +10,34 @@ import {
   showContextMenu,
 } from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
-import { FaDownload, FaEllipsisH } from 'react-icons/fa';
+import { FaDownload, FaEllipsisH, FaRecycle } from 'react-icons/fa';
 
-import { StorePluginVersion, requestPluginInstall } from '../../../../store';
+import { StorePluginVersion, getPluginList, requestPluginInstall } from '../../../../store';
 import { useSetting } from '../../../../utils/hooks/useSetting';
 import { useDeckyState } from '../../../DeckyState';
 
+function labelToName(pluginLabel: string, pluginVersion?: string): string {
+  return pluginVersion ? pluginLabel.substring(0, pluginLabel.indexOf(` - ${pluginVersion}`)) : pluginLabel;
+}
+
+async function reinstallPlugin(pluginName: string, currentVersion?: string) {
+  const serverData = await getPluginList();
+  const remotePlugin = serverData?.find((x) => x.name == pluginName);
+  if (remotePlugin && remotePlugin.versions?.length > 0) {
+    const currentVersionData = remotePlugin.versions.find((version) => version.name == currentVersion);
+    if (currentVersionData) requestPluginInstall(pluginName, currentVersionData);
+  }
+}
+
 function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
   const data = props.entry.data;
+  let pluginName = labelToName(props.entry.label, data?.version);
 
   const showCtxMenu = (e: MouseEvent | GamepadEvent) => {
     showContextMenu(
       <Menu label="Plugin Actions">
-        <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(props.entry.label, data?.version)}>
-          Reload
-        </MenuItem>
-        <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(props.entry.label)}>Uninstall</MenuItem>
+        <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(pluginName, data?.version)}>Reload</MenuItem>
+        <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(pluginName)}>Uninstall</MenuItem>
       </Menu>,
       e.currentTarget ?? window,
     );
@@ -33,17 +45,28 @@ function PluginInteractables(props: { entry: ReorderableEntry<PluginData> }) {
 
   return (
     <>
-      {data?.update && (
+      {data?.update ? (
         <DialogButton
           style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-          onClick={() => requestPluginInstall(props.entry.label, data?.update as StorePluginVersion)}
-          onOKButton={() => requestPluginInstall(props.entry.label, data?.update as StorePluginVersion)}
+          onClick={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion)}
+          onOKButton={() => requestPluginInstall(pluginName, data?.update as StorePluginVersion)}
         >
           <div style={{ display: 'flex', flexDirection: 'row' }}>
             Update to {data?.update?.name}
             <FaDownload style={{ paddingLeft: '2rem' }} />
           </div>
         </DialogButton>
+      ) : (
+        <DialogButton
+          style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
+          onClick={() => reinstallPlugin(pluginName, data?.version)}
+          onOKButton={() => reinstallPlugin(pluginName, data?.version)}
+        >
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
+            Reinstall
+            <FaRecycle style={{ paddingLeft: '5.3rem' }} />
+          </div>
+        </DialogButton>
       )}
       <DialogButton
         style={{ height: '40px', width: '40px', padding: '10px 12px', minWidth: '40px' }}
@@ -78,7 +101,7 @@ export default function PluginList() {
     setPluginEntries(
       plugins.map((plugin) => {
         return {
-          label: plugin.name,
+          label: plugin.version ? `${plugin.name} - ${plugin.version}` : plugin.name,
           data: {
             update: updates?.get(plugin.name),
             version: plugin.version,
@@ -98,7 +121,7 @@ export default function PluginList() {
   }
 
   function onSave(entries: ReorderableEntry<PluginData>[]) {
-    const newOrder = entries.map((entry) => entry.label);
+    const newOrder = entries.map((entry) => labelToName(entry.label, entry?.data?.version));
     console.log(newOrder);
     setPluginOrder(newOrder);
     setPluginOrderSetting(newOrder);