fix scrollbars being hidden when sidebar is disabled on firefox

+ rename components, to follow vue style guides

src/views/AlbumView/Bottom.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="bottom-content">
+    <FeaturedArtists :artists="artists" />
+
+    <AlbumBio
+      :bio="bio"
+      :images="{ album: image, artist: artists[0]?.image }"
+    />
+  </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;
+  image: string;
+}>();
+</script>
+
+<style lang="scss"></style>

src/views/AlbumView/Content.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="album-tracks rounded">
+    <div v-for="(disc, key) in discs" class="album-disc">
+      <SongList
+        :key="key"
+        :tracks="disc"
+        :on_album_page="true"
+        :disc="key"
+        :copyright="isLastDisc(key) ? copyright : null"
+        @playFromPage="playFromAlbumPage"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// @stores
+import useQueueStore from "@/stores/queue";
+import useAlbumStore from "@/stores/pages/album";
+
+// @utils
+import { Track } from "@/interfaces";
+
+// @components
+import SongList from "@/components/FolderView/SongList.vue";
+
+// @setup
+
+const props = defineProps<{
+  discs: {
+    [key: string]: Track[];
+  };
+  copyright?: string;
+}>();
+
+const queue = useQueueStore();
+const album = useAlbumStore();
+
+// check if the disc is the last disc
+const isLastDisc = (disc: string | number) => {
+  const discs = Object.keys(props.discs);
+  return discs[discs.length - 1] === disc;
+};
+
+function playFromAlbumPage(index: number) {
+  const { title, artist, hash } = album.info;
+  queue.playFromAlbum(title, artist, hash, album.allTracks);
+  queue.play(index);
+}
+</script>
+
+<style lang="scss">
+.album-tracks {
+  display: grid;
+  gap: 1rem;
+}
+</style>

src/views/AlbumView/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <Layout
+    :tracks="album.tracks"
+    @playFromPage="playFromAlbum"
+    :on_album_page="true"
+  >
+    <template #header>
+      <Header :album="album.info" />
+    </template>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+// @libs
+import {
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+} from "vue-router";
+
+// @stores
+import useQueueStore from "@/stores/queue";
+import useAStore from "@/stores/pages/album";
+
+// @components
+import Header from "@/components/AlbumView/Header.vue";
+import Layout from "@/layouts/HeaderAndVList.vue";
+
+// @vars
+const album = useAStore();
+const queue = useQueueStore();
+
+// @methods
+function playFromAlbum(index: number) {
+  const { title, artist, hash } = album.info;
+  queue.playFromAlbum(title, artist, hash, album.allTracks);
+  queue.play(index);
+}
+
+// @hooks
+onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
+  await album
+    .fetchTracksAndArtists(to.params.hash.toString())
+    .then(() => album.resetQuery());
+});
+
+onBeforeRouteLeave(() => {
+  setTimeout(() => {
+    album.resetQuery();
+  }, 500);
+});
+</script>