@mundogamernetwork/shared-ui 1.16.5 → 1.16.7

package/components/ui/MgHeaderUIUser.vue

@@ -14,6 +14,7 @@ const { performLogout } = useLogout();
 
 const runtimeConfig = useRuntimeConfig();
 const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+const supportUrl = `${accountsBaseUrl}/account/support/new`;
 const features = runtimeConfig.public.mgSharedUi?.features ?? {};
 const pricingUrl = runtimeConfig.public.mgSharedUi?.pricingUrl || "";
 const { locale } = useI18n();
@@ -58,11 +59,51 @@ const handleToggleOnline = () => {
 </script>
 
 <template>
+	<!--
+		The 'signed-in' class below is a reactive :class binding on THIS SAME
+		element — it hit the identical never-repatched-after-hydration-mismatch
+		symptom the inner v-if/v-else branches did (see the comment above
+		MgLoginRegisterMenu/section further down), and unlike that inner swap,
+		there's no sibling-vnode :key trick available to fix an ancestor's own
+		class binding on itself (verified: a :key on this element does NOT
+		force it to re-evaluate — key only affects sibling-vnode comparison,
+		not a component's own reactive re-render). The width rule that used to
+		key off '.signed-in' now uses :has(.signed-in-menu) instead — real DOM
+		structure, correct regardless of whether this class ever catches up.
+		The class stays here for anything else that legitimately keys off it
+		(e.g. a host's own CSS); just don't rely on it for layout in this file.
+	-->
 	<div ref="refDiv" :class="{ 'ui-config-user': true, 'signed-in': signedIn }">
 		<div ref="wrapper" class="ui-config-user__content">
-			<MgLoginRegisterMenu v-if="!signedIn" :dropdown="false" />
-
-			<div v-else class="signed-in-menu">
+			<!--
+				This MUST render a different root tag than MgLoginRegisterMenu's
+				own root (a <div>) — a plain :key difference is NOT enough here.
+				signedIn always starts false and flips true only after the async
+				/auth/user check resolves (SSR never has the session, so every
+				load — not just a race — renders guest first, then the real
+				state client-side). When both branches are <div>s, whatever
+				code path handles that guest→signed-in swap (traced to Vue's
+				hydration-mismatch recovery, not the plain runtime v-if/v-else
+				patch — a distinct :key on each branch demonstrably did NOT
+				stop it) reuses the existing DOM node instead of replacing it:
+				the node keeps MgLoginRegisterMenu's own class
+				("mg-login-register") and scope attribute while only its
+				children get patched to the signed-in markup. Result: the
+				signed-in content renders styled by the GUEST component's CSS
+				(340px guest width instead of 240px, and .username/
+				.btn-primary-outline/.status-toggle never match their real
+				".signed-in-menu" ancestor selector, so they fall through to
+				unstyled/inherited color instead of var(--active) — text goes
+				near-invisible on any host whose global default text color is
+				dark, e.g. jobs-frontend's Bootstrap default). A genuinely
+				different tag (section, not div) forces a real replace — this
+				was verified against a live reproduction, not just reasoned
+				about; do not "simplify" this back to <div> without re-testing
+				the actual guest→signed-in transition, not just a hard reload.
+			-->
+			<MgLoginRegisterMenu v-if="!signedIn" key="guest" :dropdown="false" />
+
+			<section v-else key="signed-in" class="signed-in-menu">
 				<div class="row info-row ps-0">
 					<div class="col-auto px-3">
 						<div v-if="!user?.avatar_url" class="no-avatar-wrapper">
@@ -113,6 +154,12 @@ const handleToggleOnline = () => {
 					</a>
 				</div>
 
+				<div class="row info-row">
+					<a :href="supportUrl" target="_blank" class="support-link">
+						{{ $t("account_menu.buttons.support", "Support") }}
+					</a>
+				</div>
+
 				<div v-if="features.statusOnline" class="row info-row my-3">
 					<div class="status-toggle">
 						<span>{{ $t("account_menu.buttons.show_online") }}</span>
@@ -130,7 +177,7 @@ const handleToggleOnline = () => {
 						{{ $t("account_menu.buttons.logout") }}
 					</button>
 				</div>
-			</div>
+			</section>
 		</div>
 	</div>
 </template>
@@ -163,7 +210,16 @@ const handleToggleOnline = () => {
 	overflow-y: auto;
 	transition: all ease 0.5s;
 
-	&:not(.signed-in) {
+	// Derived from the actual rendered content (:has), not the .signed-in
+	// class this element also carries. That class is a reactive :class
+	// binding on THIS SAME element (see the guest→signed-in transition
+	// comment above the template's MgLoginRegisterMenu/section) — it hit
+	// the identical never-repatched symptom the inner branch did, and
+	// unlike the inner v-if/v-else swap, there's no sibling-vnode :key
+	// trick available for an ancestor's own class binding on itself.
+	// :has(.signed-in-menu) reads real DOM structure instead, so it's
+	// correct regardless of whether that class binding ever catches up.
+	&:not(:has(.signed-in-menu)) {
 		width: 340px;
 	}
 
@@ -284,6 +340,26 @@ const handleToggleOnline = () => {
 			}
 		}
 
+		.support-link {
+			display: block;
+			width: 100%;
+			text-align: center;
+			font-size: 0.75rem;
+			font-weight: 400;
+			// Deliberately quieter than .plans-pricing-link — this is a low-key
+			// secondary affordance, not a conversion CTA, so it stays on a muted
+			// text token instead of each host's accent color.
+			color: var(--secondary-info-fg, var(--inactive));
+			text-decoration: none;
+			padding: 4px 0;
+			margin-top: 8px;
+
+			&:hover {
+				text-decoration: underline;
+				color: var(--active);
+			}
+		}
+
 		.status-toggle {
 			display: flex;
 			justify-content: space-between;

package/package.json

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