Refactor code structure for improved readability and maintainability

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"