From f06f74b9e0b704601e8c374b9f50799ff32afdcb Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 5 Aug 2026 09:26:20 +0000
Subject: [PATCH] feat(AppHeader): add notifications click handler and count
 display

---
 apps/portal/src/app/layouts/PortalLayout.tsx |  2 ++
 libs/ui/src/lib/layout/AppHeader.tsx         | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/layouts/PortalLayout.tsx b/apps/portal/src/app/layouts/PortalLayout.tsx
index 38474e143..87c755c19 100644
--- a/apps/portal/src/app/layouts/PortalLayout.tsx
+++ b/apps/portal/src/app/layouts/PortalLayout.tsx
@@ -255,6 +255,8 @@ export function PortalLayout() {
           userName={displayName || t("app.name")}
           userInitials={initials}
           supportedLanguages={SUPPORTED_LANGUAGES}
+          onNotificationsClick={() => navigate("/notifications")}
+          notificationCount={unseen?.count}
         />
       </AppShell.Header>
 
diff --git a/libs/ui/src/lib/layout/AppHeader.tsx b/libs/ui/src/lib/layout/AppHeader.tsx
index b624b3db3..a7e14a148 100644
--- a/libs/ui/src/lib/layout/AppHeader.tsx
+++ b/libs/ui/src/lib/layout/AppHeader.tsx
@@ -34,6 +34,8 @@ interface AppHeaderProps {
   userName?: string;
   userInitials?: string;
   supportedLanguages: readonly string[];
+  onNotificationsClick?: () => void;
+  notificationCount?: number;
 }
 
 export function AppHeader({
@@ -46,6 +48,8 @@ export function AppHeader({
   userName = 'User',
   userInitials = '?',
   supportedLanguages,
+  onNotificationsClick,
+  notificationCount,
 }: AppHeaderProps) {
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
 
@@ -201,9 +205,17 @@ export function AppHeader({
             e.currentTarget.style.boxShadow =
               '0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.06)';
           }}
+          onClick={onNotificationsClick}
           aria-label="Notifications"
         >
-          <Indicator color="red" size={9} offset={5} withBorder>
+          <Indicator
+            color="red"
+            size={notificationCount ? 16 : 9}
+            offset={notificationCount ? 2 : 5}
+            withBorder
+            disabled={notificationCount === 0}
+            label={notificationCount || undefined}
+          >
             <IconBell size={19} />
           </Indicator>
         </UnstyledButton>