Improve notification links, allow right click menu

ui/component/notification/view.jsx

@@ -9,13 +9,14 @@ import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { formatLbryUrlForWeb } from 'util/url';
-import { useHistory } from 'react-router';
 import { parseURI } from 'lbry-redux';
 import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
 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 { NavLink } from 'react-router-dom';
+import UriIndicator from 'component/uriIndicator';
 
 type Props = {
   notification: WebNotification,
@@ -27,7 +28,6 @@ type Props = {
 
 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 ||
@@ -57,6 +57,24 @@ export default function Notification(props: Props) {
     urlParams.append('lc', notification_parameters.dynamic.hash);
   }
 
+  const notificationTitle = notification_parameters.device.title;
+  const titleSplit = notificationTitle.split(' ');
+  let creatorName;
+  titleSplit.map((s) => {
+    if (!creatorName && s.includes('@')) {
+      creatorName = s;
+    }
+  });
+  const title = titleSplit.map((message) => {
+    if (creatorName === message) {
+      return (
+      <UriIndicator uri={notification_parameters.dynamic.comment_author} link />
+      );
+    } else {
+      return <LbcMessage>{__(' %message% ', { message })}</LbcMessage>;
+    }
+  });
+
   try {
     const { isChannel } = parseURI(notificationTarget);
     if (isChannel) {
@@ -65,24 +83,32 @@ export default function Notification(props: Props) {
   } catch (e) {}
 
   notificationLink += `?${urlParams.toString()}`;
+  const navLinkProps = {
+    to: notificationLink,
+    onClick: (e) => e.stopPropagation(),
+  };
 
   let icon;
+  const creatorIcon =
+  <UriIndicator uri={notification_parameters.dynamic.comment_author} link>
+    <ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />
+  </UriIndicator>;
   switch (notification_rule) {
     case RULE.CREATOR_SUBSCRIBER:
       icon = <Icon icon={ICONS.SUBSCRIBE} sectionIcon />;
       break;
     case RULE.COMMENT:
     case RULE.CREATOR_COMMENT:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />;
+      icon = creatorIcon;
       break;
     case RULE.COMMENT_REPLY:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.reply_author} />;
+      icon = creatorIcon;
       break;
     case RULE.NEW_CONTENT:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
+      icon = creatorIcon;
       break;
     case RULE.NEW_LIVESTREAM:
-      icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
+      icon = creatorIcon;
       break;
     case RULE.DAILY_WATCH_AVAILABLE:
     case RULE.DAILY_WATCH_REMIND:
@@ -101,10 +127,6 @@ export default function Notification(props: Props) {
     if (!is_read) {
       doReadNotifications([id]);
     }
-
-    if (notificationLink) {
-      push(notificationLink);
-    }
   }
 
   function handleReadNotification(e) {
@@ -134,6 +156,7 @@ export default function Notification(props: Props) {
       );
 
   return (
+    <NavLink {...navLinkProps}>
       <Wrapper>
         <div
           className={classnames('notification__wrapper', {
@@ -146,16 +169,12 @@ export default function Notification(props: Props) {
             <div className="notification__content">
               <div className="notification__text-wrapper">
                 {!isCommentNotification && (
-                <div className="notification__title">
-                  <LbcMessage>{notification_parameters.device.title}</LbcMessage>
-                </div>
+                  <div className="notification__title">{title}</div>
                 )}
 
                 {isCommentNotification && commentText ? (
                   <>
-                  <div className="notification__title">
-                    <LbcMessage>{notification_parameters.device.title}</LbcMessage>
-                  </div>
+                    <div className="notification__title">{title}</div>
                     <div title={commentText} className="notification__text mobile-hidden">
                       {commentText}
                     </div>
@@ -193,7 +212,12 @@ 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">
@@ -209,5 +233,6 @@ export default function Notification(props: Props) {
           </div>
         </div>
       </Wrapper>
+    </NavLink>
   );
 }

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;