Merge commit '2ce0b666a139726dc406e6c1887728553b947e59' into glitch-soc/merge-upstream

Conflicts:
- `config/webpack/generateLocalePacks.js`:
  A dependency update changed how functions are imported.
  Also, some linting fixes not applicable to glitch-soc.

.eslintrc.js

@@ -55,10 +55,7 @@ module.exports = {
       '\\.(css|scss|json)$',
     ],
     'import/resolver': {
-      node: {
-        paths: ['app/javascript'],
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
+      typescript: {},
     },
   },
 
@@ -104,7 +101,6 @@ module.exports = {
     'react/jsx-equals-spacing': 'error',
     'react/jsx-no-bind': 'error',
     'react/jsx-no-target-blank': 'off',
-    'react/no-deprecated': 'off',
     'react/no-unknown-property': 'off',
     'react/self-closing-comp': 'error',
 
@@ -168,11 +164,14 @@ module.exports = {
       {
         js: 'never',
         jsx: 'never',
+        mjs: 'never',
         ts: 'never',
         tsx: 'never',
       },
     ],
+    'import/first': 'error',
     'import/newline-after-import': 'error',
+    'import/no-anonymous-default-export': 'error',
     'import/no-extraneous-dependencies': [
       'error',
       {
@@ -187,6 +186,9 @@ module.exports = {
     'import/no-amd': 'error',
     'import/no-commonjs': 'error',
     'import/no-import-module-exports': 'error',
+    'import/no-relative-packages': 'error',
+    'import/no-self-import': 'error',
+    'import/no-useless-path-segments': 'error',
     'import/no-webpack-loader-syntax': 'error',
 
     'promise/always-return': 'off',
@@ -258,6 +260,7 @@ module.exports = {
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking',
         'plugin:react/recommended',
         'plugin:react-hooks/recommended',
         'plugin:jsx-a11y/recommended',
@@ -268,8 +271,66 @@ module.exports = {
         'plugin:prettier/recommended',
       ],
 
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
+      },
+
       rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
+        'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+
+        'import/order': [
+          'error',
+          {
+            alphabetize: { order: 'asc' },
+            'newlines-between': 'always',
+            groups: [
+              'builtin',
+              'external',
+              'internal',
+              'parent',
+              ['index', 'sibling'],
+              'object',
+            ],
+            pathGroups: [
+              // React core packages
+              {
+                pattern: '{react,react-dom,prop-types}',
+                group: 'builtin',
+                position: 'after',
+              },
+              // I18n
+              {
+                pattern: 'react-intl',
+                group: 'builtin',
+                position: 'after',
+              },
+              // Common React utilities
+              {
+                pattern: '{classnames,react-helmet}',
+                group: 'external',
+                position: 'before',
+              },
+              // Immutable / Redux / data store
+              {
+                pattern: '{immutable,react-redux,react-immutable-proptypes,react-immutable-pure-component,reselect}',
+                group: 'external',
+                position: 'before',
+              },
+              // Internal packages
+              {
+                pattern: '{mastodon/**}',
+                group: 'internal',
+                position: 'after',
+              },
+            ],
+            pathGroupsExcludedImportTypes: [],
+          },
+        ],
+
+        '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
+        '@typescript-eslint/consistent-type-exports': 'error',
+        '@typescript-eslint/consistent-type-imports': 'error',
 
         'jsdoc/require-jsdoc': 'off',
 

.rubocop_todo.yml

@@ -94,11 +94,6 @@ Lint/AmbiguousBlockAssociation:
     - 'spec/services/unsuspend_account_service_spec.rb'
     - 'spec/workers/scheduler/accounts_statuses_cleanup_scheduler_spec.rb'
 
-# This cop supports safe autocorrection (--autocorrect).
-Lint/AmbiguousOperatorPrecedence:
-  Exclude:
-    - 'config/initializers/rack_attack.rb'
-
 # Configuration parameters: AllowComments, AllowEmptyLambdas.
 Lint/EmptyBlock:
   Exclude:
@@ -646,24 +641,6 @@ RSpec/RepeatedExampleGroupBody:
   Exclude:
     - 'spec/controllers/statuses_controller_spec.rb'
 
-RSpec/RepeatedExampleGroupDescription:
-  Exclude:
-    - 'spec/controllers/admin/reports/actions_controller_spec.rb'
-    - 'spec/policies/report_note_policy_spec.rb'
-
-RSpec/ScatteredSetup:
-  Exclude:
-    - 'spec/controllers/activitypub/followers_synchronizations_controller_spec.rb'
-    - 'spec/controllers/activitypub/outboxes_controller_spec.rb'
-    - 'spec/controllers/admin/disputes/appeals_controller_spec.rb'
-    - 'spec/controllers/auth/registrations_controller_spec.rb'
-    - 'spec/services/activitypub/process_account_service_spec.rb'
-
-# This cop supports safe autocorrection (--autocorrect).
-RSpec/SharedContext:
-  Exclude:
-    - 'spec/services/unsuspend_account_service_spec.rb'
-
 RSpec/StubbedMock:
   Exclude:
     - 'spec/controllers/api/base_controller_spec.rb'

Gemfile.lock

@@ -166,7 +166,7 @@ GEM
       sshkit (~> 1.3)
     capistrano-yarn (2.0.2)
       capistrano (~> 3.0)
-    capybara (3.39.0)
+    capybara (3.39.1)
       addressable
       matrix
       mini_mime (>= 0.1.3)
@@ -331,7 +331,7 @@ GEM
     httplog (1.6.2)
       rack (>= 2.0)
       rainbow (>= 2.0.0)
-    i18n (1.12.0)
+    i18n (1.13.0)
       concurrent-ruby (~> 1.0)
     i18n-tasks (1.0.12)
       activesupport (>= 4.0.2)
@@ -418,7 +418,7 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0218.1)
     mini_mime (1.1.2)
-    mini_portile2 (2.8.1)
+    mini_portile2 (2.8.2)
     minitest (5.18.0)
     msgpack (1.7.0)
     multi_json (1.15.0)
@@ -698,7 +698,7 @@ GEM
       unicode-display_width (>= 1.1.1, < 3)
     terrapin (0.6.0)
       climate_control (>= 0.0.3, < 1.0)
-    thor (1.2.1)
+    thor (1.2.2)
     tilt (2.1.0)
     timeout (0.3.2)
     tpm-key_attestation (0.12.0)

app/controllers/api/v1/admin/canonical_email_blocks_controller.rb

@@ -58,7 +58,7 @@ class Api::V1::Admin::CanonicalEmailBlocksController < Api::BaseController
   end
 
   def set_canonical_email_blocks_from_test
-    @canonical_email_blocks = CanonicalEmailBlock.matching_email(params[:email])
+    @canonical_email_blocks = CanonicalEmailBlock.matching_email(params.require(:email))
   end
 
   def set_canonical_email_block

app/javascript/mastodon/actions/app.ts

@@ -1,11 +1,12 @@
 import { createAction } from '@reduxjs/toolkit';
+
 import type { LayoutType } from '../is_mobile';
 
 export const focusApp = createAction('APP_FOCUS');
 export const unfocusApp = createAction('APP_UNFOCUS');
 
-type ChangeLayoutPayload = {
+interface ChangeLayoutPayload {
   layout: LayoutType;
-};
+}
 export const changeLayout =
   createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE');

app/javascript/mastodon/actions/pin_statuses.js

@@ -1,12 +1,12 @@
 import api from '../api';
 import { importFetchedStatuses } from './importer';
 
+import { me } from '../initial_state';
+
 export const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
 export const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';
 export const PINNED_STATUSES_FETCH_FAIL = 'PINNED_STATUSES_FETCH_FAIL';
 
-import { me } from '../initial_state';
-
 export function fetchPinnedStatuses() {
   return (dispatch, getState) => {
     dispatch(fetchPinnedStatusesRequest());

app/javascript/mastodon/components/__tests__/display_name-test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS }  from 'immutable';
-import DisplayName from '../display_name';
+import { DisplayName } from '../display_name';
 
 describe('<DisplayName />', () => {
   it('renders display name + account name', () => {

app/javascript/mastodon/components/account.jsx

@@ -2,18 +2,18 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { Avatar } from './avatar';
-import DisplayName from './display_name';
+import { DisplayName } from './display_name';
 import { IconButton } from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
 import { RelativeTimestamp } from './relative_timestamp';
-import Skeleton from 'mastodon/components/skeleton';
 import { Link } from 'react-router-dom';
 import { counterRenderer } from 'mastodon/components/common_counter';
 import ShortNumber from 'mastodon/components/short_number';
 import classNames from 'classnames';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { EmptyAccount } from 'mastodon/components/empty_account';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -77,20 +77,7 @@ class Account extends ImmutablePureComponent {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
-      return (
-        <div className={classNames('account', { 'account--minimal': minimal })}>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
-
-              <div>
-                <DisplayName />
-                <Skeleton width='7ch' />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return <EmptyAccount size={size} minimal={minimal} />;
     }
 
     if (hidden) {

app/javascript/mastodon/components/animated_number.tsx

@@ -1,8 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import ShortNumber from './short_number';
+
 import { TransitionMotion, spring } from 'react-motion';
+
 import { reduceMotion } from '../initial_state';
 
+import ShortNumber from './short_number';
+
 const obfuscatedCount = (count: number) => {
   if (count < 0) {
     return 0;
@@ -13,10 +16,10 @@ const obfuscatedCount = (count: number) => {
   }
 };
 
-type Props = {
+interface Props {
   value: number;
   obfuscate?: boolean;
-};
+}
 export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
   const [previousValue, setPreviousValue] = useState(value);
   const [direction, setDirection] = useState<1 | -1>(1);
@@ -64,7 +67,11 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
                 transform: `translateY(${style.y * 100}%)`,
               }}
             >
-              {obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}
+              {obfuscate ? (
+                obfuscatedCount(data as number)
+              ) : (
+                <ShortNumber value={data as number} />
+              )}
             </span>
           ))}
         </span>

app/javascript/mastodon/components/autosuggest_input.jsx

@@ -154,7 +154,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   };
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
       this.setState({ suggestionsHidden: false });
     }

app/javascript/mastodon/components/autosuggest_textarea.jsx

@@ -153,7 +153,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   };
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
       this.setState({ suggestionsHidden: false });
     }

app/javascript/mastodon/components/avatar.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
+
 import classNames from 'classnames';
-import { autoPlayGif } from '../initial_state';
+
 import { useHovering } from '../../hooks/useHovering';
 import type { Account } from '../../types/resources';
+import { autoPlayGif } from '../initial_state';
 
-type Props = {
+interface Props {
   account: Account;
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
-};
+}
 
 export const Avatar: React.FC<Props> = ({
   account,

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import type { Account } from '../../types/resources';
+
 import { useHovering } from '../../hooks/useHovering';
+import type { Account } from '../../types/resources';
 import { autoPlayGif } from '../initial_state';
 
-type Props = {
+interface Props {
   account: Account;
   friend: Account;
   size?: number;
   baseSize?: number;
   overlaySize?: number;
-};
+}
 
 export const AvatarOverlay: React.FC<Props> = ({
   account,

app/javascript/mastodon/components/blurhash.tsx

@@ -1,14 +1,14 @@
-import { decode } from 'blurhash';
 import React, { useRef, useEffect } from 'react';
 
-type Props = {
+import { decode } from 'blurhash';
+
+interface Props extends React.HTMLAttributes<HTMLCanvasElement> {
   hash: string;
   width?: number;
   height?: number;
   dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
   children?: never;
-  [key: string]: any;
-};
+}
 const Blurhash: React.FC<Props> = ({
   hash,
   width = 32,
@@ -21,6 +21,7 @@ const Blurhash: React.FC<Props> = ({
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const canvas = canvasRef.current!;
+
     // eslint-disable-next-line no-self-assign
     canvas.width = canvas.width; // resets canvas
 

app/javascript/mastodon/components/display_name.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import { autoPlayGif } from 'mastodon/initial_state';
-import Skeleton from 'mastodon/components/skeleton';
-
-export default class DisplayName extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map,
-    others: ImmutablePropTypes.list,
-    localDomain: PropTypes.string,
-  };
-
-  handleMouseEnter = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-original');
-    }
-  };
-
-  handleMouseLeave = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-static');
-    }
-  };
-
-  render () {
-    const { others, localDomain } = this.props;
-
-    let displayName, suffix, account;
-
-    if (others && others.size > 1) {
-      displayName = others.take(2).map(a => <bdi key={a.get('id')}><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>).reduce((prev, cur) => [prev, ', ', cur]);
-
-      if (others.size - 2 > 0) {
-        suffix = `+${others.size - 2}`;
-      }
-    } else if ((others && others.size > 0) || this.props.account) {
-      if (others && others.size > 0) {
-        account = others.first();
-      } else {
-        account = this.props.account;
-      }
-
-      let acct = account.get('acct');
-
-      if (acct.indexOf('@') === -1 && localDomain) {
-        acct = `${acct}@${localDomain}`;
-      }
-
-      displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
-      suffix      = <span className='display-name__account'>@{acct}</span>;
-    } else {
-      displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>;
-      suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>;
-    }
-
-    return (
-      <span className='display-name' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-        {displayName} {suffix}
-      </span>
-    );
-  }
-
-}

app/javascript/mastodon/components/display_name.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import type { List } from 'immutable';
+
+import type { Account } from '../../types/resources';
+import { autoPlayGif } from '../initial_state';
+
+import Skeleton from './skeleton';
+
+interface Props {
+  account?: Account;
+  others?: List<Account>;
+  localDomain?: string;
+}
+
+export class DisplayName extends React.PureComponent<Props> {
+  handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
+    currentTarget,
+  }) => {
+    if (autoPlayGif) {
+      return;
+    }
+
+    const emojis =
+      currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji');
+
+    emojis.forEach((emoji) => {
+      const originalSrc = emoji.getAttribute('data-original');
+      if (originalSrc != null) emoji.src = originalSrc;
+    });
+  };
+
+  handleMouseLeave: React.ReactEventHandler<HTMLSpanElement> = ({
+    currentTarget,
+  }) => {
+    if (autoPlayGif) {
+      return;
+    }
+
+    const emojis =
+      currentTarget.querySelectorAll<HTMLImageElement>('img.custom-emoji');
+
+    emojis.forEach((emoji) => {
+      const staticSrc = emoji.getAttribute('data-static');
+      if (staticSrc != null) emoji.src = staticSrc;
+    });
+  };
+
+  render() {
+    const { others, localDomain } = this.props;
+
+    let displayName: React.ReactNode,
+      suffix: React.ReactNode,
+      account: Account | undefined;
+
+    if (others && others.size > 0) {
+      account = others.first();
+    } else if (this.props.account) {
+      account = this.props.account;
+    }
+
+    if (others && others.size > 1) {
+      displayName = others
+        .take(2)
+        .map((a) => (
+          <bdi key={a.get('id')}>
+            <strong
+              className='display-name__html'
+              dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
+            />
+          </bdi>
+        ))
+        .reduce((prev, cur) => [prev, ', ', cur]);
+
+      if (others.size - 2 > 0) {
+        suffix = `+${others.size - 2}`;
+      }
+    } else if (account) {
+      let acct = account.get('acct');
+
+      if (acct.indexOf('@') === -1 && localDomain) {
+        acct = `${acct}@${localDomain}`;
+      }
+
+      displayName = (
+        <bdi>
+          <strong
+            className='display-name__html'
+            dangerouslySetInnerHTML={{
+              __html: account.get('display_name_html'),
+            }}
+          />
+        </bdi>
+      );
+      suffix = <span className='display-name__account'>@{acct}</span>;
+    } else {
+      displayName = (
+        <bdi>
+          <strong className='display-name__html'>
+            <Skeleton width='10ch' />
+          </strong>
+        </bdi>
+      );
+      suffix = (
+        <span className='display-name__account'>
+          <Skeleton width='7ch' />
+        </span>
+      );
+    }
+
+    return (
+      <span
+        className='display-name'
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {displayName} {suffix}
+      </span>
+    );
+  }
+}

app/javascript/mastodon/components/domain.tsx

@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
+
+import type { InjectedIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
 import { IconButton } from './icon_button';
-import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   unblockDomain: {
@@ -9,11 +12,11 @@ const messages = defineMessages({
   },
 });
 
-type Props = {
+interface Props {
   domain: string;
   onUnblockDomain: (domain: string) => void;
   intl: InjectedIntl;
-};
+}
 const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
   const handleDomainUnblock = useCallback(() => {
     onUnblockDomain(domain);

app/javascript/mastodon/components/empty_account.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'mastodon/components/display_name';
+import Skeleton from 'mastodon/components/skeleton';
+
+interface Props {
+  size?: number;
+  minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+  size = 46,
+  minimal = false,
+}) => {
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <Skeleton width={size} height={size} />
+          </div>
+
+          <div>
+            <DisplayName />
+            <Skeleton width='7ch' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

app/javascript/mastodon/components/gifv.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
-type Props = {
+interface Props {
   src: string;
   key: string;
   alt?: string;
@@ -8,7 +8,7 @@ type Props = {
   width: number;
   height: number;
   onClick?: () => void;
-};
+}
 
 export const GIFV: React.FC<Props> = ({
   src,

app/javascript/mastodon/components/icon.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import classNames from 'classnames';
 
-type Props = {
+interface Props extends React.HTMLAttributes<HTMLImageElement> {
   id: string;
   className?: string;
   fixedWidth?: boolean;
   children?: never;
-  [key: string]: any;
-};
+}
+
 export const Icon: React.FC<Props> = ({
   id,
   className,

app/javascript/mastodon/components/icon_button.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
-import { Icon } from './icon';
-import { AnimatedNumber } from './animated_number';
 
-type Props = {
+import classNames from 'classnames';
+
+import { AnimatedNumber } from './animated_number';
+import { Icon } from './icon';
+
+interface Props {
   className?: string;
   title: string;
   icon: string;
@@ -25,11 +27,11 @@ type Props = {
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
-};
-type States = {
+}
+interface States {
   activate: boolean;
   deactivate: boolean;
-};
+}
 export class IconButton extends React.PureComponent<Props, States> {
   static defaultProps = {
     size: 18,

app/javascript/mastodon/components/icon_with_badge.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+
 import { Icon } from './icon';
 
 const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
-type Props = {
+interface Props {
   id: string;
   count: number;
   issueBadge: boolean;
   className: string;
-};
+}
 export const IconWithBadge: React.FC<Props> = ({
   id,
   count,

app/javascript/mastodon/components/logo.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
+
 import logo from 'mastodon/../images/logo.svg';
 
-export const WordmarkLogo = () => (
+export const WordmarkLogo: React.FC = () => (
   <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
     <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-wordmark' />
   </svg>
 );
 
-export const SymbolLogo = () => (
+export const SymbolLogo: React.FC = () => (
   <img src={logo} alt='Mastodon' className='logo logo--icon' />
 );
-
-export default WordmarkLogo;

app/javascript/mastodon/components/media_gallery.jsx

@@ -231,7 +231,7 @@ class MediaGallery extends React.PureComponent {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
       this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
     } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
@@ -256,7 +256,7 @@ class MediaGallery extends React.PureComponent {
   };
 
   handleClick = (index) => {
-    this.props.onOpenMedia(this.props.media, index);
+    this.props.onOpenMedia(this.props.media, index, this.props.lang);
   };
 
   handleRef = c => {

app/javascript/mastodon/components/modal_root.jsx

@@ -57,7 +57,7 @@ export default class ModalRoot extends React.PureComponent {
     this.history = this.context.router ? this.context.router.history : createBrowserHistory();
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!!nextProps.children && !this.props.children) {
       this.activeElement = document.activeElement;
 

app/javascript/mastodon/components/not_signed_in_indicator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 export const NotSignedInIndicator: React.FC = () => (
@@ -6,7 +7,7 @@ export const NotSignedInIndicator: React.FC = () => (
     <div className='empty-column-indicator'>
       <FormattedMessage
         id='not_signed_in_indicator.not_signed_in'
-        defaultMessage='You need to sign in to access this resource.'
+        defaultMessage='You need to login to access this resource.'
       />
     </div>
   </div>

app/javascript/mastodon/components/radio_button.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import classNames from 'classnames';
 
-type Props = {
+interface Props {
   value: string;
   checked: boolean;
   name: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   label: React.ReactNode;
-};
+}
 
 export const RadioButton: React.FC<Props> = ({
   name,

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
+
+import type { InjectedIntl } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
@@ -187,16 +189,16 @@ const timeRemainingString = (
   return relativeTime;
 };
 
-type Props = {
+interface Props {
   intl: InjectedIntl;
   timestamp: string;
   year: number;
   futureDate?: boolean;
   short?: boolean;
-};
-type States = {
+}
+interface States {
   now: number;
-};
+}
 class RelativeTimestamp extends React.Component<Props, States> {
   state = {
     now: this.props.intl.now(),

app/javascript/mastodon/components/server_banner.jsx

@@ -7,7 +7,7 @@ import ShortNumber from 'mastodon/components/short_number';
 import Skeleton from 'mastodon/components/skeleton';
 import Account from 'mastodon/containers/account_container';
 import { domain } from 'mastodon/initial_state';
-import { Image } from 'mastodon/components/image';
+import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
@@ -41,7 +41,7 @@ class ServerBanner extends React.PureComponent {
           <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
         </div>
 
-        <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' />
+        <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' />
 
         <div className='server-banner__description'>
           {isLoading ? (

app/javascript/mastodon/components/server_hero_image.tsx

@@ -1,15 +1,17 @@
 import React, { useCallback, useState } from 'react';
-import { Blurhash } from './blurhash';
+
 import classNames from 'classnames';
 
-type Props = {
+import { Blurhash } from './blurhash';
+
+interface Props {
   src: string;
   srcSet?: string;
   blurhash?: string;
   className?: string;
-};
+}
 
-export const Image: React.FC<Props> = ({
+export const ServerHeroImage: React.FC<Props> = ({
   src,
   srcSet,
   blurhash,

app/javascript/mastodon/components/status.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Avatar } from './avatar';
 import { AvatarOverlay } from './avatar_overlay';
 import { RelativeTimestamp } from './relative_timestamp';
-import DisplayName from './display_name';
+import { DisplayName } from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
 import AttachmentList from './attachment_list';
@@ -194,11 +194,12 @@ class Status extends ImmutablePureComponent {
 
   handleOpenVideo = (options) => {
     const status = this._properStatus();
-    this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), options);
+    this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), status.get('language'), options);
   };
 
   handleOpenMedia = (media, index) => {
-    this.props.onOpenMedia(this._properStatus().get('id'), media, index);
+    const status = this._properStatus();
+    this.props.onOpenMedia(status.get('id'), media, index, status.get('language'));
   };
 
   handleHotkeyOpenMedia = e => {
@@ -208,10 +209,11 @@ class Status extends ImmutablePureComponent {
     e.preventDefault();
 
     if (status.get('media_attachments').size > 0) {
+      const lang = status.get('language');
       if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), { startTime: 0 });
+        onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), lang, { startTime: 0 });
       } else {
-        onOpenMedia(status.get('id'), status.get('media_attachments'), 0);
+        onOpenMedia(status.get('id'), status.get('media_attachments'), 0, lang);
       }
     }
   };

app/javascript/mastodon/components/status_list.jsx

@@ -26,6 +26,7 @@ export default class StatusList extends ImmutablePureComponent {
     alwaysPrepend: PropTypes.bool,
     withCounters: PropTypes.bool,
     timelineId: PropTypes.string,
+    lastId: PropTypes.string,
   };
 
   static defaultProps = {
@@ -55,7 +56,8 @@ export default class StatusList extends ImmutablePureComponent {
   };
 
   handleLoadOlder = debounce(() => {
-    this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
+    const { statusIds, lastId, onLoadMore } = this.props;
+    onLoadMore(lastId || (statusIds.size > 0 ? statusIds.last() : undefined));
   }, 300, { leading: true });
 
   _selectChild (index, align_top) {

app/javascript/mastodon/components/verified_badge.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { Icon } from './icon';
 
-type Props = {
+interface Props {
   link: string;
-};
+}
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
     <Icon id='check' className='verified-badge__mark' />

app/javascript/mastodon/containers/media_container.jsx

@@ -29,19 +29,20 @@ export default class MediaContainer extends PureComponent {
   state = {
     media: null,
     index: null,
+    lang: null,
     time: null,
     backgroundColor: null,
     options: null,
   };
 
-  handleOpenMedia = (media, index) => {
+  handleOpenMedia = (media, index, lang) => {
     document.body.classList.add('with-modals--active');
     document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
 
-    this.setState({ media, index });
+    this.setState({ media, index, lang });
   };
 
-  handleOpenVideo = (options) => {
+  handleOpenVideo = (lang, options) => {
     const { components } = this.props;
     const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props'));
     const mediaList = fromJS(media);
@@ -49,7 +50,7 @@ export default class MediaContainer extends PureComponent {
     document.body.classList.add('with-modals--active');
     document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
 
-    this.setState({ media: mediaList, options });
+    this.setState({ media: mediaList, lang, options });
   };
 
   handleCloseMedia = () => {
@@ -105,6 +106,7 @@ export default class MediaContainer extends PureComponent {
               <MediaModal
                 media={this.state.media}
                 index={this.state.index || 0}
+                lang={this.state.lang}
                 currentTime={this.state.options?.startTime}
                 autoPlay={this.state.options?.autoPlay}
                 volume={this.state.options?.defaultVolume}

app/javascript/mastodon/containers/status_container.jsx

@@ -182,12 +182,12 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch(mentionCompose(account, router));
   },
 
-  onOpenMedia (statusId, media, index) {
-    dispatch(openModal('MEDIA', { statusId, media, index }));
+  onOpenMedia (statusId, media, index, lang) {
+    dispatch(openModal('MEDIA', { statusId, media, index, lang }));
   },
 
-  onOpenVideo (statusId, media, options) {
-    dispatch(openModal('VIDEO', { statusId, media, options }));
+  onOpenVideo (statusId, media, lang, options) {
+    dispatch(openModal('VIDEO', { statusId, media, lang, options }));
   },
 
   onBlock (status) {

app/javascript/mastodon/features/about/index.jsx

@@ -11,7 +11,7 @@ import Account from 'mastodon/containers/account_container';
 import Skeleton from 'mastodon/components/skeleton';
 import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
-import { Image } from 'mastodon/components/image';
+import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
@@ -114,7 +114,7 @@ class About extends React.PureComponent {
       <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
         <div className='scrollable about'>
           <div className='about__header'>
-            <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
+            <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
             <h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1>
             <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p>
           </div>

app/javascript/mastodon/features/account/components/account_note.jsx

@@ -22,7 +22,7 @@ class InlineAlert extends React.PureComponent {
 
   static TRANSITION_DELAY = 200;
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!this.props.show && nextProps.show) {
       this.setState({ mountMessage: true });
     } else if (this.props.show && !nextProps.show) {
@@ -58,11 +58,11 @@ class AccountNote extends ImmutablePureComponent {
     saved: false,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this._reset();
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     const accountWillChange = !is(this.props.account, nextProps.account);
     const newState = {};
 

app/javascript/mastodon/features/account_gallery/index.jsx

@@ -136,16 +136,17 @@ class AccountGallery extends ImmutablePureComponent {
   handleOpenMedia = attachment => {
     const { dispatch } = this.props;
     const statusId = attachment.getIn(['status', 'id']);
+    const lang = attachment.getIn(['status', 'language']);
 
     if (attachment.get('type') === 'video') {
-      dispatch(openModal('VIDEO', { media: attachment, statusId, options: { autoPlay: true } }));
+      dispatch(openModal('VIDEO', { media: attachment, statusId, lang, options: { autoPlay: true } }));
     } else if (attachment.get('type') === 'audio') {
-      dispatch(openModal('AUDIO', { media: attachment, statusId, options: { autoPlay: true } }));
+      dispatch(openModal('AUDIO', { media: attachment, statusId, lang, options: { autoPlay: true } }));
     } else {
       const media = attachment.getIn(['status', 'media_attachments']);
       const index = media.findIndex(x => x.get('id') === attachment.get('id'));
 
-      dispatch(openModal('MEDIA', { media, index, statusId }));
+      dispatch(openModal('MEDIA', { media, index, statusId, lang }));
     }
   };
 

app/javascript/mastodon/features/account_timeline/components/moved_note.jsx

@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { AvatarOverlay } from '../../../components/avatar_overlay';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import { Link } from 'react-router-dom';
 
 export default class MovedNote extends ImmutablePureComponent {

app/javascript/mastodon/features/account_timeline/index.jsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { lookupAccount, fetchAccount } from '../../actions/accounts';
-import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
+import { expandAccountFeaturedTimeline, expandAccountTimeline, connectTimeline, disconnectTimeline } from '../../actions/timelines';
 import StatusList from '../../components/status_list';
 import LoadingIndicator from '../../components/loading_indicator';
 import Column from '../ui/components/column';
@@ -14,7 +14,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import TimelineHint from 'mastodon/components/timeline_hint';
 import { me } from 'mastodon/initial_state';
-import { connectTimeline, disconnectTimeline } from 'mastodon/actions/timelines';
 import LimitedAccountHint from './components/limited_account_hint';
 import { getAccountHidden } from 'mastodon/selectors';
 import { fetchFeaturedTags } from '../../actions/featured_tags';

app/javascript/mastodon/features/audio/index.jsx

@@ -136,7 +136,7 @@ class Audio extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
       this.setState({ revealed: nextProps.visible });
     }

app/javascript/mastodon/features/blocks/index.jsx

@@ -34,7 +34,7 @@ class Blocks extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchBlocks());
   }
 

app/javascript/mastodon/features/bookmarked_statuses/index.jsx

@@ -34,7 +34,7 @@ class Bookmarks extends ImmutablePureComponent {
     isLoading: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchBookmarkedStatuses());
   }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Avatar } from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 

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

@@ -59,7 +59,7 @@ class ModifierPickerMenu extends React.PureComponent {
     this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
   };
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.active) {
       this.attachListeners();
     } else {

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

@@ -212,7 +212,7 @@ class PrivacyDropdown extends React.PureComponent {
     this.props.onChange(value);
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     const { intl: { formatMessage } } = this.props;
 
     this.options = [

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

@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { Avatar } from '../../../components/avatar';
 import { IconButton } from '../../../components/icon_button';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import AttachmentList from 'mastodon/components/attachment_list';

app/javascript/mastodon/features/directory/components/account_card.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'mastodon/selectors';
 import { Avatar } from 'mastodon/components/avatar';
-import DisplayName from 'mastodon/components/display_name';
+import { DisplayName } from 'mastodon/components/display_name';
 import { Link } from 'react-router-dom';
 import Button from 'mastodon/components/button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';

app/javascript/mastodon/features/domain_blocks/index.jsx

@@ -34,7 +34,7 @@ class Blocks extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchDomainBlocks());
   }
 

app/javascript/mastodon/features/favourited_statuses/index.jsx

@@ -34,7 +34,7 @@ class Favourites extends ImmutablePureComponent {
     isLoading: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchFavouritedStatuses());
   }
 

app/javascript/mastodon/features/favourites/index.jsx

@@ -31,13 +31,13 @@ class Favourites extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     if (!this.props.accountIds) {
       this.props.dispatch(fetchFavourites(this.props.params.statusId));
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this.props.dispatch(fetchFavourites(nextProps.params.statusId));
     }

app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router-dom';
 import { Avatar } from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/follow_requests/index.jsx

@@ -39,7 +39,7 @@ class FollowRequests extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchFollowRequests());
   }
 

app/javascript/mastodon/features/interaction_modal/index.jsx

@@ -143,7 +143,7 @@ class InteractionModal extends React.PureComponent {
         <div className='interaction-modal__choices'>
           <div className='interaction-modal__choices__choice'>
             <h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
-            <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
+            <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
             {signupButton}
           </div>
 

app/javascript/mastodon/features/list_adder/components/account.jsx

@@ -4,7 +4,7 @@ import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Avatar } from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import { injectIntl } from 'react-intl';
 
 const makeMapStateToProps = () => {

app/javascript/mastodon/features/list_editor/components/account.jsx

@@ -5,7 +5,7 @@ import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Avatar } from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import { removeFromListEditor, addToListEditor } from '../../../actions/lists';

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -76,7 +76,7 @@ class ListTimeline extends React.PureComponent {
     this.disconnect = dispatch(connectListStream(id));
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     const { dispatch } = this.props;
     const { id } = nextProps.params;
 

app/javascript/mastodon/features/lists/index.jsx

@@ -42,7 +42,7 @@ class Lists extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchLists());
   }
 

app/javascript/mastodon/features/mutes/index.jsx

@@ -35,7 +35,7 @@ class Mutes extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchMutes());
   }
 

app/javascript/mastodon/features/notifications/components/follow_request.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { Avatar } from 'mastodon/components/avatar';
-import DisplayName from 'mastodon/components/display_name';
+import { DisplayName } from 'mastodon/components/display_name';
 import { Link } from 'react-router-dom';
 import { IconButton } from 'mastodon/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';

app/javascript/mastodon/features/notifications/index.jsx

@@ -93,7 +93,7 @@ class Notifications extends React.PureComponent {
     trackScroll: true,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.dispatch(mountNotifications());
   }
 

app/javascript/mastodon/features/onboarding/follows.jsx

@@ -7,7 +7,7 @@ import { fetchSuggestions } from 'mastodon/actions/suggestions';
 import { markAsPartial } from 'mastodon/actions/timelines';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Account from 'mastodon/containers/account_container';
-import EmptyAccount from 'mastodon/components/account';
+import { EmptyAccount } from 'mastodon/components/empty_account';
 import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import { makeGetAccount } from 'mastodon/selectors';
 import { me } from 'mastodon/initial_state';
@@ -31,6 +31,7 @@ class Follows extends React.PureComponent {
     suggestions: ImmutablePropTypes.list,
     account: ImmutablePropTypes.map,
     isLoading: PropTypes.bool,
+    multiColumn: PropTypes.bool,
   };
 
   componentDidMount () {
@@ -44,7 +45,7 @@ class Follows extends React.PureComponent {
   }
 
   render () {
-    const { onBack, isLoading, suggestions, account } = this.props;
+    const { onBack, isLoading, suggestions, account, multiColumn } = this.props;
 
     let loadedContent;
 
@@ -58,7 +59,7 @@ class Follows extends React.PureComponent {
 
     return (
       <Column>
-        <ColumnBackButton onClick={onBack} />
+        <ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
 
         <div className='scrollable privacy-policy'>
           <div className='column-title'>
@@ -84,4 +85,4 @@ class Follows extends React.PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Follows);
+export default connect(mapStateToProps)(Follows);

app/javascript/mastodon/features/onboarding/index.jsx

@@ -40,6 +40,7 @@ class Onboarding extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     account: ImmutablePropTypes.map,
+    multiColumn: PropTypes.bool,
   };
 
   state = {
@@ -93,14 +94,14 @@ class Onboarding extends ImmutablePureComponent {
   }
 
   render () {
-    const { account } = this.props;
+    const { account, multiColumn } = this.props;
     const { step, shareClicked } = this.state;
 
     switch(step) {
     case 'follows':
-      return <Follows onBack={this.handleBackClick} />;
+      return <Follows onBack={this.handleBackClick} multiColumn={multiColumn} />;
     case 'share':
-      return <Share onBack={this.handleBackClick} />;
+      return <Share onBack={this.handleBackClick} multiColumn={multiColumn} />;
     }
 
     return (
@@ -114,7 +115,7 @@ class Onboarding extends ImmutablePureComponent {
 
           <div className='onboarding__steps'>
             <Step onClick={this.handleProfileClick} href='/settings/profile' completed={(!account.get('avatar').endsWith('missing.png')) || (account.get('display_name').length > 0 && account.get('note').length > 0)} icon='address-book-o' label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
-            <Step onClick={this.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Follow {count, plural, one {one person} other {# people}}' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage='You curate your own feed. Lets fill it with interesting people.' />} />
+            <Step onClick={this.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Follow {count, plural, one {one person} other {# people}}' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own feed. Let's fill it with interesting people." />} />
             <Step onClick={this.handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' />} />
             <Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
           </div>

app/javascript/mastodon/features/onboarding/share.jsx

@@ -140,17 +140,18 @@ class Share extends React.PureComponent {
   static propTypes = {
     onBack: PropTypes.func,
     account: ImmutablePropTypes.map,
+    multiColumn: PropTypes.bool,
     intl: PropTypes.object,
   };
 
   render () {
-    const { onBack, account, intl } = this.props;
+    const { onBack, account, multiColumn, intl } = this.props;
 
     const url = (new URL(`/@${account.get('username')}`, document.baseURI)).href;
 
     return (
       <Column>
-        <ColumnBackButton onClick={onBack} />
+        <ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
 
         <div className='scrollable privacy-policy'>
           <div className='column-title'>

app/javascript/mastodon/features/picture_in_picture/components/header.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { IconButton } from 'mastodon/components/icon_button';
 import { Link } from 'react-router-dom';
 import { Avatar } from 'mastodon/components/avatar';
-import DisplayName from 'mastodon/components/display_name';
+import { DisplayName } from 'mastodon/components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({

app/javascript/mastodon/features/pinned_statuses/index.jsx

@@ -29,7 +29,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchPinnedStatuses());
   }
 

app/javascript/mastodon/features/reblogs/index.jsx

@@ -31,13 +31,13 @@ class Reblogs extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     if (!this.props.accountIds) {
       this.props.dispatch(fetchReblogs(this.props.params.statusId));
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this.props.dispatch(fetchReblogs(nextProps.params.statusId));
     }

app/javascript/mastodon/features/report/components/status_check_box.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusContent from 'mastodon/components/status_content';
 import { Avatar } from 'mastodon/components/avatar';
-import DisplayName from 'mastodon/components/display_name';
+import { DisplayName } from 'mastodon/components/display_name';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import Option from './option';
 import MediaAttachments from 'mastodon/components/media_attachments';

app/javascript/mastodon/features/status/components/card.jsx

@@ -66,7 +66,7 @@ export default class Card extends React.PureComponent {
     revealed: !this.props.sensitive,
   };
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!Immutable.is(this.props.card, nextProps.card)) {
       this.setState({ embedded: false, previewLoaded: false });
     }

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Avatar } from '../../../components/avatar';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import StatusContent from '../../../components/status_content';
 import MediaGallery from '../../../components/media_gallery';
 import { Link } from 'react-router-dom';

app/javascript/mastodon/features/status/containers/detailed_status_container.js

@@ -128,12 +128,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(mentionCompose(account, router));
   },
 
-  onOpenMedia (media, index) {
-    dispatch(openModal('MEDIA', { media, index }));
+  onOpenMedia (media, index, lang) {
+    dispatch(openModal('MEDIA', { media, index, lang }));
   },
 
-  onOpenVideo (media, options) {
-    dispatch(openModal('VIDEO', { media, options }));
+  onOpenVideo (media, lang, options) {
+    dispatch(openModal('VIDEO', { media, lang, options }));
   },
 
   onBlock (status) {

app/javascript/mastodon/features/status/index.jsx

@@ -207,7 +207,7 @@ class Status extends ImmutablePureComponent {
     loadedStatusId: undefined,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
@@ -215,7 +215,7 @@ class Status extends ImmutablePureComponent {
     attachFullscreenListener(this.onFullScreenChange);
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this._scrolledIntoView = false;
       this.props.dispatch(fetchStatus(nextProps.params.statusId));
@@ -345,12 +345,12 @@ class Status extends ImmutablePureComponent {
     this.props.dispatch(mentionCompose(account, router));
   };
 
-  handleOpenMedia = (media, index) => {
-    this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index }));
+  handleOpenMedia = (media, index, lang) => {
+    this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index, lang }));
   };
 
-  handleOpenVideo = (media, options) => {
-    this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, options }));
+  handleOpenVideo = (media, lang, options) => {
+    this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, lang, options }));
   };
 
   handleHotkeyOpenMedia = e => {

app/javascript/mastodon/features/ui/components/boost_modal.jsx

@@ -7,7 +7,7 @@ import Button from '../../../components/button';
 import StatusContent from '../../../components/status_content';
 import { Avatar } from '../../../components/avatar';
 import { RelativeTimestamp } from '../../../components/relative_timestamp';
-import DisplayName from '../../../components/display_name';
+import { DisplayName } from '../../../components/display_name';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Icon }  from 'mastodon/components/icon';
 import AttachmentList from 'mastodon/components/attachment_list';

app/javascript/mastodon/features/ui/components/bundle.jsx

@@ -33,11 +33,11 @@ class Bundle extends React.PureComponent {
     forceRender: false,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.load(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fetchComponent !== this.props.fetchComponent) {
       this.load(nextProps);
     }

app/javascript/mastodon/features/ui/components/columns_area.jsx

@@ -18,7 +18,7 @@ import {
   BookmarkedStatuses,
   ListTimeline,
   Directory,
-} from '../../ui/util/async-components';
+} from '../util/async-components';
 import ComposePanel from './compose_panel';
 import NavigationPanel from './navigation_panel';
 import { supportsPassiveEvents } from 'detect-passive-events';
@@ -76,7 +76,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
   }
 
-  componentWillUpdate(nextProps) {
+  UNSAFE_componentWillUpdate(nextProps) {
     if (this.props.singleColumn !== nextProps.singleColumn && nextProps.singleColumn) {
       this.node.removeEventListener('wheel', this.handleWheel);
     }

app/javascript/mastodon/features/ui/components/focal_point_modal.jsx

@@ -5,11 +5,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from '../../../actions/compose';
-import { getPointerPosition } from '../../video';
+import Video, { getPointerPosition } from '../../video';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { IconButton } from 'mastodon/components/icon_button';
 import Button from 'mastodon/components/button';
-import Video from 'mastodon/features/video';
 import Audio from 'mastodon/features/audio';
 import Textarea from 'react-textarea-autosize';
 import UploadProgress from 'mastodon/features/compose/components/upload_progress';

app/javascript/mastodon/features/ui/components/header.jsx

@@ -51,13 +51,13 @@ class Header extends React.PureComponent {
 
       if (registrationsOpen) {
         signupButton = (
-          <a href='/auth/sign_up' className='button button-tertiary'>
+          <a href='/auth/sign_up' className='button'>
             <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
           </a>
         );
       } else {
         signupButton = (
-          <button className='button button-tertiary' onClick={openClosedRegistrationsModal}>
+          <button className='button' onClick={openClosedRegistrationsModal}>
             <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
           </button>
         );
@@ -65,8 +65,8 @@ class Header extends React.PureComponent {
 
       content = (
         <>
-          <a href='/auth/sign_in' className='button'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
           {signupButton}
+          <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
         </>
       );
     }

app/javascript/mastodon/features/ui/components/media_modal.jsx

@@ -3,7 +3,6 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import Video from 'mastodon/features/video';
-import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -21,15 +20,12 @@ const messages = defineMessages({
   next: { id: 'lightbox.next', defaultMessage: 'Next' },
 });
 
-const mapStateToProps = (state, { statusId }) => ({
-  language: state.getIn(['statuses', statusId, 'language']),
-});
-
 class MediaModal extends ImmutablePureComponent {
 
   static propTypes = {
     media: ImmutablePropTypes.list.isRequired,
     statusId: PropTypes.string,
+    lang: PropTypes.string,
     index: PropTypes.number.isRequired,
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -133,7 +129,7 @@ class MediaModal extends ImmutablePureComponent {
   };
 
   render () {
-    const { media, language, statusId, intl, onClose } = this.props;
+    const { media, statusId, lang, intl, onClose } = this.props;
     const { navigationHidden } = this.state;
 
     const index = this.getIndex();
@@ -153,7 +149,7 @@ class MediaModal extends ImmutablePureComponent {
             width={width}
             height={height}
             alt={image.get('description')}
-            lang={language}
+            lang={lang}
             key={image.get('url')}
             onClick={this.toggleNavigation}
             zoomButtonHidden={this.state.zoomButtonHidden}
@@ -176,7 +172,7 @@ class MediaModal extends ImmutablePureComponent {
             onCloseVideo={onClose}
             detailed
             alt={image.get('description')}
-            lang={language}
+            lang={lang}
             key={image.get('url')}
           />
         );
@@ -188,7 +184,7 @@ class MediaModal extends ImmutablePureComponent {
             height={height}
             key={image.get('url')}
             alt={image.get('description')}
-            lang={language}
+            lang={lang}
             onClick={this.toggleNavigation}
           />
         );
@@ -256,4 +252,4 @@ class MediaModal extends ImmutablePureComponent {
 
 }
 
-export default connect(mapStateToProps, null, null, { forwardRef: true })(injectIntl(MediaModal));
+export default injectIntl(MediaModal);

app/javascript/mastodon/features/ui/components/navigation_panel.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
-import Logo from 'mastodon/components/logo';
+import { WordmarkLogo } from 'mastodon/components/logo';
 import { timelinePreview, showTrends } from 'mastodon/initial_state';
 import ColumnLink from './column_link';
 import DisabledAccountBanner from './disabled_account_banner';
@@ -46,7 +46,7 @@ class NavigationPanel extends React.Component {
     return (
       <div className='navigation-panel'>
         <div className='navigation-panel__logo'>
-          <Link to='/' className='column-link column-link--logo'><Logo /></Link>
+          <Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>
           <hr />
         </div>
 

app/javascript/mastodon/features/ui/components/sign_in_banner.jsx

@@ -16,13 +16,13 @@ const SignInBanner = () => {
 
   if (registrationsOpen) {
     signupButton = (
-      <a href='/auth/sign_up' className='button button--block button-tertiary'>
+      <a href='/auth/sign_up' className='button button--block'>
         <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
       </a>
     );
   } else {
     signupButton = (
-      <button className='button button--block button-tertiary' onClick={openClosedRegistrationsModal}>
+      <button className='button button--block' onClick={openClosedRegistrationsModal}>
         <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
       </button>
     );
@@ -30,9 +30,9 @@ const SignInBanner = () => {
 
   return (
     <div className='sign-in-banner'>
-      <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Sign in to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.' /></p>
-      <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
+      <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.' /></p>
       {signupButton}
+      <a href='/auth/sign_in' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
     </div>
   );
 };

app/javascript/mastodon/features/ui/components/upload_area.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Motion from '../../ui/util/optional_motion';
+import Motion from '../util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import { FormattedMessage } from 'react-intl';
 

app/javascript/mastodon/features/ui/containers/status_list_container.js

@@ -37,6 +37,7 @@ const makeMapStateToProps = () => {
 
   const mapStateToProps = (state, { timelineId }) => ({
     statusIds: getStatusIds(state, { type: timelineId }),
+    lastId:    state.getIn(['timelines', timelineId, 'items'])?.last(),
     isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
     isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
     hasMore:   state.getIn(['timelines', timelineId, 'hasMore']),

app/javascript/mastodon/features/ui/index.jsx

@@ -123,7 +123,7 @@ class SwitchingColumnsArea extends React.PureComponent {
     mobile: PropTypes.bool,
   };
 
-  componentWillMount () {
+  UNSAFE_componentWillMount () {
     if (this.props.mobile) {
       document.body.classList.toggle('layout-single-column', true);
       document.body.classList.toggle('layout-multiple-columns', false);

app/javascript/mastodon/features/video/index.jsx

@@ -370,7 +370,7 @@ class Video extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
       this.setState({ revealed: nextProps.visible });
     }
@@ -469,7 +469,7 @@ class Video extends React.PureComponent {
   handleOpenVideo = () => {
     this.video.pause();
 
-    this.props.onOpenVideo({
+    this.props.onOpenVideo(this.props.lang, {
       startTime: this.video.currentTime,
       autoPlay: !this.state.paused,
       defaultVolume: this.state.volume,

app/javascript/mastodon/is_mobile.ts

@@ -1,4 +1,5 @@
 import { supportsPassiveEvents } from 'detect-passive-events';
+
 import { forceSingleColumn } from './initial_state';
 
 const LAYOUT_BREAKPOINT = 630;

app/javascript/mastodon/locales/defaultMessages.json

@@ -356,7 +356,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "You need to sign in to access this resource.",
+        "defaultMessage": "You need to login to access this resource.",
         "id": "not_signed_in_indicator.not_signed_in"
       }
     ],
@@ -2623,7 +2623,7 @@
         "id": "interaction_modal.on_this_server"
       },
       {
-        "defaultMessage": "Sign in",
+        "defaultMessage": "Login",
         "id": "sign_in_banner.sign_in"
       },
       {
@@ -3236,7 +3236,7 @@
         "id": "onboarding.steps.follow_people.title"
       },
       {
-        "defaultMessage": "You curate your own feed. Lets fill it with interesting people.",
+        "defaultMessage": "You curate your own feed. Let's fill it with interesting people.",
         "id": "onboarding.steps.follow_people.body"
       },
       {
@@ -4175,7 +4175,7 @@
         "id": "sign_in_banner.create_account"
       },
       {
-        "defaultMessage": "Sign in",
+        "defaultMessage": "Login",
         "id": "sign_in_banner.sign_in"
       }
     ],
@@ -4374,11 +4374,11 @@
         "id": "sign_in_banner.create_account"
       },
       {
-        "defaultMessage": "Sign in to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.",
+        "defaultMessage": "Login to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.",
         "id": "sign_in_banner.text"
       },
       {
-        "defaultMessage": "Sign in",
+        "defaultMessage": "Login",
         "id": "sign_in_banner.sign_in"
       }
     ],

app/javascript/mastodon/locales/en.json

@@ -391,7 +391,7 @@
   "navigation_bar.public_timeline": "Federated timeline",
   "navigation_bar.search": "Search",
   "navigation_bar.security": "Security",
-  "not_signed_in_indicator.not_signed_in": "You need to sign in to access this resource.",
+  "not_signed_in_indicator.not_signed_in": "You need to login to access this resource.",
   "notification.admin.report": "{name} reported {target}",
   "notification.admin.sign_up": "{name} signed up",
   "notification.favourite": "{name} favourited your post",
@@ -573,8 +573,8 @@
   "server_banner.learn_more": "Learn more",
   "server_banner.server_stats": "Server stats:",
   "sign_in_banner.create_account": "Create account",
-  "sign_in_banner.sign_in": "Sign in",
-  "sign_in_banner.text": "Sign in to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.",
+  "sign_in_banner.sign_in": "Login",
+  "sign_in_banner.text": "Login to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.",
   "status.admin_account": "Open moderation interface for @{name}",
   "status.admin_domain": "Open moderation interface for {domain}",
   "status.admin_status": "Open this post in the moderation interface",

app/javascript/mastodon/locales/locale-data/co.js

@@ -2,7 +2,7 @@
 /*eslint no-nested-ternary: "off"*/
 /*eslint quotes: "off"*/
 
-export default [{
+const rules = [{
   locale: "co",
   pluralRuleFunction: function (e, a) {
     return a ? 1 == e ? "one" : "other" : e >= 0 && e < 2 ? "one" : "other";
@@ -106,3 +106,5 @@ export default [{
     },
   },
 }];
+
+export default rules;

app/javascript/mastodon/locales/locale-data/oc.js

@@ -2,7 +2,7 @@
 /*eslint no-nested-ternary: "off"*/
 /*eslint quotes: "off"*/
 
-export default [{
+const rules = [{
   locale: "oc",
   pluralRuleFunction: function (e, a) {
     return a ? 1 == e ? "one" : "other" : e >= 0 && e < 2 ? "one" : "other";
@@ -106,3 +106,5 @@ export default [{
     },
   },
 }];
+
+export default rules;

app/javascript/mastodon/locales/locale-data/sa.js

@@ -2,9 +2,8 @@
 /*eslint no-nested-ternary: "off"*/
 /*eslint quotes: "off"*/
 /*eslint comma-dangle: "off"*/
-/*eslint semi: "off"*/
 
-export default [
+const rules = [
   {
     locale: "sa",
     fields: {
@@ -94,4 +93,6 @@ export default [
       }
     }
   }
-]
+];
+
+export default rules;

app/javascript/mastodon/polyfills/base_polyfills.ts

@@ -10,8 +10,13 @@ if (!HTMLCanvasElement.prototype.toBlob) {
   const BASE64_MARKER = ';base64,';
 
   Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-    value(callback: BlobCallback, type = 'image/png', quality: any) {
-      const dataURL = this.toDataURL(type, quality);
+    value: function (
+      this: HTMLCanvasElement,
+      callback: BlobCallback,
+      type = 'image/png',
+      quality: unknown
+    ) {
+      const dataURL: string = this.toDataURL(type, quality);
       let data;
 
       if (dataURL.indexOf(BASE64_MARKER) >= 0) {

app/javascript/mastodon/reducers/index.ts

@@ -1,46 +1,47 @@
-import { combineReducers } from 'redux-immutable';
-import dropdown_menu from './dropdown_menu';
-import timelines from './timelines';
-import meta from './meta';
-import alerts from './alerts';
 import { loadingBarReducer } from 'react-redux-loading-bar';
-import modal from './modal';
-import user_lists from './user_lists';
-import domain_lists from './domain_lists';
+import { combineReducers } from 'redux-immutable';
+
 import accounts from './accounts';
 import accounts_counters from './accounts_counters';
-import statuses from './statuses';
-import relationships from './relationships';
-import settings from './settings';
-import push_notifications from './push_notifications';
-import status_lists from './status_lists';
-import mutes from './mutes';
+import accounts_map from './accounts_map';
+import alerts from './alerts';
+import announcements from './announcements';
 import blocks from './blocks';
 import boosts from './boosts';
-import server from './server';
-import contexts from './contexts';
 import compose from './compose';
-import search from './search';
-import media_attachments from './media_attachments';
-import notifications from './notifications';
-import height_cache from './height_cache';
-import custom_emojis from './custom_emojis';
-import lists from './lists';
-import listEditor from './list_editor';
-import listAdder from './list_adder';
-import filters from './filters';
+import contexts from './contexts';
 import conversations from './conversations';
-import suggestions from './suggestions';
-import polls from './polls';
-import trends from './trends';
-import { missedUpdatesReducer } from './missed_updates';
-import announcements from './announcements';
-import markers from './markers';
-import picture_in_picture from './picture_in_picture';
-import accounts_map from './accounts_map';
-import history from './history';
-import tags from './tags';
+import custom_emojis from './custom_emojis';
+import domain_lists from './domain_lists';
+import dropdown_menu from './dropdown_menu';
+import filters from './filters';
 import followed_tags from './followed_tags';
+import height_cache from './height_cache';
+import history from './history';
+import listAdder from './list_adder';
+import listEditor from './list_editor';
+import lists from './lists';
+import markers from './markers';
+import media_attachments from './media_attachments';
+import meta from './meta';
+import { missedUpdatesReducer } from './missed_updates';
+import modal from './modal';
+import mutes from './mutes';
+import notifications from './notifications';
+import picture_in_picture from './picture_in_picture';
+import polls from './polls';
+import push_notifications from './push_notifications';
+import relationships from './relationships';
+import search from './search';
+import server from './server';
+import settings from './settings';
+import status_lists from './status_lists';
+import statuses from './statuses';
+import suggestions from './suggestions';
+import tags from './tags';
+import timelines from './timelines';
+import trends from './trends';
+import user_lists from './user_lists';
 
 const reducers = {
   announcements,

app/javascript/mastodon/reducers/markers.js

@@ -2,13 +2,13 @@ import {
   MARKERS_SUBMIT_SUCCESS,
 } from '../actions/markers';
 
+import { Map as ImmutableMap } from 'immutable';
+
 const initialState = ImmutableMap({
   home: '0',
   notifications: '0',
 });
 
-import { Map as ImmutableMap } from 'immutable';
-
 export default function markers(state = initialState, action) {
   switch(action.type) {
   case MARKERS_SUBMIT_SUCCESS:

app/javascript/mastodon/reducers/missed_updates.ts

@@ -1,12 +1,14 @@
 import { Record } from 'immutable';
-import type { Action } from 'redux';
-import { NOTIFICATIONS_UPDATE } from '../actions/notifications';
-import { focusApp, unfocusApp } from '../actions/app';
 
-type MissedUpdatesState = {
+import type { Action } from 'redux';
+
+import { focusApp, unfocusApp } from '../actions/app';
+import { NOTIFICATIONS_UPDATE } from '../actions/notifications';
+
+interface MissedUpdatesState {
   focused: boolean;
   unread: number;
-};
+}
 const initialState = Record<MissedUpdatesState>({
   focused: true,
   unread: 0,

app/javascript/mastodon/store/index.ts

@@ -1,14 +1,32 @@
+import type { TypedUseSelectorHook } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+
 import { configureStore } from '@reduxjs/toolkit';
+
 import { rootReducer } from '../reducers';
-import { loadingBarMiddleware } from './middlewares/loading_bar';
+
 import { errorsMiddleware } from './middlewares/errors';
+import { loadingBarMiddleware } from './middlewares/loading_bar';
 import { soundsMiddleware } from './middlewares/sounds';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 export const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware()
+    getDefaultMiddleware({
+      // In development, Redux Toolkit enables 2 default middlewares to detect
+      // common issues with states. Unfortunately, our use of ImmutableJS for state
+      // triggers both, so lets disable them until our state is fully refactored
+
+      // https://redux-toolkit.js.org/api/serializabilityMiddleware
+      // This checks recursively that every values in the state are serializable in JSON
+      // Which is not the case, as we use ImmutableJS structures, but also File objects
+      serializableCheck: false,
+
+      // https://redux-toolkit.js.org/api/immutabilityMiddleware
+      // This checks recursively if every value in the state is immutable (ie, a JS primitive type)
+      // But this is not the case, as our Root State is an ImmutableJS map, which is an object
+      immutableCheck: false,
+    })
       .concat(
         loadingBarMiddleware({
           promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],

app/javascript/mastodon/store/middlewares/errors.ts

@@ -1,17 +1,18 @@
-import { Middleware } from 'redux';
+import type { AnyAction, Middleware } from 'redux';
+
+import type { RootState } from '..';
 import { showAlertForError } from '../../actions/alerts';
-import { RootState } from '..';
 
 const defaultFailSuffix = 'FAIL';
 
 export const errorsMiddleware: Middleware<Record<string, never>, RootState> =
   ({ dispatch }) =>
   (next) =>
-  (action) => {
+  (action: AnyAction & { skipAlert?: boolean; skipNotFound?: boolean }) => {
     if (action.type && !action.skipAlert) {
       const isFail = new RegExp(`${defaultFailSuffix}$`, 'g');
 
-      if (action.type.match(isFail)) {
+      if (typeof action.type === 'string' && action.type.match(isFail)) {
         dispatch(showAlertForError(action.error, action.skipNotFound));
       }
     }

app/javascript/mastodon/store/middlewares/loading_bar.ts

@@ -1,6 +1,7 @@
 import { showLoading, hideLoading } from 'react-redux-loading-bar';
-import { Middleware } from 'redux';
-import { RootState } from '..';
+import type { AnyAction, Middleware } from 'redux';
+
+import type { RootState } from '..';
 
 interface Config {
   promiseTypeSuffixes?: string[];
@@ -19,7 +20,7 @@ export const loadingBarMiddleware = (
 
   return ({ dispatch }) =>
     (next) =>
-    (action) => {
+    (action: AnyAction) => {
       if (action.type && !action.skipLoading) {
         const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
 
@@ -27,13 +28,15 @@ export const loadingBarMiddleware = (
         const isFulfilled = new RegExp(`${FULFILLED}$`, 'g');
         const isRejected = new RegExp(`${REJECTED}$`, 'g');
 
-        if (action.type.match(isPending)) {
-          dispatch(showLoading());
-        } else if (
-          action.type.match(isFulfilled) ||
-          action.type.match(isRejected)
-        ) {
-          dispatch(hideLoading());
+        if (typeof action.type === 'string') {
+          if (action.type.match(isPending)) {
+            dispatch(showLoading());
+          } else if (
+            action.type.match(isFulfilled) ||
+            action.type.match(isRejected)
+          ) {
+            dispatch(hideLoading());
+          }
         }
       }
 

app/javascript/mastodon/store/middlewares/sounds.ts

@@ -1,5 +1,6 @@
-import { Middleware, AnyAction } from 'redux';
-import { RootState } from '..';
+import type { Middleware, AnyAction } from 'redux';
+
+import type { RootState } from '..';
 
 interface AudioSource {
   src: string;
@@ -27,7 +28,7 @@ const play = (audio: HTMLAudioElement) => {
     }
   }
 
-  audio.play();
+  void audio.play();
 };
 
 export const soundsMiddleware = (): Middleware<
@@ -47,13 +48,15 @@ export const soundsMiddleware = (): Middleware<
     ]),
   };
 
-  return () => (next) => (action: AnyAction) => {
-    const sound = action?.meta?.sound;
+  return () =>
+    (next) =>
+    (action: AnyAction & { meta?: { sound?: string } }) => {
+      const sound = action?.meta?.sound;
 
-    if (sound && soundCache[sound]) {
-      play(soundCache[sound]);
-    }
+      if (sound && soundCache[sound]) {
+        play(soundCache[sound]);
+      }
 
-    return next(action);
-  };
+      return next(action);
+    };
 };

app/javascript/mastodon/uuid.ts

@@ -1,8 +1,9 @@
 export function uuid(a?: string): string {
   return a
     ? (
-        (a as any as number) ^
-        ((Math.random() * 16) >> ((a as any as number) / 4))
+        (a as unknown as number) ^
+        ((Math.random() * 16) >> ((a as unknown as number) / 4))
       ).toString(16)
-    : ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
+    : // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+      ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
 }

app/javascript/styles/mastodon/components.scss

@@ -3118,7 +3118,7 @@ $ui-header-height: 55px;
 
   &.active {
     transition: none;
-    box-shadow: 0 0 0 2px rgba(lighten($highlight-text-color, 8%), 0.7);
+    box-shadow: 0 0 0 6px rgba(lighten($highlight-text-color, 8%), 0.7);
   }
 }
 
@@ -6447,13 +6447,6 @@ a.status-card.compact:hover {
   &--wide {
     grid-column: span 2;
   }
-
-  &.standalone {
-    .media-gallery__item-gifv-thumbnail {
-      transform: none;
-      top: 0;
-    }
-  }
 }
 
 .media-gallery__item-thumbnail {
@@ -6501,11 +6494,7 @@ a.status-card.compact:hover {
   cursor: zoom-in;
   height: 100%;
   object-fit: cover;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
   width: 100%;
-  z-index: 1;
 }
 
 .media-gallery__item-thumbnail-label {
@@ -6604,6 +6593,8 @@ a.status-card.compact:hover {
   border-radius: 4px;
   box-sizing: border-box;
   color: $white;
+  display: flex;
+  align-items: center;
 
   &.editable {
     border-radius: 0;
@@ -6638,9 +6629,6 @@ a.status-card.compact:hover {
   &.inline {
     video {
       object-fit: contain;
-      position: relative;
-      top: 50%;
-      transform: translateY(-50%);
     }
   }