feat: increase gallery grid from 4 to 5 columns per row on desktopfeat: increase gallery grid from 4 to 5 columns per row on desktop

resources/js/components/artwork/ArtworkAwards.jsx

@@ -0,0 +1,191 @@
+import React, { useState, useCallback } from 'react'
+
+const MEDALS = [
+  { key: 'gold',   label: 'Gold',   emoji: '🥇', weight: 3 },
+  { key: 'silver', label: 'Silver', emoji: '🥈', weight: 2 },
+  { key: 'bronze', label: 'Bronze', emoji: '🥉', weight: 1 },
+]
+
+export default function ArtworkAwards({ artwork, initialAwards = null, isAuthenticated = false }) {
+  const artworkId = artwork?.id
+
+  const [awards, setAwards] = useState({
+    gold:   initialAwards?.gold   ?? 0,
+    silver: initialAwards?.silver ?? 0,
+    bronze: initialAwards?.bronze ?? 0,
+    score:  initialAwards?.score  ?? 0,
+  })
+  const [viewerAward, setViewerAward] = useState(initialAwards?.viewer_award ?? null)
+  const [loading, setLoading] = useState(null) // which medal is pending
+  const [error, setError] = useState(null)
+
+  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`, {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': csrfToken || '',
+        'Accept': 'application/json',
+      },
+      credentials: 'same-origin',
+      body: body ? JSON.stringify(body) : undefined,
+    })
+
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      throw new Error(data?.message || data?.errors?.medal?.[0] || 'Request failed')
+    }
+
+    return res.json()
+  }, [artworkId, csrfToken])
+
+  const applyServerResponse = useCallback((data) => {
+    if (data?.awards) {
+      setAwards({
+        gold:   data.awards.gold   ?? 0,
+        silver: data.awards.silver ?? 0,
+        bronze: data.awards.bronze ?? 0,
+        score:  data.awards.score  ?? 0,
+      })
+    }
+    setViewerAward(data?.viewer_award ?? null)
+  }, [])
+
+  const handleMedalClick = useCallback(async (medal) => {
+    if (!isAuthenticated) return
+    if (loading) return
+
+    setError(null)
+
+    // Optimistic update
+    const prevAwards   = { ...awards }
+    const prevViewer   = viewerAward
+
+    const delta = (m) => {
+      const weight = MEDALS.find(x => x.key === m)?.weight ?? 0
+      return weight
+    }
+
+    if (viewerAward === medal) {
+      // Undo: remove award
+      setAwards(a => ({
+        ...a,
+        [medal]: Math.max(0, a[medal] - 1),
+        score:   Math.max(0, a.score - delta(medal)),
+      }))
+      setViewerAward(null)
+
+      setLoading(medal)
+      try {
+        const data = await apiFetch('DELETE')
+        applyServerResponse(data)
+      } catch (e) {
+        setAwards(prevAwards)
+        setViewerAward(prevViewer)
+        setError(e.message)
+      } 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)
+      }
+    }
+  }, [isAuthenticated, loading, awards, viewerAward, apiFetch, applyServerResponse])
+
+  return (
+    <div className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
+      <h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Awards</h2>
+
+      {error && (
+        <p className="mt-2 text-xs text-red-400">{error}</p>
+      )}
+
+      <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 bg-accent/10 font-semibold text-accent'
+                  : 'border-nova-600 text-white hover:bg-nova-800',
+                (!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>
+          )
+        })}
+      </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>
+  )
+}