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/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;