add favorite albums page

src/views/AlbumsGrid.vue

@@ -7,9 +7,6 @@
         :key="album.albumhash"
       />
     </div>
-    <!-- <div class="no-albums rounded" v-if="artist.toShow.length == 0">
-      <b>No {{ artist.page }}</b>
-    </div> -->
   </div>
 </template>
 
@@ -30,32 +27,4 @@ onMounted(() => {
 onBeforeRouteLeave(() => {
   artist.resetAlbums();
 });
-</script>
-
-<style lang="scss">
-.album-grid-view {
-  height: 100%;
-
-  .scrollable {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: $small;
-    padding: 0 1rem;
-    padding-bottom: 4rem;
-    overflow: auto;
-    max-height: 100%;
-  }
-
-  .no-albums {
-    border: solid $red 1px;
-    width: 30rem;
-    display: block;
-    margin: 0 auto;
-    padding: 5rem;
-    text-align: center;
-    font-size: 1.25rem;
-    color: $red;
-    opacity: .5;
-  }
-}
-</style>
+</script>

src/views/FavoriteAlbums.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="album-grid-view v-scroll-page">
+    <div class="scrollable">
+      <AlbumCard
+        v-for="album in albums"
+        :album="album"
+        :key="album.albumhash"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, Ref, ref } from "vue";
+import { getFavAlbums } from "@/composables/fetch/favorite";
+
+import AlbumCard from "@/components/shared/AlbumCard.vue";
+import { Album } from "@/interfaces";
+
+const albums: Ref<Album[]> = ref([]);
+
+onMounted(() => {
+  getFavAlbums(0).then((data) => (albums.value = data));
+});
+</script>

src/views/Favorites.vue

@@ -5,7 +5,7 @@
         :albums="favAlbums"
         :albumType="discographyAlbumTypes.albums"
         :title="'Albums 💜'"
-        :route="'some'"
+        :route="'/favorites/albums'"
       />
     </div>
     <div class="fav-tracks" v-if="favTracks.length">