fix(notifications): truncate X post attachment titles in notification list (#5867)

Author: AmarTrebinjac

packages/shared/src/components/notifications/NotificationItem.tsx

@@ -90,7 +90,7 @@ const NotificationOptionsButton = ({
     });
   };
 
-  const Icon = (): ReactElement => {
+  const Icon = (): ReactElement | null => {
     if (!notification) {
       return null;
     }
@@ -109,7 +109,7 @@ const NotificationOptionsButton = ({
 
   const label = useMemo((): string => {
     if (!notification) {
-      return null;
+      return '';
     }
 
     if (isFetching) {
@@ -120,6 +120,10 @@ const NotificationOptionsButton = ({
       preferences[0]?.status === NotificationPreferenceStatus.Muted;
     const copy = notificationMutingCopy[notification?.type];
 
+    if (!copy) {
+      return '';
+    }
+
     return isMuted ? copy.unmute : copy.mute;
   }, [notification, preferences, isFetching]);
   const options = [{ icon: <Icon />, label, action: onItemClick }];
@@ -145,7 +149,7 @@ const NotificationOptionsButton = ({
   );
 };
 
-function NotificationItem(props: NotificationItemProps): ReactElement {
+function NotificationItem(props: NotificationItemProps): ReactElement | null {
   const {
     icon,
     type,
@@ -165,7 +169,7 @@ function NotificationItem(props: NotificationItemProps): ReactElement {
     isReady,
     title: memoizedTitle,
     description: memoizedDescription,
-  } = useObjectPurify({ title, description });
+  } = useObjectPurify({ title, description: description ?? '' });
   const router = useRouter();
   const isClickable = !notificationTypeNotClickable[type];
 
@@ -281,6 +285,7 @@ function NotificationItem(props: NotificationItemProps): ReactElement {
           <NotificationItemAttachment
             key={attachment}
             title={attachment}
+            notificationType={type}
             {...restAttachmentProps}
           />
         ))}

packages/shared/src/components/notifications/NotificationItemAttachment.tsx

@@ -1,15 +1,28 @@
 import type { ReactElement } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import type { NotificationAttachment } from '../../graphql/notifications';
 import { NotificationAttachmentType } from '../../graphql/notifications';
 import { IconSize } from '../Icon';
 import { CardCover } from '../cards/common/CardCover';
+import { NotificationType } from './utils';
+
+interface NotificationItemAttachmentProps extends NotificationAttachment {
+  notificationType?: NotificationType;
+}
+
+const truncatedNotificationTypes = new Set([
+  NotificationType.SourcePostAdded,
+  NotificationType.UserPostAdded,
+  NotificationType.SquadPostAdded,
+]);
 
 function NotificationItemAttachment({
   image,
   title,
   type,
-}: NotificationAttachment): ReactElement {
+  notificationType,
+}: NotificationItemAttachmentProps): ReactElement {
   return (
     <div className="mt-2 flex flex-row items-center rounded-16 border border-border-subtlest-tertiary p-4">
       <div>
@@ -25,7 +38,16 @@ function NotificationItemAttachment({
           videoProps={{ size: IconSize.XLarge }}
         />
       </div>
-      <span className="ml-4 flex-1 break-words typo-callout">{title}</span>
+      <span
+        className={classNames(
+          'ml-4 flex-1 break-words typo-callout',
+          notificationType &&
+            truncatedNotificationTypes.has(notificationType) &&
+            'multi-truncate line-clamp-3',
+        )}
+      >
+        {title}
+      </span>
     </div>
   );
 }