update

resources/js/components/profile/ProfileGalleryPanel.jsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+import MasonryGallery from '../gallery/MasonryGallery'
+
+const SORT_OPTIONS = [
+  { value: 'latest', label: 'Latest' },
+  { value: 'trending', label: 'Trending' },
+  { value: 'rising', label: 'Rising' },
+  { value: 'views', label: 'Most Viewed' },
+  { value: 'favs', label: 'Most Favourited' },
+]
+
+function slugify(str) {
+  return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+}
+
+function FeaturedStrip({ featuredArtworks }) {
+  if (!featuredArtworks?.length) return null
+
+  return (
+    <div className="mb-7 rounded-2xl border border-white/10 bg-white/[0.02] p-4 md:p-5">
+      <h2 className="mb-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
+        <i className="fa-solid fa-star fa-fw text-amber-400" />
+        Featured
+      </h2>
+      <div className="scrollbar-hide flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2">
+        {featuredArtworks.slice(0, 5).map((art) => (
+          <a
+            key={art.id}
+            href={`/art/${art.id}/${slugify(art.name)}`}
+            className="group w-56 shrink-0 snap-start md:w-64"
+          >
+            <div className="aspect-[5/3] overflow-hidden rounded-xl bg-black/30 ring-1 ring-white/10 transition-all hover:ring-sky-400/40">
+              <img
+                src={art.thumb}
+                alt={art.name}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                loading="lazy"
+              />
+            </div>
+            <p className="mt-2 truncate text-sm text-slate-300 transition-colors group-hover:text-white">
+              {art.name}
+            </p>
+            {art.label ? <p className="truncate text-[11px] text-slate-600">{art.label}</p> : null}
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function ProfileGalleryPanel({ artworks, featuredArtworks, username }) {
+  const [sort, setSort] = useState('latest')
+  const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
+  const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
+
+  const handleSort = async (newSort) => {
+    setSort(newSort)
+    setItems([])
+
+    try {
+      const response = await fetch(`/api/profile/${encodeURIComponent(username)}/artworks?sort=${newSort}`, {
+        headers: { Accept: 'application/json' },
+      })
+
+      if (!response.ok) {
+        return
+      }
+
+      const data = await response.json()
+      setItems(data.data ?? data)
+      setNextCursor(data.next_cursor ?? null)
+    } catch (_) {}
+  }
+
+  return (
+    <>
+      <FeaturedStrip featuredArtworks={featuredArtworks} />
+
+      <div className="mb-5 flex flex-wrap items-center gap-3">
+        <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">Sort</span>
+        <div className="flex flex-wrap gap-1">
+          {SORT_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => handleSort(opt.value)}
+              className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all ${
+                sort === opt.value
+                  ? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
+                  : 'text-slate-400 hover:bg-white/5 hover:text-white'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <MasonryGallery
+        key={`profile-${username}-${sort}`}
+        artworks={items}
+        galleryType="profile"
+        cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
+        initialNextCursor={nextCursor}
+        limit={24}
+      />
+    </>
+  )
+}

resources/js/components/profile/ProfileHero.jsx

@@ -1,74 +1,23 @@
 import React, { useState } from 'react'
-import NovaConfirmDialog from '../ui/NovaConfirmDialog'
 import ProfileCoverEditor from './ProfileCoverEditor'
+import LevelBadge from '../xp/LevelBadge'
+import XPProgressBar from '../xp/XPProgressBar'
+import FollowButton from '../social/FollowButton'
 
-/**
- * ProfileHero
- * Cover banner + avatar + identity block + action buttons
- */
-export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing, followerCount, heroBgUrl, countryName }) {
+export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing, followerCount, heroBgUrl, countryName, leaderboardRank, extraActions = null }) {
   const [following, setFollowing] = useState(viewerIsFollowing)
   const [count, setCount] = useState(followerCount)
-  const [loading, setLoading] = useState(false)
-  const [hovering, setHovering] = useState(false)
   const [editorOpen, setEditorOpen] = useState(false)
   const [coverUrl, setCoverUrl] = useState(user?.cover_url || heroBgUrl || null)
   const [coverPosition, setCoverPosition] = useState(Number.isFinite(user?.cover_position) ? user.cover_position : 50)
-  const [confirmOpen, setConfirmOpen] = useState(false)
-  const [pendingFollowState, setPendingFollowState] = useState(null)
 
   const uname = user.username || user.name || 'Unknown'
   const displayName = user.name || uname
-
   const joinDate = user.created_at
     ? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
     : null
-
   const bio = profile?.bio || profile?.about || ''
 
-  const persistFollowState = async (nextState) => {
-    if (loading) return
-    setLoading(true)
-    try {
-      const res = await fetch(`/@${uname.toLowerCase()}/follow`, {
-        method: 'POST',
-        headers: {
-          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
-          'Accept': 'application/json',
-        },
-      })
-      if (res.ok) {
-        const data = await res.json()
-        setFollowing(data.following)
-        setCount(data.follower_count)
-      }
-    } catch (_) {}
-    setLoading(false)
-  }
-
-  const toggleFollow = async () => {
-    const nextState = !following
-    if (!nextState) {
-      setPendingFollowState(nextState)
-      setConfirmOpen(true)
-      return
-    }
-
-    await persistFollowState(nextState)
-  }
-
-  const onConfirmUnfollow = async () => {
-    if (pendingFollowState === null) return
-    setConfirmOpen(false)
-    await persistFollowState(pendingFollowState)
-    setPendingFollowState(null)
-  }
-
-  const onCloseConfirm = () => {
-    setConfirmOpen(false)
-    setPendingFollowState(null)
-  }
-
   return (
     <>
       <div className="max-w-6xl mx-auto px-4 pt-4">
@@ -82,7 +31,7 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
               position: 'relative',
             }}
           >
-            {isOwner && (
+            {isOwner ? (
               <div className="absolute right-3 top-3 z-20">
                 <button
                   type="button"
@@ -94,7 +43,7 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                   Edit Cover
                 </button>
               </div>
-            )}
+            ) : null}
 
             <div
               className="absolute inset-0"
@@ -109,49 +58,58 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
         </div>
 
         <div className="relative -mt-14 md:-mt-16 pb-4 px-1">
-          <div className="flex flex-col md:flex-row md:items-end gap-4 md:gap-5">
-            <div className="mx-auto md:mx-0 shrink-0 z-10">
+          <div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-5">
+            <div className="mx-auto z-10 shrink-0 md:mx-0">
               <img
                 src={user.avatar_url || '/default/avatar_default.webp'}
                 alt={`${uname}'s avatar`}
-                className="w-[104px] h-[104px] md:w-[116px] md:h-[116px] rounded-full object-cover border-2 border-white/15 shadow-[0_0_0_6px_rgba(15,23,36,0.95),0_10px_32px_rgba(0,0,0,0.6)]"
+                className="h-[104px] w-[104px] rounded-full border-2 border-white/15 object-cover shadow-[0_0_0_6px_rgba(15,23,36,0.95),0_10px_32px_rgba(0,0,0,0.6)] md:h-[116px] md:w-[116px]"
               />
             </div>
 
-            <div className="flex-1 min-w-0 text-center md:text-left">
-              <h1 className="text-[28px] md:text-[34px] font-bold text-white leading-tight tracking-tight">
+            <div className="min-w-0 flex-1 text-center md:text-left">
+              <h1 className="text-[28px] font-bold leading-tight tracking-tight text-white md:text-[34px]">
                 {displayName}
               </h1>
-              <p className="text-slate-400 text-sm mt-0.5 font-mono">@{uname}</p>
+              <p className="mt-0.5 font-mono text-sm text-slate-400">@{uname}</p>
 
-              <div className="flex flex-wrap items-center justify-center md:justify-start gap-2.5 mt-2 text-xs text-slate-400">
-                {countryName && (
-                  <span className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
-                    {profile?.country_code && (
+              <div className="mt-3 flex flex-wrap items-center justify-center gap-2 md:justify-start">
+                <LevelBadge level={user?.level} rank={user?.rank} />
+                {leaderboardRank?.rank ? (
+                  <span className="inline-flex items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-sky-100">
+                    Rank #{leaderboardRank.rank} this week
+                  </span>
+                ) : null}
+              </div>
+
+              <div className="mt-2 flex flex-wrap items-center justify-center gap-2.5 text-xs text-slate-400 md:justify-start">
+                {countryName ? (
+                  <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2.5 py-1">
+                    {profile?.country_code ? (
                       <img
-                        src={`/gfx/flags/shiny/24/${encodeURIComponent(profile.country_code)}.png`}
+                        src={`/gfx/flags/shiny/24/${encodeURIComponent(String(profile.country_code).toUpperCase())}.png`}
                         alt={countryName}
                         className="w-4 h-auto rounded-sm"
-                        onError={(e) => { e.target.style.display = 'none' }}
+                        onError={(event) => { event.target.style.display = 'none' }}
                       />
-                    )}
+                    ) : null}
                     {countryName}
                   </span>
-                )}
+                ) : null}
 
-                {joinDate && (
-                  <span className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
+                {joinDate ? (
+                  <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2.5 py-1">
                     <i className="fa-solid fa-calendar-days fa-fw opacity-70" />
                     Joined {joinDate}
                   </span>
-                )}
+                ) : null}
 
-                {profile?.website && (
+                {profile?.website ? (
                   <a
                     href={profile.website.startsWith('http') ? profile.website : `https://${profile.website}`}
                     target="_blank"
                     rel="nofollow noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 text-sky-300 hover:text-sky-200 hover:bg-white/10 transition-colors"
+                    className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2.5 py-1 text-sky-300 transition-colors hover:bg-white/10 hover:text-sky-200"
                   >
                     <i className="fa-solid fa-link fa-fw" />
                     {(() => {
@@ -163,22 +121,32 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                       }
                     })()}
                   </a>
-                )}
+                ) : null}
               </div>
 
-              {bio && (
-                <p className="text-sm text-slate-300/90 mt-3 max-w-2xl leading-relaxed line-clamp-2 md:line-clamp-3 mx-auto md:mx-0">
+              {bio ? (
+                <p className="mx-auto mt-3 max-w-2xl line-clamp-2 text-sm leading-relaxed text-slate-300/90 md:mx-0 md:line-clamp-3">
                   {bio}
                 </p>
-              )}
+              ) : null}
+
+              <XPProgressBar
+                xp={user?.xp}
+                currentLevelXp={user?.current_level_xp}
+                nextLevelXp={user?.next_level_xp}
+                progressPercent={user?.progress_percent}
+                maxLevel={user?.max_level}
+                className="mt-4 max-w-xl"
+              />
             </div>
 
-            <div className="shrink-0 flex items-center justify-center md:justify-end gap-2 pb-0.5">
+            <div className="shrink-0 flex items-center justify-center gap-2 pb-0.5 md:justify-end">
+              {extraActions}
               {isOwner ? (
                 <>
                   <a
                     href="/dashboard/profile"
-                    className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium border border-white/15 text-slate-300 hover:text-white hover:bg-white/5 transition-all"
+                    className="inline-flex items-center gap-2 rounded-xl border border-white/15 px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/5 hover:text-white"
                     aria-label="Edit profile"
                   >
                     <i className="fa-solid fa-pen fa-fw" />
@@ -186,7 +154,7 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                   </a>
                   <a
                     href="/studio"
-                    className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium bg-sky-600 hover:bg-sky-500 text-white transition-all shadow-lg shadow-sky-900/30"
+                    className="inline-flex items-center gap-2 rounded-xl bg-sky-600 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-sky-900/30 transition-all hover:bg-sky-500"
                     aria-label="Open Studio"
                   >
                     <i className="fa-solid fa-wand-magic-sparkles fa-fw" />
@@ -195,32 +163,20 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                 </>
               ) : (
                 <>
-                  <button
-                    onClick={toggleFollow}
-                    onMouseEnter={() => setHovering(true)}
-                    onMouseLeave={() => setHovering(false)}
-                    disabled={loading}
-                    aria-label={following ? 'Unfollow' : 'Follow'}
-                    className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium border transition-all ${
-                      following
-                        ? hovering
-                          ? 'bg-red-500/10 border-red-400/40 text-red-400'
-                          : 'bg-green-500/10 border-green-400/40 text-green-400'
-                        : 'bg-sky-500/10 border-sky-400/40 text-sky-400 hover:bg-sky-500/20'
-                    }`}
-                  >
-                    <i className={`fa-solid fa-fw ${
-                      loading
-                        ? 'fa-circle-notch fa-spin'
-                        : following
-                          ? hovering ? 'fa-user-minus' : 'fa-user-check'
-                          : 'fa-user-plus'
-                    }`} />
-                    <span>{following ? (hovering ? 'Unfollow' : 'Following') : 'Follow'}</span>
-                    <span className="text-xs opacity-70">{count.toLocaleString()}</span>
-                  </button>
+                  <FollowButton
+                    username={uname}
+                    initialFollowing={following}
+                    initialCount={count}
+                    followingClassName="bg-green-500/10 border border-green-400/40 text-green-400 hover:bg-green-500/15"
+                    idleClassName="bg-sky-500/10 border border-sky-400/40 text-sky-400 hover:bg-sky-500/20"
+                    onChange={({ following: nextFollowing, followersCount }) => {
+                      setFollowing(nextFollowing)
+                      setCount(followersCount)
+                    }}
+                  />
 
                   <button
+                    type="button"
                     onClick={() => {
                       if (navigator.share) {
                         navigator.share({ title: `${displayName} on Skinbase`, url: window.location.href })
@@ -229,7 +185,7 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
                       }
                     }}
                     aria-label="Share profile"
-                    className="p-2.5 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 transition-all"
+                    className="rounded-xl border border-white/10 p-2.5 text-slate-400 transition-all hover:bg-white/5 hover:text-white"
                   >
                     <i className="fa-solid fa-share-nodes fa-fw" />
                   </button>
@@ -241,8 +197,10 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
       </div>
 
       <ProfileCoverEditor
-        isOpen={editorOpen}
+        open={editorOpen}
         onClose={() => setEditorOpen(false)}
+        currentCoverUrl={coverUrl}
+        currentPosition={coverPosition}
         coverUrl={coverUrl}
         coverPosition={coverPosition}
         onCoverUpdated={(nextUrl, nextPosition) => {
@@ -254,18 +212,6 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
           setCoverPosition(50)
         }}
       />
-
-      <NovaConfirmDialog
-        open={confirmOpen}
-        title="Unfollow creator?"
-        message={`You will stop seeing updates from @${uname} in your following feed.`}
-        confirmLabel="Unfollow"
-        cancelLabel="Keep following"
-        confirmTone="danger"
-        onConfirm={onConfirmUnfollow}
-        onClose={onCloseConfirm}
-        busy={loading}
-      />
     </>
   )
 }

resources/js/components/profile/ProfileTabs.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react'
 export const TABS = [
   { id: 'artworks',    label: 'Artworks',    icon: 'fa-images' },
   { id: 'stories',     label: 'Stories',     icon: 'fa-feather-pointed' },
+  { id: 'achievements', label: 'Achievements', icon: 'fa-trophy' },
   { id: 'posts',       label: 'Posts',       icon: 'fa-newspaper' },
   { id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
   { id: 'about',       label: 'About',       icon: 'fa-id-card' },

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

@@ -95,7 +95,7 @@ export default function TabAbout({ user, profile, socialLinks, countryName, foll
               <span className="flex items-center gap-2">
                 {profile?.country_code && (
                   <img
-                    src={`/gfx/flags/shiny/24/${encodeURIComponent(profile.country_code)}.png`}
+                    src={`/gfx/flags/shiny/24/${encodeURIComponent(String(profile.country_code).toUpperCase())}.png`}
                     alt={countryName}
                     className="w-4 h-auto rounded-sm"
                     onError={(e) => { e.target.style.display = 'none' }}

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import AchievementsList from '../../achievements/AchievementsList'
+
+export default function TabAchievements({ achievements }) {
+  const unlocked = Array.isArray(achievements?.unlocked) ? achievements.unlocked : []
+  const locked = Array.isArray(achievements?.locked) ? achievements.locked : []
+
+  return (
+    <div
+      id="tabpanel-achievements"
+      role="tabpanel"
+      aria-labelledby="tab-achievements"
+      className="pt-6"
+    >
+      <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Achievements</h2>
+          <p className="mt-2 text-sm text-slate-300">
+            Milestones, creator wins, and level-based unlocks collected on Skinbase.
+          </p>
+        </div>
+        <div className="flex gap-3 text-xs text-slate-400">
+          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
+            {achievements?.counts?.unlocked || 0} unlocked
+          </span>
+          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
+            {achievements?.counts?.total || 0} total
+          </span>
+        </div>
+      </div>
+
+      <AchievementsList unlocked={unlocked} locked={locked} />
+    </div>
+  )
+}

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react'
+import LevelBadge from '../../xp/LevelBadge'
 
 const DEFAULT_AVATAR = 'https://files.skinbase.org/default/avatar_default.webp'
 
@@ -22,6 +23,7 @@ function CommentItem({ comment }) {
           >
             {comment.author_name}
           </a>
+          <LevelBadge level={comment.author_level} rank={comment.author_rank} compact />
           <span className="text-slate-600 text-xs ml-auto whitespace-nowrap">
             {(() => {
               try {

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

@@ -1,82 +1,7 @@
-import React, { useState } from 'react'
-import MasonryGallery from '../../gallery/MasonryGallery'
+import React from 'react'
+import ProfileGalleryPanel from '../ProfileGalleryPanel'
 
-const SORT_OPTIONS = [
-  { value: 'latest',    label: 'Latest' },
-  { value: 'trending',  label: 'Trending' },
-  { value: 'rising',    label: 'Rising' },
-  { value: 'views',     label: 'Most Viewed' },
-  { value: 'favs',      label: 'Most Favourited' },
-]
-
-/**
- * Featured artworks horizontal scroll strip.
- */
-function FeaturedStrip({ featuredArtworks }) {
-  if (!featuredArtworks?.length) return null
-
-  return (
-    <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-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-56 md:w-64"
-          >
-            <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-[1.03]"
-                loading="lazy"
-              />
-            </div>
-            <p className="text-sm text-slate-300 mt-2 truncate group-hover:text-white transition-colors">
-              {art.name}
-            </p>
-            {art.label && (
-              <p className="text-[11px] text-slate-600 truncate">{art.label}</p>
-            )}
-          </a>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function slugify(str) {
-  return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
-}
-
-/**
- * TabArtworks
- * Features: sort selector, featured strip, masonry-style artwork grid,
- * skeleton loading, empty state, load-more pagination.
- */
 export default function TabArtworks({ artworks, featuredArtworks, username, isActive }) {
-  const [sort, setSort] = useState('latest')
-  const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
-  const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
-
-  const handleSort = async (newSort) => {
-    setSort(newSort)
-    setItems([])
-    try {
-      const res = await fetch(`/api/profile/${encodeURIComponent(username)}/artworks?sort=${newSort}`, {
-        headers: { Accept: 'application/json' },
-      })
-      if (res.ok) {
-        const data = await res.json()
-        setItems(data.data ?? data)
-        setNextCursor(data.next_cursor ?? null)
-      }
-    } catch (_) {}
-  }
 
   return (
     <div
@@ -85,37 +10,10 @@ export default function TabArtworks({ artworks, featuredArtworks, username, isAc
       aria-labelledby="tab-artworks"
       className="pt-6"
     >
-      {/* Featured strip */}
-      <FeaturedStrip featuredArtworks={featuredArtworks} />
-
-      {/* Sort bar */}
-      <div className="flex items-center gap-3 mb-5 flex-wrap">
-        <span className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Sort</span>
-        <div className="flex gap-1 flex-wrap">
-          {SORT_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              onClick={() => handleSort(opt.value)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
-                sort === opt.value
-                  ? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
-                  : 'text-slate-400 hover:text-white hover:bg-white/5'
-              }`}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </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}
+      <ProfileGalleryPanel
+        artworks={artworks}
+        featuredArtworks={featuredArtworks}
+        username={username}
       />
     </div>
   )

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import ArtworkGallery from '../../artwork/ArtworkGallery'
 
 function FavSkeleton() {
@@ -14,12 +14,22 @@ function FavSkeleton() {
  * Shows artworks the user has favourited.
  */
 export default function TabFavourites({ favourites, isOwner, username }) {
-  const [items, setItems] = useState(favourites ?? [])
-  const [nextCursor, setNextCursor] = useState(null)
+  const initialItems = Array.isArray(favourites)
+    ? favourites
+    : (favourites?.data ?? [])
+  const [items, setItems] = useState(initialItems)
+  const [nextCursor, setNextCursor] = useState(favourites?.next_cursor ?? null)
   const [loadingMore, setLoadingMore] = useState(false)
+  const loadMoreRef = useRef(null)
 
-  const loadMore = async () => {
+  useEffect(() => {
+    setItems(initialItems)
+    setNextCursor(favourites?.next_cursor ?? null)
+  }, [favourites, initialItems])
+
+  const loadMore = useCallback(async () => {
     if (!nextCursor || loadingMore) return
+
     setLoadingMore(true)
     try {
       const res = await fetch(
@@ -33,7 +43,30 @@ export default function TabFavourites({ favourites, isOwner, username }) {
       }
     } catch (_) {}
     setLoadingMore(false)
-  }
+  }, [loadingMore, nextCursor, username])
+
+  useEffect(() => {
+    const node = loadMoreRef.current
+
+    if (!node || !nextCursor) {
+      return undefined
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          loadMore()
+        }
+      },
+      {
+        rootMargin: '320px 0px',
+      }
+    )
+
+    observer.observe(node)
+
+    return () => observer.disconnect()
+  }, [loadMore, nextCursor])
 
   return (
     <div
@@ -68,6 +101,10 @@ export default function TabFavourites({ favourites, isOwner, username }) {
             {loadingMore && Array.from({ length: 4 }).map((_, i) => <FavSkeleton key={`sk-${i}`} />)}
           </ArtworkGallery>
 
+          {nextCursor && (
+            <div ref={loadMoreRef} className="h-6 w-full" aria-hidden="true" />
+          )}
+
           {nextCursor && (
             <div className="mt-8 text-center">
               <button

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import LevelBadge from '../../xp/LevelBadge'
 
 export default function TabStories({ stories, username }) {
   const list = Array.isArray(stories) ? stories : []
@@ -26,6 +27,10 @@ export default function TabStories({ stories, username }) {
               <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">
+              <div className="flex items-center justify-between gap-2">
+                <LevelBadge level={story.creator_level} rank={story.creator_rank} compact />
+                <span className="text-[11px] uppercase tracking-[0.16em] text-gray-500">Story</span>
+              </div>
               <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">