feat: artwork page carousels, recommendations, avatars & fixes

- Infinite loop carousels for Similar Artworks & Trending rails
- Mouse wheel horizontal scrolling on both carousels
- Author avatar shown on hover in RailCard (similar + trending)
- Removed "View" badge from RailCard hover overlay
- Added `id` to Meilisearch filterable attributes
- Auto-prepend Scout prefix in meilisearch:configure-index command
- Added author name + avatar to Similar Artworks API response
- Added avatar_url to ArtworkListResource author object
- Added direct /art/{id}/{slug} URL to ArtworkListResource
- Fixed race condition: Similar Artworks no longer briefly shows trending items
- Fixed user_profiles eager load (user_id primary key, not id)
- Bumped /api/art/{id}/similar rate limit to 300/min
- Removed decorative heart icons from tag pills
- Moved ReactionBar under artwork description

resources/js/Pages/ArtworkPage.jsx

@@ -1,18 +1,19 @@
-import React, { useState, useCallback } 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'
 import ArtworkMeta from '../components/artwork/ArtworkMeta'
-import ArtworkActions from '../components/artwork/ArtworkActions'
 import ArtworkAwards from '../components/artwork/ArtworkAwards'
-import ArtworkStats from '../components/artwork/ArtworkStats'
 import ArtworkTags from '../components/artwork/ArtworkTags'
-import ArtworkAuthor from '../components/artwork/ArtworkAuthor'
-import ArtworkRelated from '../components/artwork/ArtworkRelated'
 import ArtworkDescription from '../components/artwork/ArtworkDescription'
 import ArtworkComments from '../components/artwork/ArtworkComments'
-import ArtworkReactions from '../components/artwork/ArtworkReactions'
+import ArtworkActionBar from '../components/artwork/ArtworkActionBar'
+import ArtworkDetailsPanel from '../components/artwork/ArtworkDetailsPanel'
+import CreatorSpotlight from '../components/artwork/CreatorSpotlight'
+import ArtworkRecommendationsRails from '../components/artwork/ArtworkRecommendationsRails'
 import ArtworkNavigator from '../components/viewer/ArtworkNavigator'
 import ArtworkViewer from '../components/viewer/ArtworkViewer'
+import ReactionBar from '../components/comments/ReactionBar'
 
 function ArtworkPage({ artwork: initialArtwork, related: initialRelated, presentMd: initialMd, presentLg: initialLg, presentXl: initialXl, presentSq: initialSq, canonicalUrl: initialCanonical, isAuthenticated = false, comments: initialComments = [] }) {
   const [viewerOpen, setViewerOpen] = useState(false)
@@ -43,6 +44,16 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
   // Nav arrow state — populated by ArtworkNavigator once neighbors resolve
   const [navState, setNavState] = useState({ hasPrev: false, hasNext: false, navigatePrev: null, navigateNext: null })
 
+  // Artwork-level reactions
+  const [reactionTotals, setReactionTotals] = useState(null)
+  useEffect(() => {
+    if (!artwork?.id) return
+    axios
+      .get(`/api/artworks/${artwork.id}/reactions`)
+      .then(({ data }) => setReactionTotals(data.totals ?? {}))
+      .catch(() => setReactionTotals({}))
+  }, [artwork?.id])
+
   /**
    * Called by ArtworkNavigator after a successful no-reload navigation.
    * data = ArtworkResource JSON from /api/artworks/{id}/page
@@ -66,50 +77,83 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
 
   return (
     <>
-      <main className="mx-auto w-full max-w-screen-xl px-4 pb-24 pt-10 sm:px-6 lg:px-8 lg:pb-12">
-        <ArtworkHero
-          artwork={artwork}
-          presentMd={presentMd}
-          presentLg={presentLg}
-          presentXl={presentXl}
-          onOpenViewer={openViewer}
-          hasPrev={navState.hasPrev}
-          hasNext={navState.hasNext}
-          onPrev={navState.navigatePrev}
-          onNext={navState.navigateNext}
-        />
-
-        <div className="mt-6 space-y-4 lg:hidden">
-          <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
-          <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} mobilePriority onStatsChange={handleStatsChange} />
-          <ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
+      <main className="pb-24 pt-6 lg:pb-12 lg:pt-8">
+        {/* ── Hero ────────────────────────────────────────────────────── */}
+        <div id="artwork-hero-anchor" className="mx-auto w-full max-w-screen-2xl px-3 sm:px-6 lg:px-8">
+          <ArtworkHero
+            artwork={artwork}
+            presentMd={presentMd}
+            presentLg={presentLg}
+            presentXl={presentXl}
+            onOpenViewer={openViewer}
+            hasPrev={navState.hasPrev}
+            hasNext={navState.hasNext}
+            onPrev={navState.navigatePrev}
+            onNext={navState.navigateNext}
+          />
         </div>
 
