From 3d3a7da73e60b693c3742b9a04e8800f0edda44c Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Sun, 30 Jun 2024 19:40:21 +0200
Subject: [PATCH] [frontend] Refactor EmojiPicker

---
 Iceshrimp.Frontend/Components/Compose.razor         | 8 ++++----
 Iceshrimp.Frontend/Components/EmojiPicker.razor     | 9 +++++----
 Iceshrimp.Frontend/Components/EmojiPicker.razor.css | 8 ++------
 Iceshrimp.Frontend/Components/Note/NoteFooter.razor | 7 ++++---
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/Compose.razor b/Iceshrimp.Frontend/Components/Compose.razor
index 8c8d0d34..38a9c72e 100644
--- a/Iceshrimp.Frontend/Components/Compose.razor
+++ b/Iceshrimp.Frontend/Components/Compose.razor
@@ -39,9 +39,9 @@
         <button class="footer-btn" @onclick="ToggleCw">
             <Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon>
         </button>
-        <button class="footer-btn positioned" @onclick="ToggleEmojiPicker">
+        <button class="footer-btn" @onclick="ToggleEmojiPicker">
             <Icon Name="Icons.Smiley" Size="1.3rem"></Icon>
-            <EmojiPicker @ref="EmojiPicker" OnEmojiSelect="AddEmoji" Fixed="true"></EmojiPicker>
+            <EmojiPicker OnEmojiSelect="AddEmoji" />
         </button>
         <div class="file-input">
             <InputFile @ref="UploadInput" OnChange="Upload">Upload!</InputFile>
@@ -56,8 +56,8 @@
     private InputFile                UploadInput     { get; set; } = null!;
     private NoteBase?                ReplyOrQuote    { get; set; }
     private string?                  TextPlaceholder { get; set; }
-    private EmojiPicker              EmojiPicker     { get; set; } = null!;
     private ElementReference         Textarea        { get; set; }
+    private EmojiPicker              EmojiPicker     { get; set; } = null!;
 
     private NoteCreateRequest NoteDraft { get; set; } = new()
     {
@@ -251,4 +251,4 @@
     {
         TextPlaceholder = AvailablePlaceholders["default"];
     }
-}
\ No newline at end of file
+}
diff --git a/Iceshrimp.Frontend/Components/EmojiPicker.razor b/Iceshrimp.Frontend/Components/EmojiPicker.razor
index 03f82afc..b72529a6 100644
--- a/Iceshrimp.Frontend/Components/EmojiPicker.razor
+++ b/Iceshrimp.Frontend/Components/EmojiPicker.razor
@@ -1,6 +1,6 @@
 @using Iceshrimp.Frontend.Core.Services
 @using Iceshrimp.Shared.Schemas
-@inject ApiService Api
+@inject EmojiService EmojiService
 
 @if (_display)
 {
@@ -15,15 +15,15 @@
 }
 
 @code {
+    [Parameter]                  public          bool                         Fixed    { get; set; }
     [Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; }
-    [Parameter]                  public          bool                         Fixed         { get; set; } = false;
 
     private List<EmojiResponse> EmojiList { get; set; } = [];
     private bool                _display = false;
 
     protected override async Task OnInitializedAsync()
     {
-        EmojiList = await Api.Emoji.GetAllEmoji();
+        EmojiList = await EmojiService.GetEmoji();
     }
 
     private async void Select(EmojiResponse emoji)
@@ -33,8 +33,9 @@
         StateHasChanged();
     }
 
-    public void Toggle()
+    public async Task Toggle()
     {
         _display = !_display;
+        await InvokeAsync(StateHasChanged);
     }
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/EmojiPicker.razor.css b/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
index e56ffcf8..553a6c3a 100644
--- a/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
+++ b/Iceshrimp.Frontend/Components/EmojiPicker.razor.css
@@ -9,10 +9,10 @@
     border-radius: 1rem;
     min-width: 15rem;
     min-height: 10rem;
-    top: 3rem;
-    left: -210%;
     overflow: scroll;
     z-index: 100;
+    top: 2.5rem;
+    left: -6rem;
 }
 
 .emoji {
@@ -23,7 +23,3 @@
     }
 }
 
-.fixed {
-    position: fixed;
-    bottom: 10%;
-}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
index e6f799a3..e8253b85 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
+++ b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
@@ -59,7 +59,7 @@
     [Parameter] [EditorRequired] public required bool                     IsLiked        { get; set; }
     [Parameter] [EditorRequired] public required int                      Renotes        { get; set; }
     [Parameter]                  public          bool                     RenotePossible { get; set; }
-    private                                      EmojiPicker?             EmojiPicker    { get; set; }
+    private                                      EmojiPicker              EmojiPicker    { get; set; } = null!;
 
     [CascadingParameter] NoteComponent NoteComponent { get; set; } = null!;
 
@@ -82,10 +82,11 @@
     {
         NoteComponent.DoQuote();
     }
+    
 
-    private void ToggleEmojiPicker()
+    private async Task ToggleEmojiPicker()
     {
-        EmojiPicker?.Toggle();
+        await EmojiPicker.Toggle();
     }
 
     private void React(EmojiResponse emoji)