shadcn.io is not affiliated with official shadcn/ui
Podcast Platform Sidebar Block for Solid
A podcast app in a fixed-height window: four shows that filter an episode list, and an Up next queue in the rail that fills from Play next and Add to queue with a derived total and Remove.
Installation
Overview
Put a listening queue in the navigation with this podcast platform sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar on a slim rail: four shows that filter the page and, under them, an Up next group. The page is the episode list, and each row has Play next, which puts the episode first in the queue, and Add to queue, which puts it last; once an episode is queued its row says "In the queue, number 2" in the same space. The rail shows the queue as rows with the episode and its show, a line that totals it ("2 episodes, 1 h 9 m"), and a Remove button on each row; pressing a queued row moves it to the top. An empty queue says "Nothing queued", and the top bar's Clear queue empties it. It is built from Sidebar, Button, Avatar and Guides, with a CSS entrance only. Folded to icons the rail keeps the show and queue icons with tooltips; below the medium breakpoint it is a sheet. For podcast, audiobook and video apps and any list that feeds a queue.
FAQ
How does the queue work?
It is a list of episode ids in the block's own state. Play next puts an id first, Add to queue puts it last, and either one removes it from wherever it already was, so an episode is never in the queue twice. Pressing a queued row in the rail moves it first, Remove takes it out and Clear queue empties the list. The place shown on each episode row is its index plus one, so it follows every change.
Where does the total come from?
It is worked out from the queue's episodes and their typed minutes, formatted as hours and minutes by one small function, and never typed twice. The same line appears in the rail, above the episode list and in the status line, so on a phone, where the rail is behind a button, the page still shows it.
What do the shows do?
Each show is a link that filters the episode list, with "All episodes" as the first. The queue is not filtered: it holds episodes from any show, and the list's top line counts the episodes shown and repeats the queue's total.
What stays in the page, and how do I connect it?
Everything: the eight episodes are typed in EPISODES, the queue is the block's own state and nothing plays or syncs. Replace the queue handlers with calls to your player's queue. The shows are links to # whose handler filters the list instead of navigating. 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 it sits on.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button opens from the start edge, the right in a right-to-left layout; the queue and its Remove buttons work inside it. The page always shows the episode list with each row's place in the queue, plus the total, and the status line says what changed, so the first screen shows the result.
Is it accessible?
The sidebar is a navigation landmark named after the product, with the shows and the queue as two named lists, and the chosen show marked as the current page. Each episode's buttons carry the episode's title in their names, so "Play next" is never ambiguous, and each Remove button names its episode. One polite status line reports every change, and the titles, counts and times are isolated so they read right in a right-to-left layout.