Refactor code structure for improved readability and maintainability

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}
         />
-        <GroupIcon
-          active={activeGroupId === RECENT_GROUP_ID}
-          id={RECENT_GROUP_ID}
-          label="Recent"
-          icon={Icons.RecentClock}
-          onClick={handleScrollToGroup}
-        />
       </SidebarStack>
       {packs.length > 0 && (
         <SidebarStack>

src/app/components/message/MsgTypeRenderers.tsx

@@ -81,6 +81,9 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
 
   if (typeof body !== 'string') return <BrokenContent />;
   const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\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 && <MessageEditedContent />}
       </MessageTextBody>
@@ -119,7 +122,10 @@ export function MEmote({
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -133,7 +139,7 @@ export function MEmote({
         <b>{`${displayName} `}</b>
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -152,7 +158,10 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\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 && <MessageEditedContent />}
       </MessageTextBody>

src/app/features/room/RoomInput.tsx

@@ -405,10 +405,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         return;
       }
 
-      if (plainText === '') return;
-
       let body = plainText.trim();
-      let formattedBody = customHtml.trim();
+      let formattedBody = customHtml.trim().replace(/(<br\s*\/?>\s*)+$/gi, '');
+
+      if (body === '') return;
 
       // Apply emoticon conversion if enabled
       if (autoConvertEmoticons) {

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 <span />;
+    if (mostUsedEmojis.length === 0) return <span />;
     return (
       <>
         <Box
@@ -107,7 +110,7 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
           {...props}
           ref={ref}
         >
-          {recentEmojis.map((emoji) => (
+          {mostUsedEmojis.map((emoji) => (
             <IconButton
               key={emoji.unicode}
               className={css.MessageQuickReaction}
@@ -776,7 +779,6 @@ export const Message = as<'div', MessageProps>(
     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>(
           <div className={css.MessageOptionsBase}>
             <Menu className={css.MessageOptionsBar} variant="SurfaceVariant">
               <Box gap="100">
-                {canSendReaction && (() => {
-                  const mostUsedShortcode = getMostUsedEmoji();
-                  const mostUsedEmoji = mostUsedShortcode 
-                    ? emojis.find((e) => e.shortcode === mostUsedShortcode)
-                    : null;
-                  
-                  return mostUsedEmoji ? (
-                    <IconButton
-                      onClick={() => onReactionToggle(mEvent.getId()!, mostUsedEmoji.unicode)}
-                      variant="SurfaceVariant"
-                      size="300"
-                      radii="300"
-                      title={`Quick react with ${mostUsedEmoji.unicode}`}
-                    >
-                      <Text size="T300">{mostUsedEmoji.unicode}</Text>
-                    </IconButton>
-                  ) : null;
-                })()}
                 {canSendReaction && (
                   <PopOut
                     position="Bottom"