From 0faf544ebb27719f77602f5cc66da1ce27df340f Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Tue, 25 Oct 2022 16:27:59 +0300
Subject: [PATCH] Add reply to and edited at headers

---
 .../web/static_fe/static_fe_controller.ex     |  5 +-
 .../static_fe/static_fe/_notice.html.eex      | 76 ++++++++++++-------
 priv/static/static-fe/static-fe.css           | 35 +++++++--
 3 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/lib/pleroma/web/static_fe/static_fe_controller.ex b/lib/pleroma/web/static_fe/static_fe_controller.ex
index d15b1eac2..3b4826981 100644
--- a/lib/pleroma/web/static_fe/static_fe_controller.ex
+++ b/lib/pleroma/web/static_fe/static_fe_controller.ex
@@ -161,7 +161,10 @@ defp represent(%Activity{object: %Object{data: data}} = activity, selected) do
       selected: selected,
       counts: get_counts(activity),
       id: activity.id,
-      visibility: Visibility.get_visibility(activity.object)
+      visibility: Visibility.get_visibility(activity.object),
+      reply_to: data["inReplyTo"],
+      reply_to_user: data["inReplyTo"] && CommonAPI.get_user(hd(data["to"])),
+      edited_at: data["updated"]
     }
   end
 
diff --git a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
index 70780b9ff..93a6a5c36 100644
--- a/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
+++ b/lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex
@@ -12,35 +12,57 @@
   </div>
   <div class="right-side">
     <div class="status-heading">
-      <div class="heading-left">
-        <h4 class="username">
-          <%= raw Formatter.emojify(@user.name, @user.emoji) %>
-        </h4>
-        <a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
-          <%= @user.nickname %>
-        </a>
+      <div class="heading-name-row">
+        <div class="heading-left">
+          <h4 class="username">
+            <%= raw Formatter.emojify(@user.name, @user.emoji) %>
+          </h4>
+          <a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
+            <%= @user.nickname %>
+          </a>
+        </div>
+        <div class="heading-right">
+          <a class="timeago" href="<%= @link %>">
+            <time
+              class="dt-published" datetime="<%= @published %>"
+              title="<%= format_date(@published) %>"
+            >
+              <%= time_ago(@published) %>
+            </time>
+          </a>
+          <%= if @visibility == "public" do %>
+          <svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>
+          </svg>
+          <% else %>
+          <%= if @visibility == "unlisted" do %>
+          <svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+            <path d="M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z"/>
+          </svg>
+          <% end %>
+          <% end %>
+        </div>
       </div>
-      <div class="heading-right">
-        <a class="timeago" href="<%= @link %>">
-          <time
-            class="dt-published" datetime="<%= @published %>"
-            title="<%= format_date(@published) %>"
-          >
-            <%= time_ago(@published) %>
-          </time>
-        </a>
-        <%= if @visibility == "public" do %>
-        <svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>
-        </svg>
-        <% else %>
-        <%= if @visibility == "unlisted" do %>
-        <svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-          <path d="M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z"/>
-        </svg>
-        <% end %>
-        <% end %>
+      <%= if @reply_to do %>
+      <div class="heading-reply-row">
+		<a class="reply-to-link" href="<%= @reply_to %>">
+          <svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M205 34.8c11.5 5.1 19 16.6 19 29.2v64H336c97.2 0 176 78.8 176 176c0 113.3-81.5 163.9-100.2 174.1c-2.5 1.4-5.3 1.9-8.1 1.9c-10.9 0-19.7-8.9-19.7-19.7c0-7.5 4.3-14.4 9.8-19.5c9.4-8.8 22.2-26.4 22.2-56.7c0-53-43-96-96-96H224v64c0 12.6-7.4 24.1-19 29.2s-25 3-34.4-5.4l-160-144C3.9 225.7 0 217.1 0 208s3.9-17.7 10.6-23.8l160-144c9.4-8.5 22.9-10.6 34.4-5.4z"/>
+          </svg>
+		  Reply to
+		</a>
+		<span class="h-card">
+          <a href="<%= (@reply_to_user.uri || @reply_to_user.ap_id) %>" class="u-url mention">
+            @<%= @reply_to_user.nickname %>
+          </a>
+		</span>
       </div>
+      <% end %>
+      <%= if @edited_at do %>
+      <div class="heading-edited-row">
+        Edited <%= time_ago(@edited_at) %>
+      </div>
+      <% end %>
     </div>
     <div class="status-content">
       <%= if @title != "" do %>
diff --git a/priv/static/static-fe/static-fe.css b/priv/static/static-fe/static-fe.css
index 785dad3bb..008907ea8 100644
--- a/priv/static/static-fe/static-fe.css
+++ b/priv/static/static-fe/static-fe.css
@@ -157,12 +157,21 @@ .right-side {
 }
 
 .status-heading {
-    display: flex;
     margin-bottom: 0.5em;
-    justify-content: space-between;
     line-height: 1.3;
 }
 
+.heading-name-row {
+    display: flex;
+    justify-content: space-between;
+}
+
+.heading-edited-row,
+.heading-reply-row {
+    font-size: 0.85em;
+    margin-top: 0.2em;
+}
+
 .status-heading a {
     display: inline-block;
     word-break: break-all;
@@ -177,7 +186,7 @@ .heading-right {
     align-items: center;
 }
 
-.status-container .account-name {
+.heading-name-row .account-name {
     min-width: 1.6em;
     margin-right: 0.4em;
     white-space: nowrap;
@@ -186,7 +195,7 @@ .status-container .account-name {
     flex: 1 1 0;
 }
 
-.status-container .username {
+.heading-name-row .username {
     white-space: nowrap;
     overflow: hidden;
     max-width: 85%;
@@ -457,8 +466,7 @@ .attachment:not(:last-child) {
 
 .fa-icon {
     height: 0.875em;
-    margin-left: 0.5em;
-    margin-right: 0.3em;
+    margin: 0 0.3em;
     fill: var(--icon);
 }
 
@@ -466,6 +474,14 @@ .status-actions .fa-icon {
     height: 1.1em;
 }
 
+.user-summary .fa-icon {
+    margin-left: 0.5em;
+}
+
+.reply-to-link .fa-icon {
+    transform: scale(-1, 1);
+}
+
 .nsfw-banner {
     position: absolute;
     height: 100%;
@@ -483,3 +499,10 @@ .nsfw-banner:not(:hover) {
 .nsfw-banner:hover div {
     display: none;
 }
+
+.reply-to-link {
+    color: var(--faint);
+}
+.reply-to-link:hover {
+    text-decoration: underline;
+}