show albums from artist at the bottom of album page

+ add a testing genres strip in album page
+ misc refactors

src/components/AlbumView/ArtistAlbums.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="albums-from-artist">
+    <h3>
+      <span>More from {{ artist.artist }} </span>
+      <span class="see-more">SEE ALL</span>
+    </h3>
+    <div class="cards">
+      <AlbumCard v-for="a in artist.albums" :album="a" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AlbumCard from "../shared/AlbumCard.vue";
+
+import useAlbumStore from "@/stores/pages/album";
+import { content_width } from "@/stores/content-width";
+import { computed, onBeforeMount } from "vue";
+import { AlbumInfo } from "@/interfaces";
+
+defineProps<{
+  artist: {
+    artist: string;
+    albums: AlbumInfo[];
+  };
+}>();
+</script>
+
+<style lang="scss">
+.albums-from-artist {
+  overflow: hidden;
+  padding-top: 1rem;
+
+  h3 {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: center;
+    padding: 0 $medium;
+
+    .see-more {
+      font-size: $medium;
+    }
+  }
+
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    gap: 2rem 0
+  }
+}
+</style>

src/components/AlbumView/GenreBanner.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="genres-banner">
+    <div v-for="genre in genres" class="rounded pad-sm">{{ genre }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import useAlbumStore from "@/stores/pages/album";
+
+const genres = ["Genres", "RNB", "Alternative", "Genres", "RNB", "Alternative"];
+
+onMounted(() => {
+  // onMounted, fetch data to be used in the component below this one.
+  const album = useAlbumStore();
+  album.fetchArtistAlbums();
+});
+</script>
+
+<style lang="scss">
+.genres-banner {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  padding-left: $medium;
+  text-transform: capitalize;
+  user-select: none;
+
+  div {
+    background-color: $gray5;
+    min-width: 4rem;
+    text-align: center;
+    outline: solid 1px $gray3;
+    padding: $small 1rem;
+
+    &:first-child {
+      background-color: white;
+      color: black;
+      outline-color: white;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background-color: $darkestblue;
+      outline-color: $darkestblue;
+    }
+  }
+}
+</style>

src/components/AlbumView/Header.vue

@@ -49,6 +49,7 @@
       </div>
     </div>
   </div>
+
 </template>
 
 <script setup lang="ts">
@@ -59,7 +60,7 @@ import { albumHeaderSmall } from "@/stores/content-width";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
 import { formatSeconds, useVisibility } from "@/utils";
-import { getButtonColor, isLight } from "../../composables/colors/album";
+import { isLight } from "../../composables/colors/album";
 import { playSources } from "../../composables/enums";
 import { AlbumInfo } from "../../interfaces";
 
@@ -73,6 +74,7 @@ const albumheaderthing = ref<any>(null);
 const imguri = paths.images;
 const nav = useNavStore();
 
+
 /**
  * Calls the `toggleShowPlay` method which toggles the play button in the nav.
  * Emits the `resetBottomPadding` event to reset the album page content bottom padding.
@@ -87,6 +89,8 @@ useVisibility(albumheaderthing, handleVisibilityState);
 </script>
 
 <style lang="scss">
+
+
 .a-header {
   display: grid;
   grid-template-columns: max-content 1fr;

src/components/nav/Titles/QueueTitle.vue

@@ -40,7 +40,7 @@ function getSource() {
         location: {
           name: Routes.album,
           params: {
-            hash: source.hash,
+            hash: source.albumhash,
           },
         },
       };

src/components/shared/AlbumCard.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="{
       name: 'AlbumView',
-      params: { hash: album.hash },
+      params: { hash: album.albumhash },
     }"
     class="result-item"
   >

src/components/shared/SongItem.vue

@@ -149,6 +149,8 @@ function showMenu(e: MouseEvent) {
     width: 100%;
     position: relative;
     height: 3rem;
+    display: flex;
+    justify-content: center;
 
     .text {
       opacity: 1;