add settings page with install from URL option

2 files changed, 49 insertions, 0 deletions

diff --git a/frontend/src/components/settings/index.tsx b/frontend/src/components/settings/index.tsx
new file mode 100644
index 00000000..d4799fa9
--- /dev/null
+++ b/frontend/src/components/settings/index.tsx
@@ -0,0 +1,19 @@
+import { SidebarNavigation } from 'decky-frontend-lib';
+
+import GeneralSettings from './pages/GeneralSettings';
+
+export default function SettingsPage() {
+  return (
+    <SidebarNavigation
+      title="Decky Settings"
+      showTitle
+      pages={[
+        {
+          title: 'General',
+          content: <GeneralSettings />,
+          route: '/decky/settings/general',
+        },
+      ]}
+    />
+  );
+}
diff --git a/frontend/src/components/settings/pages/GeneralSettings.tsx b/frontend/src/components/settings/pages/GeneralSettings.tsx
new file mode 100644
index 00000000..1cc8076d
--- /dev/null
+++ b/frontend/src/components/settings/pages/GeneralSettings.tsx
@@ -0,0 +1,30 @@
+import { DialogButton, Field, TextField } from 'decky-frontend-lib';
+import { useState } from 'react';
+import { FaShapes } from 'react-icons/fa';
+
+import { installFromURL } from '../../store/Store';
+
+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> */}
+      <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>
+      </Field>
+    </div>
+  );
+}