# 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)

## Follow-up Request (2026-06-10)

> copy the "move" button to the triple-dot menu on the main screen, not just the playlist view screen

Added the same "Move to…" button and submenu to the ⋯ more menu in the main playlists view. Each `playlistData` object in `playlistsForDisplay` now carries its own `otherPlaylists` array (computed in `updatePlaylistsForDisplay()`), so the `x-for="pl in playlistData.otherPlaylists"` loop in the main view template has the correct per-playlist options without needing any inline expressions.

**Additional files changed:** `popup/popup.js` (`updatePlaylistsForDisplay`), `popup/popup.html` (main playlists view more menu)

### 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