use @vueuse/useClickOutside to hide context menu

src/App.vue

@@ -53,19 +53,11 @@ import LeftSidebar from "./components/LeftSidebar/index.vue";
 const queue = useQStore();
 const router = useRouter();
 const modal = useModalStore();
-const context_store = useContextStore();
 const settings = useSettingsStore();
-const app_dom = document.getElementById("app") as HTMLElement;
 
 queue.readQueue();
 handleShortcuts(useQStore);
 
-app_dom.addEventListener("click", (e) => {
-  if (context_store.visible) {
-    context_store.hideContextMenu();
-  }
-});
-
 router.afterEach(() => {
   (document.getElementById("acontent") as HTMLElement).scrollTo(0, 0);
 });

src/components/BottomBar.vue

@@ -67,7 +67,6 @@ import { paths } from "@/config";
 import { formatSeconds } from "@/utils";
 import { Routes } from "@/composables/enums";
 
-
 import useQStore from "@/stores/queue";
 import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";

src/components/ContextMenu.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="context-menu rounded shadow-lg"
+    ref="contextMenu"
     :class="[
       { 'context-menu-visible': context.visible },
       { 'context-normalizedX': context.normalizedX },
@@ -29,10 +30,30 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
 import useContextStore from "../stores/context";
 import ContextItem from "./Contextmenu/ContextItem.vue";
-
 const context = useContextStore();
+
+const contextMenu = ref<HTMLElement>();
+
+let clickCount = 0;
+
+onClickOutside(contextMenu, (e) => {
+  if (!context.visible) {
+    clickCount = 0;
+    return;
+  }
+  clickCount++;
+
+  if (context.visible && clickCount == 2) {
+    context.hideContextMenu();
+    e.stopImmediatePropagation();
+    clickCount = 0;
+  }
+});
 </script>
 
 <style lang="scss">

src/views/QueueView.vue

@@ -16,9 +16,9 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currentid === item.trackid"
+        :isCurrent="queue.currentid === item.track.trackid"
         :isCurrentPlaying="
-          queue.currentid === item.trackid && queue.playing
+          queue.currentid === item.track.trackid && queue.playing
         "
         @playThis="playFromQueue(index)"
       />