Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-22 16:47:16 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: improve user widget popover

Browse Source
This commit is contained in:
mrjvs
2026-08-12 14:05:46 +02:00
parent 43e734bf21
commit f29e587819
3 changed files with 260 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
package-lock.json generated
View File

@@ -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",

5
package.json
View File

@@ -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
}
}

115
src/components/Navbar/Navbar.vue
View File

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