Add entry relations and tags

Show relations and tag membership sections on entry detail.

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

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

@@ -22,6 +22,20 @@ export type EntryDetailData = {
     linkSite?: string | null;
     comments?: string | null;
   }[];
+  relations?: {
+    direction: "from" | "to";
+    type: { id: string; name: string | null };
+    entry: { id: number; title: string | null };
+  }[];
+  tags?: {
+    id: number;
+    name: string;
+    type: { id: string; name: string | null };
+    category: { id: number | null; name: string | null };
+    memberSeq: number | null;
+    link: string | null;
+    comments: string | null;
+  }[];
   origins?: {
     type: { id: string; name: string | null };
     libraryTitle: string;
@@ -403,6 +417,80 @@ export default function EntryDetailClient({ data }: { data: EntryDetailData | nu
 
       <hr />
 
+      <div>
+        <h5>Relations</h5>
+        {(!data.relations || data.relations.length === 0) && <div className="text-secondary">No relations recorded</div>}
+        {data.relations && data.relations.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-sm table-striped align-middle">
+              <thead>
+                <tr>
+                  <th style={{ width: 90 }}>Direction</th>
+                  <th style={{ width: 160 }}>Type</th>
+                  <th>Entry</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.relations.map((r, idx) => (
+                  <tr key={`${r.entry.id}-${r.type.id}-${idx}`}>
+                    <td>{r.direction === "from" ? "From" : "To"}</td>
+                    <td>{r.type.name ?? r.type.id}</td>
+                    <td>
+                      <Link href={`/zxdb/entries/${r.entry.id}`}>
+                        {r.entry.title ?? `Entry #${r.entry.id}`}
+                      </Link>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <div>
+        <h5>Tags / Members</h5>
+        {(!data.tags || data.tags.length === 0) && <div className="text-secondary">No tags recorded</div>}
+        {data.tags && data.tags.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-sm table-striped align-middle">
+              <thead>
+                <tr>
+                  <th>Tag</th>
+                  <th style={{ width: 140 }}>Type</th>
+                  <th style={{ width: 140 }}>Category</th>
+                  <th style={{ width: 120 }}>Member Seq</th>
+                  <th>Links</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.tags.map((t) => (
+                  <tr key={`${t.id}-${t.category.id ?? "none"}`}>
+                    <td>{t.name}</td>
+                    <td>{t.type.name ?? t.type.id}</td>
+                    <td>{t.category.name ?? (t.category.id != null ? `#${t.category.id}` : "-")}</td>
+                    <td>{t.memberSeq ?? <span className="text-secondary">-</span>}</td>
+                    <td>
+                      <div className="d-flex gap-2 flex-wrap">
+                        {t.link && (
+                          <a href={t.link} target="_blank" rel="noreferrer">Link</a>
+                        )}
+                        {t.comments && <span className="text-secondary">{t.comments}</span>}
+                        {!t.link && !t.comments && <span className="text-secondary">-</span>}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <hr />
+
       {/* Aliases (alternative titles) */}
       <div>
         <h5>Aliases</h5>