implement favoriting artists

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