diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 216b553539eb..e4aa51f26d5a 100644 --- a/_locales/en/messages.json +++ b/_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" diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss index 44ed2700f089..d6a1fb0061b3 100644 --- a/stylesheets/components/ContactModal.scss +++ b/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; diff --git a/ts/components/EditNicknameAndNoteModal.tsx b/ts/components/EditNicknameAndNoteModal.tsx index 0ee989062c1c..8a561a745880 100644 --- a/ts/components/EditNicknameAndNoteModal.tsx +++ b/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 ?? '' ); diff --git a/ts/components/conversation/ContactModal.tsx b/ts/components/conversation/ContactModal.tsx index e2943d25470d..de169497c0ec 100644 --- a/ts/components/conversation/ContactModal.tsx +++ b/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({ )}
+ {areNicknamesEnabled() && !contact.isMe && ( + + )} + {!contact.isMe && (