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

Merge upstream changes up to b8444d9bb7
2026-03-29 03:00:33 +02:00 · 2025-10-08 20:15:31 +02:00
parent 503c4d16bb 62fc92dfd8
commit 44b45ab0b7
188 changed files with 3356 additions and 1208 deletions
--- a/.env.production.sample
+++ b/.env.production.sample
@@ -321,9 +321,6 @@ SESSION_RETENTION_PERIOD=31556952

 # Fetch All Replies Behavior
 # --------------------------
-# When a user expands a post (DetailedStatus view), fetch all of its replies
-# (default: false)
-FETCH_REPLIES_ENABLED=false

 # Period to wait between fetching replies (in minutes)
 FETCH_REPLIES_COOLDOWN_MINUTES=15
--- a/.ruby-version
+++ b/.ruby-version
@@ -1 +1 @@
-3.4.6
+3.4.7
--- a/26
+++ b/26
@@ -106,19 +106,19 @@ gem 'opentelemetry-api', '~> 1.7.0'

 group :opentelemetry do
  gem 'opentelemetry-exporter-otlp', '~> 0.30.0', require: false
-  gem 'opentelemetry-instrumentation-active_job', '~> 0.8.0', require: false
-  gem 'opentelemetry-instrumentation-active_model_serializers', '~> 0.22.0', require: false
-  gem 'opentelemetry-instrumentation-concurrent_ruby', '~> 0.22.0', require: false
-  gem 'opentelemetry-instrumentation-excon', '~> 0.24.0', require: false
-  gem 'opentelemetry-instrumentation-faraday', '~> 0.28.0', require: false
-  gem 'opentelemetry-instrumentation-http', '~> 0.25.0', require: false
-  gem 'opentelemetry-instrumentation-http_client', '~> 0.24.0', require: false
-  gem 'opentelemetry-instrumentation-net_http', '~> 0.24.0', require: false
-  gem 'opentelemetry-instrumentation-pg', '~> 0.30.0', require: false
-  gem 'opentelemetry-instrumentation-rack', '~> 0.27.0', require: false
-  gem 'opentelemetry-instrumentation-rails', '~> 0.37.0', require: false
-  gem 'opentelemetry-instrumentation-redis', '~> 0.26.0', require: false
-  gem 'opentelemetry-instrumentation-sidekiq', '~> 0.26.0', require: false
+  gem 'opentelemetry-instrumentation-active_job', '~> 0.9.0', require: false
+  gem 'opentelemetry-instrumentation-active_model_serializers', '~> 0.23.0', require: false
+  gem 'opentelemetry-instrumentation-concurrent_ruby', '~> 0.23.0', require: false
+  gem 'opentelemetry-instrumentation-excon', '~> 0.25.0', require: false
+  gem 'opentelemetry-instrumentation-faraday', '~> 0.29.0', require: false
+  gem 'opentelemetry-instrumentation-http', '~> 0.26.0', require: false
+  gem 'opentelemetry-instrumentation-http_client', '~> 0.25.0', require: false
+  gem 'opentelemetry-instrumentation-net_http', '~> 0.25.0', require: false
+  gem 'opentelemetry-instrumentation-pg', '~> 0.31.0', require: false
+  gem 'opentelemetry-instrumentation-rack', '~> 0.28.0', require: false
+  gem 'opentelemetry-instrumentation-rails', '~> 0.38.0', require: false
+  gem 'opentelemetry-instrumentation-redis', '~> 0.27.0', require: false
+  gem 'opentelemetry-instrumentation-sidekiq', '~> 0.27.0', require: false
  gem 'opentelemetry-sdk', '~> 1.4', require: false
 end

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -96,7 +96,7 @@ GEM
    ast (2.4.3)
    attr_required (1.0.2)
    aws-eventstream (1.4.0)
-    aws-partitions (1.1135.0)
+    aws-partitions (1.1168.0)
    aws-sdk-core (3.215.1)
      aws-eventstream (~> 1, >= 1.3.0)
      aws-partitions (~> 1, >= 1.992.0)
@@ -207,7 +207,7 @@ GEM
      railties (>= 5)
    dotenv (3.1.8)
    drb (2.2.3)
-    dry-cli (1.2.0)
+    dry-cli (1.3.0)
    elasticsearch (7.17.11)
      elasticsearch-api (= 7.17.11)
      elasticsearch-transport (= 7.17.11)
@@ -226,18 +226,18 @@ GEM
      activemodel
    erb (5.0.2)
    erubi (1.13.1)
-    et-orbi (1.2.11)
+    et-orbi (1.4.0)
      tzinfo
-    excon (1.2.8)
+    excon (1.3.0)
      logger
    fabrication (3.0.0)
    faker (3.5.2)
      i18n (>= 1.8.11, < 2)
-    faraday (2.13.4)
+    faraday (2.14.0)
      faraday-net_http (>= 2.0, < 3.5)
      json
      logger
-    faraday-follow_redirects (0.3.0)
+    faraday-follow_redirects (0.4.0)
      faraday (>= 1, < 3)
    faraday-httpclient (2.0.2)
      httpclient (>= 2.2)
@@ -266,18 +266,19 @@ GEM
    fog-openstack (1.1.5)
      fog-core (~> 2.1)
      fog-json (>= 1.0)
-    formatador (1.1.1)
+    formatador (1.2.1)
+      reline
    forwardable (1.3.3)
-    fugit (1.11.1)
-      et-orbi (~> 1, >= 1.2.11)
+    fugit (1.12.0)
+      et-orbi (~> 1.4)
      raabro (~> 1.4)
-    globalid (1.2.1)
+    globalid (1.3.0)
      activesupport (>= 6.1)
-    google-protobuf (4.31.1)
+    google-protobuf (4.32.1)
      bigdecimal
      rake (>= 13)
-    googleapis-common-protos-types (1.20.0)
-      google-protobuf (>= 3.18, < 5.a)
+    googleapis-common-protos-types (1.21.0)
+      google-protobuf (~> 4.26)
    haml (6.3.0)
      temple (>= 0.8.2)
      thor
@@ -293,7 +294,7 @@ GEM
      rainbow
      rubocop (>= 1.0)
      sysexits (~> 1.1)
-    hashdiff (1.2.0)
+    hashdiff (1.2.1)
    hashie (5.0.0)
    hcaptcha (7.1.0)
      json
@@ -309,7 +310,7 @@ GEM
      http-cookie (~> 1.0)
      http-form_data (~> 2.2)
      llhttp-ffi (~> 0.5.0)
-    http-cookie (1.0.8)
+    http-cookie (1.1.0)
      domain_name (~> 0.5)
    http-form_data (2.3.0)
    http_accept_language (2.1.1)
@@ -345,9 +346,9 @@ GEM
      azure-blob (~> 0.5.2)
      hashie (~> 5.0)
    jmespath (1.6.2)
-    json (2.15.0)
+    json (2.15.1)
    json-canonicalization (1.0.0)
-    json-jwt (1.16.7)
+    json-jwt (1.17.0)
      activesupport (>= 4.2)
      aes_key_wrap
      base64
@@ -438,7 +439,7 @@ GEM
    mime-types (3.7.0)
      logger
      mime-types-data (~> 3.2025, >= 3.2025.0507)
-    mime-types-data (3.2025.0916)
+    mime-types-data (3.2025.0924)
    mini_mime (1.1.5)
    mini_portile2 (2.8.9)
    minitest (5.25.5)
@@ -447,7 +448,7 @@ GEM
    mutex_m (0.3.0)
    net-http (0.6.0)
      uri
-    net-imap (0.5.10)
+    net-imap (0.5.12)
      date
      net-protocol
    net-ldap (0.20.0)
@@ -497,7 +498,7 @@ GEM
      tzinfo
      validate_url
      webfinger (~> 2.0)
-    openssl (3.3.0)
+    openssl (3.3.1)
    openssl-signature_algorithm (1.3.0)
      openssl (> 2.0)
    opentelemetry-api (1.7.0)
@@ -510,86 +511,61 @@ GEM
      opentelemetry-common (~> 0.20)
      opentelemetry-sdk (~> 1.2)
      opentelemetry-semantic_conventions
-    opentelemetry-helpers-sql (0.1.1)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-helpers-sql (0.2.0)
+      opentelemetry-api (~> 1.7)
    opentelemetry-helpers-sql-obfuscation (0.3.0)
      opentelemetry-common (~> 0.21)
