group msgs by thread root, show total likes count

src/js/components/events/Like.js

@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react';
 import { html } from 'htm/preact';
+import { route } from 'preact-router';
 
 import Helpers from '../../Helpers';
 import Icons from '../../Icons';
@@ -6,8 +8,28 @@ import Events from '../../nostr/Events';
 import Key from '../../nostr/Key';
 import Name from '../Name';
 
+const messageClicked = (e, likedId) => {
+  if (['A', 'BUTTON', 'TEXTAREA', 'IMG', 'INPUT'].find((tag) => e.target.closest(tag))) {
+    return;
+  }
+  if (window.getSelection().toString()) {
+    return;
+  }
+  e.stopPropagation();
+  route(`/${Key.toNostrBech32Address(likedId, 'note')}`);
+};
+
 export default function Like(props) {
-  const likedId = props.event.tags?.reverse().find((t) => t[0] === 'e')[1];
+  const [allLikes, setAllLikes] = useState([]);
+  const likedId = Events.getEventReplyingTo(props.event);
+
+  useEffect(() => {
+    const unsub = Events.getRepliesAndReactions(likedId, (_replies, likedBy) => {
+      setAllLikes(Array.from(likedBy));
+    });
+    return () => unsub();
+  });
+
   const likedEvent = Events.cache.get(likedId);
   let text = likedEvent?.content;
   if (text && text.length > 50) {
@@ -18,8 +40,8 @@ export default function Like(props) {
   const link = `/${Key.toNostrBech32Address(likedId, 'note')}`;
   const userLink = `/${Key.toNostrBech32Address(props.event.pubkey, 'npub')}`;
   return html`
-    <div class="msg">
-      <div class="msg-content" onClick=${(e) => this.messageClicked(e)}>
+    <div class="msg" key=${props.event.id}>
+      <div class="msg-content" onClick=${(e) => messageClicked(e, likedId)}>
         <div
           style="display: flex; align-items: center; flex-basis: 100%; white-space: nowrap;text-overflow: ellipsis; overflow:hidden"
         >
@@ -27,11 +49,10 @@ export default function Like(props) {
           <a href=${userLink} style="margin-right: 5px;">
             <${Name} pub=${props.event.pubkey} userNameOnly=${true} />
           </a>
-          <span>
-            liked your <a href=${link}>note</a> ${text && text.length
-              ? html`<i>"${text}"</i>`
-              : ''}</span
-          >
+          ${allLikes.length > 1 && html` and ${allLikes.length - 1} others `} liked your
+          <a href=${link} class="mar-left5">note</a> ${text && text.length
+            ? html`<i>"${text}"</i>`
+            : ''}
         </div>
       </div>
     </div>

src/js/components/events/Note.js

@@ -347,7 +347,7 @@ class Note extends Component {
       timeStyle: 'short',
     });
 
-    let rootMsg = this.props.event?.tags.find((t) => t[0] === 'e' && t[3] === 'root')?.[1];
+    let rootMsg = Events.getEventRoot(this.props.event);
     if (!rootMsg) {
       rootMsg = this.props.meta.replyingTo;
     }

src/js/nostr/Events.ts

@@ -646,6 +646,9 @@ const Events = {
     }
     return muted;
   },
+  getEventRoot(event: Event) {
+    return event?.tags.find((t) => t[0] === 'e' && t[3] === 'root')?.[1];
+  },
   maybeAddNotification(event: Event) {
     // if we're mentioned in tags, add to notifications
     if (event.tags?.filter((tag) => tag[0] === 'p').length > 10) {
@@ -664,7 +667,7 @@ const Events = {
       }
       if (!this.isMuted(event)) {
         this.cache.set(event.id, event);
-        const target = this.getEventReplyingTo(event) || event.id; // TODO get thread root instead
+        const target = this.getEventRoot(event) || this.getEventReplyingTo(event) || event.id; // TODO get thread root instead
         const key = `${event.kind}-${target}`;
         const existing = this.latestNotificationByTargetAndKind.get(key); // also latestNotificationByAuthor?
         if (!existing || existing.created_at < event.created_at) {