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

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

@@ -57,7 +57,7 @@ export default function TabCollections({ collections }) {
         </div>
         <h3 className="text-lg font-bold text-white mb-2">Collections Coming Soon</h3>
         <p className="text-slate-500 text-sm max-w-sm mx-auto">
-          Group artworks into curated collections. This feature is currently in development.
+          Group your artworks into curated collections.
         </p>
       </div>
     </div>

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

@@ -14,10 +14,10 @@ function EmptyPostsState({ isOwner, username }) {
       <p className="text-slate-400 font-medium mb-1">No posts yet</p>
       {isOwner ? (
         <p className="text-slate-600 text-sm max-w-xs">
-          Share your thoughts or showcase your artworks. Your first post is a tap away.
+          Share updates or showcase your artworks.
         </p>
       ) : (
-        <p className="text-slate-600 text-sm">@{username} hasn't posted anything yet.</p>
+        <p className="text-slate-600 text-sm">@{username} has not posted anything yet.</p>
       )}
     </div>
   )

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

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default function TabStories({ stories, username }) {
+  const list = Array.isArray(stories) ? stories : []
+
+  if (!list.length) {
+    return (
+      <div className="rounded-xl border border-white/10 bg-white/[0.02] px-6 py-12 text-center text-slate-300">
+        No stories published yet.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {list.map((story) => (
+          <a
+            key={story.id}
+            href={`/stories/${story.slug}`}
+            className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition duration-200 hover:scale-[1.01] hover:border-sky-500/40"
+          >
+            {story.cover_url ? (
+              <img src={story.cover_url} alt={story.title} className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105" />
+            ) : (
+              <div className="h-44 w-full bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950" />
+            )}
+            <div className="space-y-2 p-4">
+              <h3 className="line-clamp-2 text-base font-semibold text-white">{story.title}</h3>
+              <p className="line-clamp-2 text-xs text-gray-300">{story.excerpt || ''}</p>
+              <div className="flex items-center gap-3 text-xs text-gray-400">
+                <span>{story.reading_time || 1} min read</span>
+                <span>{story.views || 0} views</span>
+                <span>{story.likes_count || 0} likes</span>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      <a
+        href={`/stories/creator/${username}`}
+        className="inline-flex rounded-lg border border-sky-400/30 bg-sky-500/10 px-3 py-2 text-sm text-sky-300 transition hover:scale-[1.01] hover:text-sky-200"
+      >
+        View all stories
+      </a>
+    </div>
+  )
+}