2643 lines
141 KiB
JavaScript
2643 lines
141 KiB
JavaScript
import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react'
|
||
import { usePage, Link } from '@inertiajs/react'
|
||
import StudioLayout from '../../Layouts/StudioLayout'
|
||
import RichTextEditor from '../../components/forum/RichTextEditor'
|
||
import TextInput from '../../components/ui/TextInput'
|
||
import Button from '../../components/ui/Button'
|
||
import Modal from '../../components/ui/Modal'
|
||
import FormField from '../../components/ui/FormField'
|
||
import Toggle from '../../components/ui/Toggle'
|
||
import NovaSelect from '../../components/ui/NovaSelect'
|
||
import TagPicker from '../../components/tags/TagPicker'
|
||
import SchedulePublishPicker from '../../components/upload/SchedulePublishPicker'
|
||
import ArtworkEvolutionSearchPicker from '../../components/artwork/ArtworkEvolutionSearchPicker'
|
||
|
||
const EDIT_SECTIONS = [
|
||
{ id: 'taxonomy', label: 'Category', hint: 'Content type and category path' },
|
||
{ id: 'details', label: 'Details', hint: 'Title and description' },
|
||
{ id: 'evolution', label: 'Evolution', hint: 'Link an older original artwork' },
|
||
{ id: 'ai-assist', label: 'AI Assist', hint: 'Suggestions and similar matches' },
|
||
{ id: 'tags', label: 'Tags', hint: 'Search, add, and refine keywords' },
|
||
{ id: 'visibility', label: 'Visibility', hint: 'Publishing state' },
|
||
]
|
||
|
||
const TABS = [
|
||
{ id: 'details', label: 'Details', icon: 'fa-solid fa-pen-fancy' },
|
||
{ id: 'media', label: 'Media', icon: 'fa-solid fa-photo-film' },
|
||
{ id: 'evolution', label: 'Evolution', icon: 'fa-solid fa-code-branch' },
|
||
{ id: 'tags', label: 'Tags', icon: 'fa-solid fa-tags' },
|
||
{ id: 'taxonomy', label: 'Category', icon: 'fa-solid fa-palette' },
|
||
{ id: 'visibility', label: 'Visibility', icon: 'fa-solid fa-eye' },
|
||
{ id: 'ai', label: 'AI Assist', icon: 'fa-solid fa-wand-magic-sparkles' },
|
||
]
|
||
|
||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||
|
||
function getCsrfToken() {
|
||
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
||
}
|
||
|
||
function formatBytes(bytes) {
|
||
if (!bytes) return '—'
|
||
if (bytes < 1024) return bytes + ' B'
|
||
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
|
||
return (bytes / 1048576).toFixed(1) + ' MB'
|
||
}
|
||
|
||
function resolveFileExtension(fileName, fallbackExt = '') {
|
||
const normalizedFallback = String(fallbackExt || '').trim().replace(/^\./, '').toLowerCase()
|
||
const normalizedName = String(fileName || '').trim()
|
||
const fromName = normalizedName.includes('.')
|
||
? normalizedName.split('.').pop()?.trim().toLowerCase()
|
||
: ''
|
||
|
||
return fromName || normalizedFallback
|
||
}
|
||
|
||
function isArchiveArtwork(fileName, mimeType, fileExt) {
|
||
const extension = resolveFileExtension(fileName, fileExt)
|
||
if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) return true
|
||
|
||
const normalizedMime = String(mimeType || '').toLowerCase()
|
||
return normalizedMime.includes('zip')
|
||
|| normalizedMime.includes('rar')
|
||
|| normalizedMime.includes('7z')
|
||
|| normalizedMime.includes('tar')
|
||
|| normalizedMime.includes('gzip')
|
||
}
|
||
|
||
function formatSchedulePreview(value, timezone) {
|
||
if (!value) return 'Pick a date and time'
|
||
|
||
const date = new Date(value)
|
||
if (Number.isNaN(date.getTime())) return 'Pick a date and time'
|
||
|
||
try {
|
||
return new Intl.DateTimeFormat(undefined, {
|
||
dateStyle: 'medium',
|
||
timeStyle: 'short',
|
||
timeZone: timezone || undefined,
|
||
}).format(date)
|
||
} catch {
|
||
return date.toLocaleString()
|
||
}
|
||
}
|
||
|
||
function formatReleaseCountdown(value, nowMs = Date.now()) {
|
||
if (!value) return ''
|
||
|
||
const releaseDate = new Date(value)
|
||
if (Number.isNaN(releaseDate.getTime())) return ''
|
||
|
||
const remainingMs = releaseDate.getTime() - nowMs
|
||
|
||
if (remainingMs <= 0) {
|
||
return 'Releasing now'
|
||
}
|
||
|
||
const totalSeconds = Math.floor(remainingMs / 1000)
|
||
const days = Math.floor(totalSeconds / 86400)
|
||
const hours = Math.floor((totalSeconds % 86400) / 3600)
|
||
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
||
const seconds = totalSeconds % 60
|
||
|
||
const parts = []
|
||
|
||
if (days > 0) parts.push(`${days}d`)
|
||
if (days > 0 || hours > 0) parts.push(`${hours}h`)
|
||
if (days > 0 || hours > 0 || minutes > 0) parts.push(`${minutes}m`)
|
||
if (days === 0) parts.push(`${seconds}s`)
|
||
|
||
return `In ${parts.join(' ')}`
|
||
}
|
||
|
||
function getContentTypeVisualKey(slug) {
|
||
const map = { skins: 'skins', wallpapers: 'wallpapers', photography: 'photography', other: 'other', members: 'members' }
|
||
return map[slug] || 'other'
|
||
}
|
||
|
||
function buildCategoryTree(contentTypes) {
|
||
return (contentTypes || []).map((ct) => ({
|
||
...ct,
|
||
rootCategories: (ct.categories || ct.root_categories || []).map((rc) => ({
|
||
...rc,
|
||
children: rc.children || [],
|
||
})),
|
||
}))
|
||
}
|
||
|
||
function nextSourceForManualEdit(currentSource) {
|
||
if (currentSource === 'ai_applied' || currentSource === 'ai_generated') return 'mixed'
|
||
if (currentSource === 'mixed') return 'mixed'
|
||
return 'manual'
|
||
}
|
||
|
||
function statusTone(status) {
|
||
switch (status) {
|
||
case 'ready':
|
||
return 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200'
|
||
case 'queued':
|
||
case 'processing':
|
||
return 'border-sky-400/30 bg-sky-400/10 text-sky-200'
|
||
case 'failed':
|
||
return 'border-red-400/30 bg-red-400/10 text-red-200'
|
||
default:
|
||
return 'border-white/10 bg-white/[0.04] text-slate-300'
|
||
}
|
||
}
|
||
|
||
function statusLabel(status) {
|
||
switch (status) {
|
||
case 'queued':
|
||
return 'Queued'
|
||
case 'processing':
|
||
return 'Processing'
|
||
case 'ready':
|
||
return 'Ready'
|
||
case 'failed':
|
||
return 'Failed'
|
||
case 'pending':
|
||
return 'Pending'
|
||
default:
|
||
return 'Not analyzed'
|
||
}
|
||
}
|
||
|
||
function visibilityLabel(value) {
|
||
switch (value) {
|
||
case 'unlisted':
|
||
return 'Unlisted'
|
||
case 'private':
|
||
return 'Private'
|
||
default:
|
||
return 'Public'
|
||
}
|
||
}
|
||
|
||
function normalizeContributorCredits(contributorIds = [], contributorCredits = {}) {
|
||
const normalized = {}
|
||
const ids = Array.isArray(contributorIds)
|
||
? contributorIds.map((id) => Number(id)).filter((id) => Number.isFinite(id) && id > 0)
|
||
: []
|
||
|
||
ids.forEach((id) => {
|
||
const current = contributorCredits?.[id] || contributorCredits?.[String(id)] || {}
|
||
normalized[id] = {
|
||
creditRole: typeof current.creditRole === 'string' ? current.creditRole : '',
|
||
isPrimary: Boolean(current.isPrimary),
|
||
}
|
||
})
|
||
|
||
const leadIds = Object.entries(normalized)
|
||
.filter(([, value]) => value.isPrimary)
|
||
.map(([id]) => Number(id))
|
||
|
||
if (leadIds.length > 1) {
|
||
leadIds.slice(1).forEach((id) => {
|
||
normalized[id] = {
|
||
...normalized[id],
|
||
isPrimary: false,
|
||
}
|
||
})
|
||
}
|
||
|
||
return normalized
|
||
}
|
||
|
||
function mapContributorCredits(contributorCredits = []) {
|
||
return (Array.isArray(contributorCredits) ? contributorCredits : []).reduce((accumulator, contributor) => {
|
||
const userId = Number(contributor?.user_id)
|
||
if (!Number.isFinite(userId) || userId <= 0) return accumulator
|
||
|
||
accumulator[userId] = {
|
||
creditRole: typeof contributor?.credit_role === 'string' ? contributor.credit_role : '',
|
||
isPrimary: Boolean(contributor?.is_primary),
|
||
}
|
||
|
||
return accumulator
|
||
}, {})
|
||
}
|
||
|
||
// ─── Sub-components ──────────────────────────────────────────────────────────
|
||
|
||
/** Glass-morphism section card (Nova theme) */
|
||
function Section({ children, className = '', id = undefined }) {
|
||
return (
|
||
<section id={id} className={`scroll-mt-24 bg-nova-900/60 border border-white/10 rounded-2xl p-6 ${className}`}>
|
||
{children}
|
||
</section>
|
||
)
|
||
}
|
||
|
||
/** Section heading */
|
||
function SectionTitle({ icon, children }) {
|
||
return (
|
||
<h3 className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">
|
||
{icon && <i className={`${icon} text-accent/70 text-[11px]`} />}
|
||
{children}
|
||
</h3>
|
||
)
|
||
}
|
||
|
||
function InlineAiButton({ children, onClick, disabled = false, loading = false }) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
disabled={disabled}
|
||
className="inline-flex items-center gap-1 rounded-full border border-sky-400/20 bg-sky-400/10 px-2.5 py-1 text-[11px] font-semibold text-sky-200 transition hover:bg-sky-400/15 disabled:cursor-not-allowed disabled:opacity-50"
|
||
>
|
||
<span>{loading ? '...' : '✦'}</span>
|
||
<span>{children}</span>
|
||
</button>
|
||
)
|
||
}
|
||
|
||
function FieldLabel({ label, actionLabel, onAction, disabled = false, loading = false }) {
|
||
return (
|
||
<div className="flex items-center justify-between gap-3">
|
||
<span>{label}</span>
|
||
<InlineAiButton onClick={onAction} disabled={disabled} loading={loading}>{actionLabel}</InlineAiButton>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function RightRailCard({ title, children, className = '' }) {
|
||
return (
|
||
<div className={`rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top,_rgba(148,163,184,0.16),_rgba(15,23,42,0.92)_62%)] p-4 ${className}`}>
|
||
<h3 className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">{title}</h3>
|
||
<div className="mt-3">{children}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// ─── Main Component ──────────────────────────────────────────────────────────
|
||
|
||
export default function StudioArtworkEdit() {
|
||
const { props } = usePage()
|
||
const { artwork, contentTypes: rawContentTypes } = props
|
||
const groupOptions = Array.isArray(props.groupOptions) ? props.groupOptions : []
|
||
const evolutionRelationTypes = Array.isArray(props.evolutionRelationTypes) ? props.evolutionRelationTypes : []
|
||
const initialEvolutionRelation = artwork?.evolution_relation || null
|
||
const contributorOptionsByGroup = props.contributorOptionsByGroup && typeof props.contributorOptionsByGroup === 'object'
|
||
? props.contributorOptionsByGroup
|
||
: {}
|
||
|
||
const contentTypes = useMemo(() => buildCategoryTree(rawContentTypes || []), [rawContentTypes])
|
||
|
||
// ── State ──────────────────────────────────────────────────────────────────
|
||
const [contentTypeId, setContentTypeId] = useState(artwork?.content_type_id || null)
|
||
const [categoryId, setCategoryId] = useState(artwork?.parent_category_id || null)
|
||
const [subCategoryId, setSubCategoryId] = useState(artwork?.sub_category_id || null)
|
||
const [title, setTitle] = useState(artwork?.title || '')
|
||
const [description, setDescription] = useState(artwork?.description || '')
|
||
const [tagSlugs, setTagSlugs] = useState(() => (artwork?.tags || []).map((t) => t.slug || t.name))
|
||
const [visibility, setVisibility] = useState(artwork?.visibility || (artwork?.is_public ? 'public' : 'private'))
|
||
const [publishMode, setPublishMode] = useState(artwork?.publish_mode || (artwork?.artwork_status === 'scheduled' ? 'schedule' : 'now'))
|
||
const [scheduledAt, setScheduledAt] = useState(artwork?.publish_at || null)
|
||
const [groupSlug, setGroupSlug] = useState(artwork?.group_slug || '')
|
||
const [primaryAuthorUserId, setPrimaryAuthorUserId] = useState(artwork?.primary_author_user_id || null)
|
||
const [contributorUserIds, setContributorUserIds] = useState(() => (Array.isArray(artwork?.contributor_user_ids) ? artwork.contributor_user_ids.map((id) => Number(id)).filter((id) => Number.isFinite(id) && id > 0) : []))
|
||
const [contributorCredits, setContributorCredits] = useState(() => normalizeContributorCredits(artwork?.contributor_user_ids || [], mapContributorCredits(artwork?.contributor_credits || [])))
|
||
const [titleSource, setTitleSource] = useState(artwork?.title_source || 'manual')
|
||
const [descriptionSource, setDescriptionSource] = useState(artwork?.description_source || 'manual')
|
||
const [tagsSource, setTagsSource] = useState(artwork?.tags_source || 'manual')
|
||
const [categorySource, setCategorySource] = useState(artwork?.category_source || 'manual')
|
||
const [evolutionTarget, setEvolutionTarget] = useState(initialEvolutionRelation?.target_artwork || null)
|
||
const [evolutionRelationType, setEvolutionRelationType] = useState(initialEvolutionRelation?.relation_type || evolutionRelationTypes[0]?.value || 'remake_of')
|
||
const [evolutionNote, setEvolutionNote] = useState(initialEvolutionRelation?.note || '')
|
||
const [saving, setSaving] = useState(false)
|
||
const [saved, setSaved] = useState(false)
|
||
const [errors, setErrors] = useState({})
|
||
const [aiData, setAiData] = useState(null)
|
||
const [aiLoading, setAiLoading] = useState(false)
|
||
const [aiAction, setAiAction] = useState('')
|
||
const [aiDirect, setAiDirect] = useState(false)
|
||
const [isAiPanelOpen, setIsAiPanelOpen] = useState(true)
|
||
const [isAiDebugOpen, setIsAiDebugOpen] = useState(false)
|
||
const [lastAiRequest, setLastAiRequest] = useState(null)
|
||
const [selectedAiTags, setSelectedAiTags] = useState([])
|
||
const [activeTab, setActiveTab] = useState('details')
|
||
const [isCategoryChooserOpen, setIsCategoryChooserOpen] = useState(() => !artwork?.parent_category_id)
|
||
const [nowMs, setNowMs] = useState(() => Date.now())
|
||
const userTimezone = useMemo(() => artwork?.artwork_timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, [artwork?.artwork_timezone])
|
||
|
||
// File replace
|
||
const fileInputRef = useRef(null)
|
||
const [replacing, setReplacing] = useState(false)
|
||
const [thumbUrl, setThumbUrl] = useState(artwork?.thumb_url_lg || artwork?.thumb_url || null)
|
||
const downloadUrl = artwork?.download_url || (artwork?.id ? `/download/artwork/${artwork.id}` : null)
|
||
const [selectedMediaId, setSelectedMediaId] = useState('cover')
|
||
const [fileExt, setFileExt] = useState(artwork?.file_ext || '')
|
||
const [mimeType, setMimeType] = useState(artwork?.mime_type || '')
|
||
const [hasArchiveFile, setHasArchiveFile] = useState(Boolean(artwork?.has_archive_file))
|
||
const [artworkScreenshots, setArtworkScreenshots] = useState(() => (Array.isArray(artwork?.screenshots) ? artwork.screenshots : []))
|
||
const [fileMeta, setFileMeta] = useState({
|
||
name: artwork?.file_name || '—',
|
||
size: artwork?.file_size || 0,
|
||
width: artwork?.width || 0,
|
||
height: artwork?.height || 0,
|
||
})
|
||
const [versionCount, setVersionCount] = useState(artwork?.version_count ?? 1)
|
||
const [requiresReapproval, setRequiresReapproval] = useState(artwork?.requires_reapproval ?? false)
|
||
const [changeNote, setChangeNote] = useState('')
|
||
const [showChangeNote, setShowChangeNote] = useState(false)
|
||
|
||
// Version history
|
||
const [showHistory, setShowHistory] = useState(false)
|
||
const [historyData, setHistoryData] = useState(null)
|
||
const [historyLoading, setHistoryLoading] = useState(false)
|
||
const [restoring, setRestoring] = useState(null)
|
||
const [archiveRevisionSaving, setArchiveRevisionSaving] = useState(false)
|
||
const [archiveRevisionError, setArchiveRevisionError] = useState('')
|
||
const [archiveCoverFile, setArchiveCoverFile] = useState(null)
|
||
const [archiveCoverPreview, setArchiveCoverPreview] = useState(null)
|
||
const [archivePackageFile, setArchivePackageFile] = useState(null)
|
||
const [archiveExtraScreenshots, setArchiveExtraScreenshots] = useState([])
|
||
const [archiveExtraPreviews, setArchiveExtraPreviews] = useState([])
|
||
// Per-slot screenshot replacement: { slotIndex: File }
|
||
const [replaceShots, setReplaceShots] = useState({})
|
||
const [replaceShotPreviews, setReplaceShotPreviews] = useState({})
|
||
const [removedShots, setRemovedShots] = useState({})
|
||
// Staged single-image replace (no auto-upload)
|
||
const [pendingReplaceFile, setPendingReplaceFile] = useState(null)
|
||
const [pendingReplacePreview, setPendingReplacePreview] = useState(null)
|
||
// Drag-over tracking for drop zones
|
||
const [dragOverZone, setDragOverZone] = useState(null)
|
||
const screenshotItems = artworkScreenshots
|
||
const activeScreenshotCount = screenshotItems.filter((_, index) => !removedShots[index]).length
|
||
const currentFileExt = resolveFileExtension(fileMeta.name, fileExt)
|
||
const archiveArtwork = hasArchiveFile || isArchiveArtwork(fileMeta.name, mimeType, fileExt)
|
||
const quickReplaceSupported = !archiveArtwork
|
||
const mediaItems = useMemo(() => {
|
||
const coverItem = {
|
||
id: 'cover',
|
||
label: archiveArtwork ? 'Cover preview' : 'Main artwork',
|
||
url: thumbUrl,
|
||
width: fileMeta.width || 0,
|
||
height: fileMeta.height || 0,
|
||
}
|
||
|
||
const screenshotMedia = screenshotItems.map((item, index) => ({
|
||
id: item.id || `shot-${index + 1}`,
|
||
label: item.label || `Screenshot ${index + 1}`,
|
||
url: item.thumb_url || item.url || null,
|
||
width: 0,
|
||
height: 0,
|
||
}))
|
||
|
||
return [coverItem, ...screenshotMedia].filter((item) => Boolean(item.url))
|
||
}, [archiveArtwork, fileMeta.height, fileMeta.width, screenshotItems, thumbUrl])
|
||
const activeMedia = mediaItems.find((item) => item.id === selectedMediaId) || mediaItems[0] || null
|
||
const activeMediaLabel = activeMedia?.label || (archiveArtwork ? 'Cover preview' : 'Main artwork')
|
||
|
||
// ── Derived ────────────────────────────────────────────────────────────────
|
||
const selectedCT = contentTypes.find((ct) => ct.id === contentTypeId) || null
|
||
const rootCategories = selectedCT?.rootCategories || []
|
||
const selectedRoot = rootCategories.find((c) => c.id === categoryId) || null
|
||
const subCategories = selectedRoot?.children || []
|
||
const selectedGroupOption = useMemo(() => groupOptions.find((group) => String(group.slug || '') === String(groupSlug || '')) || null, [groupOptions, groupSlug])
|
||
const currentContributorOptions = useMemo(() => {
|
||
const selectedSlug = String(groupSlug || '')
|
||
return Array.isArray(contributorOptionsByGroup?.[selectedSlug]) ? contributorOptionsByGroup[selectedSlug] : []
|
||
}, [contributorOptionsByGroup, groupSlug])
|
||
const aiStatus = aiData?.status || artwork?.ai_status || 'not_analyzed'
|
||
const aiSuggestedTags = useMemo(() => (aiData?.tag_suggestions || []).map((item) => item.tag).filter(Boolean), [aiData])
|
||
const selectedLeafCategoryId = subCategoryId || categoryId || null
|
||
const visibilitySummary = publishMode === 'schedule'
|
||
? `Scheduled as ${visibilityLabel(visibility)}`
|
||
: visibilityLabel(visibility)
|
||
const selectedSubCategory = subCategoryId ? subCategories.find((item) => item.id === subCategoryId) || null : null
|
||
const heroMeta = [
|
||
selectedCT?.name || 'No content type',
|
||
selectedRoot?.name || 'No root category',
|
||
selectedSubCategory?.name || null,
|
||
].filter(Boolean)
|
||
const categoryPreviewSummary = [selectedCT?.name, selectedRoot?.name, selectedSubCategory?.name].filter(Boolean).join(' / ') || 'Choose a category path'
|
||
const visibilityPreviewHint = publishMode === 'schedule'
|
||
? 'Hidden until the scheduled publish time.'
|
||
: visibility === 'private'
|
||
? 'Draft-only visibility.'
|
||
: visibility === 'unlisted'
|
||
? 'Accessible by direct link.'
|
||
: 'Visible to everyone immediately.'
|
||
const hasScheduledRelease = publishMode === 'schedule' && Boolean(scheduledAt)
|
||
const schedulePreviewSummary = hasScheduledRelease
|
||
? formatReleaseCountdown(scheduledAt, nowMs)
|
||
: ''
|
||
const schedulePreviewHint = hasScheduledRelease
|
||
? formatSchedulePreview(scheduledAt, userTimezone)
|
||
: ''
|
||
const publishingIdentityOptions = useMemo(() => {
|
||
const personalOption = {
|
||
value: '',
|
||
label: 'Personal profile',
|
||
icon: <i className="fa-solid fa-user text-[11px] text-sky-200" aria-hidden="true" />,
|
||
contextLabel: 'Publish under your own creator identity',
|
||
}
|
||
|
||
const groupItems = groupOptions.map((group) => ({
|
||
value: group.slug,
|
||
label: group.name,
|
||
icon: <i className="fa-solid fa-users text-[11px] text-violet-200" aria-hidden="true" />,
|
||
contextLabel: 'Publish under the shared group identity',
|
||
}))
|
||
|
||
return [personalOption, ...groupItems]
|
||
}, [groupOptions])
|
||
const primaryAuthorOptions = useMemo(() => currentContributorOptions.map((user) => ({
|
||
value: Number(user.id),
|
||
label: user.name || user.username,
|
||
username: user.username,
|
||
avatarUrl: user.avatar_url || null,
|
||
})), [currentContributorOptions])
|
||
const selectedEvolutionType = evolutionRelationTypes.find((option) => String(option.value) === String(evolutionRelationType)) || evolutionRelationTypes[0] || null
|
||
|
||
// ── Handlers ───────────────────────────────────────────────────────────────
|
||
const handleContentTypeChange = (id) => {
|
||
setContentTypeId(id)
|
||
setCategoryId(null)
|
||
setSubCategoryId(null)
|
||
setIsCategoryChooserOpen(true)
|
||
setCategorySource((current) => nextSourceForManualEdit(current))
|
||
}
|
||
|
||
const handleCategoryChange = (id) => {
|
||
setCategoryId(id)
|
||
setSubCategoryId(null)
|
||
setIsCategoryChooserOpen(false)
|
||
setCategorySource((current) => nextSourceForManualEdit(current))
|
||
}
|
||
|
||
const handleSubCategoryChange = (id) => {
|
||
setSubCategoryId(id)
|
||
setCategorySource((current) => nextSourceForManualEdit(current))
|
||
}
|
||
|
||
const handleTitleChange = (e) => {
|
||
setTitle(e.target.value)
|
||
setTitleSource((current) => nextSourceForManualEdit(current))
|
||
}
|
||
|
||
const handleDescriptionChange = (value) => {
|
||
setDescription(value)
|
||
setDescriptionSource((current) => nextSourceForManualEdit(current))
|
||
}
|
||
|
||
const handleTagChange = (nextTags) => {
|
||
setTagSlugs(nextTags)
|
||
setTagsSource((current) => nextSourceForManualEdit(current))
|
||
}
|
||
|
||
const loadAiData = useCallback(async (silent = false) => {
|
||
if (!artwork?.id) return
|
||
if (!silent) setAiLoading(true)
|
||
try {
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/ai`, {
|
||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
})
|
||
if (!res.ok) return
|
||
const data = await res.json()
|
||
setAiData(data.data || null)
|
||
setSelectedAiTags((data.data?.tag_suggestions || []).map((item) => item.tag).filter(Boolean))
|
||
} catch (err) {
|
||
console.error('AI assist load failed:', err)
|
||
} finally {
|
||
if (!silent) setAiLoading(false)
|
||
}
|
||
}, [artwork?.id])
|
||
|
||
const syncCurrentPayload = useCallback((current) => {
|
||
if (!current) return
|
||
setTitle(current.title || '')
|
||
setDescription(current.description || '')
|
||
setTagSlugs(Array.isArray(current.tags) ? current.tags : [])
|
||
setContentTypeId(current.content_type_id || null)
|
||
setCategoryId(current.category_id || null)
|
||
setSubCategoryId(null)
|
||
setTitleSource(current.sources?.title || 'manual')
|
||
setDescriptionSource(current.sources?.description || 'manual')
|
||
setTagsSource(current.sources?.tags || 'manual')
|
||
setCategorySource(current.sources?.category || 'manual')
|
||
}, [])
|
||
|
||
const trackAiEvent = useCallback(async (eventType, meta = {}) => {
|
||
if (!artwork?.id) return
|
||
try {
|
||
await fetch(`/api/studio/artworks/${artwork.id}/ai/events`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify({ event_type: eventType, meta }),
|
||
})
|
||
} catch (err) {
|
||
console.error('AI event track failed:', err)
|
||
}
|
||
}, [artwork?.id])
|
||
|
||
const triggerAi = useCallback(async (action = 'analyze', options = {}) => {
|
||
if (!artwork?.id) return
|
||
setAiAction(action)
|
||
try {
|
||
const direct = typeof options.direct === 'boolean' ? options.direct : aiDirect
|
||
const intent = options.intent || 'analyze'
|
||
const requestBody = { direct, intent }
|
||
setLastAiRequest({
|
||
endpoint: `/api/studio/artworks/${artwork.id}/ai/${action}`,
|
||
method: 'POST',
|
||
body: requestBody,
|
||
at: new Date().toISOString(),
|
||
})
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/ai/${action}`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(requestBody),
|
||
})
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (direct && data?.data) {
|
||
setAiData(data.data)
|
||
} else {
|
||
await loadAiData(true)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('AI assist request failed:', err)
|
||
} finally {
|
||
setAiAction('')
|
||
}
|
||
}, [aiDirect, artwork?.id, loadAiData])
|
||
|
||
const persistAiAction = useCallback(async (payload) => {
|
||
if (!artwork?.id) return
|
||
setAiAction('apply')
|
||
try {
|
||
setLastAiRequest({
|
||
endpoint: `/api/studio/artworks/${artwork.id}/ai/apply`,
|
||
method: 'POST',
|
||
body: payload,
|
||
at: new Date().toISOString(),
|
||
})
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/ai/apply`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(payload),
|
||
})
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
if (data?.data) {
|
||
setAiData(data.data)
|
||
syncCurrentPayload(data.data.current)
|
||
setSelectedAiTags((data.data.tag_suggestions || []).map((item) => item.tag).filter(Boolean))
|
||
} else {
|
||
await loadAiData(true)
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('AI assist apply failed:', err)
|
||
} finally {
|
||
setAiAction('')
|
||
}
|
||
}, [artwork?.id, loadAiData, syncCurrentPayload])
|
||
|
||
const copyText = useCallback(async (value) => {
|
||
if (!value) return
|
||
try {
|
||
await window.navigator?.clipboard?.writeText(value)
|
||
trackAiEvent('suggestion_copied', { length: value.length })
|
||
} catch (err) {
|
||
console.error('Clipboard write failed:', err)
|
||
}
|
||
}, [trackAiEvent])
|
||
|
||
const applyTitleSuggestion = useCallback((value, mode = 'replace') => {
|
||
persistAiAction({ title: value, title_mode: mode })
|
||
}, [persistAiAction])
|
||
|
||
const applyDescriptionSuggestion = useCallback((value, mode = 'replace') => {
|
||
persistAiAction({ description: value, description_mode: mode })
|
||
}, [persistAiAction])
|
||
|
||
const applyTagSuggestions = useCallback((values, mode = 'add') => {
|
||
const normalized = Array.isArray(values) ? values.filter(Boolean) : []
|
||
if (normalized.length === 0) return
|
||
persistAiAction({ tags: normalized, tag_mode: mode })
|
||
}, [persistAiAction])
|
||
|
||
const applyCategorySuggestion = useCallback((suggestion, mode = 'both') => {
|
||
if (!suggestion) return
|
||
const payload = {}
|
||
if (mode === 'content_type' || mode === 'both') {
|
||
payload.content_type_id = suggestion.content_type_id || suggestion.id || null
|
||
}
|
||
if (mode === 'category' || mode === 'both') {
|
||
payload.category_id = suggestion.root_category_id || suggestion.id || null
|
||
}
|
||
persistAiAction(payload)
|
||
}, [persistAiAction])
|
||
|
||
const toggleSuggestedTag = useCallback((tag) => {
|
||
if (!tag) return
|
||
setSelectedAiTags((current) => current.includes(tag)
|
||
? current.filter((item) => item !== tag)
|
||
: [...current, tag])
|
||
}, [])
|
||
|
||
const handleImproveAll = useCallback(() => {
|
||
if (aiStatus !== 'ready') {
|
||
triggerAi('analyze', { intent: 'analyze' })
|
||
return
|
||
}
|
||
const bestTitle = aiData?.title_suggestions?.[0]?.text
|
||
const bestDescription = aiData?.description_suggestions?.find((item) => item.variant === 'normal')?.text
|
||
|| aiData?.description_suggestions?.[0]?.text
|
||
const bestCategory = aiData?.category
|
||
const payload = {}
|
||
if (bestTitle) {
|
||
payload.title = bestTitle
|
||
payload.title_mode = 'replace'
|
||
}
|
||
if (bestDescription) {
|
||
payload.description = bestDescription
|
||
payload.description_mode = 'replace'
|
||
}
|
||
if (aiSuggestedTags.length > 0) {
|
||
payload.tags = aiSuggestedTags
|
||
payload.tag_mode = 'add'
|
||
}
|
||
if (bestCategory?.content_type_id) {
|
||
payload.content_type_id = bestCategory.content_type_id
|
||
}
|
||
if (bestCategory?.root_category_id || bestCategory?.id) {
|
||
payload.category_id = bestCategory.root_category_id || bestCategory.id
|
||
}
|
||
if (Object.keys(payload).length > 0) {
|
||
persistAiAction(payload)
|
||
}
|
||
trackAiEvent('improve_all_applied', {
|
||
applied_title: Boolean(bestTitle),
|
||
applied_description: Boolean(bestDescription),
|
||
applied_tags: aiSuggestedTags.length > 0,
|
||
applied_category: Boolean(bestCategory),
|
||
})
|
||
}, [aiData, aiStatus, aiSuggestedTags, persistAiAction, trackAiEvent, triggerAi])
|
||
|
||
const aiDebugPayload = useMemo(() => ({
|
||
last_editor_request: lastAiRequest,
|
||
stored_debug: aiData?.debug || null,
|
||
}), [aiData?.debug, lastAiRequest])
|
||
|
||
const requestAiIntent = useCallback((intent, action = null) => {
|
||
const nextAction = action || (aiStatus === 'ready' ? 'regenerate' : 'analyze')
|
||
trackAiEvent('intent_requested', { intent, action: nextAction })
|
||
triggerAi(nextAction, { intent })
|
||
}, [aiStatus, trackAiEvent, triggerAi])
|
||
|
||
const toggleAiPanel = useCallback(() => {
|
||
setIsAiPanelOpen((current) => {
|
||
const next = !current
|
||
trackAiEvent('panel_toggled', { open: next })
|
||
return next
|
||
})
|
||
}, [trackAiEvent])
|
||
|
||
useEffect(() => {
|
||
loadAiData()
|
||
}, [loadAiData])
|
||
|
||
useEffect(() => {
|
||
if (aiStatus !== 'queued' && aiStatus !== 'processing') return undefined
|
||
const timer = window.setInterval(() => loadAiData(true), 4000)
|
||
return () => window.clearInterval(timer)
|
||
}, [aiStatus, loadAiData])
|
||
|
||
useEffect(() => {
|
||
if (!hasScheduledRelease) return undefined
|
||
|
||
const timer = window.setInterval(() => {
|
||
setNowMs(Date.now())
|
||
}, 1000)
|
||
|
||
return () => window.clearInterval(timer)
|
||
}, [hasScheduledRelease])
|
||
|
||
useEffect(() => {
|
||
const selectedSlug = String(groupSlug || '')
|
||
if (!selectedSlug) {
|
||
if (primaryAuthorUserId || contributorUserIds.length > 0 || Object.keys(contributorCredits || {}).length > 0) {
|
||
setPrimaryAuthorUserId(null)
|
||
setContributorUserIds([])
|
||
setContributorCredits({})
|
||
}
|
||
return
|
||
}
|
||
|
||
const validGroup = groupOptions.some((group) => String(group.slug || '') === selectedSlug)
|
||
if (!validGroup) {
|
||
setGroupSlug('')
|
||
setPrimaryAuthorUserId(null)
|
||
setContributorUserIds([])
|
||
setContributorCredits({})
|
||
return
|
||
}
|
||
|
||
const validContributorIds = currentContributorOptions.map((user) => Number(user.id)).filter((id) => Number.isFinite(id) && id > 0)
|
||
const nextPrimaryAuthorId = validContributorIds.includes(Number(primaryAuthorUserId))
|
||
? Number(primaryAuthorUserId)
|
||
: (validContributorIds[0] || null)
|
||
|
||
const nextContributorIds = contributorUserIds
|
||
.map((id) => Number(id))
|
||
.filter((id) => validContributorIds.includes(id) && id !== nextPrimaryAuthorId)
|
||
|
||
const nextContributorCredits = normalizeContributorCredits(nextContributorIds, contributorCredits)
|
||
const primaryChanged = (primaryAuthorUserId ? Number(primaryAuthorUserId) : null) !== nextPrimaryAuthorId
|
||
const contributorsChanged = nextContributorIds.length !== contributorUserIds.length || nextContributorIds.some((id, index) => id !== contributorUserIds[index])
|
||
const contributorCreditsChanged = JSON.stringify(nextContributorCredits) !== JSON.stringify(normalizeContributorCredits(contributorUserIds, contributorCredits))
|
||
|
||
if (primaryChanged) setPrimaryAuthorUserId(nextPrimaryAuthorId)
|
||
if (contributorsChanged) setContributorUserIds(nextContributorIds)
|
||
if (contributorCreditsChanged) setContributorCredits(nextContributorCredits)
|
||
}, [groupSlug, groupOptions, currentContributorOptions, primaryAuthorUserId, contributorUserIds, contributorCredits])
|
||
|
||
const handleSave = useCallback(async () => {
|
||
setSaving(true)
|
||
setSaved(false)
|
||
setErrors({})
|
||
try {
|
||
const payload = {
|
||
title,
|
||
description,
|
||
visibility,
|
||
mode: publishMode,
|
||
publish_at: publishMode === 'schedule' ? scheduledAt : null,
|
||
timezone: userTimezone,
|
||
group: groupSlug || null,
|
||
primary_author_user_id: groupSlug ? primaryAuthorUserId : null,
|
||
contributor_user_ids: groupSlug ? contributorUserIds : [],
|
||
contributor_credits: groupSlug
|
||
? contributorUserIds.map((id) => ({
|
||
user_id: id,
|
||
credit_role: contributorCredits?.[id]?.creditRole?.trim() ? contributorCredits[id].creditRole.trim() : null,
|
||
is_primary: Boolean(contributorCredits?.[id]?.isPrimary),
|
||
}))
|
||
: [],
|
||
content_type_id: contentTypeId,
|
||
category_id: selectedLeafCategoryId,
|
||
tags: tagSlugs,
|
||
title_source: titleSource,
|
||
description_source: descriptionSource,
|
||
tags_source: tagsSource,
|
||
category_source: categorySource,
|
||
evolution_target_artwork_id: evolutionTarget?.id || null,
|
||
evolution_relation_type: evolutionTarget ? evolutionRelationType : null,
|
||
evolution_note: evolutionTarget ? evolutionNote : null,
|
||
}
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(payload),
|
||
})
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
const updatedArtwork = data?.artwork || null
|
||
const updatedEvolutionRelation = data?.evolution_relation || updatedArtwork?.evolution_relation || null
|
||
if (updatedArtwork) {
|
||
setVisibility(updatedArtwork.visibility || visibility)
|
||
setPublishMode(updatedArtwork.publish_mode || 'now')
|
||
setScheduledAt(updatedArtwork.publish_at || null)
|
||
setGroupSlug(updatedArtwork.group_slug || '')
|
||
setPrimaryAuthorUserId(updatedArtwork.primary_author_user_id || null)
|
||
setContributorUserIds(Array.isArray(updatedArtwork.contributor_user_ids) ? updatedArtwork.contributor_user_ids.map((id) => Number(id)).filter((id) => Number.isFinite(id) && id > 0) : [])
|
||
setContributorCredits(normalizeContributorCredits(updatedArtwork.contributor_user_ids || [], mapContributorCredits(updatedArtwork.contributor_credits || [])))
|
||
}
|
||
setEvolutionTarget(updatedEvolutionRelation?.target_artwork || null)
|
||
setEvolutionRelationType(updatedEvolutionRelation?.relation_type || evolutionRelationTypes[0]?.value || 'remake_of')
|
||
setEvolutionNote(updatedEvolutionRelation?.note || '')
|
||
setSaved(true)
|
||
setTimeout(() => setSaved(false), 3000)
|
||
} else {
|
||
const data = await res.json()
|
||
if (data.errors) setErrors(data.errors)
|
||
}
|
||
} catch (err) {
|
||
console.error('Save failed:', err)
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}, [title, description, visibility, publishMode, scheduledAt, userTimezone, groupSlug, primaryAuthorUserId, contributorUserIds, contributorCredits, contentTypeId, selectedLeafCategoryId, tagSlugs, titleSource, descriptionSource, tagsSource, categorySource, evolutionTarget, evolutionRelationType, evolutionNote, artwork?.id, evolutionRelationTypes])
|
||
|
||
const handleFileReplace = async (file) => {
|
||
if (!file) return
|
||
setReplacing(true)
|
||
try {
|
||
const fd = new FormData()
|
||
fd.append('file', file)
|
||
if (changeNote.trim()) fd.append('change_note', changeNote.trim())
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/replace-file`, {
|
||
method: 'POST',
|
||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
body: fd,
|
||
})
|
||
const data = await res.json()
|
||
if (res.ok && data.thumb_url) {
|
||
syncMediaPayload(data, { fallbackName: file.name, fallbackSize: file.size })
|
||
if (data.version_number) setVersionCount(data.version_number)
|
||
if (typeof data.requires_reapproval !== 'undefined') setRequiresReapproval(data.requires_reapproval)
|
||
setChangeNote('')
|
||
setShowChangeNote(false)
|
||
if (pendingReplacePreview) { URL.revokeObjectURL(pendingReplacePreview); setPendingReplacePreview(null) }
|
||
setPendingReplaceFile(null)
|
||
} else {
|
||
alert(data.error || 'File replacement failed.')
|
||
}
|
||
} catch (err) {
|
||
console.error('File replace failed:', err)
|
||
} finally {
|
||
setReplacing(false)
|
||
if (fileInputRef.current) fileInputRef.current.value = ''
|
||
}
|
||
}
|
||
|
||
const loadVersionHistory = async () => {
|
||
setHistoryLoading(true)
|
||
setShowHistory(true)
|
||
try {
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/versions`, {
|
||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
})
|
||
setHistoryData(await res.json())
|
||
} catch (err) {
|
||
console.error('Failed to load version history:', err)
|
||
} finally {
|
||
setHistoryLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleRestoreVersion = async (versionId) => {
|
||
if (!window.confirm('Restore this version? A copy will become the new current version.')) return
|
||
setRestoring(versionId)
|
||
try {
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/restore/${versionId}`, {
|
||
method: 'POST',
|
||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
})
|
||
const data = await res.json()
|
||
if (res.ok && data.success) {
|
||
syncMediaPayload(data)
|
||
if (data.version_number) setVersionCount(data.version_number)
|
||
setShowHistory(false)
|
||
} else {
|
||
alert(data.error || 'Restore failed.')
|
||
}
|
||
} catch (err) {
|
||
console.error('Restore failed:', err)
|
||
} finally {
|
||
setRestoring(null)
|
||
}
|
||
}
|
||
|
||
const syncMediaPayload = useCallback((payload, options = {}) => {
|
||
const fallbackName = typeof options.fallbackName === 'string' ? options.fallbackName : null
|
||
const fallbackSize = Number.isFinite(options.fallbackSize) ? Number(options.fallbackSize) : null
|
||
|
||
if (payload?.thumb_url) {
|
||
setThumbUrl(payload.thumb_url_lg || payload.thumb_url)
|
||
}
|
||
|
||
setSelectedMediaId('cover')
|
||
setFileMeta({
|
||
name: payload?.file_name || fallbackName || '—',
|
||
size: typeof payload?.file_size === 'number' ? payload.file_size : (fallbackSize ?? 0),
|
||
width: payload?.width || 0,
|
||
height: payload?.height || 0,
|
||
})
|
||
|
||
if (typeof payload?.file_ext === 'string') setFileExt(payload.file_ext)
|
||
if (typeof payload?.mime_type === 'string') setMimeType(payload.mime_type)
|
||
if (typeof payload?.has_archive_file !== 'undefined') setHasArchiveFile(Boolean(payload.has_archive_file))
|
||
if (Array.isArray(payload?.screenshots)) setArtworkScreenshots(payload.screenshots)
|
||
}, [])
|
||
|
||
const resetArchiveRevisionState = useCallback(() => {
|
||
setArchiveRevisionError('')
|
||
if (archiveCoverPreview) URL.revokeObjectURL(archiveCoverPreview)
|
||
setArchiveCoverFile(null)
|
||
setArchiveCoverPreview(null)
|
||
setArchivePackageFile(null)
|
||
setArchiveExtraScreenshots([])
|
||
archiveExtraPreviews.forEach((url) => URL.revokeObjectURL(url))
|
||
setArchiveExtraPreviews([])
|
||
Object.values(replaceShotPreviews).forEach((url) => URL.revokeObjectURL(url))
|
||
setReplaceShots({})
|
||
setReplaceShotPreviews({})
|
||
setRemovedShots({})
|
||
}, [archiveCoverPreview, archiveExtraPreviews, replaceShotPreviews])
|
||
|
||
const handleArchiveRevisionSubmit = async () => {
|
||
const hasReplaceShots = Object.values(replaceShots).some(Boolean)
|
||
const hasRemovedShots = Object.values(removedShots).some(Boolean)
|
||
if (!archiveCoverFile && !archivePackageFile && archiveExtraScreenshots.length === 0 && !hasReplaceShots && !hasRemovedShots) {
|
||
setArchiveRevisionError('Choose a new cover screenshot, a new archive file, or extra screenshots first.')
|
||
return
|
||
}
|
||
|
||
setArchiveRevisionSaving(true)
|
||
setArchiveRevisionError('')
|
||
|
||
try {
|
||
const fd = new FormData()
|
||
if (archiveCoverFile) fd.append('cover_file', archiveCoverFile)
|
||
if (archivePackageFile) fd.append('archive_file', archivePackageFile)
|
||
archiveExtraScreenshots.forEach((file) => fd.append('screenshot_files[]', file))
|
||
Object.entries(replaceShots).forEach(([idx, file]) => {
|
||
if (file) fd.append(`replace_shots[${idx}]`, file)
|
||
})
|
||
Object.entries(removedShots).forEach(([idx, removed]) => {
|
||
if (removed) fd.append('remove_shots[]', idx)
|
||
})
|
||
if (changeNote.trim()) fd.append('change_note', changeNote.trim())
|
||
|
||
const res = await fetch(`/api/studio/artworks/${artwork.id}/revise-media`, {
|
||
method: 'POST',
|
||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||
credentials: 'same-origin',
|
||
body: fd,
|
||
})
|
||
|
||
const data = await res.json()
|
||
if (!res.ok || !data.success) {
|
||
setArchiveRevisionError(data.error || 'Archive revision failed.')
|
||
return
|
||
}
|
||
|
||
syncMediaPayload(data)
|
||
if (data.version_number) setVersionCount(data.version_number)
|
||
if (typeof data.requires_reapproval !== 'undefined') setRequiresReapproval(data.requires_reapproval)
|
||
setShowChangeNote(false)
|
||
setChangeNote('')
|
||
resetArchiveRevisionState()
|
||
} catch (err) {
|
||
console.error('Archive revision failed:', err)
|
||
setArchiveRevisionError('Archive revision failed.')
|
||
} finally {
|
||
setArchiveRevisionSaving(false)
|
||
}
|
||
}
|
||
|
||
// ── Render ─────────────────────────────────────────────────────────────────
|
||
return (
|
||
<StudioLayout title="Edit Artwork">
|
||
|
||
{/* ── Page Header ── */}
|
||
<div className="flex items-center justify-between gap-4 mb-4">
|
||
<div className="flex items-center gap-4 min-w-0">
|
||
<Link
|
||
href="/studio/artworks"
|
||
className="flex items-center justify-center w-9 h-9 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 transition-all shrink-0"
|
||
aria-label="Back to artworks"
|
||
>
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
||
<path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</Link>
|
||
<div className="min-w-0">
|
||
<h1 className="text-lg font-bold text-white truncate">
|
||
{title || 'Untitled artwork'}
|
||
</h1>
|
||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||
<span>Editing</span>
|
||
<span className="h-1 w-1 rounded-full bg-slate-600" />
|
||
<span className={publishMode === 'schedule' ? 'text-sky-300' : visibility === 'private' ? 'text-amber-400' : 'text-emerald-400'}>
|
||
{visibilitySummary}
|
||
</span>
|
||
{heroMeta.map((item) => (
|
||
<React.Fragment key={item}>
|
||
<span className="h-1 w-1 rounded-full bg-slate-600" />
|
||
<span>{item}</span>
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Two-column Layout ── */}
|
||
<div className="grid grid-cols-1 gap-6 items-start xl:grid-cols-[300px_minmax(0,1fr)]">
|
||
|
||
{/* ─────────── LEFT SIDEBAR ─────────── */}
|
||
<div className="space-y-4 xl:sticky xl:top-6 xl:max-h-[calc(100vh-48px)] xl:overflow-y-auto xl:overscroll-contain xl:pr-1 nova-scrollbar">
|
||
|
||
{/* Preview Card */}
|
||
<Section className="overflow-hidden">
|
||
<SectionTitle icon="fa-solid fa-image">Media</SectionTitle>
|
||
|
||
<div className="space-y-4">
|
||
<div className="rounded-[28px] border border-white/10 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.14),_transparent_54%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-3 shadow-[0_20px_60px_rgba(2,8,23,0.28)]">
|
||
<div className="relative overflow-hidden rounded-[22px] border border-white/10 bg-black/25">
|
||
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 flex items-start justify-between gap-2 p-3">
|
||
<span className="rounded-full border border-white/10 bg-black/45 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-white/75">
|
||
{archiveArtwork ? 'Archive package' : 'Single image'}
|
||
</span>
|
||
<span className="rounded-full border border-accent/20 bg-accent/12 px-2.5 py-1 text-[10px] font-semibold text-accent">
|
||
v{versionCount}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="relative aspect-[4/5] min-h-[280px]">
|
||
{activeMedia?.url ? (
|
||
<img
|
||
src={activeMedia.url}
|
||
alt={title || 'Artwork preview'}
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
) : (
|
||
<div className="flex h-full w-full items-center justify-center text-slate-600">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
|
||
<path d="M21 15l-5-5L5 21" />
|
||
</svg>
|
||
</div>
|
||
)}
|
||
|
||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-black/85 via-black/45 to-transparent p-4">
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/50">{activeMediaLabel}</p>
|
||
<p className="mt-1 truncate text-sm font-semibold text-white" title={fileMeta.name}>{fileMeta.name}</p>
|
||
<div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-white/65">
|
||
{currentFileExt && (
|
||
<span className="rounded-full border border-white/10 bg-white/10 px-2 py-0.5 uppercase tracking-[0.14em] text-white/70">{currentFileExt}</span>
|
||
)}
|
||
{screenshotItems.length > 0 && (
|
||
<span>{screenshotItems.length} screenshot{screenshotItems.length !== 1 ? 's' : ''}</span>
|
||
)}
|
||
{fileMeta.width > 0 && (
|
||
<span>{fileMeta.width} × {fileMeta.height}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{replacing && (
|
||
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/60">
|
||
<div className="flex items-center gap-3 rounded-full border border-white/10 bg-black/55 px-4 py-2 text-xs text-white/80 backdrop-blur">
|
||
<div className="h-5 w-5 rounded-full border-2 border-accent/30 border-t-accent animate-spin" />
|
||
Uploading new revision…
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-[11px] text-slate-300">
|
||
<span className="font-semibold uppercase tracking-[0.16em] text-slate-500">Size</span>
|
||
<span className="font-semibold text-white">{formatBytes(fileMeta.size)}</span>
|
||
</div>
|
||
|
||
{downloadUrl ? (
|
||
<a
|
||
href={downloadUrl}
|
||
aria-label="Download artwork"
|
||
title="Download artwork"
|
||
className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-emerald-400/25 bg-emerald-400/10 text-emerald-200 transition hover:bg-emerald-400/15 hover:text-white"
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||
<path d="M8.75 1.5a.75.75 0 00-1.5 0v6.19L5.53 5.97a.75.75 0 10-1.06 1.06l3 3a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06L8.75 7.69V1.5z" />
|
||
<path d="M2.5 10.75A.75.75 0 013.25 10h9.5a.75.75 0 010 1.5h-9.5a.75.75 0 01-.75-.75z" />
|
||
<path d="M2 12.5A1.5 1.5 0 013.5 11h9a1.5 1.5 0 011.5 1.5v1A1.5 1.5 0 0112.5 15h-9A1.5 1.5 0 012 13.5v-1z" />
|
||
</svg>
|
||
</a>
|
||
) : null}
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => setActiveTab('media')}
|
||
className="group flex w-full items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-left transition hover:border-white/20 hover:bg-white/[0.05]"
|
||
>
|
||
<span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-slate-300 transition group-hover:border-accent/30 group-hover:bg-accent/10 group-hover:text-accent">
|
||
<i className="fa-solid fa-photo-film text-[13px]" aria-hidden="true" />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Media</span>
|
||
<span className="mt-1 block text-sm font-medium text-white">
|
||
{archiveArtwork ? 'Manage package and screenshots' : 'Replace image and manage screenshots'}
|
||
</span>
|
||
</span>
|
||
<span className="pt-0.5 text-slate-600 transition group-hover:text-slate-300" aria-hidden="true">
|
||
<i className="fa-solid fa-chevron-right text-[11px]" />
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section className="space-y-3">
|
||
<SectionTitle icon="fa-solid fa-layer-group">Publishing Snapshot</SectionTitle>
|
||
|
||
{[
|
||
{
|
||
id: 'taxonomy',
|
||
label: 'Category',
|
||
value: categoryPreviewSummary,
|
||
hint: categorySource === 'manual' ? 'Manual category path' : `Source: ${String(categorySource).replace(/_/g, ' ')}`,
|
||
icon: 'fa-solid fa-palette',
|
||
},
|
||
{
|
||
id: 'visibility',
|
||
label: 'Visibility',
|
||
value: visibilitySummary,
|
||
hint: visibilityPreviewHint,
|
||
icon: 'fa-solid fa-eye',
|
||
},
|
||
hasScheduledRelease
|
||
? {
|
||
id: 'visibility',
|
||
label: 'Scheduler',
|
||
value: schedulePreviewSummary,
|
||
hint: schedulePreviewHint,
|
||
icon: 'fa-regular fa-clock',
|
||
}
|
||
: null,
|
||
].filter(Boolean).map((item) => (
|
||
<button
|
||
key={`${item.label}-${item.id}`}
|
||
type="button"
|
||
onClick={() => setActiveTab(item.id)}
|
||
className="group flex w-full items-start gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-left transition hover:border-white/20 hover:bg-white/[0.05]"
|
||
>
|
||
<span className="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-slate-300 transition group-hover:border-accent/30 group-hover:bg-accent/10 group-hover:text-accent">
|
||
<i className={`${item.icon} text-[13px]`} aria-hidden="true" />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{item.label}</span>
|
||
<span className="mt-1 block truncate text-sm font-medium text-white" title={item.value}>{item.value}</span>
|
||
<span className="mt-1 block text-xs text-slate-500">{item.hint}</span>
|
||
</span>
|
||
<span className="pt-1 text-slate-600 transition group-hover:text-slate-300" aria-hidden="true">
|
||
<i className="fa-solid fa-chevron-right text-[11px]" />
|
||
</span>
|
||
</button>
|
||
))}
|
||
</Section>
|
||
|
||
{/* Quick Links */}
|
||
<Section className="py-3 px-4">
|
||
<Link
|
||
href={`/studio/artworks/${artwork?.id}/analytics`}
|
||
className="flex items-center gap-3 py-2 text-sm text-slate-400 hover:text-white transition-colors group"
|
||
>
|
||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 group-hover:bg-accent/15 transition-colors">
|
||
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="text-slate-500 group-hover:text-accent transition-colors" aria-hidden="true">
|
||
<path d="M1 11a1 1 0 011-1h2a1 1 0 011 1v3a1 1 0 01-1 1H2a1 1 0 01-1-1v-3zm5-4a1 1 0 011-1h2a1 1 0 011 1v7a1 1 0 01-1 1H7a1 1 0 01-1-1V7zm5-5a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V2z" />
|
||
</svg>
|
||
</span>
|
||
View Analytics
|
||
</Link>
|
||
</Section>
|
||
</div>
|
||
|
||
{/* ─────────── RIGHT MAIN FORM ─────────── */}
|
||
<div className="flex flex-col min-h-0">
|
||
|
||
{/* ── Tab Nav ── */}
|
||
<div className="sticky top-0 z-30 bg-nova-900/95 backdrop-blur-md flex items-stretch border-b border-white/10 mb-6">
|
||
<div className="flex items-center overflow-x-auto flex-1 min-w-0">
|
||
{TABS.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
type="button"
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={[
|
||
'relative flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors',
|
||
activeTab === tab.id
|
||
? 'text-white after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-accent after:rounded-t-full'
|
||
: 'text-slate-400 hover:text-slate-200',
|
||
].join(' ')}
|
||
>
|
||
<i className={`${tab.icon} text-[11px]`} aria-hidden="true" />
|
||
{tab.label}
|
||
{tab.id === 'evolution' && evolutionTarget && (
|
||
<span className="h-1.5 w-1.5 rounded-full bg-sky-400" />
|
||
)}
|
||
{tab.id === 'ai' && aiStatus !== 'not_analyzed' && (
|
||
<span className={`h-1.5 w-1.5 rounded-full ${aiStatus === 'ready' ? 'bg-emerald-400' : aiStatus === 'failed' ? 'bg-red-400' : 'bg-sky-400'}`} />
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center gap-2 px-3 flex-shrink-0">
|
||
{saved && (
|
||
<span className="text-xs text-emerald-400 flex items-center gap-1">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||
<path fillRule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L7 8.586 5.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||
</svg>
|
||
Saved
|
||
</span>
|
||
)}
|
||
<Button variant="accent" size="xs" loading={saving} onClick={handleSave}>
|
||
Save
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Category tab ── */}
|
||
{activeTab === 'taxonomy' && (
|
||
<div className="space-y-6">
|
||
<Section id="taxonomy" className="space-y-6">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<SectionTitle icon="fa-solid fa-palette">Category</SectionTitle>
|
||
<p className="-mt-2 text-sm text-slate-400">Pick a content type from the left, then choose the best category path on the right. The layout keeps the hierarchy visible instead of stretching into one long wall of chips.</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2 text-xs">
|
||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5 text-slate-300">
|
||
<span className="text-slate-500">Type</span>
|
||
<span className="font-semibold text-white">{selectedCT?.name || 'Unset'}</span>
|
||
</span>
|
||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5 text-slate-300">
|
||
<span className="text-slate-500">Path</span>
|
||
<span className="font-semibold text-white">{selectedRoot?.name || 'Choose category'}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-5 xl:grid-cols-[280px_minmax(0,1fr)]">
|
||
<div className="rounded-2xl border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))] p-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h4 className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Content types</h4>
|
||
<p className="mt-1 text-xs text-slate-500">Start here</p>
|
||
</div>
|
||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[11px] text-slate-400">{contentTypes.length}</span>
|
||
</div>
|
||
|
||
<div className="mt-4 space-y-2">
|
||
{contentTypes.map((ct) => {
|
||
const isActive = contentTypeId === ct.id
|
||
const visualKey = getContentTypeVisualKey(ct.slug)
|
||
const categoryCount = ct.rootCategories?.length || 0
|
||
|
||
return (
|
||
<button
|
||
key={ct.id}
|
||
type="button"
|
||
onClick={() => handleContentTypeChange(ct.id)}
|
||
className={[
|
||
'group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition-all',
|
||
isActive
|
||
? 'border-emerald-400/40 bg-emerald-400/10 shadow-[0_0_0_1px_rgba(52,211,153,0.18)]'
|
||
: 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]',
|
||
].join(' ')}
|
||
>
|
||
<div className={`flex h-12 w-12 items-center justify-center rounded-2xl border ${isActive ? 'border-emerald-400/30 bg-emerald-400/10' : 'border-white/10 bg-white/[0.04]'}`}>
|
||
<img
|
||
src={`/gfx/mascot_${visualKey}.webp`}
|
||
alt=""
|
||
className="h-8 w-8 object-contain"
|
||
onError={(e) => { e.target.style.display = 'none' }}
|
||
/>
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className={`text-sm font-semibold ${isActive ? 'text-emerald-200' : 'text-white'}`}>{ct.name}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{categoryCount} {categoryCount === 1 ? 'category' : 'categories'}</div>
|
||
</div>
|
||
<div className={`text-xs ${isActive ? 'text-emerald-300' : 'text-slate-500 group-hover:text-slate-300'}`}>
|
||
{isActive ? 'Selected' : 'Open'}
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(14,165,233,0.08),_rgba(15,23,36,0.92)_52%)] p-4 sm:p-5">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
||
<div>
|
||
<h4 className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Category path</h4>
|
||
<p className="mt-1 text-sm text-slate-400">Choose the main branch first, then refine with a subcategory when needed.</p>
|
||
</div>
|
||
<InlineAiButton onClick={() => requestAiIntent('category')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'}>
|
||
Category
|
||
</InlineAiButton>
|
||
</div>
|
||
|
||
{!selectedCT && (
|
||
<div className="mt-5 rounded-2xl border border-dashed border-white/12 bg-white/[0.02] px-5 py-10 text-center">
|
||
<div className="text-sm font-medium text-white">Select a content type first</div>
|
||
<p className="mt-2 text-sm text-slate-500">Once you choose the content type, the matching category tree will appear here.</p>
|
||
</div>
|
||
)}
|
||
|
||
{selectedCT && (
|
||
<div className="mt-5 space-y-5">
|
||
<div className="flex items-center gap-2 text-sm text-slate-400">
|
||
<span className="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-2.5 py-1 text-emerald-200">{selectedCT.name}</span>
|
||
<span>contains {rootCategories.length} top-level {rootCategories.length === 1 ? 'category' : 'categories'}</span>
|
||
</div>
|
||
|
||
{selectedRoot && !isCategoryChooserOpen && (
|
||
<div className="rounded-2xl border border-purple-400/25 bg-purple-400/[0.08] p-4">
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-purple-200/80">Selected category</div>
|
||
<div className="mt-1 text-lg font-semibold text-white">{selectedRoot.name}</div>
|
||
<div className="mt-1 text-sm text-slate-400">
|
||
{subCategories.length > 0
|
||
? `Next step: choose one of the ${subCategories.length} subcategories below.`
|
||
: 'This category is complete. No subcategory is required.'}
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsCategoryChooserOpen(true)}
|
||
className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm font-medium text-slate-200 transition hover:border-white/20 hover:bg-white/[0.08] hover:text-white"
|
||
>
|
||
Change
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{(!selectedRoot || isCategoryChooserOpen) && (
|
||
<div className="grid gap-3 lg:grid-cols-2">
|
||
{rootCategories.map((cat) => {
|
||
const isActive = categoryId === cat.id
|
||
const childCount = cat.children?.length || 0
|
||
|
||
return (
|
||
<button
|
||
key={cat.id}
|
||
type="button"
|
||
onClick={() => handleCategoryChange(cat.id)}
|
||
className={[
|
||
'rounded-2xl border px-4 py-4 text-left transition-all',
|
||
isActive
|
||
? 'border-purple-400/40 bg-purple-400/12 shadow-[0_0_0_1px_rgba(192,132,252,0.15)]'
|
||
: 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]',
|
||
].join(' ')}
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<div className={`text-sm font-semibold ${isActive ? 'text-purple-200' : 'text-white'}`}>{cat.name}</div>
|
||
<div className="mt-1 text-[11px] text-slate-500">{childCount > 0 ? `${childCount} subcategories available` : 'Standalone category'}</div>
|
||
</div>
|
||
<span className={`rounded-full px-2 py-1 text-[11px] ${isActive ? 'bg-purple-300/15 text-purple-200' : 'bg-white/[0.05] text-slate-500'}`}>
|
||
{isActive ? 'Selected' : 'Choose'}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{selectedRoot && subCategories.length > 0 && (
|
||
<div className="rounded-2xl border border-cyan-400/15 bg-cyan-400/[0.05] p-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h5 className="text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-200/80">Subcategories</h5>
|
||
<p className="mt-1 text-sm text-slate-400">Refine <span className="text-white">{selectedRoot.name}</span> with one more level.</p>
|
||
</div>
|
||
<span className="rounded-full border border-cyan-400/20 bg-cyan-400/10 px-2 py-1 text-[11px] text-cyan-200">{subCategories.length}</span>
|
||
</div>
|
||
|
||
{!subCategoryId && (
|
||
<div className="mt-4 rounded-xl border border-amber-400/20 bg-amber-400/10 px-3 py-2 text-sm text-amber-100">
|
||
Subcategory still needs to be selected.
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-4 flex flex-wrap gap-2.5">
|
||
{subCategories.map((sub) => {
|
||
const isActive = subCategoryId === sub.id
|
||
return (
|
||
<button
|
||
key={sub.id}
|
||
type="button"
|
||
onClick={() => handleSubCategoryChange(sub.id)}
|
||
className={[
|
||
'rounded-xl border px-3 py-2 text-xs font-medium transition-all',
|
||
isActive
|
||
? 'border-cyan-400/40 bg-cyan-400/15 text-cyan-200'
|
||
: 'border-white/10 bg-white/[0.04] text-slate-300 hover:border-white/20 hover:text-white',
|
||
].join(' ')}
|
||
>
|
||
{sub.name}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedRoot && subCategories.length === 0 && (
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-400">
|
||
<span className="text-white font-medium">{selectedRoot.name}</span> does not have subcategories. Selecting it is enough.
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{errors.category_id && <p className="mt-4 text-xs text-red-400">{errors.category_id[0]}</p>}
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Details tab ── */}
|
||
{activeTab === 'details' && (
|
||
<Section id="details" className="space-y-5">
|
||
<SectionTitle icon="fa-solid fa-pen-fancy">Details</SectionTitle>
|
||
|
||
<TextInput
|
||
label={<FieldLabel label={<span className="inline-flex items-center gap-1">Title <span className="text-red-400">*</span></span>} actionLabel="Title" onAction={() => requestAiIntent('title')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />}
|
||
value={title}
|
||
onChange={handleTitleChange}
|
||
placeholder="Give your artwork a title"
|
||
error={errors.title?.[0]}
|
||
/>
|
||
|
||
<FormField label={<FieldLabel label="Description" actionLabel="Description" onAction={() => requestAiIntent('description')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />} htmlFor="artwork-description">
|
||
<RichTextEditor
|
||
content={description}
|
||
onChange={handleDescriptionChange}
|
||
placeholder="Describe your artwork, tools, inspiration…"
|
||
error={errors.description?.[0]}
|
||
minHeight={12}
|
||
autofocus={false}
|
||
/>
|
||
</FormField>
|
||
|
||
<Section className="space-y-5 border-white/8 bg-white/[0.02]">
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<div>
|
||
<SectionTitle icon="fa-solid fa-users">Attribution</SectionTitle>
|
||
<p className="-mt-2 text-sm text-slate-400">Switch between personal and group context, then maintain primary author and contributor credits without leaving the edit screen.</p>
|
||
</div>
|
||
<span className={`rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${groupSlug ? 'border-sky-300/20 bg-sky-300/10 text-sky-100' : 'border-white/10 bg-white/[0.04] text-slate-300'}`}>
|
||
{selectedGroupOption ? `Group: ${selectedGroupOption.name}` : 'Personal publish'}
|
||
</span>
|
||
</div>
|
||
|
||
<NovaSelect
|
||
label="Publishing identity"
|
||
value={groupSlug || ''}
|
||
onChange={(nextValue) => setGroupSlug(String(nextValue || ''))}
|
||
options={publishingIdentityOptions}
|
||
searchable={false}
|
||
placeholder="Choose publishing identity"
|
||
error={errors.group?.[0]}
|
||
hint={selectedGroupOption
|
||
? 'The artwork will be publicly published under the selected group while authorship stays editable below.'
|
||
: 'Personal publishing keeps the artwork under your own creator profile.'}
|
||
className="mt-2 bg-black/20"
|
||
renderOption={(option) => (
|
||
<span className="flex min-w-0 items-center gap-3">
|
||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/[0.04]">
|
||
{option.icon}
|
||
</span>
|
||
<span className="min-w-0">
|
||
<span className="block truncate font-medium text-white">{option.label}</span>
|
||
<span className="block truncate text-[11px] text-slate-500">{option.contextLabel}</span>
|
||
</span>
|
||
</span>
|
||
)}
|
||
/>
|
||
|
||
{groupSlug ? (
|
||
<div className="grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
|
||
<div>
|
||
<NovaSelect
|
||
label="Primary author"
|
||
value={primaryAuthorUserId || null}
|
||
onChange={(nextValue) => setPrimaryAuthorUserId(nextValue ? Number(nextValue) : null)}
|
||
options={primaryAuthorOptions}
|
||
placeholder="Choose primary author"
|
||
searchable={primaryAuthorOptions.length > 6}
|
||
error={errors.primary_author_user_id?.[0]}
|
||
hint="Primary author remains the lead creator shown on the public artwork page."
|
||
className="mt-2 bg-black/20"
|
||
renderOption={(option) => (
|
||
<span className="flex min-w-0 items-center gap-3">
|
||
{option.avatarUrl ? (
|
||
<img src={option.avatarUrl} alt="" className="h-7 w-7 shrink-0 rounded-full object-cover" />
|
||
) : (
|
||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-slate-400">
|
||
<i className="fa-solid fa-user text-[11px]" aria-hidden="true" />
|
||
</span>
|
||
)}
|
||
<span className="min-w-0">
|
||
<span className="block truncate font-medium text-white">{option.label}</span>
|
||
{option.username ? <span className="block truncate text-[11px] text-slate-500">@{option.username}</span> : null}
|
||
</span>
|
||
</span>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<span className="text-sm font-medium text-white/90">Contributors</span>
|
||
<span className="text-xs text-slate-500">Optional</span>
|
||
</div>
|
||
<div className="mt-2 grid gap-2">
|
||
{currentContributorOptions.filter((user) => Number(user.id) !== Number(primaryAuthorUserId)).map((user) => {
|
||
const active = contributorUserIds.some((id) => Number(id) === Number(user.id))
|
||
const creditMeta = contributorCredits?.[user.id] || contributorCredits?.[String(user.id)] || { creditRole: '', isPrimary: false }
|
||
|
||
return (
|
||
<div
|
||
key={user.id}
|
||
className={[
|
||
'rounded-2xl border px-3 py-3 transition',
|
||
active
|
||
? 'border-sky-300/30 bg-sky-300/10 text-white'
|
||
: 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.06]',
|
||
].join(' ')}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
{user.avatar_url ? <img src={user.avatar_url} alt={user.name || user.username} className="h-10 w-10 rounded-2xl object-cover" /> : <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
|
||
<div className="min-w-0 flex-1">
|
||
<div className="truncate text-sm font-semibold">{user.name || user.username}</div>
|
||
<div className="truncate text-xs text-slate-400">@{user.username}</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setContributorUserIds((current) => {
|
||
const nextIds = new Set(current.map((id) => Number(id)).filter((id) => id !== Number(primaryAuthorUserId)))
|
||
if (nextIds.has(Number(user.id))) {
|
||
nextIds.delete(Number(user.id))
|
||
} else {
|
||
nextIds.add(Number(user.id))
|
||
}
|
||
|
||
const normalizedIds = Array.from(nextIds)
|
||
setContributorCredits((currentCredits) => normalizeContributorCredits(normalizedIds, currentCredits))
|
||
return normalizedIds
|
||
})
|
||
}}
|
||
className={[
|
||
'inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold transition',
|
||
active
|
||
? 'border-sky-300/40 bg-sky-300/20 text-sky-50'
|
||
: 'border-white/10 bg-white/[0.03] text-white/70 hover:border-white/20 hover:text-white',
|
||
].join(' ')}
|
||
>
|
||
<span className={['inline-flex h-4 w-4 items-center justify-center rounded-full border text-[10px]', active ? 'border-sky-300/40 bg-sky-300/20 text-sky-50' : 'border-white/10 bg-white/[0.03] text-white/35'].join(' ')}>{active ? '✓' : ''}</span>
|
||
{active ? 'Added' : 'Add credit'}
|
||
</button>
|
||
</div>
|
||
|
||
{active ? (
|
||
<div className="mt-4 grid gap-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
|
||
<label className="block">
|
||
<span className="text-xs font-medium uppercase tracking-[0.16em] text-slate-300">Credit role</span>
|
||
<input
|
||
type="text"
|
||
value={creditMeta.creditRole || ''}
|
||
onChange={(event) => setContributorCredits((current) => ({
|
||
...normalizeContributorCredits(contributorUserIds, current),
|
||
[Number(user.id)]: {
|
||
...(normalizeContributorCredits(contributorUserIds, current)[Number(user.id)] || { isPrimary: false }),
|
||
creditRole: event.target.value,
|
||
},
|
||
}))}
|
||
placeholder="Colorist, concept support, layout..."
|
||
className="mt-2 w-full rounded-xl border border-white/15 bg-black/20 px-3 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
||
/>
|
||
</label>
|
||
<button
|
||
type="button"
|
||
onClick={() => setContributorCredits((current) => {
|
||
const nextCredits = normalizeContributorCredits(contributorUserIds, current)
|
||
contributorUserIds.forEach((id) => {
|
||
nextCredits[id] = {
|
||
...(nextCredits[id] || { creditRole: '' }),
|
||
isPrimary: id === Number(user.id),
|
||
}
|
||
})
|
||
return nextCredits
|
||
})}
|
||
className={[
|
||
'inline-flex items-center justify-center rounded-xl border px-3 py-3 text-sm font-medium transition',
|
||
creditMeta.isPrimary
|
||
? 'border-emerald-300/35 bg-emerald-400/12 text-emerald-100'
|
||
: 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white',
|
||
].join(' ')}
|
||
>
|
||
{creditMeta.isPrimary ? 'Lead support' : 'Set lead support'}
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
{errors.contributor_credits?.[0] ? <p className="mt-2 text-xs text-red-400">{errors.contributor_credits[0]}</p> : null}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-400">
|
||
Personal publishing uses your own creator profile as the primary author automatically.
|
||
</div>
|
||
)}
|
||
</Section>
|
||
</Section>
|
||
)}
|
||
|
||
{/* ── Media tab ── */}
|
||
{activeTab === 'media' && (
|
||
<Section id="media" className="space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<SectionTitle icon="fa-solid fa-photo-film">Media & Revisions</SectionTitle>
|
||
<p className="-mt-2 text-sm text-slate-400">
|
||
{quickReplaceSupported
|
||
? 'Drop or upload a new image, then add or manage up to 4 extra screenshots in the same media workspace.'
|
||
: 'Replace the archive package, update the cover screenshot, or add / replace screenshots — saved together as one revision.'}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={loadVersionHistory}
|
||
className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-semibold text-slate-300 transition hover:border-accent/30 hover:bg-accent/10 hover:text-accent"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||
<path fillRule="evenodd" d="M8 3.5a4.5 4.5 0 00-4.04 2.51.75.75 0 01-1.34-.67A6 6 0 1114 8a.75.75 0 01-1.5 0A4.5 4.5 0 008 3.5z" clipRule="evenodd" />
|
||
<path fillRule="evenodd" d="M4.75.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75h3.5a.75.75 0 000-1.5H5.5V1.5a.75.75 0 00-.75-.75z" clipRule="evenodd" />
|
||
</svg>
|
||
History
|
||
</button>
|
||
</div>
|
||
|
||
{/* Current file summary bar */}
|
||
<div className="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
|
||
<div className="h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||
{thumbUrl && <img src={thumbUrl} alt="" className="h-full w-full object-cover" />}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate text-sm font-semibold text-white" title={fileMeta.name}>{fileMeta.name || 'Artwork file'}</p>
|
||
<div className="mt-1 flex flex-wrap gap-1.5">
|
||
{currentFileExt && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-white/55">{currentFileExt}</span>}
|
||
{fileMeta.width > 0 && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] text-white/55">{fileMeta.width} × {fileMeta.height}</span>}
|
||
{fileMeta.size > 0 && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] text-white/55">{formatBytes(fileMeta.size)}</span>}
|
||
{screenshotItems.length > 0 && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] text-white/55">{screenshotItems.length} screenshot{screenshotItems.length !== 1 ? 's' : ''}</span>}
|
||
</div>
|
||
</div>
|
||
<span className="shrink-0 rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] font-semibold text-slate-400">v{versionCount}</span>
|
||
</div>
|
||
|
||
{requiresReapproval && (
|
||
<div className="rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
|
||
Visual changes on this artwork require a new moderation pass.
|
||
</div>
|
||
)}
|
||
|
||
{/* ════ Single image replace ════ */}
|
||
{quickReplaceSupported && (() => {
|
||
const zone = 'single-replace'
|
||
const isDragging = dragOverZone === zone
|
||
const stageFile = (file) => {
|
||
if (!file || !file.type.startsWith('image/')) return
|
||
if (pendingReplacePreview) URL.revokeObjectURL(pendingReplacePreview)
|
||
setPendingReplaceFile(file)
|
||
setPendingReplacePreview(URL.createObjectURL(file))
|
||
}
|
||
return (
|
||
<div className="space-y-4">
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Replace image</p>
|
||
|
||
{/* Drop zone */}
|
||
<div
|
||
className={[
|
||
'relative overflow-hidden rounded-2xl border-2 border-dashed transition',
|
||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||
].join(' ')}
|
||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragLeave={() => setDragOverZone(null)}
|
||
onDrop={(e) => {
|
||
e.preventDefault()
|
||
setDragOverZone(null)
|
||
stageFile(e.dataTransfer.files?.[0])
|
||
}}
|
||
>
|
||
{pendingReplacePreview ? (
|
||
<div className="flex items-start gap-4 p-4">
|
||
<div className="h-24 w-24 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||
<img src={pendingReplacePreview} alt="Preview" className="h-full w-full object-cover" />
|
||
</div>
|
||
<div className="flex-1 min-w-0 py-1">
|
||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-400">Ready to upload</p>
|
||
<p className="mt-1 truncate text-sm font-medium text-white">{pendingReplaceFile?.name}</p>
|
||
<p className="mt-0.5 text-xs text-slate-400">{formatBytes(pendingReplaceFile?.size)}</p>
|
||
<button
|
||
type="button"
|
||
className="mt-3 text-xs text-slate-400 hover:text-white transition-colors"
|
||
onClick={() => { URL.revokeObjectURL(pendingReplacePreview); setPendingReplacePreview(null); setPendingReplaceFile(null) }}
|
||
>
|
||
✕ Remove
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<label className="flex cursor-pointer flex-col items-center justify-center gap-3 p-10 text-center">
|
||
<span className="inline-flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-white/[0.05] text-slate-400">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||
</svg>
|
||
</span>
|
||
<span className="text-sm font-medium text-slate-300">Drop image here or <span className="text-sky-300">browse</span></span>
|
||
<span className="text-xs text-slate-500">JPG · PNG · WEBP · TIFF — any resolution</span>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
className="hidden"
|
||
accept="image/*"
|
||
onChange={(e) => stageFile(e.target.files?.[0])}
|
||
/>
|
||
</label>
|
||
)}
|
||
|
||
{replacing && (
|
||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-2xl bg-black/65 backdrop-blur-sm">
|
||
<div className="h-8 w-8 rounded-full border-2 border-accent/30 border-t-accent animate-spin" />
|
||
<span className="text-sm text-slate-300">Uploading revision…</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Change note + Upload button */}
|
||
<TextInput
|
||
value={changeNote}
|
||
onChange={(e) => setChangeNote(e.target.value)}
|
||
placeholder="Change note for this revision… (optional)"
|
||
size="sm"
|
||
/>
|
||
|
||
{pendingReplaceFile && (
|
||
<div className="flex justify-end">
|
||
<Button
|
||
variant="accent"
|
||
size="sm"
|
||
loading={replacing}
|
||
onClick={() => handleFileReplace(pendingReplaceFile)}
|
||
>
|
||
{replacing ? 'Uploading…' : 'Upload new version'}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})()}
|
||
|
||
{/* ════ Screenshot and archive media form ════ */}
|
||
<div className="space-y-6">
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">{archiveArtwork ? 'Revise archive media' : 'Additional screenshots'}</p>
|
||
|
||
{archiveRevisionError && (
|
||
<div className="rounded-2xl border border-red-400/20 bg-red-500/10 px-4 py-3 text-sm text-red-200">
|
||
{archiveRevisionError}
|
||
</div>
|
||
)}
|
||
|
||
{archiveArtwork && (
|
||
<>
|
||
{/* ── Cover screenshot ── */}
|
||
<div className="space-y-2">
|
||
<p className="text-xs font-semibold text-slate-400">Cover screenshot</p>
|
||
{(() => {
|
||
const zone = 'archive-cover'
|
||
const isDragging = dragOverZone === zone
|
||
const stageFile = (file) => {
|
||
if (!file || !file.type.startsWith('image/')) return
|
||
if (archiveCoverPreview) URL.revokeObjectURL(archiveCoverPreview)
|
||
setArchiveCoverFile(file)
|
||
setArchiveCoverPreview(URL.createObjectURL(file))
|
||
}
|
||
return (
|
||
<div
|
||
className={[
|
||
'relative overflow-hidden rounded-2xl border-2 border-dashed transition',
|
||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||
].join(' ')}
|
||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragLeave={() => setDragOverZone(null)}
|
||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageFile(e.dataTransfer.files?.[0]) }}
|
||
>
|
||
<div className="flex items-start gap-4 p-4">
|
||
<div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||
{archiveCoverPreview
|
||
? <img src={archiveCoverPreview} alt="New cover" className="h-full w-full object-cover" />
|
||
: thumbUrl
|
||
? <img src={thumbUrl} alt="Current cover" className="h-full w-full object-cover opacity-60" />
|
||
: null}
|
||
</div>
|
||
<div className="flex-1 min-w-0 py-1">
|
||
{archiveCoverFile ? (
|
||
<>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-400">New cover staged</p>
|
||
<p className="mt-1 truncate text-sm font-medium text-white">{archiveCoverFile.name}</p>
|
||
<p className="mt-0.5 text-xs text-slate-400">{formatBytes(archiveCoverFile.size)}</p>
|
||
<button type="button" className="mt-2 text-xs text-slate-400 hover:text-white transition-colors"
|
||
onClick={() => { URL.revokeObjectURL(archiveCoverPreview); setArchiveCoverFile(null); setArchiveCoverPreview(null) }}>
|
||
✕ Remove
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<p className="text-xs font-semibold text-slate-500">Current cover</p>
|
||
<p className="mt-1 text-xs text-slate-400">Drop a new image or click to browse.</p>
|
||
<label className="mt-2 inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold text-slate-300 transition hover:bg-white/[0.08] hover:text-white">
|
||
<svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.75 14A1.75 1.75 0 011 12.25V9.5a.75.75 0 011.5 0v2.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V9.5a.75.75 0 011.5 0v2.75A1.75 1.75 0 0113.25 14H2.75z"/><path d="M11.78 5.22a.75.75 0 00-1.06 0L8.75 7.19V1.75a.75.75 0 00-1.5 0v5.44L5.28 5.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"/></svg>
|
||
Replace cover
|
||
<input type="file" className="hidden" accept="image/*" onChange={(e) => stageFile(e.target.files?.[0])} />
|
||
</label>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</div>
|
||
|
||
{/* ── Archive package ── */}
|
||
<div className="space-y-2">
|
||
<p className="text-xs font-semibold text-slate-400">Archive package</p>
|
||
{(() => {
|
||
const zone = 'archive-pkg'
|
||
const isDragging = dragOverZone === zone
|
||
const stageFile = (file) => {
|
||
if (!file) return
|
||
setArchivePackageFile(file)
|
||
}
|
||
return (
|
||
<div
|
||
className={[
|
||
'rounded-2xl border-2 border-dashed transition',
|
||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||
].join(' ')}
|
||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragLeave={() => setDragOverZone(null)}
|
||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageFile(e.dataTransfer.files?.[0]) }}
|
||
>
|
||
<div className="flex items-center gap-4 px-4 py-4">
|
||
<span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-slate-400">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
|
||
</svg>
|
||
</span>
|
||
<div className="flex-1 min-w-0">
|
||
{archivePackageFile ? (
|
||
<>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-400">New package staged</p>
|
||
<p className="mt-0.5 truncate text-sm font-medium text-white">{archivePackageFile.name}</p>
|
||
<p className="mt-0.5 text-xs text-slate-400">{formatBytes(archivePackageFile.size)}</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<p className="text-xs font-semibold text-slate-500">Current package</p>
|
||
<p className="mt-0.5 truncate text-sm text-slate-300">{fileMeta.name || '—'}</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="flex shrink-0 flex-col gap-2">
|
||
{archivePackageFile ? (
|
||
<button type="button" className="text-xs text-slate-400 hover:text-white transition-colors"
|
||
onClick={() => setArchivePackageFile(null)}>
|
||
✕ Remove
|
||
</button>
|
||
) : (
|
||
<label className="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold text-slate-300 transition hover:bg-white/[0.08] hover:text-white">
|
||
<svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.75 14A1.75 1.75 0 011 12.25V9.5a.75.75 0 011.5 0v2.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V9.5a.75.75 0 011.5 0v2.75A1.75 1.75 0 0113.25 14H2.75z"/><path d="M11.78 5.22a.75.75 0 00-1.06 0L8.75 7.19V1.75a.75.75 0 00-1.5 0v5.44L5.28 5.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"/></svg>
|
||
Replace
|
||
<input type="file" className="hidden"
|
||
accept=".zip,.rar,.7z,.tar,.gz,application/zip,application/x-zip-compressed,application/x-rar-compressed,application/vnd.rar,application/x-7z-compressed,application/x-tar,application/gzip"
|
||
onChange={(e) => stageFile(e.target.files?.[0])} />
|
||
</label>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* ── Existing screenshots ── */}
|
||
{screenshotItems.length > 0 && (
|
||
<div className="space-y-3">
|
||
<p className="text-xs font-semibold text-slate-400">Screenshots <span className="ml-1 font-normal text-slate-500">({activeScreenshotCount} active / {screenshotItems.length} existing)</span></p>
|
||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||
{screenshotItems.map((shot, i) => {
|
||
const shotZone = `replace-shot-${i}`
|
||
const isDragging = dragOverZone === shotZone
|
||
const pendingPreview = replaceShotPreviews[i]
|
||
const pendingFile = replaceShots[i]
|
||
const isRemoved = Boolean(removedShots[i])
|
||
const stageShot = (file) => {
|
||
if (!file || !file.type.startsWith('image/')) return
|
||
if (pendingPreview) URL.revokeObjectURL(pendingPreview)
|
||
setRemovedShots((prev) => {
|
||
const next = { ...prev }
|
||
delete next[i]
|
||
return next
|
||
})
|
||
setReplaceShots((prev) => ({ ...prev, [i]: file }))
|
||
setReplaceShotPreviews((prev) => ({ ...prev, [i]: URL.createObjectURL(file) }))
|
||
}
|
||
return (
|
||
<div
|
||
key={shot.id || `shot-${i}`}
|
||
className={[
|
||
'relative overflow-hidden rounded-2xl border-2 border-dashed transition',
|
||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/10 bg-white/[0.02]',
|
||
].join(' ')}
|
||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(shotZone) }}
|
||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(shotZone) }}
|
||
onDragLeave={() => setDragOverZone(null)}
|
||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageShot(e.dataTransfer.files?.[0]) }}
|
||
>
|
||
<div className="aspect-square overflow-hidden bg-black/25">
|
||
<img
|
||
src={pendingPreview || shot.thumb_url || shot.url}
|
||
alt={shot.label || `Screenshot ${i + 1}`}
|
||
className={[
|
||
'h-full w-full object-cover transition-opacity',
|
||
isRemoved ? 'opacity-25 grayscale' : 'opacity-100',
|
||
].join(' ')}
|
||
/>
|
||
{pendingPreview && (
|
||
<div className="absolute inset-x-0 top-0 flex items-center justify-center gap-1 bg-emerald-500/80 py-1 text-[10px] font-semibold text-white">
|
||
New
|
||
</div>
|
||
)}
|
||
{isRemoved && (
|
||
<div className="absolute inset-x-0 top-0 flex items-center justify-center gap-1 bg-red-500/85 py-1 text-[10px] font-semibold text-white">
|
||
Disabled for next save
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="space-y-1 p-2">
|
||
<div className="flex items-center justify-between gap-1">
|
||
<span className="text-[10px] text-slate-500">Shot {i + 1}</span>
|
||
{pendingFile ? (
|
||
<button type="button" className="text-[10px] text-slate-400 hover:text-white transition-colors"
|
||
onClick={() => {
|
||
URL.revokeObjectURL(pendingPreview)
|
||
setReplaceShots((prev) => { const n = { ...prev }; delete n[i]; return n })
|
||
setReplaceShotPreviews((prev) => { const n = { ...prev }; delete n[i]; return n })
|
||
}}>
|
||
Undo replace
|
||
</button>
|
||
) : isRemoved ? (
|
||
<button
|
||
type="button"
|
||
className="text-[10px] text-emerald-300 hover:text-white transition-colors"
|
||
onClick={() => setRemovedShots((prev) => { const next = { ...prev }; delete next[i]; return next })}
|
||
>
|
||
Re-enable
|
||
</button>
|
||
) : (
|
||
<label className="cursor-pointer text-[10px] font-semibold text-sky-300 hover:text-white transition-colors">
|
||
Replace
|
||
<input type="file" className="hidden" accept="image/*"
|
||
onChange={(e) => stageShot(e.target.files?.[0])} />
|
||
</label>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<span className="truncate text-[10px] text-slate-600">{pendingFile ? pendingFile.name : (shot.label || `Screenshot ${i + 1}`)}</span>
|
||
{!pendingFile && !isRemoved && (
|
||
<button
|
||
type="button"
|
||
className="text-[10px] text-red-300 hover:text-white transition-colors"
|
||
onClick={() => setRemovedShots((prev) => ({ ...prev, [i]: true }))}
|
||
>
|
||
Delete
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── Add new screenshots ── */}
|
||
{(activeScreenshotCount < 4) && (
|
||
<div className="space-y-3">
|
||
<p className="text-xs font-semibold text-slate-400">Add screenshots <span className="ml-1 font-normal text-slate-500">(up to {4 - activeScreenshotCount} more)</span></p>
|
||
{(() => {
|
||
const zone = 'archive-extra-shots'
|
||
const isDragging = dragOverZone === zone
|
||
const availableSlots = Math.max(0, 4 - activeScreenshotCount)
|
||
const stageFiles = (files) => {
|
||
const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/')).slice(0, availableSlots)
|
||
archiveExtraPreviews.forEach((url) => URL.revokeObjectURL(url))
|
||
setArchiveExtraScreenshots(imageFiles)
|
||
setArchiveExtraPreviews(imageFiles.map((f) => URL.createObjectURL(f)))
|
||
}
|
||
return (
|
||
<>
|
||
<div
|
||
className={[
|
||
'rounded-2xl border-2 border-dashed transition',
|
||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||
].join(' ')}
|
||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||
onDragLeave={() => setDragOverZone(null)}
|
||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageFiles(e.dataTransfer.files) }}
|
||
>
|
||
<label className="flex cursor-pointer flex-col items-center justify-center gap-2 py-6 text-center">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-slate-500" aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||
</svg>
|
||
<span className="text-sm font-medium text-slate-300">Drop images here or <span className="text-sky-300">browse</span></span>
|
||
<span className="text-xs text-slate-500">Select up to {availableSlots} image{availableSlots !== 1 ? 's' : ''}</span>
|
||
<input type="file" className="hidden" accept="image/*" multiple
|
||
onChange={(e) => stageFiles(e.target.files)} />
|
||
</label>
|
||
</div>
|
||
|
||
{archiveExtraPreviews.length > 0 && (
|
||
<div className="grid grid-cols-4 gap-2">
|
||
{archiveExtraPreviews.map((url, i) => (
|
||
<div key={url} className="relative overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||
<div className="aspect-square">
|
||
<img src={url} alt={`New ${i + 1}`} className="h-full w-full object-cover" />
|
||
</div>
|
||
<button
|
||
type="button"
|
||
aria-label="Remove"
|
||
className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/70 text-[10px] text-white hover:bg-red-500/80 transition-colors"
|
||
onClick={() => {
|
||
URL.revokeObjectURL(url)
|
||
const next = archiveExtraScreenshots.filter((_, j) => j !== i)
|
||
const nextPrev = archiveExtraPreviews.filter((_, j) => j !== i)
|
||
setArchiveExtraScreenshots(next)
|
||
setArchiveExtraPreviews(nextPrev)
|
||
}}
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)
|
||
})()}
|
||
</div>
|
||
)}
|
||
|
||
{/* Change note + save */}
|
||
<TextInput
|
||
value={changeNote}
|
||
onChange={(e) => setChangeNote(e.target.value)}
|
||
placeholder={archiveArtwork ? 'Describe what changed in this revision… (optional)' : 'Describe the screenshot update… (optional)'}
|
||
size="sm"
|
||
/>
|
||
|
||
<div className="flex justify-end">
|
||
<Button
|
||
variant="accent"
|
||
size="sm"
|
||
loading={archiveRevisionSaving}
|
||
onClick={handleArchiveRevisionSubmit}
|
||
>
|
||
{archiveRevisionSaving ? 'Saving revision…' : 'Save revision'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
)}
|
||
|
||
{/* ── Evolution tab ── */}
|
||
{activeTab === 'evolution' && (
|
||
<Section id="evolution" className="space-y-6">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
||
<div>
|
||
<SectionTitle icon="fa-solid fa-code-branch">Artwork Evolution</SectionTitle>
|
||
<p className="-mt-2 text-sm text-slate-400">Connect this piece to an older public original so the artwork page can tell a clear Then & Now story in both directions.</p>
|
||
</div>
|
||
<div className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] ${evolutionTarget ? 'border-sky-300/25 bg-sky-300/10 text-sky-100' : 'border-white/10 bg-white/[0.04] text-slate-300'}`}>
|
||
<i className="fa-solid fa-sparkles text-[10px]" aria-hidden="true" />
|
||
{evolutionTarget ? (selectedEvolutionType?.short_label || 'Linked') : 'No original linked'}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
|
||
<div className="space-y-4">
|
||
<ArtworkEvolutionSearchPicker
|
||
artworkId={artwork?.id}
|
||
selected={evolutionTarget}
|
||
onSelect={(option) => setEvolutionTarget(option)}
|
||
disabled={saving}
|
||
/>
|
||
{errors.evolution_target_artwork_id?.[0] ? <p className="text-sm text-red-400">{errors.evolution_target_artwork_id[0]}</p> : null}
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<RightRailCard title="Relation settings">
|
||
<div className="space-y-4">
|
||
<label className="block">
|
||
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Story type</span>
|
||
<select
|
||
value={evolutionRelationType}
|
||
onChange={(event) => setEvolutionRelationType(event.target.value)}
|
||
disabled={saving || !evolutionTarget}
|
||
className="mt-2 w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
{evolutionRelationTypes.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
{errors.evolution_relation_type?.[0] ? <p className="text-sm text-red-400">{errors.evolution_relation_type[0]}</p> : null}
|
||
|
||
<label className="block">
|
||
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Creator note</span>
|
||
<textarea
|
||
value={evolutionNote}
|
||
onChange={(event) => setEvolutionNote(event.target.value)}
|
||
placeholder="Optional context for viewers: what changed, what you learned, why this version matters..."
|
||
disabled={saving || !evolutionTarget}
|
||
rows={6}
|
||
className="mt-2 w-full rounded-[24px] border border-white/10 bg-[#0d1726] px-4 py-3 text-sm leading-6 text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:opacity-60"
|
||
/>
|
||
</label>
|
||
{errors.evolution_note?.[0] ? <p className="text-sm text-red-400">{errors.evolution_note[0]}</p> : null}
|
||
</div>
|
||
</RightRailCard>
|
||
|
||
<RightRailCard title="Public behavior">
|
||
<div className="space-y-3 text-sm leading-relaxed text-slate-300">
|
||
<p>The newer artwork gets the main comparison panel. The older artwork gets an updated-version card pointing back here.</p>
|
||
<p>Only published public artworks can be linked, and the original has to be older than the piece you are editing.</p>
|
||
<p>{evolutionTarget ? `Current target: ${evolutionTarget.title}` : 'Pick an older artwork first to unlock relation type and note settings.'}</p>
|
||
</div>
|
||
</RightRailCard>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
)}
|
||
|
||
{/* ── AI Assist tab ── */}
|
||
{activeTab === 'ai' && (
|
||
<Section id="ai-assist" className="space-y-5">
|
||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||
<div>
|
||
<SectionTitle icon="fa-solid fa-wand-magic-sparkles">AI Assist</SectionTitle>
|
||
<p className="text-sm text-slate-400">Review-only suggestions built from the current artwork image. Nothing is written to the artwork until you apply it.</p>
|
||
</div>
|
||
<div className="flex items-center gap-3 self-start">
|
||
<div className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold ${statusTone(aiStatus)}`}>
|
||
<span className={`h-2 w-2 rounded-full ${aiStatus === 'ready' ? 'bg-emerald-300' : aiStatus === 'failed' ? 'bg-red-300' : aiStatus === 'queued' || aiStatus === 'processing' ? 'bg-sky-300' : 'bg-slate-400'}`} />
|
||
<span>{statusLabel(aiStatus)}</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={toggleAiPanel}
|
||
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-slate-300 transition hover:bg-white/[0.08] hover:text-white"
|
||
>
|
||
<span>{isAiPanelOpen ? 'Collapse' : 'Expand'}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{isAiPanelOpen && (
|
||
<>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button variant="secondary" size="xs" onClick={() => requestAiIntent('analyze', 'analyze')} loading={aiAction === 'analyze'}>
|
||
{aiDirect ? 'Analyze now' : 'Analyze artwork'}
|
||
</Button>
|
||
<Button variant="secondary" size="xs" onClick={handleImproveAll}>
|
||
Improve all
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => requestAiIntent('title')}>
|
||
Generate title
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => requestAiIntent('description')}>
|
||
Generate description
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => requestAiIntent('tags')}>
|
||
Suggest tags
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => requestAiIntent('category')}>
|
||
Suggest category
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => requestAiIntent('similar')}>
|
||
Find similar
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => requestAiIntent('analyze', 'regenerate')} loading={aiAction === 'regenerate'}>
|
||
Refresh suggestions
|
||
</Button>
|
||
<Button variant="ghost" size="xs" onClick={() => setIsAiDebugOpen((current) => !current)}>
|
||
{isAiDebugOpen ? 'Hide debug' : 'Show debug'}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3">
|
||
<Toggle
|
||
checked={aiDirect}
|
||
onChange={(event) => setAiDirect(event.target.checked)}
|
||
label="Run AI directly"
|
||
hint="Optional. When enabled, AI analysis runs inline and returns suggestions immediately instead of going through the queue."
|
||
size="sm"
|
||
variant="sky"
|
||
disabled={aiAction !== ''}
|
||
/>
|
||
</div>
|
||
|
||
{aiLoading && (
|
||
<div className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">
|
||
<div className="h-4 w-4 rounded-full border-2 border-sky-400/20 border-t-sky-300 animate-spin" />
|
||
<span>Loading AI assist data…</span>
|
||
</div>
|
||
)}
|
||
|
||
{aiData?.error_message && (
|
||
<div className="rounded-xl border border-red-400/20 bg-red-400/10 px-4 py-3 text-sm text-red-100">
|
||
{aiData.error_message}
|
||
</div>
|
||
)}
|
||
|
||
{isAiDebugOpen && (
|
||
<div className="rounded-2xl border border-amber-400/20 bg-amber-400/[0.06] p-4 space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-white">AI debug</h4>
|
||
<p className="mt-1 text-xs text-slate-400">Inspect the editor request, the outbound vision POST payload, and the raw analysis returned to the suggestion builder.</p>
|
||
</div>
|
||
<button type="button" onClick={() => copyText(JSON.stringify(aiDebugPayload, null, 2))} className="text-xs text-slate-300 transition hover:text-white">Copy JSON</button>
|
||
</div>
|
||
|
||
<div className="grid gap-3 xl:grid-cols-2">
|
||
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Editor request</div>
|
||
<pre className="mt-3 overflow-x-auto text-xs leading-6 text-slate-300 whitespace-pre-wrap">{JSON.stringify(lastAiRequest, null, 2)}</pre>
|
||
</div>
|
||
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Vision request + response</div>
|
||
<pre className="mt-3 overflow-x-auto text-xs leading-6 text-slate-300 whitespace-pre-wrap">{JSON.stringify(aiData?.debug?.vision_debug || null, null, 2)}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Raw analysis used for suggestions</div>
|
||
<pre className="mt-3 overflow-x-auto text-xs leading-6 text-slate-300 whitespace-pre-wrap">{JSON.stringify(aiData?.debug?.analysis || null, null, 2)}</pre>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid gap-4 xl:grid-cols-2">
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h4 className="text-sm font-semibold text-white">Title suggestions</h4>
|
||
<button type="button" onClick={() => requestAiIntent('title', 'regenerate')} className="text-xs text-slate-400 transition hover:text-white">Regenerate</button>
|
||
</div>
|
||
{(aiData?.title_suggestions || []).length === 0 && <p className="text-sm text-slate-500">Analyze the artwork to generate title ideas.</p>}
|
||
{(aiData?.title_suggestions || []).map((item) => (
|
||
<div key={item.text} className="rounded-xl border border-white/10 bg-white/[0.04] p-3">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<div className="text-sm font-medium text-white">{item.text}</div>
|
||
{typeof item.confidence === 'number' && <div className="text-[11px] text-slate-500">Confidence {Math.round(item.confidence * 100)}%</div>}
|
||
</div>
|
||
<div className="flex flex-wrap justify-end gap-2">
|
||
<button type="button" onClick={() => applyTitleSuggestion(item.text, 'replace')} className="text-xs text-sky-200 transition hover:text-white">Replace</button>
|
||
<button type="button" onClick={() => applyTitleSuggestion(item.text, 'insert')} className="text-xs text-slate-300 transition hover:text-white">Insert</button>
|
||
<button type="button" onClick={() => copyText(item.text)} className="text-xs text-slate-400 transition hover:text-white">Copy</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h4 className="text-sm font-semibold text-white">Description suggestions</h4>
|
||
<button type="button" onClick={() => requestAiIntent('description', 'regenerate')} className="text-xs text-slate-400 transition hover:text-white">Regenerate</button>
|
||
</div>
|
||
{(aiData?.description_suggestions || []).length === 0 && <p className="text-sm text-slate-500">AI descriptions appear here after analysis.</p>}
|
||
{(aiData?.description_suggestions || []).map((item) => (
|
||
<div key={`${item.variant}-${item.text}`} className="rounded-xl border border-white/10 bg-white/[0.04] p-3 space-y-2">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{item.variant}</div>
|
||
{typeof item.confidence === 'number' && <div className="text-[11px] text-slate-500">{Math.round(item.confidence * 100)}%</div>}
|
||
</div>
|
||
<p className="text-sm leading-6 text-slate-200">{item.text}</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button type="button" onClick={() => applyDescriptionSuggestion(item.text, 'replace')} className="text-xs text-sky-200 transition hover:text-white">Replace</button>
|
||
<button type="button" onClick={() => applyDescriptionSuggestion(item.text, 'append')} className="text-xs text-slate-300 transition hover:text-white">Append</button>
|
||
<button type="button" onClick={() => copyText(item.text)} className="text-xs text-slate-400 transition hover:text-white">Copy</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h4 className="text-sm font-semibold text-white">Tag suggestions</h4>
|
||
<button type="button" onClick={() => requestAiIntent('tags', 'regenerate')} className="text-xs text-slate-400 transition hover:text-white">Regenerate</button>
|
||
</div>
|
||
{(aiData?.tag_suggestions || []).length === 0 && <p className="text-sm text-slate-500">Suggested tags, confidence, and quick-apply actions appear here.</p>}
|
||
{(aiData?.tag_suggestions || []).length > 0 && (
|
||
<>
|
||
<div className="flex flex-wrap gap-2">
|
||
{(aiData?.tag_suggestions || []).map((item) => {
|
||
const isApplied = tagSlugs.includes(item.tag)
|
||
const isSelected = selectedAiTags.includes(item.tag)
|
||
return (
|
||
<button
|
||
key={item.tag}
|
||
type="button"
|
||
onClick={() => toggleSuggestedTag(item.tag)}
|
||
className={`rounded-full border px-3 py-1 text-xs font-semibold transition ${isSelected ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200' : isApplied ? 'border-white/20 bg-white/[0.08] text-white' : 'border-sky-400/20 bg-sky-400/10 text-sky-200 hover:bg-sky-400/15'}`}
|
||
>
|
||
{isSelected ? '✓' : isApplied ? '•' : '+'} {item.tag}
|
||
{typeof item.confidence === 'number' && <span className="ml-1 text-[10px] text-white/60">{Math.round(item.confidence * 100)}%</span>}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button type="button" onClick={() => applyTagSuggestions(selectedAiTags, 'add')} className="text-xs text-sky-200 transition hover:text-white">Add selected</button>
|
||
<button type="button" onClick={() => applyTagSuggestions(aiSuggestedTags, 'add')} className="text-xs text-slate-300 transition hover:text-white">Add all</button>
|
||
<button type="button" onClick={() => applyTagSuggestions(aiSuggestedTags, 'remove')} className="text-xs text-slate-400 transition hover:text-white">Remove suggested</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h4 className="text-sm font-semibold text-white">Category suggestions</h4>
|
||
<button type="button" onClick={() => requestAiIntent('category', 'regenerate')} className="text-xs text-slate-400 transition hover:text-white">Regenerate</button>
|
||
</div>
|
||
{!aiData?.content_type && !aiData?.category && <p className="text-sm text-slate-500">AI content-type and category candidates appear here after analysis.</p>}
|
||
{aiData?.content_type && (
|
||
<div className="rounded-xl border border-white/10 bg-white/[0.04] p-3">
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Suggested content type</div>
|
||
<div className="mt-1 text-sm font-medium text-white">{aiData.content_type.label}</div>
|
||
<div className="mt-2">
|
||
<button type="button" onClick={() => applyCategorySuggestion(aiData.category || { content_type_id: aiData.content_type.id }, 'content_type')} className="text-xs text-sky-200 transition hover:text-white">Apply content type</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{aiData?.category && (
|
||
<div className="rounded-xl border border-white/10 bg-white/[0.04] p-3 space-y-3">
|
||
<div>
|
||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Suggested category</div>
|
||
<div className="mt-1 text-sm font-medium text-white">{aiData.category.label}</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button type="button" onClick={() => applyCategorySuggestion(aiData.category, 'category')} className="text-xs text-sky-200 transition hover:text-white">Apply category</button>
|
||
<button type="button" onClick={() => applyCategorySuggestion(aiData.category, 'both')} className="text-xs text-slate-300 transition hover:text-white">Apply both</button>
|
||
</div>
|
||
{(aiData.category.alternatives || []).length > 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{aiData.category.alternatives.map((item) => (
|
||
<button key={item.id} type="button" onClick={() => applyCategorySuggestion(item, 'both')} className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-slate-300 transition hover:text-white">
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 space-y-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h4 className="text-sm font-semibold text-white">Similar / duplicate candidates</h4>
|
||
<button type="button" onClick={() => requestAiIntent('similar', 'regenerate')} className="text-xs text-slate-400 transition hover:text-white">Refresh</button>
|
||
</div>
|
||
{(aiData?.similar_candidates || []).length === 0 && <p className="text-sm text-slate-500">Possible duplicates or visually similar artworks will appear here.</p>}
|
||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
||
{(aiData?.similar_candidates || []).map((item) => (
|
||
<div key={item.artwork_id} className="rounded-xl border border-white/10 bg-white/[0.04] p-3">
|
||
<div className="aspect-[4/3] overflow-hidden rounded-lg bg-white/5">
|
||
{item.thumbnail_url ? (
|
||
<img src={item.thumbnail_url} alt={item.title || 'Similar artwork'} className="h-full w-full object-cover" />
|
||
) : (
|
||
<div className="flex h-full items-center justify-center text-xs text-slate-500">No preview</div>
|
||
)}
|
||
</div>
|
||
<div className="mt-3 space-y-1">
|
||
<div className="text-sm font-medium text-white">{item.title || `Artwork #${item.artwork_id}`}</div>
|
||
<div className="text-[11px] text-slate-500">#{item.artwork_id} · {item.match_type} · {typeof item.score === 'number' ? `${Math.round(item.score * 100)}%` : 'n/a'}</div>
|
||
{item.owner && <div className="text-[11px] text-slate-500">{item.owner}</div>}
|
||
{item.review_state && <div className="text-[11px] text-emerald-300 uppercase tracking-[0.18em]">{item.review_state}</div>}
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{item.url && <a href={item.url} target="_blank" rel="noreferrer" onClick={() => trackAiEvent('duplicate_candidate_viewed', { candidate_artwork_id: item.artwork_id, match_type: item.match_type })} className="text-xs text-sky-200 transition hover:text-white">Open</a>}
|
||
<button type="button" onClick={() => persistAiAction({ similar_actions: [{ artwork_id: item.artwork_id, state: 'ignored' }] })} className="text-xs text-slate-300 transition hover:text-white">Ignore</button>
|
||
<button type="button" onClick={() => persistAiAction({ similar_actions: [{ artwork_id: item.artwork_id, state: 'reviewed' }] })} className="text-xs text-slate-400 transition hover:text-white">Mark as reviewed</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</Section>
|
||
)}
|
||
|
||
{/* ── Tags tab ── */}
|
||
{activeTab === 'tags' && (
|
||
<Section id="tags" className="space-y-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<SectionTitle icon="fa-solid fa-tags">Tags</SectionTitle>
|
||
<InlineAiButton onClick={() => requestAiIntent('tags')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'}>
|
||
Tags
|
||
</InlineAiButton>
|
||
</div>
|
||
<TagPicker
|
||
value={tagSlugs}
|
||
onChange={handleTagChange}
|
||
suggestedTags={aiSuggestedTags}
|
||
searchEndpoint="/api/studio/tags/search"
|
||
popularEndpoint="/api/studio/tags/search"
|
||
error={errors.tags?.[0]}
|
||
/>
|
||
</Section>
|
||
)}
|
||
|
||
{/* ── Visibility tab ── */}
|
||
{activeTab === 'visibility' && (
|
||
<Section id="visibility" className="space-y-5">
|
||
<div className="space-y-1">
|
||
<SectionTitle icon="fa-solid fa-eye">Visibility</SectionTitle>
|
||
<p className="text-xs text-slate-500 -mt-2">
|
||
Match the same publish options used during upload, including unlisted access and scheduled publishing.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-2">
|
||
{[
|
||
{ value: 'public', label: 'Public', hint: 'Visible to everyone' },
|
||
{ value: 'unlisted', label: 'Unlisted', hint: 'Available by direct link' },
|
||
{ value: 'private', label: 'Private', hint: 'Keep as draft visibility' },
|
||
].map((option) => {
|
||
const active = visibility === option.value
|
||
return (
|
||
<button
|
||
key={option.value}
|
||
type="button"
|
||
onClick={() => setVisibility(option.value)}
|
||
className={[
|
||
'flex items-start justify-between gap-3 rounded-2xl border px-4 py-4 text-left transition',
|
||
active
|
||
? 'border-sky-300/30 bg-sky-400/10 text-white'
|
||
: 'border-white/10 bg-white/[0.03] text-white/75 hover:border-white/20 hover:bg-white/[0.06]',
|
||
].join(' ')}
|
||
>
|
||
<div>
|
||
<div className="text-sm font-semibold">{option.label}</div>
|
||
<div className="mt-1 text-xs text-white/50">{option.hint}</div>
|
||
</div>
|
||
<span className={[
|
||
'mt-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full border text-[10px]',
|
||
active ? 'border-sky-300/40 bg-sky-400/20 text-sky-100' : 'border-white/10 bg-white/5 text-white/35',
|
||
].join(' ')}>
|
||
{active ? '✓' : ''}
|
||
</span>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
|
||
<SchedulePublishPicker
|
||
mode={publishMode}
|
||
scheduledAt={scheduledAt}
|
||
timezone={userTimezone}
|
||
onModeChange={setPublishMode}
|
||
onScheduleAt={setScheduledAt}
|
||
disabled={saving}
|
||
/>
|
||
{errors.publish_at?.[0] && (
|
||
<p className="mt-2 text-xs text-red-400">{errors.publish_at[0]}</p>
|
||
)}
|
||
{errors.visibility?.[0] && (
|
||
<p className="mt-2 text-xs text-red-400">{errors.visibility[0]}</p>
|
||
)}
|
||
<p className="mt-3 text-xs text-slate-500">
|
||
{publishMode === 'schedule'
|
||
? 'Scheduled artworks stay hidden until the selected time.'
|
||
: visibility === 'private'
|
||
? 'Private keeps the artwork hidden from public views.'
|
||
: visibility === 'unlisted'
|
||
? 'Unlisted keeps the artwork accessible but not broadly surfaced.'
|
||
: 'Public makes the artwork visible immediately.'}
|
||
</p>
|
||
</div>
|
||
</Section>
|
||
)}
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
{/* ── Version History Modal ── */}
|
||
<Modal
|
||
open={showHistory}
|
||
onClose={() => setShowHistory(false)}
|
||
title="Version History"
|
||
size="lg"
|
||
footer={
|
||
<p className="text-xs text-slate-500 mr-auto">
|
||
Restoring creates a new version — nothing is deleted.
|
||
</p>
|
||
}
|
||
>
|
||
{historyLoading && (
|
||
<div className="flex items-center justify-center py-12">
|
||
<div className="w-6 h-6 border-2 border-accent/30 border-t-accent rounded-full animate-spin" />
|
||
</div>
|
||
)}
|
||
|
||
{!historyLoading && historyData && (
|
||
<div className="space-y-3">
|
||
{historyData.versions.map((v) => (
|
||
<div
|
||
key={v.id}
|
||
className={[
|
||
'rounded-xl border p-4 transition-all',
|
||
v.is_current
|
||
? 'border-accent/40 bg-accent/10'
|
||
: 'border-white/10 bg-white/[0.03] hover:bg-white/[0.06]',
|
||
].join(' ')}
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span className="text-xs font-bold text-white">v{v.version_number}</span>
|
||
{v.is_current && (
|
||
<span className="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-accent/20 text-accent border border-accent/30">
|
||
Current
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-[11px] text-slate-400">
|
||
{v.created_at ? new Date(v.created_at).toLocaleString() : ''}
|
||
</p>
|
||
{v.width && (
|
||
<p className="text-[11px] text-slate-400">
|
||
{v.width} × {v.height} px · {formatBytes(v.file_size)}
|
||
</p>
|
||
)}
|
||
{v.change_note && (
|
||
<p className="text-xs text-slate-300 mt-1 italic">“{v.change_note}”</p>
|
||
)}
|
||
</div>
|
||
{!v.is_current && (
|
||
<Button
|
||
variant="ghost"
|
||
size="xs"
|
||
loading={restoring === v.id}
|
||
onClick={() => handleRestoreVersion(v.id)}
|
||
>
|
||
Restore
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{historyData.versions.length === 0 && (
|
||
<p className="text-sm text-slate-500 text-center py-8">No version history yet.</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</Modal>
|
||
|
||
</StudioLayout>
|
||
)
|
||
}
|