Adding the first stubs of the magazine browser

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

@@ -0,0 +1,85 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getMagazine } from "@/server/repo/zxdb";
+
+export const metadata = { title: "ZXDB Magazine" };
+export const revalidate = 3600;
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const magazineId = Number(id);
+  if (!Number.isFinite(magazineId) || magazineId <= 0) return notFound();
+
+  const mag = await getMagazine(magazineId);
+  if (!mag) return notFound();
+
+  return (
+    <div>
+      <h1 className="mb-1">{mag.title}</h1>
+      <div className="text-secondary mb-3">Language: {mag.languageId}</div>
+
+      <div className="mb-3 d-flex gap-2 flex-wrap">
+        <Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">← Back to list</Link>
+        {mag.linkSite && (
+          <a className="btn btn-outline-secondary btn-sm" href={mag.linkSite} target="_blank" rel="noreferrer">
+            Official site
+          </a>
+        )}
+      </div>
+
+      <h2 className="h5 mt-4">Issues</h2>
+      {mag.issues.length === 0 ? (
+        <div className="text-secondary">No issues found.</div>
+      ) : (
+        <div className="table-responsive">
+          <table className="table table-sm align-middle">
+            <thead>
+              <tr>
+                <th style={{ width: 200 }}>Issue</th>
+                <th style={{ width: 100 }}>Volume</th>
+                <th style={{ width: 100 }}>Number</th>
+                <th>Special</th>
+                <th>Supplement</th>
+                <th style={{ width: 100 }}>Links</th>
+              </tr>
+            </thead>
+            <tbody>
+              {mag.issues.map((i) => (
+                <tr key={i.id}>
+                  <td>
+                    <Link href={`/zxdb/issues/${i.id}`} className="link-underline link-underline-opacity-0">
+                      {i.dateYear ?? ""}
+                      {i.dateMonth ? `/${String(i.dateMonth).padStart(2, "0")}` : ""}
+                      {" "}
+                      <span className="text-secondary">(open issue)</span>
+                    </Link>
+                  </td>
+                  <td>{i.volume ?? ""}</td>
+                  <td>{i.number ?? ""}</td>
+                  <td>{i.special ?? ""}</td>
+                  <td>{i.supplement ?? ""}</td>
+                  <td>
+                    <div className="d-flex gap-2">
+                      {i.linkMask && (
+                        <a className="btn btn-outline-secondary btn-sm" href={i.linkMask} target="_blank" rel="noreferrer" title="Link">
+                          <span className="bi bi-link-45deg" aria-hidden />
+                          <span className="visually-hidden">Link</span>
+                        </a>
+                      )}
+                      {i.archiveMask && (
+                        <a className="btn btn-outline-secondary btn-sm" href={i.archiveMask} target="_blank" rel="noreferrer" title="Archive">
+                          <span className="bi bi-archive" aria-hidden />
+                          <span className="visually-hidden">Archive</span>
+                        </a>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}