6 files changed, 127 insertions, 5 deletions
diff --git a/frontend/src/components/settings/index.tsx b/frontend/src/components/settings/index.tsx
index f9c84c7b..eb3a8bbd 100644
--- a/frontend/src/components/settings/index.tsx
+++ b/frontend/src/components/settings/index.tsx
@@ -1,7 +1,7 @@
 import { SidebarNavigation } from 'decky-frontend-lib';
 
-import GeneralSettings from './pages/GeneralSettings';
-import PluginList from './pages/PluginList';
+import GeneralSettings from './pages/general';
+import PluginList from './pages/plugin_list';
 
 export default function SettingsPage() {
   return (
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();
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 5cf2ed14..364ccb1b 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,8 +1,10 @@
 import PluginLoader from './plugin-loader';
+import { DeckyUpdater } from './updater';
 
 declare global {
   interface Window {
     DeckyPluginLoader: PluginLoader;
+    DeckyUpdater?: DeckyUpdater;
     importDeckyPlugin: Function;
     syncDeckyPlugins: Function;
   }
diff --git a/frontend/src/updater.ts b/frontend/src/updater.ts
new file mode 100644
index 00000000..692a7a70
--- /dev/null
+++ b/frontend/src/updater.ts
@@ -0,0 +1,30 @@
+import { sleep } from 'decky-frontend-lib';
+
+export enum Branches {
+  Release,
+  Prerelease,
+  Nightly,
+}
+
+export interface DeckyUpdater {
+  updateProgress: (val: number) => void;
+  finish: () => void;
+}
+
+export async function callUpdaterMethod(methodName: string, args = {}) {
+  const response = await fetch(`http://127.0.0.1:1337/updater/${methodName}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(args),
+  });
+
+  return response.json();
+}
+
+export async function finishUpdate() {
+  callUpdaterMethod('do_restart');
+  await sleep(3000);
+  location.reload();
+}