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>