+ implement fav heart button in bottom bar

+ handle favoriting a song that's already in queue from another source

src/assets/scss/Global/search-tabheaders.scss

@@ -4,8 +4,8 @@
   justify-content: space-around;
   margin: 1rem;
   width: max-content;
-  background: linear-gradient(37deg, $gray1, $gray2, $gray1);
-  height: 2rem;
+  background-color: $gray4;
+  height: 2.25rem;
 
   & > * {
     border-left: solid 1px $gray3;

src/components/BottomBar.vue

@@ -18,7 +18,13 @@
               alt=""
             />
           </RouterLink>
-          <button><HeartSvg /></button>
+
+          <button>
+            <HeartSvg
+              :state="queue.currenttrack?.is_favorite"
+              @handleFav="handleFav"
+            />
+          </button>
         </div>
 
         <div class="info">
@@ -72,10 +78,21 @@ import Progress from "@/components/LeftSidebar/NP/Progress.vue";
 import ArtistName from "@/components/shared/ArtistName.vue";
 import useQStore from "@/stores/queue";
 
-import HeartSvg from "@/assets/icons/heart.svg";
-// import PlusSvg from "@/assets/icons/plus.svg";
+import HeartSvg from "./shared/HeartSvg.vue"; // import PlusSvg from "@/assets/icons/plus.svg";
+import favoriteHandler from "@/composables/favoriteHandler";
+import { favType } from "@/composables/enums";
 
 const queue = useQStore();
+
+function handleFav() {
+  favoriteHandler(
+    queue.currenttrack?.is_favorite,
+    favType.track,
+    queue.currenttrack?.trackhash || "",
+    () => queue.toggleFav(queue.currentindex),
+    () => queue.toggleFav(queue.currentindex)
+  );
+}
 </script>
 
 <style lang="scss">
@@ -128,10 +145,7 @@ const queue = useQStore();
         width: 2rem;
         background: transparent;
         padding: 0;
-
-        &:last-child:hover {
-          background: $red;
-        }
+        border: none;
       }
     }
 

src/components/shared/SongItem.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUpdate, onUpdated, ref, toRef, watch } from "vue";
+import { ref, watch } from "vue";
 
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";

src/composables/favoriteHandler.ts

@@ -1,6 +1,6 @@
 import { favType } from "./enums";
 import { addFavorite, removeFavorite } from "./fetch/favorite";
-
+import useQueueStore from "@/stores/queue";
 /**
  * Handles the favorite state of an item.
  * @param setter The ref to track the is_favorite state
@@ -11,15 +11,21 @@ export default async function favoriteHandler(
   flag: boolean | undefined,
   type: favType,
   itemhash: string,
-  setter: () => void,
-  remover: () => void
+  setter: (x?: any) => void,
+  remover: (x?: any) => void
 ) {
+  const queue = useQueueStore();
+  const is_current =
+    type === favType.track && itemhash === queue.currenttrackhash;
   if (flag) {
     const removed = await removeFavorite(type, itemhash);
     if (removed) remover();
-    return;
+  } else {
+    const added = await addFavorite(type, itemhash);
+    if (added) setter();
   }
 
-  const added = await addFavorite(type, itemhash);
-  if (added) setter();
+  if (is_current) {
+    queue.toggleFav(queue.currentindex);
+  }
 }

src/composables/fetch/favorite.ts

@@ -88,3 +88,12 @@ export async function getFavArtists(limit = 6) {
 
   return data.artists as Artist[];
 }
+
+export async function isFavorite(itemhash: string, type: favType) {
+  const { data } = await useAxios({
+    url: paths.api.isFavorite + `?hash=${itemhash}&type=${type}`,
+    get: true,
+  });
+
+  return data.is_favorite as boolean;
+}

src/config.ts

@@ -25,6 +25,7 @@ const paths = {
     favAlbums: baseApiUrl + "/albums/favorite",
     favTracks: baseApiUrl + "/tracks/favorite",
     favArtists: baseApiUrl + "/artists/favorite",
+    isFavorite: baseApiUrl + "/favorites/check",
     artist: baseApiUrl + "/artist",
     get addFavorite() {
       return this.favorite + "/add";

src/stores/queue.ts

@@ -3,8 +3,9 @@ import { defineStore } from "pinia";
 import { Ref } from "vue";
 import { NotifType, useNotifStore } from "./notification";
 
-import { FromOptions } from "../composables/enums";
+import { favType, FromOptions } from "../composables/enums";
 import updateMediaNotif from "../composables/mediaNotification";
+import { isFavorite } from "@/composables/fetch/favorite";
 
 import {
   fromAlbum,
@@ -292,6 +293,13 @@ export default defineStore("Queue", {
       this.queueScrollFunction = cb;
       this.mousover = mousover;
     },
+    toggleFav(index: number) {
+      const track = this.tracklist[index];
+
+      if (track) {
+        track.is_favorite = !track.is_favorite;
+      }
+    },
   },
   getters: {
     next(): Track | undefined {
@@ -309,7 +317,15 @@ export default defineStore("Queue", {
       }
     },
     currenttrack(): Track | undefined {
-      return this.tracklist[this.currentindex];
+      const current = this.tracklist[this.currentindex];
+
+      isFavorite(current?.trackhash || "", favType.track).then((is_fav) => {
+        if (current) {
+          current.is_favorite = is_fav;
+        }
+      });
+
+      return current;
     },
     currenttrackhash(): string {
       return this.currenttrack?.trackhash || "";