Emojify note and add non-nickname tooltip

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}