diff --git a/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte b/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte index a7c91784..f6c6ee07 100644 --- a/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte +++ b/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte @@ -8,11 +8,20 @@ type Props = { hasBlocks: boolean; blockCount: number; lastEditedAt: string | null; + canEdit?: boolean; onModeChange: (mode: 'read' | 'edit') => void; onClose: () => void; }; -let { mode, hasBlocks, blockCount, lastEditedAt, onModeChange, onClose }: Props = $props(); +let { + mode, + hasBlocks, + blockCount, + lastEditedAt, + canEdit = true, + onModeChange, + onClose +}: Props = $props(); const formattedDate = $derived( lastEditedAt @@ -34,37 +43,41 @@ function handleReadClick() {
{m.transcription_mode_help_body()}
+{m.transcription_mode_help_body()}
-diff --git a/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte.test.ts b/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte.test.ts index b512e8ef..0d7e8730 100644 --- a/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte.test.ts +++ b/frontend/src/lib/document/transcription/TranscriptionPanelHeader.svelte.test.ts @@ -22,6 +22,27 @@ describe('TranscriptionPanelHeader', () => { await expect.element(page.getByRole('button', { name: /bearbeiten/i })).toBeVisible(); }); + it('renders both tabs when canEdit is true', async () => { + render(TranscriptionPanelHeader, { ...baseProps, canEdit: true }); + + await expect.element(page.getByTestId('mode-read')).toBeInTheDocument(); + await expect.element(page.getByTestId('mode-edit')).toBeInTheDocument(); + }); + + it('hides the edit tab and shows a plain title when canEdit is false', async () => { + render(TranscriptionPanelHeader, { ...baseProps, canEdit: false }); + + await expect.element(page.getByTestId('mode-edit')).not.toBeInTheDocument(); + await expect.element(page.getByTestId('mode-read')).not.toBeInTheDocument(); + await expect.element(page.getByRole('heading', { name: /^transkription$/i })).toBeVisible(); + }); + + it('keeps the section status line visible for readers (canEdit false)', async () => { + render(TranscriptionPanelHeader, { ...baseProps, canEdit: false, blockCount: 3 }); + + await expect.element(page.getByText('3 Abschnitte')).toBeVisible(); + }); + it('marks the Lesen button as aria-disabled when hasBlocks is false', async () => { render(TranscriptionPanelHeader, { ...baseProps,