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

fix(ocr): remove progress bar, keep text-only page counter

Browse Source 
The thin bar without a border looked broken at low progress values.
The text counter (e.g. "1 / 6") already communicates progress clearly
so the bar is unnecessary.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-13 10:46:29 +02:00
parent 84aca240ea
commit b868da07cd
2 changed files with 10 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/lib/components/OcrProgressBar.svelte
View File

@@ -8,26 +8,17 @@ let {
totalPages: number; totalPages: number;
skippedPages?: number; skippedPages?: number;
} = $props(); } = $props();
let percentage = $derived((currentPage / totalPages) * 100);
</script> </script>
{#if totalPages > 0} {#if totalPages > 0}
<div class="flex flex-col items-center"> <div
<div class="mt-2 flex flex-col items-center"
class="bg-brand-sand mx-auto mt-4 h-2 w-full max-w-xs rounded-full" role="progressbar"
role="progressbar" aria-valuenow={currentPage}
aria-valuenow={currentPage} aria-valuemax={totalPages}
aria-valuemax={totalPages} aria-label="OCR progress"
aria-label="OCR progress" >
> <span class="text-xs text-gray-400 tabular-nums">
<div
class="h-full rounded-full bg-brand-mint transition-all duration-500"
data-testid="progress-fill"
style="width: {percentage}%"
></div>
</div>
<span class="mt-1 text-xs text-gray-400 tabular-nums">
{currentPage} / {totalPages} {currentPage} / {totalPages}
</span> </span>
{#if skippedPages > 0} {#if skippedPages > 0}

12
frontend/src/lib/components/OcrProgressBar.svelte.spec.ts
View File

@@ -6,26 +6,18 @@ import OcrProgressBar from './OcrProgressBar.svelte';
afterEach(cleanup); afterEach(cleanup);
describe('OcrProgressBar', () => { describe('OcrProgressBar', () => {
it('renders progress bar with correct ARIA attributes', async () => { it('renders with correct ARIA attributes', async () => {
render(OcrProgressBar, { currentPage: 2, totalPages: 5 }); render(OcrProgressBar, { currentPage: 2, totalPages: 5 });
const bar = page.getByRole('progressbar'); const bar = page.getByRole('progressbar');
await expect.element(bar).toHaveAttribute('aria-valuenow', '2'); await expect.element(bar).toHaveAttribute('aria-valuenow', '2');
await expect.element(bar).toHaveAttribute('aria-valuemax', '5'); await expect.element(bar).toHaveAttribute('aria-valuemax', '5');
}); });
it('hides progress bar when totalPages is zero', async () => { it('hides when totalPages is zero', async () => {
render(OcrProgressBar, { currentPage: 0, totalPages: 0 }); render(OcrProgressBar, { currentPage: 0, totalPages: 0 });
await expect.element(page.getByRole('progressbar')).not.toBeInTheDocument(); await expect.element(page.getByRole('progressbar')).not.toBeInTheDocument();
}); });
it('fills to 100 percent when current equals total', async () => {
render(OcrProgressBar, { currentPage: 5, totalPages: 5 });
const fill = page.getByTestId('progress-fill');
await expect.element(fill).toBeInTheDocument();
const el = fill.element() as HTMLElement;
expect(el.style.width).toBe('100%');
});
it('shows page counter text', async () => { it('shows page counter text', async () => {
render(OcrProgressBar, { currentPage: 3, totalPages: 7 }); render(OcrProgressBar, { currentPage: 3, totalPages: 7 });
await expect.element(page.getByText('3 / 7')).toBeInTheDocument(); await expect.element(page.getByText('3 / 7')).toBeInTheDocument();