fix removing tracks from queue

src/components/BottomBar.vue

@@ -3,7 +3,6 @@
     <div class="centered">
       <div class="inner">
         <div class="with-icons rounded-sm border">
-          <!-- <button><PlusSvg /></button> -->
           <RouterLink
             title="go to album"
             :to="{
@@ -26,7 +25,7 @@
           <div class="with-title">
             <div class="time time-current">
               <span>
-                {{ formatSeconds(queue.duration?.current) }}
+                {{ formatSeconds(queue.duration.current || 0) }}
               </span>
             </div>
             <div class="tags">
@@ -58,28 +57,26 @@
           <HotKeys />
         </div>
       </div>
-      <div class=""></div>
+      <div></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { paths } from "@/config";
-import useQStore from "@/stores/queue";
 import { formatSeconds } from "@/utils";
-
 import { Routes } from "@/composables/enums";
-import useSettingsStore from "@/stores/settings";
 
+
+import useQStore from "@/stores/queue";
+import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
 import Progress from "@/components/LeftSidebar/NP/Progress.vue";
-import ArtistName from "@/components/shared/ArtistName.vue";
 
 import HeartSvg from "@/assets/icons/heart.svg";
 // import PlusSvg from "@/assets/icons/plus.svg";
 
 const queue = useQStore();
-const settings = useSettingsStore();
 </script>
 
 <style lang="scss">

src/components/LeftSidebar/NP/Progress.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import useQStore from "../../../stores/queue";
+import useQStore from "@/stores/queue";
 
 const q = useQStore();
 

src/components/RightSideBar/Queue.vue

@@ -13,10 +13,12 @@
       key-field="id"
       v-slot="{ item, index }"
     >
+    
       <TrackItem
+        :index="index"
         :track="item.track"
-        :isCurrentPlaying="index === queue.currentindex && queue.playing"
         :isCurrent="index === queue.currentindex"
+        :isCurrentPlaying="index === queue.currentindex && queue.playing"
         :isQueueTrack="true"
         @playThis="playFromQueue(index)"
       />

src/components/shared/TrackItem.vue

@@ -11,10 +11,7 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="album-art">
-      <img
-        :src="paths.images.thumb.small + track.image"
-        class="rounded-sm"
-      />
+      <img :src="paths.images.thumb.small + track.image" class="rounded-sm" />
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"
@@ -39,7 +36,9 @@
       @click.stop="queue.removeFromQueue(index)"
       v-if="isQueueTrack"
     >
-      <DelSvg />
+      <div title="remove from queue" >
+        <DelSvg/>
+      </div>
     </div>
   </div>
 </template>
@@ -47,7 +46,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import DelSvg from "@/assets/icons/delete.svg";
+import DelSvg from "@/assets/icons/plus.svg";
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
@@ -103,7 +102,7 @@ const playThis = (track: Track) => {
   .remove-track {
     opacity: 0;
     transition: all 0.25s ease;
-    transform: scale(0.75) translateY(1rem);
+    transform: scale(0.75) translateY(1rem) rotate(45deg);
 
     &:hover {
       opacity: 1 !important;
@@ -113,7 +112,7 @@ const playThis = (track: Track) => {
   &:hover {
     .remove-track {
       opacity: 0.5;
-      transform: scale(1) translateY(0);
+      transform: scale(1) translateY(0) rotate(45deg);
     }
 
     background-color: $gray5;