add experimental remove from queue action

+ show albumartist on TrackItem if artists == ""
+ add action to reset playlist page artists to prevent content flashes
+ remove use of defaultTrackItem

src/components/RightSideBar/Queue.vue

@@ -17,6 +17,8 @@
               @playThis="queue.play(index)"
               :isCurrent="index === queue.current"
               :isPlaying="queue.playing"
+              :isQueueTrack="true"
+              :index="index"
             />
           </TransitionGroup>
         </div>
@@ -88,7 +90,6 @@ onUpdated(() => {
     grid-template-rows: max-content 1fr max-content;
     gap: $small;
 
-
     .scrollable-r {
       height: 100%;
       overflow: hidden;

src/components/RightSideBar/Queue/upNext.vue

@@ -6,14 +6,15 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="nextup abs">next up</div>
-    <img :src="paths.images.thumb + track.image" class="rounded" />
+    <img :src="paths.images.thumb + track?.image" class="rounded" />
     <div class="tags">
-      <div class="title ellip">{{ track.title }}</div>
-      <div class="artist ellip">
+      <div class="title ellip">{{ track?.title || "Don't click here" }}</div>
+      <div class="artist ellip" v-if="track">
         <span v-for="artist in putCommas(track.artists)" :key="artist">{{
           artist
         }}</span>
       </div>
+      <span v-else class="artist">nothing will happen</span>
     </div>
   </div>
 </template>
@@ -27,14 +28,16 @@ import { showTrackContextMenu as showContext } from "@/composables/context";
 import { ref } from "vue";
 
 const props = defineProps<{
-  track: Track;
+  track: Track | null;
   playNext: () => void;
 }>();
 
 const context_on = ref(false);
 
 function showMenu(e: Event) {
-  showContext(e, props.track, context_on);
+  if (props.track) {
+    showContext(e, props.track, context_on);
+  }
 }
 </script>