AboutContactModal improvements

_locales/en/messages.json

@@ -1394,6 +1394,10 @@
     "messageformat": "About",
     "description": "Title of About modal"
   },
+  "icu:AboutContactModal__title--myself": {
+    "messageformat": "You",
+    "description": "Title of About modal when viewing your own information"
+  },
   "icu:AboutContactModal__verified": {
     "messageformat": "Verified",
     "description": "Text of a button on About modal leading to a safety number modal"

stylesheets/components/AboutContactModal.scss

@@ -27,6 +27,7 @@
 
   &__title {
     @include font-title-2;
+    font-weight: 500;
 
     margin: 0;
     margin-block-end: 4px;

ts/components/GlobalModalContainer.tsx

@@ -23,8 +23,6 @@ import { ConfirmationDialog } from './ConfirmationDialog';
 import { FormattingWarningModal } from './FormattingWarningModal';
 import { SendEditWarningModal } from './SendEditWarningModal';
 import { SignalConnectionsModal } from './SignalConnectionsModal';
-import { AboutContactModal } from './conversation/AboutContactModal';
-import type { ExternalPropsType as AboutContactModalPropsType } from './conversation/AboutContactModal';
 import { WhatsNewModal } from './WhatsNewModal';
 
 // NOTE: All types should be required for this component so that the smart
@@ -76,8 +74,8 @@ export type PropsType = {
   isSignalConnectionsVisible: boolean;
   toggleSignalConnectionsModal: () => unknown;
   // AboutContactModal
-  aboutContactModalProps: AboutContactModalPropsType | undefined;
+  isAboutContactModalVisible: boolean;
-  toggleAboutContactModal: () => unknown;
+  renderAboutContactModal: () => JSX.Element | null;
   // StickerPackPreviewModal
   stickerPackPreviewId: string | undefined;
   renderStickerPreviewModal: () => JSX.Element | null;
@@ -145,8 +143,8 @@ export function GlobalModalContainer({
   isSignalConnectionsVisible,
   toggleSignalConnectionsModal,
   // AboutContactModal
-  aboutContactModalProps,
+  isAboutContactModalVisible,
-  toggleAboutContactModal,
+  renderAboutContactModal,
   // StickerPackPreviewModal
   stickerPackPreviewId,
   renderStickerPreviewModal,
@@ -260,14 +258,8 @@ export function GlobalModalContainer({
     return renderSafetyNumber();
   }
 
-  if (aboutContactModalProps) {
+  if (isAboutContactModalVisible) {
-    return (
+    return renderAboutContactModal();
-      <AboutContactModal
-        i18n={i18n}
-        onClose={toggleAboutContactModal}
-        {...aboutContactModalProps}
-      />
-    );
   }
 
   if (contactModalState) {

ts/components/conversation/AboutContactModal.stories.tsx

@@ -44,6 +44,11 @@ const systemContact = getDefaultConversation({
   phoneNumber: '+1 555 123-4567',
   hasMessages: true,
 });
+const me = getDefaultConversation({
+  isMe: true,
+  acceptedMessageRequest: true,
+  hasMessages: true,
+});
 
 export default {
   title: 'Components/Conversation/AboutContactModal',
@@ -67,6 +72,10 @@ export function Defaults(args: PropsType): JSX.Element {
   return <AboutContactModal {...args} />;
 }
 
+export function Me(args: PropsType): JSX.Element {
+  return <AboutContactModal {...args} conversation={me} />;
+}
+
 export function Verified(args: PropsType): JSX.Element {
   return <AboutContactModal {...args} conversation={verifiedConversation} />;
 }

ts/components/conversation/AboutContactModal.tsx

@@ -15,10 +15,6 @@ import { About } from './About';
 export type PropsType = Readonly<{
   i18n: LocalizerType;
   onClose: () => void;
-}> &
-  ExternalPropsType;
-
-export type ExternalPropsType = Readonly<{
   conversation: ConversationType;
   isSignalConnection: boolean;
   toggleSignalConnectionsModal: () => void;
@@ -37,6 +33,8 @@ export function AboutContactModal({
   unblurAvatar,
   onClose,
 }: PropsType): JSX.Element {
+  const { isMe } = conversation;
+
   useEffect(() => {
     // Kick off the expensive hydration of the current sharedGroupNames
     updateSharedGroups(conversation.id);
@@ -70,7 +68,9 @@ export function AboutContactModal({
 
   let statusRow: JSX.Element | undefined;
 
-  if (conversation.isBlocked) {
+  if (isMe) {
+    // No status for ourselves
+  } else if (conversation.isBlocked) {
     statusRow = (
       <div className="AboutContactModal__row">
         <i className="AboutContactModal__row__icon AboutContactModal__row__icon--blocked" />
@@ -127,7 +127,9 @@ export function AboutContactModal({
 
       <div className="AboutContactModal__row">
         <h3 className="AboutContactModal__title">
-          {i18n('icu:AboutContactModal__title')}
+          {isMe
+            ? i18n('icu:AboutContactModal__title--myself')
+            : i18n('icu:AboutContactModal__title')}
         </h3>
       </div>
 
@@ -136,7 +138,7 @@ export function AboutContactModal({
         <UserText text={conversation.title} />
       </div>
 
-      {conversation.isVerified ? (
+      {!isMe && conversation.isVerified ? (
         <div className="AboutContactModal__row">
           <i className="AboutContactModal__row__icon AboutContactModal__row__icon--verified" />
           <button
@@ -149,7 +151,7 @@ export function AboutContactModal({
         </div>
       ) : null}
 
-      {conversation.about ? (
+      {!isMe && conversation.about ? (
         <div className="AboutContactModal__row">
           <i className="AboutContactModal__row__icon AboutContactModal__row__icon--about" />
           <About
@@ -159,7 +161,7 @@ export function AboutContactModal({
         </div>
       ) : null}
 
-      {isSignalConnection ? (
+      {!isMe && isSignalConnection ? (
         <div className="AboutContactModal__row">
           <i className="AboutContactModal__row__icon AboutContactModal__row__icon--connections" />
           <button
@@ -172,7 +174,7 @@ export function AboutContactModal({
         </div>
       ) : null}
 
-      {isInSystemContacts(conversation) ? (
+      {!isMe && isInSystemContacts(conversation) ? (
         <div className="AboutContactModal__row">
           <i className="AboutContactModal__row__icon AboutContactModal__row__icon--person" />
           {i18n('icu:AboutContactModal__system-contact', {
@@ -188,15 +190,17 @@ export function AboutContactModal({
         </div>
       ) : null}
 
-      <div className="AboutContactModal__row">
+      {!isMe && (
-        <i className="AboutContactModal__row__icon AboutContactModal__row__icon--group" />
+        <div className="AboutContactModal__row">
-        <div>
+          <i className="AboutContactModal__row__icon AboutContactModal__row__icon--group" />
-          <SharedGroupNames
+          <div>
-            i18n={i18n}
+            <SharedGroupNames
-            sharedGroupNames={conversation.sharedGroupNames || []}
+              i18n={i18n}
-          />
+              sharedGroupNames={conversation.sharedGroupNames || []}
+            />
+          </div>
         </div>
-      </div>
+      )}
 
       {statusRow}
     </Modal>

ts/state/ducks/globalModals.ts

@@ -77,13 +77,10 @@ type MigrateToGV2PropsType = ReadonlyDeep<{
   hasMigrated: boolean;
   invitedMemberIds: Array<string>;
 }>;
-export type AboutContactModalPropsType = ReadonlyDeep<{
-  contactId: string;
-}>;
 
 export type GlobalModalsStateType = ReadonlyDeep<{
   addUserToAnotherGroupModalContactId?: string;
-  aboutContactModalProps?: AboutContactModalPropsType;
+  aboutContactModalContactId?: string;
   authArtCreatorData?: AuthorizeArtCreatorDataType;
   contactModalState?: ContactModalStateType;
   deleteMessagesProps?: DeleteMessagesPropsType;
@@ -237,7 +234,7 @@ type ToggleAddUserToAnotherGroupModalActionType = ReadonlyDeep<{
 
 type ToggleAboutContactModalActionType = ReadonlyDeep<{
   type: typeof TOGGLE_ABOUT_MODAL;
-  payload: AboutContactModalPropsType | undefined;
+  payload: string | undefined;
 }>;
 
 type ToggleSignalConnectionsModalActionType = ReadonlyDeep<{
@@ -644,7 +641,7 @@ function toggleAboutContactModal(
 ): ToggleAboutContactModalActionType {
   return {
     type: TOGGLE_ABOUT_MODAL,
-    payload: contactId ? { contactId } : undefined,
+    payload: contactId,
   };
 }
 
@@ -915,7 +912,7 @@ export function reducer(
   if (action.type === TOGGLE_ABOUT_MODAL) {
     return {
       ...state,
-      aboutContactModalProps: action.payload,
+      aboutContactModalContactId: action.payload,
     };
   }
 
@@ -965,6 +962,14 @@ export function reducer(
   }
 
   if (action.type === SHOW_CONTACT_MODAL) {
+    const ourId = window.ConversationController.getOurConversationIdOrThrow();
+    if (action.payload.contactId === ourId) {
+      return {
+        ...state,
+        aboutContactModalContactId: ourId,
+      };
+    }
+
     return {
       ...state,
       contactModalState: action.payload,

ts/state/smart/AboutContactModal.tsx

@@ -0,0 +1,47 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { AboutContactModal } from '../../components/conversation/AboutContactModal';
+import { isSignalConnection } from '../../util/getSignalConnections';
+import { getIntl } from '../selectors/user';
+import { getGlobalModalsState } from '../selectors/globalModals';
+import { getConversationSelector } from '../selectors/conversations';
+import { useConversationsActions } from '../ducks/conversations';
+import { useGlobalModalActions } from '../ducks/globalModals';
+
+export function SmartAboutContactModal(): JSX.Element | null {
+  const i18n = useSelector(getIntl);
+  const globalModals = useSelector(getGlobalModalsState);
+  const { aboutContactModalContactId: contactId } = globalModals;
+  const getConversation = useSelector(getConversationSelector);
+
+  const { updateSharedGroups, unblurAvatar } = useConversationsActions();
+
+  const {
+    toggleAboutContactModal,
+    toggleSignalConnectionsModal,
+    toggleSafetyNumberModal,
+  } = useGlobalModalActions();
+
+  if (!contactId) {
+    return null;
+  }
+
+  const conversation = getConversation(contactId);
+
+  return (
+    <AboutContactModal
+      i18n={i18n}
+      conversation={conversation}
+      updateSharedGroups={updateSharedGroups}
+      unblurAvatar={unblurAvatar}
+      toggleSignalConnectionsModal={toggleSignalConnectionsModal}
+      toggleSafetyNumberModal={toggleSafetyNumberModal}
+      isSignalConnection={isSignalConnection(conversation)}
+      onClose={toggleAboutContactModal}
+    />
+  );
+}

ts/state/smart/GlobalModalContainer.tsx

@@ -6,10 +6,9 @@ import { useSelector } from 'react-redux';
 
 import type { GlobalModalsStateType } from '../ducks/globalModals';
 import type { StateType } from '../reducer';
-import { isSignalConnection } from '../../util/getSignalConnections';
-import type { ExternalPropsType as AboutContactModalPropsType } from '../../components/conversation/AboutContactModal';
 import { ErrorModal } from '../../components/ErrorModal';
 import { GlobalModalContainer } from '../../components/GlobalModalContainer';
+import { SmartAboutContactModal } from './AboutContactModal';
 import { SmartAddUserToAnotherGroupModal } from './AddUserToAnotherGroupModal';
 import { SmartContactModal } from './ContactModal';
 import { SmartEditHistoryMessagesModal } from './EditHistoryMessagesModal';
@@ -21,13 +20,9 @@ import { SmartSendAnywayDialog } from './SendAnywayDialog';
 import { SmartShortcutGuideModal } from './ShortcutGuideModal';
 import { SmartStickerPreviewModal } from './StickerPreviewModal';
 import { SmartStoriesSettingsModal } from './StoriesSettingsModal';
-import {
+import { getConversationsStoppingSend } from '../selectors/conversations';
-  getConversationSelector,
-  getConversationsStoppingSend,
-} from '../selectors/conversations';
 import { getIntl, getTheme } from '../selectors/user';
 import { useGlobalModalActions } from '../ducks/globalModals';
-import { useConversationsActions } from '../ducks/conversations';
 import { SmartDeleteMessagesModal } from './DeleteMessagesModal';
 
 function renderEditHistoryMessagesModal(): JSX.Element {
@@ -66,16 +61,19 @@ function renderShortcutGuideModal(): JSX.Element {
   return <SmartShortcutGuideModal />;
 }
 
+function renderAboutContactModal(): JSX.Element {
+  return <SmartAboutContactModal />;
+}
+
 export function SmartGlobalModalContainer(): JSX.Element {
   const conversationsStoppingSend = useSelector(getConversationsStoppingSend);
-  const getConversation = useSelector(getConversationSelector);
   const i18n = useSelector(getIntl);
   const theme = useSelector(getTheme);
 
   const hasSafetyNumberChangeModal = conversationsStoppingSend.length > 0;
 
   const {
-    aboutContactModalProps: aboutContactModalRawProps,
+    aboutContactModalContactId,
     addUserToAnotherGroupModalContactId,
     authArtCreatorData,
     contactModalState,
@@ -108,27 +106,9 @@ export function SmartGlobalModalContainer(): JSX.Element {
     hideWhatsNewModal,
     showFormattingWarningModal,
     showSendEditWarningModal,
-    toggleAboutContactModal,
     toggleSignalConnectionsModal,
-    toggleSafetyNumberModal,
   } = useGlobalModalActions();
 
-  const { updateSharedGroups, unblurAvatar } = useConversationsActions();
-
-  let aboutContactModalProps: AboutContactModalPropsType | undefined;
-  if (aboutContactModalRawProps) {
-    const conversation = getConversation(aboutContactModalRawProps.contactId);
-
-    aboutContactModalProps = {
-      conversation,
-      isSignalConnection: isSignalConnection(conversation),
-      toggleSignalConnectionsModal,
-      toggleSafetyNumberModal,
-      updateSharedGroups,
-      unblurAvatar,
-    };
-  }
-
   const renderAddUserToAnotherGroup = useCallback(() => {
     return (
       <SmartAddUserToAnotherGroupModal
@@ -166,7 +146,6 @@ export function SmartGlobalModalContainer(): JSX.Element {
 
   return (
     <GlobalModalContainer
-      aboutContactModalProps={aboutContactModalProps}
       addUserToAnotherGroupModalContactId={addUserToAnotherGroupModalContactId}
       contactModalState={contactModalState}
       editHistoryMessages={editHistoryMessages}
@@ -178,11 +157,13 @@ export function SmartGlobalModalContainer(): JSX.Element {
       hideUserNotFoundModal={hideUserNotFoundModal}
       hideWhatsNewModal={hideWhatsNewModal}
       i18n={i18n}
+      isAboutContactModalVisible={aboutContactModalContactId != null}
       isProfileEditorVisible={isProfileEditorVisible}
       isShortcutGuideModalVisible={isShortcutGuideModalVisible}
       isSignalConnectionsVisible={isSignalConnectionsVisible}
       isStoriesSettingsVisible={isStoriesSettingsVisible}
       isWhatsNewVisible={isWhatsNewVisible}
+      renderAboutContactModal={renderAboutContactModal}
       renderAddUserToAnotherGroup={renderAddUserToAnotherGroup}
       renderContactModal={renderContactModal}
       renderEditHistoryMessagesModal={renderEditHistoryMessagesModal}
@@ -203,7 +184,6 @@ export function SmartGlobalModalContainer(): JSX.Element {
       showSendEditWarningModal={showSendEditWarningModal}
       stickerPackPreviewId={stickerPackPreviewId}
       theme={theme}
-      toggleAboutContactModal={toggleAboutContactModal}
       toggleSignalConnectionsModal={toggleSignalConnectionsModal}
       userNotFoundModalState={userNotFoundModalState}
       usernameOnboardingState={usernameOnboardingState}