add: wishlist and favourite features

BlazorFrontend/Components/Layout/MainLayout.razor

@@ -49,6 +49,10 @@
                                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
                                     Rewards
                                 </NavLink>
+                                <NavLink href="Wishlist" class="nav-link" ActiveClass="active">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mr-3"><path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /></svg>
+                                    Wishlist
+                                </NavLink>
                             }
                         </Authorized>
                     </AuthorizeView>

BlazorFrontend/Components/Pages/Books.razor

@@ -3,6 +3,7 @@
 @using BlazorFrontend.Models.Dtos
 @using Microsoft.AspNetCore.Authorization
 @inject LibraryApiClient ApiClient
+@inject WishlistService WishlistService
 @inject IJSRuntime JS
 @inject NavigationManager Navigation
 
@@ -128,6 +129,27 @@
                         </div>
                         <div class="mt-auto pt-4 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                             <button @onclick="() => ShowDetails(book.Id)" class="flex-1 btn-secondary py-1 text-[11px]">Details</button>
+                            <AuthorizeView Roles="Member">
+                                <div class="flex gap-1">
+                                    <button @onclick="() => ToggleFavourite(book)" 
+                                            class='p-1.5 rounded-md border transition-all @(IsFavourite(book.Id) ? "border-rose-200 bg-rose-50 text-rose-500" : "border-mystic-200 text-mystic-400 hover:bg-rose-50 hover:text-rose-500")' 
+                                            title='@(IsFavourite(book.Id) ? "Remove from Favourites" : "Add to Favourites")'>
+                                        <svg class="w-3.5 h-3.5" fill='@(IsFavourite(book.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                            <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001z"></path>
+                                        </svg>
+                                    </button>
+                                    @if (book.AvailableCopies == 0)
+                                    {
+                                        <button @onclick="() => ToggleWishlist(book)" 
+                                                class='p-1.5 rounded-md border transition-all @(IsInWishlist(book.Id) ? "border-amber-200 bg-amber-50 text-amber-500" : "border-mystic-200 text-mystic-400 hover:bg-amber-50 hover:text-amber-500")' 
+                                                title='@(IsInWishlist(book.Id) ? "Remove from Wishlist" : "Add to Wishlist")'>
+                                            <svg class="w-3.5 h-3.5" fill='@(IsInWishlist(book.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
+                                            </svg>
+                                        </button>
+                                    }
+                                </div>
+                            </AuthorizeView>
                             <AuthorizeView Roles="Librarian">
                                 <button @onclick="() => ShowEdit(book.Id)" class="p-1.5 rounded-md border border-mystic-200 hover:bg-mystic-50 text-mystic-600">
                                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
@@ -191,14 +213,32 @@ else if (_viewMode == ViewMode.Details && _selectedBook != null)
 
                 <div class="flex items-center gap-4 pt-4">
                     <AuthorizeView Roles="Member">
-                        @if (_selectedBook.AvailableCopies > 0)
-                        {
-                            <button @onclick="() => BorrowAsync(_selectedBook.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-mystic-200">Borrow This Book</button>
-                        }
-                        else
-                        {
-                            <button disabled class="btn-primary py-3 px-8 text-base opacity-50 cursor-not-allowed">Out of Stock</button>
-                        }
+                        <div class="flex items-center gap-3">
+                            @if (_selectedBook.AvailableCopies > 0)
+                            {
+                                <button @onclick="() => BorrowAsync(_selectedBook.Id)" class="btn-primary py-3 px-8 text-base shadow-lg shadow-mystic-200">Borrow This Book</button>
+                            }
+                            else
+                            {
+                                <div class="flex flex-col gap-2">
+                                    <button disabled class="btn-primary py-3 px-8 text-base opacity-50 cursor-not-allowed">Out of Stock</button>
+                                    <button @onclick="() => ToggleWishlist(_selectedBook)" 
+                                            class='text-xs font-bold flex items-center gap-1.5 transition-colors @(IsInWishlist(_selectedBook.Id) ? "text-amber-600 underline" : "text-mystic-400 hover:text-amber-600 hover:underline")'>
+                                        <svg class="w-4 h-4" fill='@(IsInWishlist(_selectedBook.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
+                                        </svg>
+                                        @(IsInWishlist(_selectedBook.Id) ? "In Wishlist (Notifying)" : "Add to Wishlist for Notification")
+                                    </button>
+                                </div>
+                            }
+                            <button @onclick="() => ToggleFavourite(_selectedBook)" 
+                                    class='p-3 rounded-xl border transition-all shadow-sm active:scale-95 @(IsFavourite(_selectedBook.Id) ? "border-rose-200 bg-rose-50 text-rose-500" : "border-mystic-200 text-mystic-400 hover:bg-rose-50 hover:text-rose-500")' 
+                                    title='@(IsFavourite(_selectedBook.Id) ? "Remove from Favourites" : "Add to Favourites")'>
+                                <svg class="w-6 h-6" fill='@(IsFavourite(_selectedBook.Id) ? "currentColor" : "none")' stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                    <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001z"></path>
+                                </svg>
+                            </button>
+                        </div>
                     </AuthorizeView>
                     
                     <AuthorizeView Roles="Librarian">