-    opentelemetry-instrumentation-action_mailer (0.4.0)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-instrumentation-action_mailer (0.5.0)
      opentelemetry-instrumentation-active_support (~> 0.7)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-action_pack (0.13.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
+    opentelemetry-instrumentation-action_pack (0.14.1)
      opentelemetry-instrumentation-rack (~> 0.21)
-    opentelemetry-instrumentation-action_view (0.9.0)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-instrumentation-action_view (0.10.0)
      opentelemetry-instrumentation-active_support (~> 0.7)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-active_job (0.8.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-active_model_serializers (0.22.0)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-instrumentation-active_job (0.9.2)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-active_model_serializers (0.23.0)
      opentelemetry-instrumentation-active_support (>= 0.7.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-active_record (0.9.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-active_storage (0.1.1)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-instrumentation-active_record (0.10.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-active_storage (0.2.0)
      opentelemetry-instrumentation-active_support (~> 0.7)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-active_support (0.8.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-base (0.23.0)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-instrumentation-active_support (0.9.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-base (0.24.0)
+      opentelemetry-api (~> 1.7)
      opentelemetry-common (~> 0.21)
      opentelemetry-registry (~> 0.1)
-    opentelemetry-instrumentation-concurrent_ruby (0.22.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-excon (0.24.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-faraday (0.28.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-http (0.25.1)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-http_client (0.24.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-net_http (0.24.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-pg (0.30.1)
-      opentelemetry-api (~> 1.0)
+    opentelemetry-instrumentation-concurrent_ruby (0.23.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-excon (0.25.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-faraday (0.29.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-http (0.26.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-http_client (0.25.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-net_http (0.25.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-pg (0.31.1)
      opentelemetry-helpers-sql
      opentelemetry-helpers-sql-obfuscation
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-rack (0.27.1)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-rails (0.37.0)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-action_mailer (~> 0.4.0)
-      opentelemetry-instrumentation-action_pack (~> 0.13.0)
-      opentelemetry-instrumentation-action_view (~> 0.9.0)
-      opentelemetry-instrumentation-active_job (~> 0.8.0)
-      opentelemetry-instrumentation-active_record (~> 0.9.0)
-      opentelemetry-instrumentation-active_storage (~> 0.1.0)
-      opentelemetry-instrumentation-active_support (~> 0.8.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-      opentelemetry-instrumentation-concurrent_ruby (~> 0.22.0)
-    opentelemetry-instrumentation-redis (0.26.1)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
-    opentelemetry-instrumentation-sidekiq (0.26.1)
-      opentelemetry-api (~> 1.0)
-      opentelemetry-instrumentation-base (~> 0.23.0)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-rack (0.28.2)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-rails (0.38.0)
+      opentelemetry-instrumentation-action_mailer (~> 0.4)
+      opentelemetry-instrumentation-action_pack (~> 0.13)
+      opentelemetry-instrumentation-action_view (~> 0.9)
+      opentelemetry-instrumentation-active_job (~> 0.8)
+      opentelemetry-instrumentation-active_record (~> 0.9)
+      opentelemetry-instrumentation-active_storage (~> 0.1)
+      opentelemetry-instrumentation-active_support (~> 0.8)
+      opentelemetry-instrumentation-concurrent_ruby (~> 0.22)
+    opentelemetry-instrumentation-redis (0.27.1)
+      opentelemetry-instrumentation-base (~> 0.24)
+    opentelemetry-instrumentation-sidekiq (0.27.1)
+      opentelemetry-instrumentation-base (~> 0.24)
    opentelemetry-registry (0.4.0)
      opentelemetry-api (~> 1.1)
    opentelemetry-sdk (1.9.0)
@@ -616,7 +592,7 @@ GEM
    playwright-ruby-client (1.55.0)
      concurrent-ruby (>= 1.1.6)
      mime-types (>= 3.0)
-    pp (0.6.2)
+    pp (0.6.3)
      prettyprint
    premailer (1.27.0)
      addressable
@@ -644,7 +620,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (3.2.1)
+    rack (3.2.2)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-cors (3.0.0)
@@ -714,9 +690,10 @@ GEM
      readline (~> 0.0)
    rdf-normalize (0.7.0)
      rdf (~> 3.3)
-    rdoc (6.14.2)
+    rdoc (6.15.0)
      erb
      psych (>= 4.0.0)
+      tsort
    readline (0.0.4)
      reline
    redcarpet (3.6.1)
@@ -733,7 +710,7 @@ GEM
      railties (>= 5.2)
    rexml (3.4.4)
    rotp (6.3.0)
-    rouge (4.6.0)
+    rouge (4.6.1)
    rpam2 (4.0.2)
    rqrcode (3.1.0)
      chunky_png (~> 1.0)
@@ -766,7 +743,7 @@ GEM
      rspec-expectations (~> 3.0)
      rspec-mocks (~> 3.0)
      sidekiq (>= 5, < 9)
-    rspec-support (3.13.4)
+    rspec-support (3.13.6)
    rubocop (1.81.1)
      json (~> 2.3)
      language_server-protocol (~> 3.17.0.2)
@@ -827,7 +804,7 @@ GEM
    securerandom (0.4.1)
    shoulda-matchers (6.5.0)
      activesupport (>= 5.2.0)
-    sidekiq (8.0.7)
+    sidekiq (8.0.8)
      connection_pool (>= 2.5.0)
      json (>= 2.9.0)
      logger (>= 1.6.2)
@@ -905,7 +882,7 @@ GEM
    unicode-display_width (3.2.0)
      unicode-emoji (~> 4.1)
    unicode-emoji (4.1.0)
-    uri (1.0.3)
+    uri (1.0.4)
    useragent (0.16.11)
    validate_url (1.0.15)
      activemodel (>= 3.0.0)
@@ -1032,19 +1009,19 @@ DEPENDENCIES
  omniauth_openid_connect (~> 0.8.0)
  opentelemetry-api (~> 1.7.0)
  opentelemetry-exporter-otlp (~> 0.30.0)
-  opentelemetry-instrumentation-active_job (~> 0.8.0)
-  opentelemetry-instrumentation-active_model_serializers (~> 0.22.0)
-  opentelemetry-instrumentation-concurrent_ruby (~> 0.22.0)
-  opentelemetry-instrumentation-excon (~> 0.24.0)
-  opentelemetry-instrumentation-faraday (~> 0.28.0)
-  opentelemetry-instrumentation-http (~> 0.25.0)
-  opentelemetry-instrumentation-http_client (~> 0.24.0)
-  opentelemetry-instrumentation-net_http (~> 0.24.0)
-  opentelemetry-instrumentation-pg (~> 0.30.0)
-  opentelemetry-instrumentation-rack (~> 0.27.0)
-  opentelemetry-instrumentation-rails (~> 0.37.0)
-  opentelemetry-instrumentation-redis (~> 0.26.0)
-  opentelemetry-instrumentation-sidekiq (~> 0.26.0)
+  opentelemetry-instrumentation-active_job (~> 0.9.0)
+  opentelemetry-instrumentation-active_model_serializers (~> 0.23.0)
+  opentelemetry-instrumentation-concurrent_ruby (~> 0.23.0)
+  opentelemetry-instrumentation-excon (~> 0.25.0)
+  opentelemetry-instrumentation-faraday (~> 0.29.0)
+  opentelemetry-instrumentation-http (~> 0.26.0)
+  opentelemetry-instrumentation-http_client (~> 0.25.0)
+  opentelemetry-instrumentation-net_http (~> 0.25.0)
+  opentelemetry-instrumentation-pg (~> 0.31.0)
+  opentelemetry-instrumentation-rack (~> 0.28.0)
+  opentelemetry-instrumentation-rails (~> 0.38.0)
+  opentelemetry-instrumentation-redis (~> 0.27.0)
+  opentelemetry-instrumentation-sidekiq (~> 0.27.0)
  opentelemetry-sdk (~> 1.4)
  ox (~> 2.14)
  parslet
@@ -1110,4 +1087,4 @@ RUBY VERSION
   ruby 3.4.1p0

 BUNDLED WITH
-   2.7.1
+   2.7.2
--- a/app/helpers/home_helper.rb
+++ b/app/helpers/home_helper.rb
@@ -21,7 +21,13 @@ module HomeHelper
                        end
                    end
                  else
-                    link_to(path || ActivityPub::TagManager.instance.url_for(account), class: 'account__display-name') do
+                    account_url = if account.suspended?
+                                    ActivityPub::TagManager.instance.url_for(account)
+                                  else
+                                    web_url("@#{account.pretty_acct}")
+                                  end
+
+                    link_to(path || account_url, class: 'account__display-name') do
                      content_tag(:div, class: 'account__avatar-wrapper') do
                        image_tag(full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), class: 'account__avatar', width: 46, height: 46)
                      end +
--- a/app/javascript/entrypoints/public.tsx
+++ b/app/javascript/entrypoints/public.tsx
@@ -70,7 +70,7 @@ function loaded() {
  };

  document.querySelectorAll('.emojify').forEach((content) => {
-    content.innerHTML = emojify(content.innerHTML);
+    content.innerHTML = emojify(content.innerHTML, {}, true); // Force emojify as public doesn't load the new emoji system.
  });

  document
--- a/app/javascript/flavours/glitch/actions/compose_typed.ts
+++ b/app/javascript/flavours/glitch/actions/compose_typed.ts
@@ -4,6 +4,7 @@ import { createAction } from '@reduxjs/toolkit';
 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';

 import { apiUpdateMedia } from 'flavours/glitch/api/compose';
+import { apiGetSearch } from 'flavours/glitch/api/search';
 import type { ApiMediaAttachmentJSON } from 'flavours/glitch/api_types/media_attachments';
 import type { MediaAttachment } from 'flavours/glitch/models/media_attachment';
 import {
@@ -16,6 +17,7 @@ import type { Status } from '../models/status';

 import { showAlert } from './alerts';
 import { focusCompose } from './compose';
+import { importFetchedStatuses } from './importer';
 import { openModal } from './modal';

 const messages = defineMessages({
@@ -165,6 +167,41 @@ export const quoteComposeById = createAppThunk(
  },
 );

+export const pasteLinkCompose = createDataLoadingThunk(
+  'compose/pasteLink',
+  async ({ url }: { url: string }) => {
+    return await apiGetSearch({
+      q: url,
+      type: 'statuses',
+      resolve: true,
+      limit: 2,
+    });
+  },
+  (data, { dispatch, getState }) => {
+    const composeState = getState().compose;
+
+    if (
+      composeState.get('quoted_status_id') ||
+      composeState.get('is_submitting') ||
+      composeState.get('poll') ||
+      composeState.get('is_uploading')
+    )
+      return;
+
+    dispatch(importFetchedStatuses(data.statuses));
+
+    if (
+      data.statuses.length === 1 &&
+      data.statuses[0] &&
+      ['automatic', 'manual'].includes(
+        data.statuses[0].quote_approval?.current_user ?? 'denied',
+      )
+    ) {
+      dispatch(quoteComposeById(data.statuses[0].id));
+    }
+  },
+);
+
 export const quoteComposeCancel = createAction('compose/quoteComposeCancel');

 export const setComposeQuotePolicy = createAction<ApiQuotePolicy>(
--- a/app/javascript/flavours/glitch/actions/statuses_typed.ts
+++ b/app/javascript/flavours/glitch/actions/statuses_typed.ts
@@ -9,8 +9,9 @@ import { importFetchedStatuses } from './importer';

 export const fetchContext = createDataLoadingThunk(
  'status/context',
-  ({ statusId }: { statusId: string }) => apiGetContext(statusId),
-  ({ context, refresh }, { dispatch }) => {
+  ({ statusId }: { statusId: string; prefetchOnly?: boolean }) =>
+    apiGetContext(statusId),
+  ({ context, refresh }, { dispatch, actionArg: { prefetchOnly = false } }) => {
    const statuses = context.ancestors.concat(context.descendants);

    dispatch(importFetchedStatuses(statuses));
@@ -18,6 +19,7 @@ export const fetchContext = createDataLoadingThunk(
    return {
      context,
      refresh,
+      prefetchOnly,
    };
  },
 );
@@ -26,6 +28,14 @@ export const completeContextRefresh = createAction<{ statusId: string }>(
  'status/context/complete',
 );

+export const showPendingReplies = createAction<{ statusId: string }>(
+  'status/context/showPendingReplies',
+);
+
+export const clearPendingReplies = createAction<{ statusId: string }>(
+  'status/context/clearPendingReplies',
+);
+
 export const setStatusQuotePolicy = createDataLoadingThunk(
  'status/setQuotePolicy',
  ({ statusId, policy }: { statusId: string; policy: ApiQuotePolicy }) => {
--- a/app/javascript/flavours/glitch/api_types/announcements.ts
+++ b/app/javascript/flavours/glitch/api_types/announcements.ts
@@ -0,0 +1,28 @@
+// See app/serializers/rest/announcement_serializer.rb
+
+import type { ApiCustomEmojiJSON } from './custom_emoji';
+import type { ApiMentionJSON, ApiStatusJSON, ApiTagJSON } from './statuses';
+
+export interface ApiAnnouncementJSON {
+  id: string;
+  content: string;
+  starts_at: null | string;
+  ends_at: null | string;
+  all_day: boolean;
+  published_at: string;
+  updated_at: null | string;
+  read: boolean;
+  mentions: ApiMentionJSON[];
+  statuses: ApiStatusJSON[];
+  tags: ApiTagJSON[];
+  emojis: ApiCustomEmojiJSON[];
+  reactions: ApiAnnouncementReactionJSON[];
+}
+
+export interface ApiAnnouncementReactionJSON {
+  name: string;
+  count: number;
+  me: boolean;
+  url?: string;
+  static_url?: string;
+}
--- a/app/javascript/flavours/glitch/components/account/index.tsx
+++ b/app/javascript/flavours/glitch/components/account/index.tsx
@@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';

 import classNames from 'classnames';

+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import {
  blockAccount,
@@ -33,7 +34,7 @@ import { me } from 'flavours/glitch/initial_state';
 import type { MenuItem } from 'flavours/glitch/models/dropdown_menu';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';

-import { Permalink } from './permalink';
+import { Permalink } from '../permalink';

 const messages = defineMessages({
  follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -333,9 +334,10 @@ export const Account: React.FC<AccountProps> = ({
          {account &&
            withBio &&
            (account.note.length > 0 ? (
-              <div
+              <EmojiHTML
                className='account__note translate'
-                dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+                htmlString={account.note_emojified}
+                extraEmojis={account.emojis}
              />
            ) : (
              <div className='account__note account__note--missing'>
--- a/app/javascript/flavours/glitch/components/account_bio.tsx
+++ b/app/javascript/flavours/glitch/components/account_bio.tsx
@@ -7,8 +7,8 @@ import { useLinks } from 'flavours/glitch/hooks/useLinks';
 import { useAppSelector } from '../store';
 import { isModernEmojiEnabled } from '../utils/environment';

-import { AnimateEmojiProvider } from './emoji/context';
 import { EmojiHTML } from './emoji/html';
+import { useElementHandledLink } from './status/handled_link';

 interface AccountBioProps {
  className: string;
@@ -24,19 +24,29 @@ export const AccountBio: React.FC<AccountBioProps> = ({
  const handleClick = useLinks(showDropdown);
  const handleNodeChange = useCallback(
    (node: HTMLDivElement | null) => {
-      if (!showDropdown || !node || node.childNodes.length === 0) {
+      if (
+        !showDropdown ||
+        !node ||
+        node.childNodes.length === 0 ||
+        isModernEmojiEnabled()
+      ) {
        return;
      }
      addDropdownToHashtags(node, accountId);
    },
    [showDropdown, accountId],
  );
+
+  const htmlHandlers = useElementHandledLink({
+    hashtagAccountId: showDropdown ? accountId : undefined,
+  });
+
  const note = useAppSelector((state) => {
    const account = state.accounts.get(accountId);
    if (!account) {
      return '';
    }
-    return isModernEmojiEnabled() ? account.note : account.note_emojified;
+    return account.note_emojified;
  });
  const extraEmojis = useAppSelector((state) => {
    const account = state.accounts.get(accountId);
@@ -48,13 +58,14 @@ export const AccountBio: React.FC<AccountBioProps> = ({
  }

  return (
-    <AnimateEmojiProvider
+    <EmojiHTML
+      htmlString={note}
+      extraEmojis={extraEmojis}
      className={classNames(className, 'translate')}
      onClickCapture={handleClick}
      ref={handleNodeChange}
-    >
-      <EmojiHTML htmlString={note} extraEmojis={extraEmojis} />
-    </AnimateEmojiProvider>
+      {...htmlHandlers}
+    />
  );
 };

--- a/app/javascript/flavours/glitch/components/account_fields.tsx
+++ b/app/javascript/flavours/glitch/components/account_fields.tsx
@@ -1,42 +1,70 @@
+import { useIntl } from 'react-intl';
+
 import classNames from 'classnames';

 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { Icon } from 'flavours/glitch/components/icon';
-import { useLinks } from 'flavours/glitch/hooks/useLinks';
 import type { Account } from 'flavours/glitch/models/account';

-export const AccountFields: React.FC<{
-  fields: Account['fields'];
-  limit: number;
-}> = ({ fields, limit = -1 }) => {
-  const handleClick = useLinks();
+import { CustomEmojiProvider } from './emoji/context';
+import { EmojiHTML } from './emoji/html';
+import { useElementHandledLink } from './status/handled_link';
+
+export const AccountFields: React.FC<Pick<Account, 'fields' | 'emojis'>> = ({
+  fields,
+  emojis,
+}) => {
+  const intl = useIntl();
+  const htmlHandlers = useElementHandledLink();

  if (fields.size === 0) {
    return null;
  }

  return (
-    <div className='account-fields' onClickCapture={handleClick}>
-      {fields.take(limit).map((pair, i) => (
-        <dl
-          key={i}
-          className={classNames({ verified: pair.get('verified_at') })}
-        >
-          <dt
-            dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
+    <CustomEmojiProvider emojis={emojis}>
+      {fields.map((pair, i) => (
+        <dl key={i} className={classNames({ verified: pair.verified_at })}>
+          <EmojiHTML
+            as='dt'
+            htmlString={pair.name_emojified}
            className='translate'
+            {...htmlHandlers}
          />

-          <dd className='translate' title={pair.get('value_plain') ?? ''}>
-            {pair.get('verified_at') && (
-              <Icon id='check' icon={CheckIcon} className='verified__mark' />
-            )}
-            <span
-              dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
+          <dd className='translate' title={pair.value_plain ?? ''}>
+            {pair.verified_at && (
+              <span
+                title={intl.formatMessage(
+                  {
+                    id: 'account.link_verified_on',
+                    defaultMessage:
+                      'Ownership of this link was checked on {date}',
+                  },
+                  {
+                    date: intl.formatDate(pair.verified_at, dateFormatOptions),
+                  },
+                )}
+              >
+                <Icon id='check' icon={CheckIcon} className='verified__mark' />
+              </span>
+            )}{' '}
+            <EmojiHTML
+              as='span'
+              htmlString={pair.value_emojified}
+              {...htmlHandlers}
            />
          </dd>
        </dl>
      ))}
-    </div>
+    </CustomEmojiProvider>
  );
 };
+
+const dateFormatOptions: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+};
--- a/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
+++ b/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
@@ -150,10 +150,7 @@ const AutosuggestTextarea = forwardRef(({
  }, [suggestions, onSuggestionSelected, textareaRef]);

  const handlePaste = useCallback((e) => {
-    if (e.clipboardData && e.clipboardData.files.length === 1) {
-      onPaste(e.clipboardData.files);
-      e.preventDefault();
-    }
+    onPaste(e);
  }, [onPaste]);

  // Show the suggestions again whenever they change and the textarea is focused
--- a/app/javascript/flavours/glitch/components/content_warning.tsx
+++ b/app/javascript/flavours/glitch/components/content_warning.tsx
@@ -1,25 +1,48 @@
+import type { List } from 'immutable';
+
+import type { CustomEmoji } from '../models/custom_emoji';
+import type { Status } from '../models/status';
+
+import { EmojiHTML } from './emoji/html';
 import type { IconName } from './media_icon';
 import { MediaIcon } from './media_icon';
 import { StatusBanner, BannerVariant } from './status_banner';

 export const ContentWarning: React.FC<{
-  text: string;
+  status: Status;
  expanded?: boolean;
  onClick?: () => void;
  icons?: IconName[];
-}> = ({ text, expanded, onClick, icons }) => (
-  <StatusBanner
-    expanded={expanded}
-    onClick={onClick}
-    variant={BannerVariant.Warning}
-  >
-    {icons?.map((icon) => (
-      <MediaIcon
-        className='status__content__spoiler-icon'
-        icon={icon}
-        key={`icon-${icon}`}
+}> = ({ status, expanded, onClick, icons }) => {
+  const hasSpoiler = !!status.get('spoiler_text');
+  if (!hasSpoiler) {
+    return null;
+  }
+
+  const text =
+    status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml');
+  if (typeof text !== 'string' || text.length === 0) {
+    return null;
+  }
+
+  return (
+    <StatusBanner
+      expanded={expanded}
+      onClick={onClick}
+      variant={BannerVariant.Warning}
+    >
+      {icons?.map((icon) => (
+        <MediaIcon
+          className='status__content__spoiler-icon'
+          icon={icon}
+          key={`icon-${icon}`}
+        />
+      ))}
+      <EmojiHTML
+        as='span'
+        htmlString={text}
+        extraEmojis={status.get('emoji') as List<CustomEmoji>}
      />
-    ))}
-    <span dangerouslySetInnerHTML={{ __html: text }} />
-  </StatusBanner>
-);
+    </StatusBanner>
+  );
+};
--- a/app/javascript/flavours/glitch/components/display_name/no-domain.tsx
+++ b/app/javascript/flavours/glitch/components/display_name/no-domain.tsx
@@ -2,8 +2,6 @@ import type { ComponentPropsWithoutRef, FC } from 'react';

 import classNames from 'classnames';

-import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
-
 import { AnimateEmojiProvider } from '../emoji/context';
 import { EmojiHTML } from '../emoji/html';
 import { Skeleton } from '../skeleton';
@@ -24,11 +22,7 @@ export const DisplayNameWithoutDomain: FC<
        {account ? (
          <EmojiHTML
            className='display-name__html'
-            htmlString={
-              isModernEmojiEnabled()
-                ? account.get('display_name')
-                : account.get('display_name_html')
-            }
+            htmlString={account.get('display_name_html')}
            as='strong'
            extraEmojis={account.get('emojis')}
          />
--- a/app/javascript/flavours/glitch/components/display_name/simple.tsx
+++ b/app/javascript/flavours/glitch/components/display_name/simple.tsx
@@ -1,7 +1,5 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';

-import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
-
 import { EmojiHTML } from '../emoji/html';

 import type { DisplayNameProps } from './index';
@@ -19,11 +17,7 @@ export const DisplayNameSimple: FC<
      <EmojiHTML
        {...props}
        as='span'
-        htmlString={
-          isModernEmojiEnabled()
-            ? account.get('display_name')
-            : account.get('display_name_html')
-        }
+        htmlString={account.get('display_name_html')}
        extraEmojis={account.get('emojis')}
      />
    </bdi>
--- a/app/javascript/flavours/glitch/components/emoji/html.tsx
+++ b/app/javascript/flavours/glitch/components/emoji/html.tsx
@@ -1,60 +1,89 @@
 import { useMemo } from 'react';
-import type { ComponentPropsWithoutRef, ElementType } from 'react';

 import classNames from 'classnames';

 import type { CustomEmojiMapArg } from '@/flavours/glitch/features/emoji/types';
 import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+import type {
+  OnAttributeHandler,
+  OnElementHandler,
+} from '@/flavours/glitch/utils/html';
 import { htmlStringToComponents } from '@/flavours/glitch/utils/html';
+import { polymorphicForwardRef } from '@/types/polymorphic';

 import { AnimateEmojiProvider, CustomEmojiProvider } from './context';
 import { textToEmojis } from './index';

-type EmojiHTMLProps<Element extends ElementType = 'div'> = Omit<
-  ComponentPropsWithoutRef<Element>,
-  'dangerouslySetInnerHTML' | 'className'
-> & {
+interface EmojiHTMLProps {
  htmlString: string;
  extraEmojis?: CustomEmojiMapArg;
-  as?: Element;
  className?: string;
-};
+  onElement?: OnElementHandler;
+  onAttribute?: OnAttributeHandler;
+}

-export const ModernEmojiHTML = ({
-  extraEmojis,
-  htmlString,
-  as: asProp = 'div', // Rename for syntax highlighting
-  shallow,
-  className = '',
-  ...props
-}: EmojiHTMLProps<ElementType>) => {
-  const contents = useMemo(
-    () => htmlStringToComponents(htmlString, { onText: textToEmojis }),
-    [htmlString],
-  );
+export const ModernEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
+  (
+    {
+      extraEmojis,
+      htmlString,
+      as: asProp = 'div', // Rename for syntax highlighting
+      className = '',
+      onElement,
+      onAttribute,
+      ...props
+    },
+    ref,
+  ) => {
+    const contents = useMemo(
+      () =>
+        htmlStringToComponents(htmlString, {
+          onText: textToEmojis,
+          onElement,
+          onAttribute,
+        }),
+      [htmlString, onAttribute, onElement],
+    );

-  return (
-    <CustomEmojiProvider emojis={extraEmojis}>
-      <AnimateEmojiProvider {...props} as={asProp} className={className}>
-        {contents}
-      </AnimateEmojiProvider>
-    </CustomEmojiProvider>
-  );
-};
+    return (
+      <CustomEmojiProvider emojis={extraEmojis}>
+        <AnimateEmojiProvider
+          {...props}
+          as={asProp}
+          className={className}
+          ref={ref}
+        >
+          {contents}
+        </AnimateEmojiProvider>
+      </CustomEmojiProvider>
+    );
+  },
+);
+ModernEmojiHTML.displayName = 'ModernEmojiHTML';

-export const LegacyEmojiHTML = <Element extends ElementType>(
-  props: EmojiHTMLProps<Element>,
-) => {
-  const { as: asElement, htmlString, extraEmojis, className, ...rest } = props;
-  const Wrapper = asElement ?? 'div';
-  return (
-    <Wrapper
-      {...rest}
-      dangerouslySetInnerHTML={{ __html: htmlString }}
-      className={classNames(className, 'animate-parent')}
-    />
-  );
-};
+export const LegacyEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
+  (props, ref) => {
+    const {
+      as: asElement,
+      htmlString,
+      extraEmojis,
+      className,
+      onElement,
+      onAttribute,
+      ...rest
+    } = props;
+    const Wrapper = asElement ?? 'div';
+    return (
+      <Wrapper
+        {...rest}
+        ref={ref}
+        dangerouslySetInnerHTML={{ __html: htmlString }}
+        className={classNames(className, 'animate-parent')}
+      />
+    );
+  },
+);
+LegacyEmojiHTML.displayName = 'LegacyEmojiHTML';

 export const EmojiHTML = isModernEmojiEnabled()
  ? ModernEmojiHTML
--- a/app/javascript/flavours/glitch/components/hover_card_account.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx
@@ -23,6 +23,8 @@ import { domain } from 'flavours/glitch/initial_state';
 import { getAccountHidden } from 'flavours/glitch/selectors/accounts';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';

+import { useLinks } from '../hooks/useLinks';
+
 export const HoverCardAccount = forwardRef<
  HTMLDivElement,
  { accountId?: string }
@@ -64,6 +66,8 @@ export const HoverCardAccount = forwardRef<
    !isMutual &&
    !isFollower;

+  const handleClick = useLinks();
+
  return (
    <div
      ref={ref}
@@ -109,7 +113,14 @@ export const HoverCardAccount = forwardRef<
                  accountId={account.id}
                  className='hover-card__bio'
                />
-                <AccountFields fields={account.fields} limit={2} />
+
+                <div className='account-fields' onClickCapture={handleClick}>
+                  <AccountFields
+                    fields={account.fields.take(2)}
+                    emojis={account.emojis}
+                  />
+                </div>
+
                {note && note.length > 0 && (
                  <dl className='hover-card__note'>
                    <dt className='hover-card__note-label'>
--- a/app/javascript/flavours/glitch/components/poll.tsx
+++ b/app/javascript/flavours/glitch/components/poll.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { animated, useSpring } from '@react-spring/web';
 import escapeTextContentForBrowser from 'escape-html';

+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { fetchPoll, vote } from 'flavours/glitch/actions/polls';
@@ -305,10 +306,11 @@ const PollOption: React.FC<PollOptionProps> = (props) => {
          </span>
        )}

-        <span
+        <EmojiHTML
          className='poll__option__text translate'
          lang={lang}
-          dangerouslySetInnerHTML={{ __html: titleHtml }}
+          htmlString={titleHtml}
+          extraEmojis={poll.emojis}
        />

        {!!voted && (
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -118,7 +118,7 @@ class Status extends ImmutablePureComponent {
    prepend: PropTypes.string,
    withDismiss: PropTypes.bool,
    isQuotedPost: PropTypes.bool,
-    shouldHighlightOnMount: PropTypes.bool, 
+    shouldHighlightOnMount: PropTypes.bool,
    getScrollPosition: PropTypes.func,
    updateScrollBottom: PropTypes.func,
    expanded: PropTypes.bool,
@@ -739,7 +739,7 @@ class Status extends ImmutablePureComponent {
              </header>
            )}

-            {status.get('spoiler_text').length > 0 && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} icons={mediaIcons} />}
+            <ContentWarning status={status} expanded={expanded} onClick={this.handleExpandedToggle} icons={mediaIcons} />

            {expanded && (
              <>
--- a/app/javascript/flavours/glitch/components/status/handled_link.stories.tsx
+++ b/app/javascript/flavours/glitch/components/status/handled_link.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { HashtagMenuController } from '@/flavours/glitch/features/ui/components/hashtag_menu_controller';
+import { accountFactoryState } from '@/testing/factories';
+
+import { HoverCardController } from '../hover_card_controller';
+
+import type { HandledLinkProps } from './handled_link';
+import { HandledLink } from './handled_link';
+
+const meta = {
+  title: 'Components/Status/HandledLink',
+  render(args) {
+    return (
+      <>
+        <HandledLink {...args} mentionAccountId='1' hashtagAccountId='1' />
+        <HashtagMenuController />
+        <HoverCardController />
+      </>
+    );
+  },
+  args: {
+    href: 'https://example.com/path/subpath?query=1#hash',
+    text: 'https://example.com',
+  },
+  parameters: {
+    state: {
+      accounts: {
+        '1': accountFactoryState(),
+      },
+    },
+  },
+} satisfies Meta<Pick<HandledLinkProps, 'href' | 'text'>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Hashtag: Story = {
+  args: {
+    text: '#example',
+  },
+};
+
+export const Mention: Story = {
+  args: {
+    text: '@user',
+  },
+};
+
+export const InternalLink: Story = {
+  args: {
+    href: '/about',
+    text: 'About',
+  },
+};
+
+export const InvalidURL: Story = {
+  args: {
+    href: 'ht!tp://invalid-url',
+    text: 'ht!tp://invalid-url -- invalid!',
+  },
+};
--- a/app/javascript/flavours/glitch/components/status/handled_link.tsx
+++ b/app/javascript/flavours/glitch/components/status/handled_link.tsx
@@ -0,0 +1,111 @@
+import { useCallback } from 'react';
+import type { ComponentProps, FC } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import type { OnElementHandler } from '@/flavours/glitch/utils/html';
+
+export interface HandledLinkProps {
+  href: string;
+  text: string;
+  hashtagAccountId?: string;
+  mentionAccountId?: string;
+}
+
+export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
+  href,
+  text,
+  hashtagAccountId,
+  mentionAccountId,
+  ...props
+}) => {
+  // Handle hashtags
+  if (text.startsWith('#')) {
+    const hashtag = text.slice(1).trim();
+    return (
+      <Link
+        {...props}
+        className='mention hashtag'
+        to={`/tags/${hashtag}`}
+        rel='tag'
+        data-menu-hashtag={hashtagAccountId}
+      >
+        #<span>{hashtag}</span>
+      </Link>
+    );
+  } else if (text.startsWith('@')) {
+    // Handle mentions
+    const mention = text.slice(1).trim();
+    return (
+      <Link
+        {...props}
+        className='mention'
+        to={`/@${mention}`}
+        title={`@${mention}`}
+        data-hover-card-account={mentionAccountId}
+      >
+        @<span>{mention}</span>
+      </Link>
+    );
+  }
+
+  // Non-absolute paths treated as internal links.
+  if (href.startsWith('/')) {
+    return (
+      <Link {...props} className='unhandled-link' to={href}>
+        {text}
+      </Link>
+    );
+  }
+
+  try {
+    const url = new URL(href);
+    const [first, ...rest] = url.pathname.split('/').slice(1); // Start at 1 to skip the leading slash.
+    return (
+      <a
+        {...props}
+        href={href}
+        title={href}
+        className='unhandled-link'
+        target='_blank'
+        rel='noreferrer noopener'
+        translate='no'
+      >
+        <span className='invisible'>{url.protocol + '//'}</span>
+        <span className='ellipsis'>{`${url.hostname}/${first ?? ''}`}</span>
+        <span className='invisible'>{'/' + rest.join('/')}</span>
+      </a>
+    );
+  } catch {
+    return text;
+  }
+};
+
+export const useElementHandledLink = ({
+  hashtagAccountId,
+  hrefToMentionAccountId,
+}: {
+  hashtagAccountId?: string;
+  hrefToMentionAccountId?: (href: string) => string | undefined;
+} = {}) => {
+  const onElement = useCallback<OnElementHandler>(
+    (element, { key, ...props }) => {
+      if (element instanceof HTMLAnchorElement) {
+        const mentionId = hrefToMentionAccountId?.(element.href);
+        return (
+          <HandledLink
+            {...props}
+            key={key as string} // React requires keys to not be part of spread props.
+            href={element.href}
+            text={element.innerText}
+            hashtagAccountId={hashtagAccountId}
+            mentionAccountId={mentionId}
+          />
+        );
+      }
+      return undefined;
+    },
+    [hashtagAccountId, hrefToMentionAccountId],
+  );
+  return { onElement };
+};
--- a/app/javascript/flavours/glitch/components/status_banner.tsx
+++ b/app/javascript/flavours/glitch/components/status_banner.tsx
@@ -3,6 +3,8 @@ import { useCallback, useRef, useId } from 'react';

 import { FormattedMessage } from 'react-intl';

+import { AnimateEmojiProvider } from './emoji/context';
+
 export enum BannerVariant {
  Warning = 'warning',
  Filter = 'filter',
@@ -34,8 +36,7 @@ export const StatusBanner: React.FC<{

  return (
    // Element clicks are passed on to button
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
+    <AnimateEmojiProvider
      className={
        variant === BannerVariant.Warning
          ? 'content-warning'
@@ -69,6 +70,6 @@ export const StatusBanner: React.FC<{
          />
        )}
      </button>
-    </div>
+    </AnimateEmojiProvider>
  );
 };
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -19,6 +19,7 @@ import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 import { isModernEmojiEnabled } from '../utils/environment';

 import { EmojiHTML } from './emoji/html';
+import { HandledLink } from './status/handled_link';

 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)

@@ -83,9 +84,6 @@ const isLinkMisleading = (link) => {
 * @returns {string}
 */
 export function getStatusContent(status) {
-  if (isModernEmojiEnabled()) {
-    return status.getIn(['translation', 'content']) || status.get('content');
-  }
  return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
 }

@@ -163,6 +161,23 @@ class StatusContent extends PureComponent {
    }

    const { status, onCollapsedToggle } = this.props;
+    if (status.get('collapsed', null) === null && onCollapsedToggle) {
+      const { collapsible, onClick } = this.props;
+
+      const collapsed =
+          collapsible
+          && onClick
+          && node.clientHeight > MAX_HEIGHT
+          && status.get('spoiler_text').length === 0;
+
+      onCollapsedToggle(collapsed);
+    }
+
+    // Exit if modern emoji is enabled, as it handles links using the HandledLink component.
+    if (isModernEmojiEnabled()) {
+      return;
+    }
+
    const links = node.querySelectorAll('a');

    let link, mention;
@@ -225,18 +240,6 @@ class StatusContent extends PureComponent {
        }
      }
    }
-
-    if (status.get('collapsed', null) === null && onCollapsedToggle) {
-      const { collapsible, onClick } = this.props;
-
-      const collapsed =
-          collapsible
-          && onClick
-          && node.clientHeight > MAX_HEIGHT
-          && status.get('spoiler_text').length === 0;
-
-      onCollapsedToggle(collapsed);
-    }
  }

  componentDidMount () {
@@ -298,6 +301,25 @@ class StatusContent extends PureComponent {
    this.node = c;
  };

+  handleElement = (element, { key, ...props }) => {
+    if (element instanceof HTMLAnchorElement) {
+      const mention = this.props.status.get('mentions').find(item => element.href === item.get('url'));
+      return (
+        <HandledLink
+          {...props}
+          href={element.href}
+          text={element.innerText}
+          hashtagAccountId={this.props.status.getIn(['account', 'id'])}
+          mentionAccountId={mention?.get('id')}
+          key={key}
+        />
+      );
+    } else if (element instanceof HTMLParagraphElement && element.classList.contains('quote-inline')) {
+      return null;
+    }
+    return undefined;
+  }
+
  render () {
    const { status, intl, statusContent } = this.props;

@@ -342,6 +364,7 @@ class StatusContent extends PureComponent {
              lang={language}
              htmlString={content}
              extraEmojis={status.get('emojis')}
+              onElement={this.handleElement.bind(this)}
            />

            {poll}
@@ -359,6 +382,7 @@ class StatusContent extends PureComponent {
            lang={language}
            htmlString={content}
            extraEmojis={status.get('emojis')}
+            onElement={this.handleElement.bind(this)}
          />

          {poll}
--- a/app/javascript/flavours/glitch/components/verified_badge.tsx
+++ b/app/javascript/flavours/glitch/components/verified_badge.tsx
@@ -1,10 +1,17 @@
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';

+import { isModernEmojiEnabled } from '../utils/environment';
+import type { OnAttributeHandler } from '../utils/html';
+
 import { Icon } from './icon';

 const domParser = new DOMParser();

 const stripRelMe = (html: string) => {
+  if (isModernEmojiEnabled()) {
+    return html;
+  }
  const document = domParser.parseFromString(html, 'text/html').documentElement;

  document.querySelectorAll<HTMLAnchorElement>('a[rel]').forEach((link) => {
@@ -15,7 +22,23 @@ const stripRelMe = (html: string) => {
  });

  const body = document.querySelector('body');
-  return body ? { __html: body.innerHTML } : undefined;
+  return body?.innerHTML ?? '';
+};
+
+const onAttribute: OnAttributeHandler = (name, value, tagName) => {
+  if (name === 'rel' && tagName === 'a') {
+    if (value === 'me') {
+      return null;
+    }
+    return [
+      name,
+      value
+        .split(' ')
+        .filter((x) => x !== 'me')
+        .join(' '),
+    ];
+  }
+  return undefined;
 };

 interface Props {
@@ -24,6 +47,10 @@ interface Props {
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
  <span className='verified-badge'>
    <Icon id='check' icon={CheckIcon} className='verified-badge__mark' />
-    <span dangerouslySetInnerHTML={stripRelMe(link)} />
+    <EmojiHTML
+      as='span'
+      htmlString={stripRelMe(link)}
+      onAttribute={onAttribute}
+    />
  </span>
 );
--- a/app/javascript/flavours/glitch/entrypoints/public.tsx
+++ b/app/javascript/flavours/glitch/entrypoints/public.tsx
@@ -70,7 +70,7 @@ function loaded() {
  };

  document.querySelectorAll('.emojify').forEach((content) => {
-    content.innerHTML = emojify(content.innerHTML);
+    content.innerHTML = emojify(content.innerHTML, {}, true); // Force emojify as public doesn't load the new emoji system.
  });

  document
--- a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
@@ -7,9 +7,9 @@ import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';

 import { AccountBio } from '@/flavours/glitch/components/account_bio';
+import { AccountFields } from '@/flavours/glitch/components/account_fields';
 import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
-import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
@@ -190,14 +190,6 @@ const titleFromAccount = (account: Account) => {
  return `${prefix} (@${acct})`;
 };

-const dateFormatOptions: Intl.DateTimeFormatOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
 export const AccountHeader: React.FC<{
  accountId: string;
  hideTabs?: boolean;
@@ -895,46 +887,7 @@ export const AccountHeader: React.FC<{
                    </dd>
                  </dl>

-                  {fields.map((pair, i) => (
-                    <dl
-                      key={i}
-                      className={classNames({
-                        verified: pair.verified_at,
-                      })}
-                    >
-                      <dt
-                        dangerouslySetInnerHTML={{
-                          __html: pair.name_emojified,
-                        }}
-                        title={pair.name}
-                        className='translate'
-                      />
-
-                      <dd className='translate' title={pair.value_plain ?? ''}>
-                        {pair.verified_at && (
-                          <span
-                            title={intl.formatMessage(messages.linkVerifiedOn, {
-                              date: intl.formatDate(
-                                pair.verified_at,
-                                dateFormatOptions,
-                              ),
-                            })}
-                          >
-                            <Icon
-                              id='check'
-                              icon={CheckIcon}
-                              className='verified__mark'
-                            />
-                          </span>
-                        )}{' '}
-                        <span
-                          dangerouslySetInnerHTML={{
-                            __html: pair.value_emojified,
-                          }}
-                        />
-                      </dd>
-                    </dl>
-                  ))}
+                  <AccountFields fields={fields} emojis={account.emojis} />
                </div>
              </div>
            </div>
--- a/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/edit_indicator.jsx
@@ -49,9 +49,7 @@ export const EditIndicator = () => {

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

      {(status.get('poll') || status.get('media_attachments').size > 0) && (
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -34,9 +34,7 @@ export const ReplyIndicator = () => {

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

        {(status.get('poll') || status.get('media_attachments').size > 0) && (
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@@ -10,11 +10,14 @@ import {
  insertEmojiCompose,
  uploadCompose,
 } from 'flavours/glitch/actions/compose';
+import { pasteLinkCompose } from 'flavours/glitch/actions/compose_typed';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { privacyPreference } from 'flavours/glitch/utils/privacy_preference';

 import ComposeForm from '../components/compose_form';

+const urlLikeRegex = /^https?:\/\/[^\s]+\/[^\s]+$/i;
+
 const sideArmPrivacy = state => {
  const inReplyTo = state.getIn(['compose', 'in_reply_to']);
  const replyPrivacy = inReplyTo ? state.getIn(['statuses', inReplyTo, 'visibility']) : null;
@@ -93,8 +96,21 @@ const mapDispatchToProps = (dispatch, props) => ({
    dispatch(changeComposeSpoilerText(checked));
  },

-  onPaste (files) {
-    dispatch(uploadCompose(files));
+  onPaste (e) {
+    if (e.clipboardData && e.clipboardData.files.length === 1) {
+      dispatch(uploadCompose(e.clipboardData.files));
+      e.preventDefault();
+    } else if (e.clipboardData && e.clipboardData.files.length === 0) {
+      const data = e.clipboardData.getData('text/plain');
+      if (!data.match(urlLikeRegex)) return;
+
+      try {
+        const url = new URL(data);
+        dispatch(pasteLinkCompose({ url }));
+      } catch {
+        return;
+      }
+    }
  },

  onPickEmoji (position, data, needsSpace) {
--- a/app/javascript/flavours/glitch/features/directory/components/account_card.tsx
+++ b/app/javascript/flavours/glitch/features/directory/components/account_card.tsx
@@ -1,5 +1,6 @@
 import { FormattedMessage } from 'react-intl';

+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { FollowButton } from 'flavours/glitch/components/follow_button';
@@ -42,9 +43,10 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
      </Permalink>

      {account.get('note').length > 0 && (
-        <div
-          className='account-card__bio translate animate-parent'
-          dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+        <EmojiHTML
+          className='account-card__bio translate'
+          htmlString={account.get('note_emojified')}
+          extraEmojis={account.get('emojis')}
        />
      )}

--- a/app/javascript/flavours/glitch/features/emoji/emoji.js
+++ b/app/javascript/flavours/glitch/features/emoji/emoji.js
@@ -1,5 +1,6 @@
 import Trie from 'substring-trie';

+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
 import { assetHost } from 'flavours/glitch/utils/config';

 import { autoPlayGif, useSystemEmojiFont } from '../../initial_state';
@@ -148,7 +149,17 @@ const emojifyNode = (node, customEmojis) => {
  }
 };

-const emojify = (str, customEmojis = {}) => {
+/**
+ * Legacy emoji processing function.
+ * @param {string} str
+ * @param {object} customEmojis
+ * @param {boolean} force If true, always emojify even if modern emoji is enabled
+ * @returns {string}
+ */
+const emojify = (str, customEmojis = {}, force = false) => {
+  if (isModernEmojiEnabled() && !force) {
+    return str;
+  }
  const wrapper = document.createElement('div');
  wrapper.innerHTML = str;

--- a/app/javascript/flavours/glitch/features/emoji/normalize.ts
+++ b/app/javascript/flavours/glitch/features/emoji/normalize.ts
@@ -154,15 +154,21 @@ export function cleanExtraEmojis(extraEmojis?: CustomEmojiMapArg) {
  if (!extraEmojis) {
    return null;
  }
-  if (!isList(extraEmojis)) {
-    return extraEmojis;
-  }
-  return extraEmojis
-    .toJSON()
-    .reduce<ExtraCustomEmojiMap>(
+  if (Array.isArray(extraEmojis)) {
+    return extraEmojis.reduce<ExtraCustomEmojiMap>(
      (acc, emoji) => ({ ...acc, [emoji.shortcode]: emoji }),
      {},
    );
+  }
+  if (isList(extraEmojis)) {
+    return extraEmojis
+      .toJS()
+      .reduce<ExtraCustomEmojiMap>(
+        (acc, emoji) => ({ ...acc, [emoji.shortcode]: emoji }),
+        {},
+      );
+  }
+  return extraEmojis;
 }

 function hexStringToNumbers(hexString: string): number[] {
--- a/app/javascript/flavours/glitch/features/emoji/types.ts
+++ b/app/javascript/flavours/glitch/features/emoji/types.ts
@@ -56,7 +56,9 @@ export type EmojiStateMap = LimitedCache<string, EmojiState>;

 export type CustomEmojiMapArg =
  | ExtraCustomEmojiMap
-  | ImmutableList<CustomEmoji>;
+  | ImmutableList<CustomEmoji>
+  | CustomEmoji[]
+  | ApiCustomEmojiJSON[];

 export type ExtraCustomEmojiMap = Record<
  string,
--- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
@@ -8,10 +8,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';

-import { Avatar } from '../../../components/avatar';
-import { DisplayName } from '../../../components/display_name';
-import { IconButton } from '../../../components/icon_button';
-import { Permalink } from '../../../components/permalink';
+import { Avatar } from '@/flavours/glitch/components/avatar';
+import { DisplayName } from '@/flavours/glitch/components/display_name';
+import { IconButton } from '@/flavours/glitch/components/icon_button';
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+import { Permalink } from '@/flavours/glitch/components/permalink';

 const messages = defineMessages({
  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -29,7 +30,6 @@ class AccountAuthorize extends ImmutablePureComponent {

  render () {
    const { intl, account, onAuthorize, onReject } = this.props;
-    const content = { __html: account.get('note_emojified') };

    return (
      <div className='account-authorize__wrapper'>
@@ -39,7 +39,11 @@ class AccountAuthorize extends ImmutablePureComponent {
            <DisplayName account={account} />
          </Permalink>

-          <div className='account__header__content translate' dangerouslySetInnerHTML={content} />
+          <EmojiHTML
+            className='account__header__content translate'
+            htmlString={account.get('note_emojified')}
+            extraEmojis={account.get('emojis')}
+          />
        </div>

        <div className='account--panel'>
--- a/app/javascript/flavours/glitch/features/home_timeline/components/announcements/announcement.tsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/announcements/announcement.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
+
+import { FormattedDate, FormattedMessage } from 'react-intl';
+
+import type { ApiAnnouncementJSON } from '@/flavours/glitch/api_types/announcements';
+import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+
+import { ReactionsBar } from './reactions';
+
+export interface IAnnouncement extends ApiAnnouncementJSON {
+  contentHtml: string;
+}
+
+interface AnnouncementProps {
+  announcement: IAnnouncement;
+  selected: boolean;
+}
+
+export const Announcement: FC<AnnouncementProps> = ({
+  announcement,
+  selected,
+}) => {
+  const [unread, setUnread] = useState(!announcement.read);
+  useEffect(() => {
+    // Only update `unread` marker once the announcement is out of view
+    if (!selected && unread !== !announcement.read) {
+      setUnread(!announcement.read);
+    }
+  }, [announcement.read, selected, unread]);
+
+  return (
+    <AnimateEmojiProvider className='announcements__item'>
+      <strong className='announcements__item__range'>
+        <FormattedMessage
+          id='announcement.announcement'
+          defaultMessage='Announcement'
+        />
+        <span>
+          {' · '}
+          <Timestamp announcement={announcement} />
+        </span>
+      </strong>
+
+      <EmojiHTML
+        className='announcements__item__content translate'
+        htmlString={announcement.contentHtml}
+        extraEmojis={announcement.emojis}
+      />
+
+      <ReactionsBar reactions={announcement.reactions} id={announcement.id} />
+
+      {unread && <span className='announcements__item__unread' />}
+    </AnimateEmojiProvider>
+  );
+};
+
+const Timestamp: FC<Pick<AnnouncementProps, 'announcement'>> = ({
+  announcement,
+}) => {
+  const startsAt = announcement.starts_at && new Date(announcement.starts_at);
+  const endsAt = announcement.ends_at && new Date(announcement.ends_at);
+  const now = new Date();
+  const hasTimeRange = startsAt && endsAt;
+  const skipTime = announcement.all_day;
+
+  if (hasTimeRange) {
+    const skipYear =
+      startsAt.getFullYear() === endsAt.getFullYear() &&
+      endsAt.getFullYear() === now.getFullYear();
+    const skipEndDate =
+      startsAt.getDate() === endsAt.getDate() &&
+      startsAt.getMonth() === endsAt.getMonth() &&
+      startsAt.getFullYear() === endsAt.getFullYear();
+    return (
+      <>
+        <FormattedDate
+          value={startsAt}
+          year={
+            skipYear || startsAt.getFullYear() === now.getFullYear()
+              ? undefined
+              : 'numeric'
+          }
+          month='short'
+          day='2-digit'
+          hour={skipTime ? undefined : '2-digit'}
+          minute={skipTime ? undefined : '2-digit'}
+        />{' '}
+        -{' '}
+        <FormattedDate
+          value={endsAt}
+          year={
+            skipYear || endsAt.getFullYear() === now.getFullYear()
+              ? undefined
+              : 'numeric'
+          }
+          month={skipEndDate ? undefined : 'short'}
+          day={skipEndDate ? undefined : '2-digit'}
+          hour={skipTime ? undefined : '2-digit'}
+          minute={skipTime ? undefined : '2-digit'}
+        />
+      </>
+    );
+  }
+  const publishedAt = new Date(announcement.published_at);
+  return (
+    <FormattedDate
+      value={publishedAt}
+      year={
+        publishedAt.getFullYear() === now.getFullYear() ? undefined : 'numeric'
+      }
+      month='short'
+      day='2-digit'
+      hour={skipTime ? undefined : '2-digit'}
+      minute={skipTime ? undefined : '2-digit'}
+    />
+  );
+};
--- a/app/javascript/flavours/glitch/features/home_timeline/components/announcements/index.tsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/announcements/index.tsx
@@ -0,0 +1,118 @@
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import type { Map, List } from 'immutable';
+
+import ReactSwipeableViews from 'react-swipeable-views';
+
+import { CustomEmojiProvider } from '@/flavours/glitch/components/emoji/context';
+import { IconButton } from '@/flavours/glitch/components/icon_button';
+import LegacyAnnouncements from '@/flavours/glitch/features/getting_started/containers/announcements_container';
+import { mascot, reduceMotion } from '@/flavours/glitch/initial_state';
+import { createAppSelector, useAppSelector } from '@/flavours/glitch/store';
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+import elephantUIPlane from '@/images/elephant_ui_plane.svg';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+
+import type { IAnnouncement } from './announcement';
+import { Announcement } from './announcement';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
+  next: { id: 'lightbox.next', defaultMessage: 'Next' },
+});
+
+const announcementSelector = createAppSelector(
+  [(state) => state.announcements as Map<string, List<Map<string, unknown>>>],
+  (announcements) =>
+    (announcements.get('items')?.toJS() as IAnnouncement[] | undefined) ?? [],
+);
+
+export const ModernAnnouncements: FC = () => {
+  const intl = useIntl();
+
+  const announcements = useAppSelector(announcementSelector);
+  const emojis = useAppSelector((state) => state.custom_emojis);
+
+  const [index, setIndex] = useState(0);
+  const handleChangeIndex = useCallback(
+    (idx: number) => {
+      setIndex(idx % announcements.length);
+    },
+    [announcements.length],
+  );
+  const handleNextIndex = useCallback(() => {
+    setIndex((prevIndex) => (prevIndex + 1) % announcements.length);
+  }, [announcements.length]);
+  const handlePrevIndex = useCallback(() => {
+    setIndex((prevIndex) =>
+      prevIndex === 0 ? announcements.length - 1 : prevIndex - 1,
+    );
+  }, [announcements.length]);
+
+  if (announcements.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='announcements'>
+      <img
+        className='announcements__mastodon'
+        alt=''
+        draggable='false'
+        src={mascot ?? elephantUIPlane}
+      />
+
+      <div className='announcements__container'>
+        <CustomEmojiProvider emojis={emojis}>
+          <ReactSwipeableViews
+            animateHeight
+            animateTransitions={!reduceMotion}
+            index={index}
+            onChangeIndex={handleChangeIndex}
+          >
+            {announcements
+              .map((announcement, idx) => (
+                <Announcement
+                  key={announcement.id}
+                  announcement={announcement}
+                  selected={index === idx}
+                />
+              ))
+              .reverse()}
+          </ReactSwipeableViews>
+        </CustomEmojiProvider>
+
+        {announcements.length > 1 && (
+          <div className='announcements__pagination'>
+            <IconButton
+              disabled={announcements.length === 1}
+              title={intl.formatMessage(messages.previous)}
+              icon='chevron-left'
+              iconComponent={ChevronLeftIcon}
+              onClick={handlePrevIndex}
+            />
+            <span>
+              {index + 1} / {announcements.length}
+            </span>
+            <IconButton
+              disabled={announcements.length === 1}
+              title={intl.formatMessage(messages.next)}
+              icon='chevron-right'
+              iconComponent={ChevronRightIcon}
+              onClick={handleNextIndex}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const Announcements = isModernEmojiEnabled()
+  ? ModernAnnouncements
+  : LegacyAnnouncements;
--- a/app/javascript/flavours/glitch/features/home_timeline/components/announcements/reactions.tsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/announcements/reactions.tsx
@@ -0,0 +1,111 @@
+import { useCallback, useMemo } from 'react';
+import type { FC, HTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+
+import type { AnimatedProps } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
+
+import {
+  addReaction,
+  removeReaction,
+} from '@/flavours/glitch/actions/announcements';
+import type { ApiAnnouncementReactionJSON } from '@/flavours/glitch/api_types/announcements';
+import { AnimatedNumber } from '@/flavours/glitch/components/animated_number';
+import { Emoji } from '@/flavours/glitch/components/emoji';
+import { Icon } from '@/flavours/glitch/components/icon';
+import EmojiPickerDropdown from '@/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container';
+import { isUnicodeEmoji } from '@/flavours/glitch/features/emoji/utils';
+import { useAppDispatch } from '@/flavours/glitch/store';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
+
+export const ReactionsBar: FC<{
+  reactions: ApiAnnouncementReactionJSON[];
+  id: string;
+}> = ({ reactions, id }) => {
+  const visibleReactions = useMemo(
+    () => reactions.filter((x) => x.count > 0),
+    [reactions],
+  );
+
+  const dispatch = useAppDispatch();
+  const handleEmojiPick = useCallback(
+    (emoji: { native: string }) => {
+      dispatch(addReaction(id, emoji.native.replaceAll(/:/g, '')));
+    },
+    [dispatch, id],
+  );
+
+  const transitions = useTransition(visibleReactions, {
+    from: {
+      scale: 0,
+    },
+    enter: {
+      scale: 1,
+    },
+    leave: {
+      scale: 0,
+    },
+    keys: visibleReactions.map((x) => x.name),
+  });
+
+  return (
+    <div
+      className={classNames('reactions-bar', {
+        'reactions-bar--empty': visibleReactions.length === 0,
+      })}
+    >
+      {transitions(({ scale }, reaction) => (
+        <Reaction
+          key={reaction.name}
+          reaction={reaction}
+          style={{ transform: scale.to((s) => `scale(${s})`) }}
+          id={id}
+        />
+      ))}
+
+      {visibleReactions.length < 8 && (
+        <EmojiPickerDropdown
+          onPickEmoji={handleEmojiPick}
+          button={<Icon id='plus' icon={AddIcon} />}
+        />
+      )}
+    </div>
+  );
+};
+
+const Reaction: FC<{
+  reaction: ApiAnnouncementReactionJSON;
+  id: string;
+  style: AnimatedProps<HTMLAttributes<HTMLButtonElement>>['style'];
+}> = ({ id, reaction, style }) => {
+  const dispatch = useAppDispatch();
+  const handleClick = useCallback(() => {
+    if (reaction.me) {
+      dispatch(removeReaction(id, reaction.name));
+    } else {
+      dispatch(addReaction(id, reaction.name));
+    }
+  }, [dispatch, id, reaction.me, reaction.name]);
+
+  const code = isUnicodeEmoji(reaction.name)
+    ? reaction.name
+    : `:${reaction.name}:`;
+
+  return (
+    <animated.button
+      className={classNames('reactions-bar__item', {
+        active: reaction.me,
+      })}
+      onClick={handleClick}
+      style={style}
+    >
+      <span className='reactions-bar__item__emoji'>
+        <Emoji code={code} />
+      </span>
+      <span className='reactions-bar__item__count'>
+        <AnimatedNumber value={reaction.count} />
+      </span>
+    </animated.button>
+  );
+};
--- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx
@@ -14,7 +14,6 @@ import { SymbolLogo } from 'flavours/glitch/components/logo';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements';
 import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
 import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
-import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { criticalUpdatesPending } from 'flavours/glitch/initial_state';
 import { withBreakpoint } from 'flavours/glitch/features/ui/hooks/useBreakpoint';
@@ -27,6 +26,7 @@ import StatusListContainer from '../ui/containers/status_list_container';

 import { ColumnSettings } from './components/column_settings';
 import { CriticalUpdateBanner } from './components/critical_update_banner';
+import { Announcements } from './components/announcements';

 const messages = defineMessages({
  title: { id: 'column.home', defaultMessage: 'Home' },
@@ -164,7 +164,7 @@ class HomeTimeline extends PureComponent {
          pinned={pinned}
          multiColumn={multiColumn}
          extraButton={announcementsButton}
-          appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
+          appendContent={hasAnnouncements && showAnnouncements && <Announcements />}
        >
          <ColumnSettings />
        </ColumnHeader>
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';

 import type { List as ImmutableList, RecordOf } from 'immutable';

+import type { ApiMentionJSON } from '@/flavours/glitch/api_types/statuses';
 import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context';
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
@@ -18,7 +19,7 @@ import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';

 import { EmbeddedStatusContent } from './embedded_status_content';

-export type Mention = RecordOf<{ url: string; acct: string }>;
+export type Mention = RecordOf<ApiMentionJSON>;

 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
  statusId,
@@ -86,12 +87,9 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
  }

  // Assign status attributes to variables with a forced type, as status is not yet properly typed
-  const contentHtml = status.get('contentHtml') as string;
-  const contentWarning = status.get('spoilerHtml') as string;
+  const hasContentWarning = !!status.get('spoiler_text');
  const poll = status.get('poll');
-  const language = status.get('language') as string;
-  const mentions = status.get('mentions') as ImmutableList<Mention>;
-  const expanded = !status.get('hidden') || !contentWarning;
+  const expanded = !status.get('hidden') || !hasContentWarning;
  const mediaAttachmentsSize = (
    status.get('media_attachments') as ImmutableList<unknown>
  ).size;
@@ -109,20 +107,16 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
        <DisplayName account={account} />
      </div>

-      {contentWarning && (
-        <ContentWarning
-          text={contentWarning}
-          onClick={handleContentWarningClick}
-          expanded={expanded}
-        />
-      )}
+      <ContentWarning
+        status={status}
+        onClick={handleContentWarningClick}
+        expanded={expanded}
+      />

-      {(!contentWarning || expanded) && (
+      {(!hasContentWarning || expanded) && (
        <EmbeddedStatusContent
          className='notification-group__embedded-status__content reply-indicator__content translate'
-          content={contentHtml}
-          language={language}
-          mentions={mentions}
+          status={status}
        />
      )}

--- a/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';

 import { useHistory } from 'react-router-dom';

@@ -6,16 +6,22 @@ import type { List } from 'immutable';

 import type { History } from 'history';

+import type { ApiMentionJSON } from '@/flavours/glitch/api_types/statuses';
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+import { useElementHandledLink } from '@/flavours/glitch/components/status/handled_link';
+import type { Status } from '@/flavours/glitch/models/status';
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+
 import type { Mention } from './embedded_status';

 const handleMentionClick = (
  history: History,
-  mention: Mention,
+  mention: ApiMentionJSON,
  e: MouseEvent,
 ) => {
  if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
    e.preventDefault();
-    history.push(`/@${mention.get('acct')}`);
+    history.push(`/@${mention.acct}`);
  }
 };

@@ -31,16 +37,26 @@ const handleHashtagClick = (
 };

 export const EmbeddedStatusContent: React.FC<{
-  content: string;
-  mentions: List<Mention>;
-  language: string;
+  status: Status;
  className?: string;
-}> = ({ content, mentions, language, className }) => {
+}> = ({ status, className }) => {
  const history = useHistory();

+  const mentions = useMemo(
+    () => (status.get('mentions') as List<Mention>).toJS(),
+    [status],
+  );
+  const htmlHandlers = useElementHandledLink({
+    hashtagAccountId: status.get('account') as string | undefined,
+    hrefToMentionAccountId(href) {
+      const mention = mentions.find((item) => item.url === href);
+      return mention?.id;
+    },
+  });
+
  const handleContentRef = useCallback(
    (node: HTMLDivElement | null) => {
-      if (!node) {
+      if (!node || isModernEmojiEnabled()) {
        return;
      }

@@ -53,7 +69,7 @@ export const EmbeddedStatusContent: React.FC<{

        link.classList.add('status-link');

-        const mention = mentions.find((item) => link.href === item.get('url'));
+        const mention = mentions.find((item) => link.href === item.url);

        if (mention) {
          link.addEventListener(
@@ -61,8 +77,8 @@ export const EmbeddedStatusContent: React.FC<{
            handleMentionClick.bind(null, history, mention),
            false,
          );
-          link.setAttribute('title', `@${mention.get('acct')}`);
-          link.setAttribute('href', `/@${mention.get('acct')}`);
+          link.setAttribute('title', `@${mention.acct}`);
+          link.setAttribute('href', `/@${mention.acct}`);
        } else if (
          link.textContent.startsWith('#') ||
          link.previousSibling?.textContent?.endsWith('#')
@@ -83,11 +99,12 @@ export const EmbeddedStatusContent: React.FC<{
  );

  return (
-    <div
+    <EmojiHTML
+      {...htmlHandlers}
      className={className}
      ref={handleContentRef}
-      lang={language}
-      dangerouslySetInnerHTML={{ __html: content }}
+      lang={status.get('language') as string}
+      htmlString={status.get('contentHtml') as string}
    />
  );
 };
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
@@ -429,17 +429,13 @@ export const DetailedStatus: React.FC<{
          />
        )}

-        {status.get('spoiler_text').length > 0 &&
-          (!matchedFilters || showDespiteFilter) && (
-            <ContentWarning
-              text={
-                status.getIn(['translation', 'spoilerHtml']) ||
-                status.get('spoilerHtml')
-              }
-              expanded={expanded}
-              onClick={handleExpandedToggle}
-            />
-          )}
+        {(!matchedFilters || showDespiteFilter) && (
+          <ContentWarning
+            status={status}
+            expanded={expanded}
+            onClick={handleExpandedToggle}
+          />
+        )}

        {expanded && (
          <>
--- a/app/javascript/flavours/glitch/features/status/components/refresh_controller.tsx
+++ b/app/javascript/flavours/glitch/features/status/components/refresh_controller.tsx
@@ -5,6 +5,8 @@ import { useIntl, defineMessages } from 'react-intl';
 import {
  fetchContext,
  completeContextRefresh,
+  showPendingReplies,
+  clearPendingReplies,
 } from 'flavours/glitch/actions/statuses';
 import type { AsyncRefreshHeader } from 'flavours/glitch/api';
 import { apiGetAsyncRefresh } from 'flavours/glitch/api/async_refreshes';
@@ -34,10 +36,6 @@ const messages = defineMessages({
    id: 'status.context.loading',
    defaultMessage: 'Loading',
  },
-  loadingMore: {
-    id: 'status.context.loading_more',
-    defaultMessage: 'Loading more replies',
-  },
  success: {
    id: 'status.context.loading_success',
    defaultMessage: 'All replies loaded',
@@ -52,36 +50,33 @@ const messages = defineMessages({
  },
 });

-type LoadingState =
-  | 'idle'
-  | 'more-available'
-  | 'loading-initial'
-  | 'loading-more'
-  | 'success'
-  | 'error';
+type LoadingState = 'idle' | 'more-available' | 'loading' | 'success' | 'error';

 export const RefreshController: React.FC<{
  statusId: string;
 }> = ({ statusId }) => {
-  const refresh = useAppSelector(
-    (state) => state.contexts.refreshing[statusId],
-  );
-  const currentReplyCount = useAppSelector(
-    (state) => state.contexts.replies[statusId]?.length ?? 0,
-  );
-  const autoRefresh = !currentReplyCount;
  const dispatch = useAppDispatch();
  const intl = useIntl();

-  const [loadingState, setLoadingState] = useState<LoadingState>(
-    refresh && autoRefresh ? 'loading-initial' : 'idle',
+  const refreshHeader = useAppSelector(
+    (state) => state.contexts.refreshing[statusId],
  );
+  const hasPendingReplies = useAppSelector(
+    (state) => !!state.contexts.pendingReplies[statusId]?.length,
+  );
+  const [partialLoadingState, setLoadingState] = useState<LoadingState>(
+    refreshHeader ? 'loading' : 'idle',
+  );
+  const loadingState = hasPendingReplies
+    ? 'more-available'
+    : partialLoadingState;

  const [wasDismissed, setWasDismissed] = useState(false);
  const dismissPrompt = useCallback(() => {
    setWasDismissed(true);
    setLoadingState('idle');
-  }, []);
+    dispatch(clearPendingReplies({ statusId }));
+  }, [dispatch, statusId]);

  useEffect(() => {
    let timeoutId: ReturnType<typeof setTimeout>;
@@ -89,36 +84,51 @@ export const RefreshController: React.FC<{
    const scheduleRefresh = (refresh: AsyncRefreshHeader) => {
      timeoutId = setTimeout(() => {
        void apiGetAsyncRefresh(refresh.id).then((result) => {
-          if (result.async_refresh.status === 'finished') {
-            dispatch(completeContextRefresh({ statusId }));
-
-            if (result.async_refresh.result_count > 0) {
-              if (autoRefresh) {
-                void dispatch(fetchContext({ statusId })).then(() => {
-                  setLoadingState('idle');
-                });
-              } else {
-                setLoadingState('more-available');
-              }
-            } else {
-              setLoadingState('idle');
-            }
-          } else {
+          // If the refresh status is not finished,
+          // schedule another refresh and exit
+          if (result.async_refresh.status !== 'finished') {
            scheduleRefresh(refresh);
+            return;
          }
+
+          // Refresh status is finished. The action below will clear `refreshHeader`
+          dispatch(completeContextRefresh({ statusId }));
+
+          // Exit if there's nothing to fetch
+          if (result.async_refresh.result_count === 0) {
+            setLoadingState('idle');
+            return;
+          }
+
+          // A positive result count means there _might_ be new replies,
+          // so we fetch the context in the background to check if there
+          // are any new replies.
+          // If so, they will populate `contexts.pendingReplies[statusId]`
+          void dispatch(fetchContext({ statusId, prefetchOnly: true }))
+            .then(() => {
+              // Reset loading state to `idle` – but if the fetch
+              // has resulted in new pending replies, the `hasPendingReplies`
+              // flag will switch the loading state to 'more-available'
+              setLoadingState('idle');
+            })
+            .catch(() => {
+              // Show an error if the fetch failed
+              setLoadingState('error');
+            });
        });
      }, refresh.retry * 1000);
    };

-    if (refresh && !wasDismissed) {
-      scheduleRefresh(refresh);
-      setLoadingState('loading-initial');
+    // Initialise a refresh
+    if (refreshHeader && !wasDismissed) {
+      scheduleRefresh(refreshHeader);
+      setLoadingState('loading');
    }

    return () => {
      clearTimeout(timeoutId);
    };
-  }, [dispatch, statusId, refresh, autoRefresh, wasDismissed]);
+  }, [dispatch, statusId, refreshHeader, wasDismissed]);

  useEffect(() => {
    // Hide success message after a short delay
@@ -134,20 +144,19 @@ export const RefreshController: React.FC<{
    return () => '';
  }, [loadingState]);

-  const handleClick = useCallback(() => {
-    setLoadingState('loading-more');
-
-    dispatch(fetchContext({ statusId }))
-      .then(() => {
-        setLoadingState('success');
-        return '';
-      })
-      .catch(() => {
-        setLoadingState('error');
-      });
+  useEffect(() => {
+    // Clear pending replies on unmount
+    return () => {
+      dispatch(clearPendingReplies({ statusId }));
+    };
  }, [dispatch, statusId]);

-  if (loadingState === 'loading-initial') {
+  const handleClick = useCallback(() => {
+    dispatch(showPendingReplies({ statusId }));
+    setLoadingState('success');
+  }, [dispatch, statusId]);
+
+  if (loadingState === 'loading') {
    return (
      <div
        className='load-more load-gap'
@@ -170,13 +179,6 @@ export const RefreshController: React.FC<{
        onDismiss={dismissPrompt}
        animateFrom='below'
      />
-      <AnimatedAlert
-        isLoading
-        withEntryDelay
-        isActive={loadingState === 'loading-more'}
-        message={intl.formatMessage(messages.loadingMore)}
-        animateFrom='below'
-      />
      <AnimatedAlert
        withEntryDelay
        isActive={loadingState === 'error'}
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -635,7 +635,7 @@ class Status extends ImmutablePureComponent {
        />

        <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll} childRef={this.setContainerRef}>
-          <div className={classNames('scrollable item-list', { fullscreen })} ref={this.setContainerRef}>
+          <div className={classNames('item-list scrollable scrollable--flex', { fullscreen })} ref={this.setContainerRef}>
            {ancestors}

            <Hotkeys handlers={handlers}>
--- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
@@ -15,6 +15,8 @@ import InlineAccount from 'flavours/glitch/components/inline_account';
 import MediaAttachments from 'flavours/glitch/components/media_attachments';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import emojify from 'flavours/glitch/features/emoji/emoji';
+import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
+import { CustomEmojiProvider } from '@/flavours/glitch/components/emoji/context';

 const mapStateToProps = (state, { statusId }) => ({
  language: state.getIn(['statuses', statusId, 'language']),
@@ -51,8 +53,8 @@ class CompareHistoryModal extends PureComponent {
      return obj;
    }, {});

-    const content = { __html: emojify(currentVersion.get('content'), emojiMap) };
-    const spoilerContent = { __html: emojify(escapeTextContentForBrowser(currentVersion.get('spoiler_text')), emojiMap) };
+    const content = emojify(currentVersion.get('content'), emojiMap);
+    const spoilerContent = emojify(escapeTextContentForBrowser(currentVersion.get('spoiler_text')), emojiMap);

    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} short={false} />;
    const formattedName = <InlineAccount accountId={currentVersion.get('account')} />;
@@ -65,43 +67,50 @@ class CompareHistoryModal extends PureComponent {

    return (
      <div className='modal-root__modal compare-history-modal'>
-        <div className='report-modal__target'>
-          <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
-          {label}
-        </div>
-
-        <div className='compare-history-modal__container'>
-          <div className='status__content'>
-            {currentVersion.get('spoiler_text').length > 0 && (
-              <>
-                <div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} />
-                <hr />
-              </>
-            )}
-
-            <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} />
-
-            {!!currentVersion.get('poll') && (
-              <div className='poll'>
-                <ul>
-                  {currentVersion.getIn(['poll', 'options']).map(option => (
-                    <li key={option.get('title')}>
-                      <span className='poll__input disabled' />
-
-                      <span
-                        className='poll__option__text translate'
-                        dangerouslySetInnerHTML={{ __html: emojify(escapeTextContentForBrowser(option.get('title')), emojiMap) }}
-                        lang={language}
-                      />
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            <MediaAttachments status={currentVersion} lang={language} />
+        <CustomEmojiProvider emojis={currentVersion.get('emojis')}>
+          <div className='report-modal__target'>
+            <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
+            {label}
          </div>
-        </div>
+
+          <div className='compare-history-modal__container'>
+            <div className='status__content'>
+              {currentVersion.get('spoiler_text').length > 0 && (
+                <>
+                  <EmojiHTML className='translate' htmlString={spoilerContent} lang={language} />
+                  <hr />
+                </>
+              )}
+
+              <EmojiHTML
+                className='status__content__text status__content__text--visible translate'
+                htmlString={content}
+                lang={language}
+              />
+
+              {!!currentVersion.get('poll') && (
+                <div className='poll'>
+                  <ul>
+                    {currentVersion.getIn(['poll', 'options']).map(option => (
+                      <li key={option.get('title')}>
+                        <span className='poll__input disabled' />
+
+                        <EmojiHTML
+                          as="span"
+                          className='poll__option__text translate'
+                          htmlString={emojify(escapeTextContentForBrowser(option.get('title')), emojiMap)}
+                          lang={language}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              <MediaAttachments status={currentVersion} lang={language} />
+            </div>
+          </div>
+        </CustomEmojiProvider>
      </div>
    );
  }
--- a/app/javascript/flavours/glitch/hooks/useLinks.ts
+++ b/app/javascript/flavours/glitch/hooks/useLinks.ts
@@ -7,6 +7,8 @@ import { isFulfilled, isRejected } from '@reduxjs/toolkit';
 import { openURL } from 'flavours/glitch/actions/search';
 import { useAppDispatch } from 'flavours/glitch/store';

+import { isModernEmojiEnabled } from '../utils/environment';
+
 const isMentionClick = (element: HTMLAnchorElement) =>
  element.classList.contains('mention') &&
  !element.classList.contains('hashtag');
@@ -53,6 +55,11 @@ export const useLinks = (skipHashtags?: boolean) => {

  const handleClick = useCallback(
    (e: React.MouseEvent) => {
+      // Exit early if modern emoji is enabled, as this is handled by HandledLink.
+      if (isModernEmojiEnabled()) {
+        return;
+      }
+
      const target = (e.target as HTMLElement).closest('a');

      if (!target || e.button !== 0 || e.ctrlKey || e.metaKey) {
--- a/app/javascript/flavours/glitch/polyfills/index.ts
+++ b/app/javascript/flavours/glitch/polyfills/index.ts
@@ -19,7 +19,7 @@ export function loadPolyfills() {
  return Promise.all([
    loadIntlPolyfills(),
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types
-    needsExtraPolyfills && importExtraPolyfills(),
+    needsExtraPolyfills ? importExtraPolyfills() : Promise.resolve(),
    loadEmojiPolyfills(),
  ]);
 }
--- a/app/javascript/flavours/glitch/reducers/contexts.ts
+++ b/app/javascript/flavours/glitch/reducers/contexts.ts
@@ -13,7 +13,12 @@ import type {
 import type { Status } from 'flavours/glitch/models/status';

 import { blockAccountSuccess, muteAccountSuccess } from '../actions/accounts';
-import { fetchContext, completeContextRefresh } from '../actions/statuses';
+import {
+  fetchContext,
+  completeContextRefresh,
+  showPendingReplies,
+  clearPendingReplies,
+} from '../actions/statuses';
 import { TIMELINE_UPDATE } from '../actions/timelines';
 import { compareId } from '../compare_id';

@@ -26,52 +31,84 @@ interface TimelineUpdateAction extends UnknownAction {
 interface State {
  inReplyTos: Record<string, string>;
  replies: Record<string, string[]>;
+  pendingReplies: Record<
+    string,
+    Pick<ApiStatusJSON, 'id' | 'in_reply_to_id'>[]
+  >;
  refreshing: Record<string, AsyncRefreshHeader>;
 }

 const initialState: State = {
  inReplyTos: {},
  replies: {},
+  pendingReplies: {},
  refreshing: {},
 };

+const addReply = (
+  state: Draft<State>,
+  { id, in_reply_to_id }: Pick<ApiStatusJSON, 'id' | 'in_reply_to_id'>,
+) => {
+  if (!in_reply_to_id) {
+    return;
+  }
+
+  if (!state.inReplyTos[id]) {
+    const siblings = (state.replies[in_reply_to_id] ??= []);
+    const index = siblings.findIndex((sibling) => compareId(sibling, id) < 0);
+    siblings.splice(index + 1, 0, id);
+    state.inReplyTos[id] = in_reply_to_id;
+  }
+};
+
 const normalizeContext = (
  state: Draft<State>,
  id: string,
  { ancestors, descendants }: ApiContextJSON,
 ): void => {
-  const addReply = ({
-    id,
-    in_reply_to_id,
-  }: {
-    id: string;
-    in_reply_to_id?: string;
-  }) => {
-    if (!in_reply_to_id) {
-      return;
-    }
-
-    if (!state.inReplyTos[id]) {
-      const siblings = (state.replies[in_reply_to_id] ??= []);
-      const index = siblings.findIndex((sibling) => compareId(sibling, id) < 0);
-      siblings.splice(index + 1, 0, id);
-      state.inReplyTos[id] = in_reply_to_id;
-    }
-  };
+  ancestors.forEach((item) => {
+    addReply(state, item);
+  });

  // We know in_reply_to_id of statuses but `id` itself.
  // So we assume that the status of the id replies to last ancestors.
-
-  ancestors.forEach(addReply);
-
  if (ancestors[0]) {
-    addReply({
+    addReply(state, {
      id,
      in_reply_to_id: ancestors[ancestors.length - 1]?.id,
    });
  }

-  descendants.forEach(addReply);
+  descendants.forEach((item) => {
+    addReply(state, item);
+  });
+};
+
+const applyPrefetchedReplies = (state: Draft<State>, statusId: string) => {
+  const pendingReplies = state.pendingReplies[statusId];
+  if (pendingReplies?.length) {
+    pendingReplies.forEach((item) => {
+      addReply(state, item);
+    });
+    delete state.pendingReplies[statusId];
+  }
+};
+
+const storePrefetchedReplies = (
+  state: Draft<State>,
+  statusId: string,
+  { descendants }: ApiContextJSON,
+): void => {
+  descendants.forEach(({ id, in_reply_to_id }) => {
+    if (!in_reply_to_id) {
+      return;
+    }
+    const isNewReply = !state.replies[in_reply_to_id]?.includes(id);
+    if (isNewReply) {
+      const pendingReplies = (state.pendingReplies[statusId] ??= []);
+      pendingReplies.push({ id, in_reply_to_id });
+    }
+  });
 };

 const deleteFromContexts = (state: Draft<State>, ids: string[]): void => {
@@ -129,12 +166,30 @@ const updateContext = (state: Draft<State>, status: ApiStatusJSON): void => {
 export const contextsReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(fetchContext.fulfilled, (state, action) => {
-      normalizeContext(state, action.meta.arg.statusId, action.payload.context);
+      if (action.payload.prefetchOnly) {
+        storePrefetchedReplies(
+          state,
+          action.meta.arg.statusId,
+          action.payload.context,
+        );
+      } else {
+        normalizeContext(
+          state,
+          action.meta.arg.statusId,
+          action.payload.context,
+        );

-      if (action.payload.refresh) {
-        state.refreshing[action.meta.arg.statusId] = action.payload.refresh;
+        if (action.payload.refresh) {
+          state.refreshing[action.meta.arg.statusId] = action.payload.refresh;
+        }
      }
    })
+    .addCase(showPendingReplies, (state, action) => {
+      applyPrefetchedReplies(state, action.payload.statusId);
+    })
+    .addCase(clearPendingReplies, (state, action) => {
+      delete state.pendingReplies[action.payload.statusId];
+    })
    .addCase(completeContextRefresh, (state, action) => {
      delete state.refreshing[action.payload.statusId];
    })
--- a/app/javascript/flavours/glitch/reducers/modal.ts
+++ b/app/javascript/flavours/glitch/reducers/modal.ts
@@ -41,7 +41,7 @@ const popModal = (
    modalType === state.get('stack').get(0)?.get('modalType')
  ) {
    return state
-      .set('ignoreFocus', !!ignoreFocus)
+      .set('ignoreFocus', ignoreFocus)
      .update('stack', (stack) => stack.shift());
  } else {
    return state;
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -3218,18 +3218,23 @@ a.account__display-name {

 .column__alert {
  position: sticky;
-  bottom: 1rem;
+  bottom: 0;
  z-index: 10;
  box-sizing: border-box;
  display: grid;
  width: 100%;
  max-width: 360px;
-  padding-inline: 10px;
-  margin-top: 1rem;
-  margin-inline: auto;
+  padding: 1rem;
+  margin: auto auto 0;
+  overflow: clip;
+
+  &:empty {
+    padding: 0;
+  }

  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
-    bottom: 4rem;
+    // Compensate for mobile menubar
+    bottom: var(--mobile-bottom-nav-height);
  }

  & > * {
--- a/app/javascript/flavours/glitch/utils/environment.ts
+++ b/app/javascript/flavours/glitch/utils/environment.ts
@@ -20,10 +20,7 @@ export function isFeatureEnabled(feature: Features) {

 export function isModernEmojiEnabled() {
  try {
-    return (
-      isFeatureEnabled('modern_emojis') &&
-      localStorage.getItem('experiments')?.split(',').includes('modern_emojis')
-    );
+    return isFeatureEnabled('modern_emojis');
  } catch {
    return false;
  }
--- a/app/javascript/flavours/glitch/utils/html.ts
+++ b/app/javascript/flavours/glitch/utils/html.ts
@@ -32,20 +32,31 @@ interface QueueItem {
  depth: number;
 }

-export interface HTMLToStringOptions<Arg extends Record<string, unknown>> {
+export type OnElementHandler<
+  Arg extends Record<string, unknown> = Record<string, unknown>,
+> = (
+  element: HTMLElement,
+  props: Record<string, unknown>,
+  children: React.ReactNode[],
+  extra: Arg,
+) => React.ReactNode;
+
+export type OnAttributeHandler<
+  Arg extends Record<string, unknown> = Record<string, unknown>,
+> = (
+  name: string,
+  value: string,
+  tagName: string,
+  extra: Arg,
+) => [string, unknown] | undefined | null;
+
+export interface HTMLToStringOptions<
+  Arg extends Record<string, unknown> = Record<string, unknown>,
+> {
  maxDepth?: number;
  onText?: (text: string, extra: Arg) => React.ReactNode;
-  onElement?: (
-    element: HTMLElement,
-    children: React.ReactNode[],
-    extra: Arg,
-  ) => React.ReactNode;
-  onAttribute?: (
-    name: string,
-    value: string,
-    tagName: string,
-    extra: Arg,
-  ) => [string, unknown] | null;
+  onElement?: OnElementHandler<Arg>;
+  onAttribute?: OnAttributeHandler<Arg>;
  allowedTags?: AllowedTagsType;
  extraArgs?: Arg;
 }
@@ -125,9 +136,57 @@ export function htmlStringToComponents<Arg extends Record<string, unknown>>(
        const children: React.ReactNode[] = [];
        let element: React.ReactNode = undefined;

+        // Generate props from attributes.
+        const key = `html-${uniqueIdCounter++}`; // Get the current key and then increment it.
+        const props: Record<string, unknown> = { key };
+        for (const attr of node.attributes) {
+          let name = attr.name.toLowerCase();
+
+          // Custom attribute handler.
+          if (onAttribute) {
+            const result = onAttribute(name, attr.value, tagName, extraArgs);
+            // Rewrite this attribute.
+            if (result) {
+              const [cbName, value] = result;
+              props[cbName] = value;
+              continue;
+            } else if (result === null) {
+              // Explicitly remove this attribute.
+              continue;
+            }
+          }
+
+          // Check global attributes first, then tag-specific ones.
+          const globalAttr = globalAttributes[name];
+          const tagAttr = tagInfo.attributes?.[name];
+
+          // Exit if neither global nor tag-specific attribute is allowed.
+          if (!globalAttr && !tagAttr) {
+            continue;
+          }
+
+          // Rename if needed.
+          if (typeof tagAttr === 'string') {
+            name = tagAttr;
+          } else if (typeof globalAttr === 'string') {
+            name = globalAttr;
+          }
+
+          let value: string | boolean | number = attr.value;
+
+          // Handle boolean attributes.
+          if (value === 'true') {
+            value = true;
+          } else if (value === 'false') {
+            value = false;
+          }
+
+          props[name] = value;
+        }
+
        // If onElement is provided, use it to create the element.
        if (onElement) {
-          const component = onElement(node, children, extraArgs);
+          const component = onElement(node, props, children, extraArgs);

          // Check for undefined to allow returning null.
          if (component !== undefined) {
@@ -137,53 +196,6 @@ export function htmlStringToComponents<Arg extends Record<string, unknown>>(

        // If the element wasn't created, use the default conversion.
        if (element === undefined) {
-          const props: Record<string, unknown> = {};
-          props.key = `html-${uniqueIdCounter++}`; // Get the current key and then increment it.
-          for (const attr of node.attributes) {
-            let name = attr.name.toLowerCase();
-
-            // Custom attribute handler.
-            if (onAttribute) {
-              const result = onAttribute(
-                name,
-                attr.value,
-                node.tagName.toLowerCase(),
-                extraArgs,
-              );
-              if (result) {
-                const [cbName, value] = result;
-                props[cbName] = value;
-              }
-            } else {
-              // Check global attributes first, then tag-specific ones.
-              const globalAttr = globalAttributes[name];
-              const tagAttr = tagInfo.attributes?.[name];
-
-              // Exit if neither global nor tag-specific attribute is allowed.
-              if (!globalAttr && !tagAttr) {
-                continue;
-              }
-
-              // Rename if needed.
-              if (typeof tagAttr === 'string') {
-                name = tagAttr;
-              } else if (typeof globalAttr === 'string') {
-                name = globalAttr;
-              }
-
-              let value: string | boolean | number = attr.value;
-
-              // Handle boolean attributes.
-              if (value === 'true') {
-                value = true;
-              } else if (value === 'false') {
-                value = false;
-              }
-
-              props[name] = value;
-            }
-          }
-
          element = React.createElement(
            tagName,
            props,
--- a/app/javascript/mastodon/actions/compose_typed.ts
+++ b/app/javascript/mastodon/actions/compose_typed.ts
@@ -4,6 +4,7 @@ import { createAction } from '@reduxjs/toolkit';
 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';

 import { apiUpdateMedia } from 'mastodon/api/compose';
+import { apiGetSearch } from 'mastodon/api/search';
 import type { ApiMediaAttachmentJSON } from 'mastodon/api_types/media_attachments';
 import type { MediaAttachment } from 'mastodon/models/media_attachment';
 import {
@@ -16,6 +17,7 @@ import type { Status } from '../models/status';

 import { showAlert } from './alerts';
 import { focusCompose } from './compose';
+import { importFetchedStatuses } from './importer';
 import { openModal } from './modal';

 const messages = defineMessages({
@@ -165,6 +167,41 @@ export const quoteComposeById = createAppThunk(
  },
 );

+export const pasteLinkCompose = createDataLoadingThunk(
+  'compose/pasteLink',
+  async ({ url }: { url: string }) => {
+    return await apiGetSearch({
+      q: url,
+      type: 'statuses',
+      resolve: true,
+      limit: 2,
+    });
+  },
+  (data, { dispatch, getState }) => {
+    const composeState = getState().compose;
+
+    if (
+      composeState.get('quoted_status_id') ||
+      composeState.get('is_submitting') ||
+      composeState.get('poll') ||
+      composeState.get('is_uploading')
+    )
+      return;
+
+    dispatch(importFetchedStatuses(data.statuses));
+
+    if (
+      data.statuses.length === 1 &&
+      data.statuses[0] &&
+      ['automatic', 'manual'].includes(
+        data.statuses[0].quote_approval?.current_user ?? 'denied',
+      )
+    ) {
+      dispatch(quoteComposeById(data.statuses[0].id));
+    }
+  },
+);
+
 export const quoteComposeCancel = createAction('compose/quoteComposeCancel');

 export const setComposeQuotePolicy = createAction<ApiQuotePolicy>(
--- a/app/javascript/mastodon/actions/statuses_typed.ts
+++ b/app/javascript/mastodon/actions/statuses_typed.ts
@@ -9,8 +9,9 @@ import { importFetchedStatuses } from './importer';

 export const fetchContext = createDataLoadingThunk(
  'status/context',
-  ({ statusId }: { statusId: string }) => apiGetContext(statusId),
-  ({ context, refresh }, { dispatch }) => {
+  ({ statusId }: { statusId: string; prefetchOnly?: boolean }) =>
+    apiGetContext(statusId),
+  ({ context, refresh }, { dispatch, actionArg: { prefetchOnly = false } }) => {
    const statuses = context.ancestors.concat(context.descendants);

    dispatch(importFetchedStatuses(statuses));
@@ -18,6 +19,7 @@ export const fetchContext = createDataLoadingThunk(
    return {
      context,
      refresh,
+      prefetchOnly,
    };
  },
 );
@@ -26,6 +28,14 @@ export const completeContextRefresh = createAction<{ statusId: string }>(
  'status/context/complete',
 );

+export const showPendingReplies = createAction<{ statusId: string }>(
+  'status/context/showPendingReplies',
+);
+
+export const clearPendingReplies = createAction<{ statusId: string }>(
+  'status/context/clearPendingReplies',
+);
+
 export const setStatusQuotePolicy = createDataLoadingThunk(
  'status/setQuotePolicy',
  ({ statusId, policy }: { statusId: string; policy: ApiQuotePolicy }) => {
--- a/app/javascript/mastodon/api_types/announcements.ts
+++ b/app/javascript/mastodon/api_types/announcements.ts
@@ -0,0 +1,28 @@
+// See app/serializers/rest/announcement_serializer.rb
+
+import type { ApiCustomEmojiJSON } from './custom_emoji';
+import type { ApiMentionJSON, ApiStatusJSON, ApiTagJSON } from './statuses';
+
+export interface ApiAnnouncementJSON {
+  id: string;
+  content: string;
+  starts_at: null | string;
+  ends_at: null | string;
+  all_day: boolean;
+  published_at: string;
+  updated_at: null | string;
+  read: boolean;
+  mentions: ApiMentionJSON[];
+  statuses: ApiStatusJSON[];
+  tags: ApiTagJSON[];
+  emojis: ApiCustomEmojiJSON[];
+  reactions: ApiAnnouncementReactionJSON[];
+}
+
+export interface ApiAnnouncementReactionJSON {
+  name: string;
+  count: number;
+  me: boolean;
+  url?: string;
+  static_url?: string;
+}
--- a/app/javascript/mastodon/components/account/index.tsx
+++ b/app/javascript/mastodon/components/account/index.tsx
@@ -5,6 +5,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';

+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import {
  blockAccount,
@@ -331,9 +332,10 @@ export const Account: React.FC<AccountProps> = ({
          {account &&
            withBio &&
            (account.note.length > 0 ? (
-              <div
+              <EmojiHTML
                className='account__note translate'
-                dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+                htmlString={account.note_emojified}
+                extraEmojis={account.emojis}
              />
            ) : (
              <div className='account__note account__note--missing'>
--- a/app/javascript/mastodon/components/account_bio.tsx
+++ b/app/javascript/mastodon/components/account_bio.tsx
@@ -7,8 +7,8 @@ import { useLinks } from 'mastodon/hooks/useLinks';
 import { useAppSelector } from '../store';
 import { isModernEmojiEnabled } from '../utils/environment';

-import { AnimateEmojiProvider } from './emoji/context';
 import { EmojiHTML } from './emoji/html';
+import { useElementHandledLink } from './status/handled_link';

 interface AccountBioProps {
  className: string;
@@ -24,19 +24,29 @@ export const AccountBio: React.FC<AccountBioProps> = ({
  const handleClick = useLinks(showDropdown);
  const handleNodeChange = useCallback(
    (node: HTMLDivElement | null) => {
-      if (!showDropdown || !node || node.childNodes.length === 0) {
+      if (
+        !showDropdown ||
+        !node ||
+        node.childNodes.length === 0 ||
+        isModernEmojiEnabled()
+      ) {
        return;
      }
      addDropdownToHashtags(node, accountId);
    },
    [showDropdown, accountId],
  );
+
+  const htmlHandlers = useElementHandledLink({
+    hashtagAccountId: showDropdown ? accountId : undefined,
+  });
+
  const note = useAppSelector((state) => {
    const account = state.accounts.get(accountId);
    if (!account) {
      return '';
    }
-    return isModernEmojiEnabled() ? account.note : account.note_emojified;
+    return account.note_emojified;
  });
  const extraEmojis = useAppSelector((state) => {
    const account = state.accounts.get(accountId);
@@ -48,13 +58,14 @@ export const AccountBio: React.FC<AccountBioProps> = ({
  }

  return (
-    <AnimateEmojiProvider
+    <EmojiHTML
+      htmlString={note}
+      extraEmojis={extraEmojis}
      className={classNames(className, 'translate')}
      onClickCapture={handleClick}
      ref={handleNodeChange}
-    >
-      <EmojiHTML htmlString={note} extraEmojis={extraEmojis} />
-    </AnimateEmojiProvider>
+      {...htmlHandlers}
+    />
  );
 };

--- a/app/javascript/mastodon/components/account_fields.tsx
+++ b/app/javascript/mastodon/components/account_fields.tsx
@@ -1,42 +1,70 @@
+import { useIntl } from 'react-intl';
+
 import classNames from 'classnames';

 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { Icon } from 'mastodon/components/icon';
-import { useLinks } from 'mastodon/hooks/useLinks';
 import type { Account } from 'mastodon/models/account';

-export const AccountFields: React.FC<{
-  fields: Account['fields'];
-  limit: number;
-}> = ({ fields, limit = -1 }) => {
-  const handleClick = useLinks();
+import { CustomEmojiProvider } from './emoji/context';
+import { EmojiHTML } from './emoji/html';
+import { useElementHandledLink } from './status/handled_link';
+
+export const AccountFields: React.FC<Pick<Account, 'fields' | 'emojis'>> = ({
+  fields,
+  emojis,
+}) => {
+  const intl = useIntl();
+  const htmlHandlers = useElementHandledLink();

  if (fields.size === 0) {
    return null;
  }

  return (
-    <div className='account-fields' onClickCapture={handleClick}>
-      {fields.take(limit).map((pair, i) => (
-        <dl
-          key={i}
-          className={classNames({ verified: pair.get('verified_at') })}
-        >
-          <dt
-            dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
+    <CustomEmojiProvider emojis={emojis}>
+      {fields.map((pair, i) => (
+        <dl key={i} className={classNames({ verified: pair.verified_at })}>
+          <EmojiHTML
+            as='dt'
+            htmlString={pair.name_emojified}
            className='translate'
+            {...htmlHandlers}
          />

-          <dd className='translate' title={pair.get('value_plain') ?? ''}>
-            {pair.get('verified_at') && (
-              <Icon id='check' icon={CheckIcon} className='verified__mark' />
-            )}
-            <span
-              dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
+          <dd className='translate' title={pair.value_plain ?? ''}>
+            {pair.verified_at && (
+              <span
+                title={intl.formatMessage(
+                  {
+                    id: 'account.link_verified_on',
+                    defaultMessage:
+                      'Ownership of this link was checked on {date}',
+                  },
+                  {
+                    date: intl.formatDate(pair.verified_at, dateFormatOptions),
+                  },
+                )}
+              >
+                <Icon id='check' icon={CheckIcon} className='verified__mark' />
+              </span>
+            )}{' '}
+            <EmojiHTML
+              as='span'
+              htmlString={pair.value_emojified}
+              {...htmlHandlers}
            />
          </dd>
        </dl>
      ))}
-    </div>
+    </CustomEmojiProvider>
  );
 };
+
+const dateFormatOptions: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+};
--- a/app/javascript/mastodon/components/autosuggest_textarea.jsx
+++ b/app/javascript/mastodon/components/autosuggest_textarea.jsx
@@ -150,10 +150,7 @@ const AutosuggestTextarea = forwardRef(({
  }, [suggestions, onSuggestionSelected, textareaRef]);

  const handlePaste = useCallback((e) => {
-    if (e.clipboardData && e.clipboardData.files.length === 1) {
-      onPaste(e.clipboardData.files);
-      e.preventDefault();
-    }
+    onPaste(e);
  }, [onPaste]);

  // Show the suggestions again whenever they change and the textarea is focused
--- a/app/javascript/mastodon/components/content_warning.tsx
+++ b/app/javascript/mastodon/components/content_warning.tsx
@@ -1,15 +1,38 @@
+import type { List } from 'immutable';
+
+import type { CustomEmoji } from '../models/custom_emoji';
+import type { Status } from '../models/status';
+
+import { EmojiHTML } from './emoji/html';
 import { StatusBanner, BannerVariant } from './status_banner';

 export const ContentWarning: React.FC<{
-  text: string;
+  status: Status;
  expanded?: boolean;
  onClick?: () => void;
-}> = ({ text, expanded, onClick }) => (
-  <StatusBanner
-    expanded={expanded}
-    onClick={onClick}
-    variant={BannerVariant.Warning}
-  >
-    <span dangerouslySetInnerHTML={{ __html: text }} />
-  </StatusBanner>
-);
+}> = ({ status, expanded, onClick }) => {
+  const hasSpoiler = !!status.get('spoiler_text');
+  if (!hasSpoiler) {
+    return null;
+  }
+
+  const text =
+    status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml');
+  if (typeof text !== 'string' || text.length === 0) {
+    return null;
+  }
+
+  return (
+    <StatusBanner
+      expanded={expanded}
+      onClick={onClick}
+      variant={BannerVariant.Warning}
+    >
+      <EmojiHTML
+        as='span'
+        htmlString={text}
+        extraEmojis={status.get('emoji') as List<CustomEmoji>}
+      />
+    </StatusBanner>
+  );
+};
--- a/app/javascript/mastodon/components/display_name/no-domain.tsx
+++ b/app/javascript/mastodon/components/display_name/no-domain.tsx
@@ -2,8 +2,6 @@ import type { ComponentPropsWithoutRef, FC } from 'react';

 import classNames from 'classnames';

-import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
-
 import { AnimateEmojiProvider } from '../emoji/context';
 import { EmojiHTML } from '../emoji/html';
 import { Skeleton } from '../skeleton';
@@ -24,11 +22,7 @@ export const DisplayNameWithoutDomain: FC<
        {account ? (
          <EmojiHTML
            className='display-name__html'
-            htmlString={
-              isModernEmojiEnabled()
-                ? account.get('display_name')
-                : account.get('display_name_html')
-            }
+            htmlString={account.get('display_name_html')}
            as='strong'
            extraEmojis={account.get('emojis')}
          />
--- a/app/javascript/mastodon/components/display_name/simple.tsx
+++ b/app/javascript/mastodon/components/display_name/simple.tsx
@@ -1,7 +1,5 @@
 import type { ComponentPropsWithoutRef, FC } from 'react';

-import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
-
 import { EmojiHTML } from '../emoji/html';

 import type { DisplayNameProps } from './index';
@@ -19,11 +17,7 @@ export const DisplayNameSimple: FC<
      <EmojiHTML
        {...props}
        as='span'
-        htmlString={
-          isModernEmojiEnabled()
-            ? account.get('display_name')
-            : account.get('display_name_html')
-        }
+        htmlString={account.get('display_name_html')}
        extraEmojis={account.get('emojis')}
      />
    </bdi>
--- a/app/javascript/mastodon/components/emoji/html.tsx
+++ b/app/javascript/mastodon/components/emoji/html.tsx
@@ -1,60 +1,89 @@
 import { useMemo } from 'react';
-import type { ComponentPropsWithoutRef, ElementType } from 'react';

 import classNames from 'classnames';

 import type { CustomEmojiMapArg } from '@/mastodon/features/emoji/types';
 import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+import type {
+  OnAttributeHandler,
+  OnElementHandler,
+} from '@/mastodon/utils/html';
 import { htmlStringToComponents } from '@/mastodon/utils/html';
+import { polymorphicForwardRef } from '@/types/polymorphic';

 import { AnimateEmojiProvider, CustomEmojiProvider } from './context';
 import { textToEmojis } from './index';

-type EmojiHTMLProps<Element extends ElementType = 'div'> = Omit<
-  ComponentPropsWithoutRef<Element>,
-  'dangerouslySetInnerHTML' | 'className'
-> & {
+interface EmojiHTMLProps {
  htmlString: string;
  extraEmojis?: CustomEmojiMapArg;
-  as?: Element;
  className?: string;
-};
+  onElement?: OnElementHandler;
+  onAttribute?: OnAttributeHandler;
+}

-export const ModernEmojiHTML = ({
-  extraEmojis,
-  htmlString,
-  as: asProp = 'div', // Rename for syntax highlighting
-  shallow,
-  className = '',
-  ...props
-}: EmojiHTMLProps<ElementType>) => {
-  const contents = useMemo(
-    () => htmlStringToComponents(htmlString, { onText: textToEmojis }),
-    [htmlString],
-  );
+export const ModernEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
+  (
+    {
+      extraEmojis,
+      htmlString,
+      as: asProp = 'div', // Rename for syntax highlighting
+      className = '',
+      onElement,
+      onAttribute,
+      ...props
+    },
+    ref,
+  ) => {
+    const contents = useMemo(
+      () =>
+        htmlStringToComponents(htmlString, {
+          onText: textToEmojis,
+          onElement,
+          onAttribute,
+        }),
+      [htmlString, onAttribute, onElement],
+    );

-  return (
-    <CustomEmojiProvider emojis={extraEmojis}>
-      <AnimateEmojiProvider {...props} as={asProp} className={className}>
-        {contents}
-      </AnimateEmojiProvider>
-    </CustomEmojiProvider>
-  );
-};
+    return (
+      <CustomEmojiProvider emojis={extraEmojis}>
+        <AnimateEmojiProvider
+          {...props}
+          as={asProp}
+          className={className}
+          ref={ref}
+        >
+          {contents}
+        </AnimateEmojiProvider>
+      </CustomEmojiProvider>
+    );
+  },
+);
+ModernEmojiHTML.displayName = 'ModernEmojiHTML';

-export const LegacyEmojiHTML = <Element extends ElementType>(
-  props: EmojiHTMLProps<Element>,
-) => {
-  const { as: asElement, htmlString, extraEmojis, className, ...rest } = props;
-  const Wrapper = asElement ?? 'div';
-  return (
-    <Wrapper
-      {...rest}
-      dangerouslySetInnerHTML={{ __html: htmlString }}
-      className={classNames(className, 'animate-parent')}
-    />
-  );
-};
+export const LegacyEmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
+  (props, ref) => {
+    const {
+      as: asElement,
+      htmlString,
+      extraEmojis,
+      className,
+      onElement,
+      onAttribute,
+      ...rest
+    } = props;
+    const Wrapper = asElement ?? 'div';
+    return (
+      <Wrapper
+        {...rest}
+        ref={ref}
+        dangerouslySetInnerHTML={{ __html: htmlString }}
+        className={classNames(className, 'animate-parent')}
+      />
+    );
+  },
+);
+LegacyEmojiHTML.displayName = 'LegacyEmojiHTML';

 export const EmojiHTML = isModernEmojiEnabled()
  ? ModernEmojiHTML
--- a/app/javascript/mastodon/components/hover_card_account.tsx
+++ b/app/javascript/mastodon/components/hover_card_account.tsx
@@ -23,6 +23,8 @@ import { domain } from 'mastodon/initial_state';
 import { getAccountHidden } from 'mastodon/selectors/accounts';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';

+import { useLinks } from '../hooks/useLinks';
+
 export const HoverCardAccount = forwardRef<
  HTMLDivElement,
  { accountId?: string }
@@ -64,6 +66,8 @@ export const HoverCardAccount = forwardRef<
    !isMutual &&
    !isFollower;

+  const handleClick = useLinks();
+
  return (
    <div
      ref={ref}
@@ -105,7 +109,14 @@ export const HoverCardAccount = forwardRef<
                  accountId={account.id}
                  className='hover-card__bio'
                />
-                <AccountFields fields={account.fields} limit={2} />
+
+                <div className='account-fields' onClickCapture={handleClick}>
+                  <AccountFields
+                    fields={account.fields.take(2)}
+                    emojis={account.emojis}
+                  />
+                </div>
+
                {note && note.length > 0 && (
                  <dl className='hover-card__note'>
                    <dt className='hover-card__note-label'>
--- a/app/javascript/mastodon/components/poll.tsx
+++ b/app/javascript/mastodon/components/poll.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { animated, useSpring } from '@react-spring/web';
 import escapeTextContentForBrowser from 'escape-html';

+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import { openModal } from 'mastodon/actions/modal';
 import { fetchPoll, vote } from 'mastodon/actions/polls';
@@ -305,10 +306,11 @@ const PollOption: React.FC<PollOptionProps> = (props) => {
          </span>
        )}

-        <span
+        <EmojiHTML
          className='poll__option__text translate'
          lang={lang}
-          dangerouslySetInnerHTML={{ __html: titleHtml }}
+          htmlString={titleHtml}
+          extraEmojis={poll.emojis}
        />

        {!!voted && (
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -118,7 +118,7 @@ class Status extends ImmutablePureComponent {
    unread: PropTypes.bool,
    showThread: PropTypes.bool,
    isQuotedPost: PropTypes.bool,
-    shouldHighlightOnMount: PropTypes.bool, 
+    shouldHighlightOnMount: PropTypes.bool,
    getScrollPosition: PropTypes.func,
    updateScrollBottom: PropTypes.func,
    cacheMediaWidth: PropTypes.func,
@@ -600,7 +600,7 @@ class Status extends ImmutablePureComponent {

            {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}

-            {(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
+            {(!matchedFilters || this.state.showDespiteFilter) && <ContentWarning status={status} expanded={expanded} onClick={this.handleExpandedToggle} />}

            {expanded && (
              <>
--- a/app/javascript/mastodon/components/status/handled_link.stories.tsx
+++ b/app/javascript/mastodon/components/status/handled_link.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { HashtagMenuController } from '@/mastodon/features/ui/components/hashtag_menu_controller';
+import { accountFactoryState } from '@/testing/factories';
+
+import { HoverCardController } from '../hover_card_controller';
+
+import type { HandledLinkProps } from './handled_link';
+import { HandledLink } from './handled_link';
+
+const meta = {
+  title: 'Components/Status/HandledLink',
+  render(args) {
+    return (
+      <>
+        <HandledLink {...args} mentionAccountId='1' hashtagAccountId='1' />
+        <HashtagMenuController />
+        <HoverCardController />
+      </>
+    );
+  },
+  args: {
+    href: 'https://example.com/path/subpath?query=1#hash',
+    text: 'https://example.com',
+  },
+  parameters: {
+    state: {
+      accounts: {
+        '1': accountFactoryState(),
+      },
+    },
+  },
+} satisfies Meta<Pick<HandledLinkProps, 'href' | 'text'>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Hashtag: Story = {
+  args: {
+    text: '#example',
+  },
+};
+
+export const Mention: Story = {
+  args: {
+    text: '@user',
+  },
+};
+
+export const InternalLink: Story = {
+  args: {
+    href: '/about',
+    text: 'About',
+  },
+};
+
+export const InvalidURL: Story = {
+  args: {
+    href: 'ht!tp://invalid-url',
+    text: 'ht!tp://invalid-url -- invalid!',
+  },
+};
--- a/app/javascript/mastodon/components/status/handled_link.tsx
+++ b/app/javascript/mastodon/components/status/handled_link.tsx
@@ -0,0 +1,111 @@
+import { useCallback } from 'react';
+import type { ComponentProps, FC } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import type { OnElementHandler } from '@/mastodon/utils/html';
+
+export interface HandledLinkProps {
+  href: string;
+  text: string;
+  hashtagAccountId?: string;
+  mentionAccountId?: string;
+}
+
+export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
+  href,
+  text,
+  hashtagAccountId,
+  mentionAccountId,
+  ...props
+}) => {
+  // Handle hashtags
+  if (text.startsWith('#')) {
+    const hashtag = text.slice(1).trim();
+    return (
+      <Link
+        {...props}
+        className='mention hashtag'
+        to={`/tags/${hashtag}`}
+        rel='tag'
+        data-menu-hashtag={hashtagAccountId}
+      >
+        #<span>{hashtag}</span>
+      </Link>
+    );
+  } else if (text.startsWith('@')) {
+    // Handle mentions
+    const mention = text.slice(1).trim();
+    return (
+      <Link
+        {...props}
+        className='mention'
+        to={`/@${mention}`}
+        title={`@${mention}`}
+        data-hover-card-account={mentionAccountId}
+      >
+        @<span>{mention}</span>
+      </Link>
+    );
+  }
+
+  // Non-absolute paths treated as internal links.
+  if (href.startsWith('/')) {
+    return (
+      <Link {...props} className='unhandled-link' to={href}>
+        {text}
+      </Link>
+    );
+  }
+
+  try {
+    const url = new URL(href);
+    const [first, ...rest] = url.pathname.split('/').slice(1); // Start at 1 to skip the leading slash.
+    return (
+      <a
+        {...props}
+        href={href}
+        title={href}
+        className='unhandled-link'
+        target='_blank'
+        rel='noreferrer noopener'
+        translate='no'
+      >
+        <span className='invisible'>{url.protocol + '//'}</span>
+        <span className='ellipsis'>{`${url.hostname}/${first ?? ''}`}</span>
+        <span className='invisible'>{'/' + rest.join('/')}</span>
+      </a>
+    );
+  } catch {
+    return text;
+  }
+};
+
+export const useElementHandledLink = ({
+  hashtagAccountId,
+  hrefToMentionAccountId,
+}: {
+  hashtagAccountId?: string;
+  hrefToMentionAccountId?: (href: string) => string | undefined;
+} = {}) => {
+  const onElement = useCallback<OnElementHandler>(
+    (element, { key, ...props }) => {
+      if (element instanceof HTMLAnchorElement) {
+        const mentionId = hrefToMentionAccountId?.(element.href);
+        return (
+          <HandledLink
+            {...props}
+            key={key as string} // React requires keys to not be part of spread props.
+            href={element.href}
+            text={element.innerText}
+            hashtagAccountId={hashtagAccountId}
+            mentionAccountId={mentionId}
+          />
+        );
+      }
+      return undefined;
+    },
+    [hashtagAccountId, hrefToMentionAccountId],
+  );
+  return { onElement };
+};
--- a/app/javascript/mastodon/components/status_banner.tsx
+++ b/app/javascript/mastodon/components/status_banner.tsx
@@ -3,6 +3,8 @@ import { useCallback, useRef, useId } from 'react';

 import { FormattedMessage } from 'react-intl';

+import { AnimateEmojiProvider } from './emoji/context';
+
 export enum BannerVariant {
  Warning = 'warning',
  Filter = 'filter',
@@ -34,8 +36,7 @@ export const StatusBanner: React.FC<{

  return (
    // Element clicks are passed on to button
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
+    <AnimateEmojiProvider
      className={
        variant === BannerVariant.Warning
          ? 'content-warning'
@@ -69,6 +70,6 @@ export const StatusBanner: React.FC<{
          />
        )}
      </button>
-    </div>
+    </AnimateEmojiProvider>
  );
 };
--- a/app/javascript/mastodon/components/status_content.jsx
+++ b/app/javascript/mastodon/components/status_content.jsx
@@ -18,6 +18,7 @@ import { languages as preloadedLanguages } from 'mastodon/initial_state';
 import { isModernEmojiEnabled } from '../utils/environment';

 import { EmojiHTML } from './emoji/html';
+import { HandledLink } from './status/handled_link';

 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)

@@ -27,9 +28,6 @@ const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
 * @returns {string}
 */
 export function getStatusContent(status) {
-  if (isModernEmojiEnabled()) {
-    return status.getIn(['translation', 'content']) || status.get('content');
-  }
  return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
 }

@@ -99,6 +97,23 @@ class StatusContent extends PureComponent {
    }

    const { status, onCollapsedToggle } = this.props;
+    if (status.get('collapsed', null) === null && onCollapsedToggle) {
+      const { collapsible, onClick } = this.props;
+
+      const collapsed =
+          collapsible
+          && onClick
+          && node.clientHeight > MAX_HEIGHT
+          && status.get('spoiler_text').length === 0;
+
+      onCollapsedToggle(collapsed);
+    }
+
+    // Exit if modern emoji is enabled, as it handles links using the HandledLink component.
+    if (isModernEmojiEnabled()) {
+      return;
+    }
+
    const links = node.querySelectorAll('a');

    let link, mention;
@@ -128,18 +143,6 @@ class StatusContent extends PureComponent {
        link.classList.add('unhandled-link');
      }
    }
-
-    if (status.get('collapsed', null) === null && onCollapsedToggle) {
-      const { collapsible, onClick } = this.props;
-
-      const collapsed =
-          collapsible
-          && onClick
-          && node.clientHeight > MAX_HEIGHT
-          && status.get('spoiler_text').length === 0;
-
-      onCollapsedToggle(collapsed);
-    }
  }

  componentDidMount () {
@@ -201,6 +204,25 @@ class StatusContent extends PureComponent {
    this.node = c;
  };

+  handleElement = (element, { key, ...props }) => {
+    if (element instanceof HTMLAnchorElement) {
+      const mention = this.props.status.get('mentions').find(item => element.href === item.get('url'));
+      return (
+        <HandledLink
+          {...props}
+          href={element.href}
+          text={element.innerText}
+          hashtagAccountId={this.props.status.getIn(['account', 'id'])}
+          mentionAccountId={mention?.get('id')}
+          key={key}
+        />
+      );
+    } else if (element instanceof HTMLParagraphElement && element.classList.contains('quote-inline')) {
+      return null;
+    }
+    return undefined;
+  }
+
  render () {
    const { status, intl, statusContent } = this.props;

@@ -245,6 +267,7 @@ class StatusContent extends PureComponent {
              lang={language}
              htmlString={content}
              extraEmojis={status.get('emojis')}
+              onElement={this.handleElement.bind(this)}
            />

            {poll}
@@ -262,6 +285,7 @@ class StatusContent extends PureComponent {
            lang={language}
            htmlString={content}
            extraEmojis={status.get('emojis')}
+            onElement={this.handleElement.bind(this)}
          />

          {poll}
--- a/app/javascript/mastodon/components/verified_badge.tsx
+++ b/app/javascript/mastodon/components/verified_badge.tsx
@@ -1,10 +1,17 @@
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';

+import { isModernEmojiEnabled } from '../utils/environment';
+import type { OnAttributeHandler } from '../utils/html';
+
 import { Icon } from './icon';

 const domParser = new DOMParser();

 const stripRelMe = (html: string) => {
+  if (isModernEmojiEnabled()) {
+    return html;
+  }
  const document = domParser.parseFromString(html, 'text/html').documentElement;

  document.querySelectorAll<HTMLAnchorElement>('a[rel]').forEach((link) => {
@@ -15,7 +22,23 @@ const stripRelMe = (html: string) => {
  });

  const body = document.querySelector('body');
-  return body ? { __html: body.innerHTML } : undefined;
+  return body?.innerHTML ?? '';
+};
+
+const onAttribute: OnAttributeHandler = (name, value, tagName) => {
+  if (name === 'rel' && tagName === 'a') {
+    if (value === 'me') {
+      return null;
+    }
+    return [
+      name,
+      value
+        .split(' ')
+        .filter((x) => x !== 'me')
+        .join(' '),
+    ];
+  }
+  return undefined;
 };

 interface Props {
@@ -24,6 +47,10 @@ interface Props {
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
  <span className='verified-badge'>
    <Icon id='check' icon={CheckIcon} className='verified-badge__mark' />
-    <span dangerouslySetInnerHTML={stripRelMe(link)} />
+    <EmojiHTML
+      as='span'
+      htmlString={stripRelMe(link)}
+      onAttribute={onAttribute}
+    />
  </span>
 );
--- a/app/javascript/mastodon/features/account_timeline/components/account_header.tsx
+++ b/app/javascript/mastodon/features/account_timeline/components/account_header.tsx
@@ -7,9 +7,9 @@ import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';

 import { AccountBio } from '@/mastodon/components/account_bio';
+import { AccountFields } from '@/mastodon/components/account_fields';
 import { DisplayName } from '@/mastodon/components/display_name';
 import { AnimateEmojiProvider } from '@/mastodon/components/emoji/context';
-import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
@@ -186,14 +186,6 @@ const titleFromAccount = (account: Account) => {
  return `${prefix} (@${acct})`;
 };

-const dateFormatOptions: Intl.DateTimeFormatOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
 export const AccountHeader: React.FC<{
  accountId: string;
  hideTabs?: boolean;
@@ -891,46 +883,7 @@ export const AccountHeader: React.FC<{
                    </dd>
                  </dl>

-                  {fields.map((pair, i) => (
-                    <dl
-                      key={i}
-                      className={classNames({
-                        verified: pair.verified_at,
-                      })}
-                    >
-                      <dt
-                        dangerouslySetInnerHTML={{
-                          __html: pair.name_emojified,
-                        }}
-                        title={pair.name}
-                        className='translate'
-                      />
-
-                      <dd className='translate' title={pair.value_plain ?? ''}>
-                        {pair.verified_at && (
-                          <span
-                            title={intl.formatMessage(messages.linkVerifiedOn, {
-                              date: intl.formatDate(
-                                pair.verified_at,
-                                dateFormatOptions,
-                              ),
-                            })}
-                          >
-                            <Icon
-                              id='check'
-                              icon={CheckIcon}
-                              className='verified__mark'
-                            />
-                          </span>
-                        )}{' '}
-                        <span
-                          dangerouslySetInnerHTML={{
-                            __html: pair.value_emojified,
-                          }}
-                        />
-                      </dd>
-                    </dl>
-                  ))}
+                  <AccountFields fields={fields} emojis={account.emojis} />
                </div>
              </div>

--- a/app/javascript/mastodon/features/compose/components/edit_indicator.jsx
+++ b/app/javascript/mastodon/features/compose/components/edit_indicator.jsx
@@ -50,9 +50,7 @@ export const EditIndicator = () => {

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

      {(status.get('poll') || status.get('media_attachments').size > 0) && (
--- a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
@@ -35,9 +35,7 @@ export const ReplyIndicator = () => {

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

        {(status.get('poll') || status.get('media_attachments').size > 0) && (
--- a/app/javascript/mastodon/features/compose/containers/compose_form_container.js
+++ b/app/javascript/mastodon/features/compose/containers/compose_form_container.js
@@ -10,10 +10,13 @@ import {
  insertEmojiCompose,
  uploadCompose,
 } from 'mastodon/actions/compose';
+import { pasteLinkCompose } from 'mastodon/actions/compose_typed';
 import { openModal } from 'mastodon/actions/modal';

 import ComposeForm from '../components/compose_form';

+const urlLikeRegex = /^https?:\/\/[^\s]+\/[^\s]+$/i;
+
 const mapStateToProps = state => ({
  text: state.getIn(['compose', 'text']),
  suggestions: state.getIn(['compose', 'suggestions']),
@@ -71,8 +74,21 @@ const mapDispatchToProps = (dispatch, props) => ({
    dispatch(changeComposeSpoilerText(checked));
  },

-  onPaste (files) {
-    dispatch(uploadCompose(files));
+  onPaste (e) {
+    if (e.clipboardData && e.clipboardData.files.length === 1) {
+      dispatch(uploadCompose(e.clipboardData.files));
+      e.preventDefault();
+    } else if (e.clipboardData && e.clipboardData.files.length === 0) {
+      const data = e.clipboardData.getData('text/plain');
+      if (!data.match(urlLikeRegex)) return;
+
+      try {
+        const url = new URL(data);
+        dispatch(pasteLinkCompose({ url }));
+      } catch {
+        return;
+      }
+    }
  },

  onPickEmoji (position, data, needsSpace) {
--- a/app/javascript/mastodon/features/directory/components/account_card.tsx
+++ b/app/javascript/mastodon/features/directory/components/account_card.tsx
@@ -2,6 +2,7 @@ import { FormattedMessage } from 'react-intl';

 import { Link } from 'react-router-dom';

+import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import { Avatar } from 'mastodon/components/avatar';
 import { DisplayName } from 'mastodon/components/display_name';
 import { FollowButton } from 'mastodon/components/follow_button';
@@ -39,9 +40,10 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
      </Link>

      {account.get('note').length > 0 && (
-        <div
-          className='account-card__bio translate animate-parent'
-          dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+        <EmojiHTML
+          className='account-card__bio translate'
+          htmlString={account.get('note_emojified')}
+          extraEmojis={account.get('emojis')}
        />
      )}

--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/app/javascript/mastodon/features/emoji/emoji.js
@@ -1,5 +1,6 @@
 import Trie from 'substring-trie';

+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 import { assetHost } from 'mastodon/utils/config';

 import { autoPlayGif } from '../../initial_state';
@@ -148,7 +149,17 @@ const emojifyNode = (node, customEmojis) => {
  }
 };

-const emojify = (str, customEmojis = {}) => {
+/**
+ * Legacy emoji processing function.
+ * @param {string} str
+ * @param {object} customEmojis
+ * @param {boolean} force If true, always emojify even if modern emoji is enabled
+ * @returns {string}
+ */
+const emojify = (str, customEmojis = {}, force = false) => {
+  if (isModernEmojiEnabled() && !force) {
+    return str;
+  }
  const wrapper = document.createElement('div');
  wrapper.innerHTML = str;

--- a/app/javascript/mastodon/features/emoji/normalize.ts
+++ b/app/javascript/mastodon/features/emoji/normalize.ts
@@ -154,15 +154,21 @@ export function cleanExtraEmojis(extraEmojis?: CustomEmojiMapArg) {
  if (!extraEmojis) {
    return null;
  }
-  if (!isList(extraEmojis)) {
-    return extraEmojis;
-  }
-  return extraEmojis
-    .toJSON()
-    .reduce<ExtraCustomEmojiMap>(
+  if (Array.isArray(extraEmojis)) {
+    return extraEmojis.reduce<ExtraCustomEmojiMap>(
      (acc, emoji) => ({ ...acc, [emoji.shortcode]: emoji }),
      {},
    );
+  }
+  if (isList(extraEmojis)) {
+    return extraEmojis
+      .toJS()
+      .reduce<ExtraCustomEmojiMap>(
+        (acc, emoji) => ({ ...acc, [emoji.shortcode]: emoji }),
+        {},
+      );
+  }
+  return extraEmojis;
 }

 function hexStringToNumbers(hexString: string): number[] {
--- a/app/javascript/mastodon/features/emoji/types.ts
+++ b/app/javascript/mastodon/features/emoji/types.ts
@@ -56,7 +56,9 @@ export type EmojiStateMap = LimitedCache<string, EmojiState>;

 export type CustomEmojiMapArg =
  | ExtraCustomEmojiMap
-  | ImmutableList<CustomEmoji>;
+  | ImmutableList<CustomEmoji>
+  | CustomEmoji[]
+  | ApiCustomEmojiJSON[];

 export type ExtraCustomEmojiMap = Record<
  string,
--- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
@@ -10,9 +10,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';

-import { Avatar } from '../../../components/avatar';
-import { DisplayName } from '../../../components/display_name';
-import { IconButton } from '../../../components/icon_button';
+import { Avatar } from '@/mastodon/components/avatar';
+import { DisplayName } from '@/mastodon/components/display_name';
+import { IconButton } from '@/mastodon/components/icon_button';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';

 const messages = defineMessages({
  authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -30,7 +31,6 @@ class AccountAuthorize extends ImmutablePureComponent {

  render () {
    const { intl, account, onAuthorize, onReject } = this.props;
-    const content = { __html: account.get('note_emojified') };

    return (
      <div className='account-authorize__wrapper'>
@@ -40,7 +40,11 @@ class AccountAuthorize extends ImmutablePureComponent {
            <DisplayName account={account} />
          </Link>

-          <div className='account__header__content translate' dangerouslySetInnerHTML={content} />
+          <EmojiHTML
+            className='account__header__content translate'
+            htmlString={account.get('note_emojified')}
+            extraEmojis={account.get('emojis')}
+          />
        </div>

        <div className='account--panel'>
--- a/app/javascript/mastodon/features/home_timeline/components/announcements/announcement.tsx
+++ b/app/javascript/mastodon/features/home_timeline/components/announcements/announcement.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import type { FC } from 'react';
+
+import { FormattedDate, FormattedMessage } from 'react-intl';
+
+import type { ApiAnnouncementJSON } from '@/mastodon/api_types/announcements';
+import { AnimateEmojiProvider } from '@/mastodon/components/emoji/context';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
+
+import { ReactionsBar } from './reactions';
+
+export interface IAnnouncement extends ApiAnnouncementJSON {
+  contentHtml: string;
+}
+
+interface AnnouncementProps {
+  announcement: IAnnouncement;
+  selected: boolean;
+}
+
+export const Announcement: FC<AnnouncementProps> = ({
+  announcement,
+  selected,
+}) => {
+  const [unread, setUnread] = useState(!announcement.read);
+  useEffect(() => {
+    // Only update `unread` marker once the announcement is out of view
+    if (!selected && unread !== !announcement.read) {
+      setUnread(!announcement.read);
+    }
+  }, [announcement.read, selected, unread]);
+
+  return (
+    <AnimateEmojiProvider className='announcements__item'>
+      <strong className='announcements__item__range'>
+        <FormattedMessage
+          id='announcement.announcement'
+          defaultMessage='Announcement'
+        />
+        <span>
+          {' · '}
+          <Timestamp announcement={announcement} />
+        </span>
+      </strong>
+
+      <EmojiHTML
+        className='announcements__item__content translate'
+        htmlString={announcement.contentHtml}
+        extraEmojis={announcement.emojis}
+      />
+
+      <ReactionsBar reactions={announcement.reactions} id={announcement.id} />
+
+      {unread && <span className='announcements__item__unread' />}
+    </AnimateEmojiProvider>
+  );
+};
+
+const Timestamp: FC<Pick<AnnouncementProps, 'announcement'>> = ({
+  announcement,
+}) => {
+  const startsAt = announcement.starts_at && new Date(announcement.starts_at);
+  const endsAt = announcement.ends_at && new Date(announcement.ends_at);
+  const now = new Date();
+  const hasTimeRange = startsAt && endsAt;
+  const skipTime = announcement.all_day;
+
+  if (hasTimeRange) {
+    const skipYear =
+      startsAt.getFullYear() === endsAt.getFullYear() &&
+      endsAt.getFullYear() === now.getFullYear();
+    const skipEndDate =
+      startsAt.getDate() === endsAt.getDate() &&
+      startsAt.getMonth() === endsAt.getMonth() &&
+      startsAt.getFullYear() === endsAt.getFullYear();
+    return (
+      <>
+        <FormattedDate
+          value={startsAt}
+          year={
+            skipYear || startsAt.getFullYear() === now.getFullYear()
+              ? undefined
+              : 'numeric'
+          }
+          month='short'
+          day='2-digit'
+          hour={skipTime ? undefined : '2-digit'}
+          minute={skipTime ? undefined : '2-digit'}
+        />{' '}
+        -{' '}
+        <FormattedDate
+          value={endsAt}
+          year={
+            skipYear || endsAt.getFullYear() === now.getFullYear()
+              ? undefined
+              : 'numeric'
+          }
+          month={skipEndDate ? undefined : 'short'}
+          day={skipEndDate ? undefined : '2-digit'}
+          hour={skipTime ? undefined : '2-digit'}
+          minute={skipTime ? undefined : '2-digit'}
+        />
+      </>
+    );
+  }
+  const publishedAt = new Date(announcement.published_at);
+  return (
+    <FormattedDate
+      value={publishedAt}
+      year={
+        publishedAt.getFullYear() === now.getFullYear() ? undefined : 'numeric'
+      }
+      month='short'
+      day='2-digit'
+      hour={skipTime ? undefined : '2-digit'}
+      minute={skipTime ? undefined : '2-digit'}
+    />
+  );
+};
--- a/app/javascript/mastodon/features/home_timeline/components/announcements/index.tsx
+++ b/app/javascript/mastodon/features/home_timeline/components/announcements/index.tsx
@@ -0,0 +1,118 @@
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import type { Map, List } from 'immutable';
+
+import ReactSwipeableViews from 'react-swipeable-views';
+
+import elephantUIPlane from '@/images/elephant_ui_plane.svg';
+import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';
+import { IconButton } from '@/mastodon/components/icon_button';
+import LegacyAnnouncements from '@/mastodon/features/getting_started/containers/announcements_container';
+import { mascot, reduceMotion } from '@/mastodon/initial_state';
+import { createAppSelector, useAppSelector } from '@/mastodon/store';
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+
+import type { IAnnouncement } from './announcement';
+import { Announcement } from './announcement';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
+  next: { id: 'lightbox.next', defaultMessage: 'Next' },
+});
+
+const announcementSelector = createAppSelector(
+  [(state) => state.announcements as Map<string, List<Map<string, unknown>>>],
+  (announcements) =>
+    (announcements.get('items')?.toJS() as IAnnouncement[] | undefined) ?? [],
+);
+
+export const ModernAnnouncements: FC = () => {
+  const intl = useIntl();
+
+  const announcements = useAppSelector(announcementSelector);
+  const emojis = useAppSelector((state) => state.custom_emojis);
+
+  const [index, setIndex] = useState(0);
+  const handleChangeIndex = useCallback(
+    (idx: number) => {
+      setIndex(idx % announcements.length);
+    },
+    [announcements.length],
+  );
+  const handleNextIndex = useCallback(() => {
+    setIndex((prevIndex) => (prevIndex + 1) % announcements.length);
+  }, [announcements.length]);
+  const handlePrevIndex = useCallback(() => {
+    setIndex((prevIndex) =>
+      prevIndex === 0 ? announcements.length - 1 : prevIndex - 1,
+    );
+  }, [announcements.length]);
+
+  if (announcements.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='announcements'>
+      <img
+        className='announcements__mastodon'
+        alt=''
+        draggable='false'
+        src={mascot ?? elephantUIPlane}
+      />
+
+      <div className='announcements__container'>
+        <CustomEmojiProvider emojis={emojis}>
+          <ReactSwipeableViews
+            animateHeight
+            animateTransitions={!reduceMotion}
+            index={index}
+            onChangeIndex={handleChangeIndex}
+          >
+            {announcements
+              .map((announcement, idx) => (
+                <Announcement
+                  key={announcement.id}
+                  announcement={announcement}
+                  selected={index === idx}
+                />
+              ))
+              .reverse()}
+          </ReactSwipeableViews>
+        </CustomEmojiProvider>
+
+        {announcements.length > 1 && (
+          <div className='announcements__pagination'>
+            <IconButton
+              disabled={announcements.length === 1}
+              title={intl.formatMessage(messages.previous)}
+              icon='chevron-left'
+              iconComponent={ChevronLeftIcon}
+              onClick={handlePrevIndex}
+            />
+            <span>
+              {index + 1} / {announcements.length}
+            </span>
+            <IconButton
+              disabled={announcements.length === 1}
+              title={intl.formatMessage(messages.next)}
+              icon='chevron-right'
+              iconComponent={ChevronRightIcon}
+              onClick={handleNextIndex}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const Announcements = isModernEmojiEnabled()
+  ? ModernAnnouncements
+  : LegacyAnnouncements;
--- a/app/javascript/mastodon/features/home_timeline/components/announcements/reactions.tsx
+++ b/app/javascript/mastodon/features/home_timeline/components/announcements/reactions.tsx
@@ -0,0 +1,108 @@
+import { useCallback, useMemo } from 'react';
+import type { FC, HTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+
+import type { AnimatedProps } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
+
+import { addReaction, removeReaction } from '@/mastodon/actions/announcements';
+import type { ApiAnnouncementReactionJSON } from '@/mastodon/api_types/announcements';
+import { AnimatedNumber } from '@/mastodon/components/animated_number';
+import { Emoji } from '@/mastodon/components/emoji';
+import { Icon } from '@/mastodon/components/icon';
+import EmojiPickerDropdown from '@/mastodon/features/compose/containers/emoji_picker_dropdown_container';
+import { isUnicodeEmoji } from '@/mastodon/features/emoji/utils';
+import { useAppDispatch } from '@/mastodon/store';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
+
+export const ReactionsBar: FC<{
+  reactions: ApiAnnouncementReactionJSON[];
+  id: string;
+}> = ({ reactions, id }) => {
+  const visibleReactions = useMemo(
+    () => reactions.filter((x) => x.count > 0),
+    [reactions],
+  );
+
+  const dispatch = useAppDispatch();
+  const handleEmojiPick = useCallback(
+    (emoji: { native: string }) => {
+      dispatch(addReaction(id, emoji.native.replaceAll(/:/g, '')));
+    },
+    [dispatch, id],
+  );
+
+  const transitions = useTransition(visibleReactions, {
+    from: {
+      scale: 0,
+    },
+    enter: {
+      scale: 1,
+    },
+    leave: {
+      scale: 0,
+    },
+    keys: visibleReactions.map((x) => x.name),
+  });
+
+  return (
+    <div
+      className={classNames('reactions-bar', {
+        'reactions-bar--empty': visibleReactions.length === 0,
+      })}
+    >
+      {transitions(({ scale }, reaction) => (
+        <Reaction
+          key={reaction.name}
+          reaction={reaction}
+          style={{ transform: scale.to((s) => `scale(${s})`) }}
+          id={id}
+        />
+      ))}
+
+      {visibleReactions.length < 8 && (
+        <EmojiPickerDropdown
+          onPickEmoji={handleEmojiPick}
+          button={<Icon id='plus' icon={AddIcon} />}
+        />
+      )}
+    </div>
+  );
+};
+
+const Reaction: FC<{
+  reaction: ApiAnnouncementReactionJSON;
+  id: string;
+  style: AnimatedProps<HTMLAttributes<HTMLButtonElement>>['style'];
+}> = ({ id, reaction, style }) => {
+  const dispatch = useAppDispatch();
+  const handleClick = useCallback(() => {
+    if (reaction.me) {
+      dispatch(removeReaction(id, reaction.name));
+    } else {
+      dispatch(addReaction(id, reaction.name));
+    }
+  }, [dispatch, id, reaction.me, reaction.name]);
+
+  const code = isUnicodeEmoji(reaction.name)
+    ? reaction.name
+    : `:${reaction.name}:`;
+
+  return (
+    <animated.button
+      className={classNames('reactions-bar__item', {
+        active: reaction.me,
+      })}
+      onClick={handleClick}
+      style={style}
+    >
+      <span className='reactions-bar__item__emoji'>
+        <Emoji code={code} />
+      </span>
+      <span className='reactions-bar__item__count'>
+        <AnimatedNumber value={reaction.count} />
+      </span>
+    </animated.button>
+  );
+};
--- a/app/javascript/mastodon/features/home_timeline/index.jsx
+++ b/app/javascript/mastodon/features/home_timeline/index.jsx
@@ -14,7 +14,6 @@ import { SymbolLogo } from 'mastodon/components/logo';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
 import { IconWithBadge } from 'mastodon/components/icon_with_badge';
 import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
-import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { criticalUpdatesPending } from 'mastodon/initial_state';
 import { withBreakpoint } from 'mastodon/features/ui/hooks/useBreakpoint';
@@ -27,6 +26,7 @@ import StatusListContainer from '../ui/containers/status_list_container';

 import { ColumnSettings } from './components/column_settings';
 import { CriticalUpdateBanner } from './components/critical_update_banner';
+import { Announcements } from './components/announcements';

 const messages = defineMessages({
  title: { id: 'column.home', defaultMessage: 'Home' },
@@ -162,7 +162,7 @@ class HomeTimeline extends PureComponent {
          pinned={pinned}
          multiColumn={multiColumn}
          extraButton={announcementsButton}
-          appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
+          appendContent={hasAnnouncements && showAnnouncements && <Announcements />}
        >
          <ColumnSettings />
        </ColumnHeader>
--- a/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx
@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';

 import type { List as ImmutableList, RecordOf } from 'immutable';

+import type { ApiMentionJSON } from '@/mastodon/api_types/statuses';
 import { AnimateEmojiProvider } from '@/mastodon/components/emoji/context';
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
@@ -18,7 +19,7 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';

 import { EmbeddedStatusContent } from './embedded_status_content';

-export type Mention = RecordOf<{ url: string; acct: string }>;
+export type Mention = RecordOf<ApiMentionJSON>;

 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
  statusId,
@@ -86,12 +87,9 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
  }

  // Assign status attributes to variables with a forced type, as status is not yet properly typed
-  const contentHtml = status.get('contentHtml') as string;
-  const contentWarning = status.get('spoilerHtml') as string;
+  const hasContentWarning = !!status.get('spoiler_text');
  const poll = status.get('poll');
-  const language = status.get('language') as string;
-  const mentions = status.get('mentions') as ImmutableList<Mention>;
-  const expanded = !status.get('hidden') || !contentWarning;
+  const expanded = !status.get('hidden') || !hasContentWarning;
  const mediaAttachmentsSize = (
    status.get('media_attachments') as ImmutableList<unknown>
  ).size;
@@ -109,20 +107,16 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
        <DisplayName account={account} />
      </div>

-      {contentWarning && (
-        <ContentWarning
-          text={contentWarning}
-          onClick={handleContentWarningClick}
-          expanded={expanded}
-        />
-      )}
+      <ContentWarning
+        status={status}
+        onClick={handleContentWarningClick}
+        expanded={expanded}
+      />

-      {(!contentWarning || expanded) && (
+      {(!hasContentWarning || expanded) && (
        <EmbeddedStatusContent
          className='notification-group__embedded-status__content reply-indicator__content translate'
-          content={contentHtml}
-          language={language}
-          mentions={mentions}
+          status={status}
        />
      )}

--- a/app/javascript/mastodon/features/notifications_v2/components/embedded_status_content.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/embedded_status_content.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';

 import { useHistory } from 'react-router-dom';

@@ -6,16 +6,22 @@ import type { List } from 'immutable';

 import type { History } from 'history';

+import type { ApiMentionJSON } from '@/mastodon/api_types/statuses';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
+import type { Status } from '@/mastodon/models/status';
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
+
 import type { Mention } from './embedded_status';

 const handleMentionClick = (
  history: History,
-  mention: Mention,
+  mention: ApiMentionJSON,
  e: MouseEvent,
 ) => {
  if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
    e.preventDefault();
-    history.push(`/@${mention.get('acct')}`);
+    history.push(`/@${mention.acct}`);
  }
 };

@@ -31,16 +37,26 @@ const handleHashtagClick = (
 };

 export const EmbeddedStatusContent: React.FC<{
-  content: string;
-  mentions: List<Mention>;
-  language: string;
+  status: Status;
  className?: string;
-}> = ({ content, mentions, language, className }) => {
+}> = ({ status, className }) => {
  const history = useHistory();

+  const mentions = useMemo(
+    () => (status.get('mentions') as List<Mention>).toJS(),
+    [status],
+  );
+  const htmlHandlers = useElementHandledLink({
+    hashtagAccountId: status.get('account') as string | undefined,
+    hrefToMentionAccountId(href) {
+      const mention = mentions.find((item) => item.url === href);
+      return mention?.id;
+    },
+  });
+
  const handleContentRef = useCallback(
    (node: HTMLDivElement | null) => {
-      if (!node) {
+      if (!node || isModernEmojiEnabled()) {
        return;
      }

@@ -53,7 +69,7 @@ export const EmbeddedStatusContent: React.FC<{

        link.classList.add('status-link');

-        const mention = mentions.find((item) => link.href === item.get('url'));
+        const mention = mentions.find((item) => link.href === item.url);

        if (mention) {
          link.addEventListener(
@@ -61,8 +77,8 @@ export const EmbeddedStatusContent: React.FC<{
            handleMentionClick.bind(null, history, mention),
            false,
          );
-          link.setAttribute('title', `@${mention.get('acct')}`);
-          link.setAttribute('href', `/@${mention.get('acct')}`);
+          link.setAttribute('title', `@${mention.acct}`);
+          link.setAttribute('href', `/@${mention.acct}`);
        } else if (
          link.textContent.startsWith('#') ||
          link.previousSibling?.textContent?.endsWith('#')
@@ -83,11 +99,12 @@ export const EmbeddedStatusContent: React.FC<{
  );

  return (
-    <div
+    <EmojiHTML
+      {...htmlHandlers}
      className={className}
      ref={handleContentRef}
-      lang={language}
-      dangerouslySetInnerHTML={{ __html: content }}
+      lang={status.get('language') as string}
+      htmlString={status.get('contentHtml') as string}
    />
  );
 };
--- a/app/javascript/mastodon/features/status/components/detailed_status.tsx
+++ b/app/javascript/mastodon/features/status/components/detailed_status.tsx
@@ -394,17 +394,13 @@ export const DetailedStatus: React.FC<{
          />
        )}

-        {status.get('spoiler_text').length > 0 &&
-          (!matchedFilters || showDespiteFilter) && (
-            <ContentWarning
-              text={
-                status.getIn(['translation', 'spoilerHtml']) ||
-                status.get('spoilerHtml')
-              }
-              expanded={expanded}
-              onClick={handleExpandedToggle}
-            />
-          )}
+        {(!matchedFilters || showDespiteFilter) && (
+          <ContentWarning
+            status={status}
+            expanded={expanded}
+            onClick={handleExpandedToggle}
+          />
+        )}

        {expanded && (
          <>
--- a/app/javascript/mastodon/features/status/components/refresh_controller.tsx
+++ b/app/javascript/mastodon/features/status/components/refresh_controller.tsx
@@ -5,6 +5,8 @@ import { useIntl, defineMessages } from 'react-intl';
 import {
  fetchContext,
  completeContextRefresh,
+  showPendingReplies,
+  clearPendingReplies,
 } from 'mastodon/actions/statuses';
 import type { AsyncRefreshHeader } from 'mastodon/api';
 import { apiGetAsyncRefresh } from 'mastodon/api/async_refreshes';
@@ -34,10 +36,6 @@ const messages = defineMessages({
    id: 'status.context.loading',
    defaultMessage: 'Loading',
  },
-  loadingMore: {
-    id: 'status.context.loading_more',
-    defaultMessage: 'Loading more replies',
-  },
  success: {
    id: 'status.context.loading_success',
    defaultMessage: 'All replies loaded',
@@ -52,36 +50,33 @@ const messages = defineMessages({
  },
 });

-type LoadingState =
-  | 'idle'
-  | 'more-available'
-  | 'loading-initial'
-  | 'loading-more'
-  | 'success'
-  | 'error';
+type LoadingState = 'idle' | 'more-available' | 'loading' | 'success' | 'error';

 export const RefreshController: React.FC<{
  statusId: string;
 }> = ({ statusId }) => {
-  const refresh = useAppSelector(
-    (state) => state.contexts.refreshing[statusId],
-  );
-  const currentReplyCount = useAppSelector(
-    (state) => state.contexts.replies[statusId]?.length ?? 0,
-  );
-  const autoRefresh = !currentReplyCount;
  const dispatch = useAppDispatch();
  const intl = useIntl();

-  const [loadingState, setLoadingState] = useState<LoadingState>(
-    refresh && autoRefresh ? 'loading-initial' : 'idle',
+  const refreshHeader = useAppSelector(
+    (state) => state.contexts.refreshing[statusId],
  );
+  const hasPendingReplies = useAppSelector(
+    (state) => !!state.contexts.pendingReplies[statusId]?.length,
+  );
+  const [partialLoadingState, setLoadingState] = useState<LoadingState>(
+    refreshHeader ? 'loading' : 'idle',
+  );
+  const loadingState = hasPendingReplies
+    ? 'more-available'
+    : partialLoadingState;

  const [wasDismissed, setWasDismissed] = useState(false);
  const dismissPrompt = useCallback(() => {
    setWasDismissed(true);
    setLoadingState('idle');
-  }, []);
+    dispatch(clearPendingReplies({ statusId }));
+  }, [dispatch, statusId]);

  useEffect(() => {
    let timeoutId: ReturnType<typeof setTimeout>;
@@ -89,36 +84,51 @@ export const RefreshController: React.FC<{
    const scheduleRefresh = (refresh: AsyncRefreshHeader) => {
      timeoutId = setTimeout(() => {
        void apiGetAsyncRefresh(refresh.id).then((result) => {
-          if (result.async_refresh.status === 'finished') {
-            dispatch(completeContextRefresh({ statusId }));
-
-            if (result.async_refresh.result_count > 0) {
-              if (autoRefresh) {
-                void dispatch(fetchContext({ statusId })).then(() => {
-                  setLoadingState('idle');
-                });
-              } else {
-                setLoadingState('more-available');
-              }
-            } else {
-              setLoadingState('idle');
-            }
-          } else {
+          // If the refresh status is not finished,
+          // schedule another refresh and exit
+          if (result.async_refresh.status !== 'finished') {
            scheduleRefresh(refresh);
+            return;
          }
+
+          // Refresh status is finished. The action below will clear `refreshHeader`
+          dispatch(completeContextRefresh({ statusId }));
+
+          // Exit if there's nothing to fetch
+          if (result.async_refresh.result_count === 0) {
+            setLoadingState('idle');
+            return;
+          }
+
+          // A positive result count means there _might_ be new replies,
+          // so we fetch the context in the background to check if there
+          // are any new replies.
+          // If so, they will populate `contexts.pendingReplies[statusId]`
+          void dispatch(fetchContext({ statusId, prefetchOnly: true }))
+            .then(() => {
+              // Reset loading state to `idle` – but if the fetch
+              // has resulted in new pending replies, the `hasPendingReplies`
+              // flag will switch the loading state to 'more-available'
+              setLoadingState('idle');
+            })
+            .catch(() => {
+              // Show an error if the fetch failed
+              setLoadingState('error');
+            });
        });
      }, refresh.retry * 1000);
    };

-    if (refresh && !wasDismissed) {
-      scheduleRefresh(refresh);
-      setLoadingState('loading-initial');
+    // Initialise a refresh
+    if (refreshHeader && !wasDismissed) {
+      scheduleRefresh(refreshHeader);
+      setLoadingState('loading');
    }

    return () => {
      clearTimeout(timeoutId);
    };
-  }, [dispatch, statusId, refresh, autoRefresh, wasDismissed]);
+  }, [dispatch, statusId, refreshHeader, wasDismissed]);

  useEffect(() => {
    // Hide success message after a short delay
@@ -134,20 +144,19 @@ export const RefreshController: React.FC<{
    return () => '';
  }, [loadingState]);

-  const handleClick = useCallback(() => {
-    setLoadingState('loading-more');
-
-    dispatch(fetchContext({ statusId }))
-      .then(() => {
-        setLoadingState('success');
-        return '';
-      })
-      .catch(() => {
-        setLoadingState('error');
-      });
+  useEffect(() => {
+    // Clear pending replies on unmount
+    return () => {
+      dispatch(clearPendingReplies({ statusId }));
+    };
  }, [dispatch, statusId]);

-  if (loadingState === 'loading-initial') {
+  const handleClick = useCallback(() => {
+    dispatch(showPendingReplies({ statusId }));
+    setLoadingState('success');
+  }, [dispatch, statusId]);
+
+  if (loadingState === 'loading') {
    return (
      <div
        className='load-more load-gap'
@@ -170,13 +179,6 @@ export const RefreshController: React.FC<{
        onDismiss={dismissPrompt}
        animateFrom='below'
      />
-      <AnimatedAlert
-        isLoading
-        withEntryDelay
-        isActive={loadingState === 'loading-more'}
-        message={intl.formatMessage(messages.loadingMore)}
-        animateFrom='below'
-      />
      <AnimatedAlert
        withEntryDelay
        isActive={loadingState === 'error'}
--- a/app/javascript/mastodon/features/status/index.jsx
+++ b/app/javascript/mastodon/features/status/index.jsx
@@ -603,7 +603,7 @@ class Status extends ImmutablePureComponent {
        />

        <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll} childRef={this.setContainerRef}>
-          <div className={classNames('scrollable item-list', { fullscreen })} ref={this.setContainerRef}>
+          <div className={classNames('item-list scrollable scrollable--flex', { fullscreen })} ref={this.setContainerRef}>
            {ancestors}

            <Hotkeys handlers={handlers}>
--- a/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
@@ -15,6 +15,8 @@ import InlineAccount from 'mastodon/components/inline_account';
 import MediaAttachments from 'mastodon/components/media_attachments';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import emojify from 'mastodon/features/emoji/emoji';
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';

 const mapStateToProps = (state, { statusId }) => ({
  language: state.getIn(['statuses', statusId, 'language']),
@@ -51,8 +53,8 @@ class CompareHistoryModal extends PureComponent {
      return obj;
    }, {});

-    const content = { __html: emojify(currentVersion.get('content'), emojiMap) };
-    const spoilerContent = { __html: emojify(escapeTextContentForBrowser(currentVersion.get('spoiler_text')), emojiMap) };
+    const content = emojify(currentVersion.get('content'), emojiMap);
+    const spoilerContent = emojify(escapeTextContentForBrowser(currentVersion.get('spoiler_text')), emojiMap);

    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} short={false} />;
    const formattedName = <InlineAccount accountId={currentVersion.get('account')} />;
@@ -65,43 +67,50 @@ class CompareHistoryModal extends PureComponent {

    return (
      <div className='modal-root__modal compare-history-modal'>
-        <div className='report-modal__target'>
-          <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
-          {label}
-        </div>
-
-        <div className='compare-history-modal__container'>
-          <div className='status__content'>
-            {currentVersion.get('spoiler_text').length > 0 && (
-              <>
-                <div className='translate' dangerouslySetInnerHTML={spoilerContent} lang={language} />
-                <hr />
-              </>
-            )}
-
-            <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} lang={language} />
-
-            {!!currentVersion.get('poll') && (
-              <div className='poll'>
-                <ul>
-                  {currentVersion.getIn(['poll', 'options']).map(option => (
-                    <li key={option.get('title')}>
-                      <span className='poll__input disabled' />
-
-                      <span
-                        className='poll__option__text translate'
-                        dangerouslySetInnerHTML={{ __html: emojify(escapeTextContentForBrowser(option.get('title')), emojiMap) }}
-                        lang={language}
-                      />
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            <MediaAttachments status={currentVersion} lang={language} />
+        <CustomEmojiProvider emojis={currentVersion.get('emojis')}>
+          <div className='report-modal__target'>
+            <IconButton className='report-modal__close' icon='times' iconComponent={CloseIcon} onClick={onClose} size={20} />
+            {label}
          </div>
-        </div>
+
+          <div className='compare-history-modal__container'>
+            <div className='status__content'>
+              {currentVersion.get('spoiler_text').length > 0 && (
+                <>
+                  <EmojiHTML className='translate' htmlString={spoilerContent} lang={language} />
+                  <hr />
+                </>
+              )}
+
+              <EmojiHTML
+                className='status__content__text status__content__text--visible translate'
+                htmlString={content}
+                lang={language}
+              />
+
+              {!!currentVersion.get('poll') && (
+                <div className='poll'>
+                  <ul>
+                    {currentVersion.getIn(['poll', 'options']).map(option => (
+                      <li key={option.get('title')}>
+                        <span className='poll__input disabled' />
+
+                        <EmojiHTML
+                          as="span"
+                          className='poll__option__text translate'
+                          htmlString={emojify(escapeTextContentForBrowser(option.get('title')), emojiMap)}
+                          lang={language}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+
+              <MediaAttachments status={currentVersion} lang={language} />
+            </div>
+          </div>
+        </CustomEmojiProvider>
      </div>
    );
  }
--- a/app/javascript/mastodon/hooks/useLinks.ts
+++ b/app/javascript/mastodon/hooks/useLinks.ts
@@ -7,6 +7,8 @@ import { isFulfilled, isRejected } from '@reduxjs/toolkit';
 import { openURL } from 'mastodon/actions/search';
 import { useAppDispatch } from 'mastodon/store';

+import { isModernEmojiEnabled } from '../utils/environment';
+
 const isMentionClick = (element: HTMLAnchorElement) =>
  element.classList.contains('mention') &&
  !element.classList.contains('hashtag');
@@ -53,6 +55,11 @@ export const useLinks = (skipHashtags?: boolean) => {

  const handleClick = useCallback(
    (e: React.MouseEvent) => {
+      // Exit early if modern emoji is enabled, as this is handled by HandledLink.
+      if (isModernEmojiEnabled()) {
+        return;
+      }
+
      const target = (e.target as HTMLElement).closest('a');

      if (!target || e.button !== 0 || e.ctrlKey || e.metaKey) {
--- a/app/javascript/mastodon/locales/be.json
+++ b/app/javascript/mastodon/locales/be.json
@@ -875,7 +875,6 @@
  "status.contains_quote": "Утрымлівае цытату",
  "status.context.loading": "Загружаюцца іншыя адказы",
  "status.context.loading_error": "Немагчыма загрузіць новыя адказы",
-  "status.context.loading_more": "Загружаюцца іншыя адказы",
  "status.context.loading_success": "Усе адказы загружаныя",
  "status.context.more_replies_found": "Знойдзеныя іншыя адказы",
  "status.context.retry": "Паспрабаваць зноў",
--- a/app/javascript/mastodon/locales/br.json
+++ b/app/javascript/mastodon/locales/br.json
@@ -28,6 +28,7 @@
  "account.disable_notifications": "Paouez d'am c'hemenn pa vez embannet traoù gant @{name}",
  "account.domain_blocking": "Domani stanket",
  "account.edit_profile": "Kemmañ ar profil",
+  "account.edit_profile_short": "Kemmañ",
  "account.enable_notifications": "Ma c'hemenn pa vez embannet traoù gant @{name}",
  "account.endorse": "Lakaat en a-raok war ar profil",
  "account.familiar_followers_one": "Heuliet gant {name1}",
@@ -39,6 +40,7 @@
  "account.featured_tags.last_status_never": "Embann ebet",
  "account.follow": "Heuliañ",
  "account.follow_back": "Heuliañ d'ho tro",
+  "account.follow_request_cancel_short": "Nullañ",
  "account.followers": "Tud koumanantet",
  "account.followers.empty": "Den na heul an implijer·ez-mañ c'hoazh.",
  "account.followers_counter": "{count, plural, one {{counter} heulier} two {{counter} heulier} few {{counter} heulier} many {{counter} heulier} other {{counter} heulier}}",
@@ -216,7 +218,12 @@
  "confirmations.remove_from_followers.title": "Dilemel an heulier·ez?",
  "confirmations.revoke_quote.confirm": "Dilemel an embannadur",
  "confirmations.revoke_quote.title": "Dilemel an embannadur?",
+  "confirmations.unblock.confirm": "Distankañ",
+  "confirmations.unblock.title": "Distankañ {name}?",
  "confirmations.unfollow.confirm": "Diheuliañ",
+  "confirmations.unfollow.title": "Diheuliañ {name}?",
+  "confirmations.withdraw_request.confirm": "Nullañ ar reked",
+  "confirmations.withdraw_request.title": "Nullañ ho reked da heuliañ {name}?",
  "content_warning.hide": "Kuzhat an embannadur",
  "content_warning.show": "Diskwel memes tra",
  "content_warning.show_more": "Diskouez muioc'h",
--- a/app/javascript/mastodon/locales/ca.json
+++ b/app/javascript/mastodon/locales/ca.json
@@ -871,7 +871,6 @@
  "status.contains_quote": "Conté una cita",
  "status.context.loading": "Es carreguen més respostes",
  "status.context.loading_error": "No s'han pogut carregar respostes noves",
-  "status.context.loading_more": "Es carreguen més respostes",
  "status.context.loading_success": "S'han carregat totes les respostes",
  "status.context.more_replies_found": "S'han trobat més respostes",
  "status.context.retry": "Torna-ho a provar",
--- a/app/javascript/mastodon/locales/cs.json
+++ b/app/javascript/mastodon/locales/cs.json
@@ -875,7 +875,6 @@
  "status.contains_quote": "Obsahuje citaci",
  "status.context.loading": "Načítání dalších odpovědí",
  "status.context.loading_error": "Nelze načíst nové odpovědi",
-  "status.context.loading_more": "Načítání dalších odpovědí",
  "status.context.loading_success": "Všechny odpovědi načteny",
  "status.context.more_replies_found": "Nalezeny další odpovědi",
  "status.context.retry": "Zkusit znovu",
--- a/app/javascript/mastodon/locales/cy.json
+++ b/app/javascript/mastodon/locales/cy.json
@@ -870,7 +870,6 @@
  "status.contains_quote": "Yn cynnwys dyfyniad",
  "status.context.loading": "Yn llwytho mwy o atebion",
  "status.context.loading_error": "Wedi methu llwytho atebion newydd",
-  "status.context.loading_more": "Yn llwytho mwy o atebion",
  "status.context.loading_success": "Wedi llwytho'r holl atebion",
  "status.context.more_replies_found": "Mwy o atebion wedi'u canfod",
  "status.context.retry": "Ceisio eto",
--- a/app/javascript/mastodon/locales/da.json
+++ b/app/javascript/mastodon/locales/da.json
@@ -875,7 +875,6 @@
  "status.contains_quote": "Indeholder citat",
  "status.context.loading": "Indlæser flere svar",
  "status.context.loading_error": "Kunne ikke indlæse nye svar",
-  "status.context.loading_more": "Indlæser flere svar",
  "status.context.loading_success": "Alle svar indlæst",
  "status.context.more_replies_found": "Flere svar fundet",
  "status.context.retry": "Prøv igen",
--- a/app/javascript/mastodon/locales/de.json
+++ b/app/javascript/mastodon/locales/de.json
@@ -875,7 +875,6 @@
  "status.contains_quote": "Enthält Zitat",
  "status.context.loading": "Weitere Antworten laden",
  "status.context.loading_error": "Weitere Antworten konnten nicht geladen werden",
-  "status.context.loading_more": "Weitere Antworten laden",
  "status.context.loading_success": "Alle weiteren Antworten geladen",
  "status.context.more_replies_found": "Weitere Antworten verfügbar",
  "status.context.retry": "Erneut versuchen",
--- a/app/javascript/mastodon/locales/el.json
+++ b/app/javascript/mastodon/locales/el.json
@@ -875,7 +875,6 @@
  "status.contains_quote": "Περιέχει παράθεση",
  "status.context.loading": "Φόρτωση περισσότερων απαντήσεων",
  "status.context.loading_error": "Αδυναμία φόρτωσης νέων απαντήσεων",
-  "status.context.loading_more": "Φόρτωση περισσότερων απαντήσεων",
  "status.context.loading_success": "Όλες οι απαντήσεις φορτώθηκαν",
  "status.context.more_replies_found": "Βρέθηκαν περισσότερες απαντήσεις",
  "status.context.retry": "Επανάληψη",
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -875,7 +875,6 @@
  "status.contains_quote": "Contains quote",
  "status.context.loading": "Loading more replies",
  "status.context.loading_error": "Couldn't load new replies",
-  "status.context.loading_more": "Loading more replies",
  "status.context.loading_success": "All replies loaded",
  "status.context.more_replies_found": "More replies found",
  "status.context.retry": "Retry",
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .4.6
 .4.7