refactor the "SEE ALL" button into a component

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

@@ -1,4 +1,4 @@
-.album-grid-view {
+.card-grid-view {
   height: 100%;
 
   .scrollable {

src/components/AlbumView/ArtistAlbums.vue

@@ -2,15 +2,13 @@
   <div class="artist-albums">
     <h3>
       <span>{{ title }} </span>
-      <span
+      <SeeAll
-        class="see-all"
         v-if="maxAbumCards <= albums.length"
+        :route="route"
         @click="
           !favorites ? useArtistDiscographyStore().setPage(albumType) : null
         "
-      >
+      />
-        <RouterLink :to="route">SEE ALL</RouterLink>
-      </span>
     </h3>
     <div class="cards">
       <AlbumCard v-for="a in albums.slice(0, maxAbumCards)" :album="a" />
@@ -25,6 +23,7 @@ import { discographyAlbumTypes } from "@/composables/enums";
 import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 
 import AlbumCard from "../shared/AlbumCard.vue";
+import SeeAll from "../shared/SeeAll.vue";
 
 defineProps<{
   title: string;
@@ -45,15 +44,6 @@ defineProps<{
     align-items: center;
     padding: 0 $medium;
     margin-bottom: $small;
-
-    .see-all {
-      font-size: $medium;
-
-      a:hover {
-        text-decoration: underline;
-        cursor: pointer !important;
-      }
-    }
   }
 
   .cards {

src/components/ArtistView/Albums.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="albums-list">
-    <div class="section-title">
-      <b>
-        {{ title }}
-      </b>
-      <div class="see-all"><b>SEE ALL</b></div>
-    </div>
-    <div class="cars">
-      <AlbumCard
-        v-for="album in search.albums.value.slice(0, 6)"
-        :album="album"
-        :key="Math.random()"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AlbumCard from "../shared/AlbumCard.vue";
-import useSearchStore from "@/stores/search";
-
-defineProps<{
-  //   albums: Album[];
-  title: string;
-}>();
-
-const search = useSearchStore();
-
-// TODO: use AlbumView's ArtistAlbums component instead of this
-</script>
-
-<style lang="scss">
-.albums-list {
-  .section-title {
-    margin: 0;
-    margin-bottom: -$small;
-
-    .see-all {
-      float: right;
-      font-size: small;
-      opacity: 0.5;
-    }
-  }
-
-  .cars {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    // padding: 1rem 0;
-    // gap: 2rem 0;
-  }
-}
-</style>

src/components/ArtistView/TopTracks.vue

@@ -2,9 +2,7 @@
   <div class="artist-top-tracks">
     <h3 class="section-title">
       {{ title }}
-      <span class="see-all">
+      <SeeAll :route="route" />
-        <RouterLink :to="route">SEE ALL</RouterLink>
-      </span>
     </h3>
     <div class="tracks" :class="{ isSmall, isMedium }">
       <SongItem
@@ -22,6 +20,7 @@
 import SongItem from "../shared/SongItem.vue";
 import { Track } from "@/interfaces";
 import { isMedium, isSmall } from "@/stores/content-width";
+import SeeAll from "../shared/SeeAll.vue";
 
 defineProps<{
   tracks: Track[];
@@ -49,14 +48,5 @@ defineProps<{
     justify-content: space-between;
     padding-left: 1rem !important; // applies to favorite page
   }
-
-  .see-all {
-    font-size: $medium;
-
-    a:hover {
-      text-decoration: underline;
-      cursor: pointer !important;
-    }
-  }
 }
 </style>

src/components/FolderView/FolderList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items" class="rounded lislt-mode">
+    <div id="f-items" class="rounded">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -28,12 +28,11 @@ defineProps<{
 }
 
 #f-items.list-mode {
-  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  grid-template-columns: 1fr;
   gap: 0;
 
   .f-item {
-    // background-color: $red;
+    height: 3.25rem;
-    height: 4rem;
     border-radius: $small;
     background-color: transparent;
   }
@@ -43,3 +42,5 @@ defineProps<{
   }
 }
 </style>
+
+<!-- TODO: ADD BUTTON TO TOGGLE LIST MODE -->

src/components/PlaylistView/ArtistsList.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="f-artists">
-    <h3>{{ title }} <span class="see-all">SEE ALL</span></h3>
+    <h3>
+      {{ title }}
+      <SeeAll :route="route" />
+    </h3>
     <div class="artist-list">
       <ArtistCard
         v-for="artist in artists.slice(0, maxAbumCards)"
@@ -15,10 +18,12 @@
 import ArtistCard from "@/components/shared/ArtistCard.vue";
 import { Artist } from "@/interfaces";
 import { maxAbumCards } from "@/stores/content-width";
+import SeeAll from "../shared/SeeAll.vue";
 
 defineProps<{
   artists: Artist[];
   title: string;
+  route: string;
 }>();
 </script>
 
@@ -31,9 +36,7 @@ defineProps<{
     align-items: center;
     margin-bottom: $small;
 
-    .see-all {
+   
-      font-size: $medium;
-    }
   }
 
   .artist-list {

src/components/shared/SeeAll.vue

@@ -0,0 +1,23 @@
+<template>
+  <span class="see-all">
+    <RouterLink :to="route"> SEE ALL </RouterLink>
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  route: string;
+}>();
+</script>
+
+<style lang="scss">
+.see-all {
+  font-size: $medium;
+  opacity: 0.75;
+
+  a:hover {
+    cursor: pointer !important;
+    text-decoration: underline;
+  }
+}
+</style>

src/router/routes.ts

@@ -142,6 +142,12 @@ const favoriteTracks = {
   component: () => import("@/views/FavoriteTracks.vue"),
 };
 
+const favoriteArtists = {
+  path: "/favorites/artists",
+  name: "FavoriteArtists",
+  component: () => import("@/views/FavoriteArtists.vue"),
+};
+
 const notFound = {
   name: "NotFound",
   path: "/:pathMatch(.*)",
@@ -166,6 +172,7 @@ const routes = [
   favorites,
   favoriteAlbums,
   favoriteTracks,
+  favoriteArtists,
 ];
 
 const Routes = {
@@ -186,6 +193,7 @@ const Routes = {
   favorites: favorites.name,
   favoriteAlbums: favoriteAlbums.name,
   favoriteTracks: favoriteTracks.name,
+  favoriteArtists: favoriteArtists.name,
 };
 
 export { routes, Routes };

src/settings/strings.ts

@@ -34,3 +34,7 @@ export const contextChildrenShowModeStrings = <S>{
     show_mode: "Show context children on",
   },
 };
+
+export const showFoldersAsStrings = <S>{
+  settings: { show_folders_as: "Show folders as" },
+};

src/views/AlbumsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="album-grid-view v-scroll-page">
+  <div class="card-grid-view v-scroll-page">
     <div class="scrollable">
       <AlbumCard
         v-for="album in artist.toShow"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 import AlbumCard from "@/components/shared/AlbumCard.vue";
+import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 
 import { onMounted } from "vue";
 import { onBeforeRouteLeave, useRoute } from "vue-router";

src/views/ArtistView/Main.vue

@@ -180,9 +180,5 @@ onBeforeRouteLeave(async () => {
     margin: 1rem;
     padding-left: 1rem;
   }
-
-  .see-all {
-    opacity: 0.75;
-  }
 }
 </style>

src/views/FavoriteAlbums.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="album-grid-view v-scroll-page">
+  <div class="card-grid-view v-scroll-page">
     <div class="scrollable">
       <AlbumCard
         v-for="album in albums"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, Ref, ref } from "vue";
 import { getFavAlbums } from "@/composables/fetch/favorite";
+import { onMounted, Ref, ref } from "vue";
 
 import AlbumCard from "@/components/shared/AlbumCard.vue";
 import { Album } from "@/interfaces";

src/views/FavoriteArtists.vue

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

src/views/Favorites.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div class="fav-artists" v-if="favArtists.length">
-      <FeaturedArtists :artists="favArtists" :title="'Artists ❤️'" />
+      <FeaturedArtists :artists="favArtists" :title="'Artists ❤️'" :route="'/favorites/artists'"/>
     </div>
   </div>
 </template>
@@ -67,10 +67,6 @@ async function handlePlay(index: number) {
     margin-top: 0;
   }
 
-  .see-all {
-    opacity: 0.75;
-  }
-
   .fav-tracks {
     margin-bottom: 2rem;