add a HeaderContentBottom layout

- rewrite album page to use the above layout

src/assets/css/global.scss

@@ -54,6 +54,10 @@ a {
   border: none;
 }
 
+.noscroll {
+  overflow: hidden;
+}
+
 .card-dark {
   background-color: #fff;
 }

src/router/index.js

@@ -4,7 +4,7 @@ import useFStore from "@/stores/pages/folder";
 import usePTrackStore from "@/stores/pages/playlist";
 import usePStore from "@/stores/pages/playlists";
 import AlbumsExplorer from "@/views/AlbumsExplorer.vue";
-import AlbumView from "@/views/AlbumView.vue";
+import AlbumView from "@/views/album/index.vue";
 import ArtistsExplorer from "@/views/ArtistsExplorer.vue";
 import FolderView from "@/views/FolderView.vue";
 import Home from "@/views/Home.vue";

src/views/AlbumView.vue

@@ -1,183 +0,0 @@
-<template>
-  <div class="al-view rounded">
-    <div class="al-content" id="albumcontent">
-      <div>
-        <Header :album="album.info" @resetBottomPadding="resetBottomPadding" />
-      </div>
-      <div class="songs rounded">
-        <SongList :tracks="album.tracks" :on_album_page="true" />
-      </div>
-      <div
-        id="bottom-items"
-        class="rounded"
-        ref="albumbottomcards"
-        :class="{
-          bottomexpanded: bottomContainerRaised,
-        }"
-      >
-        <div class="click-to-expand" @click="toggleBottom">
-          <div>
-            <div class="arrow">↑</div>
-            <span>tap here</span>
-          </div>
-        </div>
-        <div class="bottom-content">
-          <FeaturedArtists :artists="album.artists" />
-          <div v-if="album.bio">
-            <div class="separator" id="av-sep"></div>
-            <AlbumBio :bio="album.bio" />
-          </div>
-          <div class="dummy"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Header from "../components/AlbumView/Header.vue";
-import AlbumBio from "../components/AlbumView/AlbumBio.vue";
-
-import SongList from "../components/FolderView/SongList.vue";
-import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
-import useAStore from "../stores/pages/album";
-import { onBeforeRouteUpdate } from "vue-router";
-import { onMounted, ref } from "vue";
-
-const album = useAStore();
-const albumbottomcards = ref<HTMLElement>(null);
-const bottomContainerRaised = ref(false);
-let elem: HTMLElement = null;
-let classlist: DOMTokenList = null;
-
-onMounted(() => {
-  elem = document.getElementById("albumcontent");
-  classlist = elem.classList;
-});
-
-onBeforeRouteUpdate(async (to) => {
-  await album.fetchTracksAndArtists(to.params.hash.toString());
-  album.fetchBio(to.params.hash.toString());
-});
-
-/**
- * Toggles the state of the bottom container. Adds the `addbottompadding` class that adds a bottom padding to the album content div.
- */
-function toggleBottom() {
-  bottomContainerRaised.value = !bottomContainerRaised.value;
-
-  if (bottomContainerRaised.value) {
-    classlist.add("addbottompadding");
-    return;
-  }
-
-  if (elem.scrollTop == 0) {
-    classlist.remove("addbottompadding");
-  }
-}
-
-/**
- * Called when the album page header gets into the viewport.
- * Removes the bottom padding which was added when you expand the bottom container.
- */
-function resetBottomPadding() {
-  if (bottomContainerRaised.value) return;
-
-  classlist.remove("addbottompadding");
-}
-</script>
-
-<style lang="scss">
-.al-view {
-  height: 100%;
-  position: relative;
-  margin-right: -$small;
-  overflow: hidden;
-
-  .al-content {
-    height: 100%;
-    overflow: auto;
-    padding-bottom: 17rem;
-    padding-right: $small;
-    transition: all 0.5s;
-    z-index: -1 !important;
-  }
-
-  .addbottompadding {
-    padding-bottom: 37rem;
-  }
-
-  .songs {
-    min-height: calc(100% - 31.5rem);
-    margin-top: $small;
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  #av-sep {
-    border: none;
-  }
-
-  #bottom-items {
-    position: absolute;
-    bottom: 0;
-    width: calc(100% - $small);
-    height: 15rem;
-    background-color: $gray;
-    transition: all 0.5s ease;
-    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;
-      }
-    }
-  }
-}
-</style>

src/views/album/Bottom.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="bottom-content">
+    <FeaturedArtists :artists="artists" />
+    <div v-if="bio">
+      <div class="separator" id="av-sep"></div>
+      <AlbumBio :bio="bio" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Artist } from "@/interfaces";
+import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
+import AlbumBio from "@/components/AlbumView/AlbumBio.vue";
+
+defineProps<{
+  artists: Artist[];
+  bio: string | null;
+}>();
+</script>
+
+<style lang="scss"></style>

src/views/album/Content.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="songs rounded">
+    <SongList :tracks="tracks" :on_album_page="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Track } from "@/interfaces";
+import SongList from "@/components/FolderView/SongList.vue";
+
+defineProps<{
+  tracks: Track[];
+}>();
+</script>

src/views/album/Header.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <Header :album="album" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from "@/components/AlbumView/Header.vue";
+import { AlbumInfo } from "@/interfaces";
+
+defineProps<{
+  album: AlbumInfo;
+}>();
+</script>

src/views/album/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <Page>
+    <template #header>
+      <Header :album="album.info" />
+    </template>
+    <template #content>
+      <Content :tracks="album.tracks" />
+    </template>
+    <template #bottom>
+      <Bottom :artists="album.artists" :bio="album.bio" />
+    </template>
+  </Page>
+</template>
+
+<script setup lang="ts">
+import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
+import useAStore from "@/stores/pages/album";
+
+import Page from "../layouts/HeaderContentBottom.vue";
+import Header from "./Header.vue";
+import Content from "./Content.vue";
+import Bottom from "./Bottom.vue";
+
+const album = useAStore();
+
+onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
+  await album.fetchTracksAndArtists(to.params.hash.toString());
+  album.fetchBio(to.params.hash.toString());
+});
+</script>

src/views/layouts/HeaderContentBottom.vue

@@ -0,0 +1,159 @@
+<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;
+
+  .ap-page-content {
+    padding-bottom: 17rem;
+  }
+}
+</style>