shadcn.io is not affiliated with official shadcn/ui
Playlist Manager Music Block for Svelte
A playlist editor with select-all, ticked rows, Move to top, Move to end, Remove with Undo, a sort menu, Move up and Move down buttons, Alt with arrow keys, and a side cell of suggested tracks to add.
Installation
Overview
Let people shape a playlist, with this playlist manager for Svelte with Ark UI. It shows Trackwright, a playlist editor, as a header over a hairline frame with a plus mark on each corner, in a main cell and a side cell. The main cell holds the playlist Studio hours: a select-all box that is a real three-state checkbox, the count of ticked tracks, Move to top, Move to end and Remove Buttons, and a Native Select to sort by Custom order, Title, Artist or Longest first. Twelve rows follow, each with a tick, its number, a drawn cover, title, artist, length and Move up and Move down buttons; with a tick box focused, Alt with the up or down arrow moves that track and keeps focus on it. The side cell offers five suggested tracks with an Add button each. The total ("12 tracks, 49 min") is worked out after every change, Remove leaves an Undo in the status line, and an emptied list shows an Empty state at the list's height. It is built from native checkboxes, Button, Native Select, Empty and Guides, with a CSS entrance only. For music apps, queues and any list people edit in bulk.
FAQ
How do I load my own playlist?
Edit START for the playlist's track ids, SUGGESTED for the tracks offered in the side cell and LINES for the track data (id, title, artist, genre, tempo, energy, mood, length and a cover pattern). The numbers, the total and the sort orders are all worked out from the current list. In your app replace the local state with your playlist's API and call it in settle, remove and add.
How do sort and custom order work together?
Custom order is the order you made by moving tracks. Choosing Title, Artist or Longest first sorts a copy of it for display without losing it: choosing Custom order again brings your order back. Moving a track, or using Move to top or Move to end, while a sort is on makes the shown order your custom order and the menu goes back to Custom order.
How do Remove and Undo work?
Before Remove takes the ticked tracks out, the block keeps the list, the custom order and the sort. Undo puts all three back and says how many tracks were restored. After Remove, focus moves to Undo so the next key press can take it back; the Undo button keeps its place in the status line, hidden when there is nothing to undo, so the line never changes height.
How do I reorder from the keyboard?
Two ways. Tab to a row's Move up or Move down button (named for the track) and press it; focus stays on the same button as the row moves. Or Tab to a row's tick box and press Alt with the up or down arrow, and focus stays on that tick box. The status line says where each track landed, for example "Moved Understory to position 2 of 12." At the ends a track says it is already first or last. There is no drag, on purpose: the queue manager owns it.