Initial Settings UI work

src/renderer/index.ts

@@ -1,3 +1,4 @@
 import "./fixes";
+import "./ui/patchSettings";
 
 console.log("read if cute :3");

src/renderer/settings.ts

@@ -0,0 +1,28 @@
+import type { Settings as TSettings } from "shared/settings";
+import { makeChangeListenerProxy } from "shared/utils/makeChangeListenerProxy";
+import { Common } from "./vencord";
+
+const signals = new Set<() => void>();
+
+export const PlainSettings = VencordDesktop.settings.get() as TSettings;
+export const Settings = makeChangeListenerProxy(PlainSettings, s => {
+    VencordDesktop.settings.set(s);
+    signals.forEach(fn => fn());
+});
+
+export function useSettings() {
+    const [, update] = Common.React.useReducer(x => x + 1, 0);
+    Common.React.useEffect(() => {
+        signals.add(update);
+        return () => signals.delete(update);
+    }, []);
+
+    return Settings;
+}
+
+export function getValueAndOnChange(key: keyof TSettings) {
+    return {
+        value: Settings[key] as any,
+        onChange: (value: any) => Settings[key] = value
+    };
+}

src/renderer/ui/Settings.tsx

@@ -0,0 +1,36 @@
+import { getValueAndOnChange, useSettings } from "renderer/settings";
+import { Common } from "../vencord";
+
+export default function SettingsUi() {
+    const Settings = useSettings();
+    const { Forms: { FormSection, FormText, FormDivider, FormSwitch, FormTitle }, Text, Select } = Common;
+
+    return (
+        <FormSection>
+            <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
+                Vencord Desktop Settings
+            </Text>
+
+            <FormTitle>Discord Branch</FormTitle>
+            <Select
+                placeholder="Stable"
+                options={[
+                    { label: "Stable", value: "stable", default: true },
+                    { label: "Canary", value: "canary" },
+                    { label: "PTB", value: "ptb" },
+                ]}
+                closeOnSelect={true}
+                select={v => Settings.discordBranch = v}
+                isSelected={v => v === Settings.discordBranch}
+                serialize={s => s}
+            />
+
+            <FormSwitch
+                {...getValueAndOnChange("openLinksWithElectron")}
+                note={"This will open links in a new window instead of your WebBrowser"}
+            >
+                Open Links in app
+            </FormSwitch>
+        </FormSection>
+    );
+}

src/renderer/ui/patchSettings.ts

@@ -0,0 +1,15 @@
+import { monkeyPatch } from "../../shared/utils/monkeyPatch";
+import { Common, plugins } from "../vencord";
+import Settings from "./Settings";
+
+monkeyPatch(plugins.Settings, "makeSettingsCategories", function (this: unknown, original, { ID }: { ID: Record<string, unknown>; }) {
+    const cats = original.call(this, { ID });
+    cats.splice(1, 0, {
+        section: "VencordDesktop",
+        label: "Desktop Settings",
+        element: Settings,
+        onClick: () => Common.SettingsRouter.open("VencordDesktop")
+    });
+
+    return cats;
+});

src/renderer/vencord.ts

@@ -0,0 +1,12 @@
+// TODO: Taaaips when?
+
+const { Webpack, Plugins } = Vencord;
+const { Common } = Webpack;
+const { plugins } = Plugins;
+
+export {
+    Webpack,
+    Common,
+    Plugins,
+    plugins
+};