Merge remote-tracking branch 'upstream' into glitch

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -96,7 +96,7 @@ export function normalizeStatus(status, normalOldStatus, settings) {
       normalStatus.media_attachments.forEach(item => {
         const oldItem = list.find(i => i.get('id') === item.id);
         if (oldItem && oldItem.get('description') === item.description) {
-          item.translation = oldItem.get('translation')
+          item.translation = oldItem.get('translation');
         }
       });
     }
@@ -129,13 +129,13 @@ export function normalizePoll(poll, normalOldPoll) {
       ...option,
       voted: poll.own_votes && poll.own_votes.includes(index),
       titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
-    }
+    };
 
     if (normalOldPoll && normalOldPoll.getIn(['options', index, 'title']) === option.title) {
       normalOption.translation = normalOldPoll.getIn(['options', index, 'translation']);
     }
 
-    return normalOption
+    return normalOption;
   });
 
   return normalPoll;

app/javascript/flavours/glitch/components/admin/Retention.jsx

@@ -9,11 +9,12 @@ import api from 'flavours/glitch/api';
 import { roundTo10 } from 'flavours/glitch/utils/numbers';
 
 const dateForCohort = cohort => {
+  const timeZone = 'UTC';
   switch(cohort.frequency) {
   case 'day':
-    return <FormattedDate value={cohort.period} month='long' day='2-digit' />;
+    return <FormattedDate value={cohort.period} month='long' day='2-digit' timeZone={timeZone} />;
   default:
-    return <FormattedDate value={cohort.period} month='long' year='numeric' />;
+    return <FormattedDate value={cohort.period} month='long' year='numeric' timeZone={timeZone} />;
   }
 };
 

app/javascript/flavours/glitch/components/column.jsx

@@ -30,7 +30,7 @@ export default class Column extends PureComponent {
       if (scrollable.classList.contains('scrollable--flex')) {
         scrollable = scrollable?.querySelector('.scrollable') || scrollable;
       }
-   }
+    }
 
     if (!scrollable) {
       return;

app/javascript/flavours/glitch/components/poll.jsx

@@ -133,7 +133,7 @@ class Poll extends ImmutablePureComponent {
 
   handleReveal = () => {
     this.setState({ revealed: true });
-  }
+  };
 
   renderOption (option, optionIndex, showResults) {
     const { poll, lang, disabled, intl } = this.props;

app/javascript/flavours/glitch/components/scrollable_list.jsx

@@ -78,7 +78,7 @@ class ScrollableList extends PureComponent {
       const clientHeight = this.getClientHeight();
       const offset = scrollHeight - scrollTop - clientHeight;
 
-      if (400 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
+      if (scrollTop > 0 && offset < 400 && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
         this.props.onLoadMore();
       }
 

app/javascript/flavours/glitch/features/compose/components/search.jsx

@@ -59,14 +59,14 @@ class Search extends PureComponent {
   };
 
   defaultOptions = [
-    { label: <><mark>has:</mark> <FormattedList type='disjunction' value={['media', 'poll', 'embed']} /></>, action: e => { e.preventDefault(); this._insertText('has:') } },
-    { label: <><mark>is:</mark> <FormattedList type='disjunction' value={['reply', 'sensitive']} /></>, action: e => { e.preventDefault(); this._insertText('is:') } },
-    { label: <><mark>language:</mark> <FormattedMessage id='search_popout.language_code' defaultMessage='ISO language code' /></>, action: e => { e.preventDefault(); this._insertText('language:') } },
-    { label: <><mark>from:</mark> <FormattedMessage id='search_popout.user' defaultMessage='user' /></>, action: e => { e.preventDefault(); this._insertText('from:') } },
-    { label: <><mark>before:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('before:') } },
-    { label: <><mark>during:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('during:') } },
-    { label: <><mark>after:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('after:') } },
-    { label: <><mark>in:</mark> <FormattedList type='disjunction' value={['all', 'library']} /></>, action: e => { e.preventDefault(); this._insertText('in:') } }
+    { label: <><mark>has:</mark> <FormattedList type='disjunction' value={['media', 'poll', 'embed']} /></>, action: e => { e.preventDefault(); this._insertText('has:'); } },
+    { label: <><mark>is:</mark> <FormattedList type='disjunction' value={['reply', 'sensitive']} /></>, action: e => { e.preventDefault(); this._insertText('is:'); } },
+    { label: <><mark>language:</mark> <FormattedMessage id='search_popout.language_code' defaultMessage='ISO language code' /></>, action: e => { e.preventDefault(); this._insertText('language:'); } },
+    { label: <><mark>from:</mark> <FormattedMessage id='search_popout.user' defaultMessage='user' /></>, action: e => { e.preventDefault(); this._insertText('from:'); } },
+    { label: <><mark>before:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('before:'); } },
+    { label: <><mark>during:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('during:'); } },
+    { label: <><mark>after:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('after:'); } },
+    { label: <><mark>in:</mark> <FormattedList type='disjunction' value={['all', 'library']} /></>, action: e => { e.preventDefault(); this._insertText('in:'); } }
   ];
 
   setRef = c => {
@@ -92,7 +92,7 @@ class Search extends PureComponent {
 
     if (value.length > 0 || submitted) {
       onClear();
-      this.setState({ options: [], selectedOption: -1 })
+      this.setState({ options: [], selectedOption: -1 });
     }
   };
 

app/javascript/flavours/glitch/features/explore/results.jsx

@@ -80,7 +80,7 @@ class Results extends PureComponent {
     }
 
     return null;
-  };
+  }
 
   handleSelectAll = () => {
     const { submittedType, dispatch } = this.props;
@@ -116,7 +116,7 @@ class Results extends PureComponent {
     }
 
     this.setState({ type: 'hashtags' });
-  }
+  };
 
   handleSelectStatuses = () => {
     const { submittedType, dispatch } = this.props;
@@ -128,7 +128,7 @@ class Results extends PureComponent {
     }
 
     this.setState({ type: 'statuses' });
-  }
+  };
 
   handleLoadMoreAccounts = () => this._loadMore('accounts');
   handleLoadMoreStatuses = () => this._loadMore('statuses');

