Merge upstream

Signed-off-by: 무라쿠모 <space@psec.dev>
2024-08-05 22:31:05 +09:00 · 2024-08-05 22:31:05 +09:00 · bacecff2ab
commit bacecff2ab
parent 6edc95c119 4778c61349
571 changed files with 14059 additions and 3561 deletions
--- a/.env.production.sample
+++ b/.env.production.sample
@ -1,5 +1,5 @@
 # This is a sample configuration file. You can generate your configuration
-# with the `rake mastodon:setup` interactive setup wizard, but to customize
+# with the `bundle exec rails mastodon:setup` interactive setup wizard, but to customize
 # your setup even further, you'll need to edit it manually. This sample does
 # not demonstrate all available configuration options. Please look at
 # https://docs.joinmastodon.org/admin/config/ for the full documentation.
@ -68,7 +68,7 @@ DB_PORT=5432

 # Secrets
 # -------
-# Generate each with the `RAILS_ENV=production bundle exec rake secret` task (`docker-compose run --rm web bundle exec rake secret` if you use docker compose)
+# Generate each with the `RAILS_ENV=production bundle exec rails secret` task (`docker-compose run --rm web bundle exec rails secret` if you use docker compose)
 # -------
 SECRET_KEY_BASE=
 OTP_SECRET=
@ -76,7 +76,7 @@ OTP_SECRET=

 # Web Push
 # --------
-# Generate with `rake mastodon:webpush:generate_vapid_key` (first is the private key, second is the public one)
+# Generate with `bundle exec rails mastodon:webpush:generate_vapid_key` (first is the private key, second is the public one)
 # You should only generate this once per instance. If you later decide to change it, all push subscription will
 # be invalidated, requiring the users to access the website again to resubscribe.
 # --------
--- a/.github/workflows/bundler-audit.yml
+++ b/.github/workflows/bundler-audit.yml
@ -1,8 +1,10 @@
 name: Bundler Audit
 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
+    branches:
+      - 'main'
+      - 'stable-*'
    paths:
      - 'Gemfile*'
      - '.ruby-version'
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@ -1,11 +1,15 @@
 name: 'CodeQL'

 on:
+  merge_group:
  push:
-    branches: ['main']
+    branches:
+      - 'main'
+      - 'stable-*'
  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: ['main']
+    branches:
+      - 'main'
+      - 'stable-*'
  schedule:
    - cron: '22 6 * * 1'

--- a/.github/workflows/format-check.yml
+++ b/.github/workflows/format-check.yml
@ -1,6 +1,10 @@
 name: Check formatting
 on:
+  merge_group:
  push:
+    branches:
+      - 'main'
+      - 'stable-*'
  pull_request:

 jobs:
--- a/.github/workflows/lint-css.yml
+++ b/.github/workflows/lint-css.yml
@ -1,9 +1,10 @@
 name: CSS Linting
 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
    paths:
      - 'package.json'
      - 'yarn.lock'
--- a/.github/workflows/lint-haml.yml
+++ b/.github/workflows/lint-haml.yml
@ -1,9 +1,10 @@
 name: Haml Linting
 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
    paths:
      - '.github/workflows/haml-lint-problem-matcher.json'
      - '.github/workflows/lint-haml.yml'
--- a/.github/workflows/lint-js.yml
+++ b/.github/workflows/lint-js.yml
@ -1,9 +1,10 @@
 name: JavaScript Linting
 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
    paths:
      - 'package.json'
      - 'yarn.lock'
--- a/.github/workflows/lint-ruby.yml
+++ b/.github/workflows/lint-ruby.yml
@ -1,9 +1,10 @@
 name: Ruby Linting
 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
    paths:
      - 'Gemfile*'
      - '.rubocop*.yml'
--- a/.github/workflows/test-js.yml
+++ b/.github/workflows/test-js.yml
@ -1,9 +1,10 @@
 name: JavaScript Testing
 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
    paths:
      - 'package.json'
      - 'yarn.lock'
--- a/.github/workflows/test-migrations.yml
+++ b/.github/workflows/test-migrations.yml
@ -1,29 +1,29 @@
 name: Historical data migration test

 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
+    paths:
+      - 'Gemfile*'
+      - '.ruby-version'
+      - '**/*.rb'
+      - '.github/workflows/test-migrations.yml'
+      - 'lib/tasks/tests.rake'
+
  pull_request:
+    paths:
+      - 'Gemfile*'
+      - '.ruby-version'
+      - '**/*.rb'
+      - '.github/workflows/test-migrations.yml'
+      - 'lib/tasks/tests.rake'

 jobs:
-  pre_job:
-    runs-on: ubuntu-latest
-
-    outputs:
-      should_skip: ${{ steps.skip_check.outputs.should_skip }}
-
-    steps:
-      - id: skip_check
-        uses: fkirc/skip-duplicate-actions@v5
-        with:
-          paths: '["Gemfile*", ".ruby-version", "**/*.rb", ".github/workflows/test-migrations.yml", "lib/tasks/tests.rake"]'
-
  test:
    runs-on: ubuntu-latest
-    needs: pre_job
-    if: needs.pre_job.outputs.should_skip != 'true'

    strategy:
      fail-fast: false
--- a/.github/workflows/test-ruby.yml
+++ b/.github/workflows/test-ruby.yml
@ -1,10 +1,11 @@
 name: Ruby Testing

 on:
+  merge_group:
  push:
-    branches-ignore:
-      - 'dependabot/**'
-      - 'renovate/**'
+    branches:
+      - 'main'
+      - 'stable-*'
  pull_request:

 env:
@ -223,7 +224,7 @@ jobs:
      - name: Load database schema
        run: './bin/rails db:create db:schema:load db:seed'

-      - run: bin/rspec --tag paperclip_processing
+      - run: bin/rspec --tag attachment_processing

      - name: Upload coverage reports to Codecov
        if: matrix.ruby-version == '.ruby-version'
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-20.15
+20.16
--- a/.rubocop_todo.yml
+++ b/.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.64.1.
+# using RuboCop version 1.65.0.
 # 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
@ -14,7 +14,7 @@ Lint/NonLocalExitFromIterator:
 Metrics/AbcSize:
  Max: 90

-# Configuration parameters: CountBlocks, Max.
+# Configuration parameters: CountBlocks, CountModifierForms, Max.
 Metrics/BlockNesting:
  Exclude:
    - 'lib/tasks/mastodon.rake'
--- a/.ruby-version
+++ b/.ruby-version
@ -1 +1 @@
-3.3.3
+3.3.4
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -50,6 +50,11 @@ You can contribute in the following ways:

 If your contributions are accepted into Mastodon, you can request to be paid through [our OpenCollective](https://opencollective.com/mastodon).

+Please review the org-level [contribution guidelines] for high-level acceptance
+criteria guidance.
+
+[contribution guidelines]: https://github.com/mastodon/.github/blob/main/CONTRIBUTING.md
+
 ## API Changes and Additions

 Please note that any changes or additions made to the API should have an accompanying pull request on [our documentation repository](https://github.com/mastodon/documentation).
--- a/6
+++ b/6
@ -12,7 +12,7 @@ ARG BUILDPLATFORM=${BUILDPLATFORM}

 # Ruby image to use for base image, change with [--build-arg RUBY_VERSION="3.3.x"]
 # renovate: datasource=docker depName=docker.io/ruby
-ARG RUBY_VERSION="3.3.3"
+ARG RUBY_VERSION="3.3.4"
 # # Node version to use in base image, change with [--build-arg NODE_MAJOR_VERSION="20"]
 # renovate: datasource=node-version depName=node
 ARG NODE_MAJOR_VERSION="20"
@ -67,7 +67,9 @@ ENV \
 # Optimize jemalloc 5.x performance
  MALLOC_CONF="narenas:2,background_thread:true,thp:never,dirty_decay_ms:1000,muzzy_decay_ms:0" \
 # Enable libvips, should not be changed
-  MASTODON_USE_LIBVIPS=true
+  MASTODON_USE_LIBVIPS=true \
+# Sidekiq will touch tmp/sidekiq_process_has_started_and_will_begin_processing_jobs to indicate it is ready. This can be used for a readiness check in Kubernetes
+  MASTODON_SIDEKIQ_READY_FILENAME=sidekiq_process_has_started_and_will_begin_processing_jobs

 # Set default shell used for running commands
 SHELL ["/bin/bash", "-o", "pipefail", "-o", "errexit", "-c"]
--- a/4
+++ b/4
@ -88,7 +88,7 @@ gem 'sidekiq-unique-jobs', '~> 7.1'
 gem 'simple_form', '~> 5.2'
 gem 'simple-navigation', '~> 4.4'
 gem 'stoplight', '~> 4.1'
-gem 'strong_migrations', '1.8.0'
+gem 'strong_migrations'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2023'
@ -100,7 +100,7 @@ gem 'json-ld'
 gem 'json-ld-preloaded', '~> 3.2'
 gem 'rdf-normalize', '~> 0.5'

-gem 'opentelemetry-api', '~> 1.2.5'
+gem 'opentelemetry-api', '~> 1.3.0'

 group :opentelemetry do
  gem 'opentelemetry-exporter-otlp', '~> 0.28.0', require: false
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -159,7 +159,7 @@ GEM
    case_transform (0.2)
      activesupport
    cbor (0.5.9.8)
-    charlock_holmes (0.7.8)
+    charlock_holmes (0.7.9)
    chewy (7.6.0)
      activesupport (>= 5.2)
      elasticsearch (>= 7.14.0, < 8)
@ -180,7 +180,7 @@ GEM
    css_parser (1.17.1)
      addressable
    csv (3.3.0)
-    database_cleaner-active_record (2.1.0)
+    database_cleaner-active_record (2.2.0)
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
@ -222,16 +222,16 @@ GEM
    elasticsearch-transport (7.17.10)
      faraday (>= 1, < 3)
      multi_json
-    email_spec (2.2.2)
+    email_spec (2.3.0)
      htmlentities (~> 4.3.3)
-      launchy (~> 2.1)
+      launchy (>= 2.1, < 4.0)
      mail (~> 2.7)
    erubi (1.13.0)
    et-orbi (1.2.11)
      tzinfo
    excon (0.110.0)
    fabrication (2.31.0)
-    faker (3.4.1)
+    faker (3.4.2)
      i18n (>= 1.8.11, < 2)
    faraday (1.10.3)
      faraday-em_http (~> 1.0)
@ -289,7 +289,7 @@ GEM
      ruby-progressbar (~> 1.4)
    globalid (1.2.1)
      activesupport (>= 6.1)
-    google-protobuf (3.25.3)
+    google-protobuf (3.25.4)
    googleapis-common-protos-types (1.14.0)
      google-protobuf (~> 3.18)
    haml (6.3.0)
@ -346,7 +346,7 @@ GEM
      activesupport (>= 3.0)
      nokogiri (>= 1.6)
    io-console (0.7.2)
-    irb (1.13.2)
+    irb (1.14.0)
      rdoc (>= 4.0.0)
      reline (>= 0.4.2)
    jmespath (1.6.2)
@ -367,7 +367,7 @@ GEM
    json-ld-preloaded (3.3.0)
      json-ld (~> 3.3)
      rdf (~> 3.3)
-    json-schema (4.3.0)
+    json-schema (4.3.1)
      addressable (>= 2.8)
    jsonapi-renderer (0.2.2)
    jwt (2.7.1)
@ -440,7 +440,7 @@ GEM
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.12)
+    net-imap (0.4.14)
      date
      net-protocol
    net-ldap (0.19.0)
@ -492,10 +492,10 @@ GEM
    openssl (3.2.0)
    openssl-signature_algorithm (1.3.0)
      openssl (> 2.0)
-    opentelemetry-api (1.2.5)
+    opentelemetry-api (1.3.0)
    opentelemetry-common (0.20.1)
      opentelemetry-api (~> 1.0)
-    opentelemetry-exporter-otlp (0.28.0)
+    opentelemetry-exporter-otlp (0.28.1)
      google-protobuf (>= 3.18)
      googleapis-common-protos-types (~> 1.3)
      opentelemetry-api (~> 1.1)
@ -512,14 +512,14 @@ GEM
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
      opentelemetry-instrumentation-rack (~> 0.21)
-    opentelemetry-instrumentation-action_view (0.7.0)
+    opentelemetry-instrumentation-action_view (0.7.1)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-active_support (~> 0.1)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-active_job (0.7.2)
+    opentelemetry-instrumentation-active_job (0.7.3)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-active_model_serializers (0.20.1)
+    opentelemetry-instrumentation-active_model_serializers (0.20.2)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
    opentelemetry-instrumentation-active_record (0.7.2)
@ -531,32 +531,32 @@ GEM
    opentelemetry-instrumentation-base (0.22.3)
      opentelemetry-api (~> 1.0)
      opentelemetry-registry (~> 0.1)
-    opentelemetry-instrumentation-concurrent_ruby (0.21.3)
+    opentelemetry-instrumentation-concurrent_ruby (0.21.4)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-excon (0.22.3)
+    opentelemetry-instrumentation-excon (0.22.4)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-faraday (0.24.5)
+    opentelemetry-instrumentation-faraday (0.24.6)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-http (0.23.3)
+    opentelemetry-instrumentation-http (0.23.4)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-http_client (0.22.6)
+    opentelemetry-instrumentation-http_client (0.22.7)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-net_http (0.22.6)
+    opentelemetry-instrumentation-net_http (0.22.7)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-pg (0.27.3)
+    opentelemetry-instrumentation-pg (0.27.4)
      opentelemetry-api (~> 1.0)
      opentelemetry-helpers-sql-obfuscation
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-rack (0.24.5)
+    opentelemetry-instrumentation-rack (0.24.6)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-rails (0.31.0)
+    opentelemetry-instrumentation-rails (0.31.1)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-action_mailer (~> 0.1.0)
      opentelemetry-instrumentation-action_pack (~> 0.9.0)
@ -565,33 +565,33 @@ GEM
      opentelemetry-instrumentation-active_record (~> 0.7.0)
      opentelemetry-instrumentation-active_support (~> 0.6.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-redis (0.25.6)
+    opentelemetry-instrumentation-redis (0.25.7)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-sidekiq (0.25.6)
+    opentelemetry-instrumentation-sidekiq (0.25.7)
      opentelemetry-api (~> 1.0)
      opentelemetry-instrumentation-base (~> 0.22.1)
    opentelemetry-registry (0.3.1)
      opentelemetry-api (~> 1.1)
-    opentelemetry-sdk (1.4.1)
+    opentelemetry-sdk (1.5.0)
      opentelemetry-api (~> 1.1)
      opentelemetry-common (~> 0.20)
      opentelemetry-registry (~> 0.2)
      opentelemetry-semantic_conventions
-    opentelemetry-semantic_conventions (1.10.0)
+    opentelemetry-semantic_conventions (1.10.1)
      opentelemetry-api (~> 1.0)
    orm_adapter (0.5.0)
    ox (2.14.18)
    parallel (1.25.1)
-    parser (3.3.3.0)
+    parser (3.3.4.0)
      ast (~> 2.4.1)
      racc
    parslet (2.0.0)
    pastel (0.8.0)
      tty-color (~> 0.5)
    pg (1.5.6)
-    pghero (3.5.0)
-      activerecord (>= 6)
+    pghero (3.6.0)
+      activerecord (>= 6.1)
    premailer (1.23.0)
      addressable
      css_parser (>= 1.12.0)
@ -607,7 +607,7 @@ GEM
      railties (>= 7.0.0)
    psych (5.1.2)
      stringio
-    public_suffix (6.0.0)
+    public_suffix (6.0.1)
    puma (6.4.2)
      nio4r (~> 2.0)
    pundit (2.3.2)
@ -696,7 +696,7 @@ GEM
    responders (3.1.1)
      actionpack (>= 5.2)
      railties (>= 5.2)
-    rexml (3.3.1)
+    rexml (3.3.2)
      strscan
    rotp (6.3.0)
    rouge (4.2.1)
@ -733,13 +733,13 @@ GEM
      rspec-mocks (~> 3.0)
      sidekiq (>= 5, < 8)
    rspec-support (3.13.1)
-    rubocop (1.64.1)
+    rubocop (1.65.0)
      json (~> 2.3)
      language_server-protocol (>= 3.17.0)
      parallel (~> 1.10)
      parser (>= 3.3.0.2)
      rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
+      regexp_parser (>= 2.4, < 3.0)
      rexml (>= 3.2.5, < 4.0)
      rubocop-ast (>= 1.31.1, < 2.0)
      ruby-progressbar (~> 1.7)
@ -756,7 +756,7 @@ GEM
      rack (>= 1.1)
      rubocop (>= 1.33.0, < 2.0)
      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.0.2)
+    rubocop-rspec (3.0.3)
      rubocop (~> 1.61)
    rubocop-rspec_rails (2.30.0)
      rubocop (~> 1.61)
@ -766,8 +766,9 @@ GEM
    ruby-saml (1.16.0)
      nokogiri (>= 1.13.10)
      rexml
-    ruby-vips (2.2.1)
+    ruby-vips (2.2.2)
      ffi (~> 1.12)
+      logger
    ruby2_keywords (0.0.5)
    rubyzip (2.3.2)
    rufus-scheduler (3.9.1)
@ -780,7 +781,7 @@ GEM
    scenic (1.8.0)
      activerecord (>= 4.0.0)
      railties (>= 4.0.0)
-    selenium-webdriver (4.22.0)
+    selenium-webdriver (4.23.0)
      base64 (~> 0.2)
      logger (~> 1.4)
      rexml (~> 3.2, >= 3.2.5)
@ -793,10 +794,10 @@ GEM
      redis (>= 4.5.0, < 5)
    sidekiq-bulk (0.2.0)
      sidekiq
-    sidekiq-scheduler (5.0.3)
+    sidekiq-scheduler (5.0.5)
      rufus-scheduler (~> 3.2)
      sidekiq (>= 6, < 8)
-      tilt (>= 1.4.0)
+      tilt (>= 1.4.0, < 3)
    sidekiq-unique-jobs (7.1.33)
      brpoplpush-redis_script (> 0.1.1, <= 2.0.0)
      concurrent-ruby (~> 1.0, >= 1.0.5)
@ -820,8 +821,8 @@ GEM
    stoplight (4.1.0)
      redlock (~> 1.0)
    stringio (3.1.1)
-    strong_migrations (1.8.0)
-      activerecord (>= 5.2)
+    strong_migrations (2.0.0)
+      activerecord (>= 6.1)
    strscan (3.1.0)
    swd (1.3.0)
      activesupport (>= 3)
@ -893,7 +894,7 @@ GEM
      railties (>= 5.2)
      semantic_range (>= 2.3.0)
    webrick (1.8.1)
-    websocket (1.2.10)
+    websocket (1.2.11)
    websocket-driver (0.7.6)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
@ -982,7 +983,7 @@ DEPENDENCIES
  omniauth-rails_csrf_protection (~> 1.0)
  omniauth-saml (~> 2.0)
  omniauth_openid_connect (~> 0.6.1)
-  opentelemetry-api (~> 1.2.5)
+  opentelemetry-api (~> 1.3.0)
  opentelemetry-exporter-otlp (~> 0.28.0)
  opentelemetry-instrumentation-active_job (~> 0.7.1)
  opentelemetry-instrumentation-active_model_serializers (~> 0.20.1)
@ -1045,7 +1046,7 @@ DEPENDENCIES
  simplecov-lcov (~> 0.8)
  stackprof
  stoplight (~> 4.1)
-  strong_migrations (= 1.8.0)
+  strong_migrations
  test-prof
  thor (~> 1.2)
  tty-prompt (~> 0.23)
--- a/app/controllers/admin/instances_controller.rb
+++ b/app/controllers/admin/instances_controller.rb
@ -13,6 +13,7 @@ module Admin
    def show
      authorize :instance, :show?
      @time_period = (6.days.ago.to_date...Time.now.utc.to_date)
+      @action_logs = Admin::ActionLogFilter.new(target_domain: @instance.domain).results.limit(5)
    end

    def destroy
--- a/app/controllers/api/v1/admin/domain_allows_controller.rb
+++ b/app/controllers/api/v1/admin/domain_allows_controller.rb
@ -47,18 +47,13 @@ class Api::V1::Admin::DomainAllowsController < Api::BaseController
  private

  def set_domain_allows
-    @domain_allows = filtered_domain_allows.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
+    @domain_allows = DomainAllow.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
  end

  def set_domain_allow
    @domain_allow = DomainAllow.find(params[:id])
  end

-  def filtered_domain_allows
-    # TODO: no filtering yet
-    DomainAllow.all
-  end
-
  def next_path
    api_v1_admin_domain_allows_url(pagination_params(max_id: pagination_max_id)) if records_continue?
  end
--- a/app/controllers/api/v1/admin/domain_blocks_controller.rb
+++ b/app/controllers/api/v1/admin/domain_blocks_controller.rb
@ -59,18 +59,13 @@ class Api::V1::Admin::DomainBlocksController < Api::BaseController
  end

  def set_domain_blocks
-    @domain_blocks = filtered_domain_blocks.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
+    @domain_blocks = DomainBlock.order(id: :desc).to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
  end

  def set_domain_block
    @domain_block = DomainBlock.find(params[:id])
  end

-  def filtered_domain_blocks
-    # TODO: no filtering yet
-    DomainBlock.all
-  end
-
  def domain_block_params
    params.permit(:severity, :reject_media, :reject_reports, :private_comment, :public_comment, :obfuscate)
  end
--- a/app/controllers/api/v1/notifications/requests_controller.rb
+++ b/app/controllers/api/v1/notifications/requests_controller.rb
@ -28,14 +28,14 @@ class Api::V1::Notifications::RequestsController < Api::BaseController
  end

  def dismiss
-    @request.update!(dismissed: true)
+    @request.destroy!
    render_empty
  end

  private

  def load_requests
-    requests = NotificationRequest.where(account: current_account).where(dismissed: truthy_param?(:dismissed) || false).includes(:last_status, from_account: [:account_stat, :user]).to_a_paginated_by_id(
+    requests = NotificationRequest.where(account: current_account).includes(:last_status, from_account: [:account_stat, :user]).to_a_paginated_by_id(
      limit_param(DEFAULT_ACCOUNTS_LIMIT),
      params_slice(:max_id, :since_id, :min_id)
    )
@ -68,8 +68,4 @@ class Api::V1::Notifications::RequestsController < Api::BaseController
  def pagination_since_id
    @requests.first.id
  end
-
-  def pagination_params(core_params)
-    params.slice(:dismissed).permit(:dismissed).merge(core_params)
-  end
 end
--- a/app/controllers/api/v1/polls/votes_controller.rb
+++ b/app/controllers/api/v1/polls/votes_controller.rb
@ -8,7 +8,7 @@ class Api::V1::Polls::VotesController < Api::BaseController
  before_action :set_poll

  def create
-    VoteService.new.call(current_account, @poll, vote_params[:choices])
+    VoteService.new.call(current_account, @poll, vote_params)
    render json: @poll, serializer: REST::PollSerializer
  end

@ -22,6 +22,6 @@ class Api::V1::Polls::VotesController < Api::BaseController
  end

  def vote_params
-    params.permit(choices: [])
+    params.require(:choices)
  end
 end
--- a/app/controllers/api/v1/reports_controller.rb
+++ b/app/controllers/api/v1/reports_controller.rb
@ -10,7 +10,7 @@ class Api::V1::ReportsController < Api::BaseController
    @report = ReportService.new.call(
      current_account,
      reported_account,
-      report_params
+      report_params.merge(application: doorkeeper_token.application)
    )

    render json: @report, serializer: REST::ReportSerializer
--- a/app/controllers/api/v2_alpha/notifications_controller.rb
+++ b/app/controllers/api/v2_alpha/notifications_controller.rb
@ -12,10 +12,27 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
    with_read_replica do
      @notifications = load_notifications
      @group_metadata = load_group_metadata
+      @grouped_notifications = load_grouped_notifications
      @relationships = StatusRelationshipsPresenter.new(target_statuses_from_notifications, current_user&.account_id)
+      @sample_accounts = @grouped_notifications.flat_map(&:sample_accounts)
+
+      # Preload associations to avoid N+1s
+      ActiveRecord::Associations::Preloader.new(records: @sample_accounts, associations: [:account_stat, { user: :role }]).call
    end

-    render json: @notifications.map { |notification| NotificationGroup.from_notification(notification, max_id: @group_metadata.dig(notification.group_key, :max_id)) }, each_serializer: REST::NotificationGroupSerializer, relationships: @relationships, group_metadata: @group_metadata
+    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#index rendering') do |span|
+      statuses = @grouped_notifications.filter_map { |group| group.target_status&.id }
+
+      span.add_attributes(
+        'app.notification_grouping.count' => @grouped_notifications.size,
+        'app.notification_grouping.sample_account.count' => @sample_accounts.size,
+        'app.notification_grouping.sample_account.unique_count' => @sample_accounts.pluck(:id).uniq.size,
+        'app.notification_grouping.status.count' => statuses.size,
+        'app.notification_grouping.status.unique_count' => statuses.uniq.size
+      )
+
+      render json: @grouped_notifications, each_serializer: REST::NotificationGroupSerializer, relationships: @relationships, group_metadata: @group_metadata
+    end
  end

  def show
@ -36,25 +53,35 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
  private

  def load_notifications
-    notifications = browserable_account_notifications.includes(from_account: [:account_stat, :user]).to_a_grouped_paginated_by_id(
-      limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
-      params_slice(:max_id, :since_id, :min_id)
-    )
+    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_notifications') do
+      notifications = browserable_account_notifications.includes(from_account: [:account_stat, :user]).to_a_grouped_paginated_by_id(
+        limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
+        params_slice(:max_id, :since_id, :min_id)
+      )

-    Notification.preload_cache_collection_target_statuses(notifications) do |target_statuses|
-      preload_collection(target_statuses, Status)
+      Notification.preload_cache_collection_target_statuses(notifications) do |target_statuses|
+        preload_collection(target_statuses, Status)
+      end
    end
  end

  def load_group_metadata
    return {} if @notifications.empty?

-    browserable_account_notifications
-      .where(group_key: @notifications.filter_map(&:group_key))
-      .where(id: (@notifications.last.id)..(@notifications.first.id))
-      .group(:group_key)
-      .pluck(:group_key, 'min(notifications.id) as min_id', 'max(notifications.id) as max_id', 'max(notifications.created_at) as latest_notification_at')
-      .to_h { |group_key, min_id, max_id, latest_notification_at| [group_key, { min_id: min_id, max_id: max_id, latest_notification_at: latest_notification_at }] }
+    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_group_metadata') do
+      browserable_account_notifications
+        .where(group_key: @notifications.filter_map(&:group_key))
+        .where(id: (@notifications.last.id)..(@notifications.first.id))
+        .group(:group_key)
+        .pluck(:group_key, 'min(notifications.id) as min_id', 'max(notifications.id) as max_id', 'max(notifications.created_at) as latest_notification_at')
+        .to_h { |group_key, min_id, max_id, latest_notification_at| [group_key, { min_id: min_id, max_id: max_id, latest_notification_at: latest_notification_at }] }
+    end
+  end
+
+  def load_grouped_notifications
+    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_grouped_notifications') do
+      @notifications.map { |notification| NotificationGroup.from_notification(notification, max_id: @group_metadata.dig(notification.group_key, :max_id)) }
+    end
  end

  def browserable_account_notifications
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@ -23,7 +23,6 @@ class ApplicationController < ActionController::Base
  helper_method :current_theme
  helper_method :single_user_mode?
  helper_method :use_seamless_external_login?
-  helper_method :omniauth_only?
  helper_method :sso_account_settings
  helper_method :limited_federation_mode?
  helper_method :body_class_string
@ -140,10 +139,6 @@ class ApplicationController < ActionController::Base
    Devise.pam_authentication || Devise.ldap_authentication
  end

-  def omniauth_only?
-    ENV['OMNIAUTH_ONLY'] == 'true'
-  end
-
  def sso_account_settings
    ENV.fetch('SSO_ACCOUNT_SETTINGS', nil)
  end
--- a/app/helpers/theme_helper.rb
+++ b/app/helpers/theme_helper.rb
@ -5,8 +5,10 @@ module ThemeHelper
    flavour, theme = flavour_and_skin

    if theme == 'system'
-      stylesheet_pack_tag("skins/#{flavour}/mastodon-light", media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') +
-        stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+      ''.html_safe.tap do |tags|
+        tags << stylesheet_pack_tag("skins/#{flavour}/mastodon-light", media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
+        tags << stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+      end
    else
      stylesheet_pack_tag "skins/#{flavour}/#{theme}", media: 'all', crossorigin: 'anonymous'
    end
@ -16,8 +18,10 @@ module ThemeHelper
    _, theme = flavour_and_skin

    if theme == 'system'
-      tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:dark], media: '(prefers-color-scheme: dark)') +
-        tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
+      ''.html_safe.tap do |tags|
+        tags << tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:dark], media: '(prefers-color-scheme: dark)')
+        tags << tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
+      end
    else
      tag.meta name: 'theme-color', content: theme_color_for(theme)
    end
