feat(composer): clickable PR pill next to branch selector#3065
feat(composer): clickable PR pill next to branch selector#3065TheIcarusWings wants to merge 2 commits into
Conversation
Render a small PR pill (icon + #number) to the left of the branch
selector in the bottom composer bar when the active branch has a pull
request. The pill is colored by PR state (open=emerald, merged=violet,
closed=zinc) via the shared prStatusIndicator, and clicking it opens the
PR in the system browser without opening the branch dropdown.
The tooltip is action-oriented ("Open pull request #N (state) in
browser") and uses the provider's terminology, distinct from the
sidebar's state-description tooltip.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Approved Minor UI feature adding a clickable PR pill next to the branch selector. The changes extract existing PR link logic into a shared hook and reuse existing components for the pill display. Low risk, self-contained UI enhancement with no backend or schema impact. You can customize Macroscope's approvability policy. Learn more. |
| const branchPr = resolveThreadPr(resolvedActiveBranch, branchStatusQuery.data ?? null); | ||
| const branchPrStatus = prStatusIndicator( | ||
| branchPr, | ||
| branchStatusQuery.data?.sourceControlProvider, | ||
| ); | ||
| // Action-oriented tooltip (the pill opens the PR), distinct from the sidebar's | ||
| // state-description tooltip. | ||
| const branchPrTooltip = branchPr | ||
| ? `Open ${sourceControlPresentation.terminology.singular} #${branchPr.number} (${branchPr.state}) in browser` | ||
| : ""; | ||
| const openPrLink = useCallback((event: MouseEvent<HTMLElement>, prUrl: string) => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
|
|
||
| const api = readLocalApi(); | ||
| if (!api) { | ||
| toastManager.add({ | ||
| type: "error", | ||
| title: "Link opening is unavailable.", | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| void api.shell.openExternal(prUrl).catch((error) => { | ||
| toastManager.add( | ||
| stackedThreadToast({ | ||
| type: "error", | ||
| title: "Unable to open pull request link", | ||
| description: error instanceof Error ? error.message : "An error occurred.", | ||
| }), | ||
| ); | ||
| }); |
There was a problem hiding this comment.
this is all duplicated from sidebar? should be extracted to some shared hook/module
There was a problem hiding this comment.
Good catch. Extracted into a shared useOpenPrLink hook (apps/web/src/lib/openPullRequestLink.ts) and updated both the sidebar and the composer branch selector to use it. Pushed in 91f6d6a.
macroscopeapp
Bot
dismissed
their stale review
Dismissing prior approval to re-evaluate 91f6d6a
github-actions
Bot
added
size:L
TheIcarusWings
force-pushed
the
composer-bar-pr-pill
branch
from
91f6d6a to
81cf5c8
Compare
Address review feedback: the openPrLink handler was duplicated verbatim between Sidebar and the composer branch selector. Extract it into a shared lib/openPullRequestLink hook and use it from both call sites.
TheIcarusWings
force-pushed
the
composer-bar-pr-pill
branch
from
81cf5c8 to
7c713b9
Compare
2 participants
What
Adds a small clickable PR pill next to the branch selector in the bottom composer bar. When the active branch has a pull request, the pill shows the PR icon +
#<number>, colored by state:Clicking the pill opens the PR in the system browser. It sits to the left of the branch selector and does not open the branch dropdown (click is stopped/prevented).
Details
prStatusIndicator/ChangeRequestStatusIcon/resolveThreadPrfromThreadStatusIndicators.tsx, and thereadLocalApi()?.shell.openExternalpattern for opening links.useVcsStatus({ environmentId, cwd: branchCwd })query already inBranchToolbarBranchSelector.tsx— no backend changes.ComboboxTriggerinside a flex row; the toolbar layout classes were moved onto that wrapper so the branch group stays right-aligned.TheIcarusWings, basepingdotgg/t3code) via the existingGitManager.findLatestPrdetection.Test
Switch the bottom-bar branch to one with an open PR and confirm the pill appears with the right color and opens the correct GitHub URL.
Note
Low Risk
UI-only change with a small shared hook refactor; no backend, auth, or data-model changes.
Overview
Adds a clickable PR pill to the left of the composer branch selector when the active branch has an associated pull request. It reuses
resolveThreadPr,prStatusIndicator, andChangeRequestStatusIconfrom existing thread status UI, colors by PR state, and uses an action-oriented tooltip. Clicks open the PR in the system browser without opening the branch dropdown.Introduces shared
useOpenPrLink(openPullRequestLink.ts) to centralizepreventDefault/stopPropagation,shell.openExternal, and error toasts. Sidebar drops its inlined handler in favor of this hook.Reviewed by Cursor Bugbot for commit 7c713b9. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add clickable PR status pill next to branch selector in composer toolbar
useOpenPrLinkhook in openPullRequestLink.ts that handles click propagation, shows an error toast if the local API is unavailable, and surfaces a failure toast if the URL can't be opened.useOpenPrLinkhook instead of an inline callback.Macroscope summarized 7c713b9.