add new album header

src/components/RightSideBar/Main.vue

@@ -47,7 +47,9 @@ function changeTab(tab) {
     setTimeout(() => {}, 300);
   }).then(() => {
     if (tab === tabs.queue) {
-      perks.focusCurrent();
+      setTimeout(() => {
+        perks.focusCurrent();
+      }, 300);
     }
   });
 }

src/components/RightSideBar/NowPlaying.vue

@@ -32,7 +32,7 @@
         <Progress/>
       </div>
     </div>
-    <div class="c-wrapper border rounded">
+    <div class="c-wrapper rounded">
       <div class="controls">
         <div class="shuffle">
           <div class="image"></div>
@@ -89,7 +89,7 @@ export default {
   border-radius: 0.5rem;
   height: 13.5rem;
   padding: 0.5rem;
-  background: $card-dark;
+  // background: rgba(255, 255, 255, 0.055);
   display: grid;
   grid-template-rows: 3fr 1fr;
 

src/components/RightSideBar/Queue.vue

@@ -19,9 +19,9 @@
           </p>
         </div>
       </div>
-        <div class="scrollable-r border rounded">
-          <TrackItem v-for="song in queue" :key="song.track_id" :track="song" />
-        </div>
+      <div class="scrollable-r border rounded">
+        <TrackItem v-for="song in queue" :key="song.track_id" :track="song" />
+      </div>
     </div>
   </div>
 </template>
@@ -34,30 +34,14 @@ import { watch } from "@vue/runtime-core";
 import TrackItem from "../shared/TrackItem.vue";
 
 export default {
-  props: ["up_next"],
-  setup(props, { emit }) {
-    const is_expanded = toRefs(props).up_next;
+  setup() {
     const queue = ref(perks.queue);
     const next = ref(perks.next);
 
-    let collapse = () => {
-      emit("expandQueue");
-    };
-
-    watch(is_expanded, (newVal) => {
-      if (newVal) {
-        setTimeout(() => {
-          perks.focusCurrent();
-        }, 1000);
-      }
-    });
-
     const { playNext } = audio;
 
     const putCommas = perks.putCommas;
     return {
-      collapse,
-      is_expanded,
       playNext,
       putCommas,
       queue,