Files
familienarchiv/frontend/src/lib/components/PanelTranscription.svelte
Marcel 8c2bdbd777
Some checks failed
CI / Unit & Component Tests (push) Successful in 4m47s
CI / Backend Unit Tests (push) Successful in 2m20s
CI / E2E Tests (push) Failing after 24m42s
feat(frontend): add floating bottom panel to document detail page
Replaces the left sidebar layout with:
- Full-viewport PDF/image viewer (never resizes, position: absolute)
- Fixed floating bottom panel with tabs: Metadaten, Transkription,
  Diskussion, Verlauf
- Compact top bar with title, date · sender → receivers row, and
  Annotieren / Edit / Download actions
- Drag-to-resize panel with localStorage persistence of open/height/tab
- Panel opens automatically to Diskussion when an annotation is clicked
- Documents without a file default to showing the Metadaten tab

New components: DocumentTopBar, DocumentViewer, DocumentBottomPanel,
PanelMetadata, PanelTranscription, PanelDiscussion, PanelHistory

PdfViewer: annotateMode and activeAnnotationId lifted to bindable props;
AnnotationCommentPanel removed (discussion moves to the Diskussion tab).

Closes #62
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-24 22:35:28 +01:00

43 lines
1.0 KiB
Svelte

<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
type Doc = {
summary?: string | null;
transcription?: string | null;
};
let { doc }: { doc: Doc } = $props();
</script>
<div class="flex justify-center px-6 py-8">
<div class="w-full max-w-prose space-y-8">
{#if !doc.summary && !doc.transcription}
<p class="font-serif text-sm text-gray-400 italic"></p>
{/if}
{#if doc.summary}
<div>
<span
class="mb-3 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
>
{m.doc_label_summary()}
</span>
<p class="font-serif text-base leading-relaxed text-brand-navy">{doc.summary}</p>
</div>
{/if}
{#if doc.transcription}
<div>
<span
class="mb-3 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
>
{m.form_label_transcription()}
</span>
<p class="font-serif text-base leading-relaxed whitespace-pre-wrap text-brand-navy">
{doc.transcription}
</p>
</div>
{/if}
</div>
</div>