diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx index 1aaf5ef7..4cec3b34 100644 --- a/src/components/reply-quote-preview/reply-quote-preview.tsx +++ b/src/components/reply-quote-preview/reply-quote-preview.tsx @@ -71,6 +71,15 @@ const scrollToThreadCardTop = (threadCid: string) => { return true; }; +const scrollToReplyOnPage = (cid: string) => { + const el = document.querySelector(`[data-cid="${cid}"][data-post-cid]`); + if (!el) return false; + el.scrollIntoView({ behavior: 'smooth', block: 'center' }); + el.classList.add('scroll-highlight'); + setTimeout(() => el.classList.remove('scroll-highlight'), 2000); + return true; +}; + const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, isOP, showTrailingBreak = true }: ReplyQuotePreviewProps) => { const [hoveredCid, setHoveredCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); @@ -126,6 +135,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i scrollToThreadCardTop(cid); return; } + if (scrollToReplyOnPage(cid)) return; navigate(threadRoute); } }; @@ -242,6 +252,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is scrollToThreadCardTop(cid); return; } + if (scrollToReplyOnPage(cid)) return; navigate(threadRoute); } }; diff --git a/src/index.css b/src/index.css index 97e46b19..0d53e141 100644 --- a/src/index.css +++ b/src/index.css @@ -82,7 +82,8 @@ hr { cursor: pointer; } - .highlight { + .highlight, + .scroll-highlight { background: var(--reply-highlight-background-color) !important; } @@ -104,7 +105,8 @@ hr { cursor: pointer; } - .highlight { + .highlight, + .scroll-highlight { background: var(--reply-highlight-background-color) !important; border: var(--reply-highlight-border) !important; border-left: var(--reply-highlight-border-left, revert) !important;