dockerfile

.devcontainer/compose.yaml

@@ -21,13 +21,12 @@ services:
       ES_HOST: es
       ES_PORT: '9200'
       LIBRE_TRANSLATE_ENDPOINT: http://libretranslate:5000
-      LOCAL_DOMAIN: ${LOCAL_DOMAIN:-localhost:3000}
     # Overrides default command so things don't shut down after the process ends.
     command: sleep infinity
     ports:
-      - '3000:3000'
-      - '3035:3035'
-      - '4000:4000'
+      - '127.0.0.1:3000:3000'
+      - '127.0.0.1:3035:3035'
+      - '127.0.0.1:4000:4000'
     networks:
       - external_network
       - internal_network

.drone.yml

@@ -16,7 +16,7 @@ steps:
     repo: git.greyfox.tech/bark/mastodon
     dockerfile: Dockerfile
     tags:
-      - latest
+      - prod
 - name: build-streaming
   image: plugins/docker
   environment:		
@@ -30,4 +30,4 @@ steps:
     repo: git.greyfox.tech/bark/mastodon-streaming
     dockerfile: streaming/Dockerfile
     tags:
-      - latest
+      - prod

.env.production.sample

@@ -79,9 +79,6 @@ AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
 S3_ALIAS_HOST=files.example.com
 
-# Optional list of hosts that are allowed to serve media for your instance
-# EXTRA_MEDIA_HOSTS=https://data.example1.com,https://data.example2.com
-
 # IP and session retention
 # -----------------------
 # Make sure to modify the scheduling of ip_cleanup_scheduler in config/sidekiq.yml

.eslintignore

@@ -0,0 +1,13 @@
+/build/**
+/coverage/**
+/db/**
+/lib/**
+/log/**
+/node_modules/**
+/nonobox/**
+/public/**
+!/public/embed.js
+/spec/**
+/tmp/**
+/vendor/**
+!.eslintrc.js

.eslintrc.js

@@ -0,0 +1,367 @@
+// @ts-check
+const { defineConfig } = require('eslint-define-config');
+
+module.exports = defineConfig({
+  root: true,
+
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:import/recommended',
+    'plugin:promise/recommended',
+    'plugin:jsdoc/recommended',
+  ],
+
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+
+  parser: '@typescript-eslint/parser',
+
+  plugins: [
+    'react',
+    'jsx-a11y',
+    'import',
+    'promise',
+    '@typescript-eslint',
+    'formatjs',
+  ],
+
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2021,
+    requireConfigFile: false,
+    babelOptions: {
+      configFile: false,
+      presets: ['@babel/react', '@babel/env'],
+    },
+  },
+
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/ignore': [
+      'node_modules',
+      '\\.(css|scss|json)$',
+    ],
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+
+  rules: {
+    'consistent-return': 'error',
+    'dot-notation': 'error',
+    eqeqeq: ['error', 'always', { 'null': 'ignore' }],
+    'indent': ['error', 2],
+    'jsx-quotes': ['error', 'prefer-single'],
+    'semi': ['error', 'always'],
+    'no-catch-shadow': 'error',
+    'no-console': [
+      'warn',
+      {
+        allow: [
+          'error',
+          'warn',
+        ],
+      },
+    ],
+    'no-empty': ['error', { "allowEmptyCatch": true }],
+    'no-restricted-properties': [
+      'error',
+      { property: 'substring', message: 'Use .slice instead of .substring.' },
+      { property: 'substr', message: 'Use .slice instead of .substr.' },
+    ],
+    'no-restricted-syntax': [
+      'error',
+      {
+        // eslint-disable-next-line no-restricted-syntax
+        selector: 'Literal[value=/•/], JSXText[value=/•/]',
+        // eslint-disable-next-line no-restricted-syntax
+        message: "Use '·' (middle dot) instead of '•' (bullet)",
+      },
+    ],
+    'no-unused-expressions': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        destructuredArrayIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+    'valid-typeof': 'error',
+
+    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', 'tsx'] }],
+    'react/jsx-boolean-value': 'error',
+    'react/display-name': 'off',
+    'react/jsx-fragments': ['error', 'syntax'],
+    'react/jsx-equals-spacing': 'error',
+    'react/jsx-no-bind': 'error',
+    'react/jsx-no-useless-fragment': 'error',
+    'react/jsx-no-target-blank': ['error', { allowReferrer: true }],
+    'react/jsx-tag-spacing': 'error',
+    'react/jsx-uses-react': 'off', // not needed with new JSX transform
+    'react/jsx-wrap-multilines': 'error',
+    'react/react-in-jsx-scope': 'off', // not needed with new JSX transform
+    'react/self-closing-comp': 'error',
+
+    // recommended values found in https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/v6.8.0/src/index.js#L46
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/media-has-caption': 'off',
+    'jsx-a11y/no-autofocus': 'off',
+    // recommended rule is:
+    // 'jsx-a11y/no-interactive-element-to-noninteractive-role': [
+    //   'error',
+    //   {
+    //     tr: ['none', 'presentation'],
+    //     canvas: ['img'],
+    //   },
+    // ],
+    'jsx-a11y/no-interactive-element-to-noninteractive-role': 'off',
+    // recommended rule is:
+    // 'jsx-a11y/no-noninteractive-tabindex': [
+    //   'error',
+    //   {
+    //     tags: [],
+    //     roles: ['tabpanel'],
+    //     allowExpressionValues: true,
+    //   },
+    // ],
+    'jsx-a11y/no-noninteractive-tabindex': 'off',
+    // recommended is full 'error'
+    'jsx-a11y/no-static-element-interactions': [
+      'warn',
+      {
+        handlers: [
+          'onClick',
+        ],
+      },
+    ],
+
+    // See https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/config/recommended.js
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        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',
+      {
+        devDependencies: [
+          '.eslintrc.js',
+          'config/webpack/**',
+          'app/javascript/mastodon/performance.js',
+          'app/javascript/mastodon/test_setup.js',
+          'app/javascript/**/__tests__/**',
+        ],
+      },
+    ],
+    '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',
+
+    '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,react-dom/client,prop-types}',
+            group: 'builtin',
+            position: 'after',
+          },
+          // I18n
+          {
+            pattern: '{react-intl,intl-messageformat}',
+            group: 'builtin',
+            position: 'after',
+          },
+          // Common React utilities
+          {
+            pattern: '{classnames,react-helmet,react-router,react-router-dom}',
+            group: 'external',
+            position: 'before',
+          },
+          // Immutable / Redux / data store
+          {
+            pattern: '{immutable,@reduxjs/toolkit,react-redux,react-immutable-proptypes,react-immutable-pure-component}',
+            group: 'external',
+            position: 'before',
+          },
+          // Internal packages
+          {
+            pattern: '{mastodon/**}',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        pathGroupsExcludedImportTypes: [],
+      },
+    ],
+
+    'promise/always-return': 'off',
+    'promise/catch-or-return': [
+      'error',
+      {
+        allowFinally: true,
+      },
+    ],
+    'promise/no-callback-in-promise': 'off',
+    'promise/no-nesting': 'off',
+    'promise/no-promise-in-callback': 'off',
+
+    'formatjs/blocklist-elements': 'error',
+    'formatjs/enforce-default-message': ['error', 'literal'],
+    'formatjs/enforce-description': 'off', // description values not currently used
+    'formatjs/enforce-id': 'off', // Explicit IDs are used in the project
+    'formatjs/enforce-placeholders': 'off', // Issues in short_number.jsx
+    'formatjs/enforce-plural-rules': 'error',
+    'formatjs/no-camel-case': 'off', // disabledAccount is only non-conforming
+    'formatjs/no-complex-selectors': 'error',
+    'formatjs/no-emoji': 'error',
+    'formatjs/no-id': 'off', // IDs are used for translation keys
+    'formatjs/no-invalid-icu': 'error',
+    'formatjs/no-literal-string-in-jsx': 'off', // Should be looked at, but mainly flagging punctuation outside of strings
+    'formatjs/no-multiple-whitespaces': 'error',
+    'formatjs/no-offset': 'error',
+    'formatjs/no-useless-message': 'error',
+    'formatjs/prefer-formatted-message': 'error',
+    'formatjs/prefer-pound-in-plural': 'error',
+
+    'jsdoc/check-types': 'off',
+    'jsdoc/no-undefined-types': 'off',
+    'jsdoc/require-jsdoc': 'off',
+    'jsdoc/require-param-description': 'off',
+    'jsdoc/require-property-description': 'off',
+    'jsdoc/require-returns-description': 'off',
+    'jsdoc/require-returns': 'off',
+  },
+
+  overrides: [
+    {
+      files: [
+        '.eslintrc.js',
+        '*.config.js',
+        '.*rc.js',
+        'ide-helper.js',
+        'config/webpack/**/*',
+        'config/formatjs-formatter.js',
+      ],
+
+      env: {
+        commonjs: true,
+      },
+
+      parserOptions: {
+        sourceType: 'script',
+      },
+
+      rules: {
+        'import/no-commonjs': 'off',
+      },
+    },
+    {
+      files: [
+        '**/*.ts',
+        '**/*.tsx',
+      ],
+
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'plugin:promise/recommended',
+        'plugin:jsdoc/recommended-typescript',
+      ],
+
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: __dirname,
+      },
+
+      rules: {
+        // Disable formatting rules that have been enabled in the base config
+        'indent': 'off',
+
+        // This is not needed as we use noImplicitReturns, which handles this in addition to understanding types
+        'consistent-return': 'off',
+
+        'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+
+        '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
+        '@typescript-eslint/consistent-type-exports': 'error',
+        '@typescript-eslint/consistent-type-imports': 'error',
+        "@typescript-eslint/prefer-nullish-coalescing": ['error', { ignorePrimitives: { boolean: true } }],
+        "@typescript-eslint/no-restricted-imports": [
+          "warn",
+          {
+            "name": "react-redux",
+            "importNames": ["useSelector", "useDispatch"],
+            "message": "Use typed hooks `useAppDispatch` and `useAppSelector` instead."
+          }
+        ],
+        "@typescript-eslint/restrict-template-expressions": ['warn', { allowNumber: true }],
+        'jsdoc/require-jsdoc': 'off',
+
+        // Those rules set stricter rules for TS files
+        // to enforce better practices when converting from JS
+        'import/no-default-export': 'warn',
+        'react/prefer-stateless-function': 'warn',
+        'react/function-component-definition': ['error', { namedComponents: 'arrow-function' }],
+        'react/jsx-uses-react': 'off', // not needed with new JSX transform
+        'react/react-in-jsx-scope': 'off', // not needed with new JSX transform
+        'react/prop-types': 'off',
+      },
+    },
+    {
+      files: [
+        '**/__tests__/*.js',
+        '**/__tests__/*.jsx',
+      ],
+
+      env: {
+        jest: true,
+      },
+    }
+  ],
+});

.github/renovate.json5

@@ -15,8 +15,6 @@
   // to `null` after any other rule set it to something.
   dependencyDashboardHeader: 'This issue lists Renovate updates and detected dependencies. Read the [Dependency Dashboard](https://docs.renovatebot.com/key-concepts/dashboard/) docs to learn more. Before approving any upgrade: read the description and comments in the [`renovate.json5` file](https://github.com/mastodon/mastodon/blob/main/.github/renovate.json5).',
   postUpdateOptions: ['yarnDedupeHighest'],
-  // The types are now included in recent versions,we ignore them here until we upgrade and remove the dependency
-  ignoreDeps: ['@types/emoji-mart'],
   packageRules: [
     {
       // Require Dependency Dashboard Approval for major version bumps of these node packages
@@ -99,13 +97,7 @@
     {
       // Group all eslint-related packages with `eslint` in the same PR
       matchManagers: ['npm'],
-      matchPackageNames: [
-        'eslint',
-        'eslint-*',
-        'typescript-eslint',
-        '@eslint/*',
-        'globals',
-      ],
+      matchPackageNames: ['eslint', 'eslint-*', '@typescript-eslint/*'],
       matchUpdateTypes: ['patch', 'minor'],
       groupName: 'eslint (non-major)',
     },

.github/workflows/lint-js.yml

@@ -11,7 +11,7 @@ on:
       - 'tsconfig.json'
       - '.nvmrc'
       - '.prettier*'
-      - 'eslint.config.mjs'
+      - '.eslint*'
       - '**/*.js'
       - '**/*.jsx'
       - '**/*.ts'
@@ -25,7 +25,7 @@ on:
       - 'tsconfig.json'
       - '.nvmrc'
       - '.prettier*'
-      - 'eslint.config.mjs'
+      - '.eslint*'
       - '**/*.js'
       - '**/*.jsx'
       - '**/*.ts'
@@ -44,7 +44,7 @@ jobs:
         uses: ./.github/actions/setup-javascript
 
       - name: ESLint
-        run: yarn workspaces foreach --all --parallel run lint:js --max-warnings 0
+        run: yarn lint:js --max-warnings 0
 
       - name: Typecheck
         run: yarn typecheck

.prettierrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   singleQuote: true,
   jsxSingleQuote: true
-};
+}

.rubocop_todo.yml

