remove transition group from queue track list

src/components/LeftSidebar/Playlists.vue

@@ -32,7 +32,6 @@ onMounted(() => {
 
 <style lang="scss">
 .sidebar-playlists {
-  //   outline: solid 1px;
   display: grid;
   grid-template-rows: max-content 1fr;
 

src/components/LeftSidebar/nowPlaying.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="now-playing-card t-center rounded">
     <div>
-      <SongCard :track="queue.currenttrack" />
+      <SongCard :track="currenttrack" />
       <div class="l-track-time">
-        <span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
-        ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
+        <span class="rounded">{{ formatSeconds(duration.current) }}</span
+        ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
       </div>
       <Progress />
     </div>
@@ -13,16 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-import useModalStore from "@/stores/modal";
-import useQueueStore from "@/stores/queue";
 import useQStore from "../../stores/queue";
-import useContextStore from "@/stores/context";
-import MenuSvg from "../../assets/icons/more.svg";
-import trackContext from "@/contexts/track_context";
-
-import { ContextSrc } from "@/composables/enums";
 import { formatSeconds } from "@/utils";
 
 import HotKeys from "./NP/HotKeys.vue";
@@ -30,28 +21,7 @@ import Progress from "./NP/Progress.vue";
 import SongCard from "./NP/SongCard.vue";
 
 const queue = useQStore();
-const contextStore = useContextStore();
-const context_on = ref(false);
-
-const showContextMenu = (e: Event) => {
-  e.preventDefault();
-  e.stopPropagation();
-
-  const menus = trackContext(
-    queue.tracklist[queue.current],
-    useModalStore,
-    useQueueStore
-  );
-
-  contextStore.showContextMenu(e, menus, ContextSrc.Track);
-  context_on.value = true;
-
-  contextStore.$subscribe((mutation, state) => {
-    if (!state.visible) {
-      context_on.value = false;
-    }
-  });
-};
+const { currenttrack, duration } = queue;
 </script>
 <style lang="scss">
 .now-playing-card {
@@ -88,7 +58,6 @@ const showContextMenu = (e: Event) => {
     }
   }
 
-
   .context_on {
     background-color: $accent;
   }

src/components/PlaylistsList/PlaylistCard.vue

@@ -48,8 +48,6 @@ const props = defineProps<{
 
   .bottom {
     margin-top: $smaller;
-    display: grid;
-    justify-items: center;
 
     .name {
       font-weight: 900;

src/components/RightSideBar/Main.vue

@@ -7,13 +7,13 @@
   >
     <div class="grid">
       <div class="r-content">
-        <div class="r-dash" v-show="tabs.current === tabs.tabs.home">
+        <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
           <DashBoard />
         </div>
-        <div class="r-search" v-show="tabs.current === tabs.tabs.search">
+        <div class="r-search" v-if="tabs.current === tabs.tabs.search">
           <Search />
         </div>
-        <div class="r-queue" v-show="tabs.current === tabs.tabs.queue">
+        <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
           <Queue />
         </div>
       </div>

src/components/RightSideBar/Queue.vue

@@ -8,18 +8,16 @@
           @mouseenter="setMouseOver(true)"
           @mouseleave="setMouseOver(false)"
         >
-          <TransitionGroup name="queuelist">
-            <TrackItem
-              v-for="(t, index) in queue.tracklist"
-              :key="index"
-              :track="t"
-              @playThis="queue.play(index)"
-              :isCurrent="index === queue.current"
-              :isPlaying="queue.playing"
-              :isQueueTrack="true"
-              :index="index"
-            />
-          </TransitionGroup>
+          <TrackItem
+            v-for="(t, index) in queue.tracklist"
+            :key="index"
+            :track="t"
+            @playThis="queue.play(index)"
+            :isCurrent="index === queue.currentindex"
+            :isPlaying="queue.playing"
+            :isQueueTrack="true"
+            :index="index"
+          />
         </div>
       </div>
     </div>
@@ -52,21 +50,6 @@ onUpdated(() => {
 </script>
 
 <style lang="scss">
-.queuelist-move, /* apply transition to moving elements */
-.queuelist-enter-active {
-  transition: all 0.5s ease-in-out;
-}
-
-.queuelist-enter-from,
-.queuelist-leave-to {
-  opacity: 0;
-}
-
-.queuelist-leave-active {
-  transition: none;
-  position: absolute;
-}
-
 .up-next {
   overflow: hidden;
   height: 100%;
@@ -80,7 +63,6 @@ onUpdated(() => {
     position: relative;
     height: 100%;
 
-
     .scrollable-r {
       height: 100%;
       overflow: hidden;