diff --git a/frontend/src/lib/components/CommentThread.svelte b/frontend/src/lib/components/CommentThread.svelte index f908d7a3..0a67aefb 100644 --- a/frontend/src/lib/components/CommentThread.svelte +++ b/frontend/src/lib/components/CommentThread.svelte @@ -14,6 +14,7 @@ type Props = { canComment: boolean; currentUserId: string | null; canAdmin: boolean; + targetCommentId?: string | null; onCountChange?: (count: number) => void; }; @@ -25,10 +26,12 @@ let { canComment, currentUserId, canAdmin, + targetCommentId = null, onCountChange }: Props = $props(); let comments: Comment[] = $state(untrack(() => [...initialComments])); +let highlightedCommentId: string | null = $state(untrack(() => targetCommentId ?? null)); let newText: string = $state(''); let replyingTo: string | null = $state(null); let replyText: string = $state(''); @@ -184,6 +187,25 @@ onMount(() => { const total = initialComments.reduce((s, c) => s + 1 + c.replies.length, 0); onCountChange?.(total); } + + if (targetCommentId) { + // Scroll to target after a tick so the DOM is settled + setTimeout(() => { + const el = document.querySelector(`[data-comment-id="${targetCommentId}"]`); + el?.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, 100); + + // Remove highlight on first user interaction + const clearHighlight = () => { + highlightedCommentId = null; + document.removeEventListener('click', clearHighlight, true); + document.removeEventListener('keydown', clearHighlight, true); + document.removeEventListener('scroll', clearHighlight, true); + }; + document.addEventListener('click', clearHighlight, true); + document.addEventListener('keydown', clearHighlight, true); + document.addEventListener('scroll', clearHighlight, true); + } }); @@ -287,13 +309,23 @@ onMount(() => { {#each comments as thread, ti (thread.id)}