v3: a feed card opens in a new tab on a middle click, wherever you point — the cards are clickable elements rather than links, so only the title, the one real anchor, answered a middle click; the rest of the card, the play button included, did nothing, and a middle press there started the browser's autoscroll instead. A shared useDumpCardLink now gives DumpCard and JournalCard an auxclick that opens the dump in a new tab, with the middle press's default suppressed so autoscroll doesn't swallow it, and a ctrl/cmd/shift click does the same — caught ahead of the play button, so a modified click on a playable card opens it rather than playing it, while a plain click still plays. Anchors inside a card keep their own target: the title, category chips, and a source link's ↗ still open what they point at.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/DumpCard.tsx

@@ -1,10 +1,11 @@
-import { Link, useNavigate } from "react-router";
+import { Link } from "react-router";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../model.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { dumpThumbnailUrl, dumpUrl } from "../utils/urls.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useCategories } from "../hooks/useCategories.ts";
+import { useDumpCardLink } from "../hooks/useDumpCardLink.ts";
 import { isDumpVisited, isRecent, markDumpVisited } from "../utils/visited.ts";
 import FilePreview from "./FilePreview.tsx";
 import RichContentCard from "./RichContentCard.tsx";
@@ -28,7 +29,7 @@ export function DumpCard(
   { dump, voteCount, voted, canVote, castVote, removeVote, className, isOwner }:
     DumpCardProps,
 ) {
-  const navigate = useNavigate();
+  const { cardProps, handledAsNewTab } = useDumpCardLink(dump);
   const { token } = useAuth();
   const { byId } = useCategories();
   const dumpCategories = (dump.categoryIds ?? [])
@@ -37,21 +38,17 @@ export function DumpCard(
   const unread = !isOwner && isRecent(dump.createdAt) &&
     !isDumpVisited(dump.id);
 
-  function handleNavigate() {
-    markDumpVisited(dump.id);
-    navigate(dumpUrl(dump));
-  }
-
   return (
     <li className={`dump-card${className ? ` ${className}` : ""}`}>
       <div
         className="dump-card-inner"
-        onClick={handleNavigate}
+        {...cardProps}
       >
         <div className="dump-card-left">
           <div
             className="dump-card-preview"
             onClick={dump.richContent ? (e) => e.stopPropagation() : undefined}
+            onClickCapture={handledAsNewTab}
           >
             {dump.kind === "file"
               ? <FilePreview dump={dump} compact />

src/components/JournalCard.tsx

@@ -1,9 +1,10 @@
-import { Link, useNavigate } from "react-router";
+import { Link } from "react-router";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../model.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { dumpFileUrl, dumpThumbnailUrl, dumpUrl } from "../utils/urls.ts";
 import { useAuth } from "../hooks/useAuth.ts";
+import { useDumpCardLink } from "../hooks/useDumpCardLink.ts";
 import { isDumpVisited, isRecent, markDumpVisited } from "../utils/visited.ts";
 import { hasQuote, hasThumbnail, type JournalShape } from "../utils/journalLayout.ts";
 import { VoteButton } from "./VoteButton.tsx";
@@ -32,22 +33,17 @@ export function JournalCard(
   { dump, shape, voteCount, voted, canVote, castVote, removeVote, isOwner }:
     JournalCardProps,
 ) {
-  const navigate = useNavigate();
+  const { go, cardProps, handledAsNewTab } = useDumpCardLink(dump);
   const { token } = useAuth();
   const { playRichContent } = usePlayRichContent();
   const unread = !isOwner && isRecent(dump.createdAt) &&
     !isDumpVisited(dump.id);
 
-  function handleNavigate() {
-    markDumpVisited(dump.id);
-    navigate(dumpUrl(dump));
-  }
-
   // A playable card plays. If playback turns out to be impossible — a Bandcamp
   // page with no streams and no embed to fall back to — the card must still do
   // what an unplayable one does rather than swallowing the click.
   async function handlePlayOrNavigate(rc: NonNullable<typeof playable>) {
-    if (!await playRichContent(rc, dumpUrl(dump))) handleNavigate();
+    if (!await playRichContent(rc, dumpUrl(dump))) go();
   }
 
   // Mirrors FilePreview (the hot/new feeds) so a video shows its generated
@@ -157,9 +153,12 @@ export function JournalCard(
     return (
       <li
         className={className}
+        {...cardProps}
         onClick={playable
-          ? () => void handlePlayOrNavigate(playable)
-          : handleNavigate}
+          ? (e) => {
+            if (!handledAsNewTab(e)) void handlePlayOrNavigate(playable);
+          }
+          : cardProps.onClick}
       >
         <div className="journal-card-image">
           <Thumbnail
@@ -196,7 +195,7 @@ export function JournalCard(
 
   if (mode === "quote") {
     return (
-      <li className={className} onClick={handleNavigate}>
+      <li className={className} {...cardProps}>
         <span className="journal-card-quotemark" aria-hidden="true">“</span>
         <Markdown className="journal-card-quote-body" inline>
           {dump.comment!}
@@ -211,7 +210,7 @@ export function JournalCard(
 
   // text
   return (
-    <li className={className} onClick={handleNavigate}>
+    <li className={className} {...cardProps}>
       <span className="journal-card-glyph" aria-hidden="true">
         {fallbackIcon}
       </span>