refactor(history): reuse IconButton; drop redundant emptyText overrides
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:
@@ -2,6 +2,7 @@
|
|||||||
import { fileUrl } from '$lib/api/client';
|
import { fileUrl } from '$lib/api/client';
|
||||||
import { chapterLabel } from '$lib/api/chapters';
|
import { chapterLabel } from '$lib/api/chapters';
|
||||||
import type { ReadProgressSummary } from '$lib/api/read_progress';
|
import type { ReadProgressSummary } from '$lib/api/read_progress';
|
||||||
|
import IconButton from '$lib/components/IconButton.svelte';
|
||||||
import BookImage from '@lucide/svelte/icons/book-image';
|
import BookImage from '@lucide/svelte/icons/book-image';
|
||||||
import Trash2 from '@lucide/svelte/icons/trash-2';
|
import Trash2 from '@lucide/svelte/icons/trash-2';
|
||||||
|
|
||||||
@@ -112,16 +113,15 @@
|
|||||||
<span class="when">Read {formatDate(p.updated_at)}</span>
|
<span class="when">Read {formatDate(p.updated_at)}</span>
|
||||||
</div>
|
</div>
|
||||||
{#if onClear}
|
{#if onClear}
|
||||||
<button
|
<IconButton
|
||||||
type="button"
|
variant="danger"
|
||||||
class="icon-btn danger"
|
|
||||||
onclick={() => clear(p)}
|
onclick={() => clear(p)}
|
||||||
aria-label={`Clear ${p.manga_title} from history`}
|
aria-label={`Clear ${p.manga_title} from history`}
|
||||||
title="Clear from history"
|
title="Clear from history"
|
||||||
data-testid="{testid}-clear-{p.manga_id}"
|
data-testid="{testid}-clear-{p.manga_id}"
|
||||||
>
|
>
|
||||||
<Trash2 size={16} aria-hidden="true" />
|
<Trash2 size={16} aria-hidden="true" />
|
||||||
</button>
|
</IconButton>
|
||||||
{/if}
|
{/if}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
@@ -208,23 +208,4 @@
|
|||||||
padding: var(--space-2) var(--space-3);
|
padding: var(--space-2) var(--space-3);
|
||||||
margin: 0 0 var(--space-2);
|
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>
|
</style>
|
||||||
|
|||||||
@@ -95,12 +95,7 @@
|
|||||||
initialDistinct={data.distinctPageTags}
|
initialDistinct={data.distinctPageTags}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<HistoryList
|
<HistoryList entries={data.history} onClear={clearOne} testid="library-history" />
|
||||||
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"
|
|
||||||
/>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -33,12 +33,7 @@
|
|||||||
<Eye size={18} aria-hidden="true" />
|
<Eye size={18} aria-hidden="true" />
|
||||||
<span>Reading history</span>
|
<span>Reading history</span>
|
||||||
</h2>
|
</h2>
|
||||||
<HistoryList
|
<HistoryList entries={data.progress} onClear={clearOne} testid="history-reading" />
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section aria-labelledby="uploads-heading" class="uploads-section">
|
<section aria-labelledby="uploads-heading" class="uploads-section">
|
||||||
|
|||||||
Reference in New Issue
Block a user