diff --git a/web/core/components/workspace-notifications/sidebar/index.ts b/web/core/components/workspace-notifications/sidebar/index.ts
index 9e46ed0e638..4713a9b3c23 100644
--- a/web/core/components/workspace-notifications/sidebar/index.ts
+++ b/web/core/components/workspace-notifications/sidebar/index.ts
@@ -6,3 +6,5 @@ export * from "./header";
export * from "./filters";
export * from "./notification-card";
+
+export * from "./root";
diff --git a/web/core/components/workspace-notifications/sidebar/root.tsx b/web/core/components/workspace-notifications/sidebar/root.tsx
new file mode 100644
index 00000000000..48b94bb1a0d
--- /dev/null
+++ b/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -0,0 +1,118 @@
+"use client";
+import { FC, useCallback } from "react";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { NOTIFICATION_TABS, TNotificationTab } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
+import { CountChip } from "@/components/common";
+import {
+ NotificationsLoader,
+ NotificationEmptyState,
+ NotificationSidebarHeader,
+ AppliedFilters,
+} from "@/components/workspace-notifications";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { getNumberCount } from "@/helpers/string.helper";
+// hooks
+import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
+
+import { NotificationListRoot } from "@/plane-web/components/workspace-notifications/list-root";
+
+export const NotificationsSidebarRoot: FC = observer(() => {
+ const { workspaceSlug } = useParams();
+ // hooks
+ const { getWorkspaceBySlug } = useWorkspace();
+ const {
+ currentSelectedNotificationId,
+ unreadNotificationsCount,
+ loader,
+ notificationIdsByWorkspaceId,
+ currentNotificationTab,
+ setCurrentNotificationTab,
+ } = useWorkspaceNotifications();
+
+ const { t } = useTranslation();
+ // derived values
+ const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
+ const notificationIds = workspace ? notificationIdsByWorkspaceId(workspace.id) : undefined;
+
+ const handleTabClick = useCallback(
+ (tabValue: TNotificationTab) => {
+ if (currentNotificationTab !== tabValue) {
+ setCurrentNotificationTab(tabValue);
+ }
+ },
+ [currentNotificationTab, setCurrentNotificationTab]
+ );
+
+ if (!workspaceSlug || !workspace) return <>;
+
+ return (
+
+
+
+
+
+
+
+
+ {/* applied filters */}
+
+
+ {/* rendering notifications */}
+ {loader === "init-loader" ? (
+
+
+
+ ) : (
+ <>
+ {notificationIds && notificationIds.length > 0 ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ )}
+
+
+ );
+});
diff --git a/web/core/store/issue/issue-details/root.store.ts b/web/core/store/issue/issue-details/root.store.ts
index 5a3b394b04d..1d795dd9409 100644
--- a/web/core/store/issue/issue-details/root.store.ts
+++ b/web/core/store/issue/issue-details/root.store.ts
@@ -204,7 +204,7 @@ export class IssueDetail implements IIssueDetail {
this.commentReaction = new IssueCommentReactionStore(this);
this.subIssues = new IssueSubIssuesStore(this, serviceType);
this.link = new IssueLinkStore(this, serviceType);
- this.subscription = new IssueSubscriptionStore(this);
+ this.subscription = new IssueSubscriptionStore(this, serviceType);
this.relation = new IssueRelationStore(this);
}
diff --git a/web/core/store/issue/issue-details/subscription.store.ts b/web/core/store/issue/issue-details/subscription.store.ts
index 69b685c2316..da3b2e6bfaa 100644
--- a/web/core/store/issue/issue-details/subscription.store.ts
+++ b/web/core/store/issue/issue-details/subscription.store.ts
@@ -1,10 +1,10 @@
import set from "lodash/set";
import { action, makeObservable, observable, runInAction } from "mobx";
// services
+import { EIssueServiceType } from "@plane/constants";
import { IssueService } from "@/services/issue/issue.service";
// types
import { IIssueDetail } from "./root.store";
-
export interface IIssueSubscriptionStoreActions {
addSubscription: (issueId: string, isSubscribed: boolean | undefined | null) => void;
fetchSubscriptions: (workspaceSlug: string, projectId: string, issueId: string) => Promise
;
@@ -27,7 +27,7 @@ export class IssueSubscriptionStore implements IIssueSubscriptionStore {
// services
issueService;
- constructor(rootStore: IIssueDetail) {
+ constructor(rootStore: IIssueDetail, serviceType: EIssueServiceType) {
makeObservable(this, {
// observables
subscriptionMap: observable,
@@ -40,7 +40,7 @@ export class IssueSubscriptionStore implements IIssueSubscriptionStore {
// root store
this.rootIssueDetail = rootStore;
// services
- this.issueService = new IssueService();
+ this.issueService = new IssueService(serviceType);
}
// helper methods