fix

src/components/textNote/TextNoteDisplay.tsx

@@ -112,6 +112,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
     reactions,
     reactionsGroupedByContent,
     isReactedBy,
+    isReactedByWithEmoji,
     invalidateReactions,
     query: reactionsQuery,
   } = useReactions(() => ({
@@ -220,6 +221,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
     const p = pubkey();
     return (p != null && isReactedBy(p)) || reacted();
   });
+  const isReactedByMeWithEmoji = createMemo(() => {
+    const p = pubkey();
+    return p != null && isReactedByWithEmoji(p);
+  });
   const isRepostedByMe = createMemo(() => {
     const p = pubkey();
     return (p != null && isRepostedBy(p)) || reposted();
@@ -429,8 +434,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
               <div
                 class="flex shrink-0 items-center gap-1"
                 classList={{
-                  'text-zinc-400': !isReactedByMe(),
+                  'text-zinc-400': !isReactedByMe() || isReactedByMeWithEmoji(),
-                  'text-rose-400': isReactedByMe() || publishReactionMutation.isLoading,
+                  'text-rose-400':
+                    (isReactedByMe() && !isReactedByMeWithEmoji()) ||
+                    publishReactionMutation.isLoading,
                 }}
               >
                 <button
@@ -438,7 +445,10 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
                   onClick={handleReaction}
                   disabled={publishReactionMutation.isLoading}
                 >
-                  <Show when={isReactedByMe()} fallback={<HeartOutlined />}>
+                  <Show
+                    when={isReactedByMe() && !isReactedByMeWithEmoji()}
+                    fallback={<HeartOutlined />}
+                  >
                     <HeartSolid />
                   </Show>
                 </button>
@@ -451,7 +461,15 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
                 </Show>
               </div>
               <Show when={config().useEmojiReaction}>
-                <div class="shrink-0">
+                <div
+                  class="flex shrink-0 items-center gap-1"
+                  classList={{
+                    'text-zinc-400': !isReactedByMe() || !isReactedByMeWithEmoji(),
+                    'text-rose-400':
+                      (isReactedByMe() && isReactedByMeWithEmoji()) ||
+                      publishReactionMutation.isLoading,
+                  }}
+                >
                   <EmojiPicker onEmojiSelect={(emoji) => doReaction(emoji)}>
                     <span class="inline-block h-4 w-4">
                       <Plus />

src/nostr/useBatchedEvents.ts

@@ -1,11 +1,4 @@
-import {
+import { createSignal, createMemo, observable, type Accessor, type Signal } from 'solid-js';
-  createSignal,
-  createMemo,
-  createRoot,
-  observable,
-  type Accessor,
-  type Signal,
-} from 'solid-js';
 
 import { createQuery, useQueryClient, type CreateQueryResult } from '@tanstack/solid-query';
 import { type Event as NostrEvent, type Filter, Kind } from 'nostr-tools';
@@ -82,6 +75,7 @@ export type UseReactions = {
   reactions: () => NostrEvent[];
   reactionsGroupedByContent: () => Map<string, NostrEvent[]>;
   isReactedBy: (pubkey: string) => boolean;
+  isReactedByWithEmoji: (pubkey: string) => boolean;
   invalidateReactions: () => Promise<void>;
   query: CreateQueryResult<NostrEvent[]>;
 };
@@ -116,6 +110,8 @@ export type UseFollowings = {
   query: CreateQueryResult<NostrEvent | null>;
 };
 
+const EmojiRegex = /\p{Emoji_Presentation}/u;
+
 let count = 0;
 
 const { setActiveBatchSubscriptions } = useStats();
@@ -408,9 +404,20 @@ export const useReactions = (propsProvider: () => UseReactionsProps | null): Use
   const isReactedBy = (pubkey: string): boolean =>
     reactions().findIndex((event) => event.pubkey === pubkey) !== -1;
 
+  const isReactedByWithEmoji = (pubkey: string): boolean =>
+    reactions().findIndex((event) => event.pubkey === pubkey && EmojiRegex.test(event.content)) !==
+    -1;
+
   const invalidateReactions = (): Promise<void> => queryClient.invalidateQueries(genQueryKey());
 
-  return { reactions, reactionsGroupedByContent, isReactedBy, invalidateReactions, query };
+  return {
+    reactions,
+    reactionsGroupedByContent,
+    isReactedBy,
+    isReactedByWithEmoji,
+    invalidateReactions,
+    query,
+  };
 };
 
 export const useReposts = (propsProvider: () => UseRepostsProps): UseReposts => {