Add edit nickname to contact modal for group members

_locales/en/messages.json

@@ -4846,6 +4846,10 @@
     "messageformat": "Include muted chats in badge count",
     "description": "Description for counting muted conversations in badge setting"
   },
+  "icu:ContactModal--nickname": {
+    "messageformat": "Nickname",
+    "description": "Label for the nickname field in the Group Contact Details modal"
+  },
   "icu:ContactModal--message": {
     "messageformat": "Message",
     "description": "(Deleted 2024/03/07) Button text for send message button in Group Contact Details modal"

stylesheets/components/ContactModal.scss

@@ -115,6 +115,19 @@
     width: 20px;
   }
 
+  &__nickname__bubble-icon {
+    height: 20px;
+    width: 20px;
+
+    @include light-theme {
+      @include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-75);
+    }
+
+    @include dark-theme {
+      @include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15);
+    }
+  }
+
   &__send-message__bubble-icon {
     height: 20px;
     width: 20px;

ts/components/EditNicknameAndNoteModal.tsx

@@ -14,6 +14,7 @@ import type {
 import { Input } from './Input';
 import { AutoSizeTextArea } from './AutoSizeTextArea';
 import { Button, ButtonVariant } from './Button';
+import { strictAssert } from '../util/assert';
 
 const formSchema = z.object({
   nickname: z
@@ -43,6 +44,11 @@ export function EditNicknameAndNoteModal({
   onSave,
   onClose,
 }: EditNicknameAndNoteModalProps): JSX.Element {
+  strictAssert(
+    conversation.type === 'direct',
+    'Expected a direct conversation'
+  );
+
   const [givenName, setGivenName] = useState(
     conversation.nicknameGivenName ?? ''
   );

ts/components/conversation/ContactModal.tsx

@@ -25,6 +25,7 @@ import { UserText } from '../UserText';
 import { Button, ButtonIconType, ButtonVariant } from '../Button';
 import { isInSystemContacts } from '../../util/isInSystemContacts';
 import { InContactsIcon } from '../InContactsIcon';
+import { areNicknamesEnabled } from '../../util/nicknames';
 
 export type PropsDataType = {
   areWeASubscriber: boolean;
@@ -43,6 +44,7 @@ export type PropsDataType = {
 type PropsActionType = {
   blockConversation: (id: string) => void;
   hideContactModal: () => void;
+  onOpenEditNicknameAndNoteModal: () => void;
   onOutgoingAudioCallInConversation: (conversationId: string) => unknown;
   onOutgoingVideoCallInConversation: (conversationId: string) => unknown;
   removeMemberFromGroup: (conversationId: string, contactId: string) => void;
@@ -83,6 +85,7 @@ export function ContactModal({
   i18n,
   isAdmin,
   isMember,
+  onOpenEditNicknameAndNoteModal,
   onOutgoingAudioCallInConversation,
   onOutgoingVideoCallInConversation,
   removeMemberFromGroup,
@@ -303,6 +306,19 @@ export function ContactModal({
             )}
             <div className="ContactModal__divider" />
             <div className="ContactModal__button-container">
+              {areNicknamesEnabled() && !contact.isMe && (
+                <button
+                  type="button"
+                  className="ContactModal__button ContactModal__block"
+                  onClick={onOpenEditNicknameAndNoteModal}
+                >
+                  <div className="ContactModal__bubble-icon">
+                    <div className="ContactModal__nickname__bubble-icon" />
+                  </div>
+                  <span>{i18n('icu:ContactModal--nickname')}</span>
+                </button>
+              )}
+
               {!contact.isMe && (
                 <button
                   type="button"

ts/state/ducks/conversations.ts

@@ -4698,6 +4698,11 @@ function updateNicknameAndNote(
       'updateNicknameAndNote: Conversation not found'
     );
 
+    strictAssert(
+      isDirectConversation(conversationModel.attributes),
+      'updateNicknameAndNote: Conversation is not a group'
+    );
+
     conversationModel.set({
       nicknameGivenName: nickname?.givenName,
       nicknameFamilyName: nickname?.familyName,

ts/state/smart/ContactModal.tsx

@@ -1,7 +1,7 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { memo, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ContactModal } from '../../components/conversation/ContactModal';
 import { getAreWeASubscriber } from '../selectors/items';
@@ -15,6 +15,7 @@ import { useConversationsActions } from '../ducks/conversations';
 import { useGlobalModalActions } from '../ducks/globalModals';
 import { useCallingActions } from '../ducks/calling';
 import { getContactModalState } from '../selectors/globalModals';
+import { strictAssert } from '../../util/assert';
 
 export const SmartContactModal = memo(function SmartContactModal() {
   const i18n = useSelector(getIntl);
@@ -56,12 +57,18 @@ export const SmartContactModal = memo(function SmartContactModal() {
     toggleAddUserToAnotherGroupModal,
     toggleSafetyNumberModal,
     hideContactModal,
+    toggleEditNicknameAndNoteModal,
   } = useGlobalModalActions();
   const {
     onOutgoingVideoCallInConversation,
     onOutgoingAudioCallInConversation,
   } = useCallingActions();
 
+  const handleOpenEditNicknameAndNoteModal = useCallback(() => {
+    strictAssert(contactId != null, 'Expected conversationId to be set');
+    toggleEditNicknameAndNoteModal({ conversationId: contactId });
+  }, [toggleEditNicknameAndNoteModal, contactId]);
+
   return (
     <ContactModal
       areWeAdmin={areWeAdmin}
@@ -76,6 +83,7 @@ export const SmartContactModal = memo(function SmartContactModal() {
       i18n={i18n}
       isAdmin={isAdmin}
       isMember={isMember}
+      onOpenEditNicknameAndNoteModal={handleOpenEditNicknameAndNoteModal}
       onOutgoingAudioCallInConversation={onOutgoingAudioCallInConversation}
       onOutgoingVideoCallInConversation={onOutgoingVideoCallInConversation}
       removeMemberFromGroup={removeMemberFromGroup}