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/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",
+  },
+};