[client] add playlists and playlist page

src/views/PlaylistView.vue

@@ -1,40 +1,29 @@
 <template>
   <div class="playlist-view">
-    <Header :playlist_info="playlist_info" />
+    <Header :info="info" />
     <div class="separator no-border"></div>
 
     <div class="songlist rounded">
-      <SongList :songs="songs" />
+      <SongList :songs="playlist.tracks" />
     </div>
     <div class="separator no-border"></div>
     <FeaturedArtists />
   </div>
 </template>
 
-<script>
-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";
-export default {
-  components: {
-    Header,
-    SongList,
-    FeaturedArtists,
-  },
-  setup() {
-    return {
-      songs: state.queue,
-      playlist_info: {
-        name: "Dax Radio",
-        count: state.folder_song_list.value.length,
-        duration: "0:00",
-        image: "../../assets/images/null.webp",
-        artist: "",
-        artist_image: "",
-      },
-    };
-  },
+<script setup lang="ts">
+import Header from "../components/PlaylistView/Header.vue";
+import SongList from "../components/FolderView/SongList.vue";
+import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
+import usePTrackStore from "../stores/p.ptracks";
+
+const playlist = usePTrackStore().playlist;
+
+const info = {
+  name: playlist.name,
+  count: playlist.tracks.length,
+  duration: "3 hours, 4 minutes",
+  lastUpdated: "yesterday",
 };
 </script>
 

src/views/Playlists.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="p-view">
+    <div class="grid">
+      <PlaylistCard
+        v-for="p in pStore.playlists"
+        :key="p.playlistid"
+        :playlist="p"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PlaylistCard from "../components/playlists/PlaylistCard.vue";
+
+import usePStore from "../stores/playlists";
+const pStore = usePStore();
+</script>
+
+<style lang="scss">
+#p-view {
+  margin: $small;
+  padding: $small;
+  overflow: auto;
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    gap: 1rem;
+  }
+}
+</style>