playlist-extension/2026-06-18-claude-add-scatter-button.md

Session Report: Add Scatter Button to Individual Playlist View

Request

in the individual playlist view of the popup window, I'd like to add a button (or control) next to the "add cur. page" button. what this new button will do is accept (through a numeric input) a number x, take the last x videos of the current playlist, and shuffle them "up", so that they're not all collected at the bottom of the playlist, but that they still have the same relative ordering.

to explain with an example: suppose I have videos in a playlist, numbered 1 to 100, and I want to shuffle the last four of them. the last one will always stay at the end, but the previous three will be moved so that they are interleaved with the videos previous to them. the second-to-last will be moved a (small, meaning one or two) random number of videos up, the third-to-last will be moved a (small) random number of videos before that one, and the fourth-to-last will be moved before that one.

so the original order of the last videos was: 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100. now, after the shuffle, it's: 90, 91, 97, 92, 93, 98, 94, 99, 95, 96, 100 notice how 97, 98, 99, and 100 (the four that were selected) are still in the same order relative to each other, but they are no longer adjacent to each other.

Follow-up adjustment:

the videos should never take over position "0" of the playlist. also, ensure the numeric input of the control cannot go below 2 or above the total length of the playlist.

Changes Made

Feature name: Scatter

A number input + "Scatter" button were added to the existing .add-current-page-container flex div in the playlist view, sitting alongside the "Add Cur. Page" button.

Algorithm

Takes the last count videos from the playlist, anchors the final one at the end, and works backwards through the rest — each one is inserted at a cursor that decrements by a random gap of 1–3. The cursor is clamped to a minimum of 1 so no scattered video ever occupies index 0. Insertions are applied right-to-left (descending cursor order) so earlier splices don't shift later insertion indices.

Files modified

• popup/popup.js

  • Added scatterCount: 4 to the Alpine data object
  • Added scatterLastN(playlistName, count) method (after findTopPosition)
  • Added scatterCountInput binding (:value, :max dynamic from playlist length, @input clamped to [2, playlist.length-1])
  • Added scatterButton binding (@click, :disabled when count ≥ playlist length)

• popup/popup.html

  • Added <input class="scatter-count-input" type="number" min="2" x-bind="scatterCountInput" /> and <button class="scatter-btn" x-bind="scatterButton">Scatter</button> inside .add-current-page-container

• popup/popup.css

  • Added .scatter-count-input (48px wide, centered number input)
  • Added .scatter-btn with hover and disabled states matching the existing button style