server: add get album bio from last fm function

- co-written by Github Copilot

src/components/PlaylistView/FeaturedArtists.vue

@@ -5,7 +5,7 @@
       <div class="next" @click="scrollRight"></div>
     </div>
     <div class="artists" ref="artists_dom" v-on:mouseover="scrollArtists">
-      <div class="artist c1">
+      <div class="artist c1 image">
         <div class="blur"></div>
         <div class="s2"></div>
         <p>Featured Artists</p>
@@ -74,7 +74,7 @@ export default {
 <style lang="scss">
 .f-artists {
   position: relative;
-  height: 13em;
+  height: 15em;
   width: calc(100%);
   background-color: $card-dark;
   padding: $small;
@@ -143,69 +143,69 @@ export default {
   margin-left: $smaller;
   margin-right: $smaller;
   width: 9em;
-  height: 9em;
+  height: 11em;
   border-radius: $small;
   background-color: #0f0e0e;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.5s ease-in-out;
   cursor: pointer;
+  border: solid 1px rgba(165, 151, 151, 0.055);
 
   .artist-image {
     width: 7em;
     height: 7em;
-    margin-left: 0.5em;
     border-radius: 50%;
     margin-bottom: $small;
     background: url(../../assets/images/girl1.jpg);
-    background-size: cover;
+    background-size: 7rem 7rem;
     background-repeat: no-repeat;
     background-position: center;
+    transition: all 0.75s ease-in-out;
+    border: solid 1px rgba(165, 151, 151, 0.055);
+    box-shadow: 0px 0px 80px rgb(0, 0, 0);
+  }
+
+  &:hover {
+    .artist-image {
+      background-position: 50% 20%;
+      border-radius: 20%;
+      background-size: 10rem 10rem;
+    }
   }
 
   .artist-name {
     margin: 0;
     text-align: center;
-    font-size: small;
-    width: 10em;
-  }
-  &:hover {
-    transform: translateY(-0.5em);
-    transition: all 0.5s ease-in-out;
+    font-size: 0.9rem;
+    font-weight: 510;
+    max-width: 7rem;
   }
 }
 
 .f-artists .c1 {
   position: relative;
-  background: rgb(16, 25, 51);
-  width: 15em;
+  background-size: 400px 11rem;
+  background-position: 100%;
 
-  &:hover > .s2 {
-    background: rgba(53, 53, 146, 0.8);
-    transition: all 0.5s ease;
-    width: 12em;
-    height: 12em;
+  background-image: linear-gradient(
+    320deg,
+    hsl(0deg 3% 6%) 13%,
+    hsl(211deg 81% 23%) 50%,
+    hsl(209deg 94% 30%) 87%
+  );
+
+  transition: all 0.75s ease-in-out;
+
+  &:hover {
+    background-position: 10%;
   }
 
   p {
-    position: absolute;
-    bottom: -2rem;
-    margin-left: 0.5rem;
-    font-size: 2rem;
+    margin-left: 1rem;
+    font-size: 1.5rem;
     font-weight: 700;
-    color: #ffffff;
-  }
-
-  .s2 {
-    position: absolute;
-    left: -2em;
-    bottom: -4em;
-    width: 10em;
-    height: 10em;
-    background: rgba(53, 53, 146, 0.445);
-    border-radius: 50%;
-    transition: all 0.5s ease;
+    text-shadow: 0px 0px 80px rgb(0, 0, 0);
   }
 }
 </style>

src/components/PlaylistView/SongList.vue

@@ -1,94 +0,0 @@
-<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>