Native proxy settings by tim2zg · Pull Request #32804 · element-hq/element-web

tim2zg · 2026-03-14T22:47:35Z

Checklist

I have read through review guidelines and CONTRIBUTING.md.
Tests written for new code (and old code if feasible).
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

Half-Shot

Hey, thanks for the contribution! Unfortunately you've caught us in the mid-transition phase to MVVM so the changes are going to need a small shuffle. I think basically this involves moving the component to shared-components, and building up a view model for interfacing with Settings.

The other bits of the code are looking good, thanks for a good start

Half-Shot · 2026-03-16T09:51:46Z

@@ -65,6 +65,7 @@ type ElectronChannel =
    | "userDownloadCompleted"
    | "userDownloadAction"
    | "openDesktopCapturerSourcePicker"
+    | "open_proxy_settings"


This should probably follow the same casing

Suggested change

| "open_proxy_settings"

| "openProxySettings"

Half-Shot · 2026-03-16T09:52:21Z

+    private renderProxySection(): ReactNode {
+        if (!window.electron) return null;
+
+        const config = SettingsStore.getValue("desktopProxyConfig") || { mode: "system" };


Should { mode: "system" } just be a default value of desktopProxyConfig? It does support defaults

Half-Shot · 2026-03-16T09:53:51Z

@@ -294,6 +296,36 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
        );
    }

