fix(post): align op permalinks to the outer thread container (#1050)

* fix(post): align op permalinks to the outer thread container

* perf(scroll-to-reply): stop interval when max attempts/duration reached

src/views/post/__tests__/post.test.tsx

@@ -128,12 +128,24 @@ vi.mock('../../../components/footer', () => ({
 
 vi.mock('../../../components/post-desktop', () => ({
   default: ({ post, roles, targetReplyCid }: { post?: TestComment; roles?: Record<string, unknown>; targetReplyCid?: string }) =>
-    createElement('div', { 'data-testid': 'post-desktop' }, `${post?.cid || 'missing'}:${targetReplyCid || 'none'}:${Object.keys(roles || {}).length}`),
+    createElement(
+      'div',
+      { 'data-testid': 'post-desktop' },
+      createElement('div', { 'data-thread-container-cid': post?.cid }),
+      createElement('div', { 'data-post-info-cid': post?.cid }),
+      `${post?.cid || 'missing'}:${targetReplyCid || 'none'}:${Object.keys(roles || {}).length}`,
+    ),
 }));
 
 vi.mock('../../../components/post-mobile', () => ({
   default: ({ post, roles, targetReplyCid }: { post?: TestComment; roles?: Record<string, unknown>; targetReplyCid?: string }) =>
-    createElement('div', { 'data-testid': 'post-mobile' }, `${post?.cid || 'missing'}:${targetReplyCid || 'none'}:${Object.keys(roles || {}).length}`),
+    createElement(
+      'div',
+      { 'data-testid': 'post-mobile' },
+      createElement('div', { 'data-thread-container-cid': post?.cid }),
+      createElement('div', { 'data-post-info-cid': post?.cid }),
+      `${post?.cid || 'missing'}:${targetReplyCid || 'none'}:${Object.keys(roles || {}).length}`,
+    ),
 }));
 
 let container: HTMLDivElement;
@@ -190,6 +202,11 @@ describe('Post', () => {
       value: vi.fn(),
       writable: true,
     });
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: vi.fn(),
+      writable: true,
+    });
     document.title = 'before';
 
     container = document.createElement('div');
@@ -244,7 +261,12 @@ describe('Post', () => {
     expect(container.querySelector('[data-testid="thread-footer-first-row"]')?.textContent).toBe('cached-cid:42:music-posting.eth:false');
     expect(container.querySelector('[data-testid="thread-footer-mobile"]')?.textContent).toBe('cached-cid:42:music-posting.eth:false');
     expect(document.title).toBe('/mu/ - Cached thread... - 5chan');
-    expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
+    expect(window.scrollTo).toHaveBeenCalledWith({
+      behavior: 'auto',
+      left: 0,
+      top: 0,
+    });
+    expect(HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled();
   });
 
   it('redirects thread routes whose fetched comment belongs to a different board', async () => {

src/views/post/post.tsx

@@ -13,6 +13,7 @@ import ErrorDisplay from '../../components/error-display/error-display';
 import { PageFooterDesktop, ThreadFooterFirstRow, ThreadFooterStyleRow, ThreadFooterMobile } from '../../components/footer';
 import PostDesktop from '../../components/post-desktop';
 import PostMobile from '../../components/post-mobile';
+import { clearThreadScrollSpacer, scrollThreadContainerToTop } from '../../lib/utils/thread-scroll-utils';
 import styles from './post.module.css';
 
 // useComment may not return cached feed data immediately due to its updatedAt comparison logic.
@@ -156,10 +157,20 @@ const PostPage = () => {
 
   const { error } = post || {};
 
+  useEffect(() => () => clearThreadScrollSpacer(), []);
+
   useEffect(() => {
-    if (!comment?.cid || comment.parentCid) return;
+    if (!commentCid || post?.cid === commentCid) return;
+    clearThreadScrollSpacer();
+  }, [commentCid, post?.cid]);
+
+  useEffect(() => {
+    if (!commentCid || post?.cid !== commentCid) return;
+    if (scrollThreadContainerToTop(commentCid)) {
+      return;
+    }
     window.scrollTo(0, 0);
-  }, [comment?.cid, comment?.parentCid]);
+  }, [commentCid, post?.cid]);
 
   useEffect(() => {
     const boardIdentifier = params.boardIdentifier;