From 1d05fc1b0cc7589e390ee6c02c5db4049de201b2 Mon Sep 17 00:00:00 2001
From: superthunder-afk <superthunder-afk@users.noreply.github.com>
Date: Mon, 4 May 2026 01:36:48 +0530
Subject: [PATCH] Add playlist sorting and Spotify import UI

---
 src/components/PlaylistView/AfterHeader.vue | 154 ++++++++++++++++++--
 src/components/shared/DropDown.vue          |   4 +
 src/interfaces.ts                           |   1 +
 src/requests/playlists.ts                   |  71 ++++++++-
 src/requests/useAxios.ts                    |   1 +
 src/stores/pages/playlist.ts                |  39 ++++-
 src/views/FavoriteTracks.vue                |  76 +++++++++-
 src/views/PlaylistList.vue                  |  55 ++++++-
 src/views/PlaylistView/index.vue            |  51 ++++---
 9 files changed, 406 insertions(+), 46 deletions(-)

diff --git a/src/components/PlaylistView/AfterHeader.vue b/src/components/PlaylistView/AfterHeader.vue
index 64df2178..d5fc1281 100644
--- a/src/components/PlaylistView/AfterHeader.vue
+++ b/src/components/PlaylistView/AfterHeader.vue
@@ -1,33 +1,161 @@
 <template>
     <div class="p-after-header">
-        <div>All Tracks</div>
+        <div class="heading">All Tracks</div>
+
+        <div class="actions">
+            <div class="sort-wrap">
+                <DropDown
+                    :items="sortItems"
+                    :current="currentSort"
+                    component_key="playlist-sortbar"
+                    :reverse="playlist.trackSortReverse"
+                    @item-clicked="handleSortKeySet"
+                />
+            </div>
+
+            <button v-if="canManage" class="action-btn" type="button" @click="downloadPlaylist">Export CSV</button>
+            <button v-if="canManage" class="action-btn" type="button" @click="openSpotifyImport">Import Spotify CSV</button>
+            <input
+                ref="fileInput"
+                type="file"
+                accept=".csv,text/csv"
+                class="hidden-input"
+                @change="handleFileSelected"
+            />
+        </div>
     </div>
 </template>
 
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import DropDown from '@/components/shared/DropDown.vue'
+import { exportPlaylist, importSpotifyCsv } from '@/requests/playlists'
+import usePlaylistStore from '@/stores/pages/playlist'
+
+const playlist = usePlaylistStore()
+const fileInput = ref<HTMLInputElement | null>(null)
+
+interface SortItem {
+    key: string
+    title: string
+}
+
+const sortItems: SortItem[] = [
+    { key: 'default', title: 'Playlist Order' },
+    { key: 'title', title: 'Title' },
+    { key: 'filepath', title: 'File Name' },
+    { key: 'album', title: 'Album' },
+    { key: 'artists', title: 'Artist' },
+    { key: 'date', title: 'Release Date' },
+    { key: 'last_mod', title: 'Date Added' },
+    { key: 'lastplayed', title: 'Last Played' },
+    { key: 'playcount', title: 'Play Count' },
+    { key: 'playduration', title: 'Play Duration' },
+]
+
+const currentSort = computed(() => {
+    return sortItems.find(item => item.key === playlist.trackSortBy) || sortItems[0]
+})
+
+const canManage = computed(() => Number.isInteger(playlist.info.id))
+
+function handleSortKeySet(item: SortItem) {
+    playlist.setPlaylistTrackSortKey(item.key)
+}
+
+async function downloadPlaylist() {
+    await exportPlaylist(playlist.info.id, playlist.info.name)
+}
+
+function openSpotifyImport() {
+    fileInput.value?.click()
+}
+
+async function handleFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement
+    const file = input.files?.[0]
+
+    if (!file) return
+
+    const res = await importSpotifyCsv(playlist.info.id, file)
+    if (res) {
+        playlist.allTracks = []
+        await playlist.fetchAll(playlist.info.id)
+    }
+
+    input.value = ''
+}
+</script>
+
 <style lang="scss">
