feat: replace popper with floating-vue

frontend/nuxt.config.ts

@@ -47,12 +47,12 @@ export default defineNuxtConfig({
   modules: [
     "@unocss/nuxt",
     "@pinia/nuxt",
-    "unplugin-icons/nuxt",
     "@vueuse/nuxt",
     "@nuxt/eslint",
     "@nuxtjs/i18n",
     "@sentry/nuxt/module",
     "@nuxtjs/turnstile",
+    "floating-vue/nuxt",
     [
       "unplugin-icons/nuxt",
       {

frontend/package.json

@@ -41,6 +41,7 @@
     "dompurify": "3.2.3",
     "easymde": "2.18.0",
     "filesize": "10.1.6",
+    "floating-vue": "5.2.2",
     "github-slugger": "2.0.0",
     "jsdom": "25.0.1",
     "jwt-decode": "4.0.0",
@@ -59,7 +60,6 @@
     "universal-cookie": "7.2.2",
     "vue-advanced-cropper": "2.8.9",
     "vue-chartjs": "5.3.2",
-    "vue3-popper": "1.5.0",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
@@ -92,7 +92,6 @@
     "oxlint": "0.15.4",
     "pnpm": "9.15.2",
     "prettier": "3.4.2",
-    "regenerator-runtime": "0.14.1",
     "sass": "1.83.0",
     "typescript": "5.7.2",
     "unplugin-icons": "0.22.0",

frontend/src/app.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import "./assets/css/main.css";
-// popper needs this?
-import "regenerator-runtime/runtime";
 import type { HangarNuxtError } from "~/types/components/error";
 import { identify } from "~/composables/useTracking";
 

frontend/src/components/Homepage.vue

@@ -175,7 +175,7 @@ useSeo(
           v-on="useTracking('homepage-search', { platformName })"
         />
         <div class="md:hidden flex">
-          <Menu>
+          <Menu as="div">
             <MenuButton
               id="sort-button"
               class="bg-gradient-to-r from-primary-500 to-primary-400 rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2"

frontend/src/components/UserHeader.vue

@@ -77,10 +77,10 @@ const canEditCurrentUser = computed<boolean>(() => {
           <span v-if="viewingUser.locked" class="ml-1">
             <IconMdiLockOutline />
           </span>
-          <Popper v-if="viewingUser.nameHistory?.length > 0">
+          <Popper v-if="viewingUser.nameHistory?.length > 0" placement="bottom">
             <IconMdiChevronDown cursor="pointer" />
-            <template #content="{ close }">
-              <div class="-mt-2.5 p-2 flex flex-col rounded background-default filter shadow-default text-base" @click="close()">
+            <template #content>
+              <div class="-mt-2.5 p-2 flex flex-col rounded background-default filter shadow-default text-base">
                 <div class="font-bold">Was known as:</div>
                 <div v-for="(history, idx) of viewingUser.nameHistory" :key="idx">{{ history.oldName }} until <PrettyTime :time="history.date" long /></div>
               </div>

frontend/src/components/design/DropdownButton.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { OnClickOutside } from "@vueuse/components";
-
 const props = withDefaults(
   defineProps<{
     name?: string;
@@ -17,32 +15,25 @@ const props = withDefaults(
     placement: "bottom-end",
   }
 );
-
-const open = ref(false);
-function close() {
-  open.value = false;
-}
-
-defineExpose({ close });
 </script>
 
 <template>
-  <OnClickOutside @trigger="open = false">
-    <Popper as="div" :show="open" :placement="placement">
-      <Button :button-type="props.buttonType" :size="props.buttonSize" @click="open = !open">
+  <Popper :placement="placement">
+    <template #default="{ shown }">
+      <Button :button-type="props.buttonType" :size="props.buttonSize">
         <slot name="button-label">
           <span class="mx-1">{{ props.name }}</span>
         </slot>
         <template v-if="props.buttonArrow">
-          <IconMdiMenu v-if="open" class="text-lg" />
+          <IconMdiMenu v-if="shown" class="text-lg" />
           <IconMdiMenuDown v-else class="text-lg" />
         </template>
       </Button>
-      <template #content>
-        <div class="flex flex-col z-10 -mt-2 py-1 rounded border-t-2 border-primary-500 background-default shadow-default">
-          <slot :close="close" />
-        </div>
-      </template>
-    </Popper>
-  </OnClickOutside>
+    </template>
+    <template #content="{ close }">
+      <div class="flex flex-col z-10 py-1 rounded border-t-2 border-primary-500 background-default shadow-default">
+        <slot :close="close" />
+      </div>
+    </template>
+  </Popper>
 </template>

frontend/src/components/design/ErrorTooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Popper from "vue3-popper";
+import { Tooltip } from "floating-vue";
 import type { ErrorObject } from "@vuelidate/core";
 
 const props = defineProps<{
@@ -16,40 +16,37 @@ const formattedError = computed<string | Ref<string>>(() => {
 const hasError = computed<boolean>(() => {
   return props.errorMessages ? props.errorMessages.length > 0 : false;
 });
-
-onErrorCaptured((err) => {
-  if (err.stack?.includes("popper")) {
-    popperLog("Captured popper error", err);
-    return false;
-  }
-});
 </script>
 
 <template>
-  <Popper v-bind="$attrs" :show="hasError" arrow placement="bottom" class="text-center reset-popper" data-allow-mismatch="style">
+  <!-- hardcoding the id is meh, but else hydration breaks and it doesn't actually seem to be used for accessibility? -->
+  <Tooltip
+    v-bind="$attrs"
+    :shown="hasError"
+    theme="error-tooltip"
+    :triggers="[]"
+    :delay="0"
+    placement="bottom"
+    class="text-center reset-popper"
+    aria-id="tooltip"
+  >
     <slot />
-    <template #content>
+    <template #popper>
       {{ formattedError || "error" }}
     </template>
-  </Popper>
+  </Tooltip>
 </template>
 
-<style scoped>
-:deep(.popper) {
-  padding: 0.4rem;
+<style>
+.v-popper--theme-error-tooltip .v-popper__inner {
+  max-width: 700px;
+  background-color: #d62e22;
+  padding: 0.5rem;
   border-radius: 0.375rem;
   color: #fff;
 }
 
-:deep(.popper),
-:deep(.popper #arrow::before),
-:deep(.popper:hover),
-:deep(.popper:hover > #arrow::before) {
-  background: #d62e22 !important;
-}
-
-.reset-popper {
-  border: unset !important;
-  margin: unset !important;
+.v-popper--theme-error-tooltip .v-popper__arrow-outer {
+  border-color: #d62e22;
 }
 </style>