imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

GYU: Account Notification Settings (#11008)

Browse source 
* Implement new notification settings UI

* Sort new keywords at the front

* Make ts-strict happier

* Make ts-strict happier

* chore: fixed lint issues

* update beta card

* Fix issue with the user settings test

* chore: fixed lint issues

* Add tests for notification settings

* chore: fixed lint issues

* fix: spurious text failures

* improve tests further

* make ts-strict happier

* improve tests further

* Reduce uncovered conditions

* Correct snapshot

* even more test coverage

* Fix an issue with inverted rules

* Update res/css/views/settings/tabs/_SettingsIndent.pcss

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix license headers

* Improve i18n

* make linters happier

* Improve beta labels

* improve i18n

* chore: fixed lint issues

* fix: more lint issues

* Update snapshots to match changed text

* Update text as requested

* Remove labs image

* Update snapshots

* Correct an issue with one of the tests

* fix: keyword reconcilation code

* Determine mute status more accurately

* Address review comments

* Prevent duplicate updates

* Fix missing license header

* slight change to avoid ts-strict complaining

* fix test issue caused by previous merge

---------

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Janne Mareike Koschinski 2023-06-29 17:46:31 +02:00 • committed by GitHub
parent 95283d21bb
commit f62fe2626c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 3797 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/elements/Tag.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Copyright 2022-2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import AccessibleButton from "./AccessibleButton";
import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
interface IProps {
interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
icon?: () => JSX.Element;
label: string;
onDeleteClick?: () => void;
disabled?: boolean;
}
export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false }) => {
export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = false, ...other }) => {
return (
<div className="mx_Tag">
<div className="mx_Tag" {...other}>
{icon?.()}
{label}
{onDeleteClick && (

14
src/components/views/elements/TagComposer.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import classNames from "classnames";
import React, { ChangeEvent, FormEvent } from "react";
import Field from "./Field";
@ -22,6 +23,7 @@ import AccessibleButton from "./AccessibleButton";
import { Tag } from "./Tag";
interface IProps {
id?: string;
tags: string[];
onAdd: (tag: string) => void;
onRemove: (tag: string) => void;
@ -67,9 +69,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
public render(): React.ReactNode {
return (
<div className="mx_TagComposer">
<div
className={classNames("mx_TagComposer", {
mx_TagComposer_disabled: this.props.disabled,
})}
>
<form className="mx_TagComposer_input" onSubmit={this.onAdd}>
<Field
id={this.props.id ? this.props.id + "_field" : undefined}
value={this.state.newTag}
onChange={this.onInputChange}
label={this.props.label || _t("Keyword")}
@ -81,13 +88,14 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
{_t("Add")}
</AccessibleButton>
</form>
<div className="mx_TagComposer_tags">
<div className="mx_TagComposer_tags" role="list">
{this.props.tags.map((t, i) => (
<Tag
label={t}
key={t}
onDeleteClick={this.onRemove.bind(this, t)}
disabled={this.props.disabled}
role="listitem"
/>
))}
</div>

134
src/components/views/settings/notifications/NotificationPusherSettings.tsx Normal file
View file

@ -0,0 +1,134 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
import { IPusher } from "matrix-js-sdk/src/matrix";
import React, { useCallback, useMemo } from "react";
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
import { Action } from "../../../../dispatcher/actions";
import dispatcher from "../../../../dispatcher/dispatcher";
import { usePushers } from "../../../../hooks/usePushers";
import { useThreepids } from "../../../../hooks/useThreepids";
import { _t } from "../../../../languageHandler";
import SdkConfig from "../../../../SdkConfig";
import { UserTab } from "../../dialogs/UserTab";
import AccessibleButton from "../../elements/AccessibleButton";
import LabelledCheckbox from "../../elements/LabelledCheckbox";
import { SettingsIndent } from "../shared/SettingsIndent";
import SettingsSubsection, { SettingsSubsectionText } from "../shared/SettingsSubsection";
function generalTabButton(content: string): JSX.Element {
return (
<AccessibleButton
kind="link_inline"
onClick={() => {
dispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.General,
});
}}
>
{content}
</AccessibleButton>
);
}
export function NotificationPusherSettings(): JSX.Element {
const EmailPusherTemplate: Omit<IPusher, "pushkey" | "device_display_name" | "append"> = useMemo(
() => ({
kind: "email",
app_id: "m.email",
app_display_name: _t("Email Notifications"),
lang: navigator.language,
data: {
brand: SdkConfig.get().brand,
},
}),
[],
);
const cli = useMatrixClientContext();
const [pushers, refreshPushers] = usePushers(cli);
const [threepids, refreshThreepids] = useThreepids(cli);
const setEmailEnabled = useCallback(
(email: string, enabled: boolean) => {
if (enabled) {
cli.setPusher({
...EmailPusherTemplate,
pushkey: email,
device_display_name: email,
// We always append for email pushers since we don't want to stop other
// accounts notifying to the same email address
append: true,
}).catch((err) => console.error(err));
} else {
const pusher = pushers.find((p) => p.kind === "email" && p.pushkey === email);
if (pusher) {
cli.removePusher(pusher.pushkey, pusher.app_id).catch((err) => console.error(err));
}
}
refreshThreepids();
refreshPushers();
},
[EmailPusherTemplate, cli, pushers, refreshPushers, refreshThreepids],
);
const notificationTargets = pushers.filter((it) => it.kind !== "email");
return (
<>
<SettingsSubsection className="mx_NotificationPusherSettings" heading={_t("Email summary")}>
<SettingsSubsectionText className="mx_NotificationPusherSettings_description">
{_t("Receive an email summary of missed notifications")}
</SettingsSubsectionText>
<div className="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail">
<SettingsSubsectionText>
{_t(
"Select which emails you want to send summaries to. Manage your emails in <button>General</button>.",
{},
{ button: generalTabButton },
)}
</SettingsSubsectionText>
</div>
<SettingsIndent>
{threepids
.filter((t) => t.medium === ThreepidMedium.Email)
.map((email) => (
<LabelledCheckbox
key={email.address}
label={email.address}
value={pushers.find((it) => it.pushkey === email.address) !== undefined}
onChange={(value) => setEmailEnabled(email.address, value)}
/>
))}
</SettingsIndent>
</SettingsSubsection>
{notificationTargets.length > 0 && (
<SettingsSubsection heading={_t("Notification targets")}>
<ul>
{pushers
.filter((it) => it.kind !== "email")
.map((pusher) => (
<li key={pusher.pushkey}>{pusher.device_display_name || pusher.app_display_name}</li>
))}
</ul>
</SettingsSubsection>
)}
</>
);
}

370
src/components/views/settings/notifications/NotificationSettings2.tsx Normal file
View file

@ -0,0 +1,370 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useState } from "react";
import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg";
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
import { useNotificationSettings } from "../../../../hooks/useNotificationSettings";
import { useSettingValue } from "../../../../hooks/useSettings";
import { _t } from "../../../../languageHandler";
import {
DefaultNotificationSettings,
NotificationSettings,
} from "../../../../models/notificationsettings/NotificationSettings";
import { RoomNotifState } from "../../../../RoomNotifs";
import { SettingLevel } from "../../../../settings/SettingLevel";
import SettingsStore from "../../../../settings/SettingsStore";
import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
import { clearAllNotifications } from "../../../../utils/notifications";
import AccessibleButton from "../../elements/AccessibleButton";
import LabelledCheckbox from "../../elements/LabelledCheckbox";
import LabelledToggleSwitch from "../../elements/LabelledToggleSwitch";
import StyledRadioGroup from "../../elements/StyledRadioGroup";
import TagComposer from "../../elements/TagComposer";
import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
import { SettingsBanner } from "../shared/SettingsBanner";
import { SettingsSection } from "../shared/SettingsSection";
import SettingsSubsection from "../shared/SettingsSubsection";
import { NotificationPusherSettings } from "./NotificationPusherSettings";
enum NotificationDefaultLevels {
AllMessages = "all_messages",
PeopleMentionsKeywords = "people_mentions_keywords",
MentionsKeywords = "mentions_keywords",
}
function toDefaultLevels(levels: NotificationSettings["defaultLevels"]): NotificationDefaultLevels {
if (levels.room === RoomNotifState.AllMessages) {
return NotificationDefaultLevels.AllMessages;
} else if (levels.dm === RoomNotifState.AllMessages) {
return NotificationDefaultLevels.PeopleMentionsKeywords;
} else {
return NotificationDefaultLevels.MentionsKeywords;
}
}
const NotificationOptions = [
{
value: NotificationDefaultLevels.AllMessages,
label: _t("All messages"),
},
{
value: NotificationDefaultLevels.PeopleMentionsKeywords,
label: _t("People, Mentions and Keywords"),
},
{
value: NotificationDefaultLevels.MentionsKeywords,
label: _t("Mentions and Keywords only"),
},
];
function boldText(text: string): JSX.Element {
return <strong>{text}</strong>;
}
function useHasUnreadNotifications(): boolean {
const cli = useMatrixClientContext();
return cli.getRooms().some((room) => room.getUnreadNotificationCount() > 0);
}
export default function NotificationSettings2(): JSX.Element {
const cli = useMatrixClientContext();
const desktopNotifications = useSettingValue<boolean>("notificationsEnabled");
const desktopShowBody = useSettingValue<boolean>("notificationBodyEnabled");
const audioNotifications = useSettingValue<boolean>("audioNotificationsEnabled");
const { model, hasPendingChanges, reconcile } = useNotificationSettings(cli);
const disabled = model === null || hasPendingChanges;
const settings = model ?? DefaultNotificationSettings;
const [updatingUnread, setUpdatingUnread] = useState<boolean>(false);
const hasUnreadNotifications = useHasUnreadNotifications();
return (
<div className="mx_NotificationSettings2">
{hasPendingChanges && model !== null && (
<SettingsBanner
icon={<img src={NewAndImprovedIcon} alt="" width={12} />}
action={_t("Switch now")}
onAction={() => reconcile(model!)}
>
{_t(
"<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.",
{},
{ strong: boldText },
)}
</SettingsBanner>
)}
<SettingsSection heading={_t("Notifications")}>
<div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
<LabelledToggleSwitch
label={_t("Enable notifications for this account")}
value={!settings.globalMute}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
globalMute: !value,
});
}}
/>
<LabelledToggleSwitch
label={_t("Enable desktop notifications for this session")}
value={desktopNotifications}
onChange={(value) =>
SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, value)
}
/>
<LabelledToggleSwitch
label={_t("Show message preview in desktop notification")}
value={desktopShowBody}
onChange={(value) =>
SettingsStore.setValue("notificationBodyEnabled", null, SettingLevel.DEVICE, value)
}
/>
<LabelledToggleSwitch
label={_t("Enable audible notifications for this session")}
value={audioNotifications}
onChange={(value) =>
SettingsStore.setValue("audioNotificationsEnabled", null, SettingLevel.DEVICE, value)
}
/>
</div>
<SettingsSubsection
heading={_t("I want to be notified for (Default Setting)")}
description={_t("This setting will be applied by default to all your rooms.")}
>
<StyledRadioGroup
name="defaultNotificationLevel"
value={toDefaultLevels(settings.defaultLevels)}
disabled={disabled}
definitions={NotificationOptions}
onChange={(value) => {
reconcile({
...model!,
defaultLevels: {
...model!.defaultLevels,
dm:
value !== NotificationDefaultLevels.MentionsKeywords
? RoomNotifState.AllMessages
: RoomNotifState.MentionsOnly,
room:
value === NotificationDefaultLevels.AllMessages
? RoomNotifState.AllMessages
: RoomNotifState.MentionsOnly,
},
});
}}
/>
</SettingsSubsection>
<SettingsSubsection
heading={_t("Play a sound for")}
description={_t("Applied by default to all rooms on all devices.")}
>
<LabelledCheckbox
label="People"
value={settings.sound.people !== undefined}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
sound: {
...model!.sound,
people: value ? "default" : undefined,
},
});
}}
/>
<LabelledCheckbox
label={_t("Mentions and Keywords")}
value={settings.sound.mentions !== undefined}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
sound: {
...model!.sound,
mentions: value ? "default" : undefined,
},
});
}}
/>
<LabelledCheckbox
label={_t("Audio and Video calls")}
value={settings.sound.calls !== undefined}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
sound: {
...model!.sound,
calls: value ? "ring" : undefined,
},
});
}}
/>
</SettingsSubsection>
<SettingsSubsection heading={_t("Other things we think you might be interested in:")}>
<LabelledCheckbox
label={_t("Invited to a room")}
value={settings.activity.invite}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
activity: {
...model!.activity,
invite: value,
},
});
}}
/>
<LabelledCheckbox
label={_t("New room activity, upgrades and status messages occur")}
value={settings.activity.status_event}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
activity: {
...model!.activity,
status_event: value,
},
});
}}
/>
<LabelledCheckbox
label={_t("Messages sent by bots")}
value={settings.activity.bot_notices}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
activity: {
...model!.activity,
bot_notices: value,
},
});
}}
/>
</SettingsSubsection>
<SettingsSubsection
heading={_t("Mentions and Keywords")}
description={_t(
"Show a badge <badge/> when keywords are used in a room.",
{},
{
badge: <StatelessNotificationBadge symbol="1" count={1} color={NotificationColor.Grey} />,
},
)}
>
<LabelledCheckbox
label={_t("Notify when someone mentions using @room")}
value={settings.mentions.room}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
mentions: {
...model!.mentions,
room: value,
},
});
}}
/>
<LabelledCheckbox
label={_t("Notify when someone mentions using @displayname or %(mxid)s", {
mxid: cli.getUserId()!,
})}
value={settings.mentions.user}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
mentions: {
...model!.mentions,
user: value,
},
});
}}
/>
<LabelledCheckbox
label={_t("Notify when someone uses a keyword")}
byline={_t("Enter keywords here, or use for spelling variations or nicknames")}
value={settings.mentions.keywords}
disabled={disabled}
onChange={(value) => {
reconcile({
...model!,
mentions: {
...model!.mentions,
keywords: value,
},
});
}}
/>
<TagComposer
id="mx_NotificationSettings2_Keywords"
tags={model?.keywords ?? []}
disabled={disabled}
onAdd={(keyword) => {
reconcile({
...model!,
keywords: [keyword, ...model!.keywords],
});
}}
onRemove={(keyword) => {
reconcile({
...model!,
keywords: model!.keywords.filter((it) => it !== keyword),
});
}}
label={_t("Keyword")}
placeholder={_t("New keyword")}
/>
</SettingsSubsection>
<NotificationPusherSettings />
<SettingsSubsection heading={_t("Quick Actions")}>
{hasUnreadNotifications && (
<AccessibleButton
kind="primary_outline"
disabled={updatingUnread}
onClick={async () => {
setUpdatingUnread(true);
await clearAllNotifications(cli);
setUpdatingUnread(false);
}}
>
{_t("Mark all messages as read")}
</AccessibleButton>
)}
<AccessibleButton
kind="danger_outline"
disabled={model === null}
onClick={() => {
reconcile(DefaultNotificationSettings);
}}
>
{_t("Reset to default settings")}
</AccessibleButton>
</SettingsSubsection>
</SettingsSection>
</div>
);
}

