feat: ship creator journey v2 and profile updates

resources/js/components/artwork/ArtworkCard.jsx

@@ -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>