Update dependency pg to v1.5.5 (#29230)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.devcontainer/docker-compose.yml

@@ -70,7 +70,7 @@ services:
         hard: -1
 
   libretranslate:
-    image: libretranslate/libretranslate:v1.3.12
+    image: libretranslate/libretranslate:v1.4.1
     restart: unless-stopped
     volumes:
       - lt-data:/home/libretranslate/.local

.dockerignore

@@ -8,6 +8,7 @@
 public/system
 public/assets
 public/packs
+public/packs-test
 node_modules
 neo4j
 vendor/bundle

.env.test

@@ -1,5 +1,5 @@
-# Node.js
-NODE_ENV=tests
+# In test, compile the NodeJS code as if we are in production
+NODE_ENV=production
 # Federation
 LOCAL_DOMAIN=cb6e6126.ngrok.io
 LOCAL_HTTPS=true

.github/workflows/test-ruby.yml

@@ -48,12 +48,15 @@ jobs:
         run: |-
           ./bin/rails assets:precompile
 
+      - name: Archive asset artifacts
+        run: |
+          tar --exclude={"*.br","*.gz"} -zcf artifacts.tar.gz public/assets public/packs*
+
       - uses: actions/upload-artifact@v3
         if: matrix.mode == 'test'
         with:
           path: |-
-            ./public/assets
-            ./public/packs-test
+            ./artifacts.tar.gz
           name: ${{ github.sha }}
           retention-days: 0
 
@@ -102,7 +105,6 @@ jobs:
       SAML_ENABLED: true
       CAS_ENABLED: true
       BUNDLE_WITH: 'pam_authentication test'
-      CI_JOBS: ${{ matrix.ci_job }}/4
       GITHUB_RSPEC: ${{ matrix.ruby-version == '.ruby-version' && github.event.pull_request && 'true' }}
 
     strategy:
@@ -112,19 +114,18 @@ jobs:
           - '3.0'
           - '3.1'
           - '.ruby-version'
-        ci_job:
-          - 1
-          - 2
-          - 3
-          - 4
     steps:
       - uses: actions/checkout@v4
 
       - uses: actions/download-artifact@v3
         with:
-          path: './public'
+          path: './'
           name: ${{ github.sha }}
 
+      - name: Expand archived asset artifacts
+        run: |
+          tar xvzf artifacts.tar.gz
+
       - name: Set up Ruby environment
         uses: ./.github/actions/setup-ruby
         with:
@@ -134,7 +135,7 @@ jobs:
       - name: Load database schema
         run: './bin/rails db:create db:schema:load db:seed'
 
-      - run: bundle exec rake rspec_chunked
+      - run: bin/rspec
 
   test-e2e:
     name: End to End testing

.haml-lint.yml

@@ -12,3 +12,5 @@ linters:
     enabled: true
   MiddleDot:
     enabled: true
+  LineLength:
+    max: 320

.haml-lint_todo.yml

@@ -1,21 +1,34 @@
 # This configuration was generated by
 # `haml-lint --auto-gen-config`
-# on 2023-10-25 08:29:48 -0400 using Haml-Lint version 0.51.0.
+# on 2023-10-26 09:32:34 -0400 using Haml-Lint version 0.51.0.
 # The point is for the user to remove these configuration records
 # one by one as the lints are removed from the code base.
 # Note that changes in the inspected code, or installation of new
 # versions of Haml-Lint, may require this file to be generated again.
 
 linters:
-  # Offense count: 945
+  # Offense count: 16
   LineLength:
-    enabled: false
+    exclude:
+      - 'app/views/admin/account_actions/new.html.haml'
+      - 'app/views/admin/accounts/index.html.haml'
+      - 'app/views/admin/ip_blocks/new.html.haml'
+      - 'app/views/admin/roles/_form.html.haml'
+      - 'app/views/admin/settings/discovery/show.html.haml'
+      - 'app/views/auth/registrations/edit.html.haml'
+      - 'app/views/auth/registrations/new.html.haml'
+      - 'app/views/filters/_filter_fields.html.haml'
+      - 'app/views/media/player.html.haml'
+      - 'app/views/settings/applications/_fields.html.haml'
+      - 'app/views/settings/imports/index.html.haml'
+      - 'app/views/settings/preferences/appearance/show.html.haml'
+      - 'app/views/settings/preferences/notifications/show.html.haml'
+      - 'app/views/settings/preferences/other/show.html.haml'
 
-  # Offense count: 10
+  # Offense count: 9
   RuboCop:
     exclude:
       - 'app/views/admin/accounts/_buttons.html.haml'
       - 'app/views/admin/accounts/_local_account.html.haml'
-      - 'app/views/admin/accounts/index.html.haml'
       - 'app/views/admin/roles/_form.html.haml'
       - 'app/views/layouts/application.html.haml'

.rubocop.yml

@@ -27,7 +27,7 @@ AllCops:
     - 'node_modules/**/*'
     - 'Vagrantfile'
     - 'vendor/**/*'
-    - 'lib/json_ld/*' # Generated files
+    - 'config/initializers/json_ld*' # Generated files
     - 'lib/mastodon/migration_helpers.rb' # Vendored from GitLab
     - 'lib/templates/**/*'
 
@@ -109,16 +109,11 @@ Rails/Exit:
 # https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecfilepath
 RSpec/FilePath:
   CustomTransform:
-    ActivityPub: activitypub # Ignore the snake_case due to the amount of files to rename
+    ActivityPub: activitypub
     DeepL: deepl
     FetchOEmbedService: fetch_oembed_service
-    JsonLdHelper: jsonld_helper
     OEmbedController: oembed_controller
     OStatus: ostatus
-    NodeInfoController: nodeinfo_controller # NodeInfo isn't snake_cased for any of the instances
-  Exclude:
-    - 'spec/config/initializers/rack_attack_spec.rb' # namespaces usually have separate folder
-    - 'spec/lib/sanitize_config_spec.rb' # namespaces usually have separate folder
 
 # Reason:
 # https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecnamedsubject
@@ -135,6 +130,16 @@ RSpec/NotToNot:
 RSpec/Rails/HttpStatus:
   EnforcedStyle: numeric
 
+# Reason: Match overrides from Rspec/FilePath rule above
+# https://docs.rubocop.org/rubocop-rspec/cops_rspec.html#rspecspecfilepathformat
+RSpec/SpecFilePathFormat:
+  CustomTransform:
+    ActivityPub: activitypub
+    DeepL: deepl
+    FetchOEmbedService: fetch_oembed_service
+    OEmbedController: oembed_controller
+    OStatus: ostatus
+
 # Reason:
 # https://docs.rubocop.org/rubocop/cops_style.html#styleclassandmodulechildren
 Style/ClassAndModuleChildren:

.rubocop_todo.yml

@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config --auto-gen-only-exclude --no-exclude-limit --no-offense-counts --no-auto-gen-timestamp`
-# using RuboCop version 1.57.1.
+# using RuboCop version 1.57.2.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new
@@ -20,25 +20,10 @@ Layout/LineLength:
   Exclude:
     - 'app/models/account.rb'
 
-# Configuration parameters: AllowComments, AllowEmptyLambdas.
-Lint/EmptyBlock:
-  Exclude:
-    - 'spec/controllers/api/v2/search_controller_spec.rb'
-    - 'spec/fabricators/access_token_fabricator.rb'
-    - 'spec/fabricators/conversation_fabricator.rb'
-    - 'spec/fabricators/system_key_fabricator.rb'
-    - 'spec/lib/activitypub/adapter_spec.rb'
-    - 'spec/models/user_role_spec.rb'
-
 Lint/NonLocalExitFromIterator:
   Exclude:
     - 'app/helpers/jsonld_helper.rb'
 
-# This cop supports unsafe autocorrection (--autocorrect-all).
-Lint/OrAssignmentToConstant:
-  Exclude:
-    - 'lib/sanitize_ext/sanitize_config.rb'
-
 # This cop supports safe autocorrection (--autocorrect).
 # Configuration parameters: IgnoreEmptyBlocks, AllowUnusedKeywordArguments.
 Lint/UnusedBlockArgument:
@@ -67,13 +52,6 @@ Metrics/CyclomaticComplexity:
 Metrics/PerceivedComplexity:
   Max: 27
 
-Performance/MapMethodChain:
-  Exclude:
-    - 'app/models/feed.rb'
-    - 'lib/mastodon/cli/maintenance.rb'
-    - 'spec/services/bulk_import_service_spec.rb'
-    - 'spec/services/import_service_spec.rb'
-
 RSpec/AnyInstance:
   Exclude:
     - 'spec/controllers/activitypub/inboxes_controller_spec.rb'
@@ -96,20 +74,6 @@ RSpec/AnyInstance:
 RSpec/ExampleLength:
   Max: 22
 
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: implicit, each, example
-RSpec/HookArgument:
-  Exclude:
-    - 'spec/controllers/api/v1/streaming_controller_spec.rb'
-    - 'spec/controllers/well_known/webfinger_controller_spec.rb'
-    - 'spec/helpers/instance_helper_spec.rb'
-    - 'spec/models/user_spec.rb'
-    - 'spec/rails_helper.rb'
-    - 'spec/serializers/activitypub/note_serializer_spec.rb'
-    - 'spec/serializers/activitypub/update_poll_serializer_spec.rb'
-    - 'spec/services/import_service_spec.rb'
-
 # Configuration parameters: AssignmentOnly.
 RSpec/InstanceVariable:
   Exclude:
@@ -132,11 +96,6 @@ RSpec/InstanceVariable:
 
 RSpec/LetSetup:
   Exclude:
-    - 'spec/controllers/admin/accounts_controller_spec.rb'
-    - 'spec/controllers/admin/action_logs_controller_spec.rb'
-    - 'spec/controllers/admin/instances_controller_spec.rb'
-    - 'spec/controllers/admin/reports/actions_controller_spec.rb'
-    - 'spec/controllers/admin/statuses_controller_spec.rb'
     - 'spec/controllers/api/v1/accounts/statuses_controller_spec.rb'
     - 'spec/controllers/api/v1/filters_controller_spec.rb'
     - 'spec/controllers/api/v2/admin/accounts_controller_spec.rb'
@@ -183,24 +142,6 @@ RSpec/MessageChain:
     - 'spec/models/session_activation_spec.rb'
     - 'spec/models/setting_spec.rb'
 
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: have_received, receive
-RSpec/MessageSpies:
-  Exclude:
-    - 'spec/controllers/admin/accounts_controller_spec.rb'
-    - 'spec/helpers/admin/account_moderation_notes_helper_spec.rb'
-    - 'spec/lib/webfinger_resource_spec.rb'
-    - 'spec/models/admin/account_action_spec.rb'
-    - 'spec/models/concerns/remotable_spec.rb'
-    - 'spec/models/follow_request_spec.rb'
-    - 'spec/models/identity_spec.rb'
-    - 'spec/models/session_activation_spec.rb'
-    - 'spec/models/setting_spec.rb'
-    - 'spec/services/activitypub/fetch_replies_service_spec.rb'
-    - 'spec/services/activitypub/process_collection_service_spec.rb'
-    - 'spec/spec_helper.rb'
-    - 'spec/validators/status_length_validator_spec.rb'
-
 RSpec/MultipleExpectations:
   Max: 8
 
@@ -217,13 +158,6 @@ Rails/ApplicationController:
   Exclude:
     - 'app/controllers/health_controller.rb'
 
-# This cop supports safe autocorrection (--autocorrect).
-# Configuration parameters: Severity.
-Rails/DuplicateAssociation:
-  Exclude:
-    - 'app/serializers/activitypub/collection_serializer.rb'
-    - 'app/serializers/activitypub/note_serializer.rb'
-
 # Configuration parameters: Include.
 # Include: app/models/**/*.rb
 Rails/HasAndBelongsToMany:
@@ -338,7 +272,6 @@ Rails/SkipsModelValidations:
     - 'db/post_migrate/20221101190723_backfill_admin_action_logs.rb'
     - 'db/post_migrate/20221206114142_backfill_admin_action_logs_again.rb'
     - 'lib/mastodon/cli/accounts.rb'
-    - 'lib/mastodon/cli/main.rb'
     - 'lib/mastodon/cli/maintenance.rb'
     - 'spec/lib/activitypub/activity/follow_spec.rb'
     - 'spec/services/follow_service_spec.rb'
@@ -431,7 +364,6 @@ Style/FetchEnvVar:
     - 'config/initializers/3_omniauth.rb'
     - 'config/initializers/blacklists.rb'
     - 'config/initializers/cache_buster.rb'
-    - 'config/initializers/content_security_policy.rb'
     - 'config/initializers/devise.rb'
     - 'config/initializers/paperclip.rb'
     - 'config/initializers/vapid.rb'

Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1.4
 # This needs to be bookworm-slim because the Ruby image is built on bookworm-slim
-ARG NODE_VERSION="20.8-bookworm-slim"
+ARG NODE_VERSION="20.9-bookworm-slim"
 
 FROM ghcr.io/moritzheiber/ruby-jemalloc:3.2.2-slim as ruby
 FROM node:${NODE_VERSION} as build

Gemfile

@@ -23,7 +23,7 @@ gem 'blurhash', '~> 0.1'
 
 gem 'active_model_serializers', '~> 0.10'
 gem 'addressable', '~> 2.8'
-gem 'bootsnap', '~> 1.16.0', require: false
+gem 'bootsnap', '~> 1.17.0', require: false
 gem 'browser'
 gem 'charlock_holmes', '~> 0.7.7'
 gem 'chewy', '~> 7.3'
@@ -88,7 +88,7 @@ gem 'simple-navigation', '~> 4.4'
 gem 'simple_form', '~> 5.2'
 gem 'sprockets-rails', '~> 3.4', require: 'sprockets/railtie'
 gem 'stoplight', '~> 3.0.1'
-gem 'strong_migrations', '~> 0.8'
+gem 'strong_migrations', '1.3.0'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2023'
@@ -103,9 +103,6 @@ gem 'rdf-normalize', '~> 0.5'
 gem 'private_address_check', '~> 0.5'
 
 group :test do
-  # Used to split testing into chunks in CI
-  gem 'rspec_chunked', '~> 0.6'
-
   # Adds RSpec Error/Warning annotations to GitHub PRs on the Files tab
   gem 'rspec-github', '~> 2.4', require: false
 

Gemfile.lock

@@ -154,6 +154,7 @@ GEM
       net-http-persistent (~> 4.0)
       nokogiri (~> 1, >= 1.10.8)
     base64 (0.1.1)
+    bcp47_spec (0.2.1)
     bcrypt (3.1.19)
     better_errors (2.10.1)
       erubi (>= 1.0.0)
@@ -171,7 +172,7 @@ GEM
     binding_of_caller (1.0.0)
       debug_inspector (>= 0.0.1)
     blurhash (0.1.7)
-    bootsnap (1.16.0)
+    bootsnap (1.17.0)
       msgpack (~> 1.2)
     brakeman (6.0.1)
     browser (5.3.1)
@@ -235,7 +236,7 @@ GEM
       devise (>= 4.0.0)
       rpam2 (~> 4.0)
     diff-lcs (1.5.0)
-    discard (1.2.1)
+    discard (1.3.0)
       activerecord (>= 4.2, < 8)
     docile (1.4.0)
     domain_name (0.5.20190701)
@@ -264,7 +265,7 @@ GEM
       tzinfo
     excon (0.100.0)
     fabrication (2.30.0)
-    faker (3.2.1)
+    faker (3.2.2)
       i18n (>= 1.8.11, < 2)
     faraday (1.10.3)
       faraday-em_http (~> 1.0)
@@ -375,19 +376,19 @@ GEM
       reline (>= 0.3.8)
     jmespath (1.6.2)
     json (2.6.3)
-    json-canonicalization (0.3.2)
+    json-canonicalization (1.0.0)
     json-jwt (1.15.3)
       activesupport (>= 4.2)
       aes_key_wrap
       bindata
       httpclient
-    json-ld (3.2.5)
+    json-ld (3.3.1)
       htmlentities (~> 4.3)
-      json-canonicalization (~> 0.3, >= 0.3.2)
+      json-canonicalization (~> 1.0)
       link_header (~> 0.0, >= 0.0.8)
       multi_json (~> 1.15)
       rack (>= 2.2, < 4)
-      rdf (~> 3.2, >= 3.2.10)
+      rdf (~> 3.3)
     json-ld-preloaded (3.2.2)
       json-ld (~> 3.2)
       rdf (~> 3.2)
@@ -455,7 +456,7 @@ GEM
     mini_mime (1.1.5)
     mini_portile2 (2.8.4)
     minitest (5.20.0)
-    msgpack (1.7.1)
+    msgpack (1.7.2)
     multi_json (1.15.0)
     multipart-post (2.3.0)
     mutex_m (0.1.2)
@@ -474,7 +475,7 @@ GEM
     net-smtp (0.4.0)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.15.4)
+    nokogiri (1.16.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     oj (3.16.1)
@@ -514,7 +515,7 @@ GEM
     parslet (2.0.0)
     pastel (0.8.0)
       tty-color (~> 0.5)
-    pg (1.5.4)
+    pg (1.5.5)
     pghero (3.3.4)
       activerecord (>= 6)
     posix-spawn (0.3.15)
@@ -532,10 +533,10 @@ GEM
     public_suffix (5.0.3)
     puma (6.4.0)
       nio4r (~> 2.0)
-    pundit (2.3.0)
+    pundit (2.3.1)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
-    racc (1.7.1)
+    racc (1.7.3)
     rack (2.2.8)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
@@ -596,7 +597,8 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.0.6)
-    rdf (3.2.11)
+    rdf (3.3.1)
+      bcp47_spec (~> 0.2)
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.6.1)
       rdf (~> 3.2)
@@ -631,7 +633,7 @@ GEM
       rspec-support (~> 3.12.0)
     rspec-github (2.4.0)
       rspec-core (~> 3.0)
-    rspec-mocks (3.12.5)
+    rspec-mocks (3.12.6)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
     rspec-rails (6.0.3)
@@ -642,15 +644,13 @@ GEM
       rspec-expectations (~> 3.12)
       rspec-mocks (~> 3.12)
       rspec-support (~> 3.12)
-    rspec-sidekiq (4.0.1)
+    rspec-sidekiq (4.1.0)
       rspec-core (~> 3.0)
       rspec-expectations (~> 3.0)
       rspec-mocks (~> 3.0)
       sidekiq (>= 5, < 8)
     rspec-support (3.12.1)
-    rspec_chunked (0.6)
-    rubocop (1.57.1)
-      base64 (~> 0.1.1)
+    rubocop (1.57.2)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
@@ -661,21 +661,21 @@ GEM
       rubocop-ast (>= 1.28.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.29.0)
+    rubocop-ast (1.30.0)
       parser (>= 3.2.1.0)
     rubocop-capybara (2.19.0)
       rubocop (~> 1.41)
-    rubocop-factory_bot (2.23.1)
+    rubocop-factory_bot (2.24.0)
       rubocop (~> 1.33)
     rubocop-performance (1.19.1)
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
-    rubocop-rails (2.20.2)
+    rubocop-rails (2.22.1)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
-    rubocop-rspec (2.23.2)
-      rubocop (~> 1.33)
+    rubocop-rspec (2.25.0)
+      rubocop (~> 1.40)
       rubocop-capybara (~> 2.17)
       rubocop-factory_bot (~> 2.22)
     ruby-prof (1.6.3)
@@ -710,7 +710,7 @@ GEM
       rufus-scheduler (~> 3.2)
       sidekiq (>= 6, < 8)
       tilt (>= 1.4.0)
-    sidekiq-unique-jobs (7.1.29)
+    sidekiq-unique-jobs (7.1.33)
       brpoplpush-redis_script (> 0.1.1, <= 2.0.0)
       concurrent-ruby (~> 1.0, >= 1.0.5)
       redis (< 5.0)
@@ -740,7 +740,7 @@ GEM
     stoplight (3.0.2)
       redlock (~> 1.0)
     stringio (3.0.8)
-    strong_migrations (0.8.0)
+    strong_migrations (1.3.0)
       activerecord (>= 5.2)
     swd (1.3.0)
       activesupport (>= 3)
@@ -833,7 +833,7 @@ DEPENDENCIES
   better_errors (~> 2.9)
   binding_of_caller (~> 1.0)
   blurhash (~> 0.1)
-  bootsnap (~> 1.16.0)
+  bootsnap (~> 1.17.0)
   brakeman (~> 6.0)
   browser
   bundler-audit (~> 0.9)
@@ -919,7 +919,6 @@ DEPENDENCIES
   rspec-github (~> 2.4)
   rspec-rails (~> 6.0)
   rspec-sidekiq (~> 4.0)
-  rspec_chunked (~> 0.6)
   rubocop
   rubocop-capybara
   rubocop-performance
@@ -942,7 +941,7 @@ DEPENDENCIES
   sprockets-rails (~> 3.4)
   stackprof
   stoplight (~> 3.0.1)
-  strong_migrations (~> 0.8)
+  strong_migrations (= 1.3.0)
   test-prof
   thor (~> 1.2)
   tty-prompt (~> 0.23)

SECURITY.md

@@ -17,6 +17,6 @@ A "vulnerability in Mastodon" is a vulnerability in the code distributed through
 | ------- | ---------------- |
 | 4.2.x   | Yes              |
 | 4.1.x   | Yes              |
-| 4.0.x   | Until 2023-10-31 |
+| 4.0.x   | No               |
 | 3.5.x   | Until 2023-12-31 |
 | < 3.5   | No               |

app/controllers/admin/account_actions_controller.rb

@@ -21,7 +21,7 @@ module Admin
       account_action.save!
 
       if account_action.with_report?
-        redirect_to admin_reports_path, notice: I18n.t('admin.reports.processed_msg', id: params[:report_id])
+        redirect_to admin_reports_path, notice: I18n.t('admin.reports.processed_msg', id: resource_params[:report_id])
       else
         redirect_to admin_account_path(@account.id)
       end

app/controllers/admin/disputes/appeals_controller.rb

@@ -20,7 +20,7 @@ class Admin::Disputes::AppealsController < Admin::BaseController
     authorize @appeal, :approve?
     log_action :reject, @appeal
     @appeal.reject!(current_account)
-    UserMailer.appeal_rejected(@appeal.account.user, @appeal)
+    UserMailer.appeal_rejected(@appeal.account.user, @appeal).deliver_later
     redirect_to disputes_strike_path(@appeal.strike)
   end
 

app/controllers/admin/domain_blocks_controller.rb

@@ -33,7 +33,7 @@ module Admin
 
       # Disallow accidentally downgrading a domain block
       if existing_domain_block.present? && !@domain_block.stricter_than?(existing_domain_block)
-        @domain_block.save
+        @domain_block.validate
         flash.now[:alert] = I18n.t('admin.domain_blocks.existing_domain_block_html', name: existing_domain_block.domain, unblock_url: admin_domain_block_path(existing_domain_block)).html_safe
         @domain_block.errors.delete(:domain)
         return render :new

app/controllers/application_controller.rb

@@ -176,7 +176,10 @@ class ApplicationController < ActionController::Base
     return unless self_destruct?
 
     respond_to do |format|
-      format.any  { render 'errors/self_destruct', layout: 'auth', status: 410, formats: [:html] }
+      format.any do
+        use_pack 'error'
+        render 'errors/self_destruct', layout: 'auth', status: 410, formats: [:html]
+      end
       format.json { render json: { error: Rack::Utils::HTTP_STATUS_CODES[410] }, status: code }
     end
   end

app/controllers/auth/confirmations_controller.rb

@@ -40,6 +40,12 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController
     show
   end
 
+  def redirect_to_app?
+    truthy_param?(:redirect_to_app)
+  end
+
+  helper_method :redirect_to_app?
+
   private
 
   def require_captcha_if_needed!
@@ -87,7 +93,7 @@ class Auth::ConfirmationsController < Devise::ConfirmationsController
   end
 
   def after_confirmation_path_for(_resource_name, user)
-    if user.created_by_application && truthy_param?(:redirect_to_app)
+    if user.created_by_application && redirect_to_app?
       user.created_by_application.confirmation_redirect_uri
     elsif user_signed_in?
       web_url('start')

app/controllers/auth/omniauth_callbacks_controller.rb

@@ -7,7 +7,7 @@ class Auth::OmniauthCallbacksController < Devise::OmniauthCallbacksController
   def self.provides_callback_for(provider)
     define_method provider do
       @provider = provider
-      @user = User.find_for_oauth(request.env['omniauth.auth'], current_user)
+      @user = User.find_for_omniauth(request.env['omniauth.auth'], current_user)
 
       if @user.persisted?
         record_login_activity
@@ -17,6 +17,9 @@ class Auth::OmniauthCallbacksController < Devise::OmniauthCallbacksController
         session["devise.#{provider}_data"] = request.env['omniauth.auth']
         redirect_to new_user_registration_url
       end
+    rescue ActiveRecord::RecordInvalid
+      flash[:alert] = I18n.t('devise.failure.omniauth_user_creation_failure') if is_navigational_format?
+      redirect_to new_user_session_url
     end
   end
 

app/controllers/concerns/cache_concern.rb

@@ -92,18 +92,10 @@ module CacheConcern
         arguments
       end
 
-      if Rails.gem_version >= Gem::Version.new('7.0')
-        def attributes_for_database(record)
-          attributes = record.attributes_for_database
-          attributes.transform_values! { |attr| attr.is_a?(::ActiveModel::Type::Binary::Data) ? attr.to_s : attr }
-          attributes
-        end
-      else
-        def attributes_for_database(record)
-          attributes = record.instance_variable_get(:@attributes).send(:attributes).transform_values(&:value_for_database)
-          attributes.transform_values! { |attr| attr.is_a?(::ActiveModel::Type::Binary::Data) ? attr.to_s : attr }
-          attributes
-        end
+      def attributes_for_database(record)
+        attributes = record.attributes_for_database
+        attributes.transform_values! { |attr| attr.is_a?(::ActiveModel::Type::Binary::Data) ? attr.to_s : attr }
+        attributes
       end
 
       def deserialize_record(class_name, attributes_from_database, new_record = false) # rubocop:disable Style/OptionalBooleanParameter

app/controllers/concerns/signature_verification.rb

@@ -250,7 +250,7 @@ module SignatureVerification
       stoplight_wrap_request { ResolveAccountService.new.call(key_id.delete_prefix('acct:'), suppress_errors: false) }
     elsif !ActivityPub::TagManager.instance.local_uri?(key_id)
       account   = ActivityPub::TagManager.instance.uri_to_actor(key_id)
-      account ||= stoplight_wrap_request { ActivityPub::FetchRemoteKeyService.new.call(key_id, id: false, suppress_errors: false) }
+      account ||= stoplight_wrap_request { ActivityPub::FetchRemoteKeyService.new.call(key_id, suppress_errors: false) }
       account
     end
   rescue Mastodon::PrivateNetworkAddressError => e

app/helpers/jsonld_helper.rb

@@ -155,8 +155,8 @@ module JsonLdHelper
     end
   end
 
-  def fetch_resource(uri, id, on_behalf_of = nil)
-    unless id
+  def fetch_resource(uri, id_is_known, on_behalf_of = nil)
+    unless id_is_known
       json = fetch_resource_without_id_validation(uri, on_behalf_of)
 
       return if !json.is_a?(Hash) || unsupported_uri_scheme?(json['id'])
@@ -174,7 +174,19 @@ module JsonLdHelper
     build_request(uri, on_behalf_of).perform do |response|
       raise Mastodon::UnexpectedResponseError, response unless response_successful?(response) || response_error_unsalvageable?(response) || !raise_on_temporary_error
 
-      body_to_json(response.body_with_limit) if response.code == 200
+      body_to_json(response.body_with_limit) if response.code == 200 && valid_activitypub_content_type?(response)
+    end
+  end
+
+  def valid_activitypub_content_type?(response)
+    return true if response.mime_type == 'application/activity+json'
+
+    # When the mime type is `application/ld+json`, we need to check the profile,
+    # but `http.rb` does not parse it for us.
+    return false unless response.mime_type == 'application/ld+json'
+
+    response.headers[HTTP::Headers::CONTENT_TYPE]&.split(';')&.map(&:strip)&.any? do |str|
+      str.start_with?('profile="') && str[9...-1].split.include?('https://www.w3.org/ns/activitystreams')
     end
   end
 

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

@@ -1,69 +0,0 @@
-import api from '../api';
-
-export const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
-export const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
-export const ACCOUNT_NOTE_SUBMIT_FAIL    = 'ACCOUNT_NOTE_SUBMIT_FAIL';
-
-export const ACCOUNT_NOTE_INIT_EDIT = 'ACCOUNT_NOTE_INIT_EDIT';
-export const ACCOUNT_NOTE_CANCEL    = 'ACCOUNT_NOTE_CANCEL';
-
-export const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT';
-
-export function submitAccountNote() {
-  return (dispatch, getState) => {
-    dispatch(submitAccountNoteRequest());
-
-    const id = getState().getIn(['account_notes', 'edit', 'account_id']);
-
-    api(getState).post(`/api/v1/accounts/${id}/note`, {
-      comment: getState().getIn(['account_notes', 'edit', 'comment']),
-    }).then(response => {
-      dispatch(submitAccountNoteSuccess(response.data));
-    }).catch(error => dispatch(submitAccountNoteFail(error)));
-  };
-}
-
-export function submitAccountNoteRequest() {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_REQUEST,
-  };
-}
-
-export function submitAccountNoteSuccess(relationship) {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_SUCCESS,
-    relationship,
-  };
-}
-
-export function submitAccountNoteFail(error) {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_FAIL,
-    error,
-  };
-}
-
-export function initEditAccountNote(account) {
-  return (dispatch, getState) => {
-    const comment = getState().getIn(['relationships', account.get('id'), 'note']);
-
-    dispatch({
-      type: ACCOUNT_NOTE_INIT_EDIT,
-      account,
-      comment,
-    });
-  };
-}
-
-export function cancelAccountNote() {
-  return {
-    type: ACCOUNT_NOTE_CANCEL,
-  };
-}
-
-export function changeAccountNoteComment(comment) {
-  return {
-    type: ACCOUNT_NOTE_CHANGE_COMMENT,
-    comment,
-  };
-}

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

@@ -0,0 +1,18 @@
+import { createAppAsyncThunk } from 'flavours/glitch/store/typed_functions';
+
+import api from '../api';
+
+export const submitAccountNote = createAppAsyncThunk(
+  'account_note/submit',
+  async (args: { id: string; value: string }, { getState }) => {
+    // TODO: replace `unknown` with `ApiRelationshipJSON` when it is merged
+    const response = await api(getState).post<unknown>(
+      `/api/v1/accounts/${args.id}/note`,
+      {
+        comment: args.value,
+      },
+    );
+
+    return { relationship: response.data };
+  },
+);

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

@@ -106,7 +106,6 @@ export function fetchAccount(id) {
 
     api(getState).get(`/api/v1/accounts/${id}`).then(response => {
       dispatch(importFetchedAccount(response.data));
-    }).then(() => {
       dispatch(fetchAccountSuccess());
     }).catch(error => {
       dispatch(fetchAccountFail(id, error));

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

@@ -12,52 +12,48 @@ export const ALERT_DISMISS = 'ALERT_DISMISS';
 export const ALERT_CLEAR   = 'ALERT_CLEAR';
 export const ALERT_NOOP    = 'ALERT_NOOP';
 
-export function dismissAlert(alert) {
-  return {
-    type: ALERT_DISMISS,
-    alert,
-  };
-}
+export const dismissAlert = alert => ({
+  type: ALERT_DISMISS,
+  alert,
+});
 
-export function clearAlert() {
-  return {
-    type: ALERT_CLEAR,
-  };
-}
+export const clearAlert = () => ({
+  type: ALERT_CLEAR,
+});
 
-export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage, message_values = undefined) {
-  return {
-    type: ALERT_SHOW,
-    title,
-    message,
-    message_values,
-  };
-}
+export const showAlert = alert => ({
+  type: ALERT_SHOW,
+  alert,
+});
 
-export function showAlertForError(error, skipNotFound = false) {
+export const showAlertForError = (error, skipNotFound = false) => {
   if (error.response) {
     const { data, status, statusText, headers } = error.response;
 
+    // Skip these errors as they are reflected in the UI
     if (skipNotFound && (status === 404 || status === 410)) {
-      // Skip these errors as they are reflected in the UI
       return { type: ALERT_NOOP };
     }
 
+    // Rate limit errors
     if (status === 429 && headers['x-ratelimit-reset']) {
-      const reset_date = new Date(headers['x-ratelimit-reset']);
-      return showAlert(messages.rateLimitedTitle, messages.rateLimitedMessage, { 'retry_time': reset_date });
+      return showAlert({
+        title: messages.rateLimitedTitle,
+        message: messages.rateLimitedMessage,
+        values: { 'retry_time': new Date(headers['x-ratelimit-reset']) },
+      });
     }
 
-    let message = statusText;
-    let title   = `${status}`;
-
-    if (data.error) {
-      message = data.error;
-    }
-
-    return showAlert(title, message);
-  } else {
-    console.error(error);
-    return showAlert();
+    return showAlert({
+      title: `${status}`,
+      message: data.error || statusText,
+    });
   }
-}
+
+  console.error(error);
+
+  return showAlert({
+    title: messages.unexpectedTitle,
+    message: messages.unexpectedMessage,
+  });
+};

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

@@ -84,10 +84,14 @@ export const COMPOSE_CHANGE_MEDIA_DESCRIPTION = 'COMPOSE_CHANGE_MEDIA_DESCRIPTIO
 export const COMPOSE_CHANGE_MEDIA_FOCUS       = 'COMPOSE_CHANGE_MEDIA_FOCUS';
 
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
+export const COMPOSE_FOCUS = 'COMPOSE_FOCUS';
 
 const messages = defineMessages({
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
   uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
+  open: { id: 'compose.published.open', defaultMessage: 'Open' },
+  published: { id: 'compose.published.body', defaultMessage: 'Post published.' },
+  saved: { id: 'compose.saved.body', defaultMessage: 'Post saved.' },
 });
 
 export const ensureComposeIsVisible = (getState, routerHistory) => {
@@ -144,6 +148,15 @@ export function resetCompose() {
   };
 }
 
+export const focusCompose = (routerHistory, defaultText) => dispatch => {
+  dispatch({
+    type: COMPOSE_FOCUS,
+    defaultText,
+  });
+
+  ensureComposeIsVisible(routerHistory);
+};
+
 export function mentionCompose(account, routerHistory) {
   return (dispatch, getState) => {
     dispatch({
@@ -264,6 +277,13 @@ export function submitCompose(routerHistory) {
       } else if (statusId === null && response.data.visibility === 'direct') {
         insertIfOnline('direct');
       }
+
+      dispatch(showAlert({
+        message: statusId === null ? messages.published : messages.saved,
+        action: messages.open,
+        dismissAfter: 10000,
+        onClick: () => routerHistory.push(`/@${response.data.account.username}/${response.data.id}`),
+      }));
     }).catch(function (error) {
       dispatch(submitComposeFail(error));
     });
@@ -300,18 +320,19 @@ export function doodleSet(options) {
 export function uploadCompose(files) {
   return function (dispatch, getState) {
     const uploadLimit = 4;
-    const media  = getState().getIn(['compose', 'media_attachments']);
-    const pending  = getState().getIn(['compose', 'pending_media_attachments']);
+    const media = getState().getIn(['compose', 'media_attachments']);
+    const pending = getState().getIn(['compose', 'pending_media_attachments']);
     const progress = new Array(files.length).fill(0);
+
     let total = Array.from(files).reduce((a, v) => a + v.size, 0);
 
     if (files.length + media.size + pending > uploadLimit) {
-      dispatch(showAlert(undefined, messages.uploadErrorLimit));
+      dispatch(showAlert({ message: messages.uploadErrorLimit }));
       return;
     }
 
     if (getState().getIn(['compose', 'poll'])) {
-      dispatch(showAlert(undefined, messages.uploadErrorPoll));
+      dispatch(showAlert({ message: messages.uploadErrorPoll }));
       return;
     }
 

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

@@ -1,31 +0,0 @@
-import api from '../api';
-
-export const IDENTITY_PROOFS_ACCOUNT_FETCH_REQUEST = 'IDENTITY_PROOFS_ACCOUNT_FETCH_REQUEST';
-export const IDENTITY_PROOFS_ACCOUNT_FETCH_SUCCESS = 'IDENTITY_PROOFS_ACCOUNT_FETCH_SUCCESS';
-export const IDENTITY_PROOFS_ACCOUNT_FETCH_FAIL    = 'IDENTITY_PROOFS_ACCOUNT_FETCH_FAIL';
-
-export const fetchAccountIdentityProofs = accountId => (dispatch, getState) => {
-  dispatch(fetchAccountIdentityProofsRequest(accountId));
-
-  api(getState).get(`/api/v1/accounts/${accountId}/identity_proofs`)
-    .then(({ data }) => dispatch(fetchAccountIdentityProofsSuccess(accountId, data)))
-    .catch(err => dispatch(fetchAccountIdentityProofsFail(accountId, err)));
-};
-
-export const fetchAccountIdentityProofsRequest = id => ({
-  type: IDENTITY_PROOFS_ACCOUNT_FETCH_REQUEST,
-  id,
-});
-
-export const fetchAccountIdentityProofsSuccess = (accountId, identity_proofs) => ({
-  type: IDENTITY_PROOFS_ACCOUNT_FETCH_SUCCESS,
-  accountId,
-  identity_proofs,
-});
-
-export const fetchAccountIdentityProofsFail = (accountId, err) => ({
-  type: IDENTITY_PROOFS_ACCOUNT_FETCH_FAIL,
-  accountId,
-  err,
-  skipNotFound: true,
-});

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

@@ -1,8 +1,8 @@
 import escapeTextContentForBrowser from 'escape-html';
 
-import emojify from 'flavours/glitch/features/emoji/emoji';
-import { autoHideCW } from 'flavours/glitch/utils/content_warning';
-import { unescapeHTML } from 'flavours/glitch/utils/html';
+import emojify from '../../features/emoji/emoji';
+import { autoHideCW } from '../../utils/content_warning';
+import { unescapeHTML } from '../../utils/html';
 
 const domParser = new DOMParser();
 

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

@@ -83,6 +83,7 @@ export function reblogRequest(status) {
   return {
     type: REBLOG_REQUEST,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -90,6 +91,7 @@ export function reblogSuccess(status) {
   return {
     type: REBLOG_SUCCESS,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -98,6 +100,7 @@ export function reblogFail(status, error) {
     type: REBLOG_FAIL,
     status: status,
     error: error,
+    skipLoading: true,
   };
 }
 
@@ -105,6 +108,7 @@ export function unreblogRequest(status) {
   return {
     type: UNREBLOG_REQUEST,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -112,6 +116,7 @@ export function unreblogSuccess(status) {
   return {
     type: UNREBLOG_SUCCESS,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -120,6 +125,7 @@ export function unreblogFail(status, error) {
     type: UNREBLOG_FAIL,
     status: status,
     error: error,
+    skipLoading: true,
   };
 }
 
@@ -153,6 +159,7 @@ export function favouriteRequest(status) {
   return {
     type: FAVOURITE_REQUEST,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -160,6 +167,7 @@ export function favouriteSuccess(status) {
   return {
     type: FAVOURITE_SUCCESS,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -168,6 +176,7 @@ export function favouriteFail(status, error) {
     type: FAVOURITE_FAIL,
     status: status,
     error: error,
+    skipLoading: true,
   };
 }
 
@@ -175,6 +184,7 @@ export function unfavouriteRequest(status) {
   return {
     type: UNFAVOURITE_REQUEST,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -182,6 +192,7 @@ export function unfavouriteSuccess(status) {
   return {
     type: UNFAVOURITE_SUCCESS,
     status: status,
+    skipLoading: true,
   };
 }
 
@@ -190,6 +201,7 @@ export function unfavouriteFail(status, error) {
     type: UNFAVOURITE_FAIL,
     status: status,
     error: error,
+    skipLoading: true,
   };
 }
 
@@ -199,7 +211,7 @@ export function bookmark(status) {
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/bookmark`).then(function (response) {
       dispatch(importFetchedStatus(response.data));
-      dispatch(bookmarkSuccess(status));
+      dispatch(bookmarkSuccess(status, response.data));
     }).catch(function (error) {
       dispatch(bookmarkFail(status, error));
     });
