more fixes

resources/js/components/profile/tabs/TabArtworks.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useCallback } from 'react'
-import ArtworkCard from '../../gallery/ArtworkCard'
+import React, { useState } from 'react'
+import MasonryGallery from '../../gallery/MasonryGallery'
 
 const SORT_OPTIONS = [
   { value: 'latest',    label: 'Latest' },
@@ -9,30 +9,6 @@ const SORT_OPTIONS = [
   { value: 'favs',      label: 'Most Favourited' },
 ]
 
-function ArtworkSkeleton() {
-  return (
-    <div className="rounded-2xl overflow-hidden bg-white/5 animate-pulse">
-      <div className="aspect-[4/3] bg-white/8" />
-      <div className="p-2 space-y-1.5">
-        <div className="h-3 bg-white/8 rounded w-3/4" />
-        <div className="h-2 bg-white/5 rounded w-1/2" />
-      </div>
-    </div>
-  )
-}
-
-function EmptyState({ username }) {
-  return (
-    <div className="col-span-full flex flex-col items-center justify-center py-20 text-center">
-      <div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mb-5 text-slate-500">
-        <i className="fa-solid fa-image text-3xl" />
-      </div>
-      <p className="text-slate-400 font-medium">No artworks yet</p>
-      <p className="text-slate-600 text-sm mt-1">@{username} hasn't uploaded anything yet.</p>
-    </div>
-  )
-}
-
 /**
  * Featured artworks horizontal scroll strip.
  */
@@ -40,31 +16,31 @@ function FeaturedStrip({ featuredArtworks }) {
   if (!featuredArtworks?.length) return null
 
   return (
-    <div className="mb-6">
-      <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 flex items-center gap-2">
-        <i className="fa-solid fa-star text-yellow-400 fa-fw" />
+    <div className="mb-7 rounded-2xl border border-white/10 bg-white/[0.02] p-4 md:p-5">
+      <h2 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3 flex items-center gap-2">
+        <i className="fa-solid fa-star text-amber-400 fa-fw" />
         Featured
       </h2>
-      <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
-        {featuredArtworks.map((art) => (
+      <div className="flex gap-4 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
+        {featuredArtworks.slice(0, 5).map((art) => (
           <a
             key={art.id}
             href={`/art/${art.id}/${slugify(art.name)}`}
-            className="group shrink-0 snap-start w-40 sm:w-48"
+            className="group shrink-0 snap-start w-56 md:w-64"
           >
-            <div className="overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 aspect-[4/3] hover:ring-sky-400/40 transition-all">
+            <div className="overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 aspect-[5/3] hover:ring-sky-400/40 transition-all">
               <img
                 src={art.thumb}
                 alt={art.name}
-                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                 loading="lazy"
               />
             </div>
-            <p className="text-xs text-slate-400 mt-1.5 truncate group-hover:text-white transition-colors">
+            <p className="text-sm text-slate-300 mt-2 truncate group-hover:text-white transition-colors">
               {art.name}
             </p>
             {art.label && (
-              <p className="text-[10px] text-slate-600 truncate">{art.label}</p>
+              <p className="text-[11px] text-slate-600 truncate">{art.label}</p>
             )}
           </a>
         ))}
@@ -86,8 +62,6 @@ export default function TabArtworks({ artworks, featuredArtworks, username, isAc
   const [sort, setSort] = useState('latest')
   const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
   const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [isInitialLoad] = useState(false) // data SSR-loaded
 
   const handleSort = async (newSort) => {
     setSort(newSort)
@@ -104,23 +78,6 @@ export default function TabArtworks({ artworks, featuredArtworks, username, isAc
     } catch (_) {}
   }
 
-  const loadMore = async () => {
-    if (!nextCursor || loadingMore) return
-    setLoadingMore(true)
-    try {
-      const res = await fetch(
-        `/api/profile/${encodeURIComponent(username)}/artworks?sort=${sort}&cursor=${encodeURIComponent(nextCursor)}`,
-        { headers: { Accept: 'application/json' } }
-      )
-      if (res.ok) {
-        const data = await res.json()
-        setItems((prev) => [...prev, ...(data.data ?? data)])
-        setNextCursor(data.next_cursor ?? null)
-      }
-    } catch (_) {}
-    setLoadingMore(false)
-  }
-
   return (
     <div
       id="tabpanel-artworks"
@@ -151,45 +108,16 @@ export default function TabArtworks({ artworks, featuredArtworks, username, isAc
         </div>
       </div>
 
-      {/* Grid */}
-      {isInitialLoad ? (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-          {Array.from({ length: 8 }).map((_, i) => <ArtworkSkeleton key={i} />)}
-        </div>
-      ) : items.length === 0 ? (
-        <div className="grid grid-cols-1">
-          <EmptyState username={username} />
-        </div>
-      ) : (
-        <>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-            {items.map((art, i) => (
-              <ArtworkCard
-                key={art.id ?? i}
-                art={art}
-                loading={i < 8 ? 'eager' : 'lazy'}
-              />
-            ))}
-            {loadingMore && Array.from({ length: 4 }).map((_, i) => <ArtworkSkeleton key={`sk-${i}`} />)}
-          </div>
-
-          {/* Load more */}
-          {nextCursor && (
-            <div className="mt-8 text-center">
-              <button
-                onClick={loadMore}
-                disabled={loadingMore}
-                className="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 text-sm font-medium border border-white/10 transition-all"
-              >
-                {loadingMore
-                  ? <><i className="fa-solid fa-circle-notch fa-spin fa-fw" /> Loading…</>
-                  : <><i className="fa-solid fa-chevron-down fa-fw" /> Load more</>
-                }
-              </button>
-            </div>
-          )}
-        </>
-      )}
+      {/* Shared masonry gallery component reused from discover/explore */}
+      <MasonryGallery
+        key={`profile-${username}-${sort}`}
+        artworks={items}
+        galleryType="profile"
+        cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
+        initialNextCursor={nextCursor}
+        limit={24}
+        gridClassName="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+      />
     </div>
   )
 }