playlist-extension/2026-06-08-claude-move-video-between-playlists.md

Move Video Between Playlists

Date: 2026-06-08

User Request

I would like the option of moving a video in one playlist to a different playlist (while maintaining the guarantee that a video will be in at most one playlist). what would you recommend to support this action in the UI?

What Was Done

Added a "Move to…" entry to the ⋯ more menu in the playlist detail view (single-playlist view). Clicking it expands an inline sub-list of the other five playlists; selecting one atomically removes the video from the current playlist and appends it to the target.

Files Changed

popup/popup.js

• Added moveSubmenuOpenFor: null state (tracks which video's move submenu is open by menuId key)
• Added otherPlaylists: [] state (array of {name, display} objects for the other playlists)
• Updated updateCurrentPlaylistVideos() to recompute otherPlaylists using formatPlaylistName() for display labels
• Added async moveVideoToPlaylist(fromPlaylistName, videoIndex, toPlaylistName) — splices video from source array, appends to target, single storage.set call (preserves video object including status)
• Updated closeAllMenus() and toggleMenu() to reset moveSubmenuOpenFor
• Added three new binding objects: moveToSubmenuButton (toggle), moveToSubmenu (x-show), moveToPlaylistButton (execute move)

popup/popup.html

• Added "Move to…" button and collapsible sub-list inside the playlist detail view's ⋯ more menu, after the Remove button
• Sub-list uses x-for="pl in otherPlaylists" with x-text="pl.display" and data-to-playlist-name="pl.name"

popup/popup.css

• Added styles for .move-to-playlist-item, .move-to-submenu (separator border), and .move-to-playlist-option (indented, blue text with hover)

Design Notes

• The one-playlist-per-video invariant is maintained because moveVideoToPlaylist splices from the source before appending to the target in a single atomic storage write — no window where the video exists in two playlists
• Video status (done, timestamp) is preserved on move
• All Alpine.js bindings are CSP-compliant (property accesses only, no inline expressions)
• otherPlaylists is pre-computed with formatted display names so x-text="pl.display" needs no method call in the template