Show the system contacts icon in more places

ts/components/conversation/ContactModal.stories.tsx

@@ -119,3 +119,11 @@ WithUnreadStories.args = {
   hasStories: HasStories.Unread,
 };
 WithUnreadStories.storyName = 'Unread Stories';
+
+export const InSystemContacts = Template.bind({});
+InSystemContacts.args = {
+  contact: {
+    ...defaultContact,
+    systemGivenName: defaultContact.title,
+  },
+};

ts/components/conversation/ContactModal.tsx

@@ -23,6 +23,8 @@ import { RemoveGroupMemberConfirmationDialog } from './RemoveGroupMemberConfirma
 import { missingCaseError } from '../../util/missingCaseError';
 import { UserText } from '../UserText';
 import { Button, ButtonIconType, ButtonVariant } from '../Button';
+import { isInSystemContacts } from '../../util/isInSystemContacts';
+import { InContactsIcon } from '../InContactsIcon';
 
 export type PropsDataType = {
   areWeASubscriber: boolean;
@@ -200,7 +202,6 @@ export function ContactModal({
   switch (view) {
     case ContactModalView.Default: {
       const preferredBadge: undefined | BadgeType = badges[0];
-
       return (
         <Modal
           modalName="ContactModal"
@@ -249,6 +250,15 @@ export function ContactModal({
             >
               <div className="ContactModal__name__text">
                 <UserText text={contact.title} />
+                {isInSystemContacts(contact) && (
+                  <span>
+                    {' '}
+                    <InContactsIcon
+                      className="ContactModal__name__contact-icon"
+                      i18n={i18n}
+                    />
+                  </span>
+                )}
               </div>
               <i className="ContactModal__name__chevron" />
             </button>

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -142,6 +142,22 @@ export function Basic(): JSX.Element {
   return <ConversationDetails {...props} />;
 }
 
+export function SystemContact(): JSX.Element {
+  const props = createProps();
+  const contact = getDefaultConversation();
+
+  return (
+    <ConversationDetails
+      {...props}
+      isGroup={false}
+      conversation={{
+        ...contact,
+        systemGivenName: contact.title,
+      }}
+    />
+  );
+}
+
 export function AsAdmin(): JSX.Element {
   const props = createProps();
 

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -15,6 +15,8 @@ import { assertDev } from '../../../util/assert';
 import { BadgeDialog } from '../../BadgeDialog';
 import type { BadgeType } from '../../../badges/types';
 import { UserText } from '../../UserText';
+import { isInSystemContacts } from '../../../util/isInSystemContacts';
+import { InContactsIcon } from '../../InContactsIcon';
 
 export type Props = {
   areWeASubscriber: boolean;
@@ -211,7 +213,15 @@ export function ConversationDetailsHeader({
       >
         <div className="ConversationDetailsHeader__title">
           <UserText text={conversation.title} />
-
+          {isInSystemContacts(conversation) && (
+            <span>
+              {' '}
+              <InContactsIcon
+                className="ConversationDetailsHeader__title-contact-icon"
+                i18n={i18n}
+              />
+            </span>
+          )}
           <span className="ConversationDetailsHeader__about-icon" />
         </div>
       </button>