2 files changed, 120 insertions, 0 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/general/index.tsx b/frontend/src/components/settings/pages/general/index.tsx
new file mode 100644
index 00000000..7dc5cfa4
--- /dev/null
+++ b/frontend/src/components/settings/pages/general/index.tsx
@@ -0,0 +1,34 @@
+import { DialogButton, Field, TextField } from 'decky-frontend-lib';
+import { useState } from 'react';
+import { FaShapes } from 'react-icons/fa';
+
+import { installFromURL } from '../../../store/Store';
+import UpdaterSettings from './Updater';
+
+export default function GeneralSettings() {
+  const [pluginURL, setPluginURL] = useState('');
+  // const [checked, setChecked] = useState(false); // store these in some kind of State instead
+  return (
+    <div>
+      {/* <Field
+        label="A Toggle with an icon"
+        icon={<FaShapes style={{ display: 'block' }} />}
+      >
+        <Toggle
+          value={checked}
+          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 disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
+          Install
+        </DialogButton>
+      </Field>
+    </div>
+  );
+}