mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-14 09:49:58 -05:00
Chore: Port over Settings (Barely Works)
This commit is contained in:
Youwes09
@@ -0,0 +1,170 @@
|
||||
<script lang="ts">
|
||||
import { Check, Funnel } from 'phosphor-svelte'
|
||||
import type { MangaStatus } from '$lib/server-adapters/types'
|
||||
|
||||
interface Props {
|
||||
status: MangaStatus | 'all'
|
||||
unread: boolean
|
||||
downloaded: boolean
|
||||
bookmarked: boolean
|
||||
hasActive: boolean
|
||||
open: boolean
|
||||
onToggle: () => void
|
||||
onStatus: (s: MangaStatus | 'all') => void
|
||||
onUnread: () => void
|
||||
onDownloaded: () => void
|
||||
onBookmarked: () => void
|
||||
onClear: () => void
|
||||
}
|
||||
|
||||
let {
|
||||
status, unread, downloaded, bookmarked, hasActive, open,
|
||||
onToggle, onStatus, onUnread, onDownloaded, onBookmarked, onClear,
|
||||
}: Props = $props()
|
||||
|
||||
const STATUSES: [MangaStatus, string][] = [
|
||||
['ONGOING', 'Ongoing'],
|
||||
['COMPLETED', 'Completed'],
|
||||
['ON_HIATUS', 'Hiatus'],
|
||||
['CANCELLED', 'Cancelled'],
|
||||
['PUBLISHING_FINISHED', 'Publishing finished'],
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="wrap">
|
||||
<button
|
||||
class="icon-btn"
|
||||
class:active={hasActive}
|
||||
title="Filter"
|
||||
onclick={onToggle}
|
||||
>
|
||||
<Funnel size={15} weight={hasActive ? 'fill' : 'bold'} />
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
<div class="panel" role="menu">
|
||||
<div class="panel-head">
|
||||
<span class="panel-title">Filter</span>
|
||||
{#if hasActive}
|
||||
<button class="clear-btn" onclick={onClear}>Clear all</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<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}
|
||||
<button
|
||||
class="item"
|
||||
class:item-active={f.active}
|
||||
role="menuitem"
|
||||
onclick={f.handler}
|
||||
>
|
||||
<span class="check" class:check-on={f.active}>
|
||||
{#if f.active}<Check size={9} weight="bold" />{/if}
|
||||
</span>
|
||||
{f.label}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<div class="divider"></div>
|
||||
<p class="section-label">Status</p>
|
||||
|
||||
{#each STATUSES as [s, label]}
|
||||
<button
|
||||
class="item"
|
||||
class:item-active={status === s}
|
||||
role="menuitem"
|
||||
onclick={() => onStatus(status === s ? 'all' : s)}
|
||||
>
|
||||
<span class="check" class:check-on={status === s}>
|
||||
{#if status === s}<Check size={9} weight="bold" />{/if}
|
||||
</span>
|
||||
{label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrap { position: relative; }
|
||||
|
||||
.icon-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
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.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);
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 6px 10px 4px;
|
||||
}
|
||||
.panel-title {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide); color: var(--text-secondary);
|
||||
font-weight: var(--weight-medium, 500);
|
||||
}
|
||||
.clear-btn {
|
||||
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);
|
||||
}
|
||||
.clear-btn:hover { color: var(--color-error); }
|
||||
|
||||
.divider { height: 1px; background: var(--border-dim); margin: 4px 2px; }
|
||||
|
||||
.section-label {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wider); text-transform: uppercase;
|
||||
color: var(--text-faint); padding: 4px 8px 8px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.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;
|
||||
color: var(--bg-base);
|
||||
transition: background var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
.check-on { background: var(--accent); border-color: var(--accent); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
</style>
|
||||
@@ -0,0 +1,246 @@
|
||||
<script lang="ts">
|
||||
import { CheckSquare, Trash } from 'phosphor-svelte'
|
||||
import type { Manga } 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
|
||||
}
|
||||
|
||||
let {
|
||||
items, loading, selectMode, selected, tab,
|
||||
onCardClick, onSelectAll, onExitSelect, onBulkRemove,
|
||||
}: Props = $props()
|
||||
|
||||
const THUMB_BASE = 'http://127.0.0.1:4567'
|
||||
|
||||
function coverUrl(m: Manga) {
|
||||
const url = m.thumbnailUrl ?? ''
|
||||
return url.startsWith('http') ? url : `${THUMB_BASE}${url}`
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if selectMode}
|
||||
<div class="select-bar">
|
||||
<span class="sel-count">{selected.size} selected</span>
|
||||
<button class="sel-text-btn" onclick={onSelectAll}>Select all</button>
|
||||
<div class="sel-right">
|
||||
<button
|
||||
class="sel-action-btn sel-danger"
|
||||
disabled={selected.size === 0}
|
||||
onclick={onBulkRemove}
|
||||
>
|
||||
<Trash size={13} weight="bold" />
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="content"
|
||||
role="presentation"
|
||||
onclick={(e) => {
|
||||
if (selectMode && !(e.target as HTMLElement).closest('.card')) onExitSelect()
|
||||
}}
|
||||
>
|
||||
{#if loading}
|
||||
<div class="grid">
|
||||
{#each Array(12) as _}
|
||||
<div class="card-skeleton">
|
||||
<div class="cover-skeleton skeleton"></div>
|
||||
<div class="title-skeleton skeleton"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{:else if items.length === 0}
|
||||
<div class="empty">
|
||||
{tab === 'downloaded'
|
||||
? 'No downloaded manga.'
|
||||
: 'No manga saved to library — browse sources to add some.'}
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="grid">
|
||||
{#each items as m (m.id)}
|
||||
{@const isSelected = selected.has(m.id)}
|
||||
{@const isCompleted = !m.unreadCount && (m.chapters?.totalCount ?? 0) > 0}
|
||||
<button
|
||||
class="card"
|
||||
class:card-selected={isSelected}
|
||||
class:select-mode={selectMode}
|
||||
onclick={(e) => onCardClick(e, m)}
|
||||
oncontextmenu={(e) => {
|
||||
e.preventDefault()
|
||||
onCardClick(e, m)
|
||||
}}
|
||||
>
|
||||
<div class="cover-wrap" class:completed={isCompleted}>
|
||||
<img
|
||||
class="cover"
|
||||
src={coverUrl(m)}
|
||||
alt={m.title}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="overlay">
|
||||
<div class="badges">
|
||||
{#if isCompleted}
|
||||
<span class="badge badge-done">✓ Done</span>
|
||||
{:else if m.unreadCount}
|
||||
<span class="badge badge-unread">{m.unreadCount} new</span>
|
||||
{/if}
|
||||
{#if m.downloadCount}
|
||||
<span class="badge badge-dl">↓ {m.downloadCount}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if selectMode}
|
||||
<div class="select-overlay" aria-hidden="true">
|
||||
<div class="select-check" class:checked={isSelected}>
|
||||
{#if isSelected}
|
||||
<CheckSquare size={20} weight="fill" />
|
||||
{:else}
|
||||
<div class="check-empty"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="title">{m.title}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
flex: 1; overflow-y: auto;
|
||||
padding: var(--sp-5) var(--sp-6) var(--sp-6);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.select-bar {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
padding: var(--sp-2) var(--sp-6);
|
||||
background: var(--bg-raised); border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0; z-index: 10; position: relative;
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
.sel-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
|
||||
.sel-count {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-secondary); letter-spacing: var(--tracking-wide); white-space: nowrap;
|
||||
}
|
||||
.sel-text-btn {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-faint); background: none; border: none;
|
||||
cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm);
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
.sel-text-btn:hover { color: var(--text-primary); }
|
||||
.sel-action-btn {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
padding: 5px 10px; border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim); background: var(--bg-raised);
|
||||
color: var(--text-muted); cursor: pointer; white-space: nowrap;
|
||||
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-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);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
|
||||
.card:not(.select-mode):hover .cover-wrap {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
|
||||
}
|
||||
.card:not(.select-mode):hover .title { color: var(--text-primary); }
|
||||
.card.select-mode { cursor: default; }
|
||||
.card.card-selected .cover-wrap { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md); }
|
||||
.card.card-selected .title { color: var(--accent-fg); }
|
||||
|
||||
.cover-wrap {
|
||||
position: relative; aspect-ratio: 2/3; overflow: hidden;
|
||||
border-radius: var(--radius-md); background: var(--bg-raised);
|
||||
border: 1px solid var(--border-dim); will-change: transform;
|
||||
transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), border-color var(--t-base), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1);
|
||||
}
|
||||
.cover-wrap.completed { box-shadow: inset 0 -2px 0 0 var(--accent); }
|
||||
|
||||
.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
|
||||
.overlay {
|
||||
position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
|
||||
padding: 32px 6px 10px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
|
||||
opacity: 0; pointer-events: none;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
.card:not(.select-mode):hover .overlay { opacity: 1; }
|
||||
|
||||
.badges { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
|
||||
.badge {
|
||||
font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
|
||||
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; }
|
||||
|
||||
.select-overlay {
|
||||
position: absolute; inset: 0; z-index: 3;
|
||||
background: rgba(0,0,0,0.18);
|
||||
display: flex; align-items: flex-start; justify-content: flex-end;
|
||||
padding: 6px; pointer-events: none;
|
||||
}
|
||||
.select-check { color: var(--text-faint); opacity: 0.7; transition: color var(--t-base), opacity var(--t-base); }
|
||||
.select-check.checked { color: var(--accent-fg); opacity: 1; }
|
||||
.check-empty {
|
||||
width: 20px; height: 20px; border-radius: 4px;
|
||||
border: 2px solid var(--text-faint); background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: var(--sp-2); font-size: var(--text-sm);
|
||||
color: var(--text-secondary); line-height: var(--leading-snug);
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
overflow: hidden; height: 2lh;
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
|
||||
.card-skeleton { padding: 0; }
|
||||
.cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }
|
||||
.title-skeleton { height: 12px; margin-top: var(--sp-2); width: 80%; border-radius: var(--radius-sm); }
|
||||
.skeleton { background: var(--bg-raised); animation: pulse 1.4s ease infinite; }
|
||||
|
||||
.empty {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 60%; color: var(--text-muted); font-size: var(--text-sm);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
|
||||
</style>
|
||||
@@ -0,0 +1,263 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
MagnifyingGlass, Books, DownloadSimple,
|
||||
SortAscending, CaretUp, CaretDown, ArrowsClockwise,
|
||||
} 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'
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
let {
|
||||
tab, savedCount, dlCount, sort, sortDesc,
|
||||
status, unread, downloaded, bookmarked, hasActiveFilters, refreshing, query,
|
||||
onTab, onQuery, onSort, onSortDesc,
|
||||
onStatus, onUnread, onDownloaded, onBookmarked, onFilterClear, onRefresh,
|
||||
}: 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',
|
||||
}
|
||||
|
||||
function onDocDown(e: MouseEvent) {
|
||||
const t = e.target as HTMLElement
|
||||
if (sortOpen && !t.closest('.sort-wrap')) sortOpen = false
|
||||
if (filterOpen && !t.closest('.filter-wrap')) filterOpen = false
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
document.addEventListener('mousedown', onDocDown, true)
|
||||
return () => document.removeEventListener('mousedown', onDocDown, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="right">
|
||||
<div class="search-wrap">
|
||||
<MagnifyingGlass size={13} class="search-icon" weight="light" />
|
||||
<input
|
||||
class="search"
|
||||
placeholder="Search"
|
||||
value={query}
|
||||
oninput={(e) => onQuery((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="icon-btn"
|
||||
class:spinning={refreshing}
|
||||
title={refreshing ? 'Checking for updates…' : 'Check for updates'}
|
||||
onclick={onRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<ArrowsClockwise size={15} weight="bold" />
|
||||
</button>
|
||||
|
||||
<div class="sort-wrap">
|
||||
<button
|
||||
class="icon-btn"
|
||||
class:active={sort !== 'alphabetical' || sortDesc}
|
||||
title="Sort"
|
||||
onclick={() => { sortOpen = !sortOpen; filterOpen = false }}
|
||||
>
|
||||
<SortAscending size={15} weight="bold" />
|
||||
</button>
|
||||
|
||||
{#if sortOpen}
|
||||
<div class="panel sort-panel" role="menu">
|
||||
<div class="panel-head">
|
||||
<span class="panel-title">Sort</span>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<p class="section-label">Order by</p>
|
||||
{#each Object.entries(SORT_LABELS) as [s, label]}
|
||||
<button
|
||||
class="item"
|
||||
class:item-active={sort === s}
|
||||
role="menuitem"
|
||||
onclick={() => { onSort(s as LibrarySortOption); sortOpen = false }}
|
||||
>
|
||||
{label}
|
||||
{#if sort === s}
|
||||
{#if sortDesc}<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" />
|
||||
{:else}<CaretUp size={11} weight="bold" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="filter-wrap">
|
||||
<LibraryFilters
|
||||
{status} {unread} {downloaded} {bookmarked}
|
||||
hasActive={hasActiveFilters}
|
||||
open={filterOpen}
|
||||
onToggle={() => { filterOpen = !filterOpen; sortOpen = false }}
|
||||
{onStatus} {onUnread} {onDownloaded} {onBookmarked}
|
||||
onClear={onFilterClear}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toolbar {
|
||||
position: relative; z-index: 100;
|
||||
display: flex; align-items: center; gap: var(--sp-4);
|
||||
padding: var(--sp-4) var(--sp-6);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0; min-width: 0;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
color: var(--text-faint); letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md); padding: 2px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
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;
|
||||
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab:hover { color: var(--text-muted); }
|
||||
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
|
||||
|
||||
.count { font-size: var(--text-2xs); opacity: 0.6; }
|
||||
|
||||
.right {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
margin-left: auto; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-wrap { position: relative; display: flex; align-items: center; }
|
||||
.search-wrap :global(.search-icon) { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; }
|
||||
.search {
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md); padding: 5px 10px 5px 28px;
|
||||
color: var(--text-primary); font-size: var(--text-sm); width: 180px;
|
||||
outline: none; transition: border-color var(--t-base);
|
||||
}
|
||||
.search::placeholder { color: var(--text-faint); }
|
||||
.search:focus { border-color: var(--border-strong); }
|
||||
|
||||
.icon-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 30px; height: 30px;
|
||||
border-radius: var(--radius-md); border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised); color: var(--text-faint);
|
||||
cursor: pointer; flex-shrink: 0;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) { 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.spinning :global(svg) { animation: spin 1s linear infinite; }
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.sort-wrap, .filter-wrap { position: relative; }
|
||||
|
||||
.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);
|
||||
animation: fadeIn 0.1s ease both;
|
||||
}
|
||||
.panel-head { display: flex; align-items: center; padding: 6px 10px 4px; }
|
||||
.panel-title {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide); color: var(--text-secondary);
|
||||
font-weight: var(--weight-medium, 500);
|
||||
}
|
||||
.divider { height: 1px; background: var(--border-dim); margin: 4px 2px; }
|
||||
.section-label {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wider); text-transform: uppercase;
|
||||
color: var(--text-faint); padding: 4px 8px 8px;
|
||||
}
|
||||
.item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
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; 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-active:hover { background: var(--accent-dim); }
|
||||
.dir-toggle {
|
||||
justify-content: flex-start; color: var(--text-secondary);
|
||||
border-top: 1px solid var(--border-dim);
|
||||
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
|
||||
margin-top: 2px; padding-top: 9px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
</style>
|
||||
Reference in New Issue
Block a user