Persist browse view preference in localStorage; collapsible filter panel on discover page
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 0s
Deploy / Cleanup Preview (push) Has been skipped
CI / Scraper / Test (pull_request) Successful in 9s
CI / UI / Build (pull_request) Failing after 14s
CI / Scraper / Lint (pull_request) Successful in 22s
CI / Scraper / Build (pull_request) Successful in 15s
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 0s
Deploy / Cleanup Preview (push) Has been skipped
CI / Scraper / Test (pull_request) Successful in 9s
CI / UI / Build (pull_request) Failing after 14s
CI / Scraper / Lint (pull_request) Successful in 22s
CI / Scraper / Build (pull_request) Successful in 15s
This commit is contained in:
Admin
@@ -119,12 +119,27 @@
|
|||||||
const isSearchView = $derived(!!data.searchQuery);
|
const isSearchView = $derived(!!data.searchQuery);
|
||||||
|
|
||||||
|
|
||||||
// View toggle: 'grid' | 'list'. Default to 'list' when sort=rank (more detail).
|
// View toggle: 'grid' | 'list'. Persisted in localStorage.
|
||||||
let view = $state<'grid' | 'list'>(data.sort === 'rank' ? 'list' : 'grid');
|
// Rank view always uses list; otherwise restore saved preference (default: grid).
|
||||||
// Keep view in sync when sort changes via filter form.
|
const VIEW_KEY = 'libnovel:browse:view';
|
||||||
|
function savedView(): 'grid' | 'list' {
|
||||||
|
if (data.sort === 'rank') return 'list';
|
||||||
|
if (typeof localStorage !== 'undefined') {
|
||||||
|
const v = localStorage.getItem(VIEW_KEY);
|
||||||
|
if (v === 'grid' || v === 'list') return v;
|
||||||
|
}
|
||||||
|
return 'grid';
|
||||||
|
}
|
||||||
|
let view = $state<'grid' | 'list'>(savedView());
|
||||||
|
// Keep view in sync when sort changes via filter form, and persist changes.
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (data.sort === 'rank' && view === 'grid') view = 'list';
|
if (data.sort === 'rank' && view === 'grid') view = 'list';
|
||||||
});
|
});
|
||||||
|
$effect(() => {
|
||||||
|
if (typeof localStorage !== 'undefined' && data.sort !== 'rank') {
|
||||||
|
localStorage.setItem(VIEW_KEY, view);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Admin: per-novel scrape state (grid view)
|
// Admin: per-novel scrape state (grid view)
|
||||||
let scraping: Record<string, boolean> = $state({});
|
let scraping: Record<string, boolean> = $state({});
|
||||||
@@ -153,6 +168,32 @@
|
|||||||
// Admin: refresh catalogue
|
// Admin: refresh catalogue
|
||||||
let refreshing = $state(false);
|
let refreshing = $state(false);
|
||||||
|
|
||||||
|
// ── Collapsible filters panel ────────────────────────────────────────────
|
||||||
|
let filtersOpen = $state(false);
|
||||||
|
|
||||||
|
// Human-readable summary of active filters shown on the toggle button
|
||||||
|
const filterSummary = $derived(() => {
|
||||||
|
const parts: string[] = [];
|
||||||
|
const sortLabel = sorts.find((s) => s.value === data.sort)?.label ?? data.sort;
|
||||||
|
parts.push(sortLabel);
|
||||||
|
if (data.genre && data.genre !== 'all') {
|
||||||
|
const genreLabel = genres.find((g) => g.value === data.genre)?.label ?? data.genre;
|
||||||
|
parts.push(genreLabel);
|
||||||
|
}
|
||||||
|
if (data.status && data.status !== 'all') {
|
||||||
|
const statusLabel = statuses.find((s) => s.value === data.status)?.label ?? data.status;
|
||||||
|
parts.push(statusLabel);
|
||||||
|
}
|
||||||
|
return parts.join(' · ');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Whether any non-default filter is active (used to show a dot indicator)
|
||||||
|
const hasActiveFilters = $derived(
|
||||||
|
(data.genre && data.genre !== 'all') ||
|
||||||
|
(data.status && data.status !== 'all') ||
|
||||||
|
(data.sort && data.sort !== 'popular')
|
||||||
|
);
|
||||||
|
|
||||||
// ── Scroll-to-top button ─────────────────────────────────────────────────
|
// ── Scroll-to-top button ─────────────────────────────────────────────────
|
||||||
let showScrollTop = $state(false);
|
let showScrollTop = $state(false);
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
@@ -168,81 +209,25 @@
|
|||||||
<title>Discover — libnovel</title>
|
<title>Discover — libnovel</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<!-- Header row -->
|
<!-- Header -->
|
||||||
<div class="mb-6 flex items-start justify-between gap-4 flex-wrap">
|
<div class="mb-4">
|
||||||
<div>
|
<h1 class="text-2xl font-bold text-zinc-100">Discover</h1>
|
||||||
<h1 class="text-2xl font-bold text-zinc-100">Discover</h1>
|
<p class="text-zinc-400 text-sm mt-1">
|
||||||
<p class="text-zinc-400 text-sm mt-1">
|
{#if isSearchView}
|
||||||
{#if isSearchView}
|
{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
|
||||||
{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
|
{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
|
||||||
{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
|
<span class="text-zinc-500 text-xs ml-1">({data.searchLocalCount} local, {data.searchRemoteCount} from novelfire)</span>
|
||||||
<span class="text-zinc-500 text-xs ml-1">({data.searchLocalCount} local, {data.searchRemoteCount} from novelfire)</span>
|
|
||||||
{/if}
|
|
||||||
{:else if isRankView}
|
|
||||||
{#if novels.length > 0}
|
|
||||||
{novels.length} novels ranked from last catalogue scrape
|
|
||||||
{:else}
|
|
||||||
No ranking data — run a full catalogue scrape to populate
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
Browse novels from novelfire.net
|
|
||||||
{/if}
|
{/if}
|
||||||
</p> </div>
|
{:else if isRankView}
|
||||||
|
{#if novels.length > 0}
|
||||||
<div class="flex items-center gap-3 flex-wrap">
|
{novels.length} novels ranked from last catalogue scrape
|
||||||
<!-- View toggle -->
|
{:else}
|
||||||
<div class="flex items-center bg-zinc-800 border border-zinc-700 rounded overflow-hidden">
|
No ranking data — run a full catalogue scrape to populate
|
||||||
<button
|
{/if}
|
||||||
onclick={() => (view = 'grid')}
|
{:else}
|
||||||
title="Grid view"
|
Browse novels from novelfire.net
|
||||||
class="px-2.5 py-1.5 transition-colors {view === 'grid'
|
|
||||||
? 'bg-zinc-600 text-zinc-100'
|
|
||||||
: 'text-zinc-400 hover:text-zinc-200'}"
|
|
||||||
>
|
|
||||||
<!-- grid icon -->
|
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onclick={() => (view = 'list')}
|
|
||||||
title="List view"
|
|
||||||
class="px-2.5 py-1.5 transition-colors {view === 'list'
|
|
||||||
? 'bg-zinc-600 text-zinc-100'
|
|
||||||
: 'text-zinc-400 hover:text-zinc-200'}"
|
|
||||||
>
|
|
||||||
<!-- list icon -->
|
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Admin: refresh catalogue -->
|
|
||||||
{#if data.isAdmin}
|
|
||||||
<form
|
|
||||||
method="POST"
|
|
||||||
action="?/refresh"
|
|
||||||
use:enhance={() => {
|
|
||||||
refreshing = true;
|
|
||||||
return async ({ update }) => {
|
|
||||||
await update();
|
|
||||||
refreshing = false;
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={refreshing}
|
|
||||||
class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
|
||||||
>
|
|
||||||
{refreshing ? 'Queuing…' : 'Refresh catalogue'}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Admin flash messages -->
|
<!-- Admin flash messages -->
|
||||||
@@ -262,78 +247,203 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Search -->
|
<!-- Toolbar: search + filter toggle + view toggle + admin refresh -->
|
||||||
<form method="GET" action="/browse" class="flex gap-2 mb-4">
|
<div class="flex gap-2 mb-3">
|
||||||
<input
|
<!-- Search (grows to fill available space) -->
|
||||||
type="search"
|
<form method="GET" action="/browse" class="flex flex-1 gap-2 min-w-0">
|
||||||
name="q"
|
<input
|
||||||
value={data.searchQuery}
|
type="search"
|
||||||
placeholder="Search novels by title or author…"
|
name="q"
|
||||||
class="flex-1 bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400 placeholder-zinc-500"
|
value={data.searchQuery}
|
||||||
/>
|
placeholder="Search…"
|
||||||
<button
|
class="flex-1 min-w-0 bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 placeholder-zinc-500"
|
||||||
type="submit"
|
/>
|
||||||
class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors whitespace-nowrap"
|
<button
|
||||||
>
|
type="submit"
|
||||||
Search
|
class="px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors whitespace-nowrap"
|
||||||
</button>
|
|
||||||
{#if data.searchQuery}
|
|
||||||
<a
|
|
||||||
href="/browse"
|
|
||||||
class="px-3 py-1.5 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors whitespace-nowrap"
|
|
||||||
>
|
>
|
||||||
Clear
|
Search
|
||||||
</a>
|
</button>
|
||||||
{/if}
|
{#if data.searchQuery}
|
||||||
</form>
|
<a
|
||||||
|
href="/browse"
|
||||||
<!-- Filters -->
|
class="px-3 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors whitespace-nowrap"
|
||||||
<form method="GET" action="/browse" class="flex flex-wrap gap-3 mb-6">
|
>
|
||||||
<input type="hidden" name="page" value="1" />
|
Clear
|
||||||
|
</a>
|
||||||
<select
|
{/if}
|
||||||
name="genre"
|
</form>
|
||||||
value={data.genre}
|
|
||||||
disabled={isRankView}
|
|
||||||
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{#each genres as g}
|
|
||||||
<option value={g.value}>{g.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select
|
|
||||||
name="sort"
|
|
||||||
value={data.sort}
|
|
||||||
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400"
|
|
||||||
>
|
|
||||||
{#each sorts as s}
|
|
||||||
<option value={s.value}>{s.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select
|
|
||||||
name="status"
|
|
||||||
value={data.status}
|
|
||||||
disabled={isRankView}
|
|
||||||
class="bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-1.5 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{#each statuses as st}
|
|
||||||
<option value={st.value}>{st.label}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
|
<!-- Filters toggle button -->
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="button"
|
||||||
class="px-4 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
|
onclick={() => (filtersOpen = !filtersOpen)}
|
||||||
|
aria-expanded={filtersOpen}
|
||||||
|
class="relative flex items-center gap-1.5 px-3 py-2 rounded border text-sm font-medium transition-colors whitespace-nowrap
|
||||||
|
{filtersOpen
|
||||||
|
? 'bg-zinc-700 border-zinc-500 text-zinc-100'
|
||||||
|
: 'bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-zinc-500 hover:text-zinc-100'}"
|
||||||
>
|
>
|
||||||
Filter
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 4h18M7 8h10M11 12h2M9 16h6" />
|
||||||
|
</svg>
|
||||||
|
<span class="hidden sm:inline">Filters</span>
|
||||||
|
<!-- Active indicator dot -->
|
||||||
|
{#if hasActiveFilters}
|
||||||
|
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400"></span>
|
||||||
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{#if isRankView}
|
<!-- View toggle -->
|
||||||
<span class="self-center text-xs text-zinc-500 italic">Genre & status filters apply to Browse only</span>
|
<div class="flex items-center bg-zinc-800 border border-zinc-700 rounded overflow-hidden shrink-0">
|
||||||
|
<button
|
||||||
|
onclick={() => (view = 'grid')}
|
||||||
|
title="Grid view"
|
||||||
|
class="px-2.5 py-2 transition-colors {view === 'grid'
|
||||||
|
? 'bg-zinc-600 text-zinc-100'
|
||||||
|
: 'text-zinc-400 hover:text-zinc-200'}"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onclick={() => (view = 'list')}
|
||||||
|
title="List view"
|
||||||
|
class="px-2.5 py-2 transition-colors {view === 'list'
|
||||||
|
? 'bg-zinc-600 text-zinc-100'
|
||||||
|
: 'text-zinc-400 hover:text-zinc-200'}"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Admin: refresh catalogue -->
|
||||||
|
{#if data.isAdmin}
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
action="?/refresh"
|
||||||
|
use:enhance={() => {
|
||||||
|
refreshing = true;
|
||||||
|
return async ({ update }) => {
|
||||||
|
await update();
|
||||||
|
refreshing = false;
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={refreshing}
|
||||||
|
class="hidden sm:block px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{refreshing ? 'Queuing…' : 'Refresh'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
{/if}
|
{/if}
|
||||||
</form>
|
</div>
|
||||||
|
|
||||||
|
<!-- Active filter summary (shown when panel is closed and filters are active) -->
|
||||||
|
{#if !filtersOpen && hasActiveFilters}
|
||||||
|
<p class="text-xs text-zinc-500 mb-3">
|
||||||
|
<span class="text-zinc-400">{filterSummary()}</span>
|
||||||
|
<a href="/browse" class="ml-2 text-zinc-600 hover:text-zinc-400 underline underline-offset-2">clear</a>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Collapsible filter panel -->
|
||||||
|
{#if filtersOpen}
|
||||||
|
<form method="GET" action="/browse" class="mb-4 p-3 rounded-lg bg-zinc-800/60 border border-zinc-700 flex flex-col gap-3">
|
||||||
|
<input type="hidden" name="page" value="1" />
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="text-xs text-zinc-500 uppercase tracking-wide">Sort</label>
|
||||||
|
<select
|
||||||
|
name="sort"
|
||||||
|
value={data.sort}
|
||||||
|
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 w-full"
|
||||||
|
>
|
||||||
|
{#each sorts as s}
|
||||||
|
<option value={s.value}>{s.label}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
|
||||||
|
<select
|
||||||
|
name="genre"
|
||||||
|
value={data.genre}
|
||||||
|
disabled={isRankView}
|
||||||
|
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
|
||||||
|
>
|
||||||
|
{#each genres as g}
|
||||||
|
<option value={g.value}>{g.label}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
|
||||||
|
<select
|
||||||
|
name="status"
|
||||||
|
value={data.status}
|
||||||
|
disabled={isRankView}
|
||||||
|
class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
|
||||||
|
>
|
||||||
|
{#each statuses as st}
|
||||||
|
<option value={st.value}>{st.label}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if isRankView}
|
||||||
|
<p class="text-xs text-zinc-500 italic">Genre & status filters apply to Browse only</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="flex gap-2 justify-end">
|
||||||
|
<!-- Admin refresh (mobile only — shown here since toolbar button is hidden on mobile) -->
|
||||||
|
{#if data.isAdmin}
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
action="?/refresh"
|
||||||
|
use:enhance={() => {
|
||||||
|
refreshing = true;
|
||||||
|
return async ({ update }) => {
|
||||||
|
await update();
|
||||||
|
refreshing = false;
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
class="sm:hidden mr-auto"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={refreshing}
|
||||||
|
class="px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{refreshing ? 'Queuing…' : 'Refresh'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
{/if}
|
||||||
|
<a href="/browse" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
|
||||||
|
Reset
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
onclick={() => (filtersOpen = false)}
|
||||||
|
class="px-4 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
{#if novels.length === 0}
|
{#if novels.length === 0}
|
||||||
|
|||||||
Reference in New Issue
Block a user