From aa80e3836d8c52c21f13c90d217a680503b609c9 Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Sun, 29 Oct 2023 23:13:50 +0300
Subject: [PATCH 01/10] CW-2256 Added unread filter button

---
 src/pages/inbox/BaseInbox.tsx                 | 15 +++-
 .../HeaderContent/HeaderContent.tsx           |  2 +
 .../HeaderContent_v04.module.scss             | 13 +++
 .../HeaderContent_v04/HeaderContent_v04.tsx   | 12 ++-
 .../InboxFilterButton.module.scss             | 34 ++++++++
 .../InboxFilterButton/InboxFilterButton.tsx   | 43 ++++++++++
 .../components/InboxFilterButton/index.ts     |  1 +
 src/shared/hooks/useCases/useInboxItems.ts    | 12 +++
 src/shared/icons/inboxFilter.icon.tsx         | 84 +++++++++++++++++++
 src/shared/icons/index.ts                     |  1 +
 10 files changed, 211 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
 create mode 100644 src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
 create mode 100644 src/pages/inbox/components/InboxFilterButton/index.ts
 create mode 100644 src/shared/icons/inboxFilter.icon.tsx

diff --git a/src/pages/inbox/BaseInbox.tsx b/src/pages/inbox/BaseInbox.tsx
index 1efb7696fb..e3adc15ec1 100644
--- a/src/pages/inbox/BaseInbox.tsx
+++ b/src/pages/inbox/BaseInbox.tsx
@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
+import { useUpdateEffect } from "react-use";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { FeedItemBaseContentProps } from "@/pages/common";
 import {
@@ -67,6 +68,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
   const [feedLayoutRef, setFeedLayoutRef] = useState<FeedLayoutRef | null>(
     null,
   );
+  const isActiveUnreadInboxItemsQueryParam = queryParams.unread === "true";
   const sharedFeedItemIdQueryParam = queryParams[QueryParamKey.Item];
   const sharedFeedItemId =
     (typeof sharedFeedItemIdQueryParam === "string" &&
@@ -88,8 +90,9 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     loading: areInboxItemsLoading,
     hasMore: hasMoreInboxItems,
     fetch: fetchInboxItems,
+    refetch: refetchInboxItems,
   } = useInboxItems(feedItemIdsForNotListening, {
-    unread: queryParams.unread === "true",
+    unread: isActiveUnreadInboxItemsQueryParam,
   });
   const sharedInboxItem = useSelector(selectSharedInboxItem);
   const chatChannelItems = useSelector(selectChatChannelItems);
@@ -107,6 +110,10 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     return items;
   }, [chatChannelItems, sharedInboxItem]);
 
