shadcn.io is not affiliated with official shadcn/ui
Email Triage Kanban Block for Vue
A three-column inbox (Unread, Flagged, Archived) of ten one-line messages sorted with single keys: F flags, E archives, U marks unread, Z undoes the last move.
Installation
Overview
Sort a morning's mail with this triage board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Unread, Flagged and Archived, and ten compact rows, each one line: the sender's initials in an Avatar, the subject and a fixed time. With focus on a row's grip, single keys do the sorting: F flags, E archives, U marks unread and Z undoes the last move, and a legend of the four Kbd keys sits above the board. The keys listen on the block's root, so they work only while focus is inside it. The same moves are in each row's Dropdown Menu for a pointer or a finger, rows also drag by the grip or move with Space, the arrow keys and Space again (Escape cancels), and Undo is a button in the foot as well. A polite status line reports each move, and Reset restores the inbox. Nothing is sent or deleted. On a phone the columns scroll sideways in one named region and the time gives way to the subject. For mail clients, support queues and any inbox cleared by hand.
FAQ
How do I fill it with my own messages?
Edit COLUMNS and START. A message has an id, the column it starts in, a sender, a title (the subject) and the at text shown as the time. The time is a fixed string, so the server and the browser agree; format yours from the message's date with Intl.DateTimeFormat after mount if you need it local.
Which keys work, and when?
F flags, E archives, U marks unread and Z undoes the last move, on the row that has focus: Tab to a row's grip first. The listener is on the block's root and ignores the menu, so typing in a menu does not move rows, and it never listens on the window. Change the letters in KEYMAP. Single-letter shortcuts are active only while focus is inside the board, which keeps them from catching text typed elsewhere on your page.
How far back does Undo go?
One move: it puts the board back as it was before the last move by any route (a key, a drag or the menu) and says so, then has nothing left to undo until the next move. For a longer history keep a stack of snapshots in before instead of one.
Is there a way to move rows without keys or dragging?
Yes: the menu at the end of each row lists the three columns with the current one ticked, which is the route for a single pointer and for touch. Choosing one moves the row, puts focus on it in its new place and says so in the status line.
What stays in the demo?
Everything: nothing is sent, deleted or marked on a server, the moves live in the component's state and a reload or Reset restores the starting inbox. The senders and subjects are made up. To work on real mail, call your API from put, the one function every finished move goes through.
How does it look on a phone?
Rows stay on one line, the columns scroll sideways with the next column showing, and the time is dropped to give the subject room. The keys are for a keyboard, so on a phone use the menu or drag the grip; touch drags from the grip only, so the rest of a row still scrolls the board.