marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): add TranscriptionPanelHeader with mode toggle and status

Browse Source 
Segmented Lesen/Bearbeiten control, block count, last-edited date,
and close button. Lesen disabled when no blocks exist.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-07 11:10:39 +02:00
parent d070ae2612
commit 7d98081390
2 changed files with 202 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/lib/components/TranscriptionPanelHeader.svelte Normal file
View File

@@ -0,0 +1,94 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
type Props = {
mode: 'read' | 'edit';
hasBlocks: boolean;
blockCount: number;
lastEditedAt: string | null;
onModeChange: (mode: 'read' | 'edit') => void;
onClose: () => void;
};
let { mode, hasBlocks, blockCount, lastEditedAt, onModeChange, onClose }: Props = $props();
const formattedDate = $derived(
lastEditedAt
? new Intl.DateTimeFormat('de-DE', {
day: 'numeric',
month: 'short',
year: 'numeric'
}).format(new Date(lastEditedAt))
: null
);
function handleReadClick() {
if (hasBlocks) {
onModeChange('read');
}
}
</script>
<div
class="flex h-[44px] items-center justify-between border-b border-line bg-surface px-3 font-sans"
>
<!-- Segmented toggle -->
<div class="flex h-7 items-center rounded-full border border-line bg-muted p-0.5">
<button
type="button"
data-testid="mode-read"
aria-disabled={!hasBlocks}
onclick={handleReadClick}
class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'read'
? 'bg-primary text-primary-fg'
: 'text-ink-2 hover:text-ink'}"
style:opacity={!hasBlocks ? '0.35' : undefined}
>
{m.mode_read()}
</button>
<button
type="button"
data-testid="mode-edit"
onclick={() => onModeChange('edit')}
class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'edit'
? 'bg-primary text-primary-fg'
: 'text-ink-2 hover:text-ink'}"
>
{m.mode_edit()}
</button>
</div>
<!-- Status line -->
<p class="text-xs text-ink-2">
{#if blockCount === 1}
{m.transcription_status_section()}
{:else}
{m.transcription_status_sections({ count: blockCount })}
{/if}
{#if formattedDate}
<span class="ml-1"
>&middot; {m.transcription_status_last_edited({ time: formattedDate })}</span
>
{/if}
</p>
<!-- Close button -->
<button
type="button"
data-testid="panel-close"
onclick={onClose}
aria-label={m.transcription_panel_close()}
class="flex h-8 w-8 items-center justify-center rounded text-ink-2 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"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>

108
frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts Normal file
View File

@@ -0,0 +1,108 @@
import { describe, it, expect, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import TranscriptionPanelHeader from './TranscriptionPanelHeader.svelte';
describe('TranscriptionPanelHeader', () => {
it('should render Lesen and Bearbeiten buttons', async () => {
render(TranscriptionPanelHeader, {
mode: 'read',
hasBlocks: true,
blockCount: 3,
lastEditedAt: null,
onModeChange: () => {},
onClose: () => {}
});
await expect.element(page.getByText('Lesen')).toBeInTheDocument();
await expect.element(page.getByText('Bearbeiten')).toBeInTheDocument();
});
it('should disable Lesen button when hasBlocks is false', async () => {
render(TranscriptionPanelHeader, {
mode: 'edit',
hasBlocks: false,
blockCount: 0,
lastEditedAt: null,
onModeChange: () => {},
onClose: () => {}
});
const lesenBtn = document.querySelector('[data-testid="mode-read"]') as HTMLButtonElement;
expect(lesenBtn.getAttribute('aria-disabled')).toBe('true');
});
it('should call onModeChange when clicking Bearbeiten', async () => {
const onModeChange = vi.fn();
render(TranscriptionPanelHeader, {
mode: 'read',
hasBlocks: true,
blockCount: 3,
lastEditedAt: null,
onModeChange,
onClose: () => {}
});
const editBtn = document.querySelector('[data-testid="mode-edit"]')!;
editBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
expect(onModeChange).toHaveBeenCalledWith('edit');
});
it('should not call onModeChange when clicking disabled Lesen', async () => {
const onModeChange = vi.fn();
render(TranscriptionPanelHeader, {
mode: 'edit',
hasBlocks: false,
blockCount: 0,
lastEditedAt: null,
onModeChange,
onClose: () => {}
});
const readBtn = document.querySelector('[data-testid="mode-read"]')!;
readBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
expect(onModeChange).not.toHaveBeenCalled();
});
it('should call onClose when clicking close button', async () => {
const onClose = vi.fn();
render(TranscriptionPanelHeader, {
mode: 'read',
hasBlocks: true,
blockCount: 3,
lastEditedAt: null,
onModeChange: () => {},
onClose
});
const closeBtn = document.querySelector('[data-testid="panel-close"]')!;
closeBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
expect(onClose).toHaveBeenCalled();
});
it('should show singular block count for 1 block', async () => {
render(TranscriptionPanelHeader, {
mode: 'read',
hasBlocks: true,
blockCount: 1,
lastEditedAt: null,
onModeChange: () => {},
onClose: () => {}
});
await expect.element(page.getByText('1 Abschnitt')).toBeInTheDocument();
});
it('should show plural block count for multiple blocks', async () => {
render(TranscriptionPanelHeader, {
mode: 'read',
hasBlocks: true,
blockCount: 5,
lastEditedAt: null,
onModeChange: () => {},
onClose: () => {}
});
await expect.element(page.getByText('5 Abschnitte')).toBeInTheDocument();
});
});