🔷 add PlayingFrom component to right sidebar

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

src/components/RightSideBar/Home/Main.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="r-home">
-   <Recommendations />
+    <UpNext :next="queue.next" :playNext="queue.playNext" />
+    <Recommendations />
   </div>
 </template>
 
 <style lang="scss">
 .r-home {
   height: calc(100% - 1rem);
-  // padding: 0 $small $small 0;
+  padding: 0 $small $small 0;
+  margin-top: $small;
 }
 </style>
 
-<script setup>
-import Recommendations from '../Recommendation.vue';
-</script>
+<script setup lang="ts">
+import Recommendations from "../Recommendation.vue";
+import UpNext from "../queue/upNext.vue";
+import useQStore from "../../../stores/queue";
+const queue = useQStore();
+</script>

src/components/RightSideBar/Queue.vue

@@ -1,28 +1,8 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <div class="main-item border">
-        <p class="heading">COMING UP NEXT</p>
-        <div class="itemx" @click="queue.playNext">
-          <div
-            class="album-art image"
-            :style="{
-              backgroundImage: `url(&quot;${queue.next.image}&quot;)`,
-            }"
-          ></div>
-          <div class="tags">
-            <p class="title ellip">{{ queue.next.title }}</p>
-            <hr />
-            <p class="artist ellip">
-              <span
-                v-for="artist in putCommas(queue.next.artists)"
-                :key="artist"
-                >{{ artist }}</span
-              >
-            </p>
-          </div>
-        </div>
-      </div>
+      <PlayingFrom :from="queue.from" />
+      <UpNext :next="queue.next" :playNext="queue.playNext" />
       <div class="scrollable-r border rounded">
         <TrackItem
           v-for="t in queue.tracks"
@@ -38,16 +18,14 @@
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
 import TrackItem from "../shared/TrackItem.vue";
 import useQStore from "../../stores/queue";
 import { Track } from "../../interfaces.js";
-import { onBeforeMount } from "vue";
+import PlayingFrom from "./queue/playingFrom.vue";
+import UpNext from "./queue/upNext.vue";
 
 const queue = useQStore();
 
-const putCommas = perks.putCommas;
-
 function playThis(track: Track) {
   queue.play(track);
 }
@@ -64,53 +42,11 @@ function playThis(track: Track) {
     margin: 0.5rem 0 1rem 0;
   }
 
-  .main-item {
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-
-    .itemx {
-      display: flex;
-      align-items: center;
-      padding: 0.5rem;
-      cursor: pointer;
-      border-radius: 0.5rem;
-
-      &:hover {
-        background-color: $gray;
-      }
-    }
-
-    .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;
-      }
-    }
-  }
-
   .r-grid {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: min-content;
+    grid-template-rows: max-content max-content 1fr;
 
     .scrollable-r {
       height: 100%;

src/components/RightSideBar/Recommendation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="r-tracks rounded border">
-    <p class="heading">SIMILAR TRACKS</p>
+    <div class="heading">Similar Tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song">
         <div class="album-art image"></div>
@@ -37,8 +37,13 @@ export default {
 
 <style lang="scss">
 .r-tracks {
-  margin: 0.5rem 0.5rem 0.5rem 0;
+  margin: 0.5rem 0 0.5rem 0;
   padding: 0.5rem;
+
+  .heading {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem !important;
+  }
 }
 
 .r-tracks .tracks .song-item {

src/components/RightSideBar/Search.vue

@@ -170,7 +170,6 @@ search.$subscribe((mutation, state) => {
     padding: $medium;
     border-radius: $small;
     margin-bottom: $small;
-    text-align: center !important;
     font-size: 2rem;
     color: $white;
   }

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>