shadcn.io is not affiliated with official shadcn/ui
Recently Played Music Block for Svelte
A week of listening by day and part of the day: a strip of eight day chips with play counts, plays grouped into morning, afternoon, evening and night, a repeat count that opens the times, an add-to-queue button and a row menu to remove a play with undo.
Installation
Overview
Let people find what they played and when, with this listening history for Svelte with Ark UI. It shows Hindsong, a listening-history app, with a strip of eight chips in a Toggle Group: All, then Tuesday to Monday, each with its count of plays. Pressing one filters the history to that day. Plays are grouped under Morning, Afternoon, Evening and Night, worked out from each time, in a list of fixed height that scrolls inside the panel. A row has a drawn cover, the title, the artist and when, a repeat count such as ×3 that opens a Collapsible with every time it was played, an Add to queue button that counts in a Badge in the header, and a Dropdown Menu with Remove from history, which leaves a Removed row with an Undo in the same place. Saturday has no plays and shows an Empty state at the same height. It's built from Toggle Group, Collapsible, Dropdown Menu, Empty, Badge, Button and Guides, with a CSS entrance only. For music and podcast apps.
FAQ
How do I use my own history?
Edit ENTRIES, newest first. Each is one track on one day with an ISO day, the times it was played that day (all in the same part of the day) and a drawn art. The part of the day comes from the first time: 05:00 to 11:59 is Morning, 12:00 to 16:59 Afternoon, 17:00 to 21:59 Evening and the rest Night. The chips, their counts and the totals are worked out from the list, never typed twice. Weekdays come from the ISO date with Date.UTC, so they read the same everywhere.
What does the repeat count do?
A track played more than once on a day is one row with ×2 or ×3. Pressing the count opens the times it was played ("Played at 08:05, 08:09, 08:13") under the row, and pressing it again closes them. A track played once has no count and shows its time under the title.
What happens when I remove a play?
The row stays where it was as a Removed row with an Undo button, so nothing shifts under the pointer, focus moves to Undo, and the chip counts and the totals drop. Undo puts the row back and returns focus to its menu. The change lives in the page only; to make it real, delete the play on the server and keep Undo for a few seconds.
What does Add to queue do?
It raises the Queue count in the header by one and says "Queued in this demo" in the status line. Nothing plays and no queue is kept. In your app, call your player's add-to-queue method with the track.