@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config --auto-gen-only-exclude --no-offense-counts --no-auto-gen-timestamp`
-# using RuboCop version 1.75.2.
+# using RuboCop version 1.73.2.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
@@ -45,7 +45,7 @@ Style/FetchEnvVar:
     - 'lib/tasks/repo.rake'
 
 # This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle, MaxUnannotatedPlaceholdersAllowed, Mode, AllowedMethods, AllowedPatterns.
+# Configuration parameters: EnforcedStyle, MaxUnannotatedPlaceholdersAllowed, AllowedMethods, AllowedPatterns.
 # SupportedStyles: annotated, template, unannotated
 # AllowedMethods: redirect
 Style/FormatStringToken:
@@ -58,10 +58,22 @@ Style/FormatStringToken:
 Style/GuardClause:
   Enabled: false
 
+# This cop supports unsafe autocorrection (--autocorrect-all).
+Style/HashTransformValues:
+  Exclude:
+    - 'app/serializers/rest/web_push_subscription_serializer.rb'
+    - 'app/services/import_service.rb'
+
+# This cop supports unsafe autocorrection (--autocorrect-all).
+Style/MapToHash:
+  Exclude:
+    - 'app/models/status.rb'
+
 # Configuration parameters: AllowedMethods.
 # AllowedMethods: respond_to_missing?
 Style/OptionalBooleanParameter:
   Exclude:
+    - 'app/helpers/json_ld_helper.rb'
     - 'app/lib/admin/system_check/message.rb'
     - 'app/lib/request.rb'
     - 'app/lib/webfinger.rb'

.ruby-version

@@ -1 +1 @@
-3.4.3
+3.4.2

CHANGELOG.md

@@ -2,29 +2,6 @@
 
 All notable changes to this project will be documented in this file.
 
-## [4.3.7] - 2025-04-02
-
-### Add
-
-- Add delay to profile updates to debounce them (#34137 by @ClearlyClaire)
-- Add support for paginating partial collections in `SynchronizeFollowersService` (#34272 and #34277 by @ClearlyClaire)
-
-### Changed
-
-- Change account suspensions to be federated to recently-followed accounts as well (#34294 by @ClearlyClaire)
-- Change `AccountReachFinder` to consider statuses based on suspension date (#32805 and #34291 by @ClearlyClaire and @mjankowski)
-- Change user archive signed URL TTL from 10 seconds to 1 hour (#34254 by @ClearlyClaire)
-
-### Fixed
-
-- Fix static version of animated PNG emojis not being properly extracted (#34337 by @ClearlyClaire)
-- Fix filters not applying in detailed view, favourites and bookmarks (#34259 and #34260 by @ClearlyClaire)
-- Fix handling of malformed/unusual HTML (#34201 by @ClearlyClaire)
-- Fix `CacheBuster` being queued for missing media attachments (#34253 by @ClearlyClaire)
-- Fix incorrect URL being used when cache busting (#34189 by @ClearlyClaire)
-- Fix streaming server refusing unix socket path in `DATABASE_URL` (#34091 by @ClearlyClaire)
-- Fix “x” hotkey not working on boosted filtered posts (#33758 by @ClearlyClaire)
-
 ## [4.3.6] - 2025-03-13
 
 ### Security

Dockerfile

@@ -13,7 +13,7 @@ ARG BASE_REGISTRY="docker.io"
 
 # Ruby image to use for base image, change with [--build-arg RUBY_VERSION="3.4.x"]
 # renovate: datasource=docker depName=docker.io/ruby
-ARG RUBY_VERSION="3.4.3"
+ARG RUBY_VERSION="3.4.2"
 # # Node.js version to use in base image, change with [--build-arg NODE_MAJOR_VERSION="20"]
 # renovate: datasource=node-version depName=node
 ARG NODE_MAJOR_VERSION="22"
@@ -29,11 +29,11 @@ FROM ${BASE_REGISTRY}/ruby:${RUBY_VERSION}-slim-${DEBIAN_VERSION} AS ruby
 # Overwrite existence of 'alpha.X' in version.rb [--build-arg MASTODON_VERSION_PRERELEASE="nightly.2023.11.09"]
 ARG MASTODON_VERSION_PRERELEASE="bark"
 # Append build metadata or fork information to version.rb [--build-arg MASTODON_VERSION_METADATA="pr-123456"]
-ARG MASTODON_VERSION_METADATA="dev"
+ARG MASTODON_VERSION_METADATA="prod"
 # Will be available as Mastodon::Version.source_commit
 ARG SOURCE_COMMIT=""
 
-# Allow Ruby on Rails to serve static files
+# Allow Ruby on Rails to serve statiprodc files
 # See: https://docs.joinmastodon.org/admin/config/#rails_serve_static_files
 ARG RAILS_SERVE_STATIC_FILES="true"
 # Allow to use YJIT compiler
@@ -186,7 +186,7 @@ FROM build AS libvips
 
 # libvips version to compile, change with [--build-arg VIPS_VERSION="8.15.2"]
 # renovate: datasource=github-releases depName=libvips packageName=libvips/libvips
-ARG VIPS_VERSION=8.16.1
+ARG VIPS_VERSION=8.16.0
 # libvips download URL, change with [--build-arg VIPS_URL="https://github.com/libvips/libvips/releases/download"]
 ARG VIPS_URL=https://github.com/libvips/libvips/releases/download
 

FEDERATION.md

@@ -13,7 +13,6 @@
 - [FEP-f1d5: NodeInfo in Fediverse Software](https://codeberg.org/fediverse/fep/src/branch/main/fep/f1d5/fep-f1d5.md)
 - [FEP-8fcf: Followers collection synchronization across servers](https://codeberg.org/fediverse/fep/src/branch/main/fep/8fcf/fep-8fcf.md)
 - [FEP-5feb: Search indexing consent for actors](https://codeberg.org/fediverse/fep/src/branch/main/fep/5feb/fep-5feb.md)
-- [FEP-044f: Consent-respecting quote posts](https://codeberg.org/fediverse/fep/src/branch/main/fep/044f/fep-044f.md): partial support for incoming quote-posts
 
 ## ActivityPub in Mastodon
 

Gemfile

@@ -14,7 +14,6 @@ gem 'haml-rails', '~>2.0'
 gem 'pg', '~> 1.5'
 gem 'pghero'
 
-gem 'aws-sdk-core', '< 3.216.0', require: false # TODO: https://github.com/mastodon/mastodon/pull/34173#issuecomment-2733378873
 gem 'aws-sdk-s3', '~> 1.123', require: false
 gem 'blurhash', '~> 0.1'
 gem 'fog-core', '<= 2.6.0'
@@ -62,7 +61,6 @@ gem 'inline_svg'
 gem 'irb', '~> 1.8'
 gem 'kaminari', '~> 1.2'
 gem 'link_header', '~> 0.0'
-gem 'linzer', '~> 0.6.1'
 gem 'mario-redis-lock', '~> 1.2', require: 'redis_lock'
 gem 'mime-types', '~> 3.6.0', require: 'mime/types/columnar'
 gem 'mutex_m'

Gemfile.lock

@@ -91,11 +91,11 @@ GEM
     aes_key_wrap (1.1.0)
     android_key_attestation (0.3.0)
     annotaterb (4.14.0)
-    ast (2.4.3)
+    ast (2.4.2)
     attr_required (1.0.2)
-    aws-eventstream (1.3.2)
-    aws-partitions (1.1087.0)
-    aws-sdk-core (3.215.1)
+    aws-eventstream (1.3.0)
+    aws-partitions (1.1032.0)
+    aws-sdk-core (3.214.1)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
@@ -107,9 +107,9 @@ GEM
       aws-sdk-core (~> 3, >= 3.210.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
-    aws-sigv4 (1.11.0)
+    aws-sigv4 (1.10.1)
       aws-eventstream (~> 1, >= 1.0.2)
-    azure-blob (0.5.7)
+    azure-blob (0.5.4)
       rexml
     base64 (0.2.0)
     bcp47_spec (0.2.1)
@@ -120,13 +120,13 @@ GEM
       rack (>= 0.9.0)
       rouge (>= 1.0.0)
     bigdecimal (3.1.9)
-    bindata (2.5.1)
+    bindata (2.5.0)
     binding_of_caller (1.0.1)
       debug_inspector (>= 1.2.0)
     blurhash (0.1.8)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
-    brakeman (7.0.2)
+    brakeman (7.0.0)
       racc
     browser (6.2.0)
     brpoplpush-redis_script (0.1.3)
@@ -160,7 +160,7 @@ GEM
     cocoon (1.2.15)
     color_diff (0.1)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.1)
+    connection_pool (2.5.0)
     cose (1.3.1)
       cbor (~> 0.5.9)
       openssl-signature_algorithm (~> 1.0)
@@ -168,9 +168,9 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
-    css_parser (1.21.1)
+    css_parser (1.21.0)
       addressable
-    csv (3.3.4)
+    csv (3.3.2)
     database_cleaner-active_record (2.2.0)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
@@ -194,14 +194,14 @@ GEM
     devise_pam_authenticatable2 (9.2.0)
       devise (>= 4.0.0)
       rpam2 (~> 4.0)
-    diff-lcs (1.6.1)
+    diff-lcs (1.6.0)
     discard (1.4.0)
       activerecord (>= 4.2, < 9.0)
     docile (1.4.1)
     domain_name (0.6.20240107)
-    doorkeeper (5.8.2)
+    doorkeeper (5.8.1)
       railties (>= 5)
-    dotenv (3.1.8)
+    dotenv (3.1.7)
     drb (2.2.1)
     elasticsearch (7.17.11)
       elasticsearch-api (= 7.17.11)
@@ -222,12 +222,11 @@ GEM
     erubi (1.13.1)
     et-orbi (1.2.11)
       tzinfo
-    excon (1.2.5)
-      logger
+    excon (1.2.3)
     fabrication (2.31.0)
     faker (3.5.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.13.0)
+    faraday (2.12.2)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -239,7 +238,7 @@ GEM
       net-http (>= 0.5.0)
     fast_blank (1.0.1)
     fastimage (2.4.0)
-    ffi (1.17.2)
+    ffi (1.17.1)
     ffi-compiler (1.3.2)
       ffi (>= 1.15.5)
       rake
@@ -257,7 +256,7 @@ GEM
     fog-json (1.2.0)
       fog-core
       multi_json (~> 1.10)
-    fog-openstack (1.1.5)
+    fog-openstack (1.1.4)
       fog-core (~> 2.1)
       fog-json (>= 1.0)
     formatador (1.1.0)
@@ -266,10 +265,8 @@ GEM
       raabro (~> 1.4)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-protobuf (4.30.2)
-      bigdecimal
-      rake (>= 13)
-    googleapis-common-protos-types (1.19.0)
+    google-protobuf (3.25.6)
+    googleapis-common-protos-types (1.18.0)
       google-protobuf (>= 3.18, < 5.a)
     haml (6.3.0)
       temple (>= 0.8.2)
@@ -280,7 +277,7 @@ GEM
       activesupport (>= 5.1)
       haml (>= 4.0.6)
       railties (>= 5.1)
-    haml_lint (0.62.0)
+    haml_lint (0.61.0)
       haml (>= 5.0)
       parallel (~> 1.10)
       rainbow
@@ -305,8 +302,7 @@ GEM
       domain_name (~> 0.5)
     http-form_data (2.3.0)
     http_accept_language (2.1.1)
-    httpclient (2.9.0)
-      mutex_m
+    httpclient (2.8.3)
     httplog (1.7.0)
       rack (>= 2.0)
       rainbow (>= 2.0.0)
@@ -328,7 +324,7 @@ GEM
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.8.0)
-    irb (1.15.2)
+    irb (1.15.1)
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
@@ -382,7 +378,7 @@ GEM
       mime-types
       terrapin (>= 0.6.0, < 2.0)
     language_server-protocol (3.17.0.4)
-    launchy (3.1.1)
+    launchy (3.1.0)
       addressable (~> 2.8)
       childprocess (~> 5.0)
       logger (~> 1.6)
@@ -395,16 +391,10 @@ GEM
       rexml
     link_header (0.0.8)
     lint_roller (1.1.0)
-    linzer (0.6.5)
-      openssl (~> 3.0, >= 3.0.0)
-      rack (>= 2.2, < 4.0)
-      starry (~> 0.2)
-      stringio (~> 3.1, >= 3.1.2)
-      uri (~> 1.0, >= 1.0.2)
-    llhttp-ffi (0.5.1)
+    llhttp-ffi (0.5.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    logger (1.7.0)
+    logger (1.6.6)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
@@ -423,13 +413,13 @@ GEM
       redis (>= 3.0.5)
     matrix (0.4.2)
     memory_profiler (1.1.0)
-    mime-types (3.6.2)
+    mime-types (3.6.0)
       logger
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2025.0408)
+    mime-types-data (3.2025.0220)
     mini_mime (1.1.5)
     mini_portile2 (2.8.8)
-    minitest (5.25.5)
+    minitest (5.25.4)
     msgpack (1.8.0)
     multi_json (1.15.0)
     mutex_m (0.3.0)
@@ -446,7 +436,7 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.18.7)
+    nokogiri (1.18.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     oj (3.16.10)
@@ -495,8 +485,6 @@ GEM
       opentelemetry-common (~> 0.20)
       opentelemetry-sdk (~> 1.2)
       opentelemetry-semantic_conventions
-    opentelemetry-helpers-sql (0.1.1)
-      opentelemetry-api (~> 1.0)
     opentelemetry-helpers-sql-obfuscation (0.3.0)
       opentelemetry-common (~> 0.21)
     opentelemetry-instrumentation-action_mailer (0.4.0)
@@ -550,9 +538,8 @@ GEM
     opentelemetry-instrumentation-net_http (0.23.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-pg (0.30.1)
+    opentelemetry-instrumentation-pg (0.30.0)
       opentelemetry-api (~> 1.0)
-      opentelemetry-helpers-sql
       opentelemetry-helpers-sql-obfuscation
       opentelemetry-instrumentation-base (~> 0.23.0)
     opentelemetry-instrumentation-rack (0.26.0)
@@ -572,7 +559,7 @@ GEM
     opentelemetry-instrumentation-redis (0.26.1)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-sidekiq (0.26.1)
+    opentelemetry-instrumentation-sidekiq (0.26.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.23.0)
     opentelemetry-registry (0.4.0)
@@ -588,15 +575,15 @@ GEM
     ostruct (0.6.1)
     ox (2.14.22)
       bigdecimal (>= 3.0)
-    parallel (1.27.0)
-    parser (3.3.8.0)
+    parallel (1.26.3)
+    parser (3.3.7.1)
       ast (~> 2.4.1)
       racc
     parslet (2.0.0)
     pastel (0.8.0)
       tty-color (~> 0.5)
     pg (1.5.9)
-    pghero (3.6.2)
+    pghero (3.6.1)
       activerecord (>= 6.1)
     pp (0.6.2)
       prettyprint
@@ -609,7 +596,6 @@ GEM
       net-smtp
       premailer (~> 1.7, >= 1.7.9)
     prettyprint (0.2.0)
-    prism (1.4.0)
     prometheus_exporter (2.2.0)
       webrick
     propshaft (1.1.0)
@@ -691,7 +677,7 @@ GEM
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.7.0)
       rdf (~> 3.3)
-    rdoc (6.13.1)
+    rdoc (6.12.0)
       psych (>= 4.0.0)
     redcarpet (3.6.1)
     redis (4.8.1)
@@ -700,7 +686,7 @@ GEM
     redlock (1.3.2)
       redis (>= 3.0.0, < 6.0)
     regexp_parser (2.10.0)
-    reline (0.6.1)
+    reline (0.6.0)
       io-console (~> 0.5)
     request_store (1.7.0)
       rack (>= 1.4)
@@ -743,7 +729,7 @@ GEM
       rspec-mocks (~> 3.0)
       sidekiq (>= 5, < 9)
     rspec-support (3.13.2)
-    rubocop (1.75.2)
+    rubocop (1.73.2)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -751,27 +737,26 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.44.1)
-      parser (>= 3.3.7.2)
-      prism (~> 1.4)
+    rubocop-ast (1.38.1)
+      parser (>= 3.3.1.0)
     rubocop-capybara (2.22.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
     rubocop-i18n (3.2.3)
       lint_roller (~> 1.1)
       rubocop (>= 1.72.1)
-    rubocop-performance (1.25.0)
+    rubocop-performance (1.24.0)
       lint_roller (~> 1.1)
-      rubocop (>= 1.75.0, < 2.0)
+      rubocop (>= 1.72.1, < 2.0)
       rubocop-ast (>= 1.38.0, < 2.0)
-    rubocop-rails (2.31.0)
+    rubocop-rails (2.30.3)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.75.0, < 2.0)
+      rubocop (>= 1.72.1, < 2.0)
       rubocop-ast (>= 1.38.0, < 2.0)
     rubocop-rspec (3.5.0)
       lint_roller (~> 1.1)
@@ -800,7 +785,7 @@ GEM
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
     securerandom (0.4.1)
-    selenium-webdriver (4.31.0)
+    selenium-webdriver (4.29.1)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
@@ -838,12 +823,10 @@ GEM
     simplecov-lcov (0.8.0)
     simplecov_json_formatter (0.1.4)
     stackprof (0.2.27)
-    starry (0.2.0)
-      base64
     stoplight (4.1.1)
       redlock (~> 1.0)
-    stringio (3.1.6)
-    strong_migrations (2.3.0)
+    stringio (3.1.5)
+    strong_migrations (2.2.0)
       activerecord (>= 7)
     swd (2.0.3)
       activesupport (>= 3)
@@ -854,7 +837,7 @@ GEM
     temple (0.10.3)
     terminal-table (4.0.0)
       unicode-display_width (>= 1.1.1, < 4)
-    terrapin (1.1.0)
+    terrapin (1.0.1)
       climate_control
     test-prof (1.4.4)
     thor (1.3.2)
@@ -879,7 +862,7 @@ GEM
       unf (~> 0.1.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2025.2)
+    tzinfo-data (1.2025.1)
       tzinfo (>= 1.0.0)
     unf (0.1.4)
       unf_ext
@@ -934,7 +917,6 @@ DEPENDENCIES
   active_model_serializers (~> 0.10)
   addressable (~> 2.8)
   annotaterb (~> 4.13)
-  aws-sdk-core (< 3.216.0)
   aws-sdk-s3 (~> 1.123)
   better_errors (~> 2.9)
   binding_of_caller (~> 1.0)
@@ -991,7 +973,6 @@ DEPENDENCIES
   letter_opener (~> 1.8)
   letter_opener_web (~> 3.0)
   link_header (~> 0.0)
-  linzer (~> 0.6.1)
   lograge (~> 0.12)
   mail (~> 2.8)
   mario-redis-lock (~> 1.2)
@@ -1088,4 +1069,4 @@ RUBY VERSION
    ruby 3.4.1p0
 
 BUNDLED WITH
-   2.6.8
+   2.6.5

SECURITY.md

@@ -13,8 +13,9 @@ A "vulnerability in Mastodon" is a vulnerability in the code distributed through
 
 ## Supported Versions
 
-| Version | Supported |
-| ------- | --------- |
-| 4.3.x   | Yes       |
-| 4.2.x   | Yes       |
-| < 4.2   | No        |
+| Version | Supported        |
+| ------- | ---------------- |
+| 4.3.x   | Yes              |
+| 4.2.x   | Yes              |
+| 4.1.x   | Until 2025-04-08 |
+| < 4.1   | No               |

app/controllers/admin/fasp/debug/callbacks_controller.rb

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-class Admin::Fasp::Debug::CallbacksController < Admin::BaseController
-  def index
-    authorize [:admin, :fasp, :provider], :update?
-
-    @callbacks = Fasp::DebugCallback
-                 .includes(:fasp_provider)
-                 .order(created_at: :desc)
-  end
-
-  def destroy
-    authorize [:admin, :fasp, :provider], :update?
-
-    callback = Fasp::DebugCallback.find(params[:id])
-    callback.destroy
-
-    redirect_to admin_fasp_debug_callbacks_path
-  end
-end

app/controllers/admin/fasp/debug_calls_controller.rb

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-class Admin::Fasp::DebugCallsController < Admin::BaseController
-  before_action :set_provider
-
-  def create
-    authorize [:admin, @provider], :update?
-
-    @provider.perform_debug_call
-
-    redirect_to admin_fasp_providers_path
-  end
-
-  private
-
-  def set_provider
-    @provider = Fasp::Provider.find(params[:provider_id])
-  end
-end

app/controllers/admin/fasp/providers_controller.rb

@@ -1,47 +0,0 @@
-# frozen_string_literal: true
-
-class Admin::Fasp::ProvidersController < Admin::BaseController
-  before_action :set_provider, only: [:show, :edit, :update, :destroy]
-
-  def index
-    authorize [:admin, :fasp, :provider], :index?
-
-    @providers = Fasp::Provider.order(confirmed: :asc, created_at: :desc)
-  end
-
-  def show
-    authorize [:admin, @provider], :show?
-  end
-
-  def edit
-    authorize [:admin, @provider], :update?
-  end
-
-  def update
-    authorize [:admin, @provider], :update?
-
-    if @provider.update(provider_params)
-      redirect_to admin_fasp_providers_path
-    else
-      render :edit
-    end
-  end
-
-  def destroy
-    authorize [:admin, @provider], :destroy?
-
-    @provider.destroy
-
-    redirect_to admin_fasp_providers_path
-  end
-
-  private
-
-  def provider_params
-    params.expect(fasp_provider: [capabilities_attributes: {}])
-  end
-
-  def set_provider
-    @provider = Fasp::Provider.find(params[:id])
-  end
-end

app/controllers/admin/fasp/registrations_controller.rb

@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-class Admin::Fasp::RegistrationsController < Admin::BaseController
-  before_action :set_provider
-
-  def new
-    authorize [:admin, @provider], :create?
-  end
-
-  def create
-    authorize [:admin, @provider], :create?
-
-    @provider.update_info!(confirm: true)
-
-    redirect_to edit_admin_fasp_provider_path(@provider)
-  end
-
-  private
-
-  def set_provider
-    @provider = Fasp::Provider.find(params[:provider_id])
-  end
-end

app/controllers/api/fasp/base_controller.rb

@@ -1,81 +0,0 @@
-# frozen_string_literal: true
-
-class Api::Fasp::BaseController < ApplicationController
-  class Error < ::StandardError; end
-
-  DIGEST_PATTERN = /sha-256=:(.*?):/
-  KEYID_PATTERN = /keyid="(.*?)"/
-
-  attr_reader :current_provider
-
-  skip_forgery_protection
-
-  before_action :check_fasp_enabled
-  before_action :require_authentication
-  after_action :sign_response
-
-  private
-
-  def require_authentication
-    validate_content_digest!
-    validate_signature!
-  rescue Error, Linzer::Error, ActiveRecord::RecordNotFound => e
-    logger.debug("FASP Authentication error: #{e}")
-    authentication_error
-  end
-
-  def authentication_error
-    respond_to do |format|
-      format.json { head 401 }
-    end
-  end
-
-  def validate_content_digest!
-    content_digest_header = request.headers['content-digest']
-    raise Error, 'content-digest missing' if content_digest_header.blank?
-
-    digest_received = content_digest_header.match(DIGEST_PATTERN)[1]
-
-    digest_computed = OpenSSL::Digest.base64digest('sha256', request.body&.string || '')
-
-    raise Error, 'content-digest does not match' if digest_received != digest_computed
-  end
-
-  def validate_signature!
-    signature_input = request.headers['signature-input']&.encode('UTF-8')
-    raise Error, 'signature-input is missing' if signature_input.blank?
-
-    keyid = signature_input.match(KEYID_PATTERN)[1]
-    provider = Fasp::Provider.find(keyid)
-    linzer_request = Linzer.new_request(
-      request.method,
-      request.original_url,
-      {},
-      {
-        'content-digest' => request.headers['content-digest'],
-        'signature-input' => signature_input,
-        'signature' => request.headers['signature'],
-      }
-    )
-    message = Linzer::Message.new(linzer_request)
-    key = Linzer.new_ed25519_public_key(provider.provider_public_key_pem, keyid)
-    signature = Linzer::Signature.build(message.headers)
-    Linzer.verify(key, message, signature)
-    @current_provider = provider
-  end
-
-  def sign_response
-    response.headers['content-digest'] = "sha-256=:#{OpenSSL::Digest.base64digest('sha256', response.body || '')}:"
-
-    linzer_response = Linzer.new_response(response.body, response.status, { 'content-digest' => response.headers['content-digest'] })
-    message = Linzer::Message.new(linzer_response)
-    key = Linzer.new_ed25519_key(current_provider.server_private_key_pem)
-    signature = Linzer.sign(key, message, %w(@status content-digest))
-
-    response.headers.merge!(signature.to_h)
-  end
-
-  def check_fasp_enabled
-    raise ActionController::RoutingError unless Mastodon::Feature.fasp_enabled?
-  end
-end

app/controllers/api/fasp/debug/v0/callback/responses_controller.rb

@@ -1,15 +0,0 @@
-# frozen_string_literal: true
-
-class Api::Fasp::Debug::V0::Callback::ResponsesController < Api::Fasp::BaseController
-  def create
-    Fasp::DebugCallback.create(
-      fasp_provider: current_provider,
-      ip: request.remote_ip,
-      request_body: request.raw_post
-    )
-
-    respond_to do |format|
-      format.json { head 201 }
-    end
-  end
-end

app/controllers/api/fasp/registrations_controller.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-class Api::Fasp::RegistrationsController < Api::Fasp::BaseController
-  skip_before_action :require_authentication
-
-  def create
-    @current_provider = Fasp::Provider.create!(
-      name: params[:name],
-      base_url: params[:baseUrl],
-      remote_identifier: params[:serverId],
-      provider_public_key_base64: params[:publicKey]
-    )
-
-    render json: registration_confirmation
-  end
-
-  private
-
-  def registration_confirmation
-    {
-      faspId: current_provider.id.to_s,
-      publicKey: current_provider.server_public_key_base64,
-      registrationCompletionUri: new_admin_fasp_provider_registration_url(current_provider),
-    }
-  end
-end

app/controllers/api/v1/accounts/endorsements_controller.rb

@@ -1,66 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Accounts::EndorsementsController < Api::BaseController
-  include Authorization
-
-  before_action -> { authorize_if_got_token! :read, :'read:accounts' }, only: :index
-  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, except: :index
-  before_action :require_user!, except: :index
-  before_action :set_account
-  before_action :set_endorsed_accounts, only: :index
-  after_action :insert_pagination_headers, only: :index
-
-  def index
-    cache_if_unauthenticated!
-    render json: @endorsed_accounts, each_serializer: REST::AccountSerializer
-  end
-
-  def create
-    AccountPin.find_or_create_by!(account: current_account, target_account: @account)
-    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships_presenter
-  end
-
-  def destroy
-    pin = AccountPin.find_by(account: current_account, target_account: @account)
-    pin&.destroy!
-    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships_presenter
-  end
-
-  private
-
-  def set_account
-    @account = Account.find(params[:account_id])
-  end
-
-  def set_endorsed_accounts
-    @endorsed_accounts = @account.unavailable? ? [] : paginated_endorsed_accounts
-  end
-
-  def paginated_endorsed_accounts
-    @account.endorsed_accounts.without_suspended.includes(:account_stat, :user).paginate_by_max_id(
-      limit_param(DEFAULT_ACCOUNTS_LIMIT),
-      params[:max_id],
-      params[:since_id]
-    )
-  end
-
-  def relationships_presenter
-    AccountRelationshipsPresenter.new([@account], current_user.account_id)
-  end
-
-  def next_path
-    api_v1_account_endorsements_url pagination_params(max_id: pagination_max_id) if records_continue?
-  end
-
-  def prev_path
-    api_v1_account_endorsements_url pagination_params(since_id: pagination_since_id) unless @endorsed_accounts.empty?
-  end
-
-  def pagination_collection
-    @endorsed_accounts
-  end
-
-  def records_continue?
-    @endorsed_accounts.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
-  end
-end

app/controllers/api/v1/accounts/featured_tags_controller.rb

@@ -17,6 +17,6 @@ class Api::V1::Accounts::FeaturedTagsController < Api::BaseController
   end
 
   def set_featured_tags
-    @featured_tags = @account.unavailable? ? [] : @account.featured_tags
+    @featured_tags = @account.suspended? ? [] : @account.featured_tags
   end
 end

app/controllers/api/v1/accounts/identity_proofs_controller.rb

@@ -1,10 +1,6 @@
 # frozen_string_literal: true
 
 class Api::V1::Accounts::IdentityProofsController < Api::BaseController
-  include DeprecationConcern
-
-  deprecate_api '2022-03-30'
-
   before_action :require_user!
   before_action :set_account
 

app/controllers/api/v1/accounts/pins_controller.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Api::V1::Accounts::PinsController < Api::BaseController
+  include Authorization
+
+  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }
+  before_action :require_user!
+  before_action :set_account
+
+  def create
+    AccountPin.find_or_create_by!(account: current_account, target_account: @account)
+    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships_presenter
+  end
+
+  def destroy
+    pin = AccountPin.find_by(account: current_account, target_account: @account)
+    pin&.destroy!
+    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships_presenter
+  end
+
+  private
+
+  def set_account
+    @account = Account.find(params[:account_id])
+  end
+
+  def relationships_presenter
+    AccountRelationshipsPresenter.new([@account], current_user.account_id)
+  end
+end

app/controllers/api/v1/accounts_controller.rb

@@ -119,7 +119,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def account_params
-    params.permit(:username, :email, :password, :agreement, :locale, :reason, :time_zone, :invite_code, :date_of_birth)
+    params.permit(:username, :email, :password, :agreement, :locale, :reason, :time_zone, :invite_code)
   end
 
   def invite

app/controllers/api/v1/filters_controller.rb

@@ -1,10 +1,6 @@
 # frozen_string_literal: true
 
 class Api::V1::FiltersController < Api::BaseController
-  include DeprecationConcern
-
-  deprecate_api '2022-11-14'
-
   before_action -> { doorkeeper_authorize! :read, :'read:filters' }, only: [:index, :show]
   before_action -> { doorkeeper_authorize! :write, :'write:filters' }, except: [:index, :show]
   before_action :require_user!

app/controllers/api/v1/instances_controller.rb

@@ -1,9 +1,15 @@
 # frozen_string_literal: true
 
-class Api::V1::InstancesController < Api::V2::InstancesController
-  include DeprecationConcern
+class Api::V1::InstancesController < Api::BaseController
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
+  skip_around_action :set_locale
 
-  deprecate_api '2022-11-14'
+  vary_by ''
+
+  # Override `current_user` to avoid reading session cookies unless in limited federation mode
+  def current_user
+    super if limited_federation_mode?
+  end
 
   def show
     cache_even_if_authenticated!

app/controllers/api/v1/lists_controller.rb

@@ -7,6 +7,10 @@ class Api::V1::ListsController < Api::BaseController
   before_action :require_user!
   before_action :set_list, except: [:index, :create]
 
+  rescue_from ArgumentError do |e|
+    render json: { error: e.to_s }, status: 422
+  end
+
   def index
     @lists = List.where(account: current_account).all
     render json: @lists, each_serializer: REST::ListSerializer

app/controllers/api/v1/suggestions_controller.rb

@@ -2,9 +2,6 @@
 
 class Api::V1::SuggestionsController < Api::BaseController
   include Authorization
-  include DeprecationConcern
-
-  deprecate_api '2021-05-16', only: [:index]
 
   before_action -> { doorkeeper_authorize! :read, :'read:accounts' }, only: :index
   before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, except: :index

app/controllers/api/v1/trends/tags_controller.rb

@@ -1,16 +1,12 @@
 # frozen_string_literal: true
 
 class Api::V1::Trends::TagsController < Api::BaseController
-  include DeprecationConcern
-
   before_action :set_tags
 
   after_action :insert_pagination_headers
 
   DEFAULT_TAGS_LIMIT = 10
 
-  deprecate_api '2022-03-30', only: :index, if: -> { request.path == '/api/v1/trends' }
-
   def index
     cache_if_unauthenticated!
     render json: @tags, each_serializer: REST::TagSerializer, relationships: TagRelationshipsPresenter.new(@tags, current_user&.account_id)

app/controllers/api/v2/instances_controller.rb

@@ -1,16 +1,6 @@
 # frozen_string_literal: true
 
-class Api::V2::InstancesController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
-  skip_around_action :set_locale
-
-  vary_by ''
-
-  # Override `current_user` to avoid reading session cookies unless in limited federation mode
-  def current_user
-    super if limited_federation_mode?
-  end
-
+class Api::V2::InstancesController < Api::V1::InstancesController
   def show
     cache_even_if_authenticated!
     render_with_cache json: InstancePresenter.new, serializer: REST::InstanceSerializer, root: 'instance'

app/controllers/auth/registrations_controller.rb

@@ -62,7 +62,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController
 
   def configure_sign_up_params
     devise_parameter_sanitizer.permit(:sign_up) do |user_params|
-      user_params.permit({ account_attributes: [:username, :display_name], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password, :date_of_birth)
+      user_params.permit({ account_attributes: [:username, :display_name], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password)
     end
   end
 

app/controllers/backups_controller.rb

@@ -9,15 +9,13 @@ class BackupsController < ApplicationController
   before_action :authenticate_user!
   before_action :set_backup
 
-  BACKUP_LINK_TIMEOUT = 1.hour.freeze
-
   def download
     case Paperclip::Attachment.default_options[:storage]
     when :s3, :azure
-      redirect_to @backup.dump.expiring_url(BACKUP_LINK_TIMEOUT.to_i), allow_other_host: true
+      redirect_to @backup.dump.expiring_url(10), allow_other_host: true
     when :fog
       if Paperclip::Attachment.default_options.dig(:fog_credentials, :openstack_temp_url_key).present?
-        redirect_to @backup.dump.expiring_url(BACKUP_LINK_TIMEOUT.from_now), allow_other_host: true
+        redirect_to @backup.dump.expiring_url(Time.now.utc + 10), allow_other_host: true
       else
         redirect_to full_asset_url(@backup.dump.url), allow_other_host: true
       end

app/controllers/concerns/deprecation_concern.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-module DeprecationConcern
-  extend ActiveSupport::Concern
-
-  class_methods do
-    def deprecate_api(date, sunset: nil, **kwargs)
-      deprecation_timestamp = "@#{date.to_datetime.to_i}"
-      sunset = sunset&.to_date&.httpdate
-
-      before_action(**kwargs) do
-        response.headers['Deprecation'] = deprecation_timestamp
-        response.headers['Sunset'] = sunset if sunset
-      end
-    end
-  end
-end

app/controllers/concerns/signature_verification.rb

@@ -10,6 +10,8 @@ module SignatureVerification
   EXPIRATION_WINDOW_LIMIT = 12.hours
   CLOCK_SKEW_MARGIN       = 1.hour
 
+  class SignatureVerificationError < StandardError; end
+
   def require_account_signature!
     render json: signature_verification_failure_reason, status: signature_verification_failure_code unless signed_request_account
   end
@@ -32,7 +34,7 @@ module SignatureVerification
 
   def signature_key_id
     signature_params['keyId']
-  rescue Mastodon::SignatureVerificationError
+  rescue SignatureVerificationError
     nil
   end
 
@@ -43,17 +45,17 @@ module SignatureVerification
   def signed_request_actor
     return @signed_request_actor if defined?(@signed_request_actor)
 
-    raise Mastodon::SignatureVerificationError, 'Request not signed' unless signed_request?
-    raise Mastodon::SignatureVerificationError, 'Incompatible request signature. keyId and signature are required' if missing_required_signature_parameters?
-    raise Mastodon::SignatureVerificationError, 'Unsupported signature algorithm (only rsa-sha256 and hs2019 are supported)' unless %w(rsa-sha256 hs2019).include?(signature_algorithm)
-    raise Mastodon::SignatureVerificationError, 'Signed request date outside acceptable time window' unless matches_time_window?
+    raise SignatureVerificationError, 'Request not signed' unless signed_request?
+    raise SignatureVerificationError, 'Incompatible request signature. keyId and signature are required' if missing_required_signature_parameters?
+    raise SignatureVerificationError, 'Unsupported signature algorithm (only rsa-sha256 and hs2019 are supported)' unless %w(rsa-sha256 hs2019).include?(signature_algorithm)
+    raise SignatureVerificationError, 'Signed request date outside acceptable time window' unless matches_time_window?
 
     verify_signature_strength!
     verify_body_digest!
 
     actor = actor_from_key_id(signature_params['keyId'])
 
-    raise Mastodon::SignatureVerificationError, "Public key not found for key #{signature_params['keyId']}" if actor.nil?
+    raise SignatureVerificationError, "Public key not found for key #{signature_params['keyId']}" if actor.nil?
 
     signature             = Base64.decode64(signature_params['signature'])
     compare_signed_string = build_signed_string(include_query_string: true)
@@ -66,7 +68,7 @@ module SignatureVerification
 
     actor = stoplight_wrapper.run { actor_refresh_key!(actor) }
 
-    raise Mastodon::SignatureVerificationError, "Could not refresh public key #{signature_params['keyId']}" if actor.nil?
+    raise SignatureVerificationError, "Could not refresh public key #{signature_params['keyId']}" if actor.nil?
 
     compare_signed_string = build_signed_string(include_query_string: true)
     return actor unless verify_signature(actor, signature, compare_signed_string).nil?
@@ -76,7 +78,7 @@ module SignatureVerification
     return actor unless verify_signature(actor, signature, compare_signed_string).nil?
 
     fail_with! "Verification failed for #{actor.to_log_human_identifier} #{actor.uri} using rsa-sha256 (RSASSA-PKCS1-v1_5 with SHA-256)", signed_string: compare_signed_string, signature: signature_params['signature']
-  rescue Mastodon::SignatureVerificationError => e
+  rescue SignatureVerificationError => e
     fail_with! e.message
   rescue *Mastodon::HTTP_CONNECTION_ERRORS => e
     fail_with! "Failed to fetch remote data: #{e.message}"
@@ -102,7 +104,7 @@ module SignatureVerification
   def signature_params
     @signature_params ||= SignatureParser.parse(request.headers['Signature'])
   rescue SignatureParser::ParsingError
-    raise Mastodon::SignatureVerificationError, 'Error parsing signature parameters'
+    raise SignatureVerificationError, 'Error parsing signature parameters'
   end
 
   def signature_algorithm
@@ -114,31 +116,31 @@ module SignatureVerification
   end
 
   def verify_signature_strength!
-    raise Mastodon::SignatureVerificationError, 'Mastodon requires the Date header or (created) pseudo-header to be signed' unless signed_headers.include?('date') || signed_headers.include?('(created)')
-    raise Mastodon::SignatureVerificationError, 'Mastodon requires the Digest header or (request-target) pseudo-header to be signed' unless signed_headers.include?(HttpSignatureDraft::REQUEST_TARGET) || signed_headers.include?('digest')
-    raise Mastodon::SignatureVerificationError, 'Mastodon requires the Host header to be signed when doing a GET request' if request.get? && !signed_headers.include?('host')
-    raise Mastodon::SignatureVerificationError, 'Mastodon requires the Digest header to be signed when doing a POST request' if request.post? && !signed_headers.include?('digest')
+    raise SignatureVerificationError, 'Mastodon requires the Date header or (created) pseudo-header to be signed' unless signed_headers.include?('date') || signed_headers.include?('(created)')
+    raise SignatureVerificationError, 'Mastodon requires the Digest header or (request-target) pseudo-header to be signed' unless signed_headers.include?(HttpSignatureDraft::REQUEST_TARGET) || signed_headers.include?('digest')
+    raise SignatureVerificationError, 'Mastodon requires the Host header to be signed when doing a GET request' if request.get? && !signed_headers.include?('host')
+    raise SignatureVerificationError, 'Mastodon requires the Digest header to be signed when doing a POST request' if request.post? && !signed_headers.include?('digest')
   end
 
   def verify_body_digest!
     return unless signed_headers.include?('digest')
-    raise Mastodon::SignatureVerificationError, 'Digest header missing' unless request.headers.key?('Digest')
+    raise SignatureVerificationError, 'Digest header missing' unless request.headers.key?('Digest')
 
     digests = request.headers['Digest'].split(',').map { |digest| digest.split('=', 2) }.map { |key, value| [key.downcase, value] }
     sha256  = digests.assoc('sha-256')
-    raise Mastodon::SignatureVerificationError, "Mastodon only supports SHA-256 in Digest header. Offered algorithms: #{digests.map(&:first).join(', ')}" if sha256.nil?
+    raise SignatureVerificationError, "Mastodon only supports SHA-256 in Digest header. Offered algorithms: #{digests.map(&:first).join(', ')}" if sha256.nil?
 
     return if body_digest == sha256[1]
 
     digest_size = begin
       Base64.strict_decode64(sha256[1].strip).length
     rescue ArgumentError
-      raise Mastodon::SignatureVerificationError, "Invalid Digest value. The provided Digest value is not a valid base64 string. Given digest: #{sha256[1]}"
+      raise SignatureVerificationError, "Invalid Digest value. The provided Digest value is not a valid base64 string. Given digest: #{sha256[1]}"
     end
 
-    raise Mastodon::SignatureVerificationError, "Invalid Digest value. The provided Digest value is not a SHA-256 digest. Given digest: #{sha256[1]}" if digest_size != 32
+    raise SignatureVerificationError, "Invalid Digest value. The provided Digest value is not a SHA-256 digest. Given digest: #{sha256[1]}" if digest_size != 32
 
-    raise Mastodon::SignatureVerificationError, "Invalid Digest value. Computed SHA-256 digest: #{body_digest}; given: #{sha256[1]}"
+    raise SignatureVerificationError, "Invalid Digest value. Computed SHA-256 digest: #{body_digest}; given: #{sha256[1]}"
   end
 
   def verify_signature(actor, signature, compare_signed_string)
@@ -163,13 +165,13 @@ module SignatureVerification
           "#{HttpSignatureDraft::REQUEST_TARGET}: #{request.method.downcase} #{request.path}"
         end
       when '(created)'
-        raise Mastodon::SignatureVerificationError, 'Invalid pseudo-header (created) for rsa-sha256' unless signature_algorithm == 'hs2019'
-        raise Mastodon::SignatureVerificationError, 'Pseudo-header (created) used but corresponding argument missing' if signature_params['created'].blank?
+        raise SignatureVerificationError, 'Invalid pseudo-header (created) for rsa-sha256' unless signature_algorithm == 'hs2019'
+        raise SignatureVerificationError, 'Pseudo-header (created) used but corresponding argument missing' if signature_params['created'].blank?
 
         "(created): #{signature_params['created']}"
       when '(expires)'
-        raise Mastodon::SignatureVerificationError, 'Invalid pseudo-header (expires) for rsa-sha256' unless signature_algorithm == 'hs2019'
-        raise Mastodon::SignatureVerificationError, 'Pseudo-header (expires) used but corresponding argument missing' if signature_params['expires'].blank?
+        raise SignatureVerificationError, 'Invalid pseudo-header (expires) for rsa-sha256' unless signature_algorithm == 'hs2019'
+        raise SignatureVerificationError, 'Pseudo-header (expires) used but corresponding argument missing' if signature_params['expires'].blank?
 
         "(expires): #{signature_params['expires']}"
       else
@@ -191,7 +193,7 @@ module SignatureVerification
 
       expires_time = Time.at(signature_params['expires'].to_i).utc if signature_params['expires'].present?
     rescue ArgumentError => e
-      raise Mastodon::SignatureVerificationError, "Invalid Date header: #{e.message}"
+      raise SignatureVerificationError, "Invalid Date header: #{e.message}"
     end
 
     expires_time ||= created_time + 5.minutes unless created_time.nil?
@@ -231,9 +233,9 @@ module SignatureVerification
       account
     end
   rescue Mastodon::PrivateNetworkAddressError => e
-    raise Mastodon::SignatureVerificationError, "Requests to private network addresses are disallowed (tried to query #{e.host})"
+    raise SignatureVerificationError, "Requests to private network addresses are disallowed (tried to query #{e.host})"
   rescue Mastodon::HostValidationError, ActivityPub::FetchRemoteActorService::Error, ActivityPub::FetchRemoteKeyService::Error, Webfinger::Error => e
-    raise Mastodon::SignatureVerificationError, e.message
+    raise SignatureVerificationError, e.message
   end
 
   def stoplight_wrapper
@@ -249,8 +251,8 @@ module SignatureVerification
 
     ActivityPub::FetchRemoteActorService.new.call(actor.uri, only_key: true, suppress_errors: false)
   rescue Mastodon::PrivateNetworkAddressError => e
-    raise Mastodon::SignatureVerificationError, "Requests to private network addresses are disallowed (tried to query #{e.host})"
+    raise SignatureVerificationError, "Requests to private network addresses are disallowed (tried to query #{e.host})"
   rescue Mastodon::HostValidationError, ActivityPub::FetchRemoteActorService::Error, Webfinger::Error => e
-    raise Mastodon::SignatureVerificationError, e.message
+    raise SignatureVerificationError, e.message
   end
 end

app/helpers/admin/trends/statuses_helper.rb

@@ -2,18 +2,11 @@
 
 module Admin::Trends::StatusesHelper
   def one_line_preview(status)
-    text = begin
-      if status.local?
-        status.text.split("\n").first
-      else
-        Nokogiri::HTML5(status.text).css('html > body > *').first&.text
-      end
-    rescue ArgumentError
-      # This can happen if one of the Nokogumbo limits is encountered
-      # Unfortunately, it does not use a more precise error class
-      # nor allows more graceful handling
-      ''
-    end
+    text = if status.local?
+             status.text.split("\n").first
+           else
+             Nokogiri::HTML5(status.text).css('html > body > *').first&.text
+           end
 
     return '' if text.blank?
 

app/inputs/date_of_birth_input.rb

@@ -1,31 +0,0 @@
-# frozen_string_literal: true
-
-class DateOfBirthInput < SimpleForm::Inputs::Base
-  OPTIONS = [
-    { autocomplete: 'bday-day', maxlength: 2, pattern: '[0-9]+', placeholder: 'DD' }.freeze,
-    { autocomplete: 'bday-month', maxlength: 2, pattern: '[0-9]+', placeholder: 'MM' }.freeze,
-    { autocomplete: 'bday-year', maxlength: 4, pattern: '[0-9]+', placeholder: 'YYYY' }.freeze,
-  ].freeze
-
-  def input(wrapper_options = nil)
-    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
-    merged_input_options[:inputmode] = 'numeric'
-
-    values = (object.public_send(attribute_name) || '').split('.')
-
-    safe_join(Array.new(3) do |index|
-      options = merged_input_options.merge(OPTIONS[index]).merge id: generate_id(index), 'aria-label': I18n.t("simple_form.labels.user.date_of_birth_#{index + 1}i"), value: values[index]
-      @builder.text_field("#{attribute_name}(#{index + 1}i)", options)
-    end)
-  end
-
-  def label_target
-    "#{attribute_name}_1i"
-  end
-
-  private
-
-  def generate_id(index)
-    "#{object_name}_#{attribute_name}_#{index + 1}i"
-  end
-end

app/javascript/entrypoints/public.tsx

@@ -68,7 +68,7 @@ function loaded() {
 
     if (id) message = localeData[id];
 
-    message ??= defaultMessage as string;
+    if (!message) message = defaultMessage as string;
 
     const messageFormat = new IntlMessageFormat(message, locale);
     return messageFormat.format(values) as string;

app/javascript/mastodon/actions/accounts_typed.ts

@@ -1,9 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 
-import { apiRemoveAccountFromFollowers } from 'mastodon/api/accounts';
 import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
 import type { ApiRelationshipJSON } from 'mastodon/api_types/relationships';
-import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
 
 export const revealAccount = createAction<{
   id: string;
@@ -97,10 +95,3 @@ export const fetchRelationshipsSuccess = createAction(
   'relationships/fetch/SUCCESS',
   actionWithSkipLoadingTrue<{ relationships: ApiRelationshipJSON[] }>,
 );
-
-export const removeAccountFromFollowers = createDataLoadingThunk(
-  'accounts/remove_from_followers',
-  ({ accountId }: { accountId: string }) =>
-    apiRemoveAccountFromFollowers(accountId),
-  (relationship) => ({ relationship }),
-);

app/javascript/mastodon/actions/alerts.ts

@@ -1,11 +1,14 @@
 import { defineMessages } from 'react-intl';
-
-import { createAction } from '@reduxjs/toolkit';
+import type { MessageDescriptor } from 'react-intl';
 
 import { AxiosError } from 'axios';
 import type { AxiosResponse } from 'axios';
 
-import type { Alert } from 'mastodon/models/alert';
+interface Alert {
+  title: string | MessageDescriptor;
+  message: string | MessageDescriptor;
+  values?: Record<string, string | number | Date>;
+}
 
 interface ApiErrorResponse {
   error?: string;
@@ -27,13 +30,24 @@ const messages = defineMessages({
   },
 });
 
-export const dismissAlert = createAction<{ key: number }>('alerts/dismiss');
+export const ALERT_SHOW = 'ALERT_SHOW';
+export const ALERT_DISMISS = 'ALERT_DISMISS';
+export const ALERT_CLEAR = 'ALERT_CLEAR';
+export const ALERT_NOOP = 'ALERT_NOOP';
 
-export const clearAlerts = createAction('alerts/clear');
+export const dismissAlert = (alert: Alert) => ({
+  type: ALERT_DISMISS,
+  alert,
+});
 
-export const showAlert = createAction<Omit<Alert, 'key'>>('alerts/show');
+export const clearAlert = () => ({
+  type: ALERT_CLEAR,
+});
 
-const ignoreAlert = createAction('alerts/ignore');
+export const showAlert = (alert: Alert) => ({
+  type: ALERT_SHOW,
+  alert,
+});
 
 export const showAlertForError = (error: unknown, skipNotFound = false) => {
   if (error instanceof AxiosError && error.response) {
@@ -42,7 +56,7 @@ export const showAlertForError = (error: unknown, skipNotFound = false) => {
 
     // Skip these errors as they are reflected in the UI
     if (skipNotFound && (status === 404 || status === 410)) {
-      return ignoreAlert();
+      return { type: ALERT_NOOP };
     }
 
     // Rate limit errors
@@ -62,9 +76,9 @@ export const showAlertForError = (error: unknown, skipNotFound = false) => {
     });
   }
 
-  // An aborted request, e.g. due to reloading the browser window, is not really an error
+  // An aborted request, e.g. due to reloading the browser window, it not really error
   if (error instanceof AxiosError && error.code === AxiosError.ECONNABORTED) {
-    return ignoreAlert();
+    return { type: ALERT_NOOP };
   }
 
   console.error(error);

app/javascript/mastodon/actions/domain_blocks.js

@@ -12,6 +12,14 @@ export const DOMAIN_BLOCK_FAIL    = 'DOMAIN_BLOCK_FAIL';
 export const DOMAIN_UNBLOCK_REQUEST = 'DOMAIN_UNBLOCK_REQUEST';
 export const DOMAIN_UNBLOCK_FAIL    = 'DOMAIN_UNBLOCK_FAIL';
 
+export const DOMAIN_BLOCKS_FETCH_REQUEST = 'DOMAIN_BLOCKS_FETCH_REQUEST';
+export const DOMAIN_BLOCKS_FETCH_SUCCESS = 'DOMAIN_BLOCKS_FETCH_SUCCESS';
+export const DOMAIN_BLOCKS_FETCH_FAIL    = 'DOMAIN_BLOCKS_FETCH_FAIL';
+
+export const DOMAIN_BLOCKS_EXPAND_REQUEST = 'DOMAIN_BLOCKS_EXPAND_REQUEST';
+export const DOMAIN_BLOCKS_EXPAND_SUCCESS = 'DOMAIN_BLOCKS_EXPAND_SUCCESS';
+export const DOMAIN_BLOCKS_EXPAND_FAIL    = 'DOMAIN_BLOCKS_EXPAND_FAIL';
+
 export function blockDomain(domain) {
   return (dispatch, getState) => {
     dispatch(blockDomainRequest(domain));
@@ -71,6 +79,80 @@ export function unblockDomainFail(domain, error) {
   };
 }
 
+export function fetchDomainBlocks() {
+  return (dispatch) => {
+    dispatch(fetchDomainBlocksRequest());
+
+    api().get('/api/v1/domain_blocks').then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(fetchDomainBlocksSuccess(response.data, next ? next.uri : null));
+    }).catch(err => {
+      dispatch(fetchDomainBlocksFail(err));
+    });
+  };
+}
+
+export function fetchDomainBlocksRequest() {
+  return {
+    type: DOMAIN_BLOCKS_FETCH_REQUEST,
+  };
+}
+
+export function fetchDomainBlocksSuccess(domains, next) {
+  return {
+    type: DOMAIN_BLOCKS_FETCH_SUCCESS,
+    domains,
+    next,
+  };
+}
+
+export function fetchDomainBlocksFail(error) {
+  return {
+    type: DOMAIN_BLOCKS_FETCH_FAIL,
+    error,
+  };
+}
+
+export function expandDomainBlocks() {
+  return (dispatch, getState) => {
+    const url = getState().getIn(['domain_lists', 'blocks', 'next']);
+
+    if (!url) {
+      return;
+    }
+
+    dispatch(expandDomainBlocksRequest());
+
+    api().get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(expandDomainBlocksSuccess(response.data, next ? next.uri : null));
+    }).catch(err => {
+      dispatch(expandDomainBlocksFail(err));
+    });
+  };
+}
+
+export function expandDomainBlocksRequest() {
+  return {
+    type: DOMAIN_BLOCKS_EXPAND_REQUEST,
+  };
+}
+
+export function expandDomainBlocksSuccess(domains, next) {
+  return {
+    type: DOMAIN_BLOCKS_EXPAND_SUCCESS,
+    domains,
+    next,
+  };
+}
+
+export function expandDomainBlocksFail(error) {
+  return {
+    type: DOMAIN_BLOCKS_EXPAND_FAIL,
+    error,
+  };
+}
+
 export const initDomainBlockModal = account => dispatch => dispatch(openModal({
   modalType: 'DOMAIN_BLOCK',
   modalProps: {

app/javascript/mastodon/actions/dropdown_menu.ts

@@ -1,11 +1,11 @@
 import { createAction } from '@reduxjs/toolkit';
 
 export const openDropdownMenu = createAction<{
-  id: number;
+  id: string;
   keyboard: boolean;
-  scrollKey?: string;
+  scrollKey: string;
 }>('dropdownMenu/open');
 
-export const closeDropdownMenu = createAction<{ id: number }>(
+export const closeDropdownMenu = createAction<{ id: string }>(
   'dropdownMenu/close',
 );

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

@@ -71,7 +71,7 @@ export function importFetchedStatuses(statuses) {
       }
 
       if (status.poll?.id) {
-        pushUnique(polls, createPollFromServerJSON(status.poll, getState().polls[status.poll.id]));
+        pushUnique(polls, createPollFromServerJSON(status.poll, getState().polls.get(status.poll.id)));
       }
 
       if (status.card) {

app/javascript/mastodon/actions/polls.ts

@@ -15,7 +15,7 @@ export const importFetchedPoll = createAppAsyncThunk(
 
     dispatch(
       importPolls({
-        polls: [createPollFromServerJSON(poll, getState().polls[poll.id])],
+        polls: [createPollFromServerJSON(poll, getState().polls.get(poll.id))],
       }),
     );
   },

app/javascript/mastodon/actions/tags.js

@@ -0,0 +1,81 @@
+import api, { getLinks } from '../api';
+
+export const FOLLOWED_HASHTAGS_FETCH_REQUEST = 'FOLLOWED_HASHTAGS_FETCH_REQUEST';
+export const FOLLOWED_HASHTAGS_FETCH_SUCCESS = 'FOLLOWED_HASHTAGS_FETCH_SUCCESS';
+export const FOLLOWED_HASHTAGS_FETCH_FAIL    = 'FOLLOWED_HASHTAGS_FETCH_FAIL';
+
+export const FOLLOWED_HASHTAGS_EXPAND_REQUEST = 'FOLLOWED_HASHTAGS_EXPAND_REQUEST';
+export const FOLLOWED_HASHTAGS_EXPAND_SUCCESS = 'FOLLOWED_HASHTAGS_EXPAND_SUCCESS';
+export const FOLLOWED_HASHTAGS_EXPAND_FAIL    = 'FOLLOWED_HASHTAGS_EXPAND_FAIL';
+
+export const fetchFollowedHashtags = () => (dispatch) => {
+  dispatch(fetchFollowedHashtagsRequest());
+
+  api().get('/api/v1/followed_tags').then(response => {
+    const next = getLinks(response).refs.find(link => link.rel === 'next');
+    dispatch(fetchFollowedHashtagsSuccess(response.data, next ? next.uri : null));
+  }).catch(err => {
+    dispatch(fetchFollowedHashtagsFail(err));
+  });
+};
+
+export function fetchFollowedHashtagsRequest() {
+  return {
+    type: FOLLOWED_HASHTAGS_FETCH_REQUEST,
+  };
+}
+
+export function fetchFollowedHashtagsSuccess(followed_tags, next) {
+  return {
+    type: FOLLOWED_HASHTAGS_FETCH_SUCCESS,
+    followed_tags,
+    next,
+  };
+}
+
+export function fetchFollowedHashtagsFail(error) {
+  return {
+    type: FOLLOWED_HASHTAGS_FETCH_FAIL,
+    error,
+  };
+}
+
+export function expandFollowedHashtags() {
+  return (dispatch, getState) => {
+    const url = getState().getIn(['followed_tags', 'next']);
+
+    if (url === null) {
+      return;
+    }
+
+    dispatch(expandFollowedHashtagsRequest());
+
+    api().get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+      dispatch(expandFollowedHashtagsSuccess(response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(expandFollowedHashtagsFail(error));
+    });
+  };
+}
+
+export function expandFollowedHashtagsRequest() {
+  return {
+    type: FOLLOWED_HASHTAGS_EXPAND_REQUEST,
+  };
+}
+
+export function expandFollowedHashtagsSuccess(followed_tags, next) {
+  return {
+    type: FOLLOWED_HASHTAGS_EXPAND_SUCCESS,
+    followed_tags,
+    next,
+  };
+}
+
+export function expandFollowedHashtagsFail(error) {
+  return {
+    type: FOLLOWED_HASHTAGS_EXPAND_FAIL,
+    error,
+  };
+}

app/javascript/mastodon/api.ts

@@ -1,9 +1,4 @@
-import type {
-  AxiosError,
-  AxiosResponse,
-  Method,
-  RawAxiosRequestHeaders,
-} from 'axios';
+import type { AxiosResponse, Method, RawAxiosRequestHeaders } from 'axios';
 import axios from 'axios';
 import LinkHeader from 'http-link-header';
 
@@ -46,7 +41,7 @@ const authorizationTokenFromInitialState = (): RawAxiosRequestHeaders => {
 
 // eslint-disable-next-line import/no-default-export
 export default function api(withAuthorization = true) {
-  const instance = axios.create({
+  return axios.create({
     transitional: {
       clarifyTimeoutError: true,
     },
@@ -65,22 +60,6 @@ export default function api(withAuthorization = true) {
       },
     ],
   });
-
-  instance.interceptors.response.use(
-    (response: AxiosResponse) => {
-      if (response.headers.deprecation) {
-        console.warn(
-          `Deprecated request: ${response.config.method} ${response.config.url}`,
-        );
-      }
-      return response;
-    },
-    (error: AxiosError) => {
-      return Promise.reject(error);
-    },
-  );
-
-  return instance;
 }
 
 type RequestParamsOrData = Record<string, unknown>;

app/javascript/mastodon/api/accounts.ts

@@ -18,8 +18,3 @@ export const apiFollowAccount = (
 
 export const apiUnfollowAccount = (id: string) =>
   apiRequestPost<ApiRelationshipJSON>(`v1/accounts/${id}/unfollow`);
-
-export const apiRemoveAccountFromFollowers = (id: string) =>
-  apiRequestPost<ApiRelationshipJSON>(
-    `v1/accounts/${id}/remove_from_followers`,
-  );

app/javascript/mastodon/api/domain_blocks.ts

@@ -1,13 +0,0 @@
-import api, { getLinks } from 'mastodon/api';
-
-export const apiGetDomainBlocks = async (url?: string) => {
-  const response = await api().request<string[]>({
-    method: 'GET',
-    url: url ?? '/api/v1/domain_blocks',
-  });
-
-  return {
-    domains: response.data,
-    links: getLinks(response),
-  };
-};

app/javascript/mastodon/api/tags.ts

@@ -1,4 +1,4 @@
-import api, { getLinks, apiRequestPost, apiRequestGet } from 'mastodon/api';
+import { apiRequestPost, apiRequestGet } from 'mastodon/api';
 import type { ApiHashtagJSON } from 'mastodon/api_types/tags';
 
 export const apiGetTag = (tagId: string) =>
@@ -9,15 +9,3 @@ export const apiFollowTag = (tagId: string) =>
 
 export const apiUnfollowTag = (tagId: string) =>
   apiRequestPost<ApiHashtagJSON>(`v1/tags/${tagId}/unfollow`);
-
-export const apiGetFollowedTags = async (url?: string) => {
-  const response = await api().request<ApiHashtagJSON[]>({
-    method: 'GET',
-    url: url ?? '/api/v1/followed_tags',
-  });
-
-  return {
-    tags: response.data,
-    links: getLinks(response),
-  };
-};

app/javascript/mastodon/api_types/polls.ts

@@ -13,7 +13,7 @@ export interface ApiPollJSON {
   expired: boolean;
   multiple: boolean;
   votes_count: number;
-  voters_count: number | null;
+  voters_count: number;
 
   options: ApiPollOptionJSON[];
   emojis: ApiCustomEmojiJSON[];

app/javascript/mastodon/components/account.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
@@ -12,19 +12,18 @@ import {
   muteAccount,
   unmuteAccount,
 } from 'mastodon/actions/accounts';
-import { openModal } from 'mastodon/actions/modal';
 import { initMuteModal } from 'mastodon/actions/mutes';
 import { Avatar } from 'mastodon/components/avatar';
 import { Button } from 'mastodon/components/button';
 import { FollowersCounter } from 'mastodon/components/counters';
 import { DisplayName } from 'mastodon/components/display_name';
-import { Dropdown } from 'mastodon/components/dropdown_menu';
 import { FollowButton } from 'mastodon/components/follow_button';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
-import type { MenuItem } from 'mastodon/models/dropdown_menu';
+import DropdownMenu from 'mastodon/containers/dropdown_menu_container';
+import { me } from 'mastodon/initial_state';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 const messages = defineMessages({
@@ -47,14 +46,6 @@ const messages = defineMessages({
   mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
   block: { id: 'account.block_short', defaultMessage: 'Block' },
   more: { id: 'status.more', defaultMessage: 'More' },
-  addToLists: {
-    id: 'account.add_or_remove_from_list',
-    defaultMessage: 'Add or Remove from lists',
-  },
-  openOriginalPage: {
-    id: 'account.open_original_page',
-    defaultMessage: 'Open original page',
-  },
 });
 
 export const Account: React.FC<{
@@ -69,7 +60,6 @@ export const Account: React.FC<{
   const account = useAppSelector((state) => state.accounts.get(id));
   const relationship = useAppSelector((state) => state.relationships.get(id));
   const dispatch = useAppDispatch();
-  const accountUrl = account?.url;
 
   const handleBlock = useCallback(() => {
     if (relationship?.blocking) {
@@ -87,62 +77,13 @@ export const Account: React.FC<{
     }
   }, [dispatch, id, account, relationship]);
 
-  const menu = useMemo(() => {
-    let arr: MenuItem[] = [];
+  const handleMuteNotifications = useCallback(() => {
+    dispatch(muteAccount(id, true));
+  }, [dispatch, id]);
 
-    if (defaultAction === 'mute') {
-      const handleMuteNotifications = () => {
-        dispatch(muteAccount(id, true));
-      };
-
-      const handleUnmuteNotifications = () => {
-        dispatch(muteAccount(id, false));
-      };
-
-      arr = [
-        {
-          text: intl.formatMessage(
-            relationship?.muting_notifications
-              ? messages.unmute_notifications
-              : messages.mute_notifications,
-          ),
-          action: relationship?.muting_notifications
-            ? handleUnmuteNotifications
-            : handleMuteNotifications,
-        },
-      ];
-    } else if (defaultAction !== 'block') {
-      const handleAddToLists = () => {
-        dispatch(
-          openModal({
-            modalType: 'LIST_ADDER',
-            modalProps: {
-              accountId: id,
-            },
-          }),
-        );
-      };
-
-      arr = [
-        {
-          text: intl.formatMessage(messages.addToLists),
-          action: handleAddToLists,
-        },
-      ];
-
-      if (accountUrl) {
-        arr.unshift(
-          {
-            text: intl.formatMessage(messages.openOriginalPage),
-            href: accountUrl,
-          },
-          null,
-        );
-      }
-    }
-
-    return arr;
-  }, [dispatch, intl, id, accountUrl, relationship, defaultAction]);
+  const handleUnmuteNotifications = useCallback(() => {
+    dispatch(muteAccount(id, false));
+  }, [dispatch, id]);
 
   if (hidden) {
     return (
@@ -153,42 +94,69 @@ export const Account: React.FC<{
     );
   }
 
-  let button: React.ReactNode, dropdown: React.ReactNode;
+  let buttons;
 
-  if (menu.length > 0) {
-    dropdown = (
-      <Dropdown
-        items={menu}
-        icon='ellipsis-h'
-        iconComponent={MoreHorizIcon}
-        title={intl.formatMessage(messages.more)}
-      />
-    );
-  }
+  if (account && account.id !== me && relationship) {
+    const { requested, blocking, muting } = relationship;
 
-  if (defaultAction === 'block') {
-    button = (
-      <Button
-        text={intl.formatMessage(
-          relationship?.blocking ? messages.unblock : messages.block,
-        )}
-        onClick={handleBlock}
-      />
-    );
-  } else if (defaultAction === 'mute') {
-    button = (
-      <Button
-        text={intl.formatMessage(
-          relationship?.muting ? messages.unmute : messages.mute,
-        )}
-        onClick={handleMute}
-      />
-    );
+    if (requested) {
+      buttons = <FollowButton accountId={id} />;
+    } else if (blocking) {
+      buttons = (
+        <Button
+          text={intl.formatMessage(messages.unblock)}
+          onClick={handleBlock}
+        />
+      );
+    } else if (muting) {
+      const menu = [
+        {
+          text: intl.formatMessage(
+            relationship.muting_notifications
+              ? messages.unmute_notifications
+              : messages.mute_notifications,
+          ),
+          action: relationship.muting_notifications
+            ? handleUnmuteNotifications
+            : handleMuteNotifications,
+        },
+      ];
+
+      buttons = (
+        <>
+          <DropdownMenu
+            items={menu}
+            icon='ellipsis-h'
+            iconComponent={MoreHorizIcon}
+            direction='right'
+            title={intl.formatMessage(messages.more)}
+          />
+
+          <Button
+            text={intl.formatMessage(messages.unmute)}
+            onClick={handleMute}
+          />
+        </>
+      );
+    } else if (defaultAction === 'mute') {
+      buttons = (
+        <Button text={intl.formatMessage(messages.mute)} onClick={handleMute} />
+      );
+    } else if (defaultAction === 'block') {
+      buttons = (
+        <Button
+          text={intl.formatMessage(messages.block)}
+          onClick={handleBlock}
+        />
+      );
+    } else {
+      buttons = <FollowButton accountId={id} />;
+    }
   } else {
-    button = <FollowButton accountId={id} />;
+    buttons = <FollowButton accountId={id} />;
   }
 
-  let muteTimeRemaining: React.ReactNode;
+  let muteTimeRemaining;
 
   if (account?.mute_expires_at) {
     muteTimeRemaining = (
@@ -198,7 +166,7 @@ export const Account: React.FC<{
     );
   }
 
-  let verification: React.ReactNode;
+  let verification;
 
   const firstVerifiedField = account?.fields.find((item) => !!item.verified_at);
 
@@ -244,12 +212,7 @@ export const Account: React.FC<{
           </div>
         </Link>
 
-        {!minimal && (
-          <div className='account__relationship'>
-            {dropdown}
-            {button}
-          </div>
-        )}
+        {!minimal && <div className='account__relationship'>{buttons}</div>}
       </div>
 
       {account &&

app/javascript/mastodon/components/alerts_controller.tsx

@@ -1,105 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { useIntl } from 'react-intl';
-import type { IntlShape } from 'react-intl';
-
-import classNames from 'classnames';
-
-import { dismissAlert } from 'mastodon/actions/alerts';
-import type {
-  Alert,
-  TranslatableString,
-  TranslatableValues,
-} from 'mastodon/models/alert';
-import { useAppSelector, useAppDispatch } from 'mastodon/store';
-
-const formatIfNeeded = (
-  intl: IntlShape,
-  message: TranslatableString,
-  values?: TranslatableValues,
-) => {
-  if (typeof message === 'object') {
-    return intl.formatMessage(message, values);
-  }
-
-  return message;
-};
-
-const Alert: React.FC<{
-  alert: Alert;
-  dismissAfter: number;
-}> = ({
-  alert: { key, title, message, values, action, onClick },
-  dismissAfter,
-}) => {
-  const dispatch = useAppDispatch();
-  const intl = useIntl();
-  const [active, setActive] = useState(false);
-
-  useEffect(() => {
-    const setActiveTimeout = setTimeout(() => {
-      setActive(true);
-    }, 1);
-
-    return () => {
-      clearTimeout(setActiveTimeout);
-    };
-  }, []);
-
-  useEffect(() => {
-    const dismissTimeout = setTimeout(() => {
-      setActive(false);
-
-      // Allow CSS transition to finish before removing from the DOM
-      setTimeout(() => {
-        dispatch(dismissAlert({ key }));
-      }, 500);
-    }, dismissAfter);
-
-    return () => {
-      clearTimeout(dismissTimeout);
-    };
-  }, [dispatch, setActive, key, dismissAfter]);
-
-  return (
-    <div
-      className={classNames('notification-bar', {
-        'notification-bar-active': active,
-      })}
-    >
-      <div className='notification-bar-wrapper'>
-        {title && (
-          <span className='notification-bar-title'>
-            {formatIfNeeded(intl, title, values)}
-          </span>
-        )}
-
-        <span className='notification-bar-message'>
-          {formatIfNeeded(intl, message, values)}
-        </span>
-
-        {action && (
-          <button className='notification-bar-action' onClick={onClick}>
-            {formatIfNeeded(intl, action, values)}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const AlertsController: React.FC = () => {
-  const alerts = useAppSelector((state) => state.alerts);
-
-  if (alerts.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className='notification-list'>
-      {alerts.map((alert, idx) => (
-        <Alert key={alert.key} alert={alert} dismissAfter={5000 + idx * 1000} />
-      ))}
-    </div>
-  );
-};

app/javascript/mastodon/components/animated_number.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { animated, useSpring, config } from '@react-spring/web';
+import { TransitionMotion, spring } from 'react-motion';
 
 import { reduceMotion } from '../initial_state';
 
@@ -11,49 +11,53 @@ interface Props {
 }
 export const AnimatedNumber: React.FC<Props> = ({ value }) => {
   const [previousValue, setPreviousValue] = useState(value);
-  const direction = value > previousValue ? -1 : 1;
+  const [direction, setDirection] = useState<1 | -1>(1);
 
-  const [styles, api] = useSpring(
-    () => ({
-      from: { transform: `translateY(${100 * direction}%)` },
-      to: { transform: 'translateY(0%)' },
-      onRest() {
-        setPreviousValue(value);
-      },
-      config: { ...config.gentle, duration: 200 },
-      immediate: true, // This ensures that the animation is not played when the component is first rendered
-    }),
-    [value, previousValue],
+  if (previousValue !== value) {
+    setPreviousValue(value);
+    setDirection(value > previousValue ? 1 : -1);
+  }
+
+  const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
+  const willLeave = useCallback(
+    () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
+    [direction],
   );
 
-  // When the value changes, start the animation
-  useEffect(() => {
-    if (value !== previousValue) {
-      void api.start({ reset: true });
-    }
-  }, [api, previousValue, value]);
-
   if (reduceMotion) {
     return <ShortNumber value={value} />;
   }
 
+  const styles = [
+    {
+      key: `${value}`,
+      data: value,
+      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+    },
+  ];
+
   return (
-    <span className='animated-number'>
-      <animated.span style={styles}>
-        <ShortNumber value={value} />
-      </animated.span>
-      {value !== previousValue && (
-        <animated.span
-          style={{
-            ...styles,
-            position: 'absolute',
-            top: `${-100 * direction}%`, // Adds extra space on top of translateY
-          }}
-          role='presentation'
-        >
-          <ShortNumber value={previousValue} />
-        </animated.span>
+    <TransitionMotion
+      styles={styles}
+      willEnter={willEnter}
+      willLeave={willLeave}
+    >
+      {(items) => (
+        <span className='animated-number'>
+          {items.map(({ key, data, style }) => (
+            <span
+              key={key}
+              style={{
+                position:
+                  direction * (style.y ?? 0) > 0 ? 'absolute' : 'static',
+                transform: `translateY(${(style.y ?? 0) * 100}%)`,
+              }}
+            >
+              <ShortNumber value={data as number} />
+            </span>
+          ))}
+        </span>
       )}
-    </span>
+    </TransitionMotion>
   );
 };

app/javascript/mastodon/components/copy_icon_button.jsx

@@ -1,36 +1,29 @@
+import PropTypes from 'prop-types';
 import { useState, useCallback } from 'react';
 
 import { defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { useDispatch } from 'react-redux';
+
 import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import { showAlert } from 'mastodon/actions/alerts';
 import { IconButton } from 'mastodon/components/icon_button';
-import { useAppDispatch } from 'mastodon/store';
 
 const messages = defineMessages({
-  copied: {
-    id: 'copy_icon_button.copied',
-    defaultMessage: 'Copied to clipboard',
-  },
+  copied: { id: 'copy_icon_button.copied', defaultMessage: 'Copied to clipboard' },
 });
 
-export const CopyIconButton: React.FC<{
-  title: string;
-  value: string;
-  className: string;
-}> = ({ title, value, className }) => {
+export const CopyIconButton = ({ title, value, className }) => {
   const [copied, setCopied] = useState(false);
-  const dispatch = useAppDispatch();
+  const dispatch = useDispatch();
 
   const handleClick = useCallback(() => {
-    void navigator.clipboard.writeText(value);
+    navigator.clipboard.writeText(value);
     setCopied(true);
     dispatch(showAlert({ message: messages.copied }));
-    setTimeout(() => {
-      setCopied(false);
-    }, 700);
+    setTimeout(() => setCopied(false), 700);
   }, [setCopied, value, dispatch]);
 
   return (
@@ -38,8 +31,13 @@ export const CopyIconButton: React.FC<{
       className={classNames(className, copied ? 'copied' : 'copyable')}
       title={title}
       onClick={handleClick}
-      icon=''
       iconComponent={ContentCopyIcon}
     />
   );
 };
+
+CopyIconButton.propTypes = {
+  title: PropTypes.string,
+  value: PropTypes.string,
+  className: PropTypes.string,
+};

app/javascript/mastodon/components/counters.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React from 'react';
 
 import { FormattedMessage } from 'react-intl';
 

app/javascript/mastodon/components/domain.tsx

@@ -1,15 +1,24 @@
 import { useCallback } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
+import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
 import { unblockDomain } from 'mastodon/actions/domain_blocks';
 import { useAppDispatch } from 'mastodon/store';
 
-import { Button } from './button';
+import { IconButton } from './icon_button';
+
+const messages = defineMessages({
+  unblockDomain: {
+    id: 'account.unblock_domain',
+    defaultMessage: 'Unblock domain {domain}',
+  },
+});
 
 export const Domain: React.FC<{
   domain: string;
 }> = ({ domain }) => {
+  const intl = useIntl();
   const dispatch = useAppDispatch();
 
   const handleDomainUnblock = useCallback(() => {
@@ -18,17 +27,20 @@ export const Domain: React.FC<{
 
   return (
     <div className='domain'>
-      <div className='domain__domain-name'>
-        <strong>{domain}</strong>
-      </div>
+      <div className='domain__wrapper'>
+        <span className='domain__domain-name'>
+          <strong>{domain}</strong>
+        </span>
 
-      <div className='domain__buttons'>
-        <Button onClick={handleDomainUnblock}>
-          <FormattedMessage
-            id='account.unblock_domain_short'
-            defaultMessage='Unblock'
+        <div className='domain__buttons'>
+          <IconButton
+            active
+            icon='unlock'
+            iconComponent={LockOpenIcon}
+            title={intl.formatMessage(messages.unblockDomain, { domain })}
+            onClick={handleDomainUnblock}
           />
-        </Button>
+        </div>
       </div>
     </div>
   );

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -0,0 +1,343 @@
+import PropTypes from 'prop-types';
+import { PureComponent, cloneElement, Children } from 'react';
+
+import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+import Overlay from 'react-overlays/Overlay';
+
+import { CircularProgress } from 'mastodon/components/circular_progress';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
+
+import { IconButton } from './icon_button';
+
+const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
+let id = 0;
+
+class DropdownMenu extends PureComponent {
+
+  static propTypes = {
+    items: PropTypes.array.isRequired,
+    loading: PropTypes.bool,
+    scrollable: PropTypes.bool,
+    onClose: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    openedViaKeyboard: PropTypes.bool,
+    renderItem: PropTypes.func,
+    renderHeader: PropTypes.func,
+    onItemClick: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    style: {},
+  };
+
+  handleDocumentClick = e => {
+    if (this.node && !this.node.contains(e.target)) {
+      this.props.onClose();
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  componentDidMount () {
+    document.addEventListener('click', this.handleDocumentClick, { capture: true });
+    document.addEventListener('keydown', this.handleKeyDown, { capture: true });
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+
+    if (this.focusedItem && this.props.openedViaKeyboard) {
+      this.focusedItem.focus({ preventScroll: true });
+    }
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.handleDocumentClick, { capture: true });
+    document.removeEventListener('keydown', this.handleKeyDown, { capture: true });
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+  }
+
+  setRef = c => {
+    this.node = c;
+  };
+
+  setFocusRef = c => {
+    this.focusedItem = c;
+  };
+
+  handleKeyDown = e => {
+    const items = Array.from(this.node.querySelectorAll('a, button'));
+    const index = items.indexOf(document.activeElement);
+    let element = null;
+
+    switch(e.key) {
+    case 'ArrowDown':
+      element = items[index+1] || items[0];
+      break;
+    case 'ArrowUp':
+      element = items[index-1] || items[items.length-1];
+      break;
+    case 'Tab':
+      if (e.shiftKey) {
+        element = items[index-1] || items[items.length-1];
+      } else {
+        element = items[index+1] || items[0];
+      }
+      break;
+    case 'Home':
+      element = items[0];
+      break;
+    case 'End':
+      element = items[items.length-1];
+      break;
+    case 'Escape':
+      this.props.onClose();
+      break;
+    }
+
+    if (element) {
+      element.focus();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  handleItemKeyPress = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      this.handleClick(e);
+    }
+  };
+
+  handleClick = e => {
+    const { onItemClick } = this.props;
+    onItemClick(e);
+  };
+
+  renderItem = (option, i) => {
+    if (option === null) {
+      return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
+    }
+
+    const { text, href = '#', target = '_blank', method, dangerous } = option;
+
+    return (
+      <li className={classNames('dropdown-menu__item', { 'dropdown-menu__item--dangerous': dangerous })} key={`${text}-${i}`}>
+        <a href={href} target={target} data-method={method} rel='noopener' role='button' tabIndex={0} ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
+          {text}
+        </a>
+      </li>
+    );
+  };
+
+  render () {
+    const { items, scrollable, renderHeader, loading } = this.props;
+
+    let renderItem = this.props.renderItem || this.renderItem;
+
+    return (
+      <div className={classNames('dropdown-menu__container', { 'dropdown-menu__container--loading': loading })} ref={this.setRef}>
+        {loading && (
+          <CircularProgress size={30} strokeWidth={3.5} />
+        )}
+
+        {!loading && renderHeader && (
+          <div className='dropdown-menu__container__header'>
+            {renderHeader(items)}
+          </div>
+        )}
+
+        {!loading && (
+          <ul className={classNames('dropdown-menu__container__list', { 'dropdown-menu__container__list--scrollable': scrollable })}>
+            {items.map((option, i) => renderItem(option, i, { onClick: this.handleClick, onKeyPress: this.handleItemKeyPress }))}
+          </ul>
+        )}
+      </div>
+    );
+  }
+
+}
+
+class Dropdown extends PureComponent {
+
+  static propTypes = {
+    children: PropTypes.node,
+    icon: PropTypes.string,
+    iconComponent: PropTypes.func,
+    items: PropTypes.array.isRequired,
+    loading: PropTypes.bool,
+    size: PropTypes.number,
+    title: PropTypes.string,
+    disabled: PropTypes.bool,
+    scrollable: PropTypes.bool,
+    status: ImmutablePropTypes.map,
+    isUserTouching: PropTypes.func,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    openDropdownId: PropTypes.number,
+    openedViaKeyboard: PropTypes.bool,
+    renderItem: PropTypes.func,
+    renderHeader: PropTypes.func,
+    onItemClick: PropTypes.func,
+    ...WithRouterPropTypes
+  };
+
+  static defaultProps = {
+    title: 'Menu',
+  };
+
+  state = {
+    id: id++,
+  };
+
+  handleClick = ({ type }) => {
+    if (this.state.id === this.props.openDropdownId) {
+      this.handleClose();
+    } else {
+      this.props.onOpen(this.state.id, this.handleItemClick, type !== 'click');
+    }
+  };
+
+  handleClose = () => {
+    if (this.activeElement) {
+      this.activeElement.focus({ preventScroll: true });
+      this.activeElement = null;
+    }
+    this.props.onClose(this.state.id);
+  };
+
+  handleMouseDown = () => {
+    if (!this.state.open) {
+      this.activeElement = document.activeElement;
+    }
+  };
+
+  handleButtonKeyDown = (e) => {
+    switch(e.key) {
+    case ' ':
+    case 'Enter':
+      this.handleMouseDown();
+      break;
+    }
+  };
+
+  handleKeyPress = (e) => {
+    switch(e.key) {
+    case ' ':
+    case 'Enter':
+      this.handleClick(e);
+      e.stopPropagation();
+      e.preventDefault();
+      break;
+    }
+  };
+
+  handleItemClick = e => {
+    const { onItemClick } = this.props;
+    const i = Number(e.currentTarget.getAttribute('data-index'));
+    const item = this.props.items[i];
+
+    this.handleClose();
+
+    if (typeof onItemClick === 'function') {
+      e.preventDefault();
+      onItemClick(item, i);
+    } else if (item && typeof item.action === 'function') {
+      e.preventDefault();
+      item.action();
+    } else if (item && item.to) {
+      e.preventDefault();
+      this.props.history.push(item.to);
+    }
+  };
+
+  setTargetRef = c => {
+    this.target = c;
+  };
+
+  findTarget = () => {
+    return this.target?.buttonRef?.current ?? this.target;
+  };
+
+  componentWillUnmount = () => {
+    if (this.state.id === this.props.openDropdownId) {
+      this.handleClose();
+    }
+  };
+
+  close = () => {
+    this.handleClose();
+  };
+
+  render () {
+    const {
+      icon,
+      iconComponent,
+      items,
+      size,
+      title,
+      disabled,
+      loading,
+      scrollable,
+      openDropdownId,
+      openedViaKeyboard,
+      children,
+      renderItem,
+      renderHeader,
+    } = this.props;
+
+    const open = this.state.id === openDropdownId;
+
+    const button = children ? cloneElement(Children.only(children), {
+      onClick: this.handleClick,
+      onMouseDown: this.handleMouseDown,
+      onKeyDown: this.handleButtonKeyDown,
+      onKeyPress: this.handleKeyPress,
+      ref: this.setTargetRef,
+    }) : (
+      <IconButton
+        icon={!open ? icon : 'close'}
+        iconComponent={iconComponent}
+        title={title}
+        active={open}
+        disabled={disabled}
+        size={size}
+        onClick={this.handleClick}
+        onMouseDown={this.handleMouseDown}
+        onKeyDown={this.handleButtonKeyDown}
+        onKeyPress={this.handleKeyPress}
+        ref={this.setTargetRef}
+      />
+    );
+
+    return (
+      <>
+        {button}
+
+        <Overlay show={open} offset={[5, 5]} placement={'bottom'} flip target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
+          {({ props, arrowProps, placement }) => (
+            <div {...props}>
+              <div className={`dropdown-animation dropdown-menu ${placement}`}>
+                <div className={`dropdown-menu__arrow ${placement}`} {...arrowProps} />
+                <DropdownMenu
+                  items={items}
+                  loading={loading}
+                  scrollable={scrollable}
+                  onClose={this.handleClose}
+                  openedViaKeyboard={openedViaKeyboard}
+                  renderItem={renderItem}
+                  renderHeader={renderHeader}
+                  onItemClick={this.handleItemClick}
+                />
+              </div>
+            </div>
+          )}
+        </Overlay>
+      </>
+    );
+  }
+
+}
+
+export default withRouter(Dropdown);

app/javascript/mastodon/components/dropdown_menu.tsx

@@ -1,549 +0,0 @@
-import {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  cloneElement,
-  Children,
-} from 'react';
-
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-
-import type { Map as ImmutableMap } from 'immutable';
-
-import Overlay from 'react-overlays/Overlay';
-import type {
-  OffsetValue,
-  UsePopperOptions,
-} from 'react-overlays/esm/usePopper';
-
-import { fetchRelationships } from 'mastodon/actions/accounts';
-import {
-  openDropdownMenu,
-  closeDropdownMenu,
-} from 'mastodon/actions/dropdown_menu';
-import { openModal, closeModal } from 'mastodon/actions/modal';
-import { CircularProgress } from 'mastodon/components/circular_progress';
-import { isUserTouching } from 'mastodon/is_mobile';
-import type {
-  MenuItem,
-  ActionMenuItem,
-  ExternalLinkMenuItem,
-} from 'mastodon/models/dropdown_menu';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-import type { IconProp } from './icon';
-import { IconButton } from './icon_button';
-
-let id = 0;
-
-const isMenuItem = (item: unknown): item is MenuItem => {
-  if (item === null) {
-    return true;
-  }
-
-  return typeof item === 'object' && 'text' in item;
-};
-
-const isActionItem = (item: unknown): item is ActionMenuItem => {
-  if (!item || !isMenuItem(item)) {
-    return false;
-  }
-
-  return 'action' in item;
-};
-
-const isExternalLinkItem = (item: unknown): item is ExternalLinkMenuItem => {
-  if (!item || !isMenuItem(item)) {
-    return false;
-  }
-
-  return 'href' in item;
-};
-
-type RenderItemFn<Item = MenuItem> = (
-  item: Item,
-  index: number,
-  handlers: {
-    onClick: (e: React.MouseEvent) => void;
-    onKeyUp: (e: React.KeyboardEvent) => void;
-  },
-) => React.ReactNode;
-
-type ItemClickFn<Item = MenuItem> = (item: Item, index: number) => void;
-
-type RenderHeaderFn<Item = MenuItem> = (items: Item[]) => React.ReactNode;
-
-interface DropdownMenuProps<Item = MenuItem> {
-  items?: Item[];
-  loading?: boolean;
-  scrollable?: boolean;
-  onClose: () => void;
-  openedViaKeyboard: boolean;
-  renderItem?: RenderItemFn<Item>;
-  renderHeader?: RenderHeaderFn<Item>;
-  onItemClick?: ItemClickFn<Item>;
-}
-
-export const DropdownMenu = <Item = MenuItem,>({
-  items,
-  loading,
-  scrollable,
-  onClose,
-  openedViaKeyboard,
-  renderItem,
-  renderHeader,
-  onItemClick,
-}: DropdownMenuProps<Item>) => {
-  const nodeRef = useRef<HTMLDivElement>(null);
-  const focusedItemRef = useRef<HTMLElement | null>(null);
-
-  useEffect(() => {
-    const handleDocumentClick = (e: MouseEvent) => {
-      if (
-        e.target instanceof Node &&
-        nodeRef.current &&
-        !nodeRef.current.contains(e.target)
-      ) {
-        onClose();
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    };
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!nodeRef.current) {
-        return;
-      }
-
-      const items = Array.from(nodeRef.current.querySelectorAll('a, button'));
-      const index = document.activeElement
-        ? items.indexOf(document.activeElement)
-        : -1;
-
-      let element: Element | undefined;
-
-      switch (e.key) {
-        case 'ArrowDown':
-          element = items[index + 1] ?? items[0];
-          break;
-        case 'ArrowUp':
-          element = items[index - 1] ?? items[items.length - 1];
-          break;
-        case 'Tab':
-          if (e.shiftKey) {
-            element = items[index - 1] ?? items[items.length - 1];
-          } else {
-            element = items[index + 1] ?? items[0];
-          }
-          break;
-        case 'Home':
-          element = items[0];
-          break;
-        case 'End':
-          element = items[items.length - 1];
-          break;
-        case 'Escape':
-          onClose();
-          break;
-      }
-
-      if (element && element instanceof HTMLElement) {
-        element.focus();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-
-    document.addEventListener('click', handleDocumentClick, { capture: true });
-    document.addEventListener('keydown', handleKeyDown, { capture: true });
-
-    if (focusedItemRef.current && openedViaKeyboard) {
-      focusedItemRef.current.focus({ preventScroll: true });
-    }
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick, {
-        capture: true,
-      });
-      document.removeEventListener('keydown', handleKeyDown, { capture: true });
-    };
-  }, [onClose, openedViaKeyboard]);
-
-  const handleFocusedItemRef = useCallback(
-    (c: HTMLAnchorElement | HTMLButtonElement | null) => {
-      focusedItemRef.current = c as HTMLElement;
-    },
-    [],
-  );
-
-  const handleItemClick = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
-      const i = Number(e.currentTarget.getAttribute('data-index'));
-      const item = items?.[i];
-
-      onClose();
-
-      if (!item) {
-        return;
-      }
-
-      if (typeof onItemClick === 'function') {
-        e.preventDefault();
-        onItemClick(item, i);
-      } else if (isActionItem(item)) {
-        e.preventDefault();
-        item.action();
-      }
-    },
-    [onClose, onItemClick, items],
-  );
-
-  const handleItemKeyUp = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        handleItemClick(e);
-      }
-    },
-    [handleItemClick],
-  );
-
-  const nativeRenderItem = (option: Item, i: number) => {
-    if (!isMenuItem(option)) {
-      return null;
-    }
-
-    if (option === null) {
-      return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
-    }
-
-    const { text, dangerous } = option;
-
-    let element: React.ReactElement;
-
-    if (isActionItem(option)) {
-      element = (
-        <button
-          ref={i === 0 ? handleFocusedItemRef : undefined}
-          onClick={handleItemClick}
-          onKeyUp={handleItemKeyUp}
-          data-index={i}
-        >
-          {text}
-        </button>
-      );
-    } else if (isExternalLinkItem(option)) {
-      element = (
-        <a
-          href={option.href}
-          target={option.target ?? '_target'}
-          data-method={option.method}
-          rel='noopener'
-          ref={i === 0 ? handleFocusedItemRef : undefined}
-          onClick={handleItemClick}
-          onKeyUp={handleItemKeyUp}
-          data-index={i}
-        >
-          {text}
-        </a>
-      );
-    } else {
-      element = (
-        <Link
-          to={option.to}
-          ref={i === 0 ? handleFocusedItemRef : undefined}
-          onClick={handleItemClick}
-          onKeyUp={handleItemKeyUp}
-          data-index={i}
-        >
-          {text}
-        </Link>
-      );
-    }
-
-    return (
-      <li
-        className={classNames('dropdown-menu__item', {
-          'dropdown-menu__item--dangerous': dangerous,
-        })}
-        key={`${text}-${i}`}
-      >
-        {element}
-      </li>
-    );
-  };
-
-  const renderItemMethod = renderItem ?? nativeRenderItem;
-
-  return (
-    <div
-      className={classNames('dropdown-menu__container', {
-        'dropdown-menu__container--loading': loading,
-      })}
-      ref={nodeRef}
-    >
-      {(loading || !items) && <CircularProgress size={30} strokeWidth={3.5} />}
-
-      {!loading && renderHeader && items && (
-        <div className='dropdown-menu__container__header'>
-          {renderHeader(items)}
-        </div>
-      )}
-
-      {!loading && items && (
-        <ul
-          className={classNames('dropdown-menu__container__list', {
-            'dropdown-menu__container__list--scrollable': scrollable,
-          })}
-        >
-          {items.map((option, i) =>
-            renderItemMethod(option, i, {
-              onClick: handleItemClick,
-              onKeyUp: handleItemKeyUp,
-            }),
-          )}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-interface DropdownProps<Item = MenuItem> {
-  children?: React.ReactElement;
-  icon?: string;
-  iconComponent?: IconProp;
-  items?: Item[];
-  loading?: boolean;
-  title?: string;
-  disabled?: boolean;
-  scrollable?: boolean;
-  scrollKey?: string;
-  status?: ImmutableMap<string, unknown>;
-  renderItem?: RenderItemFn<Item>;
-  renderHeader?: RenderHeaderFn<Item>;
-  onOpen?: () => void;
-  onItemClick?: ItemClickFn<Item>;
-}
-
-const offset = [5, 5] as OffsetValue;
-const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
-
-export const Dropdown = <Item = MenuItem,>({
-  children,
-  icon,
-  iconComponent,
-  items,
-  loading,
-  title = 'Menu',
-  disabled,
-  scrollable,
-  status,
-  renderItem,
-  renderHeader,
-  onOpen,
-  onItemClick,
-  scrollKey,
-}: DropdownProps<Item>) => {
-  const dispatch = useAppDispatch();
-  const openDropdownId = useAppSelector((state) => state.dropdownMenu.openId);
-  const openedViaKeyboard = useAppSelector(
-    (state) => state.dropdownMenu.keyboard,
-  );
-  const [currentId] = useState(id++);
-  const open = currentId === openDropdownId;
-  const activeElement = useRef<HTMLElement | null>(null);
-  const targetRef = useRef<HTMLButtonElement | null>(null);
-
-  const handleClose = useCallback(() => {
-    if (activeElement.current) {
-      activeElement.current.focus({ preventScroll: true });
-      activeElement.current = null;
-    }
-
-    dispatch(
-      closeModal({
-        modalType: 'ACTIONS',
-        ignoreFocus: false,
-      }),
-    );
-
-    dispatch(closeDropdownMenu({ id: currentId }));
-  }, [dispatch, currentId]);
-
-  const handleItemClick = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
-      const i = Number(e.currentTarget.getAttribute('data-index'));
-      const item = items?.[i];
-
-      handleClose();
-
-      if (!item) {
-        return;
-      }
-
-      if (typeof onItemClick === 'function') {
-        e.preventDefault();
-        onItemClick(item, i);
-      } else if (isActionItem(item)) {
-        e.preventDefault();
-        item.action();
-      }
-    },
-    [handleClose, onItemClick, items],
-  );
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
-      const { type } = e;
-
-      if (open) {
-        handleClose();
-      } else {
-        onOpen?.();
-
-        if (status) {
-          dispatch(fetchRelationships([status.getIn(['account', 'id'])]));
-        }
-
-        if (isUserTouching()) {
-          dispatch(
-            openModal({
-              modalType: 'ACTIONS',
-              modalProps: {
-                status,
-                actions: items,
-                onClick: handleItemClick,
-              },
-            }),
-          );
-        } else {
-          dispatch(
-            openDropdownMenu({
-              id: currentId,
-              keyboard: type !== 'click',
-              scrollKey,
-            }),
-          );
-        }
-      }
-    },
-    [
-      dispatch,
-      currentId,
-      scrollKey,
-      onOpen,
-      handleItemClick,
-      open,
-      status,
-      items,
-      handleClose,
-    ],
-  );
-
-  const handleMouseDown = useCallback(() => {
-    if (!open && document.activeElement instanceof HTMLElement) {
-      activeElement.current = document.activeElement;
-    }
-  }, [open]);
-
-  const handleButtonKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      switch (e.key) {
-        case ' ':
-        case 'Enter':
-          handleMouseDown();
-          break;
-      }
-    },
-    [handleMouseDown],
-  );
-
-  const handleKeyPress = useCallback(
-    (e: React.KeyboardEvent) => {
-      switch (e.key) {
-        case ' ':
-        case 'Enter':
-          handleClick(e);
-          e.stopPropagation();
-          e.preventDefault();
-          break;
-      }
-    },
-    [handleClick],
-  );
-
-  useEffect(() => {
-    return () => {
-      if (currentId === openDropdownId) {
-        handleClose();
-      }
-    };
-  }, [currentId, openDropdownId, handleClose]);
-
-  let button: React.ReactElement;
-
-  if (children) {
-    button = cloneElement(Children.only(children), {
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleButtonKeyDown,
-      onKeyPress: handleKeyPress,
-      ref: targetRef,
-    });
-  } else if (icon && iconComponent) {
-    button = (
-      <IconButton
-        icon={!open ? icon : 'close'}
-        iconComponent={iconComponent}
-        title={title}
-        active={open}
-        disabled={disabled}
-        onClick={handleClick}
-        onMouseDown={handleMouseDown}
-        onKeyDown={handleButtonKeyDown}
-        onKeyPress={handleKeyPress}
-        ref={targetRef}
-      />
-    );
-  } else {
-    return null;
-  }
-
-  return (
-    <>
-      {button}
-
-      <Overlay
-        show={open}
-        offset={offset}
-        placement='bottom'
-        flip
-        target={targetRef}
-        popperConfig={popperConfig}
-      >
-        {({ props, arrowProps, placement }) => (
-          <div {...props}>
-            <div className={`dropdown-animation dropdown-menu ${placement}`}>
-              <div
-                className={`dropdown-menu__arrow ${placement}`}
-                {...arrowProps}
-              />
-
-              <DropdownMenu
-                items={items}
-                loading={loading}
-                scrollable={scrollable}
-                onClose={handleClose}
-                openedViaKeyboard={openedViaKeyboard}
-                renderItem={renderItem}
-                renderHeader={renderHeader}
-                onItemClick={onItemClick}
-              />
-            </div>
-          </div>
-        )}
-      </Overlay>
-    </>
-  );
-};

app/javascript/mastodon/components/edited_timestamp/containers/dropdown_menu_container.js

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+
+import { openDropdownMenu, closeDropdownMenu } from 'mastodon/actions/dropdown_menu';
+import { fetchHistory } from 'mastodon/actions/history';
+import DropdownMenu from 'mastodon/components/dropdown_menu';
+
+/**
+ *
+ * @param {import('mastodon/store').RootState} state
+ * @param {*} props
+ */
+const mapStateToProps = (state, { statusId }) => ({
+  openDropdownId: state.dropdownMenu.openId,
+  openedViaKeyboard: state.dropdownMenu.keyboard,
+  items: state.getIn(['history', statusId, 'items']),
+  loading: state.getIn(['history', statusId, 'loading']),
+});
+
+const mapDispatchToProps = (dispatch, { statusId }) => ({
+
+  onOpen (id, onItemClick, keyboard) {
+    dispatch(fetchHistory(statusId));
+    dispatch(openDropdownMenu({ id, keyboard }));
+  },
+
+  onClose (id) {
+    dispatch(closeDropdownMenu({ id }));
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);

app/javascript/mastodon/components/edited_timestamp/index.jsx

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import { connect } from 'react-redux';
+
+import { openModal } from 'mastodon/actions/modal';
+import InlineAccount from 'mastodon/components/inline_account';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+
+import DropdownMenu from './containers/dropdown_menu_container';
+
+const mapDispatchToProps = (dispatch, { statusId }) => ({
+
+  onItemClick (index) {
+    dispatch(openModal({
+      modalType: 'COMPARE_HISTORY',
+      modalProps: { index, statusId },
+    }));
+  },
+
+});
+
+class EditedTimestamp extends PureComponent {
+
+  static propTypes = {
+    statusId: PropTypes.string.isRequired,
+    timestamp: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    onItemClick: PropTypes.func.isRequired,
+  };
+
+  handleItemClick = (item, i) => {
+    const { onItemClick } = this.props;
+    onItemClick(i);
+  };
+
+  renderHeader = items => {
+    return (
+      <FormattedMessage id='status.edited_x_times' defaultMessage='Edited {count, plural, one {# time} other {# times}}' values={{ count: items.size - 1 }} />
+    );
+  };
+
+  renderItem = (item, index, { onClick, onKeyPress }) => {
+    const formattedDate = <RelativeTimestamp timestamp={item.get('created_at')} short={false} />;
+    const formattedName = <InlineAccount accountId={item.get('account')} />;
+
+    const label = item.get('original') ? (
+      <FormattedMessage id='status.history.created' defaultMessage='{name} created {date}' values={{ name: formattedName, date: formattedDate }} />
+    ) : (
+      <FormattedMessage id='status.history.edited' defaultMessage='{name} edited {date}' values={{ name: formattedName, date: formattedDate }} />
+    );
+
+    return (
+      <li className='dropdown-menu__item edited-timestamp__history__item' key={item.get('created_at')}>
+        <button data-index={index} onClick={onClick} onKeyPress={onKeyPress}>{label}</button>
+      </li>
+    );
+  };
+
+  render () {
+    const { timestamp, intl, statusId } = this.props;
+
+    return (
+      <DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
+        <button className='dropdown-menu__text-button'>
+          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: <span className='animated-number'>{intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span> }} />
+        </button>
+      </DropdownMenu>
+    );
+  }
+
+}
+
+export default connect(null, mapDispatchToProps)(injectIntl(EditedTimestamp));

app/javascript/mastodon/components/edited_timestamp/index.tsx

@@ -1,140 +0,0 @@
-import { useCallback } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-
-import { fetchHistory } from 'mastodon/actions/history';
-import { openModal } from 'mastodon/actions/modal';
-import { Dropdown } from 'mastodon/components/dropdown_menu';
-import { FormattedDateWrapper } from 'mastodon/components/formatted_date';
-import InlineAccount from 'mastodon/components/inline_account';
-import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-type HistoryItem = ImmutableMap<string, unknown>;
-
-export const EditedTimestamp: React.FC<{
-  statusId: string;
-  timestamp: string;
-}> = ({ statusId, timestamp }) => {
-  const dispatch = useAppDispatch();
-  const items = useAppSelector(
-    (state) =>
-      (
-        state.history.getIn([statusId, 'items']) as
-          | ImmutableList<unknown>
-          | undefined
-      )?.toArray() as HistoryItem[],
-  );
-  const loading = useAppSelector(
-    (state) => state.history.getIn([statusId, 'loading']) as boolean,
-  );
-
-  const handleOpen = useCallback(() => {
-    dispatch(fetchHistory(statusId));
-  }, [dispatch, statusId]);
-
-  const handleItemClick = useCallback(
-    (_item: HistoryItem, index: number) => {
-      dispatch(
-        openModal({
-          modalType: 'COMPARE_HISTORY',
-          modalProps: { index, statusId },
-        }),
-      );
-    },
-    [dispatch, statusId],
-  );
-
-  const renderHeader = useCallback((items: HistoryItem[]) => {
-    return (
-      <FormattedMessage
-        id='status.edited_x_times'
-        defaultMessage='Edited {count, plural, one {# time} other {# times}}'
-        values={{ count: items.length - 1 }}
-      />
-    );
-  }, []);
-
-  const renderItem = useCallback(
-    (
-      item: HistoryItem,
-      index: number,
-      {
-        onClick,
-        onKeyUp,
-      }: {
-        onClick: React.MouseEventHandler;
-        onKeyUp: React.KeyboardEventHandler;
-      },
-    ) => {
-      const formattedDate = (
-        <RelativeTimestamp
-          timestamp={item.get('created_at') as string}
-          short={false}
-        />
-      );
-      const formattedName = (
-        <InlineAccount accountId={item.get('account') as string} />
-      );
-
-      const label = (item.get('original') as boolean) ? (
-        <FormattedMessage
-          id='status.history.created'
-          defaultMessage='{name} created {date}'
-          values={{ name: formattedName, date: formattedDate }}
-        />
-      ) : (
-        <FormattedMessage
-          id='status.history.edited'
-          defaultMessage='{name} edited {date}'
-          values={{ name: formattedName, date: formattedDate }}
-        />
-      );
-
-      return (
-        <li
-          className='dropdown-menu__item edited-timestamp__history__item'
-          key={item.get('created_at') as string}
-        >
-          <button data-index={index} onClick={onClick} onKeyUp={onKeyUp}>
-            {label}
-          </button>
-        </li>
-      );
-    },
-    [],
-  );
-
-  return (
-    <Dropdown<HistoryItem>
-      items={items}
-      loading={loading}
-      renderItem={renderItem}
-      scrollable
-      renderHeader={renderHeader}
-      onOpen={handleOpen}
-      onItemClick={handleItemClick}
-    >
-      <button className='dropdown-menu__text-button'>
-        <FormattedMessage
-          id='status.edited'
-          defaultMessage='Edited {date}'
-          values={{
-            date: (
-              <FormattedDateWrapper
-                className='animated-number'
-                value={timestamp}
-                month='short'
-                day='2-digit'
-                hour='2-digit'
-                minute='2-digit'
-              />
-            ),
-          }}
-        />
-      </button>
-    </Dropdown>
-  );
-};

app/javascript/mastodon/components/follow_button.tsx

@@ -16,7 +16,8 @@ const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
-  editProfile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 });
 
 export const FollowButton: React.FC<{
@@ -72,9 +73,11 @@ export const FollowButton: React.FC<{
   if (!signedIn) {
     label = intl.formatMessage(messages.follow);
   } else if (accountId === me) {
-    label = intl.formatMessage(messages.editProfile);
+    label = intl.formatMessage(messages.edit_profile);
   } else if (!relationship) {
     label = <LoadingIndicator />;
+  } else if (relationship.following && relationship.followed_by) {
+    label = intl.formatMessage(messages.mutual);
   } else if (relationship.following || relationship.requested) {
     label = intl.formatMessage(messages.unfollow);
   } else if (relationship.followed_by) {

app/javascript/mastodon/components/formatted_date.tsx

@@ -1,26 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { FormattedDate } from 'react-intl';
-
-export const FormattedDateWrapper = (
-  props: ComponentProps<typeof FormattedDate> & { className?: string },
-) => (
-  <FormattedDate {...props}>
-    {(date) => (
-      <time dateTime={tryIsoString(props.value)} className={props.className}>
-        {date}
-      </time>
-    )}
-  </FormattedDate>
-);
-
-const tryIsoString = (date?: string | number | Date): string => {
-  if (!date) {
-    return '';
-  }
-  try {
-    return new Date(date).toISOString();
-  } catch {
-    return date.toString();
-  }
-};

app/javascript/mastodon/components/hashtag.tsx

@@ -102,11 +102,10 @@ export interface HashtagProps {
   description?: React.ReactNode;
   history?: number[];
   name: string;
-  people?: number;
+  people: number;
   to: string;
   uses?: number;
   withGraph?: boolean;
-  children?: React.ReactNode;
 }
 
 export const Hashtag: React.FC<HashtagProps> = ({
@@ -118,7 +117,6 @@ export const Hashtag: React.FC<HashtagProps> = ({
   className,
   description,
   withGraph = true,
-  children,
 }) => (
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
@@ -160,7 +158,5 @@ export const Hashtag: React.FC<HashtagProps> = ({
         </SilentErrorBoundary>
       </div>
     )}
-
-    {children && <div className='trends__item__buttons'>{children}</div>}
   </div>
 );

app/javascript/mastodon/components/hashtag_bar.tsx

@@ -20,7 +20,6 @@ export type StatusLike = Record<{
   contentHTML: string;
   media_attachments: List<unknown>;
   spoiler_text?: string;
-  account: Record<{ id: string }>;
 }>;
 
 function normalizeHashtag(hashtag: string) {
@@ -196,19 +195,13 @@ export function getHashtagBarForStatus(status: StatusLike) {
 
   return {
     statusContentProps,
-    hashtagBar: (
-      <HashtagBar
-        hashtags={hashtagsInBar}
-        accountId={status.getIn(['account', 'id']) as string}
-      />
-    ),
+    hashtagBar: <HashtagBar hashtags={hashtagsInBar} />,
   };
 }
 
 const HashtagBar: React.FC<{
   hashtags: string[];
-  accountId: string;
-}> = ({ hashtags, accountId }) => {
+}> = ({ hashtags }) => {
   const [expanded, setExpanded] = useState(false);
   const handleClick = useCallback(() => {
     setExpanded(true);
@@ -225,11 +218,7 @@ const HashtagBar: React.FC<{
   return (
     <div className='hashtag-bar'>
       {revealedHashtags.map((hashtag) => (
-        <Link
-          key={hashtag}
-          to={`/tags/${hashtag}`}
-          data-menu-hashtag={accountId}
-        >
+        <Link key={hashtag} to={`/tags/${hashtag}`}>
           #<span>{hashtag}</span>
         </Link>
       ))}

app/javascript/mastodon/components/icon_button.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, forwardRef } from 'react';
+import { PureComponent, createRef } from 'react';
 
 import classNames from 'classnames';
 
@@ -15,108 +15,99 @@ interface Props {
   onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
   onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
-  active?: boolean;
+  active: boolean;
   expanded?: boolean;
   style?: React.CSSProperties;
   activeStyle?: React.CSSProperties;
-  disabled?: boolean;
+  disabled: boolean;
   inverted?: boolean;
-  animate?: boolean;
-  overlay?: boolean;
-  tabIndex?: number;
+  animate: boolean;
+  overlay: boolean;
+  tabIndex: number;
   counter?: number;
   href?: string;
-  ariaHidden?: boolean;
+  ariaHidden: boolean;
 }
+interface States {
+  activate: boolean;
+  deactivate: boolean;
+}
+export class IconButton extends PureComponent<Props, States> {
+  buttonRef = createRef<HTMLButtonElement>();
 
-export const IconButton = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
+  static defaultProps = {
+    active: false,
+    disabled: false,
+    animate: false,
+    overlay: false,
+    tabIndex: 0,
+    ariaHidden: false,
+  };
+
+  state = {
+    activate: false,
+    deactivate: false,
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (!nextProps.animate) return;
+
+    if (this.props.active && !nextProps.active) {
+      this.setState({ activate: false, deactivate: true });
+    } else if (!this.props.active && nextProps.active) {
+      this.setState({ activate: true, deactivate: false });
+    }
+  }
+
+  handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+
+    if (!this.props.disabled && this.props.onClick != null) {
+      this.props.onClick(e);
+    }
+  };
+
+  handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (this.props.onKeyPress && !this.props.disabled) {
+      this.props.onKeyPress(e);
+    }
+  };
+
+  handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (!this.props.disabled && this.props.onMouseDown) {
+      this.props.onMouseDown(e);
+    }
+  };
+
+  handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!this.props.disabled && this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  };
+
+  render() {
+    const style = {
+      ...this.props.style,
+      ...(this.props.active ? this.props.activeStyle : {}),
+    };
+
+    const {
+      active,
       className,
+      disabled,
       expanded,
       icon,
       iconComponent,
       inverted,
+      overlay,
+      tabIndex,
       title,
       counter,
       href,
-      style,
-      activeStyle,
-      onClick,
-      onKeyDown,
-      onKeyPress,
-      onMouseDown,
-      active = false,
-      disabled = false,
-      animate = false,
-      overlay = false,
-      tabIndex = 0,
-      ariaHidden = false,
-    },
-    buttonRef,
-  ) => {
-    const [activate, setActivate] = useState(false);
-    const [deactivate, setDeactivate] = useState(false);
+      ariaHidden,
+    } = this.props;
 
-    useEffect(() => {
-      if (!animate) {
-        return;
-      }
-
-      if (activate && !active) {
-        setActivate(false);
-        setDeactivate(true);
-      } else if (!activate && active) {
-        setActivate(true);
-        setDeactivate(false);
-      }
-    }, [setActivate, setDeactivate, animate, active, activate]);
-
-    const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(
-      (e) => {
-        e.preventDefault();
-
-        if (!disabled) {
-          onClick?.(e);
-        }
-      },
-      [disabled, onClick],
-    );
-
-    const handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> =
-      useCallback(
-        (e) => {
-          if (!disabled) {
-            onKeyPress?.(e);
-          }
-        },
-        [disabled, onKeyPress],
-      );
-
-    const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> =
-      useCallback(
-        (e) => {
-          if (!disabled) {
-            onMouseDown?.(e);
-          }
-        },
-        [disabled, onMouseDown],
-      );
-
-    const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> =
-      useCallback(
-        (e) => {
-          if (!disabled) {
-            onKeyDown?.(e);
-          }
-        },
-        [disabled, onKeyDown],
-      );
-
-    const buttonStyle = {
-      ...style,
-      ...(active ? activeStyle : {}),
-    };
+    const { activate, deactivate } = this.state;
 
     const classes = classNames(className, 'icon-button', {
       active,
@@ -155,19 +146,18 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
         aria-hidden={ariaHidden}
         title={title}
         className={classes}
-        onClick={handleClick}
-        onMouseDown={handleMouseDown}
-        onKeyDown={handleKeyDown}
-        onKeyPress={handleKeyPress} // eslint-disable-line @typescript-eslint/no-deprecated
-        style={buttonStyle}
+        onClick={this.handleClick}
+        onMouseDown={this.handleMouseDown}
+        onKeyDown={this.handleKeyDown}
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        onKeyPress={this.handleKeyPress}
+        style={style}
         tabIndex={tabIndex}
         disabled={disabled}
-        ref={buttonRef}
+        ref={this.buttonRef}
       >
         {contents}
       </button>
     );
-  },
-);
-
-IconButton.displayName = 'IconButton';
+  }
+}

app/javascript/mastodon/components/media_gallery.jsx

@@ -12,7 +12,6 @@ import { debounce } from 'lodash';
 
 import { AltTextBadge } from 'mastodon/components/alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
-import { SpoilerButton } from 'mastodon/components/spoiler_button';
 import { formatTime } from 'mastodon/features/video';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
@@ -39,7 +38,6 @@ class Item extends PureComponent {
 
   state = {
     loaded: false,
-    error: false,
   };
 
   handleMouseEnter = (e) => {
@@ -83,10 +81,6 @@ class Item extends PureComponent {
     this.setState({ loaded: true });
   };
 
-  handleImageError = () => {
-    this.setState({ error: true });
-  };
-
   render () {
     const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
 
@@ -154,7 +148,6 @@ class Item extends PureComponent {
             lang={lang}
             style={{ objectPosition: `${x}% ${y}%` }}
             onLoad={this.handleImageLoad}
-            onError={this.handleImageError}
           />
         </a>
       );
@@ -190,7 +183,7 @@ class Item extends PureComponent {
     }
 
     return (
-      <div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--error': this.state.error, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
+      <div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
         <Blurhash
           hash={attachment.get('blurhash')}
           dummy={!useBlurhash}
@@ -226,7 +219,6 @@ class MediaGallery extends PureComponent {
     visible: PropTypes.bool,
     autoplay: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
-    matchedFilters: PropTypes.arrayOf(PropTypes.string),
   };
 
   state = {
@@ -297,11 +289,11 @@ class MediaGallery extends PureComponent {
   }
 
   render () {
-    const { media, lang, sensitive, defaultWidth, autoplay, matchedFilters } = this.props;
+    const { media, lang, sensitive, defaultWidth, autoplay } = this.props;
     const { visible } = this.state;
     const width = this.state.width || defaultWidth;
 
-    let children;
+    let children, spoilerButton;
 
     const style = {};
 
@@ -320,11 +312,35 @@ class MediaGallery extends PureComponent {
       children = media.map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} displayWidth={width} visible={visible || uncached} />);
     }
 
+    if (uncached) {
+      spoilerButton = (
+        <button type='button' disabled className='spoiler-button__overlay'>
+          <span className='spoiler-button__overlay__label'>
+            <FormattedMessage id='status.uncached_media_warning' defaultMessage='Preview not available' />
+            <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.open' defaultMessage='Click to open' /></span>
+          </span>
+        </button>
+      );
+    } else if (!visible) {
+      spoilerButton = (
+        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
+          <span className='spoiler-button__overlay__label'>
+            {sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}
+            <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+          </span>
+        </button>
+      );
+    }
+
     return (
       <div className={`media-gallery media-gallery--layout-${size}`} style={style} ref={this.handleRef}>
         {children}
 
-        {(!visible || uncached) && <SpoilerButton uncached={uncached} sensitive={sensitive} onClick={this.handleOpen} matchedFilters={matchedFilters} />}
+        {(!visible || uncached) && (
+          <div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
+            {spoilerButton}
+          </div>
+        )}
 
         {(visible && !uncached) && (
           <div className='media-gallery__actions'>

app/javascript/mastodon/components/navigation_portal.tsx

@@ -1,6 +1,25 @@
+import { Switch, Route } from 'react-router-dom';
+
+import AccountNavigation from 'mastodon/features/account/navigation';
 import Trends from 'mastodon/features/getting_started/containers/trends_container';
 import { showTrends } from 'mastodon/initial_state';
 
+const DefaultNavigation: React.FC = () => (showTrends ? <Trends /> : null);
+
 export const NavigationPortal: React.FC = () => (
-  <div className='navigation-panel__portal'>{showTrends && <Trends />}</div>
+  <div className='navigation-panel__portal'>
+    <Switch>
+      <Route path='/@:acct' exact component={AccountNavigation} />
+      <Route
+        path='/@:acct/tagged/:tagged?'
+        exact
+        component={AccountNavigation}
+      />
+      <Route path='/@:acct/with_replies' exact component={AccountNavigation} />
+      <Route path='/@:acct/followers' exact component={AccountNavigation} />
+      <Route path='/@:acct/following' exact component={AccountNavigation} />
+      <Route path='/@:acct/media' exact component={AccountNavigation} />
+      <Route component={DefaultNavigation} />
+    </Switch>
+  </div>
 );

app/javascript/mastodon/components/poll.jsx

@@ -0,0 +1,248 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+import escapeTextContentForBrowser from 'escape-html';
+import spring from 'react-motion/lib/spring';
+
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import { Icon }  from 'mastodon/components/icon';
+import emojify from 'mastodon/features/emoji/emoji';
+import Motion from 'mastodon/features/ui/util/optional_motion';
+import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
+
+import { RelativeTimestamp } from './relative_timestamp';
+
+const messages = defineMessages({
+  closed: {
+    id: 'poll.closed',
+    defaultMessage: 'Closed',
+  },
+  voted: {
+    id: 'poll.voted',
+    defaultMessage: 'You voted for this answer',
+  },
+  votes: {
+    id: 'poll.votes',
+    defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
+  },
+});
+
+class Poll extends ImmutablePureComponent {
+  static propTypes = {
+    identity: identityContextPropShape,
+    poll: ImmutablePropTypes.record.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
+    lang: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
+    refresh: PropTypes.func,
+    onVote: PropTypes.func,
+    onInteractionModal: PropTypes.func,
+  };
+
+  state = {
+    selected: {},
+    expired: null,
+  };
+
+  static getDerivedStateFromProps (props, state) {
+    const { poll } = props;
+    const expires_at = poll.get('expires_at');
+    const expired = poll.get('expired') || expires_at !== null && (new Date(expires_at)).getTime() < Date.now();
+    return (expired === state.expired) ? null : { expired };
+  }
+
+  componentDidMount () {
+    this._setupTimer();
+  }
+
+  componentDidUpdate () {
+    this._setupTimer();
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this._timer);
+  }
+
+  _setupTimer () {
+    const { poll } = this.props;
+    clearTimeout(this._timer);
+    if (!this.state.expired) {
+      const delay = (new Date(poll.get('expires_at'))).getTime() - Date.now();
+      this._timer = setTimeout(() => {
+        this.setState({ expired: true });
+      }, delay);
+    }
+  }
+
+  _toggleOption = value => {
+    if (this.props.poll.get('multiple')) {
+      const tmp = { ...this.state.selected };
+      if (tmp[value]) {
+        delete tmp[value];
+      } else {
+        tmp[value] = true;
+      }
+      this.setState({ selected: tmp });
+    } else {
+      const tmp = {};
+      tmp[value] = true;
+      this.setState({ selected: tmp });
+    }
+  };
+
+  handleOptionChange = ({ target: { value } }) => {
+    this._toggleOption(value);
+  };
+
+  handleOptionKeyPress = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      this._toggleOption(e.target.getAttribute('data-index'));
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  handleVote = () => {
+    if (this.props.disabled) {
+      return;
+    }
+
+    if (this.props.identity.signedIn) {
+      this.props.onVote(Object.keys(this.state.selected));
+    } else {
+      this.props.onInteractionModal('vote', this.props.status);
+    }
+  };
+
+  handleRefresh = () => {
+    if (this.props.disabled) {
+      return;
+    }
+
+    this.props.refresh();
+  };
+
+  handleReveal = () => {
+    this.setState({ revealed: true });
+  };
+
+  renderOption (option, optionIndex, showResults) {
+    const { poll, lang, disabled, intl } = this.props;
+    const pollVotesCount  = poll.get('voters_count') || poll.get('votes_count');
+    const percent         = pollVotesCount === 0 ? 0 : (option.get('votes_count') / pollVotesCount) * 100;
+    const leading         = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') >= other.get('votes_count'));
+    const active          = !!this.state.selected[`${optionIndex}`];
+    const voted           = option.get('voted') || (poll.get('own_votes') && poll.get('own_votes').includes(optionIndex));
+
+    const title = option.getIn(['translation', 'title']) || option.get('title');
+    let titleHtml = option.getIn(['translation', 'titleHtml']) || option.get('titleHtml');
+
+    if (!titleHtml) {
+      const emojiMap = emojiMap(poll);
+      titleHtml = emojify(escapeTextContentForBrowser(title), emojiMap);
+    }
+
+    return (
+      <li key={option.get('title')}>
+        <label className={classNames('poll__option', { selectable: !showResults })}>
+          <input
+            name='vote-options'
+            type={poll.get('multiple') ? 'checkbox' : 'radio'}
+            value={optionIndex}
+            checked={active}
+            onChange={this.handleOptionChange}
+            disabled={disabled}
+          />
+
+          {!showResults && (
+            <span
+              className={classNames('poll__input', { checkbox: poll.get('multiple'), active })}
+              tabIndex={0}
+              role={poll.get('multiple') ? 'checkbox' : 'radio'}
+              onKeyPress={this.handleOptionKeyPress}
+              aria-checked={active}
+              aria-label={title}
+              lang={lang}
+              data-index={optionIndex}
+            />
+          )}
+          {showResults && (
+            <span
+              className='poll__number'
+              title={intl.formatMessage(messages.votes, {
+                votes: option.get('votes_count'),
+              })}
+            >
+              {Math.round(percent)}%
+            </span>
+          )}
+
+          <span
+            className='poll__option__text translate'
+            lang={lang}
+            dangerouslySetInnerHTML={{ __html: titleHtml }}
+          />
+
+          {!!voted && <span className='poll__voted'>
+            <Icon id='check' icon={CheckIcon} className='poll__voted__mark' title={intl.formatMessage(messages.voted)} />
+          </span>}
+        </label>
+
+        {showResults && (
+          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}>
+            {({ width }) =>
+              <span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} />
+            }
+          </Motion>
+        )}
+      </li>
+    );
+  }
+
+  render () {
+    const { poll, intl } = this.props;
+    const { revealed, expired } = this.state;
+
+    if (!poll) {
+      return null;
+    }
+
+    const timeRemaining = expired ? intl.formatMessage(messages.closed) : <RelativeTimestamp timestamp={poll.get('expires_at')} futureDate />;
+    const showResults   = poll.get('voted') || revealed || expired;
+    const disabled      = this.props.disabled || Object.entries(this.state.selected).every(item => !item);
+
+    let votesCount = null;
+
+    if (poll.get('voters_count') !== null && poll.get('voters_count') !== undefined) {
+      votesCount = <FormattedMessage id='poll.total_people' defaultMessage='{count, plural, one {# person} other {# people}}' values={{ count: poll.get('voters_count') }} />;
+    } else {
+      votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.get('votes_count') }} />;
+    }
+
+    return (
+      <div className='poll'>
+        <ul>
+          {poll.get('options').map((option, i) => this.renderOption(option, i, showResults))}
+        </ul>
+
+        <div className='poll__footer'>
+          {!showResults && <button className='button button-secondary' disabled={disabled} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
+          {!showResults && <><button className='poll__link' onClick={this.handleReveal}><FormattedMessage id='poll.reveal' defaultMessage='See results' /></button> · </>}
+          {showResults && !this.props.disabled && <><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </>}
+          {votesCount}
+          {poll.get('expires_at') && <> · {timeRemaining}</>}
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default injectIntl(withIdentity(Poll));

app/javascript/mastodon/components/poll.tsx

@@ -1,337 +0,0 @@
-import type { KeyboardEventHandler } from 'react';
-import { useCallback, useMemo, useState } from 'react';
-
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-
-import classNames from 'classnames';
-
-import { animated, useSpring } from '@react-spring/web';
-import escapeTextContentForBrowser from 'escape-html';
-
-import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import { openModal } from 'mastodon/actions/modal';
-import { fetchPoll, vote } from 'mastodon/actions/polls';
-import { Icon } from 'mastodon/components/icon';
-import emojify from 'mastodon/features/emoji/emoji';
-import { useIdentity } from 'mastodon/identity_context';
-import { reduceMotion } from 'mastodon/initial_state';
-import { makeEmojiMap } from 'mastodon/models/custom_emoji';
-import type * as Model from 'mastodon/models/poll';
-import type { Status } from 'mastodon/models/status';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-import { RelativeTimestamp } from './relative_timestamp';
-
-const messages = defineMessages({
-  closed: {
-    id: 'poll.closed',
-    defaultMessage: 'Closed',
-  },
-  voted: {
-    id: 'poll.voted',
-    defaultMessage: 'You voted for this answer',
-  },
-  votes: {
-    id: 'poll.votes',
-    defaultMessage: '{votes, plural, one {# vote} other {# votes}}',
-  },
-});
-
-interface PollProps {
-  pollId: string;
-  status: Status;
-  lang?: string;
-  disabled?: boolean;
-}
-
-export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
-  // Third party hooks
-  const poll = useAppSelector((state) => state.polls[pollId]);
-  const identity = useIdentity();
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  // State
-  const [revealed, setRevealed] = useState(false);
-  const [selected, setSelected] = useState<Record<string, boolean>>({});
-
-  // Derived values
-  const expired = useMemo(() => {
-    if (!poll) {
-      return false;
-    }
-    const expiresAt = poll.expires_at;
-    return poll.expired || new Date(expiresAt).getTime() < Date.now();
-  }, [poll]);
-  const timeRemaining = useMemo(() => {
-    if (!poll) {
-      return null;
-    }
-    if (expired) {
-      return intl.formatMessage(messages.closed);
-    }
-    return <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
-  }, [expired, intl, poll]);
-  const votesCount = useMemo(() => {
-    if (!poll) {
-      return null;
-    }
-    if (poll.voters_count) {
-      return (
-        <FormattedMessage
-          id='poll.total_people'
-          defaultMessage='{count, plural, one {# person} other {# people}}'
-          values={{ count: poll.voters_count }}
-        />
-      );
-    }
-    return (
-      <FormattedMessage
-        id='poll.total_votes'
-        defaultMessage='{count, plural, one {# vote} other {# votes}}'
-        values={{ count: poll.votes_count }}
-      />
-    );
-  }, [poll]);
-
-  const voteDisabled =
-    disabled || Object.values(selected).every((item) => !item);
-
-  // Event handlers
-  const handleVote = useCallback(() => {
-    if (voteDisabled) {
-      return;
-    }
-
-    if (identity.signedIn) {
-      void dispatch(vote({ pollId, choices: Object.keys(selected) }));
-    } else {
-      dispatch(
-        openModal({
-          modalType: 'INTERACTION',
-          modalProps: {
-            type: 'vote',
-            accountId: status.getIn(['account', 'id']),
-            url: status.get('uri'),
-          },
-        }),
-      );
-    }
-  }, [voteDisabled, dispatch, identity, pollId, selected, status]);
-
-  const handleReveal = useCallback(() => {
-    setRevealed(true);
-  }, []);
-
-  const handleRefresh = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    void dispatch(fetchPoll({ pollId }));
-  }, [disabled, dispatch, pollId]);
-
-  const handleOptionChange = useCallback(
-    (choiceIndex: number) => {
-      if (!poll) {
-        return;
-      }
-      if (poll.multiple) {
-        setSelected((prev) => ({
-          ...prev,
-          [choiceIndex]: !prev[choiceIndex],
-        }));
-      } else {
-        setSelected({ [choiceIndex]: true });
-      }
-    },
-    [poll],
-  );
-
-  if (!poll) {
-    return null;
-  }
-  const showResults = poll.voted || revealed || expired;
-
-  return (
-    <div className='poll'>
-      <ul>
-        {poll.options.map((option, i) => (
-          <PollOption
-            key={option.title || i}
-            index={i}
-            poll={poll}
-            option={option}
-            showResults={showResults}
-            active={!!selected[i]}
-            onChange={handleOptionChange}
-          />
-        ))}
-      </ul>
-
-      <div className='poll__footer'>
-        {!showResults && (
-          <button
-            className='button button-secondary'
-            disabled={voteDisabled}
-            onClick={handleVote}
-          >
-            <FormattedMessage id='poll.vote' defaultMessage='Vote' />
-          </button>
-        )}
-        {!showResults && (
-          <>
-            <button className='poll__link' onClick={handleReveal}>
-              <FormattedMessage id='poll.reveal' defaultMessage='See results' />
-            </button>{' '}
-            ·{' '}
-          </>
-        )}
-        {showResults && !disabled && (
-          <>
-            <button className='poll__link' onClick={handleRefresh}>
-              <FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
-            </button>{' '}
-            ·{' '}
-          </>
-        )}
-        {votesCount}
-        {poll.expires_at && <> · {timeRemaining}</>}
-      </div>
-    </div>
-  );
-};
-
-type PollOptionProps = Pick<PollProps, 'disabled' | 'lang'> & {
-  active: boolean;
-  onChange: (index: number) => void;
-  poll: Model.Poll;
-  option: Model.PollOption;
-  index: number;
-  showResults?: boolean;
-};
-
-const PollOption: React.FC<PollOptionProps> = (props) => {
-  const { active, lang, disabled, poll, option, index, showResults, onChange } =
-    props;
-  const voted = option.voted || poll.own_votes?.includes(index);
-  const title = option.translation?.title ?? option.title;
-
-  const intl = useIntl();
-
-  // Derived values
-  const percent = useMemo(() => {
-    const pollVotesCount = poll.voters_count ?? poll.votes_count;
-    return pollVotesCount === 0
-      ? 0
-      : (option.votes_count / pollVotesCount) * 100;
-  }, [option, poll]);
-  const isLeading = useMemo(
-    () =>
-      poll.options
-        .filter((other) => other.title !== option.title)
-        .every((other) => option.votes_count >= other.votes_count),
-    [poll, option],
-  );
-  const titleHtml = useMemo(() => {
-    let titleHtml = option.translation?.titleHtml ?? option.titleHtml;
-
-    if (!titleHtml) {
-      const emojiMap = makeEmojiMap(poll.emojis);
-      titleHtml = emojify(escapeTextContentForBrowser(title), emojiMap);
-    }
-
-    return titleHtml;
-  }, [option, poll, title]);
-
-  // Handlers
-  const handleOptionChange = useCallback(() => {
-    onChange(index);
-  }, [index, onChange]);
-  const handleOptionKeyPress: KeyboardEventHandler = useCallback(
-    (event) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        onChange(index);
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    },
-    [index, onChange],
-  );
-
-  const widthSpring = useSpring({
-    from: {
-      width: '0%',
-    },
-    to: {
-      width: `${percent}%`,
-    },
-    immediate: reduceMotion,
-  });
-
-  return (
-    <li>
-      <label
-        className={classNames('poll__option', { selectable: !showResults })}
-      >
-        <input
-          name='vote-options'
-          type={poll.multiple ? 'checkbox' : 'radio'}
-          value={index}
-          checked={active}
-          onChange={handleOptionChange}
-          disabled={disabled}
-        />
-
-        {!showResults && (
-          <span
-            className={classNames('poll__input', {
-              checkbox: poll.multiple,
-              active,
-            })}
-            tabIndex={0}
-            role={poll.multiple ? 'checkbox' : 'radio'}
-            onKeyDown={handleOptionKeyPress}
-            aria-checked={active}
-            aria-label={title}
-            lang={lang}
-            data-index={index}
-          />
-        )}
-        {showResults && (
-          <span
-            className='poll__number'
-            title={intl.formatMessage(messages.votes, {
-              votes: option.votes_count,
-            })}
-          >
-            {Math.round(percent)}%
-          </span>
-        )}
-
-        <span
-          className='poll__option__text translate'
-          lang={lang}
-          dangerouslySetInnerHTML={{ __html: titleHtml }}
-        />
-
-        {!!voted && (
-          <span className='poll__voted'>
-            <Icon
-              id='check'
-              icon={CheckIcon}
-              className='poll__voted__mark'
-              title={intl.formatMessage(messages.voted)}
-            />
-          </span>
-        )}
-      </label>
-
-      {showResults && (
-        <animated.span
-          className={classNames('poll__chart', { leading: isLeading })}
-          style={widthSpring}
-        />
-      )}
-    </li>
-  );
-};

app/javascript/mastodon/components/remote_hint.tsx

@@ -1,43 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import { useAppSelector } from 'mastodon/store';
-
-import { TimelineHint } from './timeline_hint';
-
-interface RemoteHintProps {
-  accountId?: string;
-}
-
-export const RemoteHint: React.FC<RemoteHintProps> = ({ accountId }) => {
-  const account = useAppSelector((state) =>
-    accountId ? state.accounts.get(accountId) : undefined,
-  );
-  const domain = account?.acct ? account.acct.split('@')[1] : undefined;
-  if (
-    !account ||
-    !account.url ||
-    account.acct !== account.username ||
-    !domain
-  ) {
-    return null;
-  }
-
-  return (
-    <TimelineHint
-      url={account.url}
-      message={
-        <FormattedMessage
-          id='hints.profiles.posts_may_be_missing'
-          defaultMessage='Some posts from this profile may be missing.'
-        />
-      }
-      label={
-        <FormattedMessage
-          id='hints.profiles.see_more_posts'
-          defaultMessage='See more posts on {domain}'
-          values={{ domain: <strong>{domain}</strong> }}
-        />
-      }
-    />
-  );
-};

app/javascript/mastodon/components/router.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import type React from 'react';
+import React from 'react';
 
 import { Router as OriginalRouter, useHistory } from 'react-router';
 

app/javascript/mastodon/components/spoiler_button.tsx

@@ -1,89 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-interface Props {
-  hidden?: boolean;
-  sensitive: boolean;
-  uncached?: boolean;
-  matchedFilters?: string[];
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-export const SpoilerButton: React.FC<Props> = ({
-  hidden = false,
-  sensitive,
-  uncached = false,
-  matchedFilters,
-  onClick,
-}) => {
-  let warning;
-  let action;
-
-  if (uncached) {
-    warning = (
-      <FormattedMessage
-        id='status.uncached_media_warning'
-        defaultMessage='Preview not available'
-      />
-    );
-    action = (
-      <FormattedMessage id='status.media.open' defaultMessage='Click to open' />
-    );
-  } else if (matchedFilters) {
-    warning = (
-      <FormattedMessage
-        id='filter_warning.matches_filter'
-        defaultMessage='Matches filter “<span>{title}</span>”'
-        values={{
-          title: matchedFilters.join(', '),
-          span: (chunks) => <span className='filter-name'>{chunks}</span>,
-        }}
-      />
-    );
-    action = (
-      <FormattedMessage id='status.media.show' defaultMessage='Click to show' />
-    );
-  } else if (sensitive) {
-    warning = (
-      <FormattedMessage
-        id='status.sensitive_warning'
-        defaultMessage='Sensitive content'
-      />
-    );
-    action = (
-      <FormattedMessage id='status.media.show' defaultMessage='Click to show' />
-    );
-  } else {
-    warning = (
-      <FormattedMessage
-        id='status.media_hidden'
-        defaultMessage='Media hidden'
-      />
-    );
-    action = (
-      <FormattedMessage id='status.media.show' defaultMessage='Click to show' />
-    );
-  }
-
-  return (
-    <div
-      className={classNames('spoiler-button', {
-        'spoiler-button--hidden': hidden,
-        'spoiler-button--click-thru': uncached,
-      })}
-    >
-      <button
-        type='button'
-        className='spoiler-button__overlay'
-        onClick={onClick}
-        disabled={uncached}
-      >
-        <span className='spoiler-button__overlay__label'>
-          {warning}
-          <span className='spoiler-button__overlay__action'>{action}</span>
-        </span>
-      </button>
-    </div>
-  );
-};

app/javascript/mastodon/components/status.jsx

@@ -70,7 +70,7 @@ export const defaultMediaVisibility = (status) => {
     status = status.get('reblog');
   }
 
-  return !status.get('matched_media_filters') && (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
+  return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
 };
 
 const messages = defineMessages({
@@ -470,7 +470,6 @@ class Status extends ImmutablePureComponent {
                 defaultWidth={this.props.cachedMediaWidth}
                 visible={this.state.showMedia}
                 onToggleVisibility={this.handleToggleMediaVisibility}
-                matchedFilters={status.get('matched_media_filters')}
               />
             )}
           </Bundle>
@@ -499,7 +498,6 @@ class Status extends ImmutablePureComponent {
                 blurhash={attachment.get('blurhash')}
                 visible={this.state.showMedia}
                 onToggleVisibility={this.handleToggleMediaVisibility}
-                matchedFilters={status.get('matched_media_filters')}
               />
             )}
           </Bundle>
@@ -524,7 +522,6 @@ class Status extends ImmutablePureComponent {
                 deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
                 visible={this.state.showMedia}
                 onToggleVisibility={this.handleToggleMediaVisibility}
-                matchedFilters={status.get('matched_media_filters')}
               />
             )}
           </Bundle>

app/javascript/mastodon/components/status_action_bar.jsx

@@ -25,7 +25,7 @@ import { identityContextPropShape, withIdentity } from 'mastodon/identity_contex
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
-import { Dropdown } from 'mastodon/components/dropdown_menu';
+import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { me } from '../initial_state';
 
 import { IconButton } from './icon_button';
@@ -274,9 +274,10 @@ class StatusActionBar extends ImmutablePureComponent {
 
       if (writtenByMe && pinnableStatus) {
         menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
-        menu.push(null);
       }
 
+      menu.push(null);
+
       if (writtenByMe || withDismiss) {
         menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
         menu.push(null);
@@ -389,7 +390,7 @@ class StatusActionBar extends ImmutablePureComponent {
           <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={bookmarkTitle} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
         </div>
         <div className='status__action-bar__button-wrapper'>
-          <Dropdown
+          <DropdownMenuContainer
             scrollKey={scrollKey}
             status={status}
             items={menu}

app/javascript/mastodon/components/status_content.jsx

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import { Icon }  from 'mastodon/components/icon';
-import { Poll } from 'mastodon/components/poll';
+import PollContainer from 'mastodon/containers/poll_container';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
 
@@ -115,7 +115,6 @@ class StatusContent extends PureComponent {
       } else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
         link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
         link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
-        link.setAttribute('data-menu-hashtag', this.props.status.getIn(['account', 'id']));
       } else {
         link.setAttribute('title', link.href);
         link.classList.add('unhandled-link');
@@ -246,7 +245,7 @@ class StatusContent extends PureComponent {
     );
 
     const poll = !!status.get('poll') && (
-      <Poll pollId={status.get('poll')} status={status} lang={language} />
+      <PollContainer pollId={status.get('poll')} status={status} lang={language} />
     );
 
     if (this.props.onClick) {

app/javascript/mastodon/containers/dropdown_menu_container.js

@@ -0,0 +1,50 @@
+import { connect } from 'react-redux';
+
+import { fetchRelationships } from 'mastodon/actions/accounts';
+
+import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
+import { openModal, closeModal } from '../actions/modal';
+import DropdownMenu from '../components/dropdown_menu';
+import { isUserTouching } from '../is_mobile';
+
+/**
+ * @param {import('mastodon/store').RootState} state
+ */
+const mapStateToProps = state => ({
+  openDropdownId: state.dropdownMenu.openId,
+  openedViaKeyboard: state.dropdownMenu.keyboard,
+});
+
+/**
+ * @param {any} dispatch
+ * @param {Object} root0
+ * @param {any} [root0.status]
+ * @param {any} root0.items
+ * @param {any} [root0.scrollKey]
+ */
+const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
+  onOpen(id, onItemClick, keyboard) {
+    if (status) {
+      dispatch(fetchRelationships([status.getIn(['account', 'id'])]));
+    }
+
+    dispatch(isUserTouching() ? openModal({
+      modalType: 'ACTIONS',
+      modalProps: {
+        status,
+        actions: items,
+        onClick: onItemClick,
+      },
+    }) : openDropdownMenu({ id, keyboard, scrollKey }));
+  },
+
+  onClose(id) {
+    dispatch(closeModal({
+      modalType: 'ACTIONS',
+      ignoreFocus: false,
+    }));
+    dispatch(closeDropdownMenu({ id }));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);

app/javascript/mastodon/containers/media_container.jsx

@@ -7,13 +7,12 @@ import { fromJS } from 'immutable';
 import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
 import MediaGallery from 'mastodon/components/media_gallery';
 import ModalRoot from 'mastodon/components/modal_root';
-import { Poll } from 'mastodon/components/poll';
+import Poll from 'mastodon/components/poll';
 import Audio from 'mastodon/features/audio';
 import Card from 'mastodon/features/status/components/card';
 import MediaModal from 'mastodon/features/ui/components/media_modal';
-import { Video } from 'mastodon/features/video';
+import Video from 'mastodon/features/video';
 import { IntlProvider } from 'mastodon/locales';
-import { createPollFromServerJSON } from 'mastodon/models/poll';
 import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
 
 const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
@@ -89,7 +88,7 @@ export default class MediaContainer extends PureComponent {
             Object.assign(props, {
               ...(media   ? { media:   fromJS(media)   } : {}),
               ...(card    ? { card:    fromJS(card)    } : {}),
-              ...(poll    ? { poll:    createPollFromServerJSON(poll)    } : {}),
+              ...(poll    ? { poll:    fromJS(poll)    } : {}),
               ...(hashtag ? { hashtag: fromJS(hashtag) } : {}),
 
               ...(componentName === 'Video' ? {

app/javascript/mastodon/containers/poll_container.js

@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+
+import { debounce } from 'lodash';
+
+import { openModal } from 'mastodon/actions/modal';
+import { fetchPoll, vote } from 'mastodon/actions/polls';
+import Poll from 'mastodon/components/poll';
+
+const mapDispatchToProps = (dispatch, { pollId }) => ({
+  refresh: debounce(
+    () => {
+      dispatch(fetchPoll({ pollId }));
+    },
+    1000,
+    { leading: true },
+  ),
+
+  onVote (choices) {
+    dispatch(vote({ pollId, choices }));
+  },
+
+  onInteractionModal (type, status) {
+    dispatch(openModal({
+      modalType: 'INTERACTION',
+      modalProps: {
+        type,
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('uri'),
+      },
+    }));
+  }
+});
+
+const mapStateToProps = (state, { pollId }) => ({
+  poll: state.polls.get(pollId),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Poll);

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

@@ -4,6 +4,7 @@ import { PureComponent } from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { is } from 'immutable';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import Textarea from 'react-textarea-autosize';
@@ -48,7 +49,7 @@ class InlineAlert extends PureComponent {
 class AccountNote extends ImmutablePureComponent {
 
   static propTypes = {
-    accountId: PropTypes.string.isRequired,
+    account: ImmutablePropTypes.record.isRequired,
     value: PropTypes.string,
     onSave: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -65,7 +66,7 @@ class AccountNote extends ImmutablePureComponent {
   }
 
   UNSAFE_componentWillReceiveProps (nextProps) {
-    const accountWillChange = !is(this.props.accountId, nextProps.accountId);
+    const accountWillChange = !is(this.props.account, nextProps.account);
     const newState = {};
 
     if (accountWillChange && this._isDirty()) {
@@ -101,10 +102,10 @@ class AccountNote extends ImmutablePureComponent {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
 
+      this._save();
+
       if (this.textarea) {
         this.textarea.blur();
-      } else {
-        this._save();
       }
     } else if (e.keyCode === 27) {
       e.preventDefault();
@@ -140,21 +141,21 @@ class AccountNote extends ImmutablePureComponent {
   }
 
   render () {
-    const { accountId, intl } = this.props;
+    const { account, intl } = this.props;
     const { value, saved } = this.state;
 
-    if (!accountId) {
+    if (!account) {
       return null;
     }
 
     return (
       <div className='account__header__account-note'>
-        <label htmlFor={`account-note-${accountId}`}>
+        <label htmlFor={`account-note-${account.get('id')}`}>
           <FormattedMessage id='account.account_note_header' defaultMessage='Personal note' /> <InlineAlert show={saved} />
         </label>
 
         <Textarea
-          id={`account-note-${accountId}`}
+          id={`account-note-${account.get('id')}`}
           className='account__header__account-note__content'
           disabled={this.props.value === null || value === null}
           placeholder={intl.formatMessage(messages.placeholder)}

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

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+import { Hashtag } from 'mastodon/components/hashtag';
+
+const messages = defineMessages({
+  lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' },
+  empty: { id: 'account.featured_tags.last_status_never', defaultMessage: 'No posts' },
+});
+
+class FeaturedTags extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.record,
+    featuredTags: ImmutablePropTypes.list,
+    tagged: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+  };
+
+  render () {
+    const { account, featuredTags, intl } = this.props;
+
+    if (!account || account.get('suspended') || featuredTags.isEmpty()) {
+      return null;
+    }
+
+    return (
+      <div className='getting-started__trends'>
+        <h4><FormattedMessage id='account.featured_tags.title' defaultMessage="{name}'s featured hashtags" values={{ name: <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /> }} /></h4>
+
+        {featuredTags.take(3).map(featuredTag => (
+          <Hashtag
+            key={featuredTag.get('name')}
+            name={featuredTag.get('name')}
+            to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
+            uses={featuredTag.get('statuses_count') * 1}
+            withGraph={false}
+            description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
+          />
+        ))}
+      </div>
+    );
+  }
+
+}
+
+export default injectIntl(FeaturedTags);

app/javascript/mastodon/features/account/containers/account_note_container.js

@@ -4,14 +4,14 @@ import { submitAccountNote } from 'mastodon/actions/account_notes';
 
 import AccountNote from '../components/account_note';
 
-const mapStateToProps = (state, { accountId }) => ({
-  value: state.relationships.getIn([accountId, 'note']),
+const mapStateToProps = (state, { account }) => ({
+  value: account.getIn(['relationship', 'note']),
 });
 
-const mapDispatchToProps = (dispatch, { accountId }) => ({
+const mapDispatchToProps = (dispatch, { account }) => ({
 
   onSave (value) {
-    dispatch(submitAccountNote({ accountId: accountId, note: value }));
+    dispatch(submitAccountNote({ accountId: account.get('id'), note: value }));
   },
 
 });

app/javascript/mastodon/features/account/containers/featured_tags_container.js

@@ -0,0 +1,17 @@
+import { List as ImmutableList } from 'immutable';
+import { connect } from 'react-redux';
+
+import { makeGetAccount } from 'mastodon/selectors';
+
+import FeaturedTags from '../components/featured_tags';
+
+const mapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  return (state, { accountId }) => ({
+    account: getAccount(state, accountId),
+    featuredTags: state.getIn(['user_lists', 'featured_tags', accountId, 'items'], ImmutableList()),
+  });
+};
+
+export default connect(mapStateToProps)(FeaturedTags);

app/javascript/mastodon/features/account/navigation.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { connect } from 'react-redux';
+
+import FeaturedTags from 'mastodon/features/account/containers/featured_tags_container';
+import { normalizeForLookup } from 'mastodon/reducers/accounts_map';
+
+const mapStateToProps = (state, { match: { params: { acct } } }) => {
+  const accountId = state.getIn(['accounts_map', normalizeForLookup(acct)]);
+
+  if (!accountId) {
+    return {
+      isLoading: true,
+    };
+  }
+
+  return {
+    accountId,
+    isLoading: false,
+  };
+};
+
+class AccountNavigation extends PureComponent {
+
+  static propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        acct: PropTypes.string,
+        tagged: PropTypes.string,
+      }).isRequired,
+    }).isRequired,
+
+    accountId: PropTypes.string,
+    isLoading: PropTypes.bool,
+  };
+
+  render () {
+    const { accountId, isLoading, match: { params: { tagged } } } = this.props;
+
+    if (isLoading) {
+      return null;
+    }
+
+    return (
+      <FeaturedTags accountId={accountId} tagged={tagged} />
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(AccountNavigation);

app/javascript/mastodon/features/account_featured/components/empty_message.tsx

@@ -1,69 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import { useParams } from 'react-router';
-
-import { LimitedAccountHint } from 'mastodon/features/account_timeline/components/limited_account_hint';
-import { me } from 'mastodon/initial_state';
-
-interface EmptyMessageProps {
-  suspended: boolean;
-  hidden: boolean;
-  blockedBy: boolean;
-  accountId?: string;
-}
-
-export const EmptyMessage: React.FC<EmptyMessageProps> = ({
-  accountId,
-  suspended,
-  hidden,
-  blockedBy,
-}) => {
-  const { acct } = useParams<{ acct?: string }>();
-  if (!accountId) {
-    return null;
-  }
-
-  let message: React.ReactNode = null;
-
-  if (me === accountId) {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_featured.me'
-        defaultMessage='You have not featured anything yet. Did you know that you can feature your posts, hashtags you use the most, and even your friend’s accounts on your profile?'
-      />
-    );
-  } else if (suspended) {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_suspended'
-        defaultMessage='Account suspended'
-      />
-    );
-  } else if (hidden) {
-    message = <LimitedAccountHint accountId={accountId} />;
-  } else if (blockedBy) {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_unavailable'
-        defaultMessage='Profile unavailable'
-      />
-    );
-  } else if (acct) {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_featured.other'
-        defaultMessage='{acct} has not featured anything yet. Did you know that you can feature your posts, hashtags you use the most, and even your friend’s accounts on your profile?'
-        values={{ acct }}
-      />
-    );
-  } else {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_featured_other.unknown'
-        defaultMessage='This account has not featured anything yet.'
-      />
-    );
-  }
-
-  return <div className='empty-column-indicator'>{message}</div>;
-};

app/javascript/mastodon/features/account_featured/components/featured_tag.tsx

@@ -1,52 +0,0 @@
-import { defineMessages, useIntl } from 'react-intl';
-
-import type { Map as ImmutableMap } from 'immutable';
-
-import { Hashtag } from 'mastodon/components/hashtag';
-
-export type TagMap = ImmutableMap<
-  'id' | 'name' | 'url' | 'statuses_count' | 'last_status_at' | 'accountId',
-  string | null
->;
-
-interface FeaturedTagProps {
-  tag: TagMap;
-  account: string;
-}
-
-const messages = defineMessages({
-  lastStatusAt: {
-    id: 'account.featured_tags.last_status_at',
-    defaultMessage: 'Last post on {date}',
-  },
-  empty: {
-    id: 'account.featured_tags.last_status_never',
-    defaultMessage: 'No posts',
-  },
-});
-
-export const FeaturedTag: React.FC<FeaturedTagProps> = ({ tag, account }) => {
-  const intl = useIntl();
-  const name = tag.get('name') ?? '';
-  const count = Number.parseInt(tag.get('statuses_count') ?? '');
-  return (
-    <Hashtag
-      key={name}
-      name={name}
-      to={`/@${account}/tagged/${name}`}
-      uses={count}
-      withGraph={false}
-      description={
-        count > 0
-          ? intl.formatMessage(messages.lastStatusAt, {
-              date: intl.formatDate(tag.get('last_status_at') ?? '', {
-                month: 'short',
-                day: '2-digit',
-                year: 'numeric',
-              }),
-            })
-          : intl.formatMessage(messages.empty)
-      }
-    />
-  );
-};

app/javascript/mastodon/features/account_featured/index.tsx

@@ -1,156 +0,0 @@
-import { useEffect } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import { useParams } from 'react-router';
-
-import type { Map as ImmutableMap } from 'immutable';
-import { List as ImmutableList } from 'immutable';
-
-import { fetchFeaturedTags } from 'mastodon/actions/featured_tags';
-import { expandAccountFeaturedTimeline } from 'mastodon/actions/timelines';
-import { ColumnBackButton } from 'mastodon/components/column_back_button';
-import { LoadingIndicator } from 'mastodon/components/loading_indicator';
-import { RemoteHint } from 'mastodon/components/remote_hint';
-import StatusContainer from 'mastodon/containers/status_container';
-import { useAccountId } from 'mastodon/hooks/useAccountId';
-import { useAccountVisibility } from 'mastodon/hooks/useAccountVisibility';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-import { AccountHeader } from '../account_timeline/components/account_header';
-import Column from '../ui/components/column';
-
-import { EmptyMessage } from './components/empty_message';
-import { FeaturedTag } from './components/featured_tag';
-import type { TagMap } from './components/featured_tag';
-
-interface Params {
-  acct?: string;
-  id?: string;
-}
-
-const AccountFeatured = () => {
-  const accountId = useAccountId();
-  const { suspended, blockedBy, hidden } = useAccountVisibility(accountId);
-  const forceEmptyState = suspended || blockedBy || hidden;
-  const { acct = '' } = useParams<Params>();
-
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (accountId) {
-      void dispatch(expandAccountFeaturedTimeline(accountId));
-      dispatch(fetchFeaturedTags(accountId));
-    }
-  }, [accountId, dispatch]);
-
-  const isLoading = useAppSelector(
-    (state) =>
-      !accountId ||
-      !!(state.timelines as ImmutableMap<string, unknown>).getIn([
-        `account:${accountId}:pinned`,
-        'isLoading',
-      ]) ||
-      !!state.user_lists.getIn(['featured_tags', accountId, 'isLoading']),
-  );
-  const featuredTags = useAppSelector(
-    (state) =>
-      state.user_lists.getIn(
-        ['featured_tags', accountId, 'items'],
-        ImmutableList(),
-      ) as ImmutableList<TagMap>,
-  );
-  const featuredStatusIds = useAppSelector(
-    (state) =>
-      (state.timelines as ImmutableMap<string, unknown>).getIn(
-        [`account:${accountId}:pinned`, 'items'],
-        ImmutableList(),
-      ) as ImmutableList<string>,
-  );
-
-  if (isLoading) {
-    return (
-      <AccountFeaturedWrapper accountId={accountId}>
-        <div className='scrollable__append'>
-          <LoadingIndicator />
-        </div>
-      </AccountFeaturedWrapper>
-    );
-  }
-
-  if (featuredStatusIds.isEmpty() && featuredTags.isEmpty()) {
-    return (
-      <AccountFeaturedWrapper accountId={accountId}>
-        <EmptyMessage
-          blockedBy={blockedBy}
-          hidden={hidden}
-          suspended={suspended}
-          accountId={accountId}
-        />
-        <RemoteHint accountId={accountId} />
-      </AccountFeaturedWrapper>
-    );
-  }
-
-  return (
-    <Column>
-      <ColumnBackButton />
-
-      <div className='scrollable scrollable--flex'>
-        {accountId && (
-          <AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
-        )}
-        {!featuredTags.isEmpty() && (
-          <>
-            <h4 className='column-subheading'>
-              <FormattedMessage
-                id='account.featured.hashtags'
-                defaultMessage='Hashtags'
-              />
-            </h4>
-            {featuredTags.map((tag) => (
-              <FeaturedTag key={tag.get('id')} tag={tag} account={acct} />
-            ))}
-          </>
-        )}
-        {!featuredStatusIds.isEmpty() && (
-          <>
-            <h4 className='column-subheading'>
-              <FormattedMessage
-                id='account.featured.posts'
-                defaultMessage='Posts'
-              />
-            </h4>
-            {featuredStatusIds.map((statusId) => (
-              <StatusContainer
-                key={`f-${statusId}`}
-                // @ts-expect-error inferred props are wrong
-                id={statusId}
-                contextType='account'
-              />
-            ))}
-          </>
-        )}
-        <RemoteHint accountId={accountId} />
-      </div>
-    </Column>
-  );
-};
-
-const AccountFeaturedWrapper = ({
-  children,
-  accountId,
-}: React.PropsWithChildren<{ accountId?: string }>) => {
-  return (
-    <Column>
-      <ColumnBackButton />
-      <div className='scrollable scrollable--flex'>
-        {accountId && <AccountHeader accountId={accountId} />}
-        {children}
-      </div>
-    </Column>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default AccountFeatured;

app/javascript/mastodon/features/account_gallery/components/media_item.tsx

@@ -26,16 +26,11 @@ export const MediaItem: React.FC<{
       displayMedia === 'show_all',
   );
   const [loaded, setLoaded] = useState(false);
-  const [error, setError] = useState(false);
 
   const handleImageLoad = useCallback(() => {
     setLoaded(true);
   }, [setLoaded]);
 
-  const handleImageError = useCallback(() => {
-    setError(true);
-  }, [setError]);
-
   const handleMouseEnter = useCallback(
     (e: React.MouseEvent<HTMLVideoElement>) => {
       if (e.target instanceof HTMLVideoElement) {
@@ -103,7 +98,6 @@ export const MediaItem: React.FC<{
           alt={description}
           lang={lang}
           onLoad={handleImageLoad}
-          onError={handleImageError}
         />
 
         <div className='media-gallery__item__overlay media-gallery__item__overlay--corner'>
@@ -124,7 +118,6 @@ export const MediaItem: React.FC<{
         lang={lang}
         style={{ objectPosition: `${x}% ${y}%` }}
         onLoad={handleImageLoad}
-        onError={handleImageError}
       />
     );
   } else if (['video', 'gifv'].includes(type)) {
@@ -180,11 +173,7 @@ export const MediaItem: React.FC<{
   }
 
   return (
-    <div
-      className={classNames('media-gallery__item media-gallery__item--square', {
-        'media-gallery__item--error': error,
-      })}
-    >
+    <div className='media-gallery__item media-gallery__item--square'>
       <Blurhash
         hash={blurhash}
         className={classNames('media-gallery__preview', {

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

@@ -2,22 +2,25 @@ import { useEffect, useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { useParams } from 'react-router-dom';
+
 import { createSelector } from '@reduxjs/toolkit';
 import type { Map as ImmutableMap } from 'immutable';
 import { List as ImmutableList } from 'immutable';
 
+import { lookupAccount, fetchAccount } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
 import { expandAccountMediaTimeline } from 'mastodon/actions/timelines';
 import { ColumnBackButton } from 'mastodon/components/column_back_button';
-import { RemoteHint } from 'mastodon/components/remote_hint';
 import ScrollableList from 'mastodon/components/scrollable_list';
+import { TimelineHint } from 'mastodon/components/timeline_hint';
 import { AccountHeader } from 'mastodon/features/account_timeline/components/account_header';
 import { LimitedAccountHint } from 'mastodon/features/account_timeline/components/limited_account_hint';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 import Column from 'mastodon/features/ui/components/column';
-import { useAccountId } from 'mastodon/hooks/useAccountId';
-import { useAccountVisibility } from 'mastodon/hooks/useAccountVisibility';
 import type { MediaAttachment } from 'mastodon/models/media_attachment';
+import { normalizeForLookup } from 'mastodon/reducers/accounts_map';
+import { getAccountHidden } from 'mastodon/selectors/accounts';
 import type { RootState } from 'mastodon/store';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
@@ -53,11 +56,53 @@ const getAccountGallery = createSelector(
   },
 );
 
+interface Params {
+  acct?: string;
+  id?: string;
+}
+
+const RemoteHint: React.FC<{
+  accountId: string;
+}> = ({ accountId }) => {
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+  const acct = account?.acct;
+  const url = account?.url;
+  const domain = acct ? acct.split('@')[1] : undefined;
+
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <TimelineHint
+      url={url}
+      message={
+        <FormattedMessage
+          id='hints.profiles.posts_may_be_missing'
+          defaultMessage='Some posts from this profile may be missing.'
+        />
+      }
+      label={
+        <FormattedMessage
+          id='hints.profiles.see_more_posts'
+          defaultMessage='See more posts on {domain}'
+          values={{ domain: <strong>{domain}</strong> }}
+        />
+      }
+    />
+  );
+};
+
 export const AccountGallery: React.FC<{
   multiColumn: boolean;
 }> = ({ multiColumn }) => {
+  const { acct, id } = useParams<Params>();
   const dispatch = useAppDispatch();
-  const accountId = useAccountId();
+  const accountId = useAppSelector(
+    (state) =>
+      id ??
+      (state.accounts_map.get(normalizeForLookup(acct)) as string | undefined),
+  );
   const attachments = useAppSelector((state) =>
     accountId
       ? getAccountGallery(state, accountId)
@@ -78,15 +123,33 @@ export const AccountGallery: React.FC<{
   const account = useAppSelector((state) =>
     accountId ? state.accounts.get(accountId) : undefined,
   );
+  const blockedBy = useAppSelector(
+    (state) =>
+      state.relationships.getIn([accountId, 'blocked_by'], false) as boolean,
+  );
+  const suspended = useAppSelector(
+    (state) => state.accounts.getIn([accountId, 'suspended'], false) as boolean,
+  );
   const isAccount = !!account;
-
-  const { suspended, blockedBy, hidden } = useAccountVisibility(accountId);
-
+  const remote = account?.acct !== account?.username;
+  const hidden = useAppSelector((state) =>
+    accountId ? getAccountHidden(state, accountId) : false,
+  );
   const maxId = attachments.last()?.getIn(['status', 'id']) as
     | string
     | undefined;
 
   useEffect(() => {
+    if (!accountId) {
+      dispatch(lookupAccount(acct));
+    }
+  }, [dispatch, accountId, acct]);
+
+  useEffect(() => {
+    if (accountId && !isAccount) {
+      dispatch(fetchAccount(accountId));
+    }
+
     if (accountId && isAccount) {
       void dispatch(expandAccountMediaTimeline(accountId));
     }
@@ -170,7 +233,7 @@ export const AccountGallery: React.FC<{
           defaultMessage='Profile unavailable'
         />
       );
-    } else if (attachments.isEmpty()) {
+    } else if (remote && attachments.isEmpty()) {
       emptyMessage = <RemoteHint accountId={accountId} />;
     } else {
       emptyMessage = (
@@ -196,7 +259,7 @@ export const AccountGallery: React.FC<{
           )
         }
         alwaysPrepend
-        append={accountId && <RemoteHint accountId={accountId} />}
+        append={remote && accountId && <RemoteHint accountId={accountId} />}
         scrollKey='account_gallery'
         isLoading={isLoading}
         hasMore={!forceEmptyState && hasMore}

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -18,7 +18,6 @@ import {
   unmuteAccount,
   pinAccount,
   unpinAccount,
-  removeAccountFromFollowers,
 } from 'mastodon/actions/accounts';
 import { initBlockModal } from 'mastodon/actions/blocks';
 import { mentionCompose, directCompose } from 'mastodon/actions/compose';
@@ -38,12 +37,11 @@ import {
   FollowingCounter,
   StatusesCounter,
 } from 'mastodon/components/counters';
-import { Dropdown } from 'mastodon/components/dropdown_menu';
-import { FollowButton } from 'mastodon/components/follow_button';
-import { FormattedDateWrapper } from 'mastodon/components/formatted_date';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { ShortNumber } from 'mastodon/components/short_number';
+import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import { DomainPill } from 'mastodon/features/account/components/domain_pill';
 import AccountNoteContainer from 'mastodon/features/account/containers/account_note_container';
 import FollowRequestNoteContainer from 'mastodon/features/account/containers/follow_request_note_container';
@@ -51,7 +49,8 @@ import { useLinks } from 'mastodon/hooks/useLinks';
 import { useIdentity } from 'mastodon/identity_context';
 import { autoPlayGif, me, domain as localDomain } from 'mastodon/initial_state';
 import type { Account } from 'mastodon/models/account';
-import type { MenuItem } from 'mastodon/models/dropdown_menu';
+import type { DropdownMenu } from 'mastodon/models/dropdown_menu';
+import type { Relationship } from 'mastodon/models/relationship';
 import {
   PERMISSION_MANAGE_USERS,
   PERMISSION_MANAGE_FEDERATION,
@@ -63,6 +62,18 @@ import { MemorialNote } from './memorial_note';
 import { MovedNote } from './moved_note';
 
 const messages = defineMessages({
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
+  mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
+  cancel_follow_request: {
+    id: 'account.cancel_follow_request',
+    defaultMessage: 'Withdraw follow request',
+  },
+  requested: {
+    id: 'account.requested',
+    defaultMessage: 'Awaiting approval. Click to cancel follow request',
+  },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   linkVerifiedOn: {
@@ -153,23 +164,6 @@ const messages = defineMessages({
     id: 'account.open_original_page',
     defaultMessage: 'Open original page',
   },
-  removeFromFollowers: {
-    id: 'account.remove_from_followers',
-    defaultMessage: 'Remove {name} from followers',
-  },
-  confirmRemoveFromFollowersTitle: {
-    id: 'confirmations.remove_from_followers.title',
-    defaultMessage: 'Remove follower?',
-  },
-  confirmRemoveFromFollowersMessage: {
-    id: 'confirmations.remove_from_followers.message',
-    defaultMessage:
-      '{name} will stop following you. Are you sure you want to proceed?',
-  },
-  confirmRemoveFromFollowersButton: {
-    id: 'confirmations.remove_from_followers.confirm',
-    defaultMessage: 'Remove follower',
-  },
 });
 
 const titleFromAccount = (account: Account) => {
@@ -184,6 +178,20 @@ const titleFromAccount = (account: Account) => {
   return `${prefix} (@${acct})`;
 };
 
+const messageForFollowButton = (relationship?: Relationship) => {
+  if (!relationship) return messages.follow;
+
+  if (relationship.get('following') && relationship.get('followed_by')) {
+    return messages.mutual;
+  } else if (relationship.get('following') || relationship.get('requested')) {
+    return messages.unfollow;
+  } else if (relationship.get('followed_by')) {
+    return messages.followBack;
+  } else {
+    return messages.follow;
+  }
+};
+
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
   month: 'short',
   day: 'numeric',
@@ -206,6 +214,20 @@ export const AccountHeader: React.FC<{
   const hidden = useAppSelector((state) => getAccountHidden(state, accountId));
   const handleLinkClick = useLinks();
 
+  const handleFollow = useCallback(() => {
+    if (!account) {
+      return;
+    }
+
+    if (relationship?.following || relationship?.requested) {
+      dispatch(
+        openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
+      );
+    } else {
+      dispatch(followAccount(account.id));
+    }
+  }, [dispatch, account, relationship]);
+
   const handleBlock = useCallback(() => {
     if (!account) {
       return;
@@ -342,6 +364,23 @@ export const AccountHeader: React.FC<{
     );
   }, [dispatch, account]);
 
+  const handleInteractionModal = useCallback(() => {
+    if (!account) {
+      return;
+    }
+
+    dispatch(
+      openModal({
+        modalType: 'INTERACTION',
+        modalProps: {
+          type: 'follow',
+          accountId: account.id,
+          url: account.uri,
+        },
+      }),
+    );
+  }, [dispatch, account]);
+
   const handleOpenAvatar = useCallback(
     (e: React.MouseEvent) => {
       if (e.button !== 0 || e.ctrlKey || e.metaKey) {
@@ -377,6 +416,10 @@ export const AccountHeader: React.FC<{
     });
   }, [account]);
 
+  const handleEditProfile = useCallback(() => {
+    window.open('/settings/profile', '_blank');
+  }, []);
+
   const handleMouseEnter = useCallback(
     ({ currentTarget }: React.MouseEvent) => {
       if (autoPlayGif) {
@@ -412,7 +455,7 @@ export const AccountHeader: React.FC<{
   const remoteDomain = isRemote ? account?.acct.split('@')[1] : null;
 
   const menu = useMemo(() => {
-    const arr: MenuItem[] = [];
+    const arr: DropdownMenu = [];
 
     if (!account) {
       return arr;
@@ -501,7 +544,9 @@ export const AccountHeader: React.FC<{
 
         arr.push({
           text: intl.formatMessage(
-            relationship.endorsed ? messages.unendorse : messages.endorse,
+            account.getIn(['relationship', 'endorsed'])
+              ? messages.unendorse
+              : messages.endorse,
           ),
           action: handleEndorseToggle,
         });
@@ -512,39 +557,6 @@ export const AccountHeader: React.FC<{
         arr.push(null);
       }
 
-      if (relationship?.followed_by) {
-        const handleRemoveFromFollowers = () => {
-          dispatch(
-            openModal({
-              modalType: 'CONFIRM',
-              modalProps: {
-                title: intl.formatMessage(
-                  messages.confirmRemoveFromFollowersTitle,
-                ),
-                message: intl.formatMessage(
-                  messages.confirmRemoveFromFollowersMessage,
-                  { name: <strong>{account.acct}</strong> },
-                ),
-                confirm: intl.formatMessage(
-                  messages.confirmRemoveFromFollowersButton,
-                ),
-                onConfirm: () => {
-                  void dispatch(removeAccountFromFollowers({ accountId }));
-                },
-              },
-            }),
-          );
-        };
-
-        arr.push({
-          text: intl.formatMessage(messages.removeFromFollowers, {
-            name: account.username,
-          }),
-          action: handleRemoveFromFollowers,
-          dangerous: true,
-        });
-      }
-
       if (relationship?.muting) {
         arr.push({
           text: intl.formatMessage(messages.unmute, {
@@ -643,8 +655,6 @@ export const AccountHeader: React.FC<{
 
     return arr;
   }, [
-    dispatch,
-    accountId,
     account,
     relationship,
     permissions,
@@ -669,72 +679,33 @@ export const AccountHeader: React.FC<{
     return null;
   }
 
-  let actionBtn: React.ReactNode,
-    bellBtn: React.ReactNode,
-    lockedIcon: React.ReactNode,
-    shareBtn: React.ReactNode;
+  let actionBtn, bellBtn, lockedIcon, shareBtn;
 
-  const info: React.ReactNode[] = [];
+  const info = [];
 
-  if (me !== account.id && relationship) {
-    if (
-      relationship.followed_by &&
-      (relationship.following || relationship.requested)
-    ) {
-      info.push(
-        <span key='mutual' className='relationship-tag'>
-          <FormattedMessage
-            id='account.mutual'
-            defaultMessage='You follow each other'
-          />
-        </span>,
-      );
-    } else if (relationship.followed_by) {
-      info.push(
-        <span key='followed_by' className='relationship-tag'>
-          <FormattedMessage
-            id='account.follows_you'
-            defaultMessage='Follows you'
-          />
-        </span>,
-      );
-    } else if (relationship.requested_by) {
-      info.push(
-        <span key='requested_by' className='relationship-tag'>
-          <FormattedMessage
-            id='account.requests_to_follow_you'
-            defaultMessage='Requests to follow you'
-          />
-        </span>,
-      );
-    }
+  if (me !== account.id && relationship?.blocking) {
+    info.push(
+      <span key='blocked' className='relationship-tag'>
+        <FormattedMessage id='account.blocked' defaultMessage='Blocked' />
+      </span>,
+    );
+  }
 
-    if (relationship.blocking) {
-      info.push(
-        <span key='blocking' className='relationship-tag'>
-          <FormattedMessage id='account.blocking' defaultMessage='Blocking' />
-        </span>,
-      );
-    }
-
-    if (relationship.muting) {
-      info.push(
-        <span key='muting' className='relationship-tag'>
-          <FormattedMessage id='account.muting' defaultMessage='Muting' />
-        </span>,
-      );
-    }
-
-    if (relationship.domain_blocking) {
-      info.push(
-        <span key='domain_blocking' className='relationship-tag'>
-          <FormattedMessage
-            id='account.domain_blocking'
-            defaultMessage='Blocking domain'
-          />
-        </span>,
-      );
-    }
+  if (me !== account.id && relationship?.muting) {
+    info.push(
+      <span key='muted' className='relationship-tag'>
+        <FormattedMessage id='account.muted' defaultMessage='Muted' />
+      </span>,
+    );
+  } else if (me !== account.id && relationship?.domain_blocking) {
+    info.push(
+      <span key='domain_blocked' className='relationship-tag'>
+        <FormattedMessage
+          id='account.domain_blocked'
+          defaultMessage='Domain blocked'
+        />
+      </span>,
+    );
   }
 
   if (relationship?.requested || relationship?.following) {
@@ -778,17 +749,43 @@ export const AccountHeader: React.FC<{
     );
   }
 
-  if (relationship?.blocking) {
+  if (me !== account.id) {
+    if (signedIn && !relationship) {
+      // Wait until the relationship is loaded
+      actionBtn = (
+        <Button disabled>
+          <LoadingIndicator />
+        </Button>
+      );
+    } else if (!relationship?.blocking) {
+      actionBtn = (
+        <Button
+          disabled={relationship?.blocked_by}
+          className={classNames({
+            'button--destructive':
+              relationship?.following || relationship?.requested,
+          })}
+          text={intl.formatMessage(messageForFollowButton(relationship))}
+          onClick={signedIn ? handleFollow : handleInteractionModal}
+        />
+      );
+    } else {
+      actionBtn = (
+        <Button
+          text={intl.formatMessage(messages.unblock, {
+            name: account.username,
+          })}
+          onClick={handleBlock}
+        />
+      );
+    }
+  } else {
     actionBtn = (
       <Button
-        text={intl.formatMessage(messages.unblock, {
-          name: account.username,
-        })}
-        onClick={handleBlock}
+        text={intl.formatMessage(messages.edit_profile)}
+        onClick={handleEditProfile}
       />
     );
-  } else {
-    actionBtn = <FollowButton accountId={accountId} />;
   }
 
   if (account.moved && !relationship?.following) {
@@ -821,7 +818,7 @@ export const AccountHeader: React.FC<{
     badges.push(<GroupBadge key='group-badge' />);
   }
 
-  account.roles.forEach((role) => {
+  account.get('roles', []).forEach((role) => {
     badges.push(
       <Badge
         key={`role-badge-${role.get('id')}`}
@@ -881,11 +878,13 @@ export const AccountHeader: React.FC<{
             <div className='account__header__tabs__buttons'>
               {!hidden && bellBtn}
               {!hidden && shareBtn}
-              <Dropdown
+              <DropdownMenuContainer
                 disabled={menu.length === 0}
                 items={menu}
                 icon='ellipsis-v'
                 iconComponent={MoreHorizIcon}
+                size={24}
+                direction='right'
               />
               {!hidden && actionBtn}
             </div>
@@ -920,7 +919,7 @@ export const AccountHeader: React.FC<{
                 onClickCapture={handleLinkClick}
               >
                 {account.id !== me && signedIn && (
-                  <AccountNoteContainer accountId={accountId} />
+                  <AccountNoteContainer account={account} />
                 )}
 
                 {account.note.length > 0 && account.note !== '<p></p>' && (
@@ -939,12 +938,11 @@ export const AccountHeader: React.FC<{
                       />
                     </dt>
                     <dd>
-                      <FormattedDateWrapper
-                        value={account.created_at}
-                        year='numeric'
-                        month='short'
-                        day='2-digit'
-                      />
+                      {intl.formatDate(account.created_at, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: '2-digit',
+                      })}
                     </dd>
                   </dl>
 
@@ -1031,9 +1029,6 @@ export const AccountHeader: React.FC<{
 
       {!(hideTabs || hidden) && (
         <div className='account__section-headline'>
-          <NavLink exact to={`/@${account.acct}/featured`}>
-            <FormattedMessage id='account.featured' defaultMessage='Featured' />
-          </NavLink>
           <NavLink exact to={`/@${account.acct}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
           </NavLink>

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

