diff --git a/src/webview/html/header.js b/src/webview/html/header.js
index 6733053ccc4..66bb506050c 100644
--- a/src/webview/html/header.js
+++ b/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}"
>
-
$!${topicHtml}
+ $!${topicHtml}
${humanDate(new Date(message.timestamp * 1000))}
`;
} else if (headerStyle === 'full') {
@@ -70,7 +72,7 @@ export default (
data-narrow="${base64Utf8Encode(streamNarrowStr)}">
# ${streamName}
- $!${topicHtml}
+ $!${topicHtml}
${humanDate(new Date(message.timestamp * 1000))}
`;
} else {
diff --git a/src/webview/static/base.css b/src/webview/static/base.css
index 731c97371e5..673b8c369c6 100644
--- a/src/webview/static/base.css
+++ b/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;
diff --git a/src/webview/static/images/follow.svg b/src/webview/static/images/follow.svg
new file mode 100644
index 00000000000..3cbded1e623
--- /dev/null
+++ b/src/webview/static/images/follow.svg
@@ -0,0 +1,3 @@
+
diff --git a/tools/build-webview b/tools/build-webview
index f5735f3f051..766166d45fe 100755
--- a/tools/build-webview
+++ b/tools/build-webview
@@ -194,6 +194,7 @@ sync "src/webview/static" "${dest}" <