feat: Trim whitespace from message bodies and enhance emoji usage integration

src/app/features/room/RoomInput.tsx

@@ -407,8 +407,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
       if (plainText === '') return;
 
-      let body = plainText;
-      let formattedBody = customHtml;
+      let body = plainText.trim();
+      let formattedBody = customHtml.trim();
 
       // Apply emoticon conversion if enabled
       if (autoConvertEmoticons) {

src/app/features/room/message/Message.tsx

@@ -71,6 +71,8 @@ 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';
@@ -774,6 +776,7 @@ 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 });
@@ -975,6 +978,24 @@ 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"