mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-14 09:49:58 -05:00
Chore: Port over SeriesDetail (WIP Panels)
This commit is contained in:
Youwes09
@@ -1,28 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { Check, Funnel } from 'phosphor-svelte'
|
||||
import type { MangaStatus } from '$lib/server-adapters/types'
|
||||
import type { LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
|
||||
|
||||
interface Props {
|
||||
status: MangaStatus | 'all'
|
||||
unread: boolean
|
||||
downloaded: boolean
|
||||
bookmarked: boolean
|
||||
status: LibraryStatusFilter
|
||||
filters: Partial<Record<LibraryContentFilter, boolean>>
|
||||
hasActive: boolean
|
||||
open: boolean
|
||||
onToggle: () => void
|
||||
onStatus: (s: MangaStatus | 'all') => void
|
||||
onUnread: () => void
|
||||
onDownloaded: () => void
|
||||
onBookmarked: () => void
|
||||
onStatusChange: (s: LibraryStatusFilter) => void
|
||||
onFilterToggle: (f: LibraryContentFilter) => void
|
||||
onClear: () => void
|
||||
}
|
||||
|
||||
let {
|
||||
status, unread, downloaded, bookmarked, hasActive, open,
|
||||
onToggle, onStatus, onUnread, onDownloaded, onBookmarked, onClear,
|
||||
status, filters, hasActive, open,
|
||||
onToggle, onStatusChange, onFilterToggle, onClear,
|
||||
}: Props = $props()
|
||||
|
||||
const STATUSES: [MangaStatus, string][] = [
|
||||
const CONTENT_FILTERS: [LibraryContentFilter, string][] = [
|
||||
['unread', 'Unread'],
|
||||
['started', 'Started'],
|
||||
['downloaded', 'Downloaded'],
|
||||
['bookmarked', 'Bookmarked'],
|
||||
]
|
||||
|
||||
const STATUSES: [LibraryStatusFilter, string][] = [
|
||||
['ONGOING', 'Ongoing'],
|
||||
['COMPLETED', 'Completed'],
|
||||
['ON_HIATUS', 'Hiatus'],
|
||||
@@ -53,21 +56,17 @@
|
||||
<div class="divider"></div>
|
||||
<p class="section-label">Content</p>
|
||||
|
||||
{#each [
|
||||
{ label: 'Unread', active: unread, handler: onUnread },
|
||||
{ label: 'Downloaded', active: downloaded, handler: onDownloaded },
|
||||
{ label: 'Bookmarked', active: bookmarked, handler: onBookmarked },
|
||||
] as f}
|
||||
{#each CONTENT_FILTERS as [key, label]}
|
||||
<button
|
||||
class="item"
|
||||
class:item-active={f.active}
|
||||
class:item-active={!!filters[key]}
|
||||
role="menuitem"
|
||||
onclick={f.handler}
|
||||
onclick={() => onFilterToggle(key)}
|
||||
>
|
||||
<span class="check" class:check-on={f.active}>
|
||||
{#if f.active}<Check size={9} weight="bold" />{/if}
|
||||
<span class="check" class:check-on={!!filters[key]}>
|
||||
{#if filters[key]}<Check size={9} weight="bold" />{/if}
|
||||
</span>
|
||||
{f.label}
|
||||
{label}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
@@ -79,7 +78,7 @@
|
||||
class="item"
|
||||
class:item-active={status === s}
|
||||
role="menuitem"
|
||||
onclick={() => onStatus(status === s ? 'all' : s)}
|
||||
onclick={() => onStatusChange(status === s ? 'ALL' : s)}
|
||||
>
|
||||
<span class="check" class:check-on={status === s}>
|
||||
{#if status === s}<Check size={9} weight="bold" />{/if}
|
||||
@@ -97,24 +96,19 @@
|
||||
.icon-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-faint);
|
||||
border-radius: var(--radius-md); border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised); color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
|
||||
|
||||
.panel {
|
||||
position: absolute; top: calc(100% + 6px); right: 0; z-index: 9999;
|
||||
min-width: 220px;
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-base);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--sp-1);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
min-width: 220px; background: var(--bg-raised);
|
||||
border: 1px solid var(--border-base); border-radius: var(--radius-lg);
|
||||
padding: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
|
||||
@@ -152,15 +146,14 @@
|
||||
cursor: pointer; text-align: left;
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
}
|
||||
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
|
||||
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
|
||||
.item-active:hover { background: var(--accent-dim); }
|
||||
|
||||
.check {
|
||||
width: 13px; height: 13px; border-radius: 2px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: transparent; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: 1px solid var(--border-strong); background: transparent;
|
||||
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
||||
color: var(--bg-base);
|
||||
transition: background var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
|
||||
@@ -1,30 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { CheckSquare, Trash } from 'phosphor-svelte'
|
||||
import type { Manga } from '$lib/types'
|
||||
import { CheckSquare, Trash, Folder } from 'phosphor-svelte'
|
||||
import type { Manga, Category } from '$lib/types'
|
||||
|
||||
interface Props {
|
||||
items: Manga[]
|
||||
loading: boolean
|
||||
selectMode: boolean
|
||||
selected: Set<number>
|
||||
tab: string
|
||||
onCardClick: (e: MouseEvent, m: Manga) => void
|
||||
onSelectAll: () => void
|
||||
onExitSelect: () => void
|
||||
onBulkRemove: () => void
|
||||
items: Manga[]
|
||||
loading: boolean
|
||||
selectMode: boolean
|
||||
selected: Set<number>
|
||||
tab: string
|
||||
visibleCategories: Category[]
|
||||
bulkWorking: boolean
|
||||
onCardClick: (e: MouseEvent, m: Manga) => void
|
||||
onCardContextMenu: (e: MouseEvent, m: Manga) => void
|
||||
onSelectAll: () => void
|
||||
onExitSelect: () => void
|
||||
onBulkRemove: () => void
|
||||
onBulkMove: (cat: Category) => void
|
||||
}
|
||||
|
||||
let {
|
||||
items, loading, selectMode, selected, tab,
|
||||
onCardClick, onSelectAll, onExitSelect, onBulkRemove,
|
||||
visibleCategories, bulkWorking,
|
||||
onCardClick, onCardContextMenu, onSelectAll, onExitSelect, onBulkRemove, onBulkMove,
|
||||
}: Props = $props()
|
||||
|
||||
const THUMB_BASE = 'http://127.0.0.1:4567'
|
||||
|
||||
let movePanelOpen = $state(false)
|
||||
|
||||
function coverUrl(m: Manga) {
|
||||
const url = m.thumbnailUrl ?? ''
|
||||
return url.startsWith('http') ? url : `${THUMB_BASE}${url}`
|
||||
}
|
||||
|
||||
function onDocDown(e: MouseEvent) {
|
||||
if (movePanelOpen && !(e.target as HTMLElement).closest('.move-wrap')) movePanelOpen = false
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
document.addEventListener('mousedown', onDocDown, true)
|
||||
return () => document.removeEventListener('mousedown', onDocDown, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if selectMode}
|
||||
@@ -32,9 +48,36 @@
|
||||
<span class="sel-count">{selected.size} selected</span>
|
||||
<button class="sel-text-btn" onclick={onSelectAll}>Select all</button>
|
||||
<div class="sel-right">
|
||||
{#if visibleCategories.length > 0}
|
||||
<div class="move-wrap">
|
||||
<button
|
||||
class="sel-action-btn"
|
||||
disabled={selected.size === 0 || bulkWorking}
|
||||
onclick={() => movePanelOpen = !movePanelOpen}
|
||||
>
|
||||
<Folder size={13} weight="bold" />
|
||||
Move to folder
|
||||
</button>
|
||||
{#if movePanelOpen}
|
||||
<div class="move-panel" role="menu">
|
||||
{#each visibleCategories as cat}
|
||||
<button
|
||||
class="move-item"
|
||||
role="menuitem"
|
||||
onclick={() => { onBulkMove(cat); movePanelOpen = false }}
|
||||
>
|
||||
<Folder size={12} weight="bold" />
|
||||
{cat.name}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="sel-action-btn sel-danger"
|
||||
disabled={selected.size === 0}
|
||||
disabled={selected.size === 0 || bulkWorking}
|
||||
onclick={onBulkRemove}
|
||||
>
|
||||
<Trash size={13} weight="bold" />
|
||||
@@ -65,7 +108,7 @@
|
||||
<div class="empty">
|
||||
{tab === 'downloaded'
|
||||
? 'No downloaded manga.'
|
||||
: 'No manga saved to library — browse sources to add some.'}
|
||||
: 'No manga in this library — browse sources to add some.'}
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
@@ -78,10 +121,7 @@
|
||||
class:card-selected={isSelected}
|
||||
class:select-mode={selectMode}
|
||||
onclick={(e) => onCardClick(e, m)}
|
||||
oncontextmenu={(e) => {
|
||||
e.preventDefault()
|
||||
onCardClick(e, m)
|
||||
}}
|
||||
oncontextmenu={(e) => onCardContextMenu(e, m)}
|
||||
>
|
||||
<div class="cover-wrap" class:completed={isCompleted}>
|
||||
<img
|
||||
@@ -157,12 +197,31 @@
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.sel-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
.sel-action-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.sel-danger:hover:not(:disabled) {
|
||||
color: var(--color-error, #e05c5c);
|
||||
border-color: color-mix(in srgb, var(--color-error, #e05c5c) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--color-error, #e05c5c) 8%, transparent);
|
||||
}
|
||||
|
||||
.move-wrap { position: relative; }
|
||||
.move-panel {
|
||||
position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999;
|
||||
min-width: 180px; background: var(--bg-raised);
|
||||
border: 1px solid var(--border-base); border-radius: var(--radius-lg);
|
||||
padding: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
.move-item {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
width: 100%; padding: 7px 10px; border-radius: var(--radius-sm);
|
||||
border: none; background: transparent; color: var(--text-muted);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
cursor: pointer; text-align: left;
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
}
|
||||
.move-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
@@ -205,9 +264,9 @@
|
||||
letter-spacing: 0.04em; line-height: 1; padding: 3px 7px;
|
||||
border-radius: 20px; white-space: nowrap;
|
||||
}
|
||||
.badge-unread { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
|
||||
.badge-done { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
|
||||
.badge-dl { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; }
|
||||
.badge-unread { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
|
||||
.badge-done { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
|
||||
.badge-dl { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; }
|
||||
|
||||
.select-overlay {
|
||||
position: absolute; inset: 0; z-index: 3;
|
||||
@@ -241,6 +300,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
|
||||
</style>
|
||||
@@ -1,52 +1,75 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
MagnifyingGlass, Books, DownloadSimple,
|
||||
SortAscending, CaretUp, CaretDown, ArrowsClockwise,
|
||||
MagnifyingGlass, Books, DownloadSimple, FolderSimple,
|
||||
SortAscending, CaretUp, CaretDown, ArrowsClockwise, X,
|
||||
} from 'phosphor-svelte'
|
||||
import LibraryFilters from './LibraryFilters.svelte'
|
||||
import type { LibrarySortOption, LibraryTab } from '$lib/state/library.svelte'
|
||||
import type { MangaStatus } from '$lib/server-adapters/types'
|
||||
import type { LibrarySortOption, LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
|
||||
import type { Category } from '$lib/types'
|
||||
|
||||
interface Props {
|
||||
tab: LibraryTab
|
||||
savedCount: number
|
||||
dlCount: number
|
||||
sort: LibrarySortOption
|
||||
sortDesc: boolean
|
||||
status: MangaStatus | 'all'
|
||||
unread: boolean
|
||||
downloaded: boolean
|
||||
bookmarked: boolean
|
||||
hasActiveFilters: boolean
|
||||
refreshing: boolean
|
||||
query: string
|
||||
onTab: (t: LibraryTab) => void
|
||||
onQuery: (q: string) => void
|
||||
onSort: (s: LibrarySortOption) => void
|
||||
onSortDesc: () => void
|
||||
onStatus: (s: MangaStatus | 'all') => void
|
||||
onUnread: () => void
|
||||
onDownloaded: () => void
|
||||
onBookmarked: () => void
|
||||
onFilterClear: () => void
|
||||
onRefresh: () => void
|
||||
tab: string
|
||||
tabSortMode: LibrarySortOption
|
||||
tabSortDir: 'asc' | 'desc'
|
||||
tabStatus: LibraryStatusFilter
|
||||
tabFilters: Partial<Record<LibraryContentFilter, boolean>>
|
||||
hasActiveFilters: boolean
|
||||
visibleCategories: Category[]
|
||||
visibleTabIds: string[]
|
||||
counts: Record<string, number>
|
||||
query: string
|
||||
refreshing: boolean
|
||||
refreshProgress: { finished: number; total: number }
|
||||
refreshDone: boolean
|
||||
refreshingCatId: number | null
|
||||
activeDragKind: 'tab' | null
|
||||
dragInsertIdx: number
|
||||
dragTabId: string | null
|
||||
dragOverTabId: string | null
|
||||
onTabChange: (t: string) => void
|
||||
onQuery: (q: string) => void
|
||||
onSortChange: (mode: LibrarySortOption) => void
|
||||
onSortDirToggle: () => void
|
||||
onStatusChange: (s: LibraryStatusFilter) => void
|
||||
onFilterToggle: (f: LibraryContentFilter) => void
|
||||
onFiltersClear: () => void
|
||||
onRefresh: () => void
|
||||
onCancelRefresh: () => void
|
||||
onRefreshCategory: (catId: number) => void
|
||||
onOpenDownloadsFolder: () => void
|
||||
onTabDragStart: (e: DragEvent, id: string) => void
|
||||
onTabDragOver: (e: DragEvent, id: string, idx: number) => void
|
||||
onTabDragLeave: () => void
|
||||
onTabDrop: (e: DragEvent, id: string) => void
|
||||
onTabDragEnd: () => void
|
||||
}
|
||||
|
||||
let {
|
||||
tab, savedCount, dlCount, sort, sortDesc,
|
||||
status, unread, downloaded, bookmarked, hasActiveFilters, refreshing, query,
|
||||
onTab, onQuery, onSort, onSortDesc,
|
||||
onStatus, onUnread, onDownloaded, onBookmarked, onFilterClear, onRefresh,
|
||||
tab, tabSortMode, tabSortDir, tabStatus, tabFilters,
|
||||
hasActiveFilters, visibleCategories, visibleTabIds, counts, query,
|
||||
refreshing, refreshProgress, refreshDone, refreshingCatId,
|
||||
activeDragKind, dragInsertIdx, dragTabId, dragOverTabId,
|
||||
onTabChange, onQuery, onSortChange, onSortDirToggle,
|
||||
onStatusChange, onFilterToggle, onFiltersClear,
|
||||
onRefresh, onCancelRefresh, onOpenDownloadsFolder,
|
||||
onTabDragStart, onTabDragOver, onTabDragLeave, onTabDrop, onTabDragEnd,
|
||||
}: Props = $props()
|
||||
|
||||
let sortOpen = $state(false)
|
||||
let filterOpen = $state(false)
|
||||
|
||||
const SORT_LABELS: Record<LibrarySortOption, string> = {
|
||||
alphabetical: 'A–Z',
|
||||
unread: 'Unread chapters',
|
||||
lastRead: 'Recently read',
|
||||
dateAdded: 'Date added',
|
||||
alphabetical: 'A–Z',
|
||||
unread: 'Unread chapters',
|
||||
lastRead: 'Recently read',
|
||||
dateAdded: 'Date added',
|
||||
totalChapters: 'Total chapters',
|
||||
latestFetched: 'Latest fetched',
|
||||
latestUploaded: 'Latest uploaded',
|
||||
}
|
||||
|
||||
function catById(id: string): Category | undefined {
|
||||
return visibleCategories.find(c => String(c.id) === id)
|
||||
}
|
||||
|
||||
function onDocDown(e: MouseEvent) {
|
||||
@@ -64,17 +87,49 @@
|
||||
<div class="toolbar">
|
||||
<span class="heading">Library</span>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab" class:active={tab === 'saved'} onclick={() => onTab('saved')}>
|
||||
<Books size={11} weight="bold" />
|
||||
Saved
|
||||
<span class="count">{savedCount}</span>
|
||||
</button>
|
||||
<button class="tab" class:active={tab === 'downloaded'} onclick={() => onTab('downloaded')}>
|
||||
<DownloadSimple size={11} weight="bold" />
|
||||
Downloaded
|
||||
<span class="count">{dlCount}</span>
|
||||
</button>
|
||||
<div class="tabs" role="tablist">
|
||||
{#each visibleTabIds as id, idx}
|
||||
{@const isActive = tab === id}
|
||||
{@const isDragOver = dragOverTabId === id}
|
||||
{@const showInsertBefore = activeDragKind === 'tab' && dragInsertIdx === idx}
|
||||
{@const showInsertAfter = activeDragKind === 'tab' && dragInsertIdx === idx + 1 && idx === visibleTabIds.length - 1}
|
||||
|
||||
{#if showInsertBefore}
|
||||
<div class="drop-indicator" aria-hidden="true"></div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="tab"
|
||||
class:active={isActive}
|
||||
class:drag-over={isDragOver}
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
draggable="true"
|
||||
ondragstart={(e) => onTabDragStart(e, id)}
|
||||
ondragover={(e) => onTabDragOver(e, id, idx)}
|
||||
ondragleave={onTabDragLeave}
|
||||
ondrop={(e) => onTabDrop(e, id)}
|
||||
ondragend={onTabDragEnd}
|
||||
onclick={() => onTabChange(id)}
|
||||
>
|
||||
{#if id === 'library'}
|
||||
<Books size={11} weight="bold" />
|
||||
Library
|
||||
{:else if id === 'downloaded'}
|
||||
<DownloadSimple size={11} weight="bold" />
|
||||
Downloaded
|
||||
{:else}
|
||||
{@const cat = catById(id)}
|
||||
<FolderSimple size={11} weight="bold" />
|
||||
{cat?.name ?? id}
|
||||
{/if}
|
||||
<span class="count">{counts[id] ?? 0}</span>
|
||||
</button>
|
||||
|
||||
{#if showInsertAfter}
|
||||
<div class="drop-indicator" aria-hidden="true"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
@@ -88,20 +143,36 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if tab === 'downloaded'}
|
||||
<button class="icon-btn" title="Open downloads folder" onclick={onOpenDownloadsFolder}>
|
||||
<FolderSimple size={15} weight="bold" />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="icon-btn"
|
||||
class:spinning={refreshing}
|
||||
title={refreshing ? 'Checking for updates…' : 'Check for updates'}
|
||||
onclick={onRefresh}
|
||||
disabled={refreshing}
|
||||
class:done={refreshDone}
|
||||
title={refreshing ? 'Cancel update' : 'Check for updates'}
|
||||
onclick={refreshing ? onCancelRefresh : onRefresh}
|
||||
>
|
||||
<ArrowsClockwise size={15} weight="bold" />
|
||||
{#if refreshing}
|
||||
<X size={15} weight="bold" />
|
||||
{:else}
|
||||
<ArrowsClockwise size={15} weight="bold" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if refreshing && refreshProgress.total > 0}
|
||||
<span class="refresh-label">
|
||||
{refreshProgress.finished}/{refreshProgress.total}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<div class="sort-wrap">
|
||||
<button
|
||||
class="icon-btn"
|
||||
class:active={sort !== 'alphabetical' || sortDesc}
|
||||
class:active={tabSortMode !== 'alphabetical' || tabSortDir !== 'asc'}
|
||||
title="Sort"
|
||||
onclick={() => { sortOpen = !sortOpen; filterOpen = false }}
|
||||
>
|
||||
@@ -118,21 +189,21 @@
|
||||
{#each Object.entries(SORT_LABELS) as [s, label]}
|
||||
<button
|
||||
class="item"
|
||||
class:item-active={sort === s}
|
||||
class:item-active={tabSortMode === s}
|
||||
role="menuitem"
|
||||
onclick={() => { onSort(s as LibrarySortOption); sortOpen = false }}
|
||||
onclick={() => { onSortChange(s as LibrarySortOption); sortOpen = false }}
|
||||
>
|
||||
{label}
|
||||
{#if sort === s}
|
||||
{#if sortDesc}<CaretDown size={11} weight="bold" />
|
||||
{#if tabSortMode === s}
|
||||
{#if tabSortDir === 'desc'}<CaretDown size={11} weight="bold" />
|
||||
{:else}<CaretUp size={11} weight="bold" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
<button class="item dir-toggle" role="menuitem" onclick={onSortDesc}>
|
||||
{sortDesc ? 'Descending' : 'Ascending'}
|
||||
{#if sortDesc}<CaretDown size={11} weight="bold" />
|
||||
<button class="item dir-toggle" role="menuitem" onclick={onSortDirToggle}>
|
||||
{tabSortDir === 'desc' ? 'Descending' : 'Ascending'}
|
||||
{#if tabSortDir === 'desc'}<CaretDown size={11} weight="bold" />
|
||||
{:else}<CaretUp size={11} weight="bold" />
|
||||
{/if}
|
||||
</button>
|
||||
@@ -142,12 +213,14 @@
|
||||
|
||||
<div class="filter-wrap">
|
||||
<LibraryFilters
|
||||
{status} {unread} {downloaded} {bookmarked}
|
||||
status={tabStatus}
|
||||
filters={tabFilters}
|
||||
hasActive={hasActiveFilters}
|
||||
open={filterOpen}
|
||||
onToggle={() => { filterOpen = !filterOpen; sortOpen = false }}
|
||||
{onStatus} {onUnread} {onDownloaded} {onBookmarked}
|
||||
onClear={onFilterClear}
|
||||
{onStatusChange}
|
||||
{onFilterToggle}
|
||||
onClear={onFiltersClear}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,11 +229,13 @@
|
||||
<style>
|
||||
.toolbar {
|
||||
position: relative; z-index: 100;
|
||||
display: flex; align-items: center; gap: var(--sp-4);
|
||||
display: flex; align-items: center; gap: var(--sp-3);
|
||||
padding: var(--sp-4) var(--sp-6);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0; min-width: 0;
|
||||
flex-shrink: 0; min-width: 0; overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.toolbar::-webkit-scrollbar { display: none; }
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
@@ -172,6 +247,7 @@
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md); padding: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@@ -180,15 +256,22 @@
|
||||
letter-spacing: var(--tracking-wide); text-transform: uppercase;
|
||||
padding: 4px 10px; border-radius: var(--radius-sm);
|
||||
border: 1px solid transparent; color: var(--text-faint);
|
||||
white-space: nowrap;
|
||||
white-space: nowrap; cursor: pointer;
|
||||
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.tab:hover { color: var(--text-muted); }
|
||||
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
|
||||
.tab:hover { color: var(--text-muted); }
|
||||
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
|
||||
.tab.drag-over { border-color: var(--accent); }
|
||||
|
||||
.count { font-size: var(--text-2xs); opacity: 0.6; }
|
||||
|
||||
.drop-indicator {
|
||||
width: 2px; height: 20px; background: var(--accent);
|
||||
border-radius: 1px; flex-shrink: 0;
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
margin-left: auto; flex-shrink: 0;
|
||||
@@ -205,6 +288,12 @@
|
||||
.search::placeholder { color: var(--text-faint); }
|
||||
.search:focus { border-color: var(--border-strong); }
|
||||
|
||||
.refresh-label {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wide);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px;
|
||||
@@ -216,10 +305,9 @@
|
||||
.icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
|
||||
.icon-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
.icon-btn.done { color: var(--color-success, #4caf50); border-color: color-mix(in srgb, var(--color-success, #4caf50) 40%, transparent); }
|
||||
.icon-btn.spinning :global(svg) { animation: spin 1s linear infinite; }
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.sort-wrap, .filter-wrap { position: relative; }
|
||||
|
||||
.panel {
|
||||
@@ -249,8 +337,8 @@
|
||||
cursor: pointer; text-align: left; gap: var(--sp-2);
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
}
|
||||
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
|
||||
.item:hover { background: var(--bg-overlay); color: var(--text-primary); }
|
||||
.item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
|
||||
.item-active:hover { background: var(--accent-dim); }
|
||||
.dir-toggle {
|
||||
justify-content: flex-start; color: var(--text-secondary);
|
||||
@@ -259,5 +347,6 @@
|
||||
margin-top: 2px; padding-top: 9px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
import { createSorter } from '$lib/core/algorithms/sort'
|
||||
import type { Manga } from '$lib/types'
|
||||
import type { LibrarySortOption, LibrarySortDir } from '$lib/state/library.svelte'
|
||||
|
||||
export const librarySorter = createSorter<Manga>({
|
||||
defaultField: 'alphabetical',
|
||||
defaultDir: 'asc',
|
||||
fields: [
|
||||
{
|
||||
key: 'alphabetical',
|
||||
comparator: (a, b) => a.title.localeCompare(b.title, undefined, { sensitivity: 'base' }),
|
||||
},
|
||||
{
|
||||
key: 'unread',
|
||||
comparator: (a, b) => (a.unreadCount ?? 0) - (b.unreadCount ?? 0),
|
||||
},
|
||||
{
|
||||
key: 'totalChapters',
|
||||
comparator: (a, b) => (a.chapters?.totalCount ?? 0) - (b.chapters?.totalCount ?? 0),
|
||||
},
|
||||
{
|
||||
key: 'dateAdded',
|
||||
comparator: (a, b) => Number(a.inLibraryAt ?? 0) - Number(b.inLibraryAt ?? 0),
|
||||
},
|
||||
{
|
||||
key: 'lastRead',
|
||||
comparator: (a, b, ctx) => {
|
||||
const map = ctx?.recentlyReadMap as Map<number, number> | undefined
|
||||
return (map?.get(a.id) ?? 0) - (map?.get(b.id) ?? 0)
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'latestFetched',
|
||||
comparator: (a, b) =>
|
||||
Number(a.latestFetchedChapter?.uploadDate ?? 0) - Number(b.latestFetchedChapter?.uploadDate ?? 0),
|
||||
},
|
||||
{
|
||||
key: 'latestUploaded',
|
||||
comparator: (a, b) =>
|
||||
Number(a.latestUploadedChapter?.uploadDate ?? 0) - Number(b.latestUploadedChapter?.uploadDate ?? 0),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export function sortLibrary(
|
||||
items: Manga[],
|
||||
mode: LibrarySortOption,
|
||||
dir: LibrarySortDir,
|
||||
recentlyReadMap?: Map<number, number>,
|
||||
): Manga[] {
|
||||
return librarySorter.sort(items, mode, dir, recentlyReadMap ? { recentlyReadMap } : undefined)
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import { getAdapter } from '$lib/request-manager'
|
||||
|
||||
const POLL_INTERVAL_MS = 2000
|
||||
const POLL_INITIAL_MS = 500
|
||||
|
||||
export interface UpdateProgress {
|
||||
finished: number
|
||||
total: number
|
||||
skippedManga: number
|
||||
skippedCategories: number
|
||||
}
|
||||
|
||||
export interface UpdateResult {
|
||||
entries: UpdateEntry[]
|
||||
totalUpdated: number
|
||||
newChapters: number
|
||||
}
|
||||
|
||||
export interface UpdateEntry {
|
||||
mangaId: number
|
||||
mangaTitle: string
|
||||
thumbnailUrl: string
|
||||
newChapters: number
|
||||
checkedAt: number
|
||||
}
|
||||
|
||||
export interface LibraryUpdaterCallbacks {
|
||||
onProgress: (p: UpdateProgress) => void
|
||||
onDone: (r: UpdateResult) => void
|
||||
onError: (e?: unknown) => void
|
||||
}
|
||||
|
||||
function buildEntries(
|
||||
mangaUpdates: { status: string; manga: { id: number; title: string; thumbnailUrl: string; unreadCount: number } }[]
|
||||
): UpdateEntry[] {
|
||||
const byManga = new Map<number, UpdateEntry>()
|
||||
for (const u of mangaUpdates) {
|
||||
if (u.status !== 'UPDATED') continue
|
||||
const existing = byManga.get(u.manga.id)
|
||||
if (existing) {
|
||||
existing.newChapters++
|
||||
} else {
|
||||
byManga.set(u.manga.id, {
|
||||
mangaId: u.manga.id,
|
||||
mangaTitle: u.manga.title,
|
||||
thumbnailUrl: u.manga.thumbnailUrl,
|
||||
newChapters: 1,
|
||||
checkedAt: Date.now(),
|
||||
})
|
||||
}
|
||||
}
|
||||
return [...byManga.values()]
|
||||
}
|
||||
|
||||
export function startLibraryUpdate(callbacks: LibraryUpdaterCallbacks): () => void {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
let cancelled = false
|
||||
|
||||
function cancel() {
|
||||
cancelled = true
|
||||
if (timer) { clearTimeout(timer); timer = null }
|
||||
}
|
||||
|
||||
async function run() {
|
||||
let jobsStarted = false
|
||||
|
||||
try {
|
||||
const status = await getAdapter().checkForUpdates()
|
||||
if (cancelled) return
|
||||
|
||||
const { jobsInfo } = status
|
||||
jobsStarted = jobsInfo.totalJobs > 0
|
||||
|
||||
callbacks.onProgress({
|
||||
finished: jobsInfo.finishedJobs,
|
||||
total: jobsInfo.totalJobs,
|
||||
skippedManga: jobsInfo.skippedMangasCount,
|
||||
skippedCategories: jobsInfo.skippedCategoriesCount,
|
||||
})
|
||||
|
||||
if (!jobsStarted || !jobsInfo.isRunning) {
|
||||
callbacks.onDone({ entries: [], totalUpdated: 0, newChapters: 0 })
|
||||
return
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[libraryUpdater] failed to start update', e)
|
||||
if (!cancelled) callbacks.onError(e)
|
||||
return
|
||||
}
|
||||
|
||||
function poll() {
|
||||
getAdapter().getLibraryUpdateStatus()
|
||||
.then(d => {
|
||||
if (cancelled) return
|
||||
const { jobsInfo, mangaUpdates } = d
|
||||
|
||||
if (jobsInfo.totalJobs > 0) jobsStarted = true
|
||||
callbacks.onProgress({
|
||||
finished: jobsInfo.finishedJobs,
|
||||
total: jobsInfo.totalJobs,
|
||||
skippedManga: jobsInfo.skippedMangasCount,
|
||||
skippedCategories: jobsInfo.skippedCategoriesCount,
|
||||
})
|
||||
|
||||
if (!jobsInfo.isRunning && jobsStarted) {
|
||||
const entries = buildEntries(mangaUpdates)
|
||||
const newChapters = entries.reduce((s, e) => s + e.newChapters, 0)
|
||||
callbacks.onDone({ entries, totalUpdated: entries.length, newChapters })
|
||||
return
|
||||
}
|
||||
|
||||
timer = setTimeout(poll, POLL_INTERVAL_MS)
|
||||
})
|
||||
.catch(e => {
|
||||
console.error('[libraryUpdater] poll error', e)
|
||||
if (!cancelled) callbacks.onError(e)
|
||||
})
|
||||
}
|
||||
|
||||
timer = setTimeout(poll, POLL_INITIAL_MS)
|
||||
}
|
||||
|
||||
run()
|
||||
return cancel
|
||||
}
|
||||
Reference in New Issue
Block a user