@mundogamernetwork/shared-ui 1.8.17 → 1.8.19

package/components/MediaKit/MgRateCardBundleEditor.vue

@@ -12,7 +12,7 @@
 		<!-- Bundle Form -->
 		<div v-if="showForm" class="bundle-form">
 			<div class="visibility-note">
-				<MGIcon icon="info" />
+				<MGIcon icon="about" />
 				<span>{{ $t("media_kit.bundles.visibility_note") }}</span>
 			</div>
 			<div class="form-group">
@@ -47,7 +47,7 @@
 							<span class="card-price">{{ formatPrice(card.price_min, card.currency) }}</span>
 						</div>
 						<div class="check-indicator">
-							<MGIcon icon="checkmark" v-if="form.rate_card_ids.includes(card.id)" />
+							<MGIcon icon="verified" v-if="form.rate_card_ids.includes(card.id)" />
 						</div>
 						<div v-if="form.rate_card_ids.includes(card.id)" class="card-qty" @click.stop.prevent>
 							<span>×</span>

package/components/MediaKit/MgRateCardEditor.vue

@@ -24,11 +24,11 @@
 					</select>
 				</div>
 				<div class="form-group">
-					<label>{{ $t("media_kit.editor.platform") }}</label>
-					<select v-model="form.platform_id" :class="{ 'input-error': rateCardErrors.platform_id }" @change="delete rateCardErrors.platform_id" required>
+					<label>{{ $t("media_kit.editor.ad_channel") }}</label>
+					<select v-model="form.ad_channel_id" :class="{ 'input-error': rateCardErrors.ad_channel_id }" @change="delete rateCardErrors.ad_channel_id" required>
 						<option value="">{{ $t("media_kit.editor.select") }}</option>
-						<option v-for="platform in platforms" :key="platform.id" :value="platform.id">
-							{{ platform.name }}
+						<option v-for="channel in adChannels" :key="channel.id" :value="channel.id">
+							{{ channel.name }}
 						</option>
 					</select>
 				</div>
@@ -110,7 +110,7 @@
 			<div v-for="card in rateCards" :key="card.id" class="rate-card-item">
 				<div class="card-info">
 					<span class="format">{{ card.content_format?.name || card.label }}</span>
-					<span class="channel">{{ card.platform?.name }}</span>
+					<span class="channel">{{ card.ad_channel?.name }}</span>
 					<span class="price">{{ formatPrice(card.price_min, card.price_max, card.currency) }}</span>
 				</div>
 				<div class="card-actions">
