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)}
0 ? 'border-t border-line pt-4' : ''}> -
+
{@render commentEntry(thread, thread.id, thread.replies.length === 0)}
{#each thread.replies as reply, ri (reply.id)} -
+
{@render commentEntry(reply, thread.id, ri === thread.replies.length - 1)}
{/each} diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte index 6b7d5737..209bf76e 100644 --- a/frontend/src/lib/components/DocumentBottomPanel.svelte +++ b/frontend/src/lib/components/DocumentBottomPanel.svelte @@ -28,6 +28,7 @@ type Props = { open: boolean; height: number; activeTab: DocumentPanelTab; + targetCommentId?: string | null; }; let { @@ -38,7 +39,8 @@ let { canAdmin, open = $bindable(), height = $bindable(), - activeTab = $bindable() + activeTab = $bindable(), + targetCommentId = null }: Props = $props(); const MIN_HEIGHT = 52; // drag handle (8px) + tab bar (~44px) @@ -180,6 +182,7 @@ function handleCountChange(count: number) { canComment={canComment} currentUserId={currentUserId} canAdmin={canAdmin} + targetCommentId={targetCommentId} onCountChange={handleCountChange} /> {:else if activeTab === 'history'} diff --git a/frontend/src/lib/components/PanelDiscussion.svelte b/frontend/src/lib/components/PanelDiscussion.svelte index 291cf5c1..40d9af39 100644 --- a/frontend/src/lib/components/PanelDiscussion.svelte +++ b/frontend/src/lib/components/PanelDiscussion.svelte @@ -8,11 +8,19 @@ type Props = { canComment: boolean; currentUserId: string | null; canAdmin: boolean; + targetCommentId?: string | null; onCountChange?: (count: number) => void; }; -let { documentId, initialComments, canComment, currentUserId, canAdmin, onCountChange }: Props = - $props(); +let { + documentId, + initialComments, + canComment, + currentUserId, + canAdmin, + targetCommentId = null, + onCountChange +}: Props = $props();
@@ -22,6 +30,7 @@ let { documentId, initialComments, canComment, currentUserId, canAdmin, onCountC canComment={canComment} currentUserId={currentUserId} canAdmin={canAdmin} + targetCommentId={targetCommentId} onCountChange={onCountChange} />
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte index 24e11344..05558bc8 100644 --- a/frontend/src/routes/documents/[id]/+page.svelte +++ b/frontend/src/routes/documents/[id]/+page.svelte @@ -1,5 +1,6 @@