From 43bd6320b8cce9d4020d970d725193280c49a638 Mon Sep 17 00:00:00 2001 From: Max Litruv Boonzaayer Date: Wed, 13 May 2026 05:47:11 +1000 Subject: [PATCH] Refactor code structure for improved readability and maintainability --- build_output.txt | Bin 0 -> 23788 bytes src/app/components/emoji-board/EmojiBoard.tsx | 17 +-------- .../components/message/MsgTypeRenderers.tsx | 19 +++++++--- src/app/features/room/RoomInput.tsx | 6 ++-- src/app/features/room/message/Message.tsx | 34 +++++------------- 5 files changed, 27 insertions(+), 49 deletions(-) create mode 100644 build_output.txt diff --git a/build_output.txt b/build_output.txt new file mode 100644 index 0000000000000000000000000000000000000000..a27d77ab151d0ca06ca67859a89ce3de198ab860 GIT binary patch literal 23788 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 literal 0 HcmV?d00001 diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 825ef58..30da8c7 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -21,7 +21,6 @@ import { useEmojiGroupIcons } from './useEmojiGroupIcons'; import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard'; import { useRelevantImagePacks } from '../../hooks/useImagePacks'; import { useMatrixClient } from '../../hooks/useMatrixClient'; -import { useRecentEmoji } from '../../hooks/useRecentEmoji'; import { useEmojiUsage } from '../../hooks/useEmojiUsage'; import { isUserId, mxcUrlToHttp } from '../../utils/matrix'; import { editableActiveElement, targetFromEvent } from '../../utils/dom'; @@ -76,7 +75,6 @@ const useGroups = ( const mx = useMatrixClient(); const { getTopEmojis } = useEmojiUsage(); - const recentEmojis = useRecentEmoji(mx, 21); const labels = useEmojiGroupLabels(); const emojiGroupItems = useMemo(() => { @@ -99,12 +97,6 @@ const useGroups = ( } } - g.push({ - id: RECENT_GROUP_ID, - name: 'Recent', - items: recentEmojis, - }); - imagePacks.forEach((pack) => { let label = pack.meta.name; if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name; @@ -127,7 +119,7 @@ const useGroups = ( }); return g; - }, [mx, recentEmojis, labels, imagePacks, tab]); + }, [mx, labels, imagePacks, tab, getTopEmojis]); const stickerGroupItems = useMemo(() => { const g: StickerGroupItem[] = []; @@ -212,13 +204,6 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP icon={Icons.Heart} onClick={handleScrollToGroup} /> - {packs.length > 0 && ( diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx index 3ab97e8..73c030a 100644 --- a/src/app/components/message/MsgTypeRenderers.tsx +++ b/src/app/components/message/MsgTypeRenderers.tsx @@ -81,6 +81,9 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }: if (typeof body !== 'string') return ; const trimmedBody = trimReplyFromBody(body).trim(); + const trimmedCustomBody = typeof customBody === 'string' + ? customBody.trim().replace(/(\s*)+$/gi, '') + : undefined; const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG); const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined; @@ -93,7 +96,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }: > {renderBody({ body: trimmedBody, - customBody: typeof customBody === 'string' ? customBody : undefined, + customBody: trimmedCustomBody, })} {edited && } @@ -119,7 +122,10 @@ export function MEmote({ const { body, formatted_body: customBody } = content; if (typeof body !== 'string') return ; - const trimmedBody = trimReplyFromBody(body); + const trimmedBody = trimReplyFromBody(body).trim(); + const trimmedCustomBody = typeof customBody === 'string' + ? customBody.trim().replace(/(\s*)+$/gi, '') + : undefined; const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG); const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined; @@ -133,7 +139,7 @@ export function MEmote({ {`${displayName} `} {renderBody({ body: trimmedBody, - customBody: typeof customBody === 'string' ? customBody : undefined, + customBody: trimmedCustomBody, })} {edited && } @@ -152,7 +158,10 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot const { body, formatted_body: customBody } = content; if (typeof body !== 'string') return ; - const trimmedBody = trimReplyFromBody(body); + const trimmedBody = trimReplyFromBody(body).trim(); + const trimmedCustomBody = typeof customBody === 'string' + ? customBody.trim().replace(/(\s*)+$/gi, '') + : undefined; const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG); const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined; @@ -165,7 +174,7 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot > {renderBody({ body: trimmedBody, - customBody: typeof customBody === 'string' ? customBody : undefined, + customBody: trimmedCustomBody, })} {edited && } diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index f5cf99f..8242850 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -405,10 +405,10 @@ export const RoomInput = forwardRef( return; } - if (plainText === '') return; - let body = plainText.trim(); - let formattedBody = customHtml.trim(); + let formattedBody = customHtml.trim().replace(/(\s*)+$/gi, ''); + + if (body === '') return; // Apply emoticon conversion if enabled if (autoConvertEmoticons) { diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 45ee558..c5b63dd 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -62,6 +62,8 @@ import { import { MessageLayout, MessageSpacing } from '../../../state/settings'; import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useRecentEmoji } from '../../../hooks/useRecentEmoji'; +import { useEmojiUsage } from '../../../hooks/useEmojiUsage'; +import { emojis } from '../../../plugins/emoji'; import * as css from './styles.css'; import { EventReaders } from '../../../components/event-readers'; import { TextViewer } from '../../../components/text-viewer'; @@ -71,8 +73,6 @@ import { ReactionViewer } from '../reaction-viewer'; import { MessageEditor } from './MessageEditor'; import { UserAvatar } from '../../../components/user-avatar'; import { copyToClipboard } from '../../../utils/dom'; -import { useEmojiUsage } from '../../../hooks/useEmojiUsage'; -import { emojis } from '../../../plugins/emoji'; import { stopPropagation } from '../../../utils/keyboard'; import { getMatrixToRoomEvent } from '../../../plugins/matrix-to'; import { getViaServers } from '../../../plugins/via-servers'; @@ -93,10 +93,13 @@ type MessageQuickReactionsProps = { }; export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>( ({ onReaction, ...props }, ref) => { - const mx = useMatrixClient(); - const recentEmojis = useRecentEmoji(mx, 4); + const { getTopEmojis } = useEmojiUsage(); + const topShortcodes = getTopEmojis(4); + const mostUsedEmojis = topShortcodes + .map((shortcode) => emojis.find((e) => e.shortcode === shortcode)) + .filter((e): e is IEmoji => e !== undefined); - if (recentEmojis.length === 0) return ; + if (mostUsedEmojis.length === 0) return ; return ( <> ( {...props} ref={ref} > - {recentEmojis.map((emoji) => ( + {mostUsedEmojis.map((emoji) => ( ( const useAuthentication = useMediaAuthentication(); const senderId = mEvent.getSender() ?? ''; const senderPresence = useUserPresence(senderId); - const { getMostUsedEmoji } = useEmojiUsage(); const [hover, setHover] = useState(false); const { hoverProps } = useHover({ onHoverChange: setHover }); @@ -978,24 +980,6 @@ export const Message = as<'div', MessageProps>(
- {canSendReaction && (() => { - const mostUsedShortcode = getMostUsedEmoji(); - const mostUsedEmoji = mostUsedShortcode - ? emojis.find((e) => e.shortcode === mostUsedShortcode) - : null; - - return mostUsedEmoji ? ( - onReactionToggle(mEvent.getId()!, mostUsedEmoji.unicode)} - variant="SurfaceVariant" - size="300" - radii="300" - title={`Quick react with ${mostUsedEmoji.unicode}`} - > - {mostUsedEmoji.unicode} - - ) : null; - })()} {canSendReaction && (