Unify/nicefy participant lists

Make them more compact, and use icons for contributor statuses instead
of colored borders.

Author: dutow

app/assets/stylesheets/colors.css

@@ -51,6 +51,7 @@
   --color-bg-input: var(--color-gray-50);
   --color-bg-container: #ffffff;
   --color-bg-card: var(--color-bg-container);
+  --color-bg-card-hover: var(--color-gray-200);
   --color-bg-hover: var(--color-primary-2);
   --color-bg-sidebar: #f3f4ff;
   --color-bg-sidebar-header: var(--color-primary-2);
@@ -141,6 +142,7 @@
   --color-bg-input: var(--color-gray-100);
   --color-bg-container: var(--color-primary-2);
   --color-bg-card: var(--color-gray-100);
+  --color-bg-card-hover: var(--color-gray-300);
   --color-bg-hover: var(--color-gray-300);
   --color-bg-sidebar: var(--color-primary-2);
   --color-bg-sidebar-header: var(--color-gray-100);

app/assets/stylesheets/components/participants.css

@@ -39,6 +39,10 @@
   }
 }
 
+.participant-left {
+  text-align: left;
+}
+
 .participant-avatar-link {
   display: inline-block;
 }
@@ -52,30 +56,8 @@
   text-decoration: underline;
 }
 
-.participant-avatar.is-core-team {
-  border-color: #ff0080;
-  border-width: 3px;
-  box-shadow: 0 0 0 1px #ff0080;
-}
-
-.participant-avatar.is-committer {
-  border-color: #8b5cf6;
-  border-width: 3px;
-}
-
-.participant-avatar.is-major-contributor {
-  border-color: #f59e0b;
-  border-width: 2px;
-}
-
-.participant-avatar.is-significant-contributor {
-  border-color: #10b981;
-  border-width: 2px;
-}
-
-.participant-avatar.is-past-contributor {
-  border-color: var(--color-text-muted);
-  border-style: dashed;
+.participant-name-link.is-committer {
+  font-weight: var(--font-weight-semibold);
 }
 
 .participants-count {

app/assets/stylesheets/components/topics.css

@@ -217,7 +217,7 @@
   border-radius: var(--border-radius-md);
   padding: var(--spacing-3);
   box-shadow: var(--shadow-lg);
-  min-width: 260px;
+  min-width: 320px;
 }
 
 .topic-participants .topic-icon-hover {

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

@@ -86,62 +86,57 @@
 .participants-list {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-3);
+  gap: var(--spacing-1);
 }
 
 .participant-row {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--spacing-3);
+  display: flex;
   align-items: center;
-  padding: var(--spacing-3);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
+  justify-content: space-between;
+  padding: 0 var(--spacing-3);
   background: var(--color-bg-card);
-  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
-
-  &.is-core-team {
-    border-color: #ff0080;
-    box-shadow: 0 2px 8px rgba(255, 0, 128, 0.15);
-  }
-
-  &.is-committer {
-    border-color: #8b5cf6;
-    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.12);
-  }
-
-  &.is-major-contributor {
-    border-color: #f59e0b;
-    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
-  }
-
-  &.is-significant-contributor {
-    border-color: #10b981;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
-  }
-
-  &.is-past-contributor {
-    border-color: var(--color-border);
-    background: var(--color-gray-50);
-  }
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
+    background: var(--color-bg-card-hover);
   }
 }
 
+.participant-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
 .participant-details {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
 }
 
 .participant-name {
-  font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
 }
 
+.participant-memberships {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.participant-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--border-radius-full);
+  background: var(--color-bg-hover);
+  color: var(--color-text-secondary);
+}
+
 .participant-more {
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);

app/models/topic.rb

@@ -73,13 +73,14 @@ def contributor_participants
 
       stats = messages.joins(sender: :person)
                       .where(people: { id: contributor_ids })
-                      .group(:sender_id)
-                      .select('sender_id, COUNT(*) AS message_count, MAX(messages.created_at) AS last_at')
+                      .group('people.id')
+                      .select('people.id AS person_id, COUNT(*) AS message_count, MAX(messages.created_at) AS last_at')
 
-      alias_map = Alias.includes(person: :contributor_memberships).where(id: stats.map(&:sender_id)).index_by(&:id)
+      people = Person.includes(:default_alias, :contributor_memberships).where(id: stats.map(&:person_id)).index_by(&:id)
 
       stats.map do |row|
-      alias_record = alias_map[row.sender_id]
+        person = people[row.person_id]
+        alias_record = person&.default_alias
         next unless alias_record
 
         {

app/views/topics/_participant_row.html.slim

@@ -8,19 +8,28 @@
 - 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.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.past_contributor?
-.participant-row class=row_classes.join(" ") title=tooltip
-  = link_to person_path(alias_record.email), class: "participant-avatar-link" do
-    = image_tag alias_record.display_gravatar_url(size: avatar_size), class: avatar_classes.join(" "), alt: alias_record.name, title: tooltip
-  .participant-details
-    .participant-name = link_to alias_record.name, person_path(alias_record.email), class: "participant-name-link"
+- membership_icons = []
+- membership_types = alias_record.contributor_membership_types
+- if membership_types.include?("core_team")
+  - membership_icons << { icon: "fa-solid fa-people-group", label: "Core Team" }
+- if membership_types.include?("committer")
+  - membership_icons << { icon: "fa-solid fa-code-branch", label: "Committer" }
+- if membership_types.include?("major_contributor")
+  - membership_icons << { icon: "fa-solid fa-star", label: "Major Contributor" }
+- if membership_types.include?("significant_contributor")
+  - membership_icons << { icon: "fa-solid fa-award", label: "Significant Contributor" }
+- if membership_types.include?("past_major_contributor") || membership_types.include?("past_significant_contributor")
+  - membership_icons << { icon: "fa-solid fa-clock-rotate-left", label: "Past Contributor" }
+.participant-row title=tooltip
+  .participant-left
+    = link_to person_path(alias_record.email), class: "participant-avatar-link" do
+      = image_tag alias_record.display_gravatar_url(size: avatar_size), class: avatar_classes.join(" "), alt: alias_record.name, title: tooltip
+    .participant-details
+      - name_classes = ["participant-name-link"]
+      - name_classes << "is-committer" if membership_types.include?("committer")
+      .participant-name = link_to alias_record.name, person_path(alias_record.email), class: name_classes.join(" ")
+  - if membership_icons.any?
+    .participant-memberships
+      - membership_icons.each do |entry|
+        span.participant-icon title=entry[:label]
+          i class=entry[:icon]