implement favoriting artists

src/components/AlbumView/Header.vue

@@ -92,7 +92,7 @@ import HeartSvg from "../shared/HeartSvg.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
-const props = defineProps<{
+defineProps<{
   album: Album;
 }>();
 

src/components/ArtistView/Header.vue

@@ -31,7 +31,7 @@
       </section>
       <div class="buttons">
         <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
-        <HeartSvg />
+        <HeartSvg @handleFav="handleFav" :state="is_fav" />
       </div>
     </div>
     <div class="artist-img no-select">
@@ -56,10 +56,34 @@ import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import formatSeconds from "@/utils/useFormatSeconds";
 import { isLight } from "@/composables/colors/album";
 import { paths } from "@/config";
-import { playSources } from "@/composables/enums";
+import { favType, playSources } from "@/composables/enums";
 import HeartSvg from "@/components/shared/HeartSvg.vue";
+import { ref } from "vue";
+import { addFavorite, removeFavorite } from "@/composables/fetch/favorite";
 
 const artist = useArtistPageStore();
+const is_fav = ref(artist.info.is_favorite);
+
+async function handleFav() {
+  if (is_fav.value) {
+    const removed = await removeFavorite(
+      favType.artist,
+      artist.info.artisthash
+    );
+
+    if (removed) {
+      is_fav.value = false;
+    }
+
+    return;
+  }
+
+  const added = await addFavorite(favType.artist, artist.info.artisthash);
+
+  if (added) {
+    is_fav.value = true;
+  }
+}
 </script>
 
 <style lang="scss">

src/components/nav/Titles/Folder.vue

@@ -70,6 +70,8 @@ onUpdated(() => {
       padding-right: $smaller;
       width: fit-content;
       max-width: 100%;
+      overflow: scroll;
+      scrollbar-width: none;
 
       .icon {
         height: 2rem;
@@ -82,9 +84,6 @@ onUpdated(() => {
       .paths {
         display: flex;
         gap: $smaller;
-        overflow: hidden;
-        height: 100%;
-        scrollbar-width: none;
 
         &::-webkit-scrollbar {
           display: none;
@@ -100,10 +99,11 @@ onUpdated(() => {
           }
 
           &::before {
-            content: "/";
+            content: "∕";
             font-size: small;
             margin-right: $smaller;
-            opacity: 0.25;
+            color: $gray;
+            font-size: 1rem;
           }
 
           &:first-child {

src/components/shared/HeartSvg.vue

@@ -1,14 +1,26 @@
 <template>
-  <button class="heart-button circular"><HeartSvg /></button>
+  <button class="heart-button circular" @click="emit('handleFav')">
+    <HeartFillSvg v-if="state" />
+    <HeartSvg v-else />
+  </button>
 </template>
 
 <script setup lang="ts">
 import HeartSvg from "@/assets/icons/heart.svg";
+import HeartFillSvg from "@/assets/icons/heart.fill.svg";
+
+defineProps<{
+  state: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+  (event: "handleFav"): void;
+}>();
 </script>
 
 <style lang="scss">
 .heart-button {
-  $bg: rgb(247, 149, 149);
+  $bg: rgb(255, 184, 184);
   background: $bg;
   align-items: center;
   padding: 0 1rem;