From 5691cc65abbfc903f43ad429fd07959e60cff63b Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Fri, 8 Sep 2023 17:50:24 -0700
Subject: [PATCH] [C-3060] Fix mobile outbound link experience (#4055)

---
 packages/common/src/utils/index.ts            |  1 +
 packages/common/src/utils/linking.ts          | 19 +++++++
 packages/common/src/utils/urlUtils.ts         | 17 ++++++
 .../components/action-drawer/ActionDrawer.tsx | 39 +++++--------
 .../mobile/src/components/core/Hyperlink.tsx  | 24 ++++++--
 packages/mobile/src/components/core/Text.tsx  |  8 ++-
 .../src/components/drawer/AppDrawer.tsx       |  2 +-
 .../mobile/src/components/drawer/Drawer.tsx   |  2 +-
 .../src/components/drawer/DrawerHeader.tsx    | 41 ++++++--------
 .../feed-filter-drawer/FeedFilterDrawer.tsx   | 21 ++-----
 .../LeavingAudiusDrawer.tsx                   | 15 ++---
 .../PlaybackRateDrawer.tsx                    | 34 +----------
 .../components/share-drawer/ShareDrawer.tsx   | 56 ++++---------------
 .../CollapsibleTopTabNavigator.tsx            |  9 ++-
 .../src/screens/chat-screen/LinkPreview.tsx   |  3 +-
 .../screens/profile-screen/ProfileScreen.tsx  |  2 +-
 .../{ => ProfileTabs}/AlbumsTab.tsx           |  4 +-
 .../{ => ProfileTabs}/CollectiblesTab.tsx     |  4 +-
 .../{ => ProfileTabs}/PlaylistsTab.tsx        |  5 +-
 .../{ => ProfileTabs}/ProfileTabNavigator.tsx |  7 ++-
 .../{ => ProfileTabs}/RepostsTab.tsx          |  6 +-
 .../{ => ProfileTabs}/TracksTab.tsx           |  5 +-
 .../src/screens/profile-screen/selectors.ts   | 17 ++++--
 .../web/src/components/link/ExternalLink.tsx  | 22 ++------
 packages/web/src/utils/route.ts               |  8 +++
 25 files changed, 173 insertions(+), 198 deletions(-)
 create mode 100644 packages/common/src/utils/linking.ts
 rename packages/mobile/src/screens/profile-screen/{ => ProfileTabs}/AlbumsTab.tsx (93%)
 rename packages/mobile/src/screens/profile-screen/{ => ProfileTabs}/CollectiblesTab.tsx (97%)
 rename packages/mobile/src/screens/profile-screen/{ => ProfileTabs}/PlaylistsTab.tsx (93%)
 rename packages/mobile/src/screens/profile-screen/{ => ProfileTabs}/ProfileTabNavigator.tsx (95%)
 rename packages/mobile/src/screens/profile-screen/{ => ProfileTabs}/RepostsTab.tsx (89%)
 rename packages/mobile/src/screens/profile-screen/{ => ProfileTabs}/TracksTab.tsx (92%)

diff --git a/packages/common/src/utils/index.ts b/packages/common/src/utils/index.ts
index 13dd0b7b3d..a9c7d4c52a 100644
--- a/packages/common/src/utils/index.ts
+++ b/packages/common/src/utils/index.ts
@@ -30,3 +30,4 @@ export * from './streaming'
 export * from './dogEarUtils'
 export * from './uploadConstants'
 export * from './updatePlaylistArtwork'
+export * from './linking'
diff --git a/packages/common/src/utils/linking.ts b/packages/common/src/utils/linking.ts
new file mode 100644
index 0000000000..7e7b775831
--- /dev/null
+++ b/packages/common/src/utils/linking.ts
@@ -0,0 +1,19 @@
+export const externalLinkAllowList = new Set([
+  'facebook.com',
+  'instagram.com',
+  'tiktok.com',
+  'twitter.com',
+  'x.com',
+  'audius.co',
+  'discord.gg'
+])
+
+export const isAllowedExternalLink = (link: string) => {
+  try {
+    let hostname = new URL(link).hostname
+    hostname = hostname.replace(/^www\./, '')
+    return externalLinkAllowList.has(hostname)
+  } catch (e) {
+    return false
+  }
+}
diff --git a/packages/common/src/utils/urlUtils.ts b/packages/common/src/utils/urlUtils.ts
index fea7df9361..28a48908fb 100644
--- a/packages/common/src/utils/urlUtils.ts
+++ b/packages/common/src/utils/urlUtils.ts
@@ -1,8 +1,25 @@
+const AUDIUS_PRESS_LINK = 'https://brand.audius.co'
+const AUDIUS_MERCH_LINK = 'https://merch.audius.co/'
+const AUDIUS_REMIX_CONTESTS_LINK = 'https://remix.audius.co/'
+const AUDIUS_BLOG_LINK = 'https://blog.audius.co/'
+
+export const externalAudiusLinks = [
+  AUDIUS_PRESS_LINK,
+  AUDIUS_MERCH_LINK,
+  AUDIUS_REMIX_CONTESTS_LINK,
+  AUDIUS_BLOG_LINK,
+  'https://help.audius.co'
+]
 const audiusUrlRegex =
   // eslint-disable-next-line no-useless-escape
   /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?(staging\.)?(audius\.co)(\/.+)?/gim
 
 export const isAudiusUrl = (url: string) => new RegExp(audiusUrlRegex).test(url)
+export const isInteralAudiusUrl = (url: string) =>
+  isAudiusUrl(url) &&
+  !externalAudiusLinks.some((externalLink) => externalLink.includes(url))
+export const isExternalAudiusUrl = (url: string) =>
+  new RegExp(audiusUrlRegex).test(url)
 export const getPathFromAudiusUrl = (url: string) =>
   new RegExp(audiusUrlRegex).exec(url)?.[3] ?? null
 
diff --git a/packages/mobile/src/components/action-drawer/ActionDrawer.tsx b/packages/mobile/src/components/action-drawer/ActionDrawer.tsx
index 44acda6e48..7302a59340 100644
--- a/packages/mobile/src/components/action-drawer/ActionDrawer.tsx
+++ b/packages/mobile/src/components/action-drawer/ActionDrawer.tsx
@@ -4,11 +4,13 @@ import { useCallback } from 'react'
 import type { Modals } from '@audius/common'
 import type { TextStyle, ViewStyle } from 'react-native'
 import { TouchableHighlight, View } from 'react-native'
+import type { SetOptional } from 'type-fest'
 
-import Text from 'app/components/text'
+import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
+import type { AppDrawerProps } from '../drawer/AppDrawer'
 import { AppDrawer, useDrawerState } from '../drawer/AppDrawer'
 
 export type ActionDrawerRow = {
@@ -19,19 +21,14 @@ export type ActionDrawerRow = {
   isDestructive?: boolean
 }
 
-type ActionSheetModalProps = {
+type ActionDrawerProps = {
   modalName: Modals
   rows: ActionDrawerRow[]
-  title?: string
-  renderTitle?: () => React.ReactNode
   styles?: { row?: ViewStyle }
   disableAutoClose?: boolean
-}
+} & SetOptional<AppDrawerProps, 'children'>
 
 const useStyles = makeStyles(({ palette, typography, spacing }) => ({
-  container: {
-    paddingVertical: spacing(4)
-  },
   row: {
     height: 56,
     alignItems: 'center',
@@ -57,14 +54,14 @@ const useStyles = makeStyles(({ palette, typography, spacing }) => ({
 }))
 
 // `ActionDrawer` is a drawer that presents a list of clickable rows with text
-const ActionDrawer = (props: ActionSheetModalProps) => {
+const ActionDrawer = (props: ActionDrawerProps) => {
   const {
     modalName,
     rows,
-    title,
-    renderTitle,
     styles: stylesProp,
-    disableAutoClose
+    disableAutoClose,
+    children,
+    ...other
   } = props
   const styles = useStyles()
   const { onClose } = useDrawerState(modalName)
@@ -85,13 +82,9 @@ const ActionDrawer = (props: ActionSheetModalProps) => {
   const { neutralLight9 } = useThemeColors()
 
   return (
-    <AppDrawer modalName={modalName}>
-      <View style={styles.container}>
-        {renderTitle ? (
-          renderTitle()
-        ) : title ? (
-          <Text style={[styles.row, styles.title]}>{title}</Text>
-        ) : null}
+    <AppDrawer modalName={modalName} {...other}>
+      <View>
+        {children}
         {rows.map(({ text, isDestructive = false, icon, style }, index) => (
           <TouchableHighlight
             key={`${text}-${index}`}
@@ -103,12 +96,10 @@ const ActionDrawer = (props: ActionSheetModalProps) => {
             <View style={[styles.row, stylesProp?.row]}>
               {icon ? <View style={styles.actionIcon}>{icon}</View> : null}
               <Text
-                style={[
-                  styles.action,
-                  isDestructive ? styles.destructiveAction : null,
-                  style
-                ]}
+                fontSize='xl'
                 weight='demiBold'
+                color={isDestructive ? 'accentRed' : 'secondary'}
+                style={style}
               >
                 {text}
               </Text>
diff --git a/packages/mobile/src/components/core/Hyperlink.tsx b/packages/mobile/src/components/core/Hyperlink.tsx
index 88ff28b73a..6c2f00b341 100644
--- a/packages/mobile/src/components/core/Hyperlink.tsx
+++ b/packages/mobile/src/components/core/Hyperlink.tsx
@@ -1,7 +1,13 @@
 import type { ComponentProps } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { isAudiusUrl, useLeavingAudiusModal } from '@audius/common'
+import {
+  getPathFromAudiusUrl,
+  isAllowedExternalLink,
+  isInteralAudiusUrl,
+  useLeavingAudiusModal
+} from '@audius/common'
+import { useLinkTo } from '@react-navigation/native'
 import type { Match } from 'autolinker/dist/es2015'
 import type { LayoutRectangle, TextStyle } from 'react-native'
 import { Text, View } from 'react-native'
@@ -55,6 +61,7 @@ export const Hyperlink = (props: HyperlinkProps) => {
     ...other
   } = props
   const styles = useStyles()
+  const linkTo = useLinkTo()
 
   const linkContainerRef = useRef<View>(null)
   const [linkRefs, setLinkRefs] = useState<Record<number, Text>>({})
@@ -97,14 +104,19 @@ export const Hyperlink = (props: HyperlinkProps) => {
   const { onOpen: openLeavingAudiusModal } = useLeavingAudiusModal()
 
   const handlePress = useCallback(
-    (url) => {
-      if (!isAudiusUrl(url)) {
-        openLeavingAudiusModal({ link: url })
-      } else {
+    (url: string) => {
+      if (isInteralAudiusUrl(url)) {
+        const path = getPathFromAudiusUrl(url)
+        if (path) {
+          linkTo(path)
+        }
+      } else if (isAllowedExternalLink(url)) {
         openLink(url)
+      } else {
+        openLeavingAudiusModal({ link: url })
       }
     },
-    [openLink, openLeavingAudiusModal]
+    [linkTo, openLink, openLeavingAudiusModal]
   )
 
   const renderLink = useCallback(
diff --git a/packages/mobile/src/components/core/Text.tsx b/packages/mobile/src/components/core/Text.tsx
index 6823ceb914..056a7bf0e0 100644
--- a/packages/mobile/src/components/core/Text.tsx
+++ b/packages/mobile/src/components/core/Text.tsx
@@ -68,7 +68,13 @@ export const Text = (props: TextProps) => {
         // Fix for demibold's weird positioning
         marginTop:
           weight === 'demiBold' && Platform.OS === 'ios'
-            ? spacing(fontSize === 'large' ? 1 : fontSize === 'small' ? 0.5 : 0)
+            ? spacing(
+                fontSize && ['xl', 'large'].includes(fontSize)
+                  ? 1
+                  : fontSize === 'small'
+                  ? 0.5
+                  : 0
+              )
             : undefined
       },
       fontSize &&
diff --git a/packages/mobile/src/components/drawer/AppDrawer.tsx b/packages/mobile/src/components/drawer/AppDrawer.tsx
index 9fc7e050ca..4c6fd302a8 100644
--- a/packages/mobile/src/components/drawer/AppDrawer.tsx
+++ b/packages/mobile/src/components/drawer/AppDrawer.tsx
@@ -33,7 +33,7 @@ export const useDrawerState = (modalName: Modals) => {
   }
 }
 
-type AppDrawerProps = SetOptional<DrawerProps, 'isOpen' | 'onClose'> & {
+export type AppDrawerProps = SetOptional<DrawerProps, 'isOpen' | 'onClose'> & {
   modalName: Modals
 }
 
diff --git a/packages/mobile/src/components/drawer/Drawer.tsx b/packages/mobile/src/components/drawer/Drawer.tsx
index 304f95b8dc..7305b5f4c1 100644
--- a/packages/mobile/src/components/drawer/Drawer.tsx
+++ b/packages/mobile/src/components/drawer/Drawer.tsx
@@ -111,7 +111,7 @@ export type DrawerProps = {
   /**
    * Header title if this drawer has a header
    */
-  title?: string
+  title?: ReactNode
   /**
    * Icon to display in the header next to the title (must also include title)
    */
diff --git a/packages/mobile/src/components/drawer/DrawerHeader.tsx b/packages/mobile/src/components/drawer/DrawerHeader.tsx
index 85e2786dda..c495d7c5e2 100644
--- a/packages/mobile/src/components/drawer/DrawerHeader.tsx
+++ b/packages/mobile/src/components/drawer/DrawerHeader.tsx
@@ -1,27 +1,28 @@
-import type { ComponentType } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 
 import type { ImageSourcePropType } from 'react-native'
-import { TouchableOpacity, View, Image, Text } from 'react-native'
+import { TouchableOpacity, View, Image } from 'react-native'
 
 import IconRemove from 'app/assets/images/iconRemove.svg'
+import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import type { SvgProps } from 'app/types/svg'
 import { useColor } from 'app/utils/theme'
 
 type DrawerHeaderProps = {
   onClose: () => void
-  title?: string
+  title?: ReactNode
   titleIcon?: ComponentType<SvgProps>
   titleImage?: ImageSourcePropType
   isFullscreen?: boolean
 }
 
-export const useStyles = makeStyles(({ palette, typography, spacing }) => ({
+export const useStyles = makeStyles(({ spacing }) => ({
   titleBarContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: spacing(6)
+    padding: spacing(8)
   },
 
   dismissContainer: {
@@ -32,21 +33,11 @@ export const useStyles = makeStyles(({ palette, typography, spacing }) => ({
 
   titleContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: spacing(5)
+    columnGap: spacing(2)
   },
-
-  titleIcon: {
-    marginRight: spacing(3),
+  titleImage: {
     height: spacing(6),
     width: spacing(6)
-  },
-
-  titleLabel: {
-    fontFamily: typography.fontByWeight.bold,
-    fontSize: typography.fontSize.large,
-    color: palette.neutral
   }
 }))
 
@@ -64,7 +55,7 @@ export const DrawerHeader = (props: DrawerHeaderProps) => {
 
   return title || isFullscreen ? (
     <View style={styles.titleBarContainer}>
-      {isFullscreen && (
+      {isFullscreen ? (
         <TouchableOpacity
           activeOpacity={0.7}
           onPress={onClose}
@@ -72,18 +63,20 @@ export const DrawerHeader = (props: DrawerHeaderProps) => {
         >
           <IconRemove width={30} height={30} fill={iconRemoveColor} />
         </TouchableOpacity>
-      )}
-      {title && (
+      ) : null}
+      {title ? (
         <View style={styles.titleContainer}>
           {TitleIcon ? (
-            <TitleIcon style={styles.titleIcon} fill={titleIconColor} />
+            <TitleIcon height={22} width={22} fill={titleIconColor} />
           ) : null}
           {titleImage ? (
-            <Image style={styles.titleIcon} source={titleImage} />
+            <Image style={styles.titleImage} source={titleImage} />
           ) : null}
-          <Text style={styles.titleLabel}>{title}</Text>
+          <Text fontSize='xl' weight='heavy' textTransform='uppercase'>
+            {title}
+          </Text>
         </View>
-      )}
+      ) : null}
     </View>
   ) : (
     <View />
diff --git a/packages/mobile/src/components/feed-filter-drawer/FeedFilterDrawer.tsx b/packages/mobile/src/components/feed-filter-drawer/FeedFilterDrawer.tsx
index 580960e9a4..1485b29bb2 100644
--- a/packages/mobile/src/components/feed-filter-drawer/FeedFilterDrawer.tsx
+++ b/packages/mobile/src/components/feed-filter-drawer/FeedFilterDrawer.tsx
@@ -6,12 +6,11 @@ import {
   feedPageLineupActions as feedActions,
   feedPageActions
 } from '@audius/common'
-import { Text } from 'react-native'
 import { useDispatch } from 'react-redux'
 
 import ActionDrawer from 'app/components/action-drawer'
+import { Text } from 'app/components/core'
 import { make, track } from 'app/services/analytics'
-import { makeStyles } from 'app/styles'
 
 const { setFeedFilter } = feedPageActions
 
@@ -24,21 +23,9 @@ export const messages = {
   filterReposts: 'Reposts'
 }
 
-const useStyles = makeStyles(({ palette, spacing, typography }) => ({
-  title: {
-    ...typography.body,
-    color: palette.neutral,
-    textAlign: 'center',
-    marginTop: spacing(2),
-    marginBottom: spacing(4)
-  }
-}))
-
 export const FeedFilterDrawer = () => {
   const dispatch = useDispatch()
 
-  const styles = useStyles()
-
   const handleSelectFilter = useCallback(
     (filter: FeedFilter) => {
       dispatch(setFeedFilter(filter))
@@ -74,7 +61,11 @@ export const FeedFilterDrawer = () => {
   return (
     <ActionDrawer
       modalName={MODAL_NAME}
-      renderTitle={() => <Text style={styles.title}>{messages.title}</Text>}
+      title={
+        <Text color='neutral' textTransform='none'>
+          {messages.title}
+        </Text>
+      }
       rows={rows}
     />
   )
diff --git a/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx b/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx
index 1a2e122290..a13d8e2a37 100644
--- a/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx
+++ b/packages/mobile/src/components/leaving-audius-drawer/LeavingAudiusDrawer.tsx
@@ -5,10 +5,10 @@ import { View } from 'react-native'
 
 import IconExternalLink from 'app/assets/images/iconExternalLink.svg'
 import IconInfo from 'app/assets/images/iconInfo.svg'
+import { Button, Text, useLink } from 'app/components/core'
 import Drawer from 'app/components/drawer/Drawer'
 import { makeStyles } from 'app/styles'
 
-import { Button, Text, useLink } from '../core'
 import { HelpCallout } from '../help-callout/HelpCallout'
 
 const messages = {
@@ -23,9 +23,6 @@ const useStyles = makeStyles(({ spacing }) => ({
     gap: spacing(4),
     paddingBottom: spacing(6),
     paddingHorizontal: spacing(4)
-  },
-  button: {
-    width: '100%'
   }
 }))
 
@@ -49,16 +46,12 @@ export const LeavingAudiusDrawer = () => {
           content={link}
           icon={IconExternalLink}
         />
+        <Button title={messages.visit} onPress={onLinkPress} fullWidth />
         <Button
-          style={styles.button}
-          title={messages.visit}
-          onPress={onLinkPress}
-        />
-        <Button
-          style={styles.button}
-          variant={'common'}
+          variant='common'
           title={messages.back}
           onPress={onClose}
+          fullWidth
         />
       </View>
     </Drawer>
diff --git a/packages/mobile/src/components/playback-rate-drawer/PlaybackRateDrawer.tsx b/packages/mobile/src/components/playback-rate-drawer/PlaybackRateDrawer.tsx
index cb8cc41125..1a92a5d8b3 100644
--- a/packages/mobile/src/components/playback-rate-drawer/PlaybackRateDrawer.tsx
+++ b/packages/mobile/src/components/playback-rate-drawer/PlaybackRateDrawer.tsx
@@ -2,14 +2,10 @@ import { useCallback, useMemo } from 'react'
 
 import type { PlaybackRate } from '@audius/common'
 import { playerActions } from '@audius/common'
-import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
-import { makeStyles } from 'app/styles'
-
 import ActionDrawer from '../action-drawer'
 import type { ActionDrawerRow } from '../action-drawer/ActionDrawer'
-import { Text } from '../core'
 
 const { setPlaybackRate } = playerActions
 
@@ -29,24 +25,9 @@ const rates: PlaybackRate[] = [
   '3x'
 ]
 
-const useStyles = makeStyles(({ palette, spacing }) => ({
-  title: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: spacing(2),
-    paddingBottom: spacing(4),
-    borderBottomColor: palette.neutralLight8,
-    borderBottomWidth: 1
-  },
-  titleText: {
-    textTransform: 'uppercase'
-  }
-}))
-
 export const PlaybackRateDrawer = () => {
   const dispatch = useDispatch()
-  const styles = useStyles()
+
   const setRate = useCallback(
     (rate: PlaybackRate) => {
       dispatch(setPlaybackRate({ rate }))
@@ -67,18 +48,7 @@ export const PlaybackRateDrawer = () => {
     <ActionDrawer
       modalName='PlaybackRate'
       rows={rows}
-      renderTitle={() => (
-        <View style={styles.title}>
-          <Text
-            weight='heavy'
-            color='neutralLight2'
-            fontSize='xl'
-            style={styles.titleText}
-          >
-            {messages.drawerTitle}
-          </Text>
-        </View>
-      )}
+      title={messages.drawerTitle}
     />
   )
 }
diff --git a/packages/mobile/src/components/share-drawer/ShareDrawer.tsx b/packages/mobile/src/components/share-drawer/ShareDrawer.tsx
index 1452d252d5..a85919ff27 100644
--- a/packages/mobile/src/components/share-drawer/ShareDrawer.tsx
+++ b/packages/mobile/src/components/share-drawer/ShareDrawer.tsx
@@ -12,7 +12,7 @@ import {
   usersSocialActions
 } from '@audius/common'
 import Clipboard from '@react-native-clipboard/clipboard'
-import { Linking, View } from 'react-native'
+import { Linking } from 'react-native'
 import ViewShot from 'react-native-view-shot'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -51,24 +51,9 @@ const { getAccountUser } = accountSelectors
 export const shareToastTimeout = 1500
 
 const useStyles = makeStyles(({ spacing }) => ({
-  titleContainer: {
-    paddingBottom: spacing(4)
-  },
-  title: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: spacing(2),
-    paddingBottom: spacing(4)
-  },
-  titleText: {
-    textTransform: 'uppercase'
-  },
-  titleIcon: {
-    marginRight: spacing(3)
-  },
   titleHelperText: {
     paddingHorizontal: spacing(4),
+    marginBottom: spacing(4),
     textAlign: 'center'
   },
   row: {
@@ -96,7 +81,7 @@ export const ShareDrawer = () => {
   const { onClose } = useDrawerState('Share')
   const { onClose: onCloseNowPlaying } = useDrawer('NowPlaying')
 
-  const { secondary, neutralLight2 } = useThemeColors()
+  const { secondary } = useThemeColors()
   const dispatch = useDispatch()
   const content = useSelector(getShareContent)
   const source = useSelector(getShareSource)
@@ -302,33 +287,16 @@ export const ShareDrawer = () => {
         disableAutoClose={true}
         modalName='Share'
         rows={getRows()}
-        renderTitle={() => (
-          <View style={styles.titleContainer}>
-            <View style={styles.title}>
-              <IconShare
-                style={styles.titleIcon}
-                fill={neutralLight2}
-                height={18}
-                width={20}
-              />
-              <Text
-                weight='heavy'
-                color='neutralLight2'
-                fontSize='xl'
-                style={styles.titleText}
-              >
-                {messages.modalTitle(shareType)}
-              </Text>
-            </View>
-            {content?.type === 'playlist' && content.playlist.is_private ? (
-              <Text style={styles.titleHelperText} fontSize={'large'}>
-                {messages.hiddenPlaylistShareHelperText}
-              </Text>
-            ) : null}
-          </View>
-        )}
+        title={messages.modalTitle(shareType)}
+        titleIcon={IconShare}
         styles={{ row: styles.row }}
-      />
+      >
+        {content?.type !== 'playlist' || content?.playlist?.is_private ? (
+          <Text style={styles.titleHelperText} fontSize={'large'}>
+            {messages.hiddenPlaylistShareHelperText}
+          </Text>
+        ) : null}
+      </ActionDrawer>
     </>
   )
 }
diff --git a/packages/mobile/src/components/top-tab-bar/CollapsibleTopTabNavigator.tsx b/packages/mobile/src/components/top-tab-bar/CollapsibleTopTabNavigator.tsx
index 9531429990..30c2163292 100644
--- a/packages/mobile/src/components/top-tab-bar/CollapsibleTopTabNavigator.tsx
+++ b/packages/mobile/src/components/top-tab-bar/CollapsibleTopTabNavigator.tsx
@@ -18,6 +18,7 @@ type CollapsibleTabNavigatorContextProps = {
   refreshing?: boolean
   onRefresh?: () => void
   scrollY?: Animated.Value
+  params?: Record<string, unknown>
 }
 
 export const CollapsibleTabNavigatorContext =
@@ -34,16 +35,17 @@ type CollapsibleTabNavigatorContextProviderProps = {
   onRefresh?: () => void
   scrollY?: Animated.Value
   children: ReactNode
+  params?: Record<string, unknown>
 }
 
 export const CollapsibleTabNavigatorContextProvider = (
   props: CollapsibleTabNavigatorContextProviderProps
 ) => {
-  const { sceneName, refreshing, onRefresh, scrollY, children } = props
+  const { sceneName, refreshing, onRefresh, scrollY, params, children } = props
 
   const context = useMemo(
-    () => ({ sceneName, refreshing, onRefresh, scrollY }),
-    [sceneName, refreshing, onRefresh, scrollY]
+    () => ({ sceneName, refreshing, onRefresh, scrollY, params }),
+    [sceneName, refreshing, onRefresh, scrollY, params]
   )
 
   return (
@@ -142,6 +144,7 @@ export const collapsibleTabScreen = (config: TabScreenConfig) => {
           refreshing={refreshing}
           onRefresh={onRefresh}
           scrollY={scrollY}
+          params={initialParams}
         >
           <Component />
         </CollapsibleTabNavigatorContextProvider>
diff --git a/packages/mobile/src/screens/chat-screen/LinkPreview.tsx b/packages/mobile/src/screens/chat-screen/LinkPreview.tsx
index 99e3590227..fb211ea82a 100644
--- a/packages/mobile/src/screens/chat-screen/LinkPreview.tsx
+++ b/packages/mobile/src/screens/chat-screen/LinkPreview.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react'
 
 import {
+  isAllowedExternalLink,
   isAudiusUrl,
   useLeavingAudiusModal,
   useLinkUnfurlMetadata
@@ -101,7 +102,7 @@ export const LinkPreview = ({
   const { onOpen: openLeavingAudiusModal } = useLeavingAudiusModal()
 
   const handlePress = useCallback(() => {
-    if (isAudiusUrl(href)) {
+    if (isAudiusUrl(href) || isAllowedExternalLink(href)) {
       goToURL()
     } else {
       openLeavingAudiusModal({ link: href })
diff --git a/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx b/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx
index 26220a9a99..766ff62927 100644
--- a/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileScreen.tsx
@@ -28,7 +28,7 @@ import { useThemeColors } from 'app/utils/theme'
 
 import { ProfileHeader } from './ProfileHeader'
 import { ProfileScreenSkeleton } from './ProfileScreenSkeleton'
-import { ProfileTabNavigator } from './ProfileTabNavigator'
+import { ProfileTabNavigator } from './ProfileTabs/ProfileTabNavigator'
 import { getIsOwner, useSelectProfileRoot } from './selectors'
 const { fetchRelatedArtists } = relatedArtistsUIActions
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
diff --git a/packages/mobile/src/screens/profile-screen/AlbumsTab.tsx b/packages/mobile/src/screens/profile-screen/ProfileTabs/AlbumsTab.tsx
similarity index 93%
rename from packages/mobile/src/screens/profile-screen/AlbumsTab.tsx
rename to packages/mobile/src/screens/profile-screen/ProfileTabs/AlbumsTab.tsx
index 4ac0d62249..2d7a8d4be9 100644
--- a/packages/mobile/src/screens/profile-screen/AlbumsTab.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileTabs/AlbumsTab.tsx
@@ -11,8 +11,8 @@ import { useDispatch, useSelector } from 'react-redux'
 import { CollectionList } from 'app/components/collection-list/CollectionList'
 import { spacing } from 'app/styles/spacing'
 
-import { EmptyProfileTile } from './EmptyProfileTile'
-import { getIsOwner, useSelectProfile } from './selectors'
+import { EmptyProfileTile } from '../EmptyProfileTile'
+import { getIsOwner, useSelectProfile } from '../selectors'
 
 const { getProfileAlbums, getCollectionsStatus } = profilePageSelectors
 const { fetchCollections } = profilePageActions
diff --git a/packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx b/packages/mobile/src/screens/profile-screen/ProfileTabs/CollectiblesTab.tsx
similarity index 97%
rename from packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx
rename to packages/mobile/src/screens/profile-screen/ProfileTabs/CollectiblesTab.tsx
index aa5c460d0a..b86f7b737a 100644
--- a/packages/mobile/src/screens/profile-screen/CollectiblesTab.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileTabs/CollectiblesTab.tsx
@@ -16,8 +16,8 @@ import { useToast } from 'app/hooks/useToast'
 import { makeStyles } from 'app/styles'
 import { getCollectiblesRoute } from 'app/utils/routes'
 
-import { CollectiblesCard } from './CollectiblesCard'
-import { getProfile, useSelectProfile } from './selectors'
+import { CollectiblesCard } from '../CollectiblesCard'
+import { getProfile, useSelectProfile } from '../selectors'
 const getUserId = accountSelectors.getUserId
 
 const messages = {
diff --git a/packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx b/packages/mobile/src/screens/profile-screen/ProfileTabs/PlaylistsTab.tsx
similarity index 93%
rename from packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx
rename to packages/mobile/src/screens/profile-screen/ProfileTabs/PlaylistsTab.tsx
index deeba99753..e88aa7ba0d 100644
--- a/packages/mobile/src/screens/profile-screen/PlaylistsTab.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileTabs/PlaylistsTab.tsx
@@ -12,8 +12,9 @@ import { useDispatch, useSelector } from 'react-redux'
 import { CollectionList } from 'app/components/collection-list'
 import { spacing } from 'app/styles/spacing'
 
-import { EmptyProfileTile } from './EmptyProfileTile'
-import { getIsOwner, useSelectProfile } from './selectors'
+import { EmptyProfileTile } from '../EmptyProfileTile'
+import { getIsOwner, useSelectProfile } from '../selectors'
+
 const { getProfilePlaylists, getCollectionsStatus } = profilePageSelectors
 const { fetchCollections } = profilePageActions
 
diff --git a/packages/mobile/src/screens/profile-screen/ProfileTabNavigator.tsx b/packages/mobile/src/screens/profile-screen/ProfileTabs/ProfileTabNavigator.tsx
similarity index 95%
rename from packages/mobile/src/screens/profile-screen/ProfileTabNavigator.tsx
rename to packages/mobile/src/screens/profile-screen/ProfileTabs/ProfileTabNavigator.tsx
index 6e05e6ce4e..54918f5c29 100644
--- a/packages/mobile/src/screens/profile-screen/ProfileTabNavigator.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileTabs/ProfileTabNavigator.tsx
@@ -13,14 +13,15 @@ import {
 } from 'app/components/top-tab-bar'
 import { useRoute } from 'app/hooks/useRoute'
 
+import { useSelectProfile } from '../selectors'
+import { useIsArtist } from '../useIsArtist'
+import { useShouldShowCollectiblesTab } from '../utils'
+
 import { AlbumsTab } from './AlbumsTab'
 import { CollectiblesTab } from './CollectiblesTab'
 import { PlaylistsTab } from './PlaylistsTab'
 import { RepostsTab } from './RepostsTab'
 import { TracksTab } from './TracksTab'
-import { useSelectProfile } from './selectors'
-import { useIsArtist } from './useIsArtist'
-import { useShouldShowCollectiblesTab } from './utils'
 
 // Height of a typical profile header
 const INITIAL_PROFILE_HEADER_HEIGHT = 1081
diff --git a/packages/mobile/src/screens/profile-screen/RepostsTab.tsx b/packages/mobile/src/screens/profile-screen/ProfileTabs/RepostsTab.tsx
similarity index 89%
rename from packages/mobile/src/screens/profile-screen/RepostsTab.tsx
rename to packages/mobile/src/screens/profile-screen/ProfileTabs/RepostsTab.tsx
index a8cb9d7818..44a01dba28 100644
--- a/packages/mobile/src/screens/profile-screen/RepostsTab.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileTabs/RepostsTab.tsx
@@ -10,9 +10,9 @@ import { useRoute } from '@react-navigation/native'
 
 import { Lineup } from 'app/components/lineup'
 
-import { EmptyProfileTile } from './EmptyProfileTile'
-import type { ProfileTabRoutes } from './routes'
-import { useSelectProfile } from './selectors'
+import { EmptyProfileTile } from '../EmptyProfileTile'
+import type { ProfileTabRoutes } from '../routes'
+import { useSelectProfile } from '../selectors'
 
 const { getProfileFeedLineup } = profilePageSelectors
 
diff --git a/packages/mobile/src/screens/profile-screen/TracksTab.tsx b/packages/mobile/src/screens/profile-screen/ProfileTabs/TracksTab.tsx
similarity index 92%
rename from packages/mobile/src/screens/profile-screen/TracksTab.tsx
rename to packages/mobile/src/screens/profile-screen/ProfileTabs/TracksTab.tsx
index 3278fbb0ca..887c027b2b 100644
--- a/packages/mobile/src/screens/profile-screen/TracksTab.tsx
+++ b/packages/mobile/src/screens/profile-screen/ProfileTabs/TracksTab.tsx
@@ -9,8 +9,9 @@ import { useDispatch } from 'react-redux'
 
 import { Lineup } from 'app/components/lineup'
 
-import { EmptyProfileTile } from './EmptyProfileTile'
-import { useSelectProfile } from './selectors'
+import { EmptyProfileTile } from '../EmptyProfileTile'
+import { useSelectProfile } from '../selectors'
+
 const { getProfileTracksLineup } = profilePageSelectors
 
 export const TracksTab = () => {
diff --git a/packages/mobile/src/screens/profile-screen/selectors.ts b/packages/mobile/src/screens/profile-screen/selectors.ts
index d5148f7bc0..437984b4ca 100644
--- a/packages/mobile/src/screens/profile-screen/selectors.ts
+++ b/packages/mobile/src/screens/profile-screen/selectors.ts
@@ -1,3 +1,5 @@
+import { useContext } from 'react'
+
 import type { Nullable, User, CommonState } from '@audius/common'
 import {
   Status,
@@ -8,7 +10,9 @@ import {
 import { useSelector } from 'react-redux'
 import { createSelector } from 'reselect'
 
+import { CollapsibleTabNavigatorContext } from 'app/components/top-tab-bar'
 import { useRoute } from 'app/hooks/useRoute'
+
 const { getProfileUser, getProfileStatus, makeGetProfile, getProfileUserId } =
   profilePageSelectors
 const { getAccountUser, getUserId } = accountSelectors
@@ -16,8 +20,12 @@ const { getAccountUser, getUserId } = accountSelectors
 /*
  * Selects profile user and ensures rerenders occur only for changes specified in deps
  */
-export const useSelectProfileRoot = <K extends keyof User>(deps: K[]) => {
-  const { params } = useRoute<'Profile'>()
+export const useSelectProfileRoot = <K extends keyof User>(
+  deps: K[],
+  paramsProp?: Record<string, unknown>
+) => {
+  const { params: paramsRoute } = useRoute<'Profile'>()
+  const params = paramsProp ?? paramsRoute
   const { handle } = params
   const isAccountUser = handle === 'accountUser'
 
@@ -35,7 +43,7 @@ export const useSelectProfileRoot = <K extends keyof User>(deps: K[]) => {
 
       return profileSlice
     },
-    [isAccountUser, ...deps]
+    [isAccountUser, ...deps, params.handle, params.id]
   )
   return profile as Nullable<Pick<User, K>>
 }
@@ -45,7 +53,8 @@ export const useSelectProfileRoot = <K extends keyof User>(deps: K[]) => {
  * components that wouldn't render if user wasn't present
  */
 export const useSelectProfile = <K extends keyof User>(deps: K[]) => {
-  return useSelectProfileRoot(deps) as Pick<User, K>
+  const { params } = useContext(CollapsibleTabNavigatorContext)
+  return useSelectProfileRoot(deps, params) as Pick<User, K>
 }
 
 export const getProfile = makeGetProfile()
diff --git a/packages/web/src/components/link/ExternalLink.tsx b/packages/web/src/components/link/ExternalLink.tsx
index 558bc34816..727f00f11b 100644
--- a/packages/web/src/components/link/ExternalLink.tsx
+++ b/packages/web/src/components/link/ExternalLink.tsx
@@ -1,6 +1,10 @@
 import { MouseEvent, useCallback } from 'react'
 
-import { Name, useLeavingAudiusModal } from '@audius/common'
+import {
+  Name,
+  isAllowedExternalLink,
+  useLeavingAudiusModal
+} from '@audius/common'
 
 import { make, useRecord } from 'common/store/analytics/actions'
 
@@ -10,20 +14,6 @@ type ExternalLinkProps = LinkProps & {
   source?: 'profile page' | 'track page' | 'collection page'
 }
 
-const allowList = [
-  'facebook.com',
-  'www.facebook.com',
-  'instagram.com',
-  'www.instagram.com',
-  'tiktok.com',
-  'www.tiktok.com',
-  'twitter.com',
-  'www.twitter.com',
-  'x.com',
-  'www.x.com',
-  'blog.audius.co'
-]
-
 export const ExternalLink = (props: ExternalLinkProps) => {
   const { to, onClick, source, ...other } = props
 
@@ -42,7 +32,7 @@ export const ExternalLink = (props: ExternalLinkProps) => {
           })
         )
       }
-      if (!allowList.includes(new URL(to as string).hostname)) {
+      if (typeof to === 'string' && !isAllowedExternalLink(to)) {
         event.preventDefault()
         openLeavingAudiusModal({ link: to as string })
       }
diff --git a/packages/web/src/utils/route.ts b/packages/web/src/utils/route.ts
index b4e5926401..ca1d564b48 100644
--- a/packages/web/src/utils/route.ts
+++ b/packages/web/src/utils/route.ts
@@ -131,6 +131,14 @@ export const AUDIUS_GATED_CONTENT_BLOG_LINK =
   'https://blog.audius.co/article/introducing-nft-collectible-gated-content'
 export const AUDIUS_CONTACT_EMAIL_LINK = 'mailto:contact@audius.co'
 
+export const externalInternalLinks = [
+  AUDIUS_PRESS_LINK,
+  AUDIUS_MERCH_LINK,
+  AUDIUS_REMIX_CONTESTS_LINK,
+  AUDIUS_BLOG_LINK,
+  'https://help.audius.co'
+]
+
 // Org Links
 export const AUDIUS_ORG = 'https://audius.org'
 export const AUDIUS_DOCS_LINK = 'https://docs.audius.org'