3 files changed, 93 insertions, 3 deletions
diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
new file mode 100644
index 00000000..264acca2
--- /dev/null
+++ b/frontend/src/components/settings/pages/general/Updater.tsx
@@ -0,0 +1,86 @@
+import { DialogButton, Field, ProgressBarWithInfo, Spinner, sleep } from 'decky-frontend-lib';
+import { useEffect, useState } from 'react';
+import { FaArrowDown } from 'react-icons/fa';
+
+import { callUpdaterMethod, finishUpdate } from '../../../../updater';
+
+interface VerInfo {
+  current: string;
+  remote: {
+    assets: {
+      browser_download_url: string;
+      created_at: string;
+    }[];
+    name: string;
+    body: string;
+    prerelease: boolean;
+    published_at: string;
+    tag_name: string;
+  } | null;
+  updatable: boolean;
+}
+
+export default function UpdaterSettings() {
+  const [versionInfo, setVersionInfo] = useState<VerInfo | null>(null);
+  const [updateProgress, setUpdateProgress] = useState<number>(-1);
+  const [reloading, setReloading] = useState<boolean>(false);
+  useEffect(() => {
+    (async () => {
+      const res = (await callUpdaterMethod('get_version')) as { result: VerInfo };
+      setVersionInfo(res.result);
+    })();
+  }, []);
+
+  return (
+    <Field
+      label="Updates"
+      description={
+        versionInfo && (
+          <span style={{ whiteSpace: 'pre-line' }}>{`Current version: ${versionInfo.current}\n${
+            versionInfo.updatable ? `Latest version: ${versionInfo.remote?.tag_name}` : ''
+          }`}</span>
+        )
+      }
+      icon={
+        !versionInfo ? (
+          <Spinner style={{ width: '1em', height: 20, display: 'block' }} />
+        ) : (
+          <FaArrowDown style={{ display: 'block' }} />
+        )
+      }
+    >
+      {updateProgress == -1 ? (
+        <DialogButton
+          disabled={
+            !versionInfo?.updatable || !versionInfo?.remote || versionInfo.remote.tag_name == versionInfo.current
+          }
+          onClick={async () => {
+            window.DeckyUpdater = {
+              updateProgress: (i) => {
+                setUpdateProgress(i);
+              },
+              finish: async () => {
+                setUpdateProgress(0);
+                setReloading(true);
+                await finishUpdate();
+              },
+            };
+            setUpdateProgress(0);
+            callUpdaterMethod('do_update');
+          }}
+        >
+          Update
+        </DialogButton>
+      ) : (
+        <ProgressBarWithInfo
+          layout="inline"
+          bottomSeparator={false}
+          nProgress={updateProgress}
+          nTransitionSec={0.01}
+          indeterminate={reloading}
+          sOperationText={reloading ? 'Reloading' : 'Updating'}
+        />
+      )}
+    </Field>
+  );
+}
diff --git a/frontend/src/components/settings/pages/GeneralSettings.tsx b/frontend/src/components/settings/pages/general/index.tsx
index 1cc8076d..7dc5cfa4 100644
--- a/frontend/src/components/settings/pages/GeneralSettings.tsx
+++ b/frontend/src/components/settings/pages/general/index.tsx
@@ -2,7 +2,8 @@ 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/Store';
+import UpdaterSettings from './Updater';
 
 export default function GeneralSettings() {
   const [pluginURL, setPluginURL] = useState('');
@@ -18,12 +19,15 @@ export default function GeneralSettings() {
           onChange={(e) => setChecked(e)}
         />
       </Field> */}
+      <UpdaterSettings />
       <Field
         label="Manual plugin install"
         description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
         icon={<FaShapes style={{ display: 'block' }} />}
       >
-        <DialogButton onClick={() => installFromURL(pluginURL)}>Install</DialogButton>
+        <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
+          Install
+        </DialogButton>
       </Field>
     </div>
   );
diff --git a/frontend/src/components/settings/pages/PluginList.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx
index bf01f85a..a554236a 100644
--- a/frontend/src/components/settings/pages/PluginList.tsx
+++ b/frontend/src/components/settings/pages/plugin_list/index.tsx
@@ -1,7 +1,7 @@
 import { DialogButton, staticClasses } from 'decky-frontend-lib';
 import { FaTrash } from 'react-icons/fa';
 
-import { useDeckyState } from '../../DeckyState';
+import { useDeckyState } from '../../../DeckyState';
 
 export default function PluginList() {
   const { plugins } = useDeckyState();