fix notification linking to channel page

ui/component/channelDiscussion/index.js

@@ -1,7 +1,17 @@
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { makeSelectCommentForCommentId } from 'redux/selectors/comments';
+
 import ChannelDiscussion from './view';
 
-export default connect(
-  null,
-  null
-)(ChannelDiscussion);
+const select = (state, props) => {
+  const { search } = props.location;
+  const urlParams = new URLSearchParams(search);
+  const linkedCommentId = urlParams.get('lc');
+
+  return {
+    linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
+  };
+};
+
+export default withRouter(connect(select)(ChannelDiscussion));

ui/component/channelDiscussion/view.jsx

@@ -4,13 +4,15 @@ import CommentsList from 'component/commentsList';
 
 type Props = {
   uri: string,
+  linkedComment: ?any,
 };
 
 function ChannelDiscussion(props: Props) {
-  const uri = props.uri;
+  const { uri, linkedComment } = props;
+
   return (
     <section className="section">
-      <CommentsList uri={uri} />
+      <CommentsList uri={uri} linkedComment={linkedComment} />
     </section>
   );
 }

ui/component/notification/view.jsx

@@ -6,10 +6,13 @@ import React from 'react';
 import classnames from 'classnames';
 import Icon from 'component/common/icon';
 import DateTime from 'component/dateTime';
+import Button from 'component/button';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { MenuItem } from '@reach/menu-button';
 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';
 
 type Props = {
   notification: WebNotification,
@@ -25,10 +28,20 @@ export default function Notification(props: Props) {
   const notificationTarget = notification && notification_parameters.device.target;
   const commentText = notification_rule === NOTIFICATION_COMMENT && notification_parameters.dynamic.comment;
   let notificationLink = formatLbryUrlForWeb(notificationTarget);
+  let urlParams = new URLSearchParams();
   if (notification_rule === NOTIFICATION_COMMENT && notification_parameters.dynamic.hash) {
-    notificationLink += `?lc=${notification_parameters.dynamic.hash}`;
+    urlParams.append('lc', notification_parameters.dynamic.hash);
   }
 
+  try {
+    const { isChannel } = parseURI(notificationTarget);
+    if (isChannel) {
+      urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
+    }
+  } catch (e) {}
+
+  notificationLink += `?${urlParams.toString()}`;
+
   let icon;
   switch (notification_rule) {
     case NOTIFICATION_CREATOR_SUBSCRIBER:
@@ -51,6 +64,11 @@ export default function Notification(props: Props) {
     }
   }
 
+  function handleSeeNotification(e) {
+    e.stopPropagation();
+    doSeeNotifications([id]);
+  }
+
   const Wrapper = menuButton
     ? (props: { children: any }) => (
         <MenuItem className="menu__link--notification" onSelect={handleNotificationClick}>
@@ -98,8 +116,11 @@ export default function Notification(props: Props) {
             )}
           </div>
 
-          <div className="notification__time">
-            <DateTime timeAgo date={notification.created_at} />
+          <div className="notification__extra">
+            <div className="notification__time">
+              <DateTime timeAgo date={notification.created_at} />
+            </div>
+            {!is_seen && <Button className="notification__mark-seen" onClick={handleSeeNotification} />}
           </div>
         </div>
       </div>

ui/page/channel/view.jsx

@@ -20,9 +20,9 @@ import HelpLink from 'component/common/help-link';
 import ClaimSupportButton from 'component/claimSupportButton';
 import YoutubeBadge from 'component/youtubeBadge';
 
-const PAGE_VIEW_QUERY = `view`;
+export const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
-const DISCUSSION_PAGE = `discussion`;
+export const DISCUSSION_PAGE = `discussion`;
 const EDIT_PAGE = 'edit';
 
 type Props = {
@@ -67,7 +67,6 @@ function ChannelPage(props: Props) {
   } = useHistory();
   const urlParams = new URLSearchParams(search);
   const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
-  const editInUrl = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
   const [discussionWasMounted, setDiscussionWasMounted] = React.useState(false);
   const editing = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
   const { channelName } = parseURI(uri);

ui/scss/component/_comments.scss

@@ -13,7 +13,7 @@ $thumbnailWidthSmall: 2rem;
 }
 
 .comment__create {
-  padding-bottom: var(--spacing-l);
+  padding-bottom: var(--spacing-m);
   font-size: var(--font-small);
 }
 

ui/scss/component/_notification.scss

@@ -106,3 +106,16 @@
   top: 0.75rem;
   right: 1rem;
 }
+
+.notification__extra {
+  display: flex;
+  align-items: center;
+}
+
+.notification__mark-seen {
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  margin-left: var(--spacing-s);
+}

ui/scss/themes/dark.scss

@@ -83,8 +83,6 @@
 
   // Menu
   --color-menu-background: var(--color-header-background);
-  --color-menu-background--selected: #5d646c;
-  --color-menu-background--active: #3a3f44;
   --color-menu-icon: #a7a7a7;
   --color-menu-icon-active: #d6d6d6;