feat: design for queue, add songs, search and more

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;

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>

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>

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>

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;