@@ -7,10 +7,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
+import { TimelineHint } from 'mastodon/components/timeline_hint';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 import { me } from 'mastodon/initial_state';
 import { normalizeForLookup } from 'mastodon/reducers/accounts_map';
 import { getAccountHidden } from 'mastodon/selectors/accounts';
+import { useAppSelector } from 'mastodon/store';
 
 import { lookupAccount, fetchAccount } from '../../actions/accounts';
 import { fetchFeaturedTags } from '../../actions/featured_tags';
@@ -19,7 +21,6 @@ import { ColumnBackButton } from '../../components/column_back_button';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import StatusList from '../../components/status_list';
 import Column from '../ui/components/column';
-import { RemoteHint } from 'mastodon/components/remote_hint';
 
 import { AccountHeader } from './components/account_header';
 import { LimitedAccountHint } from './components/limited_account_hint';
@@ -46,8 +47,11 @@ const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = fa
 
   return {
     accountId,
+    remote: !!(state.getIn(['accounts', accountId, 'acct']) !== state.getIn(['accounts', accountId, 'username'])),
+    remoteUrl: state.getIn(['accounts', accountId, 'url']),
     isAccount: !!state.getIn(['accounts', accountId]),
     statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList),
+    featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'], emptyList),
     isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
     hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
     suspended: state.getIn(['accounts', accountId, 'suspended'], false),
