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

src/app/components/emoji-board/EmojiBoard.tsx

@@ -54,6 +54,7 @@ import {
 import { EmojiBoardTab, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
 
+const MOST_USED_GROUP_ID = 'most_used_group';
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
 
@@ -73,6 +74,7 @@ const useGroups = (
   imagePacks: ImagePack[]
 ): [EmojiGroupItem[], StickerGroupItem[]] => {
   const mx = useMatrixClient();
+  const { getTopEmojis } = useEmojiUsage();
 
   const recentEmojis = useRecentEmoji(mx, 21);
   const labels = useEmojiGroupLabels();
@@ -81,6 +83,22 @@ const useGroups = (
     const g: EmojiGroupItem[] = [];
     if (tab !== EmojiBoardTab.Emoji) return g;
 
+    // Add most-used emojis
+    const topShortcodes = getTopEmojis(21);
+    if (topShortcodes.length > 0) {
+      const mostUsedEmojis = topShortcodes
+        .map((shortcode) => emojis.find((e) => e.shortcode === shortcode))
+        .filter((e): e is IEmoji => e !== undefined);
+      
+      if (mostUsedEmojis.length > 0) {
+        g.push({
+          id: MOST_USED_GROUP_ID,
+          name: 'Most Used',
+          items: mostUsedEmojis,
+        });
+      }
+    }
+
     g.push({
       id: RECENT_GROUP_ID,
       name: 'Recent',
@@ -187,6 +205,13 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
   return (
     <Sidebar>
       <SidebarStack>
+        <GroupIcon
+          active={activeGroupId === MOST_USED_GROUP_ID}
+          id={MOST_USED_GROUP_ID}
+          label="Most Used"
+          icon={Icons.Heart}
+          onClick={handleScrollToGroup}
+        />
         <GroupIcon
           active={activeGroupId === RECENT_GROUP_ID}
           id={RECENT_GROUP_ID}

src/app/components/message/MsgTypeRenderers.tsx

@@ -80,7 +80,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;