feat(frontend): move annotation comments to right-side panel

Annotation threads now open in a slide-in side panel (320 px, right
edge of the PDF viewer) instead of expanding the bottom drawer.
The PDF stays visible while the user reads and writes annotation
comments.

- Add AnnotationSidePanel component (absolute-positioned, CSS slide
  transition, keyed CommentThread, close via X or Escape)
- Remove the $effect that opened the bottom drawer on annotation click
- Simplify PanelDiscussion back to document-level thread only (no
  annotation sub-tabs)
- Remove annotation-related props from DocumentBottomPanel and
  PanelDiscussion

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-25 07:23:20 +01:00
parent 10783fdb55
commit f71712ab4b
4 changed files with 88 additions and 116 deletions

View File

@@ -3,6 +3,7 @@ import { onMount } from 'svelte';
import DocumentTopBar from '$lib/components/DocumentTopBar.svelte';
import DocumentViewer from '$lib/components/DocumentViewer.svelte';
import DocumentBottomPanel from '$lib/components/DocumentBottomPanel.svelte';
import AnnotationSidePanel from '$lib/components/AnnotationSidePanel.svelte';
type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
@@ -58,14 +59,6 @@ let annotateMode = $state(false);
let activeAnnotationId = $state<string | null>(null);
let activeAnnotationPage = $state<number | null>(null);
// When an annotation is clicked, open the Diskussion tab.
$effect(() => {
if (activeAnnotationId) {
activeTab = 'discussion';
panelOpen = true;
}
});
// Close the panel when entering annotate mode so the PDF is fully visible.
$effect(() => {
if (annotateMode) panelOpen = false;
@@ -152,6 +145,18 @@ $effect(() => {
activeAnnotationId = id;
}}
/>
<AnnotationSidePanel
documentId={doc.id}
activeAnnotationId={activeAnnotationId}
activeAnnotationPage={activeAnnotationPage}
canComment={canComment}
currentUserId={currentUserId}
canAdmin={canAdmin}
onClose={() => {
activeAnnotationId = null;
activeAnnotationPage = null;
}}
/>
</div>
<DocumentBottomPanel
@@ -163,7 +168,5 @@ $effect(() => {
bind:open={panelOpen}
bind:height={panelHeight}
bind:activeTab={activeTab}
activeAnnotationId={activeAnnotationId}
activeAnnotationPage={activeAnnotationPage}
/>
</div>