Improve clickability of notification links (#6711)

CHANGELOG.md

@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Update lighthouse search api _community pr!_ ([#6731](https://github.com/lbryio/lbry-desktop/pull/6731))
 - Update sockety api _community pr!_ ([#6747](https://github.com/lbryio/lbry-desktop/pull/6747))
 - Use resolve for OG metadata instead of chainquery _community pr!_ ([#6787](https://github.com/lbryio/lbry-desktop/pull/6787))
+- Improved clickability of notification links _community pr!_ ([#6711](https://github.com/lbryio/lbry-desktop/pull/6711))
 
 ### Fixed
 - App now supports '#' and ':' for claimId separator ([#6496](https://github.com/lbryio/lbry-desktop/pull/6496))

ui/component/notification/view.jsx

@@ -16,6 +16,8 @@ import FileThumbnail from 'component/fileThumbnail';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
 import LbcMessage from 'component/common/lbc-message';
+import UriIndicator from 'component/uriIndicator';
+import { NavLink } from 'react-router-dom';
 
 type Props = {
   notification: WebNotification,
@@ -29,13 +31,12 @@ export default function Notification(props: Props) {
   const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
   const { push } = useHistory();
   const { notification_rule, notification_parameters, is_read, id } = notification;
+
   const isCommentNotification =
     notification_rule === RULE.COMMENT ||
     notification_rule === RULE.COMMENT_REPLY ||
     notification_rule === RULE.CREATOR_COMMENT;
   const commentText = isCommentNotification && notification_parameters.dynamic.comment;
-  const channelUrl =
-    (notification_rule === RULE.NEW_CONTENT && notification.notification_parameters.dynamic.channel_url) || '';
 
   let notificationTarget;
   switch (notification_rule) {
@@ -51,21 +52,14 @@ export default function Notification(props: Props) {
       notificationTarget = notification_parameters.device.target;
   }
 
-  let notificationLink = formatLbryUrlForWeb(notificationTarget);
+  const creatorIcon = (channelUrl) => {
-  let urlParams = new URLSearchParams();
+    return (
-  if (isCommentNotification && notification_parameters.dynamic.hash) {
+      <UriIndicator uri={channelUrl} link>
-    urlParams.append('lc', notification_parameters.dynamic.hash);
+        <ChannelThumbnail small uri={channelUrl} />
-  }
+      </UriIndicator>
-
+    );
-  try {
+  };
-    const { isChannel } = parseURI(notificationTarget);
+  let channelUrl;
-    if (isChannel) {
-      urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
-    }
-  } catch (e) {}
-
-  notificationLink += `?${urlParams.toString()}`;
-
   let icon;
   switch (notification_rule) {
     case RULE.CREATOR_SUBSCRIBER:
@@ -73,16 +67,20 @@ export default function Notification(props: Props) {
       break;
     case RULE.COMMENT:
     case RULE.CREATOR_COMMENT:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />;
+      channelUrl = notification_parameters.dynamic.comment_author;
+      icon = creatorIcon(channelUrl);
       break;
     case RULE.COMMENT_REPLY:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.reply_author} />;
+      channelUrl = notification_parameters.dynamic.reply_author;
+      icon = creatorIcon(channelUrl);
       break;
     case RULE.NEW_CONTENT:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
+      channelUrl = notification_parameters.dynamic.channel_url;
+      icon = creatorIcon(channelUrl);
       break;
     case RULE.NEW_LIVESTREAM:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
+      channelUrl = notification_parameters.dynamic.channel_url;
+      icon = creatorIcon(channelUrl);
       break;
     case RULE.DAILY_WATCH_AVAILABLE:
     case RULE.DAILY_WATCH_REMIND:
@@ -97,12 +95,54 @@ export default function Notification(props: Props) {
       icon = <Icon icon={ICONS.NOTIFICATION} sectionIcon />;
   }
 
+  let notificationLink = formatLbryUrlForWeb(notificationTarget);
+  let urlParams = new URLSearchParams();
+  if (isCommentNotification && notification_parameters.dynamic.hash) {
+    urlParams.append('lc', notification_parameters.dynamic.hash);
+  }
+
+  let channelName = channelUrl && '@' + channelUrl.split('@')[1].split('#')[0];
+
+  const notificationTitle = notification_parameters.device.title;
+  const titleSplit = notificationTitle.split(' ');
+  let fullTitle = [' '];
+  let uriIndicator;
+  const title = titleSplit.map((message, index) => {
+    if (channelName === message) {
+      uriIndicator = <UriIndicator uri={channelUrl} link />;
+      fullTitle.push(' ');
+      const resultTitle = fullTitle;
+      fullTitle = [' '];
+
+      return [resultTitle.join(' '), uriIndicator];
+    } else {
+      fullTitle.push(message);
+
+      if (index === titleSplit.length - 1) {
+        return <LbcMessage>{fullTitle.join(' ')}</LbcMessage>;
+      }
+    }
+  });
+
+  try {
+    const { isChannel } = parseURI(notificationTarget);
+    if (isChannel) {
+      urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
+    }
+  } catch (e) {}
+
+  notificationLink += `?${urlParams.toString()}`;
+  const navLinkProps = {
+    to: notificationLink,
+    onClick: (e) => e.stopPropagation(),
+  };
+
   function handleNotificationClick() {
     if (!is_read) {
       doReadNotifications([id]);
     }
 
-    if (notificationLink) {
+    if (menuButton && notificationLink) {
       push(notificationLink);
     }
   }
@@ -120,9 +160,11 @@ export default function Notification(props: Props) {
       )
     : notificationLink
     ? (props: { children: any }) => (
+        <NavLink {...navLinkProps}>
           <a className="menu__link--notification" onClick={handleNotificationClick}>
             {props.children}
           </a>
+        </NavLink>
       )
     : (props: { children: any }) => (
         <span
@@ -145,17 +187,11 @@ export default function Notification(props: Props) {
         <div className="notification__content-wrapper">
           <div className="notification__content">
             <div className="notification__text-wrapper">
-              {!isCommentNotification && (
+              {!isCommentNotification && <div className="notification__title">{title}</div>}
-                <div className="notification__title">
-                  <LbcMessage>{notification_parameters.device.title}</LbcMessage>
-                </div>
-              )}
 
               {isCommentNotification && commentText ? (
                 <>
-                  <div className="notification__title">
+                  <div className="notification__title">{title}</div>
-                    <LbcMessage>{notification_parameters.device.title}</LbcMessage>
-                  </div>
                   <div title={commentText} className="notification__text mobile-hidden">
                     {commentText}
                   </div>
@@ -193,7 +229,13 @@ export default function Notification(props: Props) {
 
         <div className="notification__menu">
           <Menu>
-            <MenuButton className={'menu__button notification__menu-button'} onClick={(e) => e.stopPropagation()}>
+            <MenuButton
+              className={'menu__button notification__menu-button'}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
               <Icon size={18} icon={ICONS.MORE_VERTICAL} />
             </MenuButton>
             <MenuList className="menu__list">

ui/scss/component/_notification.scss

@@ -42,6 +42,7 @@ $contentMaxWidth: 60rem;
   width: 100%;
   display: flex;
   padding: var(--spacing-m) 0;
+  justify-content: space-between;
 
   .channel-thumbnail {
     @include handleChannelGif(3rem);
@@ -60,6 +61,7 @@ $contentMaxWidth: 60rem;
 
 .notification__wrapper--unread {
   background-color: var(--color-card-background-highlighted);
+  justify-content: space-between;
 
   &:hover {
     background-color: var(--color-button-secondary-bg);
@@ -120,6 +122,7 @@ $contentMaxWidth: 60rem;
 }
 
 .notification__title {
+  position: relative;
   font-size: var(--font-small);
   color: var(--color-text);
   margin-bottom: var(--spacing-s);
@@ -135,6 +138,7 @@ $contentMaxWidth: 60rem;
 
 .notification__text {
   font-size: var(--font-body);
+  color: var(--color-text);
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;