@mundogamernetwork/shared-ui 1.3.7 → 1.4.1

package/components/form/AppSelect.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { defineEmits, defineProps, ref, watch } from "vue";
+
+interface SelectProps {
+	id: string;
+	label: string;
+	options: Array<any[] | { value: any; label: string }>;
+	disabled?: boolean;
+	model: any;
+}
+
+const emit = defineEmits(["update:model"]);
+const props = defineProps<SelectProps>();
+const selectModel = ref(props.model);
+
+watch(selectModel, () => {
+	emit("update:model", selectModel.value);
+});
+</script>
+
+<template>
+	<div
+		:class="{
+			'select-wrapper': true,
+			disabled: typeof props?.disabled !== 'undefined' ? props.disabled : false,
+		}"
+	>
+		<span class="before"></span>
+		<select
+			:id="props.id"
+			v-model="selectModel"
+			:name="props.id"
+			:class="{ filled: props.model !== '' && props.model !== null }"
+			:aria-label="$t(props.label)"
+			:placeholder="$t(props.label)"
+			:disabled="
+				typeof props?.disabled !== 'undefined' ? props.disabled : false
+			"
+		>
+			<option value="" disabled>
+				{{ $t(props.label) }}
+			</option>
+
+			<option
+				v-for="(opt, key) in props.options"
+				:key="`select-${id}-option-${key}`"
+				:value="Array.isArray(opt) ? opt[0] : opt.value"
+			>
+				{{ Array.isArray(opt) ? opt[1] : opt.label }}
+			</option>
+		</select>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.select-wrapper {
+	position: relative;
+	border-bottom: 1px solid var(--input-border-color);
+	cursor: pointer;
+
+	&.disabled {
+		cursor: default;
+		filter: contrast(0.3) brightness(0.7);
+	}
+
+	&:not(.disabled) .before {
+		position: absolute;
+		bottom: -1px;
+		left: 0;
+		display: inline-block;
+		width: 0;
+		height: 2px;
+		background-color: var(--input-active-border-color);
+		z-index: 2;
+		transition: 0.2s ease-in-out;
+	}
+
+	&:has(select:focus):not(.disabled) .before,
+	&:has(select:focus-visible):not(.disabled) .before,
+	&:has(select:active):not(.disabled) .before {
+		width: 100%;
+	}
+
+	select {
+		height: 32px;
+		padding: 0.25rem 0.75rem;
+		padding-left: 0;
+		padding-bottom: 0;
+		border: 0;
+		background: var(--input-bg);
+		font-size: 0.75rem;
+		font-weight: 400;
+		color: var(--input-fg);
+
+		&:not(.filled) {
+			color: var(--input-placeholder-fg);
+		}
+
+		&:focus,
+		&:focus-visible,
+		&:active {
+			outline: 0;
+			box-shadow: none;
+		}
+
+		option{
+			color: #000;
+		}
+	}
+}
+</style>

package/components/form/SortInput.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { defineEmits, defineProps, ref, watch } from "vue";
+
+interface SortInputProps {
+	id: string;
+	ascLabel: string;
+	descLabel: string;
+	model: "asc" | "desc";
+	disabled?: boolean;
+}
+
+const emit = defineEmits(["update:model"]);
+const props = defineProps<SortInputProps>();
+const sortModel = ref(props.model);
+
+watch(sortModel, () => {
+	emit("update:model", sortModel);
+});
+
+const toggleSort = () => {
+	if (!props?.disabled) {
+		sortModel.value = sortModel.value === "desc" ? "asc" : "desc";
+	}
+};
+</script>
+
+<template>
+	<span
+		:id="props.id"
+		:class="{
+			'sort-input': true,
+			disabled: typeof props?.disabled !== 'undefined' ? props.disabled : false,
+		}"
+		@click="toggleSort"
+	>
+		<span class="before" />
+
+		{{ $t(sortModel === "asc" ? props.ascLabel : props.descLabel) }}
+		<img
+			src="/imgs/sort-active.png"
+			width="20"
+			height="20"
+			aria-hidden="true"
+			:class="{ 'ms-auto': true, reversed: sortModel === 'asc' }"
+		/>
+	</span>
+</template>
+
+<style lang="scss" scoped>
+.sort-input {
+	position: relative;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	height: 32px;
+	min-width: 116px;
+	padding-top: 0.25rem;
+
+	border-bottom: 1px solid var(--input-border-color);
+	color: var(--input-placeholder-fg);
+	font-size: 0.75rem;
+	font-weight: 400;
+	cursor: pointer;
+
+	&.disabled {
+		cursor: default;
+		filter: contrast(0.3) brightness(0.7);
+		pointer-events: none;
+		user-select: none;
+	}
+
+	&:not(.disabled) .before {
+		position: absolute;
+		bottom: -1px;
+		left: 0;
+		display: inline-block;
+		width: 0;
+		height: 2px;
+		background-color: var(--input-active-border-color);
+		z-index: 2;
+		transition: 0.2s ease-in-out;
+	}
+
+	&:active:not(.disabled) .before,
+	&:focus:not(.disabled) .before,
+	&:focus-visible:not(.disabled) .before {
+		width: 100%;
+	}
+
+	img {
+		transition: 0.15s ease-in-out;
+
+		&.reversed {
+			transform: rotate(180deg);
+		}
+	}
+}
+</style>

