recent_topics: Add action to mark topic as read.

static/js/click_handlers.js

@@ -346,6 +346,15 @@ exports.initialize = function () {
         muting_ui.mute(stream_id, topic);
     });
 
+    // RECENT TOPICS
+
+    $('body').on('click', '.on_hover_topic_read', function (e) {
+        e.stopPropagation();
+        const stream_id = parseInt($(e.currentTarget).attr('data-stream-id'), 10);
+        const topic = $(e.currentTarget).attr('data-topic-name');
+        unread_ops.mark_topic_as_read(stream_id, topic);
+    });
+
     // RECIPIENT BARS
 
     function get_row_id_for_narrowing(narrow_link_elem) {

static/styles/zulip.scss

@@ -1116,7 +1116,8 @@ td.pointer {
 }
 
 .on_hover_topic_edit,
-.on_hover_topic_mute {
+.on_hover_topic_mute,
+.on_hover_topic_read {
     opacity: 0.2;
 }
 
@@ -1126,7 +1127,8 @@ td.pointer {
 
 .on_hover_topic_edit,
 .always_visible_topic_edit,
-.on_hover_topic_mute {
+.on_hover_topic_mute,
+.on_hover_topic_read {
     &:hover {
         cursor: pointer;
         opacity: 1.0;

static/templates/recent_topic_row.hbs

@@ -14,6 +14,7 @@
     </td>
     <td class="recent_topic_actions">
         <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+        <i class="fa fa-check-circle on_hover_topic_read recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}"></i>
     </td>
     <td class='recent_topic_users'>
     </td>