Fix profile tab routing

packages/web/src/pages/profile-page/ProfilePage.test.tsx

@@ -62,7 +62,11 @@
   )
 }
 
-export function renderProfilePage(user: any, options?: RenderOptions) {
+export function renderProfilePage(
+  user: any,
+  options?: RenderOptions & { initialRoute?: string }
+) {
+  const { initialRoute, ...renderOptions } = options ?? {}
   mswServer.use(
     mockUserByHandle(user),
     mockRelatedUsers(user),
@@ -75,8 +79,9 @@
     <Routes>
       <Route path='/' element={<Navigate to='/test-user' replace />} />
       <Route path='/:handle' element={<ProfilePageWithRef />} />
+      <Route path='/:handle/:tab' element={<ProfilePageWithRef />} />
     </Routes>,
-    options
+    renderOptions
   )
 }
 
@@ -249,4 +254,26 @@
     expect(await screen.findByText('$MOCK')).toBeInTheDocument()
     expect(screen.queryByText('Tip $AUDIO')).not.toBeInTheDocument()
   })
+
+  it('should navigate to the correct tab when using sub-routes', async () => {
+    renderProfilePage(artistUser, {
+      initialRoute: `/${artistUser.handle}/albums`
+    })
+
+    // Wait for the profile to load
+    expect(
+      await screen.findByRole('heading', {
+        name: new RegExp(`^${artistUser.name}\\s*$`)
+      })
+    ).toBeInTheDocument()
+
+    // Verify that the Albums tab is active (not the first tab)
+    const navBanner = await screen.findByTestId('nav-banner')
+    const albumsTab = await within(navBanner).findByText('Albums')
+    expect(albumsTab).toBeInTheDocument()
+
+    // The active tab should have specific styling - check parent for active class
+    const albumsTabParent = albumsTab.closest('[role="tab"]')
+    expect(albumsTabParent).toBeInTheDocument()
+  })
 })

packages/web/src/pages/profile-page/useProfilePage.ts

@@ -120,7 +120,10 @@ export const useProfilePage = (
   const currentTrack = useCurrentTrack()
 
   // Local state
-  const [activeTab, setActiveTab] = useState<ProfilePageTabs | null>(null)
+  const [activeTab, setActiveTab] = useState<ProfilePageTabs | null>(() => {
+    // Initialize with tab from URL if present
+    return params?.tab ? getTabForRoute(params.tab) : null
+  })
   const [editMode, setEditMode] = useState(false)
   const [shouldMaskContent, setShouldMaskContent] = useState(false)
   const [tracksLineupOrder, setTracksLineupOrder] = useState<TracksSortMode>(
@@ -230,7 +233,8 @@ export const useProfilePage = (
 
   // Reset state when profile changes
   useEffect(() => {
-    setActiveTab(null)
+    // Preserve tab from URL if present, otherwise reset to null
+    setActiveTab(params?.tab ? getTabForRoute(params.tab) : null)
     setEditMode(false)
     setUpdatedName(null)
     setUpdatedCoverPhoto(null)
@@ -243,7 +247,7 @@ export const useProfilePage = (
     setUpdatedWebsite(null)
     setUpdatedArtistCoinBadge(null)
     setAreArtistRecommendationsVisible(false)
-  }, [profile?.handle])
+  }, [profile?.handle, params?.tab])
 
   // Check if owner changed from visitor to owner
   useEffect(() => {