From 51ee9f8aeb38d8cd7eed20c475adce5cb0a3ad9e Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Tue, 12 Nov 2024 15:30:26 +1000
Subject: [PATCH] [frontend/components] Make Menu work like EmojiPicker

---
 Iceshrimp.Frontend/Components/Menu.razor      | 25 ++++++++++++++++---
 Iceshrimp.Frontend/Components/Menu.razor.css  | 10 +++++---
 Iceshrimp.Frontend/Components/Menu.razor.js   |  6 +++++
 .../Components/Note/NoteFooter.razor          | 10 +++++---
 .../Pages/Settings/Filters.razor              | 10 +++++---
 5 files changed, 45 insertions(+), 16 deletions(-)
 create mode 100644 Iceshrimp.Frontend/Components/Menu.razor.js

diff --git a/Iceshrimp.Frontend/Components/Menu.razor b/Iceshrimp.Frontend/Components/Menu.razor
index 025e2a51..1f478810 100644
--- a/Iceshrimp.Frontend/Components/Menu.razor
+++ b/Iceshrimp.Frontend/Components/Menu.razor
@@ -1,16 +1,33 @@
+@inject IJSRuntime Js
+
 @if (_display)
 {
-    <div class="menu">
+    <div class="menu" style="--top: @(_top)px; --left: @(_left)px">
         @ChildContent
     </div>
 }
 
 @code {
-    [Parameter] [EditorRequired] public required RenderFragment ChildContent { get; set; }
-    private                                      bool           _display;
+    [Parameter] [EditorRequired] public required RenderFragment              ChildContent { get; set; }
+    private                                      bool                        _display;
+    private                                      float                       _top;
+    private                                      float                       _left;
+    private                                      IJSInProcessObjectReference _module = null!;
 
-    public void Toggle()
+    protected override async Task OnInitializedAsync()
     {
+        _module = (IJSInProcessObjectReference)await Js.InvokeAsync<IJSObjectReference>("import",
+                                                                                        "./Components/Menu.razor.js");
+    }
+    
+    public void Toggle(ElementReference root)
+    {
+        if (!_display)
+        {
+            var pos = _module.Invoke<List<float>>("getPosition", root);
+            _left = pos[0];
+            _top  = pos[1];
+        }
         _display = !_display;
         StateHasChanged();
     }
diff --git a/Iceshrimp.Frontend/Components/Menu.razor.css b/Iceshrimp.Frontend/Components/Menu.razor.css
index f0b9a678..4c57f23e 100644
--- a/Iceshrimp.Frontend/Components/Menu.razor.css
+++ b/Iceshrimp.Frontend/Components/Menu.razor.css
@@ -1,12 +1,14 @@
 .menu {
+    --top: 0px;
+    --left: 0px;
     background-color: var(--foreground-color);
-    position: absolute;
+    position: fixed;
     padding: 0.5rem;
     border-radius: 0.5rem;
     border: var(--highlight-color) solid 0.1rem;
     width: 15rem;
     max-width: 20rem;
-    top: 2.5rem;
-    left: -5rem;
-    z-index: +1;
+    top: calc(var(--top) + 2.5rem);
+    left: calc(var(--left) - 5.5rem);
+    z-index: +2;
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/Menu.razor.js b/Iceshrimp.Frontend/Components/Menu.razor.js
new file mode 100644
index 00000000..5d179565
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/Menu.razor.js
@@ -0,0 +1,6 @@
+export function getPosition(ref){
+    let rect = ref.getBoundingClientRect()
+    let x = rect.x + window.scrollX;
+    let y = rect.y + window.scrollY;
+    return [x, y]
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
index d08485c8..05faa5ff 100644
--- a/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
+++ b/Iceshrimp.Frontend/Components/Note/NoteFooter.razor
@@ -25,7 +25,7 @@
             <span class="reply-count">@Replies</span>
         }
     </button>
-    <button class="btn @(RenotePossible ? "" : "disabled") positioned" @onclick="@(RenotePossible ? ToggleRenoteMenu : () => { })" @onclick:stopPropagation="true" aria-label="renote">
+    <button @ref="RenoteButton" class="btn @(RenotePossible ? "" : "disabled") positioned" @onclick="@(RenotePossible ? ToggleRenoteMenu : () => { })" @onclick:stopPropagation="true" aria-label="renote">
         @if (RenotePossible)
         {
             <Icon Name="Icons.Repeat" Size="1.3em"/>
@@ -74,7 +74,7 @@
     <button class="btn positioned" @onclick="Quote" @onclick:stopPropagation="true" aria-label="quote">
         <Icon Name="Icons.Quotes" Size="1.3em"/>
     </button>
-    <button class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">
+    <button @ref="MenuButton" class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">
         <Icon Name="Icons.DotsThreeOutline" Size="1.3em"/>
         <Menu @ref="ContextMenu">
             @if (Note.NoteResponse.User.Id == Session.Current?.Id)
@@ -115,11 +115,13 @@
     [Parameter]                  public          bool                     RenotePossible { get; set; }
     private                                      Menu                     ContextMenu    { get; set; } = null!;
     private                                      Menu                     RenoteMenu     { get; set; } = null!;
+    private                                      ElementReference         RenoteButton   { get; set; }
     private                                      ElementReference         EmojiButton    { get; set; }
+    private                                      ElementReference         MenuButton     { get; set; }
 
     [CascadingParameter] Note Note { get; set; } = null!;
 
-    private void ToggleMenu() => ContextMenu.Toggle();
+    private void ToggleMenu() => ContextMenu.Toggle(MenuButton);
 
     private void Delete() => _ = Note.Delete();
 
@@ -139,7 +141,7 @@
 
     private void ToggleRenoteMenu()
     {
-        RenoteMenu.Toggle();
+        RenoteMenu.Toggle(RenoteButton);
     }
 
     private void Renote(NoteVisibility visibility)
diff --git a/Iceshrimp.Frontend/Pages/Settings/Filters.razor b/Iceshrimp.Frontend/Pages/Settings/Filters.razor
index 480c9f8f..41e7bbea 100644
--- a/Iceshrimp.Frontend/Pages/Settings/Filters.razor
+++ b/Iceshrimp.Frontend/Pages/Settings/Filters.razor
@@ -90,7 +90,7 @@
             </div>
             <div class="action section">
                 <h3>@Loc["Filter Action"]</h3>
-                <button class="positioned button" @onclick="ToggleMenu">
+                <button @ref="MenuButton" class="positioned button" @onclick="ToggleMenu">
                     @if (FilterAction == FilterResponse.FilterAction.Hide)
                     {
                         <Icon Name="Icons.EyeClosed"/>
@@ -128,7 +128,7 @@
                         </div>
                     }
                 </div>
-                <button class="positioned button" @onclick="ToggleFilterContextMenu">
+                <button @ref="ContextButton" class="positioned button" @onclick="ToggleFilterContextMenu">
                     <Icon Name="Icons.Plus"/>
                     <span>@Loc["Add Filter Context"]</span>
                     <Menu @ref="MenuFilterContexts">
@@ -187,6 +187,8 @@
     private Menu                               MenuFilterAction   { get; set; } = null!;
     private Menu                               MenuFilterContexts { get; set; } = null!;
     private List<FilterResponse.FilterContext> FilterContexts     { get; }      = [];
+    private ElementReference                   MenuButton         { get; set; }
+    private ElementReference                   ContextButton      { get; set; }
 
     // ReSharper disable once UnusedAutoPropertyAccessor.Local, Justification: this is still work in progress
     private StateButton ButtonAddFilter { get; set; } = null!;
@@ -276,12 +278,12 @@
 
     private void ToggleMenu()
     {
-        MenuFilterAction.Toggle();
+        MenuFilterAction.Toggle(MenuButton);
     }
 
     private void ToggleFilterContextMenu()
     {
-        MenuFilterContexts.Toggle();
+        MenuFilterContexts.Toggle(ContextButton);
     }
 
     private void AddKeyword()