v3: add backlinks between dumps (via either dump url or dump target url mentioned through dump description and dump comments)

src/pages/Dump.tsx

@@ -29,6 +29,7 @@ import { Avatar } from "../components/Avatar.tsx";
 import RichContentCard from "../components/RichContentCard.tsx";
 import FilePreview from "../components/FilePreview.tsx";
 import { VoteButton } from "../components/VoteButton.tsx";
+import { DumpCard } from "../components/DumpCard.tsx";
 import { PageShell } from "../components/PageShell.tsx";
 import { PageError } from "../components/PageError.tsx";
 import { Markdown } from "../components/Markdown.tsx";
@@ -54,6 +55,7 @@ export function Dump() {
   const [playlistModalOpen, setPlaylistModalOpen] = useState(false);
 
   const [comments, setComments] = useState<Comment[]>([]);
+  const [relatedDumps, setRelatedDumps] = useState<Dump[]>([]);
 
   const [titleEditing, setTitleEditing] = useState(false);
   const [titleDraft, setTitleDraft] = useState("");
@@ -145,6 +147,24 @@ export function Dump() {
     return () => controller.abort();
   }, [selectedDump, token]);
 
+  // Fetch related dumps (backlinks) when dump loads
+  useEffect(() => {
+    if (!selectedDump) return;
+    const controller = new AbortController();
+    fetch(`${API_URL}/api/dumps/${selectedDump}/related`, {
+      signal: controller.signal,
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    })
+      .then((r) => r.json())
+      .then((body) => {
+        if (body.success) {
+          setRelatedDumps((body.data as RawDump[]).map(deserializeDump));
+        }
+      })
+      .catch(() => {});
+    return () => controller.abort();
+  }, [selectedDump, token]);
+
   // Scroll to and highlight a comment when navigating to #comment-{id}
   useEffect(() => {
     if (!location.hash.startsWith("#comment-")) return;
@@ -440,6 +460,28 @@ export function Dump() {
           </Link>
         </div>
 
+        {/* Related (backlinks) */}
+        {relatedDumps.length > 0 && (
+          <section className="related-section">
+            <h2 className="related-section-title">
+              <Trans>Related</Trans>
+            </h2>
+            <ul className="dump-feed">
+              {relatedDumps.map((related) => (
+                <DumpCard
+                  key={related.id}
+                  dump={related}
+                  voteCount={voteCounts[related.id] ?? related.voteCount}
+                  voted={myVotes.has(related.id)}
+                  canVote={!!user}
+                  castVote={castVote}
+                  removeVote={removeVote}
+                />
+              ))}
+            </ul>
+          </section>
+        )}
+
         {/* Comments */}
         <CommentThread
           dumpId={dump.id}