server: better structure album tracks endpoint

- client: add now-playing and recommendations to home right-sidebar

src/components/FolderView/SongList.vue

@@ -14,7 +14,7 @@
         <tbody>
           <SongItem
             v-for="(song, index) in props.songs"
-            :key="song.id"
+            :key="song"
             :song="song"
             :index="index + 1"
             @updateQueue="updateQueue"
@@ -46,8 +46,8 @@ import state from "@/composables/state.js";
 const props = defineProps({
   songs: {
     type: Array,
-    required: true,
-  },
+    required: true
+  }
 });
 
 let route;
@@ -159,4 +159,4 @@ table {
     }
   }
 }
-</style>
+</style>

src/components/RightSideBar/Home/Main.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="r-home image">
-   
+  <div class="r-home">
+   <NowPlaying />
+   <Recommendations />
   </div>
 </template>
 
@@ -8,7 +9,10 @@
 .r-home {
   height: 100%;
   width: 31rem;
-  background-image: url("https://pro2-bar-s3-cdn-cf2.myportfolio.com/a534e2586a621751e93466e77f5228be/d686c78b-9cd7-4eeb-a660-69cfaf7e4cac_rw_600.gif");
-  color: transparent;
 }
 </style>
+
+<script setup>
+import NowPlaying from '../NowPlaying.vue';
+import Recommendations from '../Recommendation.vue';
+</script>

src/components/RightSideBar/NowPlaying.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="now-playing border">
     <div class="art-tags">
+      <div class="duration">{{ current.length }}</div>
       <div
-        class="album-art image"
+        class="album-art image border"
         :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
@@ -21,8 +22,9 @@
       </div>
     </div>
     <div class="progress">
-      <div class="duration">{{ current.length }}</div>
-      <Progress />
+      <div class="prog">
+        <Progress />
+      </div>
     </div>
     <div class="controls">
       <div class="shuffle">
@@ -81,8 +83,7 @@ export default {
 <style lang="scss">
 .now-playing {
   border-radius: 0.5rem;
-  height: 14rem;
-  margin-top: 0.5rem;
+  height: 15rem;
   padding: 0.5rem;
   background: $card-dark;
   display: grid;
@@ -91,6 +92,14 @@ export default {
   .art-tags {
     display: flex;
     align-items: center;
+    position: relative;
+
+    .duration {
+      position: absolute;
+      bottom: $small;
+      right: 0;
+      font-size: .9rem;
+    }
 
     hr {
       border: none;
@@ -106,16 +115,15 @@ export default {
     #artist {
       font-size: small;
       width: 22rem;
-      color: rgba(255, 255, 255, 0.712);
+      color: $highlight-blue;
     }
 
     .album-art {
-      width: 6rem;
-      height: 6rem;
+      width: 7rem;
+      height: 7rem;
       border-radius: 0.5rem;
       margin-right: 0.5rem;
       margin-left: $small;
-      // background-color: #ad1717a8;
       background-image: url("../../assets/images/null.webp");
     }
   }

src/components/RightSideBar/Queue.vue

@@ -19,11 +19,9 @@
           </p>
         </div>
       </div>
-      <div class="scrl border rounded">
-        <div class="scrollable-r">
+        <div class="scrollable-r border rounded">
           <TrackItem v-for="song in queue" :key="song.id" :track="song" />
         </div>
-      </div>
     </div>
   </div>
 </template>
@@ -122,17 +120,10 @@ export default {
 
   .r-grid {
     position: relative;
-    height: calc(100% - 2rem);
-    overflow: hidden;
-    width: 100%;
+    height: 100%;
     display: grid;
-    grid-template-rows: min-content 1fr;
-    padding-bottom: $small;
-
-    .scrl {
-      overflow: hidden;
-      height: 100%;
-    }
+    grid-template-rows: min-content;
+    padding-bottom: 2.5rem;
 
     .scrollable-r {
       height: 100%;

src/components/RightSideBar/Recommendation.vue

@@ -18,6 +18,10 @@
 export default {
   setup() {
     const songs = [
+      {
+        title: "Imagine",
+        artist: "John Lennon",
+      },
       {
         title: "Mockingbird",
         artist: "Eminem",
@@ -73,4 +77,4 @@ export default {
 .r-tracks .tracks .song-item .title {
   margin: 0;
 }
-</style>
+</style>