Add Notifications

.github/workflows/build.yml

@@ -28,6 +28,8 @@ env:
   NEXT_PUBLIC_POSTHOG_HOST: "test"
   BETTERSTACK_API_KEY: "test"
   BETTERSTACK_URL: "test"
+  KNOCK_API_KEY: "test"
+  KNOCK_FEED_CHANNEL_ID: "test"
 
 # what the action will do
 jobs:

apps/app/.env.example

@@ -10,6 +10,10 @@ NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL="/"
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL="/"
 CLERK_WEBHOOK_SECRET="••••••"
 
+# Knock
+KNOCK_API_KEY="••••••"
+KNOCK_FEED_CHANNEL_ID="••••••"
+
 # @repo/lib
 RESEND_AUDIENCE_ID="••••••"
 RESEND_FROM="••••••"

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

@@ -1,5 +1,6 @@
 import { auth, currentUser } from '@clerk/nextjs/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 type { ReactElement, ReactNode } from 'react';
 import { PostHogIdentifier } from './components/posthog-identifier';
@@ -17,21 +18,23 @@ const AppLayout = async ({
   const betaFeature = await showBetaFeature();
 
   if (!user) {
-    redirectToSignIn();
+    return redirectToSignIn();
   }
 
   return (
-    <SidebarProvider>
-      <GlobalSidebar>
-        {betaFeature && (
-          <div className="m-4 rounded-full bg-success p-1.5 text-center text-sm text-success-foreground">
-            Beta feature now available
-          </div>
-        )}
-        {children}
-      </GlobalSidebar>
-      <PostHogIdentifier />
-    </SidebarProvider>
+    <NotificationsProvider userId={user.id}>
+      <SidebarProvider>
+        <GlobalSidebar>
+          {betaFeature && (
+            <div className="m-4 rounded-full bg-success p-1.5 text-center text-sm text-success-foreground">
+              Beta feature now available
+            </div>
+          )}
+          {children}
+        </GlobalSidebar>
+        <PostHogIdentifier />
+      </SidebarProvider>
+    </NotificationsProvider>
   );
 };
 

packages/design-system/lib/knock.ts

@@ -0,0 +1,9 @@
+import { Knock } from '@knocklabs/node';
+
+const knockApiKey = process.env.KNOCK_API_KEY;
+
+if (!knockApiKey) {
+  throw new Error('KNOCK_API_KEY is not set');
+}
+
+export const knock = new Knock(knockApiKey);

packages/design-system/package.json

@@ -6,6 +6,8 @@
     "@clerk/nextjs": "^6.1.0",
     "@clerk/themes": "^2.1.40",
     "@hookform/resolvers": "^3.9.1",
+    "@knocklabs/node": "^0.6.13",
+    "@knocklabs/react": "^0.2.29",
     "@logtail/next": "^0.1.5",
     "@next/third-parties": "^15.0.2",
     "@radix-ui/react-accordion": "^1.2.1",

packages/design-system/providers/notifications.tsx

@@ -0,0 +1,24 @@
+import { KnockFeedProvider, KnockProvider } from '@knocklabs/react';
+import type { ReactNode } from 'react';
+
+const knockApiKey = process.env.KNOCK_API_KEY;
+const knockFeedChannelId = process.env.KNOCK_FEED_CHANNEL_ID;
+
+if (!knockApiKey) {
+  throw new Error('KNOCK_API_KEY is not set');
+}
+
+if (!knockFeedChannelId) {
+  throw new Error('KNOCK_FEED_CHANNEL_ID is not set');
+}
+
+export const NotificationsProvider = ({
+  children,
+  userId,
+}: { children: ReactNode; userId: string }) => (
+  <KnockProvider apiKey={knockApiKey} userId={userId}>
+    <KnockFeedProvider feedId={knockFeedChannelId}>
+      {children}
+    </KnockFeedProvider>
+  </KnockProvider>
+);