Fix SSR 500: remove nested form in browse filter panel; fix label associations
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Cleanup Preview (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 1s
CI / UI / Build (pull_request) Failing after 11s
CI / Scraper / Test (pull_request) Successful in 14s
CI / Scraper / Lint (pull_request) Successful in 19s
CI / Scraper / Build (pull_request) Successful in 37s

This commit is contained in:
Admin
2026-03-06 19:15:47 +05:00
parent ec66e86a18
commit aff6de9b45
2 changed files with 34 additions and 28 deletions

View File

@@ -311,8 +311,9 @@
{#if data.isAdmin && data.book.source_url}
<div class="mb-4 p-3 rounded bg-zinc-800/60 border border-zinc-700 flex flex-wrap items-end gap-3">
<div class="flex flex-col gap-1">
<label class="text-xs text-zinc-500">From chapter</label>
<label for="range-from" class="text-xs text-zinc-500">From chapter</label>
<input
id="range-from"
type="number"
min="1"
bind:value={rangeFrom}
@@ -321,8 +322,9 @@
/>
</div>
<div class="flex flex-col gap-1">
<label class="text-xs text-zinc-500">To chapter (optional)</label>
<label for="range-to" class="text-xs text-zinc-500">To chapter (optional)</label>
<input
id="range-to"
type="number"
min="1"
bind:value={rangeTo}

View File

@@ -357,13 +357,38 @@
<!-- Collapsible filter panel -->
{#if filtersOpen}
<!-- Admin refresh (mobile only — outside filter form to avoid nested <form>) -->
{#if data.isAdmin}
<form
method="POST"
action="?/refresh"
use:enhance={() => {
refreshing = true;
return async ({ update }) => {
await update();
refreshing = false;
};
}}
class="sm:hidden mb-2"
>
<button
type="submit"
disabled={refreshing}
class="w-full 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"
>
{refreshing ? 'Queuing…' : 'Refresh catalogue'}
</button>
</form>
{/if}
<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>
<label for="filter-sort" class="text-xs text-zinc-500 uppercase tracking-wide">Sort</label>
<select
id="filter-sort"
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"
@@ -375,8 +400,9 @@
</div>
<div class="flex flex-col gap-1">
<label class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
<label for="filter-genre" class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
<select
id="filter-genre"
name="genre"
value={data.genre}
disabled={isRankView}
@@ -389,8 +415,9 @@
</div>
<div class="flex flex-col gap-1">
<label class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
<label for="filter-status" class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
<select
id="filter-status"
name="status"
value={data.status}
disabled={isRankView}
@@ -408,29 +435,6 @@
{/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>