@@ -394,6 +434,57 @@ else if (_viewMode == ViewMode.Create || _viewMode == ViewMode.Edit)
             _formModel.CategoryIds.Remove(id);
     }
 
+    private List<BookDto> _wishlist = new();
+    private List<BookDto> _favourites = new();
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await LoadCollectionsAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task LoadCollectionsAsync()
+    {
+        _wishlist = await WishlistService.GetWishlistAsync();
+        _favourites = await WishlistService.GetFavouritesAsync();
+    }
+
+    private bool IsFavourite(int id) => _favourites.Any(b => b.Id == id);
+    private bool IsInWishlist(int id) => _wishlist.Any(b => b.Id == id);
+
+    private async Task ToggleFavourite(BookDto book)
+    {
+        if (IsFavourite(book.Id))
+        {
+            await WishlistService.RemoveFromFavouriteAsync(book.Id);
+            await JS.InvokeVoidAsync("showToast", $"Removed \"{book.Title}\" from favourites", "success");
+        }
+        else
+        {
+            await WishlistService.AddToFavouritesAsync(book);
+            await JS.InvokeVoidAsync("showToast", $"Added \"{book.Title}\" to favourites!", "success");
+        }
+        await LoadCollectionsAsync();
+    }
+
+    private async Task ToggleWishlist(BookDto book)
+    {
+        if (IsInWishlist(book.Id))
+        {
+            await WishlistService.RemoveFromWishlistAsync(book.Id);
+            await JS.InvokeVoidAsync("showToast", $"Removed \"{book.Title}\" from wishlist", "success");
+        }
+        else
+        {
+            await WishlistService.AddToWishlistAsync(book);
+            await JS.InvokeVoidAsync("showToast", $"Added \"{book.Title}\" to wishlist!", "success");
+        }
+        await LoadCollectionsAsync();
+    }
+
     private async Task HandleSubmit()
     {
         _isSubmitting = true;

BlazorFrontend/Components/Pages/Wishlist.razor

@@ -0,0 +1,192 @@
+@page "/Wishlist"
+@using BlazorFrontend.Services
+@using BlazorFrontend.Models.Dtos
+@using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Member")]
+@inject WishlistService WishlistService
+@inject IJSRuntime JS
+@inject NavigationManager Navigation
+
+<PageTitle>My Wishlist & Favourites</PageTitle>
+
+<div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-6 animate-in fade-in slide-in-from-top-4 duration-500">
+    <div>
+        <h1 class="text-3xl font-extrabold tracking-tight text-mystic-900">My Collections</h1>
+        <p class="text-mystic-600 mt-1">Track books you want to borrow and your all-time favourites.</p>
+    </div>
+</div>
+
+<div class="mb-6 border-b border-mystic-200">
+    <nav class="-mb-px flex gap-6">
+        <button @onclick='() => _activeTab = "wishlist"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "wishlist" ? "border-amber-500 text-amber-600" : "border-transparent text-mystic-400 hover:text-amber-500")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+                </svg>
+                Wishlist
+                @if (_wishlist.Any())
+                {
+                    <span class="ml-1 px-1.5 py-0.5 rounded-full bg-amber-500 text-white text-[10px]">@_wishlist.Count</span>
+                }
+            </span>
+        </button>
+        <button @onclick='() => _activeTab = "favourites"'
+                class='pb-3 text-sm font-semibold border-b-2 transition-all @(_activeTab == "favourites" ? "border-rose-500 text-rose-600" : "border-transparent text-mystic-400 hover:text-rose-500")'>
+            <span class="inline-flex items-center gap-1.5">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                </svg>
+                Favourites
+                @if (_favourites.Any())
+                {
+                    <span class="ml-1 px-1.5 py-0.5 rounded-full bg-rose-500 text-white text-[10px]">@_favourites.Count</span>
+                }
+            </span>
+        </button>
+    </nav>
+</div>
+
+@if (_isLoading)
+{
+    <div class="py-20 flex justify-center">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-mystic-900"></div>
+    </div>
+}
+else
+{
+    <div class="animate-in fade-in duration-300">
+        @if (_activeTab == "wishlist")
+        {
+            @if (!_wishlist.Any())
+            {
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <p class="text-mystic-400 font-medium">Your wishlist is empty. Add books that are currently out of stock!</p>
+                    <a href="Books" class="inline-block mt-4 text-sm font-bold text-mystic-900 hover:underline underline-offset-4">Browse Catalog →</a>
+                </div>
+            }
+            else
+            {
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    @foreach (var book in _wishlist)
+                    {
+                        <div class="card p-4 flex gap-4 group hover:shadow-md transition-shadow relative">
+                            <div class="w-20 h-28 bg-mystic-100 rounded-lg flex-shrink-0 flex items-center justify-center text-mystic-300 overflow-hidden border border-mystic-100">
+                                @if (!string.IsNullOrWhiteSpace(book.CoverUrl))
+                                {
+                                    <img src="@book.CoverUrl" alt="@book.Title" class="w-full h-full object-cover" />
+                                }
+                                else
+                                {
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                                }
+                            </div>
+                            <div class="flex-grow min-w-0">
+                                <h3 class="text-sm font-bold text-mystic-900 truncate">@book.Title</h3>
+                                <p class="text-xs text-mystic-500 mt-0.5 truncate">@book.Author</p>
+                                <div class="mt-2">
+                                    <span class="inline-flex items-center rounded-full @(book.AvailableCopies > 0 ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700") px-2 py-0.5 text-[10px] font-bold">
+                                        @(book.AvailableCopies > 0 ? "Now Available" : "Out of Stock")
+                                    </span>
+                                </div>
+                                <div class="mt-4 flex items-center gap-2">
+                                    <button @onclick='() => Navigation.NavigateTo($"/Books")' class="text-[10px] font-bold text-mystic-600 hover:text-mystic-900 uppercase tracking-tight">View Info</button>
+                                    <span class="text-mystic-200">|</span>
+                                    <button @onclick="() => RemoveFromWishlist(book.Id)" class="text-[10px] font-bold text-rose-600 hover:text-rose-700 uppercase tracking-tight">Remove</button>
+                                </div>
+                            </div>
+                            @if (book.AvailableCopies > 0)
+                            {
+                                <div class="absolute -top-2 -right-2 bg-emerald-500 text-white p-1 rounded-full shadow-sm animate-bounce">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                                </div>
+                            }
+                        </div>
+                    }
+                </div>
+                <div class="mt-8 p-4 bg-mystic-900 rounded-2xl text-white flex items-center gap-4">
+                    <div class="p-2 bg-mystic-800 rounded-lg">
+                        <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    </div>
+                    <p class="text-xs font-medium">We'll notify you via Firebase when out-of-stock items become available!</p>
+                </div>
+            }
+        }
+        else
+        {
+            @if (!_favourites.Any())
+            {
+                <div class="py-20 text-center bg-mystic-50 rounded-3xl border-2 border-dashed border-mystic-200">
+                    <p class="text-mystic-400 font-medium">You haven't added any favourites yet.</p>
+                    <a href="Books" class="inline-block mt-4 text-sm font-bold text-mystic-900 hover:underline underline-offset-4">Browse Catalog →</a>
+                </div>
+            }
+            else
+            {
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    @foreach (var book in _favourites)
+                    {
+                        <div class="card p-4 flex gap-4 group hover:shadow-md transition-shadow">
+                            <div class="w-20 h-28 bg-mystic-100 rounded-lg flex-shrink-0 flex items-center justify-center text-mystic-300 overflow-hidden border border-mystic-100">
+                                @if (!string.IsNullOrWhiteSpace(book.CoverUrl))
+                                {
+                                    <img src="@book.CoverUrl" alt="@book.Title" class="w-full h-full object-cover" />
+                                }
+                                else
+                                {
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                                }
+                            </div>
+                            <div class="flex-grow min-w-0">
+                                <h3 class="text-sm font-bold text-mystic-900 truncate">@book.Title</h3>
+                                <p class="text-xs text-mystic-500 mt-0.5 truncate">@book.Author</p>
+                                <div class="mt-4 flex items-center gap-2">
+                                    <button @onclick='() => Navigation.NavigateTo($"/Books")' class="text-[10px] font-bold text-mystic-600 hover:text-mystic-900 uppercase tracking-tight">View Info</button>
+                                    <span class="text-mystic-200">|</span>
+                                    <button @onclick="() => RemoveFromFavourite(book.Id)" class="text-[10px] font-bold text-rose-600 hover:text-rose-700 uppercase tracking-tight">Remove</button>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+            }
+        }
+    </div>
+}
+
+@code {
+    private string _activeTab = "wishlist";
+    private bool _isLoading = true;
+    private List<BookDto> _wishlist = new();
+    private List<BookDto> _favourites = new();
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await LoadDataAsync();
+            _isLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _wishlist = await WishlistService.GetWishlistAsync();
+        _favourites = await WishlistService.GetFavouritesAsync();
+    }
+
+    private async Task RemoveFromWishlist(int id)
+    {
+        await WishlistService.RemoveFromWishlistAsync(id);
+        await LoadDataAsync();
+        await JS.InvokeVoidAsync("showToast", "Removed from wishlist", "success");
+    }
+
+    private async Task RemoveFromFavourite(int id)
+    {
+        await WishlistService.RemoveFromFavouriteAsync(id);
+        await LoadDataAsync();
+        await JS.InvokeVoidAsync("showToast", "Removed from favourites", "success");
+    }
+}

