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

Together with the preceding few commits which add this icon in
some other places in the UI, this completes zulip#5770.

Fixes: zulip#5770

src/webview/__tests__/generateInboundEventEditSequence-test.js

@@ -29,6 +29,8 @@ import getMessageListElements from '../../message/getMessageListElements';
 import { getGlobalSettings } from '../../selectors';
 import { getBackgroundData } from '../backgroundData';
 import { randString } from '../../utils/misc';
+import { makeMuteState } from '../../mute/__tests__/mute-testlib';
+import { UserTopicVisibilityPolicy } from '../../api/modelTypes';
 
 // Tell ESLint to recognize `check` as a helper function that runs
 // assertions.
@@ -443,6 +445,23 @@ describe('messages -> piece descriptors -> content HTML is stable/sensible', ()
       });
     });
 
+    test('message in followed topic', () => {
+      check({
+        narrow: HOME_NARROW,
+        messages: [baseSingleMessage],
+        state: eg.reduxStatePlus({
+          streams: [...eg.plusReduxState.streams, stream1],
+          subscriptions: [
+            ...eg.plusReduxState.subscriptions,
+            eg.makeSubscription({ stream: stream1 }),
+          ],
+          mute: makeMuteState([
+            [stream1, baseSingleMessage.subject, UserTopicVisibilityPolicy.Followed],
+          ]),
+        }),
+      });
+    });
+
     describe('message with reactions', () => {
       describe('displayEmojiReactionUsers: false', () => {
         const state = eg.reduxStatePlus({
@@ -991,6 +1010,42 @@ describe('getEditSequence correct for interesting changes', () => {
       );
     });
 
+    test('follow a topic', () => {
+      const message = eg.streamMessage();
+      check(
+        {
+          messages: [message],
+          state: eg.reduxStatePlus({
+            mute: makeMuteState([]),
+          }),
+        },
+        {
+          messages: [message],
+          state: eg.reduxStatePlus({
+            mute: makeMuteState([[eg.stream, message.subject, UserTopicVisibilityPolicy.Followed]]),
+          }),
+        },
+      );
+    });
+
+    test('unfollow a topic', () => {
+      const message = eg.streamMessage();
+      check(
+        {
+          messages: [message],
+          state: eg.reduxStatePlus({
+            mute: makeMuteState([[eg.stream, message.subject, UserTopicVisibilityPolicy.Followed]]),
+          }),
+        },
+        {
+          messages: [message],
+          state: eg.reduxStatePlus({
+            mute: makeMuteState([]),
+          }),
+        },
+      );
+    });
+
     // TODO(#5208): We haven't settled how we want to track name/avatar
     test.todo("sender's name/avatar changed");
 

src/webview/generateInboundEventEditSequence.js

@@ -8,6 +8,7 @@ import { ensureUnreachable } from '../generics';
 import type { BackgroundData } from './backgroundData';
 import messageListElementHtml from './html/messageListElementHtml';
 import { getUserStatusFromModel } from '../user-statuses/userStatusesCore';
+import { isTopicFollowed } from '../mute/muteModel';
 
 const NODE_ENV = process.env.NODE_ENV;
 
@@ -72,7 +73,19 @@ function doElementsDifferInterestingly(
       return !isEqual(oldElement, newElement);
     case 'header':
       // TODO(?): False positives on `.subsequentMessage.content` changes
-      return !isEqual(oldElement, newElement);
+      if (!isEqual(oldElement, newElement)) {
+        return true;
+      }
+      if (newElement.subsequentMessage?.type === 'stream') {
+        const message = newElement.subsequentMessage;
+        if (
+          isTopicFollowed(message.stream_id, message.subject, oldBackgroundData.mute)
+          !== isTopicFollowed(message.stream_id, message.subject, newBackgroundData.mute)
+        ) {
+          return true;
+        }
+      }
+      return false;
     case 'message': {
       invariant(newElement.type === 'message', 'oldElement.type equals newElement.type');
 

src/webview/html/__tests__/header-test.js

@@ -3,8 +3,10 @@
 import * as eg from '../../../__tests__/lib/exampleData';
 import header from '../header';
 import type { BackgroundData } from '../../backgroundData';
+import { makeMuteState } from '../../../mute/__tests__/mute-testlib';
 
 const backgroundData: BackgroundData = ({
+  mute: makeMuteState([]),
   ownEmail: eg.selfUser.email,
   subscriptions: [eg.stream],
   streams: new Map([[eg.stream.stream_id, eg.stream]]),

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;