kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

Persist browse view preference in localStorage; collapsible filter panel on discover page
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Details
Deploy / Deploy Preview (push) Failing after 0s
Details
Deploy / Cleanup Preview (push) Has been skipped
Details
CI / Scraper / Test (pull_request) Successful in 9s
Details
CI / UI / Build (pull_request) Failing after 14s
Details
CI / Scraper / Lint (pull_request) Successful in 22s
Details
CI / Scraper / Build (pull_request) Successful in 15s
Details

Browse Source
This commit is contained in:
Admin
2026-03-06 19:12:04 +05:00
parent 9b7cdad71a
commit ec66e86a18
1 changed files with 251 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
ui/src/routes/browse/+page.svelte
View File

@@ -119,12 +119,27 @@
const isSearchView = $derived(!!data.searchQuery);
// View toggle: 'grid' | 'list'. Default to 'list' when sort=rank (more detail).
let view = $state<'grid' | 'list'>(data.sort === 'rank' ? 'list' : 'grid');
// Keep view in sync when sort changes via filter form.
// View toggle: 'grid' | 'list'. Persisted in localStorage.
// Rank view always uses list; otherwise restore saved preference (default: grid).
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(() => {
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)
let scraping: Record<string, boolean> = $state({});
@@ -153,6 +168,32 @@
// Admin: refresh catalogue
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 ─────────────────────────────────────────────────
let showScrollTop = $state(false);
$effect(() => {
@@ -168,81 +209,25 @@
<title>Discover — libnovel</title>
</svelte:head>
<!-- Header row -->
<div class="mb-6 flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 class="text-2xl font-bold text-zinc-100">Discover</h1>
<p class="text-zinc-400 text-sm mt-1">
{#if isSearchView}
{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
<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
<!-- Header -->
<div class="mb-4">
<h1 class="text-2xl font-bold text-zinc-100">Discover</h1>
<p class="text-zinc-400 text-sm mt-1">
{#if isSearchView}
{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
<span class="text-zinc-500 text-xs ml-1">({data.searchLocalCount} local, {data.searchRemoteCount} from novelfire)</span>
{/if}
</p> </div>
<div class="flex items-center gap-3 flex-wrap">
<!-- View toggle -->
<div class="flex items-center bg-zinc-800 border border-zinc-700 rounded overflow-hidden">
<button
onclick={() => (view = 'grid')}
title="Grid view"
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>
{: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}
</div>
</p>
</div>
<!-- Admin flash messages -->
@@ -262,78 +247,203 @@
{/if}
{/if}
<!-- Search -->
<form method="GET" action="/browse" class="flex gap-2 mb-4">
<input
type="search"
name="q"
value={data.searchQuery}
placeholder="Search novels by title or author…"
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"
/>
<button
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"
>
Search
</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"
<!-- Toolbar: search + filter toggle + view toggle + admin refresh -->
<div class="flex gap-2 mb-3">
<!-- Search (grows to fill available space) -->
<form method="GET" action="/browse" class="flex flex-1 gap-2 min-w-0">
<input
type="search"
name="q"
value={data.searchQuery}
placeholder="Search…"
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"
/>
<button
type="submit"
class="px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors whitespace-nowrap"
>
Clear
</a>
{/if}
</form>
<!-- Filters -->
<form method="GET" action="/browse" class="flex flex-wrap gap-3 mb-6">
<input type="hidden" name="page" value="1" />
<select
name="genre"
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>
Search
</button>
{#if data.searchQuery}
<a
href="/browse"
class="px-3 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors whitespace-nowrap"
>
Clear
</a>
{/if}
</form>
<!-- Filters toggle button -->
<button
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"
type="button"
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>
{#if isRankView}
<span class="self-center text-xs text-zinc-500 italic">Genre &amp; status filters apply to Browse only</span>
<!-- View toggle -->
<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}
</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 &amp; 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 -->
{#if novels.length === 0}