@mundogamernetwork/shared-ui 1.8.6 → 1.8.7

package/components/keys/KeyCampaignDashboardCard.vue

@@ -172,7 +172,7 @@ const detailRoute = computed(() =>
 							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" 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="#D297FF"/>
 							</svg>
-							{{ card.type }}
+							{{ typeof card.type === "string" ? card.type : card.type.name }}
 						</span>
 					</div>
 				</div>

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -130,7 +130,9 @@
 												<div
 													class="keys-badge"
 													v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming"
+													:title="$t('keys.campaigns.keys_left', { n: card.available_count })"
 												>
+													<i class="fa-solid fa-key" />
 													{{ card.available_count }}
 												</div>
 
@@ -221,10 +223,6 @@
 												+{{ card.platforms.length - 4 }}
 											</span>
 										</div>
-										<div v-if="card.available_count > 0 && card.user_can_access && !card.isExpired && !card.isUpcoming" class="card-availability">
-											{{ $t("keys.campaigns.keys_left", { n: card.available_count }) }}
-										</div>
-										<div v-if="card.gameName && card.gameName !== card.text" class="card-campaign-name">{{ card.text }}</div>
 
 										<div class="buttons">
 											<template v-if="!card.user_can_access">
@@ -1237,7 +1235,7 @@ onUnmounted(() => {
 					}
 
 					.text {
-						min-height: 210px;
+						min-height: 170px;
 
 						.card-name {
 							font-size: 16px;
@@ -1254,18 +1252,6 @@ onUnmounted(() => {
 							gap: 6px;
 						}
 
-						.card-availability {
-							font-size: 12px;
-							color: var(--key-accent, var(--primary, #D297FF));
-							font-weight: 600;
-						}
-
-						.card-campaign-name {
-							font-size: 13px;
-							font-weight: 400;
-							color: var(--secondary-info-fg);
-						}
-
 						.card-meta-row {
 							display: flex;
 							align-items: center;

package/pages/media-kit/[slug].vue

@@ -98,6 +98,14 @@ const PLATFORM_LABEL: Record<string, string> = {
 	linkedin: 'LinkedIn', bluesky: 'Bluesky',
 };
 
+// Font Awesome brand icon per platform — no entry means no official FA glyph
+// exists yet (e.g. Kick), the template falls back to the 2-letter label.
+const PLATFORM_ICON: Record<string, string> = {
+	instagram: 'fa-instagram', tiktok: 'fa-tiktok', youtube: 'fa-youtube', twitch: 'fa-twitch',
+	x: 'fa-x-twitter', facebook: 'fa-facebook', discord: 'fa-discord', telegram: 'fa-telegram',
+	linkedin: 'fa-linkedin', bluesky: 'fa-bluesky',
+};
+
 const socials = computed(() => {
 	const s = streamer.value?.social_links || {};
 	return Object.entries(s).filter(([, v]) => v).map(([k, v]) => ({ platform: k, url: v as string }));
@@ -110,6 +118,14 @@ const scheduleByDay = computed(() => {
 	return [0, 1, 2, 3, 4, 5, 6].map((d) => ({ d, key: DOW[d], slot: map[d] || null }));
 });
 
+// Sidebar "hire" CTA jumps to the rates tab — on mobile the tabs are further
+// down the stacked layout, so switching activeTab alone can leave the change
+// off-screen; scroll it into view too.
+function goToRates() {
+	activeTab.value = 1;
+	document.getElementById('mk-tabs')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
 // ── Tabs: template picks which one opens first, casting-details-style ──
 const TAB_KEYS = ['profile', 'rates', 'performance'] as const;
 const TEMPLATE_DEFAULT_TAB: Record<string, number> = {
@@ -284,7 +300,8 @@ function onDownload() {
 					</div>
 
 					<div class="mk-actions no-print">
-						<a class="kit-btn kit-btn-primary" @click="onDownload">{{ $t('kit.media.download_pdf') }}</a>
+						<a v-if="!isOwnKit" class="kit-btn kit-btn-primary" @click="goToRates">{{ $t('kit.media.hire') }}</a>
+						<a class="kit-btn" :class="isOwnKit ? 'kit-btn-primary' : 'kit-btn-ghost'" @click="onDownload">{{ $t('kit.media.download_pdf') }}</a>
 						<a v-if="streamer.contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">{{ $t('kit.media.contact') }}</a>
 					</div>
 
@@ -314,16 +331,17 @@ function onDownload() {
 
 					<div v-if="socials.length" class="mk-socials no-print">
 						<a v-for="s in socials" :key="s.platform" class="mk-soc" :href="s.url" target="_blank" rel="noopener" :title="PLATFORM_LABEL[s.platform] || s.platform" @click="track('click')">
-							{{ (PLATFORM_LABEL[s.platform] || s.platform).slice(0, 2).toUpperCase() }}
+							<i v-if="PLATFORM_ICON[s.platform]" class="fa-brands" :class="PLATFORM_ICON[s.platform]" />
+							<span v-else class="mk-soc-fallback">{{ (PLATFORM_LABEL[s.platform] || s.platform).slice(0, 2).toUpperCase() }}</span>
 						</a>
 					</div>
 				</aside>
 
 				<!-- ══════════════ MAIN: TABS ══════════════ -->
 				<main class="mk-main">
-					<div class="mk-tabs no-print">
+					<div id="mk-tabs" class="mk-tabs no-print">
 						<button class="mk-tab" :class="{ active: activeTab === 0 }" @click="activeTab = 0">{{ $t('kit.media.tab_profile') }}</button>
-						<button v-if="hasRatesTab" class="mk-tab" :class="{ active: activeTab === 1 }" @click="activeTab = 1">{{ $t('kit.media.tab_rates') }}</button>
+						<button class="mk-tab" :class="{ active: activeTab === 1 }" @click="activeTab = 1">{{ $t('kit.media.tab_rates') }}</button>
 						<button v-if="hasPerformanceTab" class="mk-tab" :class="{ active: activeTab === 2 }" @click="activeTab = 2">{{ $t('kit.media.tab_performance') }}</button>
 					</div>
 
@@ -452,8 +470,12 @@ function onDownload() {
 					</div>
 
 					<!-- ── TAB: RATE CARDS ── -->
-					<div v-if="hasRatesTab" class="mk-tabpanel" :class="{ active: activeTab === 1 }" data-print-tab="rates">
-						<div class="mk-rc-layout">
+					<div class="mk-tabpanel" :class="{ active: activeTab === 1 }" data-print-tab="rates">
+						<div v-if="!hasRatesTab" class="mk-rc-empty">
+							<p>{{ isOwnKit ? $t('kit.media.rates_empty_own') : $t('kit.media.rates_empty_viewer') }}</p>
+							<a v-if="!isOwnKit && streamer.contact_email" class="kit-btn kit-btn-primary" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">{{ $t('kit.media.contact') }}</a>
+						</div>
+						<div v-else class="mk-rc-layout">
 							<div class="mk-rc-main">
 								<div v-if="bundles.length" class="mk-rc-group">
 									<h2>{{ $t('kit.media.rates_bundles') }}</h2>
@@ -715,11 +737,12 @@ function onDownload() {
 	display: flex; align-items: center; justify-content: center;
 	border: 1px solid var(--kit-line);
 	color: var(--kit-muted);
-	font-size: 11px; font-weight: 700;
+	font-size: 15px;
 	text-decoration: none;
 
 	&:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
 }
+.mk-soc-fallback { font-size: 11px; font-weight: 700; }
 
 /* Buttons (shared) */
 .kit-btn {
@@ -909,6 +932,15 @@ function onDownload() {
 }
 
 /* Rate cards / builder */
+.mk-rc-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	text-align: center;
+	padding: 60px 24px;
+	color: var(--kit-muted);
+}
 .mk-rc-layout { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
 @media (max-width: 760px) { .mk-rc-layout { grid-template-columns: 1fr; } }
 .mk-rc-group { display: flex; flex-direction: column; gap: 1px; background: var(--kit-line); margin-bottom: 24px; }