4.2.0-Beta2 test update

app/chewy/accounts_index.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class AccountsIndex < Chewy::Index
-  settings index: { refresh_interval: '30s' }, analysis: {
+  settings index: index_preset(refresh_interval: '30s'), analysis: {
     filter: {
       english_stop: {
         type: 'stop',
@@ -33,7 +33,7 @@ class AccountsIndex < Chewy::Index
       },
 
       verbatim: {
-        tokenizer: 'whitespace',
+        tokenizer: 'standard',
         filter: %w(lowercase asciifolding cjk_width),
       },
 

app/chewy/instances_index.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 class InstancesIndex < Chewy::Index
-  settings index: { refresh_interval: '30s' }
+  settings index: index_preset(refresh_interval: '30s')
 
   index_scope ::Instance.searchable
 
   root date_detection: false do
-    field :domain, type: 'text', index_prefixes: { min_chars: 1 }
+    field :domain, type: 'text', index_prefixes: { min_chars: 1, max_chars: 5 }
     field :accounts_count, type: 'long'
   end
 end

app/chewy/statuses_index.rb

@@ -3,7 +3,7 @@
 class StatusesIndex < Chewy::Index
   include FormattingHelper
 
-  settings index: { refresh_interval: '30s' }, analysis: {
+  settings index: index_preset(refresh_interval: '30s', number_of_shards: 5), analysis: {
     filter: {
       english_stop: {
         type: 'stop',

app/chewy/tags_index.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class TagsIndex < Chewy::Index
-  settings index: { refresh_interval: '30s' }, analysis: {
+  settings index: index_preset(refresh_interval: '30s'), analysis: {
     analyzer: {
       content: {
         tokenizer: 'keyword',

app/controllers/accounts_controller.rb

@@ -12,7 +12,7 @@ class AccountsController < ApplicationController
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
 
   skip_around_action :set_locale, if: -> { [:json, :rss].include?(request.format&.to_sym) }
-  skip_before_action :require_functional!, unless: :whitelist_mode?
+  skip_before_action :require_functional!, unless: :limited_federation_mode?
 
   def show
     respond_to do |format|

app/controllers/admin/domain_blocks_controller.rb

@@ -40,7 +40,7 @@ module Admin
       end
 
       # Allow transparently upgrading a domain block
-      if existing_domain_block.present?
+      if existing_domain_block.present? && existing_domain_block.domain == TagManager.instance.normalize_domain(@domain_block.domain.strip)
         @domain_block = existing_domain_block
         @domain_block.assign_attributes(resource_params)
       end

app/controllers/admin/instances_controller.rb

@@ -65,7 +65,7 @@ module Admin
     end
 
     def filtered_instances
-      InstanceFilter.new(whitelist_mode? ? { allowed: true } : filter_params).results
+      InstanceFilter.new(limited_federation_mode? ? { allowed: true } : filter_params).results
     end
 
     def filter_params

app/controllers/api/base_controller.rb

@@ -8,7 +8,7 @@ class Api::BaseController < ApplicationController
   include AccessTokenTrackingConcern
   include ApiCachingConcern
 
-  skip_before_action :require_functional!, unless: :whitelist_mode?
+  skip_before_action :require_functional!, unless: :limited_federation_mode?
 
   before_action :require_authenticated_user!, if: :disallow_unauthenticated_api_access?
   before_action :require_not_suspended!
@@ -150,7 +150,7 @@ class Api::BaseController < ApplicationController
   end
 
   def disallow_unauthenticated_api_access?
-    ENV['DISALLOW_UNAUTHENTICATED_API_ACCESS'] == 'true' || Rails.configuration.x.whitelist_mode
+    ENV['DISALLOW_UNAUTHENTICATED_API_ACCESS'] == 'true' || Rails.configuration.x.limited_federation_mode
   end
 
   private

app/controllers/api/v1/instances/activity_controller.rb

@@ -3,7 +3,7 @@
 class Api::V1::Instances::ActivityController < Api::BaseController
   before_action :require_enabled_api!
 
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
 
   vary_by ''
 
@@ -33,6 +33,6 @@ class Api::V1::Instances::ActivityController < Api::BaseController
   end
 
   def require_enabled_api!
-    head 404 unless Setting.activity_api_enabled && !whitelist_mode?
+    head 404 unless Setting.activity_api_enabled && !limited_federation_mode?
   end
 end

app/controllers/api/v1/instances/domain_blocks_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::Instances::DomainBlocksController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
 
   before_action :require_enabled_api!
   before_action :set_domain_blocks

app/controllers/api/v1/instances/extended_descriptions_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::Instances::ExtendedDescriptionsController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
   skip_around_action :set_locale
 
   before_action :set_extended_description
@@ -10,7 +10,7 @@ class Api::V1::Instances::ExtendedDescriptionsController < Api::BaseController
 
   # Override `current_user` to avoid reading session cookies unless in whitelist mode
   def current_user
-    super if whitelist_mode?
+    super if limited_federation_mode?
   end
 
   def show

app/controllers/api/v1/instances/languages_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Api::V1::Instances::LanguagesController < Api::BaseController
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
+  skip_around_action :set_locale
+
+  before_action :set_languages
+
+  vary_by ''
+
+  def show
+    cache_even_if_authenticated!
+    render json: @languages, each_serializer: REST::LanguageSerializer
+  end
+
+  private
+
+  def set_languages
+    @languages = LanguagesHelper::SUPPORTED_LOCALES.keys.map { |code| LanguagePresenter.new(code) }
+  end
+end

app/controllers/api/v1/instances/peers_controller.rb

@@ -3,14 +3,14 @@
 class Api::V1::Instances::PeersController < Api::BaseController
   before_action :require_enabled_api!
 
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
   skip_around_action :set_locale
 
   vary_by ''
 
   # Override `current_user` to avoid reading session cookies unless in whitelist mode
   def current_user
-    super if whitelist_mode?
+    super if limited_federation_mode?
   end
 
   def index
@@ -21,6 +21,6 @@ class Api::V1::Instances::PeersController < Api::BaseController
   private
 
   def require_enabled_api!
-    head 404 unless Setting.peers_api_enabled && !whitelist_mode?
+    head 404 unless Setting.peers_api_enabled && !limited_federation_mode?
   end
 end

app/controllers/api/v1/instances/privacy_policies_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::Instances::PrivacyPoliciesController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
 
   before_action :set_privacy_policy
 

app/controllers/api/v1/instances/rules_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::Instances::RulesController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
   skip_around_action :set_locale
 
   before_action :set_rules
@@ -10,7 +10,7 @@ class Api::V1::Instances::RulesController < Api::BaseController
 
   # Override `current_user` to avoid reading session cookies unless in whitelist mode
   def current_user
-    super if whitelist_mode?
+    super if limited_federation_mode?
   end
 
   def index

app/controllers/api/v1/instances/translation_languages_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::Instances::TranslationLanguagesController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
 
   before_action :set_languages
 

app/controllers/api/v1/instances_controller.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 class Api::V1::InstancesController < Api::BaseController
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
   skip_around_action :set_locale
 
   vary_by ''
 
   # Override `current_user` to avoid reading session cookies unless in whitelist mode
   def current_user
-    super if whitelist_mode?
+    super if limited_federation_mode?
   end
 
   def show

app/controllers/api/v1/peers/search_controller.rb

@@ -4,7 +4,7 @@ class Api::V1::Peers::SearchController < Api::BaseController
   before_action :require_enabled_api!
   before_action :set_domains
 
-  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+  skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
   skip_around_action :set_locale
 
   vary_by ''
@@ -17,7 +17,7 @@ class Api::V1::Peers::SearchController < Api::BaseController
   private
 
   def require_enabled_api!
-    head 404 unless Setting.peers_api_enabled && !whitelist_mode?
+    head 404 unless Setting.peers_api_enabled && !limited_federation_mode?
   end
 
   def set_domains
@@ -27,7 +27,7 @@ class Api::V1::Peers::SearchController < Api::BaseController
       @domains = InstancesIndex.query(function_score: {
         query: {
           prefix: {
-            domain: params[:q],
+            domain: TagManager.instance.normalize_domain(params[:q].strip),
           },
         },
 

app/controllers/api/v1/profile/avatars_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Api::V1::Profile::AvatarsController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }
+  before_action :require_user!
+
+  def destroy
+    @account = current_account
+    UpdateAccountService.new.call(@account, { avatar: nil }, raise_error: true)
+    ActivityPub::UpdateDistributionWorker.perform_async(@account.id)
+    render json: @account, serializer: REST::CredentialAccountSerializer
+  end
+end

app/controllers/api/v1/profile/headers_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Api::V1::Profile::HeadersController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }
+  before_action :require_user!
+
+  def destroy
+    @account = current_account
+    UpdateAccountService.new.call(@account, { header: nil }, raise_error: true)
+    ActivityPub::UpdateDistributionWorker.perform_async(@account.id)
+    render json: @account, serializer: REST::CredentialAccountSerializer
+  end
+end

app/controllers/application_controller.rb

@@ -21,7 +21,7 @@ class ApplicationController < ActionController::Base
   helper_method :use_seamless_external_login?
   helper_method :omniauth_only?
   helper_method :sso_account_settings
-  helper_method :whitelist_mode?
+  helper_method :limited_federation_mode?
   helper_method :body_class_string
   helper_method :skip_csrf_meta_tags?
 
@@ -54,7 +54,7 @@ class ApplicationController < ActionController::Base
   private
 
   def authorized_fetch_mode?
-    ENV['AUTHORIZED_FETCH'] == 'true' || Rails.configuration.x.whitelist_mode
+    ENV['AUTHORIZED_FETCH'] == 'true' || Rails.configuration.x.limited_federation_mode
   end
 
   def public_fetch_mode?

app/controllers/concerns/account_owned_concern.rb

@@ -4,7 +4,7 @@ module AccountOwnedConcern
   extend ActiveSupport::Concern
 
   included do
-    before_action :authenticate_user!, if: -> { whitelist_mode? && request.format != :json }
+    before_action :authenticate_user!, if: -> { limited_federation_mode? && request.format != :json }
     before_action :set_account, if: :account_required?
     before_action :check_account_approval, if: :account_required?
     before_action :check_account_suspension, if: :account_required?

app/controllers/concerns/api_caching_concern.rb

@@ -8,6 +8,6 @@ module ApiCachingConcern
   end
 
   def cache_even_if_authenticated!
-    expires_in(5.minutes, public: true, stale_while_revalidate: 30.seconds, stale_if_error: 1.day) unless whitelist_mode?
+    expires_in(5.minutes, public: true, stale_while_revalidate: 30.seconds, stale_if_error: 1.day) unless limited_federation_mode?
   end
 end

app/controllers/concerns/captcha_concern.rb

@@ -42,7 +42,7 @@ module CaptchaConcern
   end
 
   def extend_csp_for_captcha!
-    policy = request.content_security_policy
+    policy = request.content_security_policy&.clone
 
     return unless captcha_required? && policy.present?
 
@@ -54,6 +54,8 @@ module CaptchaConcern
 
       policy.send(directive, *values)
     end
+
+    request.content_security_policy = policy
   end
 
   def render_captcha

app/controllers/concerns/web_app_controller_concern.rb

@@ -12,7 +12,7 @@ module WebAppControllerConcern
   end
 
   def skip_csrf_meta_tags?
-    current_user.nil?
+    !(ENV['OMNIAUTH_ONLY'] == 'true' && Devise.omniauth_providers.length == 1) && current_user.nil?
   end
 
   def set_app_body_class

app/controllers/follower_accounts_controller.rb

@@ -10,7 +10,7 @@ class FollowerAccountsController < ApplicationController
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
 
   skip_around_action :set_locale, if: -> { request.format == :json }
-  skip_before_action :require_functional!, unless: :whitelist_mode?
+  skip_before_action :require_functional!, unless: :limited_federation_mode?
 
   def index
     respond_to do |format|

app/controllers/following_accounts_controller.rb

@@ -10,7 +10,7 @@ class FollowingAccountsController < ApplicationController
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
 
   skip_around_action :set_locale, if: -> { request.format == :json }
-  skip_before_action :require_functional!, unless: :whitelist_mode?
+  skip_before_action :require_functional!, unless: :limited_federation_mode?
 
   def index
     respond_to do |format|

app/controllers/mail_subscriptions_controller.rb

@@ -9,6 +9,8 @@ class MailSubscriptionsController < ApplicationController
   before_action :set_user
   before_action :set_type
 
+  protect_from_forgery with: :null_session
+
   def show; end
 
   def create
@@ -20,6 +22,7 @@ class MailSubscriptionsController < ApplicationController
 
   def set_user
     @user = GlobalID::Locator.locate_signed(params[:token], for: 'unsubscribe')
+    not_found unless @user
   end
 
   def set_body_classes
@@ -35,7 +38,7 @@ class MailSubscriptionsController < ApplicationController
     when 'follow', 'reblog', 'favourite', 'mention', 'follow_request'
       "notification_emails.#{params[:type]}"
     else
-      raise ArgumentError
+      not_found
     end
   end
 end

app/controllers/media_controller.rb

@@ -3,9 +3,9 @@
 class MediaController < ApplicationController
   include Authorization
 
-  skip_before_action :require_functional!, unless: :whitelist_mode?
+  skip_before_action :require_functional!, unless: :limited_federation_mode?
 
-  before_action :authenticate_user!, if: :whitelist_mode?
+  before_action :authenticate_user!, if: :limited_federation_mode?
   before_action :set_media_attachment
   before_action :verify_permitted_status!
   before_action :check_playable, only: :player

app/controllers/media_proxy_controller.rb

@@ -8,7 +8,7 @@ class MediaProxyController < ApplicationController
 
   skip_before_action :require_functional!
 
-  before_action :authenticate_user!, if: :whitelist_mode?
+  before_action :authenticate_user!, if: :limited_federation_mode?
 
   rescue_from ActiveRecord::RecordInvalid, with: :not_found
   rescue_from Mastodon::UnexpectedResponseError, with: :not_found

app/controllers/settings/privacy_controller.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Settings::PrivacyController < Settings::BaseController
+  before_action :set_account
+
+  def show; end
+
+  def update
+    if UpdateAccountService.new.call(@account, account_params.except(:settings))
+      current_user.update!(settings_attributes: account_params[:settings])
+      ActivityPub::UpdateDistributionWorker.perform_async(@account.id)
+      redirect_to settings_privacy_path, notice: I18n.t('generic.changes_saved_msg')
+    else
+      render :show
+    end
+  end
+
+  private
+
+  def account_params
+    params.require(:account).permit(:discoverable, :unlocked, :show_collections, settings: UserSettings.keys)
+  end
+
+  def set_account
+    @account = current_account
+  end
+end

app/controllers/settings/profiles_controller.rb

@@ -20,7 +20,7 @@ class Settings::ProfilesController < Settings::BaseController
   private
 
   def account_params
-    params.require(:account).permit(:display_name, :note, :avatar, :header, :locked, :bot, :discoverable, :hide_collections, fields_attributes: [:name, :value])
+    params.require(:account).permit(:display_name, :note, :avatar, :header, :bot, fields_attributes: [:name, :value])
   end
 
   def set_account

app/controllers/statuses_controller.rb

@@ -17,7 +17,7 @@ class StatusesController < ApplicationController
   after_action :set_link_headers
 
   skip_around_action :set_locale, if: -> { request.format == :json }
-  skip_before_action :require_functional!, only: [:show, :embed], unless: :whitelist_mode?
+  skip_before_action :require_functional!, only: [:show, :embed], unless: :limited_federation_mode?
 
   content_security_policy only: :embed do |policy|
     policy.frame_ancestors(false)

app/controllers/tags_controller.rb

@@ -10,13 +10,13 @@ class TagsController < ApplicationController
   vary_by -> { public_fetch_mode? ? 'Accept, Accept-Language, Cookie' : 'Accept, Accept-Language, Cookie, Signature' }
 
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
-  before_action :authenticate_user!, if: :whitelist_mode?
+  before_action :authenticate_user!, if: :limited_federation_mode?
   before_action :set_local
   before_action :set_tag
   before_action :set_statuses, if: -> { request.format == :rss }
   before_action :set_instance_presenter
 
-  skip_before_action :require_functional!, unless: :whitelist_mode?
+  skip_before_action :require_functional!, unless: :limited_federation_mode?
 
   def show
     respond_to do |format|

app/helpers/context_helper.rb

@@ -21,6 +21,8 @@ module ContextHelper
     focal_point: { 'toot' => 'http://joinmastodon.org/ns#', 'focalPoint' => { '@container' => '@list', '@id' => 'toot:focalPoint' } },
     blurhash: { 'toot' => 'http://joinmastodon.org/ns#', 'blurhash' => 'toot:blurhash' },
     discoverable: { 'toot' => 'http://joinmastodon.org/ns#', 'discoverable' => 'toot:discoverable' },
+    indexable: { 'toot' => 'http://joinmastodon.org/ns#', 'indexable' => 'toot:indexable' },
+    memorial: { 'toot' => 'http://joinmastodon.org/ns#', 'memorial' => 'toot:memorial' },
     voters_count: { 'toot' => 'http://joinmastodon.org/ns#', 'votersCount' => 'toot:votersCount' },
     olm: {
       'toot' => 'http://joinmastodon.org/ns#', 'Device' => 'toot:Device', 'Ed25519Signature' => 'toot:Ed25519Signature', 'Ed25519Key' => 'toot:Ed25519Key', 'Curve25519Key' => 'toot:Curve25519Key', 'EncryptedMessage' => 'toot:EncryptedMessage', 'publicKeyBase64' => 'toot:publicKeyBase64', 'deviceId' => 'toot:deviceId',

app/helpers/domain_control_helper.rb

@@ -10,14 +10,14 @@ module DomainControlHelper
                uri_or_domain
              end
 
-    if whitelist_mode?
+    if limited_federation_mode?
       !DomainAllow.allowed?(domain)
     else
       DomainBlock.blocked?(domain)
     end
   end
 
-  def whitelist_mode?
-    Rails.configuration.x.whitelist_mode
+  def limited_federation_mode?
+    Rails.configuration.x.limited_federation_mode
   end
 end

app/helpers/languages_helper.rb

@@ -188,6 +188,7 @@ module LanguagesHelper
 
   ISO_639_3 = {
     ast: ['Asturian', 'Asturianu'].freeze,
+    chr: ['Cherokee', 'ᏣᎳᎩ ᎦᏬᏂᎯᏍᏗ'].freeze,
     ckb: ['Sorani (Kurdish)', 'سۆرانی'].freeze,
     cnr: ['Montenegrin', 'crnogorski'].freeze,
     jbo: ['Lojban', 'la .lojban.'].freeze,
@@ -200,11 +201,22 @@ module LanguagesHelper
     smj: ['Lule Sami', 'Julevsámegiella'].freeze,
     szl: ['Silesian', 'ślůnsko godka'].freeze,
     tok: ['Toki Pona', 'toki pona'].freeze,
+    xal: ['Kalmyk', 'Хальмг келн'].freeze,
     zba: ['Balaibalan', 'باليبلن'].freeze,
     zgh: ['Standard Moroccan Tamazight', 'ⵜⴰⵎⴰⵣⵉⵖⵜ'].freeze,
   }.freeze
 
-  SUPPORTED_LOCALES = {}.merge(ISO_639_1).merge(ISO_639_3).freeze
+  # e.g. For Chinese, which is not a language,
+  # but a language family in spite of sharing the main locale code
+  # We need to be able to filter these
+  ISO_639_1_REGIONAL = {
+    'zh-CN': ['Chinese (China)', '简体中文'].freeze,
+    'zh-HK': ['Chinese (Hong Kong)', '繁體中文（香港）'].freeze,
+    'zh-TW': ['Chinese (Taiwan)', '繁體中文（臺灣）'].freeze,
+    'zh-YUE': ['Cantonese', '廣東話'].freeze,
+  }.freeze
+
+  SUPPORTED_LOCALES = {}.merge(ISO_639_1).merge(ISO_639_1_REGIONAL).merge(ISO_639_3).freeze
 
   # For ISO-639-1 and ISO-639-3 language codes, we have their official
   # names, but for some translations, we need the names of the
@@ -217,9 +229,6 @@ module LanguagesHelper
     'pt-BR': 'Português (Brasil)',
     'pt-PT': 'Português (Portugal)',
     'sr-Latn': 'Srpski (latinica)',
-    'zh-CN': '简体中文',
-    'zh-HK': '繁體中文（香港）',
-    'zh-TW': '繁體中文（臺灣）',
   }.freeze
 
   def native_locale_name(locale)

app/javascript/core/settings.js

@@ -18,22 +18,14 @@ delegate(document, '#account_display_name', 'input', ({ target }) => {
   }
 });
 
-delegate(document, '#account_avatar', 'change', ({ target }) => {
-  const avatar = document.querySelector('.card .avatar img');
+delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
+  const avatar = document.getElementById(target.id + '-preview');
   const [file] = target.files || [];
   const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
 
   avatar.src = url;
 });
 
-delegate(document, '#account_header', 'change', ({ target }) => {
-  const header = document.querySelector('.card .card__img img');
-  const [file] = target.files || [];
-  const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
-
-  header.src = url;
-});
-
 delegate(document, '#account_locked', 'change', ({ target }) => {
   const lock = document.querySelector('.card .display-name i');
 

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -75,7 +75,10 @@ export function normalizeStatus(status, normalOldStatus, settings) {
     normalStatus.contentHtml = normalOldStatus.get('contentHtml');
     normalStatus.spoilerHtml = normalOldStatus.get('spoilerHtml');
     normalStatus.hidden = normalOldStatus.get('hidden');
-    normalStatus.translation = normalOldStatus.get('translation');
+
+    if (normalOldStatus.get('translation')) {
+      normalStatus.translation = normalOldStatus.get('translation');
+    }
   } else {
     const spoilerText   = normalStatus.spoiler_text || '';
     const searchContent = ([spoilerText, status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');

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

@@ -157,7 +157,7 @@ export const expandHomeTimeline            = ({ maxId } = {}, done = noOp) => ex
 export const expandPublicTimeline          = ({ maxId, onlyMedia, onlyRemote, allowLocalOnly } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, allow_local_only: !!allowLocalOnly, max_id: maxId, only_media: !!onlyMedia }, done);
 export const expandCommunityTimeline       = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done);
 export const expandDirectTimeline          = ({ maxId } = {}, done = noOp) => expandTimeline('direct', '/api/v1/timelines/direct', { max_id: maxId }, done);
-export const expandAccountTimeline         = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, tagged, max_id: maxId });
+export const expandAccountTimeline         = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, exclude_reblogs: withReplies, tagged, max_id: maxId });
 export const expandAccountFeaturedTimeline = (accountId, { tagged } = {}) => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true, tagged });
 export const expandAccountMediaTimeline    = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 });
 export const expandListTimeline            = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done);

app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import api from 'flavours/glitch/api';
 
 const messages = defineMessages({
+  legal: { id: 'report.categories.legal', defaultMessage: 'Legal' },
   other: { id: 'report.categories.other', defaultMessage: 'Other' },
   spam: { id: 'report.categories.spam', defaultMessage: 'Spam' },
   violation: { id: 'report.categories.violation', defaultMessage: 'Content violates one or more server rules' },
@@ -150,6 +151,7 @@ class ReportReasonSelector extends PureComponent {
     return (
       <div className='report-reason-selector'>
         <Category id='other' text={intl.formatMessage(messages.other)} selected={category === 'other'} onSelect={this.handleSelect} disabled={disabled} />
+        <Category id='legal' text={intl.formatMessage(messages.legal)} selected={category === 'legal'} onSelect={this.handleSelect} disabled={disabled} />
         <Category id='spam' text={intl.formatMessage(messages.spam)} selected={category === 'spam'} onSelect={this.handleSelect} disabled={disabled} />
         <Category id='violation' text={intl.formatMessage(messages.violation)} selected={category === 'violation'} onSelect={this.handleSelect} disabled={disabled}>
           {rules.map(rule => <Rule key={rule.id} id={rule.id} text={rule.text} selected={rule_ids.includes(rule.id)} onToggle={this.handleToggle} disabled={disabled} />)}

app/javascript/flavours/glitch/components/column.jsx

@@ -18,7 +18,19 @@ export default class Column extends PureComponent {
   };
 
   scrollTop () {
-    const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable');
+    let scrollable = null;
+
+    if (this.props.bindToDocument) {
+      scrollable = document.scrollingElement;
+    } else {
+      scrollable = this.node.querySelector('.scrollable');
+
+      // Some columns have nested `.scrollable` containers, with the outer one
+      // being a wrapper while the actual scrollable content is deeper.
+      if (scrollable.classList.contains('scrollable--flex')) {
+        scrollable = scrollable?.querySelector('.scrollable') || scrollable;
+      }
+   }
 
     if (!scrollable) {
       return;

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

@@ -196,9 +196,9 @@ class Header extends ImmutablePureComponent {
       if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded
         actionBtn = '';
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className={classNames({ 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
+        actionBtn = <Button text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
+        actionBtn = <Button className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }

app/javascript/flavours/glitch/features/explore/components/story.jsx

@@ -23,6 +23,7 @@ export default class Story extends PureComponent {
     author: PropTypes.string,
     sharedTimes: PropTypes.number,
     thumbnail: PropTypes.string,
+    thumbnailDescription: PropTypes.string,
     blurhash: PropTypes.string,
     expanded: PropTypes.bool,
   };
@@ -34,7 +35,7 @@ export default class Story extends PureComponent {
   handleImageLoad = () => this.setState({ thumbnailLoaded: true });
 
   render () {
-    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, blurhash } = this.props;
+    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, thumbnailDescription, blurhash } = this.props;
 
     const { thumbnailLoaded } = this.state;
 
@@ -50,7 +51,7 @@ export default class Story extends PureComponent {
           {thumbnail ? (
             <>
               <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
-              <img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' />
+              <img src={thumbnail} onLoad={this.handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
             </>
           ) : <Skeleton />}
         </div>

app/javascript/flavours/glitch/features/explore/links.jsx

@@ -67,6 +67,7 @@ class Links extends PureComponent {
             author={link.get('author_name')}
             sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1}
             thumbnail={link.get('image')}
+            thumbnailDescription={link.get('image_description')}
             blurhash={link.get('blurhash')}
           />
         ))}

app/javascript/flavours/glitch/features/explore/results.jsx

@@ -110,10 +110,10 @@ class Results extends PureComponent {
     return (
       <>
         <div className='account__section-headline'>
-          <button onClick={this.handleSelectAll} className={type === 'all' && 'active'}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
-          <button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
-          <button onClick={this.handleSelectHashtags} className={type === 'hashtags' && 'active'}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
-          <button onClick={this.handleSelectStatuses} className={type === 'statuses' && 'active'}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
+          <button onClick={this.handleSelectAll} className={type === 'all' ? 'active' : undefined}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
+          <button onClick={this.handleSelectAccounts} className={type === 'accounts' ? 'active' : undefined}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
+          <button onClick={this.handleSelectHashtags} className={type === 'hashtags' ? 'active' : undefined}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
+          <button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
         </div>
 
         <div className='explore__search-results'>

app/javascript/flavours/glitch/features/hashtag_timeline/components/hashtag_header.jsx

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import Button from 'flavours/glitch/components/button';
+import { ShortNumber } from 'flavours/glitch/components/short_number';
+
+const messages = defineMessages({
+  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
+  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
+});
+
+const usesRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='hashtag.counter_by_uses'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+const peopleRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='hashtag.counter_by_accounts'
+    defaultMessage='{count, plural, one {{counter} participant} other {{counter} participants}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+const usesTodayRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='hashtag.counter_by_uses_today'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}} today'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const HashtagHeader = injectIntl(({ tag, intl, disabled, onClick }) => {
+  if (!tag) {
+    return null;
+  }
+
+  const [uses, people] = tag.get('history').reduce((arr, day) => [arr[0] + day.get('uses') * 1, arr[1] + day.get('accounts') * 1], [0, 0]);
+  const dividingCircle = <span aria-hidden>{' · '}</span>;
+
+  return (
+    <div className='hashtag-header'>
+      <div className='hashtag-header__header'>
+        <h1>#{tag.get('name')}</h1>
+        <Button onClick={onClick} text={intl.formatMessage(tag.get('following') ? messages.unfollowHashtag : messages.followHashtag)} disabled={disabled} />
+      </div>
+
+      <div>
+        <ShortNumber value={uses} renderer={usesRenderer} />
+        {dividingCircle}
+        <ShortNumber value={people} renderer={peopleRenderer} />
+        {dividingCircle}
+        <ShortNumber value={tag.getIn(['history', 0, 'uses']) * 1} renderer={usesTodayRenderer} />
+      </div>
+    </div>
+  );
+});
+
+HashtagHeader.propTypes = {
+  tag: ImmutablePropTypes.map,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  intl: PropTypes.object,
+};

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

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
-import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -17,17 +16,11 @@ import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/ac
 import { expandHashtagTimeline, clearTimeline } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import { Icon } from 'flavours/glitch/components/icon';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 
+import { HashtagHeader } from './components/hashtag_header';
 import ColumnSettingsContainer from './containers/column_settings_container';
 
-
-const messages = defineMessages({
-  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
-  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
-});
-
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}${props.params.local ? ':local' : ''}`, 'unread']) > 0,
   tag: state.getIn(['tags', props.params.id]),
@@ -48,7 +41,6 @@ class HashtagTimeline extends PureComponent {
     hasUnread: PropTypes.bool,
     tag: ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
-    intl: PropTypes.object,
   };
 
   handlePin = () => {
@@ -188,27 +180,11 @@ class HashtagTimeline extends PureComponent {
   };
 
   render () {
-    const { hasUnread, columnId, multiColumn, tag, intl } = this.props;
+    const { hasUnread, columnId, multiColumn, tag } = this.props;
     const { id, local } = this.props.params;
     const pinned = !!columnId;
     const { signedIn } = this.context.identity;
 
-    let followButton;
-
-    if (tag) {
-      const following = tag.get('following');
-
-      const classes = classNames('column-header__button', {
-        active: following,
-      });
-
-      followButton = (
-        <button className={classes} onClick={this.handleFollow} disabled={!signedIn} title={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)} aria-label={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)}>
-          <Icon id={following ? 'user-times' : 'user-plus'} fixedWidth className='column-header__icon' />
-        </button>
-      );
-    }
-
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={`#${id}`}>
         <ColumnHeader
@@ -220,13 +196,14 @@ class HashtagTimeline extends PureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
-          extraButton={followButton}
           showBackButton
         >
           {columnId && <ColumnSettingsContainer columnId={columnId} />}
         </ColumnHeader>
 
         <StatusListContainer
+          prepend={pinned ? null : <HashtagHeader tag={tag} disabled={!signedIn} onClick={this.handleFollow} />}
+          alwaysPrepend
           trackScroll={!pinned}
           scrollKey={`hashtag_timeline-${columnId}`}
           timelineId={`hashtag:${id}${local ? ':local' : ''}`}
@@ -245,4 +222,4 @@ class HashtagTimeline extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(injectIntl(HashtagTimeline));
+export default connect(mapStateToProps)(HashtagTimeline);

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

@@ -13,7 +13,7 @@ import { openModal, closeModal } from 'flavours/glitch/actions/modal';
 import api from 'flavours/glitch/api';
 import Button from 'flavours/glitch/components/button';
 import { Icon } from 'flavours/glitch/components/icon';
-import { registrationsOpen } from 'flavours/glitch/initial_state';
+import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   loginPrompt: { id: 'interaction_modal.login.prompt', defaultMessage: 'Domain of your home server, e.g. mastodon.social' },
@@ -21,12 +21,16 @@ const messages = defineMessages({
 
 const mapStateToProps = (state, { accountId }) => ({
   displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
+  signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
 });
 
 const mapDispatchToProps = (dispatch) => ({
   onSignupClick() {
-    dispatch(closeModal());
-    dispatch(openModal('CLOSED_REGISTRATIONS'));
+    dispatch(closeModal({
+        modalType: undefined,
+        ignoreFocus: false,
+      }));
+    dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
   },
 });
 
@@ -250,6 +254,9 @@ class LoginForm extends React.PureComponent {
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
             onKeyDown={this.handleKeyDown}
+            autocomplete='off'
+            autocapitalize='off'
+            spellcheck='false'
           />
 
           <Button onClick={this.handleSubmit} disabled={isSubmitting}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
@@ -291,6 +298,7 @@ class InteractionModal extends React.PureComponent {
     url: PropTypes.string,
     type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
     onSignupClick: PropTypes.func.isRequired,
+    signupUrl: PropTypes.string.isRequired,
   };
 
   handleSignupClick = () => {
@@ -298,7 +306,7 @@ class InteractionModal extends React.PureComponent {
   };
 
   render () {
-    const { url, type, displayNameHtml } = this.props;
+    const { url, type, displayNameHtml, signupUrl } = this.props;
 
     const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
 
@@ -329,9 +337,15 @@ class InteractionModal extends React.PureComponent {
 
     let signupButton;
 
-    if (registrationsOpen) {
+    if (sso_redirect) {
       signupButton = (
-        <a href='/auth/sign_up' className='link-button'>
+        <a href={sso_redirect} data-method='post' className='link-button'>
+          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+        </a>
+      );
+    } else if (registrationsOpen) {
+      signupButton = (
+        <a href={signupUrl} className='link-button'>
           <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
         </a>
       );

app/javascript/flavours/glitch/features/status/components/card.jsx

@@ -178,7 +178,8 @@ export default class Card extends PureComponent {
         dummy={!useBlurhash}
       />
     );
-    let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
+    const thumbnailDescription = card.get('image_description');
+    const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
     let spoilerButton = (
       <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
         <span className='spoiler-button__overlay__label'>

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

@@ -595,7 +595,7 @@ class Status extends ImmutablePureComponent {
         onMoveUp={this.handleMoveUp}
         onMoveDown={this.handleMoveDown}
         contextType='thread'
-        previousId={i > 0 && list.get(i - 1)}
+        previousId={i > 0 ? list.get(i - 1) : undefined}
         nextId={list.get(i + 1) || (ancestors && statusId)}
         rootId={statusId}
       />

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

@@ -1,761 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
-
-import Immutable from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-
-import { HotKeys } from 'react-hotkeys';
-
-import { initBlockModal } from 'flavours/glitch/actions/blocks';
-import { initBoostModal } from 'flavours/glitch/actions/boosts';
-import {
-  replyCompose,
-  mentionCompose,
-  directCompose,
-} from 'flavours/glitch/actions/compose';
-import {
-  favourite,
-  unfavourite,
-  bookmark,
-  unbookmark,
-  reblog,
-  unreblog,
-  pin,
-  unpin,
-} from 'flavours/glitch/actions/interactions';
-import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
-import { openModal } from 'flavours/glitch/actions/modal';
-import { initMuteModal } from 'flavours/glitch/actions/mutes';
-import { initReport } from 'flavours/glitch/actions/reports';
-import {
-  fetchStatus,
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-  editStatus,
-  hideStatus,
-  revealStatus,
-  translateStatus,
-  undoStatusTranslation,
-} from 'flavours/glitch/actions/statuses';
-import { Icon } from 'flavours/glitch/components/icon';
-import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
-import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
-import ScrollContainer from 'flavours/glitch/containers/scroll_container';
-import StatusContainer from 'flavours/glitch/containers/status_container';
-import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
-import Column from 'flavours/glitch/features/ui/components/column';
-import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
-import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
-import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
-
-import ColumnHeader from '../../components/column_header';
-import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
-
-import ActionBar from './components/action_bar';
-import DetailedStatus from './components/detailed_status';
-
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
-  revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
-  hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
-  statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' },
-  detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  tootHeading: { id: 'account.posts_with_replies', defaultMessage: 'Posts and replies' },
-});
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-  const getPictureInPicture = makeGetPictureInPicture();
-
-  const getAncestorsIds = createSelector([
-    (_, { id }) => id,
-    state => state.getIn(['contexts', 'inReplyTos']),
-  ], (statusId, inReplyTos) => {
-    let ancestorsIds = Immutable.List();
-    ancestorsIds = ancestorsIds.withMutations(mutable => {
-      let id = statusId;
-
-      while (id && !mutable.includes(id)) {
-        mutable.unshift(id);
-        id = inReplyTos.get(id);
-      }
-    });
-
-    return ancestorsIds;
-  });
-
-  const getDescendantsIds = createSelector([
-    (_, { id }) => id,
-    state => state.getIn(['contexts', 'replies']),
-    state => state.get('statuses'),
-  ], (statusId, contextReplies, statuses) => {
-    let descendantsIds = [];
-    const ids = [statusId];
-
-    while (ids.length > 0) {
-      let id        = ids.pop();
-      const replies = contextReplies.get(id);
-
-      if (statusId !== id) {
-        descendantsIds.push(id);
-      }
-
-      if (replies) {
-        replies.reverse().forEach(reply => {
-          if (!ids.includes(reply) && !descendantsIds.includes(reply) && statusId !== reply) ids.push(reply);
-        });
-      }
-    }
-
-    let insertAt = descendantsIds.findIndex((id) => statuses.get(id).get('in_reply_to_account_id') !== statuses.get(id).get('account'));
-    if (insertAt !== -1) {
-      descendantsIds.forEach((id, idx) => {
-        if (idx > insertAt && statuses.get(id).get('in_reply_to_account_id') === statuses.get(id).get('account')) {
-          descendantsIds.splice(idx, 1);
-          descendantsIds.splice(insertAt, 0, id);
-          insertAt += 1;
-        }
-      });
-    }
-
-    return Immutable.List(descendantsIds);
-  });
-
-  const mapStateToProps = (state, props) => {
-    const status = getStatus(state, { id: props.params.statusId });
-
-    let ancestorsIds   = Immutable.List();
-    let descendantsIds = Immutable.List();
-
-    if (status) {
-      ancestorsIds   = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
-      descendantsIds = getDescendantsIds(state, { id: status.get('id') });
-    }
-
-    return {
-      isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']),
-      status,
-      ancestorsIds,
-      descendantsIds,
-      settings: state.get('local_settings'),
-      askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
-      domain: state.getIn(['meta', 'domain']),
-      pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }),
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const truncate = (str, num) => {
-  const arr = Array.from(str);
-  if (arr.length > num) {
-    return arr.slice(0, num).join('') + '…';
-  } else {
-    return str;
-  }
-};
-
-const titleFromStatus = (intl, status) => {
-  const displayName = status.getIn(['account', 'display_name']);
-  const username = status.getIn(['account', 'username']);
-  const user = displayName.trim().length === 0 ? username : displayName;
-  const text = status.get('search_index');
-  const attachmentCount = status.get('media_attachments').size;
-
-  return text ? `${user}: "${truncate(text, 30)}"` : intl.formatMessage(messages.statusTitleWithAttachments, { user, attachmentCount });
-};
-
-class Status extends ImmutablePureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-    identity: PropTypes.object,
-  };
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    status: ImmutablePropTypes.map,
-    isLoading: PropTypes.bool,
-    settings: ImmutablePropTypes.map.isRequired,
-    ancestorsIds: ImmutablePropTypes.list.isRequired,
-    descendantsIds: ImmutablePropTypes.list.isRequired,
-    intl: PropTypes.object.isRequired,
-    askReplyConfirmation: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    domain: PropTypes.string.isRequired,
-    pictureInPicture: ImmutablePropTypes.contains({
-      inUse: PropTypes.bool,
-      available: PropTypes.bool,
-    }),
-  };
-
-  state = {
-    fullscreen: false,
-    isExpanded: undefined,
-    threadExpanded: undefined,
-    statusId: undefined,
-    loadedStatusId: undefined,
-    showMedia: undefined,
-    revealBehindCW: undefined,
-  };
-
-  componentDidMount () {
-    attachFullscreenListener(this.onFullScreenChange);
-    this.props.dispatch(fetchStatus(this.props.params.statusId));
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    let update = {};
-    let updated = false;
-
-    if (props.params.statusId && state.statusId !== props.params.statusId) {
-      props.dispatch(fetchStatus(props.params.statusId));
-      update.threadExpanded = undefined;
-      update.statusId = props.params.statusId;
-      updated = true;
-    }
-
-    const revealBehindCW = props.settings.getIn(['media', 'reveal_behind_cw']);
-    if (revealBehindCW !== state.revealBehindCW) {
-      update.revealBehindCW = revealBehindCW;
-      if (revealBehindCW) update.showMedia = defaultMediaVisibility(props.status, props.settings);
-      updated = true;
-    }
-
-    if (props.status && state.loadedStatusId !== props.status.get('id')) {
-      update.showMedia = defaultMediaVisibility(props.status, props.settings);
-      update.loadedStatusId = props.status.get('id');
-      update.isExpanded = autoUnfoldCW(props.settings, props.status);
-      updated = true;
-    }
-
-    return updated ? update : null;
-  }
-
-  handleToggleHidden = () => {
-    const { status } = this.props;
-
-    if (this.props.settings.getIn(['content_warnings', 'shared_state'])) {
-      if (status.get('hidden')) {
-        this.props.dispatch(revealStatus(status.get('id')));
-      } else {
-        this.props.dispatch(hideStatus(status.get('id')));
-      }
-    } else if (this.props.status.get('spoiler_text')) {
-      this.setExpansion(!this.state.isExpanded);
-    }
-  };
-
-  handleToggleMediaVisibility = () => {
-    this.setState({ showMedia: !this.state.showMedia });
-  };
-
-  handleModalFavourite = (status) => {
-    this.props.dispatch(favourite(status));
-  };
-
-  handleFavouriteClick = (status, e) => {
-    const { dispatch } = this.props;
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        if ((e && e.shiftKey) || !favouriteModal) {
-          this.handleModalFavourite(status);
-        } else {
-          dispatch(openModal({
-            modalType: 'FAVOURITE',
-            modalProps: {
-              status,
-              onFavourite: this.handleModalFavourite,
-            },
-          }));
-        }
-      }
-    } else {
-      dispatch(openModal({
-        modalType: 'INTERACTION',
-        modalProps: {
-          type: 'favourite',
-          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
-        },
-      }));
-    }
-  };
-
-  handlePin = (status) => {
-    if (status.get('pinned')) {
-      this.props.dispatch(unpin(status));
-    } else {
-      this.props.dispatch(pin(status));
-    }
-  };
-
-  handleReplyClick = (status) => {
-    const { askReplyConfirmation, dispatch, intl } = this.props;
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      if (askReplyConfirmation) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
-            onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
-          },
-        }));
-      } else {
-        dispatch(replyCompose(status, this.context.router.history));
-      }
-    } else {
-      dispatch(openModal({
-        modalType: 'INTERACTION',
-        modalProps: {
-          type: 'reply',
-          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
-        },
-      }));
-    }
-  };
-
-  handleModalReblog = (status, privacy) => {
-    const { dispatch } = this.props;
-
-    if (status.get('reblogged')) {
-      dispatch(unreblog(status));
-    } else {
-      dispatch(reblog(status, privacy));
-    }
-  };
-
-  handleReblogClick = (status, e) => {
-    const { settings, dispatch } = this.props;
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
-        dispatch(initBoostModal({ status, onReblog: this.handleModalReblog, missingMediaDescription: true }));
-      } else if ((e && e.shiftKey) || !boostModal) {
-        this.handleModalReblog(status);
-      } else {
-        dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
-      }
-    } else {
-      dispatch(openModal({
-        modalType: 'INTERACTION',
-        modalProps: {
-          type: 'reblog',
-          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
-        },
-      }));
-    }
-  };
-
-  handleBookmarkClick = (status) => {
-    if (status.get('bookmarked')) {
-      this.props.dispatch(unbookmark(status));
-    } else {
-      this.props.dispatch(bookmark(status));
-    }
-  };
-
-  handleDeleteClick = (status, history, withRedraft = false) => {
-    const { dispatch, intl } = this.props;
-
-    if (!deleteModal) {
-      dispatch(deleteStatus(status.get('id'), history, withRedraft));
-    } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
-        },
-      }));
-    }
-  };
-
-  handleEditClick = (status, history) => {
-    this.props.dispatch(editStatus(status.get('id'), history));
-  };
-
-  handleDirectClick = (account, router) => {
-    this.props.dispatch(directCompose(account, router));
-  };
-
-  handleMentionClick = (account, router) => {
-    this.props.dispatch(mentionCompose(account, router));
-  };
-
-  handleOpenMedia = (media, index, lang) => {
-    this.props.dispatch(openModal({
-      modalType: 'MEDIA',
-      modalProps: { statusId: this.props.status.get('id'), media, index, lang },
-    }));
-  };
-
-  handleOpenVideo = (media, lang, options) => {
-    this.props.dispatch(openModal({
-      modalType: 'VIDEO',
-      modalProps: { statusId: this.props.status.get('id'), media, lang, options },
-    }));
-  };
-
-  handleHotkeyOpenMedia = e => {
-    const { status } = this.props;
-
-    e.preventDefault();
-
-    if (status.get('media_attachments').size > 0) {
-      if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        this.handleOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
-      } else {
-        this.handleOpenMedia(status.get('media_attachments'), 0);
-      }
-    }
-  };
-
-  handleMuteClick = (account) => {
-    this.props.dispatch(initMuteModal(account));
-  };
-
-  handleConversationMuteClick = (status) => {
-    if (status.get('muted')) {
-      this.props.dispatch(unmuteStatus(status.get('id')));
-    } else {
-      this.props.dispatch(muteStatus(status.get('id')));
-    }
-  };
-
-  handleToggleAll = () => {
-    const { status, ancestorsIds, descendantsIds, settings } = this.props;
-    const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
-    let { isExpanded } = this.state;
-
-    if (settings.getIn(['content_warnings', 'shared_state']))
-      isExpanded = !status.get('hidden');
-
-    if (!isExpanded) {
-      this.props.dispatch(revealStatus(statusIds));
-    } else {
-      this.props.dispatch(hideStatus(statusIds));
-    }
-
-    this.setState({ isExpanded: !isExpanded, threadExpanded: !isExpanded });
-  };
-
-  handleTranslate = status => {
-    const { dispatch } = this.props;
-
-    if (status.get('translation')) {
-      dispatch(undoStatusTranslation(status.get('id'), status.get('poll')));
-    } else {
-      dispatch(translateStatus(status.get('id')));
-    }
-  };
-
-  handleBlockClick = (status) => {
-    const { dispatch } = this.props;
-    const account = status.get('account');
-    dispatch(initBlockModal(account));
-  };
-
-  handleReport = (status) => {
-    this.props.dispatch(initReport(status.get('account'), status));
-  };
-
-  handleEmbed = (status) => {
-    this.props.dispatch(openModal({
-      modalType: 'EMBED',
-      modalProps: { id: status.get('id') },
-    }));
-  };
-
-  handleHotkeyToggleSensitive = () => {
-    this.handleToggleMediaVisibility();
-  };
-
-  handleHotkeyMoveUp = () => {
-    this.handleMoveUp(this.props.status.get('id'));
-  };
-
-  handleHotkeyMoveDown = () => {
-    this.handleMoveDown(this.props.status.get('id'));
-  };
-
-  handleHotkeyReply = e => {
-    e.preventDefault();
-    this.handleReplyClick(this.props.status);
-  };
-
-  handleHotkeyFavourite = () => {
-    this.handleFavouriteClick(this.props.status);
-  };
-
-  handleHotkeyBoost = () => {
-    this.handleReblogClick(this.props.status);
-  };
-
-  handleHotkeyBookmark = () => {
-    this.handleBookmarkClick(this.props.status);
-  };
-
-  handleHotkeyMention = e => {
-    e.preventDefault();
-    this.handleMentionClick(this.props.status);
-  };
-
-  handleHotkeyOpenProfile = () => {
-    this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
-  };
-
-  handleMoveUp = id => {
-    const { status, ancestorsIds, descendantsIds } = this.props;
-
-    if (id === status.get('id')) {
-      this._selectChild(ancestorsIds.size - 1, true);
-    } else {
-      let index = ancestorsIds.indexOf(id);
-
-      if (index === -1) {
-        index = descendantsIds.indexOf(id);
-        this._selectChild(ancestorsIds.size + index, true);
-      } else {
-        this._selectChild(index - 1, true);
-      }
-    }
-  };
-
-  handleMoveDown = id => {
-    const { status, ancestorsIds, descendantsIds } = this.props;
-
-    if (id === status.get('id')) {
-      this._selectChild(ancestorsIds.size + 1, false);
-    } else {
-      let index = ancestorsIds.indexOf(id);
-
-      if (index === -1) {
-        index = descendantsIds.indexOf(id);
-        this._selectChild(ancestorsIds.size + index + 2, false);
-      } else {
-        this._selectChild(index + 1, false);
-      }
-    }
-  };
-
-  _selectChild (index, align_top) {
-    const container = this.node;
-    const element = container.querySelectorAll('.focusable')[index];
-
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
-  }
-
-  handleHeaderClick = () => {
-    this.column.scrollTop();
-  };
-
-  renderChildren (list, ancestors) {
-    const { params: { statusId } } = this.props;
-
-    return list.map((id, i) => (
-      <StatusContainer
-        key={id}
-        id={id}
-        expanded={this.state.threadExpanded}
-        onMoveUp={this.handleMoveUp}
-        onMoveDown={this.handleMoveDown}
-        contextType='thread'
-        previousId={i > 0 && list.get(i - 1)}
-        nextId={list.get(i + 1) || (ancestors && statusId)}
-        rootId={statusId}
-      />
-    ));
-  }
-
-  setExpansion = value => {
-    this.setState({ isExpanded: value });
-  };
-
-  setRef = c => {
-    this.node = c;
-  };
-
-  setColumnRef = c => {
-    this.column = c;
-  };
-
-  componentDidUpdate (prevProps) {
-    const { status, ancestorsIds, multiColumn } = this.props;
-
-    if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
-      window.requestAnimationFrame(() => {
-        this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);
-
-        // In the single-column interface, `scrollIntoView` will put the post behind the header,
-        // so compensate for that.
-        if (!multiColumn) {
-          const offset = document.querySelector('.column-header__wrapper')?.getBoundingClientRect()?.bottom;
-          if (offset) {
-            const scrollingElement = document.scrollingElement || document.body;
-            scrollingElement.scrollBy(0, -offset);
-          }
-        }
-      });
-    }
-  }
-
-  componentWillUnmount () {
-    detachFullscreenListener(this.onFullScreenChange);
-  }
-
-  onFullScreenChange = () => {
-    this.setState({ fullscreen: isFullscreen() });
-  };
-
-  render () {
-    let ancestors, descendants;
-    const { isLoading, status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
-    const { fullscreen } = this.state;
-
-    if (isLoading) {
-      return (
-        <Column>
-          <LoadingIndicator />
-        </Column>
-      );
-    }
-
-    if (status === null) {
-      return (
-        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
-      );
-    }
-
-    const isExpanded = settings.getIn(['content_warnings', 'shared_state']) ? !status.get('hidden') : this.state.isExpanded;
-
-    if (ancestorsIds && ancestorsIds.size > 0) {
-      ancestors = <>{this.renderChildren(ancestorsIds, true)}</>;
-    }
-
-    if (descendantsIds && descendantsIds.size > 0) {
-      descendants = <>{this.renderChildren(descendantsIds)}</>;
-    }
-
-    const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
-    const isIndexable = !status.getIn(['account', 'noindex']);
-
-    const handlers = {
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
-      reply: this.handleHotkeyReply,
-      favourite: this.handleHotkeyFavourite,
-      boost: this.handleHotkeyBoost,
-      bookmark: this.handleHotkeyBookmark,
-      mention: this.handleHotkeyMention,
-      openProfile: this.handleHotkeyOpenProfile,
-      toggleSpoiler: this.handleToggleHidden,
-      toggleSensitive: this.handleHotkeyToggleSensitive,
-      openMedia: this.handleHotkeyOpenMedia,
-    };
-
-    return (
-      <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
-        <ColumnHeader
-          icon='comment'
-          title={intl.formatMessage(messages.tootHeading)}
-          onClick={this.handleHeaderClick}
-          showBackButton
-          multiColumn={multiColumn}
-          extraButton={(
-            <button type='button' className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={!isExpanded ? 'eye-slash' : 'eye'} /></button>
-          )}
-        />
-
-        <ScrollContainer scrollKey='thread'>
-          <div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
-            {ancestors}
-
-            <HotKeys handlers={handlers}>
-              <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}>
-                <DetailedStatus
-                  key={`details-${status.get('id')}`}
-                  status={status}
-                  settings={settings}
-                  onOpenVideo={this.handleOpenVideo}
-                  onOpenMedia={this.handleOpenMedia}
-                  expanded={isExpanded}
-                  onToggleHidden={this.handleToggleHidden}
-                  onTranslate={this.handleTranslate}
-                  domain={domain}
-                  showMedia={this.state.showMedia}
-                  onToggleMediaVisibility={this.handleToggleMediaVisibility}
-                  pictureInPicture={pictureInPicture}
-                />
-
-                <ActionBar
-                  key={`action-bar-${status.get('id')}`}
-                  status={status}
-                  onReply={this.handleReplyClick}
-                  onFavourite={this.handleFavouriteClick}
-                  onReblog={this.handleReblogClick}
-                  onBookmark={this.handleBookmarkClick}
-                  onDelete={this.handleDeleteClick}
-                  onEdit={this.handleEditClick}
-                  onDirect={this.handleDirectClick}
-                  onMention={this.handleMentionClick}
-                  onMute={this.handleMuteClick}
-                  onMuteConversation={this.handleConversationMuteClick}
-                  onBlock={this.handleBlockClick}
-                  onReport={this.handleReport}
-                  onPin={this.handlePin}
-                  onEmbed={this.handleEmbed}
-                />
-              </div>
-            </HotKeys>
-
-            {descendants}
-          </div>
-        </ScrollContainer>
-
-        <Helmet>
-          <title>{titleFromStatus(intl, status)}</title>
-          <meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
-          <link rel='canonical' href={status.get('url')} />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default injectIntl(connect(makeMapStateToProps)(Status));

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

@@ -423,4 +423,4 @@ class FocalPointModal extends ImmutablePureComponent {
 
 export default connect(mapStateToProps, mapDispatchToProps, null, {
   forwardRef: true,
-})(injectIntl(FocalPointModal, { withRef: true }));
+})(injectIntl(FocalPointModal, { forwardRef: true }));

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

@@ -13,7 +13,7 @@ import { Avatar } from 'flavours/glitch/components/avatar';
 import { Icon } from 'flavours/glitch/components/icon';
 import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
 import Permalink from 'flavours/glitch/components/permalink';
-import { registrationsOpen, me } from 'flavours/glitch/initial_state';
+import { registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state';
 
 const Account = connect(state => ({
   account: state.getIn(['accounts', me]),
@@ -74,28 +74,35 @@ class Header extends PureComponent {
         </>
       );
     } else {
-      let signupButton;
 
-      if (registrationsOpen) {
-        signupButton = (
-          <a href={signupUrl} className='button'>
-            <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-          </a>
-        );
+      if (sso_redirect) {
+        content = (
+            <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+        )
       } else {
-        signupButton = (
-          <button className='button' onClick={openClosedRegistrationsModal}>
-            <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-          </button>
+        let signupButton;
+
+        if (registrationsOpen) {
+          signupButton = (
+            <a href={signupUrl} className='button'>
+              <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+            </a>
+          );
+        } else {
+          signupButton = (
+            <button className='button' onClick={openClosedRegistrationsModal}>
+              <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+            </button>
+          );
+        }
+
+        content = (
+          <>
+            {signupButton}
+            <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
+          </>
         );
       }
-
-      content = (
-        <>
-          {signupButton}
-          <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
-        </>
-      );
     }
 
     return (

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

@@ -105,14 +105,7 @@ export default class ModalRoot extends PureComponent {
 
   handleClose = (ignoreFocus = false) => {
     const { onClose } = this.props;
-    let message = null;
-    try {
-      message = this._modal?.getWrappedInstance?.().getCloseConfirmationMessage?.();
-    } catch (_) {
-      // injectIntl defines `getWrappedInstance` but errors out if `withRef`
-      // isn't set.
-      // This would be much smoother with react-intl 3+ and `forwardRef`.
-    }
+    const message = this._modal?.getCloseConfirmationMessage?.();
     onClose(message, ignoreFocus);
   };
 
@@ -133,7 +126,10 @@ export default class ModalRoot extends PureComponent {
         {visible && (
           <>
             <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
-              {(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
+              {(SpecificComponent) => {
+                const ref = typeof SpecificComponent !== 'function' ? this.setModalRef : undefined;
+                return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={ref} />
+              }}
             </BundleContainer>
 
             <Helmet>

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

@@ -63,7 +63,7 @@ class ReportModal extends ImmutablePureComponent {
     dispatch(submitReport({
       account_id: accountId,
       status_ids: selectedStatusIds.toArray(),
-      selected_domains: selectedDomains.toArray(),
+      forward_to_domains: selectedDomains.toArray(),
       comment,
       forward: selectedDomains.size > 0,
       category,

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

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'flavours/glitch/actions/modal';
-import { registrationsOpen } from 'flavours/glitch/initial_state';
+import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
 
 const SignInBanner = () => {
@@ -18,6 +18,15 @@ const SignInBanner = () => {
 
   const signupUrl = useAppSelector((state) => state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up');
 
+  if (sso_redirect) {
+    return (
+      <div className='sign-in-banner'>
+        <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favorite, share and reply to posts. You can also interact from your account on a different server.' /></p>
+        <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+      </div>
+    )
+  }
+
   if (registrationsOpen) {
     signupButton = (
       <a href={signupUrl} className='button button--block'>

app/javascript/flavours/glitch/initial_state.js

@@ -82,6 +82,7 @@
  * @property {boolean} use_blurhash
  * @property {boolean=} use_pending_items
  * @property {string} version
+ * @property {string} sso_redirect
  * @property {boolean} translation_enabled
  * @property {string} status_page_url
  * @property {boolean} system_emoji_font
@@ -160,6 +161,7 @@ export const usePendingItems = getMeta('use_pending_items');
 export const version = getMeta('version');
 export const languages = initialState?.languages;
 export const statusPageUrl = getMeta('status_page_url');
+export const sso_redirect = getMeta('sso_redirect');
 
 // Glitch-soc-specific settings
 export const maxChars = (initialState && initialState.max_toot_chars) || 500;

app/javascript/flavours/glitch/locales/da.json

@@ -1,10 +1,43 @@
 {
+  "compose.attach": "Vedhæft...",
+  "compose.attach.doodle": "Tegn noget",
+  "compose.attach.upload": "Upload en fil",
+  "compose_form.poll.multiple_choices": "Tillad flere valg",
+  "confirmations.missing_media_description.message": "Mindst én vedhæftet medie mangler en beskrivelse. Overvej at tilføje en beskrivelse af alle vedhæftede medier af hensyn til personer med nedsat syn, før du publicerer dit indlæg.",
   "empty_column.follow_recommendations": "Det ser ud til, at der ikke kunne genereres forslag til dig. Du kan prøve med Søg for at lede efter personer, du måske kender, eller udforske hashtags.",
   "follow_recommendations.done": "Udført",
   "follow_recommendations.heading": "Følg personer du gerne vil se indlæg fra! Her er nogle forslag.",
   "follow_recommendations.lead": "Indlæg, fra personer du følger, vil fremgå kronologisk ordnet i dit hjemmefeed. Vær ikke bange for at begå fejl, da du altid og meget nemt kan ændre dit valg!",
+  "home.column_settings.advanced": "Avanceret",
+  "home.column_settings.show_direct": "Vis private omtaler",
+  "navigation_bar.app_settings": "Appindstillinger",
+  "navigation_bar.misc": "Diverse",
   "onboarding.page_one.federation": "{domain} is an \"instance\" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
   "onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.",
-  "settings.content_warnings": "Content warnings",
-  "settings.preferences": "Preferences"
+  "settings.always_show_spoilers_field": "Vis altid feltet til indholdsadvarsel",
+  "settings.auto_collapse_media": "Indlæg med medier",
+  "settings.close": "Luk",
+  "settings.collapsed_statuses": "Sammenfoldede indlæg",
+  "settings.content_warnings": "Indholdsadvarsler",
+  "settings.content_warnings.regexp": "Regulært udtryk",
+  "settings.general": "Generelt",
+  "settings.image_backgrounds_media_hint": "Hvis et indlæg har vedhæftede medier, brug den første som baggrund",
+  "settings.media": "Medier",
+  "settings.preferences": "Præferencer",
+  "settings.rewrite_mentions": "Omskriv omtaler i viste indlæg",
+  "settings.rewrite_mentions_acct": "Omskriv med brugernavn og domæne (når brugeren ikke er lokal)",
+  "settings.rewrite_mentions_no": "Omskriv ikke omtaler",
+  "settings.rewrite_mentions_username": "Omskriv med brugernavn",
+  "settings.show_reply_counter": "Vis et estimat over antal svar",
+  "settings.status_icons": "Statusikoner",
+  "settings.status_icons_language": "Sprogindikator",
+  "settings.status_icons_local_only": "Kun lokal-indikator",
+  "settings.status_icons_media": "Medie- og afstemningsindikator",
+  "settings.status_icons_reply": "Svarindikator",
+  "settings.status_icons_visibility": "Statussynlighedsindikator",
+  "settings.tag_misleading_links": "Marker vildledende links",
+  "status.has_audio": "Har vedhæftede lydfiler",
+  "status.has_pictures": "Har vedhæftede billeder",
+  "status.has_preview_card": "Har en vedhæftet linkvisning",
+  "status.has_video": "Har vedhæftede videoer"
 }

app/javascript/flavours/glitch/locales/fr-QC.json

@@ -4,7 +4,9 @@
   "account.disclaimer_full": "Les informations ci-dessous peuvent être incomplètes.",
   "account.follows": "Abonnements",
   "account.joined": "Ici depuis {date}",
+  "account.mute_notifications": "Masquer les notifications de @{name}",
   "account.suspended_disclaimer_full": "Cet utilisateur a été suspendu par un modérateur.",
+  "account.unmute_notifications": "Ne plus masquer les notifications de @{name}",
   "account.view_full_profile": "Voir le profil complet",
   "account_note.cancel": "Annuler",
   "account_note.edit": "Éditer",
@@ -50,6 +52,7 @@
   "empty_column.follow_recommendations": "Il semble qu’aucune suggestion n’ait pu être générée pour vous. Vous pouvez essayer d’utiliser la recherche pour découvrir des personnes que vous pourriez connaître ou explorer les hashtags populaires.",
   "endorsed_accounts_editor.endorsed_accounts": "Comptes mis en avant",
   "favourite_modal.combo": "Vous pouvez appuyer sur {combo} pour passer ceci la prochaine fois",
+  "firehose.column_settings.allow_local_only": "Afficher les messages locaux dans \"Tous\"",
   "follow_recommendations.done": "Terminé",
   "follow_recommendations.heading": "Suivez les personnes dont vous aimeriez voir les publications! Voici quelques suggestions.",
   "follow_recommendations.lead": "Les publication de personnes que vous suivez apparaîtront par ordre chronologique sur votre fil d'accueil. N'ayez pas peur de faire des erreurs, vous pouvez arrêter de suivre les gens aussi facilement n'importe quand!",
@@ -98,6 +101,7 @@
   "settings.always_show_spoilers_field": "Toujours activer le champ de rédaction de l'avertissement de contenu",
   "settings.auto_collapse": "Repliage automatique",
   "settings.auto_collapse_all": "Tout",
+  "settings.auto_collapse_height": "Hauteur (en pixels) pour qu'un pouet soit considéré comme long",
   "settings.auto_collapse_lengthy": "Posts longs",
   "settings.auto_collapse_media": "Posts avec média",
   "settings.auto_collapse_notifications": "Notifications",

app/javascript/flavours/glitch/locales/fr.json

@@ -4,7 +4,9 @@
   "account.disclaimer_full": "Les informations ci-dessous peuvent être incomplètes.",
   "account.follows": "Abonnements",
   "account.joined": "Ici depuis {date}",
+  "account.mute_notifications": "Masquer les notifications de @{name}",
   "account.suspended_disclaimer_full": "Cet utilisateur a été suspendu par un modérateur.",
+  "account.unmute_notifications": "Ne plus masquer les notifications de @{name}",
   "account.view_full_profile": "Voir le profil complet",
   "account_note.cancel": "Annuler",
   "account_note.edit": "Éditer",
@@ -50,6 +52,7 @@
   "empty_column.follow_recommendations": "Il semble qu’aucune suggestion n’ait pu être générée pour vous. Vous pouvez essayer d’utiliser la recherche pour découvrir des personnes que vous pourriez connaître ou explorer les hashtags tendance.",
   "endorsed_accounts_editor.endorsed_accounts": "Comptes mis en avant",
   "favourite_modal.combo": "Vous pouvez appuyer sur {combo} pour passer ceci la prochaine fois",
+  "firehose.column_settings.allow_local_only": "Afficher les messages locaux dans \"Tous\"",
   "follow_recommendations.done": "Terminé",
   "follow_recommendations.heading": "Suivez les personnes dont vous aimeriez voir les messages ! Voici quelques suggestions.",
   "follow_recommendations.lead": "Les messages des personnes que vous suivez apparaîtront par ordre chronologique sur votre fil d'accueil. Ne craignez pas de faire des erreurs, vous pouvez arrêter de suivre les gens aussi facilement à tout moment !",
@@ -98,6 +101,7 @@
   "settings.always_show_spoilers_field": "Toujours activer le champ de rédaction de l'avertissement de contenu",
   "settings.auto_collapse": "Repliage automatique",
   "settings.auto_collapse_all": "Tout",
+  "settings.auto_collapse_height": "Hauteur (en pixels) pour qu'un pouet soit considéré comme long",
   "settings.auto_collapse_lengthy": "Posts longs",
   "settings.auto_collapse_media": "Posts avec média",
   "settings.auto_collapse_notifications": "Notifications",

app/javascript/flavours/glitch/locales/ja.json

@@ -1,8 +1,12 @@
 {
+  "about.fork_disclaimer": "Glitch-socはMastodonからフォークされたフリーなオープンソースソフトウェアです。",
   "account.add_account_note": "@{name}のメモを追加",
   "account.disclaimer_full": "このユーザー情報は不正確な可能性があります。",
   "account.follows": "フォロー",
+  "account.joined": "{date} に登録",
+  "account.mute_notifications": "@{name}さんからの通知を受け取らない",
   "account.suspended_disclaimer_full": "このユーザーはモデレータにより停止されました。",
+  "account.unmute_notifications": "@{name}さんからの通知を受け取る",
   "account.view_full_profile": "正確な情報を見る",
   "account_note.cancel": "キャンセル",
   "account_note.edit": "編集",
@@ -16,20 +20,25 @@
   "advanced_options.threaded_mode.short": "スレッドモード",
   "advanced_options.threaded_mode.tooltip": "スレッドモードを有効にする",
   "boost_modal.missing_description": "このトゥートには少なくとも1つの画像に説明が付与されていません",
+  "column.favourited_by": "お気に入りしたユーザー",
   "column.heading": "その他",
+  "column.reblogged_by": "ブーストしたユーザー",
   "column.subheading": "その他のオプション",
+  "column_header.profile": "プロフィール",
   "column_subheading.lists": "リスト",
   "column_subheading.navigation": "ナビゲーション",
   "community.column_settings.allow_local_only": "ローカル限定投稿を表示する",
   "compose.attach": "添付...",
   "compose.attach.doodle": "お絵描きをする",
   "compose.attach.upload": "ファイルをアップロード",
+  "compose.content-type.html": "HTML",
   "compose.content-type.markdown": "マークダウン",
   "compose.content-type.plain": "プレーンテキスト",
   "compose_form.poll.multiple_choices": "複数回答を許可",
   "compose_form.poll.single_choice": "単一回答を許可",
   "compose_form.spoiler": "本文は警告の後ろに隠す",
   "confirmation_modal.do_not_ask_again": "もう１度尋ねない",
+  "confirmations.deprecated_settings.confirm": "Mastodonの設定を使用",
   "confirmations.missing_media_description.confirm": "このまま投稿",
   "confirmations.missing_media_description.edit": "メディアを編集",
   "confirmations.missing_media_description.message": "少なくとも1つの画像に視覚障害者のための画像説明が付与されていません。すべての画像に対して説明を付与することを望みます。",
@@ -38,6 +47,7 @@
   "confirmations.unfilter.edit_filter": "フィルターを編集",
   "confirmations.unfilter.filters": "適用されたフィルター",
   "content-type.change": "コンテンツ形式を変更",
+  "direct.group_by_conversations": "会話でグループ化",
   "empty_column.follow_recommendations": "おすすめを生成できませんでした。検索を使って知り合いを探したり、トレンドハッシュタグを見てみましょう。",
   "endorsed_accounts_editor.endorsed_accounts": "紹介しているユーザー",
   "favourite_modal.combo": "次からは {combo} を押せば、これをスキップできます。",
@@ -48,18 +58,22 @@
   "home.column_settings.advanced": "高度",
   "home.column_settings.filter_regex": "正規表現でフィルター",
   "home.column_settings.show_direct": "DMを表示",
+  "home.settings": "カラムの設定",
   "keyboard_shortcuts.bookmark": "ブックマーク",
   "keyboard_shortcuts.secondary_toot": "セカンダリートゥートの公開範囲でトゥートする",
   "keyboard_shortcuts.toggle_collapse": "折りたたむ/折りたたみを解除",
+  "media_gallery.sensitive": "閲覧注意",
   "moved_to_warning": "このアカウント{moved_to_link}に引っ越したため、新しいフォロワーを受け入れていません。",
   "navigation_bar.app_settings": "アプリ設定",
   "navigation_bar.featured_users": "紹介しているアカウント",
+  "navigation_bar.keyboard_shortcuts": "キーボードショートカット",
   "navigation_bar.misc": "その他",
   "notification.markForDeletion": "選択",
   "notification_purge.btn_all": "すべて\n選択",
   "notification_purge.btn_apply": "選択したものを\n削除",
   "notification_purge.btn_invert": "選択を\n反転",
   "notification_purge.btn_none": "選択\n解除",
+  "notification_purge.start": "通知整理モードに入る",
   "notifications.marked_clear": "選択した通知を削除する",
   "notifications.marked_clear_confirmation": "削除した全ての通知を完全に削除してもよろしいですか？",
   "onboarding.page_one.federation": "{domain}はMastodonのインスタンスです。Mastodonとは、独立したサーバが連携して作るソーシャルネットワークです。これらのサーバーをインスタンスと呼びます。",
@@ -68,6 +82,7 @@
   "settings.always_show_spoilers_field": "常にコンテンツワーニング設定を表示する(指定がない場合は通常投稿)",
   "settings.auto_collapse": "自動折りたたみ",
   "settings.auto_collapse_all": "すべて",
+  "settings.auto_collapse_height": "トゥートが長いと見なされる高さ（ピクセル）",
   "settings.auto_collapse_lengthy": "長いトゥート",
   "settings.auto_collapse_media": "メディア付きトゥート",
   "settings.auto_collapse_notifications": "通知",
@@ -82,6 +97,9 @@
   "settings.content_warnings": "コンテンツワーニング",
   "settings.content_warnings.regexp": "正規表現",
   "settings.content_warnings_filter": "説明に指定した文字が含まれているものを自動で展開しないようにする",
+  "settings.content_warnings_media_outside": "コンテンツワーニングの外側にメディア添付ファイルを表示する",
+  "settings.content_warnings_shared_state": "すべてのコピーの内容を一度に表示/非表示",
+  "settings.content_warnings_unfold_opts": "自動展開オプション",
   "settings.enable_collapsed": "トゥート折りたたみを有効にする",
   "settings.enable_content_warnings_auto_unfold": "コンテンツワーニング指定されている投稿を常に表示する",
   "settings.general": "一般",
@@ -119,10 +137,24 @@
   "settings.side_arm_reply_mode.copy": "返信先の投稿範囲を利用する",
   "settings.side_arm_reply_mode.keep": "セカンダリートゥートボタンの設定を維持する",
   "settings.side_arm_reply_mode.restrict": "返信先の投稿範囲に制限する",
+  "settings.status_icons": "トゥートアイコン",
+  "settings.status_icons_language": "言語インジケータ",
+  "settings.status_icons_local_only": "ローカル限定インジケータ",
+  "settings.status_icons_media": "メディア・アンケートインジケータ",
+  "settings.status_icons_reply": "返信インジケータ",
+  "settings.status_icons_visibility": "公開範囲インジケータ",
   "settings.swipe_to_change_columns": "スワイプでカラムを切り替え可能にする（モバイルのみ）",
   "settings.tag_misleading_links": "誤解を招くリンクにタグをつける",
   "settings.tag_misleading_links.hint": "明示的に言及していないすべてのリンクに、リンクターゲットホストを含む視覚的な表示を追加します",
   "settings.wide_view": "ワイドビュー(デスクトップ レイアウトのみ)",
   "status.collapse": "折りたたむ",
+  "status.has_audio": "添付されたオーディオファイルが表示されます",
+  "status.has_pictures": "添付された画像が表示されます",
+  "status.has_preview_card": "添付されたプレビューカードが表示されます",
+  "status.has_video": "添付動画が表示されます",
+  "status.in_reply_to": "このトゥートは返信です",
+  "status.is_poll": "このトゥートはアンケートです",
+  "status.local_only": "あなたのインスタンスのみに公開",
+  "status.sensitive_toggle": "クリックして表示",
   "status.uncollapse": "折りたたみを解除"
 }

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

@@ -16,11 +16,17 @@
   "advanced_options.local-only.long": "不要傳遞給其他實例",
   "advanced_options.local-only.short": "僅限本地",
   "advanced_options.local-only.tooltip": "此嘟文僅限本地",
+  "advanced_options.threaded_mode.long": "發佈時自動打開回覆",
   "advanced_options.threaded_mode.short": "討論串模式",
   "advanced_options.threaded_mode.tooltip": "已啟用討論串模式",
   "boost_modal.missing_description": "此嘟文包含未加說明的媒體檔案",
+  "column.favourited_by": "誰按了最愛",
+  "column.heading": "雜項",
+  "column.reblogged_by": "被誰轉嘟",
+  "column.subheading": "其他選項",
   "column_header.profile": "個人檔案",
   "column_subheading.lists": "列表",
+  "column_subheading.navigation": "導覽",
   "community.column_settings.allow_local_only": "顯示僅限本地的嘟文",
   "compose.attach": "附加...",
   "compose.attach.doodle": "塗鴉",
@@ -30,27 +36,66 @@
   "compose.content-type.plain": "純文字",
   "compose_form.poll.multiple_choices": "允許多重選擇",
   "compose_form.poll.single_choice": "允許單一選擇",
+  "compose_form.spoiler": "將文字隱藏在內容警告後面",
   "confirmation_modal.do_not_ask_again": "不要再顯示確認訊息",
   "confirmations.deprecated_settings.confirm": "使用 Mastodon 偏好",
+  "confirmations.deprecated_settings.message": "您正在使用的某些特定於 glitch-soc 設備的 {app_settings} 已被 Mastodon {preferences} 所取代，並將被覆蓋：",
+  "confirmations.missing_media_description.confirm": "仍要張貼",
   "confirmations.missing_media_description.edit": "編輯媒體",
   "confirmations.missing_media_description.message": "至少有一個媒體附件缺少說明。 在發送嘟文之前，請考慮為視障人士在所有媒體附件加上說明。",
   "confirmations.unfilter.author": "作者",
   "confirmations.unfilter.confirm": "顯示",
+  "confirmations.unfilter.edit_filter": "編輯篩選器",
   "content-type.change": "內容類型",
   "direct.group_by_conversations": "以對話分組",
   "empty_column.follow_recommendations": "似乎未能為您產生任何建議。您可以嘗試使用搜尋來尋找您可能認識的人，或是探索熱門主題標籤。",
+  "endorsed_accounts_editor.endorsed_accounts": "受推薦帳號",
+  "favourite_modal.combo": "下次您可以按 {combo} 跳過",
+  "firehose.column_settings.allow_local_only": "在「全部」顯示僅限本地的貼文",
   "follow_recommendations.done": "完成",
   "follow_recommendations.heading": "跟隨您想檢視其嘟文的人！這裡有一些建議。",
   "follow_recommendations.lead": "來自您跟隨的人之嘟文將會按時間順序顯示在您的首頁時間軸上。不要害怕犯錯，您隨時都可以取消跟隨其他人！",
+  "getting_started.onboarding": "帶我四處看看",
   "home.column_settings.advanced": "進階設定",
   "home.column_settings.filter_regex": "以正規表達式進行過濾",
+  "home.column_settings.show_direct": "顯示私人提及",
+  "home.settings": "欄位設定",
+  "keyboard_shortcuts.bookmark": "到書籤",
+  "keyboard_shortcuts.secondary_toot": "使用次要隱私設定來發布嘟文",
+  "keyboard_shortcuts.toggle_collapse": "去折疊/展開嘟文",
   "media_gallery.sensitive": "敏感",
+  "moved_to_warning": "此帳戶已標記為移至 {moved_to_link}，因此可能不接受新的追隨者。",
+  "navigation_bar.app_settings": "應用程式設定",
+  "navigation_bar.featured_users": "被推薦的使用者",
+  "navigation_bar.keyboard_shortcuts": "鍵盤快速鍵",
+  "navigation_bar.misc": "雜項",
+  "notification.markForDeletion": "標記刪除",
   "notification_purge.btn_all": "選取全部",
   "notification_purge.btn_apply": "清除所選項目",
   "notification_purge.btn_invert": "反向選擇",
   "notification_purge.btn_none": "取消選取",
+  "notification_purge.start": "進入通知清理模式",
+  "notifications.marked_clear": "清除被選取的通知訊息",
+  "notifications.marked_clear_confirmation": "您確定要永久清除所有被選取的通知訊息嗎？",
+  "onboarding.done": "完成",
+  "onboarding.next": "下一個",
+  "onboarding.page_five.public_timelines": "本地時間軸顯示來自 {domain} 上所有人的公開貼文。聯合時間軸顯示 {domain} 上追隨的每個人發表的公開貼文。這些是公共時間軸，是發現新朋友的好方法。",
+  "onboarding.page_four.home": "首頁時間線會顯示你追隨的人發布的貼文。",
+  "onboarding.page_four.notifications": "當有人與您互動時會顯示在通知欄。",
   "onboarding.page_one.federation": "{domain} is an \"instance\" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
+  "onboarding.page_one.handle": "你的帳號在 {domain} ，所以你的帳號全名是 {handle}",
+  "onboarding.page_one.welcome": "歡迎來到 {domain} ！",
+  "onboarding.page_six.admin": "您的站台管理者是 {admin} 。",
+  "onboarding.page_six.almost_done": "就快完成了…",
+  "onboarding.page_six.apps_available": "有適用於 iOS、Android 和其他平台的 {apps}。",
   "onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.",
+  "onboarding.page_six.guidelines": "社群規範",
+  "onboarding.page_six.read_guidelines": "請閱讀 {domain} 的 {guidelines}！",
+  "onboarding.page_six.various_app": "手機應用程式",
+  "onboarding.page_three.profile": "編輯您的個人資料以更改您的頭像、個人簡介和顯示名稱。在那裡，您還會發現其他偏好設置。",
+  "onboarding.page_three.search": "使用搜索欄查找他人與主題標籤，例如 {illustration} 和 {introductions} 。要尋找其他站台的人，請使用他們的完整帳號名稱。",
+  "onboarding.page_two.compose": "從撰寫欄撰寫帖子。您可以使用下面的圖示上傳圖片、更改隱私設置以及添加內容警告。",
+  "onboarding.skip": "略過",
   "settings.always_show_spoilers_field": "永遠啟用內容警告欄位",
   "settings.auto_collapse": "自動折疊",
   "settings.auto_collapse_all": "全部",
@@ -83,19 +128,23 @@
   "settings.hicolor_privacy_icons.hint": "用明亮且易於區分的顏色顯示隱私圖示",
   "settings.image_backgrounds": "圖片背景",
   "settings.image_backgrounds_media": "預覽折疊嘟文的媒體檔案",
-  "settings.image_backgrounds_media_hint": "如果嘟文包含媒體檔案，使用的一個作為圖片背景",
+  "settings.image_backgrounds_media_hint": "如果嘟文包含媒體檔案，使用第一個作為圖片背景",
   "settings.image_backgrounds_users": "為折疊的嘟文加上圖片背景",
+  "settings.inline_preview_cards": "針對外部連接顯示內嵌的預覽卡",
   "settings.layout_opts": "版面選項",
   "settings.media": "媒體",
   "settings.media_fullwidth": "在媒體預覽中使用完整寬度",
   "settings.media_letterbox": "在媒體預覽加上黑邊",
   "settings.media_letterbox_hint": "在媒體預覽中縮小並加上黑邊以取代延展與裁切",
   "settings.media_reveal_behind_cw": "預設顯示隱藏在內容警告的敏感媒體檔案",
+  "settings.notifications.favicon_badge": "未讀通知網站圖示徽章",
+  "settings.notifications.favicon_badge.hint": "在網站圖示上增加一個未讀通知徽章",
   "settings.notifications.tab_badge": "未讀通知徽章",
   "settings.notifications.tab_badge.hint": "當通知列未打開時，在導引圖示中顯示未讀通知的徽章",
   "settings.notifications_opts": "通知選項",
   "settings.pop_in_left": "左邊",
   "settings.pop_in_player": "啟用彈出播放器",
+  "settings.pop_in_position": "彈出播放器位置：",
   "settings.pop_in_right": "右邊",
   "settings.preferences": "使用者偏好設定",
   "settings.prepend_cw_re": "回覆時在內容警告前添加 \"re:\"",
@@ -105,6 +154,7 @@
   "settings.rewrite_mentions_acct": "改寫為使用者名稱與網域（當使用者來自外部）",
   "settings.rewrite_mentions_no": "不要改寫提及",
   "settings.rewrite_mentions_username": "改寫為使用者名稱",
+  "settings.shared_settings_link": "使用者偏好設定",
   "settings.show_action_bar": "在折疊的嘟文顯示操作按鈕",
   "settings.show_content_type_choice": "在編寫嘟文時顯示內容類型選擇",
   "settings.show_reply_counter": "顯示回覆數量的估計值",
@@ -113,12 +163,14 @@
   "settings.side_arm_reply_mode": "當回覆一篇嘟文時，次要發出嘟文按鈕應該設為：",
   "settings.side_arm_reply_mode.copy": "複製回覆嘟文的隱私設置",
   "settings.side_arm_reply_mode.keep": "保持原本的隱私設定",
+  "settings.side_arm_reply_mode.restrict": "限制只能使用與回覆嘟文相同的隱私設置",
   "settings.status_icons": "嘟文圖示",
   "settings.status_icons_language": "語言指示器",
   "settings.status_icons_local_only": "僅限本地指示器",
   "settings.status_icons_media": "媒體與投票指示器",
   "settings.status_icons_reply": "回覆指示器",
   "settings.status_icons_visibility": "嘟文隱私指示器",
+  "settings.swipe_to_change_columns": "允許使用滑動手勢更改顯示欄位（僅限移動裝置）",
   "settings.tag_misleading_links": "標記誤導性的連結",
   "settings.tag_misleading_links.hint": "在每個未明確提及的連結添加帶有連結目標主機的視覺指示",
   "settings.wide_view": "寬廣模式（僅限桌面模式）",
@@ -130,5 +182,17 @@
   "status.has_video": "包含視訊檔案",
   "status.in_reply_to": "嘟文有回覆",
   "status.is_poll": "嘟文有投票",
-  "status.local_only": "只在此實例可見"
+  "status.local_only": "只在此實例可見",
+  "status.sensitive_toggle": "點擊查看",
+  "status.uncollapse": "展開",
+  "web_app_crash.change_your_settings": "修改你的 {settings}",
+  "web_app_crash.content": "您可以嘗試以下任一種方法：",
+  "web_app_crash.debug_info": "除錯資訊",
+  "web_app_crash.disable_addons": "禁用瀏覽器插件或內置翻譯工具",
+  "web_app_crash.issue_tracker": "問題追蹤系統",
+  "web_app_crash.reload": "重新載入",
+  "web_app_crash.reload_page": "{reload} 當前頁面",
+  "web_app_crash.report_issue": "到 {issuetracker} 回報問題",
+  "web_app_crash.settings": "設定",
+  "web_app_crash.title": "很抱歉，Mastodon 應用程序出現問題。"
 }

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

@@ -14,7 +14,6 @@ import emojify  from 'flavours/glitch/features/emoji/emoji';
 import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
 import { loadLocale, getLocale } from 'flavours/glitch/locales';
 import { loadPolyfills } from 'flavours/glitch/polyfills';
-import ready from 'flavours/glitch/ready';
 
 const messages = defineMessages({
   usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
@@ -42,159 +41,157 @@ function main() {
     };
   };
 
-  ready(() => {
-    const locale = document.documentElement.lang;
+  const locale = document.documentElement.lang;
 
-    const dateTimeFormat = new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-    });
+  const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  });
 
-    const dateFormat = new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      timeFormat: false,
-    });
+  const dateFormat = new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeFormat: false,
+  });
 
-    const timeFormat = new Intl.DateTimeFormat(locale, {
-      timeStyle: 'short',
-      hour12: false,
-    });
+  const timeFormat = new Intl.DateTimeFormat(locale, {
+    timeStyle: 'short',
+    hour12: false,
+  });
 
-    const formatMessage = ({ id, defaultMessage }, values) => {
-      const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
-      return messageFormat.format(values);
-    };
+  const formatMessage = ({ id, defaultMessage }, values) => {
+    const messageFormat = new IntlMessageFormat(localeData[id] || defaultMessage, locale);
+    return messageFormat.format(values);
+  };
 
-    [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
-      content.innerHTML = emojify(content.innerHTML);
-    });
+  [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
+    content.innerHTML = emojify(content.innerHTML);
+  });
 
-    [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
-      const formattedDate = dateTimeFormat.format(datetime);
+  [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
+    const formattedDate = dateTimeFormat.format(datetime);
 
-      content.title = formattedDate;
-      content.textContent = formattedDate;
-    });
+    content.title = formattedDate;
+    content.textContent = formattedDate;
+  });
 
-    const isToday = date => {
-      const today = new Date();
+  const isToday = date => {
+    const today = new Date();
 
-      return date.getDate() === today.getDate() &&
-        date.getMonth() === today.getMonth() &&
-        date.getFullYear() === today.getFullYear();
-    };
-    const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale);
+    return date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear();
+  };
+  const todayFormat = new IntlMessageFormat(localeData['relative_format.today'] || 'Today at {time}', locale);
 
-    [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
+  [].forEach.call(document.querySelectorAll('time.relative-formatted'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
 
-      let formattedContent;
+    let formattedContent;
 
-      if (isToday(datetime)) {
-        const formattedTime = timeFormat.format(datetime);
+    if (isToday(datetime)) {
+      const formattedTime = timeFormat.format(datetime);
 
-        formattedContent = todayFormat.format({ time: formattedTime });
-      } else {
-        formattedContent = dateFormat.format(datetime);
-      }
-
-      content.title = formattedContent;
-      content.textContent = formattedContent;
-    });
-
-    [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
-      const datetime = new Date(content.getAttribute('datetime'));
-      const now      = new Date();
-
-      const timeGiven = content.getAttribute('datetime').includes('T');
-      content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
-      content.textContent = timeAgoString({
-        formatMessage,
-        formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
-      }, datetime, now, now.getFullYear(), timeGiven);
-    });
-
-    const reactComponents = document.querySelectorAll('[data-component]');
-    if (reactComponents.length > 0) {
-      import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container')
-        .then(({ default: MediaContainer }) => {
-          [].forEach.call(reactComponents, (component) => {
-            [].forEach.call(component.children, (child) => {
-              component.removeChild(child);
-            });
-          });
-
-          const content = document.createElement('div');
-
-          const root = createRoot(content);
-          root.render(<MediaContainer locale={locale} components={reactComponents} />);
-          document.body.appendChild(content);
-          scrollToDetailedStatus();
-        })
-        .catch(error => {
-          console.error(error);
-          scrollToDetailedStatus();
-        });
+      formattedContent = todayFormat.format({ time: formattedTime });
     } else {
-      scrollToDetailedStatus();
+      formattedContent = dateFormat.format(datetime);
     }
 
-    delegate(document, '#user_account_attributes_username', 'input', throttle(() => {
-      const username = document.getElementById('user_account_attributes_username');
+    content.title = formattedContent;
+    content.textContent = formattedContent;
+  });
 
-      if (username.value && username.value.length > 0) {
-        axios.get('/api/v1/accounts/lookup', { params: { acct: username.value } }).then(() => {
-          username.setCustomValidity(formatMessage(messages.usernameTaken));
-        }).catch(() => {
-          username.setCustomValidity('');
+  [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
+    const datetime = new Date(content.getAttribute('datetime'));
+    const now      = new Date();
+
+    const timeGiven = content.getAttribute('datetime').includes('T');
+    content.title = timeGiven ? dateTimeFormat.format(datetime) : dateFormat.format(datetime);
+    content.textContent = timeAgoString({
+      formatMessage,
+      formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
+    }, datetime, now, now.getFullYear(), timeGiven);
+  });
+
+  const reactComponents = document.querySelectorAll('[data-component]');
+  if (reactComponents.length > 0) {
+    import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container')
+      .then(({ default: MediaContainer }) => {
+        [].forEach.call(reactComponents, (component) => {
+          [].forEach.call(component.children, (child) => {
+            component.removeChild(child);
+          });
         });
-      } else {
+
+        const content = document.createElement('div');
+
+        const root = createRoot(content);
+        root.render(<MediaContainer locale={locale} components={reactComponents} />);
+        document.body.appendChild(content);
+        scrollToDetailedStatus();
+      })
+      .catch(error => {
+        console.error(error);
+        scrollToDetailedStatus();
+      });
+  } else {
+    scrollToDetailedStatus();
+  }
+
+  delegate(document, '#user_account_attributes_username', 'input', throttle(() => {
+    const username = document.getElementById('user_account_attributes_username');
+
+    if (username.value && username.value.length > 0) {
+      axios.get('/api/v1/accounts/lookup', { params: { acct: username.value } }).then(() => {
+        username.setCustomValidity(formatMessage(messages.usernameTaken));
+      }).catch(() => {
         username.setCustomValidity('');
-      }
-    }, 500, { leading: false, trailing: true }));
+      });
+    } else {
+      username.setCustomValidity('');
+    }
+  }, 500, { leading: false, trailing: true }));
 
-    delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
-      const password = document.getElementById('user_password');
-      const confirmation = document.getElementById('user_password_confirmation');
-      if (!confirmation) return;
+  delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
+    const password = document.getElementById('user_password');
+    const confirmation = document.getElementById('user_password_confirmation');
+    if (!confirmation) return;
 
-      if (confirmation.value && confirmation.value.length > password.maxLength) {
-        confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
-      } else if (password.value && password.value !== confirmation.value) {
-        confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
-      } else {
-        confirmation.setCustomValidity('');
-      }
-    });
+    if (confirmation.value && confirmation.value.length > password.maxLength) {
+      confirmation.setCustomValidity(formatMessage(messages.passwordExceedsLength));
+    } else if (password.value && password.value !== confirmation.value) {
+      confirmation.setCustomValidity(formatMessage(messages.passwordDoesNotMatch));
+    } else {
+      confirmation.setCustomValidity('');
+    }
+  });
 
-    delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
-    delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
+  delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
+  delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
 
-    delegate(document, '.status__content__spoiler-link', 'click', function() {
-      const statusEl = this.parentNode.parentNode;
+  delegate(document, '.status__content__spoiler-link', 'click', function() {
+    const statusEl = this.parentNode.parentNode;
 
-      if (statusEl.dataset.spoiler === 'expanded') {
-        statusEl.dataset.spoiler = 'folded';
-        this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format();
-      } else {
-        statusEl.dataset.spoiler = 'expanded';
-        this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
-      }
+    if (statusEl.dataset.spoiler === 'expanded') {
+      statusEl.dataset.spoiler = 'folded';
+      this.textContent = (new IntlMessageFormat(localeData['status.show_more'] || 'Show more', locale)).format();
+    } else {
+      statusEl.dataset.spoiler = 'expanded';
+      this.textContent = (new IntlMessageFormat(localeData['status.show_less'] || 'Show less', locale)).format();
+    }
 
-      return false;
-    });
+    return false;
+  });
 
-    [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
-      const statusEl = spoilerLink.parentNode.parentNode;
-      const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
-      spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
-    });
+  [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => {
+    const statusEl = spoilerLink.parentNode.parentNode;
+    const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
+    spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
   });
 
   const toggleSidebar = () => {

app/javascript/flavours/glitch/packs/sign_up.js

@@ -13,4 +13,30 @@ ready(() => {
       console.error(error);
     });
   }, 5000);
+
+  document.querySelectorAll('.timer-button').forEach(button => {
+    let counter = 30;
+
+    const container = document.createElement('span');
+
+    const updateCounter = () => {
+      container.innerText = ` (${counter})`;
+    };
+
+    updateCounter();
+
+    const countdown = setInterval(() => {
+      counter--;
+
+      if (counter === 0) {
+        button.disabled = false;
+        button.removeChild(container);
+        clearInterval(countdown);
+      } else {
+        updateCounter();
+      }
+    }, 1000);
+
+    button.appendChild(container);
+  });
 });

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

@@ -1038,3 +1038,33 @@ $ui-header-height: 55px;
     }
   }
 }
+
+.hashtag-header {
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  padding: 15px;
+  font-size: 17px;
+  line-height: 22px;
+  color: $darker-text-color;
+
+  strong {
+    font-weight: 700;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    gap: 15px;
+
+    h1 {
+      color: $primary-text-color;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-size: 22px;
+      line-height: 33px;
+      font-weight: 700;
+    }
+  }
+}

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

@@ -147,10 +147,6 @@
     display: block;
     width: 100%;
   }
