From faa271edd6c7975f13fb6b4d7822f1415e8df4ed Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 1 Sep 2026 15:33:21 +0200
Subject: [PATCH] feat: design for queue, add songs, search and more

---
 web/src/components/AddSong.vue                |  1 +
 web/src/components/ConfirmView.vue            | 13 +++++
 web/src/components/QueueViewer.vue            | 47 ++++++++++++++-----
 web/src/components/SongEditor.vue             | 16 +++++++
 web/src/components/SortableList.vue           |  2 +
 web/src/composables/ImportTypePicker.vue      | 32 ++++++++++++-
 web/src/composables/SearchView.vue            | 19 ++++++--
 web/src/scss/components/queue.scss            | 35 ++++++++++++++
 web/src/scss/components/search.scss           | 34 +++++++++++++-
 web/src/scss/components/sortablelist.scss     |  1 +
 web/src/ts/player/index.ts                    | 10 +++-
 web/src/ts/player/playlists/add.ts            |  1 -
 web/src/ts/player/plugins/interface.d.ts      |  5 ++
 web/src/ts/player/plugins/local/index.ts      |  1 +
 web/src/ts/player/plugins/musickit/index.ts   |  1 +
 .../ts/player/plugins/musickit/playback.ts    |  7 ++-
 .../player/plugins/musickit/search/index.ts   |  8 +++-
 .../plugins/musickit/search/playlists.ts      | 23 +++++----
 web/src/views/AppView.vue                     | 29 ++++++++++--
 19 files changed, 251 insertions(+), 34 deletions(-)
 create mode 100644 web/src/components/ConfirmView.vue
 create mode 100644 web/src/components/SongEditor.vue

