From b48fdcc2d5241d134e924b8f6dfed9aac85af575 Mon Sep 17 00:00:00 2001
From: Stephen Jennings <stephen.g.jennings@gmail.com>
Date: Mon, 13 Jul 2026 16:52:38 -0700
Subject: [PATCH] feat(home): make PR list items middle-clickable via BlockLink

Home-page PR rows were rendered as <button> elements, so users could not
middle-click to open a PR in a new tab. Introduce a reusable BlockLink
component: BlockLink.Root wraps the clickable card and re-dispatches click
events onto the nested BlockLink.Link, while BlockLink.Link renders an
actual <a> (so the browser handles middle/cmd/ctrl click natively) and
stops propagation to avoid firing twice. BlockLink.Link supports an
asChild prop backed by a small Slot utility that spreads its props onto
its only child.

The PR title on the home list is now a BlockLink.Link with the PR's
canonical href, and plain left-clicks still route through the existing
openPRReviewTab flow for SPA navigation.

Resolves #362
---
 src/browser/components/home.tsx | 27 +++++++----
 src/browser/ui/block-link.tsx   | 80 +++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 src/browser/ui/block-link.tsx

diff --git a/src/browser/components/home.tsx b/src/browser/components/home.tsx
index d3a01cc..35f8297 100644
--- a/src/browser/components/home.tsx
+++ b/src/browser/components/home.tsx
@@ -48,6 +48,7 @@ import {
   DialogTitle,
 } from "../ui/dialog";
 import { Button } from "../ui/button";
+import { BlockLink } from "../ui/block-link";
 import { cn } from "../cn";
 import { Skeleton } from "../ui/skeleton";
 import { UserHoverCard } from "../ui/user-hover-card";
@@ -1962,8 +1963,17 @@ function PRListItem({ pr, onSelect }: PRListItemProps) {
     return pr.updated_at ? pr.updated_at > baseline : false;
   }, [repoInfo, pr.updated_at, pr.viewerLastReviewAt, pr.isReadByViewer]);
 
-  const handleClick = () => {
+  const href = repoInfo
+    ? `/${repoInfo.owner}/${repoInfo.repo}/pull/${pr.number}`
+    : undefined;
+
+  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    // Let the browser handle modifier clicks natively (new tab/window).
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+      return;
+    }
     if (repoInfo) {
+      e.preventDefault();
       onSelect(repoInfo.owner, repoInfo.repo, pr.number, pr.title);
     }
   };
@@ -2294,10 +2304,7 @@ function PRListItem({ pr, onSelect }: PRListItemProps) {
   };
 
   return (
-    <button
-      onClick={handleClick}
-      className="w-full flex items-start gap-2 sm:gap-3 px-2 sm:px-4 py-3 hover:bg-muted/50 transition-colors text-left"
-    >
+    <BlockLink.Root className="w-full flex items-start gap-2 sm:gap-3 px-2 sm:px-4 py-3 hover:bg-muted/50 transition-colors text-left cursor-pointer">
       {/* PR Icon */}
       {isMerged ? (
         <GitMerge className="w-4 h-4 mt-0.5 shrink-0 text-purple-500" />
@@ -2320,9 +2327,13 @@ function PRListItem({ pr, onSelect }: PRListItemProps) {
       {/* Content */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 flex-wrap">
-          <span className="font-medium hover:text-blue-400 break-words">
+          <BlockLink.Link
+            href={href}
+            onClick={handleLinkClick}
+            className="font-medium hover:text-blue-400 break-words no-underline text-inherit"
+          >
             {pr.title}
-          </span>
+          </BlockLink.Link>
           <CIStatusBadge />
           <ReviewStatusBadge />
           {pr.hasNewChanges && (
@@ -2408,7 +2419,7 @@ function PRListItem({ pr, onSelect }: PRListItemProps) {
           )}
         </div>
       </div>
-    </button>
+    </BlockLink.Root>
   );
 }
 
diff --git a/src/browser/ui/block-link.tsx b/src/browser/ui/block-link.tsx
new file mode 100644
index 0000000..b60963d
--- /dev/null
+++ b/src/browser/ui/block-link.tsx
@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Slot as SlotPrimitive } from "radix-ui";
+
+// A ref that BlockLink.Root uses to know where its BlockLink.Link is. Root
+// clicks are re-dispatched onto this element so the browser handles them as
+// native <a> activation.
+type BlockLinkContextValue = {
+  linkRef: React.RefObject<HTMLElement | null>;
+};
+
+const BlockLinkContext = React.createContext<BlockLinkContextValue | null>(
+  null
+);
+
+type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> & {
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  children: React.ReactNode;
+  asChild?: boolean;
+};
+
+function Root({ onClick, children, asChild, ...props }: RootProps) {
+  const linkRef = React.useRef<HTMLElement | null>(null);
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      const link = linkRef.current;
+      if (link && !link.contains(e.target as Node)) {
+        link.click();
+      }
+    },
+    [onClick]
+  );
+
+  const Comp = asChild ? SlotPrimitive.Slot : "div";
+
+  return (
+    <BlockLinkContext.Provider value={{ linkRef }}>
+      <Comp onClick={handleClick} {...props}>
+        {children}
+      </Comp>
+    </BlockLinkContext.Provider>
+  );
+}
+
+type LinkOwnProps = {
+  asChild?: boolean;
+  children: React.ReactNode;
+};
+
+type LinkProps = LinkOwnProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkOwnProps>;
+
+function Link({ asChild, children, onClick, ...props }: LinkProps) {
+  const context = React.useContext(BlockLinkContext);
+  const localRef = React.useRef<HTMLElement | null>(null);
+
+  const setRef = React.useCallback(
+    (el: HTMLElement | null) => {
+      localRef.current = el;
+      if (context) context.linkRef.current = el;
+    },
+    [context]
+  );
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    onClick?.(e as React.MouseEvent<HTMLAnchorElement>);
+  };
+
+  const Comp = asChild ? SlotPrimitive.Slot : "a";
+  return (
+    <Comp ref={setRef} onClick={handleClick} {...props}>
+      {children}
+    </Comp>
+  );
+}
+
+export const BlockLink = { Root, Link };