Skip to content
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/_components.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@
@import "./views/elements/_SSOButtons.pcss";
@import "./views/elements/_SearchWarning.pcss";
@import "./views/elements/_ServerPicker.pcss";
@import "./views/elements/_SettingsDropdown.pcss";
@import "./views/elements/_SettingsFlag.pcss";
@import "./views/elements/_Spinner.pcss";
@import "./views/elements/_StyledRadioButton.pcss";
Expand Down
20 changes: 20 additions & 0 deletions res/css/views/elements/_SettingsDropdown.pcss
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SettingsDropdown {
margin-bottom: 4px;
width: 100%;

.mx_SettingsDropdown_label {
color: $primary-content;
margin: var(--cpd-space-1x) 0;
}

.mx_Dropdown_input {
width: 360px;
}
}
1 change: 1 addition & 0 deletions src/BasePlatform.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export default abstract class BasePlatform {
protected notificationCount = 0;
protected errorDidOccur = false;
protected _favicon?: Favicon;
public readonly initialised = Promise.resolve<void>(undefined);

protected constructor() {
dis.register(this.onAction.bind(this));
Expand Down
16 changes: 9 additions & 7 deletions src/PlatformPeg.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@ Please see LICENSE files in the repository root for full details.
*/

import type BasePlatform from "./BasePlatform";
import defaultDispatcher from "./dispatcher/dispatcher";
import { Action } from "./dispatcher/actions";
import { type PlatformSetPayload } from "./dispatcher/payloads/PlatformSetPayload";

/*
* Holds the current instance of the `Platform` to use across the codebase.
Expand All @@ -25,6 +22,14 @@ import { type PlatformSetPayload } from "./dispatcher/payloads/PlatformSetPayloa
*/
export class PlatformPeg {
private platform: BasePlatform | null = null;
private platformPromiseWithResolvers = Promise.withResolvers<BasePlatform>();

/**
* Returns a promise for the Platform object for the application.
*/
public get platformPromise(): Promise<BasePlatform> {
return this.platformPromiseWithResolvers.promise;
}

/**
* Returns the current Platform object for the application.
Expand All @@ -39,11 +44,8 @@ export class PlatformPeg {
* @param {BasePlatform} platform an instance of a class extending BasePlatform.
*/
public set(platform: BasePlatform): void {
this.platformPromiseWithResolvers.resolve(platform);
this.platform = platform;
defaultDispatcher.dispatch<PlatformSetPayload>({
action: Action.PlatformSet,
platform,
});
}
}

Expand Down
81 changes: 81 additions & 0 deletions src/components/views/elements/SettingsDropdown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

import React, { type JSX, useCallback, useId, useState } from "react";

import SettingsStore from "../../../settings/SettingsStore";
import { type SettingLevel } from "../../../settings/SettingLevel";
import { SETTINGS, type StringSettingKey } from "../../../settings/Settings";
import { useSettingValueAt } from "../../../hooks/useSettings.ts";
import Dropdown, { type DropdownProps } from "./Dropdown.tsx";
import { _t } from "../../../shared-components/utils/i18n.tsx";

interface Props {
settingKey: StringSettingKey;
level: SettingLevel;
roomId?: string; // for per-room settings
label?: string;
isExplicit?: boolean;
hideIfCannotSet?: boolean;
onChange?(option: string): void;
}

const SettingsDropdown = ({
settingKey,
roomId,
level,
label: specificLabel,
isExplicit,
hideIfCannotSet,
onChange,
}: Props): JSX.Element => {
const id = useId();
const settingValue = useSettingValueAt(level, settingKey, roomId ?? null, isExplicit);
const [value, setValue] = useState(settingValue);
const setting = SETTINGS[settingKey];

const onOptionChange = useCallback(
(value: string): void => {
setValue(value); // local echo
SettingsStore.setValue(settingKey, roomId ?? null, level, value);
onChange?.(value);
},
[settingKey, roomId, level, onChange],
);

const disabled = !SettingsStore.canSetValue(settingKey, roomId ?? null, level);
if (disabled && hideIfCannotSet) return <></>;
if (!setting.options) {
console.error("SettingsDropdown used for a setting with no `options`");
return <></>;
}

const label = specificLabel ?? SettingsStore.getDisplayName(settingKey, level)!;
const options = setting.options.map((option) => {
return <div key={option.value}>{_t(option.label)}</div>;
}) as DropdownProps["children"];

return (
<div className="mx_SettingsDropdown">
<label className="mx_SettingsDropdown_label" htmlFor={id}>
<span className="mx_SettingsDropdown_labelText">{label}</span>
</label>
<Dropdown
id={id}
onOptionChange={onOptionChange}
menuWidth={360} // matches CSS width
value={value}
disabled={disabled}
label={label}
>
{options}
</Dropdown>
Comment on lines +67 to +76
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not using the compound dropdown component?

Copy link
Member Author

@t3chguy t3chguy Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Consistency, don't want to mix-and-match dropdown components on the same screen
  2. Can't replace existing Dropdown component as Compound dropdown lacks 2 features
    • Filtering, for lists of hundreds of options the lack of a combo-box style search is a blocker
    • Inability to render a different thing on the open & closed state, again used in current UX, e.g. for the phone country selector it shows $FLAG $PREFIX on the closed state but $FLAG $COUNTRY_NAME $PREFIX in the open dropdown

</div>
);
};

export default SettingsDropdown;
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import * as TimezoneHandler from "../../../../../TimezoneHandler";
import { type BooleanSettingKey } from "../../../../../settings/Settings.tsx";
import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx";
import { InviteRulesAccountSetting } from "./InviteRulesAccountSettings.tsx";
import SettingsDropdown from "../../../elements/SettingsDropdown.tsx";

interface IProps {
closeSettingsFn(success: boolean): void;
Expand Down Expand Up @@ -248,11 +249,12 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
});

const newRoomListEnabled = SettingsStore.getValue("feature_new_room_list");
const brand = SdkConfig.get().brand;

// Always Preprend the default option
const timezones = this.state.timezones.map((tz) => {
return <div key={tz}>{tz}</div>;
});
// Always prepend the default option
timezones.unshift(<div key="">{browserTimezoneLabel}</div>);

return (
Expand All @@ -264,6 +266,17 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
<SpellCheckSection />
</SettingsSubsection>

{SettingsStore.canSetValue("Electron.autoLaunch", null, SettingLevel.PLATFORM) && (
<SettingsSubsection heading={_t("settings|preferences|startup_window_behaviour_label")}>
<SettingsDropdown
settingKey="Electron.autoLaunch"
label={_t("settings|start_automatically|label", { brand })}
level={SettingLevel.PLATFORM}
hideIfCannotSet
/>
</SettingsSubsection>
)}

<SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
{!newRoomListEnabled && this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
{/* The settings is on device level where the other room list settings are on account level */}
Expand Down Expand Up @@ -356,7 +369,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
level={SettingLevel.PLATFORM}
hideIfCannotSet
label={_t("settings|preferences|Electron.enableHardwareAcceleration", {
appName: SdkConfig.get().brand,
appName: brand,
})}
/>
<SettingsFlag
Expand All @@ -366,7 +379,6 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
label={_t("settings|preferences|Electron.enableContentProtection")}
/>
<SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />

<Field
Expand Down
6 changes: 0 additions & 6 deletions src/dispatcher/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -331,12 +331,6 @@ export enum Action {
*/
OverwriteLogin = "overwrite_login",

/**
* Fired when the PlatformPeg gets a new platform set upon it, should only happen once per app load lifecycle.
* Fires with the PlatformSetPayload.
*/
PlatformSet = "platform_set",

/**
* Fired when we want to view a thread, either a new one or an existing one
*/
Expand Down
16 changes: 0 additions & 16 deletions src/dispatcher/payloads/PlatformSetPayload.ts

This file was deleted.

8 changes: 7 additions & 1 deletion src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -2891,6 +2891,7 @@
"room_list_heading": "Room list",
"show_avatars_pills": "Show avatars in user, room and event mentions",
"show_polls_button": "Show polls button",
"startup_window_behaviour_label": "Start-up and window behaviour",
"surround_text": "Surround selected text when typing special characters",
"time_heading": "Displaying time",
"user_timezone": "Set timezone"
Expand Down Expand Up @@ -3064,7 +3065,12 @@
"spaces_explainer": "Spaces are ways to group rooms and people. Alongside the spaces you're in, you can use some pre-built ones too.",
"title": "Sidebar"
},
"start_automatically": "Start automatically after system login",
"start_automatically": {
"disabled": "No",
"enabled": "Yes",
"label": "Open %(brand)s when you log in to your computer",
"minimised": "Minimised"
},
"tac_only_notifications": "Only show notifications in the thread activity centre",
"use_12_hour_format": "Show timestamps in 12 hour format (e.g. 2:30pm)",
"use_command_enter_send_message": "Use Command + Enter to send a message",
Expand Down
19 changes: 16 additions & 3 deletions src/settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,14 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
* Whether the setting should be exported in a rageshake report.
*/
shouldExportToRageshake?: boolean;

/**
* Options array for a setting controlled by a dropdown.
*/
options?: {
value: T;
label: TranslationKey;
}[];
}

export interface IFeature extends Omit<IBaseSetting<boolean>, "isFeature"> {
Expand Down Expand Up @@ -353,7 +361,7 @@ export interface Settings {
"videoInputMuted": IBaseSetting<boolean>;
"activeCallRoomIds": IBaseSetting<string[]>;
"releaseAnnouncementData": IBaseSetting<ReleaseAnnouncementData>;
"Electron.autoLaunch": IBaseSetting<boolean>;
"Electron.autoLaunch": IBaseSetting<"enabled" | "minimised" | "disabled">;
"Electron.warnBeforeExit": IBaseSetting<boolean>;
"Electron.alwaysShowMenuBar": IBaseSetting<boolean>;
"Electron.showTrayIcon": IBaseSetting<boolean>;
Expand Down Expand Up @@ -1438,8 +1446,13 @@ export const SETTINGS: Settings = {
// We store them over there are they are necessary to know before the renderer process launches.
"Electron.autoLaunch": {
supportedLevels: [SettingLevel.PLATFORM],
displayName: _td("settings|start_automatically"),
default: false,
displayName: _td("settings|start_automatically|label"),
options: [
{ value: "enabled", label: _td("settings|start_automatically|enabled") },
{ value: "disabled", label: _td("settings|start_automatically|disabled") },
{ value: "minimised", label: _td("settings|start_automatically|minimised") },
],
default: "disabled",
},
"Electron.warnBeforeExit": {
supportedLevels: [SettingLevel.PLATFORM],
Expand Down
31 changes: 14 additions & 17 deletions src/settings/handlers/PlatformSettingsHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import SettingsHandler from "./SettingsHandler";
import PlatformPeg from "../../PlatformPeg";
import { SETTINGS } from "../Settings";
import { SettingLevel } from "../SettingLevel";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { type ActionPayload } from "../../dispatcher/payloads";
import { Action } from "../../dispatcher/actions";

/**
* Gets and sets settings at the "platform" level for the current device.
Expand All @@ -24,22 +21,22 @@ export default class PlatformSettingsHandler extends SettingsHandler {
public constructor() {
super();

defaultDispatcher.register(this.onAction);
void this.setup();
}

private onAction = (payload: ActionPayload): void => {
if (payload.action === Action.PlatformSet) {
this.store = {};
// Load setting values as they are async and `getValue` must be synchronous
Object.entries(SETTINGS).forEach(([key, setting]) => {
if (setting.supportedLevels?.includes(SettingLevel.PLATFORM) && payload.platform.supportsSetting(key)) {
payload.platform.getSettingValue(key).then((value: any) => {
this.store[key] = value;
});
}
});
}
};
private async setup(): Promise<void> {
const platform = await PlatformPeg.platformPromise;
await platform.initialised;

// Load setting values as they are async and `getValue` must be synchronous
Object.entries(SETTINGS).forEach(([key, setting]) => {
if (setting.supportedLevels?.includes(SettingLevel.PLATFORM) && platform.supportsSetting(key)) {
platform.getSettingValue(key).then((value: any) => {
this.store[key] = value;
});
}
});
}

public canSetValue(settingName: string, roomId: string): boolean {
return PlatformPeg.get()?.supportsSetting(settingName) ?? false;
Expand Down
6 changes: 4 additions & 2 deletions src/vector/platform/ElectronPlatform.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -374,11 +374,13 @@ export default class ElectronPlatform extends BasePlatform {
return this.supportedSettings?.[settingName] === true;
}

public getSettingValue(settingName: string): Promise<any> {
public async getSettingValue(settingName: string): Promise<any> {
await this.initialised;
return this.electron.getSettingValue(settingName);
}

public setSettingValue(settingName: string, value: any): Promise<void> {
public async setSettingValue(settingName: string, value: any): Promise<void> {
await this.initialised;
return this.electron.setSettingValue(settingName, value);
}

Expand Down
Loading
Loading