Qortal/chrome-extension
3
0
Fork 0
mirror of https://github.com/Qortal/chrome-extension.git synced 2025-02-14 11:15:49 +00:00
Code Issues Projects Releases Wiki Activity

mobile update

Browse Source
This commit is contained in:
PhilReact 2024-09-14 06:33:41 +03:00
parent eebcd8c36f
commit 93fba38de3
17 changed files with 524 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/App.tsx
View File

@ -351,25 +351,25 @@ function App() {
}
};
const checkIfUserHasLocalNode = useCallback(async () => {
try {
const url = `http://127.0.0.1:12391/admin/status`;
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
if (data?.isSynchronizing === false && data?.syncPercent === 100) {
setHasLocalNode(true);
}
} catch (error) {}
}, []);
// const checkIfUserHasLocalNode = useCallback(async () => {
// try {
// const url = `http://127.0.0.1:12391/admin/status`;
// const response = await fetch(url, {
// method: "GET",
// headers: {
// "Content-Type": "application/json",
// },
// });
// const data = await response.json();
// if (data?.isSynchronizing === false && data?.syncPercent === 100) {
// setHasLocalNode(true);
// }
// } catch (error) {}
// }, []);
useEffect(() => {
checkIfUserHasLocalNode();
}, [extState]);
// useEffect(() => {
// checkIfUserHasLocalNode();
// }, [extState]);
const address = useMemo(() => {
if (!rawWallet?.address0) return "";
@ -1418,7 +1418,7 @@ function App() {
}}
/>
</Box>
{hasLocalNode && (
{!isMobile && (
<>
<Spacer height="15px" />
<Box
@ -1568,17 +1568,20 @@ function App() {
{!isMobile && renderProfile()}
</Box>
<Box
sx={{
position: "fixed",
right: "25px",
bottom: "25px",
width: "350px",
zIndex: 100000,
}}
>
<TaskManger getUserInfo={getUserInfo} />
</Box>
{!isMobile && (
<Box
sx={{
position: "fixed",
right: "25px",
bottom: "25px",
width: "350px",
zIndex: 100000,
}}
>
<TaskManger getUserInfo={getUserInfo} />
</Box>
)}
</MyContext.Provider>
)}
{extState === "send-qort" && isMainWindow && (

57
src/components/Chat/AnnouncementDiscussion.tsx
View File

@ -26,6 +26,8 @@ export const AnnouncementDiscussion = ({
}) => {
const [isSending, setIsSending] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isFocusedParent, setIsFocusedParent] = useState(false);
const [comments, setComments] = useState([])
const [tempPublishedList, setTempPublishedList] = useState([])
const firstMountRef = useRef(false)
@ -38,6 +40,12 @@ export const AnnouncementDiscussion = ({
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
}, 200);
}
}
};
@ -78,6 +86,7 @@ export const AnnouncementDiscussion = ({
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@ -281,14 +290,18 @@ export const AnnouncementDiscussion = ({
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: "150px",
maxHeight: "400px",
minHeight: isMobile ? "0px" : "150px",
maxHeight: isMobile ? "auto" : "400px",
display: "flex",
flexDirection: "column",
overflow: "hidden",
width: "100%",
boxSizing: "border-box",
padding: "20px",
padding: isMobile ? "10px": "20px",
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset',
flexShrink:0,
}}
>
@ -297,6 +310,7 @@ export const AnnouncementDiscussion = ({
display: "flex",
flexDirection: "column",
// height: '100%',
flexGrow: isMobile && 1,
overflow: "auto",
}}
>
@ -304,8 +318,19 @@ export const AnnouncementDiscussion = ({
setEditorRef={setEditorRef}
onEnter={publishComment}
disableEnter
maxHeightOffset="60px"
isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
/>
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={() => {
if (isSending) return;
@ -317,6 +342,8 @@ export const AnnouncementDiscussion = ({
cursor: isSending ? "default" : "pointer",
background: isSending && "rgba(0, 0, 0, 0.8)",
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px'
}}
>
{isSending && (
@ -334,6 +361,30 @@ export const AnnouncementDiscussion = ({
)}
{` Publish Comment`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
<LoadingSnackbar

64
src/components/Chat/ChatDirect.tsx
View File

@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import Tiptap from './TipTap'
import { CustomButton } from '../../App-styles'
import CircularProgress from '@mui/material/CircularProgress';
import { Input } from '@mui/material';
import { Box, Input } from '@mui/material';
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
import { getNameInfo } from '../Group/Group';
import { Spacer } from '../../common/Spacer';
@ -15,6 +15,7 @@ import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from
import { getPublicKey } from '../../background';
import { useMessageQueue } from '../../MessageQueueContext';
import { executeEvent } from '../../utils/events';
import zIndex from '@mui/material/styles/zIndex';
@ -22,6 +23,7 @@ import { executeEvent } from '../../utils/events';
export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance}) => {
const { queueChats, addToQueue, } = useMessageQueue();
const [isFocusedParent, setIsFocusedParent] = useState(false);
const [messages, setMessages] = useState([])
const [isSending, setIsSending] = useState(false)
@ -252,6 +254,13 @@ const sendChatDirect = async ({ chatReference = undefined, messageText}: any, ad
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
executeEvent("sent-new-message-group", {})
}, 200);
}
}
};
@ -293,7 +302,6 @@ const clearEditorContent = () => {
executeEvent("sent-new-message-group", {})
}, 150);
clearEditorContent()
clearEditorContent()
}
// send chat message
} catch (error) {
@ -310,7 +318,7 @@ const clearEditorContent = () => {
}
}
console.log('isFocusedParent', isFocusedParent)
return (
<div style={{
@ -336,25 +344,37 @@ const clearEditorContent = () => {
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: '150px',
maxHeight: '400px',
minHeight: isMobile ? '0px' : '150px',
maxHeight: isMobile ? 'auto' : '400px',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
width: '100%',
boxSizing: 'border-box',
padding: '20px'
padding: isMobile ? '10px' : '20px',
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset'
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
// height: '100%',
overflow: 'auto'
flexGrow: isMobile && 1,
overflow: !isMobile && "auto",
}}>
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
<Tiptap isFocusedParent={isFocusedParent} setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} setIsFocusedParent={setIsFocusedParent}/>
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={()=> {
if(isSending) return
@ -365,7 +385,8 @@ const clearEditorContent = () => {
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{isSending && (
@ -383,6 +404,29 @@ const clearEditorContent = () => {
)}
{` Send`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
<LoadingSnackbar open={isLoading} info={{
message: "Loading chat... please wait."

61
src/components/Chat/ChatGroup.tsx
View File

@ -15,6 +15,7 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar'
import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
import { useMessageQueue } from '../../MessageQueueContext'
import { executeEvent } from '../../utils/events'
import { Box } from '@mui/material'
@ -28,6 +29,8 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
const hasInitialized = useRef(false)
const [isFocusedParent, setIsFocusedParent] = useState(false);
const hasInitializedWebsocket = useRef(false)
const socketRef = useRef(null); // WebSocket reference
const timeoutIdRef = useRef(null); // Timeout ID reference
@ -270,6 +273,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference =
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
executeEvent("sent-new-message-group", {})
}, 200);
}
}
};
@ -354,25 +364,37 @@ const clearEditorContent = () => {
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: '150px',
maxHeight: '400px',
minHeight: isMobile ? '0px' : '150px',
maxHeight: isMobile ? 'auto' : '400px',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
width: '100%',
boxSizing: 'border-box',
padding: '20px'
padding: isMobile ? '10px' : '20px',
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset'
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
// height: '100%',
overflow: 'auto'
flexGrow: isMobile && 1,
overflow: !isMobile && "auto",
}}>
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat />
<Tiptap setEditorRef={setEditorRef} onEnter={sendMessage} isChat disableEnter={isMobile ? true : false} isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent} />
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={()=> {
if(isSending) return
@ -383,7 +405,9 @@ const clearEditorContent = () => {
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0
flexShrink: 0,
padding: isMobile && '5px',
}}
>
{isSending && (
@ -401,6 +425,29 @@ const clearEditorContent = () => {
)}
{` Send`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px'
}}
>
{` Close`}
</CustomButton>
)}
</Box>
{/* <button onClick={sendMessage}>send</button> */}
</div>
{/* <ChatContainerComp messages={formatMessages} /> */}

72
src/components/Chat/GroupAnnouncements.tsx
View File

@ -51,6 +51,7 @@ export const saveTempPublish = async ({ data, key }: any) => {
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@ -71,6 +72,7 @@ export const getTempPublish = async () => {
(response) => {
if (!response?.error) {
res(response);
return
}
rej(response.error);
}
@ -135,6 +137,8 @@ export const GroupAnnouncements = ({
const [tempPublishedList, setTempPublishedList] = useState([])
const [announcementData, setAnnouncementData] = useState({});
const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
const [isFocusedParent, setIsFocusedParent] = useState(false);
const { show } = React.useContext(MyContext);
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
@ -226,6 +230,12 @@ export const GroupAnnouncements = ({
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
if(isMobile){
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
}, 200);
}
}
};
@ -500,18 +510,18 @@ export const GroupAnnouncements = ({
width: "100%",
display: "flex",
justifyContent: "center",
padding: "25px",
fontSize: "20px",
padding: isMobile ? '8px' : "25px",
fontSize: isMobile ? '16px' : "20px",
gap: '20px',
alignItems: 'center'
}}
>
<CampaignIcon sx={{
fontSize: '30px'
fontSize: isMobile ? '16px' : '30px'
}} />
Group Announcements
</Box>
<Spacer height="25px" />
<Spacer height={isMobile ? "10px" : "25px"} />
</div>
{!isLoading && combinedListTempAndReal?.length === 0 && (
@ -541,31 +551,46 @@ export const GroupAnnouncements = ({
// position: 'fixed',
// bottom: '0px',
backgroundColor: "#232428",
minHeight: "150px",
maxHeight: "400px",
minHeight: isMobile ? "0px" : "150px",
maxHeight: isMobile ? "auto" : "400px",
display: "flex",
flexDirection: "column",
overflow: "hidden",
width: "100%",
boxSizing: "border-box",
padding: "20px",
flexShrink: 0
padding: isMobile ? "10px": "20px",
position: isFocusedParent ? 'fixed' : 'relative',
bottom: isFocusedParent ? '0px' : 'unset',
top: isFocusedParent ? '0px' : 'unset',
zIndex: isFocusedParent ? 5 : 'unset',
flexShrink: 0
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
flexGrow: isMobile && 1,
overflow: "auto",
// height: '100%',
overflow: "auto",
}}
}}
>
<Tiptap
setEditorRef={setEditorRef}
onEnter={publishAnnouncement}
disableEnter
maxHeightOffset="40px"
isFocusedParent={isFocusedParent} setIsFocusedParent={setIsFocusedParent}
/>
</div>
<Box sx={{
display: 'flex',
width: '100&',
gap: '10px',
justifyContent: 'center',
flexShrink: 0,
position: 'relative',
}}>
<CustomButton
onClick={() => {
if (isSending) return;
@ -577,6 +602,9 @@ export const GroupAnnouncements = ({
cursor: isSending ? "default" : "pointer",
background: isSending && "rgba(0, 0, 0, 0.8)",
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{isSending && (
@ -594,6 +622,30 @@ export const GroupAnnouncements = ({
)}
{` Publish Announcement`}
</CustomButton>
{isFocusedParent && (
<CustomButton
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
clearEditorContent()
// Unfocus the editor
}}
style={{
marginTop: 'auto',
alignSelf: 'center',
cursor: isSending ? 'default' : 'pointer',
background: isSending && 'rgba(0, 0, 0, 0.8)',
flexShrink: 0,
padding: isMobile && '5px',
fontSize: isMobile && '14px',
}}
>
{` Close`}
</CustomButton>
)}
</Box>
</div>
)}

122
src/components/Chat/TipTap.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { Color } from '@tiptap/extension-color';
@ -25,6 +25,7 @@ import CustomImage from './CustomImage';
import Compressor from 'compressorjs'
import ImageResize from 'tiptap-extension-resize-image'; // Import the ResizeImage extension
import { isMobile } from '../../App';
const MenuBar = ({ setEditorRef, isChat }) => {
const { editor } = useCurrentEditor();
const fileInputRef = useRef(null);
@ -88,10 +89,11 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('bold') ? 'white' : 'gray'}
sx={{
color: editor.isActive('bold') ? 'white' : 'gray'
color: editor.isActive('bold') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatBoldIcon />
<FormatBoldIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleItalic().run()}
@ -104,7 +106,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('italic') ? 'white' : 'gray'}
sx={{
color: editor.isActive('italic') ? 'white' : 'gray'
color: editor.isActive('italic') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatItalicIcon />
@ -120,7 +123,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('strike') ? 'white' : 'gray'}
sx={{
color: editor.isActive('strike') ? 'white' : 'gray'
color: editor.isActive('strike') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<StrikethroughSIcon />
@ -136,19 +140,23 @@ const MenuBar = ({ setEditorRef, isChat }) => {
}
// color={editor.isActive('code') ? 'white' : 'gray'}
sx={{
color: editor.isActive('code') ? 'white' : 'gray'
color: editor.isActive('code') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<CodeIcon />
</IconButton>
<IconButton onClick={() => editor.chain().focus().unsetAllMarks().run()}>
<IconButton sx={{
padding: isMobile ? '5px' : 'revert'
}} onClick={() => editor.chain().focus().unsetAllMarks().run()}>
<FormatClearIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleBulletList().run()}
// color={editor.isActive('bulletList') ? 'white' : 'gray'}
sx={{
color: editor.isActive('bulletList') ? 'white' : 'gray'
color: editor.isActive('bulletList') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatListBulletedIcon />
@ -157,7 +165,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleOrderedList().run()}
// color={editor.isActive('orderedList') ? 'white' : 'gray'}
sx={{
color: editor.isActive('orderedList') ? 'white' : 'gray'
color: editor.isActive('orderedList') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatListNumberedIcon />
@ -166,7 +175,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
// color={editor.isActive('codeBlock') ? 'white' : 'gray'}
sx={{
color: editor.isActive('codeBlock') ? 'white' : 'gray'
color: editor.isActive('codeBlock') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<DeveloperModeIcon />
@ -175,7 +185,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleBlockquote().run()}
// color={editor.isActive('blockquote') ? 'white' : 'gray'}
sx={{
color: editor.isActive('blockquote') ? 'white' : 'gray'
color: editor.isActive('blockquote') ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatQuoteIcon />
@ -187,7 +198,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
// color={editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'}
sx={{
color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray'
color: editor.isActive('heading', { level: 1 }) ? 'white' : 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<FormatHeadingIcon fontSize="small" />
@ -202,7 +214,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
.run()
}
sx={{
color: 'gray'
color: 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<UndoIcon />
@ -227,7 +240,8 @@ const MenuBar = ({ setEditorRef, isChat }) => {
<IconButton
onClick={triggerImageUpload}
sx={{
color: 'gray'
color: 'gray',
padding: isMobile ? '5px' : 'revert'
}}
>
<ImageIcon />
@ -268,32 +282,66 @@ const extensions = [
const content = ``;
export default ({ setEditorRef, onEnter, disableEnter, isChat }) => {
export default ({ setEditorRef, onEnter, disableEnter, isChat, maxHeightOffset, setIsFocusedParent, isFocusedParent, overrideMobile, customEditorHeight }) => {
const [isFocused, setIsFocused] = useState(false);
const extensionsFiltered = isChat ? extensions.filter((item)=> item?.name !== 'image') : extensions
const editorRef = useRef(null);
const setEditorRefFunc = (editorInstance) => {
editorRef.current = editorInstance;
setEditorRef(editorInstance)
};
const handleFocus = () => {
if(!isMobile) return
// setIsFocused(true);
setIsFocusedParent(true)
};
const handleBlur = () => {
const htmlContent = editorRef.current.getHTML();
if (!htmlContent?.trim() || htmlContent?.trim() === "<p></p>"){
// setIsFocused(false);
// setIsFocusedParent(false)
};
};
// useEffect(()=> {
// setIsFocused(isFocusedParent)
// },[isFocusedParent])
return (
<EditorProvider
slotBefore={<MenuBar setEditorRef={setEditorRef} isChat={isChat} />}
extensions={extensionsFiltered}
content={content}
editorProps={{
handleKeyDown(view, event) {
if (!disableEnter && event.key === 'Enter') {
if (event.shiftKey) {
// Shift+Enter: Insert a hard break
view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
return true;
} else {
// Enter: Call the callback function
if (typeof onEnter === 'function') {
onEnter();
}
return true; // Prevent the default action of adding a new line
slotBefore={(isFocusedParent || !isMobile || overrideMobile) && <MenuBar setEditorRef={setEditorRefFunc} isChat={isChat} />}
extensions={extensionsFiltered}
content={content}
onCreate={({ editor }) => {
editor.on('focus', handleFocus); // Listen for focus event
editor.on('blur', handleBlur); // Listen for blur event
}}
onUpdate={({ editor }) => {
editor.on('focus', handleFocus); // Ensure focus is updated
editor.on('blur', handleBlur); // Ensure blur is updated
}}
editorProps={{
attributes: {
class: 'tiptap-prosemirror',
style: isMobile && `overflow: auto; min-height: ${customEditorHeight ? '200px' : '0px'}; 200px; max-height:calc(100svh - ${ customEditorHeight ? customEditorHeight : '140px'})`,
},
handleKeyDown(view, event) {
if (!disableEnter && event.key === 'Enter') {
if (event.shiftKey) {
view.dispatch(view.state.tr.replaceSelectionWith(view.state.schema.nodes.hardBreak.create()));
return true;
} else {
if (typeof onEnter === 'function') {
onEnter();
}
return true;
}
return false; // Allow default handling for other keys
},
}}
/>
);
}
return false;
},
}}
/>
)
};

3
src/components/Chat/styles.css
View File

@ -118,4 +118,5 @@
.tiptap img {
display: block;
max-width: 100%;
}
}

84
src/components/Group/AddGroup.tsx
View File

@ -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 && (

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

@ -247,7 +247,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
style={{
position: "relative",
height: "500px",
width: "600px",
width: "100%",
display: "flex",
flexDirection: "column",
flexShrink: 1,

29
src/components/Group/Forum/NewThread.tsx
View File

@ -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}>

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

@ -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");

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

@ -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

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

@ -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

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

@ -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

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

@ -357,7 +357,7 @@ const ListOfMembers = ({
style={{
position: "relative",
height: "500px",
width: "600px",
width: "100%",
display: "flex",
flexDirection: "column",
flexShrink: 1,

125
src/components/Group/ManageMembers.tsx
View File

@ -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 && (

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

@ -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