update

resources/js/Pages/Profile/ProfileGallery.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { usePage } from '@inertiajs/react'
+import ProfileHero from '../../components/profile/ProfileHero'
+import ProfileGalleryPanel from '../../components/profile/ProfileGalleryPanel'
+
+export default function ProfileGallery() {
+  const { props } = usePage()
+  const {
+    user,
+    profile,
+    artworks,
+    featuredArtworks,
+    followerCount,
+    viewerIsFollowing,
+    heroBgUrl,
+    leaderboardRank,
+    countryName,
+    isOwner,
+    profileUrl,
+  } = props
+
+  const username = user.username || user.name
+  const displayName = user.name || user.username || 'Creator'
+
+  return (
+    <div className="min-h-screen pb-16">
+      <ProfileHero
+        user={user}
+        profile={profile}
+        isOwner={isOwner}
+        viewerIsFollowing={viewerIsFollowing}
+        followerCount={followerCount}
+        heroBgUrl={heroBgUrl}
+        countryName={countryName}
+        leaderboardRank={leaderboardRank}
+        extraActions={profileUrl ? (
+          <a
+            href={profileUrl}
+            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"
+          >
+            <i className="fa-solid fa-user fa-fw" />
+            View Profile
+          </a>
+        ) : null}
+      />
+
+      <div className="border-y border-white/10 bg-white/[0.02]">
+        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-5 md:flex-row md:items-end md:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-300/80">Public Gallery</p>
+            <h2 className="mt-1 text-2xl font-semibold tracking-tight text-white md:text-3xl">
+              {displayName}'s artworks
+            </h2>
+            <p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-400">
+              Browse published work with the same infinite-scroll gallery used across the profile experience.
+            </p>
+          </div>
+
+          <a
+            href={profileUrl || '#'}
+            className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.06] hover:text-white"
+          >
+            <i className="fa-solid fa-arrow-left fa-fw" />
+            Back to profile
+          </a>
+        </div>
+      </div>
+
+      <div className="mx-auto w-full max-w-6xl px-4 pt-6 md:px-6">
+        <ProfileGalleryPanel
+          artworks={artworks}
+          featuredArtworks={featuredArtworks}
+          username={username}
+        />
+      </div>
+    </div>
+  )
+}

resources/js/Pages/Profile/ProfileShow.jsx

@@ -1,18 +1,19 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { usePage } from '@inertiajs/react'
-import ProfileHero from '../../Components/Profile/ProfileHero'
-import ProfileStatsRow from '../../Components/Profile/ProfileStatsRow'
-import ProfileTabs from '../../Components/Profile/ProfileTabs'
-import TabArtworks from '../../Components/Profile/tabs/TabArtworks'
-import TabAbout from '../../Components/Profile/tabs/TabAbout'
-import TabStats from '../../Components/Profile/tabs/TabStats'
-import TabFavourites from '../../Components/Profile/tabs/TabFavourites'
-import TabCollections from '../../Components/Profile/tabs/TabCollections'
-import TabActivity from '../../Components/Profile/tabs/TabActivity'
-import TabPosts from '../../Components/Profile/tabs/TabPosts'
-import TabStories from '../../Components/Profile/tabs/TabStories'
+import ProfileHero from '../../components/profile/ProfileHero'
+import ProfileStatsRow from '../../components/profile/ProfileStatsRow'
+import ProfileTabs from '../../components/profile/ProfileTabs'
+import TabArtworks from '../../components/profile/tabs/TabArtworks'
+import TabAchievements from '../../components/profile/tabs/TabAchievements'
+import TabAbout from '../../components/profile/tabs/TabAbout'
+import TabStats from '../../components/profile/tabs/TabStats'
+import TabFavourites from '../../components/profile/tabs/TabFavourites'
+import TabCollections from '../../components/profile/tabs/TabCollections'
+import TabActivity from '../../components/profile/tabs/TabActivity'
+import TabPosts from '../../components/profile/tabs/TabPosts'
+import TabStories from '../../components/profile/tabs/TabStories'
 
-const VALID_TABS = ['artworks', 'stories', 'posts', 'collections', 'about', 'stats', 'favourites', 'activity']
+const VALID_TABS = ['artworks', 'stories', 'achievements', 'posts', 'collections', 'about', 'stats', 'favourites', 'activity']
 
 function getInitialTab() {
   try {
@@ -46,9 +47,13 @@ export default function ProfileShow() {
     heroBgUrl,
     profileComments,
     creatorStories,
+    achievements,
+    leaderboardRank,
     countryName,
     isOwner,
     auth,
+    profileUrl,
+    galleryUrl,
   } = props
 
   const [activeTab, setActiveTab] = useState(getInitialTab)
@@ -83,6 +88,10 @@ export default function ProfileShow() {
     ? artworks
     : (artworks?.data ?? [])
   const artworkNextCursor = artworks?.next_cursor ?? null
+  const favouriteList = Array.isArray(favourites)
+    ? favourites
+    : (favourites?.data ?? [])
+  const favouriteNextCursor = favourites?.next_cursor ?? null
 
   // Normalise social links (may be object keyed by platform, or array)
   const socialLinksObj = Array.isArray(socialLinks)
@@ -100,6 +109,16 @@ export default function ProfileShow() {
         followerCount={followerCount}
         heroBgUrl={heroBgUrl}
         countryName={countryName}
+        leaderboardRank={leaderboardRank}
+        extraActions={galleryUrl ? (
+          <a
+            href={galleryUrl}
+            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"
+          >
+            <i className="fa-solid fa-images fa-fw" />
+            View Gallery
+          </a>
+        ) : null}
       />
 
       {/* Stats pills row */}
@@ -146,6 +165,9 @@ export default function ProfileShow() {
             username={user.username || user.name}
           />
         )}
+        {activeTab === 'achievements' && (
+          <TabAchievements achievements={achievements} />
+        )}
         {activeTab === 'collections' && (
           <TabCollections collections={[]} />
         )}
@@ -166,7 +188,7 @@ export default function ProfileShow() {
         )}
         {activeTab === 'favourites' && (
           <TabFavourites
-            favourites={favourites}
+            favourites={{ data: favouriteList, next_cursor: favouriteNextCursor }}
             isOwner={isOwner}
             username={user.username || user.name}
           />