-        <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
-          <div className="space-y-6 lg:col-span-2">
-            <ArtworkMeta artwork={artwork} />
-            <ArtworkStats artwork={artwork} stats={liveStats} />
-            <ArtworkTags artwork={artwork} />
-            <ArtworkDescription artwork={artwork} />
-            <ArtworkReactions artworkId={artwork.id} isLoggedIn={isAuthenticated} />
-            <ArtworkComments
-              artworkId={artwork.id}
-              comments={comments}
-              isLoggedIn={isAuthenticated}
-              loginUrl="/login"
-            />
-          </div>
+        {/* ── Centered action bar with stat counts ────────────────────── */}
+        <div className="mx-auto mt-5 w-full max-w-screen-xl px-4 sm:px-6 lg:px-8">
+          <ArtworkActionBar
+            artwork={artwork}
+            stats={liveStats}
+            canonicalUrl={canonicalUrl}
+            onStatsChange={handleStatsChange}
+          />
+        </div>
 
-          <aside className="hidden space-y-6 lg:block">
-            <div className="sticky top-24 space-y-4">
-              <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
-              <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} onStatsChange={handleStatsChange} />
-              <ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
+        {/* ── Two-column content ──────────────────────────────────────── */}
+        <div className="mx-auto mt-8 w-full max-w-screen-xl px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_340px]">
+            {/* LEFT COLUMN — main content */}
+            <div className="relative z-10 min-w-0 space-y-5">
+              {/* Title + author + breadcrumbs */}
+              <ArtworkMeta artwork={artwork} />
+
+              {/* Description */}
+              <ArtworkDescription artwork={artwork} />
+
+              {/* Artwork reactions */}
+              {reactionTotals !== null && (
+                <ReactionBar
+                  entityType="artwork"
+                  entityId={artwork.id}
+                  initialTotals={reactionTotals}
+                  isLoggedIn={isAuthenticated}
+                />
+              )}
+
+              {/* Tags & categories */}
+              <ArtworkTags artwork={artwork} />
+
+              {/* Comments */}
+              <ArtworkComments
+                artworkId={artwork.id}
+                comments={comments}
+                isLoggedIn={isAuthenticated}
+                loginUrl="/login"
+              />
             </div>
-          </aside>
+
+            {/* RIGHT COLUMN — sidebar */}
+            <aside className="space-y-5 lg:sticky lg:top-6 lg:self-start">
+              {/* Creator card */}
+              <CreatorSpotlight artwork={artwork} presentSq={presentSq} related={related} />
+
+              {/* Details (collapsible) */}
+              <ArtworkDetailsPanel artwork={artwork} stats={liveStats} />
+
+              {/* Awards */}
+              <ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
+            </aside>
+          </div>
         </div>
 
-        <ArtworkRelated related={related} />
+        {/* ── Full-width recommendation rails ─────────────────────────── */}
+        <div className="mt-14 w-full max-w-screen-2xl mx-auto">
+          <ArtworkRecommendationsRails artwork={artwork} related={related} />
+        </div>
       </main>
 
       {/* Artwork navigator — prev/next arrows, keyboard, swipe, no page reload */}