diff --git a/web/src/components/AddSong.vue b/web/src/components/AddSong.vue
index a734b70..dd1b548 100644
--- a/web/src/components/AddSong.vue
+++ b/web/src/components/AddSong.vue
@@ -50,6 +50,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        cursor: pointer;
 
         >.fa-solid {
             font-size: 1.5rem;
diff --git a/web/src/components/ConfirmView.vue b/web/src/components/ConfirmView.vue
new file mode 100644
index 0000000..edc4a77
--- /dev/null
+++ b/web/src/components/ConfirmView.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+    import PopupElement from './PopupElement.vue';
+</script>
+
+<template>
+    <div>
+        <PopupElement>
+            <h2></h2>
+            <button>Ok</button>
+            <button>Cancel</button>
+        </PopupElement>
+    </div>
+</template>
diff --git a/web/src/components/QueueViewer.vue b/web/src/components/QueueViewer.vue
index b664666..3251607 100644
--- a/web/src/components/QueueViewer.vue
+++ b/web/src/components/QueueViewer.vue
@@ -1,22 +1,46 @@
 <script setup lang="ts">
+    import {
+        type Ref,
+        type WritableComputedRef,
+        computed,
+        ref
+    } from 'vue';
     import AddSong from './AddSong.vue';
+    import type {
+        Song
+    } from '@/ts/dtype/playlist';
+    import SongEditor from './SongEditor.vue';
     import SortableList from './SortableList.vue';
     import {
         beautifyTime
     } from '@/ts/util/time';
     import player from '@/ts/player';
-    import {
-        ref
-    } from 'vue';
 
-    const queue = player.queue;
-    const queueIndex = player.queueIdx;
+    const queue: WritableComputedRef<Song[]> = computed( {
+        get () {
+            return player.queue.value.slice( player.queueIdx.value );
+        },
+        set ( val ) {
+            player.queue.value = player.queue.value.slice( 0, player.queueIdx.value ).concat( val );
+        }
+    } );
     const isPlaying = player.isPlaying;
     const showAddSong = ref( false );
+    const showEditSong = ref( false );
+    const editingSong: Ref<null | Song> = ref( null );
 
     const addSong = () => {
         showAddSong.value = true;
     };
+
+    const editSong = ( idx: number ) => {
+        showEditSong.value = true;
+        editingSong.value = player.queue.value[ idx ]!;
+    };
+
+    const deleteSong = ( idx: number ) => {
+        player.removeSong( idx );
+    };
 </script>
 
 <template>
@@ -40,6 +64,7 @@
                 Transmit
             </button>
         </div>
+        <SongEditor v-model="showEditSong" editing-song="" />
         <AddSong v-model="showAddSong" />
         <div>
             <SortableList v-slot="{ item: song, index }" v-model="queue">
@@ -52,7 +77,7 @@
                             class="song-cover"
                         >
                         <i v-else class="fa-solid fa-music song-cover"></i>
-                        <div v-if="index === queueIndex" class="play-overlay">
+                        <div v-if="index === 0" class="play-overlay">
                             <div v-if="isPlaying" class="playing-symbols">
                                 <div id="bar-1" class="playing-bar"></div>
                                 <div id="bar-2" class="playing-bar"></div>
@@ -67,15 +92,15 @@
                             <i class="fa-solid fa-play" @click="() => player.playIndex( index )"></i>
                         </div>
                     </div>
-                    <div>
+                    <div class="song-details">
                         <h3>{{ song.name }}</h3>
                         <p>{{ song.artist }}</p>
-                        <p>{{ beautifyTime( song.duration ) }}</p>
                         <p>{{ song['additional-info'] }}</p>
                     </div>
-                    <div>
-                        <i v-if="index !== queueIndex" class="fa-solid fa-trash-can"></i>
-                        <i class="fa-solid fa-pen-to-square"></i>
+                    <div class="song-actions">
+                        <p>{{ beautifyTime( song.duration ) }}</p>
+                        <i v-if="index !== 0" class="fa-solid fa-trash-can" @click="() => deleteSong( index )"></i>
+                        <i class="fa-solid fa-pen-to-square" @click="() => editSong( index )"></i>
                     </div>
                 </div>
             </SortableList>
diff --git a/web/src/components/SongEditor.vue b/web/src/components/SongEditor.vue
new file mode 100644
index 0000000..ce1f506
--- /dev/null
+++ b/web/src/components/SongEditor.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+    import PopupElement from './PopupElement.vue';
+
+    const model = defineModel<boolean>( {
+        'required': true
+    } );
+</script>
+
+<template>
+    <div>
+        <PopupElement v-model="model" show-close>
+            <h2>Edit Song</h2>
+            <!-- TODO: Need a way to use the search feature to replace the song details, as of course as well text editors -->
+        </PopupElement>
+    </div>
+</template>
diff --git a/web/src/components/SortableList.vue b/web/src/components/SortableList.vue
index f83fbe5..23dd07c 100644
--- a/web/src/components/SortableList.vue
+++ b/web/src/components/SortableList.vue
@@ -29,6 +29,8 @@
     let moveSpeed = 0;
 
     const start = ( ev: MouseEvent, idx: number ) => {
+        if ( array.value.length < 2 ) return;
+
         movableSize.value = document.getElementById( 'movable-' + idx )!.scrollHeight;
         offset.value = ev.y - ( movableSize.value / 2 );
         movingIdx.value = idx;
diff --git a/web/src/composables/ImportTypePicker.vue b/web/src/composables/ImportTypePicker.vue
index c6029d7..4886606 100644
--- a/web/src/composables/ImportTypePicker.vue
+++ b/web/src/composables/ImportTypePicker.vue
@@ -28,8 +28,8 @@
 <template>
     <div>
         <SearchView />
-        <PopupElement v-model="isShowingImportTypePicker">
-            <h3>What would you like to add?</h3>
+        <PopupElement v-model="isShowingImportTypePicker" show-close>
+            <h2>What would you like to add?</h2>
             <div class="import-type-list">
                 <div v-for="(source, index) in importers" :key="index" @click="openPicker( source )">
                     {{ source.name }}
@@ -38,3 +38,31 @@
         </PopupElement>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.import-type-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 50vw;
+    height: 35vh;
+    justify-content: center;
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    >div {
+        width: 32%;
+        margin: 0.5%;
+        height: 50%;
+        background-color: var(--accent-background);
+        border-radius: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        >.fa-solid {
+            font-size: 1.5rem;
+        }
+    }
+}
+</style>
diff --git a/web/src/composables/SearchView.vue b/web/src/composables/SearchView.vue
index bd91978..a547b6f 100644
--- a/web/src/composables/SearchView.vue
+++ b/web/src/composables/SearchView.vue
@@ -15,7 +15,9 @@
     const results: Ref<Song[]> = ref( [] );
     const query = ref( '' );
     const isSearching = ref( false );
+    const addedIndex = ref( -1 );
 
+    let addedTimeout = -1;
     let timeout = -1;
     let searchedForQuery = '';
 
@@ -46,7 +48,15 @@
     };
 
     const add = ( idx: number ) => {
+        try {
+            clearTimeout( addedTimeout );
+        } catch { /* empty */ }
+
+        addedIndex.value = idx;
         searchOpts.value?.addSelected( idx );
+        addedTimeout = setTimeout( () => {
+            addedIndex.value = -1;
+        }, 2000 );
     };
 </script>
 
