Fix mobile profile page (#13591)

**1. Fixed crash on mobile profile page load**
- **Issue**: Profile page was crashing with `TypeError: Cannot read
properties of undefined (reading 'current')` when accessing tab refs
- **Root cause**: `interpolateScale` function in `useTabs` hook was
accessing `.current` on potentially undefined refs when tabs array was
empty during loading
- **Fix**: Added optional chaining (`?.`) when accessing refs in
`interpolateScale` function
- **File**: `packages/web/src/hooks/useTabs/useTabs.tsx`

**2. Fixed empty tabs content on mobile profile page**
- **Issue**: After fixing the crash, tabs were rendering but showing no
content
- **Root cause**: `profileTabs` and `profileElements` were being
computed after `useTabs` hook was called, so the hook received empty
arrays. React hooks don't react to variable assignments that happen
after the hook call.
- **Fix**: Moved tab and element computation into `useMemo` hook that
runs before `useTabs`, matching the pattern used in the desktop version
- **File**:
`packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx`

### UI Improvements

**3. Added spacing between coin icon and tier text in ProfilePageBadge**
- Added `gap: 12px` to `.isCompact` container to create proper spacing
between the coin icon and "TIER 3 GOLD" text
- **File**:
`packages/web/src/components/user-badges/ProfilePageBadge.module.css`

**4. Added spacing between "Show More" link and tip button**
- Added `margin-bottom: 16px` to `.expandDescription` class to improve
visual separation
- **File**:
`packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css`

### Testing
- Verified mobile profile page loads without crashing
- Confirmed tabs display content correctly for both artist and user
profiles
- Verified spacing improvements are visible in the UI

Author: raymondjacobson

packages/web/src/components/user-badges/ProfilePageBadge.module.css

@@ -19,12 +19,12 @@
   border-radius: 8px;
   border: 1px solid var(--harmony-n-100);
   justify-content: center;
+  gap: 12px;
 }
 
 .isCompact.container svg {
   height: 28px;
   width: 28px;
-  margin-right: 11px;
 }
 
 .isCompact.container .text {
@@ -76,4 +76,4 @@
   width: 1px;
   height: 32px;
   margin: 0px 6px;
-}
+}

packages/web/src/hooks/useTabs/useTabs.tsx

