PLT-6215 Major post list refactor (#6501)

* Major post list refactor

* Fix post and thread deletion

* Fix preferences not selecting correctly

* Fix military time displaying

* Fix UP key for editing posts

* Fix ESLint error

* Various fixes and updates per feedback

* Fix for permalink view

* Revert to old scrolling method and various fixes

* Add floating timestamp, new message indicator, scroll arrows

* Update post loading for focus mode and add visibility limit

* Fix pinning posts and a react warning

* Add loading UI updates from Asaad

* Fix refreshing loop

* Temporarily bump post visibility limit

* Update infinite scrolling

* Remove infinite scrolling

1 files changed, 53 insertions, 0 deletions

diff --git a/webapp/components/post_view/floating_timestamp.jsx b/webapp/components/post_view/floating_timestamp.jsx
new file mode 100644
index 000000000..f0f6af60e
--- /dev/null
+++ b/webapp/components/post_view/floating_timestamp.jsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {FormattedDate} from 'react-intl';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class FloatingTimestamp extends React.PureComponent {
+    static propTypes = {
+        isScrolling: PropTypes.bool.isRequired,
+        isMobile: PropTypes.bool,
+        createAt: PropTypes.number,
+        isRhsPost: PropTypes.bool
+    }
+
+    render() {
+        if (!this.props.isMobile) {
+            return <noscript/>;
+        }
+
+        if (this.props.createAt === 0) {
+            return <noscript/>;
+        }
+
+        const dateString = (
+            <FormattedDate
+                value={this.props.createAt}
+                weekday='short'
+                day='2-digit'
+                month='short'
+                year='numeric'
+            />
+        );
+
+        let className = 'post-list__timestamp';
+        if (this.props.isScrolling) {
+            className += ' scrolling';
+        }
+
+        if (this.props.isRhsPost) {
+            className += ' rhs';
+        }
+
+        return (
+            <div className={className}>
+                <div>
+                    <span>{dateString}</span>
+                </div>
+            </div>
+        );
+    }
+}