@@ -56,6 +60,24 @@ const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = fa
   };
 };
 
+const RemoteHint = ({ accountId, url }) => {
+  const acct = useAppSelector(state => state.accounts.get(accountId)?.acct);
+  const domain = acct ? acct.split('@')[1] : undefined;
+
+  return (
+    <TimelineHint
+      url={url}
+      message={<FormattedMessage id='hints.profiles.posts_may_be_missing' defaultMessage='Some posts from this profile may be missing.' />}
+      label={<FormattedMessage id='hints.profiles.see_more_posts' defaultMessage='See more posts on {domain}' values={{ domain: <strong>{domain}</strong> }} />}
+    />
+  );
+};
+
+RemoteHint.propTypes = {
+  url: PropTypes.string.isRequired,
+  accountId: PropTypes.string.isRequired,
+};
+
 class AccountTimeline extends ImmutablePureComponent {
 
   static propTypes = {
@@ -67,6 +89,7 @@ class AccountTimeline extends ImmutablePureComponent {
     accountId: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
     statusIds: ImmutablePropTypes.list,
+    featuredStatusIds: ImmutablePropTypes.list,
     isLoading: PropTypes.bool,
     hasMore: PropTypes.bool,
     withReplies: PropTypes.bool,
@@ -74,6 +97,8 @@ class AccountTimeline extends ImmutablePureComponent {
     isAccount: PropTypes.bool,
     suspended: PropTypes.bool,
     hidden: PropTypes.bool,
+    remote: PropTypes.bool,
+    remoteUrl: PropTypes.string,
     multiColumn: PropTypes.bool,
   };
 
@@ -136,7 +161,7 @@ class AccountTimeline extends ImmutablePureComponent {
   };
 
   render () {
-    const { accountId, statusIds, isLoading, hasMore, blockedBy, suspended, isAccount, hidden, multiColumn, remote, remoteUrl } = this.props;
+    const { accountId, statusIds, featuredStatusIds, isLoading, hasMore, blockedBy, suspended, isAccount, hidden, multiColumn, remote, remoteUrl } = this.props;
 
     if (isLoading && statusIds.isEmpty()) {
       return (
@@ -166,6 +191,8 @@ class AccountTimeline extends ImmutablePureComponent {
       emptyMessage = <FormattedMessage id='empty_column.account_timeline' defaultMessage='No posts found' />;
     }
 
+    const remoteMessage = remote ? <RemoteHint accountId={accountId} url={remoteUrl} /> : null;
+
     return (
       <Column>
         <ColumnBackButton />
@@ -173,9 +200,10 @@ class AccountTimeline extends ImmutablePureComponent {
         <StatusList
           prepend={<AccountHeader accountId={this.props.accountId} hideTabs={forceEmptyState} tagged={this.props.params.tagged} />}
           alwaysPrepend
-          append={<RemoteHint accountId={accountId} />}
+          append={remoteMessage}
           scrollKey='account_timeline'
           statusIds={forceEmptyState ? emptyList : statusIds}
+          featuredStatusIds={featuredStatusIds}
           isLoading={isLoading}
           hasMore={!forceEmptyState && hasMore}
           onLoadMore={this.handleLoadMore}

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -2,6 +2,7 @@ import {
   useState,
   useCallback,
   useRef,
+  useEffect,
   useImperativeHandle,
   forwardRef,
 } from 'react';
@@ -12,7 +13,6 @@ import classNames from 'classnames';
 
 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 
-import { useSpring, animated } from '@react-spring/web';
 import Textarea from 'react-textarea-autosize';
 import { length } from 'stringz';
 // eslint-disable-next-line import/extensions
@@ -30,8 +30,8 @@ import { Skeleton } from 'mastodon/components/skeleton';
 import Audio from 'mastodon/features/audio';
 import { CharacterCounter } from 'mastodon/features/compose/components/character_counter';
 import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
-import { Video, getPointerPosition } from 'mastodon/features/video';
-import { me, reduceMotion } from 'mastodon/initial_state';
+import Video, { getPointerPosition } from 'mastodon/features/video';
+import { me } from 'mastodon/initial_state';
 import type { MediaAttachment } from 'mastodon/models/media_attachment';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { assetHost } from 'mastodon/utils/config';
@@ -105,17 +105,6 @@ const Preview: React.FC<{
   position: FocalPoint;
   onPositionChange: (arg0: FocalPoint) => void;
 }> = ({ mediaId, position, onPositionChange }) => {
-  const draggingRef = useRef<boolean>(false);
-  const nodeRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null);
-
-  const [x, y] = position;
-  const style = useSpring({
-    to: {
-      left: `${x * 100}%`,
-      top: `${y * 100}%`,
-    },
-    immediate: reduceMotion || draggingRef.current,
-  });
   const media = useAppSelector((state) =>
     (
       (state.compose as ImmutableMap<string, unknown>).get(
@@ -128,6 +117,9 @@ const Preview: React.FC<{
   );
 
   const [dragging, setDragging] = useState(false);
+  const [x, y] = position;
+  const nodeRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null);
+  const draggingRef = useRef<boolean>(false);
 
   const setRef = useCallback(
     (e: HTMLImageElement | HTMLVideoElement | null) => {
@@ -142,30 +134,62 @@ const Preview: React.FC<{
         return;
       }
 
-      const handleMouseMove = (e: MouseEvent) => {
-        const { x, y } = getPointerPosition(nodeRef.current, e);
-        draggingRef.current = true; // This will disable the animation for quicker feedback, only do this if the mouse actually moves
-        onPositionChange([x, y]);
-      };
-
-      const handleMouseUp = () => {
-        setDragging(false);
-        draggingRef.current = false;
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('mousemove', handleMouseMove);
-      };
-
-      const { x, y } = getPointerPosition(nodeRef.current, e.nativeEvent);
-
+      const { x, y } = getPointerPosition(nodeRef.current, e);
       setDragging(true);
+      draggingRef.current = true;
       onPositionChange([x, y]);
-
-      document.addEventListener('mouseup', handleMouseUp);
-      document.addEventListener('mousemove', handleMouseMove);
     },
     [setDragging, onPositionChange],
   );
 
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      const { x, y } = getPointerPosition(nodeRef.current, e);
+      setDragging(true);
+      draggingRef.current = true;
+      onPositionChange([x, y]);
+    },
+    [setDragging, onPositionChange],
+  );
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      setDragging(false);
+      draggingRef.current = false;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (draggingRef.current) {
+        const { x, y } = getPointerPosition(nodeRef.current, e);
+        onPositionChange([x, y]);
+      }
+    };
+
+    const handleTouchEnd = () => {
+      setDragging(false);
+      draggingRef.current = false;
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (draggingRef.current) {
+        const { x, y } = getPointerPosition(nodeRef.current, e);
+        onPositionChange([x, y]);
+      }
+    };
+
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('touchend', handleTouchEnd);
+    document.addEventListener('touchmove', handleTouchMove);
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+      document.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [setDragging, onPositionChange]);
+
   if (!media) {
     return null;
   }
@@ -180,8 +204,12 @@ const Preview: React.FC<{
           alt=''
           role='presentation'
           onMouseDown={handleMouseDown}
+          onTouchStart={handleTouchStart}
+        />
+        <div
+          className='focal-point__reticle'
+          style={{ top: `${y * 100}%`, left: `${x * 100}%` }}
         />
-        <animated.div className='focal-point__reticle' style={style} />
       </div>
     );
   } else if (media.get('type') === 'gifv') {
@@ -192,8 +220,12 @@ const Preview: React.FC<{
           src={media.get('url') as string}
           alt=''
           onMouseDown={handleMouseDown}
+          onTouchStart={handleTouchStart}
+        />
+        <div
+          className='focal-point__reticle'
+          style={{ top: `${y * 100}%`, left: `${x * 100}%` }}
         />
-        <animated.div className='focal-point__reticle' style={style} />
       </div>
     );
   } else if (media.get('type') === 'video') {
@@ -201,10 +233,10 @@ const Preview: React.FC<{
       <Video
         preview={media.get('preview_url') as string}
         frameRate={media.getIn(['meta', 'original', 'frame_rate']) as string}
-        aspectRatio={`${media.getIn(['meta', 'original', 'width']) as number} / ${media.getIn(['meta', 'original', 'height']) as number}`}
         blurhash={media.get('blurhash') as string}
         src={media.get('url') as string}
         detailed
+        inline
         editable
       />
     );

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
@@ -16,7 +16,6 @@ import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?reac
 import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
 import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
 import { Icon }  from 'mastodon/components/icon';
-import { SpoilerButton } from 'mastodon/components/spoiler_button';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
 
 import { Blurhash } from '../../components/blurhash';
@@ -27,8 +26,8 @@ import Visualizer from './visualizer';
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
   pause: { id: 'video.pause', defaultMessage: 'Pause' },
-  mute: { id: 'video.mute', defaultMessage: 'Mute' },
-  unmute: { id: 'video.unmute', defaultMessage: 'Unmute' },
+  mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
+  unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
   download: { id: 'video.download', defaultMessage: 'Download file' },
   hide: { id: 'audio.hide', defaultMessage: 'Hide audio' },
 });
@@ -62,7 +61,6 @@ class Audio extends PureComponent {
     volume: PropTypes.number,
     muted: PropTypes.bool,
     deployPictureInPicture: PropTypes.func,
-    matchedFilters: PropTypes.arrayOf(PropTypes.string),
   };
 
   state = {
@@ -473,11 +471,19 @@ class Audio extends PureComponent {
   };
 
   render () {
-    const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash, matchedFilters } = this.props;
+    const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash } = this.props;
     const { paused, volume, currentTime, duration, buffer, dragging, revealed } = this.state;
     const progress = Math.min((currentTime / duration) * 100, 100);
     const muted = this.state.muted || volume === 0;
 
+    let warning;
+
+    if (sensitive) {
+      warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+    } else {
+      warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
+    }
+
     return (
       <div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), aspectRatio: '16 / 9' }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
 
@@ -515,7 +521,14 @@ class Audio extends PureComponent {
           lang={lang}
         />
 
-        <SpoilerButton hidden={revealed || editable} sensitive={sensitive} onClick={this.toggleReveal} matchedFilters={matchedFilters} />
+        <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
+          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
+            <span className='spoiler-button__overlay__label'>
+              {warning}
+              <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+            </span>
+          </button>
+        </div>
 
         {(revealed || editable) && <img
           src={this.props.poster}

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

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import { debounce } from 'lodash';
+
+import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'mastodon/actions/bookmarks';
+import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
+import ColumnHeader from 'mastodon/components/column_header';
+import StatusList from 'mastodon/components/status_list';
+import Column from 'mastodon/features/ui/components/column';
+import { getStatusList } from 'mastodon/selectors';
+
+const messages = defineMessages({
+  heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
+});
+
+const mapStateToProps = state => ({
+  statusIds: getStatusList(state, 'bookmarks'),
+  isLoading: state.getIn(['status_lists', 'bookmarks', 'isLoading'], true),
+  hasMore: !!state.getIn(['status_lists', 'bookmarks', 'next']),
+});
+
+class Bookmarks extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    statusIds: ImmutablePropTypes.list.isRequired,
+    intl: PropTypes.object.isRequired,
+    columnId: PropTypes.string,
+    multiColumn: PropTypes.bool,
+    hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
+  };
+
+  UNSAFE_componentWillMount () {
+    this.props.dispatch(fetchBookmarkedStatuses());
+  }
+
+  handlePin = () => {
+    const { columnId, dispatch } = this.props;
+
+    if (columnId) {
+      dispatch(removeColumn(columnId));
+    } else {
+      dispatch(addColumn('BOOKMARKS', {}));
+    }
+  };
+
+  handleMove = (dir) => {
+    const { columnId, dispatch } = this.props;
+    dispatch(moveColumn(columnId, dir));
+  };
+
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  };
+
+  setRef = c => {
+    this.column = c;
+  };
+
+  handleLoadMore = debounce(() => {
+    this.props.dispatch(expandBookmarkedStatuses());
+  }, 300, { leading: true });
+
+  render () {
+    const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
+    const pinned = !!columnId;
+
+    const emptyMessage = <FormattedMessage id='empty_column.bookmarked_statuses' defaultMessage="You don't have any bookmarked posts yet. When you bookmark one, it will show up here." />;
+
+    return (
+      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.heading)}>
+        <ColumnHeader
+          icon='bookmarks'
+          iconComponent={BookmarksIcon}
+          title={intl.formatMessage(messages.heading)}
+          onPin={this.handlePin}
+          onMove={this.handleMove}
+          onClick={this.handleHeaderClick}
+          pinned={pinned}
+          multiColumn={multiColumn}
+        />
+
+        <StatusList
+          trackScroll={!pinned}
+          statusIds={statusIds}
+          scrollKey={`bookmarked_statuses-${columnId}`}
+          hasMore={hasMore}
+          isLoading={isLoading}
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={emptyMessage}
+          bindToDocument={!multiColumn}
+        />
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+          <meta name='robots' content='noindex' />
+        </Helmet>
+      </Column>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(injectIntl(Bookmarks));

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

@@ -1,116 +0,0 @@
-import { useEffect, useRef, useCallback } from 'react';
-
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-
-import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
-import {
-  fetchBookmarkedStatuses,
-  expandBookmarkedStatuses,
-} from 'mastodon/actions/bookmarks';
-import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
-import { Column } from 'mastodon/components/column';
-import type { ColumnRef } from 'mastodon/components/column';
-import { ColumnHeader } from 'mastodon/components/column_header';
-import StatusList from 'mastodon/components/status_list';
-import { getStatusList } from 'mastodon/selectors';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-const messages = defineMessages({
-  heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
-});
-
-const Bookmarks: React.FC<{
-  columnId: string;
-  multiColumn: boolean;
-}> = ({ columnId, multiColumn }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const columnRef = useRef<ColumnRef>(null);
-  const statusIds = useAppSelector((state) =>
-    getStatusList(state, 'bookmarks'),
-  );
-  const isLoading = useAppSelector(
-    (state) =>
-      state.status_lists.getIn(['bookmarks', 'isLoading'], true) as boolean,
-  );
-  const hasMore = useAppSelector(
-    (state) => !!state.status_lists.getIn(['bookmarks', 'next']),
-  );
-
-  useEffect(() => {
-    dispatch(fetchBookmarkedStatuses());
-  }, [dispatch]);
-
-  const handlePin = useCallback(() => {
-    if (columnId) {
-      dispatch(removeColumn(columnId));
-    } else {
-      dispatch(addColumn('BOOKMARKS', {}));
-    }
-  }, [dispatch, columnId]);
-
-  const handleMove = useCallback(
-    (dir: number) => {
-      dispatch(moveColumn(columnId, dir));
-    },
-    [dispatch, columnId],
-  );
-
-  const handleHeaderClick = useCallback(() => {
-    columnRef.current?.scrollTop();
-  }, []);
-
-  const handleLoadMore = useCallback(() => {
-    dispatch(expandBookmarkedStatuses());
-  }, [dispatch]);
-
-  const pinned = !!columnId;
-
-  const emptyMessage = (
-    <FormattedMessage
-      id='empty_column.bookmarked_statuses'
-      defaultMessage="You don't have any bookmarked posts yet. When you bookmark one, it will show up here."
-    />
-  );
-
-  return (
-    <Column
-      bindToDocument={!multiColumn}
-      ref={columnRef}
-      label={intl.formatMessage(messages.heading)}
-    >
-      <ColumnHeader
-        icon='bookmarks'
-        iconComponent={BookmarksIcon}
-        title={intl.formatMessage(messages.heading)}
-        onPin={handlePin}
-        onMove={handleMove}
-        onClick={handleHeaderClick}
-        pinned={pinned}
-        multiColumn={multiColumn}
-      />
-
-      <StatusList
-        trackScroll={!pinned}
-        statusIds={statusIds}
-        scrollKey={`bookmarked_statuses-${columnId}`}
-        hasMore={hasMore}
-        isLoading={isLoading}
-        onLoadMore={handleLoadMore}
-        emptyMessage={emptyMessage}
-        bindToDocument={!multiColumn}
-        timelineId='bookmarks'
-      />
-
-      <Helmet>
-        <title>{intl.formatMessage(messages.heading)}</title>
-        <meta name='robots' content='noindex' />
-      </Helmet>
-    </Column>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Bookmarks;

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

@@ -2,82 +2,64 @@ import { useMemo } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { useDispatch } from 'react-redux';
+
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { openModal } from 'mastodon/actions/modal';
-import { Dropdown } from 'mastodon/components/dropdown_menu';
-import { useAppDispatch } from 'mastodon/store';
+import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
-  preferences: {
-    id: 'navigation_bar.preferences',
-    defaultMessage: 'Preferences',
-  },
-  follow_requests: {
-    id: 'navigation_bar.follow_requests',
-    defaultMessage: 'Follow requests',
-  },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
   lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
-  followed_tags: {
-    id: 'navigation_bar.followed_tags',
-    defaultMessage: 'Followed hashtags',
-  },
+  followed_tags: { id: 'navigation_bar.followed_tags', defaultMessage: 'Followed hashtags' },
   blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
-  domain_blocks: {
-    id: 'navigation_bar.domain_blocks',
-    defaultMessage: 'Blocked domains',
-  },
+  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' },
   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
 });
 
-export const ActionBar: React.FC = () => {
-  const dispatch = useAppDispatch();
+export const ActionBar = () => {
+  const dispatch = useDispatch();
   const intl = useIntl();
 
   const menu = useMemo(() => {
     const handleLogoutClick = () => {
-      dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT', modalProps: {} }));
+      dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
     };
 
-    return [
-      {
-        text: intl.formatMessage(messages.edit_profile),
-        href: '/settings/profile',
-      },
-      {
-        text: intl.formatMessage(messages.preferences),
-        href: '/settings/preferences',
-      },
+    return ([
+      { text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' },
+      { text: intl.formatMessage(messages.preferences), href: '/settings/preferences' },
       { text: intl.formatMessage(messages.pins), to: '/pinned' },
       null,
-      {
-        text: intl.formatMessage(messages.follow_requests),
-        to: '/follow_requests',
-      },
+      { text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' },
       { text: intl.formatMessage(messages.favourites), to: '/favourites' },
       { text: intl.formatMessage(messages.bookmarks), to: '/bookmarks' },
       { text: intl.formatMessage(messages.lists), to: '/lists' },
-      {
-        text: intl.formatMessage(messages.followed_tags),
-        to: '/followed_tags',
-      },
+      { text: intl.formatMessage(messages.followed_tags), to: '/followed_tags' },
       null,
       { text: intl.formatMessage(messages.mutes), to: '/mutes' },
       { text: intl.formatMessage(messages.blocks), to: '/blocks' },
-      {
-        text: intl.formatMessage(messages.domain_blocks),
-        to: '/domain_blocks',
-      },
+      { text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' },
       { text: intl.formatMessage(messages.filters), href: '/filters' },
       null,
       { text: intl.formatMessage(messages.logout), action: handleLogoutClick },
-    ];
+    ]);
   }, [intl, dispatch]);
 
-  return <Dropdown items={menu} icon='bars' iconComponent={MoreHorizIcon} />;
+  return (
+    <DropdownMenuContainer
+      items={menu}
+      icon='bars'
+      iconComponent={MoreHorizIcon}
+      size={24}
+      direction='right'
+    />
+  );
 };

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

@@ -20,6 +20,7 @@ import PollButtonContainer from '../containers/poll_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
+import WarningContainer from '../containers/warning_container';
 import { countableText } from '../util/counter';
 
 import { CharacterCounter } from './character_counter';
@@ -29,7 +30,6 @@ import { NavigationBar } from './navigation_bar';
 import { PollForm } from "./poll_form";
 import { ReplyIndicator } from './reply_indicator';
 import { UploadForm } from './upload_form';
-import { Warning } from './warning';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -233,7 +233,7 @@ class ComposeForm extends ImmutablePureComponent {
       <form className='compose-form' onSubmit={this.handleSubmit}>
         <ReplyIndicator />
         {!withoutNavigation && <NavigationBar />}
-        <Warning />
+        <WarningContainer />
 
         <div className={classNames('compose-form__highlightable', { active: highlighted })} ref={this.setRef}>
           <div className='compose-form__scrollable'>