From d9eb2155f7cb57a73d82b5a3ccbeec918fb9c0c3 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Tue, 8 Oct 2024 13:02:58 +0530
Subject: [PATCH 1/2] move mark all as read to header and remove it from
 dropdown

---
 .../header/options/menu-option/root.tsx       | 42 +++----------------
 .../sidebar/header/options/root.tsx           | 38 +++++++++++++++--
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
index ea0eb130f29..ea16fbf5390 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -2,19 +2,17 @@
 
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
-import { Check, CheckCheck, CheckCircle, Clock } from "lucide-react";
+import { Check, CheckCircle, Clock } from "lucide-react";
 import { TNotificationFilter } from "@plane/types";
-import { ArchiveIcon, PopoverMenu, Spinner } from "@plane/ui";
+import { ArchiveIcon, PopoverMenu } from "@plane/ui";
 // components
 import { NotificationMenuOptionItem } from "@/components/workspace-notifications";
 // constants
-import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
-import { ENotificationLoader } from "@/constants/notification";
 // hooks
-import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
+import { useWorkspaceNotifications } from "@/hooks/store";
 
 type TNotificationHeaderMenuOption = {
-  workspaceSlug: string;
+  workspaceSlug?: string;
 };
 
 export type TPopoverMenuOptions = {
@@ -27,44 +25,16 @@ export type TPopoverMenuOptions = {
   onClick?: (() => void) | undefined;
 };
 
-export const NotificationHeaderMenuOption: FC<TNotificationHeaderMenuOption> = observer((props) => {
-  const { workspaceSlug } = props;
+export const NotificationHeaderMenuOption: FC<TNotificationHeaderMenuOption> = observer(() => {
   // hooks
-  const { captureEvent } = useEventTracker();
-  const { loader, filters, updateFilters, updateBulkFilters, markAllNotificationsAsRead } = useWorkspaceNotifications();
+  const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
 
   const handleFilterChange = (filterType: keyof TNotificationFilter, filterValue: boolean) =>
     updateFilters(filterType, filterValue);
 
   const handleBulkFilterChange = (filter: Partial<TNotificationFilter>) => updateBulkFilters(filter);
 
-  const handleMarkAllNotificationsAsRead = async () => {
-    // NOTE: We are using loader to prevent continues request when we are making all the notification to read
-    if (loader) return;
-    try {
-      await markAllNotificationsAsRead(workspaceSlug);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   const popoverMenuOptions: TPopoverMenuOptions[] = [
-    {
-      key: "menu-mark-all-read",
-      type: "menu-item",
-      label: "Mark all as read",
-      isActive: true,
-      prependIcon: <CheckCheck className="h-3 w-3" />,
-      appendIcon: loader === ENotificationLoader.MARK_ALL_AS_READY ? <Spinner height="14px" width="14px" /> : undefined,
-      onClick: () => {
-        captureEvent(NOTIFICATIONS_READ);
-        handleMarkAllNotificationsAsRead();
-      },
-    },
-    {
-      key: "menu-divider",
-      type: "divider",
-    },
     {
       key: "menu-unread",
       type: "menu-item",
diff --git a/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 2fc8c4bde98..2798a58c9b4 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -1,13 +1,14 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { RefreshCw } from "lucide-react";
-import { Tooltip } from "@plane/ui";
+import { CheckCheck, RefreshCw } from "lucide-react";
+import { Spinner, Tooltip } from "@plane/ui";
 // components
 import { NotificationFilter, NotificationHeaderMenuOption } from "@/components/workspace-notifications";
 // constants
+import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
 import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
-import { useWorkspaceNotifications } from "@/hooks/store";
+import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TNotificationSidebarHeaderOptions = {
@@ -19,6 +20,8 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   // hooks
   const { isMobile } = usePlatformOS();
   const { loader, getNotifications } = useWorkspaceNotifications();
+  const { captureEvent } = useEventTracker();
+  const { markAllNotificationsAsRead } = useWorkspaceNotifications();
 
   const refreshNotifications = async () => {
     if (loader) return;
@@ -29,8 +32,35 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
     }
   };
 
+  const handleMarkAllNotificationsAsRead = async () => {
+    // NOTE: We are using loader to prevent continues request when we are making all the notification to read
+    if (loader) return;
+    try {
+      await markAllNotificationsAsRead(workspaceSlug);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
     <div className="relative flex justify-center items-center gap-2 text-sm">
+      {/* mark all notifications as read*/}
+      <Tooltip tooltipContent="Mark all as read" isMobile={isMobile} position="bottom">
+        <div
+          className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
+          onClick={() => {
+            captureEvent(NOTIFICATIONS_READ);
+            handleMarkAllNotificationsAsRead();
+          }}
+        >
+          {loader === ENotificationLoader.MARK_ALL_AS_READY ? (
+            <Spinner height="14px" width="14px" />
+          ) : (
+            <CheckCheck className="h-3 w-3" />
+          )}
+        </div>
+      </Tooltip>
+
       {/* refetch current notifications */}
       <Tooltip tooltipContent="Refresh" isMobile={isMobile} position="bottom">
         <div
@@ -45,7 +75,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
       <NotificationFilter />
 
       {/* notification menu options */}
-      <NotificationHeaderMenuOption workspaceSlug={workspaceSlug} />
+      <NotificationHeaderMenuOption />
     </div>
   );
 });

From c863eb055c782917f9bde18b342385adc80b6ec0 Mon Sep 17 00:00:00 2001
From: sharma01ketan <sharma01ketan@gmail.com>
Date: Tue, 8 Oct 2024 13:28:49 +0530
Subject: [PATCH 2/2] made recommended changes

---
 .../sidebar/header/options/menu-option/root.tsx             | 6 +-----
 .../workspace-notifications/sidebar/header/options/root.tsx | 3 +--
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
index ea16fbf5390..c603510cfcf 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -11,10 +11,6 @@ import { NotificationMenuOptionItem } from "@/components/workspace-notifications
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
 
-type TNotificationHeaderMenuOption = {
-  workspaceSlug?: string;
-};
-
 export type TPopoverMenuOptions = {
   key: string;
   type: string;
@@ -25,7 +21,7 @@ export type TPopoverMenuOptions = {
   onClick?: (() => void) | undefined;
 };
 
-export const NotificationHeaderMenuOption: FC<TNotificationHeaderMenuOption> = observer(() => {
+export const NotificationHeaderMenuOption = observer(() => {
   // hooks
   const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
 
diff --git a/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 2798a58c9b4..8f2caf152a9 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -19,9 +19,8 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   const { workspaceSlug } = props;
   // hooks
   const { isMobile } = usePlatformOS();
-  const { loader, getNotifications } = useWorkspaceNotifications();
+  const { loader, getNotifications, markAllNotificationsAsRead } = useWorkspaceNotifications();
   const { captureEvent } = useEventTracker();
-  const { markAllNotificationsAsRead } = useWorkspaceNotifications();
 
   const refreshNotifications = async () => {
     if (loader) return;