Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-23 04:36:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Translation for chat pages

Browse Source
This commit is contained in:
Nicola Benaglia
2025-05-17 11:20:42 +02:00
parent 628786165a
commit bec943149f
7 changed files with 178 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -234,7 +234,12 @@ export const GroupAnnouncements = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', {
postProcess: 'capitalizeFirst',
})
);
});
});
} catch (error) {
@@ -257,7 +262,12 @@ export const GroupAnnouncements = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', {
postProcess: 'capitalizeFirst',
})
);
});
});
};
@@ -337,7 +347,7 @@ export const GroupAnnouncements = ({
setTempData(selectedGroup);
clearEditorContent();
}
// TODO send chat message
// send chat message
} catch (error) {
if (!error) return;
setInfoSnack({
@@ -586,7 +596,9 @@ export const GroupAnnouncements = ({
fontSize: '30px',
}}
/>
Group Announcements
{t('group:message.generic.group_announcement', {
postProcess: 'capitalizeFirst',
})}
</Box>
<Spacer height={'25px'} />
@@ -605,10 +617,13 @@ export const GroupAnnouncements = ({
fontSize: '16px',
}}
>
No announcements
{t('group:message.generic.no_announcement', {
postProcess: 'capitalizeFirst',
})}
</Typography>
</Box>
)}
<AnnouncementList
announcementData={announcementData}
initialMessages={combinedListTempAndReal}
@@ -689,7 +704,7 @@ export const GroupAnnouncements = ({
padding: '5px',
}}
>
{` Close`}
{t('core:action.close', { postProcess: 'capitalizeFirst' })}
</CustomButton>
)}
@@ -723,7 +738,9 @@ export const GroupAnnouncements = ({
}}
/>
)}
{` Publish Announcement`}
{t('group:action.publish_announcement', {
postProcess: 'capitalizeFirst',
})}
</CustomButton>
</Box>
</div>
@@ -739,7 +756,9 @@ export const GroupAnnouncements = ({
<LoadingSnackbar
open={isLoading}
info={{
message: 'Loading announcements... please wait.',
message: t('core:loading.announcements', {
postProcess: 'capitalizeFirst',
}),
}}
/>
</div>

48
src/components/Chat/GroupAvatar.tsx
View File

@@ -20,6 +20,7 @@ import { getFee } from '../../background';
import { fileToBase64 } from '../../utils/fileReading';
import { LoadingButton } from '@mui/lab';
import ErrorIcon from '@mui/icons-material/Error';
import { useTranslation } from 'react-i18next';
export const GroupAvatar = ({
myName,
@@ -32,7 +33,7 @@ export const GroupAvatar = ({
const [avatarFile, setAvatarFile] = useState(null);
const [tempAvatar, setTempAvatar] = useState(null);
const { show } = useContext(MyContext);
const { t } = useTranslation(['auth', 'core', 'group']);
const [anchorEl, setAnchorEl] = useState(null);
const [isLoading, setIsLoading] = useState(false);
// Handle child element click to open Popover
@@ -68,6 +69,7 @@ export const GroupAvatar = ({
console.log(error);
}
}, []);
useEffect(() => {
if (!myName || !groupId) return;
checkIfAvatarExists(myName, groupId);
@@ -79,14 +81,22 @@ export const GroupAvatar = ({
const fee = await getFee('ARBITRARY');
if (+balance < +fee.fee)
throw new Error(`Publishing an Avatar requires ${fee.fee}`);
throw new Error(
t('core:message.generic.avatar_publish_fee', {
fee: fee.fee,
postProcess: 'capitalizeFirst',
})
);
await show({
message: 'Would you like to publish an avatar?',
message: t('core:question.publish_avatar', {
postProcess: 'capitalizeFirst',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoading(true);
const avatarBase64 = await fileToBase64(avatarFile);
await new Promise((res, rej) => {
window
.sendMessage('publishOnQDN', {
@@ -102,7 +112,12 @@ export const GroupAvatar = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', {
postProcess: 'capitalizeFirst',
})
);
});
});
setAvatarFile(null);
@@ -142,7 +157,7 @@ export const GroupAvatar = ({
opacity: 0.5,
}}
>
change avatar
{t('core:action.change_avatar', { postProcess: 'capitalizeFirst' })}
</Typography>
</ButtonBase>
@@ -182,7 +197,7 @@ export const GroupAvatar = ({
opacity: 0.5,
}}
>
change avatar
{t('core:action.change_avatar', { postProcess: 'capitalizeFirst' })}
</Typography>
</ButtonBase>
@@ -211,7 +226,7 @@ export const GroupAvatar = ({
opacity: 0.5,
}}
>
set avatar
{t('core:action.set_avatar', { postProcess: 'capitalizeFirst' })}
</Typography>
</ButtonBase>
@@ -242,6 +257,8 @@ const PopoverComp = ({
myName,
}) => {
const theme = useTheme();
const { t } = useTranslation(['auth', 'core', 'group']);
return (
<Popover
id={id}
@@ -263,11 +280,16 @@ const PopoverComp = ({
fontSize: '12px',
}}
>
(500 KB max. for GIFS){' '}
{t('core:message.generic.avatar_size', {
size: 500, // TODO magic number
postProcess: 'capitalizeFirst',
})}
</Typography>
<ImageUploader onPick={(file) => setAvatarFile(file)}>
<Button variant="contained">Choose Image</Button>
<Button variant="contained">
{t('core:action.choose_image', { postProcess: 'capitalizeFirst' })}
</Button>
</ImageUploader>
{avatarFile?.name}
@@ -277,9 +299,9 @@ const PopoverComp = ({
{!myName && (
<Box
sx={{
alignItems: 'center',
display: 'flex',
gap: '5px',
alignItems: 'center',
}}
>
<ErrorIcon
@@ -288,7 +310,9 @@ const PopoverComp = ({
}}
/>
<Typography>
A registered name is required to set an avatar
{t('core:message.generic.avatar_registered_name', {
postProcess: 'capitalizeFirst',
})}
</Typography>
</Box>
)}
@@ -301,7 +325,7 @@ const PopoverComp = ({
onClick={publishAvatar}
variant="contained"
>
Publish avatar
{t('group:action.publish_avatar', { postProcess: 'capitalizeFirst' })}
</LoadingButton>
</Box>
</Popover>

9
src/components/Chat/MentionList.tsx
View File

@@ -1,6 +1,9 @@
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { useTranslation } from 'react-i18next';
export default forwardRef((props, ref) => {
const { t } = useTranslation(['auth', 'core', 'group']);
const [selectedIndex, setSelectedIndex] = useState(0);
const selectItem = (index) => {
@@ -61,7 +64,11 @@ export default forwardRef((props, ref) => {
</button>
))
) : (
<div className="item">No result</div>
<div className="item">
{t('core:message.generic.no_results', {
postProcess: 'capitalizeFirst',
})}
</div>
)}
</div>
);

68
src/components/Chat/MessageItem.tsx
View File

@@ -48,6 +48,7 @@ import level9Img from '../../assets/badges/level-9.png';
import level10Img from '../../assets/badges/level-10.png';
import { Embed } from '../Embeds/Embed';
import { buildImageEmbedLink, messageHasImage } from '../../utils/chat';
import { useTranslation } from 'react-i18next';
const getBadgeImg = (level) => {
switch (level?.toString()) {
@@ -169,12 +170,15 @@ export const MessageItem = memo(
}, [message?.id]);
const theme = useTheme();
const { t } = useTranslation(['auth', 'core', 'group']);
return (
<>
{message?.divide && (
<div className="unread-divider" id="unread-divider-id">
Unread messages below
{t('core:message.generic.unread_messages', {
postProcess: 'capitalizeFirst',
})}
</div>
)}
@@ -262,6 +266,7 @@ export const MessageItem = memo(
{message?.senderName || message?.sender}
</Typography>
</WrapperUserAction>
<Box
sx={{
display: 'flex',
@@ -279,6 +284,7 @@ export const MessageItem = memo(
<EditIcon />
</ButtonBase>
)}
{!isShowingAsReply && (
<ButtonBase
onClick={() => {
@@ -288,6 +294,7 @@ export const MessageItem = memo(
<ReplyIcon />
</ButtonBase>
)}
{!isShowingAsReply && handleReaction && (
<ReactionPicker
onReaction={(val) => {
@@ -307,6 +314,7 @@ export const MessageItem = memo(
)}
</Box>
</Box>
{reply && (
<>
<Spacer height="20px" />
@@ -333,6 +341,7 @@ export const MessageItem = memo(
flexShrink: 0,
}}
/>
<Box
sx={{
padding: '5px',
@@ -344,11 +353,16 @@ export const MessageItem = memo(
fontWeight: 600,
}}
>
Replied to {reply?.senderName || reply?.senderAddress}
{t('core:message.generic.replied_to', {
person: reply?.senderName || reply?.senderAddress,
postProcess: 'capitalizeFirst',
})}
</Typography>
{reply?.messageText && (
<MessageDisplay htmlContent={htmlReply} />
)}
{reply?.decryptedData?.type === 'notification' ? (
<MessageDisplay
htmlContent={reply.decryptedData?.data?.message}
@@ -360,6 +374,7 @@ export const MessageItem = memo(
</Box>
</>
)}
{htmlText && <MessageDisplay htmlContent={htmlText} />}
{message?.decryptedData?.type === 'notification' ? (
@@ -454,14 +469,17 @@ export const MessageItem = memo(
>
<Box sx={{ p: 2 }}>
<Typography variant="subtitle1" sx={{ marginBottom: 1 }}>
People who reacted with {selectedReaction}
{t('core:message.generic.people_reaction', {
reaction: selectedReaction,
postProcess: 'capitalizeFirst',
})}
</Typography>
<List
sx={{
overflow: 'auto',
maxWidth: '300px',
maxHeight: '300px',
maxWidth: '300px',
overflow: 'auto',
}}
>
{reactions[selectedReaction]?.map((reactionItem) => (
@@ -474,6 +492,7 @@ export const MessageItem = memo(
</ListItem>
))}
</List>
<Button
variant="contained"
color="primary"
@@ -495,12 +514,17 @@ export const MessageItem = memo(
{reactions[selectedReaction]?.find(
(item) => item?.sender === myAddress
)
? 'Remove Reaction'
: 'Add Reaction'}
? t('core:action.remove_reaction', {
postProcess: 'capitalizeFirst',
})
: t('core:action.add_reaction', {
postProcess: 'capitalizeFirst',
})}
</Button>
</Box>
</Popover>
)}
<Box
sx={{
alignItems: 'center',
@@ -526,8 +550,12 @@ export const MessageItem = memo(
}}
>
{message?.status === 'failed-permanent'
? 'Failed to update'
: 'Updating...'}
? t('core:message.error.update_failed', {
postProcess: 'capitalizeFirst',
})
: t('core:message.generic.updating', {
postProcess: 'capitalizeFirst',
})}
</Typography>
) : isTemp ? (
<Typography
@@ -538,8 +566,12 @@ export const MessageItem = memo(
}}
>
{message?.status === 'failed-permanent'
? 'Failed to send'
: 'Sending...'}
? t('core:message.error.send_failed', {
postProcess: 'capitalizeFirst',
})
: t('core:message.generic.sending', {
postProcess: 'capitalizeFirst',
})}
</Typography>
) : (
<>
@@ -552,7 +584,9 @@ export const MessageItem = memo(
fontStyle: 'italic',
}}
>
Edited
{t('core:message.generic.edited', {
postProcess: 'capitalizeFirst',
})}
</Typography>
)}
<Typography
@@ -578,6 +612,7 @@ export const MessageItem = memo(
export const ReplyPreview = ({ message, isEdit = false }) => {
const theme = useTheme();
const { t } = useTranslation(['auth', 'core', 'group']);
return (
<Box
@@ -613,7 +648,9 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
fontWeight: 600,
}}
>
Editing Message
{t('core:message.generic.editing_message', {
postProcess: 'capitalizeFirst',
})}
</Typography>
) : (
<Typography
@@ -622,7 +659,10 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
fontWeight: 600,
}}
>
Replied to {message?.senderName || message?.senderAddress}
{t('core:message.generic.replied_to', {
person: message?.senderName || message?.senderAddress,
postProcess: 'capitalizeFirst',
})}
</Typography>
)}

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

@@ -31,6 +31,8 @@ import { isDisabledEditorEnterAtom } from '../../atoms/global.js';
import { Box, Checkbox, Typography, useTheme } from '@mui/material';
import { useAtom } from 'jotai';
import { fileToBase64 } from '../../utils/fileReading/index.js';
import { useTranslation } from 'react-i18next';
import { t } from 'i18next';
function textMatcher(doc, from) {
const textBeforeCursor = doc.textBetween(0, from, ' ', ' ');
@@ -52,6 +54,7 @@ const MenuBar = memo(
const { editor } = useCurrentEditor();
const fileInputRef = useRef(null);
const theme = useTheme();
const { t } = useTranslation(['auth', 'core', 'group']);
useEffect(() => {
if (editor && setEditorRef) {
@@ -143,6 +146,7 @@ const MenuBar = memo(
>
<FormatBoldIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleItalic().run()}
disabled={!editor.can().chain().focus().toggleItalic().run()}
@@ -155,6 +159,7 @@ const MenuBar = memo(
>
<FormatItalicIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={!editor.can().chain().focus().toggleStrike().run()}
@@ -167,6 +172,7 @@ const MenuBar = memo(
>
<StrikethroughSIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleCode().run()}
disabled={!editor.can().chain().focus().toggleCode().run()}
@@ -179,6 +185,7 @@ const MenuBar = memo(
>
<CodeIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().unsetAllMarks().run()}
sx={{
@@ -194,6 +201,7 @@ const MenuBar = memo(
>
<FormatClearIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleBulletList().run()}
sx={{
@@ -205,6 +213,7 @@ const MenuBar = memo(
>
<FormatListBulletedIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleOrderedList().run()}
sx={{
@@ -216,6 +225,7 @@ const MenuBar = memo(
>
<FormatListNumberedIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
sx={{
@@ -227,6 +237,7 @@ const MenuBar = memo(
>
<DeveloperModeIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().toggleBlockquote().run()}
sx={{
@@ -238,6 +249,7 @@ const MenuBar = memo(
>
<FormatQuoteIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().setHorizontalRule().run()}
disabled={!editor.can().chain().focus().setHorizontalRule().run()}
@@ -245,6 +257,7 @@ const MenuBar = memo(
>
<HorizontalRuleIcon />
</IconButton>
<IconButton
onClick={() =>
editor.chain().focus().toggleHeading({ level: 1 }).run()
@@ -258,6 +271,7 @@ const MenuBar = memo(
>
<FormatHeadingIcon fontSize="small" />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
@@ -265,6 +279,7 @@ const MenuBar = memo(
>
<UndoIcon />
</IconButton>
<IconButton
onClick={() => editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()}
@@ -272,13 +287,14 @@ const MenuBar = memo(
>
<RedoIcon />
</IconButton>
{isChat && (
<Box
sx={{
display: 'flex',
alignItems: 'center',
marginLeft: '5px',
cursor: 'pointer',
display: 'flex',
marginLeft: '5px',
}}
onClick={() => {
setIsDisabledEditorEnter(!isDisabledEditorEnter);
@@ -304,10 +320,13 @@ const MenuBar = memo(
color: theme.palette.text.primary,
}}
>
disable enter
{t('core:action.disable_enter', {
postProcess: 'capitalizeFirst',
})}
</Typography>
</Box>
)}
{!isChat && (
<>
<IconButton
@@ -319,6 +338,7 @@ const MenuBar = memo(
>
<ImageIcon />
</IconButton>
<input
type="file"
ref={fileInputRef}
@@ -348,7 +368,9 @@ const extensions = [
},
}),
Placeholder.configure({
placeholder: 'Start typing here...',
placeholder: t('core:action.start_typing', {
postProcess: 'capitalizeFirst',
}),
}),
ImageResize,
];
@@ -416,12 +438,6 @@ export default ({
setEditorRef(editorInstance);
}, []);
// const users = [
// { id: 1, label: 'Alice' },
// { id: 2, label: 'Bob' },
// { id: 3, label: 'Charlie' },
// ];
const users = useMemo(() => {
return (membersWithNames || [])?.map((item) => {
return {