redesign the album bio component

src/components/AlbumView/AlbumBio.vue

@@ -1,24 +1,44 @@
 <template>
-  <div class="al-bio rounded border">
-    <div class="left rounded border">
-      <div class="rect rounded"></div>
-      <div class="circle"></div>
+  <div class="al-bio rounded">
+    <div class="separator" id="av-sep"></div>
+    <div class="grid albumbio">
+      <div class="left rounded">
+        <img
+          class="rect rounded"
+          :src="paths.images.thumb + images.album"
+          alt=""
+        />
+        <div class="circle"></div>
+        <img class="circle" :src="paths.images.artist + images.artist" alt="" />
+      </div>
+      <div class="bio rounded border" v-html="bio" v-if="bio"></div>
+      <div class="bio rounded border" v-else>No bio found</div>
     </div>
-    <div class="bio rounded" v-html="bio"></div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { paths } from "@/config";
+
 defineProps<{
   bio: string;
+  images: {
+    artist: string;
+    album: string;
+  };
 }>();
 </script>
 
 <style lang="scss">
 .al-bio {
   padding: $small;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+
+  .albumbio {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $small;
+    min-height: 15rem;
+  }
 
   @include tablet-portrait {
     grid-template-columns: 1fr;
@@ -28,17 +48,14 @@ defineProps<{
     grid-template-columns: 1fr auto;
   }
 
-  gap: $small;
-  min-height: 15rem;
-
   .left {
     position: relative;
     height: 100%;
     width: 100%;
     margin-right: $small;
     overflow: hidden;
-    background-image: url("../../assets/images/eggs.jpg");
-    background-position: center;
+    border: solid 1px $gray5;
+    background-image: linear-gradient(37deg, $gray5 20%, $gray4);
 
     @include tablet-portrait {
       display: none;
@@ -52,36 +69,40 @@ defineProps<{
       width: 10rem;
       height: 10rem;
       position: absolute;
-      background-color: rgb(196, 58, 58);
-      box-shadow: 0 0 2rem rgb(0, 0, 0);
-      bottom: -10rem;
+      bottom: 0rem;
       left: 7rem;
-      transform: rotate(45deg) translate(-1rem, -9rem);
+      transform: rotate(15deg) translate(-1rem, 1rem);
       z-index: 1;
       transition: all 0.5s ease-in-out;
 
       &:hover {
+        transform: rotate(0deg) translate(-1rem, 0) scale(1.1);
         transition: all 0.5s ease-in-out;
       }
     }
 
     .circle {
+      position: absolute;
       width: 7rem;
       height: 7rem;
-      position: absolute;
-      right: 0;
-      background-color: $blue;
+      left: 15rem;
+      bottom: 0;
       border-radius: 50%;
-      transform: translateX(-11rem) translateY(7rem);
       box-shadow: 0 0 2rem rgb(0, 0, 0);
+      transition: all 0.25s ease-in-out;
+
+      &:hover {
+        transform: scale(1.5);
+      }
     }
   }
   .bio {
+    border: solid 1px $gray5;
     padding: $small;
     line-height: 1.5rem;
 
     &::after {
-      content: "...";
+      content: " ...";
     }
   }
 }

src/components/AlbumView/Header.vue

@@ -51,7 +51,7 @@ import useAlbumStore from "@/stores/pages/album";
 import { ref } from "vue";
 import { playSources } from "../../composables/enums";
 import { formatSeconds } from "../../composables/perks";
-import { paths } from "../../config";
+import { paths } from "@/config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 

src/components/FolderView/SongList.vue

@@ -98,7 +98,7 @@ function updateQueue(track: Track) {
 
 function getTracks() {
   if (props.on_album_page) {
-    let tracks = props.tracks.map((track, index) => {
+    let tracks = props.tracks.map((track) => {
       track.index = track.tracknumber;
       return track;
     });