feat(extension): rework merge-box queue row to match GitHub native styling#475
Merged
mergify[bot] merged 1 commit intoMay 26, 2026
Conversation
Member
Author
|
This pull request is part of a Mergify stack:
|
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🟢 Required ReviewsWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 🔎 ReviewsWonderful, this rule succeeded.
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
Reworks the merge-box “Mergify” queue row UI to better match GitHub’s native merge panel styling and layout by adopting Primer utility classes/tokens and restructuring the row into left-aligned actions with right-aligned navigation/branding.
Changes:
- Updates queue button copy to clearer, GitHub-like phrasing (“Add/Remove from merge queue”, expanded pending labels).
- Refactors
buildMergifyRow()layout: action buttons grouped on the left; queue/logs links and Mergify brand link grouped on the right with icons. - Uses Primer utility classes and the
--base-size-16padding token to blend with GitHub’s merge box styling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…yling
Reuse Primer utility classes (bgColor-muted, borderColor-muted, border-top,
rounded-bottom-2) and the --base-size-16 padding token, so the Mergify row
sits flush against GH's own "Merge pull request" section in the merge box
instead of inheriting the darker page bg with an ad-hoc border-top.
Restructure the row so it reads like a GH action panel:
[Add to merge queue] [Refresh] [Rebase] [Update] ☰ queue 🕓 logs [● Mergify]
- All action buttons grouped on the left (matches GH's "Squash and merge"
+ chevron block).
- Right cluster holds the navigation: queue/logs links with Octicon
prefixes (list-unordered for queue, clock for logs) so they read as
first-class nav rather than metadata, and the logo+Mergify text fused
into one anchor linking to dashboard.mergify.com.
- Primary/dequeue labels expanded ("Add to merge queue" / "Remove from
merge queue") so the primary button has the same visual weight as
GitHub's merge button and clearly states what it does.
- 24px effective left padding so the primary button doesn't crowd the
card edge.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Change-Id: I41e4c5e0a527bea4915e4bff37b04402a58f8fe6
jd
force-pushed
the
devs/jd/worktree-background/rework-merge-box-queue-row-match-github-native--41e4c5e0
branch
from
19fe4d1 to
6f316fa
Compare
Member
Author
Revision history
|
remyduthu
approved these changes
May 21, 2026
sileht
approved these changes
May 26, 2026
Contributor
Merge Queue Status
This pull request spent 2 minutes 23 seconds in the queue, including 1 minute 52 seconds running CI. Required conditions to merge
|
34 tasks
mergify
Bot
deleted the
devs/jd/worktree-background/rework-merge-box-queue-row-match-github-native--41e4c5e0
branch
36 tasks
mergify Bot
pushed a commit
that referenced
this pull request
May 27, 2026
…rives (#476) Previously the row was the very last thing to appear in the merge box on cold loads — the user would see GitHub's "Squash and merge" panel for seconds before the Mergify "Add to merge queue" button materialised. The reason is that `_tryInject` awaited four network roundtrips in sequence before building the row: 1. `/search?q=…mergify.yml` (is Mergify enabled on this repo?) 2. fetchCommentBodies (stack/revision context) 3. `/{org}/{repo}/pull/{n}/checks` (find the queue check-run ID) 4. `/{org}/{repo}/runs/{check_run_id}` (resolve "queued" vs "evaluating") Reorder so the row appears as soon as the merge box exists: - The is-Mergify-enabled check now tries the synchronous detection path first (Mergify app-icon in the DOM or a cached repo result). The `/search` fetch is only paid on the rare cold load where Mergify has not yet commented on the page. - The initial row is built with state derived synchronously from the DOM (`deriveQueueButtonState` reads open/merged/closed, the expanded Checks section if present, and the last `@mergifyio` command — all sync), then injected immediately into the merge box. - `renderMergifyContext` and `fetchQueueStateIfNeeded` now run in parallel as background fire-and-forgets. When the queue-state fetch resolves, a `then()` callback runs `updateMergifyRow`, which swaps the button in place if its `data-mergify-queue-btn` attribute changed — no full row rebuild. - The merge-box DOM-walking is extracted into `injectRowIntoMergeBox()` to keep the new early-injection path readable. Trade-off: on a PR that *is* queued, when the Checks section has not been expanded, the button briefly shows "Add to merge queue" before flipping to "Remove from merge queue" once the network state arrives. This is a single-button swap, not a row reflow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Depends-On: #475
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reuse Primer utility classes (bgColor-muted, borderColor-muted, border-top,
rounded-bottom-2) and the --base-size-16 padding token, so the Mergify row
sits flush against GH's own "Merge pull request" section in the merge box
instead of inheriting the darker page bg with an ad-hoc border-top.
Restructure the row so it reads like a GH action panel:
[Add to merge queue] [Refresh] [Rebase] [Update] ☰ queue 🕓 logs [● Mergify]
prefixes (list-unordered for queue, clock for logs) so they read as
first-class nav rather than metadata, and the logo+Mergify text fused
into one anchor linking to dashboard.mergify.com.
merge queue") so the primary button has the same visual weight as
GitHub's merge button and clearly states what it does.
card edge.
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com