From 87d1241e85102cd3fefd970fe950119ff0dc04eb Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Tue, 16 Apr 2024 15:31:03 +0200
Subject: [PATCH] Open reactions modal on reaction summary

---
 src/components/Note/Note.module.scss | 18 ++++++++++++++++++
 src/components/Note/Note.tsx         | 25 +++++++++++++++----------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
index a7d4d89..2235aeb 100644
--- a/src/components/Note/Note.module.scss
+++ b/src/components/Note/Note.module.scss
@@ -302,12 +302,30 @@
           content: ' · ';
         }
 
+        background: none;
+        margin: 0;
+        padding: 0;
+        margin-left: 4px;
+        display: inline-block;
+        width: fit-content;
+        outline: none;
+        border: none;
+
+        color: var(--text-tertiary);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 16px;
+
         .number {
           color: var(--text-primary);
           font-size: 16px;
           font-weight: 600;
           line-height: 16px;
         }
+
+        &:hover {
+          color: var(--text-primary);
+        }
       }
     }
   }
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index d2d9039..f4cd00f 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -129,6 +129,15 @@ const Note: Component<{
     onCancel: onCancelZap,
   };
 
+  const openReationModal = () =>  {
+    app?.actions.openReactionModal(props.note.post.id, {
+      likes: footerState.likes,
+      zaps: footerState.zapCount,
+      reposts: footerState.reposts,
+      quotes: 0,
+    });
+  };
+
   const onContextMenuTrigger = () => {
     app?.actions.openContextMenu(
       props.note,
@@ -136,14 +145,7 @@ const Note: Component<{
       () => {
         app?.actions.openCustomZapModal(customZapInfo);
       },
-      () => {
-        app?.actions.openReactionModal(props.note.post.id, {
-          likes: footerState.likes,
-          zaps: footerState.zapCount,
-          reposts: footerState.reposts,
-          quotes: 0,
-        });
-      }
+      openReationModal,
     );
   }
 
@@ -214,9 +216,12 @@ const Note: Component<{
               <span>
                 {veryLongDate(props.note.post?.created_at).replace('at', '·')}
               </span>
-              <span class={styles.reactSummary}>
+              <button
+                class={styles.reactSummary}
+                onClick={openReationModal}
+              >
                 <span class={styles.number}>{reactionSum()}</span> Reactions
-              </span>
+              </button>
             </div>
 
             <NoteFooter