Export/import simple update messages

ts/components/conversation/JoinedSignalNotification.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 './JoinedSignalNotification';
+import { JoinedSignalNotification } from './JoinedSignalNotification';
+
+export default {
+  title: 'Components/Conversation/JoinedSignalNotification',
+} satisfies Meta<Props>;
+
+const i18n = setupI18n('en', enMessages);
+
+export function Default(): JSX.Element {
+  return <JoinedSignalNotification timestamp={1618894800000} i18n={i18n} />;
+}

ts/components/conversation/JoinedSignalNotification.tsx

@@ -0,0 +1,37 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import type { LocalizerType } from '../../types/Util';
+import { I18n } from '../I18n';
+
+import { SystemMessage } from './SystemMessage';
+import { MessageTimestamp } from './MessageTimestamp';
+
+export type PropsData = {
+  timestamp: number;
+};
+
+export type PropsHousekeeping = {
+  i18n: LocalizerType;
+};
+
+export type Props = PropsData & PropsHousekeeping;
+
+export function JoinedSignalNotification(props: Props): JSX.Element {
+  const { i18n, timestamp } = props;
+
+  return (
+    <SystemMessage
+      contents={
+        <>
+          <I18n id="icu:JoinedSignal--notification" i18n={i18n} />
+          &nbsp;·&nbsp;
+          <MessageTimestamp i18n={i18n} timestamp={timestamp} />
+        </>
+      }
+      icon="info"
+    />
+  );
+}

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 JoinedSignalNotificationProps } from './JoinedSignalNotification';
+import { JoinedSignalNotification } from './JoinedSignalNotification';
 import type { PropsData as TitleTransitionNotificationProps } from './TitleTransitionNotification';
 import { TitleTransitionNotification } from './TitleTransitionNotification';
 import type { CallingNotificationType } from '../../util/callingNotification';
@@ -98,6 +100,10 @@ type ChangeNumberNotificationType = {
   type: 'changeNumberNotification';
   data: ChangeNumberNotificationProps;
 };
+type JoinedSignalNotificationType = {
+  type: 'joinedSignalNotification';
+  data: JoinedSignalNotificationProps;
+};
 type TitleTransitionNotificationType = {
   type: 'titleTransitionNotification';
   data: TitleTransitionNotificationProps;
@@ -156,6 +162,7 @@ export type TimelineItemType = (
   | GroupNotificationType
   | GroupV1MigrationType
   | GroupV2ChangeType
+  | JoinedSignalNotificationType
   | MessageType
   | PhoneNumberDiscoveryNotificationType
   | ProfileChangeNotificationType
@@ -321,6 +328,14 @@ export const TimelineItem = memo(function TimelineItem({
           i18n={i18n}
         />
       );
+    } else if (item.type === 'joinedSignalNotification') {
+      notification = (
+        <JoinedSignalNotification
+          {...reducedProps}
+          {...item.data}
+          i18n={i18n}
+        />
+      );
     } else if (item.type === 'titleTransitionNotification') {
       notification = (
         <TitleTransitionNotification