feat: integrate ZXDB with Drizzle + deep explorer UI; fix Next 15 dynamic params; align ZXDB schema columns

End-to-end ZXDB integration with environment validation, Drizzle ORM MySQL
setup, typed repositories, Zod-validated API endpoints, and a deep, cross‑
linked Explorer UI under `/zxdb`. Also update dynamic route pages to the
Next.js 15 async `params` API and align ZXDB lookup table columns (`text` vs
`name`).

Summary
- Add t3.gg-style Zod environment validation and typed `env` access
- Wire Drizzle ORM to ZXDB (mysql2 pool, singleton) and minimal schemas
- Implement repositories for search, entry details, label browsing, and
  category listings (genres, languages, machinetypes)
- Expose a set of Next.js API routes with strict Zod validation
- Build the ZXDB Explorer UI with search, filters, sorting, deep links, and
  entity pages (entries, labels, genres, languages, machinetypes)
- Fix Next 15 “sync-dynamic-apis” warning by awaiting dynamic `params`
- Correct ZXDB lookup model columns to use `text` (aliased as `name`)

Details
Env & DB
- example.env: document `ZXDB_URL` with readonly role notes
- src/env.ts: Zod schema validates `ZXDB_URL` as `mysql://…`; fails fast on
  invalid env
- src/server/db.ts: create mysql2 pool from `ZXDB_URL`; export Drizzle instance
- drizzle.config.ts: drizzle-kit configuration (schema path, mysql2 driver)

Schema (Drizzle)
- src/server/schema/zxdb.ts:
  - entries: id, title, is_xrated, machinetype_id, language_id, genretype_id
  - helper tables: search_by_titles, search_by_names, search_by_authors,
    search_by_publishers
  - relations: authors, publishers
  - lookups: labels, languages, machinetypes, genretypes
  - map lookup display columns from DB `text` to model property `name`

Repository
- src/server/repo/zxdb.ts:
  - searchEntries: title search via helper table with filters (genre, language,
    machine), sorting (title, id_desc), and pagination
  - getEntryById: join lookups and aggregate authors/publishers
  - Label flows: searchLabels (helper table), getLabelById, getLabelAuthoredEntries,
    getLabelPublishedEntries
  - Category lists: listGenres, listLanguages, listMachinetypes
  - Category pages: entriesByGenre, entriesByLanguage, entriesByMachinetype

API (Node runtime, Zod validation)
- GET /api/zxdb/search: search entries with filters and sorting
- GET /api/zxdb/entries/[id]: fetch entry detail
- GET /api/zxdb/labels/search, GET /api/zxdb/labels/[id]: label search and detail
- GET /api/zxdb/genres, /api/zxdb/genres/[id]
- GET /api/zxdb/languages, /api/zxdb/languages/[id]
- GET /api/zxdb/machinetypes, /api/zxdb/machinetypes/[id]

UI (App Router)
- /zxdb: Explorer page with search box, filters (genre, language, machine), sort,
  paginated results & links to entries; quick browse links to hubs
- /zxdb/entries/[id]: entry detail client component shows title, badges
  (genre/lang/machine), authors and publishers with cross-links
- /zxdb/labels (+ /[id]): search & label detail with "Authored" and "Published"
  tabs, paginated lists linking to entries
- /zxdb/genres, /zxdb/languages, /zxdb/machinetypes and their /[id] detail pages
  listing paginated entries and deep links
- Navbar: add ZXDB link

Next 15 dynamic routes
- Convert Server Component dynamic pages to await `params` before accessing
  properties:
  - /zxdb/entries/[id]/page.tsx
  - /zxdb/labels/[id]/page.tsx
  - /zxdb/genres/[id]/page.tsx
  - /zxdb/languages/[id]/page.tsx
  - /registers/[hex]/page.tsx (Registers section)
- /api/zxdb/entries/[id]/route.ts: await `ctx.params` before validation

ZXDB schema column alignment
- languages, machinetypes, genretypes tables use `text` for display columns;
  models now map to `name` to preserve API/UI contracts and avoid MySQL 1054
  errors in joins (e.g., entry detail endpoint).

Notes
- Ensure ZXDB helper tables are created (ZXDB/scripts/ZXDB_help_search.sql)
  — required for fast title/name searches and author/publisher lookups.
- Pagination defaults to 20 (max 100). No `select *` used in queries.
- API responses are `cache: no-store` for now; can be tuned later.

Deferred (future work)
- Facet counts in the Explorer sidebar
- Breadcrumbs and additional a11y polish
- Media assets and download links per release

Signed-off-by: Junie@lucy.xalior.com

Signed-off-by: Junie@lucy.xalior.com

src/app/zxdb/genres/[id]/GenreDetail.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
+type Paged<T> = { items: T[]; page: number; pageSize: number; total: number };
+
+export default function GenreDetailClient({ id }: { id: number }) {
+  const [data, setData] = useState<Paged<Item> | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const pageSize = 20;
+  const totalPages = useMemo(() => (data ? Math.max(1, Math.ceil(data.total / data.pageSize)) : 1), [data]);
+
+  async function load(p: number) {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/zxdb/genres/${id}?page=${p}&pageSize=${pageSize}`, { cache: "no-store" });
+      const json = (await res.json()) as Paged<Item>;
+      setData(json);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load(page);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page]);
+
+  return (
+    <div className="container">
+      <h1>Genre #{id}</h1>
+      {loading && <div>Loading…</div>}
+      {data && data.items.length === 0 && !loading && <div className="alert alert-warning">No entries.</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: 120 }}>Machine</th>
+                <th style={{ width: 80 }}>Lang</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.items.map((it) => (
+                <tr key={it.id}>
+                  <td>{it.id}</td>
+                  <td><a href={`/zxdb/entries/${it.id}`}>{it.title}</a></td>
+                  <td>{it.machinetypeId ?? "-"}</td>
+                  <td>{it.languageId ?? "-"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="d-flex align-items-center gap-2 mt-2">
+        <button className="btn btn-outline-secondary" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={loading || page <= 1}>Prev</button>
+        <span>Page {data?.page ?? page} / {totalPages}</span>
+        <button className="btn btn-outline-secondary" onClick={() => setPage((p) => p + 1)} disabled={loading || (data ? data.page >= totalPages : false)}>Next</button>
+      </div>
+    </div>
+  );
+}