@mundogamernetwork/shared-ui 1.16.9 → 1.16.11

package/components/ui/MgHeaderUIUser.vue

@@ -12,6 +12,16 @@ const authStore = useAuthStore();
 const { user, signedIn, showOnline } = storeToRefs(authStore);
 const { performLogout } = useLogout();
 
+// Each stat renders independently — a host that only has a "following"
+// concept (e.g. jobs-frontend's "companies followed", with no reverse
+// "who follows me" on a job board) still gets its one number shown,
+// instead of being gated behind the pair like before. When a host has
+// neither, hasStats is false and the row is repurposed below instead of
+// sitting half-empty next to the avatar.
+const hasFollowingCount = computed(() => user.value?.following_count !== undefined);
+const hasFollowersCount = computed(() => user.value?.followers_count !== undefined);
+const hasStats = computed(() => hasFollowingCount.value || hasFollowersCount.value);
+
 const runtimeConfig = useRuntimeConfig();
 const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
 const supportUrl = `${accountsBaseUrl}/account/support/new`;
@@ -115,19 +125,30 @@ const handleToggleOnline = () => {
 						<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">
+					<div v-if="hasStats" class="col p-0 d-flex align-items-center stats">
+						<div v-if="hasFollowingCount" 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">
+						<div v-if="hasFollowersCount" 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>
+
+					<!--
+						No following/followers concept on this host (e.g.
+						agency, token, club — nothing plausible found for
+						either count) — rather than leave this space reserved
+						and blank next to the avatar, show the username here
+						instead of in its own row below.
+					-->
+					<div v-else class="col p-0 d-flex align-items-center">
+						<span class="username username--inline">{{ user?.nickname || user?.name }}</span>
+					</div>
 				</div>
 
-				<div class="row info-row">
+				<div v-if="hasStats" class="row info-row">
 					<div class="col p-0 d-flex flex-column">
 						<span class="username">{{ user?.nickname || user?.name }}</span>
 					</div>
@@ -154,6 +175,16 @@ const handleToggleOnline = () => {
 					<MgXpLevelBar compact :mgc-balance="user?.coins ?? null" :show-balance="false" :locale="locale" />
 				</div>
 
+				<!--
+					Optional, empty by default. For a host whose primary CTA (jobs-
+					frontend's "Post a job") and its related stat (companies followed)
+					got buried under Manage Account/Support/Show-online — reads as an
+					afterthought instead of the main reason someone opens this menu.
+					Sits right after the identity/stats block, above the account-
+					management rows below, so it's the first thing seen.
+				-->
+				<slot name="quick-actions" />
+
 				<div v-if="pricingUrl" class="row info-row">
 					<a :href="pricingUrl" class="plans-pricing-link">
 						{{ $t("account_menu.buttons.plans_pricing", "Plans & Pricing") }}
@@ -221,6 +252,35 @@ const handleToggleOnline = () => {
 	max-height: calc(100vh - 65px);
 	overflow-y: auto;
 	transition: all ease 0.5s;
+	// The scrollbar itself only exists so tall content (hosts with a lot of
+	// extra-menu-items) never goes unreachably off-screen — it shouldn't
+	// look like a leftover browser default. Thin and only tinted on hover,
+	// same idea as a native macOS overlay scrollbar. Firefox/most browsers
+	// respect scrollbar-width; the ::-webkit- rules cover Chrome/Safari.
+	scrollbar-width: thin;
+	scrollbar-color: transparent transparent;
+
+	&:hover {
+		scrollbar-color: var(--header-ui-config-border) transparent;
+	}
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		// No border-radius — MGN is angular by brand decision, no rounded
+		// corners anywhere (see the .signed-in-menu comment below).
+		background: transparent;
+	}
+
+	&:hover::-webkit-scrollbar-thumb {
+		background: var(--header-ui-config-border);
+	}
 
 	// Derived from the actual rendered content (:has), not the .signed-in
 	// class this element also carries. That class is a reactive :class
@@ -286,6 +346,14 @@ const handleToggleOnline = () => {
 			font-weight: 400;
 			font-size: 0.875rem;
 			color: var(--active);
+
+			// Sits beside the avatar instead of its own row below (no
+			// following/followers stats to fill that space) — no top
+			// margin needed, it's vertically centered by the flex row
+			// it's already in.
+			&--inline {
+				margin-top: 0;
+			}
 		}
 
 		.stats {

package/package.json

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