feat: ship creator journey v2 and profile updates
This commit is contained in:
124
resources/js/Pages/Artwork/SimilarArtworksHeader.jsx
Normal file
124
resources/js/Pages/Artwork/SimilarArtworksHeader.jsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function SimilarArtworksHeader({ artwork }) {
|
||||
if (!artwork) return null
|
||||
|
||||
const title = artwork.title || 'Artwork'
|
||||
const artworkUrl = artwork.url || '#'
|
||||
const authorName = artwork.author_name || 'Artist'
|
||||
const authorHref = artwork.author_profile_url || (artwork.author_username ? `/@${artwork.author_username}` : null)
|
||||
const browseHref = artwork.browse_url || (artwork.content_type_slug ? `/${artwork.content_type_slug}` : '/explore')
|
||||
const thumbUrl = artwork.thumb_lg || artwork.thumb_md || null
|
||||
const thumbSrcSet = artwork.thumb_srcset || undefined
|
||||
const tags = Array.isArray(artwork.tag_slugs) ? artwork.tag_slugs.filter(Boolean) : []
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_28%),linear-gradient(145deg,rgba(8,17,29,0.96),rgba(11,20,34,0.94))] shadow-[0_28px_80px_rgba(2,6,23,0.34)]">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.12),transparent_24%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.12),transparent_30%)]" />
|
||||
<div className="relative grid gap-6 p-5 md:p-7 xl:grid-cols-[280px_minmax(0,1fr)] xl:items-center">
|
||||
<a
|
||||
href={artworkUrl}
|
||||
className="group relative overflow-hidden rounded-[28px] border border-white/10 bg-[#08111d] shadow-[0_18px_40px_rgba(2,6,23,0.28)]"
|
||||
>
|
||||
<div className="aspect-[5/4] overflow-hidden">
|
||||
{thumbUrl ? (
|
||||
<img
|
||||
src={thumbUrl}
|
||||
srcSet={thumbSrcSet}
|
||||
sizes="(min-width: 1280px) 280px, (min-width: 768px) 40vw, 100vw"
|
||||
alt={title}
|
||||
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-white/[0.04] text-sm text-slate-500">
|
||||
Preview unavailable
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/55 via-transparent to-transparent" />
|
||||
</a>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200">
|
||||
<span className="h-2 w-2 rounded-full bg-sky-300 shadow-[0_0_12px_rgba(125,211,252,0.85)]" />
|
||||
Visual discovery
|
||||
</div>
|
||||
|
||||
<h1 className="mt-4 max-w-4xl text-3xl font-semibold leading-tight tracking-[-0.04em] text-white md:text-4xl xl:text-5xl">
|
||||
Artworks similar to{' '}
|
||||
<a href={artworkUrl} className="underline decoration-white/15 underline-offset-4 transition hover:decoration-sky-300">
|
||||
{title}
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<p className="mt-3 max-w-3xl text-sm leading-6 text-slate-300">
|
||||
Browse visually related artworks, compare style cues, and jump back into the original piece whenever you need context.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2.5 text-sm text-slate-300">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3 py-1.5">
|
||||
{artwork.author_avatar ? (
|
||||
<img
|
||||
src={artwork.author_avatar}
|
||||
alt={authorName}
|
||||
className="h-5 w-5 rounded-full object-cover ring-1 ring-white/15"
|
||||
/>
|
||||
) : null}
|
||||
{authorHref ? (
|
||||
<a href={authorHref} className="font-medium text-white/85 transition hover:text-white">
|
||||
{authorName}
|
||||
</a>
|
||||
) : (
|
||||
<span className="font-medium text-white/85">{authorName}</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{artwork.category_name ? (
|
||||
<span className="inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-slate-300">
|
||||
{artwork.category_name}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{artwork.content_type_name ? (
|
||||
<span className="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1.5 text-xs font-medium text-amber-100">
|
||||
{artwork.content_type_name}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{tags.length > 0 ? (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{tags.map((tagSlug) => (
|
||||
<span
|
||||
key={tagSlug}
|
||||
className="rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-300 transition hover:border-sky-300/30 hover:bg-sky-400/10 hover:text-white"
|
||||
>
|
||||
#{tagSlug}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a
|
||||
href={artworkUrl}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.06] px-4 py-2.5 text-sm font-semibold text-white/85 transition hover:bg-white/[0.1] hover:text-white"
|
||||
>
|
||||
<svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Back to artwork
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={browseHref}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15 hover:text-white"
|
||||
>
|
||||
Browse {artwork.content_type_name || 'artworks'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react'
|
||||
import React, { useState, useCallback, useEffect } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import axios from 'axios'
|
||||
import ArtworkHero from '../components/artwork/ArtworkHero'
|
||||
@@ -7,6 +7,7 @@ import ArtworkMeta from '../components/artwork/ArtworkMeta'
|
||||
import ArtworkAwards from '../components/artwork/ArtworkAwards'
|
||||
import ArtworkTags from '../components/artwork/ArtworkTags'
|
||||
import ArtworkDescription from '../components/artwork/ArtworkDescription'
|
||||
import ArtworkEvolutionPanel from '../components/artwork/ArtworkEvolutionPanel'
|
||||
import ArtworkComments from '../components/artwork/ArtworkComments'
|
||||
import ArtworkActionBar from '../components/artwork/ArtworkActionBar'
|
||||
import ArtworkDetailsPanel from '../components/artwork/ArtworkDetailsPanel'
|
||||
@@ -42,6 +43,7 @@ function publisherToGroupSummary(publisher) {
|
||||
|
||||
function ArtworkPage({ artwork: initialArtwork, related: initialRelated, presentMd: initialMd, presentLg: initialLg, presentXl: initialXl, presentSq: initialSq, canonicalUrl: initialCanonical, isAuthenticated = false, comments: initialComments = [], groupSummary: initialGroupSummary = null }) {
|
||||
const [viewerOpen, setViewerOpen] = useState(false)
|
||||
const [showMatureArtwork, setShowMatureArtwork] = useState(false)
|
||||
const openViewer = useCallback(() => setViewerOpen(true), [])
|
||||
const closeViewer = useCallback(() => setViewerOpen(false), [])
|
||||
|
||||
@@ -98,47 +100,77 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
|
||||
setGroupSummary(data.group_summary ?? publisherToGroupSummary(data.publisher))
|
||||
setSelectedMediaId('cover')
|
||||
setViewerOpen(false) // close viewer when navigating away
|
||||
setShowMatureArtwork(false)
|
||||
}, [])
|
||||
|
||||
if (!artwork) return null
|
||||
|
||||
const mediaItems = useMemo(() => {
|
||||
const coverItem = {
|
||||
id: 'cover',
|
||||
label: 'Cover art',
|
||||
thumbUrl: presentSq?.url || presentMd?.url || presentLg?.url || artwork?.thumbs?.sq?.url || artwork?.thumbs?.md?.url || null,
|
||||
mdUrl: presentMd?.url || artwork?.thumbs?.md?.url || null,
|
||||
lgUrl: presentLg?.url || artwork?.thumbs?.lg?.url || null,
|
||||
xlUrl: presentXl?.url || artwork?.thumbs?.xl?.url || null,
|
||||
width: Number(artwork?.dimensions?.width || artwork?.width || 0) || null,
|
||||
height: Number(artwork?.dimensions?.height || artwork?.height || 0) || null,
|
||||
}
|
||||
const requiresInterstitial = Boolean(artwork?.maturity?.requires_interstitial) && !showMatureArtwork
|
||||
|
||||
const screenshotItems = Array.isArray(artwork?.screenshots)
|
||||
? artwork.screenshots.map((item, index) => ({
|
||||
id: item.id || `shot-${index + 1}`,
|
||||
label: item.label || `Screenshot ${index + 1}`,
|
||||
thumbUrl: item.thumb_url || item.url || null,
|
||||
mdUrl: item.url || item.thumb_url || null,
|
||||
lgUrl: item.url || item.thumb_url || null,
|
||||
xlUrl: item.url || item.thumb_url || null,
|
||||
width: null,
|
||||
height: null,
|
||||
}))
|
||||
: []
|
||||
if (requiresInterstitial) {
|
||||
return (
|
||||
<main className="pb-24 pt-8 lg:pb-12 lg:pt-10">
|
||||
<div className="mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8">
|
||||
<section className="rounded-[32px] border border-amber-300/20 bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.18),transparent_32%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.34)] md:p-8">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-amber-200/80">Content warning</p>
|
||||
<h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{artwork?.maturity?.warning_title || 'Mature content warning'}</h1>
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-200/90">{artwork?.maturity?.warning_message || 'This artwork may contain mature material. Continue only if you want to view it.'}</p>
|
||||
<div className="mt-5 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-4 text-sm text-slate-300">
|
||||
<div className="font-semibold text-white">{artwork.title}</div>
|
||||
<div className="mt-1">by {artwork?.publisher?.name || artwork?.user?.name || 'Artist'}</div>
|
||||
</div>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMatureArtwork(true)}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-amber-300/25 bg-amber-400/12 px-5 py-3 text-sm font-semibold text-amber-100 transition hover:bg-amber-400/18"
|
||||
>
|
||||
<i className="fa-solid fa-eye" />
|
||||
Show artwork
|
||||
</button>
|
||||
<a
|
||||
href={artwork?.publisher?.profile_url || '/discover/trending'}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left" />
|
||||
Leave this page
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
return [coverItem, ...screenshotItems].filter((item) => Boolean(item.thumbUrl || item.lgUrl || item.xlUrl))
|
||||
}, [artwork, presentMd, presentLg, presentXl, presentSq])
|
||||
const coverItem = {
|
||||
id: 'cover',
|
||||
label: 'Cover art',
|
||||
thumbUrl: presentSq?.url || presentMd?.url || presentLg?.url || artwork?.thumbs?.sq?.url || artwork?.thumbs?.md?.url || null,
|
||||
mdUrl: presentMd?.url || artwork?.thumbs?.md?.url || null,
|
||||
lgUrl: presentLg?.url || artwork?.thumbs?.lg?.url || null,
|
||||
xlUrl: presentXl?.url || artwork?.thumbs?.xl?.url || null,
|
||||
width: Number(artwork?.dimensions?.width || artwork?.width || 0) || null,
|
||||
height: Number(artwork?.dimensions?.height || artwork?.height || 0) || null,
|
||||
}
|
||||
|
||||
const screenshotItems = Array.isArray(artwork?.screenshots)
|
||||
? artwork.screenshots.map((item, index) => ({
|
||||
id: item.id || `shot-${index + 1}`,
|
||||
label: item.label || `Screenshot ${index + 1}`,
|
||||
thumbUrl: item.thumb_url || item.url || null,
|
||||
mdUrl: item.url || item.thumb_url || null,
|
||||
lgUrl: item.url || item.thumb_url || null,
|
||||
xlUrl: item.url || item.thumb_url || null,
|
||||
width: null,
|
||||
height: null,
|
||||
}))
|
||||
: []
|
||||
|
||||
const mediaItems = [coverItem, ...screenshotItems].filter((item) => Boolean(item.thumbUrl || item.lgUrl || item.xlUrl))
|
||||
|
||||
const selectedMedia = mediaItems.find((item) => item.id === selectedMediaId) || mediaItems[0] || null
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedMedia && mediaItems.length > 0) {
|
||||
setSelectedMediaId(mediaItems[0].id)
|
||||
}
|
||||
}, [mediaItems, selectedMedia])
|
||||
|
||||
const initialAwards = artwork?.awards ?? null
|
||||
const initialAwards = artwork?.medals ?? artwork?.awards ?? null
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -188,6 +220,9 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
|
||||
{/* Description */}
|
||||
<ArtworkDescription artwork={artwork} />
|
||||
|
||||
{/* Artwork evolution */}
|
||||
<ArtworkEvolutionPanel evolution={artwork?.evolution} />
|
||||
|
||||
{/* Artwork reactions */}
|
||||
{reactionTotals !== null && (
|
||||
<section className="relative z-20 overflow-visible rounded-[28px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(245,158,11,0.14),transparent_42%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-5 py-5 shadow-[0_22px_55px_rgba(0,0,0,0.26)] backdrop-blur-xl sm:px-6">
|
||||
@@ -232,7 +267,7 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
|
||||
{/* Details (collapsible) */}
|
||||
<ArtworkDetailsPanel artwork={artwork} stats={liveStats} />
|
||||
|
||||
{/* Awards */}
|
||||
{/* Medals */}
|
||||
<ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import { Head, usePage } from '@inertiajs/react'
|
||||
import CollectionCard from '../../components/profile/collections/CollectionCard'
|
||||
import CollectionVisibilityBadge from '../../components/profile/collections/CollectionVisibilityBadge'
|
||||
|
||||
function getCsrfToken() {
|
||||
|
||||
@@ -203,6 +203,25 @@ function EntityLinkCard({ item }) {
|
||||
)
|
||||
}
|
||||
|
||||
function CollectionCover({ collection }) {
|
||||
const coverImage = collection?.cover_image
|
||||
const coverMaturity = collection?.cover_image_maturity || null
|
||||
const shouldBlur = Boolean(coverMaturity?.should_blur)
|
||||
const isMature = Boolean(coverMaturity?.is_mature_effective)
|
||||
|
||||
if (!coverImage) {
|
||||
return <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<img src={coverImage} alt={collection?.title} className={`aspect-[16/10] h-full w-full object-cover ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`} />
|
||||
{isMature ? <div className="absolute left-4 top-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
|
||||
{shouldBlur ? <div className="absolute inset-x-4 bottom-4 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function humanizeToken(value) {
|
||||
return String(value || '')
|
||||
.replaceAll('_', ' ')
|
||||
@@ -745,7 +764,7 @@ export default function CollectionShow() {
|
||||
<section className="mt-6 overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.04] shadow-[0_30px_90px_rgba(2,6,23,0.28)] backdrop-blur-sm">
|
||||
<div className="grid gap-6 p-5 md:p-7 xl:grid-cols-[minmax(0,1.2fr)_420px]">
|
||||
<div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-slate-950/60">
|
||||
{collection?.cover_image ? <img src={collection.cover_image} alt={collection.title} className="aspect-[16/10] h-full w-full object-cover" /> : <div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,#08111f,#0f172a,#08111f)] text-slate-500"><i className="fa-solid fa-layer-group text-5xl" /></div>}
|
||||
<CollectionCover collection={collection} />
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.8),rgba(2,6,23,0.08))]" />
|
||||
</div>
|
||||
|
||||
|
||||
723
resources/js/Pages/Collection/FeaturedArtworksAdmin.jsx
Normal file
723
resources/js/Pages/Collection/FeaturedArtworksAdmin.jsx
Normal file
@@ -0,0 +1,723 @@
|
||||
import React from 'react'
|
||||
import { Head, usePage } from '@inertiajs/react'
|
||||
|
||||
function getCsrfToken() {
|
||||
if (typeof document === 'undefined') return ''
|
||||
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
||||
}
|
||||
|
||||
async function requestJson(url, { method = 'POST', body } = {}) {
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
})
|
||||
|
||||
const payload = await response.json().catch(() => ({}))
|
||||
if (!response.ok) {
|
||||
throw new Error(payload?.message || payload?.errors?.artwork_id?.[0] || payload?.errors?.is_active?.[0] || payload?.errors?.force_hero?.[0] || 'Request failed.')
|
||||
}
|
||||
|
||||
return payload
|
||||
}
|
||||
|
||||
function isoToLocalInput(value) {
|
||||
if (!value) return ''
|
||||
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return ''
|
||||
|
||||
const local = new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
|
||||
return local.toISOString().slice(0, 16)
|
||||
}
|
||||
|
||||
function localInputToIso(value) {
|
||||
if (!value) return null
|
||||
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return null
|
||||
|
||||
return date.toISOString()
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
if (!value) return '—'
|
||||
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return '—'
|
||||
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
function Badge({ label, tone = 'slate' }) {
|
||||
const toneClasses = {
|
||||
slate: 'border-white/10 bg-white/10 text-slate-100',
|
||||
sky: 'border-sky-300/20 bg-sky-400/15 text-sky-100',
|
||||
emerald: 'border-emerald-300/20 bg-emerald-400/15 text-emerald-100',
|
||||
amber: 'border-amber-300/20 bg-amber-400/15 text-amber-100',
|
||||
rose: 'border-rose-300/20 bg-rose-400/15 text-rose-100',
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.slate}`}>
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function Field({ label, help, children }) {
|
||||
return (
|
||||
<label className="block space-y-2">
|
||||
<span className="text-sm font-semibold text-white">{label}</span>
|
||||
{children}
|
||||
{help ? <span className="block text-xs leading-relaxed text-slate-400">{help}</span> : null}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ label, value, tone = 'sky' }) {
|
||||
const toneClasses = {
|
||||
sky: 'border-sky-300/15 bg-sky-400/10 text-sky-100',
|
||||
amber: 'border-amber-300/15 bg-amber-400/10 text-amber-100',
|
||||
emerald: 'border-emerald-300/15 bg-emerald-400/10 text-emerald-100',
|
||||
rose: 'border-rose-300/15 bg-rose-400/10 text-rose-100',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 backdrop-blur-sm">
|
||||
<div className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${toneClasses[tone] || toneClasses.sky}`}>{label}</div>
|
||||
<div className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{value}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function emptyForm() {
|
||||
return {
|
||||
artwork_id: '',
|
||||
priority: 100,
|
||||
featured_at: isoToLocalInput(new Date().toISOString()),
|
||||
expires_at: '',
|
||||
is_active: true,
|
||||
}
|
||||
}
|
||||
|
||||
function mapEntryToCandidate(entry) {
|
||||
if (!entry) return null
|
||||
|
||||
return {
|
||||
...entry.artwork,
|
||||
medals: entry.medals,
|
||||
eligibility: entry.eligibility,
|
||||
existing_feature_count: entry.duplicate_count,
|
||||
already_featured: entry.duplicate_count > 0,
|
||||
}
|
||||
}
|
||||
|
||||
function compareEntries(left, right, sortKey, direction) {
|
||||
const dir = direction === 'asc' ? 1 : -1
|
||||
const value = (entry) => {
|
||||
switch (sortKey) {
|
||||
case 'featured_at':
|
||||
return new Date(entry.featured_at || 0).getTime() || 0
|
||||
case 'expires_at':
|
||||
return new Date(entry.expires_at || 0).getTime() || 0
|
||||
case 'score_30d':
|
||||
return Number(entry.medals?.score_30d || 0)
|
||||
default:
|
||||
return Number(entry.priority || 0)
|
||||
}
|
||||
}
|
||||
|
||||
const leftValue = value(left)
|
||||
const rightValue = value(right)
|
||||
if (leftValue !== rightValue) {
|
||||
return (leftValue > rightValue ? 1 : -1) * dir
|
||||
}
|
||||
|
||||
const leftFeatured = new Date(left.featured_at || 0).getTime() || 0
|
||||
const rightFeatured = new Date(right.featured_at || 0).getTime() || 0
|
||||
if (leftFeatured !== rightFeatured) {
|
||||
return (leftFeatured > rightFeatured ? 1 : -1) * dir
|
||||
}
|
||||
|
||||
return Number(right.id || 0) - Number(left.id || 0)
|
||||
}
|
||||
|
||||
export default function FeaturedArtworksAdmin() {
|
||||
const { props } = usePage()
|
||||
const endpoints = props.endpoints || {}
|
||||
const capabilities = props.capabilities || {}
|
||||
const seo = props.seo || {}
|
||||
const [entries, setEntries] = React.useState(Array.isArray(props.entries) ? props.entries : [])
|
||||
const [winner, setWinner] = React.useState(props.winner || null)
|
||||
const [stats, setStats] = React.useState(props.stats || {})
|
||||
const [notice, setNotice] = React.useState('')
|
||||
const [busy, setBusy] = React.useState('')
|
||||
const [filter, setFilter] = React.useState('all')
|
||||
const [sortKey, setSortKey] = React.useState('priority')
|
||||
const [sortDirection, setSortDirection] = React.useState('desc')
|
||||
const [listQuery, setListQuery] = React.useState('')
|
||||
const [searchQuery, setSearchQuery] = React.useState('')
|
||||
const [searchResults, setSearchResults] = React.useState([])
|
||||
const [selectedArtwork, setSelectedArtwork] = React.useState(null)
|
||||
const [editingId, setEditingId] = React.useState(null)
|
||||
const [form, setForm] = React.useState(emptyForm())
|
||||
|
||||
React.useEffect(() => {
|
||||
setEntries(Array.isArray(props.entries) ? props.entries : [])
|
||||
setWinner(props.winner || null)
|
||||
setStats(props.stats || {})
|
||||
}, [props.entries, props.stats, props.winner])
|
||||
|
||||
function syncPayload(payload) {
|
||||
setEntries(Array.isArray(payload.entries) ? payload.entries : [])
|
||||
setWinner(payload.winner || null)
|
||||
setStats(payload.stats || {})
|
||||
if (payload.message) {
|
||||
setNotice(payload.message)
|
||||
}
|
||||
}
|
||||
|
||||
function resetEditor() {
|
||||
setEditingId(null)
|
||||
setSelectedArtwork(null)
|
||||
setSearchResults([])
|
||||
setSearchQuery('')
|
||||
setForm(emptyForm())
|
||||
}
|
||||
|
||||
async function handleArtworkSearch(event) {
|
||||
event.preventDefault()
|
||||
if (!searchQuery.trim()) {
|
||||
setSearchResults([])
|
||||
return
|
||||
}
|
||||
|
||||
setBusy('search')
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const url = `${endpoints.search}?q=${encodeURIComponent(searchQuery.trim())}`
|
||||
const payload = await requestJson(url, { method: 'GET' })
|
||||
setSearchResults(Array.isArray(payload.results) ? payload.results : [])
|
||||
if ((payload.results || []).length === 0) {
|
||||
setNotice('No artworks matched that search.')
|
||||
}
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Artwork search failed.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
function chooseArtwork(artwork) {
|
||||
setSelectedArtwork(artwork)
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
artwork_id: artwork.id,
|
||||
}))
|
||||
}
|
||||
|
||||
function editEntry(entry) {
|
||||
setEditingId(entry.id)
|
||||
setSelectedArtwork(mapEntryToCandidate(entry))
|
||||
setSearchResults([])
|
||||
setSearchQuery('')
|
||||
setForm({
|
||||
artwork_id: entry.artwork_id,
|
||||
priority: entry.priority,
|
||||
featured_at: isoToLocalInput(entry.featured_at),
|
||||
expires_at: isoToLocalInput(entry.expires_at),
|
||||
is_active: Boolean(entry.is_active),
|
||||
})
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault()
|
||||
if (!editingId && !form.artwork_id) {
|
||||
setNotice('Select an artwork first.')
|
||||
return
|
||||
}
|
||||
|
||||
setBusy('submit')
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(
|
||||
editingId
|
||||
? endpoints.updatePattern.replace('__FEATURE__', String(editingId))
|
||||
: endpoints.store,
|
||||
{
|
||||
method: editingId ? 'PATCH' : 'POST',
|
||||
body: {
|
||||
artwork_id: Number(form.artwork_id),
|
||||
priority: Number(form.priority || 0),
|
||||
featured_at: localInputToIso(form.featured_at),
|
||||
expires_at: localInputToIso(form.expires_at),
|
||||
is_active: Boolean(form.is_active),
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
syncPayload(payload)
|
||||
resetEditor()
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to save this featured entry.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggle(entry) {
|
||||
setBusy(`toggle-${entry.id}`)
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(endpoints.togglePattern.replace('__FEATURE__', String(entry.id)), {
|
||||
method: 'PATCH',
|
||||
})
|
||||
syncPayload(payload)
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to change active state.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(entry) {
|
||||
if (typeof window !== 'undefined' && !window.confirm(`Delete featured entry #${entry.id}?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
setBusy(`delete-${entry.id}`)
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(endpoints.destroyPattern.replace('__FEATURE__', String(entry.id)), {
|
||||
method: 'DELETE',
|
||||
})
|
||||
syncPayload(payload)
|
||||
|
||||
if (editingId === entry.id) {
|
||||
resetEditor()
|
||||
}
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to delete this featured entry.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleForceHero(entry) {
|
||||
setBusy(`force-${entry.id}`)
|
||||
setNotice('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(endpoints.forceHeroPattern.replace('__FEATURE__', String(entry.id)), {
|
||||
method: 'PATCH',
|
||||
})
|
||||
syncPayload(payload)
|
||||
} catch (error) {
|
||||
setNotice(error.message || 'Failed to change force hero state.')
|
||||
} finally {
|
||||
setBusy('')
|
||||
}
|
||||
}
|
||||
|
||||
const filteredEntries = React.useMemo(() => {
|
||||
const query = listQuery.trim().toLowerCase()
|
||||
|
||||
return entries
|
||||
.filter((entry) => {
|
||||
if (filter === 'active') return Boolean(entry.is_active)
|
||||
if (filter === 'inactive') return !entry.is_active
|
||||
if (filter === 'expired') return Boolean(entry.is_expired)
|
||||
if (filter === 'winner') return Boolean(entry.is_winner)
|
||||
if (filter === 'eligible') return Boolean(entry.eligibility?.is_eligible)
|
||||
if (filter === 'ineligible') return !entry.eligibility?.is_eligible
|
||||
return true
|
||||
})
|
||||
.filter((entry) => {
|
||||
if (!query) return true
|
||||
|
||||
const haystack = [
|
||||
entry.artwork?.title,
|
||||
entry.artwork?.owner?.display_name,
|
||||
entry.artwork?.owner?.username,
|
||||
entry.artwork?.id,
|
||||
].join(' ').toLowerCase()
|
||||
|
||||
return haystack.includes(query)
|
||||
})
|
||||
.sort((left, right) => compareEntries(left, right, sortKey, sortDirection))
|
||||
}, [entries, filter, listQuery, sortDirection, sortKey])
|
||||
|
||||
const duplicateSelection = !editingId && selectedArtwork?.already_featured
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{seo.title || 'Featured Artworks'}</title>
|
||||
{seo.description ? <meta name="description" content={seo.description} /> : null}
|
||||
{seo.robots ? <meta name="robots" content={seo.robots} /> : null}
|
||||
</Head>
|
||||
|
||||
<div className="min-h-screen bg-[#07111c] text-white">
|
||||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8">
|
||||
<section className="overflow-hidden rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(245,158,11,0.14),_transparent_35%),linear-gradient(180deg,_rgba(6,14,25,0.92),_rgba(8,18,32,0.96))] p-8 shadow-[0_28px_90px_rgba(2,6,23,0.45)]">
|
||||
<div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100">Featured Artworks</div>
|
||||
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Homepage hero control, with the real winner logic exposed.</h1>
|
||||
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">Editors can create, update, activate, expire, and remove featured entries here. The winner summary below mirrors the public homepage selection order: priority, recent medal score, featured date, then published date.</p>
|
||||
</div>
|
||||
<div className="grid w-full max-w-xl grid-cols-2 gap-4 md:grid-cols-3">
|
||||
<StatCard label="Entries" value={stats.total || 0} tone="sky" />
|
||||
<StatCard label="Eligible" value={stats.eligible || 0} tone="emerald" />
|
||||
<StatCard label="Expired" value={stats.expired || 0} tone="amber" />
|
||||
<StatCard label="Active" value={stats.active || 0} tone="sky" />
|
||||
<StatCard label="Inactive" value={stats.inactive || 0} tone="rose" />
|
||||
<StatCard label="Not Eligible" value={stats.ineligible || 0} tone="rose" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{notice ? (
|
||||
<div className="rounded-2xl border border-sky-300/15 bg-sky-400/10 px-4 py-3 text-sm text-sky-50">
|
||||
{notice}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
<section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Current Homepage Hero</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{winner ? winner.artwork?.title : 'No eligible featured artwork'}</h2>
|
||||
<p className="mt-2 max-w-2xl text-sm leading-7 text-slate-300">
|
||||
{winner?.selection_reason || 'There is no active, non-expired, eligible featured artwork right now.'}
|
||||
</p>
|
||||
{winner?.is_force_hero ? (
|
||||
<div className="mt-4 max-w-2xl rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-50">
|
||||
Forced by editor. This artwork bypasses the normal hero winner order until Force Hero is disabled on its featured row.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{winner ? <Badge label="Winner" tone="amber" /> : <Badge label="No Winner" tone="rose" />}
|
||||
{winner?.is_force_hero ? <Badge label="Force Hero" tone="amber" /> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{winner ? (
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
|
||||
<a href={winner.artwork?.canonical_url || '#'} className="overflow-hidden rounded-[24px] border border-white/10 bg-[#09121f]" target="_blank" rel="noreferrer">
|
||||
<img
|
||||
src={winner.artwork?.thumbnail?.url}
|
||||
alt={winner.artwork?.title || 'Winner preview'}
|
||||
className="h-full min-h-[180px] w-full object-cover"
|
||||
/>
|
||||
</a>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Artist</div>
|
||||
<div className="mt-2 text-lg font-semibold text-white">{winner.artwork?.owner?.display_name || 'Unknown'}</div>
|
||||
<div className="mt-1 text-sm text-slate-400">{winner.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${winner.artwork?.owner?.username || ''}`}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Medal Score (30d)</div>
|
||||
<div className="mt-2 text-lg font-semibold text-white">{winner.medals?.score_30d || 0}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Priority</div>
|
||||
<div className="mt-2 text-lg font-semibold text-white">{winner.priority}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Featured Since</div>
|
||||
<div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.featured_at)}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-black/20 p-4 sm:col-span-2">
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Published At</div>
|
||||
<div className="mt-2 text-lg font-semibold text-white">{formatDateTime(winner.artwork?.published_at)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{editingId ? 'Edit Entry' : 'Create Entry'}</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">{editingId ? `Featured entry #${editingId}` : 'Add an artwork to the featured pool'}</h2>
|
||||
</div>
|
||||
{editingId ? (
|
||||
<button type="button" onClick={resetEditor} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/5">
|
||||
Cancel edit
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{!editingId ? (
|
||||
<form onSubmit={handleArtworkSearch} className="mt-6 space-y-4 rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<Field label="Artwork selector" help="Search by artwork ID, title, slug, artist, or group. Pick a result to lock it into the form.">
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
||||
placeholder="Try an artwork ID, title, or creator"
|
||||
/>
|
||||
<button type="submit" disabled={busy === 'search'} className="rounded-2xl bg-sky-400 px-4 py-3 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-60">
|
||||
{busy === 'search' ? 'Searching…' : 'Search'}
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
{searchResults.length > 0 ? (
|
||||
<div className="grid gap-3">
|
||||
{searchResults.map((artwork) => (
|
||||
<button
|
||||
type="button"
|
||||
key={artwork.id}
|
||||
onClick={() => chooseArtwork(artwork)}
|
||||
className={`grid gap-4 rounded-2xl border p-3 text-left transition sm:grid-cols-[88px_1fr] ${selectedArtwork?.id === artwork.id ? 'border-sky-300/40 bg-sky-400/10' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]'}`}
|
||||
>
|
||||
<img src={artwork.thumbnail?.url} alt={artwork.title} className="h-24 w-full rounded-2xl object-cover" />
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-semibold text-white">{artwork.title}</span>
|
||||
<span className="text-xs text-slate-400">#{artwork.id}</span>
|
||||
{artwork.already_featured ? <Badge label="Already Featured" tone="amber" /> : null}
|
||||
</div>
|
||||
<div className="text-xs text-slate-400">{artwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {artwork.medals?.score_30d || 0}</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(artwork.eligibility?.is_eligible ? [{ label: 'Eligible', tone: 'emerald' }] : [{ label: 'Not eligible', tone: 'rose' }]).concat(
|
||||
(artwork.eligibility?.reasons || []).map((reason) => ({
|
||||
label: reason,
|
||||
tone: reason === 'Missing preview' ? 'rose' : 'slate',
|
||||
}))
|
||||
).slice(0, 4).map((badge) => (
|
||||
<Badge key={`${artwork.id}-${badge.label}`} label={badge.label} tone={badge.tone} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{selectedArtwork ? (
|
||||
<div className="mt-6 grid gap-4 rounded-[24px] border border-white/10 bg-black/20 p-4 sm:grid-cols-[108px_1fr]">
|
||||
<img src={selectedArtwork.thumbnail?.url} alt={selectedArtwork.title || 'Artwork preview'} className="h-28 w-full rounded-2xl object-cover" />
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Selected Artwork</div>
|
||||
<div className="mt-2 text-lg font-semibold text-white">{selectedArtwork.title}</div>
|
||||
<div className="mt-1 text-sm text-slate-400">#{selectedArtwork.id} • {selectedArtwork.owner?.display_name || 'Unknown'} • Medal Score (30d): {selectedArtwork.medals?.score_30d || 0}</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(selectedArtwork.eligibility?.is_eligible ? [{ label: 'Currently eligible', tone: 'emerald' }] : [{ label: 'Currently ineligible', tone: 'rose' }]).concat(
|
||||
(selectedArtwork.eligibility?.reasons || []).map((reason) => ({
|
||||
label: reason,
|
||||
tone: reason === 'Missing preview' ? 'rose' : 'slate',
|
||||
}))
|
||||
).map((badge) => (
|
||||
<Badge key={`selected-${badge.label}`} label={badge.label} tone={badge.tone} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{duplicateSelection ? (
|
||||
<div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
|
||||
This artwork already has a featured entry. Edit the existing row instead of creating a duplicate.
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-6 grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Priority" help="Higher priority always wins before medal score is considered.">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={form.priority}
|
||||
onChange={(event) => setForm((current) => ({ ...current, priority: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Active" help="Inactive rows stay visible in admin but cannot win the homepage hero.">
|
||||
<label className="flex h-[52px] items-center gap-3 rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-slate-100">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Boolean(form.is_active)}
|
||||
onChange={(event) => setForm((current) => ({ ...current, is_active: event.target.checked }))}
|
||||
className="h-4 w-4 rounded border-white/20 bg-transparent text-sky-400 focus:ring-sky-300/30"
|
||||
/>
|
||||
<span>{form.is_active ? 'Active on save' : 'Inactive on save'}</span>
|
||||
</label>
|
||||
</Field>
|
||||
|
||||
<Field label="Featured Since">
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={form.featured_at}
|
||||
onChange={(event) => setForm((current) => ({ ...current, featured_at: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Expires">
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={form.expires_at}
|
||||
onChange={(event) => setForm((current) => ({ ...current, expires_at: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="sm:col-span-2 flex flex-wrap gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy === 'submit' || (!editingId && !selectedArtwork) || duplicateSelection}
|
||||
className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{busy === 'submit' ? 'Saving…' : editingId ? 'Save Changes' : 'Create Featured Entry'}
|
||||
</button>
|
||||
{editingId ? (
|
||||
<button type="button" onClick={resetEditor} className="rounded-2xl border border-white/10 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
||||
Reset
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="rounded-[28px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Featured Pool</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.04em] text-white">Every featured row, with eligibility and winner state visible.</h2>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-3 lg:w-[720px]">
|
||||
<input
|
||||
type="text"
|
||||
value={listQuery}
|
||||
onChange={(event) => setListQuery(event.target.value)}
|
||||
placeholder="Filter by title, artist, or artwork ID"
|
||||
className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
|
||||
/>
|
||||
<select value={filter} onChange={(event) => setFilter(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
|
||||
<option value="all">All rows</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
<option value="expired">Expired</option>
|
||||
<option value="winner">Winner</option>
|
||||
<option value="eligible">Eligible</option>
|
||||
<option value="ineligible">Not eligible</option>
|
||||
</select>
|
||||
<div className="grid grid-cols-[1fr_auto] gap-3">
|
||||
<select value={sortKey} onChange={(event) => setSortKey(event.target.value)} className="rounded-2xl border border-white/10 bg-[#08111d] px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40">
|
||||
<option value="priority">Priority</option>
|
||||
<option value="featured_at">Featured Since</option>
|
||||
<option value="expires_at">Expires</option>
|
||||
<option value="score_30d">Medal Score (30d)</option>
|
||||
</select>
|
||||
<button type="button" onClick={() => setSortDirection((current) => current === 'desc' ? 'asc' : 'desc')} className="rounded-2xl border border-white/10 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
||||
{sortDirection === 'desc' ? 'Desc' : 'Asc'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 overflow-hidden rounded-[24px] border border-white/10">
|
||||
<div className="hidden grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] gap-4 border-b border-white/10 bg-black/20 px-5 py-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 lg:grid">
|
||||
<div>Artwork</div>
|
||||
<div>Artist / Owner</div>
|
||||
<div>Priority</div>
|
||||
<div>Featured Since</div>
|
||||
<div>Expires</div>
|
||||
<div>Score (30d)</div>
|
||||
<div>Status</div>
|
||||
<div>Actions</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-white/10">
|
||||
{filteredEntries.length === 0 ? (
|
||||
<div className="px-5 py-10 text-center text-sm text-slate-400">No featured entries match the current filter.</div>
|
||||
) : filteredEntries.map((entry) => (
|
||||
<div key={entry.id} className="grid gap-5 bg-white/[0.02] px-5 py-5 lg:grid-cols-[1.2fr_1fr_0.5fr_0.9fr_0.9fr_0.7fr_1.5fr_0.9fr] lg:items-center">
|
||||
<div className="grid gap-4 sm:grid-cols-[92px_1fr]">
|
||||
<a href={entry.artwork?.canonical_url || '#'} target="_blank" rel="noreferrer" className="overflow-hidden rounded-2xl border border-white/10 bg-[#08111d]">
|
||||
<img src={entry.artwork?.thumbnail?.url} alt={entry.artwork?.title || 'Artwork preview'} className="h-24 w-full object-cover" />
|
||||
</a>
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-semibold text-white">{entry.artwork?.title || 'Missing artwork'}</span>
|
||||
<span className="text-xs text-slate-400">#{entry.artwork?.id || entry.artwork_id}</span>
|
||||
</div>
|
||||
<div className="mt-2 text-xs leading-6 text-slate-400">Visibility: {entry.artwork?.visibility || '—'} • Published: {entry.artwork?.published_at ? 'Yes' : 'No'}</div>
|
||||
{entry.is_winner && entry.winner_reason ? <div className="mt-2 text-xs leading-6 text-amber-100">{entry.winner_reason}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">{entry.artwork?.owner?.display_name || 'Unknown'}</div>
|
||||
<div className="mt-1 text-xs text-slate-400">{entry.artwork?.owner?.type === 'group' ? 'Group publisher' : `@${entry.artwork?.owner?.username || ''}`}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-sm font-semibold text-white">{entry.priority}</div>
|
||||
<div className="text-sm text-slate-200">{formatDateTime(entry.featured_at)}</div>
|
||||
<div className="text-sm text-slate-200">{formatDateTime(entry.expires_at)}</div>
|
||||
<div className="text-sm font-semibold text-white">{entry.medals?.score_30d || 0}</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(entry.status_badges || []).map((badge, index) => (
|
||||
<Badge key={`${entry.id}-${badge.label}-${index}`} label={badge.label} tone={badge.tone} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 lg:justify-end">
|
||||
<button type="button" onClick={() => editEntry(entry)} className="rounded-full border border-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-slate-100 transition hover:border-white/20 hover:bg-white/5">
|
||||
Edit
|
||||
</button>
|
||||
{capabilities.forceHeroEnabled ? (
|
||||
<button type="button" onClick={() => handleForceHero(entry)} disabled={busy === `force-${entry.id}`} className={`rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition disabled:cursor-not-allowed disabled:opacity-60 ${entry.is_force_hero ? 'border-amber-300/25 text-amber-100 hover:border-amber-300/40 hover:bg-amber-400/10' : 'border-amber-300/15 text-amber-50 hover:border-amber-300/30 hover:bg-amber-400/5'}`}>
|
||||
{busy === `force-${entry.id}` ? 'Saving…' : entry.is_force_hero ? 'Disable Force Hero' : 'Force Hero'}
|
||||
</button>
|
||||
) : null}
|
||||
<button type="button" onClick={() => handleToggle(entry)} disabled={busy === `toggle-${entry.id}`} className="rounded-full border border-sky-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-60">
|
||||
{busy === `toggle-${entry.id}` ? 'Saving…' : entry.is_active ? 'Deactivate' : 'Activate'}
|
||||
</button>
|
||||
<button type="button" onClick={() => handleDelete(entry)} disabled={busy === `delete-${entry.id}`} className="rounded-full border border-rose-300/20 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100 transition hover:border-rose-300/40 hover:bg-rose-400/10 disabled:cursor-not-allowed disabled:opacity-60">
|
||||
{busy === `delete-${entry.id}` ? 'Deleting…' : 'Delete'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -65,7 +65,7 @@ export default function HomeBecauseYouLike({ items, preferences }) {
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
|
||||
{items.map((item) => (
|
||||
<ArtCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function HomeCTA({ isLoggedIn }) {
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-3">
|
||||
<a
|
||||
href={uploadHref}
|
||||
className="rounded-xl bg-accent px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-accent/20 transition hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
|
||||
className="btn-accent-solid rounded-xl px-6 py-2.5 text-sm font-semibold"
|
||||
>
|
||||
Upload your artwork
|
||||
</a>
|
||||
|
||||
@@ -24,7 +24,7 @@ function CreatorCard({ creator }) {
|
||||
<a href={creator.url} className="relative block">
|
||||
<img
|
||||
src={creator.avatar}
|
||||
alt={creator.name}
|
||||
alt=""
|
||||
className="mx-auto h-16 w-16 rounded-full object-cover ring-4 bg-nova-800/80 ring-nova-800"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function HomeFresh({ items }) {
|
||||
</div>
|
||||
|
||||
<ArtworkGalleryGrid
|
||||
items={items.slice(0, 8)}
|
||||
items={items}
|
||||
showStats={false}
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -74,7 +74,7 @@ export default function HomeFromFollowing({ items }) {
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
|
||||
{items.map((item) => (
|
||||
<ArtCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ function GroupSpotlightCard({ group }) {
|
||||
{group.avatar_url ? (
|
||||
<img
|
||||
src={group.avatar_url}
|
||||
alt={group.name}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
const FALLBACK = 'https://files.skinbase.org/default/missing_lg.webp'
|
||||
const HERO_SIZES = '100vw'
|
||||
|
||||
export default function HomeHero({ artwork }) {
|
||||
if (!artwork) {
|
||||
@@ -15,7 +16,7 @@ export default function HomeHero({ artwork }) {
|
||||
Discover. Create. Inspire.
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
<a href="/discover/trending" className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110">Explore Trending</a>
|
||||
<a href="/discover/trending" className="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold">Explore Trending</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -23,16 +24,20 @@ export default function HomeHero({ artwork }) {
|
||||
}
|
||||
|
||||
const src = artwork.thumb_lg || artwork.thumb || FALLBACK
|
||||
const srcSet = artwork.thumb_srcset || null
|
||||
|
||||
return (
|
||||
<section className="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
|
||||
{/* Background image */}
|
||||
<img
|
||||
src={src}
|
||||
srcSet={srcSet || undefined}
|
||||
sizes={srcSet ? HERO_SIZES : undefined}
|
||||
alt={artwork.title}
|
||||
className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
|
||||
fetchPriority="high"
|
||||
decoding="async"
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
onError={(e) => { e.currentTarget.src = FALLBACK }}
|
||||
/>
|
||||
|
||||
@@ -53,7 +58,7 @@ export default function HomeHero({ artwork }) {
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
<a
|
||||
href="/discover/trending"
|
||||
className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110"
|
||||
className="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold"
|
||||
>
|
||||
Explore Trending
|
||||
</a>
|
||||
|
||||
24
resources/js/Pages/Home/HomeMedalHighlights.jsx
Normal file
24
resources/js/Pages/Home/HomeMedalHighlights.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'
|
||||
|
||||
export default function HomeMedalHighlights({ title, href = null, items, description = '' }) {
|
||||
if (!Array.isArray(items) || items.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="mt-14 px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-5 flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white">{title}</h2>
|
||||
{description ? <p className="mt-2 max-w-2xl text-sm text-slate-400">{description}</p> : null}
|
||||
</div>
|
||||
{href ? (
|
||||
<a href={href} className="text-sm text-nova-300 transition hover:text-white">
|
||||
See all →
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<ArtworkGalleryGrid items={items} className="xl:grid-cols-4" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -8,6 +8,7 @@ const HomeTrendingForYou = lazy(() => import('./HomeTrendingForYou'))
|
||||
const HomeBecauseYouLike = lazy(() => import('./HomeBecauseYouLike'))
|
||||
const HomeSuggestedCreators = lazy(() => import('./HomeSuggestedCreators'))
|
||||
const HomeTrending = lazy(() => import('./HomeTrending'))
|
||||
const HomeMedalHighlights = lazy(() => import('./HomeMedalHighlights'))
|
||||
const HomeRising = lazy(() => import('./HomeRising'))
|
||||
const HomeFresh = lazy(() => import('./HomeFresh'))
|
||||
const HomeCollections = lazy(() => import('./HomeCollections'))
|
||||
@@ -18,30 +19,122 @@ const HomeCreators = lazy(() => import('./HomeCreators'))
|
||||
const HomeNews = lazy(() => import('./HomeNews'))
|
||||
const HomeCTA = lazy(() => import('./HomeCTA'))
|
||||
|
||||
function SectionFallback() {
|
||||
function cx(...parts) {
|
||||
return parts.filter(Boolean).join(' ')
|
||||
}
|
||||
|
||||
function SectionFallback({ variant = 'gallery' }) {
|
||||
if (variant === 'welcome') {
|
||||
return (
|
||||
<div className="mt-10 px-4 sm:px-6 lg:px-8" aria-hidden="true">
|
||||
<div className="h-20 animate-pulse rounded-[28px] border border-white/10 bg-nova-800/70" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (variant === 'tags') {
|
||||
return (
|
||||
<section className="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
|
||||
<div className="mb-5 h-8 w-48 animate-pulse rounded-xl bg-nova-800/70" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from({ length: 12 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-9 animate-pulse rounded-full bg-nova-800/70"
|
||||
style={{ width: `${88 + (index % 4) * 16}px` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
if (variant === 'cta') {
|
||||
return (
|
||||
<section className="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
|
||||
<div className="h-40 animate-pulse rounded-[28px] border border-white/10 bg-nova-800/70" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const cardClassName = variant === 'categories'
|
||||
? 'h-28 rounded-2xl'
|
||||
: variant === 'news'
|
||||
? 'h-24 rounded-2xl'
|
||||
: variant === 'creators'
|
||||
? 'h-64 rounded-2xl'
|
||||
: variant === 'collections'
|
||||
? 'h-80 rounded-[28px]'
|
||||
: variant === 'groups'
|
||||
? 'h-80 rounded-[28px]'
|
||||
: 'aspect-[4/3] rounded-2xl'
|
||||
const gridClassName = variant === 'creators'
|
||||
? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6'
|
||||
: variant === 'news'
|
||||
? 'grid-cols-1'
|
||||
: variant === 'categories'
|
||||
? 'grid-cols-2 lg:grid-cols-4'
|
||||
: variant === 'collections'
|
||||
? 'grid-cols-1 lg:grid-cols-2 xl:grid-cols-3'
|
||||
: variant === 'groups'
|
||||
? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4'
|
||||
: 'grid-cols-2 xl:grid-cols-4'
|
||||
const cardCount = variant === 'creators' ? 6 : variant === 'news' ? 4 : 4
|
||||
|
||||
return (
|
||||
<div className="mt-14 h-48 animate-pulse rounded-xl bg-nova-800 mx-4 sm:mx-6 lg:mx-8" />
|
||||
<section className="mt-14 px-4 sm:px-6 lg:px-8" aria-hidden="true">
|
||||
<div className="mb-5 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="h-8 w-48 animate-pulse rounded-xl bg-nova-800/70" />
|
||||
{(variant === 'collections' || variant === 'groups' || variant === 'news') && (
|
||||
<div className="mt-3 h-4 w-80 max-w-full animate-pulse rounded bg-nova-800/60" />
|
||||
)}
|
||||
</div>
|
||||
<div className="hidden h-5 w-24 animate-pulse rounded bg-nova-800/60 sm:block" />
|
||||
</div>
|
||||
<div className={cx('grid gap-4', gridClassName)}>
|
||||
{Array.from({ length: cardCount }).map((_, index) => (
|
||||
<div key={index} className={cx('animate-pulse bg-nova-800/70', cardClassName)} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function GuestHomePage(props) {
|
||||
const { rising, trending, fresh, tags, creators, news, collections_featured, collections_trending, collections_editorial, collections_community, groups } = props
|
||||
const { rising, trending, community_favorites, hall_of_fame, fresh, tags, creators, news, collections_featured, collections_trending, collections_editorial, collections_community, groups } = props
|
||||
|
||||
return (
|
||||
<>
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeRising items={rising} />
|
||||
</Suspense>
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeTrending items={trending} />
|
||||
</Suspense>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeMedalHighlights
|
||||
title="Community Favorites"
|
||||
href="/explore/top-rated"
|
||||
description="Recent medal momentum from the community. This rail highlights the strongest 30-day medal signal."
|
||||
items={community_favorites}
|
||||
/>
|
||||
</Suspense>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeMedalHighlights
|
||||
title="Hall of Fame"
|
||||
href="/explore/best"
|
||||
description="All-time medal standouts that keep being remembered long after publication."
|
||||
items={hall_of_fame}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
{/* 3. Fresh Uploads */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeFresh items={fresh} />
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="collections" />}>
|
||||
<HomeCollections
|
||||
featured={collections_featured}
|
||||
trending={collections_trending}
|
||||
@@ -50,32 +143,32 @@ function GuestHomePage(props) {
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="groups" />}>
|
||||
<HomeGroups groups={groups} />
|
||||
</Suspense>
|
||||
|
||||
{/* 4. Explore Categories */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="categories" />}>
|
||||
<HomeCategories />
|
||||
</Suspense>
|
||||
|
||||
{/* 5. Popular Tags */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="tags" />}>
|
||||
<HomeTags tags={tags} />
|
||||
</Suspense>
|
||||
|
||||
{/* 6. Top Creators */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="creators" />}>
|
||||
<HomeCreators creators={creators} />
|
||||
</Suspense>
|
||||
|
||||
{/* 7. News */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="news" />}>
|
||||
<HomeNews items={news} />
|
||||
</Suspense>
|
||||
|
||||
{/* 8. CTA Upload */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="cta" />}>
|
||||
<HomeCTA isLoggedIn={false} />
|
||||
</Suspense>
|
||||
</>
|
||||
@@ -89,6 +182,8 @@ function AuthHomePage(props) {
|
||||
from_following,
|
||||
rising,
|
||||
trending,
|
||||
community_favorites,
|
||||
hall_of_fame,
|
||||
fresh,
|
||||
collections_featured,
|
||||
collections_recent,
|
||||
@@ -107,41 +202,57 @@ function AuthHomePage(props) {
|
||||
return (
|
||||
<>
|
||||
{/* P0. Welcome/status row — below hero so featured image sits at 0px */}
|
||||
<Suspense fallback={null}>
|
||||
<Suspense fallback={<SectionFallback variant="welcome" />}>
|
||||
<HomeWelcomeRow user_data={user_data} />
|
||||
</Suspense>
|
||||
|
||||
{/* P2. From Creators You Follow */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeFromFollowing items={from_following} />
|
||||
</Suspense>
|
||||
|
||||
{/* P3. Personalized For You preview */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeTrendingForYou items={for_you} preferences={preferences} />
|
||||
</Suspense>
|
||||
|
||||
{/* Rising Now */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeRising items={rising} />
|
||||
</Suspense>
|
||||
|
||||
{/* 2. Global Trending Now */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeTrending items={trending} />
|
||||
</Suspense>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeMedalHighlights
|
||||
title="Community Favorites"
|
||||
href="/explore/top-rated"
|
||||
description="Recent medal momentum from the community. This rail highlights the strongest 30-day medal signal."
|
||||
items={community_favorites}
|
||||
/>
|
||||
</Suspense>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeMedalHighlights
|
||||
title="Hall of Fame"
|
||||
href="/explore/best"
|
||||
description="All-time medal standouts that keep being remembered long after publication."
|
||||
items={hall_of_fame}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
{/* P4. Because You Like {top tag} — uses by_categories for variety */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeBecauseYouLike items={by_categories} preferences={preferences} />
|
||||
</Suspense>
|
||||
|
||||
{/* 3. Fresh Uploads */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="gallery" />}>
|
||||
<HomeFresh items={fresh} />
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="collections" />}>
|
||||
<HomeCollections
|
||||
featured={collections_featured}
|
||||
recent={collections_recent}
|
||||
@@ -152,37 +263,37 @@ function AuthHomePage(props) {
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="groups" />}>
|
||||
<HomeGroups groups={groups} />
|
||||
</Suspense>
|
||||
|
||||
{/* 4. Explore Categories */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="categories" />}>
|
||||
<HomeCategories />
|
||||
</Suspense>
|
||||
|
||||
{/* P5. Suggested Creators */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="creators" />}>
|
||||
<HomeSuggestedCreators creators={suggested_creators} />
|
||||
</Suspense>
|
||||
|
||||
{/* 5. Popular Tags */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="tags" />}>
|
||||
<HomeTags tags={tags} />
|
||||
</Suspense>
|
||||
|
||||
{/* 6. Top Creators */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="creators" />}>
|
||||
<HomeCreators creators={creators} />
|
||||
</Suspense>
|
||||
|
||||
{/* 7. News */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="news" />}>
|
||||
<HomeNews items={news} />
|
||||
</Suspense>
|
||||
|
||||
{/* 8. CTA Upload */}
|
||||
<Suspense fallback={<SectionFallback />}>
|
||||
<Suspense fallback={<SectionFallback variant="cta" />}>
|
||||
<HomeCTA isLoggedIn />
|
||||
</Suspense>
|
||||
</>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function HomeRising({ items }) {
|
||||
</div>
|
||||
|
||||
<div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 lg:grid lg:grid-cols-5 lg:overflow-visible">
|
||||
{items.slice(0, Math.floor(items.length / 5) * 5 || items.length).map((item) => (
|
||||
{items.map((item) => (
|
||||
<ArtCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function HomeTrending({ items }) {
|
||||
</div>
|
||||
|
||||
<ArtworkGalleryGrid
|
||||
items={items.slice(0, 8)}
|
||||
items={items}
|
||||
className="xl:grid-cols-4"
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function HomeTrendingForYou({ items, preferences }) {
|
||||
Open full feed →
|
||||
</a>
|
||||
</div>
|
||||
<ArtworkGalleryGrid items={items.slice(0, 8)} compact />
|
||||
<ArtworkGalleryGrid items={items} compact />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ export default function HomeWelcomeRow({ user_data }) {
|
||||
|
||||
{notifications_unread > 0 && (
|
||||
<a
|
||||
href="/notifications"
|
||||
href="/dashboard/notifications"
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-nova-800 px-3 py-1.5 text-xs font-medium text-white ring-1 ring-white/10 hover:bg-nova-700 transition"
|
||||
>
|
||||
<svg className="h-3.5 w-3.5 text-yellow-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
@@ -59,7 +59,7 @@ export default function HomeWelcomeRow({ user_data }) {
|
||||
|
||||
<a
|
||||
href="/upload"
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-white shadow hover:brightness-110 transition"
|
||||
className="btn-accent-solid inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold"
|
||||
>
|
||||
<svg className="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
|
||||
307
resources/js/Pages/Moderation/ArtworkMaturityQueue.jsx
Normal file
307
resources/js/Pages/Moderation/ArtworkMaturityQueue.jsx
Normal file
@@ -0,0 +1,307 @@
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { Head, usePage } from '@inertiajs/react'
|
||||
import ArtworkViewer from '../../components/viewer/ArtworkViewer'
|
||||
|
||||
function requestJson(url, { method = 'GET', body } = {}) {
|
||||
return fetch(url, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
}).then(async (response) => {
|
||||
const payload = await response.json().catch(() => ({}))
|
||||
if (!response.ok) {
|
||||
throw new Error(payload?.message || 'Request failed')
|
||||
}
|
||||
return payload
|
||||
})
|
||||
}
|
||||
|
||||
function Badge({ children, tone = 'slate' }) {
|
||||
const tones = {
|
||||
slate: 'border-white/10 bg-white/[0.05] text-slate-200',
|
||||
amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
|
||||
rose: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
|
||||
emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
|
||||
sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
|
||||
}
|
||||
|
||||
return <span className={`inline-flex items-center rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${tones[tone] || tones.slate}`}>{children}</span>
|
||||
}
|
||||
|
||||
export default function ArtworkMaturityQueue() {
|
||||
const { props } = usePage()
|
||||
const [items, setItems] = useState(props.initialItems || [])
|
||||
const [stats, setStats] = useState(props.stats || {})
|
||||
const [status, setStatus] = useState(props.initialFilters?.status || 'suspected')
|
||||
const [aiAction, setAiAction] = useState(props.initialFilters?.ai_action || 'all')
|
||||
const [aiStatus, setAiStatus] = useState(props.initialFilters?.ai_status || 'all')
|
||||
const [busyId, setBusyId] = useState(null)
|
||||
const [noteById, setNoteById] = useState({})
|
||||
const [error, setError] = useState('')
|
||||
const [previewItem, setPreviewItem] = useState(null)
|
||||
|
||||
const endpoints = props.endpoints || {}
|
||||
const filterOptions = props.filterOptions || {}
|
||||
const reviewActions = props.reviewActions || []
|
||||
|
||||
function queueStatusKey(key) {
|
||||
return key === 'mature' ? 'reviewed' : key
|
||||
}
|
||||
|
||||
async function load(nextStatus, nextAiAction = aiAction, nextAiStatus = aiStatus) {
|
||||
setStatus(nextStatus)
|
||||
setAiAction(nextAiAction)
|
||||
setAiStatus(nextAiStatus)
|
||||
setError('')
|
||||
try {
|
||||
const query = new URLSearchParams({
|
||||
status: nextStatus,
|
||||
ai_action: nextAiAction,
|
||||
ai_status: nextAiStatus,
|
||||
})
|
||||
const payload = await requestJson(`${endpoints.list}?${query.toString()}`)
|
||||
setItems(payload.data || [])
|
||||
setStats(payload.meta?.stats || {})
|
||||
} catch (loadError) {
|
||||
setError(loadError.message)
|
||||
}
|
||||
}
|
||||
|
||||
async function review(itemId, action) {
|
||||
setBusyId(itemId)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
const payload = await requestJson(String(endpoints.reviewPattern || '').replace('__ARTWORK__', String(itemId)), {
|
||||
method: 'POST',
|
||||
body: {
|
||||
action,
|
||||
note: noteById[itemId] || '',
|
||||
},
|
||||
})
|
||||
|
||||
setStats(payload.stats || {})
|
||||
setItems((current) => current.filter((item) => item.id !== itemId).concat(status === 'reviewed' ? [payload.artwork] : []))
|
||||
|
||||
if (status !== 'reviewed') {
|
||||
setItems((current) => current.filter((item) => item.id !== itemId))
|
||||
}
|
||||
} catch (reviewError) {
|
||||
setError(reviewError.message)
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const statusSummary = useMemo(() => [
|
||||
{ key: 'suspected', label: 'Suspected', value: Number(stats.suspected || 0) },
|
||||
{ key: 'audit', label: 'Audit candidates', value: Number(stats.audit || 0) },
|
||||
{ key: 'reviewed', label: 'Reviewed', value: Number(stats.reviewed || 0) },
|
||||
{ key: 'mature', label: 'Marked mature', value: Number(stats.mature || 0) },
|
||||
], [stats])
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 lg:px-8">
|
||||
<Head title="Artwork Maturity Queue" />
|
||||
|
||||
<section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.16),transparent_36%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-amber-200/80">Moderator surface</p>
|
||||
<h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Artwork maturity review</h1>
|
||||
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Review uploads where the uploader declaration and AI suspicion do not match, plus legacy artworks detected by the non-mutating thumbnail audit. Audit candidates stay read-only until a moderator confirms the final maturity state.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{statusSummary.map((entry) => (
|
||||
(() => {
|
||||
const queueKey = queueStatusKey(entry.key)
|
||||
|
||||
return (
|
||||
<button
|
||||
key={entry.key}
|
||||
type="button"
|
||||
onClick={() => load(queueKey)}
|
||||
className={`rounded-2xl border px-4 py-3 text-left transition ${status === queueKey ? 'border-amber-300/30 bg-amber-400/10 text-white' : 'border-white/10 bg-white/[0.04] text-slate-300 hover:bg-white/[0.07]'}`}
|
||||
>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em]">{entry.label}</div>
|
||||
<div className="mt-1 text-2xl font-semibold tracking-tight">{entry.value.toLocaleString()}</div>
|
||||
</button>
|
||||
)
|
||||
})()
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3 md:grid-cols-2">
|
||||
<label className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">AI action hint</div>
|
||||
<select
|
||||
value={aiAction}
|
||||
onChange={(event) => load(status, event.target.value, aiStatus)}
|
||||
className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none"
|
||||
>
|
||||
{(filterOptions.aiAction || []).map((option) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">AI processing status</div>
|
||||
<select
|
||||
value={aiStatus}
|
||||
onChange={(event) => load(status, aiAction, event.target.value)}
|
||||
className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none"
|
||||
>
|
||||
{(filterOptions.aiStatus || []).map((option) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{error ? <div className="mt-6 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm text-rose-100">{error}</div> : null}
|
||||
|
||||
<div className="mt-8 space-y-4">
|
||||
{items.length === 0 ? (
|
||||
<div className="rounded-[28px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center text-slate-300">{status === 'audit' ? 'No legacy artworks are currently flagged by the thumbnail audit.' : 'No artworks are waiting in this queue.'}</div>
|
||||
) : items.map((item) => (
|
||||
(() => {
|
||||
const evidence = item.audit || item.maturity || {}
|
||||
|
||||
return (
|
||||
<article key={item.id} className="grid gap-5 rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)] lg:grid-cols-[280px_minmax(0,1fr)]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => item.preview_image ? setPreviewItem(item) : null}
|
||||
className="group overflow-hidden rounded-[22px] border border-white/10 bg-slate-950/85 text-left transition hover:border-sky-300/30"
|
||||
>
|
||||
{item.thumbnail ? (
|
||||
<div className="relative flex min-h-[360px] items-center justify-center p-3">
|
||||
<img src={item.thumbnail} alt={item.title} className="max-h-[480px] w-full object-contain" />
|
||||
<div className="pointer-events-none absolute inset-x-3 bottom-3 flex items-center justify-between rounded-full border border-white/10 bg-[#07101bdd] px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-100 opacity-0 transition group-hover:opacity-100">
|
||||
<span>Preview full image</span>
|
||||
<i className="fa-solid fa-expand text-[10px]" />
|
||||
</div>
|
||||
</div>
|
||||
) : <div className="min-h-[360px]" />}
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.audit ? <Badge tone="sky">audit candidate</Badge> : null}
|
||||
<Badge tone={item.maturity?.is_flagged ? 'rose' : 'amber'}>{item.maturity?.status || 'unknown'}</Badge>
|
||||
{item.maturity?.is_mature_effective ? <Badge tone="amber">effective mature</Badge> : <Badge tone="emerald">currently safe</Badge>}
|
||||
{item.maturity?.source ? <Badge tone="sky">source: {String(item.maturity.source).replaceAll('_', ' ')}</Badge> : null}
|
||||
{item.audit?.legacy_unset ? <Badge tone="slate">legacy unset</Badge> : null}
|
||||
{evidence.ai_action_hint ? <Badge tone={evidence.ai_action_hint === 'flag_high' ? 'rose' : evidence.ai_action_hint === 'review' ? 'amber' : 'emerald'}>AI: {String(evidence.ai_action_hint).replaceAll('_', ' ')}</Badge> : null}
|
||||
{evidence.ai_status ? <Badge tone="slate">status: {String(evidence.ai_status).replaceAll('_', ' ')}</Badge> : null}
|
||||
</div>
|
||||
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{item.title}</h2>
|
||||
<p className="mt-2 text-sm text-slate-300">{item.publisher} {item.category ? `• ${item.category}` : ''} {item.content_type ? `• ${item.content_type}` : ''}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<a href={item.url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.08]">
|
||||
<i className="fa-solid fa-arrow-up-right-from-square text-[10px]" />
|
||||
Open artwork
|
||||
</a>
|
||||
{item.admin_url ? (
|
||||
<a href={item.admin_url} className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-amber-50 transition hover:bg-amber-400/15">
|
||||
<i className="fa-solid fa-screwdriver-wrench text-[10px]" />
|
||||
Open in cPad
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{Array.isArray(evidence.ai_labels) && evidence.ai_labels.length > 0 ? evidence.ai_labels.map((label) => <Badge key={`${item.id}-${label}`} tone="rose">{label}</Badge>) : <Badge tone="slate">no AI labels</Badge>}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-3">
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">AI score</div>
|
||||
<div className="mt-2 text-xl font-semibold text-white">{evidence.ai_score != null ? Number(evidence.ai_score).toFixed(4) : 'n/a'}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">AI label</div>
|
||||
<div className="mt-2 text-sm leading-relaxed text-slate-200">{evidence.ai_label || 'n/a'}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">{item.audit ? 'Audit detected' : 'Published'}</div>
|
||||
<div className="mt-2 text-sm text-slate-200">{item.audit?.detected_at ? new Date(item.audit.detected_at).toLocaleString() : item.published_at ? new Date(item.published_at).toLocaleString() : 'Draft / unavailable'}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-3">
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Confidence</div>
|
||||
<div className="mt-2 text-sm text-slate-200">{evidence.ai_confidence != null ? Number(evidence.ai_confidence).toFixed(4) : 'n/a'}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Vision model</div>
|
||||
<div className="mt-2 text-sm text-slate-200">{evidence.ai_model || 'n/a'}</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Current DB state</div>
|
||||
<div className="mt-2 text-sm leading-relaxed text-slate-200">{String(item.maturity?.source || 'legacy').replaceAll('_', ' ')} • {String(item.maturity?.status || 'clear').replaceAll('_', ' ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{evidence.ai_advisory ? (
|
||||
<div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm leading-relaxed text-amber-50">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">AI advisory</div>
|
||||
<div className="mt-2">{evidence.ai_advisory}</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-5 rounded-[24px] border border-white/10 bg-black/20 p-4">
|
||||
<label className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Moderator note</label>
|
||||
<textarea
|
||||
value={noteById[item.id] ?? item.review?.reviewer_note ?? ''}
|
||||
onChange={(event) => setNoteById((current) => ({ ...current, [item.id]: event.target.value }))}
|
||||
rows={3}
|
||||
className="mt-3 w-full rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-sm text-white outline-none transition focus:border-amber-300/40"
|
||||
placeholder="Explain why you are confirming or changing the maturity state."
|
||||
/>
|
||||
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
{reviewActions.map((action) => (
|
||||
<button
|
||||
key={`${item.id}-${action.value}`}
|
||||
type="button"
|
||||
disabled={busyId === item.id}
|
||||
onClick={() => review(item.id, action.value)}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09] disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{busyId === item.id ? 'Saving…' : action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})()
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ArtworkViewer
|
||||
isOpen={Boolean(previewItem)}
|
||||
onClose={() => setPreviewItem(null)}
|
||||
artwork={previewItem ? { title: previewItem.title, thumb: previewItem.thumbnail } : null}
|
||||
presentXl={previewItem?.preview_image ? { url: previewItem.preview_image } : null}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -64,6 +64,7 @@ export default function ProfileShow() {
|
||||
achievements,
|
||||
leaderboardRank,
|
||||
groupContributionHistory,
|
||||
journey,
|
||||
countryName,
|
||||
isOwner,
|
||||
auth,
|
||||
@@ -197,6 +198,7 @@ export default function ProfileShow() {
|
||||
countryName={countryName}
|
||||
profileUrl={profileUrl}
|
||||
onTabChange={handleTabChange}
|
||||
journey={journey}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'stories' && (
|
||||
@@ -233,6 +235,7 @@ export default function ProfileShow() {
|
||||
recentFollowers={recentFollowers}
|
||||
leaderboardRank={leaderboardRank}
|
||||
groupContributionHistory={groupContributionHistory}
|
||||
journey={journey}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'stats' && (
|
||||
|
||||
@@ -5,7 +5,6 @@ import TextInput from '../../components/ui/TextInput'
|
||||
import Textarea from '../../components/ui/Textarea'
|
||||
import Button from '../../components/ui/Button'
|
||||
import Toggle from '../../components/ui/Toggle'
|
||||
import Select from '../../components/ui/Select'
|
||||
import NovaSelect from '../../components/ui/NovaSelect'
|
||||
import Modal from '../../components/ui/Modal'
|
||||
import { RadioGroup } from '../../components/ui/Radio'
|
||||
@@ -17,10 +16,17 @@ const SETTINGS_SECTIONS = [
|
||||
{ key: 'account', label: 'Account', icon: 'fa-solid fa-id-badge', description: 'Username and email address.' },
|
||||
{ key: 'personal', label: 'Personal', icon: 'fa-solid fa-address-card', description: 'Optional personal information.' },
|
||||
{ key: 'notifications', label: 'Notifications', icon: 'fa-solid fa-bell', description: 'Manage notification preferences.' },
|
||||
{ key: 'content', label: 'Content', icon: 'fa-solid fa-eye-low-vision', description: 'Control mature artwork visibility.' },
|
||||
{ key: 'security', label: 'Security', icon: 'fa-solid fa-shield-halved', description: 'Password and account security.' },
|
||||
{ key: 'danger', label: 'Danger Zone', icon: 'fa-solid fa-triangle-exclamation', description: 'Destructive account actions.' },
|
||||
]
|
||||
|
||||
const MATURE_VISIBILITY_OPTIONS = [
|
||||
{ value: 'hide', label: 'Hide mature artworks', hint: 'Remove mature artworks from feeds and galleries whenever possible.' },
|
||||
{ value: 'blur', label: 'Blur mature artworks', hint: 'Keep them in listings, but blur thumbnails until you open them.' },
|
||||
{ value: 'show', label: 'Show mature artworks normally', hint: 'Display mature thumbnails without blur in listings.' },
|
||||
]
|
||||
|
||||
const MONTHS = [
|
||||
{ value: '1', label: 'January' },
|
||||
{ value: '2', label: 'February' },
|
||||
@@ -131,10 +137,10 @@ function ErrorMessage({ text, className = '' }) {
|
||||
function SectionCard({ title, description, icon, children, actionSlot }) {
|
||||
return (
|
||||
<section className="rounded-2xl border border-white/[0.06] bg-gradient-to-b from-white/[0.04] to-white/[0.02] p-6 shadow-lg shadow-black/10">
|
||||
<header className="flex flex-col gap-3 border-b border-white/[0.06] pb-4 md:flex-row md:items-start md:justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<header className="flex flex-col gap-4 border-b border-white/[0.06] px-1.5 pb-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{icon ? (
|
||||
<span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/10 text-accent">
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-xl bg-accent/10 text-accent md:self-center">
|
||||
<i className={`${icon} text-sm`} />
|
||||
</span>
|
||||
) : null}
|
||||
@@ -143,9 +149,9 @@ function SectionCard({ title, description, icon, children, actionSlot }) {
|
||||
{description ? <p className="mt-1 text-sm text-slate-400">{description}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
{actionSlot ? <div>{actionSlot}</div> : null}
|
||||
{actionSlot ? <div className="shrink-0 self-start md:self-center">{actionSlot}</div> : null}
|
||||
</header>
|
||||
<div className="pt-5">{children}</div>
|
||||
<div className="px-1.5 pt-5">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -221,6 +227,10 @@ export default function ProfileEdit() {
|
||||
comment_notifications: !!user?.comment_notifications,
|
||||
newsletter: !!user?.newsletter,
|
||||
})
|
||||
const [contentForm, setContentForm] = useState({
|
||||
mature_content_visibility: user?.mature_content_visibility || 'blur',
|
||||
mature_content_warning_enabled: user?.mature_content_warning_enabled !== false,
|
||||
})
|
||||
const [securityForm, setSecurityForm] = useState({
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
@@ -234,6 +244,7 @@ export default function ProfileEdit() {
|
||||
account: {},
|
||||
personal: {},
|
||||
notifications: {},
|
||||
content: {},
|
||||
security: {},
|
||||
})
|
||||
const [captchaState, setCaptchaState] = useState({
|
||||
@@ -265,6 +276,7 @@ export default function ProfileEdit() {
|
||||
accountForm,
|
||||
personalForm,
|
||||
notificationForm,
|
||||
contentForm,
|
||||
avatarUrl: initialAvatarUrl || '',
|
||||
})
|
||||
|
||||
@@ -279,13 +291,14 @@ export default function ProfileEdit() {
|
||||
account: !equalsObject(accountForm, initialRef.current.accountForm),
|
||||
personal: !equalsObject(personalForm, initialRef.current.personalForm),
|
||||
notifications: !equalsObject(notificationForm, initialRef.current.notificationForm),
|
||||
content: !equalsObject(contentForm, initialRef.current.contentForm),
|
||||
security:
|
||||
!!securityForm.current_password ||
|
||||
!!securityForm.new_password ||
|
||||
!!securityForm.new_password_confirmation,
|
||||
danger: false,
|
||||
}
|
||||
}, [profileForm, accountForm, personalForm, notificationForm, securityForm, avatarFile, avatarPosition, removeAvatar, avatarUrl])
|
||||
}, [profileForm, accountForm, personalForm, notificationForm, contentForm, securityForm, avatarFile, avatarPosition, removeAvatar, avatarUrl])
|
||||
|
||||
const hasUnsavedChanges = useMemo(
|
||||
() => Object.entries(dirtyMap).some(([key, dirty]) => key !== 'danger' && dirty),
|
||||
@@ -777,6 +790,42 @@ export default function ProfileEdit() {
|
||||
}
|
||||
}
|
||||
|
||||
const saveContentSection = async (event) => {
|
||||
event.preventDefault()
|
||||
setSavingSection('content')
|
||||
clearSectionStatus('content')
|
||||
|
||||
try {
|
||||
const response = await fetch('/settings/content/update', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: await botHeaders({
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrfToken(),
|
||||
}, captchaState),
|
||||
body: JSON.stringify(applyCaptchaPayload({ ...contentForm, homepage_url: '' })),
|
||||
})
|
||||
|
||||
const payload = await response.json().catch(() => ({}))
|
||||
if (!response.ok) {
|
||||
if (captureCaptchaRequirement('content', payload)) {
|
||||
return
|
||||
}
|
||||
updateSectionErrors('content', payload.errors || { _general: [payload.message || 'Unable to save content settings.'] })
|
||||
return
|
||||
}
|
||||
|
||||
initialRef.current.contentForm = { ...contentForm }
|
||||
resetCaptchaState()
|
||||
setSavedMessage({ section: 'content', text: payload.message || 'Content settings saved successfully.' })
|
||||
} catch (error) {
|
||||
updateSectionErrors('content', { _general: ['Request failed. Please try again.'] })
|
||||
} finally {
|
||||
setSavingSection('')
|
||||
}
|
||||
}
|
||||
|
||||
const saveSecuritySection = async (event) => {
|
||||
event.preventDefault()
|
||||
setSavingSection('security')
|
||||
@@ -967,14 +1016,16 @@ export default function ProfileEdit() {
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||||
<Select
|
||||
<NovaSelect
|
||||
label="Avatar crop position"
|
||||
placeholder="Select crop position"
|
||||
value={avatarPosition}
|
||||
onChange={(e) => {
|
||||
setAvatarPosition(e.target.value)
|
||||
onChange={(nextValue) => {
|
||||
setAvatarPosition(nextValue)
|
||||
clearSectionStatus('profile')
|
||||
}}
|
||||
options={AVATAR_POSITION_OPTIONS}
|
||||
searchable={false}
|
||||
hint="Applies when saving a newly selected avatar"
|
||||
/>
|
||||
</div>
|
||||
@@ -1142,32 +1193,35 @@ export default function ProfileEdit() {
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-white/85">Birthday</label>
|
||||
<div className="grid max-w-lg grid-cols-3 gap-3">
|
||||
<Select
|
||||
<NovaSelect
|
||||
placeholder="Day"
|
||||
value={personalForm.day}
|
||||
onChange={(e) => {
|
||||
setPersonalForm((prev) => ({ ...prev, day: e.target.value }))
|
||||
onChange={(nextValue) => {
|
||||
setPersonalForm((prev) => ({ ...prev, day: nextValue ?? '' }))
|
||||
clearSectionStatus('personal')
|
||||
}}
|
||||
options={dayOptions}
|
||||
searchable={false}
|
||||
/>
|
||||
<Select
|
||||
<NovaSelect
|
||||
placeholder="Month"
|
||||
value={personalForm.month}
|
||||
onChange={(e) => {
|
||||
setPersonalForm((prev) => ({ ...prev, month: e.target.value }))
|
||||
onChange={(nextValue) => {
|
||||
setPersonalForm((prev) => ({ ...prev, month: nextValue ?? '' }))
|
||||
clearSectionStatus('personal')
|
||||
}}
|
||||
options={MONTHS}
|
||||
searchable={false}
|
||||
/>
|
||||
<Select
|
||||
<NovaSelect
|
||||
placeholder="Year"
|
||||
value={personalForm.year}
|
||||
onChange={(e) => {
|
||||
setPersonalForm((prev) => ({ ...prev, year: e.target.value }))
|
||||
onChange={(nextValue) => {
|
||||
setPersonalForm((prev) => ({ ...prev, year: nextValue ?? '' }))
|
||||
clearSectionStatus('personal')
|
||||
}}
|
||||
options={yearOptions}
|
||||
searchable={false}
|
||||
/>
|
||||
</div>
|
||||
{errorsBySection.personal.birthday?.[0] ? (
|
||||
@@ -1280,6 +1334,90 @@ export default function ProfileEdit() {
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{activeSection === 'content' ? (
|
||||
<form className="space-y-4" onSubmit={saveContentSection}>
|
||||
<SectionCard
|
||||
title="Content Preferences"
|
||||
icon="fa-solid fa-eye-low-vision"
|
||||
description="Decide how mature artworks should appear in listings and artwork detail pages."
|
||||
actionSlot={
|
||||
<Button type="submit" variant="accent" size="sm" loading={savingSection === 'content'}>
|
||||
Save Content Settings
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<ErrorMessage text={errorsBySection.content._general?.[0]} className="mb-4" />
|
||||
<SuccessMessage text={sectionSaved} className="mb-4" />
|
||||
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-white/85">Mature artwork visibility</label>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{MATURE_VISIBILITY_OPTIONS.map((option) => {
|
||||
const isActive = contentForm.mature_content_visibility === option.value
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setContentForm((prev) => ({ ...prev, mature_content_visibility: option.value }))
|
||||
clearSectionStatus('content')
|
||||
}}
|
||||
className={`rounded-2xl border px-4 py-3 text-left transition ${
|
||||
isActive
|
||||
? 'border-amber-300/50 bg-amber-400/10 text-white shadow-[0_0_0_1px_rgba(251,191,36,0.15)]'
|
||||
: 'border-white/[0.08] bg-white/[0.02] text-slate-300 hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isActive ? 'bg-amber-300/15 text-amber-200' : 'bg-white/[0.06] text-slate-400'}`}>
|
||||
<i className={`fa-solid ${option.value === 'hide' ? 'fa-eye-slash' : option.value === 'blur' ? 'fa-droplet-slash' : 'fa-eye'}`} />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium">{option.label}</p>
|
||||
<p className="mt-1 text-xs text-slate-400">{option.hint}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{errorsBySection.content.mature_content_visibility?.[0] ? (
|
||||
<p className="mt-2 text-xs text-red-300">{errorsBySection.content.mature_content_visibility[0]}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 rounded-xl border border-white/[0.06] bg-white/[0.02] px-4 py-3 transition-colors hover:bg-white/[0.04]">
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/[0.06] text-slate-400">
|
||||
<i className="fa-solid fa-triangle-exclamation text-xs" />
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white/90">Show warning before opening mature artwork pages</p>
|
||||
<p className="text-xs text-slate-500">Display an interstitial on artwork detail pages before revealing mature media.</p>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={!!contentForm.mature_content_warning_enabled}
|
||||
onChange={(e) => {
|
||||
setContentForm((prev) => ({ ...prev, mature_content_warning_enabled: e.target.checked }))
|
||||
clearSectionStatus('content')
|
||||
}}
|
||||
variant="accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorsBySection.content.mature_content_warning_enabled?.[0] ? (
|
||||
<p className="text-xs text-red-300">{errorsBySection.content.mature_content_warning_enabled[0]}</p>
|
||||
) : null}
|
||||
|
||||
{renderCaptchaChallenge('content')}
|
||||
</div>
|
||||
</SectionCard>
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{activeSection === 'security' ? (
|
||||
<form className="space-y-4" onSubmit={saveSecuritySection}>
|
||||
<SectionCard
|
||||
|
||||
@@ -104,7 +104,7 @@ export default function StudioArtworkAnalytics() {
|
||||
<div className="text-center">
|
||||
<i className="fa-solid fa-share-nodes text-3xl text-slate-700 mb-3" />
|
||||
<p className="text-xs text-slate-500">Coming soon</p>
|
||||
<p className="text-[10px] text-slate-600 mt-1">Platform-level share tracking coming in v2</p>
|
||||
<p className="text-[10px] text-slate-600 mt-1">Per-platform breakdown coming in a future update</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,10 +10,12 @@ 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' },
|
||||
@@ -21,6 +23,7 @@ const EDIT_SECTIONS = [
|
||||
|
||||
const TABS = [
|
||||
{ id: 'details', label: 'Details', icon: 'fa-solid fa-pen-fancy' },
|
||||
{ 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' },
|
||||
@@ -40,6 +43,51 @@ function formatBytes(bytes) {
|
||||
return (bytes / 1048576).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
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'
|
||||
@@ -206,6 +254,8 @@ 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
|
||||
: {}
|
||||
@@ -230,6 +280,9 @@ export default function StudioArtworkEdit() {
|
||||
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({})
|
||||
@@ -243,6 +296,7 @@ export default function StudioArtworkEdit() {
|
||||
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
|
||||
@@ -282,11 +336,27 @@ export default function StudioArtworkEdit() {
|
||||
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',
|
||||
subCategoryId ? subCategories.find((item) => item.id === subCategoryId)?.name : null,
|
||||
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: '',
|
||||
@@ -310,6 +380,7 @@ export default function StudioArtworkEdit() {
|
||||
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) => {
|
||||
@@ -572,6 +643,16 @@ export default function StudioArtworkEdit() {
|
||||
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) {
|
||||
@@ -640,6 +721,9 @@ export default function StudioArtworkEdit() {
|
||||
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',
|
||||
@@ -650,6 +734,7 @@ export default function StudioArtworkEdit() {
|
||||
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')
|
||||
@@ -659,6 +744,9 @@ export default function StudioArtworkEdit() {
|
||||
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 {
|
||||
@@ -670,7 +758,7 @@ export default function StudioArtworkEdit() {
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}, [title, description, visibility, publishMode, scheduledAt, userTimezone, groupSlug, primaryAuthorUserId, contributorUserIds, contributorCredits, contentTypeId, selectedLeafCategoryId, tagSlugs, titleSource, descriptionSource, tagsSource, categorySource, artwork?.id])
|
||||
}, [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 (e) => {
|
||||
const file = e.target.files?.[0]
|
||||
@@ -785,7 +873,7 @@ export default function StudioArtworkEdit() {
|
||||
<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">
|
||||
<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>
|
||||
@@ -897,6 +985,55 @@ export default function StudioArtworkEdit() {
|
||||
</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
|
||||
@@ -933,6 +1070,9 @@ export default function StudioArtworkEdit() {
|
||||
>
|
||||
<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'}`} />
|
||||
)}
|
||||
@@ -1166,12 +1306,11 @@ export default function StudioArtworkEdit() {
|
||||
<SectionTitle icon="fa-solid fa-pen-fancy">Details</SectionTitle>
|
||||
|
||||
<TextInput
|
||||
label={<FieldLabel label="Title" actionLabel="Title" onAction={() => requestAiIntent('title')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />}
|
||||
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]}
|
||||
required
|
||||
/>
|
||||
|
||||
<FormField label={<FieldLabel label="Description" actionLabel="Description" onAction={() => requestAiIntent('description')} disabled={aiAction !== ''} loading={aiAction === 'analyze' || aiAction === 'regenerate'} />} htmlFor="artwork-description">
|
||||
@@ -1363,6 +1502,78 @@ export default function StudioArtworkEdit() {
|
||||
</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">
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { router, usePage } from '@inertiajs/react'
|
||||
import StudioLayout from '../../Layouts/StudioLayout'
|
||||
import { studioSurface, trackStudioEvent } from '../../utils/studioEvents'
|
||||
import { formatReleaseCountdown, formatScheduledDate } from '../../utils/scheduleCountdown'
|
||||
|
||||
async function requestJson(url, method = 'POST') {
|
||||
const response = await fetch(url, {
|
||||
@@ -20,19 +21,13 @@ async function requestJson(url, method = 'POST') {
|
||||
return payload
|
||||
}
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return 'Not scheduled'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return 'Not scheduled'
|
||||
return date.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
|
||||
}
|
||||
|
||||
export default function StudioCalendar() {
|
||||
const { props } = usePage()
|
||||
const calendar = props.calendar || {}
|
||||
const filters = calendar.filters || {}
|
||||
const summary = calendar.summary || {}
|
||||
const [busyKey, setBusyKey] = useState(null)
|
||||
const [nowMs, setNowMs] = useState(() => Date.now())
|
||||
|
||||
const updateFilters = (patch) => {
|
||||
const next = { ...filters, ...patch }
|
||||
@@ -61,6 +56,17 @@ export default function StudioCalendar() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const hasTimedEntries = Boolean(summary.next_publish_at) || (calendar.scheduled_items || []).some((item) => Boolean(item.scheduled_at))
|
||||
if (!hasTimedEntries) return undefined
|
||||
|
||||
const timer = window.setInterval(() => {
|
||||
setNowMs(Date.now())
|
||||
}, 1000)
|
||||
|
||||
return () => window.clearInterval(timer)
|
||||
}, [calendar.scheduled_items, summary.next_publish_at])
|
||||
|
||||
return (
|
||||
<StudioLayout title={props.title} subtitle={props.description}>
|
||||
<div className="space-y-6">
|
||||
@@ -68,7 +74,7 @@ export default function StudioCalendar() {
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Scheduled</div><div className="mt-2 text-3xl font-semibold text-white">{Number(summary.scheduled_total || 0).toLocaleString()}</div></div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Unscheduled</div><div className="mt-2 text-3xl font-semibold text-white">{Number(summary.unscheduled_total || 0).toLocaleString()}</div></div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Overloaded days</div><div className="mt-2 text-3xl font-semibold text-white">{Number(summary.overloaded_days || 0).toLocaleString()}</div></div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Next publish</div><div className="mt-2 text-base font-semibold text-white">{formatDate(summary.next_publish_at)}</div></div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5"><div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Next publish</div><div className="mt-2 text-base font-semibold text-white">{formatReleaseCountdown(summary.next_publish_at, nowMs)}</div>{summary.next_publish_at && <div className="mt-1 text-sm text-slate-400">{formatScheduledDate(summary.next_publish_at)}</div>}</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_35%),linear-gradient(135deg,_rgba(15,23,42,0.86),_rgba(2,6,23,0.96))] p-5 lg:p-6">
|
||||
@@ -100,7 +106,7 @@ export default function StudioCalendar() {
|
||||
) : filters.view === 'agenda' ? (
|
||||
<>
|
||||
<h2 className="text-lg font-semibold text-white">Agenda</h2>
|
||||
<div className="mt-4 space-y-4">{(calendar.agenda || []).map((group) => <div key={group.date} className="rounded-[22px] border border-white/10 bg-black/20 p-4"><div className="flex items-center justify-between gap-3"><div className="text-base font-semibold text-white">{group.label}</div><div className="text-xs uppercase tracking-[0.18em] text-slate-500">{group.count} items</div></div><div className="mt-3 space-y-2">{group.items.map((item) => <a key={item.id} href={item.edit_url || item.manage_url} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 px-3 py-2 text-sm text-slate-200"><span>{item.title}</span><span className="text-xs text-slate-500">{formatDate(item.scheduled_at)}</span></a>)}</div></div>)}</div>
|
||||
<div className="mt-4 space-y-4">{(calendar.agenda || []).map((group) => <div key={group.date} className="rounded-[22px] border border-white/10 bg-black/20 p-4"><div className="flex items-center justify-between gap-3"><div className="text-base font-semibold text-white">{group.label}</div><div className="text-xs uppercase tracking-[0.18em] text-slate-500">{group.count} items</div></div><div className="mt-3 space-y-2">{group.items.map((item) => <a key={item.id} href={item.edit_url || item.manage_url} className="flex items-center justify-between gap-3 rounded-2xl border border-white/10 px-3 py-2 text-sm text-slate-200"><span>{item.title}</span><span className="text-xs text-slate-500">{formatScheduledDate(item.scheduled_at)}</span></a>)}</div></div>)}</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
@@ -124,7 +130,7 @@ export default function StudioCalendar() {
|
||||
|
||||
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-5">
|
||||
<div className="flex items-center justify-between"><h2 className="text-lg font-semibold text-white">Upcoming actions</h2><a href="/studio/scheduled" className="text-sm font-medium text-sky-100">Open list</a></div>
|
||||
<div className="mt-4 space-y-3">{(calendar.scheduled_items || []).slice(0, 5).map((item) => <div key={item.id} className="rounded-2xl border border-white/10 bg-black/20 p-4"><div className="text-sm font-semibold text-white">{item.title}</div><div className="mt-1 text-xs text-slate-500">{formatDate(item.scheduled_at)}</div><div className="mt-3 flex flex-wrap gap-2"><button type="button" disabled={busyKey === `publish:${item.id}`} onClick={() => runAction(props.endpoints.publishNowPattern, item, 'publish')} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-xs text-sky-100 disabled:opacity-50">Publish now</button><button type="button" disabled={busyKey === `unschedule:${item.id}`} onClick={() => runAction(props.endpoints.unschedulePattern, item, 'unschedule')} className="rounded-full border border-white/10 px-3 py-1.5 text-xs text-slate-200 disabled:opacity-50">Unschedule</button></div></div>)}</div>
|
||||
<div className="mt-4 space-y-3">{(calendar.scheduled_items || []).slice(0, 5).map((item) => <div key={item.id} className="rounded-2xl border border-white/10 bg-black/20 p-4"><div className="text-sm font-semibold text-white">{item.title}</div><div className="mt-1 text-xs font-medium text-sky-200">{formatReleaseCountdown(item.scheduled_at, nowMs)}</div><div className="mt-1 text-xs text-slate-500">{formatScheduledDate(item.scheduled_at)}</div><div className="mt-3 flex flex-wrap gap-2"><button type="button" disabled={busyKey === `publish:${item.id}`} onClick={() => runAction(props.endpoints.publishNowPattern, item, 'publish')} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-xs text-sky-100 disabled:opacity-50">Publish now</button><button type="button" disabled={busyKey === `unschedule:${item.id}`} onClick={() => runAction(props.endpoints.unschedulePattern, item, 'unschedule')} className="rounded-full border border-white/10 px-3 py-1.5 text-xs text-slate-200 disabled:opacity-50">Unschedule</button></div></div>)}</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { router, usePage } from '@inertiajs/react'
|
||||
import StudioLayout from '../../Layouts/StudioLayout'
|
||||
import { studioSurface, trackStudioEvent } from '../../utils/studioEvents'
|
||||
import { formatReleaseCountdown, formatScheduledDate } from '../../utils/scheduleCountdown'
|
||||
|
||||
async function requestJson(url, method = 'POST') {
|
||||
const response = await fetch(url, {
|
||||
@@ -24,13 +25,6 @@ async function requestJson(url, method = 'POST') {
|
||||
return payload
|
||||
}
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return 'Not scheduled'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return 'Not scheduled'
|
||||
return date.toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })
|
||||
}
|
||||
|
||||
export default function StudioScheduled() {
|
||||
const { props } = usePage()
|
||||
const listing = props.listing || {}
|
||||
@@ -42,6 +36,7 @@ export default function StudioScheduled() {
|
||||
const rangeOptions = listing.range_options || []
|
||||
const endpoints = props.endpoints || {}
|
||||
const [busyId, setBusyId] = useState(null)
|
||||
const [nowMs, setNowMs] = useState(() => Date.now())
|
||||
|
||||
const updateFilters = (patch) => {
|
||||
const next = { ...filters, ...patch }
|
||||
@@ -84,6 +79,17 @@ export default function StudioScheduled() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const hasTimedEntries = Boolean(summary.next_publish_at) || items.some((item) => Boolean(item.scheduled_at || item.published_at))
|
||||
if (!hasTimedEntries) return undefined
|
||||
|
||||
const timer = window.setInterval(() => {
|
||||
setNowMs(Date.now())
|
||||
}, 1000)
|
||||
|
||||
return () => window.clearInterval(timer)
|
||||
}, [items, summary.next_publish_at])
|
||||
|
||||
return (
|
||||
<StudioLayout title={props.title} subtitle={props.description}>
|
||||
<div className="space-y-6">
|
||||
@@ -96,7 +102,8 @@ export default function StudioScheduled() {
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4 md:col-span-2">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Next publish slot</div>
|
||||
<div className="mt-2 text-xl font-semibold text-white">{formatDate(summary.next_publish_at)}</div>
|
||||
<div className="mt-2 text-xl font-semibold text-white">{formatReleaseCountdown(summary.next_publish_at, nowMs)}</div>
|
||||
{summary.next_publish_at && <div className="mt-1 text-sm text-slate-400">{formatScheduledDate(summary.next_publish_at)}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -172,9 +179,10 @@ export default function StudioScheduled() {
|
||||
</div>
|
||||
<h2 className="mt-2 text-xl font-semibold text-white">{item.title}</h2>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-4 text-sm text-slate-400">
|
||||
<span>Scheduled for {formatDate(item.scheduled_at || item.published_at)}</span>
|
||||
<span>{formatReleaseCountdown(item.scheduled_at || item.published_at, nowMs)}</span>
|
||||
<span>{formatScheduledDate(item.scheduled_at || item.published_at)}</span>
|
||||
{item.visibility && <span>Visibility: {item.visibility}</span>}
|
||||
{item.updated_at && <span>Last edited {formatDate(item.updated_at)}</span>}
|
||||
{item.updated_at && <span>Last edited {formatScheduledDate(item.updated_at)}</span>}
|
||||
{item.schedule_timezone && <span>{item.schedule_timezone}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -889,7 +889,7 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize, chunkReque
|
||||
{availableTypes.map((ct) => {
|
||||
const active = String(ct.id) === String(state.metadata.type)
|
||||
const iconKey = getTypeKey(ct)
|
||||
const iconPath = `/gfx/mascot_${iconKey}.webp`
|
||||
const iconPath = ct?.mascot_url || `/gfx/mascot_${iconKey}.webp`
|
||||
return (
|
||||
<button
|
||||
key={ct.id}
|
||||
@@ -1030,7 +1030,6 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize, chunkReque
|
||||
dispatch({ type: 'SET_METADATA', payload: { tags: nextTags.join(', ') } })
|
||||
}}
|
||||
suggestedTags={suggestedTags}
|
||||
maxTags={15}
|
||||
minLength={2}
|
||||
maxLength={32}
|
||||
searchEndpoint="/api/tags/search"
|
||||
|
||||
@@ -18,7 +18,7 @@ function useDebounce(value, delay) {
|
||||
|
||||
const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPod|iPad/.test(navigator.platform)
|
||||
|
||||
export default function SearchBar({ placeholder = 'Search artworks, groups, artists, tags\u2026' }) {
|
||||
export default function SearchBar({ placeholder = 'Search artworks, groups, artists, tags\u2026', initialIntent = null }) {
|
||||
const [phase, setPhase] = useState('idle') // idle | opening | open | closing
|
||||
const [query, setQuery] = useState('')
|
||||
const [artworks, setArtworks] = useState([])
|
||||
@@ -38,6 +38,7 @@ export default function SearchBar({ placeholder = 'Search artworks, groups, arti
|
||||
const closeTimerRef = useRef(null)
|
||||
const mobileOpenTimerRef = useRef(null)
|
||||
const mobileCloseTimerRef = useRef(null)
|
||||
const initialIntentHandledRef = useRef(false)
|
||||
|
||||
const debouncedQuery = useDebounce(query, DEBOUNCE_MS)
|
||||
const isExpanded = phase === 'opening' || phase === 'open'
|
||||
@@ -114,6 +115,23 @@ export default function SearchBar({ placeholder = 'Search artworks, groups, arti
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (initialIntentHandledRef.current || !initialIntent) {
|
||||
return
|
||||
}
|
||||
|
||||
initialIntentHandledRef.current = true
|
||||
|
||||
if (initialIntent === 'mobile') {
|
||||
openMobileOverlay()
|
||||
return
|
||||
}
|
||||
|
||||
if (initialIntent === 'desktop') {
|
||||
expand()
|
||||
}
|
||||
}, [initialIntent])
|
||||
|
||||
// ── outside click ────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
function onMouse(e) {
|
||||
@@ -308,6 +326,7 @@ export default function SearchBar({ placeholder = 'Search artworks, groups, arti
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="search"
|
||||
role="combobox"
|
||||
value={query}
|
||||
onChange={e => { setQuery(e.target.value); setActiveIdx(-1) }}
|
||||
onFocus={() => hasSuggestions && setOpen(true)}
|
||||
@@ -315,7 +334,8 @@ export default function SearchBar({ placeholder = 'Search artworks, groups, arti
|
||||
placeholder={placeholder}
|
||||
aria-label="Search"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open && hasSuggestions}
|
||||
aria-controls={suggestionListId}
|
||||
aria-activedescendant={activeIdx >= 0 ? `sb-item-${activeIdx}` : undefined}
|
||||
autoComplete="off"
|
||||
|
||||
@@ -53,12 +53,15 @@ export default function SearchOverlay({
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="search"
|
||||
role="combobox"
|
||||
value={query}
|
||||
onChange={(e) => onQueryChange(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
placeholder="Search artworks, groups, creators, tags..."
|
||||
aria-label="Search"
|
||||
aria-autocomplete="list"
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={hasResults}
|
||||
aria-controls="sb-mobile-suggestions"
|
||||
aria-activedescendant={activeIdx >= 0 ? `sb-mobile-item-${activeIdx}` : undefined}
|
||||
autoComplete="off"
|
||||
|
||||
@@ -3,9 +3,21 @@ import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { createInertiaApp } from '@inertiajs/react'
|
||||
const pages = {
|
||||
...import.meta.glob('./Pages/Help/**/*.jsx'),
|
||||
...import.meta.glob('./Pages/Collection/**/*.jsx'),
|
||||
...import.meta.glob('./Pages/Group/**/*.jsx'),
|
||||
...import.meta.glob([
|
||||
'./Pages/Help/**/*.jsx',
|
||||
'!./Pages/Help/**/__tests__/**',
|
||||
'!./Pages/Help/**/*.test.jsx',
|
||||
]),
|
||||
...import.meta.glob([
|
||||
'./Pages/Collection/**/*.jsx',
|
||||
'!./Pages/Collection/**/__tests__/**',
|
||||
'!./Pages/Collection/**/*.test.jsx',
|
||||
]),
|
||||
...import.meta.glob([
|
||||
'./Pages/Group/**/*.jsx',
|
||||
'!./Pages/Group/**/__tests__/**',
|
||||
'!./Pages/Group/**/*.test.jsx',
|
||||
]),
|
||||
}
|
||||
|
||||
function resolvePage(name) {
|
||||
|
||||
@@ -3,6 +3,8 @@ import axios from 'axios'
|
||||
import ShareArtworkModal from './ShareArtworkModal'
|
||||
import LinkPreviewCard from './LinkPreviewCard'
|
||||
import TagPeopleModal from './TagPeopleModal'
|
||||
import extractNativeEmoji from '../common/extractNativeEmoji'
|
||||
import isEventWithinNode from '../common/isEventWithinNode'
|
||||
|
||||
// Lazy-load the heavy emoji picker only when first opened
|
||||
const EmojiPicker = lazy(() => import('../common/EmojiMartPicker'))
|
||||
@@ -62,7 +64,7 @@ export default function PostComposer({ user, onPosted }) {
|
||||
useEffect(() => {
|
||||
if (!emojiOpen) return
|
||||
const handler = (e) => {
|
||||
if (emojiWrapRef.current && !emojiWrapRef.current.contains(e.target)) {
|
||||
if (!isEventWithinNode(e, emojiWrapRef.current)) {
|
||||
setEmojiOpen(false)
|
||||
}
|
||||
}
|
||||
@@ -72,7 +74,7 @@ export default function PostComposer({ user, onPosted }) {
|
||||
|
||||
// Insert emoji at current cursor position
|
||||
const insertEmoji = useCallback((emoji) => {
|
||||
const native = emoji.native ?? emoji.shortcodes ?? ''
|
||||
const native = extractNativeEmoji(emoji) || emoji?.shortcodes || ''
|
||||
const ta = textareaRef.current
|
||||
if (!ta) {
|
||||
setBody((b) => b + native)
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function Topbar({ user = null }) {
|
||||
>
|
||||
<img
|
||||
src={user.avatarUrl || DEFAULT_AVATAR}
|
||||
alt={user.displayName}
|
||||
alt=""
|
||||
className="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
|
||||
onError={(e) => { e.currentTarget.src = DEFAULT_AVATAR }}
|
||||
/>
|
||||
@@ -47,7 +47,7 @@ export default function Topbar({ user = null }) {
|
||||
<a href={`/@${user.username}`} className="flex items-center gap-2 px-4 py-2 text-sm hover:bg-white/5">
|
||||
<img
|
||||
src={user.avatarUrl || DEFAULT_AVATAR}
|
||||
alt={user.displayName}
|
||||
alt=""
|
||||
className="w-6 h-6 rounded-full object-cover"
|
||||
onError={(e) => { e.currentTarget.src = DEFAULT_AVATAR }}
|
||||
/>
|
||||
|
||||
@@ -34,14 +34,6 @@ function BookmarkIcon({ filled }) {
|
||||
)
|
||||
}
|
||||
|
||||
function CloudDownIcon() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-5 w-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9.75v6.75m0 0-3-3m3 3 3-3m-8.25 6a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DownloadArrowIcon() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-4 w-4">
|
||||
@@ -216,17 +208,13 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
|
||||
? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
|
||||
: null
|
||||
|
||||
// Track view
|
||||
// Count a view on every page load.
|
||||
useEffect(() => {
|
||||
if (!artwork?.id) return
|
||||
const key = `sb_viewed_${artwork.id}`
|
||||
if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem(key)) return
|
||||
fetch(`/api/art/${artwork.id}/view`, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
}).then(res => {
|
||||
if (res.ok && typeof sessionStorage !== 'undefined') sessionStorage.setItem(key, '1')
|
||||
}).catch(() => {})
|
||||
}, [artwork?.id]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
@@ -310,7 +298,6 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
|
||||
|
||||
const favCount = formatCount(stats?.favorites ?? artwork?.stats?.favorites ?? 0)
|
||||
const savedCount = formatCount(bookmarkCount)
|
||||
const viewCount = formatCount(stats?.views ?? artwork?.stats?.views ?? 0)
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -347,12 +334,6 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
|
||||
<span className="tabular-nums">{savedCount}</span>
|
||||
</button>
|
||||
|
||||
{/* Views stat pill */}
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.04] px-5 py-2.5 text-sm font-medium text-white/70">
|
||||
<CloudDownIcon />
|
||||
<span className="tabular-nums">{viewCount}</span>
|
||||
</div>
|
||||
|
||||
{/* Share pill */}
|
||||
<ArtworkShareButton artwork={artwork} shareUrl={shareUrl} size="default" isLoggedIn={isLoggedIn} />
|
||||
|
||||
|
||||
@@ -10,21 +10,13 @@ export default function ArtworkActions({ artwork, canonicalUrl, mobilePriority =
|
||||
? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
|
||||
: null
|
||||
|
||||
// Track the view once per browser session (sessionStorage prevents re-firing).
|
||||
// Count a view on every page load.
|
||||
useEffect(() => {
|
||||
if (!artwork?.id) return
|
||||
const key = `sb_viewed_${artwork.id}`
|
||||
if (typeof sessionStorage !== 'undefined' && sessionStorage.getItem(key)) return
|
||||
fetch(`/api/art/${artwork.id}/view`, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
}).then(res => {
|
||||
// Only mark as seen after a confirmed success — if the POST fails the
|
||||
// next page load will retry rather than silently skipping forever.
|
||||
if (res.ok && typeof sessionStorage !== 'undefined') {
|
||||
sessionStorage.setItem(key, '1')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}, [artwork?.id]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
|
||||
@@ -1,13 +1,120 @@
|
||||
import React, { useState, useCallback } from 'react'
|
||||
import Modal from '../ui/Modal'
|
||||
import Button from '../ui/Button'
|
||||
|
||||
const MEDALS = [
|
||||
{ key: 'gold', label: 'Gold', emoji: '🥇', weight: 3 },
|
||||
{ key: 'silver', label: 'Silver', emoji: '🥈', weight: 2 },
|
||||
{ key: 'gold', label: 'Gold', emoji: '🥇', weight: 5 },
|
||||
{ key: 'silver', label: 'Silver', emoji: '🥈', weight: 3 },
|
||||
{ key: 'bronze', label: 'Bronze', emoji: '🥉', weight: 1 },
|
||||
]
|
||||
|
||||
function getMedalMeta(medalKey) {
|
||||
return MEDALS.find((medal) => medal.key === medalKey) ?? null
|
||||
}
|
||||
|
||||
function getMedalWeight(medalKey) {
|
||||
return getMedalMeta(medalKey)?.weight ?? 0
|
||||
}
|
||||
|
||||
function buildConfirmationContent(pendingConfirmation) {
|
||||
if (!pendingConfirmation) {
|
||||
return null
|
||||
}
|
||||
|
||||
const nextMedal = getMedalMeta(pendingConfirmation.medal)
|
||||
const previousMedal = getMedalMeta(pendingConfirmation.previousMedal)
|
||||
|
||||
if (pendingConfirmation.action === 'remove') {
|
||||
return {
|
||||
title: `Remove ${nextMedal?.label ?? 'medal'} medal?`,
|
||||
summary: `This will remove your ${nextMedal?.label ?? ''} medal from this artwork.`,
|
||||
details: 'Your contribution to the medal score will be removed immediately after confirmation.',
|
||||
confirmLabel: 'Remove medal',
|
||||
confirmVariant: 'danger',
|
||||
modalVariant: 'danger',
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: `Change medal to ${nextMedal?.label ?? 'selected medal'}?`,
|
||||
summary: `You already awarded ${previousMedal?.label ?? 'a medal'} to this artwork.`,
|
||||
details: `Confirm to switch your medal from ${previousMedal?.label ?? 'the current medal'} to ${nextMedal?.label ?? 'the selected medal'}.`,
|
||||
confirmLabel: `Change to ${nextMedal?.label ?? 'selected medal'}`,
|
||||
confirmVariant: 'accent',
|
||||
modalVariant: 'default',
|
||||
}
|
||||
}
|
||||
|
||||
function describeMedalError(message) {
|
||||
const normalized = String(message || '').trim()
|
||||
const lower = normalized.toLowerCase()
|
||||
|
||||
if (lower.includes('verify your email')) {
|
||||
return {
|
||||
title: 'Email verification required',
|
||||
summary: 'Medals are limited to verified accounts to reduce abuse and low-quality vote spam.',
|
||||
details: 'Open your account email, use the verification link, then reload this page and try again.',
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('at least') && lower.includes('hours old')) {
|
||||
return {
|
||||
title: 'Account is too new',
|
||||
summary: normalized,
|
||||
details: 'This cooldown is there to stop throwaway accounts from mass-awarding artworks immediately after signup.',
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('your own artwork')) {
|
||||
return {
|
||||
title: 'Own artwork cannot be medaled',
|
||||
summary: 'Creators cannot add medals to their own work.',
|
||||
details: 'Only other community members can award medals so the score stays community-driven.',
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('not published yet')) {
|
||||
return {
|
||||
title: 'Artwork is not published yet',
|
||||
summary: 'This artwork has not reached a public, medal-eligible state yet.',
|
||||
details: 'Medals are only available after the artwork is published and visible publicly.',
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('not eligible for medals')) {
|
||||
return {
|
||||
title: 'Artwork is not eligible for medals',
|
||||
summary: 'This artwork is currently blocked from medal voting.',
|
||||
details: 'That usually means it is private, unapproved, or otherwise not available for public medal activity.',
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('no longer available')) {
|
||||
return {
|
||||
title: 'Artwork is unavailable',
|
||||
summary: 'This artwork can no longer receive medals.',
|
||||
details: 'The artwork may have been removed or is no longer publicly available.',
|
||||
}
|
||||
}
|
||||
|
||||
if (lower.includes('disabled')) {
|
||||
return {
|
||||
title: 'Medals are temporarily unavailable',
|
||||
summary: normalized,
|
||||
details: 'This is a site-wide setting, not a problem with your account.',
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: 'Unable to add medal',
|
||||
summary: normalized || 'The medal request could not be completed.',
|
||||
details: 'Check that you are signed in with an eligible account and that the artwork is publicly medal-eligible.',
|
||||
}
|
||||
}
|
||||
|
||||
export default function ArtworkAwards({ artwork, initialAwards = null, isAuthenticated = false }) {
|
||||
const artworkId = artwork?.id
|
||||
const isOwnArtwork = Boolean(artwork?.viewer?.id && artwork?.user?.id && artwork.viewer.id === artwork.user.id)
|
||||
|
||||
const [awards, setAwards] = useState({
|
||||
gold: initialAwards?.gold ?? 0,
|
||||
@@ -15,16 +122,20 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
|
||||
bronze: initialAwards?.bronze ?? 0,
|
||||
score: initialAwards?.score ?? 0,
|
||||
})
|
||||
const [viewerAward, setViewerAward] = useState(initialAwards?.viewer_award ?? null)
|
||||
const [viewerAward, setViewerAward] = useState(initialAwards?.current_user_medal ?? initialAwards?.viewer_award ?? null)
|
||||
const [loading, setLoading] = useState(null) // which medal is pending
|
||||
const [error, setError] = useState(null)
|
||||
const [pendingConfirmation, setPendingConfirmation] = useState(null)
|
||||
|
||||
const errorDetails = error ? describeMedalError(error) : null
|
||||
const confirmationContent = buildConfirmationContent(pendingConfirmation)
|
||||
|
||||
const csrfToken = typeof document !== 'undefined'
|
||||
? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
|
||||
: null
|
||||
|
||||
const apiFetch = useCallback(async (method, body = null) => {
|
||||
const res = await fetch(`/api/artworks/${artworkId}/award`, {
|
||||
const res = await fetch(`/api/artworks/${artworkId}/medal`, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -44,19 +155,21 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
|
||||
}, [artworkId, csrfToken])
|
||||
|
||||
const applyServerResponse = useCallback((data) => {
|
||||
if (data?.awards) {
|
||||
const payload = data?.medals || data?.awards || null
|
||||
|
||||
if (payload) {
|
||||
setAwards({
|
||||
gold: data.awards.gold ?? 0,
|
||||
silver: data.awards.silver ?? 0,
|
||||
bronze: data.awards.bronze ?? 0,
|
||||
score: data.awards.score ?? 0,
|
||||
gold: payload.gold ?? 0,
|
||||
silver: payload.silver ?? 0,
|
||||
bronze: payload.bronze ?? 0,
|
||||
score: payload.score ?? 0,
|
||||
})
|
||||
}
|
||||
setViewerAward(data?.viewer_award ?? null)
|
||||
setViewerAward(data?.current_user_medal ?? data?.viewer_award ?? null)
|
||||
}, [])
|
||||
|
||||
const handleMedalClick = useCallback(async (medal) => {
|
||||
if (!isAuthenticated) return
|
||||
const handleMedalAction = useCallback(async ({ action, medal, previousMedal = null }) => {
|
||||
if (!isAuthenticated || isOwnArtwork) return
|
||||
if (loading) return
|
||||
|
||||
setError(null)
|
||||
@@ -65,17 +178,12 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
|
||||
const prevAwards = { ...awards }
|
||||
const prevViewer = viewerAward
|
||||
|
||||
const delta = (m) => {
|
||||
const weight = MEDALS.find(x => x.key === m)?.weight ?? 0
|
||||
return weight
|
||||
}
|
||||
|
||||
if (viewerAward === medal) {
|
||||
if (action === 'remove') {
|
||||
// Undo: remove award
|
||||
setAwards(a => ({
|
||||
...a,
|
||||
[medal]: Math.max(0, a[medal] - 1),
|
||||
score: Math.max(0, a.score - delta(medal)),
|
||||
score: Math.max(0, a.score - getMedalWeight(medal)),
|
||||
}))
|
||||
setViewerAward(null)
|
||||
|
||||
@@ -90,102 +198,174 @@ export default function ArtworkAwards({ artwork, initialAwards = null, isAuthent
|
||||
} finally {
|
||||
setLoading(null)
|
||||
}
|
||||
} else if (viewerAward) {
|
||||
// Change: swap medals
|
||||
const prev = viewerAward
|
||||
setAwards(a => ({
|
||||
...a,
|
||||
[prev]: Math.max(0, a[prev] - 1),
|
||||
[medal]: a[medal] + 1,
|
||||
score: a.score - delta(prev) + delta(medal),
|
||||
}))
|
||||
setViewerAward(medal)
|
||||
|
||||
setLoading(medal)
|
||||
try {
|
||||
const data = await apiFetch('PUT', { medal })
|
||||
applyServerResponse(data)
|
||||
} catch (e) {
|
||||
setAwards(prevAwards)
|
||||
setViewerAward(prevViewer)
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setLoading(null)
|
||||
}
|
||||
} else {
|
||||
// New award
|
||||
setAwards(a => ({
|
||||
...a,
|
||||
[medal]: a[medal] + 1,
|
||||
score: a.score + delta(medal),
|
||||
}))
|
||||
setViewerAward(medal)
|
||||
|
||||
setLoading(medal)
|
||||
try {
|
||||
const data = await apiFetch('POST', { medal })
|
||||
applyServerResponse(data)
|
||||
} catch (e) {
|
||||
setAwards(prevAwards)
|
||||
setViewerAward(prevViewer)
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setLoading(null)
|
||||
}
|
||||
return
|
||||
}
|
||||
}, [isAuthenticated, loading, awards, viewerAward, apiFetch, applyServerResponse])
|
||||
|
||||
if (action === 'change' && previousMedal) {
|
||||
// Change: swap medals
|
||||
setAwards(a => ({
|
||||
...a,
|
||||
[previousMedal]: Math.max(0, a[previousMedal] - 1),
|
||||
[medal]: a[medal] + 1,
|
||||
score: a.score - getMedalWeight(previousMedal) + getMedalWeight(medal),
|
||||
}))
|
||||
setViewerAward(medal)
|
||||
|
||||
setLoading(medal)
|
||||
try {
|
||||
const data = await apiFetch('POST', { medal_type: medal })
|
||||
applyServerResponse(data)
|
||||
} catch (e) {
|
||||
setAwards(prevAwards)
|
||||
setViewerAward(prevViewer)
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setLoading(null)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// New award
|
||||
setAwards(a => ({
|
||||
...a,
|
||||
[medal]: a[medal] + 1,
|
||||
score: a.score + getMedalWeight(medal),
|
||||
}))
|
||||
setViewerAward(medal)
|
||||
|
||||
setLoading(medal)
|
||||
try {
|
||||
const data = await apiFetch('POST', { medal_type: medal })
|
||||
applyServerResponse(data)
|
||||
} catch (e) {
|
||||
setAwards(prevAwards)
|
||||
setViewerAward(prevViewer)
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setLoading(null)
|
||||
}
|
||||
}, [isAuthenticated, isOwnArtwork, loading, awards, viewerAward, apiFetch, applyServerResponse])
|
||||
|
||||
const handleMedalClick = useCallback((medal) => {
|
||||
if (!isAuthenticated || isOwnArtwork) return
|
||||
if (loading) return
|
||||
|
||||
setError(null)
|
||||
|
||||
if (viewerAward === medal) {
|
||||
setPendingConfirmation({ action: 'remove', medal, previousMedal: medal })
|
||||
return
|
||||
}
|
||||
|
||||
if (viewerAward) {
|
||||
setPendingConfirmation({ action: 'change', medal, previousMedal: viewerAward })
|
||||
return
|
||||
}
|
||||
|
||||
void handleMedalAction({ action: 'add', medal })
|
||||
}, [isAuthenticated, isOwnArtwork, loading, viewerAward, handleMedalAction])
|
||||
|
||||
const closeConfirmation = useCallback(() => {
|
||||
if (loading) return
|
||||
setPendingConfirmation(null)
|
||||
}, [loading])
|
||||
|
||||
const confirmPendingAction = useCallback(async () => {
|
||||
if (!pendingConfirmation || loading) return
|
||||
|
||||
const action = pendingConfirmation
|
||||
setPendingConfirmation(null)
|
||||
await handleMedalAction(action)
|
||||
}, [pendingConfirmation, loading, handleMedalAction])
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Awards</h2>
|
||||
<>
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-white/30">Medals</h2>
|
||||
|
||||
{error && (
|
||||
<p className="mt-2 text-xs text-red-400">{error}</p>
|
||||
)}
|
||||
{errorDetails && (
|
||||
<div className="mt-3 rounded-xl border border-red-400/20 bg-red-500/10 px-4 py-3 text-left">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-red-300/90">{errorDetails.title}</div>
|
||||
<p className="mt-2 text-sm leading-6 text-red-200">{errorDetails.summary}</p>
|
||||
<p className="mt-2 text-xs leading-5 text-red-100/75">{errorDetails.details}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex flex-col gap-3 sm:flex-row">
|
||||
{MEDALS.map(({ key, label, emoji }) => {
|
||||
const isActive = viewerAward === key
|
||||
const isPending = loading === key
|
||||
<div className="mt-4 flex flex-col gap-3 sm:flex-row">
|
||||
{MEDALS.map(({ key, label, emoji }) => {
|
||||
const isActive = viewerAward === key
|
||||
const isPending = loading === key
|
||||
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
disabled={!isAuthenticated || loading !== null}
|
||||
onClick={() => handleMedalClick(key)}
|
||||
title={!isAuthenticated ? 'Sign in to award' : isActive ? `Remove ${label} award` : `Award ${label}`}
|
||||
className={[
|
||||
'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
|
||||
isActive
|
||||
? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
|
||||
: 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
|
||||
(!isAuthenticated || loading !== null) && 'cursor-not-allowed opacity-60',
|
||||
].filter(Boolean).join(' ')}
|
||||
>
|
||||
<span className="text-xl leading-none" aria-hidden="true">
|
||||
{isPending ? '…' : emoji}
|
||||
</span>
|
||||
<span className="text-xs font-medium leading-none">{label}</span>
|
||||
<span className="text-xs text-soft tabular-nums">
|
||||
{awards[key]}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
disabled={!isAuthenticated || isOwnArtwork || loading !== null}
|
||||
onClick={() => handleMedalClick(key)}
|
||||
title={!isAuthenticated ? 'Sign in to medal' : isOwnArtwork ? 'You cannot medal your own artwork' : isActive ? `Remove ${label} medal` : viewerAward ? `Change medal to ${label}` : `Give ${label} medal`}
|
||||
className={[
|
||||
'inline-flex min-h-11 flex-1 flex-col items-center justify-center gap-1 rounded-lg border px-3 py-2 text-sm transition-all',
|
||||
isActive
|
||||
? 'border-accent/40 bg-accent/10 font-semibold text-accent shadow-lg shadow-accent/10'
|
||||
: 'border-white/[0.08] bg-white/[0.03] text-white/70 hover:bg-white/[0.06] hover:border-white/[0.12]',
|
||||
(!isAuthenticated || isOwnArtwork || loading !== null) && 'cursor-not-allowed opacity-60',
|
||||
].filter(Boolean).join(' ')}
|
||||
>
|
||||
<span className="text-xl leading-none" aria-hidden="true">
|
||||
{isPending ? '…' : emoji}
|
||||
</span>
|
||||
<span className="text-xs font-medium leading-none">{label}</span>
|
||||
<span className="text-xs text-soft tabular-nums">
|
||||
{awards[key]}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{awards.score > 0 && (
|
||||
<p className="mt-3 text-right text-xs text-soft">
|
||||
Score: <span className="font-semibold text-white">{awards.score}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isAuthenticated && (
|
||||
<p className="mt-3 text-center text-xs text-soft">
|
||||
<a href="/login" className="text-accent hover:underline">Sign in</a> to medal this artwork
|
||||
</p>
|
||||
)}
|
||||
|
||||
{isAuthenticated && isOwnArtwork && (
|
||||
<p className="mt-3 text-center text-xs text-soft">
|
||||
You cannot medal your own artwork.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{awards.score > 0 && (
|
||||
<p className="mt-3 text-right text-xs text-soft">
|
||||
Score: <span className="font-semibold text-white">{awards.score}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isAuthenticated && (
|
||||
<p className="mt-3 text-center text-xs text-soft">
|
||||
<a href="/login" className="text-accent hover:underline">Sign in</a> to award this artwork
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Modal
|
||||
open={Boolean(confirmationContent)}
|
||||
onClose={closeConfirmation}
|
||||
title={confirmationContent?.title}
|
||||
size="sm"
|
||||
variant={confirmationContent?.modalVariant}
|
||||
footer={confirmationContent ? (
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={closeConfirmation} disabled={loading !== null}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant={confirmationContent.confirmVariant} size="sm" onClick={confirmPendingAction} loading={loading !== null}>
|
||||
{confirmationContent.confirmLabel}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
>
|
||||
{confirmationContent ? (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm leading-6 text-slate-200">{confirmationContent.summary}</p>
|
||||
<p className="text-xs leading-5 text-slate-400">{confirmationContent.details}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
125
resources/js/components/artwork/ArtworkAwards.test.jsx
Normal file
125
resources/js/components/artwork/ArtworkAwards.test.jsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import React from 'react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { cleanup, render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import ArtworkAwards from './ArtworkAwards'
|
||||
|
||||
describe('ArtworkAwards medal confirmations', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal('fetch', vi.fn())
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
cleanup()
|
||||
vi.unstubAllGlobals()
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('asks for confirmation before removing the active medal', async () => {
|
||||
const user = userEvent.setup()
|
||||
const fetchMock = vi.mocked(fetch)
|
||||
|
||||
fetchMock.mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
medals: { gold: 0, silver: 0, bronze: 0, score: 0 },
|
||||
current_user_medal: null,
|
||||
}),
|
||||
})
|
||||
|
||||
render(
|
||||
<ArtworkAwards
|
||||
artwork={{ id: 69461, viewer: { id: 2 }, user: { id: 7 } }}
|
||||
isAuthenticated
|
||||
initialAwards={{ gold: 1, silver: 0, bronze: 0, score: 5, current_user_medal: 'gold' }}
|
||||
/>,
|
||||
)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /gold/i }))
|
||||
|
||||
expect(screen.getByRole('dialog', { name: /remove gold medal\?/i })).not.toBeNull()
|
||||
expect(fetchMock).not.toHaveBeenCalled()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /remove medal/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
expect(fetchMock).toHaveBeenCalledWith(
|
||||
'/api/artworks/69461/medal',
|
||||
expect.objectContaining({
|
||||
method: 'DELETE',
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it('asks for confirmation before changing an existing medal', async () => {
|
||||
const user = userEvent.setup()
|
||||
const fetchMock = vi.mocked(fetch)
|
||||
|
||||
fetchMock.mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
medals: { gold: 0, silver: 1, bronze: 0, score: 3 },
|
||||
current_user_medal: 'silver',
|
||||
}),
|
||||
})
|
||||
|
||||
render(
|
||||
<ArtworkAwards
|
||||
artwork={{ id: 69461, viewer: { id: 2 }, user: { id: 7 } }}
|
||||
isAuthenticated
|
||||
initialAwards={{ gold: 1, silver: 0, bronze: 0, score: 5, current_user_medal: 'gold' }}
|
||||
/>,
|
||||
)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /silver/i }))
|
||||
|
||||
expect(screen.getByRole('dialog', { name: /change medal to silver\?/i })).not.toBeNull()
|
||||
expect(fetchMock).not.toHaveBeenCalled()
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /change to silver/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
expect(fetchMock).toHaveBeenCalledWith(
|
||||
'/api/artworks/69461/medal',
|
||||
expect.objectContaining({
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ medal_type: 'silver' }),
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it('still awards a new medal immediately when the viewer has not voted yet', async () => {
|
||||
const user = userEvent.setup()
|
||||
const fetchMock = vi.mocked(fetch)
|
||||
|
||||
fetchMock.mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
medals: { gold: 0, silver: 1, bronze: 0, score: 3 },
|
||||
current_user_medal: 'silver',
|
||||
}),
|
||||
})
|
||||
|
||||
render(
|
||||
<ArtworkAwards
|
||||
artwork={{ id: 69461, viewer: { id: 2 }, user: { id: 7 } }}
|
||||
isAuthenticated
|
||||
initialAwards={{ gold: 0, silver: 0, bronze: 0, score: 0, current_user_medal: null }}
|
||||
/>,
|
||||
)
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /silver/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(fetchMock).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
expect(screen.queryByRole('dialog')).toBeNull()
|
||||
})
|
||||
})
|
||||
@@ -469,6 +469,12 @@ export default function ArtworkCard({
|
||||
const authorLevel = isGroupPublisher ? 0 : Number(rawAuthor?.level ?? item.author_level ?? item.creator?.level ?? 0)
|
||||
const authorRank = isGroupPublisher ? '' : (rawAuthor?.rank || item.author_rank || item.creator?.rank || '')
|
||||
const image = item.image || item.thumb || item.thumb_url || item.thumbnail_url || IMAGE_FALLBACK
|
||||
const responsiveImageSrcSet = imageSrcSet || item.thumb_srcset || item.thumbnail_srcset || undefined
|
||||
const responsiveImageSizes = imageSizes || (variant === 'embed'
|
||||
? '80px'
|
||||
: compact
|
||||
? '(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 280px'
|
||||
: '(max-width: 640px) 50vw, (max-width: 1024px) 33vw, (max-width: 1536px) 25vw, 320px')
|
||||
const avatar = (isGroupPublisher ? publisher?.avatar_url : null)
|
||||
|| rawAuthor?.avatar_url
|
||||
|| rawAuthor?.avatar
|
||||
@@ -503,6 +509,9 @@ export default function ArtworkCard({
|
||||
() => formatRelativeTime(item.published_at || item.publishedAt || null),
|
||||
[item.published_at, item.publishedAt]
|
||||
)
|
||||
const maturity = item.maturity && typeof item.maturity === 'object' ? item.maturity : {}
|
||||
const shouldBlurMature = Boolean(maturity.should_blur)
|
||||
const isMatureArtwork = Boolean(maturity.is_mature_effective)
|
||||
const initialLiked = Boolean(item.viewer?.is_liked)
|
||||
const [liked, setLiked] = useState(initialLiked)
|
||||
const [likeCount, setLikeCount] = useState(Number(likes ?? 0) || 0)
|
||||
@@ -756,6 +765,10 @@ export default function ArtworkCard({
|
||||
return null
|
||||
}
|
||||
|
||||
if (maturity.should_hide) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (variant === 'embed') {
|
||||
return (
|
||||
<article
|
||||
@@ -772,14 +785,17 @@ export default function ArtworkCard({
|
||||
<div className="h-16 w-20 shrink-0 overflow-hidden rounded-lg bg-white/5">
|
||||
<img
|
||||
src={image}
|
||||
srcSet={responsiveImageSrcSet}
|
||||
sizes={responsiveImageSizes}
|
||||
alt={title}
|
||||
loading={loading}
|
||||
decoding={decoding}
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
className={cx('h-full w-full object-cover transition-transform duration-300 group-hover:scale-105', shouldBlurMature ? 'scale-[1.02] blur-xl' : '')}
|
||||
onError={(event) => {
|
||||
swapImageToFallbackOnce(event, IMAGE_FALLBACK)
|
||||
}}
|
||||
/>
|
||||
{isMatureArtwork ? <div className="absolute inset-x-2 bottom-2 rounded-lg border border-amber-300/20 bg-black/65 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature content</div> : null}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -827,15 +843,15 @@ export default function ArtworkCard({
|
||||
|
||||
<img
|
||||
src={image}
|
||||
srcSet={imageSrcSet || undefined}
|
||||
sizes={imageSizes || undefined}
|
||||
srcSet={responsiveImageSrcSet}
|
||||
sizes={responsiveImageSizes}
|
||||
alt={title}
|
||||
width={imageWidth || undefined}
|
||||
height={imageHeight || undefined}
|
||||
loading={loading}
|
||||
decoding={decoding}
|
||||
fetchPriority={fetchPriority || undefined}
|
||||
className={cx('h-full w-full object-cover transition duration-500 group-hover:scale-110 group-focus-within:scale-110', imageClassName)}
|
||||
className={cx('h-full w-full object-cover transition duration-500 group-hover:scale-110 group-focus-within:scale-110', shouldBlurMature ? 'scale-[1.02] blur-xl' : '', imageClassName)}
|
||||
onError={(event) => {
|
||||
swapImageToFallbackOnce(event, IMAGE_FALLBACK, { clearResponsive: true })
|
||||
}}
|
||||
@@ -851,6 +867,11 @@ export default function ArtworkCard({
|
||||
{resolvedMetricBadge.label}
|
||||
</BadgePill>
|
||||
) : null}
|
||||
{isMatureArtwork ? (
|
||||
<BadgePill className="mt-2 bg-amber-500/16 text-amber-100 ring-amber-300/30" iconClass="fa-solid fa-triangle-exclamation text-[10px]">
|
||||
Mature content
|
||||
</BadgePill>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{relativePublishedAt ? (
|
||||
@@ -893,6 +914,7 @@ export default function ArtworkCard({
|
||||
)}
|
||||
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100">
|
||||
{shouldBlurMature ? <div className="mb-2 inline-flex rounded-full border border-amber-300/20 bg-black/55 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your content settings</div> : null}
|
||||
<h3 className={cx('truncate font-semibold text-white', titleClass)}>
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
240
resources/js/components/artwork/ArtworkEvolutionPanel.jsx
Normal file
240
resources/js/components/artwork/ArtworkEvolutionPanel.jsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import React, { useState } from 'react'
|
||||
import Modal from '../ui/Modal'
|
||||
|
||||
function EvolutionArtworkCard({ card }) {
|
||||
if (!card) return null
|
||||
|
||||
const shouldBlur = Boolean(card?.maturity?.should_blur)
|
||||
|
||||
return (
|
||||
<a
|
||||
href={card.url}
|
||||
className="group block overflow-hidden rounded-[26px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03))] transition hover:border-white/20 hover:bg-white/[0.07]"
|
||||
>
|
||||
<div className="relative aspect-[1.08/1] overflow-hidden bg-slate-950">
|
||||
{card.thumbnail ? (
|
||||
<img
|
||||
src={card.thumbnail}
|
||||
alt={card.title}
|
||||
className={`h-full w-full object-cover transition duration-500 group-hover:scale-[1.03] ${shouldBlur ? 'scale-[1.03] blur-xl' : ''}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-image text-3xl" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/45 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-white backdrop-blur-md">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-sky-300" />
|
||||
{card.role_label}
|
||||
</div>
|
||||
|
||||
{shouldBlur ? (
|
||||
<div className="absolute inset-x-0 bottom-0 bg-[linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,0.9))] px-4 py-4 text-sm text-white/85">
|
||||
Mature artwork preview is softened for your current viewer settings.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 px-4 py-4 sm:px-5">
|
||||
<div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
|
||||
{card.content_type ? <span>{card.content_type}</span> : null}
|
||||
{card.category ? <span className="text-slate-500">{card.category}</span> : null}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold tracking-[-0.02em] text-white">{card.title}</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-slate-300">
|
||||
<span>{card.publisher}</span>
|
||||
{card.year ? <span className="text-slate-500">{card.year}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function ComparisonModal({ item, open, onClose }) {
|
||||
if (!item) return null
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={item.compare?.title || 'Compare versions'} size="full">
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">{item.heading}</div>
|
||||
<h3 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">{item.relation_label}</h3>
|
||||
<p className="mt-2 max-w-3xl text-sm leading-7 text-slate-300">{item.summary}</p>
|
||||
</div>
|
||||
{item.years_apart_label ? (
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm text-slate-200">
|
||||
<i className="fa-regular fa-clock" aria-hidden="true" />
|
||||
{item.years_apart_label}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-2">
|
||||
{[item.before, item.after].map((card) => (
|
||||
<div key={`${item.id}-${card.id}`} className="overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.03]">
|
||||
<div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{card.role_label}</div>
|
||||
<div className="mt-1 text-base font-semibold text-white">{card.title}</div>
|
||||
</div>
|
||||
<a href={card.url} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2 text-sm font-medium text-white transition hover:bg-white/[0.08]">
|
||||
Open
|
||||
<i className="fa-solid fa-arrow-up-right-from-square text-slate-500" aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="relative aspect-[4/3] overflow-hidden bg-slate-950">
|
||||
{card.image_lg ? (
|
||||
<img
|
||||
src={card.image_lg}
|
||||
alt={card.title}
|
||||
className={`h-full w-full object-cover ${card?.maturity?.should_blur ? 'scale-[1.03] blur-xl' : ''}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-image text-4xl" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 px-5 py-4 text-sm text-slate-300">
|
||||
<span>{card.publisher}</span>
|
||||
{card.year ? <span className="text-slate-500">{card.year}</span> : null}
|
||||
{card.category ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{card.category}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{item.note ? (
|
||||
<div className="rounded-[26px] border border-sky-300/20 bg-sky-300/10 px-5 py-4 text-sm leading-7 text-sky-50">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-sky-100/80">Creator note</div>
|
||||
<p className="mt-2 whitespace-pre-wrap">{item.note}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
function EvolutionStoryBlock({ item, onCompare }) {
|
||||
if (!item) return null
|
||||
|
||||
return (
|
||||
<section className="overflow-hidden rounded-[30px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.16),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.025))] p-5 shadow-[0_22px_55px_rgba(2,6,23,0.26)] backdrop-blur-xl sm:p-6">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="max-w-2xl">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">{item.heading}</div>
|
||||
<h2 className="mt-2 text-[28px] font-semibold tracking-[-0.04em] text-white">{item.relation_label}</h2>
|
||||
<p className="mt-2 text-sm leading-7 text-slate-200/90">{item.summary}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 lg:justify-end">
|
||||
{item.years_apart_label ? (
|
||||
<span 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 uppercase tracking-[0.16em] text-slate-200">
|
||||
<i className="fa-regular fa-clock" aria-hidden="true" />
|
||||
{item.years_apart_label}
|
||||
</span>
|
||||
) : null}
|
||||
{item.compare?.available ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onCompare(item)}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-300/12 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-300/18"
|
||||
>
|
||||
<i className="fa-solid fa-up-right-and-down-left-from-center" aria-hidden="true" />
|
||||
Compare side by side
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-4 lg:grid-cols-2">
|
||||
<EvolutionArtworkCard card={item.before} />
|
||||
<EvolutionArtworkCard card={item.after} />
|
||||
</div>
|
||||
|
||||
{item.note ? (
|
||||
<div className="mt-5 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 text-sm leading-7 text-slate-200/90">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">Creator note</div>
|
||||
<p className="mt-2 whitespace-pre-wrap">{item.note}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function EvolutionUpdates({ updates, onCompare }) {
|
||||
if (!updates?.length) return null
|
||||
|
||||
return (
|
||||
<section className="rounded-[30px] border border-white/[0.08] bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_22px_55px_rgba(0,0,0,0.18)] backdrop-blur-xl sm:p-6">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/55">Updated Versions</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">This piece has later evolutions</h2>
|
||||
</div>
|
||||
<div className="text-sm text-slate-400">Follow how the creator revisited the idea over time.</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
{updates.map((item) => (
|
||||
<article key={item.id} className="rounded-[26px] border border-white/10 bg-white/[0.03] p-4 sm:p-5">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="max-w-2xl">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">{item.heading}</div>
|
||||
<h3 className="mt-2 text-xl font-semibold tracking-[-0.02em] text-white">{item.after?.title}</h3>
|
||||
<p className="mt-2 text-sm leading-7 text-slate-300">{item.summary}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.years_apart_label ? (
|
||||
<span 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 uppercase tracking-[0.16em] text-slate-200">
|
||||
<i className="fa-regular fa-clock" aria-hidden="true" />
|
||||
{item.years_apart_label}
|
||||
</span>
|
||||
) : null}
|
||||
{item.compare?.available ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onCompare(item)}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
||||
>
|
||||
Compare
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 lg:grid-cols-2">
|
||||
<EvolutionArtworkCard card={item.before} />
|
||||
<EvolutionArtworkCard card={item.after} />
|
||||
</div>
|
||||
|
||||
{item.note ? <p className="mt-4 text-sm leading-7 text-slate-300">{item.note}</p> : null}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ArtworkEvolutionPanel({ evolution }) {
|
||||
const [compareItem, setCompareItem] = useState(null)
|
||||
|
||||
if (!evolution?.primary && !evolution?.updates?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-5">
|
||||
{evolution.primary ? <EvolutionStoryBlock item={evolution.primary} onCompare={setCompareItem} /> : null}
|
||||
{evolution.updates?.length ? <EvolutionUpdates updates={evolution.updates} onCompare={setCompareItem} /> : null}
|
||||
</div>
|
||||
|
||||
<ComparisonModal item={compareItem} open={Boolean(compareItem)} onClose={() => setCompareItem(null)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
167
resources/js/components/artwork/ArtworkEvolutionSearchPicker.jsx
Normal file
167
resources/js/components/artwork/ArtworkEvolutionSearchPicker.jsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
function SelectedArtworkCard({ artwork, onClear, disabled = false }) {
|
||||
if (!artwork) return null
|
||||
|
||||
return (
|
||||
<div className="rounded-[26px] border border-sky-300/20 bg-sky-400/[0.08] p-4">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
{artwork.thumbnail ? (
|
||||
<img src={artwork.thumbnail} alt={artwork.title} className="h-20 w-20 rounded-[22px] object-cover ring-1 ring-white/10" />
|
||||
) : (
|
||||
<div className="flex h-20 w-20 items-center justify-center rounded-[22px] border border-white/10 bg-white/[0.04] text-slate-500">
|
||||
<i className="fa-solid fa-image" />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">Linked original</div>
|
||||
<div className="mt-2 truncate text-lg font-semibold text-white">{artwork.title}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-300">
|
||||
<span>{artwork.publisher || 'Artist'}</span>
|
||||
{artwork.year ? <span className="text-slate-500">{artwork.year}</span> : null}
|
||||
{artwork.content_type ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{artwork.content_type}</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{artwork.url ? (
|
||||
<a
|
||||
href={artwork.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
||||
>
|
||||
Open public
|
||||
<i className="fa-solid fa-arrow-up-right-from-square text-slate-500" />
|
||||
</a>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
disabled={disabled}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<i className="fa-solid fa-link-slash" />
|
||||
Remove link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ArtworkEvolutionSearchPicker({ artworkId, selected, onSelect, disabled = false }) {
|
||||
const [query, setQuery] = useState('')
|
||||
const [options, setOptions] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!artworkId) return undefined
|
||||
|
||||
const controller = new AbortController()
|
||||
const handle = window.setTimeout(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await fetch(`/api/studio/artworks/${artworkId}/evolution-options?search=${encodeURIComponent(query)}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
signal: controller.signal,
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
setOptions([])
|
||||
return
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
setOptions(Array.isArray(data.data) ? data.data : [])
|
||||
} catch (error) {
|
||||
if (error?.name !== 'AbortError') {
|
||||
setOptions([])
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, query.trim() === '' ? 0 : 220)
|
||||
|
||||
return () => {
|
||||
controller.abort()
|
||||
window.clearTimeout(handle)
|
||||
}
|
||||
}, [artworkId, query])
|
||||
|
||||
const visibleOptions = options.filter((option) => Number(option.id) !== Number(selected?.id))
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<SelectedArtworkCard artwork={selected} onClear={() => onSelect(null)} disabled={disabled} />
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end">
|
||||
<div className="min-w-0 flex-1">
|
||||
<label className="mb-2 block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Search your manageable artworks</label>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search by title, slug, creator, or group"
|
||||
disabled={disabled}
|
||||
className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
|
||||
{loading ? 'Searching…' : `${visibleOptions.length} result${visibleOptions.length === 1 ? '' : 's'}`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-400">
|
||||
Start with your own published artworks. Group-published pieces appear too when you can publish artworks for that group. Results are ranked by visual similarity when the vector index is available.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
{visibleOptions.length ? visibleOptions.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(option)}
|
||||
disabled={disabled}
|
||||
className="flex w-full flex-col gap-4 rounded-[24px] border border-white/10 bg-white/[0.04] p-4 text-left transition hover:border-white/20 hover:bg-white/[0.06] disabled:cursor-not-allowed disabled:opacity-60 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
{option.thumbnail ? (
|
||||
<img src={option.thumbnail} alt={option.title} className="h-16 w-16 rounded-[18px] object-cover ring-1 ring-white/10" />
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-[18px] border border-white/10 bg-white/[0.05] text-slate-500">
|
||||
<i className="fa-solid fa-image" />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-base font-semibold text-white">{option.title}</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-400">
|
||||
<span>{option.publisher || 'Artist'}</span>
|
||||
{option.year ? <span>{option.year}</span> : null}
|
||||
{option.category ? <span>{option.category}</span> : null}
|
||||
{typeof option.similarity_score === 'number' ? (
|
||||
<span className="rounded-full border border-emerald-300/20 bg-emerald-400/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">
|
||||
{Math.round(option.similarity_score * 100)}% similar
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center gap-2 self-start rounded-2xl border border-sky-300/25 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 md:self-center">
|
||||
<i className="fa-solid fa-link" />
|
||||
Link older version
|
||||
</span>
|
||||
</button>
|
||||
)) : (
|
||||
<div className="rounded-[24px] border border-dashed border-white/12 bg-white/[0.02] px-5 py-10 text-center text-sm text-slate-300">
|
||||
{loading ? 'Searching artworks…' : 'No manageable published artworks matched this search yet.'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -124,7 +124,7 @@ export default function ArtworkGallery({
|
||||
const [dismissedEntries, setDismissedEntries] = useState([])
|
||||
const [dismissNotice, setDismissNotice] = useState(null)
|
||||
const visibleArtworkItems = useMemo(
|
||||
() => visibleItems.filter((item) => !dismissedEntries.some((entry) => entry.item?.id === item?.id)),
|
||||
() => visibleItems.filter((item) => !item?.maturity?.should_hide && !dismissedEntries.some((entry) => entry.item?.id === item?.id)),
|
||||
[dismissedEntries, visibleItems]
|
||||
)
|
||||
const baseClassName = layout === 'masonry'
|
||||
|
||||
@@ -15,6 +15,7 @@ function normalizeRelated(item) {
|
||||
url: item.url,
|
||||
thumb: item.thumb || null,
|
||||
thumbSrcSet: item.thumb_srcset || null,
|
||||
maturity: item.maturity || null,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,6 +29,7 @@ function normalizeSimilar(item) {
|
||||
url: item.url,
|
||||
thumb: item.thumb || null,
|
||||
thumbSrcSet: item.thumb_srcset || null,
|
||||
maturity: item.maturity || null,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,12 +44,14 @@ function normalizeRankItem(item) {
|
||||
url,
|
||||
thumb: item.thumbnail_url || item.thumb || null,
|
||||
thumbSrcSet: null,
|
||||
maturity: item.maturity || null,
|
||||
}
|
||||
}
|
||||
|
||||
function dedupeByUrl(items) {
|
||||
const seen = new Set()
|
||||
return items.filter((item) => {
|
||||
if (item?.maturity?.should_hide) return false
|
||||
if (!item?.url || seen.has(item.url)) return false
|
||||
seen.add(item.url)
|
||||
return true
|
||||
@@ -57,6 +61,9 @@ function dedupeByUrl(items) {
|
||||
/* ── Large art card (matches homepage style) ─────────────────── */
|
||||
|
||||
function RailCard({ item }) {
|
||||
const shouldBlur = Boolean(item?.maturity?.should_blur)
|
||||
const isMature = Boolean(item?.maturity?.is_mature_effective)
|
||||
|
||||
return (
|
||||
<article className="w-[240px] shrink-0 snap-start sm:w-[220px] lg:w-[200px] xl:w-[210px] 2xl:w-[220px]">
|
||||
<a
|
||||
@@ -72,11 +79,13 @@ function RailCard({ item }) {
|
||||
srcSet={item.thumbSrcSet || undefined}
|
||||
sizes="220px"
|
||||
alt={item.title || 'Artwork'}
|
||||
className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
|
||||
className={`h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04] ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onError={(e) => { e.currentTarget.src = FALLBACK }}
|
||||
/>
|
||||
{isMature ? <div className="absolute left-3 top-3 z-20 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature</div> : null}
|
||||
{shouldBlur ? <div className="absolute inset-x-3 bottom-3 z-20 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
|
||||
|
||||
{/* Bottom info overlay */}
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
|
||||
|
||||
@@ -34,12 +34,21 @@ export default function ArtworkShareButton({ artwork, shareUrl, size = 'default'
|
||||
|
||||
const { share } = useWebShare({ onFallback: openModal })
|
||||
|
||||
const handleClick = () => {
|
||||
share({
|
||||
const handleClick = async () => {
|
||||
const result = await share({
|
||||
title: artwork?.title || 'Artwork',
|
||||
text: artwork?.description?.substring(0, 120) || '',
|
||||
url: shareUrl || artwork?.canonical_url || window.location.href,
|
||||
})
|
||||
if (result?.shared && result?.native && artwork?.id) {
|
||||
const csrfToken = document.head.querySelector('meta[name="csrf-token"]')?.content
|
||||
fetch(`/api/artworks/${artwork.id}/share`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' },
|
||||
credentials: 'same-origin',
|
||||
body: JSON.stringify({ platform: 'native' }),
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
const isSmall = size === 'small'
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import EmojiMartPicker from '../common/EmojiMartPicker'
|
||||
import extractNativeEmoji from '../common/extractNativeEmoji'
|
||||
import isEventWithinNode from '../common/isEventWithinNode'
|
||||
import loadEmojiMartData from '../common/loadEmojiMartData'
|
||||
|
||||
/**
|
||||
@@ -38,7 +40,7 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla
|
||||
if (!open) return
|
||||
|
||||
function handleClick(e) {
|
||||
if (wrapRef.current && !wrapRef.current.contains(e.target)) {
|
||||
if (!isEventWithinNode(e, wrapRef.current)) {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
@@ -61,7 +63,10 @@ export default function EmojiPickerButton({ onEmojiSelect, disabled = false, cla
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(emoji) => {
|
||||
onEmojiSelect?.(emoji.native)
|
||||
const nativeEmoji = extractNativeEmoji(emoji)
|
||||
if (nativeEmoji) {
|
||||
onEmojiSelect?.(nativeEmoji)
|
||||
}
|
||||
setOpen(false)
|
||||
},
|
||||
[onEmojiSelect],
|
||||
|
||||
@@ -152,16 +152,25 @@ export default function ReactionBar({ entityType, entityId, initialTotals = {},
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (isArtworkVariant) {
|
||||
setPickerOpen((value) => !value)
|
||||
return
|
||||
}
|
||||
|
||||
if (myReaction) {
|
||||
// Quick-toggle: remove own reaction
|
||||
toggle(myReaction)
|
||||
} else {
|
||||
// Quick-like with thumbs_up
|
||||
toggle('thumbs_up')
|
||||
}
|
||||
}}
|
||||
className={triggerClassName}
|
||||
aria-label={myReaction ? `You reacted with ${myReactionData?.label}. Click to remove.` : 'React to this comment'}
|
||||
aria-label={isArtworkVariant
|
||||
? (myReaction
|
||||
? `Open reaction picker. Current reaction: ${myReactionData?.label}.`
|
||||
: 'Open reaction picker for this artwork')
|
||||
: (myReaction
|
||||
? `You reacted with ${myReactionData?.label}. Click to remove.`
|
||||
: 'React to this comment')}
|
||||
>
|
||||
{myReaction ? (
|
||||
<span className={isArtworkVariant ? 'text-xl leading-none' : 'text-base leading-none'}>{myReactionData?.emoji}</span>
|
||||
|
||||
@@ -1,39 +1,18 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import React, { useEffect, useRef, useCallback } from 'react'
|
||||
|
||||
let emojiMartRegistrationPromise = null
|
||||
let emojiMartPromise = null
|
||||
|
||||
function ensureEmojiMartRegistered() {
|
||||
if (!emojiMartRegistrationPromise) {
|
||||
emojiMartRegistrationPromise = import('emoji-mart')
|
||||
function ensureEmojiMart() {
|
||||
if (!emojiMartPromise) {
|
||||
emojiMartPromise = import('emoji-mart')
|
||||
}
|
||||
|
||||
return emojiMartRegistrationPromise
|
||||
}
|
||||
|
||||
function applyPickerProps(element, props) {
|
||||
if (!element) {
|
||||
return
|
||||
}
|
||||
|
||||
element.data = props.data
|
||||
element.onEmojiSelect = props.onEmojiSelect
|
||||
element.theme = props.theme
|
||||
element.previewPosition = props.previewPosition
|
||||
element.skinTonePosition = props.skinTonePosition
|
||||
element.maxFrequentRows = props.maxFrequentRows
|
||||
element.perLine = props.perLine
|
||||
element.navPosition = props.navPosition
|
||||
element.set = props.set
|
||||
element.locale = props.locale
|
||||
element.autoFocus = props.autoFocus
|
||||
element.searchPosition = props.searchPosition
|
||||
element.dynamicWidth = props.dynamicWidth
|
||||
element.noCountryFlags = props.noCountryFlags
|
||||
return emojiMartPromise
|
||||
}
|
||||
|
||||
export default function EmojiMartPicker({
|
||||
data,
|
||||
onEmojiSelect,
|
||||
onClickOutside,
|
||||
theme = 'auto',
|
||||
previewPosition = 'bottom',
|
||||
skinTonePosition = 'preview',
|
||||
@@ -51,56 +30,66 @@ export default function EmojiMartPicker({
|
||||
const hostRef = useRef(null)
|
||||
const pickerRef = useRef(null)
|
||||
|
||||
// Keep refs pointing at the latest callback props so stable wrappers
|
||||
// never capture a stale closure.
|
||||
const onEmojiSelectRef = useRef(onEmojiSelect)
|
||||
const onClickOutsideRef = useRef(onClickOutside)
|
||||
onEmojiSelectRef.current = onEmojiSelect
|
||||
onClickOutsideRef.current = onClickOutside
|
||||
|
||||
// Stable wrappers with fixed identity — safe to pass once to the Picker
|
||||
// constructor without needing to re-initialise the element on every render.
|
||||
const stableOnEmojiSelect = useCallback((emoji) => {
|
||||
onEmojiSelectRef.current?.(emoji)
|
||||
}, [])
|
||||
|
||||
const stableOnClickOutside = useCallback((e) => {
|
||||
onClickOutsideRef.current?.(e)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
|
||||
ensureEmojiMartRegistered().then(() => {
|
||||
if (cancelled || !hostRef.current) {
|
||||
return
|
||||
}
|
||||
// emoji-mart's Picker stores callbacks in `this.props` during construction.
|
||||
// connectedCallback reads from `this.props`, NOT from plain element
|
||||
// properties set after construction, so we MUST use `new Picker(props)`
|
||||
// rather than `document.createElement('em-emoji-picker')` + property
|
||||
// assignment, which would leave onEmojiSelect as null internally.
|
||||
ensureEmojiMart().then(({ Picker }) => {
|
||||
if (cancelled || !hostRef.current) return
|
||||
|
||||
if (!pickerRef.current) {
|
||||
pickerRef.current = document.createElement('em-emoji-picker')
|
||||
hostRef.current.replaceChildren(pickerRef.current)
|
||||
}
|
||||
const pickerProps = {
|
||||
data,
|
||||
onEmojiSelect: stableOnEmojiSelect,
|
||||
onClickOutside: stableOnClickOutside,
|
||||
theme,
|
||||
previewPosition,
|
||||
skinTonePosition,
|
||||
maxFrequentRows,
|
||||
perLine,
|
||||
navPosition,
|
||||
set,
|
||||
locale,
|
||||
autoFocus,
|
||||
}
|
||||
if (searchPosition !== undefined) pickerProps.searchPosition = searchPosition
|
||||
if (dynamicWidth !== undefined) pickerProps.dynamicWidth = dynamicWidth
|
||||
if (noCountryFlags !== undefined) pickerProps.noCountryFlags = noCountryFlags
|
||||
|
||||
applyPickerProps(pickerRef.current, {
|
||||
data,
|
||||
onEmojiSelect,
|
||||
theme,
|
||||
previewPosition,
|
||||
skinTonePosition,
|
||||
maxFrequentRows,
|
||||
perLine,
|
||||
navPosition,
|
||||
set,
|
||||
locale,
|
||||
autoFocus,
|
||||
searchPosition,
|
||||
dynamicWidth,
|
||||
noCountryFlags,
|
||||
})
|
||||
const el = new Picker(pickerProps)
|
||||
pickerRef.current = el
|
||||
hostRef.current.replaceChildren(el)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [
|
||||
data,
|
||||
onEmojiSelect,
|
||||
theme,
|
||||
previewPosition,
|
||||
skinTonePosition,
|
||||
maxFrequentRows,
|
||||
perLine,
|
||||
navPosition,
|
||||
set,
|
||||
locale,
|
||||
autoFocus,
|
||||
searchPosition,
|
||||
dynamicWidth,
|
||||
noCountryFlags,
|
||||
])
|
||||
// Run once on mount. Callbacks stay fresh via refs; static display options
|
||||
// (theme, perLine, etc.) don't change during a single picker session.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
||||
19
resources/js/components/common/extractNativeEmoji.js
Normal file
19
resources/js/components/common/extractNativeEmoji.js
Normal file
@@ -0,0 +1,19 @@
|
||||
export default function extractNativeEmoji(selection) {
|
||||
if (typeof selection === 'string') {
|
||||
return selection
|
||||
}
|
||||
|
||||
const detail = selection?.detail ?? null
|
||||
|
||||
return (
|
||||
selection?.native
|
||||
?? selection?.emoji
|
||||
?? selection?.unicode
|
||||
?? selection?.skins?.[0]?.native
|
||||
?? detail?.native
|
||||
?? detail?.emoji
|
||||
?? detail?.unicode
|
||||
?? detail?.skins?.[0]?.native
|
||||
?? ''
|
||||
)
|
||||
}
|
||||
11
resources/js/components/common/isEventWithinNode.js
Normal file
11
resources/js/components/common/isEventWithinNode.js
Normal file
@@ -0,0 +1,11 @@
|
||||
export default function isEventWithinNode(event, node) {
|
||||
if (!event || !node) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (typeof event.composedPath === 'function') {
|
||||
return event.composedPath().includes(node)
|
||||
}
|
||||
|
||||
return node.contains(event.target)
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import EmojiMartPicker from '../common/EmojiMartPicker'
|
||||
import extractNativeEmoji from '../common/extractNativeEmoji'
|
||||
import isEventWithinNode from '../common/isEventWithinNode'
|
||||
import loadEmojiMartData from '../common/loadEmojiMartData'
|
||||
|
||||
/**
|
||||
@@ -58,8 +60,7 @@ export default function EmojiPicker({ onSelect, editor }) {
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handler = (e) => {
|
||||
if (panelRef.current && !panelRef.current.contains(e.target) &&
|
||||
buttonRef.current && !buttonRef.current.contains(e.target)) {
|
||||
if (!isEventWithinNode(e, panelRef.current) && !isEventWithinNode(e, buttonRef.current)) {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
@@ -76,7 +77,12 @@ export default function EmojiPicker({ onSelect, editor }) {
|
||||
}, [open])
|
||||
|
||||
const handleSelect = useCallback((emoji) => {
|
||||
const native = emoji.native ?? ''
|
||||
const native = extractNativeEmoji(emoji)
|
||||
if (!native) {
|
||||
setOpen(false)
|
||||
return
|
||||
}
|
||||
|
||||
onSelect?.(native)
|
||||
if (editor) {
|
||||
editor.chain().focus().insertContent(native).run()
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function GroupDiscoveryCard({ group, className = '', compact = fa
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
|
||||
{group.avatar_url ? (
|
||||
<img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" />
|
||||
<img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" />
|
||||
) : (
|
||||
<i className="fa-solid fa-people-group text-slate-300" />
|
||||
)}
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function GroupPromoCard({ group, eyebrow = 'Groups spotlight', ti
|
||||
<div className="rounded-[28px] border border-white/10 bg-black/25 p-5 backdrop-blur-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
|
||||
{group.avatar_url ? <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
|
||||
{group.avatar_url ? <img src={group.avatar_url} alt="" className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-lg font-semibold text-white">{group.name}</div>
|
||||
|
||||
477
resources/js/components/profile/CreatorJourneySection.jsx
Normal file
477
resources/js/components/profile/CreatorJourneySection.jsx
Normal file
@@ -0,0 +1,477 @@
|
||||
import React from 'react'
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return null
|
||||
|
||||
try {
|
||||
return new Intl.DateTimeFormat('en', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
}).format(new Date(value))
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function formatYear(value) {
|
||||
if (!value) return null
|
||||
try {
|
||||
return new Intl.DateTimeFormat('en', { year: 'numeric' }).format(new Date(value))
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function iconForType(type) {
|
||||
switch (type) {
|
||||
case 'first_upload':
|
||||
return 'fa-solid fa-seedling'
|
||||
case 'first_featured_artwork':
|
||||
return 'fa-solid fa-star'
|
||||
case 'first_group_release':
|
||||
return 'fa-solid fa-people-group'
|
||||
case 'biggest_download_spike':
|
||||
return 'fa-solid fa-bolt'
|
||||
case 'best_performing_work':
|
||||
return 'fa-solid fa-trophy'
|
||||
case 'most_productive_year':
|
||||
return 'fa-solid fa-calendar-check'
|
||||
case 'yearly_recap':
|
||||
return 'fa-solid fa-chart-column'
|
||||
// v2
|
||||
case 'comeback_minor':
|
||||
return 'fa-solid fa-rotate-right'
|
||||
case 'comeback_major':
|
||||
return 'fa-solid fa-person-walking-arrow-right'
|
||||
case 'comeback_legendary':
|
||||
return 'fa-solid fa-fire-flame-curved'
|
||||
case 'upload_streak_3':
|
||||
case 'upload_streak_6':
|
||||
case 'upload_streak_12':
|
||||
return 'fa-solid fa-fire'
|
||||
case 'active_year_streak_3':
|
||||
case 'active_year_streak_5':
|
||||
return 'fa-solid fa-calendar-days'
|
||||
case 'before_now':
|
||||
return 'fa-solid fa-arrows-rotate'
|
||||
case 'era_started':
|
||||
return 'fa-solid fa-flag'
|
||||
default:
|
||||
return 'fa-solid fa-sparkles'
|
||||
}
|
||||
}
|
||||
|
||||
function milestoneHref(item) {
|
||||
return item?.artwork?.url || item?.release?.url || null
|
||||
}
|
||||
|
||||
function StatPill({ label, value }) {
|
||||
if (value === null || value === undefined || value === '') return null
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/[0.04] px-3.5 py-2.5">
|
||||
<div className="text-[10px] font-semibold uppercase tracking-[0.24em] text-sky-200/60">{label}</div>
|
||||
<div className="mt-1 text-sm font-semibold text-white">{value}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyJourneyState({ username, memberSinceYear, yearsOnSkinbase }) {
|
||||
return (
|
||||
<div className="rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-12">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-200">
|
||||
<i className="fa-solid fa-route text-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-lg font-semibold text-white">Creator Journey is just getting started</div>
|
||||
<div className="mt-1 text-sm text-slate-400">
|
||||
Public milestones will appear here as @{username} builds more history on Skinbase.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<StatPill label="Member since" value={memberSinceYear || 'Unknown'} />
|
||||
<StatPill label="Years on Skinbase" value={yearsOnSkinbase ?? 0} />
|
||||
<StatPill label="Milestones saved" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── v2: Era strip ─────────────────────────────────────────────────────────────
|
||||
|
||||
const ERA_COLORS = {
|
||||
early_years: { bg: 'bg-slate-800/60', border: 'border-slate-600/40', text: 'text-slate-300', icon: 'fa-solid fa-seedling', dot: 'bg-slate-400' },
|
||||
breakthrough: { bg: 'bg-amber-900/30', border: 'border-amber-600/30', text: 'text-amber-200', icon: 'fa-solid fa-star', dot: 'bg-amber-400' },
|
||||
experimental: { bg: 'bg-violet-900/30', border: 'border-violet-600/30', text: 'text-violet-200', icon: 'fa-solid fa-flask', dot: 'bg-violet-400' },
|
||||
comeback: { bg: 'bg-emerald-900/30', border: 'border-emerald-600/30', text: 'text-emerald-200', icon: 'fa-solid fa-rotate-right', dot: 'bg-emerald-400' },
|
||||
current: { bg: 'bg-sky-900/30', border: 'border-sky-600/30', text: 'text-sky-200', icon: 'fa-solid fa-bolt', dot: 'bg-sky-400' },
|
||||
}
|
||||
|
||||
function EraStrip({ eras }) {
|
||||
if (!eras?.length) return null
|
||||
|
||||
return (
|
||||
<div className="mt-7">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-3">Creator Eras</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{eras.map((era, i) => {
|
||||
const style = ERA_COLORS[era.type] ?? ERA_COLORS.current
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex items-start gap-3 rounded-2xl border ${style.border} ${style.bg} px-4 py-3 min-w-[180px] max-w-xs flex-1`}
|
||||
>
|
||||
<div className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/5 ${style.text}`}>
|
||||
<i className={style.icon} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-semibold ${style.text}`}>{era.title}</span>
|
||||
{era.is_current && (
|
||||
<span className="rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-slate-300">
|
||||
Now
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-0.5 text-[11px] text-slate-500">
|
||||
{formatYear(era.starts_at)}
|
||||
{era.ends_at ? ` – ${formatYear(era.ends_at)}` : era.is_current ? ' – present' : ''}
|
||||
</div>
|
||||
{era.description && (
|
||||
<p className="mt-1.5 text-[11px] leading-relaxed text-slate-400 line-clamp-2">{era.description}</p>
|
||||
)}
|
||||
{(era.stats?.uploads_count ?? 0) > 0 && (
|
||||
<div className="mt-2 text-[10px] text-slate-500">
|
||||
{era.stats.uploads_count} upload{era.stats.uploads_count !== 1 ? 's' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── v2: Streaks ──────────────────────────────────────────────────────────────
|
||||
|
||||
function StreakBadge({ label, value, active = false }) {
|
||||
if (!value) return null
|
||||
return (
|
||||
<div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 ${active ? 'border-orange-500/30 bg-orange-900/20' : 'border-white/10 bg-white/[0.03]'}`}>
|
||||
<div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${active ? 'bg-orange-500/15 text-orange-300' : 'bg-white/5 text-slate-400'}`}>
|
||||
<i className={`fa-solid fa-fire${active ? '' : ''}`} />
|
||||
</div>
|
||||
<div>
|
||||
<div className={`text-base font-bold tabular-nums ${active ? 'text-orange-200' : 'text-white'}`}>{value}</div>
|
||||
<div className="text-[11px] text-slate-500">{label}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StreaksSection({ streaks }) {
|
||||
if (!streaks) return null
|
||||
const { current_monthly_upload_streak, best_monthly_upload_streak, current_active_year_streak, best_active_year_streak } = streaks
|
||||
const hasAny = current_monthly_upload_streak > 0 || best_monthly_upload_streak > 0 || best_active_year_streak > 0
|
||||
|
||||
if (!hasAny) return null
|
||||
|
||||
return (
|
||||
<div className="mt-7">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-3">Creative Streaks</div>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{current_monthly_upload_streak > 0 && (
|
||||
<StreakBadge label="Current monthly streak" value={`${current_monthly_upload_streak}mo`} active />
|
||||
)}
|
||||
{best_monthly_upload_streak > 0 && (
|
||||
<StreakBadge label="Best monthly streak" value={`${best_monthly_upload_streak}mo`} />
|
||||
)}
|
||||
{current_active_year_streak > 0 && (
|
||||
<StreakBadge label="Active year streak" value={`${current_active_year_streak}yr`} active={current_active_year_streak >= 3} />
|
||||
)}
|
||||
{best_active_year_streak > 0 && (
|
||||
<StreakBadge label="Best year streak" value={`${best_active_year_streak}yr`} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── v2: Growth & Evolution ───────────────────────────────────────────────────
|
||||
|
||||
const RELATION_LABELS = {
|
||||
remake_of: 'Remake',
|
||||
remaster_of: 'Remaster',
|
||||
revision_of: 'Revision',
|
||||
inspired_by: 'Inspired by own work',
|
||||
variation_of: 'Variation',
|
||||
}
|
||||
|
||||
function EvolutionSection({ evolution }) {
|
||||
if (!evolution?.length) return null
|
||||
|
||||
return (
|
||||
<div className="mt-7 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Growth & Evolution</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">Then & Now</div>
|
||||
|
||||
<div className="mt-5 space-y-5">
|
||||
{evolution.map((item) => (
|
||||
<div key={item.id} className="grid gap-3 sm:grid-cols-[1fr_auto_1fr]">
|
||||
{/* Original */}
|
||||
<a
|
||||
href={item.target_artwork?.url}
|
||||
className="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/[0.03] p-3 transition-colors hover:border-white/20 hover:bg-white/[0.06]"
|
||||
>
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/5 text-slate-500 group-hover:text-slate-300">
|
||||
<i className="fa-solid fa-image" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-600">Original</div>
|
||||
<div className="mt-0.5 truncate text-sm font-medium text-slate-300 group-hover:text-white">{item.target_artwork?.title}</div>
|
||||
<div className="text-[10px] text-slate-600">{formatYear(item.target_artwork?.published_at)}</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Arrow + relation type */}
|
||||
<div className="flex flex-col items-center justify-center gap-1 py-2 text-slate-600">
|
||||
<i className="fa-solid fa-arrow-right-long" />
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-600">
|
||||
{RELATION_LABELS[item.relation_type] ?? item.relation_type}
|
||||
</span>
|
||||
{item.years_between > 0 && (
|
||||
<span className="text-[10px] text-slate-700">{item.years_between}yr later</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New version */}
|
||||
<a
|
||||
href={item.source_artwork?.url}
|
||||
className="group flex items-start gap-3 rounded-2xl border border-emerald-700/30 bg-emerald-900/10 p-3 transition-colors hover:border-emerald-600/50 hover:bg-emerald-900/20"
|
||||
>
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400">
|
||||
<i className="fa-solid fa-wand-magic-sparkles" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[10px] font-semibold uppercase tracking-[0.2em] text-emerald-600">New version</div>
|
||||
<div className="mt-0.5 truncate text-sm font-medium text-emerald-200 group-hover:text-white">{item.source_artwork?.title}</div>
|
||||
<div className="text-[10px] text-emerald-800">{formatYear(item.source_artwork?.published_at)}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CreatorJourneySection({ journey, username }) {
|
||||
const summary = journey?.summary ?? {}
|
||||
const highlights = Array.isArray(journey?.highlights) ? journey.highlights : []
|
||||
const timeline = Array.isArray(journey?.timeline) ? journey.timeline.slice(0, 6) : []
|
||||
const recaps = Array.isArray(journey?.yearly_recaps) ? journey.yearly_recaps.slice(0, 3) : []
|
||||
const eras = Array.isArray(journey?.eras) ? journey.eras : []
|
||||
const evolution = Array.isArray(journey?.evolution) ? journey.evolution : []
|
||||
const streaks = journey?.streaks ?? null
|
||||
const latestMilestone = summary.latest_milestone ?? null
|
||||
const available = !!summary.available
|
||||
|
||||
if (!available) {
|
||||
return (
|
||||
<section className="rounded-[34px] border border-white/10 bg-[linear-gradient(145deg,rgba(17,24,39,0.96),rgba(15,23,42,0.9))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.28)] sm:p-7">
|
||||
<div className="mb-5 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.3em] text-sky-200/70">Creator Journey</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">A profile built as a story, not only a feed</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EmptyJourneyState
|
||||
username={username}
|
||||
memberSinceYear={summary.member_since_year}
|
||||
yearsOnSkinbase={summary.years_on_skinbase}
|
||||
/>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-[34px] border border-white/10 bg-[linear-gradient(145deg,rgba(15,23,42,0.98),rgba(8,15,28,0.92))] p-6 shadow-[0_24px_80px_rgba(2,6,23,0.32)] sm:p-7">
|
||||
<div className="flex flex-wrap items-start justify-between gap-5">
|
||||
<div className="max-w-2xl">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.3em] text-sky-200/70">Creator Journey</div>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-white">A profile shaped by milestones, turning points, and yearly chapters.</h2>
|
||||
{latestMilestone && (
|
||||
<p className="mt-3 max-w-xl text-sm leading-relaxed text-slate-300">
|
||||
Latest moment: <span className="font-semibold text-white">{latestMilestone.title}</span>
|
||||
{latestMilestone.headline ? ` - ${latestMilestone.headline}` : ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid min-w-[18rem] gap-3 sm:grid-cols-3">
|
||||
<StatPill label="Member since" value={summary.member_since_year} />
|
||||
<StatPill label="Years on Skinbase" value={summary.years_on_skinbase ?? 0} />
|
||||
<StatPill label="Milestones" value={summary.milestone_count ?? 0} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── v2: Era strip ── */}
|
||||
<EraStrip eras={eras} />
|
||||
|
||||
{highlights.length > 0 && (
|
||||
<div className="mt-7 grid gap-4 xl:grid-cols-2">
|
||||
{highlights.map((item) => {
|
||||
const href = milestoneHref(item)
|
||||
|
||||
return (
|
||||
<article
|
||||
key={item.id}
|
||||
className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] p-5"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-sky-400/12 text-sky-200">
|
||||
<i className={iconForType(item.type)} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">{item.title}</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">{item.headline || item.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
{item.value && (
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-medium text-slate-200">
|
||||
{item.value}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{item.summary && (
|
||||
<p className="mt-4 text-sm leading-relaxed text-slate-300">{item.summary}</p>
|
||||
)}
|
||||
|
||||
{href && (
|
||||
<a
|
||||
href={href}
|
||||
className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-sky-200 transition-colors hover:text-white"
|
||||
>
|
||||
Open source moment
|
||||
<i className="fa-solid fa-arrow-up-right-from-square text-xs" />
|
||||
</a>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-7 grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.95fr)]">
|
||||
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Timeline</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">Important creator milestones</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
{timeline.map((item, index) => {
|
||||
const href = milestoneHref(item)
|
||||
|
||||
return (
|
||||
<div key={item.id} className="grid grid-cols-[2.5rem_minmax(0,1fr)] gap-3">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.05] text-slate-100">
|
||||
<i className={iconForType(item.type)} />
|
||||
</div>
|
||||
{index < timeline.length - 1 && <div className="mt-2 h-full w-px bg-white/10" />}
|
||||
</div>
|
||||
<div className="pb-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="text-base font-semibold text-white">{item.title}</div>
|
||||
{formatDate(item.occurred_at) && (
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">{formatDate(item.occurred_at)}</div>
|
||||
)}
|
||||
</div>
|
||||
{item.headline && <div className="mt-1 text-sm font-medium text-sky-100">{item.headline}</div>}
|
||||
{item.summary && <div className="mt-1 text-sm leading-relaxed text-slate-400">{item.summary}</div>}
|
||||
{href && (
|
||||
<a href={href} className="mt-2 inline-flex items-center gap-2 text-sm text-slate-200 transition-colors hover:text-white">
|
||||
View linked work
|
||||
<i className="fa-solid fa-arrow-right text-xs" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
||||
<div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">Yearly recap</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">Recent chapters</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-3">
|
||||
{recaps.map((item) => {
|
||||
const status = item.metrics?.year_status
|
||||
const statusColors = {
|
||||
breakout: 'bg-emerald-400/12 text-emerald-200',
|
||||
steady: 'bg-sky-400/12 text-sky-200',
|
||||
experimental: 'bg-violet-400/12 text-violet-200',
|
||||
comeback: 'bg-amber-400/12 text-amber-200',
|
||||
quiet: 'bg-slate-700 text-slate-400',
|
||||
}
|
||||
return (
|
||||
<article key={item.id} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">{item.value}</div>
|
||||
{status && (
|
||||
<span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold capitalize ${statusColors[status] ?? statusColors.steady}`}>
|
||||
{status}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-lg font-semibold text-white">{item.headline}</div>
|
||||
</div>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-400/12 text-amber-200">
|
||||
<i className="fa-solid fa-chart-column" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-300">{item.summary}</p>
|
||||
|
||||
<div className="mt-4 grid gap-2 sm:grid-cols-2">
|
||||
<StatPill label="Views" value={(item.metrics?.views ?? 0).toLocaleString()} />
|
||||
<StatPill label="Downloads" value={(item.metrics?.downloads ?? 0).toLocaleString()} />
|
||||
{(item.metrics?.featured_count ?? 0) > 0 && (
|
||||
<StatPill label="Featured" value={item.metrics.featured_count} />
|
||||
)}
|
||||
{item.metrics?.top_category && (
|
||||
<StatPill label="Top category" value={item.metrics.top_category} />
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── v2: Streaks ── */}
|
||||
<StreaksSection streaks={streaks} />
|
||||
|
||||
{/* ── v2: Growth & Evolution ── */}
|
||||
<EvolutionSection evolution={evolution} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -23,7 +23,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
|
||||
const joinDate = user.created_at
|
||||
? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
||||
: null
|
||||
const bio = profile?.bio || profile?.about || ''
|
||||
const progressPercent = Math.round(Number(user?.progress_percent ?? 0))
|
||||
const heroStats = [
|
||||
{ label: 'Followers', value: formatCompactNumber(count) },
|
||||
@@ -156,12 +155,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{bio ? (
|
||||
<p className="mx-auto mt-4 max-w-2xl text-sm leading-relaxed text-slate-300/90 md:mx-0 md:text-[15px]">
|
||||
{bio}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<XPProgressBar
|
||||
xp={user?.xp}
|
||||
currentLevelXp={user?.current_level_xp}
|
||||
|
||||
@@ -46,8 +46,35 @@ function StatPill({ icon, label, value }) {
|
||||
)
|
||||
}
|
||||
|
||||
export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
|
||||
function CoverMedia({ collection, isOwner }) {
|
||||
const coverImage = collection?.cover_image
|
||||
const coverMaturity = !isOwner && collection?.cover_image_maturity ? collection.cover_image_maturity : null
|
||||
const shouldBlur = Boolean(coverMaturity?.should_blur)
|
||||
const isMature = Boolean(coverMaturity?.is_mature_effective)
|
||||
|
||||
if (!coverImage) {
|
||||
return (
|
||||
<div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
|
||||
<i className="fa-solid fa-layer-group text-4xl" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative aspect-[16/10] overflow-hidden bg-slate-950">
|
||||
<img
|
||||
src={coverImage}
|
||||
alt={collection?.title || 'Collection cover'}
|
||||
className={`h-full w-full object-cover transition-[transform,filter] duration-500 group-hover:scale-[1.04] ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
{isMature ? <div className="absolute left-3 top-3 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
|
||||
{shouldBlur ? <div className="absolute inset-x-3 bottom-3 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
|
||||
const [saved, setSaved] = React.useState(Boolean(collection?.saved))
|
||||
const [saveBusy, setSaveBusy] = React.useState(false)
|
||||
|
||||
@@ -113,20 +140,7 @@ export default function CollectionCard({ collection, isOwner, onDelete, onToggle
|
||||
>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(249,115,22,0.12),transparent_28%)] opacity-0 transition duration-300 group-hover:opacity-100" />
|
||||
<div className="relative">
|
||||
{coverImage ? (
|
||||
<div className="aspect-[16/10] overflow-hidden bg-slate-950">
|
||||
<img
|
||||
src={coverImage}
|
||||
alt={collection?.title || 'Collection cover'}
|
||||
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
|
||||
<i className="fa-solid fa-layer-group text-4xl" />
|
||||
</div>
|
||||
)}
|
||||
<CoverMedia collection={collection} isOwner={isOwner} />
|
||||
|
||||
<div className="p-5">
|
||||
<div className="mb-3 flex flex-wrap items-center gap-2">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import CreatorJourneySection from '../CreatorJourneySection'
|
||||
|
||||
const SOCIAL_ICONS = {
|
||||
twitter: { icon: 'fa-brands fa-x-twitter', label: 'X / Twitter' },
|
||||
@@ -169,7 +170,7 @@ function SectionCard({ icon, eyebrow, title, children, className = '' }) {
|
||||
* TabAbout
|
||||
* Bio, social links, metadata - replaces old sidebar profile card.
|
||||
*/
|
||||
export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory }) {
|
||||
export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory, journey }) {
|
||||
const uname = user.username || user.name
|
||||
const displayName = user.name || uname
|
||||
const about = profile?.about
|
||||
@@ -240,6 +241,8 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
|
||||
)}
|
||||
</SectionCard>
|
||||
|
||||
<CreatorJourneySection journey={journey} username={uname} />
|
||||
|
||||
<SectionCard icon="fa-solid fa-address-card" eyebrow="Details" title="Profile information">
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{displayName && displayName !== uname ? (
|
||||
|
||||
@@ -90,6 +90,8 @@ function FeaturedShowcase({ featuredArtworks }) {
|
||||
const secondaryArtworks = featuredArtworks.slice(1, 4)
|
||||
const leadMeta = artworkMeta(leadArtwork)
|
||||
const leadStats = artworkStats(leadArtwork)
|
||||
const leadShouldBlur = Boolean(leadArtwork?.maturity?.should_blur)
|
||||
const leadIsMature = Boolean(leadArtwork?.maturity?.is_mature_effective)
|
||||
|
||||
return (
|
||||
<section className="relative mt-8 overflow-hidden rounded-[36px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.14),rgba(255,255,255,0.04),rgba(249,115,22,0.12))] shadow-[0_30px_90px_rgba(2,6,23,0.3)]">
|
||||
@@ -104,10 +106,12 @@ function FeaturedShowcase({ featuredArtworks }) {
|
||||
<img
|
||||
src={leadArtwork.thumb}
|
||||
alt={leadArtwork.name}
|
||||
className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.05]"
|
||||
className={`h-full w-full object-cover transition-[transform,filter] duration-700 group-hover:scale-[1.05] ${leadShouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
{leadIsMature ? <div className="absolute left-5 top-20 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature content</div> : null}
|
||||
{leadShouldBlur ? <div className="absolute inset-x-5 bottom-28 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-center text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
|
||||
<div className="absolute inset-x-0 top-0 flex items-start justify-between p-5 md:p-7">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100 backdrop-blur-sm">
|
||||
<i className="fa-solid fa-star text-[10px]" />
|
||||
@@ -174,7 +178,7 @@ function FeaturedShowcase({ featuredArtworks }) {
|
||||
<img
|
||||
src={art.thumb}
|
||||
alt={art.name}
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
|
||||
className={`h-full w-full object-cover transition-[transform,filter] duration-300 group-hover:scale-[1.04] ${art?.maturity?.should_blur ? 'scale-[1.02] blur-xl' : ''}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -5,10 +5,6 @@ import PostComposer from '../../Feed/PostComposer'
|
||||
import PostCardSkeleton from '../../Feed/PostCardSkeleton'
|
||||
import FeedSidebar from '../../Feed/FeedSidebar'
|
||||
|
||||
function formatCompactNumber(value) {
|
||||
return Number(value ?? 0).toLocaleString()
|
||||
}
|
||||
|
||||
function EmptyPostsState({ isOwner, username }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-20 text-center">
|
||||
@@ -78,7 +74,6 @@ export default function TabPosts({
|
||||
suggestedUsers,
|
||||
socialLinks,
|
||||
countryName,
|
||||
profileUrl,
|
||||
onTabChange,
|
||||
}) {
|
||||
const [posts, setPosts] = useState([])
|
||||
@@ -116,78 +111,14 @@ export default function TabPosts({
|
||||
setPosts((prev) => prev.filter((p) => p.id !== postId))
|
||||
}, [])
|
||||
|
||||
const summaryCards = [
|
||||
{ label: 'Followers', value: formatCompactNumber(followerCount), icon: 'fa-user-group' },
|
||||
{ label: 'Uploads', value: formatCompactNumber(stats?.uploads_count ?? 0), icon: 'fa-image' },
|
||||
{ label: 'Awards', value: formatCompactNumber(stats?.awards_received_count ?? 0), icon: 'fa-trophy' },
|
||||
{ label: 'Location', value: countryName || 'Unknown', icon: 'fa-location-dot' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="py-6">
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
|
||||
<section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.06))] p-6 shadow-[0_20px_60px_rgba(2,6,23,0.24)]">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Profile posts</p>
|
||||
<h2 className="mt-2 text-3xl font-semibold tracking-[-0.03em] text-white">
|
||||
Updates, thoughts, and shared work from @{username}
|
||||
</h2>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
|
||||
This stream adds the human layer to the profile: quick notes, shared artwork posts, and announcements that do not belong inside the gallery grid.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onTabChange?.('artworks')}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.1]"
|
||||
>
|
||||
<i className="fa-solid fa-images fa-fw" />
|
||||
View artworks
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onTabChange?.('about')}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
|
||||
>
|
||||
<i className="fa-solid fa-id-card fa-fw" />
|
||||
About creator
|
||||
</button>
|
||||
{profileUrl ? (
|
||||
<a
|
||||
href={profileUrl}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
|
||||
>
|
||||
<i className="fa-solid fa-user fa-fw" />
|
||||
Canonical profile
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-2">
|
||||
{summaryCards.map((card) => (
|
||||
<div
|
||||
key={card.label}
|
||||
className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{card.label}</div>
|
||||
<i className={`fa-solid ${card.icon} text-slate-500`} />
|
||||
</div>
|
||||
<div className="mt-3 text-xl font-semibold tracking-tight text-white">{card.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
|
||||
<div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
|
||||
<div className="min-w-0 space-y-4">
|
||||
{isOwner && authUser && (
|
||||
<PostComposer user={authUser} onPosted={handlePosted} />
|
||||
<div className="sticky top-24 z-20">
|
||||
<PostComposer user={authUser} onPosted={handlePosted} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loaded && loading && (
|
||||
|
||||
@@ -19,6 +19,7 @@ function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
|
||||
* KPI overview cards. Charts can be added here once chart infrastructure exists.
|
||||
*/
|
||||
export default function TabStats({ stats, followerCount, followAnalytics }) {
|
||||
const medalTotals = stats?.medal_totals ?? null
|
||||
const kpis = [
|
||||
{ icon: 'fa-eye', label: 'Profile Views', value: stats?.profile_views_count, color: 'text-sky-400' },
|
||||
{ icon: 'fa-images', label: 'Uploads', value: stats?.uploads_count, color: 'text-violet-400' },
|
||||
@@ -62,6 +63,31 @@ export default function TabStats({ stats, followerCount, followAnalytics }) {
|
||||
<KpiCard key={kpi.label} {...kpi} />
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8 rounded-2xl border border-white/10 bg-white/4 p-5 shadow-xl shadow-black/20">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold uppercase tracking-widest text-slate-500">Medal Breakdown</h3>
|
||||
<p className="mt-2 text-sm text-slate-400">Real medal totals collected across all public artworks.</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-xs uppercase tracking-widest text-slate-500">Weighted Score</div>
|
||||
<div className="mt-1 text-2xl font-bold text-white tabular-nums">{Number(medalTotals?.score_total ?? 0).toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
{[
|
||||
{ label: 'Gold', value: medalTotals?.gold ?? 0, color: 'text-amber-300' },
|
||||
{ label: 'Silver', value: medalTotals?.silver ?? 0, color: 'text-slate-300' },
|
||||
{ label: 'Bronze', value: medalTotals?.bronze ?? 0, color: 'text-orange-300' },
|
||||
{ label: 'Total Medals', value: medalTotals?.count ?? 0, color: 'text-cyan-300' },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="rounded-2xl border border-white/10 bg-black/15 px-4 py-4">
|
||||
<div className="text-[11px] uppercase tracking-widest text-slate-500">{item.label}</div>
|
||||
<div className={`mt-2 text-2xl font-semibold tabular-nums ${item.color}`}>{Number(item.value).toLocaleString()}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mt-8 mb-4 text-xs font-semibold uppercase tracking-widest text-slate-500 flex items-center gap-2">
|
||||
<i className="fa-solid fa-user-group text-emerald-400 fa-fw" />
|
||||
Follow Growth
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { getMaxUserTags } from '../../config/tags'
|
||||
|
||||
const DEFAULT_MAX_TAGS = 15
|
||||
const DEFAULT_MIN_LENGTH = 2
|
||||
const DEFAULT_MAX_LENGTH = 32
|
||||
const DEBOUNCE_MS = 300
|
||||
@@ -155,6 +155,7 @@ function SearchInput({
|
||||
onFocus={onFocus}
|
||||
disabled={disabled}
|
||||
type="text"
|
||||
role="combobox"
|
||||
className="w-full rounded-xl border border-white/10 bg-white/10 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
|
||||
placeholder={placeholder}
|
||||
aria-label="Tag input"
|
||||
@@ -407,7 +408,7 @@ export default function TagInput({
|
||||
onChange,
|
||||
suggestedTags = [],
|
||||
disabled = false,
|
||||
maxTags = DEFAULT_MAX_TAGS,
|
||||
maxTags = getMaxUserTags(),
|
||||
minLength = DEFAULT_MIN_LENGTH,
|
||||
maxLength = DEFAULT_MAX_LENGTH,
|
||||
placeholder = 'Type tags…',
|
||||
|
||||
@@ -3,6 +3,17 @@ import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import TagInput from './TagInput'
|
||||
import { getMaxUserTags } from '../../config/tags'
|
||||
|
||||
const MAX_TAGS = getMaxUserTags()
|
||||
|
||||
function tagsAtLimitMinus(remaining) {
|
||||
return Array.from({ length: MAX_TAGS - remaining }, (_, index) => `t${index + 1}`)
|
||||
}
|
||||
|
||||
function tagsAtLimit() {
|
||||
return Array.from({ length: MAX_TAGS }, (_, index) => `a${index + 1}`)
|
||||
}
|
||||
|
||||
function Harness({ initial = [] }) {
|
||||
const [tags, setTags] = React.useState(initial)
|
||||
@@ -103,13 +114,13 @@ describe('TagInput', () => {
|
||||
})
|
||||
|
||||
it('warns when pasted tags exceed the max and only adds the allowed tags', async () => {
|
||||
render(<Harness initial={['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10', 't11', 't12', 't13', 't14']} />)
|
||||
render(<Harness initial={tagsAtLimitMinus(1)} />)
|
||||
|
||||
const input = screen.getByLabelText('Tag input')
|
||||
await userEvent.click(input)
|
||||
await userEvent.paste('alpha, beta, gamma')
|
||||
|
||||
expect(screen.getByText('Only 1 tag can be added because the limit is 15. 2 pasted tags will be skipped.')).not.toBeNull()
|
||||
expect(screen.getByText(`Only 1 tag can be added because the limit is ${MAX_TAGS}. 2 pasted tags will be skipped.`)).not.toBeNull()
|
||||
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Add tags' }))
|
||||
|
||||
@@ -134,7 +145,7 @@ describe('TagInput', () => {
|
||||
})
|
||||
|
||||
it('enforces max tags limit', async () => {
|
||||
render(<Harness initial={['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10', 'a11', 'a12', 'a13', 'a14', 'a15']} />)
|
||||
render(<Harness initial={tagsAtLimit()} />)
|
||||
|
||||
const input = screen.getByLabelText('Tag input')
|
||||
await userEvent.type(input, 'overflow{enter}')
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
* - Selected chips shown above the list
|
||||
* - AI-suggested tags shown with a purple badge
|
||||
* - Search icon on the right side of the input
|
||||
* - Counter footer: X/15 tags selected
|
||||
* - Counter footer: X/max tags selected
|
||||
*
|
||||
* Value format: string[] of tag slugs
|
||||
*/
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { getMaxUserTags } from '../../config/tags'
|
||||
|
||||
const MAX_TAGS = 15
|
||||
const DEBOUNCE_MS = 250
|
||||
const MAX_RESULTS = 30
|
||||
const MIN_LENGTH = 2
|
||||
@@ -339,7 +339,7 @@ export default function TagPicker({
|
||||
onChange,
|
||||
suggestedTags = [],
|
||||
disabled = false,
|
||||
maxTags = MAX_TAGS,
|
||||
maxTags = getMaxUserTags(),
|
||||
searchEndpoint = '/api/tags/search',
|
||||
popularEndpoint = '/api/tags/popular',
|
||||
placeholder,
|
||||
|
||||
@@ -3,6 +3,13 @@ import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import TagPicker from './TagPicker'
|
||||
import { getMaxUserTags } from '../../config/tags'
|
||||
|
||||
const MAX_TAGS = getMaxUserTags()
|
||||
|
||||
function tagsAtLimitMinus(remaining) {
|
||||
return Array.from({ length: MAX_TAGS - remaining }, (_, index) => `t${index + 1}`)
|
||||
}
|
||||
|
||||
function Harness({ initial = [] }) {
|
||||
const [tags, setTags] = React.useState(initial)
|
||||
@@ -92,13 +99,13 @@ describe('TagPicker', () => {
|
||||
})
|
||||
|
||||
it('warns when pasted tags exceed the max and only applies the allowed tags', async () => {
|
||||
render(<Harness initial={['t1', 't2', 't3', 't4', 't5', 't6', 't7', 't8', 't9', 't10', 't11', 't12', 't13', 't14']} />)
|
||||
render(<Harness initial={tagsAtLimitMinus(1)} />)
|
||||
|
||||
const input = screen.getByLabelText('Search or add tags')
|
||||
await userEvent.click(input)
|
||||
await userEvent.paste('alpha, beta, gamma')
|
||||
|
||||
expect(screen.getByText('Only 1 tag can be added because the limit is 15. 2 pasted tags will be skipped.')).not.toBeNull()
|
||||
expect(screen.getByText(`Only 1 tag can be added because the limit is ${MAX_TAGS}. 2 pasted tags will be skipped.`)).not.toBeNull()
|
||||
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Add tags' }))
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ import React, { forwardRef } from 'react'
|
||||
* @prop {string} size - 'sm' | 'md' | 'lg'
|
||||
*/
|
||||
const Select = forwardRef(function Select(
|
||||
{ label, error, hint, required, options, placeholder, size = 'md', id, className = '', children, ...rest },
|
||||
{ label, error, hint, required, options, placeholder, size = 'md', id, className = '', children, style, ...rest },
|
||||
ref,
|
||||
) {
|
||||
const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined)
|
||||
@@ -57,6 +57,13 @@ const Select = forwardRef(function Select(
|
||||
ref={ref}
|
||||
className={inputClass}
|
||||
aria-invalid={!!error}
|
||||
style={{
|
||||
appearance: 'none',
|
||||
WebkitAppearance: 'none',
|
||||
MozAppearance: 'none',
|
||||
backgroundImage: 'none',
|
||||
...style,
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{placeholder && <option value="" className="bg-nova-900">{placeholder}</option>}
|
||||
|
||||
@@ -76,7 +76,6 @@ export default function UploadSidebar({
|
||||
value={metadata.tags}
|
||||
onChange={(nextTags) => onChangeTags?.(nextTags)}
|
||||
suggestedTags={suggestedTags}
|
||||
maxTags={15}
|
||||
searchEndpoint="/api/tags/search"
|
||||
popularEndpoint="/api/tags/popular"
|
||||
error={errors.tags}
|
||||
|
||||
10
resources/js/config/tags.js
Normal file
10
resources/js/config/tags.js
Normal file
@@ -0,0 +1,10 @@
|
||||
const FALLBACK_MAX_USER_TAGS = 30
|
||||
|
||||
export function getMaxUserTags() {
|
||||
if (typeof window === 'undefined') return FALLBACK_MAX_USER_TAGS
|
||||
|
||||
const value = Number(window.SKINBASE_LIMITS?.tags?.max_user_tags)
|
||||
return Number.isInteger(value) && value > 0 ? value : FALLBACK_MAX_USER_TAGS
|
||||
}
|
||||
|
||||
export { FALLBACK_MAX_USER_TAGS }
|
||||
@@ -1240,10 +1240,8 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
|
||||
|
||||
<ActivityFeed />
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<TrendingArtworks />
|
||||
<RecommendedCreators />
|
||||
</div>
|
||||
<TrendingArtworks />
|
||||
<RecommendedCreators />
|
||||
</section>
|
||||
|
||||
<aside className="space-y-6 xl:col-span-4">
|
||||
|
||||
@@ -106,7 +106,7 @@ export default function ActivityFeed() {
|
||||
) : null}
|
||||
|
||||
{!loading && !error && items.length > 0 ? (
|
||||
<div className="max-h-[520px] space-y-3 overflow-y-auto pr-1">
|
||||
<div className="nova-scrollbar max-h-[520px] space-y-3 overflow-y-auto pr-2">
|
||||
{items.map((item) => (
|
||||
<article
|
||||
key={item.id}
|
||||
|
||||
@@ -57,84 +57,98 @@ export default function RecommendedCreators() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
|
||||
<div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
|
||||
<div className="flex items-start justify-between gap-4 px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Community</p>
|
||||
<h2 className="mt-2 text-xl font-semibold text-white">Recommended Creators</h2>
|
||||
<p className="mt-2 max-w-md text-sm leading-6 text-slate-300">
|
||||
Strong accounts you are not following yet, selected to help you improve your feed and discover new audiences.
|
||||
<h2 className="mt-1 text-xl font-semibold text-white">Recommended Creators</h2>
|
||||
<p className="mt-1.5 text-sm leading-6 text-slate-400">
|
||||
Strong accounts you are not following yet.
|
||||
</p>
|
||||
</div>
|
||||
<a className="inline-flex items-center justify-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15 sm:justify-start" href="/creators/top">
|
||||
<a
|
||||
className="mt-1 inline-flex shrink-0 items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
|
||||
href="/creators/top"
|
||||
>
|
||||
See all
|
||||
<i className="fa-solid fa-arrow-right text-[10px]" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{loading ? <p className="text-sm text-slate-400">Loading creators...</p> : null}
|
||||
{error ? <p className="mb-4 text-sm text-rose-300">{error}</p> : null}
|
||||
|
||||
{!loading && items.length === 0 ? (
|
||||
<div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
|
||||
<p className="font-medium text-white">No creator recommendations right now.</p>
|
||||
<p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{items.map((creator) => (
|
||||
<article
|
||||
key={creator.id}
|
||||
className="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.04] p-4 transition hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/[0.06] sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<a href={creator.url || '#'} className="flex min-w-0 items-center gap-4">
|
||||
<img
|
||||
src={creator.avatar || '/images/default-avatar.png'}
|
||||
alt={creator.username || creator.name || 'Creator'}
|
||||
className="h-12 w-12 rounded-2xl border border-white/10 object-cover"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="truncate text-sm font-semibold text-white">
|
||||
{creator.username ? `@${creator.username}` : creator.name}
|
||||
</p>
|
||||
<span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wide text-sky-100">
|
||||
Suggested
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<LevelBadge level={creator.level} rank={creator.rank} compact />
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-400">
|
||||
<span>{Number(creator.followers_count || 0).toLocaleString()} followers</span>
|
||||
<span>{Number(creator.uploads_count || 0).toLocaleString()} uploads</span>
|
||||
</div>
|
||||
<div className="px-5 pb-5 sm:px-6 sm:pb-6">
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 rounded-2xl border border-white/6 bg-white/[0.03] p-3">
|
||||
<div className="h-11 w-11 shrink-0 animate-pulse rounded-2xl bg-white/8" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-3 w-28 animate-pulse rounded-full bg-white/8" />
|
||||
<div className="h-2.5 w-20 animate-pulse rounded-full bg-white/5" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center sm:self-auto">
|
||||
<a
|
||||
href={creator.url || '#'}
|
||||
className="inline-flex items-center justify-center rounded-full border border-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:border-white/20 hover:bg-white/5"
|
||||
>
|
||||
View profile
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleFollow(creator)}
|
||||
disabled={busyId === creator.id || !creator.username}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3.5 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/15 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
|
||||
Follow
|
||||
</button>
|
||||
<div className="h-8 w-16 animate-pulse rounded-full bg-white/5" />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{error ? <p className="mb-3 text-sm text-rose-300">{error}</p> : null}
|
||||
|
||||
{!loading && items.length === 0 ? (
|
||||
<div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
|
||||
<p className="font-medium text-white">No creator recommendations right now.</p>
|
||||
<p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length > 0 ? (
|
||||
<ul className="space-y-2.5">
|
||||
{items.map((creator) => (
|
||||
<li key={creator.id}>
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-white/8 bg-white/[0.03] p-3 transition hover:border-white/14 hover:bg-white/[0.05]">
|
||||
{/* Avatar */}
|
||||
<a href={creator.url || '#'} className="shrink-0" tabIndex={-1} aria-hidden="true">
|
||||
<img
|
||||
src={creator.avatar || '/images/default-avatar.png'}
|
||||
alt={creator.username || creator.name || 'Creator'}
|
||||
className="h-11 w-11 rounded-2xl border border-white/10 object-cover"
|
||||
/>
|
||||
</a>
|
||||
|
||||
{/* Info */}
|
||||
<a href={creator.url || '#'} className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="truncate text-sm font-semibold text-white">
|
||||
{creator.username ? `@${creator.username}` : creator.name}
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2 py-0.5 text-[9px] font-medium uppercase tracking-wide text-sky-200">
|
||||
Suggested
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2">
|
||||
<LevelBadge level={creator.level} rank={creator.rank} compact />
|
||||
<span className="text-[11px] text-slate-500">
|
||||
{Number(creator.followers_count || 0).toLocaleString()} followers
|
||||
{creator.uploads_count ? ` · ${Number(creator.uploads_count).toLocaleString()} uploads` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Follow button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleFollow(creator)}
|
||||
disabled={busyId === creator.id || !creator.username}
|
||||
className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/18 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,37 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import LevelBadge from '../../components/xp/LevelBadge'
|
||||
|
||||
function ScrollBtn({ direction, onClick }) {
|
||||
const isLeft = direction === 'left'
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
aria-label={`Scroll ${direction}`}
|
||||
className={[
|
||||
'absolute top-1/2 z-30 -translate-y-1/2 hidden lg:flex h-9 w-9 items-center justify-center',
|
||||
'rounded-full bg-black/60 text-white ring-1 ring-white/12 backdrop-blur-md',
|
||||
'transition hover:bg-black/80 hover:ring-white/20',
|
||||
isLeft ? 'left-1' : 'right-1',
|
||||
].join(' ')}
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
|
||||
{isLeft
|
||||
? <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
|
||||
: <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />}
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function TrendingArtworks() {
|
||||
const [items, setItems] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const scrollRef = useRef(null)
|
||||
const touchStartRef = useRef({ x: 0, y: 0 })
|
||||
const draggedRef = useRef(false)
|
||||
const suppressClickRef = useRef(false)
|
||||
const suppressTimerRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
@@ -28,51 +56,111 @@ export default function TrendingArtworks() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
const scroll = useCallback((dir) => {
|
||||
const el = scrollRef.current
|
||||
if (!el) return
|
||||
el.scrollBy({ left: dir === 'left' ? -320 : 320, behavior: 'smooth' })
|
||||
}, [])
|
||||
|
||||
const onTouchStart = useCallback((e) => {
|
||||
if (!e.touches?.length) return
|
||||
touchStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }
|
||||
draggedRef.current = false
|
||||
}, [])
|
||||
|
||||
const onTouchMove = useCallback((e) => {
|
||||
if (!e.touches?.length) return
|
||||
const dx = Math.abs(e.touches[0].clientX - touchStartRef.current.x)
|
||||
const dy = Math.abs(e.touches[0].clientY - touchStartRef.current.y)
|
||||
if (dx > 10 && dx > dy) draggedRef.current = true
|
||||
}, [])
|
||||
|
||||
const onTouchEnd = useCallback(() => {
|
||||
if (!draggedRef.current) return
|
||||
suppressClickRef.current = true
|
||||
clearTimeout(suppressTimerRef.current)
|
||||
suppressTimerRef.current = setTimeout(() => { suppressClickRef.current = false }, 260)
|
||||
}, [])
|
||||
|
||||
const onClickCapture = useCallback((e) => {
|
||||
if (!suppressClickRef.current) return
|
||||
const link = e.target?.closest?.('a')
|
||||
if (link) { e.preventDefault(); e.stopPropagation() }
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Trending Artworks</h2>
|
||||
<a className="text-xs text-cyan-300 hover:text-cyan-200" href="/discover/trending">
|
||||
<section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
|
||||
<div className="flex items-center justify-between px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Discover</p>
|
||||
<h2 className="mt-1 text-xl font-semibold text-white">Trending Artworks</h2>
|
||||
</div>
|
||||
<a
|
||||
className="inline-flex items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
|
||||
href="/discover/trending"
|
||||
>
|
||||
Explore more
|
||||
<i className="fa-solid fa-arrow-right text-[10px]" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{loading ? <p className="text-sm text-gray-400">Loading trending artworks...</p> : null}
|
||||
{loading ? (
|
||||
<div className="flex gap-3 overflow-hidden px-5 pb-5 sm:px-6 sm:pb-6">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="h-52 w-36 shrink-0 animate-pulse rounded-2xl bg-white/5" />
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">No trending artworks available.</p>
|
||||
<p className="px-5 pb-5 text-sm text-slate-400 sm:px-6 sm:pb-6">No trending artworks available.</p>
|
||||
) : null}
|
||||
|
||||
{!loading && items.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{items.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-900/70 transition hover:scale-[1.02] hover:border-cyan-500/40"
|
||||
>
|
||||
<img
|
||||
src={item.thumbnail || '/images/placeholder.jpg'}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
className="h-28 w-full object-cover sm:h-32"
|
||||
/>
|
||||
<div className="p-2">
|
||||
<p className="line-clamp-1 text-sm font-semibold text-white">{item.title}</p>
|
||||
{item.creator ? (
|
||||
<div className="mt-1 flex items-center justify-between gap-2">
|
||||
<span className="truncate text-xs text-gray-400">
|
||||
{item.creator.username ? `@${item.creator.username}` : item.creator.name}
|
||||
</span>
|
||||
<LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
|
||||
<div className="relative pb-5 sm:pb-6" data-nav-swipe-ignore="1">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r from-[#08111c] to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l from-[#08111c] to-transparent" />
|
||||
<ScrollBtn direction="left" onClick={() => scroll('left')} />
|
||||
<ScrollBtn direction="right" onClick={() => scroll('right')} />
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onTouchStart={onTouchStart}
|
||||
onTouchMove={onTouchMove}
|
||||
onTouchEnd={onTouchEnd}
|
||||
onClickCapture={onClickCapture}
|
||||
className="flex gap-3 overflow-x-auto px-5 snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:px-6"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
className="group relative w-36 shrink-0 snap-start overflow-hidden rounded-2xl ring-1 ring-white/8 transition hover:-translate-y-0.5 hover:ring-sky-400/25 sm:w-40"
|
||||
>
|
||||
<div className="relative aspect-[3/4] bg-neutral-900">
|
||||
<div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-br from-white/8 via-transparent to-transparent" />
|
||||
<img
|
||||
src={item.thumbnail || '/images/placeholder.jpg'}
|
||||
alt={item.title}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/85 via-black/55 to-transparent p-3">
|
||||
<p className="line-clamp-2 text-xs font-semibold leading-snug text-white">{item.title}</p>
|
||||
{item.creator ? (
|
||||
<>
|
||||
<p className="mt-1 truncate text-[11px] text-white/65">
|
||||
{item.creator.username ? `@${item.creator.username}` : item.creator.name}
|
||||
</p>
|
||||
<div className="mt-1.5">
|
||||
<LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<p className="mt-1 text-xs text-gray-400">
|
||||
{item.likes} likes • {item.views} views
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
@@ -5,7 +5,11 @@ import SearchBar from './Search/SearchBar'
|
||||
function mount() {
|
||||
const container = document.getElementById('topbar-search-root')
|
||||
if (!container) return
|
||||
createRoot(container).render(<SearchBar />)
|
||||
|
||||
const initialIntent = window.__sbSearchIntent ?? null
|
||||
window.__sbSearchIntent = null
|
||||
|
||||
createRoot(container).render(<SearchBar initialIntent={initialIntent} />)
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
|
||||
18
resources/js/entry-similar-artworks-header.jsx
Normal file
18
resources/js/entry-similar-artworks-header.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import SimilarArtworksHeader from './Pages/Artwork/SimilarArtworksHeader'
|
||||
|
||||
const mountEl = document.getElementById('similar-artworks-header-root')
|
||||
|
||||
if (mountEl) {
|
||||
let props = {}
|
||||
|
||||
try {
|
||||
const propsEl = document.getElementById('similar-artworks-header-props')
|
||||
props = propsEl ? JSON.parse(propsEl.textContent || '{}') : {}
|
||||
} catch {
|
||||
props = {}
|
||||
}
|
||||
|
||||
createRoot(mountEl).render(<SimilarArtworksHeader {...props} />)
|
||||
}
|
||||
24
resources/js/moderation.jsx
Normal file
24
resources/js/moderation.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import './bootstrap'
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { createInertiaApp } from '@inertiajs/react'
|
||||
|
||||
const pages = {
|
||||
'Moderation/ArtworkMaturityQueue': () => import('./Pages/Moderation/ArtworkMaturityQueue.jsx').then((module) => module.default),
|
||||
}
|
||||
|
||||
createInertiaApp({
|
||||
resolve: (name) => {
|
||||
const page = pages[name]
|
||||
|
||||
if (!page) {
|
||||
throw new Error(`Unknown moderation page: ./Pages/${name}.jsx`)
|
||||
}
|
||||
|
||||
return page()
|
||||
},
|
||||
setup({ el, App, props }) {
|
||||
const root = createRoot(el)
|
||||
root.render(<App {...props} />)
|
||||
},
|
||||
})
|
||||
@@ -2,7 +2,11 @@ import './bootstrap'
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { createInertiaApp } from '@inertiajs/react'
|
||||
const pages = import.meta.glob('./Pages/Studio/**/*.jsx')
|
||||
const pages = import.meta.glob([
|
||||
'./Pages/Studio/**/*.jsx',
|
||||
'!./Pages/Studio/**/__tests__/**',
|
||||
'!./Pages/Studio/**/*.test.jsx',
|
||||
])
|
||||
|
||||
function resolvePage(name) {
|
||||
const path = `./Pages/${name}.jsx`
|
||||
|
||||
46
resources/js/utils/scheduleCountdown.js
Normal file
46
resources/js/utils/scheduleCountdown.js
Normal file
@@ -0,0 +1,46 @@
|
||||
export function formatScheduledDate(value, options = {}) {
|
||||
if (!value) return 'Not scheduled'
|
||||
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return 'Not scheduled'
|
||||
|
||||
try {
|
||||
return date.toLocaleString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
...(options.includeYear === false ? {} : { year: 'numeric' }),
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
...(options.timeZone ? { timeZone: options.timeZone } : {}),
|
||||
})
|
||||
} catch {
|
||||
return date.toLocaleString()
|
||||
}
|
||||
}
|
||||
|
||||
export function formatReleaseCountdown(value, nowMs = Date.now()) {
|
||||
if (!value) return 'Not scheduled'
|
||||
|
||||
const releaseDate = new Date(value)
|
||||
if (Number.isNaN(releaseDate.getTime())) return 'Not scheduled'
|
||||
|
||||
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(' ')}`
|
||||
}
|
||||
Reference in New Issue
Block a user