| author |  maria <maria@kuuro.net> 2026-09-13 20:09:18-03:00 |
| committer |  GitHub <noreply@github.com> 2026-09-13 20:09:18-03:00 |
| log | 7b61099886f3aac139ad43fb73873c73ba7baf4f |
| tree | 2e2e44d39377df5dd781cd8e4ea3281b9395499b |
| parent | df7ccc8fd01f5d2a1d8ec21bef8f9c59398fe913 |
| 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
apps/web/src/components/Sidebar.tsx+8-2
| ... | @@ -1584,10 +1584,10 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { | ... | @@ -1584,10 +1584,10 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { |
| 1584 | useRightPanelStore.getState().open(threadRef, "pull-requests"); | 1584 | useRightPanelStore.getState().open(threadRef, "pull-requests"); |
| 1585 | if (!props.isActive) onThreadActivate(threadRef); | 1585 | if (!props.isActive) onThreadActivate(threadRef); |
| 1586 | }, [onThreadActivate, props.isActive, threadRef]); | 1586 | }, [onThreadActivate, props.isActive, threadRef]); |
| 1587 | const renderPrBadge = (iconOnly: boolean) => | 1587 | const renderPrBadge = (iconOnly: boolean, variant: "underline" | "badge" = "underline") => |
| 1588 | prBadgeShape?.kind === "stack" || pr || currentLinkedPr ? ( | 1588 | prBadgeShape?.kind === "stack" || pr || currentLinkedPr ? ( |
| 1589 | <ThreadPullRequestBadgeControl | 1589 | <ThreadPullRequestBadgeControl |
| 1590 | variant="underline" | 1590 | variant={variant} |
| 1591 | badge={prBadgeShape} | 1591 | badge={prBadgeShape} |
| 1592 | number={pr?.number ?? currentLinkedPr?.number} | 1592 | number={pr?.number ?? currentLinkedPr?.number} |
| 1593 | url={pr?.url ?? currentLinkedPr?.url} | 1593 | url={pr?.url ?? currentLinkedPr?.url} |
| ... | @@ -1597,6 +1597,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { | ... | @@ -1597,6 +1597,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { |
| 1597 | onOpenPullRequest={handlePrClick} | 1597 | onOpenPullRequest={handlePrClick} |
| 1598 | /> | 1598 | /> |
| 1599 | ) : null; | 1599 | ) : null; |
| 1600 | const hasPrBadge = prBadgeShape?.kind === "stack" || pr !== null || currentLinkedPr !== null; | ||
| 1600 | const prBadge = renderPrBadge(false); | 1601 | const prBadge = renderPrBadge(false); |
| 1601 | const terminalStatusIcon = terminalStatus ? ( | 1602 | const terminalStatusIcon = terminalStatus ? ( |
| 1602 | <span | 1603 | <span |
| ... | @@ -1719,6 +1720,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { | ... | @@ -1719,6 +1720,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: { |
| 1719 | </TooltipPopup> | 1720 | </TooltipPopup> |
| 1720 | </Tooltip> | 1721 | </Tooltip> |
| 1721 | ) : null} | 1722 | ) : null} |
| 1723 | {hasPrBadge ? ( | ||
| 1724 | <span className="absolute -top-1 -right-1 inline-flex"> | ||
| 1725 | {renderPrBadge(true, "badge")} | ||
| 1726 | </span> | ||
| 1727 | ) : null} | ||
| 1722 | </span> | 1728 | </span> |
| 1723 | {topStatus ? ( | 1729 | {topStatus ? ( |
| 1724 | <span | 1730 | <span |
apps/web/src/components/ThreadStatusIndicators.tsx+8-3
| ... | @@ -148,7 +148,7 @@ export function ThreadPullRequestBadgeControl({ | ... | @@ -148,7 +148,7 @@ export function ThreadPullRequestBadgeControl({ |
| 148 | onOpenStack, | 148 | onOpenStack, |
| 149 | onOpenPullRequest, | 149 | onOpenPullRequest, |
| 150 | }: { | 150 | }: { |
| 151 | variant: "underline" | "ghost"; | 151 | variant: "underline" | "ghost" | "badge"; |
| 152 | badge: ThreadPullRequestBadge | null; | 152 | badge: ThreadPullRequestBadge | null; |
| 153 | number?: number | undefined; | 153 | number?: number | undefined; |
| 154 | url?: string | undefined; | 154 | url?: string | undefined; |
| ... | @@ -171,7 +171,9 @@ export function ThreadPullRequestBadgeControl({ | ... | @@ -171,7 +171,9 @@ export function ThreadPullRequestBadgeControl({ |
| 171 | const className = cn( | 171 | const className = cn( |
| 172 | variant === "ghost" | 172 | variant === "ghost" |
| 173 | ? buttonVariants({ variant: "ghost", size: "xs" }) | 173 | ? 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", | ||
| 175 | "text-xs tabular-nums", | 177 | "text-xs tabular-nums", |
| 176 | variant === "ghost" && | 178 | variant === "ghost" && |
| 177 | "font-normal text-xs! active:scale-100 [--control-icon-color:currentColor]", | 179 | "font-normal text-xs! active:scale-100 [--control-icon-color:currentColor]", |
| ... | @@ -181,7 +183,10 @@ export function ThreadPullRequestBadgeControl({ | ... | @@ -181,7 +183,10 @@ export function ThreadPullRequestBadgeControl({ |
| 181 | ); | 183 | ); |
| 182 | const content = ( | 184 | const content = ( |
| 183 | <> | 185 | <> |
| 184 | <ThreadPullRequestBadgeIcon icon={badge?.kind ?? "pull-request"} /> | 186 | <ThreadPullRequestBadgeIcon |
| 187 | icon={badge?.kind ?? "pull-request"} | ||
| 188 | className={variant === "badge" ? "size-2.5" : undefined} | ||
| 189 | /> | ||
| 185 | {iconOnly ? null : isStack ? badge.layers : linkedCount !== null ? `+${linkedCount}` : number} | 190 | {iconOnly ? null : isStack ? badge.layers : linkedCount !== null ? `+${linkedCount}` : number} |
| 186 | </> | 191 | </> |
| 187 | ); | 192 | ); |