chore: refactor vue components

web/src/views/AppView.vue

@@ -1,28 +1,13 @@
 <script setup lang="ts">
-    import {
-        queue,
-        queueIdx
-    } from '@/ts/player/state';
-    import CurrentSong from '@/components/CurrentSong.vue';
-    import PlayerControls from '@/components/PlayerControls.vue';
-    import QueueViewer from '@/components/QueueViewer.vue';
+    import PlayerWrapper from '@/components/main/PlayerWrapper.vue';
+    import PlaylistsComponent from '@/components/main/PlaylistsComponent.vue';
+
 </script>
 
 <template>
     <div class="main-app">
-        <div
-            class="panel"
-        >
-            <div style="margin-bottom: 20px; width: 100%;">
-                <CurrentSong
-                    v-model="queue[queueIdx]"
-                />
-            </div>
-            <PlayerControls />
-        </div>
-        <div class="panel">
-            <QueueViewer />
-        </div>
+        <PlaylistsComponent />
+        <PlayerWrapper />
     </div>
 </template>
 
@@ -34,16 +19,5 @@
     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>