[🐴] Show if user can be messaged in new chat search (#4021)

* show if user can be messaged

* allow 2 lines in handle field due to new text

* cannot -> can't

* rework canBeMessaged logic and move to new file

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 9 insertions, 9 deletions

diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx
index aa47e9503..0a0f8c575 100644
--- a/src/screens/Messages/List/ChatListItem.tsx
+++ b/src/screens/Messages/List/ChatListItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {
   AppBskyActorDefs,
@@ -88,22 +88,22 @@ function ChatListItemReady({
   }
 
   const navigation = useNavigation<NavigationProp>()
-  const [showActions, setShowActions] = React.useState(false)
+  const [showActions, setShowActions] = useState(false)
 
-  const onMouseEnter = React.useCallback(() => {
+  const onMouseEnter = useCallback(() => {
     setShowActions(true)
   }, [])
 
-  const onMouseLeave = React.useCallback(() => {
+  const onMouseLeave = useCallback(() => {
     setShowActions(false)
   }, [])
 
-  const onFocus = React.useCallback<React.FocusEventHandler>(e => {
+  const onFocus = useCallback<React.FocusEventHandler>(e => {
     if (e.nativeEvent.relatedTarget == null) return
     setShowActions(true)
   }, [])
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     navigation.push('MessagesConversation', {
       conversation: convo.id,
     })
@@ -119,9 +119,9 @@ function ChatListItemReady({
       <Button
         label={profile.displayName || profile.handle}
         onPress={onPress}
-        style={a.flex_1}
+        style={[a.flex_1]}
         onLongPress={isNative ? menuControl.open : undefined}>
-        {({hovered, pressed}) => (
+        {({hovered, pressed, focused}) => (
           <View
             style={[
               a.flex_row,
@@ -129,7 +129,7 @@ function ChatListItemReady({
               a.px_lg,
               a.py_md,
               a.gap_md,
-              (hovered || pressed) && t.atoms.bg_contrast_25,
+              (hovered || pressed || focused) && t.atoms.bg_contrast_25,
               t.atoms.border_contrast_low,
             ]}>
             <UserAvatar