chore: ZXDB env validation, MySQL setup, API & UI

This sanity commit wires up the initial ZXDB integration and a minimal UI to explore it.

Key changes:
- Add Zod-based env parsing (`src/env.ts`) validating `ZXDB_URL` as a mysql:// URL (t3.gg style).
- Configure Drizzle ORM with mysql2 connection pool (`src/server/db.ts`) driven by `ZXDB_URL`.
- Define minimal ZXDB schema models (`src/server/schema/zxdb.ts`): `entries` and helper `search_by_titles`.
- Implement repository search with pagination using helper table (`src/server/repo/zxdb.ts`).
- Expose Next.js API route `GET /api/zxdb/search` with Zod query validation and Node runtime (`src/app/api/zxdb/search/route.ts`).
- Create new app section “ZXDB Explorer” at `/zxdb` with search UI, results table, and pagination (`src/app/zxdb/*`).
- Add navbar link to ZXDB (`src/components/Navbar.tsx`).
- Update example.env with readonly-role notes and example `ZXDB_URL`.
- Add drizzle-kit config scaffold (`drizzle.config.ts`).
- Update package.json deps: drizzle-orm, mysql2, zod; devDeps: drizzle-kit. Lockfile updated.
- Extend .gitignore to exclude large ZXDB structure dump.

Notes:
- Ensure ZXDB data and helper tables are loaded (see `ZXDB/scripts/ZXDB_help_search.sql`).
- This commit provides structure-only browsing; future work can enrich schema (authors, labels, publishers) and UI filters.

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

src/app/api/zxdb/search/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest } from "next/server";
+import { z } from "zod";
+import { searchEntries } from "@/server/repo/zxdb";
+
+const querySchema = z.object({
+  q: z.string().optional(),
+  page: z.coerce.number().int().positive().optional(),
+  pageSize: z.coerce.number().int().positive().max(100).optional(),
+});
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const parsed = querySchema.safeParse({
+    q: searchParams.get("q") ?? undefined,
+    page: searchParams.get("page") ?? undefined,
+    pageSize: searchParams.get("pageSize") ?? undefined,
+  });
+  if (!parsed.success) {
+    return new Response(
+      JSON.stringify({ error: parsed.error.flatten() }),
+      { status: 400, headers: { "content-type": "application/json" } }
+    );
+  }
+  const data = await searchEntries(parsed.data);
+  return new Response(JSON.stringify(data), {
+    headers: { "content-type": "application/json" },
+  });
+}
+
+// Ensure Node.js runtime (required for mysql2)
+export const runtime = "nodejs";

src/app/zxdb/ZxdbExplorer.tsx

@@ -0,0 +1,132 @@
+"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 ZxdbExplorer() {
+  const [q, setQ] = useState("");
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<Paged<Item> | null>(null);
+
+  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));
+      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) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      setData({ items: [], page: 1, pageSize, total: 0 });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchData(q, page);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page]);
+
+  function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setPage(1);
+    fetchData(q, 1);
+  }
+
+  return (
+    <div className="container">
+      <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>
+        {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: 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>{it.title}</td>
+                    <td>{it.machinetypeId ?? "-"}</td>
+                    <td>{it.languageId ?? "-"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </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>
+  );
+}

src/app/zxdb/page.tsx

@@ -0,0 +1,9 @@
+import ZxdbExplorer from "./ZxdbExplorer";
+
+export const metadata = {
+  title: "ZXDB Explorer",
+};
+
+export default function Page() {
+  return <ZxdbExplorer />;
+}