playlist-extension/2025-11-07-codemcp-add-move-to-top-bottom.md

Add Move to Top/Bottom Options in Video Menu

Date: 2025-11-07 Feature: Add "Move to Top" and "Move to Bottom" options to the three-dot menu for videos

User Request

In the main view of the popup menu, in the three-dot menu next to each video, add an option to "move to top", which will move that video in its playlist to the "top", which (as a reminder) is defined as "after the last video marked as 'done' continuously from the beginning of the playlist". Also add an option to "move to bottom", which will move the video to the end of its playlist. Obviously, disable these options if the video in question is already at the top or the bottom respectively.

Implementation

Changes Made

1. popup/popup.js - Added three new methods:

   • moveVideoToTop(playlistName, index): Moves a video to the top position (after the last continuously done videos)
   • moveVideoToBottom(playlistName, index): Moves a video to the bottom of the playlist
   • findTopPosition(playlistName): Helper method that finds the "top" position by finding the first non-done video

2. popup/popup.js - Added two new button bindings:

   • moveToTopButton: Binding with click handler and disabled state (disabled when video is already at top)
   • moveToBottomButton: Binding with click handler and disabled state (disabled when video is already at bottom)

3. popup/popup.html - Added buttons to both views:

   • Main playlists view: Added "Move to Top" and "Move to Bottom" buttons in the more-menu
   • Individual playlist view: Added the same buttons in the more-menu

Key Implementation Details

• The "top" position is determined by finding the first video that doesn't have status === "done"
• If all videos are marked as done, the top position is at the end of the playlist
• Both operations use splice to remove the video from its current position and insert it at the new position
• The buttons are disabled when:
  • "Move to Top" is disabled when the video is already at the top position
  • "Move to Bottom" is disabled when the video is already at the last position
• Both operations close the menu after execution (via closeAllMenus())
• Alpine.js CSP compliance is maintained - no JavaScript expressions in HTML attributes

Testing Notes

To test this feature:

1. Create a playlist with multiple videos
2. Mark some videos as "done" from the beginning
3. Open the three-dot menu for a video that's not at the top
4. Click "Move to Top" - it should move after the last done video
5. Open the menu for a video in the middle
6. Click "Move to Bottom" - it should move to the end
7. Verify that the buttons are disabled appropriately when videos are already at top/bottom

Files Modified

• /Users/yellowdig/personal/projects/playlist/popup/popup.js
• /Users/yellowdig/personal/projects/playlist/popup/popup.html