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

.nvmrc

@@ -1 +1 @@
-20.15
+20.16

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

.ruby-version

@@ -1 +1 @@
-3.3.3
+3.3.4

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).

Dockerfile

@@ -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"]

Gemfile

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

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)
+    pghero (3.6.0)
-      activerecord (>= 6)
+      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)
+    strong_migrations (2.0.0)
-      activerecord (>= 5.2)
+      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)

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

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

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

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

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

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

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(
+    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_notifications') do
-      limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
+      notifications = browserable_account_notifications.includes(from_account: [:account_stat, :user]).to_a_grouped_paginated_by_id(
-      params_slice(:max_id, :since_id, :min_id)
+        limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
-    )
+        params_slice(:max_id, :since_id, :min_id)
+      )
 
-    Notification.preload_cache_collection_target_statuses(notifications) do |target_statuses|
+      Notification.preload_cache_collection_target_statuses(notifications) do |target_statuses|
-      preload_collection(target_statuses, Status)
+        preload_collection(target_statuses, Status)
+      end
     end
   end
 
   def load_group_metadata
     return {} if @notifications.empty?
 
-    browserable_account_notifications
+    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_group_metadata') do
-      .where(group_key: @notifications.filter_map(&:group_key))
+      browserable_account_notifications
-      .where(id: (@notifications.last.id)..(@notifications.first.id))
+        .where(group_key: @notifications.filter_map(&:group_key))
-      .group(:group_key)
+        .where(id: (@notifications.last.id)..(@notifications.first.id))
-      .pluck(:group_key, 'min(notifications.id) as min_id', 'max(notifications.id) as max_id', 'max(notifications.created_at) as latest_notification_at')
+        .group(:group_key)
-      .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 }] }
+        .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

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

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') +
+      ''.html_safe.tap do |tags|
-        stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+        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)') +
+      ''.html_safe.tap do |tags|
-        tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
+        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

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_less'] ?? 'Show less')
-          : localeData['status.show_more'] ?? 'Show more';
+          : (localeData['status.show_more'] ?? 'Show more');
       spoilerLink.textContent = new IntlMessageFormat(
         message,
         locale,

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());

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

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
+      if ((browserHistory.location.pathname === '/publish' || browserHistory.location.pathname === '/statuses/new')
-          && (routerHistory.location.pathname === '/publish' || routerHistory.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) {

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) => {
+function toggleReblogWithoutConfirmation(status, privacy) {
-  const status = getState().get('statuses').get(statusId);
+  return (dispatch) => {
-  let alreadyAdded = false;
+    if (status.get('reblogged')) {
-  if (status) {
+      dispatch(unreblog({ statusId: status.get('id') }));
-    const reaction = status.get('reactions').find(x => x.get('name') === name);
+    } else {
-    if (reaction && reaction.get('me')) {
+      dispatch(reblog({ statusId: status.get('id'), privacy }));
-      alreadyAdded = true;
     }
-  }
+  };
-  if (!alreadyAdded) {
+}
-    dispatch(addReactionRequest(statusId, name, url));
-  }
 
-  // encodeURIComponent is required for the Keycap Number Sign emoji, see:
+export function toggleReblog(statusId, skipModal = false) {
-  // <https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932>
+  return (dispatch, getState) => {
-  api(getState).post(`/api/v1/statuses/${statusId}/react/${encodeURIComponent(name)}`).then(() => {
+    const state = getState();
-    dispatch(addReactionSuccess(statusId, name));
+    let status = state.statuses.get(statusId);
-  }).catch(err => {
+
-    if (!alreadyAdded) {
+    if (!status)
-      dispatch(addReactionFail(statusId, name, err));
+      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) => ({
+export function toggleFavourite(statusId, skipModal = false) {
-  type: REACTION_ADD_REQUEST,
+  return (dispatch, getState) => {
-  id: statusId,
+    const state = getState();
-  name,
+    let status = state.statuses.get(statusId);
-  url,
-});
 
-export const addReactionSuccess = (statusId, name) => ({
+    if (!status)
-  type: REACTION_ADD_SUCCESS,
+      return;
-  id: statusId,
-  name,
-});
 
-export const addReactionFail = (statusId, name, error) => ({
+    // The favourite modal expects a pre-filled account in status
-  type: REACTION_ADD_FAIL,
+    // TODO: fix this by having the reblog modal get a statusId and do the work itself
-  id: statusId,
+    status = status.set('account', state.accounts.get(status.get('account')));
-  name,
-  error,
-});
 
-export const removeReaction = (statusId, name) => (dispatch, getState) => {
+    if (status.get('favourited')) {
-  dispatch(removeReactionRequest(statusId, name));
+      dispatch(unfavourite(status));
-
+    } else {
-  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${encodeURIComponent(name)}`).then(() => {
+      if (favouriteModal && !skipModal) {
-    dispatch(removeReactionSuccess(statusId, name));
+        dispatch(openModal({ modalType: 'FAVOURITE', modalProps: { status, onFavourite: (status) => dispatch(favourite(status)) } }));
-  }).catch(err => {
+      } else {
-    dispatch(removeReactionFail(statusId, name, err));
+        dispatch(favourite(status));
-  });
+      }
-};
+    }
-
+  };
-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,
-});

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-call, @typescript-eslint/no-unsafe-member-access
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
+  const enableBeta = state.settings.getIn(
-  return state.getIn(['notifications', 'lastReadId']);
+    ['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) => {

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

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,

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

app/javascript/flavours/glitch/actions/notifications_typed.ts

@@ -1,11 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
 
-import type { ApiAccountJSON } from '../api_types/accounts';
+import type { ApiNotificationJSON } from 'flavours/glitch/api_types/notifications';
-// To be replaced once ApiNotificationJSON type exists
-interface FakeApiNotificationJSON {
-  type: string;
-  account: ApiAccountJSON;
-}
 
 export const notificationsUpdate = createAction(
   'notifications/update',
@@ -13,7 +8,7 @@ export const notificationsUpdate = createAction(
     playSound,
     ...args
   }: {
-    notification: FakeApiNotificationJSON;
+    notification: ApiNotificationJSON;
     usePendingItems: boolean;
     playSound: boolean;
   }) => ({

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}`);
+    }
+  };
+};

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

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

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;

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;
+}

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;
+  param: T;
-  onClick: (maxId: string) => void;
+  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);
+    onClick(param);
-  }, [maxId, onClick]);
+  }, [param, onClick]);
 
   return (
     <button

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

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}>
+        <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
-          <div ref={this.handleRef} className='status focusable' tabIndex={0}>
+          <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}>
+        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
+          <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}

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 = () => {

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

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

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

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'
           />
         );
       }

