From 24a16f7fad223c52f4d238ec31d26018cea94285 Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Sat, 28 Sep 2024 02:28:37 +0200
Subject: [PATCH] [frontend/components] Show inline replies on timeline
 (ISH-344)

---
 .../Components/TimelineNote.razor             | 20 +++++++++++++++---
 .../Components/TimelineNote.razor.css         | 21 +++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/TimelineNote.razor b/Iceshrimp.Frontend/Components/TimelineNote.razor
index 77f8f192..bf000847 100644
--- a/Iceshrimp.Frontend/Components/TimelineNote.razor
+++ b/Iceshrimp.Frontend/Components/TimelineNote.razor
@@ -5,15 +5,29 @@
 @if (Note.Filtered is { Hide: true }) { }
 else
 {
-    <div class="note-container" @onclick="OpenNote" id="@Note.Id">
-        <Note NoteResponse="Note"></Note>
+    <div class="note-container" id="@Note.Id">
+        @if (Note.Reply is not null)
+        {
+            <div class="ancestor-wrapper" @onclick="() => OpenNote(Note.Reply.Id)">
+                <div class="note-indent">
+                    <img class="user-avatar" src="@Note.User.AvatarUrl"/>
+                    <Line></Line>
+                </div>
+                <div class="note">
+                    <NoteComponent Note="Note.Reply" Indented="true"/>
+                </div>
+            </div>
+        }
+        <div class="link-wrapper" @onclick="() => OpenNote(Note.RenoteId ?? Note.Id)">
+            <Note NoteResponse="Note"/>
+        </div>
     </div>
 }
 
 @code {
     [Parameter] [EditorRequired] public required NoteResponse Note { get; set; }
 
-    private void OpenNote()
+    private void OpenNote(string id)
     {
         Navigation.NavigateTo(Note.RenoteId != null ? $"/notes/{Note.RenoteId}" : $"/notes/{Note.Id}");
     }
diff --git a/Iceshrimp.Frontend/Components/TimelineNote.razor.css b/Iceshrimp.Frontend/Components/TimelineNote.razor.css
index 60c6c567..ee469b97 100644
--- a/Iceshrimp.Frontend/Components/TimelineNote.razor.css
+++ b/Iceshrimp.Frontend/Components/TimelineNote.razor.css
@@ -10,4 +10,25 @@
     margin-right: 0.5rem;
     margin-left: 0.5rem;
     width: 100%;
+}
+
+.note-indent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.user-avatar {
+    border-radius: 8px;
+    object-fit: cover;
+    width: 3em;
+    height: 3em;
+}
+
+.ancestor-wrapper {
+    display: flex
+}
+
+.note {
+    width: 100%;
 }
\ No newline at end of file