@mundogamernetwork/shared-ui 1.14.5 → 1.16.0

package/components/ui/MgHeaderUIUser.vue

@@ -3,9 +3,13 @@ import { storeToRefs } from "pinia";
 
 const emit = defineEmits(["toggleVisible"]);
 
-const showOnline = ref(true);
 const authStore = useAuthStore();
-const { user, signedIn } = storeToRefs(authStore);
+// showOnline used to be a local ref here — flipped on click, called no
+// endpoint, reset on every reload. The auth store's fetchOnlineStatus /
+// toggleOnlineStatus (see tv-frontend's store, the pattern this now
+// matches everywhere) are what actually persist it; a host whose store
+// doesn't implement them yet just won't expose features.statusOnline.
+const { user, signedIn, showOnline } = storeToRefs(authStore);
 const { performLogout } = useLogout();
 
 const runtimeConfig = useRuntimeConfig();
@@ -31,53 +35,32 @@ onMounted(() => {
 	document.addEventListener("keydown", ({ key }) => {
 		if (key === "Escape") emit("toggleVisible");
 	});
+	// Guarded: not every host's auth store has adopted this pattern yet
+	// (see tv-frontend's store for the reference implementation).
+	if (signedIn.value && typeof authStore.fetchOnlineStatus === "function") {
+		authStore.fetchOnlineStatus();
+	}
 });
 
 onUnmounted(() => {
 	document.removeEventListener("click", focusOut);
 });
 
-const login = () => {
-	const redirectTo = encodeURIComponent(window.location.href);
-	window.location.href = `${accountsBaseUrl}/login?redirect_to=${redirectTo}`;
-};
-
-// Computed in script rather than read inline in the template: a bare `window`
-// reference in the template crashes the render (it's not part of the
-// script-setup bindings the compiled render function has access to, and it's
-// undefined during SSR), which took down this whole dropdown for every
-// signed-out visitor.
-const registerHref = computed(
-	() => `${accountsBaseUrl}/register?redirect_to=${encodeURIComponent(import.meta.client ? window.location.href : "")}`,
-);
-
 const handleLogout = async () => {
 	await performLogout(`${accountsBaseUrl}/login`);
 };
+
+const handleToggleOnline = () => {
+	if (typeof authStore.toggleOnlineStatus === "function") {
+		authStore.toggleOnlineStatus();
+	}
+};
 </script>
 
 <template>
 	<div ref="refDiv" :class="{ 'ui-config-user': true, 'signed-in': signedIn }">
 		<div ref="wrapper" class="ui-config-user__content">
-			<div v-if="!signedIn" class="ui-config-user__content__tab">
-				<div class="ui-config-user__option">
-					<div class="w-100">
-						<a class="btn primary lg w-100" href="#" @click.prevent="login">
-							{{ $t("header.login.btn_login") }}
-						</a>
-					</div>
-				</div>
-				<div class="ui-config-user__option">
-					<div>
-						<p class="d-flex">
-							{{ $t("header.login.register_message") }}
-							<a :href="registerHref" class="ms-1">
-								{{ $t("header.login.btn_register") }}
-							</a>
-						</p>
-					</div>
-				</div>
-			</div>
+			<MgLoginRegisterMenu v-if="!signedIn" :dropdown="false" />
 
 			<div v-else class="signed-in-menu">
 				<div class="row info-row ps-0">
@@ -134,7 +117,7 @@ const handleLogout = async () => {
 					<div class="status-toggle">
 						<span>{{ $t("account_menu.buttons.show_online") }}</span>
 						<label class="switch">
-							<input v-model="showOnline" type="checkbox" />
+							<input :checked="showOnline" type="checkbox" @change="handleToggleOnline" />
 							<span class="slider"></span>
 						</label>
 					</div>
@@ -169,74 +152,26 @@ const handleLogout = async () => {
 	top: 45px;
 	right: 0;
 	z-index: 999;
-	overflow: hidden;
+	// Signed-in content is open-ended — hosts add their own extra-menu-items
+	// (Jobs alone has 5 nav links plus a CTA button and pricing link on top
+	// of the base menu). With no height cap this just grew as tall as its
+	// content, unbounded, and once the earlier width:100% bug (see below)
+	// stopped collapsing it to an unreadable 32px sliver, the height had
+	// nowhere to go but off the bottom of the viewport — no scrollbar, no
+	// way to reach whatever content and the page below it that it covered.
+	max-height: calc(100vh - 65px);
+	overflow-y: auto;
 	transition: all ease 0.5s;
 
 	&:not(.signed-in) {
 		width: 340px;
 	}
 
-	&__option {
-		color: var(--sidebar-menus-fg);
-		display: flex;
-		justify-content: space-between;
-		padding: 0 1rem;
-		font-size: 0.875rem;
-		min-height: 48px;
-		align-items: center;
-
-		a {
-			font-size: 16px !important;
-			font-weight: 400;
-		}
-
-		// Self-contained styling, not a host `.btn.primary` Bootstrap class:
-		// this component ships to hosts that don't all load Bootstrap (Shop
-		// doesn't), so relying on it left the login button rendering as a
-		// bare unstyled link there. Same color tokens the rest of this file
-		// already falls back through (see .plans-pricing-link below).
-		a.btn.primary {
-			display: block;
-			text-align: center;
-			padding: 0.625rem 1rem;
-			background: var(--highlight-color, var(--header-active-fg, var(--active)));
-			color: var(--header-ui-config-bg, #fff);
-			text-decoration: none;
-
-			&:hover {
-				opacity: 0.85;
-			}
-		}
-
-		& > div > p {
-			font-size: 15px !important;
-			font-weight: 400;
-			color: var(--sidebar-menus-fg);
-
-			a {
-				color: var(--highlight-color, var(--header-active-fg, var(--active)));
-			}
-		}
-	}
-
 	&__content {
 		display: flex;
 		justify-content: flex-start;
 		align-items: flex-start;
 		transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
-
-		&__tab {
-			flex: 1 0 100%;
-			width: 100%;
-			background-color: var(--header-ui-config-bg);
-
-			p {
-				color: var(--active);
-				font-size: 12px;
-				padding: 0.5rem 1rem;
-				margin: 0;
-			}
-		}
 	}
 
 	.signed-in-menu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.14.5",
+  "version": "1.16.0",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",