Implement new notification settings UI

res/css/_components.pcss

@@ -322,6 +322,7 @@
 @import "./views/settings/_JoinRuleSettings.pcss";
 @import "./views/settings/_KeyboardShortcut.pcss";
 @import "./views/settings/_LayoutSwitcher.pcss";
+@import "./views/settings/_NotificationSettings2.pcss";
 @import "./views/settings/_Notifications.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_ProfileSettings.pcss";
@@ -332,6 +333,8 @@
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/tabs/_SettingsBanner.pcss";
+@import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";
 @import "./views/settings/tabs/_SettingsTab.pcss";
 @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";

res/css/views/settings/_NotificationSettings2.pcss

@@ -0,0 +1,80 @@
+.mx_NotificationSettings2 {
+ .mx_SettingsSection_subSections {
+ color: $primary-content;
+ gap: 32px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .mx_SettingsSubsection_description {
+ margin-bottom: 20px;
+
+ .mx_SettingsSubsection_text {
+ font-size: 1.2rem;
+
+ .mx_NotificationBadge {
+ vertical-align: baseline;
+ display: inline-flex;
+ margin: 0 2px;
+ }
+ }
+ }
+
+ .mx_SettingsSubsection_content {
+ margin-top: 12px;
+ grid-gap: 12px;
+ justify-items: stretch;
+ justify-content: stretch;
+ }
+
+ .mx_SettingsBanner {
+ margin-bottom: 32px;
+ }
+
+ .mx_NotificationSettings2_flags {
+ grid-gap: 4px;
+ }
+
+ .mx_StyledRadioButton_content {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .mx_TagComposer {
+ margin-top: 16px;
+
+ &.mx_TagComposer_disabled {
+ opacity: 0.7;
+ }
+
+ .mx_TagComposer_tags {
+ margin-top: 16px;
+ gap: 8px;
+
+ .mx_Tag {
+ border-radius: 18px;
+ line-height: 2.4rem;
+ padding: 6px 12px;
+ background: $panel-actions;
+ margin: 0;
+
+ .mx_Tag_delete {
+ background: $tertiary-content;
+ color: #fff;
+ align-self: initial;
+ }
+ }
+ }
+ }
+}
+
+.mx_NotificationPusherSettings {
+ .mx_NotificationPusherSettings_description {
+ color: $primary-content;
+ }
+
+ .mx_NotificationPusherSettings_detail {
+ margin-top: -4px;
+ margin-bottom: 12px;
+ }
+}

res/css/views/settings/tabs/_SettingsBanner.pcss

@@ -0,0 +1,19 @@
+.mx_SettingsBanner {
+ background: $system;
+ line-height: 2.25rem;
+ border-radius: 8px;
+ padding: 12px 16px;
+ gap: 12px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .mx_SettingsBanner_content {
+ margin: 0;
+ }
+
+ .mx_AccessibleButton {
+ align-self: initial;
+ white-space: nowrap;
+ }
+}

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

@@ -0,0 +1,21 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+.mx_SettingsIndent {
+ padding-left: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}

src/components/views/elements/TagComposer.tsx

@@ -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";
@@ -67,7 +68,11 @@ 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
  value={this.state.newTag}

src/components/views/settings/notifications/NotificationPusherSettings.tsx

@@ -0,0 +1,131 @@
+/*
+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 } 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";
+
+const EmailPusherTemplate: Omit<IPusher, "pushkey" | "device_display_name" | "append"> = {
+ kind: "email",
+ app_id: "m.email",
+ app_display_name: "Email Notifications",
+ lang: navigator.language,
+ data: {
+ brand: SdkConfig.get().brand,
+ },
+};
+
+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 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();
+ },
+ [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>
+ )}
+ </>
+ );
+}