add favorite albums page

src/assets/scss/Global/album-grid.scss

@@ -0,0 +1,12 @@
+.album-grid-view {
+  height: 100%;
+
+  .scrollable {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    padding: 0 1rem;
+    padding-bottom: 4rem;
+    overflow: auto;
+    max-height: 100%;
+  }
+}

src/assets/scss/Global/index.scss

@@ -1,6 +1,6 @@
 @import "./app-grid.scss", "./controls.scss", "./inputs.scss",
   "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
-  "./search-tabheaders.scss";
+  "./search-tabheaders.scss", "./album-grid.scss";
 
 * {
   box-sizing: border-box;

src/components/nav/NavBar.vue

@@ -17,6 +17,7 @@
         />
         <ArtistTracksTitle v-if="$route.name == Routes.artistTracks" />
         <FavoritesNav v-if="$route.name === Routes.favorites" />
+        <FavoriteAlbumsNav v-if="$route.name === Routes.favoriteAlbums" />
       </div>
     </div>
   </div>
@@ -40,6 +41,7 @@ import SettingsTitle from "./Titles/SettingsTitle.vue";
 import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
 import ArtistTracksTitle from "./Titles/ArtistTracksTitle.vue";
 import FavoritesNav from "./Titles/FavoritesNav.vue";
+import FavoriteAlbumsNav from "./Titles/FavoriteAlbumsNav.vue";
 
 const route = useRoute();
 

src/components/nav/Titles/FavoriteAlbumsNav.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2 style="margin: 0">💜 Favorite albums</h2>
+</template>

src/router/routes.ts

@@ -130,6 +130,12 @@ const favorites = {
   component: () => import("@/views/Favorites.vue"),
 };
 
+const favoriteAlbums = {
+  path: "/favorites/albums",
+  name: "FavoriteAlbums",
+  component: () => import("@/views/FavoriteAlbums.vue"),
+};
+
 const notFound = {
   name: "NotFound",
   path: "/:pathMatch(.*)",
@@ -152,6 +158,7 @@ const routes = [
   notFound,
   ArtistTracks,
   favorites,
+  favoriteAlbums,
 ];
 
 const Routes = {
@@ -170,6 +177,7 @@ const Routes = {
   notFound: notFound.name,
   artistTracks: ArtistTracks.name,
   favorites: favorites.name,
+  favoriteAlbums: favoriteAlbums.name,
 };
 
 export { routes, Routes };

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>
 
@@ -31,31 +28,3 @@ 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>

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">