BlazorFrontend/Program.cs

@@ -28,6 +28,7 @@ builder.Services.AddScoped(sp =>
 
 
 builder.Services.AddScoped<LibraryApiClient>();
+builder.Services.AddScoped<WishlistService>();
 
 var app = builder.Build();
 

BlazorFrontend/Services/WishlistService.cs

@@ -0,0 +1,87 @@
+using BlazorFrontend.Models.Dtos;
+using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
+using System.Text.Json;
+
+namespace BlazorFrontend.Services;
+
+public class WishlistService
+{
+    private readonly ProtectedLocalStorage _localStorage;
+    private const string WishlistKey = "user_wishlist";
+    private const string FavouriteKey = "user_favourites";
+
+    public WishlistService(ProtectedLocalStorage localStorage)
+    {
+        _localStorage = localStorage;
+    }
+
+    public async Task<List<BookDto>> GetWishlistAsync()
+    {
+        try
+        {
+            var result = await _localStorage.GetAsync<string>(WishlistKey);
+            if (result.Success && !string.IsNullOrWhiteSpace(result.Value))
+            {
+                return JsonSerializer.Deserialize<List<BookDto>>(result.Value) ?? new List<BookDto>();
+            }
+        }
+        catch { }
+        return new List<BookDto>();
+    }
+
+    public async Task AddToWishlistAsync(BookDto book)
+    {
+        var list = await GetWishlistAsync();
+        if (!list.Any(b => b.Id == book.Id))
+        {
+            list.Add(book);
+            await _localStorage.SetAsync(WishlistKey, JsonSerializer.Serialize(list));
+        }
+    }
+
+    public async Task RemoveFromWishlistAsync(int bookId)
+    {
+        var list = await GetWishlistAsync();
+        var item = list.FirstOrDefault(b => b.Id == bookId);
+        if (item != null)
+        {
+            list.Remove(item);
+            await _localStorage.SetAsync(WishlistKey, JsonSerializer.Serialize(list));
+        }
+    }
+
+    public async Task<List<BookDto>> GetFavouritesAsync()
+    {
+        try
+        {
+            var result = await _localStorage.GetAsync<string>(FavouriteKey);
+            if (result.Success && !string.IsNullOrWhiteSpace(result.Value))
+            {
+                return JsonSerializer.Deserialize<List<BookDto>>(result.Value) ?? new List<BookDto>();
+            }
+        }
+        catch { }
+        return new List<BookDto>();
+    }
+
+    public async Task AddToFavouritesAsync(BookDto book)
+    {
+        var list = await GetFavouritesAsync();
+        if (!list.Any(b => b.Id == book.Id))
+        {
+            list.Add(book);
+            await _localStorage.SetAsync(FavouriteKey, JsonSerializer.Serialize(list));
+        }
+    }
+
+    public async Task RemoveFromFavouriteAsync(int bookId)
+    {
+        var list = await GetFavouritesAsync();
+        var item = list.FirstOrDefault(b => b.Id == bookId);
+        if (item != null)
+        {
+            list.Remove(item);
+            await _localStorage.SetAsync(FavouriteKey, JsonSerializer.Serialize(list));
+        }
+    }
+}