-
-  .layout-multiple-columns &.button--with-bell {
-    font-size: 12px;
-  }
 }
 
 .icon-button {
@@ -1345,16 +1341,19 @@ button.icon-button.active i.fa-retweet {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba($black, 0.5);
+    background: transparent;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     border: 0;
-    border-radius: 4px;
     color: $white;
 
     &__label {
+      background-color: rgba($black, 0.45);
+      backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+      border-radius: 6px;
+      padding: 10px 15px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -1368,6 +1367,13 @@ button.icon-button.active i.fa-retweet {
       font-weight: 400;
       font-size: 13px;
     }
+
+    &:hover,
+    &:focus {
+      .spoiler-button__overlay__label {
+        background-color: rgba($black, 0.9);
+      }
+    }
   }
 }
 

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

@@ -719,15 +719,16 @@
   }
 
   .button.button-secondary {
-    border-color: $ui-button-secondary-border-color;
-    color: $ui-button-secondary-color;
+    border-color: $inverted-text-color;
+    color: $inverted-text-color;
     flex: 0 0 auto;
 
     &:hover,
     &:focus,
     &:active {
-      border-color: $ui-button-secondary-focus-background-color;
-      color: $ui-button-secondary-focus-color;
+      background: transparent;
+      border-color: $ui-button-background-color;
+      color: $ui-button-background-color;
     }
   }
 
