authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-13 20:09:18-03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-13 20:09:18-03:00
log7b61099886f3aac139ad43fb73873c73ba7baf4f
tree2e2e44d39377df5dd781cd8e4ea3281b9395499b
parentdf7ccc8fd01f5d2a1d8ec21bef8f9c59398fe913
signature Signed by PGP key B5690EEEBB952194

feat(web): show the linked pull request in the compact sidebar rail (#11652)

2 files changed, 16 insertions(+), 5 deletions(-)

apps/web/src/components/Sidebar.tsx+8-2
......@@ -1584,10 +1584,10 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
15841584 useRightPanelStore.getState().open(threadRef, "pull-requests");
15851585 if (!props.isActive) onThreadActivate(threadRef);
15861586 }, [onThreadActivate, props.isActive, threadRef]);
1587 const renderPrBadge = (iconOnly: boolean) =>
1587 const renderPrBadge = (iconOnly: boolean, variant: "underline" | "badge" = "underline") =>
15881588 prBadgeShape?.kind === "stack" || pr || currentLinkedPr ? (
15891589 <ThreadPullRequestBadgeControl
1590 variant="underline"
1590 variant={variant}
15911591 badge={prBadgeShape}
15921592 number={pr?.number ?? currentLinkedPr?.number}
15931593 url={pr?.url ?? currentLinkedPr?.url}
......@@ -1597,6 +1597,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
15971597 onOpenPullRequest={handlePrClick}
15981598 />
15991599 ) : null;
1600 const hasPrBadge = prBadgeShape?.kind === "stack" || pr !== null || currentLinkedPr !== null;
16001601 const prBadge = renderPrBadge(false);
16011602 const terminalStatusIcon = terminalStatus ? (
16021603 <span
......@@ -1719,6 +1720,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
17191720 </TooltipPopup>
17201721 </Tooltip>
17211722 ) : null}
1723 {hasPrBadge ? (
1724 <span className="absolute -top-1 -right-1 inline-flex">
1725 {renderPrBadge(true, "badge")}
1726 </span>
1727 ) : null}
17221728 </span>
17231729 {topStatus ? (
17241730 <span
apps/web/src/components/ThreadStatusIndicators.tsx+8-3
......@@ -148,7 +148,7 @@ export function ThreadPullRequestBadgeControl({
148148 onOpenStack,
149149 onOpenPullRequest,
150150}: {
151 variant: "underline" | "ghost";
151 variant: "underline" | "ghost" | "badge";
152152 badge: ThreadPullRequestBadge | null;
153153 number?: number | undefined;
154154 url?: string | undefined;
......@@ -171,7 +171,9 @@ export function ThreadPullRequestBadgeControl({
171171 const className = cn(
172172 variant === "ghost"
173173 ? buttonVariants({ variant: "ghost", size: "xs" })
174 : "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",
174 : variant === "badge"
175 ? "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"
176 : "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",
175177 "text-xs tabular-nums",
176178 variant === "ghost" &&
177179 "font-normal text-xs! active:scale-100 [--control-icon-color:currentColor]",
......@@ -181,7 +183,10 @@ export function ThreadPullRequestBadgeControl({
181183 );
182184 const content = (
183185 <>
184 <ThreadPullRequestBadgeIcon icon={badge?.kind ?? "pull-request"} />
186 <ThreadPullRequestBadgeIcon
187 icon={badge?.kind ?? "pull-request"}
188 className={variant === "badge" ? "size-2.5" : undefined}
189 />
185190 {iconOnly ? null : isStack ? badge.layers : linkedCount !== null ? `+${linkedCount}` : number}
186191 </>
187192 );