feat: redesign main page, get player working (mostly) with Apple Music source

web/src/views/AppView.vue

@@ -1,14 +1,26 @@
 <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';
 </script>
 
 <template>
     <div class="main-app">
-        <div class="player-controls">
+        <div
+            class="panel"
+        >
+            <div style="margin-bottom: 20px; width: 100%;">
+                <CurrentSong
+                    v-model="queue[queueIdx]"
+                />
+            </div>
             <PlayerControls />
         </div>
-        <div class="song-queue">
+        <div class="panel">
             <QueueViewer />
         </div>
     </div>
@@ -17,17 +29,21 @@
 <style lang="scss" scoped>
 .main-app {
     width: 100%;
+    height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
+    flex-direction: row;
 
-    .player-controls {
-        width: 60%;
-    }
-
-    .song-queue {
-        width: 80%;
+    .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>