[frontend/components] Fix truncation of long notes (ISH-473)

Iceshrimp.Frontend/Components/Note/NoteBody.razor

@@ -1,11 +1,15 @@
 @using Iceshrimp.Shared.Schemas.Web
 @using Iceshrimp.Assets.PhosphorIcons
+@using Iceshrimp.Frontend.Localization
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<Localization> Loc;
+@inject IJSRuntime                     Js;
 @if (NoteBase.Cw != null)
 {
     <div class="cw">
         <span class="cw-field">@NoteBase.Cw</span><button class="cw-button" @onclick="ToggleCw" @onclick:stopPropagation="true">Toggle CW</button>
     </div>
-    <div hidden="@CwToggle" class="note-body @(CwToggle ? "hidden" : "") @(Indented ? "indent" : "")">
+    <div hidden="@_cwToggle" class="note-body @(_cwToggle ? "hidden" : "") @(Indented ? "indent" : "")" @ref="Body">
         <span>
             @if (ReplyInaccessible)
             {
@@ -21,11 +25,10 @@
         }
     </div>
 }
-@if (NoteBase.Cw == null && OverLength)
+@if (NoteBase.Cw == null)
 {
     <div
-        class="note-body @(Truncate ? "truncated" : "") @(Indented ? "indent" : "")"
-        style="max-height: @(Truncate ? MaxHeight + "px" : "initial")">
+        class="note-body @(Indented ? "indent" : "") @(_showFull ? "show-full" : "")" @ref="Body">
         <span>
             @if (ReplyInaccessible)
             {
@@ -39,34 +42,19 @@
         {
             <NoteAttachments Attachments="NoteBase.Attachments"/>
         }
-    </div>
+        @if (_overHeight)
+        {
             <button class="truncate-btn" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
-        @if (Truncate)
+                @if (_showFull)
                 {
-            <span>Show more</span>
+                    <span>@Loc["Show less"]</span>
                 }
-        @if (!Truncate)
+                @if (!_showFull)
                 {
-            <span>Show less</span>
+                    <span>@Loc["Show more"]</span>
                 }
             </button>
         }
-@if (NoteBase.Cw == null && OverLength == false)
-{
-    <div class="note-body @(Indented ? "indent" : "")">
-        <span>
-            @if (ReplyInaccessible)
-            {
-                <span class="reply-inaccessible">
-                    <Icon Name="Icons.ArrowBendLeftUp"/><Icon Name="Icons.Lock"/>
-                </span>
-            }
-            <MfmText Text="@NoteBase.Text" Emoji="@NoteBase.Emoji"/>
-        </span>
-        @if (NoteBase.Attachments.Count > 0)
-        {
-            <NoteAttachments Attachments="NoteBase.Attachments"/>
-        }
     </div>
 }
 
@@ -77,18 +65,43 @@
     [Parameter] public          bool     Indented          { get; set; }
     [Parameter] public          bool     ReplyInaccessible { get; set; }
 
-    private static int  MaxHeight => 500;
-    private        bool Truncate  { get; set; } = true;
-    private        bool CwToggle  { get; set; } = true;
+    private IJSObjectReference? Module { get; set; }
+    private ElementReference    Body   { get; set; }
+    private bool                _showFull    = false;
+    private bool                _cwToggle    = true;
+    private bool                _overHeight = false;
+    private bool                _flag         = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        Module = await Js.InvokeAsync<IJSObjectReference>("import", "./Components/Note/NoteBody.razor.js");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender == false)
+        {
+            if (Module != null && _flag == false)
+            {
+                var computedHeight = await Module.InvokeAsync<float>("getComputedHeight", Body);
+                if (computedHeight > 40)
+                {
+                    _overHeight = true;
+                }
+                _flag         = true;
+                StateHasChanged();
+            }
+        }
+    }
 
     private void ToggleCw()
     {
-        CwToggle = !CwToggle;
+        _cwToggle = !_cwToggle;
         StateHasChanged();
     }
 
     private void ToggleTruncate()
     {
-        Truncate = !Truncate;
+        _showFull = !_showFull;
     }
 }

Iceshrimp.Frontend/Components/Note/NoteBody.razor.css

@@ -3,6 +3,9 @@
     flex-direction: column;
     text-wrap: normal;
     white-space: pre-wrap;
+    max-height: 40em;
+    height: auto;
+    overflow-y: hidden;
 }
 
 .cw {
@@ -20,10 +23,14 @@
     bottom: 20px;
     width: 100%;
     margin-top: 0.5em;
+    @container note-body (max-height: 20rem){
+        display: none;
+    }
 }
 
-.truncated {
-    overflow: hidden;
+.show-full {
+    overflow: initial;
+    max-height: initial;
 }
 
 .hidden {

Iceshrimp.Frontend/Components/Note/NoteBody.razor.js

@@ -0,0 +1,7 @@
+// Computes the height of an element by its font size
+export function getComputedHeight(element){
+    let fontSize = window.getComputedStyle(element).getPropertyValue("font-size").match(/\d+/);
+    let height = element.scrollHeight;
+    return height / fontSize;
+}
+