refactor the "SEE ALL" button into a component

src/components/AlbumView/ArtistAlbums.vue

@@ -2,15 +2,13 @@
   <div class="artist-albums">
     <h3>
       <span>{{ title }} </span>
-      <span
-        class="see-all"
+      <SeeAll
         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">
-        <RouterLink :to="route">SEE ALL</RouterLink>
-      </span>
+      <SeeAll :route="route" />
     </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: 4rem;
+    height: 3.25rem;
     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>