@mundogamernetwork/shared-ui 1.8.8 → 1.8.13

package/assets/kit/kit-base.css

@@ -725,18 +725,15 @@ body:has(.kit-press) {
 	margin: 0;
 }
 .kit-footer__cta {
-	display: inline-block;
-	padding: 8px 20px;
-	border: 1px solid var(--kit-accent, #FDB215);
 	color: var(--kit-accent, #FDB215);
 	font-size: 0.8rem;
 	font-weight: 600;
 	text-decoration: none;
-	transition: background 0.15s, color 0.15s;
+	border-bottom: 1px solid transparent;
+	transition: border-color 0.15s;
 }
 .kit-footer__cta:hover {
-	background: var(--kit-accent, #FDB215);
-	color: #000;
+	border-bottom-color: var(--kit-accent, #FDB215);
 }
 
 /* ── Scroll offset for sticky anchor nav ────────────────────────────*/

package/components/PlatformIcon.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// Inline SVG per platform instead of Font Awesome <i class="fa-..."> classes —
+// shared-ui can't control whether a consuming app wires up FA as a classic
+// webfont/CSS kit or as SVG Vue components (agency-frontend uses the latter,
+// via @fortawesome/vue-fontawesome, and only registers the solid icon set —
+// no brands set at all), so raw `<i class="fa-brands fa-tiktok">` silently
+// renders nothing there. Built from simple SVG primitives (circle/rect/line),
+// not memorized brand path data, so correctness doesn't depend on visually
+// checking curve coordinates.
+defineProps<{
+	platform: string
+}>()
+</script>
+
+<template>
+	<svg v-if="platform === 'x'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+		<line x1="4" y1="4" x2="20" y2="20" /><line x1="20" y1="4" x2="4" y2="20" />
+	</svg>
+	<svg v-else-if="platform === 'youtube'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<rect x="2" y="5" width="20" height="14" rx="4" />
+		<polygon points="10,9 10,15 15,12" fill="currentColor" stroke="none" />
+	</svg>
+	<svg v-else-if="platform === 'instagram'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<rect x="3" y="3" width="18" height="18" rx="5" />
+		<circle cx="12" cy="12" r="4" />
+		<circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
+	</svg>
+	<svg v-else-if="platform === 'facebook'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<circle cx="12" cy="12" r="9" />
+		<text x="12" y="16.5" text-anchor="middle" font-size="11" font-weight="700" fill="currentColor" stroke="none">f</text>
+	</svg>
+	<svg v-else-if="platform === 'linkedin'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<rect x="3" y="3" width="18" height="18" rx="3" />
+		<text x="12" y="16" text-anchor="middle" font-size="9" font-weight="700" fill="currentColor" stroke="none">in</text>
+	</svg>
+	<svg v-else-if="platform === 'discord'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<rect x="3" y="6" width="18" height="12" rx="6" />
+		<circle cx="9" cy="12" r="1.3" fill="currentColor" stroke="none" />
+		<circle cx="15" cy="12" r="1.3" fill="currentColor" stroke="none" />
+	</svg>
+	<svg v-else-if="platform === 'twitch'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<rect x="3" y="4" width="18" height="13" rx="1" />
+		<line x1="9" y1="7" x2="9" y2="13" /><line x1="15" y1="7" x2="15" y2="13" />
+	</svg>
+	<svg v-else-if="platform === 'tiktok'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+		<circle cx="9" cy="17" r="3" />
+		<line x1="12" y1="17" x2="12" y2="5" />
+		<path d="M12 5c0 2.5 2 4.5 4.5 4.5" />
+	</svg>
+	<svg v-else-if="platform === 'telegram'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
+		<path d="M3 12.5 20 4l-3.5 16-5-4-3 3-1-5.5z" />
+	</svg>
+	<span v-else class="platform-icon-fallback">{{ platform.slice(0, 2).toUpperCase() }}</span>
+</template>
+
+<style scoped>
+.platform-icon-fallback {
+	font-size: 11px;
+	font-weight: 700;
+}
+</style>

package/components/keys/KeyCampaignDashboardCard.vue

@@ -22,7 +22,7 @@ const props = defineProps<{
 		isUpcoming?: boolean;
 		streamer_type?: number | null;
 		type?: string | null;
-		platforms?: Array<{ id: number; name: string; slug?: string | null } | string>;
+		platforms?: Array<{ id: number; name: string; slug?: string | null; alternative_name?: string | null } | string>;
 	};
 	publicMode?: boolean;
 	baseRoute?: string;
@@ -65,9 +65,12 @@ const PLATFORM_ABBR: Record<string, string> = {
 	"linux": "Linux", "ios": "iOS", "android": "Android", "gog": "GOG",
 };
 
-function platformAbbr(p: { name: string } | string): string {
-	const name = typeof p === "string" ? p : p.name;
-	return PLATFORM_ABBR[name.toLowerCase()] ?? name;
+// The API already resolves an abbreviated name per platform (community.platforms
+// .alternative_name, e.g. "Playstation 4" → "PS4") — prefer that over the static
+// map below, which only exists as a fallback for older responses that omit it.
+function platformAbbr(p: { name: string; alternative_name?: string | null } | string): string {
+	if (typeof p === "string") return PLATFORM_ABBR[p.toLowerCase()] ?? p;
+	return p.alternative_name || PLATFORM_ABBR[p.name.toLowerCase()] || p.name;
 }
 
 function cardTierLabel(tier: string | null | undefined): string {

package/components/keys/KeyCampaignsCarousel.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, inject } from "vue"
 import { fetchCampaigns } from "../../services/campaignService"
-import KeyCampaignDashboardCard from "./KeyCampaignDashboardCard.vue"
 
 const props = defineProps<{
 	excludeId?: number | null
@@ -11,10 +10,16 @@ const props = defineProps<{
 }>()
 
 const mgPlatform = props.mgPlatform || (inject<string>("mgPlatform", "MGTV"))
+const locale = useNuxtApp().$i18n.locale
 
 const items = ref<any[]>([])
 const loading = ref(true)
 
+const detailRoute = (item: any) =>
+	props.publicMode
+		? `/${locale.value}/${props.baseRoute ?? 'key-campaigns'}/${item.slug}`
+		: `/${locale.value}/dashboard/${props.baseRoute ?? 'key-campaigns'}/${item.slug}`
+
 onMounted(async () => {
 	try {
 		const res = await fetchCampaigns(
@@ -49,13 +54,31 @@ onMounted(async () => {
 		</div>
 
 		<div v-else class="kc-carousel__track">
-			<div v-for="item in items" :key="item.id" class="kc-carousel__card">
-				<KeyCampaignDashboardCard
-					:card="{ ...item, isExpired: item.is_open === false }"
-					:public-mode="publicMode"
-					:base-route="baseRoute ?? 'key-campaigns'"
-				/>
-			</div>
+			<NuxtLink
+				v-for="item in items"
+				:key="item.id"
+				:to="detailRoute(item)"
+				class="kc-carousel__card"
+			>
+				<div class="kc-carousel__thumb">
+					<img
+						v-if="item.cover_src || item.cover"
+						:src="item.cover_src || item.cover"
+						:alt="item.name"
+					/>
+					<div v-else class="kc-carousel__thumb-placeholder">
+						<i class="mg-icon mg-icon-game-key" />
+					</div>
+					<span v-if="!item.is_open" class="kc-carousel__closed">{{ $t("keys.campaigns.closed") }}</span>
+				</div>
+				<div class="kc-carousel__info">
+					<div class="kc-carousel__name">{{ item.name }}</div>
+					<div class="kc-carousel__avail">
+						{{ item.available_count ?? 0 }}/{{ item.total_count ?? item.quantity ?? "?" }}
+						{{ $t("keys.campaigns.available") }}
+					</div>
+				</div>
+			</NuxtLink>
 		</div>
 	</div>
 </template>
@@ -90,14 +113,81 @@ onMounted(async () => {
 	}
 
 	&__skeleton {
-		flex: 0 0 200px;
-		height: 280px;
+		flex: 0 0 180px;
+		height: 140px;
 		background: var(--bg-app-badge);
 		animation: pulse 1.4s ease-in-out infinite;
 	}
 
 	&__card {
-		flex: 0 0 200px;
+		flex: 0 0 180px;
+		display: flex;
+		flex-direction: column;
+		text-decoration: none;
+		color: inherit;
+		border: 1px solid var(--button-secondary-default-bg);
+		transition: border-color 0.15s;
+
+		&:hover { border-color: var(--key-accent, var(--primary, #D297FF)); }
+	}
+
+	&__thumb {
+		position: relative;
+		width: 100%;
+		height: 101px;
+		overflow: hidden;
+		background: var(--bg-app-badge);
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__thumb-placeholder {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--secondary-info-fg);
+		font-size: 24px;
+	}
+
+	&__closed {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--overlay-dark, rgba(0, 0, 0, 0.55));
+		font-size: 11px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		letter-spacing: 0.5px;
+		text-transform: uppercase;
+	}
+
+	&__info {
+		padding: 8px 10px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__name {
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--card-article-title);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__avail {
+		font-size: 11px;
+		color: var(--secondary-info-fg);
 	}
 }
 

package/nuxt.config.ts

@@ -65,6 +65,10 @@ export default defineNuxtConfig({
 	// this reaches every consuming app automatically — matches the storesDirs
 	// pattern below. @vue-leaflet/vue-leaflet ships untranspiled ESM that
 	// breaks Nuxt's build without this, needed by MediaKit/MapCountries.vue.
+	// Safe now that leaflet/@vue-leaflet are real dependencies (not
+	// peerDependencies) of this package — every consumer gets them
+	// transitively via node_modules hoisting, so the module this transpile
+	// entry points at always actually exists to resolve.
 	build: {
 		transpile: ['@vue-leaflet/vue-leaflet'],
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.8.8",
+  "version": "1.8.13",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -30,25 +30,25 @@
   "peerDependencies": {
     "@pinia-plugin-persistedstate/nuxt": ">=1.0.0",
     "@pinia/nuxt": ">=0.5.0",
-    "@vue-leaflet/vue-leaflet": ">=0.10.0",
     "axios": ">=1.0.0",
     "hls.js": ">=1.5.0",
     "laravel-echo": ">=1.15.0",
-    "leaflet": ">=1.9.0",
     "nuxt": ">=3.13.0",
     "pinia": ">=2.1.0",
     "pusher-js": ">=8.0.0",
     "vue": ">=3.5.0"
   },
+  "dependencies": {
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
+    "leaflet": "^1.9.4"
+  },
   "devDependencies": {
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "@pinia/nuxt": "^0.5.5",
     "@types/leaflet": "^1.9.18",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "axios": "^1.18.1",
     "hls.js": "^1.6.16",
     "laravel-echo": "^2.3.7",
-    "leaflet": "^1.9.4",
     "nuxt": "^3.15.4",
     "pinia": "^2.3.1",
     "pusher-js": "^8.5.0",

package/pages/key-campaigns/index.vue

@@ -1178,7 +1178,12 @@ onUnmounted(() => {
 
 			.cards {
 				display: flex;
-				align-items: flex-start;
+				// Cards in the same row have wildly different content amounts
+				// (a badge here, an extra wrapped platform tag there, "days
+				// remaining" not always present) — stretch instead of
+				// flex-start so every card in a row shares the row's height,
+				// with .buttons pinned to the bottom (see .text/.buttons below).
+				align-items: stretch;
 				gap: 24px;
 				height: 100%;
 				flex-flow: wrap;
@@ -1235,6 +1240,7 @@ onUnmounted(() => {
 					}
 
 					.text {
+						flex: 1;
 						min-height: 170px;
 
 						.card-name {
@@ -1307,6 +1313,10 @@ onUnmounted(() => {
 							justify-content: space-between;
 							align-items: center;
 							width: 100%;
+							// Pins the buttons row to the bottom of .text (now
+							// flex:1) regardless of how much content sits above
+							// it — every card's actions line up on the same row.
+							margin-top: auto;
 
 							.btn-share {
 								background: transparent;

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

@@ -4,6 +4,7 @@ import { sendMediaKitProposal } from '../../services/mediaKitProposalService';
 import MediaKitWallBlock from '../../components/indie-wall/MediaKitWallBlock.vue';
 import MgMediaKitStore from '../../components/MediaKit/MgMediaKitStore.vue';
 import MapCountries from '../../components/MediaKit/MapCountries.vue';
+import PlatformIcon from '../../components/PlatformIcon.vue';
 
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
@@ -121,14 +122,6 @@ 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 }));
@@ -358,8 +351,7 @@ 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')">
-							<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>
+							<PlatformIcon :platform="s.platform" />
 						</a>
 					</div>
 				</aside>
@@ -396,7 +388,7 @@ function onDownload() {
 								<a v-for="p in platforms" :key="p.platform" class="mk-platform" :href="p.url || undefined" target="_blank" rel="noopener" @click="track('click')">
 									<div class="pl-head">
 										<span class="pl-name-group">
-											<i v-if="PLATFORM_ICON[p.platform]" class="fa-brands pl-icon" :class="PLATFORM_ICON[p.platform]" />
+											<PlatformIcon class="pl-icon" :platform="p.platform" />
 											<span class="pl-name">{{ PLATFORM_LABEL[p.platform] || p.platform }}</span>
 										</span>
 										<span v-if="p.verified" class="pl-verified" :title="$t('kit.media.verified')">✓</span>
@@ -646,10 +638,8 @@ function onDownload() {
 					<MediaKitWallBlock :user-id="userId" @wall-status="hasMural = $event" />
 				</section>
 
-				<footer class="mk-footer">
-					<p v-if="!isPremium" class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong></p>
-					<a v-if="!isPremium" :href="`${agencyBase}/dashboard/media-kit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.media.create_yours') }}</a>
-					<p class="mk-footer-meta">{{ $t('kit.media.generated') }} {{ kit.generated_at?.slice(0, 10) }}</p>
+				<footer v-if="!isPremium" class="mk-footer">
+					<p class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong> · <a :href="`${agencyBase}/dashboard/media-kit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.media.create_yours') }}</a></p>
 				</footer>
 			</div>
 		</template>
@@ -821,7 +811,6 @@ function onDownload() {
 
 	&:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
 }
-.mk-soc-fallback { font-size: 11px; font-weight: 700; }
 
 /* Buttons (shared) */
 .kit-btn {
@@ -1095,11 +1084,6 @@ function onDownload() {
 	text-align: center;
 	strong { color: var(--kit-accent); font-weight: 700; }
 }
-.mk-footer-meta {
-	color: var(--kit-muted);
-	font-size: 13px;
-	margin: 0;
-}
 
 /* Responsive */
 @media (max-width: 840px) {

package/pages/presskit/game/[slug].vue

@@ -619,8 +619,8 @@ useHead(() => ({
 			</section>
 
 			<footer class="kit-footer">
-				<p v-if="!kit.no_branding" class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong></p>
-				<a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.press.create_yours') }}</a>
+				<p v-if="!kit.no_branding" class="kit-footer__text">{{ $t('kit.press.made_with') }} <strong>Mundo Gamer Agency</strong> · <a :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.press.create_yours') }}</a></p>
+				<a v-else :href="kit.create_kit_url || `${agencyBase}/presskit`" target="_blank" rel="noopener" class="kit-footer__cta">{{ $t('kit.press.create_yours') }}</a>
 			</footer>
 		</template>
 	</div>

package/services/campaignService.ts

@@ -157,7 +157,7 @@ export interface Campaign {
 	status?: number | boolean
 	quantity?: number
 	request_user_status?: number
-	platforms?: Array<{ id: number; name: string; slug: string }>
+	platforms?: Array<{ id: number; name: string; slug: string; alternative_name?: string | null }>
 	regions?: Array<{ id: number; name: string; slug: string }>
 	requests?: Array<{ id: number; key_item_id?: number; admin_notes?: string }>
 	company?: { name: string; email?: string; twitter?: string; thumbnail_url?: string }
@@ -187,6 +187,7 @@ export interface Platform {
 	id: number
 	name: string
 	slug: string
+	alternative_name?: string | null
 }
 
 export interface CampaignsResponse {
@@ -332,7 +333,7 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		request_id: k.requests?.[0]?.id,
 		request_item_id: k.requests?.[0]?.key_item_id,
 		request_admin_notes: k.requests?.[0]?.admin_notes ?? null,
-		platforms: (k.platforms || []).map((p: any) => ({ id: p.id, name: p.name, slug: p.slug })),
+		platforms: (k.platforms || []).map((p: any) => ({ id: p.id, name: p.name, slug: p.slug, alternative_name: p.alternative_name ?? null })),
 		regions: (k.regions || []).map((r: any) => ({ id: r.id, name: r.name, slug: r.slug })),
 	}
 }