Merge branch 'main' of https://github.com/glitch-soc/mastodon

2024-11-23 14:46:52 +09:00 · 2024-07-27 15:28:10 +09:00 · 2024-07-27 15:28:10 +09:00 · 7b8d855ec2
commit 7b8d855ec2
parent cb12947c42 8af71d021b
482 changed files with 12691 additions and 2677 deletions
--- 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)
@ -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)
@ -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,3 +1,5 @@
+import { browserHistory } from 'flavours/glitch/components/router';
+
 import api, { getLinks } from '../api';

 import {
@ -722,6 +724,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
@ -2,6 +2,9 @@ import { createAction } from '@reduxjs/toolkit';

 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
@ -4,6 +4,7 @@ import axios from 'axios';
 import { throttle } from 'lodash';

 import api from 'flavours/glitch/api';
+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';
@ -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) {
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@ -1,7 +1,11 @@
+import { boostModal, favouriteModal } from 'flavours/glitch/initial_state';
+
 import api, { getLinks } from '../api';

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

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

-export const addReaction = (statusId, name, url) => (dispatch, getState) => {
-  const status = getState().get('statuses').get(statusId);
-  let alreadyAdded = false;
-  if (status) {
-    const reaction = status.get('reactions').find(x => x.get('name') === name);
-    if (reaction && reaction.get('me')) {
-      alreadyAdded = true;
+function toggleReblogWithoutConfirmation(status, privacy) {
+  return (dispatch) => {
+    if (status.get('reblogged')) {
+      dispatch(unreblog({ statusId: status.get('id') }));
+    } else {
+      dispatch(reblog({ statusId: status.get('id'), privacy }));
    }
-  }
-  if (!alreadyAdded) {
-    dispatch(addReactionRequest(statusId, name, url));
-  }
+  };
+}

-  // encodeURIComponent is required for the Keycap Number Sign emoji, see:
-  // <https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932>
-  api(getState).post(`/api/v1/statuses/${statusId}/react/${encodeURIComponent(name)}`).then(() => {
-    dispatch(addReactionSuccess(statusId, name));
-  }).catch(err => {
-    if (!alreadyAdded) {
-      dispatch(addReactionFail(statusId, name, err));
+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 const addReactionRequest = (statusId, name, url) => ({
-  type: REACTION_ADD_REQUEST,
-  id: statusId,
-  name,
-  url,
-});
+export function toggleFavourite(statusId, skipModal = false) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let status = state.statuses.get(statusId);

-export const addReactionSuccess = (statusId, name) => ({
-  type: REACTION_ADD_SUCCESS,
-  id: statusId,
-  name,
-});
+    if (!status)
+      return;

-export const addReactionFail = (statusId, name, error) => ({
-  type: REACTION_ADD_FAIL,
-  id: statusId,
-  name,
-  error,
-});
+    // 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')));

-export const removeReaction = (statusId, name) => (dispatch, getState) => {
-  dispatch(removeReactionRequest(statusId, name));
-
-  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${encodeURIComponent(name)}`).then(() => {
-    dispatch(removeReactionSuccess(statusId, name));
-  }).catch(err => {
-    dispatch(removeReactionFail(statusId, name, err));
-  });
-};
-
-export const removeReactionRequest = (statusId, name) => ({
-  type: REACTION_REMOVE_REQUEST,
-  id: statusId,
-  name,
-});
-
-export const removeReactionSuccess = (statusId, name) => ({
-  type: REACTION_REMOVE_SUCCESS,
-  id: statusId,
-  name,
-});
-
-export const removeReactionFail = (statusId, name) => ({
-  type: REACTION_REMOVE_FAIL,
-  id: statusId,
-  name,
-});
+    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));
+      }
+    }
+  };
+}
--- a/app/javascript/flavours/glitch/actions/markers.ts
+++ b/app/javascript/flavours/glitch/actions/markers.ts
@ -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,144 @@
+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
@ -43,7 +43,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';

@ -187,7 +186,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');
@ -270,16 +269,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
@ -10,6 +10,7 @@ import {
  deleteAnnouncement,
 } from './announcements';
 import { updateConversations } from './conversations';
+import { processNewNotificationForGroups } from './notification_groups';
 import { updateNotifications, expandNotifications } from './notifications';
 import { updateStatus } from './statuses';
 import {
@ -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,145 @@
+// 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',
+  'reblog',
+  'mention',
+  'poll',
+  'status',
+  'update',
+  'admin.sign_up',
+  'admin.report',
+  'moderation_warning',
+  'severed_relationships',
+];
+
+export type NotificationWithStatusType =
+  | 'favourite'
+  | '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/load_gap.tsx
+++ b/app/javascript/flavours/glitch/components/load_gap.tsx
@ -9,18 +9,18 @@ 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/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
@ -121,6 +121,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({
@ -446,7 +448,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) => {
@ -463,7 +465,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 = () => {
@ -524,12 +526,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,
@ -539,13 +543,6 @@ class Status extends ImmutablePureComponent {
      onOpenVideo,
      onOpenMedia,
      notification,
-      hidden,
-      unread,
-      featured,
-      pictureInPicture,
-      previousId,
-      nextInReplyToId,
-      rootId,
      history,
      identity,
      ...other
@ -595,8 +592,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>
@ -616,8 +613,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}>
@ -797,17 +794,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 })}
@ -823,6 +820,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
@ -108,7 +108,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
@ -2,13 +2,11 @@ import PropTypes from 'prop-types';

 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
@ -75,12 +75,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
@ -10,8 +10,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';

 import { length } from 'stringz';

-import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
-
 import AutosuggestInput from '../../../components/autosuggest_input';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
 import { Button } from '../../../components/button';
@ -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
@ -12,6 +12,7 @@ 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
@ -82,8 +82,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 +110,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/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 { markConversationRead, deleteConversation } from 'flavours/glitch/actions/conversations';
 import { openModal } from 'flavours/glitch/actions/modal';
-import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'flavours/glitch/actions/statuses';
+import { muteStatus, unmuteStatus, toggleStatusSpoilers } 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 classNames from 'classnames';
+
 import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
 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 { setFilter, clearNotifications, requestBrowserPermission } from '../../../actions/notifications';
+import { setFilter, requestBrowserPermission } 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
@ -2,13 +2,9 @@ import { connect } from 'react-redux';

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

@ -31,32 +27,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
@ -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 { FormattedMessage, useIntl, defineMessages } 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,78 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage, useIntl, defineMessages } 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,151 @@
+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 { useAppSelector, useAppDispatch } 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 { 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 '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_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,15 @@
+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,115 @@
+import { useMemo } from 'react';
+
+import classNames from 'classnames';
+
+import { HotKeys } from 'react-hotkeys';
+
+import { replyComposeById } from 'flavours/glitch/actions/compose';
+import {
+  toggleReblog,
+  toggleFavourite,
+} 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 { useAppSelector, useAppDispatch } 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,145 @@
+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 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',
+  },
+  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='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,
+  updateScrollPosition,
+  loadPending,
+  markNotificationsAsRead,
+  mountNotifications,
+  unmountNotifications,
+} 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 {
+  selectUnreadNotificationGroupsCount,
+  selectPendingNotificationGroupsCount,
+} from 'flavours/glitch/selectors/notifications';
+import {
+  selectNeedsNotificationPermission,
+  selectSettingsNotificationsExcludedTypes,
+  selectSettingsNotificationsQuickFilterActive,
+  selectSettingsNotificationsQuickFilterShow,
+  selectSettingsNotificationsShowUnread,
+} from 'flavours/glitch/selectors/settings';
+import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
+import type { RootState } from 'flavours/glitch/store';
+
+import { addColumn, removeColumn, moveColumn } 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
@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';

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

 import { useDispatch } from 'react-redux';

@ -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
@ -15,11 +15,11 @@ 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 { toggleReblog, toggleFavourite } 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 { me } from 'flavours/glitch/initial_state';
 import { makeGetStatus } from 'flavours/glitch/selectors';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

@ -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
@ -4,7 +4,6 @@ import { PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';

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

 import ImmutablePropTypes from 'react-immutable-proptypes';

@ -24,7 +23,6 @@ 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 { IconButton } from '../../../components/icon_button';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
@ -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/containers/detailed_status_container.js
+++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
@ -10,10 +10,8 @@ import {
  directCompose,
 } from '../../../actions/compose';
 import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
+  toggleReblog,
+  toggleFavourite,
  pin,
  unpin,
 } from '../../../actions/interactions';
@ -25,7 +23,7 @@ import {
  unmuteStatus,
  deleteStatus,
 } from '../../../actions/statuses';
-import { boostModal, deleteModal } from '../../../initial_state';
+import { deleteModal } from '../../../initial_state';
 import { makeGetStatus } from '../../../selectors';
 import DetailedStatus from '../components/detailed_status';

@ -52,7 +50,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 +59,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 +94,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/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@ -32,12 +32,10 @@ import {
  directCompose,
 } from '../../actions/compose';
 import {
-  favourite,
-  unfavourite,
+  toggleFavourite,
  bookmark,
  unbookmark,
-  reblog,
-  unreblog,
+  toggleReblog,
  pin,
  unpin,
  addReaction,
@ -61,7 +59,7 @@ import {
 import ColumnHeader from '../../components/column_header';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import StatusContainer from '../../containers/status_container';
-import { boostModal, favouriteModal, deleteModal } from '../../initial_state';
+import { deleteModal } from '../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
 import Column from '../ui/components/column';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
@ -270,30 +268,13 @@ class Status extends ImmutablePureComponent {
    this.setState({ showMedia: !this.state.showMedia });
  };

-  handleModalFavourite = (status) => {
-    this.props.dispatch(favourite(status));
-  };

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

    if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        if ((e && e.shiftKey) || !favouriteModal) {
-          this.handleModalFavourite(status);
-        } else {
-          dispatch(openModal({
-            modalType: 'FAVOURITE',
-            modalProps: {
-              status,
-              onFavourite: this.handleModalFavourite,
-            },
-          }));
-        }
-      }
+      dispatch(toggleFavourite(status.get('id'), e && e.shiftKey));
    } else {
      dispatch(openModal({
        modalType: 'INTERACTION',
@ -339,11 +320,11 @@ class Status extends ImmutablePureComponent {
            message: intl.formatMessage(messages.replyMessage),
            confirm: intl.formatMessage(messages.replyConfirm),
            onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
-            onConfirm: () => dispatch(replyCompose(status, this.props.history)),
+            onConfirm: () => dispatch(replyCompose(status)),
          },
        }));
      } else {
-        dispatch(replyCompose(status, this.props.history));
+        dispatch(replyCompose(status));
      }
    } else {
      dispatch(openModal({
@ -357,28 +338,12 @@ class Status extends ImmutablePureComponent {
    }
  };

-  handleModalReblog = (status, privacy) => {
-    const { dispatch } = this.props;
-
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-    }
-  };
-
  handleReblogClick = (status, e) => {
-    const { settings, dispatch } = this.props;
+    const { dispatch } = this.props;
    const { signedIn } = this.props.identity;

    if (signedIn) {
-      if (settings.get('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.handleModalReblog, missingMediaDescription: true } }));
-      } else if ((e && e.shiftKey) || !boostModal) {
-        this.handleModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog } }));
-      }
+      dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
    } else {
      dispatch(openModal({
        modalType: 'INTERACTION',
@ -399,33 +364,33 @@ class Status extends ImmutablePureComponent {
    }
  };

-  handleDeleteClick = (status, history, withRedraft = false) => {
+  handleDeleteClick = (status, withRedraft = false) => {
    const { dispatch, intl } = this.props;

    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)),
        },
      }));
    }
  };

-  handleEditClick = (status, history) => {
-    this.props.dispatch(editStatus(status.get('id'), history));
+  handleEditClick = (status) => {
+    this.props.dispatch(editStatus(status.get('id')));
  };

-  handleDirectClick = (account, history) => {
-    this.props.dispatch(directCompose(account, history));
+  handleDirectClick = (account) => {
+    this.props.dispatch(directCompose(account));
  };

-  handleMentionClick = (account, history) => {
-    this.props.dispatch(mentionCompose(account, history));
+  handleMentionClick = (account) => {
+    this.props.dispatch(mentionCompose(account));
  };

  handleOpenMedia = (media, index, lang) => {
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx
@ -10,7 +10,7 @@ import { scrollRight } from '../../../scroll';
 import BundleContainer from '../containers/bundle_container';
 import {
  Compose,
-  Notifications,
+  NotificationsWrapper,
  HomeTimeline,
  CommunityTimeline,
  PublicTimeline,
@ -32,7 +32,7 @@ import NavigationPanel from './navigation_panel';
 const componentMap = {
  'COMPOSE': Compose,
  'HOME': HomeTimeline,
-  'NOTIFICATIONS': Notifications,
+  'NOTIFICATIONS': NotificationsWrapper,
  'PUBLIC': PublicTimeline,
  'REMOTE': PublicTimeline,
  'COMMUNITY': CommunityTimeline,
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
@ -33,6 +33,7 @@ import { NavigationPortal } from 'flavours/glitch/components/navigation_portal';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { timelinePreview, trendsEnabled } from 'flavours/glitch/initial_state';
 import { transientSingleColumn } from 'flavours/glitch/is_mobile';
+import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';

 import ColumnLink from './column_link';
@ -60,15 +61,19 @@ const messages = defineMessages({
 });

 const NotificationsLink = () => {
+  const optedInGroupedNotifications = useSelector((state) => state.getIn(['settings', 'notifications', 'groupingBeta'], false));
  const count = useSelector(state => state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0);
  const intl = useIntl();

+  const newCount = useSelector(selectUnreadNotificationGroupsCount);
+
  return (
    <ColumnLink
+      key='notifications'
      transparent
      to='/notifications'
-      icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={count} className='column-link__icon' />}
-      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={count} className='column-link__icon' />}
+      icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
+      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
      text={intl.formatMessage(messages.notifications)}
    />
  );
--- a/app/javascript/flavours/glitch/features/ui/index.jsx
+++ b/app/javascript/flavours/glitch/features/ui/index.jsx
@ -12,8 +12,9 @@ import Favico from 'favico.js';
 import { debounce } from 'lodash';
 import { HotKeys } from 'react-hotkeys';

-import { changeLayout } from 'flavours/glitch/actions/app';
+import { focusApp, unfocusApp, changeLayout } from 'flavours/glitch/actions/app';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
+import { initializeNotifications } from 'flavours/glitch/actions/notifications_migration';
 import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { HoverCardController } from 'flavours/glitch/components/hover_card_controller';
 import { Permalink } from 'flavours/glitch/components/permalink';
@ -24,10 +25,10 @@ import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
-import { expandNotifications, notificationsSetVisibility } from '../../actions/notifications';
+import { notificationsSetVisibility } from '../../actions/notifications';
 import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
 import { expandHomeTimeline } from '../../actions/timelines';
-import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding } from '../../initial_state';
+import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding, disableHoverCards } from '../../initial_state';

 import BundleColumnError from './components/bundle_column_error';
 import Header from './components/header';
@ -51,7 +52,7 @@ import {
  Favourites,
  DirectTimeline,
  HashtagTimeline,
-  Notifications,
+  NotificationsWrapper,
  NotificationRequests,
  NotificationRequest,
  FollowRequests,
@ -74,6 +75,7 @@ import {
 } from './util/async-components';
 import { ColumnsContextProvider } from './util/columns_context';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
+
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import '../../components/status';
@ -214,7 +216,7 @@ class SwitchingColumnsArea extends PureComponent {
            <WrappedRoute path='/tags/:id' component={HashtagTimeline} content={children} />
            <WrappedRoute path='/links/:url' component={LinkTimeline} content={children} />
            <WrappedRoute path='/lists/:id' component={ListTimeline} content={children} />
-            <WrappedRoute path='/notifications' component={Notifications} content={children} exact />
+            <WrappedRoute path='/notifications' component={NotificationsWrapper} content={children} exact />
            <WrappedRoute path='/notifications/requests' component={NotificationRequests} content={children} exact />
            <WrappedRoute path='/notifications/requests/:id' component={NotificationRequest} content={children} exact />
            <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
@ -304,7 +306,10 @@ class UI extends PureComponent {
    const visibility = !document[this.visibilityHiddenProp];
    this.props.dispatch(notificationsSetVisibility(visibility));
    if (visibility) {
+      this.props.dispatch(focusApp());
      this.props.dispatch(submitMarkers({ immediate: true }));
+    } else {
+      this.props.dispatch(unfocusApp());
    }
  };

@ -419,7 +424,7 @@ class UI extends PureComponent {
    if (signedIn) {
      this.props.dispatch(fetchMarkers());
      this.props.dispatch(expandHomeTimeline());
-      this.props.dispatch(expandNotifications());
+      this.props.dispatch(initializeNotifications());
      this.props.dispatch(fetchServerTranslationLanguages());

      setTimeout(() => this.props.dispatch(fetchServer()), 3000);
@ -651,7 +656,7 @@ class UI extends PureComponent {

          {layout !== 'mobile' && <PictureInPicture />}
          <NotificationsContainer />
-          <HoverCardController />
+          {!disableHoverCards && <HoverCardController />}
          <LoadingBarContainer className='loading-bar' />
          <ModalContainer />
          <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
--- a/app/javascript/flavours/glitch/features/ui/util/async-components.js
+++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js
@ -7,7 +7,15 @@ export function Compose () {
 }

 export function Notifications () {
-  return import(/* webpackChunkName: "flavours/glitch/async/notifications" */'../../notifications');
+  return import(/* webpackChunkName: "flavours/glitch/async/notifications_v1" */'../../notifications');
+}
+
+export function Notifications_v2 () {
+  return import(/* webpackChunkName: "flavours/glitch/async/notifications_v2" */'../../notifications_v2');
+}
+
+export function NotificationsWrapper () {
+  return import(/* webpackChunkName: "flavours/glitch/async/notifications" */'../../notifications_wrapper');
 }

 export function HomeTimeline () {
--- a/app/javascript/flavours/glitch/initial_state.js
+++ b/app/javascript/flavours/glitch/initial_state.js
@ -17,6 +17,7 @@
 * @property {boolean} crop_images
 * @property {boolean=} delete_modal
 * @property {boolean=} disable_swiping
+ * @property {boolean=} disable_hover_cards
 * @property {string=} disabled_account_id
 * @property {string} display_media
 * @property {string} domain
@ -109,6 +110,7 @@ export const boostModal = getMeta('boost_modal');
 export const cropImages = getMeta('crop_images');
 export const deleteModal = getMeta('delete_modal');
 export const disableSwiping = getMeta('disable_swiping');
+export const disableHoverCards = getMeta('disable_hover_cards');
 export const disabledAccountId = getMeta('disabled_account_id');
 export const displayMedia = getMeta('display_media');
 export const domain = getMeta('domain');
--- a/app/javascript/flavours/glitch/locales/de.json
+++ b/app/javascript/flavours/glitch/locales/de.json
@ -154,6 +154,5 @@
  "status.in_reply_to": "Dieser Toot ist eine Antwort",
  "status.is_poll": "Dieser Toot ist eine Umfrage",
  "status.local_only": "Nur auf deiner Instanz sichtbar",
-  "status.uncollapse": "Ausklappen",
-  "suggestions.dismiss": "Vorschlag ablehnen"
+  "status.uncollapse": "Ausklappen"
 }
--- a/app/javascript/flavours/glitch/locales/es-AR.json
+++ b/app/javascript/flavours/glitch/locales/es-AR.json
@ -155,6 +155,5 @@
  "status.in_reply_to": "Esta publicación es una respuesta",
  "status.is_poll": "Esta publicación es una encuesta",
  "status.local_only": "Sólo visible para tu instancia",
-  "status.uncollapse": "Descolapsar",
-  "suggestions.dismiss": "Descartar sugerencia"
+  "status.uncollapse": "Descolapsar"
 }
--- a/app/javascript/flavours/glitch/locales/ko.json
+++ b/app/javascript/flavours/glitch/locales/ko.json
@ -25,6 +25,9 @@
  "compose.content-type.plain_meta": "고급 양식 없이 작성",
  "compose.disable_threaded_mode": "글타래 모드 비활성화",
  "compose.enable_threaded_mode": "글타래 모드 활성화",
+  "compose_form.sensitive.hide": "{count, plural, other {미디어를 민감함으로 표시}}",
+  "compose_form.sensitive.marked": "{count, plural, other {미디어가 민감함으로 표시되었습니다}}",
+  "compose_form.sensitive.unmarked": "{count, plural, other {미디어가 민감함으로 표시되지 않았습니다}}",
  "confirmation_modal.do_not_ask_again": "다음부터 확인창을 띄우지 않기",
  "confirmations.deprecated_settings.confirm": "마스토돈 설정 사용",
  "confirmations.deprecated_settings.message": "사용하던 몇몇 기기별 글리치 {app_settings}은 마스토돈 {preferences}으로 대체되었습니다:",
@ -61,6 +64,7 @@
  "notification_purge.btn_invert": "선택반전",
  "notification_purge.btn_none": "전체선택해제",
  "notification_purge.start": "알림 삭제모드로 들어가기",
+  "notifications.column_settings.filter_bar.show_bar": "필터 막대 표시",
  "notifications.marked_clear": "선택된 알림 모두 삭제",
  "notifications.marked_clear_confirmation": "정말로 선택된 알림들을 영구적으로 삭제할까요?",
  "settings.always_show_spoilers_field": "열람주의 항목을 언제나 활성화",
@ -124,6 +128,7 @@
  "settings.shared_settings_link": "사용자 설정",
  "settings.show_action_bar": "접힌 글에 액션 버튼들 보이기",
  "settings.show_content_type_choice": "글을 작성할 때 콘텐트 타입을 고를 수 있도록 합니다",
+  "settings.show_published_toast": "게시물을 게시/저장할 때 토스트 표시",
  "settings.show_reply_counter": "대략적인 답글 개수를 표시합니다",
  "settings.side_arm": "보조 작성 버튼:",
  "settings.side_arm.none": "없음",
--- a/app/javascript/flavours/glitch/locales/zh-CN.json
+++ b/app/javascript/flavours/glitch/locales/zh-CN.json
@ -155,6 +155,5 @@
  "status.in_reply_to": "此嘟文是回复",
  "status.is_poll": "此嘟文是投票",
  "status.local_only": "此嘟文仅本站可见",
-  "status.uncollapse": "展开",
-  "suggestions.dismiss": "关闭建议"
+  "status.uncollapse": "展开"
 }
--- a/app/javascript/flavours/glitch/locales/zh-TW.json
+++ b/app/javascript/flavours/glitch/locales/zh-TW.json
@ -151,6 +151,5 @@
  "status.in_reply_to": "貼文有回覆",
  "status.is_poll": "貼文有投票",
  "status.local_only": "只在此實例可見",
-  "status.uncollapse": "展開",
-  "suggestions.dismiss": "關閉建議"
+  "status.uncollapse": "展開"
 }
--- a/app/javascript/flavours/glitch/models/notification_group.ts
+++ b/app/javascript/flavours/glitch/models/notification_group.ts
@ -0,0 +1,207 @@
+import type {
+  ApiAccountRelationshipSeveranceEventJSON,
+  ApiAccountWarningJSON,
+  BaseNotificationGroupJSON,
+  ApiNotificationGroupJSON,
+  ApiNotificationJSON,
+  NotificationType,
+  NotificationWithStatusType,
+} from 'flavours/glitch/api_types/notifications';
+import type { ApiReportJSON } from 'flavours/glitch/api_types/reports';
+
+// Maximum number of avatars displayed in a notification group
+// This corresponds to the max lenght of `group.sampleAccountIds`
+export const NOTIFICATIONS_GROUP_MAX_AVATARS = 8;
+
+interface BaseNotificationGroup
+  extends Omit<BaseNotificationGroupJSON, 'sample_accounts'> {
+  sampleAccountIds: string[];
+}
+
+interface BaseNotificationWithStatus<Type extends NotificationWithStatusType>
+  extends BaseNotificationGroup {
+  type: Type;
+  statusId: string;
+}
+
+interface BaseNotification<Type extends NotificationType>
+  extends BaseNotificationGroup {
+  type: Type;
+}
+
+export type NotificationGroupFavourite =
+  BaseNotificationWithStatus<'favourite'>;
+export type NotificationGroupReblog = BaseNotificationWithStatus<'reblog'>;
+export type NotificationGroupStatus = BaseNotificationWithStatus<'status'>;
+export type NotificationGroupMention = BaseNotificationWithStatus<'mention'>;
+export type NotificationGroupPoll = BaseNotificationWithStatus<'poll'>;
+export type NotificationGroupUpdate = BaseNotificationWithStatus<'update'>;
+export type NotificationGroupFollow = BaseNotification<'follow'>;
+export type NotificationGroupFollowRequest = BaseNotification<'follow_request'>;
+export type NotificationGroupAdminSignUp = BaseNotification<'admin.sign_up'>;
+
+export type AccountWarningAction =
+  | 'none'
+  | 'disable'
+  | 'mark_statuses_as_sensitive'
+  | 'delete_statuses'
+  | 'sensitive'
+  | 'silence'
+  | 'suspend';
+export interface AccountWarning
+  extends Omit<ApiAccountWarningJSON, 'target_account'> {
+  targetAccountId: string;
+}
+
+export interface NotificationGroupModerationWarning
+  extends BaseNotification<'moderation_warning'> {
+  moderationWarning: AccountWarning;
+}
+
+type AccountRelationshipSeveranceEvent =
+  ApiAccountRelationshipSeveranceEventJSON;
+export interface NotificationGroupSeveredRelationships
+  extends BaseNotification<'severed_relationships'> {
+  event: AccountRelationshipSeveranceEvent;
+}
+
+interface Report extends Omit<ApiReportJSON, 'target_account'> {
+  targetAccountId: string;
+}
+
+export interface NotificationGroupAdminReport
+  extends BaseNotification<'admin.report'> {
+  report: Report;
+}
+
+export type NotificationGroup =
+  | NotificationGroupFavourite
+  | NotificationGroupReblog
+  | NotificationGroupStatus
+  | NotificationGroupMention
+  | NotificationGroupPoll
+  | NotificationGroupUpdate
+  | NotificationGroupFollow
+  | NotificationGroupFollowRequest
+  | NotificationGroupModerationWarning
+  | NotificationGroupSeveredRelationships
+  | NotificationGroupAdminSignUp
+  | NotificationGroupAdminReport;
+
+function createReportFromJSON(reportJSON: ApiReportJSON): Report {
+  const { target_account, ...report } = reportJSON;
+  return {
+    targetAccountId: target_account.id,
+    ...report,
+  };
+}
+
+function createAccountWarningFromJSON(
+  warningJSON: ApiAccountWarningJSON,
+): AccountWarning {
+  const { target_account, ...warning } = warningJSON;
+  return {
+    targetAccountId: target_account.id,
+    ...warning,
+  };
+}
+
+function createAccountRelationshipSeveranceEventFromJSON(
+  eventJson: ApiAccountRelationshipSeveranceEventJSON,
+): AccountRelationshipSeveranceEvent {
+  return eventJson;
+}
+
+export function createNotificationGroupFromJSON(
+  groupJson: ApiNotificationGroupJSON,
+): NotificationGroup {
+  const { sample_accounts, ...group } = groupJson;
+  const sampleAccountIds = sample_accounts.map((account) => account.id);
+
+  switch (group.type) {
+    case 'favourite':
+    case 'reblog':
+    case 'status':
+    case 'mention':
+    case 'poll':
+    case 'update': {
+      const { status, ...groupWithoutStatus } = group;
+      return {
+        statusId: status.id,
+        sampleAccountIds,
+        ...groupWithoutStatus,
+      };
+    }
+    case 'admin.report': {
+      const { report, ...groupWithoutTargetAccount } = group;
+      return {
+        report: createReportFromJSON(report),
+        sampleAccountIds,
+        ...groupWithoutTargetAccount,
+      };
+    }
+    case 'severed_relationships':
+      return {
+        ...group,
+        event: createAccountRelationshipSeveranceEventFromJSON(group.event),
+        sampleAccountIds,
+      };
+
+    case 'moderation_warning': {
+      const { moderation_warning, ...groupWithoutModerationWarning } = group;
+      return {
+        ...groupWithoutModerationWarning,
+        moderationWarning: createAccountWarningFromJSON(moderation_warning),
+        sampleAccountIds,
+      };
+    }
+    default:
+      return {
+        sampleAccountIds,
+        ...group,
+      };
+  }
+}
+
+export function createNotificationGroupFromNotificationJSON(
+  notification: ApiNotificationJSON,
+) {
+  const group = {
+    sampleAccountIds: [notification.account.id],
+    group_key: notification.group_key,
+    notifications_count: 1,
+    type: notification.type,
+    most_recent_notification_id: notification.id,
+    page_min_id: notification.id,
+    page_max_id: notification.id,
+    latest_page_notification_at: notification.created_at,
+  } as NotificationGroup;
+
+  switch (notification.type) {
+    case 'favourite':
+    case 'reblog':
+    case 'status':
+    case 'mention':
+    case 'poll':
+    case 'update':
+      return { ...group, statusId: notification.status.id };
+    case 'admin.report':
+      return { ...group, report: createReportFromJSON(notification.report) };
+    case 'severed_relationships':
+      return {
+        ...group,
+        event: createAccountRelationshipSeveranceEventFromJSON(
+          notification.event,
+        ),
+      };
+    case 'moderation_warning':
+      return {
+        ...group,
+        moderationWarning: createAccountWarningFromJSON(
+          notification.moderation_warning,
+        ),
+      };
+    default:
+      return group;
+  }
+}
--- a/app/javascript/flavours/glitch/reducers/index.ts
+++ b/app/javascript/flavours/glitch/reducers/index.ts
@ -25,6 +25,7 @@ import { markersReducer } from './markers';
 import media_attachments from './media_attachments';
 import meta from './meta';
 import { modalReducer } from './modal';
+import { notificationGroupsReducer } from './notification_groups';
 import { notificationPolicyReducer } from './notification_policy';
 import { notificationRequestsReducer } from './notification_requests';
 import notifications from './notifications';
@ -68,6 +69,7 @@ const reducers = {
  search,
  media_attachments,
  notifications,
+  notificationGroups: notificationGroupsReducer,
  height_cache,
  custom_emojis,
  lists,
--- a/app/javascript/flavours/glitch/reducers/markers.ts
+++ b/app/javascript/flavours/glitch/reducers/markers.ts
@ -1,6 +1,10 @@
 import { createReducer } from '@reduxjs/toolkit';

-import { submitMarkersAction } from 'flavours/glitch/actions/markers';
+import {
+  submitMarkersAction,
+  fetchMarkers,
+} from 'flavours/glitch/actions/markers';
+import { compareId } from 'flavours/glitch/compare_id';

 const initialState = {
  home: '0',
@ -15,4 +19,23 @@ export const markersReducer = createReducer(initialState, (builder) => {
      if (notifications) state.notifications = notifications;
    },
  );
+  builder.addCase(
+    fetchMarkers.fulfilled,
+    (
+      state,
+      {
+        payload: {
+          markers: { home, notifications },
+        },
+      },
+    ) => {
+      if (home && compareId(home.last_read_id, state.home) > 0)
+        state.home = home.last_read_id;
+      if (
+        notifications &&
+        compareId(notifications.last_read_id, state.notifications) > 0
+      )
+        state.notifications = notifications.last_read_id;
+    },
+  );
 });
--- a/app/javascript/flavours/glitch/reducers/notification_groups.ts
+++ b/app/javascript/flavours/glitch/reducers/notification_groups.ts
@ -0,0 +1,508 @@
+import { createReducer, isAnyOf } from '@reduxjs/toolkit';
+
+import {
+  authorizeFollowRequestSuccess,
+  blockAccountSuccess,
+  muteAccountSuccess,
+  rejectFollowRequestSuccess,
+} from 'flavours/glitch/actions/accounts_typed';
+import { focusApp, unfocusApp } from 'flavours/glitch/actions/app';
+import { blockDomainSuccess } from 'flavours/glitch/actions/domain_blocks_typed';
+import { fetchMarkers } from 'flavours/glitch/actions/markers';
+import {
+  clearNotifications,
+  fetchNotifications,
+  fetchNotificationsGap,
+  processNewNotificationForGroups,
+  loadPending,
+  updateScrollPosition,
+  markNotificationsAsRead,
+  mountNotifications,
+  unmountNotifications,
+} from 'flavours/glitch/actions/notification_groups';
+import {
+  disconnectTimeline,
+  timelineDelete,
+} from 'flavours/glitch/actions/timelines_typed';
+import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';
+import { compareId } from 'flavours/glitch/compare_id';
+import { usePendingItems } from 'flavours/glitch/initial_state';
+import {
+  NOTIFICATIONS_GROUP_MAX_AVATARS,
+  createNotificationGroupFromJSON,
+  createNotificationGroupFromNotificationJSON,
+} from 'flavours/glitch/models/notification_group';
+import type { NotificationGroup } from 'flavours/glitch/models/notification_group';
+
+const NOTIFICATIONS_TRIM_LIMIT = 50;
+
+export interface NotificationGap {
+  type: 'gap';
+  maxId?: string;
+  sinceId?: string;
+}
+
+interface NotificationGroupsState {
+  groups: (NotificationGroup | NotificationGap)[];
+  pendingGroups: (NotificationGroup | NotificationGap)[];
+  scrolledToTop: boolean;
+  isLoading: boolean;
+  lastReadId: string;
+  mounted: number;
+  isTabVisible: boolean;
+}
+
+const initialState: NotificationGroupsState = {
+  groups: [],
+  pendingGroups: [], // holds pending groups in slow mode
+  scrolledToTop: false,
+  isLoading: false,
+  // The following properties are used to track unread notifications
+  lastReadId: '0', // used for unread notifications
+  mounted: 0, // number of mounted notification list components, usually 0 or 1
+  isTabVisible: true,
+};
+
+function filterNotificationsForAccounts(
+  groups: NotificationGroupsState['groups'],
+  accountIds: string[],
+  onlyForType?: string,
+) {
+  groups = groups
+    .map((group) => {
+      if (
+        group.type !== 'gap' &&
+        (!onlyForType || group.type === onlyForType)
+      ) {
+        const previousLength = group.sampleAccountIds.length;
+
+        group.sampleAccountIds = group.sampleAccountIds.filter(
+          (id) => !accountIds.includes(id),
+        );
+
+        const newLength = group.sampleAccountIds.length;
+        const removed = previousLength - newLength;
+
+        group.notifications_count -= removed;
+      }
+
+      return group;
+    })
+    .filter(
+      (group) => group.type === 'gap' || group.sampleAccountIds.length > 0,
+    );
+  mergeGaps(groups);
+  return groups;
+}
+
+function filterNotificationsForStatus(
+  groups: NotificationGroupsState['groups'],
+  statusId: string,
+) {
+  groups = groups.filter(
+    (group) =>
+      group.type === 'gap' ||
+      !('statusId' in group) ||
+      group.statusId !== statusId,
+  );
+  mergeGaps(groups);
+  return groups;
+}
+
+function removeNotificationsForAccounts(
+  state: NotificationGroupsState,
+  accountIds: string[],
+  onlyForType?: string,
+) {
+  state.groups = filterNotificationsForAccounts(
+    state.groups,
+    accountIds,
+    onlyForType,
+  );
+  state.pendingGroups = filterNotificationsForAccounts(
+    state.pendingGroups,
+    accountIds,
+    onlyForType,
+  );
+}
+
+function removeNotificationsForStatus(
+  state: NotificationGroupsState,
+  statusId: string,
+) {
+  state.groups = filterNotificationsForStatus(state.groups, statusId);
+  state.pendingGroups = filterNotificationsForStatus(
+    state.pendingGroups,
+    statusId,
+  );
+}
+
+function isNotificationGroup(
+  groupOrGap: NotificationGroup | NotificationGap,
+): groupOrGap is NotificationGroup {
+  return groupOrGap.type !== 'gap';
+}
+
+// Merge adjacent gaps in `groups` in-place
+function mergeGaps(groups: NotificationGroupsState['groups']) {
+  for (let i = 0; i < groups.length; i++) {
+    const firstGroupOrGap = groups[i];
+
+    if (firstGroupOrGap?.type === 'gap') {
+      let lastGap = firstGroupOrGap;
+      let j = i + 1;
+
+      for (; j < groups.length; j++) {
+        const groupOrGap = groups[j];
+        if (groupOrGap?.type === 'gap') lastGap = groupOrGap;
+        else break;
+      }
+
+      if (j - i > 1) {
+        groups.splice(i, j - i, {
+          type: 'gap',
+          maxId: firstGroupOrGap.maxId,
+          sinceId: lastGap.sinceId,
+        });
+      }
+    }
+  }
+}
+
+// Checks if `groups[index-1]` and `groups[index]` are gaps, and merge them in-place if they are
+function mergeGapsAround(
+  groups: NotificationGroupsState['groups'],
+  index: number,
+) {
+  if (index > 0) {
+    const potentialFirstGap = groups[index - 1];
+    const potentialSecondGap = groups[index];
+
+    if (
+      potentialFirstGap?.type === 'gap' &&
+      potentialSecondGap?.type === 'gap'
+    ) {
+      groups.splice(index - 1, 2, {
+        type: 'gap',
+        maxId: potentialFirstGap.maxId,
+        sinceId: potentialSecondGap.sinceId,
+      });
+    }
+  }
+}
+
+function processNewNotification(
+  groups: NotificationGroupsState['groups'],
+  notification: ApiNotificationJSON,
+) {
+  const existingGroupIndex = groups.findIndex(
+    (group) =>
+      group.type !== 'gap' && group.group_key === notification.group_key,
+  );
+
+  // In any case, we are going to add a group at the top
+  // If there is currently a gap at the top, now is the time to update it
+  if (groups.length > 0 && groups[0]?.type === 'gap') {
+    groups[0].maxId = notification.id;
+  }
+
+  if (existingGroupIndex > -1) {
+    const existingGroup = groups[existingGroupIndex];
+
+    if (
+      existingGroup &&
+      existingGroup.type !== 'gap' &&
+      !existingGroup.sampleAccountIds.includes(notification.account.id) // This can happen for example if you like, then unlike, then like again the same post
+    ) {
+      // Update the existing group
+      if (
+        existingGroup.sampleAccountIds.unshift(notification.account.id) >
+        NOTIFICATIONS_GROUP_MAX_AVATARS
+      )
+        existingGroup.sampleAccountIds.pop();
+
+      existingGroup.most_recent_notification_id = notification.id;
+      existingGroup.page_max_id = notification.id;
+      existingGroup.latest_page_notification_at = notification.created_at;
+      existingGroup.notifications_count += 1;
+
+      groups.splice(existingGroupIndex, 1);
+      mergeGapsAround(groups, existingGroupIndex);
+
+      groups.unshift(existingGroup);
+    }
+  } else {
+    // Create a new group
+    groups.unshift(createNotificationGroupFromNotificationJSON(notification));
+  }
+}
+
+function trimNotifications(state: NotificationGroupsState) {
+  if (state.scrolledToTop) {
+    state.groups.splice(NOTIFICATIONS_TRIM_LIMIT);
+  }
+}
+
+function shouldMarkNewNotificationsAsRead(
+  {
+    isTabVisible,
+    scrolledToTop,
+    mounted,
+    lastReadId,
+    groups,
+  }: NotificationGroupsState,
+  ignoreScroll = false,
+) {
+  const isMounted = mounted > 0;
+  const oldestGroup = groups.findLast(isNotificationGroup);
+  const hasMore = groups.at(-1)?.type === 'gap';
+  const oldestGroupReached =
+    !hasMore ||
+    lastReadId === '0' ||
+    (oldestGroup?.page_min_id &&
+      compareId(oldestGroup.page_min_id, lastReadId) <= 0);
+
+  return (
+    isTabVisible &&
+    (ignoreScroll || scrolledToTop) &&
+    isMounted &&
+    oldestGroupReached
+  );
+}
+
+function updateLastReadId(
+  state: NotificationGroupsState,
+  group: NotificationGroup | undefined = undefined,
+) {
+  if (shouldMarkNewNotificationsAsRead(state)) {
+    group = group ?? state.groups.find(isNotificationGroup);
+    if (
+      group?.page_max_id &&
+      compareId(state.lastReadId, group.page_max_id) < 0
+    )
+      state.lastReadId = group.page_max_id;
+  }
+}
+
+export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
+  initialState,
+  (builder) => {
+    builder
+      .addCase(fetchNotifications.fulfilled, (state, action) => {
+        state.groups = action.payload.map((json) =>
+          json.type === 'gap' ? json : createNotificationGroupFromJSON(json),
+        );
+        state.isLoading = false;
+        updateLastReadId(state);
+      })
+      .addCase(fetchNotificationsGap.fulfilled, (state, action) => {
+        const { notifications } = action.payload;
+
+        // find the gap in the existing notifications
+        const gapIndex = state.groups.findIndex(
+          (groupOrGap) =>
+            groupOrGap.type === 'gap' &&
+            groupOrGap.sinceId === action.meta.arg.gap.sinceId &&
+            groupOrGap.maxId === action.meta.arg.gap.maxId,
+        );
+
+        if (gapIndex < 0)
+          // We do not know where to insert, let's return
+          return;
+
+        // Filling a disconnection gap means we're getting historical data
+        // about groups we may know or may not know about.
+
+        // The notifications timeline is split in two by the gap, with
+        // group information newer than the gap, and group information older
+        // than the gap.
+
+        // Filling a gap should not touch anything before the gap, so any
+        // information on groups already appearing before the gap should be
+        // discarded, while any information on groups appearing after the gap
+        // can be updated and re-ordered.
+
+        const oldestPageNotification = notifications.at(-1)?.page_min_id;
+
+        // replace the gap with the notifications + a new gap
+
+        const newerGroupKeys = state.groups
+          .slice(0, gapIndex)
+          .filter(isNotificationGroup)
+          .map((group) => group.group_key);
+
+        const toInsert: NotificationGroupsState['groups'] = notifications
+          .map((json) => createNotificationGroupFromJSON(json))
+          .filter(
+            (notification) => !newerGroupKeys.includes(notification.group_key),
+          );
+
+        const apiGroupKeys = (toInsert as NotificationGroup[]).map(
+          (group) => group.group_key,
+        );
+
+        const sinceId = action.meta.arg.gap.sinceId;
+        if (
+          notifications.length > 0 &&
+          !(
+            oldestPageNotification &&
+            sinceId &&
+            compareId(oldestPageNotification, sinceId) <= 0
+          )
+        ) {
+          // If we get an empty page, it means we reached the bottom, so we do not need to insert a new gap
+          // Similarly, if we've fetched more than the gap's, this means we have completely filled it
+          toInsert.push({
+            type: 'gap',
+            maxId: notifications.at(-1)?.page_max_id,
+            sinceId,
+          } as NotificationGap);
+        }
+
+        // Remove older groups covered by the API
+        state.groups = state.groups.filter(
+          (groupOrGap) =>
+            groupOrGap.type !== 'gap' &&
+            !apiGroupKeys.includes(groupOrGap.group_key),
+        );
+
+        // Replace the gap with API results (+ the new gap if needed)
+        state.groups.splice(gapIndex, 1, ...toInsert);
+
+        // Finally, merge any adjacent gaps that could have been created by filtering
+        // groups earlier
+        mergeGaps(state.groups);
+
+        state.isLoading = false;
+
+        updateLastReadId(state);
+      })
+      .addCase(processNewNotificationForGroups.fulfilled, (state, action) => {
+        const notification = action.payload;
+        processNewNotification(
+          usePendingItems ? state.pendingGroups : state.groups,
+          notification,
+        );
+        updateLastReadId(state);
+        trimNotifications(state);
+      })
+      .addCase(disconnectTimeline, (state, action) => {
+        if (action.payload.timeline === 'home') {
+          if (state.groups.length > 0 && state.groups[0]?.type !== 'gap') {
+            state.groups.unshift({
+              type: 'gap',
+              sinceId: state.groups[0]?.page_min_id,
+            });
+          }
+        }
+      })
+      .addCase(timelineDelete, (state, action) => {
+        removeNotificationsForStatus(state, action.payload.statusId);
+      })
+      .addCase(clearNotifications.pending, (state) => {
+        state.groups = [];
+        state.pendingGroups = [];
+      })
+      .addCase(blockAccountSuccess, (state, action) => {
+        removeNotificationsForAccounts(state, [action.payload.relationship.id]);
+      })
+      .addCase(muteAccountSuccess, (state, action) => {
+        if (action.payload.relationship.muting_notifications)
+          removeNotificationsForAccounts(state, [
+            action.payload.relationship.id,
+          ]);
+      })
+      .addCase(blockDomainSuccess, (state, action) => {
+        removeNotificationsForAccounts(
+          state,
+          action.payload.accounts.map((account) => account.id),
+        );
+      })
+      .addCase(loadPending, (state) => {
+        // First, remove any existing group and merge data
+        state.pendingGroups.forEach((group) => {
+          if (group.type !== 'gap') {
+            const existingGroupIndex = state.groups.findIndex(
+              (groupOrGap) =>
+                isNotificationGroup(groupOrGap) &&
+                groupOrGap.group_key === group.group_key,
+            );
+            if (existingGroupIndex > -1) {
+              const existingGroup = state.groups[existingGroupIndex];
+              if (existingGroup && existingGroup.type !== 'gap') {
+                group.notifications_count += existingGroup.notifications_count;
+                group.sampleAccountIds = group.sampleAccountIds
+                  .concat(existingGroup.sampleAccountIds)
+                  .slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS);
+                state.groups.splice(existingGroupIndex, 1);
+              }
+            }
+          }
+          trimNotifications(state);
+        });
+
+        // Then build the consolidated list and clear pending groups
+        state.groups = state.pendingGroups.concat(state.groups);
+        state.pendingGroups = [];
+      })
+      .addCase(updateScrollPosition, (state, action) => {
+        state.scrolledToTop = action.payload.top;
+        updateLastReadId(state);
+        trimNotifications(state);
+      })
+      .addCase(markNotificationsAsRead, (state) => {
+        const mostRecentGroup = state.groups.find(isNotificationGroup);
+        if (
+          mostRecentGroup?.page_max_id &&
+          compareId(state.lastReadId, mostRecentGroup.page_max_id) < 0
+        )
+          state.lastReadId = mostRecentGroup.page_max_id;
+      })
+      .addCase(fetchMarkers.fulfilled, (state, action) => {
+        if (
+          action.payload.markers.notifications &&
+          compareId(
+            state.lastReadId,
+            action.payload.markers.notifications.last_read_id,
+          ) < 0
+        )
+          state.lastReadId = action.payload.markers.notifications.last_read_id;
+      })
+      .addCase(mountNotifications, (state) => {
+        state.mounted += 1;
+        updateLastReadId(state);
+      })
+      .addCase(unmountNotifications, (state) => {
+        state.mounted -= 1;
+      })
+      .addCase(focusApp, (state) => {
+        state.isTabVisible = true;
+        updateLastReadId(state);
+      })
+      .addCase(unfocusApp, (state) => {
+        state.isTabVisible = false;
+      })
+      .addMatcher(
+        isAnyOf(authorizeFollowRequestSuccess, rejectFollowRequestSuccess),
+        (state, action) => {
+          removeNotificationsForAccounts(
+            state,
+            [action.payload.id],
+            'follow_request',
+          );
+        },
+      )
+      .addMatcher(
+        isAnyOf(fetchNotifications.pending, fetchNotificationsGap.pending),
+        (state) => {
+          state.isLoading = true;
+        },
+      )
+      .addMatcher(
+        isAnyOf(fetchNotifications.rejected, fetchNotificationsGap.rejected),
+        (state) => {
+          state.isLoading = false;
+        },
+      );
+  },
+);
--- a/app/javascript/flavours/glitch/reducers/notifications.js
+++ b/app/javascript/flavours/glitch/reducers/notifications.js
@ -12,6 +12,7 @@ import {
 import {
  fetchMarkers,
 } from '../actions/markers';
+import { clearNotifications } from '../actions/notification_groups';
 import {
  NOTIFICATIONS_MOUNT,
  NOTIFICATIONS_UNMOUNT,
@ -21,7 +22,6 @@ import {
  NOTIFICATIONS_EXPAND_REQUEST,
  NOTIFICATIONS_EXPAND_FAIL,
  NOTIFICATIONS_FILTER_SET,
-  NOTIFICATIONS_CLEAR,
  NOTIFICATIONS_SCROLL_TOP,
  NOTIFICATIONS_LOAD_PENDING,
  NOTIFICATIONS_DELETE_MARKED_REQUEST,
@ -332,7 +332,7 @@ export default function notifications(state = initialState, action) {
  case authorizeFollowRequestSuccess.type:
  case rejectFollowRequestSuccess.type:
    return filterNotifications(state, [action.payload.id], 'follow_request');
-  case NOTIFICATIONS_CLEAR:
+  case clearNotifications.pending.type:
    return state.set('items', ImmutableList()).set('pendingItems', ImmutableList()).set('hasMore', false);
  case timelineDelete.type:
    return deleteByStatus(state, action.payload.statusId);
--- a/app/javascript/flavours/glitch/selectors/notifications.ts
+++ b/app/javascript/flavours/glitch/selectors/notifications.ts
@ -0,0 +1,34 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { compareId } from 'flavours/glitch/compare_id';
+import type { RootState } from 'flavours/glitch/store';
+
+export const selectUnreadNotificationGroupsCount = createSelector(
+  [
+    (s: RootState) => s.notificationGroups.lastReadId,
+    (s: RootState) => s.notificationGroups.pendingGroups,
+    (s: RootState) => s.notificationGroups.groups,
+  ],
+  (notificationMarker, pendingGroups, groups) => {
+    return (
+      groups.filter(
+        (group) =>
+          group.type !== 'gap' &&
+          group.page_max_id &&
+          compareId(group.page_max_id, notificationMarker) > 0,
+      ).length +
+      pendingGroups.filter(
+        (group) =>
+          group.type !== 'gap' &&
+          group.page_max_id &&
+          compareId(group.page_max_id, notificationMarker) > 0,
+      ).length
+    );
+  },
+);
+
+export const selectPendingNotificationGroupsCount = createSelector(
+  [(s: RootState) => s.notificationGroups.pendingGroups],
+  (pendingGroups) =>
+    pendingGroups.filter((group) => group.type !== 'gap').length,
+);
--- a/app/javascript/flavours/glitch/selectors/settings.ts
+++ b/app/javascript/flavours/glitch/selectors/settings.ts
@ -0,0 +1,40 @@
+import type { RootState } from 'flavours/glitch/store';
+
+/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+// state.settings is not yet typed, so we disable some ESLint checks for those selectors
+export const selectSettingsNotificationsShows = (state: RootState) =>
+  state.settings.getIn(['notifications', 'shows']).toJS() as Record<
+    string,
+    boolean
+  >;
+
+export const selectSettingsNotificationsExcludedTypes = (state: RootState) =>
+  Object.entries(selectSettingsNotificationsShows(state))
+    .filter(([_type, enabled]) => !enabled)
+    .map(([type, _enabled]) => type);
+
+export const selectSettingsNotificationsQuickFilterShow = (state: RootState) =>
+  state.settings.getIn(['notifications', 'quickFilter', 'show']) as boolean;
+
+export const selectSettingsNotificationsQuickFilterActive = (
+  state: RootState,
+) => state.settings.getIn(['notifications', 'quickFilter', 'active']) as string;
+
+export const selectSettingsNotificationsQuickFilterAdvanced = (
+  state: RootState,
+) =>
+  state.settings.getIn(['notifications', 'quickFilter', 'advanced']) as boolean;
+
+export const selectSettingsNotificationsShowUnread = (state: RootState) =>
+  state.settings.getIn(['notifications', 'showUnread']) as boolean;
+
+export const selectNeedsNotificationPermission = (state: RootState) =>
+  (state.settings.getIn(['notifications', 'alerts']).includes(true) &&
+    state.notifications.get('browserSupport') &&
+    state.notifications.get('browserPermission') === 'default' &&
+    !state.settings.getIn([
+      'notifications',
+      'dismissPermissionBanner',
+    ])) as boolean;
+
+/* eslint-enable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .15
 .16
 @ -1 +1 @@
 .3.3
 .3.4