desktop: add proxy settings (#4196)

apps/desktop/src/api/os-integration.ts

@@ -54,6 +54,14 @@ export const osIntegrationRouter = t.router({
     config.zoomFactor = factor;
   }),
 
+  proxyRules: t.procedure.query(() => config.proxyRules),
+  setProxyRules: t.procedure
+    .input(z.string().optional())
+    .mutation(({ input: proxyRules }) => {
+      globalThis.window?.webContents.session.setProxy({ proxyRules });
+      config.proxyRules = proxyRules || "";
+    }),
+
   privacyMode: t.procedure.query(() => config.privacyMode),
   setPrivacyMode: t.procedure
     .input(z.object({ enabled: z.boolean() }))

apps/desktop/src/utils/config.ts

@@ -41,7 +41,8 @@ export const config = {
   isSpellCheckerEnabled: true,
   zoomFactor: 1,
   theme: nativeTheme.themeSource,
-  automaticUpdates: true
+  automaticUpdates: true,
+  proxyRules: ""
 };
 
 type ConfigKey = keyof typeof config;

apps/web/src/dialogs/settings/index.tsx

@@ -36,7 +36,8 @@ import {
   Privacy,
   Pro,
   ShieldLock,
-  Sync
+  Sync,
+  Proxy
 } from "../../components/icons";
 import { Perform } from "../../common/dialog-controller";
 import NavigationItem from "../../components/navigation-menu/navigation-item";
@@ -65,7 +66,6 @@ import {
 import { AppearanceSettings } from "./appearance-settings";
 import { debounce } from "@notesnook/common";
 import { SubscriptionSettings } from "./subscription-settings";
-import { alpha } from "@theme-ui/color";
 import { ScopedThemeProvider } from "../../components/theme-provider";
 
 type SettingsDialogProps = { onClose: Perform };

apps/web/src/dialogs/settings/privacy-settings.ts

@@ -115,7 +115,7 @@ What data is collected & when?`,
         key: "custom-cors",
         title: "Custom CORS proxy",
         description:
-          "CORS proxy is required to directly download images from within the Notesnook app. It allows Notesnook to bypass browser restrictions by using a proxy. You can set a custom self-hosted proxy URL to increase your privacy",
+          "CORS proxy is required to directly download images from within the Notesnook app. It allows Notesnook to bypass browser restrictions by using a proxy. You can set a custom self-hosted proxy URL to increase your privacy.",
         onStateChange: (listener) =>
           useSettingStore.subscribe((s) => s.telemetry, listener),
         components: [
@@ -144,6 +144,30 @@ What data is collected & when?`,
             variant: "secondary"
           }
         ]
+      },
+      {
+        key: "proxy-config",
+        title: "Proxy",
+        description: `Setup an HTTP/HTTPS/SOCKS proxy.
+        
+For example:
+http://foobar:80
+socks4://proxy.example.com
+http://username:password@foobar:80
+
+To remove the proxy, simply erase everything in the input.`,
+        onStateChange: (listener) =>
+          useSettingStore.subscribe((c) => c.proxyRules, listener),
+        components: [
+          {
+            type: "input",
+            inputType: "text",
+            defaultValue: () => useSettingStore.getState().proxyRules || "",
+            onChange: (value) => {
+              useSettingStore.getState().setProxyRules(value);
+            }
+          }
+        ]
       }
     ]
   }

apps/web/src/stores/setting-store.js

@@ -58,6 +58,10 @@ class SettingStore extends BaseStore {
   desktopIntegrationSettings = undefined;
   autoUpdates = true;
   isFlatpak = false;
+  /**
+   * @type {string|undefined}
+   */
+  proxyRules = undefined;
 
   refresh = async () => {
     this.set({
@@ -70,7 +74,8 @@ class SettingStore extends BaseStore {
         await desktop?.integration.desktopIntegration.query(),
       privacyMode: await desktop?.integration.privacyMode.query(),
       zoomFactor: await desktop?.integration.zoomFactor.query(),
-      autoUpdates: await desktop?.updater.autoUpdates.query()
+      autoUpdates: await desktop?.updater.autoUpdates.query(),
+      proxyRules: await desktop.integration.proxyRules.query()
     });
   };
 
@@ -99,6 +104,11 @@ class SettingStore extends BaseStore {
     this.set({ zoomFactor });
   };
 
+  setProxyRules = async (proxyRules) => {
+    await desktop?.integration.setProxyRules.mutate(proxyRules);
+    this.set({ proxyRules });
+  };
+
   setEncryptBackups = (encryptBackups) => {
     this.set({ encryptBackups });
     Config.set("encryptBackups", encryptBackups);