From 6c94913cb2f8988e487c4b71b38b9b79587ed02e Mon Sep 17 00:00:00 2001
From: sir-wilhelm <sir-wilhelm@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:34:50 +0000
Subject: [PATCH] Added buttons to add items to the top or bottom of a
 playlist.

---
 .../components/modals/playlists/AddCreateModal.vue |  6 +++---
 .../modals/playlists/UserPlaylistItem.vue          | 14 ++++++++++----
 server/controllers/PlaylistController.js           |  3 ++-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/components/modals/playlists/AddCreateModal.vue b/client/components/modals/playlists/AddCreateModal.vue
index f8543f1de..2041ee399 100644
--- a/client/components/modals/playlists/AddCreateModal.vue
+++ b/client/components/modals/playlists/AddCreateModal.vue
@@ -15,7 +15,7 @@
         <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
           <transition-group name="list-complete" tag="div">
             <template v-for="playlist in sortedPlaylists">
-              <modals-playlists-user-playlist-item :key="playlist.id" :playlist="playlist" class="list-complete-item" @add="addToPlaylist" @remove="removeFromPlaylist" @close="show = false" />
+              <modals-playlists-user-playlist-item :key="playlist.id" :playlist="playlist" class="list-complete-item" @add-top="addToPlaylist" @add-bottom="addToPlaylist" @remove="removeFromPlaylist" @close="show = false" />
             </template>
           </transition-group>
         </div>
@@ -151,13 +151,13 @@ export default {
           this.processing = false
         })
     },
-    addToPlaylist(playlist) {
+    addToPlaylist(playlist, addToTop) {
       if (!this.selectedPlaylistItems.length) return
       this.processing = true
 
       const itemObjects = this.selectedPlaylistItems.map((pi) => ({ libraryItemId: pi.libraryItem.id, episodeId: pi.episode ? pi.episode.id : null }))
       this.$axios
-        .$post(`/api/playlists/${playlist.id}/batch/add`, { items: itemObjects })
+        .$post(`/api/playlists/${playlist.id}/batch/add`, { items: itemObjects, addToTop: addToTop })
         .then((updatedPlaylist) => {
           console.log(`Items added to playlist`, updatedPlaylist)
           this.processing = false
diff --git a/client/components/modals/playlists/UserPlaylistItem.vue b/client/components/modals/playlists/UserPlaylistItem.vue
index 99d79385e..058bbcaa4 100644
--- a/client/components/modals/playlists/UserPlaylistItem.vue
+++ b/client/components/modals/playlists/UserPlaylistItem.vue
@@ -7,8 +7,11 @@
     <div class="grow overflow-hidden px-2">
       <nuxt-link :to="`/playlist/${playlist.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ playlist.name }}</nuxt-link>
     </div>
-    <div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
-      <ui-btn v-if="!isItemIncluded" color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-symbols text-2xl pt-px">add</span></ui-btn>
+    <div class="h-full flex flex-col items-end justify-center transform space-y-2" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
+      <template v-if="!isItemIncluded">
+        <ui-btn color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAddTop"><span class="material-symbols text-2xl pt-px">vertical_align_top</span></ui-btn>
+        <ui-btn color="bg-success" :padding-x="3" small class="h-9" @click.stop="clickAddBottom"><span class="material-symbols text-2xl pt-px">vertical_align_bottom</span></ui-btn>
+      </template>
       <ui-btn v-else color="bg-error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-symbols text-2xl pt-px">remove</span></ui-btn>
     </div>
   </div>
@@ -45,8 +48,11 @@ export default {
     mouseleave() {
       this.isHovering = false
     },
-    clickAdd() {
-      this.$emit('add', this.playlist)
+    clickAddTop() {
+      this.$emit('add-top', this.playlist, true)
+    },
+    clickAddBottom() {
+      this.$emit('add-bottom', this.playlist, false)
     },
     clickRem() {
       this.$emit('remove', this.playlist)
diff --git a/server/controllers/PlaylistController.js b/server/controllers/PlaylistController.js
index 972c352a4..e1a6b09d5 100644
--- a/server/controllers/PlaylistController.js
+++ b/server/controllers/PlaylistController.js
@@ -397,9 +397,10 @@ class PlaylistController {
 
     const mediaItemsToAdd = []
     const jsonExpanded = req.playlist.toOldJSONExpanded()
+    const addToTop = req.body.addToTop === true
 
     // Setup array of playlistMediaItem records to add
-    let order = req.playlist.playlistMediaItems.length + 1
+    let order = addToTop ? 0 : (req.playlist.playlistMediaItems.length + 1)
     for (const item of req.body.items) {
       const libraryItem = libraryItems.find((li) => li.id === item.libraryItemId)