feat: prepare adding songs

web/src/components/AddSong.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+    import PopupElement from '@/components/PopupElement.vue';
+    import player from '@/ts/player';
+    import {
+        sources
+    } from '@/ts/player/state';
+
+    const showPopup = defineModel<boolean>( {
+        'required': true
+    } );
+
+    const addSong = ( source: string ) => {
+        player.addSongFromSource( source );
+        showPopup.value = false;
+    };
+</script>
+
+<template>
+    <div>
+        <PopupElement v-model="showPopup" show-close>
+            <h1>Add Song</h1>
+            <div class="song-sources">
+                <div v-for="(source, index) in sources" :key="index" @click="() => addSong( source.id )">
+                    <i v-if="source.icon" :class="['fa-solid', 'fa-' + source.icon]"></i>
+                    <p>{{ source.name }}</p>
+                </div>
+            </div>
+        </PopupElement>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.song-sources {
+    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;
+
+        >.fa-solid {
+            font-size: 1.5rem;
+        }
+    }
+}
+</style>

web/src/components/PopupElement.vue

@@ -55,7 +55,7 @@
             position: relative;
             overflow-y: scroll;
             display: block;
-            transition: transform 0.5s ease, opacity 0.5s ease;
+            transition: transform 0.25s ease, opacity 0.25s ease;
 
             >.close-icon {
                 position: absolute;
@@ -74,6 +74,7 @@
             .popup-main {
                 transform: scale(1.25);
                 opacity: 0;
+                transition: transform 0.15s ease, opacity 0.15s ease;
             }
 
             .popup-backdrop {

web/src/components/QueueViewer.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
+    import AddSong from './AddSong.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 idx = player.queueIdx;
     const isPlaying = player.isPlaying;
+    const showAddSong = ref( false );
 
+    const addSong = () => {
+        showAddSong.value = true;
+    };
 </script>
 
 <template>
     <div>
         <div>
-            <button>
+            <button @click="addSong">
                 <i class="fa-solid fa-plus"></i>
                 Add
             </button>
@@ -32,6 +40,7 @@
                 Transmit
             </button>
         </div>
+        <AddSong v-model="showAddSong" />
         <div>
             <SortableList v-slot="{ item: song, index }" v-model="queue">
                 <div class="song-cover-wrapper">