Merge pull request #2699 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes up to a2399046ca

.env.development

@@ -0,0 +1,4 @@
+# Required by ActiveRecord encryption feature
+ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY=fkSxKD2bF396kdQbrP1EJ7WbU7ZgNokR
+ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT=r0hvVmzBVsjxC7AMlwhOzmtc36ZCOS1E
+ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY=PhdFyyfy5xJ7WVd2lWBpcPScRQHzRTNr

.env.test

@@ -3,3 +3,8 @@ NODE_ENV=production
 # Federation
 LOCAL_DOMAIN=cb6e6126.ngrok.io
 LOCAL_HTTPS=true
+
+# Required by ActiveRecord encryption feature
+ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY=fkSxKD2bF396kdQbrP1EJ7WbU7ZgNokR
+ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT=r0hvVmzBVsjxC7AMlwhOzmtc36ZCOS1E
+ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY=PhdFyyfy5xJ7WVd2lWBpcPScRQHzRTNr

.eslintrc.js

@@ -380,6 +380,7 @@ module.exports = defineConfig({
             "message": "Use typed hooks `useAppDispatch` and `useAppSelector` instead."
           }
         ],
+        "@typescript-eslint/restrict-template-expressions": ['warn', { allowNumber: true }],
         'jsdoc/require-jsdoc': 'off',
 
         // Those rules set stricter rules for TS files

.github/workflows/crowdin-download.yml

@@ -53,7 +53,7 @@ jobs:
 
       # Create or update the pull request
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6.0.2
+        uses: peter-evans/create-pull-request@v6.0.4
         with:
           commit-message: 'New Crowdin translations'
           title: 'New Crowdin Translations (automated)'

.github/workflows/test-js.yml

@@ -38,5 +38,5 @@ jobs:
       - name: Set up Javascript environment
         uses: ./.github/actions/setup-javascript
 
-      - name: Jest testing
+      - name: JavaScript testing
         run: yarn jest --reporters github-actions summary

.github/workflows/test-ruby.yml

@@ -28,6 +28,9 @@ jobs:
     env:
       RAILS_ENV: ${{ matrix.mode }}
       BUNDLE_WITH: ${{ matrix.mode }}
+      ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY: precompile_placeholder
+      ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT: precompile_placeholder
+      ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY: precompile_placeholder
       OTP_SECRET: precompile_placeholder
       SECRET_KEY_BASE: precompile_placeholder
 
@@ -111,7 +114,6 @@ jobs:
       fail-fast: false
       matrix:
         ruby-version:
-          - '3.0'
           - '3.1'
           - '.ruby-version'
           - '3.3'
@@ -187,7 +189,6 @@ jobs:
       fail-fast: false
       matrix:
         ruby-version:
-          - '3.0'
           - '3.1'
           - '.ruby-version'
           - '3.3'
@@ -287,7 +288,6 @@ jobs:
       fail-fast: false
       matrix:
         ruby-version:
-          - '3.0'
           - '3.1'
           - '.ruby-version'
           - '3.3'

.gitignore

@@ -24,7 +24,6 @@
 /public/packs-test
 .env
 .env.production
-.env.development
 /node_modules/
 /build/
 

.haml-lint.yml

@@ -1,6 +1,5 @@
 exclude:
   - 'vendor/**/*'
-  - lib/templates/haml/scaffold/_form.html.haml
 
 require:
   - ./lib/linter/haml_middle_dot.rb
@@ -11,6 +10,6 @@ linters:
   MiddleDot:
     enabled: true
   LineLength:
-    max: 320
+    max: 300
   ViewLength:
     max: 200 # Override default value of 100 inherited from rubocop

.nvmrc

@@ -1 +1 @@
-20.11
+20.12

.rubocop.yml

@@ -9,12 +9,13 @@ inherit_mode:
 require:
   - rubocop-rails
   - rubocop-rspec
+  - rubocop-rspec_rails
   - rubocop-performance
   - rubocop-capybara
   - ./lib/linter/rubocop_middle_dot
 
 AllCops:
-  TargetRubyVersion: 3.0 # Set to minimum supported version of CI
+  TargetRubyVersion: 3.1 # Set to minimum supported version of CI
   DisplayCopNames: true
   DisplayStyleGuide: true
   ExtraDetails: true
@@ -39,13 +40,7 @@ Layout/FirstHashElementIndentation:
 # Reason: Currently disabled in .rubocop_todo.yml
 # https://docs.rubocop.org/rubocop/cops_layout.html#layoutlinelength
 Layout/LineLength:
-  Max: 320 # Default of 120 causes a duplicate entry in generated todo file
+  Max: 300 # Default of 120 causes a duplicate entry in generated todo file
-
-# Reason:
-# https://docs.rubocop.org/rubocop/cops_lint.html#lintuselessaccessmodifier
-Lint/UselessAccessModifier:
-  ContextCreatingMethods:
-    - class_methods
 
 ## Disable most Metrics/*Length cops
 # Reason: those are often triggered and force significant refactors when this happend
@@ -86,6 +81,11 @@ Metrics/CyclomaticComplexity:
 Metrics/ParameterLists:
   CountKeywordArgs: false
 
+# Reason: Prefer seeing a variable name
+# https://docs.rubocop.org/rubocop/cops_naming.html#namingblockforwarding
+Naming/BlockForwarding:
+  EnforcedStyle: explicit
+
 # Reason: Prevailing style is argument file paths
 # https://docs.rubocop.org/rubocop-rails/cops_rails.html#railsfilepath
 Rails/FilePath:
@@ -148,11 +148,6 @@ RSpec/NamedSubject:
 RSpec/NotToNot:
   EnforcedStyle: to_not
 
-# Reason: Prevailing style uses numeric status codes, matches Rails/HttpStatus
-# https://docs.rubocop.org/rubocop-rspec/cops_rspec_rails.html#rspecrailshttpstatus
-RSpec/Rails/HttpStatus:
-  EnforcedStyle: numeric
-
 # Reason: Match overrides from Rspec/FilePath rule above
 # https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecspecfilepathformat
 RSpec/SpecFilePathFormat:
@@ -163,6 +158,11 @@ RSpec/SpecFilePathFormat:
     OEmbedController: oembed_controller
     OStatus: ostatus
 
+# Reason: Prevailing style uses numeric status codes, matches Rails/HttpStatus
+# https://docs.rubocop.org/rubocop-rspec/cops_rspec_rails.html#rspecrailshttpstatus
+RSpecRails/HttpStatus:
+  EnforcedStyle: numeric
+
 # Reason:
 # https://docs.rubocop.org/rubocop/cops_style.html#styleclassandmodulechildren
 Style/ClassAndModuleChildren:
@@ -186,6 +186,7 @@ Style/FormatStringToken:
 # https://docs.rubocop.org/rubocop/cops_style.html#stylehashsyntax
 Style/HashSyntax:
   EnforcedStyle: ruby19_no_mixed_keys
+  EnforcedShorthandSyntax: either
 
 # Reason:
 # https://docs.rubocop.org/rubocop/cops_style.html#stylenumericliterals

.rubocop_todo.yml