-.isSmall .p-after-header {
-    padding-left: 0.5rem;
+.hidden-input {
+    display: none;
 }
 
 .p-after-header {
     display: flex;
     align-items: center;
-    height: 64px;
+    justify-content: space-between;
+    gap: 1rem;
+    min-height: 64px;
     padding: 0 1rem;
     margin-top: $small;
-
-    font-size: 14px;
-    font-weight: 500;
     color: $gray1;
 
-    @media only screen and (max-width: 724px) {
+    @media only screen and (max-width: 900px) {
+        flex-direction: column;
+        align-items: flex-start;
         padding-left: 0.5rem;
     }
 
-    /* Somehow has to be replaced by above now
-  @include largePhones {
-    padding-left: 0.5rem;
-  }
-  */
+    .heading {
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .sort-wrap {
+        position: relative;
+        z-index: 40;
+    }
+
+    .action-btn {
+        border: 1px solid $gray4;
+        background: $gray5;
+        color: $gray1;
+        border-radius: 999px;
+        padding: 0.5rem 0.9rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background: $gray4;
+        }
+    }
+
+    .playlist-sortbar {
+        position: static !important;
+        width: 10rem;
+
+        .selected {
+            background-color: transparent;
+            opacity: 1;
+        }
+
+        .options {
+            background-color: $gray;
+            opacity: 1;
+        }
+    }
 }
 </style>
diff --git a/src/components/shared/DropDown.vue b/src/components/shared/DropDown.vue
index 974f8302..5dfe733d 100644
--- a/src/components/shared/DropDown.vue
+++ b/src/components/shared/DropDown.vue
@@ -71,6 +71,7 @@ onClickOutside(dropOptionsRef, e => {
 
 <style lang="scss">
 .smdropdown {
+    position: relative;
     z-index: 1000;
 
     .dropdown-arrow {
@@ -118,6 +119,9 @@ onClickOutside(dropOptionsRef, e => {
             padding: $small;
             display: grid;
             width: 100%;
+            z-index: 1002;
+            opacity: 1;
+            isolation: isolate;
         }
 
         .option {
diff --git a/src/interfaces.ts b/src/interfaces.ts
index f5bbaa6e..daf77e4e 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -260,6 +260,7 @@ export interface FetchProps {
     props?: {}
     method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
     headers?: {}
+    responseType?: 'json' | 'blob'
 }
 
 export interface FuseResult {
diff --git a/src/requests/playlists.ts b/src/requests/playlists.ts
index a6abbc6e..633207d2 100644
--- a/src/requests/playlists.ts
+++ b/src/requests/playlists.ts
@@ -53,8 +53,24 @@ export async function getAllPlaylists(no_images = false): Promise<Playlist[]> {
     return []
 }
 
-export async function getPlaylist(pid: number | string, no_tracks = false, start: number = 0, limit: number = 50) {
-    const uri = `${basePlaylistUrl}/${pid}?no_tracks=${no_tracks}&start=${start}&limit=${limit}`
+export async function getPlaylist(
+    pid: number | string,
+    no_tracks = false,
+    start: number = 0,
+    limit: number = 50,
+    options: {
+        sorttracksby?: string
+        tracksort_reverse?: boolean
+    } = {}
+) {
+    const params = new URLSearchParams({
+        no_tracks: String(no_tracks),
+        start: String(start),
+        limit: String(limit),
+        sorttracksby: options.sorttracksby || 'default',
+        tracksort_reverse: String(options.tracksort_reverse || false),
+    })
+    const uri = `${basePlaylistUrl}/${pid}?${params.toString()}`
 
     interface PlaylistData {
         info: Playlist
@@ -286,3 +302,54 @@ export async function pinUnpinPlaylist(pid: number) {
 
     return false
 }
+
+export async function exportPlaylist(pid: number, playlistName: string) {
+    const { data, status } = await useAxios({
+        url: `${basePlaylistUrl}/${pid}/export`,
+        method: 'GET',
+        responseType: 'blob',
+    })
+
+    if (status !== 200 || !data) {
+        new Notification('Unable to export playlist', NotifType.Error)
+        return false
+    }
+
+    const safeName = playlistName.trim().replace(/[\\/:*?"<>|]+/g, '_') || 'playlist'
+    const url = window.URL.createObjectURL(data as Blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${safeName}.csv`
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    window.URL.revokeObjectURL(url)
+    new Notification('Playlist exported', NotifType.Success)
+    return true
+}
+
+export async function importSpotifyCsv(pid: number, file: File) {
+    const form = new FormData()
+    form.append('csv_file', file)
+
+    const { data, status } = await useAxios({
+        url: `${basePlaylistUrl}/${pid}/import-spotify`,
+        props: form,
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    })
+
+    if (status === 200) {
+        const added = data.added ?? 0
+        const unmatched = data.unmatched?.length ?? 0
+        new Notification(
+            `Imported ${added} tracks${unmatched ? `, ${unmatched} unmatched` : ''}`,
+            NotifType.Success
+        )
+        return data
+    }
+
+    new Notification(data?.error || 'Unable to import Spotify CSV', NotifType.Error)
+    return null
+}
diff --git a/src/requests/useAxios.ts b/src/requests/useAxios.ts
index a25f7837..b6abb933 100644
--- a/src/requests/useAxios.ts
+++ b/src/requests/useAxios.ts
@@ -27,6 +27,7 @@ export default async (args: FetchProps, withCredentials: boolean = true) => {
             data: args.props,
             // INFO: Most requests use POST
             method: args.method || 'POST',
+            responseType: args.responseType || 'json',
             // INFO: Add ngrok header and provided headers
             headers: { ...args.headers, ...(on_ngrok ? ngrok_config : {}) },
             withCredentials: withCredentials,
diff --git a/src/stores/pages/playlist.ts b/src/stores/pages/playlist.ts
index 40cab77e..c248355d 100644
--- a/src/stores/pages/playlist.ts
+++ b/src/stores/pages/playlist.ts
@@ -17,6 +17,8 @@ export default defineStore('playlist-tracks', {
         query: '',
         initialBannerPos: 0,
         allTracks: <Track[]>[],
+        trackSortBy: 'default',
+        trackSortReverse: false,
         colors: {
             bg: '',
             btn: '',
@@ -29,10 +31,27 @@ export default defineStore('playlist-tracks', {
          * @param id The id of the playlist to fetch
          */
         async fetchAll(id: number, no_tracks = false, fetchAll = false) {
+            const isNewPlaylist = this.info.id !== id
+
+            if (isNewPlaylist) {
+                this.allTracks = []
+                this.query = ''
+                this.resetColors()
+            }
+
             this.resetBannerPos()
             // if fetchAll, use -1 to fetch all tracks
-            const playlist = await getPlaylist(id, no_tracks, this.allTracks.length, fetchAll ? -1 : track_limit.value)
-            if (this.allTracks.length !== 0) {
+            const playlist = await getPlaylist(
+                id,
+                no_tracks,
+                this.allTracks.length,
+                fetchAll ? -1 : track_limit.value,
+                {
+                    sorttracksby: this.trackSortBy,
+                    tracksort_reverse: this.trackSortReverse,
+                }
+            )
+            if (!isNewPlaylist && this.allTracks.length !== 0) {
                 this.allTracks.push(...(playlist?.tracks || []))
                 return
             }
@@ -41,7 +60,6 @@ export default defineStore('playlist-tracks', {
             this.initialBannerPos = this.info.settings.banner_pos
             this.createImageLink()
 
-            this.resetColors()
             this.extractColors()
 
             if (no_tracks) return
@@ -120,6 +138,17 @@ export default defineStore('playlist-tracks', {
         addTrack(track: Track) {
             this.allTracks.push(track)
         },
+        async setPlaylistTrackSortKey(key: string) {
+            if (key === this.trackSortBy) {
+                this.trackSortReverse = !this.trackSortReverse
+            } else {
+                this.trackSortBy = key
+                this.trackSortReverse = false
+            }
+
+            this.allTracks = []
+            await this.fetchAll(this.info.id)
+        },
         resetBannerPos() {
             try {
                 this.info.settings.banner_pos = 50
@@ -155,4 +184,8 @@ export default defineStore('playlist-tracks', {
             return this.info.settings.banner_pos - this.initialBannerPos !== 0
         },
     },
+    persist: {
+        paths: ['trackSortBy', 'trackSortReverse'],
+        storage: localStorage,
+    },
 })
diff --git a/src/views/FavoriteTracks.vue b/src/views/FavoriteTracks.vue
index 3233abeb..90d8bf98 100644
--- a/src/views/FavoriteTracks.vue
+++ b/src/views/FavoriteTracks.vue
@@ -1,6 +1,6 @@
 <template>
     <GenericTrackPagination
-        :tracks="tracks"
+        :tracks="sortedTracks"
         :desc="`You have ${trackCount} favorited track${trackCount == 1 ? '' : 's'}`"
         :noitemsicon="HeartSvg"
         :more-items-loader="loadMore"
@@ -12,13 +12,22 @@
                 <template #description
                     >You have {{ trackCount }} favorited track{{ trackCount == 1 ? '' : 's' }}</template
                 >
+                <template #right>
+                    <DropDown
+                        :items="sortItems"
+                        :current="currentSort"
+                        component_key="favorite-track-sortbar"
+                        :reverse="sortReverse"
+                        @item-clicked="handleSort"
+                    />
+                </template>
             </GenericHeader>
         </template>
     </GenericTrackPagination>
 </template>
 
 <script setup lang="ts">
-import { Ref, onMounted, ref } from 'vue'
+import { ComputedRef, Ref, computed, onMounted, ref } from 'vue'
 
 import useQueueStore from '@/stores/queue'
 import useTracklist from '@/stores/queue/tracklist'
@@ -26,6 +35,7 @@ import useTracklist from '@/stores/queue/tracklist'
 import { Track } from '@/interfaces'
 import { getFavTracks } from '@/requests/favorite'
 
+import DropDown from '@/components/shared/DropDown.vue'
 import GenericHeader from '@/components/shared/GenericHeader.vue'
 import GenericTrackPagination from '@/components/shared/GenericTrackPagination.vue'
 import HeartSvg from '@/assets/icons/heart.svg'
@@ -37,6 +47,58 @@ let waitingForMore = false
 const tracks: Ref<Track[]> = ref([])
 const queue = useQueueStore()
 const tracklist = useTracklist()
+const sortBy = ref('default')
+const sortReverse = ref(false)
+
+interface SortItem {
+    key: string
+    title: string
+}
+
+const sortItems: SortItem[] = [
+    { key: 'default', title: 'Favorite Order' },
+    { key: 'title', title: 'Title' },
+    { key: 'album', title: 'Album' },
+    { key: 'artists', title: 'Artist' },
+    { key: 'duration', title: 'Duration' },
+]
+
+const currentSort = computed(() => {
+    return sortItems.find(item => item.key === sortBy.value) || sortItems[0]
+})
+
+function sortTrackList(items: Track[]) {
+    const byArtist = (track: Track) => track.artists?.[0]?.name?.toLowerCase() || ''
+
+    items.sort((a, b) => {
+        switch (sortBy.value) {
+            case 'title':
+                return a.title.localeCompare(b.title, undefined, { sensitivity: 'base' })
+            case 'album':
+                return a.album.localeCompare(b.album, undefined, { sensitivity: 'base' })
+            case 'artists':
+                return byArtist(a).localeCompare(byArtist(b), undefined, { sensitivity: 'base' })
+            case 'duration':
+                return (a.duration || 0) - (b.duration || 0)
+            default:
+                return (b.master_index || 0) - (a.master_index || 0)
+        }
+    })
+
+    return sortReverse.value ? items.reverse() : items
+}
+
+const sortedTracks: ComputedRef<Track[]> = computed(() => sortTrackList([...tracks.value]))
+
+function handleSort(item: SortItem) {
+    if (item.key === sortBy.value) {
+        sortReverse.value = !sortReverse.value
+        return
+    }
+
+    sortBy.value = item.key
+    sortReverse.value = false
+}
 
 async function loadMore() {
     if (waitingForMore || (trackCount.value && trackCount.value <= tracks.value.length)) return
@@ -68,13 +130,15 @@ onMounted(async () => {
 })
 
 async function handlePlay(index: number) {
-    if (tracks.value.length === trackCount.value) {
-        tracklist.setFromFav(tracks.value)
-    } else {
+    let playTracks = sortedTracks.value
+
+    if (tracks.value.length !== trackCount.value) {
         const remainder = (await getFavTracks(tracks.value.length, trackCount.value)).tracks
-        tracklist.setFromFav([...tracks.value, ...remainder])
+        playTracks = sortTrackList([...tracks.value, ...remainder])
     }
 
+    tracklist.setFromFav(playTracks)
+
     queue.play(index)
 }
 </script>
diff --git a/src/views/PlaylistList.vue b/src/views/PlaylistList.vue
index 7b8a4aec..ffaffa37 100644
--- a/src/views/PlaylistList.vue
+++ b/src/views/PlaylistList.vue
@@ -17,7 +17,17 @@
                 </form>
             </template>
             <template #right>
-                <button class="playlist-button" @click="showNewPlaylistModal()"><PlusSvg /> New Playlist</button>
+                <div class="playlist-actions">
+                    <button class="playlist-button import-button" @click="openSpotifyImport">Import Spotify CSV</button>
+                    <button class="playlist-button" @click="showNewPlaylistModal()"><PlusSvg /> New Playlist</button>
+                    <input
+                        ref="fileInput"
+                        type="file"
+                        accept=".csv,text/csv"
+                        class="hidden-input"
+                        @change="handleFileSelected"
+                    />
+                </div>
             </template>
         </Header>
         <PlaylistCardGroup v-if="!query && pinnedPlaylists.length" :playlists="pinnedPlaylists" :title="'Pinned'" />
@@ -42,6 +52,7 @@ import { computed, onMounted, ref } from 'vue'
 import usePStore from '@/stores/pages/playlists'
 import { useFuse } from '@/utils'
 import updatePageTitle from '@/utils/updatePageTitle'
+import { createNewPlaylist, importSpotifyCsv } from '@/requests/playlists'
 
 import PlaylistSvg from '@/assets/icons/playlist-1.svg'
 import PlusSvg from '@/assets/icons/plus.svg'
@@ -52,6 +63,7 @@ import useModalStore from '@/stores/modal'
 
 const pStore = usePStore()
 const { showNewPlaylistModal } = useModalStore()
+const fileInput = ref<HTMLInputElement | null>(null)
 
 const input = ref('')
 const query = debouncedRef(input, 300)
@@ -69,6 +81,31 @@ onMounted(() => {
     updatePageTitle('Playlists')
 })
 
+function openSpotifyImport() {
+    fileInput.value?.click()
+}
+
+function makePlaylistNameFromFile(filename: string) {
+    return filename.replace(/\.csv$/i, '').replace(/[_-]+/g, ' ').trim() || 'Imported Playlist'
+}
+
+async function handleFileSelected(event: Event) {
+    const inputElem = event.target as HTMLInputElement
+    const file = inputElem.files?.[0]
+
+    if (!file) return
+
+    const playlistName = makePlaylistNameFromFile(file.name)
+    const playlist = await createNewPlaylist(playlistName)
+
+    if (playlist) {
+        await importSpotifyCsv(playlist.id, file)
+        await pStore.fetchAll()
+    }
+
+    inputElem.value = ''
+}
+
 const playlists = computed(() => {
     if (!query.value) {
         return pStore.playlists.filter(p => !p.pinned)
@@ -88,12 +125,28 @@ const playlists = computed(() => {
     height: 100%;
     overflow: auto;
 
+    .hidden-input {
+        display: none;
+    }
+
+    .playlist-actions {
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+    }
+
     .playlist-button {
         svg {
             height: 1.5rem;
         }
     }
 
+    .import-button {
+        padding-right: $medium;
+    }
+
     .grid {
         grid-template-columns: repeat(auto-fill, minmax($cardwidth, 1fr));
         gap: 2.5rem 1.5rem;
diff --git a/src/views/PlaylistView/index.vue b/src/views/PlaylistView/index.vue
index f718625c..1950c623 100644
--- a/src/views/PlaylistView/index.vue
+++ b/src/views/PlaylistView/index.vue
@@ -7,6 +7,11 @@
             class="scroller"
             style="height: 100%"
         >
+            <template #before>
+                <Header />
+                <AfterHeader />
+            </template>
+
             <template #default="{ item, index, active }">
                 <DynamicScrollerItem
                     :item="item"
@@ -27,10 +32,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import { onMounted, onUpdated } from 'vue'
 
-import { isMedium, isSmall, isSmallPhone, track_limit } from '@/stores/content-width'
+import { isMedium, isSmall, track_limit } from '@/stores/content-width'
 import { dropSources } from '@/enums'
 import useQueue from '@/stores/queue'
 import useTracklist from '@/stores/queue/tracklist'
@@ -43,7 +48,7 @@ import Header from '@/components/PlaylistView/Header.vue'
 import NoItems from '@/components/shared/NoItems.vue'
 import SongItem from '@/components/shared/SongItem.vue'
 import AfterHeader from '@/components/PlaylistView/AfterHeader.vue'
-import { onBeforeRouteLeave } from 'vue-router'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
 import AlbumsFetcher from '@/components/ArtistView/AlbumsFetcher.vue'
 
 const queue = useQueue()
@@ -52,7 +57,7 @@ const playlist = usePlaylistStore()
 
 interface ScrollerItem {
     id: string | number
-    component: typeof Header | typeof SongItem | typeof NoItems | typeof AlbumsFetcher
+    component: typeof SongItem | typeof NoItems | typeof AlbumsFetcher
     size: number
     props?: {}
 }
@@ -71,18 +76,6 @@ const getNoItemsComponent = () =>
     }
 
 const scrollerItems = computed(() => {
-    const header: ScrollerItem = {
-        id: 'header',
-        component: Header,
-        size: isSmallPhone.value ? 24 * 16 : 18 * 16,
-    }
-
-    const afterHeader: ScrollerItem = {
-        id: 'afterHeader',
-        component: AfterHeader,
-        size: 4 * 16,
-    }
-
     const tracks = playlist.tracks.map(track => {
         return {
             id: track.filepath,
@@ -111,7 +104,7 @@ const scrollerItems = computed(() => {
         })
     }
 
-    return [header, afterHeader, ...body]
+    return body
 })
 
 async function playFromPlaylistPage(index: number) {
@@ -119,7 +112,7 @@ async function playFromPlaylistPage(index: number) {
 
     if (playlist.tracks.length !== playlist.info.count) {
         // fetch all the tracks
-        playlist.fetchAll(id, false, true)
+        await playlist.fetchAll(id, false, true)
     }
 
     tracklist.setFromPlaylist(name, id, playlist.allTracks)
@@ -130,13 +123,29 @@ async function playFromPlaylistPage(index: number) {
     updatePageTitle(playlist.info.name)
 })
 
+onBeforeRouteUpdate(async to => {
+    await playlist.fetchAll(Number(to.params.pid), false)
+    await nextTick()
+
+    document.getElementById('contentscroller')?.scrollTo({
+        top: 0,
+    })
+})
+
 onBeforeRouteLeave(() => playlist.resetAll())
 </script>
 
 <style lang="scss">
-.playlist-virtual-scroller {
-    .nothing {
-        height: 25rem;
+.folder-view {
+    .scroller > div.vue-recycle-scroller__slot:first-child {
+        position: relative;
+        z-index: 30;
+        background-color: $body;
+        padding-bottom: 0.75rem;
     }
 }
+
+.nothing {
+    height: 25rem;
+}
 </style>