Standardize ZXDB UI; add SSR search/tables

Unify the look and feel of all /zxdb pages and minimize client pop-in.

- Make all /zxdb pages full-width to match /explorer
- Convert Languages, Genres, Machine Types, and Labels lists to
  Bootstrap tables with table-striped and table-hover inside
  table-responsive wrappers
- Replace raw FK IDs with linked names via SSR repository joins
- Add scoped search boxes on detail pages (labels, genres, languages,
  machine types) with SSR filtering and pagination that preserves q/tab
- Keep explorer results consistent: show Machine/Language names with
  links, no client lookups required

This improves consistency, readability, and first paint stability across
the ZXDB section while keeping navigation fast and discoverable.

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

src/app/zxdb/languages/LanguagesSearch.tsx

@@ -44,14 +44,26 @@ export default function LanguagesSearch({ initial, initialQ }: { initial?: Paged
       <div className="mt-3">
         {data && data.items.length === 0 && <div className="alert alert-warning">No languages found.</div>}
         {data && data.items.length > 0 && (
-          <ul className="list-group">
-            {data.items.map((l) => (
-              <li key={l.id} className="list-group-item d-flex justify-content-between align-items-center">
-                <Link href={`/zxdb/languages/${l.id}`}>{l.name}</Link>
-                <span className="badge text-bg-light">{l.id}</span>
-              </li>
-            ))}
-          </ul>
+          <div className="table-responsive">
+            <table className="table table-striped table-hover align-middle">
+              <thead>
+                <tr>
+                  <th style={{ width: 120 }}>Code</th>
+                  <th>Name</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.items.map((l) => (
+                  <tr key={l.id}>
+                    <td><span className="badge text-bg-light">{l.id}</span></td>
+                    <td>
+                      <Link href={`/zxdb/languages/${l.id}`}>{l.name}</Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         )}
       </div>
 

src/app/zxdb/languages/[id]/LanguageDetail.tsx

@@ -1,17 +1,28 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
 
-type Item = { id: number; title: string; isXrated: number; machinetypeId: number | null; languageId: string | null };
+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 LanguageDetailClient({ id, initial }: { id: string; initial: Paged<Item> }) {
+export default function LanguageDetailClient({ id, initial, initialQ }: { id: string; initial: Paged<Item>; initialQ?: string }) {
+  const router = useRouter();
+  const [q, setQ] = useState(initialQ ?? "");
   const totalPages = useMemo(() => Math.max(1, Math.ceil(initial.total / initial.pageSize)), [initial]);
 
   return (
-    <div className="container">
-      <h1>Language {id}</h1>
+    <div>
+      <h1 className="mb-0">Language <span className="badge text-bg-light">{id}</span></h1>
+      <form className="row gy-2 gx-2 align-items-center mt-2" onSubmit={(e) => { e.preventDefault(); const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", "1"); router.push(`/zxdb/languages/${id}?${p.toString()}`); }}>
+        <div className="col-sm-8 col-md-6 col-lg-4">
+          <input className="form-control" placeholder="Search within this language…" value={q} onChange={(e) => setQ(e.target.value)} />
+        </div>
+        <div className="col-auto">
+          <button className="btn btn-primary">Search</button>
+        </div>
+      </form>
       {initial && initial.items.length === 0 && <div className="alert alert-warning">No entries.</div>}
       {initial && initial.items.length > 0 && (
         <div className="table-responsive">
@@ -20,8 +31,8 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
               <tr>
                 <th style={{ width: 80 }}>ID</th>
                 <th>Title</th>
-                <th style={{ width: 120 }}>Machine</th>
-                <th style={{ width: 80 }}>Lang</th>
+                <th style={{ width: 160 }}>Machine</th>
+                <th style={{ width: 120 }}>Language</th>
               </tr>
             </thead>
             <tbody>
@@ -29,8 +40,28 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
                 <tr key={it.id}>
                   <td>{it.id}</td>
                   <td><Link href={`/zxdb/entries/${it.id}`}>{it.title}</Link></td>
-                  <td>{it.machinetypeId ?? "-"}</td>
-                  <td>{it.languageId ?? "-"}</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>
@@ -44,14 +75,14 @@ export default function LanguageDetailClient({ id, initial }: { id: string; init
           <Link
             className={`btn btn-sm btn-outline-secondary ${initial.page <= 1 ? "disabled" : ""}`}
             aria-disabled={initial.page <= 1}
-            href={`/zxdb/languages/${id}?page=${Math.max(1, initial.page - 1)}`}
+            href={`/zxdb/languages/${id}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.max(1, initial.page - 1))); return p.toString(); })()}`}
           >
             Prev
           </Link>
           <Link
             className={`btn btn-sm btn-outline-secondary ${initial.page >= totalPages ? "disabled" : ""}`}
             aria-disabled={initial.page >= totalPages}
-            href={`/zxdb/languages/${id}?page=${Math.min(totalPages, initial.page + 1)}`}
+            href={`/zxdb/languages/${id}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); p.set("page", String(Math.min(totalPages, initial.page + 1))); return p.toString(); })()}`}
           >
             Next
           </Link>

src/app/zxdb/languages/[id]/page.tsx

@@ -9,6 +9,7 @@ export const dynamic = "force-dynamic";
 export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) {
   const [{ id }, sp] = await Promise.all([params, searchParams]);
   const page = Math.max(1, Number(Array.isArray(sp.page) ? sp.page[0] : sp.page) || 1);
-  const initial = await entriesByLanguage(id, page, 20);
-  return <LanguageDetailClient id={id} initial={initial as any} />;
+  const q = (Array.isArray(sp.q) ? sp.q[0] : sp.q) ?? "";
+  const initial = await entriesByLanguage(id, page, 20, q || undefined);
+  return <LanguageDetailClient id={id} initial={initial as any} initialQ={q} />;
 }