🔷 add PlayingFrom component to right sidebar

🔷 move upNext card into separate component
🔷 a lot of refactors

src/components/RightSideBar/queue/upNext.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="main-item border" @click="playNext">
+    <div class="h">#Up_Next</div>
+    <div class="itemx  shadow">
+      <div
+        class="album-art image"
+        :style="{
+          backgroundImage: `url(&quot;${next.image}&quot;)`,
+        }"
+      ></div>
+      <div class="tags">
+        <p class="title ellip">{{ next.title }}</p>
+        <hr />
+        <p class="artist ellip">
+          <span v-for="artist in perks.putCommas(next.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Track } from "../../../interfaces";
+import perks from "../../../composables/perks";
+
+const props = defineProps<{
+  next: Track;
+  playNext: () => void;
+}>();
+</script>
+
+<style lang="scss">
+.main-item {
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  position: relative;
+
+  &:hover {
+    background-color: $accent;
+    border:  1px solid transparent;
+
+    .h {
+      background-color: $black;
+    }
+  }
+
+  .h {
+    position: absolute;
+    right: $small;
+    top: $small;
+    font-size: 0.9rem;
+    background-color: $accent;
+    padding: $smaller;
+    border-radius: 0.25rem;
+  }
+
+  .itemx {
+    display: flex;
+    align-items: center;
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    cursor: pointer;
+  }
+
+  .album-art {
+    width: 4.5rem;
+    height: 4.5rem;
+    background-image: url(../../assets/images/null.webp);
+    margin: 0 0.5rem 0 0;
+    border-radius: 0.5rem;
+  }
+
+  .tags {
+    hr {
+      border: none;
+      margin: 0.3rem;
+    }
+    .title {
+      width: 20rem;
+      margin: 0;
+    }
+    .artist {
+      width: 20rem;
+      margin: 0;
+      font-size: small;
+    }
+  }
+}
+</style>