[WEB-2382] chore: notifications file rearranging

web/app/[workspaceSlug]/(projects)/notifications/layout.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 // components
-import { NotificationsSidebar } from "@/components/workspace-notifications";
+import { NotificationsSidebarRoot } from "@/components/workspace-notifications";
 
 export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative w-full h-full overflow-hidden flex items-center">
-      <NotificationsSidebar />
+      <NotificationsSidebarRoot />
       <div className="w-full h-full overflow-hidden overflow-y-auto">{children}</div>
     </div>
   );

web/ce/components/workspace-notifications/index.ts

@@ -0,0 +1 @@
+export * from './sidebar'

web/ce/components/workspace-notifications/sidebar/index.ts

@@ -0,0 +1,2 @@
+export * from './notification-card'
+export * from './root'

web/core/components/workspace-notifications/sidebar/notification-card/item.tsx → web/ce/components/workspace-notifications/sidebar/notification-card/item.tsx

@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
 import { Avatar, Row } from "@plane/ui";
 // components
-import { NotificationOption } from "@/components/workspace-notifications";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { calculateTimeAgo, renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
@@ -14,6 +13,7 @@ import { sanitizeCommentForNotification } from "@/helpers/notification.helper";
 import { replaceUnderscoreIfSnakeCase, stripAndTruncateHTML } from "@/helpers/string.helper";
 // hooks
 import { useIssueDetail, useNotification, useWorkspaceNotifications } from "@/hooks/store";
+import { NotificationOption } from "@/plane-web/components/workspace-notifications";
 
 type TNotificationItem = {
   workspaceSlug: string;

web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx → web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx

@@ -4,14 +4,14 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { ArchiveRestore } from "lucide-react";
 import { ArchiveIcon, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { NotificationItemOptionButton } from "@/components/workspace-notifications";
 // constants
 import { NOTIFICATION_ARCHIVED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
+// components
+import { NotificationItemOptionButton } from "@/plane-web/components/workspace-notifications";
 // store
-import { INotification } from "@/store/notifications/notification";
+import { INotification } from "@/plane-web/store/notifications/notification";
 
 type TNotificationItemArchiveOption = {
   workspaceSlug: string;

web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx → web/ce/components/workspace-notifications/sidebar/notification-card/options/read.tsx

@@ -4,14 +4,14 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { NotificationItemOptionButton } from "@/components/workspace-notifications";
 // constants
 import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
+// components
+import { NotificationItemOptionButton } from "@/plane-web/components/workspace-notifications";
 // store
-import { INotification } from "@/store/notifications/notification";
+import { INotification } from "@/plane-web/store/notifications/notification";
 
 type TNotificationItemReadOption = {
   workspaceSlug: string;

web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx → web/ce/components/workspace-notifications/sidebar/notification-card/options/root.tsx

@@ -2,16 +2,16 @@
 
 import { FC, Dispatch, SetStateAction } from "react";
 import { observer } from "mobx-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useNotification } from "@/hooks/store";
 // components
 import {
   NotificationItemReadOption,
   NotificationItemArchiveOption,
   NotificationItemSnoozeOption,
-} from "@/components/workspace-notifications";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useNotification } from "@/hooks/store";
+} from "@/plane-web/components/workspace-notifications";
 
 type TNotificationOption = {
   workspaceSlug: string;

web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx → web/ce/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx

@@ -5,16 +5,16 @@ import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 import { Tooltip, setToast, TOAST_TYPE } from "@plane/ui";
-// components
-import { NotificationSnoozeModal } from "@/components/workspace-notifications";
 // constants
 import { NOTIFICATION_SNOOZE_OPTIONS } from "@/constants/notification";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { NotificationSnoozeModal } from "@/plane-web/components/workspace-notifications";
 // store
-import { INotification } from "@/store/notifications/notification";
+import { INotification } from "@/plane-web/store/notifications/notification";
 
 type TNotificationItemSnoozeOption = {
   workspaceSlug: string;

web/core/components/workspace-notifications/sidebar/notification-card/root.tsx → web/ce/components/workspace-notifications/sidebar/notification-card/root.tsx

@@ -2,12 +2,12 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-// components
-import { NotificationItem } from "@/components/workspace-notifications";
 // constants
 import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
+// components
+import { NotificationItem } from "@/plane-web/components/workspace-notifications";
 
 type TNotificationCardListRoot = {
   workspaceSlug: string;

web/ce/components/workspace-notifications/sidebar/root.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { FC, useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
+import { CountChip } from "@/components/common";
+import {
+  NotificationsLoader,
+  NotificationEmptyState,
+  NotificationSidebarHeader,
+  AppliedFilters,
+} from "@/components/workspace-notifications";
+// constants
+import { NOTIFICATION_TABS, TNotificationTab } from "@/constants/notification";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { getNumberCount } from "@/helpers/string.helper";
+// hooks
+import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
+
+import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
+
+export const NotificationsSidebar: FC = observer(() => {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  const {
+    currentSelectedNotificationId,
+    unreadNotificationsCount,
+    loader,
+    notificationIdsByWorkspaceId,
+    currentNotificationTab,
+    setCurrentNotificationTab,
+  } = useWorkspaceNotifications();
+  // derived values
+  const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
+  const notificationIds = workspace ? notificationIdsByWorkspaceId(workspace.id) : undefined;
+
+  const handleTabClick = useCallback((tabValue: TNotificationTab)=>{
+    if(currentSelectedNotificationId !== tabValue) {
+      setCurrentNotificationTab(tabValue);
+    }
+  },[ setCurrentNotificationTab, currentSelectedNotificationId ]);
+
+
+  if (!workspaceSlug || !workspace) return <></>;
+
+  return (
+    <div
+      className={cn(
+        "relative border-0 md:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all overflow-hidden",
+        currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
+      )}
+    >
+      <div className="relative w-full h-full overflow-hidden flex flex-col">
+        <Row className="h-[3.75rem] border-b border-custom-border-200 flex">
+          <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
+        </Row>
+
+        <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
+          {NOTIFICATION_TABS.map((tab) => (
+            <div
+              key={tab.value}
+              className="h-full px-3 relative cursor-pointer"
+              onClick={() => handleTabClick(tab.value)}
+            >
+              <div
+                className={cn(
+                  `relative h-full flex justify-center items-center gap-1 text-sm transition-all`,
+                  currentNotificationTab === tab.value
+                    ? "text-custom-primary-100"
+                    : "text-custom-text-100 hover:text-custom-text-200"
+                )}
+              >
+                <div className="font-medium">{tab.label}</div>
+                {tab.count(unreadNotificationsCount) > 0 && (
+                  <CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
+                )}
+              </div>
+              {currentNotificationTab === tab.value && (
+                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
+              )}
+            </div>
+          ))}
+        </Header>
+
+        {/* applied filters */}
+        <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
+
+        {/* rendering notifications */}
+        {loader === "init-loader" ? (
+          <div className="relative w-full h-full overflow-hidden">
+            <NotificationsLoader />
+          </div>
+        ) : (
+          <>
+            {notificationIds && notificationIds.length > 0 ? (
+              <ContentWrapper variant={ERowVariant.HUGGING}>
+                <NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
+              </ContentWrapper>
+            ) : (
+              <div className="relative w-full h-full flex justify-center items-center">
+                <NotificationEmptyState />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+});

web/core/store/notifications/notification.ts → web/ce/store/notifications/notification.ts

@@ -2,10 +2,11 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { IUserLite, TNotification, TNotificationData } from "@plane/types";
+// store
+import { RootStore } from "@/plane-web/store/root.store";
 // services
 import workspaceNotificationService from "@/services/workspace-notification.service";
-// store
-import { CoreRootStore } from "../root.store";
+
 
 export interface INotification extends TNotification {
   // observables
@@ -51,7 +52,7 @@ export class Notification implements INotification {
   updated_by: string | undefined = undefined;
 
   constructor(
-    private store: CoreRootStore,
+    private store: RootStore,
     private notification: TNotification
   ) {
     makeObservable(this, {

web/core/store/notifications/workspace-notifications.store.ts → web/ce/store/notifications/workspace-notifications.store.ts

@@ -21,11 +21,11 @@ import {
 } from "@/constants/notification";
 // helpers
 import { convertToEpoch } from "@/helpers/date-time.helper";
+// store
+import { Notification, INotification } from "@/plane-web/store/notifications/notification";
+import { RootStore } from "@/plane-web/store/root.store";
 // services
 import workspaceNotificationService from "@/services/workspace-notification.service";
-// store
-import { Notification, INotification } from "@/store/notifications/notification";
-import { CoreRootStore } from "@/store/root.store";
 
 type TNotificationLoader = ENotificationLoader | undefined;
 type TNotificationQueryParamType = ENotificationQueryParamType;
@@ -84,7 +84,7 @@ export class WorkspaceNotificationStore implements IWorkspaceNotificationStore {
     read: false,
   };
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observables
       loader: observable.ref,

web/ce/store/root.store.ts

@@ -1,13 +1,20 @@
 // store
 import { CoreRootStore } from "@/store/root.store";
+import { IWorkspaceNotificationStore, WorkspaceNotificationStore } from "./notifications/workspace-notifications.store";
 import { ITimelineStore, TimeLineStore } from "./timeline";
 
 export class RootStore extends CoreRootStore {
   timelineStore: ITimelineStore;
+  workspaceNotification: IWorkspaceNotificationStore;
 
   constructor() {
     super();
-
+    this.workspaceNotification = new WorkspaceNotificationStore(this)
     this.timelineStore = new TimeLineStore(this);
   }
+
+  resetOnSignOut() {
+    super.resetOnSignOut();
+    this.workspaceNotification = new WorkspaceNotificationStore(this);
+  }
 }

web/core/components/workspace-notifications/sidebar/index.ts

@@ -7,4 +7,4 @@ export * from "./header";
 
 export * from "./filters";
 
-export * from "./notification-card";
+// export * from "./notification-card";