259 lines
12 KiB
JavaScript
259 lines
12 KiB
JavaScript
import React, { useEffect, useRef } from 'react'
|
|
import UploadWorldHighlightCard from './UploadWorldHighlightCard'
|
|
import WorldCampaignMeta from './WorldCampaignMeta'
|
|
import WorldStatusBadge from './WorldStatusBadge'
|
|
import { trackWorldAnalytics, trackWorldSourceImpression } from '../../lib/worldAnalytics'
|
|
|
|
function modeTone(mode) {
|
|
switch (mode) {
|
|
case 'manual_approval':
|
|
return 'border-sky-300/30 bg-sky-400/10 text-sky-100'
|
|
case 'auto_add':
|
|
return 'border-emerald-300/30 bg-emerald-400/10 text-emerald-100'
|
|
default:
|
|
return 'border-white/10 bg-white/[0.04] text-slate-300'
|
|
}
|
|
}
|
|
|
|
function dateBadgeLabel(item) {
|
|
const timeframe = String(item?.timeframe_label || '').trim()
|
|
const submissionWindow = String(item?.submission_window_label || '').trim()
|
|
|
|
if (timeframe && submissionWindow) {
|
|
return timeframe === submissionWindow ? timeframe : `${submissionWindow} • ${timeframe}`
|
|
}
|
|
|
|
return submissionWindow || timeframe || ''
|
|
}
|
|
|
|
export default function WorldSubmissionSelector({
|
|
title = 'Add to Worlds',
|
|
description = 'Attach this artwork to active worlds while keeping community participation separate from curated editorial relations.',
|
|
options = [],
|
|
emptyMessage = 'No worlds are currently open for creator participation.',
|
|
onToggle,
|
|
onNoteChange,
|
|
className = '',
|
|
analyticsContext = null,
|
|
}) {
|
|
const items = Array.isArray(options) ? options : []
|
|
const highlightedWorld = items.find((item) => item.is_active_campaign && item.is_accepting_submissions)
|
|
const itemRefs = useRef(new Map())
|
|
|
|
useEffect(() => {
|
|
if (!analyticsContext?.sourceSurface || typeof window === 'undefined') {
|
|
return undefined
|
|
}
|
|
|
|
const refs = Array.from(itemRefs.current.entries())
|
|
if (refs.length === 0) {
|
|
return undefined
|
|
}
|
|
|
|
if (typeof window.IntersectionObserver !== 'function') {
|
|
refs.forEach(([worldId]) => {
|
|
const item = items.find((candidate) => Number(candidate.id) === Number(worldId))
|
|
if (!item) {
|
|
return
|
|
}
|
|
|
|
trackWorldSourceImpression({
|
|
worldId: item.id,
|
|
worldTitle: item.title || item.teaser_title || '',
|
|
sourceSurface: analyticsContext.sourceSurface,
|
|
sourceDetail: analyticsContext.sourceDetail ? `${analyticsContext.sourceDetail}:selector` : 'selector',
|
|
sectionKey: 'community_submissions',
|
|
})
|
|
})
|
|
|
|
return undefined
|
|
}
|
|
|
|
const observer = new window.IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting || entry.intersectionRatio < 0.35) {
|
|
return
|
|
}
|
|
|
|
const worldId = Number(entry.target.getAttribute('data-world-id') || 0)
|
|
const item = items.find((candidate) => Number(candidate.id) === worldId)
|
|
if (!item) {
|
|
return
|
|
}
|
|
|
|
trackWorldSourceImpression({
|
|
worldId: item.id,
|
|
worldTitle: item.title || item.teaser_title || '',
|
|
sourceSurface: analyticsContext.sourceSurface,
|
|
sourceDetail: analyticsContext.sourceDetail ? `${analyticsContext.sourceDetail}:selector` : 'selector',
|
|
sectionKey: 'community_submissions',
|
|
})
|
|
observer.unobserve(entry.target)
|
|
})
|
|
}, { threshold: [0.35] })
|
|
|
|
refs.forEach(([, node]) => {
|
|
if (node) {
|
|
observer.observe(node)
|
|
}
|
|
})
|
|
|
|
return () => observer.disconnect()
|
|
}, [analyticsContext?.sourceDetail, analyticsContext?.sourceSurface, items])
|
|
|
|
return (
|
|
<section className={`rounded-[28px] border border-white/10 bg-white/[0.03] p-5 ${className}`.trim()}>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-white">{title}</h2>
|
|
<p className="mt-1 max-w-3xl text-sm leading-6 text-slate-400">{description}</p>
|
|
</div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">{items.filter((item) => item.selected).length} selected</div>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<UploadWorldHighlightCard
|
|
world={highlightedWorld}
|
|
sourceSurface={analyticsContext?.sourceSurface || ''}
|
|
sourceDetail={analyticsContext?.sourceDetail ? `${analyticsContext.sourceDetail}:highlight` : 'highlight'}
|
|
/>
|
|
</div>
|
|
|
|
{items.length === 0 ? (
|
|
<div className="mt-5 rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-5 text-sm text-slate-400">{emptyMessage}</div>
|
|
) : (
|
|
<div className="mt-5 grid gap-3">
|
|
{items.map((item) => {
|
|
const checked = Boolean(item.selected)
|
|
const locked = Boolean(item.selection_locked)
|
|
const combinedDateLabel = dateBadgeLabel(item)
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
ref={(node) => {
|
|
if (node) {
|
|
itemRefs.current.set(item.id, node)
|
|
} else {
|
|
itemRefs.current.delete(item.id)
|
|
}
|
|
}}
|
|
data-world-id={item.id}
|
|
className={`overflow-hidden rounded-[24px] border transition-colors ${checked ? 'border-sky-300/25 bg-sky-400/[0.07]' : 'border-white/10 bg-black/20'}`}
|
|
>
|
|
{/* ── Compact row (always visible) ── */}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (locked) {
|
|
return
|
|
}
|
|
|
|
if (!checked && analyticsContext?.sourceSurface) {
|
|
trackWorldAnalytics('world_submission_started', {
|
|
world_id: item.id,
|
|
source_surface: analyticsContext.sourceSurface,
|
|
source_detail: analyticsContext.sourceDetail || '',
|
|
section_key: 'community_submissions',
|
|
entity_type: 'world',
|
|
entity_id: item.id,
|
|
entity_title: item.title || '',
|
|
})
|
|
}
|
|
|
|
onToggle?.(item.id)
|
|
}}
|
|
disabled={locked}
|
|
className="flex w-full items-center gap-4 p-4 text-left disabled:cursor-not-allowed"
|
|
>
|
|
{/* Thumbnail */}
|
|
<div className="h-12 w-12 shrink-0 overflow-hidden rounded-2xl border border-white/10 bg-slate-950/80">
|
|
{item.cover_url ? (
|
|
<img src={item.cover_url} alt="" className="h-full w-full object-cover" />
|
|
) : (
|
|
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_48%),linear-gradient(135deg,_rgba(15,23,42,0.96),_rgba(2,6,23,0.96))] text-slate-500">
|
|
<i className="fa-solid fa-globe text-sm" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Title + badges */}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
{(Array.isArray(item.status_badges) ? item.status_badges : []).map((badge) => <WorldStatusBadge key={`${item.id}-${badge.label}`} badge={badge} />)}
|
|
{item.participation_mode_label ? <span className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] ${modeTone(item.participation_mode)}`}>{item.participation_mode_label}</span> : null}
|
|
</div>
|
|
<div className="mt-1 truncate text-sm font-semibold text-white">{item.teaser_title || item.title}</div>
|
|
{item.tagline ? <div className="truncate text-[11px] uppercase tracking-[0.14em] text-slate-500">{item.tagline}</div> : null}
|
|
</div>
|
|
|
|
{/* Checkbox */}
|
|
<span className={`inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs ${checked ? 'border-sky-300/40 bg-sky-400/20 text-sky-100' : 'border-white/10 bg-white/[0.04] text-slate-500'}`}>
|
|
{checked ? <i className="fa-solid fa-check text-[10px]" /> : null}
|
|
</span>
|
|
</button>
|
|
|
|
{/* ── Expanded details (only when checked) ── */}
|
|
{checked ? (
|
|
<div className="border-t border-white/10 px-4 pb-4 pt-4">
|
|
{/* Full description */}
|
|
{(item.teaser_summary || item.summary) ? (
|
|
<p className="text-sm leading-6 text-slate-300">{item.teaser_summary || item.summary}</p>
|
|
) : null}
|
|
|
|
{/* Date/window chips */}
|
|
{(combinedDateLabel || item.promotion_window_label) ? (
|
|
<div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-300">
|
|
{combinedDateLabel ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">{combinedDateLabel}</span> : null}
|
|
{item.promotion_window_label ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">{item.promotion_window_label}</span> : null}
|
|
{item.can_resubmit ? <span className="rounded-full border border-amber-300/25 bg-amber-400/10 px-3 py-1 text-amber-100">Can re-add</span> : null}
|
|
</div>
|
|
) : null}
|
|
|
|
<WorldCampaignMeta world={item} className="mt-3" />
|
|
|
|
{/* Guidelines */}
|
|
{item.submission_guidelines ? (
|
|
<div className="mt-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm leading-6 text-slate-300">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">World guidelines</div>
|
|
<div className="mt-2">{item.submission_guidelines}</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Locked reason */}
|
|
{item.selection_locked_reason ? (
|
|
<div className="mt-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-400">{item.selection_locked_reason}</div>
|
|
) : null}
|
|
|
|
{/* Moderator note */}
|
|
{item.reviewer_note ? (
|
|
<div className="mt-3 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-50">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">Moderator note</div>
|
|
<div className="mt-2 leading-6">{item.reviewer_note}</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Creator note */}
|
|
{item.submission_note_enabled ? (
|
|
<label className="mt-3 grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Creator note <span className="normal-case tracking-normal text-slate-600">(optional)</span></span>
|
|
<textarea
|
|
rows={3}
|
|
value={item.note || ''}
|
|
onChange={(event) => onNoteChange?.(item.id, event.target.value)}
|
|
disabled={locked}
|
|
placeholder="Context for world moderators: fit, angle, or why this artwork belongs here."
|
|
className="nova-scrollbar rounded-[20px] border border-white/10 bg-black/20 px-4 py-3 text-white outline-none placeholder:text-slate-600 disabled:cursor-not-allowed disabled:opacity-60"
|
|
/>
|
|
</label>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
)
|
|
} |