add favorite button to TrackItem component

+ show playing folder name in queue page
+ add no_emit prop to heartSvg component

src/assets/scss/Global/basic.scss

@@ -16,7 +16,7 @@
 }
 
 .ellip2 {
-  word-wrap: break-word;
+  word-wrap: anywhere;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

src/components/RightSideBar/Search/LoadMore.vue

@@ -6,7 +6,7 @@
         load_disabled: !can_load_more,
       }"
     >
-      <div class="text">Load More {{ can_load_more }}</div>
+      <div class="text">Load More</div>
     </button>
   </div>
 </template>

src/components/nav/Titles/QueueTitle.vue

@@ -101,7 +101,7 @@ function getSource() {
         name: "Favorite tracks",
         icon: HeartSvg,
         location: {
-          name: Routes.favorites,
+          name: Routes.favoriteTracks,
         },
       };
 

src/components/shared/HeartSvg.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     class="heart-button circular"
-    @click="emit('handleFav')"
+    @click="!no_emit && emit('handleFav')"
     :class="{
       is_fav: state,
     }"
@@ -17,6 +17,7 @@ import HeartFillSvg from "@/assets/icons/heart.fill.svg";
 
 defineProps<{
   state: boolean | undefined;
+  no_emit?: boolean;
 }>();
 
 const emit = defineEmits<{

src/components/shared/SongItem.vue

@@ -1,3 +1,5 @@
+<!-- Track component used in app body -->
+
 <template>
   <div
     class="songlist-item rounded-sm"

src/components/shared/TrackItem.vue

@@ -1,3 +1,4 @@
+<!-- Track component used in the right sidebar -->
 <template>
   <div
     class="track-item"
@@ -31,20 +32,26 @@
         />
       </div>
     </div>
-    <div
-      class="remove-track flex"
-      @click.stop="queue.removeFromQueue(index)"
-      v-if="isQueueTrack"
-    >
-      <div title="remove from queue" >
-        <DelSvg/>
+    <div class="float-buttons flex" v-if="isQueueTrack">
+      <div
+        :title="is_fav ? 'Add to favorites' : 'Remove from favorites'"
+        @click.stop="() => addToFav(track.trackhash)"
+      >
+        <HeartSvg :state="is_fav" :no_emit="true" />
+      </div>
+      <div
+        class="remove-track"
+        title="remove from queue"
+        @click.stop="queue.removeFromQueue(index)"
+      >
+        <DelSvg />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 import DelSvg from "@/assets/icons/plus.svg";
 import { showTrackContextMenu as showContext } from "@/composables/context";
@@ -52,6 +59,9 @@ import { paths } from "@/config";
 import { Track } from "@/interfaces";
 import useQueueStore from "@/stores/queue";
 import ArtistName from "./ArtistName.vue";
+import HeartSvg from "./HeartSvg.vue";
+import favoriteHandler from "@/composables/favoriteHandler";
+import { favType } from "@/composables/enums";
 
 const props = defineProps<{
   track: Track;
@@ -63,6 +73,7 @@ const props = defineProps<{
 
 const queue = useQueueStore();
 const context_on = ref(false);
+const is_fav = ref(props.track.is_favorite);
 
 function showMenu(e: MouseEvent) {
   showContext(e, props.track, context_on);
@@ -75,6 +86,23 @@ const emit = defineEmits<{
 const playThis = (track: Track) => {
   emit("playThis");
 };
+
+function addToFav(trackhash: string) {
+  favoriteHandler(
+    is_fav.value,
+    favType.track,
+    trackhash,
+    () => (is_fav.value = true),
+    () => (is_fav.value = false)
+  );
+}
+
+watch(
+  () => props.track.is_favorite,
+  (newValue) => {
+    is_fav.value = newValue;
+  }
+);
 </script>
 
 <style lang="scss">
@@ -99,10 +127,22 @@ const playThis = (track: Track) => {
     }
   }
 
-  .remove-track {
+  .float-buttons {
     opacity: 0;
-    transition: all 0.25s ease;
-    transform: scale(0.75) translateY(1rem) rotate(45deg);
+
+    .heart-button {
+      width: 2rem;
+      padding: 0;
+      border: none;
+      transition: all 0.25s ease;
+      transform: scale(1) translateY(-1rem);
+    }
+
+    .remove-track {
+      margin-top: $smaller;
+      transition: all 0.25s ease;
+      transform: scale(1) translateY(1rem) rotate(45deg);
+    }
 
     &:hover {
       opacity: 1 !important;
@@ -110,8 +150,15 @@ const playThis = (track: Track) => {
   }
 
   &:hover {
+    .float-buttons {
+      opacity: 1;
+    }
+
+    .heart-button {
+      transform: scale(1) translateY(0);
+    }
+
     .remove-track {
-      opacity: 0.5;
       transform: scale(1) translateY(0) rotate(45deg);
     }
 

src/stores/queue.ts

@@ -158,7 +158,7 @@ export default defineStore("Queue", {
       this.from = <fromFolder>{
         type: FromOptions.folder,
         path: fpath,
-        name: "Folder",
+        name: "Folder: " + fpath.split("/").pop(),
       };
       this.setNewQueue(tracks);
     },