🔷 add PlayingFrom component to right sidebar

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

src/components/RightSideBar/queue/playingFrom.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="playing-from" class="rounded" @click="goTo">
+  <div class="abs shadow-sm">Playing From</div>
+    <div class="h">
+      <div class="icon image" :class="from.type"></div>
+      {{ from.type }}
+    </div>
+    <div class="name">
+      <div id="to">
+        {{ from.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fromFolder, fromAlbum, fromPlaylist } from "../../../interfaces";
+import { FromOptions } from "../../../composables/enums";
+import { useRouter } from "vue-router";
+import { computed } from "@vue/reactivity";
+
+const props = defineProps<{
+  from: fromFolder | fromAlbum | fromPlaylist;
+}>();
+
+interface from {
+  type: string;
+  name: string;
+}
+
+const from = computed((): from => {
+  switch (props.from.type) {
+    case undefined:
+      return {
+        type: "album",
+        name: "Welcome to Alice",
+      };
+    case FromOptions.folder:
+      return {
+        type: "folder",
+        name: props.from.name,
+      };
+    case FromOptions.album:
+      return {
+        type: "album",
+        name: props.from.name,
+      };
+    case FromOptions.playlist:
+      return {
+        type: "playlist",
+        name: props.from.name,
+      };
+  }
+});
+
+const router = useRouter();
+
+function goToAlbum() {
+  router.push({
+    name: "AlbumView",
+    params: {
+      album: props.from.name,
+      artist: props.from.albumartist,
+    },
+  });
+}
+
+function goToFolder() {
+  router.push({
+    name: "FolderView",
+    params: {
+      path: props.from.path,
+    },
+  });
+}
+
+function goToPlaylist() {
+  router.push({
+    name: "PlaylistView",
+    params: {
+      pid: props.from.playlistid,
+    },
+  });
+}
+
+function goTo() {
+  switch (props.from.type) {
+    case FromOptions.folder:
+      goToFolder();
+      break;
+    case FromOptions.album:
+      goToAlbum();
+      break;
+    case FromOptions.playlist:
+      goToPlaylist();
+      break;
+  }
+}
+</script>
+
+<style lang="scss">
+#playing-from {
+  background: linear-gradient(-200deg, $gray4 40%, $red, $gray4);
+  background-size: 120%;
+  padding: 0.75rem;
+  margin-bottom: $small;
+  cursor: pointer;
+  position: relative;
+  transition: all .2s ease;
+
+  &:hover {
+    background-position: -4rem;
+  }
+
+  .abs {
+    position: absolute;
+    right: $small;
+    top: $small;
+    font-size: .9rem;
+    background-color: $gray;
+    padding: $smaller;
+    border-radius: .25rem;
+  }
+
+  .name {
+    text-transform: capitalize;
+    font-weight: bolder;
+  }
+
+  .h {
+    font-size: .9rem;
+    margin-bottom: $small;
+    display: flex;
+    align-items: center;
+    gap: $small;
+    text-transform: capitalize;
+    color: rgba(255, 255, 255, 0.664);
+
+    .icon {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+
+    .folder {
+      background-image: url("../../../assets/icons/folder.fill.svg") !important;
+    }
+
+    .album {
+      background-image: url("../../../assets/icons/album.svg") !important;
+    }
+
+    .playlist {
+      background-image: url("../../../assets/icons/playlist.svg") !important;
+    }
+  }
+}
+</style>

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>