@@ -212,7 +224,7 @@ export function unbookmark(status) {
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unbookmark`).then(response => {
       dispatch(importFetchedStatus(response.data));
-      dispatch(unbookmarkSuccess(status));
+      dispatch(unbookmarkSuccess(status, response.data));
     }).catch(error => {
       dispatch(unbookmarkFail(status, error));
     });
@@ -226,10 +238,11 @@ export function bookmarkRequest(status) {
   };
 }
 
-export function bookmarkSuccess(status) {
+export function bookmarkSuccess(status, response) {
   return {
     type: BOOKMARK_SUCCESS,
     status: status,
+    response: response,
   };
 }
 
@@ -248,10 +261,11 @@ export function unbookmarkRequest(status) {
   };
 }
 
-export function unbookmarkSuccess(status) {
+export function unbookmarkSuccess(status, response) {
   return {
     type: UNBOOKMARK_SUCCESS,
     status: status,
+    response: response,
   };
 }
 
@@ -444,6 +458,7 @@ export function pinRequest(status) {
   return {
     type: PIN_REQUEST,
     status,
+    skipLoading: true,
   };
 }
 
@@ -451,6 +466,7 @@ export function pinSuccess(status) {
   return {
     type: PIN_SUCCESS,
     status,
+    skipLoading: true,
   };
 }
 
@@ -459,6 +475,7 @@ export function pinFail(status, error) {
     type: PIN_FAIL,
     status,
     error,
+    skipLoading: true,
   };
 }
 
@@ -479,6 +496,7 @@ export function unpinRequest(status) {
   return {
     type: UNPIN_REQUEST,
     status,
+    skipLoading: true,
   };
 }
 
@@ -486,6 +504,7 @@ export function unpinSuccess(status) {
   return {
     type: UNPIN_SUCCESS,
     status,
+    skipLoading: true,
   };
 }
 
@@ -494,5 +513,6 @@ export function unpinFail(status, error) {
     type: UNPIN_FAIL,
     status,
     error,
+    skipLoading: true,
   };
 }

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

@@ -1,9 +1,8 @@
-import { openModal } from 'flavours/glitch/actions/modal';
-
 import api, { getLinks } from '../api';
 
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts } from './importer';
+import { openModal } from './modal';
 
 export const MUTES_FETCH_REQUEST = 'MUTES_FETCH_REQUEST';
 export const MUTES_FETCH_SUCCESS = 'MUTES_FETCH_SUCCESS';

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

@@ -5,10 +5,10 @@ import { List as ImmutableList } from 'immutable';
 
 import { compareId } from 'flavours/glitch/compare_id';
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
-import { unescapeHTML } from 'flavours/glitch/utils/html';
-import { requestNotificationPermission } from 'flavours/glitch/utils/notifications';
 
 import api, { getLinks } from '../api';
+import { unescapeHTML } from '../utils/html';
+import { requestNotificationPermission } from '../utils/notifications';
 
 import { fetchFollowRequests, fetchRelationships } from './accounts';
 import {
@@ -21,10 +21,7 @@ import { submitMarkers } from './markers';
 import { register as registerPushNotifications } from './push_notifications';
 import { saveSettings } from './settings';
 
-
-
-
-export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
+export const NOTIFICATIONS_UPDATE      = 'NOTIFICATIONS_UPDATE';
 export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
 
 // tracking the notif cleaning request
@@ -65,7 +62,7 @@ defineMessages({
 const fetchRelatedRelationships = (dispatch, notifications) => {
   const accountIds = notifications.filter(item => ['follow', 'follow_request', 'admin.sign_up'].indexOf(item.type) !== -1).map(item => item.account.id);
 
-  if (accountIds > 0) {
+  if (accountIds.length > 0) {
     dispatch(fetchRelationships(accountIds));
   }
 };
@@ -131,6 +128,7 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
       const body  = (notification.status && notification.status.spoiler_text.length > 0) ? notification.status.spoiler_text : unescapeHTML(notification.status ? notification.status.content : '');
 
       const notify = new Notification(title, { body, icon: notification.account.avatar, tag: notification.id });
+
       notify.addEventListener('click', () => {
         window.focus();
         notify.close();
@@ -141,7 +139,6 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
 
 const excludeTypesFromSettings = state => state.getIn(['settings', 'notifications', 'shows']).filter(enabled => !enabled).keySeq().toJS();
 
-
 const excludeTypesFromFilter = filter => {
   const allTypes = ImmutableList([
     'follow',

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

@@ -1,16 +1,8 @@
-import { openModal } from './modal';
 import { changeSetting, saveSettings } from './settings';
 
-export function showOnboardingOnce() {
-  return (dispatch, getState) => {
-    const alreadySeen = getState().getIn(['settings', 'onboarded']);
+export const INTRODUCTION_VERSION = 20181216044202;
 
-    if (!alreadySeen) {
-      dispatch(openModal({
-        modalType: 'ONBOARDING',
-      }));
-      dispatch(changeSetting(['onboarded'], true));
-      dispatch(saveSettings());
-    }
-  };
-}
+export const closeOnboarding = () => dispatch => {
+  dispatch(changeSetting(['introductionVersion'], INTRODUCTION_VERSION));
+  dispatch(saveSettings());
+};

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

@@ -1,10 +1,8 @@
-import { me } from 'flavours/glitch/initial_state';
-
 import api from '../api';
+import { me } from '../initial_state';
 
 import { importFetchedStatuses } from './importer';
 
-
 export const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
 export const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';
 export const PINNED_STATUSES_FETCH_FAIL = 'PINNED_STATUSES_FETCH_FAIL';

app/javascript/flavours/glitch/actions/push_notifications/registerer.js

@@ -1,5 +1,7 @@
 import api from '../../api';
+import { me } from '../../initial_state';
 import { pushNotificationsSetting } from '../../settings';
+import { decode as decodeBase64 } from '../../utils/base64';
 
 import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
 
@@ -10,13 +12,7 @@ const urlBase64ToUint8Array = (base64String) => {
     .replace(/-/g, '+')
     .replace(/_/g, '/');
 
-  const rawData = window.atob(base64);
-  const outputArray = new Uint8Array(rawData.length);
-
-  for (let i = 0; i < rawData.length; ++i) {
-    outputArray[i] = rawData.charCodeAt(i);
-  }
-  return outputArray;
+  return decodeBase64(base64);
 };
 
 const getApplicationServerKey = () => document.querySelector('[name="applicationServerKey"]').getAttribute('content');
@@ -36,7 +32,7 @@ const subscribe = (registration) =>
 const unsubscribe = ({ registration, subscription }) =>
   subscription ? subscription.unsubscribe().then(() => registration) : registration;
 
-const sendSubscriptionToBackend = (getState, subscription, me) => {
+const sendSubscriptionToBackend = (subscription) => {
   const params = { subscription };
 
   if (me) {
@@ -46,7 +42,7 @@ const sendSubscriptionToBackend = (getState, subscription, me) => {
     }
   }
 
-  return api(getState).post('/api/web/push_subscriptions', params).then(response => response.data);
+  return api().post('/api/web/push_subscriptions', params).then(response => response.data);
 };
 
 // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
@@ -55,7 +51,6 @@ const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager'
 export function register () {
   return (dispatch, getState) => {
     dispatch(setBrowserSupport(supportsPushNotifications));
-    const me = getState().getIn(['meta', 'me']);
 
     if (supportsPushNotifications) {
       if (!getApplicationServerKey()) {
@@ -79,13 +74,13 @@ export function register () {
             } else {
               // Something went wrong, try to subscribe again
               return unsubscribe({ registration, subscription }).then(subscribe).then(
-                subscription => sendSubscriptionToBackend(getState, subscription, me));
+                subscription => sendSubscriptionToBackend(subscription));
             }
           }
 
           // No subscription, try to subscribe
           return subscribe(registration).then(
-            subscription => sendSubscriptionToBackend(getState, subscription, me));
+            subscription => sendSubscriptionToBackend(subscription));
         })
         .then(subscription => {
           // If we got a PushSubscription (and not a subscription object from the backend)
@@ -128,10 +123,9 @@ export function saveSettings() {
     const alerts = state.get('alerts');
     const data = { alerts };
 
-    api(getState).put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
+    api().put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
       data,
     }).then(() => {
-      const me = getState().getIn(['meta', 'me']);
       if (me) {
         pushNotificationsSetting.set(me, data);
       }

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

@@ -26,7 +26,7 @@ const debouncedSave = debounce((dispatch, getState) => {
 
   const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
 
-  api(getState).put('/api/web/settings', { data })
+  api().put('/api/web/settings', { data })
     .then(() => dispatch({ type: SETTING_SAVE }))
     .catch(error => dispatch(showAlertForError(error)));
 }, 5000, { trailing: true });

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

@@ -1,7 +1,6 @@
 // @ts-check
 
-import { getLocale } from 'flavours/glitch/locales';
-
+import { getLocale } from '../locales';
 import { connectStream } from '../stream';
 
 import {
@@ -68,8 +67,8 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
 
         // @ts-expect-error
         if (pollingId) {
-          clearTimeout(pollingId);
-          pollingId = null;
+          // @ts-ignore
+          clearTimeout(pollingId); pollingId = null;
         }
 
         if (options.fillGaps) {
@@ -86,8 +85,8 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
         }
       },
 
-      onReceive (data) {
-        switch(data.event) {
+      onReceive(data) {
+        switch (data.event) {
         case 'update':
           // @ts-expect-error
           dispatch(updateTimeline(timelineId, JSON.parse(data.payload), options.accept));

app/javascript/flavours/glitch/api.js

@@ -1,75 +0,0 @@
-// @ts-check
-
-import axios from 'axios';
-import LinkHeader from 'http-link-header';
-
-import ready from './ready';
-/**
- * @param {import('axios').AxiosResponse} response
- * @returns {LinkHeader}
- */
-export const getLinks = response => {
-  const value = response.headers.link;
-
-  if (!value) {
-    return new LinkHeader();
-  }
-
-  return LinkHeader.parse(value);
-};
-
-/** @type {import('axios').RawAxiosRequestHeaders} */
-const csrfHeader = {};
-
-/**
- * @returns {void}
- */
-const setCSRFHeader = () => {
-  /** @type {HTMLMetaElement | null} */
-  const csrfToken = document.querySelector('meta[name=csrf-token]');
-
-  if (csrfToken) {
-    csrfHeader['X-CSRF-Token'] = csrfToken.content;
-  }
-};
-
-ready(setCSRFHeader);
-
-/**
- * @param {() => import('immutable').Map<string,any>} getState
- * @returns {import('axios').RawAxiosRequestHeaders}
- */
-const authorizationHeaderFromState = getState => {
-  const accessToken = getState && getState().getIn(['meta', 'access_token'], '');
-
-  if (!accessToken) {
-    return {};
-  }
-
-  return {
-    'Authorization': `Bearer ${accessToken}`,
-  };
-};
-
-/**
- * @param {() => import('immutable').Map<string,any>} getState
- * @returns {import('axios').AxiosInstance}
- */
-export default function api(getState) {
-  return axios.create({
-    headers: {
-      ...csrfHeader,
-      ...authorizationHeaderFromState(getState),
-    },
-
-    transformResponse: [
-      function (data) {
-        try {
-          return JSON.parse(data);
-        } catch {
-          return data;
-        }
-      },
-    ],
-  });
-}

app/javascript/flavours/glitch/api.ts

@@ -0,0 +1,63 @@
+import type { AxiosResponse, RawAxiosRequestHeaders } from 'axios';
+import axios from 'axios';
+import LinkHeader from 'http-link-header';
+
+import ready from './ready';
+import type { GetState } from './store';
+
+export const getLinks = (response: AxiosResponse) => {
+  const value = response.headers.link as string | undefined;
+
+  if (!value) {
+    return new LinkHeader();
+  }
+
+  return LinkHeader.parse(value);
+};
+
+const csrfHeader: RawAxiosRequestHeaders = {};
+
+const setCSRFHeader = () => {
+  const csrfToken = document.querySelector<HTMLMetaElement>(
+    'meta[name=csrf-token]',
+  );
+
+  if (csrfToken) {
+    csrfHeader['X-CSRF-Token'] = csrfToken.content;
+  }
+};
+
+void ready(setCSRFHeader);
+
+const authorizationHeaderFromState = (getState?: GetState) => {
+  const accessToken =
+    getState && (getState().meta.get('access_token', '') as string);
+
+  if (!accessToken) {
+    return {};
+  }
+
+  return {
+    Authorization: `Bearer ${accessToken}`,
+  } as RawAxiosRequestHeaders;
+};
+
+// eslint-disable-next-line import/no-default-export
+export default function api(getState: GetState) {
+  return axios.create({
+    headers: {
+      ...csrfHeader,
+      ...authorizationHeaderFromState(getState),
+    },
+
+    transformResponse: [
+      function (data: unknown) {
+        try {
+          return JSON.parse(data as string) as unknown;
+        } catch {
+          return data;
+        }
+      },
+    ],
+  });
+}

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

@@ -0,0 +1,214 @@
+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('does not truncate the contents when the last child is a text node', () => {
+    const status = createStatus(
+      'this is a #<a class="zrl" href="https://example.com/search?tag=test">test</a>. Some more text',
+      ['test'],
+    );
+
+    const { hashtagsInBar, statusContentProps } =
+      computeHashtagBarForStatus(status);
+
+    expect(hashtagsInBar).toEqual([]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot(
+      `"this is a #<a class="zrl" href="https://example.com/search?tag=test">test</a>. Some more text"`,
+    );
+  });
+
+  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/flavours/glitch/components/account.jsx