@@ -1,18 +1,11 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config --auto-gen-only-exclude --no-exclude-limit --no-offense-counts --no-auto-gen-timestamp`
-# using RuboCop version 1.60.2.
+# using RuboCop version 1.62.1.
 # 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
 # versions of RuboCop, may require this file to be generated again.
 
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: TreatCommentsAsGroupSeparators, ConsiderPunctuation, Include.
-# Include: **/*.gemfile, **/Gemfile, **/gems.rb
-Bundler/OrderedGems:
-  Exclude:
-    - 'Gemfile'
-
 Lint/NonLocalExitFromIterator:
   Exclude:
     - 'app/helpers/jsonld_helper.rb'
@@ -36,7 +29,7 @@ Metrics/PerceivedComplexity:
 
 # Configuration parameters: CountAsOne.
 RSpec/ExampleLength:
-  Max: 20 # Override default of 5
+  Max: 18
 
 RSpec/MultipleExpectations:
   Max: 7
@@ -61,15 +54,6 @@ Rails/OutputSafety:
   Exclude:
     - 'config/initializers/simple_form.rb'
 
-# Configuration parameters: Include.
-# Include: app/models/**/*.rb
-Rails/UniqueValidationWithoutIndex:
-  Exclude:
-    - 'app/models/account_alias.rb'
-    - 'app/models/custom_filter_status.rb'
-    - 'app/models/identity.rb'
-    - 'app/models/webauthn_credential.rb'
-
 # This cop supports unsafe autocorrection (--autocorrect-all).
 # Configuration parameters: AllowedMethods, AllowedPatterns.
 # AllowedMethods: ==, equal?, eql?
@@ -88,7 +72,6 @@ Style/FetchEnvVar:
   Exclude:
     - 'app/lib/redis_configuration.rb'
     - 'app/lib/translation_service.rb'
-    - 'config/environments/development.rb'
     - 'config/environments/production.rb'
     - 'config/initializers/2_limited_federation_mode.rb'
     - 'config/initializers/3_omniauth.rb'
@@ -98,7 +81,6 @@ Style/FetchEnvVar:
     - 'config/initializers/paperclip.rb'
     - 'config/initializers/vapid.rb'
     - 'lib/mastodon/redis_config.rb'
-    - 'lib/premailer_webpack_strategy.rb'
     - 'lib/tasks/repo.rake'
     - 'spec/features/profile_spec.rb'
 
@@ -144,7 +126,6 @@ Style/GuardClause:
     - 'lib/mastodon/cli/accounts.rb'
     - 'lib/mastodon/cli/maintenance.rb'
     - 'lib/mastodon/cli/media.rb'
-    - 'lib/paperclip/attachment_extensions.rb'
     - 'lib/tasks/repo.rake'
 
 # This cop supports safe autocorrection (--autocorrect).
@@ -207,13 +188,6 @@ Style/OptionalBooleanParameter:
     - 'app/workers/unfollow_follow_worker.rb'
     - 'lib/mastodon/redis_config.rb'
 
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: PreferredDelimiters.
-Style/PercentLiteralDelimiters:
-  Exclude:
-    - 'config/deploy.rb'
-    - 'config/initializers/doorkeeper.rb'
-
 # This cop supports unsafe autocorrection (--autocorrect-all).
 # Configuration parameters: EnforcedStyle.
 # SupportedStyles: short, verbose
@@ -252,44 +226,12 @@ Style/SignalException:
     - 'lib/devise/strategies/two_factor_ldap_authenticatable.rb'
     - 'lib/devise/strategies/two_factor_pam_authenticatable.rb'
 
-# This cop supports unsafe autocorrection (--autocorrect-all).
-Style/SingleArgumentDig:
-  Exclude:
-    - 'lib/webpacker/manifest_extensions.rb'
-
 # This cop supports unsafe autocorrection (--autocorrect-all).
 # Configuration parameters: Mode.
 Style/StringConcatenation:
   Exclude:
     - 'config/initializers/paperclip.rb'
 
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle, ConsistentQuotesInMultiline.
-# SupportedStyles: single_quotes, double_quotes
-Style/StringLiterals:
-  Exclude:
-    - 'config/environments/production.rb'
-    - 'config/initializers/backtrace_silencers.rb'
-    - 'config/initializers/http_client_proxy.rb'
-    - 'config/initializers/rack_attack.rb'
-    - 'config/initializers/webauthn.rb'
-    - 'config/routes.rb'
-
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyleForMultiline.
-# SupportedStylesForMultiline: comma, consistent_comma, no_comma
-Style/TrailingCommaInArguments:
-  Exclude:
-    - 'config/initializers/paperclip.rb'
-
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyleForMultiline.
-# SupportedStylesForMultiline: comma, consistent_comma, no_comma
-Style/TrailingCommaInHashLiteral:
-  Exclude:
-    - 'config/environments/production.rb'
-    - 'config/environments/test.rb'
-
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: WordRegex.
 # SupportedStyles: percent, brackets

Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker/dockerfile:1.4
+# syntax=docker/dockerfile:1.7
 
 # Please see https://docs.docker.com/engine/reference/builder for information about
 # the extended buildx capabilities used in this file.
@@ -205,7 +205,12 @@ ARG TARGETPLATFORM
 
 RUN \
 # Use Ruby on Rails to create Mastodon assets
-  OTP_SECRET=precompile_placeholder SECRET_KEY_BASE=precompile_placeholder bundle exec rails assets:precompile; \
+  ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY=precompile_placeholder \
+  ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT=precompile_placeholder \
+  ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY=precompile_placeholder \
+  OTP_SECRET=precompile_placeholder \
+  SECRET_KEY_BASE=precompile_placeholder \
+  bundle exec rails assets:precompile; \
 # Cleanup temporary files
   rm -fr /opt/mastodon/tmp;
 

Gemfile

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
 source 'https://rubygems.org'
-ruby '>= 3.0.0'
+ruby '>= 3.1.0'
 
-gem 'puma', '~> 6.3'
-gem 'rails', '~> 7.1.1'
 gem 'propshaft'
-gem 'thor', '~> 1.2'
+gem 'puma', '~> 6.3'
 gem 'rack', '~> 2.2.7'
+gem 'rails', '~> 7.1.1'
+gem 'thor', '~> 1.2'
 
 # For why irb is in the Gemfile, see: https://ruby.social/@st0012/111444685161478182
 gem 'irb', '~> 1.8'
 
+gem 'dotenv'
 gem 'haml-rails', '~>2.0'
 gem 'pg', '~> 1.5'
 gem 'pghero'
-gem 'dotenv-rails', '~> 2.8'
 
 gem 'aws-sdk-s3', '~> 1.123', require: false
+gem 'blurhash', '~> 0.1'
 gem 'fog-core', '<= 2.4.0'
 gem 'fog-openstack', '~> 1.0', require: false
 gem 'kt-paperclip', '~> 7.2'
 gem 'md-paperclip-azure', '~> 2.2', require: false
-gem 'blurhash', '~> 0.1'
 
 gem 'active_model_serializers', '~> 0.10'
 gem 'addressable', '~> 2.8'
@@ -39,11 +39,11 @@ end
 
 gem 'net-ldap', '~> 0.18'
 
-gem 'omniauth-cas', '~> 3.0.0.beta.1'
-gem 'omniauth-saml', '~> 2.0'
-gem 'omniauth_openid_connect', '~> 0.6.1'
 gem 'omniauth', '~> 2.0'
+gem 'omniauth-cas', '~> 3.0.0.beta.1'
+gem 'omniauth_openid_connect', '~> 0.6.1'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'
+gem 'omniauth-saml', '~> 2.0'
 
 gem 'color_diff', '~> 0.1'
 gem 'csv', '~> 3.2'
@@ -53,9 +53,8 @@ gem 'ed25519', '~> 1.3'
 gem 'fast_blank', '~> 1.0'
 gem 'fastimage'
 gem 'hiredis', '~> 0.6'
-gem 'redis-namespace', '~> 1.10'
 gem 'htmlentities', '~> 4.3'
-gem 'http', '~> 5.1'
+gem 'http', '~> 5.2.0'
 gem 'http_accept_language', '~> 2.1'
 gem 'httplog', '~> 1.6.2'
 gem 'i18n', '1.14.1' # TODO: Remove version when resolved: https://github.com/glebm/i18n-tasks/issues/552 / https://github.com/ruby-i18n/i18n/pull/688
@@ -63,40 +62,40 @@ gem 'idn-ruby', require: 'idn'
 gem 'inline_svg'
 gem 'kaminari', '~> 1.2'
 gem 'link_header', '~> 0.0'
+gem 'mario-redis-lock', '~> 1.2', require: 'redis_lock'
 gem 'mime-types', '~> 3.5.0', require: 'mime/types/columnar'
 gem 'nokogiri', '~> 1.15'
 gem 'nsa'
 gem 'oj', '~> 3.14'
 gem 'ox', '~> 2.14'
 gem 'parslet'
-gem 'posix-spawn'
+gem 'premailer-rails'
 gem 'public_suffix', '~> 5.0'
 gem 'pundit', '~> 2.3'
-gem 'premailer-rails'
 gem 'rack-attack', '~> 6.6'
 gem 'rack-cors', '~> 2.0', require: 'rack/cors'
 gem 'rails-i18n', '~> 7.0'
 gem 'redcarpet', '~> 3.6'
 gem 'redis', '~> 4.5', require: ['redis', 'redis/connection/hiredis']
-gem 'mario-redis-lock', '~> 1.2', require: 'redis_lock'
+gem 'redis-namespace', '~> 1.10'
 gem 'rqrcode', '~> 2.2'
 gem 'ruby-progressbar', '~> 1.13'
 gem 'sanitize', '~> 6.0'
 gem 'scenic', '~> 1.7'
 gem 'sidekiq', '~> 6.5'
+gem 'sidekiq-bulk', '~> 0.2.0'
 gem 'sidekiq-scheduler', '~> 5.0'
 gem 'sidekiq-unique-jobs', '~> 7.1'
-gem 'sidekiq-bulk', '~> 0.2.0'
-gem 'simple-navigation', '~> 4.4'
 gem 'simple_form', '~> 5.2'
-gem 'stoplight', '~> 3.0.1'
+gem 'simple-navigation', '~> 4.4'
+gem 'stoplight', '~> 4.1'
 gem 'strong_migrations', '1.8.0'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2023'
+gem 'webauthn', '~> 3.0'
 gem 'webpacker', '~> 5.4'
 gem 'webpush', github: 'ClearlyClaire/webpush', ref: 'f14a4d52e201128b1b00245d11b6de80d6cfdcd9'
-gem 'webauthn', '~> 3.0'
 
 gem 'json-ld'
 gem 'json-ld-preloaded', '~> 3.2'
@@ -198,13 +197,14 @@ group :production do
   gem 'lograge', '~> 0.12'
 end
 
+gem 'cocoon', '~> 1.2'
 gem 'concurrent-ruby', require: false
 gem 'connection_pool', require: false
 gem 'xorcist', '~> 1.1'
 
-gem 'cocoon', '~> 1.2'
-
 gem 'net-http', '~> 0.4.0'
 gem 'rubyzip', '~> 2.3'
 
 gem 'hcaptcha', '~> 7.1'
+
+gem 'mail', '~> 2.8'

Gemfile.lock

@@ -99,20 +99,20 @@ GEM
     ast (2.4.2)
     attr_encrypted (4.0.0)
       encryptor (~> 3.0.0)
-    attr_required (1.0.1)
+    attr_required (1.0.2)
     awrence (1.2.1)
     aws-eventstream (1.3.0)
-    aws-partitions (1.873.0)
+    aws-partitions (1.916.0)
-    aws-sdk-core (3.190.1)
+    aws-sdk-core (3.192.1)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.8)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.75.0)
+    aws-sdk-kms (1.79.0)
-      aws-sdk-core (~> 3, >= 3.188.0)
+      aws-sdk-core (~> 3, >= 3.191.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.142.0)
+    aws-sdk-s3 (1.147.0)
-      aws-sdk-core (~> 3, >= 3.189.0)
+      aws-sdk-core (~> 3, >= 3.192.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.8)
     aws-sigv4 (1.8.0)
@@ -132,7 +132,7 @@ GEM
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
       rouge (>= 1.0.0)
-    better_html (2.0.2)
+    better_html (2.1.1)
       actionview (>= 6.0)
       activesupport (>= 6.0)
       ast (~> 2.0)
@@ -140,9 +140,9 @@ GEM
       parser (>= 2.4)
       smart_properties
     bigdecimal (3.1.7)
-    bindata (2.4.15)
+    bindata (2.5.0)
-    binding_of_caller (1.0.0)
+    binding_of_caller (1.0.1)
-      debug_inspector (>= 0.0.1)
+      debug_inspector (>= 1.2.0)
     blurhash (0.1.7)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
@@ -167,7 +167,7 @@ GEM
       xpath (~> 3.2)
     case_transform (0.2)
       activesupport
-    cbor (0.5.9.6)
+    cbor (0.5.9.8)
     charlock_holmes (0.7.7)
     chewy (7.5.1)
       activesupport (>= 5.2)
@@ -182,23 +182,23 @@ GEM
     cose (1.3.0)
       cbor (~> 0.5.9)
       openssl-signature_algorithm (~> 1.0)
-    crack (0.4.6)
+    crack (1.0.0)
       bigdecimal
       rexml
     crass (1.0.6)
-    css_parser (1.14.0)
+    css_parser (1.17.1)
       addressable
-    csv (3.2.8)
+    csv (3.3.0)
     database_cleaner-active_record (2.1.0)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
     date (3.3.4)
-    debug (1.9.1)
+    debug (1.9.2)
       irb (~> 1.10)
       reline (>= 0.3.8)
-    debug_inspector (1.1.0)
+    debug_inspector (1.2.0)
-    devise (4.9.3)
+    devise (4.9.4)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
@@ -217,14 +217,10 @@ GEM
     discard (1.3.0)
       activerecord (>= 4.2, < 8)
     docile (1.4.0)
-    domain_name (0.5.20190701)
+    domain_name (0.6.20240107)
-      unf (>= 0.0.5, < 1.0.0)
     doorkeeper (5.6.9)
       railties (>= 5)
-    dotenv (2.8.1)
+    dotenv (3.1.0)
-    dotenv-rails (2.8.1)
-      dotenv (= 2.8.1)
-      railties (>= 3.2)
     drb (2.2.1)
     ed25519 (1.3.0)
     elasticsearch (7.13.3)
@@ -242,11 +238,11 @@ GEM
       mail (~> 2.7)
     encryptor (3.0.0)
     erubi (1.12.0)
-    et-orbi (1.2.7)
+    et-orbi (1.2.11)
       tzinfo
-    excon (0.109.0)
+    excon (0.110.0)
     fabrication (2.31.0)
-    faker (3.2.3)
+    faker (3.3.1)
       i18n (>= 1.8.11, < 2)
     faraday (1.10.3)
       faraday-em_http (~> 1.0)
@@ -274,10 +270,10 @@ GEM
     faraday_middleware (1.2.0)
       faraday (~> 1.0)
     fast_blank (1.0.1)
-    fastimage (2.3.0)
+    fastimage (2.3.1)
-    ffi (1.15.5)
+    ffi (1.16.3)
-    ffi-compiler (1.0.1)
+    ffi-compiler (1.3.2)
-      ffi (>= 1.0.0)
+      ffi (>= 1.15.5)
       rake
     fog-core (2.4.0)
       builder
@@ -291,7 +287,7 @@ GEM
       fog-core (~> 2.1)
       fog-json (>= 1.0)
     formatador (1.1.0)
-    fugit (1.8.1)
+    fugit (1.10.1)
       et-orbi (~> 1, >= 1.2.7)
       raabro (~> 1.4)
     fuubar (2.5.1)
@@ -318,15 +314,16 @@ GEM
     hashie (5.0.0)
     hcaptcha (7.1.0)
       json
-    highline (2.1.0)
+    highline (3.0.1)
     hiredis (0.6.3)
     hkdf (0.3.0)
     htmlentities (4.3.4)
-    http (5.1.1)
+    http (5.2.0)
       addressable (~> 2.8)
+      base64 (~> 0.1)
       http-cookie (~> 1.0)
       http-form_data (~> 2.2)
-      llhttp-ffi (~> 0.4.0)
+      llhttp-ffi (~> 0.5.0)
     http-cookie (1.0.5)
       domain_name (~> 0.5)
     http-form_data (2.3.0)
@@ -357,7 +354,7 @@ GEM
       rdoc
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.7.1)
+    json (2.7.2)
     json-canonicalization (1.0.0)
     json-jwt (1.15.3.1)
       activesupport (>= 4.2)
@@ -374,7 +371,7 @@ GEM
     json-ld-preloaded (3.3.0)
       json-ld (~> 3.3)
       rdf (~> 3.3)
-    json-schema (4.2.0)
+    json-schema (4.3.0)
       addressable (>= 2.8)
     jsonapi-renderer (0.2.2)
     jwt (2.7.1)
@@ -399,15 +396,15 @@ GEM
     language_server-protocol (3.17.0.3)
     launchy (2.5.2)
       addressable (~> 2.8)
-    letter_opener (1.8.1)
+    letter_opener (1.10.0)
-      launchy (>= 2.2, < 3)
+      launchy (>= 2.2, < 4)
     letter_opener_web (2.0.0)
       actionmailer (>= 5.2)
       letter_opener (~> 1.7)
       railties (>= 5.2)
       rexml
     link_header (0.0.8)
-    llhttp-ffi (0.4.0)
+    llhttp-ffi (0.5.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
     lograge (0.14.0)
@@ -423,7 +420,7 @@ GEM
       net-imap
       net-pop
       net-smtp
-    marcel (1.0.2)
+    marcel (1.0.4)
     mario-redis-lock (1.2.1)
       redis (>= 3.0.5)
     matrix (0.4.2)
@@ -434,13 +431,13 @@ GEM
     memory_profiler (1.0.1)
     mime-types (3.5.2)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2023.1205)
+    mime-types-data (3.2024.0305)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.5)
+    mini_portile2 (2.8.6)
     minitest (5.22.3)
     msgpack (1.7.2)
     multi_json (1.15.0)
-    multipart-post (2.3.0)
+    multipart-post (2.4.0)
     mutex_m (0.2.0)
     net-http (0.4.1)
       uri
@@ -454,10 +451,10 @@ GEM
       net-protocol
     net-protocol (0.2.2)
       timeout
-    net-smtp (0.4.0.1)
+    net-smtp (0.5.0)
       net-protocol
-    nio4r (2.5.9)
+    nio4r (2.7.1)
-    nokogiri (1.16.3)
+    nokogiri (1.16.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     nsa (0.3.0)
@@ -510,8 +507,7 @@ GEM
     pg (1.5.6)
     pghero (3.4.1)
       activerecord (>= 6)
-    posix-spawn (0.3.15)
+    premailer (1.23.0)
-    premailer (1.21.0)
       addressable
       css_parser (>= 1.12.0)
       htmlentities (>= 4.0.0)
@@ -527,7 +523,7 @@ GEM
       railties (>= 7.0.0)
     psych (5.1.2)
       stringio
-    public_suffix (5.0.4)
+    public_suffix (5.0.5)
     puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.1)
@@ -548,7 +544,7 @@ GEM
     rack-protection (3.2.0)
       base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
+    rack-proxy (0.7.7)
       rack
     rack-session (1.0.2)
       rack (< 3)
@@ -594,7 +590,7 @@ GEM
       thor (~> 1.0, >= 1.2.2)
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
-    rake (13.1.0)
+    rake (13.2.1)
     rdf (3.3.1)
       bcp47_spec (~> 0.2)
       link_header (~> 0.0, >= 0.0.8)
@@ -609,16 +605,16 @@ GEM
     redlock (1.3.2)
       redis (>= 3.0.0, < 6.0)
     regexp_parser (2.9.0)
-    reline (0.4.3)
+    reline (0.5.2)
       io-console (~> 0.5)
-    request_store (1.5.1)
+    request_store (1.6.0)
       rack (>= 1.4)
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     rexml (3.2.6)
     rotp (6.3.0)
-    rouge (4.1.2)
+    rouge (4.2.1)
     rpam2 (4.0.2)
     rqrcode (2.2.0)
       chunky_png (~> 1.0)
@@ -642,13 +638,13 @@ GEM
       rspec-expectations (~> 3.13)
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
-    rspec-sidekiq (4.1.0)
+    rspec-sidekiq (4.2.0)
       rspec-core (~> 3.0)
       rspec-expectations (~> 3.0)
       rspec-mocks (~> 3.0)
       sidekiq (>= 5, < 8)
     rspec-support (3.13.1)
-    rubocop (1.62.1)
+    rubocop (1.63.3)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
@@ -665,21 +661,24 @@ GEM
       rubocop (~> 1.41)
     rubocop-factory_bot (2.25.1)
       rubocop (~> 1.41)
-    rubocop-performance (1.20.2)
+    rubocop-performance (1.21.0)
       rubocop (>= 1.48.1, < 2.0)
-      rubocop-ast (>= 1.30.0, < 2.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rails (2.24.0)
+    rubocop-rails (2.24.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (2.27.1)
+    rubocop-rspec (2.29.1)
       rubocop (~> 1.40)
       rubocop-capybara (~> 2.17)
       rubocop-factory_bot (~> 2.22)
+      rubocop-rspec_rails (~> 2.28)
+    rubocop-rspec_rails (2.28.3)
+      rubocop (~> 1.40)
     ruby-prof (1.7.0)
     ruby-progressbar (1.13.0)
-    ruby-saml (1.15.0)
+    ruby-saml (1.16.0)
       nokogiri (>= 1.13.10)
       rexml
     ruby2_keywords (0.0.5)
@@ -691,10 +690,10 @@ GEM
     sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    scenic (1.7.0)
+    scenic (1.8.0)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
-    selenium-webdriver (4.18.1)
+    selenium-webdriver (4.19.0)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -731,7 +730,7 @@ GEM
     smart_properties (1.17.0)
     stackprof (0.2.26)
     statsd-ruby (1.5.0)
-    stoplight (3.0.2)
+    stoplight (4.1.0)
       redlock (~> 1.0)
     stringio (3.1.0)
     strong_migrations (1.8.0)
@@ -746,7 +745,7 @@ GEM
       unicode-display_width (>= 1.1.1, < 3)
     terrapin (1.0.1)
       climate_control
-    test-prof (1.3.2)
+    test-prof (1.3.3)
     thor (1.3.1)
     tilt (2.3.0)
     timeout (0.4.1)
@@ -763,7 +762,7 @@ GEM
       tty-cursor (~> 0.7)
       tty-screen (~> 0.8)
       wisper (~> 2.0)
-    tty-screen (0.8.1)
+    tty-screen (0.8.2)
     twitter-text (3.1.0)
       idn-ruby
       unf (~> 0.1.0)
@@ -773,9 +772,9 @@ GEM
       tzinfo (>= 1.0.0)
     unf (0.1.4)
       unf_ext
-    unf_ext (0.0.8.2)
+    unf_ext (0.0.9.1)
     unicode-display_width (2.5.0)
-    uri (0.12.2)
+    uri (0.13.0)
     validate_email (0.1.6)
       activemodel (>= 3.0)
       mail (>= 2.2.5)
@@ -796,7 +795,7 @@ GEM
     webfinger (1.2.0)
       activesupport
       httpclient (>= 2.4)
-    webmock (3.22.0)
+    webmock (3.23.0)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -847,7 +846,7 @@ DEPENDENCIES
   devise_pam_authenticatable2 (~> 9.2)
   discard (~> 1.2)
   doorkeeper (~> 5.6)
-  dotenv-rails (~> 2.8)
+  dotenv
   ed25519 (~> 1.3)
   email_spec
   fabrication (~> 2.30)
@@ -862,7 +861,7 @@ DEPENDENCIES
   hcaptcha (~> 7.1)
   hiredis (~> 0.6)
   htmlentities (~> 4.3)
-  http (~> 5.1)
+  http (~> 5.2.0)
   http_accept_language (~> 2.1)
   httplog (~> 1.6.2)
   i18n (= 1.14.1)
@@ -879,6 +878,7 @@ DEPENDENCIES
   letter_opener_web (~> 2.0)
   link_header (~> 0.0)
   lograge (~> 0.12)
+  mail (~> 2.8)
   mario-redis-lock (~> 1.2)
   md-paperclip-azure (~> 2.2)
   memory_profiler
@@ -897,7 +897,6 @@ DEPENDENCIES
   parslet
   pg (~> 1.5)
   pghero
-  posix-spawn
   premailer-rails
   private_address_check (~> 0.5)
   propshaft
@@ -939,7 +938,7 @@ DEPENDENCIES
   simplecov (~> 0.22)
   simplecov-lcov (~> 0.8)
   stackprof
-  stoplight (~> 3.0.1)
+  stoplight (~> 4.1)
   strong_migrations (= 1.8.0)
   test-prof
   thor (~> 1.2)
@@ -953,7 +952,7 @@ DEPENDENCIES
   xorcist (~> 1.1)
 
 RUBY VERSION
-   ruby 3.2.2p53
+   ruby 3.2.3p157
 
 BUNDLED WITH
-   2.5.4
+   2.5.9

README.md

@@ -85,7 +85,7 @@ Mastodon acts as an OAuth2 provider, so 3rd party apps can use the REST and Stre
 
 - **PostgreSQL** 12+
 - **Redis** 4+
-- **Ruby** 3.0+
+- **Ruby** 3.1+
 - **Node.js** 16+
 
 The repository includes deployment configurations for **Docker and docker-compose** as well as specific platforms like **Heroku**, **Scalingo**, and **Nanobox**. For Helm charts, reference the [mastodon/chart repository](https://github.com/mastodon/chart). The [**standalone** installation guide](https://docs.joinmastodon.org/admin/install/) is available in the documentation.

Vagrantfile

@@ -173,6 +173,7 @@ Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
 
   # Otherwise, you can access the site at http://localhost:3000 and http://localhost:4000 , http://localhost:8080
   config.vm.network :forwarded_port, guest: 3000, host: 3000
+  config.vm.network :forwarded_port, guest: 3035, host: 3035
   config.vm.network :forwarded_port, guest: 4000, host: 4000
   config.vm.network :forwarded_port, guest: 8080, host: 8080
   config.vm.network :forwarded_port, guest: 9200, host: 9200

app/controllers/accounts_controller.rb

@@ -46,7 +46,7 @@ class AccountsController < ApplicationController
   end
 
   def default_statuses
-    @account.statuses.not_local_only.where(visibility: [:public, :unlisted])
+    @account.statuses.not_local_only.distributable_visibility
   end
 
   def only_media_scope

app/controllers/activitypub/replies_controller.rb

@@ -31,7 +31,7 @@ class ActivityPub::RepliesController < ActivityPub::BaseController
 
   def set_replies
     @replies = only_other_accounts? ? Status.where.not(account_id: @account.id).joins(:account).merge(Account.without_suspended) : @account.statuses
-    @replies = @replies.where(in_reply_to_id: @status.id, visibility: [:public, :unlisted])
+    @replies = @replies.distributable_visibility.where(in_reply_to_id: @status.id)
     @replies = @replies.paginate_by_min_id(DESCENDANTS_LIMIT, params[:min_id])
   end
 

app/controllers/api/base_controller.rb

@@ -9,6 +9,7 @@ class Api::BaseController < ApplicationController
   include Api::CachingConcern
   include Api::ContentSecurityPolicy
   include Api::ErrorHandling
+  include Api::Pagination
 
   skip_before_action :require_functional!, unless: :limited_federation_mode?
 
@@ -29,21 +30,6 @@ class Api::BaseController < ApplicationController
 
   protected
 
-  def pagination_max_id
-    pagination_collection.last.id
-  end
-
-  def pagination_since_id
-    pagination_collection.first.id
-  end
-
-  def set_pagination_headers(next_path = nil, prev_path = nil)
-    links = []
-    links << [next_path, [%w(rel next)]] if next_path
-    links << [prev_path, [%w(rel prev)]] if prev_path
-    response.headers['Link'] = LinkHeader.new(links) unless links.empty?
-  end
-
   def limit_param(default_limit)
     return default_limit unless params[:limit]
 
@@ -72,10 +58,6 @@ class Api::BaseController < ApplicationController
     render json: { error: 'Your login is currently disabled' }, status: 403 if current_user&.account&.unavailable?
   end
 
-  def require_valid_pagination_options!
-    render json: { error: 'Pagination values for `offset` and `limit` must be positive' }, status: 400 if pagination_options_invalid?
-  end
-
   def require_user!
     if !current_user
       render json: { error: 'This method requires an authenticated user' }, status: 422
@@ -104,14 +86,6 @@ class Api::BaseController < ApplicationController
 
   private
 
-  def insert_pagination_headers
-    set_pagination_headers(next_path, prev_path)
-  end
-
-  def pagination_options_invalid?
-    params.slice(:limit, :offset).values.map(&:to_i).any?(&:negative?)
-  end
-
   def respond_with_error(code)
     render json: { error: Rack::Utils::HTTP_STATUS_CODES[code] }, status: code
   end

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

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::Accounts::CredentialsController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :read, :'read:accounts' }, except: [:update]
+  before_action -> { doorkeeper_authorize! :read, :'read:accounts', :'read:me' }, except: [:update]
   before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, only: [:update]
   before_action :require_user!
 

app/controllers/api/v1/featured_tags/suggestions_controller.rb

@@ -12,10 +12,6 @@ class Api::V1::FeaturedTags::SuggestionsController < Api::BaseController
   private
 
   def set_recently_used_tags
-    @recently_used_tags = Tag.recently_used(current_account).where.not(id: featured_tag_ids).limit(10)
+    @recently_used_tags = Tag.suggestions_for_account(current_account).limit(10)
-  end
-
-  def featured_tag_ids
-    current_account.featured_tags.pluck(:tag_id)
   end
 end

app/controllers/api/v1/statuses/reblogged_by_accounts_controller.rb

@@ -23,7 +23,7 @@ class Api::V1::Statuses::RebloggedByAccountsController < Api::V1::Statuses::Base
   end
 
   def paginated_statuses
-    Status.where(reblog_of_id: @status.id).where(visibility: [:public, :unlisted]).paginate_by_max_id(
+    Status.where(reblog_of_id: @status.id).distributable_visibility.paginate_by_max_id(
       limit_param(DEFAULT_ACCOUNTS_LIMIT),
       params[:max_id],
       params[:since_id]

app/controllers/concerns/api/pagination.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Api::Pagination
+  extend ActiveSupport::Concern
+
+  protected
+
+  def pagination_max_id
+    pagination_collection.last.id
+  end
+
+  def pagination_since_id
+    pagination_collection.first.id
+  end
+
+  def set_pagination_headers(next_path = nil, prev_path = nil)
+    links = []
+    links << [next_path, [%w(rel next)]] if next_path
+    links << [prev_path, [%w(rel prev)]] if prev_path
+    response.headers['Link'] = LinkHeader.new(links) unless links.empty?
+  end
+
+  def require_valid_pagination_options!
+    render json: { error: 'Pagination values for `offset` and `limit` must be positive' }, status: 400 if pagination_options_invalid?
+  end
+
+  private
+
+  def insert_pagination_headers
+    set_pagination_headers(next_path, prev_path)
+  end
+
+  def pagination_options_invalid?
+    params.slice(:limit, :offset).values.map(&:to_i).any?(&:negative?)
+  end
+end

app/controllers/concerns/cache_concern.rb

@@ -46,27 +46,19 @@ module CacheConcern
     end
   end
 
+  # TODO: Rename this method, as it does not perform any caching anymore.
   def cache_collection(raw, klass)
-    return raw unless klass.respond_to?(:with_includes)
+    return raw unless klass.respond_to?(:preload_cacheable_associations)
 
-    raw = raw.cache_ids.to_a if raw.is_a?(ActiveRecord::Relation)
+    records = raw.to_a
-    return [] if raw.empty?
 
-    cached_keys_with_value = Rails.cache.read_multi(*raw).transform_keys(&:id)
+    klass.preload_cacheable_associations(records)
 
-    uncached_ids = raw.map(&:id) - cached_keys_with_value.keys
+    records
-
-    klass.reload_stale_associations!(cached_keys_with_value.values) if klass.respond_to?(:reload_stale_associations!)
-
-    unless uncached_ids.empty?
-      uncached = klass.where(id: uncached_ids).with_includes.index_by(&:id)
-      Rails.cache.write_multi(uncached.values.to_h { |i| [i, i] })
-    end
-
-    raw.filter_map { |item| cached_keys_with_value[item.id] || uncached[item.id] }
   end
 
+  # TODO: Rename this method, as it does not perform any caching anymore.
   def cache_collection_paginated_by_id(raw, klass, limit, options)
-    cache_collection raw.cache_ids.to_a_paginated_by_id(limit, options), klass
+    cache_collection raw.to_a_paginated_by_id(limit, options), klass
   end
 end

app/controllers/concerns/signature_verification.rb

@@ -66,7 +66,7 @@ module SignatureVerification
     compare_signed_string = build_signed_string(include_query_string: false)
     return actor unless verify_signature(actor, signature, compare_signed_string).nil?
 
-    actor = stoplight_wrap_request { actor_refresh_key!(actor) }
+    actor = stoplight_wrapper.run { actor_refresh_key!(actor) }
 
     raise SignatureVerificationError, "Could not refresh public key #{signature_params['keyId']}" if actor.nil?
 
@@ -226,10 +226,10 @@ module SignatureVerification
     end
 
     if key_id.start_with?('acct:')
-      stoplight_wrap_request { ResolveAccountService.new.call(key_id.delete_prefix('acct:'), suppress_errors: false) }
+      stoplight_wrapper.run { ResolveAccountService.new.call(key_id.delete_prefix('acct:'), suppress_errors: false) }
     elsif !ActivityPub::TagManager.instance.local_uri?(key_id)
       account   = ActivityPub::TagManager.instance.uri_to_actor(key_id)
-      account ||= stoplight_wrap_request { ActivityPub::FetchRemoteKeyService.new.call(key_id, suppress_errors: false) }
+      account ||= stoplight_wrapper.run { ActivityPub::FetchRemoteKeyService.new.call(key_id, suppress_errors: false) }
       account
     end
   rescue Mastodon::PrivateNetworkAddressError => e
@@ -238,12 +238,11 @@ module SignatureVerification
     raise SignatureVerificationError, e.message
   end
 
-  def stoplight_wrap_request(&block)
+  def stoplight_wrapper
-    Stoplight("source:#{request.remote_ip}", &block)
+    Stoplight("source:#{request.remote_ip}")
       .with_threshold(1)
       .with_cool_off_time(5.minutes.seconds)
       .with_error_handler { |error, handle| error.is_a?(HTTP::Error) || error.is_a?(OpenSSL::SSL::SSLError) ? handle.call(error) : raise(error) }
-      .run
   end
 
   def actor_refresh_key!(actor)

app/controllers/concerns/theming_concern.rb

@@ -12,13 +12,13 @@ module ThemingConcern
   def current_skin
     @current_skin ||= begin
       skins = Themes.instance.skins_for(current_flavour)
-      [current_user&.setting_skin, Setting.skin, 'default'].find { |skin| skins.include?(skin) }
+      [current_user&.setting_skin, Setting.skin, 'system', 'default'].find { |skin| skins.include?(skin) }
     end
   end
 
   def current_theme
     # NOTE: this is slightly different from upstream, as it's a derived value used
     # for the sole purpose of pointing to the appropriate stylesheet pack
-    "skins/#{current_flavour}/#{current_skin}"
+    [current_flavour, current_skin]
   end
 end

app/controllers/settings/featured_tags_controller.rb

@@ -38,7 +38,7 @@ class Settings::FeaturedTagsController < Settings::BaseController
   end
 
   def set_recently_used_tags
-    @recently_used_tags = Tag.recently_used(current_account).where.not(id: @featured_tags.map(&:id)).limit(10)
+    @recently_used_tags = Tag.suggestions_for_account(current_account).limit(10)
   end
 
   def featured_tag_params

app/controllers/settings/imports_controller.rb

@@ -31,7 +31,7 @@ class Settings::ImportsController < Settings::BaseController
   def show; end
 
   def failures
-    @bulk_import = current_account.bulk_imports.where(state: :finished).find(params[:id])
+    @bulk_import = current_account.bulk_imports.state_finished.find(params[:id])
 
     respond_to do |format|
       format.csv do
@@ -92,7 +92,7 @@ class Settings::ImportsController < Settings::BaseController
   end
 
   def set_bulk_import
-    @bulk_import = current_account.bulk_imports.where(state: :unconfirmed).find(params[:id])
+    @bulk_import = current_account.bulk_imports.state_unconfirmed.find(params[:id])
   end
 
   def set_recent_imports

app/helpers/branding_helper.rb

@@ -19,6 +19,6 @@ module BrandingHelper
   end
 
   def render_logo
-    image_pack_tag('logo.svg', alt: 'Mastodon', class: 'logo logo--icon')
+    image_tag(frontend_asset_path('images/logo.svg'), alt: 'Mastodon', class: 'logo logo--icon')
   end
 end

app/helpers/context_helper.rb

@@ -49,13 +49,11 @@ module ContextHelper
   end
 
   def serialized_context(named_contexts_map, context_extensions_map)
-    context_array = []
-
     named_contexts     = named_contexts_map.keys
     context_extensions = context_extensions_map.keys
 
-    named_contexts.each do |key|
+    context_array = named_contexts.map do |key|
-      context_array << NAMED_CONTEXT_MAP[key]
+      NAMED_CONTEXT_MAP[key]
     end
 
     extensions = context_extensions.each_with_object({}) do |key, h|

app/helpers/theme_helper.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ThemeHelper
+  def theme_style_tags(flavour_and_skin)
+    flavour, theme = flavour_and_skin
+
+    if theme == 'system'
+      stylesheet_pack_tag("skins/#{flavour}/mastodon-light", media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') +
+        stylesheet_pack_tag("skins/#{flavour}/default", media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+    else
+      stylesheet_pack_tag "skins/#{flavour}/#{theme}", media: 'all', crossorigin: 'anonymous'
+    end
+  end
+
+  def theme_color_tags(flavour_and_skin)
+    _, theme = flavour_and_skin
+
+    if theme == 'system'
+      tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:dark], media: '(prefers-color-scheme: dark)') +
+        tag.meta(name: 'theme-color', content: Themes::THEME_COLORS[:light], media: '(prefers-color-scheme: light)')
+    else
+      tag.meta name: 'theme-color', content: theme_color_for(theme)
+    end
+  end
+
+  private
+
+  def theme_color_for(theme)
+    theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark]
+  end
+end

app/javascript/flavours/glitch/actions/boosts.js

@@ -1,32 +0,0 @@
-import { openModal } from './modal';
-
-export const BOOSTS_INIT_MODAL = 'BOOSTS_INIT_MODAL';
-export const BOOSTS_CHANGE_PRIVACY = 'BOOSTS_CHANGE_PRIVACY';
-
-export function initBoostModal(props) {
-  return (dispatch, getState) => {
-    const default_privacy = getState().getIn(['compose', 'default_privacy']);
-
-    const privacy = props.status.get('visibility') === 'private' ? 'private' : default_privacy;
-
-    dispatch({
-      type: BOOSTS_INIT_MODAL,
-      privacy,
-    });
-
-    dispatch(openModal({
-      modalType: 'BOOST',
-      modalProps: props,
-    }));
-  };
-}
-
-
-export function changeBoostPrivacy(privacy) {
-  return dispatch => {
-    dispatch({
-      type: BOOSTS_CHANGE_PRIVACY,
-      privacy,
-    });
-  };
-}

app/javascript/flavours/glitch/actions/markers.js

@@ -1,152 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-
-import { debounce } from 'lodash';
-
-import api from '../api';
-import { compareId } from '../compare_id';
-
-export const MARKERS_FETCH_REQUEST = 'MARKERS_FETCH_REQUEST';
-export const MARKERS_FETCH_SUCCESS = 'MARKERS_FETCH_SUCCESS';
-export const MARKERS_FETCH_FAIL    = 'MARKERS_FETCH_FAIL';
-export const MARKERS_SUBMIT_SUCCESS = 'MARKERS_SUBMIT_SUCCESS';
-
-export const synchronouslySubmitMarkers = () => (dispatch, getState) => {
-  const accessToken = getState().getIn(['meta', 'access_token'], '');
-  const params      = _buildParams(getState());
-
-  if (Object.keys(params).length === 0 || accessToken === '') {
-    return;
-  }
-
-  // The Fetch API allows us to perform requests that will be carried out
-  // after the page closes. But that only works if the `keepalive` attribute
-  // is supported.
-  if (window.fetch && 'keepalive' in new Request('')) {
-    fetch('/api/v1/markers', {
-      keepalive: true,
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${accessToken}`,
-      },
-      body: JSON.stringify(params),
-    });
-
-    return;
-  } else if (navigator && navigator.sendBeacon) {
-    // Failing that, we can use sendBeacon, but we have to encode the data as
-    // FormData for DoorKeeper to recognize the token.
-    const formData = new FormData();
-
-    formData.append('bearer_token', accessToken);
-
-    for (const [id, value] of Object.entries(params)) {
-      formData.append(`${id}[last_read_id]`, value.last_read_id);
-    }
-
-    if (navigator.sendBeacon('/api/v1/markers', formData)) {
-      return;
-    }
-  }
-
-  // If neither Fetch nor sendBeacon worked, try to perform a synchronous
-  // request.
-  try {
-    const client = new XMLHttpRequest();
-
-    client.open('POST', '/api/v1/markers', false);
-    client.setRequestHeader('Content-Type', 'application/json');
-    client.setRequestHeader('Authorization', `Bearer ${accessToken}`);
-    client.send(JSON.stringify(params));
-  } catch (e) {
-    // Do not make the BeforeUnload handler error out
-  }
-};
-
-const _buildParams = (state) => {
-  const params = {};
-
-  const lastHomeId         = state.getIn(['timelines', 'home', 'items'], ImmutableList()).find(item => item !== null);
-  const lastNotificationId = state.getIn(['notifications', 'lastReadId']);
-
-  if (lastHomeId && compareId(lastHomeId, state.getIn(['markers', 'home'])) > 0) {
-    params.home = {
-      last_read_id: lastHomeId,
-    };
-  }
-
-  if (lastNotificationId && lastNotificationId !== '0' && compareId(lastNotificationId, state.getIn(['markers', 'notifications'])) > 0) {
-    params.notifications = {
-      last_read_id: lastNotificationId,
-    };
-  }
-
-  return params;
-};
-
-const debouncedSubmitMarkers = debounce((dispatch, getState) => {
-  const accessToken = getState().getIn(['meta', 'access_token'], '');
-  const params      = _buildParams(getState());
-
-  if (Object.keys(params).length === 0 || accessToken === '') {
-    return;
-  }
-
-  api(getState).post('/api/v1/markers', params).then(() => {
-    dispatch(submitMarkersSuccess(params));
-  }).catch(() => {});
-}, 300000, { leading: true, trailing: true });
-
-export function submitMarkersSuccess({ home, notifications }) {
-  return {
-    type: MARKERS_SUBMIT_SUCCESS,
-    home: (home || {}).last_read_id,
-    notifications: (notifications || {}).last_read_id,
-  };
-}
-
-export function submitMarkers(params = {}) {
-  const result = (dispatch, getState) => debouncedSubmitMarkers(dispatch, getState);
-
-  if (params.immediate === true) {
-    debouncedSubmitMarkers.flush();
-  }
-
-  return result;
-}
-
-export const fetchMarkers = () => (dispatch, getState) => {
-  const params = { timeline: ['notifications'] };
-
-  dispatch(fetchMarkersRequest());
-
-  api(getState).get('/api/v1/markers', { params }).then(response => {
-    dispatch(fetchMarkersSuccess(response.data));
-  }).catch(error => {
-    dispatch(fetchMarkersFail(error));
-  });
-};
-
-export function fetchMarkersRequest() {
-  return {
-    type: MARKERS_FETCH_REQUEST,
-    skipLoading: true,
-  };
-}
-
-export function fetchMarkersSuccess(markers) {
-  return {
-    type: MARKERS_FETCH_SUCCESS,
-    markers,
-    skipLoading: true,
-  };
-}
-
-export function fetchMarkersFail(error) {
-  return {
-    type: MARKERS_FETCH_FAIL,
-    error,
-    skipLoading: true,
-    skipAlert: true,
-  };
-}

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

