Add a public profile followers tab.

Expose follower lists on public profiles with a dedicated tab and API path instead of only showing counts.

resources/js/Pages/Profile/ProfileShow.jsx

@@ -13,9 +13,10 @@ import TabActivity from '../../components/profile/tabs/TabActivity'
 import TabPosts from '../../components/profile/tabs/TabPosts'
 import TabStories from '../../components/profile/tabs/TabStories'
 import TabWorlds from '../../components/profile/tabs/TabWorlds'
+import TabFollowers from '../../components/profile/tabs/TabFollowers'
 import GroupProfileSummary from '../../components/groups/GroupProfileSummary'
 
-const VALID_TABS = ['posts', 'artworks', 'stories', 'achievements', 'worlds', 'collections', 'about', 'stats', 'favourites', 'activity']
+const VALID_TABS = ['posts', 'artworks', 'stories', 'achievements', 'worlds', 'collections', 'about', 'stats', 'favourites', 'activity', 'followers']
 
 function getInitialTab(initialTab = 'posts') {
   if (typeof window === 'undefined') {
@@ -55,6 +56,7 @@ export default function ProfileShow() {
     socialLinks,
     followerCount,
     recentFollowers,
+    followersListing,
     followContext,
     followAnalytics,
     suggestedUsers,
@@ -87,6 +89,15 @@ export default function ProfileShow() {
 
   const handleTabChange = useCallback((tab) => {
     if (!VALID_TABS.includes(tab)) return
+
+    // Followers listing is loaded only on the followers tab GET. A client-only
+    // pushState would render an empty list, so navigate for a real page load.
+    if (tab === 'followers') {
+      const targetBase = profileTabUrls?.followers || `${profileUrl || ''}/followers`
+      window.location.assign(targetBase)
+      return
+    }
+
     setActiveTab(tab)
 
     try {
@@ -274,6 +285,13 @@ export default function ProfileShow() {
             creatorStories={creatorStories}
           />
         )}
+        {activeTab === 'followers' && (
+          <TabFollowers
+            listing={followersListing}
+            username={user.username || user.name}
+            followerCount={followerCount}
+          />
+        )}
       </div>
       </div>
     </>