feat: highlight reply button in blue when user has replied

src/components/NoteStats/ReplyButton.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import { useReply } from '@/providers/ReplyProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
@@ -10,21 +11,31 @@ import { formatCount } from './utils'
 
 export default function ReplyButton({ event }: { event: Event }) {
   const { t } = useTranslation()
-  const { checkLogin } = useNostr()
+  const { pubkey, checkLogin } = useNostr()
   const { repliesMap } = useReply()
   const { hideUntrustedInteractions, isUserTrusted } = useUserTrust()
-  const replyCount = useMemo(() => {
+  const { replyCount, hasReplied } = useMemo(() => {
+    const hasReplied = pubkey
+      ? repliesMap.get(event.id)?.events.some((evt) => evt.pubkey === pubkey)
+      : false
     if (hideUntrustedInteractions) {
-      return repliesMap.get(event.id)?.events.filter((evt) => isUserTrusted(evt.pubkey)).length ?? 0
+      return {
+        replyCount:
+          repliesMap.get(event.id)?.events.filter((evt) => isUserTrusted(evt.pubkey)).length ?? 0,
+        hasReplied
       }
-    return repliesMap.get(event.id)?.events.length ?? 0
+    }
+    return { replyCount: repliesMap.get(event.id)?.events.length ?? 0, hasReplied }
   }, [repliesMap, event.id, hideUntrustedInteractions])
   const [open, setOpen] = useState(false)
 
   return (
     <>
       <button
-        className="flex gap-1 items-center text-muted-foreground enabled:hover:text-blue-400 pr-3 h-full"
+        className={cn(
+          'flex gap-1 items-center enabled:hover:text-blue-400 pr-3 h-full',
+          hasReplied ? 'text-blue-400' : 'text-muted-foreground'
+        )}
         onClick={(e) => {
           e.stopPropagation()
           checkLogin(() => {