@mundogamernetwork/shared-ui 1.13.7 → 1.14.4

package/components/ui/MgHeaderUIUser.vue

@@ -11,6 +11,8 @@ const { performLogout } = useLogout();
 const runtimeConfig = useRuntimeConfig();
 const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
 const features = runtimeConfig.public.mgSharedUi?.features ?? {};
+const pricingUrl = runtimeConfig.public.mgSharedUi?.pricingUrl || "";
+const { locale } = useI18n();
 
 const refDiv = ref<HTMLElement | null>(null);
 const count = ref(0);
@@ -83,7 +85,18 @@ const handleLogout = async () => {
 						<div v-if="!user?.avatar_url" class="no-avatar-wrapper">
 							<MGIcon icon="profile" />
 						</div>
-						<img v-else :src="user.avatar_url" width="40" height="40" class="round" />
+						<img v-else :src="user.avatar_url" width="40" height="40" class="avatar-img" />
+					</div>
+
+					<div v-if="user?.followers_count !== undefined" class="col p-0 d-flex align-items-center stats">
+						<div class="col-6 p-0">
+							<span class="stat-value">{{ user?.following_count ?? 0 }}</span>
+							<span class="stat-label">{{ $t("account_menu.following") }}</span>
+						</div>
+						<div class="col-6 p-0">
+							<span class="stat-value">{{ user?.followers_count ?? 0 }}</span>
+							<span class="stat-label">{{ $t("account_menu.followers") }}</span>
+						</div>
 					</div>
 				</div>
 
@@ -93,25 +106,31 @@ const handleLogout = async () => {
 					</div>
 				</div>
 
-				<div v-if="user?.followers_count !== undefined" class="row info-row stats">
-					<div class="col-6 p-0">
-						<span class="stat-label">{{ $t("account_menu.following") }}</span>
-						<span class="stat-value">{{ user?.following_count ?? 0 }}</span>
-					</div>
-					<div class="col-6 p-0">
-						<span class="stat-label">{{ $t("account_menu.followers") }}</span>
-						<span class="stat-value">{{ user?.followers_count ?? 0 }}</span>
-					</div>
-				</div>
-
 				<div v-if="features.wallet && user?.coins !== null" class="row info-row">
 					<span class="coins">
 						<MGIcon icon="coin-v2" />
-						{{ Math.floor(user?.coins ?? 0).toLocaleString() }}
+						<span class="coins__currency">MGC</span>
+						{{ Math.floor(user?.coins ?? 0).toLocaleString(locale) }}
 					</span>
 				</div>
 
-				<div v-if="features.statusOnline" class="row info-row">
+				<div v-if="features.gamification !== false" class="row info-row gamification-row">
+					<MgXpLevelBar compact :mgc-balance="user?.coins ?? null" :show-balance="false" :locale="locale" />
+				</div>
+
+				<div v-if="pricingUrl" class="row info-row">
+					<a :href="pricingUrl" class="plans-pricing-link">
+						{{ $t("account_menu.buttons.plans_pricing", "Plans & Pricing") }}
+					</a>
+				</div>
+
+				<div class="row info-row">
+					<a :href="accountsBaseUrl" target="_blank" class="btn btn-primary-outline mt-3">
+						{{ $t("account_menu.buttons.manage_account") }}
+					</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>
 						<label class="switch">
@@ -121,12 +140,6 @@ const handleLogout = async () => {
 					</div>
 				</div>
 
-				<div class="row info-row">
-					<a :href="accountsBaseUrl" target="_blank" class="btn btn-primary-outline mt-3">
-						{{ $t("account_menu.buttons.manage_account") }}
-					</a>
-				</div>
-
 				<slot name="extra-menu-items" />
 
 				<div class="row info-row my-3">
@@ -142,8 +155,14 @@ const handleLogout = async () => {
 <style scoped lang="scss">
 .ui-config-user {
 	position: absolute;
-	max-width: 240px;
-	width: 100%;
+	// A fixed width, not width:100%. This is position:absolute, so a
+	// percentage width resolves against the nearest positioned ancestor —
+	// every real host's profile-icon <li> (32px, position:relative for its
+	// own reasons), not the header. width:100% + max-width collapsed the
+	// whole dropdown to a 32px sliver pinned off in the corner; nothing
+	// caught it before because no front actually rendered this component
+	// until the account-menu unification wired all twelve of them to it.
+	width: 240px;
 	padding: 1rem 0;
 	background-color: var(--header-ui-config-bg);
 	border: 1px solid var(--header-ui-config-border);
@@ -154,7 +173,7 @@ const handleLogout = async () => {
 	transition: all ease 0.5s;
 
 	&:not(.signed-in) {
-		max-width: 340px;
+		width: 340px;
 	}
 
 	&__option {
@@ -214,8 +233,11 @@ const handleLogout = async () => {
 			}
 		}
 
-		.round {
-			border-radius: 100%;
+		// MGN is angular by brand decision — no rounded corners anywhere,
+		// avatars included, even where a circular crop is the platform norm
+		// elsewhere.
+		.avatar-img {
+			border-radius: 0;
 		}
 
 		.no-avatar-wrapper {
@@ -224,7 +246,7 @@ const handleLogout = async () => {
 			justify-content: center;
 			height: 40px;
 			width: 40px;
-			border-radius: 100%;
+			border-radius: 0;
 			background: #555;
 			color: var(--ck-highlight-marker-blue);
 
@@ -242,18 +264,23 @@ const handleLogout = async () => {
 		}
 
 		.stats {
-			margin-top: 8px;
-
-			.stat-label {
-				font-size: 0.75rem;
-				color: var(--secondary-info-fg);
+			> div {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
 			}
 
 			.stat-value {
 				font-size: 0.875rem;
-				font-weight: 500;
+				font-weight: 600;
+				line-height: 1.25rem;
 				color: var(--active);
-				margin-left: 4px;
+			}
+
+			.stat-label {
+				font-size: 0.75rem;
+				line-height: 1rem;
+				color: var(--secondary-info-fg);
 			}
 		}
 
@@ -264,6 +291,40 @@ const handleLogout = async () => {
 			font-size: 0.875rem;
 			color: var(--active);
 			margin-top: 8px;
+
+			&__currency {
+				font-size: 0.7rem;
+				opacity: 0.65;
+				font-weight: 600;
+				text-transform: uppercase;
+			}
+		}
+
+		.gamification-row {
+			padding-left: 0;
+			padding-right: 0;
+			margin-top: 4px;
+		}
+
+		.plans-pricing-link {
+			display: block;
+			width: 100%;
+			text-align: center;
+			font-size: 0.75rem;
+			font-weight: 400;
+			// Each platform brands this differently (TV's own fork used a fixed
+			// lavender tint of its purple, #d297ff, rather than plain body text) —
+			// falling through the same accent tokens MgWalletPlanBadge/MgXpLevelBar
+			// use lets every front's real accent take over here without a per-front
+			// override.
+			color: var(--highlight-color, var(--header-active-fg, var(--active)));
+			text-decoration: none;
+			padding: 4px 0;
+			margin-top: 8px;
+
+			&:hover {
+				text-decoration: underline;
+			}
 		}
 
 		.status-toggle {

package/nuxt.config.ts

@@ -123,6 +123,11 @@ export default defineNuxtConfig({
 				agencyBaseUrl: "", // VITE_BASE_URL_AGENCY — used for "create your press kit" CTA link
 				accountsBaseUrl: "", // VITE_BASE_ACCOUNTS_URL
 				networkBaseUrl: "", // VITE_BASE_URL_NETWORK (institutional APIs)
+				// Per-platform pricing/plans page. Left empty, the account menu's
+				// "Plans & Pricing" link is hidden — set it per front (e.g.
+				// `${localePath}/pricing`) since each front's plans page lives at a
+				// different route.
+				pricingUrl: "",
 				features: {
 					chat: true,
 					notifications: true,
@@ -130,6 +135,9 @@ export default defineNuxtConfig({
 					darkMode: true,
 					search: false,
 					statusOnline: true,
+					// Account-menu gamification (level/XP bar). Defaults on; a front
+					// with no gamification data for its users can set this to false.
+					gamification: true,
 				},
 				languages: ["pt-BR", "en", "es", "de", "ro"],
 				protectedRoutes: [] as string[],

package/package.json

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