Add notifications feature and update feature flags

This update includes creating new files for the notifications feature along with adding two feature flags for enabling notifications and realtime notifications. All the code and package dependencies required for the notifications functionality have been added. The 'pnpm-lock.yaml' has also been updated due to the inclusion of new package dependencies.

apps/web/app/(dashboard)/home/(user)/_components/user-account-header.tsx

@@ -1,6 +1,8 @@
 import { PageHeader } from '@kit/ui/page';
 
-import UserLayoutMobileNavigation from './user-layout-mobile-navigation';
+import { UserNotifications } from '~/(dashboard)/home/(user)/_components/user-notifications';
+
+import { UserLayoutMobileNavigation } from './user-layout-mobile-navigation';
 
 export function UserAccountHeader(
   props: React.PropsWithChildren<{
@@ -14,7 +16,11 @@ export function UserAccountHeader(
       description={props.description}
       mobileNavigation={<UserLayoutMobileNavigation />}
     >
-      {props.children}
+      <div className={'flex space-x-4'}>
+        {props.children}
+
+        <UserNotifications />
+      </div>
     </PageHeader>
   );
 }

apps/web/app/(dashboard)/home/(user)/_components/user-layout-mobile-navigation.tsx

@@ -64,8 +64,6 @@ export function UserLayoutMobileNavigation() {
   );
 }
 
-export default UserLayoutMobileNavigation;
-
 function DropdownLink(
   props: React.PropsWithChildren<{
     path: string;

apps/web/app/(dashboard)/home/(user)/_components/user-notifications.tsx

@@ -0,0 +1,22 @@
+import { use } from 'react';
+
+import { NotificationsPopover } from '@kit/notifications/components';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+
+import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
+
+export function UserNotifications() {
+  const { user } = use(loadUserWorkspace());
+
+  if (!featuresFlagConfig.enableNotifications) {
+    return null;
+  }
+
+  return (
+    <NotificationsPopover
+      accountIds={[user.id]}
+      realtime={featuresFlagConfig.realtimeNotifications}
+    />
+  );
+}

apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx

@@ -1,5 +1,7 @@
 import { PageHeader } from '@kit/ui/page';
 
+import { AccountNotifications } from '~/(dashboard)/home/[account]/_components/account-notifications';
+
 import { AccountLayoutMobileNavigation } from './account-layout-mobile-navigation';
 
 export function AccountLayoutHeader({
@@ -18,7 +20,11 @@ export function AccountLayoutHeader({
       description={description}
       mobileNavigation={<AccountLayoutMobileNavigation account={account} />}
     >
-      {children}
+      <div className={'flex space-x-4'}>
+        {children}
+
+        <AccountNotifications accountId={account} />
+      </div>
     </PageHeader>
   );
 }

apps/web/app/(dashboard)/home/[account]/_components/account-notifications.tsx

@@ -0,0 +1,22 @@
+import { use } from 'react';
+
+import { NotificationsPopover } from '@kit/notifications/components';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+
+import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
+
+export function AccountNotifications(params: { accountId: string }) {
+  const { user, account } = use(loadTeamWorkspace(params.accountId));
+
+  if (!featuresFlagConfig.enableNotifications) {
+    return null;
+  }
+
+  return (
+    <NotificationsPopover
+      accountIds={[user.id, account.id]}
+      realtime={featuresFlagConfig.realtimeNotifications}
+    />
+  );
+}