Replace the home header btns and account switcher with one profile menu

src/components/AccountList.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react'
-import {View} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -16,10 +16,14 @@ export function AccountList({
   onSelectAccount,
   onSelectOther,
   otherLabel,
+  excludeCurrent,
+  style,
 }: {
   onSelectAccount: (account: SessionAccount) => void
   onSelectOther: () => void
   otherLabel?: string
+  excludeCurrent?: boolean
+  style?: StyleProp<ViewStyle>
 }) {
   const {isSwitchingAccounts, currentAccount, accounts} = useSession()
   const t = useTheme()
@@ -29,6 +33,10 @@ export function AccountList({
     onSelectOther()
   }, [onSelectOther])
 
+  const filteredAccounts = excludeCurrent
+    ? accounts.filter(account => account.did !== currentAccount?.did)
+    : accounts
+
   return (
     <View
       style={[
@@ -36,8 +44,9 @@ export function AccountList({
         a.overflow_hidden,
         a.border,
         t.atoms.border_contrast_low,
+        style,
       ]}>
-      {accounts.map(account => (
+      {filteredAccounts.map(account => (
         <React.Fragment key={account.did}>
           <AccountItem
             account={account}

src/components/dialogs/SwitchAccount.tsx

@@ -1,61 +0,0 @@
-import React, {useCallback} from 'react'
-import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
-import {type SessionAccount, useSession} from '#/state/session'
-import {useLoggedOutViewControls} from '#/state/shell/logged-out'
-import {useCloseAllActiveElements} from '#/state/util'
-import {atoms as a} from '#/alf'
-import * as Dialog from '#/components/Dialog'
-import {AccountList} from '../AccountList'
-import {Text} from '../Typography'
-
-export function SwitchAccountDialog({
-  control,
-}: {
-  control: Dialog.DialogControlProps
-}) {
-  const {_} = useLingui()
-  const {currentAccount} = useSession()
-  const {onPressSwitchAccount} = useAccountSwitcher()
-  const {setShowLoggedOut} = useLoggedOutViewControls()
-  const closeAllActiveElements = useCloseAllActiveElements()
-
-  const onSelectAccount = useCallback(
-    (account: SessionAccount) => {
-      if (account.did === currentAccount?.did) {
-        control.close()
-      } else {
-        onPressSwitchAccount(account, 'SwitchAccount')
-      }
-    },
-    [currentAccount, control, onPressSwitchAccount],
-  )
-
-  const onPressAddAccount = useCallback(() => {
-    setShowLoggedOut(true)
-    closeAllActiveElements()
-  }, [setShowLoggedOut, closeAllActiveElements])
-
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
-      <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
-        <View style={[a.gap_lg]}>
-          <Text style={[a.text_2xl, a.font_bold]}>
-            <Trans>Switch Account</Trans>
-          </Text>
-
-          <AccountList
-            onSelectAccount={onSelectAccount}
-            onSelectOther={onPressAddAccount}
-            otherLabel={_(msg`Add account`)}
-          />
-        </View>
-      </Dialog.ScrollableInner>
-    </Dialog.Outer>
-  )
-}

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -50,7 +50,6 @@ function HomeHeaderLayoutDesktopAndTablet({
         <View style={[pal.view, pal.border, styles.bar, styles.topBar]}>
           <View style={[atoms.flex_row, atoms.align_end, atoms.gap_md]}>
             <Logo width={28} />
-            <Logotype width={84} style={{position: 'relative', top: 2}} />
           </View>
           <Link
             href="/settings"

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,24 +1,13 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import Animated from 'react-native-reanimated'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
-import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {HITSLOP_10} from 'lib/constants'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
 import {Logo} from '#/view/icons/Logo'
-import {Logotype} from '#/view/icons/Logotype'
 import {atoms} from '#/alf'
-import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
-import {Link as Link2} from '#/components/Link'
-import {IS_DEV} from '#/env'
-import {Link} from '../util/Link'
 
 export function HomeHeaderLayoutMobile({
   children,
@@ -27,10 +16,8 @@ export function HomeHeaderLayoutMobile({
   tabBarAnchor: JSX.Element | null | undefined
 }) {
   const pal = usePalette('default')
-  const {_} = useLingui()
   const {headerHeight} = useShellLayout()
   const {headerMinimalShellTransform} = useMinimalShellMode()
-  const {hasSession} = useSession()
 
   return (
     <Animated.View
@@ -41,36 +28,6 @@ export function HomeHeaderLayoutMobile({
       <View style={[pal.view, styles.topBar]}>
         <View style={[atoms.flex_row, atoms.align_end, atoms.gap_md]}>
           <Logo width={30} />
-          <Logotype width={80} />
-        </View>
-        <View
-          style={[
-            atoms.flex_row,
-            atoms.justify_end,
-            atoms.align_center,
-            atoms.gap_md,
-            pal.view,
-            {width: 100},
-          ]}>
-          {IS_DEV && false && (
-            <Link2 to="/sys/debug">
-              <ColorPalette size="md" />
-            </Link2>
-          )}
-          {hasSession && (
-            <Link
-              testID="viewHeaderHomeFeedPrefsBtn"
-              href="/settings"
-              hitSlop={HITSLOP_10}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Following Feed Preferences`)}
-              accessibilityHint="">
-              <FontAwesomeIcon
-                icon="sliders"
-                style={pal.textLight as FontAwesomeIconStyle}
-              />
-            </Link>
-          )}
         </View>
       </View>
       {children}
@@ -90,7 +47,7 @@ const styles = StyleSheet.create({
   },
   topBar: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'space-around',
     alignItems: 'center',
     paddingHorizontal: 18,
     paddingVertical: 8,

src/view/screens/Settings/index.tsx

@@ -42,12 +42,12 @@ import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useAnalytics} from 'lib/analytics/analytics'
 import * as AppInfo from 'lib/app-info'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL, STATUS_PAGE_URL} from 'lib/constants'
+import {STATUS_PAGE_URL} from 'lib/constants'
 import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher'
 import {useCustomPalette} from 'lib/hooks/useCustomPalette'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {HandIcon, HashtagIcon, ListIcon} from 'lib/icons'
+import {HandIcon, HashtagIcon} from 'lib/icons'
 import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {NavigationProp} from 'lib/routes/types'
@@ -61,7 +61,6 @@ import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ScrollView} from 'view/com/util/Views'
-import {atoms as a, useThemeName} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 import {navigate, resetToTab} from '#/Navigation'
@@ -271,10 +270,6 @@ export function SettingsScreen({}: Props) {
     navigation.navigate('SavedFeeds')
   }, [navigation])
 
-  const onPressLists = React.useCallback(() => {
-    navigation.navigate('Lists')
-  }, [navigation])
-
   const onPressAccessibilitySettings = React.useCallback(() => {
     navigation.navigate('AccessibilitySettings')
   }, [navigation])
@@ -320,66 +315,6 @@ export function SettingsScreen({}: Props) {
         scrollIndicatorInsets={{right: 1}}
         // @ts-ignore web only -prf
         dataSet={{'stable-gutters': 1}}>
-        <FeedbackAndHelp />
-        <TouchableOpacity
-          testID="moderationBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={
-            isSwitchingAccounts
-              ? undefined
-              : () => navigation.navigate('Moderation')
-          }
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Moderation settings`)}
-          accessibilityHint={_(msg`Opens moderation settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <HandIcon style={pal.text} size={18} strokeWidth={6} />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>Moderation</Trans>
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          testID="savedFeedsBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={onPressSavedFeeds}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`My saved feeds`)}
-          accessibilityHint={_(msg`Opens screen with all saved feeds`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <HashtagIcon style={pal.text} size={18} strokeWidth={3} />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>My Saved Feeds</Trans>
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          testID="listsBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={onPressLists}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`My lists`)}
-          accessibilityHint={_(msg`Opens screen with all my lists`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <ListIcon strokeWidth={3} style={pal.text} size={18} />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>My Lists</Trans>
-          </Text>
-        </TouchableOpacity>
-
         <View style={styles.spacer20} />
 
         {currentAccount ? (
@@ -624,6 +559,46 @@ export function SettingsScreen({}: Props) {
             <Trans>Languages</Trans>
           </Text>
         </TouchableOpacity>
+        <TouchableOpacity
+          testID="moderationBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={
+            isSwitchingAccounts
+              ? undefined
+              : () => navigation.navigate('Moderation')
+          }
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Moderation settings`)}
+          accessibilityHint={_(msg`Opens moderation settings`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <HandIcon style={pal.text} size={18} strokeWidth={6} />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>Moderation</Trans>
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID="savedFeedsBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={onPressSavedFeeds}
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`My saved feeds`)}
+          accessibilityHint={_(msg`Opens screen with all saved feeds`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <HashtagIcon style={pal.text} size={18} strokeWidth={3} />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>My Saved Feeds</Trans>
+          </Text>
+        </TouchableOpacity>
 
         <View style={styles.spacer20} />
 
@@ -964,88 +939,6 @@ function EmailConfirmationNotice() {
   )
 }
 
-function FeedbackAndHelp() {
-  const themeName = useThemeName()
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {track} = useAnalytics()
-  const {currentAccount} = useSession()
-
-  const onPressFeedback = React.useCallback(() => {
-    track('Menu:FeedbackClicked')
-    Linking.openURL(
-      FEEDBACK_FORM_URL({
-        email: currentAccount?.email,
-        handle: currentAccount?.handle,
-      }),
-    )
-  }, [track, currentAccount])
-
-  const onPressHelp = React.useCallback(() => {
-    track('Menu:HelpClicked')
-    Linking.openURL(HELP_DESK_URL)
-  }, [track])
-
-  return (
-    <View
-      style={[
-        a.flex_row,
-        a.flex_wrap,
-        a.gap_md,
-        a.px_lg,
-        a.py_sm,
-        pal.view,
-        {marginBottom: 1},
-      ]}>
-      <TouchableOpacity
-        accessibilityRole="link"
-        accessibilityLabel={_(msg`Send feedback`)}
-        accessibilityHint=""
-        onPress={onPressFeedback}
-        style={[
-          a.flex_1,
-          a.flex_row,
-          a.align_center,
-          a.justify_center,
-          a.p_md,
-          a.rounded_md,
-          themeName === 'light'
-            ? {backgroundColor: '#DDEFFF'}
-            : {backgroundColor: colors.blue6},
-        ]}>
-        <FontAwesomeIcon
-          style={pal.link as FontAwesomeIconStyle}
-          size={18}
-          icon={['far', 'message']}
-        />
-        <Text type="lg-medium" style={[pal.link, s.pl10]}>
-          <Trans>Feedback</Trans>
-        </Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        accessibilityRole="link"
-        accessibilityLabel={_(msg`Send feedback`)}
-        accessibilityHint=""
-        onPress={onPressHelp}
-        style={[
-          a.flex_1,
-          a.flex_row,
-          a.align_center,
-          a.justify_center,
-          a.p_md,
-          a.rounded_md,
-          themeName === 'light'
-            ? {backgroundColor: '#DDEFFF'}
-            : {backgroundColor: colors.blue6},
-        ]}>
-        <Text type="lg-medium" style={[pal.link, s.pl10]}>
-          <Trans>Help</Trans>
-        </Text>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5,

src/view/shell/bottom-bar/BottomBar.tsx

@@ -8,7 +8,6 @@ import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
 import {StackActions} from '@react-navigation/native'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
-import {useHaptics} from '#/lib/haptics'
 import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
@@ -38,8 +37,8 @@ import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {useDialogControl} from '#/components/Dialog'
-import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
 import {styles} from './BottomBarStyles'
+import {ProfileMenuDialog} from '../profile-menu'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
@@ -58,8 +57,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
   const dedupe = useDedupe()
-  const accountSwitchControl = useDialogControl()
-  const playHaptic = useHaptics()
+  const profileMenuControl = useDialogControl()
 
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
@@ -101,17 +99,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
     [onPressTab],
   )
   const onPressProfile = React.useCallback(() => {
-    onPressTab('MyProfile')
-  }, [onPressTab])
-
-  const onLongPressProfile = React.useCallback(() => {
-    playHaptic()
-    accountSwitchControl.open()
-  }, [accountSwitchControl, playHaptic])
+    profileMenuControl.open()
+  }, [profileMenuControl])
 
   return (
     <>
-      <SwitchAccountDialog control={accountSwitchControl} />
+      <ProfileMenuDialog control={profileMenuControl} onPressTab={onPressTab} />
 
       <Animated.View
         style={[
@@ -256,7 +249,6 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 </View>
               }
               onPress={onPressProfile}
-              onLongPress={onLongPressProfile}
               accessibilityRole="tab"
               accessibilityLabel={_(msg`Profile`)}
               accessibilityHint=""

src/view/shell/profile-menu/index.tsx

@@ -0,0 +1,263 @@
+import React, {useCallback} from 'react'
+import {Linking, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
+import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
+import {useProfileQuery} from '#/state/queries/profile'
+import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+import {NavigationProp} from 'lib/routes/types'
+import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme} from '#/alf'
+import {AccountList} from '#/components/AccountList'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
+import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsGear} from '#/components/icons/Gear'
+import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
+import {RaisingHande4Finger_Stroke2_Corner0_Rounded as RaisingHand} from '#/components/icons/RaisingHand'
+import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
+import {Text} from '#/components/Typography'
+import {resetToTab} from '#/Navigation'
+
+export function ProfileMenuDialog({
+  control,
+  onPressTab,
+}: {
+  control: Dialog.DialogControlProps
+  onPressTab: (tab: 'MyProfile') => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {currentAccount} = useSession()
+  const {logout} = useSessionApi()
+  const {onPressSwitchAccount} = useAccountSwitcher()
+  const {setShowLoggedOut} = useLoggedOutViewControls()
+  const navigation = useNavigation<NavigationProp>()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const onPressProfile = useCallback(() => {
+    control.close()
+    onPressTab('MyProfile')
+  }, [control, onPressTab])
+
+  const onPressLink = useCallback(
+    (screen: 'Lists' | 'Moderation' | 'Settings') => {
+      control.close()
+      navigation.navigate(screen)
+    },
+    [control, navigation],
+  )
+
+  const onSelectAccount = useCallback(
+    (account: SessionAccount) => {
+      if (account.did === currentAccount?.did) {
+        control.close()
+      } else {
+        onPressSwitchAccount(account, 'SwitchAccount')
+      }
+    },
+    [currentAccount, control, onPressSwitchAccount],
+  )
+
+  const onPressAddAccount = useCallback(() => {
+    setShowLoggedOut(true)
+    closeAllActiveElements()
+  }, [setShowLoggedOut, closeAllActiveElements])
+
+  const onPressSignOut = useCallback(() => {
+    logout('Settings')
+    resetToTab('HomeTab')
+    closeAllActiveElements()
+  }, [logout, closeAllActiveElements])
+
+  const onPressFeedback = React.useCallback(() => {
+    Linking.openURL(
+      FEEDBACK_FORM_URL({
+        email: currentAccount?.email,
+        handle: currentAccount?.handle,
+      }),
+    )
+  }, [currentAccount])
+
+  const onPressHelp = React.useCallback(() => {
+    Linking.openURL(HELP_DESK_URL)
+  }, [])
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
+        <View style={[a.gap_sm]}>
+          <ProfileCard onPress={onPressProfile} />
+
+          <View style={[a.flex_row, a.gap_sm]}>
+            <View style={[a.flex_1]}>
+              <Button
+                color="secondary"
+                variant="solid"
+                size="medium"
+                label={_(msg`Lists`)}
+                onPress={() => onPressLink('Lists')}
+                style={[
+                  t.atoms.border_contrast_low,
+                  a.border,
+                  a.justify_start,
+                ]}>
+                <ButtonIcon position="left" icon={ListSparkle} />
+                <ButtonText numberOfLines={1}>
+                  <Trans>Lists</Trans>
+                </ButtonText>
+              </Button>
+            </View>
+            <View style={[a.flex_1]}>
+              <Button
+                color="secondary"
+                variant="solid"
+                size="medium"
+                label={_(msg`Moderation`)}
+                onPress={() => onPressLink('Moderation')}
+                style={[
+                  t.atoms.border_contrast_low,
+                  a.border,
+                  a.justify_start,
+                ]}>
+                <ButtonIcon position="left" icon={RaisingHand} />
+                <ButtonText numberOfLines={1}>
+                  <Trans>Moderation</Trans>
+                </ButtonText>
+              </Button>
+            </View>
+          </View>
+
+          <Button
+            color="secondary"
+            variant="solid"
+            size="medium"
+            label={_(msg`Settings`)}
+            onPress={() => onPressLink('Settings')}
+            style={[t.atoms.border_contrast_low, a.border, a.justify_start]}>
+            <ButtonIcon position="left" icon={SettingsGear} />
+            <ButtonText>
+              <Trans>Settings</Trans>
+            </ButtonText>
+          </Button>
+
+          <Text style={[a.font_bold, t.atoms.text, a.mt_sm]}>
+            <Trans>Accounts</Trans>
+          </Text>
+          <AccountList
+            onSelectAccount={onSelectAccount}
+            onSelectOther={onPressAddAccount}
+            otherLabel={_(msg`Add account`)}
+            excludeCurrent
+            style={[t.atoms.bg_contrast_25]}
+          />
+
+          <Button
+            color="secondary"
+            variant="solid"
+            size="medium"
+            label={_(msg`Sign Out`)}
+            onPress={onPressSignOut}
+            style={[t.atoms.border_contrast_low, a.border, a.justify_start]}>
+            <ButtonIcon position="left" icon={SquareArrowTopRight} />
+            <ButtonText>
+              <Trans>Sign Out</Trans>
+            </ButtonText>
+          </Button>
+
+          <View style={[a.flex_row, a.gap_sm]}>
+            <View style={[a.flex_1]}>
+              <Button
+                color="secondary"
+                variant="solid"
+                size="medium"
+                label={_(msg`Feedback`)}
+                onPress={onPressFeedback}
+                style={[
+                  t.atoms.border_contrast_low,
+                  a.border,
+                  a.justify_start,
+                ]}>
+                <ButtonText numberOfLines={1}>
+                  <Trans>Feedback</Trans>
+                </ButtonText>
+              </Button>
+            </View>
+            <View style={[a.flex_1]}>
+              <Button
+                color="secondary"
+                variant="solid"
+                size="medium"
+                label={_(msg`Help`)}
+                onPress={onPressHelp}
+                style={[
+                  t.atoms.border_contrast_low,
+                  a.border,
+                  a.justify_start,
+                ]}>
+                <ButtonText numberOfLines={1}>
+                  <Trans>Help</Trans>
+                </ButtonText>
+              </Button>
+            </View>
+          </View>
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function ProfileCard({onPress}: {onPress: () => void}) {
+  const t = useTheme()
+  const {currentAccount} = useSession()
+  const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
+  const {_} = useLingui()
+  const size = 48
+
+  return (
+    <View style={[a.mb_md]}>
+      {!isLoading && profile ? (
+        <Button label={_(msg`My Profile`)} onPress={onPress}>
+          {() => (
+            <View style={[a.flex_row, a.gap_md, a.align_center]}>
+              <UserAvatar
+                avatar={profile.avatar}
+                size={size}
+                type={profile?.associated?.labeler ? 'labeler' : 'user'}
+              />
+              <View style={[a.flex_1]}>
+                <Text
+                  style={[a.text_lg, a.font_bold, t.atoms.text]}
+                  numberOfLines={1}>
+                  {profile.displayName || profile.handle}
+                </Text>
+                <Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
+                  @{profile.handle}
+                </Text>
+              </View>
+              <View>
+                <ChevronRight fill={t.atoms.text_contrast_low.color} />
+              </View>
+            </View>
+          )}
+        </Button>
+      ) : (
+        <View>
+          <LoadingPlaceholder
+            width={size}
+            height={size}
+            style={{borderRadius: size}}
+          />
+        </View>
+      )}
+    </View>
+  )
+}