Save workspace changes

resources/js/components/artwork/CreatorSpotlight.jsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react'
+import AuthorBioPopover from './AuthorBioPopover'
 import FollowButton from '../social/FollowButton'
 
 const AVATAR_FALLBACK = 'https://files.skinbase.org/default/missing_sq.webp'
@@ -15,6 +16,9 @@ function toCard(item) {
     id: item?.id || item?.slug || item?.url,
     title: item?.title,
     author: item?.author,
+    authorId: Number(item?.author_id || 0),
+    publisherType: item?.publisher_type || 'user',
+    publisherId: Number(item?.publisher_id || 0),
     url: item?.url,
     thumb: item?.thumb,
     thumbSrcSet: item?.thumb_srcset,
@@ -28,21 +32,33 @@ export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
   const [followersCount, setFollowersCount] = useState(Number(isGroupPublisher ? publisher?.followers_count || 0 : artwork?.user?.followers_count || 0))
 
   const user = artwork?.credits?.primary_author || artwork?.user || {}
+  const primaryAuthor = artwork?.credits?.primary_author || null
+  const bioAuthor = isGroupPublisher ? primaryAuthor : user
   const isOwnArtwork = Number(artwork?.viewer?.id || 0) > 0 && Number(artwork?.viewer?.id) === Number(user.id || 0)
   const authorName = isGroupPublisher ? (publisher?.name || 'Group') : (user.name || user.username || 'Artist')
   const profileUrl = isGroupPublisher ? (publisher?.profile_url || '#') : (user.profile_url || (user.username ? `/@${user.username}` : '#'))
   const avatar = (isGroupPublisher ? publisher?.avatar_url : user.avatar_url) || presentSq?.url || AVATAR_FALLBACK
 
   const creatorItems = useMemo(() => {
+    const currentAuthorId = Number(user?.id || 0)
+    const currentPublisherId = Number(publisher?.id || user?.id || 0)
+
     const filtered = (Array.isArray(related) ? related : []).filter((item) => {
-      const sameAuthor = String(item?.author || '').trim().toLowerCase() === String(authorName || '').trim().toLowerCase()
       const notCurrent = item?.url && item.url !== artwork?.canonical_url
-      return sameAuthor && notCurrent
+
+      if (!notCurrent) {
+        return false
+      }
+
+      if (isGroupPublisher) {
+        return item?.publisher_type === 'group' && Number(item?.publisher_id || 0) === currentPublisherId
+      }
+
+      return Number(item?.author_id || 0) === currentAuthorId
     })
 
-    const source = filtered.length > 0 ? filtered : (Array.isArray(related) ? related : [])
-    return source.slice(0, 12).map(toCard)
-  }, [related, authorName, artwork?.canonical_url])
+    return filtered.slice(0, 12).map(toCard)
+  }, [related, isGroupPublisher, publisher?.id, user?.id, artwork?.canonical_url])
 
   return (
     <>
@@ -62,11 +78,18 @@ export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
             />
           </a>
 
-          <a href={profileUrl} className="mt-3 block text-base font-bold text-white transition-colors hover:text-accent">
-            {authorName}
-          </a>
-          {!isGroupPublisher && user.username && <p className="text-xs text-white/40">@{user.username}</p>}
-          {isGroupPublisher && artwork?.credits?.primary_author ? <p className="text-xs text-white/40">Primary author: {artwork.credits.primary_author.name || artwork.credits.primary_author.username}</p> : null}
+          <div className="relative mt-3 w-full px-10 text-center">
+            <a href={profileUrl} className="block text-base font-bold text-white transition-colors hover:text-accent">
+              {authorName}
+            </a>
+            {!isGroupPublisher && user.username ? <p className="text-xs text-white/40">@{user.username}</p> : null}
+            {isGroupPublisher && primaryAuthor ? <p className="text-xs text-white/40">Primary author: {primaryAuthor.name || primaryAuthor.username}</p> : null}
+            {bioAuthor?.username ? (
+              <span className="absolute right-0 top-1/2 -translate-y-1/2">
+                <AuthorBioPopover author={bioAuthor} />
+              </span>
+            ) : null}
+          </div>
           <p className="mt-1 text-xs font-medium text-white/30">
             {followersCount.toLocaleString()} Followers
           </p>