From 9b5f1d33cf4baa7fb9511560b77f72c75bfb5d09 Mon Sep 17 00:00:00 2001
From: Alessio <alex@playfulpachyderm.com>
Date: Sat, 4 May 2024 17:21:56 -0700
Subject: [PATCH] Make clicking on a replying-to button in DMs scroll that
 message into view

---
 internal/webserver/renderer_helpers.go        |  2 +-
 internal/webserver/static/styles.css          | 12 ++++++++
 .../tpl/tweet_page_includes/chat_view.tpl     | 28 +++++++++++++++++--
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/internal/webserver/renderer_helpers.go b/internal/webserver/renderer_helpers.go
index 55c57f8..0600646 100644
--- a/internal/webserver/renderer_helpers.go
+++ b/internal/webserver/renderer_helpers.go
@@ -140,7 +140,7 @@ func (app *Application) make_funcmap(global_data PageGlobalData) template.FuncMa
 			result.Set("sort-order", c.SortOrder.String())
 			return result.Encode()
 		},
-		"get_entities": get_entities, //
+		"get_entities": get_entities,
 	}
 }
 
diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index 5298a9e..fec16cd 100644
--- a/internal/webserver/static/styles.css
+++ b/internal/webserver/static/styles.css
@@ -1268,6 +1268,14 @@ main {
 	 * 		margin: 0.5em 0;
 	 */
 
+	transition: background-color 2s ease;
+
+	&.highlighted {
+	    background-color: var(--color-twitter-off-white-dark);
+	    transition: background-color 0.5s ease;
+	}
+
+
 	.dm-message__row {
 		align-items: stretch;
 
@@ -1304,6 +1312,10 @@ main {
 			border-radius: 1em 1em 0em 1em;
 			margin: 0 0.2em -2em;
 		}
+
+		.replying-to-message {
+			cursor: pointer;
+		}
 	}
 	.dm-message__replying-to-label {
 		font-size: 0.8em;
diff --git a/internal/webserver/tpl/tweet_page_includes/chat_view.tpl b/internal/webserver/tpl/tweet_page_includes/chat_view.tpl
index 29fb474..8974f51 100644
--- a/internal/webserver/tpl/tweet_page_includes/chat_view.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/chat_view.tpl
@@ -3,7 +3,7 @@
     {{$message := (index $.DMTrove.Messages .)}}
     {{$user := (user $message.SenderID)}}
     {{$is_us := (eq $message.SenderID (active_user).ID)}}
-    <div class="dm-message {{if $is_us}} our-message {{end}}">
+    <div class="dm-message {{if $is_us}} our-message {{end}}" data-message-id="{{ $message.ID }}">
       <div class="dm-message__row row">
         <div class="dm-message__sender-profile-img">
           {{template "circle-profile-img" $user}}
@@ -15,7 +15,10 @@
                 <img class="svg-icon" src="/static/icons/replying_to.svg" width="24" height="24" />
                 <label>Replying to</label>
               </div>
-              <div class="replying-to-message">
+              <div class="replying-to-message"
+                data-replying-to-message-id="{{ $message.InReplyToID }}"
+                onclick="doReplyTo(this)"
+              >
                 {{(index $.DMTrove.Messages $message.InReplyToID).Text}}
               </div>
             </div>
@@ -78,6 +81,22 @@
       </div>
     </div>
   {{end}}
+  <script>
+    /**
+     * Add on-click listeners to the 'replying-to' previews; they should scroll the replied-to
+     * message into view, if possible.
+     */
+    function doReplyTo(replying_to_box) {
+      const replied_to_id = replying_to_box.getAttribute("data-replying-to-message-id");
+      const replied_to_message = document.querySelector('[data-message-id="' + replied_to_id + '"]');
+
+      replied_to_message.scrollIntoView({behavior: "smooth", block: "center"});
+      replied_to_message.classList.add("highlighted");
+      setTimeout(function() {
+        replied_to_message.classList.remove("highlighted");
+      }, 1000);
+    }
+  </script>
 {{end}}
 
 {{define "messages-with-poller"}}
@@ -138,6 +157,11 @@
   </div>
 
   <script>
+    /**
+     * When new messages are loaded in (via polling), they should be scrolled into view.
+     * However, if the user has scrolled up in the conversation, they shouldn't be.
+     * Also, when the conversation is opened, we should start at the bottom by default.
+     */
     (function () {  // Wrap it all in an IIFE to avoid namespace pollution
       const chat_messages = document.querySelector('.chat-messages');