Added an icon to partially read threads

This wasn't too clearly visible before, and this is probably the most
important type of thread - one where the user read some messages, but
not all of them.

Author: dutow

app/assets/stylesheets/components/topics.css

@@ -158,6 +158,14 @@
   }
 }
 
+.topic-icon-reading {
+  background-color: var(--color-bg-activity-team);
+  
+  .topic-icon-badge {
+    background-color: var(--color-bg-activity-team);
+  }
+}
+
 .activity-team {
   background-color: var(--color-bg-activity-team);
 

app/views/topics/_topics.html.slim

@@ -7,6 +7,11 @@
   - other_team_readers = filtered_readers.reject { |r| r[:user].id == current_user&.id }.uniq { |r| r[:user].id }
   tr class="topic-row topic-#{state[:status]}" data-topic-id=topic.id data-last-message-id=topic.messages.maximum(:id)
     td class="topic-title status-border status-#{state[:status] || 'new'}" data-label="Topic"
+      - if state[:status] == :reading
+        .topic-icon.topic-icon-reading
+          i.fa-solid.fa-message
+            - unread_count = topic.messages.count - state[:read_count]
+            span.topic-icon-badge = unread_count < 10 ? unread_count : "9+"
       - if user_signed_in? && other_team_readers.any?
         - reader_count = other_team_readers.size
         div class="topic-icon activity-team-read" data-controller="hover-popover" data-hover-popover-delay-value="200" data-action="mouseenter->hover-popover#show mouseleave->hover-popover#scheduleHide"