fix(ui): defer catalogue filter navigation to explicit Apply button

Removed onchange→navigateWithFilters from all three selects — the
immediate navigation on every change was the root cause of both bugs:
1. Filters applied before the user finished selecting all options.
2. Svelte 5 bind:value updates state after onchange fires, so the
   navigateWithFilters call read stale values → wrong URL params → no results.

Renamed navigateWithFilters to applyFilters (no overrides arg needed).
Added an amber Apply button next to Reset; selects now only update local
state until the user presses Apply.

.gitea/workflows/release.yaml

@@ -218,6 +218,7 @@ jobs:
           build-args: |
             BUILD_VERSION=${{ steps.meta.outputs.version }}
             BUILD_COMMIT=${{ gitea.sha }}
+            BUILD_TIME=${{ gitea.event.head_commit.timestamp }}
           cache-from: type=registry,ref=${{ secrets.DOCKER_USER }}/libnovel-ui:latest
           cache-to: type=inline
 

homelab/docker-compose.yml

@@ -222,6 +222,10 @@ services:
       EMAIL_SMTP_USERNAME: "${FIDER_SMTP_USER}"
       EMAIL_SMTP_PASSWORD: "${FIDER_SMTP_PASSWORD}"
       EMAIL_SMTP_ENABLE_STARTTLS: "false"
+      OAUTH_GOOGLE_CLIENTID: "${OAUTH_GOOGLE_CLIENTID}"
+      OAUTH_GOOGLE_SECRET: "${OAUTH_GOOGLE_SECRET}"
+      OAUTH_GITHUB_CLIENTID: "${OAUTH_GITHUB_CLIENTID}"
+      OAUTH_GITHUB_SECRET: "${OAUTH_GITHUB_SECRET}"
 
   # ── Dozzle ──────────────────────────────────────────────────────────────────
   # Watches both homelab and prod containers.

ui/Dockerfile

@@ -14,10 +14,12 @@ COPY . .
 # Build-time version info — injected by docker-compose or CI via --build-arg.
 ARG BUILD_VERSION=dev
 ARG BUILD_COMMIT=unknown
+ARG BUILD_TIME=unknown
 
 # Expose as PUBLIC_ env vars so SvelteKit's $env/dynamic/public can read them.
 ENV PUBLIC_BUILD_VERSION=$BUILD_VERSION
 ENV PUBLIC_BUILD_COMMIT=$BUILD_COMMIT
+ENV PUBLIC_BUILD_TIME=$BUILD_TIME
 
 RUN npm run build
 
@@ -40,5 +42,16 @@ ENV NODE_ENV=production
 ENV PORT=3000
 ENV HOST=0.0.0.0
 
+# Carry build-time metadata into the runtime image so the UI footer can
+# display the version, commit SHA, and build timestamp.
+# These must be re-declared after the second FROM — ARG values do not
+# cross stage boundaries, but ENV values set here persist at runtime.
+ARG BUILD_VERSION=dev
+ARG BUILD_COMMIT=unknown
+ARG BUILD_TIME=unknown
+ENV PUBLIC_BUILD_VERSION=$BUILD_VERSION
+ENV PUBLIC_BUILD_COMMIT=$BUILD_COMMIT
+ENV PUBLIC_BUILD_TIME=$BUILD_TIME
+
 EXPOSE $PORT
 CMD ["node", "build"]

ui/src/routes/+layout.svelte

@@ -433,7 +433,15 @@
 			<a href="/dmca" class="hover:text-zinc-500 transition-colors">DMCA</a>
 			<span>&copy; {new Date().getFullYear()} libnovel</span>
 		</div>
-		<!-- Build version / commit SHA -->
+		<!-- Build version / commit SHA / build time -->
+		{#snippet buildTime()}
+			{#if env.PUBLIC_BUILD_TIME && env.PUBLIC_BUILD_TIME !== 'unknown'}
+				{@const d = new Date(env.PUBLIC_BUILD_TIME)}
+				<span class="text-zinc-500" title="Build time">
+					· {d.toUTCString().replace(' GMT', ' UTC').replace(/:\d\d /, ' ')}
+				</span>
+			{/if}
+		{/snippet}
 		<div class="text-xs tabular-nums font-mono px-2 py-0.5 rounded bg-zinc-800 border border-zinc-700">
 			{#if env.PUBLIC_BUILD_VERSION && env.PUBLIC_BUILD_VERSION !== 'dev'}
 				<span class="text-zinc-300" title="Build version">{env.PUBLIC_BUILD_VERSION}</span>
@@ -442,6 +450,7 @@
 						>+{env.PUBLIC_BUILD_COMMIT.slice(0, 7)}</span
 					>
 				{/if}
+				{@render buildTime()}
 			{:else}
 				<span class="text-zinc-400">dev</span>
 			{/if}

ui/src/routes/catalogue/+page.svelte

@@ -22,11 +22,11 @@
 		filterStatus = data.status;
 	});
 
-	function navigateWithFilters(overrides: { sort?: string; genre?: string; status?: string }) {
+	function applyFilters() {
 		const params = new URLSearchParams();
-		params.set('sort', overrides.sort ?? filterSort);
-		params.set('genre', overrides.genre ?? filterGenre);
-		params.set('status', overrides.status ?? filterStatus);
+		params.set('sort', filterSort);
+		params.set('genre', filterGenre);
+		params.set('status', filterStatus);
 		params.set('page', '1');
 		goto(`/catalogue?${params.toString()}`);
 	}
@@ -414,7 +414,6 @@
 					id="filter-sort"
 					name="sort"
 					bind:value={filterSort}
-					onchange={() => navigateWithFilters({ sort: filterSort })}
 					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}
@@ -429,7 +428,6 @@
 					id="filter-genre"
 					name="genre"
 					bind:value={filterGenre}
-					onchange={() => navigateWithFilters({ genre: filterGenre })}
 					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"
 				>
@@ -445,7 +443,6 @@
 					id="filter-status"
 					name="status"
 					bind:value={filterStatus}
-					onchange={() => navigateWithFilters({ status: filterStatus })}
 					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"
 				>
@@ -464,6 +461,13 @@
 			<a href="/catalogue" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
 				Reset
 			</a>
+			<button
+				type="button"
+				onclick={applyFilters}
+				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}