From 1cccdcb832f59431e8432a412c85cc6b4db88eee Mon Sep 17 00:00:00 2001
From: Jeder <jeder+git@jeder.pl>
Date: Wed, 6 Nov 2024 21:40:48 +0100
Subject: [PATCH] [frontend/components] Refactor notifications

---
 .../Components/NotificationComponent.razor    | 131 ++++++++----------
 .../NotificationComponent.razor.css           |   3 +-
 2 files changed, 61 insertions(+), 73 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor b/Iceshrimp.Frontend/Components/NotificationComponent.razor
index ff59cd10..7a8eef40 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor
+++ b/Iceshrimp.Frontend/Components/NotificationComponent.razor
@@ -7,86 +7,73 @@
 @inject NavigationManager              NavigationManager
 
 <div class="notification">
-    <div class="notification-header">
-        @if (NotificationResponse is { User: not null })
-        {
-            <img @onclick="OpenProfile" class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/>
-        }
-
-        <div class="notification-body">
+    @if (NotificationResponse is not { Type: "mention" } or { Type: "reply" })
+    {
+        <div class="notification-header">
             @if (NotificationResponse is { User: not null })
             {
-                <span @onclick="OpenProfile" class="display-name"><UserDisplayName User="@NotificationResponse.User"/></span>
+                <img @onclick="OpenProfile" class="user-avatar" src="@NotificationResponse.User.AvatarUrl"/>
             }
 
-            @if (NotificationResponse is { Note: not null, Type: "like", User: not null })
-            {
-                <span class="notification-text">@Loc["liked your post: "]</span>
-            }
-            else if (NotificationResponse is { Note: not null, Type: "reaction" })
-            {
-                <span class="notification-text">@Loc["reacted to your post:"]</span>
-            }
-            else if (NotificationResponse is { Type: "follow", User: not null })
-            {
-                <span class="notification-text">@Loc["followed you"]</span>
-            }
-            else if (NotificationResponse is { Type: "followRequestReceived" })
-            {
-                <span class="notification-text">@Loc["requested to follow you"]</span>
-            }
-            else if (NotificationResponse is { Type: "followRequestAccepted" })
-            {
-                <span class="notification-text">@Loc["accepted your follow request"]</span>
-            }
-            else if (NotificationResponse is { Type: "mention" })
-            {
-                <span class="notification-text">@Loc["mentioned you:"]</span>
-            }
-            else if (NotificationResponse is { Type: "reply" })
-            {
-                <span class="notification-text">@Loc["replied to your post:"]</span>
-            }
-            else if (NotificationResponse is { Type: "renote" })
-            {
-                <span class="notification-text">@Loc["renoted your post:"]</span>
-            }
-            else if (NotificationResponse is { Type: "quote" })
-            {
-                <span class="notification-text">@Loc["quoted your post:"]</span>
-            }
-            else if (NotificationResponse is { Bite: { BiteBack: true }, Type: "bite" })
-            {
-                <span class="notification-text">@Loc["bit you back"]</span>
-            }
-            else if (NotificationResponse is { Note: not null, Type: "bite" })
-            {
-                <span class="notification-text">@Loc["bit your note:"]</span>
-            }
-            else if (NotificationResponse is { Type: "bite" })
-            {
-                <span class="notification-text">@Loc["bit you"]</span>
-            }
-            else
-            {
-                <span class="notification-text">
-                    <i>@Loc["unsupported notification type"]</i>
-                </span>
-                <details>
-                    <summary>view details</summary>
-                    <p>ID: @NotificationResponse.Id</p>
-                    <p>Type: @NotificationResponse.Type</p>
-                </details>
-            }
-        </div>
+            <div class="notification-body">
+                @if (NotificationResponse is { User: not null })
+                {
+                    <span @onclick="OpenProfile" class="display-name">@(NotificationResponse.User.DisplayName ?? NotificationResponse.User.Username)</span>
+                }
+                
+                @switch (NotificationResponse)
+                {
+                    case { Note: not null, Type: "like", User: not null }: 
+                        <span class="notification-text">@Loc["liked your note"]</span> 
+                        break; 
+                    case { Note: not null, Type: "reaction" }:
+                        <span class="notification-text">@Loc["reacted to your note"]</span>
+                        break;
+                    case { Type: "follow", User: not null }:
+                        <span class="notification-text">@Loc["followed you"]</span>
+                        break;
+                    case { Type: "followRequestReceived" }:
+                        <span class="notification-text">@Loc["requested to follow you"]</span>
+                        break;
+                    case { Type: "followRequestAccepted" }:
+                        <span class="notification-text">@Loc["accepted your follow request"]</span>
+                        break;
+                    case { Type: "renote" }:
+                        <span class="notification-text">@Loc["renoted your note"]</span>
+                        break;
+                    case { Type: "quote" }:
+                        <span class="notification-text">@Loc["quoted your note"]</span>
+                        break;
+                    case { Bite: { BiteBack: true }, Type: "bite" }:
+                        <span class="notification-text">@Loc["bit you back"]</span>
+                        break;
+                    case { Note: not null, Type: "bite" }:
+                        <span class="notification-text">@Loc["bit your note"]</span>
+                        break;
+                    case { Type: "bite" }:
+                        <span class="notification-text">@Loc["bit you"]</span>
+                        break;
+                    default:
+                        <span class="notification-text">
+                            <i>@Loc["unsupported notification type"]</i>
+                        </span>
+                        <details>
+                            <summary>view details</summary>
+                            <p>ID: @NotificationResponse.Id</p>
+                            <p>Type: @NotificationResponse.Type</p>
+                        </details>
+                        break;
+                }
+            </div>
         
-        <span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span>
-    </div>
+            <span>@RenderDate(DateTime.Parse(NotificationResponse.CreatedAt))</span>
+        </div>
+    }
 
     @if (NotificationResponse is { Note: not null })
     {
-        <div @onclick="OpenNote" class="notification-note">
-            <Note NoteResponse="NotificationResponse.Note"/>
+        <div @onclick="OpenNote" class="@(NotificationResponse is not { Type: "mention" } or { Type: "reply" } ? "notification-note" : "")">
+            <NoteComponent Note="NotificationResponse.Note" AsQuote="@(NotificationResponse is not { Type: "mention" } or { Type: "reply" })"/>
         </div>
     }
 </div>
diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
index 240fbdc2..a8e3a2b0 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
@@ -10,6 +10,7 @@
 }
 
 .notification-text {
+    font-size: 0.8em;
 }
 
 .notification-note {
@@ -29,7 +30,7 @@
     object-fit: cover;
     width: 3em;
     height: 3em;
-    margin-right: 0.5em;
+    margin-right: 0.75em;
 }
 
 .display-name {