Add a popover toggle for exercise names

LiftLog.Ui/Shared/Presentation/ItemTitle.razor

@@ -1,6 +1,10 @@
 
-<span class="text-xl font-bold flex-shrink text-ellipsis max-w-full text-nowrap whitespace-nowrap overflow-hidden min-w-0 text-start">@Title</span>
+<span id="@Id" @onclick=OnClick class="text-xl font-bold flex-shrink text-ellipsis max-w-full text-nowrap whitespace-nowrap overflow-hidden min-w-0 text-start">@Title</span>
 
 @code {
     [Parameter][EditorRequired] public string Title { get; set; } = null!;
+
+    [Parameter] public EventCallback OnClick { get; set; }
+
+    [Parameter] public string Id { get; set; } = "";
 }

LiftLog.Ui/Shared/Presentation/WeightedExercise.razor

@@ -1,4 +1,5 @@
-@{
+@inject IJSRuntime JSRuntime
+@{
     var (displayedExercise, repToStartNext) = (PreviousRecordedExercises?.FirstOrDefault()?.RecordedExercise) switch
     {
         null => (RecordedExercise, -1),
@@ -11,7 +12,8 @@
 <div class="flex flex-col gap-4 py-4 pl-7 pr-2 w-full" data-cy="weighted-exercise">
     <div class="flex flex-col">
         <div class="flex justify-between">
-            <ItemTitle Title="@RecordedExercise.Blueprint.Name" />
+            <ItemTitle Id="@exerciseNameId" Title="@RecordedExercise.Blueprint.Name" OnClick="OnExerciseNameClick" />
+            <span @ref="exerciseNameTooltip" popover class="bg-surface-container-highest rounded-lg p-4 text-on-surface">@displayedExercise.Blueprint.Name</span>
             @if(!IsReadonly)
             {
                 <div class="flex justify-end">
@@ -115,6 +117,9 @@
 
 @code {
     private string moreButtonId = "a" + Guid.NewGuid();
+    private string exerciseNameId = "a" + Guid.NewGuid();
+
+    private ElementReference exerciseNameTooltip;
 
     private Menu? _menu;
     private Dialog? notesDialog;
@@ -167,4 +172,9 @@
     {
         previousDialog?.Open();
     }
+
+    private async Task OnExerciseNameClick()
+    {
+        await JSRuntime.InvokeVoidAsync("AppUtils.showPopupAndAnchorTo", exerciseNameTooltip, exerciseNameId);
+    }
 }

LiftLog.Ui/wwwroot/app-utils.ts

@@ -20,6 +20,20 @@ AppUtils.vibrate = function (ms: number) {
   }
 };
 
+AppUtils.showPopupAndAnchorTo = async function (element: HTMLElement, anchorId: string) {
+  const anchor = document.getElementById(anchorId);
+
+  element.style.transition = "transform 0.2s";
+  element.style.transform = "scale(0)";
+  await new Promise((resolve) => setTimeout(resolve, 5));
+  element?.showPopover();
+  element.style.top = anchor?.getBoundingClientRect().top + "px";
+  element.style.left = anchor?.getBoundingClientRect().left + "px";
+  element.style.position = "absolute";
+  element.style.margin = "0";
+  element.style.transform = "scale(1)";
+};
+
 /**
  * Creates a new event for the dialog close event.
  * This new event has bubbles, which allows blazor components to intercept it