Add plugin updater, notification badge, fixes

frontend/src/components/settings/pages/general/RemoteDebugging.tsx

@@ -1,4 +1,4 @@
-import { Field, ToggleField } from 'decky-frontend-lib';
+import { Field, Toggle } from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
 import { FaBug } from 'react-icons/fa';
 
@@ -21,8 +21,8 @@ export default function RemoteDebuggingSettings() {
       }
       icon={<FaBug style={{ display: 'block' }} />}
     >
-      <ToggleField
-        checked={allowRemoteDebugging}
+      <Toggle
+        value={allowRemoteDebugging}
         onChange={(toggleValue) => {
           setAllowRemoteDebugging(toggleValue);
           if (toggleValue) window.DeckyPluginLoader.callServerMethod('allow_remote_debugging');

frontend/src/components/settings/pages/general/index.tsx

@@ -2,7 +2,7 @@ import { DialogButton, Field, TextField } from 'decky-frontend-lib';
 import { useState } from 'react';
 import { FaShapes } from 'react-icons/fa';
 
-import { installFromURL } from '../../../store/Store';
+import { installFromURL } from '../../../../store';
 import RemoteDebuggingSettings from './RemoteDebugging';
 import UpdaterSettings from './Updater';
 

frontend/src/components/settings/pages/plugin_list/index.tsx

@@ -1,10 +1,16 @@
-import { DialogButton, Menu, MenuItem, showContextMenu, staticClasses } from 'decky-frontend-lib';
-import { FaEllipsisH } from 'react-icons/fa';
+import { DialogButton, Focusable, Menu, MenuItem, showContextMenu } from 'decky-frontend-lib';
+import { useEffect } from 'react';
+import { FaDownload, FaEllipsisH } from 'react-icons/fa';
 
+import { requestPluginInstall } from '../../../../store';
 import { useDeckyState } from '../../../DeckyState';
 
 export default function PluginList() {
-  const { plugins } = useDeckyState();
+  const { plugins, updates } = useDeckyState();
+
+  useEffect(() => {
+    window.DeckyPluginLoader.checkPluginUpdates();
+  }, []);
 
   if (plugins.length === 0) {
     return (
@@ -16,27 +22,45 @@ export default function PluginList() {
 
   return (
     <ul style={{ listStyleType: 'none' }}>
-      {plugins.map(({ name }) => (
-        <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          <span>{name}</span>
-          <div className={staticClasses.Title} style={{ marginLeft: 'auto', boxShadow: 'none' }}>
-            <DialogButton
-              style={{ height: '40px', width: '40px', padding: '10px 12px' }}
-              onClick={(e: MouseEvent) =>
-                showContextMenu(
-                  <Menu label="Plugin Actions">
-                    <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(name)}>Reload</MenuItem>
-                    <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(name)}>Uninstall</MenuItem>
-                  </Menu>,
-                  e.currentTarget ?? window,
-                )
-              }
-            >
-              <FaEllipsisH />
-            </DialogButton>
-          </div>
-        </li>
-      ))}
+      {plugins.map(({ name, version }) => {
+        const update = updates?.get(name);
+        return (
+          <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: '10px' }}>
+            <span>
+              {name} {version}
+            </span>
+            <Focusable style={{ marginLeft: 'auto', boxShadow: 'none', display: 'flex', justifyContent: 'right' }}>
+              {update && (
+                <DialogButton
+                  style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
+                  onClick={() => requestPluginInstall(name, update)}
+                >
+                  <div style={{ display: 'flex', flexDirection: 'row' }}>
+                    Update to {update.name}
+                    <FaDownload style={{ paddingLeft: '2rem' }} />
+                  </div>
+                </DialogButton>
+              )}
+              <DialogButton
+                style={{ height: '40px', width: '40px', padding: '10px 12px', minWidth: '40px' }}
+                onClick={(e: MouseEvent) =>
+                  showContextMenu(
+                    <Menu label="Plugin Actions">
+                      <MenuItem onSelected={() => window.DeckyPluginLoader.importPlugin(name, version)}>
+                        Reload
+                      </MenuItem>
+                      <MenuItem onSelected={() => window.DeckyPluginLoader.uninstallPlugin(name)}>Uninstall</MenuItem>
+                    </Menu>,
+                    e.currentTarget ?? window,
+                  )
+                }
+              >
+                <FaEllipsisH />
+              </DialogButton>
+            </Focusable>
+          </li>
+        );
+      })}
     </ul>
   );
 }