[WEB-1764] chore: revamp workspace notifications (#4947)

* chore: Initialised store and updated the components

* chore: updated store and types

* chore: updated notifications in the side and updated store

* chore: handled notification center

* chore: updates store request

* chore: notifications filter changed

* chore: updated filter logic and handled bulk read

* chore: handled filter dropdown

* chore: handled ui

* chore: resolved build error

* chore: implemented applied filters

* chore: removed old notifications

* chore: added redirection from sidebar

* chore: updated notification as read when we see the notification preview

* chore: updated read and unread validation

* chore: handled custom snooze dropdown

* chore: resolved git comments

* chore: updated structure and typos

* chore: import and prop changes

* chore: updated avatar props

* chore: updated avatar

* chore: notification unread count on the app sidebar

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

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

@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { NotificationsSidebar } 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">
+      <div className="relative w-full lg:w-2/6 border-0 lg:border-r border-custom-border-200 z-[10] flex-shrink-0 bg-custom-background-100 h-full transition-all overflow-hidden">
+        <NotificationsSidebar />
+      </div>
+      <div className="w-full h-full overflow-hidden overflow-y-auto">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { PageHead } from "@/components/core";
+import { IssuePeekOverview } from "@/components/issues";
+// constants
+import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
+// hooks
+import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
+
+const WorkspaceDashboardPage = observer(() => {
+  // hooks
+  const { currentWorkspace } = useWorkspace();
+  const { notificationIdsByWorkspaceId, getNotifications } = useWorkspaceNotifications();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Notifications` : undefined;
+
+  // fetch workspace notifications
+  const notificationMutation =
+    currentWorkspace && notificationIdsByWorkspaceId(currentWorkspace.id)
+      ? ENotificationLoader.MUTATION_LOADER
+      : ENotificationLoader.INIT_LOADER;
+  const notificationLoader =
+    currentWorkspace && notificationIdsByWorkspaceId(currentWorkspace.id)
+      ? ENotificationQueryParamType.CURRENT
+      : ENotificationQueryParamType.INIT;
+  useSWR(
+    currentWorkspace?.slug ? `WORKSPACE_NOTIFICATION` : null,
+    currentWorkspace?.slug
+      ? async () => getNotifications(currentWorkspace?.slug, notificationMutation, notificationLoader)
+      : null
+  );
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="w-ful h-full overflow-hidden overflow-y-auto">
+        <IssuePeekOverview embedIssue />
+      </div>
+    </>
+  );
+});
+
+export default WorkspaceDashboardPage;