gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 09:19:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Port over SeriesDetail (WIP Panels)

Browse Source
This commit is contained in:
Youwes09
2026-05-28 23:05:02 -05:00
parent 584b917f98
commit 8c250021a0
53 changed files with 4570 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/library/LibraryFilters.svelte
+32 -39
View File
@@ -1,28 +1,31 @@
<script lang="ts">
import { Check, Funnel } from 'phosphor-svelte'
import type { MangaStatus } from '$lib/server-adapters/types'
import type { LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
interface Props {
status: MangaStatus | 'all'
unread: boolean
downloaded: boolean
bookmarked: boolean
status: LibraryStatusFilter
filters: Partial<Record<LibraryContentFilter, boolean>>
hasActive: boolean
open: boolean
onToggle: () => void
onStatus: (s: MangaStatus | 'all') => void
onUnread: () => void
onDownloaded: () => void
onBookmarked: () => void
onStatusChange: (s: LibraryStatusFilter) => void
onFilterToggle: (f: LibraryContentFilter) => void
onClear: () => void
}
let {
status, unread, downloaded, bookmarked, hasActive, open,
onToggle, onStatus, onUnread, onDownloaded, onBookmarked, onClear,
status, filters, hasActive, open,
onToggle, onStatusChange, onFilterToggle, onClear,
}: Props = $props()
const STATUSES: [MangaStatus, string][] = [
const CONTENT_FILTERS: [LibraryContentFilter, string][] = [
['unread', 'Unread'],
['started', 'Started'],
['downloaded', 'Downloaded'],
['bookmarked', 'Bookmarked'],
]
const STATUSES: [LibraryStatusFilter, string][] = [
['ONGOING', 'Ongoing'],
['COMPLETED', 'Completed'],
['ON_HIATUS', 'Hiatus'],
@@ -53,21 +56,17 @@
<div class="divider"></div>
<p class="section-label">Content</p>
{#each [
{ label: 'Unread', active: unread, handler: onUnread },
{ label: 'Downloaded', active: downloaded, handler: onDownloaded },
{ label: 'Bookmarked', active: bookmarked, handler: onBookmarked },
] as f}
{#each CONTENT_FILTERS as [key, label]}
<button
class="item"
class:item-active={f.active}
class:item-active={!!filters[key]}
role="menuitem"
onclick={f.handler}
onclick={() => onFilterToggle(key)}
>
<span class="check" class:check-on={f.active}>
{#if f.active}<Check size={9} weight="bold" />{/if}
<span class="check" class:check-on={!!filters[key]}>
{#if filters[key]}<Check size={9} weight="bold" />{/if}
</span>
{f.label}
{label}
</button>
{/each}
@@ -79,7 +78,7 @@
class="item"
class:item-active={status === s}
role="menuitem"
onclick={() => onStatus(status === s ? 'all' : s)}
onclick={() => onStatusChange(status === s ? 'ALL' : s)}
>
<span class="check" class:check-on={status === s}>
{#if status === s}<Check size={9} weight="bold" />{/if}
@@ -97,24 +96,19 @@
.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);
border-radius: var(--radius-md); border: 1px solid var(--border-dim);
background: var(--bg-raised); color: var(--text-faint);
cursor: pointer;
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.panel {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 9999;
min-width: 220px;
background: var(--bg-raised);
border: 1px solid var(--border-base);
border-radius: var(--radius-lg);
padding: var(--sp-1);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
min-width: 220px; background: var(--bg-raised);
border: 1px solid var(--border-base); border-radius: var(--radius-lg);
padding: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
animation: fadeIn 0.1s ease both;
}
@@ -152,15 +146,14 @@
cursor: pointer; text-align: left;
transition: background var(--t-base), color var(--t-base);
}
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
.item-active:hover { background: var(--accent-dim); }
.check {
width: 13px; height: 13px; border-radius: 2px;
border: 1px solid var(--border-strong);
background: transparent; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border-strong); background: transparent;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
color: var(--bg-base);
transition: background var(--t-base), border-color var(--t-base);
}
src/lib/components/library/LibraryGrid.svelte
+82 -23
View File
@@ -1,30 +1,46 @@
<script lang="ts">
import { CheckSquare, Trash } from 'phosphor-svelte'
import type { Manga } from '$lib/types'
import { CheckSquare, Trash, Folder } from 'phosphor-svelte'
import type { Manga, Category } from '$lib/types'
interface Props {
items: Manga[]
loading: boolean
selectMode: boolean
selected: Set<number>
tab: string
onCardClick: (e: MouseEvent, m: Manga) => void
onSelectAll: () => void
onExitSelect: () => void
onBulkRemove: () => void
items: Manga[]
loading: boolean
selectMode: boolean
selected: Set<number>
tab: string
visibleCategories: Category[]
bulkWorking: boolean
onCardClick: (e: MouseEvent, m: Manga) => void
onCardContextMenu: (e: MouseEvent, m: Manga) => void
onSelectAll: () => void
onExitSelect: () => void
onBulkRemove: () => void
onBulkMove: (cat: Category) => void
}
let {
items, loading, selectMode, selected, tab,
onCardClick, onSelectAll, onExitSelect, onBulkRemove,
visibleCategories, bulkWorking,
onCardClick, onCardContextMenu, onSelectAll, onExitSelect, onBulkRemove, onBulkMove,
}: Props = $props()
const THUMB_BASE = 'http://127.0.0.1:4567'
let movePanelOpen = $state(false)
function coverUrl(m: Manga) {
const url = m.thumbnailUrl ?? ''
return url.startsWith('http') ? url : `${THUMB_BASE}${url}`
}
function onDocDown(e: MouseEvent) {
if (movePanelOpen && !(e.target as HTMLElement).closest('.move-wrap')) movePanelOpen = false
}
$effect(() => {
document.addEventListener('mousedown', onDocDown, true)
return () => document.removeEventListener('mousedown', onDocDown, true)
})
</script>
{#if selectMode}
@@ -32,9 +48,36 @@
<span class="sel-count">{selected.size} selected</span>
<button class="sel-text-btn" onclick={onSelectAll}>Select all</button>
<div class="sel-right">
{#if visibleCategories.length > 0}
<div class="move-wrap">
<button
class="sel-action-btn"
disabled={selected.size === 0 || bulkWorking}
onclick={() => movePanelOpen = !movePanelOpen}
>
<Folder size={13} weight="bold" />
Move to folder
</button>
{#if movePanelOpen}
<div class="move-panel" role="menu">
{#each visibleCategories as cat}
<button
class="move-item"
role="menuitem"
onclick={() => { onBulkMove(cat); movePanelOpen = false }}
>
<Folder size={12} weight="bold" />
{cat.name}
</button>
{/each}
</div>
{/if}
</div>
{/if}
<button
class="sel-action-btn sel-danger"
disabled={selected.size === 0}
disabled={selected.size === 0 || bulkWorking}
onclick={onBulkRemove}
>
<Trash size={13} weight="bold" />
@@ -65,7 +108,7 @@
<div class="empty">
{tab === 'downloaded'
? 'No downloaded manga.'
: 'No manga saved to library — browse sources to add some.'}
: 'No manga in this library — browse sources to add some.'}
</div>
{:else}
@@ -78,10 +121,7 @@
class:card-selected={isSelected}
class:select-mode={selectMode}
onclick={(e) => onCardClick(e, m)}
oncontextmenu={(e) => {
e.preventDefault()
onCardClick(e, m)
}}
oncontextmenu={(e) => onCardContextMenu(e, m)}
>
<div class="cover-wrap" class:completed={isCompleted}>
<img
@@ -157,12 +197,31 @@
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.sel-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sel-action-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.sel-danger:hover:not(:disabled) {
color: var(--color-error, #e05c5c);
border-color: color-mix(in srgb, var(--color-error, #e05c5c) 40%, transparent);
background: color-mix(in srgb, var(--color-error, #e05c5c) 8%, transparent);
}
.move-wrap { position: relative; }
.move-panel {
position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999;
min-width: 180px; background: var(--bg-raised);
border: 1px solid var(--border-base); border-radius: var(--radius-lg);
padding: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
animation: fadeIn 0.1s ease both;
}
.move-item {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; padding: 7px 10px; border-radius: var(--radius-sm);
border: none; background: transparent; color: var(--text-muted);
font-family: var(--font-ui); font-size: var(--text-xs);
cursor: pointer; text-align: left;
transition: background var(--t-base), color var(--t-base);
}
.move-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
@@ -205,9 +264,9 @@
letter-spacing: 0.04em; line-height: 1; padding: 3px 7px;
border-radius: 20px; white-space: nowrap;
}
.badge-unread { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.badge-done { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
.badge-dl { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; }
.badge-unread { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.badge-done { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
.badge-dl { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; }
.select-overlay {
position: absolute; inset: 0; z-index: 3;
@@ -241,6 +300,6 @@
text-align: center;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
</style>
src/lib/components/library/LibraryToolbar.svelte
+160 -71
View File
@@ -1,52 +1,75 @@
<script lang="ts">
import {
MagnifyingGlass, Books, DownloadSimple,
SortAscending, CaretUp, CaretDown, ArrowsClockwise,
MagnifyingGlass, Books, DownloadSimple, FolderSimple,
SortAscending, CaretUp, CaretDown, ArrowsClockwise, X,
} from 'phosphor-svelte'
import LibraryFilters from './LibraryFilters.svelte'
import type { LibrarySortOption, LibraryTab } from '$lib/state/library.svelte'
import type { MangaStatus } from '$lib/server-adapters/types'
import type { LibrarySortOption, LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
import type { Category } from '$lib/types'
interface Props {
tab: LibraryTab
savedCount: number
dlCount: number
sort: LibrarySortOption
sortDesc: boolean
status: MangaStatus | 'all'
unread: boolean
downloaded: boolean
bookmarked: boolean
hasActiveFilters: boolean
refreshing: boolean
query: string
onTab: (t: LibraryTab) => void
onQuery: (q: string) => void
onSort: (s: LibrarySortOption) => void
onSortDesc: () => void
onStatus: (s: MangaStatus | 'all') => void
onUnread: () => void
onDownloaded: () => void
onBookmarked: () => void
onFilterClear: () => void
onRefresh: () => void
tab: string
tabSortMode: LibrarySortOption
tabSortDir: 'asc' | 'desc'
tabStatus: LibraryStatusFilter
tabFilters: Partial<Record<LibraryContentFilter, boolean>>
hasActiveFilters: boolean
visibleCategories: Category[]
visibleTabIds: string[]
counts: Record<string, number>
query: string
refreshing: boolean
refreshProgress: { finished: number; total: number }
refreshDone: boolean
refreshingCatId: number | null
activeDragKind: 'tab' | null
dragInsertIdx: number
dragTabId: string | null
dragOverTabId: string | null
onTabChange: (t: string) => void
onQuery: (q: string) => void
onSortChange: (mode: LibrarySortOption) => void
onSortDirToggle: () => void
onStatusChange: (s: LibraryStatusFilter) => void
onFilterToggle: (f: LibraryContentFilter) => void
onFiltersClear: () => void
onRefresh: () => void
onCancelRefresh: () => void
onRefreshCategory: (catId: number) => void
onOpenDownloadsFolder: () => void
onTabDragStart: (e: DragEvent, id: string) => void
onTabDragOver: (e: DragEvent, id: string, idx: number) => void
onTabDragLeave: () => void
onTabDrop: (e: DragEvent, id: string) => void
onTabDragEnd: () => void
}
let {
tab, savedCount, dlCount, sort, sortDesc,
status, unread, downloaded, bookmarked, hasActiveFilters, refreshing, query,
onTab, onQuery, onSort, onSortDesc,
onStatus, onUnread, onDownloaded, onBookmarked, onFilterClear, onRefresh,
tab, tabSortMode, tabSortDir, tabStatus, tabFilters,
hasActiveFilters, visibleCategories, visibleTabIds, counts, query,
refreshing, refreshProgress, refreshDone, refreshingCatId,
activeDragKind, dragInsertIdx, dragTabId, dragOverTabId,
onTabChange, onQuery, onSortChange, onSortDirToggle,
onStatusChange, onFilterToggle, onFiltersClear,
onRefresh, onCancelRefresh, onOpenDownloadsFolder,
onTabDragStart, onTabDragOver, onTabDragLeave, onTabDrop, onTabDragEnd,
}: Props = $props()
let sortOpen = $state(false)
let filterOpen = $state(false)
const SORT_LABELS: Record<LibrarySortOption, string> = {
alphabetical: 'A–Z',
unread: 'Unread chapters',
lastRead: 'Recently read',
dateAdded: 'Date added',
alphabetical: 'A–Z',
unread: 'Unread chapters',
lastRead: 'Recently read',
dateAdded: 'Date added',
totalChapters: 'Total chapters',
latestFetched: 'Latest fetched',
latestUploaded: 'Latest uploaded',
}
function catById(id: string): Category | undefined {
return visibleCategories.find(c => String(c.id) === id)
}
function onDocDown(e: MouseEvent) {
@@ -64,17 +87,49 @@
<div class="toolbar">
<span class="heading">Library</span>
<div class="tabs">
<button class="tab" class:active={tab === 'saved'} onclick={() => onTab('saved')}>
<Books size={11} weight="bold" />
Saved
<span class="count">{savedCount}</span>
</button>
<button class="tab" class:active={tab === 'downloaded'} onclick={() => onTab('downloaded')}>
<DownloadSimple size={11} weight="bold" />
Downloaded
<span class="count">{dlCount}</span>
</button>
<div class="tabs" role="tablist">
{#each visibleTabIds as id, idx}
{@const isActive = tab === id}
{@const isDragOver = dragOverTabId === id}
{@const showInsertBefore = activeDragKind === 'tab' && dragInsertIdx === idx}
{@const showInsertAfter = activeDragKind === 'tab' && dragInsertIdx === idx + 1 && idx === visibleTabIds.length - 1}
{#if showInsertBefore}
<div class="drop-indicator" aria-hidden="true"></div>
{/if}
<button
class="tab"
class:active={isActive}
class:drag-over={isDragOver}
role="tab"
aria-selected={isActive}
draggable="true"
ondragstart={(e) => onTabDragStart(e, id)}
ondragover={(e) => onTabDragOver(e, id, idx)}
ondragleave={onTabDragLeave}
ondrop={(e) => onTabDrop(e, id)}
ondragend={onTabDragEnd}
onclick={() => onTabChange(id)}
>
{#if id === 'library'}
<Books size={11} weight="bold" />
Library
{:else if id === 'downloaded'}
<DownloadSimple size={11} weight="bold" />
Downloaded
{:else}
{@const cat = catById(id)}
<FolderSimple size={11} weight="bold" />
{cat?.name ?? id}
{/if}
<span class="count">{counts[id] ?? 0}</span>
</button>
{#if showInsertAfter}
<div class="drop-indicator" aria-hidden="true"></div>
{/if}
{/each}
</div>
<div class="right">
@@ -88,20 +143,36 @@
/>
</div>
{#if tab === 'downloaded'}
<button class="icon-btn" title="Open downloads folder" onclick={onOpenDownloadsFolder}>
<FolderSimple size={15} weight="bold" />
</button>
{/if}
<button
class="icon-btn"
class:spinning={refreshing}
title={refreshing ? 'Checking for updates…' : 'Check for updates'}
onclick={onRefresh}
disabled={refreshing}
class:done={refreshDone}
title={refreshing ? 'Cancel update' : 'Check for updates'}
onclick={refreshing ? onCancelRefresh : onRefresh}
>
<ArrowsClockwise size={15} weight="bold" />
{#if refreshing}
<X size={15} weight="bold" />
{:else}
<ArrowsClockwise size={15} weight="bold" />
{/if}
</button>
{#if refreshing && refreshProgress.total > 0}
<span class="refresh-label">
{refreshProgress.finished}/{refreshProgress.total}
</span>
{/if}
<div class="sort-wrap">
<button
class="icon-btn"
class:active={sort !== 'alphabetical' || sortDesc}
class:active={tabSortMode !== 'alphabetical' || tabSortDir !== 'asc'}
title="Sort"
onclick={() => { sortOpen = !sortOpen; filterOpen = false }}
>
@@ -118,21 +189,21 @@
{#each Object.entries(SORT_LABELS) as [s, label]}
<button
class="item"
class:item-active={sort === s}
class:item-active={tabSortMode === s}
role="menuitem"
onclick={() => { onSort(s as LibrarySortOption); sortOpen = false }}
onclick={() => { onSortChange(s as LibrarySortOption); sortOpen = false }}
>
{label}
{#if sort === s}
{#if sortDesc}<CaretDown size={11} weight="bold" />
{#if tabSortMode === s}
{#if tabSortDir === 'desc'}<CaretDown size={11} weight="bold" />
{:else}<CaretUp size={11} weight="bold" />
{/if}
{/if}
</button>
{/each}
<button class="item dir-toggle" role="menuitem" onclick={onSortDesc}>
{sortDesc ? 'Descending' : 'Ascending'}
{#if sortDesc}<CaretDown size={11} weight="bold" />
<button class="item dir-toggle" role="menuitem" onclick={onSortDirToggle}>
{tabSortDir === 'desc' ? 'Descending' : 'Ascending'}
{#if tabSortDir === 'desc'}<CaretDown size={11} weight="bold" />
{:else}<CaretUp size={11} weight="bold" />
{/if}
</button>
@@ -142,12 +213,14 @@
<div class="filter-wrap">
<LibraryFilters
{status} {unread} {downloaded} {bookmarked}
status={tabStatus}
filters={tabFilters}
hasActive={hasActiveFilters}
open={filterOpen}
onToggle={() => { filterOpen = !filterOpen; sortOpen = false }}
{onStatus} {onUnread} {onDownloaded} {onBookmarked}
onClear={onFilterClear}
{onStatusChange}
{onFilterToggle}
onClear={onFiltersClear}
/>
</div>
</div>
@@ -156,11 +229,13 @@
<style>
.toolbar {
position: relative; z-index: 100;
display: flex; align-items: center; gap: var(--sp-4);
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-6);
border-bottom: 1px solid var(--border-dim);
flex-shrink: 0; min-width: 0;
flex-shrink: 0; min-width: 0; overflow-x: auto;
scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.heading {
font-family: var(--font-ui); font-size: var(--text-xs);
@@ -172,6 +247,7 @@
display: flex; align-items: center; gap: 2px;
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-md); padding: 2px;
flex-shrink: 0;
}
.tab {
@@ -180,15 +256,22 @@
letter-spacing: var(--tracking-wide); text-transform: uppercase;
padding: 4px 10px; border-radius: var(--radius-sm);
border: 1px solid transparent; color: var(--text-faint);
white-space: nowrap;
white-space: nowrap; cursor: pointer;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
cursor: pointer;
user-select: none;
}
.tab:hover { color: var(--text-muted); }
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
.tab:hover { color: var(--text-muted); }
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
.tab.drag-over { border-color: var(--accent); }
.count { font-size: var(--text-2xs); opacity: 0.6; }
.drop-indicator {
width: 2px; height: 20px; background: var(--accent);
border-radius: 1px; flex-shrink: 0;
animation: fadeIn 0.1s ease both;
}
.right {
display: flex; align-items: center; gap: var(--sp-2);
margin-left: auto; flex-shrink: 0;
@@ -205,6 +288,12 @@
.search::placeholder { color: var(--text-faint); }
.search:focus { border-color: var(--border-strong); }
.refresh-label {
font-family: var(--font-ui); font-size: var(--text-2xs);
color: var(--text-faint); letter-spacing: var(--tracking-wide);
white-space: nowrap;
}
.icon-btn {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
@@ -216,10 +305,9 @@
.icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
.icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.icon-btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn.done { color: var(--color-success, #4caf50); border-color: color-mix(in srgb, var(--color-success, #4caf50) 40%, transparent); }
.icon-btn.spinning :global(svg) { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sort-wrap, .filter-wrap { position: relative; }
.panel {
@@ -249,8 +337,8 @@
cursor: pointer; text-align: left; gap: var(--sp-2);
transition: background var(--t-base), color var(--t-base);
}
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
.item-active:hover { background: var(--accent-dim); }
.dir-toggle {
justify-content: flex-start; color: var(--text-secondary);
@@ -259,5 +347,6 @@
margin-top: 2px; padding-top: 9px;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
</style>
src/lib/components/library/lib/librarySort.ts
+52
View File
@@ -0,0 +1,52 @@
import { createSorter } from '$lib/core/algorithms/sort'
import type { Manga } from '$lib/types'
import type { LibrarySortOption, LibrarySortDir } from '$lib/state/library.svelte'
export const librarySorter = createSorter<Manga>({
defaultField: 'alphabetical',
defaultDir: 'asc',
fields: [
{
key: 'alphabetical',
comparator: (a, b) => a.title.localeCompare(b.title, undefined, { sensitivity: 'base' }),
},
{
key: 'unread',
comparator: (a, b) => (a.unreadCount ?? 0) - (b.unreadCount ?? 0),
},
{
key: 'totalChapters',
comparator: (a, b) => (a.chapters?.totalCount ?? 0) - (b.chapters?.totalCount ?? 0),
},
{
key: 'dateAdded',
comparator: (a, b) => Number(a.inLibraryAt ?? 0) - Number(b.inLibraryAt ?? 0),
},
{
key: 'lastRead',
comparator: (a, b, ctx) => {
const map = ctx?.recentlyReadMap as Map<number, number> | undefined
return (map?.get(a.id) ?? 0) - (map?.get(b.id) ?? 0)
},
},
{
key: 'latestFetched',
comparator: (a, b) =>
Number(a.latestFetchedChapter?.uploadDate ?? 0) - Number(b.latestFetchedChapter?.uploadDate ?? 0),
},
{
key: 'latestUploaded',
comparator: (a, b) =>
Number(a.latestUploadedChapter?.uploadDate ?? 0) - Number(b.latestUploadedChapter?.uploadDate ?? 0),
},
],
})
export function sortLibrary(
items: Manga[],
mode: LibrarySortOption,
dir: LibrarySortDir,
recentlyReadMap?: Map<number, number>,
): Manga[] {
return librarySorter.sort(items, mode, dir, recentlyReadMap ? { recentlyReadMap } : undefined)
}
src/lib/components/library/lib/libraryUpdater.ts
+125
View File
@@ -0,0 +1,125 @@
import { getAdapter } from '$lib/request-manager'
const POLL_INTERVAL_MS = 2000
const POLL_INITIAL_MS = 500
export interface UpdateProgress {
finished: number
total: number
skippedManga: number
skippedCategories: number
}
export interface UpdateResult {
entries: UpdateEntry[]
totalUpdated: number
newChapters: number
}
export interface UpdateEntry {
mangaId: number
mangaTitle: string
thumbnailUrl: string
newChapters: number
checkedAt: number
}
export interface LibraryUpdaterCallbacks {
onProgress: (p: UpdateProgress) => void
onDone: (r: UpdateResult) => void
onError: (e?: unknown) => void
}
function buildEntries(
mangaUpdates: { status: string; manga: { id: number; title: string; thumbnailUrl: string; unreadCount: number } }[]
): UpdateEntry[] {
const byManga = new Map<number, UpdateEntry>()
for (const u of mangaUpdates) {
if (u.status !== 'UPDATED') continue
const existing = byManga.get(u.manga.id)
if (existing) {
existing.newChapters++
} else {
byManga.set(u.manga.id, {
mangaId: u.manga.id,
mangaTitle: u.manga.title,
thumbnailUrl: u.manga.thumbnailUrl,
newChapters: 1,
checkedAt: Date.now(),
})
}
}
return [...byManga.values()]
}
export function startLibraryUpdate(callbacks: LibraryUpdaterCallbacks): () => void {
let timer: ReturnType<typeof setTimeout> | null = null
let cancelled = false
function cancel() {
cancelled = true
if (timer) { clearTimeout(timer); timer = null }
}
async function run() {
let jobsStarted = false
try {
const status = await getAdapter().checkForUpdates()
if (cancelled) return
const { jobsInfo } = status
jobsStarted = jobsInfo.totalJobs > 0
callbacks.onProgress({
finished: jobsInfo.finishedJobs,
total: jobsInfo.totalJobs,
skippedManga: jobsInfo.skippedMangasCount,
skippedCategories: jobsInfo.skippedCategoriesCount,
})
if (!jobsStarted || !jobsInfo.isRunning) {
callbacks.onDone({ entries: [], totalUpdated: 0, newChapters: 0 })
return
}
} catch (e) {
console.error('[libraryUpdater] failed to start update', e)
if (!cancelled) callbacks.onError(e)
return
}
function poll() {
getAdapter().getLibraryUpdateStatus()
.then(d => {
if (cancelled) return
const { jobsInfo, mangaUpdates } = d
if (jobsInfo.totalJobs > 0) jobsStarted = true
callbacks.onProgress({
finished: jobsInfo.finishedJobs,
total: jobsInfo.totalJobs,
skippedManga: jobsInfo.skippedMangasCount,
skippedCategories: jobsInfo.skippedCategoriesCount,
})
if (!jobsInfo.isRunning && jobsStarted) {
const entries = buildEntries(mangaUpdates)
const newChapters = entries.reduce((s, e) => s + e.newChapters, 0)
callbacks.onDone({ entries, totalUpdated: entries.length, newChapters })
return
}
timer = setTimeout(poll, POLL_INTERVAL_MS)
})
.catch(e => {
console.error('[libraryUpdater] poll error', e)
if (!cancelled) callbacks.onError(e)
})
}
timer = setTimeout(poll, POLL_INITIAL_MS)
}
run()
return cancel
}
src/lib/components/series/ChapterList.svelte
+202
View File
@@ -0,0 +1,202 @@
<script lang="ts">
import { Download, CheckCircle, Circle, CircleNotch, Trash } from 'phosphor-svelte'
import ContextMenu from '$lib/components/shared/ui/ContextMenu.svelte'
import type { MenuEntry } from '$lib/components/shared/ui/ContextMenu.svelte'
import { longPress } from '$lib/core/ui/touchscreen'
import type { Chapter } from '$lib/types'
interface Props {
pageChapters: Chapter[]
sortedChapters: Chapter[]
viewMode: 'list' | 'grid'
loadingChapters: boolean
selectedIds: Set<number>
enqueueing: Set<number>
chapterPage: number
totalPages: number
scrollEl?: HTMLDivElement | null
onOpen: (ch: Chapter, inProgress: boolean) => void
onToggleSelect: (id: number, e: MouseEvent | KeyboardEvent) => void
onEnqueue: (ch: Chapter, e: MouseEvent) => void
onDeleteDownload:(id: number) => void
onPageChange: (page: number) => void
buildCtxItems: (ch: Chapter, idx: number) => MenuEntry[]
}
let {
pageChapters, sortedChapters, viewMode, loadingChapters,
selectedIds, enqueueing, chapterPage, totalPages,
scrollEl = $bindable(null),
onOpen, onToggleSelect, onEnqueue, onDeleteDownload,
onPageChange, buildCtxItems,
}: Props = $props()
let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = $state(null)
const hasSelection = $derived(selectedIds.size > 0)
function chapterLongPress(node: HTMLElement, param: [Chapter, number]) {
const [ch, idx] = param
return longPress(node, {
onLongPress(e) { ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx } },
})
}
function formatDate(ts: string | null | undefined): string {
if (!ts) return ''
const n = Number(ts)
const d = new Date(n > 1e10 ? n : n * 1000)
return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
}
</script>
<div class={viewMode === 'grid' ? 'ch-grid' : 'ch-list'} bind:this={scrollEl}>
{#if loadingChapters && sortedChapters.length === 0}
{#if viewMode === 'grid'}
{#each Array(24) as _}<div class="grid-cell-skeleton skeleton"></div>{/each}
{:else}
{#each Array(8) as _}
<div class="row-skeleton">
<div class="skeleton sk-line" style="width:55%;height:12px"></div>
<div class="skeleton sk-line" style="width:25%;height:11px"></div>
</div>
{/each}
{/if}
{:else if viewMode === 'grid'}
{#each sortedChapters as ch, i}
{@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
{@const isGridSelected = selectedIds.has(ch.id)}
<button
class="grid-cell"
class:read={ch.isRead}
class:in-progress={inProgress}
class:grid-selected={isGridSelected}
use:chapterLongPress={[ch, i]}
onclick={(e) => hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, inProgress)}
oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i } }}
title={ch.name}
>
{#if isGridSelected}<span class="grid-cell-check">✓</span>{/if}
<span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span>
{#if ch.isDownloaded}<span class="grid-cell-dl" title="Downloaded"></span>{/if}
{#if ch.isRead}<span class="grid-cell-dot"></span>{/if}
{#if enqueueing.has(ch.id)}<span class="grid-cell-spinner"><CircleNotch size={10} weight="light" class="anim-spin" /></span>{/if}
</button>
{/each}
{:else}
{#each pageChapters as ch}
{@const idxInSorted = sortedChapters.indexOf(ch)}
{@const isSelected = selectedIds.has(ch.id)}
{@const chInProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
<div
role="button"
tabindex="0"
class="ch-row"
class:read={ch.isRead}
class:ch-selected={isSelected}
use:chapterLongPress={[ch, idxInSorted]}
onclick={(e) => hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, chInProgress)}
onkeydown={(e) => e.key === 'Enter' && (hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, chInProgress))}
oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted } }}
>
<button class="ch-check" class:ch-check-visible={hasSelection} onclick={(e) => onToggleSelect(ch.id, e)} title="Select">
{#if isSelected}<CheckCircle size={15} weight="fill" />{:else}<Circle size={15} weight="light" />{/if}
</button>
<div class="ch-left">
<span class="ch-name">{ch.name}</span>
<div class="ch-meta">
{#if ch.scanlator}<span class="ch-meta-item">{ch.scanlator}</span>{/if}
{#if ch.uploadDate}<span class="ch-meta-item">{formatDate(ch.uploadDate)}</span>{/if}
{#if ch.lastPageRead && ch.lastPageRead > 0 && !ch.isRead}<span class="ch-meta-item">p.{ch.lastPageRead}</span>{/if}
</div>
</div>
<div class="ch-right">
{#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if}
{#if ch.isDownloaded}
<div class="ch-dl-wrap">
<Download size={13} weight="fill" class="ch-dl-icon" />
<button class="dl-btn dl-btn-delete" onclick={(e) => { e.stopPropagation(); onDeleteDownload(ch.id) }} title="Delete download">
<Trash size={13} weight="light" />
</button>
</div>
{:else if enqueueing.has(ch.id)}
<CircleNotch size={14} weight="light" class="anim-spin enqueue-icon" />
{:else}
<button class="dl-btn" onclick={(e) => { e.stopPropagation(); onEnqueue(ch, e) }} title="Download">
<Download size={13} weight="light" />
</button>
{/if}
</div>
</div>
{/each}
{/if}
</div>
{#if totalPages > 1}
<div class="pagination-bottom">
<button class="page-btn" onclick={() => onPageChange(Math.max(1, chapterPage - 1))} disabled={chapterPage === 1}>← Prev</button>
<span class="page-num">{chapterPage} / {totalPages}</span>
<button class="page-btn" onclick={() => onPageChange(Math.min(totalPages, chapterPage + 1))} disabled={chapterPage === totalPages}>Next →</button>
</div>
{/if}
{#if ctx}
<ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.chapter, ctx.idx)} onClose={() => ctx = null} />
{/if}
<style>
.ch-list { flex: 1; overflow-y: auto; }
.ch-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: var(--sp-3); align-content: start; }
.ch-row { display: flex; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background var(--t-fast); gap: var(--sp-3); }
.ch-row:hover { background: var(--bg-raised); }
.ch-row.read { opacity: 0.45; }
.ch-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ch-name { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ch-meta-item { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.ch-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
:global(.read-icon) { color: var(--text-faint); }
:global(.enqueue-icon) { color: var(--text-faint); }
.dl-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-faint); transition: color var(--t-base), background var(--t-base); opacity: 0; }
.ch-row:hover .dl-btn { opacity: 1; }
.dl-btn:hover { color: var(--text-muted); background: var(--bg-overlay); }
.dl-btn-delete { color: var(--color-error) !important; opacity: 0; }
.ch-row:hover .dl-btn-delete { opacity: 1; }
.dl-btn-delete:hover { background: var(--color-error-bg) !important; }
.ch-dl-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
:global(.ch-dl-icon) { color: var(--text-faint); transition: opacity var(--t-fast); }
.ch-row:hover .ch-dl-wrap :global(.ch-dl-icon) { opacity: 0; }
.ch-dl-wrap .dl-btn-delete { position: absolute; inset: 0; opacity: 0; }
.ch-row:hover .ch-dl-wrap .dl-btn-delete { opacity: 1; }
.ch-check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); padding: 0; }
.ch-row:hover .ch-check { opacity: 1; }
.ch-check-visible { opacity: 1 !important; }
.ch-selected { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; }
.ch-selected .ch-check { color: var(--accent-fg); opacity: 1; }
.row-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); padding: 12px var(--sp-4); border-bottom: 1px solid var(--border-dim); }
.grid-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid var(--border-dim); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; position: relative; transition: background var(--t-fast), border-color var(--t-fast); }
.grid-cell:hover { background: var(--bg-overlay); border-color: var(--border-strong); }
.grid-cell.read { background: var(--color-read); color: var(--text-faint); border-color: transparent; }
.grid-cell.in-progress { border-color: var(--accent-dim); color: var(--accent-fg); }
.grid-cell-num { font-size: 10px; }
.grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.grid-cell-dl { position: absolute; top: 3px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-fg); }
.grid-cell-spinner { position: absolute; top: 2px; right: 2px; }
.grid-cell-skeleton { aspect-ratio: 1; border-radius: var(--radius-sm); }
.grid-selected { background: var(--accent-muted) !important; border-color: var(--accent-dim) !important; }
.grid-cell-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--accent-fg); pointer-events: none; }
.pagination-bottom { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--border-dim); flex-shrink: 0; }
.page-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); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
.page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
.page-btn:disabled { opacity: 0.3; cursor: default; }
.page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
</style>
src/lib/components/series/SeriesActions.svelte
+658
View File
@@ -0,0 +1,658 @@
<script lang="ts">
import {
Download, CheckCircle, Circle, SortAscending, SortDescending,
CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus,
Trash, DownloadSimple, X, MagnifyingGlass, Funnel, Check,
} from 'phosphor-svelte'
import type { Chapter, Category } from '$lib/types'
import type { ChapterSortMode, ChapterSortDir } from './lib/chapterList'
import { updateSettings } from '$lib/state/settings.svelte'
interface ContinueChapter {
chapter: Chapter
type: 'start' | 'continue' | 'reread'
resumePage: number | null
}
interface Props {
chapters: Chapter[]
sortedChapters: Chapter[]
sortMode: ChapterSortMode
sortDir: ChapterSortDir
viewMode: 'list' | 'grid'
chapterPage: number
totalPages: number
downloadedCount: number
totalCount: number
deletingAll: boolean
hasSelection: boolean
selectedCount: number
continueChapter: ContinueChapter | null
availableScanlators: string[]
scanlatorFilter: string[]
scanlatorBlacklist: string[]
scanlatorForce: boolean
allCategories: Category[]
mangaCategories: Category[]
catsLoading: boolean
refreshing: boolean
onViewModeToggle: () => void
onPageChange: (page: number) => void
onDownloadSelected: () => void
onDeleteSelected: () => void
onMarkSelectedRead: (isRead: boolean) => void
onClearSelection: () => void
onEnqueueNext: (n: number) => void
onEnqueueMultiple: (ids: number[]) => void
onDeleteAll: () => void
onRefresh: () => void
onToggleCategory: (cat: Category) => void
onCreateCategory: (name: string) => void
onSetScanlatorFilter: (v: string[]) => void
onSetScanlatorBlacklist: (v: string[]) => void
onSetScanlatorForce: (v: boolean) => void
}
let {
chapters, sortedChapters, sortMode, sortDir, viewMode,
chapterPage, totalPages, downloadedCount, totalCount, deletingAll,
hasSelection, selectedCount, continueChapter,
availableScanlators, scanlatorFilter, scanlatorBlacklist, scanlatorForce,
allCategories, mangaCategories, catsLoading, refreshing,
onViewModeToggle, onPageChange, onDownloadSelected, onDeleteSelected,
onMarkSelectedRead, onClearSelection, onEnqueueNext, onEnqueueMultiple,
onDeleteAll, onRefresh, onToggleCategory, onCreateCategory,
onSetScanlatorFilter, onSetScanlatorBlacklist, onSetScanlatorForce,
}: Props = $props()
let sortMenuOpen: boolean = $state(false)
let jumpOpen: boolean = $state(false)
let jumpInput: string = $state('')
let scanFilterOpen: boolean = $state(false)
let scanTab: 'prefer' | 'block' = $state('prefer')
let dlOpen: boolean = $state(false)
let showRange: boolean = $state(false)
let rangeFrom: string = $state('')
let rangeTo: string = $state('')
let folderPickerOpen: boolean = $state(false)
let folderCreating: boolean = $state(false)
let folderNewName: string = $state('')
let dlDropRef: HTMLDivElement | undefined = $state()
let folderPickerRef: HTMLDivElement | undefined = $state()
const hasFolders = $derived(mangaCategories.filter(c => c.id !== 0).length > 0)
const jumpChapter = $derived.by(() => {
const q = jumpInput.trim().toLowerCase()
if (!q) return null
const num = parseFloat(q)
if (!isNaN(num)) return sortedChapters.find(c => c.chapterNumber === num) ?? null
return sortedChapters.find(c => c.name.toLowerCase().includes(q)) ?? null
})
function focusOnMount(node: HTMLElement) { node.focus() }
function doJump() {
if (!jumpChapter) return
const pageIdx = sortedChapters.indexOf(jumpChapter)
if (pageIdx >= 0) onPageChange(Math.floor(pageIdx / 25) + 1)
jumpOpen = false; jumpInput = ''
}
function enqueueRange() {
const from = parseFloat(rangeFrom), to = parseFloat(rangeTo)
if (isNaN(from) || isNaN(to)) return
const lo = Math.min(from, to), hi = Math.max(from, to)
onEnqueueMultiple(sortedChapters.filter(c => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map(c => c.id))
}
function submitNewFolder() {
const name = folderNewName.trim()
if (!name) return
onCreateCategory(name)
folderNewName = ''; folderCreating = false
}
$effect(() => {
if (dlOpen) { setTimeout(() => document.addEventListener('mousedown', handleDlOutside, true), 0) }
else document.removeEventListener('mousedown', handleDlOutside, true)
})
$effect(() => {
if (folderPickerOpen) { setTimeout(() => document.addEventListener('mousedown', handleFolderOutside, true), 0) }
else document.removeEventListener('mousedown', handleFolderOutside, true)
})
$effect(() => {
if (!scanFilterOpen) return
function onOutside(e: MouseEvent) {
if (!(e.target as HTMLElement).closest('.scan-filter-wrap')) scanFilterOpen = false
}
setTimeout(() => document.addEventListener('mousedown', onOutside, true), 0)
return () => document.removeEventListener('mousedown', onOutside, true)
})
function handleDlOutside(e: MouseEvent) {
if (dlDropRef && !dlDropRef.contains(e.target as Node)) dlOpen = false
}
function handleFolderOutside(e: MouseEvent) {
if (folderPickerRef && !folderPickerRef.contains(e.target as Node)) {
folderPickerOpen = false; folderCreating = false; folderNewName = ''
}
}
</script>
<div class="list-header">
<div class="list-header-left">
{#if hasSelection}
<span class="sel-count">{selectedCount} selected</span>
<button class="sel-action-btn" onclick={onDownloadSelected} title="Download selected"><Download size={13} weight="light" /></button>
<button class="sel-action-btn sel-action-danger" onclick={onDeleteSelected} title="Delete selected downloads"><Trash size={13} weight="light" /></button>
<button class="sel-action-btn" onclick={() => onMarkSelectedRead(true)} title="Mark selected as read"><CheckCircle size={13} weight="light" /></button>
<button class="sel-action-btn" onclick={() => onMarkSelectedRead(false)} title="Mark selected as unread"><Circle size={13} weight="light" /></button>
<button class="sel-action-btn" onclick={onClearSelection} title="Clear selection"><X size={13} weight="light" /></button>
{:else}
<div class="sort-wrap">
<button class="sort-btn" onclick={() => sortMenuOpen = !sortMenuOpen}>
{#if sortDir === 'desc'}<SortDescending size={14} weight="light" />{:else}<SortAscending size={14} weight="light" />{/if}
{{ source: 'Source order', chapterNumber: 'Ch. number', uploadDate: 'Upload date' }[sortMode]}
<CaretDown size={10} weight="light" />
</button>
{#if sortMenuOpen}
<div class="sort-menu" role="presentation" onmouseleave={() => sortMenuOpen = false}>
{#each [['source','Source order'],['chapterNumber','Chapter number'],['uploadDate','Upload date']] as [val, label]}
<button
class="sort-option"
class:active={sortMode === val}
onclick={() => { updateSettings({ chapterSortMode: val as ChapterSortMode }); onPageChange(1); sortMenuOpen = false }}
>{label}</button>
{/each}
<div class="sort-divider"></div>
<button class="sort-option" onclick={() => { updateSettings({ chapterSortDir: sortDir === 'desc' ? 'asc' : 'desc' }); onPageChange(1); sortMenuOpen = false }}>
{sortDir === 'desc' ? '↑ Ascending' : '↓ Descending'}
</button>
</div>
{/if}
</div>
<button class="icon-btn" class:active={viewMode === 'grid'} onclick={onViewModeToggle} title={viewMode === 'list' ? 'Grid view' : 'List view'}>
{#if viewMode === 'list'}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if}
</button>
{/if}
</div>
<div class="list-header-right">
<div class="jump-wrap">
<button class="icon-btn" class:active={jumpOpen} onclick={() => { jumpOpen = !jumpOpen; jumpInput = '' }} title="Jump to chapter">
<MagnifyingGlass size={14} weight="light" />
</button>
{#if jumpOpen}
<div class="jump-popover">
<input
class="jump-input"
placeholder="Chapter # or name…"
bind:value={jumpInput}
use:focusOnMount
onkeydown={(e) => { if (e.key === 'Enter') doJump(); if (e.key === 'Escape') { jumpOpen = false; jumpInput = '' } }}
/>
{#if jumpChapter}
<button class="jump-go" onclick={doJump}>Go · {jumpChapter.name}</button>
{:else if jumpInput.trim()}
<p class="jump-none">No match</p>
{/if}
</div>
{/if}
</div>
{#if availableScanlators.length > 1}
<div class="scan-filter-wrap">
<button
class="icon-btn"
class:active={scanlatorFilter.length > 0 || scanlatorBlacklist.length > 0}
onclick={() => scanFilterOpen = !scanFilterOpen}
title="Filter by scanlator"
>
<Funnel size={14} weight={scanlatorFilter.length > 0 || scanlatorBlacklist.length > 0 ? 'fill' : 'light'} />
</button>
{#if scanFilterOpen}
<div class="scan-filter-panel" role="menu">
<div class="scan-filter-header">
<div class="scan-filter-tabs">
<button class="scan-filter-tab" class:scan-filter-tab-active={scanTab === 'prefer'} onclick={() => scanTab = 'prefer'}>Prefer</button>
<button class="scan-filter-tab" class:scan-filter-tab-active={scanTab === 'block'} onclick={() => scanTab = 'block'}>Block</button>
</div>
{#if scanTab === 'prefer' && scanlatorFilter.length > 0}
<button class="scan-filter-clear" onclick={() => { onSetScanlatorFilter([]); onSetScanlatorForce(false); onPageChange(1) }}>Clear</button>
{:else if scanTab === 'block' && scanlatorBlacklist.length > 0}
<button class="scan-filter-clear" onclick={() => { onSetScanlatorBlacklist([]); onPageChange(1) }}>Clear</button>
{/if}
</div>
<div class="scan-filter-divider"></div>
{#if scanTab === 'prefer'}
<div class="scan-filter-force-row">
<span class="scan-filter-force-label" title="Hide chapters with no preferred group match, rather than falling back to any available group.">Enforce</span>
<button class="scan-force-toggle" class:scan-force-on={scanlatorForce} onclick={() => { onSetScanlatorForce(!scanlatorForce); onPageChange(1) }}>
{scanlatorForce ? 'On' : 'Off'}
</button>
</div>
<div class="scan-filter-divider"></div>
{#each availableScanlators as s}
<button
class="scan-filter-item"
class:scan-filter-item-active={scanlatorFilter.includes(s)}
role="menuitem"
onclick={() => { onSetScanlatorFilter(scanlatorFilter.includes(s) ? scanlatorFilter.filter(x => x !== s) : [...scanlatorFilter, s]); onPageChange(1) }}
>
<span class="scan-filter-check" class:scan-filter-check-on={scanlatorFilter.includes(s)}>
{#if scanlatorFilter.includes(s)}<Check size={9} weight="bold" />{/if}
</span>
{s}
</button>
{/each}
{:else}
{#each availableScanlators as s}
<button
class="scan-filter-item"
class:scan-filter-item-active={scanlatorBlacklist.includes(s)}
class:scan-filter-item-block={scanlatorBlacklist.includes(s)}
role="menuitem"
onclick={() => { onSetScanlatorBlacklist(scanlatorBlacklist.includes(s) ? scanlatorBlacklist.filter(x => x !== s) : [...scanlatorBlacklist, s]); onPageChange(1) }}
>
<span class="scan-filter-check" class:scan-filter-check-block={scanlatorBlacklist.includes(s)}>
{#if scanlatorBlacklist.includes(s)}<X size={9} weight="bold" />{/if}
</span>
{s}
</button>
{/each}
{/if}
</div>
{/if}
</div>
{/if}
<button class="icon-btn" onclick={onRefresh} disabled={refreshing}>
<ArrowsClockwise size={14} weight="light" class={refreshing ? 'anim-spin' : ''} />
</button>
<div class="fp-wrap" bind:this={folderPickerRef}>
<button class="icon-btn" class:active={hasFolders} onclick={() => folderPickerOpen = !folderPickerOpen}>
<FolderSimplePlus size={14} weight={hasFolders ? 'fill' : 'light'} />
</button>
{#if folderPickerOpen}
<div class="fp-menu">
{#if catsLoading}
<p class="fp-empty">Loading…</p>
{:else if allCategories.length === 0 && !folderCreating}
<p class="fp-empty">No folders yet</p>
{/if}
{#each allCategories as cat}
{@const isIn = mangaCategories.some(c => c.id === cat.id)}
<button class="fp-item" class:fp-item-active={isIn} onclick={() => onToggleCategory(cat)}>
<span class="fp-check">{isIn ? '✓' : ''}</span>{cat.name}
</button>
{/each}
<div class="fp-div"></div>
{#if folderCreating}
<div class="fp-create">
<input
class="fp-input"
placeholder="Folder name…"
bind:value={folderNewName}
use:focusOnMount
onkeydown={(e) => { if (e.key === 'Enter') submitNewFolder(); if (e.key === 'Escape') { folderCreating = false; folderNewName = '' } }}
/>
<button class="fp-confirm" onclick={submitNewFolder} disabled={!folderNewName.trim()}>Add</button>
<button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = '' }}><X size={12} weight="light" /></button>
</div>
{:else}
<button class="fp-new" onclick={() => folderCreating = true}>+ New folder</button>
{/if}
</div>
{/if}
</div>
{#if chapters.length > 0}
<div class="dl-wrap" bind:this={dlDropRef}>
<button class="icon-btn dl-unified-btn" class:active={dlOpen} class:dl-has-count={downloadedCount > 0} onclick={() => dlOpen = !dlOpen} title="Download options">
<Download size={13} weight={downloadedCount > 0 ? 'fill' : 'light'} />
{#if downloadedCount > 0}<span class="dl-unified-count">{downloadedCount}</span>{/if}
</button>
{#if dlOpen}
<div class="dl-dropdown">
{#if downloadedCount > 0}
<p class="dl-section-label">{downloadedCount} / {totalCount} downloaded</p>
<div class="dl-divider"></div>
{/if}
{#if continueChapter}
{@const contIdx = sortedChapters.indexOf(continueChapter.chapter)}
{#if contIdx >= 0}
<p class="dl-section-label">From Ch.{continueChapter.chapter.chapterNumber}</p>
<div class="dl-next-row">
{#each [5, 10, 25] as n}
{@const avail = sortedChapters.slice(contIdx, contIdx + n).filter(c => !c.isDownloaded).length}
<button class="dl-next-btn" disabled={avail === 0} onclick={() => { onEnqueueNext(n); dlOpen = false }}>
<span>Next {n}</span><span class="dl-next-sub">{avail} new</span>
</button>
{/each}
</div>
<div class="dl-divider"></div>
{/if}
{/if}
{#if !showRange}
<button class="dl-item" onclick={() => showRange = true}>
<span>Custom range…</span><span class="dl-item-sub">Enter chapter numbers</span>
</button>
{:else}
<div class="dl-range-row">
<button class="dl-range-back" onclick={() => showRange = false}>‹</button>
<input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === 'Enter' && enqueueRange()} use:focusOnMount />
<span class="dl-range-sep">–</span>
<input class="dl-range-input" placeholder="To" bind:value={rangeTo} onkeydown={(e) => e.key === 'Enter' && enqueueRange()} />
<button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} onclick={enqueueRange}>Go</button>
</div>
{/if}
<div class="dl-divider"></div>
<button class="dl-item" onclick={() => { onEnqueueMultiple(sortedChapters.filter(c => !c.isRead && !c.isDownloaded).map(c => c.id)); dlOpen = false }}>
<span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isRead && !c.isDownloaded).length} remaining</span>
</button>
<button class="dl-item" onclick={() => { onEnqueueMultiple(sortedChapters.filter(c => !c.isDownloaded).map(c => c.id)); dlOpen = false }}>
<span>Download all</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isDownloaded).length} not downloaded</span>
</button>
{#if downloadedCount > 0}
<div class="dl-divider"></div>
<button class="dl-item dl-item-danger" onclick={() => { onDeleteAll(); dlOpen = false }} disabled={deletingAll}>
<span>{deletingAll ? 'Deleting…' : 'Delete all downloads'}</span>
<span class="dl-item-sub">{downloadedCount} downloaded</span>
</button>
{/if}
</div>
{/if}
</div>
{/if}
{#if totalPages > 1}
<div class="pagination">
<button class="page-btn" onclick={() => onPageChange(Math.max(1, chapterPage - 1))} disabled={chapterPage === 1}>←</button>
<span class="page-num">{chapterPage} / {totalPages}</span>
<button class="page-btn" onclick={() => onPageChange(Math.min(totalPages, chapterPage + 1))} disabled={chapterPage === totalPages}>→</button>
</div>
{/if}
</div>
</div>
<style>
.list-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim);
flex-shrink: 0; gap: var(--sp-2); flex-wrap: wrap;
}
.list-header-left,
.list-header-right { display: flex; align-items: center; gap: var(--sp-1); }
.sort-btn {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
padding: 4px var(--sp-2); border-radius: var(--radius-sm);
color: var(--text-muted); transition: color var(--t-base), background var(--t-base);
}
.sort-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
.sort-wrap { position: relative; }
.sort-menu {
position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px;
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
animation: scaleIn 0.1s ease both; transform-origin: top left;
}
.sort-option {
display: block; width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm);
font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary);
background: none; border: none; cursor: pointer; text-align: left;
transition: background var(--t-fast), color var(--t-fast);
}
.sort-option:hover { background: var(--bg-overlay); color: var(--text-primary); }
.sort-option.active { color: var(--accent-fg); }
.sort-divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) 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.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.jump-wrap { position: relative; }
.jump-popover {
position: absolute; top: calc(100% + 4px); right: 0; width: 220px;
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-md); padding: var(--sp-2); z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
animation: scaleIn 0.1s ease both; transform-origin: top right;
display: flex; flex-direction: column; gap: var(--sp-1);
}
.jump-input {
width: 100%; background: var(--bg-overlay); border: 1px solid var(--border-strong);
border-radius: var(--radius-sm); padding: 5px 9px;
font-size: var(--text-xs); color: var(--text-secondary); outline: none;
transition: border-color var(--t-base);
}
.jump-input:focus { border-color: var(--border-focus); }
.jump-go {
width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-sm);
background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background var(--t-fast), border-color var(--t-fast);
}
.jump-go:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.jump-none { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); padding: 4px var(--sp-1); letter-spacing: var(--tracking-wide); }
.fp-wrap { position: relative; }
.fp-menu {
position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px;
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
animation: scaleIn 0.1s ease both; transform-origin: top right;
}
.fp-empty { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); color: var(--text-faint); }
.fp-item {
display: flex; align-items: center; gap: var(--sp-2); width: 100%;
padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-xs);
color: var(--text-secondary); background: none; border: none; cursor: pointer; text-align: left;
transition: background var(--t-fast), color var(--t-fast);
}
.fp-item:hover { background: var(--bg-overlay); }
.fp-item.fp-item-active { color: var(--accent-fg); }
.fp-check { width: 12px; font-size: var(--text-xs); color: var(--accent-fg); flex-shrink: 0; }
.fp-div { height: 1px; background: var(--border-dim); margin: var(--sp-1) var(--sp-2); }
.fp-create { display: flex; align-items: center; gap: var(--sp-1); padding: 4px var(--sp-2); }
.fp-input {
flex: 1; background: var(--bg-overlay); border: 1px solid var(--border-strong);
border-radius: var(--radius-sm); padding: 4px 8px;
font-size: var(--text-xs); color: var(--text-secondary); outline: none; min-width: 0;
}
.fp-input:focus { border-color: var(--border-focus); }
.fp-confirm {
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
padding: 4px 8px; border-radius: var(--radius-sm);
border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); cursor: pointer;
}
.fp-confirm:disabled { opacity: 0.4; cursor: default; }
.fp-cancel {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: var(--radius-sm);
border: 1px solid transparent; background: none; color: var(--text-faint); cursor: pointer;
transition: color var(--t-base), border-color var(--t-base);
}
.fp-cancel:hover { color: var(--text-muted); border-color: var(--border-dim); }
.fp-new {
width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm);
font-size: var(--text-xs); color: var(--text-faint); background: none; border: none;
cursor: pointer; text-align: left; transition: color var(--t-fast), background var(--t-fast);
}
.fp-new:hover { color: var(--text-secondary); background: var(--bg-overlay); }
.dl-wrap { position: relative; }
.dl-dropdown {
position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px;
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-lg); padding: var(--sp-1); z-index: 200;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
animation: scaleIn 0.1s ease both; transform-origin: top right;
}
.dl-section-label {
padding: 6px var(--sp-3) 4px; font-family: var(--font-ui); font-size: var(--text-2xs);
color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.dl-next-row { display: flex; gap: 4px; padding: 2px var(--sp-2) var(--sp-2); }
.dl-next-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
padding: 5px 6px; border-radius: var(--radius-md); border: 1px solid var(--border-dim);
background: var(--bg-overlay); color: var(--text-secondary);
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dl-next-btn:hover:not(:disabled) { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
.dl-next-btn:disabled { opacity: 0.3; cursor: default; }
.dl-next-sub { font-size: var(--text-2xs); color: var(--text-faint); }
.dl-divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) var(--sp-2); }
.dl-item {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
width: 100%; padding: 7px var(--sp-3); border-radius: var(--radius-md);
font-size: var(--text-sm); color: var(--text-secondary); background: none; border: none;
cursor: pointer; text-align: left; transition: background var(--t-fast), color var(--t-fast);
}
.dl-item:hover:not(:disabled) { background: var(--bg-overlay); color: var(--text-primary); }
.dl-item:disabled { opacity: 0.3; cursor: default; }
.dl-item.dl-item-danger { color: var(--color-error); }
.dl-item.dl-item-danger:hover:not(:disabled) { background: var(--color-error-bg); }
.dl-item-sub { font-size: var(--text-xs); color: var(--text-faint); }
.dl-range-row { display: flex; align-items: center; gap: 4px; padding: 7px var(--sp-2); }
.dl-range-back {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: var(--radius-sm);
border: 1px solid var(--border-dim); background: none; color: var(--text-faint); font-size: 14px; cursor: pointer;
}
.dl-range-back:hover { color: var(--text-muted); background: var(--bg-overlay); }
.dl-range-input {
flex: 1; min-width: 0; padding: 4px 8px; background: var(--bg-overlay);
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--text-xs);
outline: none; text-align: center;
}
.dl-range-input:focus { border-color: var(--border-focus); }
.dl-range-sep { color: var(--text-faint); font-size: var(--text-xs); }
.dl-range-go {
padding: 4px 10px; border-radius: var(--radius-sm);
border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg);
font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer;
}
.dl-range-go:disabled { opacity: 0.3; cursor: default; }
.dl-unified-btn { gap: 5px; padding: 0 8px; width: auto; min-width: 28px; }
.dl-unified-count {
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
color: var(--text-faint); transition: color var(--t-base);
}
.dl-unified-btn:hover .dl-unified-count,
.dl-unified-btn.active .dl-unified-count { color: var(--text-secondary); }
.dl-unified-btn.dl-has-count { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.dl-unified-btn.dl-has-count .dl-unified-count { color: var(--accent-fg); opacity: 0.8; }
.dl-unified-btn.dl-has-count:hover { background: var(--accent-muted); border-color: var(--accent); opacity: 0.9; }
.dl-unified-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.pagination { display: flex; align-items: center; gap: var(--sp-2); }
.page-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);
color: var(--text-faint); background: none; cursor: pointer;
transition: color var(--t-base), border-color var(--t-base);
}
.page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
.page-btn:disabled { opacity: 0.3; cursor: default; }
.page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.sel-count {
font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
letter-spacing: var(--tracking-wide); padding: 0 var(--sp-1);
}
.sel-action-btn {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: var(--radius-sm);
border: 1px solid var(--border-dim); background: none; color: var(--text-muted); cursor: pointer;
transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.sel-action-btn:hover { color: var(--text-primary); background: var(--bg-raised); border-color: var(--border-strong); }
.sel-action-danger { color: var(--color-error) !important; }
.sel-action-danger:hover { background: var(--color-error-bg) !important; border-color: var(--color-error) !important; }
.scan-filter-wrap { position: relative; }
.scan-filter-panel {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 200px;
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-lg); padding: var(--sp-1);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
animation: scaleIn 0.1s ease both; transform-origin: top right;
}
.scan-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
.scan-filter-clear {
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0;
transition: color var(--t-base);
}
.scan-filter-clear:hover { color: var(--color-error); }
.scan-filter-divider { height: 1px; background: var(--border-dim); margin: 0 2px 4px; }
.scan-filter-item {
display: flex; align-items: center; gap: var(--sp-2); width: 100%;
padding: 7px 10px; border-radius: var(--radius-sm); border: none; background: transparent;
color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs);
cursor: pointer; text-align: left;
transition: background var(--t-base), color var(--t-base);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scan-filter-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
.scan-filter-item-active { color: var(--accent-fg); background: var(--accent-muted); }
.scan-filter-item-active:hover { background: var(--accent-dim); }
.scan-filter-tabs {
display: flex; gap: 2px; background: var(--bg-overlay);
border: 1px solid var(--border-base); border-radius: var(--radius-sm); padding: 2px;
}
.scan-filter-tab {
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
padding: 2px 8px; border-radius: 2px; border: none; background: none;
color: var(--text-faint); cursor: pointer; transition: color var(--t-fast), background var(--t-fast);
}
.scan-filter-tab:hover { color: var(--text-muted); }
.scan-filter-tab.scan-filter-tab-active { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.scan-filter-force-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; }
.scan-filter-force-label {
font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
letter-spacing: var(--tracking-wide); cursor: default;
text-decoration: underline; text-decoration-style: dotted;
text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.scan-force-toggle {
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
padding: 2px 8px; 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), background var(--t-base);
}
.scan-force-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
.scan-force-toggle.scan-force-on { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.scan-filter-check {
width: 13px; height: 13px; border-radius: 2px; border: 1px solid var(--border-strong);
background: transparent; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; color: var(--bg-base);
transition: background var(--t-base), border-color var(--t-base);
}
.scan-filter-check-on { background: var(--accent); border-color: var(--accent); }
.scan-filter-check-block { background: var(--color-error); border-color: var(--color-error); }
.scan-filter-item-block { color: var(--color-error) !important; background: color-mix(in srgb, var(--color-error) 8%, transparent) !important; }
.scan-filter-item-block:hover { background: color-mix(in srgb, var(--color-error) 14%, transparent) !important; }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
</style>
src/lib/components/series/SeriesDetail.svelte
+747
View File
@@ -0,0 +1,747 @@
<script lang="ts">
import { untrack } from 'svelte'
import SeriesHeader from '$lib/components/series/SeriesHeader.svelte'
import SeriesActions from '$lib/components/series/SeriesActions.svelte'
import ChapterList from '$lib/components/series/ChapterList.svelte'
import {
CheckCircle, Circle, ArrowFatLinesUp, ArrowFatLinesDown,
ArrowFatLineUp, ArrowFatLineDown, Download, Trash, DownloadSimple, CheckSquare,
} from 'phosphor-svelte'
import type { MenuEntry } from '$lib/components/shared/ui/ContextMenu.svelte'
import { getManga, getMangaList } from '$lib/request-manager/manga'
import { getChapters, fetchChapters, markChapterRead, markChaptersRead, deleteDownloadedChapters } from '$lib/request-manager/chapters'
import { enqueueDownload } from '$lib/request-manager/downloads'
import { getCategories, updateMangaCategories, createCategory as createCategoryReq, updateManga } from '$lib/request-manager/manga'
import { saveScroll, getScroll } from '$lib/state/app.svelte'
import { seriesState, openReader, setActiveManga, addBookmark,
acknowledgeUpdate, clearMarkersForManga,
DEFAULT_MANGA_PREFS } from '$lib/state/series.svelte'
import type { MangaPrefs } from '$lib/state/series.svelte'
import { addToast } from '$lib/state/notifications.svelte'
import { trackingState } from '$lib/state/tracking.svelte'
import { autoLinkLibrary } from '$lib/core/cover/autoLink'
import { buildChapterList } from '$lib/components/series/lib/chapterList'
import { getPref, setPref } from '$lib/components/series/lib/mangaPrefs'
import type { Manga, Chapter, Category } from '$lib/types'
import AutomationPanel from '$lib/components/series/panels/AutomationPanel.svelte'
import CoverPickerPanel from '$lib/components/series/panels/CoverPickerPanel.svelte'
import MarkersPanel from '$lib/components/series/panels/MarkersPanel.svelte'
import MigrateModal from '$lib/components/shared/manga/MigrateModal.svelte'
import SeriesLinkPanel from '$lib/components/shared/manga/SeriesLinkPanel.svelte'
import TrackingPanel from '$lib/components/tracking/TrackingPanel.svelte'
const CHAPTERS_PER_PAGE = 25
const MANGA_TTL_MS = 5 * 60 * 1000
const CHAPTER_TTL_MS = 2 * 60 * 1000
const mangaCache: Map<number, { data: Manga; fetchedAt: number }> = new Map()
const chapterCache: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map()
let manga: Manga | null = $state(null)
let chapters: Chapter[] = $state([])
let loadingManga: boolean = $state(false)
let loadingChapters: boolean = $state(true)
let enqueueing: Set<number> = $state(new Set())
let togglingLibrary: boolean = $state(false)
let chapterPage: number = $state(1)
let viewMode: 'list' | 'grid' = $state('list')
let deletingAll: boolean = $state(false)
let refreshing: boolean = $state(false)
let selectedIds: Set<number> = $state(new Set())
let migrateOpen: boolean = $state(false)
let autoOpen: boolean = $state(false)
let trackingOpen: boolean = $state(false)
let markersOpen: boolean = $state(false)
let linkPickerOpen: boolean = $state(false)
let coverPickerOpen: boolean = $state(false)
let allMangaForLink: Manga[] = $state([])
let loadingLinkList: boolean = $state(false)
let mangaCategories: Category[] = $state([])
let allCategories: Category[] = $state([])
let catsLoading: boolean = $state(false)
let chapterListEl: HTMLDivElement | null = $state(null)
let mangaAbort: AbortController | null = null
let chapterAbort: AbortController | null = null
let loadingFor: number | null = null
let prevChapterIds = new Set<number>()
let prevMangaId: number | null = null
const get = <K extends keyof MangaPrefs>(key: K) =>
seriesState.activeManga ? getPref(seriesState.activeManga.id, key) : DEFAULT_MANGA_PREFS[key]
const set = <K extends keyof MangaPrefs>(key: K, value: MangaPrefs[K]) => {
if (seriesState.activeManga) setPref(seriesState.activeManga.id, key, value)
}
const hasSelection = $derived(selectedIds.size > 0)
const sortDir = $derived(seriesState.settings.chapterSortDir)
const sortMode = $derived(seriesState.settings.chapterSortMode ?? 'source')
const scanlatorFilter = $derived((get('scanlatorFilter') ?? []) as string[])
const scanlatorBlacklist = $derived((get('scanlatorBlacklist') ?? []) as string[])
const scanlatorForce = $derived((get('scanlatorForce') ?? false) as boolean)
const currentPrefs = $derived({
sortMode,
sortDir,
preferredScanlator: get('preferredScanlator') as string,
scanlatorFilter: scanlatorFilter as string[],
scanlatorBlacklist: scanlatorBlacklist as string[],
scanlatorForce: scanlatorForce as boolean,
})
const availableScanlators = $derived(
[...new Set(chapters.map(c => c.scanlator).filter((s): s is string => !!s?.trim()))]
.sort((a, b) => a.localeCompare(b))
)
const sortedChapters = $derived(buildChapterList(chapters, currentPrefs))
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(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)
const continueChapter = $derived((() => {
if (!sortedChapters.length) return null
const asc = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
const anyRead = asc.some(c => c.isRead)
const bookmark = seriesState.activeManga
? seriesState.bookmarks.find(b => b.mangaId === seriesState.activeManga!.id)
: null
const bookmarkedCh = bookmark ? asc.find(c => c.id === bookmark.chapterId) : null
if (bookmarkedCh && !bookmarkedCh.isRead) {
return { chapter: bookmarkedCh, type: (anyRead ? 'continue' : 'start') as const, resumePage: bookmark!.pageNumber }
}
const inProgress = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0)
const firstUnread = asc.find(c => !c.isRead)
const target = inProgress ?? firstUnread
if (target) return { chapter: target, type: (anyRead ? 'continue' : 'start') as const, resumePage: null }
return { chapter: asc[0], type: 'reread' as const, resumePage: null }
})())
const hasAnyAutomation = $derived(
get('autoDownload') ||
(get('downloadAhead') as number) > 0 ||
(get('maxKeepChapters') as number) > 0 ||
get('deleteOnRead') ||
get('pauseUpdates') ||
get('refreshInterval') !== 'global' ||
!!(get('preferredScanlator') as string)
)
const linkedIds = $derived(
seriesState.activeManga ? (seriesState.settings.mangaLinks?.[seriesState.activeManga.id] ?? []) : []
)
function clearSelection() { selectedIds = new Set() }
function toggleSelect(id: number, e: MouseEvent | KeyboardEvent) {
e.stopPropagation()
const next = new Set(selectedIds)
if (next.has(id)) next.delete(id); else next.add(id)
selectedIds = next
}
function applyChapters(nodes: Chapter[]) {
if (get('autoDownload') && prevChapterIds.size > 0) {
const filtered = buildChapterList(nodes, currentPrefs)
const newChapters = filtered.filter(c => !prevChapterIds.has(c.id) && !c.isDownloaded)
if (newChapters.length) enqueueMultiple(newChapters.map(c => c.id))
}
prevChapterIds = new Set(nodes.map(c => c.id))
chapters = nodes
if (seriesState.activeManga && nodes.length > 0) checkAndMarkCompleted(seriesState.activeManga.id, nodes)
}
function loadCategories(mangaId: number) {
catsLoading = true
getCategories()
.then(d => {
allCategories = d.filter(c => c.id !== 0)
mangaCategories = allCategories.filter(c => c.mangas?.nodes.some((m: Manga) => m.id === mangaId))
})
.catch(console.error)
.finally(() => { catsLoading = false })
}
async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
if (chaps.length && manga?.status !== 'ONGOING') {
const allRead = chaps.every(c => c.isRead)
const completed = allCategories.find(c => c.name === 'Completed')
if (completed) {
const inCompleted = mangaCategories.some(c => c.id === completed.id)
if (allRead && !inCompleted) mangaCategories = [...mangaCategories, completed]
else if (!allRead && inCompleted) mangaCategories = mangaCategories.filter(c => c.id !== completed.id)
}
}
}
function loadMangaData(id: number) {
mangaAbort?.abort()
const ctrl = new AbortController()
mangaAbort = ctrl; loadingFor = id
const cached = mangaCache.get(id)
if (cached) {
manga = cached.data; loadingManga = false
if (Date.now() - cached.fetchedAt < MANGA_TTL_MS) return
getManga(id, ctrl.signal).then(m => {
if (ctrl.signal.aborted || loadingFor !== id) return
mangaCache.set(id, { data: m, fetchedAt: Date.now() })
manga = m
}).catch(() => {})
return
}
loadingManga = true
getManga(id, ctrl.signal).then(m => {
if (ctrl.signal.aborted || loadingFor !== id) return
mangaCache.set(id, { data: m, fetchedAt: Date.now() })
manga = m
}).catch(() => {}).finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false })
}
function loadChaptersData(id: number) {
chapterAbort?.abort()
const ctrl = new AbortController()
chapterAbort = ctrl
const cached = chapterCache.get(id)
if (cached) {
applyChapters(cached.data); loadingChapters = false
if (Date.now() - cached.fetchedAt < CHAPTER_TTL_MS) return
fetchChapters(id, ctrl.signal)
.then(() => getChapters(id, ctrl.signal))
.then(nodes => {
if (ctrl.signal.aborted || loadingFor !== id) return
chapterCache.set(id, { data: nodes, fetchedAt: Date.now() })
applyChapters(nodes)
}).catch(() => {})
return
}
chapters = []; loadingChapters = true
getChapters(id, ctrl.signal).then(nodes => {
if (ctrl.signal.aborted || loadingFor !== id) return
applyChapters(nodes); loadingChapters = false
return fetchChapters(id, ctrl.signal)
.then(() => getChapters(id, ctrl.signal))
.then(fresh => {
if (ctrl.signal.aborted || loadingFor !== id) return
chapterCache.set(id, { data: fresh, fetchedAt: Date.now() })
applyChapters(fresh)
})
}).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false })
}
async function syncTrackersIntoChapters(mangaId: number, chaps: Chapter[]) {
if (!seriesState.settings.trackerSyncBack) return
const records = trackingState.recordsFor(mangaId)
if (!records.length) return
for (const record of records) {
try {
const { markedIds } = await trackingState.syncFromRemote(mangaId, record, chaps, currentPrefs)
if (markedIds.length > 0) {
const idSet = new Set(markedIds)
chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead: true } : c)
if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
}
} catch {}
}
}
$effect(() => {
const id = seriesState.activeMangaId
const m = seriesState.activeManga
const shouldAutoLink = seriesState.settings.autoLinkOnOpen
if (id) untrack(() => {
if (m) acknowledgeUpdate(m.id)
loadMangaData(id)
loadChaptersData(id)
loadCategories(id)
trackingState.loadForManga(id).then(() => syncTrackersIntoChapters(id, chapters))
if (shouldAutoLink) {
if (allMangaForLink.length) {
autoLinkLibrary(m, allMangaForLink)
.then(n => { if (n > 0) addToast({ kind: 'success', title: 'Series linked', body: `${n} new link${n === 1 ? '' : 's'} found` }) })
} else {
loadingLinkList = true
getMangaList()
.then(list => {
allMangaForLink = list
return autoLinkLibrary(m, list)
})
.then(n => { if (n > 0) addToast({ kind: 'success', title: 'Series linked', body: `${n} new link${n === 1 ? '' : 's'} found` }) })
.catch(console.error)
.finally(() => { loadingLinkList = false })
}
}
})
})
let prevChapterId: number | null = null
$effect(() => {
const wasOpen = prevChapterId !== null
prevChapterId = seriesState.activeChapter?.id ?? null
if (wasOpen && !seriesState.activeChapter && seriesState.activeManga) {
const id = seriesState.activeManga.id
untrack(() => { reloadChapters(id) })
}
})
$effect(() => {
const mangaId = seriesState.activeManga?.id ?? null
if (mangaId === prevMangaId) return
if (chapterListEl && prevMangaId !== null) saveScroll(`series:${prevMangaId}`, chapterListEl.scrollTop)
prevMangaId = mangaId
if (chapterListEl && mangaId !== null) {
chapterListEl.scrollTo({ top: getScroll(`series:${mangaId}`) })
}
})
$effect(() => () => { mangaAbort?.abort(); chapterAbort?.abort() })
async function toggleLibrary() {
if (!manga) return
togglingLibrary = true
const next = !manga.inLibrary
await updateManga(manga.id, { inLibrary: next }).catch(console.error)
manga = { ...manga, inLibrary: next }
if (mangaCache.has(manga.id)) { const e = mangaCache.get(manga.id)!; mangaCache.set(manga.id, { ...e, data: manga }) }
togglingLibrary = false
}
async function reloadChapters(id: number) {
const nodes = await getChapters(id)
chapterCache.set(id, { data: nodes, fetchedAt: Date.now() })
applyChapters(nodes)
}
async function enqueue(ch: Chapter, e: MouseEvent) {
e.stopPropagation()
enqueueing = new Set(enqueueing).add(ch.id)
await enqueueDownload(ch.id)
addToast({ kind: 'download', title: 'Download queued', body: ch.name })
enqueueing.delete(ch.id); enqueueing = new Set(enqueueing)
if (seriesState.activeManga) reloadChapters(seriesState.activeManga.id)
}
async function enqueueMultiple(chapterIds: number[]) {
if (!chapterIds.length) return
for (const id of chapterIds) {
const allowed = await enqueueDownload(id)
if (!allowed) return
}
addToast({ kind: 'download', title: 'Download queued', body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? 's' : ''} added` })
if (seriesState.activeManga) reloadChapters(seriesState.activeManga.id)
}
async function markRead(chapterId: number, isRead: boolean) {
const mangaId = seriesState.activeManga?.id
await markChapterRead(chapterId, isRead).catch(console.error)
chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c)
if (mangaId) {
chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
checkAndMarkCompleted(mangaId, chapters)
const ch = chapters.find(c => c.id === chapterId)
if (ch) {
if (isRead) await trackingState.updateFromRead(mangaId, ch, chapters, currentPrefs)
else await trackingState.updateFromUnread(mangaId, chapters, currentPrefs)
}
}
if (isRead) {
if (get('deleteOnRead')) {
const ch = chapters.find(c => c.id === chapterId)
if (ch?.isDownloaded) {
const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
if (delayMs === 0) deleteDownloaded(chapterId)
else setTimeout(() => deleteDownloaded(chapterId), delayMs)
}
}
const ahead = get('downloadAhead') as number
if (ahead > 0) {
const idx = sortedChapters.findIndex(c => c.id === chapterId)
if (idx >= 0) {
const toQueue = sortedChapters.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
if (toQueue.length) enqueueMultiple(toQueue)
}
}
}
}
async function markBulk(ids: number[], isRead: boolean) {
if (!ids.length) return
const mangaId = seriesState.activeManga?.id
await markChaptersRead(ids, isRead).catch(console.error)
const idSet = new Set(ids)
chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead } : c)
if (mangaId) {
chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
checkAndMarkCompleted(mangaId, chapters)
if (isRead) {
const ascending = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
const lastInBatch = ascending.filter(c => idSet.has(c.id)).at(-1)
if (lastInBatch) await trackingState.updateFromRead(mangaId, lastInBatch, chapters, currentPrefs)
} else {
await trackingState.updateFromUnread(mangaId, chapters, currentPrefs)
}
}
if (isRead && get('deleteOnRead')) {
const toDelete = ids.filter(id => chapters.find(c => c.id === id)?.isDownloaded)
if (toDelete.length) {
const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
const doDelete = async () => {
await deleteDownloadedChapters(toDelete).catch(console.error)
chapters = chapters.map(c => toDelete.includes(c.id) ? { ...c, isDownloaded: false } : c)
if (mangaId) chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
}
if (delayMs === 0) doDelete(); else setTimeout(doDelete, delayMs)
}
}
}
async function deleteSelected() {
const ids = [...selectedIds].filter(id => chapters.find(c => c.id === id)?.isDownloaded)
if (ids.length) {
await deleteDownloadedChapters(ids).catch(console.error)
chapters = chapters.map(c => ids.includes(c.id) ? { ...c, isDownloaded: false } : c)
if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
}
clearSelection()
}
async function downloadSelected() {
await enqueueMultiple([...selectedIds].filter(id => !chapters.find(c => c.id === id)?.isDownloaded))
clearSelection()
}
async function markSelectedRead(isRead: boolean) {
await markBulk([...selectedIds], isRead)
clearSelection()
}
const markAboveRead = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => !c.isRead).map(c => c.id), true)
const markBelowRead = (i: number) => markBulk(sortedChapters.slice(i).filter(c => !c.isRead).map(c => c.id), true)
const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => c.isRead).map(c => c.id), false)
const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter(c => c.isRead).map(c => c.id), false)
async function deleteDownloaded(chapterId: number) {
await deleteDownloadedChapters([chapterId]).catch(console.error)
chapters = chapters.map(c => c.id === chapterId ? { ...c, isDownloaded: false } : c)
if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
}
async function deleteAllDownloads() {
const ids = chapters.filter(c => c.isDownloaded).map(c => c.id)
if (!ids.length) return
deletingAll = true
await deleteDownloadedChapters(ids).catch(console.error)
chapters = chapters.map(c => ({ ...c, isDownloaded: false }))
if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
deletingAll = false
}
async function refreshChapters() {
if (!seriesState.activeManga || refreshing) return
refreshing = true
chapterCache.delete(seriesState.activeManga.id)
fetchChapters(seriesState.activeManga.id)
.then(() => reloadChapters(seriesState.activeManga!.id))
.then(() => addToast({ kind: 'success', title: 'Chapters refreshed', body: `${chapters.length} chapter${chapters.length !== 1 ? 's' : ''} available` }))
.catch(e => addToast({ kind: 'error', title: 'Refresh failed', body: e?.message }))
.finally(() => refreshing = false)
}
function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] {
const above = sortedChapters.slice(0, idx + 1)
const below = sortedChapters.slice(idx)
const last = sortedChapters.length - 1
return [
{ label: ch.isRead ? 'Mark as unread' : 'Mark as read', icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
{ label: 'Select', icon: CheckSquare, onClick: () => { const next = new Set(selectedIds); next.add(ch.id); selectedIds = next } },
{ separator: true },
{ label: 'Mark above as read', icon: ArrowFatLinesUp, onClick: () => markAboveRead(idx), disabled: above.filter(c => !c.isRead).length === 0 },
{ label: 'Mark above as unread', icon: ArrowFatLineUp, onClick: () => markAboveUnread(idx), disabled: above.filter(c => c.isRead).length === 0 },
{ separator: true },
{ label: 'Mark below as read', icon: ArrowFatLinesDown, onClick: () => markBelowRead(idx), disabled: idx === last || below.filter(c => !c.isRead).length === 0 },
{ label: 'Mark below as unread', icon: ArrowFatLineDown, onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.isRead).length === 0 },
{ separator: true },
{ label: ch.isDownloaded ? 'Delete download' : 'Download', icon: ch.isDownloaded ? Trash : Download, danger: ch.isDownloaded, onClick: () => ch.isDownloaded ? deleteDownloaded(ch.id) : enqueueDownload(ch.id) },
{ separator: true },
{ label: 'Download next 5 from here', icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter(c => !c.isDownloaded).map(c => c.id)) },
{ label: 'Download all from here', icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter(c => !c.isDownloaded).map(c => c.id)) },
]
}
function enqueueNext(n: number) {
if (!continueChapter) return
const idx = sortedChapters.indexOf(continueChapter.chapter)
if (idx < 0) return
enqueueMultiple(sortedChapters.slice(idx, idx + n).filter(c => !c.isDownloaded).map(c => c.id))
}
function openReaderWithAhead(ch: Chapter, inProgress: boolean) {
const ascList = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
const resumePage = inProgress ? ch.lastPageRead ?? null : null
const ahead = get('downloadAhead') as number
if (ahead > 0) {
const idx = ascList.indexOf(ch)
if (idx >= 0) {
const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
if (toQueue.length) enqueueMultiple(toQueue)
}
}
if (inProgress && resumePage && resumePage > 1) {
const existing = seriesState.bookmarks.find(b => b.chapterId === ch.id)
if (!existing || existing.pageNumber < resumePage) {
addBookmark({
mangaId: seriesState.activeManga!.id,
mangaTitle: seriesState.activeManga!.title,
thumbnailUrl: seriesState.activeManga!.thumbnailUrl,
chapterId: ch.id,
chapterName: ch.name,
pageNumber: resumePage,
})
}
}
openReader(ch, ascList)
}
function handleContinue(cc: typeof continueChapter) {
if (!cc) return
const ascList = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
const ahead = get('downloadAhead') as number
if (ahead > 0) {
const idx = ascList.indexOf(cc.chapter)
if (idx >= 0) {
const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
if (toQueue.length) enqueueMultiple(toQueue)
}
}
if (cc.type === 'continue' && cc.resumePage && cc.resumePage > 1) {
const existing = seriesState.bookmarks.find(b => b.chapterId === cc.chapter.id)
if (!existing || existing.pageNumber < cc.resumePage) {
addBookmark({
mangaId: seriesState.activeManga!.id,
mangaTitle: seriesState.activeManga!.title,
thumbnailUrl: seriesState.activeManga!.thumbnailUrl,
chapterId: cc.chapter.id,
chapterName: cc.chapter.name,
pageNumber: cc.resumePage,
})
}
}
openReader(cc.chapter, ascList)
}
async function openLinkPicker() {
linkPickerOpen = true
if (allMangaForLink.length) return
loadingLinkList = true
getMangaList()
.then(list => { allMangaForLink = list })
.catch(console.error)
.finally(() => { loadingLinkList = false })
}
async function openCoverPicker() {
coverPickerOpen = true
if (allMangaForLink.length) return
loadingLinkList = true
getMangaList()
.then(list => { allMangaForLink = list })
.catch(console.error)
.finally(() => { loadingLinkList = false })
}
async function toggleCategory(cat: Category) {
if (!seriesState.activeManga) return
const inCat = mangaCategories.some(c => c.id === cat.id)
try {
await updateMangaCategories(seriesState.activeManga.id, inCat ? [] : [cat.id], inCat ? [cat.id] : [])
if (!inCat && !manga?.inLibrary) {
await updateManga(seriesState.activeManga.id, { inLibrary: true }).catch(console.error)
if (manga) manga = { ...manga, inLibrary: true }
}
mangaCategories = inCat ? mangaCategories.filter(c => c.id !== cat.id) : [...mangaCategories, cat]
} catch (e) { console.error(e) }
}
async function createNewCategory(name: string) {
if (!name || !seriesState.activeManga) return
try {
const cat = await createCategoryReq(name)
await updateMangaCategories(seriesState.activeManga.id, [cat.id], [])
if (!manga?.inLibrary) {
await updateManga(seriesState.activeManga.id, { inLibrary: true }).catch(console.error)
if (manga) manga = { ...manga, inLibrary: true }
}
allCategories = [...allCategories, cat]
mangaCategories = [...mangaCategories, cat]
} catch (e) { console.error(e) }
}
</script>
{#if seriesState.activeMangaId}
<div class="root" role="presentation" oncontextmenu={(e) => e.preventDefault()}>
<SeriesHeader
{manga}
{loadingManga}
{totalCount}
{readCount}
{progressPct}
{downloadedCount}
{deletingAll}
{continueChapter}
{hasAnyAutomation}
{markersOpen}
{linkedIds}
{allMangaForLink}
{loadingLinkList}
{mangaCategories}
{togglingLibrary}
onRead={handleContinue}
onToggleLibrary={toggleLibrary}
onDeleteAll={deleteAllDownloads}
onMigrateOpen={() => migrateOpen = true}
onTrackingOpen={() => trackingOpen = true}
onAutoOpen={() => autoOpen = true}
onMarkersToggle={() => markersOpen = !markersOpen}
onLinkPickerOpen={openLinkPicker}
onCoverPickerOpen={openCoverPicker}
/>
<div class="list-wrap">
<SeriesActions
{chapters}
{sortedChapters}
{sortMode}
{sortDir}
{viewMode}
{chapterPage}
{totalPages}
{downloadedCount}
{totalCount}
{deletingAll}
{hasSelection}
selectedCount={selectedIds.size}
{continueChapter}
{availableScanlators}
{scanlatorFilter}
{scanlatorBlacklist}
{scanlatorForce}
{allCategories}
{mangaCategories}
{catsLoading}
{refreshing}
onViewModeToggle={() => viewMode = viewMode === 'list' ? 'grid' : 'list'}
onPageChange={(p) => chapterPage = p}
onDownloadSelected={downloadSelected}
onDeleteSelected={deleteSelected}
onMarkSelectedRead={markSelectedRead}
onClearSelection={clearSelection}
onEnqueueNext={enqueueNext}
onEnqueueMultiple={enqueueMultiple}
onDeleteAll={deleteAllDownloads}
onRefresh={refreshChapters}
onToggleCategory={toggleCategory}
onCreateCategory={createNewCategory}
onSetScanlatorFilter={(v) => set('scanlatorFilter', v)}
onSetScanlatorBlacklist={(v) => set('scanlatorBlacklist', v)}
onSetScanlatorForce={(v) => set('scanlatorForce', v)}
/>
<ChapterList
{pageChapters}
{sortedChapters}
{viewMode}
{loadingChapters}
{selectedIds}
{enqueueing}
{chapterPage}
{totalPages}
bind:scrollEl={chapterListEl}
onOpen={openReaderWithAhead}
onToggleSelect={toggleSelect}
onEnqueue={enqueue}
onDeleteDownload={deleteDownloaded}
onPageChange={(p) => chapterPage = p}
{buildCtxItems}
/>
</div>
</div>
{#if markersOpen && manga}
<div class="panel-overlay" role="presentation" onclick={() => markersOpen = false}>
<div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
<MarkersPanel mangaId={manga.id} {chapters} onClose={() => markersOpen = false} />
</div>
</div>
{/if}
{#if autoOpen && manga}
<div class="panel-overlay" role="presentation" onclick={() => autoOpen = false}>
<div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
<AutomationPanel mangaId={manga.id} {manga} onClose={() => autoOpen = false} />
</div>
</div>
{/if}
{#if trackingOpen && manga}
<div class="panel-overlay" role="presentation" onclick={() => trackingOpen = false}>
<div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
<TrackingPanel mangaId={manga.id} mangaTitle={manga.title} onClose={() => trackingOpen = false} />
</div>
</div>
{/if}
{#if linkPickerOpen && manga}
<div class="panel-overlay" role="presentation" onclick={() => linkPickerOpen = false}>
<div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
<SeriesLinkPanel {manga} allManga={allMangaForLink} onClose={() => linkPickerOpen = false} />
</div>
</div>
{/if}
{#if coverPickerOpen && manga}
<div class="panel-overlay" role="presentation" onclick={() => coverPickerOpen = false}>
<div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
<CoverPickerPanel {manga} allManga={allMangaForLink} onClose={() => coverPickerOpen = false} />
</div>
</div>
{/if}
{#if migrateOpen && manga}
<MigrateModal
{manga}
currentChapters={chapters}
onClose={() => migrateOpen = false}
onMigrated={(newManga) => { setActiveManga(newManga); migrateOpen = false }}
/>
{/if}
{/if}
<style>
.root {
display: flex; height: 100%; overflow: hidden;
animation: fadeIn 0.14s ease both;
}
.list-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.markers-panel-overlay,
.panel-overlay {
position: fixed; inset: 0; z-index: var(--z-settings);
display: flex; align-items: stretch; justify-content: flex-start;
animation: fadeIn 0.12s ease both;
}
.markers-panel-drawer,
.panel-drawer {
width: 280px; max-width: 90vw;
background: var(--bg-surface); border-right: 1px solid var(--border-base);
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
display: flex; flex-direction: column;
animation: drawerIn 0.18s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes drawerIn { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: translateX(0) } }
</style>
src/lib/components/series/SeriesHeader.svelte
+376
View File
@@ -0,0 +1,376 @@
<script lang="ts">
import {
ArrowLeft, BookmarkSimple, ArrowSquareOut, Play, CaretDown,
Eye, ArrowsClockwise, LinkSimpleHorizontalBreak, ChartLineUp,
MapPin, Gear, Trash, Image,
} from 'phosphor-svelte'
import Thumbnail from '$lib/components/shared/manga/Thumbnail.svelte'
import { resolvedCover } from '$lib/core/cover/coverResolver'
import type { MangaPrefs } from '$lib/state/series.svelte'
import type { Manga, Chapter, Category } from '$lib/types'
import { setGenreFilter, setNavPage } from '$lib/state/app.svelte'
import { seriesState, setPreviewManga } from '$lib/state/series.svelte'
interface ContinueChapter {
chapter: Chapter
type: 'start' | 'continue' | 'reread'
resumePage: number | null
}
interface Props {
manga: Manga | null
loadingManga: boolean
totalCount: number
readCount: number
progressPct: number
downloadedCount: number
deletingAll: boolean
continueChapter: ContinueChapter | null
hasAnyAutomation: boolean
markersOpen: boolean
linkedIds: number[]
allMangaForLink: Manga[]
loadingLinkList: boolean
mangaCategories: Category[]
togglingLibrary: boolean
onRead: (ch: ContinueChapter) => void
onToggleLibrary: () => void
onDeleteAll: () => void
onMigrateOpen: () => void
onTrackingOpen: () => void
onAutoOpen: () => void
onMarkersToggle: () => void
onLinkPickerOpen: () => void
onCoverPickerOpen:() => void
}
let {
manga, loadingManga, totalCount, readCount, progressPct,
downloadedCount, deletingAll, continueChapter, hasAnyAutomation,
markersOpen, linkedIds, allMangaForLink, loadingLinkList,
mangaCategories, togglingLibrary,
onRead, onToggleLibrary, onDeleteAll, onMigrateOpen,
onTrackingOpen, onAutoOpen, onMarkersToggle, onLinkPickerOpen, onCoverPickerOpen,
}: Props = $props()
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
)
const markerCount = $derived(
seriesState.activeManga ? seriesState.getMarkersForManga(seriesState.activeManga.id).length : 0
)
const hasCoverOverride = $derived(
!!seriesState.settings.mangaPrefs?.[seriesState.activeManga?.id ?? manga?.id ?? 0]?.coverUrl
)
const altTitles = $derived(
(manga as any)?.alternativeTitles ?? (manga as any)?.altTitles ?? []
)
</script>
<div class="sidebar">
<button class="back" onclick={() => history.back()}>
<ArrowLeft size={13} weight="light" /> Back
</button>
<button class="cover-wrap" onclick={() => setPreviewManga(manga)}>
<Thumbnail src={resolvedCover(seriesState.activeManga?.id ?? manga?.id ?? 0, seriesState.activeManga?.thumbnailUrl ?? manga?.thumbnailUrl ?? "")} alt={seriesState.activeManga?.title ?? manga?.title ?? ""} class="cover" />
</button>
{#if loadingManga}
<div class="meta-skeleton">
<div class="skeleton sk-line" style="width:90%;height:14px"></div>
<div class="skeleton sk-line" style="width:60%;height:11px"></div>
</div>
{:else}
<div class="meta">
<p class="title">{manga?.title}</p>
{#if manga?.author || manga?.artist}
<p class="byline">{[manga?.author, manga?.artist].filter(Boolean).filter((v, i, a) => a.indexOf(v) === i).join(' · ')}</p>
{/if}
<div class="badges">
{#if statusLabel}
<span class="badge" class:badge-ongoing={manga?.status === 'ONGOING'} class:badge-ended={manga?.status !== 'ONGOING'}>{statusLabel}</span>
{/if}
{#if manga?.source?.displayName ?? (manga as any)?.source?.name}
<span class="badge badge-source">{manga?.source?.displayName ?? (manga as any)?.source?.name}</span>
{/if}
</div>
{#if altTitles.length > 0}
<div class="alttitles-section">
<button class="row-toggle" onclick={() => altOpen = !altOpen}>
<span>Also known as</span>
<CaretDown size={10} weight="light" style="transform:{altOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease;flex-shrink:0" />
</button>
{#if altOpen}
<div class="alttitles-list">
{#each altTitles as t}<p class="alttitle">{t}</p>{/each}
</div>
{/if}
</div>
{/if}
{#if manga?.genre?.length}
<div class="genres">
{#each (genresExpanded ? manga.genre : manga.genre.slice(0, 3)) as g}
<button class="genre" onclick={() => { setGenreFilter(g); setNavPage('search'); history.back() }}>{g}</button>
{/each}
{#if manga.genre.length > 3}
<button class="genre-toggle" onclick={() => genresExpanded = !genresExpanded}>
{genresExpanded ? 'less' : `+${manga.genre.length - 3}`}
</button>
{/if}
</div>
{/if}
{#if manga?.description}
<div class="desc-wrap">
<p class="desc">{manga.description}</p>
<button class="expand-toggle" onclick={() => setPreviewManga(manga)}>Read more</button>
</div>
{/if}
</div>
{/if}
<div class="cta-section">
{#if continueChapter}
<button class="read-btn" onclick={() => onRead(continueChapter!)}>
<Play size={12} weight="fill" />
{continueChapter.type === 'reread' ? 'Read again'
: continueChapter.type === 'start' ? 'Start reading'
: `Continue · Ch.${continueChapter.chapter.chapterNumber}${continueChapter.resumePage ? ` p.${continueChapter.resumePage}` : ''}`}
</button>
{/if}
<div class="actions">
<button class="library-btn" class:active={manga?.inLibrary} onclick={onToggleLibrary} disabled={togglingLibrary || loadingManga}>
<BookmarkSimple size={13} weight={manga?.inLibrary ? 'fill' : 'light'} />
{manga?.inLibrary ? 'In Library' : 'Add to Library'}
</button>
{#if manga?.realUrl}
<a href={manga.realUrl} target="_blank" rel="noreferrer" class="external-link">
<ArrowSquareOut size={13} weight="light" />
</a>
{/if}
</div>
</div>
{#if totalCount > 0}
<div class="progress-section">
<div class="progress-header">
<span class="progress-label">{readCount} / {totalCount} read</span>
<span class="progress-pct">{Math.round(progressPct)}%</span>
</div>
<div class="progress-track"><div class="progress-fill" style="width:{progressPct}%"></div></div>
</div>
{/if}
{#if !loadingManga && manga}
<div class="details-section">
<button class="details-toggle" onclick={() => manageOpen = !manageOpen}>
<span>Manage</span>
<CaretDown size={11} weight="light" style="transform:{manageOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease" />
</button>
{#if manageOpen}
<div class="details-body">
<div class="detail-actions">
<button class="detail-action-btn" onclick={() => setPreviewManga(manga)}>
<Eye size={12} weight="light" /> Preview
</button>
<button class="detail-action-btn" onclick={onMigrateOpen}>
<ArrowsClockwise size={12} weight="light" /> Switch Source
</button>
<button class="detail-action-btn" class:detail-action-active={linkedIds.length > 0} onclick={onLinkPickerOpen}>
<LinkSimpleHorizontalBreak size={12} weight={linkedIds.length > 0 ? 'fill' : 'light'} />
Series Link{linkedIds.length > 0 ? ` (${linkedIds.length})` : ''}
</button>
<button class="detail-action-btn" class:detail-action-active={hasCoverOverride} onclick={onCoverPickerOpen}>
<Image size={12} weight={hasCoverOverride ? 'fill' : 'light'} /> Cover Image
</button>
<button class="detail-action-btn" onclick={onTrackingOpen}>
<ChartLineUp size={12} weight="light" /> Tracking
</button>
<button class="detail-action-btn" class:detail-action-active={markersOpen} onclick={onMarkersToggle}>
<MapPin size={12} weight={markersOpen ? 'fill' : 'light'} />
Markers{markerCount > 0 ? ` (${markerCount})` : ''}
</button>
{#if manga?.inLibrary}
<button class="detail-action-btn" class:detail-action-active={hasAnyAutomation} onclick={onAutoOpen}>
<Gear size={12} weight={hasAnyAutomation ? 'fill' : 'light'} /> Automation
</button>
{/if}
{#if downloadedCount > 0}
<button class="detail-action-btn detail-action-danger" onclick={onDeleteAll} disabled={deletingAll}>
<Trash size={12} weight="light" /> {deletingAll ? 'Deleting…' : `Delete Downloads (${downloadedCount})`}
</button>
{/if}
</div>
</div>
{/if}
</div>
{/if}
</div>
<style>
.sidebar {
width: 240px; flex-shrink: 0;
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);
color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-ui);
letter-spacing: var(--tracking-wide); text-transform: uppercase;
transition: color var(--t-base);
}
.back:hover { color: var(--text-secondary); }
.cover-wrap {
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);
letter-spacing: var(--tracking-tight);
}
.byline { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-ui); }
.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;
}
.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 {
font-size: var(--text-2xs); font-family: var(--font-ui); color: var(--text-faint);
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: var(--tracking-wide);
cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.genre:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.genre-toggle {
font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: var(--tracking-wide);
cursor: pointer; transition: color var(--t-base), border-color var(--t-base);
}
.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 {
display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
width: 100%; padding: 9px var(--sp-3); border-radius: var(--radius-md);
background: var(--accent); border: 1px solid var(--accent);
color: var(--accent-contrast, #fff); font-size: var(--text-xs); font-family: var(--font-ui);
letter-spacing: var(--tracking-wide); cursor: pointer; transition: opacity var(--t-base);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.read-btn:hover { opacity: 0.88; }
.actions { display: flex; align-items: center; gap: var(--sp-2); }
.library-btn {
display: flex; align-items: center; gap: var(--sp-2);
font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide);
padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
color: var(--text-muted); background: var(--bg-raised);
transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1;
}
.library-btn:hover { border-color: var(--accent); color: var(--accent-fg); }
.library-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
.library-btn:disabled { opacity: 0.4; cursor: default; }
.external-link {
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-faint); flex-shrink: 0;
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.external-link:hover { color: var(--text-muted); border-color: var(--border-strong); }
.progress-section { display: flex; flex-direction: column; gap: var(--sp-1); }
.progress-header { display: flex; justify-content: space-between; align-items: center; }
.progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.progress-pct { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
.progress-track { height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; }
.details-section { display: flex; flex-direction: column; gap: 2px; }
.details-toggle {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
letter-spacing: var(--tracking-wide); padding: 4px 0; transition: color var(--t-base);
}
.details-toggle:hover { color: var(--text-muted); }
.details-body { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); }
.detail-actions { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-1); }
.detail-action-btn {
display: flex; align-items: center; gap: var(--sp-2); width: 100%;
padding: 6px var(--sp-2); border-radius: var(--radius-md);
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer;
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.detail-action-btn:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
.detail-action-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.detail-action-active:hover { color: var(--accent-fg); border-color: var(--accent); }
.detail-action-danger { color: var(--color-error); }
.detail-action-danger:hover:not(:disabled) { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
.detail-action-danger:disabled { opacity: 0.4; cursor: default; }
</style>
src/lib/components/series/lib/chapterList.ts
+79
View File
@@ -0,0 +1,79 @@
import type { Chapter } from '$lib/types'
export type ChapterSortMode = 'source' | 'chapterNumber' | 'uploadDate'
export type ChapterSortDir = 'asc' | 'desc'
export interface ChapterDisplayPrefs {
sortMode?: ChapterSortMode
sortDir?: ChapterSortDir
preferredScanlator?: string
scanlatorFilter?: string[]
scanlatorBlacklist?: string[]
scanlatorForce?: boolean
}
function sortByMode(a: Chapter, b: Chapter, mode: ChapterSortMode): number {
if (mode === 'chapterNumber') return a.chapterNumber - b.chapterNumber
if (mode === 'uploadDate') return Number(a.uploadDate ?? 0) - Number(b.uploadDate ?? 0)
return a.sourceOrder - b.sourceOrder
}
export function buildChapterList(chapters: Chapter[], prefs: ChapterDisplayPrefs = {}): Chapter[] {
const {
sortMode = 'source',
sortDir = 'asc',
preferredScanlator = '',
scanlatorFilter = [],
scanlatorBlacklist = [],
scanlatorForce = false,
} = prefs
let base = [...chapters]
if (scanlatorBlacklist.length > 0) {
base = base.filter(c => !scanlatorBlacklist.includes(c.scanlator ?? ''))
}
base.sort((a, b) => sortByMode(a, b, sortMode))
if (preferredScanlator) {
const pref: Chapter[] = [], rest: Chapter[] = []
for (const c of base) (c.scanlator === preferredScanlator ? pref : rest).push(c)
base = [...pref, ...rest]
}
if (scanlatorFilter.length > 0) {
const seen = new Map<number, Chapter>()
for (const ch of base) {
const existing = seen.get(ch.chapterNumber)
if (!existing) {
if (!scanlatorForce || scanlatorFilter.includes(ch.scanlator ?? '')) {
seen.set(ch.chapterNumber, ch)
}
} else {
const np = scanlatorFilter.indexOf(ch.scanlator ?? '')
const op = scanlatorFilter.indexOf(existing.scanlator ?? '')
if (np !== -1 && (op === -1 || np < op)) seen.set(ch.chapterNumber, ch)
}
}
base = [...seen.values()].sort((a, b) => sortByMode(a, b, sortMode))
}
return sortDir === 'desc' ? base.reverse() : base
}
export function chaptersAscending(chapters: Chapter[]): Chapter[] {
return [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
}
export function buildReaderChapterList(
chapters: Chapter[],
prefs: Pick<ChapterDisplayPrefs, 'preferredScanlator' | 'scanlatorFilter'> | undefined,
): Chapter[] {
return buildChapterList(chapters, {
sortMode: 'source',
sortDir: 'asc',
preferredScanlator: prefs?.preferredScanlator,
scanlatorFilter: prefs?.scanlatorFilter,
})
}
src/lib/components/series/lib/mangaPrefs.ts
+18
View File
@@ -0,0 +1,18 @@
import { settingsState, updateSettings } from '$lib/state/settings.svelte'
import type { MangaPrefs } from '$lib/state/series.svelte'
export { DEFAULT_MANGA_PREFS } from '$lib/state/series.svelte'
export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {}
return (prefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K]
}
export function setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) {
updateSettings({
mangaPrefs: {
...settingsState.settings.mangaPrefs,
[mangaId]: { ...(settingsState.settings.mangaPrefs?.[mangaId] ?? {}), [key]: value },
},
})
}
src/lib/components/series/panels/AutomationPanel.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
</script>
<div class="stub-panel">
<button class="stub-close" onclick={onClose}>✕</button>
<p class="stub-label">AutomationPanel</p>
</div>
<style>
.stub-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
.stub-close { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.stub-label { color: var(--text-faint); font-size: var(--text-sm); }
</style>
src/lib/components/series/panels/CoverPickerPanel.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
</script>
<div class="stub-panel">
<button class="stub-close" onclick={onClose}>✕</button>
<p class="stub-label">CoverPickerPanel</p>
</div>
<style>
.stub-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
.stub-close { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.stub-label { color: var(--text-faint); font-size: var(--text-sm); }
</style>
src/lib/components/series/panels/MarkersPanel.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
</script>
<div class="stub-panel">
<button class="stub-close" onclick={onClose}>✕</button>
<p class="stub-label">MarkersPanel</p>
</div>
<style>
.stub-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
.stub-close { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.stub-label { color: var(--text-faint); font-size: var(--text-sm); }
</style>
src/lib/components/settings/sections/AboutSettings.svelte
+73 -69
View File
@@ -1,14 +1,13 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api/core'
import { listen } from '@tauri-apps/api/event'
import { getVersion } from '@tauri-apps/api/app'
import { open as openUrl } from '@tauri-apps/plugin-shell'
import { platformService } from '$lib/platform-service'
import { autoBackupAppData } from '$lib/core/backup'
import { requestManager } from '$lib/request-manager'
import type { ReleaseInfo } from '$lib/platform-adapters/types'
interface ReleaseInfo { tag_name: string; name: string; body: string; published_at: string; html_url: string }
type UpdatePhase = 'idle' | 'downloading' | 'launching' | 'ready' | 'error'
const IS_WINDOWS = navigator.userAgent.includes('Windows')
const supportsUpdates = platformService.isSupported('app-updates')
const IS_WINDOWS = navigator.userAgent.includes('Windows')
interface AboutServer { name: string; version: string; buildType: string; buildTime: number; github: string; discord: string }
interface AboutWebUI { channel: string; tag: string; updateTimestamp: number }
@@ -29,32 +28,33 @@
let webuiInfo = $state<AboutWebUI | null>(null)
$effect(() => {
getVersion().then(v => appVersion = v).catch(() => appVersion = 'unknown')
platformService.getVersion().then(v => appVersion = v).catch(() => appVersion = 'unknown')
if (!releasesLoaded) { releasesLoaded = true; loadReleases() }
loadServerInfo()
})
$effect(() => { loadServerInfo() })
$effect(() => {
if (!supportsUpdates) return
let unlisten: (() => void) | undefined
listen<{ downloaded: number; total: number | null }>('update-progress', e => {
dlBytes = e.payload.downloaded; dlTotal = e.payload.total ?? null
platformService.onUpdateProgress(p => {
dlBytes = p.downloaded; dlTotal = p.total ?? null
}).then(fn => { unlisten = fn })
return () => unlisten?.()
})
$effect(() => {
if (!supportsUpdates) return
let unlisten: (() => void) | undefined
listen('update-launching', () => { updatePhase = 'launching' }).then(fn => { unlisten = fn })
platformService.onUpdateLaunching(() => { updatePhase = 'launching' }).then(fn => { unlisten = fn })
return () => unlisten?.()
})
async function loadReleases() {
if (!supportsUpdates) return
releasesLoading = true; releasesError = null
try {
const timeout = new Promise<never>((_, reject) => setTimeout(() => reject(new Error('Request timed out after 10s')), 10_000))
const all = await Promise.race([invoke<ReleaseInfo[]>('list_releases'), timeout])
releases = all.filter(r => typeof r.tag_name === 'string' && r.tag_name.trim())
releases = await Promise.race([platformService.listReleases(), timeout])
} catch (e: any) {
releasesError = e instanceof Error ? e.message : String(e)
} finally { releasesLoading = false }
@@ -81,7 +81,7 @@
}
const onLatestVersion = $derived((() => {
if (releasesLoading || releases.length === 0 || !appVersion || appVersion === '…') return false
if (!supportsUpdates || releasesLoading || releases.length === 0 || !appVersion || appVersion === '…') return false
const sorted = releases.slice().sort((a, b) => compareSemver(a.tag_name, b.tag_name))
return compareSemver(appVersion, sorted[0].tag_name) >= 0
})())
@@ -115,11 +115,11 @@
try {
if (IS_WINDOWS) {
await autoBackupAppData()
try { await invoke('kill_server') } catch {}
await invoke('download_and_install_update', { tag: release.tag_name })
try { await platformService.stopServer() } catch {}
await platformService.installAppUpdate(release.tag_name)
updatePhase = 'ready'
} else {
await openUrl(release.html_url)
await platformService.openExternal(release.html_url)
updatePhase = 'idle'; targetTag = null
}
} catch (e: any) {
@@ -128,7 +128,7 @@
}
}
async function restartNow() { await invoke('restart_app') }
async function restartNow() { await platformService.restartApp() }
function cancelUpdate() { updatePhase = 'idle'; updateError = null; targetTag = null; dlBytes = 0; dlTotal = null }
</script>
@@ -149,9 +149,11 @@
<div class="s-section-body">
<div class="s-row">
<div class="s-row-info"><span class="s-label">Installed</span><span class="s-desc">v{appVersion}</span></div>
<button class="s-btn" onclick={() => { releasesError = null; loadReleases() }} disabled={releasesLoading}>
{releasesLoading ? 'Loading…' : 'Refresh'}
</button>
{#if supportsUpdates}
<button class="s-btn" onclick={() => { releasesError = null; loadReleases() }} disabled={releasesLoading}>
{releasesLoading ? 'Loading…' : 'Refresh'}
</button>
{/if}
</div>
{#if onLatestVersion}
<div class="s-row">
@@ -225,58 +227,60 @@
</div>
{/if}
<div class="s-section">
<p class="s-section-title">Releases</p>
<div class="s-section-body">
{#if releasesError}
<p class="s-empty" style="color:var(--color-error)">{releasesError}</p>
{:else if releasesLoading}
<p class="s-empty">Fetching releases…</p>
{:else if releases.length === 0}
<p class="s-empty">No releases found.</p>
{:else}
<div class="s-release-scroll">
{#each releases as release}
{@const isCurrent = isCurrentVersion(release.tag_name)}
{@const isExpanded = expandedTag === release.tag_name}
{@const isTarget = targetTag === release.tag_name}
{@const isInstalling = isTarget && updatePhase === 'downloading'}
<div class="s-release-row" class:current={isCurrent}>
<div class="s-release-header">
<div class="s-release-meta">
<span class="s-release-tag">{release.tag_name}</span>
{#if isCurrent}<span class="s-release-badge">installed</span>{/if}
{#if release.published_at}<span class="s-release-date">{fmtDate(release.published_at)}</span>{/if}
</div>
<div class="s-btn-row">
{#if release.body.trim()}
<button class="s-btn" onclick={() => expandedTag = isExpanded ? null : release.tag_name}>
{isExpanded ? 'Hide' : 'Changelog'}
</button>
{/if}
{#if !isCurrent}
{#if IS_WINDOWS}
<button class="s-btn" class:s-btn-accent={!isInstalling}
disabled={updatePhase === 'downloading'} onclick={() => installUpdate(release)}>
{isInstalling ? 'Downloading…' : 'Install'}
{#if supportsUpdates}
<div class="s-section">
<p class="s-section-title">Releases</p>
<div class="s-section-body">
{#if releasesError}
<p class="s-empty" style="color:var(--color-error)">{releasesError}</p>
{:else if releasesLoading}
<p class="s-empty">Fetching releases…</p>
{:else if releases.length === 0}
<p class="s-empty">No releases found.</p>
{:else}
<div class="s-release-scroll">
{#each releases as release}
{@const isCurrent = isCurrentVersion(release.tag_name)}
{@const isExpanded = expandedTag === release.tag_name}
{@const isTarget = targetTag === release.tag_name}
{@const isInstalling = isTarget && updatePhase === 'downloading'}
<div class="s-release-row" class:current={isCurrent}>
<div class="s-release-header">
<div class="s-release-meta">
<span class="s-release-tag">{release.tag_name}</span>
{#if isCurrent}<span class="s-release-badge">installed</span>{/if}
{#if release.published_at}<span class="s-release-date">{fmtDate(release.published_at)}</span>{/if}
</div>
<div class="s-btn-row">
{#if release.body.trim()}
<button class="s-btn" onclick={() => expandedTag = isExpanded ? null : release.tag_name}>
{isExpanded ? 'Hide' : 'Changelog'}
</button>
{:else}
<button class="s-btn" onclick={() => installUpdate(release)}>Open on GitHub</button>
{/if}
{/if}
{#if !isCurrent}
{#if IS_WINDOWS}
<button class="s-btn" class:s-btn-accent={!isInstalling}
disabled={updatePhase === 'downloading'} onclick={() => installUpdate(release)}>
{isInstalling ? 'Downloading…' : 'Install'}
</button>
{:else}
<button class="s-btn" onclick={() => installUpdate(release)}>Open on GitHub</button>
{/if}
{/if}
</div>
</div>
{#if isExpanded && release.body.trim()}
<div class="s-release-body">
<pre class="s-release-body pre">{release.body.trim()}</pre>
</div>
{/if}
</div>
{#if isExpanded && release.body.trim()}
<div class="s-release-body">
<pre class="s-release-body pre">{release.body.trim()}</pre>
</div>
{/if}
</div>
{/each}
</div>
{/if}
{/each}
</div>
{/if}
</div>
</div>
</div>
{/if}
<div class="s-section">
<p class="s-section-title">Links</p>
src/lib/components/settings/sections/FoldersSettings.svelte
+7 -5
View File
@@ -114,14 +114,16 @@
const reordered = [...sortable]
const [moved] = reordered.splice(sFromIdx, 1)
reordered.splice(sToIdx, 0, moved)
categories = [...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]
getAdapter().updateCategoryOrder({ id: fromNumId, position: sToIdx + 1 })
const optimistic = [...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]
categories = optimistic
const serverPosition = sToIdx + 1
getAdapter().updateCategoryOrder({ id: fromNumId, position: serverPosition })
.then((updated: Category[]) => {
categories = [
...zeroCat,
...updated.sort((a: Category, b: Category) => a.order - b.order).map((fresh: Category) => {
const existing = categories.find(c => c.id === fresh.id)
return existing ? { ...existing, ...fresh } : fresh
const local = optimistic.find(c => c.id === fresh.id)
return local ? { ...fresh, mangas: local.mangas } : fresh
}),
]
})
@@ -203,7 +205,7 @@
<DotsSixVertical size={14} weight="bold" />
</span>
<span class="s-folder-name">{cat?.name ?? 'Completed'}</span>
<span class="s-folder-count">{cat?.mangas?.nodes.length ?? 0} manga</span>
<span class="s-folder-count">{cat?.mangas?.nodes?.length ?? 0} manga</span>
<span class="s-folder-badge">built-in</span>
<div class="s-folder-actions">
<button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? 'Show tab in library' : 'Hide tab from library'}>
src/lib/components/settings/sections/KeybindsSettings.svelte
+8 -3
View File
@@ -1,7 +1,12 @@
<script lang="ts">
export { eventToKeybind, matchesKeybind } from './keybindEngine'
export { DEFAULT_KEYBINDS, KEYBIND_LABELS } from './defaultBinds'
export type { Keybinds } from './defaultBinds'
import { settingsState, updateSettings } from '$lib/state/settings.svelte'
import { eventToKeybind } from '$lib/core/keybinds/keybindEngine'
import { DEFAULT_KEYBINDS, KEYBIND_LABELS } from '$lib/core/keybinds/defaultBinds'
import type { Keybinds } from '$lib/core/keybinds/defaultBinds'
function resetKeybinds() {
updateSettings({ keybinds: { ...DEFAULT_KEYBINDS } })
}
let listeningKey: keyof Keybinds | null = $state(null)
src/lib/components/settings/sections/StorageSettings.svelte
+39 -32
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { Trash, ClockCounterClockwise } from 'phosphor-svelte'
import { invoke } from '@tauri-apps/api/core'
import { untrack } from 'svelte'
import { appState } from '$lib/state/app.svelte'
import { platformService } from '$lib/platform-service'
import { toast } from '$lib/state/notifications.svelte'
import { settingsState, updateSettings } from '$lib/state/settings.svelte'
import { exportAppData, importAppData } from '$lib/core/backup'
@@ -14,6 +13,8 @@
import { clearPageCache } from '$lib/request-manager'
import { cache as queryCache } from '$lib/core/cache/queryCache'
const supportsFilesystem = platformService.isSupported('filesystem')
type ResetState = 'idle' | 'busy' | 'done' | 'error'
interface ResetItem { key: string; label: string; desc: string; state: ResetState; error: string | null; confirm: boolean }
@@ -76,8 +77,8 @@
clearPageCache()
queryCache.clearAll()
await Promise.all([
invoke('clear_moku_cache'),
invoke('clear_suwayomi_cache'),
platformService.clearMokuCache(),
platformService.clearSuwayomiCache(),
gql(`mutation { clearCachedImages(input: { cachedPages: true, cachedThumbnails: true, downloadedThumbnails: false }) { cachedPages cachedThumbnails } }`),
])
}
@@ -98,14 +99,14 @@
await persistSettings({ settings: DEFAULT_SETTINGS, storeVersion: 1 })
patchReset(key, { state: 'done' })
await showExitCountdown()
invoke('exit_app')
platformService.exitApp()
return
case 'suwayomi-data':
localStorage.clear()
await invoke('reset_suwayomi_data')
await platformService.resetSuwayomiData()
patchReset(key, { state: 'done' })
await showExitCountdown()
invoke('exit_app')
platformService.exitApp()
return
}
patchReset(key, { state: 'done' })
@@ -138,8 +139,9 @@
let defaultDownloadsPath = $state('')
$effect(() => {
if (!supportsFilesystem) return
if (!isExternalServer) {
invoke<string>('get_default_downloads_path').then(p => { defaultDownloadsPath = p })
platformService.getDefaultDownloadsPath().then(p => { defaultDownloadsPath = p })
} else {
defaultDownloadsPath = ''
}
@@ -163,6 +165,7 @@
let resetSectionOpen = $state(false)
async function fetchStorage() {
if (!supportsFilesystem) return
storageLoading = true; storageError = null
try {
const pathData = await gql<{ downloadsPath: string | null; localSourcePath: string | null }>(
@@ -183,7 +186,7 @@
}
if (dirsToScan.length === 0) { multiStorageInfos = []; storageInfo = null; return }
const results = await Promise.allSettled(
dirsToScan.map(d => invoke<StorageInfo>('get_storage_info', { downloadsPath: d.path }).then(info => ({ ...info, label: d.label })))
dirsToScan.map(d => platformService.getStorageInfo(d.path).then(info => ({ ...info, label: d.label })))
)
multiStorageInfos = results
.filter((r): r is PromiseFulfilledResult<StorageInfo & { label: string }> => r.status === 'fulfilled')
@@ -195,17 +198,16 @@
}
async function validatePath(path: string): Promise<string | null> {
if (!path.trim()) return null
if (isExternalServer) return null
if (!path.trim() || isExternalServer || !supportsFilesystem) return null
try {
const exists = await invoke<boolean>('check_path_exists', { path: path.trim() })
const exists = await platformService.checkPathExists(path.trim())
return exists ? null : 'Directory does not exist'
} catch { return 'Could not check path' }
}
async function createDirectory(path: string): Promise<void> {
if (isExternalServer) throw new Error('Cannot create directories on an external server')
await invoke('create_directory', { path })
await platformService.createDirectory(path)
}
async function savePaths() {
@@ -219,11 +221,11 @@
await gql(`mutation($path: String!) { setDownloadsPath(input: { location: $path }) { location } }`, { path: dl })
if (loc) await gql(`mutation($path: String!) { setLocalSourcePath(input: { location: $path }) { location } }`, { path: loc })
updateSettings({ serverDownloadsPath: dl, serverLocalSourcePath: loc })
if (!isExternalServer) {
if (supportsFilesystem && !isExternalServer) {
const oldDl = confirmedDownloadsPath || defaultDownloadsPath
const newDl = dl || defaultDownloadsPath
if (newDl && oldDl && newDl !== oldDl) {
const hadContent = await invoke<boolean>('check_path_exists', { path: oldDl })
const hadContent = await platformService.checkPathExists(oldDl)
if (hadContent) { migrateFrom = oldDl; migrateTo = newDl }
}
}
@@ -238,12 +240,9 @@
async function startMigration() {
if (!migrateFrom || !migrateTo) return
migrating = true; migrateError = null; migrateProgress = { done: 0, total: 0, current: '' }
const { listen: tauriListen } = await import('@tauri-apps/api/event')
migrateUnlisten = await tauriListen<{ done: number; total: number; current: string }>(
'migrate_progress', e => { migrateProgress = e.payload }
)
migrateUnlisten = await platformService.onMigrateProgress(p => { migrateProgress = p })
try {
await invoke('migrate_downloads', { src: migrateFrom, dst: migrateTo })
await platformService.migrateDownloads(migrateFrom, migrateTo)
migrateFrom = null; migrateTo = null; migrateProgress = null
await fetchStorage()
} catch (e: any) {
@@ -254,17 +253,17 @@
function dismissMigration() { migrateFrom = null; migrateTo = null; migrateError = null; migrateProgress = null }
async function browseDownloadsFolder() {
const picked = await invoke<string | null>('pick_downloads_folder')
const picked = await platformService.pickFolder()
if (picked) { downloadsPathInput = picked; pathsFieldError = { ...pathsFieldError, dl: undefined }; await savePaths() }
}
async function browseLocalSourceFolder() {
const picked = await invoke<string | null>('pick_downloads_folder')
const picked = await platformService.pickFolder()
if (picked) { localSourcePathInput = picked; pathsFieldError = { ...pathsFieldError, loc: undefined }; await savePaths() }
}
async function browseExtraScanDir() {
const picked = await invoke<string | null>('pick_downloads_folder')
const picked = await platformService.pickFolder()
if (picked) { newScanDir = picked; addExtraScanDir() }
}
@@ -410,6 +409,11 @@
restoreLoading = true; restoreError = null; restoreStatus = null; restoreJobId = null
stopRestorePoll()
try {
const form = buildBackupFormData(
restoreFile,
`mutation RestoreBackup($backup: Upload!) { restoreBackup(input: { backup: $backup }) { id status { mangaProgress state totalManga } } }`,
{ backup: null }
)
const resp = await fetch(`${serverUrl()}/api/graphql`, { method: 'POST', headers: buildAuthHeaders(), body: form })
const json = await resp.json()
if (json.errors?.length) throw new Error(json.errors[0].message)
@@ -445,7 +449,8 @@
let appDataBackupDir = $state<string | null>(null)
$effect(() => {
invoke<string>('get_auto_backup_dir').then(d => { appDataBackupDir = d }).catch(() => {})
if (!supportsFilesystem) return
platformService.getAutoBackupDir().then(d => { appDataBackupDir = d }).catch(() => {})
})
async function handleExportAppData() {
@@ -507,6 +512,8 @@
<p class="s-empty">Reading filesystem…</p>
{:else if storageError}
<p class="s-empty" style="color:var(--color-error)">{storageError}</p>
{:else if !supportsFilesystem}
<p class="s-empty">Disk usage is unavailable in web mode.</p>
{:else if isExternalServer}
<p class="s-empty">Disk usage is unavailable for external servers — filesystem access requires a local connection.</p>
{:else if multiStorageInfos.length > 0}
@@ -551,7 +558,7 @@
spellcheck="false"
onkeydown={(e) => e.key === 'Enter' && savePaths()}
oninput={() => { pathsFieldError = { ...pathsFieldError, dl: undefined } }} />
{#if !isExternalServer}
{#if !isExternalServer && supportsFilesystem}
<button class="s-btn" onclick={browseDownloadsFolder}>Browse</button>
{/if}
</div>
@@ -565,7 +572,7 @@
{/if}
</div>
<div class="s-btn-row">
{#if pathsFieldError.dl && !isExternalServer}
{#if pathsFieldError.dl && !isExternalServer && supportsFilesystem}
<button class="s-btn" onclick={async () => {
try { await createDirectory(downloadsPathInput.trim()); pathsFieldError = { ...pathsFieldError, dl: undefined } }
catch (e: any) { pathsFieldError = { ...pathsFieldError, dl: e?.message ?? 'Failed' } }
@@ -624,10 +631,10 @@
bind:value={localSourcePathInput} placeholder="Optional" spellcheck="false"
onkeydown={(e) => e.key === 'Enter' && savePaths()}
oninput={() => { pathsFieldError = { ...pathsFieldError, loc: undefined } }} />
{#if !isExternalServer}
{#if !isExternalServer && supportsFilesystem}
<button class="s-btn" onclick={browseLocalSourceFolder}>Browse</button>
{/if}
{#if pathsFieldError.loc && !isExternalServer}
{#if pathsFieldError.loc && !isExternalServer && supportsFilesystem}
<button class="s-btn" onclick={async () => {
try { await createDirectory(localSourcePathInput.trim()); pathsFieldError = { ...pathsFieldError, loc: undefined } }
catch (e: any) { pathsFieldError = { ...pathsFieldError, loc: e?.message ?? 'Failed' } }
@@ -656,7 +663,7 @@
<div class="s-btn-row">
<input class="s-input mono" bind:value={newScanDir} placeholder="/path/to/dir" spellcheck="false"
onkeydown={(e) => e.key === 'Enter' && addExtraScanDir()} />
{#if !isExternalServer}
{#if !isExternalServer && supportsFilesystem}
<button class="s-btn" onclick={browseExtraScanDir}>Browse</button>
{/if}
</div>
@@ -790,7 +797,7 @@
<span class="s-label">Export settings</span>
<span class="s-desc">Save all Moku app settings to a .zip via a native save dialog.</span>
</div>
<button class="s-btn s-btn-accent" onclick={handleExportAppData} disabled={appDataExporting}>
<button class="s-btn s-btn-accent" onclick={handleExportAppData} disabled={appDataExporting || !supportsFilesystem}>
{appDataExporting ? 'Saving…' : 'Export'}
</button>
</div>
@@ -800,7 +807,7 @@
<span class="s-label">Import settings</span>
<span class="s-desc">Restore from a previously exported .zip file. Reloads the app immediately.</span>
</div>
<button class="s-btn" onclick={handleImportAppData} disabled={appDataImporting}>
<button class="s-btn" onclick={handleImportAppData} disabled={appDataImporting || !supportsFilesystem}>
{appDataImporting ? 'Importing…' : 'Import'}
</button>
</div>
@@ -821,7 +828,7 @@
<span class="s-label">Auto-backup location</span>
<span class="s-desc">Pre-update snapshots are kept here (last 5).</span>
</div>
<button class="s-btn" onclick={() => invoke('open_path', { path: appDataBackupDir })}>Open folder</button>
<button class="s-btn" onclick={() => platformService.openPath(appDataBackupDir!)}>Open folder</button>
</div>
{/if}
src/lib/components/shared/manga/MigrateModal.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
</script>
<div class="stub-panel">
<button class="stub-close" onclick={onClose}>✕</button>
<p class="stub-label">MigrateModal</p>
</div>
<style>
.stub-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
.stub-close { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.stub-label { color: var(--text-faint); font-size: var(--text-sm); }
</style>
src/lib/components/shared/manga/SeriesLinkPanel.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
</script>
<div class="stub-panel">
<button class="stub-close" onclick={onClose}>✕</button>
<p class="stub-label">SeriesLinkPanel</p>
</div>
<style>
.stub-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
.stub-close { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.stub-label { color: var(--text-faint); font-size: var(--text-sm); }
</style>
src/lib/components/shared/manga/ThreeDCard.svelte
+28 -82
View File
@@ -3,49 +3,39 @@
interface Props {
children: Snippet;
class?: string;
class?: string;
enabled?: boolean;
}
let { children, class: cls = "" }: Props = $props();
let { children, class: cls = "", enabled = true }: Props = $props();
</script>
<div class="hover-3d {cls}">
<div class="hover-3d-content">
{@render children()}
<div class="shine"></div>
<div class="edge-top"></div>
<div class="edge-left"></div>
{#if enabled}
<div class="hover-3d {cls}">
<div class="hover-3d-content">
{@render children()}
</div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
{:else}
<div class={cls}>
{@render children()}
</div>
{/if}
<style>
.hover-3d {
display: inline-grid;
perspective: 600px;
--tx: 0;
--ty: 0;
--shine-x: 50%;
--shine-y: 50%;
--shadow-x: 0px;
--shadow-y: 0px;
--tx: 0; --ty: 0;
--shadow-x: 0px; --shadow-y: 0px;
--ease-out: linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);
--ease-hover: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);
}
.hover-3d > :nth-child(n + 2) {
isolation: isolate;
z-index: 1;
scale: 1.2;
}
.hover-3d > :nth-child(n + 2) { isolation: isolate; z-index: 1; scale: 1.2; }
.hover-3d > :nth-child(2) { grid-area: 1/1/2/2; }
.hover-3d > :nth-child(3) { grid-area: 1/2/2/3; }
.hover-3d > :nth-child(4) { grid-area: 1/3/2/4; }
@@ -73,58 +63,14 @@
0 2px 6px rgba(0,0,0,0.12);
}
.hover-3d:hover > .hover-3d-content {
--ease-out: var(--ease-hover);
scale: 1.055;
}
.hover-3d:hover > .hover-3d-content { --ease-out: var(--ease-hover); scale: 1.055; }
.shine {
pointer-events: none;
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
border-radius: inherit;
background-image: radial-gradient(
ellipse 80% 60% at var(--shine-x) var(--shine-y),
rgba(255,255,255,0.22) 0%,
rgba(255,255,255,0.08) 30%,
transparent 65%
);
transition: opacity ease-out 350ms;
mix-blend-mode: screen;
}
.hover-3d:hover .shine { opacity: 1; }
.edge-top {
pointer-events: none;
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
z-index: 3;
background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.18) 50%, transparent 90%);
opacity: 0;
transition: opacity ease-out 350ms;
}
.edge-left {
pointer-events: none;
position: absolute;
top: 0; left: 0; bottom: 0;
width: 1px;
z-index: 3;
background: linear-gradient(180deg, transparent 10%, rgba(255,255,255,0.12) 50%, transparent 90%);
opacity: 0;
transition: opacity ease-out 350ms;
}
.hover-3d:hover .edge-top,
.hover-3d:hover .edge-left { opacity: 1; }
.hover-3d:has(> :nth-child(2):hover) { --tx: -1; --ty: 1; --shine-x: 15%; --shine-y: 15%; --shadow-x: -8px; --shadow-y: -8px; }
.hover-3d:has(> :nth-child(3):hover) { --tx: -1; --ty: 0; --shine-x: 50%; --shine-y: 10%; --shadow-x: 0px; --shadow-y: -8px; }
.hover-3d:has(> :nth-child(4):hover) { --tx: -1; --ty: -1; --shine-x: 85%; --shine-y: 15%; --shadow-x: 8px; --shadow-y: -8px; }
.hover-3d:has(> :nth-child(5):hover) { --tx: 0; --ty: 1; --shine-x: 10%; --shine-y: 50%; --shadow-x: -8px; --shadow-y: 0px; }
.hover-3d:has(> :nth-child(6):hover) { --tx: 0; --ty: -1; --shine-x: 90%; --shine-y: 50%; --shadow-x: 8px; --shadow-y: 0px; }
.hover-3d:has(> :nth-child(7):hover) { --tx: 1; --ty: 1; --shine-x: 15%; --shine-y: 85%; --shadow-x: -8px; --shadow-y: 8px; }
.hover-3d:has(> :nth-child(8):hover) { --tx: 1; --ty: 0; --shine-x: 50%; --shine-y: 90%; --shadow-x: 0px; --shadow-y: 8px; }
.hover-3d:has(> :nth-child(9):hover) { --tx: 1; --ty: -1; --shine-x: 85%; --shine-y: 85%; --shadow-x: 8px; --shadow-y: 8px; }
.hover-3d:has(> :nth-child(2):hover) { --tx: -1; --ty: 1; --shadow-x: -8px; --shadow-y: -8px; }
.hover-3d:has(> :nth-child(3):hover) { --tx: -1; --ty: 0; --shadow-x: 0px; --shadow-y: -8px; }
.hover-3d:has(> :nth-child(4):hover) { --tx: -1; --ty: -1; --shadow-x: 8px; --shadow-y: -8px; }
.hover-3d:has(> :nth-child(5):hover) { --tx: 0; --ty: 1; --shadow-x: -8px; --shadow-y: 0px; }
.hover-3d:has(> :nth-child(6):hover) { --tx: 0; --ty: -1; --shadow-x: 8px; --shadow-y: 0px; }
.hover-3d:has(> :nth-child(7):hover) { --tx: 1; --ty: 1; --shadow-x: -8px; --shadow-y: 8px; }
.hover-3d:has(> :nth-child(8):hover) { --tx: 1; --ty: 0; --shadow-x: 0px; --shadow-y: 8px; }
.hover-3d:has(> :nth-child(9):hover) { --tx: 1; --ty: -1; --shadow-x: 8px; --shadow-y: 8px; }
</style>
src/lib/components/shared/manga/Thumbnail.svelte
+17 -7
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { settings } from "$lib/state/settings.svelte";
import { getBlobUrl } from "$lib/core/cache/imageCache";
import { platformService } from "$lib/platform-service/index";
import { settingsState } from "$lib/state/settings.svelte";
import { getBlobUrl } from "$lib/core/cache/imageCache";
let {
src,
@@ -23,7 +22,18 @@
[key: string]: any;
} = $props();
const isAuth = $derived((settings.serverAuthMode ?? "NONE") !== "NONE");
function getServerUrl(): string {
const url = settingsState.settings.serverUrl;
return typeof url === "string" && url.trim() ? url.replace(/\/$/, "") : "http://127.0.0.1:4567";
}
function plainThumbUrl(path: string): string {
if (!path) return "";
if (path.startsWith("http")) return path;
return `${getServerUrl()}${path}`;
}
const isAuth = $derived((settingsState.settings.serverAuthMode ?? "NONE") !== "NONE");
let blobUrl = $state("");
let reqId = 0;
@@ -35,8 +45,8 @@
if (!_isAuth || !_src) { blobUrl = ""; return; }
const id = ++reqId;
const bareUrl = _src.startsWith("http") ? _src : `${platformService.getServerUrl()}${_src}`;
const id = ++reqId;
const bareUrl = _src.startsWith("http") ? _src : `${getServerUrl()}${_src}`;
getBlobUrl(bareUrl, _priority)
.then(u => { if (id === reqId) blobUrl = u; })
.catch(() => { if (id === reqId) blobUrl = ""; });
@@ -45,7 +55,7 @@
const resolved = $derived(
isAuth
? (blobUrl || undefined)
: (src ? platformService.plainThumbUrl(src) : undefined)
: (src ? plainThumbUrl(src) : undefined)
);
</script>
src/lib/components/shared/ui/ContextMenu.svelte
+231
View File
@@ -0,0 +1,231 @@
<script lang="ts">
export interface MenuItem {
label: string;
icon?: any;
onClick: () => void;
danger?: boolean;
disabled?: boolean;
separator?: never;
children?: MenuEntry[];
}
export interface MenuSeparator { separator: true }
export type MenuEntry = MenuItem | MenuSeparator;
interface Props {
x: number;
y: number;
items: MenuEntry[];
onClose: () => void;
}
let { x, y, items, onClose }: Props = $props();
let focused = $state(-1);
let el = $state<HTMLDivElement | undefined>(undefined);
let measured = $state(false);
let pos = $state({ left: 0, top: 0 });
let subOpen = $state(-1);
let subEls = $state<(HTMLDivElement | null)[]>([]);
const actionable = $derived(
items
.map((_, i) => i)
.filter((i) => !("separator" in items[i]) && !(items[i] as MenuItem).disabled)
);
$effect(() => { if (actionable.length && focused === -1) focused = actionable[0]; });
function getZoom(): number {
const raw = parseFloat(document.documentElement.style.zoom || "1") || 1;
return raw > 10 ? raw / 100 : raw;
}
$effect(() => {
if (!el) return;
const zoom = getZoom();
const style = getComputedStyle(document.documentElement);
const sidebarW = parseFloat(style.getPropertyValue('--sidebar-width')) || 52;
const titlebarH = parseFloat(style.getPropertyValue('--titlebar-height')) || 36;
const vw = window.innerWidth / zoom;
const vh = window.innerHeight / zoom;
const sx = x / zoom - sidebarW / zoom;
const sy = y / zoom - titlebarH / zoom;
const menuW = el.offsetWidth;
const menuH = el.offsetHeight;
pos = {
left: Math.max(4, sx + menuW > vw ? sx - menuW : sx),
top: Math.max(4, sy + menuH > vh ? sy - menuH : sy),
};
measured = true;
});
$effect(() => {
if (subOpen < 0) return;
const sub = subEls[subOpen];
if (!sub) return;
requestAnimationFrame(() => {
const zoom = getZoom();
const vw = window.innerWidth / zoom;
const rect = sub.getBoundingClientRect();
if (rect.right / zoom > vw) sub.classList.add("sub-flip");
else sub.classList.remove("sub-flip");
});
});
function onMouseDown(e: MouseEvent) {
const inMain = el?.contains(e.target as Node);
const inSub = subOpen >= 0 && subEls[subOpen]?.contains(e.target as Node);
if (!inMain && !inSub) onClose();
}
function onTouchStartOutside(e: TouchEvent) {
const inMain = el?.contains(e.target as Node);
const inSub = subOpen >= 0 && subEls[subOpen]?.contains(e.target as Node);
if (!inMain && !inSub) onClose();
}
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") {
e.stopPropagation();
if (subOpen >= 0) { subOpen = -1; } else { onClose(); }
return;
}
if (e.key === "ArrowDown") {
e.preventDefault();
const cur = actionable.indexOf(focused);
focused = actionable[(cur + 1) % actionable.length] ?? actionable[0];
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
const cur = actionable.indexOf(focused);
focused = actionable[(cur - 1 + actionable.length) % actionable.length] ?? actionable[0];
return;
}
if (e.key === "ArrowRight" && focused >= 0) {
const item = items[focused] as MenuItem;
if (item?.children?.length) { subOpen = focused; return; }
}
if (e.key === "ArrowLeft") { subOpen = -1; return; }
if (e.key === "Enter" && focused >= 0) {
e.preventDefault();
const item = items[focused] as MenuItem;
if (item?.children?.length) { subOpen = focused; return; }
if (item && !item.disabled) { item.onClick(); onClose(); }
}
}
$effect(() => {
document.addEventListener("mousedown", onMouseDown, true);
document.addEventListener("touchstart", onTouchStartOutside, true);
document.addEventListener("keydown", onKey, true);
return () => {
document.removeEventListener("mousedown", onMouseDown, true);
document.removeEventListener("touchstart", onTouchStartOutside, true);
document.removeEventListener("keydown", onKey, true);
};
});
</script>
<div bind:this={el} class="menu" role="menu" tabindex="-1"
style="left:{pos.left}px;top:{pos.top}px;visibility:{measured ? 'visible' : 'hidden'}"
oncontextmenu={(e) => e.preventDefault()}>
{#each items as item, i}
{#if "separator" in item}
<div class="sep"></div>
{:else}
{@const mi = item as MenuItem}
{@const hasSub = !!mi.children?.length}
<div class="item-wrap">
<button
class="item"
class:danger={mi.danger}
class:disabled={mi.disabled}
class:focused={focused === i}
class:has-sub={hasSub}
disabled={mi.disabled}
onclick={() => {
if (mi.disabled) return;
if (hasSub) { subOpen = subOpen === i ? -1 : i; return; }
mi.onClick(); onClose();
}}
onmouseenter={() => { if (!mi.disabled) { focused = i; subOpen = hasSub ? i : -1; } }}
onmouseleave={() => { focused = -1; }}
>
<span class="icon" class:icon-danger={mi.danger}>
{#if mi.icon}<mi.icon size={13} weight="light" />{/if}
</span>
<span class="label">{mi.label}</span>
{#if hasSub}<span class="sub-arrow">›</span>{/if}
</button>
{#if hasSub && subOpen === i}
<div bind:this={subEls[i]} class="menu submenu" role="menu" tabindex="-1"
onmouseenter={() => { subOpen = i; }}>
{#each mi.children as child}
{#if "separator" in child}
<div class="sep"></div>
{:else}
{@const sc = child as MenuItem}
<button
class="item"
class:danger={sc.danger}
class:disabled={sc.disabled}
disabled={sc.disabled}
onclick={() => { if (!sc.disabled) { sc.onClick(); onClose(); } }}
>
<span class="icon" class:icon-danger={sc.danger}>
{#if sc.icon}<sc.icon size={13} weight="light" />{/if}
</span>
<span class="label">{sc.label}</span>
</button>
{/if}
{/each}
</div>
{/if}
</div>
{/if}
{/each}
</div>
<style>
.menu {
position: fixed; z-index: 200;
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-lg); padding: var(--sp-1); min-width: 190px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.25);
animation: scaleIn 0.1s ease both; transform-origin: top left;
}
.item-wrap { position: relative; }
.submenu {
position: absolute;
left: 100%;
top: 0;
z-index: 201;
animation: scaleIn 0.08s ease both;
transform-origin: top left;
}
:global(.submenu.sub-flip) {
left: auto;
right: 100%;
transform-origin: top right;
}
.item {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; padding: 5px var(--sp-2); border-radius: var(--radius-md);
font-size: var(--text-sm); color: var(--text-secondary);
text-align: left; cursor: pointer; background: none; border: none; outline: none;
transition: background var(--t-fast), color var(--t-fast);
position: relative;
}
.item:hover:not(.disabled), .item.focused:not(.disabled) { background: var(--bg-overlay); color: var(--text-primary); }
.item.danger { color: var(--color-error); }
.item.danger:hover:not(.disabled), .item.danger.focused:not(.disabled) { background: var(--color-error-bg); }
.item.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); border-radius: var(--radius-sm); }
.icon-danger { color: var(--color-error); opacity: 0.7; }
.label { flex: 1; line-height: 1.3; }
.sub-arrow { font-size: 14px; color: var(--text-faint); line-height: 1; margin-left: auto; padding-left: var(--sp-1); }
.sep { height: 1px; background: var(--border-dim); margin: 3px var(--sp-1); }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
</style>
src/lib/components/shared/ui/SourceList.svelte
+120
View File
@@ -0,0 +1,120 @@
<script lang="ts">
import { MagnifyingGlass, CircleNotch, CaretDown, CaretRight } from "phosphor-svelte";
import Thumbnail from "$lib/components/shared/manga/Thumbnail.svelte";
import { loadSources } from "$lib/request-manager/extensions";
import { extensionsState } from "$lib/state/extensions.svelte";
let lang = $state("all");
let search = $state("");
let expanded = $state(new Set<string>());
$effect(() => { loadSources() });
const langs = $derived(["all", ...Array.from(new Set(extensionsState.sources.map((s) => s.lang))).sort()]);
const filtered = $derived(extensionsState.sources.filter((src) => {
if (src.id === "0") return false;
const matchLang = lang === "all" || src.lang === lang;
const matchSearch = src.name.toLowerCase().includes(search.toLowerCase())
|| src.displayName.toLowerCase().includes(search.toLowerCase());
return matchLang && matchSearch;
}));
const groups = $derived.by(() => {
const map = new Map<string, { name: string; icon: string; sources: typeof extensionsState.sources }>();
for (const src of filtered) {
if (!map.has(src.name)) map.set(src.name, { name: src.name, icon: src.iconUrl, sources: [] });
map.get(src.name)!.sources.push(src);
}
return Array.from(map.values());
});
function toggleGroup(name: string) {
const next = new Set(expanded);
next.has(name) ? next.delete(name) : next.add(name);
expanded = next;
}
</script>
<div class="root">
<div class="header">
<h1 class="heading">Sources</h1>
<div class="search-wrap">
<MagnifyingGlass size={12} class="search-icon" weight="light" />
<input class="search" placeholder="Search" bind:value={search} />
</div>
</div>
<div class="content">
<div class="lang-row">
{#each langs as l}
<button class="lang-btn" class:active={lang === l} onclick={() => lang = l}>
{l === "all" ? "All" : l.toUpperCase()}
</button>
{/each}
</div>
{#if extensionsState.loading}
<div class="empty"><CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
{:else if groups.length === 0}
<div class="empty">No sources found.</div>
{:else}
<div class="list">
{#each groups as g}
{@const single = g.sources.length === 1}
{@const open = expanded.has(g.name)}
<div>
<button class="row" onclick={() => single ? extensionsState.activeSource = g.sources[0] : toggleGroup(g.name)}>
<Thumbnail src={g.icon} alt={g.name} class="icon" onerror={(e) => ((e.target as HTMLImageElement).style.display = "none")} />
<div class="info">
<span class="name">{g.name}</span>
<span class="meta">{single ? `${g.sources[0].lang.toUpperCase()}${g.sources[0].isNsfw ? " · NSFW" : ""}` : `${g.sources.length} languages`}</span>
</div>
<span class="arrow">
{#if single}→{:else if open}<CaretDown size={12} weight="light" />{:else}<CaretRight size={12} weight="light" />{/if}
</span>
</button>
{#if !single && open}
{#each g.sources as src}
<button class="row row-indented" onclick={() => extensionsState.activeSource = src}>
<div class="indent-spacer"></div>
<div class="info"><span class="name">{src.lang.toUpperCase()}{src.isNsfw ? " · NSFW" : ""}</span></div>
<span class="arrow">→</span>
</button>
{/each}
{/if}
</div>
{/each}
</div>
{/if}
</div>
</div>
<style>
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
.content { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
.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; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
.search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
.search::placeholder { color: var(--text-faint); }
.search:focus { border-color: var(--border-strong); }
.lang-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lang-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); padding: 3px 8px; 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), background var(--t-base); }
.lang-btn:hover { color: var(--text-muted); border-color: var(--border-strong); }
.lang-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
.list { display: flex; flex-direction: column; gap: 1px; }
.row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; width: 100%; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
.row-indented { padding-left: var(--sp-5); }
.indent-spacer { width: 32px; flex-shrink: 0; }
:global(.icon) { width: 32px; height: 32px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--bg-raised); }
.info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.arrow { display: flex; align-items: center; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
.row:hover .arrow { opacity: 1; }
.empty { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
</style>
src/lib/components/tracking/TrackingPanel.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
</script>
<div class="stub-panel">
<button class="stub-close" onclick={onClose}>✕</button>
<p class="stub-label">TrackingPanel</p>
</div>
<style>
.stub-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
.stub-close { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.stub-label { color: var(--text-faint); font-size: var(--text-sm); }
</style>
src/lib/core/cover/autoLink.ts
+16 -4
View File
@@ -1,13 +1,25 @@
import { appState } from '$lib/state/app.svelte'
import { settingsState, updateSettings } from '$lib/state/settings.svelte'
import type { Manga } from '$lib/types'
export function autoLinkLibrary(focal: Manga, allManga: Manga[]): Promise<number> {
function linkManga(focalId: number, targetId: number) {
const existing = settingsState.settings.mangaLinks?.[focalId] ?? []
if (existing.includes(targetId)) return
updateSettings({
mangaLinks: {
...settingsState.settings.mangaLinks,
[focalId]: [...existing, targetId],
},
})
}
export function autoLinkLibrary(focal: Manga | null | undefined, allManga: Manga[]): Promise<number> {
if (!focal) return Promise.resolve(0)
return new Promise(resolve => {
const worker = new Worker(new URL('./autoLinkWorker.ts', import.meta.url), { type: 'module' })
worker.onmessage = (e: MessageEvent<number[]>) => {
const matches = e.data
for (const id of matches) appState.linkManga(focal.id, id)
for (const id of matches) linkManga(focal.id, id)
worker.terminate()
resolve(matches.length)
}
@@ -18,7 +30,7 @@ export function autoLinkLibrary(focal: Manga, allManga: Manga[]): Promise<number
focalTitle: focal.title,
focalId: focal.id,
allManga: allManga.map(m => ({ id: m.id, title: m.title })),
linkedIds: appState.settings.mangaLinks?.[focal.id] ?? [],
linkedIds: settingsState.settings.mangaLinks?.[focal.id] ?? [],
})
})
}
src/lib/core/cover/coverResolver.ts
+5 -4
View File
@@ -1,4 +1,5 @@
import { appState } from '$lib/state/app.svelte'
import { settingsState } from '$lib/state/settings.svelte'
import { seriesState } from '$lib/state/series.svelte'
import { searchWithScore } from '$lib/core/algorithms/search'
import { getHash, areDuplicates } from '$lib/core/cover/coverHash'
@@ -24,7 +25,7 @@ function normalizeUrl(url: string): string {
}
export function resolvedCover(mangaId: number, ownUrl: string): string {
return appState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
return settingsState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
}
function fuzzyMatchIds(
@@ -47,9 +48,9 @@ export function coverCandidatesSync(
ownUrl: string,
mangaById: Map<number, CoverManga & { title: string }>,
): CoverCandidate[] {
const linkedIds = appState.getLinkedMangaIds(mangaId)
const linkedIds = seriesState.settings.mangaLinks?.[mangaId] ?? []
const fuzzyIds = fuzzyMatchIds(mangaId, title, mangaById)
const current = appState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
const current = settingsState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
const allIds = Array.from(new Set([...linkedIds, ...fuzzyIds]))
const raw: { mangaId: number; url: string; label: string }[] = [
src/lib/platform-adapters/tauri/index.ts
+76 -6
View File
@@ -1,15 +1,20 @@
import { invoke } from '@tauri-apps/api/core'
import { invoke } from '@tauri-apps/api/core'
import { getCurrentWindow } from '@tauri-apps/api/window'
import { open } from '@tauri-apps/plugin-dialog'
import { listen } from '@tauri-apps/api/event'
import { open } from '@tauri-apps/plugin-dialog'
import { readFile, writeFile } from '@tauri-apps/plugin-fs'
import { open as openUrl } from '@tauri-apps/plugin-shell'
import { getVersion } from '@tauri-apps/api/app'
import { open as openUrl } from '@tauri-apps/plugin-shell'
import { getVersion } from '@tauri-apps/api/app'
import type {
PlatformAdapter,
PlatformFeature,
ServerLaunchConfig,
DiscordPresence,
AppUpdateInfo,
StorageInfo,
ReleaseInfo,
UpdateProgress,
MigrateProgress,
} from '$lib/platform-adapters/types'
export class TauriAdapter implements PlatformAdapter {
@@ -106,8 +111,8 @@ export class TauriAdapter implements PlatformAdapter {
async checkForAppUpdate(): Promise<AppUpdateInfo | null> {
const releases = await invoke<Array<{ tag_name: string; html_url: string; body: string }>>('list_releases')
const current = await getVersion()
const valid = releases.filter(r => r.tag_name?.trim())
const current = await getVersion()
const valid = releases.filter(r => r.tag_name?.trim())
if (!valid.length) return null
const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number)
const latest = valid.map(r => r.tag_name).sort((a, b) => {
@@ -124,4 +129,69 @@ export class TauriAdapter implements PlatformAdapter {
async installAppUpdate(tag: string) {
await invoke('download_and_install_update', { tag })
}
async restartApp() {
await invoke('restart_app')
}
async getDefaultDownloadsPath(): Promise<string> {
return invoke('get_default_downloads_path')
}
async getStorageInfo(downloadsPath: string): Promise<StorageInfo> {
return invoke('get_storage_info', { downloadsPath })
}
async checkPathExists(path: string): Promise<boolean> {
return invoke('check_path_exists', { path })
}
async createDirectory(path: string) {
await invoke('create_directory', { path })
}
async openPath(path: string) {
await invoke('open_path', { path })
}
async getAutoBackupDir(): Promise<string> {
return invoke('get_auto_backup_dir')
}
async clearMokuCache() {
await invoke('clear_moku_cache')
}
async clearSuwayomiCache() {
await invoke('clear_suwayomi_cache')
}
async resetSuwayomiData() {
await invoke('reset_suwayomi_data')
}
async exitApp() {
await invoke('exit_app')
}
async listReleases(): Promise<ReleaseInfo[]> {
const all = await invoke<ReleaseInfo[]>('list_releases')
return all.filter(r => typeof r.tag_name === 'string' && r.tag_name.trim())
}
async onUpdateProgress(cb: (p: UpdateProgress) => void): Promise<() => void> {
return listen<UpdateProgress>('update-progress', e => cb(e.payload))
}
async onUpdateLaunching(cb: () => void): Promise<() => void> {
return listen('update-launching', cb)
}
async onMigrateProgress(cb: (p: MigrateProgress) => void): Promise<() => void> {
return listen<MigrateProgress>('migrate_progress', e => cb(e.payload))
}
async migrateDownloads(src: string, dst: string) {
await invoke('migrate_downloads', { src, dst })
}
}
src/lib/platform-adapters/tauri/updater.ts
+15 -16
View File
@@ -1,40 +1,39 @@
import { invoke } from "@tauri-apps/api/core";
import { getVersion } from "@tauri-apps/api/app";
import { toast } from "$lib/state/app.svelte";
import { invoke } from '@tauri-apps/api/core'
import { getVersion } from '@tauri-apps/api/app'
import { toast } from '$lib/state/notifications.svelte'
function parse(tag: string): number[] {
return tag.replace(/^v/, "").split(".").map(Number);
return tag.replace(/^v/, '').split('.').map(Number)
}
function compare(a: number[], b: number[]): number {
for (let i = 0; i < 3; i++) {
if ((a[i] ?? 0) !== (b[i] ?? 0)) return (b[i] ?? 0) - (a[i] ?? 0);
if ((a[i] ?? 0) !== (b[i] ?? 0)) return (b[i] ?? 0) - (a[i] ?? 0)
}
return 0;
return 0
}
export async function checkForUpdateSilently(): Promise<void> {
try {
const [currentVersion, releases] = await Promise.all([
getVersion(),
invoke<Array<{ tag_name: string; html_url: string }>>("list_releases"),
]);
invoke<Array<{ tag_name: string; html_url: string }>>('list_releases'),
])
const valid = releases.filter(r => typeof r.tag_name === "string" && r.tag_name.trim());
if (!valid.length) return;
const valid = releases.filter(r => typeof r.tag_name === 'string' && r.tag_name.trim())
if (!valid.length) return
const latestTag = valid
.map(r => r.tag_name)
.sort((a, b) => compare(parse(a), parse(b)))[0]
.replace(/^v/, "");
.replace(/^v/, '')
if (compare(parse(latestTag), parse(currentVersion)) < 0) {
toast({
kind: "info",
title: `Update available — v${latestTag}`,
body: "Open Settings → About to install.",
duration: 8000,
});
kind: 'info',
message: `Update available — v${latestTag}`,
detail: 'Open Settings → About to install.',
})
}
} catch {}
}
src/lib/platform-adapters/types.ts
+53 -9
View File
@@ -7,21 +7,38 @@ export type PlatformFeature =
| 'discord-rpc'
export interface ServerLaunchConfig {
jarPath: string
port: number
dataPath: string
port?: number
[key: string]: unknown
}
export interface DiscordPresence {
title: string
chapter: string
startTimestamp?: number
state?: string
details?: string
[key: string]: unknown
}
export interface AppUpdateInfo {
version: string
url: string
notes?: string
url: string
notes: string
}
export interface StorageInfo {
manga_bytes: number
total_bytes: number
free_bytes: number
path: string
}
export interface MigrateProgress {
done: number
total: number
current: string
}
export interface UpdateProgress {
downloaded: number
total: number | null
}
export interface PlatformAdapter {
@@ -52,5 +69,32 @@ export interface PlatformAdapter {
getVersion(): Promise<string>
openExternal(url: string): Promise<void>
checkForAppUpdate(): Promise<AppUpdateInfo | null>
installAppUpdate(): Promise<void>
installAppUpdate(tag: string): Promise<void>
restartApp(): Promise<void>
getDefaultDownloadsPath(): Promise<string>
getStorageInfo(downloadsPath: string): Promise<StorageInfo>
checkPathExists(path: string): Promise<boolean>
createDirectory(path: string): Promise<void>
openPath(path: string): Promise<void>
getAutoBackupDir(): Promise<string>
clearMokuCache(): Promise<void>
clearSuwayomiCache(): Promise<void>
resetSuwayomiData(): Promise<void>
exitApp(): Promise<void>
onUpdateProgress(cb: (p: UpdateProgress) => void): Promise<() => void>
onUpdateLaunching(cb: () => void): Promise<() => void>
listReleases(): Promise<ReleaseInfo[]>
onMigrateProgress(cb: (p: MigrateProgress) => void): Promise<() => void>
migrateDownloads(src: string, dst: string): Promise<void>
}
export interface ReleaseInfo {
tag_name: string
name: string
body: string
published_at: string
html_url: string
}
src/lib/platform-adapters/web/index.ts
+27 -1
View File
@@ -4,6 +4,10 @@ import type {
ServerLaunchConfig,
DiscordPresence,
AppUpdateInfo,
StorageInfo,
ReleaseInfo,
UpdateProgress,
MigrateProgress,
} from '$lib/platform-adapters/types'
export class WebAdapter implements PlatformAdapter {
@@ -48,5 +52,27 @@ export class WebAdapter implements PlatformAdapter {
}
async checkForAppUpdate(): Promise<AppUpdateInfo | null> { return null }
async installAppUpdate() {}
async installAppUpdate(_tag: string) {}
async restartApp() {}
async getDefaultDownloadsPath(): Promise<string> { return '' }
async getStorageInfo(_downloadsPath: string): Promise<StorageInfo> {
return { manga_bytes: 0, total_bytes: 0, free_bytes: 0, path: '' }
}
async checkPathExists(_path: string): Promise<boolean> { return false }
async createDirectory(_path: string) {}
async openPath(_path: string) {}
async getAutoBackupDir(): Promise<string> { return '' }
async clearMokuCache() {}
async clearSuwayomiCache() {}
async resetSuwayomiData() {}
async exitApp() {}
async listReleases(): Promise<ReleaseInfo[]> { return [] }
async onUpdateProgress(_cb: (p: UpdateProgress) => void): Promise<() => void> { return () => {} }
async onUpdateLaunching(_cb: () => void): Promise<() => void> { return () => {} }
async onMigrateProgress(_cb: (p: MigrateProgress) => void): Promise<() => void> { return () => {} }
async migrateDownloads(_src: string, _dst: string) {}
}
src/lib/platform-service/index.ts
+53 -24
View File
@@ -1,5 +1,14 @@
import type { PlatformAdapter } from '$lib/platform-adapters/types'
import type { ServerLaunchConfig, DiscordPresence, AppUpdateInfo, PlatformFeature } from '$lib/platform-adapters/types'
import type {
PlatformAdapter,
PlatformFeature,
ServerLaunchConfig,
DiscordPresence,
AppUpdateInfo,
StorageInfo,
ReleaseInfo,
UpdateProgress,
MigrateProgress,
} from '$lib/platform-adapters/types'
let adapter: PlatformAdapter
@@ -13,32 +22,52 @@ function get(): PlatformAdapter {
}
export const platformService = {
isSupported: (f: PlatformFeature) => get().isSupported(f),
init: () => get().init(),
isSupported: (f: PlatformFeature) => get().isSupported(f),
init: () => get().init(),
launchServer: (c: ServerLaunchConfig) => get().launchServer(c),
stopServer: () => get().stopServer(),
getServerStatus: () => get().getServerStatus(),
launchServer: (c: ServerLaunchConfig) => get().launchServer(c),
stopServer: () => get().stopServer(),
getServerStatus: () => get().getServerStatus(),
readFile: (path: string) => get().readFile(path),
writeFile: (path: string, data: Uint8Array) => get().writeFile(path, data),
pickFolder: () => get().pickFolder(),
readFile: (path: string) => get().readFile(path),
writeFile: (path: string, data: Uint8Array) => get().writeFile(path, data),
pickFolder: () => get().pickFolder(),
authenticateBiometric: () => get().authenticateBiometric(),
storeCredential: (k: string, v: string) => get().storeCredential(k, v),
getCredential: (k: string) => get().getCredential(k),
authenticateBiometric: () => get().authenticateBiometric(),
storeCredential: (k: string, v: string) => get().storeCredential(k, v),
getCredential: (k: string) => get().getCredential(k),
setTitle: (title: string) => get().setTitle(title),
minimize: () => get().minimize(),
maximize: () => get().maximize(),
close: () => get().close(),
toggleFullscreen: () => get().toggleFullscreen(),
setTitle: (title: string) => get().setTitle(title),
minimize: () => get().minimize(),
maximize: () => get().maximize(),
close: () => get().close(),
toggleFullscreen: () => get().toggleFullscreen(),
setDiscordPresence: (p: DiscordPresence) => get().setDiscordPresence(p),
clearDiscordPresence: () => get().clearDiscordPresence(),
setDiscordPresence: (p: DiscordPresence) => get().setDiscordPresence(p),
clearDiscordPresence: () => get().clearDiscordPresence(),
getVersion: () => get().getVersion(),
openExternal: (url: string) => get().openExternal(url),
checkForAppUpdate: () => get().checkForAppUpdate(),
installAppUpdate: () => get().installAppUpdate(),
getVersion: () => get().getVersion(),
openExternal: (url: string) => get().openExternal(url),
checkForAppUpdate: () => get().checkForAppUpdate(),
installAppUpdate: (tag: string) => get().installAppUpdate(tag),
restartApp: () => get().restartApp(),
getDefaultDownloadsPath: () => get().getDefaultDownloadsPath(),
getStorageInfo: (downloadsPath: string) => get().getStorageInfo(downloadsPath),
checkPathExists: (path: string) => get().checkPathExists(path),
createDirectory: (path: string) => get().createDirectory(path),
openPath: (path: string) => get().openPath(path),
getAutoBackupDir: () => get().getAutoBackupDir(),
clearMokuCache: () => get().clearMokuCache(),
clearSuwayomiCache: () => get().clearSuwayomiCache(),
resetSuwayomiData: () => get().resetSuwayomiData(),
exitApp: () => get().exitApp(),
listReleases: () => get().listReleases(),
onUpdateProgress: (cb: (p: UpdateProgress) => void) => get().onUpdateProgress(cb),
onUpdateLaunching: (cb: () => void) => get().onUpdateLaunching(cb),
onMigrateProgress: (cb: (p: MigrateProgress) => void) => get().onMigrateProgress(cb),
migrateDownloads: (src: string, dst: string) => get().migrateDownloads(src, dst),
}
src/lib/request-manager/chapters.ts
+53 -43
View File
@@ -1,57 +1,67 @@
import { getAdapter } from '$lib/request-manager'
import { seriesState } from '$lib/state/series.svelte'
import { readerState } from '$lib/state/reader.svelte'
import { getAdapter } from "$lib/request-manager";
import { seriesState } from "$lib/state/series.svelte";
import { readerState } from "$lib/state/reader.svelte";
import type { Chapter } from "$lib/types";
export async function loadChapters(mangaId: string) {
seriesState.chaptersLoading = true
seriesState.chaptersError = null
try {
seriesState.chapters = await getAdapter().getChapters(mangaId)
} catch (e) {
seriesState.chaptersError = String(e)
} finally {
seriesState.chaptersLoading = false
}
export async function getChapters(mangaId: number, signal?: AbortSignal): Promise<Chapter[]> {
return getAdapter().getChapters(String(mangaId), signal);
}
export async function fetchChapters(mangaId: string) {
seriesState.chaptersLoading = true
seriesState.chaptersError = null
export async function fetchChapters(mangaId: number, signal?: AbortSignal): Promise<Chapter[]> {
return getAdapter().fetchChapters(String(mangaId), signal);
}
export async function loadChapters(mangaId: string) {
seriesState.chaptersLoading = true;
seriesState.chaptersError = null;
try {
seriesState.chapters = await getAdapter().fetchChapters(mangaId)
seriesState.chapters = await getAdapter().getChapters(mangaId);
} catch (e) {
seriesState.chaptersError = String(e)
seriesState.chaptersError = String(e);
} finally {
seriesState.chaptersLoading = false
seriesState.chaptersLoading = false;
}
}
export async function loadChapterPages(chapterId: string, signal?: AbortSignal) {
readerState.pagesLoading = true
readerState.pagesError = null
readerState.pagesLoading = true;
readerState.pagesError = null;
try {
readerState.pages = await getAdapter().getChapterPages(chapterId, signal)
readerState.pages = await getAdapter().getChapterPages(chapterId, signal);
} catch (e) {
if (e instanceof DOMException && e.name === 'AbortError') return
readerState.pagesError = String(e)
if (e instanceof DOMException && e.name === "AbortError") return;
readerState.pagesError = String(e);
} finally {
readerState.pagesLoading = false
readerState.pagesLoading = false;
}
}
export async function markChapterRead(id: number, read: boolean) {
await getAdapter().markChapterRead(String(id), read);
const chapter = seriesState.chapters.find(c => c.id === id);
if (chapter) chapter.read = read;
}
export async function markChaptersRead(ids: number[], read: boolean) {
await getAdapter().markChaptersRead(ids.map(String), read);
const idSet = new Set(ids);
for (const c of seriesState.chapters) {
if (idSet.has(c.id)) c.read = read;
}
}
export async function markRead(id: string, read: boolean) {
await getAdapter().markChapterRead(id, read)
// chapter.id is a number; route params arrive as strings — compare via Number()
const numId = Number(id)
const chapter = seriesState.chapters.find(c => c.id === numId)
if (chapter) chapter.read = read
await getAdapter().markChapterRead(id, read);
const numId = Number(id);
const chapter = seriesState.chapters.find(c => c.id === numId);
if (chapter) chapter.read = read;
}
export async function markManyRead(ids: string[], read: boolean) {
await getAdapter().markChaptersRead(ids, read)
const numIds = new Set(ids.map(Number))
await getAdapter().markChaptersRead(ids, read);
const numIds = new Set(ids.map(Number));
for (const c of seriesState.chapters) {
if (numIds.has(c.id)) c.read = read
if (numIds.has(c.id)) c.read = read;
}
}
@@ -59,20 +69,20 @@ export async function updateChaptersProgress(
ids: string[],
patch: { isRead?: boolean; isBookmarked?: boolean; lastPageRead?: number },
) {
await getAdapter().updateChaptersProgress(ids, patch)
const numIds = new Set(ids.map(Number))
await getAdapter().updateChaptersProgress(ids, patch);
const numIds = new Set(ids.map(Number));
for (const c of seriesState.chapters) {
if (!numIds.has(c.id)) continue
if (patch.isRead !== undefined) c.read = patch.isRead
if (patch.isBookmarked !== undefined) c.bookmarked = patch.isBookmarked
if (patch.lastPageRead !== undefined) c.lastPageRead = patch.lastPageRead
if (!numIds.has(c.id)) continue;
if (patch.isRead !== undefined) c.read = patch.isRead;
if (patch.isBookmarked !== undefined) c.bookmarked = patch.isBookmarked;
if (patch.lastPageRead !== undefined) c.lastPageRead = patch.lastPageRead;
}
}
export async function deleteDownloadedChapters(ids: string[]) {
await getAdapter().deleteDownloadedChapters(ids)
const numIds = new Set(ids.map(Number))
export async function deleteDownloadedChapters(ids: number[]) {
await getAdapter().deleteDownloadedChapters(ids.map(String));
const idSet = new Set(ids);
for (const c of seriesState.chapters) {
if (numIds.has(c.id)) c.downloaded = false
if (idSet.has(c.id)) c.downloaded = false;
}
}
src/lib/request-manager/downloads.ts
+17 -17
View File
@@ -1,44 +1,44 @@
import { getAdapter } from '$lib/request-manager'
import { downloadsState } from '$lib/state/downloads.svelte'
import { getAdapter } from "$lib/request-manager";
import { downloadsState } from "$lib/state/downloads.svelte";
export async function loadDownloads() {
try {
downloadsState.items = await getAdapter().getDownloads()
downloadsState.items = await getAdapter().getDownloads();
} catch (e) {
downloadsState.error = String(e)
downloadsState.error = String(e);
}
}
export async function enqueueDownload(chapterId: string) {
await getAdapter().enqueueDownload(chapterId)
await loadDownloads()
await getAdapter().enqueueDownload(chapterId);
await loadDownloads();
}
export async function enqueueDownloads(chapterIds: string[]) {
await getAdapter().enqueueDownloads(chapterIds)
await loadDownloads()
await getAdapter().enqueueDownloads(chapterIds);
await loadDownloads();
}
export async function dequeueDownload(chapterId: string) {
await getAdapter().dequeueDownload(chapterId)
downloadsState.items = downloadsState.items.filter(d => d.chapterId !== chapterId)
await getAdapter().dequeueDownload(chapterId);
downloadsState.items = downloadsState.items.filter(d => d.chapterId !== chapterId);
}
export async function dequeueDownloads(chapterIds: string[]) {
const ids = new Set(chapterIds)
await getAdapter().dequeueDownloads(chapterIds)
downloadsState.items = downloadsState.items.filter(d => !ids.has(d.chapterId))
const ids = new Set(chapterIds);
await getAdapter().dequeueDownloads(chapterIds);
downloadsState.items = downloadsState.items.filter(d => !ids.has(d.chapterId));
}
export async function clearDownloads() {
await getAdapter().clearDownloads()
downloadsState.items = []
await getAdapter().clearDownloads();
downloadsState.items = [];
}
export async function startDownloader() {
await getAdapter().startDownloader()
await getAdapter().startDownloader();
}
export async function stopDownloader() {
await getAdapter().stopDownloader()
await getAdapter().stopDownloader();
}
src/lib/request-manager/extensions.ts
+33 -33
View File
@@ -1,80 +1,80 @@
import { getAdapter } from '$lib/request-manager'
import { extensionsState } from '$lib/state/extensions.svelte'
import type { SetServerAuthInput, SetSocksProxyInput, SetFlareSolverrInput } from '$lib/server-adapters/types'
import { getAdapter } from "$lib/request-manager";
import { extensionsState } from "$lib/state/extensions.svelte";
import type { SetServerAuthInput, SetSocksProxyInput, SetFlareSolverrInput } from "$lib/server-adapters/types";
export async function loadExtensions() {
extensionsState.loading = true
extensionsState.error = null
extensionsState.loading = true;
extensionsState.error = null;
try {
extensionsState.items = await getAdapter().getExtensions()
extensionsState.items = await getAdapter().getExtensions();
} catch (e) {
extensionsState.error = String(e)
extensionsState.error = String(e);
} finally {
extensionsState.loading = false
extensionsState.loading = false;
}
}
export async function loadSources() {
try {
extensionsState.sources = await getAdapter().getSources()
extensionsState.sources = await getAdapter().getSources();
} catch (e) {
extensionsState.error = String(e)
extensionsState.error = String(e);
}
}
export async function installExtension(id: string) {
await getAdapter().installExtension(id)
await loadExtensions()
await getAdapter().installExtension(id);
await loadExtensions();
}
export async function installExternalExtension(url: string) {
await getAdapter().installExternalExtension(url)
await loadExtensions()
await getAdapter().installExternalExtension(url);
await loadExtensions();
}
export async function uninstallExtension(id: string) {
await getAdapter().uninstallExtension(id)
extensionsState.items = extensionsState.items.filter(e => e.id !== id)
await getAdapter().uninstallExtension(id);
extensionsState.items = extensionsState.items.filter(e => e.id !== id);
}
export async function updateExtension(id: string) {
await getAdapter().updateExtension(id)
await loadExtensions()
await getAdapter().updateExtension(id);
await loadExtensions();
}
export async function updateAllExtensions() {
const updatable = extensionsState.items.filter(e => e.hasUpdate).map(e => e.id)
if (!updatable.length) return
await getAdapter().updateExtensions(updatable)
await loadExtensions()
const updatable = extensionsState.items.filter(e => e.hasUpdate).map(e => e.id);
if (!updatable.length) return;
await getAdapter().updateExtensions(updatable);
await loadExtensions();
}
export async function browseSource(sourceId: string, page: number) {
extensionsState.browseLoading = true
extensionsState.browseError = null
extensionsState.browseLoading = true;
extensionsState.browseError = null;
try {
const result = await getAdapter().browseSource(sourceId, page)
extensionsState.browseResults = result.items
extensionsState.browseHasMore = result.hasNextPage
const result = await getAdapter().browseSource(sourceId, page);
extensionsState.browseResults = result.items;
extensionsState.browseHasMore = result.hasNextPage;
} catch (e) {
extensionsState.browseError = String(e)
extensionsState.browseError = String(e);
} finally {
extensionsState.browseLoading = false
extensionsState.browseLoading = false;
}
}
export async function getServerSecurity() {
return getAdapter().getServerSecurity()
return getAdapter().getServerSecurity();
}
export async function setServerAuth(input: SetServerAuthInput) {
await getAdapter().setServerAuth(input)
await getAdapter().setServerAuth(input);
}
export async function setSocksProxy(input: SetSocksProxyInput) {
await getAdapter().setSocksProxy(input)
await getAdapter().setSocksProxy(input);
}
export async function setFlareSolverr(input: SetFlareSolverrInput) {
await getAdapter().setFlareSolverr(input)
await getAdapter().setFlareSolverr(input);
}
src/lib/request-manager/index.ts
+12 -12
View File
@@ -1,23 +1,23 @@
import type { ServerAdapter } from '$lib/server-adapters/types'
import * as extensions from './extensions'
import * as chapters from './chapters'
import * as downloads from './downloads'
import * as manga from './manga'
import * as tracking from './tracking'
import type { ServerAdapter } from "$lib/server-adapters/types";
import * as extensions from "./extensions";
import * as chapters from "./chapters";
import * as downloads from "./downloads";
import * as manga from "./manga";
import * as tracking from "./tracking";
let adapter: ServerAdapter
let adapter: ServerAdapter;
export function initRequestManager(a: ServerAdapter) {
adapter = a
adapter = a;
}
export function getAdapter(): ServerAdapter {
if (!adapter) throw new Error('RequestManager not initialized')
return adapter
if (!adapter) throw new Error("RequestManager not initialized");
return adapter;
}
export function clearPageCache(chapterId?: number): void {
getAdapter().clearPageCache(chapterId)
getAdapter().clearPageCache(chapterId);
}
export const requestManager = {
@@ -26,4 +26,4 @@ export const requestManager = {
downloads,
manga,
tracking,
}
};
src/lib/request-manager/manga.ts
+77 -55
View File
@@ -1,131 +1,153 @@
import { getAdapter } from '$lib/request-manager'
import { libraryState } from '$lib/state/library.svelte'
import { toast } from '$lib/state/notifications.svelte'
import { seriesState } from '$lib/state/series.svelte'
import type { MangaFilters, MangaMeta } from '$lib/server-adapters/types'
import { getAdapter } from "$lib/request-manager";
import { libraryState } from "$lib/state/library.svelte";
import { addToast } from "$lib/state/notifications.svelte";
import { seriesState } from "$lib/state/series.svelte";
import type { MangaFilters, MangaMeta } from "$lib/server-adapters/types";
import type { Manga, Chapter, Category } from "$lib/types";
export async function loadLibrary(filters: MangaFilters = { inLibrary: true }) {
libraryState.loading = true
libraryState.error = null
libraryState.loading = true;
libraryState.error = null;
try {
const result = await getAdapter().getMangaList(filters)
libraryState.items = result.items
const result = await getAdapter().getMangaList(filters);
libraryState.items = result.items;
} catch (e) {
libraryState.error = String(e)
libraryState.error = String(e);
} finally {
libraryState.loading = false
libraryState.loading = false;
}
}
export async function getManga(id: number, signal?: AbortSignal): Promise<Manga> {
return getAdapter().getManga(String(id), signal);
}
export async function getMangaList(): Promise<Manga[]> {
const result = await getAdapter().getMangaList({});
return result.items;
}
export async function getCategories(): Promise<Category[]> {
return getAdapter().getCategories();
}
export async function updateManga(id: number, patch: { inLibrary?: boolean }): Promise<void> {
if (patch.inLibrary === true) await getAdapter().addToLibrary(String(id));
if (patch.inLibrary === false) await getAdapter().removeFromLibrary(String(id));
}
export async function loadManga(id: string) {
seriesState.loading = true
seriesState.error = null
seriesState.loading = true;
seriesState.error = null;
try {
seriesState.current = await getAdapter().getManga(id)
seriesState.current = await getAdapter().getManga(id);
} catch (e) {
seriesState.error = String(e)
seriesState.error = String(e);
} finally {
seriesState.loading = false
seriesState.loading = false;
}
}
export async function fetchManga(id: string) {
seriesState.loading = true
seriesState.error = null
seriesState.loading = true;
seriesState.error = null;
try {
seriesState.current = await getAdapter().fetchManga(id)
seriesState.current = await getAdapter().fetchManga(id);
} catch (e) {
seriesState.error = String(e)
seriesState.error = String(e);
} finally {
seriesState.loading = false
seriesState.loading = false;
}
}
export async function searchManga(query: string, sourceId?: string) {
libraryState.loading = true
libraryState.error = null
libraryState.loading = true;
libraryState.error = null;
try {
libraryState.searchResults = await getAdapter().searchManga(query, sourceId)
(libraryState as any).searchResults = await getAdapter().searchManga(query, sourceId);
} catch (e) {
libraryState.error = String(e)
libraryState.error = String(e);
} finally {
libraryState.loading = false
libraryState.loading = false;
}
}
export async function addToLibrary(mangaId: string) {
await getAdapter().addToLibrary(mangaId)
await loadLibrary()
await getAdapter().addToLibrary(mangaId);
await loadLibrary();
}
export async function removeFromLibrary(mangaId: string) {
await getAdapter().removeFromLibrary(mangaId)
libraryState.items = libraryState.items.filter(m => String(m.id) !== mangaId)
await getAdapter().removeFromLibrary(mangaId);
libraryState.items = libraryState.items.filter(m => String(m.id) !== mangaId);
}
export async function updateMangaMeta(id: string, meta: Partial<MangaMeta>) {
await getAdapter().updateMangaMeta(id, meta)
if (String(seriesState.current?.id) === id) await loadManga(id)
await getAdapter().updateMangaMeta(id, meta);
if (String(seriesState.current?.id) === id) await loadManga(id);
}
export async function deleteMangaMeta(id: string, key: string) {
await getAdapter().deleteMangaMeta(id, key)
if (String(seriesState.current?.id) === id) await loadManga(id)
await getAdapter().deleteMangaMeta(id, key);
if (String(seriesState.current?.id) === id) await loadManga(id);
}
export async function refreshLibrary() {
libraryState.refreshing = true
libraryState.refreshing = true;
try {
await getAdapter().checkForUpdates()
await loadLibrary()
toast({ kind: 'success', message: 'Library updated' })
await getAdapter().checkForUpdates();
await loadLibrary();
addToast({ kind: "success", title: "Library updated" });
} catch (e) {
toast({ kind: 'error', message: 'Update failed', detail: String(e) })
addToast({ kind: "error", title: "Update failed", body: String(e) });
} finally {
libraryState.refreshing = false
libraryState.refreshing = false;
}
}
export async function stopLibraryUpdate() {
await getAdapter().stopLibraryUpdate()
await getAdapter().stopLibraryUpdate();
}
export async function pollLibraryUpdateStatus() {
return getAdapter().getLibraryUpdateStatus()
return getAdapter().getLibraryUpdateStatus();
}
export async function bulkRemoveFromLibrary(ids: Set<number>) {
await Promise.allSettled([...ids].map(id => getAdapter().removeFromLibrary(String(id))))
libraryState.items = libraryState.items.filter(m => !ids.has(m.id))
libraryState.exitSelect()
await Promise.allSettled([...ids].map(id => getAdapter().removeFromLibrary(String(id))));
libraryState.items = libraryState.items.filter(m => !ids.has(m.id));
libraryState.exitSelect();
}
export async function loadCategories() {
try {
libraryState.categories = await getAdapter().getCategories()
const cats = await getAdapter().getCategories();
libraryState.setCategories(cats);
} catch (e) {
libraryState.error = String(e)
libraryState.error = String(e);
}
}
export async function createCategory(name: string) {
const category = await getAdapter().createCategory(name)
libraryState.categories = [...libraryState.categories, category]
export async function createCategory(name: string): Promise<Category> {
const category = await getAdapter().createCategory(name);
libraryState.setCategories([...libraryState.categories, category]);
return category;
}
export async function deleteCategory(id: number) {
await getAdapter().deleteCategory(id)
libraryState.categories = libraryState.categories.filter(c => c.id !== id)
await getAdapter().deleteCategory(id);
libraryState.setCategories(libraryState.categories.filter(c => c.id !== id));
}
export async function updateCategoryOrder(id: number, position: number) {
libraryState.categories = await getAdapter().updateCategoryOrder(id, position)
const cats = await getAdapter().updateCategoryOrder(id, position);
libraryState.setCategories(cats);
}
export async function updateMangaCategories(mangaId: string, addTo: number[], removeFrom: number[]) {
await getAdapter().updateMangaCategories(mangaId, addTo, removeFrom)
await getAdapter().updateMangaCategories(mangaId, addTo, removeFrom);
}
export async function updateMangasCategories(mangaIds: string[], addTo: number[], removeFrom: number[]) {
await getAdapter().updateMangasCategories(mangaIds, addTo, removeFrom)
await getAdapter().updateMangasCategories(mangaIds, addTo, removeFrom);
}
src/lib/request-manager/tracking.ts
+24 -24
View File
@@ -1,57 +1,57 @@
import { getAdapter } from '$lib/request-manager'
import { trackingState } from '$lib/state/tracking.svelte'
import { getAdapter } from "$lib/request-manager";
import { trackingState } from "$lib/state/tracking.svelte";
export async function loadTrackers() {
trackingState.loading = true
trackingState.error = null
trackingState.loading = true;
trackingState.error = null;
try {
trackingState.trackers = await getAdapter().getTrackers()
trackingState.trackers = await getAdapter().getTrackers();
} catch (e) {
trackingState.error = String(e)
trackingState.error = String(e);
} finally {
trackingState.loading = false
trackingState.loading = false;
}
}
export async function loadMangaTrackRecords(mangaId: string) {
trackingState.recordsLoading = true
trackingState.recordsError = null
trackingState.recordsLoading = true;
trackingState.recordsError = null;
try {
trackingState.records = await getAdapter().getMangaTrackRecords(mangaId)
trackingState.records = await getAdapter().getMangaTrackRecords(mangaId);
} catch (e) {
trackingState.recordsError = String(e)
trackingState.recordsError = String(e);
} finally {
trackingState.recordsLoading = false
trackingState.recordsLoading = false;
}
}
export async function searchTracker(trackerId: string, query: string) {
trackingState.searchLoading = true
trackingState.searchError = null
trackingState.searchLoading = true;
trackingState.searchError = null;
try {
trackingState.searchResults = await getAdapter().searchTracker(trackerId, query)
trackingState.searchResults = await getAdapter().searchTracker(trackerId, query);
} catch (e) {
trackingState.searchError = String(e)
trackingState.searchError = String(e);
} finally {
trackingState.searchLoading = false
trackingState.searchLoading = false;
}
}
export async function linkTracker(mangaId: string, trackerId: string, remoteId: string) {
await getAdapter().linkTracker(mangaId, trackerId, remoteId)
await loadMangaTrackRecords(mangaId)
await getAdapter().linkTracker(mangaId, trackerId, remoteId);
await loadMangaTrackRecords(mangaId);
}
export async function unlinkTracker(mangaId: string, recordId: string) {
await getAdapter().unlinkTracker(recordId)
await loadMangaTrackRecords(mangaId)
await getAdapter().unlinkTracker(recordId);
await loadMangaTrackRecords(mangaId);
}
export async function syncTracking(mangaId: string) {
trackingState.syncing = true
trackingState.syncing = true;
try {
await getAdapter().syncTracking(mangaId)
await getAdapter().syncTracking(mangaId);
} finally {
trackingState.syncing = false
trackingState.syncing = false;
}
}
src/lib/server-adapters/suwayomi/types.ts
+1 -1
View File
@@ -87,6 +87,6 @@ export function mapCategory(raw: Record<string, unknown>): Category {
default: raw.default as boolean,
includeInUpdate: raw.includeInUpdate as boolean,
includeInDownload: raw.includeInDownload as boolean,
mangas: (raw.mangas as { nodes: Record<string, unknown>[] })?.nodes?.map(mapManga),
mangas: { nodes: (raw.mangas as { nodes: Record<string, unknown>[] })?.nodes?.map(mapManga) ?? [] },
}
}
src/lib/state/app.svelte.ts
+4
View File
@@ -35,6 +35,10 @@ export const appState = $state({
authMode: 'NONE' as 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
platform: 'web' as 'web' | 'tauri' | 'capacitor',
version: '',
libraryFilter: '',
categories: [] as { id: number; name: string }[],
history: [] as unknown[],
toasts: [] as unknown[],
})
export function setNavPage(next: NavPage) { app.setNavPage(next) }
src/lib/state/downloads.svelte.ts
+5 -5
View File
@@ -1,18 +1,18 @@
import type { DownloadItem } from '$lib/server-adapters/types'
import type { DownloadItem } from "$lib/server-adapters/types";
export const downloadsState = $state({
items: [] as DownloadItem[],
error: null as string | null,
})
});
export function activeDownloads() {
return downloadsState.items.filter(d => d.state === 'downloading')
return downloadsState.items.filter(d => d.state === "downloading");
}
export function queuedDownloads() {
return downloadsState.items.filter(d => d.state === 'queued')
return downloadsState.items.filter(d => d.state === "queued");
}
export function downloadCount() {
return downloadsState.items.length
return downloadsState.items.length;
}
src/lib/state/extensions.svelte.ts
+17 -16
View File
@@ -1,36 +1,37 @@
import type { Extension, Source, Manga } from '$lib/types'
import type { Extension, Source, Manga } from "$lib/types";
export const extensionsState = $state({
items: [] as Extension[],
sources: [] as Source[],
loading: false,
error: null as string | null,
items: [] as Extension[],
sources: [] as Source[],
activeSource: null as Source | null,
loading: false,
error: null as string | null,
filter: {
query: '',
query: "",
installed: false,
language: 'all',
language: "all",
},
browseResults: [] as Manga[],
browseLoading: false,
browseError: null as string | null,
browseError: null as string | null,
browseHasMore: false,
})
});
export function filteredExtensions() {
let result = extensionsState.items
let result = extensionsState.items;
if (extensionsState.filter.installed) {
result = result.filter(e => e.installed)
result = result.filter(e => e.installed);
}
if (extensionsState.filter.language !== 'all') {
result = result.filter(e => e.lang === extensionsState.filter.language)
if (extensionsState.filter.language !== "all") {
result = result.filter(e => e.lang === extensionsState.filter.language);
}
if (extensionsState.filter.query) {
const q = extensionsState.filter.query.toLowerCase()
result = result.filter(e => e.name.toLowerCase().includes(q))
const q = extensionsState.filter.query.toLowerCase();
result = result.filter(e => e.name.toLowerCase().includes(q));
}
return result
return result;
}
src/lib/state/home.svelte.ts
+23 -23
View File
@@ -1,42 +1,42 @@
export interface HistoryEntry {
mangaId: number
mangaTitle: string
thumbnailUrl: string
chapterId: number
chapterName: string
chapterNumber: number
pageNumber: number
readAt: number
mangaId: number;
mangaTitle: string;
thumbnailUrl: string;
chapterId: number;
chapterName: string;
chapterNumber: number;
pageNumber: number;
readAt: number;
}
export interface ReadingStats {
currentStreakDays: number
totalChaptersRead: number
totalMinutesRead: number
totalMangaRead: number
longestStreakDays: number
currentStreakDays: number;
totalChaptersRead: number;
totalMinutesRead: number;
totalMangaRead: number;
longestStreakDays: number;
}
export const homeState = $state({
history: [] as HistoryEntry[],
dailyReadCounts: {} as Record<string, number>,
stats: {
currentStreakDays: 0,
totalChaptersRead: 0,
totalMinutesRead: 0,
totalMangaRead: 0,
currentStreakDays: 0,
totalChaptersRead: 0,
totalMinutesRead: 0,
totalMangaRead: 0,
longestStreakDays: 0,
} as ReadingStats,
heroSlots: [null, null, null, null] as [number | null, number | null, number | null, number | null],
})
});
export function setHeroSlot(i: 1 | 2 | 3, mangaId: number | null) {
homeState.heroSlots[i] = mangaId
homeState.heroSlots[i] = mangaId;
}
export function recordRead(entry: HistoryEntry) {
homeState.history = [entry, ...homeState.history.filter(e => e.chapterId !== entry.chapterId)]
const dateStr = new Date(entry.readAt).toISOString().slice(0, 10)
homeState.dailyReadCounts[dateStr] = (homeState.dailyReadCounts[dateStr] ?? 0) + 1
homeState.stats.totalChaptersRead++
homeState.history = [entry, ...homeState.history.filter(e => e.chapterId !== entry.chapterId)];
const dateStr = new Date(entry.readAt).toISOString().slice(0, 10);
homeState.dailyReadCounts[dateStr] = (homeState.dailyReadCounts[dateStr] ?? 0) + 1;
homeState.stats.totalChaptersRead++;
}
src/lib/state/library.svelte.ts
+215 -62
View File
@@ -1,89 +1,242 @@
import type { Manga } from '$lib/types'
import type { MangaStatus } from '$lib/server-adapters/types'
import type { Manga } from "$lib/types";
import type { MangaStatus } from "$lib/server-adapters/types";
import type { Category } from "$lib/types";
export type LibrarySortOption = 'alphabetical' | 'unread' | 'lastRead' | 'dateAdded'
export type LibraryTab = 'saved' | 'downloaded'
export type LibrarySortOption =
| "alphabetical"
| "unread"
| "lastRead"
| "dateAdded"
| "totalChapters"
| "latestFetched"
| "latestUploaded";
export type LibrarySortDir = "asc" | "desc";
export type LibraryContentFilter = "unread" | "started" | "downloaded" | "bookmarked";
export type LibraryStatusFilter =
| "ALL"
| "ONGOING"
| "COMPLETED"
| "ON_HIATUS"
| "CANCELLED"
| "PUBLISHING_FINISHED";
class LibraryState {
items = $state<Manga[]>([])
loading = $state(false)
error = $state<string | null>(null)
refreshing = $state(false)
items = $state<Manga[]>([]);
categories = $state<Category[]>([]);
loading = $state(false);
error = $state<string | null>(null);
refreshing = $state(false);
tab = $state<LibraryTab>('saved')
sort = $state<LibrarySortOption>('alphabetical')
sortDesc = $state(false)
tab = $state<string>("library");
filter = $state({
status: 'all' as MangaStatus | 'all',
unread: false,
downloaded: false,
bookmarked: false,
query: '',
})
tabSort = $state<Record<string, { mode: LibrarySortOption; dir: LibrarySortDir }>>({});
tabStatus = $state<Record<string, LibraryStatusFilter>>({});
tabFilters = $state<Record<string, Partial<Record<LibraryContentFilter, boolean>>>>({});
selected = $state(new Set<number>())
selectMode = $state(false)
hiddenTabs = $state<Set<string>>(new Set());
pinnedTabOrder = $state<string[]>([]);
defaultCategoryId = $state<number | null>(null);
showAllInSaved = $state(true);
hideCompletedInSaved = $state(false);
categoryFrecency = $state<Record<number, number>>({});
filter = $state({ query: "" });
selected = $state(new Set<number>());
selectMode = $state(false);
refreshProgress = $state({ finished: 0, total: 0 });
refreshDone = $state(false);
refreshingMangaId = $state<number | null>(null);
refreshingCatId = $state<number | null>(null);
readonly COMPLETED_NAME = "Completed";
get completedCatId(): number | null {
return this.categories.find(c => c.name === this.COMPLETED_NAME && c.id !== 0)?.id ?? null;
}
get categoryMangaMap(): Map<number, Manga[]> {
const map = new Map<number, Manga[]>();
for (const cat of this.categories) {
map.set(cat.id, (cat as any).mangas?.nodes ?? []);
}
return map;
}
get allTabIds(): string[] {
const catIds = this.categories.filter(c => c.id !== 0).map(c => String(c.id));
const BUILTIN = ["library", "downloaded"];
const known = new Set([...BUILTIN, ...catIds]);
const ordered: string[] = [];
const inOrder = new Set<string>();
for (const id of this.pinnedTabOrder) {
if (known.has(id) && !inOrder.has(id)) { ordered.push(id); inOrder.add(id); }
}
for (const id of [...BUILTIN, ...catIds]) {
if (!inOrder.has(id)) { ordered.push(id); inOrder.add(id); }
}
return ordered;
}
get visibleTabIds(): string[] {
return this.allTabIds.filter(id => !this.hiddenTabs.has(id));
}
get visibleCategories(): Category[] {
const pinned = this.pinnedTabOrder;
const defId = this.defaultCategoryId;
const cats = this.categories.filter(c => c.id !== 0 && !this.hiddenTabs.has(String(c.id)));
const pinOrder = (id: number) => { const i = pinned.indexOf(String(id)); return i === -1 ? Infinity : i; };
return [...cats].sort((a, b) => {
if (a.id === defId) return -1;
if (b.id === defId) return 1;
const pd = pinOrder(a.id) - pinOrder(b.id);
return pd !== 0 ? pd : (a as any).order - (b as any).order;
});
}
get counts(): Record<string, number> {
const m: Record<string, number> = {
library: this.showAllInSaved
? this.items.filter(x => x.inLibrary).length
: (this.categoryMangaMap.get(0) ?? []).length,
downloaded: this.items.filter(x => (x.downloadCount ?? 0) > 0).length,
};
for (const cat of this.visibleCategories) {
m[String(cat.id)] = (this.categoryMangaMap.get(cat.id) ?? []).length;
}
return m;
}
filteredItems = $derived.by(() => {
let result = this.tab === 'downloaded'
? this.items.filter(m => (m.downloadCount ?? 0) > 0)
: this.items.filter(m => m.inLibrary)
const tab = this.tab;
if (this.filter.unread) result = result.filter(m => (m.unreadCount ?? 0) > 0)
if (this.filter.downloaded) result = result.filter(m => (m.downloadCount ?? 0) > 0)
if (this.filter.bookmarked) result = result.filter(m => (m.bookmarkCount ?? 0) > 0)
let items: Manga[];
if (tab === "library") {
items = this.showAllInSaved
? this.items.filter(m => m.inLibrary)
: (this.categoryMangaMap.get(0) ?? []);
if (this.filter.status !== 'all') {
result = result.filter(
m => m.status?.toUpperCase().replace(/\s+/g, '_') === this.filter.status
)
}
if (this.filter.query) {
const q = this.filter.query.toLowerCase()
result = result.filter(m => m.title.toLowerCase().includes(q))
}
const sorted = [...result].sort((a, b) => {
switch (this.sort) {
case 'unread': return (b.unreadCount ?? 0) - (a.unreadCount ?? 0)
case 'lastRead': return (b.lastReadAt ?? 0) - (a.lastReadAt ?? 0)
case 'dateAdded': return (b.addedAt ?? 0) - (a.addedAt ?? 0)
default: return a.title.localeCompare(b.title)
if (this.showAllInSaved && this.hideCompletedInSaved) {
const completedCat = this.categories.find(c => c.name === this.COMPLETED_NAME);
if (completedCat) {
const completedIds = new Set((this.categoryMangaMap.get(completedCat.id) ?? []).map(m => m.id));
items = items.filter(m => !completedIds.has(m.id));
}
}
})
} else if (tab === "downloaded") {
items = this.items.filter(m => (m.downloadCount ?? 0) > 0);
} else {
items = this.categoryMangaMap.get(Number(tab)) ?? [];
}
return this.sortDesc ? sorted.reverse() : sorted
})
const q = this.filter.query.trim().toLowerCase();
if (q) items = items.filter(m => m.title.toLowerCase().includes(q));
get hasActiveFilters() {
return this.filter.status !== 'all'
|| this.filter.unread
|| this.filter.downloaded
|| this.filter.bookmarked
const status = this.tabStatus[tab] ?? "ALL";
if (status !== "ALL") {
items = items.filter(m => {
const s = m.status?.toUpperCase().replace(/\s+/g, "_") ?? "UNKNOWN";
return s === status;
});
}
const f = this.tabFilters[tab] ?? {};
if (f.unread) items = items.filter(m => (m.unreadCount ?? 0) > 0);
if (f.started) items = items.filter(m => (m.unreadCount ?? 0) > 0 && (m.chapters?.totalCount ?? 0) > (m.unreadCount ?? 0));
if (f.downloaded) items = items.filter(m => (m.downloadCount ?? 0) > 0);
if (f.bookmarked) items = items.filter(m => (m.bookmarkCount ?? 0) > 0);
const { mode, dir } = this.tabSort[tab] ?? { mode: "alphabetical" as LibrarySortOption, dir: "asc" as LibrarySortDir };
const sorted = [...items].sort((a, b) => {
switch (mode) {
case "unread": return (b.unreadCount ?? 0) - (a.unreadCount ?? 0);
case "lastRead": return (b.lastReadAt ?? 0) - (a.lastReadAt ?? 0);
case "dateAdded": return (b.addedAt ?? 0) - (a.addedAt ?? 0);
case "totalChapters": return (b.chapters?.totalCount ?? 0) - (a.chapters?.totalCount ?? 0);
case "latestFetched": return Number(b.latestFetchedChapter?.uploadDate ?? 0) - Number(a.latestFetchedChapter?.uploadDate ?? 0);
case "latestUploaded": return Number(b.latestUploadedChapter?.uploadDate ?? 0) - Number(a.latestUploadedChapter?.uploadDate ?? 0);
default: return a.title.localeCompare(b.title);
}
});
return dir === "desc" ? sorted.reverse() : sorted;
});
get hasActiveFilters(): boolean {
const tab = this.tab;
const status = this.tabStatus[tab] ?? "ALL";
const filters = this.tabFilters[tab] ?? {};
return status !== "ALL" || Object.values(filters).some(Boolean);
}
setTabSort(tab: string, mode: LibrarySortOption, dir?: LibrarySortDir) {
const prev = this.tabSort[tab];
const newDir = dir ?? prev?.dir ?? "asc";
this.tabSort = { ...this.tabSort, [tab]: { mode, dir: newDir } };
}
toggleTabSortDir(tab: string) {
const prev = this.tabSort[tab];
const mode = prev?.mode ?? "alphabetical";
const dir = prev?.dir === "asc" ? "desc" : "asc";
this.setTabSort(tab, mode, dir);
}
setTabStatus(tab: string, status: LibraryStatusFilter) {
this.tabStatus = { ...this.tabStatus, [tab]: status };
}
toggleTabFilter(tab: string, filter: LibraryContentFilter) {
const current = this.tabFilters[tab] ?? {};
this.tabFilters = { ...this.tabFilters, [tab]: { ...current, [filter]: !current[filter] } };
}
clearTabFilters(tab: string) {
this.tabStatus = { ...this.tabStatus, [tab]: "ALL" };
this.tabFilters = { ...this.tabFilters, [tab]: {} };
}
setCategories(cats: Category[]) {
this.categories = cats;
}
bumpCategoryFrecency(catId: number) {
this.categoryFrecency = { ...this.categoryFrecency, [catId]: (this.categoryFrecency[catId] ?? 0) + 1 };
}
enterSelect(id?: number) {
this.selectMode = true
if (id !== undefined) this.selected = new Set([id])
this.selectMode = true;
if (id !== undefined) this.selected = new Set([id]);
}
exitSelect() {
this.selectMode = false
this.selected = new Set()
this.selectMode = false;
this.selected = new Set();
}
toggleSelect(id: number) {
const next = new Set(this.selected)
if (next.has(id)) next.delete(id); else next.add(id)
this.selected = next
if (next.size === 0) this.exitSelect()
const next = new Set(this.selected);
if (next.has(id)) next.delete(id); else next.add(id);
this.selected = next;
if (next.size === 0) this.exitSelect();
}
selectAll() {
this.selected = new Set(this.filteredItems.map(m => m.id))
selectAll(ids: number[]) {
this.selected = new Set(ids);
}
guardTab() {
if (this.tab === "library" || this.tab === "downloaded") return;
const id = Number(this.tab);
if (!this.categories.some(c => c.id === id)) this.tab = "library";
}
}
export const libraryState = new LibraryState()
export const libraryState = new LibraryState();
src/lib/state/notifications.svelte.ts
+19 -20
View File
@@ -1,38 +1,37 @@
export type ToastKind = 'info' | 'success' | 'error' | 'download'
export interface Toast {
id: string
kind: ToastKind
message: string
detail?: string
duration?: number
id: string;
kind: "success" | "error" | "info" | "download";
title: string;
body?: string;
duration?: number;
}
export interface ActiveDownload {
chapterId: number
mangaId: number
progress: number
chapterId: number;
mangaId: number;
progress: number;
}
class NotificationStore {
toasts: Toast[] = $state([])
activeDownloads: ActiveDownload[] = $state([])
toasts: Toast[] = $state([]);
activeDownloads: ActiveDownload[] = $state([]);
toast(toast: Omit<Toast, 'id'>) {
this.toasts = [...this.toasts, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5)
addToast(t: Omit<Toast, "id">) {
this.toasts = [...this.toasts, { ...t, id: Math.random().toString(36).slice(2) }].slice(-5);
}
dismissToast(id: string) {
this.toasts = this.toasts.filter(x => x.id !== id)
this.toasts = this.toasts.filter(x => x.id !== id);
}
setActiveDownloads(next: ActiveDownload[]) {
this.activeDownloads = next
this.activeDownloads = next;
}
}
export const notifications = new NotificationStore()
export const notifications = new NotificationStore();
export function toast(toast: Omit<Toast, 'id'>) { notifications.toast(toast) }
export function dismissToast(id: string) { notifications.dismissToast(id) }
export function setActiveDownloads(next: ActiveDownload[]) { notifications.setActiveDownloads(next) }
export function addToast(t: Omit<Toast, "id">) { notifications.addToast(t); }
export function toast(t: Omit<Toast, "id">) { notifications.addToast(t); }
export function dismissToast(id: string) { notifications.dismissToast(id); }
export function setActiveDownloads(next: ActiveDownload[]) { notifications.setActiveDownloads(next); }
src/lib/state/reader.svelte.ts
+19 -19
View File
@@ -1,44 +1,44 @@
import type { Manga, Chapter } from '$lib/types'
import type { Page } from '$lib/server-adapters/types'
import type { Manga, Chapter } from "$lib/types";
import type { Page } from "$lib/server-adapters/types";
export type ReadMode = 'single' | 'strip'
export type FitMode = 'width' | 'height' | 'original'
export type ReadDirection = 'ltr' | 'rtl'
export type ReadMode = "single" | "strip";
export type FitMode = "width" | "height" | "original";
export type ReadDirection = "ltr" | "rtl";
export const readerState = $state({
manga: null as Manga | null,
manga: null as Manga | null,
chapter: null as Chapter | null,
chapters: [] as Chapter[],
pages: [] as Page[],
pages: [] as Page[],
pagesLoading: false,
pagesError: null as string | null,
pagesError: null as string | null,
currentPage: 0,
mode: 'single' as ReadMode,
fit: 'width' as FitMode,
direction: 'ltr' as ReadDirection,
zoom: 1,
currentPage: 0,
mode: "single" as ReadMode,
fit: "width" as FitMode,
direction: "ltr" as ReadDirection,
zoom: 1,
showControls: false,
showSettings: false,
fullscreen: false,
})
fullscreen: false,
});
export function currentPageData() {
return readerState.pages[readerState.currentPage] ?? null
return readerState.pages[readerState.currentPage] ?? null;
}
export function progress() {
return readerState.pages.length > 0
? (readerState.currentPage + 1) / readerState.pages.length
: 0
: 0;
}
export function hasPrev() {
return readerState.currentPage > 0
return readerState.currentPage > 0;
}
export function hasNext() {
return readerState.currentPage < readerState.pages.length - 1
return readerState.currentPage < readerState.pages.length - 1;
}
src/lib/state/series.svelte.ts
+126 -22
View File
@@ -1,28 +1,132 @@
import type { Manga, Chapter } from '$lib/types'
import type { Manga, Chapter } from "$lib/types";
import type { BookmarkEntry, MarkerEntry, MarkerColor } from "$lib/types/history";
import type { MangaPrefs } from "$lib/types/settings";
import { settingsState, updateSettings } from "$lib/state/settings.svelte";
import { goto } from "$app/navigation";
class SeriesState {
current = $state<Manga | null>(null)
loading = $state(false)
error = $state<string | null>(null)
export type { BookmarkEntry, MarkerEntry, MarkerColor } from "$lib/types/history";
export type { MangaPrefs } from "$lib/types/settings";
chapters = $state<Chapter[]>([])
chaptersLoading = $state(false)
chaptersError = $state<string | null>(null)
class SeriesStore {
current = $state<Manga | null>(null);
loading = $state(false);
error = $state<string | null>(null);
chapterSortDesc = $state(true)
chapterFilter = $state({ unread: false, downloaded: false, query: '' })
chapters = $state<Chapter[]>([]);
chaptersLoading = $state(false);
chaptersError = $state<string | null>(null);
filteredChapters = $derived.by(() => {
let result = this.chapters
if (this.chapterFilter.unread) result = result.filter(c => !c.read)
if (this.chapterFilter.downloaded) result = result.filter(c => c.downloaded)
if (this.chapterFilter.query) {
const q = this.chapterFilter.query.toLowerCase()
result = result.filter(c => c.name.toLowerCase().includes(q))
}
const sorted = [...result].sort((a, b) => a.chapterNumber - b.chapterNumber)
return this.chapterSortDesc ? sorted.reverse() : sorted
})
activeMangaId = $state<number | null>(null);
activeManga = $state<Manga | null>(null);
previewManga = $state<Manga | null>(null);
activeChapter = $state<Chapter | null>(null);
activeChapterList = $state<Chapter[]>([]);
bookmarks = $state<BookmarkEntry[]>([]);
markers = $state<MarkerEntry[]>([]);
acknowledgedUpdates = $state<Set<number>>(new Set());
setActiveMangaId(next: number | null) { this.activeMangaId = next; }
setActiveManga(next: Manga | null) { this.activeManga = next; }
setPreviewManga(next: Manga | null) { this.previewManga = next; }
openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
this.activeChapter = chapter;
this.activeChapterList = chapterList;
if (manga !== undefined) this.activeManga = manga;
goto(`/reader/${this.activeManga!.id}/${chapter.id}`);
}
closeReader() {
this.activeChapter = null;
this.activeChapterList = [];
}
acknowledgeUpdate(mangaId: number) {
if (this.acknowledgedUpdates.has(mangaId)) return;
this.acknowledgedUpdates = new Set([...this.acknowledgedUpdates, mangaId]);
}
addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) {
this.bookmarks = [
{ ...entry, savedAt: Date.now(), label },
...this.bookmarks.filter(b => b.chapterId !== entry.chapterId),
].slice(0, 200);
}
removeBookmark(chapterId: number) { this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId); }
clearBookmarks() { this.bookmarks = []; }
getBookmark(chapterId: number) { return this.bookmarks.find(b => b.chapterId === chapterId); }
addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string {
const id = Math.random().toString(36).slice(2);
this.markers = [...this.markers, { ...entry, id, createdAt: Date.now() }];
return id;
}
updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) {
this.markers = this.markers.map(m => m.id === id ? { ...m, ...patch, updatedAt: Date.now() } : m);
}
removeMarker(id: string) { this.markers = this.markers.filter(m => m.id !== id); }
getMarkersForPage(chapterId: number, page: number) { return this.markers.filter(m => m.chapterId === chapterId && m.pageNumber === page); }
getMarkersForChapter(chapterId: number) { return this.markers.filter(m => m.chapterId === chapterId); }
getMarkersForManga(mangaId: number) { return this.markers.filter(m => m.mangaId === mangaId); }
clearMarkersForManga(mangaId: number) { this.markers = this.markers.filter(m => m.mangaId !== mangaId); }
getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {};
return (prefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K];
}
setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) {
updateSettings({
mangaPrefs: {
...settingsState.settings.mangaPrefs,
[mangaId]: { ...(settingsState.settings.mangaPrefs?.[mangaId] ?? {}), [key]: value },
},
});
}
get settings() { return settingsState.settings; }
}
export const seriesState = new SeriesState()
export const DEFAULT_MANGA_PREFS: MangaPrefs = {
sortMode: "source",
sortDir: "asc",
preferredScanlator: "",
scanlatorFilter: [],
scanlatorBlacklist: [],
scanlatorForce: false,
autoDownload: false,
downloadAhead: 0,
maxKeepChapters: 0,
deleteOnRead: false,
deleteDelayHours: 0,
pauseUpdates: false,
refreshInterval: "global",
coverUrl: "",
};
export const seriesState = new SeriesStore();
export const seriesStore = seriesState;
export function setActiveMangaId(next: number | null) { seriesState.setActiveMangaId(next); }
export function setActiveManga(next: Manga | null) { seriesState.setActiveManga(next); }
export function setPreviewManga(next: Manga | null) { seriesState.setPreviewManga(next); }
export function openReader(ch: Chapter, list: Chapter[], manga?: Manga | null) { seriesState.openReader(ch, list, manga); }
export function closeReader() { seriesState.closeReader(); }
export function acknowledgeUpdate(mangaId: number) { seriesState.acknowledgeUpdate(mangaId); }
export function addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) { seriesState.addBookmark(entry, label); }
export function removeBookmark(chapterId: number) { seriesState.removeBookmark(chapterId); }
export function clearBookmarks() { seriesState.clearBookmarks(); }
export function getBookmark(chapterId: number) { return seriesState.getBookmark(chapterId); }
export function addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string { return seriesState.addMarker(entry); }
export function updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) { seriesState.updateMarker(id, patch); }
export function removeMarker(id: string) { seriesState.removeMarker(id); }
export function getMarkersForPage(chapterId: number, page: number) { return seriesState.getMarkersForPage(chapterId, page); }
export function getMarkersForChapter(chapterId: number) { return seriesState.getMarkersForChapter(chapterId); }
export function getMarkersForManga(mangaId: number) { return seriesState.getMarkersForManga(mangaId); }
export function clearMarkersForManga(mangaId: number) { seriesState.clearMarkersForManga(mangaId); }
export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] { return seriesState.getPref(mangaId, key); }
export function setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) { seriesState.setPref(mangaId, key, value); }
src/lib/state/settings.svelte.ts
+16 -16
View File
@@ -1,38 +1,38 @@
import type { Settings } from '$lib/types/settings'
import { DEFAULT_SETTINGS } from '$lib/types/settings'
import type { Settings } from "$lib/types/settings";
import { DEFAULT_SETTINGS } from "$lib/types/settings";
const KEY = 'moku_settings'
const KEY = "moku_settings";
function load(): Settings {
try {
const raw = localStorage.getItem(KEY)
if (raw) return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) }
const raw = localStorage.getItem(KEY);
if (raw) return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
} catch {}
return { ...DEFAULT_SETTINGS }
return { ...DEFAULT_SETTINGS };
}
function save(s: Settings) {
try { localStorage.setItem(KEY, JSON.stringify(s)) } catch {}
try { localStorage.setItem(KEY, JSON.stringify(s)); } catch {}
}
export const settingsState = $state({ settings: load() })
export const settingsState = $state({ settings: load() });
if (typeof document !== 'undefined') {
document.documentElement.style.zoom = String(settingsState.settings.uiZoom ?? 1.0)
if (typeof document !== "undefined") {
document.documentElement.style.zoom = String(settingsState.settings.uiZoom ?? 1.0);
}
export function updateSettings(patch: Partial<Settings>) {
Object.assign(settingsState.settings, patch)
save(settingsState.settings)
Object.assign(settingsState.settings, patch);
save(settingsState.settings);
if (typeof document !== 'undefined') {
if (typeof document !== "undefined") {
if (patch.uiZoom !== undefined) {
document.documentElement.style.zoom = String(patch.uiZoom)
document.documentElement.style.zoom = String(patch.uiZoom);
}
}
}
export function resetSettings() {
settingsState.settings = { ...DEFAULT_SETTINGS }
save(settingsState.settings)
settingsState.settings = { ...DEFAULT_SETTINGS };
save(settingsState.settings);
}
src/lib/state/tracking.svelte.ts
+137 -18
View File
@@ -1,29 +1,149 @@
import { getAdapter } from '$lib/request-manager'
import { settingsState } from '$lib/state/settings.svelte'
import { buildChapterList } from '$lib/components/series/lib/chapterList'
import type { Tracker, TrackRecord } from '$lib/types'
import type { Chapter } from '$lib/types/chapter'
import type { MangaPrefs } from '$lib/types/settings'
import type { Chapter } from '$lib/types'
import type { ChapterDisplayPrefs } from '$lib/components/series/lib/chapterList'
export const trackingState = $state({
trackers: [] as Tracker[],
loading: false,
error: null as string | null,
syncing: false,
type RecordMap = Map<number, TrackRecord[]>
records: [] as unknown[],
recordsLoading: false,
recordsError: null as string | null,
class TrackingStore {
private byManga: RecordMap = $state(new Map())
searchResults: [] as unknown[],
searchLoading: false,
searchError: null as string | null,
})
trackers: Tracker[] = $state([])
loading: boolean = $state(false)
error: string | null = $state(null)
syncing: boolean = $state(false)
recordsLoading: boolean = $state(false)
recordsError: string | null = $state(null)
searchResults: unknown[] = $state([])
searchLoading: boolean = $state(false)
searchError: string | null = $state(null)
private loadingFor = new Set<number>()
recordsFor(mangaId: number): TrackRecord[] {
return this.byManga.get(mangaId) ?? []
}
private setFor(mangaId: number, records: TrackRecord[]) {
const next = new Map(this.byManga)
next.set(mangaId, records)
this.byManga = next
}
async loadForManga(mangaId: number) {
if (this.loadingFor.has(mangaId)) return
const existing = this.byManga.get(mangaId)
if (existing && existing.length > 0) return
this.loadingFor.add(mangaId)
try {
const records = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
this.setFor(mangaId, records)
} catch (e) {
// silently ignore — tracking is non-critical
} finally {
this.loadingFor.delete(mangaId)
}
}
async syncFromRemote(
mangaId: number,
record: TrackRecord,
chapters: Chapter[],
prefs: ChapterDisplayPrefs,
): Promise<{ markedIds: number[] }> {
if (!settingsState.settings.trackerSyncBack) return { markedIds: [] }
try {
await getAdapter().syncTracking(String(mangaId))
const fresh = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
this.setFor(mangaId, fresh)
const freshRecord = fresh.find(r => r.id === record.id)
if (!freshRecord) return { markedIds: [] }
const markedIds = this._applyRemoteProgress(freshRecord, chapters, prefs)
return { markedIds }
} catch {
return { markedIds: [] }
}
}
private _applyRemoteProgress(
record: TrackRecord,
chapters: Chapter[],
prefs: ChapterDisplayPrefs,
): number[] {
const lastRead = record.lastChapterRead ?? 0
if (lastRead <= 0) return []
const threshold = settingsState.settings.trackerSyncBackThreshold ?? null
const respectScanlator = settingsState.settings.trackerRespectScanlatorFilter ?? true
const activeScanlators: string[] | null =
respectScanlator && (prefs as any).scanlatorFilter?.length
? (prefs as any).scanlatorFilter
: null
return chapters
.filter(ch => {
if (ch.read) return false
if (activeScanlators && ch.scanlator && !activeScanlators.includes(ch.scanlator)) return false
return threshold !== null
? ch.chapterNumber <= lastRead && ch.chapterNumber >= lastRead - threshold
: ch.chapterNumber <= lastRead
})
.map(ch => ch.id)
}
async updateFromRead(
mangaId: number,
chapter: Chapter,
chapterList: Chapter[],
prefs: ChapterDisplayPrefs,
) {
const records = this.recordsFor(mangaId)
if (!records.length) return
try {
await getAdapter().syncTracking(String(mangaId))
const fresh = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
this.setFor(mangaId, fresh)
} catch {}
}
async updateFromUnread(
mangaId: number,
chapterList: Chapter[],
prefs: ChapterDisplayPrefs,
) {
const records = this.recordsFor(mangaId)
if (!records.length) return
try {
await getAdapter().syncTracking(String(mangaId))
const fresh = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
this.setFor(mangaId, fresh)
} catch {}
}
clear(mangaId: number) {
const next = new Map(this.byManga)
next.delete(mangaId)
this.byManga = next
}
}
export const trackingState = new TrackingStore()
// Standalone export for components that run their own sync loop (e.g. TrackingSettings)
export async function syncBackFromTracker(
records: TrackRecord[],
records: TrackRecord[],
chapters: Chapter[],
opts: {
threshold: number | null
respectScanlatorFilter: boolean
chapterPrefs: Partial<MangaPrefs>
chapterPrefs: Partial<any>
},
markChaptersRead: (ids: string[], read: boolean) => Promise<void>,
): Promise<Chapter[]> {
@@ -46,8 +166,7 @@ export async function syncBackFromTracker(
: ch.chapterNumber <= lastRead
})
if (toMark.length === 0) continue
if (!toMark.length) continue
await markChaptersRead(toMark.map(ch => String(ch.id)), true)
marked.push(...toMark)
}
src/routes/browse/series/[mangaid]/+page.svelte
-15
View File
@@ -1,15 +0,0 @@
<script lang="ts">
import { page } from '$app/stores'
import { loadManga, fetchManga } from '$lib/request-manager/manga'
import { loadChapters } from '$lib/request-manager/chapters'
import { seriesState } from '$lib/state/series.svelte'
const mangaId = $derived($page.params.mangaId)
$effect(() => {
loadManga(mangaId)
loadChapters(mangaId)
})
</script>
<p>Series {$page.params.mangaId} — stub</p>
src/routes/library/+page.svelte
+375 -52
View File
@@ -1,95 +1,415 @@
<script lang="ts">
import { goto } from '$app/navigation'
import { libraryState } from '$lib/state/library.svelte'
import { loadLibrary, refreshLibrary, removeFromLibrary, bulkRemoveFromLibrary } from '$lib/request-manager/manga'
import LibraryToolbar from '$lib/components/library/LibraryToolbar.svelte'
import LibraryGrid from '$lib/components/library/LibraryGrid.svelte'
import type { Manga } from '$lib/types'
import { goto } from '$app/navigation'
import { invoke } from '@tauri-apps/api/core'
import { libraryState } from '$lib/state/library.svelte'
import type { LibrarySortOption, LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
import {
loadLibrary, refreshLibrary, removeFromLibrary,
bulkRemoveFromLibrary, loadCategories, createCategory,
updateMangaCategories, updateCategoryOrder,
} from '$lib/request-manager/manga'
import { startLibraryUpdate } from '$lib/components/library/lib/libraryUpdater'
import { toast } from '$lib/state/notifications.svelte'
import LibraryToolbar from '$lib/components/library/LibraryToolbar.svelte'
import LibraryGrid from '$lib/components/library/LibraryGrid.svelte'
import ContextMenu from '$lib/components/shared/ui/ContextMenu.svelte'
import type { MenuEntry } from '$lib/components/shared/ui/ContextMenu.svelte'
import type { Manga, Category } from '$lib/types'
import {
Books, Folder, FolderSimple, FolderSimplePlus,
Trash, CheckSquare, ArrowSquareOut, ArrowsClockwise,
} from 'phosphor-svelte'
const saved = $derived(libraryState.items.filter(m => m.inLibrary).length)
const downloaded = $derived(libraryState.items.filter(m => (m.downloadCount ?? 0) > 0).length)
const SIDEBAR_W = 52
const TITLEBAR_H = 36
const CTX_FOLDER_CAP = 4
const DT_TAB = 'application/x-moku-tab'
let cancelUpdate: (() => void) | null = null
let refreshDoneTimer: ReturnType<typeof setTimeout> | null = null
let ctx: { x: number; y: number; manga: Manga } | null = $state(null)
let emptyCtx: { x: number; y: number } | null = $state(null)
let bulkWorking = $state(false)
let activeDragKind: 'tab' | null = $state(null)
let dragInsertIdx = $state(-1)
let dragTabId: string | null = $state(null)
let dragOverTabId: string | null = $state(null)
$effect(() => {
loadLibrary()
loadCategories()
})
$effect(() => {
if (libraryState.tab) libraryState.exitSelect()
libraryState.tab
libraryState.exitSelect()
})
$effect(() => {
libraryState.guardTab()
})
function onCardClick(e: MouseEvent, m: Manga) {
if (libraryState.selectMode) {
libraryState.toggleSelect(m.id)
return
}
if (e.metaKey || e.ctrlKey || e.shiftKey) {
e.preventDefault()
libraryState.enterSelect(m.id)
return
}
goto(`/reader/${m.id}/${m.firstUnreadChapter?.id ?? m.lastReadChapter?.id ?? ''}`)
if (libraryState.selectMode) { libraryState.toggleSelect(m.id); return }
if (e.metaKey || e.ctrlKey || e.shiftKey) { e.preventDefault(); libraryState.enterSelect(m.id); return }
goto(`/series/${m.id}`)
}
function onBulkRemove() {
bulkRemoveFromLibrary(libraryState.selected)
function openCtx(e: MouseEvent, m: Manga) {
if (libraryState.selectMode) { libraryState.toggleSelect(m.id); return }
e.preventDefault()
ctx = { x: e.clientX - SIDEBAR_W, y: e.clientY - TITLEBAR_H, manga: m }
}
async function doRemove(m: Manga) {
await removeFromLibrary(String(m.id))
await loadCategories()
}
async function doDeleteDownloads(_m: Manga) {}
async function openMangaFolder(m: Manga) {
let base: string | undefined
try { base = await invoke<string>('get_default_downloads_path') } catch {}
if (!base) { toast({ kind: 'error', message: 'No downloads path set' }); return }
const source = (m as any).source?.displayName ?? (m as any).source?.name ?? ''
const sanitize = (s: string) => s.replace(/[\/\\?%*:|"<>]/g, '_')
const path = source
? `${base}/mangas/${sanitize(source)}/${sanitize(m.title)}`
: `${base}/mangas/${sanitize(m.title)}`
try { await invoke('open_path', { path }) }
catch (e: any) { toast({ kind: 'error', message: 'Could not open folder', detail: e?.toString?.() ?? path }) }
}
async function openDownloadsFolder() {
let path: string | undefined
try { path = await invoke<string>('get_default_downloads_path') } catch {}
if (!path) { toast({ kind: 'error', message: 'No downloads path set' }); return }
try { await invoke('open_path', { path }) }
catch (e: any) { toast({ kind: 'error', message: 'Could not open folder', detail: e?.toString?.() ?? path }) }
}
async function toggleMangaCategory(manga: Manga, cat: Category) {
const nodes = (cat as any).mangas?.nodes ?? libraryState.categoryMangaMap.get(cat.id) ?? []
const inCat = nodes.some((m: Manga) => m.id === manga.id)
libraryState.setCategories(
libraryState.categories.map(c => {
if (c.id !== cat.id) return c
const existing = (c as any).mangas?.nodes ?? []
const updated = inCat ? existing.filter((m: Manga) => m.id !== manga.id) : [...existing, manga]
return { ...c, mangas: { nodes: updated } }
})
)
if (!inCat) libraryState.bumpCategoryFrecency(cat.id)
try {
await updateMangaCategories(String(manga.id), inCat ? [] : [cat.id], inCat ? [cat.id] : [])
} catch { await loadCategories() }
await loadCategories()
}
async function createAndAssign(manga: Manga) {
const name = prompt('Folder name:')
if (!name?.trim()) return
try {
const cat = await createCategory(name.trim())
await updateMangaCategories(String(manga.id), [cat.id], [])
libraryState.bumpCategoryFrecency(cat.id)
} catch (e) { console.error(e) }
}
function buildCtxItems(m: Manga): MenuEntry[] {
const sorted = [...libraryState.visibleCategories].sort(
(a, b) => (libraryState.categoryFrecency[b.id] ?? 0) - (libraryState.categoryFrecency[a.id] ?? 0)
)
const pinned = sorted.slice(0, CTX_FOLDER_CAP)
const overflow = sorted.slice(CTX_FOLDER_CAP)
const makeCatEntry = (cat: Category): MenuEntry => {
const inCat = (libraryState.categoryMangaMap.get(cat.id) ?? []).some(x => x.id === m.id)
return {
label: inCat ? `Remove from ${cat.name}` : cat.name,
icon: Folder,
onClick: () => toggleMangaCategory(m, cat),
}
}
return [
{
label: m.inLibrary ? 'Remove from library' : 'Add to library',
icon: Books,
onClick: () => m.inLibrary ? doRemove(m) : loadLibrary(),
},
{
label: libraryState.refreshingMangaId === m.id ? 'Refreshing…' : 'Refresh manga',
icon: ArrowsClockwise,
disabled: libraryState.refreshingMangaId !== null,
onClick: () => refreshSingleManga(m),
},
{
label: 'Open in file manager',
icon: ArrowSquareOut,
disabled: !(m.downloadCount && m.downloadCount > 0),
onClick: () => openMangaFolder(m),
},
{
label: 'Delete all downloads',
icon: Trash,
danger: true,
disabled: !(m.downloadCount && m.downloadCount > 0),
onClick: () => doDeleteDownloads(m),
},
{ separator: true },
{ label: 'Select', icon: CheckSquare, onClick: () => libraryState.enterSelect(m.id) },
...(pinned.length ? [{ separator: true } as MenuEntry, ...pinned.map(makeCatEntry)] : []),
...(overflow.length ? [{
label: `More folders (${overflow.length})`,
icon: FolderSimple,
onClick: () => {},
children: overflow.map(makeCatEntry),
} as MenuEntry] : []),
{ separator: true },
{ label: 'New folder', icon: FolderSimplePlus, onClick: () => createAndAssign(m) },
]
}
function buildEmptyCtx(): MenuEntry[] {
return [{
label: 'New folder',
icon: FolderSimplePlus,
onClick: async () => {
const name = prompt('Folder name:')
if (!name?.trim()) return
try { await createCategory(name.trim()) }
catch (e) { console.error(e) }
},
}]
}
async function refreshSingleManga(m: Manga) {
if (libraryState.refreshingMangaId !== null) return
libraryState.refreshingMangaId = m.id
try {
await refreshLibrary()
toast({ kind: 'success', message: 'Manga refreshed', detail: m.title })
} finally {
libraryState.refreshingMangaId = null
}
}
async function startRefresh() {
if (libraryState.refreshing) return
libraryState.refreshing = true
libraryState.refreshProgress = { finished: 0, total: 0 }
cancelUpdate = startLibraryUpdate({
onProgress(p) { libraryState.refreshProgress = p },
async onDone({ newChapters, totalUpdated }) {
libraryState.refreshing = false
cancelUpdate = null
await loadLibrary()
libraryState.refreshDone = true
if (refreshDoneTimer) clearTimeout(refreshDoneTimer)
refreshDoneTimer = setTimeout(() => { libraryState.refreshDone = false }, 2500)
if (newChapters > 0) {
toast({ kind: 'success', message: 'Library updated', detail: `${newChapters} new chapter${newChapters !== 1 ? 's' : ''} across ${totalUpdated} series` })
} else {
toast({ kind: 'info', message: 'Already up to date' })
}
},
onError() { libraryState.refreshing = false; cancelUpdate = null },
})
}
async function cancelRefresh() {
if (!libraryState.refreshing) return
cancelUpdate?.()
cancelUpdate = null
libraryState.refreshing = false
libraryState.refreshProgress = { finished: 0, total: 0 }
}
async function refreshCategory(catId: number) {
if (libraryState.refreshingCatId !== null || libraryState.refreshing) return
libraryState.refreshingCatId = catId
try {
await loadLibrary()
const cat = libraryState.categories.find(c => c.id === catId)
toast({ kind: 'success', message: 'Folder refreshed', detail: cat?.name ?? '' })
} finally {
libraryState.refreshingCatId = null
}
}
async function bulkMove(cat: Category) {
bulkWorking = true
try {
await Promise.all(
[...libraryState.selected].map(id => {
const m = libraryState.items.find(x => x.id === id)
return m ? toggleMangaCategory(m, cat) : Promise.resolve()
})
)
} finally {
bulkWorking = false
libraryState.exitSelect()
}
}
async function onBulkRemove() {
bulkWorking = true
try { await bulkRemoveFromLibrary(libraryState.selected) }
finally { bulkWorking = false }
}
function onTabDragStart(e: DragEvent, id: string) {
activeDragKind = 'tab'; dragTabId = id
e.dataTransfer!.effectAllowed = 'move'
e.dataTransfer!.setData(DT_TAB, id)
e.dataTransfer!.setData('text/plain', `tab:${id}`)
}
function onTabDragOver(e: DragEvent, id: string, idx: number) {
if (activeDragKind !== 'tab' || dragTabId === null || dragTabId === id) return
e.preventDefault(); e.dataTransfer!.dropEffect = 'move'
dragOverTabId = id
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
dragInsertIdx = e.clientX < rect.left + rect.width / 2 ? idx : idx + 1
}
function onTabDragLeave() { dragOverTabId = null }
async function onTabDrop(e: DragEvent, dropId: string) {
e.preventDefault(); dragOverTabId = null
const insertAt = dragInsertIdx; dragInsertIdx = -1
if (activeDragKind !== 'tab' || dragTabId === null || dragTabId === dropId) { dragTabId = null; return }
const dragStrId = dragTabId; dragTabId = null; activeDragKind = null
const tabs = [...libraryState.allTabIds]
const fromIdx = tabs.indexOf(dragStrId)
const dropIdx = tabs.indexOf(dropId)
if (fromIdx < 0 || dropIdx < 0) return
const visibleDrop = libraryState.visibleTabIds[insertAt] ?? null
const destIdx = visibleDrop ? tabs.indexOf(visibleDrop) : tabs.length
tabs.splice(fromIdx, 1)
const adjusted = Math.max(0, Math.min(destIdx > fromIdx ? destIdx - 1 : destIdx, tabs.length))
tabs.splice(adjusted, 0, dragStrId)
libraryState.pinnedTabOrder = tabs
const catIds = tabs.filter(id => id !== 'library' && id !== 'downloaded')
const zeroCat = libraryState.categories.filter(c => c.id === 0)
const reordered = catIds.map((id, i) => {
const c = libraryState.categories.find(x => String(x.id) === id)!
return { ...c, order: i + 1 }
})
libraryState.setCategories([...zeroCat, ...reordered])
const dragIsBuiltin = dragStrId === 'library' || dragStrId === 'downloaded'
if (!dragIsBuiltin) {
const serverPos = catIds.indexOf(dragStrId) + 1
try { await updateCategoryOrder(Number(dragStrId), serverPos) }
catch { await loadCategories() }
}
}
function onTabDragEnd() {
activeDragKind = null; dragTabId = null; dragOverTabId = null; dragInsertIdx = -1
}
</script>
<div class="root">
<div
class="root"
role="presentation"
oncontextmenu={(e) => {
if ((e.target as HTMLElement).closest('button')) return
e.preventDefault()
emptyCtx = { x: e.clientX - SIDEBAR_W, y: e.clientY - TITLEBAR_H }
}}
>
{#if libraryState.error}
<div class="center">
<p class="error">Could not load library</p>
<p class="error-msg">Could not load library</p>
<p class="error-detail">{libraryState.error}</p>
<button class="retry-btn" onclick={() => loadLibrary()}>Retry</button>
<button class="retry-btn" onclick={() => { loadLibrary(); loadCategories() }}>Retry</button>
</div>
{:else}
<LibraryToolbar
tab={libraryState.tab}
savedCount={saved}
dlCount={downloaded}
sort={libraryState.sort}
sortDesc={libraryState.sortDesc}
status={libraryState.filter.status}
unread={libraryState.filter.unread}
downloaded={libraryState.filter.downloaded}
bookmarked={libraryState.filter.bookmarked}
tabSortMode={libraryState.tabSort[libraryState.tab]?.mode ?? 'alphabetical'}
tabSortDir={libraryState.tabSort[libraryState.tab]?.dir ?? 'asc'}
tabStatus={libraryState.tabStatus[libraryState.tab] ?? 'ALL'}
tabFilters={libraryState.tabFilters[libraryState.tab] ?? {}}
hasActiveFilters={libraryState.hasActiveFilters}
refreshing={libraryState.refreshing}
visibleCategories={libraryState.visibleCategories}
visibleTabIds={libraryState.visibleTabIds}
counts={libraryState.counts}
query={libraryState.filter.query}
onTab={(t) => libraryState.tab = t}
refreshing={libraryState.refreshing}
refreshProgress={libraryState.refreshProgress}
refreshDone={libraryState.refreshDone}
refreshingCatId={libraryState.refreshingCatId}
{activeDragKind}
{dragInsertIdx}
{dragTabId}
{dragOverTabId}
onTabChange={(t) => libraryState.tab = t}
onQuery={(q) => libraryState.filter.query = q}
onSort={(s) => libraryState.sort = s}
onSortDesc={() => libraryState.sortDesc = !libraryState.sortDesc}
onStatus={(s) => libraryState.filter.status = s}
onUnread={() => libraryState.filter.unread = !libraryState.filter.unread}
onDownloaded={() => libraryState.filter.downloaded = !libraryState.filter.downloaded}
onBookmarked={() => libraryState.filter.bookmarked = !libraryState.filter.bookmarked}
onFilterClear={() => {
libraryState.filter.status = 'all'
libraryState.filter.unread = false
libraryState.filter.downloaded = false
libraryState.filter.bookmarked = false
}}
onRefresh={refreshLibrary}
onSortChange={(mode) => libraryState.setTabSort(libraryState.tab, mode)}
onSortDirToggle={() => libraryState.toggleTabSortDir(libraryState.tab)}
onStatusChange={(s) => libraryState.setTabStatus(libraryState.tab, s)}
onFilterToggle={(f) => libraryState.toggleTabFilter(libraryState.tab, f)}
onFiltersClear={() => libraryState.clearTabFilters(libraryState.tab)}
onRefresh={startRefresh}
onCancelRefresh={cancelRefresh}
onRefreshCategory={refreshCategory}
onOpenDownloadsFolder={openDownloadsFolder}
onTabDragStart={onTabDragStart}
onTabDragOver={onTabDragOver}
onTabDragLeave={onTabDragLeave}
onTabDrop={onTabDrop}
onTabDragEnd={onTabDragEnd}
/>
{#if libraryState.refreshing && libraryState.refreshProgress.total > 0}
{@const pct = Math.round((libraryState.refreshProgress.finished / libraryState.refreshProgress.total) * 100)}
<div class="refresh-bar-wrap" aria-hidden="true">
<div class="refresh-bar-fill" style="width:{pct}%"></div>
</div>
{/if}
<LibraryGrid
items={libraryState.filteredItems}
loading={libraryState.loading}
selectMode={libraryState.selectMode}
selected={libraryState.selected}
tab={libraryState.tab}
visibleCategories={libraryState.visibleCategories}
{bulkWorking}
{onCardClick}
onSelectAll={() => libraryState.selectAll()}
onCardContextMenu={openCtx}
onSelectAll={() => libraryState.selectAll(libraryState.filteredItems.map(m => m.id))}
onExitSelect={() => libraryState.exitSelect()}
{onBulkRemove}
onBulkRemove={onBulkRemove}
onBulkMove={bulkMove}
/>
{/if}
</div>
{#if ctx}
<ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => ctx = null} />
{/if}
{#if emptyCtx}
<ContextMenu x={emptyCtx.x} y={emptyCtx.y} items={buildEmptyCtx()} onClose={() => emptyCtx = null} />
{/if}
<style>
.root {
display: flex; flex-direction: column;
position: relative; display: flex; flex-direction: column;
height: 100%; overflow: hidden;
animation: fadeIn 0.14s ease both;
}
@@ -99,8 +419,8 @@
justify-content: center; height: 60%; gap: var(--sp-2);
color: var(--text-muted); text-align: center;
}
.error { color: var(--color-error); font-size: var(--text-base); }
.error-detail { color: var(--text-faint); font-size: var(--text-sm); }
.error-msg { color: var(--color-error); font-size: var(--text-base); }
.error-detail { color: var(--text-faint); font-size: var(--text-sm); }
.retry-btn {
margin-top: var(--sp-3); padding: 6px 16px;
border-radius: var(--radius-md); border: 1px solid var(--border-dim);
@@ -109,5 +429,8 @@
font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
}
.refresh-bar-wrap { height: 2px; background: var(--border-dim); flex-shrink: 0; overflow: hidden; }
.refresh-bar-fill { height: 100%; background: var(--accent); border-radius: 0 2px 2px 0; transition: width 0.6s ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
</style>
src/routes/series/[mangaid]/+page.svelte
+12
View File
@@ -0,0 +1,12 @@
<script lang="ts">
import { page } from '$app/stores'
import { setActiveMangaId } from '$lib/state/series.svelte'
import SeriesDetail from '$lib/components/series/SeriesDetail.svelte'
$effect(() => {
setActiveMangaId(Number($page.params.mangaid) || null)
return () => setActiveMangaId(null)
})
</script>
<SeriesDetail />