mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-14 01:39:56 -05:00
Chore: Port over SeriesDetail (WIP Panels)
This commit is contained in:
Youwes09
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
})
|
||||
}
|
||||
@@ -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 },
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user