follow-topic: Show "follow" icon in recipient headers

src/webview/html/header.js

@@ -19,6 +19,7 @@ import {
   streamNameOfStreamMessage,
 } from '../../utils/recipient';
 import { base64Utf8Encode } from '../../utils/encoding';
+import { isTopicFollowed } from '../../mute/muteModel';
 
 const renderTopic = message =>
   // TODO: pin down if '' happens, and what its proper semantics are.
@@ -32,7 +33,7 @@ const renderTopic = message =>
  * This is a private helper of messageListElementHtml.
  */
 export default (
-  { ownUser, subscriptions }: BackgroundData,
+  { mute, ownUser, subscriptions }: BackgroundData,
   element: HeaderMessageListElement,
 ): string => {
   const { subsequentMessage: message, style: headerStyle } = element;
@@ -41,6 +42,7 @@ export default (
     const streamName = streamNameOfStreamMessage(message);
     const topicNarrowStr = keyFromNarrow(topicNarrow(message.stream_id, message.subject));
     const topicHtml = renderTopic(message);
+    const isFollowed = isTopicFollowed(message.stream_id, message.subject, mute);
 
     if (headerStyle === 'topic+date') {
       return template`\
@@ -49,7 +51,7 @@ export default (
   data-narrow="${base64Utf8Encode(topicNarrowStr)}"
   data-msg-id="${message.id}"
 >
-  <div class="topic-text">$!${topicHtml}</div>
+  <div class="topic-text" data-followed="${isFollowed}">$!${topicHtml}</div>
   <div class="topic-date">${humanDate(new Date(message.timestamp * 1000))}</div>
 </div>`;
     } else if (headerStyle === 'full') {
@@ -70,7 +72,7 @@ export default (
        data-narrow="${base64Utf8Encode(streamNarrowStr)}">
     # ${streamName}
   </div>
-  <div class="topic-text">$!${topicHtml}</div>
+  <div class="topic-text" data-followed="${isFollowed}">$!${topicHtml}</div>
   <div class="topic-date">${humanDate(new Date(message.timestamp * 1000))}</div>
 </div>`;
     } else {

src/webview/static/base.css

@@ -116,10 +116,22 @@ body {
 .topic-text {
   flex: 1;
   padding: 0 8px;
+  display: flex;
+  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
 }
+.topic-text[data-followed="true"]::after {
+  content: "";
+  background-image: url("images/follow.svg");
+  margin-left: 12px;
+  width: 17px;
+  height: 17px;
+  /* opacity: 0.2 on web, but that's with the pastel stream colors;
+   * 0.3 stands up better to our gray. */
+  opacity: 0.3;
+}
 .topic-date {
   opacity: 0.5;
   padding: 0 8px;

tools/build-webview

@@ -194,6 +194,7 @@ sync "src/webview/static" "${dest}" <<EOF
 
 + /base.css
 + /images/
++ /images/follow.svg
 + /images/play_button.svg
 - *
 EOF