Introduce TitleTransition notification

ts/components/conversation/SystemMessage.tsx

@@ -12,7 +12,39 @@ export enum SystemMessageKind {
 }
 
 export type PropsType = {
-  icon: string;
+  icon:
+    | 'audio-incoming'
+    | 'audio-missed'
+    | 'audio-outgoing'
+    | 'group'
+    | 'group-access'
+    | 'group-add'
+    | 'group-approved'
+    | 'group-avatar'
+    | 'group-decline'
+    | 'group-edit'
+    | 'group-leave'
+    | 'group-remove'
+    | 'group-summary'
+    | 'info'
+    | 'phone'
+    | 'profile'
+    | 'safety-number'
+    | 'session-refresh'
+    | 'thread'
+    | 'timer'
+    | 'timer-disabled'
+    | 'unsupported'
+    | 'unsupported--can-process'
+    | 'verified'
+    | 'verified-not'
+    | 'video'
+    | 'video-incoming'
+    | 'video-missed'
+    | 'video-outgoing'
+    | 'warning'
+    | 'payment-event'
+    | 'merge';
   contents: ReactNode;
   button?: ReactNode;
   kind?: SystemMessageKind;

ts/components/conversation/TimelineItem.stories.tsx

@@ -193,6 +193,12 @@ export function Notification(): JSX.Element {
         timestamp: Date.now(),
       },
     },
+    {
+      type: 'titleTransitionNotification',
+      data: {
+        oldTitle: 'alice.01',
+      },
+    },
     {
       type: 'callHistory',
       data: {

ts/components/conversation/TimelineItem.tsx

@@ -20,6 +20,8 @@ import type { PropsDataType as DeliveryIssueProps } from './DeliveryIssueNotific
 import { DeliveryIssueNotification } from './DeliveryIssueNotification';
 import type { PropsData as ChangeNumberNotificationProps } from './ChangeNumberNotification';
 import { ChangeNumberNotification } from './ChangeNumberNotification';
+import type { PropsData as TitleTransitionNotificationProps } from './TitleTransitionNotification';
+import { TitleTransitionNotification } from './TitleTransitionNotification';
 import type { CallingNotificationType } from '../../util/callingNotification';
 import { InlineNotificationWrapper } from './InlineNotificationWrapper';
 import type { PropsData as UnsupportedMessageProps } from './UnsupportedMessage';
@@ -91,6 +93,10 @@ type ChangeNumberNotificationType = {
   type: 'changeNumberNotification';
   data: ChangeNumberNotificationProps;
 };
+type TitleTransitionNotificationType = {
+  type: 'titleTransitionNotification';
+  data: TitleTransitionNotificationProps;
+};
 type SafetyNumberNotificationType = {
   type: 'safetyNumberNotification';
   data: SafetyNumberNotificationProps;
@@ -148,6 +154,7 @@ export type TimelineItemType = (
   | SafetyNumberNotificationType
   | TimerNotificationType
   | UniversalTimerNotificationType
+  | TitleTransitionNotificationType
   | ContactRemovedNotificationType
   | UnsupportedMessageType
   | VerificationNotificationType
@@ -296,6 +303,14 @@ export const TimelineItem = memo(function TimelineItem({
           i18n={i18n}
         />
       );
+    } else if (item.type === 'titleTransitionNotification') {
+      notification = (
+        <TitleTransitionNotification
+          {...reducedProps}
+          {...item.data}
+          i18n={i18n}
+        />
+      );
     } else if (item.type === 'safetyNumberNotification') {
       notification = (
         <SafetyNumberNotification

ts/components/conversation/TitleTransitionNotification.stories.tsx

@@ -0,0 +1,19 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { setupI18n } from '../../util/setupI18n';
+import enMessages from '../../../_locales/en/messages.json';
+import type { Props } from './TitleTransitionNotification';
+import { TitleTransitionNotification } from './TitleTransitionNotification';
+
+export default {
+  title: 'Components/Conversation/TitleTransitionNotification',
+} satisfies Meta<Props>;
+
+const i18n = setupI18n('en', enMessages);
+
+export function Default(): JSX.Element {
+  return <TitleTransitionNotification oldTitle="alice.01" i18n={i18n} />;
+}

ts/components/conversation/TitleTransitionNotification.tsx

@@ -0,0 +1,39 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import type { LocalizerType } from '../../types/Util';
+import { Intl } from '../Intl';
+
+import { SystemMessage } from './SystemMessage';
+import { UserText } from '../UserText';
+
+export type PropsData = {
+  oldTitle: string;
+};
+
+export type PropsHousekeeping = {
+  i18n: LocalizerType;
+};
+
+export type Props = PropsData & PropsHousekeeping;
+
+export function TitleTransitionNotification(props: Props): JSX.Element {
+  const { i18n, oldTitle } = props;
+
+  return (
+    <SystemMessage
+      contents={
+        <Intl
+          id="icu:TitleTransition--notification"
+          components={{
+            oldTitle: <UserText text={oldTitle} />,
+          }}
+          i18n={i18n}
+        />
+      }
+      icon="thread"
+    />
+  );
+}