add: real time update notification badge count

Backend/Features/Notification/INotificationService.cs

@@ -10,6 +10,7 @@ public interface INotificationService
     Task<bool> SendAndSaveNotificationAsync(Guid userId, string? token, string title, string body, string type = "Info", string? actionLink = null, string? actionText = null);
     Task<List<NotificationDto>> GetUserNotificationsAsync(Guid userId);
     Task<bool> MarkAllAsReadAsync(Guid userId);
+    Task<bool> MarkAsReadAsync(int id);
     Task<int> GetUnreadCountAsync(Guid userId);
 }
 

Backend/Features/Notification/NotificationService.cs

@@ -123,6 +123,16 @@ public class NotificationService : INotificationService
         return true;
     }
 
+    public async Task<bool> MarkAsReadAsync(int id)
+    {
+        var notif = await _context.Notifications.FindAsync(id);
+        if (notif == null) return false;
+
+        notif.IsRead = true;
+        await _context.SaveChangesAsync();
+        return true;
+    }
+
     public async Task<int> GetUnreadCountAsync(Guid userId)
     {
         return await _context.Notifications

Backend/Features/Notification/NotificationsController.cs

@@ -9,7 +9,7 @@ using System.Threading.Tasks;
 namespace Backend.Features.Notification;
 
 [ApiController]
-[Route("api/[controller]")]
+[Route("api/notifications")]
 public class NotificationsController : ControllerBase
 {
     private readonly INotificationService _notificationService;
@@ -58,6 +58,14 @@ public class NotificationsController : ControllerBase
         return Ok();
     }
 
+    [HttpPost("mark-read/{id}")]
+    public async Task<IActionResult> MarkAsRead(int id)
+    {
+        var success = await _notificationService.MarkAsReadAsync(id);
+        if (!success) return NotFound();
+        return Ok();
+    }
+
     [HttpPost("subscription-expiry")]
     public async Task<IActionResult> SendSubscriptionExpiryNotification([FromBody] SubscriptionExpiryNotificationRequest request)
     {

BlazorWebAssembly/Layout/MainLayout.razor

@@ -1,10 +1,11 @@
 @inherits LayoutComponentBase
+@implements IDisposable
 @using BlazorWebAssembly.Services
-@using Microsoft.AspNetCore.Components.Authorization
 @inject ThemeService ThemeService
 @inject AuthenticationStateProvider AuthStateProvider
 @inject IJSRuntime JS
 @inject LibraryApiClient ApiClient
+@inject NotificationStateService NotifService
 
 <AuthorizeView>
     <Authorized>
@@ -48,12 +49,12 @@
                         </div>
                     </div>
                     <div class="flex items-center gap-6">
-                        <NavLink href="/notifications" class="relative text-muted hover:text-primary transition-colors">
+                        <NavLink href="/notifications" class="relative text-muted hover:text-primary transition-colors p-2 rounded-xl hover:bg-primary/5">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
-                            @if (_unreadCount > 0)
+                            @if (NotifService.UnreadCount > 0)
                             {
-                                <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center bg-primary text-white text-[8px] font-black rounded-full border-2 border-card animate-bounce">
-                                    @(_unreadCount > 9 ? "9+" : _unreadCount)
+                                <span class="absolute -top-0.5 -right-0.5 flex h-5 w-5 items-center justify-center bg-primary text-white text-[9px] font-black rounded-full border-2 border-card shadow-md animate-bounce z-10">
+                                    @(NotifService.UnreadCount > 9 ? "9+" : NotifService.UnreadCount)
                                 </span>
                             }
                         </NavLink>
@@ -155,38 +156,53 @@
 </AuthorizeView>
 
 @code {
-    private int _unreadCount = 0;
-
     protected override async Task OnInitializedAsync()
     {
         await ThemeService.InitializeAsync();
+        AuthStateProvider.AuthenticationStateChanged += OnAuthStateChanged;
+        NotifService.OnChange += HandleNotifChange;
+        _ = UpdateNotificationCount();
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    private async void OnAuthStateChanged(Task<AuthenticationState> task)
     {
-        if (firstRender)
+        await InvokeAsync(UpdateNotificationCount);
+    }
+
+    private async Task UpdateNotificationCount()
+    {
+        try
         {
             var authState = await AuthStateProvider.GetAuthenticationStateAsync();
-            var user = authState.User;
-
-            if (user.Identity?.IsAuthenticated == true)
+            if (authState.User.Identity?.IsAuthenticated == true)
             {
-                try
+                var count = await ApiClient.GetUnreadNotificationCountAsync();
+                NotifService.SetUnreadCount(count);
+                
+                // Also update FCM token if not already done
+                var token = await JS.InvokeAsync<string>("getFcmToken");
+                if (!string.IsNullOrEmpty(token))
                 {
-                    _unreadCount = await ApiClient.GetUnreadNotificationCountAsync();
-                    StateHasChanged();
-
-                    var token = await JS.InvokeAsync<string>("getFcmToken");
-                    if (!string.IsNullOrEmpty(token))
-                    {
-                        await ApiClient.UpdateFcmTokenAsync(token);
-                    }
-                }
-                catch (Exception ex)
-                {
-                    Console.WriteLine($"FCM Token Error: {ex.Message}");
+                    await ApiClient.UpdateFcmTokenAsync(token);
                 }
             }
         }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[MainLayout] Error updating notifications: {ex.Message}");
+        }
+    }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        // No longer using OnAfterRender for initial fetch as it's handled in OnInitialized and events
+    }
+
+    private async void HandleNotifChange() => await InvokeAsync(StateHasChanged);
+
+    public void Dispose()
+    {
+        AuthStateProvider.AuthenticationStateChanged -= OnAuthStateChanged;
+        NotifService.OnChange -= HandleNotifChange;
     }
 }

BlazorWebAssembly/Layout/NavMenu.razor

@@ -9,11 +9,6 @@
         Books Catalog
     </NavLink>
 
-    <NavLink class="nav-link-v" href="/notifications">
-        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
-        Notifications
-    </NavLink>
-
     <AuthorizeView Roles="Member">
         <NavLink class="nav-link-v" href="/borrowings">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>

BlazorWebAssembly/Pages/Notifications.razor

@@ -2,6 +2,7 @@
 @using LibraryManagement.Shared.Models
 @using BlazorWebAssembly.Services
 @inject LibraryApiClient ApiClient
+@inject NotificationStateService NotifService
 @inject IJSRuntime JS
 
 <PageTitle>Notifications | LibraryLuxe</PageTitle>
@@ -50,7 +51,8 @@
                 <div class="grid gap-4">
                     @foreach (var notif in _notifications)
                     {
-                        <div class="group bg-card rounded-2xl p-6 border border-border hover:border-primary/30 transition-all duration-300 shadow-sm relative overflow-hidden @(!notif.IsRead ? "bg-primary/[0.02]" : "")">
+                        <div @onclick="() => MarkAsRead(notif)" 
+                             class="group bg-card rounded-2xl p-6 border border-border hover:border-primary/30 transition-all duration-300 shadow-sm relative overflow-hidden cursor-pointer @(!notif.IsRead ? "bg-primary/[0.02]" : "")">
                             @if (!notif.IsRead)
                             {
                                 <div class="absolute left-0 top-0 bottom-0 w-1.5 bg-primary"></div>
@@ -129,7 +131,31 @@
         try
         {
             var success = await ApiClient.MarkNotificationsReadAsync();
-            if (success) await LoadNotifications();
+            if (success) 
+            {
+                NotifService.SetUnreadCount(0);
+                await LoadNotifications();
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error: {ex.Message}");
+        }
+    }
+
+    private async Task MarkAsRead(NotificationDto notif)
+    {
+        if (notif.IsRead) return;
+
+        try
+        {
+            var success = await ApiClient.MarkAsReadAsync(notif.Id);
+            if (success)
+            {
+                notif.IsRead = true;
+                NotifService.DecrementCount();
+                StateHasChanged();
+            }
         }
         catch (Exception ex)
         {

BlazorWebAssembly/Program.cs

@@ -35,4 +35,7 @@ builder.Services.AddScoped<LibraryApiClient>();
 // Register WishlistService
 builder.Services.AddScoped<WishlistService>();
 
+// Register NotificationStateService
+builder.Services.AddScoped<NotificationStateService>();
+
 await builder.Build().RunAsync();

BlazorWebAssembly/Services/LibraryApiClient.cs

@@ -383,6 +383,12 @@ namespace BlazorWebAssembly.Services
             return response.IsSuccessStatusCode;
         }
 
+        public async Task<bool> MarkAsReadAsync(int id)
+        {
+            var response = await _httpClient.PostAsync($"api/notifications/mark-read/{id}", null);
+            return response.IsSuccessStatusCode;
+        }
+
         public async Task<bool> UpdateFcmTokenAsync(string fcmToken)
         {
             var response = await _httpClient.PostAsJsonAsync("api/users/fcm-token", new { fcmToken });

BlazorWebAssembly/Services/NotificationStateService.cs

@@ -0,0 +1,27 @@
+using System;
+
+namespace BlazorWebAssembly.Services
+{
+    public class NotificationStateService
+    {
+        public int UnreadCount { get; private set; }
+        public event Action? OnChange;
+
+        public void SetUnreadCount(int count)
+        {
+            UnreadCount = count;
+            NotifyStateChanged();
+        }
+
+        public void DecrementCount()
+        {
+            if (UnreadCount > 0)
+            {
+                UnreadCount--;
+                NotifyStateChanged();
+            }
+        }
+
+        private void NotifyStateChanged() => OnChange?.Invoke();
+    }
+}