@mundogamernetwork/shared-ui 1.16.6 → 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,6 +59,20 @@ 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">
 			<!--
@@ -139,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>
@@ -189,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;
 	}
 
@@ -310,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.6",
+  "version": "1.16.7",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",