normalize context menu using @popperjs

+ normalize context children too
+ add setting to toggle context children via click or hover
+ add a select setting component
+ remove dead teleport code from sidebar tabs wrapper
+ general clean up

src/components/ContextMenu.vue

@@ -1,22 +1,8 @@
 <template>
   <div
-    class="context-menu rounded shadow-lg"
+    class="context-menu rounded shadow-lg no-select"
     ref="contextMenu"
-    :class="[
-      { 'context-menu-visible': context.visible },
-      { 'context-normalizedX': context.normalizedX },
-      {
-        'context-normalizedY': context.normalizedY,
-      },
-      {
-        'context-many-kids': context.hasManyChildren(),
-      },
-    ]"
     id="context-menu"
-    :style="{
-      left: context.x + 'px',
-      top: context.y + 'px',
-    }"
   >
     <ContextItem
       class="context-item"
@@ -24,7 +10,8 @@
       :key="option.label"
       :class="[{ critical: option.critical }, option.type]"
       :option="option"
-      @click="option.action && option.action()"
+      :childrenShowMode="settings.contextChildrenShowMode"
+      @hideContextMenu="context.hideContextMenu()"
     />
   </div>
 </template>
@@ -34,9 +21,12 @@ import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
 import useContextStore from "../stores/context";
-import ContextItem from "./Contextmenu/ContextItem.vue";
-const context = useContextStore();
+import useSettingsStore from "../stores/settings";
 
+import ContextItem from "./Contextmenu/ContextItem.vue";
+
+const context = useContextStore();
+const settings = useSettingsStore();
 const contextMenu = ref<HTMLElement>();
 
 let clickCount = 0;
@@ -64,6 +54,7 @@ onClickOutside(contextMenu, (e) => {
   width: 12rem;
   z-index: 10000 !important;
   transform: scale(0);
+  height: min-content;
 
   padding: $small 0;
   background: $context;
@@ -81,32 +72,4 @@ onClickOutside(contextMenu, (e) => {
     }
   }
 }
-
-.context-menu-visible {
-  transform: scale(1);
-}
-
-.context-normalizedX {
-  .more {
-    transform: rotate(180deg);
-  }
-
-  .context-item > .children {
-    left: -13rem;
-    transform-origin: center right;
-  }
-}
-
-.context-normalizedY {
-  .context-item > .children {
-    transform-origin: bottom right;
-    top: -0.5rem;
-  }
-}
-
-.context-many-kids {
-  .context-item > .children {
-    overflow-y: auto;
-  }
-}
 </style>

src/components/Contextmenu/ContextItem.vue

@@ -1,15 +1,33 @@
 <template>
-  <div class="context-item">
+  <div
+    class="context-item"
+    @mouseenter="
+      option.children &&
+        childrenShowMode === contextChildrenShowMode.hover &&
+        showChildren()
+    "
+    @mouseleave="
+      option.children &&
+        childrenShowMode === contextChildrenShowMode.hover &&
+        hideChildren()
+    "
+    @click="runAction"
+    ref="parentRef"
+  >
     <div class="icon image" :class="option.icon"></div>
     <div class="label ellip">{{ option.label }}</div>
     <div class="more image" v-if="option.children"></div>
-    <div class="children rounded shadow-sm" v-if="option.children">
+    <div
+      class="children rounded shadow-sm"
+      v-if="option.children"
+      ref="childRef"
+    >
       <div
         class="context-item"
         v-for="child in option.children"
         :key="child.label"
         :class="[{ critical: child.critical }, child.type]"
-        @click="child.action && child.action()"
+        @click="child.action && runChildAction(child.action)"
       >
         <div class="label ellip">
           {{ child.label }}
@@ -20,11 +38,83 @@
 </template>
 
 <script setup lang="ts">
-import { Option } from "@/interfaces";
+import { ref } from "vue";
+import { createPopper, Instance } from "@popperjs/core";
 
-defineProps<{
+import { Option } from "@/interfaces";
+import { contextChildrenShowMode } from "@/composables/enums";
+
+const props = defineProps<{
   option: Option;
+  childrenShowMode: contextChildrenShowMode;
 }>();
+
+const emit = defineEmits<{
+  (event: "hideContextMenu"): void;
+}>();
+
+const parentRef = ref<HTMLElement>();
+const childRef = ref<HTMLElement>();
+const childrenShown = ref(false);
+
+let popperInstance: Instance | null = null;
+
+function showChildren() {
+  if (childrenShown.value) {
+    childrenShown.value = false;
+    return;
+  }
+
+  popperInstance = createPopper(
+    parentRef.value as HTMLElement,
+    childRef.value as HTMLElement,
+    {
+      placement: "right-start",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [-5, -2],
+          },
+        },
+      ],
+    }
+  );
+  childRef.value ? (childRef.value.style.visibility = "visible") : null;
+  childrenShown.value = true;
+}
+
+function hideChildren() {
+  childRef.value ? (childRef.value.style.visibility = "hidden") : null;
+  popperInstance?.destroy();
+  childrenShown.value = false;
+}
+
+function hideContextMenu() {
+  if (props.option.children) return;
+  emit("hideContextMenu");
+}
+
+function runAction() {
+  if (props.option.children) {
+    if (childrenShown.value) {
+      console.log("what");
+      hideChildren();
+      return;
+    }
+
+    showChildren();
+    return;
+  }
+
+  props.option.action && props.option.action();
+  hideContextMenu();
+}
+
+function runChildAction(action: () => void) {
+  action();
+  emit("hideContextMenu");
+}
 </script>
 
 <style lang="scss">