@@ -1,30 +1,35 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { Skeleton } from 'flavours/glitch/components/skeleton';
-import { me } from 'flavours/glitch/initial_state';
+import { EmptyAccount } from 'flavours/glitch/components/empty_account';
+import { ShortNumber } from 'flavours/glitch/components/short_number';
+import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
+
+import { me } from '../initial_state';
 
 import { Avatar } from './avatar';
+import { Button } from './button';
+import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
-import { IconButton } from './icon_button';
 import Permalink from './permalink';
 import { RelativeTimestamp } from './relative_timestamp';
 
-
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
-  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
-  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
-  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
+  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
+  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
+  mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' },
+  unmute_notifications: { id: 'account.unmute_notifications_short', defaultMessage: 'Unmute notifications' },
+  mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
+  block: { id: 'account.block_short', defaultMessage: 'Block' },
 });
 
 class Account extends ImmutablePureComponent {
@@ -38,15 +43,13 @@ class Account extends ImmutablePureComponent {
     onMuteNotifications: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     hidden: PropTypes.bool,
-    small: PropTypes.bool,
-    actionIcon: PropTypes.string,
-    actionTitle: PropTypes.string,
+    minimal: PropTypes.bool,
     defaultAction: PropTypes.string,
-    onActionClick: PropTypes.func,
+    withBio: PropTypes.bool,
   };
 
   static defaultProps = {
-    size: 36,
+    size: 46,
   };
 
   handleFollow = () => {
@@ -69,34 +72,11 @@ class Account extends ImmutablePureComponent {
     this.props.onMuteNotifications(this.props.account, false);
   };
 
-  handleAction = () => {
-    this.props.onActionClick(this.props.account);
-  };
-
   render () {
-    const {
-      account,
-      hidden,
-      intl,
-      small,
-      onActionClick,
-      actionIcon,
-      actionTitle,
-      defaultAction,
-      size,
-    } = this.props;
+    const { account, intl, hidden, withBio, defaultAction, size, minimal } = this.props;
 
     if (!account) {
-      return (
-        <div className='account'>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
-              <DisplayName />
-            </div>
-          </div>
-        </div>
-      );
+      return <EmptyAccount size={size} minimal={minimal} />;
     }
 
     if (hidden) {
@@ -110,78 +90,89 @@ class Account extends ImmutablePureComponent {
 
     let buttons;
 
-    if (onActionClick) {
-      if (actionIcon) {
-        buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
-      }
-    } else if (account.get('id') !== me && !small && account.get('relationship', null) !== null) {
+    if (account.get('id') !== me && account.get('relationship', null) !== null) {
       const following = account.getIn(['relationship', 'following']);
       const requested = account.getIn(['relationship', 'requested']);
       const blocking  = account.getIn(['relationship', 'blocking']);
       const muting  = account.getIn(['relationship', 'muting']);
 
       if (requested) {
-        buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
+        buttons = <Button text={intl.formatMessage(messages.cancel_follow_request)} onClick={this.handleFollow} />;
       } else if (blocking) {
-        buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
+        buttons = <Button text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
       } else if (muting) {
         let hidingNotificationsButton;
+
         if (account.getIn(['relationship', 'muting_notifications'])) {
-          hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />;
+          hidingNotificationsButton = <Button text={intl.formatMessage(messages.unmute_notifications)} onClick={this.handleUnmuteNotifications} />;
         } else {
-          hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
+          hidingNotificationsButton = <Button text={intl.formatMessage(messages.mute_notifications)} onClick={this.handleMuteNotifications} />;
         }
+
         buttons = (
           <>
-            <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
+            <Button text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} />
             {hidingNotificationsButton}
           </>
         );
       } else if (defaultAction === 'mute') {
-        buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;
+        buttons = <Button title={intl.formatMessage(messages.mute)} onClick={this.handleMute} />;
       } else if (defaultAction === 'block') {
-        buttons = <IconButton icon='lock' title={intl.formatMessage(messages.block, { name: account.get('username') })} onClick={this.handleBlock} />;
+        buttons = <Button text={intl.formatMessage(messages.block)} onClick={this.handleBlock} />;
       } else if (!account.get('moved') || following) {
-        buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
+        buttons = <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
       }
     }
 
-    let mute_expires_at;
+    let muteTimeRemaining;
+
     if (account.get('mute_expires_at')) {
-      mute_expires_at =  <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>;
+      muteTimeRemaining = <>· <RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></>;
     }
 
-    return small ? (
-      <Permalink
-        className='account small'
-        href={account.get('url')}
-        to={`/@${account.get('acct')}`}
-      >
-        <div className='account__avatar-wrapper'>
-          <Avatar
-            account={account}
-            size={24}
-          />
-        </div>
-        <DisplayName
-          account={account}
-          inline
-        />
-      </Permalink>
-    ) : (
-      <div className='account'>
+    let verification;
+
+    const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
+
+    if (firstVerifiedField) {
+      verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
+    }
+
+    return (
+      <div className={classNames('account', { 'account--minimal': minimal })}>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={size} /></div>
-            {mute_expires_at}
-            <DisplayName account={account} />
+            <div className='account__avatar-wrapper'>
+              <Avatar account={account} size={size} />
+            </div>
+
+            <div className='account__contents'>
+              <DisplayName account={account} inline />
+              {!minimal && (
+                <div className='account__details'>
+                  {account.get('followers_count') !== -1 && (
+                    <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} />
+                  )} {verification} {muteTimeRemaining}
+                </div>
+              )}
+            </div>
           </Permalink>
-          {buttons ?
+
+          {!minimal && (
             <div className='account__relationship'>
               {buttons}
             </div>
-            : null}
+          )}
         </div>
+
+        {withBio && (account.get('note').length > 0 ? (
+          <div
+            className='account__note translate'
+            dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+          />
+        ) : (
+          <div className='account__note account__note--missing'><FormattedMessage id='account.no_bio' defaultMessage='No description provided.' /></div>
+        ))}
       </div>
     );
   }

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

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import * as React from 'react';
 
 import { TransitionMotion, spring } from 'react-motion';
 

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

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { unicodeMapping } from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
 import { assetHost } from 'flavours/glitch/utils/config';
 
+import { unicodeMapping } from '../features/emoji/emoji_unicode_mapping_light';
+
 export default class AutosuggestEmoji extends PureComponent {
 
   static propTypes = {
@@ -27,7 +28,7 @@ export default class AutosuggestEmoji extends PureComponent {
     }
 
     return (
-      <div className='emoji'>
+      <div className='autosuggest-emoji'>
         <img
           className='emojione'
           src={url}

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import AutosuggestAccountContainer from 'flavours/glitch/features/compose/containers/autosuggest_account_container';
+import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
 import AutosuggestEmoji from './autosuggest_emoji';
 import { AutosuggestHashtag } from './autosuggest_hashtag';

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

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
+import { useCallback, useRef, useState, useEffect, forwardRef } from 'react';
 
 import classNames from 'classnames';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import Textarea from 'react-textarea-autosize';
 
-import AutosuggestAccountContainer from 'flavours/glitch/features/compose/containers/autosuggest_account_container';
+import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 
 import AutosuggestEmoji from './autosuggest_emoji';
 import { AutosuggestHashtag } from './autosuggest_hashtag';
@@ -37,54 +37,46 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
   }
 };
 
-export default class AutosuggestTextarea extends ImmutablePureComponent {
+const AutosuggestTextarea = forwardRef(({
+  value,
+  suggestions,
+  disabled,
+  placeholder,
+  onSuggestionSelected,
+  onSuggestionsClearRequested,
+  onSuggestionsFetchRequested,
+  onChange,
+  onKeyUp,
+  onKeyDown,
+  onPaste,
+  onFocus,
+  autoFocus = true,
+  lang,
+  children,
+}, textareaRef) => {
 
-  static propTypes = {
-    value: PropTypes.string,
-    suggestions: ImmutablePropTypes.list,
-    disabled: PropTypes.bool,
-    placeholder: PropTypes.string,
-    onSuggestionSelected: PropTypes.func.isRequired,
-    onSuggestionsClearRequested: PropTypes.func.isRequired,
-    onSuggestionsFetchRequested: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    onKeyUp: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    onPaste: PropTypes.func.isRequired,
-    autoFocus: PropTypes.bool,
-    lang: PropTypes.string,
-  };
+  const [suggestionsHidden, setSuggestionsHidden] = useState(true);
+  const [selectedSuggestion, setSelectedSuggestion] = useState(0);
+  const lastTokenRef = useRef(null);
+  const tokenStartRef = useRef(0);
 
-  static defaultProps = {
-    autoFocus: true,
-  };
-
-  state = {
-    suggestionsHidden: true,
-    focused: false,
-    selectedSuggestion: 0,
-    lastToken: null,
-    tokenStart: 0,
-  };
-
-  onChange = (e) => {
+  const handleChange = useCallback((e) => {
     const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
 
-    if (token !== null && this.state.lastToken !== token) {
-      this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
-      this.props.onSuggestionsFetchRequested(token);
+    if (token !== null && lastTokenRef.current !== token) {
+      tokenStartRef.current = tokenStart;
+      lastTokenRef.current = token;
+      setSelectedSuggestion(0);
+      onSuggestionsFetchRequested(token);
     } else if (token === null) {
-      this.setState({ lastToken: null });
-      this.props.onSuggestionsClearRequested();
+      lastTokenRef.current = null;
+      onSuggestionsClearRequested();
     }
 
-    this.props.onChange(e);
-  };
-
-  onKeyDown = (e) => {
-    const { suggestions, disabled } = this.props;
-    const { selectedSuggestion, suggestionsHidden } = this.state;
+    onChange(e);
+  }, [onSuggestionsFetchRequested, onSuggestionsClearRequested, onChange, setSelectedSuggestion]);
 
+  const handleKeyDown = useCallback((e) => {
     if (disabled) {
       e.preventDefault();
       return;
@@ -102,80 +94,75 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
         document.querySelector('.ui').parentElement.focus();
       } else {
         e.preventDefault();
-        this.setState({ suggestionsHidden: true });
+        setSuggestionsHidden(true);
       }
 
       break;
     case 'ArrowDown':
       if (suggestions.size > 0 && !suggestionsHidden) {
         e.preventDefault();
-        this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
+        setSelectedSuggestion(Math.min(selectedSuggestion + 1, suggestions.size - 1));
       }
 
       break;
     case 'ArrowUp':
       if (suggestions.size > 0 && !suggestionsHidden) {
         e.preventDefault();
-        this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
+        setSelectedSuggestion(Math.max(selectedSuggestion - 1, 0));
       }
 
       break;
     case 'Enter':
     case 'Tab':
       // Select suggestion
-      if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
+      if (lastTokenRef.current !== null && suggestions.size > 0 && !suggestionsHidden) {
         e.preventDefault();
         e.stopPropagation();
-        this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
+        onSuggestionSelected(tokenStartRef.current, lastTokenRef.current, suggestions.get(selectedSuggestion));
       }
 
       break;
     }
 
-    if (e.defaultPrevented || !this.props.onKeyDown) {
+    if (e.defaultPrevented || !onKeyDown) {
       return;
     }
 
-    this.props.onKeyDown(e);
-  };
+    onKeyDown(e);
+  }, [disabled, suggestions, suggestionsHidden, selectedSuggestion, setSelectedSuggestion, setSuggestionsHidden, onSuggestionSelected, onKeyDown]);
 
-  onBlur = () => {
-    this.setState({ suggestionsHidden: true, focused: false });
-  };
+  const handleBlur = useCallback(() => {
+    setSuggestionsHidden(true);
+  }, [setSuggestionsHidden]);
 
-  onFocus = (e) => {
-    this.setState({ focused: true });
-    if (this.props.onFocus) {
-      this.props.onFocus(e);
+  const handleFocus = useCallback((e) => {
+    if (onFocus) {
+      onFocus(e);
     }
-  };
+  }, [onFocus]);
 
-  onSuggestionClick = (e) => {
-    const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index'));
+  const handleSuggestionClick = useCallback((e) => {
+    const suggestion = suggestions.get(e.currentTarget.getAttribute('data-index'));
     e.preventDefault();
-    this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
-    this.textarea.focus();
-  };
+    onSuggestionSelected(tokenStartRef.current, lastTokenRef.current, suggestion);
+    textareaRef.current?.focus();
+  }, [suggestions, onSuggestionSelected, textareaRef]);
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
-      this.setState({ suggestionsHidden: false });
-    }
-  }
-
-  setTextarea = (c) => {
-    this.textarea = c;
-  };
-
-  onPaste = (e) => {
+  const handlePaste = useCallback((e) => {
     if (e.clipboardData && e.clipboardData.files.length === 1) {
-      this.props.onPaste(e.clipboardData.files);
+      onPaste(e.clipboardData.files);
       e.preventDefault();
     }
-  };
+  }, [onPaste]);
 
-  renderSuggestion = (suggestion, i) => {
-    const { selectedSuggestion } = this.state;
+  // Show the suggestions again whenever they change and the textarea is focused
+  useEffect(() => {
+    if (suggestions.size > 0 && textareaRef.current === document.activeElement) {
+      setSuggestionsHidden(false);
+    }
+  }, [suggestions, textareaRef, setSuggestionsHidden]);
+
+  const renderSuggestion = (suggestion, i) => {
     let inner, key;
 
     if (suggestion.type === 'emoji') {
@@ -190,50 +177,64 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     }
 
     return (
-      <div role='button' tabIndex={0} key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
+      <div role='button' tabIndex={0} key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={handleSuggestionClick}>
         {inner}
       </div>
     );
   };
 
-  render () {
-    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, lang, children } = this.props;
-    const { suggestionsHidden } = this.state;
+  return [
+    <div className='compose-form__autosuggest-wrapper' key='autosuggest-wrapper'>
+      <div className='autosuggest-textarea'>
+        <label>
+          <span style={{ display: 'none' }}>{placeholder}</span>
 
-    return [
-      <div className='compose-form__autosuggest-wrapper' key='autosuggest-wrapper'>
-        <div className='autosuggest-textarea'>
-          <label>
-            <span style={{ display: 'none' }}>{placeholder}</span>
+          <Textarea
+            ref={textareaRef}
+            className='autosuggest-textarea__textarea'
+            disabled={disabled}
+            placeholder={placeholder}
+            autoFocus={autoFocus}
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onKeyUp={onKeyUp}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onPaste={handlePaste}
+            dir='auto'
+            aria-autocomplete='list'
+            lang={lang}
+          />
+        </label>
+      </div>
+      {children}
+    </div>,
 
-            <Textarea
-              ref={this.setTextarea}
-              className='autosuggest-textarea__textarea'
-              disabled={disabled}
-              placeholder={placeholder}
-              autoFocus={autoFocus}
-              value={value}
-              onChange={this.onChange}
-              onKeyDown={this.onKeyDown}
-              onKeyUp={onKeyUp}
-              onFocus={this.onFocus}
-              onBlur={this.onBlur}
-              onPaste={this.onPaste}
-              dir='auto'
-              aria-autocomplete='list'
-              lang={lang}
-            />
-          </label>
-        </div>
-        {children}
-      </div>,
+    <div className='autosuggest-textarea__suggestions-wrapper' key='suggestions-wrapper'>
+      <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
+        {suggestions.map(renderSuggestion)}
+      </div>
+    </div>,
+  ];
+});
 
-      <div className='autosuggest-textarea__suggestions-wrapper' key='suggestions-wrapper'>
-        <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
-          {suggestions.map(this.renderSuggestion)}
-        </div>
-      </div>,
-    ];
-  }
+AutosuggestTextarea.propTypes = {
+  value: PropTypes.string,
+  suggestions: ImmutablePropTypes.list,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onSuggestionSelected: PropTypes.func.isRequired,
+  onSuggestionsClearRequested: PropTypes.func.isRequired,
+  onSuggestionsFetchRequested: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onKeyUp: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onPaste: PropTypes.func.isRequired,
+  onFocus:PropTypes.func,
+  children: PropTypes.node,
+  autoFocus: PropTypes.bool,
+  lang: PropTypes.string,
+};
 
-}
+export default AutosuggestTextarea;

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

@@ -1,55 +1,48 @@
-import * as React from 'react';
-
 import classNames from 'classnames';
 
-import { useHovering } from 'flavours/glitch/hooks/useHovering';
-import { autoPlayGif } from 'flavours/glitch/initial_state';
-import type { Account } from 'flavours/glitch/types/resources';
+import { useHovering } from '../hooks/useHovering';
+import { autoPlayGif } from '../initial_state';
+import type { Account } from '../types/resources';
 
 interface Props {
-  account: Account | undefined;
-  className?: string;
+  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;
+  animate?: boolean;
 }
 
 export const Avatar: React.FC<Props> = ({
   account,
-  className,
+  animate = autoPlayGif,
   size = 20,
   inline = false,
   style: styleFromParent,
 }) => {
-  const { hovering, handleMouseEnter, handleMouseLeave } =
-    useHovering(autoPlayGif);
+  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
 
   const style = {
     ...styleFromParent,
     width: `${size}px`,
     height: `${size}px`,
-    backgroundSize: `${size}px ${size}px`,
   };
 
-  if (account) {
-    style.backgroundImage = `url(${account.get(
-      hovering ? 'avatar' : 'avatar_static',
-    )})`;
-  }
+  const src =
+    hovering || animate
+      ? account?.get('avatar')
+      : account?.get('avatar_static');
 
   return (
     <div
-      className={classNames(
-        'account__avatar',
-        { 'account__avatar-inline': inline },
-        className,
-      )}
+      className={classNames('account__avatar', {
+        'account__avatar-inline': inline,
+      })}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={style}
       data-avatar-of={account && `@${account.get('acct')}`}
-      role='img'
-      aria-label={account?.get('acct')}
-    />
+    >
+      {src && <img src={src} alt={account?.get('acct')} />}
+    </div>
   );
 };

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

@@ -3,7 +3,9 @@ import { PureComponent } from 'react';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { autoPlayGif } from 'flavours/glitch/initial_state';
+import { autoPlayGif } from '../initial_state';
+
+import { Avatar } from './avatar';
 
 export default class AvatarComposite extends PureComponent {
 
@@ -76,12 +78,12 @@ export default class AvatarComposite extends PureComponent {
       bottom: bottom,
       width: `${width}%`,
       height: `${height}%`,
-      backgroundSize: 'cover',
-      backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
     };
 
     return (
-      <div key={account.get('id')} style={style} data-avatar-of={`@${account.get('acct')}`} />
+      <div key={account.get('id')} style={style}>
+        <Avatar account={account} animate={animate} />
+      </div>
     );
   }
 

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

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import { autoPlayGif } from 'flavours/glitch/initial_state';
-
-export default class AvatarOverlay extends PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    friend: ImmutablePropTypes.map.isRequired,
-    animate: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    animate: autoPlayGif,
-  };
-
-  render() {
-    const { account, friend, animate } = this.props;
-
-    const baseStyle = {
-      backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
-    };
-
-    const overlayStyle = {
-      backgroundImage: `url(${friend.get(animate ? 'avatar' : 'avatar_static')})`,
-    };
-
-    return (
-      <div className='account__avatar-overlay'>
-        <div className='account__avatar-overlay-base' style={baseStyle} data-avatar-of={`@${account.get('acct')}`} />
-        <div className='account__avatar-overlay-overlay' style={overlayStyle} data-avatar-of={`@${friend.get('acct')}`} />
-      </div>
-    );
-  }
-
-}

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

@@ -0,0 +1,56 @@
+import { useHovering } from '../hooks/useHovering';
+import { autoPlayGif } from '../initial_state';
+import type { Account } from '../types/resources';
+
+interface Props {
+  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  friend: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  size?: number;
+  baseSize?: number;
+  overlaySize?: number;
+}
+
+export const AvatarOverlay: React.FC<Props> = ({
+  account,
+  friend,
+  size = 46,
+  baseSize = 36,
+  overlaySize = 24,
+}) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } =
+    useHovering(autoPlayGif);
+  const accountSrc = hovering
+    ? account?.get('avatar')
+    : account?.get('avatar_static');
+  const friendSrc = hovering
+    ? friend?.get('avatar')
+    : friend?.get('avatar_static');
+
+  return (
+    <div
+      className='account__avatar-overlay'
+      style={{ width: size, height: size }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className='account__avatar-overlay-base'>
+        <div
+          className='account__avatar'
+          style={{ width: `${baseSize}px`, height: `${baseSize}px` }}
+          data-avatar-of={`@${account?.get('acct')}`}
+        >
+          {accountSrc && <img src={accountSrc} alt={account?.get('acct')} />}
+        </div>
+      </div>
+      <div className='account__avatar-overlay-overlay'>
+        <div
+          className='account__avatar'
+          style={{ width: `${overlaySize}px`, height: `${overlaySize}px` }}
+          data-avatar-of={`@${friend?.get('acct')}`}
+        >
+          {friendSrc && <img src={friendSrc} alt={friend?.get('acct')} />}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,5 +1,4 @@
-import { useRef, useEffect } from 'react';
-import * as React from 'react';
+import { memo, useRef, useEffect } from 'react';
 
 import { decode } from 'blurhash';
 
@@ -44,6 +43,6 @@ const Blurhash: React.FC<Props> = ({
   );
 };
 
-const MemoizedBlurhash = React.memo(Blurhash);
+const MemoizedBlurhash = memo(Blurhash);
 
 export { MemoizedBlurhash as Blurhash };

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

@@ -1,7 +0,0 @@
-const Check = () => (
-  <svg width='14' height='11' viewBox='0 0 14 11'>
-    <path d='M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0' fill='currentColor' fillRule='evenodd' />
-  </svg>
-);
-
-export default Check;

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

@@ -0,0 +1,13 @@
+export const Check: React.FC = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 20 20'
+    fill='currentColor'
+  >
+    <path
+      fillRule='evenodd'
+      d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z'
+      clipRule='evenodd'
+    />
+  </svg>
+);

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

@@ -12,7 +12,6 @@ export default class Column extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     extraClasses: PropTypes.string,
-    name: PropTypes.string,
     label: PropTypes.string,
     bindToDocument: PropTypes.bool,
   };
@@ -62,10 +61,10 @@ export default class Column extends PureComponent {
   }
 
   render () {
-    const { children, extraClasses, name, label } = this.props;
+    const { label, children, extraClasses } = this.props;
 
     return (
-      <div role='region' aria-label={label} data-column={name} className={`column ${extraClasses || ''}`} ref={this.setRef}>
+      <div role='region' aria-label={label} className={`column ${extraClasses || ''}`} ref={this.setRef}>
         {children}
       </div>
     );

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

@@ -13,13 +13,16 @@ export class ColumnBackButton extends PureComponent {
 
   static propTypes = {
     multiColumn: PropTypes.bool,
+    onClick: PropTypes.func,
     ...WithRouterPropTypes,
   };
 
   handleClick = () => {
-    const { history } = this.props;
+    const { onClick, history } = this.props;
 
-    if (history.location?.state?.fromMastodon) {
+    if (onClick) {
+      onClick();
+    } else if (history.location?.state?.fromMastodon) {
       history.goBack();
     } else {
       history.push('/');

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

@@ -4,9 +4,8 @@ import classNames from 'classnames';
 
 import type { List } from 'immutable';
 
-import type { Account } from 'flavours/glitch/types/resources';
-
 import { autoPlayGif } from '../initial_state';
+import type { Account } from '../types/resources';
 
 import { Skeleton } from './skeleton';
 

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import * as React from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 

app/javascript/flavours/glitch/components/edited_timestamp/index.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { openModal } from 'flavours/glitch/actions/modal';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import InlineAccount from 'flavours/glitch/components/inline_account';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'flavours/glitch/components/display_name';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+
+interface Props {
+  size?: number;
+  minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+  size = 46,
+  minimal = false,
+}) => {
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <Skeleton width={size} height={size} />
+          </div>
+
+          <div>
+            <DisplayName />
+            <Skeleton width='7ch' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import * as React from 'react';
 
 interface Props {
   src: string;

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

@@ -25,11 +25,11 @@ class SilentErrorBoundary extends Component {
     error: false,
   };
 
-  componentDidCatch () {
+  componentDidCatch() {
     this.setState({ error: true });
   }
 
-  render () {
+  render() {
     if (this.state.error) {
       return null;
     }

app/javascript/flavours/glitch/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';
+
+// Fit on a single line on desktop
+const VISIBLE_HASHTAGS = 3;
+
+// 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 || lastChild.nodeType === Node.TEXT_NODE) 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);
+
+  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/flavours/glitch/components/icon.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import classNames from 'classnames';
 
 interface Props extends React.HTMLAttributes<HTMLImageElement> {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { PureComponent } from 'react';
 
 import classNames from 'classnames';
 
@@ -33,7 +33,7 @@ interface States {
   activate: boolean;
   deactivate: boolean;
 }
-export class IconButton extends React.PureComponent<Props, States> {
+export class IconButton extends PureComponent<Props, States> {
   static defaultProps = {
     size: 18,
     active: false,

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Icon } from './icon';
 
 const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);

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

@@ -3,6 +3,7 @@ import { cloneElement, Component } from 'react';
 
 import getRectFromEntry from '../features/ui/util/get_rect_from_entry';
 import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
+
 // Diff these props in the "unrendered" state
 const updateOnPropsForUnrendered = ['id', 'index', 'listLength', 'cachedHeight'];
 
@@ -38,7 +39,6 @@ export default class IntersectionObserverArticle extends Component {
     return true;
   }
 
-
   componentDidMount () {
     const { intersectionObserverWrapper, id } = this.props;
 
@@ -106,24 +106,24 @@ export default class IntersectionObserverArticle extends Component {
     const { children, id, index, listLength, cachedHeight } = this.props;
     const { isIntersecting, isHidden } = this.state;
 
-    const style = {};
-
     if (!isIntersecting && (isHidden || cachedHeight)) {
-      style.height = `${this.height || cachedHeight || 150}px`;
-      style.opacity = 0;
-      style.overflow = 'hidden';
+      return (
+        <article
+          ref={this.handleRef}
+          aria-posinset={index + 1}
+          aria-setsize={listLength}
+          style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
+          data-id={id}
+          tabIndex={-1}
+        >
+          {children && cloneElement(children, { hidden: true })}
+        </article>
+      );
     }
 
     return (
-      <article
-        ref={this.handleRef}
-        aria-posinset={index + 1}
-        aria-setsize={listLength}
-        data-id={id}
-        tabIndex={0}
-        style={style}
-      >
-        {children && cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })}
+      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={-1}>
+        {children && cloneElement(children, { hidden: false })}
       </article>
     );
   }

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

@@ -11,7 +11,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 
 import { Blurhash } from 'flavours/glitch/components/blurhash';
-import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+
+import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 
 import { IconButton } from './icon_button';
 

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

@@ -110,8 +110,9 @@ class ModalRoot extends PureComponent {
   }
 
   _handleModalClose () {
-    this.unlistenHistory();
-
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
     const { state } = this.history.location;
     if (state && state.mastodonModalKey === this._modalHistoryKey) {
       this.history.goBack();

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { FormattedMessage } from 'react-intl';
 
 export const NotSignedInIndicator: React.FC = () => (

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

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 
 class PictureInPicturePlaceholder extends PureComponent {
 

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

@@ -10,13 +10,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import escapeTextContentForBrowser from 'escape-html';
 import spring from 'react-motion/lib/spring';
 
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import Motion from 'flavours/glitch/features/ui/util/optional_motion';
 
 import { RelativeTimestamp } from './relative_timestamp';
 
-
 const messages = defineMessages({
   closed: {
     id: 'poll.closed',

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import classNames from 'classnames';
 
 interface Props {

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

@@ -10,11 +10,11 @@ import { connect } from 'react-redux';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { throttle } from 'lodash';
 
-import IntersectionObserverArticleContainer from 'flavours/glitch/containers/intersection_observer_article_container';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
-import IntersectionObserverWrapper from 'flavours/glitch/features/ui/util/intersection_observer_wrapper';
 
+import IntersectionObserverArticleContainer from '../containers/intersection_observer_article_container';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
+import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
 
 import { LoadMore } from './load_more';
 import { LoadPending } from './load_pending';

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

@@ -63,7 +63,7 @@ class ServerBanner extends PureComponent {
           <div className='server-banner__meta__column'>
             <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
+            <Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
           </div>
 
           <div className='server-banner__meta__column'>

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

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import * as React from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 interface Props {
   width?: number | string;
   height?: number | string;

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

@@ -12,15 +12,18 @@ import { HotKeys } from 'react-hotkeys';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import PollContainer from 'flavours/glitch/containers/poll_container';
 import NotificationOverlayContainer from 'flavours/glitch/features/notifications/containers/overlay_container';
-import { displayMedia } from 'flavours/glitch/initial_state';
 import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { withOptionalRouter, WithOptionalRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 import Card from '../features/status/components/card';
+// We use the component (and not the container) since we do not want
+// to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
+import { displayMedia } from '../initial_state';
 
 import AttachmentList from './attachment_list';
+import { getHashtagBarForStatus } from './hashtag_bar';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import StatusHeader from './status_header';
@@ -76,6 +79,7 @@ class Status extends ImmutablePureComponent {
     previousId: PropTypes.string,
     nextInReplyToId: PropTypes.string,
     rootId: PropTypes.string,
+    onClick: PropTypes.func,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
@@ -106,7 +110,6 @@ class Status extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
-    onClick: PropTypes.func,
     scrollKey: PropTypes.string,
     deployPictureInPicture: PropTypes.func,
     settings: ImmutablePropTypes.map.isRequired,
@@ -566,7 +569,7 @@ class Status extends ImmutablePureComponent {
       openProfile: this.handleHotkeyOpenProfile,
       moveUp: this.handleHotkeyMoveUp,
       moveDown: this.handleHotkeyMoveDown,
-      toggleSpoiler: this.handleExpandedToggle,
+      toggleHidden: this.handleExpandedToggle,
       bookmark: this.handleHotkeyBookmark,
       toggleCollapse: this.handleHotkeyCollapse,
       toggleSensitive: this.handleHotkeyToggleSensitive,
@@ -779,6 +782,9 @@ class Status extends ImmutablePureComponent {
       muted,
     }, 'focusable');
 
+    const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
+    contentMedia.push(hashtagBar);
+
     return (
       <HotKeys handlers={handlers}>
         <div
@@ -828,6 +834,7 @@ class Status extends ImmutablePureComponent {
             disabled={!history}
             tagLinks={settings.get('tag_misleading_links')}
             rewriteMentions={settings.get('rewrite_mentions')}
+            {...statusContentProps}
           />
 
           {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (

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

@@ -8,12 +8,13 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
-import { me } from 'flavours/glitch/initial_state';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
+import DropdownMenuContainer from '../containers/dropdown_menu_container';
+import { me } from '../initial_state';
+
 import { IconButton } from './icon_button';
 import { RelativeTimestamp } from './relative_timestamp';
 

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

@@ -69,6 +69,15 @@ const isLinkMisleading = (link) => {
   return !(textMatchesTarget(text, origin, host) || textMatchesTarget(text.toLowerCase(), origin, host));
 };
 
+/**
+ *
+ * @param {any} status
+ * @returns {string}
+ */
+export function getStatusContent(status) {
+  return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
+}
+
 class TranslateButton extends PureComponent {
 
   static propTypes = {
@@ -118,6 +127,7 @@ class StatusContent extends PureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    statusContent: PropTypes.string,
     expanded: PropTypes.bool,
     collapsed: PropTypes.bool,
     onExpandedToggle: PropTypes.func,
@@ -327,6 +337,7 @@ class StatusContent extends PureComponent {
       tagLinks,
       rewriteMentions,
       intl,
+      statusContent,
     } = this.props;
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
@@ -334,7 +345,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/flavours/glitch/components/status_header.jsx

@@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 //  Mastodon imports.
 import { Avatar } from './avatar';
-import AvatarOverlay from './avatar_overlay';
+import { AvatarOverlay } from './avatar_overlay';
 import { DisplayName } from './display_name';
 
 export default class StatusHeader extends PureComponent {
@@ -39,7 +39,7 @@ export default class StatusHeader extends PureComponent {
 
     let statusAvatar;
     if (friend === undefined || friend === null) {
-      statusAvatar = <Avatar account={account} size={48} />;
+      statusAvatar = <Avatar account={account} size={46} />;
     } else {
       statusAvatar = <AvatarOverlay account={account} friend={friend} />;
     }

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

@@ -6,7 +6,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { debounce } from 'lodash';
 
 import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator';
-import StatusContainer from 'flavours/glitch/containers/status_container';
+
+import StatusContainer from '../containers/status_container';
 
 import { LoadGap } from './load_gap';
 import ScrollableList from './scrollable_list';

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { FormattedMessage } from 'react-intl';
 
 interface Props {

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

@@ -0,0 +1,27 @@
+import { Icon } from './icon';
+
+const domParser = new DOMParser();
+
+const stripRelMe = (html: string) => {
+  const document = domParser.parseFromString(html, 'text/html').documentElement;
+
+  document.querySelectorAll<HTMLAnchorElement>('a[rel]').forEach((link) => {
+    link.rel = link.rel
+      .split(' ')
+      .filter((x: string) => x !== 'me')
+      .join(' ');
+  });
+
+  const body = document.querySelector('body');
+  return body ? { __html: body.innerHTML } : undefined;
+};
+
+interface Props {
+  link: string;
+}
+export const VerifiedBadge: React.FC<Props> = ({ link }) => (
+  <span className='verified-badge'>
+    <Icon id='check' className='verified-badge__mark' />
+    <span dangerouslySetInnerHTML={stripRelMe(link)} />
+  </span>
+);

app/javascript/flavours/glitch/containers/account_container.jsx

@@ -9,12 +9,12 @@ import {
   unblockAccount,
   muteAccount,
   unmuteAccount,
-} from 'flavours/glitch/actions/accounts';
-import { openModal } from 'flavours/glitch/actions/modal';
-import { initMuteModal } from 'flavours/glitch/actions/mutes';
-import Account from 'flavours/glitch/components/account';
-import { unfollowModal } from 'flavours/glitch/initial_state';
-import { makeGetAccount } from 'flavours/glitch/selectors';
+} from '../actions/accounts';
+import { openModal } from '../actions/modal';
+import { initMuteModal } from '../actions/mutes';
+import Account from '../components/account';
+import { unfollowModal } from '../initial_state';
+import { makeGetAccount } from '../selectors';
 
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },

app/javascript/flavours/glitch/containers/compose_container.jsx

@@ -2,12 +2,13 @@ import { PureComponent } from 'react';
 
 import { Provider } from 'react-redux';
 
-import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
-import { hydrateStore } from 'flavours/glitch/actions/store';
-import Compose from 'flavours/glitch/features/standalone/compose';
-import initialState from 'flavours/glitch/initial_state';
-import { IntlProvider } from 'flavours/glitch/locales';
-import { store } from 'flavours/glitch/store';
+import { fetchCustomEmojis } from '../actions/custom_emojis';
+import { hydrateStore } from '../actions/store';
+import Compose from '../features/standalone/compose';
+import initialState from '../initial_state';
+import { IntlProvider } from '../locales';
+import { store } from '../store';
+
 
 if (initialState) {
   store.dispatch(hydrateStore(initialState));

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

@@ -1,9 +1,8 @@
 import { connect } from 'react-redux';
 
-import { openDropdownMenu, closeDropdownMenu } from 'flavours/glitch/actions/dropdown_menu';
-import { openModal, closeModal } from 'flavours/glitch/actions/modal';
-import DropdownMenu from 'flavours/glitch/components/dropdown_menu';
-
+import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
+import { openModal, closeModal } from '../actions/modal';
+import DropdownMenu from '../components/dropdown_menu';
 import { isUserTouching } from '../is_mobile';
 
 /**

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

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
-import { setHeight } from 'flavours/glitch/actions/height_cache';
-import IntersectionObserverArticle from 'flavours/glitch/components/intersection_observer_article';
+import { setHeight } from '../actions/height_cache';
+import IntersectionObserverArticle from '../components/intersection_observer_article';
 
 const makeMapStateToProps = (state, props) => ({
   cachedHeight: state.getIn(['height_cache', props.saveHeightKey, props.id]),

app/javascript/flavours/glitch/containers/mastodon.jsx

@@ -22,6 +22,7 @@ import { store } from 'flavours/glitch/store';
 const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
 
 const hydrateAction = hydrateStore(initialState);
+
 store.dispatch(hydrateAction);
 
 // check for deprecated local settings
@@ -71,8 +72,8 @@ export default class Mastodon extends PureComponent {
     }
   }
 
-  shouldUpdateScroll (_, { location }) {
-    return !(location.state?.mastodonModalKey);
+  shouldUpdateScroll (prevRouterProps, { location }) {
+    return !(location.state?.mastodonModalKey && location.state?.mastodonModalKey !== prevRouterProps?.location?.state?.mastodonModalKey);
   }
 
   render () {

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

@@ -10,9 +10,9 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
+import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'flavours/glitch/actions/server';
 import Column from 'flavours/glitch/components/column';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon  }  from 'flavours/glitch/components/icon';
 import { ServerHeroImage } from 'flavours/glitch/components/server_hero_image';
 import { Skeleton } from 'flavours/glitch/components/skeleton';
 import Account from 'flavours/glitch/containers/account_container';
@@ -128,7 +128,7 @@ class About extends PureComponent {
             <div className='about__meta__column'>
               <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
 
-              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
+              <Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
             </div>
 
             <hr className='about__meta__divider' />

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

@@ -1,108 +1,174 @@
 import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
+import { is } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import Textarea from 'react-textarea-autosize';
 
-import { Icon } from 'flavours/glitch/components/icon';
-
 const messages = defineMessages({
-  placeholder: { id: 'account_note.glitch_placeholder', defaultMessage: 'No comment provided' },
+  placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
 });
 
-class Header extends ImmutablePureComponent {
+class InlineAlert extends PureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    isEditing: PropTypes.bool,
-    isSubmitting: PropTypes.bool,
-    accountNote: PropTypes.string,
-    onEditAccountNote: PropTypes.func.isRequired,
-    onCancelAccountNote: PropTypes.func.isRequired,
-    onSaveAccountNote: PropTypes.func.isRequired,
-    onChangeAccountNote: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
+    show: PropTypes.bool,
   };
 
-  handleChangeAccountNote = (e) => {
-    this.props.onChangeAccountNote(e.target.value);
+  state = {
+    mountMessage: false,
   };
 
-  componentWillUnmount () {
-    if (this.props.isEditing) {
-      this.props.onCancelAccountNote();
+  static TRANSITION_DELAY = 200;
+
+  UNSAFE_componentWillReceiveProps (nextProps) {
+    if (!this.props.show && nextProps.show) {
+      this.setState({ mountMessage: true });
+    } else if (this.props.show && !nextProps.show) {
+      setTimeout(() => this.setState({ mountMessage: false }), InlineAlert.TRANSITION_DELAY);
     }
   }
 
+  render () {
+    const { show } = this.props;
+    const { mountMessage } = this.state;
+
+    return (
+      <span aria-live='polite' role='status' className='inline-alert' style={{ opacity: show ? 1 : 0 }}>
+        {mountMessage && <FormattedMessage id='generic.saved' defaultMessage='Saved' />}
+      </span>
+    );
+  }
+
+}
+
+class AccountNote extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    value: PropTypes.string,
+    onSave: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    value: null,
+    saving: false,
+    saved: false,
+  };
+
+  UNSAFE_componentWillMount () {
+    this._reset();
+  }
+
+  UNSAFE_componentWillReceiveProps (nextProps) {
+    const accountWillChange = !is(this.props.account, nextProps.account);
+    const newState = {};
+
+    if (accountWillChange && this._isDirty()) {
+      this._save(false);
+    }
+
+    if (accountWillChange || nextProps.value === this.state.value) {
+      newState.saving = false;
+    }
+
+    if (this.props.value !== nextProps.value) {
+      newState.value = nextProps.value;
+    }
+
+    this.setState(newState);
+  }
+
+  componentWillUnmount () {
+    if (this._isDirty()) {
+      this._save(false);
+    }
+  }
+
+  setTextareaRef = c => {
+    this.textarea = c;
+  };
+
+  handleChange = e => {
+    this.setState({ value: e.target.value, saving: false });
+  };
+
   handleKeyDown = e => {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      this.props.onSaveAccountNote();
+      e.preventDefault();
+
+      this._save();
+
+      if (this.textarea) {
+        this.textarea.blur();
+      }
     } else if (e.keyCode === 27) {
-      this.props.onCancelAccountNote();
+      e.preventDefault();
+
+      this._reset(() => {
+        if (this.textarea) {
+          this.textarea.blur();
+        }
+      });
     }
   };
 
+  handleBlur = () => {
+    if (this._isDirty()) {
+      this._save();
+    }
+  };
+
+  _save (showMessage = true) {
+    this.setState({ saving: true }, () => this.props.onSave(this.state.value));
+
+    if (showMessage) {
+      this.setState({ saved: true }, () => setTimeout(() => this.setState({ saved: false }), 2000));
+    }
+  }
+
+  _reset (callback) {
+    this.setState({ value: this.props.value }, callback);
+  }
+
+  _isDirty () {
+    return !this.state.saving && this.props.value !== null && this.state.value !== null && this.state.value !== this.props.value;
+  }
+
   render () {
-    const { account, accountNote, isEditing, isSubmitting, intl } = this.props;
+    const { account, intl } = this.props;
+    const { value, saved } = this.state;
 
-    if (!account || (!accountNote && !isEditing)) {
+    if (!account) {
       return null;
     }
 
-    let action_buttons = null;
-    if (isEditing) {
-      action_buttons = (
-        <div className='account__header__account-note__buttons'>
-          <button className='icon-button' tabIndex={0} onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
-            <Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
-          </button>
-          <div className='flex-spacer' />
-          <button className='icon-button' tabIndex={0} onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
-            <Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' />
-          </button>
-        </div>
-      );
-    } else {
-      action_buttons = (
-        <div className='account__header__account-note__buttons'>
-          <button className='icon-button' tabIndex={0} onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
-            <Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
-          </button>
-        </div>
-      );
-    }
-
-    let note_container = null;
-    if (isEditing) {
-      note_container = (
-        <Textarea
-          className='account__header__account-note__content'
-          disabled={isSubmitting}
-          placeholder={intl.formatMessage(messages.placeholder)}
-          value={accountNote}
-          onChange={this.handleChangeAccountNote}
-          onKeyDown={this.handleKeyDown}
-          autoFocus
-        />
-      );
-    } else {
-      note_container = (<div className='account__header__account-note__content'>{accountNote}</div>);
-    }
-
     return (
       <div className='account__header__account-note'>
-        <div className='account__header__account-note__header'>
-          <strong><FormattedMessage id='account.account_note_header' defaultMessage='Note' /></strong>
-          {action_buttons}
-        </div>
-        {note_container}
+        <label htmlFor={`account-note-${account.get('id')}`}>
+          <FormattedMessage id='account.account_note_header' defaultMessage='Note' /> <InlineAlert show={saved} />
+        </label>
+
+        <Textarea
+          id={`account-note-${account.get('id')}`}
+          className='account__header__account-note__content'
+          disabled={this.props.value === null || value === null}
+          placeholder={intl.formatMessage(messages.placeholder)}
+          value={value || ''}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          onBlur={this.handleBlur}
+          ref={this.setTextareaRef}
+        />
       </div>
     );
   }
 
 }
 
-export default injectIntl(Header);
+export default injectIntl(AccountNote);

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

@@ -38,7 +38,7 @@ class FeaturedTags extends ImmutablePureComponent {
             name={featuredTag.get('name')}
             href={featuredTag.get('url')}
             to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
-            uses={featuredTag.get('statuses_count')}
+            uses={featuredTag.get('statuses_count') * 1}
             withGraph={false}
             description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
           />

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

@@ -11,7 +11,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { Button } from 'flavours/glitch/components/button';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { autoPlayGif, me, domain } from 'flavours/glitch/initial_state';
@@ -59,7 +59,6 @@ const messages = defineMessages({
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
-  add_account_note: { id: 'account.add_account_note', defaultMessage: 'Add note for @{name}' },
   languages: { id: 'account.languages', defaultMessage: 'Change subscribed languages' },
   openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
 });
@@ -98,7 +97,6 @@ class Header extends ImmutablePureComponent {
     onUnblockDomain: PropTypes.func.isRequired,
     onEndorseToggle: PropTypes.func.isRequired,
     onAddToList: PropTypes.func.isRequired,
-    onEditAccountNote: PropTypes.func.isRequired,
     onChangeLanguages: PropTypes.func.isRequired,
     onInteractionModal: PropTypes.func.isRequired,
     onOpenAvatar: PropTypes.func.isRequired,
@@ -167,8 +165,6 @@ class Header extends ImmutablePureComponent {
       return null;
     }
 
-    const accountNote = account.getIn(['relationship', 'note']);
-
     const suspended    = account.get('suspended');
     const isRemote     = account.get('acct') !== account.get('username');
     const remoteDomain = isRemote ? account.get('acct').split('@')[1] : null;
@@ -237,10 +233,6 @@ class Header extends ImmutablePureComponent {
       menu.push(null);
     }
 
-    if (accountNote === null || accountNote === '') {
-      menu.push({ text: intl.formatMessage(messages.add_account_note, { name: account.get('username') }), action: this.props.onEditAccountNote });
-    }
-
     if (account.get('id') === me) {
       if (profileLink) menu.push({ text: intl.formatMessage(messages.edit_profile), href: profileLink });
       if (preferencesLink) menu.push({ text: intl.formatMessage(messages.preferences), href: preferencesLink });

app/javascript/flavours/glitch/features/account/containers/account_note_container.js

@@ -1,36 +1,19 @@
 import { connect } from 'react-redux';
 
-import { changeAccountNoteComment, submitAccountNote, initEditAccountNote, cancelAccountNote } from 'flavours/glitch/actions/account_notes';
+import { submitAccountNote } from 'flavours/glitch/actions/account_notes';
 
 import AccountNote from '../components/account_note';
 
-const mapStateToProps = (state, { account }) => {
-  const isEditing = state.getIn(['account_notes', 'edit', 'account_id']) === account.get('id');
-
-  return {
-    isSubmitting: state.getIn(['account_notes', 'edit', 'isSubmitting']),
-    accountNote: isEditing ? state.getIn(['account_notes', 'edit', 'comment']) : account.getIn(['relationship', 'note']),
-    isEditing,
-  };
-};
+const mapStateToProps = (state, { account }) => ({
+  value: account.getIn(['relationship', 'note']),
+});
 
 const mapDispatchToProps = (dispatch, { account }) => ({
 
-  onEditAccountNote() {
-    dispatch(initEditAccountNote(account));
+  onSave (value) {
+    dispatch(submitAccountNote({ id: account.get('id'), value}));
   },
 
-  onSaveAccountNote() {
-    dispatch(submitAccountNote());
-  },
-
-  onCancelAccountNote() {
-    dispatch(cancelAccountNote());
-  },
-
-  onChangeAccountNote(comment) {
-    dispatch(changeAccountNoteComment(comment));
-  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(AccountNote);

app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx

@@ -6,11 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Blurhash } from 'flavours/glitch/components/blurhash';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 
-
-
 export default class MediaItem extends ImmutablePureComponent {
 
   static propTypes = {
@@ -78,7 +76,7 @@ export default class MediaItem extends ImmutablePureComponent {
       if (['audio', 'video'].includes(attachment.get('type'))) {
         content = (
           <img
-            src={attachment.get('preview_url') || attachment.getIn(['account', 'avatar_static'])}
+            src={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
             alt={attachment.get('description')}
             lang={status.get('language')}
             onLoad={this.handleImageLoad}

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

@@ -8,17 +8,18 @@ import { connect } from 'react-redux';
 
 import { lookupAccount, fetchAccount } from 'flavours/glitch/actions/accounts';
 import { openModal } from 'flavours/glitch/actions/modal';
-import { expandAccountMediaTimeline } from 'flavours/glitch/actions/timelines';
 import { LoadMore } from 'flavours/glitch/components/load_more';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
-import HeaderContainer from 'flavours/glitch/features/account_timeline/containers/header_container';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
-import Column from 'flavours/glitch/features/ui/components/column';
 import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
 import { getAccountGallery } from 'flavours/glitch/selectors';
 
+import { expandAccountMediaTimeline } from '../../actions/timelines';
+import HeaderContainer from '../account_timeline/containers/header_container';
+import Column from '../ui/components/column';
+
 import MediaItem from './components/media_item';
 
 const mapStateToProps = (state, { params: { acct, id } }) => {

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

@@ -7,10 +7,11 @@ import { NavLink, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import ActionBar from 'flavours/glitch/features/account/components/action_bar';
-import InnerHeader from 'flavours/glitch/features/account/components/header';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
+import ActionBar from '../../account/components/action_bar';
+import InnerHeader from '../../account/components/header';
+
 import MemorialNote from './memorial_note';
 import MovedNote from './moved_note';
 

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx

@@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Icon } from 'flavours/glitch/components/icon';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
-import AvatarOverlay from '../../../components/avatar_overlay';
+import { AvatarOverlay } from '../../../components/avatar_overlay';
 import { DisplayName } from '../../../components/display_name';
 
 class MovedNote extends ImmutablePureComponent {

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

@@ -2,7 +2,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { initEditAccountNote } from 'flavours/glitch/actions/account_notes';
 import {
   followAccount,
   unfollowAccount,
@@ -10,19 +9,18 @@ import {
   unmuteAccount,
   pinAccount,
   unpinAccount,
-} from 'flavours/glitch/actions/accounts';
-import { initBlockModal } from 'flavours/glitch/actions/blocks';
+} from '../../../actions/accounts';
+import { initBlockModal } from '../../../actions/blocks';
 import {
   mentionCompose,
   directCompose,
-} from 'flavours/glitch/actions/compose';
-import { blockDomain, unblockDomain } from 'flavours/glitch/actions/domain_blocks';
-import { openModal } from 'flavours/glitch/actions/modal';
-import { initMuteModal } from 'flavours/glitch/actions/mutes';
-import { initReport } from 'flavours/glitch/actions/reports';
-import { unfollowModal } from 'flavours/glitch/initial_state';
-import { makeGetAccount, getAccountHidden } from 'flavours/glitch/selectors';
-
+} from '../../../actions/compose';
+import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
+import { openModal } from '../../../actions/modal';
+import { initMuteModal } from '../../../actions/mutes';
+import { initReport } from '../../../actions/reports';
+import { unfollowModal } from '../../../initial_state';
+import { makeGetAccount, getAccountHidden } from '../../../selectors';
 import Header from '../components/header';
 
 const messages = defineMessages({
@@ -140,10 +138,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
-  onEditAccountNote (account) {
-    dispatch(initEditAccountNote(account));
-  },
-
   onBlockDomain (domain) {
     dispatch(openModal({
       modalType: 'CONFIRM',

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

@@ -7,13 +7,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { lookupAccount, fetchAccount } from 'flavours/glitch/actions/accounts';
 import { TimelineHint } from 'flavours/glitch/components/timeline_hint';
 import ProfileColumnHeader from 'flavours/glitch/features/account/components/profile_column_header';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map';
 import { getAccountHidden } from 'flavours/glitch/selectors';
 
+import { lookupAccount, fetchAccount } from '../../actions/accounts';
 import { fetchFeaturedTags } from '../../actions/featured_tags';
 import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
 import { LoadingIndicator } from '../../components/loading_indicator';
@@ -23,13 +23,6 @@ import Column from '../ui/components/column';
 import LimitedAccountHint from './components/limited_account_hint';
 import HeaderContainer from './containers/header_container';
 
-
-
-
-
-
-
-
 const emptyList = ImmutableList();
 
 const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = false }) => {
@@ -191,7 +184,7 @@ class AccountTimeline extends ImmutablePureComponent {
     const remoteMessage = remote ? <RemoteHint url={remoteUrl} /> : null;
 
     return (
-      <Column ref={this.setRef} name='account'>
+      <Column ref={this.setRef}>
         <ProfileColumnHeader onClick={this.handleHeaderClick} multiColumn={multiColumn} />
 
         <StatusList

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

@@ -9,15 +9,14 @@ import { is } from 'immutable';
 
 import { throttle, debounce } from 'lodash';
 
-import { Blurhash } from 'flavours/glitch/components/blurhash';
-import { Icon } from 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';
-import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+
+import { Blurhash } from '../../components/blurhash';
+import { displayMedia, useBlurhash } from '../../initial_state';
 
 import Visualizer from './visualizer';
 
-
-
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
   pause: { id: 'video.pause', defaultMessage: 'Pause' },

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

@@ -8,13 +8,12 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
-import { fetchBlocks, expandBlocks } from 'flavours/glitch/actions/blocks';
-import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim';
-import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
-import AccountContainer from 'flavours/glitch/containers/account_container';
-import Column from 'flavours/glitch/features/ui/components/column';
-
+import { fetchBlocks, expandBlocks } from '../../actions/blocks';
+import ColumnBackButtonSlim from '../../components/column_back_button_slim';
+import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
+import AccountContainer from '../../containers/account_container';
+import Column from '../ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocked users' },
@@ -60,7 +59,7 @@ class Blocks extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.blocks' defaultMessage="You haven't blocked any users yet." />;
 
     return (
-      <Column name='blocks' bindToDocument={!multiColumn} icon='ban' heading={intl.formatMessage(messages.heading)}>
+      <Column bindToDocument={!multiColumn} icon='ban' heading={intl.formatMessage(messages.heading)}>
         <ColumnBackButtonSlim />
         <ScrollableList
           scrollKey='blocks'