+  useUpdateEffect(() => {
+    refetchInboxItems();
+  }, [isActiveUnreadInboxItemsQueryParam]);
+
   const fetchData = () => {
     fetchInboxData({
       sharedFeedItemId,
@@ -262,7 +269,11 @@ const InboxPage: FC<InboxPageProps> = (props) => {
         renderChatChannelItem={renderChatChannelItem}
         onFeedItemUpdate={handleFeedItemUpdate}
         getLastMessage={getLastMessage}
-        emptyText="Your inbox is empty"
+        emptyText={
+          isActiveUnreadInboxItemsQueryParam
+            ? "Hurry! No unread items in your inbox :-)"
+            : "Your inbox is empty"
+        }
         getNonAllowedItems={getNonAllowedItems}
         onActiveItemChange={handleActiveItemChange}
         onActiveItemDataChange={onActiveItemDataChange}
diff --git a/src/pages/inbox/components/HeaderContent/HeaderContent.tsx b/src/pages/inbox/components/HeaderContent/HeaderContent.tsx
index be50571f40..1627e0fcbd 100644
--- a/src/pages/inbox/components/HeaderContent/HeaderContent.tsx
+++ b/src/pages/inbox/components/HeaderContent/HeaderContent.tsx
@@ -4,6 +4,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { DirectMessageButton } from "../DirectMessageButton";
 import { HeaderContent_v04 } from "../HeaderContent_v04";
+import { InboxFilterButton } from "../InboxFilterButton";
 import { PlusButton } from "./components";
 import styles from "./HeaderContent.module.scss";
 
@@ -32,6 +33,7 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
         <h1 className={styles.title}>Inbox</h1>
       </div>
       <div className={styles.actionButtonsWrapper}>
+        <InboxFilterButton />
         <DirectMessageButton
           isMobileVersion={isMobileVersion}
           ButtonComponent={PlusButton}
diff --git a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.module.scss b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.module.scss
index 98c64c78ea..1939a6a3b5 100644
--- a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.module.scss
+++ b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.module.scss
@@ -78,3 +78,16 @@
 .directMessageButton {
   align-self: center;
 }
+
+.actionButtonsWrapper {
+  display: flex;
+  align-items: center;
+
+  & > * {
+    margin-right: 1rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
index 911d2f13b0..be543d029a 100644
--- a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
+++ b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
@@ -4,6 +4,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { getPluralEnding } from "@/shared/utils";
 import { DirectMessageButton } from "../DirectMessageButton";
+import { InboxFilterButton } from "../InboxFilterButton";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
@@ -29,10 +30,13 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
           </div>
         </div>
       </div>
-      <DirectMessageButton
-        className={styles.directMessageButton}
-        isMobileVersion={isMobileVersion}
-      />
+      <div className={styles.actionButtonsWrapper}>
+        <InboxFilterButton />
+        <DirectMessageButton
+          className={styles.directMessageButton}
+          isMobileVersion={isMobileVersion}
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
new file mode 100644
index 0000000000..4b42d950a4
--- /dev/null
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
@@ -0,0 +1,34 @@
+@import "../../../../constants";
+@import "../../../../styles/sizes";
+
+.buttonIcon {
+  background-color: transparent;
+
+  @media only screen and (min-width: #{$laptop-breakpoint + 1}) {
+    &:hover {
+      background-color: $light-gray-1;
+    }
+  }
+}
+
+.unreadFilterActive {
+  background-color: $c-pink-next-dark;
+  color: $white;
+
+  @media only screen and (min-width: #{$laptop-breakpoint + 1}) {
+    &:hover {
+      color: $c-gray-800;
+    }
+  }
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  color: inherit;
+
+  @include tablet {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
new file mode 100644
index 0000000000..26452f3261
--- /dev/null
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { useHistory } from "react-router";
+import classnames from "classnames";
+import { QueryParamKey, ROUTE_PATHS } from "@/shared/constants";
+import { useQueryParams, useRemoveQueryParams } from "@/shared/hooks";
+import { InboxFilterIcon } from "@/shared/icons";
+import { ButtonIcon } from "@/shared/ui-kit";
+import styles from "./InboxFilterButton.module.scss";
+
+interface InboxFilterButtonProps {
+  className?: string;
+}
+
+const InboxFilterButton: FC<InboxFilterButtonProps> = (props) => {
+  const { className } = props;
+  const history = useHistory();
+  const queryParams = useQueryParams();
+  const { removeQueryParams } = useRemoveQueryParams();
+  const isActiveUnreadInboxItemsQueryParam = queryParams.unread === "true";
+
+  return (
+    <ButtonIcon
+      className={classnames(styles.buttonIcon, className, {
+        [styles.unreadFilterActive]: isActiveUnreadInboxItemsQueryParam,
+      })}
+      onClick={() => {
+        if (isActiveUnreadInboxItemsQueryParam) {
+          removeQueryParams(QueryParamKey.Unread);
+        } else {
+          history.push(`${ROUTE_PATHS.INBOX}?${QueryParamKey.Unread}=true`);
+        }
+      }}
+    >
+      <InboxFilterIcon
+        className={classnames(styles.icon, {
+          [styles.iconActive]: isActiveUnreadInboxItemsQueryParam,
+        })}
+      />
+    </ButtonIcon>
+  );
+};
+
+export default InboxFilterButton;
diff --git a/src/pages/inbox/components/InboxFilterButton/index.ts b/src/pages/inbox/components/InboxFilterButton/index.ts
new file mode 100644
index 0000000000..60fdf9c83e
--- /dev/null
+++ b/src/pages/inbox/components/InboxFilterButton/index.ts
@@ -0,0 +1 @@
+export { default as InboxFilterButton } from "./InboxFilterButton";
\ No newline at end of file
diff --git a/src/shared/hooks/useCases/useInboxItems.ts b/src/shared/hooks/useCases/useInboxItems.ts
index 97f9d46af0..3c7c5f642f 100644
--- a/src/shared/hooks/useCases/useInboxItems.ts
+++ b/src/shared/hooks/useCases/useInboxItems.ts
@@ -15,6 +15,7 @@ import { inboxActions, InboxItems, selectInboxItems } from "@/store/states";
 
 interface Return extends Pick<InboxItems, "data" | "loading" | "hasMore"> {
   fetch: () => void;
+  refetch: () => void;
 }
 
 interface ItemBatch<T = FeedItemFollow> {
@@ -128,6 +129,16 @@ export const useInboxItems = (
     );
   };
 
+  const refetch = () => {
+    dispatch(inboxActions.resetInboxItems());
+    dispatch(
+      inboxActions.getInboxItems.request({
+        limit: 15,
+        unread: options?.unread,
+      }),
+    );
+  }
+
   useEffect(() => {
     if (!inboxItems.firstDocTimestamp || !userId) {
       return;
@@ -219,5 +230,6 @@ export const useInboxItems = (
   return {
     ...inboxItems,
     fetch,
+    refetch,
   };
 };
diff --git a/src/shared/icons/inboxFilter.icon.tsx b/src/shared/icons/inboxFilter.icon.tsx
new file mode 100644
index 0000000000..eb3bf324cb
--- /dev/null
+++ b/src/shared/icons/inboxFilter.icon.tsx
@@ -0,0 +1,84 @@
+import React, { FC } from "react";
+
+interface InboxFilterIconProps {
+  className?: string;
+}
+
+const InboxFilterIcon: FC<InboxFilterIconProps> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.56 3.69141C7.46808 4.14339 6.47587 4.806 5.64 5.64141"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.69 8.55859C3.23656 9.64889 3.0021 10.8178 3 11.9986"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.69 15.4414C4.14199 16.5333 4.8046 17.5255 5.64 18.3614"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.56 20.3086C9.6503 20.762 10.8192 20.9965 12 20.9986"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.44 20.3094C16.5319 19.8574 17.5241 19.1948 18.36 18.3594"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.31 15.44C20.7634 14.3497 20.9979 13.1808 21 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.31 8.56063C19.858 7.46871 19.1954 6.47649 18.36 5.64062"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.44 3.69C14.3497 3.23656 13.1808 3.0021 12 3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default InboxFilterIcon;
diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts
index 9f9a8fb7b3..47872eacb9 100644
--- a/src/shared/icons/index.ts
+++ b/src/shared/icons/index.ts
@@ -67,3 +67,4 @@ export { default as EmojiIcon } from "./emoji.icon";
 export { default as ReplyIcon } from "./reply.icon";
 export { default as CopyIcon } from "./copy.icon";
 export { default as HideIcon } from "./hide.icon";
+export { default as InboxFilterIcon } from "./inboxFilter.icon";

From f27a1f31b806b052d7076139ae22d607e74623cc Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Tue, 31 Oct 2023 14:43:57 +0300
Subject: [PATCH 02/10] Update src/shared/hooks/useCases/useInboxItems.ts

Co-authored-by: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
---
 src/shared/hooks/useCases/useInboxItems.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/shared/hooks/useCases/useInboxItems.ts b/src/shared/hooks/useCases/useInboxItems.ts
index 3c7c5f642f..edfe7e2ac3 100644
--- a/src/shared/hooks/useCases/useInboxItems.ts
+++ b/src/shared/hooks/useCases/useInboxItems.ts
@@ -131,12 +131,7 @@ export const useInboxItems = (
 
   const refetch = () => {
     dispatch(inboxActions.resetInboxItems());
-    dispatch(
-      inboxActions.getInboxItems.request({
-        limit: 15,
-        unread: options?.unread,
-      }),
-    );
+    fetch();
   }
 
   useEffect(() => {

From 575743f62d5e27c6fe812b848a6bf0187038b37d Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Tue, 31 Oct 2023 15:17:17 +0300
Subject: [PATCH 03/10] CW-2256 Fixed PR comments

---
 src/pages/inbox/BaseInbox.tsx                 |  3 +-
 .../InboxFilterButton.module.scss             |  6 +-
 .../InboxFilterButton/InboxFilterButton.tsx   | 18 ++---
 src/shared/icons/inboxFilter.icon.tsx         | 71 +++++--------------
 4 files changed, 34 insertions(+), 64 deletions(-)

diff --git a/src/pages/inbox/BaseInbox.tsx b/src/pages/inbox/BaseInbox.tsx
index e3adc15ec1..a802b6daf7 100644
--- a/src/pages/inbox/BaseInbox.tsx
+++ b/src/pages/inbox/BaseInbox.tsx
@@ -68,7 +68,8 @@ const InboxPage: FC<InboxPageProps> = (props) => {
   const [feedLayoutRef, setFeedLayoutRef] = useState<FeedLayoutRef | null>(
     null,
   );
-  const isActiveUnreadInboxItemsQueryParam = queryParams.unread === "true";
+  const isActiveUnreadInboxItemsQueryParam =
+    queryParams[QueryParamKey.Unread] === "true";
   const sharedFeedItemIdQueryParam = queryParams[QueryParamKey.Item];
   const sharedFeedItemId =
     (typeof sharedFeedItemIdQueryParam === "string" &&
diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
index 4b42d950a4..9b3daf0c31 100644
--- a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
@@ -4,7 +4,7 @@
 .buttonIcon {
   background-color: transparent;
 
-  @media only screen and (min-width: #{$laptop-breakpoint + 1}) {
+  @media (hover: hover) and (pointer: fine) {
     &:hover {
       background-color: $light-gray-1;
     }
@@ -15,9 +15,9 @@
   background-color: $c-pink-next-dark;
   color: $white;
 
-  @media only screen and (min-width: #{$laptop-breakpoint + 1}) {
+  @media (hover: hover) and (pointer: fine) {
     &:hover {
-      color: $c-gray-800;
+      background-color: $c-pink-mention-2;
     }
   }
 }
diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
index 26452f3261..554714a4df 100644
--- a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
@@ -16,20 +16,22 @@ const InboxFilterButton: FC<InboxFilterButtonProps> = (props) => {
   const history = useHistory();
   const queryParams = useQueryParams();
   const { removeQueryParams } = useRemoveQueryParams();
-  const isActiveUnreadInboxItemsQueryParam = queryParams.unread === "true";
+  const isActiveUnreadInboxItemsQueryParam = queryParams[QueryParamKey.Unread] === "true";
+
+  const handleFilterIconClick = (): void => {
+    if (isActiveUnreadInboxItemsQueryParam) {
+      removeQueryParams(QueryParamKey.Unread);
+    } else {
+      history.push(`${ROUTE_PATHS.INBOX}?${QueryParamKey.Unread}=true`);
+    }
+  }
 
   return (
     <ButtonIcon
       className={classnames(styles.buttonIcon, className, {
         [styles.unreadFilterActive]: isActiveUnreadInboxItemsQueryParam,
       })}
-      onClick={() => {
-        if (isActiveUnreadInboxItemsQueryParam) {
-          removeQueryParams(QueryParamKey.Unread);
-        } else {
-          history.push(`${ROUTE_PATHS.INBOX}?${QueryParamKey.Unread}=true`);
-        }
-      }}
+      onClick={handleFilterIconClick}
     >
       <InboxFilterIcon
         className={classnames(styles.icon, {
diff --git a/src/shared/icons/inboxFilter.icon.tsx b/src/shared/icons/inboxFilter.icon.tsx
index eb3bf324cb..59251221f7 100644
--- a/src/shared/icons/inboxFilter.icon.tsx
+++ b/src/shared/icons/inboxFilter.icon.tsx
@@ -15,67 +15,34 @@ const InboxFilterIcon: FC<InboxFilterIconProps> = ({ className }) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8.56 3.69141C7.46808 4.14339 6.47587 4.806 5.64 5.64141"
+        d="M8 9H16"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
       <path
-        d="M3.69 8.55859C3.23656 9.64889 3.0021 10.8178 3 11.9986"
+        d="M8 13H14"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
       <path
-        d="M3.69 15.4414C4.14199 16.5333 4.8046 17.5255 5.64 18.3614"
+        d="M12 21L11 20L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V13"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
-      <path
-        d="M8.56 20.3086C9.6503 20.762 10.8192 20.9965 12 20.9986"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M15.44 20.3094C16.5319 19.8574 17.5241 19.1948 18.36 18.3594"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M20.31 15.44C20.7634 14.3497 20.9979 13.1808 21 12"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M20.31 8.56063C19.858 7.46871 19.1954 6.47649 18.36 5.64062"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M15.44 3.69C14.3497 3.23656 13.1808 3.0021 12 3"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M10 12C10 12.5304 10.2107 13.0391 10.5858 13.4142C10.9609 13.7893 11.4696 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7893 13.0391 14 12.5304 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10C11.4696 10 10.9609 10.2107 10.5858 10.5858C10.2107 10.9609 10 11.4696 10 12Z"
+      <circle
+        cx="18"
+        cy="18"
+        r="3"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
     </svg>
   );

From 720c2bbf8cbf59551491b9fc052c8a3e5031098d Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Wed, 1 Nov 2023 12:39:13 +0300
Subject: [PATCH 04/10] CW-2236 Changed Bubble icons to Plus icons

---
 .../components/NewStreamButton/NewStreamButton.tsx        | 8 ++++----
 .../components/HeaderContent_v04/HeaderContent_v04.tsx    | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx
index ecd7a149a7..f39711d48c 100644
--- a/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx
+++ b/src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from "react";
-import { BoldPlusIcon } from "@/shared/icons";
+import { PlusButton } from "@/pages/inbox/components/HeaderContent/components";
+import { PlusIcon } from "@/shared/icons";
 import { CirclesPermissions, CommonMember, Governance } from "@/shared/models";
 import {
   Button,
-  ButtonIcon,
   ButtonSize,
   ButtonVariant,
   DesktopMenu,
@@ -28,7 +28,7 @@ const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
   } = props;
   const items = useMenuItems({ commonMember, governance });
   const buttonVariant = ButtonVariant.OutlineDarkPink;
-  const iconEl = <BoldPlusIcon className={styles.icon} />;
+  const iconEl = <PlusIcon className={styles.icon} />;
 
   if (items.length === 0) {
     return null;
@@ -55,7 +55,7 @@ const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
   return (
     <MobileMenu
       className={className}
-      triggerEl={<ButtonIcon variant={buttonVariant}>{iconEl}</ButtonIcon>}
+      triggerEl={<PlusButton />}
       items={items}
     />
   );
diff --git a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
index 911d2f13b0..f9d65ad5d7 100644
--- a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
+++ b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
@@ -4,6 +4,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
 import { getPluralEnding } from "@/shared/utils";
 import { DirectMessageButton } from "../DirectMessageButton";
+import { PlusButton } from "../HeaderContent/components";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
@@ -32,6 +33,7 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
       <DirectMessageButton
         className={styles.directMessageButton}
         isMobileVersion={isMobileVersion}
+        ButtonComponent={PlusButton}
       />
     </div>
   );

From 877cf0f274be34d59340da832e80df5e5ba8ca23 Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Wed, 1 Nov 2023 14:06:01 +0300
Subject: [PATCH 05/10] CW-2256 Fixed size of icon and v04 navigation

---
 .../InboxFilterButton/InboxFilterButton.module.scss  |  9 ++-------
 .../InboxFilterButton/InboxFilterButton.tsx          | 12 +++++++-----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
index 9b3daf0c31..a4e15ac9d5 100644
--- a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
@@ -23,12 +23,7 @@
 }
 
 .icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.5rem;
+  height: 1.5rem;
   color: inherit;
-
-  @include tablet {
-    width: 1.125rem;
-    height: 1.125rem;
-  }
 }
\ No newline at end of file
diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
index 554714a4df..26a84f6833 100644
--- a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
+++ b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from "react";
-import { useHistory } from "react-router";
+import { useHistory, useLocation } from "react-router";
 import classnames from "classnames";
-import { QueryParamKey, ROUTE_PATHS } from "@/shared/constants";
+import { QueryParamKey } from "@/shared/constants";
 import { useQueryParams, useRemoveQueryParams } from "@/shared/hooks";
 import { InboxFilterIcon } from "@/shared/icons";
 import { ButtonIcon } from "@/shared/ui-kit";
@@ -14,17 +14,19 @@ interface InboxFilterButtonProps {
 const InboxFilterButton: FC<InboxFilterButtonProps> = (props) => {
   const { className } = props;
   const history = useHistory();
+  const location = useLocation();
   const queryParams = useQueryParams();
   const { removeQueryParams } = useRemoveQueryParams();
-  const isActiveUnreadInboxItemsQueryParam = queryParams[QueryParamKey.Unread] === "true";
+  const isActiveUnreadInboxItemsQueryParam =
+    queryParams[QueryParamKey.Unread] === "true";
 
   const handleFilterIconClick = (): void => {
     if (isActiveUnreadInboxItemsQueryParam) {
       removeQueryParams(QueryParamKey.Unread);
     } else {
-      history.push(`${ROUTE_PATHS.INBOX}?${QueryParamKey.Unread}=true`);
+      history.push(`${location.pathname}?${QueryParamKey.Unread}=true`);
     }
-  }
+  };
 
   return (
     <ButtonIcon

From c3a25654b29d8d3dbd7e8bb6dc446963a3d0b193 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Fri, 3 Nov 2023 11:43:47 -0400
Subject: [PATCH 06/10] show follow icon on space cards

---
 .../components/ProjectFeedItem/ProjectFeedItem.tsx         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx
index ae282dc417..3b4624f969 100644
--- a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx
+++ b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx
@@ -3,7 +3,7 @@ import { useHistory } from "react-router-dom";
 import classNames from "classnames";
 import { useFeedItemContext } from "@/pages/common";
 import { useRoutesContext } from "@/shared/contexts";
-import { useCommon } from "@/shared/hooks/useCases";
+import { useCommon, useFeedItemFollow } from "@/shared/hooks/useCases";
 import { OpenIcon } from "@/shared/icons";
 import { CommonFeed } from "@/shared/models";
 import { CommonAvatar, parseStringToTextEditorValue } from "@/shared/ui-kit";
@@ -22,6 +22,10 @@ export const ProjectFeedItem: FC<ProjectFeedItemProps> = (props) => {
   const { getCommonPagePath } = useRoutesContext();
   const { renderFeedItemBaseContent } = useFeedItemContext();
   const { data: common, fetched: isCommonFetched, fetchCommon } = useCommon();
+  const feedItemFollow = useFeedItemFollow(
+    { feedItemId: item.id, commonId: item.data.id },
+    { withSubscription: true },
+  );
   const {
     projectUnreadStreamsCount: unreadStreamsCount,
     projectUnreadMessages: unreadMessages,
@@ -76,6 +80,7 @@ export const ProjectFeedItem: FC<ProjectFeedItemProps> = (props) => {
           lastMessage,
           renderLeftContent,
           shouldHideBottomContent: !lastMessage,
+          isFollowing: feedItemFollow.isFollowing,
         })}
       </>
     ) || null

From ea189ac20cd47c81a13feb83f00fb69eed33c6a4 Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Fri, 3 Nov 2023 14:55:59 -0400
Subject: [PATCH 07/10] display (personal) @ icon on unread mentioned stream

---
 src/pages/common/components/ChatComponent/context.ts        | 1 +
 .../components/DiscussionFeedCard/DiscussionFeedCard.tsx    | 6 ++++++
 src/pages/common/components/FeedCard/FeedCard.tsx           | 3 +++
 .../components/FeedCardTags/FeedCardTags.module.scss        | 4 ++++
 .../FeedCard/components/FeedCardTags/FeedCardTags.tsx       | 3 +++
 .../components/FeedItemBaseContent/FeedItemBaseContent.tsx  | 2 ++
 src/pages/common/components/FeedItem/context.ts             | 1 +
 .../common/components/ProposalFeedCard/ProposalFeedCard.tsx | 5 +++++
 .../components/FeedItemBaseContent/FeedItemBaseContent.tsx  | 2 ++
 src/shared/models/CommonFeedObjectUserUnique.ts             | 1 +
 10 files changed, 28 insertions(+)

diff --git a/src/pages/common/components/ChatComponent/context.ts b/src/pages/common/components/ChatComponent/context.ts
index 2db6aeda1d..bf219498f4 100644
--- a/src/pages/common/components/ChatComponent/context.ts
+++ b/src/pages/common/components/ChatComponent/context.ts
@@ -15,6 +15,7 @@ export interface ChatItem {
   lastSeenItem?: CommonFeedObjectUserUnique["lastSeen"];
   lastSeenAt?: CommonFeedObjectUserUnique["lastSeenAt"];
   seenOnce?: boolean;
+  hasUnseenMention?: CommonFeedObjectUserUnique["hasUnseenMention"];
 }
 
 export interface ChatContextValue {
diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
index 3ddf95d5c7..37ac83fd05 100644
--- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
+++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
@@ -168,6 +168,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           lastSeenItem: feedItemUserMetadata?.lastSeen,
           lastSeenAt: feedItemUserMetadata?.lastSeenAt,
           seenOnce: feedItemUserMetadata?.seenOnce,
+          hasUnseenMention: feedItemUserMetadata?.hasUnseenMention,
         });
       }
     }, [
@@ -177,6 +178,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       feedItemUserMetadata?.lastSeen,
       feedItemUserMetadata?.lastSeenAt,
       feedItemUserMetadata?.seenOnce,
+      feedItemUserMetadata?.hasUnseenMention,
     ]);
 
     const onDiscussionDelete = useCallback(async () => {
@@ -333,6 +335,10 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           ownerId={item.userId}
           discussionPredefinedType={discussion?.predefinedType}
+          hasUnseenMention={
+            feedItemUserMetadata?.hasUnseenMention ??
+            !isFeedItemUserMetadataFetched
+          }
         >
           {renderContent()}
         </FeedCard>
diff --git a/src/pages/common/components/FeedCard/FeedCard.tsx b/src/pages/common/components/FeedCard/FeedCard.tsx
index 84011cb894..8e593dc061 100644
--- a/src/pages/common/components/FeedCard/FeedCard.tsx
+++ b/src/pages/common/components/FeedCard/FeedCard.tsx
@@ -45,6 +45,7 @@ type FeedCardProps = PropsWithChildren<{
   discussionPredefinedType?: PredefinedTypes;
   hasFiles?: boolean;
   hasImages?: boolean;
+  hasUnseenMention?: boolean;
 }>;
 
 const MOBILE_HEADER_HEIGHT = 52;
@@ -79,6 +80,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     menuItems,
     seenOnce,
     seen,
+    hasUnseenMention,
     ownerId,
     discussionPredefinedType,
     hasImages,
@@ -204,6 +206,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
             discussionPredefinedType,
             hasFiles,
             hasImages,
+            hasUnseenMention,
           })}
         </div>
       )}
diff --git a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss
index 0f0985d0b5..92d2c46860 100644
--- a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss
+++ b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss
@@ -56,3 +56,7 @@
   border-radius: 50%;
   background-color: $c-pink-primary;
 }
+
+.hasUnseenMention {
+  color: $c-pink-primary;
+}
diff --git a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx
index eb69e59e8e..168f1182d8 100644
--- a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx
+++ b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx
@@ -16,6 +16,7 @@ interface FeedCardTagsProps {
   isActive: boolean;
   isPinned?: boolean;
   isFollowing?: boolean;
+  hasUnseenMention?: boolean;
 }
 
 export const FeedCardTags: FC<FeedCardTagsProps> = (props) => {
@@ -28,6 +29,7 @@ export const FeedCardTags: FC<FeedCardTagsProps> = (props) => {
     isActive,
     isPinned,
     isFollowing,
+    hasUnseenMention,
   } = props;
   const user = useSelector(selectUser());
   const isOwner = ownerId === user?.uid;
@@ -54,6 +56,7 @@ export const FeedCardTags: FC<FeedCardTagsProps> = (props) => {
           })}
         />
       )}
+      {hasUnseenMention && <div className={styles.hasUnseenMention}>@</div>}
       {isFollowing && (
         <StarIcon className={styles.starIcon} stroke="currentColor" />
       )}
diff --git a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx
index f51be70090..2324322854 100644
--- a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx
+++ b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx
@@ -35,6 +35,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isFollowing,
     isLoading = false,
     shouldHideBottomContent = false,
+    hasUnseenMention,
   } = props;
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const [isLongPressing, setIsLongPressing] = useState(false);
@@ -154,6 +155,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
                 isActive={isActive}
                 isPinned={isPinned}
                 isFollowing={isFollowing}
+                hasUnseenMention={hasUnseenMention}
               />
             </div>
           </div>
diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts
index 67cf765193..38f3f3c557 100644
--- a/src/pages/common/components/FeedItem/context.ts
+++ b/src/pages/common/components/FeedItem/context.ts
@@ -42,6 +42,7 @@ export interface FeedItemBaseContentProps {
   hasImages?: boolean;
   isLoading?: boolean;
   shouldHideBottomContent?: boolean;
+  hasUnseenMention?: boolean;
 }
 
 export interface GetLastMessageOptions {
diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
index 934cd0720d..997588d9c6 100644
--- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
+++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
@@ -270,6 +270,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           lastSeenItem: feedItemUserMetadata?.lastSeen,
           lastSeenAt: feedItemUserMetadata?.lastSeenAt,
           seenOnce: feedItemUserMetadata?.seenOnce,
+          hasUnseenMention: feedItemUserMetadata?.hasUnseenMention,
         });
       }
     }, [
@@ -281,6 +282,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       feedItemUserMetadata?.lastSeen,
       feedItemUserMetadata?.lastSeenAt,
       feedItemUserMetadata?.seenOnce,
+      feedItemUserMetadata?.hasUnseenMention,
     ]);
 
     useEffect(() => {
@@ -458,6 +460,9 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           menuItems={menuItems}
           ownerId={item.userId}
+          hasUnseenMention={
+            feedItemUserMetadata?.hasUnseenMention ?? !isFeedItemUserFetched
+          }
         >
           {renderContent()}
         </FeedCard>
diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
index 04238c3472..ef5da01dba 100644
--- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
+++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
@@ -36,6 +36,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isImageRounded,
     isProject,
     discussionPredefinedType,
+    hasUnseenMention,
   } = props;
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const [isLongPressing, setIsLongPressing] = useState(false);
@@ -160,6 +161,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
               ownerId={ownerId}
               isActive={isActive}
               isPinned={false}
+              hasUnseenMention={hasUnseenMention}
             />
           </div>
         </div>
diff --git a/src/shared/models/CommonFeedObjectUserUnique.ts b/src/shared/models/CommonFeedObjectUserUnique.ts
index ba4ce206e7..97fd50cbb5 100644
--- a/src/shared/models/CommonFeedObjectUserUnique.ts
+++ b/src/shared/models/CommonFeedObjectUserUnique.ts
@@ -14,4 +14,5 @@ export interface CommonFeedObjectUserUnique extends BaseEntity {
   commonId: string;
   seenOnce?: boolean;
   seen?: boolean;
+  hasUnseenMention?: boolean;
 }

From a239168f1dcb6e231649f66b10bd2acd5c866160 Mon Sep 17 00:00:00 2001
From: Pavel Meyer <meyerpavel1207@gmail.com>
Date: Mon, 6 Nov 2023 11:50:03 +0300
Subject: [PATCH 08/10] CW-2236 Changed the order

---
 .../inbox/components/HeaderContent_v04/HeaderContent_v04.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
index 8e9d003125..1697379141 100644
--- a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
+++ b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx
@@ -32,12 +32,12 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
         </div>
       </div>
       <div className={styles.actionButtonsWrapper}>
+        <InboxFilterButton />
         <DirectMessageButton
           className={styles.directMessageButton}
           isMobileVersion={isMobileVersion}
           ButtonComponent={PlusButton}
         />
-        <InboxFilterButton />
         <DirectMessageButton
           className={styles.directMessageButton}
           isMobileVersion={isMobileVersion}

From f2ae3c5c72e9c74ba9fb5ee1581ba306f5bce82f Mon Sep 17 00:00:00 2001
From: Andrey Mikhadyuk <mihadiuk.andrej@gmail.com>
Date: Mon, 6 Nov 2023 11:54:31 +0300
Subject: [PATCH 09/10] fix inbox filter icon props names

---
 src/shared/icons/inboxFilter.icon.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/shared/icons/inboxFilter.icon.tsx b/src/shared/icons/inboxFilter.icon.tsx
index 59251221f7..52ac490c20 100644
--- a/src/shared/icons/inboxFilter.icon.tsx
+++ b/src/shared/icons/inboxFilter.icon.tsx
@@ -17,32 +17,32 @@ const InboxFilterIcon: FC<InboxFilterIconProps> = ({ className }) => {
       <path
         d="M8 9H16"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M8 13H14"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 21L11 20L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V13"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <circle
         cx="18"
         cy="18"
         r="3"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

From 90d178c35a82f3161019b0efc70dafe00530079a Mon Sep 17 00:00:00 2001
From: Roie Natan <roie.natan@gmail.com>
Date: Mon, 6 Nov 2023 14:43:04 -0500
Subject: [PATCH 10/10] code review updates

---
 .../common/components/ProposalFeedCard/ProposalFeedCard.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
index 997588d9c6..ddbc1c2414 100644
--- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
+++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
@@ -461,7 +461,8 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           menuItems={menuItems}
           ownerId={item.userId}
           hasUnseenMention={
-            feedItemUserMetadata?.hasUnseenMention ?? !isFeedItemUserFetched
+            feedItemUserMetadata?.hasUnseenMention ??
+            !isFeedItemUserMetadataFetched
           }
         >
           {renderContent()}