From bd9a261c04ead1aa4c6ab1adaf2bd229314b44a1 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Mon, 1 Apr 2024 10:57:56 -0300
Subject: [PATCH 01/27] init

---
 src/services/DiscussionMessage.ts             | 34 ++++++-----
 .../Chat/ChatMessage/ChatMessage.tsx          |  5 +-
 .../ReactWithEmoji/ReactWithEmoji.tsx         |  4 +-
 .../components/Reactions/Reactions.tsx        | 56 ++++++++++++++++++-
 src/shared/hooks/useCases/useUserReaction.ts  | 25 +++++----
 5 files changed, 94 insertions(+), 30 deletions(-)

diff --git a/src/services/DiscussionMessage.ts b/src/services/DiscussionMessage.ts
index f1b859a95..647fe04af 100644
--- a/src/services/DiscussionMessage.ts
+++ b/src/services/DiscussionMessage.ts
@@ -185,20 +185,28 @@ class DiscussionMessageService {
     await Api.post(ApiEndpoint.DeleteDiscussionMessageReaction, payload);
   };
 
-  public getUserReaction = async (
+  public getUsersReactions = async (
     discussionMsgId: string,
-    userId: string,
-  ): Promise<UserReaction | null> =>
-    (
-      await firebase
-        .firestore()
-        .collection(Collection.DiscussionMessage)
-        .doc(discussionMsgId)
-        .collection(Collection.Reactions)
-        .withConverter(getUserReactionConverter)
-        .doc(userId)
-        .get()
-    ).data() || null;
+    userId?: string,
+    fetchAll?: boolean,
+  ): Promise<UserReaction[] | null | undefined> => {
+    const reactionsRef = firebase
+      .firestore()
+      .collection(Collection.DiscussionMessage)
+      .doc(discussionMsgId)
+      .collection(Collection.Reactions)
+      .withConverter(getUserReactionConverter);
+
+    if (fetchAll) {
+      const snapshot = await reactionsRef.get();
+      const reactions = snapshot.docs.map((doc) => doc.data());
+      return reactions;
+    }
+
+    const doc = await reactionsRef.doc(userId).get();
+    const reaction = doc.exists ? doc.data() : null;
+    return reaction ? [reaction] : null;
+  };
 }
 
 export default new DiscussionMessageService();
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
index ce780d200..3ee5ee28a 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -556,7 +556,10 @@ export default function ChatMessage({
                 )}
 
                 {!isSystemMessage && isUserDiscussionMessage && (
-                  <Reactions reactions={discussionMessage.reactionCounts} />
+                  <Reactions
+                    reactions={discussionMessage.reactionCounts}
+                    discussionMessageId={discussionMessage.id}
+                  />
                 )}
               </div>
             </>
