Detailed contributor list for the thread index

On hover now it shows the actual contributors, ordered by message count.

This view reuses the cards from the thread view by extracting it to a
partial. In the future we'll have to change this to something better,
but that will be a separate commit.

Author: dutow

app/assets/stylesheets/colors.css

@@ -47,6 +47,7 @@
   --color-border-contributor: var(--color-secondary2-2);
 
   --color-bg-icon: var(--color-secondary1-2);
+  --color-bg-hoverbox: var(--color-secondary2-1);
   --color-bg-contributor: var(--color-secondary1-2);
   --color-bg-committer: var(--color-secondary1-1);
 }

app/assets/stylesheets/components/topics.css

@@ -73,6 +73,26 @@
   padding: 3px;
   margin: 5px 0px;
   margin-right: 10px;
+  position: relative;
+}
+
+.topic-icon-badge {
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+  min-width: 18px;
+  height: 18px;
+  padding: 2px 4px;
+  border-radius: 999px;
+  background: var(--color-bg-icon);
+  color: #000;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 .activity-core_team {
@@ -89,6 +109,31 @@
   }
 }
 
+.topic-icon-hover {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 20;
+  background: var(--color-bg-hoverbox);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-3);
+  box-shadow: var(--shadow-lg);
+  min-width: 260px;
+}
+
+.topic-icon.is-open .topic-icon-hover {
+  display: block;
+}
+
+.topic-icon-hover .participant-row {
+  margin-bottom: var(--spacing-2);
+}
+
+.topic-icon-hover .participant-row:last-child {
+  margin-bottom: 0;
+}
+
 .topic-meta {
   & span {
     padding-right: var(--spacing-2);

app/javascript/controllers/hover_popover_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Adds a small delay before hiding popovers so users can move the cursor into them.
+export default class extends Controller {
+  static targets = ["popover"]
+  static values = { delay: Number }
+
+  connect() {
+    this.hideTimeout = null
+    this.delay = this.delayValue || 150
+  }
+
+  show() {
+    this._clearTimeout()
+    this.element.classList.add("is-open")
+  }
+
+  scheduleHide() {
+    this._clearTimeout()
+    this.hideTimeout = setTimeout(() => {
+      this.element.classList.remove("is-open")
+    }, this.delay)
+  }
+
+  _clearTimeout() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+}

app/models/topic.rb

@@ -66,6 +66,30 @@ def has_committer_activity?
     end
   end
 
+  def contributor_participants
+    @contributor_participants ||= begin
+      contributor_alias_ids = Contributor.joins(:aliases).pluck('aliases.id').uniq
+      return [] if contributor_alias_ids.empty?
+
+      stats = messages.where(sender_id: contributor_alias_ids)
+                      .group(:sender_id)
+                      .select('sender_id, COUNT(*) AS message_count, MAX(created_at) AS last_at')
+
+      alias_map = Alias.includes(:contributors).where(id: stats.map(&:sender_id)).index_by(&:id)
+
+      stats.map do |row|
+        alias_record = alias_map[row.sender_id]
+        next unless alias_record
+
+        {
+          alias: alias_record,
+          message_count: row.read_attribute(:message_count).to_i,
+          last_at: row.read_attribute(:last_at)
+        }
+      end.compact.sort_by { |p| [-p[:message_count], p[:alias].name] }
+    end
+  end
+
   def highest_contributor_activity
     return "core_team" if has_core_team_activity?
     return "committer" if has_committer_activity?

app/views/topics/_participant_row.html.slim

@@ -0,0 +1,25 @@
+- alias_record = participant[:alias]
+- return unless alias_record
+- avatar_size = local_assigns[:avatar_size] || 40
+- message_count = participant[:message_count]
+- last_at = participant[:last_at]
+- tooltip_parts = []
+- tooltip_parts << "#{message_count} messages" if message_count
+- tooltip_parts << "last #{smart_time_display(last_at)}" if last_at
+- tooltip = local_assigns[:tooltip] || (tooltip_parts.any? ? tooltip_parts.join(", ") : alias_record.name)
+- avatar_classes = ["participant-avatar"]
+- avatar_classes << "is-core-team" if alias_record.core_team?
+- avatar_classes << "is-committer" if !alias_record.core_team? && alias_record.committer?
+- avatar_classes << "is-major-contributor" if !alias_record.core_team? && !alias_record.committer? && alias_record.major_contributor?
+- avatar_classes << "is-significant-contributor" if !alias_record.core_team? && !alias_record.committer? && !alias_record.major_contributor? && alias_record.significant_contributor?
+- avatar_classes << "is-past-contributor" if alias_record.contributor&.past_contributor?
+- row_classes = ["participant-row"]
+- row_classes << "is-core-team" if alias_record.core_team?
+- row_classes << "is-committer" if alias_record.committer?
+- row_classes << "is-major-contributor" if alias_record.major_contributor?
+- row_classes << "is-significant-contributor" if alias_record.significant_contributor?
+- row_classes << "is-past-contributor" if alias_record.contributor&.past_contributor?
+.participant-row class=row_classes.join(" ") title=tooltip
+  = image_tag alias_record.gravatar_url(size: avatar_size), class: avatar_classes.join(" "), alt: alias_record.name, title: tooltip
+  .participant-details
+    .participant-name = alias_record.name

app/views/topics/_topics.html.slim

@@ -2,8 +2,16 @@
   tr.topic-row data-topic-id=topic.id data-last-message-id=topic.messages.maximum(:id)
     td.topic-title data-label="Topic"
       - if topic.has_contributor_activity?
-        div class ="topic-icon activity-#{ topic.highest_contributor_activity }"
+        - contributor_participants = topic.contributor_participants
+        - contributor_count = contributor_participants.size
+        div class ="topic-icon activity-#{ topic.highest_contributor_activity }" data-controller="hover-popover" data-hover-popover-delay-value="200" data-action="mouseenter->hover-popover#show mouseleave->hover-popover#scheduleHide"
           i.fa-solid.fa-users-rays
+          - if contributor_count.positive?
+            span.topic-icon-badge = contributor_count
+          - if contributor_participants.any?
+            .topic-icon-hover data-hover-popover-target="popover" data-action="mouseenter->hover-popover#show mouseleave->hover-popover#scheduleHide"
+              - contributor_participants.each do |participant|
+                = render partial: "participant_row", locals: { participant: participant, avatar_size: 32 }
       - if topic.attachments.exists?
         .topic-icon
           i.fa-solid.fa-paperclip

app/views/topics/show.html.slim

@@ -8,25 +8,7 @@
         .participants-list
           - max_participants = 12
           - @participants.first(max_participants).each do |participant|
-            - alias_record = participant[:alias]
-            - badge_text = alias_record.contributor_badge
-            - avatar_classes = ["participant-avatar"]
-            - avatar_classes << "is-core-team" if alias_record.core_team?
-            - avatar_classes << "is-committer" if !alias_record.core_team? && alias_record.committer?
-            - avatar_classes << "is-major-contributor" if !alias_record.core_team? && !alias_record.committer? && alias_record.major_contributor?
-            - avatar_classes << "is-significant-contributor" if !alias_record.core_team? && !alias_record.committer? && !alias_record.major_contributor? && alias_record.significant_contributor?
-            - avatar_classes << "is-past-contributor" if alias_record.contributor&.past_contributor?
-            - row_classes = ["participant-row"]
-            - row_classes << "is-core-team" if alias_record.core_team?
-            - row_classes << "is-committer" if alias_record.committer?
-            - row_classes << "is-major-contributor" if alias_record.major_contributor?
-            - row_classes << "is-significant-contributor" if alias_record.significant_contributor?
-            - row_classes << "is-past-contributor" if alias_record.contributor&.past_contributor?
-            - tooltip = "#{participant[:message_count]} messages, last #{smart_time_display(participant[:last_at])}"
-            .participant-row class=row_classes.join(" ") title=tooltip
-              = image_tag alias_record.gravatar_url(size: 40), class: avatar_classes.join(" "), alt: alias_record.name, title: tooltip
-              .participant-details
-                .participant-name = alias_record.name
+            = render partial: "participant_row", locals: { participant: participant, avatar_size: 40 }
           - if @participants.size > max_participants
             .participant-more "+ #{(@participants.size - max_participants)} more"
       - else