From 7b61099886f3aac139ad43fb73873c73ba7baf4f Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Sun, 13 Sep 2026 20:09:18 -0300
Subject: [PATCH] feat(web): show the linked pull request in the compact
 sidebar rail (#11652)

---
 apps/web/src/components/Sidebar.tsx                | 10 ++++++++--
 apps/web/src/components/ThreadStatusIndicators.tsx | 11 ++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 65ac1cf7752cbd0a5cece5444e66f90545414952..9cee123e4ecf06db1ef015cdb80ef03e20090b07 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1584,10 +1584,10 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
     useRightPanelStore.getState().open(threadRef, "pull-requests");
     if (!props.isActive) onThreadActivate(threadRef);
   }, [onThreadActivate, props.isActive, threadRef]);
-  const renderPrBadge = (iconOnly: boolean) =>
+  const renderPrBadge = (iconOnly: boolean, variant: "underline" | "badge" = "underline") =>
     prBadgeShape?.kind === "stack" || pr || currentLinkedPr ? (
       <ThreadPullRequestBadgeControl
-        variant="underline"
+        variant={variant}
         badge={prBadgeShape}
         number={pr?.number ?? currentLinkedPr?.number}
         url={pr?.url ?? currentLinkedPr?.url}
@@ -1597,6 +1597,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
         onOpenPullRequest={handlePrClick}
       />
     ) : null;
+  const hasPrBadge = prBadgeShape?.kind === "stack" || pr !== null || currentLinkedPr !== null;
   const prBadge = renderPrBadge(false);
   const terminalStatusIcon = terminalStatus ? (
     <span
@@ -1719,6 +1720,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                   </TooltipPopup>
                 </Tooltip>
               ) : null}
+              {hasPrBadge ? (
+                <span className="absolute -top-1 -right-1 inline-flex">
+                  {renderPrBadge(true, "badge")}
+                </span>
+              ) : null}
             </span>
             {topStatus ? (
               <span
diff --git a/apps/web/src/components/ThreadStatusIndicators.tsx b/apps/web/src/components/ThreadStatusIndicators.tsx
index bb99df0a3d323524aebc76790423396c3ad8731b..4b26d0442021c1205e531bb787472c8ae08dd2a7 100644
--- a/apps/web/src/components/ThreadStatusIndicators.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.tsx
@@ -148,7 +148,7 @@ export function ThreadPullRequestBadgeControl({
   onOpenStack,
   onOpenPullRequest,
 }: {
-  variant: "underline" | "ghost";
+  variant: "underline" | "ghost" | "badge";
   badge: ThreadPullRequestBadge | null;
   number?: number | undefined;
   url?: string | undefined;
@@ -171,7 +171,9 @@ export function ThreadPullRequestBadgeControl({
   const className = cn(
     variant === "ghost"
       ? buttonVariants({ variant: "ghost", size: "xs" })
-      : "inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap border-b border-transparent hover:border-current focus-visible:outline-2 focus-visible:outline-ring",
+      : variant === "badge"
+        ? "inline-flex size-3 shrink-0 cursor-pointer items-center justify-center rounded-full bg-sidebar ring-1 ring-sidebar outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        : "inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap border-b border-transparent hover:border-current focus-visible:outline-2 focus-visible:outline-ring",
     "text-xs tabular-nums",
     variant === "ghost" &&
       "font-normal text-xs! active:scale-100 [--control-icon-color:currentColor]",
@@ -181,7 +183,10 @@ export function ThreadPullRequestBadgeControl({
   );
   const content = (
     <>
-      <ThreadPullRequestBadgeIcon icon={badge?.kind ?? "pull-request"} />
+      <ThreadPullRequestBadgeIcon
+        icon={badge?.kind ?? "pull-request"}
+        className={variant === "badge" ? "size-2.5" : undefined}
+      />
       {iconOnly ? null : isStack ? badge.layers : linkedCount !== null ? `+${linkedCount}` : number}
     </>
   );
-- 
2.54.0