180241c266
- Resolve gameServerRegistry.json's null deep_link entries against the live drop-db catalog (WoW, EverQuest, Among Us match real Game rows; OpenDAoC and the Goldberg relay genuinely have none, left null and documented why). - Fix the "0 online now" panel bug: the community landing page's persistent-world quick-strip was inferring presence from PlaySession name-matching (presenceService.getServerPresence), which hardcodes available=true even with zero matches -- always showing a fake "0" for EQEmu instead of the honest unavailable state. Switched it to the same probe-backed GameServer feed ServerStatusPanel already uses (joined by the shared wow/eqemu/daoc slug), so known-zero and count-unavailable never render the same. - Header people icon now opens a friends flyout (list, incoming requests with accept/decline, entry into chat with a friend) instead of going nowhere, mirroring the existing notifications bell's Menu/MenuButton/MenuItems pattern; badge shows pending request count. Mobile sidebar links it straight to /community/friends. - Community gets a hover submenu in the main nav (desktop) / inline sublist (mobile) listing Friends, Chat, Devices, Mods, Servers, Issues, Achievements. - User dropdown menu gets a "Your profile" entry resolved from the signed-in user's own username (/community/profile/<username>), not hardcoded.
120 lines
4 KiB
Vue
120 lines
4 KiB
Vue
<template>
|
|
<Menu v-if="user" as="div" class="relative inline-block">
|
|
<MenuButton>
|
|
<UserHeaderWidget>
|
|
<div class="inline-flex items-center text-zinc-300 hover:text-white">
|
|
<img
|
|
:src="useObject(user.profilePictureObjectId)"
|
|
class="w-5 h-5 rounded-sm"
|
|
/>
|
|
<span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
|
|
<ChevronDownIcon class="ml-3 h-4" />
|
|
</div>
|
|
</UserHeaderWidget>
|
|
</MenuButton>
|
|
|
|
<transition
|
|
enter-active-class="transition ease-out duration-100"
|
|
enter-from-class="transform opacity-0 scale-95"
|
|
enter-to-class="transform opacity-100 scale-100"
|
|
leave-active-class="transition ease-in duration-75"
|
|
leave-from-class="transform opacity-100 scale-100"
|
|
leave-to-class="transform opacity-0 scale-95"
|
|
>
|
|
<MenuItems
|
|
class="absolute right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
|
|
>
|
|
<PanelWidget class="flex-col gap-y-2">
|
|
<NuxtLink
|
|
:to="`/user/${user.id}`"
|
|
class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
|
|
>
|
|
<div class="inline-flex items-center text-zinc-300">
|
|
<img
|
|
:src="useObject(user.profilePictureObjectId)"
|
|
class="w-5 h-5 rounded-sm"
|
|
/>
|
|
<span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
<div class="h-0.5 rounded-full w-full bg-zinc-800" />
|
|
<div class="flex flex-col">
|
|
<MenuItem
|
|
v-for="(nav, navIdx) in navigation"
|
|
:key="navIdx"
|
|
v-slot="{ active, close }"
|
|
hydrate-on-visible
|
|
as="div"
|
|
>
|
|
<NuxtLink
|
|
:to="nav.route"
|
|
:class="[
|
|
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
|
'w-full text-left transition block px-4 py-2 text-sm',
|
|
]"
|
|
@click="close"
|
|
>
|
|
{{ nav.label }}
|
|
</NuxtLink>
|
|
</MenuItem>
|
|
<MenuItem v-slot="{ active, close }" hydrate-on-visible as="div">
|
|
<NuxtLink
|
|
to="/auth/signout"
|
|
:class="[
|
|
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
|
'w-full text-left transition block px-4 py-2 text-sm',
|
|
]"
|
|
:data-comment="'external=true is required because we implemented the signout as a route on the server for performance'"
|
|
:external="true"
|
|
@click="close"
|
|
>
|
|
{{ $t("auth.signout") }}
|
|
</NuxtLink>
|
|
</MenuItem>
|
|
</div>
|
|
</PanelWidget>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
import { ChevronDownIcon } from "@heroicons/vue/16/solid";
|
|
import { useObject } from "~/composables/objects";
|
|
import type { NavigationItem } from "~/composables/types";
|
|
|
|
const user = useUser();
|
|
|
|
const navigation = computed<NavigationItem[]>(() =>
|
|
[
|
|
// Resolved from the signed-in user's own username, never hardcoded --
|
|
// this is the same /community/profile/<username> route the friends
|
|
// list and now-playing rails already link to elsewhere in /community.
|
|
user.value
|
|
? {
|
|
label: $t("userHeader.profile.communityProfile"),
|
|
route: `/community/profile/${user.value.username}`,
|
|
prefix: "",
|
|
}
|
|
: undefined,
|
|
user.value?.admin
|
|
? {
|
|
label: $t("userHeader.profile.admin"),
|
|
route: "/admin",
|
|
prefix: "",
|
|
}
|
|
: undefined,
|
|
{
|
|
label: $t("userHeader.profile.settings"),
|
|
route: "/account",
|
|
prefix: "",
|
|
},
|
|
{
|
|
label: "Authorize client",
|
|
route: "/client/code",
|
|
prefix: "",
|
|
},
|
|
].filter((e) => e !== undefined),
|
|
);
|
|
</script>
|