@@ -134,7 +134,7 @@ const { t } = useI18n();
 interface RateCard {
 	id: number;
 	content_format_id: number;
-	platform_id: number;
+	ad_channel_id: number;
 	label?: string;
 	price_min: string;
 	price_max?: string;
@@ -143,7 +143,7 @@ interface RateCard {
 	description?: string;
 	is_active: boolean;
 	content_format?: { id: number; name: string };
-	platform?: { id: number; name: string };
+	ad_channel?: { id: number; name: string };
 }
 
 interface LookupItem {
@@ -156,7 +156,7 @@ const props = withDefaults(
 		rateCards: RateCard[];
 		influencerProInfoId: number;
 		contentFormats: LookupItem[];
-		platforms: LookupItem[];
+		adChannels: LookupItem[];
 		isEnabled?: boolean;
 		/** MGN commission % for the current plan (host app resolves this, e.g. from feature_limits). */
 		commissionPercent?: number;
@@ -196,7 +196,7 @@ const saving = ref(false);
 
 const defaultForm = {
 	content_format_id: '',
-	platform_id: '',
+	ad_channel_id: '',
 	price_min: '',
 	price_max: '',
 	currency: 'USD',
@@ -265,7 +265,7 @@ const editCard = (card: RateCard) => {
 	editing.value = card.id;
 	form.value = {
 		content_format_id: String(card.content_format_id),
-		platform_id: String(card.platform_id),
+		ad_channel_id: String(card.ad_channel_id),
 		price_min: card.price_min,
 		price_max: card.price_max || '',
 		currency: card.currency,
@@ -283,7 +283,7 @@ const saveRateCard = async () => {
 	// Client-side required field check (HTML required bypassed by @click)
 	Object.keys(rateCardErrors).forEach(k => delete rateCardErrors[k]);
 	if (!form.value.content_format_id) rateCardErrors.content_format_id = 'required';
-	if (!form.value.platform_id) rateCardErrors.platform_id = 'required';
+	if (!form.value.ad_channel_id) rateCardErrors.ad_channel_id = 'required';
 	if (!form.value.price_min && form.value.price_min !== 0) rateCardErrors.price_min = 'required';
 	if (Object.keys(rateCardErrors).length) return;
 
@@ -293,7 +293,7 @@ const saveRateCard = async () => {
 			...form.value,
 			influencer_professional_info_id: props.influencerProInfoId,
 			content_format_id: Number(form.value.content_format_id),
-			platform_id: Number(form.value.platform_id),
+			ad_channel_id: Number(form.value.ad_channel_id),
 			price_min: Number(form.value.price_min),
 			price_max: form.value.price_max ? Number(form.value.price_max) : null,
 			delivery_time_days: form.value.delivery_time_days ? Number(form.value.delivery_time_days) : null,

package/components/PressKit/AssetGallery.vue

@@ -80,7 +80,7 @@ function downloadAll() {
 		<div class="gallery-header">
 			<h3 class="section-title">{{ $t('press_kit.assets') }}</h3>
 			<button v-if="allowDownload && assets.length" class="btn-download-all" @click="downloadAll">
-				<MGIcon icon="download" /> {{ $t('press_kit.download_all') }}
+				<MGIcon icon="save" /> {{ $t('press_kit.download_all') }}
 			</button>
 		</div>
 
@@ -134,7 +134,7 @@ function downloadAll() {
 			<div class="lb-info">
 				<span>{{ imageAssets[lightboxIndex]?.title || imageAssets[lightboxIndex]?.type }}</span>
 				<button v-if="allowDownload" class="lb-download" @click="downloadAsset(imageAssets[lightboxIndex])">
-					<MGIcon icon="download" /> {{ $t('press_kit.download') }}
+					<MGIcon icon="save" /> {{ $t('press_kit.download') }}
 				</button>
 			</div>
 		</div>

package/components/PressKit/Awards.vue

@@ -27,7 +27,7 @@ defineProps<Props>();
 				rel="noopener"
 				:class="['award-card', { 'no-link': !award.url }]"
 			>
-				<MGIcon icon="trophy" class="award-icon" />
+				<MGIcon icon="achievements" class="award-icon" />
 				<div class="award-info">
 					<span class="award-title">{{ award.title }}</span>
 					<span v-if="award.event || award.year" class="award-event">

package/components/PressKit/Hero.vue

@@ -27,7 +27,7 @@ const youtubeEmbedUrl = computed(() => {
 				<h1 v-else class="hero-title">{{ name }}</h1>
 				<p v-if="tagline" class="hero-tagline">{{ tagline }}</p>
 				<button v-if="trailerUrl" class="btn-trailer" @click="showTrailer = true">
-					<MGIcon icon="play" /> {{ $t('press_kit.watch_trailer') }}
+					<MGIcon icon="videos" /> {{ $t('press_kit.watch_trailer') }}
 				</button>
 			</div>
 		</div>

package/components/PressKit/VideoPlayer.vue

@@ -55,7 +55,7 @@ function formatType(type?: string) {
 				:class="['video-item', { active: activeVideo?.id === video.id }]"
 				@click="activeVideo = video"
 			>
-				<MGIcon icon="play-circle" />
+				<MGIcon icon="videos" />
 				<div class="video-meta">
 					<span class="video-title">{{ video.title }}</span>
 					<span v-if="video.type" class="video-type">{{ formatType(video.type) }}</span>

package/components/keys/KeyCampaignDashboardCard.vue

@@ -89,10 +89,16 @@ function formatCountdown(availableAt: string | null | undefined): string {
 	return h > 0 ? `${h}h ${m}m` : `${m}m`;
 }
 
+// key-campaigns (plural) is the canonical route on every front. The singular
+// used to be a second, standalone copy of this page in shared-ui — worse than
+// the real one (hardcoded English, no embargo handling) and the reason a shared
+// link previewed differently depending on which app served it. It is now a
+// server-level 301, so defaulting here to the singular would only send every
+// card click through a needless redirect.
 const detailRoute = computed(() =>
 	props.publicMode
-		? `/${locale.value}/${props.baseRoute ?? 'key-campaign'}/${props.card.slug}`
-		: `/${locale.value}/dashboard/${props.baseRoute ?? 'key-campaign'}/${props.card.slug}`
+		? `/${locale.value}/${props.baseRoute ?? 'key-campaigns'}/${props.card.slug}`
+		: `/${locale.value}/dashboard/${props.baseRoute ?? 'key-campaigns'}/${props.card.slug}`
 );
 </script>
 
@@ -130,38 +136,38 @@ const detailRoute = computed(() =>
 
 					<!-- Exclusive badge -->
 					<div v-if="card.is_exclusive && !userCanAccess" class="kc-card__exclusive-badge kc-card__exclusive-lock">
-						<i class="fa-solid fa-crown" /> {{ $t("keys.card.exclusive_upgrade") }}
+						<MGIcon size="1x" icon="reward" /> {{ $t("keys.card.exclusive_upgrade") }}
 					</div>
 					<div v-else-if="card.is_exclusive" class="kc-card__exclusive-badge">
-						<i class="fa-solid fa-crown" /> {{ $t("keys.card.exclusive") }}
+						<MGIcon size="1x" icon="reward" /> {{ $t("keys.card.exclusive") }}
 					</div>
 
 					<!-- Tier-locked badge -->
 					<div v-else-if="card.is_tier_locked && card.access_tier !== 'free' && !userCanAccess" class="kc-card__exclusive-badge">
-						<i class="fa-solid fa-crown" /> {{ cardTierLabel(card.access_tier) }}
+						<MGIcon size="1x" icon="reward" /> {{ cardTierLabel(card.access_tier) }}
 					</div>
 
 					<!-- Early access badge -->
 					<div v-else-if="(card.early_access_hours ?? 0) > 0 && userCanAccess" class="kc-card__early-access-badge">
-						<i class="fa-solid fa-bolt" /> {{ $t("keys.card.early_access") }}
+						<MGIcon size="1x" icon="clock" /> {{ $t("keys.card.early_access") }}
 					</div>
 
 					<!-- Streamer level badge -->
 					<div v-if="card.streamer_type === 2 || card.streamer_type === 3" class="kc-card__exclusive-badge kc-card__level-badge">
-						<i class="fa-solid fa-user-check" />
+						<MGIcon size="1x" icon="verified" />
 						{{ card.streamer_type === 2 ? $t("keys.card.level_official") : $t("keys.card.level_affiliate") }}
 					</div>
 
 					<!-- Early-access lock overlay -->
 					<div v-if="!userCanAccess && card.available_at_for_user" class="kc-card__lock-overlay">
-						<i class="fa-solid fa-lock" />
+						<MGIcon size="1x" icon="lock" />
 						<span class="lock-label">{{ $t("keys.card.early_access_lock_title") }}</span>
 						<span class="lock-countdown">{{ $t("keys.card.early_access_opens_in") }} {{ formatCountdown(card.available_at_for_user) }}</span>
 					</div>
 
 					<!-- Exclusive lock overlay -->
 					<div v-else-if="!userCanAccess && card.is_exclusive" class="kc-card__lock-overlay kc-card__lock-overlay--exclusive">
-						<i class="fa-solid fa-crown" />
+						<MGIcon size="1x" icon="reward" />
 						<span class="lock-label">{{ $t("keys.card.exclusive_lock_title") }}</span>
 						<span class="lock-cta">{{ $t("keys.card.exclusive_upgrade_cta") }}</span>
 					</div>
@@ -198,7 +204,7 @@ const detailRoute = computed(() =>
 					</NuxtLink>
 					<NuxtLink v-if="!publicMode" :to="`/${locale}/dashboard/pricing`">
 						<button class="btn secondary upgrade-btn">
-							<i class="fa-solid fa-arrow-up" /> {{ $t("keys.card.upgrade_plan") }}
+							<MGIcon size="1x" icon="chevron-up" /> {{ $t("keys.card.upgrade_plan") }}
 						</button>
 					</NuxtLink>
 				</template>

package/components/playtest/PlaytestBrief.vue

@@ -54,7 +54,7 @@ const categoryLabel = computed(() => {
 			</div>
 
 			<div v-if="campaign.eligible === false" class="pt-brief__ineligible">
-				<i class="fa-solid fa-lock" />
+				<MGIcon size="1x" icon="lock" />
 				<span>{{ campaign.ineligibility_reason || $t("playtest.brief.ineligible_generic", "You don't currently qualify for this playtest.") }}</span>
 			</div>
 

package/components/playtest/PlaytestPendingConfirmation.vue

@@ -23,8 +23,8 @@ const emit = defineEmits<{
 <template>
 	<div class="pt-pending" :class="{ 'pt-pending--ineligible': ineligible }">
 		<div class="pt-pending__icon">
-			<i v-if="ineligible" class="fa-solid fa-circle-exclamation" />
-			<i v-else class="fa-solid fa-circle-check" />
+			<MGIcon v-if="ineligible" size="1x" icon="exclamation" />
+			<MGIcon v-else size="1x" icon="verified-filled" />
 		</div>
 
 		<h3 class="pt-pending__title">

package/components/playtest/concept-poll/RankedChoiceVote.vue

@@ -65,7 +65,7 @@ function submit() {
 						:aria-label="$t('playtest.concept_poll.move_up', 'Move up')"
 						@click="moveUp(index)"
 					>
-						<i class="fa-solid fa-arrow-up" />
+						<MGIcon size="1x" icon="chevron-up" />
 					</button>
 					<button
 						type="button"
@@ -74,7 +74,7 @@ function submit() {
 						:aria-label="$t('playtest.concept_poll.move_down', 'Move down')"
 						@click="moveDown(index)"
 					>
-						<i class="fa-solid fa-arrow-down" />
+						<MGIcon size="1x" icon="chevron-down" />
 					</button>
 				</span>
 			</li>

package/components/playtest/moderated/JoinCallPanel.vue

@@ -35,7 +35,7 @@ const scheduledAt = computed(() => (props.session?.scheduled_at ? new Date(props
 			<p class="join-call-panel__time">{{ scheduledAt?.toLocaleString() }}</p>
 
 			<div v-if="session.tester_confirmed_at" class="join-call-panel__confirmed-badge">
-				<i class="fa-solid fa-circle-check" />
+				<MGIcon size="1x" icon="verified-filled" />
 				{{ $t("playtest.moderated.you_confirmed", "You've confirmed attendance") }}
 			</div>
 

package/components/ui/MgHeaderUIUser.vue

@@ -106,7 +106,7 @@ const handleLogout = async () => {
 
 				<div v-if="features.wallet && user?.coins !== null" class="row info-row">
 					<span class="coins">
-						<MGIcon icon="coin" />
+						<MGIcon icon="coin-v2" />
 						{{ Math.floor(user?.coins ?? 0).toLocaleString() }}
 					</span>
 				</div>

package/components/ui/MgWalletPlanBadge.vue

@@ -43,7 +43,7 @@ const isSubscriber = computed(() => !!(user.value as any)?.subscription?.is_subs
 <template>
 	<div class="mg-wallet-plan">
 		<span v-if="showWallet" class="mg-wallet-plan__coins">
-			<MGIcon icon="coin" />
+			<MGIcon icon="coin-v2" />
 			{{ Math.floor(walletBalance).toLocaleString() }}
 			<span class="mg-wallet-plan__currency">MGC</span>
 		</span>

package/locales/de.json

@@ -195,6 +195,8 @@
       "required_data": "Erforderliche Angaben",
       "already_requested": "Sie haben bereits eine Anfrage für diese Kampagne gestellt.",
       "sold_out": "Alle Keys für diese Kampagne wurden bereits eingelöst.",
+      "keys_left": "{n} Key übrig | {n} Keys übrig",
+      "keys_low_stock": "Letzter Key | Letzte {n}",
       "back_to_campaign": "Zur Kampagne zurückkehren",
       "status_pending": "Anfrage ausstehend — bitte warten Sie auf die Genehmigung",
       "status_approved": "Anfrage genehmigt — Sie können jetzt Ihren Schlüssel abrufen",

package/locales/en.json

@@ -195,6 +195,8 @@
       "required_data": "Required data",
       "already_requested": "You have already submitted a request for this campaign.",
       "sold_out": "All keys for this campaign have already been claimed.",
+      "keys_left": "{n} key left | {n} keys left",
+      "keys_low_stock": "Last key | Last {n}",
       "back_to_campaign": "Back to campaign",
       "status_pending": "Request pending — waiting for approval",
       "status_approved": "Request approved — you can now retrieve your key",

package/locales/es.json

@@ -195,6 +195,8 @@
       "required_data": "Datos requeridos",
       "already_requested": "Ya has enviado una solicitud para esta campaña.",
       "sold_out": "Todas las claves de esta campaña ya fueron reclamadas.",
+      "keys_left": "{n} clave restante | {n} claves restantes",
+      "keys_low_stock": "Última clave | Últimas {n}",
       "back_to_campaign": "Volver a la campaña",
       "status_pending": "Solicitud pendiente — esperando aprobación",
       "status_approved": "Solicitud aprobada — ya puedes obtener tu clave",

package/locales/pt-BR.json

@@ -195,6 +195,8 @@
       "required_data": "Dados obrigatórios",
       "already_requested": "Você já enviou uma solicitação para esta campanha.",
       "sold_out": "Todas as chaves desta campanha já foram resgatadas.",
+      "keys_left": "{n} chave restante | {n} chaves restantes",
+      "keys_low_stock": "Última chave | Últimas {n}",
       "back_to_campaign": "Voltar para a campanha",
       "status_pending": "Solicitação pendente — aguardando aprovação",
       "status_approved": "Solicitação aprovada — você pode resgatar sua chave",

package/locales/ro.json

@@ -195,6 +195,8 @@
       "required_data": "Date obligatorii",
       "already_requested": "Ați trimis deja o cerere pentru această campanie.",
       "sold_out": "Toate cheile pentru această campanie au fost deja revendicate.",
+      "keys_left": "{n} cheie rămasă | {n} chei rămase",
+      "keys_low_stock": "Ultima cheie | Ultimele {n}",
       "back_to_campaign": "Înapoi la campanie",
       "status_pending": "Cerere în așteptare — așteptați aprobarea",
       "status_approved": "Cerere aprobată — puteți prelua cheia",

package/package.json

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

package/pages/icons.vue

@@ -1,13 +1,48 @@
 <script setup lang="ts">
 definePageMeta({ layout: "default" });
 
+// The real contents of the custom-icons font (assets/scss/_icons.scss in
+// each consuming app — identical across tv/community/agency).
+//
+// This list used to be a plausible-sounding invention: "bell", "user",
+// "star", "check", "info", "download"... none of which exist in the font.
+// A catalogue that lists icons you cannot use is worse than no catalogue —
+// it is where `icon="check"` and friends came from, rendering an empty
+// element on real screens.
 const icons = [
-	"home", "search", "message", "bell", "gear", "user", "chevron-left",
-	"chevron-right", "chevron-down", "chevron-up", "close", "menu",
-	"link", "star", "heart", "share", "edit", "trash", "plus", "minus",
-	"check", "info", "warning", "error", "calendar", "clock", "download",
-	"upload", "filter", "sort", "grid", "list", "eye", "eye-off",
-	"lock", "unlock", "mail", "phone", "map", "globe", "flag",
+	"about", "achievements", "add-community", "add-friend", "add-team", "added", "administration",
+	"ai", "ai-vr", "analytics-research", "animation", "arcade", "arts", "arts-crafts", "audio-sound",
+	"battle-royale", "beta-feature", "bug", "business-operations", "camera", "camera-solid",
+	"cancel-message", "cancel-notification", "card-games", "cart", "cel-v1", "cel-v2", "chevron-down",
+	"chevron-left", "chevron-right", "chevron-up", "childcare-voucher", "clear", "clock",
+	"clock-filled", "close", "coin-v1", "coin-v2", "community", "community-filled",
+	"community-management", "community-plus", "contact-v2", "coop", "creatormode",
+	"customer-services", "cycle", "dental-healthcare", "discord", "discounts", "discover",
+	"display-blocks", "display-list", "double-", "double-chevron-left", "e-sports", "edit",
+	"editorial-journalism", "education", "educational", "engineering", "event-notification",
+	"exclamation", "exclusive-themes", "external-link", "eye", "eye-slash", "facebook", "facebook-v2",
+	"faq", "feed", "fight", "filter", "flexible-work", "follow", "free-food", "gambling", "game-jam",
+	"game-release-notification", "game-room", "games", "games-filled", "gear", "gear-dev", "giveaway",
+	"gym", "hack-slash", "handshake-filled", "healthcheck", "home", "horror", "impressum",
+	"infinity-community", "infinity-team", "information-technology", "instagran", "interaction",
+	"jack-of-all-trades", "job-apply", "jolife-insurance", "language", "language-class", "legal",
+	"like", "like-filled", "link", "linkedin", "linkedin-v2", "list", "localisation", "location",
+	"location-v1", "location-v2", "lock", "log-status", "mail-v1", "mail-v2", "manage-team",
+	"membership", "menu", "message", "message-active", "money", "moon", "more",
+	"narrative-design-writting", "new-friend", "news", "no-ads", "no-data", "no-dresscode",
+	"not-interested", "notification", "notification-active", "office-library", "official-streamer",
+	"official-streamer-filled", "official-writer", "operations", "others", "paid-overtime", "partner",
+	"partner-filled", "phone", "picture", "plan", "plan-filled", "platformer", "politics",
+	"private-medic", "procurement-supply-chain", "production", "profile", "profile-filled",
+	"programmmig-development", "public-relations", "public-transport", "puzzlers",
+	"quality-assurance", "quality-control", "question", "racing", "rate", "recognition",
+	"recruitment", "region", "report", "retirement", "retro", "reward", "roadmap", "rpg",
+	"sales-representative", "save", "save-filled", "search", "senior-management", "share",
+	"share-filled", "shooter", "simulation", "simulator", "smile", "social-medias", "sort", "sports",
+	"stipend", "stocks", "strategy", "strategy-1", "stream", "suppot", "survival", "team",
+	"team-event", "telegran", "terms", "text-size", "theme", "tiktok", "training", "trash", "twitter",
+	"twitter-v2", "twtch", "ux-design", "verified", "verified-filled", "version", "videos", "vr",
+	"wallet", "web-development", "webpage", "whatsapp", "wiki", "youtube",
 ];
 </script>
 

package/pages/key-campaigns/index.vue

@@ -127,44 +127,49 @@
 													@error="(e) => { (e.target as HTMLImageElement).src = '/imgs/no-cover-img.jpg' }"
 												/>
 
+												<!-- Scarcity only. The plain count now lives in the card's
+												     info row, where card metadata is actually read — a bare
+												     number floating on the artwork said nothing, and the icon
+												     that was supposed to explain it never rendered. Up here it
+												     earns its place only when stock is running out. -->
 												<div
 													class="keys-badge"
-													v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming"
+													v-if="showsLowStock(card)"
 													:title="$t('keys.campaigns.keys_left', { n: card.available_count })"
 												>
-													<i class="fa-solid fa-key" />
-													{{ card.available_count }}
+													<MGIcon size="1x" icon="giveaway" />
+													{{ $t("keys.campaigns.keys_low_stock", { n: card.available_count }) }}
 												</div>
 
 												<div
 													v-if="card.is_exclusive && !card.user_can_access"
 													class="exclusive-badge exclusive-lock"
 												>
-													<i class="fa-solid fa-crown" /> {{ $t("keys.campaigns.exclusive_upgrade") }}
+													<MGIcon size="1x" icon="reward" /> {{ $t("keys.campaigns.exclusive_upgrade") }}
 												</div>
 												<div v-else-if="card.is_exclusive" class="exclusive-badge">
-													<i class="fa-solid fa-crown" /> {{ $t("keys.campaigns.exclusive") }}
+													<MGIcon size="1x" icon="reward" /> {{ $t("keys.campaigns.exclusive") }}
 												</div>
 
 												<div
 													v-else-if="card.is_tier_locked && card.access_tier !== 'free' && !card.user_can_access"
 													class="exclusive-badge"
 												>
-													<i class="fa-solid fa-crown" /> {{ cardTierLabel(card.access_tier) }}
+													<MGIcon size="1x" icon="reward" /> {{ cardTierLabel(card.access_tier) }}
 												</div>
 
 												<div
 													v-else-if="card.early_access_hours > 0 && card.user_can_access"
 													class="early-access-badge"
 												>
-													<i class="fa-solid fa-bolt" /> {{ $t("keys.campaigns.early_access") }}
+													<MGIcon size="1x" icon="clock" /> {{ $t("keys.campaigns.early_access") }}
 												</div>
 
 												<div
 													v-if="card.streamer_type === 2 || card.streamer_type === 3"
 													class="exclusive-badge level-badge"
 												>
-													<i class="fa-solid fa-user-check" />
+													<MGIcon size="1x" icon="verified" />
 													{{
 														card.streamer_type === 2
 															? $t("keys.campaigns.restriction.level_official")
@@ -176,7 +181,7 @@
 													v-if="!card.user_can_access && card.available_at_for_user"
 													class="early-access-lock-overlay"
 												>
-													<i class="fa-solid fa-lock" />
+													<MGIcon size="1x" icon="lock" />
 													<span class="lock-label">{{ $t("keys.campaigns.early_access_lock_title") }}</span>
 													<span class="lock-countdown">
 														{{ $t("keys.campaigns.early_access_opens_in") }}
@@ -188,7 +193,7 @@
 													v-else-if="!card.user_can_access && card.is_exclusive"
 													class="exclusive-lock-overlay"
 												>
-													<i class="fa-solid fa-crown" />
+													<MGIcon size="1x" icon="reward" />
 													<span class="lock-label">{{ $t("keys.campaigns.exclusive_lock_title") }}</span>
 													<span class="lock-cta">{{ $t("keys.campaigns.exclusive_upgrade_cta") }}</span>
 												</div>
@@ -208,6 +213,15 @@
 											<div class="days" v-if="card.time > 0 && card.user_can_access">
 												<span>{{ card.time }}</span> {{ $t("keys.campaigns.days") }}
 											</div>
+											<!-- Labelled, next to the deadline: the two numbers a creator
+											     actually decides on are "how long left" and "how many left". -->
+											<span
+												v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming"
+												class="card-keys-left"
+											>
+												<MGIcon size="1x" icon="giveaway" />
+												{{ $t("keys.campaigns.keys_left", { n: card.available_count }) }}
+											</span>
 											<span>
 												<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
 													<path d="M13.3333 4.1112L12.8666 3.64453L11.9333 4.57786L10.9333 3.64453L8.33329 4.1112L2.66663 9.77786L7.19996 14.3112L12.8666 8.64453L13.3333 6.04453L12.4 5.1112L13.3333 4.1112ZM12.6 6.24453L12.2666 8.3112L7.19996 13.3779L3.59996 9.77786L8.66663 4.7112L10.7333 4.3112L11.4666 5.04453L11 5.5112L10.5333 5.04453L9.99996 5.57786L11.4 6.97786L11.8666 6.5112L11.4 6.04453L11.8666 5.57786L12.6 6.24453Z" fill="var(--key-accent, var(--key-accent, var(--primary, #D297FF)))" />
@@ -231,7 +245,7 @@
 												</nuxt-link>
 												<nuxt-link :to="upgradeRoute">
 													<button class="btn secondary upgrade-btn">
-														<i class="fa-solid fa-arrow-up" />
+														<MGIcon size="1x" icon="chevron-up" />
 														{{ $t("keys.campaigns.upgrade_plan") }}
 													</button>
 												</nuxt-link>
@@ -473,6 +487,20 @@ function platformAbbr(name: string): string {
 	return PLATFORM_ABBR[name.toLowerCase()] ?? name
 }
 
+/**
+ * At or below this many keys left, the cover badge appears as a scarcity
+ * signal. Above it, the count is just a fact and lives in the info row.
+ */
+const LOW_STOCK_THRESHOLD = 5
+
+function showsLowStock(card: any): boolean {
+	return card.available_count > 0
+		&& card.available_count <= LOW_STOCK_THRESHOLD
+		&& card.user_can_access
+		&& !card.isExpired
+		&& !card.isUpcoming
+}
+
 function cardTierLabel(tier: string): string {
 	const labels: Record<string, string> = { free: "Free", pro: "PRO", business: "Business", official: "Official" }
 	return $i18n.t("keys.campaigns.restriction.tier_locked", { tier: labels[tier] || tier })
@@ -874,6 +902,15 @@ onUnmounted(() => {
 	opacity: 0.5;
 }
 
+.card-keys-left {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	white-space: nowrap;
+
+	i.icon { color: var(--key-accent, var(--primary, #D297FF)); }
+}
+
 .keys-badge {
 	position: absolute;
 	top: 8px;

package/pages/key-campaigns/key-materials.vue

@@ -150,7 +150,7 @@
 								<!-- Success modal -->
 								<div v-if="showSuccessModal" class="success-modal-overlay" @click.self="handleSuccessClose">
 									<div class="success-modal">
-										<MGIcon size="2x" icon="check" style="color: #42FF00" />
+										<MGIcon size="2x" icon="verified" style="color: #42FF00" />
 										<p>{{ $t("keys.materials.success_message") }}</p>
 										<button class="btn button-submit" @click="handleSuccessClose">
 											{{ $t("keys.materials.success_close") }}

package/pages/key-campaigns/redeem-key.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, inject, onMounted, unref, watch } from "vue"
+import { ref, computed, inject, onMounted, onUnmounted, unref, watch } from "vue"
 import { useRoute, navigateTo } from "#app"
 import { useNuxtApp } from "#app"
 import {
@@ -51,6 +51,13 @@ const embargoAckChecked = ref(false)
 
 const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
 
+// Where the success screen sends the user back to. Falls back to the id the
+// page was opened with, which fetchCampaignBySlug also accepts.
+const campaignPath = computed(
+	() => `/${locale.value}/key-campaigns/${campaign.value?.slug || keyId}`,
+)
+let redirectTimer: ReturnType<typeof setTimeout> | null = null
+
 const embargoDateTime = computed(() =>
 	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
 )
@@ -196,6 +203,13 @@ async function submit() {
 			return
 		}
 		success.value = true
+		// The success screen says "Redirecting…", so actually redirect: it used
+		// to sit there forever, leaving the user staring at a promise that never
+		// resolved with only a manual back button to escape.
+		redirectTimer = setTimeout(() => {
+			redirectTimer = null
+			navigateTo(campaignPath.value)
+		}, 2000)
 	} catch (e: any) {
 		const status = e?.response?.status
 		const errorCode = e?.response?.data?.error_code
@@ -223,12 +237,25 @@ async function submit() {
 }
 
 function goBack() {
+	// Tapping the button beats the pending auto-redirect to the punch.
+	if (redirectTimer) {
+		clearTimeout(redirectTimer)
+		redirectTimer = null
+	}
+	if (success.value) {
+		navigateTo(campaignPath.value)
+		return
+	}
 	if (typeof window !== "undefined" && window.history.length > 1) {
 		window.history.back()
 	} else {
 		navigateTo(`/${locale.value}/key-campaigns`)
 	}
 }
+
+onUnmounted(() => {
+	if (redirectTimer) clearTimeout(redirectTimer)
+})
 </script>
 
 <template>
@@ -248,7 +275,7 @@ function goBack() {
 			<div v-else-if="error" class="state error">{{ error }}</div>
 
 			<div v-else-if="success" class="state success">
-				<MGIcon icon="check-circle" size="3x" />
+				<MGIcon icon="verified-filled" size="3x" />
 				<p>{{ $t("keys.campaigns.request_sent") }}</p>
 				<button class="btn" @click="goBack">
 					{{ $t("keys.campaigns.back_to_campaign") }}
@@ -292,7 +319,7 @@ function goBack() {
 					<div class="required-data">
 						<div class="required-data-header" @click="toggleBox">
 							<div class="required-data-header-left">
-								<MGIcon size="1x" icon="check" :style="{ color: isBoxOpen ? 'var(--key-accent, var(--primary, #D297FF))' : 'var(--inactive)' }" />
+								<MGIcon size="1x" icon="verified" :style="{ color: isBoxOpen ? 'var(--key-accent, var(--primary, #D297FF))' : 'var(--inactive)' }" />
 								<span>{{ $t("keys.campaigns.required_data") }}</span>
 							</div>
 							<button type="button" class="box-toggler" :aria-expanded="isBoxOpen">

package/pages/key-campaign/[slug].vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-// Public, shareable standalone key-campaign page. Reached from broadcast links
-// (Discord/Telegram/WhatsApp) and from anywhere — no need to enter a dashboard.
-// Anyone can view; requesting a key uses KeyBrowser's hybrid auth (it redirects
-// to login on 401 and returns).
-definePageMeta({ layout: 'blank' });
-
-const route = useRoute();
-const slug = route.params.slug as string;
-
-const SUPPORTED_LOCALES = ['en', 'pt-BR', 'es', 'de', 'ro', 'ar-AE'];
-const routePath = route.path.split('/');
-const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
-
-const config = useRuntimeConfig();
-// keyApiUrl overrides apiBaseURL — lets each front point to the API that
-// registered the shared key routes.
-// Follow the same override pattern as presskit/game/[slug].vue.
-const cfg = (config.public as any)?.mgSharedUi || config.public;
-const withApiV1 = (base?: string) => {
-	if (!base) return '';
-	const clean = base.replace(/\/$/, '');
-	return /\/api\/v1$/.test(clean) ? clean : `${clean}/api/v1`;
-};
-const apiBase: string = withApiV1(
-	(config.public as any).keyApiUrl ||
-	cfg.keyApiUrl ||
-	(config.public.apiBaseURL as string) ||
-	'',
-);
-
-const { data: keyData, error: fetchError, pending, refresh } = await useAsyncData(
-	`public-key-${slug}`,
-	() => $fetch<any>(`${apiBase}/public/keys/${slug}`, { params: { lang } }),
-	{ lazy: false, server: !!apiBase },
-);
-
-// If SSR produced no data (e.g. apiBase was empty during SSR), run a client-side
-// fetch once mounted so the request appears in DevTools and the page can recover.
-onMounted(async () => {
-	if (!keyData.value && !pending.value) {
-		await refresh();
-	}
-});
-
-const key = computed(() => keyData.value?.data || null);
-const loading = pending;
-const error = computed(() => !!fetchError.value || (!pending.value && !key.value));
-
-const { $i18n } = useNuxtApp()
-const t = $i18n.t.bind($i18n)
-
-useSeoMeta({
-	title: () => key.value?.name ? t('keys.campaigns.seo.title', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	description: () => key.value?.name ? t('keys.campaigns.seo.description', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	ogTitle: () => key.value?.name ? t('keys.campaigns.seo.title', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	ogDescription: () => key.value?.name ? t('keys.campaigns.seo.description', { game: key.value.name }) : t('keys.campaigns.seo.title_generic'),
-	ogImage: () => key.value?.cover_src || key.value?.cover || undefined,
-	ogType: 'website',
-	twitterCard: 'summary_large_image',
-})
-
-const restriction = computed(() => {
-	const k = key.value;
-	if (!k) return '';
-	if (k.is_exclusive) return 'Exclusive to official streamers';
-	if (k.is_tier_locked && k.access_tier && k.access_tier !== 'free') return `Exclusive to ${String(k.access_tier).toUpperCase()} plan or higher`;
-	if (k.streamer_type_id === 2) return 'Exclusive to official streamers';
-	if (k.streamer_type_id === 3) return 'Exclusive to affiliates';
-	return '';
-});
-</script>
-
-<template>
-	<div class="kc">
-		<div v-if="loading" class="kc__state">Loading…</div>
-		<div v-else-if="error" class="kc__state">Campaign not found.</div>
-
-		<template v-else>
-			<div class="kc__hero">
-				<img
-					v-if="key.cover_src"
-					:src="key.cover_src"
-					:alt="key.name"
-					class="kc__cover"
-					:style="{ objectPosition: `${(key.cover_focal_x ?? 0.5) * 100}% ${(key.cover_focal_y ?? 0.5) * 100}%` }"
-				>
-				<div class="kc__hero-body">
-					<h1 class="kc__title">{{ key.name }}</h1>
-					<div v-if="restriction" class="kc__badge">🔒 {{ restriction }}</div>
-					<div class="kc__avail">
-						<span v-if="key.available_count > 0">{{ key.available_count }} {{ key.available_count === 1 ? 'key' : 'keys' }} available to redeem</span>
-						<span v-else>Keys sold out</span>
-					</div>
-				</div>
-			</div>
-
-			<div class="kc__browser">
-				<KeyBrowser
-					requester-context="user"
-					:game-id="key.game?.id || key.game_id"
-				/>
-			</div>
-
-			<KeyCampaignsCarousel :exclude-id="key.id ?? null" :public-mode="true" base-route="key-campaign" />
-		</template>
-	</div>
-</template>
-
-<style scoped lang="scss">
-.kc {
-	max-width: 960px;
-	margin: 0 auto;
-	padding: 24px 16px 64px;
-
-	&__state {
-		padding: 80px 0;
-		text-align: center;
-		color: var(--text-secondary, #888);
-	}
-
-	&__hero {
-		display: flex;
-		gap: 20px;
-		align-items: flex-start;
-		margin-bottom: 28px;
-		flex-wrap: wrap;
-	}
-
-	&__cover {
-		width: 260px;
-		max-width: 100%;
-		height: auto;
-		object-fit: cover;
-		border: 1px solid var(--border-color, #2a2a2a);
-	}
-
-	&__hero-body { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
-
-	&__title {
-		font-size: 1.6rem;
-		font-weight: 700;
-		color: var(--text-primary, #fff);
-		margin: 0;
-	}
-
-	&__badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		width: fit-content;
-		padding: 4px 10px;
-		font-size: 0.8rem;
-		font-weight: 600;
-		color: var(--key-accent, var(--primary, #D297FF));
-		border: 1px solid rgba(210, 151, 255, 0.35);
-		background: rgba(210, 151, 255, 0.12);
-	}
-
-	&__avail { font-size: 0.9rem; color: var(--text-secondary, #aaa); }
-
-	&__browser { margin-top: 8px; }
-}
-</style>