From f29e58781952c9296366ecb6a4e049cc5047160e Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 12 Aug 2026 14:05:46 +0200
Subject: [PATCH] feat: improve user widget popover

---
 package-lock.json                | 198 +++++++++++++++++++++++++++++++
 package.json                     |   5 +-
 src/components/Navbar/Navbar.vue | 115 +++++++++---------
 3 files changed, 260 insertions(+), 58 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9a0ce3c..840a201 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
 				"@nuxtjs/i18n": "^10.6.0",
 				"@pinia/nuxt": "^1.0.1",
 				"@pretendonetwork/grpc": "^2.5.4",
+				"@vueuse/core": "^14.4.0",
 				"better-sqlite3": "^12.11.1",
 				"discord-api-types": "^0.38.53",
 				"eslint": "^9.39.5",
@@ -29,6 +30,7 @@
 				"nuxt": "^4.5.2",
 				"octokit": "^5.0.5",
 				"papr": "^17.1.1",
+				"reka-ui": "^2.10.3",
 				"stripe": "^22.4.0",
 				"vue": "^3.5.13",
 				"vue-router": "^5.2.0",
@@ -1399,6 +1401,68 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+			"integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.12"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+			"integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.8.0",
+				"@floating-ui/utils": "^0.2.12"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.12",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+			"integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+			"license": "MIT"
+		},
+		"node_modules/@floating-ui/vue": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
+			"integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.6",
+				"@floating-ui/utils": "^0.2.11",
+				"vue-demi": ">=0.13.0"
+			}
+		},
+		"node_modules/@floating-ui/vue/node_modules/vue-demi": {
+			"version": "0.14.10",
+			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+			"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@grpc/grpc-js": {
 			"version": "1.14.4",
 			"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.4.tgz",
@@ -1670,6 +1734,24 @@
 				"vue": ">=3.0.0"
 			}
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.12.3",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.3.tgz",
+			"integrity": "sha512-fuLX+3ZKLsxI73y8b01EG/WjHb6gE6weCqlfawPO27kBWGMh9G1yH6Csv1uU7/cac9H2GHmOMt6CjmuQ1aia4Q==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
+		"node_modules/@internationalized/number": {
+			"version": "3.6.7",
+			"resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+			"integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@intlify/bundle-utils": {
 			"version": "11.2.4",
 			"resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-11.2.4.tgz",
@@ -6347,6 +6429,41 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.23",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+			"integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
+		"node_modules/@tanstack/virtual-core": {
+			"version": "3.17.7",
+			"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.7.tgz",
+			"integrity": "sha512-bp+v10y65sp2H7WpWfIMyxTNfl8ZVfxFTLRjPIFRryi6FV/J33z4IS53WO4pTk36KlvJ4iLiQz+oaydDC1xbcA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/vue-virtual": {
+			"version": "3.13.35",
+			"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.35.tgz",
+			"integrity": "sha512-lOfSPvgPdlaH6Qy+CyIc3XpycitaSQ9GECndGpTuDiu+uDA1am+90yWXwzDSd/20ZM196ggWJLS+Qb6WjVd/OA==",
+			"license": "MIT",
+			"dependencies": {
+				"@tanstack/virtual-core": "3.17.7"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"vue": "^2.7.0 || ^3.0.0"
+			}
+		},
 		"node_modules/@tybys/wasm-util": {
 			"version": "0.10.3",
 			"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -6458,6 +6575,12 @@
 			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
 			"license": "MIT"
 		},
+		"node_modules/@types/web-bluetooth": {
+			"version": "0.0.21",
+			"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+			"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+			"license": "MIT"
+		},
 		"node_modules/@types/webidl-conversions": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
@@ -7503,6 +7626,44 @@
 			"integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
 			"license": "MIT"
 		},
+		"node_modules/@vueuse/core": {
+			"version": "14.4.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.4.0.tgz",
+			"integrity": "sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/web-bluetooth": "^0.0.21",
+				"@vueuse/metadata": "14.4.0",
+				"@vueuse/shared": "14.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"vue": "^3.5.0"
+			}
+		},
+		"node_modules/@vueuse/metadata": {
+			"version": "14.4.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.4.0.tgz",
+			"integrity": "sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/@vueuse/shared": {
+			"version": "14.4.0",
+			"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.4.0.tgz",
+			"integrity": "sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"vue": "^3.5.0"
+			}
+		},
 		"node_modules/@webcontainer/env": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@webcontainer/env/-/env-1.1.1.tgz",
@@ -7794,6 +7955,18 @@
 			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
 			"license": "Python-2.0"
 		},
