From 13a359a1b6aab8bc900de64df168d1349547a567 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Sun, 24 Nov 2024 00:29:27 +1000
Subject: [PATCH] [frontend/components] Add emoji to reaction notifications

---
 .../Components/NotificationComponent.razor      |  3 ++-
 .../Components/NotificationComponent.razor.css  | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor b/Iceshrimp.Frontend/Components/NotificationComponent.razor
index 02046bd8..f1271204 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor
+++ b/Iceshrimp.Frontend/Components/NotificationComponent.razor
@@ -28,7 +28,8 @@
                         <span class="notification-icon"><Icon Name="Icons.Heart" Pack="IconStyle.Fill" Size="0.8em"/></span>
                         <span class="notification-text">@Loc["liked note"]</span> 
                         break; 
-                    case { Note: not null, Type: "reaction" }:
+                    case { Note: not null, Reaction: not null, Type: "reaction" }:
+                        <img class="notification-reaction" src="@NotificationResponse.Reaction.Url" alt="@NotificationResponse.Reaction.Name.Trim(':')" title="@NotificationResponse.Reaction.Name"/>
                         <span class="notification-text">@Loc["reacted to your note"]</span>
                         break;
                     case { Type: "follow", User: not null }:
diff --git a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
index eb59eb07..f06e43b2 100644
--- a/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
+++ b/Iceshrimp.Frontend/Components/NotificationComponent.razor.css
@@ -31,6 +31,23 @@
     }
 }
 
+.notification-reaction {
+    position: absolute;
+    top: 3em;
+    left: 3em;
+    display: inline-block;
+    width: 1.25em;
+    height: 1.25em;
+    object-fit: contain;
+    filter: drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.7));
+    transition-duration: 250ms;
+}
+
+.notification-reaction:hover {
+    transform: scale(1.5);
+    z-index: +1;
+}
+
 .notification-text {
     font-size: 0.8em;
 }