Emojify note and add non-nickname tooltip

_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"

stylesheets/components/AboutContactModal.scss

@@ -141,3 +141,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.AboutContactModal__TitleWithoutNickname__Tooltip {
+  max-width: 300px;
+}

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(),

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>
   );

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>
   );
 }

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,
               }}

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}

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,

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;