7825c7749a
- NotificationBell now includes annotationId in the deep-link URL when available - +page.svelte reads ?annotationId= param and sets activeAnnotationId on mount, opening the side panel instead of the bottom discussion drawer - AnnotationSidePanel accepts and forwards targetCommentId to CommentThread so the specific comment is highlighted when navigating via a notification Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
69 lines
1.9 KiB
Svelte
69 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import CommentThread from './CommentThread.svelte';
|
|
|
|
type Props = {
|
|
documentId: string;
|
|
activeAnnotationId: string | null;
|
|
activeAnnotationPage: number | null;
|
|
canComment: boolean;
|
|
currentUserId: string | null;
|
|
canAdmin: boolean;
|
|
targetCommentId?: string | null;
|
|
onClose: () => void;
|
|
};
|
|
|
|
let {
|
|
documentId,
|
|
activeAnnotationId,
|
|
activeAnnotationPage,
|
|
canComment,
|
|
currentUserId,
|
|
canAdmin,
|
|
targetCommentId = null,
|
|
onClose
|
|
}: Props = $props();
|
|
|
|
const visible = $derived(activeAnnotationId !== null);
|
|
</script>
|
|
|
|
<div
|
|
class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-line bg-surface shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
|
|
? 'translate-x-0'
|
|
: 'pointer-events-none translate-x-full'}"
|
|
data-testid="annotation-side-panel"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
|
|
<span class="font-sans text-xs font-medium text-ink">
|
|
{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
|
|
</span>
|
|
<button
|
|
onclick={onClose}
|
|
aria-label={m.comment_panel_close()}
|
|
class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Comment thread -->
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
{#if activeAnnotationId}
|
|
{#key activeAnnotationId}
|
|
<CommentThread
|
|
documentId={documentId}
|
|
annotationId={activeAnnotationId}
|
|
canComment={canComment}
|
|
currentUserId={currentUserId}
|
|
canAdmin={canAdmin}
|
|
targetCommentId={targetCommentId}
|
|
loadOnMount={true}
|
|
/>
|
|
{/key}
|
|
{/if}
|
|
</div>
|
|
</div>
|