webview header: Modify topic header to include date.

src/message/renderMessages.js

@@ -1,6 +1,5 @@
 /* @flow strict-local */
 import type { Message, Narrow, Outbox, RenderedSectionDescriptor } from '../types';
-import { isTopicNarrow, isPrivateOrGroupNarrow } from '../utils/narrow';
 import { isSameRecipient } from '../utils/recipient';
 import { isSameDay } from '../utils/date';
 
@@ -9,7 +8,6 @@ export default (
   narrow: Narrow,
 ): RenderedSectionDescriptor[] => {
   let prevItem;
-  const showHeader = !isPrivateOrGroupNarrow(narrow) && !isTopicNarrow(narrow);
 
   return messages.reduce(
     (sections, item) => {
@@ -25,7 +23,7 @@ export default (
         });
       }
       const diffRecipient = !isSameRecipient(prevItem, item);
-      if (showHeader && diffRecipient) {
+      if (diffRecipient) {
         sections.push({
           key: `header${item.id}`,
           message: item,

src/title/TitleStream.js

@@ -6,7 +6,6 @@ import { StyleSheet, Text, View } from 'react-native';
 import type { Narrow, Stream, Subscription, Dispatch } from '../types';
 import { connect } from '../react-redux';
 import StreamIcon from '../streams/StreamIcon';
-import { isTopicNarrow } from '../utils/narrow';
 import { getStreamInNarrow } from '../selectors';
 import styles from '../styles';
 
@@ -37,7 +36,7 @@ class TitleStream extends PureComponent<Props> {
   });
 
   render() {
-    const { narrow, stream, color } = this.props;
+    const { stream, color } = this.props;
 
     return (
       <View style={this.styles.outer}>
@@ -52,11 +51,6 @@ class TitleStream extends PureComponent<Props> {
             {stream.name}
           </Text>
         </View>
-        {isTopicNarrow(narrow) && (
-          <Text style={[styles.navSubtitle, { color }]} numberOfLines={1} ellipsizeMode="tail">
-            {narrow[1].operand}
-          </Text>
-        )}
       </View>
     );
   }

src/webview/css/css.js

@@ -152,35 +152,27 @@ hr {
 .header-wrapper {
   cursor: pointer;
 }
-.stream-header {
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-}
 .stream-text,
 .topic-header,
 .private-header {
   line-height: 2;
   white-space: nowrap;
 }
-.private-header {
-  padding: 0 0.5em;
-}
 .topic-header {
   background: #ccc;
   min-width: 30%;
 }
 .stream-text {
   padding: 0 0.5em;
 }
-.topic-text {
+.header-text {
   flex: 1;
   padding: 0 0.5em;
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
 }
-.topic-date {
+.header-date {
   opacity: 0.5;
   padding: 0 0.5em;
   pointer-events: none;

src/webview/html/messageAsHtml.js

@@ -11,7 +11,7 @@ import type {
 } from '../../types';
 import type { BackgroundData } from '../MessageList';
 import { getAvatarFromMessage } from '../../utils/avatar';
-import { shortTime } from '../../utils/date';
+import { shortTime, humanDate } from '../../utils/date';
 import aggregateReactions from '../../reactions/aggregateReactions';
 import { codeToEmojiMap } from '../../emoji/data';
 import processAlertWords from './processAlertWords';
@@ -80,6 +80,7 @@ export default (backgroundData: BackgroundData, message: Message | Outbox, isBri
      class="message ${isBrief ? 'message-brief' : 'message-full'}"
      id="msg-${id}"
      data-msg-id="${id}"
+     msg-human-date="${humanDate(new Date(message.timestamp * 1000))}"
      $!${flagStrings.map(flag => template`data-${flag}="true" `).join('')}
     >`;
 

src/webview/html/messageHeaderAsHtml.js

@@ -23,13 +23,13 @@ export default (
   narrow: Narrow,
   item: Message | Outbox | {||},
 ) => {
-  type HeaderStyle = 'none' | 'topic+date' | 'full';
+  type HeaderStyle = 'none' | 'topic+date' | 'date' | 'full';
   const headerStyle: HeaderStyle = caseNarrow(narrow, {
     stream: () => 'topic+date',
-    topic: () => 'none',
+    topic: () => 'topic+date',
 
-    pm: () => 'none',
-    groupPm: () => 'none',
+    pm: () => 'date',
+    groupPm: () => 'full',
 
     home: () => 'full',
     starred: () => 'full',
@@ -52,8 +52,8 @@ export default (
   data-narrow="${topicNarrowStr}"
   data-msg-id="${item.id}"
 >
-  <div class="topic-text">$!${topicHtml}</div>
-  <div class="topic-date">${humanDate(new Date(item.timestamp * 1000))}</div>
+  <div class="header-text">$!${topicHtml}</div>
+  <div class="header-date">${humanDate(new Date(item.timestamp * 1000))}</div>
 </div>
     `;
   }
@@ -71,22 +71,22 @@ export default (
     const topicHtml = renderSubject(item);
 
     return template`
-<div class="header-wrapper header stream-header topic-header"
-    data-msg-id="${item.id}"
-    data-narrow="${topicNarrowStr}">
+<div class="header-wrapper header topic-header"
+    data-narrow="${topicNarrowStr}"
+    data-msg-id="${item.id}">
   <div class="header stream-text"
        style="color: ${textColor};
               background: ${backgroundColor}"
        data-narrow="${streamNarrowStr}">
     # ${item.display_recipient}
   </div>
-  <div class="topic-text">$!${topicHtml}</div>
-  <div class="topic-date">${humanDate(new Date(item.timestamp * 1000))}</div>
+  <div class="header-text">$!${topicHtml}</div>
+  <div class="header-date">${humanDate(new Date(item.timestamp * 1000))}</div>
 </div>
     `;
   }
 
-  if (item.type === 'private' && headerStyle === 'full') {
+  if (item.type === 'private') {
     const recipients =
       item.display_recipient.length === 1 && item.display_recipient[0].email === ownEmail
         ? item.display_recipient
@@ -98,16 +98,30 @@ export default (
         : groupNarrow(recipients.map(r => r.email));
     const privateNarrowStr = JSON.stringify(narrowObj);
 
-    return template`
+    if (headerStyle === 'date') {
+      return template`
 <div class="header-wrapper private-header header"
      data-narrow="${privateNarrowStr}"
      data-msg-id="${item.id}">
-  ${recipients
+  <empty></empty>
+  <div class="header-date">${humanDate(new Date(item.timestamp * 1000))}</div>
+</div>
+      `;
+    }
+
+    if (headerStyle === 'full') {
+      return template`
+<div class="header-wrapper private-header header"
+     data-narrow="${privateNarrowStr}"
+     data-msg-id="${item.id}">
+  <div class="header-text">${recipients
     .map(r => r.full_name)
     .sort()
-    .join(', ')}
+    .join(', ')}</div>
+  <div class="header-date">${humanDate(new Date(item.timestamp * 1000))}</div>
 </div>
-    `;
+      `;
+    }
   }
 
   return '';

src/webview/js/generatedEs3.js

@@ -125,6 +125,16 @@ function walkToMessage(start, step) {
   return element;
 }
 
+function walkToHeaderAbove(start) {
+  var element = start;
+
+  while (element && !element.classList.contains('header')) {
+    element = element.previousElementSibling;
+  }
+
+  return element;
+}
+
 function firstMessage() {
   return walkToMessage(documentBody.firstElementChild, 'nextElementSibling');
 }
@@ -188,6 +198,28 @@ function visibleMessageIds() {
   };
 }
 
+function getFirstVisibleMessage() {
+  var top = 0;
+  var bottom = viewportHeight;
+  var message = document.createElement('null');
+
+  function walkElements(start) {
+    var element = start;
+
+    while (element && isVisible(element, top, bottom)) {
+      if (element.classList.contains('message')) {
+        message = element;
+      }
+
+      element = element.previousElementSibling;
+    }
+  }
+
+  var start = someVisibleMessage(top, bottom);
+  walkElements(start);
+  return message;
+}
+
 var getMessageNode = function getMessageNode(node) {
   var curNode = node;
 
@@ -223,6 +255,19 @@ var sendScrollMessage = function sendScrollMessage() {
   prevMessageRange = messageRange;
 };
 
+var handleDateInHeader = function handleDateInHeader() {
+  var firstVisibleMessage = getFirstVisibleMessage();
+
+  if (firstVisibleMessage) {
+    var replaceableDate = firstVisibleMessage.getAttribute('msg-human-date');
+    var closestHeader = walkToHeaderAbove(firstVisibleMessage);
+
+    if (replaceableDate && closestHeader) {
+      closestHeader.getElementsByClassName('header-date').item(0).innerHTML = replaceableDate;
+    }
+  }
+};
+
 var sendScrollMessageIfListShort = function sendScrollMessageIfListShort() {
   if (documentBody.scrollHeight === documentBody.clientHeight) {
     sendScrollMessage();
@@ -243,6 +288,7 @@ var handleScrollEvent = function handleScrollEvent() {
   }
 
   sendScrollMessage();
+  handleDateInHeader();
   var nearEnd = documentBody.offsetHeight - window.scrollY - window.innerHeight > 100;
   showHideElement('scroll-bottom', nearEnd);
 };

src/webview/js/js.js

@@ -207,6 +207,14 @@ function walkToMessage(
   return element;
 }
 
+function walkToHeaderAbove(start: ?Element): ?Element {
+  let element: ?Element = start;
+  while (element && !element.classList.contains('header')) {
+    element = element.previousElementSibling;
+  }
+  return element;
+}
+
 function firstMessage(): ?Element {
   return walkToMessage(documentBody.firstElementChild, 'nextElementSibling');
 }
@@ -284,6 +292,27 @@ function visibleMessageIds(): { first: number, last: number } {
   return { first, last };
 }
 
+function getFirstVisibleMessage(): Element {
+  const top = 0;
+  const bottom = viewportHeight;
+  let message = document.createElement('null');
+
+  function walkElements(start: ?Element) {
+    let element = start;
+    while (element && isVisible(element, top, bottom)) {
+      if (element.classList.contains('message')) {
+        message = element;
+      }
+      element = element.previousElementSibling;
+    }
+  }
+
+  const start = someVisibleMessage(top, bottom);
+  walkElements(start);
+
+  return message;
+}
+
 /** DEPRECATED */
 const getMessageNode = (node: ?Node): ?Node => {
   let curNode = node;
@@ -333,6 +362,18 @@ const sendScrollMessage = () => {
   prevMessageRange = messageRange;
 };
 
+const handleDateInHeader = () => {
+  const firstVisibleMessage = getFirstVisibleMessage();
+
+  if (firstVisibleMessage) {
+    const replaceableDate = firstVisibleMessage.getAttribute('msg-human-date');
+    const closestHeader = walkToHeaderAbove(firstVisibleMessage);
+    if (replaceableDate && closestHeader) {
+      closestHeader.getElementsByClassName('header-date').item(0).innerHTML = replaceableDate;
+    }
+  }
+};
+
 // If the message list is too short to scroll, fake a scroll event
 // in order to cause the messages to be marked as read.
 const sendScrollMessageIfListShort = () => {
@@ -362,6 +403,7 @@ const handleScrollEvent = () => {
   }
 
   sendScrollMessage();
+  handleDateInHeader();
 
   const nearEnd = documentBody.offsetHeight - window.scrollY - window.innerHeight > 100;
   showHideElement('scroll-bottom', nearEnd);