[native] introduce tooltipButtonIcon to UserRelationshipTooltipModalP…

…arams

Summary:
Right now the `UserRelationshipTooltipButton` will only render a pencil icon for `UserRelationshipTooltipButton`. This works for `RelationshipListItem` since this is the icon that is used in this component; however, the user profile component uses a kebab (3 vertical dot) icon. To make sure that `UserRelationshipTooltipButton` works for both cases, I introduced `tooltipButtonIcon` as a nav param (can either have the value of `pencil` or `menu`)

This is step 4 in the list below
Outlined below are the steps I will take to update `RelationshipListItemTooltipModal`:
1. Add the block action to relationship list item tooltip menu (`RelationshipListItem` won't need this option, but User profiles will. This is shown in the figma screenshot above)
2. Rename `RelationshipListItemTooltipModal` to something more generic like `UserRelationshipTooltipModal`
3. Make `UserRelationshipTooltipButton` into a functional component (We need to use the `useColors` hook in a subsequent diff)
4. Introduce the `tooltipButtonIcon` as a param to `RelationshipListItemTooltipModal` (`RelationshipListItem` will use a pencil icon and user profiles will use a kebab menu icon)
5. Introduce UserProfileMenuButton (This component will handle navigating to `RelationshipListItemTooltipModal`

Depends on D9380

Test Plan:
Please see the screenshots below where UserRelationshipTooltipButton from RelationshipListItem uses the pencil icon and the UserRelationshipTooltipButton from the user profile uses the kebab menu icon

RelationshipListItem:
{F792464}

User Profile:
{F792465}

Reviewers: atul, inka

Reviewed By: atul

Subscribers: ashoat, tomek, wyilio

Differential Revision: https://phab.comm.dev/D9381

native/profile/relationship-list-item.react.js

@@ -226,6 +226,7 @@ class RelationshipListItem extends React.PureComponent<Props> {
           verticalBounds,
           visibleEntryIDs: this.visibleEntryIDs(),
           relativeUserInfo,
+          tooltipButtonIcon: 'pencil',
         },
       });
     });

native/profile/user-relationship-tooltip-modal.react.js

@@ -15,18 +15,23 @@ import {
 } from 'lib/utils/action-utils.js';
 
 import PencilIcon from '../components/pencil-icon.react.js';
+import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
+import { useColors } from '../themes/colors.js';
 import {
   createTooltip,
   type TooltipParams,
   type BaseTooltipProps,
   type TooltipMenuProps,
+  type TooltipRoute,
 } from '../tooltip/tooltip.react.js';
 import Alert from '../utils/alert.js';
 
 type Action = 'unfriend' | 'block' | 'unblock';
+type TooltipButtonIcon = 'pencil' | 'menu';
 
 export type UserRelationshipTooltipModalParams = TooltipParams<{
+  +tooltipButtonIcon: TooltipButtonIcon,
   +relativeUserInfo: RelativeUserInfo,
 }>;
 
@@ -124,19 +129,32 @@ function TooltipMenu(
 
 type Props = {
   +navigation: AppNavigationProp<'UserRelationshipTooltipModal'>,
+  +route: TooltipRoute<'UserRelationshipTooltipModal'>,
   ...
 };
 
 function UserRelationshipTooltipButton(props: Props): React.Node {
-  const { navigation } = props;
+  const { navigation, route } = props;
 
   const { goBackOnce } = navigation;
+  const { tooltipButtonIcon } = route.params;
+
+  const colors = useColors();
+
+  const icon = React.useMemo(() => {
+    if (tooltipButtonIcon === 'pencil') {
+      return <PencilIcon />;
+    }
+    return (
+      <SWMansionIcon
+        name="menu-vertical"
+        size={24}
+        color={colors.modalBackgroundLabel}
+      />
+    );
+  }, [colors.modalBackgroundLabel, tooltipButtonIcon]);
 
-  return (
-    <TouchableOpacity onPress={goBackOnce}>
-      <PencilIcon />
-    </TouchableOpacity>
-  );
+  return <TouchableOpacity onPress={goBackOnce}>{icon}</TouchableOpacity>;
 }
 
 const UserRelationshipTooltipModal: React.ComponentType<