From 06f1e53fa10c1770931f7d19d09e6fc7d5edb2ab Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 19 Jan 2022 02:10:56 +0300
Subject: [PATCH] add a new playlist view header

---
 src/App.vue                                   |  26 +-
 src/assets/css/_variables.scss                |   1 +
 src/assets/css/global.scss                    |   8 +-
 src/components/AlbumView/Header.vue           |   8 +-
 src/components/FolderView/Header.vue          |   3 -
 src/components/FolderView/SongList.vue        |  25 +-
 src/components/LeftSidebar/Navigation.vue     |   6 +-
 src/components/PlaylistView/Header.vue        | 254 ++++++------------
 src/components/RightSideBar/NowPlaying.vue    |   2 +-
 .../RightSideBar/Recommendation.vue           |   2 +-
 src/components/RightSideBar/UpNext.vue        | 212 +++++++--------
 src/views/AlbumView.vue                       |   2 +-
 src/views/FolderView.vue                      |   2 +-
 src/views/PlaylistView.vue                    |  60 ++---
 14 files changed, 247 insertions(+), 364 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c3c3682..2f362e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,7 +63,7 @@ export default {
       collapsed.value = !collapsed.value;
     }
 
-    let up_next = ref(false);
+    let up_next = ref(true);
     let search = ref(false);
 
     const expandQueue = () => {
@@ -98,6 +98,18 @@ export default {
   display: flex;
   align-items: center;
   margin-bottom: 0.5rem;
+
+  #toggle {
+    position: absolute;
+    left: 0.2rem;
+    width: 4rem;
+    height: 100%;
+    background: url(./assets/icons/menu.svg);
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+  }
 }
 .logo {
   height: 2rem;
@@ -112,18 +124,6 @@ export default {
   animation-iteration-count: 1;
 }
 
-.l-container #toggle {
-  position: absolute;
-  left: 0.2rem;
-  width: 4rem;
-  height: 100%;
-  background: url(./assets/icons/menu.svg);
-  background-size: 50%;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-}
-
 .r-sidebar {
   &::-webkit-scrollbar {
     display: none;
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index 1ea250c..bdcc3b3 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -5,6 +5,7 @@ $red: #df4646;
 $blue: rgb(5, 80, 150);
 $green: rgb(67, 148, 67);
 $separator: #ffffff46;
+$pink: rgb(196, 58, 58);
 // sizes
 $small: .5em;
 $smaller: .25em;
\ No newline at end of file
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 7a96559..64e9f19 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -64,9 +64,13 @@ button {
   color: inherit;
   font-size: 1rem;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  background-color: $blue;
+  border-radius: $small;
 
   &:hover {
-    background-color: rgb(158, 58, 58) !important;
+    background-color: $pink !important;
   }
 }
 
@@ -231,7 +235,7 @@ button {
   width: 2rem;
   border-radius: 50%;
   background-color: #fff;
-  margin-top: 0rem;
+  margin-top: 0;
   background-size: 60%;
 }
 
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 7df6cec..b60daf8 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="album-h">
-    <div class="a-header rounded card-dark">
+    <div class="a-header rounded card-dark border">
       <div
         class="art rounded border"
         :style="{
@@ -12,7 +12,7 @@
           <div class="title">{{ album_info.name }}</div>
           <div class="artist">{{ album_info.artist }}</div>
         </div>
-        <div class="separator"></div>
+        <div class="separator no-border"></div>
         <div class="bottom">
           <div class="stats">
             {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
@@ -24,7 +24,7 @@
         </div>
       </div>
     </div>
-    <div class="right rounded card-dark">
+    <div class="right rounded card-dark border">
       <div class="circle circular"></div>
       <div class="rect rounded"></div>
       <div
@@ -61,6 +61,7 @@ export default {
   gap: $small;
   position: relative;
   overflow: hidden;
+  height: 15rem;
 
   .right {
     padding: $small;
@@ -132,7 +133,6 @@ export default {
 }
 .a-header {
   position: relative;
-  height: 14rem;
   overflow: hidden;
   display: flex;
   align-items: center;
diff --git a/src/components/FolderView/Header.vue b/src/components/FolderView/Header.vue
index 7db9ec8..a453c04 100644
--- a/src/components/FolderView/Header.vue
+++ b/src/components/FolderView/Header.vue
@@ -81,9 +81,6 @@ export default {
     height: 100%;
     width: 5em;
     background-color: rgb(5, 74, 131);
-    border-radius: $small;
-    display: flex;
-    align-items: center;
     padding-left: $small;
     margin-right: $small;
 
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 5fccf71..8695faf 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -47,20 +47,20 @@ export default {
     SongItem,
   },
   setup() {
-    let routex;
+    let route;
 
     const current = ref(perks.current);
     const search_query = ref(state.search_query);
-    // const route = useRouter();
 
     onMounted(() => {
-      routex = useRoute().name;
+      route = useRoute().name;
     });
 
     function updateQueue(song) {
       let type;
 
-      switch (routex) {
+      switch (route) {
+        // check which route the play request come from
         case "FolderView":
           type = "folder";
           break;
@@ -73,24 +73,7 @@ export default {
     }
 
     function loadAlbum(title, album_artist) {
-      // console.log(typeof(title), album_artist)
       routeLoader.toAlbum(title, album_artist);
-      // state.loading.value = true;
-
-      // album.getAlbumTracks(title, album_artist).then((data) => {
-      //   state.album_song_list.value = data.songs;
-      //   state.album_info.value = data.info;
-
-      //   route.push({
-      //     name: "AlbumView",
-      //     params: {
-      //       album: title,
-      //       artist: album_artist,
-      //     },
-      //   });
-      //   state.loading.value = false;
-      // });
-
     }
 
     return {
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 4c1de97..74e9395 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="side-nav-container" :class="{ collapsed: collapsed }">
+  <div class="side-nav-container border" :class="{ collapsed: collapsed }">
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="home-button">
         <div class="in">
@@ -93,7 +93,6 @@ export default {
 .side-nav-container {
   padding: $small;
   color: #fff;
-  border-top: 1px solid var(--separator);
   margin-bottom: 10px;
   padding-top: 10px;
 
@@ -112,8 +111,7 @@ export default {
     .nav-icon {
       height: 2rem;
       width: 2rem;
-      margin-right: 0.5rem;
-      margin-left: 0.6rem;
+      margin: 0 $small 0 $small;
       border-radius: $small;
       background-color: rgb(26, 24, 24);
     }
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index cb78253..39601bf 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -1,29 +1,24 @@
 <template>
-  <div class="p-header rounded">
-    <div class="info rounded">
-      <p class="name">Because I Got High Radio</p>
-      <p class="text">
-        The best music to fade to while doing my thing. Featuring artists like
-        Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
-      </p>
-      <div class="lower">
-        <div class="statistics">
-          <div class="count s-item"><p>45 Tracks</p></div>
-          <div class="duration s-item"><p>3 Hrs 45 Min</p></div>
-        </div>
-        <hr />
-        <div class="btns">
-          <div class="play s-item"><p>Play Now</p></div>
-          <div class="options s-item image"></div>
-        </div>
+  <div class="p-header rounded border">
+    <div class="info rounded card-dark">
+      <div>
+        <div class="name">Makaveli Radio</div>
+        <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
       </div>
-      <!--  -->
-      <div class="albums">
-        <div class="item third image"></div>
-        <div class="item second image"></div>
-        <div class="item first image"></div>
+      <div class="buttons">
+        <button class="play">
+          <div class="icon"></div>
+          Play
+        </button>
+        <button class="menu">
+          <div class="icon"></div>
+        </button>
       </div>
     </div>
+    <div class="last-updated">
+      Last updated yesterday |
+      <span class="edit">Edit</span>
+    </div>
   </div>
 </template>
 
@@ -32,162 +27,85 @@
   display: grid;
   grid-template-columns: 1fr;
   height: 15rem;
-  margin-bottom: 1em;
-  background: rgb(42, 46, 54);
-}
-
-.p-header hr {
-  border: none;
-}
-
-.p-header .info {
-  background-color: rgb(1, 5, 17);
-  padding: 0.5rem;
+  background-image: url("../../assets/images/eggs.jpg");
   position: relative;
-  overflow: hidden;
-}
 
-.p-header .info .name {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: 2rem;
-  font-weight: bold;
-  margin: 0.2em 0 0.5em 0;
-}
+  .last-updated {
+    position: absolute;
+    bottom: $small;
+    right: $small;
+    padding: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.699);
+    color: rgb(255, 255, 255);
+    font-size: 0.9rem;
+    border-radius: $smaller;
 
-.p-header .info .text {
-  margin: 0.5rem 1em 0.5rem 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 4em;
-}
+    .edit {
+      cursor: pointer;
+    }
+  }
 
-.p-header .banner {
-  margin: 0.5rem;
-  background-color: $blue;
-  background: url("../../assets/images/null.webp");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
+  .info {
+    position: absolute;
+    width: 25rem;
+    height: 10rem;
+    bottom: $small;
+    left: $small;
+    padding: $small;
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    padding-bottom: 3.5rem;
 
-.p-header .info .statistics {
-  display: flex;
-}
+    .name {
+      font-size: 1.5rem;
+      font-weight: bold;
 
-.p-header .info .count {
-  background: url(../../assets/icons/album.svg);
-}
+      &::before {
+        content: "😎 ";
+      }
+    }
 
-.p-header .info .duration {
-  background-image: url(../../assets/icons/clock.svg);
-}
+    .metrics {
+      margin-top: $small;
+      background-color: rgba(47, 55, 129, 0.233);
+      color: rgb(0, 60, 255);
+      padding: $small;
+      width: fit-content;
+      border-radius: $smaller;
+    }
 
-.p-header .info .s-item {
-  background-size: 1.2rem;
-  background-position: 10% 50%;
-  width: 9rem;
-  display: flex;
-  align-items: center;
-  font-weight: lighter;
-  margin-right: $small;
-  height: 2rem;
-  border: solid 1px rgba(255, 255, 255, 0.445);
-  border-radius: $small;
-  background-repeat: no-repeat;
-}
+    .buttons {
+      position: absolute;
+      bottom: $small;
+      left: $small;
+      display: flex;
+      gap: $small;
 
-.p-header .info .lower p {
-  margin-left: 2.5rem;
-}
+      .play {
+        width: 5rem;
+        height: 2.5rem;
+        padding: 0.25rem $small;
 
-.p-header .info .btns {
-  height: 2.5rem;
-  display: flex;
-}
+        .icon {
+          width: 1.5rem;
+          height: 1.5rem;
+          background-image: url("../../assets/icons/play.svg");
+          background-size: 1.5rem;
+          background-position: center;
+          margin-right: 0.25rem;
+        }
+      }
 
-.p-header .info .btns .play {
-  width: 8rem;
-  height: 100%;
-  background-color: $green;
-  border: none;
-  background-image: url(../../assets/icons/play.svg);
-}
-
-.p-header .info .btns .options {
-  width: 2.5rem;
-  height: 100%;
-  background-color: #0465a7;
-  border-radius: 50%;
-  background-image: url(../../assets/icons/options.svg);
-  background-size: 80%;
-  background-position: center;
-  border: none;
-  transition: all 0.5s ease;
-}
-
-.p-header .info .btns .options:hover {
-  transform: rotate(90deg);
-  transition: all 0.5s ease;
-  background-color: #2da8c7;
-}
-
-.p-header .info .albums {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 0.5rem;
-  position: absolute;
-  bottom: -0.5em;
-  right: -1em;
-}
-
-.p-header .info .albums .item {
-  height: 5em;
-  width: 5em;
-  background-color: $blue;
-  border-radius: $small;
-  transition: transform 1s;
-}
-
-.p-header .info .albums .first {
-  position: absolute;
-  transform: rotate(-30deg);
-  right: 0.5em;
-  bottom: 0em;
-  background-color: $red;
-  background-image: url("../../assets/images/null.webp");
-}
-
-.p-header .info .albums .second {
-  position: absolute;
-  transform: rotate(10deg);
-  right: 4em;
-  bottom: -1em !important;
-  background-color: $green;
-  background-image: url("../../assets/images/null.webp");
-  z-index: 1;
-}
-
-.p-header .info .albums .third {
-  position: absolute;
-  transform: rotate(-10deg);
-  bottom: -1em;
-  right: 9em;
-  background-color: $green;
-  background-image: url("../../assets/images/null.webp");
-  z-index: 2;
-}
-
-.p-header .info .albums .item:hover {
-  transition: transform .5s;
-  transform: scale(1.5);
-  cursor: pointer;
-  z-index: 3;
+      .menu {
+        width: 2.5rem;
+        height: 2.5rem;
+        background-image: url("../../assets/icons/options.svg");
+        background-size: 2rem;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue
index 95fd61e..cd70723 100644
--- a/src/components/RightSideBar/NowPlaying.vue
+++ b/src/components/RightSideBar/NowPlaying.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="now-playing">
+  <div class="now-playing border">
     <div class="art-tags">
       <div
         class="album-art image"
diff --git a/src/components/RightSideBar/Recommendation.vue b/src/components/RightSideBar/Recommendation.vue
index 7bfbfb2..a93a1e1 100644
--- a/src/components/RightSideBar/Recommendation.vue
+++ b/src/components/RightSideBar/Recommendation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="r-tracks rounded">
+  <div class="r-tracks rounded border">
     <p class="heading">SIMILAR TRACKS</p>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song">
diff --git a/src/components/RightSideBar/UpNext.vue b/src/components/RightSideBar/UpNext.vue
index aff5a6c..f6fd781 100644
--- a/src/components/RightSideBar/UpNext.vue
+++ b/src/components/RightSideBar/UpNext.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="up-next">
+  <div class="up-next border">
     <p class="heading">
       COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
     </p>
-    <div class="main-item h-1" @click="playNext">
+    <div class="main-item h-1 border" @click="playNext">
       <div
         class="album-art image"
         :style="{
@@ -22,39 +22,37 @@
     </div>
     <div>
       <div
-        :class="{ hr: is_expanded, v0x: !is_expanded, v1x: is_expanded }"
-        class="all-items"
+        :class="{ v0: !is_expanded, v1: is_expanded }"
+        class="scrollable border"
       >
-        <div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
+        <div
+          class="song-item h-1"
+          v-for="song in queue"
+          :key="song"
+          @click="playThis(song)"
+          :class="{
+            currentInQueue: current._id.$oid == song._id.$oid,
+          }"
+        >
           <div
-            class="song-item h-1"
-            v-for="song in queue"
-            :key="song"
-            @click="playThis(song)"
-            :class="{
-              currentInQueue: current._id.$oid == song._id.$oid,
+            class="album-art image"
+            :style="{
+              backgroundImage: `url(&quot;${song.image}&quot;)`,
             }"
           >
             <div
-              class="album-art image"
-              :style="{
-                backgroundImage: `url(&quot;${song.image}&quot;)`,
-              }"
-            >
-              <div
-                class="now-playing-track image"
-                v-if="current._id.$oid == song._id.$oid"
-                :class="{ active: is_playing, not_active: !is_playing }"
-              ></div>
-            </div>
-            <div class="tags">
-              <p class="title ellip">{{ song.title }}</p>
-              <hr />
-              <p class="artist ellip">
-                <span v-for="artist in putCommas(song.artists)" :key="artist">{{
-                  artist
-                }}</span>
-              </p>
+              class="now-playing-track image"
+              v-if="current._id.$oid == song._id.$oid"
+              :class="{ active: is_playing, not_active: !is_playing }"
+            ></div>
+          </div>
+          <div class="tags">
+            <div class="title ellip">{{ song.title }}</div>
+            <hr />
+            <div class="artist ellip">
+              <span v-for="artist in putCommas(song.artists)" :key="artist">{{
+                artist
+              }}</span>
             </div>
           </div>
         </div>
@@ -118,19 +116,10 @@ export default {
 
 <style lang="scss">
 .up-next .v0 {
-  max-height: 0em;
-  overflow: hidden;
+  max-height: 0;
   transition: max-height 0.5s ease;
-}
-
-.up-next .v0x {
-  background-color: transparent !important;
-  transition: all 0.5s ease;
-}
-
-.up-next .v1x {
-  transition: all .5s ease;
-  background-color: rgb(218, 72, 96);
+  visibility: hidden;
+  padding: 0;
 }
 
 .up-next .v1 {
@@ -139,7 +128,11 @@ export default {
   padding: $small;
 
   .currentInQueue {
-    background-color: rgba(0, 125, 241, 0.562);
+    border: 2px solid $pink;
+
+    &:hover {
+      color: #fff;
+    }
   }
 }
 
@@ -152,20 +145,20 @@ export default {
 
 .up-next .heading {
   position: relative;
-  margin: 0.5rem 0 1rem 0rem;
-}
+  margin: 0.5rem 0 1rem 0;
 
-.up-next > p > span {
-  position: absolute;
-  right: 0.5rem;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  user-select: none;
-}
+  span {
+    position: absolute;
+    right: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    user-select: none;
 
-.up-next > p > span:hover {
-  background: $blue;
-  cursor: pointer;
+    &:hover {
+      background: $blue;
+      cursor: pointer;
+    }
+  }
 }
 
 .up-next .main-item {
@@ -176,42 +169,36 @@ export default {
   cursor: pointer;
   margin-bottom: 0.5rem;
 
+  .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;
+    }
+  }
+
   &:hover {
     background-color: $blue;
   }
 }
 
-.up-next .main-item .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;
-}
-
-.up-next .main-item .tags hr {
-  border: none;
-  margin: 0.3rem;
-}
-
-.up-next .main-item .tags .title {
-  width: 20rem;
-  margin: 0;
-}
-
-.up-next .main-item .tags .artist {
-  width: 20rem;
-  margin: 0;
-  font-size: small;
-}
-
-.up-next .all-items {
-  padding-top: $small;
-  border-radius: 0.5rem;
-  padding: $small;
-}
-
-.up-next .all-items .scrollable {
+.up-next .scrollable {
   overflow-y: auto;
   background-color: $card-dark;
   border-radius: 0.5rem;
@@ -221,42 +208,37 @@ export default {
   }
 }
 
-.up-next .all-items p {
-  margin: 0;
-}
-
-.up-next .all-items .scrollable .song-item {
+.up-next .scrollable .song-item {
   display: flex;
   align-items: center;
   padding: 0.5rem;
   border-radius: 0.5rem;
-}
 
-.up-next .all-items .scrollable .song-item:hover {
-  cursor: pointer;
-  background-color: $blue;
-}
+  &:hover {
+    cursor: pointer;
+    background-color: $blue;
+  }
 
-.up-next .all-items .scrollable .song-item hr {
-  border: none;
-  margin: 0.1rem;
-}
+  hr {
+    border: none;
+    margin: 0.1rem;
+  }
 
-.up-next .all-items .album-art {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  .album-art {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  width: 3rem;
-  height: 3rem;
-  margin: 0 0.5rem 0 0;
-  border-radius: 0.5rem;
-  background-image: url(../../assets/images/null.webp);
-}
-
-.up-next .all-items .song-item .artist {
-  width: 20rem;
-  font-size: small;
-  color: rgba(255, 255, 255, 0.637);
+    width: 3rem;
+    height: 3rem;
+    margin: 0 0.5rem 0 0;
+    border-radius: 0.5rem;
+    background-image: url(../../assets/images/null.webp);
+  }
+  .artist {
+    width: 20rem;
+    font-size: small;
+    color: rgba(255, 255, 255, 0.637);
+  }
 }
 </style>
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index 7dccb5b..79fe9f7 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -4,7 +4,7 @@
       <Header :album_info="album_info" />
     </div>
     <div class="separator" id="av-sep"></div>
-    <div class="songs rounded">
+    <div class="songs rounded border">
       <SongList :songs="album_songs" />
     </div>
     <div class="separator" id="av-sep"></div>
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 51766bc..2dc5732 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -127,7 +127,7 @@ export default {
 }
 
 #scrollable {
-  overflow-y: scroll;
+  overflow-y: auto;
   height: calc(100% - $small);
   padding-right: $small;
 }
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index 886c5c5..8a7ff93 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -1,14 +1,13 @@
 <template>
-  <Header />
-  <div class="p-bg rounded">
-    <div class="clip">
-      <div class="scrollable">
-        <SongList :songs="songs"/>
-      </div>
-    </div>
-    <div class="f-artists-p">
-      <FeaturedArtists />
+  <div class="playlist-view rounded">
+    <Header :playlist_info="playlist_info" />
+    <div class="separator no-border"></div>
+
+    <div class="songlist rounded border">
+      <SongList :songs="songs" />
     </div>
+    <div class="separator no-border"></div>
+    <FeaturedArtists />
   </div>
 </template>
 
@@ -16,7 +15,7 @@
 import Header from "@/components/PlaylistView/Header.vue";
 import SongList from "@/components/FolderView/SongList.vue";
 import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
-
+import state from "@/composables/state.js";
 export default {
   components: {
     Header,
@@ -25,32 +24,33 @@ export default {
   },
   setup() {
     return {
-      songs: [],
+      songs: state.folder_song_list,
+      playlist_info: {
+        name: "Dax Radio",
+        count: state.folder_song_list.value.length,
+        duration: "0:00",
+        image: "../../assets/images/null.webp",
+        artist: "",
+        artist_image: "",
+      },
     };
   },
 };
 </script>
 
 <style lang="scss">
-.p-bg {
-  position: relative;
-  background: $card-dark;
-  height: calc(100% - 16em);
-  padding: $small;
-}
-
-.p-bg .clip {
-  height: calc(100% - 12em);
-  padding-bottom: $small;
-  border-bottom: solid 1px $separator;
-}
-
-.p-bg .scrollable {
-  height: 100%;
-  border-radius: $small;
-}
-
-.p-bg .f-artists-p {
+.playlist-view {
+  height: calc(100% - 1rem);
   margin-top: $small;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .songlist {
+    background-color: $card-dark;
+    padding: $small;
+    min-height: 100%;
+  }
 }
 </style>
\ No newline at end of file