remove test header from queue page

src/components/shared/PlayBtn.vue

@@ -1,18 +1,16 @@
 <template>
-  <button
+  <button class="play-btn" @click="usePlayFrom(source, useQStore, store)">
-    class="play-btn"
-    @click="usePlayFrom(source, useQStore, store)"
-  >
     <PlaySvg />
   </button>
 </template>
 
 <script setup lang="ts">
-import { playSources } from "@/composables/enums";
+import useQStore from "@/stores/queue";
 import useAlbumStore from "@/stores/pages/album";
 import usePlaylistStore from "@/stores/pages/playlist";
+
+import { playSources } from "@/composables/enums";
 import usePlayFrom from "@/composables/usePlayFrom";
-import useQStore from "@/stores/queue";
 
 import PlaySvg from "../../assets/icons/play.svg";
 
@@ -27,5 +25,9 @@ defineProps<{
   aspect-ratio: 1;
   padding: 0;
   border-radius: 0.65rem;
+
+  svg {
+    transition: none;
+  }
 }
 </style>

src/layouts/HeaderAndVList.vue

@@ -7,7 +7,7 @@
       @scroll="handleScroll"
     >
       <div v-bind="wrapperProps" class="scrollable">
-        <div class="header rounded" style="height: 64px">
+        <div class="header rounded" style="height: 64px" v-if="!no_header">
           <div
             ref="header"
             :style="{ top: -headerHeight + 64 - 16 + 'px' }"
@@ -51,6 +51,7 @@ import SongItem from "@/components/shared/SongItem.vue";
 const props = defineProps<{
   tracks: Track[];
   on_album_page?: boolean;
+  no_header?: boolean;
 }>();
 
 const emit = defineEmits<{

src/views/QueueView.vue

@@ -1,56 +1,12 @@
 <template>
   <div class="queue-view">
-    <Layout :tracks="queue.tracklist">
+    <Layout :tracks="queue.tracklist" :no_header="true"> </Layout>
-      <template #header>
-        <div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloremque
-          doloribus nostrum voluptas? Nobis ipsa cupiditate perspiciatis earum
-          explicabo hic accusamus assumenda commodi, veritatis, nostrum nisi
-          quod sequi exercitationem ducimus.Lorem ipsum dolor sit amet
-          consectetur, adipisicing elit. Culpa facere recusandae dolorem sunt
-          blanditiis natus delectus alias soluta facilis? Asperiores praesentium
-          repellat magni rerum? Ratione reiciendis ut magni laborum itaque!
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
-          ut. Iure ex nemo sunt. Nostrum, corporis! Asperiores omnis ducimus eum
-          culpa quae nesciunt eius, soluta molestiae delectus quasi labore
-          ex
-          nemo sunt. Nostrum, corporis! Asperiores omnis ducimus eum culpa quae
-          nesciunt eius, soluta molestiae delectus quasi labore ipsum! Lorem
-          ipsum dolor sit amet consectetur adipisicing elit. Alias et ducimus
-          consequuntur doloremque voluptate laboriosam, obcaecati eligendi!
-          Mollitia cum, sint fuga facere sit minus modi quaerat quia nisi, earum
-          ut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
-          aliquam, sit laboriosam quidem minus ipsam consequatur deleniti
-          architecto accusamus distinctio earum in suscipit eveniet temporibus
-          obcaecati voluptas odit tenetur adipisci?
-        </div>
-      </template>
-    </Layout>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onUpdated, ref } from "vue";
-
 import useQStore from "@/stores/queue";
-import { onMounted } from "vue";
-import SongItem from "@/components/shared/SongItem.vue";
-import { useVirtualList } from "@vueuse/core";
 import Layout from "@/layouts/HeaderAndVList.vue";
 
 const queue = useQStore();
-const height = ref(330);
-const header = ref<HTMLElement>();
-const source = computed(() => queue.tracklist);
-
-// function playFromQueuePage(index: number) {
-//   queue.play(index);
-// }
-// import SongList from "@/components/FolderView/SongList.vue";
-// import { focusElem } from "@/utils";
 </script>
-
-<!-- <style lang="scss">
-.queue-view {
-}
-</style> -->