Settings API for loader, preview branch select

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

@@ -0,0 +1,33 @@
+import { Dropdown, Field } from 'decky-frontend-lib';
+import { FunctionComponent } from 'react';
+
+import { useSetting } from '../../../../utils/hooks/useSetting';
+
+enum UpdateBranch {
+  Stable,
+  Prerelease,
+  Nightly,
+}
+
+const BranchSelect: FunctionComponent<{}> = () => {
+  const [selectedBranch, setSelectedBranch] = useSetting<UpdateBranch>('branch', UpdateBranch.Prerelease);
+
+  return (
+    <Field label="Update Channel">
+      <Dropdown
+        rgOptions={Object.values(UpdateBranch)
+          .filter((branch) => typeof branch == 'string')
+          .map((branch) => ({
+            label: branch,
+            data: UpdateBranch[branch],
+          }))}
+        selectedOption={selectedBranch}
+        onChange={(newVal) => {
+          setSelectedBranch(newVal.data);
+        }}
+      />
+    </Field>
+  );
+};
+
+export default BranchSelect;

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

@@ -1,15 +1,10 @@
 import { Field, Toggle } from 'decky-frontend-lib';
-import { useEffect, useState } from 'react';
 import { FaBug } from 'react-icons/fa';
 
+import { useSetting } from '../../../../utils/hooks/useSetting';
+
 export default function RemoteDebuggingSettings() {
-  const [allowRemoteDebugging, setAllowRemoteDebugging] = useState<boolean>(false);
-  useEffect(() => {
-    (async () => {
-      const res = (await window.DeckyPluginLoader.callServerMethod('remote_debugging_allowed')) as { result: boolean };
-      setAllowRemoteDebugging(res.result);
-    })();
-  }, []);
+  const [allowRemoteDebugging, setAllowRemoteDebugging] = useSetting<boolean>('cef_forward', false);
 
   return (
     <Field
@@ -22,7 +17,7 @@ export default function RemoteDebuggingSettings() {
       icon={<FaBug style={{ display: 'block' }} />}
     >
       <Toggle
-        value={allowRemoteDebugging}
+        value={allowRemoteDebugging || false}
         onChange={(toggleValue) => {
           setAllowRemoteDebugging(toggleValue);
           if (toggleValue) window.DeckyPluginLoader.callServerMethod('allow_remote_debugging');

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

@@ -6,9 +6,10 @@ import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
 import { useDeckyState } from '../../../DeckyState';
 
 export default function UpdaterSettings() {
+  const { isLoaderUpdating, setIsLoaderUpdating } = useDeckyState();
+
   const [versionInfo, setVersionInfo] = useState<VerInfo | null>(null);
   const [checkingForUpdates, setCheckingForUpdates] = useState<boolean>(false);
-  const { isLoaderUpdating, setIsLoaderUpdating } = useDeckyState();
   const [updateProgress, setUpdateProgress] = useState<number>(-1);
   const [reloading, setReloading] = useState<boolean>(false);
 

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

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { FaShapes } from 'react-icons/fa';
 
 import { installFromURL } from '../../../../store';
+import BranchSelect from './BranchSelect';
 import RemoteDebuggingSettings from './RemoteDebugging';
 import UpdaterSettings from './Updater';
 
@@ -21,6 +22,7 @@ export default function GeneralSettings() {
         />
       </Field> */}
       <UpdaterSettings />
+      <BranchSelect />
       <RemoteDebuggingSettings />
       <Field
         label="Manual plugin install"

frontend/src/utils/hooks/useSetting.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+interface GetSettingArgs<T> {
+  key: string;
+  default: T;
+}
+
+interface SetSettingArgs<T> {
+  key: string;
+  value: T;
+}
+
+export function useSetting<T>(key: string, def: T): [value: T | null, setValue: (value: T) => void] {
+  const [value, setValue] = useState(def);
+  const [ready, setReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    (async () => {
+      const res = (await window.DeckyPluginLoader.callServerMethod('get_setting', {
+        key,
+        default: def,
+      } as GetSettingArgs<T>)) as { result: T };
+      setReady(true);
+      setValue(res.result);
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (ready)
+      (async () => {
+        await window.DeckyPluginLoader.callServerMethod('set_setting', {
+          key,
+          value,
+        } as SetSettingArgs<T>);
+      })();
+  }, [value]);
+
+  return [value, setValue];
+}