shadcn.io is not affiliated with official shadcn/ui
Priority Levels Comments Block for Svelte
Seven comments each carry a Low, Normal, High or Urgent level on a button you change from a picker, with level chips that filter and a Sort by priority toggle that orders only when pressed.
Installation
Overview
Triage a pile of comments by how much they matter, with this priority levels comment block for Svelte with Ark UI. A compact header names the board and the frame holds a toolbar and a list. Each comment shows its author, age and words, and a button that reads Priority: High with a signal glyph, so the level is a shape and a word and never a colour. The button opens a small Popover of Urgent, High, Normal and Low. Level chips with counts (All, Urgent, High, Normal, Low) filter the list, and a Sort by priority Toggle puts Urgent first with ties kept in the order they were written. The order changes only when you press the toggle, or when you change a level while it is on, and the status line says where the comment moved. The list sits in a held scroll region so filtering never changes the height of the page. It is built from Popover, Toggle, Button, Avatar and Guides, with CSS only. For issue triage, support queues and review backlogs.
FAQ
How do I use my own comments and levels?
Edit COMMENTS and LEVELS. A comment has an id, an ISO at, its by, body and starting level; a level has an id, a label and a rank where the lowest rank sorts first. Counts, the filter and the sorted order are worked out from those, and LevelGlyph draws the shape for each level.
Why doesn't the list reorder when I change a level?
A list that moves under your cursor is hard to use, so the order only changes when you press Sort by priority. If the toggle is already on, changing a level re-sorts straight away and the status line tells you the new position; focus stays on the button you pressed.
What happens when a filter matches nothing?
The region keeps its height and shows a short sentence, so the page below does not jump. Counts on the chips always show the full list, not the filtered one.
What stays local?
Levels, the filter and the order live in the page and the status line says what changed. To make it real, save each level from the pick handler, return the stored order from the server if sorting is shared between people, and decide who is allowed to set Urgent.
Is it accessible?
Each priority button names the level, the comment and what it does, and opens a labelled radio group, so arrow keys and Escape work and focus returns to the button. The filter is a radio group of chips, the Sort toggle reports whether it is pressed, and moves are announced in the polite status line.