Add Notifications

.github/workflows/build.yml

@@ -65,6 +65,8 @@ jobs:
           echo "BETTERSTACK_URL=https://test.com" >> apps/app/.env.local
           echo "FLAGS_SECRET=FcnUGt7tT-4cOw-D_1GoXAH1bU7ljDBr01F5w4dxrdQ" >> apps/app/.env.local
           echo "ARCJET_KEY=ajkey_test" >> apps/app/.env.local
+          echo "KNOCK_API_KEY=test" >> apps/app/.env.local
+          echo "KNOCK_FEED_CHANNEL_ID=test" >> apps/app/.env.local
 
           echo "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_JA==" >> apps/app/.env.local
           echo "NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in" >> apps/app/.env.local

apps/app/.env.example

@@ -11,6 +11,8 @@ BETTERSTACK_API_KEY=""
 BETTERSTACK_URL=""
 FLAGS_SECRET=""
 ARCJET_KEY=""
+KNOCK_API_KEY="••••••"
+KNOCK_FEED_CHANNEL_ID="••••••"
 
 # Client
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
@@ -24,4 +26,4 @@ NEXT_PUBLIC_POSTHOG_HOST=""
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
 NEXT_PUBLIC_WEB_URL="http://localhost:3001"
 NEXT_PUBLIC_DOCS_URL="http://localhost:3004"
-NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL="http://localhost:3000"
+NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL="http://localhost:3000"

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

@@ -2,6 +2,7 @@ import arcjet, { detectBot } from '@/lib/arcjet';
 import { request } from '@arcjet/next';
 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';
@@ -41,21 +42,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

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
+    "@knocklabs/node": "^0.6.13",
+    "@knocklabs/react": "^0.2.29",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

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>
+);