643 lines
27 KiB
JavaScript
643 lines
27 KiB
JavaScript
import React, { useState, useMemo, useRef, useCallback } from 'react'
|
|
import { usePage, Link } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
import MarkdownEditor from '../../components/ui/MarkdownEditor'
|
|
import TextInput from '../../components/ui/TextInput'
|
|
import Button from '../../components/ui/Button'
|
|
import Toggle from '../../components/ui/Toggle'
|
|
import Modal from '../../components/ui/Modal'
|
|
import FormField from '../../components/ui/FormField'
|
|
import TagPicker from '../../components/tags/TagPicker'
|
|
|
|
// ─── 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 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 || [],
|
|
})),
|
|
}))
|
|
}
|
|
|
|
// ─── Sub-components ──────────────────────────────────────────────────────────
|
|
|
|
/** Glass-morphism section card (Nova theme) */
|
|
function Section({ children, className = '' }) {
|
|
return (
|
|
<section className={`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>
|
|
)
|
|
}
|
|
|
|
// ─── Main Component ──────────────────────────────────────────────────────────
|
|
|
|
export default function StudioArtworkEdit() {
|
|
const { props } = usePage()
|
|
const { artwork, contentTypes: rawContentTypes } = props
|
|
|
|
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 [isPublic, setIsPublic] = useState(artwork?.is_public ?? true)
|
|
const [saving, setSaving] = useState(false)
|
|
const [saved, setSaved] = useState(false)
|
|
const [errors, setErrors] = useState({})
|
|
|
|
// File replace
|
|
const fileInputRef = useRef(null)
|
|
const [replacing, setReplacing] = useState(false)
|
|
const [thumbUrl, setThumbUrl] = useState(artwork?.thumb_url_lg || artwork?.thumb_url || null)
|
|
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)
|
|
|
|
// ── 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 || []
|
|
|
|
// ── Handlers ───────────────────────────────────────────────────────────────
|
|
const handleContentTypeChange = (id) => {
|
|
setContentTypeId(id)
|
|
setCategoryId(null)
|
|
setSubCategoryId(null)
|
|
}
|
|
|
|
const handleCategoryChange = (id) => {
|
|
setCategoryId(id)
|
|
setSubCategoryId(null)
|
|
}
|
|
|
|
const handleSave = useCallback(async () => {
|
|
setSaving(true)
|
|
setSaved(false)
|
|
setErrors({})
|
|
try {
|
|
const payload = {
|
|
title,
|
|
description,
|
|
is_public: isPublic,
|
|
category_id: subCategoryId || categoryId || null,
|
|
tags: tagSlugs,
|
|
}
|
|
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) {
|
|
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, isPublic, subCategoryId, categoryId, tagSlugs, artwork?.id])
|
|
|
|
const handleFileReplace = async (e) => {
|
|
const file = e.target.files?.[0]
|
|
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) {
|
|
setThumbUrl(data.thumb_url)
|
|
setFileMeta({ name: file.name, size: file.size, width: data.width || 0, height: data.height || 0 })
|
|
if (data.version_number) setVersionCount(data.version_number)
|
|
if (typeof data.requires_reapproval !== 'undefined') setRequiresReapproval(data.requires_reapproval)
|
|
setChangeNote('')
|
|
setShowChangeNote(false)
|
|
} 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) {
|
|
setVersionCount((n) => n + 1)
|
|
setShowHistory(false)
|
|
} else {
|
|
alert(data.error || 'Restore failed.')
|
|
}
|
|
} catch (err) {
|
|
console.error('Restore failed:', err)
|
|
} finally {
|
|
setRestoring(null)
|
|
}
|
|
}
|
|
|
|
// ── Render ─────────────────────────────────────────────────────────────────
|
|
return (
|
|
<StudioLayout title="Edit Artwork">
|
|
|
|
{/* ── Page Header ── */}
|
|
<div className="flex items-center justify-between gap-4 mb-8">
|
|
<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>
|
|
<p className="text-xs text-slate-500 mt-0.5">
|
|
Editing ·{' '}
|
|
<span className={isPublic ? 'text-emerald-400' : 'text-amber-400'}>
|
|
{isPublic ? 'Published' : 'Draft'}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{saved && (
|
|
<span className="text-xs text-emerald-400 flex items-center gap-1 animate-pulse">
|
|
<svg width="14" height="14" 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="sm" loading={saving} onClick={handleSave}>
|
|
Save changes
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Two-column Layout ── */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-[340px_1fr] gap-6 items-start">
|
|
|
|
{/* ─────────── LEFT SIDEBAR ─────────── */}
|
|
<div className="space-y-6 lg:sticky lg:top-6">
|
|
|
|
{/* Preview Card */}
|
|
<Section>
|
|
<SectionTitle icon="fa-solid fa-image">Preview</SectionTitle>
|
|
|
|
{/* Thumbnail */}
|
|
<div className="relative aspect-square rounded-xl overflow-hidden bg-white/5 border border-white/10 mb-4">
|
|
{thumbUrl ? (
|
|
<img
|
|
src={thumbUrl}
|
|
alt={title || 'Artwork preview'}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex 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>
|
|
)}
|
|
{replacing && (
|
|
<div className="absolute inset-0 bg-black/60 flex items-center justify-center">
|
|
<div className="w-7 h-7 border-2 border-accent/30 border-t-accent rounded-full animate-spin" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* File Metadata */}
|
|
<div className="space-y-3">
|
|
<p className="text-sm font-medium text-white truncate" title={fileMeta.name}>{fileMeta.name}</p>
|
|
<div className="flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-500">
|
|
{fileMeta.width > 0 && (
|
|
<span className="flex items-center gap-1">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" className="text-slate-600" aria-hidden="true">
|
|
<path d="M2 3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm2 1v8h8V4H4z" />
|
|
</svg>
|
|
{fileMeta.width} × {fileMeta.height}
|
|
</span>
|
|
)}
|
|
<span className="flex items-center gap-1">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" className="text-slate-600" aria-hidden="true">
|
|
<path d="M4 1.5a.5.5 0 00-1 0V3H1.5a.5.5 0 000 1h11a.5.5 0 000-1H11V1.5a.5.5 0 00-1 0V3H6V1.5a.5.5 0 00-1 0V3H4V1.5z" />
|
|
<path d="M1.5 5v8.5A1.5 1.5 0 003 15h10a1.5 1.5 0 001.5-1.5V5h-13z" />
|
|
</svg>
|
|
{formatBytes(fileMeta.size)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Version + History */}
|
|
<div className="flex items-center gap-2 pt-1">
|
|
<span className="inline-flex items-center gap-1 text-[10px] font-bold text-accent bg-accent/15 px-2 py-0.5 rounded-full border border-accent/20">
|
|
v{versionCount}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={loadVersionHistory}
|
|
className="inline-flex items-center gap-1.5 text-[11px] text-slate-400 hover:text-accent transition-colors"
|
|
>
|
|
<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>
|
|
|
|
{requiresReapproval && (
|
|
<p className="text-[11px] text-amber-400/90 flex items-center gap-1.5 mt-1">
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
|
<path d="M8.982 1.566a1.13 1.13 0 00-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.891 0 1.439-.989.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995A.905.905 0 018 5zm.002 6a1 1 0 100 2 1 1 0 000-2z" />
|
|
</svg>
|
|
Requires re-approval after replace
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Replace File */}
|
|
<div className="mt-4 pt-4 border-t border-white/8 space-y-2.5">
|
|
{showChangeNote && (
|
|
<TextInput
|
|
value={changeNote}
|
|
onChange={(e) => setChangeNote(e.target.value)}
|
|
placeholder="Change note (optional)…"
|
|
size="sm"
|
|
/>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
size="xs"
|
|
loading={replacing}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
{replacing ? 'Replacing…' : 'Replace file'}
|
|
</Button>
|
|
{!showChangeNote && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowChangeNote(true)}
|
|
className="text-[11px] text-slate-500 hover:text-white transition-colors"
|
|
>
|
|
+ note
|
|
</button>
|
|
)}
|
|
</div>
|
|
<input ref={fileInputRef} type="file" className="hidden" accept="image/*" onChange={handleFileReplace} />
|
|
</div>
|
|
</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="space-y-6">
|
|
|
|
{/* ── Content Type ── */}
|
|
<Section>
|
|
<SectionTitle icon="fa-solid fa-palette">Content Type</SectionTitle>
|
|
<div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
|
|
{contentTypes.map((ct) => {
|
|
const isActive = contentTypeId === ct.id
|
|
const visualKey = getContentTypeVisualKey(ct.slug)
|
|
return (
|
|
<button
|
|
key={ct.id}
|
|
type="button"
|
|
onClick={() => handleContentTypeChange(ct.id)}
|
|
className={[
|
|
'group flex flex-col items-center gap-2 rounded-xl border p-3 text-center transition-all',
|
|
isActive
|
|
? 'border-emerald-400/50 bg-emerald-400/10 ring-1 ring-emerald-400/30'
|
|
: 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]',
|
|
].join(' ')}
|
|
>
|
|
<img
|
|
src={`/gfx/mascot_${visualKey}.webp`}
|
|
alt=""
|
|
className="h-10 w-10 object-contain"
|
|
onError={(e) => { e.target.style.display = 'none' }}
|
|
/>
|
|
<span className={`text-xs font-medium ${isActive ? 'text-emerald-300' : 'text-slate-400 group-hover:text-white'}`}>
|
|
{ct.name}
|
|
</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* ── Category ── */}
|
|
{rootCategories.length > 0 && (
|
|
<Section className="space-y-4">
|
|
<SectionTitle icon="fa-solid fa-layer-group">Category</SectionTitle>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{rootCategories.map((cat) => {
|
|
const isActive = categoryId === cat.id
|
|
return (
|
|
<button
|
|
key={cat.id}
|
|
type="button"
|
|
onClick={() => handleCategoryChange(cat.id)}
|
|
className={[
|
|
'px-3 py-1.5 rounded-lg text-xs font-medium border transition-all',
|
|
isActive
|
|
? 'border-purple-400/50 bg-purple-400/15 text-purple-300'
|
|
: 'border-white/10 bg-white/[0.03] text-slate-400 hover:text-white hover:bg-white/[0.06]',
|
|
].join(' ')}
|
|
>
|
|
{cat.name}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{subCategories.length > 0 && (
|
|
<div className="space-y-2 pl-1 border-l-2 border-white/5 ml-2">
|
|
<h4 className="text-[11px] font-semibold uppercase tracking-wider text-slate-500 pl-3">Subcategory</h4>
|
|
<div className="flex flex-wrap gap-2 pl-3">
|
|
{subCategories.map((sub) => {
|
|
const isActive = subCategoryId === sub.id
|
|
return (
|
|
<button
|
|
key={sub.id}
|
|
type="button"
|
|
onClick={() => setSubCategoryId(sub.id)}
|
|
className={[
|
|
'px-3 py-1.5 rounded-lg text-xs font-medium border transition-all',
|
|
isActive
|
|
? 'border-cyan-400/50 bg-cyan-400/15 text-cyan-300'
|
|
: 'border-white/10 bg-white/[0.03] text-slate-400 hover:text-white hover:bg-white/[0.06]',
|
|
].join(' ')}
|
|
>
|
|
{sub.name}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{errors.category_id && <p className="text-xs text-red-400">{errors.category_id[0]}</p>}
|
|
</Section>
|
|
)}
|
|
|
|
{/* ── Details (Title + Description) ── */}
|
|
<Section className="space-y-5">
|
|
<SectionTitle icon="fa-solid fa-pen-fancy">Details</SectionTitle>
|
|
|
|
<TextInput
|
|
label="Title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Give your artwork a title"
|
|
error={errors.title?.[0]}
|
|
required
|
|
/>
|
|
|
|
<FormField label="Description" htmlFor="artwork-description">
|
|
<MarkdownEditor
|
|
id="artwork-description"
|
|
value={description}
|
|
onChange={setDescription}
|
|
placeholder="Describe your artwork, tools, inspiration…"
|
|
rows={6}
|
|
error={errors.description?.[0]}
|
|
/>
|
|
</FormField>
|
|
</Section>
|
|
|
|
{/* ── Tags ── */}
|
|
<Section className="space-y-4">
|
|
<SectionTitle icon="fa-solid fa-tags">Tags</SectionTitle>
|
|
<TagPicker
|
|
value={tagSlugs}
|
|
onChange={setTagSlugs}
|
|
searchEndpoint="/api/studio/tags/search"
|
|
popularEndpoint="/api/studio/tags/search"
|
|
error={errors.tags?.[0]}
|
|
/>
|
|
</Section>
|
|
|
|
{/* ── Visibility ── */}
|
|
<Section>
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<SectionTitle icon="fa-solid fa-eye">Visibility</SectionTitle>
|
|
<p className="text-xs text-slate-500 -mt-2">
|
|
{isPublic
|
|
? 'Your artwork is visible to everyone'
|
|
: 'Your artwork is only visible to you'}
|
|
</p>
|
|
</div>
|
|
<Toggle
|
|
checked={isPublic}
|
|
onChange={(e) => setIsPublic(e.target.checked)}
|
|
label={isPublic ? 'Published' : 'Draft'}
|
|
variant={isPublic ? 'emerald' : 'accent'}
|
|
size="md"
|
|
/>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* ── Bottom Save Bar (mobile) ── */}
|
|
<div className="flex items-center justify-between gap-3 py-2 lg:hidden">
|
|
<Button variant="accent" loading={saving} onClick={handleSave}>
|
|
Save changes
|
|
</Button>
|
|
{saved && (
|
|
<span className="text-xs text-emerald-400 flex items-center gap-1">
|
|
<svg width="14" height="14" 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>
|
|
)}
|
|
</div>
|
|
</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>
|
|
)
|
|
}
|