Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-15 12:31:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added sidebar

Browse Source
This commit is contained in:
PhilReact 2024-11-11 04:51:31 +02:00
parent 978dd7d995
commit 79543644a0
13 changed files with 716 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.tsx
View File

@ -1215,9 +1215,10 @@ function App() {
return (
<AuthenticatedContainer
sx={{
width: isMobile ? "100vw" : "350px",
width: isMobile ? "100vw" : "auto",
display: "flex",
backgroundColor: "var(--bg-2)",
justifyContent: 'flex-end'
}}
>
{isMobile && (
@ -1239,10 +1240,11 @@ function App() {
/>
</Box>
)}
{desktopViewMode !== "apps" && desktopViewMode !== "dev" && desktopViewMode !== "chat" && (
<AuthenticatedContainerInnerLeft
sx={{
overflowY: isMobile && "auto",
padding: '0px 20px'
}}
>
<Spacer height="48px" />
@ -1395,6 +1397,9 @@ function App() {
Get QORT at qort.trade
</TextP>
</AuthenticatedContainerInnerLeft>
)}
<AuthenticatedContainerInnerRight>
<Spacer height="20px" />
<img
@ -1473,10 +1478,10 @@ function App() {
<AppContainer
sx={{
height: isMobile ? "100%" : "100vh",
backgroundImage: desktopViewMode === "apps" && 'url("appsBg.svg")',
backgroundSize: desktopViewMode === "apps" && "cover",
backgroundPosition: desktopViewMode === "apps" && "center",
backgroundRepeat: desktopViewMode === "apps" && "no-repeat",
// backgroundImage: desktopViewMode === "apps" && 'url("appsBg.svg")',
// backgroundSize: desktopViewMode === "apps" && "cover",
// backgroundPosition: desktopViewMode === "apps" && "center",
// backgroundRepeat: desktopViewMode === "apps" && "no-repeat",
}}
>
{extState === "not-authenticated" && (
@ -1534,7 +1539,7 @@ function App() {
desktopViewMode={desktopViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
{!isMobile && desktopViewMode !== "apps" && desktopViewMode !== "dev" && renderProfile()}
{!isMobile && renderProfile()}
</Box>
<Box

50
src/assets/Icons/AppsIcon.tsx Normal file
View File

@ -0,0 +1,50 @@
import React from "react";
export const AppsIcon = ({ color, height = 31, width = 31 }) => {
return (
<svg
width={width}
height={height}
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.76596 7.53192C5.84584 7.53192 7.53192 5.84584 7.53192 3.76596C7.53192 1.68608 5.84584 0 3.76596 0C1.68608 0 0 1.68608 0 3.76596C0 5.84584 1.68608 7.53192 3.76596 7.53192Z"
fill={color}
/>
<path
d="M15 7.53192C17.0799 7.53192 18.766 5.84584 18.766 3.76596C18.766 1.68608 17.0799 0 15 0C12.9201 0 11.2341 1.68608 11.2341 3.76596C11.2341 5.84584 12.9201 7.53192 15 7.53192Z"
fill={color}
/>
<path
d="M26.234 7.53192C28.3139 7.53192 30 5.84584 30 3.76596C30 1.68608 28.3139 0 26.234 0C24.1542 0 22.4681 1.68608 22.4681 3.76596C22.4681 5.84584 24.1542 7.53192 26.234 7.53192Z"
fill={color}
/>
<path
d="M3.76596 30.0001C5.84584 30.0001 7.53192 28.314 7.53192 26.2341C7.53192 24.1542 5.84584 22.4681 3.76596 22.4681C1.68608 22.4681 0 24.1542 0 26.2341C0 28.314 1.68608 30.0001 3.76596 30.0001Z"
fill={color}
/>
<path
d="M15 30.0002C17.0799 30.0002 18.766 28.3141 18.766 26.2342C18.766 24.1543 17.0799 22.4683 15 22.4683C12.9201 22.4683 11.2341 24.1543 11.2341 26.2342C11.2341 28.3141 12.9201 30.0002 15 30.0002Z"
fill={color}
/>
<path
d="M26.234 30.0002C28.3139 30.0002 30 28.3141 30 26.2342C30 24.1543 28.3139 22.4683 26.234 22.4683C24.1542 22.4683 22.4681 24.1543 22.4681 26.2342C22.4681 28.3141 24.1542 30.0002 26.234 30.0002Z"
fill={color}
/>
<path
d="M3.76596 18.766C5.84584 18.766 7.53192 17.08 7.53192 15.0001C7.53192 12.9202 5.84584 11.2341 3.76596 11.2341C1.68608 11.2341 0 12.9202 0 15.0001C0 17.08 1.68608 18.766 3.76596 18.766Z"
fill={color}
/>
<path
d="M15 18.766C17.0799 18.766 18.766 17.08 18.766 15.0001C18.766 12.9202 17.0799 11.2341 15 11.2341C12.9201 11.2341 11.2341 12.9202 11.2341 15.0001C11.2341 17.08 12.9201 18.766 15 18.766Z"
fill={color}
/>
<path
d="M26.234 18.766C28.3139 18.766 30 17.08 30 15.0001C30 12.9202 28.3139 11.2341 26.234 11.2341C24.1542 11.2341 22.4681 12.9202 22.4681 15.0001C22.4681 17.08 24.1542 18.766 26.234 18.766Z"
fill={color}
/>
</svg>
);
};

64
src/components/AddressQRCode.tsx
View File

@ -1,19 +1,52 @@
import React from 'react';
import QRCode from 'react-qr-code';
import { TextP } from '../App-styles';
import { Box } from '@mui/material';
import React, { useState } from "react";
import QRCode from "react-qr-code";
import { TextP } from "../App-styles";
import { Box, Typography } from "@mui/material";
export const AddressQRCode = ({ targetAddress }) => {
const [open, setOpen] = useState(false);
return (
<Box sx={{
display: 'flex',
gap: '10px',
width: '100%',
alignItems: 'center',
flexDirection: 'column',
marginTop: '20px'
}}>
<Box
sx={{
display: "flex",
gap: "10px",
alignItems: "center",
flexDirection: "column",
marginTop: '10px'
}}
>
<Typography
sx={{
cursor: "pointer",
fontSize: "14px",
}}
onClick={() => {
setOpen((prev)=> !prev);
}}
>
{open ? 'Hide QR code' :'See QR code'}
</Typography>
{open && (
<Box
sx={{
display: "flex",
gap: "10px",
alignItems: "center",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
display: "flex",
gap: "10px",
width: "100%",
alignItems: "center",
flexDirection: "column",
marginTop: "20px",
}}
>
<TextP
sx={{
textAlign: "center",
@ -26,11 +59,14 @@ export const AddressQRCode = ({ targetAddress }) => {
</TextP>
<QRCode
value={targetAddress} // Your address here
size={180} // Adjust size as needed
size={150} // Adjust size as needed
level="M" // Error correction level (L, M, Q, H)
bgColor="#FFFFFF" // Background color (white)
fgColor="#000000" // Foreground color (black)
/>
</Box>
</Box>
)}
</Box>
);
};

64
src/components/Apps/AppsDesktop.tsx
View File

@ -21,10 +21,15 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
import { Save } from "../Save/Save";
import { HubsIcon } from "../../assets/Icons/HubsIcon";
import { CoreSyncStatus } from "../CoreSyncStatus";
import { IconWrapper } from "../Desktop/DesktopFooter";
import AppIcon from "../../assets/svgs/AppIcon.svg";
import { useRecoilState } from "recoil";
import { enabledDevModeAtom } from "../../atoms/global";
import { AppsIcon } from "../../assets/Icons/AppsIcon";
const uid = new ShortUniqueId({ length: 8 });
export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => {
const [availableQapps, setAvailableQapps] = useState([]);
const [selectedAppInfo, setSelectedAppInfo] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null)
@ -33,6 +38,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
const [isNewTabWindow, setIsNewTabWindow] = useState(false);
const [categories, setCategories] = useState([])
const iframeRefs = useRef({});
const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom)
const myApp = useMemo(()=> {
return availableQapps.find((app)=> app.name === myName && app.service === 'APP')
@ -317,11 +323,46 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
<HomeIcon
height={34}
color="rgba(250, 250, 250, 0.5)"
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
/>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode('apps')
}}
>
<IconWrapper
color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Apps"
disableWidth
>
<AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode('chat')
}}
>
<IconWrapper
color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Chat"
disableWidth
>
<MessagingIcon
height={30}
color={
(hasUnreadDirects || hasUnreadGroups)
? "var(--unread)"
: desktopViewMode === 'chat'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
{/* <ButtonBase
onClick={() => {
setDesktopSideView("directs");
toggleSideViewDirects()
@ -357,10 +398,23 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
}
/>
</ButtonBase>
</ButtonBase> */}
<Save isDesktop disableWidth />
<CoreSyncStatus imageSize="30px" position="left" />
{isEnabledDevMode && (
<ButtonBase
onClick={() => {
setDesktopViewMode('dev')
}}
>
<IconWrapper
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
label="Dev"
disableWidth
>
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
</IconWrapper>
</ButtonBase>
)}
{mode !== 'home' && (
<AppsNavBarDesktop />

64
src/components/Apps/AppsDevMode.tsx
View File

@ -22,10 +22,12 @@ import { Save } from "../Save/Save";
import { HubsIcon } from "../../assets/Icons/HubsIcon";
import { AppsDevModeNavBar } from "./AppsDevModeNavBar";
import { CoreSyncStatus } from "../CoreSyncStatus";
import { AppsIcon } from "../../assets/Icons/AppsIcon";
import { IconWrapper } from "../Desktop/DesktopFooter";
const uid = new ShortUniqueId({ length: 8 });
export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, desktopViewMode, isApps}) => {
const [availableQapps, setAvailableQapps] = useState([]);
const [selectedAppInfo, setSelectedAppInfo] = useState(null);
const [selectedCategory, setSelectedCategory] = useState(null)
@ -208,49 +210,59 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
<HomeIcon
height={34}
color="rgba(250, 250, 250, 0.5)"
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
/>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopSideView("directs");
toggleSideViewDirects()
setDesktopViewMode('apps')
}}
>
<IconWrapper
color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Apps"
disableWidth
>
<AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode('chat')
}}
>
<IconWrapper
color={desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Chat"
disableWidth
>
<MessagingIcon
height={30}
color={
hasUnreadDirects
? "var(--unread)"
: isDirects
: desktopViewMode === 'chat'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopSideView("groups");
toggleSideViewGroups()
}}
>
<HubsIcon
height={30}
color={
hasUnreadGroups
? "var(--unread)"
: isGroups
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
<Save isDesktop disableWidth />
<CoreSyncStatus imageSize="30px" position="left" />
<ButtonBase
onClick={() => {
setDesktopViewMode('dev')
}}
>
<IconWrapper
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
label="Dev"
disableWidth
>
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
</IconWrapper>
</ButtonBase>
{mode !== 'home' && (
<AppsDevModeNavBar />

6
src/components/Desktop/DesktopFooter.tsx
View File

@ -20,7 +20,7 @@ import { Save } from "../Save/Save";
import { useRecoilState } from "recoil";
import { enabledDevModeAtom } from "../../atoms/global";
export const IconWrapper = ({ children, label, color, selected, disableWidth }) => {
export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => {
return (
<Box
sx={{
@ -29,8 +29,8 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth })
alignItems: "center",
gap: "5px",
flexDirection: "column",
height: disableWidth ? 'auto' : "89px",
width: disableWidth ? 'auto' : "89px",
height: customWidth ? customWidth : disableWidth ? 'auto' : "89px",
width: customWidth? customWidth : disableWidth ? 'auto' : "89px",
borderRadius: "50%",
backgroundColor: selected ? "rgba(28, 29, 32, 1)" : "transparent",
}}

18
src/components/Desktop/DesktopHeader.tsx
View File

@ -19,7 +19,7 @@ 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 }) => {
const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => {
return (
<Box
sx={{
@ -28,8 +28,8 @@ const IconWrapper = ({ children, label, color, selected, selectColor }) => {
alignItems: "center",
gap: "5px",
flexDirection: "column",
height: "65px",
width: "65px",
height: customHeight ? customHeight : "65px",
width: customHeight ? customHeight : "65px",
borderRadius: "50%",
backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent",
}}
@ -111,7 +111,7 @@ export const DesktopHeader = ({
alignItems: "center",
}}
>
<ButtonBase
{/* <ButtonBase
onClick={() => {
goToHome();
}}
@ -170,15 +170,15 @@ export const DesktopHeader = ({
}
/>
</IconWrapper>
</ButtonBase>
<Box
</ButtonBase> */}
{/* <Box
sx={{
width: "1px",
height: "50px",
background: "white",
borderRadius: "50px",
}}
/>
/> */}
<ButtonBase
onClick={() => {
goToAnnouncements()
@ -189,6 +189,7 @@ export const DesktopHeader = ({
label="ANN"
selected={isAnnouncement}
selectColor="#09b6e8"
customHeight="55px"
>
<NotificationIcon2
height={25}
@ -214,6 +215,7 @@ export const DesktopHeader = ({
label="Chat"
selected={isChat}
selectColor="#09b6e8"
customHeight="55px"
>
<ChatIcon
height={25}
@ -240,6 +242,7 @@ export const DesktopHeader = ({
label="Threads"
selected={isForum}
selectColor="#09b6e8"
customHeight="55px"
>
<ThreadsIcon
height={25}
@ -262,6 +265,7 @@ export const DesktopHeader = ({
color="rgba(250, 250, 250, 0.5)"
label="Members"
selected={false}
customHeight="55px"
>
<MembersIcon
height={25}

120
src/components/DesktopSideBar.tsx Normal file
View File

@ -0,0 +1,120 @@
import { Box, ButtonBase } from '@mui/material';
import React from 'react'
import { HomeIcon } from "../assets/Icons/HomeIcon";
import { MessagingIcon } from "../assets/Icons/MessagingIcon";
import { Save } from "./Save/Save";
import { HubsIcon } from "../assets/Icons/HubsIcon";
import { CoreSyncStatus } from "./CoreSyncStatus";
import { IconWrapper } from './Desktop/DesktopFooter';
import AppIcon from "./../assets/svgs/AppIcon.svg";
import { useRecoilState } from 'recoil';
import { enabledDevModeAtom } from '../atoms/global';
import { AppsIcon } from '../assets/Icons/AppsIcon';
export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode }) => {
const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom)
return (
<Box sx={{
width: '60px',
flexDirection: 'column',
height: '100vh',
alignItems: 'center',
display: 'flex',
gap: '25px'
}}>
<ButtonBase
sx={{
width: '60px',
height: '60px',
paddingTop: '23px'
}}
onClick={() => {
goToHome();
}}
>
<HomeIcon
height={34}
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
/>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode('apps')
// setIsOpenSideViewDirects(false)
// setIsOpenSideViewGroups(false)
}}
>
<IconWrapper
color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"}
label="Apps"
selected={isApps}
disableWidth
>
<AppsIcon color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopViewMode('chat')
}}
>
<IconWrapper
color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Chat"
disableWidth
>
<MessagingIcon
height={30}
color={
(hasUnreadDirects || hasUnreadGroups)
? "var(--unread)"
: desktopViewMode === 'chat'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
{/* <ButtonBase
onClick={() => {
setDesktopSideView("groups");
toggleSideViewGroups()
}}
>
<HubsIcon
height={30}
color={
hasUnreadGroups
? "var(--unread)"
: isGroups
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</ButtonBase> */}
<Save isDesktop disableWidth />
{/* <CoreSyncStatus imageSize="30px" position="left" /> */}
{isEnabledDevMode && (
<ButtonBase
onClick={() => {
setDesktopViewMode('dev')
}}
>
<IconWrapper
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
label="Dev"
disableWidth
>
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
</IconWrapper>
</ButtonBase>
)}
</Box>
)
}

251
src/components/Group/Group.tsx
View File

@ -86,12 +86,15 @@ 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";
import { DesktopFooter, IconWrapper } from "../Desktop/DesktopFooter";
import { DesktopHeader } from "../Desktop/DesktopHeader";
import { Apps } from "../Apps/Apps";
import { AppsNavBar } from "../Apps/AppsNavBar";
import { AppsDesktop } from "../Apps/AppsDesktop";
import { AppsDevMode } from "../Apps/AppsDevMode";
import { DesktopSideBar } from "../DesktopSideBar";
import { HubsIcon } from "../../assets/Icons/HubsIcon";
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
// let touchStartY = 0;
// let disablePullToRefresh = false;
@ -1282,6 +1285,9 @@ export const Group = ({
setupGroupWebsocketInterval.current = null;
settimeoutForRefetchSecretKey.current = null;
initiatedGetMembers.current = false;
if(!isMobile){
setDesktopViewMode('home')
}
};
const logoutEventFunc = () => {
@ -1368,6 +1374,9 @@ export const Group = ({
setTriedToFetchSecretKey(false);
setFirstSecretKeyInCreation(false);
setGroupSection("chat");
if(!isMobile){
setDesktopViewMode('chat')
}
window.sendMessage("addTimestampEnterChat", {
timestamp: Date.now(),
@ -1381,10 +1390,9 @@ export const Group = ({
setSelectedGroup(findGroup);
setMobileViewMode("group");
setDesktopSideView('groups')
setDesktopViewMode('home')
getTimestampEnterChat();
isLoadingOpenSectionFromNotification.current = false;
}, 200);
}, 350);
} else {
isLoadingOpenSectionFromNotification.current = false;
}
@ -1419,6 +1427,9 @@ export const Group = ({
setTriedToFetchSecretKey(false);
setFirstSecretKeyInCreation(false);
setGroupSection("announcement");
if(!isMobile){
setDesktopViewMode('chat')
}
window.sendMessage("addGroupNotificationTimestamp", {
timestamp: Date.now(),
groupId: findGroup.groupId,
@ -1430,9 +1441,8 @@ export const Group = ({
setSelectedGroup(findGroup);
setMobileViewMode("group");
setDesktopSideView('groups')
setDesktopViewMode('home')
getGroupAnnouncements();
}, 200);
}, 350);
}
};
@ -1481,14 +1491,15 @@ export const Group = ({
setFirstSecretKeyInCreation(false);
setGroupSection("forum");
setDefaultThread(data);
if(!isMobile){
setDesktopViewMode('chat')
}
setTimeout(() => {
setSelectedGroup(findGroup);
setMobileViewMode("group");
setDesktopSideView('groups')
setDesktopViewMode('home')
getGroupAnnouncements();
}, 200);
}, 350);
}
};
@ -1512,31 +1523,31 @@ export const Group = ({
}
setDesktopViewMode('home')
setGroupSection("default");
clearAllQueues();
// setGroupSection("default");
// clearAllQueues();
await new Promise((res) => {
setTimeout(() => {
res(null);
}, 200);
});
setGroupSection("home");
setSelectedGroup(null);
setNewChat(false);
setSelectedDirect(null);
setSecretKey(null);
setGroupOwner(null)
lastFetchedSecretKey.current = null;
initiatedGetMembers.current = false;
setSecretKeyPublishDate(null);
setAdmins([]);
setSecretKeyDetails(null);
setAdminsWithNames([]);
setMembers([]);
setMemberCountFromSecretKeyData(null);
setTriedToFetchSecretKey(false);
setFirstSecretKeyInCreation(false);
setIsOpenSideViewDirects(false)
setIsOpenSideViewGroups(false)
// setGroupSection("home");
// setSelectedGroup(null);
// setNewChat(false);
// setSelectedDirect(null);
// setSecretKey(null);
// setGroupOwner(null)
// lastFetchedSecretKey.current = null;
// initiatedGetMembers.current = false;
// setSecretKeyPublishDate(null);
// setAdmins([]);
// setSecretKeyDetails(null);
// setAdminsWithNames([]);
// setMembers([]);
// setMemberCountFromSecretKeyData(null);
// setTriedToFetchSecretKey(false);
// setFirstSecretKeyInCreation(false);
// setIsOpenSideViewDirects(false)
// setIsOpenSideViewGroups(false)
};
const goToAnnouncements = async () => {
@ -1612,6 +1623,67 @@ export const Group = ({
borderRadius: !isMobile && '0px 15px 15px 0px'
}}
>
{!isMobile && (
<Box sx={{
width: '100%',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
gap: '10px'
}}>
<ButtonBase
onClick={() => {
setDesktopSideView("groups");
}}
>
<IconWrapper
color={(groupChatHasUnread ||
groupsAnnHasUnread)
? "var(--unread)"
: desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Groups"
selected={desktopSideView === 'groups'}
customWidth="75px"
>
<HubsIcon
height={24}
color={
(groupChatHasUnread ||
groupsAnnHasUnread)
? "var(--unread)"
: desktopSideView === 'groups'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopSideView("directs");
}}
>
<IconWrapper
customWidth="75px"
color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Messaging"
selected={desktopSideView === 'directs'}
>
<MessagingIcon
height={24}
color={
directChatHasUnread
? "var(--unread)"
: desktopSideView === 'directs'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
</Box>
)}
{isMobile && (
<Box
sx={{
@ -1819,6 +1891,66 @@ export const Group = ({
borderRadius: !isMobile && '0px 15px 15px 0px'
}}
>
{!isMobile && (
<Box sx={{
width: '100%',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
gap: '10px'
}}>
<ButtonBase
onClick={() => {
setDesktopSideView("groups");
}}
>
<IconWrapper
color={(groupChatHasUnread ||
groupsAnnHasUnread)
? "var(--unread)"
: desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Groups"
selected={desktopSideView === 'groups'}
customWidth="75px"
>
<HubsIcon
height={24}
color={
(groupChatHasUnread ||
groupsAnnHasUnread)
? "var(--unread)"
: desktopSideView === 'groups'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setDesktopSideView("directs");
}}
>
<IconWrapper
customWidth="75px"
color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
label="Messaging"
selected={desktopSideView === 'directs' }
>
<MessagingIcon
height={24}
color={
directChatHasUnread
? "var(--unread)"
: desktopSideView === 'directs'
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/>
</IconWrapper>
</ButtonBase>
</Box>
)}
<div
style={{
@ -1850,7 +1982,6 @@ export const Group = ({
onClick={() => {
setMobileViewMode("group");
setDesktopSideView('groups')
setDesktopViewMode('home')
initiatedGetMembers.current = false;
clearAllQueues();
setSelectedDirect(null);
@ -2067,8 +2198,14 @@ export const Group = ({
alignItems: "flex-start",
}}
>
{!isMobile && ((desktopSideView === 'groups' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && renderGroups()}
{!isMobile && ((desktopSideView === 'directs' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewDirects) && renderDirects()}
{!isMobile && ((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && (
<DesktopSideBar desktopViewMode={desktopViewMode} toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} isApps={desktopViewMode === 'apps'} myName={userInfo?.name} isGroups={isOpenSideViewGroups}
isDirects={isOpenSideViewDirects} hasUnreadGroups={groupChatHasUnread ||
groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} />
)}
{!isMobile && desktopViewMode === 'chat' && desktopSideView !== 'directs' && renderGroups()}
{!isMobile && desktopViewMode === 'chat' && desktopSideView === 'directs' && renderDirects()}
<Box
sx={{
@ -2174,9 +2311,37 @@ export const Group = ({
</Box>
</>
)}
{selectedGroup && mobileViewMode !== 'groups' && (
<>
{!isMobile && selectedGroup && (
{desktopViewMode === 'chat' && !selectedGroup && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: 'center',
height: '100%',
}}
>
<Typography
sx={{
fontSize: "14px",
fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)'
}}
>
No group selected
</Typography>
</Box>
)}
{mobileViewMode !== 'groups' && (
<div style={{
width: '100%',
display: selectedGroup? 'block' : 'none',
opacity: !(desktopViewMode === 'chat' && selectedGroup) ? 0 : 1,
position: !(desktopViewMode === 'chat' && selectedGroup) ? 'absolute' : 'relative',
left: !(desktopViewMode === 'chat' && selectedGroup) ? '-100000px' : '0px',
}}>
{!isMobile && (
<DesktopHeader
selectedGroup={selectedGroup}
@ -2457,7 +2622,7 @@ export const Group = ({
isOwner={groupOwner?.owner === myAddress}
/>
)}
</>
</div>
)}
{selectedDirect && !newChat && (
@ -2501,7 +2666,7 @@ export const Group = ({
</Box>
</>
)}
{!isMobile && groupSection === "home" && (
{/* {!isMobile && groupSection === "home" && (
<DesktopFooter
selectedGroup={selectedGroup}
groupSection={groupSection}
@ -2536,7 +2701,7 @@ export const Group = ({
setIsOpenSideViewDirects={setIsOpenSideViewDirects}
setIsOpenSideViewGroups={setIsOpenSideViewGroups}
/>
)}
)} */}
{isMobile && mobileViewMode === "home" && (
<Home
refreshHomeDataFunc={refreshHomeDataFunc}
@ -2551,6 +2716,7 @@ export const Group = ({
setOpenManageMembers={setOpenManageMembers}
setOpenAddGroup={setOpenAddGroup}
setMobileViewMode={setMobileViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
)}
{isMobile && (
@ -2559,17 +2725,16 @@ export const Group = ({
{!isMobile && (
<AppsDesktop toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "apps"} myName={userInfo?.name} isGroups={isOpenSideViewGroups}
isDirects={isOpenSideViewDirects} hasUnreadGroups={groupChatHasUnread ||
groupsAnnHasUnread} />
groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} isApps={desktopViewMode === 'apps'} desktopViewMode={desktopViewMode} />
)}
{!isMobile && (
<AppsDevMode toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsModeDev} setMode={setAppsModeDev} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "dev"} myName={userInfo?.name} isGroups={isOpenSideViewGroups}
isDirects={isOpenSideViewDirects} hasUnreadGroups={groupChatHasUnread ||
groupsAnnHasUnread} />
groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} desktopViewMode={desktopViewMode} isApps={desktopViewMode === 'apps'} />
)}
{!isMobile && !selectedGroup &&
groupSection === "home" && desktopViewMode !== "apps" && desktopViewMode !== "dev" && (
{!isMobile && desktopViewMode === 'home' && (
<HomeDesktop
refreshHomeDataFunc={refreshHomeDataFunc}
myAddress={myAddress}
@ -2583,18 +2748,20 @@ export const Group = ({
setOpenManageMembers={setOpenManageMembers}
setOpenAddGroup={setOpenAddGroup}
setMobileViewMode={setMobileViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
)}
</Box>
<AuthenticatedContainerInnerRight
sx={{
marginLeft: "auto",
width: "31px",
// minWidth: "135px",
padding: "5px",
display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev') ? "none" : "flex",
display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev' || desktopViewMode === 'chat') ? "none" : "flex",
}}
>

5
src/components/Group/GroupJoinRequests.tsx
View File

@ -18,7 +18,7 @@ import { getBaseApi } from "../../background";
import { MyContext, getBaseApiReact, isMobile } from "../../App";
export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode, setDesktopViewMode }) => {
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
const [loading, setLoading] = React.useState(true)
const {txList, setTxList} = React.useContext(MyContext)
@ -179,6 +179,9 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
getTimestampEnterChat()
setGroupSection("announcement")
setOpenManageMembers(true)
if(!isMobile){
setDesktopViewMode('chat')
}
setTimeout(() => {
executeEvent("openGroupJoinRequest", {});

2
src/components/Group/Home.tsx
View File

@ -20,6 +20,7 @@ export const Home = ({
setOpenManageMembers,
setOpenAddGroup,
setMobileViewMode,
setDesktopViewMode
}) => {
return (
<Box
@ -95,6 +96,7 @@ export const Home = ({
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
<GroupInvites
setOpenAddGroup={setOpenAddGroup}

4
src/components/Group/HomeDesktop.tsx
View File

@ -20,6 +20,7 @@ export const HomeDesktop = ({
setOpenManageMembers,
setOpenAddGroup,
setMobileViewMode,
setDesktopViewMode
}) => {
return (
<Box
@ -66,7 +67,7 @@ export const HomeDesktop = ({
display: "flex",
gap: "15px",
flexWrap: "wrap",
justifyContent: "flex-start",
justifyContent: "center",
}}
>
<Box sx={{
@ -104,6 +105,7 @@ export const HomeDesktop = ({
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
</Box>
<Box sx={{

2
src/index.css
View File

@ -73,7 +73,7 @@ body {
}
::-webkit-scrollbar {
width: 16px;
width: 14px;
height: 10px;
}