add songs and featured artists to album view

src/components/AlbumView/SongList.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="folder" id="p-table">
+    <div class="table rounded"  ref="songtitle">
+      <table>
+        <tr>
+          <th>Track</th>
+          <th>Artist</th>
+          <th>Album</th>
+          <th v-if="songTitleWidth > minWidth">Duration</th>
+        </tr>
+        <tr v-for="song in songs" :key="song">
+          <td :style="{ width: songTitleWidth + 'px' }" class="flex">
+            <div class="album-art rounded image"></div>
+            <div>
+              <span class="ellipsis">{{ song.title }}</span>
+            </div>
+          </td>
+          <td :style="{ width: songTitleWidth + 'px' }">
+            <span class="artist" v-for="artist in song.artists" :key="artist">{{
+              artist
+            }}</span>
+          </td>
+          <td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
+          <td
+            :style="{ width: songTitleWidth + 'px' }"
+            v-if="songTitleWidth > minWidth"
+          >
+            {{ song.duration }}
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "@vue/reactivity";
+import { onMounted, onUnmounted } from "@vue/runtime-core";
+import Songs from "../../data/songs.js";
+
+export default {
+  setup() {
+    const songtitle = ref(null);
+    const songTitleWidth = ref(null);
+
+    const minWidth = ref(300);
+
+    const songs = Songs.songs;
+
+    const resizeSongTitleWidth = () => {
+      let a = songtitle.value.clientWidth;
+
+      songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
+    };
+
+    onMounted(() => {
+      resizeSongTitleWidth();
+      
+      window.addEventListener("resize", () => {
+        resizeSongTitleWidth();
+      });
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener("resize", () => {
+        resizeSongTitleWidth();
+      });
+    });
+
+    return { songtitle, songTitleWidth, songs, minWidth };
+  },
+};
+</script>
+
+<style lang="scss">
+#p-table {
+  height: calc(100% - 0rem) !important;
+  overflow: hidden;
+  padding-bottom: 0rem;
+
+  table {    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    th {
+      position: sticky;
+      background-color: rgb(58, 57, 57);
+      top: 0;
+      z-index: 5;
+    }
+  }
+}
+</style>

src/components/FolderView/SongList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <div class="table rounded" ref="songtitle">
-      <table>
+      <table class="rounded">
         <tr>
           <th>Track</th>
           <th>Artist</th>

src/components/PlaylistView/FeaturedArtists.vue

@@ -86,7 +86,7 @@ export default {
 .f-artists {
   position: relative;
   height: 12em;
-  width: calc(100% - 1em);
+  width: calc(100%);
   background-color: #1f1e1d;
   padding: $small;
   border-radius: $small;