@@ -63,11 +73,14 @@
             <div v-if="!isSearching" class="search-results-wrapper">
                 <div v-for="(result, index) in results" :key="index" @click="() => add(index)">
                     <img :src="result.artwork" :alt="'Album artwork of ' + result.name + ' by ' + result.artist">
-                    <h4>{{ result.name }}</h4>
-                    <p>{{ result.artist }}</p>
+                    <div>
+                        <h4>{{ result.name }}</h4>
+                        <p>{{ result.artist }}</p>
+                    </div>
+                    <i v-if="addedIndex === index" class="fa-solid fa-check"></i>
                 </div>
             </div>
-            <div v-else class="search-results-wrapper">
+            <div v-else class="search-results-wrapper placeholder">
                 Searching...
             </div>
         </PopupElement>
diff --git a/web/src/scss/components/queue.scss b/web/src/scss/components/queue.scss
index f49ab3b..99e2e20 100644
--- a/web/src/scss/components/queue.scss
+++ b/web/src/scss/components/queue.scss
@@ -6,6 +6,7 @@
     height: 10rem;
     width: 10rem;
     position: relative;
+    margin-right: 20px;
 
     .song-cover,
     .fa-solid {
@@ -25,6 +26,7 @@
       left: 0;
       width: 100%;
       height: 100%;
+      cursor: pointer;
 
       &.hover {
         display: none;
@@ -37,6 +39,39 @@
       }
     }
   }
+
+  >.song-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    >* {
+      margin: 5px;
+    }
+
+    >h3 {
+      font-size: 1.8rem;
+    }
+  }
+
+  >.song-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-left: auto;
+    margin-right: 10px;
+
+    >* {
+      margin: 5px;
+    }
+
+    >.fa-solid {
+      font-size: 1.25rem;
+      cursor: pointer;
+    }
+  }
 }
 
 .playing-symbols {
diff --git a/web/src/scss/components/search.scss b/web/src/scss/components/search.scss
index ab19504..300bc73 100644
--- a/web/src/scss/components/search.scss
+++ b/web/src/scss/components/search.scss
@@ -3,10 +3,42 @@
   height: 60vh;
   overflow-x: hidden;
   overflow-y: scroll;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  &.placeholder {
+    justify-content: center;
+  }
 
   >div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    width: 75%;
+    cursor: pointer;
+
+    >div {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-direction: column;
+      height: 100%;
+
+      >* {
+        margin: 5px;
+      }
+    }
+
     >img {
-      width: 10%;
+      height: 7rem;
+      width: 7rem;
+      margin-right: 20px;
+    }
+
+    >.fa-solid {
+      margin-left: auto;
+      font-size: 2rem;
     }
   }
 }
