From 192893f2c2612f17d06be07aeb2deff087aabb39 Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Sun, 18 Jan 2026 16:38:45 -0800 Subject: [PATCH 1/2] Fix mobile profile page --- .../user-badges/ProfilePageBadge.module.css | 4 +- packages/web/src/hooks/useTabs/useTabs.tsx | 4 +- .../mobile/ProfileHeader.module.css | 1 + .../components/mobile/ProfilePage.tsx | 198 ++++++++++-------- 4 files changed, 118 insertions(+), 89 deletions(-) diff --git a/packages/web/src/components/user-badges/ProfilePageBadge.module.css b/packages/web/src/components/user-badges/ProfilePageBadge.module.css index e1fb7c40260..d5f5fbe8e83 100644 --- a/packages/web/src/components/user-badges/ProfilePageBadge.module.css +++ b/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; -} +} \ No newline at end of file diff --git a/packages/web/src/hooks/useTabs/useTabs.tsx b/packages/web/src/hooks/useTabs/useTabs.tsx index ac6c9a85abf..3cb15437857 100644 --- a/packages/web/src/hooks/useTabs/useTabs.tsx +++ b/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)' diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css index a028442c937..355da5f2e9d 100644 --- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css +++ b/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; diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx index 6f74e961b24..5e0abe1aa0a 100644 --- a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx +++ b/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 { @@ -183,98 +183,26 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => { }, [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 = ( - - ) - rightNav = ( - - ) - } else { - leftNav = isOwner ? LeftPreset.SETTINGS : LeftPreset.BACK - rightNav = + // 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) - }) + const tabMessages = getMessages({ name, isOwner }) - if (!profile) { - return null - } - - const coverPhotoSizes = profile.cover_photo ?? null - - if (isLoading) { - content = null - } else if (isEditing) { - content = ( - - ) - } else { if (isArtist) { - profileTabs = artistTabs - profileElements = [ + const tabs = artistTabs + const elements = [
{profile.track_count === 0 ? ( - {messages.emptyTracks} + {tabMessages.emptyTracks} @@ -305,7 +233,7 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => { - {messages.emptyReposts} + {tabMessages.emptyReposts} @@ -324,15 +252,16 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => { )}
] + return { profileTabs: tabs, profileElements: elements } } else { - profileTabs = userTabs - profileElements = [ + const tabs = userTabs + const elements = [
{profile.repost_count === 0 ? ( - {messages.emptyReposts} + {tabMessages.emptyReposts} @@ -354,7 +283,106 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => {
] + return { profileTabs: tabs, profileElements: elements } } + }, [ + profile, + isLoading, + isEditing, + isArtist, + isOwner, + userId, + name, + artistTracks, + userFeed, + getLineupProps, + loadMoreArtistTracks, + loadMoreUserFeed, + playArtistTrack, + pauseArtistTrack, + playUserFeedTrack, + pauseUserFeedTrack, + tracksActions, + feedActions + ]) + + // Set Nav-Bar Menu + const { setLeft, setCenter, setRight } = useContext(NavContext)! + useEffect(() => { + let leftNav + let rightNav + if (isEditing) { + leftNav = ( + + ) + rightNav = ( + + ) + } else { + leftNav = isOwner ? LeftPreset.SETTINGS : LeftPreset.BACK + rightNav = + } + 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 = ( + + ) } if (profile.is_deactivated) { From 2fa0429916189a2979d40b79d70761c73d3c03fd Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Sun, 18 Jan 2026 17:00:42 -0800 Subject: [PATCH 2/2] Fix lint --- .../src/pages/profile-page/components/mobile/ProfilePage.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx index 5e0abe1aa0a..4f6a0310595 100644 --- a/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx +++ b/packages/web/src/pages/profile-page/components/mobile/ProfilePage.tsx @@ -182,7 +182,6 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => { setHeader(null) }, [setHeader]) - const messages = getMessages({ name, isOwner }) const isLoading = status === Status.LOADING const isEditing = mode === 'editing' @@ -301,9 +300,7 @@ const ProfilePage = ({ containerRef }: ProfilePageProps) => { playArtistTrack, pauseArtistTrack, playUserFeedTrack, - pauseUserFeedTrack, - tracksActions, - feedActions + pauseUserFeedTrack ]) // Set Nav-Bar Menu