+		"node_modules/aria-hidden": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+			"integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/array-buffer-byte-length": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -18442,6 +18615,31 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/reka-ui": {
+			"version": "2.10.3",
+			"resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.10.3.tgz",
+			"integrity": "sha512-nJGZbwcha8AcP2wbnjodfzsciTKBqp1mIzepC9Pi2xDI/YK3++ej3vpJOSPyxqrkq1Oorj4K+BdJkbVCV6x6ag==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.6.13",
+				"@floating-ui/vue": "^1.1.6",
+				"@internationalized/date": "^3.5.0",
+				"@internationalized/number": "^3.5.0",
+				"@tanstack/vue-virtual": "^3.12.0",
+				"@vueuse/core": "^14.1.0",
+				"@vueuse/shared": "^14.1.0",
+				"aria-hidden": "^1.2.4",
+				"defu": "^6.1.5",
+				"ohash": "^2.0.11"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/zernonia"
+			},
+			"peerDependencies": {
+				"vue": ">= 3.4.0"
+			}
+		},
 		"node_modules/remark-emoji": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-5.0.2.tgz",
diff --git a/package.json b/package.json
index e51d48a..521c24b 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
 		"@nuxtjs/i18n": "^10.6.0",
 		"@pinia/nuxt": "^1.0.1",
 		"@pretendonetwork/grpc": "^2.5.4",
+		"@vueuse/core": "^14.4.0",
 		"better-sqlite3": "^12.11.1",
 		"discord-api-types": "^0.38.53",
 		"eslint": "^9.39.5",
@@ -33,6 +34,7 @@
 		"nuxt": "^4.5.2",
 		"octokit": "^5.0.5",
 		"papr": "^17.1.1",
+		"reka-ui": "^2.10.3",
 		"stripe": "^22.4.0",
 		"vue": "^3.5.13",
 		"vue-router": "^5.2.0",
@@ -53,6 +55,7 @@
 		"esbuild@0.25.12": true,
 		"protobufjs@7.6.5": true,
 		"unrs-resolver@1.12.2": true,
-		"@parcel/watcher@2.6.0": true
+		"@parcel/watcher@2.6.0": true,
+		"vue-demi@0.14.10": true
 	}
 }
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index cf942b1..2449324 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
+import { Popover } from 'reka-ui/namespaced';
 const { locales, setLocale } = useI18n();
 
 const me = useMeStore();
 const authStore = useAuthStore();
 const user = computed(() => me.user);
 
