feat: ship creator journey v2 and profile updates

resources/js/components/artwork/ArtworkActionBar.jsx

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

resources/js/components/artwork/ArtworkActions.jsx

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

resources/js/components/artwork/ArtworkAwards.jsx

@@ -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>
+    </>
   )
 }

resources/js/components/artwork/ArtworkAwards.test.jsx

@@ -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()
+  })
+})

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>

resources/js/components/artwork/ArtworkEvolutionPanel.jsx

@@ -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)} />
+    </>
+  )
+}

resources/js/components/artwork/ArtworkEvolutionSearchPicker.jsx

@@ -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>
+  )
+}

resources/js/components/artwork/ArtworkGallery.jsx

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

resources/js/components/artwork/ArtworkRecommendationsRails.jsx

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

resources/js/components/artwork/ArtworkShareButton.jsx

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