added more native back btn functionality

src/atoms/global.ts

@@ -89,4 +89,14 @@ export const promotionTimeIntervalAtom = atom({
 export const promotionsAtom = atom({
   key: 'promotionsAtom', 
   default: [], 
+});
+
+export const isFocusedParentGroupAtom = atom({
+  key: 'isFocusedParentGroupAtom', 
+  default: false, 
+});
+
+export const isFocusedParentDirectAtom = atom({
+  key: 'isFocusedParentDirectAtom', 
+  default: false, 
 });

src/components/Chat/ChatDirect.tsx

@@ -20,6 +20,8 @@ import ShortUniqueId from "short-unique-id";
 import { ReturnIcon } from '../../assets/Icons/ReturnIcon';
 import { ExitIcon } from '../../assets/Icons/ExitIcon';
 import { MessageItem, ReplyPreview } from './MessageItem';
+import { isFocusedParentDirectAtom } from '../../atoms/global';
+import { useRecoilState } from 'recoil';
 
 
 const uid = new ShortUniqueId({ length: 5 });
@@ -27,8 +29,9 @@ const uid = new ShortUniqueId({ length: 5 });
 
 export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close, setMobileViewModeKeepOpen}) => {
   const { queueChats, addToQueue, processWithNewMessages} = useMessageQueue();
-    const [isFocusedParent, setIsFocusedParent] = useState(false);
-
+    const [isFocusedParent, setIsFocusedParent] =  useRecoilState(
+      isFocusedParentDirectAtom
+    );
   const [messages, setMessages] = useState([])
   const [isSending, setIsSending] = useState(false)
   const [directToValue, setDirectToValue] = useState('')
@@ -51,11 +54,7 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
   };
   const [messageSize, setMessageSize] = useState(0)
 
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  const triggerRerender = () => {
-    forceUpdate(); // Trigger re-render by updating the state
-  };
+ 
   const publicKeyOfRecipientRef = useRef(null)
   const getPublicKeyFunc = async (address)=> {
     try {
@@ -340,6 +339,14 @@ const sendChatDirect = async ({ chatReference = undefined, messageText, otherDat
   } finally {
   }
 }
+
+useEffect(()=> {
+  if(isFocusedParent === false){
+    setReplyMessage(null)
+                   setOnEditMessage(null)
+                   clearEditorContent()
+  }
+  }, [isFocusedParent])
 const clearEditorContent = () => {
   if (editorRef.current) {
     editorRef.current.chain().focus().clearContent().run();
@@ -348,10 +355,6 @@ const clearEditorContent = () => {
       setTimeout(() => {
         editorRef.current?.chain().blur().run(); 
         setIsFocusedParent(false)
-        executeEvent("sent-new-message-group", {})
-        setTimeout(() => {
-          triggerRerender();
-         }, 300);
       }, 200);
     }
   }
@@ -650,9 +653,7 @@ const sendMessage = async ()=> {
                onClick={()=> {
                  if(isSending) return
                  setIsFocusedParent(false)
-                 setReplyMessage(null)
-                 setOnEditMessage(null)
-                 clearEditorContent()
+
                  // Unfocus the editor
                }}
                style={{

src/components/Chat/ChatGroup.tsx

@@ -23,6 +23,8 @@ import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resou
 import { isExtMsg } from '../../background'
 import MentionList from './MentionList'
 import { ChatOptions } from './ChatOptions'
+import { isFocusedParentGroupAtom } from '../../atoms/global'
+import { useRecoilState } from 'recoil'
 
 const uid = new ShortUniqueId({ length: 5 });
 
@@ -38,7 +40,9 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
   const [openSnack, setOpenSnack] = React.useState(false);
   const [infoSnack, setInfoSnack] = React.useState(null);
   const hasInitialized = useRef(false)
-  const [isFocusedParent, setIsFocusedParent] = useState(false);
+  const [isFocusedParent, setIsFocusedParent] =  useRecoilState(
+    isFocusedParentGroupAtom
+  );
   const [replyMessage, setReplyMessage] = useState(null)
 
   const hasInitializedWebsocket = useRef(false)
@@ -47,7 +51,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
   const groupSocketTimeoutRef = useRef(null); // Group Socket Timeout reference
   const editorRef = useRef(null);
   const { queueChats, addToQueue, processWithNewMessages } = useMessageQueue();
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
 
   const lastReadTimestamp = useRef(null)
@@ -106,9 +109,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
     return Array.from(uniqueMembers);
   }, [messages]);
 
-  const triggerRerender = () => {
-    forceUpdate(); // Trigger re-render by updating the state
-  };
+
   const setEditorRef = (editorInstance) => {
     editorRef.current = editorInstance;
   };
@@ -552,6 +553,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference =
       throw new Error(error)
   }
 }
+useEffect(()=> {
+if(isFocusedParent === false){
+  setReplyMessage(null)
+                 setOnEditMessage(null)
+                 clearEditorContent()
+}
+}, [isFocusedParent])
 const clearEditorContent = () => {
   if (editorRef.current) {
     editorRef.current.chain().focus().clearContent().run();
@@ -560,10 +568,7 @@ const clearEditorContent = () => {
       setTimeout(() => {
         editorRef.current?.chain().blur().run(); 
         setIsFocusedParent(false)
-        executeEvent("sent-new-message-group", {})
-        setTimeout(() => {
-          triggerRerender();
-         }, 300);
+
       }, 200);
     }
   }
@@ -839,9 +844,9 @@ const sendMessage = async ()=> {
                onClick={()=> {
                  if(isSending) return
                  setIsFocusedParent(false)
-                 setReplyMessage(null)
-                 setOnEditMessage(null)
-                 clearEditorContent()
+                //  setReplyMessage(null)
+                //  setOnEditMessage(null)
+                //  clearEditorContent()
 
                  // Unfocus the editor
                }}

src/components/Group/Group.tsx

@@ -1536,7 +1536,7 @@ export const Group = ({
   };
 
 
-  useHandleMobileNativeBack({mobileViewMode, goToHome, setMobileViewMode})
+  useHandleMobileNativeBack({mobileViewMode, goToHome, setMobileViewMode, mobileViewModeKeepOpen, setMobileViewModeKeepOpen, newChat, selectedDirect, setSelectedDirect, setNewChat })
 
 
   const goToAnnouncements = async () => {

src/hooks/useHandleMobileNativeBack.tsx

@@ -1,16 +1,41 @@
 import React, { useCallback, useEffect } from 'react'
 import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
+import { useRecoilState } from 'recoil';
+import { isFocusedParentDirectAtom, isFocusedParentGroupAtom } from '../atoms/global';
 
-export const useHandleMobileNativeBack = ({mobileViewMode, goToHome, setMobileViewMode}) => {
-
+export const useHandleMobileNativeBack = ({mobileViewMode, goToHome, setMobileViewMode, mobileViewModeKeepOpen, selectedDirect, newChat, setMobileViewModeKeepOpen, setSelectedDirect, setNewChat}) => {
+  const [isFocusedParent, setIsFocusedParent] =  useRecoilState(
+    isFocusedParentGroupAtom
+  );
+  const [isFocusedParentDirect, setIsFocusedParentDirect] =  useRecoilState(
+    isFocusedParentDirectAtom
+  );
 
     const handleMobileNativeBackFunc = useCallback((e) => {
+      if(mobileViewModeKeepOpen === 'messaging'){
+        if(!selectedDirect && !newChat){
+          setMobileViewModeKeepOpen("")
+        }
+        else if(selectedDirect || newChat){
+          if(isFocusedParentDirect){
+            setIsFocusedParentDirect(false)
+            return
+          }
+          setSelectedDirect(null)
+          setNewChat(false)
+        }
+        return
+      }
        if(mobileViewMode === 'groups'){
         goToHome()
        } else if(mobileViewMode === "group"){
+        if(isFocusedParent){
+          setIsFocusedParent(false)
+          return
+        }
         setMobileViewMode('groups')
        }
-      }, [mobileViewMode]);
+      }, [mobileViewMode, isFocusedParent, mobileViewModeKeepOpen, newChat, selectedDirect, isFocusedParentDirect]);
     
       useEffect(() => {
         subscribeToEvent("handleMobileNativeBack", handleMobileNativeBackFunc);