added desktop styles

2025-07-23 04:36:52 +00:00 · 2024-09-21 21:29:29 +03:00
parent 5a8f21bfb9
commit e1d7147431
12 changed files with 362 additions and 27 deletions
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -388,7 +388,7 @@ const clearEditorContent = () => {
  
  return (
    <div style={{
-      height: isMobile ? '100%' : '100vh',
+      height: isMobile ? '100%' : '100%',
      display: 'flex',
      flexDirection: 'column',
      width: '100%',
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -488,7 +488,7 @@ export const GroupAnnouncements = ({
      <div
        style={{
          // reference to change height
-          height: isMobile ? `calc(${rootHeight} - 127px` : "100vh",
+          height: isMobile ? `calc(${rootHeight} - 127px` : "calc(100vh - 70px)",
          display: "flex",
          flexDirection: "column",
          width: "100%",
@@ -514,7 +514,7 @@ export const GroupAnnouncements = ({
    <div
      style={{
         // reference to change height
-        height: isMobile ? `calc(${rootHeight} - 127px` : "100vh",
+        height: isMobile ? `calc(${rootHeight} - 127px` : "calc(100vh - 70px)",
        display: "flex",
        flexDirection: "column",
        width: "100%",
--- a/src/components/Chat/GroupForum.tsx
+++ b/src/components/Chat/GroupForum.tsx
@@ -40,7 +40,7 @@ export const GroupForum = ({
    <div
    style={{
      // reference to change height
-      height: isMobile ? `calc(${rootHeight} - 127px` : "100vh",
+      height: isMobile ? `calc(${rootHeight} - 127px` : "calc(100vh - 70px)",
      display: "flex",
      flexDirection: "column",
      width: "100%",
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/src/components/Desktop/DesktopHeader.tsx
@@ -0,0 +1,280 @@
+import * as React from "react";
+import {
+  BottomNavigation,
+  BottomNavigationAction,
+  ButtonBase,
+  Typography,
+} from "@mui/material";
+import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
+import { CustomSvg } from "../../common/CustomSvg";
+import { WalletIcon } from "../../assets/Icons/WalletIcon";
+import { HubsIcon } from "../../assets/Icons/HubsIcon";
+import { TradingIcon } from "../../assets/Icons/TradingIcon";
+import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
+import { HomeIcon } from "../../assets/Icons/HomeIcon";
+import { NotificationIcon2 } from "../../assets/Icons/NotificationIcon2";
+import { ChatIcon } from "../../assets/Icons/ChatIcon";
+import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
+import { MembersIcon } from "../../assets/Icons/MembersIcon";
+
+const IconWrapper = ({ children, label, color, selected, selectColor }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "5px",
+        flexDirection: "column",
+        height: "65px",
+        width: "65px",
+        borderRadius: "50%",
+        backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent",
+      }}
+    >
+      {children}
+      <Typography
+        sx={{
+          fontFamily: "Inter",
+          fontSize: "10px",
+          fontWeight: 500,
+          color: color,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+};
+
+export const DesktopHeader = ({
+  selectedGroup,
+  groupSection,
+  isUnread,
+  goToAnnouncements,
+  isUnreadChat,
+  goToChat,
+  goToThreads,
+  setOpenManageMembers,
+  groupChatHasUnread,
+  groupsAnnHasUnread,
+  directChatHasUnread,
+  chatMode,
+  openDrawerGroups,
+  goToHome,
+  setIsOpenDrawerProfile,
+  mobileViewMode,
+  setMobileViewMode,
+  setMobileViewModeKeepOpen,
+  hasUnreadGroups,
+  hasUnreadDirects,
+  isHome,
+  isGroups,
+  isDirects,
+  setDesktopSideView,
+  hasUnreadAnnouncements,
+  isAnnouncement,
+  hasUnreadChat,
+  isChat,
+  isForum,
+  setGroupSection
+}) => {
+  const [value, setValue] = React.useState(0);
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        height: "70px", // Footer height
+        zIndex: 1,
+        justifyContent: "space-between",
+        padding: "10px",
+      }}
+    >
+      <Box>
+        <Typography
+          sx={{
+            fontSize: "16px",
+            fontWeight: 600,
+          }}
+        >
+          {selectedGroup?.groupName}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          gap: "20px",
+          alignItems: "center",
+        }}
+      >
+        <ButtonBase
+          onClick={() => {
+            goToHome();
+          }}
+        >
+          <IconWrapper
+            color="rgba(250, 250, 250, 0.5)"
+            label="Home"
+            selected={isHome}
+          >
+            <HomeIcon
+              height={25}
+              color={isHome ? "white" : "rgba(250, 250, 250, 0.5)"}
+            />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopSideView("groups");
+          }}
+        >
+          <IconWrapper
+            color="rgba(250, 250, 250, 0.5)"
+            label="Hubs"
+            selected={isGroups}
+          >
+            <HubsIcon
+              height={25}
+              color={
+                hasUnreadGroups
+                  ? "var(--unread)"
+                  : isGroups
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setDesktopSideView("directs");
+          }}
+        >
+          <IconWrapper
+            color="rgba(250, 250, 250, 0.5)"
+            label="Messaging"
+            selected={isDirects}
+          >
+            <MessagingIcon
+              height={25}
+              color={
+                hasUnreadDirects
+                  ? "var(--unread)"
+                  : isDirects
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+        <Box
+          sx={{
+            width: "1px",
+            height: "50px",
+            background: "white",
+            borderRadius: "50px",
+          }}
+        />
+        <ButtonBase
+          onClick={() => {
+            goToAnnouncements()
+          }}
+        >
+          <IconWrapper
+            color={isAnnouncement ? "black" :"rgba(250, 250, 250, 0.5)"}
+            label="ANN"
+            selected={isAnnouncement}
+            selectColor="#09b6e8"
+          >
+            <NotificationIcon2
+              height={25}
+              width={20}
+              color={
+                hasUnreadAnnouncements
+                  ? "var(--unread)"
+                  : isAnnouncement
+                  ? "black"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+
+        <ButtonBase
+          onClick={() => {
+            goToChat()
+          }}
+        >
+          <IconWrapper
+            color={isChat ? "black" :"rgba(250, 250, 250, 0.5)"}
+            label="Chat"
+            selected={isChat}
+            selectColor="#09b6e8"
+          >
+            <ChatIcon
+              height={25}
+              width={20}
+              color={
+                hasUnreadChat
+                  ? "var(--unread)"
+                  : isChat
+                  ? "black"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+
+        <ButtonBase
+          onClick={() => {
+            setGroupSection("forum");
+          
+          }}
+        >
+          <IconWrapper
+            color={isForum ? 'black' : "rgba(250, 250, 250, 0.5)"}
+            label="Threads"
+            selected={isForum}
+            selectColor="#09b6e8"
+          >
+            <ThreadsIcon
+              height={25}
+              width={20}
+              color={
+                isForum
+                  ? "black"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+        <ButtonBase
+          onClick={() => {
+            setOpenManageMembers(true)
+          
+          }}
+        >
+          <IconWrapper
+            color="rgba(250, 250, 250, 0.5)"
+            label="Members"
+            selected={false}
+          >
+            <MembersIcon
+              height={25}
+              width={20}
+              color={
+                isForum
+                  ? "white"
+                  : "rgba(250, 250, 250, 0.5)"
+              }
+            />
+          </IconWrapper>
+        </ButtonBase>
+      </Box>
+    </Box>
+  );
+};
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -87,6 +87,7 @@ import { ReturnIcon } from "../../assets/Icons/ReturnIcon";
 import { ExitIcon } from "../../assets/Icons/ExitIcon";
 import { HomeDesktop } from "./HomeDesktop";
 import { DesktopFooter } from "../Desktop/DesktopFooter";
+import { DesktopHeader } from "../Desktop/DesktopHeader";

 // let touchStartY = 0;
 // let disablePullToRefresh = false;
@@ -807,13 +808,20 @@ export const Group = ({
    }
  };

+  useEffect(()=> {
+    if(!selectedGroup) return
+    getGroupOwner(selectedGroup?.groupId);
+  }, [selectedGroup])
+
+  console.log('groupOwner', groupOwner)
+
  useEffect(() => {
-    if (selectedGroup) {
+    if (selectedGroup && groupOwner && groupOwner?.isOpen === false) {
      setTriedToFetchSecretKey(false);
      getSecretKey(true);
-      getGroupOwner(selectedGroup?.groupId);
+      // getGroupOwner(selectedGroup?.groupId);
    }
-  }, [selectedGroup]);
+  }, [selectedGroup, groupOwner]);

  // const handleNotification = async (data)=> {
  //   try {
@@ -1320,6 +1328,7 @@ export const Group = ({

      setNewChat(false);
      setSecretKey(null);
+      setGroupOwner(null)
      lastFetchedSecretKey.current = null;
      setSecretKeyPublishDate(null);
      setAdmins([]);
@@ -1367,6 +1376,7 @@ export const Group = ({
      setChatMode("groups");
      setSelectedGroup(null);
      setSecretKey(null);
+      setGroupOwner(null)
      lastFetchedSecretKey.current = null;
      setSecretKeyPublishDate(null);
      setAdmins([]);
@@ -1425,6 +1435,7 @@ export const Group = ({
      setChatMode("groups");
      setSelectedGroup(null);
      setSecretKey(null);
+      setGroupOwner(null)
      lastFetchedSecretKey.current = null;
      setSecretKeyPublishDate(null);
      setAdmins([]);
@@ -1475,6 +1486,7 @@ export const Group = ({
    setNewChat(false);
    setSelectedDirect(null);
    setSecretKey(null);
+    setGroupOwner(null)
    lastFetchedSecretKey.current = null;
    setSecretKeyPublishDate(null);
    setAdmins([]);
@@ -1970,6 +1982,7 @@ export const Group = ({
                  setAdmins([]);
                  setSecretKeyDetails(null);
                  setAdminsWithNames([]);
+                  setGroupOwner(null)
                  setMembers([]);
                  setMemberCountFromSecretKeyData(null);
                  setHideCommonKeyPopup(false);
@@ -2153,6 +2166,7 @@ export const Group = ({
        info={infoSnack}
        setInfo={setInfoSnack}
      />
+      
      {isMobile && (
         <Header
         setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
@@ -2290,6 +2304,44 @@ export const Group = ({
          )}
          {selectedGroup && (
            <>
+            {!isMobile && selectedGroup && (
+        
+        <DesktopHeader
+        selectedGroup={selectedGroup}
+        groupSection={groupSection}
+        isUnread={isUnread}
+        goToAnnouncements={goToAnnouncements}
+        isUnreadChat={isUnreadChat}
+        goToChat={goToChat}
+        goToThreads={goToThreads}
+        setOpenManageMembers={setOpenManageMembers}
+        groupChatHasUnread={groupChatHasUnread}
+        groupsAnnHasUnread={groupsAnnHasUnread}
+        directChatHasUnread={directChatHasUnread}
+        chatMode={chatMode}
+        openDrawerGroups={openDrawerGroups}
+        goToHome={goToHome}
+        setIsOpenDrawerProfile={setIsOpenDrawerProfile}
+        mobileViewMode={mobileViewMode}
+        setMobileViewMode={setMobileViewMode}
+        setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
+        hasUnreadGroups={groupChatHasUnread ||
+          groupsAnnHasUnread}
+        hasUnreadDirects={directChatHasUnread}
+        myName={userInfo?.name || null}
+        isHome={groupSection === "home"}
+        isGroups={desktopSideView === 'groups'}
+        isDirects={desktopSideView === 'directs'}
+        setDesktopSideView={setDesktopSideView}
+        hasUnreadAnnouncements={isUnread}
+        isAnnouncement={groupSection === "announcement"}
+        isChat={groupSection === "chat"}
+        hasUnreadChat={isUnreadChat}
+        setGroupSection={setGroupSection}
+        isForum={groupSection === "forum"}
+        />
+   
+  )}
            {isMobile && (
               <Box
               sx={{
@@ -2361,7 +2413,7 @@ export const Group = ({
                  flexGrow: 1,
                  display: "flex",
                  // reference to change height
-                  height: isMobile ? "calc(100% - 82px)" : "100%",
+                  height: isMobile ? "calc(100% - 82px)" : "calc(100vh - 70px)",
                }}
              >
                {triedToFetchSecretKey && (
@@ -2572,7 +2624,7 @@ export const Group = ({
              </Box>
            </>
          )}
-           {!isMobile && (
+           {!isMobile && groupSection === "home" && (
        <DesktopFooter 
        selectedGroup={selectedGroup}
        groupSection={groupSection}
@@ -2641,13 +2693,13 @@ export const Group = ({
        <AuthenticatedContainerInnerRight
          sx={{
            marginLeft: "auto",
-            width: "135px",
-            minWidth: "135px",
+            width: "31px",
+            // minWidth: "135px",
            padding: "5px",
            display: isMobile ? "none" : "flex",
          }}
        >
-          <Spacer height="20px" />
+          {/* <Spacer height="20px" />
          <Box
            sx={{
              display: "flex",
@@ -2818,7 +2870,7 @@ export const Group = ({
              </Box>
              <Spacer height="20px" />
            </>
-          )}
+          )} */}

          {/* <SettingsIcon
              sx={{
--- a/src/components/Group/GroupJoinRequests.tsx
+++ b/src/components/Group/GroupJoinRequests.tsx
@@ -92,7 +92,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
    }
  }, [myAddress, groups]);

-
+  console.log('groupsWithJoinRequests', groupsWithJoinRequests)

  return (
    <Box sx={{
@@ -142,7 +142,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
      <CustomLoader />
      </Box>
    )}
-    {!loading && groupsWithJoinRequests.length === 0 && (
+    {!loading && (groupsWithJoinRequests.length === 0 || groupsWithJoinRequests?.filter((group)=> group?.data?.length > 0).length === 0) && (
    <Box
    sx={{
      width: "100%",
--- a/src/components/Group/HomeDesktop.tsx
+++ b/src/components/Group/HomeDesktop.tsx
@@ -59,7 +59,7 @@ export const HomeDesktop = ({
          >{`, ${userInfo?.name}`}</span>
        ) : null}
      </Typography>
-      <Spacer height="70px" />
+      <Spacer height="30px" />
      {!isLoadingGroups && (
        <Box
          sx={{