diff --git a/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx b/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
index 64055bb58..35c3b3929 100644
--- a/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
@@ -58,7 +58,7 @@ export const ReactWithEmoji: FC<ReactWithEmojiProps> = (props) => {
   const { isOutside, setOutsideValue } = useOutsideClick(wrapperRef);
   const { reactToDiscussionMessage } = useDiscussionMessageReaction();
   const { reactToChatMessage } = useChatMessageReaction();
-  const { getUserReaction, getDMUserReaction } = useUserReaction();
+  const { getUserReaction, getDMUserReaction } = useUserReaction({});
 
   useEffect(() => {
     if (isOutside) {
@@ -76,7 +76,7 @@ export const ReactWithEmoji: FC<ReactWithEmojiProps> = (props) => {
         const userReaction = await getUserReaction(discussionMessageId);
 
         if (isMounted) {
-          setUserReaction(userReaction);
+          setUserReaction(userReaction?.[0]);
         }
       } else if (chatMessageId && chatChannelId) {
         const userReaction = await getDMUserReaction(
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
index 5271a69c1..d4d06af88 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
@@ -1,14 +1,64 @@
-import React, { FC } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { isEmpty } from "lodash";
-import { ReactionCounts } from "@/shared/models";
+import { useUserReaction, useUsersByIds } from "@/shared/hooks/useCases";
+import { ReactionCounts, UserReaction } from "@/shared/models";
 import styles from "./Reactions.module.scss";
 
 interface ReactionsProps {
   reactions?: ReactionCounts | null;
+  discussionMessageId?: string;
 }
 
 export const Reactions: FC<ReactionsProps> = (props) => {
-  const { reactions } = props;
+  const { reactions, discussionMessageId } = props;
+  const { getUserReaction } = useUserReaction({ fetchAll: true });
+  const { fetchUsers, data: users } = useUsersByIds();
+  const [usersReactions, setUsersReactions] = useState<
+    UserReaction[] | null | undefined
+  >(null);
+
+  if (usersReactions) {
+    console.log(usersReactions);
+  }
+
+  if (users) {
+    console.log(users);
+  }
+
+  useEffect(() => {
+    let isMounted = true;
+
+    (async () => {
+      if (discussionMessageId) {
+        const usersReactions = await getUserReaction(discussionMessageId);
+
+        if (isMounted) {
+          setUsersReactions(usersReactions as UserReaction[]);
+        }
+      }
+
+      // else if (chatMessageId && chatChannelId) {
+      //   const userReaction = await getDMUserReaction(
+      //     chatMessageId,
+      //     chatChannelId,
+      //   );
+
+      //   if (isMounted) {
+      //     setUserReaction(userReaction);
+      //   }
+      // }
+    })();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [discussionMessageId]); // , chatMessageId, chatChannelId
+
+  useEffect(() => {
+    if (usersReactions) {
+      fetchUsers(usersReactions.map((user) => user.userId));
+    }
+  }, [usersReactions]);
 
   if (!reactions || isEmpty(reactions)) {
     return null;
diff --git a/src/shared/hooks/useCases/useUserReaction.ts b/src/shared/hooks/useCases/useUserReaction.ts
index b62de5e1f..6e8e5c23f 100644
--- a/src/shared/hooks/useCases/useUserReaction.ts
+++ b/src/shared/hooks/useCases/useUserReaction.ts
@@ -7,28 +7,31 @@ import { UserReaction } from "@/shared/models";
 interface Return {
   getUserReaction: (
     discussionMessageId: string,
-  ) => Promise<UserReaction | null | undefined>;
+  ) => Promise<UserReaction[] | null | undefined>;
   getDMUserReaction: (
     chatMessageId: string,
     chatChannelId: string,
   ) => Promise<UserReaction | null | undefined>;
 }
 
-export const useUserReaction = (): Return => {
+interface Options {
+  fetchAll?: boolean;
+}
+
+export const useUserReaction = ({ fetchAll }: Options): Return => {
   const user = useSelector(selectUser());
   const userId = user?.uid;
 
   const getUserReaction = useCallback(
     async (discussionMessageId: string) => {
-      if (userId) {
-        try {
-          return await DiscussionMessageService.getUserReaction(
-            discussionMessageId,
-            userId,
-          );
-        } catch (error) {
-          Logger.error(error);
-        }
+      try {
+        return await DiscussionMessageService.getUsersReactions(
+          discussionMessageId,
+          userId,
+          fetchAll,
+        );
+      } catch (error) {
+        Logger.error(error);
       }
     },
     [userId],

From 358d5e643a491838f942fc025504ed86905c6fc6 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Mon, 1 Apr 2024 14:59:17 -0300
Subject: [PATCH 02/27] init 2

---
 .../Reactions/Reactions.module.scss           | 31 +++++++++++++
 .../components/Reactions/Reactions.tsx        | 46 ++++++++++++++-----
 2 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
index f64db1b4e..03690c8ba 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
@@ -13,3 +13,34 @@
 .totalCount {
   margin-right: 0.25rem;
 }
+
+.reactionsTooltipTrigger {
+  border: none;
+  background-color: var(--secondary-background);
+}
+
+.reactionsTooltipContent {
+  z-index: 999;
+  min-width: 1rem;
+  min-height: 1rem;
+  background-color: var(--primary-background);
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  margin: 0.5rem 0;
+  //border: 0.0625rem solid var(--gentle-stroke);
+}
+
+.userAvatar {
+  margin-right: 0.5rem;
+}
+
+.listUsername {
+  margin-right: 0.5rem;
+}
+
+.listItemEmoji {
+  margin-left: auto;
+}
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
index d4d06af88..a0e3076df 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
@@ -1,7 +1,9 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useMemo, useState } from "react";
 import { isEmpty } from "lodash";
+import { UserAvatar } from "@/shared/components/UserAvatar";
 import { useUserReaction, useUsersByIds } from "@/shared/hooks/useCases";
 import { ReactionCounts, UserReaction } from "@/shared/models";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit";
 import styles from "./Reactions.module.scss";
 
 interface ReactionsProps {
@@ -12,19 +14,11 @@ interface ReactionsProps {
 export const Reactions: FC<ReactionsProps> = (props) => {
   const { reactions, discussionMessageId } = props;
   const { getUserReaction } = useUserReaction({ fetchAll: true });
-  const { fetchUsers, data: users } = useUsersByIds();
+  const { fetchUsers, data: users, fetched } = useUsersByIds();
   const [usersReactions, setUsersReactions] = useState<
     UserReaction[] | null | undefined
   >(null);
 
-  if (usersReactions) {
-    console.log(usersReactions);
-  }
-
-  if (users) {
-    console.log(users);
-  }
-
   useEffect(() => {
     let isMounted = true;
 
@@ -52,7 +46,7 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     return () => {
       isMounted = false;
     };
-  }, [discussionMessageId]); // , chatMessageId, chatChannelId
+  }, [discussionMessageId, reactions]); // , chatMessageId, chatChannelId
 
   useEffect(() => {
     if (usersReactions) {
@@ -74,12 +68,40 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     .filter((key) => reactions[key] > 0)
     .map((emoji, index) => <span key={index}>{emoji}</span>);
 
+  const list = useMemo(() => {
+    if (users) {
+      return users.map((user) => {
+        const userReaction = usersReactions?.find(
+          (elem) => elem.userId === user.uid,
+        )?.emoji;
+        return (
+          <div className={styles.listItem}>
+            <UserAvatar
+              photoURL={user.photoURL}
+              className={styles.userAvatar}
+            />
+            <span className={styles.listUsername}>{user.displayName}</span>
+            <span className={styles.listItemEmoji}>{userReaction}</span>
+          </div>
+        );
+      });
+    }
+  }, [users, usersReactions]);
+
   return (
     <div className={styles.container}>
       {totalCount > 1 && (
         <span className={styles.totalCount}>{totalCount}</span>
       )}
-      {emojis}
+      <Tooltip>
+        <TooltipTrigger className={styles.reactionsTooltipTrigger}>
+          {emojis}
+        </TooltipTrigger>
+        <TooltipContent className={styles.reactionsTooltipContent}>
+          {!fetched && !users && "Loading..."}
+          {fetched && list}
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 };

From 4579d95a7d84c52e2e2592c741263d9de46476a7 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Mon, 1 Apr 2024 15:10:08 -0300
Subject: [PATCH 03/27] init 3

---
 src/services/Chat.ts                          | 34 ++++++++++++-------
 .../Chat/ChatMessage/DMChatMessage.tsx        |  6 +++-
 .../ReactWithEmoji/ReactWithEmoji.tsx         |  2 +-
 .../Reactions/Reactions.module.scss           |  1 +
 .../components/Reactions/Reactions.tsx        | 31 +++++++++--------
 src/shared/hooks/useCases/useUserReaction.ts  |  3 +-
 6 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/services/Chat.ts b/src/services/Chat.ts
index 62582b5fb..01762d291 100644
--- a/src/services/Chat.ts
+++ b/src/services/Chat.ts
@@ -434,19 +434,27 @@ class ChatService {
     chatMessageId: string,
     chatChannelId: string,
     userId: string,
-  ): Promise<UserReaction | null> =>
-    (
-      await firebase
-        .firestore()
-        .collection(Collection.ChatChannel)
-        .doc(chatChannelId)
-        .collection(SubCollections.ChatMessages)
-        .doc(chatMessageId)
-        .collection(Collection.Reactions)
-        .withConverter(getUserReactionConverter)
-        .doc(userId)
-        .get()
-    ).data() || null;
+    fetchAll?: boolean,
+  ): Promise<UserReaction[] | null> => {
+    const reactionsRef = firebase
+      .firestore()
+      .collection(Collection.ChatChannel)
+      .doc(chatChannelId)
+      .collection(SubCollections.ChatMessages)
+      .doc(chatMessageId)
+      .collection(Collection.Reactions)
+      .withConverter(getUserReactionConverter);
+
+    if (fetchAll) {
+      const snapshot = await reactionsRef.get();
+      const reactions = snapshot.docs.map((doc) => doc.data());
+      return reactions;
+    }
+
+    const doc = await reactionsRef.doc(userId).get();
+    const reaction = doc.exists ? doc.data() : null;
+    return reaction ? [reaction] : null;
+  };
 }
 
 export default new ChatService();
diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
index 78b8c93b4..59a10bceb 100644
--- a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -598,7 +598,11 @@ export default function DMChatMessage({
                 )}
 
                 {isUserDiscussionMessage && (
-                  <Reactions reactions={finalReactionCounts} />
+                  <Reactions
+                    reactions={finalReactionCounts}
+                    chatMessageId={discussionMessage.id}
+                    chatChannelId={chatChannelId}
+                  />
                 )}
               </div>
             </>
diff --git a/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx b/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
index 35c3b3929..7b7f96e1d 100644
--- a/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
@@ -85,7 +85,7 @@ export const ReactWithEmoji: FC<ReactWithEmojiProps> = (props) => {
         );
 
         if (isMounted) {
-          setUserReaction(userReaction);
+          setUserReaction(userReaction?.[0]);
         }
       }
     })();
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
index 03690c8ba..16439885a 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
@@ -24,6 +24,7 @@
   min-width: 1rem;
   min-height: 1rem;
   background-color: var(--primary-background);
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
 }
 
 .listItem {
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
index a0e3076df..7e51f019f 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
@@ -9,11 +9,16 @@ import styles from "./Reactions.module.scss";
 interface ReactionsProps {
   reactions?: ReactionCounts | null;
   discussionMessageId?: string;
+  chatMessageId?: string;
+  chatChannelId?: string;
 }
 
 export const Reactions: FC<ReactionsProps> = (props) => {
-  const { reactions, discussionMessageId } = props;
-  const { getUserReaction } = useUserReaction({ fetchAll: true });
+  const { reactions, discussionMessageId, chatMessageId, chatChannelId } =
+    props;
+  const { getUserReaction, getDMUserReaction } = useUserReaction({
+    fetchAll: true,
+  });
   const { fetchUsers, data: users, fetched } = useUsersByIds();
   const [usersReactions, setUsersReactions] = useState<
     UserReaction[] | null | undefined
@@ -29,24 +34,22 @@ export const Reactions: FC<ReactionsProps> = (props) => {
         if (isMounted) {
           setUsersReactions(usersReactions as UserReaction[]);
         }
-      }
-
-      // else if (chatMessageId && chatChannelId) {
-      //   const userReaction = await getDMUserReaction(
-      //     chatMessageId,
-      //     chatChannelId,
-      //   );
+      } else if (chatMessageId && chatChannelId) {
+        const userReaction = await getDMUserReaction(
+          chatMessageId,
+          chatChannelId,
+        );
 
-      //   if (isMounted) {
-      //     setUserReaction(userReaction);
-      //   }
-      // }
+        if (isMounted) {
+          setUsersReactions(userReaction as UserReaction[]);
+        }
+      }
     })();
 
     return () => {
       isMounted = false;
     };
-  }, [discussionMessageId, reactions]); // , chatMessageId, chatChannelId
+  }, [discussionMessageId, chatMessageId, chatChannelId, reactions]);
 
   useEffect(() => {
     if (usersReactions) {
diff --git a/src/shared/hooks/useCases/useUserReaction.ts b/src/shared/hooks/useCases/useUserReaction.ts
index 6e8e5c23f..27da17d5c 100644
--- a/src/shared/hooks/useCases/useUserReaction.ts
+++ b/src/shared/hooks/useCases/useUserReaction.ts
@@ -11,7 +11,7 @@ interface Return {
   getDMUserReaction: (
     chatMessageId: string,
     chatChannelId: string,
-  ) => Promise<UserReaction | null | undefined>;
+  ) => Promise<UserReaction[] | null | undefined>;
 }
 
 interface Options {
@@ -45,6 +45,7 @@ export const useUserReaction = ({ fetchAll }: Options): Return => {
             chatMessageId,
             chatChannelId,
             userId,
+            fetchAll,
           );
         } catch (error) {
           Logger.error(error);

From e6a44f18aa10e22257475d3f38efdd2d3f7d925f Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Mon, 1 Apr 2024 19:19:25 -0300
Subject: [PATCH 04/27] finlaize

---
 .../ChatMessage/components/Reactions/Reactions.module.scss | 7 +++++--
 .../Chat/ChatMessage/components/Reactions/Reactions.tsx    | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
index 16439885a..58e44ea54 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
@@ -25,17 +25,20 @@
   min-height: 1rem;
   background-color: var(--primary-background);
   box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+  padding: 0;
 }
 
 .listItem {
   display: flex;
   align-items: center;
-  margin: 0.5rem 0;
-  //border: 0.0625rem solid var(--gentle-stroke);
+  padding: 0.5rem 0;
+  border-bottom: 0.0625rem solid var(--gentle-stroke);
 }
 
 .userAvatar {
   margin-right: 0.5rem;
+  width: 2rem;
+  height: 2rem;
 }
 
 .listUsername {
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
index 7e51f019f..71366a5cc 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
@@ -32,7 +32,7 @@ export const Reactions: FC<ReactionsProps> = (props) => {
         const usersReactions = await getUserReaction(discussionMessageId);
 
         if (isMounted) {
-          setUsersReactions(usersReactions as UserReaction[]);
+          setUsersReactions(usersReactions);
         }
       } else if (chatMessageId && chatChannelId) {
         const userReaction = await getDMUserReaction(
@@ -41,7 +41,7 @@ export const Reactions: FC<ReactionsProps> = (props) => {
         );
 
         if (isMounted) {
-          setUsersReactions(userReaction as UserReaction[]);
+          setUsersReactions(userReaction);
         }
       }
     })();

From b4af19026cdf9556f04a77a7cfaec124e3a25548 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Tue, 2 Apr 2024 16:24:00 -0300
Subject: [PATCH 05/27] use chat users instead of using the hook to get them

---
 .../Chat/ChatMessage/ChatMessage.tsx          |  1 +
 .../Chat/ChatMessage/DMChatMessage.tsx        |  1 +
 .../components/Reactions/Reactions.tsx        | 59 ++++++++++---------
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
index 3ee5ee28a..24d69f95c 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -559,6 +559,7 @@ export default function ChatMessage({
                   <Reactions
                     reactions={discussionMessage.reactionCounts}
                     discussionMessageId={discussionMessage.id}
+                    users={users}
                   />
                 )}
               </div>
diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
index 59a10bceb..c41099330 100644
--- a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -602,6 +602,7 @@ export default function DMChatMessage({
                     reactions={finalReactionCounts}
                     chatMessageId={discussionMessage.id}
                     chatChannelId={chatChannelId}
+                    users={users}
                   />
                 )}
               </div>
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
index 71366a5cc..d10d64c72 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
@@ -1,8 +1,10 @@
 import React, { FC, useEffect, useMemo, useState } from "react";
+import { useSelector } from "react-redux";
 import { isEmpty } from "lodash";
+import { selectUser } from "@/pages/Auth/store/selectors";
 import { UserAvatar } from "@/shared/components/UserAvatar";
-import { useUserReaction, useUsersByIds } from "@/shared/hooks/useCases";
-import { ReactionCounts, UserReaction } from "@/shared/models";
+import { useUserReaction } from "@/shared/hooks/useCases";
+import { ReactionCounts, User, UserReaction } from "@/shared/models";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit";
 import styles from "./Reactions.module.scss";
 
@@ -11,15 +13,22 @@ interface ReactionsProps {
   discussionMessageId?: string;
   chatMessageId?: string;
   chatChannelId?: string;
+  users?: User[];
 }
 
 export const Reactions: FC<ReactionsProps> = (props) => {
-  const { reactions, discussionMessageId, chatMessageId, chatChannelId } =
-    props;
+  const {
+    reactions,
+    discussionMessageId,
+    chatMessageId,
+    chatChannelId,
+    users,
+  } = props;
+  const currentUser = useSelector(selectUser());
+
   const { getUserReaction, getDMUserReaction } = useUserReaction({
     fetchAll: true,
   });
-  const { fetchUsers, data: users, fetched } = useUsersByIds();
   const [usersReactions, setUsersReactions] = useState<
     UserReaction[] | null | undefined
   >(null);
@@ -51,12 +60,6 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     };
   }, [discussionMessageId, chatMessageId, chatChannelId, reactions]);
 
-  useEffect(() => {
-    if (usersReactions) {
-      fetchUsers(usersReactions.map((user) => user.userId));
-    }
-  }, [usersReactions]);
-
   if (!reactions || isEmpty(reactions)) {
     return null;
   }
@@ -71,22 +74,25 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     .filter((key) => reactions[key] > 0)
     .map((emoji, index) => <span key={index}>{emoji}</span>);
 
-  const list = useMemo(() => {
-    if (users) {
-      return users.map((user) => {
-        const userReaction = usersReactions?.find(
+  const usersList = useMemo(() => {
+    if (users && usersReactions && currentUser) {
+      return [...users, currentUser].map((user, index) => {
+        const userReaction = usersReactions.find(
           (elem) => elem.userId === user.uid,
         )?.emoji;
-        return (
-          <div className={styles.listItem}>
-            <UserAvatar
-              photoURL={user.photoURL}
-              className={styles.userAvatar}
-            />
-            <span className={styles.listUsername}>{user.displayName}</span>
-            <span className={styles.listItemEmoji}>{userReaction}</span>
-          </div>
-        );
+
+        if (userReaction) {
+          return (
+            <div key={index} className={styles.listItem}>
+              <UserAvatar
+                photoURL={user.photoURL}
+                className={styles.userAvatar}
+              />
+              <span className={styles.listUsername}>{user.displayName}</span>
+              <span className={styles.listItemEmoji}>{userReaction}</span>
+            </div>
+          );
+        }
       });
     }
   }, [users, usersReactions]);
@@ -101,8 +107,7 @@ export const Reactions: FC<ReactionsProps> = (props) => {
           {emojis}
         </TooltipTrigger>
         <TooltipContent className={styles.reactionsTooltipContent}>
-          {!fetched && !users && "Loading..."}
-          {fetched && list}
+          {usersList ? usersList : "Loading..."}
         </TooltipContent>
       </Tooltip>
     </div>

From de007156e7950930e13ce56cdbeb4cd8056aafd5 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Fri, 5 Apr 2024 18:04:08 -0300
Subject: [PATCH 06/27] tooltip trigger is now by click and not hover ; code
 review updates

---
 .../Reactions/Reactions.module.scss           |   1 +
 .../components/Reactions/Reactions.tsx        | 100 ++++++++++++------
 2 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
index 58e44ea54..6d06af0c0 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
@@ -17,6 +17,7 @@
 .reactionsTooltipTrigger {
   border: none;
   background-color: var(--secondary-background);
+  cursor: pointer;
 }
 
 .reactionsTooltipContent {
diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
index d10d64c72..2e9585e4b 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.tsx
@@ -1,8 +1,17 @@
-import React, { FC, useEffect, useMemo, useState } from "react";
+import React, {
+  FC,
+  MouseEventHandler,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useSelector } from "react-redux";
 import { isEmpty } from "lodash";
 import { selectUser } from "@/pages/Auth/store/selectors";
+import { Logger } from "@/services";
 import { UserAvatar } from "@/shared/components/UserAvatar";
+import { useOutsideClick } from "@/shared/hooks";
 import { useUserReaction } from "@/shared/hooks/useCases";
 import { ReactionCounts, User, UserReaction } from "@/shared/models";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui-kit";
@@ -25,6 +34,11 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     users,
   } = props;
   const currentUser = useSelector(selectUser());
+  const [isOpen, setIsOpen] = useState(false);
+  const reactionsListwrapperRef = useRef(null);
+  const { isOutside, setOutsideValue } = useOutsideClick(
+    reactionsListwrapperRef,
+  );
 
   const { getUserReaction, getDMUserReaction } = useUserReaction({
     fetchAll: true,
@@ -33,25 +47,36 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     UserReaction[] | null | undefined
   >(null);
 
+  useEffect(() => {
+    if (isOutside) {
+      setOutsideValue();
+      setIsOpen(false);
+    }
+  }, [isOutside]);
+
   useEffect(() => {
     let isMounted = true;
 
     (async () => {
-      if (discussionMessageId) {
-        const usersReactions = await getUserReaction(discussionMessageId);
+      try {
+        if (discussionMessageId) {
+          const usersReactions = await getUserReaction(discussionMessageId);
 
-        if (isMounted) {
-          setUsersReactions(usersReactions);
-        }
-      } else if (chatMessageId && chatChannelId) {
-        const userReaction = await getDMUserReaction(
-          chatMessageId,
-          chatChannelId,
-        );
-
-        if (isMounted) {
-          setUsersReactions(userReaction);
+          if (isMounted) {
+            setUsersReactions(usersReactions);
+          }
+        } else if (chatMessageId && chatChannelId) {
+          const userReaction = await getDMUserReaction(
+            chatMessageId,
+            chatChannelId,
+          );
+
+          if (isMounted) {
+            setUsersReactions(userReaction);
+          }
         }
+      } catch (error) {
+        Logger.error(error);
       }
     })();
 
@@ -60,20 +85,6 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     };
   }, [discussionMessageId, chatMessageId, chatChannelId, reactions]);
 
-  if (!reactions || isEmpty(reactions)) {
-    return null;
-  }
-
-  const totalCount = Object.values(reactions).reduce((a, b) => a + b, 0);
-
-  if (totalCount === 0) {
-    return null;
-  }
-
-  const emojis = Object.keys(reactions)
-    .filter((key) => reactions[key] > 0)
-    .map((emoji, index) => <span key={index}>{emoji}</span>);
-
   const usersList = useMemo(() => {
     if (users && usersReactions && currentUser) {
       return [...users, currentUser].map((user, index) => {
@@ -97,17 +108,42 @@ export const Reactions: FC<ReactionsProps> = (props) => {
     }
   }, [users, usersReactions]);
 
+  if (!reactions || isEmpty(reactions)) {
+    return null;
+  }
+
+  const totalCount = Object.values(reactions).reduce((a, b) => a + b, 0);
+
+  if (totalCount === 0) {
+    return null;
+  }
+
+  const emojis = Object.keys(reactions)
+    .filter((key) => reactions[key] > 0)
+    .map((emoji, index) => <span key={index}>{emoji}</span>);
+
+  const toggleReactionsListTooltip: MouseEventHandler = (event) => {
+    event.stopPropagation();
+    setIsOpen((v) => !v);
+  };
+
   return (
     <div className={styles.container}>
       {totalCount > 1 && (
         <span className={styles.totalCount}>{totalCount}</span>
       )}
-      <Tooltip>
-        <TooltipTrigger className={styles.reactionsTooltipTrigger}>
+      <Tooltip open={isOpen}>
+        <TooltipTrigger
+          onClick={toggleReactionsListTooltip}
+          className={styles.reactionsTooltipTrigger}
+        >
           {emojis}
         </TooltipTrigger>
-        <TooltipContent className={styles.reactionsTooltipContent}>
-          {usersList ? usersList : "Loading..."}
+        <TooltipContent
+          className={styles.reactionsTooltipContent}
+          ref={reactionsListwrapperRef}
+        >
+          {usersList || "Loading..."}
         </TooltipContent>
       </Tooltip>
     </div>

From 6abac43b1724b7ca235650faeb66ef4c872a1057 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Fri, 5 Apr 2024 18:16:57 -0300
Subject: [PATCH 07/27] fixes: Old palette remnant

---
 .../components/NoCommonsInfo/NoCommonsInfo.module.scss    | 1 +
 .../MultipleSpacesLayout/components/Menu/Menu.module.scss | 1 +
 .../components/SidenavContent/SidenavContent.module.scss  | 1 +
 .../ElementButton/components/LinkModal/LinkModal.tsx      | 8 ++++----
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss
index 27e90a266..cea1a76ed 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss
@@ -8,6 +8,7 @@
   margin: 0 0 1rem;
   padding: 0;
   text-align: center;
+  color: var(--primary-text);
 }
 
 .createCommonButton {
diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Menu/Menu.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Menu/Menu.module.scss
index 2c5cf8cad..cf7b0c4e0 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Menu/Menu.module.scss
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Menu/Menu.module.scss
@@ -11,6 +11,7 @@
   margin: 0 0 1rem;
   padding: 0;
   text-align: center;
+  color: var(--primary-text);
 }
 
 .createCommonButton {
diff --git a/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss
index e36860d34..d891d8abb 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss
+++ b/src/shared/layouts/MultipleSpacesLayout/components/SidenavContent/SidenavContent.module.scss
@@ -22,6 +22,7 @@
   margin: 0 0 1rem;
   padding: 0;
   text-align: center;
+  color: var(--primary-text);
 }
 
 .createCommonButton {
diff --git a/src/shared/ui-kit/TextEditor/components/ElementButton/components/LinkModal/LinkModal.tsx b/src/shared/ui-kit/TextEditor/components/ElementButton/components/LinkModal/LinkModal.tsx
index 1c0d9a67b..44e6f61b9 100644
--- a/src/shared/ui-kit/TextEditor/components/ElementButton/components/LinkModal/LinkModal.tsx
+++ b/src/shared/ui-kit/TextEditor/components/ElementButton/components/LinkModal/LinkModal.tsx
@@ -8,7 +8,7 @@ import React, {
 import { Editor } from "slate";
 import { Input } from "@/shared/components/Form/Input";
 import { Modal } from "@/shared/components/Modal";
-import { Button, ButtonVariant } from "@/shared/ui-kit/Button";
+import { Button, ButtonVariant } from "@/shared/ui-kit";
 import { checkIsURL } from "@/shared/utils";
 import { ElementType } from "../../../../constants";
 import { LinkElement } from "../../../../types";
@@ -96,12 +96,12 @@ const LinkModal: FC<LinkModalProps> = (props) => {
         />
         <div className={styles.buttonsContainer}>
           <div className={styles.buttonsWrapper}>
-            <Button variant={ButtonVariant.PrimaryGray} onClick={onClose}>
+            <Button variant={ButtonVariant.OutlineDarkPink} onClick={onClose}>
               Cancel
             </Button>
             {isLinkActive && (
               <Button
-                variant={ButtonVariant.OutlineBlue}
+                variant={ButtonVariant.Warning}
                 onClick={handleLinkRemove}
               >
                 Remove
@@ -109,7 +109,7 @@ const LinkModal: FC<LinkModalProps> = (props) => {
             )}
             <Button
               type="submit"
-              variant={ButtonVariant.PrimaryPurple}
+              variant={ButtonVariant.PrimaryPink}
               disabled={isSaveDisabled}
             >
               Save

From 46ddd06697e0dbe9d492f09bfe89d1d9fb345ddd Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 8 Apr 2024 12:32:13 +0300
Subject: [PATCH 08/27] move emoji button show handling to css

---
 .../components/Chat/ChatMessage/ChatMessage.module.scss   | 8 ++++++++
 src/shared/components/Chat/ChatMessage/ChatMessage.tsx    | 5 +----
 .../components/ReactWithEmoji/ReactWithEmoji.tsx          | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss
index 4db088c2f..83e9e16f6 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss
+++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss
@@ -2,6 +2,14 @@
 @import "../../../../styles/mixins";
 @import "../../../../styles/sizes";
 
+.container {
+  &:hover {
+    .emojiButton {
+      opacity: 1;
+    }
+  }
+}
+
 .message {
   display: flex;
   position: relative;
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
index ce780d200..a0726a904 100644
--- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -118,7 +118,6 @@ export default function ChatMessage({
   }>();
   const [isEditMode, setEditMode] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [showReactWithEmoji, setShowReactWithEmoji] = useState(false);
   const [isMessageEditLoading, setIsMessageEditLoading] = useState(false);
   const isTabletView = useIsTabletView();
   const isUserDiscussionMessage =
@@ -408,7 +407,7 @@ export default function ChatMessage({
 
   const emojiButton = (
     <ReactWithEmoji
-      showEmojiButton={showReactWithEmoji}
+      emojiButtonClassName={styles.emojiButton}
       discussionId={discussionMessage.discussionId}
       discussionMessageId={discussionMessage.id}
       className={
@@ -425,8 +424,6 @@ export default function ChatMessage({
       <li
         id={discussionMessage.id}
         className={classNames(styles.container, className)}
-        onMouseEnter={() => setShowReactWithEmoji(true)}
-        onMouseLeave={() => setShowReactWithEmoji(false)}
       >
         <div
           className={classNames(styles.message, {
diff --git a/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx b/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
index 64055bb58..332852c65 100644
--- a/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
+++ b/src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx
@@ -22,7 +22,7 @@ import { CompactPicker } from "./components /CompactPicker";
 import styles from "./ReactWithEmoji.module.scss";
 
 interface ReactWithEmojiProps {
-  showEmojiButton: boolean;
+  emojiButtonClassName?: string;
   discussionId?: string;
   discussionMessageId?: string;
   className?: string;
@@ -35,7 +35,7 @@ interface ReactWithEmojiProps {
 
 export const ReactWithEmoji: FC<ReactWithEmojiProps> = (props) => {
   const {
-    showEmojiButton,
+    emojiButtonClassName,
     discussionId,
     discussionMessageId,
     className,
@@ -136,8 +136,8 @@ export const ReactWithEmoji: FC<ReactWithEmojiProps> = (props) => {
     <div ref={wrapperRef} className={classNames(className)}>
       <ButtonIcon
         onClick={handleEmojiButtonClick}
-        className={classNames(styles.emojiButton, {
-          [styles.show]: showEmojiButton || showPicker,
+        className={classNames(styles.emojiButton, emojiButtonClassName, {
+          [styles.show]: showPicker,
         })}
       >
         <EmojiIcon />

From 61e5632ef9abb475581be11fd103d5808708d043 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 8 Apr 2024 12:55:59 +0300
Subject: [PATCH 09/27] create memoized version of scrollToRepliedMessage

---
 .../components/ChatContent/ChatContent.tsx    | 34 +++++++++++--------
 src/shared/hooks/index.tsx                    |  1 +
 src/shared/hooks/useMemoizedFunction.ts       | 14 ++++++++
 3 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 src/shared/hooks/useMemoizedFunction.ts

diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx
index 05d9ac52e..831f9feea 100644
--- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx
+++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx
@@ -19,7 +19,7 @@ import {
   QueryParamKey,
   LOADER_APPEARANCE_DELAY,
 } from "@/shared/constants";
-import { useQueryParams } from "@/shared/hooks";
+import { useMemoizedFunction, useQueryParams } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModalTransition } from "@/shared/interfaces";
 import {
@@ -181,21 +181,25 @@ const ChatContent: ForwardRefRenderFunction<
     }
   }, [shouldScrollToElementId, discussionMessages]);
 
-  async function scrollToRepliedMessage(messageId: string, endDate: Date) {
-    await fetchReplied(messageId, endDate);
-    setShouldScrollToElementId(messageId);
-  }
+  const scrollToRepliedMessage = useMemoizedFunction(
+    async (messageId: string, endDate: Date) => {
+      await fetchReplied(messageId, endDate);
+      setShouldScrollToElementId(messageId);
+    },
+  );
 
-  function scrollToRepliedMessageDMChat(messageId: string) {
-    scroller.scrollTo(messageId, {
-      containerId: chatWrapperId,
-      delay: 0,
-      duration: 300,
-      offset: -100,
-      smooth: true,
-    });
-    setHighlightedMessageId(messageId);
-  }
+  const scrollToRepliedMessageDMChat = useMemoizedFunction(
+    (messageId: string) => {
+      scroller.scrollTo(messageId, {
+        containerId: chatWrapperId,
+        delay: 0,
+        duration: 300,
+        offset: -100,
+        smooth: true,
+      });
+      setHighlightedMessageId(messageId);
+    },
+  );
 
   useEffect(() => {
     if (typeof messageIdParam === "string") {
diff --git a/src/shared/hooks/index.tsx b/src/shared/hooks/index.tsx
index e0b90ac32..26868cdc4 100644
--- a/src/shared/hooks/index.tsx
+++ b/src/shared/hooks/index.tsx
@@ -15,6 +15,7 @@ export { useHeader } from "./useHeader";
 export { useLoadingState } from "./useLoadingState";
 export { default as useLockedBody } from "./useLockedBody";
 export { default as useMatchRoute } from "./useMatchRoute";
+export * from "./useMemoizedFunction";
 export * from "./useMount";
 export { default as useZoomDisabling } from "./useZoomDisabling";
 export { default as useQueryParams } from "./useQueryParams";
diff --git a/src/shared/hooks/useMemoizedFunction.ts b/src/shared/hooks/useMemoizedFunction.ts
new file mode 100644
index 000000000..8f4a2d023
--- /dev/null
+++ b/src/shared/hooks/useMemoizedFunction.ts
@@ -0,0 +1,14 @@
+import { useCallback, useRef } from "react";
+
+export const useMemoizedFunction = <T extends (...args: any[]) => any>(
+  func: T,
+): T => {
+  const funcRef = useRef(func);
+  funcRef.current = func;
+
+  return useCallback<typeof funcRef.current>(
+    // @ts-ignore
+    (...args) => funcRef.current(...args),
+    [funcRef],
+  );
+};

From 47f8944f144314b86ed3efc664d4736f5567969a Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 8 Apr 2024 13:14:54 +0300
Subject: [PATCH 10/27] update memoization of feed item and internal link click
 functions

---
 .../components/FeedLayout/FeedLayout.tsx      | 40 +++++--------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
index 8b972198e..d440424b1 100644
--- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
+++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
@@ -42,7 +42,7 @@ import {
   ROUTE_PATHS,
 } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
-import { useQueryParams } from "@/shared/hooks";
+import { useMemoizedFunction, useQueryParams } from "@/shared/hooks";
 import { useGovernanceByCommonId } from "@/shared/hooks/useCases";
 import { useDisableOverscroll } from "@/shared/hooks/useDisableOverscroll";
 import { useIsTabletView } from "@/shared/hooks/viewport";
@@ -533,20 +533,13 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     }
   };
 
-  const handleFeedItemClick = onFeedItemSelect
-    ? handleFeedItemClickExternal
-    : handleFeedItemClickInternal;
-  const feedItemClickRef = useRef(handleFeedItemClick);
-  feedItemClickRef.current = handleFeedItemClick;
-
-  const handleFeedItemClickMemoized = useCallback<typeof handleFeedItemClick>(
-    (...args) => {
-      feedItemClickRef.current(...args);
-    },
-    [feedItemClickRef],
+  const handleFeedItemClick = useMemoizedFunction(
+    onFeedItemSelect
+      ? handleFeedItemClickExternal
+      : handleFeedItemClickInternal,
   );
 
-  const handleInternalLinkClick = useCallback(
+  const handleInternalLinkClick = useMemoizedFunction(
     (data: InternalLinkData) => {
       const feedPageParams = getParamsFromOneOfRoutes<{ id: string }>(
         data.pathname,
@@ -575,19 +568,6 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
         }),
       );
     },
-    [getCommonPagePath, handleFeedItemClick],
-  );
-
-  const internalLinkClickRef = useRef(handleInternalLinkClick);
-  internalLinkClickRef.current = handleInternalLinkClick;
-
-  const handleInternalLinkClickMemoized = useCallback<
-    typeof handleInternalLinkClick
-  >(
-    (...args) => {
-      internalLinkClickRef.current(...args);
-    },
-    [internalLinkClickRef],
   );
 
   const handleRefresh = async () => {
@@ -615,8 +595,8 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
       getLastMessage,
       getNonAllowedItems,
       onUserSelect: handleUserWithCommonClick,
-      onFeedItemClick: handleFeedItemClickMemoized,
-      onInternalLinkClick: handleInternalLinkClickMemoized,
+      onFeedItemClick: handleFeedItemClick,
+      onInternalLinkClick: handleInternalLinkClick,
       onActiveItemDataChange: handleActiveFeedItemDataChange,
     }),
     [
@@ -626,8 +606,8 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
       getLastMessage,
       getNonAllowedItems,
       handleUserWithCommonClick,
-      handleFeedItemClickMemoized,
-      handleInternalLinkClickMemoized,
+      handleFeedItemClick,
+      handleInternalLinkClick,
       handleActiveFeedItemDataChange,
     ],
   );

From d82c19c5e29b0014be2f40a59b4d781db35d35e7 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 8 Apr 2024 16:48:17 +0300
Subject: [PATCH 11/27] fix ReactWithEmoji component props for dm chat message
 component

---
 src/shared/components/Chat/ChatMessage/DMChatMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
index 78b8c93b4..32093a906 100644
--- a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -412,7 +412,7 @@ export default function DMChatMessage({
 
   const emojiButton = (
     <ReactWithEmoji
-      showEmojiButton={showReactWithEmoji}
+      emojiButtonClassName={styles.emojiButton}
       chatMessageId={discussionMessage.id}
       chatChannelId={chatChannelId}
       className={

From c02cffea08bba0c9515f5ea8f9180726e3af04fb Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 8 Apr 2024 17:43:09 +0300
Subject: [PATCH 12/27] fix nested item opening on mobile

---
 .../components/DiscussionFeedCard/DiscussionFeedCard.tsx       | 3 ++-
 .../common/components/ProposalFeedCard/ProposalFeedCard.tsx    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
index 57fd87d7a..df3498c3f 100644
--- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
+++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
@@ -222,7 +222,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
     const commonNotion = outerCommonNotion ?? common?.notion;
 
     const handleOpenChat = useCallback(() => {
-      if (discussion) {
+      if (discussion && !isPreviewMode) {
         setChatItem({
           feedItemId: item.id,
           discussion,
@@ -254,6 +254,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       feedItemUserMetadata?.seen,
       feedItemUserMetadata?.hasUnseenMention,
       nestedItemData,
+      isPreviewMode,
     ]);
 
     const onDiscussionDelete = useCallback(async () => {
diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
index 946545b56..f37a7d369 100644
--- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
+++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
@@ -312,7 +312,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
     }, [isActive, cardTitle]);
 
     const handleOpenChat = useCallback(() => {
-      if (discussion && proposal) {
+      if (discussion && proposal && !isPreviewMode) {
         setChatItem({
           feedItemId: item.id,
           discussion,
@@ -345,6 +345,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       feedItemUserMetadata?.seen,
       feedItemUserMetadata?.hasUnseenMention,
       nestedItemData,
+      isPreviewMode,
     ]);
 
     useEffect(() => {

From 72ebfacc8390917331eea2b1b0ad29af097d564a Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Tue, 9 Apr 2024 11:52:30 +0300
Subject: [PATCH 13/27] store common members state in the cache

---
 src/store/transforms.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/transforms.ts b/src/store/transforms.ts
index 01f30a080..55040db46 100644
--- a/src/store/transforms.ts
+++ b/src/store/transforms.ts
@@ -94,6 +94,7 @@ export const cacheTransform = createTransform(
     ),
     discussionStates: clearNonFinishedStates(inboundState.discussionStates),
     proposalStates: clearNonFinishedStates(inboundState.proposalStates),
+    commonMembersState: clearNonFinishedStates(inboundState.commonMembersState),
     feedByCommonIdStates: inboundState.feedByCommonIdStates,
     feedItemUserMetadataStates: clearNonFinishedStates(
       inboundState.feedItemUserMetadataStates,

From 5cb98a73c71f5112d253500e67dd664bba90557e Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Tue, 9 Apr 2024 13:00:05 +0300
Subject: [PATCH 14/27] update useCommonMembers to use user states cache

---
 src/pages/OldCommon/hooks/useCommonMembers.ts | 177 +++++++++++++++---
 src/services/Common.ts                        |  16 ++
 src/services/User.ts                          |   4 +
 src/store/states/cache/actions.ts             |   2 +-
 src/store/states/cache/types.ts               |   5 +-
 5 files changed, 173 insertions(+), 31 deletions(-)

diff --git a/src/pages/OldCommon/hooks/useCommonMembers.ts b/src/pages/OldCommon/hooks/useCommonMembers.ts
index 77d4c7eda..cbf098709 100644
--- a/src/pages/OldCommon/hooks/useCommonMembers.ts
+++ b/src/pages/OldCommon/hooks/useCommonMembers.ts
@@ -1,12 +1,14 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { CommonService, Logger, UserService } from "@/services";
+import { store } from "@/shared/appConfig";
 import { LoadingState } from "@/shared/interfaces";
-import { CommonMemberWithUserInfo } from "@/shared/models";
+import { CommonMember, CommonMemberWithUserInfo, User } from "@/shared/models";
 import {
   cacheActions,
   selectCommonMembersStateByCommonId,
+  selectUserStates,
 } from "@/store/states";
-import { getCommonMembers } from "../store/actions";
 
 interface Options {
   commonId?: string;
@@ -16,7 +18,7 @@ type State = LoadingState<CommonMemberWithUserInfo[]>;
 
 interface Return extends State {
   fetchCommonMembers: (circleVisibility?: string[]) => void;
-  setCommonMembers: (commonMembers: CommonMemberWithUserInfo[]) => void;
+  setCommonMembers: (commonMembers: CommonMember[]) => void;
 }
 
 const DEFAULT_STATE: State = {
@@ -27,47 +29,170 @@ const DEFAULT_STATE: State = {
 
 export const useCommonMembers = ({ commonId }: Options): Return => {
   const dispatch = useDispatch();
-
-  const state =
+  const commonMembersState =
     useSelector(selectCommonMembersStateByCommonId(commonId)) || DEFAULT_STATE;
+  const [state, setState] = useState<State>({
+    loading: false,
+    fetched: false,
+    data: [],
+  });
+  const stateRef = useRef(state);
+  stateRef.current = state;
 
   const fetchCommonMembers = useCallback(
-    (circleVisibility: string[] = []) => {
+    async (circleVisibility: string[] = []) => {
       if (!commonId) {
         return;
       }
 
-      dispatch(
-        getCommonMembers.request({
-          payload: { commonId, circleVisibility },
-          callback: (error, commonMembers) => {
-            if (!error) {
-              dispatch(
-                cacheActions.updateCommonMembersByCommonId({
-                  commonId,
-                  commonMembers: commonMembers ?? [],
-                }),
-              );
-            }
-          },
-        }),
-      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      if (stateRef.current.data.length === 0) {
+        setState({
+          loading: true,
+          fetched: false,
+          data: [],
+        });
+      }
+
+      try {
+        const commonMembers = await CommonService.getCommonMembers(
+          commonId,
+          circleVisibility,
+        );
+        dispatch(
+          cacheActions.updateCommonMembersByCommonId({
+            commonId,
+            commonMembers,
+          }),
+        );
+      } catch (err) {
+        Logger.error(err);
+
+        if (stateRef.current.data.length === 0) {
+          setState({
+            loading: false,
+            fetched: true,
+            data: [],
+          });
+        }
+      }
     },
-    [dispatch, commonId],
+    [dispatch, commonId, stateRef],
   );
 
   const setCommonMembers = useCallback(
-    (commonMembers: CommonMemberWithUserInfo[]) => {
+    (commonMembers: CommonMember[] = []) => {
       dispatch(
         cacheActions.updateCommonMembersByCommonId({
           commonId,
-          commonMembers: commonMembers ?? [],
+          commonMembers,
         }),
       );
     },
-    [commonId],
+    [dispatch, commonId],
   );
 
+  useEffect(() => {
+    const commonMembers = commonMembersState.data;
+
+    if (!commonMembers) {
+      return;
+    }
+    if (commonMembers.length === 0) {
+      setState({
+        loading: false,
+        fetched: true,
+        data: [],
+      });
+      return;
+    }
+
+    (async () => {
+      try {
+        const cachedUserStates = selectUserStates()(store.getState());
+        const hasUsersFromCache = commonMembers.some(
+          ({ userId }) => cachedUserStates[userId]?.data,
+        );
+        let userIdsToFetch = commonMembers.reduce<string[]>(
+          (acc, { userId }) =>
+            cachedUserStates[userId]?.data ? acc : [...acc, userId],
+          [],
+        );
+
+        if (hasUsersFromCache) {
+          setState((prevState) => {
+            const finalCommonMembers = commonMembers.reduce<
+              CommonMemberWithUserInfo[]
+            >((acc, commonMember) => {
+              const existingCommonMember = prevState.data.find(
+                ({ id }) => id === commonMember.id,
+              );
+
+              if (existingCommonMember) {
+                return [...acc, existingCommonMember];
+              }
+
+              const user = cachedUserStates[commonMember.userId]?.data;
+
+              return user ? [...acc, { ...commonMember, user }] : acc;
+            }, []);
+
+            return {
+              loading: false,
+              fetched: true,
+              data: finalCommonMembers,
+            };
+          });
+        } else {
+          userIdsToFetch = commonMembers.map(({ userId }) => userId);
+        }
+
+        if (userIdsToFetch.length === 0) {
+          return;
+        }
+
+        const fetchedUsers = (
+          await UserService.getUsersByIds(userIdsToFetch)
+        ).filter((user): user is User => Boolean(user));
+
+        setState((prevState) => {
+          const finalCommonMembers = commonMembers.reduce<
+            CommonMemberWithUserInfo[]
+          >((acc, commonMember) => {
+            const existingCommonMember = prevState.data.find(
+              ({ id }) => id === commonMember.id,
+            );
+
+            if (existingCommonMember) {
+              return [...acc, existingCommonMember];
+            }
+
+            const user = fetchedUsers.find(
+              ({ uid }) => uid === commonMember.userId,
+            );
+
+            return user ? [...acc, { ...commonMember, user }] : acc;
+          }, []);
+
+          return {
+            loading: false,
+            fetched: true,
+            data: finalCommonMembers,
+          };
+        });
+        dispatch(cacheActions.updateUserStates(fetchedUsers));
+      } catch (err) {
+        Logger.error(err);
+        setState((prevState) => ({
+          loading: false,
+          fetched: true,
+          data: prevState.data,
+        }));
+      }
+    })();
+  }, [commonMembersState.data]);
+
   return {
     ...state,
     data: state.data || DEFAULT_STATE.data,
diff --git a/src/services/Common.ts b/src/services/Common.ts
index 1d1e7a5e6..d5b573ac2 100644
--- a/src/services/Common.ts
+++ b/src/services/Common.ts
@@ -404,6 +404,22 @@ class CommonService {
     return members[0] || null;
   };
 
+  public getCommonMembers = async (
+    commonId: string,
+    circleVisibility: string[],
+  ): Promise<CommonMember[]> => {
+    let query: firebase.firestore.Query<CommonMember> =
+      commonMembersSubCollection(commonId);
+
+    if (circleVisibility.length > 0) {
+      query = query.where("circleIds", "array-contains-any", circleVisibility);
+    }
+
+    const snapshot = await query.get();
+
+    return snapshot.docs.map((doc) => doc.data());
+  };
+
   public subscribeToCircleMemberCountByCircleIds = (
     commonId: string,
     circleIds: string[],
diff --git a/src/services/User.ts b/src/services/User.ts
index 7d983faab..018299859 100644
--- a/src/services/User.ts
+++ b/src/services/User.ts
@@ -83,6 +83,10 @@ class UserService {
   };
 
   public getUsersByIds = async (ids: string[]): Promise<Array<User | null>> => {
+    if (ids.length === 0) {
+      return [];
+    }
+
     const queries: firebase.firestore.Query[] = [];
 
     // Firebase allows to use at most 10 items per query for `in` option
diff --git a/src/store/states/cache/actions.ts b/src/store/states/cache/actions.ts
index 2fd83ccd8..8f694efd3 100644
--- a/src/store/states/cache/actions.ts
+++ b/src/store/states/cache/actions.ts
@@ -247,7 +247,7 @@ export const updateCommonMembersByCommonId = createStandardAction(
   CacheActionType.UPDATE_COMMON_MEMBERS_BY_COMMON_ID,
 )<{
   commonId?: string;
-  commonMembers: CommonMemberWithUserInfo[];
+  commonMembers: CommonMember[];
 }>();
 
 export const addUserToExternalCommonUsers = createStandardAction(
diff --git a/src/store/states/cache/types.ts b/src/store/states/cache/types.ts
index 8f75af277..6ecacfc05 100644
--- a/src/store/states/cache/types.ts
+++ b/src/store/states/cache/types.ts
@@ -27,10 +27,7 @@ export interface CacheState {
     string,
     LoadingState<DiscussionMessage[] | null>
   >;
-  commonMembersState: Record<
-    string,
-    LoadingState<CommonMemberWithUserInfo[] | null>
-  >;
+  commonMembersState: Record<string, LoadingState<CommonMember[] | null>>;
   feedByCommonIdStates: Record<string, FeedState>;
   // key: {commonId}_{userId}_{feedObjectId}
   feedItemUserMetadataStates: Record<

From 59844ec775d72a08470c33ded45e2139b9dd634e Mon Sep 17 00:00:00 2001
From: Kiryl Budnik <kirill.bubnik.95@gmail.com>
Date: Tue, 9 Apr 2024 16:59:00 +0200
Subject: [PATCH 15/27] extended the number of items loaded in batch when
 searching inbox

---
 src/store/states/inbox/saga/getInboxItems.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/store/states/inbox/saga/getInboxItems.ts b/src/store/states/inbox/saga/getInboxItems.ts
index daec01909..997abef65 100644
--- a/src/store/states/inbox/saga/getInboxItems.ts
+++ b/src/store/states/inbox/saga/getInboxItems.ts
@@ -9,7 +9,7 @@ import {
 import { User } from "@/shared/models";
 import { isError } from "@/shared/utils";
 import * as actions from "../actions";
-import { selectInboxItems } from "../selectors";
+import { selectInboxItems, selectInboxSearchValue } from "../selectors";
 import { InboxItems } from "../types";
 import { getFeedLayoutItemDateForSorting } from "../utils";
 import { searchFetchedInboxItems } from "./searchFetchedInboxItems";
@@ -40,6 +40,7 @@ export function* getInboxItems(
       throw new Error("There is no user for inbox items fetch");
     }
 
+    const searchValue: string = yield select(selectInboxSearchValue);
     const currentItems = (yield select(selectInboxItems)) as InboxItems;
     const isFirstRequest = !currentItems.lastDocTimestamp;
 
@@ -52,7 +53,7 @@ export function* getInboxItems(
       {
         userId: user.uid,
         startAfter: currentItems.lastDocTimestamp,
-        limit,
+        limit: searchValue ? 500 : limit,
         unread,
       },
     )) as Awaited<ReturnType<typeof UserService.getInboxItemsWithMetadata>>;

From b295c5f161dc6fcb16863f7e876192fc4c6854b2 Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Wed, 10 Apr 2024 16:43:00 +0300
Subject: [PATCH 16/27] CW-staging-privacy-policy Fixed privacy policy url

---
 src/pages/PrivacyPolicy/PrivacyPolicy.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/PrivacyPolicy/PrivacyPolicy.tsx b/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
index 2cf9ad2e8..250154adb 100644
--- a/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/pages/PrivacyPolicy/PrivacyPolicy.tsx
@@ -5,10 +5,7 @@ import "./PrivacyPolicy.scss";
 export function PrivacyPolicy() {
   return (
     <div className="container-pdf">
-      <Document
-        className="preview-pdf"
-        file="http://localhost:3000/privacy_policy.pdf"
-      >
+      <Document className="preview-pdf" file="/privacy_policy.pdf">
         <Page pageNumber={1} />
         <Page pageNumber={2} />
         <Page pageNumber={3} />

From 0c48e45803da435fd59502110aef8e826feb58d8 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Wed, 10 Apr 2024 18:28:54 -0300
Subject: [PATCH 17/27] dm message: fix reaction count bug

---
 .../components/Chat/ChatMessage/DMChatMessage.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
index e9c70334b..0f9b734b3 100644
--- a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
+++ b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -7,8 +7,9 @@ import React, {
   useRef,
 } from "react";
 import { useDispatch } from "react-redux";
+import { usePrevious } from "react-use";
 import classNames from "classnames";
-import { isEmpty } from "lodash";
+import { isEmpty, isEqual } from "lodash";
 import { Element } from "slate";
 import { useLongPress } from "use-long-press";
 import { ChatService, Logger } from "@/services";
@@ -129,6 +130,9 @@ export default function DMChatMessage({
   const isTabletView = useIsTabletView();
   const isUserDiscussionMessage =
     checkIsUserDiscussionMessage(discussionMessage);
+  const prevReactionCounts = usePrevious(
+    isUserDiscussionMessage ? discussionMessage.reactionCounts : null,
+  );
   const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage);
   const userId = user?.uid;
   const discussionMessageUserId = isUserDiscussionMessage
@@ -434,9 +438,12 @@ export default function DMChatMessage({
     const reactions = discussionMessage.reactionCounts;
 
     if (!reactions) {
-      return {
-        [dmEmoji.emoji]: 1,
-      };
+      return { [dmEmoji.emoji]: 1 };
+    }
+
+    if (!isEqual(prevReactionCounts, reactions)) {
+      setDMEmoji(null);
+      return discussionMessage.reactionCounts;
     }
 
     if (dmEmoji.prevUserEmoji === dmEmoji.emoji) {

From 2d100b071d914eb45e5b2379ae732a4cdc4a3327 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Thu, 11 Apr 2024 19:23:57 -0300
Subject: [PATCH 18/27] improve reaction bubble styles

---
 .../Chat/ChatMessage/components/Reactions/Reactions.module.scss  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
index 6d06af0c0..23e6f6648 100644
--- a/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
+++ b/src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss
@@ -8,6 +8,7 @@
   padding: 0.3rem 0.5rem;
   box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
   color: $c-neutrals-300;
+  width: max-content;
 }
 
 .totalCount {

From 62ed9c31cfbc4f033cf5f71937f4586071d4330b Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 15 Apr 2024 16:52:23 +0300
Subject: [PATCH 19/27] added experimentalForceLongPolling to firestore
 settings

Potentially fixes: https://www.notion.so/daostack/Handle-Firebase-backend-low-internet-issues-f509a1563ace4ed396ba27a436e0394b
---
 src/shared/utils/firebase.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/shared/utils/firebase.tsx b/src/shared/utils/firebase.tsx
index 12a829f46..e3e1b1e1e 100644
--- a/src/shared/utils/firebase.tsx
+++ b/src/shared/utils/firebase.tsx
@@ -11,6 +11,9 @@ interface FirebaseError extends Error {
 }
 
 firebase.initializeApp(config.firebase);
+firebase.firestore().settings({
+  experimentalForceLongPolling: true,
+});
 
 if (REACT_APP_ENV === Environment.Local) {
   firebase.auth().useEmulator(local.firebase.authDomain);

From 28ef0b8a380e8d0f6b5cacf69aff88d8df0bc8eb Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Tue, 16 Apr 2024 11:24:59 +0300
Subject: [PATCH 20/27] enable firestore debug logging

---
 src/shared/utils/firebase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/utils/firebase.tsx b/src/shared/utils/firebase.tsx
index e3e1b1e1e..a2e64f65e 100644
--- a/src/shared/utils/firebase.tsx
+++ b/src/shared/utils/firebase.tsx
@@ -35,7 +35,7 @@ if (REACT_APP_ENV === Environment.Local) {
     });
 }
 
-// firebase.firestore.setLogLevel("debug");
+firebase.firestore.setLogLevel("debug");
 
 export const isFirebaseError = (error: any): error is FirebaseError =>
   (error && error.code && error.code.startsWith("auth/")) ||

From 223f83ce04c757de13a67ed1deb8da3a133f6155 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Tue, 16 Apr 2024 11:35:30 +0300
Subject: [PATCH 21/27] disable firestore debug logging

---
 src/shared/utils/firebase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/utils/firebase.tsx b/src/shared/utils/firebase.tsx
index a2e64f65e..e3e1b1e1e 100644
--- a/src/shared/utils/firebase.tsx
+++ b/src/shared/utils/firebase.tsx
@@ -35,7 +35,7 @@ if (REACT_APP_ENV === Environment.Local) {
     });
 }
 
-firebase.firestore.setLogLevel("debug");
+// firebase.firestore.setLogLevel("debug");
 
 export const isFirebaseError = (error: any): error is FirebaseError =>
   (error && error.code && error.code.startsWith("auth/")) ||

From cb43cc2dfeab49e8508dd6704bd11257d309bf0b Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Sun, 21 Apr 2024 22:19:00 +0300
Subject: [PATCH 22/27] CW-Webview-back-button Fix

---
 src/pages/empty/EmptyPage.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/pages/empty/EmptyPage.tsx b/src/pages/empty/EmptyPage.tsx
index 632864af8..c4eec74e7 100644
--- a/src/pages/empty/EmptyPage.tsx
+++ b/src/pages/empty/EmptyPage.tsx
@@ -1,5 +1,19 @@
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { history } from "@/shared/appConfig";
+import { getInboxPagePath } from "@/shared/utils";
+import { selectUser } from "../Auth/store/selectors";
 
-const EmptyPage: FC = () => null;
+const EmptyPage: FC = () => {
+  const user = useSelector(selectUser());
+
+  useEffect(() => {
+    if (user) {
+      history.push(getInboxPagePath());
+    }
+  }, [user]);
+
+  return null;
+};
 
 export default EmptyPage;

From 58b203d4e424363e2a433596dc0f400702b0a9d4 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 22 Apr 2024 17:03:50 +0300
Subject: [PATCH 23/27] display only spaces with user access in active
 breadcrumb menu

https://www.notion.so/daostack/Secret-space-is-still-visible-78eaba4375374cffb6dce258e58472af
---
 .../ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx
index 0536fecbb..c3d868078 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/ActiveFeedBreadcrumbsItem/ActiveFeedBreadcrumbsItem.tsx
@@ -24,9 +24,13 @@ const ActiveFeedBreadcrumbsItem: FC<ActiveFeedBreadcrumbsItemProps> = (
   const { commons, areCommonsFetched } = useSelector(
     selectCommonLayoutCommonsState,
   );
-  const { projects, areProjectsFetched } = useSelector(
+  const { projects: allProjects, areProjectsFetched } = useSelector(
     selectCommonLayoutProjectsState,
   );
+  const projects = useMemo(
+    () => allProjects.filter((project) => project.hasAccessToSpace),
+    [allProjects],
+  );
   const baseItems = useMemo(
     () =>
       projects.filter(

From c44f2212875bc22235f973bcc6a2426e5fa415d7 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 22 Apr 2024 17:17:36 +0300
Subject: [PATCH 24/27] reset discussion messages states on log out

https://www.notion.so/daostack/Secret-space-is-still-visible-78eaba4375374cffb6dce258e58472af
---
 src/pages/Auth/store/saga.tsx       | 1 +
 src/store/states/cache/actions.ts   | 4 ++++
 src/store/states/cache/constants.ts | 1 +
 src/store/states/cache/reducer.tsx  | 5 +++++
 src/store/states/cache/types.ts     | 1 -
 5 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/pages/Auth/store/saga.tsx b/src/pages/Auth/store/saga.tsx
index 56e3398e2..558a667fe 100755
--- a/src/pages/Auth/store/saga.tsx
+++ b/src/pages/Auth/store/saga.tsx
@@ -300,6 +300,7 @@ const resetGlobalData = (fullReset: boolean) => {
   }
   store.dispatch(inboxActions.resetInbox());
   store.dispatch(cacheActions.resetFeedStates());
+  store.dispatch(cacheActions.resetDiscussionMessagesStates());
   store.dispatch(commonActions.resetCommon());
 };
 
diff --git a/src/store/states/cache/actions.ts b/src/store/states/cache/actions.ts
index 8f694efd3..55e009f58 100644
--- a/src/store/states/cache/actions.ts
+++ b/src/store/states/cache/actions.ts
@@ -117,6 +117,10 @@ export const updateDiscussionMessagesStateByDiscussionId = createStandardAction(
   removedDiscussionMessages: DiscussionMessage[];
 }>();
 
+export const resetDiscussionMessagesStates = createStandardAction(
+  CacheActionType.RESET_DISCUSSION_MESSAGES_STATES,
+)();
+
 export const addDiscussionMessageByDiscussionId = createStandardAction(
   CacheActionType.ADD_DISCUSSION_MESSAGE_BY_DISCUSSION_ID,
 )<{
diff --git a/src/store/states/cache/constants.ts b/src/store/states/cache/constants.ts
index 5ff3b359b..b24da4384 100644
--- a/src/store/states/cache/constants.ts
+++ b/src/store/states/cache/constants.ts
@@ -23,6 +23,7 @@ export enum CacheActionType {
   UPDATE_DISCUSSION_STATE_BY_ID = "@CACHE/UPDATE_DISCUSSION_STATE_BY_ID",
   UPDATE_DISCUSSION_STATES = "@CACHE/UPDATE_DISCUSSION_STATES",
   UPDATE_DISCUSSION_STATE_BY_DISCUSSION_ID = "@CACHE/UPDATE_DISCUSSION_STATE_BY_DISCUSSION_ID",
+  RESET_DISCUSSION_MESSAGES_STATES = "@CACHE/RESET_DISCUSSION_MESSAGES_STATES",
   ADD_DISCUSSION_MESSAGE_BY_DISCUSSION_ID = "@CACHE/ADD_DISCUSSION_MESSAGE_BY_DISCUSSION_ID",
   DELETE_DISCUSSION_MESSAGE_BY_ID = "@CACHE/DELETE_DISCUSSION_MESSAGE_BY_ID",
   UPDATE_DISCUSSION_STATE_BY_DISCUSSION_MESSAGES_ACTUAL_ID = "@CACHE/UPDATE_DISCUSSION_STATE_BY_DISCUSSION_MESSAGES_ACTUAL_ID",
diff --git a/src/store/states/cache/reducer.tsx b/src/store/states/cache/reducer.tsx
index 956d87b02..c1880eb27 100644
--- a/src/store/states/cache/reducer.tsx
+++ b/src/store/states/cache/reducer.tsx
@@ -238,6 +238,11 @@ export const reducer = createReducer<CacheState, Action>(INITIAL_CACHE_STATE)
         };
       }),
   )
+  .handleAction(actions.resetDiscussionMessagesStates, (state) =>
+    produce(state, (nextState) => {
+      nextState.discussionMessagesStates = {};
+    }),
+  )
   .handleAction(
     actions.addDiscussionMessageByDiscussionId,
     (state, { payload }) =>
diff --git a/src/store/states/cache/types.ts b/src/store/states/cache/types.ts
index 6ecacfc05..1d6a2ac0a 100644
--- a/src/store/states/cache/types.ts
+++ b/src/store/states/cache/types.ts
@@ -3,7 +3,6 @@ import {
   ChatChannelUserStatus,
   CirclesPermissions,
   CommonFeedObjectUserUnique,
-  CommonMemberWithUserInfo,
   CommonMember,
   Discussion,
   DiscussionMessage,

From 59fcf1a26adf45821773b8ef2c16b0aca1cacc6b Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Thu, 25 Apr 2024 12:26:47 +0300
Subject: [PATCH 25/27] fix scroll of files preview

https://www.notion.so/daostack/an-unnecessary-tollbar-scroll-when-adding-a-picture-29279c898ef749968ce5f70dd25c38fd
---
 .../components/ChatFilePreview/ChatFilePreview.module.scss     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss b/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss
index df32237f7..cc7cc4d80 100644
--- a/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss
+++ b/src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss
@@ -8,7 +8,7 @@
 }
 
 .wrapper {
-  overflow-x: scroll;
+  overflow-x: auto;
   display: flex;
   width: 100%;
 }
@@ -16,7 +16,6 @@
 .filePreviewWrapper {
   position: relative;
   margin: 1rem 0.5rem 0;
-  height: 6.25rem;
 }
 
 .filePreview {

From 71cca8b546ea841552c5d8613bf6493f405050ea Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Thu, 25 Apr 2024 12:46:53 +0300
Subject: [PATCH 26/27] remove emoji picker rtl styles

https://www.notion.so/daostack/sometimes-emoji-pop-up-opens-incorrectly-118148e5edf84700bb60e6f55e0bd66b
---
 src/shared/ui-kit/TextEditor/BaseTextEditor.tsx              | 1 -
 .../components/EmojiPicker/EmojiPicker.module.scss           | 4 ----
 .../ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.tsx | 5 -----
 3 files changed, 10 deletions(-)

diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
index 2d59841d5..929cac0ce 100644
--- a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
+++ b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
@@ -340,7 +340,6 @@ const BaseTextEditor: FC<TextEditorProps> = (props) => {
           elementStyles={elementStyles}
         />
         <EmojiPicker
-          isRtl={isRtlLanguage}
           isMessageSent={isMessageSent}
           onToggleIsMessageSent={onToggleIsMessageSent}
           containerClassName={emojiContainerClassName}
diff --git a/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.module.scss b/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.module.scss
index 09cb9ade1..711e492d4 100644
--- a/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.module.scss
+++ b/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.module.scss
@@ -24,7 +24,3 @@ $phone-breakpoint: 415px;
     right: -4.5rem; // Picker would be at the right corner of send button icon
   }
 }
-
-.pickerContainerRtl {
-  left: 0.5625rem;
-}
diff --git a/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.tsx b/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.tsx
index 1de3c7651..c6dd93dfb 100644
--- a/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.tsx
+++ b/src/shared/ui-kit/TextEditor/components/EmojiPicker/EmojiPicker.tsx
@@ -16,7 +16,6 @@ export interface EmojiPickerProps {
   onEmojiSelect: (emoji: Skin) => void;
   isMessageSent?: boolean;
   onToggleIsMessageSent?: () => void;
-  isRtl: boolean;
 }
 
 const EmojiPicker: FC<EmojiPickerProps> = (props) => {
@@ -26,7 +25,6 @@ const EmojiPicker: FC<EmojiPickerProps> = (props) => {
     onEmojiSelect,
     isMessageSent,
     onToggleIsMessageSent,
-    isRtl,
   } = props;
   const [isOpen, setIsOpen] = useState(false);
   const wrapperRef = useRef(null);
@@ -64,9 +62,6 @@ const EmojiPicker: FC<EmojiPickerProps> = (props) => {
         <div
           className={classNames(
             pickerContainerClassName || styles.pickerContainer,
-            {
-              [styles.pickerContainerRtl]: isRtl,
-            },
           )}
         >
           <Picker

From c8961a179de4141112948b62e0be8076b60368f1 Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Thu, 25 Apr 2024 14:16:20 +0300
Subject: [PATCH 27/27] add scrolling to top when opening create/edit stream
 form

https://www.notion.so/daostack/Opening-new-stream-should-scroll-up-to-the-form-top-of-the-feed-9751d18b590a493c8c204d97fc3c10c4
---
 .../NewDiscussionCreation.tsx                 | 10 ++++++++-
 src/pages/commonFeed/CommonFeed.tsx           | 21 +++++++++++++++++++
 .../components/FeedLayout/FeedLayout.tsx      | 11 +++++++++-
 src/shared/interfaces/feedLayout.ts           |  1 +
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/NewDiscussionCreation.tsx b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/NewDiscussionCreation.tsx
index 5afaabe9e..f7cb3769e 100644
--- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/NewDiscussionCreation.tsx
+++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/NewDiscussionCreation.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from "react";
+import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import {
@@ -33,6 +33,7 @@ interface NewDiscussionCreationProps {
   isModalVariant?: boolean;
   edit?: boolean;
   defaultVisibility?: string;
+  onDiscussionIdChange?: () => void;
 }
 
 interface InitialValues {
@@ -52,6 +53,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     isModalVariant = false,
     edit,
     defaultVisibility,
+    onDiscussionIdChange,
   } = props;
   const dispatch = useDispatch();
   const discussionCreationData = useSelector(selectDiscussionCreationData);
@@ -132,6 +134,12 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     [governanceCircles, userCircleIds, userId, common.id, edit],
   );
 
+  useEffect(() => {
+    if (discussionCreationData?.id) {
+      onDiscussionIdChange?.();
+    }
+  }, [discussionCreationData?.id]);
+
   if (
     isModalVariant &&
     typeof commonImage === "string" &&
diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx
index c028c950e..8d85ba7a8 100644
--- a/src/pages/commonFeed/CommonFeed.tsx
+++ b/src/pages/commonFeed/CommonFeed.tsx
@@ -266,6 +266,15 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     [dispatch],
   );
 
+  const scrollToItemsTop = () => {
+    setTimeout(() => {
+      feedLayoutRef?.getItemsContainerEl()?.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }, 0);
+  };
+
   const onJoinCommon = checkIsProject(commonData?.common)
     ? canJoinProjectAutomatically
       ? onJoinProjectAutomatically
@@ -476,6 +485,17 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     };
   }, [updateLastVisitedCommon, commonId]);
 
+  useEffect(() => {
+    if (
+      commonAction &&
+      [CommonAction.NewDiscussion, CommonAction.NewProposal].includes(
+        commonAction,
+      )
+    ) {
+      scrollToItemsTop();
+    }
+  }, [commonAction]);
+
   if (!isDataFetched) {
     const headerEl = renderLoadingHeader ? (
       renderLoadingHeader()
@@ -559,6 +579,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
                 defaultVisibility={
                   commonData.governance.discussions.defaultVisibility
                 }
+                onDiscussionIdChange={scrollToItemsTop}
               />
             )}
             {commonAction === CommonAction.NewProposal && (
diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
index d440424b1..1f46c8a99 100644
--- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
+++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx
@@ -458,6 +458,14 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     setShouldAllowChatAutoOpen(true);
   };
 
+  const getItemsContainerEl = useCallback(() => {
+    const containerEl = isTabletView
+      ? window
+      : document.getElementsByClassName("Pane Pane1")[0];
+
+    return containerEl || null;
+  }, [isTabletView]);
+
   const onDMClick =
     !isTabletView && dmChatChannelItemForProfile ? handleDMClick : undefined;
 
@@ -730,8 +738,9 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
       setExpandedFeedItemId,
       setActiveItem,
       setShouldAllowChatAutoOpen,
+      getItemsContainerEl,
     }),
-    [setActiveItem],
+    [setActiveItem, getItemsContainerEl],
   );
 
   const pageContentStyles = {
diff --git a/src/shared/interfaces/feedLayout.ts b/src/shared/interfaces/feedLayout.ts
index 284d03781..5e943e80c 100644
--- a/src/shared/interfaces/feedLayout.ts
+++ b/src/shared/interfaces/feedLayout.ts
@@ -11,6 +11,7 @@ export interface FeedLayoutRef {
   setExpandedFeedItemId: (feedItemId: string | null) => void;
   setActiveItem: (item: ChatItem) => void;
   setShouldAllowChatAutoOpen: (shouldAllow: boolean | null) => void;
+  getItemsContainerEl: () => Element | typeof window | null;
 }
 
 interface BaseLayoutItem {