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

resources/js/components/artwork/ArtworkBreadcrumbs.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+
+function Separator() {
+  return (
+    <svg
+      className="h-3 w-3 flex-shrink-0 text-white/15"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+    </svg>
+  )
+}
+
+function Crumb({ href, children, current = false }) {
+  const base = 'text-xs leading-none truncate max-w-[180px] sm:max-w-[260px]'
+  if (current) {
+    return (
+      <span
+        className={`${base} text-white/30`}
+        aria-current="page"
+      >
+        {children}
+      </span>
+    )
+  }
+  return (
+    <a
+      href={href}
+      className={`${base} text-white/30 hover:text-white/60 transition-colors duration-150`}
+    >
+      {children}
+    </a>
+  )
+}
+
+export default function ArtworkBreadcrumbs({ artwork }) {
+  if (!artwork) return null
+
+  // Use the first category for the content-type + category crumbs
+  const firstCategory = artwork.categories?.[0] ?? null
+  const contentTypeSlug = firstCategory?.content_type_slug || null
+  const contentTypeName = contentTypeSlug
+    ? contentTypeSlug.charAt(0).toUpperCase() + contentTypeSlug.slice(1)
+    : null
+
+  const categorySlug = firstCategory?.slug || null
+  const categoryName = firstCategory?.name || null
+  const categoryUrl = contentTypeSlug && categorySlug
+    ? `/${contentTypeSlug}/${categorySlug}`
+    : null
+
+  return (
+    <nav aria-label="Breadcrumb" className="mt-1.5 mb-0">
+      <ol className="flex flex-wrap items-center gap-x-1 gap-y-1">
+        {/* Home */}
+        <li className="flex items-center gap-x-1.5">
+          <Crumb href="/">Home</Crumb>
+        </li>
+
+        {/* Content type e.g. Photography */}
+        {contentTypeSlug && (
+          <>
+            <li className="flex items-center"><Separator /></li>
+            <li className="flex items-center gap-x-1.5">
+              <Crumb href={`/${contentTypeSlug}`}>{contentTypeName}</Crumb>
+            </li>
+          </>
+        )}
+
+        {/* Category e.g. Landscapes */}
+        {categoryUrl && (
+          <>
+            <li className="flex items-center"><Separator /></li>
+            <li className="flex items-center gap-x-1.5">
+              <Crumb href={categoryUrl}>{categoryName}</Crumb>
+            </li>
+          </>
+        )}
+
+        {/* Current artwork title — omitted: shown as h1 above */}
+      </ol>
+    </nav>
+  )
+}

resources/js/components/artwork/ArtworkComments.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+
+function timeAgo(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 365) return `${days}d ago`
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function Avatar({ user, size = 36 }) {
+  if (user?.avatar_url) {
+    return (
+      <img
+        src={user.avatar_url}
+        alt={user.name || user.username || ''}
+        width={size}
+        height={size}
+        className="rounded-full object-cover shrink-0"
+        style={{ width: size, height: size }}
+        loading="lazy"
+      />
+    )
+  }
+  const initials = (user?.name || user?.username || '?').slice(0, 1).toUpperCase()
+  return (
+    <span
+      className="flex items-center justify-center rounded-full bg-neutral-700 text-sm font-bold text-white shrink-0"
+      style={{ width: size, height: size }}
+    >
+      {initials}
+    </span>
+  )
+}
+
+export default function ArtworkComments({ comments = [] }) {
+  if (!comments || comments.length === 0) return null
+
+  return (
+    <section aria-label="Comments">
+      <h2 className="text-base font-semibold text-white mb-4">
+        Comments{' '}
+        <span className="text-neutral-500 font-normal">({comments.length})</span>
+      </h2>
+
+      <ul className="space-y-5">
+        {comments.map((comment) => (
+          <li key={comment.id} className="flex gap-3">
+            {comment.user?.profile_url ? (
+              <a href={comment.user.profile_url} className="shrink-0 mt-0.5">
+                <Avatar user={comment.user} size={36} />
+              </a>
+            ) : (
+              <span className="shrink-0 mt-0.5">
+                <Avatar user={comment.user} size={36} />
+              </span>
+            )}
+
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline gap-2 flex-wrap">
+                {comment.user?.profile_url ? (
+                  <a
+                    href={comment.user.profile_url}
+                    className="text-sm font-medium text-white hover:underline"
+                  >
+                    {comment.user.name || comment.user.username || 'Member'}
+                  </a>
+                ) : (
+                  <span className="text-sm font-medium text-white">
+                    {comment.user?.name || comment.user?.username || 'Member'}
+                  </span>
+                )}
+                <time
+                  dateTime={comment.created_at}
+                  title={comment.created_at ? new Date(comment.created_at).toLocaleString() : ''}
+                  className="text-xs text-neutral-500"
+                >
+                  {timeAgo(comment.created_at)}
+                </time>
+              </div>
+
+              <p className="mt-1 text-sm text-neutral-300 whitespace-pre-line break-words leading-relaxed">
+                {comment.content}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

resources/js/components/artwork/ArtworkHero.jsx

@@ -4,7 +4,7 @@ const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
 const FALLBACK_LG = 'https://files.skinbase.org/default/missing_lg.webp'
 const FALLBACK_XL = 'https://files.skinbase.org/default/missing_xl.webp'
 
-export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }) {
+export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl, onOpenViewer, hasPrev, hasNext, onPrev, onNext }) {
   const [isLoaded, setIsLoaded] = useState(false)
 
   const mdSource = presentMd?.url || artwork?.thumbs?.md?.url || null
@@ -23,24 +23,20 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }
   return (
     <figure className="w-full">
       <div className="relative mx-auto w-full max-w-[1280px]">
-        {blurBackdropSrc && (
-          <div className="pointer-events-none absolute inset-0 -z-10 scale-105 overflow-hidden rounded-2xl">
-            <img
-              src={blurBackdropSrc}
-              alt=""
-              aria-hidden="true"
-              className="h-full w-full object-cover opacity-35 blur-2xl"
-              loading="lazy"
-              decoding="async"
-            />
-          </div>
-        )}
+
 
         {hasRealArtworkImage && (
-          <div className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-b from-nova-700/20 via-nova-900/15 to-deep/40" />
+          <div className="absolute inset-0 -z-10" />
         )}
 
-        <div className="relative w-full aspect-video rounded-xl overflow-hidden bg-deep shadow-2xl ring-1 ring-nova-600/30">
+        <div
+          className={`relative w-full aspect-video overflow-hidden ${onOpenViewer ? 'cursor-zoom-in' : ''}`}
+          onClick={onOpenViewer}
+          role={onOpenViewer ? 'button' : undefined}
+          aria-label={onOpenViewer ? 'View fullscreen' : undefined}
+          tabIndex={onOpenViewer ? 0 : undefined}
+          onKeyDown={onOpenViewer ? (e) => e.key === 'Enter' && onOpenViewer() : undefined}
+        >
           <img
             src={md}
             alt={artwork?.title ?? 'Artwork'}
@@ -62,6 +58,47 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }
               event.currentTarget.src = FALLBACK_LG
             }}
           />
