Merge branch 'glitch-soc:main' into reactions-update

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
     'plugin:import/recommended',
     'plugin:promise/recommended',
     'plugin:jsdoc/recommended',
-    'plugin:prettier/recommended',
   ],
 
   env: {
@@ -63,7 +62,9 @@ module.exports = {
     'consistent-return': 'error',
     'dot-notation': 'error',
     eqeqeq: ['error', 'always', { 'null': 'ignore' }],
+    'indent': ['error', 2],
     'jsx-quotes': ['error', 'prefer-single'],
+    'semi': ['error', 'always'],
     'no-case-declarations': 'off',
     'no-catch-shadow': 'error',
     'no-console': [

Gemfile.lock

@@ -671,7 +671,7 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     semantic_range (3.0.0)
-    sidekiq (6.5.10)
+    sidekiq (6.5.11)
       connection_pool (>= 2.2.5, < 3)
       rack (~> 2.0)
       redis (>= 4.5.0, < 5)

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/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/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/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

@@ -219,6 +219,7 @@ class Status extends ImmutablePureComponent {
   componentDidMount () {
     attachFullscreenListener(this.onFullScreenChange);
     this.props.dispatch(fetchStatus(this.props.params.statusId));
+    this._scrollStatusIntoView();
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -629,10 +630,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);
 
@@ -649,6 +650,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);
   }
@@ -657,6 +666,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;
@@ -716,7 +741,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/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/mastodon/actions/alerts.js

@@ -56,4 +56,4 @@ export const showAlertForError = (error, skipNotFound = false) => {
     title: messages.unexpectedTitle,
     message: messages.unexpectedMessage,
   });
-}
+};

app/javascript/mastodon/actions/importer/normalizer.js

@@ -104,7 +104,7 @@ export function normalizeStatus(status, normalOldStatus) {
       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');
         }
       });
     }
@@ -137,13 +137,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/mastodon/components/column.jsx

@@ -22,7 +22,7 @@ export default class Column extends PureComponent {
       scrollable = document.scrollingElement;
     } else {
       scrollable = this.node.querySelector('.scrollable');
-   }
+    }
 
     if (!scrollable) {
       return;

app/javascript/mastodon/components/poll.jsx

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

app/javascript/mastodon/components/status.jsx

@@ -204,7 +204,7 @@ class Status extends ImmutablePureComponent {
     } else if (attachments.getIn([0, 'type']) === 'audio') {
       return '16 / 9';
     } else {
-      return (attachments.size === 1 && attachments.getIn([0, 'meta', 'small', 'aspect'])) ? attachments.getIn([0, 'meta', 'small', 'aspect']) : '3 / 2'
+      return (attachments.size === 1 && attachments.getIn([0, 'meta', 'small', 'aspect'])) ? attachments.getIn([0, 'meta', 'small', 'aspect']) : '3 / 2';
     }
   }
 

app/javascript/mastodon/features/compose/components/navigation_bar.jsx

@@ -20,7 +20,7 @@ export default class NavigationBar extends ImmutablePureComponent {
   };
 
   render () {
-    const username = this.props.account.get('acct')
+    const username = this.props.account.get('acct');
     return (
       <div className='navigation-bar'>
         <Link to={`/@${username}`}>

app/javascript/mastodon/features/compose/components/search.jsx

@@ -57,14 +57,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 => {

app/javascript/mastodon/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/mastodon/features/firehose/index.jsx

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