From a9dc047b447fb4e14d70293cf7dc1ab6fe04149d Mon Sep 17 00:00:00 2001 From: Youwes09 Date: Mon, 11 May 2026 20:47:37 -0500 Subject: [PATCH] Fix: Toolbar Uniformity & SeriesDetail Redirect (#66) --- .../downloads/components/Downloads.svelte | 4 +- .../extensions/components/Extensions.svelte | 5 +- .../series/components/SeriesDetail.svelte | 4 +- .../series/components/SeriesHeader.svelte | 82 +++++++++-- .../components/TrackingToolbar.svelte | 132 +++++++----------- src/shared/chrome/RecentActivity.svelte | 35 ++--- src/shared/chrome/Sidebar.svelte | 2 +- 7 files changed, 139 insertions(+), 125 deletions(-) diff --git a/src/features/downloads/components/Downloads.svelte b/src/features/downloads/components/Downloads.svelte index 6baa1ab..a642ee6 100644 --- a/src/features/downloads/components/Downloads.svelte +++ b/src/features/downloads/components/Downloads.svelte @@ -211,8 +211,8 @@ .content { flex: 1; overflow-y: auto; padding: 0 var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); } - .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):not(.active) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); } + .icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-faint); cursor: pointer; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); } + .icon-btn:hover:not(:disabled):not(.active) { color: var(--text-primary); border-color: var(--border-strong); } .icon-btn.active:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-muted); } .icon-btn:disabled { opacity: 0.3; cursor: default; } .icon-btn.loading { border-color: var(--accent-dim); color: var(--accent-fg); background: var(--accent-muted); } diff --git a/src/features/extensions/components/Extensions.svelte b/src/features/extensions/components/Extensions.svelte index 8143223..2d21da9 100644 --- a/src/features/extensions/components/Extensions.svelte +++ b/src/features/extensions/components/Extensions.svelte @@ -323,8 +323,9 @@ .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .list { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 1px; } .empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); } - :global(.icon-btn) { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-muted); transition: color var(--t-base), background var(--t-base); } - :global(.icon-btn:hover:not(:disabled)) { color: var(--text-primary); background: var(--bg-raised); } + :global(.icon-btn) { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-faint); cursor: pointer; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); } + :global(.icon-btn:hover:not(:disabled)) { color: var(--text-primary); border-color: var(--border-strong); } + :global(.icon-btn-active) { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); } .ext-panel { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); flex-shrink: 0; border-bottom: 1px solid var(--border-dim); background: var(--bg-raised); opacity: 1; } .ext-panel-anim { animation: panelSlide 0.18s cubic-bezier(0.16,1,0.3,1) both; } .panel-header { display: flex; align-items: center; padding-bottom: var(--sp-1); } diff --git a/src/features/series/components/SeriesDetail.svelte b/src/features/series/components/SeriesDetail.svelte index 009c35d..8b02094 100644 --- a/src/features/series/components/SeriesDetail.svelte +++ b/src/features/series/components/SeriesDetail.svelte @@ -103,8 +103,8 @@ const totalPages = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE)); const pageChapters = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE)); - const readCount = $derived(chapters.filter(c => c.isRead).length); - const totalCount = $derived(chapters.length); + const readCount = $derived(sortedChapters.filter(c => c.isRead).length); + const totalCount = $derived(sortedChapters.length); const progressPct = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0); const downloadedCount = $derived(chapters.filter(c => c.isDownloaded).length); diff --git a/src/features/series/components/SeriesHeader.svelte b/src/features/series/components/SeriesHeader.svelte index f8d6aae..0d1a529 100644 --- a/src/features/series/components/SeriesHeader.svelte +++ b/src/features/series/components/SeriesHeader.svelte @@ -55,6 +55,7 @@ let manageOpen: boolean = $state(false); let genresExpanded: boolean = $state(false); + let altOpen: boolean = $state(false); const statusLabel = $derived( manga?.status ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() : null @@ -68,7 +69,9 @@ !!store.settings.mangaPrefs?.[store.activeManga!.id]?.coverUrl ); - function focusOnMount(node: HTMLElement) { node.focus(); } + const altTitles = $derived( + (manga as any)?.alternativeTitles ?? (manga as any)?.altTitles ?? [] + );
@@ -76,9 +79,9 @@ Back -
+
+ {#if loadingManga}
@@ -88,12 +91,36 @@ {:else}

{manga?.title}

+ {#if manga?.author || manga?.artist}

{[manga?.author, manga?.artist].filter(Boolean).filter((v, i, a) => a.indexOf(v) === i).join(" ยท ")}

{/if} - {#if statusLabel} - {statusLabel} + +
+ {#if statusLabel} + {statusLabel} + {/if} + {#if manga?.source?.displayName ?? (manga as any)?.source?.name} + {manga?.source?.displayName ?? (manga as any)?.source?.name} + {/if} +
+ + {#if altTitles.length > 0} +
+ + {#if altOpen} +
+ {#each altTitles as t} +

{t}

+ {/each} +
+ {/if} +
{/if} + {#if manga?.genre?.length}
{#each (genresExpanded ? manga.genre : manga.genre.slice(0, 3)) as g} @@ -106,8 +133,12 @@ {/if}
{/if} + {#if manga?.description} -

{manga.description}

+
+

{manga.description}

+ +
{/if}
{/if} @@ -197,11 +228,13 @@ padding: var(--sp-5); border-right: 1px solid var(--border-dim); overflow-y: auto; + scrollbar-width: none; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg-base); } + .sidebar::-webkit-scrollbar { display: none; } .back { display: flex; align-items: center; gap: var(--sp-2); @@ -215,13 +248,17 @@ width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; + cursor: pointer; transition: opacity var(--t-base); + padding: 0; } + .cover-wrap:hover { opacity: 0.88; } :global(.cover) { width: 100%; height: 100%; object-fit: cover; } .meta-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); } .sk-line { border-radius: var(--radius-sm); } .meta { display: flex; flex-direction: column; gap: var(--sp-3); } + .title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--leading-snug); @@ -229,13 +266,33 @@ } .byline { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-ui); } - .status-badge { + .badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); } + .badge { display: inline-block; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-sm); width: fit-content; } - .status-badge.ongoing { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); } - .status-badge.ended { background: var(--bg-raised); color: var(--text-faint); border: 1px solid var(--border-dim); } + .badge-ongoing { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); } + .badge-ended { background: var(--bg-raised); color: var(--text-faint); border: 1px solid var(--border-dim); } + .badge-source { + background: var(--bg-raised); color: var(--text-faint); border: 1px solid var(--border-dim); + text-transform: none; letter-spacing: var(--tracking-normal); + } + + .alttitles-section { display: flex; flex-direction: column; gap: var(--sp-1); } + .row-toggle { + display: flex; align-items: center; justify-content: space-between; width: 100%; + font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); + letter-spacing: var(--tracking-wide); padding: 2px 0; + transition: color var(--t-base); + } + .row-toggle:hover { color: var(--text-muted); } + .alttitles-list { display: flex; flex-direction: column; gap: 3px; padding-top: var(--sp-1); } + .alttitle { + font-size: var(--text-2xs); color: var(--text-faint); font-family: var(--font-ui); + line-height: var(--leading-snug); padding-left: var(--sp-1); + border-left: 1px solid var(--border-dim); + } .genres { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .genre { @@ -253,10 +310,17 @@ } .genre-toggle:hover { color: var(--accent-fg); border-color: var(--accent-dim); } + .desc-wrap { display: flex; flex-direction: column; gap: var(--sp-1); } .desc { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } + .expand-toggle { + font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); + letter-spacing: var(--tracking-wide); align-self: flex-start; + transition: color var(--t-base); + } + .expand-toggle:hover { color: var(--accent-fg); } .cta-section { display: flex; flex-direction: column; gap: var(--sp-2); } .read-btn { diff --git a/src/features/tracking/components/TrackingToolbar.svelte b/src/features/tracking/components/TrackingToolbar.svelte index 614a688..5b10a6d 100644 --- a/src/features/tracking/components/TrackingToolbar.svelte +++ b/src/features/tracking/components/TrackingToolbar.svelte @@ -32,32 +32,37 @@
Tracking - + + {#if !loading && loggedIn.length > 0} +
+ + {#each loggedIn as t} + + {/each} +
+ {/if} + +
+ +
{#if !loading && loggedIn.length > 0} -
- - {#each loggedIn as t} - - {/each} -
-
@@ -94,79 +99,40 @@
\ No newline at end of file diff --git a/src/shared/chrome/RecentActivity.svelte b/src/shared/chrome/RecentActivity.svelte index e7b2bed..323b8ff 100644 --- a/src/shared/chrome/RecentActivity.svelte +++ b/src/shared/chrome/RecentActivity.svelte @@ -234,7 +234,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: var(--sp-3) var(--sp-5); + padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; } @@ -311,33 +311,16 @@ .search-clear:hover { color: var(--text-muted); } .clear-btn { - display: flex; - align-items: center; - gap: 4px; - height: 26px; - padding: 0 var(--sp-2); - border-radius: var(--radius-md); - color: var(--text-faint); - background: none; - border: 1px solid transparent; - cursor: pointer; - font-family: var(--font-ui); - font-size: var(--text-2xs); - letter-spacing: var(--tracking-wide); + display: flex; align-items: center; gap: 4px; + height: 30px; padding: 0 var(--sp-2); + border-radius: var(--radius-md); border: 1px solid var(--border-dim); + background: var(--bg-raised); color: var(--text-faint); + cursor: pointer; font-family: var(--font-ui); font-size: var(--text-2xs); + letter-spacing: var(--tracking-wide); flex-shrink: 0; transition: color var(--t-base), background var(--t-base), border-color var(--t-base); } - - .clear-btn:hover { - color: var(--color-error); - background: var(--color-error-bg); - border-color: color-mix(in srgb, var(--color-error) 20%, transparent); - } - - .clear-btn.confirm { - color: var(--color-error); - background: var(--color-error-bg); - border-color: var(--color-error); - } + .clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); border-color: color-mix(in srgb, var(--color-error) 30%, transparent); } + .clear-btn.confirm { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error); } .clear-label { font-size: var(--text-2xs); } diff --git a/src/shared/chrome/Sidebar.svelte b/src/shared/chrome/Sidebar.svelte index 51aaf54..0fc72d6 100644 --- a/src/shared/chrome/Sidebar.svelte +++ b/src/shared/chrome/Sidebar.svelte @@ -61,7 +61,7 @@