Conversation context menu

babel.config.js

@@ -33,6 +33,7 @@ module.exports = {
 
           // Folder aliases
           "@components": "./components",
+          "@containers": "./containers",
           "@data": "./data",
           "@hooks": "./hooks",
           "@i18n": "./i18n",

components/AnimatedBlurView.tsx

@@ -0,0 +1,25 @@
+import { BlurView, BlurViewProps } from "expo-blur";
+import { View, ViewProps, Platform } from "react-native";
+import Animated, { AnimatedProps } from "react-native-reanimated";
+
+type AnimatedBlurProps = {
+  intensity?: number;
+};
+
+type AnimatedBlurViewProps = ViewProps &
+  BlurViewProps & {
+    animatedProps?: AnimatedProps<AnimatedBlurProps>;
+  };
+
+// If BlurView is fixed on Android,
+// we only need to update this file to apply the changes across the app
+const AnimatedBlurViewComponent = Animated.createAnimatedComponent(
+  Platform.OS === "ios" ? BlurView : View
+);
+
+export const AnimatedBlurView: React.FC<AnimatedBlurViewProps> = ({
+  animatedProps,
+  ...props
+}) => {
+  return <AnimatedBlurViewComponent {...props} animatedProps={animatedProps} />;
+};

components/Chat/Chat.tsx

@@ -173,7 +173,7 @@ const getListArray = (
   return reverseArray;
 };
 
-export default function Chat() {
+export default function Chat({ readOnly = false }: { readOnly?: boolean }) {
   const conversation = useConversationContext("conversation");
   const isBlockedPeer = useConversationContext("isBlockedPeer");
   const onReadyToFocus = useConversationContext("onReadyToFocus");
@@ -249,12 +249,20 @@ export default function Chat() {
   const chatContentStyle = useAnimatedStyle(
     () => ({
       ...styles.chatContent,
-      paddingBottom: showChatInput
+      paddingBottom: readOnly
+        ? 0 // Remove bottom padding if readOnly is true
+        : showChatInput
         ? chatInputDisplayedHeight.value +
           Math.max(insets.bottom, keyboardHeight.value)
         : insets.bottom,
     }),
-    [showChatInput, keyboardHeight, chatInputDisplayedHeight, insets.bottom]
+    [
+      showChatInput,
+      keyboardHeight,
+      chatInputDisplayedHeight,
+      insets.bottom,
+      readOnly,
+    ]
   );
 
   const ListFooterComponent = useMemo(() => {
@@ -366,6 +374,12 @@ export default function Chat() {
     [framesStore]
   );
 
+  const handleOnLayout = useCallback(() => {
+    setTimeout(() => {
+      onReadyToFocus();
+    }, 50);
+  }, [onReadyToFocus]);
+
   return (
     <View
       style={styles.chatContainer}
@@ -381,11 +395,7 @@ export default function Chat() {
             refreshing={conversation?.pending}
             extraData={[peerSocials]}
             renderItem={renderItem}
-            onLayout={() => {
-              setTimeout(() => {
-                onReadyToFocus();
-              }, 50);
-            }}
+            onLayout={handleOnLayout}
             ref={(r) => {
               if (r) {
                 messageListRef.current = r;
@@ -408,7 +418,8 @@ export default function Chat() {
             keyboardShouldPersistTaps="handled"
             estimatedItemSize={80}
             // Size glitch on Android
-            showsVerticalScrollIndicator={Platform.OS === "ios"}
+            showsVerticalScrollIndicator={!readOnly && Platform.OS === "ios"}
+            pointerEvents={readOnly ? "none" : "auto"}
             ListFooterComponent={ListFooterComponent}
           />
         )}
@@ -418,9 +429,10 @@ export default function Chat() {
         {showPlaceholder && conversation?.isGroup && (
           <GroupChatPlaceholder messagesCount={listArray.length} />
         )}
-        {conversation?.isGroup ? <GroupConsentPopup /> : <ConsentPopup />}
+        {!readOnly &&
+          (conversation?.isGroup ? <GroupConsentPopup /> : <ConsentPopup />)}
       </Animated.View>
-      {showChatInput && (
+      {!readOnly && showChatInput && (
         <>
           <ReanimatedView
             style={[

components/Chat/Message/MessageContextMenu.tsx

@@ -1,3 +1,4 @@
+import { AnimatedBlurView } from "@components/AnimatedBlurView";
 import TableView, { TableViewItemType } from "@components/TableView/TableView";
 import { backgroundColor } from "@styles/colors";
 import { calculateMenuHeight } from "@utils/contextMenu/calculateMenuHeight";
@@ -11,7 +12,6 @@ import {
   SPRING_CONFIGURATION,
 } from "@utils/contextMenu/constants";
 import { ConversationContext } from "@utils/conversation";
-import { BlurView } from "expo-blur";
 import React, { FC, memo, useEffect, useMemo } from "react";
 import {
   Platform,
@@ -20,7 +20,6 @@ import {
   TouchableWithoutFeedback,
   useColorScheme,
   useWindowDimensions,
-  View,
 } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Portal } from "react-native-paper";
@@ -35,10 +34,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useContext } from "use-context-selector";
-const AnimatedBlurView =
-  Platform.OS === "ios"
-    ? Animated.createAnimatedComponent(BlurView)
-    : Animated.createAnimatedComponent(View);
 
 const BackdropComponent: FC<{
   isActive: boolean;

components/ConversationContextMenu.tsx

@@ -0,0 +1,224 @@
+import { AnimatedBlurView } from "@components/AnimatedBlurView";
+import TableView, { TableViewItemType } from "@components/TableView/TableView";
+import { ConversationReadOnly } from "@screens/ConversationReadOnly";
+import { useIsSplitScreen } from "@screens/Navigation/navHelpers";
+import { backgroundColor } from "@styles/colors";
+import {
+  SIDE_MARGIN,
+  AUXILIARY_VIEW_MIN_HEIGHT,
+  HOLD_ITEM_TRANSFORM_DURATION,
+  contextMenuStyleGuide,
+  BACKDROP_DARK_BACKGROUND_COLOR,
+  BACKDROP_LIGHT_BACKGROUND_COLOR,
+  ITEM_WIDTH,
+} from "@utils/contextMenu/constants";
+import React, { FC, memo, useCallback, useEffect } from "react";
+import {
+  Platform,
+  StyleSheet,
+  useColorScheme,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler";
+import { Portal } from "react-native-paper";
+import Animated, {
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+type ConversationContextMenuProps = {
+  isVisible: boolean;
+  onClose: (openConversationOnClose?: boolean) => void;
+  items: TableViewItemType[];
+  conversationTopic: string;
+};
+
+const ConversationContextMenuComponent: FC<ConversationContextMenuProps> = ({
+  isVisible,
+  onClose,
+  items,
+  conversationTopic,
+}) => {
+  const activeValue = useSharedValue(false);
+  const opacityValue = useSharedValue(0);
+  const intensityValue = useSharedValue(0);
+  const isSplitScreen = useIsSplitScreen();
+  const { height, width } = useWindowDimensions();
+  const colorScheme = useColorScheme();
+  const styles = useStyles();
+
+  useEffect(() => {
+    activeValue.value = isVisible;
+    opacityValue.value = withTiming(isVisible ? 1 : 0, {
+      duration: HOLD_ITEM_TRANSFORM_DURATION,
+    });
+    intensityValue.value = withTiming(isVisible ? 50 : 0, {
+      duration: HOLD_ITEM_TRANSFORM_DURATION,
+    });
+  }, [activeValue, isVisible, opacityValue, intensityValue]);
+
+  const translateY = useSharedValue(height);
+
+  useEffect(() => {
+    translateY.value = withTiming(isVisible ? 0 : height, {
+      duration: HOLD_ITEM_TRANSFORM_DURATION,
+    });
+  }, [isVisible, translateY, height]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  const animatedContainerProps = useAnimatedProps(() => {
+    return {
+      intensity: intensityValue.value,
+    };
+  });
+
+  const backDropContainerStyle = useAnimatedStyle(() => {
+    const backgroundColor =
+      colorScheme === "dark"
+        ? BACKDROP_DARK_BACKGROUND_COLOR
+        : BACKDROP_LIGHT_BACKGROUND_COLOR;
+
+    return { backgroundColor };
+  }, []);
+
+  const closeMenu = useCallback(() => {
+    translateY.value = withTiming(
+      height,
+      { duration: HOLD_ITEM_TRANSFORM_DURATION },
+      () => {
+        runOnJS(onClose)();
+      }
+    );
+  }, [height, onClose, translateY]);
+
+  const gesture = Gesture.Pan()
+    .onUpdate((event) => {
+      translateY.value = Math.max(0, event.translationY);
+    })
+    .onEnd((event) => {
+      if (event.velocityY > 500 || event.translationY > height * 0.2) {
+        runOnJS(closeMenu)();
+      } else {
+        translateY.value = withTiming(0, {
+          duration: HOLD_ITEM_TRANSFORM_DURATION,
+        });
+      }
+    });
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <GestureHandlerRootView style={StyleSheet.absoluteFill}>
+        <GestureDetector gesture={gesture}>
+          <AnimatedBlurView
+            tint="default"
+            style={[
+              styles.flex,
+              Platform.OS === "android" ? backDropContainerStyle : undefined,
+            ]}
+            animatedProps={animatedContainerProps}
+          >
+            <View style={styles.overlay}>
+              <Animated.View style={[styles.container, animatedStyle]}>
+                <View style={styles.handle} />
+                <View style={styles.previewContainer}>
+                  <GestureDetector
+                    gesture={Gesture.Tap().onEnd(() => {
+                      if (isSplitScreen) {
+                        runOnJS(closeMenu)();
+                      } else {
+                        // Navigate to conversation
+                        runOnJS(onClose)(true);
+                      }
+                    })}
+                  >
+                    <ConversationReadOnly topic={conversationTopic} />
+                  </GestureDetector>
+                </View>
+                <View style={styles.menuContainer}>
+                  <TableView style={styles.table} items={items} />
+                </View>
+              </Animated.View>
+            </View>
+          </AnimatedBlurView>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </Portal>
+  );
+};
+
+const useStyles = () => {
+  const colorScheme = useColorScheme();
+  return StyleSheet.create({
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+    },
+    container: {
+      flex: 1,
+      justifyContent: "flex-end",
+    },
+    handle: {
+      marginTop: 70,
+      marginBottom: 10,
+      width: 36,
+      height: 5,
+      backgroundColor: contextMenuStyleGuide.palette.secondary,
+      alignSelf: "center",
+      borderRadius: 2.5,
+    },
+    previewContainer: {
+      flex: 1,
+      margin: SIDE_MARGIN,
+      paddingBottom: contextMenuStyleGuide.spacing,
+      overflow: "hidden",
+      justifyContent: "flex-start",
+      minHeight: AUXILIARY_VIEW_MIN_HEIGHT,
+      backgroundColor: backgroundColor(colorScheme),
+      borderRadius: 16,
+    },
+    conversationName: {
+      ...contextMenuStyleGuide.typography.body,
+      fontWeight: "600",
+      marginBottom: contextMenuStyleGuide.spacing,
+    },
+    lastMessagePreview: {
+      ...contextMenuStyleGuide.typography.callout,
+      color:
+        Platform.OS === "ios"
+          ? contextMenuStyleGuide.palette.secondary
+          : contextMenuStyleGuide.palette.common.black,
+    },
+    menuContainer: {
+      marginHorizontal: SIDE_MARGIN,
+      minHeight: 300,
+      borderRadius: 16,
+      overflow: "hidden",
+    },
+    flex: {
+      flex: 1,
+    },
+    table: {
+      width: ITEM_WIDTH,
+      backgroundColor:
+        Platform.OS === "android" ? backgroundColor(colorScheme) : undefined,
+      borderRadius: Platform.OS === "android" ? 10 : undefined,
+    },
+  });
+};
+
+export const ConversationContextMenu = memo(ConversationContextMenuComponent);