Move provider to package

apps/app/app/(authenticated)/layout.tsx

@@ -1,8 +1,8 @@
 import { env } from '@/env';
 import { auth, currentUser } from '@repo/auth/server';
 import { SidebarProvider } from '@repo/design-system/components/ui/sidebar';
-import { NotificationsProvider } from '@repo/design-system/providers/notifications';
 import { showBetaFeature } from '@repo/feature-flags';
+import { NotificationsProvider } from '@repo/notifications/components/provider';
 import { secure } from '@repo/security';
 import type { ReactNode } from 'react';
 import { PostHogIdentifier } from './components/posthog-identifier';

apps/app/package.json

@@ -19,6 +19,7 @@
     "@repo/design-system": "workspace:*",
     "@repo/feature-flags": "workspace:*",
     "@repo/next-config": "workspace:*",
+    "@repo/notifications": "workspace:*",
     "@repo/observability": "workspace:*",
     "@repo/security": "workspace:*",
     "@repo/seo": "workspace:*",

packages/notifications/components/provider.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { KnockFeedProvider, KnockProvider } from '@knocklabs/react';
+import type { ReactNode } from 'react';
+import { keys } from '../keys';
+
+const knockApiKey = keys().KNOCK_SECRET_API_KEY;
+const knockFeedChannelId = keys().KNOCK_FEED_CHANNEL_ID;
+
+type NotificationsProviderProps = {
+  children: ReactNode;
+  userId: string;
+};
+
+export const NotificationsProvider = ({
+  children,
+  userId,
+}: NotificationsProviderProps) => {
+  if (!knockApiKey || !knockFeedChannelId) {
+    return children;
+  }
+
+  return (
+    <KnockProvider apiKey={knockApiKey} userId={userId}>
+      <KnockFeedProvider feedId={knockFeedChannelId}>
+        {children}
+      </KnockFeedProvider>
+    </KnockProvider>
+  );
+};