@mundogamernetwork/shared-ui 1.16.12 → 1.16.14

package/components/ui/MgHeaderAvatarToggle.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+/**
+ * The account-menu toggle icon in the header top bar (not the dropdown
+ * panel itself — see MgHeaderUIUser for that). Every host used to inline
+ * this exact 3-line ClientOnly block, and all of them had the same gap:
+ * the very first thing painted — the ClientOnly #fallback, shown during
+ * SSR and until the client mounts — was a hardcoded guest icon. SSR can
+ * never know the real auth state here (the oauth_token cookie isn't
+ * readable server-side), so every real user saw themselves rendered as
+ * signed-out for a beat on every single page load, before the client's
+ * own getUser() call resolved and swapped in the real avatar. Showing a
+ * neutral skeleton instead — both in the fallback and while the client's
+ * own check is still in flight — means the icon is never confidently
+ * wrong, only "still figuring it out."
+ */
+const props = withDefaults(defineProps<{ size?: number }>(), { size: 32 });
+
+const authStore = useAuthStore();
+const { user, signedIn } = storeToRefs(authStore);
+
+// Not every host's store has adopted `initialized` yet (it's the signal
+// that getUser() has settled, one way or the other — see stores/auth.ts
+// in any already-migrated host for the reference shape). Read it
+// defensively instead of destructuring: a host whose store doesn't expose
+// it treats the state as already known, skipping the skeleton rather than
+// getting stuck showing it forever.
+const initialized = computed(() => {
+	const raw = (authStore as unknown as { initialized?: boolean }).initialized;
+	return raw === undefined ? true : raw;
+});
+</script>
+
+<template>
+	<ClientOnly>
+		<div
+			v-if="!initialized"
+			class="mg-avatar-skeleton"
+			:style="{ width: `${props.size}px`, height: `${props.size}px` }"
+		/>
+		<MGIcon v-else-if="!signedIn" icon="profile" />
+		<img
+			v-else
+			:src="user?.avatar_url"
+			:width="props.size"
+			:height="props.size"
+			class="mg-avatar-img"
+		/>
+		<template #fallback>
+			<div
+				class="mg-avatar-skeleton"
+				:style="{ width: `${props.size}px`, height: `${props.size}px` }"
+			/>
+		</template>
+	</ClientOnly>
+</template>
+
+<style scoped lang="scss">
+.mg-avatar-skeleton {
+	// No border-radius — MGN is angular by brand decision, no rounded
+	// corners anywhere.
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-base, rgba(128, 128, 128, 0.18)) 25%,
+		var(--skeleton-shine, rgba(128, 128, 128, 0.32)) 50%,
+		var(--skeleton-base, rgba(128, 128, 128, 0.18)) 75%
+	);
+	background-size: 200% 100%;
+	animation: mg-avatar-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes mg-avatar-skeleton-shimmer {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}
+
+.mg-avatar-img {
+	display: block;
+}
+</style>

package/components/ui/MgHeaderUIUser.vue

@@ -125,27 +125,38 @@ const handleToggleOnline = () => {
 						<img v-else :src="user.avatar_url" width="40" height="40" class="avatar-img" />
 					</div>
 
-					<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 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.
+						Optional. A host with its own identity content to show
+						beside the avatar (e.g. jobs-frontend's role + plan, which
+						is more useful at a glance than a raw follow count) can
+						fill this to fully replace the default stats-or-username
+						block below. Hosts that don't fill it get the exact same
+						default they always had — this slot changes nothing for
+						them.
 					-->
-					<div v-else class="col p-0 d-flex align-items-center">
-						<span class="username username--inline">{{ user?.nickname || user?.name }}</span>
-					</div>
+					<slot name="identity" :has-stats="hasStats" :has-following-count="hasFollowingCount" :has-followers-count="hasFollowersCount">
+						<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 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>
+					</slot>
 				</div>
 
 				<div v-if="hasStats" class="row info-row">

package/components/ui/MgXpLevelBar.vue

@@ -156,7 +156,7 @@ onMounted(async () => {
 			<span class="mg-xp-bar__badge">{{ level.current_level }}</span>
 
 			<div class="mg-xp-bar__meta">
-				<span v-if="!props.compact && level.title" class="mg-xp-bar__title">{{ level.title }}</span>
+				<span v-if="level.title" class="mg-xp-bar__title">{{ level.title }}</span>
 				<span class="mg-xp-bar__xp">{{ level.current_level_xp }} / {{ level.next_level_xp }} XP</span>
 			</div>
 

package/package.json

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