redesign the album bio component

src/assets/css/global.scss

@@ -58,6 +58,10 @@ a {
   overflow: hidden;
 }
 
+.grid {
+  display: grid;
+}
+
 .card-dark {
   background-color: #fff;
 }

src/components/AlbumView/AlbumBio.vue

@@ -1,24 +1,44 @@
 <template>
-  <div class="al-bio rounded border">
+  <div class="al-bio rounded">
-    <div class="left rounded border">
+    <div class="separator" id="av-sep"></div>
-      <div class="rect rounded"></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;
+
+  .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");
+    border: solid 1px $gray5;
-    background-position: center;
+    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);
+      bottom: 0rem;
-      box-shadow: 0 0 2rem rgb(0, 0, 0);
-      bottom: -10rem;
       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;
+      left: 15rem;
-      right: 0;
+      bottom: 0;
-      background-color: $blue;
       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;
     });

src/router/index.js

@@ -18,6 +18,7 @@ const routes = [
     path: "/",
     name: "Home",
     component: Home,
+    redirect: '/folder/$home'
   },
   {
     path: "/folder/:path",

src/stores/pages/album.ts

@@ -22,7 +22,7 @@ export default defineStore("album", {
     info: <AlbumInfo>{},
     tracks: <Track[]>[],
     artists: <Artist[]>[],
-    bio: null,
+    bio: "HELLBOY is the fourth & final mixtape by Lil Peep, released on September 25, 2016. The mixtape caught people’s attention, pushing him into the mainstream light. The title HELLBOY is a reference to the animated movie Hellboy Animated: Blood and Iron, as Peep explains in a GQ interview. This album’s title was explained by Smokeasac, who produced many songs on this album: 'I remember when we made “Hellboy”. He explained to me why he chose the name. He explained that it was because he knew that “Hellboy” came off as intimidating and scary to some but it was because he ",
   }),
   actions: {
     /**

src/views/album/Bottom.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="bottom-content">
     <FeaturedArtists :artists="artists" />
-    <div v-if="bio">
+
-      <div class="separator" id="av-sep"></div>
+    <AlbumBio :bio="bio" :images="{ album: image, artist: artists[0].image }" />
-      <AlbumBio :bio="bio" />
-    </div>
   </div>
 </template>
 
@@ -16,6 +14,7 @@ import AlbumBio from "@/components/AlbumView/AlbumBio.vue";
 defineProps<{
   artists: Artist[];
   bio: string | null;
+  image: string;
 }>();
 </script>
 

src/views/album/index.vue

@@ -7,14 +7,22 @@
       <Content :tracks="album.tracks" />
     </template>
     <template #bottom>
-      <Bottom :artists="album.artists" :bio="album.bio" />
+      <Bottom
+        :artists="album.artists"
+        :bio="album.bio"
+        :image="album.info.image"
+      />
     </template>
   </Page>
 </template>
 
 <script setup lang="ts">
 import useAStore from "@/stores/pages/album";
-import { onBeforeRouteUpdate, RouteLocationNormalized, RouteParams } from "vue-router";
+import {
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+  RouteParams,
+} from "vue-router";
 
 import Page from "@/layouts/HeaderContentBottom.vue";
 import Bottom from "./Bottom.vue";