Poll for DM updates every 3s instead of 7s; fix scrolling on new DMs sent and received; clear composer box after sending message

internal/webserver/handler_messages.go

@@ -43,7 +43,7 @@ func (app *Application) Messages(w http.ResponseWriter, r *http.Request) {
 	parts := strings.Split(strings.Trim(r.URL.Path, "/"), "/")
 	room_id := scraper.DMChatRoomID(parts[0])
 
-	if r.URL.Query().Has("scrape") {
+	if r.URL.Query().Has("poll") {
 		// TODO: where is this going to be used?
 		app.background_dm_polling_scrape()
 	}
@@ -61,6 +61,7 @@ func (app *Application) Messages(w http.ResponseWriter, r *http.Request) {
 			panic_if(json.Unmarshal(body, &message_data))
 			trove := scraper.SendDMMessage(room_id, message_data.Text, 0)
 			app.Profile.SaveDMTrove(trove, false)
+			app.buffered_render_tweet_htmx(w, "dm-composer", chat_view_data) // Wipe the chat box
 			go app.Profile.SaveDMTrove(trove, true)
 		}
 		chat_view_data.ActiveRoomID = room_id
@@ -78,7 +79,7 @@ func (app *Application) Messages(w http.ResponseWriter, r *http.Request) {
 			chat_view_data.LatestPollingTimestamp = int(chat_view_data.Messages[last_message_id].SentAt.Unix())
 		}
 
-		if r.URL.Query().Has("poll") {
+		if r.URL.Query().Has("poll") || len(parts) == 2 && parts[1] == "send" {
 			app.buffered_render_tweet_htmx(w, "messages-with-poller", chat_view_data)
 			return
 		}

internal/webserver/static/styles.css

@@ -779,7 +779,7 @@ ul.space-participants-list li {
 .dm-composer-container form {
     display: flex;
 }
-span.composer {
+#composer {
     flex-grow: 1;
     border: 1px solid #ccc;
     font-family: inherit;

internal/webserver/tpl/tweet_page_includes/chat_view.tpl

@@ -53,8 +53,8 @@
   {{end}}
 
   <div id="new-messages-poller"
-    hx-swap="outerHTML"
-    hx-trigger="load delay:7s"
+    hx-swap="outerHTML scroll:.chat-messages:bottom"
+    hx-trigger="load delay:3s"
     hx-get="/messages/{{$.ActiveRoomID}}?poll&latest_timestamp={{$.LatestPollingTimestamp}}"
   ></div>
 {{end}}
@@ -68,21 +68,15 @@
     </div>
     {{if $.ActiveRoomID}}
       <div class="dm-composer-container">
-        <form hx-post="/messages/{{$.ActiveRoomID}}/send" hx-target="body" hx-ext="json-enc">
-          <span
-            class="composer"
-            role="textbox"
-            contenteditable
-            oninput="var text = this.innerText; document.querySelector('#real-input').value = text"
-            >
-          </span>
+        <form hx-post="/messages/{{$.ActiveRoomID}}/send" hx-target="#new-messages-poller" hx-swap="outerHTML scroll:.chat-messages:bottom" hx-ext="json-enc">
+          {{template "dm-composer"}}
           <input id="real-input" type="hidden" name="text" value="" />
           <input type="submit" />
         </form>
       </div>
       <script>
         // Make pasting text work for HTML as well as plain text
-        var editor = document.querySelector("span.composer");
+        var editor = document.querySelector("#composer");
         editor.addEventListener("paste", function(e) {
           // cancel paste
           e.preventDefault();
@@ -95,3 +89,25 @@
     {{end}}
   </div>
 {{end}}
+
+{{define "dm-composer"}}
+  <span
+    id="composer"
+    role="textbox"
+    contenteditable
+    {{if .}}
+      {{/*
+        This is a separate template so it can be OOB-swapped to clear the contents of the composer
+        box after a successful DM send.  However, the chat-view itself also loads via HTMX call.
+
+        To prevent the composer from being OOB'd on the initial page load (and thus never rendering),
+        we guard the "hx-swap-oob" attr; so if this template is called with nothing as the arg, then
+        it will be inlined normally (i.e., not OOB'd), and if the arg is something (e.g., a DMTrove),
+        then it will be OOB'd, thus clearing the contents of the composer box.
+      */}}
+      hx-swap-oob="true"
+    {{end}}
+    oninput="var text = this.innerText; document.querySelector('#real-input').value = text"
+    >
+  </span>
+{{end}}