From b6afa47126e4a77faec653acdd393fce9bafa2f1 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:41:13 -0700
Subject: [PATCH] Emojify note and add non-nickname tooltip

---
 _locales/en/messages.json                     |  4 ++++
 stylesheets/components/AboutContactModal.scss |  4 ++++
 ts/components/EditNicknameAndNoteModal.tsx    |  2 +-
 ts/components/NotePreviewModal.tsx            |  8 ++++++-
 ts/components/UserText.tsx                    |  8 +++++--
 .../conversation/AboutContactModal.tsx        | 22 +++++++++++++++++--
 .../ProfileChangeNotification.tsx             |  3 ++-
 ts/services/storageRecordOps.ts               |  4 ++--
 ts/state/ducks/conversations.ts               |  2 +-
 9 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bd674daed8..9359feed8f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1370,6 +1370,10 @@
     "messageformat": "{nickname} <muted>({titleNoNickname})</muted>",
     "description": "Title of conversation when there is a nickname, example: 'Jim (James Smith)'"
   },
+  "icu:AboutContactModal__TitleWithoutNickname__Tooltip": {
+    "messageformat": "“{title}” is the profile name this person set for themselves in Signal.",
+    "description": "Tooltip for the non-nickname title of a conversation."
+  },
   "icu:AboutContactModal__verified": {
     "messageformat": "Verified",
     "description": "Text of a button on About modal leading to a safety number modal"
diff --git a/stylesheets/components/AboutContactModal.scss b/stylesheets/components/AboutContactModal.scss
index fdd354bf98..11ce8eed61 100644
--- a/stylesheets/components/AboutContactModal.scss
+++ b/stylesheets/components/AboutContactModal.scss
@@ -141,3 +141,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.AboutContactModal__TitleWithoutNickname__Tooltip {
+  max-width: 300px;
+}
diff --git a/ts/components/EditNicknameAndNoteModal.tsx b/ts/components/EditNicknameAndNoteModal.tsx
index 8a561a7458..52a46705b5 100644
--- a/ts/components/EditNicknameAndNoteModal.tsx
+++ b/ts/components/EditNicknameAndNoteModal.tsx
@@ -19,7 +19,7 @@ import { strictAssert } from '../util/assert';
 const formSchema = z.object({
   nickname: z
     .object({
-      givenName: z.string(),
+      givenName: z.string().nullable(),
       familyName: z.string().nullable(),
     })
     .nullable(),
diff --git a/ts/components/NotePreviewModal.tsx b/ts/components/NotePreviewModal.tsx
index 8826903505..db7239a203 100644
--- a/ts/components/NotePreviewModal.tsx
+++ b/ts/components/NotePreviewModal.tsx
@@ -7,6 +7,8 @@ import type { LocalizerType } from '../types/I18N';
 import { Button, ButtonVariant } from './Button';
 import { Modal } from './Modal';
 import { Linkify } from './conversation/Linkify';
+import type { RenderTextCallbackType } from '../types/Util';
+import { Emojify } from './conversation/Emojify';
 
 export type NotePreviewModalProps = Readonly<{
   conversation: ConversationType;
@@ -15,6 +17,10 @@ export type NotePreviewModalProps = Readonly<{
   onEdit: () => void;
 }>;
 
+const renderNonLink: RenderTextCallbackType = ({ key, text }) => {
+  return <Emojify key={key} text={text} />;
+};
+
 export function NotePreviewModal({
   conversation,
   i18n,
@@ -40,7 +46,7 @@ export function NotePreviewModal({
       }
     >
       <div dir="auto">
-        <Linkify text={conversation.note ?? ''} />
+        <Linkify text={conversation.note ?? ''} renderNonLink={renderNonLink} />
       </div>
     </Modal>
   );
diff --git a/ts/components/UserText.tsx b/ts/components/UserText.tsx
index e588421943..cb9eff4a37 100644
--- a/ts/components/UserText.tsx
+++ b/ts/components/UserText.tsx
@@ -1,12 +1,16 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Emojify } from './conversation/Emojify';
+import { bidiIsolate } from '../util/unicodeBidi';
 
 export function UserText({ text }: { text: string }): JSX.Element {
+  const normalizedText = useMemo(() => {
+    return bidiIsolate(text);
+  }, [text]);
   return (
     <span dir="auto">
-      <Emojify text={text} />
+      <Emojify text={normalizedText} />
     </span>
   );
 }
diff --git a/ts/components/conversation/AboutContactModal.tsx b/ts/components/conversation/AboutContactModal.tsx
index bc4ff35052..8ce1762b3f 100644
--- a/ts/components/conversation/AboutContactModal.tsx
+++ b/ts/components/conversation/AboutContactModal.tsx
@@ -16,6 +16,7 @@ import {
   areNicknamesEnabled,
   canHaveNicknameAndNote,
 } from '../../util/nicknames';
+import { Tooltip, TooltipPlacement } from '../Tooltip';
 
 function muted(parts: Array<string | JSX.Element>) {
   return (
@@ -150,7 +151,7 @@ export function AboutContactModal({
         <i className="AboutContactModal__row__icon AboutContactModal__row__icon--profile" />
 
         {canHaveNicknameAndNote(conversation) &&
-        conversation.nicknameGivenName &&
+        (conversation.nicknameGivenName || conversation.nicknameFamilyName) &&
         conversation.titleNoNickname ? (
           <span>
             <Intl
@@ -159,7 +160,24 @@ export function AboutContactModal({
               components={{
                 nickname: <UserText text={conversation.title} />,
                 titleNoNickname: (
-                  <UserText text={conversation.titleNoNickname} />
+                  <Tooltip
+                    className="AboutContactModal__TitleWithoutNickname__Tooltip"
+                    direction={TooltipPlacement.Top}
+                    content={
+                      <Intl
+                        i18n={i18n}
+                        id="icu:AboutContactModal__TitleWithoutNickname__Tooltip"
+                        components={{
+                          title: (
+                            <UserText text={conversation.titleNoNickname} />
+                          ),
+                        }}
+                      />
+                    }
+                    delay={0}
+                  >
+                    <UserText text={conversation.titleNoNickname} />
+                  </Tooltip>
                 ),
                 muted,
               }}
diff --git a/ts/components/conversation/ProfileChangeNotification.tsx b/ts/components/conversation/ProfileChangeNotification.tsx
index ee695e88f8..f849a2bca9 100644
--- a/ts/components/conversation/ProfileChangeNotification.tsx
+++ b/ts/components/conversation/ProfileChangeNotification.tsx
@@ -38,7 +38,8 @@ export function ProfileChangeNotification({
       contents={<Emojify text={message} />}
       button={
         areNicknamesEnabled() &&
-        changedContact.nicknameGivenName != null && (
+        (changedContact.nicknameGivenName != null ||
+          changedContact.nicknameFamilyName != null) && (
           <Button
             onClick={handleOpenEditNicknameAndNoteModal}
             size={ButtonSize.Small}
diff --git a/ts/services/storageRecordOps.ts b/ts/services/storageRecordOps.ts
index d00dbfc1d6..c8aa9d4e60 100644
--- a/ts/services/storageRecordOps.ts
+++ b/ts/services/storageRecordOps.ts
@@ -203,8 +203,8 @@ export async function toContactRecord(
     contactRecord.familyName = profileFamilyName;
   }
   const nicknameGivenName = conversation.get('nicknameGivenName');
-  if (nicknameGivenName) {
-    const nicknameFamilyName = conversation.get('nicknameFamilyName');
+  const nicknameFamilyName = conversation.get('nicknameFamilyName');
+  if (nicknameGivenName || nicknameFamilyName) {
     contactRecord.nickname = {
       given: nicknameGivenName,
       family: nicknameFamilyName,
diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts
index ecd79d74f5..8a03a221e3 100644
--- a/ts/state/ducks/conversations.ts
+++ b/ts/state/ducks/conversations.ts
@@ -4680,7 +4680,7 @@ export function updateLastMessage(
 
 export type NicknameAndNote = ReadonlyDeep<{
   nickname: {
-    givenName: string;
+    givenName: string | null;
     familyName: string | null;
   } | null;
   note: string | null;