3304 lines
180 KiB
JavaScript
3304 lines
180 KiB
JavaScript
import React, { useEffect, useMemo, useState } from 'react'
|
|
import { Head, usePage } from '@inertiajs/react'
|
|
import CollectionVisibilityBadge from '../../components/profile/collections/CollectionVisibilityBadge'
|
|
|
|
function getCsrfToken() {
|
|
if (typeof document === 'undefined') return ''
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
|
|
function slugify(value) {
|
|
return String(value ?? '')
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-|-$/g, '')
|
|
.slice(0, 140)
|
|
}
|
|
|
|
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 formatDateTimeLabel(value) {
|
|
if (!value) return null
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return null
|
|
|
|
return date.toLocaleString()
|
|
}
|
|
|
|
function formatStateLabel(value) {
|
|
if (!value) return 'Unknown'
|
|
|
|
return String(value)
|
|
.replaceAll('_', ' ')
|
|
.replaceAll('-', ' ')
|
|
.replace(/\b\w/g, (match) => match.toUpperCase())
|
|
}
|
|
|
|
function healthFlagMeta(flag) {
|
|
const tone = {
|
|
success: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
|
|
warning: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
|
|
danger: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
|
|
neutral: 'border-white/10 bg-white/[0.04] text-slate-200',
|
|
}
|
|
|
|
const registry = {
|
|
healthy: {
|
|
label: 'Healthy',
|
|
description: 'No active health blockers are currently recorded.',
|
|
tone: tone.success,
|
|
},
|
|
needs_metadata: {
|
|
label: 'Metadata is thin',
|
|
description: 'Tighten the title, summary, cover, or tagging so discovery surfaces have stronger context.',
|
|
tone: tone.warning,
|
|
},
|
|
stale: {
|
|
label: 'Stale collection',
|
|
description: 'This collection looks quiet. Refresh the lineup or update the presentation before promoting it again.',
|
|
tone: tone.warning,
|
|
},
|
|
low_content: {
|
|
label: 'Low content',
|
|
description: 'Add more artworks so the collection can support richer layouts and recommendations.',
|
|
tone: tone.warning,
|
|
},
|
|
broken_items: {
|
|
label: 'Broken items detected',
|
|
description: 'Some attached items are no longer safely displayable. Review attachments before featuring this set.',
|
|
tone: tone.danger,
|
|
},
|
|
weak_cover: {
|
|
label: 'Weak cover',
|
|
description: 'Choose a stronger cover artwork so the collection reads clearly on cards and hero rails.',
|
|
tone: tone.warning,
|
|
},
|
|
low_engagement: {
|
|
label: 'Low engagement',
|
|
description: 'This collection is live but underperforming. Consider adjusting ordering, title, or campaign context.',
|
|
tone: tone.warning,
|
|
},
|
|
attribution_incomplete: {
|
|
label: 'Attribution incomplete',
|
|
description: 'Cross-links or creator attribution need a pass before this collection is pushed harder.',
|
|
tone: tone.warning,
|
|
},
|
|
needs_review: {
|
|
label: 'Needs review',
|
|
description: 'Workflow or moderation state is still blocking this collection from safer public programming.',
|
|
tone: tone.danger,
|
|
},
|
|
duplicate_risk: {
|
|
label: 'Duplicate risk',
|
|
description: 'A similar collection may already exist. Use the merge review tools before spreading traffic across duplicates.',
|
|
tone: tone.warning,
|
|
},
|
|
merge_candidate: {
|
|
label: 'Merge candidate',
|
|
description: 'This collection already looks like a merge candidate. Confirm the canonical target in the review section below.',
|
|
tone: tone.warning,
|
|
},
|
|
}
|
|
|
|
return registry[flag] || {
|
|
label: formatStateLabel(flag),
|
|
description: 'Review this collection state before pushing it to wider surfaces.',
|
|
tone: tone.neutral,
|
|
}
|
|
}
|
|
|
|
function buildInviteExpiryOptions(defaultDays) {
|
|
const sanitizedDefault = Math.max(1, Number.parseInt(defaultDays, 10) || 7)
|
|
const values = [sanitizedDefault, 1, 3, 7, 14, 30]
|
|
|
|
return Array.from(new Set(values)).sort((left, right) => left - right)
|
|
}
|
|
|
|
function firstEntitySelection(options) {
|
|
const firstType = Object.keys(options || {})[0] || 'creator'
|
|
|
|
return {
|
|
type: firstType,
|
|
id: options?.[firstType]?.[0]?.id || '',
|
|
}
|
|
}
|
|
|
|
async function requestJson(url, { method = 'GET', 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) {
|
|
const message = payload?.message || 'Request failed.'
|
|
const error = new Error(message)
|
|
error.payload = payload
|
|
throw error
|
|
}
|
|
|
|
return payload
|
|
}
|
|
|
|
function defaultRuleValue(field) {
|
|
if (field === 'created_at') {
|
|
return { from: '', to: '' }
|
|
}
|
|
|
|
if (field === 'is_featured' || field === 'is_mature') {
|
|
return true
|
|
}
|
|
|
|
return ''
|
|
}
|
|
|
|
function operatorOptionsForField(field) {
|
|
if (field === 'created_at') {
|
|
return [{ value: 'between', label: 'Between' }]
|
|
}
|
|
|
|
if (field === 'is_featured' || field === 'is_mature') {
|
|
return [{ value: 'equals', label: 'Is' }]
|
|
}
|
|
|
|
return [
|
|
{ value: 'contains', label: 'Contains' },
|
|
{ value: 'equals', label: 'Equals' },
|
|
]
|
|
}
|
|
|
|
function createRule(field = 'tags') {
|
|
return {
|
|
field,
|
|
operator: operatorOptionsForField(field)[0]?.value || 'contains',
|
|
value: defaultRuleValue(field),
|
|
}
|
|
}
|
|
|
|
function normalizeRule(rule, fallbackField = 'tags') {
|
|
const field = rule?.field || fallbackField
|
|
const operators = operatorOptionsForField(field)
|
|
const operator = operators.some((item) => item.value === rule?.operator)
|
|
? rule.operator
|
|
: operators[0]?.value || 'contains'
|
|
|
|
if (field === 'created_at') {
|
|
return {
|
|
field,
|
|
operator,
|
|
value: {
|
|
from: rule?.value?.from || '',
|
|
to: rule?.value?.to || '',
|
|
},
|
|
}
|
|
}
|
|
|
|
if (field === 'is_featured' || field === 'is_mature') {
|
|
return {
|
|
field,
|
|
operator,
|
|
value: Boolean(rule?.value),
|
|
}
|
|
}
|
|
|
|
return {
|
|
field,
|
|
operator,
|
|
value: typeof rule?.value === 'string' ? rule.value : '',
|
|
}
|
|
}
|
|
|
|
function normalizeSmartRules(rawRules, mode = 'manual') {
|
|
if (rawRules && Array.isArray(rawRules.rules)) {
|
|
return {
|
|
match: rawRules.match === 'any' ? 'any' : 'all',
|
|
sort: rawRules.sort || 'newest',
|
|
rules: rawRules.rules.map((rule) => normalizeRule(rule)).filter(Boolean),
|
|
}
|
|
}
|
|
|
|
if (mode === 'smart') {
|
|
return {
|
|
match: 'all',
|
|
sort: 'newest',
|
|
rules: [createRule()],
|
|
}
|
|
}
|
|
|
|
return {
|
|
match: 'all',
|
|
sort: 'newest',
|
|
rules: [],
|
|
}
|
|
}
|
|
|
|
function normalizeLayoutModules(rawModules) {
|
|
if (!Array.isArray(rawModules)) return []
|
|
|
|
return rawModules.map((module) => ({
|
|
key: module?.key || '',
|
|
label: module?.label || module?.key || 'Module',
|
|
description: module?.description || '',
|
|
slot: module?.slot || 'main',
|
|
slots: Array.isArray(module?.slots) && module.slots.length ? module.slots : ['main'],
|
|
enabled: module?.enabled !== false,
|
|
locked: Boolean(module?.locked),
|
|
})).filter((module) => module.key)
|
|
}
|
|
|
|
function humanizeField(field, smartRuleOptions) {
|
|
const label = smartRuleOptions?.fields?.find((item) => item.value === field)?.label
|
|
return label || field
|
|
}
|
|
|
|
function getFieldOptions(field, smartRuleOptions) {
|
|
if (field === 'tags') return smartRuleOptions?.tag_options || []
|
|
if (field === 'category') return smartRuleOptions?.category_options || []
|
|
if (field === 'subcategory') return smartRuleOptions?.subcategory_options || []
|
|
if (field === 'medium') return smartRuleOptions?.medium_options || []
|
|
if (field === 'style') return smartRuleOptions?.style_options || []
|
|
if (field === 'color') return smartRuleOptions?.color_options || []
|
|
return []
|
|
}
|
|
|
|
function buildRuleSummary(rule, smartRuleOptions) {
|
|
if (!rule) return ''
|
|
|
|
if (rule.field === 'created_at') {
|
|
const from = rule.value?.from || 'any date'
|
|
const to = rule.value?.to || 'today'
|
|
return `Created between ${from} and ${to}`
|
|
}
|
|
|
|
if (rule.field === 'is_featured') {
|
|
return rule.value ? 'Featured artworks only' : 'Artworks not marked featured'
|
|
}
|
|
|
|
if (rule.field === 'is_mature') {
|
|
return rule.value ? 'Mature artworks only' : 'Artworks not marked mature'
|
|
}
|
|
|
|
const label = humanizeField(rule.field, smartRuleOptions)
|
|
const value = String(rule.value || '').trim() || 'Any value'
|
|
return `${label} ${rule.operator} ${value}`
|
|
}
|
|
|
|
function Field({ label, children, help }) {
|
|
return (
|
|
<label className="block space-y-2">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">{label}</span>
|
|
{children}
|
|
{help ? <p className="text-xs text-slate-500">{help}</p> : null}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function StatCard({ icon, label, value, tone = 'default' }) {
|
|
const toneClass = tone === 'accent'
|
|
? 'border-sky-300/20 bg-sky-400/10 text-sky-100'
|
|
: 'border-white/10 bg-white/[0.04] text-white'
|
|
|
|
return (
|
|
<div className={`rounded-[24px] border px-4 py-4 ${toneClass}`}>
|
|
<div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
|
|
<i className={`fa-solid ${icon} text-[10px]`} />
|
|
{label}
|
|
</div>
|
|
<div className="mt-2 text-2xl font-semibold tracking-[-0.03em]">{value}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ModeButton({ active, title, description, icon, onClick }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`rounded-[24px] border p-4 text-left transition ${active ? 'border-sky-300/30 bg-sky-400/10 text-sky-50 shadow-[0_18px_40px_rgba(14,165,233,0.12)]' : 'border-white/10 bg-white/[0.04] text-slate-200 hover:bg-white/[0.06]'}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className={`flex h-11 w-11 items-center justify-center rounded-2xl border ${active ? 'border-sky-300/25 bg-sky-400/10' : 'border-white/10 bg-white/[0.04]'}`}>
|
|
<i className={`fa-solid ${icon}`} />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-semibold uppercase tracking-[0.14em]">{title}</div>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-300">{description}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function SmartPreviewArtwork({ artwork }) {
|
|
return (
|
|
<a
|
|
href={artwork.url}
|
|
className="group overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.04] transition hover:-translate-y-0.5 hover:bg-white/[0.06]"
|
|
>
|
|
<div className="aspect-[4/3] overflow-hidden bg-slate-950">
|
|
<img src={artwork.thumb} alt={artwork.title} className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" loading="lazy" />
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="truncate text-sm font-semibold text-white">{artwork.title}</div>
|
|
<div className="mt-1 text-xs text-slate-400">{[artwork.content_type, artwork.category].filter(Boolean).join(' • ') || 'Artwork'}</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
function ArtworkPickerCard({ artwork, checked, onToggle, actionLabel = 'Select' }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onToggle(artwork.id)}
|
|
className={`group w-full overflow-hidden rounded-[24px] border text-left transition ${checked ? 'border-sky-300/40 bg-sky-400/10' : 'border-white/10 bg-white/[0.04] hover:border-white/18 hover:bg-white/[0.06]'}`}
|
|
>
|
|
<div className="aspect-[4/3] overflow-hidden bg-slate-950">
|
|
<img src={artwork.thumb} alt={artwork.title} className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" loading="lazy" />
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold text-white">{artwork.title}</div>
|
|
<div className="mt-1 text-xs text-slate-400">{[artwork.content_type, artwork.category].filter(Boolean).join(' • ') || 'Artwork'}</div>
|
|
</div>
|
|
<span className={`inline-flex h-6 min-w-6 items-center justify-center rounded-full border px-2 text-[10px] font-semibold uppercase tracking-[0.14em] ${checked ? 'border-sky-300/40 bg-sky-400/15 text-sky-100' : 'border-white/12 text-slate-400'}`}>
|
|
{checked ? 'Added' : actionLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function AttachedArtworkCard({ artwork, index, total, onMoveUp, onMoveDown, onRemove }) {
|
|
return (
|
|
<div className="overflow-hidden rounded-[24px] border border-white/10 bg-white/[0.04]">
|
|
<div className="aspect-[4/3] overflow-hidden bg-slate-950">
|
|
<img src={artwork.thumb} alt={artwork.title} className="h-full w-full object-cover" loading="lazy" />
|
|
</div>
|
|
<div className="space-y-3 p-4">
|
|
<div>
|
|
<div className="truncate text-sm font-semibold text-white">{artwork.title}</div>
|
|
<div className="mt-1 text-xs text-slate-400">Position {index + 1}</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onMoveUp}
|
|
disabled={index === 0}
|
|
className={`inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] ${index === 0 ? 'border-white/8 bg-white/[0.03] text-slate-500' : 'border-white/12 bg-white/[0.05] text-white hover:bg-white/[0.08]'}`}
|
|
>
|
|
<i className="fa-solid fa-arrow-up fa-fw" />
|
|
Up
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onMoveDown}
|
|
disabled={index === total - 1}
|
|
className={`inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] ${index === total - 1 ? 'border-white/8 bg-white/[0.03] text-slate-500' : 'border-white/12 bg-white/[0.05] text-white hover:bg-white/[0.08]'}`}
|
|
>
|
|
<i className="fa-solid fa-arrow-down fa-fw" />
|
|
Down
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onRemove}
|
|
className="inline-flex items-center gap-2 rounded-xl border border-rose-400/20 bg-rose-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-rose-100 hover:bg-rose-400/15"
|
|
>
|
|
<i className="fa-solid fa-trash-can fa-fw" />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MemberCard({ member, onRoleChange, onRemove, onAccept, onDecline, onTransfer }) {
|
|
const expiryLabel = formatDateTimeLabel(member?.expires_at)
|
|
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
|
|
<div className="flex items-center gap-3">
|
|
<img src={member?.user?.avatar_url} alt={member?.user?.name || member?.user?.username} className="h-12 w-12 rounded-2xl object-cover ring-1 ring-white/10" />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-semibold text-white">{member?.user?.name || member?.user?.username}</div>
|
|
<div className="text-xs uppercase tracking-[0.16em] text-slate-400">{member?.role} • {member?.status}</div>
|
|
{member?.status === 'pending' && expiryLabel ? <div className="mt-1 text-xs text-slate-500">Invite expires {expiryLabel}</div> : null}
|
|
{member?.is_expired ? <div className="mt-1 text-xs text-amber-300">Invite expired</div> : null}
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{member?.can_revoke ? (
|
|
<select
|
|
value={member?.role}
|
|
onChange={(event) => onRoleChange?.(member, event.target.value)}
|
|
className="rounded-xl border border-white/10 bg-[#0d1726] px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white"
|
|
>
|
|
<option value="editor">Editor</option>
|
|
<option value="contributor">Contributor</option>
|
|
<option value="viewer">Viewer</option>
|
|
</select>
|
|
) : null}
|
|
{member?.can_accept ? <button type="button" onClick={() => onAccept?.(member)} className="rounded-xl border border-emerald-400/20 bg-emerald-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-emerald-100">Accept</button> : null}
|
|
{member?.can_decline ? <button type="button" onClick={() => onDecline?.(member)} className="rounded-xl border border-white/12 bg-white/[0.05] px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white">Decline</button> : null}
|
|
{member?.can_transfer ? <button type="button" onClick={() => onTransfer?.(member)} className="rounded-xl border border-amber-400/20 bg-amber-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-amber-100">Make owner</button> : null}
|
|
{member?.can_revoke ? <button type="button" onClick={() => onRemove?.(member)} className="rounded-xl border border-rose-400/20 bg-rose-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-rose-100">Remove</button> : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SubmissionReviewCard({ submission, onApprove, onReject, onWithdraw }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
|
|
<div className="flex items-start gap-3">
|
|
{submission?.artwork?.thumb ? <img src={submission.artwork.thumb} alt={submission.artwork.title} className="h-16 w-16 rounded-2xl object-cover" /> : null}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-semibold text-white">{submission?.artwork?.title || 'Submission'}</div>
|
|
<div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-400">{submission?.status} • @{submission?.user?.username}</div>
|
|
{submission?.message ? <p className="mt-2 text-sm text-slate-300">{submission.message}</p> : null}
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{submission?.can_review ? <button type="button" onClick={() => onApprove?.(submission)} className="rounded-xl border border-emerald-400/20 bg-emerald-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-emerald-100">Approve</button> : null}
|
|
{submission?.can_review ? <button type="button" onClick={() => onReject?.(submission)} className="rounded-xl border border-rose-400/20 bg-rose-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-rose-100">Reject</button> : null}
|
|
{submission?.can_withdraw ? <button type="button" onClick={() => onWithdraw?.(submission)} className="rounded-xl border border-white/12 bg-white/[0.05] px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white">Withdraw</button> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AiSuggestionCard({ title, body, actionLabel, onAction, muted = false, children }) {
|
|
return (
|
|
<div className={`rounded-[24px] border p-4 ${muted ? 'border-dashed border-white/12 bg-white/[0.03]' : 'border-white/10 bg-white/[0.04]'}`}>
|
|
<div className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">{title}</div>
|
|
<div className="mt-2 text-sm leading-relaxed text-slate-200">{body}</div>
|
|
{children}
|
|
{actionLabel && onAction ? (
|
|
<button type="button" onClick={onAction} className="mt-4 rounded-xl border border-sky-300/20 bg-sky-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100 transition hover:bg-sky-400/15">
|
|
{actionLabel}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LayoutModuleCard({ module, index, total, onToggle, onSlotChange, onMoveUp, onMoveDown }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<div className="text-sm font-semibold text-white">{module.label}</div>
|
|
<p className="mt-1 text-sm leading-relaxed text-slate-400">{module.description}</p>
|
|
</div>
|
|
<label className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white">
|
|
<input
|
|
type="checkbox"
|
|
checked={module.enabled}
|
|
disabled={module.locked}
|
|
onChange={(event) => onToggle(module.key, event.target.checked)}
|
|
/>
|
|
{module.locked ? 'Required' : (module.enabled ? 'Enabled' : 'Disabled')}
|
|
</label>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
|
|
<Field label="Placement">
|
|
<select
|
|
value={module.slot}
|
|
onChange={(event) => onSlotChange(module.key, event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
{module.slots.map((slot) => (
|
|
<option key={slot} value={slot}>{slot === 'full' ? 'Full width' : slot === 'main' ? 'Main column' : 'Sidebar'}</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
|
|
<div className="flex flex-wrap items-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onMoveUp}
|
|
disabled={index === 0}
|
|
className={`inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] ${index === 0 ? 'border-white/8 bg-white/[0.03] text-slate-500' : 'border-white/12 bg-white/[0.05] text-white hover:bg-white/[0.08]'}`}
|
|
>
|
|
<i className="fa-solid fa-arrow-up fa-fw" />
|
|
Up
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onMoveDown}
|
|
disabled={index === total - 1}
|
|
className={`inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] ${index === total - 1 ? 'border-white/8 bg-white/[0.03] text-slate-500' : 'border-white/12 bg-white/[0.05] text-white hover:bg-white/[0.08]'}`}
|
|
>
|
|
<i className="fa-solid fa-arrow-down fa-fw" />
|
|
Down
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StudioTabButton({ active, label, icon, onClick }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-4 py-2.5 text-sm font-semibold transition ${active ? 'border-sky-300/25 bg-sky-400/10 text-sky-100' : 'border-white/10 bg-white/[0.04] text-slate-300 hover:bg-white/[0.07] hover:text-white'}`}
|
|
>
|
|
<i className={`fa-solid ${icon} fa-fw text-[12px]`} />
|
|
{label}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function SmartRuleRow({
|
|
rule,
|
|
index,
|
|
smartRuleOptions,
|
|
onFieldChange,
|
|
onOperatorChange,
|
|
onValueChange,
|
|
onRemove,
|
|
}) {
|
|
const fieldOptions = smartRuleOptions?.fields || []
|
|
const operatorOptions = operatorOptionsForField(rule.field)
|
|
const valueOptions = getFieldOptions(rule.field, smartRuleOptions)
|
|
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Rule {index + 1}</div>
|
|
<button
|
|
type="button"
|
|
onClick={onRemove}
|
|
className="inline-flex items-center gap-2 rounded-xl border border-rose-400/20 bg-rose-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-rose-100 transition hover:bg-rose-400/15"
|
|
>
|
|
<i className="fa-solid fa-trash-can fa-fw" />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-4 md:grid-cols-[1fr_180px_minmax(0,1.15fr)]">
|
|
<Field label="Field">
|
|
<select
|
|
value={rule.field}
|
|
onChange={(event) => onFieldChange(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
{fieldOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="Operator">
|
|
<select
|
|
value={rule.operator}
|
|
onChange={(event) => onOperatorChange(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
{operatorOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
|
|
{rule.field === 'created_at' ? (
|
|
<Field label="Date Range">
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<input
|
|
type="date"
|
|
value={rule.value?.from || ''}
|
|
onChange={(event) => onValueChange({ ...(rule.value || {}), from: event.target.value })}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
/>
|
|
<input
|
|
type="date"
|
|
value={rule.value?.to || ''}
|
|
onChange={(event) => onValueChange({ ...(rule.value || {}), to: event.target.value })}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
/>
|
|
</div>
|
|
</Field>
|
|
) : rule.field === 'is_featured' || rule.field === 'is_mature' ? (
|
|
<Field label="Value">
|
|
<select
|
|
value={rule.value ? 'true' : 'false'}
|
|
onChange={(event) => onValueChange(event.target.value === 'true')}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
{rule.field === 'is_featured' ? (
|
|
<>
|
|
<option value="true">Featured only</option>
|
|
<option value="false">Not featured</option>
|
|
</>
|
|
) : (
|
|
<>
|
|
<option value="true">Mature only</option>
|
|
<option value="false">Not mature</option>
|
|
</>
|
|
)}
|
|
</select>
|
|
</Field>
|
|
) : valueOptions.length ? (
|
|
<Field label="Value">
|
|
<select
|
|
value={rule.value}
|
|
onChange={(event) => onValueChange(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
<option value="">Select one</option>
|
|
{valueOptions.map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
) : (
|
|
<Field label="Value">
|
|
<input
|
|
type="text"
|
|
value={rule.value}
|
|
onChange={(event) => onValueChange(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="Enter a value"
|
|
/>
|
|
</Field>
|
|
)}
|
|
</div>
|
|
|
|
<p className="mt-3 text-xs text-slate-400">{buildRuleSummary(rule, smartRuleOptions)}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function CollectionManage() {
|
|
const { props } = usePage()
|
|
const {
|
|
mode,
|
|
collection,
|
|
layoutModules: initialLayoutModules,
|
|
attachedArtworks,
|
|
availableArtworks,
|
|
owner,
|
|
endpoints,
|
|
members: initialMembers,
|
|
submissions: initialSubmissions,
|
|
comments: initialComments,
|
|
duplicateCandidates: initialDuplicateCandidates,
|
|
canonicalTarget: initialCanonicalTarget,
|
|
linkedCollections: initialLinkedCollections,
|
|
linkedCollectionOptions: initialLinkedCollectionOptions,
|
|
entityLinks: initialEntityLinks,
|
|
entityLinkOptions: initialEntityLinkOptions,
|
|
smartPreview: initialSmartPreview,
|
|
smartRuleOptions,
|
|
initialMode,
|
|
featuredLimit,
|
|
viewer,
|
|
inviteExpiryDays,
|
|
} = props
|
|
|
|
const resolvedInitialMode = collection?.mode || initialMode || 'manual'
|
|
const [collectionState, setCollectionState] = useState(collection)
|
|
const [form, setForm] = useState({
|
|
title: collection?.title || '',
|
|
slug: collection?.slug || '',
|
|
subtitle: collection?.subtitle || '',
|
|
summary: collection?.summary || '',
|
|
description: collection?.description || '',
|
|
lifecycle_state: collection?.lifecycle_state || 'draft',
|
|
type: collection?.type || 'personal',
|
|
collaboration_mode: collection?.collaboration_mode || 'closed',
|
|
allow_submissions: Boolean(collection?.allow_submissions),
|
|
allow_comments: collection?.allow_comments !== false,
|
|
allow_saves: collection?.allow_saves !== false,
|
|
event_key: collection?.event_key || '',
|
|
event_label: collection?.event_label || '',
|
|
season_key: collection?.season_key || '',
|
|
banner_text: collection?.banner_text || '',
|
|
badge_label: collection?.badge_label || '',
|
|
spotlight_style: collection?.spotlight_style || 'default',
|
|
analytics_enabled: collection?.analytics_enabled !== false,
|
|
presentation_style: collection?.presentation_style || 'standard',
|
|
emphasis_mode: collection?.emphasis_mode || 'balanced',
|
|
theme_token: collection?.theme_token || 'default',
|
|
series_key: collection?.series_key || '',
|
|
series_title: collection?.series_title || '',
|
|
series_description: collection?.series_description || '',
|
|
series_order: collection?.series_order || '',
|
|
campaign_key: collection?.campaign_key || '',
|
|
campaign_label: collection?.campaign_label || '',
|
|
commercial_eligibility: Boolean(collection?.commercial_eligibility),
|
|
promotion_tier: collection?.promotion_tier || '',
|
|
sponsorship_label: collection?.sponsorship_label || '',
|
|
partner_label: collection?.partner_label || '',
|
|
monetization_ready_status: collection?.monetization_ready_status || '',
|
|
brand_safe_status: collection?.brand_safe_status || '',
|
|
editorial_notes: collection?.editorial_notes || '',
|
|
staff_commercial_notes: collection?.staff_commercial_notes || '',
|
|
published_at: isoToLocalInput(collection?.published_at),
|
|
unpublished_at: isoToLocalInput(collection?.unpublished_at),
|
|
archived_at: isoToLocalInput(collection?.archived_at),
|
|
expired_at: isoToLocalInput(collection?.expired_at),
|
|
editorial_owner_mode: collection?.owner?.mode || 'creator',
|
|
editorial_owner_username: collection?.owner?.username || '',
|
|
editorial_owner_label: collection?.type === 'editorial' && collection?.owner?.is_system ? (collection?.owner?.name || '') : '',
|
|
visibility: collection?.visibility || 'public',
|
|
mode: resolvedInitialMode,
|
|
sort_mode: collection?.sort_mode || (resolvedInitialMode === 'smart' ? 'newest' : 'manual'),
|
|
cover_artwork_id: collection?.cover_artwork_id || '',
|
|
})
|
|
const [slugTouched, setSlugTouched] = useState(Boolean(collection?.slug))
|
|
const [smartRules, setSmartRules] = useState(normalizeSmartRules(collection?.smart_rules_json, resolvedInitialMode))
|
|
const [smartPreview, setSmartPreview] = useState(initialSmartPreview || null)
|
|
const [layoutModules, setLayoutModules] = useState(normalizeLayoutModules(collection?.layout_modules || initialLayoutModules || []))
|
|
const [attached, setAttached] = useState(attachedArtworks || [])
|
|
const [available, setAvailable] = useState(availableArtworks || [])
|
|
const [members, setMembers] = useState(initialMembers || [])
|
|
const [submissions, setSubmissions] = useState(initialSubmissions || [])
|
|
const [comments] = useState(initialComments || [])
|
|
const [duplicateCandidates, setDuplicateCandidates] = useState(initialDuplicateCandidates || [])
|
|
const [canonicalTarget, setCanonicalTarget] = useState(initialCanonicalTarget || null)
|
|
const [linkedCollections, setLinkedCollections] = useState(initialLinkedCollections || [])
|
|
const [linkedCollectionOptions, setLinkedCollectionOptions] = useState(initialLinkedCollectionOptions || [])
|
|
const [selectedLinkedCollectionId, setSelectedLinkedCollectionId] = useState(initialLinkedCollectionOptions?.[0]?.id || '')
|
|
const [entityLinks, setEntityLinks] = useState(initialEntityLinks || [])
|
|
const [entityLinkOptions, setEntityLinkOptions] = useState(initialEntityLinkOptions || {})
|
|
const initialEntitySelection = useMemo(() => firstEntitySelection(initialEntityLinkOptions || {}), [initialEntityLinkOptions])
|
|
const [selectedEntityType, setSelectedEntityType] = useState(initialEntitySelection.type)
|
|
const [selectedEntityId, setSelectedEntityId] = useState(initialEntitySelection.id)
|
|
const [entityRelationship, setEntityRelationship] = useState('')
|
|
const [activeTab, setActiveTab] = useState(mode === 'edit' ? 'details' : 'details')
|
|
const [selectedIds, setSelectedIds] = useState([])
|
|
const [search, setSearch] = useState('')
|
|
const [inviteUsername, setInviteUsername] = useState('')
|
|
const [inviteRole, setInviteRole] = useState('contributor')
|
|
const [inviteExpiryMode, setInviteExpiryMode] = useState('default')
|
|
const [inviteCustomExpiry, setInviteCustomExpiry] = useState('')
|
|
const [saving, setSaving] = useState(false)
|
|
const [searching, setSearching] = useState(false)
|
|
const [previewing, setPreviewing] = useState(false)
|
|
const [featureBusy, setFeatureBusy] = useState(false)
|
|
const [aiState, setAiState] = useState({ busy: '', title: null, summary: null, cover: null, grouping: null, relatedArtworks: null, tags: null, seoDescription: null, smartRulesExplanation: null, splitThemes: null, mergeIdea: null, qualityReview: null })
|
|
const [orderDirty, setOrderDirty] = useState(false)
|
|
const [errors, setErrors] = useState({})
|
|
const [notice, setNotice] = useState('')
|
|
|
|
useEffect(() => {
|
|
const nextMode = collection?.mode || initialMode || 'manual'
|
|
|
|
setCollectionState(collection)
|
|
setForm({
|
|
title: collection?.title || '',
|
|
slug: collection?.slug || '',
|
|
subtitle: collection?.subtitle || '',
|
|
summary: collection?.summary || '',
|
|
description: collection?.description || '',
|
|
lifecycle_state: collection?.lifecycle_state || 'draft',
|
|
type: collection?.type || 'personal',
|
|
collaboration_mode: collection?.collaboration_mode || 'closed',
|
|
allow_submissions: Boolean(collection?.allow_submissions),
|
|
allow_comments: collection?.allow_comments !== false,
|
|
allow_saves: collection?.allow_saves !== false,
|
|
event_key: collection?.event_key || '',
|
|
event_label: collection?.event_label || '',
|
|
season_key: collection?.season_key || '',
|
|
banner_text: collection?.banner_text || '',
|
|
badge_label: collection?.badge_label || '',
|
|
spotlight_style: collection?.spotlight_style || 'default',
|
|
analytics_enabled: collection?.analytics_enabled !== false,
|
|
presentation_style: collection?.presentation_style || 'standard',
|
|
emphasis_mode: collection?.emphasis_mode || 'balanced',
|
|
theme_token: collection?.theme_token || 'default',
|
|
series_key: collection?.series_key || '',
|
|
series_title: collection?.series_title || '',
|
|
series_description: collection?.series_description || '',
|
|
series_order: collection?.series_order || '',
|
|
campaign_key: collection?.campaign_key || '',
|
|
campaign_label: collection?.campaign_label || '',
|
|
commercial_eligibility: Boolean(collection?.commercial_eligibility),
|
|
promotion_tier: collection?.promotion_tier || '',
|
|
sponsorship_label: collection?.sponsorship_label || '',
|
|
partner_label: collection?.partner_label || '',
|
|
monetization_ready_status: collection?.monetization_ready_status || '',
|
|
brand_safe_status: collection?.brand_safe_status || '',
|
|
editorial_notes: collection?.editorial_notes || '',
|
|
staff_commercial_notes: collection?.staff_commercial_notes || '',
|
|
published_at: isoToLocalInput(collection?.published_at),
|
|
unpublished_at: isoToLocalInput(collection?.unpublished_at),
|
|
archived_at: isoToLocalInput(collection?.archived_at),
|
|
expired_at: isoToLocalInput(collection?.expired_at),
|
|
editorial_owner_mode: collection?.owner?.mode || 'creator',
|
|
editorial_owner_username: collection?.owner?.username || '',
|
|
editorial_owner_label: collection?.type === 'editorial' && collection?.owner?.is_system ? (collection?.owner?.name || '') : '',
|
|
visibility: collection?.visibility || 'public',
|
|
mode: nextMode,
|
|
sort_mode: collection?.sort_mode || (nextMode === 'smart' ? 'newest' : 'manual'),
|
|
cover_artwork_id: collection?.cover_artwork_id || '',
|
|
})
|
|
setSmartRules(normalizeSmartRules(collection?.smart_rules_json, nextMode))
|
|
setLayoutModules(normalizeLayoutModules(collection?.layout_modules || initialLayoutModules || []))
|
|
setSmartPreview(initialSmartPreview || null)
|
|
setAttached(attachedArtworks || [])
|
|
setAvailable(availableArtworks || [])
|
|
setMembers(initialMembers || [])
|
|
setSubmissions(initialSubmissions || [])
|
|
setDuplicateCandidates(initialDuplicateCandidates || [])
|
|
setCanonicalTarget(initialCanonicalTarget || null)
|
|
setLinkedCollections(initialLinkedCollections || [])
|
|
setLinkedCollectionOptions(initialLinkedCollectionOptions || [])
|
|
setSelectedLinkedCollectionId(initialLinkedCollectionOptions?.[0]?.id || '')
|
|
setEntityLinks(initialEntityLinks || [])
|
|
setEntityLinkOptions(initialEntityLinkOptions || {})
|
|
const nextEntitySelection = firstEntitySelection(initialEntityLinkOptions || {})
|
|
setSelectedEntityType(nextEntitySelection.type)
|
|
setSelectedEntityId(nextEntitySelection.id)
|
|
setEntityRelationship('')
|
|
setActiveTab('details')
|
|
setSelectedIds([])
|
|
setAiState({ busy: '', title: null, summary: null, cover: null, grouping: null, relatedArtworks: null, tags: null, seoDescription: null, smartRulesExplanation: null, splitThemes: null, mergeIdea: null, qualityReview: null })
|
|
setOrderDirty(false)
|
|
setErrors({})
|
|
setNotice('')
|
|
}, [collection?.id, attachedArtworks, availableArtworks, initialCanonicalTarget, initialDuplicateCandidates, initialEntityLinkOptions, initialEntityLinks, initialLayoutModules, initialLinkedCollectionOptions, initialLinkedCollections, initialMembers, initialSubmissions, initialMode, initialSmartPreview])
|
|
|
|
const attachedCoverOptions = useMemo(
|
|
() => attached.map((artwork) => ({ id: artwork.id, title: artwork.title })),
|
|
[attached]
|
|
)
|
|
const inviteExpiryOptions = useMemo(() => buildInviteExpiryOptions(inviteExpiryDays), [inviteExpiryDays])
|
|
|
|
const smartRuleCount = smartRules?.rules?.length || 0
|
|
const isSmartMode = form.mode === 'smart'
|
|
const canFeature = mode === 'edit' && form.visibility === 'public' && (collectionState?.feature_url || collectionState?.unfeature_url || endpoints?.feature)
|
|
const featuredCountLabel = collectionState?.is_featured ? 'Featured' : `Up to ${featuredLimit} featured collections`
|
|
const canModerate = mode === 'edit' && Boolean(viewer?.is_admin)
|
|
const tabs = [
|
|
{ id: 'details', label: 'Details', icon: 'fa-pen-ruler' },
|
|
{ id: 'artworks', label: 'Artworks', icon: 'fa-images' },
|
|
{ id: 'members', label: 'Members', icon: 'fa-user-group' },
|
|
{ id: 'submissions', label: 'Submissions', icon: 'fa-inbox' },
|
|
{ id: 'settings', label: 'Settings', icon: 'fa-sliders' },
|
|
{ id: 'discussion', label: 'Discussion', icon: 'fa-comments' },
|
|
{ id: 'ai', label: 'AI Suggestions', icon: 'fa-wand-magic-sparkles' },
|
|
].concat(canModerate ? [{ id: 'moderation', label: 'Moderation', icon: 'fa-shield-halved' }] : [])
|
|
|
|
function applyCollectionPayload(nextCollection) {
|
|
if (!nextCollection) return
|
|
|
|
setCollectionState(nextCollection)
|
|
setForm((current) => ({
|
|
...current,
|
|
title: nextCollection.title ?? current.title,
|
|
slug: nextCollection.slug ?? current.slug,
|
|
subtitle: nextCollection.subtitle || '',
|
|
summary: nextCollection.summary || '',
|
|
description: nextCollection.description || '',
|
|
lifecycle_state: nextCollection.lifecycle_state || current.lifecycle_state,
|
|
type: nextCollection.type || current.type,
|
|
collaboration_mode: nextCollection.collaboration_mode || current.collaboration_mode,
|
|
allow_submissions: Boolean(nextCollection.allow_submissions),
|
|
allow_comments: nextCollection.allow_comments !== false,
|
|
allow_saves: nextCollection.allow_saves !== false,
|
|
event_key: nextCollection.event_key ?? '',
|
|
event_label: nextCollection.event_label ?? '',
|
|
season_key: nextCollection.season_key ?? '',
|
|
banner_text: nextCollection.banner_text ?? '',
|
|
badge_label: nextCollection.badge_label ?? '',
|
|
spotlight_style: nextCollection.spotlight_style || 'default',
|
|
analytics_enabled: nextCollection.analytics_enabled !== false,
|
|
presentation_style: nextCollection.presentation_style || current.presentation_style,
|
|
emphasis_mode: nextCollection.emphasis_mode || current.emphasis_mode,
|
|
theme_token: nextCollection.theme_token || current.theme_token,
|
|
series_key: nextCollection.series_key ?? '',
|
|
series_title: nextCollection.series_title ?? '',
|
|
series_description: nextCollection.series_description ?? '',
|
|
series_order: nextCollection.series_order ?? '',
|
|
campaign_key: nextCollection.campaign_key ?? '',
|
|
campaign_label: nextCollection.campaign_label ?? '',
|
|
commercial_eligibility: Boolean(nextCollection.commercial_eligibility),
|
|
promotion_tier: nextCollection.promotion_tier ?? '',
|
|
sponsorship_label: nextCollection.sponsorship_label ?? '',
|
|
partner_label: nextCollection.partner_label ?? '',
|
|
monetization_ready_status: nextCollection.monetization_ready_status ?? '',
|
|
brand_safe_status: nextCollection.brand_safe_status ?? '',
|
|
editorial_notes: nextCollection.editorial_notes ?? '',
|
|
staff_commercial_notes: nextCollection.staff_commercial_notes ?? '',
|
|
published_at: isoToLocalInput(nextCollection.published_at) || '',
|
|
unpublished_at: isoToLocalInput(nextCollection.unpublished_at) || '',
|
|
archived_at: isoToLocalInput(nextCollection.archived_at) || '',
|
|
expired_at: isoToLocalInput(nextCollection.expired_at) || '',
|
|
editorial_owner_mode: nextCollection?.owner?.mode || current.editorial_owner_mode,
|
|
editorial_owner_username: nextCollection?.owner?.username || current.editorial_owner_username,
|
|
editorial_owner_label: nextCollection?.type === 'editorial' && nextCollection?.owner?.is_system ? (nextCollection?.owner?.name || current.editorial_owner_label) : current.editorial_owner_label,
|
|
visibility: nextCollection.visibility || current.visibility,
|
|
mode: nextCollection.mode || current.mode,
|
|
sort_mode: nextCollection.sort_mode || current.sort_mode,
|
|
cover_artwork_id: nextCollection.cover_artwork_id || '',
|
|
}))
|
|
|
|
if (Array.isArray(nextCollection.layout_modules)) {
|
|
setLayoutModules(normalizeLayoutModules(nextCollection.layout_modules))
|
|
}
|
|
}
|
|
|
|
function updateForm(name, value) {
|
|
setForm((current) => {
|
|
const next = { ...current, [name]: value }
|
|
|
|
if (name === 'title' && !slugTouched) {
|
|
next.slug = slugify(value)
|
|
}
|
|
|
|
if (name === 'mode') {
|
|
next.sort_mode = value === 'smart'
|
|
? (smartRules?.sort || 'newest')
|
|
: (current.sort_mode === 'newest' || current.sort_mode === 'oldest' || current.sort_mode === 'popular' ? 'manual' : current.sort_mode || 'manual')
|
|
|
|
if (value === 'smart') {
|
|
next.cover_artwork_id = ''
|
|
}
|
|
}
|
|
|
|
return next
|
|
})
|
|
|
|
if (name === 'mode') {
|
|
setSmartRules((current) => {
|
|
if (value !== 'smart') {
|
|
return current
|
|
}
|
|
|
|
const normalized = normalizeSmartRules(current, 'smart')
|
|
if (normalized.rules.length > 0) {
|
|
return normalized
|
|
}
|
|
|
|
return {
|
|
...normalized,
|
|
rules: [createRule()],
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function updateSmartRule(index, updater) {
|
|
setSmartRules((current) => ({
|
|
...current,
|
|
rules: current.rules.map((rule, ruleIndex) => (
|
|
ruleIndex === index ? updater(rule) : rule
|
|
)),
|
|
}))
|
|
}
|
|
|
|
function addRule() {
|
|
const defaultField = smartRuleOptions?.fields?.[0]?.value || 'tags'
|
|
setSmartRules((current) => ({
|
|
...current,
|
|
rules: [...current.rules, createRule(defaultField)],
|
|
}))
|
|
}
|
|
|
|
function removeRule(index) {
|
|
setSmartRules((current) => ({
|
|
...current,
|
|
rules: current.rules.filter((_, ruleIndex) => ruleIndex !== index),
|
|
}))
|
|
}
|
|
|
|
function buildPayload() {
|
|
return {
|
|
...form,
|
|
sort_mode: isSmartMode ? (smartRules.sort || form.sort_mode || 'newest') : form.sort_mode,
|
|
cover_artwork_id: isSmartMode ? null : (form.cover_artwork_id || null),
|
|
published_at: localInputToIso(form.published_at),
|
|
unpublished_at: localInputToIso(form.unpublished_at),
|
|
archived_at: localInputToIso(form.archived_at),
|
|
expired_at: localInputToIso(form.expired_at),
|
|
smart_rules_json: isSmartMode
|
|
? {
|
|
match: smartRules.match,
|
|
sort: smartRules.sort,
|
|
rules: smartRules.rules,
|
|
}
|
|
: null,
|
|
layout_modules_json: layoutModules.map((module) => ({
|
|
key: module.key,
|
|
enabled: module.enabled,
|
|
slot: module.slot,
|
|
})),
|
|
}
|
|
}
|
|
|
|
function updateLayoutModule(key, updates) {
|
|
setLayoutModules((current) => current.map((module) => (
|
|
module.key === key ? { ...module, ...updates } : module
|
|
)))
|
|
}
|
|
|
|
function moveLayoutModule(index, direction) {
|
|
const nextIndex = index + direction
|
|
if (nextIndex < 0 || nextIndex >= layoutModules.length) return
|
|
|
|
setLayoutModules((current) => {
|
|
const next = [...current]
|
|
const swap = next[index]
|
|
next[index] = next[nextIndex]
|
|
next[nextIndex] = swap
|
|
return next
|
|
})
|
|
}
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault()
|
|
setSaving(true)
|
|
setErrors({})
|
|
setNotice('')
|
|
|
|
try {
|
|
const payload = await requestJson(mode === 'create' ? endpoints.store : endpoints.update, {
|
|
method: mode === 'create' ? 'POST' : 'PATCH',
|
|
body: buildPayload(),
|
|
})
|
|
|
|
if (payload.redirect && mode === 'create') {
|
|
window.location.assign(payload.redirect)
|
|
return
|
|
}
|
|
|
|
if (payload.collection) {
|
|
applyCollectionPayload(payload.collection)
|
|
if (payload.collection.smart_rules_json) {
|
|
setSmartRules(normalizeSmartRules(payload.collection.smart_rules_json, payload.collection.mode))
|
|
}
|
|
}
|
|
|
|
if (payload.attachedArtworks) {
|
|
setAttached(payload.attachedArtworks)
|
|
}
|
|
if (payload.members) {
|
|
setMembers(payload.members)
|
|
}
|
|
if (payload.submissions) {
|
|
setSubmissions(payload.submissions)
|
|
}
|
|
|
|
setNotice(isSmartMode ? 'Collection saved and smart rules updated.' : 'Collection updated.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleSmartPreview() {
|
|
if (!endpoints?.smartPreview) return
|
|
|
|
setPreviewing(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.smartPreview, {
|
|
method: 'POST',
|
|
body: {
|
|
smart_rules_json: {
|
|
match: smartRules.match,
|
|
sort: smartRules.sort,
|
|
rules: smartRules.rules,
|
|
},
|
|
},
|
|
})
|
|
setSmartPreview(payload.preview || null)
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setPreviewing(false)
|
|
}
|
|
}
|
|
|
|
async function handleSearch(event) {
|
|
event.preventDefault()
|
|
if (!endpoints?.available) return
|
|
|
|
setSearching(true)
|
|
try {
|
|
const url = `${endpoints.available}?search=${encodeURIComponent(search)}`
|
|
const payload = await requestJson(url)
|
|
setAvailable(payload?.data || [])
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSearching(false)
|
|
}
|
|
}
|
|
|
|
async function handleAiSuggestion(kind) {
|
|
const endpointMap = {
|
|
title: endpoints?.aiSuggestTitle,
|
|
summary: endpoints?.aiSuggestSummary,
|
|
cover: endpoints?.aiSuggestCover,
|
|
grouping: endpoints?.aiSuggestGrouping,
|
|
relatedArtworks: endpoints?.aiSuggestRelatedArtworks,
|
|
tags: endpoints?.aiSuggestTags,
|
|
seoDescription: endpoints?.aiSuggestSeoDescription,
|
|
smartRulesExplanation: endpoints?.aiExplainSmartRules,
|
|
splitThemes: endpoints?.aiSuggestSplitThemes,
|
|
mergeIdea: endpoints?.aiSuggestMergeIdea,
|
|
}
|
|
|
|
const url = endpointMap[kind]
|
|
if (!url) return
|
|
|
|
setAiState((current) => ({ ...current, busy: kind }))
|
|
|
|
try {
|
|
const payload = await requestJson(url, {
|
|
method: 'POST',
|
|
body: { draft: buildPayload() },
|
|
})
|
|
|
|
setAiState((current) => ({
|
|
...current,
|
|
busy: '',
|
|
[kind]: payload?.suggestion || null,
|
|
}))
|
|
} catch (error) {
|
|
setAiState((current) => ({ ...current, busy: '' }))
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
}
|
|
}
|
|
|
|
async function handleAiQualityReview() {
|
|
if (!endpoints?.aiQualityReview) return
|
|
|
|
setAiState((current) => ({ ...current, busy: 'qualityReview' }))
|
|
|
|
try {
|
|
const payload = await requestJson(endpoints.aiQualityReview)
|
|
setAiState((current) => ({
|
|
...current,
|
|
busy: '',
|
|
qualityReview: payload?.review || null,
|
|
}))
|
|
} catch (error) {
|
|
setAiState((current) => ({ ...current, busy: '' }))
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
}
|
|
}
|
|
|
|
function applyAiTitle() {
|
|
if (!aiState?.title?.title) return
|
|
updateForm('title', aiState.title.title)
|
|
}
|
|
|
|
function applyAiSummary() {
|
|
if (!aiState?.summary?.summary) return
|
|
updateForm('summary', aiState.summary.summary)
|
|
}
|
|
|
|
function applyAiCover() {
|
|
const artworkId = aiState?.cover?.artwork?.id
|
|
if (!artworkId || isSmartMode) return
|
|
updateForm('cover_artwork_id', artworkId)
|
|
}
|
|
|
|
function applyAiRelatedArtworks() {
|
|
const artworkIds = Array.isArray(aiState?.relatedArtworks?.artworks)
|
|
? aiState.relatedArtworks.artworks.map((artwork) => artwork.id)
|
|
: []
|
|
|
|
if (!artworkIds.length) return
|
|
|
|
setSelectedIds((current) => Array.from(new Set([...current, ...artworkIds])))
|
|
}
|
|
|
|
function toggleSelected(artworkId) {
|
|
setSelectedIds((current) => (
|
|
current.includes(artworkId)
|
|
? current.filter((id) => id !== artworkId)
|
|
: [...current, artworkId]
|
|
))
|
|
}
|
|
|
|
async function handleAttachSelected() {
|
|
if (!selectedIds.length || !endpoints?.attach) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.attach, {
|
|
method: 'POST',
|
|
body: { artwork_ids: selectedIds },
|
|
})
|
|
|
|
setCollectionState(payload.collection)
|
|
setAttached(payload.attachedArtworks || [])
|
|
setAvailable(payload.availableArtworks || [])
|
|
setSelectedIds([])
|
|
setNotice('Artworks added to collection.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleRemoveArtwork(artwork) {
|
|
if (!artwork?.remove_url) return
|
|
if (!window.confirm(`Remove "${artwork.title}" from this collection?`)) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(artwork.remove_url, { method: 'DELETE' })
|
|
setCollectionState(payload.collection)
|
|
setAttached(payload.attachedArtworks || [])
|
|
setAvailable(payload.availableArtworks || [])
|
|
setForm((current) => ({
|
|
...current,
|
|
cover_artwork_id: payload.collection?.cover_artwork_id || '',
|
|
}))
|
|
setNotice('Artwork removed from collection.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
function moveArtwork(index, direction) {
|
|
const nextIndex = index + direction
|
|
if (nextIndex < 0 || nextIndex >= attached.length) return
|
|
|
|
setAttached((current) => {
|
|
const next = [...current]
|
|
const temp = next[index]
|
|
next[index] = next[nextIndex]
|
|
next[nextIndex] = temp
|
|
return next
|
|
})
|
|
setOrderDirty(true)
|
|
}
|
|
|
|
async function saveArtworkOrder() {
|
|
if (!orderDirty || !endpoints?.reorder) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.reorder, {
|
|
method: 'POST',
|
|
body: { ordered_artwork_ids: attached.map((artwork) => artwork.id) },
|
|
})
|
|
setCollectionState(payload.collection)
|
|
setAttached(payload.attachedArtworks || [])
|
|
setOrderDirty(false)
|
|
setNotice('Artwork order saved.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleToggleFeature() {
|
|
const isFeatured = Boolean(collectionState?.is_featured)
|
|
const url = isFeatured ? endpoints?.unfeature : endpoints?.feature
|
|
if (!url) return
|
|
|
|
setFeatureBusy(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(url, {
|
|
method: isFeatured ? 'DELETE' : 'POST',
|
|
})
|
|
if (payload.collection) {
|
|
applyCollectionPayload(payload.collection)
|
|
}
|
|
setNotice(isFeatured ? 'Collection removed from featured placement.' : 'Collection featured on your profile.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setFeatureBusy(false)
|
|
}
|
|
}
|
|
|
|
async function syncLinkedCollections(nextIds, successMessage) {
|
|
if (!endpoints?.syncLinkedCollections) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.syncLinkedCollections, {
|
|
method: 'POST',
|
|
body: {
|
|
related_collection_ids: nextIds,
|
|
},
|
|
})
|
|
|
|
if (payload?.collection) {
|
|
applyCollectionPayload(payload.collection)
|
|
}
|
|
|
|
const nextLinkedCollections = payload?.linkedCollections || []
|
|
const nextOptions = payload?.linkedCollectionOptions || []
|
|
|
|
setLinkedCollections(nextLinkedCollections)
|
|
setLinkedCollectionOptions(nextOptions)
|
|
setSelectedLinkedCollectionId((current) => {
|
|
if (current && nextOptions.some((option) => String(option.id) === String(current))) {
|
|
return current
|
|
}
|
|
|
|
return nextOptions[0]?.id || ''
|
|
})
|
|
setNotice(successMessage)
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleAddLinkedCollection() {
|
|
if (!selectedLinkedCollectionId) return
|
|
|
|
const nextIds = Array.from(new Set([
|
|
...linkedCollections.map((item) => item.id),
|
|
Number(selectedLinkedCollectionId),
|
|
]))
|
|
|
|
await syncLinkedCollections(nextIds, 'Linked collections updated.')
|
|
}
|
|
|
|
async function handleRemoveLinkedCollection(collectionId) {
|
|
const nextIds = linkedCollections
|
|
.map((item) => item.id)
|
|
.filter((id) => Number(id) !== Number(collectionId))
|
|
|
|
await syncLinkedCollections(nextIds, 'Linked collections updated.')
|
|
}
|
|
|
|
async function syncEntityLinks(nextLinks, successMessage) {
|
|
if (!endpoints?.syncEntityLinks) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.syncEntityLinks, {
|
|
method: 'POST',
|
|
body: {
|
|
entity_links: nextLinks,
|
|
},
|
|
})
|
|
|
|
if (payload?.collection) {
|
|
applyCollectionPayload(payload.collection)
|
|
}
|
|
|
|
const nextEntityLinks = payload?.entityLinks || []
|
|
const nextOptions = payload?.entityLinkOptions || {}
|
|
|
|
setEntityLinks(nextEntityLinks)
|
|
setEntityLinkOptions(nextOptions)
|
|
setSelectedEntityId((current) => {
|
|
const optionsForType = Array.isArray(nextOptions[selectedEntityType]) ? nextOptions[selectedEntityType] : []
|
|
if (current && optionsForType.some((option) => String(option.id) === String(current))) {
|
|
return current
|
|
}
|
|
|
|
return optionsForType[0]?.id || ''
|
|
})
|
|
setEntityRelationship('')
|
|
setNotice(successMessage)
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleAddEntityLink() {
|
|
if (!selectedEntityType || !selectedEntityId) return
|
|
|
|
const nextLinks = [
|
|
...entityLinks.map((item) => ({
|
|
linked_type: item.linked_type,
|
|
linked_id: item.linked_id,
|
|
relationship_type: item.relationship_type || null,
|
|
})),
|
|
{
|
|
linked_type: selectedEntityType,
|
|
linked_id: Number(selectedEntityId),
|
|
relationship_type: entityRelationship.trim() || null,
|
|
},
|
|
]
|
|
|
|
await syncEntityLinks(nextLinks, 'Entity links updated.')
|
|
}
|
|
|
|
async function handleRemoveEntityLink(linkId) {
|
|
const nextLinks = entityLinks
|
|
.filter((item) => Number(item.id) !== Number(linkId))
|
|
.map((item) => ({
|
|
linked_type: item.linked_type,
|
|
linked_id: item.linked_id,
|
|
relationship_type: item.relationship_type || null,
|
|
}))
|
|
|
|
await syncEntityLinks(nextLinks, 'Entity links updated.')
|
|
}
|
|
|
|
function applyMergeReviewPayload(payload, successMessage) {
|
|
if (payload?.collection) {
|
|
applyCollectionPayload(payload.collection)
|
|
}
|
|
|
|
if (payload?.source) {
|
|
applyCollectionPayload(payload.source)
|
|
}
|
|
|
|
if (Object.prototype.hasOwnProperty.call(payload || {}, 'duplicate_candidates')) {
|
|
setDuplicateCandidates(Array.isArray(payload?.duplicate_candidates) ? payload.duplicate_candidates : [])
|
|
}
|
|
|
|
if (Object.prototype.hasOwnProperty.call(payload || {}, 'canonical_target')) {
|
|
setCanonicalTarget(payload?.canonical_target || null)
|
|
}
|
|
|
|
if (successMessage) {
|
|
setNotice(successMessage)
|
|
}
|
|
}
|
|
|
|
async function handleCanonicalizeCandidate(candidate) {
|
|
const targetId = candidate?.collection?.id
|
|
if (!targetId || !endpoints?.canonicalize) return
|
|
if (!window.confirm(`Designate "${candidate.collection.title}" as the canonical target for this collection?`)) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.canonicalize, {
|
|
method: 'POST',
|
|
body: { target_collection_id: targetId },
|
|
})
|
|
|
|
applyMergeReviewPayload(payload, 'Canonical target updated.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleMergeCandidate(candidate) {
|
|
const targetId = candidate?.collection?.id
|
|
if (!targetId || !endpoints?.merge) return
|
|
if (!window.confirm(`Merge this collection into "${candidate.collection.title}"? This archives the current collection and moves artworks into the target.`)) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.merge, {
|
|
method: 'POST',
|
|
body: { target_collection_id: targetId },
|
|
})
|
|
|
|
applyMergeReviewPayload(payload, 'Collection merged into canonical target.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleRejectDuplicateCandidate(candidate) {
|
|
const targetId = candidate?.collection?.id
|
|
if (!targetId || !endpoints?.rejectDuplicate) return
|
|
if (!window.confirm(`Mark "${candidate.collection.title}" as not a duplicate?`)) return
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.rejectDuplicate, {
|
|
method: 'POST',
|
|
body: { target_collection_id: targetId },
|
|
})
|
|
|
|
applyMergeReviewPayload(payload, 'Duplicate candidate dismissed.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleDeleteCollection() {
|
|
if (!endpoints?.delete) return
|
|
if (!window.confirm('Delete this collection? Artworks will remain untouched.')) return
|
|
|
|
setSaving(true)
|
|
try {
|
|
const payload = await requestJson(endpoints.delete, { method: 'DELETE' })
|
|
window.location.assign(payload.redirect)
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleInviteMember(event) {
|
|
event.preventDefault()
|
|
if (!inviteUsername || !endpoints?.inviteMember) return
|
|
|
|
const body = { username: inviteUsername, role: inviteRole }
|
|
|
|
if (inviteExpiryMode === 'custom') {
|
|
const customExpiryIso = localInputToIso(inviteCustomExpiry)
|
|
|
|
if (!customExpiryIso) {
|
|
setErrors({ expires_at: ['Choose a valid invite expiry date and time.'] })
|
|
return
|
|
}
|
|
|
|
body.expires_at = customExpiryIso
|
|
} else if (inviteExpiryMode !== 'default') {
|
|
body.expires_in_days = Number.parseInt(inviteExpiryMode, 10)
|
|
}
|
|
|
|
setSaving(true)
|
|
setErrors({})
|
|
try {
|
|
const payload = await requestJson(endpoints.inviteMember, {
|
|
method: 'POST',
|
|
body,
|
|
})
|
|
setMembers(payload?.members || [])
|
|
setInviteUsername('')
|
|
setInviteExpiryMode('default')
|
|
setInviteCustomExpiry('')
|
|
setNotice('Collaborator invited.')
|
|
} catch (error) {
|
|
setErrors(error?.payload?.errors || { form: [error.message] })
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleMemberRoleChange(member, role) {
|
|
const url = endpoints?.memberUpdatePattern?.replace('__MEMBER__', member.id)
|
|
if (!url) return
|
|
|
|
const payload = await requestJson(url, {
|
|
method: 'PATCH',
|
|
body: { role },
|
|
})
|
|
setMembers(payload?.members || [])
|
|
}
|
|
|
|
async function handleRemoveMember(member) {
|
|
const url = endpoints?.memberDeletePattern?.replace('__MEMBER__', member.id)
|
|
if (!url) return
|
|
|
|
const payload = await requestJson(url, { method: 'DELETE' })
|
|
setMembers(payload?.members || [])
|
|
}
|
|
|
|
async function handleTransferMember(member) {
|
|
const url = endpoints?.memberTransferPattern?.replace('__MEMBER__', member.id)
|
|
if (!url) return
|
|
if (!window.confirm(`Transfer collection ownership to @${member?.user?.username}? You will keep editor access.`)) return
|
|
|
|
const payload = await requestJson(url, { method: 'POST' })
|
|
applyCollectionPayload(payload?.collection)
|
|
setMembers(payload?.members || [])
|
|
setNotice(`Ownership transferred to @${member?.user?.username}.`)
|
|
}
|
|
|
|
async function handleAcceptMember(member) {
|
|
const url = endpoints?.acceptMemberPattern?.replace('__MEMBER__', member.id)
|
|
if (!url) return
|
|
|
|
const payload = await requestJson(url, { method: 'POST' })
|
|
setMembers(payload?.members || [])
|
|
}
|
|
|
|
async function handleDeclineMember(member) {
|
|
const url = endpoints?.declineMemberPattern?.replace('__MEMBER__', member.id)
|
|
if (!url) return
|
|
|
|
const payload = await requestJson(url, { method: 'POST' })
|
|
setMembers(payload?.members || [])
|
|
}
|
|
|
|
async function handleSubmissionAction(submission, action) {
|
|
const url = action === 'approve'
|
|
? endpoints?.submissionApprovePattern?.replace('__SUBMISSION__', submission.id)
|
|
: action === 'reject'
|
|
? endpoints?.submissionRejectPattern?.replace('__SUBMISSION__', submission.id)
|
|
: endpoints?.submissionDeletePattern?.replace('__SUBMISSION__', submission.id)
|
|
|
|
if (!url) return
|
|
|
|
const payload = await requestJson(url, { method: action === 'withdraw' ? 'DELETE' : 'POST' })
|
|
setSubmissions(payload?.submissions || [])
|
|
}
|
|
|
|
async function handleModerationStatusChange(value) {
|
|
if (!endpoints?.adminModerationUpdate) return
|
|
|
|
const payload = await requestJson(endpoints.adminModerationUpdate, {
|
|
method: 'PATCH',
|
|
body: { moderation_status: value },
|
|
})
|
|
|
|
applyCollectionPayload(payload?.collection)
|
|
setNotice(`Moderation state updated to ${value.replace('_', ' ')}.`)
|
|
}
|
|
|
|
async function handleModerationToggle(key, value) {
|
|
if (!endpoints?.adminInteractionsUpdate) return
|
|
|
|
const payload = await requestJson(endpoints.adminInteractionsUpdate, {
|
|
method: 'PATCH',
|
|
body: { [key]: value },
|
|
})
|
|
|
|
applyCollectionPayload(payload?.collection)
|
|
setNotice('Collection interaction settings updated.')
|
|
}
|
|
|
|
async function handleAdminUnfeature() {
|
|
if (!endpoints?.adminUnfeature) return
|
|
|
|
const payload = await requestJson(endpoints.adminUnfeature, {
|
|
method: 'POST',
|
|
})
|
|
|
|
applyCollectionPayload(payload?.collection)
|
|
setNotice('Collection removed from featured placement by moderation action.')
|
|
}
|
|
|
|
async function handleAdminRemoveMember(member) {
|
|
const url = endpoints?.adminMemberRemovePattern?.replace('__MEMBER__', member.id)
|
|
if (!url) return
|
|
|
|
const payload = await requestJson(url, { method: 'DELETE' })
|
|
applyCollectionPayload(payload?.collection)
|
|
setMembers(payload?.members || [])
|
|
setNotice('Collaborator removed by moderation action.')
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{mode === 'create' ? 'Create Collection — Skinbase Nova' : `${collectionState?.title || 'Collection'} — Manage Collection`}</title>
|
|
<meta name="robots" content="noindex,nofollow" />
|
|
</Head>
|
|
|
|
<div className="relative min-h-screen overflow-hidden pb-16">
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[34rem] opacity-95"
|
|
style={{
|
|
background: 'radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 32%), radial-gradient(circle at 82% 10%, rgba(249,115,22,0.18), transparent 28%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #08111f 100%)',
|
|
}}
|
|
/>
|
|
<div className="mx-auto max-w-7xl px-4 pt-8 md:px-6">
|
|
<div className="flex flex-wrap items-center gap-3 text-sm text-slate-300">
|
|
<a href={endpoints?.profileCollections || '#'} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-arrow-left fa-fw text-[11px]" />
|
|
Back to profile collections
|
|
</a>
|
|
{collectionState?.public_url ? (
|
|
<a href={collectionState.public_url} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 font-semibold text-sky-100 transition hover:bg-sky-400/15">
|
|
<i className="fa-solid fa-eye fa-fw text-[11px]" />
|
|
View public page
|
|
</a>
|
|
) : null}
|
|
{mode === 'edit' && endpoints?.dashboard ? (
|
|
<a href={endpoints.dashboard} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-chart-pie fa-fw text-[11px]" />
|
|
Dashboard
|
|
</a>
|
|
) : null}
|
|
{mode === 'edit' && endpoints?.analytics ? (
|
|
<a href={endpoints.analytics} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-chart-column fa-fw text-[11px]" />
|
|
Analytics
|
|
</a>
|
|
) : null}
|
|
{mode === 'edit' && endpoints?.history ? (
|
|
<a href={endpoints.history} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-timeline fa-fw text-[11px]" />
|
|
History
|
|
</a>
|
|
) : null}
|
|
{mode === 'edit' && endpoints?.staffSurfaces ? (
|
|
<a href={endpoints.staffSurfaces} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-thumbtack fa-fw text-[11px]" />
|
|
Staff surfaces
|
|
</a>
|
|
) : null}
|
|
{mode === 'edit' && endpoints?.staffProgramming ? (
|
|
<a href={endpoints.staffProgramming} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-sliders fa-fw text-[11px]" />
|
|
Programming studio
|
|
</a>
|
|
) : null}
|
|
<a href="/collections/featured" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
|
|
<i className="fa-solid fa-compass fa-fw text-[11px]" />
|
|
Featured collections
|
|
</a>
|
|
</div>
|
|
|
|
{mode === 'edit' ? (
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
{tabs.map((tab) => (
|
|
<StudioTabButton
|
|
key={tab.id}
|
|
active={activeTab === tab.id}
|
|
label={tab.label}
|
|
icon={tab.icon}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{mode !== 'edit' || activeTab === 'details' ? (
|
|
<div className="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.12fr)_420px]">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.24)] backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Collection Studio</p>
|
|
<h1 className="mt-2 text-3xl font-semibold tracking-[-0.04em] text-white md:text-4xl">
|
|
{mode === 'create' ? 'Create a v4 collection' : collectionState?.title || 'Manage collection'}
|
|
</h1>
|
|
<p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
|
|
Collections now carry lifecycle, presentation, campaign, and series metadata alongside the artwork curation itself. Use manual mode for exact storytelling or smart rules for creator-first automation.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{mode === 'edit' ? <CollectionVisibilityBadge visibility={form.visibility} /> : null}
|
|
{collectionState?.is_featured ? (
|
|
<span className="inline-flex items-center rounded-full border border-amber-300/25 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100">
|
|
Featured
|
|
</span>
|
|
) : null}
|
|
{isSmartMode ? (
|
|
<span className="inline-flex items-center rounded-full border border-sky-300/25 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">
|
|
Smart Collection
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{notice ? (
|
|
<div className="mt-5 rounded-2xl border border-emerald-400/20 bg-emerald-400/10 px-4 py-3 text-sm text-emerald-100">
|
|
{notice}
|
|
</div>
|
|
) : null}
|
|
|
|
{Object.keys(errors).length ? (
|
|
<div className="mt-5 rounded-2xl border border-rose-400/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">
|
|
{Object.entries(errors).map(([key, messages]) => (
|
|
<div key={key}>{Array.isArray(messages) ? messages[0] : messages}</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
<form onSubmit={handleSubmit} className="mt-6 space-y-6">
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<ModeButton
|
|
active={!isSmartMode}
|
|
title="Manual"
|
|
description="Curate artworks yourself, control the exact order, and choose a specific cover from attached pieces."
|
|
icon="fa-hand-sparkles"
|
|
onClick={() => updateForm('mode', 'manual')}
|
|
/>
|
|
<ModeButton
|
|
active={isSmartMode}
|
|
title="Smart"
|
|
description="Build a rule-based collection that automatically pulls matching artworks from your own published gallery."
|
|
icon="fa-wand-magic-sparkles"
|
|
onClick={() => updateForm('mode', 'smart')}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
<Field label="Title">
|
|
<input
|
|
type="text"
|
|
value={form.title}
|
|
onChange={(event) => updateForm('title', event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="Dark Fantasy Series"
|
|
maxLength={120}
|
|
/>
|
|
</Field>
|
|
<Field label="Slug" help="Used in the collection URL.">
|
|
<input
|
|
type="text"
|
|
value={form.slug}
|
|
onChange={(event) => {
|
|
setSlugTouched(true)
|
|
updateForm('slug', slugify(event.target.value))
|
|
}}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="dark-fantasy-series"
|
|
maxLength={140}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
<Field label="Subtitle" help="Optional short line that sits under the title.">
|
|
<input
|
|
type="text"
|
|
value={form.subtitle}
|
|
onChange={(event) => updateForm('subtitle', event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="A moody archive of midnight environments"
|
|
maxLength={160}
|
|
/>
|
|
</Field>
|
|
<Field label="Summary" help="Optional short summary for cards and meta previews.">
|
|
<input
|
|
type="text"
|
|
value={form.summary}
|
|
onChange={(event) => updateForm('summary', event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="Best performing sci-fi wallpapers from the last year"
|
|
maxLength={320}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<Field label="Description">
|
|
<textarea
|
|
value={form.description}
|
|
onChange={(event) => updateForm('description', event.target.value)}
|
|
className="min-h-[128px] w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="Describe the mood, focus, or story behind this showcase."
|
|
maxLength={1000}
|
|
/>
|
|
</Field>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Field label="Collection Type">
|
|
<select value={form.type} onChange={(event) => updateForm('type', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="personal">Personal</option>
|
|
<option value="community">Community</option>
|
|
<option value="editorial">Editorial</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="Collaboration">
|
|
<select value={form.collaboration_mode} onChange={(event) => updateForm('collaboration_mode', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="closed">Closed</option>
|
|
<option value="invite_only">Invite Only</option>
|
|
<option value="open">Open Submissions</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="Event Key" help="Internal campaign identifier for discovery and promotion logic.">
|
|
<input type="text" value={form.event_key} onChange={(event) => updateForm('event_key', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={80} />
|
|
</Field>
|
|
<Field label="Event Label" help="Optional campaign or seasonal label.">
|
|
<input type="text" value={form.event_label} onChange={(event) => updateForm('event_label', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={120} />
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Field label="Season Key" help="Optional seasonal key used for grouped landing surfaces.">
|
|
<input type="text" value={form.season_key} onChange={(event) => updateForm('season_key', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={80} />
|
|
</Field>
|
|
<Field label="Badge Label" help="Short public badge for cards and headers.">
|
|
<input type="text" value={form.badge_label} onChange={(event) => updateForm('badge_label', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={80} />
|
|
</Field>
|
|
<Field label="Spotlight Style" help="Choose how the public campaign banner should be framed.">
|
|
<select value={form.spotlight_style} onChange={(event) => updateForm('spotlight_style', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="default">Default</option>
|
|
<option value="editorial">Editorial</option>
|
|
<option value="seasonal">Seasonal</option>
|
|
<option value="challenge">Challenge</option>
|
|
<option value="community">Community</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="Banner Text" help="Optional short line displayed as the collection spotlight banner.">
|
|
<input type="text" value={form.banner_text} onChange={(event) => updateForm('banner_text', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={200} />
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
<Field label="Publish At" help="Leave empty to publish immediately. Future times keep the collection off public surfaces until it goes live.">
|
|
<input type="datetime-local" value={form.published_at} onChange={(event) => updateForm('published_at', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
</Field>
|
|
<Field label="Unpublish At" help="Optional automatic sunset time for seasonal or editorial collections.">
|
|
<input type="datetime-local" value={form.unpublished_at} onChange={(event) => updateForm('unpublished_at', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Field label="Lifecycle State" help="Controls whether the collection should be treated as draft, scheduled, published, or retired.">
|
|
<select value={form.lifecycle_state} onChange={(event) => updateForm('lifecycle_state', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="draft">Draft</option>
|
|
<option value="scheduled">Scheduled</option>
|
|
<option value="published">Published</option>
|
|
<option value="featured">Featured</option>
|
|
<option value="archived">Archived</option>
|
|
<option value="expired">Expired</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="Presentation Style">
|
|
<select value={form.presentation_style} onChange={(event) => updateForm('presentation_style', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="standard">Standard</option>
|
|
<option value="editorial_grid">Editorial Grid</option>
|
|
<option value="hero_grid">Hero Grid</option>
|
|
<option value="masonry">Masonry</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="Emphasis Mode">
|
|
<select value={form.emphasis_mode} onChange={(event) => updateForm('emphasis_mode', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="cover_heavy">Cover Heavy</option>
|
|
<option value="balanced">Balanced</option>
|
|
<option value="artwork_first">Artwork First</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="Theme Token">
|
|
<select value={form.theme_token} onChange={(event) => updateForm('theme_token', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="default">Default</option>
|
|
<option value="subtle-blue">Subtle Blue</option>
|
|
<option value="violet">Violet</option>
|
|
<option value="amber">Amber</option>
|
|
</select>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Field label="Series Key" help="Use the same key across linked collections in a series.">
|
|
<input type="text" value={form.series_key} onChange={(event) => updateForm('series_key', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={80} />
|
|
</Field>
|
|
<Field label="Series Title" help="Optional public heading for the whole series.">
|
|
<input type="text" value={form.series_title} onChange={(event) => updateForm('series_title', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={160} />
|
|
</Field>
|
|
<Field label="Series Order" help="Sequence within the series for public next and previous navigation.">
|
|
<input type="number" min="1" max="9999" value={form.series_order} onChange={(event) => updateForm('series_order', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
</Field>
|
|
<Field label="Campaign Key" help="Operational campaign identifier for discovery, placements, and recommendations.">
|
|
<input type="text" value={form.campaign_key} onChange={(event) => updateForm('campaign_key', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={80} />
|
|
</Field>
|
|
<Field label="Campaign Label" help="Public-facing campaign or promotion label.">
|
|
<input type="text" value={form.campaign_label} onChange={(event) => updateForm('campaign_label', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={120} />
|
|
</Field>
|
|
</div>
|
|
|
|
<Field label="Series Description" help="Optional public intro shown on series landing pages and collection series callouts.">
|
|
<textarea
|
|
value={form.series_description}
|
|
onChange={(event) => updateForm('series_description', event.target.value)}
|
|
className="min-h-[96px] w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
maxLength={400}
|
|
/>
|
|
</Field>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Field label="Archive At" help="Optional timestamp for moving the collection into long-term archive workflows.">
|
|
<input type="datetime-local" value={form.archived_at} onChange={(event) => updateForm('archived_at', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
</Field>
|
|
<Field label="Expire At" help="Optional hard expiry for promotional or seasonal collections.">
|
|
<input type="datetime-local" value={form.expired_at} onChange={(event) => updateForm('expired_at', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
</Field>
|
|
<Field label="Promotion Tier">
|
|
<input type="text" value={form.promotion_tier} onChange={(event) => updateForm('promotion_tier', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={40} />
|
|
</Field>
|
|
<Field label="Monetization Status">
|
|
<input type="text" value={form.monetization_ready_status} onChange={(event) => updateForm('monetization_ready_status', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={40} />
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Field label="Sponsorship Label">
|
|
<input type="text" value={form.sponsorship_label} onChange={(event) => updateForm('sponsorship_label', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={120} />
|
|
</Field>
|
|
<Field label="Partner Label">
|
|
<input type="text" value={form.partner_label} onChange={(event) => updateForm('partner_label', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={120} />
|
|
</Field>
|
|
<Field label="Brand Safe Status">
|
|
<input type="text" value={form.brand_safe_status} onChange={(event) => updateForm('brand_safe_status', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={40} />
|
|
</Field>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.analytics_enabled} onChange={(event) => updateForm('analytics_enabled', event.target.checked)} />
|
|
Analytics enabled
|
|
</label>
|
|
</div>
|
|
|
|
<Field label="Editorial Notes" help="Internal editorial context for campaign planning, curation rationale, and staff handoff.">
|
|
<textarea
|
|
value={form.editorial_notes}
|
|
onChange={(event) => updateForm('editorial_notes', event.target.value)}
|
|
className="min-h-[96px] w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
maxLength={2000}
|
|
/>
|
|
</Field>
|
|
|
|
{canModerate ? (
|
|
<Field label="Staff Commercial Notes" help="Internal admin-only notes for sponsorship readiness, partner handling, and commercial review.">
|
|
<textarea
|
|
value={form.staff_commercial_notes}
|
|
onChange={(event) => updateForm('staff_commercial_notes', event.target.value)}
|
|
className="min-h-[96px] w-full rounded-2xl border border-amber-300/15 bg-amber-400/10 px-4 py-3 text-white outline-none transition focus:border-amber-300/35 focus:bg-amber-400/15"
|
|
maxLength={2000}
|
|
/>
|
|
</Field>
|
|
) : null}
|
|
|
|
{form.type === 'editorial' ? (
|
|
<div className="grid gap-5 md:grid-cols-3">
|
|
<Field label="Editorial Owner Mode" help="Choose whether this editorial lives under the current curator, another staff account, or the system editorial identity.">
|
|
<select value={form.editorial_owner_mode} onChange={(event) => updateForm('editorial_owner_mode', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="creator">Current curator</option>
|
|
<option value="staff_account">Staff account</option>
|
|
<option value="system">System editorial identity</option>
|
|
</select>
|
|
</Field>
|
|
{form.editorial_owner_mode === 'staff_account' ? (
|
|
<Field label="Staff Account Username" help="Must be an admin or moderator username.">
|
|
<input
|
|
type="text"
|
|
value={form.editorial_owner_username}
|
|
onChange={(event) => updateForm('editorial_owner_username', event.target.value.trimStart())}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="skinbase-editorial"
|
|
maxLength={60}
|
|
/>
|
|
</Field>
|
|
) : null}
|
|
{form.editorial_owner_mode === 'system' ? (
|
|
<Field label="System Owner Label" help="Public-facing label for system-owned editorials.">
|
|
<input
|
|
type="text"
|
|
value={form.editorial_owner_label}
|
|
onChange={(event) => updateForm('editorial_owner_label', event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
placeholder="Skinbase Editorial"
|
|
maxLength={120}
|
|
/>
|
|
</Field>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.allow_submissions} onChange={(event) => updateForm('allow_submissions', event.target.checked)} />
|
|
Allow submissions
|
|
</label>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.allow_comments} onChange={(event) => updateForm('allow_comments', event.target.checked)} />
|
|
Allow comments
|
|
</label>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.allow_saves} onChange={(event) => updateForm('allow_saves', event.target.checked)} />
|
|
Allow saves
|
|
</label>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.commercial_eligibility} onChange={(event) => updateForm('commercial_eligibility', event.target.checked)} />
|
|
Commercially eligible
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-5 md:grid-cols-3">
|
|
<Field label="Visibility">
|
|
<select value={form.visibility} onChange={(event) => updateForm('visibility', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="public">Public</option>
|
|
<option value="unlisted">Unlisted</option>
|
|
<option value="private">Private</option>
|
|
</select>
|
|
</Field>
|
|
|
|
{!isSmartMode ? (
|
|
<Field label="Sort Mode" help="Manual keeps the display order under your control.">
|
|
<select value={form.sort_mode} onChange={(event) => updateForm('sort_mode', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="manual">Manual</option>
|
|
<option value="newest">Newest</option>
|
|
<option value="oldest">Oldest</option>
|
|
<option value="popular">Popular</option>
|
|
</select>
|
|
</Field>
|
|
) : (
|
|
<Field label="Match Mode" help="All means every rule must match. Any is broader.">
|
|
<select
|
|
value={smartRules.match}
|
|
onChange={(event) => setSmartRules((current) => ({ ...current, match: event.target.value }))}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
<option value="all">All rules</option>
|
|
<option value="any">Any rule</option>
|
|
</select>
|
|
</Field>
|
|
)}
|
|
|
|
{!isSmartMode ? (
|
|
<Field label="Cover Artwork" help={attachedCoverOptions.length ? 'Choose a cover from artworks already attached to this collection.' : 'Attach artworks first to pick a manual cover.'}>
|
|
<select
|
|
value={form.cover_artwork_id}
|
|
onChange={(event) => updateForm('cover_artwork_id', event.target.value)}
|
|
disabled={!attachedCoverOptions.length}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:text-slate-500"
|
|
>
|
|
<option value="">Automatic cover</option>
|
|
{attachedCoverOptions.map((artwork) => (
|
|
<option key={artwork.id} value={artwork.id}>{artwork.title}</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
) : (
|
|
<Field label="Smart Sort" help="How matching artworks should be ordered.">
|
|
<select
|
|
value={smartRules.sort}
|
|
onChange={(event) => {
|
|
setSmartRules((current) => ({ ...current, sort: event.target.value }))
|
|
updateForm('sort_mode', event.target.value)
|
|
}}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
{(smartRuleOptions?.sort_options || []).map((option) => (
|
|
<option key={option.value} value={option.value}>{option.label}</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-400/10 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className={`fa-solid ${saving ? 'fa-circle-notch fa-spin' : 'fa-floppy-disk'} fa-fw`} />
|
|
{mode === 'create' ? 'Create Collection' : 'Save Changes'}
|
|
</button>
|
|
|
|
{isSmartMode ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleSmartPreview}
|
|
disabled={previewing}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-white/12 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className={`fa-solid ${previewing ? 'fa-circle-notch fa-spin' : 'fa-binoculars'} fa-fw`} />
|
|
Preview Matches
|
|
</button>
|
|
) : null}
|
|
|
|
{mode === 'edit' ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleDeleteCollection}
|
|
disabled={saving}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-rose-400/20 bg-rose-400/10 px-5 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className="fa-solid fa-trash-can fa-fw" />
|
|
Delete Collection
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<aside className="space-y-5">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Owner</p>
|
|
<div className="mt-4 flex items-center gap-4 rounded-[24px] border border-white/10 bg-white/[0.04] p-4">
|
|
<img src={owner?.avatar_url} alt={owner?.name || owner?.username} className="h-16 w-16 rounded-[20px] object-cover ring-1 ring-white/10" />
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{owner?.name || owner?.username}</div>
|
|
<div className="text-sm text-slate-400">@{owner?.username}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Presentation</p>
|
|
<div className="mt-4 space-y-3 text-sm text-slate-300">
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Lifecycle</span>
|
|
<span className="font-semibold capitalize text-white">{String(form.lifecycle_state || 'draft').replace('_', ' ')}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Mode</span>
|
|
<span className="font-semibold text-white">{isSmartMode ? 'Smart' : 'Manual'}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Visibility</span>
|
|
<CollectionVisibilityBadge visibility={form.visibility} />
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Feature status</span>
|
|
<span className="font-semibold text-white">{featuredCountLabel}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Style</span>
|
|
<span className="font-semibold text-white">{String(form.presentation_style || 'standard').replace(/_/g, ' ')}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Analytics</span>
|
|
<span className="font-semibold text-white">{form.analytics_enabled ? 'Enabled' : 'Disabled'}</span>
|
|
</div>
|
|
{canFeature ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleToggleFeature}
|
|
disabled={featureBusy}
|
|
className={`inline-flex w-full items-center justify-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition ${collectionState?.is_featured ? 'border-amber-300/25 bg-amber-300/10 text-amber-100 hover:bg-amber-300/15' : 'border-sky-300/25 bg-sky-400/10 text-sky-100 hover:bg-sky-400/15'} disabled:cursor-not-allowed disabled:opacity-60`}
|
|
>
|
|
<i className={`fa-solid ${featureBusy ? 'fa-circle-notch fa-spin' : (collectionState?.is_featured ? 'fa-star' : 'fa-sparkles')} fa-fw`} />
|
|
{collectionState?.is_featured ? 'Remove from Featured' : 'Feature this Collection'}
|
|
</button>
|
|
) : null}
|
|
{mode === 'edit' && form.visibility !== 'public' ? (
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-xs leading-relaxed text-slate-400">
|
|
Only public collections can be featured, liked, or followed publicly.
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Live Stats</p>
|
|
<div className="mt-4 grid grid-cols-2 gap-3">
|
|
<StatCard icon="fa-images" label="Artworks" value={(collectionState?.artworks_count ?? attached.length ?? 0).toLocaleString()} tone="accent" />
|
|
<StatCard icon="fa-eye" label="Views" value={(collectionState?.views_count ?? 0).toLocaleString()} />
|
|
<StatCard icon="fa-heart" label="Likes" value={(collectionState?.likes_count ?? 0).toLocaleString()} />
|
|
<StatCard icon="fa-bell" label="Followers" value={(collectionState?.followers_count ?? 0).toLocaleString()} />
|
|
</div>
|
|
<div className="mt-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-xs leading-relaxed text-slate-400">
|
|
Shares: {(collectionState?.shares_count ?? 0).toLocaleString()} {collectionState?.last_activity_at ? `• Active ${new Date(collectionState.last_activity_at).toLocaleDateString()}` : ''}
|
|
</div>
|
|
<div className="mt-3 grid grid-cols-2 gap-3">
|
|
<StatCard icon="fa-gauge-high" label="Quality" value={collectionState?.quality_score != null ? Number(collectionState.quality_score).toFixed(1) : 'Pending'} />
|
|
<StatCard icon="fa-ranking-star" label="Ranking" value={collectionState?.ranking_score != null ? Number(collectionState.ranking_score).toFixed(1) : 'Pending'} />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Series & Campaign</p>
|
|
<div className="mt-4 space-y-3 text-sm text-slate-300">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">Series: <span className="font-semibold text-white">{form.series_key || 'Not set'}</span>{form.series_order ? ` • #${form.series_order}` : ''}</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">Series title: <span className="font-semibold text-white">{form.series_title || 'Not set'}</span></div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">Campaign: <span className="font-semibold text-white">{form.campaign_label || form.campaign_key || 'Not set'}</span></div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">Promotion tier: <span className="font-semibold text-white">{form.promotion_tier || 'None'}</span></div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">Brand safety: <span className="font-semibold text-white">{form.brand_safe_status || 'Unset'}</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
{mode === 'edit' ? (
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Insight Links</p>
|
|
<div className="mt-4 space-y-3 text-sm text-slate-300">
|
|
{endpoints?.dashboard ? <a href={endpoints.dashboard} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 transition hover:bg-white/[0.07]"><span>Portfolio dashboard</span><i className="fa-solid fa-arrow-up-right-from-square text-slate-500" /></a> : null}
|
|
{endpoints?.analytics ? <a href={endpoints.analytics} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 transition hover:bg-white/[0.07]"><span>Collection analytics</span><i className="fa-solid fa-arrow-up-right-from-square text-slate-500" /></a> : null}
|
|
{endpoints?.history ? <a href={endpoints.history} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 transition hover:bg-white/[0.07]"><span>Audit history</span><i className="fa-solid fa-arrow-up-right-from-square text-slate-500" /></a> : null}
|
|
{endpoints?.staffSurfaces ? <a href={endpoints.staffSurfaces} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 transition hover:bg-white/[0.07]"><span>Staff surfaces</span><i className="fa-solid fa-arrow-up-right-from-square text-slate-500" /></a> : null}
|
|
{endpoints?.staffProgramming ? <a href={endpoints.staffProgramming} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 transition hover:bg-white/[0.07]"><span>Programming studio</span><i className="fa-solid fa-arrow-up-right-from-square text-slate-500" /></a> : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">v4 Guidance</p>
|
|
<div className="mt-4 space-y-3 text-sm leading-relaxed text-slate-300">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
Manual collections work best for hand-picked sequences, premium presentation modes, and campaign landing pages.
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
Smart collections are ideal for creator-first rulesets that keep series or editorial shelves fresh without cross-user leakage.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
) : null}
|
|
|
|
{mode !== 'edit' || activeTab === 'artworks' ? (isSmartMode ? (
|
|
<div className="mt-8 grid gap-6 xl:grid-cols-[minmax(0,1.18fr)_420px]">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Smart Builder</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Define collection rules</h2>
|
|
<p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-300">
|
|
Rules only evaluate your own artworks. This keeps smart collections creator-first and avoids pulling content from other users.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={addRule}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
|
>
|
|
<i className="fa-solid fa-plus fa-fw" />
|
|
Add Rule
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
{smartRuleCount ? smartRules.rules.map((rule, index) => (
|
|
<SmartRuleRow
|
|
key={`${rule.field}-${index}`}
|
|
rule={rule}
|
|
index={index}
|
|
smartRuleOptions={smartRuleOptions}
|
|
onFieldChange={(field) => updateSmartRule(index, () => normalizeRule({ field }))}
|
|
onOperatorChange={(operator) => updateSmartRule(index, (current) => ({ ...current, operator }))}
|
|
onValueChange={(value) => updateSmartRule(index, (current) => ({ ...current, value }))}
|
|
onRemove={() => removeRule(index)}
|
|
/>
|
|
)) : (
|
|
<div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center text-slate-300">
|
|
Add at least one rule to build a smart collection.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Preview</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Matching artworks</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleSmartPreview}
|
|
disabled={previewing}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className={`fa-solid ${previewing ? 'fa-circle-notch fa-spin' : 'fa-arrows-rotate'} fa-fw`} />
|
|
Refresh Preview
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-5 rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4">
|
|
<div className="text-sm font-semibold text-white">{smartPreview?.count ?? 0} matching artworks</div>
|
|
<p className="mt-2 text-sm leading-relaxed text-slate-300">
|
|
{smartPreview?.summary || 'Preview the rules to see how this collection will fill automatically.'}
|
|
</p>
|
|
</div>
|
|
|
|
{smartPreview?.artworks?.data?.length ? (
|
|
<div className="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-1">
|
|
{smartPreview.artworks.data.map((artwork) => (
|
|
<SmartPreviewArtwork key={artwork.id} artwork={artwork} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="mt-5 rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center">
|
|
<div className="mx-auto flex h-18 w-18 items-center justify-center rounded-[22px] border border-white/12 bg-white/[0.05] text-slate-400">
|
|
<i className="fa-solid fa-wand-magic-sparkles text-3xl" />
|
|
</div>
|
|
<h3 className="mt-5 text-xl font-semibold text-white">No matches yet</h3>
|
|
<p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-slate-300">
|
|
A smart collection can still be valid with zero results. Broaden the rules or publish more matching artworks.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
) : mode === 'edit' ? (
|
|
<div className="mt-8 grid gap-6 xl:grid-cols-[minmax(0,1.18fr)_420px]">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Attached Artworks</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Arrange the showcase order</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={saveArtworkOrder}
|
|
disabled={!orderDirty || saving}
|
|
className={`inline-flex items-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition ${orderDirty ? 'border-sky-300/25 bg-sky-400/10 text-sky-100 hover:bg-sky-400/15' : 'border-white/8 bg-white/[0.03] text-slate-500'}`}
|
|
>
|
|
<i className="fa-solid fa-grip fa-fw" />
|
|
Save Order
|
|
</button>
|
|
</div>
|
|
|
|
{attached.length ? (
|
|
<div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{attached.map((artwork, index) => (
|
|
<AttachedArtworkCard
|
|
key={artwork.id}
|
|
artwork={artwork}
|
|
index={index}
|
|
total={attached.length}
|
|
onMoveUp={() => moveArtwork(index, -1)}
|
|
onMoveDown={() => moveArtwork(index, 1)}
|
|
onRemove={() => handleRemoveArtwork(artwork)}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="mt-6 rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center">
|
|
<div className="mx-auto flex h-18 w-18 items-center justify-center rounded-[22px] border border-white/12 bg-white/[0.05] text-slate-400">
|
|
<i className="fa-solid fa-images text-3xl" />
|
|
</div>
|
|
<h3 className="mt-5 text-xl font-semibold text-white">No artworks attached yet</h3>
|
|
<p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-slate-300">
|
|
Use the picker on the right to add artworks from your gallery. Manual ordering and cover selection become available as soon as the first piece is attached.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Artwork Picker</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Add artworks</h2>
|
|
</div>
|
|
|
|
<form onSubmit={handleSearch} className="mt-5 flex gap-3">
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
placeholder="Search your gallery"
|
|
className="min-w-0 flex-1 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={searching}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className={`fa-solid ${searching ? 'fa-circle-notch fa-spin' : 'fa-magnifying-glass'} fa-fw`} />
|
|
Search
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-5 flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<div className="text-sm text-slate-300">
|
|
{selectedIds.length ? `${selectedIds.length} selected` : 'Select artworks to add'}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleAttachSelected}
|
|
disabled={!selectedIds.length || saving}
|
|
className={`inline-flex items-center gap-2 rounded-2xl border px-4 py-2.5 text-sm font-semibold transition ${selectedIds.length ? 'border-sky-300/25 bg-sky-400/10 text-sky-100 hover:bg-sky-400/15' : 'border-white/8 bg-white/[0.03] text-slate-500'}`}
|
|
>
|
|
<i className="fa-solid fa-plus fa-fw" />
|
|
Add Selected
|
|
</button>
|
|
</div>
|
|
|
|
{available.length ? (
|
|
<div className="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-1">
|
|
{available.map((artwork) => (
|
|
<ArtworkPickerCard
|
|
key={artwork.id}
|
|
artwork={artwork}
|
|
checked={selectedIds.includes(artwork.id)}
|
|
onToggle={toggleSelected}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="mt-5 rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center text-slate-300">
|
|
No matching artworks available to add.
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
) : (
|
|
<div className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center backdrop-blur-sm">
|
|
<div className="mx-auto flex h-20 w-20 items-center justify-center rounded-[24px] border border-white/12 bg-white/[0.05] text-slate-400">
|
|
<i className={`fa-solid ${isSmartMode ? 'fa-wand-magic-sparkles' : 'fa-sparkles'} text-3xl`} />
|
|
</div>
|
|
<h2 className="mt-5 text-2xl font-semibold text-white">{isSmartMode ? 'Preview it, then publish it' : 'Create it first, then curate it'}</h2>
|
|
<p className="mx-auto mt-3 max-w-xl text-sm leading-relaxed text-slate-300">
|
|
{isSmartMode
|
|
? 'Smart collections can be previewed before creation so you can verify the rules and tune the result set.'
|
|
: 'Once the collection is created, this page will expand into the full curator workflow with artwork selection, manual ordering, and cover controls.'}
|
|
</p>
|
|
</div>
|
|
)) : null}
|
|
|
|
{mode === 'edit' && activeTab === 'ai' ? (
|
|
<section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">AI Assistant</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Review-only suggestions</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
|
Use lightweight AI-style suggestions to refine naming, summaries, covers, and section groupings. Nothing is applied until you choose it, and nothing is saved until you submit the form.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button type="button" onClick={() => handleAiSuggestion('title')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'title' ? 'Thinking…' : 'Suggest title'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('summary')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'summary' ? 'Thinking…' : 'Suggest summary'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('cover')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'cover' ? 'Thinking…' : 'Suggest cover'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('grouping')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'grouping' ? 'Thinking…' : 'Suggest grouping'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('relatedArtworks')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'relatedArtworks' ? 'Thinking…' : 'Suggest related artworks'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('tags')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'tags' ? 'Thinking…' : 'Suggest tags'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('seoDescription')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'seoDescription' ? 'Thinking…' : 'Suggest SEO description'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('smartRulesExplanation')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'smartRulesExplanation' ? 'Thinking…' : 'Explain smart rules'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('splitThemes')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'splitThemes' ? 'Thinking…' : 'Suggest split'}</button>
|
|
<button type="button" onClick={() => handleAiSuggestion('mergeIdea')} disabled={aiState.busy !== ''} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:opacity-60">{aiState.busy === 'mergeIdea' ? 'Thinking…' : 'Suggest merge idea'}</button>
|
|
<button type="button" onClick={handleAiQualityReview} disabled={aiState.busy !== ''} className="rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100 transition hover:bg-sky-400/15 disabled:opacity-60">{aiState.busy === 'qualityReview' ? 'Reviewing…' : 'Quality review'}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-4 xl:grid-cols-2">
|
|
<AiSuggestionCard
|
|
title="Title"
|
|
body={aiState?.title?.title || 'No title suggestion yet.'}
|
|
actionLabel={aiState?.title?.title ? 'Use title' : null}
|
|
onAction={applyAiTitle}
|
|
muted={!aiState?.title?.title}
|
|
>
|
|
{aiState?.title?.alternatives?.length ? <div className="mt-3 text-xs text-slate-400">Alternatives: {aiState.title.alternatives.join(' • ')}</div> : null}
|
|
{aiState?.title?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.title.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Summary"
|
|
body={aiState?.summary?.summary || 'No summary suggestion yet.'}
|
|
actionLabel={aiState?.summary?.summary ? 'Use summary' : null}
|
|
onAction={applyAiSummary}
|
|
muted={!aiState?.summary?.summary}
|
|
>
|
|
{aiState?.summary?.seo_description ? <div className="mt-3 text-xs text-slate-400">SEO: {aiState.summary.seo_description}</div> : null}
|
|
{aiState?.summary?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.summary.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Cover"
|
|
body={aiState?.cover?.artwork?.title || 'No cover suggestion yet.'}
|
|
actionLabel={aiState?.cover?.artwork?.id && !isSmartMode ? 'Use cover' : null}
|
|
onAction={applyAiCover}
|
|
muted={!aiState?.cover?.artwork?.title}
|
|
>
|
|
{aiState?.cover?.artwork?.thumb ? <img src={aiState.cover.artwork.thumb} alt={aiState.cover.artwork.title} className="mt-4 aspect-[16/10] w-full rounded-[20px] object-cover" /> : null}
|
|
{isSmartMode && aiState?.cover?.artwork?.id ? <div className="mt-3 text-xs text-slate-500">Smart collections resolve covers dynamically, so this suggestion is preview-only.</div> : null}
|
|
{aiState?.cover?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.cover.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Grouping"
|
|
body={aiState?.grouping?.groups?.length ? 'Suggested section themes for cleaner collection storytelling.' : 'No grouping suggestion yet.'}
|
|
muted={!aiState?.grouping?.groups?.length}
|
|
>
|
|
{aiState?.grouping?.groups?.length ? (
|
|
<div className="mt-4 space-y-2">
|
|
{aiState.grouping.groups.map((group) => (
|
|
<div key={group.label} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-3 text-sm text-slate-200">
|
|
<div className="font-semibold text-white">{group.label}</div>
|
|
<div className="mt-1 text-xs text-slate-400">{group.count} suggested artworks</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{aiState?.grouping?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.grouping.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Related Artworks"
|
|
body={aiState?.relatedArtworks?.artworks?.length ? 'Suggested from your gallery to reinforce the collection theme.' : 'No related artwork suggestion yet.'}
|
|
actionLabel={aiState?.relatedArtworks?.artworks?.length ? 'Select suggestions' : null}
|
|
onAction={applyAiRelatedArtworks}
|
|
muted={!aiState?.relatedArtworks?.artworks?.length}
|
|
>
|
|
{aiState?.relatedArtworks?.artworks?.length ? (
|
|
<div className="mt-4 space-y-2">
|
|
{aiState.relatedArtworks.artworks.map((artwork) => (
|
|
<div key={artwork.id} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-3 text-sm text-slate-200">
|
|
{artwork.thumb ? <img src={artwork.thumb} alt={artwork.title} className="h-12 w-12 rounded-xl object-cover" /> : null}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate font-semibold text-white">{artwork.title}</div>
|
|
<div className="mt-1 text-xs text-slate-400">{artwork.shared_tags?.length ? `Shared tags: ${artwork.shared_tags.join(' • ')}` : `${artwork.shared_categories} shared categories`}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{aiState?.relatedArtworks?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.relatedArtworks.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Suggested Tags"
|
|
body={aiState?.tags?.tags?.length ? aiState.tags.tags.join(' • ') : 'No tag suggestion yet.'}
|
|
muted={!aiState?.tags?.tags?.length}
|
|
>
|
|
{aiState?.tags?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.tags.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="SEO Description"
|
|
body={aiState?.seoDescription?.description || 'No SEO description suggestion yet.'}
|
|
muted={!aiState?.seoDescription?.description}
|
|
>
|
|
{aiState?.seoDescription?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.seoDescription.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Smart Rules"
|
|
body={aiState?.smartRulesExplanation?.explanation || 'No smart rules explanation yet.'}
|
|
muted={!aiState?.smartRulesExplanation?.explanation}
|
|
>
|
|
{aiState?.smartRulesExplanation?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.smartRulesExplanation.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Split Suggestion"
|
|
body={aiState?.splitThemes?.splits?.length ? 'Two strong theme clusters were found that could become separate collections.' : 'No split suggestion yet.'}
|
|
muted={!aiState?.splitThemes?.splits?.length}
|
|
>
|
|
{aiState?.splitThemes?.splits?.length ? (
|
|
<div className="mt-4 space-y-2">
|
|
{aiState.splitThemes.splits.map((split) => (
|
|
<div key={split.title} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-3 text-sm text-slate-200">
|
|
<div className="font-semibold text-white">{split.title}</div>
|
|
<div className="mt-1 text-xs text-slate-400">{split.count} suggested artworks</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{aiState?.splitThemes?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.splitThemes.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Merge Idea"
|
|
body={aiState?.mergeIdea?.idea?.title || 'No merge or spin-out idea yet.'}
|
|
muted={!aiState?.mergeIdea?.idea?.title}
|
|
>
|
|
{aiState?.mergeIdea?.idea?.summary ? <div className="mt-3 text-sm text-slate-300">{aiState.mergeIdea.idea.summary}</div> : null}
|
|
{aiState?.mergeIdea?.rationale ? <div className="mt-3 text-xs text-slate-500">{aiState.mergeIdea.rationale}</div> : null}
|
|
</AiSuggestionCard>
|
|
|
|
<AiSuggestionCard
|
|
title="Quality Review"
|
|
body={aiState?.qualityReview ? `Quality ${Number(aiState.qualityReview.quality_score || 0).toFixed(1)} • Ranking ${Number(aiState.qualityReview.ranking_score || 0).toFixed(1)}` : 'No quality review yet.'}
|
|
muted={!aiState?.qualityReview}
|
|
>
|
|
{aiState?.qualityReview?.missing_metadata?.length ? <div className="mt-3 text-sm text-slate-300">Missing: {aiState.qualityReview.missing_metadata.join(' • ')}</div> : null}
|
|
{aiState?.qualityReview?.suggested_summary?.summary ? <div className="mt-3 text-xs text-slate-400">Suggested summary: {aiState.qualityReview.suggested_summary.summary}</div> : null}
|
|
{aiState?.qualityReview?.suggested_related_collections?.length ? <div className="mt-3 text-xs text-slate-500">Related collections: {aiState.qualityReview.suggested_related_collections.map((item) => item.title).join(' • ')}</div> : null}
|
|
</AiSuggestionCard>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{mode === 'edit' && activeTab === 'members' ? (
|
|
<div className="mt-8">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Collaborators</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Team access</h2>
|
|
<p className="mt-2 text-sm text-slate-300">Pending invites default to {inviteExpiryDays} days, but each invite can use a shorter or longer expiry. Ownership transfers keep the previous owner as an editor.</p>
|
|
</div>
|
|
</div>
|
|
<form onSubmit={handleInviteMember} className="mt-5 flex flex-col gap-3 xl:flex-row xl:items-start">
|
|
<input value={inviteUsername} onChange={(event) => setInviteUsername(event.target.value)} placeholder="username" className="min-w-0 flex-1 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
<select value={inviteRole} onChange={(event) => setInviteRole(event.target.value)} className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="editor">Editor</option>
|
|
<option value="contributor">Contributor</option>
|
|
<option value="viewer">Viewer</option>
|
|
</select>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-2 md:min-w-[240px]">
|
|
<select value={inviteExpiryMode} onChange={(event) => setInviteExpiryMode(event.target.value)} className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35">
|
|
<option value="default">Default ({inviteExpiryDays} days)</option>
|
|
{inviteExpiryOptions.map((days) => (
|
|
<option key={days} value={String(days)}>{days} day{days === 1 ? '' : 's'}</option>
|
|
))}
|
|
<option value="custom">Custom date</option>
|
|
</select>
|
|
{inviteExpiryMode === 'custom' ? (
|
|
<input type="datetime-local" value={inviteCustomExpiry} onChange={(event) => setInviteCustomExpiry(event.target.value)} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" />
|
|
) : (
|
|
<p className="px-1 text-xs text-slate-400">Leave this on default to use the global expiry window for collaborator invites.</p>
|
|
)}
|
|
</div>
|
|
<button type="submit" className="rounded-2xl border border-sky-300/25 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">Invite</button>
|
|
</form>
|
|
<div className="mt-5 space-y-3">
|
|
{members.length ? members.map((member) => (
|
|
<MemberCard
|
|
key={member.id}
|
|
member={member}
|
|
onRoleChange={handleMemberRoleChange}
|
|
onRemove={canModerate ? handleAdminRemoveMember : handleRemoveMember}
|
|
onAccept={handleAcceptMember}
|
|
onDecline={handleDeclineMember}
|
|
onTransfer={handleTransferMember}
|
|
/>
|
|
)) : <div className="rounded-2xl border border-dashed border-white/12 bg-white/[0.03] px-4 py-10 text-center text-sm text-slate-300">No collaborators yet.</div>}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
) : null}
|
|
|
|
{mode === 'edit' && activeTab === 'submissions' ? (
|
|
<div className="mt-8">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Submissions</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Incoming artworks</h2>
|
|
</div>
|
|
<div className="mt-5 space-y-3">
|
|
{submissions.length ? submissions.map((submission) => (
|
|
<SubmissionReviewCard
|
|
key={submission.id}
|
|
submission={submission}
|
|
onApprove={(item) => handleSubmissionAction(item, 'approve')}
|
|
onReject={(item) => handleSubmissionAction(item, 'reject')}
|
|
onWithdraw={(item) => handleSubmissionAction(item, 'withdraw')}
|
|
/>
|
|
)) : <div className="rounded-2xl border border-dashed border-white/12 bg-white/[0.03] px-4 py-10 text-center text-sm text-slate-300">No submissions yet.</div>}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
) : null}
|
|
|
|
{mode === 'edit' && activeTab === 'discussion' ? (
|
|
<div className="mt-8">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Discussion</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Recent comments</h2>
|
|
</div>
|
|
<div className="mt-5 space-y-3">
|
|
{comments.length ? comments.slice(0, 6).map((comment) => (
|
|
<div key={comment.id} className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4">
|
|
<div className="text-sm font-semibold text-white">{comment?.user?.display}</div>
|
|
<div className="mt-2 text-sm leading-relaxed text-slate-300" dangerouslySetInnerHTML={{ __html: comment?.rendered_content || '' }} />
|
|
</div>
|
|
)) : <div className="rounded-2xl border border-dashed border-white/12 bg-white/[0.03] px-4 py-10 text-center text-sm text-slate-300">No comments yet.</div>}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
) : null}
|
|
|
|
{mode === 'edit' && activeTab === 'settings' ? (
|
|
<div className="mt-8 space-y-6">
|
|
<div className="grid gap-6 xl:grid-cols-4">
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Presentation</p>
|
|
<div className="mt-4 space-y-3 text-sm text-slate-300">
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Mode</span>
|
|
<span className="font-semibold text-white">{isSmartMode ? 'Smart' : 'Manual'}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Visibility</span>
|
|
<CollectionVisibilityBadge visibility={form.visibility} />
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<span>Feature status</span>
|
|
<span className="font-semibold text-white">{featuredCountLabel}</span>
|
|
</div>
|
|
{canFeature ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleToggleFeature}
|
|
disabled={featureBusy}
|
|
className={`inline-flex w-full items-center justify-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition ${collectionState?.is_featured ? 'border-amber-300/25 bg-amber-300/10 text-amber-100 hover:bg-amber-300/15' : 'border-sky-300/25 bg-sky-400/10 text-sky-100 hover:bg-sky-400/15'} disabled:cursor-not-allowed disabled:opacity-60`}
|
|
>
|
|
<i className={`fa-solid ${featureBusy ? 'fa-circle-notch fa-spin' : (collectionState?.is_featured ? 'fa-star' : 'fa-sparkles')} fa-fw`} />
|
|
{collectionState?.is_featured ? 'Remove from Featured' : 'Feature this Collection'}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Live Stats</p>
|
|
<div className="mt-4 grid grid-cols-2 gap-3">
|
|
<StatCard icon="fa-images" label="Artworks" value={(collectionState?.artworks_count ?? attached.length ?? 0).toLocaleString()} tone="accent" />
|
|
<StatCard icon="fa-eye" label="Views" value={(collectionState?.views_count ?? 0).toLocaleString()} />
|
|
<StatCard icon="fa-heart" label="Likes" value={(collectionState?.likes_count ?? 0).toLocaleString()} />
|
|
<StatCard icon="fa-bell" label="Followers" value={(collectionState?.followers_count ?? 0).toLocaleString()} />
|
|
</div>
|
|
<div className="mt-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-xs leading-relaxed text-slate-400">
|
|
Shares: {(collectionState?.shares_count ?? 0).toLocaleString()} {collectionState?.last_activity_at ? `• Active ${new Date(collectionState.last_activity_at).toLocaleDateString()}` : ''}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-200/80">Health</p>
|
|
<h2 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">Readiness and warnings</h2>
|
|
</div>
|
|
<button type="button" onClick={handleAiQualityReview} disabled={aiState.busy !== ''} className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-sky-100 transition hover:bg-sky-400/15 disabled:opacity-60">
|
|
<i className={`fa-solid ${aiState.busy === 'qualityReview' ? 'fa-circle-notch fa-spin' : 'fa-wand-magic-sparkles'} fa-fw`} />
|
|
{aiState.busy === 'qualityReview' ? 'Reviewing…' : 'AI fix suggestions'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 grid grid-cols-2 gap-3">
|
|
<StatCard icon="fa-heart-pulse" label="Health" value={formatStateLabel(collectionState?.health_state)} tone="accent" />
|
|
<StatCard icon="fa-clipboard-check" label="Readiness" value={formatStateLabel(collectionState?.readiness_state)} />
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-[0.14em]">
|
|
<span className={`rounded-full border px-3 py-2 ${(collectionState?.placement_eligibility ? 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100' : 'border-rose-300/20 bg-rose-400/10 text-rose-100')}`}>
|
|
{collectionState?.placement_eligibility ? 'Placement eligible' : 'Placement blocked'}
|
|
</span>
|
|
{collectionState?.campaign_key ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-slate-200">Campaign · {collectionState.campaign_key}</span> : null}
|
|
{collectionState?.program_key ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-slate-200">Program · {collectionState.program_key}</span> : null}
|
|
</div>
|
|
|
|
<div className="mt-4 grid grid-cols-2 gap-3 text-sm text-slate-300">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Metadata</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{collectionState?.metadata_completeness_score !== null && collectionState?.metadata_completeness_score !== undefined ? Number(collectionState.metadata_completeness_score).toFixed(1) : 'N/A'}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Editorial</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{collectionState?.editorial_readiness_score !== null && collectionState?.editorial_readiness_score !== undefined ? Number(collectionState.editorial_readiness_score).toFixed(1) : 'N/A'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-3">
|
|
{(collectionState?.health_flags?.length ? collectionState.health_flags : [collectionState?.health_state].filter(Boolean)).map((flag) => {
|
|
const meta = healthFlagMeta(flag)
|
|
|
|
return (
|
|
<div key={flag} className={`rounded-2xl border px-4 py-3 ${meta.tone}`}>
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em]">{meta.label}</div>
|
|
<div className="mt-2 text-sm leading-relaxed">{meta.description}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{aiState?.qualityReview?.missing_metadata?.length ? (
|
|
<div className="mt-4 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm text-sky-100">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100/90">Suggested fixes</div>
|
|
<div className="mt-2">Focus first on: {aiState.qualityReview.missing_metadata.join(' • ')}</div>
|
|
{aiState?.qualityReview?.suggested_summary?.summary ? <div className="mt-2 text-xs text-sky-100/80">Suggested summary: {aiState.qualityReview.suggested_summary.summary}</div> : null}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-4 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-xs leading-relaxed text-slate-400">
|
|
Last health check: {formatDateTimeLabel(collectionState?.last_health_check_at) || 'Not recorded yet'}
|
|
<br />
|
|
Recommendation refresh: {formatDateTimeLabel(collectionState?.last_recommendation_refresh_at) || 'Not recorded yet'}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Studio Notes</p>
|
|
<div className="mt-4 space-y-3 text-sm leading-relaxed text-slate-300">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
Use the Details tab for metadata and publishing options, then switch to Artworks for ordering or smart rule management.
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
|
Community and editorial collections work best when collaborators, submissions, and moderation are reviewed regularly.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-200/80">Merge Review</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Compare duplicate candidates</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
|
Review candidate overlaps, choose a canonical destination, merge when the target is final, or dismiss false positives so they stop resurfacing.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
|
{duplicateCandidates.length} active candidate{duplicateCandidates.length === 1 ? '' : 's'}
|
|
</div>
|
|
</div>
|
|
|
|
{canonicalTarget ? (
|
|
<div className="mt-6 rounded-[26px] border border-amber-300/20 bg-amber-400/10 p-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100">Current canonical target</p>
|
|
<p className="mt-2 text-lg font-semibold text-white">{canonicalTarget.title}</p>
|
|
<p className="mt-1 text-sm text-amber-100/80">{canonicalTarget.owner?.name || canonicalTarget.owner?.username || 'Collection'}</p>
|
|
</div>
|
|
{canonicalTarget.manage_url ? <a href={canonicalTarget.manage_url} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.1]">Open target<i className="fa-solid fa-arrow-up-right-from-square fa-fw text-slate-400" /></a> : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-6 space-y-4">
|
|
{duplicateCandidates.length ? duplicateCandidates.map((candidate) => (
|
|
<div key={`merge-candidate-${candidate.collection?.id}`} className="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
|
|
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_320px]">
|
|
<div>
|
|
{candidate.collection ? <CollectionCard collection={candidate.collection} isOwner /> : null}
|
|
</div>
|
|
<div className="space-y-3 text-sm text-slate-300">
|
|
<div className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Compare</div>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{(candidate.comparison?.match_reasons || []).map((reason) => (
|
|
<span key={reason} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-300">{reason.replaceAll('_', ' ')}</span>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 grid grid-cols-3 gap-2 text-xs text-slate-400">
|
|
<div className="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">Shared artworks: <span className="font-semibold text-white">{candidate.comparison?.shared_artworks_count ?? 0}</span></div>
|
|
<div className="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">Current: <span className="font-semibold text-white">{candidate.comparison?.source_artworks_count ?? 0}</span></div>
|
|
<div className="rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2">Target: <span className="font-semibold text-white">{candidate.comparison?.target_artworks_count ?? 0}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
{candidate.decision?.action_type ? (
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-xs text-slate-400">
|
|
Latest decision: <span className="font-semibold uppercase tracking-[0.14em] text-white">{candidate.decision.action_type.replaceAll('_', ' ')}</span>
|
|
{candidate.decision.summary ? <div className="mt-1">{candidate.decision.summary}</div> : null}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleCanonicalizeCandidate(candidate)}
|
|
disabled={saving}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className="fa-solid fa-bullseye fa-fw" />
|
|
Canonicalize here
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleMergeCandidate(candidate)}
|
|
disabled={saving || candidate.collection?.mode === 'smart'}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm font-semibold text-amber-100 transition hover:bg-amber-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className="fa-solid fa-code-merge fa-fw" />
|
|
Merge into target
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRejectDuplicateCandidate(candidate)}
|
|
disabled={saving || candidate.is_current_canonical_target}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className="fa-solid fa-ban fa-fw" />
|
|
Not duplicate
|
|
</button>
|
|
</div>
|
|
|
|
{candidate.collection?.mode === 'smart' ? <div className="text-xs text-amber-200/80">Smart collections can be designated as canonical but cannot receive merged artworks directly.</div> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center text-sm text-slate-300">
|
|
No active duplicate candidates right now. Dismissed pairs stay suppressed until the collections change again.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Linked Collections</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Manual related collection links</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
|
Curate a hand-picked strip of related collections for multi-part series, anthologies, and campaign bundles. These links render before recommendation-driven suggestions on the public page.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
|
{linkedCollections.length} linked
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex flex-col gap-3 xl:flex-row xl:items-end">
|
|
<div className="min-w-0 flex-1">
|
|
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Add manageable collection</label>
|
|
<select
|
|
value={selectedLinkedCollectionId}
|
|
onChange={(event) => setSelectedLinkedCollectionId(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
<option value="">Select a collection</option>
|
|
{linkedCollectionOptions.map((item) => (
|
|
<option key={item.id} value={item.id}>{item.title}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddLinkedCollection}
|
|
disabled={!selectedLinkedCollectionId || saving}
|
|
className="inline-flex items-center justify-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className={`fa-solid ${saving ? 'fa-circle-notch fa-spin' : 'fa-link'} fa-fw`} />
|
|
Add linked collection
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-3">
|
|
{linkedCollections.length ? linkedCollections.map((item) => (
|
|
<div key={item.id} className="flex flex-col gap-4 rounded-[26px] border border-white/10 bg-white/[0.04] p-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex min-w-0 items-center gap-4">
|
|
{item.cover_image ? <img src={item.cover_image} alt={item.title} className="h-16 w-16 rounded-[18px] object-cover ring-1 ring-white/10" /> : <div className="flex h-16 w-16 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.05] text-slate-400"><i className="fa-solid fa-grid-2" /></div>}
|
|
<div className="min-w-0">
|
|
<div className="truncate text-base font-semibold text-white">{item.title}</div>
|
|
<div className="mt-1 truncate text-sm text-slate-400">{item.campaign_label || item.series_key || item.owner?.name || item.owner?.username || 'Collection'}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{item.manage_url ? <a href={item.manage_url} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Open<i className="fa-solid fa-arrow-up-right-from-square fa-fw text-slate-500" /></a> : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveLinkedCollection(item.id)}
|
|
disabled={saving}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className="fa-solid fa-link-slash fa-fw" />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center text-sm text-slate-300">
|
|
No manual linked collections yet. Add sequels, anthologies, or campaign companions here.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-lime-200/80">Cross-Entity Links</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Creators, artworks, stories, categories, campaigns, events, and tags</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
|
Add contextual links that turn this collection into a richer destination page. These links can point to creators, public artworks, published stories, category landings, campaign or event context, and public tag or theme pages.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
|
{entityLinks.length} linked entities
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-3 xl:grid-cols-[180px_minmax(0,1fr)_240px_auto] xl:items-end">
|
|
<div>
|
|
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Entity type</label>
|
|
<select
|
|
value={selectedEntityType}
|
|
onChange={(event) => {
|
|
const nextType = event.target.value
|
|
const nextOptions = Array.isArray(entityLinkOptions[nextType]) ? entityLinkOptions[nextType] : []
|
|
setSelectedEntityType(nextType)
|
|
setSelectedEntityId(nextOptions[0]?.id || '')
|
|
}}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
<option value="creator">Creator</option>
|
|
<option value="artwork">Artwork</option>
|
|
<option value="story">Story</option>
|
|
<option value="category">Category</option>
|
|
<option value="campaign">Campaign</option>
|
|
<option value="event">Event</option>
|
|
<option value="tag">Tag or Theme</option>
|
|
</select>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Choose entity</label>
|
|
<select
|
|
value={selectedEntityId}
|
|
onChange={(event) => setSelectedEntityId(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
<option value="">Select an entity</option>
|
|
{(entityLinkOptions[selectedEntityType] || []).map((item) => (
|
|
<option key={`${selectedEntityType}-${item.id}`} value={item.id}>{item.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Relationship label</label>
|
|
<input
|
|
value={entityRelationship}
|
|
onChange={(event) => setEntityRelationship(event.target.value)}
|
|
placeholder="featured creator"
|
|
className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
maxLength={80}
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleAddEntityLink}
|
|
disabled={!selectedEntityType || !selectedEntityId || saving}
|
|
className="inline-flex items-center justify-center gap-2 rounded-2xl border border-lime-300/25 bg-lime-400/10 px-4 py-3 text-sm font-semibold text-lime-100 transition hover:bg-lime-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className={`fa-solid ${saving ? 'fa-circle-notch fa-spin' : 'fa-diagram-project'} fa-fw`} />
|
|
Add link
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-3">
|
|
{entityLinks.length ? entityLinks.map((item) => (
|
|
<div key={`${item.linked_type}-${item.linked_id}-${item.id}`} className="flex flex-col gap-4 rounded-[26px] border border-white/10 bg-white/[0.04] p-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex min-w-0 items-center gap-4">
|
|
{item.image_url ? <img src={item.image_url} alt={item.title} className="h-16 w-16 rounded-[18px] object-cover ring-1 ring-white/10" /> : <div className="flex h-16 w-16 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.05] text-slate-400"><i className="fa-solid fa-diagram-project" /></div>}
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="truncate text-base font-semibold text-white">{item.title}</div>
|
|
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{item.meta}</span>
|
|
</div>
|
|
<div className="mt-1 truncate text-sm text-slate-400">{item.subtitle}</div>
|
|
{item.relationship_type ? <div className="mt-1 text-xs uppercase tracking-[0.16em] text-lime-200/80">{item.relationship_type}</div> : null}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{item.url ? <a href={item.url} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Open<i className="fa-solid fa-arrow-up-right-from-square fa-fw text-slate-500" /></a> : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveEntityLink(item.id)}
|
|
disabled={saving}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
<i className="fa-solid fa-link-slash fa-fw" />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12 text-center text-sm text-slate-300">
|
|
No entity links yet. Connect this collection to a creator profile, a public artwork, a published story, campaign or event context, or a category landing page.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Page Modules</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Persisted collection layout</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
|
Reorder the collection page with predefined modules. This keeps the destination page modular without turning it into a freeform page builder.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
|
{layoutModules.filter((module) => module.enabled).length} active modules
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
{layoutModules.map((module, index) => (
|
|
<LayoutModuleCard
|
|
key={module.key}
|
|
module={module}
|
|
index={index}
|
|
total={layoutModules.length}
|
|
onToggle={(key, enabled) => updateLayoutModule(key, { enabled })}
|
|
onSlotChange={(key, slot) => updateLayoutModule(key, { slot })}
|
|
onMoveUp={() => moveLayoutModule(index, -1)}
|
|
onMoveDown={() => moveLayoutModule(index, 1)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
) : null}
|
|
|
|
{mode === 'edit' && activeTab === 'moderation' ? (
|
|
<section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Moderation</p>
|
|
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Admin controls</h2>
|
|
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-300">
|
|
Restrict public visibility, disable risky interactions, unfeature collections, or remove collaborators when a curation surface needs intervention.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-5 xl:grid-cols-2">
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5">
|
|
<Field label="Moderation Status">
|
|
<select
|
|
value={collectionState?.moderation_status || 'active'}
|
|
onChange={(event) => handleModerationStatusChange(event.target.value)}
|
|
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35"
|
|
>
|
|
<option value="active">Active</option>
|
|
<option value="under_review">Under review</option>
|
|
<option value="restricted">Restricted</option>
|
|
<option value="hidden">Hidden</option>
|
|
</select>
|
|
</Field>
|
|
|
|
<div className="mt-4 space-y-3">
|
|
<label className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<span>Allow comments</span>
|
|
<input type="checkbox" checked={form.allow_comments} onChange={(event) => handleModerationToggle('allow_comments', event.target.checked)} />
|
|
</label>
|
|
<label className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<span>Allow submissions</span>
|
|
<input type="checkbox" checked={form.allow_submissions} onChange={(event) => handleModerationToggle('allow_submissions', event.target.checked)} />
|
|
</label>
|
|
<label className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
|
|
<span>Allow saves</span>
|
|
<input type="checkbox" checked={form.allow_saves} onChange={(event) => handleModerationToggle('allow_saves', event.target.checked)} />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Rapid actions</div>
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<button type="button" onClick={handleAdminUnfeature} className="rounded-2xl border border-amber-300/25 bg-amber-300/10 px-4 py-3 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/15">
|
|
Remove featured placement
|
|
</button>
|
|
<button type="button" onClick={() => handleModerationStatusChange('under_review')} className="rounded-2xl border border-white/12 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
|
|
Send to review
|
|
</button>
|
|
<button type="button" onClick={() => handleModerationStatusChange('restricted')} className="rounded-2xl border border-rose-400/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15">
|
|
Restrict public access
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-5 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-4 text-sm leading-relaxed text-slate-300">
|
|
Current state: <span className="font-semibold text-white">{(collectionState?.moderation_status || 'active').replace('_', ' ')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|