added contextmenu for groups

src/App.tsx

@@ -223,6 +223,24 @@ export const getBaseApiReact = (customApi?: string) => {
     return groupApi;
   }
 };
+// export const getArbitraryEndpointReact = () => {
+  
+
+//   if (globalApiKey) {
+//     return `/arbitrary/resources/search`;
+//   } else {
+//     return `/arbitrary/resources/searchsimple`;
+//   }
+// };
+export const getArbitraryEndpointReact = () => {
+  
+
+  if (globalApiKey) {
+    return `/arbitrary/resources/searchsimple`;
+  } else {
+    return `/arbitrary/resources/searchsimple`;
+  }
+};
 export const getBaseApiReactSocket = (customApi?: string) => {
   
   if (customApi) {

src/components/Chat/AnnouncementDiscussion.tsx

@@ -10,7 +10,7 @@ import { decryptPublishes, getTempPublish, saveTempPublish } from "./GroupAnnoun
 import { AnnouncementList } from "./AnnouncementList";
 import { Spacer } from "../../common/Spacer";
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
+import { getArbitraryEndpointReact, getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
 
 const tempKey = 'accouncement-comment'
 
@@ -55,6 +55,7 @@ export const AnnouncementDiscussion = ({
       const res = await fetch(
         `${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
       );
+      if(!res?.ok) return
       const data = await res.text();
       const response = await decryptPublishes([{ data }], secretKey);
     
@@ -179,7 +180,7 @@ export const AnnouncementDiscussion = ({
 
         // dispatch(setIsLoadingGlobal(true))
         const identifier = `cm-${selectedAnnouncement.identifier}`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {
@@ -209,7 +210,7 @@ export const AnnouncementDiscussion = ({
 
       const offset = comments.length
       const identifier = `cm-${selectedAnnouncement.identifier}`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {

src/components/Chat/AnnouncementItem.tsx

@@ -9,7 +9,7 @@ import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { getBaseApi } from "../../background";
 import { requestQueueCommentCount } from "./GroupAnnouncements";
 import { CustomLoader } from "../../common/CustomLoader";
-import { getBaseApiReact } from "../../App";
+import { getArbitraryEndpointReact, getBaseApiReact } from "../../App";
 import { WrapperUserAction } from "../WrapperUserAction";
 export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement, disableComment, myName }) => {
 
@@ -21,7 +21,7 @@ export const AnnouncementItem = ({ message, messageData, setSelectedAnnouncement
 
         // dispatch(setIsLoadingGlobal(true))
         const identifier = `cm-${message.identifier}`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=0&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=0&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
        
         const response =  await requestQueueCommentCount.enqueue(() => { 
           return fetch(url, {

src/components/Chat/ChatDirect.tsx

@@ -326,7 +326,7 @@ const clearEditorContent = () => {
       }
     }
 
-console.log('isFocusedParent', isFocusedParent)
+
     
   return (
     <div style={{

src/components/Chat/CreateCommonSecret.tsx

@@ -2,13 +2,13 @@ import { Box, Button, Typography } from '@mui/material'
 import React, { useContext } from 'react'
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { LoadingButton } from '@mui/lab';
-import { MyContext, getBaseApiReact, pauseAllQueues } from '../../App';
+import { MyContext, getArbitraryEndpointReact, getBaseApiReact, pauseAllQueues } from '../../App';
 import { getFee } from '../../background';
 import { decryptResource, getGroupAdimns, validateSecretKey } from '../Group/Group';
 import { base64ToUint8Array } from '../../qdn/encryption/group-encryption';
 import { uint8ArrayToObject } from '../../backgroundFunctions/encryption';
 
-export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, secretKeyDetails, userInfo, noSecretKey}) => {
+export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, secretKeyDetails, userInfo, noSecretKey, setHideCommonKeyPopup}) => {
   const { show, setTxList } = useContext(MyContext);
 
   const [openSnack, setOpenSnack] = React.useState(false);
@@ -18,7 +18,7 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, sec
   const getPublishesFromAdmins = async (admins: string[]) => {
     // const validApi = await findUsableApi();
     const queryString = admins.map((name) => `name=${name}`).join("&");
-    const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
+    const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
       groupId
     }&exactmatchnames=true&limit=0&reverse=true&${queryString}&prefix=true`;
     const response = await fetch(url);
@@ -158,6 +158,15 @@ export const CreateCommonSecret = ({groupId, secretKey, isOwner,  myAddress, sec
         <Typography>The group member list has changed. Please re-encrypt the secret key.</Typography>
       </Box>
       )}
+      <Box sx={{
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'flex-end'
+      }}>
+        <Button onClick={()=> {
+          setHideCommonKeyPopup(true)
+        }} size='small'>Hide</Button>
+      </Box>
         <CustomizedSnackbars open={openSnack} setOpen={setOpenSnack} info={infoSnack} setInfo={setInfoSnack}  />
     </Box>
     

src/components/Chat/GroupAnnouncements.tsx

@@ -28,7 +28,7 @@ const uid = new ShortUniqueId({ length: 8 });
 import CampaignIcon from '@mui/icons-material/Campaign';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { AnnouncementDiscussion } from "./AnnouncementDiscussion";
-import { MyContext, getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
+import { MyContext, getArbitraryEndpointReact, getBaseApiReact, isMobile, pauseAllQueues, resumeAllQueues } from "../../App";
 import { RequestQueueWithPromise } from "../../utils/queue/queue";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 import {  addDataPublishesFunc, getDataPublishesFunc } from "../Group/Group";
@@ -168,6 +168,7 @@ export const GroupAnnouncements = ({
             `${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
           );
         }) 
+        if(!res?.ok) return
          data = await res.text();
          await addDataPublishesFunc({...resource, data}, selectedGroup, 'anc')
       } else {
@@ -339,7 +340,7 @@ export const GroupAnnouncements = ({
 
         // dispatch(setIsLoadingGlobal(true))
         const identifier = `grp-${selectedGroup}-anc-`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {
@@ -376,7 +377,7 @@ export const GroupAnnouncements = ({
 
       const offset = announcements.length
     const identifier = `grp-${selectedGroup}-anc-`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {
@@ -403,7 +404,7 @@ export const GroupAnnouncements = ({
       try {
       
         const identifier = `grp-${selectedGroup}-anc-`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: 'GET',
           headers: {

src/components/ContextMenu.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useRef, useMemo, useEffect } from 'react';
+import { ListItemIcon, Menu, MenuItem, Typography, styled } from '@mui/material';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+import { executeEvent } from '../utils/events';
+
+const CustomStyledMenu = styled(Menu)(({ theme }) => ({
+    '& .MuiPaper-root': {
+      backgroundColor: '#f9f9f9',
+      borderRadius: '12px',
+      padding: theme.spacing(1),
+      boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
+    },
+    '& .MuiMenuItem-root': {
+        fontSize: '14px', // Smaller font size for the menu item text
+        color: '#444',
+        transition: '0.3s background-color',
+        '&:hover': {
+          backgroundColor: '#f0f0f0', // Explicit hover state
+        },
+       
+      },
+  }));
+
+export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups }) => {
+  const [menuPosition, setMenuPosition] = useState(null);
+  const longPressTimeout = useRef(null);
+  const preventClick = useRef(false); // Flag to prevent click after long-press or right-click
+
+  const isMuted = useMemo(()=> {
+    return mutedGroups.includes(groupId)
+  }, [mutedGroups, groupId])
+
+  // Handle right-click (context menu) for desktop
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+    event.stopPropagation(); // Prevent parent click
+
+    // Set flag to prevent any click event after right-click
+    preventClick.current = true;
+
+    setMenuPosition({
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+    });
+  };
+
+  // Handle long-press for mobile
+  const handleTouchStart = (event) => {
+    longPressTimeout.current = setTimeout(() => {
+      preventClick.current = true; // Prevent the next click after long-press
+      event.stopPropagation(); // Prevent parent click
+      setMenuPosition({
+        mouseX: event.touches[0].clientX,
+        mouseY: event.touches[0].clientY,
+      });
+    }, 500); // Long press duration
+  };
+
+  const handleTouchEnd = (event) => {
+    clearTimeout(longPressTimeout.current);
+
+    if (preventClick.current) {
+      event.preventDefault();
+      event.stopPropagation(); // Prevent synthetic click after long-press
+      preventClick.current = false; // Reset the flag
+    }
+  };
+
+  
+
+  const handleSetGroupMute = ()=> {
+    try {
+        let value = [...mutedGroups]
+        if(isMuted){
+            value = value.filter((group)=> group !== groupId)
+        } else {
+            value.push(groupId)
+        }
+        chrome?.runtime?.sendMessage(
+            {
+              action: "addUserSettings",
+              payload: {
+                keyValue: {
+                    key: 'mutedGroups',
+                    value
+                },
+              },
+            }
+          );
+        setTimeout(() => {
+            getUserSettings()
+        }, 400);
+
+    } catch (error) {
+        
+    }
+  }
+
+ 
+
+  const handleClose = (e) => {
+    e.preventDefault();
+    e.stopPropagation(); 
+    setMenuPosition(null);
+  };
+
+  return (
+    <div
+      onContextMenu={handleContextMenu}  // For desktop right-click
+      onTouchStart={handleTouchStart}    // For mobile long-press start
+      onTouchEnd={handleTouchEnd}        // For mobile long-press end
+ 
+      style={{ width: '100%', height: '100%' }}
+    >
+      {children}
+
+      <CustomStyledMenu
+        disableAutoFocusItem
+        open={!!menuPosition}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          menuPosition
+            ? { top: menuPosition.mouseY, left: menuPosition.mouseX }
+            : undefined
+        }
+       onClick={(e)=> {
+        e.stopPropagation(); 
+       }}
+      >
+       <MenuItem onClick={(e) => {
+        handleClose(e)
+        executeEvent("markAsRead", {
+            groupId
+          });
+       }}>
+          <ListItemIcon sx={{ minWidth: '32px' }}>
+            <MailOutlineIcon fontSize="small" />
+          </ListItemIcon>
+          <Typography variant="inherit" sx={{ fontSize: '14px' }}>
+            Mark As Read
+          </Typography>
+        </MenuItem>
+        <MenuItem onClick={(e) => {
+            
+        handleClose(e)
+        handleSetGroupMute()
+
+       }}>
+          <ListItemIcon sx={{ minWidth: '32px' }}>
+            <NotificationsOffIcon fontSize="small" sx={{
+                color: isMuted && 'red'
+            }} />
+          </ListItemIcon>
+          <Typography variant="inherit" sx={{ fontSize: '14px', color: isMuted && 'red' }}>
+            {isMuted ? 'Unmute ' : 'Mute '}Push Notifications
+          </Typography>
+        </MenuItem>
+      </CustomStyledMenu>
+    </div>
+  );
+};
+
+

src/components/Group/Forum/GroupMail.tsx

@@ -53,7 +53,7 @@ import ArrowDownSVG from "../../../assets/svgs/ArrowDown.svg";
 import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
 import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
 import RefreshIcon from '@mui/icons-material/Refresh';
-import { getBaseApiReact } from "../../../App";
+import { getArbitraryEndpointReact, getBaseApiReact } from "../../../App";
 import { WrapperUserAction } from "../../WrapperUserAction";
 import { addDataPublishesFunc, getDataPublishesFunc } from "../Group";
 const filterOptions = ["Recently active", "Newest", "Oldest"];
@@ -126,6 +126,7 @@ export const GroupMail = ({
     const res = await fetch(
       `${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
     );
+    if(!res?.ok) return
      data = await res.text();
      await addDataPublishesFunc({...resource, data}, groupId, 'thread')
 
@@ -176,7 +177,7 @@ export const GroupMail = ({
         }
         const identifier = `grp-${groupId}-thread-`;
 
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=${20}&includemetadata=false&offset=${offset}&reverse=${isReverse}&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=${20}&includemetadata=false&offset=${offset}&reverse=${isReverse}&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {
@@ -263,7 +264,7 @@ export const GroupMail = ({
 
         // dispatch(setIsLoadingCustom("Loading recent threads"));
         const identifier = `thmsg-grp-${groupId}-thread-`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=100&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=100&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {
@@ -299,7 +300,7 @@ export const GroupMail = ({
         const getMessageForThreads = newArray.map(async (message: any) => {
           try {
             const identifierQuery = message.threadId;
-            const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifierQuery}&limit=1&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
+            const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifierQuery}&limit=1&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
             const response = await fetch(url, {
               method: "GET",
               headers: {

src/components/Group/Forum/Thread copy.tsx

@@ -24,7 +24,7 @@ import ReturnSVG from '../../../assets/svgs/Return.svg'
 import { NewThread } from './NewThread'
 import { decryptPublishes } from '../../Chat/GroupAnnouncements'
 import { getBaseApi } from '../../../background'
-import { getBaseApiReact } from '../../../App'
+import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App'
 interface ThreadProps {
   currentThread: any
   groupInfo: any
@@ -91,7 +91,7 @@ export const Thread = ({
       
         const offset = messages.length
         const identifier = `thmsg-${threadId}`
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`
         const response = await fetch(url, {
           method: 'GET',
           headers: {
@@ -180,7 +180,7 @@ export const Thread = ({
         let threadId = groupInfo.threadId
       
         const identifier = `thmsg-${threadId}`
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`
         const response = await fetch(url, {
           method: 'GET',
           headers: {

src/components/Group/Forum/Thread.tsx

@@ -1,5 +1,20 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
-import { Box, Button, ButtonBase, IconButton, Skeleton } from "@mui/material";
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonBase,
+  IconButton,
+  Skeleton,
+  Typography,
+} from "@mui/material";
 import { ShowMessage } from "./ShowMessageWithoutModal";
 import {
   ComposeP,
@@ -10,22 +25,38 @@ import {
   SingleThreadParent,
   ThreadContainer,
   ThreadContainerFullWidth,
+  ThreadInfoColumn,
+  ThreadInfoColumnNameP,
+  ThreadInfoColumnTime,
 } from "./Mail-styles";
 import { Spacer } from "../../../common/Spacer";
 import { threadIdentifier } from "./GroupMail";
 import LazyLoad from "../../../common/LazyLoad";
 import ReturnSVG from "../../../assets/svgs/Return.svg";
 import { NewThread } from "./NewThread";
-import { decryptPublishes, getTempPublish } from "../../Chat/GroupAnnouncements";
+import {
+  decryptPublishes,
+  getTempPublish,
+} from "../../Chat/GroupAnnouncements";
 import { LoadingSnackbar } from "../../Snackbar/LoadingSnackbar";
 import { subscribeToEvent, unsubscribeFromEvent } from "../../../utils/events";
 import RefreshIcon from "@mui/icons-material/Refresh";
-import { getBaseApiReact, isMobile } from "../../../App";
+import {
-import { ArrowDownward as ArrowDownwardIcon, ArrowUpward as ArrowUpwardIcon } from '@mui/icons-material';
+  getArbitraryEndpointReact,
+  getBaseApiReact,
+  isMobile,
+} from "../../../App";
+import {
+  ArrowDownward as ArrowDownwardIcon,
+  ArrowUpward as ArrowUpwardIcon,
+} from "@mui/icons-material";
 import { addDataPublishesFunc, getDataPublishesFunc } from "../Group";
 import { RequestQueueWithPromise } from "../../../utils/queue/queue";
-const requestQueueSaveToLocal = new RequestQueueWithPromise(1)
+import { CustomLoader } from "../../../common/CustomLoader";
-const requestQueueDownloadPost = new RequestQueueWithPromise(3)
+import { WrapperUserAction } from "../../WrapperUserAction";
+import { formatTimestampForum } from "../../../utils/time";
+const requestQueueSaveToLocal = new RequestQueueWithPromise(1);
+const requestQueueDownloadPost = new RequestQueueWithPromise(3);
 interface ThreadProps {
   currentThread: any;
   groupInfo: any;
@@ -33,22 +64,41 @@ interface ThreadProps {
   members: any;
 }
 
-const getEncryptedResource = async ({ name, identifier, secretKey, resource, groupId, dataPublishes }) => {
+const getEncryptedResource = async ({
-  let data = dataPublishes[`${name}-${identifier}`]
+  name,
-    if(!data || (data?.update || data?.created !== (resource?.updated || resource?.created))){
+  identifier,
-  const res = await requestQueueDownloadPost.enqueue(()=> {
+  secretKey,
-    return fetch(
+  resource,
-      `${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
+  groupId,
-    );
+  dataPublishes,
-  }) 
+}) => {
-   data = await res.text();
+  let data = dataPublishes[`${name}-${identifier}`];
-   await requestQueueSaveToLocal.enqueue(()=> {
+  if (
-    return addDataPublishesFunc({...resource, data}, groupId, 'thmsg')
+    !data ||
-   })
+    data?.update ||
-    
+    data?.created !== (resource?.updated || resource?.created)
-    } else {
+  ) {
-      data = data.data
+    const res = await requestQueueDownloadPost.enqueue(() => {
+      return fetch(
+        `${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64`
+      );
+    });
+    if (!res.ok) {
+      const errorData = await res.json();
+
+      return {
+        error: errorData?.message,
+      };
     }
+    data = await res.text();
+   
+    if (data?.error || typeof data !== "string") return;
+    await requestQueueSaveToLocal.enqueue(() => {
+      return addDataPublishesFunc({ ...resource, data }, groupId, "thmsg");
+    });
+  } else {
+    data = data.data;
+  }
   const response = await decryptPublishes([{ data }], secretKey);
 
   const messageData = response[0];
@@ -63,9 +113,9 @@ export const Thread = ({
   userInfo,
   secretKey,
   getSecretKey,
-  updateThreadActivityCurrentThread
+  updateThreadActivityCurrentThread,
 }: ThreadProps) => {
-  const [tempPublishedList, setTempPublishedList] = useState([])
+  const [tempPublishedList, setTempPublishedList] = useState([]);
   const [messages, setMessages] = useState<any[]>([]);
   const [hashMapMailMessages, setHashMapMailMessages] = useState({});
   const [hasFirstPage, setHasFirstPage] = useState(false);
@@ -77,7 +127,7 @@ export const Thread = ({
 
   // Update: Use a new ref for the scrollable container
   const threadContainerRef = useRef(null);
-
+  const threadBeginningRef = useRef(null)
   // New state variables
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
@@ -85,18 +135,17 @@ export const Thread = ({
   const secretKeyRef = useRef(null);
   const currentThreadRef = useRef(null);
   const containerRef = useRef(null);
-  const dataPublishes = useRef({})
+  const dataPublishes = useRef({});
 
- 
+  const getSavedData = useCallback(async (groupId) => {
-  const getSavedData = useCallback(async (groupId)=> {
+    const res = await getDataPublishesFunc(groupId, "thmsg");
-    const res = await getDataPublishesFunc(groupId, 'thmsg')
+    dataPublishes.current = res || {};
-    dataPublishes.current = res || {}
+  }, []);
-  }, [])
 
-  useEffect(()=> {
+  useEffect(() => {
-    if(!groupInfo?.groupId) return
+    if (!groupInfo?.groupId) return;
-    getSavedData(groupInfo?.groupId)
+    getSavedData(groupInfo?.groupId);
-  }, [groupInfo?.groupId])
+  }, [groupInfo?.groupId]);
 
   useEffect(() => {
     currentThreadRef.current = currentThread;
@@ -114,9 +163,24 @@ export const Thread = ({
         secretKey,
         resource: message,
         groupId: groupInfo?.groupId,
-        dataPublishes: dataPublishes.current
+        dataPublishes: dataPublishes.current,
       });
 
+      if (responseDataMessage?.error) {
+        const fullObject = {
+          ...message,
+          error: responseDataMessage?.error,
+          id: message.identifier,
+        };
+        setHashMapMailMessages((prev) => {
+          return {
+            ...prev,
+            [message.identifier]: fullObject,
+          };
+        });
+        return;
+      }
+
       const fullObject = {
         ...message,
         ...(responseDataMessage || {}),
@@ -128,39 +192,34 @@ export const Thread = ({
           [message.identifier]: fullObject,
         };
       });
-    } catch (error) { }
+    } catch (error) {}
   };
 
   const setTempData = async () => {
     try {
       let threadId = currentThread.threadId;
 
-      const keyTemp = 'thread-post'
+      const keyTemp = "thread-post";
-      const getTempAnnouncements = await getTempPublish()
+      const getTempAnnouncements = await getTempPublish();
 
       if (getTempAnnouncements?.[keyTemp]) {
-
+        let tempData = [];
-        let tempData = []
         Object.keys(getTempAnnouncements?.[keyTemp] || {}).map((key) => {
-          const value = getTempAnnouncements?.[keyTemp][key]
+          const value = getTempAnnouncements?.[keyTemp][key];
 
           if (value.data?.threadId === threadId) {
-            tempData.push(value.data)
+            tempData.push(value.data);
           }
-
+        });
-        })
+        setTempPublishedList(tempData);
-        setTempPublishedList(tempData)
       }
-    } catch (error) {
+    } catch (error) {}
-
+  };
-    }
-
-  }
 
   const getMailMessages = React.useCallback(
     async (groupInfo: any, before, after, isReverse, groupId) => {
       try {
-        setTempPublishedList([])
+        setTempPublishedList([]);
         setIsLoading(true);
         setHasFirstPage(false);
         setHasPreviousPage(false);
@@ -169,7 +228,7 @@ export const Thread = ({
         let threadId = groupInfo.threadId;
 
         const identifier = `thmsg-${threadId}`;
-        let url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&prefix=true`;
+        let url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&prefix=true`;
         if (!isReverse) {
           url = url + "&reverse=false";
         }
@@ -191,29 +250,35 @@ export const Thread = ({
         });
         const responseData = await response.json();
 
-
         let fullArrayMsg = [...responseData];
         if (isReverse) {
           fullArrayMsg = fullArrayMsg.reverse();
         }
         // let newMessages: any[] = []
         for (const message of responseData) {
-            getIndividualMsg(message);
+          getIndividualMsg(message);
         }
         setMessages(fullArrayMsg);
         if (before === null && after === null && isReverse) {
           setTimeout(() => {
             containerRef.current.scrollIntoView({ behavior: "smooth" });
           }, 300);
-
+        }
+        if(after || before === null && after === null && !isReverse){
+          setTimeout(() => {
+            threadBeginningRef.current.scrollIntoView();
+          }, 100);
+          
         }
 
         if (fullArrayMsg.length === 0) {
-          setTempData()
+          setTempData();
           return;
         }
         // check if there are newer posts
-        const urlNewer = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&before=${fullArrayMsg[0].created}`;
+        const urlNewer = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&before=${
+          fullArrayMsg[0].created
+        }`;
         const responseNewer = await fetch(urlNewer, {
           method: "GET",
           headers: {
@@ -229,9 +294,9 @@ export const Thread = ({
           setHasPreviousPage(false);
         }
         // check if there are older posts
-        const urlOlder = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&after=${
+        const urlOlder = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=1&includemetadata=false&reverse=false&prefix=true&after=${
           fullArrayMsg[fullArrayMsg.length - 1].created
-          }`;
+        }`;
         const responseOlder = await fetch(urlOlder, {
           method: "GET",
           headers: {
@@ -245,14 +310,14 @@ export const Thread = ({
         } else {
           setHasLastPage(false);
           setHasNextPage(false);
-          setTempData()
+          setTempData();
-          updateThreadActivityCurrentThread()
+          updateThreadActivityCurrentThread();
         }
       } catch (error) {
-        console.log('error', error)
+        console.log("error", error);
       } finally {
         setIsLoading(false);
-        getSavedData(groupId)
+        getSavedData(groupId);
       }
     },
     [messages, secretKey]
@@ -332,7 +397,7 @@ export const Thread = ({
         let threadId = groupInfo.threadId;
 
         const identifier = `thmsg-${threadId}`;
-        const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
+        const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${threadIdentifier}&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`;
         const response = await fetch(url, {
           method: "GET",
           headers: {
@@ -359,7 +424,7 @@ export const Thread = ({
               secretKey: secretKeyRef.current,
               resource: message,
               groupId: groupInfo?.groupId,
-              dataPublishes: dataPublishes.current
+              dataPublishes: dataPublishes.current,
             });
 
             const fullObject = {
@@ -381,7 +446,7 @@ export const Thread = ({
             } else {
               fullArrayMsg.unshift(fullObject);
             }
-          } catch (error) { }
+          } catch (error) {}
         }
         setMessages(fullArrayMsg);
       } catch (error) {
@@ -421,12 +486,14 @@ export const Thread = ({
 
     // Remove duplicates based on the "identifier"
     const uniqueItems = new Map();
-    combined.forEach(item => {
+    combined.forEach((item) => {
-      uniqueItems.set(item.identifier, item);  // This will overwrite duplicates, keeping the last occurrence
+      uniqueItems.set(item.identifier, item); // This will overwrite duplicates, keeping the last occurrence
     });
 
     // Convert the map back to an array and sort by "created" timestamp in descending order
-    const sortedList = Array.from(uniqueItems.values()).sort((a, b) => a.created - b.created);
+    const sortedList = Array.from(uniqueItems.values()).sort(
+      (a, b) => a.created - b.created
+    );
 
     return sortedList;
   }, [tempPublishedList, messages]);
@@ -452,15 +519,15 @@ export const Thread = ({
         setShowScrollButton(false);
       }
     };
-   setTimeout(() => {
+    setTimeout(() => {
-    handleScroll()
+      handleScroll();
-   }, 400);
+    }, 400);
 
-    container.addEventListener('scroll', handleScroll);
+    container.addEventListener("scroll", handleScroll);
 
     // Cleanup
     return () => {
-      container.removeEventListener('scroll', handleScroll);
+      container.removeEventListener("scroll", handleScroll);
     };
   }, [messages]);
 
@@ -470,31 +537,32 @@ export const Thread = ({
     if (!container) return;
 
     if (isAtBottom) {
-      container.scrollTo({ top: 0, behavior: 'smooth' }); // Scroll to top
+      container.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top
     } else {
-      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }); // Scroll to bottom
+      container.scrollTo({ top: container.scrollHeight, behavior: "smooth" }); // Scroll to bottom
     }
   };
 
-
   if (!currentThread) return null;
   return (
     <GroupContainer
       sx={{
         position: "relative",
         width: "100%",
-        display: 'flex',
+        display: "flex",
-        flexDirection: 'column',
+        flexDirection: "column",
-        overflow: 'hidden'
+        overflow: "hidden",
       }}
       // Removed the ref from here since the scrollable area has changed
     >
-      <Box sx={{
+      <Box
-        display: 'flex',
+        sx={{
-        justifyContent: 'space-between',
+          display: "flex",
-        alignItems: 'center',
+          justifyContent: "space-between",
-        flexShrink: 0 // Corrected property name
+          alignItems: "center",
-      }}>
+          flexShrink: 0, // Corrected property name
+        }}
+      >
         <NewThread
           groupInfo={groupInfo}
           isMessage={true}
@@ -509,65 +577,63 @@ export const Thread = ({
           publishCallback={setTempData}
           setPostReply={setPostReply}
         />
-        <Box sx={{
+        <Box
-          display: 'flex',
-          gap: isMobile ? '45px' : '35px',
-          alignItems: 'center',
-          padding: isMobile && '5px'
-        }}>
-          <ShowMessageReturnButton
           sx={{
-            padding: isMobile && '5px',
+            display: "flex",
-            minWidth: isMobile && '50px'
+            gap: isMobile ? "45px" : "35px",
+            alignItems: "center",
+            padding: isMobile && "5px",
           }}
+        >
+          <ShowMessageReturnButton
+            sx={{
+              padding: isMobile && "5px",
+              minWidth: isMobile && "50px",
+            }}
             onClick={() => {
               setMessages([]);
               closeThread();
             }}
           >
             <MailIconImg src={ReturnSVG} />
-            {!isMobile && (
+            {!isMobile && <ComposeP>Return to Threads</ComposeP>}
-                          <ComposeP>Return to Threads</ComposeP>
-
-            )}
           </ShowMessageReturnButton>
           {/* Conditionally render the scroll buttons */}
-          {showScrollButton && (
+          {showScrollButton &&
-            isAtBottom ? (
+            (isAtBottom ? (
               <ButtonBase onClick={scrollToPosition}>
-              <ArrowUpwardIcon
+                <ArrowUpwardIcon
-                sx={{
+                  sx={{
-                  color: 'white',
+                    color: "white",
-                  cursor: 'pointer',
+                    cursor: "pointer",
-                  fontSize: isMobile ? '28px' : '36px',
+                    fontSize: isMobile ? "28px" : "36px",
-                }}
+                  }}
-              />
+                />
               </ButtonBase>
             ) : (
               <ButtonBase onClick={scrollToPosition}>
-              <ArrowDownwardIcon
+                <ArrowDownwardIcon
-                
+                  sx={{
-                sx={{
+                    color: "white",
-                  color: 'white',
+                    cursor: "pointer",
-                  cursor: 'pointer',
+                    fontSize: isMobile ? "28px" : "36px",
-                  fontSize: isMobile ? '28px' : '36px',
+                  }}
-                }}
+                />
-              />
               </ButtonBase>
-            )
+            ))}
-          )}
         </Box>
       </Box>
 
       <ThreadContainerFullWidth
         sx={{
           flexGrow: 1,
-          overflow: 'auto'
+          overflow: "auto",
         }}
         ref={threadContainerRef} // Updated ref attached here
       >
+        <div ref={threadBeginningRef}/>
         <ThreadContainer>
-        <Spacer height={isMobile ? '10px' : '30px'} />
+          <Spacer height={isMobile ? "10px" : "30px"} />
           <Box
             sx={{
               width: "100%",
@@ -576,11 +642,15 @@ export const Thread = ({
               justifyContent: "space-between",
             }}
           >
-            <GroupNameP sx={{
+            <GroupNameP
-              fontSize: isMobile && '18px'
+              sx={{
-            }}>{currentThread?.threadData?.title}</GroupNameP>
+                fontSize: isMobile && "18px",
+              }}
+            >
+              {currentThread?.threadData?.title}
+            </GroupNameP>
           </Box>
-          <Spacer height={'15px'} />
+          <Spacer height={"15px"} />
 
           <Box
             sx={{
@@ -592,13 +662,19 @@ export const Thread = ({
             }}
           >
             <Button
-            sx={{
+              sx={{
-              padding: isMobile && '5px',
+                padding: isMobile && "5px",
-              fontSize: isMobile && '14px',
+                fontSize: isMobile && "14px",
-              textTransformation: 'capitalize'
+                textTransformation: "capitalize",
-            }}
+              }}
               onClick={() => {
-                getMailMessages(currentThread, null, null, false, groupInfo?.groupId);
+                getMailMessages(
+                  currentThread,
+                  null,
+                  null,
+                  false,
+                  groupInfo?.groupId
+                );
               }}
               disabled={!hasFirstPage}
               variant="contained"
@@ -606,11 +682,11 @@ export const Thread = ({
               First
             </Button>
             <Button
-             sx={{
+              sx={{
-              padding: isMobile && '5px',
+                padding: isMobile && "5px",
-              fontSize: isMobile && '14px',
+                fontSize: isMobile && "14px",
-              textTransformation: 'capitalize'
+                textTransformation: "capitalize",
-            }}
+              }}
               onClick={() => {
                 getMailMessages(
                   currentThread,
@@ -626,11 +702,11 @@ export const Thread = ({
               Previous
             </Button>
             <Button
-             sx={{
+              sx={{
-              padding: isMobile && '5px',
+                padding: isMobile && "5px",
-              fontSize: isMobile && '14px',
+                fontSize: isMobile && "14px",
-              textTransformation: 'capitalize'
+                textTransformation: "capitalize",
-            }}
+              }}
               onClick={() => {
                 getMailMessages(
                   currentThread,
@@ -646,13 +722,19 @@ export const Thread = ({
               Next
             </Button>
             <Button
-             sx={{
+              sx={{
-              padding: isMobile && '5px',
+                padding: isMobile && "5px",
-              fontSize: isMobile && '14px',
+                fontSize: isMobile && "14px",
-              textTransformation: 'capitalize'
+                textTransformation: "capitalize",
-            }}
+              }}
               onClick={() => {
-                getMailMessages(currentThread, null, null, true, groupInfo?.groupId);
+                getMailMessages(
+                  currentThread,
+                  null,
+                  null,
+                  true,
+                  groupInfo?.groupId
+                );
               }}
               disabled={!hasLastPage}
               variant="contained"
@@ -660,12 +742,93 @@ export const Thread = ({
               Last
             </Button>
           </Box>
-          <Spacer height={isMobile ? '10px' : '30px'} />
+          <Spacer height={isMobile ? "10px" : "30px"} />
           {combinedListTempAndReal.map((message, index, list) => {
             let fullMessage = message;
 
             if (hashMapMailMessages[message?.identifier]) {
               fullMessage = hashMapMailMessages[message.identifier];
+             
+
+              if (fullMessage?.error) {
+                return (
+                  <SingleThreadParent
+                    sx={{
+                      height: "auto",
+                    }}
+                  >
+                    <Box
+                      style={{
+                        width: "100%",
+                        borderRadius: "8px",
+                        overflow: "hidden",
+                        position: "relative",
+                        flexDirection: "column",
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          display: "flex",
+                          alignItems: "flex-start",
+                          gap: "10px",
+                        }}
+                      >
+                        <WrapperUserAction
+                          disabled={userInfo?.name === message?.name}
+                          address={undefined}
+                          name={message?.name}
+                        >
+                          <Avatar
+                            sx={{
+                              height: "50px",
+                              width: "50px",
+                            }}
+                            src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                              message?.name
+                            }/qortal_avatar?async=true`}
+                            alt={message?.name}
+                          >
+                            {message?.name?.charAt(0)}
+                          </Avatar>
+                        </WrapperUserAction>
+                        <ThreadInfoColumn>
+                          <WrapperUserAction
+                            disabled={userInfo?.name === message?.name}
+                            address={undefined}
+                            name={message?.name}
+                          >
+                            <ThreadInfoColumnNameP>
+                              {message?.name}
+                            </ThreadInfoColumnNameP>
+                          </WrapperUserAction>
+                          <ThreadInfoColumnTime>
+                            {formatTimestampForum(message?.created)}
+                          </ThreadInfoColumnTime>
+                        </ThreadInfoColumn>
+                      </Box>
+                      <Box
+                        sx={{
+                          width: "100%",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          flexDirection: "column",
+                        }}
+                      >
+                        <Typography
+                          sx={{
+                            fontSize: "18px",
+                            color: "white",
+                          }}
+                        >
+                          {fullMessage?.error}
+                        </Typography>
+                      </Box>
+                    
+                    </Box>
+                  </SingleThreadParent>
+                );
+              }
               return (
                 <ShowMessage
                   key={message?.identifier}
@@ -686,20 +849,85 @@ export const Thread = ({
             }
 
             return (
-              <SingleThreadParent>
+              <SingleThreadParent
-                <Skeleton
+                sx={{
-                  variant="rectangular"
+                  height: "auto",
+                }}
+              >
+                <Box
                   style={{
                     width: "100%",
-                    height: 60,
                     borderRadius: "8px",
                     overflow: "hidden",
+                    position: "relative",
+                    flexDirection: "column",
                   }}
-                />
+                >
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "flex-start",
+                      gap: "10px",
+                    }}
+                  >
+                    <WrapperUserAction
+                      disabled={userInfo?.name === message?.name}
+                      address={undefined}
+                      name={message?.name}
+                    >
+                      <Avatar
+                        sx={{
+                          height: "50px",
+                          width: "50px",
+                        }}
+                        src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                          message?.name
+                        }/qortal_avatar?async=true`}
+                        alt={message?.name}
+                      >
+                        {message?.name?.charAt(0)}
+                      </Avatar>
+                    </WrapperUserAction>
+                    <ThreadInfoColumn>
+                      <WrapperUserAction
+                        disabled={userInfo?.name === message?.name}
+                        address={undefined}
+                        name={message?.name}
+                      >
+                        <ThreadInfoColumnNameP>
+                          {message?.name}
+                        </ThreadInfoColumnNameP>
+                      </WrapperUserAction>
+                      <ThreadInfoColumnTime>
+                        {formatTimestampForum(message?.created)}
+                      </ThreadInfoColumnTime>
+                    </ThreadInfoColumn>
+                  </Box>
+                  <Box
+                    sx={{
+                      width: "100%",
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <CustomLoader />
+                    <Typography
+                      sx={{
+                        fontSize: "18px",
+                        color: "white",
+                      }}
+                    >
+                      Downloading from QDN
+                    </Typography>
+                  </Box>
+                  
+                </Box>
               </SingleThreadParent>
             );
           })}
-          <div ref={containerRef} />
+         
           {!hasLastPage && !isLoading && (
             <>
               <Spacer height="20px" />
@@ -714,7 +942,13 @@ export const Thread = ({
                   variant="outlined"
                   startIcon={<RefreshIcon />}
                   onClick={() => {
-                    getMailMessages(currentThread, null, null, true, groupInfo?.groupId);
+                    getMailMessages(
+                      currentThread,
+                      null,
+                      null,
+                      true,
+                      groupInfo?.groupId
+                    );
                   }}
                   sx={{
                     color: "white",
@@ -726,8 +960,11 @@ export const Thread = ({
             </>
           )}
 
-          {messages?.length > 4 && (
+       
-            <>
+            <Box sx={{
+              width: '100%',
+              visibility: messages?.length > 4 ? 'visible' : 'hidden'
+            }}>
               <Spacer height="30px" />
               <Box
                 sx={{
@@ -739,77 +976,90 @@ export const Thread = ({
                 }}
               >
                 <Button
-            sx={{
+                  sx={{
-              padding: isMobile && '5px',
+                    padding: isMobile && "5px",
-              fontSize: isMobile && '14px',
+                    fontSize: isMobile && "14px",
-              textTransformation: 'capitalize'
+                    textTransformation: "capitalize",
-            }}
+                  }}
-              onClick={() => {
+                  onClick={() => {
-                getMailMessages(currentThread, null, null, false, groupInfo?.groupId);
+                    getMailMessages(
-              }}
+                      currentThread,
-              disabled={!hasFirstPage}
+                      null,
-              variant="contained"
+                      null,
-            >
+                      false,
-              First
+                      groupInfo?.groupId
-            </Button>
+                    );
-            <Button
+                  }}
-             sx={{
+                  disabled={!hasFirstPage}
-              padding: isMobile && '5px',
+                  variant="contained"
-              fontSize: isMobile && '14px',
+                >
-              textTransformation: 'capitalize'
+                  First
-            }}
+                </Button>
-              onClick={() => {
+                <Button
-                getMailMessages(
+                  sx={{
-                  currentThread,
+                    padding: isMobile && "5px",
-                  messages[0].created,
+                    fontSize: isMobile && "14px",
-                  null,
+                    textTransformation: "capitalize",
-                  false,
+                  }}
-                  groupInfo?.groupId
+                  onClick={() => {
-                );
+                    getMailMessages(
-              }}
+                      currentThread,
-              disabled={!hasPreviousPage}
+                      messages[0].created,
-              variant="contained"
+                      null,
-            >
+                      false,
-              Previous
+                      groupInfo?.groupId
-            </Button>
+                    );
-            <Button
+                  }}
-             sx={{
+                  disabled={!hasPreviousPage}
-              padding: isMobile && '5px',
+                  variant="contained"
-              fontSize: isMobile && '14px',
+                >
-              textTransformation: 'capitalize'
+                  Previous
-            }}
+                </Button>
-              onClick={() => {
+                <Button
-                getMailMessages(
+                  sx={{
-                  currentThread,
+                    padding: isMobile && "5px",
-                  null,
+                    fontSize: isMobile && "14px",
-                  messages[messages.length - 1].created,
+                    textTransformation: "capitalize",
-                  false,
+                  }}
-                  groupInfo?.groupId
+                  onClick={() => {
-                );
+                    getMailMessages(
-              }}
+                      currentThread,
-              disabled={!hasNextPage}
+                      null,
-              variant="contained"
+                      messages[messages.length - 1].created,
-            >
+                      false,
-              Next
+                      groupInfo?.groupId
-            </Button>
+                    );
-            <Button
+                  }}
-             sx={{
+                  disabled={!hasNextPage}
-              padding: isMobile && '5px',
+                  variant="contained"
-              fontSize: isMobile && '14px',
+                >
-              textTransformation: 'capitalize'
+                  Next
-            }}
+                </Button>
-              onClick={() => {
+                <Button
-                getMailMessages(currentThread, null, null, true, groupInfo?.groupId);
+                  sx={{
-              }}
+                    padding: isMobile && "5px",
-              disabled={!hasLastPage}
+                    fontSize: isMobile && "14px",
-              variant="contained"
+                    textTransformation: "capitalize",
-            >
+                  }}
-              Last
+                  onClick={() => {
-            </Button>
+                    getMailMessages(
+                      currentThread,
+                      null,
+                      null,
+                      true,
+                      groupInfo?.groupId
+                    );
+                  }}
+                  disabled={!hasLastPage}
+                  variant="contained"
+                >
+                  Last
+                </Button>
               </Box>
               <Spacer height="30px" />
-            </>
+            </Box>
-          )}
+       
+           <div ref={containerRef} />
         </ThreadContainer>
       </ThreadContainerFullWidth>
       <LoadingSnackbar

src/components/Group/Group.tsx

@@ -33,6 +33,7 @@ import RefreshIcon from "@mui/icons-material/Refresh";
 import AnnouncementsIcon from "@mui/icons-material/Notifications";
 import GroupIcon from "@mui/icons-material/Group";
 import PersonIcon from "@mui/icons-material/Person";
+
 import {
   AuthenticatedContainerInnerRight,
   CustomButton,
@@ -45,6 +46,7 @@ import MarkChatUnreadIcon from "@mui/icons-material/MarkChatUnread";
 import {
   MyContext,
   clearAllQueues,
+  getArbitraryEndpointReact,
   getBaseApiReact,
   isMobile,
   pauseAllQueues,
@@ -74,6 +76,7 @@ import { flushSync } from "react-dom";
 import { useMessageQueue } from "../../MessageQueueContext";
 import { DrawerComponent } from "../Drawer/Drawer";
 import { isExtMsg } from "../../background";
+import { ContextMenu } from "../ContextMenu";
 
 // let touchStartY = 0;
 // let disablePullToRefresh = false;
@@ -195,6 +198,7 @@ export const decryptResource = async (data: string) => {
         (response) => {
           if (!response?.error) {
             res(response);
+            return
           }
           rej(response.error);
         }
@@ -399,8 +403,11 @@ export const Group = ({
   const [groupAnnouncements, setGroupAnnouncements] = React.useState({});
   const [defaultThread, setDefaultThread] = React.useState(null);
   const [isOpenDrawer, setIsOpenDrawer] = React.useState(false);
-
+  const [hideCommonKeyPopup, setHideCommonKeyPopup] = React.useState(false)
+  const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('')
   const [drawerMode, setDrawerMode] = React.useState("groups");
+  const [mutedGroups, setMutedGroups] = useState([])
+
   const isFocusedRef = useRef(true);
   const selectedGroupRef = useRef(null);
   const selectedDirectRef = useRef(null);
@@ -430,6 +437,37 @@ export const Group = ({
     selectedDirectRef.current = selectedDirect;
   }, [selectedDirect]);
 
+  const getUserSettings = async () => {
+    try {
+      return new Promise((res, rej) => {
+        chrome?.runtime?.sendMessage(
+          {
+            action: "getUserSettings",
+            payload: {
+                key: 'mutedGroups'
+            }
+          },
+          (response) => {
+            if (!response?.error) {
+               
+                setMutedGroups(response || []);
+              res(response);
+              return
+            }
+            rej(response.error);
+          }
+        );
+      });
+    } catch (error) {
+        console.log('error', error)
+    }
+  };
+
+  useEffect(()=> {
+  
+    getUserSettings()
+  }, [])
+
   const getTimestampEnterChat = async () => {
     try {
       return new Promise((res, rej) => {
@@ -610,7 +648,7 @@ export const Group = ({
   const getPublishesFromAdmins = async (admins: string[]) => {
     // const validApi = await findUsableApi();
     const queryString = admins.map((name) => `name=${name}`).join("&");
-    const url = `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
+    const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${
       selectedGroup?.groupId
     }&exactmatchnames=true&limit=0&reverse=true&${queryString}&prefix=true`;
     const response = await fetch(url);
@@ -642,21 +680,22 @@ export const Group = ({
     secretKeyToPublish?: boolean
   ) => {
     try {
+      setIsLoadingGroupMessage('Locating encryption keys')
       // setGroupDataLastSet(null)
       pauseAllQueues();
       let dataFromStorage;
       let publishFromStorage;
       let adminsFromStorage;
-      const groupData = await getGroupDataSingle(selectedGroup?.groupId);
+      // const groupData = await getGroupDataSingle(selectedGroup?.groupId);
-      if (
+      // if (
-        groupData?.secretKeyData &&
+      //   groupData?.secretKeyData &&
-        Date.now() - groupData?.timestampLastSet < 3600000
+      //   Date.now() - groupData?.timestampLastSet < 3600000
-      ) {
+      // ) {
-        dataFromStorage = groupData.secretKeyData;
+      //   dataFromStorage = groupData.secretKeyData;
-        publishFromStorage = groupData.secretKeyResource;
+      //   publishFromStorage = groupData.secretKeyResource;
-        adminsFromStorage = groupData.admins;
+      //   adminsFromStorage = groupData.admins;
-        // setGroupDataLastSet(groupData.timestampLastSet)
+      //   // setGroupDataLastSet(groupData.timestampLastSet)
-      }
+      // }
 
       if (
         secretKeyToPublish &&
@@ -704,6 +743,7 @@ export const Group = ({
       if (dataFromStorage) {
         data = dataFromStorage;
       } else {
+        setIsLoadingGroupMessage('Downloading encryption keys')
         const res = await fetch(
           `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${
             publish.identifier
@@ -748,6 +788,7 @@ export const Group = ({
       }
     } finally {
       setIsLoadingGroup(false);
+      setIsLoadingGroupMessage('')
       if (!secretKeyToPublish) {
         // await getAdmins(selectedGroup?.groupId);
       }
@@ -967,7 +1008,7 @@ export const Group = ({
       secretKey &&
       admins.includes(myAddress)
     ) {
-      console.log("goung through", admins);
+     
       // getAdmins(selectedGroup?.groupId);
       getMembers(selectedGroup?.groupId);
       initiatedGetMembers.current = true;
@@ -1156,6 +1197,41 @@ export const Group = ({
     };
   }, [directs, selectedDirect]);
 
+  const handleMarkAsRead = (e)=> {
+    const {groupId} = e.detail
+    chrome?.runtime?.sendMessage({
+      action: "addTimestampEnterChat",
+      payload: {
+        timestamp: Date.now(),
+        groupId,
+      },
+    });
+
+   
+
+    chrome?.runtime?.sendMessage({
+      action: "addGroupNotificationTimestamp",
+      payload: {
+        timestamp: Date.now(),
+        groupId,
+      },
+    });
+    setTimeout(() => {
+      getGroupAnnouncements();
+      getTimestampEnterChat();
+    }, 200);
+  }
+
+
+  useEffect(() => {
+    subscribeToEvent("markAsRead", handleMarkAsRead);
+
+    return () => {
+      unsubscribeFromEvent("markAsRead", handleMarkAsRead);
+    };
+  }, []);
+
+
   const resetAllStatesAndRefs = () => {
     // Reset all useState values to their initial states
     setSecretKey(null);
@@ -1173,6 +1249,7 @@ export const Group = ({
     setMembers([]);
     setGroupOwner(null);
     setTriedToFetchSecretKey(false);
+    setHideCommonKeyPopup(false)
     setOpenAddGroup(false);
     setIsInitialGroups(false);
     setOpenManageMembers(false);
@@ -1641,7 +1718,7 @@ export const Group = ({
                 onClick={() => {
                   clearAllQueues();
                   setSelectedDirect(null);
-
+                  setTriedToFetchSecretKey(false);
                   setNewChat(false);
                   setSelectedGroup(null);
                   setSecretKey(null);
@@ -1652,7 +1729,7 @@ export const Group = ({
                   setAdminsWithNames([]);
                   setMembers([]);
                   setMemberCountFromSecretKeyData(null);
-                  setTriedToFetchSecretKey(false);
+                  setHideCommonKeyPopup(false);
                   setFirstSecretKeyInCreation(false);
                   // setGroupSection("announcement");
                   setGroupSection("chat");
@@ -1701,6 +1778,7 @@ export const Group = ({
                     group?.groupId === selectedGroup?.groupId && "white",
                 }}
               >
+                <ContextMenu mutedGroups={mutedGroups} getUserSettings={getUserSettings} groupId={group.groupId}>
                 <Box
                   sx={{
                     display: "flex",
@@ -1764,6 +1842,7 @@ export const Group = ({
                       />
                     )}
                 </Box>
+                </ContextMenu>
               </ListItem>
             </List>
           ))}
@@ -2019,8 +2098,9 @@ export const Group = ({
                 {admins.includes(myAddress) &&
                   shouldReEncrypt &&
                   triedToFetchSecretKey &&
-                  !firstSecretKeyInCreation && (
+                  !firstSecretKeyInCreation && !hideCommonKeyPopup && (
                     <CreateCommonSecret
+                    setHideCommonKeyPopup={setHideCommonKeyPopup}
                       groupId={selectedGroup?.groupId}
                       secretKey={secretKey}
                       secretKeyDetails={secretKeyDetails}
@@ -2351,7 +2431,7 @@ export const Group = ({
         <LoadingSnackbar
           open={isLoadingGroup}
           info={{
-            message: "Setting up group... please wait.",
+            message: isLoadingGroupMessage || "Setting up group... please wait.",
           }}
         />
 

src/components/WrapperUserAction.tsx

@@ -75,7 +75,7 @@ export const WrapperUserAction = ({ children, address, name, disabled }) => {
                 name,
               });
               handleClose();
-              console.log('Message clicked');
+            
             }}
             sx={{
                 color: 'white'
@@ -93,7 +93,7 @@ export const WrapperUserAction = ({ children, address, name, disabled }) => {
                     name,
             });
               handleClose();
-              console.log('Send QORT clicked');
+             
             }}
             sx={{
                 color: 'white'