mobile update

2025-07-24 10:41:24 +00:00 · 2024-09-14 06:33:41 +03:00
parent eebcd8c36f
commit 93fba38de3
17 changed files with 524 additions and 217 deletions
--- a/src/components/Group/AddGroup.tsx
+++ b/src/components/Group/AddGroup.tsx
@@ -29,7 +29,7 @@ import { AddGroupList } from "./AddGroupList";
 import { UserListOfInvites } from "./UserListOfInvites";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
 import { getFee } from "../../background";
-import { MyContext } from "../../App";
+import { MyContext, isMobile } from "../../App";
 import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";

 export const Label = styled("label")(
@@ -220,44 +220,50 @@ export const AddGroup = ({ address, open, setOpen }) => {
          }}
        >
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs
-              sx={{
-                "& .MuiTabs-indicator": {
-                  backgroundColor: "white",
-                },
-              }}
-              value={value}
-              onChange={handleChange}
-              aria-label="basic tabs example"
-            >
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Create Group"
-                {...a11yProps(0)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Find Group"
-                {...a11yProps(1)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Group Invites"
-                {...a11yProps(2)}
-              />
-            </Tabs>
+          <Tabs
+      value={value}
+      onChange={handleChange}
+      aria-label="basic tabs example"
+      variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop
+      scrollButtons="auto"
+      allowScrollButtonsMobile
+      sx={{
+        "& .MuiTabs-indicator": {
+          backgroundColor: "white",
+        },
+      }}
+    >
+      <Tab
+        label="Create Group"
+        {...a11yProps(0)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+      <Tab
+        label="Find Group"
+        {...a11yProps(1)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+      <Tab
+        label="Group Invites"
+        {...a11yProps(2)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+    </Tabs>
          </Box>
          
          {value === 0 && (
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@@ -247,7 +247,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
        style={{
          position: "relative",
          height: "500px",
-          width: "600px",
+          width: "100%",
          display: "flex",
          flexDirection: "column",
          flexShrink: 1,
--- a/src/components/Group/Forum/NewThread.tsx
+++ b/src/components/Group/Forum/NewThread.tsx
@@ -30,7 +30,7 @@ import { formatBytes } from "../../../utils/Size";
 import { CreateThreadIcon } from "../../../assets/svgs/CreateThreadIcon";
 import { SendNewMessage } from "../../../assets/svgs/SendNewMessage";
 import { TextEditor } from "./TextEditor";
-import { MyContext, pauseAllQueues, resumeAllQueues } from "../../../App";
+import { MyContext, isMobile, pauseAllQueues, resumeAllQueues } from "../../../App";
 import { getFee } from "../../../background";
 import TipTap from "../../Chat/TipTap";
 import { MessageDisplay } from "../../Chat/MessageDisplay";
@@ -410,7 +410,7 @@ export const NewThread = ({
      <ReusableModal
        open={isOpen}
        customStyles={{
-          maxHeight: "95vh",
+          maxHeight: isMobile ? '95svh' : "95vh",
          maxWidth: "950px",
          height: "700px",
          borderRadius: "12px 12px 0px 0px",
@@ -421,25 +421,27 @@ export const NewThread = ({
      >
        <InstanceListHeader
          sx={{
-            height: "50px",
-            padding: "20px 42px",
+            height: isMobile ? 'auto' : "50px",
+            padding: isMobile ? '5px' : "20px 42px",
            flexDirection: "row",
+            alignItems: 'center',
            justifyContent: "space-between",
-            alignItems: "center",
            backgroundColor: "#434448",
          }}
        >
          <NewMessageHeaderP>
            {isMessage ? "Post Message" : "New Thread"}
          </NewMessageHeaderP>
-          <CloseContainer onClick={closeModal}>
+          <CloseContainer sx={{
+            height: '40px'
+          }} onClick={closeModal}>
            <NewMessageCloseImg src={ModalCloseSVG} />
          </CloseContainer>
        </InstanceListHeader>
        <InstanceListContainer
          sx={{
            backgroundColor: "#434448",
-            padding: "20px 42px",
+            padding: isMobile ? '5px' : "20px 42px",
            height: "calc(100% - 150px)",
            flexShrink: 0,
          }}
@@ -463,7 +465,7 @@ export const NewThread = ({
                    color: "white",
                    "& .MuiInput-input::placeholder": {
                      color: "rgba(255,255,255, 0.70) !important",
-                      fontSize: "20px",
+                      fontSize: isMobile ? '14px' : "20px",
                      fontStyle: "normal",
                      fontWeight: 400,
                      lineHeight: "120%", // 24px
@@ -491,7 +493,10 @@ export const NewThread = ({
              <MessageDisplay htmlContent={postReply?.textContentV2} />
            </Box>
          )}
-          <Spacer height="30px" />
+          {!isMobile && (
+                      <Spacer height="30px" />
+
+          )}
          <Box
            sx={{
              maxHeight: "40vh",
@@ -501,6 +506,8 @@ export const NewThread = ({
              setEditorRef={setEditorRef}
              onEnter={sendMail}
              disableEnter
+              overrideMobile
+              customEditorHeight="240px"
            />
            {/* <TextEditor
              inlineContent={value}
@@ -513,9 +520,9 @@ export const NewThread = ({
        <InstanceFooter
          sx={{
            backgroundColor: "#434448",
-            padding: "20px 42px",
+            padding: isMobile ? '5px' :  "20px 42px",
            alignItems: "center",
-            height: "90px",
+            height: isMobile ? 'auto' :  "90px",
          }}
        >
          <NewMessageSendButton onClick={sendMail}>
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -522,6 +522,36 @@ export const Group = ({
    return hasUnread;
  }, [timestampEnterData, directs, myAddress]);

+  const groupChatHasUnread = useMemo(() => {
+    let hasUnread = false;
+    groups.forEach((group) => {
+      if (
+        group?.data && isExtMsg(group?.data) &&  group?.sender !== myAddress &&
+        group?.timestamp &&
+        ((!timestampEnterData[group?.groupId] &&
+          Date.now() - group?.timestamp <
+            timeDifferenceForNotificationChats) ||
+          timestampEnterData[group?.groupId] < group?.timestamp)
+      ) {
+        hasUnread = true;
+      }
+    });
+    return hasUnread;
+  }, [timestampEnterData, groups, myAddress]);
+
+  const groupsAnnHasUnread = useMemo(() => {
+    let hasUnread = false;
+    groups.forEach((group) => {
+      if (
+        groupAnnouncements[group?.groupId] &&
+                  !groupAnnouncements[group?.groupId]?.seentimestamp
+      ) {
+        hasUnread = true;
+      }
+    });
+    return hasUnread;
+  }, [groupAnnouncements, groups]);
+
  // useEffect(() => {
  //   if (!myAddress) return;
  //   checkGroupListFunc(myAddress);
@@ -1660,6 +1690,7 @@ export const Group = ({
              setNewChat(true);
              setSelectedDirect(null);
              setSelectedGroup(null);
+              setIsOpenDrawer(false)
            }}
          >
            <CreateIcon
@@ -2205,7 +2236,11 @@ export const Group = ({
           size="small"
           variant="contained"
           startIcon={<AnnouncementsIcon />}
-           sx={{ padding: '4px 6px' }} // Make padding smaller
+           sx={{ padding: '4px 6px', 
+           color: groupSection === 'announcement'  ? 'black' : 'white',
+           backgroundColor: isUnread
+           ? "red" : groupSection === 'announcement'  ? 'white' : 'black',
+           }} 
           onClick={goToAnnouncements}
         >
           ANN
@@ -2217,7 +2252,10 @@ export const Group = ({
           size="small"
           variant="contained"
           startIcon={<ChatIcon />}
-           sx={{ padding: '4px 6px' }}
+           sx={{ padding: '4px 6px',  color: groupSection === 'chat'  ? 'black' : 'white',
+           backgroundColor: isUnreadChat
+           ? "red"
+           : groupSection === 'chat'  ? 'white' : 'black', }}
           onClick={goToChat}
         >
           Chat
@@ -2229,7 +2267,8 @@ export const Group = ({
           size="small"
           variant="contained"
           startIcon={<ForumIcon />}
-           sx={{ padding: '4px 6px' }}
+           sx={{ padding: '4px 6px',  color: groupSection === 'forum'  ? 'black' : 'white',
+           backgroundColor: groupSection === 'forum'  ? 'white' : 'black', }}
           onClick={() => setGroupSection("forum")}
         >
           Forum
@@ -2241,7 +2280,7 @@ export const Group = ({
           size="small"
           variant="contained"
           startIcon={<GroupIcon />}
-           sx={{ padding: '4px 6px' }}
+           sx={{ padding: '4px 6px', backgroundColor: 'black' }}
           onClick={() => setOpenManageMembers(true)}
         >
           Members
@@ -2257,7 +2296,7 @@ export const Group = ({
          size="small"
          variant="contained"
          startIcon={<GroupIcon />}
-          sx={{ padding: '2px 4px' }}
+          sx={{ padding: '2px 4px', backgroundColor: groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread ? "red" : 'black'  }}
          onClick={() => {
            setIsOpenDrawer(true);
            setDrawerMode("groups");
--- a/src/components/Group/ListOfBans.tsx
+++ b/src/components/Group/ListOfBans.tsx
@@ -168,7 +168,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
  return (
    <div>
      <p>Ban list</p>
-      <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+      <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
        <AutoSizer>
          {({ height, width }) => (
            <List
--- a/src/components/Group/ListOfInvites.tsx
+++ b/src/components/Group/ListOfInvites.tsx
@@ -169,7 +169,7 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
  return (
    <div>
      <p>Invitees list</p>
-      <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+      <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
        <AutoSizer>
          {({ height, width }) => (
            <List
--- a/src/components/Group/ListOfJoinRequests.tsx
+++ b/src/components/Group/ListOfJoinRequests.tsx
@@ -169,7 +169,7 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
  return (
    <div>
      <p>Join request list</p>
-      <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+      <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
        <AutoSizer>
          {({ height, width }) => (
            <List
--- a/src/components/Group/ListOfMembers.tsx
+++ b/src/components/Group/ListOfMembers.tsx
@@ -357,7 +357,7 @@ const ListOfMembers = ({
        style={{
          position: "relative",
          height: "500px",
-          width: "600px",
+          width: "100%",
          display: "flex",
          flexDirection: "column",
          flexShrink: 1,
--- a/src/components/Group/ManageMembers.tsx
+++ b/src/components/Group/ManageMembers.tsx
@@ -19,7 +19,7 @@ import { ListOfBans } from "./ListOfBans";
 import { ListOfJoinRequests } from "./ListOfJoinRequests";
 import { Box, Tab, Tabs } from "@mui/material";
 import { CustomizedSnackbars } from "../Snackbar/Snackbar";
-import { MyContext } from "../../App";
+import { MyContext, isMobile } from "../../App";
 import { getGroupMembers, getNames } from "./Group";
 import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
 import { getFee } from "../../background";
@@ -173,63 +173,72 @@ export const ManageMembers = ({
          }}
        >
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs
-              sx={{
-                "& .MuiTabs-indicator": {
-                  backgroundColor: "white",
-                },
-              }}
-              value={value}
-              onChange={handleChange}
-              aria-label="basic tabs example"
-            >
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="List of members"
-                {...a11yProps(0)}
-              />
-               <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Invite new member"
-                {...a11yProps(1)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="List of invites"
-                {...a11yProps(2)}
-              />
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="List of bans"
-                {...a11yProps(3)}
-              />
-             
-              <Tab
-                sx={{
-                  "&.Mui-selected": {
-                    color: `white`,
-                  },
-                }}
-                label="Join requests"
-                {...a11yProps(4)}
-              />
-            </Tabs>
+          <Tabs
+      value={value}
+      onChange={handleChange}
+      aria-label="basic tabs example"
+      variant="scrollable"  // Make tabs scrollable
+      scrollButtons="auto"  // Show scroll buttons automatically
+      allowScrollButtonsMobile  // Show scroll buttons on mobile as well
+      sx={{
+        "& .MuiTabs-indicator": {
+          backgroundColor: "white",
+        },
+        maxWidth: '100%',  // Ensure the tabs container fits within the available space
+        overflow: 'hidden', // Prevents overflow on small screens
+      }}
+    >
+      <Tab
+        label="List of members"
+        {...a11yProps(0)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+        }}
+      />
+      <Tab
+        label="Invite new member"
+        {...a11yProps(1)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+      <Tab
+        label="List of invites"
+        {...a11yProps(2)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+      <Tab
+        label="List of bans"
+        {...a11yProps(3)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+      <Tab
+        label="Join requests"
+        {...a11yProps(4)}
+        sx={{
+          "&.Mui-selected": {
+            color: "white",
+          },
+          fontSize: isMobile ? '0.75rem' : '1rem',
+        }}
+      />
+    </Tabs>
          </Box>

          {selectedGroup?.groupId && !isOwner &&  (
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/src/components/Group/UserListOfInvites.tsx
@@ -186,7 +186,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
    return (
      <div>
        <p>Invite list</p>
-        <div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+        <div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
          <AutoSizer>
            {({ height, width }) => (
              <List