app/javascript/flavours/glitch/features/firehose/index.jsx

@@ -221,7 +221,7 @@ const Firehose = ({ feedType, multiColumn }) => {
       </Helmet>
     </Column>
   );
-}
+};
 
 Firehose.propTypes = {
   multiColumn: PropTypes.bool,

app/javascript/flavours/glitch/features/home_timeline/index.jsx

@@ -39,8 +39,17 @@ const getHomeFeedSpeed = createSelector([
 ], (statusIds, pendingStatusIds, statusMap) => {
   const recentStatusIds = pendingStatusIds.size > 0 ? pendingStatusIds : statusIds;
   const statuses = recentStatusIds.filter(id => id !== null).map(id => statusMap.get(id)).filter(status => status?.get('account') !== me).take(20);
-  const oldest = new Date(statuses.getIn([statuses.size - 1, 'created_at'], 0));
-  const newest = new Date(statuses.getIn([0, 'created_at'], 0));
+
+  if (statuses.isEmpty()) {
+    return {
+      gap: 0,
+      newest: new Date(0),
+    };
+  }
+
+  const datetimes = statuses.map(status => status.get('created_at', 0));
+  const oldest = new Date(datetimes.min());
+  const newest = new Date(datetimes.max());
   const averageGap = (newest - oldest) / (1000 * (statuses.size + 1)); // Average gap between posts on first page in seconds
 
   return {

app/javascript/flavours/glitch/features/interaction_modal/index.jsx

@@ -27,9 +27,9 @@ const mapStateToProps = (state, { accountId }) => ({
 const mapDispatchToProps = (dispatch) => ({
   onSignupClick() {
     dispatch(closeModal({
-        modalType: undefined,
-        ignoreFocus: false,
-      }));
+      modalType: undefined,
+      ignoreFocus: false,
+    }));
     dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
   },
 });
@@ -187,7 +187,7 @@ class LoginForm extends React.PureComponent {
 
   setIFrameRef = (iframe) => {
     this.iframeRef = iframe;
-  }
+  };
 
   handleFocus = () => {
     this.setState({ expanded: true });

app/javascript/flavours/glitch/features/report/comment.jsx

@@ -104,7 +104,7 @@ const Comment = ({ comment, domain, statusIds, isRemote, isSubmitting, selectedD
       </div>
     </>
   );
-}
+};
 
 Comment.propTypes = {
   comment: PropTypes.string.isRequired,

app/javascript/flavours/glitch/features/status/index.jsx

@@ -217,6 +217,7 @@ class Status extends ImmutablePureComponent {
   componentDidMount () {
     attachFullscreenListener(this.onFullScreenChange);
     this.props.dispatch(fetchStatus(this.props.params.statusId));
+    this._scrollStatusIntoView();
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -614,10 +615,10 @@ class Status extends ImmutablePureComponent {
     this.column = c;
   };
 
-  componentDidUpdate (prevProps) {
-    const { status, ancestorsIds, multiColumn } = this.props;
+  _scrollStatusIntoView () {
+    const { status, multiColumn } = this.props;
 
-    if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
+    if (status) {
       window.requestAnimationFrame(() => {
         this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);
 
@@ -634,6 +635,14 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  componentDidUpdate (prevProps) {
+    const { status, ancestorsIds } = this.props;
+
+    if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
+      this._scrollStatusIntoView();
+    }
+  }
+
   componentWillUnmount () {
     detachFullscreenListener(this.onFullScreenChange);
   }
@@ -642,6 +651,22 @@ class Status extends ImmutablePureComponent {
     this.setState({ fullscreen: isFullscreen() });
   };
 
+  shouldUpdateScroll = (prevRouterProps, { location }) => {
+    // Do not change scroll when opening a modal
+    if (location.state?.mastodonModalKey !== prevRouterProps?.location?.state?.mastodonModalKey) {
+      return false;
+    }
+
+    // Scroll to focused post if it is loaded
+    const child = this.node?.querySelector('.detailed-status__wrapper');
+    if (child) {
+      return [0, child.offsetTop];
+    }
+
+    // Do not scroll otherwise, `componentDidUpdate` will take care of that
+    return false;
+  };
+
   render () {
     let ancestors, descendants;
     const { isLoading, status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
@@ -701,7 +726,7 @@ class Status extends ImmutablePureComponent {
           )}
         />
 
-        <ScrollContainer scrollKey='thread'>
+        <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll}>
           <div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
             {ancestors}
 

app/javascript/flavours/glitch/features/ui/components/header.jsx

@@ -77,8 +77,8 @@ class Header extends PureComponent {
 
       if (sso_redirect) {
         content = (
-            <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
-        )
+          <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+        );
       } else {
         let signupButton;
 

app/javascript/flavours/glitch/features/ui/components/link_footer.jsx

@@ -70,7 +70,7 @@ class LinkFooter extends PureComponent {
           {DividingCircle}
           <Link to='/keyboard-shortcuts'><FormattedMessage id='footer.keyboard_shortcuts' defaultMessage='Keyboard shortcuts' /></Link>
           {DividingCircle}
-          v{version}
+          <span class='version'>v{version}</span>
         </p>
       </div>
     );

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -128,7 +128,7 @@ export default class ModalRoot extends PureComponent {
             <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
               {(SpecificComponent) => {
                 const ref = typeof SpecificComponent !== 'function' ? this.setModalRef : undefined;
-                return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={ref} />
+                return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={ref} />;
               }}
             </BundleContainer>
 

app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx

@@ -24,7 +24,7 @@ const SignInBanner = () => {
         <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favorite, share and reply to posts. You can also interact from your account on a different server.' /></p>
         <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
       </div>
-    )
+    );
   }
 
   if (registrationsOpen) {

app/javascript/flavours/glitch/styles/components/about.scss

@@ -41,6 +41,10 @@
     color: $dark-text-color;
     margin-bottom: 20px;
 
+    .version {
+      white-space: nowrap;
+    }
+
     strong {
       font-weight: 500;
     }