add featured artists to playlist page

+ fetch album bio on raising bottom container

src/views/album/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page :onBottomRaised="fetchAlbumBio">
     <template #header>
       <Header :album="album.info" />
     </template>
@@ -13,18 +13,22 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
+import { onBeforeRouteUpdate, RouteLocationNormalized, RouteParams } from "vue-router";
 import useAStore from "@/stores/pages/album";
 
-import Page from "../layouts/HeaderContentBottom.vue";
+import Page from "@/layouts/HeaderContentBottom.vue";
 import Header from "./Header.vue";
 import Content from "./Content.vue";
 import Bottom from "./Bottom.vue";
+import { onBeforeUnmount } from "vue";
 
 const album = useAStore();
 
+function fetchAlbumBio(params: RouteParams) {
+  album.fetchBio(params.hash.toString());
+}
+
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
   await album.fetchTracksAndArtists(to.params.hash.toString());
-  album.fetchBio(to.params.hash.toString());
 });
 </script>

src/views/layouts/HeaderContentBottom.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="ap-container noscroll">
-    <div id="ap-page">
-      <header class="ap-page-header" ref="apheader">
-        <slot name="header"></slot>
-      </header>
-      <main class="ap-page-content">
-        <slot name="content"></slot>
-      </main>
-    </div>
-    <div
-      class="ap-page-bottom-container rounded"
-      ref="apbottomcontainer"
-      :class="{
-        bottomexpanded: bottomContainerRaised,
-      }"
-    >
-      <div class="click-to-expand" @click="toggleBottom">
-        <div>
-          <div class="arrow">↑</div>
-          <span>tap here</span>
-        </div>
-      </div>
-      <slot name="bottom"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import useVisibility from "../../composables/useVisibility";
-import useNavStore from "../../stores/nav";
-
-const nav = useNavStore();
-
-let elem: HTMLElement = null;
-let classlist: DOMTokenList = null;
-
-const apheader = ref<HTMLElement>(null);
-const apbottomcontainer = ref(null);
-const bottomContainerRaised = ref(false);
-
-onMounted(() => {
-  elem = document.getElementById("ap-page");
-  classlist = elem.classList;
-});
-
-function handleVisibilityState(state: boolean) {
-  resetBottomPadding();
-
-  nav.toggleShowPlay(state);
-}
-
-useVisibility(apheader, handleVisibilityState);
-
-function resetBottomPadding() {
-  if (bottomContainerRaised.value) return;
-
-  classlist.remove("addbottompadding");
-}
-
-function toggleBottom() {
-  bottomContainerRaised.value = !bottomContainerRaised.value;
-
-  if (bottomContainerRaised.value) {
-    classlist.add("addbottompadding");
-    return;
-  }
-
-  if (elem.scrollTop == 0) {
-    classlist.remove("addbottompadding");
-  }
-}
-</script>
-
-<style lang="scss">
-.ap-container {
-  height: 100%;
-  position: relative;
-  margin-right: -$small;
-
-  .ap-page-bottom-container {
-    position: absolute;
-    bottom: 0;
-    height: 15rem;
-    width: calc(100% - $small);
-    background-color: $gray;
-    transition: all 0.5s ease !important;
-    overscroll-behavior: contain;
-    display: grid;
-    grid-template-rows: 2rem 1fr;
-
-    .bottom-content {
-      overflow: hidden;
-      scroll-behavior: contain;
-    }
-
-    .click-to-expand {
-      height: 1.5rem;
-      display: flex;
-      align-items: center;
-      color: $gray1;
-
-      div {
-        margin: 0 auto;
-        font-size: small;
-        cursor: default;
-        user-select: none;
-        display: flex;
-        gap: $small;
-      }
-
-      .arrow {
-        max-width: min-content;
-        transition: all 0.2s ease-in-out;
-      }
-
-      &:hover {
-        color: $accent !important;
-      }
-    }
-  }
-
-  .bottomexpanded {
-    height: 32rem !important;
-    scroll-behavior: contain;
-
-    .arrow {
-      transform: rotate(180deg) !important;
-    }
-
-    .bottom-content {
-      overflow: auto !important;
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  .addbottompadding {
-    padding-bottom: 17rem;
-  }
-}
-
-#ap-page {
-  padding-right: $small;
-  height: 100%;
-  position: relative;
-  overflow: auto;
-  display: grid;
-  grid-template-rows: 18rem 1fr;
-  gap: 1rem;
-
-  .ap-page-content {
-    padding-bottom: 17rem;
-  }
-}
-</style>

src/views/playlist/index.vue

@@ -12,21 +12,29 @@
       />
     </template>
     <template #bottom>
-      <FeaturedArtists :artists="[]" />
+      <FeaturedArtists :artists="playlist.artists" />
     </template>
   </Page>
 </template>
 
 <script setup lang="ts">
-import Page from "../layouts/HeaderContentBottom.vue";
+import Page from "@/layouts/HeaderContentBottom.vue";
 
 import Header from "@/components/PlaylistView/Header.vue";
 import Content from "./Content.vue";
 import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
 
 import usePTrackStore from "@/stores/pages/playlist";
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const playlist = usePTrackStore();
+
+onMounted(() => {
+  playlist.fetchArtists(route.params.pid as string);
+});
+
 </script>
 
 <style lang="scss"></style>