perf(desktop): share quick-reaction preparation per app session

desktop/playwright.config.ts

@@ -117,6 +117,7 @@ export default defineConfig({
         "**/human-edit-agent-content.spec.ts",
         "**/empty-edit-delete.spec.ts",
         "**/reaction-order.spec.ts",
+        "**/quick-reaction-sharing.spec.ts",
         "**/reaction-names.spec.ts",
         "**/inbox-reactions.spec.ts",
         "**/inbox-edit.spec.ts",

desktop/src/app/App.tsx

@@ -22,6 +22,7 @@ import { ThemeGrainientBackground } from "@/app/ThemeGrainientBackground";
 import { CommunityThemeController } from "@/shared/theme/CommunityThemeController";
 import { useReloadShortcut } from "@/app/useReloadShortcut";
 import { useCloseWindowShortcut } from "@/app/useCloseWindowShortcut";
+import { QuickReactionProvider } from "@/features/messages/ui/QuickReactionProvider";
 import { KnownAgentPubkeysProvider } from "@/features/agents/useKnownAgentPubkeys";
 import { huddleWindowChannelId } from "@/features/huddle/lib/huddleWindow";
 import { useAppOnboardingState } from "@/features/onboarding/hooks";
@@ -299,9 +300,11 @@ function CommunityIdentityReplacementSentinel({
 }
 
 function AppReady({
+  communityScope,
   isSharedIdentity,
   isCommunitySwitch,
 }: {
+  communityScope: string | null;
   isSharedIdentity: boolean;
   isCommunitySwitch: boolean;
 }) {
@@ -343,9 +346,11 @@ function AppReady({
         })
       }
     >
-      <KnownAgentPubkeysProvider>
-        <RouterProvider router={router} />
-      </KnownAgentPubkeysProvider>
+      <QuickReactionProvider communityScope={communityScope}>
+        <KnownAgentPubkeysProvider>
+          <RouterProvider router={router} />
+        </KnownAgentPubkeysProvider>
+      </QuickReactionProvider>
     </EncryptedBackupProvider>
   );
 }
@@ -636,6 +641,7 @@ function CommunityApp({
         />
         <CommunityThemeController />
         <AppReady
+          communityScope={activeCommunity?.id ?? null}
           isCommunitySwitch={isCommunitySwitch}
           key={communityKey}
           isSharedIdentity={sharedIdentity}

desktop/src/features/messages/ui/MessageActionBar.tsx

@@ -18,19 +18,15 @@ import { toast } from "sonner";
 
 import { buildMessageLink } from "@/features/messages/lib/messageLink";
 import { EmojiPicker } from "@/features/custom-emoji/ui/EmojiPicker";
-import { useCustomEmoji } from "@/features/custom-emoji/hooks";
 import { getThreadReference } from "@/features/messages/lib/threading";
 import { ReportMessageDialog } from "@/features/moderation/ui/ReportMessageDialog";
 import { MessageModerationMenuItems } from "@/features/moderation/ui/MessageModerationMenuItems";
 import type {
   TimelineMessage,
   TimelineReaction,
 } from "@/features/messages/types";
-import {
-  recordQuickReactionEmoji,
-  useQuickReactionEmojis,
-} from "@/features/messages/ui/useQuickReactionEmojis";
-import { reactionEmojiUrl } from "@/shared/api/customEmoji";
+import { recordQuickReactionEmoji } from "@/features/messages/ui/useQuickReactionEmojis";
+import { useQuickReactionItems } from "./QuickReactionProvider";
 import { cn } from "@/shared/lib/cn";
 import { copyTextToClipboard } from "@/shared/lib/clipboard";
 import { emojiDisplayName } from "@/shared/lib/emojiName";
@@ -377,10 +373,6 @@ function QuickReactionButton({
   );
 }
 
-function isCustomEmojiShortcode(emoji: string) {
-  return emoji.startsWith(":") && emoji.endsWith(":");
-}
-
 export const MessageActionBar = React.memo(function MessageActionBar({
   channelId,
   message,
@@ -424,20 +416,7 @@ export const MessageActionBar = React.memo(function MessageActionBar({
 }) {
   const [isReactionPickerOpen, setIsReactionPickerOpen] = React.useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const customEmoji = useCustomEmoji();
-  const quickReactionEmojis = useQuickReactionEmojis(3, customEmoji);
-  const quickReactionItems = React.useMemo(
-    () =>
-      quickReactionEmojis
-        .map((emoji) => ({
-          customEmojiUrl: reactionEmojiUrl(emoji, customEmoji),
-          emoji,
-        }))
-        .filter(
-          (item) => !isCustomEmojiShortcode(item.emoji) || item.customEmojiUrl,
-        ),
-    [customEmoji, quickReactionEmojis],
-  );
+  const quickReactionItems = useQuickReactionItems();
   const hasReplyAction = Boolean(onReply);
   const hasReactionAction = Boolean(onReactionSelect);