+
+          {/* Prev arrow */}
+          {hasPrev && (
+            <button
+              type="button"
+              aria-label="Previous artwork"
+              onClick={(e) => { e.stopPropagation(); onPrev?.(); }}
+              className="absolute left-3 top-1/2 -translate-y-1/2 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-black/50 text-white/70 backdrop-blur-sm ring-1 ring-white/15 shadow-lg opacity-50 hover:opacity-100 focus:opacity-100 transition-opacity duration-150"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+          )}
+
+          {/* Next arrow */}
+          {hasNext && (
+            <button
+              type="button"
+              aria-label="Next artwork"
+              onClick={(e) => { e.stopPropagation(); onNext?.(); }}
+              className="absolute right-3 top-1/2 -translate-y-1/2 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-black/50 text-white/70 backdrop-blur-sm ring-1 ring-white/15 shadow-lg opacity-50 hover:opacity-100 focus:opacity-100 transition-opacity duration-150"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          )}
+
+          {onOpenViewer && (
+            <button
+              type="button"
+              aria-label="View fullscreen"
+              onClick={(e) => { e.stopPropagation(); onOpenViewer(); }}
+              className="absolute bottom-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur-sm ring-1 ring-white/15 opacity-0 hover:opacity-100 focus:opacity-100 [div:hover_&]:opacity-100 transition-opacity duration-150 shadow-lg"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+              </svg>
+            </button>
+          )}
         </div>
 
         {hasRealArtworkImage && (

resources/js/components/artwork/ArtworkMeta.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import ArtworkBreadcrumbs from './ArtworkBreadcrumbs'
 
 export default function ArtworkMeta({ artwork }) {
   const author = artwork?.user?.name || artwork?.user?.username || 'Artist'
@@ -11,7 +12,8 @@ export default function ArtworkMeta({ artwork }) {
   return (
     <div className="rounded-xl border border-nova-700 bg-panel p-5">
       <h1 className="text-xl font-semibold text-white sm:text-2xl">{artwork?.title}</h1>
-      <dl className="mt-4 grid grid-cols-1 gap-3 text-sm text-soft sm:grid-cols-2">
+      <ArtworkBreadcrumbs artwork={artwork} />
+      <dl className="mt-3 grid grid-cols-1 gap-3 text-sm text-soft sm:grid-cols-2">
         <div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
           <dt>Author</dt>
           <dd className="text-white">{author}</dd>

resources/js/components/artwork/ArtworkTags.jsx

@@ -17,7 +17,7 @@ export default function ArtworkTags({ artwork }) {
     const artworkTags = (artwork?.tags || []).map((tag) => ({
       key: `tag-${tag.id || tag.slug}`,
       label: tag.name,
-      href: `/browse/${primaryCategorySlug}/${tag.slug || ''}`,
+      href: `/tag/${tag.slug || ''}`,
     }))
 
     return [...categories, ...artworkTags]