Update DM header to match new Layout style (#8846)

src/components/dms/MessagesListHeader.tsx

@@ -1,48 +1,42 @@
-import React, {useCallback} from 'react'
-import {TouchableOpacity, View} from 'react-native'
+import {useMemo} from 'react'
+import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
   type ModerationCause,
   type ModerationDecision,
 } from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
 
-import {BACK_HITSLOP} from '#/lib/constants'
 import {makeProfileLink} from '#/lib/routes/links'
-import {type NavigationProp} from '#/lib/routes/types'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isWeb} from '#/platform/detection'
 import {type Shadow} from '#/state/cache/profile-shadow'
 import {isConvoActive, useConvo} from '#/state/messages/convo'
 import {type ConvoItem} from '#/state/messages/convo/types'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
+import * as Layout from '#/components/Layout'
 import {Link} from '#/components/Link'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
 
-const PFP_SIZE = isWeb ? 40 : 34
+const PFP_SIZE = isWeb ? 40 : Layout.HEADER_SLOT_SIZE
 
-export let MessagesListHeader = ({
+export function MessagesListHeader({
   profile,
   moderation,
 }: {
   profile?: Shadow<AppBskyActorDefs.ProfileViewDetailed>
   moderation?: ModerationDecision
-}): React.ReactNode => {
+}) {
   const t = useTheme()
-  const {_} = useLingui()
-  const {gtTablet} = useBreakpoints()
-  const navigation = useNavigation<NavigationProp>()
 
-  const blockInfo = React.useMemo(() => {
+  const blockInfo = useMemo(() => {
     if (!moderation) return
     const modui = moderation.ui('profileView')
     const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
@@ -54,87 +48,54 @@ export let MessagesListHeader = ({
     }
   }, [moderation])
 
-  const onPressBack = useCallback(() => {
-    if (navigation.canGoBack()) {
-      navigation.goBack()
-    } else {
-      navigation.navigate('Messages', {})
-    }
-  }, [navigation])
-
   return (
-    <View
-      style={[
-        t.atoms.bg,
-        t.atoms.border_contrast_low,
-        a.border_b,
-        a.flex_row,
-        a.align_start,
-        a.gap_sm,
-        gtTablet ? a.pl_lg : a.pl_xl,
-        a.pr_lg,
-        a.py_sm,
-      ]}>
-      <TouchableOpacity
-        testID="conversationHeaderBackBtn"
-        onPress={onPressBack}
-        hitSlop={BACK_HITSLOP}
-        style={{width: 30, height: 30, marginTop: isWeb ? 6 : 4}}
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`Back`)}
-        accessibilityHint="">
-        <FontAwesomeIcon
-          size={18}
-          icon="angle-left"
-          style={{
-            marginTop: 6,
-          }}
-          color={t.atoms.text.color}
-        />
-      </TouchableOpacity>
-
-      {profile && moderation && blockInfo ? (
-        <HeaderReady
-          profile={profile}
-          moderation={moderation}
-          blockInfo={blockInfo}
-        />
-      ) : (
-        <>
-          <View style={[a.flex_row, a.align_center, a.gap_md, a.flex_1]}>
-            <View
-              style={[
-                {width: PFP_SIZE, height: PFP_SIZE},
-                a.rounded_full,
-                t.atoms.bg_contrast_25,
-              ]}
-            />
-            <View style={a.gap_xs}>
+    <Layout.Header.Outer>
+      <View style={[a.w_full, a.flex_row, a.gap_xs, a.align_start]}>
+        <View style={[{minHeight: PFP_SIZE}, a.justify_center]}>
+          <Layout.Header.BackButton />
+        </View>
+        {profile && moderation && blockInfo ? (
+          <HeaderReady
+            profile={profile}
+            moderation={moderation}
+            blockInfo={blockInfo}
+          />
+        ) : (
+          <>
+            <View style={[a.flex_row, a.align_center, a.gap_md, a.flex_1]}>
               <View
                 style={[
-                  {width: 120, height: 16},
-                  a.rounded_xs,
-                  t.atoms.bg_contrast_25,
-                  a.mt_xs,
-                ]}
-              />
-              <View
-                style={[
-                  {width: 175, height: 12},
-                  a.rounded_xs,
+                  {width: PFP_SIZE, height: PFP_SIZE},
+                  a.rounded_full,
                   t.atoms.bg_contrast_25,
                 ]}
               />
+              <View style={a.gap_xs}>
+                <View
+                  style={[
+                    {width: 120, height: 16},
+                    a.rounded_xs,
+                    t.atoms.bg_contrast_25,
+                    a.mt_xs,
+                  ]}
+                />
+                <View
+                  style={[
+                    {width: 175, height: 12},
+                    a.rounded_xs,
+                    t.atoms.bg_contrast_25,
+                  ]}
+                />
+              </View>
             </View>
-          </View>
 
-          <View style={{width: 30}} />
-        </>
-      )}
-    </View>
+            <Layout.Header.Slot />
+          </>
+        )}
+      </View>
+    </Layout.Header.Outer>
   )
 }
-MessagesListHeader = React.memo(MessagesListHeader)
 
 function HeaderReady({
   profile,
@@ -181,15 +142,13 @@ function HeaderReady({
           label={_(msg`View ${displayName}'s profile`)}
           style={[a.flex_row, a.align_start, a.gap_md, a.flex_1, a.pr_md]}
           to={makeProfileLink(profile)}>
-          <View style={[a.pt_2xs]}>
-            <PreviewableUserAvatar
-              size={PFP_SIZE}
-              profile={profile}
-              moderation={moderation.ui('avatar')}
-              disableHoverCard={moderation.blocked}
-            />
-          </View>
-          <View style={a.flex_1}>
+          <PreviewableUserAvatar
+            size={PFP_SIZE}
+            profile={profile}
+            moderation={moderation.ui('avatar')}
+            disableHoverCard={moderation.blocked}
+          />
+          <View style={[a.flex_1]}>
             <View style={[a.flex_row, a.align_center]}>
               <Text
                 emoji
@@ -215,7 +174,7 @@ function HeaderReady({
               <Text
                 style={[
                   t.atoms.text_contrast_medium,
-                  a.text_sm,
+                  a.text_xs,
                   web([a.leading_normal, {marginTop: -2}]),
                 ]}
                 numberOfLines={1}>
@@ -235,15 +194,19 @@ function HeaderReady({
           </View>
         </Link>
 
-        {isConvoActive(convoState) && (
-          <ConvoMenu
-            convo={convoState.convo}
-            profile={profile}
-            currentScreen="conversation"
-            blockInfo={blockInfo}
-            latestReportableMessage={latestReportableMessage}
-          />
-        )}
+        <View style={[{minHeight: PFP_SIZE}, a.justify_center]}>
+          <Layout.Header.Slot>
+            {isConvoActive(convoState) && (
+              <ConvoMenu
+                convo={convoState.convo}
+                profile={profile}
+                currentScreen="conversation"
+                blockInfo={blockInfo}
+                latestReportableMessage={latestReportableMessage}
+              />
+            )}
+          </Layout.Header.Slot>
+        </View>
       </View>
 
       <View