shadcn.io is not affiliated with official shadcn/ui
Code Review Desk Kanban Block for Vue
A three-column desk of nine pull requests with reviewer initials that toggle approvals, where a request can merge only with two approvals and merged requests stay locked.
Installation
Overview
Keep reviews moving from one screen with this code review desk for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines (Open, Reviewing and Merged) and nine pull requests. Each card shows its title, its author, the files changed and the lines added and removed, an approvals count in a Badge, and the initials of its three reviewers. Each set of initials is a toggle button: press it to record that reviewer's approval, press it again to withdraw it. The gate is two approvals: a request can enter Merged only when two reviewers have approved, and the refusal says how many it has. Merged requests are locked, so their approvals can't change and they can't be moved out, and the refusal says to open a revert instead. The sentence under the heading and each column head count what is ready to merge. A card also moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each change, and Reset puts the desk back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For engineering teams, open source maintainers and any app that gates work on sign-off.
FAQ
How do I fill it with my own pull requests?
Edit COLUMNS and START. A request has an id, the column it starts in, a title, an author, files, insertions and deletions, the three reviewers who can approve, and the approvals already given, all names. The initials, the counts and every sentence are drawn from them. Change QUORUM to ask for a different number of approvals.
How does the two-approval gate work?
The rule is the function refusalOf, which gets the requests, the request, the column it comes from and the column it is going to, and returns a reason or an empty string. It refuses Merged while the request has fewer than QUORUM approvals, and refuses any move out of Merged. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it.
How do the reviewer buttons work for a screen reader?
Each is a native toggle button named "Approve as" and the reviewer's full name, with its pressed state set when that person has approved. The initials are decoration. The status line says who approved or withdrew and how many approvals the request now has.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "Cache the permissions lookup, Reviewing, position 2 of 3".
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. It goes through the same two-approval gate as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through (the menu, a drop and the block's own buttons) and the reviewer toggles, and update the cards from the response. The product, the requests and the people are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.