move menu components out to separate component

src/view/shell/desktop/LeftNav.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -23,7 +24,7 @@ import {useFetchHandle} from '#/state/queries/handle'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfilesQuery} from '#/state/queries/profile'
-import {useSession, useSessionApi} from '#/state/session'
+import {SessionAccount, useSession, useSessionApi} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
@@ -33,6 +34,7 @@ import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {DialogControlProps} from '#/components/Dialog'
 import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
 import {
   Bell_Filled_Corner0_Rounded as BellFilled,
@@ -77,7 +79,6 @@ const NAV_ICON_WIDTH = 28
 
 function ProfileCard() {
   const {currentAccount, accounts} = useSession()
-  const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
   const {logoutEveryAccount} = useSessionApi()
   const {isLoading, data} = useProfilesQuery({
     handles: accounts.map(acc => acc.did),
@@ -86,17 +87,10 @@ function ProfileCard() {
   const signOutPromptControl = Prompt.usePromptControl()
   const {gtTablet} = useBreakpoints()
   const {_} = useLingui()
-  const {setShowLoggedOut} = useLoggedOutViewControls()
-  const closeEverything = useCloseAllActiveElements()
   const t = useTheme()
 
   const size = 48
 
-  const onAddAnotherAccount = () => {
-    setShowLoggedOut(true)
-    closeEverything()
-  }
-
   const profile = profiles?.find(p => p.did === currentAccount!.did)
   const otherAccounts = accounts
     .filter(acc => acc.did !== currentAccount!.did)
@@ -162,14 +156,61 @@ function ProfileCard() {
               )
             }}
           </Menu.Trigger>
+          <SwitchMenuItems
+            accounts={otherAccounts}
+            signOutPromptControl={signOutPromptControl}
+          />
+        </Menu.Root>
+      ) : (
+        <LoadingPlaceholder
+          width={size}
+          height={size}
+          style={[{borderRadius: size}, gtTablet && a.ml_lg]}
+        />
+      )}
+      <Prompt.Basic
+        control={signOutPromptControl}
+        title={_(msg`Sign out?`)}
+        description={_(msg`You will be signed out of all your accounts.`)}
+        onConfirm={() => logoutEveryAccount('Settings')}
+        confirmButtonCta={_(msg`Sign out`)}
+        cancelButtonCta={_(msg`Cancel`)}
+        confirmButtonColor="negative"
+      />
+    </View>
+  )
+}
+
+function SwitchMenuItems({
+  accounts,
+  signOutPromptControl,
+}: {
+  accounts:
+    | {
+        account: SessionAccount
+        profile?: AppBskyActorDefs.ProfileView
+      }[]
+    | undefined
+  signOutPromptControl: DialogControlProps
+}) {
+  const {_} = useLingui()
+  const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
+  const {setShowLoggedOut} = useLoggedOutViewControls()
+  const closeEverything = useCloseAllActiveElements()
+
+  const onAddAnotherAccount = () => {
+    setShowLoggedOut(true)
+    closeEverything()
+  }
+  return (
     <Menu.Outer>
-            {otherAccounts && otherAccounts.length > 0 && (
+      {accounts && accounts.length > 0 && (
         <>
           <Menu.Group>
             <Menu.LabelText>
               <Trans>Switch account</Trans>
             </Menu.LabelText>
-                  {otherAccounts?.map(other => (
+            {accounts.map(other => (
               <Menu.Item
                 disabled={!!pendingDid}
                 style={[{minWidth: 150}]}
@@ -188,9 +229,7 @@ function ProfileCard() {
                     avatar={other.profile?.avatar}
                     size={20}
                     type={
-                            other.profile?.associated?.labeler
-                              ? 'labeler'
-                              : 'user'
+                      other.profile?.associated?.labeler ? 'labeler' : 'user'
                     }
                   />
                 </View>
@@ -214,33 +253,13 @@ function ProfileCard() {
           <Trans>Add another account</Trans>
         </Menu.ItemText>
       </Menu.Item>
-            <Menu.Item
-              label={_(msg`Sign out`)}
-              onPress={signOutPromptControl.open}>
+      <Menu.Item label={_(msg`Sign out`)} onPress={signOutPromptControl.open}>
         <Menu.ItemIcon icon={LeaveIcon} />
         <Menu.ItemText>
           <Trans>Sign out</Trans>
         </Menu.ItemText>
       </Menu.Item>
     </Menu.Outer>
-        </Menu.Root>
-      ) : (
-        <LoadingPlaceholder
-          width={size}
-          height={size}
-          style={[{borderRadius: size}, gtTablet && a.ml_lg]}
-        />
-      )}
-      <Prompt.Basic
-        control={signOutPromptControl}
-        title={_(msg`Sign out?`)}
-        description={_(msg`You will be signed out of all your accounts.`)}
-        onConfirm={() => logoutEveryAccount('Settings')}
-        confirmButtonCta={_(msg`Sign out`)}
-        cancelButtonCta={_(msg`Cancel`)}
-        confirmButtonColor="negative"
-      />
-    </View>
   )
 }