fix(app): customize Inbox component

Author: chasprowebdev

apps/app/src/components/notifications/notification-bell.tsx

@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
 import { env } from '@/env.mjs';
 import { Inbox } from '@novu/nextjs';
 import { useSession } from '@/utils/auth-client';
+import { Bell, Settings } from 'lucide-react';
 
 export function NotificationBell() {
   const applicationIdentifier = env.NEXT_PUBLIC_NOVU_APPLICATION_IDENTIFIER;
@@ -17,20 +18,40 @@ export function NotificationBell() {
     return null;
   }
 
+  const appearance = {
+    icons: {
+      bell: () => <Bell size={20} />,
+      cogs: () => <Settings size={20} />,
+    },
+    elements: {
+      popoverContent: {
+        right: '8px',
+        left: 'auto !important',
+        marginTop: '8px',
+        width: '360px',
+      },
+      notificationDot: {
+        backgroundColor: 'hsl(var(--primary))',
+      },
+      notificationBar: ({ notification }: { notification: any }) => {
+        return notification.isRead ? 'bg-transparent' : 'bg-primary';
+      }
+    }
+  };
+
   return (
     <Inbox
       applicationIdentifier={applicationIdentifier}
       subscriber={`${sessionData.userId}-${orgId}`}
-      appearance={{
-        elements: {
-          popoverContent: {
-            right: '8px',
-            left: 'auto !important',
-            marginTop: '8px',
-            width: '360px',
-          },
-        },
-      }}
+      appearance={appearance}
+      renderSubject={(notification) => <strong>{notification.subject}</strong>}
+      renderBody={(notification) => (
+        <div className="mt-1">
+          <p className="text-xs text-muted-foreground">
+            {notification.body}
+          </p>
+        </div>
+      )}
     />
   );
 }