🔷 refactor context menu to accept context src

🔷 add a getCurrentDate function to get formatted date

src/views/PlaylistView.vue

@@ -4,11 +4,23 @@
     <div class="separator no-border"></div>
 
     <div class="songlist rounded">
-      <SongList
-        :tracks="playlist.tracks"
-        :pname="playlist.info.name"
-        :playlistid="playlist.info.playlistid"
-      />
+      <div v-if="playlist.tracks.length">
+        <SongList
+          :tracks="playlist.tracks"
+          :pname="playlist.info.name"
+          :playlistid="playlist.info.playlistid"
+        />
+      </div>
+      <div v-else-if="playlist.tracks.length === 0 && playlist.info.count > 0">
+        <div class="no-results">
+          <div class="text">We can't find your music 🦋</div>
+        </div>
+      </div>
+      <div v-else-if="playlist.tracks.length === 0 && playlist.info.count == 0">
+        <div class="no-results">
+          <div class="text">Nothing here</div>
+        </div>
+      </div>
     </div>
     <div class="separator no-border"></div>
     <FeaturedArtists />

src/views/Playlists.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="p-view">
     <div class="grid">
+      <NewPlaylistCard />
       <PlaylistCard
         v-for="p in pStore.playlists"
         :key="p.playlistid"
@@ -14,6 +15,7 @@
 import PlaylistCard from "../components/playlists/PlaylistCard.vue";
 
 import usePStore from "../stores/playlists";
+import NewPlaylistCard from "../components/playlists/NewPlaylistCard.vue";
 const pStore = usePStore();
 </script>
 
@@ -22,10 +24,12 @@ const pStore = usePStore();
   margin: $small;
   padding: $small;
   overflow: auto;
+  scrollbar-color: $gray2 transparent;
+  border-top: 1px solid $gray3;
 
   .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     gap: $small;
   }
 }