app/javascript/flavours/glitch/containers/status_container.js

@@ -12,11 +12,9 @@ import {
   initAddFilter,
 } from 'flavours/glitch/actions/filters';
 import {
-  reblog,
+  toggleReblog,
-  favourite,
+  toggleFavourite,
   bookmark,
-  unreblog,
-  unfavourite,
   unbookmark,
   pin,
   unpin,
@@ -32,14 +30,13 @@ import {
   muteStatus,
   unmuteStatus,
   deleteStatus,
-  hideStatus,
+  toggleStatusSpoilers,
-  revealStatus,
   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) => {
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
-      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 } }));
-      }
-    });
   },
 
   onBookmark (status) {
@@ -144,26 +124,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
-  onModalFavourite (status) {
-    dispatch(favourite(status));
-  },
-
   onFavourite (status, e) {
-    if (status.get('favourited')) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
-      dispatch(unfavourite(status));
-    } else {
-      if (e.shiftKey || !favouriteModal) {
-        this.onModalFavourite(status);
-      } else {
-        dispatch(openModal({
-          modalType: 'FAVOURITE',
-          modalProps: {
-            status,
-            onFavourite: this.onModalFavourite,
-          },
-        }));
-      }
-    }
   },
 
   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) {
+  onDirect (account) {
-    dispatch(directCompose(account, router));
+    dispatch(directCompose(account));
   },
 
-  onMention (account, router) {
+  onMention (account) {
-    dispatch(mentionCompose(account, router));
+    dispatch(mentionCompose(account));
   },
 
   onOpenMedia (statusId, media, index, lang) {
@@ -281,11 +243,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onToggleHidden (status) {
-    if (status.get('hidden')) {
+    dispatch(toggleStatusSpoilers(status.get('id')));
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
   },
 
   deployPictureInPicture (status, type, mediaProps) {

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_less'] ?? 'Show less')
-          : localeData['status.show_more'] ?? 'Show more';
+          : (localeData['status.show_more'] ?? 'Show more');
       spoilerLink.textContent = new IntlMessageFormat(
         message,
         locale,

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;

app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx

@@ -75,12 +75,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
-  onMention (account, router) {
+  onMention (account) {
-    dispatch(mentionCompose(account, router));
+    dispatch(mentionCompose(account));
   },
 
-  onDirect (account, router) {
+  onDirect (account) {
-    dispatch(directCompose(account, router));
+    dispatch(directCompose(account));
   },
 
   onReblogToggle (account) {

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

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

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

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) {
+  onSubmit (overridePrivacy = null) {
-    dispatch(submitCompose(router, overridePrivacy));
+    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({

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(toggleStatusSpoilers(lastStatus.get('id')));
-      dispatch(revealStatus(lastStatus.get('id')));
-    } else {
-      dispatch(hideStatus(lastStatus.get('id')));
-    }
 
     if (lastStatus.get('spoiler_text')) {
       setExpanded(!expanded);

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

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>

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:
+  action: AccountWarningAction;
-    | 'none'
-    | 'disable'
-    | 'mark_statuses_as_sensitive'
-    | 'delete_statuses'
-    | 'sensitive'
-    | 'silence'
-    | 'suspend';
   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
+    <div
-      href={`/disputes/strikes/${id}`}
+      role='button'
-      target='_blank'
+      className={classNames(
-      rel='noopener noreferrer'
+        'notification-group notification-group--link notification-group--moderation-warning focusable',
-      className='notification__moderation-warning'
+        { '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>
   );
 };

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 = () => {

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'>
+    <div role='button' className={classNames('notification-group notification-group--link notification-group--relationships-severance-event focusable', { 'notification-group--unread': unread })} tabIndex='0'>
-      <Icon id='heart_broken' icon={HeartBrokenIcon} />
+      <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,
 };

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

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,
+  toggleReblog,
-  favourite,
+  toggleFavourite,
-  unreblog,
-  unfavourite,
 } 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) => {
+  onMention: (account) => {
-    dispatch(mentionCompose(account, router));
+    dispatch(mentionCompose(account));
-  },
-
-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
   },
 
   onReblog (status, e) {
-    if (status.get('reblogged')) {
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
   },
 
-  onFavourite (status) {
+  onFavourite (status, e) {
-    if (status.get('favourited')) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
   },
 });
 

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>

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>
+);

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

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 }}
+    />
+  );
+};

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 }}
+    />
+  );
+};

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

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}
+  />
+);

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}
+    />
+  );
+};

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}
+  />
+);

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}
+    />
+  );
+};

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>;
+};

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

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}
+    />
+  );
+};

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}
+  />
+);

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}
+  />
+);

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}
+    />
+  );
+};

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}
+  />
+);

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}
+  />
+);

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}
+  />
+);

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

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

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;

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;

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(focusCompose(intl.formatMessage(messages.template)));
-  }, [dispatch, intl, history]);
+  }, [dispatch, intl]);
 
   return (
     <Column>

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(toggleFavourite(status.get('id'), e && e.shiftKey));
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
     } 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(toggleReblog(status.get('id'), e && e.shiftKey));
