docs: add changelog for v0.1–0.3

Co-Authored-By: claude-sonnet-4-5@lucy
Use react-bootstrap throughout, improve entry detail
2026-02-17 18:20:44 +00:00 · 2026-02-17 18:17:58 +00:00
15 changed files with 1542 additions and 1595 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -67,7 +67,7 @@ next-explorer/
    - `RegisterDetail.tsx`: Client Component that renders a single register’s details, including modes, notes, and source modal.
    - `[hex]/page.tsx`: Dynamic route that renders details for a specific register by hex address.
 - `src/app/zxdb/`: ZXDB Explorer routes and client components.
-  - `page.tsx` + `ZxdbExplorer.tsx`: Search + filters with server-rendered initial content and ISR.
+  - `page.tsx`: ZXDB hub page linking to entries, releases, labels, etc.
  - `entries/[id]/page.tsx` + `EntryDetail.tsx`: Entry details (SSR initial data).
  - `releases/page.tsx` + `ReleasesExplorer.tsx`: Releases search + filters.
  - `labels/page.tsx`, `labels/[id]/page.tsx` + client: Labels search and detail.
@@ -108,6 +108,25 @@ Comment what the code does, not what the agent has done. The documentation's pur
 - Use `type` for interfaces.
 - No `enum`.

+### UI / Bootstrap Patterns
+
+The project uses the **Bootswatch Pulse** theme (purple primary) with `react-bootstrap` and `react-bootstrap-icons`.
+
+- **Always use react-bootstrap components** over raw HTML+className for Bootstrap elements:
+  - `Card`, `Table`, `Badge`, `Button`, `Alert`, `Form.Control`, `Form.Select`, `Form.Check`, `InputGroup`, `Spinner`, `Collapse` etc.
+  - Icons from `react-bootstrap-icons` (e.g. `Search`, `ChevronDown`, `Download`, `BoxArrowUpRight`).
+- **Match existing patterns** — see `RegisterBrowser.tsx` and `Navbar.tsx` for canonical react-bootstrap usage.
+- **Shared explorer components** in `src/components/explorer/`:
+  - `ExplorerLayout` — two-column layout (sidebar + content).
+  - `FilterSidebar` — `Card` wrapper with optional "Reset all filters" button.
+  - `FilterSection` — collapsible filter group with label, badge, and `Collapse` animation.
+  - `MultiSelectChips` — chip-toggle selector with optional collapsed summary mode.
+  - `Pagination` — prev/next with page counter and loading spinner.
+- **Stale-while-revalidate pattern** — show previous results at reduced opacity during loading (`className={loading ? "opacity-50" : ""}`), never blank the screen.
+- **Empty states** — only show a section/card if it has data. Do not render empty cards with "No X recorded" placeholders; omit them entirely.
+- **Tables** — use react-bootstrap `<Table size="sm" striped>` for data tables. Human-readable sizes (KB/MB) over raw bytes. Omit columns that add noise without value (e.g. MD5 hashes).
+- **Alerts** — use `<Alert variant="warning">` for "no results" states with actionable suggestions (e.g. offering to broaden filters).
+
 ### React / Next.js Patterns

 - **Server Components**:
@@ -122,7 +141,7 @@ Comment what the code does, not what the agent has done. The documentation's pur
  - `RegisterDetail.tsx`:
    - Marked with `'use client'`.
    - Renders a single register with tabs for different access modes.
