Add links to the first unread messages

Clicking on the unread messages icon now immediately jumps to the first
unread message instead the top of the thread.

Author: dutow

app/assets/stylesheets/components/topics.css

@@ -104,6 +104,15 @@
   position: relative;
 }
 
+a.topic-icon {
+  text-decoration: none;
+  color: var(--color-text-primary);
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+}
+
 .topic-icon-badge {
   position: absolute;
   bottom: -6px;

app/views/topics/_message.html.slim

@@ -1,6 +1,8 @@
 .message-card id=message_dom_id(message) class=("reply-message" if message.reply_to_id)
   - if (mid_anchor = message_id_anchor(message))
     a.message-id-anchor id=mid_anchor aria-hidden="true"
+  - if local_assigns[:is_first_unread]
+    a.message-id-anchor id="first-unread" aria-hidden="true"
   - display_number = number || (@message_numbers && @message_numbers[message.id])
   - is_read = defined?(@read_message_ids) && @read_message_ids[message.id]
   - if user_signed_in?

app/views/topics/_status_cell.html.slim

@@ -6,10 +6,13 @@ td.topic-title.status-border class=status_class id=dom_id(topic, "status_cell")
     - read_count = state[:read_count].to_i
     - total_count = topic.message_count
     - unread_count = [total_count - read_count, 0].max
-    .topic-icon.topic-icon-reading title="Unread messages: #{unread_count}"
-      i.fa-solid.fa-envelope
-      - if unread_count.positive?
+    - if unread_count.positive?
+      = link_to topic_path(topic, anchor: "first-unread"), class: "topic-icon topic-icon-reading", title: "Jump to first unread message (#{unread_count} unread)" do
+        i.fa-solid.fa-envelope
         span.topic-icon-badge.topic-icon-badge-sup = unread_count
+    - else
+      .topic-icon.topic-icon-reading title="All messages read"
+        i.fa-solid.fa-envelope
   = render partial: "topics/star_icon", locals: { topic: topic, star_data: star_data }
   = render partial: "topics/note_icon", locals: { topic: topic, count: note_count.to_i }
   = render partial: "topics/team_readers_icon", locals: { topic: topic, readers: team_readers }

app/views/topics/show.html.slim

@@ -193,8 +193,13 @@
     .thread-actions data-controller="thread-actions" data-thread-actions-topic-id-value[email protected] data-thread-actions-read-all-url-value=read_all_topic_path(@topic, format: :json)
       button.button-secondary data-action="click->thread-actions#markAllRead" Mark all messages read
 
+  - first_unread_found = false
   - @messages.each do |message|
-    = render 'message', message: message, number: @message_numbers[message.id]
+    - is_first_unread = false
+    - if user_signed_in? && !first_unread_found && !@read_message_ids&.dig(message.id)
+      - is_first_unread = true
+      - first_unread_found = true
+    = render 'message', message: message, number: @message_numbers[message.id], is_first_unread: is_first_unread
 
 .topic-navigation
   = link_to "← Back to Topics", topics_path, class: "back-link"