+    private renderProxySection(): ReactNode {
+        if (!window.electron) return null;


You should use the Platform code for this. E.g. exposing a supportsProxyConfiguration() like https://github.com/vector-im/riot-web/blob/da5a30ba7130f763f9b324bb1e2c68377cf728bb/apps/web/src/BasePlatform.ts#L162-L169.

And then it's just a case of PlatformPeg.get().supportsProxyConfiguration() which is a bit more generic than checking if electron is exposed.

Half-Shot · 2026-03-16T09:58:37Z

+    const update = (patch: Partial<ProxyConfig>): void => setConfig((prev) => ({ ...prev, ...patch }));
+
+    return (
+        <FocusLock


So I think here you can just use BaseDialog, with the above suggestion about view models, I'd do:

export const NetworkProxyModal: React.FC<Props> = ({ onFinished }) => { const vm = new NetworkProxyViewModel(); return <BaseDialog {...}> <NetworkProxyModalView vm={vm} /> </BaseDialog> }

Half-Shot · 2026-03-16T10:00:47Z

@@ -472,6 +472,7 @@
        "cameras": "Kameras",
        "cancel": "Abbrechen",
        "capabilities": "Funktionen",
+        "configuration": "Konfiguration",


Ah yeah, another one of our footguns. We don't accept translations directly into the codebase even if you know the translations, it has to go via Localazy unless it's en_EN.json.

Half-Shot · 2026-03-16T10:01:07Z

@@ -1463,4 +1465,8 @@ export const SETTINGS: Settings = {
        displayName: _td("devtools|settings|elementCallUrl"),
        default: "",
    },
+    "desktopProxyConfig": {
+        supportedLevels: [SettingLevel.PLATFORM],
+        default: { mode: "system" } as ProxyConfig,


Shouldn't need an as?

CLAassistant · 2026-03-17T08:17:45Z

All committers have signed the CLA.

- Ported modal logic to NetworkProxyViewModel and view to NetworkProxyView in shared-components - Implemented real logic for supportsProxyConfiguration in ElectronPlatform - Renamed open_proxy_settings to openProxySettings for consistent casing - Removed German translations (to be handled via Localazy) - Registered desktopProxyConfig in SettingsStore - Simplified NetworkProxyModal by utilizing the new MVVM components and BaseDialog

tim2zg · 2026-03-17T20:15:00Z

Thank you for the feedback and guidance.
I'm still getting familiar with the React/MVVM, so please let me know if there are any further refinements / or corrections needed.

- Added Network Proxy link to AuthFooter for pre-login configuration - Ensured proxy settings survive logout - Improved proxy rule generation for HTTPS support - Cleaned up MVVM implementation and translations

- Ported all desktop-side proxy fixes to apps/desktop - Verified MVVM migration and auth footer entry - Ensured consistent IPC naming and platform abstraction - Fixed duplicate imports and globalThis usage in electron-main

t3chguy · 2026-06-05T08:20:55Z

+export interface NetworkProxyViewModelProps {
+    initialConfig: {
+        mode: "system" | "direct" | "custom";
+        scheme?: string;
+        host?: string;
+        port?: number;
+        username?: string;
+        password?: string;
+        bypass?: string;
+    };
+    onSave: (config: any) => Promise<void>;
+    onCancel: () => void;
+}
+
+export class NetworkProxyViewModel 


jsdoc all props & the class overall please

t3chguy · 2026-06-05T08:22:04Z

+            });
+            this.snapshot.merge({ hasChanges: false, loading: false });
+        } catch (e) {
+            this.snapshot.merge({ error: String(e), loading: false });


This looks to set error to an untranslated "raw" error string, but later it is rendered plainly, which means it will not be i18n'd and may not be in the right language for the user

t3chguy · 2026-06-05T08:22:16Z

+
+                {error && (
+                    <Text size="sm" className={styles.errorText}>
+                        {error}


This seems to render an untranslated error

t3chguy · 2026-06-05T08:23:30Z

+                                <option value="http">HTTP</option>
+                                <option value="https">HTTPS</option>
+                                <option value="socks5">SOCKS5</option>


i18n please, some languages have preferences for non-english terms

t3chguy · 2026-06-05T08:24:27Z


+    /**
+     * Returns true if the platform supports network proxy configuration.
+     * @returns {boolean} whether the platform supports proxy configuration


the type is superfluous, no point duplicating between jsdoc & typescript

t3chguy · 2026-06-05T08:25:08Z

+            "mode_direct_selected": "Direct connection is enabled. No proxy will be used.",
+            "mode_system_selected": "Using the system proxy configuration.",
+            "no_proxy_direct": "No proxy (direct connection)",
+            "no_proxy_for_comma_separated": "No proxy for",


this should use a placeholder for the remainder of the sentence, to allow effective i18n

tim2zg · 2026-06-06T08:01:05Z

still testing

t3chguy · 2026-06-08T15:10:29Z

-            } else {
-                global.mainWindow?.webContents.send("openDesktopCapturerSourcePicker");


This change seem unintentional

t3chguy · 2026-06-08T15:10:32Z

        app.exit(1);
    }

-    void global.mainWindow.loadURL("vector://vector/webapp/");


This change seem unintentional

t3chguy · 2026-06-08T15:23:07Z

                    label: _t("action|zoom_out"),
                },
                { type: "separator" },
-                // in macOS the Preferences menu item goes in the first menu


I think a comment like this is still worthwhile, just updated to match the changes would be good

langleyd · 2026-06-25T09:24:08Z

Hey @tim2zg, thanks for your contribution. Are you still working on this? If not, we will close it to remove it from our review list and you'll be free to open it again when you are ready.

…npm-lock.yaml parser issue

tim2zg · 2026-06-25T12:44:11Z

Sorry for the delay! Is it fine to leave the proxy UI as is? I tried getting the username/password fields to be the exact same width but it was a bit of a pain to override the Compound components.

…eat/native-proxy-settings

t3chguy · 2026-07-20T12:40:31Z

+.networkProxyView button:not([data-kind]) {
+    border: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    height: auto !important;
+    width: auto !important;
+    border-radius: initial !important;
+    box-shadow: none !important;
+}
+
+.passwordInput {
+    display: inline-flex !important;
+    position: relative !important;
+    width: 100% !important;
+    border: 1px solid var(--cpd-color-border-interactive-primary) !important;
+    border-radius: 8px !important;
+    background: var(--cpd-color-bg-canvas-default) !important;
+    box-sizing: border-box !important;
+    align-items: center !important;
+}
+
+.passwordInput input {
+    margin: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    padding: var(--cpd-space-3x) var(--cpd-space-12x) var(--cpd-space-3x) var(--cpd-space-4x) !important;
+    width: 100% !important;
+    color: var(--cpd-color-text-primary) !important;
+    box-sizing: border-box !important;
+    font: inherit !important;
+}
+
+.passwordInput button {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: absolute !important;
+    right: var(--cpd-space-2x) !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    height: 100% !important;
+    width: var(--cpd-space-8x) !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    cursor: pointer !important;
+    box-shadow: none !important;
+}
+
+.passwordInput:focus-within {
+    outline: 2px solid var(--cpd-color-border-focused) !important;
+    border-color: transparent !important;
+}


This wall of !important seems really off, we should only use !important where absolutely necessary and rely on layering and other techniques to avoid it where possible

t3chguy · 2026-07-20T12:41:27Z

+                                            onChange={() => vm.updateScheme(p)}
+                                            className={styles.hiddenRadio}
+                                        />
+                                        <Text as="span">{_t(`settings|network_proxy|protocol_${p}` as any)}</Text>


Yeah lets not use as any here - it voids the intentional type protection here

t3chguy · 2026-07-20T12:41:57Z

+_td("settings|network_proxy|protocol_http");
+_td("settings|network_proxy|protocol_https");
+_td("settings|network_proxy|protocol_socks5");
+_td("settings|network_proxy|requires_auth");


Yeah please do not do this, add a method which maps "http" | "https" | "socks5" to a translated string instead.

t3chguy · 2026-07-20T12:42:23Z

Can this test be written using vitest instead?

t3chguy · 2026-07-20T12:43:50Z

+
    Store.instance?.clear();
+
+    // Restore proxy settings after clear so they survive logout


Is this really a good idea? On a shared computer this could leave credentials for an authenticated proxy in situ

americanrefugee

Here is a proper design for the menu with Compound components:

Total width of the modal (including glass border) should be 520px.

Please make sure all fields, text, and colors are Compound components (the password field you're using looks wrong).

…clean up review findings

…eat/native-proxy-settings

richvdh · 2026-07-23T09:17:10Z

A 1000-line patch is indeed a "feat", but I don't think that's what was meant...

t3chguy · 2026-07-27T08:59:50Z

@tim2zg please click the re-request review when this is ready for another review, also include up to date screenshots please.

tim2zg · 2026-07-27T09:02:17Z

Sure thank you:)

t3chguy · 2026-08-13T09:16:56Z

Closing due to changes not having been made to comply with the requests made by design. Feel free to open a new PR once you have made the asked changes

tim2zg requested a review from a team as a code owner March 14, 2026 22:47

tim2zg requested review from Half-Shot and dbkr March 14, 2026 22:47

github-actions Bot added the Z-Community-PR Issue is solved by a community member's PR label Mar 14, 2026

tim2zg mentioned this pull request Mar 15, 2026

Native proxy settings element-hq/element-desktop#2827

Closed

4 tasks

Half-Shot requested changes Mar 16, 2026

View reviewed changes

tim2zg force-pushed the feat/native-proxy-settings branch 2 times, most recently from e1d52f8 to c5a662f Compare March 17, 2026 10:59

Half-Shot self-requested a review March 17, 2026 11:00

tim2zg force-pushed the feat/native-proxy-settings branch from c5a662f to ea1bb74 Compare March 17, 2026 14:33

tim2zg and others added 2 commits March 17, 2026 20:16

Merge branch 'develop' into feat/native-proxy-settings

41a4198

refactor: Add missing NetworkProxyViewModel for MVVM migration

9cea434

tim2zg and others added 5 commits March 22, 2026 10:53

feat: Add proxy settings to auth footer and finalize fixes

a6bda28

- Added Network Proxy link to AuthFooter for pre-login configuration - Ensured proxy settings survive logout - Improved proxy rule generation for HTTPS support - Cleaned up MVVM implementation and translations

Merge branch 'develop' into feat/native-proxy-settings

c776229

Merge branch 'develop' into feat/native-proxy-settings

5dc7df3

chore: Final monorepo synchronization for proxy settings

2f39ab2

- Ported all desktop-side proxy fixes to apps/desktop - Verified MVVM migration and auth footer entry - Ensured consistent IPC naming and platform abstraction - Fixed duplicate imports and globalThis usage in electron-main

Merge branch 'develop' into feat/native-proxy-settings

b071b17

Half-Shot added the T-Feature Request to add a new feature which does not exist right now label Apr 27, 2026

dbkr added the T-Enhancement label May 21, 2026

Half-Shot removed the T-Feature Request to add a new feature which does not exist right now label May 28, 2026

Half-Shot requested review from a team, Half-Shot and t3chguy and removed request for a team, Half-Shot and dbkr June 4, 2026 09:08

t3chguy reviewed Jun 5, 2026

View reviewed changes

tim2zg changed the title ~~Feat/native proxy settings~~ Feat/native proxy settings Fixes https://github.com/element-hq/element-web/issues/32407 Jun 6, 2026

t3chguy reviewed Jun 8, 2026

View reviewed changes

github-actions Bot deployed to SharedComponentDiffs June 8, 2026 15:19 View deployment

github-actions Bot requested a deployment to Netlify June 8, 2026 15:19 In progress

t3chguy reviewed Jun 8, 2026

View reviewed changes

Half-Shot changed the title ~~Feat/native proxy settings Fixes https://github.com/element-hq/element-web/issues/32407~~ Feat/native proxy settings Jun 11, 2026

tim2zg added 2 commits June 25, 2026 12:58

Merge branch 'origin/develop' into feat/native-proxy-settings

c6319a1

Refactor native proxy settings, address review feedback, and fix Nx p…

5f2f9b5

…npm-lock.yaml parser issue

tim2zg and others added 3 commits June 27, 2026 00:04

Merge branch 'develop' into feat/native-proxy-settings

89e5035

style(proxy): fix password input layout and center eye visibility icon

1886a89

Merge remote-tracking branch 'fork/feat/native-proxy-settings' into f…

556e920

…eat/native-proxy-settings

Half-Shot requested a review from t3chguy July 9, 2026 09:11

Merge branch 'develop' into feat/native-proxy-settings

0063581

t3chguy requested a review from a team July 20, 2026 12:38

t3chguy reviewed Jul 20, 2026

View reviewed changes

americanrefugee requested changes Jul 21, 2026

View reviewed changes

tim2zg and others added 3 commits July 21, 2026 12:37

refactor(proxy): Migrate NetworkProxyView to Compound components and …

4d45f9b

…clean up review findings

Merge remote-tracking branch 'fork/feat/native-proxy-settings' into f…

5e11797

…eat/native-proxy-settings

Merge branch 'develop' into feat/native-proxy-settings

d905305

richvdh changed the title ~~Feat/native proxy settings~~ Native proxy settings Jul 23, 2026

Merge branch 'develop' into feat/native-proxy-settings

0852963

t3chguy closed this Aug 13, 2026

		} else {
		global.mainWindow?.webContents.send("openDesktopCapturerSourcePicker");


		Store.instance?.clear();

		// Restore proxy settings after clear so they survive logout

Uh oh!

Conversation

tim2zg commented Mar 14, 2026 • edited by Half-Shot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

Half-Shot left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CLAassistant commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tim2zg commented Mar 17, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tim2zg commented Jun 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

langleyd commented Jun 25, 2026

Uh oh!

tim2zg commented Jun 25, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

americanrefugee left a comment

Choose a reason for hiding this comment

Uh oh!

richvdh commented Jul 23, 2026

Uh oh!

t3chguy commented Jul 27, 2026

Uh oh!

tim2zg commented Jul 27, 2026

Uh oh!

t3chguy commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

tim2zg commented Mar 14, 2026 •

edited by Half-Shot

Loading

CLAassistant commented Mar 17, 2026 •

edited

Loading