-        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 } }));
-      }
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',

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

app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js

@@ -10,10 +10,8 @@ import {
   directCompose,
 } from '../../../actions/compose';
 import {
-  reblog,
+  toggleReblog,
-  favourite,
+  toggleFavourite,
-  unreblog,
-  unfavourite,
   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(toggleReblog(status.get('id'), e.shiftKey));
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
   },
 
-  onFavourite (status) {
+  onFavourite (status, e) {
-    if (status.get('favourited')) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
   },
 
   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) {
+  onDirect (account) {
-    dispatch(directCompose(account, router));
+    dispatch(directCompose(account));
   },
 
-  onMention (account, router) {
+  onMention (account) {
-    dispatch(mentionCompose(account, router));
+    dispatch(mentionCompose(account));
   },
 
   onOpenMedia (media, index, lang) {

app/javascript/flavours/glitch/features/status/index.jsx

@@ -32,12 +32,10 @@ import {
   directCompose,
 } from '../../actions/compose';
 import {
-  favourite,
+  toggleFavourite,
-  unfavourite,
   bookmark,
   unbookmark,
-  reblog,
+  toggleReblog,
-  unreblog,
   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(toggleFavourite(status.get('id'), e && e.shiftKey));
-        dispatch(unfavourite(status));
-      } else {
-        if ((e && e.shiftKey) || !favouriteModal) {
-          this.handleModalFavourite(status);
-        } else {
-          dispatch(openModal({
-            modalType: 'FAVOURITE',
-            modalProps: {
-              status,
-              onFavourite: this.handleModalFavourite,
-            },
-          }));
-        }
-      }
     } 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(toggleReblog(status.get('id'), e && e.shiftKey));
-        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 } }));
-      }
     } 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) => {
+  handleEditClick = (status) => {
-    this.props.dispatch(editStatus(status.get('id'), history));
+    this.props.dispatch(editStatus(status.get('id')));
   };
 
-  handleDirectClick = (account, history) => {
+  handleDirectClick = (account) => {
-    this.props.dispatch(directCompose(account, history));
+    this.props.dispatch(directCompose(account));
   };
 
-  handleMentionClick = (account, history) => {
+  handleMentionClick = (account) => {
-    this.props.dispatch(mentionCompose(account, history));
+    this.props.dispatch(mentionCompose(account));
   };
 
   handleOpenMedia = (media, index, lang) => {

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,

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' />}
+      icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
-      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={count} className='column-link__icon' />}
+      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
       text={intl.formatMessage(messages.notifications)}
     />
   );

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

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 () {

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

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",
+  "status.uncollapse": "Ausklappen"
-  "suggestions.dismiss": "Vorschlag ablehnen"
 }

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",
+  "status.uncollapse": "Descolapsar"
-  "suggestions.dismiss": "Descartar sugerencia"
 }

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": "없음",

app/javascript/flavours/glitch/locales/zh-CN.json

@@ -155,6 +155,5 @@
   "status.in_reply_to": "此嘟文是回复",
   "status.is_poll": "此嘟文是投票",
   "status.local_only": "此嘟文仅本站可见",
-  "status.uncollapse": "展开",
+  "status.uncollapse": "展开"
-  "suggestions.dismiss": "关闭建议"
 }

app/javascript/flavours/glitch/locales/zh-TW.json

@@ -151,6 +151,5 @@
   "status.in_reply_to": "貼文有回覆",
   "status.is_poll": "貼文有投票",
   "status.local_only": "只在此實例可見",
-  "status.uncollapse": "展開",
+  "status.uncollapse": "展開"
-  "suggestions.dismiss": "關閉建議"
 }

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;
+  }
+}

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,

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

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

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

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

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