@@ -222,8 +222,8 @@ const TabBar = memo(
     // Ask Michael to explain this if necessary.
     const interpolateScale = (x: number) => {
       const [first, second] = [
-        refsArr.current[0].current,
-        refsArr.current[1].current
+        refsArr.current[0]?.current,
+        refsArr.current[1]?.current
       ]
       if (!(first && second)) {
         return 'scale(1, 1)'

packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css

@@ -188,6 +188,7 @@
 .expandDescription {
   width: 100%;
   margin-top: 8px;
+  margin-bottom: 16px;
   text-align: left;
   color: var(--harmony-primary);
   font-size: 14px;

packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext, RefObject } from 'react'
+import { useEffect, useContext, RefObject, useMemo } from 'react'
 
 import { Status, User } from '@audius/common/models'
 import {
@@ -182,99 +182,26 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
     setHeader(null)
   }, [setHeader])
 
-  const messages = getMessages({ name, isOwner })
-  let content
-  let profileTabs
-  let profileElements
   const isLoading = status === Status.LOADING
   const isEditing = mode === 'editing'
 
-  // Set Nav-Bar Menu
-  const { setLeft, setCenter, setRight } = useContext(NavContext)!
-  useEffect(() => {
-    let leftNav
-    let rightNav
-    if (isEditing) {
-      leftNav = (
-        <TextElement text='Cancel' type={Type.SECONDARY} onClick={onCancel} />
-      )
-      rightNav = (
-        <TextElement
-          text='Save'
-          type={Type.PRIMARY}
-          isEnabled={hasMadeEdit}
-          onClick={onSave}
-        />
-      )
-    } else {
-      leftNav = isOwner ? LeftPreset.SETTINGS : LeftPreset.BACK
-      rightNav = <ShareUserButton userId={userId} />
+  // Compute tabs and elements before calling useTabs
+  const { profileTabs, profileElements } = useMemo(() => {
+    if (!profile || isLoading || isEditing) {
+      return { profileTabs: [], profileElements: [] }
     }
-    if (userId) {
-      setLeft(leftNav)
-      setRight(rightNav)
-      setCenter(CenterPreset.LOGO)
-    }
-  }, [
-    setLeft,
-    setCenter,
-    setRight,
-    userId,
-    isOwner,
-    isEditing,
-    onCancel,
-    onSave,
-    hasMadeEdit
-  ])
-
-  const { tabs, body } = useTabs({
-    didChangeTabsFrom,
-    tabs: isLoading ? [] : profileTabs || [],
-    elements: isLoading ? [] : profileElements || [],
-    initialTab: activeTab || undefined,
-    pathname: profilePage(handle)
-  })
 
-  if (!profile) {
-    return null
-  }
+    const tabMessages = getMessages({ name, isOwner })
 
-  const coverPhotoSizes = profile.cover_photo ?? null
-
-  if (isLoading) {
-    content = null
-  } else if (isEditing) {
-    content = (
-      <EditProfile
-        name={name}
-        bio={bio}
-        location={location}
-        xHandle={xHandle}
-        instagramHandle={instagramHandle}
-        tikTokHandle={tikTokHandle}
-        twitterVerified={twitterVerified}
-        instagramVerified={instagramVerified}
-        tikTokVerified={tikTokVerified}
-        website={website}
-        onUpdateName={updateName}
-        onUpdateBio={updateBio}
-        onUpdateLocation={updateLocation}
-        onUpdateXHandle={updateXHandle}
-        onUpdateInstagramHandle={updateInstagramHandle}
-        onUpdateTikTokHandle={updateTikTokHandle}
-        onUpdateWebsite={updateWebsite}
-      />
-    )
-  } else {
     if (isArtist) {
-      profileTabs = artistTabs
-      profileElements = [
+      const tabs = artistTabs
+      const elements = [
         <div className={styles.tracksLineupContainer} key='artistTracks'>
           {profile.track_count === 0 ? (
             <EmptyTab
               message={
                 <>
-                  {messages.emptyTracks}
+                  {tabMessages.emptyTracks}
                   <i
                     className={cn('emoji', 'face-with-monocle', styles.emoji)}
                   />
@@ -305,7 +232,7 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
             <EmptyTab
               message={
                 <>
-                  {messages.emptyReposts}
+                  {tabMessages.emptyReposts}
                   <i
                     className={cn('emoji', 'face-with-monocle', styles.emoji)}
                   />
@@ -324,15 +251,16 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
           )}
         </div>
       ]
+      return { profileTabs: tabs, profileElements: elements }
     } else {
-      profileTabs = userTabs
-      profileElements = [
+      const tabs = userTabs
+      const elements = [
         <div className={styles.tracksLineupContainer} key='tracks'>
           {profile.repost_count === 0 ? (
             <EmptyTab
               message={
                 <>
-                  {messages.emptyReposts}
+                  {tabMessages.emptyReposts}
                   <i
                     className={cn('emoji', 'face-with-monocle', styles.emoji)}
                   />
@@ -354,7 +282,104 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
           <PlaylistsTab isOwner={isOwner} profile={profile} userId={userId} />
         </div>
       ]
+      return { profileTabs: tabs, profileElements: elements }
+    }
+  }, [
+    profile,
+    isLoading,
+    isEditing,
+    isArtist,
+    isOwner,
+    userId,
+    name,
+    artistTracks,
+    userFeed,
+    getLineupProps,
+    loadMoreArtistTracks,
+    loadMoreUserFeed,
+    playArtistTrack,
+    pauseArtistTrack,
+    playUserFeedTrack,
+    pauseUserFeedTrack
+  ])
+
+  // Set Nav-Bar Menu
+  const { setLeft, setCenter, setRight } = useContext(NavContext)!
+  useEffect(() => {
+    let leftNav
+    let rightNav
+    if (isEditing) {
+      leftNav = (
+        <TextElement text='Cancel' type={Type.SECONDARY} onClick={onCancel} />
+      )
+      rightNav = (
+        <TextElement
+          text='Save'
+          type={Type.PRIMARY}
+          isEnabled={hasMadeEdit}
+          onClick={onSave}
+        />
+      )
+    } else {
+      leftNav = isOwner ? LeftPreset.SETTINGS : LeftPreset.BACK
+      rightNav = <ShareUserButton userId={userId} />
+    }
+    if (userId) {
+      setLeft(leftNav)
+      setRight(rightNav)
+      setCenter(CenterPreset.LOGO)
     }
+  }, [
+    setLeft,
+    setCenter,
+    setRight,
+    userId,
+    isOwner,
+    isEditing,
+    onCancel,
+    onSave,
+    hasMadeEdit
+  ])
+
+  const { tabs, body } = useTabs({
+    didChangeTabsFrom,
+    tabs: profileTabs,
+    elements: profileElements,
+    initialTab: activeTab || undefined,
+    pathname: profilePage(handle)
+  })
+
+  if (!profile) {
+    return null
+  }
+
+  const coverPhotoSizes = profile.cover_photo ?? null
+
+  let content
+  if (isLoading) {
+    content = null
+  } else if (isEditing) {
+    content = (
+      <EditProfile
+        name={name}
+        bio={bio}
+        location={location}
+        xHandle={xHandle}
+        instagramHandle={instagramHandle}
+        tikTokHandle={tikTokHandle}
+        twitterVerified={twitterVerified}
+        instagramVerified={instagramVerified}
+        tikTokVerified={tikTokVerified}
+        website={website}
+        onUpdateName={updateName}
+        onUpdateBio={updateBio}
+        onUpdateLocation={updateLocation}
+        onUpdateXHandle={updateXHandle}
+        onUpdateInstagramHandle={updateInstagramHandle}
+        onUpdateTikTokHandle={updateTikTokHandle}
+        onUpdateWebsite={updateWebsite}
+      />
+    )
   }
 
   if (profile.is_deactivated) {