In the actual thread view, the row background of a participant in the sidebar navigates to that person’s latest reply while the name (and avatar) remain profile links

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/messages.css

@@ -11,7 +11,7 @@
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--border-radius-lg);
   overflow: hidden;
-  scroll-margin-top: 90px;
+  scroll-margin-top: calc(var(--nav-height) + var(--spacing-4));
 }
 
 .threaded .reply-message {
@@ -207,6 +207,7 @@
     height: 0;
     width: 0;
     overflow: hidden;
+    scroll-margin-top: calc(var(--nav-height) + var(--spacing-4));
   }
 
   & .inline-reference {

app/assets/stylesheets/layouts/topic-view.css

@@ -104,6 +104,15 @@
   }
 }
 
+.participant-row.is-clickable {
+  cursor: pointer;
+}
+
+.participant-row.is-clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
 .participant-left {
   display: flex;
   align-items: center;

app/controllers/topics_controller.rb

@@ -334,6 +334,14 @@ def set_topic
   end
 
   def build_participants_sidebar_data(_messages_scope)
+    latest_by_person = Message
+      .where(topic_id: @topic.id)
+      .select("DISTINCT ON (messages.sender_person_id) messages.sender_person_id, messages.id, messages.created_at")
+      .order("messages.sender_person_id, messages.created_at DESC")
+    latest_message_ids = latest_by_person.each_with_object({}) do |row, hash|
+      hash[row.sender_person_id] = row.id
+    end
+
     participants = @topic.topic_participants
                          .includes(person: [ :default_alias, :contributor_memberships ])
                          .order(message_count: :desc, first_message_at: :asc)
@@ -347,7 +355,8 @@ def build_participants_sidebar_data(_messages_scope)
         person: tp.person,
         message_count: tp.message_count,
         first_at: tp.first_message_at,
-        last_at: tp.last_message_at
+        last_at: tp.last_message_at,
+        last_message_id: latest_message_ids[tp.person_id]
       }
     end.compact
   end

app/helpers/topics_helper.rb

@@ -51,7 +51,20 @@ def participant_row_html(participant:, avatar_size: 40, tooltip: nil)
       end
     end
 
-    tag.div(class: "participant-row", title: tooltip) do
+    last_message_id = participant[:last_message_id]
+    row_classes = [ "participant-row" ]
+    row_data = {}
+    row_attrs = { title: tooltip }
+    if last_message_id
+      row_classes << "is-clickable"
+      row_data[:controller] = "participant-row"
+      row_data[:participant_row_url_value] = "#message-#{last_message_id}"
+      row_data[:action] = "click->participant-row#navigate keydown->participant-row#keyNavigate"
+      row_attrs[:role] = "link"
+      row_attrs[:tabindex] = 0
+    end
+
+    tag.div(class: row_classes.join(" "), data: row_data, **row_attrs) do
       safe_join([ left, memberships ].compact)
     end
   end

app/javascript/controllers/participant_row_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { url: String }
+
+  navigate(event) {
+    if (!this.hasUrlValue) return
+    if (event.target.closest("a")) return
+    window.location.assign(this.urlValue)
+  }
+
+  keyNavigate(event) {
+    if (!this.hasUrlValue) return
+    if (event.target.closest("a")) return
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      window.location.assign(this.urlValue)
+    }
+  }
+}