Implement sticky date separators

Use `react-sticky` to implement sticky date separators. This will pin a date separator to the top of the timeline panel when the separator scrolls out of the top of the view.

A known issue of this is that the spinner, which is in line with event tiles in the timeline, will appear to push the stuck date separator down. In reality the first date separator after the spinner is in line with event tiles and is not stuck because the spinner forces the timeline to be scrolled slightly further down than it would be otherwise. But also, date separators in the timeline (not "stuck") have a greater height.

Ideally the date separator would be suppressed whilst back paginating, but this will cause the stuck separator to flicker on and off. This is why the suppression has been removed.

package.json

@@ -73,6 +73,7 @@
     "react-addons-css-transition-group": "15.3.2",
     "react-dom": "^15.4.0",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-sticky": "^6.0.1",
     "sanitize-html": "^1.14.1",
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",

src/DateUtils.js

@@ -30,6 +30,18 @@ function getDaysArray() {
     ];
 }
 
+function getLongDaysArray() {
+    return [
+        _t('Sunday'),
+        _t('Monday'),
+        _t('Tuesday'),
+        _t('Wednesday'),
+        _t('Thursday'),
+        _t('Friday'),
+        _t('Saturday'),
+    ];
+}
+
 function getMonthsArray() {
     return [
         _t('Jan'),
@@ -96,6 +108,38 @@ module.exports = {
         });
     },
 
+    formatDateSeparator: function(date) {
+        const days = getDaysArray();
+        const longDays = getLongDaysArray();
+        const months = getMonthsArray();
+
+        const today = new Date();
+        const yesterday = new Date();
+        yesterday.setDate(today.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return _t('Today');
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return _t('Yesterday');
+        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            return longDays[date.getDay()];
+        } else if (today.getTime() - date.getTime() < 365 * 24 * 60 * 60 * 1000) {
+            return _t('%(weekDayName)s, %(monthName)s %(day)s', {
+                weekDayName: days[date.getDay()],
+                monthName: months[date.getMonth()],
+                day: date.getDate(),
+                fullYear: date.getFullYear(),
+            });
+        } else {
+            return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s', {
+                weekDayName: days[date.getDay()],
+                monthName: months[date.getMonth()],
+                day: date.getDate(),
+                fullYear: date.getFullYear(),
+            });
+        }
+    },
+
     formatTime: function(date, showTwelveHour=false) {
         if (showTwelveHour) {
           return twelveHourTime(date);

src/components/structures/MessagePanel.js

@@ -61,9 +61,6 @@ module.exports = React.createClass({
         // for pending messages.
         ourUserId: React.PropTypes.string,
 
-        // true to suppress the date at the start of the timeline
-        suppressFirstDateSeparator: React.PropTypes.bool,
-
         // whether to show read receipts
         manageReadReceipts: React.PropTypes.bool,
 
@@ -517,10 +514,10 @@ module.exports = React.createClass({
 
     _wantsDateSeparator: function(prevEvent, nextEventDate) {
         if (prevEvent == null) {
-            // first event in the panel: depends if we could back-paginate from
-            // here.
-            return !this.props.suppressFirstDateSeparator;
+            // First event in the panel always wants a DateSeparator
+            return true;
         }
+
         const prevEventDate = prevEvent.getDate();
         if (!nextEventDate || !prevEventDate) {
             return false;

src/components/structures/TimelinePanel.js

@@ -1125,7 +1125,6 @@ var TimelinePanel = React.createClass({
                           highlightedEventId={ this.props.highlightedEventId }
                           readMarkerEventId={ this.state.readMarkerEventId }
                           readMarkerVisible={ this.state.readMarkerVisible }
-                          suppressFirstDateSeparator={ this.state.canBackPaginate }
                           showUrlPreview = { this.props.showUrlPreview }
                           manageReadReceipts = { this.props.manageReadReceipts }
                           ourUserId={ MatrixClientPeg.get().credentials.userId }