-const widgetOpen = ref(false);
 const openDropdown = ref<boolean | string>(false);
 function handleDropdownButton(dropdown: boolean | string) {
 	if (!openDropdown.value) {
@@ -467,56 +467,59 @@ onMounted(() => {
         </div>
       </div>
 
-      <div
-        v-if="user"
-        class="user-widget-wrapper logged-in"
-      >
-        <div
-          class="user-widget-toggle"
-          @click="widgetOpen = true"
+      <div class="user-widget-wrapper logged-in">
+        <Popover.Root
+          v-if="user"
+          as="div"
         >
-          <img
-            :src="user.mii?.imageUrl ?? '#'"
-            :alt="user.mii?.name ?? ''"
+          <Popover.Trigger
+            as="div"
+            class="user-widget-toggle"
           >
-        </div>
-        <div
-          class="user-widget"
-          :class="{
-            'active': widgetOpen
-          }"
-        >
-          <div class="user-avatar">
             <img
               :src="user.mii?.imageUrl ?? '#'"
               :alt="user.mii?.name ?? ''"
             >
-          </div>
-          <div class="user-info">
-            <div
-              v-if="user.mii"
-              class="mii-name"
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content
+              as="div"
+              force-mount
+              class="user-widget"
             >
-              {{ user.mii.name }}
-            </div>
-            <div class="pnid">
-              {{ user.username }}
-            </div>
-          </div>
-          <div class="buttons">
-            <a href="/account">
-              <button class="button primary">
-                {{ $t("nav.accountWidget.settings") }}
-              </button>
-            </a>
-            <button
-              class="button logout"
-              @click="authStore.logout()"
-            >
-              {{ $t("nav.accountWidget.logout") }}
-            </button>
-          </div>
-        </div>
+              <div class="user-avatar">
+                <img
+                  :src="user.mii?.imageUrl ?? '#'"
+                  :alt="user.mii?.name ?? ''"
+                >
+              </div>
+              <div class="user-info">
+                <div
+                  v-if="user.mii"
+                  class="mii-name"
+                >
+                  {{ user.mii.name }}
+                </div>
+                <div class="pnid">
+                  {{ user.username }}
+                </div>
+              </div>
+              <div class="buttons">
+                <a href="/account">
+                  <button class="button primary">
+                    {{ $t("nav.accountWidget.settings") }}
+                  </button>
+                </a>
+                <button
+                  class="button logout"
+                  @click="authStore.logout()"
+                >
+                  {{ $t("nav.accountWidget.logout") }}
+                </button>
+              </div>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       </div>
 
       <div
@@ -539,7 +542,7 @@ onMounted(() => {
   </header>
 </template>
 
-<style scoped>
+<style>
 header {
 	position: fixed;
 	top: 0;
@@ -882,22 +885,19 @@ header .user-widget-wrapper.logged-in .user-widget-toggle {
 }
 
 header .user-widget-wrapper .user-widget-toggle img,
-header .user-widget .user-avatar img {
+.user-widget .user-avatar img {
 	width: 100%;
 	height: 100%;
 }
 
-header .user-widget {
+.user-widget {
 	max-height: 0;
 	overflow: hidden;
 
 	box-sizing: border-box;
 	transition: max-height 300ms, padding 200ms, opacity 150ms;
 
-	position: absolute;
-	right: 0;
-	top: 48px;
-	padding: 0;
+	margin-top: 16px;
 	background: var(--bg-shade-2);
 	border-radius: 8px;
 	text-align: center;
@@ -906,13 +906,13 @@ header .user-widget {
 	box-shadow: 0 0 10px -2px var(--bg-shade-0);
 }
 
-header .user-widget.active {
+.user-widget[data-state="open"] {
 	max-height: 100vh;
 	padding: 36px;
 	opacity: 1;
 }
 
-header .user-widget .user-avatar {
+.user-widget .user-avatar {
 	width: 128px;
 	height: 128px;
 	margin: auto;
@@ -921,19 +921,20 @@ header .user-widget .user-avatar {
 	overflow: hidden;
 }
 
-header .user-widget .user-info {
+.user-widget .user-info {
+	color: var(--text-shade-1);
 	margin-top: 12px;
 }
 
-header .user-widget .user-info .mii-name {
+.user-widget .user-info .mii-name {
 	color: var(--text-shade-3);
 }
 
-header .user-widget .buttons {
+.user-widget .buttons {
 	margin-top: 12px;
 }
 
-header .user-widget .button {
+.user-widget .button {
 	margin-top: 12px;
 	width: 100%;
 	padding: 8px 60px;