From 87801b8bcf6692210f497f3ed1b00629f9d98aa0 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 2 Dec 2024 19:25:25 +1000
Subject: [PATCH] [frontend/components] Make InlineEmoji more flexible

---
 Iceshrimp.Frontend/Components/InlineEmoji.razor  | 13 +++++++------
 .../Components/InlineEmoji.razor.css             | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/InlineEmoji.razor b/Iceshrimp.Frontend/Components/InlineEmoji.razor
index a504ee93..165f2f87 100644
--- a/Iceshrimp.Frontend/Components/InlineEmoji.razor
+++ b/Iceshrimp.Frontend/Components/InlineEmoji.razor
@@ -1,15 +1,16 @@
-@using Iceshrimp.Shared.Schemas.Web
-
 @if (Url == null)
 {
-    <span class="unicode-reaction">@Name</span>
+    <span class="unicode-reaction" style="font-size: @Size">@Name</span>
 }
 else
 {
-    <img class="custom-reaction" src="@Url" alt="@Name"/>
+    <img class="custom-reaction @(Hover ? "hover" : "") @(Wide ? "wide" : "")" style="font-size: @Size" src="@Url" alt="@Name"/>
 }
 
 @code {
-    [Parameter, EditorRequired] public required string  Name { get; set; }
-    [Parameter, EditorRequired] public required string? Url  { get; set; }
+    [Parameter, EditorRequired] public required string  Name  { get; set; }
+    [Parameter, EditorRequired] public required string? Url   { get; set; }
+    [Parameter]                 public          bool    Hover { get; set; } = false;
+    [Parameter]                 public          string  Size  { get; set; } = "1.5em";
+    [Parameter]                 public          bool    Wide  { get; set; } = false;
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/InlineEmoji.razor.css b/Iceshrimp.Frontend/Components/InlineEmoji.razor.css
index 36173fd7..8361b0fd 100644
--- a/Iceshrimp.Frontend/Components/InlineEmoji.razor.css
+++ b/Iceshrimp.Frontend/Components/InlineEmoji.razor.css
@@ -4,12 +4,24 @@
     height: 1em;
     object-fit: contain;
     vertical-align: middle;
-    font-size: 1.5em;
+}
+
+.custom-reaction.hover {
+    transition-duration: 250ms;
+}
+
+.custom-reaction.hover:hover {
+    transform: scale(1.5);
+    z-index: +1;
+}
+
+.custom-reaction.wide {
+    width: auto;
+    object-fit: unset;
 }
 
 .unicode-reaction {
     display: inline-block;
     vertical-align: middle;
-    font-size: 1.5em;
     line-height: 1;
 }