add special messages notification settings

src/app/features/settings/notifications/AllMessages.tsx

@@ -50,13 +50,14 @@ type PushRulesProps = {
   encrypted?: boolean;
   oneToOne?: boolean;
 };
-function AllMessagesModeSwitcher({ ruleId, pushRules, encrypted, oneToOne }: PushRulesProps) {
+function AllMessagesModeSwitcher({
-  const mx = useMatrixClient();
-  const defaultPushRuleData = getAllMessageDefaultRule(
   ruleId,
-    encrypted ?? false,
+  pushRules,
-    oneToOne ?? false
+  encrypted = false,
-  );
+  oneToOne = false,
+}: PushRulesProps) {
+  const mx = useMatrixClient();
+  const defaultPushRuleData = getAllMessageDefaultRule(ruleId, encrypted, oneToOne);
   const { kind, pushRule } = usePushRule(pushRules, ruleId) ?? defaultPushRuleData;
   const getModeActions = useNotificationModeActions();
 
@@ -83,7 +84,7 @@ export function AllMessagesNotifications() {
       <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
         <Text size="L400">All Messages</Text>
         <Box gap="100">
-          <Text size="T200">Hint: </Text>
+          <Text size="T200">Badge: </Text>
           <Badge radii="300" variant="Secondary" fill="Solid">
             <Text size="L400">1</Text>
           </Badge>

src/app/features/settings/notifications/Notifications.tsx

@@ -8,6 +8,7 @@ import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { usePermissionState } from '../../../hooks/usePermission';
 import { AllMessagesNotifications } from './AllMessages';
+import { SpecialMessagesNotifications } from './SpecialMessages';
 
 function SystemNotification() {
   const notifPermission = usePermissionState(
@@ -102,6 +103,7 @@ export function Notifications({ requestClose }: NotificationsProps) {
             <Box direction="Column" gap="700">
               <SystemNotification />
               <AllMessagesNotifications />
+              <SpecialMessagesNotifications />
             </Box>
           </PageContent>
         </Scroll>

src/app/features/settings/notifications/SpecialMessages.tsx

@@ -0,0 +1,222 @@
+import React, { useCallback, useMemo } from 'react';
+import { ConditionKind, IPushRules, PushRuleKind, RuleId } from 'matrix-js-sdk';
+import { Box, Text, Badge } from 'folds';
+import { useAccountData } from '../../../hooks/useAccountData';
+import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useUserProfile } from '../../../hooks/useUserProfile';
+import { getMxIdLocalPart } from '../../../utils/matrix';
+import { makePushRuleData, PushRuleData, usePushRule } from '../../../hooks/usePushRule';
+import {
+  getNotificationModeActions,
+  NotificationMode,
+  NotificationModeOptions,
+  useNotificationModeActions,
+} from '../../../hooks/useNotificationMode';
+import { NotificationModeSwitcher } from './NotificationModeSwitcher';
+
+const NOTIFY_MODE_OPS: NotificationModeOptions = {
+  highlight: true,
+};
+const getDefaultIsUserMention = (userId: string): PushRuleData =>
+  makePushRuleData(
+    PushRuleKind.Override,
+    RuleId.IsUserMention,
+    getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
+    [
+      {
+        kind: ConditionKind.EventPropertyContains,
+        key: 'content.m\\.mentions.user_ids',
+        value: userId,
+      },
+    ]
+  );
+
+const DefaultContainsDisplayName = makePushRuleData(
+  PushRuleKind.Override,
+  RuleId.ContainsDisplayName,
+  getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
+  [
+    {
+      kind: ConditionKind.ContainsDisplayName,
+    },
+  ]
+);
+
+const getDefaultContainsUsername = (username: string) =>
+  makePushRuleData(
+    PushRuleKind.ContentSpecific,
+    RuleId.ContainsUserName,
+    getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
+    undefined,
+    username
+  );
+
+const DefaultIsRoomMention = makePushRuleData(
+  PushRuleKind.Override,
+  RuleId.IsRoomMention,
+  getNotificationModeActions(NotificationMode.Notify, { highlight: true }),
+  [
+    {
+      kind: ConditionKind.EventPropertyIs,
+      key: 'content.m\\.mentions.room',
+      value: true,
+    },
+    {
+      kind: ConditionKind.SenderNotificationPermission,
+      key: 'room',
+    },
+  ]
+);
+
+const DefaultAtRoomNotification = makePushRuleData(
+  PushRuleKind.Override,
+  RuleId.AtRoomNotification,
+  getNotificationModeActions(NotificationMode.Notify, { highlight: true }),
+  [
+    {
+      kind: ConditionKind.EventMatch,
+      key: 'content.body',
+      pattern: '@room',
+    },
+    {
+      kind: ConditionKind.SenderNotificationPermission,
+      key: 'room',
+    },
+  ]
+);
+
+type PushRulesProps = {
+  ruleId: RuleId;
+  pushRules: IPushRules;
+  defaultPushRuleData: PushRuleData;
+};
+function MentionModeSwitcher({ ruleId, pushRules, defaultPushRuleData }: PushRulesProps) {
+  const mx = useMatrixClient();
+
+  const { kind, pushRule } = usePushRule(pushRules, ruleId) ?? defaultPushRuleData;
+  const getModeActions = useNotificationModeActions(NOTIFY_MODE_OPS);
+
+  const handleChange = useCallback(
+    async (mode: NotificationMode) => {
+      const actions = getModeActions(mode);
+      await mx.setPushRuleActions('global', kind, ruleId, actions);
+    },
+    [mx, getModeActions, kind, ruleId]
+  );
+
+  return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
+}
+
+export function SpecialMessagesNotifications() {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+  const { displayName } = useUserProfile(userId);
+  const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
+  const pushRules = useMemo(
+    () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
+    [pushRulesEvt]
+  );
+
+  return (
+    <Box direction="Column" gap="100">
+      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
+        <Text size="L400">Special Messages</Text>
+        <Box gap="100">
+          <Text size="T200">Badge: </Text>
+          <Badge radii="300" variant="Success" fill="Solid">
+            <Text size="L400">1</Text>
+          </Badge>
+        </Box>
+      </Box>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title={`Mention User ID ("${userId}")`}
+          after={
+            <MentionModeSwitcher
+              pushRules={pushRules}
+              ruleId={RuleId.IsUserMention}
+              defaultPushRuleData={getDefaultIsUserMention(userId)}
+            />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title={`Contains Displayname ${displayName ? `("${displayName}")` : ''}`}
+          after={
+            <MentionModeSwitcher
+              pushRules={pushRules}
+              ruleId={RuleId.ContainsDisplayName}
+              defaultPushRuleData={DefaultContainsDisplayName}
+            />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title={`Contains Username ("${getMxIdLocalPart(userId)}")`}
+          after={
+            <MentionModeSwitcher
+              pushRules={pushRules}
+              ruleId={RuleId.ContainsUserName}
+              defaultPushRuleData={getDefaultContainsUsername(getMxIdLocalPart(userId) ?? userId)}
+            />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Mention @room"
+          after={
+            <MentionModeSwitcher
+              pushRules={pushRules}
+              ruleId={RuleId.IsRoomMention}
+              defaultPushRuleData={DefaultIsRoomMention}
+            />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Contains @room"
+          after={
+            <MentionModeSwitcher
+              pushRules={pushRules}
+              ruleId={RuleId.AtRoomNotification}
+              defaultPushRuleData={DefaultAtRoomNotification}
+            />
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/hooks/useNotificationMode.ts

@@ -7,7 +7,7 @@ export enum NotificationMode {
   NotifyLoud = 'NotifyLoud',
 }
 
-type NotificationModeOptions = {
+export type NotificationModeOptions = {
   soundValue?: string;
   highlight?: boolean;
 };

src/app/hooks/usePushRule.ts

@@ -1,4 +1,11 @@
-import { IPushRule, IPushRules, PushRuleKind, RuleId } from 'matrix-js-sdk';
+import {
+  IPushRule,
+  IPushRules,
+  PushRuleAction,
+  PushRuleCondition,
+  PushRuleKind,
+  RuleId,
+} from 'matrix-js-sdk';
 import { useMemo } from 'react';
 
 export type PushRuleData = {
@@ -6,6 +13,26 @@ export type PushRuleData = {
   pushRule: IPushRule;
 };
 
+export const makePushRuleData = (
+  kind: PushRuleKind,
+  ruleId: RuleId,
+  actions: PushRuleAction[],
+  conditions?: PushRuleCondition[],
+  pattern?: string,
+  enabled?: boolean,
+  _default?: boolean
+): PushRuleData => ({
+  kind,
+  pushRule: {
+    rule_id: ruleId,
+    default: _default ?? true,
+    enabled: enabled ?? true,
+    pattern,
+    conditions,
+    actions,
+  },
+});
+
 export const orderedPushRuleKinds: PushRuleKind[] = [
   PushRuleKind.Override,
   PushRuleKind.ContentSpecific,