started on desktop

src/App-styles.ts

@@ -77,7 +77,7 @@ display: flex;
 border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
 justify-content: space-between;
 align-items: center;
-width: 132px;
+width: 140px;
 height: 25px;
 padding: 5px 15px 5px 15px;
 gap: 5px;

src/App.tsx

@@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = {
     message: "",
   },
 };
-export let isMobile = true
+export let isMobile = false
 
 const isMobileDevice = () => {
   const userAgent = navigator.userAgent || navigator.vendor || window.opera;

src/components/Desktop/DesktopFooter.tsx

@@ -0,0 +1,118 @@
+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";
+
+const IconWrapper = ({ children, label, color, selected }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "5px",
+        flexDirection: "column",
+        height: '89px',
+        width: '89px',
+        borderRadius: '50%',
+        backgroundColor: selected ? 'rgba(28, 29, 32, 1)' : 'transparent'
+      }}
+    >
+      {children}
+      <Typography
+        sx={{
+          fontFamily: "Inter",
+          fontSize: "12px",
+          fontWeight: 500,
+          color: color,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+};
+
+export const DesktopFooter = ({
+  selectedGroup,
+  groupSection,
+  isUnread,
+  goToAnnouncements,
+  isUnreadChat,
+  goToChat,
+  goToThreads,
+  setOpenManageMembers,
+  groupChatHasUnread,
+  groupsAnnHasUnread,
+  directChatHasUnread,
+  chatMode,
+  openDrawerGroups,
+  goToHome,
+  setIsOpenDrawerProfile,
+  mobileViewMode,
+  setMobileViewMode,
+  setMobileViewModeKeepOpen,
+  hasUnreadGroups,
+  hasUnreadDirects,
+  isHome,
+  isGroups,
+  isDirects,
+  setDesktopSideView
+}) => {
+  const [value, setValue] = React.useState(0);
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        position: "absolute",
+        bottom: 0,
+        display: "flex",
+        alignItems: "center",
+        height: "100px", // Footer height
+        zIndex: 1,
+        justifyContent: 'center'
+      }}
+    >
+     <Box sx={{
+      display: 'flex',
+      gap: '20px'
+     }}>
+     <ButtonBase onClick={()=> {
+              goToHome()
+            }}>
+        <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Home" selected={isHome}>
+              <HomeIcon height={30} 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={30} 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={30} color={hasUnreadDirects ? "var(--unread)" : isDirects ? 'white' : "rgba(250, 250, 250, 0.5)"} />
+            </IconWrapper>
+            </ButtonBase>
+
+     </Box>
+    </Box>
+  );
+};

src/components/Group/Group.tsx

@@ -85,6 +85,8 @@ import { GroupMenu } from "./GroupMenu";
 import { getRootHeight } from "../../utils/mobile/mobileUtils";
 import { ReturnIcon } from "../../assets/Icons/ReturnIcon";
 import { ExitIcon } from "../../assets/Icons/ExitIcon";
+import { HomeDesktop } from "./HomeDesktop";
+import { DesktopFooter } from "../Desktop/DesktopFooter";
 
 // let touchStartY = 0;
 // let disablePullToRefresh = false;
