From a7e3c41b92e706b3feae4db2188431d6947b6f5a Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Wed, 28 Aug 2024 14:57:06 +0400
Subject: [PATCH] Highlight own reactions (#6418)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 .../src/components/reactions/Reactions.svelte | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/plugins/activity-resources/src/components/reactions/Reactions.svelte b/plugins/activity-resources/src/components/reactions/Reactions.svelte
index b2af83de4d..7df064d594 100644
--- a/plugins/activity-resources/src/components/reactions/Reactions.svelte
+++ b/plugins/activity-resources/src/components/reactions/Reactions.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import { Reaction } from '@hcengineering/activity'
-  import { Account, Doc, Ref } from '@hcengineering/core'
+  import { Account, Doc, getCurrentAccount, Ref } from '@hcengineering/core'
   import { EmojiPopup, IconAdd, showPopup, tooltip } from '@hcengineering/ui'
   import { getClient } from '@hcengineering/presentation'
 
@@ -28,18 +28,20 @@
 
   const dispatch = createEventDispatcher()
   const client = getClient()
+  const me = getCurrentAccount()
 
   let reactionsAccounts = new Map<string, Ref<Account>[]>()
+
   $: {
     reactionsAccounts.clear()
     reactions.forEach((r) => {
-      let accounts = reactionsAccounts.get(r.emoji)
-      accounts = accounts ? [...accounts, r.createBy] : [r.createBy]
-      reactionsAccounts.set(r.emoji, accounts)
+      const accounts = reactionsAccounts.get(r.emoji) ?? []
+      reactionsAccounts.set(r.emoji, [...accounts, r.createBy])
     })
     reactionsAccounts = reactionsAccounts
   }
-  function getClickHandler (emoji: string) {
+
+  function getClickHandler (emoji: string): ((e: CustomEvent) => void) | undefined {
     if (readonly) return
     return (e: CustomEvent) => {
       e.stopPropagation()
@@ -48,12 +50,12 @@
     }
   }
 
-  function openEmojiPalette (ev: Event) {
+  function openEmojiPalette (ev: Event): void {
     if (readonly) return
     ev.preventDefault()
     ev.stopPropagation()
-    showPopup(EmojiPopup, {}, ev.target as HTMLElement, (emoji: string) => {
-      updateDocReactions(client, reactions, object, emoji)
+    showPopup(EmojiPopup, {}, ev.target as HTMLElement, async (emoji: string) => {
+      await updateDocReactions(client, reactions, object, emoji)
     })
   }
 </script>
@@ -64,12 +66,13 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="item border-radius-1"
+      class:highlight={accounts.includes(me._id)}
       class:cursor-pointer={!readonly}
       use:tooltip={{ component: ReactionsTooltip, props: { reactionAccounts: accounts } }}
       on:click={getClickHandler(emoji)}
     >
       <div class="flex-row-center">
-        <div>{emoji}</div>
+        {emoji}
         <div class="caption-color counter">{accounts.length}</div>
       </div>
     </div>
@@ -108,8 +111,18 @@
     border: none;
     cursor: pointer;
 
+    &.highlight {
+      background: var(--global-ui-highlight-BackgroundColor);
+      border: 1px solid var(--global-accent-BackgroundColor);
+    }
+
     &:hover {
       background: var(--global-ui-highlight-BackgroundColor);
+      border: 1px solid var(--global-popover-ShadowColor);
+
+      &.highlight {
+        border: 1px solid var(--global-accent-BackgroundColor);
+      }
     }
 
     &.withoutBackground {