fix: Android context menu position offset (#1594)

Author: lourou

features/conversation-requests-list/conversation-requests-list-segment-controller.tsx

@@ -4,7 +4,13 @@ import {
   textPrimaryColor,
 } from "@styles/colors";
 import React from "react";
-import { Text, TouchableOpacity, View, useColorScheme } from "react-native";
+import {
+  Text,
+  TouchableOpacity,
+  View,
+  useColorScheme,
+  Platform,
+} from "react-native";
 
 type IConversationRequestsListSegmentControllerProps = {
   options: string[];
@@ -24,7 +30,7 @@ export const ConversationRequestsListSegmentController: React.FC<
         backgroundColor: tertiaryBackgroundColor(colorScheme),
         borderRadius: 8,
         padding: 2,
-        height: 32,
+        height: Platform.OS === "android" ? 36 : 32,
         marginTop: 10,
         marginBottom: 2,
         marginHorizontal: 16,
@@ -36,7 +42,7 @@ export const ConversationRequestsListSegmentController: React.FC<
           style={[
             {
               flex: 1,
-              paddingVertical: 6,
+              paddingVertical: Platform.OS === "android" ? 4 : 6,
               alignItems: "center",
               justifyContent: "center",
             },
@@ -60,6 +66,7 @@ export const ConversationRequestsListSegmentController: React.FC<
               {
                 fontSize: 13,
                 color: textPrimaryColor(colorScheme),
+                lineHeight: Platform.OS === "android" ? 18 : undefined,
               },
               index === selectedIndex && {
                 fontWeight: "500",

features/conversation-requests-list/conversation-requests-list.screen.tsx

@@ -19,7 +19,7 @@ export const ConversationRequestsListScreen = memo(function () {
   return (
     <Screen contentContainerStyle={$globalStyles.flex1}>
       <ConversationRequestsListSegmentController
-        options={[translate("you_might_know"), translate("hidden_requests")]}
+        options={[translate("You might know"), translate("Hidden requests")]}
         selectedIndex={selectedSegment}
         onSelect={handleSegmentChange}
       />

features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu-container.tsx

@@ -2,6 +2,7 @@ import { AnimatedVStack, VStack } from "@/design-system/VStack";
 import { useConversationMessageContextMenuStyles } from "@/features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.styles";
 import { useAppTheme } from "@theme/useAppTheme";
 import { memo, useEffect } from "react";
+import { Platform, StatusBar, useWindowDimensions } from "react-native";
 import {
   useAnimatedStyle,
   useSharedValue,
@@ -12,7 +13,6 @@ import {
   MESSAGE_CONTEXT_MENU_ABOVE_MESSAGE_REACTIONS_HEIGHT,
   MESSAGE_CONTEXT_REACTIONS_HEIGHT,
 } from "./conversation-message-context-menu.constants";
-import { debugBorder } from "@/utils/debug-style";
 
 export const MessageContextMenuContainer = memo(
   function MessageContextMenuContainer(args: {
@@ -30,6 +30,7 @@ export const MessageContextMenuContainer = memo(
     const translateYAV = useSharedValue(0);
     const { verticalSpaceBetweenSections } =
       useConversationMessageContextMenuStyles();
+    const { height: windowHeight } = useWindowDimensions();
 
     const {
       itemRectY,
@@ -43,7 +44,7 @@ export const MessageContextMenuContainer = memo(
     } = args;
 
     useEffect(() => {
-      const screenHeight = theme.layout.screen.height;
+      const screenHeight = windowHeight;
       const minTopOffset =
         MESSAGE_CONTEXT_MENU_ABOVE_MESSAGE_REACTIONS_HEIGHT +
         verticalSpaceBetweenSections +
@@ -85,16 +86,22 @@ export const MessageContextMenuContainer = memo(
       theme,
       verticalSpaceBetweenSections,
       translateYAV,
+      windowHeight,
     ]);
 
     const animatedStyle = useAnimatedStyle(() => ({
       transform: [{ translateY: translateYAV.value }],
     }));
 
+    // On Android, we need to account for the status bar height by moving the menu down
+    const statusBarHeight =
+      Platform.OS === "android" ? StatusBar.currentHeight || 0 : 0;
+
     const distanceFromTop =
       itemRectY -
       MESSAGE_CONTEXT_MENU_ABOVE_MESSAGE_REACTIONS_HEIGHT -
-      verticalSpaceBetweenSections;
+      verticalSpaceBetweenSections +
+      (Platform.OS === "android" ? statusBarHeight : 0);
 
     return (
       <AnimatedVStack

i18n/translations/en.ts

@@ -230,13 +230,10 @@ export const en = {
   pending_count: "{{count}} pending",
 
   // Requests
-  requests: "Requests",
   clear_all: "Clear all",
   clear_confirm:
     "Do you confirm? This will block all accounts that are currently tagged as requests.",
   clearing: "Clearing",
-  you_might_know: "You might know",
-  hidden_requests: "Hidden requests",
   suggestion_text:
     "Based on your onchain history, we've made some suggestions on who you may know.",
   no_suggestions_text:

i18n/translations/fr.ts

@@ -230,13 +230,14 @@ export const fr = {
   pending_count: "{{count}} en attente",
 
   // Requests
-  requests: "Demandes",
+  Requests: "Demandes",
+  "You might know": "Vous pourriez connaître",
+  "Hidden requests": "Demandes masquées",
+  // Requests (to migrate from keys to plain english keys)
   clear_all: "Tout effacer",
   clear_confirm:
     "Confirmez-vous ? Cela bloquera tous les comptes actuellement marqués comme demandes.",
   clearing: "Nettoyage",
-  you_might_know: "Vous pourriez connaître",
-  hidden_requests: "Demandes masquées",
   suggestion_text:
     "Sur la base de votre historique on-chain, nous vous proposons quelques suggestions de personnes que vous pourriez connaître.",
   no_suggestions_text: