@mundogamernetwork/shared-ui 1.0.0

package/pages/mural/[slug].vue

@@ -0,0 +1,1058 @@
+<script setup lang="ts">
+import { fetchPublicWall, fetchPublicWallGoals, getWallSupporters } from '../../services/indieWallService'
+import SupportStepper from '../../components/indie-wall/SupportStepper.vue'
+import MuralCanvas from '../../components/indie-wall/MuralCanvas.vue'
+import IndieWallLeaderboard from '../../components/indie-wall/IndieWallLeaderboard.vue'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const wallSlug = route.params.slug as string
+const authStore = useAuthStore()
+
+const preX = route.query.x !== undefined ? parseInt(route.query.x as string) : null
+const preY = route.query.y !== undefined ? parseInt(route.query.y as string) : null
+const isPopup = computed(() => route.query.popup === '1')
+
+function notifyOpenerAndClose(payload: Record<string, any> = {}) {
+    if (!isPopup.value || typeof window === 'undefined') return
+    try {
+        if (window.opener && !window.opener.closed) {
+            window.opener.postMessage({ type: 'mgn-mural-support-success', ...payload }, '*')
+        }
+    } catch {
+        // ignore cross-origin issues
+    }
+    setTimeout(() => window.close(), 200)
+}
+
+// ── Realtime subscription (Laravel Echo / Pusher) ─────────────────────────
+const showProcessing = ref(false)
+const processingTimedOut = ref(false)
+const pendingPixelId = ref<number | null>(null)
+let processingTimeoutId: ReturnType<typeof setTimeout> | null = null
+let httpFallbackTimerId: ReturnType<typeof setInterval> | null = null
+const WS_TIMEOUT_MS = 30000  // 30s fallback window
+const HTTP_FALLBACK_MS = 5000  // when WS isn't connected, retry HTTP every 5s
+
+function appendOrReplaceSupporter(pixel: any) {
+    if (!pixel) return
+    const idx = supporters.value.findIndex((s: any) => Number(s.id) === Number(pixel.id))
+    if (idx === -1) {
+        supporters.value = [pixel, ...supporters.value]
+    } else {
+        supporters.value.splice(idx, 1, pixel)
+    }
+}
+
+function onPixelConfirmed(payload: any) {
+    const pixel = payload?.pixel
+    if (!pixel || Number(pixel.indie_wall_id) !== Number(wall.value?.id)) return
+    appendOrReplaceSupporter(pixel)
+
+    // If we were waiting for our own pixel, dismiss the overlay.
+    if (pendingPixelId.value && Number(pixel.id) === Number(pendingPixelId.value)) {
+        finalizePending(pixel.id)
+    }
+
+    // Update wall stats from the broadcast payload (optimistic).
+    if (payload?.wall && wall.value) {
+        wall.value.raised_amount = payload.wall.raised_amount ?? wall.value.raised_amount
+        wall.value.used_pixels = payload.wall.used_pixels ?? wall.value.used_pixels
+        wall.value.progress_percent = payload.wall.progress_percent ?? wall.value.progress_percent
+    }
+    if (payload?.goal) {
+        const g = goals.value.find((g: any) => Number(g.id) === Number(payload.goal.id))
+        if (g) Object.assign(g, payload.goal)
+    }
+}
+
+function finalizePending(pixelId: number | string) {
+    pendingPixelId.value = null
+    showProcessing.value = false
+    if (processingTimeoutId) { clearTimeout(processingTimeoutId); processingTimeoutId = null }
+    if (httpFallbackTimerId) { clearInterval(httpFallbackTimerId); httpFallbackTimerId = null }
+    try {
+        sessionStorage.removeItem('mgn-mural-pending-pixel')
+        sessionStorage.removeItem('mgn-mural-pending-wall')
+    } catch { /* ignore */ }
+    if (isPopup.value) {
+        notifyOpenerAndClose({ wallSlug, pixelId, fromGateway: true })
+    } else {
+        // Refresh supporters from API to get full pixel data (image_url, correct dimensions).
+        getWallSupporters(wallSlug, { per_page: 1000 }).then(res => {
+            supporters.value = (res.data?.data ?? []).filter((s: any) => s.status !== false)
+        }).catch(() => { /* keep current state if refresh fails */ })
+    }
+}
+
+function startWaitingForPixel(pixelId: number) {
+    pendingPixelId.value = pixelId
+    showProcessing.value = true
+    processingTimedOut.value = false
+
+    // Fallback: if WS doesn't deliver in WS_TIMEOUT_MS, mark as timed out.
+    processingTimeoutId = setTimeout(() => {
+        processingTimedOut.value = true
+        try {
+            sessionStorage.removeItem('mgn-mural-pending-pixel')
+            sessionStorage.removeItem('mgn-mural-pending-wall')
+        } catch { /* ignore */ }
+        if (isPopup.value) {
+            notifyOpenerAndClose({ wallSlug, fromGateway: true, pending: true })
+        }
+    }, WS_TIMEOUT_MS)
+
+    // Secondary fallback: poll HTTP regardless of WS state in case the broadcast is missed.
+    httpFallbackTimerId = setInterval(async () => {
+        try {
+            const res = await getWallSupporters(wallSlug, { per_page: 1000 })
+            const list = (res.data?.data ?? []).filter((s: any) => s.status !== false)
+            const found = list.find((s: any) => Number(s.id) === Number(pixelId))
+            if (found) {
+                supporters.value = list
+                finalizePending(pixelId)
+            }
+        } catch { /* keep trying */ }
+    }, HTTP_FALLBACK_MS)
+}
+
+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 (err) {
+        console.warn('[mural] Echo subscribe failed', err)
+    }
+}
+
+function unsubscribeWall(wallId: number | string) {
+    try {
+        (window as any).Echo?.leave?.(`indie-wall.${wallId}`)
+    } catch { /* ignore */ }
+    echoChannel = null
+}
+
+// ── Data ───────────────────────────────────────────────────────────────────
+const wall = ref<any>(null)
+const goals = ref<any[]>([])
+const supporters = ref<any[]>([])
+const loading = ref(true)
+
+// ── Stepper state ──────────────────────────────────────────────────────────
+const showStepper = ref(false)
+const stepperStartStep = ref<1 | 2 | 3 | 4 | 5>(1)
+const stepperInitialGoalId = ref<number | null>(null)
+const stepperInitialTierId = ref<number | null>(null)
+const stepperInitialSelection = ref<{ x: number; y: number; w: number; h: number } | null>(null)
+
+// ── Detail popup ───────────────────────────────────────────────────────────
+const detailPixel = ref<any | null>(null)
+
+// ── Computed ───────────────────────────────────────────────────────────────
+const mgcBalance = computed(() => Number(authStore.user?.mgc_balance ?? 0))
+
+const tiersData = computed<any[]>(() => wall.value?.tiers?.data ?? wall.value?.tiers ?? [])
+
+const progressPercent = computed(() => {
+    if (!wall.value) return 0
+    const total = wall.value.width * wall.value.height
+    return total > 0 ? Math.min(100, ((wall.value.used_pixels || 0) / total) * 100) : 0
+})
+
+// ── Load ────────────────────────────────────────────────────────────────────
+async function loadWall() {
+    loading.value = true
+    try {
+        const [wallRes, goalsRes, supportersRes] = await Promise.all([
+            fetchPublicWall(wallSlug),
+            fetchPublicWallGoals(wallSlug),
+            getWallSupporters(wallSlug, { per_page: 1000 }),
+        ])
+        wall.value = wallRes.data?.data || wallRes.data
+        goals.value = goalsRes.data?.data || []
+        supporters.value = (supportersRes.data?.data || []).filter((s: any) => s.status !== false)
+
+        // Pre-open stepper at step 1 if arriving with x/y query (e.g. from embed)
+        if (preX !== null && preY !== null && wall.value) {
+            const w = wall.value
+            if (preX >= 0 && preY >= 0 && preX < w.width && preY < w.height) {
+                stepperInitialSelection.value = { x: preX, y: preY, w: 1, h: 1 }
+                stepperStartStep.value = 1
+                showStepper.value = true
+            }
+        }
+
+        // In popup mode (opened from embed), open the stepper immediately
+        if (isPopup.value && wall.value) {
+            stepperStartStep.value = 1
+            showStepper.value = true
+        }
+    } catch (err) {
+        console.error(err)
+    } finally {
+        loading.value = false
+    }
+}
+
+// ── Stepper triggers ───────────────────────────────────────────────────────
+function openStepper(opts: { goalId?: number | null; tierId?: number | null; selection?: { x: number; y: number; w: number; h: number } | null; startStep?: 1 | 2 | 3 | 4 | 5 } = {}) {
+    stepperInitialGoalId.value = opts.goalId ?? null
+    stepperInitialTierId.value = opts.tierId ?? null
+    stepperInitialSelection.value = opts.selection ?? null
+    stepperStartStep.value = opts.startStep ?? 1
+    showStepper.value = true
+}
+
+function onCanvasTapEmpty(coord: { x: number; y: number }) {
+    openStepper({
+        selection: { x: coord.x, y: coord.y, w: 1, h: 1 },
+        startStep: 1,
+    })
+}
+
+function onCanvasTapSupporter(s: any) {
+    detailPixel.value = s
+}
+
+const hoverTip = ref<{ supporter: any; x: number; y: number } | null>(null)
+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 onStepperClose() {
+    showStepper.value = false
+}
+
+const showGuestCta = ref(false)
+
+async function onStepperSuccess() {
+    showStepper.value = false
+    if (isPopup.value) {
+        notifyOpenerAndClose({ wallSlug })
+        return
+    }
+    if (!authStore.signedIn) {
+        showGuestCta.value = true
+    }
+    await loadWall()
+}
+
+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')
+}
+
+useHead({
+    title: computed(() => wall.value?.name ? `Mural · ${wall.value.name}` : 'Mural'),
+})
+
+onMounted(async () => {
+    await loadWall()
+    if (wall.value?.id) subscribeWall(wall.value.id)
+    // If returning from the payment gateway, wait for the WS confirmation.
+    if (route.query.payment === 'success') {
+        // Strip ?payment=success from the URL immediately so F5 does not restart the wait.
+        router.replace({ query: { ...route.query, payment: undefined } })
+        let pendingId: number | null = null
+        try {
+            const raw = sessionStorage.getItem('mgn-mural-pending-pixel')
+            const rawSlug = sessionStorage.getItem('mgn-mural-pending-wall')
+            if (raw && rawSlug === wallSlug) pendingId = parseInt(raw)
+        } catch { /* ignore */ }
+        if (pendingId) {
+            // If pixel is already in the loaded supporters list, it was confirmed — just clear state
+            const alreadyConfirmed = supporters.value.find((s: any) => Number(s.id) === Number(pendingId))
+            if (alreadyConfirmed) {
+                try {
+                    sessionStorage.removeItem('mgn-mural-pending-pixel')
+                    sessionStorage.removeItem('mgn-mural-pending-wall')
+                } catch { }
+                if (isPopup.value) notifyOpenerAndClose({ wallSlug, pixelId: pendingId, fromGateway: true })
+            } else {
+                startWaitingForPixel(pendingId)
+                // Also check immediately in case WS event fired before page loaded
+                try {
+                    const res = await getWallSupporters(wallSlug, { per_page: 1000 })
+                    const list = (res.data?.data ?? []).filter((s: any) => s.status !== false)
+                    const found = list.find((s: any) => Number(s.id) === Number(pendingId))
+                    if (found) {
+                        supporters.value = list
+                        finalizePending(pendingId)
+                    }
+                } catch { /* WS will handle it */ }
+            }
+        } else if (isPopup.value) {
+            notifyOpenerAndClose({ wallSlug, fromGateway: true })
+        }
+    }
+})
+
+onUnmounted(() => {
+    if (wall.value?.id) unsubscribeWall(wall.value.id)
+    if (processingTimeoutId) clearTimeout(processingTimeoutId)
+    if (httpFallbackTimerId) clearInterval(httpFallbackTimerId)
+})
+</script>
+
+<template>
+    <div v-if="loading" class="mural-loading">
+        <div class="mural-spinner" />
+    </div>
+
+    <div v-else-if="!wall" class="mural-not-found">
+        <p>{{ $t('tv.dashboard.indie_wall.not_found') }}</p>
+    </div>
+
+    <div v-else class="mural-page">
+        <!-- ── Hero ─────────────────────────────────────────────────────── -->
+        <section
+            class="hero"
+            :style="wall.cover_image_url ? `background-image:url(${wall.cover_image_url})` : ''"
+        >
+            <div class="hero-overlay">
+                <img v-if="wall.logo_url" :src="wall.logo_url" class="hero-logo" alt="" />
+                <h1 class="hero-title">{{ wall.name }}</h1>
+                <p v-if="wall.description" class="hero-desc">{{ wall.description }}</p>
+
+                <div class="hero-stats">
+                    <div class="hero-stat">
+                        <span class="hero-stat-value">{{ wall.currency }} {{ Number(wall.raised_amount || 0).toFixed(2) }}</span>
+                        <span class="hero-stat-label">{{ $t('tv.dashboard.indie_wall.raised') }}</span>
+                    </div>
+                    <div class="hero-stat-divider" />
+                    <div class="hero-stat">
+                        <span class="hero-stat-value">{{ wall.supporters_count || supporters.length }}</span>
+                        <span class="hero-stat-label">{{ $t('tv.dashboard.indie_wall.supporters') }}</span>
+                    </div>
+                    <div class="hero-stat-divider" />
+                    <div class="hero-stat">
+                        <span class="hero-stat-value">{{ progressPercent.toFixed(0) }}%</span>
+                        <span class="hero-stat-label">{{ $t('tv.dashboard.indie_wall.filled') }}</span>
+                    </div>
+                </div>
+
+                <div class="hero-progress-wrap">
+                    <div class="hero-progress-bar" :style="{ width: progressPercent + '%' }" />
+                </div>
+
+                <button class="hero-cta" type="button" @click="openStepper({ startStep: 1 })">
+                    {{ $t('tv.dashboard.indie_wall.mural_support_now') }}
+                </button>
+            </div>
+        </section>
+
+        <!-- ── About ─────────────────────────────────────────────────────── -->
+        <section v-if="wall.long_description" class="section about-section">
+            <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.about_section') }}</h2>
+            <div class="about-body">
+                <p v-for="(para, i) in wall.long_description.split(/\n\n+/)" :key="i">{{ para }}</p>
+            </div>
+        </section>
+
+        <!-- ── Goals ─────────────────────────────────────────────────────── -->
+        <section v-if="goals.length" class="section">
+            <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.goals') }}</h2>
+            <div class="goals-grid">
+                <article
+                    v-for="goal in goals"
+                    :key="goal.id"
+                    class="goal-card"
+                    :class="{ reached: goal.is_reached }"
+                >
+                    <header class="goal-card-head">
+                        <h3 class="goal-title">{{ goal.title }}</h3>
+                        <div class="goal-head-right">
+                            <span v-if="goal.is_reached" class="badge-reached">
+                                {{ $t('tv.dashboard.indie_wall.reached') }}
+                            </span>
+                            <span v-else-if="goal.target_amount > 0" class="goal-amount">
+                                {{ wall.currency }} {{ Number(goal.target_amount).toFixed(0) }}
+                            </span>
+                            <span v-else class="goal-amount">
+                                {{ goal.target_pixels }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}
+                            </span>
+                        </div>
+                    </header>
+
+                    <ul class="goal-attrs">
+                        <li v-if="goal.description">
+                            <span class="goal-attr-label">{{ $t('tv.dashboard.indie_wall.goal_card_you_help') }}:</span>
+                            <span class="goal-attr-val">{{ goal.description }}</span>
+                        </li>
+                        <li v-if="goal.reward_description">
+                            <span class="goal-attr-label">{{ $t('tv.dashboard.indie_wall.goal_card_result') }}:</span>
+                            <span class="goal-attr-val">{{ goal.reward_description }}</span>
+                        </li>
+                    </ul>
+
+                    <div class="goal-progress-wrap">
+                        <div class="goal-progress-bar">
+                            <div class="goal-progress-fill" :style="{ width: (goal.progress_percent || 0) + '%' }" />
+                            <span class="goal-progress-text">
+                                <template v-if="goal.target_amount > 0">
+                                    {{ $t('tv.dashboard.indie_wall.goal_card_missing_amount', { currency: wall.currency, amount: Math.max(0, goal.target_amount - (goal.current_amount || 0)).toFixed(0) }) }}
+                                </template>
+                                <template v-else>
+                                    {{ $t('tv.dashboard.indie_wall.goal_card_missing', { count: Math.max(0, (goal.target_pixels || 0) - (goal.current_pixels || 0)) }) }}
+                                </template>
+                            </span>
+                        </div>
+                    </div>
+
+                    <button
+                        class="goal-cta"
+                        type="button"
+                        :disabled="goal.is_reached"
+                        @click="!goal.is_reached && openStepper({ goalId: goal.id, startStep: 1 })"
+                    >
+                        {{ goal.is_reached
+                            ? $t('tv.dashboard.indie_wall.reached')
+                            : $t('tv.dashboard.indie_wall.goal_card_cta') }}
+                    </button>
+                </article>
+            </div>
+        </section>
+
+        <!-- ── Packages / tiers ──────────────────────────────────────────── -->
+        <section v-if="tiersData.length" class="section">
+            <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.tiers') }}</h2>
+            <div class="cards-row">
+                <button
+                    v-for="tier in tiersData"
+                    :key="tier.id"
+                    class="tier-card"
+                    type="button"
+                    :disabled="tier.max_quantity && tier.sold_count >= tier.max_quantity"
+                    @click="openStepper({ tierId: tier.id, startStep: 2 })"
+                >
+                    <img v-if="tier.image_url" :src="tier.image_url" class="tier-img" alt="" />
+                    <h3 class="tier-name">{{ tier.name }}</h3>
+                    <div class="tier-price">{{ tier.currency || wall.currency }} {{ Number(tier.price).toFixed(2) }}</div>
+                    <p class="tier-pixels">{{ tier.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</p>
+                    <p v-if="tier.description" class="tier-desc">{{ tier.description }}</p>
+                    <div v-if="tier.max_quantity" class="tier-stock">
+                        {{ tier.sold_count }}/{{ tier.max_quantity }} {{ $t('tv.dashboard.indie_wall.sold') }}
+                    </div>
+                </button>
+            </div>
+        </section>
+
+        <!-- ── Canvas ─────────────────────────────────────────────────────── -->
+        <section class="section canvas-section">
+            <div class="canvas-header">
+                <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.mural_grid') }}</h2>
+                <span class="canvas-hint">{{ $t('tv.dashboard.indie_wall.mural_click_hint') }}</span>
+            </div>
+
+            <MuralCanvas
+                :wall="wall"
+                :supporters="supporters"
+                :selection="null"
+                :interactive="true"
+                :height="560"
+                @tap-empty="onCanvasTapEmpty"
+                @tap-supporter="onCanvasTapSupporter"
+                @hover-supporter="onHoverSupporter"
+            />
+
+            <div class="canvas-legend">
+                <span class="legend-dot occupied" /> {{ $t('tv.dashboard.indie_wall.mural_legend_taken') }}
+                <span class="legend-dot empty" /> {{ $t('tv.dashboard.indie_wall.mural_legend_free') }}
+            </div>
+        </section>
+
+        <!-- ── Supporters ─────────────────────────────────────────────────── -->
+        <section v-if="supporters.length" class="section">
+            <h2 class="section-title">{{ $t('tv.dashboard.indie_wall.recent_supporters') }}</h2>
+            <div class="supporters-grid">
+                <div v-for="s in supporters.slice(0, 24)" :key="s.id" class="supp-card" @click="detailPixel = s">
+                    <div class="supp-pixel">
+                        <img v-if="s.image_url" :src="s.image_url" class="supp-pixel-img" alt="" />
+                        <div v-else class="supp-pixel-swatch" :style="{ background: s.background_color || '#272930' }" />
+                    </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="" />
+                            <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>
+                            </div>
+                            <span class="supp-amount">{{ wall.currency }} {{ Number(s.amount_paid || 0).toFixed(2) }}</span>
+                        </div>
+                        <p v-if="s.message || s.supporter_message" class="supp-msg">"{{ s.message || s.supporter_message }}"</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- ── Leaderboard ────────────────────────────────────────────────────── -->
+        <section v-if="supporters.length" class="section">
+            <IndieWallLeaderboard :supporters="supporters" />
+        </section>
+
+    </div>
+
+    <!-- ── Overlays ────────────────────────────────────────────────────────── -->
+    <Teleport to="body">
+        <Transition name="fade">
+            <div v-if="showProcessing" class="processing-overlay">
+                <div class="processing-box">
+                    <div class="processing-spinner" />
+                    <h3>{{ processingTimedOut
+                        ? $t('tv.dashboard.indie_wall.processing_timeout_title')
+                        : $t('tv.dashboard.indie_wall.processing_title') }}</h3>
+                    <p>{{ processingTimedOut
+                        ? $t('tv.dashboard.indie_wall.processing_timeout_desc')
+                        : $t('tv.dashboard.indie_wall.processing_desc') }}</p>
+                    <button v-if="processingTimedOut" type="button" class="processing-close" @click="showProcessing = false">
+                        {{ $t('tv.dashboard.indie_wall.processing_close') }}
+                    </button>
+                </div>
+            </div>
+        </Transition>
+
+        <Transition name="fade">
+            <div v-if="showGuestCta" class="guest-cta-overlay" @click.self="showGuestCta = false">
+                <div class="guest-cta-box">
+                    <button class="guest-cta-dismiss" type="button" @click="showGuestCta = false">×</button>
+                    <h3 class="guest-cta-title">{{ $t('tv.dashboard.indie_wall.cta_create_title') }}</h3>
+                    <p class="guest-cta-desc">{{ $t('tv.dashboard.indie_wall.cta_create_desc') }}</p>
+                    <a :href="`/${$i18n.locale}/register`" class="guest-cta-btn">
+                        {{ $t('tv.dashboard.indie_wall.cta_create_btn') }}
+                    </a>
+                    <button class="guest-cta-skip" type="button" @click="showGuestCta = false">
+                        {{ $t('tv.dashboard.indie_wall.cta_create_skip') }}
+                    </button>
+                </div>
+            </div>
+        </Transition>
+
+        <Transition name="fade">
+            <SupportStepper
+                v-if="showStepper && wall"
+                :wall="wall"
+                :goals="goals"
+                :tiers="tiersData"
+                :supporters="supporters"
+                :mgc-balance="mgcBalance"
+                :start-step="stepperStartStep"
+                :initial-goal-id="stepperInitialGoalId"
+                :initial-tier-id="stepperInitialTierId"
+                :initial-selection="stepperInitialSelection"
+                @close="onStepperClose"
+                @support-success="onStepperSuccess"
+            />
+        </Transition>
+
+        <Transition name="fade">
+            <div
+                v-if="hoverTip"
+                class="hover-tip"
+                :style="{ left: (hoverTip.x + 16) + 'px', top: (hoverTip.y + 16) + 'px' }"
+            >
+                <div
+                    class="hover-tip-image"
+                    :style="{ background: hoverTip.supporter.background_color || '#272930' }"
+                >
+                    <img v-if="hoverTip.supporter.image_url" :src="hoverTip.supporter.image_url" alt="" />
+                    <span v-else class="hover-tip-initial">{{ (supporterDisplayName(hoverTip.supporter) || '?')[0].toUpperCase() }}</span>
+                </div>
+                <div class="hover-tip-body">
+                    <p class="hover-tip-name">{{ supporterDisplayName(hoverTip.supporter) }}</p>
+                    <p v-if="hoverTip.supporter.supporter_message" class="hover-tip-msg">"{{ hoverTip.supporter.supporter_message }}"</p>
+                    <div class="hover-tip-badges">
+                        <span class="hover-tip-amount">{{ wall.currency }} {{ Number(hoverTip.supporter.amount_paid || 0).toFixed(2) }}</span>
+                        <span class="hover-tip-pixels">{{ hoverTip.supporter.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+
+        <Transition name="fade">
+            <div v-if="detailPixel" class="detail-overlay" @click.self="detailPixel = null">
+                <div class="detail-box">
+                    <button class="overlay-close" type="button" @click="detailPixel = null">×</button>
+                    <div
+                        class="detail-hero"
+                        :style="{ background: detailPixel.background_color || '#272930' }"
+                    >
+                        <img v-if="detailPixel.image_url" :src="detailPixel.image_url" alt="" />
+                        <span v-else class="detail-initial">{{ (supporterDisplayName(detailPixel) || '?')[0].toUpperCase() }}</span>
+                    </div>
+                    <div class="detail-body">
+                        <p class="detail-name">{{ supporterDisplayName(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>
+                            <span class="detail-amount-value">
+                                <span v-if="wall">{{ wall.currency }}</span> {{ Number(detailPixel.amount_paid).toFixed(2) }}
+                            </span>
+                        </div>
+                        <div class="detail-chips">
+                            <span class="detail-chip">{{ detailPixel.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+                            <span class="detail-chip">{{ $t('tv.dashboard.indie_wall.mural_position') }} ({{ detailPixel.x }}, {{ detailPixel.y }})</span>
+                        </div>
+                        <a v-if="detailPixel.link" :href="detailPixel.link" target="_blank" rel="noopener" class="detail-link">
+                            {{ detailPixel.link }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.mural-loading {
+    display: flex; align-items: center; justify-content: center; min-height: 60vh;
+}
+.mural-spinner {
+    width: 32px; height: 32px;
+    border: 2px solid rgba(255,255,255,0.1);
+    border-top-color: var(--chip-text, #D297FF);
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.mural-not-found { text-align: center; padding: 80px 20px; color: var(--secondary-info-fg, #888); }
+
+.mural-page {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+}
+
+// ── Hero ──────────────────────────────────────────────────────────────────
+.hero {
+    position: relative; min-height: 360px;
+    background: #13161C; background-size: cover; background-position: center;
+    margin-bottom: 40px;
+}
+.hero-overlay {
+    background: linear-gradient(to top, rgba(13,15,19,0.97) 60%, rgba(13,15,19,0.55));
+    padding: 48px 32px 40px;
+    min-height: 360px;
+    display: flex; flex-direction: column; align-items: center; text-align: center;
+    justify-content: flex-end;
+}
+.hero-logo {
+    width: 80px; height: 80px; object-fit: cover;
+    margin-bottom: 16px; border: 2px solid rgba(255,255,255,0.1);
+}
+.hero-title { font-size: 2rem; font-weight: 800; color: var(--title-fg, #fff); margin: 0 0 12px; letter-spacing: -0.5px; }
+.hero-desc { color: rgba(255,255,255,0.65); font-size: 1rem; max-width: 600px; line-height: 1.6; margin: 0 0 24px; }
+.hero-stats { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; }
+.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.hero-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--chip-text, #D297FF); }
+.hero-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; }
+.hero-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.1); }
+.hero-progress-wrap { width: 100%; max-width: 480px; height: 4px; background: rgba(255,255,255,0.08); margin-bottom: 24px; overflow: hidden; }
+.hero-progress-bar { height: 100%; background: var(--chip-text, #D297FF); transition: width 0.6s ease; min-width: 3px; }
+.hero-cta {
+    background: var(--chip-text, #D297FF); color: #13161C;
+    border: none; padding: 14px 36px; font-size: 0.95rem;
+    font-weight: 700; cursor: pointer; letter-spacing: 0.3px;
+    transition: opacity 0.2s;
+    &:hover { opacity: 0.88; }
+}
+
+// ── Sections ──────────────────────────────────────────────────────────────
+.section { padding: 0 16px; margin-bottom: 48px; }
+.section-title { font-size: 1.1rem; font-weight: 700; color: var(--title-fg, #fff); margin: 0 0 16px; }
+
+.about-section .about-body p {
+    color: var(--secondary-info-fg, #aaa);
+    font-size: 0.92rem; line-height: 1.6;
+    margin: 0 0 12px;
+}
+
+.cards-row {
+    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
+    scroll-snap-type: x mandatory;
+    &::-webkit-scrollbar { height: 6px; }
+    &::-webkit-scrollbar-thumb { background: #272930; }
+}
+
+// ── Goal cards ────────────────────────────────────────────────────────────
+.goals-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+    gap: 16px;
+    @media (max-width: 720px) { grid-template-columns: 1fr; }
+}
+
+.goal-card {
+    background: #191B20;
+    border: 1px solid #1e2028;
+    padding: 24px;
+    display: flex; flex-direction: column;
+    gap: 16px;
+
+    &.reached { border-color: rgba(76,175,80,0.25); }
+}
+.goal-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
+.goal-title {
+    margin: 0;
+    font-size: 1.05rem; font-weight: 700;
+    color: var(--title-fg, #fff); line-height: 1.3;
+    flex: 1; min-width: 0;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    overflow: hidden; word-break: break-word;
+}
+.goal-head-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
+.goal-amount { font-size: 0.9rem; font-weight: 700; color: var(--chip-text, #D297FF); white-space: nowrap; }
+.badge-reached { background: rgba(76,175,80,0.12); color: #4caf50; font-size: 0.72rem; font-weight: 600; padding: 3px 8px; }
+
+.goal-attrs {
+    list-style: none; padding: 0; margin: 0;
+    display: flex; flex-direction: column; gap: 8px;
+
+    li {
+        position: relative; padding-left: 14px;
+        font-size: 0.88rem; color: var(--title-fg, #fff); line-height: 1.45;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 9px; left: 0;
+            width: 6px; height: 6px;
+            background: var(--chip-text, #D297FF);
+        }
+    }
+}
+.goal-attr-label { font-weight: 700; color: var(--title-fg, #fff); margin-right: 4px; }
+.goal-attr-val { color: var(--secondary-info-fg, #aaa); }
+
+.goal-progress-wrap { margin-top: 4px; }
+.goal-progress-bar {
+    position: relative;
+    height: 30px;
+    background: #1e2028;
+    border: 1px solid #272930;
+    overflow: hidden;
+}
+.goal-progress-fill {
+    height: 100%;
+    background: var(--chip-text, #D297FF);
+    opacity: 0.5;
+    transition: width 0.4s ease;
+    min-width: 2px;
+}
+.goal-progress-text {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.78rem; color: var(--title-fg, #fff);
+    text-align: center; padding: 0 8px;
+}
+
+.goal-cta {
+    background: var(--chip-text, #D297FF);
+    color: #13161C;
+    border: none; padding: 12px 16px;
+    font-size: 0.88rem; font-weight: 600;
+    cursor: pointer; transition: opacity 0.15s;
+    width: 100%;
+
+    &:hover:not(:disabled) { opacity: 0.88; }
+    &:disabled { opacity: 0.5; cursor: not-allowed; background: #4caf50; color: #fff; }
+}
+
+// ── Tier cards ────────────────────────────────────────────────────────────
+.tier-card {
+    flex: 0 0 220px; scroll-snap-align: start;
+    background: #191B20; border: 1px solid #1e2028;
+    padding: 20px; text-align: center;
+    cursor: pointer; color: inherit; font-family: inherit;
+    display: flex; flex-direction: column; gap: 6px;
+    transition: border-color 0.15s, background 0.15s, transform 0.15s;
+    position: relative;
+
+    &::after {
+        content: '→';
+        position: absolute;
+        right: 12px; bottom: 10px;
+        color: var(--chip-text, #D297FF);
+        opacity: 0; transition: opacity 0.15s, transform 0.15s;
+        font-size: 1.1rem;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--chip-text, #D297FF); background: #1e2028;
+        transform: translateY(-2px);
+        &::after { opacity: 1; transform: translateX(2px); }
+    }
+    &:disabled { opacity: 0.45; cursor: not-allowed; }
+}
+.tier-img { width: 100%; height: 100px; object-fit: cover; }
+.tier-name {
+    font-size: 0.92rem; font-weight: 600; color: var(--title-fg, #fff); margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    overflow: hidden; word-break: break-word;
+}
+.tier-price { font-size: 1.15rem; font-weight: 700; color: var(--chip-text, #D297FF); }
+.tier-pixels { color: var(--secondary-info-fg, #888); font-size: 0.75rem; margin: 0; }
+.tier-desc { color: var(--secondary-info-fg, #888); font-size: 0.8rem; margin: 0; }
+.tier-stock { color: var(--secondary-info-fg, #888); font-size: 0.7rem; }
+
+// ── Canvas section ────────────────────────────────────────────────────────
+.canvas-section { }
+.canvas-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.canvas-hint { color: var(--secondary-info-fg, #555); font-size: 0.72rem; }
+.canvas-legend {
+    display: flex; align-items: center; gap: 16px; margin-top: 6px;
+    font-size: 0.72rem; color: var(--secondary-info-fg, #555);
+}
+.legend-dot {
+    display: inline-block; width: 10px; height: 10px; margin-right: 4px; flex-shrink: 0;
+    &.occupied { background: #6b15ac; }
+    &.empty { background: #1e2028; border: 1px solid #333; }
+}
+
+// ── Supporters ────────────────────────────────────────────────────────────
+.supporters-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 8px;
+}
+.supp-card {
+    background: #191B20; border: 1px solid #1e2028;
+    overflow: hidden; cursor: pointer;
+    display: flex; flex-direction: column;
+    transition: border-color 0.15s;
+    &:hover { border-color: var(--chip-text, #D297FF); }
+}
+.supp-pixel {
+    width: 100%; aspect-ratio: 1; overflow: hidden; background: #0d0f13; flex-shrink: 0;
+}
+.supp-pixel-img {
+    width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated;
+}
+.supp-pixel-swatch { width: 100%; height: 100%; }
+.supp-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
+.supp-identity { display: flex; align-items: center; gap: 6px; }
+.supp-avi {
+    width: 22px; height: 22px; flex-shrink: 0;
+    object-fit: cover; border: 1px solid #272930;
+}
+.supp-avi-init {
+    width: 22px; height: 22px; flex-shrink: 0;
+    background: #272930; color: var(--secondary-info-fg, #aaa);
+    font-size: 0.6rem; font-weight: 700;
+    display: flex; align-items: center; justify-content: center;
+}
+.supp-user-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+.supp-name {
+    color: var(--title-fg, #fff); font-size: 0.78rem; font-weight: 500;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.supp-email {
+    color: var(--secondary-info-fg, #666); font-size: 0.65rem;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.supp-amount {
+    color: var(--chip-text, #D297FF); font-size: 0.75rem; font-weight: 700;
+    white-space: nowrap; flex-shrink: 0; margin-left: auto;
+}
+.supp-msg {
+    color: var(--secondary-info-fg, #666); font-size: 0.68rem; font-style: italic;
+    line-height: 1.35; margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+// ── Detail overlay ────────────────────────────────────────────────────────
+.detail-overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 300; padding: 16px;
+}
+.detail-box {
+    background: #13141A; border: 1px solid rgba(107,21,172,0.35);
+    width: 100%; max-width: 360px; position: relative; overflow: hidden;
+    box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(107,21,172,0.1);
+}
+.overlay-close {
+    position: absolute; top: 10px; right: 10px; z-index: 2;
+    background: rgba(0,0,0,0.5); border: none; color: #fff;
+    width: 28px; height: 28px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; font-size: 1.1rem; line-height: 1; backdrop-filter: blur(4px);
+    &:hover { background: rgba(0,0,0,0.75); }
+}
+.detail-hero {
+    width: 100%; height: 180px; overflow: hidden;
+    display: flex; align-items: center; justify-content: center;
+    background: #0d0f13;
+    img { max-width: 100%; max-height: 100%; object-fit: contain; }
+}
+.detail-initial {
+    font-size: 4rem; font-weight: 700; color: rgba(255,255,255,0.5); line-height: 1;
+}
+.detail-body { padding: 20px; }
+.detail-name {
+    font-size: 1.1rem; font-weight: 700; color: var(--title-fg, #fff); margin: 0 0 8px;
+}
+.detail-msg {
+    color: var(--secondary-info-fg, #aaa); font-size: 0.875rem; font-style: italic;
+    line-height: 1.5; margin: 0 0 16px;
+}
+.detail-amount-row {
+    display: flex; align-items: center; justify-content: space-between;
+    background: rgba(107,21,172,0.12); border: 1px solid rgba(107,21,172,0.25);
+    padding: 10px 14px; margin-bottom: 12px;
+}
+.detail-amount-label {
+    font-size: 12px; color: var(--secondary-info-fg, #aaa);
+    text-transform: uppercase; letter-spacing: 0.04em;
+}
+.detail-amount-value {
+    font-weight: 700; font-size: 1.1rem; color: var(--chip-text, #D297FF);
+}
+.detail-chips {
+    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
+}
+.detail-chip {
+    font-size: 11px; color: var(--secondary-info-fg, #aaa);
+    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
+    padding: 3px 8px;
+}
+.detail-link {
+    display: flex; align-items: center; gap: 6px;
+    color: var(--chip-text, #D297FF); font-size: 0.75rem; word-break: break-all;
+    text-decoration: none; margin-top: 4px;
+    &:hover { text-decoration: underline; }
+}
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.18s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+.processing-overlay {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,0.78);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 350; padding: 16px;
+}
+.processing-box {
+    background: #191B20; border: 1px solid #272930;
+    padding: 32px 28px; max-width: 380px; width: 100%;
+    text-align: center;
+    display: flex; flex-direction: column; align-items: center; gap: 12px;
+    h3 { color: var(--title-fg, #fff); font-size: 1.05rem; margin: 0; font-weight: 700; }
+    p { color: var(--secondary-info-fg, #aaa); font-size: 0.85rem; margin: 0; line-height: 1.5; }
+}
+.processing-spinner {
+    width: 36px; height: 36px;
+    border: 3px solid rgba(255,255,255,0.1);
+    border-top-color: var(--chip-text, #D297FF);
+    animation: spin 0.8s linear infinite;
+}
+.processing-close {
+    margin-top: 6px;
+    background: var(--chip-text, #D297FF); color: #13161C;
+    border: none; padding: 8px 18px; font-weight: 600; font-size: 0.85rem;
+    cursor: pointer;
+    &:hover { opacity: 0.88; }
+}
+
+.guest-cta-overlay {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,0.72);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 400; padding: 16px;
+}
+.guest-cta-box {
+    background: #191B20; border: 1px solid #272930;
+    padding: 32px 28px; width: 100%; max-width: 420px;
+    display: flex; flex-direction: column; align-items: center;
+    gap: 14px; text-align: center; position: relative;
+}
+.guest-cta-dismiss {
+    position: absolute; top: 10px; right: 10px;
+    background: #272930; border: none; color: var(--title-fg, #fff);
+    width: 28px; height: 28px; display: flex; align-items: center;
+    justify-content: center; cursor: pointer; font-size: 1.1rem;
+}
+.guest-cta-title {
+    margin: 0; font-size: 1.15rem; font-weight: 700;
+    color: var(--title-fg, #fff);
+}
+.guest-cta-desc {
+    margin: 0; font-size: 0.85rem;
+    color: var(--secondary-info-fg, #aaa); line-height: 1.5;
+}
+.guest-cta-btn {
+    display: inline-block;
+    background: var(--chip-text, #D297FF); color: #13161C;
+    font-weight: 700; font-size: 0.9rem; padding: 12px 24px;
+    text-decoration: none;
+    &:hover { opacity: 0.88; }
+}
+.guest-cta-skip {
+    background: none; border: none;
+    color: var(--secondary-info-fg, #888); font-size: 0.78rem;
+    cursor: pointer; padding: 0;
+    &:hover { color: var(--title-fg, #fff); }
+}
+
+.hover-tip {
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none;
+    background: #13141A;
+    border: 1px solid rgba(107,21,172,0.35);
+    width: 220px;
+    overflow: hidden;
+    box-shadow: 0 8px 28px rgba(0,0,0,0.7), 0 0 0 1px rgba(107,21,172,0.1);
+}
+.hover-tip-image {
+    width: 100%; height: 110px; overflow: hidden;
+    display: flex; align-items: center; justify-content: center;
+    background: #0d0f13;
+    img { max-width: 100%; max-height: 100%; object-fit: contain; }
+}
+.hover-tip-initial {
+    font-size: 2.5rem; font-weight: 700; color: rgba(255,255,255,0.6); line-height: 1;
+}
+.hover-tip-body {
+    padding: 10px 12px 12px;
+    display: flex; flex-direction: column; gap: 4px;
+}
+.hover-tip-name {
+    font-size: 13px; font-weight: 700;
+    color: var(--title-fg, #fff); margin: 0;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.hover-tip-msg {
+    font-size: 11px;
+    color: var(--secondary-info-fg, #aaa); font-style: italic; margin: 0;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.hover-tip-badges {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-top: 6px; gap: 6px;
+}
+.hover-tip-amount {
+    font-size: 13px; font-weight: 700; color: var(--chip-text, #D297FF);
+}
+.hover-tip-pixels {
+    font-size: 11px;
+    color: var(--secondary-info-fg, #aaa);
+    background: rgba(255,255,255,0.06); padding: 2px 6px;
+}
+
+@media (max-width: 640px) {
+    .hero-title { font-size: 1.5rem; }
+    .hero-stats { gap: 12px; }
+    .hero-stat-value { font-size: 1.1rem; }
+    .hero-stat-divider { display: none; }
+    .canvas-hint { display: none; }
+    .supporters-grid { grid-template-columns: repeat(2, 1fr); }
+}
+</style>