39
src/components/views/settings/shared/SettingsBanner.tsx Normal file
View file

@ -0,0 +1,39 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { PropsWithChildren, ReactNode } from "react";
import AccessibleButton from "../../elements/AccessibleButton";
interface Props {
icon?: ReactNode;
action?: ReactNode;
onAction?: () => void;
}
export function SettingsBanner({ children, icon, action, onAction }: PropsWithChildren<Props>): JSX.Element {
return (
<div className="mx_SettingsBanner">
{icon}
<div className="mx_SettingsBanner_content">{children}</div>
{action && (
<AccessibleButton kind="primary_outline" onClick={onAction ?? null}>
{action}
</AccessibleButton>
)}
</div>
);
}

27
src/components/views/settings/shared/SettingsIndent.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { HTMLAttributes } from "react";
export interface SettingsIndentProps extends HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
}
export const SettingsIndent: React.FC<SettingsIndentProps> = ({ children, ...rest }) => (
<div {...rest} className="mx_SettingsIndent">
{children}
</div>
);

7
src/components/views/settings/shared/SettingsSection.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Copyright 2022-2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import classnames from "classnames";
import React, { HTMLAttributes } from "react";
import Heading from "../../typography/Heading";
@ -40,8 +41,8 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
* </SettingsTab>
* ```
*/
export const SettingsSection: React.FC<SettingsSectionProps> = ({ heading, children, ...rest }) => (
<div {...rest} className="mx_SettingsSection">
export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
<div {...rest} className={classnames("mx_SettingsSection", className)}>
{typeof heading === "string" ? <Heading size="2">{heading}</Heading> : <>{heading}</>}
<div className="mx_SettingsSection_subSections">{children}</div>
</div>

17
src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -17,17 +17,26 @@ limitations under the License.
import React from "react";
import { _t } from "../../../../../languageHandler";
import { Features } from "../../../../../settings/Settings";
import SettingsStore from "../../../../../settings/SettingsStore";
import Notifications from "../../Notifications";
import NotificationSettings2 from "../../notifications/NotificationSettings2";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsTab from "../SettingsTab";
export default class NotificationUserSettingsTab extends React.Component {
public render(): React.ReactNode {
const newNotificationSettingsEnabled = SettingsStore.getValue(Features.NotificationSettings2);
return (
<SettingsTab>
<SettingsSection heading={_t("Notifications")}>
<Notifications />
</SettingsSection>
{newNotificationSettingsEnabled ? (
<NotificationSettings2 />
) : (
<SettingsSection heading={_t("Notifications")}>
<Notifications />
</SettingsSection>
)}
</SettingsTab>
);
}

41
src/hooks/useNotificationSettings.tsx
View file

@ -44,6 +44,7 @@ type UseNotificationSettings = {
};
export function useNotificationSettings(cli: MatrixClient): UseNotificationSettings {
const run = useLinearisedPromise<void>();
const supportsIntentionalMentions = useMemo(() => cli.supportsIntentionalMentions(), [cli]);
const pushRules = useRef<IPushRules | null>(null);
@ -61,21 +62,41 @@ export function useNotificationSettings(cli: MatrixClient): UseNotificationSetti
}, [cli, supportsIntentionalMentions]);
useEffect(() => {
updatePushRules().catch((err) => console.error(err));
}, [cli, updatePushRules]);
run(updatePushRules).catch((err) => console.error(err));
}, [cli, run, updatePushRules]);
const reconcile = useCallback(
(model: NotificationSettings) => {
if (pushRules.current !== null) {
setModel(model);
const changes = reconcileNotificationSettings(pushRules.current, model, supportsIntentionalMentions);
applyChanges(cli, changes)
.then(updatePushRules)
.catch((err) => console.error(err));
}
setModel(model);
run(async () => {
if (pushRules.current !== null) {
const changes = reconcileNotificationSettings(
pushRules.current,
model,
supportsIntentionalMentions,
);
await applyChanges(cli, changes);
await updatePushRules();
}
}).catch((err) => console.error(err));
},
[cli, updatePushRules, supportsIntentionalMentions],
[run, supportsIntentionalMentions, cli, updatePushRules],
);
return { model, hasPendingChanges, reconcile };
}
function useLinearisedPromise<T>(): (fun: () => Promise<T>) => Promise<T> {
const lastPromise = useRef<Promise<T> | null>(null);
return useCallback((fun: () => Promise<T>): Promise<T> => {
let next: Promise<T>;
if (lastPromise.current === null) {
next = fun();
} else {
next = lastPromise.current.then(fun);
}
lastPromise.current = next;
return next;
}, []);
}

30
src/i18n/strings/en_EN.json
View file

@ -953,6 +953,9 @@
"Can I use text chat alongside the video call?": "Can I use text chat alongside the video call?",
"Yes, the chat timeline is displayed alongside the video.": "Yes, the chat timeline is displayed alongside the video.",
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
"New Notification Settings": "New Notification Settings",
"Notification Settings": "Notification Settings",
"Introducing a simpler way to change your notification settings. Customize your %(brand)s, just the way you like.": "Introducing a simpler way to change your notification settings. Customize your %(brand)s, just the way you like.",
"Explore public spaces in the new search dialog": "Explore public spaces in the new search dialog",
"Requires your server to support the stable version of MSC3827": "Requires your server to support the stable version of MSC3827",
"Let moderators hide messages pending moderation.": "Let moderators hide messages pending moderation.",
@ -1767,6 +1770,33 @@
"%(brand)s is end-to-end encrypted, but is currently limited to smaller numbers of users.": "%(brand)s is end-to-end encrypted, but is currently limited to smaller numbers of users.",
"You do not have sufficient permissions to change this.": "You do not have sufficient permissions to change this.",
"Call type": "Call type",
"Email Notifications": "Email Notifications",
"Email summary": "Email summary",
"Receive an email summary of missed notifications": "Receive an email summary of missed notifications",
"Select which emails you want to send summaries to. Manage your emails in <button>General</button>.": "Select which emails you want to send summaries to. Manage your emails in <button>General</button>.",
"People, Mentions and Keywords": "People, Mentions and Keywords",
"Mentions and Keywords only": "Mentions and Keywords only",
"Switch now": "Switch now",
"<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.": "<strong>Update:</strong> We have updated our notification settings. This won’t affect your previously selected settings.",
"Show message preview in desktop notification": "Show message preview in desktop notification",
"I want to be notified for (Default Setting)": "I want to be notified for (Default Setting)",
"This setting will be applied by default to all your rooms.": "This setting will be applied by default to all your rooms.",
"Play a sound for": "Play a sound for",
"Applied by default to all rooms on all devices.": "Applied by default to all rooms on all devices.",
"Mentions and Keywords": "Mentions and Keywords",
"Audio and Video calls": "Audio and Video calls",
"Other things we think you might be interested in:": "Other things we think you might be interested in:",
"Invited to a room": "Invited to a room",
"New room activity, upgrades and status messages occur": "New room activity, upgrades and status messages occur",
"Messages sent by bots": "Messages sent by bots",
"Show a badge <badge/> when keywords are used in a room.": "Show a badge <badge/> when keywords are used in a room.",
"Notify when someone mentions using @room": "Notify when someone mentions using @room",
"Notify when someone mentions using @displayname or %(mxid)s": "Notify when someone mentions using @displayname or %(mxid)s",
"Notify when someone uses a keyword": "Notify when someone uses a keyword",
"Enter keywords here, or use for spelling variations or nicknames": "Enter keywords here, or use for spelling variations or nicknames",
"Quick Actions": "Quick Actions",
"Mark all messages as read": "Mark all messages as read",
"Reset to default settings": "Reset to default settings",
"Unable to revoke sharing for email address": "Unable to revoke sharing for email address",
"Unable to share email address": "Unable to share email address",
"Your email address hasn't been verified yet": "Your email address hasn't been verified yet",

34
src/models/notificationsettings/reconcileNotificationSettings.ts
View file

@ -196,6 +196,11 @@ export function reconcileNotificationSettings(
}
}
const mentionActions = NotificationUtils.encodeActions({
notify: true,
sound: model.sound.mentions,
highlight: true,
});
const contentRules = pushRules.global.content?.filter((rule) => !rule.rule_id.startsWith(".")) ?? [];
const newKeywords = new Set(model.keywords);
for (const rule of contentRules) {
@ -204,12 +209,27 @@ export function reconcileNotificationSettings(
rule_id: rule.rule_id,
kind: PushRuleKind.ContentSpecific,
});
} else if (rule.enabled !== model.mentions.keywords) {
changes.updated.push({
rule_id: rule.rule_id,
kind: PushRuleKind.ContentSpecific,
enabled: model.mentions.keywords,
});
} else {
let changed = false;
if (rule.enabled !== model.mentions.keywords) {
changed = true;
} else if (rule.actions !== undefined) {
const originalActions = NotificationUtils.decodeActions(rule.actions);
const actions = NotificationUtils.decodeActions(mentionActions);
if (originalActions === null || actions === null) {
changed = true;
} else if (!deepCompare(actions, originalActions)) {
changed = true;
}
}
if (changed) {
changes.updated.push({
rule_id: rule.rule_id,
kind: PushRuleKind.ContentSpecific,
enabled: model.mentions.keywords,
actions: mentionActions,
});
}
}
newKeywords.delete(rule.pattern!);
}
@ -220,7 +240,7 @@ export function reconcileNotificationSettings(
default: false,
enabled: model.mentions.keywords,
pattern: keyword,
actions: StandardActions.ACTION_NOTIFY,
actions: mentionActions,
});
}

18
src/models/notificationsettings/toNotificationSettings.ts
View file

@ -37,6 +37,22 @@ function shouldNotify(rules: (IPushRule | null | undefined | false)[]): boolean
return false;
}
function isMuted(rules: (IPushRule | null | undefined | false)[]): boolean {
if (rules.length === 0) {
return false;
}
for (const rule of rules) {
if (rule === null || rule === undefined || rule === false || !rule.enabled) {
continue;
}
const actions = NotificationUtils.decodeActions(rule.actions);
if (actions !== null && !actions.notify && actions.highlight !== true && actions.sound === undefined) {
return true;
}
}
return false;
}
function determineSound(rules: (IPushRule | null | undefined | false)[]): string | undefined {
for (const rule of rules) {
if (rule === null || rule === undefined || rule === false || !rule.enabled) {
@ -74,7 +90,7 @@ export function toNotificationSettings(
people: determineSound(dmRules),
},
activity: {
bot_notices: shouldNotify([standardRules.get(RuleId.SuppressNotices)]),
bot_notices: !isMuted([standardRules.get(RuleId.SuppressNotices)]),
invite: shouldNotify([standardRules.get(RuleId.InviteToSelf)]),
status_event: shouldNotify([standardRules.get(RuleId.MemberEvent), standardRules.get(RuleId.Tombstone)]),
},

23
src/settings/Settings.tsx
View file

@ -94,6 +94,7 @@ export enum LabGroup {
export enum Features {
VoiceBroadcast = "feature_voice_broadcast",
VoiceBroadcastForceSmallChunks = "feature_voice_broadcast_force_small_chunks",
NotificationSettings2 = "feature_notification_settings2",
OidcNativeFlow = "feature_oidc_native_flow",
}
@ -229,6 +230,28 @@ export const SETTINGS: { [setting: string]: ISetting } = {
requiresRefresh: true,
},
},
[Features.NotificationSettings2]: {
isFeature: true,
labsGroup: LabGroup.Experimental,
supportedLevels: LEVELS_FEATURE,
displayName: _td("New Notification Settings"),
default: false,
betaInfo: {
title: _td("Notification Settings"),
caption: () => (
<>
<p>
{_t(
"Introducing a simpler way to change your notification settings. Customize your %(brand)s, just the way you like.",
{
brand: SdkConfig.get().brand,
},
)}
</p>
</>
),
},
},
"feature_exploring_public_spaces": {
isFeature: true,
labsGroup: LabGroup.Spaces,