added general settings

src/App.tsx

@@ -13,6 +13,7 @@ import { useDropzone } from "react-dropzone";
 import {
   Box,
   Button,
+  ButtonBase,
   Checkbox,
   CircularProgress,
   Dialog,
@@ -75,6 +76,7 @@ import { useModal } from "./common/useModal";
 import { LoadingButton } from "@mui/lab";
 import { Label } from "./components/Group/AddGroup";
 import { CustomizedSnackbars } from "./components/Snackbar/Snackbar";
+import SettingsIcon from '@mui/icons-material/Settings';
 import {
   getFee,
   groupApi,
@@ -87,6 +89,7 @@ import { requestQueueCommentCount, requestQueuePublishedAccouncements } from "./
 import { requestQueueGroupJoinRequests } from "./components/Group/GroupJoinRequests";
 import { DrawerComponent } from "./components/Drawer/Drawer";
 import { LitecoinQRCode } from "./components/LitecoinQRCode";
+import { Settings } from "./components/Group/Settings";
 
 type extStates =
   | "not-authenticated"
@@ -315,6 +318,7 @@ function App() {
   const [isOpenSendQort, setIsOpenSendQort] = useState(false)
   const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false)
   const [rootHeight, setRootHeight] = useState('100%')
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
   useEffect(() => {
     if(!isMobile) return
     // Function to set the height of the app to the viewport height
@@ -1387,7 +1391,15 @@ function App() {
       />
         </>
       )}
-     
+           <Spacer height="20px" />
+
+     <ButtonBase onClick={()=> {
+      setIsSettingsOpen(true)
+     }}>
+        <SettingsIcon sx={{
+          color: 'rgba(255, 255, 255, 0.5)'
+        }} />
+      </ButtonBase>
       <Spacer height="20px" />
       {authenticatedMode === "qort" && (
         <img
@@ -1415,6 +1427,7 @@ function App() {
           }}
         />
       )}
+     
     </AuthenticatedContainerInnerRight>
     </AuthenticatedContainer>
     )
@@ -2493,6 +2506,10 @@ function App() {
           </LoadingButton>
         </Box>
       </Popover>
+      {isSettingsOpen && (
+              <Settings open={isSettingsOpen} setOpen={setIsSettingsOpen} />
+
+      )}
       <CustomizedSnackbars
         open={openSnack}
         setOpen={setOpenSnack}

src/background.ts

@@ -252,8 +252,10 @@ const handleNotificationDirect = async (directs) => {
   let isFocused;
   const wallet = await getSaveWallet();
   const address = wallet.address0;
+  let isDisableNotifications = await getUserSettings({key: 'disable-push-notifications'}) || false
   const dataDirects = directs.filter((direct) => direct?.sender !== address);
   try {
+    if(isDisableNotifications) return
     if (!dataDirects || dataDirects?.length === 0) return;
     isFocused = await checkWebviewFocus();
 
@@ -469,12 +471,15 @@ async function updateThreadActivity({ threadId, qortalName, groupId, thread }) {
 const handleNotification = async (groups) => {
   const wallet = await getSaveWallet();
   const address = wallet.address0;
+  let isDisableNotifications = await getUserSettings({key: 'disable-push-notifications'}) || false
+
   let mutedGroups = await getUserSettings({key: 'mutedGroups'}) || []
   if(!isArray(mutedGroups)) mutedGroups = []
 
   let isFocused;
   const data = groups.filter((group) => group?.sender !== address && !mutedGroups.includes(group.groupId));
   try {
+    if(isDisableNotifications) return
     if (!data || data?.length === 0) return;
     isFocused = await checkWebviewFocus();
 
@@ -715,23 +720,26 @@ const checkThreads = async (bringBack) => {
         Date.now() +
         "_type=thread-post" +
         `_data=${JSON.stringify(newAnnouncements[0])}`;
-
-      chrome.notifications.create(notificationId, {
-        type: "basic",
-        iconUrl: "qort.png", // Add an appropriate icon for chat notifications
-        title: `New thread post!`,
-        message: `New post in ${newAnnouncements[0]?.thread?.threadData?.title}`,
-        priority: 2, // Use the maximum priority to ensure it's noticeable
-        // buttons: [
-        //   { title: 'Go to group' }
-        // ]
-      });
-      if (!isMobile) {
-        setTimeout(() => {
-          chrome.notifications.clear(notificationId);
-        }, 7000);
+        let isDisableNotifications = await getUserSettings({key: 'disable-push-notifications'}) || false
+      if(!isDisableNotifications){
+        chrome.notifications.create(notificationId, {
+          type: "basic",
+          iconUrl: "qort.png", // Add an appropriate icon for chat notifications
+          title: `New thread post!`,
+          message: `New post in ${newAnnouncements[0]?.thread?.threadData?.title}`,
+          priority: 2, // Use the maximum priority to ensure it's noticeable
+          // buttons: [
+          //   { title: 'Go to group' }
+          // ]
+        });
+        if (!isMobile) {
+          setTimeout(() => {
+            chrome.notifications.clear(notificationId);
+          }, 7000);
+        }
+        playNotificationSound();
       }
-      playNotificationSound();
+      
     }
     const savedtimestampAfter = await getTimestampGroupAnnouncement();
     chrome.runtime.sendMessage({
@@ -804,7 +812,9 @@ const checkNewMessages = async () => {
         }
       })
     );
-    if (newAnnouncements.length > 0 && !mutedGroups.includes(newAnnouncements[0]?.groupId)) {
+    let isDisableNotifications = await getUserSettings({key: 'disable-push-notifications'}) || false
+
+    if (newAnnouncements.length > 0 && !mutedGroups.includes(newAnnouncements[0]?.groupId) && !isDisableNotifications) {
       const notificationId =
         "chat_notification_" +
         Date.now() +

src/components/Group/Settings.tsx

@@ -0,0 +1,189 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemButton from "@mui/material/ListItemButton";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import CloseIcon from "@mui/icons-material/Close";
+import Slide from "@mui/material/Slide";
+import { TransitionProps } from "@mui/material/transitions";
+import ListOfMembers from "./ListOfMembers";
+import { InviteMember } from "./InviteMember";
+import { ListOfInvites } from "./ListOfInvites";
+import { ListOfBans } from "./ListOfBans";
+import { ListOfJoinRequests } from "./ListOfJoinRequests";
+import { Box, FormControlLabel, Switch, Tab, Tabs, styled } from "@mui/material";
+import { CustomizedSnackbars } from "../Snackbar/Snackbar";
+import { MyContext, isMobile } from "../../App";
+import { getGroupMembers, getNames } from "./Group";
+import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
+import { getFee } from "../../background";
+import { LoadingButton } from "@mui/lab";
+import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  '& .MuiSwitch-track': {
+    borderRadius: 22 / 2,
+    '&::before, &::after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: 16,
+      height: 16,
+    },
+    '&::before': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main),
+      )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
+      left: 12,
+    },
+    '&::after': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.main),
+      )}" d="M19,13H5V11H19V13Z" /></svg>')`,
+      right: 12,
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: 'none',
+    width: 16,
+    height: 16,
+    margin: 2,
+  },
+}));
+
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export const Settings = ({
+  address,
+  open,
+  setOpen,
+}) => {
+  const [checked, setChecked] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+    chrome?.runtime?.sendMessage(
+      {
+        action: "addUserSettings",
+        payload: {
+          keyValue: {
+              key: 'disable-push-notifications',
+              value: event.target.checked
+          },
+        },
+      }
+    );
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const getUserSettings = async () => {
+    try {
+      return new Promise((res, rej) => {
+        chrome?.runtime?.sendMessage(
+          {
+            action: "getUserSettings",
+            payload: {
+              key: "disable-push-notifications",
+            },
+          },
+          (response) => {
+            if (!response?.error) {
+              setChecked(response || false);
+              res(response);
+              return;
+            }
+            rej(response.error);
+          }
+        );
+      });
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
+  React.useEffect(() => {
+    getUserSettings();
+  }, []);
+
+ 
+
+  return (
+    <React.Fragment>
+      <Dialog
+        fullScreen
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Transition}
+      >
+        <AppBar sx={{ position: "relative", bgcolor: "#232428" }}>
+          <Toolbar>
+            <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+             General Settings
+            </Typography>
+            <IconButton
+              edge="start"
+              color="inherit"
+              onClick={handleClose}
+              aria-label="close"
+            >
+              <CloseIcon />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+        <Box
+          sx={{
+            bgcolor: "#27282c",
+            flexGrow: 1,
+            overflowY: "auto",
+            color: "white",
+            padding: '20px'
+          }}
+        >
+        
+        <FormControlLabel
+      sx={{
+        color: 'white'
+      }}
+        control={<LocalNodeSwitch  checked={checked}
+        onChange={handleChange}  />}
+        label="Disable all push notifications"
+      />
+          
+
+
+         
+          
+         
+        </Box>
+     
+       
+      </Dialog>
+      
+    </React.Fragment>
+  );
+};