scroll to new comments from recent and notifications

src/components/common/NodeHorizontalCard/index.tsx

@@ -8,6 +8,8 @@ import { URLS } from '~/constants/urls';
 import { INode } from '~/types';
 import { getPrettyDate } from '~/utils/dom';
 
+import { getNewCommentAnchor } from '../../../constants/dom/links';
+
 import styles from './styles.module.scss';
 
 interface Props {
@@ -16,32 +18,30 @@ interface Props {
   onClick?: MouseEventHandler;
 }
 
-const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
-  return (
-    <Anchor
-      key={node.id}
-      className={styles.item}
-      href={URLS.NODE_URL(node.id)}
-      onClick={onClick}
+const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => (
+  <Anchor
+    key={node.id}
+    className={styles.item}
+    href={getNewCommentAnchor(URLS.NODE_URL(node.id))}
+    onClick={onClick}
+  >
+    <div
+      className={classNames(styles.thumb, {
+        [styles.new]: hasNew,
+        [styles.lab]: !node.is_promoted,
+      })}
     >
-      <div
-        className={classNames(styles.thumb, {
-          [styles.new]: hasNew,
-          [styles.lab]: !node.is_promoted,
-        })}
-      >
-        <NodeThumbnail item={node} />
-      </div>
+      <NodeThumbnail item={node} />
+    </div>
 
-      <div className={styles.info}>
-        <div className={styles.title}>{node.title || '...'}</div>
+    <div className={styles.info}>
+      <div className={styles.title}>{node.title || '...'}</div>
 
-        <div className={styles.comment}>
-          <span>{getPrettyDate(node.created_at)}</span>
-        </div>
+      <div className={styles.comment}>
+        <span>{getPrettyDate(node.created_at)}</span>
       </div>
-    </Anchor>
-  );
-};
+    </div>
+  </Anchor>
+);
 
 export { NodeHorizontalCard };

src/components/notifications/NotificationComment/index.tsx

@@ -9,6 +9,8 @@ import { Square } from '~/components/common/Square';
 import { NotificationItem } from '~/types/notifications';
 import { formatText, getURLFromString } from '~/utils/dom';
 
+import { getCommentAnchor } from '../../../constants/dom/links';
+
 import styles from './styles.module.scss';
 
 interface NotificationCommentProps {
@@ -17,7 +19,10 @@ interface NotificationCommentProps {
 }
 
 const NotificationComment: FC<NotificationCommentProps> = ({ item, isNew }) => (
-  <Anchor href={item.url} className={styles.link}>
+  <Anchor
+    href={getCommentAnchor(item.url, item.itemId)}
+    className={styles.link}
+  >
     <div className={classNames(styles.message, { [styles.new]: isNew })}>
       <div className={styles.icon}>
         <Avatar