Add notifications feed to app

haydenbleasel · Jan 12, 2025 · 6d637bf · 6d637bf
1 parent beef5ef
commit 6d637bf
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 31 deletions.
diff --git a/apps/app/app/(authenticated)/components/sidebar.tsx b/apps/app/app/(authenticated)/components/sidebar.tsx
@@ -2,6 +2,7 @@
 
 import { OrganizationSwitcher, UserButton } from '@repo/auth/client';
 import { ModeToggle } from '@repo/design-system/components/mode-toggle';
+import { Button } from '@repo/design-system/components/ui/button';
 import {
   Collapsible,
   CollapsibleContent,
@@ -33,8 +34,10 @@ import {
   useSidebar,
 } from '@repo/design-system/components/ui/sidebar';
 import { cn } from '@repo/design-system/lib/utils';
+import { NotificationsTrigger } from '@repo/notifications/components/trigger';
 import {
   AnchorIcon,
+  BellIcon,
   BookOpenIcon,
   BotIcon,
   ChevronRightIcon,
@@ -331,7 +334,14 @@ export const GlobalSidebar = ({ children }: GlobalSidebarProperties) => {
                   },
                 }}
               />
-              <ModeToggle />
+              <div className="flex shrink-0 items-center gap-px">
+                <ModeToggle />
+                <NotificationsTrigger>
+                  <Button variant="ghost" size="icon" className="shrink-0">
+                    <BellIcon size={16} className="text-muted-foreground" />
+                  </Button>
+                </NotificationsTrigger>
+              </div>
             </SidebarMenuItem>
           </SidebarMenu>
         </SidebarFooter>

diff --git a/packages/design-system/components/mode-toggle.tsx b/packages/design-system/components/mode-toggle.tsx
@@ -23,7 +23,7 @@ export const ModeToggle = () => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          variant="outline"
+          variant="ghost"
           size="icon"
           className="shrink-0 text-foreground"
         >

diff --git a/packages/notifications/components/feed.tsx b/packages/notifications/components/feed.tsx
diff --git a/packages/notifications/components/trigger.tsx b/packages/notifications/components/trigger.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { NotificationFeedPopover } from '@knocklabs/react';
+import { useRef, useState } from 'react';
+import type { ReactElement, RefObject } from 'react';
+import { keys } from '../keys';
+
+// Required CSS import, unless you're overriding the styling
+import '@knocklabs/react/dist/index.css';
+
+type NotificationsTriggerProperties = {
+  children: ReactElement;
+};
+
+export const NotificationsTrigger = ({
+  children,
+}: NotificationsTriggerProperties) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const notifButtonRef = useRef<HTMLDivElement>(null);
+
+  if (!keys().NEXT_PUBLIC_KNOCK_API_KEY) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* biome-ignore lint/nursery/noStaticElementInteractions: "avoid nested buttons" */}
+      <div
+        onClick={() => setIsVisible(!isVisible)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            setIsVisible(!isVisible);
+          }
+        }}
+        ref={notifButtonRef}
+      >
+        {children}
+      </div>
+      {notifButtonRef.current && (
+        <NotificationFeedPopover
+          buttonRef={notifButtonRef as RefObject<HTMLElement>}
+          isVisible={isVisible}
+          onClose={() => setIsVisible(false)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/packages/security/index.ts b/packages/security/index.ts
@@ -37,6 +37,10 @@ export const secure = async (
   const decision = await aj.protect(req);
 
   if (decision.isDenied()) {
+    console.warn(
+      `Arcjet decision: ${JSON.stringify(decision.reason, null, 2)}`
+    );
+
     if (decision.reason.isBot()) {
       throw new Error('No bots allowed');
     }