connect favorites data to favorites page

+ detach isSmall and isMedium classes from the v-scroll-page class
+ customize the TopTracks component to be usable with the favorite tracks page
+ add queue methods to play tracks from favorites page
+ handle playing from artist top tracks in parent component

src/components/PlaylistView/ArtistsList.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="f-artists">
+    <h3>{{ title }} <span class="see-all">SEE ALL</span></h3>
+    <div class="artist-list">
+      <ArtistCard
+        v-for="artist in artists.slice(0, maxAbumCards)"
+        :key="artist.image"
+        :artist="artist"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ArtistCard from "@/components/shared/ArtistCard.vue";
+import { Artist } from "@/interfaces";
+import { maxAbumCards } from "@/stores/content-width";
+
+defineProps<{
+  artists: Artist[];
+  title: string;
+}>();
+</script>
+
+<style lang="scss">
+.f-artists {
+  h3 {
+    display: flex;
+    justify-content: space-between;
+    padding-left: $medium;
+
+    .see-all {
+      font-size: $medium;
+    }
+  }
+
+  .artist-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  }
+}
+</style>

src/components/PlaylistView/FeaturedArtists.vue

@@ -1,112 +0,0 @@
-<template>
-  <div class="f-artists">
-    <div class="header">
-      <div class="headin">Featured Artists</div>
-      <div class="xcontrols">
-        <div class="prev icon" @click="scrollLeft()"><ArrowSvg /></div>
-        <div class="next icon" @click="scrollRight()"><ArrowSvg /></div>
-      </div>
-    </div>
-    <div class="separator no-border"></div>
-    <div class="artists" ref="artists_dom">
-      <ArtistCard
-        v-for="artist in artists"
-        :key="artist.image"
-        :artist="artist"
-        :color="'ffffff00'"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import ArtistCard from "@/components/shared/ArtistCard.vue";
-import { Artist } from "@/interfaces";
-import { ref } from "@vue/reactivity";
-import ArrowSvg from "../../assets/icons/right-arrow.svg";
-
-defineProps<{
-  artists: Artist[];
-}>();
-
-const artists_dom = ref(null);
-
-const scrollLeft = () => {
-  const dom = artists_dom.value;
-  dom.scrollBy({
-    left: -700,
-    behavior: "smooth",
-  });
-};
-
-const scrollRight = () => {
-  const dom = artists_dom.value;
-  dom.scrollBy({
-    left: 700,
-    behavior: "smooth",
-  });
-};
-</script>
-
-<style lang="scss">
-.f-artists {
-  width: 100%;
-  padding: 0 $small;
-  border-radius: $small;
-  user-select: none;
-  position: relative;
-
-  .header {
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .headin {
-      font-size: 1.5rem;
-      font-weight: 900;
-      margin-left: $small;
-    }
-  }
-}
-
-.f-artists .xcontrols {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  gap: 1rem;
-
-  .prev {
-    transform: rotate(180deg);
-  }
-
-  .icon {
-    border-radius: $small;
-    transition: all 0.5s ease;
-    background-color: rgb(51, 51, 51);
-    padding: $smaller;
-
-    svg {
-      display: flex;
-    }
-
-    &:hover {
-      background-color: $accent;
-      transition: all 0.5s ease;
-    }
-  }
-}
-
-.f-artists > .artists {
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  gap: $small;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-</style>