From 9db117e270eb0fa165a45b70d5ea34ccb515c92e Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Mon, 27 Nov 2023 15:31:45 +0200
Subject: [PATCH] goToEvent target handling

---
 .../app/src/Element/Event/NoteContextMenu.tsx |  2 +-
 packages/app/src/Element/Event/NoteFooter.tsx |  2 +-
 packages/app/src/Element/Event/NoteInner.tsx  | 23 +++++++++++++------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/Element/Event/NoteContextMenu.tsx b/packages/app/src/Element/Event/NoteContextMenu.tsx
index 61c18a38..bc29c7be 100644
--- a/packages/app/src/Element/Event/NoteContextMenu.tsx
+++ b/packages/app/src/Element/Event/NoteContextMenu.tsx
@@ -200,7 +200,7 @@ export function NoteContextMenu({ ev, ...props }: NosteContextMenuProps) {
     <>
       <Menu
         menuButton={
-          <div className="reaction-pill">
+          <div className="reaction-pill cursor-pointer">
             <Icon name="dots" size={15} />
           </div>
         }
diff --git a/packages/app/src/Element/Event/NoteFooter.tsx b/packages/app/src/Element/Event/NoteFooter.tsx
index 460e91f4..5ba905ac 100644
--- a/packages/app/src/Element/Event/NoteFooter.tsx
+++ b/packages/app/src/Element/Event/NoteFooter.tsx
@@ -316,7 +316,7 @@ const AsyncFooterIcon = forwardRef((props: AsyncIconProps & { value: number }, r
   const mergedProps = {
     ...props,
     iconSize: 18,
-    className: classNames("transition duration-200 ease-in-out reaction-pill", props.className),
+    className: classNames("transition duration-200 ease-in-out reaction-pill cursor-pointer", props.className),
   };
 
   return (
diff --git a/packages/app/src/Element/Event/NoteInner.tsx b/packages/app/src/Element/Event/NoteInner.tsx
index 7c456f48..58ed53df 100644
--- a/packages/app/src/Element/Event/NoteInner.tsx
+++ b/packages/app/src/Element/Event/NoteInner.tsx
@@ -177,15 +177,24 @@ export function NoteInner(props: NoteProps) {
     return innerContent;
   };
 
-  function goToEvent(
-    e: React.MouseEvent,
-    eTarget: TaggedNostrEvent,
-    isTargetAllowed: boolean = e.target === e.currentTarget,
-  ) {
-    if (!isTargetAllowed || opt?.canClick === false) {
+  function goToEvent(e: React.MouseEvent, eTarget: TaggedNostrEvent) {
+    if (opt?.canClick === false) {
       return;
     }
 
+    let target = e.target as HTMLElement | null;
+    while (target) {
+      if (
+        target.tagName === "A" ||
+        target.tagName === "BUTTON" ||
+        target.classList.contains("reaction-pill") ||
+        target.classList.contains("szh-menu-container")
+      ) {
+        return; // is there a better way to do this?
+      }
+      target = target.parentElement;
+    }
+
     e.stopPropagation();
     if (props.onClick) {
       props.onClick(eTarget);
@@ -355,7 +364,7 @@ export function NoteInner(props: NoteProps) {
           {translation()}
           {pollOptions()}
           {options.showReactionsLink && (
-            <div className="reactions-link" onClick={() => setShowReactions(true)}>
+            <div className="reactions-link cursor-pointer" onClick={() => setShowReactions(true)}>
               <FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />
             </div>
           )}