-  - ZXDB client components (e.g., `ZxdbExplorer.tsx`, `EntryDetail.tsx`, `labels/*`) receive initial data from the server and keep interactions on the client without blocking the first paint.
+  - ZXDB client components (e.g., `EntriesExplorer.tsx`, `EntryDetail.tsx`, `labels/*`) receive initial data from the server and keep interactions on the client without blocking the first paint.

 - **Dynamic Routing**:
  - Pages and API routes must await dynamic params in Next.js 15:
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -0,0 +1,89 @@
+# Changelog 📜
+
+All notable changes to Next Explorer, in roughly chronological order.
+
+---
+
+## 🚧 v0.3.0 — Tapes, Hashes & Downloads *(unreleased, Feb 2026)*
+
+The great "what IS this .tap file?" release. ZXDB downloads become first-class citizens with local mirroring, grouping, inline previews, and now the ability to identify a tape by dropping it on the page.
+
+### ✨ New
+- **Tape Identifier** — drag-and-drop a `.tap`/`.tzx`/`.p`/`.o` file onto `/zxdb` and get instant ZXDB entry matches based on SHA-256 hash lookup 🎯
+- **Software hashes database** — 32,960-row snapshot of SHA-256 hashes for known ZXDB downloads, with a pipeline script (`update-software-hashes.mjs`) to rebuild/extend it
+- **Local ZXDB / WoS mirror support** — proxy downloads through the app's own API so self-hosted mirrors work seamlessly; inline previews rendered without leaving the page
+- **Magazine reviews** — reviews now shown on magazine issue pages
+- **Label detail pages** — full label view with releases, genre breakdown, and year filtering
+- **Year filter** on releases/entries
+
+### 🔧 Improved
+- Download viewer reworked: grouped by format, inline previews, human-readable sizes
+- Local file path resolution corrected for edge-cases
+- Silently skip `/denied/` and other non-hosted prefixes during hash imports
+
+---
+
+## ✅ v0.2.0 — ZXDB Explorer *(December 2025 – January 2026)*
+
+The big one. A full cross-linked browser for the ZXDB software database, server-rendered for fast first paint, with deep links everywhere.
+
+### ✨ New
+- **ZXDB integration** — MySQL via `mysql2` + Drizzle ORM; Zod-validated env (`ZXDB_URL`)
+- **Entries browser** — search, paginate, filter; deep-links to individual entry pages
+- **Entry detail pages** — aliases, web references, relations, tags, ports, scores, origins, facets 🗂️
+- **Releases browser** — filterable by machine type, genre, label, year; download links
+- **Labels browser + detail** — label pages with linked releases
+- **Genres, Languages, Machine Types** — category hubs with entry counts
+- **Magazines + Issues** — stub magazine browser with issue listing
+- **Cross-linked UI** — `EntryLink` component used everywhere; Next `Link` for prefetching
+- **SSR + ISR** — index pages server-render initial data; `revalidate = 3600` on non-search pages for fast repeat visits
+- **Multi-select machine type filter** with chip toggles; favouring Next hardware by default
+- **Shared explorer components** — `ExplorerLayout`, `FilterSidebar`, `FilterSection`, `MultiSelectChips`, `Pagination` 🧩
+- **Breadcrumbs** decoupled from search input
+- **Landing page** for `/zxdb` with hub links and hero
+- **Deploy helper** script (`bin/deploy.sh`)
+- **OG images** for register pages (happy new year from Codex 🎉)
+
+### 🔧 Improved
+- ZXDB pagination counters fixed
+- Facets filter aliasing corrected
+- Case-insensitive search improvements
+- Graceful handling of missing `releases` / `downloads` schema tables
+- Homepage hero updated
+- Registers sidebar refactored to share explorer components
+
+### 🏗️ Infrastructure
+- Zod env validation for all ZXDB config
+- `information_schema.tables` check before querying optional tables
+- API routes under `/api/zxdb/*` with Zod input validation, Node runtime
+- ZXDB setup guide at `docs/ZXDB.md`
+
+---
+
+## ✅ v0.1.0 — Registers Explorer *(October – November 2025)*
+
+The origin story. Started from a Create Next App scaffold with a GPT-5 assist, then heavily hand-crafted into something actually useful for exploring Spectrum Next hardware registers.
+
+### ✨ New
+- **Register browser** — loads and parses `data/nextreg.txt`; real-time search/filter with results at a glance
+- **Register detail pages** — per-mode bitfield views (read/write/common), notes, and source modal
+- **Source viewer** — inline modal showing the raw `nextreg.txt` source for any register
+- **Wikilink support** — links parsed from register definitions and rendered as external refs
+- **Multi-parser architecture** — `reg_default.ts` for standard registers; `reg_f0.ts` for the exotic `0xF0` register; easy to extend 🔌
+- **Multi-line footnote support** — parser handles footnotes that span multiple lines
+- **Deep-linkable search** — `?q=` query param synced to the search box so searches can be bookmarked/shared 🔗
+- **Dark mode** — cookie-based theme set server-side to eliminate flash-of-wrong-theme ☀️🌙
+- **Bootswatch Pulse theme** — purple primary; react-bootstrap throughout
+
+### 🔧 Improved
+- iOS bitfield fix — prevent Safari turning hex values into tappable phone numbers 📱
+- Parser on-demand (lazy load, not at startup)
+- Robust case-insensitive search
+- Linting and dead code removed; hallucination CSS cleaned up
+- Dokku build pipeline stabilised (pnpm store-dir pinned)
+- Next.js security bump (Dec 2025)
+
+### 🏗️ Infrastructure
+- Project self-documents via `CLAUDE.md` / `AGENT.md`
+- Live `nextreg.txt` used (not bundled snapshot)
+- Dev runner fixed for local development
--- a/src/app/zxdb/ZxdbExplorer.tsx
+++ b/src/app/zxdb/ZxdbExplorer.tsx
@@ -1,271 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import Link from "next/link";
-
-type Item = {
-  id: number;
-  title: string;
-  isXrated: number;
-  machinetypeId: number | null;
-  machinetypeName?: string | null;
-  languageId: string | null;
-  languageName?: string | null;
-};
-
-type Paged<T> = {
-  items: T[];
-  page: number;
-  pageSize: number;
-  total: number;
-};
-
-export default function ZxdbExplorer({
-  initial,
-  initialGenres,
-  initialLanguages,
-  initialMachines,
-}: {
-  initial?: Paged<Item>;
-  initialGenres?: { id: number; name: string }[];
-  initialLanguages?: { id: string; name: string }[];
-  initialMachines?: { id: number; name: string }[];
-}) {
-  const [q, setQ] = useState("");
-  const [page, setPage] = useState(initial?.page ?? 1);
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
-  const [genres, setGenres] = useState<{ id: number; name: string }[]>(initialGenres ?? []);
-  const [languages, setLanguages] = useState<{ id: string; name: string }[]>(initialLanguages ?? []);
-  const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialMachines ?? []);
-  const [genreId, setGenreId] = useState<number | "">("");
-  const [languageId, setLanguageId] = useState<string | "">("");
-  const [machinetypeId, setMachinetypeId] = useState<number | "">("");
-  const [year, setYear] = useState<string>("");
-  const [sort, setSort] = useState<"title" | "id_desc">("id_desc");
-
-  const pageSize = 20;
-  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
-
-  async function fetchData(query: string, p: number) {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams();
-      if (query) params.set("q", query);
-      params.set("page", String(p));
-      params.set("pageSize", String(pageSize));
-      if (genreId !== "") params.set("genreId", String(genreId));
-      if (languageId !== "") params.set("languageId", String(languageId));
-      if (machinetypeId !== "") params.set("machinetypeId", String(machinetypeId));
-      if (year !== "") params.set("year", year);
-      if (sort) params.set("sort", sort);
-      const res = await fetch(`/api/zxdb/search?${params.toString()}`);
-      if (!res.ok) throw new Error(`Failed: ${res.status}`);
-      const json: Paged<Item> = await res.json();
-      setData(json);
-    } catch (e) {
-      console.error(e);
-      setData({ items: [], page: 1, pageSize, total: 0 });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    // When navigating via Next.js Links that change ?page=, SSR provides new `initial`.
-    // Sync local state from new SSR payload so the list and counter update immediately
-    // without an extra client fetch.
-    if (initial) {
-      setData(initial);
-      setPage(initial.page);
-    }
-  }, [initial]);
-
-  useEffect(() => {
-    // Avoid immediate client fetch on first paint if server provided initial data for this exact state
-    const initialPage = initial?.page ?? 1;
-    if (
-      initial &&
-      page === initialPage &&
-      q === "" &&
-      genreId === "" &&
-      languageId === "" &&
-      machinetypeId === "" &&
-      year === "" &&
-      sort === "id_desc"
-    ) {
-      return;
-    }
-    fetchData(q, page);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, genreId, languageId, machinetypeId, year, sort]);
-
-  // Load filter lists on mount only if not provided by server
-  useEffect(() => {
-    if (initialGenres && initialLanguages && initialMachines) return;
-    async function loadLists() {
-      try {
-        const [g, l, m] = await Promise.all([
-          fetch("/api/zxdb/genres", { cache: "force-cache" }).then((r) => r.json()),
-          fetch("/api/zxdb/languages", { cache: "force-cache" }).then((r) => r.json()),
-          fetch("/api/zxdb/machinetypes", { cache: "force-cache" }).then((r) => r.json()),
-        ]);
-        setGenres(g.items ?? []);
-        setLanguages(l.items ?? []);
-        setMachines(m.items ?? []);
-      } catch {}
-    }
-    loadLists();
-  }, [initialGenres, initialLanguages, initialMachines]);
-
-  function onSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setPage(1);
-    fetchData(q, 1);
-  }
-
-  return (
-    <div>
-      <h1 className="mb-3">ZXDB Explorer</h1>
-      <form className="row gy-2 gx-2 align-items-center" onSubmit={onSubmit}>
-        <div className="col-sm-8 col-md-6 col-lg-4">
-          <input
-            type="text"
-            className="form-control"
-            placeholder="Search titles..."
-            value={q}
-            onChange={(e) => setQ(e.target.value)}
-          />
-        </div>
-        <div className="col-auto">
-          <button className="btn btn-primary" type="submit" disabled={loading}>Search</button>
-        </div>
-        <div className="col-auto">
-          <select className="form-select" value={genreId} onChange={(e) => setGenreId(e.target.value === "" ? "" : Number(e.target.value))}>
-            <option value="">Genre</option>
-            {genres.map((g) => (
-              <option key={g.id} value={g.id}>{g.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="col-auto">
-          <select className="form-select" value={languageId} onChange={(e) => setLanguageId(e.target.value)}>
-            <option value="">Language</option>
-            {languages.map((l) => (
-              <option key={l.id} value={l.id}>{l.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="col-auto">
-          <select className="form-select" value={machinetypeId} onChange={(e) => setMachinetypeId(e.target.value === "" ? "" : Number(e.target.value))}>
-            <option value="">Machine</option>
-            {machines.map((m) => (
-              <option key={m.id} value={m.id}>{m.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="col-auto">
-          <input
-            type="number"
-            className="form-control"
-            style={{ width: 100 }}
-            placeholder="Year"
-            value={year}
-            onChange={(e) => setYear(e.target.value)}
-          />
-        </div>
-        <div className="col-auto">
-          <select className="form-select" value={sort} onChange={(e) => setSort(e.target.value as "title" | "id_desc")}>
-            <option value="title">Sort: Title</option>
-            <option value="id_desc">Sort: Newest</option>
-          </select>
-        </div>
-        {loading && (
-          <div className="col-auto text-secondary">Loading...</div>
-        )}
-      </form>
-
-      <div className="mt-3">
-        {data && data.items.length === 0 && !loading && (
-          <div className="alert alert-warning">No results.</div>
-        )}
-        {data && data.items.length > 0 && (
-          <div className="table-responsive">
-            <table className="table table-striped table-hover align-middle">
-              <thead>
-                <tr>
-                  <th style={{width: 80}}>ID</th>
-                  <th>Title</th>
-                  <th style={{width: 160}}>Machine</th>
-                  <th style={{width: 120}}>Language</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.items.map((it) => (
-                  <tr key={it.id}>
-                    <td>{it.id}</td>
-                    <td>
-                      <Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link>
-                    </td>
-                    <td>
-                      {it.machinetypeId != null ? (
-                        it.machinetypeName ? (
-                          <Link href={`/zxdb/machinetypes/${it.machinetypeId}`}>{it.machinetypeName}</Link>
-                        ) : (
-                          <span>{it.machinetypeId}</span>
-                        )
-                      ) : (
-                        <span className="text-secondary">-</span>
-                      )}
-                    </td>
-                    <td>
-                      {it.languageId ? (
-                        it.languageName ? (
-                          <Link href={`/zxdb/languages/${it.languageId}`}>{it.languageName}</Link>
-                        ) : (
-                          <span>{it.languageId}</span>
-                        )
-                      ) : (
-                        <span className="text-secondary">-</span>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-
-      <div className="d-flex align-items-center gap-2 mt-2">
-        <span>
-          Page {data?.page ?? 1} / {totalPages}
-        </span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={`/zxdb?page=${Math.max(1, (data?.page ?? 1) - 1)}`}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={`/zxdb?page=${Math.min(totalPages, (data?.page ?? 1) + 1)}`}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
-
-      <hr />
-      <div className="d-flex flex-wrap gap-2">
-        <Link className="btn btn-sm btn-outline-secondary" href="/zxdb/labels">Browse Labels</Link>
-        <Link className="btn btn-sm btn-outline-secondary" href="/zxdb/genres">Browse Genres</Link>
-        <Link className="btn btn-sm btn-outline-secondary" href="/zxdb/languages">Browse Languages</Link>
-        <Link className="btn btn-sm btn-outline-secondary" href="/zxdb/machinetypes">Browse Machines</Link>
-      </div>
-    </div>
-  );
-}
--- a/src/app/zxdb/entries/EntriesExplorer.tsx
+++ b/src/app/zxdb/entries/EntriesExplorer.tsx
@@ -1,15 +1,21 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
+import { Form, InputGroup, Button, Table, Alert, Badge } from "react-bootstrap";
+import { Search } from "react-bootstrap-icons";
 import EntryLink from "../components/EntryLink";
 import { usePathname, useRouter } from "next/navigation";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import ExplorerLayout from "@/components/explorer/ExplorerLayout";
 import FilterSidebar from "@/components/explorer/FilterSidebar";
+import FilterSection from "@/components/explorer/FilterSection";
 import MultiSelectChips from "@/components/explorer/MultiSelectChips";
+import Pagination from "@/components/explorer/Pagination";
+import useSearchFetch from "@/hooks/useSearchFetch";

 const preferredMachineIds = [27, 26, 8, 9];
+const PAGE_SIZE = 20;

 type Item = {
  id: number;
@@ -23,8 +29,6 @@ type Item = {
  languageName?: string | null;
 };

-type SearchScope = "title" | "title_aliases" | "title_aliases_origins";
-
 type Paged<T> = {
  items: T[];
  page: number;
@@ -32,6 +36,8 @@ type Paged<T> = {
  total: number;
 };

+type SearchScope = "title" | "title_aliases" | "title_aliases_origins";
+
 type EntryFacets = {
  genres: { id: number; name: string; count: number }[];
  languages: { id: string; name: string; count: number }[];
@@ -39,6 +45,15 @@ type EntryFacets = {
  flags: { hasAliases: number; hasOrigins: number };
 };

+function parseMachineIds(value?: string) {
+  if (!value) return preferredMachineIds.slice();
+  const ids = value
+    .split(",")
+    .map((id) => Number(id.trim()))
+    .filter((id) => Number.isFinite(id) && id > 0);
+  return ids.length ? ids : preferredMachineIds.slice();
+}
+
 export default function EntriesExplorer({
  initial,
  initialGenres,
@@ -62,26 +77,13 @@ export default function EntriesExplorer({
    scope?: SearchScope;
  };
 }) {
-  const parseMachineIds = (value?: string) => {
-    if (!value) return preferredMachineIds.slice();
-    const ids = value
-      .split(",")
-      .map((id) => Number(id.trim()))
-      .filter((id) => Number.isFinite(id) && id > 0);
-    return ids.length ? ids : preferredMachineIds.slice();
-  };
-
  const router = useRouter();
  const pathname = usePathname();

+  // -- Search state --
  const [q, setQ] = useState(initialUrlState?.q ?? "");
  const [appliedQ, setAppliedQ] = useState(initialUrlState?.q ?? "");
  const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1);
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
-  const [genres, setGenres] = useState<{ id: number; name: string }[]>(initialGenres ?? []);
-  const [languages, setLanguages] = useState<{ id: string; name: string }[]>(initialLanguages ?? []);
-  const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialMachines ?? []);
  const [genreId, setGenreId] = useState<number | "">(
    initialUrlState?.genreId === "" ? "" : initialUrlState?.genreId ? Number(initialUrlState.genreId) : ""
  );
@@ -90,112 +92,95 @@ export default function EntriesExplorer({
  const [sort, setSort] = useState<"title" | "id_desc">(initialUrlState?.sort ?? "id_desc");
  const [scope, setScope] = useState<SearchScope>(initialUrlState?.scope ?? "title");
  const [facets, setFacets] = useState<EntryFacets | null>(initialFacets ?? null);
-  const preferredMachineNames = useMemo(() => {
-    if (!machines.length) return preferredMachineIds.map((id) => `#${id}`);
-    return preferredMachineIds.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`);
-  }, [machines]);
+
+  // -- Filter lists --
+  const [genres, setGenres] = useState<{ id: number; name: string }[]>(initialGenres ?? []);
+  const [languages, setLanguages] = useState<{ id: string; name: string }[]>(initialLanguages ?? []);
+  const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialMachines ?? []);
+
+  // Capture facets from the API response alongside paged results
+  const handleExtra = useCallback((json: Record<string, unknown>) => {
+    if (json.facets) setFacets(json.facets as EntryFacets);
+  }, []);
+
+  // -- Fetch with abort control --
+  const { data, loading, error, fetch: doFetch, syncData } = useSearchFetch<Item>(
+    "/api/zxdb/search",
+    initial ?? null,
+    handleExtra,
+  );
+
+  // Skip initial fetch when SSR data already matches
+  const isFirstRender = useRef(true);
+
+  const totalPages = useMemo(
+    () => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1),
+    [data],
+  );
+
+  // -- URL helpers --
+  const buildParams = useCallback(
+    (p: number) => {
+      const params = new URLSearchParams();
+      if (appliedQ) params.set("q", appliedQ);
+      params.set("page", String(p));
+      if (genreId !== "") params.set("genreId", String(genreId));
+      if (languageId !== "") params.set("languageId", String(languageId));
+      if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
+      if (sort) params.set("sort", sort);
+      if (scope !== "title") params.set("scope", scope);
+      return params;
+    },
+    [appliedQ, genreId, languageId, machinetypeIds, sort, scope],
+  );
+
+  const buildHref = useCallback(
+    (p: number) => {
+      const qs = buildParams(p).toString();
+      return qs ? `${pathname}?${qs}` : pathname;
+    },
+    [buildParams, pathname],
+  );
+
+  // -- Derived --
  const orderedMachines = useMemo(() => {
    const seen = new Set(preferredMachineIds);
    const preferred = preferredMachineIds.map((id) => machines.find((m) => m.id === id)).filter(Boolean) as { id: number; name: string }[];
    const rest = machines.filter((m) => !seen.has(m.id));
    return [...preferred, ...rest];
  }, [machines]);
-  const machineOptions = useMemo(() => orderedMachines.map((m) => ({ id: m.id, label: m.name })), [orderedMachines]);

-  const pageSize = 20;
-  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
-  const activeFilters = useMemo(() => {
-    const chips: string[] = [];
-    if (appliedQ) chips.push(`q: ${appliedQ}`);
-    if (genreId !== "") {
-      const name = genres.find((g) => g.id === Number(genreId))?.name ?? `#${genreId}`;
-      chips.push(`genre: ${name}`);
-    }
-    if (languageId !== "") {
-      const name = languages.find((l) => l.id === languageId)?.name ?? languageId;
-      chips.push(`lang: ${name}`);
-    }
-    if (machinetypeIds.length > 0) {
-      const names = machinetypeIds.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`);
-      chips.push(`machine: ${names.join(", ")}`);
-    }
-    if (scope === "title_aliases") chips.push("scope: titles + aliases");
-    if (scope === "title_aliases_origins") chips.push("scope: titles + aliases + origins");
-    return chips;
-  }, [appliedQ, genreId, languageId, machinetypeIds, scope, genres, languages, machines]);
+  const machineOptions = useMemo(
+    () => orderedMachines.map((m) => ({ id: m.id, label: m.name })),
+    [orderedMachines],
+  );

-  function updateUrl(nextPage = page) {
-    const params = new URLSearchParams();
-    if (appliedQ) params.set("q", appliedQ);
-    params.set("page", String(nextPage));
-    if (genreId !== "") params.set("genreId", String(genreId));
-    if (languageId !== "") params.set("languageId", String(languageId));
-    if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
-    if (sort) params.set("sort", sort);
-    if (scope !== "title") params.set("scope", scope);
-    const qs = params.toString();
-    router.replace(qs ? `${pathname}?${qs}` : pathname);
-  }
+  const hasNonDefaultMachineFilter = machinetypeIds.join(",") !== preferredMachineIds.join(",") ||
+    machinetypeIds.length !== machines.length;

-  async function fetchData(query: string, p: number, withFacets: boolean) {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams();
-      if (query) params.set("q", query);
-      params.set("page", String(p));
-      params.set("pageSize", String(pageSize));
-      if (genreId !== "") params.set("genreId", String(genreId));
-      if (languageId !== "") params.set("languageId", String(languageId));
-      if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
-      if (sort) params.set("sort", sort);
-      if (scope !== "title") params.set("scope", scope);
-      if (withFacets) params.set("facets", "true");
-      const res = await fetch(`/api/zxdb/search?${params.toString()}`);
-      if (!res.ok) throw new Error(`Failed: ${res.status}`);
-      const json = await res.json();
-      setData(json);
-      if (withFacets && json.facets) {
-        setFacets(json.facets as EntryFacets);
-      }
-    } catch (e) {
-      console.error(e);
-      setData({ items: [], page: 1, pageSize, total: 0 });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  // Sync from SSR payload on navigation
+  // -- Fetch + URL sync on filter/page changes --
  useEffect(() => {
-    if (initial) {
-      setData(initial);
-      setPage(initial.page);
-    }
-  }, [initial]);
-
-  // Client fetch when filters/paging/sort change; also keep URL in sync
-  useEffect(() => {
-    // Avoid extra fetch if SSR already matches this exact default state
-    const initialPage = initial?.page ?? 1;
-    if (
-      initial &&
-      page === initialPage &&
-      (initialUrlState?.q ?? "") === appliedQ &&
-      (initialUrlState?.genreId === "" ? "" : Number(initialUrlState?.genreId ?? "")) === (genreId === "" ? "" : Number(genreId)) &&
-      (initialUrlState?.languageId ?? "") === (languageId ?? "") &&
-      parseMachineIds(initialUrlState?.machinetypeId).join(",") === machinetypeIds.join(",") &&
-      sort === (initialUrlState?.sort ?? "id_desc") &&
-      (initialUrlState?.scope ?? "title") === scope
-    ) {
-      updateUrl(page);
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      router.replace(buildHref(page), { scroll: false });
      return;
    }
-    updateUrl(page);
-    fetchData(appliedQ, page, true);
+
+    router.replace(buildHref(page), { scroll: false });
+
+    const params = buildParams(page);
+    params.set("pageSize", String(PAGE_SIZE));
+    params.set("facets", "true");
+    doFetch(params);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, genreId, languageId, machinetypeIds, sort, scope, appliedQ]);

-  // Load filter lists on mount only if not provided by server
+  // Sync SSR data when navigating (browser back/forward)
+  useEffect(() => {
+    if (initial) syncData(initial);
+  }, [initial, syncData]);
+
+  // Load filter lists on mount if not provided by server
  useEffect(() => {
    if (initialGenres && initialLanguages && initialMachines) return;
    async function loadLists() {
@@ -208,7 +193,7 @@ export default function EntriesExplorer({
        setGenres(g.items ?? []);
        setLanguages(l.items ?? []);
        setMachines(m.items ?? []);
-      } catch {}
+      } catch { /* filter lists are non-critical */ }
    }
    loadLists();
  }, [initialGenres, initialLanguages, initialMachines]);
@@ -219,6 +204,11 @@ export default function EntriesExplorer({
    setPage(1);
  }

+  function searchAllMachines() {
+    setMachinetypeIds(machineOptions.map((m) => m.id));
+    setPage(1);
+  }
+
  function resetFilters() {
    setQ("");
    setAppliedQ("");
@@ -230,30 +220,6 @@ export default function EntriesExplorer({
    setPage(1);
  }

-  const prevHref = useMemo(() => {
-    const params = new URLSearchParams();
-    if (appliedQ) params.set("q", appliedQ);
-    params.set("page", String(Math.max(1, (data?.page ?? 1) - 1)));
-    if (genreId !== "") params.set("genreId", String(genreId));
-    if (languageId !== "") params.set("languageId", String(languageId));
-    if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
-    if (sort) params.set("sort", sort);
-    if (scope !== "title") params.set("scope", scope);
-    return `/zxdb/entries?${params.toString()}`;
-  }, [appliedQ, data?.page, genreId, languageId, machinetypeIds, sort, scope]);
-
-  const nextHref = useMemo(() => {
-    const params = new URLSearchParams();
-    if (appliedQ) params.set("q", appliedQ);
-    params.set("page", String(Math.max(1, (data?.page ?? 1) + 1)));
-    if (genreId !== "") params.set("genreId", String(genreId));
-    if (languageId !== "") params.set("languageId", String(languageId));
-    if (machinetypeIds.length > 0) params.set("machinetypeId", machinetypeIds.join(","));
-    if (sort) params.set("sort", sort);
-    if (scope !== "title") params.set("scope", scope);
-    return `/zxdb/entries?${params.toString()}`;
-  }, [appliedQ, data?.page, genreId, languageId, machinetypeIds, sort, scope]);
-
  return (
    <div>
      <ZxdbBreadcrumbs
@@ -266,47 +232,48 @@ export default function EntriesExplorer({
      <ExplorerLayout
        title="Entries"
        subtitle={data ? `${data.total.toLocaleString()} results` : "Loading results..."}
-        chips={activeFilters}
-        onClearChips={resetFilters}
        sidebar={(
-          <FilterSidebar>
-            <form className="d-flex flex-column gap-2" onSubmit={onSubmit}>
-              <div>
-                <label className="form-label small text-secondary">Search</label>
-                <input
+          <FilterSidebar onReset={resetFilters} loading={loading}>
+            <Form onSubmit={onSubmit} className="d-flex flex-column gap-2">
+              <InputGroup>
+                <Form.Control
                  type="text"
-                  className="form-control"
                  placeholder="Search titles..."
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                />
-              </div>
-              <div className="d-grid">
-                <button className="btn btn-primary" type="submit" disabled={loading}>Search</button>
-              </div>
-              <div>
-                <label className="form-label small text-secondary">Genre</label>
-                <select className="form-select" value={genreId} onChange={(e) => { setGenreId(e.target.value === "" ? "" : Number(e.target.value)); setPage(1); }}>
+                <Button variant="primary" type="submit" disabled={loading}>
+                  <Search size={14} />
+                </Button>
+              </InputGroup>
+
+              <FilterSection label="Genre" badge={genreId !== "" ? genres.find((g) => g.id === Number(genreId))?.name : undefined}>
+                <Form.Select size="sm" value={genreId} onChange={(e) => { setGenreId(e.target.value === "" ? "" : Number(e.target.value)); setPage(1); }}>
                  <option value="">All genres</option>
                  {genres.map((g) => (
                    <option key={g.id} value={g.id}>{g.name}</option>
                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="form-label small text-secondary">Language</label>
-                <select className="form-select" value={languageId} onChange={(e) => { setLanguageId(e.target.value); setPage(1); }}>
+                </Form.Select>
+              </FilterSection>
+
+              <FilterSection label="Language" badge={languageId !== "" ? languages.find((l) => l.id === languageId)?.name : undefined}>
+                <Form.Select size="sm" value={languageId} onChange={(e) => { setLanguageId(e.target.value); setPage(1); }}>
                  <option value="">All languages</option>
                  {languages.map((l) => (
                    <option key={l.id} value={l.id}>{l.name}</option>
                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="form-label small text-secondary">Machine</label>
+                </Form.Select>
+              </FilterSection>
+
+              <FilterSection
+                label="Machine"
+                badge={`${machinetypeIds.length} selected`}
+                defaultOpen={false}
+              >
                <MultiSelectChips
                  options={machineOptions}
                  selected={machinetypeIds}
+                  collapsible
                  onToggle={(id) => {
                    setMachinetypeIds((current) => {
                      const next = new Set(current);
@@ -316,64 +283,95 @@ export default function EntriesExplorer({
                        next.add(id);
                      }
                      const order = machineOptions.map((item) => item.id);
-                      return order.filter((value) => next.has(value));
+                      const filtered = order.filter((value) => next.has(value));
+                      return filtered.length ? filtered : preferredMachineIds.slice();
                    });
                    setPage(1);
                  }}
                />
-                <div className="form-text">Preferred: {preferredMachineNames.join(", ")}</div>
+                <div className="d-flex gap-2 mt-1">
+                  <Button
+                    variant="outline-secondary"
+                    size="sm"
+                    onClick={() => { setMachinetypeIds(machineOptions.map((m) => m.id)); setPage(1); }}
+                    disabled={machinetypeIds.length === machineOptions.length}
+                  >
+                    All
+                  </Button>
+                  <Button
+                    variant="outline-secondary"
+                    size="sm"
+                    onClick={() => { setMachinetypeIds(preferredMachineIds.slice()); setPage(1); }}
+                    disabled={machinetypeIds.join(",") === preferredMachineIds.join(",")}
+                  >
+                    Default
+                  </Button>
                </div>
-              <div>
-                <label className="form-label small text-secondary">Sort</label>
-                <select className="form-select" value={sort} onChange={(e) => { setSort(e.target.value as "title" | "id_desc"); setPage(1); }}>
-                  <option value="title">Title (A–Z)</option>
+              </FilterSection>
+
+              <FilterSection label="Sort &amp; Scope">
+                <Form.Select size="sm" className="mb-2" value={sort} onChange={(e) => { setSort(e.target.value as "title" | "id_desc"); setPage(1); }}>
+                  <option value="title">Title (A-Z)</option>
                  <option value="id_desc">Newest</option>
-                </select>
-              </div>
-              <div>
-                <label className="form-label small text-secondary">Search scope</label>
-                <select className="form-select" value={scope} onChange={(e) => { setScope(e.target.value as SearchScope); setPage(1); }}>
-                  <option value="title">Titles</option>
+                </Form.Select>
+                <Form.Select size="sm" value={scope} onChange={(e) => { setScope(e.target.value as SearchScope); setPage(1); }}>
+                  <option value="title">Titles only</option>
                  <option value="title_aliases">Titles + Aliases</option>
                  <option value="title_aliases_origins">Titles + Aliases + Origins</option>
-                </select>
-              </div>
-              {facets && (
-                <div>
-                  <div className="text-secondary small mb-1">Facets</div>
-                  <div className="d-flex flex-wrap gap-2">
-                    <button
-                      type="button"
-                      className={`btn btn-sm ${scope === "title_aliases" ? "btn-primary" : "btn-outline-secondary"}`}
+                </Form.Select>
+              </FilterSection>
+
+              {facets && (facets.flags.hasAliases > 0 || facets.flags.hasOrigins > 0) && (
+                <FilterSection label="Facets">
+                  <div className="d-flex flex-wrap gap-1">
+                    <Button
+                      size="sm"
+                      variant={scope === "title_aliases" ? "primary" : "outline-secondary"}
                      onClick={() => { setScope("title_aliases"); setPage(1); }}
                      disabled={facets.flags.hasAliases === 0}
-                      title="Show results that match aliases"
                    >
-                      Has aliases ({facets.flags.hasAliases})
-                    </button>
-                    <button
-                      type="button"
-                      className={`btn btn-sm ${scope === "title_aliases_origins" ? "btn-primary" : "btn-outline-secondary"}`}
+                      Aliases <Badge bg="light" text="dark" className="ms-1">{facets.flags.hasAliases}</Badge>
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant={scope === "title_aliases_origins" ? "primary" : "outline-secondary"}
                      onClick={() => { setScope("title_aliases_origins"); setPage(1); }}
                      disabled={facets.flags.hasOrigins === 0}
-                      title="Show results that match origins"
                    >
-                      Has origins ({facets.flags.hasOrigins})
-                    </button>
-                  </div>
+                      Origins <Badge bg="light" text="dark" className="ms-1">{facets.flags.hasOrigins}</Badge>
+                    </Button>
                  </div>
+                </FilterSection>
              )}
-              {loading && <div className="text-secondary small">Loading...</div>}
-            </form>
+
+              {error && <Alert variant="danger" className="py-1 px-2 small mb-0">{error}</Alert>}
+            </Form>
          </FilterSidebar>
        )}
      >
+        <div className={loading ? "opacity-50" : ""} style={{ transition: "opacity 0.15s" }}>
          {data && data.items.length === 0 && !loading && (
-          <div className="alert alert-warning">No results.</div>
+            <Alert variant="warning">
+              No results found.
+              {hasNonDefaultMachineFilter && (
+                <span>
+                  {" "}Filtering by{" "}
+                  <strong>
+                    {machinetypeIds
+                      .map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`)
+                      .join(", ")}
+                  </strong>
+                  {" "}&mdash;{" "}
+                  <Alert.Link onClick={searchAllMachines}>
+                    search all machines
+                  </Alert.Link>?
+                </span>
+              )}
+            </Alert>
          )}
          {data && data.items.length > 0 && (
            <div className="table-responsive">
-            <table className="table table-striped table-hover align-middle">
+              <Table striped hover className="align-middle">
                <thead>
                  <tr>
                    <th style={{ width: 80 }}>ID</th>
@@ -424,40 +422,19 @@ export default function EntriesExplorer({
                    </tr>
                  ))}
                </tbody>
-            </table>
+              </Table>
            </div>
          )}
+        </div>
      </ExplorerLayout>

-      <div className="d-flex align-items-center gap-2 mt-4">
-        <span>Page {data?.page ?? 1} / {totalPages}</span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={prevHref}
-            onClick={(e) => {
-              if (!data || data.page <= 1) return;
-              e.preventDefault();
-              setPage((p) => Math.max(1, p - 1));
-            }}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={nextHref}
-            onClick={(e) => {
-              if (!data || data.page >= totalPages) return;
-              e.preventDefault();
-              setPage((p) => Math.min(totalPages, p + 1));
-            }}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
+      <Pagination
+        page={data?.page ?? page}
+        totalPages={totalPages}
+        loading={loading}
+        buildHref={buildHref}
+        onPageChange={setPage}
+      />

      <hr />
      <div className="d-flex flex-wrap gap-2">
--- a/src/app/zxdb/entries/[id]/EntryDetail.tsx
+++ b/src/app/zxdb/entries/[id]/EntryDetail.tsx
--- a/src/app/zxdb/genres/GenresSearch.tsx
+++ b/src/app/zxdb/genres/GenresSearch.tsx
@@ -1,9 +1,10 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
+import Pagination from "@/components/explorer/Pagination";

 type Genre = { id: number; name: string };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
@@ -30,6 +31,13 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
    router.push(`/zxdb/genres?${params.toString()}`);
  }

+  const buildHref = useCallback((p: number) => {
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    params.set("page", String(p));
+    return `/zxdb/genres?${params.toString()}`;
+  }, [q]);
+
  return (
    <div>
      <ZxdbBreadcrumbs
@@ -53,7 +61,7 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
              <form className="d-flex flex-column gap-2" onSubmit={submit}>
                <div>
                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search genres…" value={q} onChange={(e) => setQ(e.target.value)} />
+                  <input className="form-control" placeholder="Search genres..." value={q} onChange={(e) => setQ(e.target.value)} />
                </div>
                <div className="d-grid">
                  <button className="btn btn-primary">Search</button>
@@ -90,25 +98,12 @@ export default function GenresSearch({ initial, initialQ }: { initial?: Paged<Ge
        </div>
      </div>

-      <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data?.page ?? 1} / {totalPages}</span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={`/zxdb/genres?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={`/zxdb/genres?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
+      <Pagination
+        page={data?.page ?? 1}
+        totalPages={totalPages}
+        buildHref={buildHref}
+        onPageChange={(p) => router.push(buildHref(p))}
+      />
    </div>
  );
 }
--- a/src/app/zxdb/labels/LabelsSearch.tsx
+++ b/src/app/zxdb/labels/LabelsSearch.tsx
@@ -1,9 +1,10 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
+import Pagination from "@/components/explorer/Pagination";

 type Label = { id: number; name: string; labeltypeId: string | null };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
@@ -14,12 +15,10 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
  const [data, setData] = useState<Paged<Label> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

-  // Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
  useEffect(() => {
    if (initial) setData(initial);
  }, [initial]);

-  // Keep input in sync with URL q on navigation
  useEffect(() => {
    setQ(initialQ ?? "");
  }, [initialQ]);
@@ -32,6 +31,13 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
    router.push(`/zxdb/labels?${params.toString()}`);
  }

+  const buildHref = useCallback((p: number) => {
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    params.set("page", String(p));
+    return `/zxdb/labels?${params.toString()}`;
+  }, [q]);
+
  return (
    <div>
      <ZxdbBreadcrumbs
@@ -55,7 +61,7 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
              <form className="d-flex flex-column gap-2" onSubmit={submit}>
                <div>
                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search labels…" value={q} onChange={(e) => setQ(e.target.value)} />
+                  <input className="form-control" placeholder="Search labels..." value={q} onChange={(e) => setQ(e.target.value)} />
                </div>
                <div className="d-grid">
                  <button className="btn btn-primary">Search</button>
@@ -96,25 +102,12 @@ export default function LabelsSearch({ initial, initialQ }: { initial?: Paged<La
        </div>
      </div>

-      <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data?.page ?? 1} / {totalPages}</span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={`/zxdb/labels?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
+      <Pagination
+        page={data?.page ?? 1}
+        totalPages={totalPages}
+        buildHref={buildHref}
+        onPageChange={(p) => router.push(buildHref(p))}
+      />
    </div>
  );
 }
--- a/src/app/zxdb/languages/LanguagesSearch.tsx
+++ b/src/app/zxdb/languages/LanguagesSearch.tsx
@@ -1,9 +1,10 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
+import Pagination from "@/components/explorer/Pagination";

 type Language = { id: string; name: string };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
@@ -30,6 +31,13 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
    router.push(`/zxdb/languages?${params.toString()}`);
  }

+  const buildHref = useCallback((p: number) => {
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    params.set("page", String(p));
+    return `/zxdb/languages?${params.toString()}`;
+  }, [q]);
+
  return (
    <div>
      <ZxdbBreadcrumbs
@@ -53,7 +61,7 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
              <form className="d-flex flex-column gap-2" onSubmit={submit}>
                <div>
                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search languages…" value={q} onChange={(e) => setQ(e.target.value)} />
+                  <input className="form-control" placeholder="Search languages..." value={q} onChange={(e) => setQ(e.target.value)} />
                </div>
                <div className="d-grid">
                  <button className="btn btn-primary">Search</button>
@@ -90,25 +98,12 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
        </div>
      </div>

-      <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data?.page ?? 1} / {totalPages}</span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={`/zxdb/languages?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={`/zxdb/languages?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
+      <Pagination
+        page={data?.page ?? 1}
+        totalPages={totalPages}
+        buildHref={buildHref}
+        onPageChange={(p) => router.push(buildHref(p))}
+      />
    </div>
  );
 }
--- a/src/app/zxdb/machinetypes/MachineTypesSearch.tsx
+++ b/src/app/zxdb/machinetypes/MachineTypesSearch.tsx
@@ -1,9 +1,10 @@
 "use client";

-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
+import Pagination from "@/components/explorer/Pagination";

 type MT = { id: number; name: string };
 type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
@@ -14,12 +15,10 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
  const [data, setData] = useState<Paged<MT> | null>(initial ?? null);
  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);

-  // Sync incoming SSR payload on navigation (e.g., when clicking Prev/Next Links)
  useEffect(() => {
    if (initial) setData(initial);
  }, [initial]);

-  // Keep input in sync with URL q on navigation
  useEffect(() => {
    setQ(initialQ ?? "");
  }, [initialQ]);
@@ -32,6 +31,13 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
    router.push(`/zxdb/machinetypes?${params.toString()}`);
  }

+  const buildHref = useCallback((p: number) => {
+    const params = new URLSearchParams();
+    if (q) params.set("q", q);
+    params.set("page", String(p));
+    return `/zxdb/machinetypes?${params.toString()}`;
+  }, [q]);
+
  return (
    <div>
      <ZxdbBreadcrumbs
@@ -55,7 +61,7 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
              <form className="d-flex flex-column gap-2" onSubmit={submit}>
                <div>
                  <label className="form-label small text-secondary">Search</label>
-                  <input className="form-control" placeholder="Search machine types…" value={q} onChange={(e) => setQ(e.target.value)} />
+                  <input className="form-control" placeholder="Search machine types..." value={q} onChange={(e) => setQ(e.target.value)} />
                </div>
                <div className="d-grid">
                  <button className="btn btn-primary">Search</button>
@@ -92,25 +98,12 @@ export default function MachineTypesSearch({ initial, initialQ }: { initial?: Pa
        </div>
      </div>

-      <div className="d-flex align-items-center gap-2 mt-2">
-        <span>Page {data?.page ?? 1} / {totalPages}</span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={`/zxdb/machinetypes?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, (data?.page ?? 1) - 1))); return p.toString(); })()}`}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={`/zxdb/machinetypes?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, (data?.page ?? 1) + 1))); return p.toString(); })()}`}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
+      <Pagination
+        page={data?.page ?? 1}
+        totalPages={totalPages}
+        buildHref={buildHref}
+        onPageChange={(p) => router.push(buildHref(p))}
+      />
    </div>
  );
 }
--- a/src/app/zxdb/releases/ReleasesExplorer.tsx
+++ b/src/app/zxdb/releases/ReleasesExplorer.tsx
@@ -2,14 +2,20 @@

 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
+import { Form, InputGroup, Button, Table, Alert } from "react-bootstrap";
+import { Search } from "react-bootstrap-icons";
 import EntryLink from "../components/EntryLink";
 import { usePathname, useRouter } from "next/navigation";
 import ZxdbBreadcrumbs from "@/app/zxdb/components/ZxdbBreadcrumbs";
 import ExplorerLayout from "@/components/explorer/ExplorerLayout";
 import FilterSidebar from "@/components/explorer/FilterSidebar";
+import FilterSection from "@/components/explorer/FilterSection";
 import MultiSelectChips from "@/components/explorer/MultiSelectChips";
+import Pagination from "@/components/explorer/Pagination";
+import useSearchFetch from "@/hooks/useSearchFetch";

 const preferredMachineIds = [27, 26, 8, 9];
+const PAGE_SIZE = 20;

 function parseMachineIds(value?: string) {
  if (!value) return preferredMachineIds.slice();
@@ -38,7 +44,6 @@ type Paged<T> = {
 export default function ReleasesExplorer({
  initial,
  initialUrlState,
-  initialUrlHasParams,
  initialLists,
 }: {
  initial?: Paged<Item>;
@@ -48,12 +53,12 @@ export default function ReleasesExplorer({
    year: string;
    sort: "year_desc" | "year_asc" | "title" | "entry_id_desc";
    dLanguageId?: string;
-    dMachinetypeId?: string; // keep as string for URL/state consistency
+    dMachinetypeId?: string;
    filetypeId?: string;
    schemetypeId?: string;
    sourcetypeId?: string;
    casetypeId?: string;
-    isDemo?: string; // "1" or "true"
+    isDemo?: string;
  };
  initialUrlHasParams?: boolean;
  initialLists?: {
@@ -68,15 +73,12 @@ export default function ReleasesExplorer({
  const router = useRouter();
  const pathname = usePathname();

+  // -- Search state --
  const [q, setQ] = useState(initialUrlState?.q ?? "");
  const [appliedQ, setAppliedQ] = useState(initialUrlState?.q ?? "");
  const [page, setPage] = useState(initial?.page ?? initialUrlState?.page ?? 1);
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<Paged<Item> | null>(initial ?? null);
  const [year, setYear] = useState<string>(initialUrlState?.year ?? "");
  const [sort, setSort] = useState<"year_desc" | "year_asc" | "title" | "entry_id_desc">(initialUrlState?.sort ?? "year_desc");
-
-  // Download-based filters and their option lists
  const [dLanguageId, setDLanguageId] = useState<string>(initialUrlState?.dLanguageId ?? "");
  const [dMachinetypeIds, setDMachinetypeIds] = useState<number[]>(parseMachineIds(initialUrlState?.dMachinetypeId));
  const [filetypeId, setFiletypeId] = useState<string>(initialUrlState?.filetypeId ?? "");
@@ -85,32 +87,51 @@ export default function ReleasesExplorer({
  const [casetypeId, setCasetypeId] = useState<string>(initialUrlState?.casetypeId ?? "");
  const [isDemo, setIsDemo] = useState<boolean>(!!(initialUrlState?.isDemo && (initialUrlState.isDemo === "1" || initialUrlState.isDemo === "true")));

+  // -- Filter lists --
  const [langs, setLangs] = useState<{ id: string; name: string }[]>(initialLists?.languages ?? []);
  const [machines, setMachines] = useState<{ id: number; name: string }[]>(initialLists?.machinetypes ?? []);
  const [filetypes, setFiletypes] = useState<{ id: number; name: string }[]>(initialLists?.filetypes ?? []);
  const [schemes, setSchemes] = useState<{ id: string; name: string }[]>(initialLists?.schemetypes ?? []);
  const [sources, setSources] = useState<{ id: string; name: string }[]>(initialLists?.sourcetypes ?? []);
  const [cases, setCases] = useState<{ id: string; name: string }[]>(initialLists?.casetypes ?? []);
-  const initialLoad = useRef(true);
-  const preferredMachineNames = useMemo(() => {
-    if (!machines.length) return preferredMachineIds.map((id) => `#${id}`);
-    return preferredMachineIds.map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`);
-  }, [machines]);
+
+  // -- Fetch with abort control --
+  const { data, loading, error, fetch: doFetch, syncData } = useSearchFetch<Item>(
+    "/api/zxdb/releases/search",
+    initial ?? null,
+  );
+
+  const isFirstRender = useRef(true);
+
+  // Debounce timer for year input changes
+  const yearDebounce = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const totalPages = useMemo(
+    () => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1),
+    [data],
+  );
+
  const orderedMachines = useMemo(() => {
    const seen = new Set(preferredMachineIds);
    const preferred = preferredMachineIds.map((id) => machines.find((m) => m.id === id)).filter(Boolean) as { id: number; name: string }[];
    const rest = machines.filter((m) => !seen.has(m.id));
    return [...preferred, ...rest];
  }, [machines]);
-  const machineOptions = useMemo(() => orderedMachines.map((m) => ({ id: m.id, label: m.name })), [orderedMachines]);

-  const pageSize = 20;
-  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
+  const machineOptions = useMemo(
+    () => orderedMachines.map((m) => ({ id: m.id, label: m.name })),
+    [orderedMachines],
+  );

-  const updateUrl = useCallback((nextPage = page) => {
+  const hasNonDefaultMachineFilter = dMachinetypeIds.join(",") !== preferredMachineIds.join(",") ||
+    dMachinetypeIds.length !== machines.length;
+
+  // -- URL helpers --
+  const buildParams = useCallback(
+    (p: number) => {
      const params = new URLSearchParams();
      if (appliedQ) params.set("q", appliedQ);
-    params.set("page", String(nextPage));
+      params.set("page", String(p));
      if (year) params.set("year", year);
      if (sort) params.set("sort", sort);
      if (dLanguageId) params.set("dLanguageId", dLanguageId);
@@ -120,99 +141,44 @@ export default function ReleasesExplorer({
      if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
      if (casetypeId) params.set("casetypeId", casetypeId);
      if (isDemo) params.set("isDemo", "1");
-    const qs = params.toString();
-    router.replace(qs ? `${pathname}?${qs}` : pathname);
-  }, [appliedQ, casetypeId, dLanguageId, dMachinetypeIds, filetypeId, isDemo, page, pathname, router, schemetypeId, sort, sourcetypeId, year]);
+      return params;
+    },
+    [appliedQ, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo],
+  );

-  const fetchData = useCallback(async (query: string, p: number) => {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams();
-      if (query) params.set("q", query);
-      params.set("page", String(p));
-      params.set("pageSize", String(pageSize));
-      if (year) params.set("year", String(Number(year)));
-      if (sort) params.set("sort", sort);
-      if (dLanguageId) params.set("dLanguageId", dLanguageId);
-      if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
-      if (filetypeId) params.set("filetypeId", filetypeId);
-      if (schemetypeId) params.set("schemetypeId", schemetypeId);
-      if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
-      if (casetypeId) params.set("casetypeId", casetypeId);
-      if (isDemo) params.set("isDemo", "1");
-      const res = await fetch(`/api/zxdb/releases/search?${params.toString()}`);
-      if (!res.ok) throw new Error(`Failed: ${res.status}`);
-      const json: Paged<Item> = await res.json();
-      setData(json);
-    } catch (e) {
-      console.error(e);
-      setData({ items: [], page: 1, pageSize, total: 0 });
-    } finally {
-      setLoading(false);
-    }
-  }, [casetypeId, dLanguageId, dMachinetypeIds, filetypeId, isDemo, pageSize, schemetypeId, sort, sourcetypeId, year]);
+  const buildHref = useCallback(
+    (p: number) => {
+      const qs = buildParams(p).toString();
+      return qs ? `${pathname}?${qs}` : pathname;
+    },
+    [buildParams, pathname],
+  );

+  // -- Fetch + URL sync on filter/page changes --
  useEffect(() => {
-    if (initial) {
-      setData(initial);
-      setPage(initial.page);
-    }
-  }, [initial]);
-
-  const initialState = useMemo(() => ({
-    q: initialUrlState?.q ?? "",
-    year: initialUrlState?.year ?? "",
-    sort: initialUrlState?.sort ?? "year_desc",
-    dLanguageId: initialUrlState?.dLanguageId ?? "",
-    dMachinetypeId: initialUrlState?.dMachinetypeId ?? "",
-    filetypeId: initialUrlState?.filetypeId ?? "",
-    schemetypeId: initialUrlState?.schemetypeId ?? "",
-    sourcetypeId: initialUrlState?.sourcetypeId ?? "",
-    casetypeId: initialUrlState?.casetypeId ?? "",
-    isDemo: initialUrlState?.isDemo,
-  }), [initialUrlState]);
-
-  useEffect(() => {
-    const initialPage = initial?.page ?? 1;
-    if (
-      initial &&
-      page === initialPage &&
-      initialState.q === appliedQ &&
-      initialState.year === (year ?? "") &&
-      sort === initialState.sort &&
-      initialState.dLanguageId === dLanguageId &&
-      parseMachineIds(initialState.dMachinetypeId).join(",") === dMachinetypeIds.join(",") &&
-      initialState.filetypeId === filetypeId &&
-      initialState.schemetypeId === schemetypeId &&
-      initialState.sourcetypeId === sourcetypeId &&
-      initialState.casetypeId === casetypeId &&
-      (!!initialState.isDemo === isDemo)
-    ) {
-      if (initialLoad.current) {
-        initialLoad.current = false;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      router.replace(buildHref(page), { scroll: false });
      return;
    }
-      updateUrl(page);
-      return;
-    }
-    if (initialLoad.current) {
-      initialLoad.current = false;
-      if (initial && !initialUrlHasParams) return;
-    }
-    updateUrl(page);
-    fetchData(appliedQ, page);
-  }, [appliedQ, casetypeId, dLanguageId, dMachinetypeIds, fetchData, filetypeId, initial, initialState, initialUrlHasParams, isDemo, page, schemetypeId, sort, sourcetypeId, updateUrl, year]);

-  function onSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setAppliedQ(q);
-    setPage(1);
-  }
+    router.replace(buildHref(page), { scroll: false });

-  // Load filter option lists on mount
+    const params = buildParams(page);
+    params.set("pageSize", String(PAGE_SIZE));
+    doFetch(params);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, appliedQ, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
+
+  // Sync SSR data when navigating (browser back/forward)
+  useEffect(() => {
+    if (initial) syncData(initial);
+  }, [initial, syncData]);
+
+  // Load filter lists on mount if not provided by server
  useEffect(() => {
-    async function loadLists() {
    if (langs.length || machines.length || filetypes.length || schemes.length || sources.length || cases.length) return;
+    async function loadLists() {
      try {
        const [l, m, ft, sc, so, ca] = await Promise.all([
          fetch("/api/zxdb/languages", { cache: "force-cache" }).then((r) => r.json()),
@@ -228,44 +194,42 @@ export default function ReleasesExplorer({
        setSchemes(sc.items ?? []);
        setSources(so.items ?? []);
        setCases(ca.items ?? []);
-      } catch {
-        // ignore
-      }
+      } catch { /* filter lists are non-critical */ }
    }
    loadLists();
  }, [cases.length, filetypes.length, langs.length, machines.length, schemes.length, sources.length]);

-  const prevHref = useMemo(() => {
-    const params = new URLSearchParams();
-    if (appliedQ) params.set("q", appliedQ);
-    params.set("page", String(Math.max(1, (data?.page ?? 1) - 1)));
-    if (year) params.set("year", year);
-    if (sort) params.set("sort", sort);
-    if (dLanguageId) params.set("dLanguageId", dLanguageId);
-    if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
-    if (filetypeId) params.set("filetypeId", filetypeId);
-    if (schemetypeId) params.set("schemetypeId", schemetypeId);
-    if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
-    if (casetypeId) params.set("casetypeId", casetypeId);
-    if (isDemo) params.set("isDemo", "1");
-    return `/zxdb/releases?${params.toString()}`;
-  }, [appliedQ, data?.page, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
+  function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setAppliedQ(q);
+    setPage(1);
+  }

-  const nextHref = useMemo(() => {
-    const params = new URLSearchParams();
-    if (appliedQ) params.set("q", appliedQ);
-    params.set("page", String(Math.max(1, (data?.page ?? 1) + 1)));
-    if (year) params.set("year", year);
-    if (sort) params.set("sort", sort);
-    if (dLanguageId) params.set("dLanguageId", dLanguageId);
-    if (dMachinetypeIds.length > 0) params.set("dMachinetypeId", dMachinetypeIds.join(","));
-    if (filetypeId) params.set("filetypeId", filetypeId);
-    if (schemetypeId) params.set("schemetypeId", schemetypeId);
-    if (sourcetypeId) params.set("sourcetypeId", sourcetypeId);
-    if (casetypeId) params.set("casetypeId", casetypeId);
-    if (isDemo) params.set("isDemo", "1");
-    return `/zxdb/releases?${params.toString()}`;
-  }, [appliedQ, data?.page, year, sort, dLanguageId, dMachinetypeIds, filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo]);
+  function onYearChange(value: string) {
+    setYear(value);
+    clearTimeout(yearDebounce.current);
+    yearDebounce.current = setTimeout(() => setPage(1), 400);
+  }
+
+  function searchAllMachines() {
+    setDMachinetypeIds(machineOptions.map((m) => m.id));
+    setPage(1);
+  }
+
+  function resetFilters() {
+    setQ("");
+    setAppliedQ("");
+    setYear("");
+    setSort("year_desc");
+    setDLanguageId("");
+    setDMachinetypeIds(preferredMachineIds.slice());
+    setFiletypeId("");
+    setSchemetypeId("");
+    setSourcetypeId("");
+    setCasetypeId("");
+    setIsDemo(false);
+    setPage(1);
+  }

  return (
    <div>
@@ -280,45 +244,48 @@ export default function ReleasesExplorer({
        title="Releases"
        subtitle={data ? `${data.total.toLocaleString()} results` : "Loading results..."}
        sidebar={(
-          <FilterSidebar>
-            <form className="d-flex flex-column gap-2" onSubmit={onSubmit}>
-                <div>
-                  <label className="form-label small text-secondary">Search title</label>
-                  <input
+          <FilterSidebar onReset={resetFilters} loading={loading}>
+            <Form onSubmit={onSubmit} className="d-flex flex-column gap-2">
+              <InputGroup>
+                <Form.Control
                  type="text"
-                    className="form-control"
-                    placeholder="Filter by entry title..."
+                  placeholder="Search titles..."
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                />
-                </div>
-                <div className="d-grid">
-                  <button className="btn btn-primary" type="submit" disabled={loading}>Search</button>
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">Year</label>
-                  <input
+                <Button variant="primary" type="submit" disabled={loading}>
+                  <Search size={14} />
+                </Button>
+              </InputGroup>
+
+              <FilterSection label="Year" badge={year || undefined}>
+                <Form.Control
                  type="number"
-                    className="form-control"
+                  size="sm"
                  placeholder="Any"
                  value={year}
-                    onChange={(e) => { setYear(e.target.value); setPage(1); }}
+                  onChange={(e) => onYearChange(e.target.value)}
                />
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">DL Language</label>
-                  <select className="form-select" value={dLanguageId} onChange={(e) => { setDLanguageId(e.target.value); setPage(1); }}>
+              </FilterSection>
+
+              <FilterSection label="Language" badge={dLanguageId ? langs.find((l) => l.id === dLanguageId)?.name : undefined}>
+                <Form.Select size="sm" value={dLanguageId} onChange={(e) => { setDLanguageId(e.target.value); setPage(1); }}>
                  <option value="">All languages</option>
                  {langs.map((l) => (
                    <option key={l.id} value={l.id}>{l.name}</option>
                  ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">DL Machine</label>
+                </Form.Select>
+              </FilterSection>
+
+              <FilterSection
+                label="Machine"
+                badge={`${dMachinetypeIds.length} selected`}
+                defaultOpen={false}
+              >
                <MultiSelectChips
                  options={machineOptions}
                  selected={dMachinetypeIds}
+                  collapsible
                  onToggle={(id) => {
                    setDMachinetypeIds((current) => {
                      const next = new Set(current);
@@ -328,73 +295,108 @@ export default function ReleasesExplorer({
                        next.add(id);
                      }
                      const order = machineOptions.map((item) => item.id);
-                        return order.filter((value) => next.has(value));
+                      const filtered = order.filter((value) => next.has(value));
+                      return filtered.length ? filtered : preferredMachineIds.slice();
                    });
                    setPage(1);
                  }}
                />
-                  <div className="form-text">Preferred: {preferredMachineNames.join(", ")}</div>
+                <div className="d-flex gap-2 mt-1">
+                  <Button
+                    variant="outline-secondary"
+                    size="sm"
+                    onClick={() => { setDMachinetypeIds(machineOptions.map((m) => m.id)); setPage(1); }}
+                    disabled={dMachinetypeIds.length === machineOptions.length}
+                  >
+                    All
+                  </Button>
+                  <Button
+                    variant="outline-secondary"
+                    size="sm"
+                    onClick={() => { setDMachinetypeIds(preferredMachineIds.slice()); setPage(1); }}
+                    disabled={dMachinetypeIds.join(",") === preferredMachineIds.join(",")}
+                  >
+                    Default
+                  </Button>
                </div>
-                <div>
-                  <label className="form-label small text-secondary">File type</label>
-                  <select className="form-select" value={filetypeId} onChange={(e) => { setFiletypeId(e.target.value); setPage(1); }}>
+              </FilterSection>
+
+              <FilterSection label="Download filters" defaultOpen={false} badge={
+                [filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo ? "demo" : ""].filter(Boolean).length
+                  ? `${[filetypeId, schemetypeId, sourcetypeId, casetypeId, isDemo ? "demo" : ""].filter(Boolean).length} active`
+                  : undefined
+              }>
+                <div className="d-flex flex-column gap-2">
+                  <Form.Select size="sm" value={filetypeId} onChange={(e) => { setFiletypeId(e.target.value); setPage(1); }}>
                    <option value="">All file types</option>
                    {filetypes.map((ft) => (
                      <option key={ft.id} value={ft.id}>{ft.name}</option>
                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">Scheme</label>
-                  <select className="form-select" value={schemetypeId} onChange={(e) => { setSchemetypeId(e.target.value); setPage(1); }}>
+                  </Form.Select>
+                  <Form.Select size="sm" value={schemetypeId} onChange={(e) => { setSchemetypeId(e.target.value); setPage(1); }}>
                    <option value="">All schemes</option>
                    {schemes.map((s) => (
                      <option key={s.id} value={s.id}>{s.name}</option>
                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">Source</label>
-                  <select className="form-select" value={sourcetypeId} onChange={(e) => { setSourcetypeId(e.target.value); setPage(1); }}>
+                  </Form.Select>
+                  <Form.Select size="sm" value={sourcetypeId} onChange={(e) => { setSourcetypeId(e.target.value); setPage(1); }}>
                    <option value="">All sources</option>
                    {sources.map((s) => (
                      <option key={s.id} value={s.id}>{s.name}</option>
                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">Case</label>
-                  <select className="form-select" value={casetypeId} onChange={(e) => { setCasetypeId(e.target.value); setPage(1); }}>
+                  </Form.Select>
+                  <Form.Select size="sm" value={casetypeId} onChange={(e) => { setCasetypeId(e.target.value); setPage(1); }}>
                    <option value="">All cases</option>
                    {cases.map((c) => (
                      <option key={c.id} value={c.id}>{c.name}</option>
                    ))}
-                  </select>
+                  </Form.Select>
+                  <Form.Check
+                    id="demoCheck"
+                    label="Demo only"
+                    checked={isDemo}
+                    onChange={(e) => { setIsDemo(e.target.checked); setPage(1); }}
+                  />
                </div>
-                <div className="form-check">
-                  <input id="demoCheck" className="form-check-input" type="checkbox" checked={isDemo} onChange={(e) => { setIsDemo(e.target.checked); setPage(1); }} />
-                  <label className="form-check-label" htmlFor="demoCheck">Demo only</label>
-                </div>
-                <div>
-                  <label className="form-label small text-secondary">Sort</label>
-                  <select className="form-select" value={sort} onChange={(e) => { setSort(e.target.value as typeof sort); setPage(1); }}>
+              </FilterSection>
+
+              <FilterSection label="Sort">
+                <Form.Select size="sm" value={sort} onChange={(e) => { setSort(e.target.value as typeof sort); setPage(1); }}>
                  <option value="year_desc">Newest</option>
                  <option value="year_asc">Oldest</option>
                  <option value="title">Title</option>
                  <option value="entry_id_desc">Entry ID</option>
-                  </select>
-                </div>
-                {loading && <div className="text-secondary small">Loading...</div>}
-              </form>
+                </Form.Select>
+              </FilterSection>
+
+              {error && <Alert variant="danger" className="py-1 px-2 small mb-0">{error}</Alert>}
+            </Form>
          </FilterSidebar>
        )}
      >
+        <div className={loading ? "opacity-50" : ""} style={{ transition: "opacity 0.15s" }}>
          {data && data.items.length === 0 && !loading && (
-            <div className="alert alert-warning">No results.</div>
+            <Alert variant="warning">
+              No results found.
+              {hasNonDefaultMachineFilter && (
+                <span>
+                  {" "}Filtering by{" "}
+                  <strong>
+                    {dMachinetypeIds
+                      .map((id) => machines.find((m) => m.id === id)?.name ?? `#${id}`)
+                      .join(", ")}
+                  </strong>
+                  {" "}&mdash;{" "}
+                  <Alert.Link onClick={searchAllMachines}>
+                    search all machines
+                  </Alert.Link>?
+                </span>
+              )}
+            </Alert>
          )}
          {data && data.items.length > 0 && (
            <div className="table-responsive">
-              <table className="table table-striped table-hover align-middle">
+              <Table striped hover className="align-middle">
                <thead>
                  <tr>
                    <th style={{ width: 80 }}>Entry ID</th>
@@ -411,11 +413,9 @@ export default function ReleasesExplorer({
                        <EntryLink id={it.entryId} />
                      </td>
                      <td>
-                        <div className="d-flex flex-column gap-1">
                        <Link href={`/zxdb/releases/${it.entryId}/${it.releaseSeq}`} className="link-underline link-underline-opacity-0">
                          {it.entryTitle || `Entry #${it.entryId}`}
                        </Link>
-                        </div>
                      </td>
                      <td>
                        <Link href={`/zxdb/releases/${it.entryId}/${it.releaseSeq}`}>
@@ -433,40 +433,19 @@ export default function ReleasesExplorer({
                    </tr>
                  ))}
                </tbody>
-              </table>
+              </Table>
            </div>
          )}
+        </div>
      </ExplorerLayout>

-      <div className="d-flex align-items-center gap-2 mt-4">
-        <span>Page {data?.page ?? 1} / {totalPages}</span>
-        <div className="ms-auto d-flex gap-2">
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page <= 1) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page <= 1}
-            href={prevHref}
-            onClick={(e) => {
-              if (!data || data.page <= 1) return;
-              e.preventDefault();
-              setPage((p) => Math.max(1, p - 1));
-            }}
-          >
-            Prev
-          </Link>
-          <Link
-            className={`btn btn-outline-secondary ${!data || (data.page >= totalPages) ? "disabled" : ""}`}
-            aria-disabled={!data || data.page >= totalPages}
-            href={nextHref}
-            onClick={(e) => {
-              if (!data || data.page >= totalPages) return;
-              e.preventDefault();
-              setPage((p) => Math.min(totalPages, p + 1));
-            }}
-          >
-            Next
-          </Link>
-        </div>
-      </div>
+      <Pagination
+        page={data?.page ?? page}
+        totalPages={totalPages}
+        loading={loading}
+        buildHref={buildHref}
+        onPageChange={setPage}
+      />
    </div>
  );
 }