@@ -40,19 +130,15 @@ defineProps<{
     width: 1.5rem;
     position: absolute;
     right: $small;
-    background-image: url("../assets/icons/expand.svg");
+    background-image: url("../../assets/icons/expand.svg");
   }
 
   .children {
     position: absolute;
-    right: -13rem;
     width: 13rem;
-    top: -0.5rem;
-    max-height: 23.5rem;
 
     background-color: $context;
     transform: scale(0);
-    transform-origin: top left;
     padding: $small 0;
 
     .context-item {
@@ -66,12 +152,12 @@ defineProps<{
 
   &:hover {
     background: $darkestblue;
+  }
 
-    .children {
-      transform: scale(1);
-      transition: transform 0.1s ease-in-out;
-      transition-delay: 0.3s;
-    }
+  .children {
+    transform: scale(0);
+    overflow: auto;
+    max-height: calc(100vh - 10rem);
   }
 
   .icon {

src/components/RightSideBar/Queue.vue

@@ -13,7 +13,6 @@
       key-field="id"
       v-slot="{ item, index }"
     >
-    
       <TrackItem
         :index="index"
         :track="item.track"
@@ -52,7 +51,7 @@ function playFromQueue(index: number) {
 function scrollToCurrent() {
   const elem = document.getElementById("queue-scrollable") as HTMLElement;
 
-  const top = queue.currentindex * itemHeight - itemHeight;
+  const top = (queue.currentindex - 1) * itemHeight;
   elem.scroll({
     top,
     behavior: "smooth",

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,19 +1,17 @@
 <template>
   <div id="right-tabs" class="rounded">
     <div class="tab-buttons-wrapper">
-      <Teleport :disabled="!isOnSearchPage" to="#nav-tab-headers">
-        <div class="tabheaders rounded-sm no-scroll">
-          <div
-            class="tab"
-            v-for="tab in tabs"
-            :key="tab"
-            @click="switchTab(tab)"
-            :class="{ activetab: tab === currentTab }"
-          >
-            {{ tab }}
-          </div>
+      <div class="tabheaders rounded-sm no-scroll">
+        <div
+          class="tab"
+          v-for="tab in tabs"
+          :key="tab"
+          @click="switchTab(tab)"
+          :class="{ activetab: tab === currentTab }"
+        >
+          {{ tab }}
         </div>
-      </Teleport>
+      </div>
     </div>
 
     <div id="tab-content" v-auto-animate>
@@ -24,7 +22,6 @@
 
 <script setup lang="ts">
 defineProps<{
-  isOnSearchPage?: boolean;
   tabs: string[];
   currentTab: string;
 }>();

src/components/RightSideBar/SearchInput.vue

@@ -26,11 +26,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
+
+import useTabStore from "@/stores/tabs";
+import useSearchStore from "@/stores/search";
+
 import BackSvg from "@/assets/icons/arrow.svg";
 import SearchSvg from "@/assets/icons/search.svg";
-import useSearchStore from "@/stores/search";
-import useTabStore from "@/stores/tabs";
 
 const props = defineProps<{
   on_nav?: boolean;

src/components/SettingsView/Components/Select.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="setting-select rounded-sm no-scroll">
+    <div
+      class="option"
+      v-for="option in optionsWithActive"
+      :key="option.title"
+      :class="{ active: option.active }"
+      @click="setterFn(option.value)"
+    >
+      {{ option.title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SettingOption } from "@/interfaces/settings";
+import { computed } from "vue";
+
+const props = defineProps<{
+  options: SettingOption[] | undefined;
+  source: () => string;
+  setterFn: (value: any) => void;
+}>();
+
+const optionsWithActive = computed(() => {
+  return props.options?.map((option) => {
+    return {
+      ...option,
+      active: option.value === props.source(),
+    };
+  });
+});
+</script>
+
+<style lang="scss">
+.setting-select {
+  display: flex;
+  background-color: $gray3;
+
+  .option {
+    padding: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+    min-width: 4rem;
+    text-align: center;
+  }
+
+  .option.active {
+    background-color: $darkestblue;
+  }
+}
+</style>

src/components/SettingsView/Group.vue

@@ -19,6 +19,12 @@
             @click="setting.action()"
             :state="setting.source()"
           />
+          <Select
+            v-if="setting.type === SettingType.select"
+            :options="setting.options"
+            :source="setting.source"
+            :setterFn="setting.action"
+          />
         </div>
       </div>
     </div>
@@ -26,8 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import { SettingGroup, SettingType } from "@/interfaces/settings";
+import { SettingType } from "@/settings/enums";
+import { SettingGroup } from "@/interfaces/settings";
+
 import Switch from "./Components/Switch.vue";
+import Select from "./Components/Select.vue";
 
 defineProps<{
   group: SettingGroup;
@@ -39,7 +48,7 @@ defineProps<{
   display: grid;
   gap: $small;
   margin-top: 2rem;
-  
+
   &:first-child {
     margin-top: 0;
   }
@@ -51,7 +60,7 @@ defineProps<{
   h4 {
     margin: $small auto;
   }
-  
+
   .desc {
     opacity: 0.5;
     font-size: 0.8rem;

src/components/shared/SongItem.vue

@@ -94,7 +94,7 @@ function emitUpdate() {
   emit("playThis");
 }
 
-function showMenu(e: Event) {
+function showMenu(e: MouseEvent) {
   showContext(e, props.track, options_button_clicked);
 }
 </script>

src/composables/context.ts

@@ -9,13 +9,13 @@ import { Track } from "@/interfaces";
 import trackContext from "@/contexts/track_context";
 
 export const showTrackContextMenu = (
-  e: Event,
+  e: MouseEvent,
   track: Track,
   flag: Ref<boolean>
 ) => {
   const menu = useContextStore();
 
-  const options = trackContext(track, useModalStore, useQueueStore);
+  const options = () => trackContext(track, useModalStore, useQueueStore);
 
   menu.showContextMenu(e, options, ContextSrc.Track);
   flag.value = true;

src/composables/enums.ts

@@ -46,3 +46,8 @@ export const FuseTrackOptions = {
     { name: "albumartist", weight: 0.25 },
   ],
 };
+
+export enum contextChildrenShowMode {
+  click = "click",
+  hover = "hover",
+}

src/interfaces/settings.ts

@@ -1,9 +1,4 @@
-export enum SettingType {
-  text,
-  select,
-  multiselect,
-  binary,
-}
+import { SettingType } from "@/settings/enums";
 
 export interface SettingOption {
   title: string;

src/settings/enums.ts

@@ -0,0 +1,6 @@
+export enum SettingType {
+  text,
+  select,
+  multiselect,
+  binary,
+}

src/settings/general/context-children-show-mode.ts

@@ -0,0 +1,27 @@
+import { Setting } from "@/interfaces/settings";
+import { SettingType } from "@/settings/enums";
+import { contextChildrenShowModeStrings as showModeStr } from "./../strings";
+
+import useSettingsStore from "@/stores/settings";
+import { contextChildrenShowMode as mode } from "@/composables/enums";
+
+const settings = useSettingsStore;
+
+const context_children_show_mode: Setting = {
+  title: showModeStr.settings.show_mode,
+  type: SettingType.select,
+  options: [
+    {
+      title: mode.click,
+      value: mode.click,
+    },
+    {
+      title: mode.hover,
+      value: mode.hover,
+    },
+  ],
+  source: () => settings().contextChildrenShowMode,
+  action: (value: mode) => settings().setContextChildrenShowMode(value),
+};
+
+export default [context_children_show_mode];

src/settings/general/extend-width.ts

@@ -1,7 +1,9 @@
-import { Setting, SettingType } from "@/interfaces/settings";
-import useSettingsStore from "@/stores/settings";
+import { SettingType } from "../enums";
+import { Setting } from "@/interfaces/settings";
 import { appWidthStrings } from "./../strings";
 
+import useSettingsStore from "@/stores/settings";
+
 const settings = useSettingsStore;
 
 const extend_to_full_width: Setting = {

src/settings/general/index.ts

@@ -1,5 +1,6 @@
 import { SettingCategory } from "@/interfaces/settings";
 import * as strings from "../strings";
+import contextChildrenShowMode from "./context-children-show-mode";
 import extendWidth from "./extend-width";
 import nowPlaying from "./now-playing";
 import sidebarSettings from "./sidebar";
@@ -10,7 +11,11 @@ export default {
   title: "General",
   groups: [
     {
-      settings: [...sidebarSettings, ...extendWidth],
+      settings: [
+        ...sidebarSettings,
+        ...extendWidth,
+        ...contextChildrenShowMode,
+      ],
     },
     {
       title: npStrings.title,

src/settings/general/now-playing.ts

@@ -1,7 +1,9 @@
-import { Setting, SettingType } from "@/interfaces/settings";
-import useSettingsStore from "@/stores/settings";
+import { SettingType } from "../enums";
+import { Setting } from "@/interfaces/settings";
 import { nowPlayingStrings as data } from "../strings";
 
+import useSettingsStore from "@/stores/settings";
+
 const settings = useSettingsStore;
 
 const disable_np_img: Setting = {

src/settings/general/sidebar.ts

@@ -1,5 +1,7 @@
+import { SettingType } from "../enums";
 import { sidebarStrings } from "./../strings";
-import { Setting, SettingType } from "@/interfaces/settings";
+import { Setting } from "@/interfaces/settings";
+
 import useSettingsStore from "@/stores/settings";
 
 const settings = useSettingsStore;

src/settings/strings.ts

@@ -28,3 +28,9 @@ export const sidebarStrings = <S>{
     use_sidebar: "Show right sidebar",
   },
 };
+
+export const contextChildrenShowModeStrings = <S>{
+  settings: {
+    show_mode: "Show context children on",
+  },
+};

src/stores/context.ts

@@ -1,70 +1,79 @@
 import { defineStore } from "pinia";
-import normalize from "../composables/normalizeContextMenu";
 import { Option } from "../interfaces";
 import { ContextSrc } from "../composables/enums";
+import { createPopper, VirtualElement } from "@popperjs/core";
 
-function getPlaceholders(length: number) {
-  let list: Option[] = [];
-
-  for (let index = 0; index < length; index++) {
-    list.push("" as Option);
-  }
-
-  return list;
+function generateGetBoundingClientRect(x = 0, y = 0) {
+  return () => ({
+    width: 0,
+    height: 0,
+    top: y,
+    right: x,
+    bottom: y,
+    left: x,
+  });
 }
 
-getPlaceholders(5);
-
 export default defineStore("context-menu", {
   state: () => ({
     visible: false,
-    options: getPlaceholders(5),
-    x: 500,
-    y: 500,
-    normalizedX: false,
-    normalizedY: false,
+    options: {} as Option[],
     src: <null | string>"",
+    elem: <HTMLElement | null>null,
   }),
   actions: {
     showContextMenu(
-      e: any,
-      context_options: Promise<Option[]>,
+      e: MouseEvent,
+      getContextOptions: () => Promise<Option[]>,
       src: ContextSrc
     ) {
       if (this.visible) {
-        this.visible = false;
+        this.hideContextMenu();
         return;
       }
 
+      if (this.elem === null) {
+        this.elem = document.getElementById("context-menu");
+      }
+
+      const virtualElement = {
+        getBoundingClientRect: generateGetBoundingClientRect(e.x, e.y),
+      } as VirtualElement;
+
+      getContextOptions()
+        .then((options) => {
+          this.options = options;
+        })
+        .then(() => {
+          createPopper(virtualElement, this.elem as HTMLElement, {
+            placement: "right-start",
+            modifiers: [
+              {
+                name: "flip",
+                options: {
+                  fallbackPlacements: ["left-start"],
+                },
+              },
+            ],
+          });
+        });
+
       this.visible = true;
-      context_options.then((options) => {
-        this.options = options;
-      });
-
-      const xy = normalize(e.clientX, e.clientY);
-
-      this.x = xy.normalX;
-      this.y = xy.normalY;
-
-      this.normalizedX = xy.normalizedX;
-      this.normalizedY = xy.normalizedY;
       this.src = src;
+
+      // const xy = normalize(e.clientX, e.clientY);
+
+      // this.x = xy.normalX;
+      // this.y = xy.normalY;
+
+      // this.normalizedX = xy.normalizedX;
+      // this.normalizedY = xy.normalizedY;
     },
     hideContextMenu() {
       this.visible = false;
       this.src = null;
       this.options = [];
-    },
-    hasManyChildren() {
-      let result = false;
-
-      this.options.forEach((option: Option) => {
-        if (option.children && option.children.length > 9) {
-          result = true;
-        }
-      });
-
-      return result;
+      this.elem ? (this.elem.style.transform = "scale(0)") : null;
     },
   },
 });

src/stores/settings/actions.ts

@@ -1 +0,0 @@
-

src/stores/settings/index.ts

@@ -1,3 +1,4 @@
+import { contextChildrenShowMode } from "@/composables/enums";
 import { xxl } from "@/composables/useBreakpoints";
 import { defineStore } from "pinia";
 
@@ -6,6 +7,7 @@ export default defineStore("settings", {
     use_np_img: false,
     use_sidebar: true,
     extend_width: false,
+    contextChildrenShowMode: contextChildrenShowMode.click,
   }),
   actions: {
     toggleUseNPImg() {
@@ -17,10 +19,13 @@ export default defineStore("settings", {
     toggleExtendWidth() {
       this.extend_width = !this.extend_width;
     },
+    setContextChildrenShowMode(mode: contextChildrenShowMode) {
+      this.contextChildrenShowMode = mode;
+    },
   },
   getters: {
     can_extend_width(): boolean {
-     return xxl.value
+      return xxl.value;
     },
   },
   persist: true,

src/svg.d.ts

@@ -1,4 +1,4 @@
 declare module "*.svg" {
-  const content: string;
+  const content: any;
   export default content;
 }

src/views/QueueView.vue

@@ -54,7 +54,7 @@ function playFromQueue(index: number) {
 function scrollToCurrent() {
   const scrollable = document.getElementById("queue-page-scrollable");
   const itemHeight = 64;
-  const top = queue.currentindex * itemHeight - itemHeight;
+  const top = (queue.currentindex - 1) * itemHeight;
 
   scrollable?.scrollTo({
     top,