shadcn.io is not affiliated with official shadcn/ui
Playlist Folder Music Block for Solid
A tree of nested playlist folders, each row with the tracks it holds including subfolders, and a detail cell with rename, a roll-up of playlists, tracks and hours, a Move to folder select per playlist and a delete that works only on empty folders.
Installation
Overview
Let people organise a library into nested folders, with this playlist folder tree for Solid with Ark UI. It shows Cratelane, a library organiser, as a header over a hairline frame with a plus mark on each corner, in a list cell and a detail cell. The start cell is the Tree View of six folders, two of them nested, with the track total of everything inside each folder on its row; a screen reader also hears the full roll-up. The detail cell shows the chosen folder: its name with a Rename button (Enter saves, Escape cancels), the roll-up worked out from the rows ("4 playlists, 19 tracks, 1 h 14 min"), and every playlist inside it with a Move to folder Native Select that stands in for dragging. New folder, the only Shine Button, adds "Untitled folder" inside the chosen one with its name ready to type. Delete folder works only on an empty folder and says why otherwise; Undo brings it back. An Empty state fills a folder with no playlists. It's built from Tree View, Native Select, Empty, Shine Button and Guides, with a CSS entrance only. For music, photo and document libraries.
FAQ
How do I load my own folders and playlists?
Edit FOLDERS (an id, a name and the id of the folder it sits in, empty at the top), PLAYLISTS (an id, a name and track ids), HOMES (which folder each playlist is in) and LINES for the track data. The track counts, the minutes and the hours are worked out from the playlists inside each folder and its subfolders, so nothing is typed twice. In your app keep the folders and homes in your API and call it in make, saveRename, move and remove.
How deep can folders go?
Three levels. New folder adds a folder inside the chosen one; if the chosen folder is already on the third level it adds one beside it instead. The tree is drawn by three small components, one for each level, so a fourth level needs a fourth component.
How do I move a playlist without dragging?
Each playlist row has a select named "Move" plus the playlist's name and "to folder", listing every folder by its path ("Summer / Road trips"). Choosing one moves the playlist at once and the status line says where it went. A playlist whose new folder is outside the folder you are looking at leaves the list, and focus goes to the folder's name so the next key press has somewhere to start.
Why can I not delete some folders?
Only a folder with no playlists and no subfolders can be deleted. Otherwise the button stays in place with a line saying to move its playlists first, and pressing it says the same in the status line. The Unsorted folder starts with one playlist: move it out and the folder can be deleted. Undo puts a deleted folder back.
How does renaming work?
Rename (or New folder) swaps the name for a text field in the same space, selected, so the cell does not change size. Enter saves, Escape or Cancel leaves the name as it was, and an empty or duplicate name is refused with a line under the field. Focus returns to the Rename button afterwards.
How do I use the tree from the keyboard?
Tab enters the tree, the arrow keys move between folders, the right and left arrows open and close a folder with subfolders, and Enter or Space chooses one. The choice fills the detail cell and the status line reads out its roll-up. Nothing is saved: the folders live in the page and reset on a reload.