1181 lines
58 KiB
JavaScript
1181 lines
58 KiB
JavaScript
import React from 'react'
|
|
import { Head, usePage } from '@inertiajs/react'
|
|
import Checkbox from '../../components/ui/Checkbox'
|
|
import DateTimePicker from '../../components/ui/DateTimePicker'
|
|
import NovaSelect from '../../components/ui/NovaSelect'
|
|
|
|
const FILTER_OPTIONS = [
|
|
{ value: 'all', label: 'All rows' },
|
|
{ value: 'winner', label: 'Winner' },
|
|
{ value: 'active', label: 'Active' },
|
|
{ value: 'eligible', label: 'Eligible' },
|
|
{ value: 'attention', label: 'Needs attention' },
|
|
{ value: 'ineligible', label: 'Ineligible' },
|
|
{ value: 'expired', label: 'Expired' },
|
|
{ value: 'inactive', label: 'Inactive' },
|
|
]
|
|
|
|
const SORT_OPTIONS = [
|
|
{ value: 'priority', label: 'Priority' },
|
|
{ value: 'featured_at', label: 'Featured Since' },
|
|
{ value: 'expires_at', label: 'Expires' },
|
|
{ value: 'score_30d', label: 'Medal Score (30d)' },
|
|
]
|
|
|
|
const PRIORITY_PRESETS = [60, 100, 180, 260, 340]
|
|
const PAGE_SIZE = 24
|
|
|
|
function cn(...values) {
|
|
return values.filter(Boolean).join(' ')
|
|
}
|
|
|
|
function getCsrfToken() {
|
|
if (typeof document === 'undefined') return ''
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
|
|
async function requestJson(url, { method = 'POST', body } = {}) {
|
|
const response = await fetch(url, {
|
|
method,
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': getCsrfToken(),
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
body: body ? JSON.stringify(body) : undefined,
|
|
})
|
|
|
|
const payload = await response.json().catch(() => ({}))
|
|
if (!response.ok) {
|
|
throw new Error(payload?.message || payload?.errors?.artwork_id?.[0] || payload?.errors?.is_active?.[0] || payload?.errors?.force_hero?.[0] || 'Request failed.')
|
|
}
|
|
|
|
return payload
|
|
}
|
|
|
|
function isoToLocalInput(value) {
|
|
if (!value) return ''
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return ''
|
|
|
|
const local = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
|
|
return local.toISOString().slice(0, 16)
|
|
}
|
|
|
|
function localInputToIso(value) {
|
|
if (!value) return null
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return null
|
|
|
|
return date.toISOString()
|
|
}
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) return '—'
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return '—'
|
|
|
|
return new Intl.DateTimeFormat('en', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
}).format(date)
|
|
}
|
|
|
|
function formatShortDate(value) {
|
|
if (!value) return 'No expiry'
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return 'No expiry'
|
|
|
|
return new Intl.DateTimeFormat('en', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
}).format(date)
|
|
}
|
|
|
|
function formatRelativeExpiry(value) {
|
|
if (!value) return 'No expiry'
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return 'No expiry'
|
|
|
|
const now = new Date()
|
|
const diffInDays = Math.ceil((date.getTime() - now.getTime()) / 86400000)
|
|
|
|
if (diffInDays < 0) return `${Math.abs(diffInDays)}d overdue`
|
|
if (diffInDays === 0) return 'Due today'
|
|
if (diffInDays === 1) return 'Due tomorrow'
|
|
return `${diffInDays}d left`
|
|
}
|
|
|
|
function formatOwner(entry) {
|
|
if (!entry?.artwork?.owner) return 'Unknown artist'
|
|
if (entry.artwork.owner.type === 'group') return `${entry.artwork.owner.display_name || 'Unknown'} · Group publisher`
|
|
return `${entry.artwork.owner.display_name || 'Unknown'} · @${entry.artwork.owner.username || ''}`
|
|
}
|
|
|
|
function compareWinnerOrder(left, right) {
|
|
if (Boolean(left?.is_force_hero) !== Boolean(right?.is_force_hero)) {
|
|
return Boolean(right?.is_force_hero) - Boolean(left?.is_force_hero)
|
|
}
|
|
|
|
const priorityDiff = Number(right?.priority || 0) - Number(left?.priority || 0)
|
|
if (priorityDiff !== 0) return priorityDiff
|
|
|
|
const scoreDiff = Number(right?.medals?.score_30d || 0) - Number(left?.medals?.score_30d || 0)
|
|
if (scoreDiff !== 0) return scoreDiff
|
|
|
|
const featuredDiff = (new Date(right?.featured_at || 0).getTime() || 0) - (new Date(left?.featured_at || 0).getTime() || 0)
|
|
if (featuredDiff !== 0) return featuredDiff
|
|
|
|
const publishedDiff = (new Date(right?.artwork?.published_at || 0).getTime() || 0) - (new Date(left?.artwork?.published_at || 0).getTime() || 0)
|
|
if (publishedDiff !== 0) return publishedDiff
|
|
|
|
return Number(right?.id || 0) - Number(left?.id || 0)
|
|
}
|
|
|
|
function compareEntries(left, right, sortKey, direction) {
|
|
const dir = direction === 'asc' ? 1 : -1
|
|
|
|
const value = (entry) => {
|
|
switch (sortKey) {
|
|
case 'featured_at':
|
|
return new Date(entry.featured_at || 0).getTime() || 0
|
|
case 'expires_at':
|
|
return new Date(entry.expires_at || 0).getTime() || 0
|
|
case 'score_30d':
|
|
return Number(entry.medals?.score_30d || 0)
|
|
default:
|
|
return Number(entry.priority || 0)
|
|
}
|
|
}
|
|
|
|
const leftValue = value(left)
|
|
const rightValue = value(right)
|
|
if (leftValue !== rightValue) {
|
|
return (leftValue > rightValue ? 1 : -1) * dir
|
|
}
|
|
|
|
return compareWinnerOrder(left, right)
|
|
}
|
|
|
|
function buildEntrySummary(entry) {
|
|
if (entry?.is_force_hero) {
|
|
return 'Force Hero is enabled, so this row overrides the normal homepage winner order until editors switch it off.'
|
|
}
|
|
|
|
if (entry?.is_winner && entry?.winner_reason) {
|
|
return entry.winner_reason
|
|
}
|
|
|
|
if (!entry?.is_active) {
|
|
return 'Inactive rows stay visible for planning and editing, but they cannot win the homepage slot.'
|
|
}
|
|
|
|
if (entry?.is_expired) {
|
|
return 'This featured slot has expired and is excluded from the live homepage rotation.'
|
|
}
|
|
|
|
if (!entry?.eligibility?.is_eligible) {
|
|
const reasons = Array.isArray(entry?.eligibility?.reasons) && entry.eligibility.reasons.length > 0
|
|
? entry.eligibility.reasons.join(', ')
|
|
: 'Eligibility checks failed.'
|
|
|
|
return `Currently blocked from winning: ${reasons}`
|
|
}
|
|
|
|
return 'Eligible and in the active selection pool. Priority leads first, then medal score, featured time, and publish date.'
|
|
}
|
|
|
|
function Badge({ label, tone = 'slate' }) {
|
|
const toneClasses = {
|
|
slate: 'border-white/10 bg-white/[0.07] text-slate-100',
|
|
sky: 'border-sky-300/20 bg-sky-400/15 text-sky-100',
|
|
emerald: 'border-emerald-300/20 bg-emerald-400/15 text-emerald-100',
|
|
amber: 'border-amber-300/20 bg-amber-400/15 text-amber-100',
|
|
rose: 'border-rose-300/20 bg-rose-400/15 text-rose-100',
|
|
}
|
|
|
|
return (
|
|
<span className={cn('inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]', toneClasses[tone] || toneClasses.slate)}>
|
|
{label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function Field({ label, help, children }) {
|
|
return (
|
|
<label className="block space-y-2">
|
|
<span className="text-sm font-semibold text-white">{label}</span>
|
|
{children}
|
|
{help ? <span className="block text-xs leading-relaxed text-slate-400">{help}</span> : null}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function NoticeBanner({ notice }) {
|
|
if (!notice?.message) return null
|
|
|
|
const toneClasses = {
|
|
success: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-50',
|
|
error: 'border-rose-300/20 bg-rose-400/10 text-rose-50',
|
|
info: 'border-sky-300/20 bg-sky-400/10 text-sky-50',
|
|
}
|
|
|
|
return (
|
|
<div className={cn('rounded-[22px] border px-4 py-3 text-sm leading-6 shadow-[0_10px_30px_rgba(2,6,23,0.18)]', toneClasses[notice.tone] || toneClasses.info)}>
|
|
{notice.message}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatCard({ label, value, detail, tone = 'sky' }) {
|
|
const toneClasses = {
|
|
sky: 'border-sky-300/15 bg-sky-400/10 text-sky-100',
|
|
amber: 'border-amber-300/15 bg-amber-400/10 text-amber-100',
|
|
emerald: 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100',
|
|
rose: 'border-rose-300/15 bg-rose-400/10 text-rose-100',
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 backdrop-blur-sm">
|
|
<div className={cn('inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]', toneClasses[tone] || toneClasses.sky)}>{label}</div>
|
|
<div className="mt-4 text-3xl font-semibold tracking-[-0.05em] text-white">{value}</div>
|
|
{detail ? <div className="mt-2 text-sm leading-6 text-slate-400">{detail}</div> : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MetricTile({ label, value, hint }) {
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">{label}</div>
|
|
<div className="mt-2 text-base font-semibold text-white">{value}</div>
|
|
{hint ? <div className="mt-1 text-xs leading-5 text-slate-400">{hint}</div> : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DockButton({ label, detail, tone = 'sky', onClick }) {
|
|
const toneClasses = {
|
|
sky: 'border-sky-300/25 bg-sky-400/12 text-sky-50',
|
|
amber: 'border-amber-300/25 bg-amber-400/12 text-amber-50',
|
|
slate: 'border-white/10 bg-white/[0.05] text-slate-100',
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={cn('flex min-w-0 flex-1 flex-col rounded-[20px] border px-4 py-3 text-left shadow-[0_14px_30px_rgba(2,6,23,0.24)] backdrop-blur-sm', toneClasses[tone] || toneClasses.sky)}
|
|
>
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">{label}</span>
|
|
<span className="mt-1 truncate text-sm font-semibold">{detail}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function FilterChip({ label, value, active, onClick, count }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onClick(value)}
|
|
className={cn(
|
|
'inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] transition',
|
|
active
|
|
? 'border-sky-300/40 bg-sky-400/15 text-sky-50 shadow-[0_10px_30px_rgba(56,189,248,0.16)]'
|
|
: 'border-white/10 bg-white/[0.03] text-slate-300 hover:border-white/20 hover:bg-white/[0.06]'
|
|
)}
|
|
>
|
|
<span>{label}</span>
|
|
<span className="rounded-full bg-black/20 px-2 py-0.5 text-[10px] text-slate-200">{count}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function emptyForm() {
|
|
return {
|
|
artwork_id: '',
|
|
priority: 100,
|
|
featured_at: isoToLocalInput(new Date().toISOString()),
|
|
expires_at: '',
|
|
is_active: true,
|
|
}
|
|
}
|
|
|
|
function mapEntryToCandidate(entry) {
|
|
if (!entry) return null
|
|
|
|
return {
|
|
...entry.artwork,
|
|
medals: entry.medals,
|
|
eligibility: entry.eligibility,
|
|
existing_feature_count: entry.duplicate_count,
|
|
already_featured: entry.duplicate_count > 0,
|
|
}
|
|
}
|
|
|
|
export default function FeaturedArtworksAdmin() {
|
|
const { props } = usePage()
|
|
const composerRef = React.useRef(null)
|
|
const rosterRef = React.useRef(null)
|
|
const loadMoreRef = React.useRef(null)
|
|
const endpoints = props.endpoints || {}
|
|
const capabilities = props.capabilities || {}
|
|
const seo = props.seo || {}
|
|
|
|
const [entries, setEntries] = React.useState(Array.isArray(props.entries) ? props.entries : [])
|
|
const [winner, setWinner] = React.useState(props.winner || null)
|
|
const [stats, setStats] = React.useState(props.stats || {})
|
|
const [notice, setNotice] = React.useState(null)
|
|
const [busy, setBusy] = React.useState('')
|
|
const [filter, setFilter] = React.useState('all')
|
|
const [sortKey, setSortKey] = React.useState('priority')
|
|
const [sortDirection, setSortDirection] = React.useState('desc')
|
|
const [listQuery, setListQuery] = React.useState('')
|
|
const deferredListQuery = React.useDeferredValue(listQuery)
|
|
const [searchQuery, setSearchQuery] = React.useState('')
|
|
const [searchResults, setSearchResults] = React.useState([])
|
|
const [selectedArtwork, setSelectedArtwork] = React.useState(null)
|
|
const [editingId, setEditingId] = React.useState(null)
|
|
const [form, setForm] = React.useState(emptyForm())
|
|
const [visibleCount, setVisibleCount] = React.useState(PAGE_SIZE)
|
|
|
|
React.useEffect(() => {
|
|
setEntries(Array.isArray(props.entries) ? props.entries : [])
|
|
setWinner(props.winner || null)
|
|
setStats(props.stats || {})
|
|
}, [props.entries, props.stats, props.winner])
|
|
|
|
React.useEffect(() => {
|
|
setVisibleCount(PAGE_SIZE)
|
|
}, [deferredListQuery, filter, sortDirection, sortKey])
|
|
|
|
function scrollToSection(ref) {
|
|
ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
}
|
|
|
|
function scrollToTop() {
|
|
if (typeof window !== 'undefined') {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
|
|
function syncPayload(payload) {
|
|
setEntries(Array.isArray(payload.entries) ? payload.entries : [])
|
|
setWinner(payload.winner || null)
|
|
setStats(payload.stats || {})
|
|
if (payload.message) {
|
|
setNotice({ tone: 'success', message: payload.message })
|
|
}
|
|
}
|
|
|
|
function resetEditor() {
|
|
setEditingId(null)
|
|
setSelectedArtwork(null)
|
|
setSearchResults([])
|
|
setSearchQuery('')
|
|
setForm(emptyForm())
|
|
}
|
|
|
|
async function handleArtworkSearch(event) {
|
|
event.preventDefault()
|
|
if (!searchQuery.trim()) {
|
|
setSearchResults([])
|
|
return
|
|
}
|
|
|
|
setBusy('search')
|
|
setNotice(null)
|
|
|
|
try {
|
|
const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
|
|
const payload = await requestJson(url, { method: 'GET' })
|
|
const results = Array.isArray(payload.results) ? payload.results : []
|
|
setSearchResults(results)
|
|
|
|
if (results.length === 0) {
|
|
setNotice({ tone: 'info', message: 'No artworks matched that search.' })
|
|
}
|
|
} catch (error) {
|
|
setNotice({ tone: 'error', message: error.message || 'Artwork search failed.' })
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
function chooseArtwork(artwork) {
|
|
setSelectedArtwork(artwork)
|
|
setForm((current) => ({
|
|
...current,
|
|
artwork_id: artwork.id,
|
|
}))
|
|
}
|
|
|
|
function editEntry(entry) {
|
|
setEditingId(entry.id)
|
|
setSelectedArtwork(mapEntryToCandidate(entry))
|
|
setSearchResults([])
|
|
setSearchQuery('')
|
|
setForm({
|
|
artwork_id: entry.artwork_id,
|
|
priority: entry.priority,
|
|
featured_at: isoToLocalInput(entry.featured_at),
|
|
expires_at: isoToLocalInput(entry.expires_at),
|
|
is_active: Boolean(entry.is_active),
|
|
})
|
|
|
|
scrollToSection(composerRef)
|
|
}
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault()
|
|
if (!editingId && !form.artwork_id) {
|
|
setNotice({ tone: 'error', message: 'Select an artwork first.' })
|
|
return
|
|
}
|
|
|
|
setBusy('submit')
|
|
setNotice(null)
|
|
|
|
try {
|
|
const payload = await requestJson(
|
|
editingId
|
|
? endpoints.updatePattern.replace('__FEATURE__', String(editingId))
|
|
: endpoints.store,
|
|
{
|
|
method: editingId ? 'PATCH' : 'POST',
|
|
body: {
|
|
artwork_id: Number(form.artwork_id),
|
|
priority: Number(form.priority || 0),
|
|
featured_at: localInputToIso(form.featured_at),
|
|
expires_at: localInputToIso(form.expires_at),
|
|
is_active: Boolean(form.is_active),
|
|
},
|
|
},
|
|
)
|
|
|
|
syncPayload(payload)
|
|
resetEditor()
|
|
} catch (error) {
|
|
setNotice({ tone: 'error', message: error.message || 'Failed to save this featured entry.' })
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
async function handleToggle(entry) {
|
|
setBusy(`toggle-${entry.id}`)
|
|
setNotice(null)
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
|
|
method: 'PATCH',
|
|
})
|
|
syncPayload(payload)
|
|
} catch (error) {
|
|
setNotice({ tone: 'error', message: error.message || 'Failed to change active state.' })
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
async function handleDelete(entry) {
|
|
if (typeof window !== 'undefined' && !window.confirm(`Delete featured entry #${entry.id}?`)) {
|
|
return
|
|
}
|
|
|
|
setBusy(`delete-${entry.id}`)
|
|
setNotice(null)
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.destroyPattern.replace('__FEATURE__', String(entry.id)), {
|
|
method: 'DELETE',
|
|
})
|
|
syncPayload(payload)
|
|
|
|
if (editingId === entry.id) {
|
|
resetEditor()
|
|
}
|
|
} catch (error) {
|
|
setNotice({ tone: 'error', message: error.message || 'Failed to delete this featured entry.' })
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
async function handleForceHero(entry) {
|
|
setBusy(`force-${entry.id}`)
|
|
setNotice(null)
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.forceHeroPattern.replace('__FEATURE__', String(entry.id)), {
|
|
method: 'PATCH',
|
|
})
|
|
syncPayload(payload)
|
|
} catch (error) {
|
|
setNotice({ tone: 'error', message: error.message || 'Failed to change force hero state.' })
|
|
} finally {
|
|
setBusy('')
|
|
}
|
|
}
|
|
|
|
const duplicateSelection = !editingId && selectedArtwork?.already_featured
|
|
const suggestedPriority = winner ? Number(winner.priority || 0) + 20 : 120
|
|
|
|
const filterCounts = React.useMemo(() => ({
|
|
all: entries.length,
|
|
winner: entries.filter((entry) => Boolean(entry.is_winner)).length,
|
|
active: entries.filter((entry) => Boolean(entry.is_active)).length,
|
|
eligible: entries.filter((entry) => Boolean(entry.eligibility?.is_eligible)).length,
|
|
attention: entries.filter((entry) => Boolean(entry.is_active) && (Boolean(entry.is_expired) || !entry.eligibility?.is_eligible)).length,
|
|
ineligible: entries.filter((entry) => !entry.eligibility?.is_eligible).length,
|
|
expired: entries.filter((entry) => Boolean(entry.is_expired)).length,
|
|
inactive: entries.filter((entry) => !entry.is_active).length,
|
|
}), [entries])
|
|
|
|
const activeForceHeroEntry = React.useMemo(() => entries.find((entry) => Boolean(entry.is_force_hero)) || null, [entries])
|
|
|
|
const soonExpiringEntries = React.useMemo(() => {
|
|
const now = Date.now()
|
|
const cutoff = now + (7 * 86400000)
|
|
|
|
return entries
|
|
.filter((entry) => {
|
|
if (!entry.expires_at || entry.is_expired) return false
|
|
const expiresAt = new Date(entry.expires_at).getTime()
|
|
return !Number.isNaN(expiresAt) && expiresAt >= now && expiresAt <= cutoff
|
|
})
|
|
.sort((left, right) => (new Date(left.expires_at).getTime() || 0) - (new Date(right.expires_at).getTime() || 0))
|
|
}, [entries])
|
|
|
|
const naturalFallback = React.useMemo(() => {
|
|
return [...entries]
|
|
.filter((entry) => Boolean(entry.is_active) && !Boolean(entry.is_expired) && Boolean(entry.eligibility?.is_eligible) && !Boolean(entry.is_winner))
|
|
.sort(compareWinnerOrder)[0] || null
|
|
}, [entries])
|
|
|
|
const attentionEntries = React.useMemo(() => {
|
|
return [...entries]
|
|
.filter((entry) => Boolean(entry.is_active) && (Boolean(entry.is_expired) || !entry.eligibility?.is_eligible))
|
|
.sort(compareWinnerOrder)
|
|
.slice(0, 3)
|
|
}, [entries])
|
|
|
|
const selectedArtworkSignals = React.useMemo(() => {
|
|
if (!selectedArtwork) return []
|
|
|
|
const signals = []
|
|
const eligibilityReasons = Array.isArray(selectedArtwork.eligibility?.reasons) ? selectedArtwork.eligibility.reasons : []
|
|
|
|
signals.push({
|
|
label: selectedArtwork.eligibility?.is_eligible ? 'Ready for rotation now' : 'Needs editorial attention',
|
|
tone: selectedArtwork.eligibility?.is_eligible ? 'emerald' : 'rose',
|
|
detail: selectedArtwork.eligibility?.is_eligible
|
|
? 'Current eligibility checks pass.'
|
|
: eligibilityReasons.join(', ') || 'Eligibility checks are failing.',
|
|
})
|
|
|
|
if (winner) {
|
|
const priorityGap = Number(form.priority || 0) - Number(winner.priority || 0)
|
|
signals.push({
|
|
label: priorityGap >= 0 ? 'Priority matches or exceeds current winner' : 'Lower priority than current winner',
|
|
tone: priorityGap >= 0 ? 'sky' : 'amber',
|
|
detail: `Current winner priority: ${winner.priority}. Proposed priority: ${Number(form.priority || 0)}.`,
|
|
})
|
|
}
|
|
|
|
if (selectedArtwork.already_featured) {
|
|
signals.push({
|
|
label: 'Existing featured row found',
|
|
tone: 'amber',
|
|
detail: `This artwork already appears in ${selectedArtwork.existing_feature_count || 1} featured row${selectedArtwork.existing_feature_count === 1 ? '' : 's'}.`,
|
|
})
|
|
}
|
|
|
|
return signals
|
|
}, [form.priority, selectedArtwork, winner])
|
|
|
|
const filteredEntries = React.useMemo(() => {
|
|
const query = deferredListQuery.trim().toLowerCase()
|
|
|
|
return [...entries]
|
|
.filter((entry) => {
|
|
if (filter === 'active') return Boolean(entry.is_active)
|
|
if (filter === 'inactive') return !entry.is_active
|
|
if (filter === 'expired') return Boolean(entry.is_expired)
|
|
if (filter === 'winner') return Boolean(entry.is_winner)
|
|
if (filter === 'eligible') return Boolean(entry.eligibility?.is_eligible)
|
|
if (filter === 'ineligible') return !entry.eligibility?.is_eligible
|
|
if (filter === 'attention') return Boolean(entry.is_active) && (Boolean(entry.is_expired) || !entry.eligibility?.is_eligible)
|
|
return true
|
|
})
|
|
.filter((entry) => {
|
|
if (!query) return true
|
|
|
|
const haystack = [
|
|
entry.artwork?.title,
|
|
entry.artwork?.owner?.display_name,
|
|
entry.artwork?.owner?.username,
|
|
entry.artwork?.id,
|
|
entry.id,
|
|
].join(' ').toLowerCase()
|
|
|
|
return haystack.includes(query)
|
|
})
|
|
.sort((left, right) => compareEntries(left, right, sortKey, sortDirection))
|
|
}, [deferredListQuery, entries, filter, sortDirection, sortKey])
|
|
|
|
const visibleEntries = React.useMemo(() => filteredEntries.slice(0, visibleCount), [filteredEntries, visibleCount])
|
|
const hasMoreEntries = visibleEntries.length < filteredEntries.length
|
|
|
|
React.useEffect(() => {
|
|
if (!hasMoreEntries || typeof IntersectionObserver === 'undefined' || !loadMoreRef.current) {
|
|
return undefined
|
|
}
|
|
|
|
const observer = new IntersectionObserver((observerEntries) => {
|
|
if (observerEntries.some((observerEntry) => observerEntry.isIntersecting)) {
|
|
setVisibleCount((current) => Math.min(current + PAGE_SIZE, filteredEntries.length))
|
|
}
|
|
}, { rootMargin: '320px 0px' })
|
|
|
|
observer.observe(loadMoreRef.current)
|
|
|
|
return () => observer.disconnect()
|
|
}, [filteredEntries.length, hasMoreEntries, visibleCount])
|
|
|
|
function loadMoreEntries() {
|
|
setVisibleCount((current) => Math.min(current + PAGE_SIZE, filteredEntries.length))
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{seo.title || 'Featured Artworks'}</title>
|
|
{seo.description ? <meta name="description" content={seo.description} /> : null}
|
|
{seo.robots ? <meta name="robots" content={seo.robots} /> : null}
|
|
{seo.canonical ? <link rel="canonical" href={seo.canonical} /> : null}
|
|
</Head>
|
|
|
|
<div className="min-h-screen bg-[#07111c] pb-28 text-white xl:pb-0">
|
|
<div>
|
|
<div className="flex w-full max-w-none flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8 2xl:px-10">
|
|
<section className="overflow-hidden rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(245,158,11,0.14),_transparent_35%),linear-gradient(180deg,_rgba(6,14,25,0.92),_rgba(8,18,32,0.96))] p-8 shadow-[0_28px_90px_rgba(2,6,23,0.45)]">
|
|
<div className="flex flex-col gap-8 xl:flex-row xl:items-start xl:justify-between">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">Featured Artworks</div>
|
|
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.06em] text-white sm:text-5xl">Curate the homepage with live winner context, not guesswork.</h1>
|
|
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">This workspace now behaves like an editorial command center: current winner visibility, natural fallback awareness, faster filters, and a cleaner composer for new or existing featured rows.</p>
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<button type="button" onClick={() => scrollToSection(composerRef)} className="rounded-full bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100">
|
|
Add or edit featured row
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
React.startTransition(() => setFilter('attention'))
|
|
scrollToSection(rosterRef)
|
|
}}
|
|
className="rounded-full border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/[0.06]"
|
|
>
|
|
Review attention items
|
|
</button>
|
|
{winner?.artwork?.canonical_url ? (
|
|
<a href={winner.artwork.canonical_url} target="_blank" rel="noreferrer" className="rounded-full border border-amber-300/20 px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-300/40 hover:bg-amber-400/10">
|
|
Open current winner
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
|
|
<StatCard label="Active pool" value={stats.active || 0} detail="Rows currently allowed to compete for the homepage slot." tone="sky" />
|
|
<StatCard label="Eligible now" value={stats.eligible || 0} detail="Rows that can win without any manual override." tone="emerald" />
|
|
<StatCard label="Force Hero" value={activeForceHeroEntry ? 'On' : 'Off'} detail={activeForceHeroEntry ? `${activeForceHeroEntry.artwork?.title || 'Selected artwork'} is overriding the normal order.` : 'Normal winner logic is in control.'} tone="amber" />
|
|
<StatCard label="Expiring soon" value={soonExpiringEntries.length} detail={soonExpiringEntries[0] ? `${soonExpiringEntries[0].artwork?.title || 'Next row'} is the nearest expiry.` : 'No featured rows expire in the next 7 days.'} tone={soonExpiringEntries.length > 0 ? 'rose' : 'sky'} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<NoticeBanner notice={notice} />
|
|
|
|
<div className="grid gap-8 xl:grid-cols-[1.3fr_0.7fr]">
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
|
|
<h2 className="mt-2 text-3xl font-semibold tracking-[-0.05em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
|
|
<p className="mt-3 max-w-2xl text-sm leading-7 text-slate-300">
|
|
{winner?.selection_reason || 'There is no active, non-expired, eligible featured artwork right now.'}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{winner ? <Badge label="Winner" tone="amber" /> : <Badge label="No winner" tone="rose" />}
|
|
{winner?.is_force_hero ? <Badge label="Force Hero" tone="amber" /> : <Badge label="Normal logic" tone="sky" />}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-6 lg:grid-cols-[240px_1fr]">
|
|
<a href={winner?.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[26px] border border-white/10 bg-[#09121f]" target="_blank" rel="noreferrer">
|
|
<img
|
|
src={winner?.artwork?.thumbnail?.url}
|
|
alt={winner?.artwork?.title || 'Winner preview'}
|
|
className="h-full min-h-[220px] w-full object-cover"
|
|
/>
|
|
</a>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|
<MetricTile label="Artist" value={winner?.artwork?.owner?.display_name || 'Unknown'} hint={winner?.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner?.artwork?.owner?.username || ''}`} />
|
|
<MetricTile label="Priority" value={winner?.priority ?? '—'} hint="Primary tie-breaker in hero selection." />
|
|
<MetricTile label="Medal score" value={winner?.medals?.score_30d || 0} hint="Last 30 days." />
|
|
<MetricTile label="Featured Since" value={formatDateTime(winner?.featured_at)} hint="Used after priority and medal score." />
|
|
</div>
|
|
</div>
|
|
|
|
{winner?.is_force_hero ? (
|
|
<div className="mt-5 rounded-[22px] border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
|
|
Force Hero is active. This row bypasses the normal ranking until editors disable the override from the roster below.
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm">
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Editorial Radar</div>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Know what happens next before you touch a row.</h2>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">Natural fallback</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{naturalFallback?.artwork?.title || 'No fallback candidate'}</div>
|
|
<div className="mt-1 text-sm leading-6 text-slate-400">{naturalFallback ? `${formatOwner(naturalFallback)} · Priority ${naturalFallback.priority} · Medal ${naturalFallback.medals?.score_30d || 0}` : 'All remaining rows are either inactive, expired, or ineligible.'}</div>
|
|
</div>
|
|
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">Needs attention</div>
|
|
{attentionEntries.length === 0 ? (
|
|
<div className="mt-2 text-sm leading-6 text-slate-300">No active rows are currently blocked by expiry or eligibility rules.</div>
|
|
) : (
|
|
<div className="mt-3 space-y-3">
|
|
{attentionEntries.map((entry) => (
|
|
<button
|
|
type="button"
|
|
key={entry.id}
|
|
onClick={() => {
|
|
React.startTransition(() => {
|
|
setFilter('attention')
|
|
setListQuery(String(entry.artwork?.id || entry.artwork_id || entry.id))
|
|
})
|
|
scrollToSection(rosterRef)
|
|
}}
|
|
className="block w-full rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-left transition hover:border-white/20 hover:bg-white/[0.05]"
|
|
>
|
|
<div className="text-sm font-semibold text-white">{entry.artwork?.title || `Featured row #${entry.id}`}</div>
|
|
<div className="mt-1 text-xs leading-5 text-slate-400">{buildEntrySummary(entry)}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-400">Next expiry checkpoint</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{soonExpiringEntries[0]?.artwork?.title || 'Nothing expiring soon'}</div>
|
|
<div className="mt-1 text-sm leading-6 text-slate-400">{soonExpiringEntries[0] ? `${formatRelativeExpiry(soonExpiringEntries[0].expires_at)} · ${formatDateTime(soonExpiringEntries[0].expires_at)}` : 'No featured rows expire in the next 7 days.'}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div className="grid gap-8 xl:grid-cols-[1.25fr_0.75fr]">
|
|
<section ref={rosterRef} className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Featured Pool</div>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Every featured row, with enough context to act quickly.</h2>
|
|
<p className="mt-2 text-sm leading-6 text-slate-400">Showing {visibleEntries.length} of {filteredEntries.length} matching rows. {entries.length} rows in the full pool.</p>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_220px_124px] lg:w-[720px]">
|
|
<input
|
|
type="text"
|
|
value={listQuery}
|
|
onChange={(event) => setListQuery(event.target.value)}
|
|
placeholder="Filter by title, artist, row ID, or artwork ID"
|
|
className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
/>
|
|
<NovaSelect value={sortKey} onChange={(value) => setSortKey(value)} searchable={false} options={SORT_OPTIONS} />
|
|
<button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
{sortDirection === 'desc' ? 'Desc' : 'Asc'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{FILTER_OPTIONS.map((option) => (
|
|
<FilterChip
|
|
key={option.value}
|
|
label={option.label}
|
|
value={option.value}
|
|
active={filter === option.value}
|
|
onClick={(nextValue) => React.startTransition(() => setFilter(nextValue))}
|
|
count={filterCounts[option.value] ?? 0}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
{filteredEntries.length === 0 ? (
|
|
<div className="rounded-[26px] border border-dashed border-white/10 bg-black/20 px-6 py-12 text-center text-sm leading-6 text-slate-400">
|
|
No featured entries match the current search and filter combination.
|
|
</div>
|
|
) : visibleEntries.map((entry) => (
|
|
<article key={entry.id} className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_20px_50px_rgba(2,6,23,0.22)]">
|
|
<div className="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">
|
|
<div className="flex min-w-0 gap-4">
|
|
<a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="h-28 w-28 shrink-0 overflow-hidden rounded-[22px] border border-white/10 bg-[#08111d]">
|
|
<img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-full w-full object-cover" />
|
|
</a>
|
|
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="text-lg font-semibold tracking-[-0.03em] text-white">{entry.artwork?.title || 'Missing artwork'}</h3>
|
|
<span className="text-xs text-slate-400">Artwork #{entry.artwork?.id || entry.artwork_id}</span>
|
|
<span className="text-xs text-slate-500">Row #{entry.id}</span>
|
|
</div>
|
|
|
|
<div className="mt-2 text-sm text-slate-300">{formatOwner(entry)}</div>
|
|
<p className="mt-3 max-w-3xl text-sm leading-6 text-slate-400">{buildEntrySummary(entry)}</p>
|
|
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{(entry.status_badges || []).map((badge, index) => (
|
|
<Badge key={`${entry.id}-${badge.label}-${index}`} label={badge.label} tone={badge.tone} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:w-[420px] xl:grid-cols-4">
|
|
<MetricTile label="Priority" value={entry.priority} hint="Higher wins first" />
|
|
<MetricTile label="Medal score" value={entry.medals?.score_30d || 0} hint="Last 30d" />
|
|
<MetricTile label="Featured" value={formatShortDate(entry.featured_at)} hint={formatDateTime(entry.featured_at)} />
|
|
<MetricTile label="Expires" value={formatRelativeExpiry(entry.expires_at)} hint={formatDateTime(entry.expires_at)} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-col gap-4 border-t border-white/10 pt-4 xl:flex-row xl:items-center xl:justify-between">
|
|
<div className="text-sm leading-6 text-slate-400">
|
|
Visibility: <span className="text-slate-200">{entry.artwork?.visibility || '—'}</span>
|
|
<span className="mx-2 text-slate-600">•</span>
|
|
Published: <span className="text-slate-200">{entry.artwork?.published_at ? 'Yes' : 'No'}</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2 xl:justify-end">
|
|
<a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
Open artwork
|
|
</a>
|
|
<button type="button" onClick={() => editEntry(entry)} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
Edit row
|
|
</button>
|
|
{capabilities.forceHeroEnabled ? (
|
|
<button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={cn('rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition disabled:cursor-not-allowed disabled:opacity-60', entry.is_force_hero ? 'border-amber-300/25 text-amber-100 hover:border-amber-300/40 hover:bg-amber-400/10' : 'border-amber-300/15 text-amber-50 hover:border-amber-300/30 hover:bg-amber-400/5')}>
|
|
{busy === `force-${entry.id}` ? 'Saving…' : entry.is_force_hero ? 'Disable Force Hero' : 'Force Hero'}
|
|
</button>
|
|
) : null}
|
|
<button type="button" onClick={() => handleToggle(entry)} disabled={busy === `toggle-${entry.id}`} className="rounded-full border border-sky-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-60">
|
|
{busy === `toggle-${entry.id}` ? 'Saving…' : entry.is_active ? 'Deactivate' : 'Activate'}
|
|
</button>
|
|
<button type="button" onClick={() => handleDelete(entry)} disabled={busy === `delete-${entry.id}`} className="rounded-full border border-rose-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-400/10 disabled:cursor-not-allowed disabled:opacity-60">
|
|
{busy === `delete-${entry.id}` ? 'Deleting…' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
|
|
{hasMoreEntries ? (
|
|
<div ref={loadMoreRef} className="rounded-[24px] border border-dashed border-white/10 bg-black/20 px-5 py-6 text-center">
|
|
<div className="text-sm text-slate-300">Loading more rows as you reach the bottom.</div>
|
|
<button
|
|
type="button"
|
|
onClick={loadMoreEntries}
|
|
className="mt-4 rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5"
|
|
>
|
|
Load 24 more
|
|
</button>
|
|
</div>
|
|
) : filteredEntries.length > PAGE_SIZE ? (
|
|
<div className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
|
|
All matching rows loaded
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section ref={composerRef} className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_22px_70px_rgba(2,6,23,0.28)] backdrop-blur-sm xl:sticky xl:top-6 xl:self-start">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Editorial Composer</div>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Edit featured row #${editingId}` : 'Build a new featured row'}</h2>
|
|
<p className="mt-2 text-sm leading-6 text-slate-400">Search, inspect readiness, choose timing, and ship the change without leaving the page context.</p>
|
|
</div>
|
|
{editingId ? (
|
|
<button type="button" onClick={resetEditor} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/5">
|
|
Cancel edit
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{!editingId ? (
|
|
<form onSubmit={handleArtworkSearch} className="mt-6 space-y-4 rounded-[26px] border border-white/10 bg-black/20 p-4">
|
|
<Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group, then lock one result into the composer.">
|
|
<div className="flex gap-3">
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(event) => setSearchQuery(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
placeholder="Try an artwork ID, title, or creator"
|
|
/>
|
|
<button type="submit" disabled={busy === 'search'} className="rounded-2xl bg-sky-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-60">
|
|
{busy === 'search' ? 'Searching…' : 'Search'}
|
|
</button>
|
|
</div>
|
|
</Field>
|
|
|
|
{searchResults.length > 0 ? (
|
|
<div className="space-y-3">
|
|
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Search results</div>
|
|
{searchResults.map((artwork) => (
|
|
<button
|
|
type="button"
|
|
key={artwork.id}
|
|
onClick={() => chooseArtwork(artwork)}
|
|
className={cn('grid gap-4 rounded-[22px] border p-3 text-left transition sm:grid-cols-[88px_1fr]', selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10 shadow-[0_12px_30px_rgba(56,189,248,0.15)]' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]')}
|
|
>
|
|
<img src={artwork.thumbnail?.url} alt={artwork.title} className="h-24 w-full rounded-2xl object-cover" />
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-semibold text-white">{artwork.title}</span>
|
|
<span className="text-xs text-slate-400">#{artwork.id}</span>
|
|
{artwork.already_featured ? <Badge label="Already Featured" tone="amber" /> : null}
|
|
</div>
|
|
<div className="text-xs text-slate-400">{artwork.owner?.display_name || 'Unknown'} · Medal Score (30d): {artwork.medals?.score_30d || 0}</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{(artwork.eligibility?.is_eligible ? [{ label: 'Eligible', tone: 'emerald' }] : [{ label: 'Not eligible', tone: 'rose' }]).concat(
|
|
(artwork.eligibility?.reasons || []).map((reason) => ({
|
|
label: reason,
|
|
tone: reason === 'Missing preview' ? 'rose' : 'slate',
|
|
}))
|
|
).slice(0, 4).map((badge) => (
|
|
<Badge key={`${artwork.id}-${badge.label}`} label={badge.label} tone={badge.tone} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
) : null}
|
|
|
|
{selectedArtwork ? (
|
|
<div className="mt-6 rounded-[26px] border border-white/10 bg-black/20 p-4">
|
|
<div className="grid gap-4 sm:grid-cols-[108px_1fr]">
|
|
<img src={selectedArtwork.thumbnail?.url} alt={selectedArtwork.title || 'Artwork preview'} className="h-28 w-full rounded-2xl object-cover" />
|
|
<div className="space-y-3">
|
|
<div>
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Selected Artwork</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{selectedArtwork.title}</div>
|
|
<div className="mt-1 text-sm leading-6 text-slate-400">#{selectedArtwork.id} · {selectedArtwork.owner?.display_name || 'Unknown'} · Medal Score (30d): {selectedArtwork.medals?.score_30d || 0}</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{(selectedArtwork.eligibility?.is_eligible ? [{ label: 'Currently eligible', tone: 'emerald' }] : [{ label: 'Currently ineligible', tone: 'rose' }]).concat(
|
|
(selectedArtwork.eligibility?.reasons || []).map((reason) => ({
|
|
label: reason,
|
|
tone: reason === 'Missing preview' ? 'rose' : 'slate',
|
|
}))
|
|
).map((badge) => (
|
|
<Badge key={`selected-${badge.label}`} label={badge.label} tone={badge.tone} />
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedArtwork.canonical_url ? (
|
|
<a href={selectedArtwork.canonical_url} target="_blank" rel="noreferrer" className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
Open artwork
|
|
</a>
|
|
) : null}
|
|
{selectedArtwork.already_featured ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
React.startTransition(() => {
|
|
setFilter('all')
|
|
setListQuery(String(selectedArtwork?.id || ''))
|
|
})
|
|
scrollToSection(rosterRef)
|
|
}}
|
|
className="rounded-full border border-amber-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-amber-50 transition hover:border-amber-300/40 hover:bg-amber-400/10"
|
|
>
|
|
Find existing row
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedArtworkSignals.length > 0 ? (
|
|
<div className="mt-4 grid gap-3">
|
|
{selectedArtworkSignals.map((signal) => (
|
|
<div key={signal.label} className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<Badge label={signal.label} tone={signal.tone} />
|
|
</div>
|
|
<div className="mt-2 text-sm leading-6 text-slate-300">{signal.detail}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{duplicateSelection ? (
|
|
<div className="mt-4 rounded-[22px] border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-100">
|
|
This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
|
|
<div className="mt-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
React.startTransition(() => {
|
|
setFilter('all')
|
|
setListQuery(String(selectedArtwork?.id || ''))
|
|
})
|
|
scrollToSection(rosterRef)
|
|
}}
|
|
className="rounded-full border border-amber-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-amber-50 transition hover:border-amber-300/40 hover:bg-amber-400/10"
|
|
>
|
|
Find existing row
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<form onSubmit={handleSubmit} className="mt-6 space-y-5">
|
|
<Field label="Priority" help="Higher priority always wins before medal score is considered.">
|
|
<div className="space-y-3">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
value={form.priority}
|
|
onChange={(event) => setForm((current) => ({ ...current, priority: event.target.value }))}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
|
/>
|
|
<div className="flex flex-wrap gap-2">
|
|
{PRIORITY_PRESETS.map((preset) => (
|
|
<button
|
|
type="button"
|
|
key={preset}
|
|
onClick={() => setForm((current) => ({ ...current, priority: preset }))}
|
|
className={cn('rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] transition', Number(form.priority) === preset ? 'border-sky-300/40 bg-sky-400/10 text-sky-100' : 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-white/[0.05]')}
|
|
>
|
|
{preset}
|
|
</button>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={() => setForm((current) => ({ ...current, priority: suggestedPriority }))}
|
|
className="rounded-full border border-emerald-300/20 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/10"
|
|
>
|
|
Winner + 20
|
|
</button>
|
|
{winner ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setForm((current) => ({ ...current, priority: Number(winner.priority || 0) }))}
|
|
className="rounded-full border border-white/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 transition hover:border-white/20 hover:bg-white/[0.05]"
|
|
>
|
|
Match winner
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</Field>
|
|
|
|
<Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
|
|
<label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
|
|
<Checkbox
|
|
checked={Boolean(form.is_active)}
|
|
onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
|
|
/>
|
|
<span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
|
|
</label>
|
|
</Field>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<Field label="Featured Since">
|
|
<DateTimePicker value={form.featured_at} onChange={(nextValue) => setForm((current) => ({ ...current, featured_at: nextValue }))} placeholder="Featured since" clearable className="bg-[#08111d]" />
|
|
</Field>
|
|
|
|
<Field label="Expires">
|
|
<DateTimePicker value={form.expires_at} onChange={(nextValue) => setForm((current) => ({ ...current, expires_at: nextValue }))} placeholder="Expiry date" clearable className="bg-[#08111d]" />
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={busy === 'submit' || (!editingId && !selectedArtwork) || duplicateSelection}
|
|
className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{busy === 'submit' ? 'Saving…' : editingId ? 'Save Changes' : 'Create Featured Entry'}
|
|
</button>
|
|
{editingId ? (
|
|
<button type="button" onClick={resetEditor} className="rounded-2xl border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
|
Reset composer
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="fixed inset-x-4 bottom-4 z-30 xl:hidden">
|
|
<div className="grid grid-cols-3 gap-3 rounded-[26px] border border-white/10 bg-[#08111d]/95 p-3 shadow-[0_24px_70px_rgba(2,6,23,0.42)] backdrop-blur-xl">
|
|
<DockButton
|
|
label="Winner"
|
|
detail={winner?.artwork?.title || 'No live winner'}
|
|
tone="sky"
|
|
onClick={scrollToTop}
|
|
/>
|
|
<DockButton
|
|
label="Attention"
|
|
detail={`${filterCounts.attention || 0} row${(filterCounts.attention || 0) === 1 ? '' : 's'}`}
|
|
tone="amber"
|
|
onClick={() => {
|
|
React.startTransition(() => setFilter('attention'))
|
|
scrollToSection(rosterRef)
|
|
}}
|
|
/>
|
|
<DockButton
|
|
label="Composer"
|
|
detail={editingId ? `Editing #${editingId}` : 'Add featured row'}
|
|
tone="slate"
|
|
onClick={() => scrollToSection(composerRef)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |