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,12 +18,11 @@ interface Props {
   onClick?: MouseEventHandler;
 }
 
-const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
-  return (
+const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => (
   <Anchor
     key={node.id}
     className={styles.item}
-      href={URLS.NODE_URL(node.id)}
+    href={getNewCommentAnchor(URLS.NODE_URL(node.id))}
     onClick={onClick}
   >
     <div
@@ -42,6 +43,5 @@ const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
     </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

src/constants/dom/links.ts

@@ -0,0 +1,15 @@
+export const NEW_COMMENT_ANCHOR_NAME = 'new-comment';
+export const COMMENT_ANCHOR_PREFIX = 'comment';
+
+export const getCommentId = (id: number) =>
+  [COMMENT_ANCHOR_PREFIX, id].join('-');
+
+export const getNewCommentAnchor = (url: string) =>
+  [url, NEW_COMMENT_ANCHOR_NAME].join('#');
+
+export const getCommentAnchor = (url: string, commentId: number) =>
+  [url, getCommentId(commentId)].join('#');
+
+export const isCommentAnchor = (hash: string | undefined) =>
+  hash?.startsWith(COMMENT_ANCHOR_PREFIX) ||
+  hash?.startsWith(NEW_COMMENT_ANCHOR_NAME);

src/containers/node/NodeComments/components/Comment/index.tsx

@@ -8,6 +8,7 @@ import { CommentWrapper } from '~/containers/comments/CommentWrapper';
 import { IComment, ICommentGroup, IFile } from '~/types';
 
 import { CommendDeleted } from '../../../../../components/node/CommendDeleted';
+import { getCommentId } from '../../../../../constants/dom/links';
 
 import { CommentContent } from './components/CommentContent';
 import { CommentDistance } from './components/CommentDistance';
@@ -83,6 +84,9 @@ const Comment: FC<Props> = memo(
             );
 
             return (
+              <>
+                <a id={getCommentId(comment.id)} className={styles.anchor} />
+
                 <CommentContent
                   prefix={prefix}
                   saveComment={saveComment}
@@ -95,6 +99,7 @@ const Comment: FC<Props> = memo(
                   onShowImageModal={onShowImageModal}
                   key={comment.id}
                 />
+              </>
             );
           })}
         </div>

src/containers/node/NodeComments/components/Comment/styles.module.scss

@@ -15,3 +15,9 @@
 .highlighted {
   box-shadow: $color_primary 0 0 0px 2px;
 }
+
+.anchor {
+  display: block;
+  position: relative;
+  top: -($header_height * 2);
+}

src/containers/node/NodeComments/index.tsx

@@ -1,9 +1,13 @@
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
 import { LoadMoreButton } from '~/components/input/LoadMoreButton';
 import { ANNOUNCE_USER_ID, BORIS_NODE_ID } from '~/constants/boris/constants';
+import {
+  isCommentAnchor,
+  NEW_COMMENT_ANCHOR_NAME,
+} from '~/constants/dom/links';
 import { Comment } from '~/containers/node/NodeComments/components/Comment';
 import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
 import { ICommentGroup } from '~/types';
@@ -18,6 +22,11 @@ interface Props {
   order: 'ASC' | 'DESC';
 }
 
+const isFirstGroupWithNewCommentt = (
+  group: ICommentGroup,
+  prevGroup: ICommentGroup | undefined,
+) => group.hasNew && (!prevGroup || !prevGroup.hasNew);
+
 const NodeComments: FC<Props> = observer(({ order }) => {
   const user = useUserContext();
   const { node } = useNodeContext();
@@ -35,7 +44,7 @@ const NodeComments: FC<Props> = observer(({ order }) => {
     onSaveComment,
   } = useCommentContext();
 
-  const groupped: ICommentGroup[] = useGrouppedComments(
+  const groupped = useGrouppedComments(
     comments,
     order,
     lastSeenCurrent ?? undefined,
@@ -59,11 +68,33 @@ const NodeComments: FC<Props> = observer(({ order }) => {
     return null;
   }
 
+  useEffect(() => {
+    const anchor = location.hash?.replace('#', '');
+
+    if (!isLoading && isCommentAnchor(anchor)) {
+      setTimeout(
+        () =>
+          document
+            .getElementById(anchor)
+            ?.scrollIntoView({ behavior: 'smooth' }),
+        300,
+      );
+    }
+  }, [isLoading]);
+
   return (
     <div className={styles.wrap}>
       {order === 'DESC' && more}
 
-      {groupped.map((group) => (
+      {groupped.map((group, index) => (
+        <>
+          {isFirstGroupWithNewCommentt(group, groupped.at(index - 1)) && (
+            <a
+              id={NEW_COMMENT_ANCHOR_NAME}
+              className={styles.newCommentAnchor}
+            />
+          )}
+
           <Comment
             nodeId={node.id!}
             key={group.ids.join()}
@@ -79,6 +110,7 @@ const NodeComments: FC<Props> = observer(({ order }) => {
             isSame={group.user.id === user.id}
             saveComment={onSaveComment}
           />
+        </>
       ))}
 
       {order === 'ASC' && more}

src/containers/node/NodeComments/styles.module.scss

@@ -13,3 +13,9 @@
 .more {
   margin-bottom: $gap;
 }
+
+.newCommentAnchor {
+  position: relative;
+  top: -($header_height * 2);
+  display: block;
+}

src/types/notifications/index.ts

@@ -2,6 +2,7 @@ import { ShallowUser } from '../auth';
 
 export interface NotificationItem {
   id: number;
+  itemId: number;
   url: string;
   type: NotificationType;
   title: string;