Use existing time format string to generate backup archive filename (#36469)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

.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/build-releases.yml

@@ -21,7 +21,7 @@ jobs:
       # Only tag with latest when ran against the latest stable branch
       # This needs to be updated after each minor version release
       flavor: |
-        latest=${{ startsWith(github.ref, 'refs/tags/v4.3.') }}
+        latest=${{ startsWith(github.ref, 'refs/tags/v4.5.') }}
       tags: |
         type=pep440,pattern={{raw}}
         type=pep440,pattern=v{{major}}.{{minor}}
@@ -39,7 +39,7 @@ jobs:
       # Only tag with latest when ran against the latest stable branch
       # This needs to be updated after each minor version release
       flavor: |
-        latest=${{ startsWith(github.ref, 'refs/tags/v4.3.') }}
+        latest=${{ startsWith(github.ref, 'refs/tags/v4.5.') }}
       tags: |
         type=pep440,pattern={{raw}}
         type=pep440,pattern=v{{major}}.{{minor}}

.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

@@ -23,7 +23,7 @@ jobs:
     if: github.repository == 'mastodon/mastodon'
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
       - name: Set up Javascript environment
@@ -33,7 +33,7 @@ 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 }}

.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

@@ -68,6 +68,7 @@ docker-compose.override.yml
 
 # Ignore vendored CSS reset
 app/javascript/styles/mastodon/reset.scss
+app/javascript/styles_new/mastodon/reset.scss
 
 # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
 *.js

