finishing touches

Author: NielsPilgaard

src/web/Jordnaer/Components/NotificationBell.razor

@@ -5,7 +5,6 @@
 @inject NotificationSignalRClient NotificationSignalRClient
 @inject INotificationService NotificationService
 @inject CurrentUser CurrentUser
-@inject NavigationManager Navigation
 @inject ILogger<NotificationBell> Logger
 @inject ISnackbar Snackbar
 
@@ -50,7 +49,16 @@
                 <div style="max-height: 400px; overflow-y: auto;">
                     @foreach (var notification in _notifications)
                     {
-                        <NotificationItem Notification="notification" OnClick="HandleNotificationClick" />
+                        @if (!string.IsNullOrEmpty(notification.LinkUrl))
+                        {
+                            <a href="@notification.LinkUrl" style="text-decoration: none; color: inherit; display: block;">
+                                <NotificationItem Notification="notification" OnClick="HandleNotificationClick" />
+                            </a>
+                        }
+                        else
+                        {
+                            <NotificationItem Notification="notification" OnClick="HandleNotificationClick" />
+                        }
                         <MudDivider />
                     }
                 </div>
@@ -179,11 +187,6 @@
         }
 
         _isOpen = false;
-
-        if (!string.IsNullOrEmpty(notification.LinkUrl))
-        {
-            Navigation.NavigateTo(notification.LinkUrl);
-        }
     }
 
     private async Task MarkAllAsRead()

src/web/Jordnaer/Components/NotificationItem.razor

@@ -18,7 +18,7 @@
         }
 
         <div style="flex: 1; min-width: 0;">
-            <MudText Typo="Typo.body2" Style="@(!Notification.IsRead ? "font-weight: 600;" : "")">
+            <MudText Typo="Typo.body2" Class="notification-title" Style="@(!Notification.IsRead ? "font-weight: 600;" : "")">
                 @Notification.Title
             </MudText>
             @if (!string.IsNullOrEmpty(Notification.Description))
@@ -67,17 +67,35 @@
 }
 
 <style>
+    .notification-item {
+        transition: background-color 0.15s ease;
+    }
+
     .notification-item:hover {
-        background-color: rgba(0, 0, 0, 0.04);
+        background-color: rgba(0, 0, 0, 0.08);
+        cursor: pointer;
     }
 
     .notification-item.unread {
         background-color: rgba(65, 85, 107, 0.05);
     }
 
+    .notification-item.unread:hover {
+        background-color: rgba(65, 85, 107, 0.12);
+    }
+
+    .notification-title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-word;
+    }
+
     .text-truncate {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        display: block;
     }
 </style>

src/web/Jordnaer/Features/GroupSearch/GroupCard.razor

@@ -1,8 +1,8 @@
 @using Jordnaer.Features.Theme
-@inject NavigationManager Navigation
 
-<MudPaper Elevation="3" Class="group-card pa-4" @onclick="NavigateToGroup"
-    Style="cursor: pointer; transition: all 0.2s ease; background-color: white; display: flex; flex-direction: column; height: 100%;">
+<a href="/groups/@Uri.EscapeDataString(Group.Name)" style="text-decoration: none; color: inherit; display: block;">
+<MudPaper Elevation="3" Class="group-card pa-4"
+    Style="transition: all 0.2s ease; background-color: white; display: flex; flex-direction: column; height: 100%;">
     <div class="d-flex flex-column">
         @* Group Image/Avatar and Basic Info *@
         <div class="d-flex gap-3 mb-3">
@@ -85,6 +85,7 @@
         }
     </div>
 </MudPaper>
+</a>
 
 <style>
     .group-card:hover {
@@ -96,9 +97,4 @@
 @code {
     [Parameter]
     public required GroupSlim Group { get; set; }
-
-    private void NavigateToGroup()
-    {
-        Navigation.NavigateTo($"/groups/{Uri.EscapeDataString(Group.Name)}");
-    }
 }

src/web/Jordnaer/Features/Posts/PostCardComponent.razor

@@ -71,12 +71,14 @@
     </MudCardHeader>
 
     @* Content Section *@
-    <MudCardContent Style="padding: 16px; min-height: 60px;">
-        <MudText Typo="Typo.body1"
-            Style="@($"color: {JordnaerPalette.BlueBody}; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;")">
-            @PostItem.Text.SanitizeHtml()
-        </MudText>
-    </MudCardContent>
+    <a href="/posts/@PostItem.Id" style="text-decoration: none; color: inherit; display: block;">
+        <MudCardContent Style="padding: 16px; min-height: 60px;">
+            <MudText Typo="Typo.body1"
+                Style="@($"color: {JordnaerPalette.BlueBody}; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;")">
+                @PostItem.Text.SanitizeHtml()
+            </MudText>
+        </MudCardContent>
+    </a>
 
     @* Categories Section *@
     @if (PostItem.Categories.Any())

src/web/Jordnaer/Features/UserSearch/UserCard.razor

@@ -1,8 +1,8 @@
 @using Jordnaer.Features.Theme
-@inject NavigationManager Navigation
 
-<MudPaper Elevation="3" Class="user-card pa-4" @onclick="NavigateToProfile"
-    Style="cursor: pointer; transition: all 0.2s ease; background-color: white; display: flex; flex-direction: column; height: 100%;">
+<a href="@(string.IsNullOrEmpty(User.UserName) ? null : $"/{Uri.EscapeDataString(User.UserName)}")" style="text-decoration: none; color: inherit; display: block;">
+<MudPaper Elevation="3" Class="user-card pa-4"
+    Style="transition: all 0.2s ease; background-color: white; display: flex; flex-direction: column; height: 100%;">
     <div class="d-flex flex-column">
         @* Avatar and Basic Info *@
         <div class="d-flex gap-3 mb-3">
@@ -89,6 +89,7 @@
         }
     </div>
 </MudPaper>
+</a>
 
 <style>
     .user-card:hover {
@@ -100,14 +101,4 @@
 @code {
     [Parameter]
     public required UserDto User { get; set; }
-
-    private void NavigateToProfile()
-    {
-        if (string.IsNullOrEmpty(User.UserName))
-        {
-            return;
-        }
-
-        Navigation.NavigateTo($"/{Uri.EscapeDataString(User.UserName)}");
-    }
 }