Wire admin studio SSR and search infrastructure

resources/js/components/artwork/ArtworkRecommendationsRails.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef, useCallback } from 'react'
+import React, { useEffect, useMemo, useRef, useCallback } from 'react'
 
 const FALLBACK = 'https://files.skinbase.org/default/missing_md.webp'
 const AVATAR_FALLBACK = 'https://files.skinbase.org/default/avatar_default.webp'
@@ -77,7 +77,7 @@ function RailCard({ item }) {
           <img
             src={item.thumb || FALLBACK}
             srcSet={item.thumbSrcSet || undefined}
-            sizes="220px"
+            sizes="(min-width: 1280px) 210px, (min-width: 640px) 220px, 240px"
             alt={item.title || 'Artwork'}
             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"
@@ -339,74 +339,18 @@ function Rail({ title, emoji, items, seeAllHref }) {
 
 /* ── Main export ─────────────────────────────────────────────── */
 
-export default function ArtworkRecommendationsRails({ artwork, related = [] }) {
-  const [similarApiItems, setSimilarApiItems] = useState([])
-  const [similarLoaded, setSimilarLoaded] = useState(false)
-  const [trendingItems, setTrendingItems] = useState([])
-
+export default function ArtworkRecommendationsRails({ artwork, related = [], similarApiData = [], trendingData = [] }) {
   const relatedCards = useMemo(() => {
     return dedupeByUrl((Array.isArray(related) ? related : []).map(normalizeRelated).filter(Boolean))
   }, [related])
 
-  useEffect(() => {
-    let isCancelled = false
+  const similarApiItems = useMemo(() => {
+    return dedupeByUrl((Array.isArray(similarApiData) ? similarApiData : []).map(normalizeSimilar).filter(Boolean))
+  }, [similarApiData])
 
-    const loadSimilar = async () => {
-      if (!artwork?.id) {
-        setSimilarApiItems([])
-        setSimilarLoaded(true)
-        return
-      }
-
-      try {
-        const response = await fetch(`/api/art/${artwork.id}/similar-ai`, { credentials: 'same-origin' })
-        if (!response.ok) throw new Error('similar fetch failed')
-        const payload = await response.json()
-        const items = dedupeByUrl((payload?.data || []).map(normalizeSimilar).filter(Boolean))
-        if (!isCancelled) {
-          setSimilarApiItems(items)
-          setSimilarLoaded(true)
-        }
-      } catch {
-        if (!isCancelled) {
-          setSimilarApiItems([])
-          setSimilarLoaded(true)
-        }
-      }
-    }
-
-    loadSimilar()
-    return () => {
-      isCancelled = true
-    }
-  }, [artwork?.id])
-
-  useEffect(() => {
-    let isCancelled = false
-
-    const loadTrending = async () => {
-      const categoryId = artwork?.categories?.[0]?.id
-      if (!categoryId) {
-        setTrendingItems([])
-        return
-      }
-
-      try {
-        const response = await fetch(`/api/rank/category/${categoryId}?type=trending`, { credentials: 'same-origin' })
-        if (!response.ok) throw new Error('trending fetch failed')
-        const payload = await response.json()
-        const items = dedupeByUrl((payload?.data || []).map(normalizeRankItem).filter(Boolean))
-        if (!isCancelled) setTrendingItems(items)
-      } catch {
-        if (!isCancelled) setTrendingItems([])
-      }
-    }
-
-    loadTrending()
-    return () => {
-      isCancelled = true
-    }
-  }, [artwork?.categories])
+  const trendingItems = useMemo(() => {
+    return dedupeByUrl((Array.isArray(trendingData) ? trendingData : []).map(normalizeRankItem).filter(Boolean))
+  }, [trendingData])
 
   const authorName = String(artwork?.user?.name || artwork?.user?.username || '').trim().toLowerCase()
 
@@ -415,11 +359,10 @@ export default function ArtworkRecommendationsRails({ artwork, related = [] }) {
   }, [relatedCards, authorName])
 
   const similarItems = useMemo(() => {
-    if (!similarLoaded) return []
     if (similarApiItems.length > 0) return similarApiItems.slice(0, 12)
     if (tagBasedFallback.length > 0) return tagBasedFallback.slice(0, 12)
     return trendingItems.slice(0, 12)
-  }, [similarLoaded, similarApiItems, tagBasedFallback, trendingItems])
+  }, [similarApiItems, tagBasedFallback, trendingItems])
 
   const trendingRailItems = useMemo(() => trendingItems.slice(0, 12), [trendingItems])
 
@@ -428,11 +371,9 @@ export default function ArtworkRecommendationsRails({ artwork, related = [] }) {
   const categoryName = artwork?.categories?.[0]?.name
   const trendingLabel = categoryName
     ? `Trending in ${categoryName}`
-    : 'Trending'
+    : 'Trending on Skinbase'
 
-  const trendingHref = categoryName
-    ? `/discover/trending`
-    : '/discover/trending'
+  const trendingHref = '/discover/trending'
 
   const similarHref = artwork?.id ? `/art/${artwork.id}/similar` : null