@@ -418,7 +420,7 @@ export const Group = ({
   const [mutedGroups, setMutedGroups] = useState([]);
   const [mobileViewMode, setMobileViewMode] = useState("home");
   const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState("");
-
+  const [desktopSideView, setDesktopSideView] = useState('groups')
   const isFocusedRef = useRef(true);
   const selectedGroupRef = useRef(null);
   const selectedDirectRef = useRef(null);
@@ -1547,10 +1549,12 @@ export const Group = ({
       <div
         style={{
           display: "flex",
-          width: isMobile ? "100%" : "300px",
+          width: isMobile ? "100%" : "380px",
           flexDirection: "column",
           alignItems: "flex-start",
           height: isMobile ? `calc(${getRootHeight()} - 45px)` : "100%",
+          background: !isMobile && 'var(--bg-primary)',
+          borderRadius: !isMobile && '0px 15px 15px 0px'
         }}
       >
         {isMobile && (
@@ -1752,10 +1756,12 @@ export const Group = ({
       <div
         style={{
           display: "flex",
-          width: isMobile ? "100%" : "300px",
+          width: isMobile ? "100%" : "380px",
           flexDirection: "column",
           alignItems: "flex-start",
           height: isMobile ? "calc(100% - 45px)" : "100%",
+          background: !isMobile && 'var(--bg-primary)',
+          borderRadius: !isMobile && '0px 15px 15px 0px'
         }}
       >
         {/* <div
@@ -2147,21 +2153,24 @@ export const Group = ({
         info={infoSnack}
         setInfo={setInfoSnack}
       />
-      <Header
+      {isMobile && (
-        setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
+         <Header
-        isThin={
+         setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
-          mobileViewMode === "groups" ||
+         isThin={
-          mobileViewMode === "group" ||
+           mobileViewMode === "groups" ||
-          mobileViewModeKeepOpen === "messaging"
+           mobileViewMode === "group" ||
-        }
+           mobileViewModeKeepOpen === "messaging"
-        logoutFunc={logoutFunc}
+         }
-        goToHome={goToHome}
+         logoutFunc={logoutFunc}
-        setIsOpenDrawerProfile={setIsOpenDrawerProfile}
+         goToHome={goToHome}
-        hasUnreadGroups={groupChatHasUnread ||
+         setIsOpenDrawerProfile={setIsOpenDrawerProfile}
-          groupsAnnHasUnread}
+         hasUnreadGroups={groupChatHasUnread ||
-        hasUnreadDirects={directChatHasUnread}
+           groupsAnnHasUnread}
-        setMobileViewMode={setMobileViewMode}
+         hasUnreadDirects={directChatHasUnread}
-      />
+         setMobileViewMode={setMobileViewMode}
+       />
+      )}
+     
 
       <div
         style={{
@@ -2172,7 +2181,9 @@ export const Group = ({
           alignItems: "flex-start",
         }}
       >
-        {!isMobile && renderGroups()}
+        {!isMobile && desktopSideView === 'groups' && renderGroups()}
+        {!isMobile && desktopSideView === 'directs' && renderDirects()}
+
         <Box
           sx={{
             width: "100%",
@@ -2277,60 +2288,63 @@ export const Group = ({
           )}
           {selectedGroup && (
             <>
-              <Box
+            {isMobile && (
-                sx={{
+               <Box
-                  display: "flex",
+               sx={{
-                  alignItems: "center",
+                 display: "flex",
-                  width: "100%",
+                 alignItems: "center",
-                  marginTop: "14px",
+                 width: "100%",
-                  justifyContent: "center",
+                 marginTop: "14px",
-                  height: "15px",
+                 justifyContent: "center",
-                }}
+                 height: "15px",
-              >
+               }}
-                <Box
+             >
-                  sx={{
+               <Box
-                    display: "flex",
+                 sx={{
-                    alignItems: "center",
+                   display: "flex",
-                    justifyContent: "space-between",
+                   alignItems: "center",
-                    width: "320px",
+                   justifyContent: "space-between",
-                  }}
+                   width: "320px",
-                >
+                 }}
-                  <Box
+               >
-                    sx={{
+                 <Box
-                      display: "flex",
+                   sx={{
-                      alignItems: "center",
+                     display: "flex",
-                      width: "50px",
+                     alignItems: "center",
-                    }}
+                     width: "50px",
-                  >
+                   }}
-                    <ButtonBase
+                 >
-                      onClick={() => {
+                   <ButtonBase
-                        setMobileViewMode("groups");
+                     onClick={() => {
-                      }}
+                       setMobileViewMode("groups");
-                    >
+                     }}
-                      <ReturnIcon />
+                   >
-                    </ButtonBase>
+                     <ReturnIcon />
-                  </Box>
+                   </ButtonBase>
-                  <Typography
+                 </Box>
-                    sx={{
+                 <Typography
-                      fontSize: "14px",
+                   sx={{
-                      fontWeight: 600,
+                     fontSize: "14px",
-                    }}
+                     fontWeight: 600,
-                  >
+                   }}
-                    {selectedGroup?.groupName}
+                 >
-                  </Typography>
+                   {selectedGroup?.groupName}
-                  <Box
+                 </Typography>
-                    sx={{
+                 <Box
-                      display: "flex",
+                   sx={{
-                      alignItems: "center",
+                     display: "flex",
-                      width: "50px",
+                     alignItems: "center",
-                      justifyContent: "flex-end",
+                     width: "50px",
-                    }}
+                     justifyContent: "flex-end",
-                  >
+                   }}
-                    {/* <ExitIcon /> */}
+                 >
-                  </Box>
+                   {/* <ExitIcon /> */}
-                </Box>
+                 </Box>
-              </Box>
+               </Box>
-              {mobileViewMode === "group" && (
+             </Box>
+            )}
+             
+              {isMobile && mobileViewMode === "group" && (
                 <>
                   <GroupMenu
                     setGroupSection={setGroupSection}
@@ -2556,8 +2570,37 @@ export const Group = ({
               </Box>
             </>
           )}
-
+           {!isMobile && (
-          {mobileViewMode === "home" && (
+        <DesktopFooter 
+        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}
+        />
+      )}
+          {isMobile && mobileViewMode === "home" && (
             <Home
               refreshHomeDataFunc={refreshHomeDataFunc}
               myAddress={myAddress}
@@ -2573,11 +2616,11 @@ export const Group = ({
               setMobileViewMode={setMobileViewMode}
             />
           )}
-          {/* {
+          {
-          !selectedGroup &&
+          !isMobile && !selectedGroup &&
           groupSection === "home" && (
            
-<Home
+<HomeDesktop
   refreshHomeDataFunc={refreshHomeDataFunc}
   myAddress={myAddress}
   isLoadingGroups={isLoadingGroups}
@@ -2589,8 +2632,9 @@ export const Group = ({
   getTimestampEnterChat={getTimestampEnterChat}
   setOpenManageMembers={setOpenManageMembers}
   setOpenAddGroup={setOpenAddGroup}
+  setMobileViewMode={setMobileViewMode}
 />
-          )} */}
+          )}
         </Box>
         <AuthenticatedContainerInnerRight
           sx={{
@@ -2796,7 +2840,8 @@ export const Group = ({
           }}
         />
       </div>
-      {mobileViewMode === "home" && !mobileViewModeKeepOpen && (
+     
+      {isMobile && mobileViewMode === "home" && !mobileViewModeKeepOpen && (
         <>
           <div
             style={{

src/components/Group/GroupInvites.tsx

@@ -14,7 +14,7 @@ import { Box, Typography } from "@mui/material";
 import { Spacer } from "../../common/Spacer";
 import { getGroupNames } from "./UserListOfInvites";
 import { CustomLoader } from "../../common/CustomLoader";
-import { getBaseApiReact } from "../../App";
+import { getBaseApiReact, isMobile } from "../../App";
 
 export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
@@ -75,7 +75,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
       <Box
         sx={{
           width: "322px",
-          height: "165px",
+          height: isMobile ? "165px" : "250px",
+
           display: "flex",
           flexDirection: "column",
           bgcolor: "background.paper",

src/components/Group/GroupJoinRequests.tsx

@@ -15,7 +15,7 @@ import { Box, Typography } from "@mui/material";
 import { Spacer } from "../../common/Spacer";
 import { CustomLoader } from "../../common/CustomLoader";
 import { getBaseApi } from "../../background";
-import { getBaseApiReact } from "../../App";
+import { getBaseApiReact, isMobile } from "../../App";
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
 
 export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
@@ -124,7 +124,8 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
       <Box
         sx={{
           width: "322px",
-          height: '165px',
+          height: isMobile ? "165px" : "250px",
+
           display: "flex",
           flexDirection: "column",
           bgcolor: "background.paper",

src/components/Group/HomeDesktop.tsx

@@ -0,0 +1,150 @@
+import { Box, Button, Typography } from "@mui/material";
+import React from "react";
+import { Spacer } from "../../common/Spacer";
+import { ListOfThreadPostsWatched } from "./ListOfThreadPostsWatched";
+import { ThingsToDoInitial } from "./ThingsToDoInitial";
+import { GroupJoinRequests } from "./GroupJoinRequests";
+import { GroupInvites } from "./GroupInvites";
+import RefreshIcon from "@mui/icons-material/Refresh";
+
+export const HomeDesktop = ({
+  refreshHomeDataFunc,
+  myAddress,
+  isLoadingGroups,
+  balance,
+  userInfo,
+  groups,
+  setGroupSection,
+  setSelectedGroup,
+  getTimestampEnterChat,
+  setOpenManageMembers,
+  setOpenAddGroup,
+  setMobileViewMode,
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        width: "100%",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "auto",
+        alignItems: "center",
+
+      }}
+    >
+      <Spacer height="20px" />
+      <Box sx={{
+        display: "flex",
+        width: "100%",
+        flexDirection: "column",
+        height: "100%",
+        alignItems: "flex-start",
+        maxWidth: '1036px'
+      }}>
+         <Typography
+        sx={{
+          color: "rgba(255, 255, 255, 1)",
+          fontWeight: 400,
+          fontSize: userInfo?.name?.length > 15 ? "16px" : "20px",
+          padding: '10px'
+        }}
+      >
+        Welcome{" "}
+        {userInfo?.name ? (
+          <span
+            style={{
+              fontStyle: "italic",
+            }}
+          >{`, ${userInfo?.name}`}</span>
+        ) : null}
+      </Typography>
+      <Spacer height="70px" />
+      {!isLoadingGroups && (
+        <Box
+          sx={{
+            display: "flex",
+            gap: "15px",
+            flexWrap: "wrap",
+            justifyContent: "flex-start",
+          }}
+        >
+          <Box sx={{
+            width: '330px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+          <ThingsToDoInitial
+            balance={balance}
+            myAddress={myAddress}
+            name={userInfo?.name}
+            hasGroups={groups?.length !== 0}
+          />
+          </Box>
+          <Box sx={{
+            width: '330px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+          <ListOfThreadPostsWatched />
+          </Box>
+          <Box sx={{
+            width: '330px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+          <GroupJoinRequests
+            setGroupSection={setGroupSection}
+            setSelectedGroup={setSelectedGroup}
+            getTimestampEnterChat={getTimestampEnterChat}
+            setOpenManageMembers={setOpenManageMembers}
+            myAddress={myAddress}
+            groups={groups}
+            setMobileViewMode={setMobileViewMode}
+          />
+          </Box>
+          <Box sx={{
+            width: '330px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+          <GroupInvites
+            setOpenAddGroup={setOpenAddGroup}
+            myAddress={myAddress}
+            groups={groups}
+            setMobileViewMode={setMobileViewMode}
+          />
+          </Box>
+        </Box>
+      )}
+      </Box>
+     
+      <Spacer height="26px" />
+
+      {/* <Box
+                sx={{
+                  display: "flex",
+                  width: "100%",
+                  justifyContent: "flex-start",
+                }}
+              >
+                <Button
+                  variant="outlined"
+                  startIcon={<RefreshIcon />}
+                  onClick={refreshHomeDataFunc}
+                  sx={{
+                    color: "white",
+                  }}
+                >
+                  Refresh home data
+                </Button>
+              </Box> */}
+      
+      <Spacer height="180px" />
+    </Box>
+  );
+};

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -15,6 +15,7 @@ import { Spacer } from "../../common/Spacer";
 import { getGroupNames } from "./UserListOfInvites";
 import { CustomLoader } from "../../common/CustomLoader";
 import VisibilityIcon from "@mui/icons-material/Visibility";
+import { isMobile } from "../../App";
 
 export const ListOfThreadPostsWatched = () => {
   const [posts, setPosts] = React.useState([]);
@@ -92,7 +93,7 @@ export const ListOfThreadPostsWatched = () => {
       <Box
         sx={{
           width: "322px",
-          height: '165px',
+          height: isMobile ? "165px" : "250px",
           display: "flex",
           flexDirection: "column",
           bgcolor: "background.paper",

src/components/Group/ThingsToDoInitial.tsx

@@ -10,6 +10,7 @@ import CommentIcon from "@mui/icons-material/Comment";
 import InfoIcon from "@mui/icons-material/Info";
 import { Box, Typography } from "@mui/material";
 import { Spacer } from "../../common/Spacer";
+import { isMobile } from "../../App";
 
 export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
   const [checked1, setChecked1] = React.useState(false);
@@ -77,7 +78,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
       <Box
         sx={{
           width: "322px",
-          height: "165px",
+          height: isMobile ? "165px" : "250px",
           display: "flex",
           flexDirection: "column",
           bgcolor: "background.paper",