1 files changed, 12 insertions, 10 deletions
diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx
index 0b8015aa9..0e245f0f4 100644
--- a/src/view/com/profile/ProfileSubpageHeader.tsx
+++ b/src/view/com/profile/ProfileSubpageHeader.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
-import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -12,14 +11,16 @@ import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {CenteredView} from '../util/Views'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {makeProfileLink} from 'lib/routes/links'
-import {useStores} from 'state/index'
 import {NavigationProp} from 'lib/routes/types'
 import {BACK_HITSLOP} from 'lib/constants'
 import {isNative} from 'platform/detection'
-import {ImagesLightbox} from 'state/models/ui/shell'
+import {useLightboxControls, ImagesLightbox} from '#/state/lightbox'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
 import {useSetDrawerOpen} from '#/state/shell'
+import {emitSoftReset} from '#/state/events'
 
-export const ProfileSubpageHeader = observer(function HeaderImpl({
+export function ProfileSubpageHeader({
   isLoading,
   href,
   title,
@@ -42,10 +43,11 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
     | undefined
   avatarType: UserAvatarType
 }>) {
-  const store = useStores()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
   const {isMobile} = useWebMediaQueries()
+  const {openLightbox} = useLightboxControls()
   const pal = usePalette('default')
   const canGoBack = navigation.canGoBack()
 
@@ -65,9 +67,9 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
     if (
       avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
     ) {
-      store.shell.openLightbox(new ImagesLightbox([{uri: avatar}], 0))
+      openLightbox(new ImagesLightbox([{uri: avatar}], 0))
     }
-  }, [store, avatar])
+  }, [openLightbox, avatar])
 
   return (
     <CenteredView style={pal.view}>
@@ -123,7 +125,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
           testID="headerAviButton"
           onPress={onPressAvi}
           accessibilityRole="image"
-          accessibilityLabel="View the avatar"
+          accessibilityLabel={_(msg`View the avatar`)}
           accessibilityHint=""
           style={{width: 58}}>
           <UserAvatar type={avatarType} size={58} avatar={avatar} />
@@ -142,7 +144,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
               href={href}
               style={[pal.text, {fontWeight: 'bold'}]}
               text={title || ''}
-              onPress={() => store.emitScreenSoftReset()}
+              onPress={emitSoftReset}
               numberOfLines={4}
             />
           )}
@@ -178,7 +180,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
       </View>
     </CenteredView>
   )
-})
+}
 
 const styles = StyleSheet.create({
   backBtn: {