refactor(history): reuse IconButton; drop redundant emptyText overrides
All checks were successful
deploy / test-backend (push) Successful in 30m16s
deploy / test-frontend (push) Successful in 10m36s
deploy / build-and-push (push) Successful in 10m24s
deploy / deploy (push) Successful in 13s

The HistoryList clear button hand-rolled the same `.icon-btn danger`
styles that were extracted into the shared IconButton component one
commit earlier — the exact duplication that refactor targeted. Swap it
for <IconButton variant="danger">; data-testid/aria pass through the
component's {...rest} spread so behaviour is unchanged.

Both callers also passed an emptyText equal to the prop's default; drop
the overrides so the default lives in one place.

No behaviour change, so no version bump.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-06-25 21:51:05 +02:00
parent 5130c9933e
commit 4fb98e4a1e
3 changed files with 6 additions and 35 deletions

View File

@@ -2,6 +2,7 @@
import { fileUrl } from '$lib/api/client';
import { chapterLabel } from '$lib/api/chapters';
import type { ReadProgressSummary } from '$lib/api/read_progress';
import IconButton from '$lib/components/IconButton.svelte';
import BookImage from '@lucide/svelte/icons/book-image';
import Trash2 from '@lucide/svelte/icons/trash-2';
@@ -112,16 +113,15 @@
<span class="when">Read {formatDate(p.updated_at)}</span>
</div>
{#if onClear}
<button
type="button"
class="icon-btn danger"
<IconButton
variant="danger"
onclick={() => clear(p)}
aria-label={`Clear ${p.manga_title} from history`}
title="Clear from history"
data-testid="{testid}-clear-{p.manga_id}"
>
<Trash2 size={16} aria-hidden="true" />
</button>
</IconButton>
{/if}
</li>
{/each}
@@ -208,23 +208,4 @@
padding: var(--space-2) var(--space-3);
margin: 0 0 var(--space-2);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
color: var(--text-muted);
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
}
.icon-btn.danger:hover {
color: var(--danger);
background: var(--surface-elevated);
}
</style>

View File

@@ -95,12 +95,7 @@
initialDistinct={data.distinctPageTags}
/>
{:else}
<HistoryList
entries={data.history}
onClear={clearOne}
emptyText="Nothing here yet — open any manga and a row will land here once you turn a page."
testid="library-history"
/>
<HistoryList entries={data.history} onClear={clearOne} testid="library-history" />
{/if}
<style>

View File

@@ -33,12 +33,7 @@
<Eye size={18} aria-hidden="true" />
<span>Reading history</span>
</h2>
<HistoryList
entries={data.progress}
onClear={clearOne}
emptyText="Nothing here yet — open any manga and a row will land here once you turn a page."
testid="history-reading"
/>
<HistoryList entries={data.progress} onClear={clearOne} testid="history-reading" />
</section>
<section aria-labelledby="uploads-heading" class="uploads-section">