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

Merge upstream changes up to d6f2a3ac8d

.devcontainer/compose.yaml

@@ -73,7 +73,7 @@ services:
         hard: -1
 
   libretranslate:
-    image: libretranslate/libretranslate:v1.6.2
+    image: libretranslate/libretranslate:v1.7.3
     restart: unless-stopped
     volumes:
       - lt-data:/home/libretranslate/.local

.github/actions/setup-javascript/action.yml

@@ -9,7 +9,7 @@ runs:
   using: 'composite'
   steps:
     - name: Set up Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
         node-version-file: '.nvmrc'
 

.github/renovate.json5

@@ -5,7 +5,6 @@
     'customManagers:dockerfileVersions',
     ':labels(dependencies)',
     ':prConcurrentLimitNone', // Remove limit for open PRs at any time.
-    ':prHourlyLimit2', // Rate limit PR creation to a maximum of two per hour.
     ':enableVulnerabilityAlertsWithLabel(security)',
   ],
   rebaseWhen: 'conflicted',
@@ -23,8 +22,6 @@
       // Require Dependency Dashboard Approval for major version bumps of these node packages
       matchManagers: ['npm'],
       matchPackageNames: [
-        'tesseract.js', // Requires code changes
-
         // react-router: Requires manual upgrade
         'history',
         'react-router-dom',

.github/workflows/build-container-image.yml

@@ -35,7 +35,7 @@ jobs:
           - linux/arm64
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Prepare
         env:
@@ -100,7 +100,7 @@ jobs:
 
       - name: Upload digest
         if: ${{ inputs.push_to_images != '' }}
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           # `hashFiles` is used to disambiguate between streaming and non-streaming images
           name: digests-${{ hashFiles(inputs.file_to_build) }}-${{ env.PLATFORM_PAIR }}
@@ -119,10 +119,10 @@ jobs:
       PUSH_TO_IMAGES: ${{ inputs.push_to_images }}
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Download digests
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v6
         with:
           path: ${{ runner.temp }}/digests
           # `hashFiles` is used to disambiguate between streaming and non-streaming images

.github/workflows/build-push-pr.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       # Repository needs to be cloned so `git rev-parse` below works
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - id: version_vars
         run: |
           echo mastodon_version_metadata=pr-${{ github.event.pull_request.number }}-$(git rev-parse --short ${{github.event.pull_request.head.sha}}) >> $GITHUB_OUTPUT

.github/workflows/bundler-audit.yml

@@ -28,7 +28,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1

.github/workflows/check-i18n.yml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Set up Ruby environment
         uses: ./.github/actions/setup-ruby

.github/workflows/chromatic.yml

@@ -1,31 +1,51 @@
 name: 'Chromatic'
+permissions:
+  contents: read
 
 on:
   push:
     branches-ignore:
       - renovate/*
       - stable-*
-    paths:
-      - 'package.json'
-      - 'yarn.lock'
-      - '**/*.js'
-      - '**/*.jsx'
-      - '**/*.ts'
-      - '**/*.tsx'
-      - '**/*.css'
-      - '**/*.scss'
-      - '.github/workflows/chromatic.yml'
 
 jobs:
+  pathcheck:
+    name: Check for relevant changes
+    runs-on: ubuntu-latest
+    outputs:
+      changed: ${{ steps.filter.outputs.src }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            src:
+              - 'package.json'
+              - 'yarn.lock'
+              - '**/*.js'
+              - '**/*.jsx'
+              - '**/*.ts'
+              - '**/*.tsx'
+              - '**/*.css'
+              - '**/*.scss'
+              - '.github/workflows/chromatic.yml'
+
   chromatic:
     name: Run Chromatic
     runs-on: ubuntu-latest
-    if: github.repository == 'mastodon/mastodon'
+    needs: pathcheck
+    if: github.repository == 'mastodon/mastodon' && needs.pathcheck.outputs.changed == 'true'
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
+
       - name: Set up Javascript environment
         uses: ./.github/actions/setup-javascript
 
@@ -33,9 +53,10 @@ jobs:
         run: yarn build-storybook
 
       - name: Run Chromatic
-        uses: chromaui/action@v12
+        uses: chromaui/action@v13
         with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           zip: true
           storybookBuildDir: 'storybook-static'
+          exitZeroOnChanges: false # Fail workflow if changes are found
+          autoAcceptChanges: 'main' # Auto-accept changes on main branch only

.github/workflows/codeql.yml

@@ -31,11 +31,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -48,7 +48,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v4
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -61,6 +61,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/crowdin-download-stable.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Increase Git http.postBuffer
         # This is needed due to a bug in Ubuntu's cURL version?

.github/workflows/crowdin-download.yml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Increase Git http.postBuffer
         # This is needed due to a bug in Ubuntu's cURL version?

.github/workflows/crowdin-upload.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: crowdin action
         uses: crowdin/github-action@v2

.github/workflows/format-check.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Javascript environment
         uses: ./.github/actions/setup-javascript

.github/workflows/lint-css.yml

@@ -34,7 +34,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Javascript environment
         uses: ./.github/actions/setup-javascript

.github/workflows/lint-haml.yml

@@ -33,7 +33,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1

.github/workflows/lint-js.yml

@@ -38,7 +38,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Javascript environment
         uses: ./.github/actions/setup-javascript

.github/workflows/lint-ruby.yml

@@ -35,7 +35,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1

.github/workflows/test-js.yml

@@ -34,7 +34,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Set up Javascript environment
         uses: ./.github/actions/setup-javascript

.github/workflows/test-migrations.yml

@@ -72,7 +72,7 @@ jobs:
       BUNDLE_RETRY: 3
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Set up Ruby environment
         uses: ./.github/actions/setup-ruby

.github/workflows/test-ruby.yml

@@ -32,7 +32,7 @@ jobs:
       SECRET_KEY_BASE_DUMMY: 1
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Set up Ruby environment
         uses: ./.github/actions/setup-ruby
@@ -65,7 +65,7 @@ jobs:
         run: |
           tar --exclude={"*.br","*.gz"} -zcf artifacts.tar.gz public/assets public/packs* tmp/cache/vite/last-build*.json
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v5
         if: matrix.mode == 'test'
         with:
           path: |-
@@ -128,9 +128,9 @@ jobs:
           - '3.3'
           - '.ruby-version'
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v6
         with:
           path: './'
           name: ${{ github.sha }}
@@ -230,9 +230,9 @@ jobs:
           - '3.3'
           - '.ruby-version'
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v6
         with:
           path: './'
           name: ${{ github.sha }}
@@ -309,9 +309,9 @@ jobs:
           - '.ruby-version'
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v6
         with:
           path: './'
           name: ${{ github.sha }}
@@ -350,14 +350,14 @@ jobs:
       - run: bin/rspec spec/system --tag streaming --tag js
 
       - name: Archive logs
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           name: e2e-logs-${{ matrix.ruby-version }}
           path: log/
 
       - name: Archive test screenshots
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           name: e2e-screenshots-${{ matrix.ruby-version }}
@@ -447,9 +447,9 @@ jobs:
             search-image: opensearchproject/opensearch:2
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v6
         with:
           path: './'
           name: ${{ github.sha }}
@@ -469,14 +469,14 @@ jobs:
       - run: bin/rspec --tag search
 
       - name: Archive logs
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           name: test-search-logs-${{ matrix.ruby-version }}
           path: log/
 
       - name: Archive test screenshots
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         if: failure()
         with:
           name: test-search-screenshots

.nvmrc

@@ -1 +1 @@
-24.10
+24.11

.prettierignore

@@ -95,6 +95,7 @@ AUTHORS.md
 
 # Ignore glitch-soc vendored CSS reset
 app/javascript/flavours/glitch/styles/reset.scss
+app/javascript/flavours/glitch/styles_new/mastodon/reset.scss
 
 # Ignore win95 theme
 app/javascript/styles/win95.scss

.storybook/main.ts

@@ -31,7 +31,7 @@ const config: StorybookConfig = {
   viteFinal(config) {
     // For an unknown reason, Storybook does not use the root
     // from the Vite config so we need to set it manually.
-    config.root = resolve(__dirname, '../app/javascript');
+    config.root = resolve(import.meta.dirname, '../app/javascript');
     return config;
   },
 };

.storybook/preview-body.html

@@ -1,2 +1,2 @@
-<html class="no-reduce-motion">
+<html class="no-reduce-motion theme-light">
 </html>

.storybook/static/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.11.3'
+const PACKAGE_VERSION = '2.12.1'
 const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
@@ -205,6 +205,7 @@ async function resolveMainClient(event) {
  * @param {FetchEvent} event
  * @param {Client | undefined} client
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  * @returns {Promise<Response>}
  */
 async function getResponse(event, client, requestId, requestInterceptedAt) {

.yarn/patches/babel-plugin-lodash-npm-3.3.4-c7161075b6.patch

@@ -1,13 +0,0 @@
-diff --git a/lib/index.js b/lib/index.js
-index 16ed6be8be8f555cc99096c2ff60954b42dc313d..d009c069770d066ad0db7ad02de1ea473a29334e 100644
---- a/lib/index.js
-+++ b/lib/index.js
-@@ -99,7 +99,7 @@ function lodash(_ref) {
- 
-         var node = _ref3;
- 
--        if ((0, _types.isModuleDeclaration)(node)) {
-+        if ((0, _types.isImportDeclaration)(node)  || (0, _types.isExportDeclaration)(node)) {
-           isModule = true;
-           break;
-         }

AUTHORS.md

@@ -538,7 +538,7 @@ and provided thanks to the work of the following contributors:
 * [Drew Schuster](mailto:dtschust@gmail.com)
 * [Dryusdan](mailto:dryusdan@dryusdan.fr)
 * [Eai](mailto:eai@mizle.net)
-* [Eashwar Ranganathan](mailto:eranganathan@lyft.com)
+* [Eashwar Ranganathan](mailto:eashwar@eashwar.com)
 * [Ed Knutson](mailto:knutsoned@gmail.com)
 * [Elizabeth Martín Campos](mailto:me@elizabeth.sh)
 * [Elizabeth Myers](mailto:elizabeth@interlinked.me)

CHANGELOG.md

@@ -2,9 +2,50 @@
 
 All notable changes to this project will be documented in this file.
 
+## [4.5.3] - 2025-12-08
+
+### Security
+
+- Fix inconsistent error handling leaking information on existence of private posts ([GHSA-gwhw-gcjx-72v8](https://github.com/mastodon/mastodon/security/advisories/GHSA-gwhw-gcjx-72v8))
+
+### Fixed
+
+- Fix “Delete and Redraft” on a non-quote being treated as a quote post in some cases (#37140 by @ClearlyClaire)
+- Fix YouTube embeds by sending referer (#37126 by @ChaosExAnima)
+- Fix streamed quoted polls not being hydrated correctly (#37118 by @ClearlyClaire)
+- Fix creation of duplicate conversations (#37108 by @oneiros)
+- Fix extraneous `noreferrer` in external links (#37107 by @ChaosExAnima)
+- Fix edge case error handling in some database migrations (#37079 by @ClearlyClaire)
+- Fix error handling when re-fetching already-known statuses (#37077 by @ClearlyClaire)
+- Fix post navigation in single-column mode when Advanced UI is enabled (#37044 by @diondiondion)
+- Fix `tootctl status remove` removing quoted posts and remote quotes of local posts (#37009 by @ClearlyClaire)
+- Fix known expensive S3 batch delete operation failing because of short timeouts (#37004 by @ClearlyClaire)
+- Fix compose autosuggest always lowercasing input token (#36995 by @ClearlyClaire)
+
+## [4.5.2] - 2025-11-20
+
+### Changed
+
+- Change private quote education modal to not show up on self-quotes (#36926 by @ClearlyClaire)
+
+### Fixed
+
+- Fix missing fallback link in CW-only quote posts (#36963 by @ClearlyClaire)
+- Fix statuses without text being hidden while loading (#36962 by @ClearlyClaire)
+- Fix `g` + `h` keyboard shortcut not working when a post is focused (#36935 by @diondiondion)
+- Fix quoting overwriting current content warning (#36934 by @ClearlyClaire)
+- Fix scroll-to-status in threaded view being unreliable (#36927 by @ClearlyClaire)
+- Fix path resolution for emoji worker (#36897 by @ChaosExAnima)
+- Fix `tootctl upgrade storage-schema` failing with `ArgumentError` (#36914 by @shugo)
+- Fix cross-origin handling of CSS modules (#36890 by @ClearlyClaire)
+- Fix error with remote tags including percent signs (#36886 and #36925 by @ChaosExAnima and @ClearlyClaire)
+- Fix bogus quote approval policy not always being replaced correctly (#36885 by @ClearlyClaire)
+- Fix hashtag completion not being inserted correctly (#36884 by @ClearlyClaire)
+- Fix Cmd/Ctrl + Enter in the composer triggering confirmation dialog action (#36870 by @diondiondion)
+
 ## [4.5.1] - 2025-11-13
 
-### Fixes
+### Fixed
 
 - Fix Cmd/Ctrl + Enter not submitting Alt text modal on some browsers (#36866 by @diondiondion)
 - Fix posts coming from public/hashtag streaming being marked as unquotable (#36860 and #36869 by @ClearlyClaire)

Gemfile

@@ -13,7 +13,7 @@ gem 'haml-rails', '~>3.0'
 gem 'pg', '~> 1.5'
 gem 'pghero'
 
-gem 'aws-sdk-core', '< 3.216.0', require: false # TODO: https://github.com/mastodon/mastodon/pull/34173#issuecomment-2733378873
+gem 'aws-sdk-core', require: false
 gem 'aws-sdk-s3', '~> 1.123', require: false
 gem 'blurhash', '~> 0.1'
 gem 'fog-core', '<= 2.6.0'
@@ -24,7 +24,7 @@ gem 'ruby-vips', '~> 2.2', require: false
 
 gem 'active_model_serializers', '~> 0.10'
 gem 'addressable', '~> 2.8'
-gem 'bootsnap', '~> 1.18.0', require: false
+gem 'bootsnap', '~> 1.19.0', require: false
 gem 'browser'
 gem 'charlock_holmes', '~> 0.7.7'
 gem 'chewy', '~> 7.3'
@@ -40,7 +40,7 @@ gem 'net-ldap', '~> 0.18'
 gem 'omniauth', '~> 2.0'
 gem 'omniauth-cas', '~> 3.0.0.beta.1'
 gem 'omniauth_openid_connect', '~> 0.8.0'
-gem 'omniauth-rails_csrf_protection', '~> 1.0'
+gem 'omniauth-rails_csrf_protection', '~> 2.0'
 gem 'omniauth-saml', '~> 2.0'
 
 gem 'color_diff', '~> 0.1'
@@ -71,7 +71,7 @@ gem 'oj', '~> 3.14'
 gem 'ox', '~> 2.14'
 gem 'parslet'
 gem 'premailer-rails'
-gem 'public_suffix', '~> 6.0'
+gem 'public_suffix', '~> 7.0'
 gem 'pundit', '~> 2.3'
 gem 'rack-attack', '~> 6.6'
 gem 'rack-cors', require: 'rack/cors'
@@ -114,7 +114,7 @@ group :opentelemetry do
   gem 'opentelemetry-instrumentation-http', '~> 0.27.0', require: false
   gem 'opentelemetry-instrumentation-http_client', '~> 0.26.0', require: false
   gem 'opentelemetry-instrumentation-net_http', '~> 0.26.0', require: false
-  gem 'opentelemetry-instrumentation-pg', '~> 0.32.0', require: false
+  gem 'opentelemetry-instrumentation-pg', '~> 0.34.0', require: false
   gem 'opentelemetry-instrumentation-rack', '~> 0.29.0', require: false
   gem 'opentelemetry-instrumentation-rails', '~> 0.39.0', require: false
   gem 'opentelemetry-instrumentation-redis', '~> 0.28.0', require: false
@@ -138,7 +138,7 @@ group :test do
   # Browser integration testing
   gem 'capybara', '~> 3.39'
   gem 'capybara-playwright-driver'
-  gem 'playwright-ruby-client', '1.55.0', require: false # Pinning the exact version as it needs to be kept in sync with the installed npm package
+  gem 'playwright-ruby-client', '1.56.0', require: false # Pinning the exact version as it needs to be kept in sync with the installed npm package
 
   # Used to reset the database between system tests
   gem 'database_cleaner-active_record'

Gemfile.lock

@@ -86,8 +86,8 @@ GEM
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
+    addressable (2.8.8)
+      public_suffix (>= 2.0.2, < 8.0)
     aes_key_wrap (1.1.0)
     android_key_attestation (0.3.0)
     annotaterb (4.20.0)
@@ -96,17 +96,20 @@ GEM
     ast (2.4.3)
     attr_required (1.0.2)
     aws-eventstream (1.4.0)
-    aws-partitions (1.1168.0)
-    aws-sdk-core (3.215.1)
+    aws-partitions (1.1190.0)
+    aws-sdk-core (3.239.2)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
+      base64
+      bigdecimal
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.96.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+      logger
+    aws-sdk-kms (1.118.0)
+      aws-sdk-core (~> 3, >= 3.239.1)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.177.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-s3 (1.206.0)
+      aws-sdk-core (~> 3, >= 3.234.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
     aws-sigv4 (1.12.1)
@@ -126,14 +129,14 @@ GEM
     binding_of_caller (1.0.1)
       debug_inspector (>= 1.2.0)
     blurhash (0.1.8)
-    bootsnap (1.18.6)
+    bootsnap (1.19.0)
       msgpack (~> 1.2)
     brakeman (7.1.1)
       racc
     browser (6.2.0)
     builder (3.3.0)
-    bundler-audit (0.9.2)
-      bundler (>= 1.2.0, < 3)
+    bundler-audit (0.9.3)
+      bundler (>= 1.2.0)
       thor (~> 1.0)
     capybara (3.40.0)
       addressable
@@ -164,7 +167,7 @@ GEM
     cocoon (1.2.15)
     color_diff (0.1)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.4)
+    connection_pool (2.5.5)
     cose (1.3.1)
       cbor (~> 0.5.9)
       openssl-signature_algorithm (~> 1.0)
@@ -179,7 +182,7 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0)
     database_cleaner-core (2.0.1)
-    date (3.4.1)
+    date (3.5.0)
     debug (1.11.0)
       irb (~> 1.10)
       reline (>= 0.3.8)
@@ -231,7 +234,7 @@ GEM
     excon (1.3.0)
       logger
     fabrication (3.0.0)
-    faker (3.5.2)
+    faker (3.5.3)
       i18n (>= 1.8.11, < 2)
     faraday (2.14.0)
       faraday-net_http (>= 2.0, < 3.5)
@@ -279,7 +282,7 @@ GEM
       rake (>= 13)
     googleapis-common-protos-types (1.22.0)
       google-protobuf (~> 4.26)
-    haml (6.3.0)
+    haml (6.4.0)
       temple (>= 0.8.2)
       thor
       tilt
@@ -288,7 +291,7 @@ GEM
       activesupport (>= 5.1)
       haml (>= 4.0.6)
       railties (>= 5.1)
-    haml_lint (0.66.0)
+    haml_lint (0.67.0)
       haml (>= 5.0)
       parallel (~> 1.10)
       rainbow
@@ -301,8 +304,8 @@ GEM
     highline (3.1.2)
       reline
     hiredis (0.6.3)
-    hiredis-client (0.26.1)
-      redis-client (= 0.26.1)
+    hiredis-client (0.26.2)
+      redis-client (= 0.26.2)
     hkdf (0.3.0)
     htmlentities (4.3.4)
     http (5.3.1)
@@ -321,13 +324,14 @@ GEM
       rainbow (>= 2.0.0)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    i18n-tasks (1.0.15)
+    i18n-tasks (1.1.2)
       activesupport (>= 4.0.2)
       ast (>= 2.1.0)
       erubi
-      highline (>= 2.0.0)
+      highline (>= 3.0.0)
       i18n
       parser (>= 3.2.2.1)
+      prism
       rails-i18n
       rainbow (>= 2.2.2, < 4.0)
       ruby-progressbar (~> 1.8, >= 1.8.1)
@@ -346,7 +350,7 @@ GEM
       azure-blob (~> 0.5.2)
       hashie (~> 5.0)
     jmespath (1.6.2)
-    json (2.15.1)
+    json (2.16.0)
     json-canonicalization (1.0.0)
     json-jwt (1.17.0)
       activesupport (>= 4.2)
@@ -443,7 +447,7 @@ GEM
     mime-types-data (3.2025.0924)
     mini_mime (1.1.5)
     mini_portile2 (2.8.9)
-    minitest (5.26.0)
+    minitest (5.26.2)
     msgpack (1.8.0)
     multi_json (1.17.0)
     mutex_m (0.3.0)
@@ -465,7 +469,7 @@ GEM
     nokogiri (1.18.10)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    oj (3.16.11)
+    oj (3.16.13)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
     omniauth (2.1.4)
@@ -477,7 +481,7 @@ GEM
       addressable (~> 2.8)
       nokogiri (~> 1.12)
       omniauth (~> 2.1)
-    omniauth-rails_csrf_protection (1.0.2)
+    omniauth-rails_csrf_protection (2.0.0)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
     omniauth-saml (2.2.4)
@@ -512,9 +516,9 @@ GEM
       opentelemetry-common (~> 0.20)
       opentelemetry-sdk (~> 1.10)
       opentelemetry-semantic_conventions
-    opentelemetry-helpers-sql (0.2.0)
+    opentelemetry-helpers-sql (0.3.0)
       opentelemetry-api (~> 1.7)
-    opentelemetry-helpers-sql-obfuscation (0.4.0)
+    opentelemetry-helpers-sql-processor (0.3.1)
       opentelemetry-common (~> 0.21)
     opentelemetry-instrumentation-action_mailer (0.6.1)
       opentelemetry-instrumentation-active_support (~> 0.10)
@@ -538,19 +542,19 @@ GEM
       opentelemetry-registry (~> 0.1)
     opentelemetry-instrumentation-concurrent_ruby (0.24.0)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-excon (0.26.0)
+    opentelemetry-instrumentation-excon (0.26.1)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-faraday (0.30.0)
+    opentelemetry-instrumentation-faraday (0.30.1)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-http (0.27.0)
+    opentelemetry-instrumentation-http (0.27.1)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-http_client (0.26.0)
+    opentelemetry-instrumentation-http_client (0.26.1)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-net_http (0.26.0)
+    opentelemetry-instrumentation-net_http (0.26.1)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-pg (0.32.0)
+    opentelemetry-instrumentation-pg (0.34.1)
       opentelemetry-helpers-sql
-      opentelemetry-helpers-sql-obfuscation
+      opentelemetry-helpers-sql-processor
       opentelemetry-instrumentation-base (~> 0.25)
     opentelemetry-instrumentation-rack (0.29.0)
       opentelemetry-instrumentation-base (~> 0.25)
@@ -565,7 +569,7 @@ GEM
       opentelemetry-instrumentation-concurrent_ruby (~> 0.23)
     opentelemetry-instrumentation-redis (0.28.0)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-sidekiq (0.28.0)
+    opentelemetry-instrumentation-sidekiq (0.28.1)
       opentelemetry-instrumentation-base (~> 0.25)
     opentelemetry-registry (0.4.0)
       opentelemetry-api (~> 1.1)
@@ -581,7 +585,7 @@ GEM
     ox (2.14.23)
       bigdecimal (>= 3.0)
     parallel (1.27.0)
-    parser (3.3.9.0)
+    parser (3.3.10.0)
       ast (~> 2.4.1)
       racc
     parslet (2.0.0)
@@ -590,7 +594,7 @@ GEM
     pg (1.6.2)
     pghero (3.7.0)
       activerecord (>= 7.1)
-    playwright-ruby-client (1.55.0)
+    playwright-ruby-client (1.56.0)
       concurrent-ruby (>= 1.1.6)
       mime-types (>= 3.0)
     pp (0.6.3)
@@ -604,8 +608,8 @@ GEM
       net-smtp
       premailer (~> 1.7, >= 1.7.9)
     prettyprint (0.2.0)
-    prism (1.5.2)
-    prometheus_exporter (2.3.0)
+    prism (1.6.0)
+    prometheus_exporter (2.3.1)
       webrick
     propshaft (1.3.1)
       actionpack (>= 7.0.0)
@@ -614,7 +618,7 @@ GEM
     psych (5.2.6)
       date
       stringio
-    public_suffix (6.0.2)
+    public_suffix (7.0.0)
     puma (7.1.0)
       nio4r (~> 2.0)
     pundit (2.5.2)
@@ -634,7 +638,7 @@ GEM
       faraday-follow_redirects
       json-jwt (>= 1.11.0)
       rack (>= 2.1.0)
-    rack-protection (4.1.1)
+    rack-protection (4.2.1)
       base64 (>= 0.1.0)
       logger (>= 1.6.0)
       rack (>= 3.0.0, < 4)
@@ -668,7 +672,7 @@ GEM
     rails-html-sanitizer (1.6.2)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    rails-i18n (8.0.2)
+    rails-i18n (8.1.0)
       i18n (>= 0.7, < 2)
       railties (>= 8.0.0, < 9)
     railties (8.0.3)
@@ -681,7 +685,7 @@ GEM
       tsort (>= 0.2)
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
-    rake (13.3.0)
+    rake (13.3.1)
     rdf (3.3.4)
       bcp47_spec (~> 0.2)
       bigdecimal (~> 3.1, >= 3.1.5)
@@ -699,10 +703,10 @@ GEM
       reline
     redcarpet (3.6.1)
     redis (4.8.1)
-    redis-client (0.26.1)
+    redis-client (0.26.2)
       connection_pool
     regexp_parser (2.11.3)
-    reline (0.6.2)
+    reline (0.6.3)
       io-console (~> 0.5)
     request_store (1.7.0)
       rack (>= 1.4)
@@ -713,10 +717,10 @@ GEM
     rotp (6.3.0)
     rouge (4.6.1)
     rpam2 (4.0.2)
-    rqrcode (3.1.0)
+    rqrcode (3.1.1)
       chunky_png (~> 1.0)
       rqrcode_core (~> 2.0)
-    rqrcode_core (2.0.0)
+    rqrcode_core (2.0.1)
     rspec (3.13.1)
       rspec-core (~> 3.13.0)
       rspec-expectations (~> 3.13.0)
@@ -745,7 +749,7 @@ GEM
       rspec-mocks (~> 3.0)
       sidekiq (>= 5, < 9)
     rspec-support (3.13.6)
-    rubocop (1.81.6)
+    rubocop (1.81.7)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -756,7 +760,7 @@ GEM
       rubocop-ast (>= 1.47.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.47.1)
+    rubocop-ast (1.48.0)
       parser (>= 3.3.7.2)
       prism (~> 1.4)
     rubocop-capybara (2.22.1)
@@ -775,10 +779,10 @@ GEM
       rack (>= 1.1)
       rubocop (>= 1.75.0, < 2.0)
       rubocop-ast (>= 1.44.0, < 2.0)
-    rubocop-rspec (3.7.0)
+    rubocop-rspec (3.8.0)
       lint_roller (~> 1.1)
-      rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rspec_rails (2.31.0)
+      rubocop (~> 1.81)
+    rubocop-rspec_rails (2.32.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
       rubocop-rspec (~> 3.5)
@@ -803,9 +807,9 @@ GEM
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
     securerandom (0.4.1)
-    shoulda-matchers (6.5.0)
-      activesupport (>= 5.2.0)
-    sidekiq (8.0.9)
+    shoulda-matchers (7.0.1)
+      activesupport (>= 7.1)
+    sidekiq (8.0.10)
       connection_pool (>= 2.5.0)
       json (>= 2.9.0)
       logger (>= 1.6.2)
@@ -835,9 +839,9 @@ GEM
     stackprof (0.2.27)
     starry (0.2.0)
       base64
-    stoplight (5.4.0)
+    stoplight (5.6.0)
       zeitwerk
-    stringio (3.1.7)
+    stringio (3.1.8)
     strong_migrations (2.5.1)
       activerecord (>= 7.1)
     swd (2.0.3)
@@ -851,7 +855,7 @@ GEM
       unicode-display_width (>= 1.1.1, < 4)
     terrapin (1.1.1)
       climate_control
-    test-prof (1.4.4)
+    test-prof (1.5.0)
     thor (1.4.0)
     tilt (2.6.1)
     timeout (0.4.3)
@@ -883,7 +887,7 @@ GEM
     unicode-display_width (3.2.0)
       unicode-emoji (~> 4.1)
     unicode-emoji (4.1.0)
-    uri (1.0.4)
+    uri (1.1.1)
     useragent (0.16.11)
     validate_url (1.0.15)
       activemodel (>= 3.0.0)
@@ -911,7 +915,7 @@ GEM
       activesupport
       faraday (~> 2.0)
       faraday-follow_redirects
-    webmock (3.26.0)
+    webmock (3.26.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -933,12 +937,12 @@ DEPENDENCIES
   active_model_serializers (~> 0.10)
   addressable (~> 2.8)
   annotaterb (~> 4.13)
-  aws-sdk-core (< 3.216.0)
+  aws-sdk-core
   aws-sdk-s3 (~> 1.123)
   better_errors (~> 2.9)
   binding_of_caller (~> 1.0)
   blurhash (~> 0.1)
-  bootsnap (~> 1.18.0)
+  bootsnap (~> 1.19.0)
   brakeman (~> 7.0)
   browser
   bundler-audit (~> 0.9)
@@ -1005,7 +1009,7 @@ DEPENDENCIES
   oj (~> 3.14)
   omniauth (~> 2.0)
   omniauth-cas (~> 3.0.0.beta.1)
-  omniauth-rails_csrf_protection (~> 1.0)
+  omniauth-rails_csrf_protection (~> 2.0)
   omniauth-saml (~> 2.0)
   omniauth_openid_connect (~> 0.8.0)
   opentelemetry-api (~> 1.7.0)
@@ -1018,7 +1022,7 @@ DEPENDENCIES
   opentelemetry-instrumentation-http (~> 0.27.0)
   opentelemetry-instrumentation-http_client (~> 0.26.0)
   opentelemetry-instrumentation-net_http (~> 0.26.0)
-  opentelemetry-instrumentation-pg (~> 0.32.0)
+  opentelemetry-instrumentation-pg (~> 0.34.0)
   opentelemetry-instrumentation-rack (~> 0.29.0)
   opentelemetry-instrumentation-rails (~> 0.39.0)
   opentelemetry-instrumentation-redis (~> 0.28.0)
@@ -1028,11 +1032,11 @@ DEPENDENCIES
   parslet
   pg (~> 1.5)
   pghero
-  playwright-ruby-client (= 1.55.0)
+  playwright-ruby-client (= 1.56.0)
   premailer-rails
   prometheus_exporter (~> 2.2)
   propshaft
-  public_suffix (~> 6.0)
+  public_suffix (~> 7.0)
   puma (~> 7.0)
   pundit (~> 2.3)
   rack-attack (~> 6.6)

app/controllers/activitypub/likes_controller.rb

@@ -22,7 +22,7 @@ class ActivityPub::LikesController < ActivityPub::BaseController
   def set_status
     @status = @account.statuses.find(params[:status_id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/activitypub/quote_authorizations_controller.rb

@@ -24,7 +24,7 @@ class ActivityPub::QuoteAuthorizationsController < ActivityPub::BaseController
     return not_found unless @quote.status.present? && @quote.quoted_status.present?
 
     authorize @quote.quoted_status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 end

app/controllers/activitypub/replies_controller.rb

@@ -25,7 +25,7 @@ class ActivityPub::RepliesController < ActivityPub::BaseController
   def set_status
     @status = @account.statuses.find(params[:status_id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/activitypub/shares_controller.rb

@@ -22,7 +22,7 @@ class ActivityPub::SharesController < ActivityPub::BaseController
   def set_status
     @status = @account.statuses.find(params[:status_id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/admin/custom_emojis_controller.rb

@@ -5,6 +5,15 @@ module Admin
     def index
       authorize :custom_emoji, :index?
 
+      # If filtering by local emojis, remove by_domain filter.
+      params.delete(:by_domain) if params[:local].present?
+
+      # If filtering by domain, ensure remote filter is set.
+      if params[:by_domain].present?
+        params.delete(:local)
+        params[:remote] = '1'
+      end
+
       @custom_emojis = filtered_custom_emojis.eager_load(:local_counterpart).page(params[:page])
       @form          = Form::CustomEmojiBatch.new
     end

app/controllers/admin/site_uploads_controller.rb

@@ -9,7 +9,7 @@ module Admin
 
       @site_upload.destroy!
 
-      redirect_back fallback_location: admin_settings_path, notice: I18n.t('admin.site_uploads.destroyed_msg')
+      redirect_back_or_to admin_settings_path, notice: I18n.t('admin.site_uploads.destroyed_msg')
     end
 
     private

app/controllers/api/v1/annual_reports_controller.rb

@@ -1,10 +1,12 @@
 # frozen_string_literal: true
 
 class Api::V1::AnnualReportsController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :read, :'read:accounts' }, only: :index
-  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, except: :index
+  include AsyncRefreshesConcern
+
+  before_action -> { doorkeeper_authorize! :read, :'read:accounts' }, except: [:read, :generate]
+  before_action -> { doorkeeper_authorize! :write, :'write:accounts' }, only: [:read, :generate]
   before_action :require_user!
-  before_action :set_annual_report, except: :index
+  before_action :set_annual_report, only: [:show, :read]
 
   def index
     with_read_replica do
@@ -28,14 +30,59 @@ class Api::V1::AnnualReportsController < Api::BaseController
            relationships: @relationships
   end
 
+  def state
+    render json: { state: report_state }
+  end
+
+  def generate
+    return render_empty unless year == AnnualReport.current_campaign
+    return render_empty if GeneratedAnnualReport.exists?(account_id: current_account.id, year: year)
+
+    async_refresh = AsyncRefresh.new(refresh_key)
+
+    if async_refresh.running?
+      add_async_refresh_header(async_refresh, retry_seconds: 2)
+      return head 202
+    end
+
+    add_async_refresh_header(AsyncRefresh.create(refresh_key), retry_seconds: 2)
+
+    GenerateAnnualReportWorker.perform_async(current_account.id, year)
+
+    head 202
+  end
+
   def read
     @annual_report.view!
     render_empty
   end
 
+  def refresh_key
+    "wrapstodon:#{current_account.id}:#{year}"
+  end
+
   private
 
+  def report_state
+    return 'available' if GeneratedAnnualReport.exists?(account_id: current_account.id, year: year)
+
+    async_refresh = AsyncRefresh.new(refresh_key)
+
+    if async_refresh.running?
+      add_async_refresh_header(async_refresh, retry_seconds: 2)
+      'generating'
+    elsif AnnualReport.current_campaign == year && AnnualReport.new(current_account, year).eligible?
+      'eligible'
+    else
+      'ineligible'
+    end
+  end
+
+  def year
+    params[:id]&.to_i
+  end
+
   def set_annual_report
-    @annual_report = GeneratedAnnualReport.find_by!(account_id: current_account.id, year: params[:id])
+    @annual_report = GeneratedAnnualReport.find_by!(account_id: current_account.id, year: year)
   end
 end

app/controllers/api/v1/polls/votes_controller.rb

@@ -17,7 +17,7 @@ class Api::V1::Polls::VotesController < Api::BaseController
   def set_poll
     @poll = Poll.find(params[:poll_id])
     authorize @poll.status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/api/v1/polls_controller.rb

@@ -17,7 +17,7 @@ class Api::V1::PollsController < Api::BaseController
   def set_poll
     @poll = Poll.find(params[:id])
     authorize @poll.status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

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

@@ -10,7 +10,7 @@ class Api::V1::Statuses::BaseController < Api::BaseController
   def set_status
     @status = Status.find(params[:status_id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 end

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

@@ -23,7 +23,7 @@ class Api::V1::Statuses::BookmarksController < Api::V1::Statuses::BaseController
     bookmark&.destroy!
 
     render json: @status, serializer: REST::StatusSerializer, relationships: StatusRelationshipsPresenter.new([@status], current_account.id, bookmarks_map: { @status.id => false })
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 end

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

@@ -25,7 +25,7 @@ class Api::V1::Statuses::FavouritesController < Api::V1::Statuses::BaseControlle
 
     relationships = StatusRelationshipsPresenter.new([@status], current_account.id, favourites_map: { @status.id => false }, attributes_map: { @status.id => { favourites_count: count } })
     render json: @status, serializer: REST::StatusSerializer, relationships: relationships
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 end

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

@@ -36,7 +36,7 @@ class Api::V1::Statuses::ReblogsController < Api::V1::Statuses::BaseController
 
     relationships = StatusRelationshipsPresenter.new([@status], current_account.id, reblogs_map: { @reblog.id => false }, attributes_map: { @reblog.id => { reblogs_count: count } })
     render json: @reblog, serializer: REST::StatusSerializer, relationships: relationships
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 
@@ -45,7 +45,7 @@ class Api::V1::Statuses::ReblogsController < Api::V1::Statuses::BaseController
   def set_reblog
     @reblog = Status.find(params[:status_id])
     authorize @reblog, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/api/v1/statuses_controller.rb

@@ -128,10 +128,11 @@ class Api::V1::StatusesController < Api::BaseController
     @status = Status.where(account: current_account).find(params[:id])
     authorize @status, :destroy?
 
+    json = render_to_body json: @status, serializer: REST::StatusSerializer, source_requested: true
+
     @status.discard_with_reblogs
     StatusPin.find_by(status: @status)&.destroy
     @status.account.statuses_count = @status.account.statuses_count - 1
-    json = render_to_body json: @status, serializer: REST::StatusSerializer, source_requested: true
 
     RemovalWorker.perform_async(@status.id, { 'redraft' => !truthy_param?(:delete_media) })
 
@@ -147,7 +148,7 @@ class Api::V1::StatusesController < Api::BaseController
   def set_status
     @status = Status.find(params[:id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/api/v1_alpha/collections_controller.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+class Api::V1Alpha::CollectionsController < Api::BaseController
+  include Authorization
+
+  DEFAULT_COLLECTIONS_LIMIT = 40
+
+  rescue_from ActiveRecord::RecordInvalid, Mastodon::ValidationError do |e|
+    render json: { error: ValidationErrorFormatter.new(e).as_json }, status: 422
+  end
+
+  before_action :check_feature_enabled
+
+  before_action -> { authorize_if_got_token! :read, :'read:collections' }, only: [:index, :show]
+  before_action -> { doorkeeper_authorize! :write, :'write:collections' }, only: [:create, :update, :destroy]
+
+  before_action :require_user!, only: [:create, :update, :destroy]
+
+  before_action :set_account, only: [:index]
+  before_action :set_collections, only: [:index]
+  before_action :set_collection, only: [:show, :update, :destroy]
+
+  after_action :insert_pagination_headers, only: [:index]
+
+  after_action :verify_authorized
+
+  def index
+    cache_if_unauthenticated!
+    authorize Collection, :index?
+
+    render json: @collections, each_serializer: REST::BaseCollectionSerializer
+  end
+
+  def show
+    cache_if_unauthenticated!
+    authorize @collection, :show?
+
+    render json: @collection, serializer: REST::CollectionSerializer
+  end
+
+  def create
+    authorize Collection, :create?
+
+    @collection = CreateCollectionService.new.call(collection_creation_params, current_user.account)
+
+    render json: @collection, serializer: REST::CollectionSerializer
+  end
+
+  def update
+    authorize @collection, :update?
+
+    @collection.update!(collection_update_params) # TODO: Create a service for this to federate changes
+
+    render json: @collection, serializer: REST::CollectionSerializer
+  end
+
+  def destroy
+    authorize @collection, :destroy?
+
+    @collection.destroy
+
+    head 200
+  end
+
+  private
+
+  def set_account
+    @account = Account.find(params[:account_id])
+  end
+
+  def set_collections
+    @collections = @account.collections
+                           .with_tag
+                           .order(created_at: :desc)
+                           .offset(offset_param)
+                           .limit(limit_param(DEFAULT_COLLECTIONS_LIMIT))
+  end
+
+  def set_collection
+    @collection = Collection.find(params[:id])
+  end
+
+  def collection_creation_params
+    params.permit(:name, :description, :sensitive, :discoverable, :tag_name, account_ids: [])
+  end
+
+  def collection_update_params
+    params.permit(:name, :description, :sensitive, :discoverable, :tag_name)
+  end
+
+  def check_feature_enabled
+    raise ActionController::RoutingError unless Mastodon::Feature.collections_enabled?
+  end
+
+  def next_path
+    return unless records_continue?
+
+    api_v1_alpha_account_collections_url(@account, pagination_params(offset: offset_param + limit_param(DEFAULT_COLLECTIONS_LIMIT)))
+  end
+
+  def prev_path
+    return if offset_param.zero?
+
+    api_v1_alpha_account_collections_url(@account, pagination_params(offset: offset_param - limit_param(DEFAULT_COLLECTIONS_LIMIT)))
+  end
+
+  def records_continue?
+    ((offset_param * limit_param(DEFAULT_COLLECTIONS_LIMIT)) + @collections.size) < @account.collections.size
+  end
+
+  def offset_param
+    params[:offset].to_i
+  end
+end

app/controllers/api/web/embeds_controller.rb

@@ -30,7 +30,7 @@ class Api::Web::EmbedsController < Api::Web::BaseController
   def set_status
     @status = Status.find(params[:id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 end

app/controllers/auth/registrations_controller.rb

@@ -135,7 +135,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController
     @accept_token = session[:accept_token] = SecureRandom.hex
     @invite_code  = invite_code
 
-    set_locale { render :rules }
+    render :rules
   end
 
   def is_flashing_format? # rubocop:disable Naming/PredicatePrefix

app/controllers/authorize_interactions_controller.rb

@@ -21,7 +21,7 @@ class AuthorizeInteractionsController < ApplicationController
   def set_resource
     @resource = located_resource
     authorize(@resource, :show?) if @resource.is_a?(Status)
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/follower_accounts_controller.rb

@@ -7,6 +7,7 @@ class FollowerAccountsController < ApplicationController
   vary_by -> { public_fetch_mode? ? 'Accept, Accept-Language, Cookie' : 'Accept, Accept-Language, Cookie, Signature' }
 
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
+  before_action :protect_hidden_collections, if: -> { request.format.json? }
 
   skip_around_action :set_locale, if: -> { request.format == :json }
   skip_before_action :require_functional!, unless: :limited_federation_mode?
@@ -18,8 +19,6 @@ class FollowerAccountsController < ApplicationController
       end
 
       format.json do
-        raise Mastodon::NotPermittedError if page_requested? && @account.hide_collections?
-
         expires_in(page_requested? ? 0 : 3.minutes, public: public_fetch_mode?)
 
         render json: collection_presenter,
@@ -41,6 +40,10 @@ class FollowerAccountsController < ApplicationController
     @follows = scope.recent.page(params[:page]).per(FOLLOW_PER_PAGE).preload(:account)
   end
 
+  def protect_hidden_collections
+    raise Mastodon::NotPermittedError if page_requested? && @account.hide_collections?
+  end
+
   def page_requested?
     params[:page].present?
   end

app/controllers/following_accounts_controller.rb

@@ -7,6 +7,7 @@ class FollowingAccountsController < ApplicationController
   vary_by -> { public_fetch_mode? ? 'Accept, Accept-Language, Cookie' : 'Accept, Accept-Language, Cookie, Signature' }
 
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
+  before_action :protect_hidden_collections, if: -> { request.format.json? }
 
   skip_around_action :set_locale, if: -> { request.format == :json }
   skip_before_action :require_functional!, unless: :limited_federation_mode?
@@ -18,11 +19,6 @@ class FollowingAccountsController < ApplicationController
       end
 
       format.json do
-        if page_requested? && @account.hide_collections?
-          forbidden
-          next
-        end
-
         expires_in(page_requested? ? 0 : 3.minutes, public: public_fetch_mode?)
 
         render json: collection_presenter,
@@ -44,6 +40,10 @@ class FollowingAccountsController < ApplicationController
     @follows = scope.recent.page(params[:page]).per(FOLLOW_PER_PAGE).preload(:target_account)
   end
 
+  def protect_hidden_collections
+    raise Mastodon::NotPermittedError if page_requested? && @account.hide_collections?
+  end
+
   def page_requested?
     params[:page].present?
   end

app/controllers/media_controller.rb

@@ -34,7 +34,7 @@ class MediaController < ApplicationController
 
   def verify_permitted_status!
     authorize @media_attachment.status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/statuses_controller.rb

@@ -62,7 +62,7 @@ class StatusesController < ApplicationController
   def set_status
     @status = @account.statuses.find(params[:id])
     authorize @status, :show?
-  rescue Mastodon::NotPermittedError
+  rescue ActiveRecord::RecordNotFound, Mastodon::NotPermittedError
     not_found
   end
 

app/controllers/wrapstodon_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class WrapstodonController < ApplicationController
+  include WebAppControllerConcern
+  include Authorization
+  include AccountOwnedConcern
+
+  vary_by 'Accept, Accept-Language, Cookie'
+
+  before_action :set_generated_annual_report
+
+  skip_before_action :require_functional!, only: :show, unless: :limited_federation_mode?
+
+  def show
+    expires_in 10.seconds, public: true if current_account.nil?
+  end
+
+  private
+
+  def set_generated_annual_report
+    @generated_annual_report = GeneratedAnnualReport.find_by!(account: @account, year: params[:year], share_key: params[:share_key])
+  end
+end

app/helpers/application_helper.rb

@@ -153,11 +153,9 @@ module ApplicationHelper
     tag.meta(content: content, property: property)
   end
 
-  def body_classes
+  def html_classes
     output = []
-    output << content_for(:body_classes)
-    output << "flavour-#{current_flavour.parameterize}"
-    output << "skin-#{current_skin.parameterize}"
+    output << content_for(:html_classes)
     output << 'system-font' if current_account&.user&.setting_system_font_ui
     output << 'custom-scrollbars' unless current_account&.user&.setting_system_scrollbars_ui
     output << (current_account&.user&.setting_reduce_motion ? 'reduce-motion' : 'no-reduce-motion')
@@ -165,6 +163,12 @@ module ApplicationHelper
     output.compact_blank.join(' ')
   end
 
+  def body_classes
+    output = []
+    output << content_for(:body_classes)
+    output.compact_blank.join(' ')
+  end
+
   def cdn_host
     Rails.configuration.action_controller.asset_host
   end

app/helpers/languages_helper.rb

@@ -35,7 +35,7 @@ module LanguagesHelper
     cy: ['Welsh', 'Cymraeg'].freeze,
     da: ['Danish', 'dansk'].freeze,
     de: ['German', 'Deutsch'].freeze,
-    dv: ['Divehi', 'Dhivehi'].freeze,
+    dv: ['Divehi', 'ދިވެހި'].freeze,
     dz: ['Dzongkha', 'རྫོང་ཁ'].freeze,
     ee: ['Ewe', 'Eʋegbe'].freeze,
     el: ['Greek', 'Ελληνικά'].freeze,
@@ -100,7 +100,7 @@ module LanguagesHelper
     lo: ['Lao', 'ລາວ'].freeze,
     lt: ['Lithuanian', 'lietuvių kalba'].freeze,
     lu: ['Luba-Katanga', 'Tshiluba'].freeze,
-    lv: ['Latvian', 'latviešu valoda'].freeze,
+    lv: ['Latvian', 'Latviski'].freeze,
     mg: ['Malagasy', 'fiteny malagasy'].freeze,
     mh: ['Marshallese', 'Kajin M̧ajeļ'].freeze,
     mi: ['Māori', 'te reo Māori'].freeze,

app/helpers/wrapstodon_helper.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module WrapstodonHelper
+  def render_wrapstodon_share_data(report)
+    json = ActiveModelSerializers::SerializableResource.new(
+      AnnualReportsPresenter.new([report]),
+      serializer: REST::AnnualReportsSerializer,
+      scope: nil,
+      scope_name: :current_user
+    ).to_json
+
+    # rubocop:disable Rails/OutputSafety
+    content_tag(:script, json_escape(json).html_safe, type: 'application/json', id: 'wrapstodon-data')
+    # rubocop:enable Rails/OutputSafety
+  end
+end

app/inputs/date_of_birth_input.rb

@@ -1,31 +1,49 @@
 # frozen_string_literal: true
 
 class DateOfBirthInput < SimpleForm::Inputs::Base
-  OPTIONS = [
-    { autocomplete: 'bday-day', maxlength: 2, pattern: '[0-9]+', placeholder: 'DD' }.freeze,
-    { autocomplete: 'bday-month', maxlength: 2, pattern: '[0-9]+', placeholder: 'MM' }.freeze,
-    { autocomplete: 'bday-year', maxlength: 4, pattern: '[0-9]+', placeholder: 'YYYY' }.freeze,
-  ].freeze
+  OPTIONS = {
+    day: { autocomplete: 'bday-day', maxlength: 2, pattern: '[0-9]+', placeholder: 'DD' },
+    month: { autocomplete: 'bday-month', maxlength: 2, pattern: '[0-9]+', placeholder: 'MM' },
+    year: { autocomplete: 'bday-year', maxlength: 4, pattern: '[0-9]+', placeholder: 'YYYY' },
+  }.freeze
 
   def input(wrapper_options = nil)
     merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
     merged_input_options[:inputmode] = 'numeric'
 
-    values = (object.public_send(attribute_name) || '').split('.')
-
-    safe_join(Array.new(3) do |index|
-      options = merged_input_options.merge(OPTIONS[index]).merge id: generate_id(index), 'aria-label': I18n.t("simple_form.labels.user.date_of_birth_#{index + 1}i"), value: values[index]
-      @builder.text_field("#{attribute_name}(#{index + 1}i)", options)
-    end)
+    safe_join(
+      ordered_options.map do |option|
+        options = merged_input_options
+          .merge(OPTIONS[option])
+          .merge(
+            id: generate_id(option),
+            'aria-label': I18n.t("simple_form.labels.user.date_of_birth_#{param_for(option)}"),
+            value: values[option]
+          )
+        @builder.text_field("#{attribute_name}(#{param_for(option)})", options)
+      end
+    )
   end
 
   def label_target
-    "#{attribute_name}_1i"
+    "#{attribute_name}_#{param_for(ordered_options.first)}"
   end
 
   private
 
-  def generate_id(index)
-    "#{object_name}_#{attribute_name}_#{index + 1}i"
+  def ordered_options
+    I18n.t('date.order').map(&:to_sym)
+  end
+
+  def generate_id(option)
+    "#{object_name}_#{attribute_name}_#{param_for(option)}"
+  end
+
+  def param_for(option)
+    "#{ActionView::Helpers::DateTimeSelector::POSITION[option]}i"
+  end
+
+  def values
+    Date._parse((object.public_send(attribute_name) || '').to_s).transform_keys(mon: :month, mday: :day)
   end
 end

app/javascript/entrypoints/admin.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 
-import Rails from '@rails/ujs';
 import { decode, ValidationError } from 'blurhash';
+import { on } from 'delegated-events';
 
 import ready from '../mastodon/ready';
 
@@ -24,10 +24,9 @@ const setAnnouncementEndsAttributes = (target: HTMLInputElement) => {
   }
 };
 
-Rails.delegate(
-  document,
-  'input[type="datetime-local"]#announcement_starts_at',
+on(
   'change',
+  'input[type="datetime-local"]#announcement_starts_at',
   ({ target }) => {
     if (target instanceof HTMLInputElement)
       setAnnouncementEndsAttributes(target);
@@ -63,7 +62,7 @@ const hideSelectAll = () => {
   if (hiddenField) hiddenField.value = '0';
 };
 
-Rails.delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
+on('change', '#batch_checkbox_all', ({ target }) => {
   if (!(target instanceof HTMLInputElement)) return;
 
   const selectAllMatchingElement = document.querySelector(
@@ -85,7 +84,7 @@ Rails.delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
   }
 });
 
-Rails.delegate(document, '.batch-table__select-all button', 'click', () => {
+on('click', '.batch-table__select-all button', () => {
   const hiddenField = document.querySelector<HTMLInputElement>(
     '#select_all_matching',
   );
@@ -113,7 +112,7 @@ Rails.delegate(document, '.batch-table__select-all button', 'click', () => {
   }
 });
 
-Rails.delegate(document, batchCheckboxClassName, 'change', () => {
+on('change', batchCheckboxClassName, () => {
   const checkAllElement = document.querySelector<HTMLInputElement>(
     'input#batch_checkbox_all',
   );
@@ -140,14 +139,9 @@ Rails.delegate(document, batchCheckboxClassName, 'change', () => {
   }
 });
 
-Rails.delegate(
-  document,
-  '.filter-subset--with-select select',
-  'change',
-  ({ target }) => {
-    if (target instanceof HTMLSelectElement) target.form?.submit();
-  },
-);
+on('change', '.filter-subset--with-select select', ({ target }) => {
+  if (target instanceof HTMLSelectElement) target.form?.submit();
+});
 
 const onDomainBlockSeverityChange = (target: HTMLSelectElement) => {
   const rejectMediaDiv = document.querySelector(
@@ -168,11 +162,11 @@ const onDomainBlockSeverityChange = (target: HTMLSelectElement) => {
   }
 };
 
-Rails.delegate(document, '#domain_block_severity', 'change', ({ target }) => {
+on('change', '#domain_block_severity', ({ target }) => {
   if (target instanceof HTMLSelectElement) onDomainBlockSeverityChange(target);
 });
 
-const onEnableBootstrapTimelineAccountsChange = (target: HTMLInputElement) => {
+function onEnableBootstrapTimelineAccountsChange(target: HTMLInputElement) {
   const bootstrapTimelineAccountsField =
     document.querySelector<HTMLInputElement>(
       '#form_admin_settings_bootstrap_timeline_accounts',
@@ -194,12 +188,11 @@ const onEnableBootstrapTimelineAccountsChange = (target: HTMLInputElement) => {
       );
     }
   }
-};
+}
 
-Rails.delegate(
-  document,
-  '#form_admin_settings_enable_bootstrap_timeline_accounts',
+on(
   'change',
+  '#form_admin_settings_enable_bootstrap_timeline_accounts',
   ({ target }) => {
     if (target instanceof HTMLInputElement)
       onEnableBootstrapTimelineAccountsChange(target);
@@ -239,11 +232,11 @@ const onChangeRegistrationMode = (target: HTMLSelectElement) => {
     });
 };
 
-const convertUTCDateTimeToLocal = (value: string) => {
+function convertUTCDateTimeToLocal(value: string) {
   const date = new Date(value + 'Z');
   const twoChars = (x: number) => x.toString().padStart(2, '0');
   return `${date.getFullYear()}-${twoChars(date.getMonth() + 1)}-${twoChars(date.getDate())}T${twoChars(date.getHours())}:${twoChars(date.getMinutes())}`;
-};
+}
 
 function convertLocalDatetimeToUTC(value: string) {
   const date = new Date(value);
@@ -251,14 +244,9 @@ function convertLocalDatetimeToUTC(value: string) {
   return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6);
 }
 
-Rails.delegate(
-  document,
-  '#form_admin_settings_registrations_mode',
-  'change',
-  ({ target }) => {
-    if (target instanceof HTMLSelectElement) onChangeRegistrationMode(target);
-  },
-);
+on('change', '#form_admin_settings_registrations_mode', ({ target }) => {
+  if (target instanceof HTMLSelectElement) onChangeRegistrationMode(target);
+});
 
 async function mountReactComponent(element: Element) {
   const componentName = element.getAttribute('data-admin-component');
@@ -305,7 +293,7 @@ ready(() => {
   if (registrationMode) onChangeRegistrationMode(registrationMode);
 
   const checkAllElement = document.querySelector<HTMLInputElement>(
-    'input#batch_checkbox_all',
+    '#batch_checkbox_all',
   );
   if (checkAllElement) {
     const allCheckboxes = Array.from(
@@ -318,7 +306,7 @@ ready(() => {
   }
 
   document
-    .querySelector('a#add-instance-button')
+    .querySelector<HTMLAnchorElement>('a#add-instance-button')
     ?.addEventListener('click', (e) => {
       const domain = document.querySelector<HTMLInputElement>(
         'input[type="text"]#by_domain',
@@ -342,7 +330,7 @@ ready(() => {
       }
     });
 
-  Rails.delegate(document, 'form', 'submit', ({ target }) => {
+  on('submit', 'form', ({ target }) => {
     if (target instanceof HTMLFormElement)
       target
         .querySelectorAll<HTMLInputElement>('input[type="datetime-local"]')

app/javascript/entrypoints/public.tsx

@@ -4,8 +4,8 @@ import { IntlMessageFormat } from 'intl-messageformat';
 import type { MessageDescriptor, PrimitiveType } from 'react-intl';
 import { defineMessages } from 'react-intl';
 
-import Rails from '@rails/ujs';
 import axios from 'axios';
+import { on } from 'delegated-events';
 import { throttle } from 'lodash';
 
 import { timeAgoString } from '../mastodon/components/relative_timestamp';
@@ -175,10 +175,9 @@ function loaded() {
       });
   }
 
-  Rails.delegate(
-    document,
-    'input#user_account_attributes_username',
+  on(
     'input',
+    'input#user_account_attributes_username',
     throttle(
       ({ target }) => {
         if (!(target instanceof HTMLInputElement)) return;
@@ -202,60 +201,47 @@ function loaded() {
     ),
   );
 
-  Rails.delegate(
-    document,
-    '#user_password,#user_password_confirmation',
-    'input',
-    () => {
-      const password = document.querySelector<HTMLInputElement>(
-        'input#user_password',
-      );
-      const confirmation = document.querySelector<HTMLInputElement>(
-        'input#user_password_confirmation',
-      );
-      if (!confirmation || !password) return;
+  on('input', '#user_password,#user_password_confirmation', () => {
+    const password = document.querySelector<HTMLInputElement>(
+      'input#user_password',
+    );
+    const confirmation = document.querySelector<HTMLInputElement>(
+      'input#user_password_confirmation',
+    );
+    if (!confirmation || !password) return;
 
-      if (
-        confirmation.value &&
-        confirmation.value.length > password.maxLength
-      ) {
-        confirmation.setCustomValidity(
-          formatMessage(messages.passwordExceedsLength),
-        );
-      } else if (password.value && password.value !== confirmation.value) {
-        confirmation.setCustomValidity(
-          formatMessage(messages.passwordDoesNotMatch),
-        );
-      } else {
-        confirmation.setCustomValidity('');
-      }
-    },
-  );
+    if (confirmation.value && confirmation.value.length > password.maxLength) {
+      confirmation.setCustomValidity(
+        formatMessage(messages.passwordExceedsLength),
+      );
+    } else if (password.value && password.value !== confirmation.value) {
+      confirmation.setCustomValidity(
+        formatMessage(messages.passwordDoesNotMatch),
+      );
+    } else {
+      confirmation.setCustomValidity('');
+    }
+  });
 }
 
-Rails.delegate(
-  document,
-  '#edit_profile input[type=file]',
-  'change',
-  ({ target }) => {
-    if (!(target instanceof HTMLInputElement)) return;
+on('change', '#edit_profile input[type=file]', ({ target }) => {
+  if (!(target instanceof HTMLInputElement)) return;
 
-    const avatar = document.querySelector<HTMLImageElement>(
-      `img#${target.id}-preview`,
-    );
+  const avatar = document.querySelector<HTMLImageElement>(
+    `img#${target.id}-preview`,
+  );
 
-    if (!avatar) return;
+  if (!avatar) return;
 
-    let file: File | undefined;
-    if (target.files) file = target.files[0];
+  let file: File | undefined;
+  if (target.files) file = target.files[0];
 
-    const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
+  const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
 
-    if (url) avatar.src = url;
-  },
-);
+  if (url) avatar.src = url;
+});
 
-Rails.delegate(document, '.input-copy input', 'click', ({ target }) => {
+on('click', '.input-copy input', ({ target }) => {
   if (!(target instanceof HTMLInputElement)) return;
 
   target.focus();
@@ -263,7 +249,7 @@ Rails.delegate(document, '.input-copy input', 'click', ({ target }) => {
   target.setSelectionRange(0, target.value.length);
 });
 
-Rails.delegate(document, '.input-copy button', 'click', ({ target }) => {
+on('click', '.input-copy button', ({ target }) => {
   if (!(target instanceof HTMLButtonElement)) return;
 
   const input = target.parentNode?.querySelector<HTMLInputElement>(
@@ -312,22 +298,22 @@ const toggleSidebar = () => {
   sidebar.classList.toggle('visible');
 };
 
-Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
+on('click', '.sidebar__toggle__icon', () => {
   toggleSidebar();
 });
 
-Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', (e) => {
+on('keydown', '.sidebar__toggle__icon', (e) => {
   if (e.key === ' ' || e.key === 'Enter') {
     e.preventDefault();
     toggleSidebar();
   }
 });
 
-Rails.delegate(document, 'img.custom-emoji', 'mouseover', ({ target }) => {
+on('mouseover', 'img.custom-emoji', ({ target }) => {
   if (target instanceof HTMLImageElement && target.dataset.original)
     target.src = target.dataset.original;
 });
-Rails.delegate(document, 'img.custom-emoji', 'mouseout', ({ target }) => {
+on('mouseout', 'img.custom-emoji', ({ target }) => {
   if (target instanceof HTMLImageElement && target.dataset.static)
     target.src = target.dataset.static;
 });
@@ -376,22 +362,17 @@ const setInputHint = (
   }
 };
 
-Rails.delegate(
-  document,
-  '#account_statuses_cleanup_policy_enabled',
-  'change',
-  ({ target }) => {
-    if (!(target instanceof HTMLInputElement) || !target.form) return;
+on('change', '#account_statuses_cleanup_policy_enabled', ({ target }) => {
+  if (!(target instanceof HTMLInputElement) || !target.form) return;
 
-    target.form
-      .querySelectorAll<
-        HTMLInputElement | HTMLSelectElement
-      >('input:not([type=hidden], #account_statuses_cleanup_policy_enabled), select')
-      .forEach((input) => {
-        setInputDisabled(input, !target.checked);
-      });
-  },
-);
+  target.form
+    .querySelectorAll<
+      HTMLInputElement | HTMLSelectElement
+    >('input:not([type=hidden], #account_statuses_cleanup_policy_enabled), select')
+    .forEach((input) => {
+      setInputDisabled(input, !target.checked);
+    });
+});
 
 const updateDefaultQuotePrivacyFromPrivacy = (
   privacySelect: EventTarget | null,
@@ -414,18 +395,13 @@ const updateDefaultQuotePrivacyFromPrivacy = (
   }
 };
 
-Rails.delegate(
-  document,
-  '#user_settings_attributes_default_privacy',
-  'change',
-  ({ target }) => {
-    updateDefaultQuotePrivacyFromPrivacy(target);
-  },
-);
+on('change', '#user_settings_attributes_default_privacy', ({ target }) => {
+  updateDefaultQuotePrivacyFromPrivacy(target);
+});
 
 // Empty the honeypot fields in JS in case something like an extension
 // automatically filled them.
-Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
+on('submit', '#registration_new_user,#new_user', () => {
   [
     'user_website',
     'user_confirm_password',
@@ -439,7 +415,7 @@ Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
   });
 });
 
-Rails.delegate(document, '.rules-list button', 'click', ({ target }) => {
+on('click', '.rules-list button', ({ target }) => {
   if (!(target instanceof HTMLElement)) {
     return;
   }

app/javascript/entrypoints/wrapstodon.tsx

@@ -0,0 +1,63 @@
+import { createRoot } from 'react-dom/client';
+
+import { Provider as ReduxProvider } from 'react-redux';
+
+import { importFetchedStatuses } from '@/mastodon/actions/importer';
+import { hydrateStore } from '@/mastodon/actions/store';
+import type { ApiAnnualReportResponse } from '@/mastodon/api/annual_report';
+import { Router } from '@/mastodon/components/router';
+import { WrapstodonSharedPage } from '@/mastodon/features/annual_report/shared_page';
+import { IntlProvider, loadLocale } from '@/mastodon/locales';
+import { loadPolyfills } from '@/mastodon/polyfills';
+import ready from '@/mastodon/ready';
+import { setReport } from '@/mastodon/reducers/slices/annual_report';
+import { store } from '@/mastodon/store';
+
+function loaded() {
+  const mountNode = document.getElementById('wrapstodon');
+  if (!mountNode) {
+    throw new Error('Mount node not found');
+  }
+  const propsNode = document.getElementById('wrapstodon-data');
+  if (!propsNode) {
+    throw new Error('Initial state prop not found');
+  }
+
+  const initialState = JSON.parse(
+    propsNode.textContent,
+  ) as ApiAnnualReportResponse;
+
+  const report = initialState.annual_reports[0];
+  if (!report) {
+    throw new Error('Initial state report not found');
+  }
+
+  // Set up store
+  store.dispatch(
+    hydrateStore({
+      meta: { locale: document.documentElement.lang },
+      accounts: initialState.accounts,
+    }),
+  );
+  store.dispatch(importFetchedStatuses(initialState.statuses));
+
+  store.dispatch(setReport(report));
+
+  const root = createRoot(mountNode);
+  root.render(
+    <IntlProvider>
+      <ReduxProvider store={store}>
+        <Router>
+          <WrapstodonSharedPage />
+        </Router>
+      </ReduxProvider>
+    </IntlProvider>,
+  );
+}
+
+loadPolyfills()
+  .then(loadLocale)
+  .then(() => ready(loaded))
+  .catch((err: unknown) => {
+    console.error(err);
+  });

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

@@ -1,25 +0,0 @@
-export const BUNDLE_FETCH_REQUEST = 'BUNDLE_FETCH_REQUEST';
-export const BUNDLE_FETCH_SUCCESS = 'BUNDLE_FETCH_SUCCESS';
-export const BUNDLE_FETCH_FAIL = 'BUNDLE_FETCH_FAIL';
-
-export function fetchBundleRequest(skipLoading) {
-  return {
-    type: BUNDLE_FETCH_REQUEST,
-    skipLoading,
-  };
-}
-
-export function fetchBundleSuccess(skipLoading) {
-  return {
-    type: BUNDLE_FETCH_SUCCESS,
-    skipLoading,
-  };
-}
-
-export function fetchBundleFail(error, skipLoading) {
-  return {
-    type: BUNDLE_FETCH_FAIL,
-    error,
-    skipLoading,
-  };
-}

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

@@ -709,8 +709,8 @@ export function selectComposeSuggestion(position, token, suggestion, path) {
 
       dispatch(useEmoji(suggestion));
     } else if (suggestion.type === 'hashtag') {
-      completion    = suggestion.name.slice(token.length - 1);
-      startPosition = position + token.length;
+      completion    = token + suggestion.name.slice(token.length - 1);
+      startPosition = position - 1;
     } else if (suggestion.type === 'account') {
       completion    = `@${getState().getIn(['accounts', suggestion.id, 'acct'])}`;
       startPosition = position - 1;

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

@@ -104,7 +104,7 @@ export function normalizeStatus(status, normalOldStatus, { settings, bogusQuoteP
   }
 
   if (normalOldStatus) {
-    normalStatus.quote_approval ||= normalOldStatus.quote_approval;
+    normalStatus.quote_approval ||= normalOldStatus.get('quote_approval');
 
     const list = normalOldStatus.get('media_attachments');
     if (normalStatus.media_attachments && list) {

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

@@ -1,3 +1,5 @@
+import { checkAnnualReport } from '@/flavours/glitch/reducers/slices/annual_report';
+
 import api from '../api';
 
 import { importFetchedAccount } from './importer';
@@ -29,6 +31,9 @@ export const fetchServer = () => (dispatch, getState) => {
     .get('/api/v2/instance').then(({ data }) => {
       if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
       dispatch(fetchServerSuccess(data));
+      if (data.wrapstodon) {
+        void dispatch(checkAnnualReport());
+      }
     }).catch(err => dispatch(fetchServerFail(err)));
 };
 

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

@@ -85,6 +85,8 @@ export function fetchStatus(id, {
       dispatch(fetchStatusSuccess(skipLoading));
     }).catch(error => {
       dispatch(fetchStatusFail(id, error, skipLoading, parentQuotePostId));
+      if (error.status === 404)
+        dispatch(deleteFromTimelines(id));
     });
   };
 }

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

@@ -37,7 +37,9 @@ export function hydrateStore(rawState) {
 
     dispatch(hydrateCompose());
     dispatch(hydrateSearch());
-    dispatch(importFetchedAccounts(Object.values(rawState.accounts)));
+    if (rawState.accounts) {
+      dispatch(importFetchedAccounts(Object.values(rawState.accounts)));
+    }
     dispatch(saveSettings());
   };
 }

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

@@ -1,5 +1,6 @@
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
+import { reinsertAnnualReport, TIMELINE_WRAPSTODON } from '@/flavours/glitch/reducers/slices/annual_report';
 import api, { getLinks } from 'flavours/glitch/api';
 import { compareId } from 'flavours/glitch/compare_id';
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
@@ -7,7 +8,7 @@ import { toServerSideType } from 'flavours/glitch/utils/filters';
 
 import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { submitMarkers } from './markers';
-import {timelineDelete} from './timelines_typed';
+import { timelineDelete } from './timelines_typed';
 
 export { disconnectTimeline } from './timelines_typed';
 
@@ -25,9 +26,16 @@ export const TIMELINE_CONNECT      = 'TIMELINE_CONNECT';
 export const TIMELINE_MARK_AS_PARTIAL = 'TIMELINE_MARK_AS_PARTIAL';
 export const TIMELINE_INSERT          = 'TIMELINE_INSERT';
 
+// When adding new special markers here, make sure to update TIMELINE_NON_STATUS_MARKERS in actions/timelines_typed.js
 export const TIMELINE_SUGGESTIONS = 'inline-follow-suggestions';
 export const TIMELINE_GAP = null;
 
+export const TIMELINE_NON_STATUS_MARKERS = [
+  TIMELINE_GAP,
+  TIMELINE_SUGGESTIONS,
+  TIMELINE_WRAPSTODON,
+];
+
 export const loadPending = timeline => ({
   type: TIMELINE_LOAD_PENDING,
   timeline,
@@ -135,6 +143,7 @@ export function expandTimeline(timelineId, path, params = {}) {
 
       if (timelineId === 'home') {
         dispatch(submitMarkers());
+        dispatch(reinsertAnnualReport())
       }
     } catch(error) {
       dispatch(expandTimelineFail(timelineId, error, isLoadingMore));

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

@@ -2,6 +2,12 @@ import { createAction } from '@reduxjs/toolkit';
 
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
 
+import { TIMELINE_NON_STATUS_MARKERS } from './timelines';
+
+export function isNonStatusId(value: unknown) {
+  return TIMELINE_NON_STATUS_MARKERS.includes(value as string | null);
+}
+
 export const disconnectTimeline = createAction(
   'timeline/disconnect',
   ({ timeline }: { timeline: string }) => ({

app/javascript/flavours/glitch/api/annual_report.ts

@@ -0,0 +1,38 @@
+import api, { apiRequestGet, getAsyncRefreshHeader } from '../api';
+import type { ApiAccountJSON } from '../api_types/accounts';
+import type { ApiStatusJSON } from '../api_types/statuses';
+import type { AnnualReport } from '../models/annual_report';
+
+export type ApiAnnualReportState =
+  | 'available'
+  | 'generating'
+  | 'eligible'
+  | 'ineligible';
+
+export const apiGetAnnualReportState = async (year: number) => {
+  const response = await api().get<{ state: ApiAnnualReportState }>(
+    `/api/v1/annual_reports/${year}/state`,
+  );
+
+  return {
+    state: response.data.state,
+    refresh: getAsyncRefreshHeader(response),
+  };
+};
+
+export const apiRequestGenerateAnnualReport = async (year: number) => {
+  const response = await api().post(`/api/v1/annual_reports/${year}/generate`);
+
+  return {
+    refresh: getAsyncRefreshHeader(response),
+  };
+};
+
+export interface ApiAnnualReportResponse {
+  annual_reports: AnnualReport[];
+  accounts: ApiAccountJSON[];
+  statuses: ApiStatusJSON[];
+}
+
+export const apiGetAnnualReport = (year: number) =>
+  apiRequestGet<ApiAnnualReportResponse>(`v1/annual_reports/${year}`);

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

@@ -1,8 +1,9 @@
-// See app/serializers/rest/account_serializer.rb
+// See app/serializers/rest/custom_emoji_serializer.rb
 export interface ApiCustomEmojiJSON {
   shortcode: string;
   static_url: string;
   url: string;
   category?: string;
+  featured?: boolean;
   visible_in_picker: boolean;
 }

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

@@ -51,7 +51,7 @@ export interface ApiPreviewCardJSON {
   html: string;
   width: number;
   height: number;
-  image: string;
+  image: string | null;
   image_description: string;
   embed_url: string;
   blurhash: string;

app/javascript/flavours/glitch/common.ts

@@ -1,9 +1,5 @@
-import Rails from '@rails/ujs';
+import { setupLinkListeners } from './utils/links';
 
 export function start() {
-  try {
-    Rails.start();
-  } catch {
-    // If called twice
-  }
+  setupLinkListeners();
 }

app/javascript/flavours/glitch/components/alert/index.tsx

@@ -49,7 +49,11 @@ export const Alert: React.FC<{
       </span>
 
       {hasAction && (
-        <button className='notification-bar__action' onClick={onActionClick}>
+        <button
+          className='notification-bar__action'
+          onClick={onActionClick}
+          type='button'
+        >
           {action}
         </button>
       )}

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

@@ -47,7 +47,7 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
         rootClose
         onHide={handleClose}
         show={open}
-        target={anchorRef.current}
+        target={anchorRef}
         placement='top-end'
         flip
         offset={offset}

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

@@ -28,7 +28,7 @@ const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
     return [null, null];
   }
 
-  word = word.trim().toLowerCase();
+  word = word.trim();
 
   if (word.length > 0) {
     return [left + 1, word];
@@ -159,8 +159,8 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   };
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
+  componentDidUpdate (prevProps) {
+    if (prevProps.suggestions !== this.props.suggestions && this.props.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
       this.setState({ suggestionsHidden: false });
     }
   }

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

@@ -29,7 +29,7 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
     return [null, null];
   }
 
-  word = word.trim().toLowerCase();
+  word = word.trim();
 
   if (word.length > 0) {
     return [left + 1, word];
@@ -50,6 +50,7 @@ const AutosuggestTextarea = forwardRef(({
   onKeyUp,
   onKeyDown,
   onPaste,
+  onDrop,
   onFocus,
   autoFocus = true,
   lang,
@@ -153,6 +154,12 @@ const AutosuggestTextarea = forwardRef(({
     onPaste(e);
   }, [onPaste]);
 
+  const handleDrop = useCallback((e) => {
+    if (onDrop) {
+      onDrop(e);
+    }
+  }, [onDrop]);
+
   // Show the suggestions again whenever they change and the textarea is focused
   useEffect(() => {
     if (suggestions.size > 0 && textareaRef.current === document.activeElement) {
@@ -204,6 +211,7 @@ const AutosuggestTextarea = forwardRef(({
         onFocus={handleFocus}
         onBlur={handleBlur}
         onPaste={handlePaste}
+        onDrop={handleDrop}
         dir='auto'
         aria-autocomplete='list'
         aria-label={placeholder}
@@ -235,6 +243,7 @@ AutosuggestTextarea.propTypes = {
   onKeyUp: PropTypes.func,
   onKeyDown: PropTypes.func,
   onPaste: PropTypes.func.isRequired,
+  onDrop: PropTypes.func,
   onFocus:PropTypes.func,
   autoFocus: PropTypes.bool,
   lang: PropTypes.string,

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

@@ -78,6 +78,7 @@ export const Button: React.FC<Props> = ({
       aria-live={loading !== undefined ? 'polite' : undefined}
       onClick={handleClick}
       title={title}
+      // eslint-disable-next-line react/button-has-type -- set correctly via TS
       type={type}
       {...props}
     >

app/javascript/flavours/glitch/components/carousel/carousel.stories.tsx

@@ -0,0 +1,126 @@
+import type { FC } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn, userEvent, expect } from 'storybook/test';
+
+import type { CarouselProps } from './index';
+import { Carousel } from './index';
+
+interface TestSlideProps {
+  id: number;
+  text: string;
+  color: string;
+}
+
+const TestSlide: FC<TestSlideProps & { active: boolean }> = ({
+  active,
+  text,
+  color,
+}) => (
+  <div
+    className='test-slide'
+    style={{
+      backgroundColor: active ? color : undefined,
+    }}
+  >
+    {text}
+  </div>
+);
+
+const slides: TestSlideProps[] = [
+  {
+    id: 1,
+    text: 'first',
+    color: 'red',
+  },
+  {
+    id: 2,
+    text: 'second',
+    color: 'pink',
+  },
+  {
+    id: 3,
+    text: 'third',
+    color: 'orange',
+  },
+];
+
+type StoryProps = Pick<
+  CarouselProps<TestSlideProps>,
+  'items' | 'renderItem' | 'emptyFallback' | 'onChangeSlide'
+>;
+
+const meta = {
+  title: 'Components/Carousel',
+  args: {
+    items: slides,
+    renderItem(item, active) {
+      return <TestSlide {...item} active={active} key={item.id} />;
+    },
+    onChangeSlide: fn(),
+    emptyFallback: 'No slides available',
+  },
+  render(args) {
+    return (
+      <>
+        <Carousel {...args} />
+        <style>
+          {`.test-slide {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+            min-height: 100px;
+            transition: background-color 0.3s;
+            background-color: black;
+          }`}
+        </style>
+      </>
+    );
+  },
+  argTypes: {
+    emptyFallback: {
+      type: 'string',
+    },
+  },
+  tags: ['test'],
+} satisfies Meta<StoryProps>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  async play({ args, canvas }) {
+    const nextButton = await canvas.findByRole('button', { name: /next/i });
+    const slides = await canvas.findAllByRole('group');
+    await expect(slides).toHaveLength(slides.length);
+
+    await userEvent.click(nextButton);
+    await expect(args.onChangeSlide).toHaveBeenCalledWith(1, slides[1]);
+
+    await userEvent.click(nextButton);
+    await expect(args.onChangeSlide).toHaveBeenCalledWith(2, slides[2]);
+
+    // Wrap around
+    await userEvent.click(nextButton);
+    await expect(args.onChangeSlide).toHaveBeenCalledWith(0, slides[0]);
+  },
+};
+
+export const DifferentHeights: Story = {
+  args: {
+    items: slides.map((props, index) => ({
+      ...props,
+      styles: { height: 100 + index * 100 },
+    })),
+  },
+};
+
+export const NoSlides: Story = {
+  args: {
+    items: [],
+  },
+};

app/javascript/flavours/glitch/components/carousel/index.tsx

@@ -0,0 +1,244 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type {
+  ComponentPropsWithoutRef,
+  ComponentType,
+  ReactElement,
+  ReactNode,
+} from 'react';
+
+import type { MessageDescriptor } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { usePrevious } from '@dnd-kit/utilities';
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+
+import type { CarouselPaginationProps } from './pagination';
+import { CarouselPagination } from './pagination';
+
+import './styles.scss';
+
+const defaultMessages = defineMessages({
+  previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
+  next: { id: 'lightbox.next', defaultMessage: 'Next' },
+  current: {
+    id: 'carousel.current',
+    defaultMessage: '<sr>Slide</sr> {current, number} / {max, number}',
+  },
+  slide: {
+    id: 'carousel.slide',
+    defaultMessage: 'Slide {current, number} of {max, number}',
+  },
+});
+
+export type MessageKeys = keyof typeof defaultMessages;
+
+export interface CarouselSlideProps {
+  id: string | number;
+}
+
+export type RenderSlideFn<
+  SlideProps extends CarouselSlideProps = CarouselSlideProps,
+> = (item: SlideProps, active: boolean, index: number) => ReactElement;
+
+export interface CarouselProps<
+  SlideProps extends CarouselSlideProps = CarouselSlideProps,
+> {
+  items: SlideProps[];
+  renderItem: RenderSlideFn<SlideProps>;
+  onChangeSlide?: (index: number, ref: Element) => void;
+  paginationComponent?: ComponentType<CarouselPaginationProps> | null;
+  paginationProps?: Partial<CarouselPaginationProps>;
+  messages?: Record<MessageKeys, MessageDescriptor>;
+  emptyFallback?: ReactNode;
+  classNamePrefix?: string;
+  slideClassName?: string;
+}
+
+export const Carousel = <
+  SlideProps extends CarouselSlideProps = CarouselSlideProps,
+>({
+  items,
+  renderItem,
+  onChangeSlide,
+  paginationComponent: Pagination = CarouselPagination,
+  paginationProps = {},
+  messages = defaultMessages,
+  children,
+  emptyFallback = null,
+  className,
+  classNamePrefix = 'carousel',
+  slideClassName,
+  ...wrapperProps
+}: CarouselProps<SlideProps> & ComponentPropsWithoutRef<'div'>) => {
+  // Handle slide change
+  const [slideIndex, setSlideIndex] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  // Handle slide heights
+  const [currentSlideHeight, setCurrentSlideHeight] = useState(
+    () => wrapperRef.current?.scrollHeight ?? 0,
+  );
+  const previousSlideHeight = usePrevious(currentSlideHeight);
+  const handleSlideChange = useCallback(
+    (direction: number) => {
+      setSlideIndex((prev) => {
+        const max = items.length - 1;
+        let newIndex = prev + direction;
+        if (newIndex < 0) {
+          newIndex = max;
+        } else if (newIndex > max) {
+          newIndex = 0;
+        }
+
+        const slide = wrapperRef.current?.children[newIndex];
+        if (slide) {
+          setCurrentSlideHeight(slide.scrollHeight);
+          if (slide instanceof HTMLElement) {
+            onChangeSlide?.(newIndex, slide);
+          }
+        }
+
+        return newIndex;
+      });
+    },
+    [items.length, onChangeSlide],
+  );
+
+  const observerRef = useRef<ResizeObserver | null>(null);
+  observerRef.current ??= new ResizeObserver(() => {
+    handleSlideChange(0);
+  });
+
+  const wrapperStyles = useSpring({
+    x: `-${slideIndex * 100}%`,
+    height: currentSlideHeight,
+    // Don't animate from zero to the height of the initial slide
+    immediate: !previousSlideHeight,
+  });
+  useLayoutEffect(() => {
+    // Update slide height when the component mounts
+    if (currentSlideHeight === 0) {
+      handleSlideChange(0);
+    }
+  }, [currentSlideHeight, handleSlideChange]);
+
+  // Handle swiping animations
+  const bind = useDrag(
+    ({ swipe: [swipeX] }) => {
+      handleSlideChange(swipeX * -1); // Invert swipe as swiping left loads the next slide.
+    },
+    { pointer: { capture: false } },
+  );
+  const handlePrev = useCallback(() => {
+    handleSlideChange(-1);
+    // We're focusing on the wrapper as the child slides can potentially be inert.
+    // Because of that, only the active slide can be focused anyway.
+    wrapperRef.current?.focus();
+  }, [handleSlideChange]);
+  const handleNext = useCallback(() => {
+    handleSlideChange(1);
+    wrapperRef.current?.focus();
+  }, [handleSlideChange]);
+
+  const intl = useIntl();
+
+  if (items.length === 0) {
+    return emptyFallback;
+  }
+
+  return (
+    <div
+      {...bind()}
+      aria-roledescription='carousel'
+      role='region'
+      className={classNames(classNamePrefix, className)}
+      {...wrapperProps}
+    >
+      <div className={`${classNamePrefix}__header`}>
+        {children}
+        {Pagination && items.length > 1 && (
+          <Pagination
+            current={slideIndex}
+            max={items.length}
+            onNext={handleNext}
+            onPrev={handlePrev}
+            className={`${classNamePrefix}__pagination`}
+            messages={messages}
+            {...paginationProps}
+          />
+        )}
+      </div>
+
+      <animated.div
+        className={`${classNamePrefix}__slides`}
+        ref={wrapperRef}
+        style={wrapperStyles}
+        aria-label={intl.formatMessage(messages.slide, {
+          current: slideIndex + 1,
+          max: items.length,
+        })}
+        tabIndex={-1}
+      >
+        {items.map((itemsProps, index) => (
+          <CarouselSlideWrapper<SlideProps>
+            item={itemsProps}
+            renderItem={renderItem}
+            observer={observerRef.current}
+            index={index}
+            key={`slide-${itemsProps.id}`}
+            className={classNames(`${classNamePrefix}__slide`, slideClassName, {
+              active: index === slideIndex,
+            })}
+            active={index === slideIndex}
+          />
+        ))}
+      </animated.div>
+    </div>
+  );
+};
+
+type CarouselSlideWrapperProps<SlideProps extends CarouselSlideProps> = {
+  observer: ResizeObserver | null;
+  className: string;
+  active: boolean;
+  item: SlideProps;
+  index: number;
+} & Pick<CarouselProps<SlideProps>, 'renderItem'>;
+
+const CarouselSlideWrapper = <SlideProps extends CarouselSlideProps>({
+  observer,
+  className,
+  active,
+  renderItem,
+  item,
+  index,
+}: CarouselSlideWrapperProps<SlideProps>) => {
+  const handleRef = useCallback(
+    (instance: HTMLDivElement | null) => {
+      if (observer && instance) {
+        observer.observe(instance);
+      }
+    },
+    [observer],
+  );
+
+  const children = useMemo(
+    () => renderItem(item, active, index),
+    [renderItem, item, active, index],
+  );
+
+  return (
+    <div
+      ref={handleRef}
+      className={className}
+      role='group'
+      aria-roledescription='slide'
+      inert={active ? undefined : ''}
+      data-index={index}
+    >
+      {children}
+    </div>
+  );
+};

app/javascript/flavours/glitch/components/carousel/pagination.tsx

@@ -0,0 +1,54 @@
+import type { FC, MouseEventHandler } from 'react';
+
+import type { MessageDescriptor } from 'react-intl';
+import { useIntl } from 'react-intl';
+
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+
+import { IconButton } from '../icon_button';
+
+import type { MessageKeys } from './index';
+
+export interface CarouselPaginationProps {
+  onNext: MouseEventHandler;
+  onPrev: MouseEventHandler;
+  current: number;
+  max: number;
+  className?: string;
+  messages: Record<MessageKeys, MessageDescriptor>;
+}
+
+export const CarouselPagination: FC<CarouselPaginationProps> = ({
+  onNext,
+  onPrev,
+  current,
+  max,
+  className = '',
+  messages,
+}) => {
+  const intl = useIntl();
+  return (
+    <div className={className}>
+      <IconButton
+        title={intl.formatMessage(messages.previous)}
+        icon='chevron-left'
+        iconComponent={ChevronLeftIcon}
+        onClick={onPrev}
+      />
+      <span aria-live='polite'>
+        {intl.formatMessage(messages.current, {
+          current: current + 1,
+          max,
+          sr: (chunk) => <span className='sr-only'>{chunk}</span>,
+        })}
+      </span>
+      <IconButton
+        title={intl.formatMessage(messages.next)}
+        icon='chevron-right'
+        iconComponent={ChevronRightIcon}
+        onClick={onNext}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,28 @@
+.carousel {
+  gap: 16px;
+  overflow: hidden;
+  touch-action: pan-y;
+
+  &__header {
+    padding: 8px 16px;
+  }
+
+  &__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  &__slides {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: start;
+  }
+
+  &__slide {
+    flex: 0 0 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+}

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

@@ -30,7 +30,7 @@ export const ColumnBackButton: React.FC<{ onClick?: OnClickCallback }> = ({
   const handleClick = useHandleClick(onClick);
 
   const component = (
-    <button onClick={handleClick} className='column-back-button'>
+    <button onClick={handleClick} className='column-back-button' type='button'>
       <Icon
         id='chevron-left'
         icon={ArrowBackIcon}

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

@@ -53,6 +53,7 @@ const BackButton: React.FC<{
         compact: onlyIcon,
       })}
       aria-label={intl.formatMessage(messages.back)}
+      type='button'
     >
       <Icon
         id='chevron-left'
@@ -172,6 +173,7 @@ export const ColumnHeader: React.FC<Props> = ({
       <button
         className='text-btn column-header__setting-btn'
         onClick={handlePin}
+        type='button'
       >
         <Icon id='times' icon={CloseIcon} />{' '}
         <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' />
@@ -185,6 +187,7 @@ export const ColumnHeader: React.FC<Props> = ({
           aria-label={intl.formatMessage(messages.moveLeft)}
           className='icon-button column-header__setting-btn'
           onClick={handleMoveLeft}
+          type='button'
         >
           <Icon id='chevron-left' icon={ChevronLeftIcon} />
         </button>
@@ -193,6 +196,7 @@ export const ColumnHeader: React.FC<Props> = ({
           aria-label={intl.formatMessage(messages.moveRight)}
           className='icon-button column-header__setting-btn'
           onClick={handleMoveRight}
+          type='button'
         >
           <Icon id='chevron-right' icon={ChevronRightIcon} />
         </button>
@@ -203,6 +207,7 @@ export const ColumnHeader: React.FC<Props> = ({
       <button
         className='text-btn column-header__setting-btn'
         onClick={handlePin}
+        type='button'
       >
         <Icon id='plus' icon={AddIcon} />{' '}
         <FormattedMessage id='column_header.pin' defaultMessage='Pin' />
@@ -237,6 +242,7 @@ export const ColumnHeader: React.FC<Props> = ({
           collapsed ? messages.show : messages.hide,
         )}
         onClick={handleToggleClick}
+        type='button'
       >
         <i className='icon-with-badge'>
           <Icon
@@ -259,7 +265,11 @@ export const ColumnHeader: React.FC<Props> = ({
           <>
             {backButton}
 
-            <button onClick={handleTitleClick} className='column-header__title'>
+            <button
+              onClick={handleTitleClick}
+              className='column-header__title'
+              type='button'
+            >
               {!backButton && (
                 <Icon
                   id={icon}

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

@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect, useRef } from 'react';
+import { useCallback, useState, useRef } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -12,11 +12,15 @@ export const ColumnSearchHeader: React.FC<{
   const inputRef = useRef<HTMLInputElement>(null);
   const [value, setValue] = useState('');
 
-  useEffect(() => {
+  // Reset the component when it turns from active to inactive.
+  // [More on this pattern](https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes)
+  const [previousActive, setPreviousActive] = useState(active);
+  if (active !== previousActive) {
+    setPreviousActive(active);
     if (!active) {
       setValue('');
     }
-  }, [active]);
+  }
 
   const handleChange = useCallback(
     ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {

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

@@ -74,7 +74,7 @@ export const CopyPasteText: React.FC<{ value: string }> = ({ value }) => {
         onBlur={handleBlur}
       />
 
-      <button className='button' onClick={handleButtonClick}>
+      <button className='button' onClick={handleButtonClick} type='button'>
         <Icon id='copy' icon={ContentCopyIcon} />{' '}
         {copied ? (
           <FormattedMessage id='copypaste.copied' defaultMessage='Copied' />

app/javascript/flavours/glitch/components/dropdown/index.tsx

@@ -109,7 +109,7 @@ export const Dropdown: FC<
         placement='bottom-start'
         onHide={handleClose}
         flip
-        target={buttonRef.current}
+        target={buttonRef}
         popperConfig={{
           strategy: 'fixed',
           modifiers: [matchWidth],

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

@@ -216,6 +216,7 @@ export const DropdownMenu = <Item = MenuItem,>({
           onClick={handleItemClick}
           data-index={i}
           aria-disabled={disabled}
+          type='button'
         >
           <DropdownMenuItemContent item={option} />
         </button>

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

@@ -108,7 +108,7 @@ export const EditedTimestamp: React.FC<{
       onItemClick={handleItemClick}
       forceDropdown
     >
-      <button className='dropdown-menu__text-button'>
+      <button className='dropdown-menu__text-button' type='button'>
         <FormattedMessage
           id='status.edited'
           defaultMessage='Edited {date}'

app/javascript/flavours/glitch/components/emoji/index.tsx

@@ -1,9 +1,14 @@
 import type { FC } from 'react';
 import { useContext, useEffect, useState } from 'react';
 
+import classNames from 'classnames';
+
 import { EMOJI_TYPE_CUSTOM } from '@/flavours/glitch/features/emoji/constants';
 import { useEmojiAppState } from '@/flavours/glitch/features/emoji/mode';
-import { unicodeHexToUrl } from '@/flavours/glitch/features/emoji/normalize';
+import {
+  emojiToInversionClassName,
+  unicodeHexToUrl,
+} from '@/flavours/glitch/features/emoji/normalize';
 import {
   isStateLoaded,
   loadEmojiDataToState,
@@ -41,6 +46,9 @@ export const Emoji: FC<EmojiProps> = ({
   }, [appState.currentLocale, state]);
 
   const animate = useContext(AnimateEmojiContext);
+
+  const inversionClass = emojiToInversionClassName(code);
+
   const fallback = showFallback ? code : null;
 
   // If the code is invalid or we otherwise know it's not valid, show the fallback.
@@ -79,7 +87,7 @@ export const Emoji: FC<EmojiProps> = ({
       src={src}
       alt={state.data.unicode}
       title={state.data.label}
-      className='emojione'
+      className={classNames('emojione', inversionClass)}
       loading='lazy'
     />
   );

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

@@ -27,22 +27,23 @@ export const ExitAnimationWrapper: React.FC<{
    */
   children: (delayedIsActive: boolean) => React.ReactNode;
 }> = ({ isActive = false, delayMs = 500, withEntryDelay, children }) => {
-  const [delayedIsActive, setDelayedIsActive] = useState(false);
+  const [delayedIsActive, setDelayedIsActive] = useState(
+    isActive && !withEntryDelay,
+  );
 
   useEffect(() => {
-    if (isActive && !withEntryDelay) {
-      setDelayedIsActive(true);
+    const withDelay = !isActive || withEntryDelay;
 
-      return () => '';
-    } else {
-      const timeout = setTimeout(() => {
+    const timeout = setTimeout(
+      () => {
         setDelayedIsActive(isActive);
-      }, delayMs);
+      },
+      withDelay ? delayMs : 0,
+    );
 
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
+    return () => {
+      clearTimeout(timeout);
+    };
   }, [isActive, delayMs, withEntryDelay]);
 
   if (!isActive && !delayedIsActive) {

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

@@ -1,38 +1,43 @@
-import type { ComponentPropsWithRef } from 'react';
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  useId,
-} from 'react';
+import { useCallback, useEffect, useId } from 'react';
 
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 
 import type { Map as ImmutableMap } from 'immutable';
 import { List as ImmutableList } from 'immutable';
 
-import type { AnimatedProps } from '@react-spring/web';
-import { animated, useSpring } from '@react-spring/web';
-import { useDrag } from '@use-gesture/react';
-
 import { expandAccountFeaturedTimeline } from '@/flavours/glitch/actions/timelines';
 import { Icon } from '@/flavours/glitch/components/icon';
-import { IconButton } from '@/flavours/glitch/components/icon_button';
 import { StatusQuoteManager } from '@/flavours/glitch/components/status_quoted';
-import { usePrevious } from '@/flavours/glitch/hooks/usePrevious';
-import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
-import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
-import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import {
+  createAppSelector,
+  useAppDispatch,
+  useAppSelector,
+} from '@/flavours/glitch/store';
 import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 
+import { Carousel } from './carousel';
+
+const pinnedStatusesSelector = createAppSelector(
+  [
+    (state, accountId: string, tagged?: string) =>
+      (state.timelines as ImmutableMap<string, unknown>).getIn(
+        [`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'],
+        ImmutableList(),
+      ) as ImmutableList<string>,
+  ],
+  (items) => items.toArray().map((id) => ({ id })),
+);
+
 const messages = defineMessages({
-  previous: { id: 'featured_carousel.previous', defaultMessage: 'Previous' },
-  next: { id: 'featured_carousel.next', defaultMessage: 'Next' },
+  previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
+  next: { id: 'lightbox.next', defaultMessage: 'Next' },
+  current: {
+    id: 'featured_carousel.current',
+    defaultMessage: '<sr>Post</sr> {current, number} / {max, number}',
+  },
   slide: {
     id: 'featured_carousel.slide',
-    defaultMessage: '{index} of {total}',
+    defaultMessage: 'Post {current, number} of {max, number}',
   },
 });
 
@@ -40,7 +45,6 @@ export const FeaturedCarousel: React.FC<{
   accountId: string;
   tagged?: string;
 }> = ({ accountId, tagged }) => {
-  const intl = useIntl();
   const accessibilityId = useId();
 
   // Load pinned statuses
@@ -50,175 +54,37 @@ export const FeaturedCarousel: React.FC<{
       void dispatch(expandAccountFeaturedTimeline(accountId, { tagged }));
     }
   }, [accountId, dispatch, tagged]);
-  const pinnedStatuses = useAppSelector(
-    (state) =>
-      (state.timelines as ImmutableMap<string, unknown>).getIn(
-        [`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'],
-        ImmutableList(),
-      ) as ImmutableList<string>,
+  const pinnedStatuses = useAppSelector((state) =>
+    pinnedStatusesSelector(state, accountId, tagged),
   );
 
-  // Handle slide change
-  const [slideIndex, setSlideIndex] = useState(0);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const handleSlideChange = useCallback(
-    (direction: number) => {
-      setSlideIndex((prev) => {
-        const max = pinnedStatuses.size - 1;
-        let newIndex = prev + direction;
-        if (newIndex < 0) {
-          newIndex = max;
-        } else if (newIndex > max) {
-          newIndex = 0;
-        }
-        const slide = wrapperRef.current?.children[newIndex];
-        if (slide) {
-          setCurrentSlideHeight(slide.scrollHeight);
-        }
-        return newIndex;
-      });
-    },
-    [pinnedStatuses.size],
+  const renderSlide = useCallback(
+    ({ id }: { id: string }) => (
+      <StatusQuoteManager id={id} contextType='account' withCounters />
+    ),
+    [],
   );
 
-  // Handle slide heights
-  const [currentSlideHeight, setCurrentSlideHeight] = useState(
-    wrapperRef.current?.scrollHeight ?? 0,
-  );
-  const previousSlideHeight = usePrevious(currentSlideHeight);
-  const observerRef = useRef<ResizeObserver>(
-    new ResizeObserver(() => {
-      handleSlideChange(0);
-    }),
-  );
-  const wrapperStyles = useSpring({
-    x: `-${slideIndex * 100}%`,
-    height: currentSlideHeight,
-    // Don't animate from zero to the height of the initial slide
-    immediate: !previousSlideHeight,
-  });
-  useLayoutEffect(() => {
-    // Update slide height when the component mounts
-    if (currentSlideHeight === 0) {
-      handleSlideChange(0);
-    }
-  }, [currentSlideHeight, handleSlideChange]);
-
-  // Handle swiping animations
-  const bind = useDrag(({ swipe: [swipeX] }) => {
-    handleSlideChange(swipeX * -1); // Invert swipe as swiping left loads the next slide.
-  });
-  const handlePrev = useCallback(() => {
-    handleSlideChange(-1);
-  }, [handleSlideChange]);
-  const handleNext = useCallback(() => {
-    handleSlideChange(1);
-  }, [handleSlideChange]);
-
-  if (!accountId || pinnedStatuses.isEmpty()) {
+  if (!accountId || pinnedStatuses.length === 0) {
     return null;
   }
 
   return (
-    <div
-      className='featured-carousel'
-      {...bind()}
-      aria-roledescription='carousel'
+    <Carousel
+      items={pinnedStatuses}
+      renderItem={renderSlide}
       aria-labelledby={`${accessibilityId}-title`}
-      role='region'
+      classNamePrefix='featured-carousel'
+      messages={messages}
     >
-      <div className='featured-carousel__header'>
-        <h4
-          className='featured-carousel__title'
-          id={`${accessibilityId}-title`}
-        >
-          <Icon id='thumb-tack' icon={PushPinIcon} />
-          <FormattedMessage
-            id='featured_carousel.header'
-            defaultMessage='{count, plural, one {Pinned Post} other {Pinned Posts}}'
-            values={{ count: pinnedStatuses.size }}
-          />
-        </h4>
-        {pinnedStatuses.size > 1 && (
-          <>
-            <IconButton
-              title={intl.formatMessage(messages.previous)}
-              icon='chevron-left'
-              iconComponent={ChevronLeftIcon}
-              onClick={handlePrev}
-            />
-            <span aria-live='polite'>
-              <FormattedMessage
-                id='featured_carousel.post'
-                defaultMessage='Post'
-              >
-                {(text) => <span className='sr-only'>{text}</span>}
-              </FormattedMessage>
-              {slideIndex + 1} / {pinnedStatuses.size}
-            </span>
-            <IconButton
-              title={intl.formatMessage(messages.next)}
-              icon='chevron-right'
-              iconComponent={ChevronRightIcon}
-              onClick={handleNext}
-            />
-          </>
-        )}
-      </div>
-      <animated.div
-        className='featured-carousel__slides'
-        ref={wrapperRef}
-        style={wrapperStyles}
-        aria-atomic='false'
-        aria-live='polite'
-      >
-        {pinnedStatuses.map((statusId, index) => (
-          <FeaturedCarouselItem
-            key={`f-${statusId}`}
-            data-index={index}
-            aria-label={intl.formatMessage(messages.slide, {
-              index: index + 1,
-              total: pinnedStatuses.size,
-            })}
-            statusId={statusId}
-            observer={observerRef.current}
-            active={index === slideIndex}
-          />
-        ))}
-      </animated.div>
-    </div>
-  );
-};
-
-interface FeaturedCarouselItemProps {
-  statusId: string;
-  active: boolean;
-  observer: ResizeObserver;
-}
-
-const FeaturedCarouselItem: React.FC<
-  FeaturedCarouselItemProps & AnimatedProps<ComponentPropsWithRef<'div'>>
-> = ({ statusId, active, observer, ...props }) => {
-  const handleRef = useCallback(
-    (instance: HTMLDivElement | null) => {
-      if (instance) {
-        observer.observe(instance);
-      }
-    },
-    [observer],
-  );
-
-  return (
-    <animated.div
-      className='featured-carousel__slide'
-      // @ts-expect-error inert in not in this version of React
-      inert={!active ? 'true' : undefined}
-      aria-roledescription='slide'
-      role='group'
-      ref={handleRef}
-      {...props}
-    >
-      <StatusQuoteManager id={statusId} contextType='account' withCounters />
-    </animated.div>
+      <h4 className='featured-carousel__title' id={`${accessibilityId}-title`}>
+        <Icon id='thumb-tack' icon={PushPinIcon} />
+        <FormattedMessage
+          id='featured_carousel.header'
+          defaultMessage='{count, plural, one {Pinned Post} other {Pinned Posts}}'
+          values={{ count: pinnedStatuses.length }}
+        />
+      </h4>
+    </Carousel>
   );
 };

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

@@ -235,7 +235,7 @@ const HashtagBar: React.FC<{
       ))}
 
       {!expanded && hashtags.length > VISIBLE_HASHTAGS && (
-        <button className='link-button' onClick={handleClick}>
+        <button className='link-button' onClick={handleClick} type='button'>
           <FormattedMessage
             id='hashtags.and_other'
             defaultMessage='…and {count, plural, other {# more}}'

app/javascript/flavours/glitch/components/hotkeys/index.tsx

@@ -105,12 +105,14 @@ const hotkeyMatcherMap = {
   reply: just('r'),
   favourite: just('f'),
   boost: just('b'),
+  bookmark: just('d'),
   quote: just('q'),
   mention: just('m'),
   open: any('enter', 'o'),
   openProfile: just('p'),
   moveDown: just('j'),
   moveUp: just('k'),
+  moveToTop: just('0'),
   toggleHidden: just('x'),
   toggleSensitive: just('h'),
   toggleComposeSpoilers: optionPlus('x'),
@@ -180,25 +182,24 @@ export function useHotkeys<T extends HTMLElement>(handlers: HandlerMap) {
 
       if (shouldHandleEvent) {
         const matchCandidates: {
-          handler: (event: KeyboardEvent) => void;
+          // A candidate will be have an undefined handler if it's matched,
+          // but handled in a parent component rather than this one.
+          handler: ((event: KeyboardEvent) => void) | undefined;
           priority: number;
         }[] = [];
 
         (Object.keys(hotkeyMatcherMap) as HotkeyName[]).forEach(
           (handlerName) => {
             const handler = handlersRef.current[handlerName];
+            const hotkeyMatcher = hotkeyMatcherMap[handlerName];
 
-            if (handler) {
-              const hotkeyMatcher = hotkeyMatcherMap[handlerName];
+            const { isMatch, priority } = hotkeyMatcher(
+              event,
+              bufferedKeys.current,
+            );
 
-              const { isMatch, priority } = hotkeyMatcher(
-                event,
-                bufferedKeys.current,
-              );
-
-              if (isMatch) {
-                matchCandidates.push({ handler, priority });
-              }
+            if (isMatch) {
+              matchCandidates.push({ handler, priority });
             }
           },
         );

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

@@ -27,7 +27,6 @@ export const HoverCardController: React.FC = () => {
   const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout();
   const [setEnterTimeout, cancelEnterTimeout, delayEnterTimeout] = useTimeout();
   const [setScrollTimeout] = useTimeout();
-  const location = useLocation();
 
   const handleClose = useCallback(() => {
     cancelEnterTimeout();
@@ -36,9 +35,12 @@ export const HoverCardController: React.FC = () => {
     setAnchor(null);
   }, [cancelEnterTimeout, cancelLeaveTimeout, setOpen, setAnchor]);
 
-  useEffect(() => {
+  const location = useLocation();
+  const [previousLocation, setPreviousLocation] = useState(location);
+  if (location !== previousLocation) {
+    setPreviousLocation(location);
     handleClose();
-  }, [handleClose, location]);
+  }
 
   useEffect(() => {
     let isScrolling = false;

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

@@ -1,7 +1,9 @@
-import { useState, useEffect, useCallback, forwardRef } from 'react';
+import { useCallback, forwardRef } from 'react';
 
 import classNames from 'classnames';
 
+import { usePrevious } from '../hooks/usePrevious';
+
 import { AnimatedNumber } from './animated_number';
 import type { IconProp } from './icon';
 import { Icon } from './icon';
@@ -59,23 +61,6 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
     },
     buttonRef,
   ) => {
-    const [activate, setActivate] = useState(false);
-    const [deactivate, setDeactivate] = useState(false);
-
-    useEffect(() => {
-      if (!animate) {
-        return;
-      }
-
-      if (activate && !active) {
-        setActivate(false);
-        setDeactivate(true);
-      } else if (!activate && active) {
-        setActivate(true);
-        setDeactivate(false);
-      }
-    }, [setActivate, setDeactivate, animate, active, activate]);
-
     const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback(
       (e) => {
         e.preventDefault();
@@ -112,12 +97,15 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       ...(active ? activeStyle : {}),
     };
 
+    const previousActive = usePrevious(active) ?? active;
+    const shouldAnimate = animate && active !== previousActive;
+
     const classes = classNames(className, 'icon-button', {
       active,
       disabled,
       inverted,
-      activate,
-      deactivate,
+      activate: shouldAnimate && active,
+      deactivate: shouldAnimate && !active,
       overlayed: overlay,
       'icon-button--with-counter': typeof counter !== 'undefined',
     });

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

@@ -23,6 +23,7 @@ export const LearnMoreLink: React.FC<{ children: React.ReactNode }> = ({
         onClick={handleClick}
         aria-expanded={open}
         aria-controls={accessibilityId}
+        type='button'
       >
         <FormattedMessage
           id='learn_more_link.learn_more'
@@ -48,7 +49,11 @@ export const LearnMoreLink: React.FC<{ children: React.ReactNode }> = ({
             <div className='learn-more__popout__content'>{children}</div>
 
             <div>
-              <button className='link-button' onClick={handleClick}>
+              <button
+                className='link-button'
+                onClick={handleClick}
+                type='button'
+              >
                 <FormattedMessage
                   id='learn_more_link.got_it'
                   defaultMessage='Got it'

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

@@ -32,6 +32,7 @@ export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
       title={intl.formatMessage(messages.load_more)}
+      type='button'
     >
       {loading ? (
         <LoadingIndicator />

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

@@ -7,7 +7,7 @@ interface Props {
 
 export const LoadPending: React.FC<Props> = ({ onClick, count }) => {
   return (
-    <button className='load-more load-gap' onClick={onClick}>
+    <button className='load-more load-gap' onClick={onClick} type='button'>
       <FormattedMessage
         id='load_pending'
         defaultMessage='{count, plural, one {# new item} other {# new items}}'

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

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import logo from '@/images/logo.svg';
 
 export const WordmarkLogo: React.FC = () => (
@@ -7,8 +9,12 @@ export const WordmarkLogo: React.FC = () => (
   </svg>
 );
 
-export const IconLogo: React.FC = () => (
-  <svg viewBox='0 0 79 79' className='logo logo--icon' role='img'>
+export const IconLogo: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    viewBox='0 0 79 79'
+    className={classNames('logo logo--icon', className)}
+    role='img'
+  >
     <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-icon' />
   </svg>

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

@@ -251,15 +251,13 @@ class MediaGallery extends PureComponent {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
-      this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
-    } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
-      this.setState({ visible: nextProps.visible });
+  componentDidUpdate (prevProps) {
+    if (!is(prevProps.media, this.props.media) && this.props.visible === undefined) {
+      this.setState({ visible: displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all' });
+    } else if (!is(prevProps.visible, this.props.visible) && this.props.visible !== undefined) {
+      this.setState({ visible: this.props.visible });
     }
-  }
 
-  componentDidUpdate () {
     if (this.node) {
       this.handleResize();
     }