@ansiversa/components 0.0.104 → 0.0.105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.104",
+  "version": "0.0.105",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/AvNavbarActions.astro

@@ -18,6 +18,7 @@ interface User {
 interface Props {
   className?: string;
   user?: User;
+  notificationUnreadCount?: number;
 
   /** Additional HTML attributes */
   [attrs: string]: any;
@@ -26,6 +27,7 @@ interface Props {
 const {
   className = "",
   user,
+  notificationUnreadCount,
   ...attrs
 } = Astro.props as Props;
 
@@ -99,6 +101,9 @@ const authLink: NavLink = {
 
 const userInitial =
   (user?.name?.charAt(0) ?? user?.email?.charAt(0) ?? "?").toUpperCase();
+
+const unreadCount = Number(notificationUnreadCount ?? 0);
+const unreadBadge = unreadCount > 99 ? "99+" : `${unreadCount}`;
 ---
 
 <div class={classAttr} {...attrs}>
@@ -162,6 +167,11 @@ const userInitial =
 
           <a href={`${ROOT_URL}/notifications`} class="av-user-menu-item av-dropdown-item" role="menuitem">
             <span>Notifications</span>
+            {unreadCount > 0 && (
+              <span class="av-badge av-badge-soft" aria-label={`${unreadBadge} unread notifications`}>
+                {unreadBadge}
+              </span>
+            )}
           </a>
 
           <a href={`${ROOT_URL}/favorites`} class="av-user-menu-item av-dropdown-item" role="menuitem">

package/src/layouts/WebLayout.astro

@@ -7,11 +7,13 @@ import AvNavbarActions from "../AvNavbarActions.astro";
 interface Props {
   title?: string;
   description?: string;
+  notificationUnreadCount?: number;
 }
 
 const {
   title = "Ansiversa",
   description = "Ansiversa – A unified ecosystem of premium Apps designed to feel simple, powerful, and delightful.",
+  notificationUnreadCount = 0,
 } = Astro.props;
 
 const user = Astro.locals.user;
@@ -72,7 +74,7 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
     <!-- Top Navigation -->
     <AvNavbar>
       <AvBrand />
-      <AvNavbarActions user={user} />
+      <AvNavbarActions user={user} notificationUnreadCount={notificationUnreadCount} />
     </AvNavbar>
 
     <!-- Main content -->