--- a/src/components/explorer/FilterSection.tsx
+++ b/src/components/explorer/FilterSection.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import { Collapse } from "react-bootstrap";
+import { ChevronDown } from "react-bootstrap-icons";
+
+type FilterSectionProps = {
+  label: string;
+  badge?: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+};
+
+export default function FilterSection({
+  label,
+  badge,
+  defaultOpen = true,
+  children,
+}: FilterSectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-bottom pb-2">
+      <button
+        type="button"
+        className="btn btn-sm w-100 d-flex align-items-center justify-content-between p-0 text-start"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+      >
+        <span className="form-label small text-secondary mb-0 fw-semibold">{label}</span>
+        <span className="d-flex align-items-center gap-1">
+          {!open && badge && (
+            <span className="badge text-bg-primary rounded-pill" style={{ fontSize: "0.7rem" }}>
+              {badge}
+            </span>
+          )}
+          <ChevronDown
+            size={10}
+            className="text-secondary"
+            style={{
+              transition: "transform 0.2s",
+              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+            }}
+          />
+        </span>
+      </button>
+      <Collapse in={open}>
+        <div>
+          <div className="mt-1">{children}</div>
+        </div>
+      </Collapse>
+    </div>
+  );
+}
--- a/src/components/explorer/FilterSidebar.tsx
+++ b/src/components/explorer/FilterSidebar.tsx
@@ -1,13 +1,31 @@
 import { ReactNode } from "react";
