shadcn.io is not affiliated with official shadcn/ui
Helpdesk Triage Sidebar Block for React Aria
A ticket triage tool in a fixed-height window whose wide sidebar is the queue: J and K move through tickets, E resolves one, rows are struck with a check, and Undo restores the last.
Installation
Overview
Work a support queue with the keyboard using this helpdesk triage sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds a wide Sidebar for Triagewell, a ticket triage tool, listing eight tickets as two-line rows: the title, then the number, a priority word and how long it has waited. The page shows the open ticket's thread. While focus is inside the window, J and K move the selection down and up, and E marks the open ticket resolved: its row is struck through with a check, the open count falls, the next open ticket is chosen and an Undo appears in the status line. Key hints are drawn with Kbd. A Resolve Button in the top bar does the same without a keyboard. It's built from Sidebar, Kbd, Button, Avatar and Guides, with a CSS entrance only. For triage queues, review lists and any rail you work through.
FAQ
Which keys work, and where?
J moves to the next ticket, K to the previous one and E resolves the open ticket. They work only while focus is inside the window, so the page around it keeps its own keys, and they are ignored while you type in a field or hold Ctrl, Command or Alt. J and K also move focus to the chosen row. Nothing is bound on the whole page.
What happens when I resolve a ticket?
Its row is struck through, its priority icon becomes a check and its second line reads Resolved, so it is marked by shape and words, not color. The open count in the Queue label falls, the next open ticket is chosen, and the status line says so with an Undo button. Resolving a ticket that is already resolved answers in words and changes nothing.
What does Undo restore?
The ticket you resolved last. It becomes open again, is chosen and takes focus in the rail, and the count rises. Undo keeps its place in the status line while it is unavailable, so the line never shifts.
What stays in the page, and how do I connect it?
Everything. The eight tickets and their threads are typed at the top of the file, the waits are typed phrases, and resolving only changes the block's state. In your app, call your ticket API in the resolve handler and refresh the queue from the result. The rows are links to # whose handler shows the ticket instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. Point them at your routes and mark the current one with isActive.
What happens when the sidebar collapses?
The rail folds to its icons: one priority icon per ticket, a check for resolved ones, with a tooltip showing the number and title. The key hints are hidden then. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. There is no keyboard to rely on, so the key hints are hidden and the Resolve button in the top bar does the job. The window keeps its height, and the status line at its foot says what changed.