chore: refactor vue components

web/src/components/main/PlayerComponent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+    import {
+        queue,
+        queueIdx
+    } from '@/ts/player/state';
+    import CurrentSong from '../player/CurrentSong.vue';
+    import PlayerControls from '../player/PlayerControls.vue';
+    import QueueViewer from '../player/QueueViewer.vue';
+</script>
+
+<template>
+    <div class="player">
+        <div
+            class="panel"
+        >
+            <div style="margin-bottom: 20px; width: 100%;">
+                <CurrentSong
+                    v-model="queue[queueIdx]"
+                />
+            </div>
+            <PlayerControls />
+        </div>
+        <div class="panel">
+            <QueueViewer />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.player {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+
+    .panel {
+        width: 45%;
+        margin-left: 2.5%;
+        margin-right: 2.5%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+}
+</style>

web/src/components/main/PlayerWrapper.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+    import PlayerComponent from './PlayerComponent.vue';
+    import SmallPlayerComponent from './SmallPlayerComponent.vue';
+    import {
+        ref
+    } from 'vue';
+
+    const fullPlayer = ref( true );
+
+    const close = () => {
+        fullPlayer.value = false;
+    };
+</script>
+
+<template>
+    <div class="player-wrapper">
+        <SmallPlayerComponent v-model="fullPlayer" />
+        <div :class="['player-container', fullPlayer ? undefined : 'hidden']">
+            <i class="fa-solid fa-xmark" @click="close"></i>
+            <PlayerComponent />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .player-container {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        background-color: var(--secondary-color);
+        transition: bottom 1s ease;
+        transition-delay: 0.25s;
+
+        &.hidden {
+            transition-delay: 0s;
+            bottom: -100vh;
+        }
+
+        >.fa-xmark {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+    }
+</style>

web/src/components/main/PlaylistsComponent.vue

@@ -1,5 +1,5 @@
 <template>
     <div>
-        Hello World
+        <h1>Playlists</h1>
     </div>
 </template>

web/src/components/main/SmallPlayerComponent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+    const closed = defineModel<boolean>( {
+        'required': true
+    } );
+
+    const open = () => {
+        closed.value = true;
+    };
+</script>
+
+<template>
+    <div :class="['small-player', closed ? 'hidden' : undefined]" @click="open">
+        Player
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.small-player {
+    background-color: green;
+    width: 80vw;
+    height: 7vh;
+    position: fixed;
+    left: 10vw;
+    bottom: 15px;
+    border-radius: 4vh;
+    overflow: hidden;
+    transition: bottom 0.5s ease;
+    transition-delay: 0.75s;
+
+    &.hidden {
+        bottom: -8vh;
+        transition-delay: 0s;
+    }
+}
+</style>

web/src/components/player/QueueViewer.vue

@@ -5,12 +5,12 @@
         computed,
         ref
     } from 'vue';
-    import AddSong from './AddSong.vue';
+    import AddSong from '../popups/AddSong.vue';
     import type {
         Song
     } from '@/ts/dtype/playlist';
-    import SongEditor from './SongEditor.vue';
-    import SortableList from './SortableList.vue';
+    import SongEditor from '../popups/SongEditor.vue';
+    import SortableList from '../SortableList.vue';
     import {
         beautifyTime
     } from '@/ts/util/time';

web/src/components/popups/AddSong.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import DiskLoader from '@/composables/DiskLoader.vue';
     import ImportTypePicker from '@/composables/ImportTypePicker.vue';
-    import PopupElement from '@/components/PopupElement.vue';
+    import PopupElement from './PopupElement.vue';
     import player from '@/ts/player';
     import {
         sources