keep as much context as possible when navigating deeper in comment threads

components/comment.js

@@ -116,7 +116,7 @@ export default function Comment ({
       setTimeout(() => {
         ref.current.scrollIntoView({ behavior: 'instant', block: 'start' })
         ref.current.classList.add('outline-it')
-      }, 20)
+      }, 100)
     }
   }, [item.id, router.query.commentId])
 
@@ -223,7 +223,7 @@ export default function Comment ({
       </div>
       {collapse !== 'yep' && (
         bottomedOut
-          ? <DepthLimit item={item} />
+          ? <div className={styles.children}><ReplyOnAnotherPage item={item} /></div>
           : (
             <div className={styles.children}>
               {!noReply &&
@@ -245,22 +245,6 @@ export default function Comment ({
   )
 }
 
-function DepthLimit ({ item }) {
-  if (item.ncomments > 0) {
-    return (
-      <Link href={`/items/${item.id}`} className='d-block p-3 fw-bold text-muted w-100 text-center'>
-        view replies
-      </Link>
-    )
-  }
-
-  return (
-    <div className={styles.children}>
-      <ReplyOnAnotherPage parentId={item.id} />
-    </div>
-  )
-}
-
 export function CommentSkeleton ({ skeletonChildren }) {
   return (
     <div className={styles.comment}>

components/reply.js

@@ -10,11 +10,20 @@ import { commentsViewedAfterComment } from '../lib/new-comments'
 import { commentSchema } from '../lib/validate'
 import Info from './info'
 import { quote } from '../lib/md'
+import { COMMENT_DEPTH_LIMIT } from '../lib/constants'
+
+export function ReplyOnAnotherPage ({ item }) {
+  const path = item.path.split('.')
+  const rootId = path.slice(-(COMMENT_DEPTH_LIMIT - 1))[0]
+
+  let text = 'reply on another page'
+  if (item.ncomments > 0) {
+    text = 'view replies'
+  }
 
-export function ReplyOnAnotherPage ({ parentId }) {
   return (
-    <Link href={`/items/${parentId}`} className={`${styles.replyButtons} text-muted`}>
-      reply on another page
+    <Link href={`/items/${rootId}?commentId=${item.id}`} as={`/items/${rootId}`} className='d-block py-3 fw-bold text-muted'>
+      {text}
     </Link>
   )
 }