add avatar to bottom bar on web

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

@@ -14,15 +14,19 @@ import {useGate} from '#/lib/statsig/statsig'
 import {useHomeBadge} from '#/state/home-badge'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useCloseAllActiveElements} from '#/state/util'
 import {Link} from '#/view/com/util/Link'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
 import {
   Bell_Filled_Corner0_Rounded as BellFilled,
   Bell_Stroke2_Corner0_Rounded as Bell,
@@ -37,10 +41,6 @@ import {
   Message_Stroke2_Corner0_Rounded as Message,
   Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
 } from '#/components/icons/Message'
-import {
-  UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
-  UserCircle_Stroke2_Corner0_Rounded as UserCircle,
-} from '#/components/icons/UserCircle'
 import {Text} from '#/components/Typography'
 import {styles} from './BottomBarStyles'
 
@@ -53,6 +53,8 @@ export function BottomBarWeb() {
   const closeAllActiveElements = useCloseAllActiveElements()
   const {footerHeight} = useShellLayout()
   const hideBorder = useHideBottomBarBorder()
+  const accountSwitchControl = useDialogControl()
+  const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const iconWidth = 26
 
   const unreadMessageCount = useUnreadMessageCount()
@@ -71,7 +73,14 @@ export function BottomBarWeb() {
     // setShowLoggedOut(true)
   }, [requestSwitchToAccount, closeAllActiveElements])
 
+  const onLongPressProfile = React.useCallback(() => {
+    accountSwitchControl.open()
+  }, [accountSwitchControl])
+
   return (
+    <>
+      <SwitchAccountDialog control={accountSwitchControl} />
+
       <Animated.View
         role="navigation"
         style={[
@@ -160,21 +169,29 @@ export function BottomBarWeb() {
                           handle: currentAccount.handle,
                         })
                       : '/'
-                }>
+                  }
-                {({isActive}) => {
+                  onLongPress={onLongPressProfile}>
-                  const Icon = isActive ? UserCircleFilled : UserCircle
+                  {({isActive}) => (
-                  return (
+                    <View style={styles.ctrlIconSizingWrapper}>
-                    <Icon
+                      <View
-                      aria-hidden={true}
-                      width={iconWidth}
                         style={[
                           styles.ctrlIcon,
-                        t.atoms.text,
                           styles.profileIcon,
-                      ]}
+                          isActive && [
+                            styles.onProfile,
+                            {borderColor: t.atoms.text.color},
+                          ],
+                        ]}>
+                        <UserAvatar
+                          avatar={profile?.avatar}
+                          size={iconWidth - 3}
+                          type={
+                            profile?.associated?.labeler ? 'labeler' : 'user'
+                          }
                         />
-                  )
+                      </View>
-                }}
+                    </View>
+                  )}
                 </NavItem>
               </>
             )}
@@ -193,7 +210,8 @@ export function BottomBarWeb() {
                 paddingRight: 6,
                 gap: 8,
               }}>
-            <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
+              <View
+                style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
                 <Logo width={32} />
                 <View style={{paddingTop: 4}}>
                   <Logotype width={80} fill={t.atoms.text.color} />
@@ -226,6 +244,7 @@ export function BottomBarWeb() {
           </>
         )}
       </Animated.View>
+    </>
   )
 }
 
@@ -235,7 +254,8 @@ const NavItem: React.FC<{
   routeName: string
   hasNew?: boolean
   notificationCount?: string
-}> = ({children, href, routeName, hasNew, notificationCount}) => {
+  onLongPress?: () => void
+}> = ({children, href, routeName, hasNew, notificationCount, onLongPress}) => {
   const t = useTheme()
   const {_} = useLingui()
   const {currentAccount} = useSession()
@@ -269,7 +289,8 @@ const NavItem: React.FC<{
       navigationAction={isOnDifferentProfile ? 'push' : 'navigate'}
       aria-role="link"
       aria-label={routeName}
-      accessible={true}>
+      accessible={true}
+      onLongPress={onLongPress}>
       {children({isActive})}
       {notificationCount ? (
         <View