@mundogamernetwork/shared-ui 1.5.0 → 1.7.0

package/locales/ro.json

@@ -240,5 +240,120 @@
   "common": {
     "video_thumbnail": "Miniatură video",
     "expanded_image": "Imagine mărită"
+  },
+  "tv": {
+    "dashboard": {
+      "indie_wall": {
+        "about_section": "Despre mural",
+        "anonymous": "Anonim",
+        "cancel": "Anulează",
+        "confirm_support": "Confirmă susținerea",
+        "cta_create_btn": "Create my account",
+        "cta_create_desc": "Create an account to track your support, receive updates, and join other walls.",
+        "cta_create_skip": "Continue without an account",
+        "cta_create_title": "Want to save your support?",
+        "drag_to_crop": "Drag to crop",
+        "error_area_occupied": "This area is already taken. Choose another space on the wall.",
+        "error_gateway": "Could not start payment. Try again.",
+        "error_save": "Could not save your support. Try again.",
+        "filled": "Completat",
+        "footer_create_cta": "Create your own wall",
+        "footer_made_with": "Made with",
+        "goal_card_cta": "Susține acest obiectiv",
+        "goal_card_goal": "Goal",
+        "goal_card_missing": "mai lipsesc {count} pixeli pentru următoarea livrare",
+        "goal_card_missing_amount": "mai lipsesc {amount} pentru următoarea livrare",
+        "goal_card_result": "Result",
+        "goal_card_select": "Select goal",
+        "goal_card_you_help": "You help",
+        "goals": "Obiective",
+        "guest_email_label": "Your email",
+        "guest_email_placeholder": "you@email.com",
+        "guest_intro": "You can support without creating an account. Use a name and email to receive confirmation.",
+        "guest_name_label": "Public name",
+        "guest_name_placeholder": "How do you want to appear on the wall?",
+        "just_supported": "Support received",
+        "leaderboard_pixels": "pixels",
+        "leaderboard_purchases": "support",
+        "leaderboard_purchases_plural": "supports",
+        "leaderboard_show_less": "Show less",
+        "leaderboard_show_more": "Show more",
+        "leaderboard_title": "Supporter",
+        "leaderboard_title_span": "leaderboard",
+        "message": "Message",
+        "message_placeholder": "Leave a message for the creator",
+        "mural_by": "by {name}",
+        "mural_click_hint": "Click a pixel to see who supported",
+        "mural_grid": "Wall",
+        "mural_legend_free": "Free",
+        "mural_legend_taken": "Taken",
+        "mural_position": "Poziție",
+        "mural_support_now": "Support now",
+        "mural_title_field": "Support title",
+        "mural_title_placeholder": "Ex: First pixels of the project",
+        "not_found": "Wall not found.",
+        "pay_agree": "I agree to the support and billing terms.",
+        "pay_agree_rights": "I understand the image and message may appear publicly on the wall.",
+        "pay_paypal": "PayPal",
+        "pay_paypal_meta": "Secure payment through PayPal",
+        "pay_pix": "Pix",
+        "pay_pix_soon": "Coming soon",
+        "pay_stripe": "Card",
+        "pay_stripe_meta": "Secure payment through Stripe",
+        "pixels_available": "Available pixels",
+        "processing_close": "Close",
+        "processing_desc": "We are confirming your support. This may take a few seconds.",
+        "processing_timeout_desc": "Confirmation is taking longer than usual. You can close this and check again later.",
+        "processing_timeout_title": "Still processing",
+        "processing_title": "Processing support",
+        "raised": "Strâns",
+        "reached": "Atins",
+        "recent_supporters": "Recent supporters",
+        "share_copy_link": "Copy link",
+        "share_join_cta": "Susține și tu acest mural",
+        "share_pixel_cta": "Distribuie această susținere",
+        "share_pixel_default_desc": "See who is supporting the {wall} wall.",
+        "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
+        "share_pixel_title": "{name} supported {wall}",
+        "share_via_facebook": "Share on Facebook",
+        "share_via_twitter": "Share on X",
+        "share_via_whatsapp": "Share on WhatsApp",
+        "sold": "sold",
+        "spots_unit": "pixeli",
+        "step_back": "Back",
+        "step_block_auto": "Choose automatically",
+        "step_block_confirm": "Confirm position",
+        "step_block_help": "Choose where your {count} pixels will appear on the wall.",
+        "step_block_manual": "Choose manually",
+        "step_block_quantity": "Quantity",
+        "step_block_shape": "Shape",
+        "step_block_title": "Choose your space",
+        "step_block_total": "{total} pixels",
+        "step_customize_continue": "Continue",
+        "step_customize_help": "Upload your image, title, and message to appear on the wall.",
+        "step_customize_image": "Support image",
+        "step_customize_image_hint": "Use a square image or crop it before continuing.",
+        "step_customize_link": "Optional link",
+        "step_customize_link_error": "Enter a valid link.",
+        "step_customize_remove_image": "Remove image",
+        "step_customize_replace_image": "Replace image",
+        "step_customize_title": "Customize your support",
+        "step_customize_upload_image": "Upload image",
+        "step_goal_help": "Choose a goal to direct your support.",
+        "step_goal_skip_desc": "Your support goes to the general wall without linking to a specific goal.",
+        "step_goal_skip_title": "Support without a goal",
+        "step_goal_title": "Choose a goal",
+        "step_package_custom_cta": "Set quantity",
+        "step_package_custom_desc": "Choose how many pixels you want to buy.",
+        "step_package_custom_title": "Custom",
+        "step_package_help": "Choose a pixel package for the wall.",
+        "step_package_title": "Choose your package",
+        "step_pay_method": "Payment method",
+        "step_pay_title": "Payment",
+        "step_pay_total": "Total",
+        "supporters": "Susținători",
+        "tiers": "Packages"
+      }
+    }
   }
 }