--- a/app/javascript/entrypoints/public.tsx
+++ b/app/javascript/entrypoints/public.tsx
@ -316,8 +316,8 @@ function loaded() {

      const message =
        statusEl.dataset.spoiler === 'expanded'
-          ? localeData['status.show_less'] ?? 'Show less'
-          : localeData['status.show_more'] ?? 'Show more';
+          ? (localeData['status.show_less'] ?? 'Show less')
+          : (localeData['status.show_more'] ?? 'Show more');
      spoilerLink.textContent = new IntlMessageFormat(
        message,
        locale,
--- a/app/javascript/flavours/glitch/actions/accounts.js
+++ b/app/javascript/flavours/glitch/actions/accounts.js
@ -1,16 +1,25 @@
-import api, { getLinks } from '../api';
+import {browserHistory} from 'flavours/glitch/components/router';
+
+import api, {getLinks} from '../api';

 import {
-  followAccountSuccess, unfollowAccountSuccess,
-  authorizeFollowRequestSuccess, rejectFollowRequestSuccess,
-  followAccountRequest, followAccountFail,
-  unfollowAccountRequest, unfollowAccountFail,
-  muteAccountSuccess, unmuteAccountSuccess,
-  blockAccountSuccess, unblockAccountSuccess,
-  pinAccountSuccess, unpinAccountSuccess,
+  authorizeFollowRequestSuccess,
+  blockAccountSuccess,
  fetchRelationshipsSuccess,
+  followAccountFail,
+  followAccountRequest,
+  followAccountSuccess,
+  muteAccountSuccess,
+  pinAccountSuccess,
+  rejectFollowRequestSuccess,
+  unblockAccountSuccess,
+  unfollowAccountFail,
+  unfollowAccountRequest,
+  unfollowAccountSuccess,
+  unmuteAccountSuccess,
+  unpinAccountSuccess,
 } from './accounts_typed';
-import { importFetchedAccount, importFetchedAccounts } from './importer';
+import {importFetchedAccount, importFetchedAccounts} from './importer';

 export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
 export const ACCOUNT_FETCH_SUCCESS = 'ACCOUNT_FETCH_SUCCESS';
@ -722,6 +731,16 @@ export const updateAccount = ({ displayName, note, avatar, header, discoverable,
  });
 };

+export const navigateToProfile = (accountId) => {
+  return (_dispatch, getState) => {
+    const acct = getState().accounts.getIn([accountId, 'acct']);
+
+    if (acct) {
+      browserHistory.push(`/@${acct}`);
+    }
+  };
+};
+
 export function fetchPinnedAccountsSuggestions(q) {
  return (dispatch) => {
    dispatch(fetchPinnedAccountsSuggestionsRequest());
--- a/app/javascript/flavours/glitch/actions/app.ts
+++ b/app/javascript/flavours/glitch/actions/app.ts
@ -1,6 +1,9 @@
-import { createAction } from '@reduxjs/toolkit';
+import {createAction} from '@reduxjs/toolkit';

-import type { LayoutType } from '../is_mobile';
+import type {LayoutType} from '../is_mobile';
+
+export const focusApp = createAction('APP_FOCUS');
+export const unfocusApp = createAction('APP_UNFOCUS');

 interface ChangeLayoutPayload {
  layout: LayoutType;
--- a/app/javascript/flavours/glitch/actions/compose.js
+++ b/app/javascript/flavours/glitch/actions/compose.js
@ -1,19 +1,20 @@
-import { defineMessages } from 'react-intl';
+import {defineMessages} from 'react-intl';

 import axios from 'axios';
-import { throttle } from 'lodash';
+import {throttle} from 'lodash';

 import api from 'flavours/glitch/api';
-import { search as emojiSearch } from 'flavours/glitch/features/emoji/emoji_mart_search_light';
-import { tagHistory } from 'flavours/glitch/settings';
-import { recoverHashtags } from 'flavours/glitch/utils/hashtag';
+import {browserHistory} from 'flavours/glitch/components/router';
+import {search as emojiSearch} from 'flavours/glitch/features/emoji/emoji_mart_search_light';
+import {tagHistory} from 'flavours/glitch/settings';
+import {recoverHashtags} from 'flavours/glitch/utils/hashtag';
 import resizeImage from 'flavours/glitch/utils/resize_image';

-import { showAlert, showAlertForError } from './alerts';
-import { useEmoji } from './emojis';
-import { importFetchedAccounts, importFetchedStatus } from './importer';
-import { openModal } from './modal';
-import { updateTimeline } from './timelines';
+import {showAlert, showAlertForError} from './alerts';
+import {useEmoji} from './emojis';
+import {importFetchedAccounts, importFetchedStatus} from './importer';
+import {openModal} from './modal';
+import {updateTimeline} from './timelines';

 /** @type {AbortController | undefined} */
 let fetchComposeSuggestionsAccountsController;
@ -94,9 +95,9 @@ const messages = defineMessages({
  saved: { id: 'compose.saved.body', defaultMessage: 'Post saved.' },
 });

-export const ensureComposeIsVisible = (getState, routerHistory) => {
+export const ensureComposeIsVisible = (getState) => {
  if (!getState().getIn(['compose', 'mounted'])) {
-    routerHistory.push('/publish');
+    browserHistory.push('/publish');
  }
 };

@ -117,7 +118,7 @@ export function changeCompose(text) {
  };
 }

-export function replyCompose(status, routerHistory) {
+export function replyCompose(status) {
  return (dispatch, getState) => {
    const prependCWRe = getState().getIn(['local_settings', 'prepend_cw_re']);
    dispatch({
@ -126,7 +127,19 @@ export function replyCompose(status, routerHistory) {
      prependCWRe: prependCWRe,
    });

-    ensureComposeIsVisible(getState, routerHistory);
+    ensureComposeIsVisible(getState);
+  };
+}
+
+export function replyComposeById(statusId) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const status = state.statuses.get(statusId);
+
+    if (status) {
+      const account = state.accounts.get(status.get('account'));
+      dispatch(replyCompose(status.set('account', account)));
+    }
  };
 }

@ -142,38 +155,44 @@ export function resetCompose() {
  };
 }

-export const focusCompose = (routerHistory, defaultText) => (dispatch, getState) => {
+export const focusCompose = (defaultText) => (dispatch, getState) => {
  dispatch({
    type: COMPOSE_FOCUS,
    defaultText,
  });

-  ensureComposeIsVisible(getState, routerHistory);
+  ensureComposeIsVisible(getState);
 };

-export function mentionCompose(account, routerHistory) {
+export function mentionCompose(account) {
  return (dispatch, getState) => {
    dispatch({
      type: COMPOSE_MENTION,
      account: account,
    });

-    ensureComposeIsVisible(getState, routerHistory);
+    ensureComposeIsVisible(getState);
  };
 }

-export function directCompose(account, routerHistory) {
+export function mentionComposeById(accountId) {
+  return (dispatch, getState) => {
+    dispatch(mentionCompose(getState().accounts.get(accountId)));
+  };
+}
+
+export function directCompose(account) {
  return (dispatch, getState) => {
    dispatch({
      type: COMPOSE_DIRECT,
      account: account,
    });

-    ensureComposeIsVisible(getState, routerHistory);
+    ensureComposeIsVisible(getState);
  };
 }

-export function submitCompose(routerHistory, overridePrivacy = null) {
+export function submitCompose(overridePrivacy = null) {
  return function (dispatch, getState) {
    let status     = getState().getIn(['compose', 'text'], '');
    const media    = getState().getIn(['compose', 'media_attachments']);
@ -230,11 +249,10 @@ export function submitCompose(routerHistory, overridePrivacy = null) {
        'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
      },
    }).then(function (response) {
-      if (routerHistory
-          && (routerHistory.location.pathname === '/publish' || routerHistory.location.pathname === '/statuses/new')
+      if ((browserHistory.location.pathname === '/publish' || browserHistory.location.pathname === '/statuses/new')
          && window.history.state
          && !getState().getIn(['compose', 'advanced_options', 'threaded_mode'])) {
-        routerHistory.goBack();
+        browserHistory.goBack();
      }

      dispatch(insertIntoTagHistory(response.data.tags, status));
@ -272,7 +290,7 @@ export function submitCompose(routerHistory, overridePrivacy = null) {
          message: statusId === null ? messages.published : messages.saved,
          action: messages.open,
          dismissAfter: 10000,
-          onClick: () => routerHistory.push(`/@${response.data.account.username}/${response.data.id}`),
+          onClick: () => browserHistory.push(`/@${response.data.account.username}/${response.data.id}`),
        }));
      }
    }).catch(function (error) {
@ -310,7 +328,7 @@ export function doodleSet(options) {

 export function uploadCompose(files) {
  return function (dispatch, getState) {
-    const uploadLimit = 4;
+    const uploadLimit = getState().getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments']);
    const media = getState().getIn(['compose', 'media_attachments']);
    const pending = getState().getIn(['compose', 'pending_media_attachments']);
    const progress = new Array(files.length).fill(0);
@ -330,7 +348,7 @@ export function uploadCompose(files) {
    dispatch(uploadComposeRequest());

    for (const [i, f] of Array.from(files).entries()) {
-      if (media.size + i > 3) break;
+      if (media.size + i > (uploadLimit - 1)) break;

      resizeImage(f).then(file => {
        const data = new FormData();
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@ -1,7 +1,11 @@
-import api, { getLinks } from '../api';
+import {boostModal, favouriteModal} from 'flavours/glitch/initial_state';

-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatus } from './importer';
+import api, {getLinks} from '../api';
+
+import {fetchRelationships} from './accounts';
+import {importFetchedAccounts, importFetchedStatus} from './importer';
+import {reblog, unreblog} from './interactions_typed';
+import {openModal} from './modal';

 export const REBLOGS_EXPAND_REQUEST = 'REBLOGS_EXPAND_REQUEST';
 export const REBLOGS_EXPAND_SUCCESS = 'REBLOGS_EXPAND_SUCCESS';
@ -443,6 +447,64 @@ export function unpinFail(status, error) {
  };
 }

+function toggleReblogWithoutConfirmation(status, privacy) {
+  return (dispatch) => {
+    if (status.get('reblogged')) {
+      dispatch(unreblog({ statusId: status.get('id') }));
+    } else {
+      dispatch(reblog({ statusId: status.get('id'), privacy }));
+    }
+  };
+}
+
+export function toggleReblog(statusId, skipModal = false) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let status = state.statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    // The reblog modal expects a pre-filled account in status
+    // TODO: fix this by having the reblog modal get a statusId and do the work itself
+    status = status.set('account', state.accounts.get(status.get('account')));
+
+    const missing_description_setting = state.getIn(['local_settings', 'confirm_boost_missing_media_description']);
+    const missing_description = status.get('media_attachments').some(item => !item.get('description'));
+    if (missing_description_setting && missing_description && !status.get('reblogged')) {
+      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)), missingMediaDescription: true } }));
+    } else if (boostModal && !skipModal) {
+      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)) } }));
+    } else {
+      dispatch(toggleReblogWithoutConfirmation(status));
+    }
+  };
+}
+
+export function toggleFavourite(statusId, skipModal = false) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let status = state.statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    // The favourite modal expects a pre-filled account in status
+    // TODO: fix this by having the reblog modal get a statusId and do the work itself
+    status = status.set('account', state.accounts.get(status.get('account')));
+
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      if (favouriteModal && !skipModal) {
+        dispatch(openModal({ modalType: 'FAVOURITE', modalProps: { status, onFavourite: (status) => dispatch(favourite(status)) } }));
+      } else {
+        dispatch(favourite(status));
+      }
+    }
+  };
+}
+
 export const addReaction = (statusId, name, url) => (dispatch, getState) => {
  const status = getState().get('statuses').get(statusId);
  let alreadyAdded = false;
--- a/app/javascript/flavours/glitch/actions/markers.ts
+++ b/app/javascript/flavours/glitch/actions/markers.ts
@ -1,12 +1,12 @@
-import { debounce } from 'lodash';
+import {debounce} from 'lodash';

-import type { MarkerJSON } from 'flavours/glitch/api_types/markers';
-import { getAccessToken } from 'flavours/glitch/initial_state';
-import type { AppDispatch, RootState } from 'flavours/glitch/store';
-import { createAppAsyncThunk } from 'flavours/glitch/store/typed_functions';
+import type {MarkerJSON} from 'flavours/glitch/api_types/markers';
+import {getAccessToken} from 'flavours/glitch/initial_state';
+import type {AppDispatch, RootState} from 'flavours/glitch/store';
+import {createAppAsyncThunk} from 'flavours/glitch/store/typed_functions';

 import api from '../api';
-import { compareId } from '../compare_id';
+import {compareId} from '../compare_id';

 export const synchronouslySubmitMarkers = createAppAsyncThunk(
  'markers/submit',
@ -75,9 +75,17 @@ interface MarkerParam {
 }

 function getLastNotificationId(state: RootState): string | undefined {
-  // @ts-expect-error state.notifications is not yet typed
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
-  return state.getIn(['notifications', 'lastReadId']);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+  const enableBeta = state.settings.getIn(
+    ['notifications', 'groupingBeta'],
+    false,
+  ) as boolean;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return enableBeta
+    ? state.notificationGroups.lastReadId
+    : // @ts-expect-error state.notifications is not yet typed
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      state.getIn(['notifications', 'lastReadId']);
 }

 const buildPostMarkersParams = (state: RootState) => {
--- a/app/javascript/flavours/glitch/actions/notification_groups.ts
+++ b/app/javascript/flavours/glitch/actions/notification_groups.ts
@ -0,0 +1,135 @@
+import {createAction} from '@reduxjs/toolkit';
+
+import {apiClearNotifications, apiFetchNotifications,} from 'flavours/glitch/api/notifications';
+import type {ApiAccountJSON} from 'flavours/glitch/api_types/accounts';
+import type {ApiNotificationGroupJSON, ApiNotificationJSON,} from 'flavours/glitch/api_types/notifications';
+import {allNotificationTypes} from 'flavours/glitch/api_types/notifications';
+import type {ApiStatusJSON} from 'flavours/glitch/api_types/statuses';
+import type {NotificationGap} from 'flavours/glitch/reducers/notification_groups';
+import {
+  selectSettingsNotificationsExcludedTypes,
+  selectSettingsNotificationsQuickFilterActive,
+} from 'flavours/glitch/selectors/settings';
+import type {AppDispatch} from 'flavours/glitch/store';
+import {createAppAsyncThunk, createDataLoadingThunk,} from 'flavours/glitch/store/typed_functions';
+
+import {importFetchedAccounts, importFetchedStatuses} from './importer';
+import {NOTIFICATIONS_FILTER_SET} from './notifications';
+import {saveSettings} from './settings';
+
+function excludeAllTypesExcept(filter: string) {
+  return allNotificationTypes.filter((item) => item !== filter);
+}
+
+function dispatchAssociatedRecords(
+  dispatch: AppDispatch,
+  notifications: ApiNotificationGroupJSON[] | ApiNotificationJSON[],
+) {
+  const fetchedAccounts: ApiAccountJSON[] = [];
+  const fetchedStatuses: ApiStatusJSON[] = [];
+
+  notifications.forEach((notification) => {
+    if ('sample_accounts' in notification) {
+      fetchedAccounts.push(...notification.sample_accounts);
+    }
+
+    if (notification.type === 'admin.report') {
+      fetchedAccounts.push(notification.report.target_account);
+    }
+
+    if (notification.type === 'moderation_warning') {
+      fetchedAccounts.push(notification.moderation_warning.target_account);
+    }
+
+    if ('status' in notification) {
+      fetchedStatuses.push(notification.status);
+    }
+  });
+
+  if (fetchedAccounts.length > 0)
+    dispatch(importFetchedAccounts(fetchedAccounts));
+
+  if (fetchedStatuses.length > 0)
+    dispatch(importFetchedStatuses(fetchedStatuses));
+}
+
+export const fetchNotifications = createDataLoadingThunk(
+  'notificationGroups/fetch',
+  async (_params, { getState }) => {
+    const activeFilter =
+      selectSettingsNotificationsQuickFilterActive(getState());
+
+    return apiFetchNotifications({
+      exclude_types:
+        activeFilter === 'all'
+          ? selectSettingsNotificationsExcludedTypes(getState())
+          : excludeAllTypesExcept(activeFilter),
+    });
+  },
+  ({ notifications }, { dispatch }) => {
+    dispatchAssociatedRecords(dispatch, notifications);
+    const payload: (ApiNotificationGroupJSON | NotificationGap)[] =
+      notifications;
+
+    // TODO: might be worth not using gaps for that…
+    // if (nextLink) payload.push({ type: 'gap', loadUrl: nextLink.uri });
+    if (notifications.length > 1)
+      payload.push({ type: 'gap', maxId: notifications.at(-1)?.page_min_id });
+
+    return payload;
+    // dispatch(submitMarkers());
+  },
+);
+
+export const fetchNotificationsGap = createDataLoadingThunk(
+  'notificationGroups/fetchGap',
+  async (params: { gap: NotificationGap }) =>
+    apiFetchNotifications({ max_id: params.gap.maxId }),
+
+  ({ notifications }, { dispatch }) => {
+    dispatchAssociatedRecords(dispatch, notifications);
+
+    return { notifications };
+  },
+);
+
+export const processNewNotificationForGroups = createAppAsyncThunk(
+  'notificationGroups/processNew',
+  (notification: ApiNotificationJSON, { dispatch }) => {
+    dispatchAssociatedRecords(dispatch, [notification]);
+
+    return notification;
+  },
+);
+
+export const loadPending = createAction('notificationGroups/loadPending');
+
+export const updateScrollPosition = createAction<{ top: boolean }>(
+  'notificationGroups/updateScrollPosition',
+);
+
+export const setNotificationsFilter = createAppAsyncThunk(
+  'notifications/filter/set',
+  ({ filterType }: { filterType: string }, { dispatch }) => {
+    dispatch({
+      type: NOTIFICATIONS_FILTER_SET,
+      path: ['notifications', 'quickFilter', 'active'],
+      value: filterType,
+    });
+    // dispatch(expandNotifications({ forceLoad: true }));
+    void dispatch(fetchNotifications());
+    dispatch(saveSettings());
+  },
+);
+
+export const clearNotifications = createDataLoadingThunk(
+  'notifications/clear',
+  () => apiClearNotifications(),
+);
+
+export const markNotificationsAsRead = createAction(
+  'notificationGroups/markAsRead',
+);
+
+export const mountNotifications = createAction('notificationGroups/mount');
+export const unmountNotifications = createAction('notificationGroups/unmount');
--- a/app/javascript/flavours/glitch/actions/notifications.js
+++ b/app/javascript/flavours/glitch/actions/notifications.js
@ -38,7 +38,6 @@ export const NOTIFICATIONS_EXPAND_FAIL    = 'NOTIFICATIONS_EXPAND_FAIL';

 export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';

-export const NOTIFICATIONS_CLEAR        = 'NOTIFICATIONS_CLEAR';
 export const NOTIFICATIONS_SCROLL_TOP   = 'NOTIFICATIONS_SCROLL_TOP';
 export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';

@ -182,7 +181,7 @@ const noOp = () => {};

 let expandNotificationsController = new AbortController();

-export function expandNotifications({ maxId, forceLoad } = {}, done = noOp) {
+export function expandNotifications({ maxId, forceLoad = false } = {}, done = noOp) {
  return (dispatch, getState) => {
    const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
    const notifications = getState().get('notifications');
@ -265,16 +264,6 @@ export function expandNotificationsFail(error, isLoadingMore) {
  };
 }

-export function clearNotifications() {
-  return (dispatch) => {
-    dispatch({
-      type: NOTIFICATIONS_CLEAR,
-    });
-
-    api().post('/api/v1/notifications/clear');
-  };
-}
-
 export function scrollTopNotifications(top) {
  return {
    type: NOTIFICATIONS_SCROLL_TOP,
--- a/app/javascript/flavours/glitch/actions/notifications_migration.tsx
+++ b/app/javascript/flavours/glitch/actions/notifications_migration.tsx
@ -0,0 +1,18 @@
+import { createAppAsyncThunk } from 'flavours/glitch/store';
+
+import { fetchNotifications } from './notification_groups';
+import { expandNotifications } from './notifications';
+
+export const initializeNotifications = createAppAsyncThunk(
+  'notifications/initialize',
+  (_, { dispatch, getState }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    const enableBeta = getState().settings.getIn(
+      ['notifications', 'groupingBeta'],
+      false,
+    ) as boolean;
+
+    if (enableBeta) void dispatch(fetchNotifications());
+    else dispatch(expandNotifications());
+  },
+);
--- a/app/javascript/flavours/glitch/actions/notifications_typed.ts
+++ b/app/javascript/flavours/glitch/actions/notifications_typed.ts
@ -1,11 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';

-import type { ApiAccountJSON } from '../api_types/accounts';
-// To be replaced once ApiNotificationJSON type exists
-interface FakeApiNotificationJSON {
-  type: string;
-  account: ApiAccountJSON;
-}
+import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';

 export const notificationsUpdate = createAction(
  'notifications/update',
@ -13,7 +8,7 @@ export const notificationsUpdate = createAction(
    playSound,
    ...args
  }: {
-    notification: FakeApiNotificationJSON;
+    notification: ApiNotificationJSON;
    usePendingItems: boolean;
    playSound: boolean;
  }) => ({
--- a/app/javascript/flavours/glitch/actions/statuses.js
+++ b/app/javascript/flavours/glitch/actions/statuses.js
@ -1,3 +1,5 @@
+import { browserHistory } from 'flavours/glitch/components/router';
+
 import api from '../api';

 import { ensureComposeIsVisible, setComposeToStatus } from './compose';
@ -94,7 +96,7 @@ export function redraft(status, raw_text, content_type) {
  };
 }

-export const editStatus = (id, routerHistory) => (dispatch, getState) => {
+export const editStatus = (id) => (dispatch, getState) => {
  let status = getState().getIn(['statuses', id]);

  if (status.get('poll')) {
@ -105,7 +107,7 @@ export const editStatus = (id, routerHistory) => (dispatch, getState) => {

  api().get(`/api/v1/statuses/${id}/source`).then(response => {
    dispatch(fetchStatusSourceSuccess());
-    ensureComposeIsVisible(getState, routerHistory);
+    ensureComposeIsVisible(getState);
    dispatch(setComposeToStatus(status, response.data.text, response.data.spoiler_text, response.data.content_type));
  }).catch(error => {
    dispatch(fetchStatusSourceFail(error));
@ -125,7 +127,7 @@ export const fetchStatusSourceFail = error => ({
  error,
 });

-export function deleteStatus(id, routerHistory, withRedraft = false) {
+export function deleteStatus(id, withRedraft = false) {
  return (dispatch, getState) => {
    let status = getState().getIn(['statuses', id]);

@ -142,7 +144,7 @@ export function deleteStatus(id, routerHistory, withRedraft = false) {

      if (withRedraft) {
        dispatch(redraft(status, response.data.text, response.data.content_type));
-        ensureComposeIsVisible(getState, routerHistory);
+        ensureComposeIsVisible(getState);
      }
    }).catch(error => {
      dispatch(deleteStatusFail(id, error));
@ -309,6 +311,21 @@ export function revealStatus(ids) {
  };
 }

+export function toggleStatusSpoilers(statusId) {
+  return (dispatch, getState) => {
+    const status = getState().statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    if (status.get('hidden')) {
+      dispatch(revealStatus(statusId));
+    } else {
+      dispatch(hideStatus(statusId));
+    }
+  };
+}
+
 export function toggleStatusCollapse(id, isCollapsed) {
  return {
    type: STATUS_COLLAPSE,
@ -349,3 +366,15 @@ export const undoStatusTranslation = (id, pollId) => ({
  id,
  pollId,
 });
+
+export const navigateToStatus = (statusId) => {
+  return (_dispatch, getState) => {
+    const state = getState();
+    const accountId = state.statuses.getIn([statusId, 'account']);
+    const acct = state.accounts.getIn([accountId, 'acct']);
+
+    if (acct) {
+      browserHistory.push(`/@${acct}/${statusId}`);
+    }
+  };
+};
--- a/app/javascript/flavours/glitch/actions/streaming.js
+++ b/app/javascript/flavours/glitch/actions/streaming.js
@ -1,27 +1,28 @@
 // @ts-check

-import {getLocale} from '../locales';
-import {connectStream} from '../stream';
+import { getLocale } from '../locales';
+import { connectStream } from '../stream';

 import {
-  deleteAnnouncement,
  fetchAnnouncements,
  updateAnnouncements,
  updateReaction as updateAnnouncementsReaction,
+  deleteAnnouncement,
 } from './announcements';
-import {updateConversations} from './conversations';
-import {expandNotifications, updateNotifications} from './notifications';
-import {updateStatus} from './statuses';
+import { updateConversations } from './conversations';
+import { processNewNotificationForGroups } from './notification_groups';
+import { updateNotifications, expandNotifications } from './notifications';
+import { updateStatus } from './statuses';
 import {
-  connectTimeline,
-  deleteFromTimelines,
-  disconnectTimeline,
-  expandHomeTimeline,
-  fillCommunityTimelineGaps,
-  fillHomeTimelineGaps,
-  fillListTimelineGaps,
-  fillPublicTimelineGaps,
  updateTimeline,
+  deleteFromTimelines,
+  expandHomeTimeline,
+  connectTimeline,
+  disconnectTimeline,
+  fillHomeTimelineGaps,
+  fillPublicTimelineGaps,
+  fillCommunityTimelineGaps,
+  fillListTimelineGaps,
 } from './timelines';

 /**
@ -98,10 +99,16 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
        case 'delete':
          dispatch(deleteFromTimelines(data.payload));
          break;
-        case 'notification':
+        case 'notification': {
          // @ts-expect-error
-          dispatch(updateNotifications(JSON.parse(data.payload), messages, locale));
+          const notificationJSON = JSON.parse(data.payload);
+          dispatch(updateNotifications(notificationJSON, messages, locale));
+          // TODO: remove this once the groups feature replaces the previous one
+          if(getState().notificationGroups.groups.length > 0) {
+            dispatch(processNewNotificationForGroups(notificationJSON));
+          }
          break;
+        }
        case 'conversation':
          // @ts-expect-error
          dispatch(updateConversations(JSON.parse(data.payload)));
--- a/app/javascript/flavours/glitch/api/notifications.ts
+++ b/app/javascript/flavours/glitch/api/notifications.ts
@ -0,0 +1,18 @@
+import api, { apiRequest, getLinks } from 'flavours/glitch/api';
+import type { ApiNotificationGroupJSON } from 'flavours/glitch/api_types/notifications';
+
+export const apiFetchNotifications = async (params?: {
+  exclude_types?: string[];
+  max_id?: string;
+}) => {
+  const response = await api().request<ApiNotificationGroupJSON[]>({
+    method: 'GET',
+    url: '/api/v2_alpha/notifications',
+    params,
+  });
+
+  return { notifications: response.data, links: getLinks(response) };
+};
+
+export const apiClearNotifications = () =>
+  apiRequest<undefined>('POST', 'v1/notifications/clear');
--- a/app/javascript/flavours/glitch/api_types/notifications.ts
+++ b/app/javascript/flavours/glitch/api_types/notifications.ts
@ -0,0 +1,147 @@
+// See app/serializers/rest/notification_group_serializer.rb
+
+import type { AccountWarningAction } from 'flavours/glitch/models/notification_group';
+
+import type { ApiAccountJSON } from './accounts';
+import type { ApiReportJSON } from './reports';
+import type { ApiStatusJSON } from './statuses';
+
+// See app/model/notification.rb
+export const allNotificationTypes = [
+  'follow',
+  'follow_request',
+  'favourite',
+  'reaction',
+  'reblog',
+  'mention',
+  'poll',
+  'status',
+  'update',
+  'admin.sign_up',
+  'admin.report',
+  'moderation_warning',
+  'severed_relationships',
+];
+
+export type NotificationWithStatusType =
+  | 'favourite'
+  | 'reaction'
+  | 'reblog'
+  | 'status'
+  | 'mention'
+  | 'poll'
+  | 'update';
+
+export type NotificationType =
+  | NotificationWithStatusType
+  | 'follow'
+  | 'follow_request'
+  | 'moderation_warning'
+  | 'severed_relationships'
+  | 'admin.sign_up'
+  | 'admin.report';
+
+export interface BaseNotificationJSON {
+  id: string;
+  type: NotificationType;
+  created_at: string;
+  group_key: string;
+  account: ApiAccountJSON;
+}
+
+export interface BaseNotificationGroupJSON {
+  group_key: string;
+  notifications_count: number;
+  type: NotificationType;
+  sample_accounts: ApiAccountJSON[];
+  latest_page_notification_at: string; // FIXME: This will only be present if the notification group is returned in a paginated list, not requested directly
+  most_recent_notification_id: string;
+  page_min_id?: string;
+  page_max_id?: string;
+}
+
+interface NotificationGroupWithStatusJSON extends BaseNotificationGroupJSON {
+  type: NotificationWithStatusType;
+  status: ApiStatusJSON;
+}
+
+interface NotificationWithStatusJSON extends BaseNotificationJSON {
+  type: NotificationWithStatusType;
+  status: ApiStatusJSON;
+}
+
+interface ReportNotificationGroupJSON extends BaseNotificationGroupJSON {
+  type: 'admin.report';
+  report: ApiReportJSON;
+}
+
+interface ReportNotificationJSON extends BaseNotificationJSON {
+  type: 'admin.report';
+  report: ApiReportJSON;
+}
+
+type SimpleNotificationTypes = 'follow' | 'follow_request' | 'admin.sign_up';
+interface SimpleNotificationGroupJSON extends BaseNotificationGroupJSON {
+  type: SimpleNotificationTypes;
+}
+
+interface SimpleNotificationJSON extends BaseNotificationJSON {
+  type: SimpleNotificationTypes;
+}
+
+export interface ApiAccountWarningJSON {
+  id: string;
+  action: AccountWarningAction;
+  text: string;
+  status_ids: string[];
+  created_at: string;
+  target_account: ApiAccountJSON;
+  appeal: unknown;
+}
+
+interface ModerationWarningNotificationGroupJSON
+  extends BaseNotificationGroupJSON {
+  type: 'moderation_warning';
+  moderation_warning: ApiAccountWarningJSON;
+}
+
+interface ModerationWarningNotificationJSON extends BaseNotificationJSON {
+  type: 'moderation_warning';
+  moderation_warning: ApiAccountWarningJSON;
+}
+
+export interface ApiAccountRelationshipSeveranceEventJSON {
+  id: string;
+  type: 'account_suspension' | 'domain_block' | 'user_domain_block';
+  purged: boolean;
+  target_name: string;
+  followers_count: number;
+  following_count: number;
+  created_at: string;
+}
+
+interface AccountRelationshipSeveranceNotificationGroupJSON
+  extends BaseNotificationGroupJSON {
+  type: 'severed_relationships';
+  event: ApiAccountRelationshipSeveranceEventJSON;
+}
+
+interface AccountRelationshipSeveranceNotificationJSON
+  extends BaseNotificationJSON {
+  type: 'severed_relationships';
+  event: ApiAccountRelationshipSeveranceEventJSON;
+}
+
+export type ApiNotificationJSON =
+  | SimpleNotificationJSON
+  | ReportNotificationJSON
+  | AccountRelationshipSeveranceNotificationJSON
+  | NotificationWithStatusJSON
+  | ModerationWarningNotificationJSON;
+
+export type ApiNotificationGroupJSON =
+  | SimpleNotificationGroupJSON
+  | ReportNotificationGroupJSON
+  | AccountRelationshipSeveranceNotificationGroupJSON
+  | NotificationGroupWithStatusJSON
+  | ModerationWarningNotificationGroupJSON;
--- a/app/javascript/flavours/glitch/api_types/reports.ts
+++ b/app/javascript/flavours/glitch/api_types/reports.ts
@ -0,0 +1,16 @@
+import type { ApiAccountJSON } from './accounts';
+
+export type ReportCategory = 'other' | 'spam' | 'legal' | 'violation';
+
+export interface ApiReportJSON {
+  id: string;
+  action_taken: unknown;
+  action_taken_at: unknown;
+  category: ReportCategory;
+  comment: string;
+  forwarded: boolean;
+  created_at: string;
+  status_ids: string[];
+  rule_ids: string[];
+  target_account: ApiAccountJSON;
+}
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@ -1,26 +1,26 @@
 import PropTypes from 'prop-types';
-import { useCallback } from 'react';
+import {useCallback} from 'react';

-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';

 import classNames from 'classnames';

 import ImmutablePropTypes from 'react-immutable-proptypes';

 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { EmptyAccount } from 'flavours/glitch/components/empty_account';
-import { ShortNumber } from 'flavours/glitch/components/short_number';
-import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
+import {EmptyAccount} from 'flavours/glitch/components/empty_account';
+import {ShortNumber} from 'flavours/glitch/components/short_number';
+import {VerifiedBadge} from 'flavours/glitch/components/verified_badge';

 import DropdownMenuContainer from '../containers/dropdown_menu_container';
-import { me } from '../initial_state';
+import {me} from '../initial_state';

-import { Avatar } from './avatar';
-import { Button } from './button';
-import { FollowersCounter } from './counters';
-import { DisplayName } from './display_name';
-import { Permalink } from './permalink';
-import { RelativeTimestamp } from './relative_timestamp';
+import {Avatar} from './avatar';
+import {Button} from './button';
+import {FollowersCounter} from './counters';
+import {DisplayName} from './display_name';
+import {Permalink} from './permalink';
+import {RelativeTimestamp} from './relative_timestamp';

 const messages = defineMessages({
  follow: { id: 'account.follow', defaultMessage: 'Follow' },
@ -131,7 +131,7 @@ const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifica
  return (
    <div className={classNames('account', { 'account--minimal': minimal })}>
      <div className='account__wrapper'>
-        <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
+        <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`} data-hover-card-account={account.get('id')}>
          <div className='account__avatar-wrapper'>
            <Avatar account={account} size={size} />
          </div>
--- a/app/javascript/flavours/glitch/components/hover_card_controller.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_controller.tsx
@ -40,6 +40,7 @@ export const HoverCardController: React.FC = () => {
  useEffect(() => {
    let isScrolling = false;
    let currentAnchor: HTMLElement | null = null;
+    let currentTitle: string | null = null;

    const open = (target: HTMLElement) => {
      target.setAttribute('aria-describedby', 'hover-card');
@ -72,6 +73,9 @@ export const HoverCardController: React.FC = () => {
        currentAnchor?.removeAttribute('aria-describedby');
        currentAnchor = target;

+        currentTitle = target.getAttribute('title');
+        target.removeAttribute('title');
+
        setEnterTimeout(() => {
          open(target);
        }, enterDelay);
@ -87,11 +91,20 @@ export const HoverCardController: React.FC = () => {
    };

    const handleMouseLeave = (e: MouseEvent) => {
+      const { target } = e;
+
      if (!currentAnchor) {
        return;
      }

-      if (e.target === currentAnchor || e.target === cardRef.current) {
+      if (
+        currentTitle &&
+        target instanceof HTMLElement &&
+        target === currentAnchor
+      )
+        target.setAttribute('title', currentTitle);
+
+      if (target === currentAnchor || target === cardRef.current) {
        cancelEnterTimeout();

        setLeaveTimeout(() => {
--- a/app/javascript/flavours/glitch/components/load_gap.tsx
+++ b/app/javascript/flavours/glitch/components/load_gap.tsx
@ -1,26 +1,26 @@
-import { useCallback } from 'react';
+import {useCallback} from 'react';

-import { useIntl, defineMessages } from 'react-intl';
+import {defineMessages, useIntl} from 'react-intl';

 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
+import {Icon} from 'flavours/glitch/components/icon';

 const messages = defineMessages({
  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
 });

-interface Props {
+interface Props<T> {
  disabled: boolean;
-  maxId: string;
-  onClick: (maxId: string) => void;
+  param: T;
+  onClick: (params: T) => void;
 }

-export const LoadGap: React.FC<Props> = ({ disabled, maxId, onClick }) => {
+export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
  const intl = useIntl();

  const handleClick = useCallback(() => {
-    onClick(maxId);
-  }, [maxId, onClick]);
+    onClick(param);
+  }, [param, onClick]);

  return (
    <button
--- a/app/javascript/flavours/glitch/components/media_gallery.jsx
+++ b/app/javascript/flavours/glitch/components/media_gallery.jsx
@ -1,21 +1,21 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import {PureComponent} from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl} from 'react-intl';

 import classNames from 'classnames';

-import { is } from 'immutable';
+import {is} from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';

-import { debounce } from 'lodash';
+import {debounce} from 'lodash';

 import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
-import { Blurhash } from 'flavours/glitch/components/blurhash';
+import {Blurhash} from 'flavours/glitch/components/blurhash';

-import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
+import {autoPlayGif, displayMedia, useBlurhash} from '../initial_state';

-import { IconButton } from './icon_button';
+import {IconButton} from './icon_button';

 const messages = defineMessages({
  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
@ -311,7 +311,7 @@ class MediaGallery extends PureComponent {
  render () {
    const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props;
    const { visible } = this.state;
-    const size     = media.take(4).size;
+    const size     = media.size;
    const uncached = media.every(attachment => attachment.get('type') === 'unknown');

    const width = this.state.width || defaultWidth;
@ -331,7 +331,7 @@ class MediaGallery extends PureComponent {
    if (this.isStandaloneEligible()) {
      children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />;
    } else {
-      children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />);
+      children = media.map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />);
    }

    if (uncached) {
--- a/app/javascript/flavours/glitch/components/router.tsx
+++ b/app/javascript/flavours/glitch/components/router.tsx
@ -22,7 +22,7 @@ type LocationState = MastodonLocationState | null | undefined;

 type HistoryPath = Path | LocationDescriptor<LocationState>;

-const browserHistory = createBrowserHistory<LocationState>();
+export const browserHistory = createBrowserHistory<LocationState>();
 const originalPush = browserHistory.push.bind(browserHistory);
 const originalReplace = browserHistory.replace.bind(browserHistory);

--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@ -120,6 +120,8 @@ class Status extends ImmutablePureComponent {
    cacheMediaWidth: PropTypes.func,
    cachedMediaWidth: PropTypes.number,
    scrollKey: PropTypes.string,
+    skipPrepend: PropTypes.bool,
+    avatarSize: PropTypes.number,
    deployPictureInPicture: PropTypes.func,
    settings: ImmutablePropTypes.map.isRequired,
    pictureInPicture: ImmutablePropTypes.contains({
@ -445,7 +447,7 @@ class Status extends ImmutablePureComponent {

  handleHotkeyReply = e => {
    e.preventDefault();
-    this.props.onReply(this.props.status, this.props.history);
+    this.props.onReply(this.props.status);
  };

  handleHotkeyFavourite = (e) => {
@ -462,7 +464,7 @@ class Status extends ImmutablePureComponent {

  handleHotkeyMention = e => {
    e.preventDefault();
-    this.props.onMention(this.props.status.get('account'), this.props.history);
+    this.props.onMention(this.props.status.get('account'));
  };

  handleHotkeyOpen = () => {
@ -523,12 +525,14 @@ class Status extends ImmutablePureComponent {
  }

  render () {
+    const { intl, hidden, featured, unfocusable, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
+
    const {
      parseClick,
      setCollapsed,
    } = this;
+
    const {
-      intl,
      status,
      account,
      settings,
@ -538,13 +542,6 @@ class Status extends ImmutablePureComponent {
      onOpenVideo,
      onOpenMedia,
      notification,
-      hidden,
-      unread,
-      featured,
-      pictureInPicture,
-      previousId,
-      nextInReplyToId,
-      rootId,
      history,
      identity,
      ...other
@ -594,8 +591,8 @@ class Status extends ImmutablePureComponent {

    if (hidden) {
      return (
-        <HotKeys handlers={handlers}>
-          <div ref={this.handleRef} className='status focusable' tabIndex={0}>
+        <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
+          <div ref={this.handleRef} className='status focusable' tabIndex={unfocusable ? null : 0}>
            <span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
            <span>{status.get('content')}</span>
          </div>
@ -615,8 +612,8 @@ class Status extends ImmutablePureComponent {
      };

      return (
-        <HotKeys handlers={minHandlers}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
+        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
+          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
            {' '}
            <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
@ -796,17 +793,17 @@ class Status extends ImmutablePureComponent {
    contentMedia.push(hashtagBar);

    return (
-      <HotKeys handlers={handlers}>
+      <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
        <div
          className={classNames('status__wrapper', 'focusable', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, collapsed: isCollapsed })}
          {...selectorAttribs}
-          tabIndex={0}
+          tabIndex={unfocusable ? null : 0}
          data-featured={featured ? 'true' : null}
          aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
          ref={this.handleRef}
          data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}
        >
-          {prepend}
+          {!skipPrepend && prepend}

          <div
            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background })}
@ -822,6 +819,7 @@ class Status extends ImmutablePureComponent {
                  friend={account}
                  collapsed={isCollapsed}
                  parseClick={parseClick}
+                  avatarSize={avatarSize}
                />
                <StatusIcons
                  status={status}
--- a/app/javascript/flavours/glitch/components/status_action_bar.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx
@ -112,7 +112,7 @@ class StatusActionBar extends ImmutablePureComponent {
    const { signedIn } = this.props.identity;

    if (signedIn) {
-      this.props.onReply(this.props.status, this.props.history);
+      this.props.onReply(this.props.status);
    } else {
      this.props.onInteractionModal('reply', this.props.status);
    }
@ -153,15 +153,15 @@ class StatusActionBar extends ImmutablePureComponent {
  };

  handleDeleteClick = () => {
-    this.props.onDelete(this.props.status, this.props.history);
+    this.props.onDelete(this.props.status);
  };

  handleRedraftClick = () => {
-    this.props.onDelete(this.props.status, this.props.history, true);
+    this.props.onDelete(this.props.status, true);
  };

  handleEditClick = () => {
-    this.props.onEdit(this.props.status, this.props.history);
+    this.props.onEdit(this.props.status);
  };

  handlePinClick = () => {
@ -169,11 +169,11 @@ class StatusActionBar extends ImmutablePureComponent {
  };

  handleMentionClick = () => {
-    this.props.onMention(this.props.status.get('account'), this.props.history);
+    this.props.onMention(this.props.status.get('account'));
  };

  handleDirectClick = () => {
-    this.props.onDirect(this.props.status.get('account'), this.props.history);
+    this.props.onDirect(this.props.status.get('account'));
  };

  handleMuteClick = () => {
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@ -181,7 +181,7 @@ class StatusContent extends PureComponent {

      if (mention) {
        link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
-        link.removeAttribute('title');
+        link.setAttribute('title', `@${mention.get('acct')}`);
        link.setAttribute('data-hover-card-account', mention.get('id'));
        if (rewriteMentions !== 'no') {
          while (link.firstChild) link.removeChild(link.firstChild);
--- a/app/javascript/flavours/glitch/components/status_header.jsx
+++ b/app/javascript/flavours/glitch/components/status_header.jsx
@ -14,6 +14,7 @@ export default class StatusHeader extends PureComponent {
  static propTypes = {
    status: ImmutablePropTypes.map.isRequired,
    friend: ImmutablePropTypes.map,
+    avatarSize: PropTypes.number,
    parseClick: PropTypes.func.isRequired,
  };

@ -33,13 +34,14 @@ export default class StatusHeader extends PureComponent {
    const {
      status,
      friend,
+      avatarSize,
    } = this.props;

    const account = status.get('account');

    let statusAvatar;
    if (friend === undefined || friend === null) {
-      statusAvatar = <Avatar account={account} size={46} />;
+      statusAvatar = <Avatar account={account} size={avatarSize} />;
    } else {
      statusAvatar = <AvatarOverlay account={account} friend={friend} />;
    }
@ -51,6 +53,7 @@ export default class StatusHeader extends PureComponent {
        target='_blank'
        onClick={this.handleAccountClick}
        rel='noopener noreferrer'
+        title={status.getIn(['account', 'acct'])}
        data-hover-card-account={status.getIn(['account', 'id'])}
      >
        <div className='status__avatar'>
--- a/app/javascript/flavours/glitch/components/status_list.jsx
+++ b/app/javascript/flavours/glitch/components/status_list.jsx
@ -108,7 +108,7 @@ export default class StatusList extends ImmutablePureComponent {
            <LoadGap
              key={'gap:' + statusIds.get(index + 1)}
              disabled={isLoading}
-              maxId={index > 0 ? statusIds.get(index - 1) : null}
+              param={index > 0 ? statusIds.get(index - 1) : null}
              onClick={onLoadMore}
            />
          );
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@ -106,7 +106,7 @@ export default class StatusPrepend extends PureComponent {
        return (
          <FormattedMessage
            id='notification.poll'
-            defaultMessage='A poll you have voted in has ended'
+            defaultMessage='A poll you voted in has ended'
          />
        );
      }
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@ -12,11 +12,9 @@ import {
  initAddFilter,
 } from 'flavours/glitch/actions/filters';
 import {
-  reblog,
-  favourite,
+  toggleReblog,
+  toggleFavourite,
  bookmark,
-  unreblog,
-  unfavourite,
  unbookmark,
  pin,
  unpin,
@ -32,14 +30,13 @@ import {
  muteStatus,
  unmuteStatus,
  deleteStatus,
-  hideStatus,
-  revealStatus,
+  toggleStatusSpoilers,
  editStatus,
  translateStatus,
  undoStatusTranslation,
 } from 'flavours/glitch/actions/statuses';
 import Status from 'flavours/glitch/components/status';
-import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
+import { deleteModal } from 'flavours/glitch/initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';

 import { showAlertForError } from '../actions/alerts';
@ -95,7 +92,7 @@ const makeMapStateToProps = () => {

 const mapDispatchToProps = (dispatch, { intl, contextType }) => ({

-  onReply (status, router) {
+  onReply (status) {
    dispatch((_, getState) => {
      let state = getState();

@ -106,34 +103,17 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
            message: intl.formatMessage(messages.replyMessage),
            confirm: intl.formatMessage(messages.replyConfirm),
            onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
-            onConfirm: () => dispatch(replyCompose(status, router)),
+            onConfirm: () => dispatch(replyCompose(status)),
          },
        }));
      } else {
-        dispatch(replyCompose(status, router));
+        dispatch(replyCompose(status));
      }
    });
  },

-  onModalReblog (status, privacy) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-    }
-  },
-
  onReblog (status, e) {
-    dispatch((_, getState) => {
-      let state = getState();
-      if (state.getIn(['local_settings', 'confirm_boost_missing_media_description']) && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog, missingMediaDescription: true } }));
-      } else if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    });
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
  },

  onBookmark (status) {
@ -144,26 +124,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
    }
  },

-  onModalFavourite (status) {
-    dispatch(favourite(status));
-  },
-
  onFavourite (status, e) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      if (e.shiftKey || !favouriteModal) {
-        this.onModalFavourite(status);
-      } else {
-        dispatch(openModal({
-          modalType: 'FAVOURITE',
-          modalProps: {
-            status,
-            onFavourite: this.onModalFavourite,
-          },
-        }));
-      }
-    }
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
  },

  onPin (status) {
@ -192,22 +154,22 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
    }));
  },

-  onDelete (status, history, withRedraft = false) {
+  onDelete (status, withRedraft = false) {
    if (!deleteModal) {
-      dispatch(deleteStatus(status.get('id'), history, withRedraft));
+      dispatch(deleteStatus(status.get('id'), withRedraft));
    } else {
      dispatch(openModal({
        modalType: 'CONFIRM',
        modalProps: {
          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
+          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
        },
      }));
    }
  },

-  onEdit (status, history) {
+  onEdit (status) {
    dispatch((_, getState) => {
      let state = getState();
      if (state.getIn(['compose', 'text']).trim().length !== 0) {
@ -216,11 +178,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
          modalProps: {
            message: intl.formatMessage(messages.editMessage),
            confirm: intl.formatMessage(messages.editConfirm),
-            onConfirm: () => dispatch(editStatus(status.get('id'), history)),
+            onConfirm: () => dispatch(editStatus(status.get('id'))),
          },
        }));
      } else {
-        dispatch(editStatus(status.get('id'), history));
+        dispatch(editStatus(status.get('id')));
      }
    });
  },
@ -233,12 +195,12 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
    }
  },

-  onDirect (account, router) {
-    dispatch(directCompose(account, router));
+  onDirect (account) {
+    dispatch(directCompose(account));
  },

-  onMention (account, router) {
-    dispatch(mentionCompose(account, router));
+  onMention (account) {
+    dispatch(mentionCompose(account));
  },

  onOpenMedia (statusId, media, index, lang) {
@ -281,11 +243,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
  },

  onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(status.get('id')));
  },

  deployPictureInPicture (status, type, mediaProps) {
--- a/app/javascript/flavours/glitch/entrypoints/public.tsx
+++ b/app/javascript/flavours/glitch/entrypoints/public.tsx
@ -316,8 +316,8 @@ function loaded() {

      const message =
        statusEl.dataset.spoiler === 'expanded'
-          ? localeData['status.show_less'] ?? 'Show less'
-          : localeData['status.show_more'] ?? 'Show more';
+          ? (localeData['status.show_less'] ?? 'Show less')
+          : (localeData['status.show_more'] ?? 'Show more');
      spoilerLink.textContent = new IntlMessageFormat(
        message,
        locale,
--- a/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.jsx
@ -1,14 +1,12 @@
 import PropTypes from 'prop-types';

-import { FormattedMessage } from 'react-intl';
+import {FormattedMessage} from 'react-intl';

-import { NavLink, withRouter } from 'react-router-dom';
+import {NavLink} from 'react-router-dom';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
 import ActionBar from '../../account/components/action_bar';
 import InnerHeader from '../../account/components/header';

@ -36,7 +34,6 @@ class Header extends ImmutablePureComponent {
    hideTabs: PropTypes.bool,
    domain: PropTypes.string.isRequired,
    hidden: PropTypes.bool,
-    ...WithRouterPropTypes,
  };

  handleFollow = () => {
@ -48,11 +45,11 @@ class Header extends ImmutablePureComponent {
  };

  handleMention = () => {
-    this.props.onMention(this.props.account, this.props.history);
+    this.props.onMention(this.props.account);
  };

  handleDirect = () => {
-    this.props.onDirect(this.props.account, this.props.history);
+    this.props.onDirect(this.props.account);
  };

  handleReport = () => {
@ -158,4 +155,4 @@ class Header extends ImmutablePureComponent {

 }

-export default withRouter(Header);
+export default Header;
--- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
@ -72,12 +72,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
    }
  },

-  onMention (account, router) {
-    dispatch(mentionCompose(account, router));
+  onMention (account) {
+    dispatch(mentionCompose(account));
  },

-  onDirect (account, router) {
-    dispatch(directCompose(account, router));
+  onDirect (account) {
+    dispatch(directCompose(account));
  },

  onReblogToggle (account) {
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
@ -1,20 +1,18 @@
 import PropTypes from 'prop-types';
-import { createRef } from 'react';
+import {createRef} from 'react';

-import { defineMessages, injectIntl } from 'react-intl';
+import {defineMessages, injectIntl} from 'react-intl';

 import classNames from 'classnames';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import { length } from 'stringz';
-
-import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
+import {length} from 'stringz';

 import AutosuggestInput from '../../../components/autosuggest_input';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
-import { Button } from '../../../components/button';
+import {Button} from '../../../components/button';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
 import LanguageDropdown from '../containers/language_dropdown_container';
 import PollButtonContainer from '../containers/poll_button_container';
@ -22,18 +20,18 @@ 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 {countableText} from '../util/counter';

-import { CharacterCounter } from './character_counter';
-import { ContentTypeButton } from './content_type_button';
-import { EditIndicator } from './edit_indicator';
-import { FederationButton } from './federation_button';
-import { NavigationBar } from './navigation_bar';
-import { PollForm } from "./poll_form";
-import { ReplyIndicator } from './reply_indicator';
-import { SecondaryPrivacyButton } from './secondary_privacy_button';
-import { ThreadModeButton } from './thread_mode_button';
-import { UploadForm } from './upload_form';
+import {CharacterCounter} from './character_counter';
+import {ContentTypeButton} from './content_type_button';
+import {EditIndicator} from './edit_indicator';
+import {FederationButton} from './federation_button';
+import {NavigationBar} from './navigation_bar';
+import {PollForm} from "./poll_form";
+import {ReplyIndicator} from './reply_indicator';
+import {SecondaryPrivacyButton} from './secondary_privacy_button';
+import {ThreadModeButton} from './thread_mode_button';
+import {UploadForm} from './upload_form';

 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';

@ -81,7 +79,6 @@ class ComposeForm extends ImmutablePureComponent {
    singleColumn: PropTypes.bool,
    lang: PropTypes.string,
    maxChars: PropTypes.number,
-    ...WithOptionalRouterPropTypes
  };

  static defaultProps = {
@ -141,9 +138,9 @@ class ComposeForm extends ImmutablePureComponent {
    // Submit unless there are media with missing descriptions
    if (this.props.mediaDescriptionConfirmation && this.props.media && this.props.media.some(item => !item.get('description'))) {
      const firstWithoutDescription = this.props.media.find(item => !item.get('description'));
-      this.props.onMediaDescriptionConfirm(this.props.history || null, firstWithoutDescription.get('id'), overridePrivacy);
+      this.props.onMediaDescriptionConfirm(firstWithoutDescription.get('id'), overridePrivacy);
    } else {
-      this.props.onSubmit(this.props.history || null, overridePrivacy);
+      this.props.onSubmit(overridePrivacy);
    }
  };

@ -351,4 +348,4 @@ class ComposeForm extends ImmutablePureComponent {

 }

-export default withOptionalRouter(injectIntl(ComposeForm));
+export default injectIntl(ComposeForm);
--- a/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
@ -1,17 +1,18 @@
-import { useCallback } from 'react';
+import {useCallback} from 'react';

-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';

-import { useDispatch, useSelector } from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';

 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
-import { cancelReplyCompose } from 'flavours/glitch/actions/compose';
-import { Icon } from 'flavours/glitch/components/icon';
-import { IconButton } from 'flavours/glitch/components/icon_button';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
+import {cancelReplyCompose} from 'flavours/glitch/actions/compose';
+import {Icon} from 'flavours/glitch/components/icon';
+import {IconButton} from 'flavours/glitch/components/icon_button';
+import {Permalink} from 'flavours/glitch/components/permalink';
+import {RelativeTimestamp} from 'flavours/glitch/components/relative_timestamp';
+import {EmbeddedStatusContent} from 'flavours/glitch/features/notifications_v2/components/embedded_status_content';

 const messages = defineMessages({
  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
@ -32,8 +33,6 @@ export const EditIndicator = () => {
    return null;
  }

-  const content = { __html: status.get('contentHtml') };
-
  return (
    <div className='edit-indicator'>
      <div className='edit-indicator__header'>
@ -48,7 +47,12 @@ export const EditIndicator = () => {
        </div>
      </div>

-      <div className='edit-indicator__content translate' dangerouslySetInnerHTML={content} />
+      <EmbeddedStatusContent
+        className='edit-indicator__content translate'
+        content={status.get('contentHtml')}
+        language={status.get('language')}
+        mentions={status.get('mentions')}
+      />

      {(status.get('poll') || status.get('media_attachments').size > 0) && (
        <div className='edit-indicator__attachments'>
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@ -8,6 +8,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { Icon } from 'flavours/glitch/components/icon';
 import { Permalink } from 'flavours/glitch/components/permalink';
+import { EmbeddedStatusContent } from 'flavours/glitch/features/notifications_v2/components/embedded_status_content';

 export const ReplyIndicator = () => {
  const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
@ -18,8 +19,6 @@ export const ReplyIndicator = () => {
    return null;
  }

-  const content = { __html: status.get('contentHtml') };
-
  return (
    <div className='reply-indicator'>
      <div className='reply-indicator__line' />
@ -33,7 +32,12 @@ export const ReplyIndicator = () => {
          <DisplayName account={account} />
        </Permalink>

-        <div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
+        <EmbeddedStatusContent
+          className='reply-indicator__content translate'
+          content={status.get('contentHtml')}
+          language={status.get('language')}
+          mentions={status.get('mentions')}
+        />

        {(status.get('poll') || status.get('media_attachments').size > 0) && (
          <div className='reply-indicator__attachments'>
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@ -1,23 +1,21 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import {defineMessages, injectIntl} from 'react-intl';

-import { connect } from 'react-redux';
+import {connect} from 'react-redux';

-import { privacyPreference } from 'flavours/glitch/utils/privacy_preference';
+import {privacyPreference} from 'flavours/glitch/utils/privacy_preference';

 import {
  changeCompose,
-  submitCompose,
+  changeComposeSpoilerText,
  clearComposeSuggestions,
  fetchComposeSuggestions,
-  selectComposeSuggestion,
-  changeComposeSpoilerText,
  insertEmojiCompose,
+  selectComposeSuggestion,
+  submitCompose,
  uploadCompose,
 } from '../../../actions/compose';
-import { changeLocalSetting } from '../../../actions/local_settings';
-import {
-  openModal,
-} from '../../../actions/modal';
+import {changeLocalSetting} from '../../../actions/local_settings';
+import {openModal,} from '../../../actions/modal';
 import ComposeForm from '../components/compose_form';

 const messages = defineMessages({
@ -82,8 +80,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
    dispatch(changeCompose(text));
  },

-  onSubmit (router, overridePrivacy = null) {
-    dispatch(submitCompose(router, overridePrivacy));
+  onSubmit (overridePrivacy = null) {
+    dispatch(submitCompose(overridePrivacy));
  },

  onClearSuggestions () {
@ -110,14 +108,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
    dispatch(insertEmojiCompose(position, data, needsSpace));
  },

-  onMediaDescriptionConfirm (routerHistory, mediaId, overridePrivacy = null) {
+  onMediaDescriptionConfirm (mediaId, overridePrivacy = null) {
    dispatch(openModal({
      modalType: 'CONFIRM',
      modalProps: {
        message: intl.formatMessage(messages.missingDescriptionMessage),
        confirm: intl.formatMessage(messages.missingDescriptionConfirm),
        onConfirm: () => {
-          dispatch(submitCompose(routerHistory, overridePrivacy));
+          dispatch(submitCompose(overridePrivacy));
        },
        secondary: intl.formatMessage(messages.missingDescriptionEdit),
        onSecondary: () => dispatch(openModal({
--- a/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
@ -10,7 +10,7 @@ const mapStateToProps = state => {
  const readyAttachmentsSize = state.getIn(['compose', 'media_attachments']).size ?? 0;
  const pendingAttachmentsSize = state.getIn(['compose', 'pending_media_attachments']).size ?? 0;
  const attachmentsSize = readyAttachmentsSize + pendingAttachmentsSize;
-  const isOverLimit = attachmentsSize > 3;
+  const isOverLimit = attachmentsSize > state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments'])-1;
  const hasVideoOrAudio = state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')));

  return {
--- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
@ -18,7 +18,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import {replyCompose} from 'flavours/glitch/actions/compose';
 import {deleteConversation, markConversationRead} from 'flavours/glitch/actions/conversations';
 import {openModal} from 'flavours/glitch/actions/modal';
-import {hideStatus, muteStatus, revealStatus, unmuteStatus} from 'flavours/glitch/actions/statuses';
+import {muteStatus, toggleStatusSpoilers, unmuteStatus} from 'flavours/glitch/actions/statuses';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import {IconButton} from 'flavours/glitch/components/icon_button';
@ -126,14 +126,14 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
          modalProps: {
            message: intl.formatMessage(messages.replyMessage),
            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(lastStatus, history)),
+            onConfirm: () => dispatch(replyCompose(lastStatus)),
          },
        }));
      } else {
-        dispatch(replyCompose(lastStatus, history));
+        dispatch(replyCompose(lastStatus));
      }
    });
-  }, [dispatch, lastStatus, history, intl]);
+  }, [dispatch, lastStatus, intl]);

  const handleDelete = useCallback(() => {
    dispatch(deleteConversation(id));
@ -156,11 +156,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
  }, [dispatch, lastStatus]);

  const handleShowMore = useCallback(() => {
-    if (lastStatus.get('hidden')) {
-      dispatch(revealStatus(lastStatus.get('id')));
-    } else {
-      dispatch(hideStatus(lastStatus.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(lastStatus.get('id')));

    if (lastStatus.get('spoiler_text')) {
      setExpanded(!expanded);
--- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
@ -53,6 +53,7 @@ class ColumnSettings extends PureComponent {
    const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission, onRequestNotificationPermission, notificationPolicy } = this.props;

    const unreadMarkersShowStr = <FormattedMessage id='notifications.column_settings.unread_notifications.highlight' defaultMessage='Highlight unread notifications' />;
+    const groupingShowStr = <FormattedMessage id='notifications.column_settings.beta.grouping' defaultMessage='Group notifications' />;
    const filterBarShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show_bar' defaultMessage='Show filter bar' />;
    const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
    const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
@ -115,6 +116,16 @@ class ColumnSettings extends PureComponent {
          </div>
        </section>

+        <section role='group' aria-labelledby='notifications-beta'>
+          <h3 id='notifications-beta'>
+            <FormattedMessage id='notifications.column_settings.beta.category' defaultMessage='Experimental features' />
+          </h3>
+
+          <div className='column-settings__row'>
+            <SettingToggle id='unread-notification-markers' prefix='notifications' settings={settings} settingPath={['groupingBeta']} onChange={onChange} label={groupingShowStr} />
+          </div>
+        </section>
+
        <section role='group' aria-labelledby='notifications-unread-markers'>
          <h3 id='notifications-unread-markers'>
            <FormattedMessage id='notifications.column_settings.unread_notifications.category' defaultMessage='Unread notifications' />
--- a/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.tsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.tsx
@ -35,7 +35,9 @@ export const FilteredNotificationsBanner: React.FC = () => {
      className='filtered-notifications-banner'
      to='/notifications/requests'
    >
-      <Icon icon={InventoryIcon} id='filtered-notifications' />
+      <div className='notification-group__icon'>
+        <Icon icon={InventoryIcon} id='filtered-notifications' />
+      </div>

      <div className='filtered-notifications-banner__text'>
        <strong>
--- a/app/javascript/flavours/glitch/features/notifications/components/moderation_warning.tsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/moderation_warning.tsx
@ -1,7 +1,10 @@
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
+
+import classNames from 'classnames';

 import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
+import {Icon} from 'flavours/glitch/components/icon';
+import type {AccountWarningAction} from 'flavours/glitch/models/notification_group';

 // This needs to be kept in sync with app/models/account_warning.rb
 const messages = defineMessages({
@ -36,19 +39,18 @@ const messages = defineMessages({
 });

 interface Props {
-  action:
-    | 'none'
-    | 'disable'
-    | 'mark_statuses_as_sensitive'
-    | 'delete_statuses'
-    | 'sensitive'
-    | 'silence'
-    | 'suspend';
+  action: AccountWarningAction;
  id: string;
-  hidden: boolean;
+  hidden?: boolean;
+  unread?: boolean;
 }

-export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
+export const ModerationWarning: React.FC<Props> = ({
+  action,
+  id,
+  hidden,
+  unread,
+}) => {
  const intl = useIntl();

  if (hidden) {
@ -56,23 +58,32 @@ export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
  }

  return (
-    <a
-      href={`/disputes/strikes/${id}`}
-      target='_blank'
-      rel='noopener noreferrer'
-      className='notification__moderation-warning'
+    <div
+      role='button'
+      className={classNames(
+        'notification-group notification-group--link notification-group--moderation-warning focusable',
+        { 'notification-group--unread': unread },
+      )}
+      tabIndex={0}
    >
-      <Icon id='warning' icon={GavelIcon} />
+      <div className='notification-group__icon'>
+        <Icon id='warning' icon={GavelIcon} />
+      </div>

-      <div className='notification__moderation-warning__content'>
+      <div className='notification-group__main'>
        <p>{intl.formatMessage(messages[action])}</p>
-        <span className='link-button'>
+        <a
+          href={`/disputes/strikes/${id}`}
+          target='_blank'
+          rel='noopener noreferrer'
+          className='link-button'
+        >
          <FormattedMessage
            id='notification.moderation-warning.learn_more'
            defaultMessage='Learn more'
          />
-        </span>
+        </a>
      </div>
-    </a>
+    </div>
  );
 };
--- a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
@ -92,7 +92,7 @@ class Notification extends ImmutablePureComponent {
    e.preventDefault();

    const { notification, onMention } = this.props;
-    onMention(notification.get('account'), this.props.history);
+    onMention(notification.get('account'));
  };

  handleHotkeyFavourite = () => {
--- a/app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx
@ -2,6 +2,8 @@ import PropTypes from 'prop-types';

 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

+import classNames from 'classnames';
+
 import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { domain } from 'flavours/glitch/initial_state';
@ -13,7 +15,7 @@ const messages = defineMessages({
  user_domain_block: { id: 'notification.relationships_severance_event.user_domain_block', defaultMessage: 'You have blocked {target}, removing {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
 });

-export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
+export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden, unread }) => {
  const intl = useIntl();

  if (hidden) {
@ -21,14 +23,14 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
  }

  return (
-    <a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='notification__relationships-severance-event'>
-      <Icon id='heart_broken' icon={HeartBrokenIcon} />
+    <div role='button' className={classNames('notification-group notification-group--link notification-group--relationships-severance-event focusable', { 'notification-group--unread': unread })} tabIndex='0'>
+      <div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>

-      <div className='notification__relationships-severance-event__content'>
+      <div className='notification-group__main'>
        <p>{intl.formatMessage(messages[type], { from: <strong>{domain}</strong>, target: <strong>{target}</strong>, followingCount, followersCount })}</p>
-        <span className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></span>
+        <a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></a>
      </div>
-    </a>
+    </div>
  );
 };

@ -42,4 +44,5 @@ RelationshipsSeveranceEvent.propTypes = {
  followersCount: PropTypes.number.isRequired,
  followingCount: PropTypes.number.isRequired,
  hidden: PropTypes.bool,
+  unread: PropTypes.bool,
 };
--- a/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
+++ b/app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js
@ -2,10 +2,13 @@ import {defineMessages, injectIntl} from 'react-intl';

 import {connect} from 'react-redux';

+import {initializeNotifications} from 'flavours/glitch/actions/notifications_migration';
+
 import {showAlert} from '../../../actions/alerts';
 import {openModal} from '../../../actions/modal';
+import {clearNotifications} from '../../../actions/notification_groups';
 import {updateNotificationsPolicy} from '../../../actions/notification_policies';
-import {clearNotifications, requestBrowserPermission, setFilter} from '../../../actions/notifications';
+import {requestBrowserPermission, setFilter} from '../../../actions/notifications';
 import {changeAlerts as changePushNotifications} from '../../../actions/push_notifications';
 import {changeSetting} from '../../../actions/settings';
 import ColumnSettings from '../components/column_settings';
@ -58,6 +61,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
      } else {
        dispatch(changeSetting(['notifications', ...path], checked));
      }
+    } else if(path[0] === 'groupingBeta') {
+      dispatch(changeSetting(['notifications', ...path], checked));
+      dispatch(initializeNotifications());
    } else {
      dispatch(changeSetting(['notifications', ...path], checked));
    }
--- a/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
+++ b/app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
@ -1,15 +1,8 @@
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';

-import { mentionCompose } from '../../../actions/compose';
-import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
-} from '../../../actions/interactions';
-import { openModal } from '../../../actions/modal';
-import { boostModal } from '../../../initial_state';
-import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
+import {mentionCompose} from '../../../actions/compose';
+import {toggleFavourite, toggleReblog,} from '../../../actions/interactions';
+import {makeGetNotification, makeGetReport, makeGetStatus} from '../../../selectors';
 import Notification from '../components/notification';

 const makeMapStateToProps = () => {
@ -31,32 +24,16 @@ const makeMapStateToProps = () => {
 };

 const mapDispatchToProps = dispatch => ({
-  onMention: (account, router) => {
-    dispatch(mentionCompose(account, router));
-  },
-
-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
+  onMention: (account) => {
+    dispatch(mentionCompose(account));
  },

  onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
  },

-  onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+  onFavourite (status, e) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
  },
 });

--- a/app/javascript/flavours/glitch/features/notifications/index.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/index.jsx
@ -1,44 +1,44 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import {PureComponent} from 'react';

-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl} from 'react-intl';

 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import {Helmet} from 'react-helmet';

-import { createSelector } from '@reduxjs/toolkit';
-import { List as ImmutableList } from 'immutable';
+import {createSelector} from '@reduxjs/toolkit';
+import {List as ImmutableList} from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';

-import { debounce } from 'lodash';
+import {debounce} from 'lodash';

 import DeleteForeverIcon from '@/material-icons/400-24px/delete_forever.svg?react';
 import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
-import { compareId } from 'flavours/glitch/compare_id';
-import { Icon }  from 'flavours/glitch/components/icon';
-import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
+import {compareId} from 'flavours/glitch/compare_id';
+import {Icon} from 'flavours/glitch/components/icon';
+import {NotSignedInIndicator} from 'flavours/glitch/components/not_signed_in_indicator';
+import {identityContextPropShape, withIdentity} from 'flavours/glitch/identity_context';

-import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
-import { submitMarkers } from '../../actions/markers';
+import {addColumn, moveColumn, removeColumn} from '../../actions/columns';
+import {submitMarkers} from '../../actions/markers';
 import {
  enterNotificationClearingMode,
  expandNotifications,
-  scrollTopNotifications,
  loadPending,
-  mountNotifications,
-  unmountNotifications,
  markNotificationsAsRead,
+  mountNotifications,
+  scrollTopNotifications,
+  unmountNotifications,
 } from '../../actions/notifications';
 import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
-import { LoadGap } from '../../components/load_gap';
+import {LoadGap} from '../../components/load_gap';
 import ScrollableList from '../../components/scrollable_list';
 import NotificationPurgeButtonsContainer from '../../containers/notification_purge_buttons_container';

-import { FilteredNotificationsBanner } from './components/filtered_notifications_banner';
+import {FilteredNotificationsBanner} from './components/filtered_notifications_banner';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import FilterBarContainer from './containers/filter_bar_container';
@ -237,7 +237,7 @@ class Notifications extends PureComponent {
        <LoadGap
          key={'gap:' + notifications.getIn([index + 1, 'id'])}
          disabled={isLoading}
-          maxId={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
+          param={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
          onClick={this.handleLoadGap}
        />
      ) : (
@ -258,6 +258,13 @@ class Notifications extends PureComponent {

    let scrollContainer;

+    const prepend = (
+      <>
+        {needsNotificationPermission && <NotificationsPermissionBanner />}
+        <FilteredNotificationsBanner />
+      </>
+    );
+
    if (signedIn) {
      scrollContainer = (
        <ScrollableList
@ -267,7 +274,7 @@ class Notifications extends PureComponent {
          showLoading={isLoading && notifications.size === 0}
          hasMore={hasMore}
          numPending={numPending}
-          prepend={needsNotificationPermission && <NotificationsPermissionBanner />}
+          prepend={prepend}
          alwaysPrepend
          emptyMessage={emptyMessage}
          onLoadMore={this.handleLoadOlder}
@ -356,8 +363,6 @@ class Notifications extends PureComponent {

        {filterBarContainer}

-        <FilteredNotificationsBanner />
-
        {scrollContainer}

        <Helmet>
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/avatar_group.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/avatar_group.tsx
@ -0,0 +1,31 @@
+import {Link} from 'react-router-dom';
+
+import {Avatar} from 'flavours/glitch/components/avatar';
+import {NOTIFICATIONS_GROUP_MAX_AVATARS} from 'flavours/glitch/models/notification_group';
+import {useAppSelector} from 'flavours/glitch/store';
+
+const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+
+  if (!account) return null;
+
+  return (
+    <Link
+      to={`/@${account.acct}`}
+      title={`@${account.acct}`}
+      data-hover-card-account={account.id}
+    >
+      <Avatar account={account} size={28} />
+    </Link>
+  );
+};
+
+export const AvatarGroup: React.FC<{ accountIds: string[] }> = ({
+  accountIds,
+}) => (
+  <div className='notification-group__avatar-group'>
+    {accountIds.slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS).map((accountId) => (
+      <AvatarWrapper key={accountId} accountId={accountId} />
+    ))}
+  </div>
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx
@ -0,0 +1,159 @@
+import {useCallback, useRef} from 'react';
+
+import {FormattedMessage} from 'react-intl';
+
+import {useHistory} from 'react-router-dom';
+
+import type {List as ImmutableList, RecordOf} from 'immutable';
+
+import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
+import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import {Avatar} from 'flavours/glitch/components/avatar';
+import {DisplayName} from 'flavours/glitch/components/display_name';
+import {Icon} from 'flavours/glitch/components/icon';
+import type {Status} from 'flavours/glitch/models/status';
+import {useAppSelector} from 'flavours/glitch/store';
+
+import {EmbeddedStatusContent} from './embedded_status_content';
+
+export type Mention = RecordOf<{ url: string; acct: string }>;
+
+export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
+  statusId,
+}) => {
+  const history = useHistory();
+  const clickCoordinatesRef = useRef<[number, number] | null>();
+
+  const status = useAppSelector(
+    (state) => state.statuses.get(statusId) as Status | undefined,
+  );
+
+  const account = useAppSelector((state) =>
+    state.accounts.get(status?.get('account') as string),
+  );
+
+  const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ clientX, clientY }) => {
+      clickCoordinatesRef.current = [clientX, clientY];
+    },
+    [clickCoordinatesRef],
+  );
+
+  const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ clientX, clientY, target, button }) => {
+      const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
+      const [deltaX, deltaY] = [
+        Math.abs(clientX - startX),
+        Math.abs(clientY - startY),
+      ];
+
+      let element: HTMLDivElement | null = target as HTMLDivElement;
+
+      while (element) {
+        if (
+          element.localName === 'button' ||
+          element.localName === 'a' ||
+          element.localName === 'label'
+        ) {
+          return;
+        }
+
+        element = element.parentNode as HTMLDivElement | null;
+      }
+
+      if (deltaX + deltaY < 5 && button === 0 && account) {
+        history.push(`/@${account.acct}/${statusId}`);
+      }
+
+      clickCoordinatesRef.current = null;
+    },
+    [clickCoordinatesRef, statusId, account, history],
+  );
+
+  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ currentTarget }) => {
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      for (const emoji of emojis) {
+        const newSrc = emoji.getAttribute('data-original');
+        if (newSrc) emoji.src = newSrc;
+      }
+    },
+    [],
+  );
+
+  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ currentTarget }) => {
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      for (const emoji of emojis) {
+        const newSrc = emoji.getAttribute('data-static');
+        if (newSrc) emoji.src = newSrc;
+      }
+    },
+    [],
+  );
+
+  if (!status) {
+    return null;
+  }
+
+  // Assign status attributes to variables with a forced type, as status is not yet properly typed
+  const contentHtml = status.get('contentHtml') as string;
+  const poll = status.get('poll');
+  const language = status.get('language') as string;
+  const mentions = status.get('mentions') as ImmutableList<Mention>;
+  const mediaAttachmentsSize = (
+    status.get('media_attachments') as ImmutableList<unknown>
+  ).size;
+
+  return (
+    <div
+      className='notification-group__embedded-status'
+      role='button'
+      tabIndex={-1}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='notification-group__embedded-status__account'>
+        <Avatar account={account} size={16} />
+        <DisplayName account={account} />
+      </div>
+
+      <EmbeddedStatusContent
+        className='notification-group__embedded-status__content reply-indicator__content translate'
+        content={contentHtml}
+        language={language}
+        mentions={mentions}
+      />
+
+      {(poll || mediaAttachmentsSize > 0) && (
+        <div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
+          {!!poll && (
+            <>
+              <Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
+              <FormattedMessage
+                id='reply_indicator.poll'
+                defaultMessage='Poll'
+              />
+            </>
+          )}
+          {mediaAttachmentsSize > 0 && (
+            <>
+              <Icon icon={PhotoLibraryIcon} id='photo-library' />
+              <FormattedMessage
+                id='reply_indicator.attachments'
+                defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
+                values={{ count: mediaAttachmentsSize }}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx
@ -0,0 +1,93 @@
+import {useCallback} from 'react';
+
+import {useHistory} from 'react-router-dom';
+
+import type {List} from 'immutable';
+
+import type {History} from 'history';
+
+import type {Mention} from './embedded_status';
+
+const handleMentionClick = (
+  history: History,
+  mention: Mention,
+  e: MouseEvent,
+) => {
+  if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    history.push(`/@${mention.get('acct')}`);
+  }
+};
+
+const handleHashtagClick = (
+  history: History,
+  hashtag: string,
+  e: MouseEvent,
+) => {
+  if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    history.push(`/tags/${hashtag.replace(/^#/, '')}`);
+  }
+};
+
+export const EmbeddedStatusContent: React.FC<{
+  content: string;
+  mentions: List<Mention>;
+  language: string;
+  className?: string;
+}> = ({ content, mentions, language, className }) => {
+  const history = useHistory();
+
+  const handleContentRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) {
+        return;
+      }
+
+      const links = node.querySelectorAll<HTMLAnchorElement>('a');
+
+      for (const link of links) {
+        if (link.classList.contains('status-link')) {
+          continue;
+        }
+
+        link.classList.add('status-link');
+
+        const mention = mentions.find((item) => link.href === item.get('url'));
+
+        if (mention) {
+          link.addEventListener(
+            'click',
+            handleMentionClick.bind(null, history, mention),
+            false,
+          );
+          link.setAttribute('title', `@${mention.get('acct')}`);
+          link.setAttribute('href', `/@${mention.get('acct')}`);
+        } else if (
+          link.textContent?.[0] === '#' ||
+          link.previousSibling?.textContent?.endsWith('#')
+        ) {
+          link.addEventListener(
+            'click',
+            handleHashtagClick.bind(null, history, link.text),
+            false,
+          );
+          link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);
+        } else {
+          link.setAttribute('title', link.href);
+          link.classList.add('unhandled-link');
+        }
+      }
+    },
+    [mentions, history],
+  );
+
+  return (
+    <div
+      className={className}
+      ref={handleContentRef}
+      lang={language}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/names_list.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/names_list.tsx
@ -0,0 +1,51 @@
+import {FormattedMessage} from 'react-intl';
+
+import {Link} from 'react-router-dom';
+
+import {useAppSelector} from 'flavours/glitch/store';
+
+export const NamesList: React.FC<{
+  accountIds: string[];
+  total: number;
+  seeMoreHref?: string;
+}> = ({ accountIds, total, seeMoreHref }) => {
+  const lastAccountId = accountIds[0] ?? '0';
+  const account = useAppSelector((state) => state.accounts.get(lastAccountId));
+
+  if (!account) return null;
+
+  const displayedName = (
+    <Link
+      to={`/@${account.acct}`}
+      title={`@${account.acct}`}
+      data-hover-card-account={account.id}
+    >
+      <bdi dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
+    </Link>
+  );
+
+  if (total === 1) {
+    return displayedName;
+  }
+
+  if (seeMoreHref)
+    return (
+      <FormattedMessage
+        id='name_and_others_with_link'
+        defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a>'
+        values={{
+          name: displayedName,
+          count: total - 1,
+          a: (chunks) => <Link to={seeMoreHref}>{chunks}</Link>,
+        }}
+      />
+    );
+
+  return (
+    <FormattedMessage
+      id='name_and_others'
+      defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
+      values={{ name: displayedName, count: total - 1 }}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_report.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_report.tsx
@ -0,0 +1,132 @@
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
+
+import classNames from 'classnames';
+
+import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
+import {Icon} from 'flavours/glitch/components/icon';
+import {RelativeTimestamp} from 'flavours/glitch/components/relative_timestamp';
+import type {NotificationGroupAdminReport} from 'flavours/glitch/models/notification_group';
+import {useAppSelector} from 'flavours/glitch/store';
+
+// This needs to be kept in sync with app/models/report.rb
+const messages = defineMessages({
+  other: {
+    id: 'report_notification.categories.other_sentence',
+    defaultMessage: 'other',
+  },
+  spam: {
+    id: 'report_notification.categories.spam_sentence',
+    defaultMessage: 'spam',
+  },
+  legal: {
+    id: 'report_notification.categories.legal_sentence',
+    defaultMessage: 'illegal content',
+  },
+  violation: {
+    id: 'report_notification.categories.violation_sentence',
+    defaultMessage: 'rule violation',
+  },
+});
+
+export const NotificationAdminReport: React.FC<{
+  notification: NotificationGroupAdminReport;
+  unread?: boolean;
+}> = ({ notification, notification: { report }, unread }) => {
+  const intl = useIntl();
+  const targetAccount = useAppSelector((state) =>
+    state.accounts.get(report.targetAccountId),
+  );
+  const account = useAppSelector((state) =>
+    state.accounts.get(notification.sampleAccountIds[0] ?? '0'),
+  );
+
+  if (!account || !targetAccount) return null;
+
+  const values = {
+    name: (
+      <bdi
+        dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
+      />
+    ),
+    target: (
+      <bdi
+        dangerouslySetInnerHTML={{
+          __html: targetAccount.get('display_name_html'),
+        }}
+      />
+    ),
+    category: intl.formatMessage(messages[report.category]),
+    count: report.status_ids.length,
+  };
+
+  let message;
+
+  if (report.status_ids.length > 0) {
+    if (report.category === 'other') {
+      message = (
+        <FormattedMessage
+          id='notification.admin.report_account_other'
+          defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target}'
+          values={values}
+        />
+      );
+    } else {
+      message = (
+        <FormattedMessage
+          id='notification.admin.report_account'
+          defaultMessage='{name} reported {count, plural, one {one post} other {# posts}} from {target} for {category}'
+          values={values}
+        />
+      );
+    }
+  } else {
+    if (report.category === 'other') {
+      message = (
+        <FormattedMessage
+          id='notification.admin.report_statuses_other'
+          defaultMessage='{name} reported {target}'
+          values={values}
+        />
+      );
+    } else {
+      message = (
+        <FormattedMessage
+          id='notification.admin.report_statuses'
+          defaultMessage='{name} reported {target} for {category}'
+          values={values}
+        />
+      );
+    }
+  }
+
+  return (
+    <a
+      href={`/admin/reports/${report.id}`}
+      target='_blank'
+      rel='noopener noreferrer'
+      className={classNames(
+        'notification-group notification-group--link notification-group--admin-report focusable',
+        { 'notification-group--unread': unread },
+      )}
+    >
+      <div className='notification-group__icon'>
+        <Icon id='flag' icon={FlagIcon} />
+      </div>
+
+      <div className='notification-group__main'>
+        <div className='notification-group__main__header'>
+          <div className='notification-group__main__header__label'>
+            {message}
+            <RelativeTimestamp timestamp={report.created_at} />
+          </div>
+        </div>
+
+        {report.comment.length > 0 && (
+          <div className='notification-group__embedded-status__content'>
+            “{report.comment}”
+          </div>
+        )}
+      </div>
+    </a>
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_sign_up.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_admin_sign_up.tsx
@ -0,0 +1,31 @@
+import {FormattedMessage} from 'react-intl';
+
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import type {NotificationGroupAdminSignUp} from 'flavours/glitch/models/notification_group';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationGroupWithStatus} from './notification_group_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.admin.sign_up'
+    defaultMessage='{name} signed up'
+    values={values}
+  />
+);
+
+export const NotificationAdminSignUp: React.FC<{
+  notification: NotificationGroupAdminSignUp;
+  unread: boolean;
+}> = ({ notification, unread }) => (
+  <NotificationGroupWithStatus
+    type='admin-sign-up'
+    icon={PersonAddIcon}
+    iconId='person-add'
+    accountIds={notification.sampleAccountIds}
+    timestamp={notification.latest_page_notification_at}
+    count={notification.notifications_count}
+    labelRenderer={labelRenderer}
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_favourite.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_favourite.tsx
@ -0,0 +1,45 @@
+import {FormattedMessage} from 'react-intl';
+
+import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import type {NotificationGroupFavourite} from 'flavours/glitch/models/notification_group';
+import {useAppSelector} from 'flavours/glitch/store';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationGroupWithStatus} from './notification_group_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.favourite'
+    defaultMessage='{name} favorited your status'
+    values={values}
+  />
+);
+
+export const NotificationFavourite: React.FC<{
+  notification: NotificationGroupFavourite;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  const { statusId } = notification;
+  const statusAccount = useAppSelector(
+    (state) =>
+      state.accounts.get(state.statuses.getIn([statusId, 'account']) as string)
+        ?.acct,
+  );
+
+  return (
+    <NotificationGroupWithStatus
+      type='favourite'
+      icon={StarIcon}
+      iconId='star'
+      accountIds={notification.sampleAccountIds}
+      statusId={notification.statusId}
+      timestamp={notification.latest_page_notification_at}
+      count={notification.notifications_count}
+      labelRenderer={labelRenderer}
+      labelSeeMoreHref={
+        statusAccount ? `/@${statusAccount}/${statusId}/favourites` : undefined
+      }
+      unread={unread}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_follow.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_follow.tsx
@ -0,0 +1,31 @@
+import {FormattedMessage} from 'react-intl';
+
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import type {NotificationGroupFollow} from 'flavours/glitch/models/notification_group';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationGroupWithStatus} from './notification_group_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.follow'
+    defaultMessage='{name} followed you'
+    values={values}
+  />
+);
+
+export const NotificationFollow: React.FC<{
+  notification: NotificationGroupFollow;
+  unread: boolean;
+}> = ({ notification, unread }) => (
+  <NotificationGroupWithStatus
+    type='follow'
+    icon={PersonAddIcon}
+    iconId='person-add'
+    accountIds={notification.sampleAccountIds}
+    timestamp={notification.latest_page_notification_at}
+    count={notification.notifications_count}
+    labelRenderer={labelRenderer}
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_follow_request.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_follow_request.tsx
@ -0,0 +1,75 @@
+import {useCallback} from 'react';
+
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
+
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import {authorizeFollowRequest, rejectFollowRequest,} from 'flavours/glitch/actions/accounts';
+import {IconButton} from 'flavours/glitch/components/icon_button';
+import type {NotificationGroupFollowRequest} from 'flavours/glitch/models/notification_group';
+import {useAppDispatch} from 'flavours/glitch/store';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationGroupWithStatus} from './notification_group_with_status';
+
+const messages = defineMessages({
+  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
+  reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
+});
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.follow_request'
+    defaultMessage='{name} has requested to follow you'
+    values={values}
+  />
+);
+
+export const NotificationFollowRequest: React.FC<{
+  notification: NotificationGroupFollowRequest;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  const intl = useIntl();
+
+  const dispatch = useAppDispatch();
+
+  const onAuthorize = useCallback(() => {
+    dispatch(authorizeFollowRequest(notification.sampleAccountIds[0]));
+  }, [dispatch, notification.sampleAccountIds]);
+
+  const onReject = useCallback(() => {
+    dispatch(rejectFollowRequest(notification.sampleAccountIds[0]));
+  }, [dispatch, notification.sampleAccountIds]);
+
+  const actions = (
+    <div className='notification-group__actions'>
+      <IconButton
+        title={intl.formatMessage(messages.reject)}
+        icon='times'
+        iconComponent={CloseIcon}
+        onClick={onReject}
+      />
+      <IconButton
+        title={intl.formatMessage(messages.authorize)}
+        icon='check'
+        iconComponent={CheckIcon}
+        onClick={onAuthorize}
+      />
+    </div>
+  );
+
+  return (
+    <NotificationGroupWithStatus
+      type='follow-request'
+      icon={PersonAddIcon}
+      iconId='person-add'
+      accountIds={notification.sampleAccountIds}
+      timestamp={notification.latest_page_notification_at}
+      count={notification.notifications_count}
+      labelRenderer={labelRenderer}
+      actions={actions}
+      unread={unread}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group.tsx
@ -0,0 +1,160 @@
+import {useMemo} from 'react';
+
+import {HotKeys} from 'react-hotkeys';
+
+import {navigateToProfile} from 'flavours/glitch/actions/accounts';
+import {mentionComposeById} from 'flavours/glitch/actions/compose';
+import type {NotificationGroup as NotificationGroupModel} from 'flavours/glitch/models/notification_group';
+import {useAppDispatch, useAppSelector} from 'flavours/glitch/store';
+
+import {NotificationAdminReport} from './notification_admin_report';
+import {NotificationAdminSignUp} from './notification_admin_sign_up';
+import {NotificationFavourite} from './notification_favourite';
+import {NotificationFollow} from './notification_follow';
+import {NotificationFollowRequest} from './notification_follow_request';
+import {NotificationMention} from './notification_mention';
+import {NotificationModerationWarning} from './notification_moderation_warning';
+import {NotificationPoll} from './notification_poll';
+import {NotificationReaction} from './notification_reaction';
+import {NotificationReblog} from './notification_reblog';
+import {NotificationSeveredRelationships} from './notification_severed_relationships';
+import {NotificationStatus} from './notification_status';
+import {NotificationUpdate} from './notification_update';
+
+export const NotificationGroup: React.FC<{
+  notificationGroupId: NotificationGroupModel['group_key'];
+  unread: boolean;
+  onMoveUp: (groupId: string) => void;
+  onMoveDown: (groupId: string) => void;
+}> = ({ notificationGroupId, unread, onMoveUp, onMoveDown }) => {
+  const notificationGroup = useAppSelector((state) =>
+    state.notificationGroups.groups.find(
+      (item) => item.type !== 'gap' && item.group_key === notificationGroupId,
+    ),
+  );
+
+  const dispatch = useAppDispatch();
+
+  const accountId =
+    notificationGroup?.type === 'gap'
+      ? undefined
+      : notificationGroup?.sampleAccountIds[0];
+
+  const handlers = useMemo(
+    () => ({
+      moveUp: () => {
+        onMoveUp(notificationGroupId);
+      },
+
+      moveDown: () => {
+        onMoveDown(notificationGroupId);
+      },
+
+      openProfile: () => {
+        if (accountId) dispatch(navigateToProfile(accountId));
+      },
+
+      mention: () => {
+        if (accountId) dispatch(mentionComposeById(accountId));
+      },
+    }),
+    [dispatch, notificationGroupId, accountId, onMoveUp, onMoveDown],
+  );
+
+  if (!notificationGroup || notificationGroup.type === 'gap') return null;
+
+  let content;
+
+  switch (notificationGroup.type) {
+    case 'reblog':
+      content = (
+        <NotificationReblog unread={unread} notification={notificationGroup} />
+      );
+      break;
+    case 'favourite':
+      content = (
+        <NotificationFavourite
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    case 'reaction':
+      content = (
+        <NotificationReaction
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    case 'severed_relationships':
+      content = (
+        <NotificationSeveredRelationships
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    case 'mention':
+      content = (
+        <NotificationMention unread={unread} notification={notificationGroup} />
+      );
+      break;
+    case 'follow':
+      content = (
+        <NotificationFollow unread={unread} notification={notificationGroup} />
+      );
+      break;
+    case 'follow_request':
+      content = (
+        <NotificationFollowRequest
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    case 'poll':
+      content = (
+        <NotificationPoll unread={unread} notification={notificationGroup} />
+      );
+      break;
+    case 'status':
+      content = (
+        <NotificationStatus unread={unread} notification={notificationGroup} />
+      );
+      break;
+    case 'update':
+      content = (
+        <NotificationUpdate unread={unread} notification={notificationGroup} />
+      );
+      break;
+    case 'admin.sign_up':
+      content = (
+        <NotificationAdminSignUp
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    case 'admin.report':
+      content = (
+        <NotificationAdminReport
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    case 'moderation_warning':
+      content = (
+        <NotificationModerationWarning
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
+    default:
+      return null;
+  }
+
+  return <HotKeys handlers={handlers}>{content}</HotKeys>;
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
@ -0,0 +1,113 @@
+import {useMemo} from 'react';
+
+import classNames from 'classnames';
+
+import {HotKeys} from 'react-hotkeys';
+
+import {replyComposeById} from 'flavours/glitch/actions/compose';
+import {navigateToStatus} from 'flavours/glitch/actions/statuses';
+import type {IconProp} from 'flavours/glitch/components/icon';
+import {Icon} from 'flavours/glitch/components/icon';
+import {RelativeTimestamp} from 'flavours/glitch/components/relative_timestamp';
+import {useAppDispatch} from 'flavours/glitch/store';
+
+import {AvatarGroup} from './avatar_group';
+import {EmbeddedStatus} from './embedded_status';
+import {NamesList} from './names_list';
+
+export type LabelRenderer = (
+  values: Record<string, React.ReactNode>,
+) => JSX.Element;
+
+export const NotificationGroupWithStatus: React.FC<{
+  icon: IconProp;
+  iconId: string;
+  statusId?: string;
+  actions?: JSX.Element;
+  count: number;
+  accountIds: string[];
+  timestamp: string;
+  labelRenderer: LabelRenderer;
+  labelSeeMoreHref?: string;
+  type: string;
+  unread: boolean;
+}> = ({
+  icon,
+  iconId,
+  timestamp,
+  accountIds,
+  actions,
+  count,
+  statusId,
+  labelRenderer,
+  labelSeeMoreHref,
+  type,
+  unread,
+}) => {
+  const dispatch = useAppDispatch();
+
+  const label = useMemo(
+    () =>
+      labelRenderer({
+        name: (
+          <NamesList
+            accountIds={accountIds}
+            total={count}
+            seeMoreHref={labelSeeMoreHref}
+          />
+        ),
+      }),
+    [labelRenderer, accountIds, count, labelSeeMoreHref],
+  );
+
+  const handlers = useMemo(
+    () => ({
+      open: () => {
+        dispatch(navigateToStatus(statusId));
+      },
+
+      reply: () => {
+        dispatch(replyComposeById(statusId));
+      },
+    }),
+    [dispatch, statusId],
+  );
+
+  return (
+    <HotKeys handlers={handlers}>
+      <div
+        role='button'
+        className={classNames(
+          `notification-group focusable notification-group--${type}`,
+          { 'notification-group--unread': unread },
+        )}
+        tabIndex={0}
+      >
+        <div className='notification-group__icon'>
+          <Icon icon={icon} id={iconId} />
+        </div>
+
+        <div className='notification-group__main'>
+          <div className='notification-group__main__header'>
+            <div className='notification-group__main__header__wrapper'>
+              <AvatarGroup accountIds={accountIds} />
+
+              {actions}
+            </div>
+
+            <div className='notification-group__main__header__label'>
+              {label}
+              {timestamp && <RelativeTimestamp timestamp={timestamp} />}
+            </div>
+          </div>
+
+          {statusId && (
+            <div className='notification-group__main__status'>
+              <EmbeddedStatus statusId={statusId} />
+            </div>
+          )}
+        </div>
+      </div>
+    </HotKeys>
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_mention.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_mention.tsx
@ -0,0 +1,55 @@
+import {FormattedMessage} from 'react-intl';
+
+import ReplyIcon from '@/material-icons/400-24px/reply-fill.svg?react';
+import type {StatusVisibility} from 'flavours/glitch/api_types/statuses';
+import type {NotificationGroupMention} from 'flavours/glitch/models/notification_group';
+import {useAppSelector} from 'flavours/glitch/store';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationWithStatus} from './notification_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.mention'
+    defaultMessage='{name} mentioned you'
+    values={values}
+  />
+);
+
+const privateMentionLabelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.private_mention'
+    defaultMessage='{name} privately mentioned you'
+    values={values}
+  />
+);
+
+export const NotificationMention: React.FC<{
+  notification: NotificationGroupMention;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  const statusVisibility = useAppSelector(
+    (state) =>
+      state.statuses.getIn([
+        notification.statusId,
+        'visibility',
+      ]) as StatusVisibility,
+  );
+
+  return (
+    <NotificationWithStatus
+      type='mention'
+      icon={ReplyIcon}
+      iconId='reply'
+      accountIds={notification.sampleAccountIds}
+      count={notification.notifications_count}
+      statusId={notification.statusId}
+      labelRenderer={
+        statusVisibility === 'direct'
+          ? privateMentionLabelRenderer
+          : labelRenderer
+      }
+      unread={unread}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_moderation_warning.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_moderation_warning.tsx
@ -0,0 +1,13 @@
+import {ModerationWarning} from 'flavours/glitch/features/notifications/components/moderation_warning';
+import type {NotificationGroupModerationWarning} from 'flavours/glitch/models/notification_group';
+
+export const NotificationModerationWarning: React.FC<{
+  notification: NotificationGroupModerationWarning;
+  unread: boolean;
+}> = ({ notification: { moderationWarning }, unread }) => (
+  <ModerationWarning
+    action={moderationWarning.action}
+    id={moderationWarning.id}
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_poll.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_poll.tsx
@ -0,0 +1,41 @@
+import {FormattedMessage} from 'react-intl';
+
+import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
+import {me} from 'flavours/glitch/initial_state';
+import type {NotificationGroupPoll} from 'flavours/glitch/models/notification_group';
+
+import {NotificationWithStatus} from './notification_with_status';
+
+const labelRendererOther = () => (
+  <FormattedMessage
+    id='notification.poll'
+    defaultMessage='A poll you voted in has ended'
+  />
+);
+
+const labelRendererOwn = () => (
+  <FormattedMessage
+    id='notification.own_poll'
+    defaultMessage='Your poll has ended'
+  />
+);
+
+export const NotificationPoll: React.FC<{
+  notification: NotificationGroupPoll;
+  unread: boolean;
+}> = ({ notification, unread }) => (
+  <NotificationWithStatus
+    type='poll'
+    icon={BarChart4BarsIcon}
+    iconId='bar-chart-4-bars'
+    accountIds={notification.sampleAccountIds}
+    count={notification.notifications_count}
+    statusId={notification.statusId}
+    labelRenderer={
+      notification.sampleAccountIds[0] === me
+        ? labelRendererOwn
+        : labelRendererOther
+    }
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_reaction.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_reaction.tsx
@ -0,0 +1,34 @@
+import {FormattedMessage} from 'react-intl';
+
+import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
+import type {NotificationGroupReaction} from 'flavours/glitch/models/notification_group';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationGroupWithStatus} from './notification_group_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.reaction'
+    defaultMessage='{name} reacted to your status'
+    values={values}
+  />
+);
+
+export const NotificationReaction: React.FC<{
+  notification: NotificationGroupReaction;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  return (
+    <NotificationGroupWithStatus
+      type='reaction'
+      icon={MoodIcon}
+      iconId='react'
+      accountIds={notification.sampleAccountIds}
+      statusId={notification.statusId}
+      timestamp={notification.latest_page_notification_at}
+      count={notification.notifications_count}
+      labelRenderer={labelRenderer}
+      unread={unread}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_reblog.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_reblog.tsx
@ -0,0 +1,45 @@
+import {FormattedMessage} from 'react-intl';
+
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import type {NotificationGroupReblog} from 'flavours/glitch/models/notification_group';
+import {useAppSelector} from 'flavours/glitch/store';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationGroupWithStatus} from './notification_group_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.reblog'
+    defaultMessage='{name} boosted your status'
+    values={values}
+  />
+);
+
+export const NotificationReblog: React.FC<{
+  notification: NotificationGroupReblog;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  const { statusId } = notification;
+  const statusAccount = useAppSelector(
+    (state) =>
+      state.accounts.get(state.statuses.getIn([statusId, 'account']) as string)
+        ?.acct,
+  );
+
+  return (
+    <NotificationGroupWithStatus
+      type='reblog'
+      icon={RepeatIcon}
+      iconId='repeat'
+      accountIds={notification.sampleAccountIds}
+      statusId={notification.statusId}
+      timestamp={notification.latest_page_notification_at}
+      count={notification.notifications_count}
+      labelRenderer={labelRenderer}
+      labelSeeMoreHref={
+        statusAccount ? `/@${statusAccount}/${statusId}/reblogs` : undefined
+      }
+      unread={unread}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_severed_relationships.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_severed_relationships.tsx
@ -0,0 +1,17 @@
+import {
+  RelationshipsSeveranceEvent
+} from 'flavours/glitch/features/notifications/components/relationships_severance_event';
+import type {NotificationGroupSeveredRelationships} from 'flavours/glitch/models/notification_group';
+
+export const NotificationSeveredRelationships: React.FC<{
+  notification: NotificationGroupSeveredRelationships;
+  unread: boolean;
+}> = ({ notification: { event }, unread }) => (
+  <RelationshipsSeveranceEvent
+    type={event.type}
+    target={event.target_name}
+    followersCount={event.followers_count}
+    followingCount={event.following_count}
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_status.tsx
@ -0,0 +1,31 @@
+import {FormattedMessage} from 'react-intl';
+
+import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
+import type {NotificationGroupStatus} from 'flavours/glitch/models/notification_group';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationWithStatus} from './notification_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.status'
+    defaultMessage='{name} just posted'
+    values={values}
+  />
+);
+
+export const NotificationStatus: React.FC<{
+  notification: NotificationGroupStatus;
+  unread: boolean;
+}> = ({ notification, unread }) => (
+  <NotificationWithStatus
+    type='status'
+    icon={NotificationsActiveIcon}
+    iconId='notifications-active'
+    accountIds={notification.sampleAccountIds}
+    count={notification.notifications_count}
+    statusId={notification.statusId}
+    labelRenderer={labelRenderer}
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_update.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_update.tsx
@ -0,0 +1,31 @@
+import {FormattedMessage} from 'react-intl';
+
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
+import type {NotificationGroupUpdate} from 'flavours/glitch/models/notification_group';
+
+import type {LabelRenderer} from './notification_group_with_status';
+import {NotificationWithStatus} from './notification_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.update'
+    defaultMessage='{name} edited a post'
+    values={values}
+  />
+);
+
+export const NotificationUpdate: React.FC<{
+  notification: NotificationGroupUpdate;
+  unread: boolean;
+}> = ({ notification, unread }) => (
+  <NotificationWithStatus
+    type='update'
+    icon={EditIcon}
+    iconId='edit'
+    accountIds={notification.sampleAccountIds}
+    count={notification.notifications_count}
+    statusId={notification.statusId}
+    labelRenderer={labelRenderer}
+    unread={unread}
+  />
+);
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx
@ -0,0 +1,109 @@
+import {useMemo} from 'react';
+
+import classNames from 'classnames';
+
+import {HotKeys} from 'react-hotkeys';
+
+import {replyComposeById} from 'flavours/glitch/actions/compose';
+import {toggleFavourite, toggleReblog,} from 'flavours/glitch/actions/interactions';
+import {navigateToStatus, toggleStatusSpoilers,} from 'flavours/glitch/actions/statuses';
+import type {IconProp} from 'flavours/glitch/components/icon';
+import {Icon} from 'flavours/glitch/components/icon';
+import Status from 'flavours/glitch/containers/status_container';
+import {useAppDispatch, useAppSelector} from 'flavours/glitch/store';
+
+import {NamesList} from './names_list';
+import type {LabelRenderer} from './notification_group_with_status';
+
+export const NotificationWithStatus: React.FC<{
+  type: string;
+  icon: IconProp;
+  iconId: string;
+  accountIds: string[];
+  statusId: string;
+  count: number;
+  labelRenderer: LabelRenderer;
+  unread: boolean;
+}> = ({
+  icon,
+  iconId,
+  accountIds,
+  statusId,
+  count,
+  labelRenderer,
+  type,
+  unread,
+}) => {
+  const dispatch = useAppDispatch();
+
+  const label = useMemo(
+    () =>
+      labelRenderer({
+        name: <NamesList accountIds={accountIds} total={count} />,
+      }),
+    [labelRenderer, accountIds, count],
+  );
+
+  const isPrivateMention = useAppSelector(
+    (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
+  );
+
+  const handlers = useMemo(
+    () => ({
+      open: () => {
+        dispatch(navigateToStatus(statusId));
+      },
+
+      reply: () => {
+        dispatch(replyComposeById(statusId));
+      },
+
+      boost: () => {
+        dispatch(toggleReblog(statusId));
+      },
+
+      favourite: () => {
+        dispatch(toggleFavourite(statusId));
+      },
+
+      toggleHidden: () => {
+        // TODO: glitch-soc is different and needs different handling of CWs
+        dispatch(toggleStatusSpoilers(statusId));
+      },
+    }),
+    [dispatch, statusId],
+  );
+
+  return (
+    <HotKeys handlers={handlers}>
+      <div
+        role='button'
+        className={classNames(
+          `notification-ungrouped focusable notification-ungrouped--${type}`,
+          {
+            'notification-ungrouped--unread': unread,
+            'notification-ungrouped--direct': isPrivateMention,
+          },
+        )}
+        tabIndex={0}
+      >
+        <div className='notification-ungrouped__header'>
+          <div className='notification-ungrouped__header__icon'>
+            <Icon icon={icon} id={iconId} />
+          </div>
+          {label}
+        </div>
+
+        <Status
+          // @ts-expect-error -- <Status> is not yet typed
+          id={statusId}
+          contextType='notifications'
+          withDismiss
+          skipPrepend
+          avatarSize={40}
+          unfocusable
+        />
+      </div>
+    </HotKeys>
+  );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/filter_bar.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/filter_bar.tsx
@ -0,0 +1,158 @@
+import type {PropsWithChildren} from 'react';
+import {useCallback} from 'react';
+
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
+
+import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
+import StarIcon from '@/material-icons/400-24px/star.svg?react';
+import {setNotificationsFilter} from 'flavours/glitch/actions/notification_groups';
+import {Icon} from 'flavours/glitch/components/icon';
+import {
+  selectSettingsNotificationsQuickFilterActive,
+  selectSettingsNotificationsQuickFilterAdvanced,
+} from 'flavours/glitch/selectors/settings';
+import {useAppDispatch, useAppSelector} from 'flavours/glitch/store';
+
+const tooltips = defineMessages({
+  mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
+  favourites: {
+    id: 'notifications.filter.favourites',
+    defaultMessage: 'Favorites',
+  },
+  reactions: {
+    id: 'notifications.filter.reactions',
+    defaultMessage: 'Reactions',
+  },
+  boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
+  polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
+  follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
+  statuses: {
+    id: 'notifications.filter.statuses',
+    defaultMessage: 'Updates from people you follow',
+  },
+});
+
+const BarButton: React.FC<
+  PropsWithChildren<{
+    selectedFilter: string;
+    type: string;
+    title?: string;
+  }>
+> = ({ selectedFilter, type, title, children }) => {
+  const dispatch = useAppDispatch();
+
+  const onClick = useCallback(() => {
+    void dispatch(setNotificationsFilter({ filterType: type }));
+  }, [dispatch, type]);
+
+  return (
+    <button
+      className={selectedFilter === type ? 'active' : ''}
+      onClick={onClick}
+      title={title}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const FilterBar: React.FC = () => {
+  const intl = useIntl();
+
+  const selectedFilter = useAppSelector(
+    selectSettingsNotificationsQuickFilterActive,
+  );
+  const advancedMode = useAppSelector(
+    selectSettingsNotificationsQuickFilterAdvanced,
+  );
+
+  if (advancedMode)
+    return (
+      <div className='notification__filter-bar'>
+        <BarButton selectedFilter={selectedFilter} type='all' key='all'>
+          <FormattedMessage
+            id='notifications.filter.all'
+            defaultMessage='All'
+          />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='mention'
+          key='mention'
+          title={intl.formatMessage(tooltips.mentions)}
+        >
+          <Icon id='reply-all' icon={ReplyAllIcon} />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='favourite'
+          key='favourite'
+          title={intl.formatMessage(tooltips.favourites)}
+        >
+          <Icon id='star' icon={StarIcon} />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='reaction'
+          key='reaction'
+          title={intl.formatMessage(tooltips.reactions)}
+        >
+          <Icon id='react' icon={MoodIcon} />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='reblog'
+          key='reblog'
+          title={intl.formatMessage(tooltips.boosts)}
+        >
+          <Icon id='retweet' icon={RepeatIcon} />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='poll'
+          key='poll'
+          title={intl.formatMessage(tooltips.polls)}
+        >
+          <Icon id='tasks' icon={InsertChartIcon} />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='status'
+          key='status'
+          title={intl.formatMessage(tooltips.statuses)}
+        >
+          <Icon id='home' icon={HomeIcon} />
+        </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='follow'
+          key='follow'
+          title={intl.formatMessage(tooltips.follows)}
+        >
+          <Icon id='user-plus' icon={PersonAddIcon} />
+        </BarButton>
+      </div>
+    );
+  else
+    return (
+      <div className='notification__filter-bar'>
+        <BarButton selectedFilter={selectedFilter} type='all' key='all'>
+          <FormattedMessage
+            id='notifications.filter.all'
+            defaultMessage='All'
+          />
+        </BarButton>
+        <BarButton selectedFilter={selectedFilter} type='mention' key='mention'>
+          <FormattedMessage
+            id='notifications.filter.mentions'
+            defaultMessage='Mentions'
+          />
+        </BarButton>
+      </div>
+    );
+};
--- a/app/javascript/flavours/glitch/features/notifications_v2/index.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/index.tsx
@ -0,0 +1,354 @@
+import {useCallback, useEffect, useMemo, useRef} from 'react';
+
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
+
+import {Helmet} from 'react-helmet';
+
+import {createSelector} from '@reduxjs/toolkit';
+
+import {useDebouncedCallback} from 'use-debounce';
+
+import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
+import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
+import {
+  fetchNotificationsGap,
+  loadPending,
+  markNotificationsAsRead,
+  mountNotifications,
+  unmountNotifications,
+  updateScrollPosition,
+} from 'flavours/glitch/actions/notification_groups';
+import {compareId} from 'flavours/glitch/compare_id';
+import {Icon} from 'flavours/glitch/components/icon';
+import {NotSignedInIndicator} from 'flavours/glitch/components/not_signed_in_indicator';
+import {useIdentity} from 'flavours/glitch/identity_context';
+import type {NotificationGap} from 'flavours/glitch/reducers/notification_groups';
+import {
+  selectPendingNotificationGroupsCount,
+  selectUnreadNotificationGroupsCount,
+} from 'flavours/glitch/selectors/notifications';
+import {
+  selectNeedsNotificationPermission,
+  selectSettingsNotificationsExcludedTypes,
+  selectSettingsNotificationsQuickFilterActive,
+  selectSettingsNotificationsQuickFilterShow,
+  selectSettingsNotificationsShowUnread,
+} from 'flavours/glitch/selectors/settings';
+import type {RootState} from 'flavours/glitch/store';
+import {useAppDispatch, useAppSelector} from 'flavours/glitch/store';
+
+import {addColumn, moveColumn, removeColumn} from '../../actions/columns';
+import {submitMarkers} from '../../actions/markers';
+import Column from '../../components/column';
+import {ColumnHeader} from '../../components/column_header';
+import {LoadGap} from '../../components/load_gap';
+import ScrollableList from '../../components/scrollable_list';
+import {FilteredNotificationsBanner} from '../notifications/components/filtered_notifications_banner';
+import NotificationsPermissionBanner from '../notifications/components/notifications_permission_banner';
+import ColumnSettingsContainer from '../notifications/containers/column_settings_container';
+
+import {NotificationGroup} from './components/notification_group';
+import {FilterBar} from './filter_bar';
+
+const messages = defineMessages({
+  title: { id: 'column.notifications', defaultMessage: 'Notifications' },
+  markAsRead: {
+    id: 'notifications.mark_as_read',
+    defaultMessage: 'Mark every notification as read',
+  },
+});
+
+const getNotifications = createSelector(
+  [
+    selectSettingsNotificationsQuickFilterShow,
+    selectSettingsNotificationsQuickFilterActive,
+    selectSettingsNotificationsExcludedTypes,
+    (state: RootState) => state.notificationGroups.groups,
+  ],
+  (showFilterBar, allowedType, excludedTypes, notifications) => {
+    if (!showFilterBar || allowedType === 'all') {
+      // used if user changed the notification settings after loading the notifications from the server
+      // otherwise a list of notifications will come pre-filtered from the backend
+      // we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
+      return notifications.filter(
+        (item) => item.type === 'gap' || !excludedTypes.includes(item.type),
+      );
+    }
+    return notifications.filter(
+      (item) => item.type === 'gap' || allowedType === item.type,
+    );
+  },
+);
+
+export const Notifications: React.FC<{
+  columnId?: string;
+  multiColumn?: boolean;
+}> = ({ columnId, multiColumn }) => {
+  const intl = useIntl();
+  const notifications = useAppSelector(getNotifications);
+  const dispatch = useAppDispatch();
+  const isLoading = useAppSelector((s) => s.notificationGroups.isLoading);
+  const hasMore = notifications.at(-1)?.type === 'gap';
+
+  const lastReadId = useAppSelector((s) =>
+    selectSettingsNotificationsShowUnread(s)
+      ? s.notificationGroups.lastReadId
+      : '0',
+  );
+
+  const numPending = useAppSelector(selectPendingNotificationGroupsCount);
+
+  const unreadNotificationsCount = useAppSelector(
+    selectUnreadNotificationGroupsCount,
+  );
+
+  const isUnread = unreadNotificationsCount > 0;
+
+  const canMarkAsRead =
+    useAppSelector(selectSettingsNotificationsShowUnread) &&
+    unreadNotificationsCount > 0;
+
+  const needsNotificationPermission = useAppSelector(
+    selectNeedsNotificationPermission,
+  );
+
+  const columnRef = useRef<Column>(null);
+
+  const selectChild = useCallback((index: number, alignTop: boolean) => {
+    const container = columnRef.current?.node as HTMLElement | undefined;
+
+    if (!container) return;
+
+    const element = container.querySelector<HTMLElement>(
+      `article:nth-of-type(${index + 1}) .focusable`,
+    );
+
+    if (element) {
+      if (alignTop && container.scrollTop > element.offsetTop) {
+        element.scrollIntoView(true);
+      } else if (
+        !alignTop &&
+        container.scrollTop + container.clientHeight <
+          element.offsetTop + element.offsetHeight
+      ) {
+        element.scrollIntoView(false);
+      }
+      element.focus();
+    }
+  }, []);
+
+  // Keep track of mounted components for unread notification handling
+  useEffect(() => {
+    dispatch(mountNotifications());
+
+    return () => {
+      dispatch(unmountNotifications());
+      dispatch(updateScrollPosition({ top: false }));
+    };
+  }, [dispatch]);
+
+  const handleLoadGap = useCallback(
+    (gap: NotificationGap) => {
+      void dispatch(fetchNotificationsGap({ gap }));
+    },
+    [dispatch],
+  );
+
+  const handleLoadOlder = useDebouncedCallback(
+    () => {
+      const gap = notifications.at(-1);
+      if (gap?.type === 'gap') void dispatch(fetchNotificationsGap({ gap }));
+    },
+    300,
+    { leading: true },
+  );
+
+  const handleLoadPending = useCallback(() => {
+    dispatch(loadPending());
+  }, [dispatch]);
+
+  const handleScrollToTop = useDebouncedCallback(() => {
+    dispatch(updateScrollPosition({ top: true }));
+  }, 100);
+
+  const handleScroll = useDebouncedCallback(() => {
+    dispatch(updateScrollPosition({ top: false }));
+  }, 100);
+
+  useEffect(() => {
+    return () => {
+      handleLoadOlder.cancel();
+      handleScrollToTop.cancel();
+      handleScroll.cancel();
+    };
+  }, [handleLoadOlder, handleScrollToTop, handleScroll]);
+
+  const handlePin = useCallback(() => {
+    if (columnId) {
+      dispatch(removeColumn(columnId));
+    } else {
+      dispatch(addColumn('NOTIFICATIONS', {}));
+    }
+  }, [columnId, dispatch]);
+
+  const handleMove = useCallback(
+    (dir: unknown) => {
+      dispatch(moveColumn(columnId, dir));
+    },
+    [dispatch, columnId],
+  );
+
+  const handleHeaderClick = useCallback(() => {
+    columnRef.current?.scrollTop();
+  }, []);
+
+  const handleMoveUp = useCallback(
+    (id: string) => {
+      const elementIndex =
+        notifications.findIndex(
+          (item) => item.type !== 'gap' && item.group_key === id,
+        ) - 1;
+      selectChild(elementIndex, true);
+    },
+    [notifications, selectChild],
+  );
+
+  const handleMoveDown = useCallback(
+    (id: string) => {
+      const elementIndex =
+        notifications.findIndex(
+          (item) => item.type !== 'gap' && item.group_key === id,
+        ) + 1;
+      selectChild(elementIndex, false);
+    },
+    [notifications, selectChild],
+  );
+
+  const handleMarkAsRead = useCallback(() => {
+    dispatch(markNotificationsAsRead());
+    void dispatch(submitMarkers({ immediate: true }));
+  }, [dispatch]);
+
+  const pinned = !!columnId;
+  const emptyMessage = (
+    <FormattedMessage
+      id='empty_column.notifications'
+      defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here."
+    />
+  );
+
+  const { signedIn } = useIdentity();
+
+  const filterBar = signedIn ? <FilterBar /> : null;
+
+  const scrollableContent = useMemo(() => {
+    if (notifications.length === 0 && !hasMore) return null;
+
+    return notifications.map((item) =>
+      item.type === 'gap' ? (
+        <LoadGap
+          key={`${item.maxId}-${item.sinceId}`}
+          disabled={isLoading}
+          param={item}
+          onClick={handleLoadGap}
+        />
+      ) : (
+        <NotificationGroup
+          key={item.group_key}
+          notificationGroupId={item.group_key}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+          unread={
+            lastReadId !== '0' &&
+            !!item.page_max_id &&
+            compareId(item.page_max_id, lastReadId) > 0
+          }
+        />
+      ),
+    );
+  }, [
+    notifications,
+    isLoading,
+    hasMore,
+    lastReadId,
+    handleLoadGap,
+    handleMoveUp,
+    handleMoveDown,
+  ]);
+
+  const prepend = (
+    <>
+      {needsNotificationPermission && <NotificationsPermissionBanner />}
+      <FilteredNotificationsBanner />
+    </>
+  );
+
+  const scrollContainer = signedIn ? (
+    <ScrollableList
+      scrollKey={`notifications-${columnId}`}
+      trackScroll={!pinned}
+      isLoading={isLoading}
+      showLoading={isLoading && notifications.length === 0}
+      hasMore={hasMore}
+      numPending={numPending}
+      prepend={prepend}
+      alwaysPrepend
+      emptyMessage={emptyMessage}
+      onLoadMore={handleLoadOlder}
+      onLoadPending={handleLoadPending}
+      onScrollToTop={handleScrollToTop}
+      onScroll={handleScroll}
+      bindToDocument={!multiColumn}
+    >
+      {scrollableContent}
+    </ScrollableList>
+  ) : (
+    <NotSignedInIndicator />
+  );
+
+  const extraButton = canMarkAsRead ? (
+    <button
+      aria-label={intl.formatMessage(messages.markAsRead)}
+      title={intl.formatMessage(messages.markAsRead)}
+      onClick={handleMarkAsRead}
+      className='column-header__button'
+    >
+      <Icon id='done-all' icon={DoneAllIcon} />
+    </button>
+  ) : null;
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      ref={columnRef}
+      label={intl.formatMessage(messages.title)}
+    >
+      <ColumnHeader
+        icon='bell'
+        iconComponent={NotificationsIcon}
+        active={isUnread}
+        title={intl.formatMessage(messages.title)}
+        onPin={handlePin}
+        onMove={handleMove}
+        onClick={handleHeaderClick}
+        pinned={pinned}
+        multiColumn={multiColumn}
+        extraButton={extraButton}
+      >
+        <ColumnSettingsContainer />
+      </ColumnHeader>
+
+      {filterBar}
+
+      {scrollContainer}
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Notifications;
--- a/app/javascript/flavours/glitch/features/notifications_wrapper.jsx
+++ b/app/javascript/flavours/glitch/features/notifications_wrapper.jsx
@ -0,0 +1,13 @@
+import Notifications from 'flavours/glitch/features/notifications';
+import Notifications_v2 from 'flavours/glitch/features/notifications_v2';
+import { useAppSelector } from 'flavours/glitch/store';
+
+export const NotificationsWrapper = (props) => {
+  const optedInGroupedNotifications = useAppSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
+
+  return (
+    optedInGroupedNotifications ? <Notifications_v2 {...props} /> : <Notifications {...props} />
+  );
+};
+
+export default NotificationsWrapper;
--- a/app/javascript/flavours/glitch/features/onboarding/index.jsx
+++ b/app/javascript/flavours/glitch/features/onboarding/index.jsx
@ -1,11 +1,11 @@
-import { useCallback } from 'react';
+import {useCallback} from 'react';

-import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';

-import { Helmet } from 'react-helmet';
-import { Link, Switch, Route, useHistory } from 'react-router-dom';
+import {Helmet} from 'react-helmet';
+import {Link, Route, Switch} from 'react-router-dom';

-import { useDispatch } from 'react-redux';
+import {useDispatch} from 'react-redux';


 import illustration from '@/images/elephant_ui_conversation.svg';
@ -14,17 +14,17 @@ import ArrowRightAltIcon from '@/material-icons/400-24px/arrow_right_alt.svg?rea
 import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import EditNoteIcon from '@/material-icons/400-24px/edit_note.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import { focusCompose } from 'flavours/glitch/actions/compose';
-import { Icon }  from 'flavours/glitch/components/icon';
+import {focusCompose} from 'flavours/glitch/actions/compose';
+import {Icon} from 'flavours/glitch/components/icon';
 import Column from 'flavours/glitch/features/ui/components/column';
-import { me } from 'flavours/glitch/initial_state';
-import { useAppSelector } from 'flavours/glitch/store';
-import { assetHost } from 'flavours/glitch/utils/config';
+import {me} from 'flavours/glitch/initial_state';
+import {useAppSelector} from 'flavours/glitch/store';
+import {assetHost} from 'flavours/glitch/utils/config';

-import { Step } from './components/step';
-import { Follows } from './follows';
-import { Profile } from './profile';
-import { Share } from './share';
+import {Step} from './components/step';
+import {Follows} from './follows';
+import {Profile} from './profile';
+import {Share} from './share';

 const messages = defineMessages({
  template: { id: 'onboarding.compose.template', defaultMessage: 'Hello #Mastodon!' },
@ -34,11 +34,10 @@ const Onboarding = () => {
  const account = useAppSelector(state => state.getIn(['accounts', me]));
  const dispatch = useDispatch();
  const intl = useIntl();
-  const history = useHistory();

  const handleComposeClick = useCallback(() => {
-    dispatch(focusCompose(history, intl.formatMessage(messages.template)));
-  }, [dispatch, intl, history]);
+    dispatch(focusCompose(intl.formatMessage(messages.template)));
+  }, [dispatch, intl]);

  return (
    <Column>
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
@ -1,27 +1,27 @@
 import PropTypes from 'prop-types';

-import { defineMessages, injectIntl } from 'react-intl';
+import {defineMessages, injectIntl} from 'react-intl';

 import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
+import {withRouter} from 'react-router-dom';

 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';

 import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
-import { replyCompose } from 'flavours/glitch/actions/compose';
-import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions';
-import { openModal } from 'flavours/glitch/actions/modal';
-import { IconButton } from 'flavours/glitch/components/icon_button';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-import { me, boostModal } from 'flavours/glitch/initial_state';
-import { makeGetStatus } from 'flavours/glitch/selectors';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
+import {replyCompose} from 'flavours/glitch/actions/compose';
+import {toggleFavourite, toggleReblog} from 'flavours/glitch/actions/interactions';
+import {openModal} from 'flavours/glitch/actions/modal';
+import {IconButton} from 'flavours/glitch/components/icon_button';
+import {identityContextPropShape, withIdentity} from 'flavours/glitch/identity_context';
+import {me} from 'flavours/glitch/initial_state';
+import {makeGetStatus} from 'flavours/glitch/selectors';
+import {WithRouterPropTypes} from 'flavours/glitch/utils/react_router';

 const messages = defineMessages({
  reply: { id: 'status.reply', defaultMessage: 'Reply' },
@ -63,13 +63,13 @@ class Footer extends ImmutablePureComponent {
  };

  _performReply = () => {
-    const { dispatch, status, onClose, history } = this.props;
+    const { dispatch, status, onClose } = this.props;

    if (onClose) {
      onClose(true);
    }

-    dispatch(replyCompose(status, history));
+    dispatch(replyCompose(status));
  };

  handleReplyClick = () => {
@ -101,16 +101,12 @@ class Footer extends ImmutablePureComponent {
    }
  };

-  handleFavouriteClick = () => {
+  handleFavouriteClick = e => {
    const { dispatch, status } = this.props;
    const { signedIn } = this.props.identity;

    if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
+      dispatch(toggleFavourite(status.get('id'), e && e.shiftKey));
    } else {
      dispatch(openModal({
        modalType: 'INTERACTION',
@ -123,23 +119,12 @@ class Footer extends ImmutablePureComponent {
    }
  };

-  _performReblog = (status, privacy) => {
-    const { dispatch } = this.props;
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  };
-
  handleReblogClick = e => {
    const { dispatch, status } = this.props;
    const { signedIn } = this.props.identity;

    if (signedIn) {
-      if (status.get('reblogged')) {
-        dispatch(unreblog({ statusId: status.get('id') }));
-      } else if ((e && e.shiftKey) || !boostModal) {
-        this._performReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this._performReblog } }));
-      }
+      dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
    } else {
      dispatch(openModal({
        modalType: 'INTERACTION',
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import {PureComponent} from 'react';

-import { defineMessages, injectIntl } from 'react-intl';
+import {defineMessages, injectIntl} from 'react-intl';

 import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';

 import ImmutablePropTypes from 'react-immutable-proptypes';

@ -21,14 +20,13 @@ import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
 import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
 import RepeatPrivateActiveIcon from '@/svg-icons/repeat_private_active.svg?react';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
-import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
+import {identityContextPropShape, withIdentity} from 'flavours/glitch/identity_context';
+import {PERMISSION_MANAGE_FEDERATION, PERMISSION_MANAGE_USERS} from 'flavours/glitch/permissions';
+import {accountAdminLink, statusAdminLink} from 'flavours/glitch/utils/backend_links';

-import { IconButton } from '../../../components/icon_button';
+import {IconButton} from '../../../components/icon_button';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
-import { me, maxReactions } from '../../../initial_state';
+import {maxReactions, me} from '../../../initial_state';
 import EmojiPickerDropdown from '../../compose/containers/emoji_picker_dropdown_container';

 const messages = defineMessages({
@ -82,7 +80,6 @@ class ActionBar extends PureComponent {
    onPin: PropTypes.func,
    onEmbed: PropTypes.func,
    intl: PropTypes.object.isRequired,
-    ...WithRouterPropTypes,
  };

  handleReplyClick = () => {
@ -106,23 +103,23 @@ class ActionBar extends PureComponent {
  };

  handleDeleteClick = () => {
-    this.props.onDelete(this.props.status, this.props.history);
+    this.props.onDelete(this.props.status);
  };

  handleRedraftClick = () => {
-    this.props.onDelete(this.props.status, this.props.history, true);
+    this.props.onDelete(this.props.status, true);
  };

  handleEditClick = () => {
-    this.props.onEdit(this.props.status, this.props.history);
+    this.props.onEdit(this.props.status);
  };

  handleDirectClick = () => {
-    this.props.onDirect(this.props.status.get('account'), this.props.history);
+    this.props.onDirect(this.props.status.get('account'));
  };

  handleMentionClick = () => {
-    this.props.onMention(this.props.status.get('account'), this.props.history);
+    this.props.onMention(this.props.status.get('account'));
  };

  handleMuteClick = () => {
@ -276,4 +273,4 @@ class ActionBar extends PureComponent {

 }

-export default withRouter(withIdentity(injectIntl(ActionBar)));
+export default withIdentity(injectIntl(ActionBar));
--- a/app/javascript/flavours/glitch/features/status/components/card.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.jsx
@ -130,7 +130,7 @@ export default class Card extends PureComponent {
    const showAuthor  = !!card.getIn(['authors', 0, 'accountId']);

    const description = (
-      <div className='status-card__content'>
+      <div className='status-card__content' dir='auto'>
        <span className='status-card__host'>
          <span lang={language}>{provider}</span>
          {card.get('published_at') && <> · <RelativeTimestamp timestamp={card.get('published_at')} /></>}
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
@ -23,6 +23,7 @@ import {DisplayName} from '../../../components/display_name';
 import MediaGallery from '../../../components/media_gallery';
 import StatusContent from '../../../components/status_content';
 import StatusReactions from '../../../components/status_reactions';
+import {visibleReactions} from '../../../initial_state';
 import Audio from '../../audio';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import Video from '../../video';
@ -311,13 +312,13 @@ class DetailedStatus extends ImmutablePureComponent {
            {...statusContentProps}
          />

-          <StatusReactions
+          {visibleReactions > 0 && (<StatusReactions
            statusId={status.get('id')}
            reactions={status.get('reactions')}
            addReaction={this.props.onReactionAdd}
            removeReaction={this.props.onReactionRemove}
            canReact={this.props.identity.signedIn}
-          />
+          />)}

          <div className='detailed-status__meta'>
            <div className='detailed-status__meta__line'>
--- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
+++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
@ -1,32 +1,17 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import {defineMessages, injectIntl} from 'react-intl';

-import { connect } from 'react-redux';
+import {connect} from 'react-redux';

-import { showAlertForError } from '../../../actions/alerts';
-import { initBlockModal } from '../../../actions/blocks';
-import {
-  replyCompose,
-  mentionCompose,
-  directCompose,
-} from '../../../actions/compose';
-import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
-  pin,
-  unpin,
-} from '../../../actions/interactions';
-import { openModal } from '../../../actions/modal';
-import { initMuteModal } from '../../../actions/mutes';
-import { initReport } from '../../../actions/reports';
-import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-} from '../../../actions/statuses';
-import { boostModal, deleteModal } from '../../../initial_state';
-import { makeGetStatus } from '../../../selectors';
+import {showAlertForError} from '../../../actions/alerts';
+import {initBlockModal} from '../../../actions/blocks';
+import {directCompose, mentionCompose, replyCompose,} from '../../../actions/compose';
+import {pin, toggleFavourite, toggleReblog, unpin,} from '../../../actions/interactions';
+import {openModal} from '../../../actions/modal';
+import {initMuteModal} from '../../../actions/mutes';
+import {initReport} from '../../../actions/reports';
+import {deleteStatus, muteStatus, unmuteStatus,} from '../../../actions/statuses';
+import {deleteModal} from '../../../initial_state';
+import {makeGetStatus} from '../../../selectors';
 import DetailedStatus from '../components/detailed_status';

 const messages = defineMessages({
@ -52,7 +37,7 @@ const makeMapStateToProps = () => {

 const mapDispatchToProps = (dispatch, { intl }) => ({

-  onReply (status, router) {
+  onReply (status) {
    dispatch((_, getState) => {
      let state = getState();
      if (state.getIn(['compose', 'text']).trim().length !== 0) {
@ -61,37 +46,21 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
          modalProps: {
            message: intl.formatMessage(messages.replyMessage),
            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status, router)),
+            onConfirm: () => dispatch(replyCompose(status)),
          },
        }));
      } else {
-        dispatch(replyCompose(status, router));
+        dispatch(replyCompose(status));
      }
    });
  },

-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  },
-
  onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
  },

-  onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+  onFavourite (status, e) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
  },

  onPin (status) {
@ -112,27 +81,27 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
    }));
  },

-  onDelete (status, history, withRedraft = false) {
+  onDelete (status, withRedraft = false) {
    if (!deleteModal) {
-      dispatch(deleteStatus(status.get('id'), history, withRedraft));
+      dispatch(deleteStatus(status.get('id'), withRedraft));
    } else {
      dispatch(openModal({
        modalType: 'CONFIRM',
        modalProps: {
          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
+          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
        },
      }));
    }
  },

-  onDirect (account, router) {
-    dispatch(directCompose(account, router));
+  onDirect (account) {
+    dispatch(directCompose(account));
  },

-  onMention (account, router) {
-    dispatch(mentionCompose(account, router));
+  onMention (account) {
+    dispatch(mentionCompose(account));
  },

  onOpenMedia (media, index, lang) {
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .15
 .16
 @ -1 +1 @@
 .3.3
 .3.4