@@ -0,0 +1,166 @@
+import { List as ImmutableList } from 'immutable';
+
+import { debounce } from 'lodash';
+
+import type { MarkerJSON } from 'flavours/glitch/api_types/markers';
+import type { RootState } from 'flavours/glitch/store';
+import { createAppAsyncThunk } from 'flavours/glitch/store/typed_functions';
+
+import api, { authorizationTokenFromState } from '../api';
+import { compareId } from '../compare_id';
+
+export const synchronouslySubmitMarkers = createAppAsyncThunk(
+  'markers/submit',
+  async (_args, { getState }) => {
+    const accessToken = authorizationTokenFromState(getState);
+    const params = buildPostMarkersParams(getState());
+
+    if (Object.keys(params).length === 0 || !accessToken) {
+      return;
+    }
+
+    // The Fetch API allows us to perform requests that will be carried out
+    // after the page closes. But that only works if the `keepalive` attribute
+    // is supported.
+    if ('fetch' in window && 'keepalive' in new Request('')) {
+      await fetch('/api/v1/markers', {
+        keepalive: true,
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: JSON.stringify(params),
+      });
+
+      return;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    } else if ('navigator' && 'sendBeacon' in navigator) {
+      // Failing that, we can use sendBeacon, but we have to encode the data as
+      // FormData for DoorKeeper to recognize the token.
+      const formData = new FormData();
+
+      formData.append('bearer_token', accessToken);
+
+      for (const [id, value] of Object.entries(params)) {
+        if (value.last_read_id)
+          formData.append(`${id}[last_read_id]`, value.last_read_id);
+      }
+
+      if (navigator.sendBeacon('/api/v1/markers', formData)) {
+        return;
+      }
+    }
+
+    // If neither Fetch nor sendBeacon worked, try to perform a synchronous
+    // request.
+    try {
+      const client = new XMLHttpRequest();
+
+      client.open('POST', '/api/v1/markers', false);
+      client.setRequestHeader('Content-Type', 'application/json');
+      client.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+      client.send(JSON.stringify(params));
+    } catch (e) {
+      // Do not make the BeforeUnload handler error out
+    }
+  },
+);
+
+interface MarkerParam {
+  last_read_id?: string;
+}
+
+function getLastHomeId(state: RootState): string | undefined {
+  /* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+  return (
+    state
+      // @ts-expect-error state.timelines is not yet typed
+      .getIn(['timelines', 'home', 'items'], ImmutableList())
+      // @ts-expect-error state.timelines is not yet typed
+      .find((item) => item !== null)
+  );
+}
+
+function getLastNotificationId(state: RootState): string | undefined {
+  // @ts-expect-error state.notifications is not yet typed
+  return state.getIn(['notifications', 'lastReadId']);
+}
+
+const buildPostMarkersParams = (state: RootState) => {
+  const params = {} as { home?: MarkerParam; notifications?: MarkerParam };
+
+  const lastHomeId = getLastHomeId(state);
+  const lastNotificationId = getLastNotificationId(state);
+
+  if (lastHomeId && compareId(lastHomeId, state.markers.home) > 0) {
+    params.home = {
+      last_read_id: lastHomeId,
+    };
+  }
+
+  if (
+    lastNotificationId &&
+    lastNotificationId !== '0' &&
+    compareId(lastNotificationId, state.markers.notifications) > 0
+  ) {
+    params.notifications = {
+      last_read_id: lastNotificationId,
+    };
+  }
+
+  return params;
+};
+
+export const submitMarkersAction = createAppAsyncThunk<{
+  home: string | undefined;
+  notifications: string | undefined;
+}>('markers/submitAction', async (_args, { getState }) => {
+  const accessToken = authorizationTokenFromState(getState);
+  const params = buildPostMarkersParams(getState());
+
+  if (Object.keys(params).length === 0 || accessToken === '') {
+    return { home: undefined, notifications: undefined };
+  }
+
+  await api(getState).post<MarkerJSON>('/api/v1/markers', params);
+
+  return {
+    home: params.home?.last_read_id,
+    notifications: params.notifications?.last_read_id,
+  };
+});
+
+const debouncedSubmitMarkers = debounce(
+  (dispatch) => {
+    dispatch(submitMarkersAction());
+  },
+  300000,
+  {
+    leading: true,
+    trailing: true,
+  },
+);
+
+export const submitMarkers = createAppAsyncThunk(
+  'markers/submit',
+  (params: { immediate?: boolean }, { dispatch }) => {
+    debouncedSubmitMarkers(dispatch);
+
+    if (params.immediate) {
+      debouncedSubmitMarkers.flush();
+    }
+  },
+);
+
+export const fetchMarkers = createAppAsyncThunk(
+  'markers/fetch',
+  async (_args, { getState }) => {
+    const response = await api(getState).get<Record<string, MarkerJSON>>(
+      `/api/v1/markers`,
+      { params: { timeline: ['notifications'] } },
+    );
+
+    return { markers: response.data };
+  },
+);

app/javascript/flavours/glitch/actions/picture_in_picture.js

@@ -1,46 +0,0 @@
-// @ts-check
-
-export const PICTURE_IN_PICTURE_DEPLOY = 'PICTURE_IN_PICTURE_DEPLOY';
-export const PICTURE_IN_PICTURE_REMOVE = 'PICTURE_IN_PICTURE_REMOVE';
-
-/**
- * @typedef MediaProps
- * @property {string} src
- * @property {boolean} muted
- * @property {number} volume
- * @property {number} currentTime
- * @property {string} poster
- * @property {string} backgroundColor
- * @property {string} foregroundColor
- * @property {string} accentColor
- */
-
-/**
- * @param {string} statusId
- * @param {string} accountId
- * @param {string} playerType
- * @param {MediaProps} props
- * @returns {object}
- */
-export const deployPictureInPicture = (statusId, accountId, playerType, props) => {
-  // @ts-expect-error
-  return (dispatch, getState) => {
-    // Do not open a player for a toot that does not exist
-    if (getState().hasIn(['statuses', statusId])) {
-      dispatch({
-        type: PICTURE_IN_PICTURE_DEPLOY,
-        statusId,
-        accountId,
-        playerType,
-        props,
-      });
-    }
-  };
-};
-
-/*
- * @return {object}
- */
-export const removePictureInPicture = () => ({
-  type: PICTURE_IN_PICTURE_REMOVE,
-});

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

@@ -0,0 +1,31 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import type { PIPMediaProps } from 'flavours/glitch/reducers/picture_in_picture';
+import { createAppAsyncThunk } from 'flavours/glitch/store/typed_functions';
+
+interface DeployParams {
+  statusId: string;
+  accountId: string;
+  playerType: 'audio' | 'video';
+  props: PIPMediaProps;
+}
+
+export const removePictureInPicture = createAction('pip/remove');
+
+export const deployPictureInPictureAction =
+  createAction<DeployParams>('pip/deploy');
+
+export const deployPictureInPicture = createAppAsyncThunk(
+  'pip/deploy',
+  (args: DeployParams, { dispatch, getState }) => {
+    const { statusId } = args;
+
+    // Do not open a player for a toot that does not exist
+
+    // @ts-expect-error state.statuses is not yet typed
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    if (getState().hasIn(['statuses', statusId])) {
+      dispatch(deployPictureInPictureAction(args));
+    }
+  },
+);

app/javascript/flavours/glitch/api.ts

@@ -29,9 +29,14 @@ const setCSRFHeader = () => {
 
 void ready(setCSRFHeader);
 
+export const authorizationTokenFromState = (getState?: GetState) => {
+  return (
+    getState && (getState().meta.get('access_token', '') as string | false)
+  );
+};
+
 const authorizationHeaderFromState = (getState?: GetState) => {
-  const accessToken =
+  const accessToken = authorizationTokenFromState(getState);
-    getState && (getState().meta.get('access_token', '') as string);
 
   if (!accessToken) {
     return {};

app/javascript/flavours/glitch/api_types/markers.ts

@@ -0,0 +1,7 @@
+// See app/serializers/rest/account_serializer.rb
+
+export interface MarkerJSON {
+  last_read_id: string;
+  version: string;
+  updated_at: string;
+}

app/javascript/flavours/glitch/api_types/media_attachments.ts

@@ -0,0 +1,22 @@
+// See app/serializers/rest/media_attachment_serializer.rb
+
+export type MediaAttachmentType =
+  | 'image'
+  | 'gifv'
+  | 'video'
+  | 'unknown'
+  | 'audio';
+
+export interface ApiMediaAttachmentJSON {
+  id: string;
+  type: MediaAttachmentType;
+  url: string;
+  preview_url: string;
+  remoteUrl: string;
+  preview_remote_url: string;
+  text_url: string;
+  // TODO: how to define this?
+  meta: unknown;
+  description?: string;
+  blurhash: string;
+}

app/javascript/flavours/glitch/api_types/polls.ts

@@ -0,0 +1,23 @@
+import type { ApiCustomEmojiJSON } from './custom_emoji';
+
+// See app/serializers/rest/poll_serializer.rb
+
+export interface ApiPollOptionJSON {
+  title: string;
+  votes_count: number;
+}
+
+export interface ApiPollJSON {
+  id: string;
+  expires_at: string;
+  expired: boolean;
+  multiple: boolean;
+  votes_count: number;
+  voters_count: number;
+
+  options: ApiPollOptionJSON[];
+  emojis: ApiCustomEmojiJSON[];
+
+  voted: boolean;
+  own_votes: number[];
+}

app/javascript/flavours/glitch/api_types/statuses.ts

@@ -0,0 +1,95 @@
+// See app/serializers/rest/status_serializer.rb
+
+import type { ApiAccountJSON } from './accounts';
+import type { ApiCustomEmojiJSON } from './custom_emoji';
+import type { ApiMediaAttachmentJSON } from './media_attachments';
+import type { ApiPollJSON } from './polls';
+
+// See app/modals/status.rb
+export type StatusVisibility =
+  | 'public'
+  | 'unlisted'
+  | 'private'
+  // | 'limited' // This is never exposed to the API (they become `private`)
+  | 'direct';
+
+export interface ApiStatusApplicationJSON {
+  name: string;
+  website: string;
+}
+
+export interface ApiTagJSON {
+  name: string;
+  url: string;
+}
+
+export interface ApiMentionJSON {
+  id: string;
+  username: string;
+  url: string;
+  acct: string;
+}
+
+export interface ApiPreviewCardJSON {
+  url: string;
+  title: string;
+  description: string;
+  language: string;
+  type: string;
+  author_name: string;
+  author_url: string;
+  provider_name: string;
+  provider_url: string;
+  html: string;
+  width: number;
+  height: number;
+  image: string;
+  image_description: string;
+  embed_url: string;
+  blurhash: string;
+  published_at: string;
+}
+
+export interface ApiStatusJSON {
+  id: string;
+  created_at: string;
+  in_reply_to_id?: string;
+  in_reply_to_account_id?: string;
+  sensitive: boolean;
+  spoiler_text?: string;
+  visibility: StatusVisibility;
+  language: string;
+  uri: string;
+  url: string;
+  replies_count: number;
+  reblogs_count: number;
+  favorites_count: number;
+  edited_at?: string;
+
+  favorited?: boolean;
+  reblogged?: boolean;
+  muted?: boolean;
+  bookmarked?: boolean;
+  pinned?: boolean;
+
+  // filtered: FilterResult[]
+  filtered: unknown; // TODO
+  content?: string;
+  text?: string;
+
+  reblog?: ApiStatusJSON;
+  application?: ApiStatusApplicationJSON;
+  account: ApiAccountJSON;
+  media_attachments: ApiMediaAttachmentJSON[];
+  mentions: ApiMentionJSON[];
+
+  tags: ApiTagJSON[];
+  emojis: ApiCustomEmojiJSON[];
+
+  card?: ApiPreviewCardJSON;
+  poll?: ApiPollJSON;
+
+  // glitch-soc additions
+  local_only?: boolean;
+  content_type?: string;
+}

app/javascript/flavours/glitch/common.js

@@ -2,7 +2,7 @@ import Rails from '@rails/ujs';
 import 'font-awesome/css/font-awesome.css';
 
 export function start() {
-  require.context('@/images/', true);
+  require.context('@/images/', true, /\.(jpg|png|svg)$/);
 
   try {
     Rails.start();

app/javascript/flavours/glitch/components/button.tsx

@@ -1,26 +1,26 @@
+import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 
 import classNames from 'classnames';
 
-interface BaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface BaseProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
-  text?: JSX.Element;
 }
 
-interface PropsWithChildren extends BaseProps {
+interface PropsChildren extends PropsWithChildren<BaseProps> {
-  text?: never;
+  text?: undefined;
 }
 
 interface PropsWithText extends BaseProps {
-  text: JSX.Element;
+  text: JSX.Element | string;
-  children: never;
+  children?: undefined;
 }
 
-type Props = PropsWithText | PropsWithChildren;
+type Props = PropsWithText | PropsChildren;
 
 export const Button: React.FC<Props> = ({
-  text,
   type = 'button',
   onClick,
   disabled,
@@ -28,6 +28,7 @@ export const Button: React.FC<Props> = ({
   secondary,
   className,
   title,
+  text,
   children,
   ...props
 }) => {

app/javascript/flavours/glitch/components/hashtag_bar.tsx

@@ -24,7 +24,7 @@ export type StatusLike = Record<{
 
 function normalizeHashtag(hashtag: string) {
   return (
-    hashtag && hashtag.startsWith('#') ? hashtag.slice(1) : hashtag
+    !!hashtag && hashtag.startsWith('#') ? hashtag.slice(1) : hashtag
   ).normalize('NFKC');
 }
 

app/javascript/flavours/glitch/components/relative_timestamp.tsx

@@ -191,7 +191,7 @@ const timeRemainingString = (
 interface Props {
   intl: IntlShape;
   timestamp: string;
-  year: number;
+  year?: number;
   futureDate?: boolean;
   short?: boolean;
 }
@@ -203,11 +203,6 @@ class RelativeTimestamp extends Component<Props, States> {
     now: Date.now(),
   };
 
-  static defaultProps = {
-    year: new Date().getFullYear(),
-    short: true,
-  };
-
   _timer: number | undefined;
 
   shouldComponentUpdate(nextProps: Props, nextState: States) {
@@ -257,7 +252,13 @@ class RelativeTimestamp extends Component<Props, States> {
   }
 
   render() {
-    const { timestamp, intl, year, futureDate, short } = this.props;
+    const {
+      timestamp,
+      intl,
+      futureDate,
+      year = new Date().getFullYear(),
+      short = true,
+    } = this.props;
 
     const timeGiven = timestamp.includes('T');
     const date = new Date(timestamp);

app/javascript/flavours/glitch/components/visibility_icon.tsx

@@ -4,11 +4,10 @@ import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MailIcon from '@/material-icons/400-24px/mail.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import type { StatusVisibility } from 'flavours/glitch/models/status';
 
 import { Icon } from './icon';
 
-type Visibility = 'public' | 'unlisted' | 'private' | 'direct';
-
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
   unlisted_short: {
@@ -25,7 +24,7 @@ const messages = defineMessages({
   },
 });
 
-export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({
+export const VisibilityIcon: React.FC<{ visibility: StatusVisibility }> = ({
   visibility,
 }) => {
   const intl = useIntl();

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

@@ -3,7 +3,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { initBlockModal } from 'flavours/glitch/actions/blocks';
-import { initBoostModal } from 'flavours/glitch/actions/boosts';
 import {
   replyCompose,
   mentionCompose,
@@ -126,11 +125,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch((_, getState) => {
       let state = getState();
       if (state.getIn(['local_settings', 'confirm_boost_missing_media_description']) && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
-        dispatch(initBoostModal({ status, onReblog: this.onModalReblog, missingMediaDescription: true }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog, missingMediaDescription: true } }));
       } else if (e.shiftKey || !boostModal) {
         this.onModalReblog(status);
       } else {
-        dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
       }
     });
   },
@@ -282,7 +281,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   deployPictureInPicture (status, type, mediaProps) {
     dispatch((_, getState) => {
       if (getState().getIn(['local_settings', 'media', 'pop_in_player'])) {
-        dispatch(deployPictureInPicture(status.get('id'), status.getIn(['account', 'id']), type, mediaProps));
+        dispatch(deployPictureInPicture({statusId: status.get('id'), accountId: status.getIn(['account', 'id']), playerType: type, props: mediaProps}));
       }
     });
   },

app/javascript/flavours/glitch/features/emoji/emoji.js

@@ -17,8 +17,13 @@ const emojiFilenames = (emojis) => {
 const darkEmoji = emojiFilenames(['🎱', '🐜', '⚫', '🖤', '⬛', '◼️', '◾', '◼️', '✒️', '▪️', '💣', '🎳', '📷', '📸', '♣️', '🕶️', '✴️', '🔌', '💂‍♀️', '📽️', '🍳', '🦍', '💂', '🔪', '🕳️', '🕹️', '🕋', '🖊️', '🖋️', '💂‍♂️', '🎤', '🎓', '🎥', '🎼', '♠️', '🎩', '🦃', '📼', '📹', '🎮', '🐃', '🏴', '🐞', '🕺', '📱', '📲', '🚲', '🪮', '🐦‍⬛']);
 const lightEmoji = emojiFilenames(['👽', '⚾', '🐔', '☁️', '💨', '🕊️', '👀', '🍥', '👻', '🐐', '❕', '❔', '⛸️', '🌩️', '🔊', '🔇', '📃', '🌧️', '🐏', '🍚', '🍙', '🐓', '🐑', '💀', '☠️', '🌨️', '🔉', '🔈', '💬', '💭', '🏐', '🏳️', '⚪', '⬜', '◽', '◻️', '▫️', '🪽', '🪿']);
 
-const emojiFilename = (filename) => {
+/**
-  const borderedEmoji = (document.body && document.body.classList.contains('skin-mastodon-light')) ? lightEmoji : darkEmoji;
+ * @param {string} filename
+ * @param {"light" | "dark" } colorScheme
+ * @returns {string}
+ */
+const emojiFilename = (filename, colorScheme) => {
+  const borderedEmoji = colorScheme === "light" ? lightEmoji : darkEmoji;
   return borderedEmoji.includes(filename) ? (filename + '_border') : filename;
 };
 
@@ -92,12 +97,30 @@ const emojifyTextNode = (node, customEmojis) => {
       const { filename, shortCode } = unicodeMapping[unicode_emoji];
       const title = shortCode ? `:${shortCode}:` : '';
 
-      replacement = document.createElement('img');
+      replacement = document.createElement('picture');
-      replacement.setAttribute('draggable', 'false');
+
-      replacement.setAttribute('class', 'emojione');
+      const isSystemTheme = !!document.body?.classList.contains('theme-system');
-      replacement.setAttribute('alt', unicode_emoji);
+
-      replacement.setAttribute('title', title);
+      if(isSystemTheme) {
-      replacement.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename)}.svg`);
+        let source = document.createElement('source');
+        source.setAttribute('media', '(prefers-color-scheme: dark)');
+        source.setAttribute('srcset', `${assetHost}/emoji/${emojiFilename(filename, "dark")}.svg`);
+        replacement.appendChild(source);
+      }
+
+      let img = document.createElement('img');
+      img.setAttribute('draggable', 'false');
+      img.setAttribute('class', 'emojione');
+      img.setAttribute('alt', unicode_emoji);
+      img.setAttribute('title', title);
+
+      let theme = "light";
+
+      if(!isSystemTheme && !document.body?.classList.contains('skin-mastodon-light'))
+        theme = "dark";
+
+      img.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename, theme)}.svg`);
+      replacement.appendChild(img);
     }
 
     // Add the processed-up-to-now string and the emoji replacement

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

@@ -106,7 +106,7 @@ class GettingStarted extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
-    myAccount: ImmutablePropTypes.map,
+    myAccount: ImmutablePropTypes.record,
     columns: ImmutablePropTypes.list,
     multiColumn: PropTypes.bool,
     fetchFollowRequests: PropTypes.func.isRequired,

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

@@ -123,7 +123,7 @@ class KeyboardShortcuts extends ImmutablePureComponent {
                 <td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
               </tr>
               <tr>
-                <td><kbd>s</kbd></td>
+                <td><kbd>s</kbd>, <kbd>/</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
               </tr>
               <tr>

app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx

@@ -27,7 +27,7 @@ export const FilteredNotificationsBanner = () => {
     };
   }, [dispatch]);
 
-  if (policy === null || policy.getIn(['summary', 'pending_notifications_count']) * 1 === 0) {
+  if (policy === null || policy.getIn(['summary', 'pending_notifications_count']) === 0) {
     return null;
   }
 
@@ -42,7 +42,7 @@ export const FilteredNotificationsBanner = () => {
 
       <div className='filtered-notifications-banner__badge'>
         <div className='filtered-notifications-banner__badge__badge'>{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}</div>
-        <FormattedMessage id='filtered_notifications_banner.private_mentions' defaultMessage='{count, plural, one {private mention} other {private mentions}}' values={{ count: policy.getIn(['summary', 'pending_notifications_count']) }} />
+        <FormattedMessage id='filtered_notifications_banner.mentions' defaultMessage='{count, plural, one {mention} other {mentions}}' values={{ count: policy.getIn(['summary', 'pending_notifications_count']) }} />
       </div>
     </Link>
   );

app/javascript/flavours/glitch/features/notifications/containers/notification_container.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 
-import { initBoostModal } from '../../../actions/boosts';
 import { mentionCompose } from '../../../actions/compose';
 import {
   reblog,
@@ -8,6 +7,7 @@ import {
   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';
@@ -46,7 +46,7 @@ const mapDispatchToProps = dispatch => ({
       if (e.shiftKey || !boostModal) {
         this.onModalReblog(status);
       } else {
-        dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
       }
     }
   },

app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx

@@ -14,7 +14,6 @@ import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
-import { initBoostModal } from 'flavours/glitch/actions/boosts';
 import { replyCompose } from 'flavours/glitch/actions/compose';
 import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions';
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -142,7 +141,7 @@ class Footer extends ImmutablePureComponent {
       } else if ((e && e.shiftKey) || !boostModal) {
         this._performReblog(status);
       } else {
-        dispatch(initBoostModal({ status, onReblog: this._performReblog }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this._performReblog } }));
       }
     } else {
       dispatch(openModal({
@@ -237,4 +236,4 @@ class Footer extends ImmutablePureComponent {
 
 }
 
-export default  withRouter(connect(makeMapStateToProps)(injectIntl(Footer)));
+export default  connect(makeMapStateToProps)(withRouter(injectIntl(Footer)));

app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { Link } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { Avatar } from 'flavours/glitch/components/avatar';
-import { DisplayName } from 'flavours/glitch/components/display_name';
-import { IconButton } from 'flavours/glitch/components/icon_button';
-
-const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
-});
-
-const mapStateToProps = (state, { accountId }) => ({
-  account: state.getIn(['accounts', accountId]),
-});
-
-class Header extends ImmutablePureComponent {
-
-  static propTypes = {
-    accountId: PropTypes.string.isRequired,
-    statusId: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.record.isRequired,
-    onClose: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  render () {
-    const { account, statusId, onClose, intl } = this.props;
-
-    return (
-      <div className='picture-in-picture__header'>
-        <Link to={`/@${account.get('acct')}/${statusId}`} className='picture-in-picture__header__account'>
-          <Avatar account={account} size={36} />
-          <DisplayName account={account} />
-        </Link>
-
-        <IconButton icon='times' iconComponent={CloseIcon} onClick={onClose} title={intl.formatMessage(messages.close)} />
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(injectIntl(Header));

app/javascript/flavours/glitch/features/picture_in_picture/components/header.tsx

@@ -0,0 +1,46 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { DisplayName } from 'flavours/glitch/components/display_name';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { useAppSelector } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+interface Props {
+  accountId: string;
+  statusId: string;
+  onClose: () => void;
+}
+
+export const Header: React.FC<Props> = ({ accountId, statusId, onClose }) => {
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+
+  const intl = useIntl();
+
+  if (!account) return null;
+
+  return (
+    <div className='picture-in-picture__header'>
+      <Link
+        to={`/@${account.get('acct')}/${statusId}`}
+        className='picture-in-picture__header__account'
+      >
+        <Avatar account={account} size={36} />
+        <DisplayName account={account} />
+      </Link>
+
+      <IconButton
+        icon='times'
+        iconComponent={CloseIcon}
+        onClick={onClose}
+        title={intl.formatMessage(messages.close)}
+      />
+    </div>
+  );
+};

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

@@ -1,93 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import classNames from 'classnames';
-
-import { connect } from 'react-redux';
-
-import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
-import Audio from 'flavours/glitch/features/audio';
-import Video from 'flavours/glitch/features/video';
-
-import Footer from './components/footer';
-import Header from './components/header';
-
-const mapStateToProps = state => ({
-  ...state.get('picture_in_picture'),
-  left: state.getIn(['local_settings', 'media', 'pop_in_position']) === 'left',
-});
-
-class PictureInPicture extends Component {
-
-  static propTypes = {
-    statusId: PropTypes.string,
-    accountId: PropTypes.string,
-    type: PropTypes.string,
-    src: PropTypes.string,
-    muted: PropTypes.bool,
-    volume: PropTypes.number,
-    currentTime: PropTypes.number,
-    poster: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    foregroundColor: PropTypes.string,
-    accentColor: PropTypes.string,
-    dispatch: PropTypes.func.isRequired,
-    left: PropTypes.bool,
-  };
-
-  handleClose = () => {
-    const { dispatch } = this.props;
-    dispatch(removePictureInPicture());
-  };
-
-  render () {
-    const { type, src, currentTime, accountId, statusId, left } = this.props;
-
-    if (!currentTime) {
-      return null;
-    }
-
-    let player;
-
-    if (type === 'video') {
-      player = (
-        <Video
-          src={src}
-          currentTime={this.props.currentTime}
-          volume={this.props.volume}
-          muted={this.props.muted}
-          autoPlay
-          inline
-          alwaysVisible
-        />
-      );
-    } else if (type === 'audio') {
-      player = (
-        <Audio
-          src={src}
-          currentTime={this.props.currentTime}
-          volume={this.props.volume}
-          muted={this.props.muted}
-          poster={this.props.poster}
-          backgroundColor={this.props.backgroundColor}
-          foregroundColor={this.props.foregroundColor}
-          accentColor={this.props.accentColor}
-          autoPlay
-        />
-      );
-    }
-
-    return (
-      <div className={classNames('picture-in-picture', { left })}>
-        <Header accountId={accountId} statusId={statusId} onClose={this.handleClose} />
-
-        {player}
-
-        <Footer statusId={statusId} />
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(PictureInPicture);

app/javascript/flavours/glitch/features/picture_in_picture/index.tsx

@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
+import Audio from 'flavours/glitch/features/audio';
+import Video from 'flavours/glitch/features/video';
+import {
+  useAppDispatch,
+  useAppSelector,
+} from 'flavours/glitch/store/typed_functions';
+
+import Footer from './components/footer';
+import { Header } from './components/header';
+
+export const PictureInPicture: React.FC = () => {
+  const dispatch = useAppDispatch();
+
+  const handleClose = useCallback(() => {
+    dispatch(removePictureInPicture());
+  }, [dispatch]);
+
+  const pipState = useAppSelector((s) => s.picture_in_picture);
+
+  const left = useAppSelector(
+    // @ts-expect-error - `local_settings` is not yet typed
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    (s) => s.getIn(['local_settings', 'media', 'pop_in_position']) === 'left',
+  );
+
+  if (pipState.type === null) {
+    return null;
+  }
+
+  const {
+    type,
+    src,
+    currentTime,
+    accountId,
+    statusId,
+    volume,
+    muted,
+    poster,
+    backgroundColor,
+    foregroundColor,
+    accentColor,
+  } = pipState;
+
+  let player;
+
+  switch (type) {
+    case 'video':
+      player = (
+        <Video
+          src={src}
+          currentTime={currentTime}
+          volume={volume}
+          muted={muted}
+          autoPlay
+          inline
+          alwaysVisible
+        />
+      );
+      break;
+    case 'audio':
+      player = (
+        <Audio
+          src={src}
+          currentTime={currentTime}
+          volume={volume}
+          muted={muted}
+          poster={poster}
+          backgroundColor={backgroundColor}
+          foregroundColor={foregroundColor}
+          accentColor={accentColor}
+          autoPlay
+        />
+      );
+  }
+
+  return (
+    <div className={classNames('picture-in-picture', { left })}>
+      <Header accountId={accountId} statusId={statusId} onClose={handleClose} />
+
+      {player}
+
+      <Footer statusId={statusId} />
+    </div>
+  );
+};

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

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 
 import { showAlertForError } from '../../../actions/alerts';
 import { initBlockModal } from '../../../actions/blocks';
-import { initBoostModal } from '../../../actions/boosts';
 import {
   replyCompose,
   mentionCompose,
@@ -82,7 +81,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       if (e.shiftKey || !boostModal) {
         this.onModalReblog(status);
       } else {
-        dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
       }
     }
   },

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

@@ -25,7 +25,6 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 import { initBlockModal } from '../../actions/blocks';
-import { initBoostModal } from '../../actions/boosts';
 import {
   replyCompose,
   mentionCompose,
@@ -362,11 +361,11 @@ class Status extends ImmutablePureComponent {
 
     if (signedIn) {
       if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
-        dispatch(initBoostModal({ status, onReblog: this.handleModalReblog, missingMediaDescription: true }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog, missingMediaDescription: true } }));
       } else if ((e && e.shiftKey) || !boostModal) {
         this.handleModalReblog(status);
       } else {
-        dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
+        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog } }));
       }
     } else {
       dispatch(openModal({

app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx

@@ -1,131 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts';
-import AttachmentList from 'flavours/glitch/components/attachment_list';
-import { Icon }  from 'flavours/glitch/components/icon';
-import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
-import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import { Avatar } from '../../../components/avatar';
-import { Button } from '../../../components/button';
-import { DisplayName } from '../../../components/display_name';
-import { RelativeTimestamp } from '../../../components/relative_timestamp';
-import StatusContent from '../../../components/status_content';
-
-const messages = defineMessages({
-  cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
-  reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
-});
-
-const mapStateToProps = state => {
-  return {
-    privacy: state.getIn(['boosts', 'new', 'privacy']),
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onChangeBoostPrivacy(value) {
-      dispatch(changeBoostPrivacy(value));
-    },
-  };
-};
-
-class BoostModal extends ImmutablePureComponent {
-  static propTypes = {
-    status: ImmutablePropTypes.map.isRequired,
-    onReblog: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-    missingMediaDescription: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    ...WithRouterPropTypes,
-  };
-
-  handleReblog = () => {
-    this.props.onReblog(this.props.status, this.props.privacy);
-    this.props.onClose();
-  };
-
-  handleAccountClick = (e) => {
-    if (e.button === 0) {
-      e.preventDefault();
-      this.props.onClose();
-      this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
-    }
-  };
-
-  _findContainer = () => {
-    return document.getElementsByClassName('modal-root__container')[0];
-  };
-
-  render () {
-    const { status, missingMediaDescription, privacy, intl } = this.props;
-    const buttonText = status.get('reblogged') ? messages.cancel_reblog : messages.reblog;
-
-    return (
-      <div className='modal-root__modal boost-modal'>
-        <div className='boost-modal__container'>
-          <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
-            <div className='status__info'>
-              <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-                <span className='status__visibility-icon'><VisibilityIcon visibility={status.get('visibility')} /></span>
-                <RelativeTimestamp timestamp={status.get('created_at')} />
-              </a>
-
-              <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
-                <div className='status__avatar'>
-                  <Avatar account={status.get('account')} size={48} />
-                </div>
-
-                <DisplayName account={status.get('account')} />
-              </a>
-            </div>
-
-            <StatusContent status={status} />
-
-            {status.get('media_attachments').size > 0 && (
-              <AttachmentList
-                compact
-                media={status.get('media_attachments')}
-              />
-            )}
-          </div>
-        </div>
-
-        <div className='boost-modal__action-bar'>
-          <div>
-            { missingMediaDescription ?
-              <FormattedMessage id='boost_modal.missing_description' defaultMessage='This toot contains some media without description' />
-              :
-              <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' icon={RepeatIcon} /></span> }} />
-            }
-          </div>
-
-          {status.get('visibility') !== 'private' && !status.get('reblogged') && (
-            <PrivacyDropdown
-              noDirect
-              value={privacy}
-              container={this._findContainer}
-              onChange={this.props.onChangeBoostPrivacy}
-            />
-          )}
-          <Button text={intl.formatMessage(buttonText)} onClick={this.handleReblog} autoFocus />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BoostModal)));

app/javascript/flavours/glitch/features/ui/components/boost_modal.tsx

@@ -0,0 +1,170 @@
+import type { MouseEventHandler } from 'react';
+import { useCallback, useState } from 'react';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+import { useHistory } from 'react-router';
+
+import type Immutable from 'immutable';
+
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import AttachmentList from 'flavours/glitch/components/attachment_list';
+import { Icon } from 'flavours/glitch/components/icon';
+import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
+import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown';
+import type { Account } from 'flavours/glitch/models/account';
+import type { Status, StatusVisibility } from 'flavours/glitch/models/status';
+import { useAppSelector } from 'flavours/glitch/store';
+
+import { Avatar } from '../../../components/avatar';
+import { Button } from '../../../components/button';
+import { DisplayName } from '../../../components/display_name';
+import { RelativeTimestamp } from '../../../components/relative_timestamp';
+import StatusContent from '../../../components/status_content';
+
+const messages = defineMessages({
+  cancel_reblog: {
+    id: 'status.cancel_reblog_private',
+    defaultMessage: 'Unboost',
+  },
+  reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
+});
+
+export const BoostModal: React.FC<{
+  status: Status;
+  onClose: () => void;
+  onReblog: (status: Status, privacy: StatusVisibility) => void;
+  missingMediaDescription?: boolean;
+}> = ({ status, onReblog, onClose, missingMediaDescription }) => {
+  const intl = useIntl();
+  const history = useHistory();
+
+  const default_privacy = useAppSelector(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+    (state) => state.compose.get('default_privacy') as StatusVisibility,
+  );
+
+  const account = status.get('account') as Account;
+  const statusVisibility = status.get('visibility') as StatusVisibility;
+
+  const [privacy, setPrivacy] = useState<StatusVisibility>(
+    statusVisibility === 'private' ? 'private' : default_privacy,
+  );
+
+  const onPrivacyChange = useCallback((value: StatusVisibility) => {
+    setPrivacy(value);
+  }, []);
+
+  const handleReblog = useCallback(() => {
+    onReblog(status, privacy);
+    onClose();
+  }, [onClose, onReblog, status, privacy]);
+
+  const handleAccountClick = useCallback<MouseEventHandler>(
+    (e) => {
+      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        onClose();
+        history.push(`/@${account.acct}`);
+      }
+    },
+    [history, onClose, account],
+  );
+
+  const buttonText = status.get('reblogged')
+    ? messages.cancel_reblog
+    : messages.reblog;
+
+  const findContainer = useCallback(
+    () => document.getElementsByClassName('modal-root__container')[0],
+    [],
+  );
+
+  return (
+    <div className='modal-root__modal boost-modal'>
+      <div className='boost-modal__container'>
+        <div
+          className={classNames(
+            'status',
+            `status-${statusVisibility}`,
+            'light',
+          )}
+        >
+          <div className='status__info'>
+            <a
+              href={status.get('url') as string}
+              className='status__relative-time'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <span className='status__visibility-icon'>
+                <VisibilityIcon visibility={statusVisibility} />
+              </span>
+              <RelativeTimestamp
+                timestamp={status.get('created_at') as string}
+              />
+            </a>
+
+            <a
+              onClick={handleAccountClick}
+              href={account.url}
+              className='status__display-name'
+            >
+              <div className='status__avatar'>
+                <Avatar account={account} size={48} />
+              </div>
+
+              <DisplayName account={account} />
+            </a>
+          </div>
+
+          {/* @ts-expect-error Expected until StatusContent is typed */}
+          <StatusContent status={status} />
+
+          {(status.get('media_attachments') as Immutable.List<unknown>).size >
+            0 && (
+            <AttachmentList compact media={status.get('media_attachments')} />
+          )}
+        </div>
+      </div>
+
+      <div className='boost-modal__action-bar'>
+        <div>
+          {missingMediaDescription ? (
+            <FormattedMessage
+              id='boost_modal.missing_description'
+              defaultMessage='This toot contains some media without description'
+            />
+          ) : (
+            <FormattedMessage
+              id='boost_modal.combo'
+              defaultMessage='You can press {combo} to skip this next time'
+              values={{
+                combo: (
+                  <span>
+                    Shift + <Icon id='retweet' icon={RepeatIcon} />
+                  </span>
+                ),
+              }}
+            />
+          )}
+        </div>
+        {statusVisibility !== 'private' && !status.get('reblogged') && (
+          <PrivacyDropdown
+            noDirect
+            value={privacy}
+            container={findContainer}
+            onChange={onPrivacyChange}
+          />
+        )}
+        <Button
+          text={intl.formatMessage(buttonText)}
+          onClick={handleReblog}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+        />
+      </div>
+    </div>
+  );
+};

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -26,7 +26,7 @@ import BundleContainer from '../containers/bundle_container';
 
 import ActionsModal from './actions_modal';
 import AudioModal from './audio_modal';
-import BoostModal from './boost_modal';
+import { BoostModal } from './boost_modal';
 import BundleModalError from './bundle_modal_error';
 import ConfirmationModal from './confirmation_modal';
 import DeprecatedSettingsModal from './deprecated_settings_modal';

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

@@ -16,7 +16,7 @@ import { changeLayout } from 'flavours/glitch/actions/app';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
 import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { Permalink } from 'flavours/glitch/components/permalink';
-import PictureInPicture from 'flavours/glitch/features/picture_in_picture';
+import { PictureInPicture } from 'flavours/glitch/features/picture_in_picture';
 import { layoutFromWindow } from 'flavours/glitch/is_mobile';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
@@ -96,7 +96,7 @@ const mapStateToProps = state => ({
 const keyMap = {
   help: '?',
   new: 'n',
-  search: 's',
+  search: ['s', '/'],
   forceNew: 'option+n',
   toggleComposeSpoilers: 'option+x',
   focusColumn: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],

app/javascript/flavours/glitch/models/status.ts

@@ -0,0 +1,4 @@
+export type { StatusVisibility } from 'flavours/glitch/api_types/statuses';
+
+// Temporary until we type it correctly
+export type Status = Immutable.Map<string, unknown>;

app/javascript/flavours/glitch/packs/admin.tsx

@@ -363,6 +363,6 @@ ready(() => {
   document.querySelectorAll('[data-admin-component]').forEach((element) => {
     void mountReactComponent(element);
   });
-}).catch((reason) => {
+}).catch((reason: unknown) => {
   throw reason;
 });

app/javascript/flavours/glitch/packs/public.tsx

@@ -69,7 +69,7 @@ window.addEventListener('message', (e) => {
       },
       '*',
     );
-  }).catch((e) => {
+  }).catch((e: unknown) => {
     console.error('Error in setHeightMessage postMessage', e);
   });
 });
@@ -206,7 +206,7 @@ function loaded() {
 
         return true;
       })
-      .catch((error) => {
+      .catch((error: unknown) => {
         console.error(error);
       });
   }
@@ -448,7 +448,7 @@ Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
 });
 
 function main() {
-  ready(loaded).catch((error) => {
+  ready(loaded).catch((error: unknown) => {
     console.error(error);
   });
 }
@@ -457,6 +457,6 @@ loadPolyfills()
   .then(loadLocale)
   .then(main)
   .then(loadKeyboardExtensions)
-  .catch((error) => {
+  .catch((error: unknown) => {
     console.error(error);
   });

app/javascript/flavours/glitch/reducers/boosts.js

@@ -1,25 +0,0 @@
-import Immutable from 'immutable';
-
-import {
-  BOOSTS_INIT_MODAL,
-  BOOSTS_CHANGE_PRIVACY,
-} from 'flavours/glitch/actions/boosts';
-
-const initialState = Immutable.Map({
-  new: Immutable.Map({
-    privacy: 'public',
-  }),
-});
-
-export default function mutes(state = initialState, action) {
-  switch (action.type) {
-  case BOOSTS_INIT_MODAL:
-    return state.withMutations((state) => {
-      state.setIn(['new', 'privacy'], action.privacy);
-    });
-  case BOOSTS_CHANGE_PRIVACY:
-    return state.setIn(['new', 'privacy'], action.privacy);
-  default:
-    return state;
-  }
-}

app/javascript/flavours/glitch/reducers/index.ts

@@ -7,7 +7,6 @@ import { accountsReducer } from './accounts';
 import accounts_map from './accounts_map';
 import alerts from './alerts';
 import announcements from './announcements';
-import boosts from './boosts';
 import compose from './compose';
 import contexts from './contexts';
 import conversations from './conversations';
@@ -22,14 +21,14 @@ import listAdder from './list_adder';
 import listEditor from './list_editor';
 import lists from './lists';
 import local_settings from './local_settings';
-import markers from './markers';
+import { markersReducer } from './markers';
 import media_attachments from './media_attachments';
 import meta from './meta';
 import { modalReducer } from './modal';
 import { notificationPolicyReducer } from './notification_policy';
 import { notificationRequestsReducer } from './notification_requests';
 import notifications from './notifications';
-import picture_in_picture from './picture_in_picture';
+import { pictureInPictureReducer } from './picture_in_picture';
 import pinnedAccountsEditor from './pinned_accounts_editor';
 import polls from './polls';
 import push_notifications from './push_notifications';
@@ -63,7 +62,6 @@ const reducers = {
   settings,
   local_settings,
   push_notifications,
-  boosts,
   server,
   contexts,
   compose,
@@ -81,8 +79,8 @@ const reducers = {
   pinnedAccountsEditor,
   polls,
   trends,
-  markers,
+  markers: markersReducer,
-  picture_in_picture,
+  picture_in_picture: pictureInPictureReducer,
   history,
   tags,
   followed_tags,

app/javascript/flavours/glitch/reducers/markers.js

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

app/javascript/flavours/glitch/reducers/markers.ts

@@ -0,0 +1,18 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import { submitMarkersAction } from 'flavours/glitch/actions/markers';
+
+const initialState = {
+  home: '0',
+  notifications: '0',
+};
+
+export const markersReducer = createReducer(initialState, (builder) => {
+  builder.addCase(
+    submitMarkersAction.fulfilled,
+    (state, { payload: { home, notifications } }) => {
+      if (home) state.home = home;
+      if (notifications) state.notifications = notifications;
+    },
+  );
+});

app/javascript/flavours/glitch/reducers/notifications.js

@@ -9,7 +9,7 @@ import {
   rejectFollowRequestSuccess,
 } from '../actions/accounts';
 import {
-  MARKERS_FETCH_SUCCESS,
+  fetchMarkers,
 } from '../actions/markers';
 import {
   NOTIFICATIONS_MOUNT,
@@ -297,8 +297,8 @@ export default function notifications(state = initialState, action) {
   let st;
 
   switch(action.type) {
-  case MARKERS_FETCH_SUCCESS:
+  case fetchMarkers.fulfilled.type:
-    return action.markers.notifications ? recountUnread(state, action.markers.notifications.last_read_id) : state;
+    return action.payload.markers.notifications ? recountUnread(state, action.payload.markers.notifications.last_read_id) : state;
   case NOTIFICATIONS_MOUNT:
     return updateMounted(state);
   case NOTIFICATIONS_UNMOUNT:

app/javascript/flavours/glitch/reducers/picture_in_picture.js

@@ -1,26 +0,0 @@
-import { PICTURE_IN_PICTURE_DEPLOY, PICTURE_IN_PICTURE_REMOVE } from 'flavours/glitch/actions/picture_in_picture';
-
-import { TIMELINE_DELETE } from '../actions/timelines';
-
-const initialState = {
-  statusId: null,
-  accountId: null,
-  type: null,
-  src: null,
-  muted: false,
-  volume: 0,
-  currentTime: 0,
-};
-
-export default function pictureInPicture(state = initialState, action) {
-  switch(action.type) {
-  case PICTURE_IN_PICTURE_DEPLOY:
-    return { statusId: action.statusId, accountId: action.accountId, type: action.playerType, ...action.props };
-  case PICTURE_IN_PICTURE_REMOVE:
-    return { ...initialState };
-  case TIMELINE_DELETE:
-    return (state.statusId === action.id) ? { ...initialState } : state;
-  default:
-    return state;
-  }
-}

app/javascript/flavours/glitch/reducers/picture_in_picture.ts

@@ -0,0 +1,56 @@
+import type { Reducer } from '@reduxjs/toolkit';
+
+import {
+  deployPictureInPictureAction,
+  removePictureInPicture,
+} from 'flavours/glitch/actions/picture_in_picture';
+
+import { TIMELINE_DELETE } from '../actions/timelines';
+
+export interface PIPMediaProps {
+  src: string;
+  muted: boolean;
+  volume: number;
+  currentTime: number;
+  poster: string;
+  backgroundColor: string;
+  foregroundColor: string;
+  accentColor: string;
+}
+
+interface PIPStateWithValue extends Partial<PIPMediaProps> {
+  statusId: string;
+  accountId: string;
+  type: 'audio' | 'video';
+}
+
+interface PIPStateEmpty extends Partial<PIPMediaProps> {
+  type: null;
+}
+
+type PIPState = PIPStateWithValue | PIPStateEmpty;
+
+const initialState = {
+  type: null,
+  muted: false,
+  volume: 0,
+  currentTime: 0,
+};
+
+export const pictureInPictureReducer: Reducer<PIPState> = (
+  state = initialState,
+  action,
+) => {
+  if (deployPictureInPictureAction.match(action))
+    return {
+      statusId: action.payload.statusId,
+      accountId: action.payload.accountId,
+      type: action.payload.playerType,
+      ...action.payload.props,
+    };
+  else if (removePictureInPicture.match(action)) return initialState;
+  else if (action.type === TIMELINE_DELETE)
+    if (state.type && state.statusId === action.id) return initialState;
+
+  return state;
+};

app/javascript/flavours/glitch/selectors/index.js

@@ -61,7 +61,7 @@ export const makeGetStatus = () => {
 
 export const makeGetPictureInPicture = () => {
   return createSelector([
-    (state, { id }) => state.get('picture_in_picture').statusId === id,
+    (state, { id }) => state.picture_in_picture.statusId === id,
     (state) => state.getIn(['meta', 'layout']) !== 'mobile',
   ], (inUse, available) => ImmutableMap({
     inUse: inUse && available,

app/javascript/flavours/glitch/store/middlewares/errors.ts

@@ -1,16 +1,27 @@
-import { isAction } from '@reduxjs/toolkit';
+import {
+  isAction,
+  isAsyncThunkAction,
+  isRejectedWithValue,
+} from '@reduxjs/toolkit';
 import type { Action, Middleware } from '@reduxjs/toolkit';
 
 import type { RootState } from '..';
 import { showAlertForError } from '../../actions/alerts';
+import type { AsyncThunkRejectValue } from '../typed_functions';
 
 const defaultFailSuffix = 'FAIL';
 const isFailedAction = new RegExp(`${defaultFailSuffix}$`, 'g');
 
-interface ActionWithMaybeAlertParams extends Action {
+interface ActionWithMaybeAlertParams extends Action, AsyncThunkRejectValue {}
-  skipAlert?: boolean;
+
-  skipNotFound?: boolean;
+interface RejectedAction extends Action {
-  error?: unknown;
+  payload: AsyncThunkRejectValue;
+}
+
+function isRejectedActionWithPayload(
+  action: unknown,
+): action is RejectedAction {
+  return isAsyncThunkAction(action) && isRejectedWithValue(action);
 }
 
 function isActionWithmaybeAlertParams(
@@ -19,11 +30,16 @@ function isActionWithmaybeAlertParams(
   return isAction(action);
 }
 
-export const errorsMiddleware: Middleware<Record<string, never>, RootState> =
+// eslint-disable-next-line @typescript-eslint/ban-types -- we need to use `{}` here to ensure the dispatch types can be merged
+export const errorsMiddleware: Middleware<{}, RootState> =
   ({ dispatch }) =>
   (next) =>
   (action) => {
-    if (
+    if (isRejectedActionWithPayload(action) && !action.payload.skipAlert) {
+      dispatch(
+        showAlertForError(action.payload.error, action.payload.skipNotFound),
+      );
+    } else if (
       isActionWithmaybeAlertParams(action) &&
       !action.skipAlert &&
       action.type.match(isFailedAction)

app/javascript/flavours/glitch/store/middlewares/sounds.ts

@@ -51,7 +51,8 @@ const play = (audio: HTMLAudioElement) => {
 };
 
 export const soundsMiddleware = (): Middleware<
-  Record<string, never>,
+  // eslint-disable-next-line @typescript-eslint/ban-types -- we need to use `{}` here to ensure the dispatch types can be merged
+  {},
   RootState
 > => {
   const soundCache: Record<string, HTMLAudioElement> = {};

app/javascript/flavours/glitch/store/typed_functions.ts

@@ -7,8 +7,14 @@ import type { AppDispatch, RootState } from './store';
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
 export const useAppSelector = useSelector.withTypes<RootState>();
 
+export interface AsyncThunkRejectValue {
+  skipAlert?: boolean;
+  skipNotFound?: boolean;
+  error?: unknown;
+}
+
 export const createAppAsyncThunk = createAsyncThunk.withTypes<{
   state: RootState;
   dispatch: AppDispatch;
-  rejectValue: string;
+  rejectValue: AsyncThunkRejectValue;
 }>();

app/javascript/flavours/glitch/styles/components.scss

@@ -2458,14 +2458,14 @@ a.account__display-name {
   &.activate {
     & > .icon {
       animation: spring-rotate-in 1s linear;
-      transform-origin: 50% 55%;
+      transform-origin: 50% 52%;
     }
   }
 
   &.deactivate {
     & > .icon {
       animation: spring-rotate-out 1s linear;
-      transform-origin: 50% 55%;
+      transform-origin: 50% 52%;
     }
   }
 }
@@ -2826,6 +2826,7 @@ a.account__display-name {
 }
 
 $ui-header-height: 55px;
+$ui-header-logo-wordmark-width: 99px;
 
 .ui__header {
   display: none;
@@ -2841,6 +2842,10 @@ $ui-header-height: 55px;
   &__logo {
     display: inline-flex;
     padding: 15px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    container: header-logo / inline-size;
 
     .logo {
       height: $ui-header-height - 30px;
@@ -2851,7 +2856,7 @@ $ui-header-height: 55px;
       display: none;
     }
 
-    @media screen and (width >= 320px) {
+    @container header-logo (min-width: #{$ui-header-logo-wordmark-width}) {
       .logo--wordmark {
         display: block;
       }
@@ -2868,6 +2873,7 @@ $ui-header-height: 55px;
     gap: 10px;
     padding: 0 10px;
     overflow: hidden;
+    flex-shrink: 0;
 
     .button {
       flex: 0 0 auto;
@@ -2885,7 +2891,7 @@ $ui-header-height: 55px;
 }
 
 .tabs-bar__wrapper {
-  background: var(--background-color-tint);
+  background: var(--background-color);
   backdrop-filter: var(--background-filter);
   position: sticky;
   top: $ui-header-height;
@@ -3104,24 +3110,31 @@ $ui-header-height: 55px;
     }
   }
 
-  .layout-single-column .ui__header {
+  .layout-single-column {
-    display: flex;
+    .ui__header {
-    background: var(--background-color-tint);
+      display: flex;
-    border-bottom: 1px solid var(--background-border-color);
+      background: var(--background-color);
-  }
+      border-bottom: 1px solid var(--background-border-color);
+    }
 
-  .column > .scrollable,
+    .column > .scrollable,
-  .tabs-bar__wrapper .column-header,
+    .tabs-bar__wrapper .column-header,
-  .tabs-bar__wrapper .column-back-button {
+    .tabs-bar__wrapper .column-back-button {
-    border-left: 0;
+      border-left: 0;
-    border-right: 0;
+      border-right: 0;
-  }
+    }
 
-  .column-header,
+    .column-header,
-  .column-back-button,
+    .column-back-button,
-  .scrollable,
+    .scrollable,
-  .error-column {
+    .error-column {
-    border-radius: 0 !important;
+      border-radius: 0 !important;
+    }
+
+    .column-header,
+    .column-back-button {
+      border-top: 0;
+    }
   }
 }
 
@@ -3680,10 +3693,6 @@ $ui-header-height: 55px;
   &:hover {
     text-decoration: underline;
   }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-top: 0;
-  }
 }
 
 .column-header__back-button {
@@ -4470,10 +4479,6 @@ a.status-card {
       padding-top: 16px;
     }
   }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-top: 0;
-  }
 }
 
 .column-header__buttons {
@@ -5471,6 +5476,7 @@ a.status-card {
 .language-dropdown__dropdown {
   box-shadow: var(--dropdown-shadow);
   background: var(--dropdown-background-color);
+  backdrop-filter: var(--background-filter);
   border: 1px solid var(--dropdown-border-color);
   padding: 4px;
   border-radius: 4px;
@@ -8439,8 +8445,13 @@ noscript {
         }
       }
 
-      @container account-header (max-width: 372px) {
+      .optional {
-        .optional {
+        @container account-header (max-width: 372px) {
+          display: none;
+        }
+
+        // Fallback for older browsers with no container queries support
+        @media screen and (max-width: 372px + 55px) {
           display: none;
         }
       }
@@ -10686,9 +10697,10 @@ noscript {
     }
 
     .filtered-notifications-banner__badge {
-      background-color: $highlight-text-color;
+      background: $ui-button-background-color;
       border-radius: 4px;
       padding: 1px 6px;
+      color: $white;
     }
   }
 

app/javascript/flavours/glitch/styles/emoji_picker.scss

@@ -112,10 +112,11 @@
       border: 0;
     }
 
-    &::-moz-focus-inner,
+    &:active,
-    &:focus,
+    &:focus {
-    &:active {
+      outline: none !important;
-      outline: 0 !important;
+      border-width: 1px !important;
+      border-color: $ui-button-background-color;
     }
 
     &::-webkit-search-cancel-button {

app/javascript/flavours/glitch/styles/mastodon-light/diff.scss

@@ -80,6 +80,7 @@ html {
 }
 
 .search__input,
+.search__popout,
 .setting-text,
 .report-dialog-modal__textarea,
 .audio-player {
@@ -439,7 +440,8 @@ html {
 .directory__tag > div,
 .card > a,
 .page-header,
-.compose-form .compose-form__warning {
+.compose-form,
+.compose-form__warning {
   box-shadow: none;
 }
 
@@ -551,6 +553,10 @@ html {
 
 .compose-form .autosuggest-textarea__textarea,
 .compose-form__highlightable,
+.search__input,
+.search__popout,
+.emoji-mart-search input,
+.language-dropdown__dropdown .emoji-mart-search input,
 .poll__option input[type='text'] {
   background: darken($ui-base-color, 10%);
 }

app/javascript/flavours/glitch/utils/numbers.ts

@@ -70,10 +70,10 @@ export function roundTo10(num: number): number {
   return Math.round(num * 0.1) / 0.1;
 }
 
-export function toCappedNumber(num: string): string {
+export function toCappedNumber(num: number, max = 99): string {
-  if (parseInt(num) > 99) {
+  if (num > max) {
-    return '99+';
+    return `${max}+`;
   } else {
-    return num;
+    return num.toString();
   }
 }

app/javascript/flavours/glitch/uuid.ts

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

app/javascript/mastodon/actions/boosts.js

@@ -1,32 +0,0 @@
-import { openModal } from './modal';
-
-export const BOOSTS_INIT_MODAL = 'BOOSTS_INIT_MODAL';
-export const BOOSTS_CHANGE_PRIVACY = 'BOOSTS_CHANGE_PRIVACY';
-
-export function initBoostModal(props) {
-  return (dispatch, getState) => {
-    const default_privacy = getState().getIn(['compose', 'default_privacy']);
-
-    const privacy = props.status.get('visibility') === 'private' ? 'private' : default_privacy;
-
-    dispatch({
-      type: BOOSTS_INIT_MODAL,
-      privacy,
-    });
-
-    dispatch(openModal({
-      modalType: 'BOOST',
-      modalProps: props,
-    }));
-  };
-}
-
-
-export function changeBoostPrivacy(privacy) {
-  return dispatch => {
-    dispatch({
-      type: BOOSTS_CHANGE_PRIVACY,
-      privacy,
-    });
-  };
-}

app/javascript/mastodon/actions/markers.js

@@ -1,152 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-
-import { debounce } from 'lodash';
-
-import api from '../api';
-import { compareId } from '../compare_id';
-
-export const MARKERS_FETCH_REQUEST = 'MARKERS_FETCH_REQUEST';
-export const MARKERS_FETCH_SUCCESS = 'MARKERS_FETCH_SUCCESS';
-export const MARKERS_FETCH_FAIL    = 'MARKERS_FETCH_FAIL';
-export const MARKERS_SUBMIT_SUCCESS = 'MARKERS_SUBMIT_SUCCESS';
-
-export const synchronouslySubmitMarkers = () => (dispatch, getState) => {
-  const accessToken = getState().getIn(['meta', 'access_token'], '');
-  const params      = _buildParams(getState());
-
-  if (Object.keys(params).length === 0 || accessToken === '') {
-    return;
-  }
-
-  // The Fetch API allows us to perform requests that will be carried out
-  // after the page closes. But that only works if the `keepalive` attribute
-  // is supported.
-  if (window.fetch && 'keepalive' in new Request('')) {
-    fetch('/api/v1/markers', {
-      keepalive: true,
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${accessToken}`,
-      },
-      body: JSON.stringify(params),
-    });
-
-    return;
-  } else if (navigator && navigator.sendBeacon) {
-    // Failing that, we can use sendBeacon, but we have to encode the data as
-    // FormData for DoorKeeper to recognize the token.
-    const formData = new FormData();
-
-    formData.append('bearer_token', accessToken);
-
-    for (const [id, value] of Object.entries(params)) {
-      formData.append(`${id}[last_read_id]`, value.last_read_id);
-    }
-
-    if (navigator.sendBeacon('/api/v1/markers', formData)) {
-      return;
-    }
-  }
-
-  // If neither Fetch nor sendBeacon worked, try to perform a synchronous
-  // request.
-  try {
-    const client = new XMLHttpRequest();
-
-    client.open('POST', '/api/v1/markers', false);
-    client.setRequestHeader('Content-Type', 'application/json');
-    client.setRequestHeader('Authorization', `Bearer ${accessToken}`);
-    client.send(JSON.stringify(params));
-  } catch (e) {
-    // Do not make the BeforeUnload handler error out
-  }
-};
-
-const _buildParams = (state) => {
-  const params = {};
-
-  const lastHomeId         = state.getIn(['timelines', 'home', 'items'], ImmutableList()).find(item => item !== null);
-  const lastNotificationId = state.getIn(['notifications', 'lastReadId']);
-
-  if (lastHomeId && compareId(lastHomeId, state.getIn(['markers', 'home'])) > 0) {
-    params.home = {
-      last_read_id: lastHomeId,
-    };
-  }
-
-  if (lastNotificationId && compareId(lastNotificationId, state.getIn(['markers', 'notifications'])) > 0) {
-    params.notifications = {
-      last_read_id: lastNotificationId,
-    };
-  }
-
-  return params;
-};
-
-const debouncedSubmitMarkers = debounce((dispatch, getState) => {
-  const accessToken = getState().getIn(['meta', 'access_token'], '');
-  const params      = _buildParams(getState());
-
-  if (Object.keys(params).length === 0 || accessToken === '') {
-    return;
-  }
-
-  api(getState).post('/api/v1/markers', params).then(() => {
-    dispatch(submitMarkersSuccess(params));
-  }).catch(() => {});
-}, 300000, { leading: true, trailing: true });
-
-export function submitMarkersSuccess({ home, notifications }) {
-  return {
-    type: MARKERS_SUBMIT_SUCCESS,
-    home: (home || {}).last_read_id,
-    notifications: (notifications || {}).last_read_id,
-  };
-}
-
-export function submitMarkers(params = {}) {
-  const result = (dispatch, getState) => debouncedSubmitMarkers(dispatch, getState);
-
-  if (params.immediate === true) {
-    debouncedSubmitMarkers.flush();
-  }
-
-  return result;
-}
-
-export const fetchMarkers = () => (dispatch, getState) => {
-  const params = { timeline: ['notifications'] };
-
-  dispatch(fetchMarkersRequest());
-
-  api(getState).get('/api/v1/markers', { params }).then(response => {
-    dispatch(fetchMarkersSuccess(response.data));
-  }).catch(error => {
-    dispatch(fetchMarkersFail(error));
-  });
-};
-
-export function fetchMarkersRequest() {
-  return {
-    type: MARKERS_FETCH_REQUEST,
-    skipLoading: true,
-  };
-}
-
-export function fetchMarkersSuccess(markers) {
-  return {
-    type: MARKERS_FETCH_SUCCESS,
-    markers,
-    skipLoading: true,
-  };
-}
-
-export function fetchMarkersFail(error) {
-  return {
-    type: MARKERS_FETCH_FAIL,
-    error,
-    skipLoading: true,
-    skipAlert: true,
-  };
-}

app/javascript/mastodon/actions/markers.ts

@@ -0,0 +1,165 @@
+import { List as ImmutableList } from 'immutable';
+
+import { debounce } from 'lodash';
+
+import type { MarkerJSON } from 'mastodon/api_types/markers';
+import type { RootState } from 'mastodon/store';
+import { createAppAsyncThunk } from 'mastodon/store/typed_functions';
+
+import api, { authorizationTokenFromState } from '../api';
+import { compareId } from '../compare_id';
+
+export const synchronouslySubmitMarkers = createAppAsyncThunk(
+  'markers/submit',
+  async (_args, { getState }) => {
+    const accessToken = authorizationTokenFromState(getState);
+    const params = buildPostMarkersParams(getState());
+
+    if (Object.keys(params).length === 0 || !accessToken) {
+      return;
+    }
+
+    // The Fetch API allows us to perform requests that will be carried out
+    // after the page closes. But that only works if the `keepalive` attribute
+    // is supported.
+    if ('fetch' in window && 'keepalive' in new Request('')) {
+      await fetch('/api/v1/markers', {
+        keepalive: true,
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: JSON.stringify(params),
+      });
+
+      return;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    } else if ('navigator' && 'sendBeacon' in navigator) {
+      // Failing that, we can use sendBeacon, but we have to encode the data as
+      // FormData for DoorKeeper to recognize the token.
+      const formData = new FormData();
+
+      formData.append('bearer_token', accessToken);
+
+      for (const [id, value] of Object.entries(params)) {
+        if (value.last_read_id)
+          formData.append(`${id}[last_read_id]`, value.last_read_id);
+      }
+
+      if (navigator.sendBeacon('/api/v1/markers', formData)) {
+        return;
+      }
+    }
+
+    // If neither Fetch nor sendBeacon worked, try to perform a synchronous
+    // request.
+    try {
+      const client = new XMLHttpRequest();
+
+      client.open('POST', '/api/v1/markers', false);
+      client.setRequestHeader('Content-Type', 'application/json');
+      client.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+      client.send(JSON.stringify(params));
+    } catch (e) {
+      // Do not make the BeforeUnload handler error out
+    }
+  },
+);
+
+interface MarkerParam {
+  last_read_id?: string;
+}
+
+function getLastHomeId(state: RootState): string | undefined {
+  /* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+  return (
+    state
+      // @ts-expect-error state.timelines is not yet typed
+      .getIn(['timelines', 'home', 'items'], ImmutableList())
+      // @ts-expect-error state.timelines is not yet typed
+      .find((item) => item !== null)
+  );
+}
+
+function getLastNotificationId(state: RootState): string | undefined {
+  // @ts-expect-error state.notifications is not yet typed
+  return state.getIn(['notifications', 'lastReadId']);
+}
+
+const buildPostMarkersParams = (state: RootState) => {
+  const params = {} as { home?: MarkerParam; notifications?: MarkerParam };
+
+  const lastHomeId = getLastHomeId(state);
+  const lastNotificationId = getLastNotificationId(state);
+
+  if (lastHomeId && compareId(lastHomeId, state.markers.home) > 0) {
+    params.home = {
+      last_read_id: lastHomeId,
+    };
+  }
+
+  if (
+    lastNotificationId &&
+    compareId(lastNotificationId, state.markers.notifications) > 0
+  ) {
+    params.notifications = {
+      last_read_id: lastNotificationId,
+    };
+  }
+
+  return params;
+};
+
+export const submitMarkersAction = createAppAsyncThunk<{
+  home: string | undefined;
+  notifications: string | undefined;
+}>('markers/submitAction', async (_args, { getState }) => {
+  const accessToken = authorizationTokenFromState(getState);
+  const params = buildPostMarkersParams(getState());
+
+  if (Object.keys(params).length === 0 || accessToken === '') {
+    return { home: undefined, notifications: undefined };
+  }
+
+  await api(getState).post<MarkerJSON>('/api/v1/markers', params);
+
+  return {
+    home: params.home?.last_read_id,
+    notifications: params.notifications?.last_read_id,
+  };
+});
+
+const debouncedSubmitMarkers = debounce(
+  (dispatch) => {
+    dispatch(submitMarkersAction());
+  },
+  300000,
+  {
+    leading: true,
+    trailing: true,
+  },
+);
+
+export const submitMarkers = createAppAsyncThunk(
+  'markers/submit',
+  (params: { immediate?: boolean }, { dispatch }) => {
+    debouncedSubmitMarkers(dispatch);
+
+    if (params.immediate) {
+      debouncedSubmitMarkers.flush();
+    }
+  },
+);
+
+export const fetchMarkers = createAppAsyncThunk(
+  'markers/fetch',
+  async (_args, { getState }) => {
+    const response = await api(getState).get<Record<string, MarkerJSON>>(
+      `/api/v1/markers`,
+      { params: { timeline: ['notifications'] } },
+    );
+
+    return { markers: response.data };
+  },
+);

app/javascript/mastodon/actions/picture_in_picture.js

@@ -1,46 +0,0 @@
-// @ts-check
-
-export const PICTURE_IN_PICTURE_DEPLOY = 'PICTURE_IN_PICTURE_DEPLOY';
-export const PICTURE_IN_PICTURE_REMOVE = 'PICTURE_IN_PICTURE_REMOVE';
-
-/**
- * @typedef MediaProps
- * @property {string} src
- * @property {boolean} muted
- * @property {number} volume
- * @property {number} currentTime
- * @property {string} poster
- * @property {string} backgroundColor
- * @property {string} foregroundColor
- * @property {string} accentColor
- */
-
-/**
- * @param {string} statusId
- * @param {string} accountId
- * @param {string} playerType
- * @param {MediaProps} props
- * @returns {object}
- */
-export const deployPictureInPicture = (statusId, accountId, playerType, props) => {
-  // @ts-expect-error
-  return (dispatch, getState) => {
-    // Do not open a player for a toot that does not exist
-    if (getState().hasIn(['statuses', statusId])) {
-      dispatch({
-        type: PICTURE_IN_PICTURE_DEPLOY,
-        statusId,
-        accountId,
-        playerType,
-        props,
-      });
-    }
-  };
-};
-
-/*
- * @return {object}
- */
-export const removePictureInPicture = () => ({
-  type: PICTURE_IN_PICTURE_REMOVE,
-});

app/javascript/mastodon/actions/picture_in_picture.ts

@@ -0,0 +1,31 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import type { PIPMediaProps } from 'mastodon/reducers/picture_in_picture';
+import { createAppAsyncThunk } from 'mastodon/store/typed_functions';
+
+interface DeployParams {
+  statusId: string;
+  accountId: string;
+  playerType: 'audio' | 'video';
+  props: PIPMediaProps;
+}
+
+export const removePictureInPicture = createAction('pip/remove');
+
+export const deployPictureInPictureAction =
+  createAction<DeployParams>('pip/deploy');
+
+export const deployPictureInPicture = createAppAsyncThunk(
+  'pip/deploy',
+  (args: DeployParams, { dispatch, getState }) => {
+    const { statusId } = args;
+
+    // Do not open a player for a toot that does not exist
+
+    // @ts-expect-error state.statuses is not yet typed
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    if (getState().hasIn(['statuses', statusId])) {
+      dispatch(deployPictureInPictureAction(args));
+    }
+  },
+);

app/javascript/mastodon/api.ts

@@ -29,9 +29,14 @@ const setCSRFHeader = () => {
 
 void ready(setCSRFHeader);
 
+export const authorizationTokenFromState = (getState?: GetState) => {
+  return (
+    getState && (getState().meta.get('access_token', '') as string | false)
+  );
+};
+
 const authorizationHeaderFromState = (getState?: GetState) => {
-  const accessToken =
+  const accessToken = authorizationTokenFromState(getState);
-    getState && (getState().meta.get('access_token', '') as string);
 
   if (!accessToken) {
     return {};

app/javascript/mastodon/api_types/markers.ts

@@ -0,0 +1,7 @@
+// See app/serializers/rest/account_serializer.rb
+
+export interface MarkerJSON {
+  last_read_id: string;
+  version: string;
+  updated_at: string;
+}

app/javascript/mastodon/api_types/media_attachments.ts

@@ -0,0 +1,22 @@
+// See app/serializers/rest/media_attachment_serializer.rb
+
+export type MediaAttachmentType =
+  | 'image'
+  | 'gifv'
+  | 'video'
+  | 'unknown'
+  | 'audio';
+
+export interface ApiMediaAttachmentJSON {
+  id: string;
+  type: MediaAttachmentType;
+  url: string;
+  preview_url: string;
+  remoteUrl: string;
+  preview_remote_url: string;
+  text_url: string;
+  // TODO: how to define this?
+  meta: unknown;
+  description?: string;
+  blurhash: string;
+}

app/javascript/mastodon/api_types/polls.ts

@@ -0,0 +1,23 @@
+import type { ApiCustomEmojiJSON } from './custom_emoji';
+
+// See app/serializers/rest/poll_serializer.rb
+
+export interface ApiPollOptionJSON {
+  title: string;
+  votes_count: number;
+}
+
+export interface ApiPollJSON {
+  id: string;
+  expires_at: string;
+  expired: boolean;
+  multiple: boolean;
+  votes_count: number;
+  voters_count: number;
+
+  options: ApiPollOptionJSON[];
+  emojis: ApiCustomEmojiJSON[];
+
+  voted: boolean;
+  own_votes: number[];
+}

app/javascript/mastodon/api_types/statuses.ts

@@ -0,0 +1,91 @@
+// See app/serializers/rest/status_serializer.rb
+
+import type { ApiAccountJSON } from './accounts';
+import type { ApiCustomEmojiJSON } from './custom_emoji';
+import type { ApiMediaAttachmentJSON } from './media_attachments';
+import type { ApiPollJSON } from './polls';
+
+// See app/modals/status.rb
+export type StatusVisibility =
+  | 'public'
+  | 'unlisted'
+  | 'private'
+  // | 'limited' // This is never exposed to the API (they become `private`)
+  | 'direct';
+
+export interface ApiStatusApplicationJSON {
+  name: string;
+  website: string;
+}
+
+export interface ApiTagJSON {
+  name: string;
+  url: string;
+}
+
+export interface ApiMentionJSON {
+  id: string;
+  username: string;
+  url: string;
+  acct: string;
+}
+
+export interface ApiPreviewCardJSON {
+  url: string;
+  title: string;
+  description: string;
+  language: string;
+  type: string;
+  author_name: string;
+  author_url: string;
+  provider_name: string;
+  provider_url: string;
+  html: string;
+  width: number;
+  height: number;
+  image: string;
+  image_description: string;
+  embed_url: string;
+  blurhash: string;
+  published_at: string;
+}
+
+export interface ApiStatusJSON {
+  id: string;
+  created_at: string;
+  in_reply_to_id?: string;
+  in_reply_to_account_id?: string;
+  sensitive: boolean;
+  spoiler_text?: string;
+  visibility: StatusVisibility;
+  language: string;
+  uri: string;
+  url: string;
+  replies_count: number;
+  reblogs_count: number;
+  favorites_count: number;
+  edited_at?: string;
+
+  favorited?: boolean;
+  reblogged?: boolean;
+  muted?: boolean;
+  bookmarked?: boolean;
+  pinned?: boolean;
+
+  // filtered: FilterResult[]
+  filtered: unknown; // TODO
+  content?: string;
+  text?: string;
+
+  reblog?: ApiStatusJSON;
+  application?: ApiStatusApplicationJSON;
+  account: ApiAccountJSON;
+  media_attachments: ApiMediaAttachmentJSON[];
+  mentions: ApiMentionJSON[];
+
+  tags: ApiTagJSON[];
+  emojis: ApiCustomEmojiJSON[];
+
+  card?: ApiPreviewCardJSON;
+  poll?: ApiPollJSON;
+}

app/javascript/mastodon/common.js

@@ -2,7 +2,7 @@ import Rails from '@rails/ujs';
 import 'font-awesome/css/font-awesome.css';
 
 export function start() {
-  require.context('../images/', true);
+  require.context('../images/', true, /\.(jpg|png|svg)$/);
 
   try {
     Rails.start();

app/javascript/mastodon/components/button.tsx

@@ -1,26 +1,26 @@
+import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 
 import classNames from 'classnames';
 
-interface BaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface BaseProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
-  text?: JSX.Element;
 }
 
-interface PropsWithChildren extends BaseProps {
+interface PropsChildren extends PropsWithChildren<BaseProps> {
-  text?: never;
+  text?: undefined;
 }
 
 interface PropsWithText extends BaseProps {
-  text: JSX.Element;
+  text: JSX.Element | string;
-  children: never;
+  children?: undefined;
 }
 
-type Props = PropsWithText | PropsWithChildren;
+type Props = PropsWithText | PropsChildren;
 
 export const Button: React.FC<Props> = ({
-  text,
   type = 'button',
   onClick,
   disabled,
@@ -28,6 +28,7 @@ export const Button: React.FC<Props> = ({
   secondary,
   className,
   title,
+  text,
   children,
   ...props
 }) => {

app/javascript/mastodon/components/hashtag_bar.tsx

@@ -24,7 +24,7 @@ export type StatusLike = Record<{
 
 function normalizeHashtag(hashtag: string) {
   return (
-    hashtag && hashtag.startsWith('#') ? hashtag.slice(1) : hashtag
+    !!hashtag && hashtag.startsWith('#') ? hashtag.slice(1) : hashtag
   ).normalize('NFKC');
 }
 

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -191,7 +191,7 @@ const timeRemainingString = (
 interface Props {
   intl: IntlShape;
   timestamp: string;
-  year: number;
+  year?: number;
   futureDate?: boolean;
   short?: boolean;
 }
@@ -203,11 +203,6 @@ class RelativeTimestamp extends Component<Props, States> {
     now: Date.now(),
   };
 
-  static defaultProps = {
-    year: new Date().getFullYear(),
-    short: true,
-  };
-
   _timer: number | undefined;
 
   shouldComponentUpdate(nextProps: Props, nextState: States) {
@@ -257,7 +252,13 @@ class RelativeTimestamp extends Component<Props, States> {
   }
 
   render() {
-    const { timestamp, intl, year, futureDate, short } = this.props;
+    const {
+      timestamp,
+      intl,
+      futureDate,
+      year = new Date().getFullYear(),
+      short = true,
+    } = this.props;
 
     const timeGiven = timestamp.includes('T');
     const date = new Date(timestamp);

app/javascript/mastodon/components/status_action_bar.jsx

@@ -81,7 +81,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
-    relationship: ImmutablePropTypes.map,
+    relationship: ImmutablePropTypes.record,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,

app/javascript/mastodon/components/visibility_icon.tsx

@@ -4,11 +4,10 @@ import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?re
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import type { StatusVisibility } from 'mastodon/models/status';
 
 import { Icon } from './icon';
 
-type Visibility = 'public' | 'unlisted' | 'private' | 'direct';
-
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
   unlisted_short: {
@@ -25,7 +24,7 @@ const messages = defineMessages({
   },
 });
 
-export const VisibilityIcon: React.FC<{ visibility: Visibility }> = ({
+export const VisibilityIcon: React.FC<{ visibility: StatusVisibility }> = ({
   visibility,
 }) => {
   const intl = useIntl();

app/javascript/mastodon/containers/status_container.jsx

@@ -8,7 +8,6 @@ import {
 } from '../actions/accounts';
 import { showAlertForError } from '../actions/alerts';
 import { initBlockModal } from '../actions/blocks';
-import { initBoostModal } from '../actions/boosts';
 import {
   replyCompose,
   mentionCompose,
@@ -107,7 +106,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     if ((e && e.shiftKey) || !boostModal) {
       this.onModalReblog(status);
     } else {
-      dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
+      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
     }
   },
 
@@ -262,7 +261,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   deployPictureInPicture (status, type, mediaProps) {
-    dispatch(deployPictureInPicture(status.get('id'), status.getIn(['account', 'id']), type, mediaProps));
+    dispatch(deployPictureInPicture({statusId: status.get('id'), accountId: status.getIn(['account', 'id']), playerType: type, props: mediaProps}));
   },
 
   onInteractionModal (type, status) {

app/javascript/mastodon/features/emoji/__tests__/emoji-test.js

@@ -22,23 +22,23 @@ describe('emoji', () => {
 
     it('does unicode', () => {
       expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).toEqual(
-        '<img draggable="false" class="emojione" alt="👩‍👩‍👦‍👦" title=":woman-woman-boy-boy:" src="/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg">');
+        '<picture><img draggable="false" class="emojione" alt="👩‍👩‍👦‍👦" title=":woman-woman-boy-boy:" src="/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg"></picture>');
       expect(emojify('👨‍👩‍👧‍👧')).toEqual(
-        '<img draggable="false" class="emojione" alt="👨‍👩‍👧‍👧" title=":man-woman-girl-girl:" src="/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg">');
+        '<picture><img draggable="false" class="emojione" alt="👨‍👩‍👧‍👧" title=":man-woman-girl-girl:" src="/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg"></picture>');
-      expect(emojify('👩‍👩‍👦')).toEqual('<img draggable="false" class="emojione" alt="👩‍👩‍👦" title=":woman-woman-boy:" src="/emoji/1f469-200d-1f469-200d-1f466.svg">');
+      expect(emojify('👩‍👩‍👦')).toEqual('<picture><img draggable="false" class="emojione" alt="👩‍👩‍👦" title=":woman-woman-boy:" src="/emoji/1f469-200d-1f469-200d-1f466.svg"></picture>');
       expect(emojify('\u2757')).toEqual(
-        '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg">');
+        '<picture><img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"></picture>');
     });
 
     it('does multiple unicode', () => {
       expect(emojify('\u2757 #\uFE0F\u20E3')).toEqual(
-        '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg">');
+        '<picture><img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"></picture> <picture><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg"></picture>');
       expect(emojify('\u2757#\uFE0F\u20E3')).toEqual(
-        '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg">');
+        '<picture><img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"></picture><picture><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg"></picture>');
       expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).toEqual(
-        '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg"> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg">');
+        '<picture><img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"></picture> <picture><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg"></picture> <picture><img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"></picture>');
       expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).toEqual(
-        'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg"> bar');
+        'foo <picture><img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg"></picture> <picture><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg"></picture> bar');
     });
 
     it('ignores unicode inside of tags', () => {
@@ -46,16 +46,16 @@ describe('emoji', () => {
     });
 
     it('does multiple emoji properly (issue 5188)', () => {
-      expect(emojify('👌🌈💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg"><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg"><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg">');
+      expect(emojify('👌🌈💕')).toEqual('<picture><img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg"></picture><picture><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg"></picture><picture><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg"></picture>');
-      expect(emojify('👌 🌈 💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg"> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg"> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg">');
+      expect(emojify('👌 🌈 💕')).toEqual('<picture><img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg"></picture> <picture><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg"></picture> <picture><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg"></picture>');
     });
 
     it('does an emoji that has no shortcode', () => {
-      expect(emojify('👁‍🗨')).toEqual('<img draggable="false" class="emojione" alt="👁‍🗨" title="" src="/emoji/1f441-200d-1f5e8.svg">');
+      expect(emojify('👁‍🗨')).toEqual('<picture><img draggable="false" class="emojione" alt="👁‍🗨" title="" src="/emoji/1f441-200d-1f5e8.svg"></picture>');
     });
 
     it('does an emoji whose filename is irregular', () => {
-      expect(emojify('↙️')).toEqual('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="/emoji/2199.svg">');
+      expect(emojify('↙️')).toEqual('<picture><img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="/emoji/2199.svg"></picture>');
     });
 
     it('avoid emojifying on invisible text', () => {
@@ -67,11 +67,11 @@ describe('emoji', () => {
 
     it('avoid emojifying on invisible text with nested tags', () => {
       expect(emojify('<span class="invisible">😄<span class="foo">bar</span>😴</span>😇'))
-        .toEqual('<span class="invisible">😄<span class="foo">bar</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg">');
+        .toEqual('<span class="invisible">😄<span class="foo">bar</span>😴</span><picture><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg"></picture>');
       expect(emojify('<span class="invisible">😄<span class="invisible">😕</span>😴</span>😇'))
-        .toEqual('<span class="invisible">😄<span class="invisible">😕</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg">');
+        .toEqual('<span class="invisible">😄<span class="invisible">😕</span>😴</span><picture><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg"></picture>');
       expect(emojify('<span class="invisible">😄<br>😴</span>😇'))
-        .toEqual('<span class="invisible">😄<br>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg">');
+        .toEqual('<span class="invisible">😄<br>😴</span><picture><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/emoji/1f607.svg"></picture>');
     });
 
     it('does not emojify emojis with textual presentation VS15 character', () => {
@@ -79,19 +79,19 @@ describe('emoji', () => {
         .toEqual('✴︎');
     });
 
-    it('does an simple emoji properly', () => {
+    it('does a simple emoji properly', () => {
       expect(emojify('♀♂'))
-        .toEqual('<img draggable="false" class="emojione" alt="♀" title=":female_sign:" src="/emoji/2640.svg"><img draggable="false" class="emojione" alt="♂" title=":male_sign:" src="/emoji/2642.svg">');
+        .toEqual('<picture><img draggable="false" class="emojione" alt="♀" title=":female_sign:" src="/emoji/2640.svg"></picture><picture><img draggable="false" class="emojione" alt="♂" title=":male_sign:" src="/emoji/2642.svg"></picture>');
     });
 
     it('does an emoji containing ZWJ properly', () => {
       expect(emojify('💂‍♀️💂‍♂️'))
-        .toEqual('<img draggable="false" class="emojione" alt="💂\u200D♀️" title=":female-guard:" src="/emoji/1f482-200d-2640-fe0f_border.svg"><img draggable="false" class="emojione" alt="💂\u200D♂️" title=":male-guard:" src="/emoji/1f482-200d-2642-fe0f_border.svg">');
+        .toEqual('<picture><img draggable="false" class="emojione" alt="💂\u200D♀️" title=":female-guard:" src="/emoji/1f482-200d-2640-fe0f_border.svg"></picture><picture><img draggable="false" class="emojione" alt="💂\u200D♂️" title=":male-guard:" src="/emoji/1f482-200d-2642-fe0f_border.svg"></picture>');
     });
 
     it('keeps ordering as expected (issue fixed by PR 20677)', () => {
       expect(emojify('<p>💕 <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>'))
-        .toEqual('<p><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg"> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>');
+        .toEqual('<p><picture><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg"></picture> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>');
     });
   });
 });