package/nuxt.config.ts

@@ -51,7 +51,14 @@ import { dirname } from "node:path";
 const SHARED_UI_COMPONENT_PRIORITY = 1000;
 
 const require = createRequire(`${process.cwd()}/`);
-const packageRoot = dirname(require.resolve("@mundogamernetwork/shared-ui/package.json"));
+let packageRoot: string;
+try {
+	packageRoot = dirname(require.resolve("@mundogamernetwork/shared-ui/package.json"));
+} catch {
+	// The package does not resolve by its own published name while running the
+	// local playground directly from this repository.
+	packageRoot = process.cwd();
+}
 
 export default defineNuxtConfig({
 	components: [
@@ -92,8 +99,8 @@ export default defineNuxtConfig({
 		],
 	},
 	css: [
-		"@mundogamernetwork/shared-ui/assets/kit/kit-base.css",
-		"@mundogamernetwork/shared-ui/assets/kit/kit-theme.css",
+		`${packageRoot}/assets/kit/kit-base.css`,
+		`${packageRoot}/assets/kit/kit-theme.css`,
 	],
 	runtimeConfig: {
 		public: {

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -123,6 +123,7 @@
 													:src="card.cover"
 													:alt="card.text"
 													:class="{ 'gray-out': card.isExpired || card.isUpcoming || !card.user_can_access }"
+													:style="{ objectPosition: `${card.coverFocalX * 100}% ${card.coverFocalY * 100}%` }"
 													@error="(e) => { (e.target as HTMLImageElement).src = '/imgs/no-cover-img.jpg' }"
 												/>
 
@@ -419,7 +420,7 @@ const sortMode = ref<"recent" | "popular">("recent")
 // ------------------------------------------------------------------
 // Data
 // ------------------------------------------------------------------
-const sliderImages = ref<Array<{ slug: string; cover: string; name: string; id: number }>>([])
+const sliderImages = ref<Array<{ slug: string; cover: string; name: string; id: number; coverFocalX: number; coverFocalY: number }>>([])
 const cards = ref<Array<any>>([])
 const redeemedCards = ref<Array<any>>([])
 
@@ -529,11 +530,9 @@ async function loadFeaturedCampaigns() {
 			.filter((item: any) => (truthyFlag(item.featured) || truthyFlag(item.highlight)) && truthyFlag(item.is_open))
 			.map((item: any) => ({
 				id: item.id,
-				cover: item.game?.url_banner_src || item.cover_src,
-				// Only applies to the cover_src fallback — the game's own
-				// url_banner_src is already banner-shaped and needs no repositioning.
-				coverFocalX: item.game?.url_banner_src ? 0.5 : (item.cover_focal_x ?? 0.5),
-				coverFocalY: item.game?.url_banner_src ? 0.5 : (item.cover_focal_y ?? 0.5),
+				cover: item.cover_src || item.game?.url_banner_src || item.game?.url_cover_src || "/imgs/no-cover-img.jpg",
+				coverFocalX: item.cover_src ? (item.cover_focal_x ?? 0.5) : 0.5,
+				coverFocalY: item.cover_src ? (item.cover_focal_y ?? 0.5) : 0.5,
 				name: item.name,
 				slug: item.slug,
 			}))
@@ -592,6 +591,8 @@ async function loadCampaigns(page = 1) {
 				type: item.type?.name,
 				typeId: item.type?.id,
 				cover: item.cover_src || item.game?.url_cover_src || item.game?.url_banner_src || "/imgs/no-cover-img.jpg",
+				coverFocalX: item.cover_src ? (item.cover_focal_x ?? 0.5) : 0.5,
+				coverFocalY: item.cover_src ? (item.cover_focal_y ?? 0.5) : 0.5,
 				text: item.name,
 				time: item.time_to_expire ? item.time_to_expire.split(":")[0] : "0",
 				slug: item.slug,

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { fetchPublicMediaKit, trackMediaKitEvent } from '../../services/mediaKitService';
 import MediaKitWallBlock from '../../components/indie-wall/MediaKitWallBlock.vue';
+import MgMediaKitStore from '../../components/MediaKit/MgMediaKitStore.vue';
 
 const route = useRoute();
 const slug = computed(() => route.params.slug as string);
@@ -25,6 +26,15 @@ const template = computed(() => kit.value?.template || 'creator');
 const platforms = computed(() => kit.value?.platforms ?? []);
 const totalFollowers = computed(() => kit.value?.total_followers ?? 0);
 const isPremium = computed(() => kit.value?.is_premium ?? false);
+const coverUrl = computed(() => kit.value?.cover_url || streamer.value?.cover || null);
+const portfolioImages = computed(() => kit.value?.portfolio_images ?? streamer.value?.portfolio_images ?? []);
+const brandLogos = computed(() => kit.value?.brand_logos ?? streamer.value?.brand_logos ?? []);
+const creatorStore = computed(() => kit.value?.creator_store ?? null);
+const customLinks = computed(() => kit.value?.custom_links ?? streamer.value?.custom_links ?? []);
+
+const coverStyle = computed(() => coverUrl.value
+	? { backgroundImage: `linear-gradient(180deg, rgba(5,6,10,.14), rgba(5,6,10,.92)), url("${String(coverUrl.value).replace(/"/g, '\\"')}")` }
+	: undefined);
 
 const PLATFORM_LABEL: Record<string, string> = {
 	instagram: 'Instagram', tiktok: 'TikTok', youtube: 'YouTube', twitch: 'Twitch', x: 'X',
@@ -109,7 +119,7 @@ function onDownload() {
 		<div v-else-if="error || !kit" class="kit-state"><p>{{ $t('kit.media.not_available') }}</p></div>
 
 		<template v-else>
-			<div class="mk-cover" />
+			<div class="mk-cover" :class="{ 'has-image': coverUrl }" :style="coverStyle" />
 
 			<div class="kit-wrap mk-sections">
 				<header class="mk-header">
@@ -118,6 +128,7 @@ function onDownload() {
 
 					<div class="mk-hid">
 						<h1>{{ streamer.name }}</h1>
+						<p v-if="streamer.custom_headline" class="mk-headline">{{ streamer.custom_headline }}</p>
 						<div class="mk-badges">
 							<span v-if="streamer.platform" class="mk-badge plat">{{ streamer.platform }}</span>
 							<span v-if="streamer.tier && streamer.tier !== 'free'" class="mk-badge tier">{{ String(streamer.tier).toUpperCase() }}</span>
@@ -132,6 +143,25 @@ function onDownload() {
 					</div>
 				</header>
 
+				<!-- Personal link hub: replaces a separate link-in-bio service. -->
+				<nav class="mk-link-hub no-print" data-sec="links" :aria-label="$t('kit.media.quick_links')">
+					<a v-for="(link, index) in customLinks" :key="`${link.url}-${index}`" class="mk-link" :class="{ 'mk-link--primary': index === 0 }" :href="link.url" target="_blank" rel="noopener" @click="track('click')">
+						<span>{{ link.label }}</span><b>↗</b>
+					</a>
+					<a v-if="streamer.contact_email" class="mk-link mk-link--primary" :href="`mailto:${streamer.contact_email}`" @click="track('contact')">
+						<span>{{ $t('kit.media.work_with_me') }}</span><b>↗</b>
+					</a>
+					<a v-if="creatorStore" class="mk-link" href="#store" @click="track('click')">
+						<span>{{ $t('kit.media.visit_store') }}</span><b>↓</b>
+					</a>
+					<a v-if="userId" class="mk-link" href="#support" @click="track('click')">
+						<span>{{ $t('kit.media.visit_mural') }}</span><b>↓</b>
+					</a>
+					<a v-for="s in socials" :key="s.platform" class="mk-link mk-link--social" :href="s.url" target="_blank" rel="noopener" @click="track('click')">
+						<span>{{ PLATFORM_LABEL[s.platform] || s.platform }}</span><b>↗</b>
+					</a>
+				</nav>
+
 				<!-- Reach / multi-platform followers -->
 				<section v-if="platforms.length" class="kit-block" data-sec="reach">
 					<h2>{{ $t('kit.media.reach') }}</h2>
@@ -151,6 +181,24 @@ function onDownload() {
 					</div>
 				</section>
 
+				<!-- Mundo Gamer creator store -->
+				<section v-if="creatorStore" id="store" class="kit-block kit-card mk-store-block" data-sec="store">
+					<MgMediaKitStore :store="creatorStore" :contact-email="streamer.contact_email" @click="track('click')" />
+				</section>
+
+				<!-- Creator-selected portfolio and brand imagery -->
+				<section v-if="portfolioImages.length || brandLogos.length" class="kit-block" data-sec="portfolio">
+					<h2>{{ $t('kit.media.portfolio') }}</h2>
+					<div v-if="portfolioImages.length" class="mk-portfolio">
+						<a v-for="(image, index) in portfolioImages" :key="image" :href="image" target="_blank" rel="noopener" @click="track('click')">
+							<img :src="image" :alt="`${streamer.name} — ${index + 1}`" />
+						</a>
+					</div>
+					<div v-if="brandLogos.length" class="mk-brand-logos">
+						<img v-for="logo in brandLogos" :key="logo" :src="logo" :alt="$t('kit.media.partner_brand')" />
+					</div>
+				</section>
+
 				<!-- TV streaming metrics -->
 				<section v-if="stats" class="kit-block" data-sec="metrics">
 					<h2>{{ $t('kit.media.key_metrics') }}</h2>
@@ -262,18 +310,8 @@ function onDownload() {
 					</div>
 				</section>
 
-				<!-- Social links -->
-				<section v-if="socials.length" class="kit-block no-print" data-sec="connect">
-					<h2>{{ $t('kit.media.connect') }}</h2>
-					<div class="mk-socials">
-						<a v-for="s in socials" :key="s.platform" class="mk-soc" :href="s.url" target="_blank" rel="noopener" @click="track('click')">
-							{{ s.platform }}
-						</a>
-					</div>
-				</section>
-
 				<!-- IndieWall / mural — self-contained widget (own fetch, realtime, stepper) -->
-				<section v-if="userId" class="kit-block" data-sec="support">
+				<section v-if="userId" id="support" class="kit-block" data-sec="support">
 					<MediaKitWallBlock :user-id="userId" />
 				</section>
 
@@ -308,8 +346,10 @@ function onDownload() {
 
 /* Cover */
 .mk-cover {
-	height: 200px;
+	height: 280px;
 	background: linear-gradient(120deg, var(--kit-accent-2, #6b15ac) 0%, #2a0e4e 50%, var(--kit-bg) 100%);
+	background-position: center;
+	background-size: cover;
 	position: relative;
 	border-bottom: 1px solid var(--kit-line);
 
@@ -319,44 +359,59 @@ function onDownload() {
 		inset: 0;
 		background: radial-gradient(circle at 80% 20%, rgba(168, 85, 247, .35), transparent 60%);
 	}
+
+	&.has-image::after {
+		background: linear-gradient(180deg, rgba(5, 6, 10, .04), rgba(5, 6, 10, .52));
+	}
 }
 
 /* Header */
 .mk-header {
-	margin-top: -70px;
+	margin: -82px auto 0;
 	position: relative;
 	z-index: 2;
 	display: flex;
-	gap: 24px;
-	align-items: flex-end;
-	flex-wrap: wrap;
+	flex-direction: column;
+	align-items: center;
+	max-width: 760px;
+	text-align: center;
 }
 .mk-avatar {
-	width: 140px;
-	height: 140px;
+	width: 156px;
+	height: 156px;
 	border: 3px solid var(--kit-accent);
 	object-fit: cover;
 	flex-shrink: 0;
 	background: var(--kit-surface-2);
+	box-shadow: 0 20px 52px rgba(0, 0, 0, .42);
 }
 .mk-avatar-ph {
 	background: linear-gradient(135deg, var(--kit-accent-2, #6b15ac), var(--kit-accent));
 }
 .mk-hid {
-	flex: 1;
-	min-width: 260px;
-	padding-bottom: 6px;
+	width: 100%;
+	padding-top: 18px;
 
 	h1 {
 		font-family: 'Rajdhani', sans-serif;
-		font-size: 40px;
+		font-size: clamp(36px, 7vw, 54px);
 		line-height: 1.05;
+		margin: 0;
 	}
 }
+.mk-headline {
+	margin: 8px auto 0;
+	max-width: 620px;
+	color: var(--kit-accent);
+	font-family: 'Rajdhani', sans-serif;
+	font-size: 20px;
+	font-weight: 600;
+}
 .mk-badges {
 	display: flex;
+	justify-content: center;
 	gap: 8px;
-	margin: 8px 0;
+	margin: 12px 0;
 	flex-wrap: wrap;
 }
 .mk-badge {
@@ -374,13 +429,60 @@ function onDownload() {
 .mk-bio {
 	color: #c4c4d2;
 	font-size: 15px;
-	max-width: 60ch;
-	margin-top: 6px;
+	line-height: 1.65;
+	max-width: 66ch;
+	margin: 6px auto 0;
 }
 .mk-actions {
 	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
 	gap: 10px;
-	padding-bottom: 8px;
+	padding-top: 18px;
+}
+
+/* Link-in-bio hub */
+.mk-link-hub {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+	width: min(100%, 720px);
+	margin: 30px auto 2px;
+}
+.mk-link {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	min-height: 54px;
+	padding: 0 18px;
+	border: 1px solid var(--kit-line);
+	background: color-mix(in srgb, var(--kit-surface) 92%, transparent);
+	color: var(--kit-text);
+	font-size: 14px;
+	font-weight: 700;
+	text-decoration: none;
+	transition: transform .16s ease, border-color .16s ease, background .16s ease;
+
+	&:hover {
+		transform: translateY(-2px);
+		border-color: var(--kit-accent);
+		background: var(--kit-surface-2);
+	}
+
+	b { color: var(--kit-accent); font-size: 16px; }
+
+	&--primary {
+		grid-column: 1 / -1;
+		background: var(--kit-accent);
+		border-color: var(--kit-accent);
+		color: var(--kit-accent-ink);
+
+		b { color: var(--kit-accent-ink); }
+		&:hover { background: var(--kit-accent); filter: brightness(1.06); }
+	}
+
+	&--social { min-height: 46px; color: var(--kit-muted); }
 }
 
 /* Buttons */
@@ -434,6 +536,29 @@ function onDownload() {
 		}
 	}
 }
+.mk-store-block { padding: 24px; scroll-margin-top: 24px; }
+.mk-portfolio {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 10px;
+
+	a { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--kit-line); background: var(--kit-surface); }
+	img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
+	a:hover img { transform: scale(1.03); }
+}
+.mk-brand-logos {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 16px;
+	margin-top: 16px;
+	padding: 18px;
+	border: 1px solid var(--kit-line);
+	background: var(--kit-surface);
+
+	img { width: 112px; height: 54px; object-fit: contain; filter: grayscale(1); opacity: .8; }
+}
 .mk-period {
 	color: var(--kit-muted);
 	font-size: 13px;
@@ -768,16 +893,19 @@ function onDownload() {
 .mk-sections { display: flex; flex-direction: column; }
 .mk-sections > .mk-header { order: 0; }
 .mk-sections > .mk-footer { order: 100; }
-.mk-sections > [data-sec="reach"]    { order: 1; }
-.mk-sections > [data-sec="metrics"]  { order: 2; }
-.mk-sections > [data-sec="audience"] { order: 3; }
-.mk-sections > [data-sec="styles"]   { order: 4; }
-.mk-sections > [data-sec="games"]    { order: 5; }
-.mk-sections > [data-sec="rates"]    { order: 6; }
-.mk-sections > [data-sec="brands"]   { order: 7; }
-.mk-sections > [data-sec="schedule"] { order: 8; }
-.mk-sections > [data-sec="connect"]  { order: 9; }
-.mk-sections > [data-sec="support"]  { order: 10; }
+.mk-sections > [data-sec="links"]     { order: 1; }
+.mk-sections > [data-sec="reach"]     { order: 2; }
+.mk-sections > [data-sec="store"]     { order: 3; }
+.mk-sections > [data-sec="portfolio"] { order: 4; }
+.mk-sections > [data-sec="metrics"]   { order: 5; }
+.mk-sections > [data-sec="audience"]  { order: 6; }
+.mk-sections > [data-sec="styles"]    { order: 7; }
+.mk-sections > [data-sec="games"]     { order: 8; }
+.mk-sections > [data-sec="rates"]     { order: 9; }
+.mk-sections > [data-sec="brands"]    { order: 10; }
+.mk-sections > [data-sec="schedule"]  { order: 11; }
+.mk-sections > [data-sec="connect"]   { order: 12; }
+.mk-sections > [data-sec="support"]   { order: 13; scroll-margin-top: 24px; }
 
 [data-template="performance"] {
 	.mk-sections > [data-sec="metrics"]  { order: 1; }
@@ -803,7 +931,20 @@ function onDownload() {
 	.mk-cols2, .mk-rates, .mk-bundles { grid-template-columns: 1fr; }
 	.mk-brands { grid-template-columns: repeat(3, 1fr); }
 	.mk-schedule { grid-template-columns: repeat(4, 1fr); }
-	.mk-header { flex-direction: column; align-items: flex-start; }
+	.mk-portfolio { grid-template-columns: 1fr 1fr; }
+}
+
+@media (max-width: 560px) {
+	.kit-wrap { padding-inline: 14px; }
+	.mk-cover { height: 230px; }
+	.mk-avatar { width: 132px; height: 132px; }
+	.mk-header { margin-top: -68px; }
+	.mk-link-hub { grid-template-columns: 1fr; }
+	.mk-link--primary { grid-column: auto; }
+	.mk-actions { width: 100%; }
+	.kit-btn { flex: 1; justify-content: center; }
+	.mk-portfolio { grid-template-columns: 1fr; }
+	.mk-store-block { padding: 16px; }
 }
 
 @media print {
@@ -811,7 +952,7 @@ function onDownload() {
 }
 
 // ── Scroll unlock (body has overflow-y: hidden globally in some frontends) ───
-:global(body):has(.pk-page) {
+:global(body):has(.kit-media) {
 	overflow-y: auto !important;
 	max-height: none !important;
 }

package/pages/mural/[slug].vue

@@ -281,7 +281,22 @@ async function onStepperSuccess() {
 
 function supporterDisplayName(s: any): string {
     if (s.is_anonymous) return t('tv.dashboard.indie_wall.anonymous')
-    return s.title || s.user?.name || t('tv.dashboard.indie_wall.anonymous')
+    return s.user?.nickname
+        || s.user?.username
+        || s.user?.full_name
+        || s.user?.name
+        || s.guest_name
+        || t('tv.dashboard.indie_wall.anonymous')
+}
+
+function supporterAvatarUrl(s: any): string {
+    if (s.is_anonymous) return ''
+    return s.user?.avatar_url || s.user?.profile_image || s.user?.avatar || s.user?.image || ''
+}
+
+function supporterTitle(s: any): string {
+    if (!s?.title) return ''
+    return s.title !== supporterDisplayName(s) ? s.title : ''
 }
 
 const requestUrl = useRequestURL()
@@ -601,11 +616,11 @@ onUnmounted(() => {
                     </div>
                     <div class="supp-body">
                         <div class="supp-identity">
-                            <img v-if="s.user?.avatar_url || s.user?.profile_image" :src="s.user.avatar_url || s.user.profile_image" class="supp-avi" alt="" />
+                            <img v-if="supporterAvatarUrl(s)" :src="supporterAvatarUrl(s)" class="supp-avi" alt="" />
                             <div v-else class="supp-avi-init">{{ (supporterDisplayName(s)[0] || '?').toUpperCase() }}</div>
                             <div class="supp-user-info">
                                 <span class="supp-name">{{ supporterDisplayName(s) }}</span>
-                                <span v-if="!s.is_anonymous && !s.user && s.guest_email" class="supp-email">{{ s.guest_email }}</span>
+                                <span v-if="supporterTitle(s)" class="supp-title">{{ supporterTitle(s) }}</span>
                             </div>
                             <span class="supp-amount">{{ formatMoney(Number(s.amount_paid || 0), wall.currency) }}</span>
                         </div>
@@ -721,6 +736,7 @@ onUnmounted(() => {
                     </div>
                     <div class="detail-body">
                         <p class="detail-name">{{ supporterDisplayName(detailPixel) }}</p>
+                        <p v-if="supporterTitle(detailPixel)" class="detail-support-title">{{ supporterTitle(detailPixel) }}</p>
                         <p v-if="detailPixel.supporter_message" class="detail-msg">"{{ detailPixel.supporter_message }}"</p>
                         <div class="detail-amount-row">
                             <span class="detail-amount-label">{{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
@@ -1006,7 +1022,7 @@ onUnmounted(() => {
     color: var(--title-fg, #fff); font-size: 0.78rem; font-weight: 500;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.supp-email {
+.supp-title {
     color: var(--secondary-info-fg, #666); font-size: 0.65rem;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
@@ -1051,7 +1067,11 @@ onUnmounted(() => {
 }
 .detail-body { padding: 20px; }
 .detail-name {
-    font-size: 1.1rem; font-weight: 700; color: var(--title-fg, #fff); margin: 0 0 8px;
+    font-size: 1.1rem; font-weight: 700; color: var(--title-fg, #fff); margin: 0 0 4px;
+}
+.detail-support-title {
+    color: var(--secondary-info-fg, #aaa); font-size: 0.78rem;
+    line-height: 1.35; margin: 0 0 10px;
 }
 .detail-msg {
     color: var(--secondary-info-fg, #aaa); font-size: 0.875rem; font-style: italic;