[frontend] Add emoji picker to Note Compose

Iceshrimp.Frontend/Components/Compose.razor

@@ -30,7 +30,7 @@
         <input @bind="NoteDraft.Cw" class="input cw-field" placeholder="Content Warning"/>
         <hr class="separator"/>
     }
-    <textarea @bind="NoteDraft.Text" class="textarea" placeholder="@TextPlaceholder" rows="5" cols="35"></textarea>
+    <textarea @ref="Textarea" @bind="NoteDraft.Text" class="textarea" placeholder="@TextPlaceholder" rows="5" cols="35"></textarea>
     <div class="footer">
         <button class="footer-btn" @onclick="OpenUpload">
             <Icon Name="Icons.Upload" Size="1.3rem"></Icon>
@@ -38,6 +38,10 @@
         <button class="footer-btn" @onclick="ToggleCw">
             <Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon>
         </button>
+        <button class="footer-btn positioned" @onclick="ToggleEmojiPicker">
+            <Icon Name="Icons.Smiley" Size="1.3rem"></Icon>
+            <EmojiPicker @ref="EmojiPicker" OnEmojiSelect="AddEmoji" Fixed="true"></EmojiPicker>
+        </button>
         <div class="file-input">
             <InputFile @ref="UploadInput" OnChange="Upload">Upload!</InputFile>
         </div>
@@ -51,6 +55,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 NoteCreateRequest NoteDraft { get;              set; } = new NoteCreateRequest
     {
         Text       = "",
@@ -211,6 +217,23 @@
         }
     }
 
+    private void ToggleEmojiPicker()
+    {
+        EmojiPicker.Toggle();
+        Console.WriteLine("showing picker");
+        StateHasChanged();
+    }
+
+
+    private async Task AddEmoji(EmojiResponse emoji)
+    {
+        var pos   = await _module.InvokeAsync<int>("getSelectionStart");
+        var text  = NoteDraft.Text;
+        var emojiString = $":{emoji.Name}";
+        NoteDraft.Text = text.Insert(pos, emojiString);
+        StateHasChanged();
+    }
+
     protected override void OnInitialized()
     {
         TextPlaceholder = AvailablePlaceholders["default"];

Iceshrimp.Frontend/Components/Compose.razor.js

@@ -5,6 +5,10 @@ export function closeDialog(element){
     element.close()
 }
 
+export function getSelectionStart(element){
+    return element.selectionStart;
+}
+
 export function openUpload(element){
     element.click();
 }

Iceshrimp.Frontend/Components/EmojiPicker.razor

@@ -2,21 +2,24 @@
 @using Iceshrimp.Shared.Schemas
 @inject ApiService Api
 
-@if (_display){
+@if (_display)
-<div class="emoji-picker">
+{
-    @foreach (var el in EmojiList)
+    <div class="emoji-picker @(Fixed ? "fixed" : "")">
-    {
+        @foreach (var el in EmojiList)
-        <div class="emoji">
+        {
-            <img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
+            <div class="emoji">
-        </div>
+                <img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
-    }
+            </div>
-</div>
+        }
+    </div>
 }
 
 @code {
     [Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; }
-    private                      List<EmojiResponse>          EmojiList     { get; set; } = [];
+    [Parameter]                  public          bool                         Fixed        { get; set; } = false;
-    private                      bool                         _display = false;
+
+    private List<EmojiResponse> EmojiList { get; set; } = [];
+    private bool                _display = false;
 
     protected override async Task OnInitializedAsync()
     {

Iceshrimp.Frontend/Components/EmojiPicker.razor.css

@@ -21,3 +21,8 @@
         width: 2rem;
     }
 }
+
+.fixed {
+    position: fixed;
+    bottom: 10%;
+}