package/components/indie-wall/MediaKitWallBlock.vue

@@ -0,0 +1,408 @@
+<script setup lang="ts">
+import { fetchStreamerActiveWalls, fetchPublicWallGoals, getWallSupporters } from '../../services/indieWallService'
+import MuralCanvas from './MuralCanvas.vue'
+import SupportStepper from './SupportStepper.vue'
+
+const props = defineProps<{ userId: number | string }>()
+const localePath = useLocalePath()
+const authStore = useAuthStore()
+const { locale } = useI18n()
+
+function formatMoney(amount: number, currency?: string | null) {
+	try {
+		return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD' }).format(amount)
+	} catch {
+		return `${currency || ''} ${Number(amount).toFixed(2)}`.trim()
+	}
+}
+
+const wall = ref<any>(null)
+const goals = ref<any[]>([])
+const supporters = ref<any[]>([])
+const loading = ref(true)
+
+const showStepper = ref(false)
+const stepperStartStep = ref<1 | 2 | 3 | 4 | 5>(1)
+const stepperInitialSelection = ref<{ x: number; y: number; w: number; h: number } | null>(null)
+
+const detailPixel = ref<any | null>(null)
+
+const totalPotential = computed(() =>
+	(wall.value?.width ?? 0) * (wall.value?.height ?? 0) * (Number(wall.value?.pixel_price) || 0)
+)
+
+const raisedPercent = computed(() => {
+	if (!totalPotential.value) return 0
+	return Math.min(100, (Number(wall.value?.raised_amount || 0) / totalPotential.value) * 100)
+})
+
+const tiersData = computed<any[]>(() => wall.value?.tiers?.data ?? wall.value?.tiers ?? [])
+const mgcBalance = computed(() => Number(authStore.user?.mgc_balance ?? 0))
+
+const wallUrl = computed(() => {
+	if (!wall.value) return '#'
+	return localePath(`/${wall.value.url_prefix || 'mural'}/${wall.value.slug}`)
+})
+
+function onTapEmpty(coord: { x: number; y: number }) {
+	stepperInitialSelection.value = { x: coord.x, y: coord.y, w: 1, h: 1 }
+	stepperStartStep.value = 1
+	showStepper.value = true
+}
+
+function onTapSupporter(s: any) {
+	detailPixel.value = s
+}
+
+function openStepper() {
+	stepperInitialSelection.value = null
+	stepperStartStep.value = 1
+	showStepper.value = true
+}
+
+async function onStepperSuccess() {
+	showStepper.value = false
+	await reloadSupporters()
+}
+
+async function reloadSupporters() {
+	if (!wall.value) return
+	const supRes = await getWallSupporters(wall.value.slug || wall.value.id, { per_page: 500 })
+	supporters.value = (supRes.data?.data ?? []).filter((p: any) => p.status)
+}
+
+const hoverTip = ref<{ supporter: any; x: number; y: number } | null>(null)
+
+const supporterToast = ref<{ name: string; amount: number; currency: string } | null>(null)
+let toastDismissTimer: ReturnType<typeof setTimeout> | null = null
+
+function showSupporterToast(pixel: any) {
+	if (toastDismissTimer) clearTimeout(toastDismissTimer)
+	const name = pixel.is_anonymous ? 'Anonymous' : (pixel.title || pixel.user?.name || 'Anonymous')
+	const currency = wall.value?.currency ?? 'USD'
+	const amount = Number(pixel.amount_paid || 0)
+	supporterToast.value = { name, amount, currency }
+	toastDismissTimer = setTimeout(() => { supporterToast.value = null }, 6000)
+}
+
+function onHoverSupporter(payload: { supporter: any | null; clientX: number; clientY: number }) {
+	hoverTip.value = payload.supporter
+		? { supporter: payload.supporter, x: payload.clientX, y: payload.clientY }
+		: null
+}
+
+function supporterDisplayName(s: any): string {
+	if (s.is_anonymous) return 'Anonymous'
+	return s.title || s.user?.name || 'Anonymous'
+}
+
+async function load() {
+	loading.value = true
+	try {
+		const res = await fetchStreamerActiveWalls(props.userId)
+		const list = res.data?.data ?? res.data ?? []
+		const first = Array.isArray(list) ? list.find((w: any) => w.show_on_media_kit) ?? list[0] : null
+		if (!first) return
+		wall.value = first
+		const [goalsRes, supRes] = await Promise.all([
+			fetchPublicWallGoals(first.slug || first.id).catch(() => ({ data: { data: [] } })),
+			getWallSupporters(first.slug || first.id, { per_page: 500 }),
+		])
+		goals.value = goalsRes.data?.data || []
+		supporters.value = (supRes.data?.data ?? []).filter((p: any) => p.status)
+	} catch {
+		// no wall — renders nothing
+	} finally {
+		loading.value = false
+	}
+}
+
+function onPixelConfirmed(payload: any) {
+	const pixel = payload?.pixel
+	if (!pixel || !wall.value || Number(pixel.indie_wall_id) !== Number(wall.value.id)) return
+
+	if (payload?.wall) {
+		wall.value.raised_amount = payload.wall.raised_amount ?? wall.value.raised_amount
+		wall.value.used_pixels = payload.wall.used_pixels ?? wall.value.used_pixels
+	}
+
+	showSupporterToast(pixel)
+
+	// Re-fetch full supporter list to get image_url — the WS payload omits it
+	// intentionally to stay under Pusher's 10 KB message limit.
+	reloadSupporters()
+}
+let echoChannel: any = null
+function subscribeWall(wallId: number | string) {
+	const echo = (window as any).Echo
+	if (!echo) return
+	try {
+		echoChannel = echo.channel(`indie-wall.${wallId}`)
+		echoChannel.listen('.pixel.confirmed', onPixelConfirmed)
+	} catch { /* ignore */ }
+}
+function unsubscribeWall(wallId: number | string) {
+	try { (window as any).Echo?.leave?.(`indie-wall.${wallId}`) } catch { /* ignore */ }
+	echoChannel = null
+}
+
+watch(wall, (newWall, oldWall) => {
+	if (oldWall?.id && oldWall.id !== newWall?.id) unsubscribeWall(oldWall.id)
+	if (newWall?.id) subscribeWall(newWall.id)
+})
+
+onMounted(load)
+onUnmounted(() => {
+	if (wall.value?.id) unsubscribeWall(wall.value.id)
+	if (toastDismissTimer) clearTimeout(toastDismissTimer)
+})
+</script>
+
+<template>
+	<div v-if="!loading && wall" class="mkw-block">
+		<h2 class="mkw-section-title">{{ $t('kit.media.support') }}</h2>
+
+		<div class="mkw-card">
+			<div class="mkw-meta">
+				<div class="mkw-info">
+					<span class="mkw-name">{{ wall.name }}</span>
+					<p v-if="wall.description" class="mkw-desc">{{ wall.description }}</p>
+				</div>
+				<div class="mkw-meta-actions">
+					<button type="button" class="mkw-cta" @click="openStepper">
+						{{ $t('kit.media.support') }}
+					</button>
+					<NuxtLink :to="wallUrl" class="mkw-link">
+						{{ $t('kit.media.view_wall') }}
+					</NuxtLink>
+				</div>
+			</div>
+
+			<div class="mkw-progress-row">
+				<span class="mkw-raised">
+					{{ formatMoney(Number(wall.raised_amount || 0), wall.currency) }} {{ $t('kit.media.raised') }}
+				</span>
+				<span v-if="totalPotential > 0" class="mkw-total">
+					/ {{ formatMoney(totalPotential, wall.currency) }}
+				</span>
+				<span class="mkw-pct">{{ raisedPercent.toFixed(0) }}%</span>
+			</div>
+			<div class="mkw-bar">
+				<div class="mkw-bar-fill" :style="{ width: raisedPercent + '%' }" />
+			</div>
+
+			<div class="mkw-canvas-area">
+				<div class="mkw-hint-row">
+					<span class="mkw-hint">{{ $t('tv.dashboard.indie_wall.mural_click_hint') }}</span>
+					<span class="mkw-availability">
+						{{ Math.max(0, (wall.total_pixels || 0) - (wall.used_pixels || 0)) }}
+						/ {{ wall.total_pixels || 0 }}
+						{{ $t('tv.dashboard.indie_wall.pixels_available') }}
+					</span>
+				</div>
+				<MuralCanvas
+					:wall="wall"
+					:supporters="supporters"
+					:selection="null"
+					:interactive="true"
+					:height="300"
+					@tap-empty="onTapEmpty"
+					@tap-supporter="onTapSupporter"
+					@hover-supporter="onHoverSupporter"
+				/>
+				<Transition name="mkw-toast">
+					<div v-if="supporterToast" class="mkw-supporter-toast">
+						<span class="mkw-toast-icon">★</span>
+						<div class="mkw-toast-text">
+							<strong>{{ supporterToast.name }}</strong>
+							<span>{{ $t('tv.dashboard.indie_wall.just_supported') }} · {{ formatMoney(supporterToast.amount, supporterToast.currency) }}</span>
+						</div>
+						<button class="mkw-toast-close" type="button" @click="supporterToast = null">×</button>
+					</div>
+				</Transition>
+			</div>
+		</div>
+
+		<Teleport to="body">
+			<Transition name="mkw-fade">
+				<div
+					v-if="hoverTip"
+					class="mkw-hover-tip"
+					:style="{ left: (hoverTip.x + 14) + 'px', top: (hoverTip.y + 14) + 'px' }"
+				>
+					<div class="mkw-tip-swatch" :style="{ background: hoverTip.supporter.background_color || '#D297FF' }">
+						<img v-if="hoverTip.supporter.image_url" :src="hoverTip.supporter.image_url" alt="" />
+					</div>
+					<div class="mkw-tip-info">
+						<strong>{{ supporterDisplayName(hoverTip.supporter) }}</strong>
+						<span v-if="hoverTip.supporter.supporter_message">"{{ hoverTip.supporter.supporter_message }}"</span>
+						<small>{{ formatMoney(Number(hoverTip.supporter.amount_paid || 0), wall.currency) }} · {{ hoverTip.supporter.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</small>
+					</div>
+				</div>
+			</Transition>
+
+			<Transition name="mkw-fade">
+				<SupportStepper
+					v-if="showStepper && wall"
+					:wall="wall"
+					:goals="goals"
+					:tiers="tiersData"
+					:supporters="supporters"
+					:mgc-balance="mgcBalance"
+					:start-step="stepperStartStep"
+					:initial-selection="stepperInitialSelection"
+					@close="showStepper = false"
+					@support-success="onStepperSuccess"
+				/>
+			</Transition>
+
+			<Transition name="mkw-fade">
+				<div v-if="detailPixel" class="mkw-detail-overlay" @click.self="detailPixel = null">
+					<div class="mkw-detail-box">
+						<button class="mkw-detail-close" type="button" @click="detailPixel = null">×</button>
+						<div class="mkw-detail-swatch" :style="{ background: detailPixel.background_color || '#D297FF' }">
+							<img v-if="detailPixel.image_url" :src="detailPixel.image_url" alt="" />
+						</div>
+						<p class="mkw-detail-name">{{ supporterDisplayName(detailPixel) }}</p>
+						<p v-if="detailPixel.supporter_message" class="mkw-detail-msg">"{{ detailPixel.supporter_message }}"</p>
+						<div class="mkw-detail-meta">
+							<span>{{ $t('tv.dashboard.indie_wall.mural_position') }}: ({{ detailPixel.x }}, {{ detailPixel.y }})</span>
+							<span>{{ detailPixel.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+							<span>{{ formatMoney(Number(detailPixel.amount_paid), wall.currency) }}</span>
+						</div>
+						<p v-if="detailPixel.link">
+							<a :href="detailPixel.link" target="_blank" rel="noopener" class="mkw-detail-link">{{ detailPixel.link }}</a>
+						</p>
+					</div>
+				</div>
+			</Transition>
+		</Teleport>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.mkw-block { margin-bottom: 16px; }
+
+.mkw-section-title {
+	font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
+	color: var(--kit-muted); font-weight: 700; margin-bottom: 16px;
+	display: flex; align-items: center; gap: 12px;
+	&::after { content: ""; flex: 1; height: 1px; background: var(--kit-line); }
+}
+
+.mkw-card {
+	background: var(--kit-surface, #191B20);
+	border: 1px solid var(--kit-line, rgba(128, 128, 128, 0.15));
+	padding: 16px;
+}
+
+.mkw-meta {
+	display: flex; align-items: flex-start; justify-content: space-between;
+	gap: 12px; margin-bottom: 12px;
+	@media (max-width: 576px) { flex-direction: column; }
+}
+
+.mkw-info { flex: 1; min-width: 0; }
+.mkw-name {
+	font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 19px;
+	color: var(--kit-text, #fff); display: block;
+}
+.mkw-desc {
+	font-size: 13px; color: var(--kit-muted, #888); margin: 4px 0 0;
+	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+.mkw-meta-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; }
+
+.mkw-cta {
+	display: inline-flex; align-items: center; justify-content: center;
+	background: var(--kit-accent, #D297FF); color: var(--kit-accent-ink, #13161C);
+	font-weight: 700; font-size: 13px; padding: 8px 14px; border: none;
+	white-space: nowrap; cursor: pointer; text-transform: uppercase;
+	&:hover { filter: brightness(1.1); }
+}
+
+.mkw-link {
+	font-size: 11px; color: var(--kit-accent, #D297FF);
+	text-decoration: none; text-align: center;
+	&:hover { text-decoration: underline; }
+}
+
+.mkw-progress-row {
+	display: flex; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 5px;
+}
+.mkw-raised { color: var(--kit-accent, #D297FF); font-weight: 700; }
+.mkw-total { color: var(--kit-muted, #888); font-size: 11px; }
+.mkw-pct { color: var(--kit-muted, #888); font-size: 11px; margin-left: auto; }
+
+.mkw-bar { height: 3px; background: var(--kit-surface-2, rgba(128, 128, 128, 0.15)); margin-bottom: 14px; overflow: hidden; }
+.mkw-bar-fill { height: 100%; background: var(--kit-accent, #D297FF); transition: width 0.5s ease; min-width: 2px; }
+
+.mkw-canvas-area { display: flex; flex-direction: column; gap: 6px; }
+.mkw-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.mkw-hint { font-size: 11px; color: var(--kit-muted, #888); }
+.mkw-availability { font-size: 11px; color: var(--kit-accent, #D297FF); font-weight: 600; }
+
+.mkw-hover-tip {
+	position: fixed; z-index: 9999; pointer-events: none;
+	background: #191B20; border: 1px solid #272930; padding: 8px 10px;
+	display: flex; gap: 8px; max-width: 260px; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
+}
+.mkw-tip-swatch {
+	width: 26px; height: 26px; flex-shrink: 0; overflow: hidden;
+	img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+}
+.mkw-tip-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.mkw-tip-info strong { color: #fff; font-size: 12px; }
+.mkw-tip-info span {
+	color: #888; font-size: 11px; font-style: italic;
+	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mkw-tip-info small { color: var(--kit-accent, #D297FF); font-size: 11px; margin-top: 2px; }
+
+.mkw-detail-overlay {
+	position: fixed; inset: 0; background: rgba(0,0,0,0.72);
+	display: flex; align-items: center; justify-content: center; z-index: 9998; padding: 16px;
+}
+.mkw-detail-box { background: #191B20; border: 1px solid #272930; padding: 24px; width: 100%; max-width: 320px; position: relative; }
+.mkw-detail-close {
+	position: absolute; top: 10px; right: 10px; background: #272930; border: none; color: #fff;
+	width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
+	cursor: pointer; font-size: 1rem; line-height: 1;
+}
+.mkw-detail-swatch {
+	width: 44px; height: 44px; margin-bottom: 12px; overflow: hidden;
+	img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+}
+.mkw-detail-name { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
+.mkw-detail-msg { color: #aaa; font-size: 0.85rem; font-style: italic; margin-bottom: 12px; line-height: 1.4; }
+.mkw-detail-meta { display: flex; flex-direction: column; gap: 3px; color: #666; font-size: 0.75rem; margin-bottom: 8px; }
+.mkw-detail-link {
+	color: var(--kit-accent, #D297FF); font-size: 0.75rem; word-break: break-all; text-decoration: none;
+	&:hover { text-decoration: underline; }
+}
+
+.mkw-fade-enter-active, .mkw-fade-leave-active { transition: opacity 0.12s; }
+.mkw-fade-enter-from, .mkw-fade-leave-to { opacity: 0; }
+
+.mkw-supporter-toast {
+	display: flex; align-items: center; gap: 10px;
+	background: #1a1200; border: 1px solid var(--kit-accent, #D297FF); padding: 10px 12px;
+	margin-top: 10px; position: relative;
+}
+.mkw-toast-icon { color: var(--kit-accent, #D297FF); font-size: 1rem; flex-shrink: 0; line-height: 1; }
+.mkw-toast-text {
+	display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
+	strong { color: #fff; font-size: 0.82rem; font-weight: 700; }
+	span { color: var(--kit-accent, #D297FF); font-size: 0.75rem; }
+}
+.mkw-toast-close {
+	background: none; border: none; color: #888; cursor: pointer; font-size: 1rem;
+	line-height: 1; padding: 0; flex-shrink: 0;
+	&:hover { color: #fff; }
+}
+.mkw-toast-enter-active { transition: opacity 0.2s, transform 0.2s; }
+.mkw-toast-leave-active { transition: opacity 0.3s; }
+.mkw-toast-enter-from { opacity: 0; transform: translateY(-6px); }
+.mkw-toast-leave-to { opacity: 0; }
+</style>

package/components/indie-wall/StepCustomize.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{
 	form: {
 		title: string
@@ -36,6 +38,12 @@ const messageError = ref('')
 const imageMissingError = ref('')
 const emailError = ref('')
 
+// Errors are (re)computed on submit in next(); clear them as soon as the user
+// edits the field so a corrected value doesn't keep showing a stale error.
+watch(() => local.guest_email, () => { emailError.value = '' })
+watch(() => local.title, () => { titleError.value = '' })
+watch(() => local.message, () => { messageError.value = '' })
+
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 const URL_REGEX = /^https?:\/\/.+\..+/
 

package/components/indie-wall/StepGoal.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { locale } = useI18n()
+
 defineProps<{
 	goals: any[]
 	selectedGoalId: number | null
@@ -14,6 +16,14 @@ function pick(goalId: number | null) {
 	emit('select', goalId)
 	emit('next')
 }
+
+function formatMoney(amount: number, currency?: string | null) {
+	try {
+		return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD', maximumFractionDigits: 0 }).format(amount)
+	} catch {
+		return `${currency || ''} ${Number(amount).toFixed(0)}`.trim()
+	}
+}
 </script>
 
 <template>
@@ -34,7 +44,7 @@ function pick(goalId: number | null) {
 						{{ $t('tv.dashboard.indie_wall.reached') }}
 					</span>
 					<span v-else class="sw-goal-amount">
-						{{ currency }} {{ Number(goal.target_amount || 0).toFixed(0) }}
+						{{ formatMoney(Number(goal.target_amount || 0), currency) }}
 					</span>
 				</header>