.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/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) {

CHANGELOG.md

@@ -2,17 +2,54 @@
 
 All notable changes to this project will be documented in this file.
 
-## [4.5.0] - UNRELEASED
+## [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
+
+### 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)
+- Fix old previously-undiscovered posts being treated as new when receiving an `Update` (#36848 by @ClearlyClaire)
+- Fix blank screen in browsers that don't support `Intl.DisplayNames` (#36847 by @diondiondion)
+- Fix filters not being applied to quotes in detailed view (#36843 by @ClearlyClaire)
+- Fix scroll shift caused by fetch-all-replies alerts (#36807 by @diondiondion)
+- Fix dropdown menu not focusing first item when opened via keyboard (#36804 by @diondiondion)
+- Fix assets build issue on arch64 (#36781 by @ClearlyClaire)
+- Fix `/api/v1/statuses/:id/context` sometimes returing `Mastodon-Async-Refresh` without `result_count` (#36779 by @ClearlyClaire)
+- Fix prepared quote not being discarded with contents when replying (#36778 by @ClearlyClaire)
+
+## [4.5.0] - 2025-11-06
 
 ### Added
 
-- **Add support for allowing and authoring quotes** (#35355, #35578, #35614, #35618, #35624, #35626, #35652, #35629, #35665, #35653, #35670, #35677, #35690, #35697, #35689, #35699, #35700, #35701, #35709, #35714, #35713, #35715, #35725, #35749, #35769, #35780, #35762, #35804, #35808, #35805, #35819, #35824, #35828, #35822, #35835, #35865, #35860, #35832, #35891, #35894, #35895, #35820, #35917, #35924, #35925, #35914, #35930, #35941, #35939, #35948, #35955, #35967, #35990, #35991, #35975, #35971, #36002, #35986, #36031, #36034, #36038, #36054, #36052, #36055, #36065, #36068, #36083, #36087, #36080, #36091, #36090, #36118, #36119, #36128, #36094, #36129, #36138, #36132, #36151, #36158, #36171, #36194, #36220, #36169, #36130, #36249, #36153, #36299, #36291, #36301, #36315, #36317, #36364, #36383, #36381, #36459, #36464, #36461, #36516, #36528, #36549, #36550 and #36559 by @ChaosExAnima, @ClearlyClaire, @Lycolia, @diondiondion, and @tribela)\
+- **Add support for allowing and authoring quotes** (#35355, #35578, #35614, #35618, #35624, #35626, #35652, #35629, #35665, #35653, #35670, #35677, #35690, #35697, #35689, #35699, #35700, #35701, #35709, #35714, #35713, #35715, #35725, #35749, #35769, #35780, #35762, #35804, #35808, #35805, #35819, #35824, #35828, #35822, #35835, #35865, #35860, #35832, #35891, #35894, #35895, #35820, #35917, #35924, #35925, #35914, #35930, #35941, #35939, #35948, #35955, #35967, #35990, #35991, #35975, #35971, #36002, #35986, #36031, #36034, #36038, #36054, #36052, #36055, #36065, #36068, #36083, #36087, #36080, #36091, #36090, #36118, #36119, #36128, #36094, #36129, #36138, #36132, #36151, #36158, #36171, #36194, #36220, #36169, #36130, #36249, #36153, #36299, #36291, #36301, #36315, #36317, #36364, #36383, #36381, #36459, #36464, #36461, #36516, #36528, #36549, #36550, #36559, #36693, #36704, #36690, #36689, #36696, #36721, #36695 and #36736 by @ChaosExAnima, @ClearlyClaire, @Lycolia, @diondiondion, and @tribela)\
   This includes a revamp of the composer interface.\
   See https://blog.joinmastodon.org/2025/09/introducing-quote-posts/ for a user-centric overview of the feature, and https://docs.joinmastodon.org/client/quotes/ for API documentation.
 - **Add support for fetching and refreshing replies to the web UI** (#35210, #35496, #35575, #35500, #35577, #35602, #35603, #35654, #36141, #36237, #36172, #36256, #36271, #36334, #36382, #36239, #36484, #36481, #36583, #36627 and #36547 by @ClearlyClaire, @diondiondion, @Gargron and @renchap)
 - **Add ability to block words in usernames** (#35407, #35655, and #35806 by @ClearlyClaire and @Gargron)
-- Add ability to individually disable local or remote feeds for visitors or logged-in users `disabled` value to server setting for live and topic feeds, as well as user permission to bypass that (#36338, #36467, #36497, #36563, #36577, #36585, and #36607 by @ClearlyClaire)\
-  This splits the `timeline_preview` setting into four more granular settings controlling live feeds and topic (hashtag, trending link) feeds, with 3 values each: `public`, `authenticated`, `disabled`.\
+- Add ability to individually disable local or remote feeds for visitors or logged-in users `disabled` value to server setting for live and topic feeds, as well as user permission to bypass that (#36338, #36467, #36497, #36563, #36577, #36585, #36607 and #36703 by @ClearlyClaire)\
+  This splits the `timeline_preview` setting into four more granular settings controlling live feeds and topic (hashtag, trending link) feeds.\
+  The setting for local topic feeds has 2 values: `public` and `authenticated`. Every other setting has 3 values: `public`, `authenticated`, `disabled`.\
   When `disabled`, users with the “View live and topic feeds” will still be able to view them.
 - Add support for displaying of quote posts in Moderator UI (#35964 by @ThisIsMissEm)
 - Add support for displaying link previews for Admin UI (#35958 by @ThisIsMissEm)
@@ -20,21 +57,22 @@ All notable changes to this project will be documented in this file.
 - Add support for `Update` activities on converted object types (#36322 by @ClearlyClaire)
 - Add support for dynamic viewport height (#36272 by @e1berd)
 - Add support for numeric-based URIs for new local accounts (#32724, #36304, #36316, and #36365 by @ClearlyClaire)
+- Add default visualizer for audio upload without poster (#36734 by @ChaosExAnima)
 - Add Traditional Mongolian to posting languages (#36196 by @shimon1024)
 - Add example post with manual quote approval policy to `dev:populate_sample_data` (#36099 by @ClearlyClaire)
 - Add server-side support for handling posts with a quote policy allowing followers to quote (#36093 and #36127 by @ClearlyClaire)
 - Add schema.org markup to SEO-enabled posts (#36075 by @Gargron)
 - Add migration to fill unset default quote policy based on default post privacy (#36041 by @ClearlyClaire)
+- Add “Posting defaults” setting page, moving existing settings from “Other” (#35896, #36033, #35966, #35969, and #36084 by @ClearlyClaire and @diondiondion)
+- Added emoji from Twemoji v16 (#36501 and #36530 by @ChaosExAnima)
+- Add feature to select custom emoji rendering (#35229, #35282, #35253, #35424, #35473, #35483, #35505, #35568, #35605, #35659, #35664, #35739, #35985, #36051, #36071, #36137, #36165, #36248, #36262, #36275, #36293, #36341, #36342, #36366, #36377, #36378, #36385, #36393, #36397, #36403, #36413, #36410, #36454, #36402, #36503, #36502, #36532, #36603, #36409, #36638 and #36750 by @ChaosExAnima, @ClearlyClaire and @braddunbar)\
+  This also completely reworks the processing and rendering of emojis and server-rendered HTML in statuses and other places.
 - Add support for exposing conversation context for new public conversations according to FEP-7888 (#35959 and #36064 by @ClearlyClaire and @jesseplusplus)
 - Add digest re-check before removing followers in synchronization mechanism (#34273 by @ClearlyClaire)
-- Add “Posting defaults” setting page, moving existing settings from “Other” (#35896, #36033, #35966, #35969, and #36084 by @ClearlyClaire and @diondiondion)
 - Add support for displaying Valkey version on admin dashboard (#35785 by @ykzts)
 - Add delivery failure tracking and handling to FASP jobs (#35625, #35628, and #35723 by @oneiros)
 - Add example of quote post with a preview card to development sample data (#35616 by @ClearlyClaire)
 - Add second set of blocked text that applies to accounts regardless of account age for spam-blocking (#35563 by @ClearlyClaire)
-- Added emoji from Twemoji v16 (#36501 and #36530 by @ChaosExAnima)
-- Add feature to select custom emoji rendering (#35229, #35282, #35253, #35424, #35473, #35483, #35505, #35568, #35605, #35659, #35664, #35739, #35985, #36051, #36071, #36137, #36165, #36248, #36262, #36275, #36293, #36341, #36342, #36366, #36377, #36378, #36385, #36393, #36397, #36403, #36413, #36410, #36454, #36402, #36503, #36502, #36532, #36603, #36409 and #36638 by @ChaosExAnima, @ClearlyClaire and @braddunbar)\
-  This also completely reworks the processing and rendering of emojis and server-rendered HTML in statuses and other places.
 
 ### Changed
 
@@ -43,6 +81,9 @@ All notable changes to this project will be documented in this file.
 - Change appearance settings to introduce new Advanced settings section (#36496 and #36506 by @diondiondion)
 - Change display of blocked and muted quoted users (#36619 by @ClearlyClaire)\
   This adds `blocked_account`, `blocked_domain` and `muted_account` values to the `state` attribute of `Quote` and `ShallowQuote` REST API entities.
+- Change submitting an empty post to show an error rather than failing silently (#36650 by @diondiondion)
+- Change "Privacy and reach" settings from "Public profile" to their own top-level category (#27294 by @ChaelCodes)
+- Change number of times quote verification is retried to better deal with temporary failures (#36698 by @ClearlyClaire)
 - Change display of content warnings in Admin UI (#35935 by @ThisIsMissEm)
 - Change styling of column banners (#36531 by @ClearlyClaire)
 - Change recommended Node version to 24 (LTS) (#36539 by @renchap)
@@ -70,9 +111,11 @@ All notable changes to this project will be documented in this file.
 - Fix relationship not being fetched to evaluate whether to show a quote post (#36517 by @ClearlyClaire)
 - Fix rendering of poll options in status history modal (#35633 by @ThisIsMissEm)
 - Fix “mute” button being displayed to unauthenticated visitors in hashtag dropdown (#36353 by @mkljczk)
+- Fix initially selected language in Rules panel, hide selector when no alternative translations exist (#36672 by @diondiondion)
 - Fix URL comparison for mentions in case of empty path (#36613 and #36626 by @ClearlyClaire)
 - Fix hashtags not being picked up when full-width hash sign is used (#36103 and #36625 by @ClearlyClaire and @Gargron)
 - Fix layout of severed relationships when purged events are listed (#36593 by @mejofi)
+- Fix Skeleton placeholders being animated when setting to reduce animations is enabled (#36716 by @ClearlyClaire)
 - Fix vacuum tasks being interrupted by a single batch failure (#36606 by @Gargron)
 - Fix handling of unreachable network error for search services (#36587 by @mjankowski)
 - Fix bookmarks export when a bookmarked status is soft-deleted (#36576 by @ClearlyClaire)

Dockerfile

@@ -183,7 +183,7 @@ FROM build AS libvips
 
 # libvips version to compile, change with [--build-arg VIPS_VERSION="8.15.2"]
 # renovate: datasource=github-releases depName=libvips packageName=libvips/libvips
-ARG VIPS_VERSION=8.17.2
+ARG VIPS_VERSION=8.17.3
 # libvips download URL, change with [--build-arg VIPS_URL="https://github.com/libvips/libvips/releases/download"]
 ARG VIPS_URL=https://github.com/libvips/libvips/releases/download
 

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.33.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.1186.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.117.0)
+      aws-sdk-core (~> 3, >= 3.234.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.177.0)
-      aws-sdk-core (~> 3, >= 3.210.0)
+    aws-sdk-s3 (1.205.0)
+      aws-sdk-core (~> 3, >= 3.234.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
     aws-sigv4 (1.12.1)
@@ -126,9 +129,9 @@ 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.0.2)
+    brakeman (7.1.1)
       racc
     browser (6.2.0)
     builder (3.3.0)
@@ -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)
@@ -224,7 +227,7 @@ GEM
       mail (~> 2.7)
     email_validator (2.2.4)
       activemodel
-    erb (5.1.1)
+    erb (5.1.3)
     erubi (1.13.1)
     et-orbi (1.4.0)
       tzinfo
@@ -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
@@ -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)
@@ -337,7 +341,7 @@ GEM
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.8.1)
-    irb (1.15.2)
+    irb (1.15.3)
       pp (>= 0.6.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
@@ -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.12)
       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-obfuscation (0.5.0)
       opentelemetry-common (~> 0.21)
     opentelemetry-instrumentation-action_mailer (0.6.1)
       opentelemetry-instrumentation-active_support (~> 0.10)
@@ -548,7 +552,7 @@ GEM
       opentelemetry-instrumentation-base (~> 0.25)
     opentelemetry-instrumentation-net_http (0.26.0)
       opentelemetry-instrumentation-base (~> 0.25)
-    opentelemetry-instrumentation-pg (0.32.0)
+    opentelemetry-instrumentation-pg (0.33.0)
       opentelemetry-helpers-sql
       opentelemetry-helpers-sql-obfuscation
       opentelemetry-instrumentation-base (~> 0.25)
@@ -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,14 +618,14 @@ 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)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.3)
+    rack (3.2.4)
     rack-attack (6.8.0)
       rack (>= 1.0, < 4)
     rack-cors (3.0.0)
@@ -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)
@@ -691,7 +695,7 @@ GEM
       readline (~> 0.0)
     rdf-normalize (0.7.0)
       rdf (~> 3.3)
-    rdoc (6.15.0)
+    rdoc (6.15.1)
       erb
       psych (>= 4.0.0)
       tsort
@@ -702,7 +706,7 @@ GEM
     redis-client (0.26.1)
       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)
@@ -791,7 +795,7 @@ GEM
     ruby-vips (2.2.5)
       ffi (~> 1.12)
       logger
-    rubyzip (3.2.1)
+    rubyzip (3.2.2)
     rufus-scheduler (3.9.2)
       fugit (~> 1.1, >= 1.11.1)
     safety_net_attestation (0.5.0)
@@ -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.8)
+    shoulda-matchers (7.0.1)
+      activesupport (>= 7.1)
+    sidekiq (8.0.9)
       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)
@@ -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.33.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)

SECURITY.md

@@ -15,7 +15,8 @@ A "vulnerability in Mastodon" is a vulnerability in the code distributed through
 
 | Version | Supported        |
 | ------- | ---------------- |
+| 4.5.x   | Yes              |
 | 4.4.x   | Yes              |
-| 4.3.x   | Yes              |
+| 4.3.x   | Until 2026-05-06 |
 | 4.2.x   | Until 2026-01-08 |
 | < 4.2   | No               |

app/controllers/activitypub/quote_authorizations_controller.rb

@@ -9,7 +9,7 @@ class ActivityPub::QuoteAuthorizationsController < ActivityPub::BaseController
   before_action :set_quote_authorization
 
   def show
-    expires_in 30.seconds, public: true if @quote.status.distributable? && public_fetch_mode?
+    expires_in 30.seconds, public: true if @quote.quoted_status.distributable? && public_fetch_mode?
     render json: @quote, serializer: ActivityPub::QuoteAuthorizationSerializer, adapter: ActivityPub::Adapter, content_type: 'application/activity+json'
   end
 
@@ -23,7 +23,7 @@ class ActivityPub::QuoteAuthorizationsController < ActivityPub::BaseController
     @quote = Quote.accepted.where(quoted_account: @account).find(params[:id])
     return not_found unless @quote.status.present? && @quote.quoted_status.present?
 
-    authorize @quote.status, :show?
+    authorize @quote.quoted_status, :show?
   rescue Mastodon::NotPermittedError
     not_found
   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/statuses_controller.rb

@@ -66,7 +66,7 @@ class Api::V1::StatusesController < Api::BaseController
     if async_refresh.running?
       add_async_refresh_header(async_refresh)
     elsif !current_account.nil? && @status.should_fetch_replies?
-      add_async_refresh_header(AsyncRefresh.create(refresh_key))
+      add_async_refresh_header(AsyncRefresh.create(refresh_key, count_results: true))
 
       WorkerBatch.new.within do |batch|
         batch.connect(refresh_key, threshold: 1.0)
@@ -126,10 +126,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) })
 

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/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/theme_helper.rb

@@ -4,11 +4,11 @@ module ThemeHelper
   def theme_style_tags(theme)
     if theme == 'system'
       ''.html_safe.tap do |tags|
-        tags << vite_stylesheet_tag('themes/mastodon-light', type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
-        tags << vite_stylesheet_tag('themes/default', type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+        tags << vite_stylesheet_tag(theme_path_for('mastodon-light'), type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
+        tags << vite_stylesheet_tag(theme_path_for('default'), type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
       end
     else
-      vite_stylesheet_tag "themes/#{theme}", type: :virtual, media: 'all', crossorigin: 'anonymous'
+      vite_stylesheet_tag theme_path_for(theme), type: :virtual, media: 'all', crossorigin: 'anonymous'
     end
   end
 
@@ -53,4 +53,8 @@ module ThemeHelper
   def theme_color_for(theme)
     theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark]
   end
+
+  def theme_path_for(theme)
+    Mastodon::Feature.theme_tokens_enabled? ? "themes/#{theme}_theme_tokens" : "themes/#{theme}"
+  end
 end

app/inputs/date_of_birth_input.rb

@@ -2,25 +2,25 @@
 
 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,
+    { autocomplete: 'bday-month', maxlength: 2, pattern: '[0-9]+', placeholder: 'MM' }.freeze,
+    { autocomplete: 'bday-day', maxlength: 2, pattern: '[0-9]+', placeholder: 'DD' }.freeze,
   ].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('.')
+    values = (object.public_send(attribute_name) || '').to_s.split('-')
 
-    safe_join(Array.new(3) do |index|
+    safe_join(2.downto(0).map 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)
   end
 
   def label_target
-    "#{attribute_name}_1i"
+    "#{attribute_name}_3i"
   end
 
   private

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/mastodon/actions/compose.js

@@ -5,6 +5,7 @@ import { throttle } from 'lodash';
 
 import api from 'mastodon/api';
 import { browserHistory } from 'mastodon/components/router';
+import { countableText } from 'mastodon/features/compose/util/counter';
 import { search as emojiSearch } from 'mastodon/features/emoji/emoji_mart_search_light';
 import { tagHistory } from 'mastodon/settings';
 
@@ -55,7 +56,6 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 export const COMPOSE_SENSITIVITY_CHANGE  = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_SPOILERNESS_CHANGE  = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
-export const COMPOSE_VISIBILITY_CHANGE   = 'COMPOSE_VISIBILITY_CHANGE';
 export const COMPOSE_COMPOSING_CHANGE    = 'COMPOSE_COMPOSING_CHANGE';
 export const COMPOSE_LANGUAGE_CHANGE     = 'COMPOSE_LANGUAGE_CHANGE';
 
@@ -88,6 +88,7 @@ const messages = defineMessages({
   open: { id: 'compose.published.open', defaultMessage: 'Open' },
   published: { id: 'compose.published.body', defaultMessage: 'Post published.' },
   saved: { id: 'compose.saved.body', defaultMessage: 'Post saved.' },
+  blankPostError: { id: 'compose.error.blank_post', defaultMessage: 'Post can\'t be blank.' },
 });
 
 export const ensureComposeIsVisible = (getState) => {
@@ -197,7 +198,15 @@ export function submitCompose(successCallback) {
     const hasQuote = !!getState().getIn(['compose', 'quoted_status_id']);
     const spoiler_text = getState().getIn(['compose', 'spoiler']) ? getState().getIn(['compose', 'spoiler_text'], '') : '';
 
-    if (!(status?.length || media.size !== 0 || (hasQuote && spoiler_text?.length))) {
+    const fulltext = `${spoiler_text ?? ''}${countableText(status ?? '')}`;
+    const hasText = fulltext.trim().length > 0;
+
+    if (!(hasText || media.size !== 0 || (hasQuote && spoiler_text?.length))) {
+      dispatch(showAlert({
+        message: messages.blankPostError,
+      }));
+      dispatch(focusCompose());
+
       return;
     }
 
@@ -664,8 +673,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;
@@ -784,13 +793,6 @@ export function changeComposeSpoilerText(text) {
   };
 }
 
-export function changeComposeVisibility(value) {
-  return {
-    type: COMPOSE_VISIBILITY_CHANGE,
-    value,
-  };
-}
-
 export function insertEmojiCompose(position, emoji, needsSpace) {
   return {
     type: COMPOSE_EMOJI_INSERT,

app/javascript/mastodon/actions/compose_typed.ts

@@ -13,10 +13,11 @@ import {
 } from 'mastodon/store/typed_functions';
 
 import type { ApiQuotePolicy } from '../api_types/quotes';
-import type { Status } from '../models/status';
+import type { Status, StatusVisibility } from '../models/status';
+import type { RootState } from '../store';
 
 import { showAlert } from './alerts';
-import { focusCompose } from './compose';
+import { changeCompose, focusCompose } from './compose';
 import { importFetchedStatuses } from './importer';
 import { openModal } from './modal';
 
@@ -41,6 +42,10 @@ const messages = defineMessages({
     id: 'quote_error.unauthorized',
     defaultMessage: 'You are not authorized to quote this post.',
   },
+  quoteErrorPrivateMention: {
+    id: 'quote_error.private_mentions',
+    defaultMessage: 'Quoting is not allowed with direct mentions.',
+  },
 });
 
 type SimulatedMediaAttachmentJSON = ApiMediaAttachmentJSON & {
@@ -67,6 +72,39 @@ const simulateModifiedApiResponse = (
   return data;
 };
 
+export const changeComposeVisibility = createAppThunk(
+  'compose/visibility_change',
+  (visibility: StatusVisibility, { dispatch, getState }) => {
+    if (visibility !== 'direct') {
+      return visibility;
+    }
+
+    const state = getState();
+    const quotedStatusId = state.compose.get('quoted_status_id') as
+      | string
+      | null;
+    if (!quotedStatusId) {
+      return visibility;
+    }
+
+    // Remove the quoted status
+    dispatch(quoteComposeCancel());
+    const quotedStatus = state.statuses.get(quotedStatusId) as Status | null;
+    if (!quotedStatus) {
+      return visibility;
+    }
+
+    // Append the quoted status URL to the compose text
+    const url = quotedStatus.get('url') as string;
+    const text = state.compose.get('text') as string;
+    if (!text.includes(url)) {
+      const newText = text.trim() ? `${text}\n\n${url}` : url;
+      dispatch(changeCompose(newText));
+    }
+    return visibility;
+  },
+);
+
 export const changeUploadCompose = createDataLoadingThunk(
   'compose/changeUpload',
   async (
@@ -130,6 +168,8 @@ export const quoteComposeByStatus = createAppThunk(
 
     if (composeState.get('id')) {
       dispatch(showAlert({ message: messages.quoteErrorEdit }));
+    } else if (composeState.get('privacy') === 'direct') {
+      dispatch(showAlert({ message: messages.quoteErrorPrivateMention }));
     } else if (composeState.get('poll')) {
       dispatch(showAlert({ message: messages.quoteErrorPoll }));
     } else if (
@@ -173,6 +213,17 @@ export const quoteComposeById = createAppThunk(
   },
 );
 
+const composeStateForbidsLink = (composeState: RootState['compose']) => {
+  return (
+    composeState.get('quoted_status_id') ||
+    composeState.get('is_submitting') ||
+    composeState.get('poll') ||
+    composeState.get('is_uploading') ||
+    composeState.get('id') ||
+    composeState.get('privacy') === 'direct'
+  );
+};
+
 export const pasteLinkCompose = createDataLoadingThunk(
   'compose/pasteLink',
   async ({ url }: { url: string }) => {
@@ -183,15 +234,12 @@ export const pasteLinkCompose = createDataLoadingThunk(
       limit: 2,
     });
   },
-  (data, { dispatch, getState }) => {
+  (data, { dispatch, getState, requestId }) => {
     const composeState = getState().compose;
 
     if (
-      composeState.get('quoted_status_id') ||
-      composeState.get('is_submitting') ||
-      composeState.get('poll') ||
-      composeState.get('is_uploading') ||
-      composeState.get('id')
+      composeStateForbidsLink(composeState) ||
+      composeState.get('fetching_link') !== requestId // Request has been cancelled
     )
       return;
 
@@ -207,6 +255,17 @@ export const pasteLinkCompose = createDataLoadingThunk(
       dispatch(quoteComposeById(data.statuses[0].id));
     }
   },
+  {
+    useLoadingBar: false,
+    condition: (_, { getState }) =>
+      !getState().compose.get('fetching_link') &&
+      !composeStateForbidsLink(getState().compose),
+  },
+);
+
+// Ideally this would cancel the action and the HTTP request, but this is good enough
+export const cancelPasteLinkCompose = createAction(
+  'compose/cancelPasteLinkCompose',
 );
 
 export const quoteComposeCancel = createAction('compose/quoteComposeCancel');

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

@@ -46,11 +46,11 @@ export function importFetchedAccounts(accounts) {
   return importAccounts({ accounts: normalAccounts });
 }
 
-export function importFetchedStatus(status) {
-  return importFetchedStatuses([status]);
+export function importFetchedStatus(status, options = {}) {
+  return importFetchedStatuses([status], options);
 }
 
-export function importFetchedStatuses(statuses) {
+export function importFetchedStatuses(statuses, options = {}) {
   return (dispatch, getState) => {
     const accounts = [];
     const normalStatuses = [];
@@ -58,7 +58,7 @@ export function importFetchedStatuses(statuses) {
     const filters = [];
 
     function processStatus(status) {
-      pushUnique(normalStatuses, normalizeStatus(status, getState().getIn(['statuses', status.id])));
+      pushUnique(normalStatuses, normalizeStatus(status, getState().getIn(['statuses', status.id]), options));
       pushUnique(accounts, status.account);
 
       if (status.filtered) {

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

@@ -27,9 +27,12 @@ function stripQuoteFallback(text) {
   return wrapper.innerHTML;
 }
 
-export function normalizeStatus(status, normalOldStatus) {
+export function normalizeStatus(status, normalOldStatus, { bogusQuotePolicy = false }) {
   const normalStatus   = { ...status };
 
+  if (bogusQuotePolicy)
+    normalStatus.quote_approval = null;
+
   normalStatus.account = status.account.id;
 
   if (status.reblog && status.reblog.id) {
@@ -109,6 +112,8 @@ export function normalizeStatus(status, normalOldStatus) {
   }
 
   if (normalOldStatus) {
+    normalStatus.quote_approval ||= normalOldStatus.get('quote_approval');
+
     const list = normalOldStatus.get('media_attachments');
     if (normalStatus.media_attachments && list) {
       normalStatus.media_attachments.forEach(item => {

app/javascript/mastodon/actions/statuses.js

@@ -203,8 +203,8 @@ export function deleteStatusFail(id, error) {
   };
 }
 
-export const updateStatus = status => dispatch =>
-  dispatch(importFetchedStatus(status));
+export const updateStatus = (status, { bogusQuotePolicy }) => dispatch =>
+  dispatch(importFetchedStatus(status, { bogusQuotePolicy }));
 
 export function muteStatus(id) {
   return (dispatch) => {

app/javascript/mastodon/actions/streaming.js

@@ -52,6 +52,9 @@ const randomUpTo = max =>
 export const connectTimelineStream = (timelineId, channelName, params = {}, options = {}) => {
   const { messages } = getLocale();
 
+  // Public streams are currently not returning personalized quote policies
+  const bogusQuotePolicy = channelName.startsWith('public') || channelName.startsWith('hashtag');
+
   return connectStream(channelName, params, (dispatch, getState) => {
     // @ts-ignore
     const locale = getState().getIn(['meta', 'locale']);
@@ -97,11 +100,11 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
         switch (data.event) {
         case 'update':
           // @ts-expect-error
-          dispatch(updateTimeline(timelineId, JSON.parse(data.payload), options.accept));
+          dispatch(updateTimeline(timelineId, JSON.parse(data.payload), { accept: options.accept, bogusQuotePolicy }));
           break;
         case 'status.update':
           // @ts-expect-error
-          dispatch(updateStatus(JSON.parse(data.payload)));
+          dispatch(updateStatus(JSON.parse(data.payload), { bogusQuotePolicy }));
           break;
         case 'delete':
           dispatch(deleteFromTimelines(data.payload));

app/javascript/mastodon/actions/timelines.js

@@ -32,7 +32,7 @@ export const loadPending = timeline => ({
   timeline,
 });
 
-export function updateTimeline(timeline, status, accept) {
+export function updateTimeline(timeline, status, { accept = undefined, bogusQuotePolicy = false } = {}) {
   return (dispatch, getState) => {
     if (typeof accept === 'function' && !accept(status)) {
       return;
@@ -45,7 +45,7 @@ export function updateTimeline(timeline, status, accept) {
       return;
     }
 
-    dispatch(importFetchedStatus(status));
+    dispatch(importFetchedStatus(status, { bogusQuotePolicy }));
 
     dispatch({
       type: TIMELINE_UPDATE,

app/javascript/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/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/mastodon/components/dropdown_menu.tsx

@@ -26,6 +26,7 @@ import {
   closeDropdownMenu,
 } from 'mastodon/actions/dropdown_menu';
 import { openModal, closeModal } from 'mastodon/actions/modal';
+import { fetchStatus } from 'mastodon/actions/statuses';
 import { CircularProgress } from 'mastodon/components/circular_progress';
 import { isUserTouching } from 'mastodon/is_mobile';
 import {
@@ -42,16 +43,10 @@ import { IconButton } from './icon_button';
 
 let id = 0;
 
-export interface RenderItemFnHandlers {
-  onClick: React.MouseEventHandler;
-  onKeyUp: React.KeyboardEventHandler;
-}
-
 export type RenderItemFn<Item = MenuItem> = (
   item: Item,
   index: number,
-  handlers: RenderItemFnHandlers,
-  focusRefCallback?: (c: HTMLAnchorElement | HTMLButtonElement | null) => void,
+  onClick: React.MouseEventHandler,
 ) => React.ReactNode;
 
 type ItemClickFn<Item = MenuItem> = (item: Item, index: number) => void;
@@ -101,7 +96,6 @@ export const DropdownMenu = <Item = MenuItem,>({
   onItemClick,
 }: DropdownMenuProps<Item>) => {
   const nodeRef = useRef<HTMLDivElement>(null);
-  const focusedItemRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
     const handleDocumentClick = (e: MouseEvent) => {
@@ -163,8 +157,11 @@ export const DropdownMenu = <Item = MenuItem,>({
     document.addEventListener('click', handleDocumentClick, { capture: true });
     document.addEventListener('keydown', handleKeyDown, { capture: true });
 
-    if (focusedItemRef.current && openedViaKeyboard) {
-      focusedItemRef.current.focus({ preventScroll: true });
+    if (openedViaKeyboard) {
+      const firstMenuItem = nodeRef.current?.querySelector<
+        HTMLAnchorElement | HTMLButtonElement
+      >('li:first-child > :is(a, button)');
+      firstMenuItem?.focus({ preventScroll: true });
     }
 
     return () => {
@@ -175,13 +172,6 @@ export const DropdownMenu = <Item = MenuItem,>({
     };
   }, [onClose, openedViaKeyboard]);
 
-  const handleFocusedItemRef = useCallback(
-    (c: HTMLAnchorElement | HTMLButtonElement | null) => {
-      focusedItemRef.current = c as HTMLElement;
-    },
-    [],
-  );
-
   const handleItemClick = useCallback(
     (e: React.MouseEvent | React.KeyboardEvent) => {
       const i = Number(e.currentTarget.getAttribute('data-index'));
@@ -207,15 +197,6 @@ export const DropdownMenu = <Item = MenuItem,>({
     [onClose, onItemClick, items],
   );
 
-  const handleItemKeyUp = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        handleItemClick(e);
-      }
-    },
-    [handleItemClick],
-  );
-
   const nativeRenderItem = (option: Item, i: number) => {
     if (!isMenuItem(option)) {
       return null;
@@ -232,11 +213,10 @@ export const DropdownMenu = <Item = MenuItem,>({
     if (isActionItem(option)) {
       element = (
         <button
-          ref={i === 0 ? handleFocusedItemRef : undefined}
           onClick={handleItemClick}
-          onKeyUp={handleItemKeyUp}
           data-index={i}
           aria-disabled={disabled}
+          type='button'
         >
           <DropdownMenuItemContent item={option} />
         </button>
@@ -248,9 +228,7 @@ export const DropdownMenu = <Item = MenuItem,>({
           target={option.target ?? '_target'}
           data-method={option.method}
           rel='noopener'
-          ref={i === 0 ? handleFocusedItemRef : undefined}
           onClick={handleItemClick}
-          onKeyUp={handleItemKeyUp}
           data-index={i}
         >
           <DropdownMenuItemContent item={option} />
@@ -258,13 +236,7 @@ export const DropdownMenu = <Item = MenuItem,>({
       );
     } else {
       element = (
-        <Link
-          to={option.to}
-          ref={i === 0 ? handleFocusedItemRef : undefined}
-          onClick={handleItemClick}
-          onKeyUp={handleItemKeyUp}
-          data-index={i}
-        >
+        <Link to={option.to} onClick={handleItemClick} data-index={i}>
           <DropdownMenuItemContent item={option} />
         </Link>
       );
@@ -307,15 +279,7 @@ export const DropdownMenu = <Item = MenuItem,>({
           })}
         >
           {items.map((option, i) =>
-            renderItemMethod(
-              option,
-              i,
-              {
-                onClick: handleItemClick,
-                onKeyUp: handleItemKeyUp,
-              },
-              i === 0 ? handleFocusedItemRef : undefined,
-            ),
+            renderItemMethod(option, i, handleItemClick),
           )}
         </ul>
       )}
@@ -340,6 +304,7 @@ interface DropdownProps<Item extends object | null = MenuItem> {
    */
   scrollKey?: string;
   status?: ImmutableMap<string, unknown>;
+  needsStatusRefresh?: boolean;
   forceDropdown?: boolean;
   renderItem?: RenderItemFn<Item>;
   renderHeader?: RenderHeaderFn<Item>;
@@ -363,6 +328,7 @@ export const Dropdown = <Item extends object | null = MenuItem>({
   placement = 'bottom',
   offset = [5, 5],
   status,
+  needsStatusRefresh,
   forceDropdown = false,
   renderItem,
   renderHeader,
@@ -382,6 +348,7 @@ export const Dropdown = <Item extends object | null = MenuItem>({
   const prefetchAccountId = status
     ? status.getIn(['account', 'id'])
     : undefined;
+  const statusId = status?.get('id') as string | undefined;
 
   const handleClose = useCallback(() => {
     if (buttonRef.current) {
@@ -399,7 +366,7 @@ export const Dropdown = <Item extends object | null = MenuItem>({
   }, [dispatch, currentId]);
 
   const handleItemClick = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
+    (e: React.MouseEvent) => {
       const i = Number(e.currentTarget.getAttribute('data-index'));
       const item = items?.[i];
 
@@ -420,10 +387,20 @@ export const Dropdown = <Item extends object | null = MenuItem>({
     [handleClose, onItemClick, items],
   );
 
-  const toggleDropdown = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
-      const { type } = e;
+  const isKeypressRef = useRef(false);
 
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      isKeypressRef.current = true;
+    }
+  }, []);
+
+  const unsetIsKeypress = useCallback(() => {
+    isKeypressRef.current = false;
+  }, []);
+
+  const toggleDropdown = useCallback(
+    (e: React.MouseEvent) => {
       if (open) {
         handleClose();
       } else {
@@ -436,6 +413,15 @@ export const Dropdown = <Item extends object | null = MenuItem>({
           dispatch(fetchRelationships([prefetchAccountId]));
         }
 
+        if (needsStatusRefresh && statusId) {
+          dispatch(
+            fetchStatus(statusId, {
+              forceFetch: true,
+              alsoFetchContext: false,
+            }),
+          );
+        }
+
         if (isUserTouching() && !forceDropdown) {
           dispatch(
             openModal({
@@ -450,10 +436,11 @@ export const Dropdown = <Item extends object | null = MenuItem>({
           dispatch(
             openDropdownMenu({
               id: currentId,
-              keyboard: type !== 'click',
+              keyboard: isKeypressRef.current,
               scrollKey,
             }),
           );
+          isKeypressRef.current = false;
         }
       }
     },
@@ -468,6 +455,8 @@ export const Dropdown = <Item extends object | null = MenuItem>({
       items,
       forceDropdown,
       handleClose,
+      statusId,
+      needsStatusRefresh,
     ],
   );
 
@@ -484,6 +473,9 @@ export const Dropdown = <Item extends object | null = MenuItem>({
   const buttonProps = {
     disabled,
     onClick: toggleDropdown,
+    onKeyDown: handleKeyDown,
+    onKeyUp: unsetIsKeypress,
+    onBlur: unsetIsKeypress,
     'aria-expanded': open,
     'aria-controls': menuId,
     ref: buttonRef,

app/javascript/mastodon/components/edited_timestamp/index.tsx

@@ -58,17 +58,7 @@ export const EditedTimestamp: React.FC<{
   }, []);
 
   const renderItem = useCallback(
-    (
-      item: HistoryItem,
-      index: number,
-      {
-        onClick,
-        onKeyUp,
-      }: {
-        onClick: React.MouseEventHandler;
-        onKeyUp: React.KeyboardEventHandler;
-      },
-    ) => {
+    (item: HistoryItem, index: number, onClick: React.MouseEventHandler) => {
       const formattedDate = (
         <RelativeTimestamp
           timestamp={item.get('created_at') as string}
@@ -98,7 +88,7 @@ export const EditedTimestamp: React.FC<{
           className='dropdown-menu__item edited-timestamp__history__item'
           key={item.get('created_at') as string}
         >
-          <button data-index={index} onClick={onClick} onKeyUp={onKeyUp}>
+          <button data-index={index} onClick={onClick} type='button'>
             {label}
           </button>
         </li>
@@ -118,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/mastodon/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/mastodon/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 '@/mastodon/actions/timelines';
 import { Icon } from '@/mastodon/components/icon';
-import { IconButton } from '@/mastodon/components/icon_button';
 import { StatusQuoteManager } from '@/mastodon/components/status_quoted';
-import { usePrevious } from '@/mastodon/hooks/usePrevious';
-import { useAppDispatch, useAppSelector } from '@/mastodon/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 '@/mastodon/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/mastodon/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/mastodon/components/hotkeys/hotkeys.stories.tsx

@@ -153,7 +153,7 @@ export const Default = {
             the app.
           </p>
           <p>
-            When a <button>Button</button> is focused,
+            When a <button type='button'>Button</button> is focused,
             <kbd>Enter</kbd>
             should not trigger open, but <kbd>o</kbd>
             should.

app/javascript/mastodon/components/hotkeys/index.tsx

@@ -180,25 +180,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/mastodon/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/mastodon/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';
@@ -55,23 +57,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();
@@ -108,12 +93,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/mastodon/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/mastodon/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/mastodon/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/mastodon/components/media_gallery.jsx

@@ -242,11 +242,11 @@ 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 });
     }
   }
 

app/javascript/mastodon/components/modal_root.jsx

@@ -61,14 +61,6 @@ class ModalRoot extends PureComponent {
     this.history = this.props.history || createBrowserHistory();
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    if (!!nextProps.children && !this.props.children) {
-      this.activeElement = document.activeElement;
-
-      this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
-    }
-  }
-
   componentDidUpdate (prevProps) {
     if (!this.props.children && !!prevProps.children) {
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
@@ -85,9 +77,15 @@ class ModalRoot extends PureComponent {
 
       this._handleModalClose();
     }
+
     if (this.props.children && !prevProps.children) {
+      this.activeElement = document.activeElement;
+
+      this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
+
       this._handleModalOpen();
     }
+
     if (this.props.children) {
       this._ensureHistoryBuffer();
     }

app/javascript/mastodon/components/poll.tsx

@@ -35,6 +35,9 @@ const messages = defineMessages({
   },
 });
 
+const isPollExpired = (expiresAt: Model.Poll['expires_at']) =>
+  new Date(expiresAt).getTime() < Date.now();
+
 interface PollProps {
   pollId: string;
   status: Status;
@@ -58,8 +61,7 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
     if (!poll) {
       return false;
     }
-    const expiresAt = poll.expires_at;
-    return poll.expired || new Date(expiresAt).getTime() < Date.now();
+    return poll.expired || isPollExpired(poll.expires_at);
   }, [poll]);
   const timeRemaining = useMemo(() => {
     if (!poll) {
@@ -171,13 +173,14 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
             className='button button-secondary'
             disabled={voteDisabled}
             onClick={handleVote}
+            type='button'
           >
             <FormattedMessage id='poll.vote' defaultMessage='Vote' />
           </button>
         )}
         {!showResults && (
           <>
-            <button className='poll__link' onClick={handleReveal}>
+            <button className='poll__link' onClick={handleReveal} type='button'>
               <FormattedMessage id='poll.reveal' defaultMessage='See results' />
             </button>{' '}
             ·{' '}
@@ -185,7 +188,11 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
         )}
         {showResults && !disabled && (
           <>
-            <button className='poll__link' onClick={handleRefresh}>
+            <button
+              className='poll__link'
+              onClick={handleRefresh}
+              type='button'
+            >
               <FormattedMessage id='poll.refresh' defaultMessage='Refresh' />
             </button>{' '}
             ·{' '}

app/javascript/mastodon/components/status.jsx

@@ -538,9 +538,8 @@ class Status extends ImmutablePureComponent {
     } else if (status.get('card') && !status.get('quote')) {
       media = (
         <Card
-          onOpenMedia={this.handleOpenMedia}
+          key={`${status.get('id')}-${status.get('edited_at')}`}
           card={status.get('card')}
-          compact
           sensitive={status.get('sensitive')}
         />
       );
@@ -553,7 +552,6 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-
     return (
       <Hotkeys handlers={handlers} focusable={!unfocusable}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>

app/javascript/mastodon/components/status/boost_button.tsx

@@ -8,13 +8,14 @@ import classNames from 'classnames';
 import { quoteComposeById } from '@/mastodon/actions/compose_typed';
 import { toggleReblog } from '@/mastodon/actions/interactions';
 import { openModal } from '@/mastodon/actions/modal';
+import { fetchStatus } from '@/mastodon/actions/statuses';
 import { quickBoosting } from '@/mastodon/initial_state';
 import type { ActionMenuItem } from '@/mastodon/models/dropdown_menu';
 import type { Status } from '@/mastodon/models/status';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import type { SomeRequired } from '@/mastodon/utils/types';
 
-import type { RenderItemFn, RenderItemFnHandlers } from '../dropdown_menu';
+import type { RenderItemFn } from '../dropdown_menu';
 import { Dropdown, DropdownMenuItemContent } from '../dropdown_menu';
 import { IconButton } from '../icon_button';
 
@@ -63,6 +64,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
       title={intl.formatMessage(meta ?? title)}
       icon='retweet'
       iconComponent={iconComponent}
+      className='status__action-bar__button'
       onClick={!disabled ? handleClick : undefined}
       counter={
         counters
@@ -74,18 +76,12 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
   );
 };
 
-const renderMenuItem: RenderItemFn<ActionMenuItem> = (
-  item,
-  index,
-  handlers,
-  focusRefCallback,
-) => (
+const renderMenuItem: RenderItemFn<ActionMenuItem> = (item, index, onClick) => (
   <ReblogMenuItem
     index={index}
     item={item}
-    handlers={handlers}
+    onClick={onClick}
     key={`${item.text}-${index}`}
-    focusRefCallback={focusRefCallback}
   />
 );
 
@@ -117,6 +113,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
 
   const statusId = status.get('id') as string;
   const wasBoosted = !!status.get('reblogged');
+  const quoteApproval = status.get('quote_approval');
 
   const showLoginPrompt = useCallback(() => {
     dispatch(
@@ -173,9 +170,16 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
         dispatch(toggleReblog(status.get('id'), true));
         return false;
       }
+
+      if (quoteApproval === null) {
+        dispatch(
+          fetchStatus(statusId, { forceFetch: true, alsoFetchContext: false }),
+        );
+      }
+
       return true;
     },
-    [dispatch, isLoggedIn, showLoginPrompt, status],
+    [dispatch, isLoggedIn, showLoginPrompt, status, quoteApproval, statusId],
   );
 
   return (
@@ -192,6 +196,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
           isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
         )}
         icon='retweet'
+        className='status__action-bar__button'
         iconComponent={boostIcon}
         counter={
           counters
@@ -208,16 +213,10 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
 interface ReblogMenuItemProps {
   item: ActionMenuItem;
   index: number;
-  handlers: RenderItemFnHandlers;
-  focusRefCallback?: (c: HTMLAnchorElement | HTMLButtonElement | null) => void;
+  onClick: React.MouseEventHandler;
 }
 
-const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
-  index,
-  item,
-  handlers,
-  focusRefCallback,
-}) => {
+const ReblogMenuItem: FC<ReblogMenuItemProps> = ({ index, item, onClick }) => {
   const { text, highlighted, disabled } = item;
 
   return (
@@ -228,10 +227,10 @@ const ReblogMenuItem: FC<ReblogMenuItemProps> = ({
       key={`${text}-${index}`}
     >
       <button
-        {...handlers}
-        ref={focusRefCallback}
+        onClick={onClick}
         aria-disabled={disabled}
         data-index={index}
+        type='button'
       >
         <DropdownMenuItemContent item={item} />
       </button>

app/javascript/mastodon/components/status/handled_link.tsx

@@ -27,16 +27,18 @@ export const HandledLink: FC<HandledLinkProps & ComponentProps<'a'>> = ({
 }) => {
   // Handle hashtags
   if (
-    text.startsWith('#') ||
-    prevText?.endsWith('#') ||
-    text.startsWith('＃') ||
-    prevText?.endsWith('＃')
+    (text.startsWith('#') ||
+      prevText?.endsWith('#') ||
+      text.startsWith('＃') ||
+      prevText?.endsWith('＃')) &&
+    !text.includes('%')
   ) {
     const hashtag = text.slice(1).trim();
+
     return (
       <Link
         className={classNames('mention hashtag', className)}
-        to={`/tags/${hashtag}`}
+        to={`/tags/${encodeURIComponent(hashtag)}`}
         rel='tag'
         data-menu-hashtag={hashtagAccountId}
       >

app/javascript/mastodon/components/status_action_bar/index.jsx

@@ -404,16 +404,21 @@ class StatusActionBar extends ImmutablePureComponent {
             <Dropdown
               scrollKey={scrollKey}
               status={status}
+              needsStatusRefresh={quickBoosting && status.get('quote_approval') === null}
               items={menu}
-              icon='ellipsis-h'
-              iconComponent={MoreHorizIcon}
               direction='right'
-              title={intl.formatMessage(messages.more)}
               onOpen={() => {
                 dismissQuoteHint();
                 return true;
               }}
-            />
+            >
+              <IconButton
+                className='status__action-bar__button'
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                title={intl.formatMessage(messages.more)}
+              />
+            </Dropdown>
           )}
         </RemoveQuoteHint>
       </div>

app/javascript/mastodon/components/status_action_bar/remove_quote_hint.tsx

@@ -44,6 +44,7 @@ export const RemoveQuoteHint: React.FC<{
 
     if (!firstHintId) {
       firstHintId = uniqueId;
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsOnlyHint(true);
     }
 
@@ -64,8 +65,8 @@ export const RemoveQuoteHint: React.FC<{
           flip
           offset={[12, 10]}
           placement='bottom-end'
-          target={anchorRef.current}
-          container={anchorRef.current}
+          target={anchorRef}
+          container={anchorRef}
         >
           {({ props, placement }) => (
             <div

app/javascript/mastodon/components/status_banner.tsx

@@ -49,6 +49,7 @@ export const StatusBanner: React.FC<{
 
       <button
         ref={buttonRef}
+        type='button'
         className='link-button'
         onClick={onClick}
         aria-describedby={descriptionId}

app/javascript/mastodon/components/status_quoted.tsx

@@ -73,7 +73,7 @@ const LimitedAccountHint: React.FC<{ accountId: string }> = ({ accountId }) => {
         defaultMessage='This account has been hidden by the moderators of {domain}.'
         values={{ domain }}
       />
-      <button onClick={reveal} className='link-button'>
+      <button onClick={reveal} className='link-button' type='button'>
         <FormattedMessage
           id='status.quote_error.limited_account_hint.action'
           defaultMessage='Show anyway'
@@ -129,7 +129,7 @@ const FilteredQuote: React.FC<{
   return (
     <>
       {message}
-      <button onClick={reveal} className='link-button'>
+      <button onClick={reveal} className='link-button' type='button'>
         <FormattedMessage
           id='status.quote_error.limited_account_hint.action'
           defaultMessage='Show anyway'

app/javascript/mastodon/containers/media_container.jsx

@@ -10,7 +10,7 @@ import ModalRoot from 'mastodon/components/modal_root';
 import { Poll } from 'mastodon/components/poll';
 import { Audio } from 'mastodon/features/audio';
 import Card from 'mastodon/features/status/components/card';
-import MediaModal from 'mastodon/features/ui/components/media_modal';
+import { MediaModal } from 'mastodon/features/ui/components/media_modal';
 import { Video } from 'mastodon/features/video';
 import { IntlProvider } from 'mastodon/locales';
 import { createPollFromServerJSON } from 'mastodon/models/poll';

app/javascript/mastodon/containers/scroll_container/scroll_context.tsx

@@ -86,6 +86,7 @@ export const ScrollContext: React.FC<ScrollContextProps> = ({
         ) =>
           // Hack to allow accessing scrollBehavior._stateStorage
           shouldUpdateScroll.call(
+            // eslint-disable-next-line react-hooks/immutability
             scrollBehavior,
             prevLocationContext,
             locationContext,

app/javascript/mastodon/features/about/components/rules.tsx

@@ -32,16 +32,38 @@ interface Rule extends BaseRule {
   translations?: Record<string, BaseRule>;
 }
 
+function getDefaultSelectedLocale(
+  currentUiLocale: string,
+  localeOptions: SelectItem[],
+) {
+  const preciseMatch = localeOptions.find(
+    (option) => option.value === currentUiLocale,
+  );
+  if (preciseMatch) {
+    return preciseMatch.value;
+  }
+
+  const partialLocale = currentUiLocale.split('-')[0];
+  const partialMatch = localeOptions.find(
+    (option) => option.value.split('-')[0] === partialLocale,
+  );
+
+  return partialMatch?.value ?? 'default';
+}
+
 export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
   const intl = useIntl();
-  const [locale, setLocale] = useState(intl.locale);
-  const rules = useAppSelector((state) => rulesSelector(state, locale));
   const localeOptions = useAppSelector((state) =>
     localeOptionsSelector(state, intl),
   );
+  const [selectedLocale, setSelectedLocale] = useState(() =>
+    getDefaultSelectedLocale(intl.locale, localeOptions),
+  );
+  const rules = useAppSelector((state) => rulesSelector(state, selectedLocale));
+
   const handleLocaleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
     (e) => {
-      setLocale(e.currentTarget.value);
+      setSelectedLocale(e.currentTarget.value);
     },
     [],
   );
@@ -74,25 +96,29 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
         ))}
       </ol>
 
-      <div className='rules-languages'>
-        <label htmlFor='language-select'>
-          <FormattedMessage
-            id='about.language_label'
-            defaultMessage='Language'
-          />
-        </label>
-        <select onChange={handleLocaleChange} id='language-select'>
-          {localeOptions.map((option) => (
-            <option
-              key={option.value}
-              value={option.value}
-              selected={option.value === locale}
-            >
-              {option.text}
-            </option>
-          ))}
-        </select>
-      </div>
+      {localeOptions.length > 1 && (
+        <div className='rules-languages'>
+          <label htmlFor='language-select'>
+            <FormattedMessage
+              id='about.language_label'
+              defaultMessage='Language'
+            />
+          </label>
+          <div className='select-wrapper'>
+            <select onChange={handleLocaleChange} id='language-select'>
+              {localeOptions.map((option) => (
+                <option
+                  key={option.value}
+                  value={option.value}
+                  selected={option.value === selectedLocale}
+                >
+                  {option.text}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
     </Section>
   );
 };
@@ -145,9 +171,13 @@ const localeOptionsSelector = createSelector(
       },
     };
     // Use the default locale as a target to translate language names.
-    const intlLocale = new Intl.DisplayNames(intl.locale, {
-      type: 'language',
-    });
+    const intlLocale =
+      // Intl.DisplayNames can be undefined in old browsers
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      Intl.DisplayNames &&
+      (new Intl.DisplayNames(intl.locale, {
+        type: 'language',
+      }) as Intl.DisplayNames | undefined);
     for (const { translations } of rules) {
       for (const locale in translations) {
         if (langs[locale]) {
@@ -155,7 +185,7 @@ const localeOptionsSelector = createSelector(
         }
         langs[locale] = {
           value: locale,
-          text: intlLocale.of(locale) ?? locale,
+          text: intlLocale?.of(locale) ?? locale,
         };
       }
     }

app/javascript/mastodon/features/about/components/section.tsx

@@ -31,6 +31,7 @@ export const Section: FC<SectionProps> = ({
         className='about__section__title'
         tabIndex={0}
         onClick={handleClick}
+        type='button'
       >
         <Icon
           id={collapsed ? 'chevron-right' : 'chevron-down'}

app/javascript/mastodon/features/account/components/domain_pill.tsx

@@ -37,6 +37,7 @@ export const DomainPill: React.FC<{
         onClick={handleClick}
         aria-expanded={open}
         aria-controls={accessibilityId}
+        type='button'
       >
         {domain}
       </button>
@@ -154,6 +155,7 @@ export const DomainPill: React.FC<{
                       <button
                         onClick={handleExpandClick}
                         className='link-button'
+                        type='button'
                       >
                         {x}
                       </button>
@@ -169,6 +171,7 @@ export const DomainPill: React.FC<{
                       <button
                         onClick={handleExpandClick}
                         className='link-button'
+                        type='button'
                       >
                         {x}
                       </button>

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

@@ -24,12 +24,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
         </div>
 
         <div className='follow-request-banner__action'>
-          <button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
+          <button type='button' className='button button-secondary button--confirmation' onClick={onAuthorize}>
             <Icon id='check' icon={CheckIcon} />
             <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
           </button>
 
-          <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
+          <button type='button' className='button button-secondary button--destructive' onClick={onReject}>
             <Icon id='times' icon={CloseIcon} />
             <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
           </button>

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -101,16 +101,17 @@ const Preview: React.FC<{
   position: FocalPoint;
   onPositionChange: (arg0: FocalPoint) => void;
 }> = ({ mediaId, position, onPositionChange }) => {
-  const draggingRef = useRef<boolean>(false);
   const nodeRef = useRef<HTMLImageElement | HTMLVideoElement | null>(null);
 
+  const [dragging, setDragging] = useState<'started' | 'moving' | null>(null);
+
   const [x, y] = position;
   const style = useSpring({
     to: {
       left: `${x * 100}%`,
       top: `${y * 100}%`,
     },
-    immediate: draggingRef.current,
+    immediate: dragging === 'moving',
   });
   const media = useAppSelector((state) =>
     (
@@ -123,8 +124,6 @@ const Preview: React.FC<{
     me ? state.accounts.get(me) : undefined,
   );
 
-  const [dragging, setDragging] = useState(false);
-
   const setRef = useCallback(
     (e: HTMLImageElement | HTMLVideoElement | null) => {
       nodeRef.current = e;
@@ -140,20 +139,20 @@ const Preview: React.FC<{
 
       const handleMouseMove = (e: MouseEvent) => {
         const { x, y } = getPointerPosition(nodeRef.current, e);
-        draggingRef.current = true; // This will disable the animation for quicker feedback, only do this if the mouse actually moves
+
+        setDragging('moving'); // This will disable the animation for quicker feedback, only do this if the mouse actually moves
         onPositionChange([x, y]);
       };
 
       const handleMouseUp = () => {
-        setDragging(false);
-        draggingRef.current = false;
+        setDragging(null);
         document.removeEventListener('mouseup', handleMouseUp);
         document.removeEventListener('mousemove', handleMouseMove);
       };
 
       const { x, y } = getPointerPosition(nodeRef.current, e.nativeEvent);
 
-      setDragging(true);
+      setDragging('started');
       onPositionChange([x, y]);
 
       document.addEventListener('mouseup', handleMouseUp);
@@ -330,7 +329,7 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
         });
     }, [dispatch, setIsSaving, mediaId, onClose, position, description]);
 
-    const handleKeyUp = useCallback(
+    const handleKeyDown = useCallback(
       (e: React.KeyboardEvent) => {
         if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
           e.preventDefault();
@@ -457,7 +456,7 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
                   id='description'
                   value={isDetecting ? ' ' : description}
                   onChange={handleDescriptionChange}
-                  onKeyUp={handleKeyUp}
+                  onKeyDown={handleKeyDown}
                   lang={lang}
                   placeholder={intl.formatMessage(
                     type === 'audio'
@@ -489,6 +488,7 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
                   className='link-button'
                   onClick={handleDetectClick}
                   disabled={type !== 'image' || isDetecting}
+                  type='button'
                 >
                   <FormattedMessage
                     id='alt_text_modal.add_text_from_image'

app/javascript/mastodon/features/annual_report/index.tsx

@@ -31,15 +31,13 @@ export const AnnualReport: React.FC<{
   year: string;
 }> = ({ year }) => {
   const [response, setResponse] = useState<AnnualReportResponse | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const currentAccount = useAppSelector((state) =>
     me ? state.accounts.get(me) : undefined,
   );
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    setLoading(true);
-
     apiRequestGet<AnnualReportResponse>(`v1/annual_reports/${year}`)
       .then((data) => {
         dispatch(importFetchedStatuses(data.statuses));

app/javascript/mastodon/features/audio/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState, useId } from 'react';
+import { useEffect, useRef, useCallback, useState } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
@@ -22,6 +22,8 @@ import { useAudioVisualizer } from 'mastodon/hooks/useAudioVisualizer';
 import { displayMedia, useBlurhash } from 'mastodon/initial_state';
 import { playerSettings } from 'mastodon/settings';
 
+import { AudioVisualizer } from './visualizer';
+
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
   pause: { id: 'video.pause', defaultMessage: 'Pause' },
@@ -116,7 +118,6 @@ export const Audio: React.FC<{
   const seekRef = useRef<HTMLDivElement>(null);
   const volumeRef = useRef<HTMLDivElement>(null);
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
-  const accessibilityId = useId();
 
   const { audioContextRef, sourceRef, gainNodeRef, playAudio, pauseAudio } =
     useAudioContext({ audioElementRef: audioRef });
@@ -538,19 +539,6 @@ export const Audio: React.FC<{
     [togglePlay, toggleMute],
   );
 
-  const springForBand0 = useSpring({
-    to: { r: 50 + (frequencyBands[0] ?? 0) * 10 },
-    config: config.wobbly,
-  });
-  const springForBand1 = useSpring({
-    to: { r: 50 + (frequencyBands[1] ?? 0) * 10 },
-    config: config.wobbly,
-  });
-  const springForBand2 = useSpring({
-    to: { r: 50 + (frequencyBands[2] ?? 0) * 10 },
-    config: config.wobbly,
-  });
-
   const progress = Math.min((currentTime / loadedDuration) * 100, 100);
   const effectivelyMuted = muted || volume === 0;
 
@@ -641,81 +629,7 @@ export const Audio: React.FC<{
         </div>
 
         <div className='audio-player__controls__play'>
-          <svg
-            className='audio-player__visualizer'
-            viewBox='0 0 124 124'
-            xmlns='http://www.w3.org/2000/svg'
-          >
-            <animated.circle
-              opacity={0.5}
-              cx={57}
-              cy={62.5}
-              r={springForBand0.r}
-              fill='var(--player-accent-color)'
-            />
-            <animated.circle
-              opacity={0.5}
-              cx={65}
-              cy={57.5}
-              r={springForBand1.r}
-              fill='var(--player-accent-color)'
-            />
-            <animated.circle
-              opacity={0.5}
-              cx={63}
-              cy={66.5}
-              r={springForBand2.r}
-              fill='var(--player-accent-color)'
-            />
-
-            <g clipPath={`url(#${accessibilityId}-clip)`}>
-              <rect
-                x={14}
-                y={14}
-                width={96}
-                height={96}
-                fill={`url(#${accessibilityId}-pattern)`}
-              />
-              <rect
-                x={14}
-                y={14}
-                width={96}
-                height={96}
-                fill='var(--player-background-color'
-                opacity={0.45}
-              />
-            </g>
-
-            <defs>
-              <pattern
-                id={`${accessibilityId}-pattern`}
-                patternContentUnits='objectBoundingBox'
-                width='1'
-                height='1'
-              >
-                <use href={`#${accessibilityId}-image`} />
-              </pattern>
-
-              <clipPath id={`${accessibilityId}-clip`}>
-                <rect
-                  x={14}
-                  y={14}
-                  width={96}
-                  height={96}
-                  rx={48}
-                  fill='white'
-                />
-              </clipPath>
-
-              <image
-                id={`${accessibilityId}-image`}
-                href={poster}
-                width={1}
-                height={1}
-                preserveAspectRatio='none'
-              />
-            </defs>
-          </svg>
+          <AudioVisualizer frequencyBands={frequencyBands} poster={poster} />
 
           <button
             type='button'

app/javascript/mastodon/features/audio/visualizer.tsx

@@ -0,0 +1,100 @@
+import { useId } from 'react';
+import type { FC } from 'react';
+
+import { animated, config, useSpring } from '@react-spring/web';
+
+interface AudioVisualizerProps {
+  frequencyBands?: number[];
+  poster?: string;
+}
+
+export const AudioVisualizer: FC<AudioVisualizerProps> = ({
+  frequencyBands = [],
+  poster,
+}) => {
+  const accessibilityId = useId();
+
+  const springForBand0 = useSpring({
+    to: { r: 50 + (frequencyBands[0] ?? 0) * 10 },
+    config: config.wobbly,
+  });
+  const springForBand1 = useSpring({
+    to: { r: 50 + (frequencyBands[1] ?? 0) * 10 },
+    config: config.wobbly,
+  });
+  const springForBand2 = useSpring({
+    to: { r: 50 + (frequencyBands[2] ?? 0) * 10 },
+    config: config.wobbly,
+  });
+
+  return (
+    <svg
+      className='audio-player__visualizer'
+      viewBox='0 0 124 124'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <animated.circle
+        opacity={0.5}
+        cx={57}
+        cy={62.5}
+        r={springForBand0.r}
+        fill='var(--player-accent-color)'
+      />
+      <animated.circle
+        opacity={0.5}
+        cx={65}
+        cy={57.5}
+        r={springForBand1.r}
+        fill='var(--player-accent-color)'
+      />
+      <animated.circle
+        opacity={0.5}
+        cx={63}
+        cy={66.5}
+        r={springForBand2.r}
+        fill='var(--player-accent-color)'
+      />
+
+      <g clipPath={`url(#${accessibilityId}-clip)`}>
+        <rect
+          x={14}
+          y={14}
+          width={96}
+          height={96}
+          fill={`url(#${accessibilityId}-pattern)`}
+        />
+        <rect
+          x={14}
+          y={14}
+          width={96}
+          height={96}
+          fill='var(--player-background-color'
+          opacity={0.45}
+        />
+      </g>
+
+      <defs>
+        <pattern
+          id={`${accessibilityId}-pattern`}
+          patternContentUnits='objectBoundingBox'
+          width='1'
+          height='1'
+        >
+          <use href={`#${accessibilityId}-image`} />
+        </pattern>
+
+        <clipPath id={`${accessibilityId}-clip`}>
+          <rect x={14} y={14} width={96} height={96} rx={48} fill='white' />
+        </clipPath>
+
+        <image
+          id={`${accessibilityId}-image`}
+          href={poster}
+          width={1}
+          height={1}
+          preserveAspectRatio='none'
+        />
+      </defs>
+    </svg>
+  );
+};

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

@@ -38,7 +38,7 @@ class Blocks extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     this.props.dispatch(fetchBlocks());
   }
 

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -64,6 +64,7 @@ class ComposeForm extends ImmutablePureComponent {
     onSuggestionSelected: PropTypes.func.isRequired,
     onChangeSpoilerText: PropTypes.func.isRequired,
     onPaste: PropTypes.func.isRequired,
+    onDrop: PropTypes.func.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
     autoFocus: PropTypes.bool,
     withoutNavigation: PropTypes.bool,
@@ -102,6 +103,7 @@ class ComposeForm extends ImmutablePureComponent {
   handleKeyDownPost = (e) => {
     if (e.key.toLowerCase() === 'enter' && (e.ctrlKey || e.metaKey)) {
         this.handleSubmit();
+        e.preventDefault();
     }
     this.blurOnEscape(e);
   };
@@ -123,11 +125,10 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   canSubmit = () => {
-    const { isSubmitting, isChangingUpload, isUploading, anyMedia, maxChars } = this.props;
+    const { isSubmitting, isChangingUpload, isUploading, maxChars } = this.props;
     const fulltext = this.getFulltextForCharacterCounting();
-    const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0;
 
-    return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxChars || (isOnlyWhitespace && !anyMedia));
+    return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxChars);
   };
 
   handleSubmit = (e) => {
@@ -141,7 +142,10 @@ class ComposeForm extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onSubmit(missingAltTextModal && this.props.missingAltText && this.props.privacy !== 'direct');
+    this.props.onSubmit({
+      missingAltText: missingAltTextModal && this.props.missingAltText && this.props.privacy !== 'direct',
+      quoteToPrivate: this.props.quoteToPrivate,
+    });
 
     if (e) {
       e.preventDefault();
@@ -246,7 +250,7 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, onPaste, autoFocus, withoutNavigation, maxChars, isSubmitting } = this.props;
+    const { intl, onPaste, onDrop, autoFocus, withoutNavigation, maxChars, isSubmitting } = this.props;
     const { highlighted } = this.state;
 
     return (
@@ -302,6 +306,7 @@ class ComposeForm extends ImmutablePureComponent {
             onSuggestionsClearRequested={this.onSuggestionsClearRequested}
             onSuggestionSelected={this.onSuggestionSelected}
             onPaste={onPaste}
+            onDrop={onDrop}
             autoFocus={autoFocus}
             lang={this.props.lang}
             className='compose-form__input'

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx

@@ -61,8 +61,14 @@ class ModifierPickerMenu extends PureComponent {
     this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
   };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.active) {
+  componentDidMount() {
+    if (this.props.active) {
+      this.attachListeners();
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.active) {
       this.attachListeners();
     } else {
       this.removeListeners();

app/javascript/mastodon/features/compose/components/language_dropdown.tsx

@@ -55,6 +55,8 @@ const getFrequentlyUsedLanguages = createSelector(
       .toArray(),
 );
 
+const isTextLongEnoughForGuess = (text: string) => text.length > 20;
+
 const LanguageDropdownMenu: React.FC<{
   value: string;
   guess?: string;
@@ -375,14 +377,27 @@ export const LanguageDropdown: React.FC = () => {
   );
 
   useEffect(() => {
-    if (text.length > 20) {
+    if (isTextLongEnoughForGuess(text)) {
       debouncedGuess(text, setGuess);
     } else {
       debouncedGuess.cancel();
-      setGuess('');
     }
   }, [text, setGuess]);
 
+  // Keeping track of the previous render's text length here
+  // to be able to reset the guess when the text length drops
+  // below the threshold needed to make a guess
+  const [wasLongText, setWasLongText] = useState(() =>
+    isTextLongEnoughForGuess(text),
+  );
+  if (wasLongText !== isTextLongEnoughForGuess(text)) {
+    setWasLongText(isTextLongEnoughForGuess(text));
+
+    if (wasLongText) {
+      setGuess('');
+    }
+  }
+
   return (
     <div ref={targetRef}>
       <button

app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx

@@ -1,158 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages } from 'react-intl';
-
-import classNames from 'classnames';
-
-import Overlay from 'react-overlays/Overlay';
-
-import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
-import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
-import { DropdownSelector } from 'mastodon/components/dropdown_selector';
-import { Icon }  from 'mastodon/components/icon';
-
-export const messages = defineMessages({
-  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  public_long: { id: 'privacy.public.long', defaultMessage: 'Anyone on and off Mastodon' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Quiet public' },
-  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Hidden from Mastodon search results, trending, and public timelines' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
-  private_long: { id: 'privacy.private.long', defaultMessage: 'Only your followers' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Specific people' },
-  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Everyone mentioned in the post' },
-  change_privacy: { id: 'privacy.change', defaultMessage: 'Change post privacy' },
-  unlisted_extra: { id: 'privacy.unlisted.additional', defaultMessage: 'This behaves exactly like public, except the post will not appear in live feeds or hashtags, explore, or Mastodon search, even if you are opted-in account-wide.' },
-});
-
-class PrivacyDropdown extends PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    noDirect: PropTypes.bool,
-    container: PropTypes.func,
-    disabled: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    open: false,
-    placement: 'bottom',
-  };
-
-  handleToggle = () => {
-    if (this.state.open && this.activeElement) {
-      this.activeElement.focus({ preventScroll: true });
-    }
-
-    this.setState({ open: !this.state.open });
-  };
-
-  handleKeyDown = e => {
-    switch(e.key) {
-    case 'Escape':
-      this.handleClose();
-      break;
-    }
-  };
-
-  handleMouseDown = () => {
-    if (!this.state.open) {
-      this.activeElement = document.activeElement;
-    }
-  };
-
-  handleButtonKeyDown = (e) => {
-    switch(e.key) {
-    case ' ':
-    case 'Enter':
-      this.handleMouseDown();
-      break;
-    }
-  };
-
-  handleClose = () => {
-    if (this.state.open && this.activeElement) {
-      this.activeElement.focus({ preventScroll: true });
-    }
-    this.setState({ open: false });
-  };
-
-  handleChange = value => {
-    this.props.onChange(value);
-  };
-
-  UNSAFE_componentWillMount () {
-    const { intl: { formatMessage } } = this.props;
-
-    this.options = [
-      { icon: 'globe', iconComponent: PublicIcon, value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
-      { icon: 'unlock', iconComponent: QuietTimeIcon,  value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long), extra: formatMessage(messages.unlisted_extra) },
-      { icon: 'lock', iconComponent: LockIcon, value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
-    ];
-
-    if (!this.props.noDirect) {
-      this.options.push(
-        { icon: 'at', iconComponent: AlternateEmailIcon, value: 'direct', text: formatMessage(messages.direct_short), meta: formatMessage(messages.direct_long) },
-      );
-    }
-  }
-
-  setTargetRef = c => {
-    this.target = c;
-  };
-
-  findTarget = () => {
-    return this.target;
-  };
-
-  handleOverlayEnter = (state) => {
-    this.setState({ placement: state.placement });
-  };
-
-  render () {
-    const { value, container, disabled, intl } = this.props;
-    const { open, placement } = this.state;
-
-    const valueOption = this.options.find(item => item.value === value);
-
-    return (
-      <div ref={this.setTargetRef} onKeyDown={this.handleKeyDown}>
-        <button
-          type='button'
-          title={intl.formatMessage(messages.change_privacy)}
-          aria-expanded={open}
-          onClick={this.handleToggle}
-          onMouseDown={this.handleMouseDown}
-          onKeyDown={this.handleButtonKeyDown}
-          disabled={disabled}
-          className={classNames('dropdown-button', { active: open })}
-        >
-          <Icon id={valueOption.icon} icon={valueOption.iconComponent} />
-          <span className='dropdown-button__label'>{valueOption.text}</span>
-        </button>
-
-        <Overlay show={open} offset={[5, 5]} placement={placement} flip target={this.findTarget} container={container} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
-          {({ props, placement }) => (
-            <div {...props}>
-              <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
-                <DropdownSelector
-                  items={this.options}
-                  value={value}
-                  onClose={this.handleClose}
-                  onChange={this.handleChange}
-                />
-              </div>
-            </div>
-          )}
-        </Overlay>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(PrivacyDropdown);

app/javascript/mastodon/features/compose/components/privacy_dropdown.tsx

@@ -0,0 +1,199 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import type { OverlayProps } from 'react-overlays/Overlay';
+import Overlay from 'react-overlays/Overlay';
+
+import type { StatusVisibility } from '@/mastodon/api_types/statuses';
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import LockIcon from '@/material-icons/400-24px/lock.svg?react';
+import PublicIcon from '@/material-icons/400-24px/public.svg?react';
+import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import { DropdownSelector } from 'mastodon/components/dropdown_selector';
+import { Icon } from 'mastodon/components/icon';
+
+export const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  public_long: {
+    id: 'privacy.public.long',
+    defaultMessage: 'Anyone on and off Mastodon',
+  },
+  unlisted_short: {
+    id: 'privacy.unlisted.short',
+    defaultMessage: 'Quiet public',
+  },
+  unlisted_long: {
+    id: 'privacy.unlisted.long',
+    defaultMessage:
+      'Hidden from Mastodon search results, trending, and public timelines',
+  },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers' },
+  private_long: {
+    id: 'privacy.private.long',
+    defaultMessage: 'Only your followers',
+  },
+  direct_short: {
+    id: 'privacy.direct.short',
+    defaultMessage: 'Specific people',
+  },
+  direct_long: {
+    id: 'privacy.direct.long',
+    defaultMessage: 'Everyone mentioned in the post',
+  },
+  change_privacy: {
+    id: 'privacy.change',
+    defaultMessage: 'Change post privacy',
+  },
+  unlisted_extra: {
+    id: 'privacy.unlisted.additional',
+    defaultMessage:
+      'This behaves exactly like public, except the post will not appear in live feeds or hashtags, explore, or Mastodon search, even if you are opted-in account-wide.',
+  },
+});
+
+interface PrivacyDropdownProps {
+  value: StatusVisibility;
+  onChange: (value: StatusVisibility) => void;
+  noDirect?: boolean;
+  container?: OverlayProps['container'];
+  disabled?: boolean;
+}
+
+const PrivacyDropdown: React.FC<PrivacyDropdownProps> = ({
+  value,
+  onChange,
+  noDirect,
+  container,
+  disabled,
+}) => {
+  const intl = useIntl();
+  const overlayTargetRef = useRef<HTMLDivElement | null>(null);
+  const previousFocusTargetRef = useRef<HTMLElement | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = useCallback(() => {
+    if (isOpen && previousFocusTargetRef.current) {
+      previousFocusTargetRef.current.focus({ preventScroll: true });
+    }
+    setIsOpen(false);
+  }, [isOpen]);
+
+  const handleToggle = useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    }
+    setIsOpen((prev) => !prev);
+  }, [handleClose, isOpen]);
+
+  const registerPreviousFocusTarget = useCallback(() => {
+    if (!isOpen) {
+      previousFocusTargetRef.current = document.activeElement as HTMLElement;
+    }
+  }, [isOpen]);
+
+  const handleButtonKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ([' ', 'Enter'].includes(e.key)) {
+        registerPreviousFocusTarget();
+      }
+    },
+    [registerPreviousFocusTarget],
+  );
+
+  const options = [
+    {
+      icon: 'globe',
+      iconComponent: PublicIcon,
+      value: 'public',
+      text: intl.formatMessage(messages.public_short),
+      meta: intl.formatMessage(messages.public_long),
+    },
+    {
+      icon: 'unlock',
+      iconComponent: QuietTimeIcon,
+      value: 'unlisted',
+      text: intl.formatMessage(messages.unlisted_short),
+      meta: intl.formatMessage(messages.unlisted_long),
+      extra: intl.formatMessage(messages.unlisted_extra),
+    },
+    {
+      icon: 'lock',
+      iconComponent: LockIcon,
+      value: 'private',
+      text: intl.formatMessage(messages.private_short),
+      meta: intl.formatMessage(messages.private_long),
+    },
+  ];
+
+  if (!noDirect) {
+    options.push({
+      icon: 'at',
+      iconComponent: AlternateEmailIcon,
+      value: 'direct',
+      text: intl.formatMessage(messages.direct_short),
+      meta: intl.formatMessage(messages.direct_long),
+    });
+  }
+
+  const selectedOption =
+    options.find((item) => item.value === value) ?? options.at(0);
+
+  return (
+    <div ref={overlayTargetRef}>
+      <button
+        type='button'
+        title={intl.formatMessage(messages.change_privacy)}
+        aria-expanded={isOpen}
+        onClick={handleToggle}
+        onMouseDown={registerPreviousFocusTarget}
+        onKeyDown={handleButtonKeyDown}
+        disabled={disabled}
+        className={classNames('dropdown-button', { active: isOpen })}
+      >
+        {selectedOption && (
+          <>
+            <Icon
+              id={selectedOption.icon}
+              icon={selectedOption.iconComponent}
+            />
+            <span className='dropdown-button__label'>
+              {selectedOption.text}
+            </span>
+          </>
+        )}
+      </button>
+
+      <Overlay
+        show={isOpen}
+        offset={[5, 5]}
+        placement='bottom'
+        flip
+        target={overlayTargetRef}
+        container={container}
+        popperConfig={{ strategy: 'fixed' }}
+      >
+        {({ props, placement }) => (
+          <div {...props}>
+            <div
+              className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}
+            >
+              <DropdownSelector
+                items={options}
+                value={value}
+                onClose={handleClose}
+                // @ts-expect-error DropdownSelector doesn't yet return the correct type for onChange
+                onChange={onChange}
+              />
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default PrivacyDropdown;