Add entry ports and scores

Surface ports, remakes, scores, and notes on entry detail.

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

src/app/zxdb/entries/[id]/EntryDetail.tsx

@@ -36,6 +36,34 @@ export type EntryDetailData = {
     link: string | null;
     comments: string | null;
   }[];
+  ports?: {
+    id: number;
+    title: string | null;
+    platform: { id: number; name: string | null };
+    isOfficial: boolean;
+    linkSystem: string | null;
+  }[];
+  remakes?: {
+    id: number;
+    title: string;
+    fileLink: string;
+    fileDate: string | null;
+    fileSize: number | null;
+    authors: string | null;
+    platforms: string | null;
+    remakeYears: string | null;
+    remakeStatus: string | null;
+  }[];
+  scores?: {
+    website: { id: number; name: string | null };
+    score: number;
+    votes: number;
+  }[];
+  notes?: {
+    id: number;
+    type: { id: string; name: string | null };
+    text: string;
+  }[];
   origins?: {
     type: { id: string; name: string | null };
     libraryTitle: string;
@@ -491,6 +519,138 @@ export default function EntryDetailClient({ data }: { data: EntryDetailData | nu
 
       <hr />
 
+      <div>
+        <h5>Ports</h5>
+        {(!data.ports || data.ports.length === 0) && <div className="text-secondary">No ports recorded</div>}
+        {data.ports && data.ports.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-sm table-striped align-middle">
+              <thead>
+                <tr>
+                  <th>Title</th>
+                  <th style={{ width: 160 }}>Platform</th>
+                  <th style={{ width: 120 }}>Official</th>
+                  <th>Link</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.ports.map((p) => (
+                  <tr key={p.id}>
+                    <td>{p.title ?? <span className="text-secondary">-</span>}</td>
+                    <td>{p.platform.name ?? `#${p.platform.id}`}</td>
+                    <td>{p.isOfficial ? "Yes" : "No"}</td>
+                    <td>
+                      {p.linkSystem ? (
+                        <a href={p.linkSystem} target="_blank" rel="noreferrer">Link</a>
+                      ) : (
+                        <span className="text-secondary">-</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <div>
+        <h5>Remakes</h5>
+        {(!data.remakes || data.remakes.length === 0) && <div className="text-secondary">No remakes recorded</div>}
+        {data.remakes && data.remakes.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-sm table-striped align-middle">
+              <thead>
+                <tr>
+                  <th>Title</th>
+                  <th style={{ width: 160 }}>Platforms</th>
+                  <th style={{ width: 140 }}>Years</th>
+                  <th style={{ width: 140 }}>File</th>
+                  <th>Notes</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.remakes.map((r) => (
+                  <tr key={r.id}>
+                    <td>{r.title}</td>
+                    <td>{r.platforms ?? <span className="text-secondary">-</span>}</td>
+                    <td>{r.remakeYears ?? <span className="text-secondary">-</span>}</td>
+                    <td>
+                      {r.fileLink ? (
+                        <a href={r.fileLink} target="_blank" rel="noreferrer">File</a>
+                      ) : (
+                        <span className="text-secondary">-</span>
+                      )}
+                    </td>
+                    <td>{r.remakeStatus ?? r.authors ?? <span className="text-secondary">-</span>}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <div>
+        <h5>Scores</h5>
+        {(!data.scores || data.scores.length === 0) && <div className="text-secondary">No scores recorded</div>}
+        {data.scores && data.scores.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-sm table-striped align-middle">
+              <thead>
+                <tr>
+                  <th>Website</th>
+                  <th style={{ width: 120 }}>Score</th>
+                  <th style={{ width: 120 }}>Votes</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.scores.map((s, idx) => (
+                  <tr key={`${s.website.id}-${idx}`}>
+                    <td>{s.website.name ?? `#${s.website.id}`}</td>
+                    <td>{s.score}</td>
+                    <td>{s.votes}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <div>
+        <h5>Notes</h5>
+        {(!data.notes || data.notes.length === 0) && <div className="text-secondary">No notes recorded</div>}
+        {data.notes && data.notes.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-sm table-striped align-middle">
+              <thead>
+                <tr>
+                  <th style={{ width: 140 }}>Type</th>
+                  <th>Text</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.notes.map((n) => (
+                  <tr key={n.id}>
+                    <td>{n.type.name ?? n.type.id}</td>
+                    <td>{n.text}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <hr />
+
       {/* Aliases (alternative titles) */}
       <div>
         <h5>Aliases</h5>