+import { Card, Button } from "react-bootstrap";

 type FilterSidebarProps = {
  children: ReactNode;
+  onReset?: () => void;
+  loading?: boolean;
 };

-export default function FilterSidebar({ children }: FilterSidebarProps) {
+export default function FilterSidebar({ children, onReset, loading }: FilterSidebarProps) {
  return (
-    <div className="card shadow-sm">
-      <div className="card-body">{children}</div>
+    <Card className="shadow-sm">
+      <Card.Body className="d-flex flex-column gap-2">
+        {children}
+        {onReset && (
+          <div className="border-top pt-2 mt-1">
+            <Button
+              variant="outline-secondary"
+              size="sm"
+              className="w-100"
+              onClick={onReset}
+              disabled={loading}
+            >
+              Reset all filters
+            </Button>
          </div>
+        )}
+      </Card.Body>
+    </Card>
  );
 }
--- a/src/components/explorer/MultiSelectChips.tsx
+++ b/src/components/explorer/MultiSelectChips.tsx
@@ -1,3 +1,7 @@
+"use client";
+
+import { useState } from "react";
+
 type ChipOption<T extends number | string> = {
  id: T;
  label: string;
@@ -8,6 +12,10 @@ type MultiSelectChipsProps<T extends number | string> = {
  selected: T[];
  onToggle: (id: T) => void;
  size?: "sm" | "md";
+  /** When set, chips start collapsed showing just selected count + names */
+  collapsible?: boolean;
+  /** Max selected labels to show in collapsed summary before truncating */
+  collapsedMax?: number;
 };

 export default function MultiSelectChips<T extends number | string>({
@@ -15,10 +23,37 @@ export default function MultiSelectChips<T extends number | string>({
  selected,
  onToggle,
  size = "sm",
+  collapsible = false,
+  collapsedMax = 3,
 }: MultiSelectChipsProps<T>) {
+  const [expanded, setExpanded] = useState(!collapsible);
  const btnSize = size === "sm" ? "btn-sm" : "";
+
+  if (!expanded) {
+    const selectedLabels = selected
+      .map((id) => options.find((o) => o.id === id)?.label)
+      .filter(Boolean) as string[];
+    const shown = selectedLabels.slice(0, collapsedMax);
+    const extra = selectedLabels.length - shown.length;
+    const summary = shown.length
+      ? shown.join(", ") + (extra > 0 ? ` +${extra}` : "")
+      : "None";
+
    return (
-    <div className="d-flex flex-wrap gap-2">
+      <button
+        type="button"
+        className="btn btn-sm btn-outline-secondary w-100 text-start d-flex justify-content-between align-items-center"
+        onClick={() => setExpanded(true)}
+      >
+        <span className="text-truncate">{summary}</span>
+        <span className="badge text-bg-primary rounded-pill ms-2">{selected.length}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div>
+      <div className="d-flex flex-wrap gap-1">
        {options.map((option) => {
          const active = selected.includes(option.id);
          return (
@@ -33,5 +68,15 @@ export default function MultiSelectChips<T extends number | string>({
          );
        })}
      </div>
+      {collapsible && (
+        <button
+          type="button"
+          className="btn btn-link btn-sm p-0 mt-1 text-secondary"
+          onClick={() => setExpanded(false)}
+        >
+          Collapse
+        </button>
+      )}
+    </div>
  );
 }
--- a/src/components/explorer/Pagination.tsx
+++ b/src/components/explorer/Pagination.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useMemo } from "react";
+import { Button, Spinner } from "react-bootstrap";
+import { ChevronLeft, ChevronRight } from "react-bootstrap-icons";
+
+type PaginationProps = {
+  page: number;
+  totalPages: number;
+  loading?: boolean;
+  /** Build href for a given page number (for SSR/link fallback) */
+  buildHref: (p: number) => string;
+  onPageChange: (p: number) => void;
+};
+
+export default function Pagination({
+  page,
+  totalPages,
+  loading,
+  buildHref,
+  onPageChange,
+}: PaginationProps) {
+  const canPrev = page > 1;
+  const canNext = page < totalPages;
+
+  const prevHref = useMemo(() => buildHref(Math.max(1, page - 1)), [buildHref, page]);
+  const nextHref = useMemo(() => buildHref(Math.min(totalPages, page + 1)), [buildHref, page, totalPages]);
+
+  return (
+    <div className="d-flex align-items-center gap-2 mt-4">
+      <span className={loading ? "text-secondary" : ""}>
+        Page {page} / {totalPages}
+      </span>
+      {loading && (
+        <Spinner animation="border" size="sm" variant="secondary" role="status" />
+      )}
+      <div className="ms-auto d-flex gap-2">
+        <Button
+          as="a"
+          variant="outline-secondary"
+          href={prevHref}
+          disabled={!canPrev}
+          onClick={(e: React.MouseEvent) => {
+            if (!canPrev) return;
+            e.preventDefault();
+            onPageChange(page - 1);
+          }}
+        >
+          <ChevronLeft size={14} /> Prev
+        </Button>
+        <Button
+          as="a"
+          variant="outline-secondary"
+          href={nextHref}
+          disabled={!canNext}
+          onClick={(e: React.MouseEvent) => {
+            if (!canNext) return;
+            e.preventDefault();
+            onPageChange(page + 1);
+          }}
+        >
+          Next <ChevronRight size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/src/hooks/useSearchFetch.ts
+++ b/src/hooks/useSearchFetch.ts
@@ -0,0 +1,86 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+type Paged<T> = {
+  items: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+};
+
+/**
+ * Manages API search fetching with automatic request cancellation
+ * to prevent race conditions from rapid filter/page changes.
+ * Keeps previous results visible while a new request is in flight.
+ *
+ * @param onExtra - optional callback to capture extra fields from the response
+ *   (e.g., facets) that sit alongside the standard paged fields.
+ */
+export default function useSearchFetch<T>(
+  endpoint: string,
+  initialData: Paged<T> | null = null,
+  onExtra?: (json: Record<string, unknown>) => void,
+) {
+  const [data, setData] = useState<Paged<T> | null>(initialData);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const fetchIdRef = useRef(0);
+
+  const fetch_ = useCallback(
+    async (params: URLSearchParams) => {
+      // Cancel any in-flight request
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      const id = ++fetchIdRef.current;
+      setLoading(true);
+      setError(null);
+
+      try {
+        const res = await globalThis.fetch(
+          `${endpoint}?${params.toString()}`,
+          { signal: controller.signal },
+        );
+        if (!res.ok) throw new Error(`Search failed (${res.status})`);
+        const json = await res.json();
+
+        // Only apply if this is still the latest request
+        if (id === fetchIdRef.current) {
+          setData({
+            items: json.items,
+            page: json.page,
+            pageSize: json.pageSize,
+            total: json.total,
+          });
+          onExtra?.(json);
+        }
+      } catch (e: unknown) {
+        if (e instanceof DOMException && e.name === "AbortError") return;
+        if (id === fetchIdRef.current) {
+          const msg = e instanceof Error ? e.message : "Search failed";
+          console.error(msg);
+          setError(msg);
+          setData({ items: [] as T[], page: 1, pageSize: 20, total: 0 });
+        }
+      } finally {
+        if (id === fetchIdRef.current) {
+          setLoading(false);
+        }
+      }
+    },
+    [endpoint, onExtra],
+  );
+
+  // Allow syncing SSR data without a fetch
+  const syncData = useCallback((d: Paged<T>) => {
+    abortRef.current?.abort();
+    setData(d);
+    setLoading(false);
+    setError(null);
+  }, []);
+
+  return { data, loading, error, fetch: fetch_, syncData };
+}