diff --git a/web/src/scss/components/sortablelist.scss b/web/src/scss/components/sortablelist.scss
index 3d4047d..2af4a32 100644
--- a/web/src/scss/components/sortablelist.scss
+++ b/web/src/scss/components/sortablelist.scss
@@ -18,6 +18,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    margin-bottom: 5px;
 
     &.moving {
       position: fixed;
diff --git a/web/src/ts/player/index.ts b/web/src/ts/player/index.ts
index fe82458..aa6d9ec 100644
--- a/web/src/ts/player/index.ts
+++ b/web/src/ts/player/index.ts
@@ -1,6 +1,7 @@
 import {
     addSongList,
     clearQueue,
+    removeSong,
     shuffleList
 } from './playlists/add';
 import {
@@ -27,12 +28,12 @@ import {
 } from './playlists';
 
 const next = () => {
-    playIndex( queueIdx.value + 1 );
+    playIndex( ( queueIdx.value + 1 ) % queue.value.length );
 };
 
 const prev = () => {
     // TODO: Back to beginning if more than some seconds have passed?
-    playIndex( queueIdx.value - 1 );
+    playIndex( ( queueIdx.value - 1 + queue.value.length ) % queue.value.length );
 };
 
 const play = () => {
@@ -117,6 +118,10 @@ const getSources = (): string[] => {
     return Object.keys( sources );
 };
 
+/**
+ * Add songs to the playlist from given source
+ * @param source - The ID of the source to add from
+ */
 const addSongFromSource = async ( source: string ) => {
     sources[source]!.addSongsFromThisSource( addSongList );
 };
@@ -135,6 +140,7 @@ export default {
     next,
     prev,
     clearQueue,
+    removeSong,
     queue,
     queueIdx,
     duration,
diff --git a/web/src/ts/player/playlists/add.ts b/web/src/ts/player/playlists/add.ts
index d6a4fee..f7e70a1 100644
--- a/web/src/ts/player/playlists/add.ts
+++ b/web/src/ts/player/playlists/add.ts
@@ -35,7 +35,6 @@ export const removeSong = ( idx: number ) => {
 
     const removed = queue.value.splice( idx, 1 )[0];
 
-    // TODO: Check that this works
     for ( let i = 0; i < rawQueue.value.length; i++ ) {
         if ( rawQueue.value[ i ] === removed ) {
             rawQueue.value.splice( i, 1 );
diff --git a/web/src/ts/player/plugins/interface.d.ts b/web/src/ts/player/plugins/interface.d.ts
index dd3fa88..a49ca3f 100644
--- a/web/src/ts/player/plugins/interface.d.ts
+++ b/web/src/ts/player/plugins/interface.d.ts
@@ -90,6 +90,11 @@ export interface PlayerSourcePlugin {
      */
     'getDuration': () => number;
 
+    /**
+     * Check if source is available for playback
+     */
+    'available': () => boolean;
+
     /**
      * Called when user adds another song to the playlist via this source.
      * You may use the provided interface elements (search bar and popups) to e.g. ask if user wants to use a playlist, album, etc
diff --git a/web/src/ts/player/plugins/local/index.ts b/web/src/ts/player/plugins/local/index.ts
index 69ea1f3..637061f 100644
--- a/web/src/ts/player/plugins/local/index.ts
+++ b/web/src/ts/player/plugins/local/index.ts
@@ -12,6 +12,7 @@ export const useLocalPlayer: PlayerSourcePluginInitializer = async (): Promise<P
     };
 
     return {
+        'available': () => true,
         'id': 'local',
         'name': 'Local Disk',
         'play': player.play,
diff --git a/web/src/ts/player/plugins/musickit/index.ts b/web/src/ts/player/plugins/musickit/index.ts
index a89b9d1..650ae8a 100644
--- a/web/src/ts/player/plugins/musickit/index.ts
+++ b/web/src/ts/player/plugins/musickit/index.ts
@@ -43,6 +43,7 @@ export const useMusicKit: PlayerSourcePluginInitializer = ( storefront: string =
                 };
 
                 return {
+                    'available': controls.getLoggedIn,
                     'play': controls.play,
                     'pause': controls.pause,
                     'stop': controls.stop,
diff --git a/web/src/ts/player/plugins/musickit/playback.ts b/web/src/ts/player/plugins/musickit/playback.ts
index 261b4b4..3e16961 100644
--- a/web/src/ts/player/plugins/musickit/playback.ts
+++ b/web/src/ts/player/plugins/musickit/playback.ts
@@ -34,6 +34,10 @@ export const musicKitPlayback = ( musickitInstance: MusicKitInstance ) => {
         return musickitInstance.currentPlaybackDuration;
     };
 
+    const getLoggedIn = (): boolean => {
+        return musickitInstance.isAuthorized;
+    };
+
     return {
         play,
         pause,
@@ -41,6 +45,7 @@ export const musicKitPlayback = ( musickitInstance: MusicKitInstance ) => {
         playSong,
         stop,
         getPlaybackPos,
-        getDuration
+        getDuration,
+        getLoggedIn
     };
 };
diff --git a/web/src/ts/player/plugins/musickit/search/index.ts b/web/src/ts/player/plugins/musickit/search/index.ts
index 00eec1d..b78d309 100644
--- a/web/src/ts/player/plugins/musickit/search/index.ts
+++ b/web/src/ts/player/plugins/musickit/search/index.ts
@@ -7,12 +7,16 @@ import type {
 import {
     openImportTypePicker
 } from '@/composables/importTypePicker';
+import {
+    searchPlaylists
+} from './playlists';
 import {
     searchSongs
 } from './songs';
 
 export const addFromAppleMusic = async ( instance: MusicKitInstance, cb: ( songs: Song[] ) => void ): Promise<void> => {
     const songs = await searchSongs( instance, cb );
+    const playlists = await searchPlaylists( instance, cb );
 
     openImportTypePicker( [
         {
@@ -24,8 +28,8 @@ export const addFromAppleMusic = async ( instance: MusicKitInstance, cb: ( songs
         {
             'name': 'Playlists',
             'type': 'cloud',
-            'addSelected': songs.addSelected,
-            'search': songs.search
+            'addSelected': playlists.addSelected,
+            'search': playlists.search
         }
     ] );
 };
diff --git a/web/src/ts/player/plugins/musickit/search/playlists.ts b/web/src/ts/player/plugins/musickit/search/playlists.ts
index aa74732..6fe0dc3 100644
--- a/web/src/ts/player/plugins/musickit/search/playlists.ts
+++ b/web/src/ts/player/plugins/musickit/search/playlists.ts
@@ -1,17 +1,24 @@
-import type {
-    Song
-} from '@/ts/dtype/playlist';
 import type {
     MusicKitInstance
 } from 'musickitjs-v3-types/MusicKitInstance';
+import type {
+    Song
+} from '@/ts/dtype/playlist';
 
-export const searchPlaylists = async ( instance: MusicKitInstance ) => {
+export const searchPlaylists = async ( instance: MusicKitInstance, cb: ( songs: Song[] ) => void ) => {
     // TODO: Get all playlists
 
-    const search = async () => {};
-
-    const addSelected = async ( idx: number ): Promise<Song[]> => {
-        // TODO: Load the playlist content and return songs
+    const search = async ( term: string ): Promise<Song[]> => {
         return [];
     };
+
+    const addSelected = async ( idx: number ) => {
+        // TODO: Implement
+        cb( [] );
+    };
+
+    return {
+        search,
+        addSelected
+    };
 };
diff --git a/web/src/views/AppView.vue b/web/src/views/AppView.vue
index 1a2805b..fc3cc9c 100644
--- a/web/src/views/AppView.vue
+++ b/web/src/views/AppView.vue
@@ -1,10 +1,33 @@
 <script setup lang="ts">
+    import PlayerControls from '@/components/PlayerControls.vue';
     import QueueViewer from '@/components/QueueViewer.vue';
 </script>
 
 <template>
-    <div>
-        <h1>Player</h1>
-        <QueueViewer />
+    <div class="main-app">
+        <div class="player-controls">
+            <PlayerControls />
+        </div>
+        <div class="song-queue">
+            <QueueViewer />
+        </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.main-app {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .player-controls {
+        width: 60%;
+    }
+
+    .song-queue {
+        width: 80%;
+    }
+}
+</style>