@@ -1412,6 +1413,44 @@ img.modal-warning {
     }
   }
 
+  &__choices {
+    display: flex;
+    gap: 40px;
+
+    &__choice {
+      flex: 1;
+      box-sizing: border-box;
+
+      h3 {
+        margin-bottom: 20px;
+      }
+
+      p {
+        color: $darker-text-color;
+        margin-bottom: 20px;
+        font-size: 15px;
+      }
+
+      .button {
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint - 1px) {
+    &__choices {
+      flex-direction: column;
+
+      &__choice {
+        margin-top: 40px;
+      }
+    }
+  }
+
   .link-button {
     font-size: inherit;
     display: inline;

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

@@ -159,6 +159,7 @@
 
     &.active {
       transform: rotate(90deg);
+      opacity: 1;
     }
 
     &:hover {

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

@@ -310,9 +310,19 @@ code {
       border-radius: 4px;
       background: url('images/void.png');
 
+      &[src$='missing.png'] {
+        visibility: hidden;
+      }
+
       &:last-child {
         margin-bottom: 0;
       }
+
+      &#account_avatar-preview {
+        width: 90px;
+        height: 90px;
+        object-fit: cover;
+      }
     }
   }
 

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

@@ -420,6 +420,10 @@ html {
   border-top: 0;
 }
 
+.column-settings__hashtags .column-select__option {
+  color: $white;
+}
+
 .dashboard__quick-access,
 .focal-point__preview strong,
 .admin-wrapper .content__heading__tabs a.selected {

app/javascript/mastodon/actions/importer/normalizer.js

@@ -76,7 +76,10 @@ export function normalizeStatus(status, normalOldStatus) {
     normalStatus.spoilerHtml = normalOldStatus.get('spoilerHtml');
     normalStatus.spoiler_text = normalOldStatus.get('spoiler_text');
     normalStatus.hidden = normalOldStatus.get('hidden');
-    normalStatus.translation = normalOldStatus.get('translation');
+
+    if (normalOldStatus.get('translation')) {
+      normalStatus.translation = normalOldStatus.get('translation');
+    }
   } else {
     // If the status has a CW but no contents, treat the CW as if it were the
     // status' contents, to avoid having a CW toggle with seemingly no effect.

app/javascript/mastodon/actions/timelines.js

@@ -145,7 +145,7 @@ export function fillTimelineGaps(timelineId, path, params = {}, done = noOp) {
 export const expandHomeTimeline            = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done);
 export const expandPublicTimeline          = ({ maxId, onlyMedia, onlyRemote } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, max_id: maxId, only_media: !!onlyMedia }, done);
 export const expandCommunityTimeline       = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done);
-export const expandAccountTimeline         = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, tagged, max_id: maxId });
+export const expandAccountTimeline         = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, exclude_reblogs: withReplies, tagged, max_id: maxId });
 export const expandAccountFeaturedTimeline = (accountId, { tagged } = {}) => expandTimeline(`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true, tagged });
 export const expandAccountMediaTimeline    = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 });
 export const expandListTimeline            = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done);

app/javascript/mastodon/components/__tests__/hashtag_bar.tsx

@@ -0,0 +1,199 @@
+import { fromJS } from 'immutable';
+
+import type { StatusLike } from '../hashtag_bar';
+import { computeHashtagBarForStatus } from '../hashtag_bar';
+
+function createStatus(
+  content: string,
+  hashtags: string[],
+  hasMedia = false,
+  spoilerText?: string,
+) {
+  return fromJS({
+    tags: hashtags.map((name) => ({ name })),
+    contentHtml: content,
+    media_attachments: hasMedia ? ['fakeMedia'] : [],
+    spoiler_text: spoilerText,
+  }) as unknown as StatusLike; // need to force the type here, as it is not properly defined
+}
+
+describe('computeHashtagBarForStatus', () => {
+  it('does nothing when there are no tags', () => {
+    const status = createStatus('<p>Simple text</p>', []);
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Simple text</p>"`,
+    );
+  });
+
+  it('displays out of band hashtags in the bar', () => {
+    const status = createStatus(
+      '<p>Simple text <a href="test">#hashtag</a></p>',
+      ['hashtag', 'test'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual(['test']);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Simple text <a href="test">#hashtag</a></p>"`,
+    );
+  });
+
+  it('extract tags from the last line', () => {
+    const status = createStatus(
+      '<p>Simple text</p><p><a href="test">#hashtag</a></p>',
+      ['hashtag'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual(['hashtag']);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Simple text</p>"`,
+    );
+  });
+
+  it('does not include tags from content', () => {
+    const status = createStatus(
+      '<p>Simple text with a <a href="test">#hashtag</a></p><p><a href="test">#hashtag</a></p>',
+      ['hashtag'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Simple text with a <a href="test">#hashtag</a></p>"`,
+    );
+  });
+
+  it('works with one line status and hashtags', () => {
+    const status = createStatus(
+      '<p><a href="test">#test</a>. And another <a href="test">#hashtag</a></p>',
+      ['hashtag', 'test'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p><a href="test">#test</a>. And another <a href="test">#hashtag</a></p>"`,
+    );
+  });
+
+  it('de-duplicate accentuated characters with case differences', () => {
+    const status = createStatus(
+      '<p>Text</p><p><a href="test">#éaa</a> <a href="test">#Éaa</a></p>',
+      ['éaa'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual(['Éaa']);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Text</p>"`,
+    );
+  });
+
+  it('handles server-side normalized tags with accentuated characters', () => {
+    const status = createStatus(
+      '<p>Text</p><p><a href="test">#éaa</a> <a href="test">#Éaa</a></p>',
+      ['eaa'], // The server may normalize the hashtags in the `tags` attribute
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual(['Éaa']);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Text</p>"`,
+    );
+  });
+
+  it('does not display in bar a hashtag in content with a case difference', () => {
+    const status = createStatus(
+      '<p>Text <a href="test">#Éaa</a></p><p><a href="test">#éaa</a></p>',
+      ['éaa'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>Text <a href="test">#Éaa</a></p>"`,
+    );
+  });
+
+  it('does not modify a status with a line of hashtags only', () => {
+    const status = createStatus(
+      '<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>',
+      ['test', 'hashtag'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>"`,
+    );
+  });
+
+  it('puts the hashtags in the bar if a status content has hashtags in the only line and has a media', () => {
+    const status = createStatus(
+      '<p>This is my content! <a href="test">#hashtag</a></p>',
+      ['hashtag'],
+      true,
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p>This is my content! <a href="test">#hashtag</a></p>"`,
+    );
+  });
+
+  it('puts the hashtags in the bar if a status content is only hashtags and has a media', () => {
+    const status = createStatus(
+      '<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>',
+      ['test', 'hashtag'],
+      true,
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual(['test', 'hashtag']);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(`""`);
+  });
+
+  it('does not use the hashtag bar if the status content is only hashtags, has a CW and a media', () => {
+    const status = createStatus(
+      '<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>',
+      ['test', 'hashtag'],
+      true,
+      'My CW text',
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>"`,
+    );
+  });
+});

app/javascript/mastodon/components/admin/ReportReasonSelector.jsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import api from 'mastodon/api';
 
 const messages = defineMessages({
+  legal: { id: 'report.categories.legal', defaultMessage: 'Legal' },
   other: { id: 'report.categories.other', defaultMessage: 'Other' },
   spam: { id: 'report.categories.spam', defaultMessage: 'Spam' },
   violation: { id: 'report.categories.violation', defaultMessage: 'Content violates one or more server rules' },
@@ -150,6 +151,7 @@ class ReportReasonSelector extends PureComponent {
     return (
       <div className='report-reason-selector'>
         <Category id='other' text={intl.formatMessage(messages.other)} selected={category === 'other'} onSelect={this.handleSelect} disabled={disabled} />
+        <Category id='legal' text={intl.formatMessage(messages.legal)} selected={category === 'legal'} onSelect={this.handleSelect} disabled={disabled} />
         <Category id='spam' text={intl.formatMessage(messages.spam)} selected={category === 'spam'} onSelect={this.handleSelect} disabled={disabled} />
         <Category id='violation' text={intl.formatMessage(messages.violation)} selected={category === 'violation'} onSelect={this.handleSelect} disabled={disabled}>
           {rules.map(rule => <Rule key={rule.id} id={rule.id} text={rule.text} selected={rule_ids.includes(rule.id)} onToggle={this.handleToggle} disabled={disabled} />)}

app/javascript/mastodon/components/badge.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import { ReactComponent as GroupsIcon } from '@material-design-icons/svg/outlined/group.svg';
+import { ReactComponent as PersonIcon } from '@material-design-icons/svg/outlined/person.svg';
+import { ReactComponent as SmartToyIcon } from '@material-design-icons/svg/outlined/smart_toy.svg';
+
+
+export const Badge = ({ icon, label, domain }) => (
+  <div className='account-role'>
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+Badge.propTypes = {
+  icon: PropTypes.node,
+  label: PropTypes.node,
+  domain: PropTypes.node,
+};
+
+Badge.defaultProps = {
+  icon: <PersonIcon />,
+};
+
+export const GroupBadge = () => (
+  <Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
+);
+
+export const AutomatedBadge = () => (
+  <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
+);

app/javascript/mastodon/components/column.jsx

@@ -16,7 +16,19 @@ export default class Column extends PureComponent {
   };
 
   scrollTop () {
-    const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable');
+    let scrollable = null;
+
+    if (this.props.bindToDocument) {
+      scrollable = document.scrollingElement;
+    } else {
+      scrollable = this.node.querySelector('.scrollable');
+
+      // Some columns have nested `.scrollable` containers, with the outer one
+      // being a wrapper while the actual scrollable content is deeper.
+      if (scrollable.classList.contains('scrollable--flex')) {
+        scrollable = scrollable?.querySelector('.scrollable') || scrollable;
+      }
+   }
 
     if (!scrollable) {
       return;

app/javascript/mastodon/components/hashtag_bar.tsx

@@ -0,0 +1,234 @@
+import { useState, useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import type { List, Record } from 'immutable';
+
+import { groupBy, minBy } from 'lodash';
+
+import { getStatusContent } from './status_content';
+
+// About two lines on desktop
+const VISIBLE_HASHTAGS = 7;
+
+// Those types are not correct, they need to be replaced once this part of the state is typed
+export type TagLike = Record<{ name: string }>;
+export type StatusLike = Record<{
+  tags: List<TagLike>;
+  contentHTML: string;
+  media_attachments: List<unknown>;
+  spoiler_text?: string;
+}>;
+
+function normalizeHashtag(hashtag: string) {
+  return (
+    hashtag && hashtag.startsWith('#') ? hashtag.slice(1) : hashtag
+  ).normalize('NFKC');
+}
+
+function isNodeLinkHashtag(element: Node): element is HTMLLinkElement {
+  return (
+    element instanceof HTMLAnchorElement &&
+    // it may be a <a> starting with a hashtag
+    (element.textContent?.[0] === '#' ||
+      // or a #<a>
+      element.previousSibling?.textContent?.[
+        element.previousSibling.textContent.length - 1
+      ] === '#')
+  );
+}
+
+/**
+ * Removes duplicates from an hashtag list, case-insensitive, keeping only the best one
+ * "Best" here is defined by the one with the more casing difference (ie, the most camel-cased one)
+ * @param hashtags The list of hashtags
+ * @returns The input hashtags, but with only 1 occurence of each (case-insensitive)
+ */
+function uniqueHashtagsWithCaseHandling(hashtags: string[]) {
+  const groups = groupBy(hashtags, (tag) =>
+    tag.normalize('NFKD').toLowerCase(),
+  );
+
+  return Object.values(groups).map((tags) => {
+    if (tags.length === 1) return tags[0];
+
+    // The best match is the one where we have the less difference between upper and lower case letter count
+    const best = minBy(tags, (tag) => {
+      const upperCase = Array.from(tag).reduce(
+        (acc, char) => (acc += char.toUpperCase() === char ? 1 : 0),
+        0,
+      );
+
+      const lowerCase = tag.length - upperCase;
+
+      return Math.abs(lowerCase - upperCase);
+    });
+
+    return best ?? tags[0];
+  });
+}
+
+// Create the collator once, this is much more efficient
+const collator = new Intl.Collator(undefined, {
+  sensitivity: 'base', // we use this to emulate the ASCII folding done on the server-side, hopefuly more efficiently
+});
+
+function localeAwareInclude(collection: string[], value: string) {
+  const normalizedValue = value.normalize('NFKC');
+
+  return !!collection.find(
+    (item) => collator.compare(item.normalize('NFKC'), normalizedValue) === 0,
+  );
+}
+
+// We use an intermediate function here to make it easier to test
+export function computeHashtagBarForStatus(status: StatusLike): {
+  statusContentProps: { statusContent: string };
+  hashtagsInBar: string[];
+} {
+  let statusContent = getStatusContent(status);
+
+  const tagNames = status
+    .get('tags')
+    .map((tag) => tag.get('name'))
+    .toJS();
+
+  // this is returned if we stop the processing early, it does not change what is displayed
+  const defaultResult = {
+    statusContentProps: { statusContent },
+    hashtagsInBar: [],
+  };
+
+  // return early if this status does not have any tags
+  if (tagNames.length === 0) return defaultResult;
+
+  const template = document.createElement('template');
+  template.innerHTML = statusContent.trim();
+
+  const lastChild = template.content.lastChild;
+
+  if (!lastChild) return defaultResult;
+
+  template.content.removeChild(lastChild);
+  const contentWithoutLastLine = template;
+
+  // First, try to parse
+  const contentHashtags = Array.from(
+    contentWithoutLastLine.content.querySelectorAll<HTMLLinkElement>('a[href]'),
+  ).reduce<string[]>((result, link) => {
+    if (isNodeLinkHashtag(link)) {
+      if (link.textContent) result.push(normalizeHashtag(link.textContent));
+    }
+    return result;
+  }, []);
+
+  // Now we parse the last line, and try to see if it only contains hashtags
+  const lastLineHashtags: string[] = [];
+  // try to see if the last line is only hashtags
+  let onlyHashtags = true;
+
+  const normalizedTagNames = tagNames.map((tag) => tag.normalize('NFKC'));
+
+  Array.from(lastChild.childNodes).forEach((node) => {
+    if (isNodeLinkHashtag(node) && node.textContent) {
+      const normalized = normalizeHashtag(node.textContent);
+
+      if (!localeAwareInclude(normalizedTagNames, normalized)) {
+        // stop here, this is not a real hashtag, so consider it as text
+        onlyHashtags = false;
+        return;
+      }
+
+      if (!localeAwareInclude(contentHashtags, normalized))
+        // only add it if it does not appear in the rest of the content
+        lastLineHashtags.push(normalized);
+    } else if (node.nodeType !== Node.TEXT_NODE || node.nodeValue?.trim()) {
+      // not a space
+      onlyHashtags = false;
+    }
+  });
+
+  const hashtagsInBar = tagNames.filter((tag) => {
+    const normalizedTag = tag.normalize('NFKC');
+    // the tag does not appear at all in the status content, it is an out-of-band tag
+    return (
+      !localeAwareInclude(contentHashtags, normalizedTag) &&
+      !localeAwareInclude(lastLineHashtags, normalizedTag)
+    );
+  });
+
+  const isOnlyOneLine = contentWithoutLastLine.content.childElementCount === 0;
+  const hasMedia = status.get('media_attachments').size > 0;
+  const hasSpoiler = !!status.get('spoiler_text');
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- due to https://github.com/microsoft/TypeScript/issues/9998
+  if (onlyHashtags && ((hasMedia && !hasSpoiler) || !isOnlyOneLine)) {
+    // if the last line only contains hashtags, and we either:
+    // - have other content in the status
+    // - dont have other content, but a media and no CW. If it has a CW, then we do not remove the content to avoid having an empty content behind the CW button
+    statusContent = contentWithoutLastLine.innerHTML;
+    // and add the tags to the bar
+    hashtagsInBar.push(...lastLineHashtags);
+  }
+
+  return {
+    statusContentProps: { statusContent },
+    hashtagsInBar: uniqueHashtagsWithCaseHandling(hashtagsInBar),
+  };
+}
+
+/**
+ *  This function will process a status to, at the same time (avoiding parsing it twice):
+ * - build the HashtagBar for this status
+ * - remove the last-line hashtags from the status content
+ * @param status The status to process
+ * @returns Props to be passed to the <StatusContent> component, and the hashtagBar to render
+ */
+export function getHashtagBarForStatus(status: StatusLike) {
+  const { statusContentProps, hashtagsInBar } =
+    computeHashtagBarForStatus(status);
+
+  return {
+    statusContentProps,
+    hashtagBar: <HashtagBar hashtags={hashtagsInBar} />,
+  };
+}
+
+const HashtagBar: React.FC<{
+  hashtags: string[];
+}> = ({ hashtags }) => {
+  const [expanded, setExpanded] = useState(false);
+  const handleClick = useCallback(() => {
+    setExpanded(true);
+  }, []);
+
+  if (hashtags.length === 0) {
+    return null;
+  }
+
+  const revealedHashtags = expanded
+    ? hashtags
+    : hashtags.slice(0, VISIBLE_HASHTAGS - 1);
+
+  return (
+    <div className='hashtag-bar'>
+      {revealedHashtags.map((hashtag) => (
+        <Link key={hashtag} to={`/tags/${hashtag}`}>
+          #<span>{hashtag}</span>
+        </Link>
+      ))}
+
+      {!expanded && hashtags.length > VISIBLE_HASHTAGS && (
+        <button className='link-button' onClick={handleClick}>
+          <FormattedMessage
+            id='hashtags.and_other'
+            defaultMessage='…and {count, plural, other {# more}}'
+            values={{ count: hashtags.length - VISIBLE_HASHTAGS }}
+          />
+        </button>
+      )}
+    </div>
+  );
+};

app/javascript/mastodon/components/status.jsx

@@ -22,6 +22,7 @@ import { displayMedia } from '../initial_state';
 import { Avatar } from './avatar';
 import { AvatarOverlay } from './avatar_overlay';
 import { DisplayName } from './display_name';
+import { getHashtagBarForStatus } from './hashtag_bar';
 import { RelativeTimestamp } from './relative_timestamp';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
@@ -544,6 +545,9 @@ class Status extends ImmutablePureComponent {
 
     const visibilityIcon = visibilityIconInfo[status.get('visibility')];
 
+    const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
+    const expanded = !status.get('hidden')
+
     return (
       <HotKeys handlers={handlers}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
@@ -571,15 +575,18 @@ class Status extends ImmutablePureComponent {
             <StatusContent
               status={status}
               onClick={this.handleClick}
-              expanded={!status.get('hidden')}
+              expanded={expanded}
               onExpandedToggle={this.handleExpandedToggle}
               onTranslate={this.handleTranslate}
               collapsible
               onCollapsedToggle={this.handleCollapsedToggle}
+              {...statusContentProps}
             />
 
             {media}
 
+            {expanded && hashtagBar}
+
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
           </div>
         </div>

app/javascript/mastodon/components/status_content.jsx

@@ -15,6 +15,15 @@ import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_s
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
 
+/**
+ *
+ * @param {any} status
+ * @returns {string}
+ */
+export function getStatusContent(status) {
+  return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
+}
+
 class TranslateButton extends PureComponent {
 
   static propTypes = {
@@ -65,6 +74,7 @@ class StatusContent extends PureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    statusContent: PropTypes.string,
     expanded: PropTypes.bool,
     onExpandedToggle: PropTypes.func,
     onTranslate: PropTypes.func,
@@ -225,7 +235,7 @@ class StatusContent extends PureComponent {
   };
 
   render () {
-    const { status, intl } = this.props;
+    const { status, intl, statusContent } = this.props;
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
     const renderReadMore = this.props.onClick && status.get('collapsed');
@@ -233,7 +243,7 @@ class StatusContent extends PureComponent {
     const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
     const renderTranslate = this.props.onTranslate && this.context.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
-    const content = { __html: status.getIn(['translation', 'contentHtml']) || status.get('contentHtml') };
+    const content = { __html: statusContent ?? getStatusContent(status) };
     const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
     const language = status.getIn(['translation', 'language']) || status.get('language');
     const classNames = classnames('status__content', {

app/javascript/mastodon/features/account/components/header.jsx

@@ -10,6 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Avatar } from 'mastodon/components/avatar';
+import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
 import Button from 'mastodon/components/button';
 import { FollowersCounter, FollowingCounter, StatusesCounter } from 'mastodon/components/counters';
 import { Icon }  from 'mastodon/components/icon';
@@ -264,9 +265,9 @@ class Header extends ImmutablePureComponent {
       if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded
         actionBtn = '';
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className={classNames({ 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
+        actionBtn = <Button text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
+        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }
@@ -373,28 +374,13 @@ class Header extends ImmutablePureComponent {
     const badges = [];
 
     if (account.get('bot')) {
-      badges.push(
-        <div key='bot-badge' className='account-role bot'>
-          <Icon id='cogs' /> { ' ' }
-          <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
-        </div>
-      );
+      badges.push(<AutomatedBadge key='bot-badge' />);
     } else if (account.get('group')) {
-      badges.push(
-        <div key='group-badge' className='account-role group'>
-          <Icon id='users' /> { ' ' }
-          <FormattedMessage id='account.badges.group' defaultMessage='Group' />
-        </div>
-      );
+      badges.push(<GroupBadge key='group-badge' />);
     }
 
     account.get('roles', []).forEach((role) => {
-      badges.push(
-        <div key={`role-badge-${role.get('id')}`} className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>
-          <Icon id='circle' /> { ' ' }
-          <span>{role.get('name')} ({domain})</span>
-        </div>
-      );
+      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} />);
     });
 
     return (

app/javascript/mastodon/features/explore/components/story.jsx

@@ -22,6 +22,7 @@ export default class Story extends PureComponent {
     author: PropTypes.string,
     sharedTimes: PropTypes.number,
     thumbnail: PropTypes.string,
+    thumbnailDescription: PropTypes.string,
     blurhash: PropTypes.string,
     expanded: PropTypes.bool,
   };
@@ -33,7 +34,7 @@ export default class Story extends PureComponent {
   handleImageLoad = () => this.setState({ thumbnailLoaded: true });
 
   render () {
-    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, blurhash } = this.props;
+    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, thumbnailDescription, blurhash } = this.props;
 
     const { thumbnailLoaded } = this.state;
 
@@ -49,7 +50,7 @@ export default class Story extends PureComponent {
           {thumbnail ? (
             <>
               <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
-              <img src={thumbnail} onLoad={this.handleImageLoad} alt='' role='presentation' />
+              <img src={thumbnail} onLoad={this.handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
             </>
           ) : <Skeleton />}
         </div>

app/javascript/mastodon/features/explore/links.jsx

@@ -67,6 +67,7 @@ class Links extends PureComponent {
             author={link.get('author_name')}
             sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1}
             thumbnail={link.get('image')}
+            thumbnailDescription={link.get('image_description')}
             blurhash={link.get('blurhash')}
           />
         ))}

app/javascript/mastodon/features/explore/results.jsx

@@ -108,10 +108,10 @@ class Results extends PureComponent {
     return (
       <>
         <div className='account__section-headline'>
-          <button onClick={this.handleSelectAll} className={type === 'all' && 'active'}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
-          <button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
-          <button onClick={this.handleSelectHashtags} className={type === 'hashtags' && 'active'}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
-          <button onClick={this.handleSelectStatuses} className={type === 'statuses' && 'active'}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
+          <button onClick={this.handleSelectAll} className={type === 'all' ? 'active' : undefined}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
+          <button onClick={this.handleSelectAccounts} className={type === 'accounts' ? 'active' : undefined}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
+          <button onClick={this.handleSelectHashtags} className={type === 'hashtags' ? 'active' : undefined}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
+          <button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
         </div>
 
         <div className='explore__search-results'>

app/javascript/mastodon/features/hashtag_timeline/components/hashtag_header.jsx

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import Button from 'mastodon/components/button';
+import { ShortNumber } from 'mastodon/components/short_number';
+
+const messages = defineMessages({
+  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
+  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
+});
+
+const usesRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='hashtag.counter_by_uses'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+const peopleRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='hashtag.counter_by_accounts'
+    defaultMessage='{count, plural, one {{counter} participant} other {{counter} participants}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+const usesTodayRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='hashtag.counter_by_uses_today'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}} today'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const HashtagHeader = injectIntl(({ tag, intl, disabled, onClick }) => {
+  if (!tag) {
+    return null;
+  }
+
+  const [uses, people] = tag.get('history').reduce((arr, day) => [arr[0] + day.get('uses') * 1, arr[1] + day.get('accounts') * 1], [0, 0]);
+  const dividingCircle = <span aria-hidden>{' · '}</span>;
+
+  return (
+    <div className='hashtag-header'>
+      <div className='hashtag-header__header'>
+        <h1>#{tag.get('name')}</h1>
+        <Button onClick={onClick} text={intl.formatMessage(tag.get('following') ? messages.unfollowHashtag : messages.followHashtag)} disabled={disabled} />
+      </div>
+
+      <div>
+        <ShortNumber value={uses} renderer={usesRenderer} />
+        {dividingCircle}
+        <ShortNumber value={people} renderer={peopleRenderer} />
+        {dividingCircle}
+        <ShortNumber value={tag.getIn(['history', 0, 'uses']) * 1} renderer={usesTodayRenderer} />
+      </div>
+    </div>
+  );
+});
+
+HashtagHeader.propTypes = {
+  tag: ImmutablePropTypes.map,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  intl: PropTypes.object,
+};

app/javascript/mastodon/features/hashtag_timeline/index.jsx

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
-import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -17,17 +16,12 @@ import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/t
 import { expandHashtagTimeline, clearTimeline } from 'mastodon/actions/timelines';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
-import { Icon }  from 'mastodon/components/icon';
 
 import StatusListContainer from '../ui/containers/status_list_container';
 
+import { HashtagHeader } from './components/hashtag_header';
 import ColumnSettingsContainer from './containers/column_settings_container';
 
-const messages = defineMessages({
-  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
-  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
-});
-
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}${props.params.local ? ':local' : ''}`, 'unread']) > 0,
   tag: state.getIn(['tags', props.params.id]),
@@ -48,7 +42,6 @@ class HashtagTimeline extends PureComponent {
     hasUnread: PropTypes.bool,
     tag: ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
-    intl: PropTypes.object,
   };
 
   handlePin = () => {
@@ -188,27 +181,11 @@ class HashtagTimeline extends PureComponent {
   };
 
   render () {
-    const { hasUnread, columnId, multiColumn, tag, intl } = this.props;
+    const { hasUnread, columnId, multiColumn, tag } = this.props;
     const { id, local } = this.props.params;
     const pinned = !!columnId;
     const { signedIn } = this.context.identity;
 
-    let followButton;
-
-    if (tag) {
-      const following = tag.get('following');
-
-      const classes = classNames('column-header__button', {
-        active: following,
-      });
-
-      followButton = (
-        <button className={classes} onClick={this.handleFollow} disabled={!signedIn} title={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)} aria-label={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)}>
-          <Icon id={following ? 'user-times' : 'user-plus'} fixedWidth className='column-header__icon' />
-        </button>
-      );
-    }
-
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={`#${id}`}>
         <ColumnHeader
@@ -220,13 +197,14 @@ class HashtagTimeline extends PureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
-          extraButton={followButton}
           showBackButton
         >
           {columnId && <ColumnSettingsContainer columnId={columnId} />}
         </ColumnHeader>
 
         <StatusListContainer
+          prepend={pinned ? null : <HashtagHeader tag={tag} disabled={!signedIn} onClick={this.handleFollow} />}
+          alwaysPrepend
           trackScroll={!pinned}
           scrollKey={`hashtag_timeline-${columnId}`}
           timelineId={`hashtag:${id}${local ? ':local' : ''}`}
@@ -245,4 +223,4 @@ class HashtagTimeline extends PureComponent {
 
 }
 
-export default connect(mapStateToProps)(injectIntl(HashtagTimeline));
+export default connect(mapStateToProps)(HashtagTimeline);

app/javascript/mastodon/features/interaction_modal/index.jsx

@@ -13,7 +13,7 @@ import { openModal, closeModal } from 'mastodon/actions/modal';
 import api from 'mastodon/api';
 import Button from 'mastodon/components/button';
 import { Icon }  from 'mastodon/components/icon';
-import { registrationsOpen } from 'mastodon/initial_state';
+import { registrationsOpen, sso_redirect } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   loginPrompt: { id: 'interaction_modal.login.prompt', defaultMessage: 'Domain of your home server, e.g. mastodon.social' },
@@ -21,12 +21,16 @@ const messages = defineMessages({
 
 const mapStateToProps = (state, { accountId }) => ({
   displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
+  signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
 });
 
 const mapDispatchToProps = (dispatch) => ({
   onSignupClick() {
-    dispatch(closeModal());
-    dispatch(openModal('CLOSED_REGISTRATIONS'));
+    dispatch(closeModal({
+        modalType: undefined,
+        ignoreFocus: false,
+      }));
+    dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
   },
 });
 
@@ -250,6 +254,9 @@ class LoginForm extends React.PureComponent {
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
             onKeyDown={this.handleKeyDown}
+            autocomplete='off'
+            autocapitalize='off'
+            spellcheck='false'
           />
 
           <Button onClick={this.handleSubmit} disabled={isSubmitting}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
@@ -291,6 +298,7 @@ class InteractionModal extends React.PureComponent {
     url: PropTypes.string,
     type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
     onSignupClick: PropTypes.func.isRequired,
+    signupUrl: PropTypes.string.isRequired,
   };
 
   handleSignupClick = () => {
@@ -298,7 +306,7 @@ class InteractionModal extends React.PureComponent {
   };
 
   render () {
-    const { url, type, displayNameHtml } = this.props;
+    const { url, type, displayNameHtml, signupUrl } = this.props;
 
     const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
 
@@ -329,9 +337,15 @@ class InteractionModal extends React.PureComponent {
 
     let signupButton;
 
-    if (registrationsOpen) {
+    if (sso_redirect) {
       signupButton = (
-        <a href='/auth/sign_up' className='link-button'>
+        <a href={sso_redirect} data-method='post' className='link-button'>
+          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+        </a>
+      );
+    } else if (registrationsOpen) {
+      signupButton = (
+        <a href={signupUrl} className='link-button'>
           <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
         </a>
       );

app/javascript/mastodon/features/public_timeline/index.jsx

@@ -29,7 +29,7 @@ const mapStateToProps = (state, { columnId }) => {
   const index = columns.findIndex(c => c.get('uuid') === uuid);
   const onlyMedia = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'public', 'other', 'onlyMedia']);
   const onlyRemote = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyRemote']) : state.getIn(['settings', 'public', 'other', 'onlyRemote']);
-  const timelineState = state.getIn(['timelines', `public${onlyMedia ? ':media' : ''}`]);
+  const timelineState = state.getIn(['timelines', `public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`]);
 
   return {
     hasUnread: !!timelineState && timelineState.get('unread') > 0,

app/javascript/mastodon/features/status/components/card.jsx

@@ -5,7 +5,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 import Immutable from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -71,6 +71,7 @@ export default class Card extends PureComponent {
     if (!Immutable.is(this.props.card, nextProps.card)) {
       this.setState({ embedded: false, previewLoaded: false });
     }
+
     if (this.props.sensitive !== nextProps.sensitive) {
       this.setState({ revealed: !nextProps.sensitive });
     }
@@ -84,35 +85,8 @@ export default class Card extends PureComponent {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  handlePhotoClick = () => {
-    const { card, onOpenMedia } = this.props;
-
-    onOpenMedia(
-      Immutable.fromJS([
-        {
-          type: 'image',
-          url: card.get('embed_url'),
-          description: card.get('title'),
-          meta: {
-            original: {
-              width: card.get('width'),
-              height: card.get('height'),
-            },
-          },
-        },
-      ]),
-      0,
-    );
-  };
-
   handleEmbedClick = () => {
-    const { card } = this.props;
-
-    if (card.get('type') === 'photo') {
-      this.handlePhotoClick();
-    } else {
-      this.setState({ embedded: true });
-    }
+    this.setState({ embedded: true });
   };
 
   setRef = c => {
@@ -130,15 +104,15 @@ export default class Card extends PureComponent {
   };
 
   renderVideo () {
-    const { card }  = this.props;
-    const content   = { __html: addAutoPlay(card.get('html')) };
+    const { card } = this.props;
+    const content = { __html: addAutoPlay(card.get('html')) };
 
     return (
       <div
         ref={this.setRef}
         className='status-card__image status-card-video'
         dangerouslySetInnerHTML={content}
-        style={{ aspectRatio: `${card.get('width')} / ${card.get('height')}` }}
+        style={{ aspectRatio: '16 / 9' }}
       />
     );
   }
@@ -152,30 +126,40 @@ export default class Card extends PureComponent {
     }
 
     const provider    = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
-    const interactive = card.get('type') !== 'link';
+    const interactive = card.get('type') === 'video';
     const language    = card.get('language') || '';
+    const largeImage  = (card.get('image')?.length > 0 && card.get('width') > card.get('height')) || interactive;
 
     const description = (
       <div className='status-card__content'>
         <span className='status-card__host'>
           <span lang={language}>{provider}</span>
           {card.get('published_at') && <> · <RelativeTimestamp timestamp={card.get('published_at')} /></>}
-         </span>
+        </span>
+
         <strong className='status-card__title' title={card.get('title')} lang={language}>{card.get('title')}</strong>
-        {card.get('author_name').length > 0 && <span className='status-card__author'><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{card.get('author_name')}</strong> }} /></span>}
+
+        {card.get('author_name').length > 0 ? <span className='status-card__author'><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{card.get('author_name')}</strong> }} /></span> : <span className='status-card__description'>{card.get('description')}</span>}
       </div>
     );
 
     const thumbnailStyle = {
       visibility: revealed ? null : 'hidden',
-      aspectRatio: `${card.get('width')} / ${card.get('height')}`
     };
 
+    if (largeImage && card.get('type') === 'video') {
+      thumbnailStyle.aspectRatio = `16 / 9`;
+    } else if (largeImage) {
+      thumbnailStyle.aspectRatio = '1.91 / 1';
+    } else {
+      thumbnailStyle.aspectRatio = 1;
+    }
+
     let embed;
 
     let canvas = (
       <Blurhash
-        className={classnames('status-card__image-preview', {
+        className={classNames('status-card__image-preview', {
           'status-card__image-preview--hidden': revealed && this.state.previewLoaded,
         })}
         hash={card.get('blurhash')}
@@ -183,7 +167,8 @@ export default class Card extends PureComponent {
       />
     );
 
-    let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
+    const thumbnailDescription = card.get('image_description');
+    const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
 
     let spoilerButton = (
       <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
@@ -195,7 +180,7 @@ export default class Card extends PureComponent {
     );
 
     spoilerButton = (
-      <div className={classnames('spoiler-button', { 'spoiler-button--minified': revealed })}>
+      <div className={classNames('spoiler-button', { 'spoiler-button--minified': revealed })}>
         {spoilerButton}
       </div>
     );
@@ -204,33 +189,25 @@ export default class Card extends PureComponent {
       if (embedded) {
         embed = this.renderVideo();
       } else {
-        let iconVariant = 'play';
-
-        if (card.get('type') === 'photo') {
-          iconVariant = 'search-plus';
-        }
-
         embed = (
           <div className='status-card__image'>
             {canvas}
             {thumbnail}
 
-            {revealed && (
-              <div className='status-card__actions'>
+            {revealed ? (
+              <div className='status-card__actions' onClick={this.handleEmbedClick} role='none'>
                 <div>
-                  <button type='button' onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
+                  <button type='button' onClick={this.handleEmbedClick}><Icon id='play' /></button>
                   <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>
                 </div>
               </div>
-            )}
-
-            {!revealed && spoilerButton}
+            ) : spoilerButton}
           </div>
         );
       }
 
       return (
-        <div className='status-card' ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
+        <div className={classNames('status-card', { expanded: largeImage })} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
           {embed}
           <a href={card.get('url')} target='_blank' rel='noopener noreferrer'>{description}</a>
         </div>
@@ -244,14 +221,14 @@ export default class Card extends PureComponent {
       );
     } else {
       embed = (
-        <div className='status-card__image' style={{ aspectRatio: '1.9 / 1' }}>
+        <div className='status-card__image'>
           <Icon id='file-text' />
         </div>
       );
     }
 
     return (
-      <a href={card.get('url')} className='status-card' target='_blank' rel='noopener noreferrer' ref={this.setRef}>
+      <a href={card.get('url')} className={classNames('status-card', { expanded: largeImage })} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
         {embed}
         {description}
       </a>

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { AnimatedNumber } from 'mastodon/components/animated_number';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
+import { getHashtagBarForStatus } from 'mastodon/components/hashtag_bar';
 import { Icon }  from 'mastodon/components/icon';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 
@@ -291,6 +292,9 @@ class DetailedStatus extends ImmutablePureComponent {
       );
     }
 
+    const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
+    const expanded = !status.get('hidden')
+
     return (
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
@@ -310,10 +314,13 @@ class DetailedStatus extends ImmutablePureComponent {
             expanded={!status.get('hidden')}
             onExpandedToggle={this.handleExpandedToggle}
             onTranslate={this.handleTranslate}
+            {...statusContentProps}
           />
 
           {media}
 
+          {expanded && hashtagBar}
+
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} target='_blank' rel='noopener noreferrer'>
               <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />

app/javascript/mastodon/features/status/index.jsx

@@ -568,7 +568,7 @@ class Status extends ImmutablePureComponent {
         onMoveUp={this.handleMoveUp}
         onMoveDown={this.handleMoveDown}
         contextType='thread'
-        previousId={i > 0 && list.get(i - 1)}
+        previousId={i > 0 ? list.get(i - 1) : undefined}
         nextId={list.get(i + 1) || (ancestors && statusId)}
         rootId={statusId}
       />

app/javascript/mastodon/features/ui/components/focal_point_modal.jsx

@@ -434,4 +434,4 @@ class FocalPointModal extends ImmutablePureComponent {
 
 export default connect(mapStateToProps, mapDispatchToProps, null, {
   forwardRef: true,
-})(injectIntl(FocalPointModal, { withRef: true }));
+})(injectIntl(FocalPointModal, { forwardRef: true }));

app/javascript/mastodon/features/ui/components/header.jsx

@@ -12,7 +12,7 @@ import { fetchServer } from 'mastodon/actions/server';
 import { Avatar } from 'mastodon/components/avatar';
 import { Icon } from 'mastodon/components/icon';
 import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo';
-import { registrationsOpen, me } from 'mastodon/initial_state';
+import { registrationsOpen, me, sso_redirect } from 'mastodon/initial_state';
 
 const Account = connect(state => ({
   account: state.getIn(['accounts', me]),
@@ -73,28 +73,35 @@ class Header extends PureComponent {
         </>
       );
     } else {
-      let signupButton;
 
-      if (registrationsOpen) {
-        signupButton = (
-          <a href={signupUrl} className='button'>
-            <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-          </a>
-        );
+      if (sso_redirect) {
+        content = (
+            <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+        )
       } else {
-        signupButton = (
-          <button className='button' onClick={openClosedRegistrationsModal}>
-            <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-          </button>
+        let signupButton;
+
+        if (registrationsOpen) {
+          signupButton = (
+            <a href={signupUrl} className='button'>
+              <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+            </a>
+          );
+        } else {
+          signupButton = (
+            <button className='button' onClick={openClosedRegistrationsModal}>
+              <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
+            </button>
+          );
+        }
+
+        content = (
+          <>
+            {signupButton}
+            <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
+          </>
         );
       }
-
-      content = (
-        <>
-          {signupButton}
-          <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
-        </>
-      );
     }
 
     return (

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -97,14 +97,7 @@ export default class ModalRoot extends PureComponent {
 
   handleClose = (ignoreFocus = false) => {
     const { onClose } = this.props;
-    let message = null;
-    try {
-      message = this._modal?.getWrappedInstance?.().getCloseConfirmationMessage?.();
-    } catch (_) {
-      // injectIntl defines `getWrappedInstance` but errors out if `withRef`
-      // isn't set.
-      // This would be much smoother with react-intl 3+ and `forwardRef`.
-    }
+    const message = this._modal?.getCloseConfirmationMessage?.();
     onClose(message, ignoreFocus);
   };
 
@@ -122,7 +115,10 @@ export default class ModalRoot extends PureComponent {
         {visible && (
           <>
             <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
-              {(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
+              {(SpecificComponent) => {
+                const ref = typeof SpecificComponent !== 'function' ? this.setModalRef : undefined;
+                return <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={ref} />
+              }}
             </BundleContainer>
 
             <Helmet>

app/javascript/mastodon/features/ui/components/report_modal.jsx

@@ -62,7 +62,7 @@ class ReportModal extends ImmutablePureComponent {
     dispatch(submitReport({
       account_id: accountId,
       status_ids: selectedStatusIds.toArray(),
-      selected_domains: selectedDomains.toArray(),
+      forward_to_domains: selectedDomains.toArray(),
       comment,
       forward: selectedDomains.size > 0,
       category,

app/javascript/mastodon/features/ui/components/sign_in_banner.jsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 
 import { openModal } from 'mastodon/actions/modal';
-import { registrationsOpen } from 'mastodon/initial_state';
+import { registrationsOpen, sso_redirect } from 'mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
 const SignInBanner = () => {
@@ -19,6 +19,15 @@ const SignInBanner = () => {
 
   const signupUrl = useAppSelector((state) => state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up');
 
+  if (sso_redirect) {
+    return (
+      <div className='sign-in-banner'>
+        <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favorite, share and reply to posts. You can also interact from your account on a different server.' /></p>
+        <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
+      </div>
+    )
+  }
+
   if (registrationsOpen) {
     signupButton = (
       <a href={signupUrl} className='button button--block'>

app/javascript/mastodon/initial_state.js

@@ -80,6 +80,7 @@
  * @property {boolean} use_blurhash
  * @property {boolean=} use_pending_items
  * @property {string} version
+ * @property {string} sso_redirect
  */
 
 /**
@@ -142,6 +143,7 @@ export const version = getMeta('version');
 export const languages = initialState?.languages;
 // @ts-expect-error
 export const statusPageUrl = getMeta('status_page_url');
+export const sso_redirect = getMeta('sso_redirect');
 
 // Glitch-soc-specific settings
 export const maxChars = (initialState && initialState.max_toot_chars) || 500;

app/javascript/mastodon/locales/af.json

@@ -181,7 +181,6 @@
   "home.column_settings.show_reblogs": "Wys aangestuurde plasings",
   "interaction_modal.description.reblog": "Met 'n rekening op Mastodon kan jy hierdie plasing aanstuur om dit met jou volgers te deel.",
   "interaction_modal.description.reply": "Met 'n rekening op Mastodon kan jy op hierdie plasing reageer.",
-  "interaction_modal.preamble": "Omdat Mastodon gedesentraliseer is, hoef jy nie ’n rekening op hierdie bediener te hê nie. Jy kan jy jou bestaande Mastodonrekening gebruik, al word dit op 'n ander Mastodonbediener of versoenbare platform waar ook al gehuisves.",
   "interaction_modal.title.reblog": "Stuur {name} se plasing aan",
   "interaction_modal.title.reply": "Reageer op {name} se plasing",
   "keyboard_shortcuts.back": "Navigeer terug",

app/javascript/mastodon/locales/an.json

@@ -172,7 +172,6 @@
   "conversation.open": "Veyer conversación",
   "conversation.with": "Con {names}",
   "copypaste.copied": "Copiau",
-  "copypaste.copy": "Copiar",
   "directory.federated": "Dende lo fediverso conoixiu",
   "directory.local": "Nomás de {domain}",
   "directory.new_arrivals": "Recientment plegaus",
@@ -276,7 +275,6 @@
   "interaction_modal.description.reply": "Con una cuenta en Mastodon, puetz responder a esta publicación.",
   "interaction_modal.on_another_server": "En un servidor diferent",
   "interaction_modal.on_this_server": "En este servidor",
-  "interaction_modal.preamble": "Ya que Mastodon ye descentralizau, puetz usar la tuya cuenta existent alochada en unatro servidor Mastodon u plataforma compatible si no tiens una cuenta en este servidor.",
   "interaction_modal.title.follow": "Seguir a {name}",
   "interaction_modal.title.reblog": "Empentar la publicación de {name}",
   "interaction_modal.title.reply": "Responder a la publicación de {name}",