Merge pull request 'Authors now showing on the listing' (#31) from mock-data into main

Reviewed-on: #31

MidrandBookshop/Components/Layout/CartItem.cs

@@ -1,10 +0,0 @@
-namespace MidrandBookshop.Components.Layout;
-
-public class CartItem
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public int Price { get; set; }
-        public int Quantity { get; set; }
-    }

MidrandBookshop/Components/Pages/Home.razor

@@ -1,7 +1,9 @@
 @page "/"
 @rendermode InteractiveServer
 
-<div id="top-target" class="container text-center text-hero-wrapper">
+<div id="top-target" @ref="topTargetRef" class="container text-center text-hero-wrapper" />
+
+<div class="container text-center text-hero-wrapper">
     <h1 class="display-3 text-dark mb-3 px-2 master-headline">
         Discover thoughtfully curated<br>books for every reader.
     </h1>
@@ -147,7 +149,7 @@
             {
                 <BookCard Id="@book.Id"
                           Title="@book.Name"
-                          Author="@(ActiveAuthorFilterName ?? "Multiple Authors")"
+                          Author="@(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")"
                           Price="@ProductPriceCache[book.Id]"
                           Category="@ProductPrimaryCategoryCache[book.Id]"
                           IsNew="@book.Enabled"
@@ -166,7 +168,7 @@
                      @onclick="() => NavigateToProduct(book.Id)">
                     <div class="d-flex align-items-center gap-4 structural-list-left">
                         <span class="text-dark fw-medium list-item-title">@book.Name</span>
-                        <span class="text-muted small list-item-author">by @(ActiveAuthorFilterName ?? "Multiple Authors")</span>
+                        <span class="text-muted small list-item-author">by @(ProductAuthorCache.TryGetValue(book.Id, out var authorName) ? authorName : "Unknown Author")</span>
                         <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@ProductPrimaryCategoryCache[book.Id].ToUpper()</span>
                     </div>
                     <div class="d-flex align-items-center gap-4">
@@ -196,7 +198,6 @@
 
 <a class="back-to-top-btn d-flex align-items-center justify-content-center"
    aria-label="Back to top"
-   href="#top-target"
-   onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">
+   href="#top-target">
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5,12 12,5 19,12" /></svg>
 </a>

MidrandBookshop/Components/Pages/Home.razor.cs

@@ -19,6 +19,7 @@ public partial class Home : ComponentBase
     [SupplyParameterFromQuery(Name = "q")] public string? SharedSearchQuery { get; set; }
     [SupplyParameterFromQuery] public long? AuthorId { get; set; }
 
+    private ElementReference topTargetRef;
     public enum ViewMode { Grid, List }
     private ViewMode CurrentViewMode = ViewMode.Grid;
     private string ActiveCategory = "All";

MidrandBookshop/Components/Pages/Home.razor.css

@@ -170,3 +170,8 @@ html {
         border-color: #ffffff !important;
         box-shadow: 0 0 0 2px #1a1a1a, 0 6px 16px rgba(0, 0, 0, 0.25) !important;
     }
+
+/* Direct the smooth scroll action straight to the layout viewport boundary */
+#top-target {
+    scroll-margin-top: 100vh;
+}