From dcb33773493c85ae9a0f58ce62144bfbcb19dd7e Mon Sep 17 00:00:00 2001 From: Youwes09 Date: Mon, 23 Mar 2026 11:39:01 -0500 Subject: [PATCH] Chore: Standardized UI & Revamped Series-Detail --- src/components/layout/Layout.svelte | 4 +- src/components/layout/RecentActivity.svelte | 46 +-- src/components/pages/Downloads.svelte | 10 +- src/components/pages/Extensions.svelte | 40 +-- src/components/pages/History.svelte | 250 ---------------- src/components/pages/Library.svelte | 7 +- src/components/pages/Search.svelte | 2 +- src/components/pages/SeriesDetail.svelte | 299 ++++++++++---------- src/components/pages/Tracking.svelte | 133 ++++++++- src/components/shared/SourceList.svelte | 9 +- src/components/shared/TrackingPanel.svelte | 104 ++++++- 11 files changed, 428 insertions(+), 476 deletions(-) delete mode 100644 src/components/pages/History.svelte diff --git a/src/components/layout/Layout.svelte b/src/components/layout/Layout.svelte index 7650ecc..235d1a8 100644 --- a/src/components/layout/Layout.svelte +++ b/src/components/layout/Layout.svelte @@ -4,7 +4,7 @@ import Home from "../pages/Home.svelte"; import Library from "../pages/Library.svelte"; import SeriesDetail from "../pages/SeriesDetail.svelte"; - import History from "../pages/History.svelte"; + import RecentActivity from "./RecentActivity.svelte"; import Search from "../pages/Search.svelte"; import Discover from "../pages/Discover.svelte"; import GenreDrillPage from "../pages/GenreDrillPage.svelte"; @@ -25,7 +25,7 @@ {:else if store.navPage === "search"} {:else if store.navPage === "history"} - + {:else if (store.navPage === "explore" || store.navPage === "sources") && store.genreFilter} {:else if store.navPage === "explore" || store.navPage === "sources"} diff --git a/src/components/layout/RecentActivity.svelte b/src/components/layout/RecentActivity.svelte index f0c3881..5ddec63 100644 --- a/src/components/layout/RecentActivity.svelte +++ b/src/components/layout/RecentActivity.svelte @@ -79,11 +79,11 @@ } const filtered = $derived(search.trim() - ? store..filter((e) => + ? store.history.filter((e) => e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || e.chapterName.toLowerCase().includes(search.toLowerCase()) ) - : store.); + : store.history); const sessions = $derived(buildSessions(filtered)); @@ -97,10 +97,16 @@ return Array.from(map.entries()).map(([label, items]) => ({ label, items })); }); + // Resume: navigate to the manga's SeriesDetail (which will pick up from + // activeChapterList once chapters load). We can't hold a stale chapter list + // here — SeriesDetail fetches fresh chapters itself. function resume(session: Session) { - const ch = store..find((c) => c.id === session.latestChapterId); - if (ch && store..length > 0) openReader(ch, ); - else setActiveManga({ id: session.mangaId, title: session.mangaTitle, thumbnailUrl: session.thumbnailUrl } as any); + setActiveManga({ + id: session.mangaId, + title: session.mangaTitle, + thumbnailUrl: session.thumbnailUrl, + inLibrary: false, + } as any); } function handleClear() { @@ -111,17 +117,17 @@
-
+
History
- + {#if search}{/if}
- {#if store..length > 0} + {#if store.history.length > 0} @@ -129,44 +135,44 @@
- {#if store..totalChaptersRead > 0} + {#if store.readingStats.totalChaptersRead > 0}
- {store..currentStreakDays} + {store.readingStats.currentStreakDays} day streak
- {store..totalChaptersRead} + {store.readingStats.totalChaptersRead} chapters
- {formatReadTime(store..totalMinutesRead)} + {formatReadTime(store.readingStats.totalMinutesRead)} read time
- {store..totalMangaRead} + {store.readingStats.totalMangaRead} series
- {store..longestStreakDays}d + {store.readingStats.longestStreakDays}d best streak
Stats are preserved when you clear the feed
{/if} - {#if store..length === 0} + {#if store.history.length === 0}
-

No reading store.

+

No reading history yet

Chapters you read will appear here

{:else if sessions.length === 0} @@ -223,16 +229,16 @@ diff --git a/src/components/pages/Library.svelte b/src/components/pages/Library.svelte index bf73e41..42479fd 100644 --- a/src/components/pages/Library.svelte +++ b/src/components/pages/Library.svelte @@ -238,6 +238,7 @@
+
{#if loading}
{#each Array(12) as _} @@ -275,6 +276,7 @@
{/if} {/if} +
{/if} @@ -286,11 +288,12 @@ {/if} diff --git a/src/components/pages/Tracking.svelte b/src/components/pages/Tracking.svelte index 380c6e9..1e06afe 100644 --- a/src/components/pages/Tracking.svelte +++ b/src/components/pages/Tracking.svelte @@ -35,6 +35,9 @@ // Mutation state let updatingId: number | null = $state(null); let syncingId: number | null = $state(null); + // Chapter editing: recordId → draft value + let editingChapter: number | null = $state(null); + let chapterDraft: number = $state(0); // ── Load ─────────────────────────────────────────────────────────────────── @@ -187,14 +190,40 @@ setActiveManga(record.manga as any); setNavPage("library"); } + + function openChapterEditor(record: FlatRecord) { + editingChapter = record.id; + chapterDraft = record.lastChapterRead; + } + + function cancelChapterEditor() { + editingChapter = null; + } + + async function submitChapter(record: FlatRecord) { + const val = Math.max(0, chapterDraft); + editingChapter = null; + if (val === record.lastChapterRead) return; + updatingId = record.id; + try { + const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>( + UPDATE_TRACK, { recordId: record.id, lastChapterRead: val } + ); + patchRecord(record.trackerId, res.updateTrack.trackRecord); + } catch (e: any) { + addToast({ kind: "error", title: "Update failed", body: e?.message }); + } finally { + updatingId = null; + } + }
-
+
-

Tracking

+

Tracking

- - {#if progress !== null} -
+ + {#if editingChapter === record.id} +
+
+ Chapter read +
+ 0 ? record.totalChapters : undefined} + step="0.5" + bind:value={chapterDraft} + onkeydown={(e) => { + if (e.key === "Enter") submitChapter(record); + if (e.key === "Escape") cancelChapterEditor(); + }} + use:focusEl + /> + {#if record.totalChapters > 0} + / {record.totalChapters} + {/if} +
+
+ {#if record.totalChapters > 0} + + {/if} +
+ + +
+
+ {:else if progress !== null} +
openChapterEditor(record)} + onkeydown={(e) => e.key === "Enter" && openChapterEditor(record)} + title="Click to edit" + >
Ch. {record.lastChapterRead} / {record.totalChapters} + ✎ +
+ {:else} +
openChapterEditor(record)} + onkeydown={(e) => e.key === "Enter" && openChapterEditor(record)} + title="Click to set chapter" + > + + {record.lastChapterRead > 0 ? `Ch. ${record.lastChapterRead} read` : "Set chapter…"} + + ✎
- {:else if record.lastChapterRead > 0} - Ch. {record.lastChapterRead} read {/if}
@@ -408,20 +489,20 @@ .page { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; } /* ── Header ─────────────────────────────────────────────────────────────── */ - .page-header { flex-shrink: 0; border-bottom: 1px solid var(--border-dim); background: var(--bg-base); } - .header-top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5) var(--sp-3); } - .page-title { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); } + .header { flex-shrink: 0; border-bottom: 1px solid var(--border-dim); background: var(--bg-base); } + .header-top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6) var(--sp-3); } + .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .header-actions { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-muted); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); } .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); } .icon-btn:disabled { opacity: 0.3; cursor: default; } /* ── Tracker tabs ───────────────────────────────────────────────────────── */ - .tracker-tabs { display: flex; align-items: center; gap: 2px; padding: 0 var(--sp-4); overflow-x: auto; scrollbar-width: none; } + .tracker-tabs { display: flex; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-4); overflow-x: auto; scrollbar-width: none; } .tracker-tabs::-webkit-scrollbar { display: none; } - .tracker-tab { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; border-bottom: 2px solid transparent; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border-radius: 0; cursor: pointer; white-space: nowrap; transition: color var(--t-base), border-color var(--t-base); } + .tracker-tab { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: none; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: color var(--t-base), background var(--t-base); } .tracker-tab:hover { color: var(--text-muted); } - .tab-active { color: var(--text-secondary) !important; border-bottom-color: var(--accent) !important; } + .tab-active { background: var(--accent-muted); color: var(--accent-fg) !important; border: 1px solid var(--accent-dim); } .tab-tracker-icon { width: 14px; height: 14px; border-radius: 2px; object-fit: contain; } .tab-count { font-size: 10px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--bg-overlay); color: var(--text-faint); min-width: 18px; text-align: center; } @@ -516,6 +597,32 @@ .progress-track { flex: 1; height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; max-width: 160px; } .progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.3s ease; } .progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; } + .record-progress.clickable { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--t-fast); } + .record-progress.clickable:hover { background: var(--bg-overlay); } + .record-progress.clickable:hover .progress-label { color: var(--text-muted); } + .progress-edit-hint { font-size: 10px; color: var(--text-faint); opacity: 0; transition: opacity var(--t-fast); } + .record-progress.clickable:hover .progress-edit-hint { opacity: 1; } + + /* Chapter editor */ + .chapter-editor { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--accent-dim); background: var(--bg-overlay); } + .chapter-editor-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } + .chapter-editor-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); } + .chapter-input-wrap { display: flex; align-items: center; gap: var(--sp-2); } + .chapter-input { width: 72px; background: var(--bg-raised); border: 1px solid var(--accent-dim); border-radius: var(--radius-sm); padding: 4px 8px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary); outline: none; text-align: center; appearance: none; -webkit-appearance: none; -moz-appearance: textfield; } + .chapter-input:focus { border-color: var(--accent); } + .chapter-input::-webkit-outer-spin-button, + .chapter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } + .chapter-total { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); } + .chapter-slider { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; } + .chapter-editor-actions { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; } + .chapter-save-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 14px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-muted); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); } + .chapter-save-btn:hover { filter: brightness(1.15); } + .chapter-cancel-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); } + .chapter-cancel-btn:hover { color: var(--text-muted); border-color: var(--border-strong); } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } + + diff --git a/src/components/shared/SourceList.svelte b/src/components/shared/SourceList.svelte index da08548..0c5fc10 100644 --- a/src/components/shared/SourceList.svelte +++ b/src/components/shared/SourceList.svelte @@ -53,6 +53,7 @@
+
{#each langs as l}
{/if} +