feat(history): share one HistoryList across desktop and mobile

The desktop /profile/history page and the mobile Library "History" tab
each hand-rendered reading history with separate markup, which had drifted:
the Library tab was a read-only 2-column list with no date and no
removed-chapter / whole-manga fallbacks, while /profile/history was a
3-column list with a per-row clear button. Extract a shared HistoryList
component so the two can't diverge again.

- New HistoryList.svelte owns row rendering, the optimistic-removal UX
  (instant remove, rollback + inline error on failure), and the empty
  state. Clear is opt-in via an `onClear` prop so a caller can render
  read-only, but both surfaces now pass it.
- The mobile Library History tab gains the clear action, the "Read {date}"
  line, and the (chapter removed) / whole-manga fallbacks it was missing.
- Continue label is built in script (was inline) so the " — page N" suffix
  keeps its spaces — Svelte trimmed them at the {#if} edge, rendering
  "Chapter 3— page 7". Both surfaces now read "Continue Chapter N".

Net -204 lines across the two pages. Uploads parity on the mobile tab is
left as a follow-up (it needs the library loader to fetch uploads).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/routes/library/+page.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
-    import { fileUrl } from '$lib/api/client';
-    import { chapterLabel } from '$lib/api/chapters';
+    import { clearReadProgress, type ReadProgressSummary } from '$lib/api/read_progress';
     import SegmentedControl from '$lib/components/SegmentedControl.svelte';
     import BookmarkList from '$lib/components/BookmarkList.svelte';
     import CollectionsGrid from '$lib/components/CollectionsGrid.svelte';
     import PageTagsList from '$lib/components/PageTagsList.svelte';
-    import BookImage from '@lucide/svelte/icons/book-image';
+    import HistoryList from '$lib/components/HistoryList.svelte';
 
     let { data } = $props();
 
+    function clearOne(p: ReadProgressSummary): Promise<void> {
+        return clearReadProgress(p.manga_id);
+    }
+
     type Tab = 'bookmarks' | 'collections' | 'page-tags' | 'history';
     const TABS: { label: string; value: Tab }[] = [
         { label: 'Bookmarks', value: 'bookmarks' },
@@ -91,53 +94,13 @@
         initialItems={data.pageTags}
         initialDistinct={data.distinctPageTags}
     />
-{:else if data.history.length === 0}
-    <p class="hint" data-testid="library-history-empty">
-        Nothing here yet — open any manga and a row will land here once you turn
-        a page.
-    </p>
 {:else}
-    <ul class="history-list" data-testid="library-history-list">
-        {#each data.history as p (p.manga_id)}
-            <li class="history-row">
-                <a
-                    href={p.chapter_id != null
-                        ? `/manga/${p.manga_id}/chapter/${p.chapter_id}`
-                        : `/manga/${p.manga_id}`}
-                    class="cover-link"
-                    aria-hidden="true"
-                    tabindex="-1"
-                >
-                    {#if p.manga_cover_image_path}
-                        <img
-                            src={fileUrl(p.manga_cover_image_path)}
-                            alt=""
-                            class="cover"
-                            loading="lazy"
-                        />
-                    {:else}
-                        <div class="cover cover-placeholder">
-                            <BookImage size={18} aria-hidden="true" />
-                        </div>
-                    {/if}
-                </a>
-                <div class="meta">
-                    <a href="/manga/{p.manga_id}" class="title">{p.manga_title}</a>
-                    {#if p.chapter_id != null && p.chapter_number != null}
-                        <a
-                            class="target"
-                            href="/manga/{p.manga_id}/chapter/{p.chapter_id}"
-                        >
-                            Continue {chapterLabel({
-                                number: p.chapter_number,
-                                title: null
-                            })}{#if p.page > 1} — page {p.page}{/if}
-                        </a>
-                    {/if}
-                </div>
-            </li>
-        {/each}
-    </ul>
+    <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"
+    />
 {/if}
 
 <style>
@@ -165,65 +128,4 @@
     .error {
         color: var(--danger);
     }
-
-    .history-list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-3);
-    }
-
-    .history-row {
-        display: grid;
-        grid-template-columns: 56px 1fr;
-        gap: var(--space-3);
-        align-items: center;
-    }
-
-    .cover-link {
-        display: block;
-        line-height: 0;
-    }
-
-    .cover {
-        width: 56px;
-        aspect-ratio: 2 / 3;
-        object-fit: cover;
-        border-radius: var(--radius-sm);
-        background: var(--surface);
-    }
-
-    .cover-placeholder {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--text-muted);
-    }
-
-    .meta {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-1);
-        min-width: 0;
-    }
-
-    .title {
-        font-weight: var(--weight-semibold);
-        color: var(--text);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .title:hover {
-        color: var(--primary);
-        text-decoration: none;
-    }
-
-    .target {
-        font-size: var(--font-sm);
-        color: var(--primary);
-    }
 </style>