Fix chat request buttons not moving with swipe gesture (#9155)

* portal in buttons so they move with swipe

* remove outline style buttons

src/screens/Messages/components/ChatListItem.tsx

@@ -42,11 +42,14 @@ import {Trash_Stroke2_Corner0_Rounded} from '#/components/icons/Trash'
 import {Link} from '#/components/Link'
 import {useMenuControl} from '#/components/Menu'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
+import {createPortalGroup} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
 import type * as bsky from '#/types/bsky'
 
+export const ChatListItemPortal = createPortalGroup()
+
 export let ChatListItem = ({
   convo,
   showMenu = true,
@@ -331,6 +334,7 @@ function ChatListItemReady({
   const hasUnread = convo.unreadCount > 0 && !isDeletedAccount
 
   return (
+    <ChatListItemPortal.Provider>
       <GestureActionView actions={actions}>
         <View
           onMouseEnter={onMouseEnter}
@@ -365,8 +369,14 @@ function ChatListItemReady({
             accessibilityActions={
               isNative
                 ? [
-                  {name: 'magicTap', label: _(msg`Open conversation options`)},
-                  {name: 'longpress', label: _(msg`Open conversation options`)},
+                    {
+                      name: 'magicTap',
+                      label: _(msg`Open conversation options`),
+                    },
+                    {
+                      name: 'longpress',
+                      label: _(msg`Open conversation options`),
+                    },
                   ]
                 : undefined
             }
@@ -450,7 +460,11 @@ function ChatListItemReady({
                   {!isDeletedAccount && (
                     <Text
                       numberOfLines={1}
-                    style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}>
+                      style={[
+                        a.text_sm,
+                        t.atoms.text_contrast_medium,
+                        a.pb_xs,
+                      ]}>
                       @{profile.handle}
                     </Text>
                   )}
@@ -497,6 +511,8 @@ function ChatListItemReady({
             )}
           </Link>
 
+          <ChatListItemPortal.Outlet />
+
           {showMenu && (
             <ConvoMenu
               convo={convo}
@@ -513,7 +529,8 @@ function ChatListItemReady({
                 a.justify_center,
                 {
                   right: tokens.space.lg,
-                opacity: !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
+                  opacity:
+                    !gtMobile || showActions || menuControl.isOpen ? 1 : 0,
                 },
               ]}
               latestReportableMessage={latestReportableMessage}
@@ -526,5 +543,6 @@ function ChatListItemReady({
           />
         </View>
       </GestureActionView>
+    </ChatListItemPortal.Provider>
   )
 }

src/screens/Messages/components/ChatStatusInfo.tsx

@@ -46,7 +46,7 @@ export function ChatStatusInfo({convoState}: {convoState: ActiveConvoStates}) {
             label={_(msg`Block or report`)}
             convo={convoState.convo}
             profile={otherUser}
-            color="negative"
+            color="negative_subtle"
             size="small"
             currentScreen="conversation"
           />
@@ -70,8 +70,7 @@ export function ChatStatusInfo({convoState}: {convoState: ActiveConvoStates}) {
         <AcceptChatButton
           onAcceptConvo={onAcceptChat}
           convo={convoState.convo}
-          color="primary"
-          variant="outline"
+          color="primary_subtle"
           size="small"
           currentScreen="conversation"
         />

src/screens/Messages/components/RequestButtons.tsx

@@ -36,7 +36,6 @@ export function RejectMenu({
   convo,
   profile,
   size = 'tiny',
-  variant = 'outline',
   color = 'secondary',
   label,
   showDeleteConvo,
@@ -117,7 +116,6 @@ export function RejectMenu({
               label={triggerProps.accessibilityLabel}
               style={[a.flex_1]}
               color={color}
-              variant={variant}
               size={size}>
               <ButtonText>
                 {label || (
@@ -129,7 +127,7 @@ export function RejectMenu({
             </Button>
           )}
         </Menu.Trigger>
-        <Menu.Outer>
+        <Menu.Outer showCancel>
           <Menu.Group>
             {showDeleteConvo && (
               <Menu.Item
@@ -181,7 +179,6 @@ export function RejectMenu({
 export function AcceptChatButton({
   convo,
   size = 'tiny',
-  variant = 'solid',
   color = 'secondary_inverted',
   label,
   currentScreen,
@@ -248,7 +245,6 @@ export function AcceptChatButton({
       {...props}
       label={label || _(msg`Accept chat request`)}
       size={size}
-      variant={variant}
       color={color}
       style={a.flex_1}
       onPress={onPressAccept}>
@@ -266,7 +262,6 @@ export function AcceptChatButton({
 export function DeleteChatButton({
   convo,
   size = 'tiny',
-  variant = 'outline',
   color = 'secondary',
   label,
   currentScreen,
@@ -315,7 +310,6 @@ export function DeleteChatButton({
     <Button
       label={label || _(msg`Delete chat`)}
       size={size}
-      variant={variant}
       color={color}
       style={a.flex_1}
       onPress={onPressDelete}

src/screens/Messages/components/RequestListItem.tsx

@@ -7,7 +7,7 @@ import {useSession} from '#/state/session'
 import {atoms as a, tokens} from '#/alf'
 import {KnownFollowers} from '#/components/KnownFollowers'
 import {Text} from '#/components/Typography'
-import {ChatListItem} from './ChatListItem'
+import {ChatListItem, ChatListItemPortal} from './ChatListItem'
 import {AcceptChatButton, DeleteChatButton, RejectMenu} from './RequestButtons'
 
 export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
@@ -42,7 +42,8 @@ export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
             <Trans comment="Accept a chat request">Accept Request</Trans>
           </Text>
         </View>
-      </ChatListItem>
+        {/* then, this gets absolutely positioned on top of the spacer */}
+        <ChatListItemPortal.Portal>
           <View
             style={[
               a.absolute,
@@ -73,6 +74,8 @@ export function RequestListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
               </>
             )}
           </View>
+        </ChatListItemPortal.Portal>
+      </ChatListItem>
     </View>
   )
 }