update

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">