Merge branch 'dev' into cw-2268-messages-ballons-design-updates

daostack · Nov 6, 2023 · 04a04ee · 04a04ee
2 parents 23043ed + 3495fc3
commit 04a04ee
Show file tree

Hide file tree

Showing 22 changed files with 218 additions and 11 deletions.
diff --git 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/...ponents/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx b/...ponents/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/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
@@ -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
@@ -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
@@ -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
@@ -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/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

diff --git 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
@@ -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,10 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           menuItems={menuItems}
           ownerId={item.userId}
+          hasUnseenMention={
+            feedItemUserMetadata?.hasUnseenMention ??
+            !isFeedItemUserMetadataFetched
+          }
         >
           {renderContent()}
         </FeedCard>

diff --git 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,8 @@ const InboxPage: FC<InboxPageProps> = (props) => {
   const [feedLayoutRef, setFeedLayoutRef] = useState<FeedLayoutRef | null>(
     null,
   );
+  const isActiveUnreadInboxItemsQueryParam =
+    queryParams[QueryParamKey.Unread] === "true";
   const sharedFeedItemIdQueryParam = queryParams[QueryParamKey.Item];
   const sharedFeedItemId =
     (typeof sharedFeedItemIdQueryParam === "string" &&
@@ -88,9 +91,10 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     loading: areInboxItemsLoading,
     hasMore: hasMoreInboxItems,
     fetch: fetchInboxItems,
+    refetch: refetchInboxItems,
     batchNumber,
   } = useInboxItems(feedItemIdsForNotListening, {
-    unread: queryParams.unread === "true",
+    unread: isActiveUnreadInboxItemsQueryParam,
   });
   const sharedInboxItem = useSelector(selectSharedInboxItem);
   const chatChannelItems = useSelector(selectChatChannelItems);
@@ -108,6 +112,10 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     return items;
   }, [chatChannelItems, sharedInboxItem]);
 
+  useUpdateEffect(() => {
+    refetchInboxItems();
+  }, [isActiveUnreadInboxItemsQueryParam]);
+
   const fetchData = () => {
     fetchInboxData({
       sharedFeedItemId,
@@ -264,7 +272,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/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/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
@@ -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
@@ -4,6 +4,8 @@ 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 { InboxFilterButton } from "../InboxFilterButton";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
@@ -29,10 +31,18 @@ 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}
+          ButtonComponent={PlusButton}
+        />
+        <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
@@ -0,0 +1,29 @@
+@import "../../../../constants";
+@import "../../../../styles/sizes";
+
+.buttonIcon {
+  background-color: transparent;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background-color: $light-gray-1;
+    }
+  }
+}
+
+.unreadFilterActive {
+  background-color: $c-pink-next-dark;
+  color: $white;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      background-color: $c-pink-mention-2;
+    }
+  }
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: inherit;
+}