Merge branch 'main' into detect-language

# Conflicts:
#	spec/services/translate_status_service_spec.rb

.devcontainer/compose.yaml

@@ -69,7 +69,7 @@ services:
         hard: -1
 
   libretranslate:
-    image: libretranslate/libretranslate:v1.6.0
+    image: libretranslate/libretranslate:v1.6.1
     restart: unless-stopped
     volumes:
       - lt-data:/home/libretranslate/.local

.eslintrc.js

@@ -64,7 +64,6 @@ module.exports = defineConfig({
     'indent': ['error', 2],
     'jsx-quotes': ['error', 'prefer-single'],
     'semi': ['error', 'always'],
-    'no-case-declarations': 'off',
     'no-catch-shadow': 'error',
     'no-console': [
       'warn',

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

@@ -0,0 +1,69 @@
+name: Crowdin / Download translations (stable branches)
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  download-translations-stable:
+    runs-on: ubuntu-latest
+    if: github.repository == 'mastodon/mastodon'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Increase Git http.postBuffer
+        # This is needed due to a bug in Ubuntu's cURL version?
+        # See https://github.com/orgs/community/discussions/55820
+        run: |
+          git config --global http.version HTTP/1.1
+          git config --global http.postBuffer 157286400
+
+      # Download the translation files from Crowdin
+      - name: crowdin action
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: false
+          upload_translations: false
+          download_translations: true
+          crowdin_branch_name: ${{ github.base_ref || github.ref_name }}
+          push_translations: false
+          create_pull_request: false
+        env:
+          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+      # As the files are extracted from a Docker container, they belong to root:root
+      # We need to fix this before the next steps
+      - name: Fix file permissions
+        run: sudo chown -R runner:docker .
+
+      # This is needed to run the normalize step
+      - name: Set up Ruby environment
+        uses: ./.github/actions/setup-ruby
+
+      - name: Run i18n normalize task
+        run: bundle exec i18n-tasks normalize
+
+      # Create or update the pull request
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7.0.5
+        with:
+          commit-message: 'New Crowdin translations'
+          title: 'New Crowdin Translations for ${{ github.base_ref || github.ref_name }} (automated)'
+          author: 'GitHub Actions <noreply@github.com>'
+          body: |
+            New Crowdin translations, automated with GitHub Actions
+
+            See `.github/workflows/crowdin-download.yml`
+
+            This PR will be updated every day with new translations.
+
+            Due to a limitation in GitHub Actions, checks are not running on this PR without manual action.
+            If you want to run the checks, then close and re-open it.
+          branch: i18n/crowdin/translations-${{ github.base_ref || github.ref_name }}
+          base: ${{ github.base_ref || github.ref_name }}
+          labels: i18n

.github/workflows/crowdin-download.yml

@@ -52,7 +52,7 @@ jobs:
 
       # Create or update the pull request
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7.0.1
+        uses: peter-evans/create-pull-request@v7.0.5
         with:
           commit-message: 'New Crowdin translations'
           title: 'New Crowdin Translations (automated)'

.github/workflows/crowdin-upload.yml

@@ -31,7 +31,7 @@ jobs:
           upload_sources: true
           upload_translations: false
           download_translations: false
-          crowdin_branch_name: main
+          crowdin_branch_name: ${{ github.base_ref || github.ref_name }}
 
         env:
           CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}

.nvmrc

@@ -1 +1 @@
-20.17
+20.18

.rubocop/strict.yml

@@ -7,8 +7,13 @@ RSpec/Focus: # Require full spec run on CI
   Exclude: []
 
 Rails/Output: # Remove any `puts` debugging
+  inherit_mode:
+    merge:
+      - Include
   Enabled: true
   Exclude: []
+  Include:
+    - spec/**/*.rb
 
 Rails/FindEach: # Using `each` could impact performance, use `find_each`
   Enabled: true

CHANGELOG.md

@@ -10,21 +10,25 @@ The following changelog entries focus on changes visible to users, administrator
 
 - **Add confirmation interstitial instead of silently redirecting logged-out visitors to remote resources** (#27792, #28902, and #30651 by @ClearlyClaire and @Gargron)\
   This fixes a longstanding open redirect in Mastodon, at the cost of added friction when local links to remote resources are shared.
+- Fix ReDoS vulnerability on some Ruby versions ([GHSA-jpxp-r43f-rhvx](https://github.com/mastodon/mastodon/security/advisories/GHSA-jpxp-r43f-rhvx))
+- Change `form-action` Content-Security-Policy directive to be more restrictive (#26897 by @ClearlyClaire)
+- Update dependencies
 
 ### Added
 
-- **Add experimental server-side notification grouping** (#29889, #30576, #30685, #30688, #30707, #30776, #30779, #30781, #30440, #31062, #31098, #31076, #31111, #31123, #31223, #31214, #31224, #31299, #31325, #31347, #31304, #31326, #31384, #31403, #31433, #31509, #31486, and #31513 by @ClearlyClaire, @mgmn, and @renchap)\
+- **Add server-side notification grouping** (#29889, #30576, #30685, #30688, #30707, #30776, #30779, #30781, #30440, #31062, #31098, #31076, #31111, #31123, #31223, #31214, #31224, #31299, #31325, #31347, #31304, #31326, #31384, #31403, #31433, #31509, #31486, #31513, #31592, #31594, #31638, #31746, #31652, #31709, #31725, #31745, #31613, #31657, #31840, #31610, #31929, #32089 and #32085 by @ClearlyClaire, @Gargron, @mgmn, and @renchap)\
   Group notifications of the same type for the same target, so that your notifications no longer get cluttered by boost and favorite notifications as soon as a couple of your posts get traction.\
   This is done server-side so that clients can efficiently get relevant groups without having to go through numerous pages of individual notifications.\
   As part of this, the visual design of the entire notifications feature has been revamped.\
   This feature is intended to eventually replace the existing notifications column, but for this first beta, users will have to enable it in the “Experimental features” section of the notifications column settings.\
   The API is not final yet, but it consists of:
   - a new `group_key` attribute to `Notification` entities
-  - `GET /api/v2_alpha/notifications`: https://docs.joinmastodon.org/methods/notifications_alpha/#get-grouped
-  - `GET /api/v2_alpha/notifications/:group_key`: https://docs.joinmastodon.org/methods/notifications_alpha/#get-notification-group
-  - `POST /api/v2_alpha/notifications/:group_key/dimsiss`: https://docs.joinmastodon.org/methods/notifications_alpha/#dismiss-group
-  - `GET /api/v2_alpha/notifications/:unread_count`: https://docs.joinmastodon.org/methods/notifications_alpha/#unread-group-count
-- **Add notification policies, filtered notifications and notification requests** (#29366, #29529, #29433, #29565, #29567, #29572, #29575, #29588, #29646, #29652, #29658, #29666, #29693, #29699, #29737, #29706, #29570, #29752, #29810, #29826, #30114, #30251, #30559, #29868, #31008, #31011, #30996, #31149, #31220, #31222, #31225, #31242, #31262, #31250, #31273, #31310, #31316, #31322, #31329, #31324, #31331, #31343, #31342, #31309, #31358, #31378, #31406, #31256, #31456, #31419, #31457, #31508, #31540, and #31541 by @ClearlyClaire, @Gargron, @TheEssem, @mgmn, @oneiros, and @renchap)\
+  - `GET /api/v2/notifications`: https://docs.joinmastodon.org/methods/grouped_notifications/#get-grouped
+  - `GET /api/v2/notifications/:group_key`: https://docs.joinmastodon.org/methods/grouped_notifications/#get-notification-group
+  - `GET /api/v2/notifications/:group_key/accounts`: https://docs.joinmastodon.org/methods/grouped_notifications/#get-group-accounts
+  - `POST /api/v2/notifications/:group_key/dimsiss`: https://docs.joinmastodon.org/methods/grouped_notifications/#dismiss-group
+  - `GET /api/v2/notifications/:unread_count`: https://docs.joinmastodon.org/methods/grouped_notifications/#unread-group-count
+- **Add notification policies, filtered notifications and notification requests** (#29366, #29529, #29433, #29565, #29567, #29572, #29575, #29588, #29646, #29652, #29658, #29666, #29693, #29699, #29737, #29706, #29570, #29752, #29810, #29826, #30114, #30251, #30559, #29868, #31008, #31011, #30996, #31149, #31220, #31222, #31225, #31242, #31262, #31250, #31273, #31310, #31316, #31322, #31329, #31324, #31331, #31343, #31342, #31309, #31358, #31378, #31406, #31256, #31456, #31419, #31457, #31508, #31540, #31541, #31723 and #32062 by @ClearlyClaire, @Gargron, @TheEssem, @mgmn, @oneiros, and @renchap)\
   The old “Block notifications from non-followers”, “Block notifications from people you don't follow” and “Block direct messages from people you don't follow” notification settings have been replaced by a new set of settings found directly in the notification column.\
   You can now separately filter or drop notifications from people you don't follow, people who don't follow you, accounts created within the past 30 days, as well as unsolicited private mentions, and accounts limited by the moderation.\
   Instead of being outright dropped, notifications that you chose to filter are put in a separate “Filtered notifications” box that you can review separately without it clogging your main notifications.\
@@ -57,26 +61,35 @@ The following changelog entries focus on changes visible to users, administrator
 - **Add timeline of public posts about a trending link** (#30381 and #30840 by @Gargron)\
   You can now see public posts mentioning currently-trending articles from people who have opted into discovery features.\
   This adds a new REST API endpoint: https://docs.joinmastodon.org/methods/timelines/#link
-- **Add author highlight for news articles whose authors are on the fediverse** (#30398, #30670, #30521, and #30846 by @Gargron)\
+- **Add author highlight for news articles whose authors are on the fediverse** (#30398, #30670, #30521, #30846, #31819, and #31900 by @Gargron and @oneiros)\
   This adds a mechanism to [highlight the author of news articles](https://blog.joinmastodon.org/2024/07/highlighting-journalism-on-mastodon/) shared on Mastodon.\
   Articles hosted outside the fediverse can indicate a fediverse author with a meta tag:
   ```html
   <meta name="fediverse:creator" content="username@domain" />
   ```
   On the API side, this is represented by a new `authors` attribute to the `PreviewCard` entity: https://docs.joinmastodon.org/entities/PreviewCard/#authors\
-  Note that this feature is still work in progress and the tagging format and verification mechanisms may change in future releases.
+  Users can allow arbitrary domains to use `fediverse:creator` to credit them by visiting `/settings/verification`.\
+  This is federated as a new `attributionDomains` property in the `http://joinmastodon.org/ns` namespace, containing an array of domain names: https://docs.joinmastodon.org/spec/activitypub/#properties-used-1
 - **Add in-app notifications for moderation actions and warnings** (#30065, #30082, and #30081 by @ClearlyClaire)\
   In addition to email notifications, also notify users of moderation actions or warnings against them directly within the app, so they are less likely to miss important communication from their moderators.\
   This adds the `moderation_warning` notification type to the REST API and streaming, with a new [`moderation_warning` attribute](https://docs.joinmastodon.org/entities/Notification/#moderation_warning).
 - **Add domain information to profiles in web UI** (#29602 by @Gargron)\
   Clicking the domain of a user in their profile will now open a tooltip with a short explanation about servers and federation.
-- Add ability to reorder uploaded media before posting in web UI (#28456 by @Gargron)
+- **Add support for Redis sentinel** (#31694, #31623, #31744, #31767, and #31768 by @ThisIsMissEm and @oneiros)\
+  See https://docs.joinmastodon.org/admin/scaling/#redis-sentinel
+- **Add ability to reorder uploaded media before posting in web UI** (#28456 and #32093 by @Gargron)
+- Add “A Mastodon update is available.” message on admin dashboard for non-bugfix updates (#32106 by @ClearlyClaire)
+- Add ability to view alt text by clicking the ALT badge in web UI (#32058 by @Gargron)
+- Add preview of followers removed in domain block modal in web UI (#32032 and #32105 by @ClearlyClaire and @Gargron)
+- Add reblogs and favourites counts to statuses in ActivityPub (#32007 by @Gargron)
 - Add moderation interface for searching hashtags (#30880 by @ThisIsMissEm)
 - Add ability for admins to configure instance favicon and logo (#30040, #30208, #30259, #30375, #30734, #31016, and #30205 by @ClearlyClaire, @FawazFarid, @JasonPunyon, @mgmn, and @renchap)\
   This is also exposed through the REST API: https://docs.joinmastodon.org/entities/Instance/#icon
 - Add `api_versions` to `/api/v2/instance` (#31354 by @ClearlyClaire)\
   Add API version number to make it easier for clients to detect compatible features going forward.\
   See API documentation at https://docs.joinmastodon.org/entities/Instance/#api-versions
+- Add quick links to Administration and Moderation Reports from Web UI (#24838 by @ThisIsMissEm)
+- Add link to `/admin/roles` in moderation interface when changing someone's role (#31791 by @ClearlyClaire)
 - Add recent audit log entries in federation moderation interface (#27386 by @ThisIsMissEm)
 - Add profile setup to onboarding in web UI (#27829, #27876, and #28453 by @Gargron)
 - Add prominent share/copy button on profiles in web UI (#27865 and #27889 by @ClearlyClaire and @Gargron)
@@ -113,17 +126,19 @@ The following changelog entries focus on changes visible to users, administrator
 - Add support for multiple `redirect_uris` when creating OAuth 2.0 Applications (#29192 by @ThisIsMissEm)
 - Add Interlingue and Interlingua to interface languages (#28630 and #30828 by @Dhghomon and @renchap)
 - Add Kashubian, Pennsylvania Dutch, Vai, Jawi Malay, Mohawk and Low German to posting languages (#26024, #26634, #27136, #29098, #27115, and #27434 by @EngineerDali, @HelgeKrueger, and @gunchleoc)
-- Add validations to `Web::PushSubscription` (#30540 and #30542 by @ThisIsMissEm)
 - Add option to use native Ruby driver for Redis through `REDIS_DRIVER=ruby` (#30717 by @vmstan)
-- Add support for libvips in addition to ImageMagick (#30090, #30590, #30597, #30632, #30857, #30869, and #30858 by @ClearlyClaire, @Gargron, and @mjankowski)\
+- Add support for libvips in addition to ImageMagick (#30090, #30590, #30597, #30632, #30857, #30869, #30858 and #32104 by @ClearlyClaire, @Gargron, and @mjankowski)\
   Server admins can now use libvips as a faster and lighter alternative to ImageMagick for processing user-uploaded images.\
   This requires libvips 8.13 or newer, and needs to be enabled with `MASTODON_USE_LIBVIPS=true`.\
   This is enabled by default in the official Docker images, and is intended to completely replace ImageMagick in the future.
+- Add validations to `Web::PushSubscription` (#30540 and #30542 by @ThisIsMissEm)
+- Add anchors to each authorized application in `/oauth/authorized_applications` (#31677 by @fowl2)
 - Add active animation to header settings button (#30221, #30307, and #30388 by @daudix)
-- Add OpenTelemetry instrumentation (#30130, #30322, #30353, and #30350 by @julianocosta89, @renchap, and @robbkidd)\
+- Add OpenTelemetry instrumentation (#30130, #30322, #30353, #30350 and #31998 by @julianocosta89, @renchap, @robbkidd and @timetinytim)\
   See https://docs.joinmastodon.org/admin/config/#otel for documentation
 - Add API to get multiple accounts and statuses (#27871 and #30465 by @ClearlyClaire)\
   This adds `GET /api/v1/accounts` and `GET /api/v1/statuses` to the REST API, see https://docs.joinmastodon.org/methods/accounts/#index and https://docs.joinmastodon.org/methods/statuses/#index
+- Add support for CORS to `POST /oauth/revoke` (#31743 by @ClearlyClaire)
 - Add redirection back to previous page after site upload deletion (#30141 by @FawazFarid)
 - Add RFC8414 OAuth 2.0 server metadata (#29191 by @ThisIsMissEm)
 - Add loading indicator and empty result message to advanced interface search (#30085 by @ClearlyClaire)
@@ -156,34 +171,50 @@ The following changelog entries focus on changes visible to users, administrator
 - **Change icons throughout the web interface** (#27385, #27539, #27555, #27579, #27700, #27817, #28519, #28709, #28064, #28775, #28780, #27924, #29294, #29395, #29537, #29569, #29610, #29612, #29649, #29844, #27780, #30974, #30963, #30962, #30961, #31362, #31363, #31359, #31371, #31360, #31512, #31511, and #31525 by @ClearlyClaire, @Gargron, @arbolitoloco1, @mjankowski, @nclm, @renchap, @ronilaukkarinen, and @zunda)\
   This changes all the interface icons from FontAwesome to Material Symbols for a more modern look, consistent with the official Mastodon Android app.\
   In addition, better care is given to pixel alignment, and icon variants are used to better highlight active/inactive state.
-- **Change design of compose form in web UI** (#28119, #29059, #29248, #29372, #29384, #29417, #29456, #29406, #29651, and #29659 by @ClearlyClaire, @Gargron, @eai04191, @hinaloe, and @ronilaukkarinen)\
+- **Change design of compose form in web UI** (#28119, #29059, #29248, #29372, #29384, #29417, #29456, #29406, #29651, #29659, #31889 and #32033 by @ClearlyClaire, @Gargron, @eai04191, @hinaloe, and @ronilaukkarinen)\
   The compose form has been completely redesigned for a more modern and consistent look, as well as spelling out the chosen privacy setting and language name at all times.\
   As part of this, the “Unlisted” privacy setting has been renamed to “Quiet public”.
-- **Change design of confirmation modals in the web UI** (#29576, #29614, #29640, #29644, #30131, #30884, and #31399 by @ClearlyClaire, @Gargron, and @tribela)\
+- **Change design of modals in the web UI** (#29576, #29614, #29640, #29644, #30131, #30884, #31399, #31555, #31752, #31801, #31883, #31844, #31864, and #31943 by @ClearlyClaire, @Gargron, @tribela and @vmstan)\
   The mute, block, and domain block confirmation modals have been completely redesigned to be clearer and include more detailed information on the action to be performed.\
   They also have a more modern and consistent design, along with other confirmation modals in the application.
-- **Change colors throughout the web UI** (#29522, #29584, #29653, #29779, #29803, #29809, #29808, #29828, #31034, #31168, #31266, #31348, #31349, #31361, and #31510 by @ClearlyClaire, @Gargron, @renchap, and @vmstan)
-- **Change onboarding prompt to follow suggestions carousel in web UI** (#28878 and #29272 by @Gargron)
-- **Change email templates** (#28416, #28755, #28814, #29064, #28883, #29470, #29607, #29761, #29760, and #29879 by @ClearlyClaire, @Gargron, @hteumeuleu, and @mjankowski)\
+- **Change colors throughout the web UI** (#29522, #29584, #29653, #29779, #29803, #29809, #29808, #29828, #31034, #31168, #31266, #31348, #31349, #31361, #31510 and #32128 by @ClearlyClaire, @Gargron, @mjankowski, @renchap, and @vmstan)
+- **Change onboarding prompt to follow suggestions carousel in web UI** (#28878, #29272, and #31912 by @Gargron)
+- **Change email templates** (#28416, #28755, #28814, #29064, #28883, #29470, #29607, #29761, #29760, #29879, #32073 and #32132 by @c960657, @ClearlyClaire, @Gargron, @hteumeuleu, and @mjankowski)\
   All emails to end-users have been completely redesigned with a fresh new look, providing more information while making them easier to read and keeping maximum compatibility across mail clients.
 - **Change follow recommendations algorithm** (#28314, #28433, #29017, #29108, #29306, #29550, #29619, and #31474 by @ClearlyClaire, @Gargron, @kernal053, @mjankowski, and @wheatear-dev)\
   This replaces the “past interactions” recommendation algorithm with a “friends of friends” algorithm that suggests accounts followed by people you follow, and a “similar profiles” algorithm that suggests accounts with a profile similar to your most recent follows.\
   In addition, the implementation has been significantly reworked, and all follow recommendations are now dismissable.\
   This change deprecates the `source` attribute in `Suggestion` entities in the REST API, and replaces it with the new [`sources` attribute](https://docs.joinmastodon.org/entities/Suggestion/#sources).
 - Change account search algorithm (#30803 by @Gargron)
-- **Change streaming server to use its own dependencies and its own docker image** (#24702, #27967, #26850, #28112, #28115, #28137, #28138, #28497, #28548, and #30795 by @TheEssem, @ThisIsMissEm, @jippi, @timetinytim, and @vmstan)\
+- **Change streaming server to use its own dependencies and its own docker image** (#24702, #27967, #26850, #28112, #28115, #28137, #28138, #28497, #28548, #30795, #31612, and #31615 by @TheEssem, @ThisIsMissEm, @jippi, @renchap, @timetinytim, and @vmstan)\
   In order to reduce the amount of runtime dependencies, the streaming server has been moved into a separate package and Docker image.\
   The `mastodon` image does not contain the streaming server anymore, as it has been moved to its own `mastodon-streaming` image.\
   Administrators may need to update their setup accordingly.
-- Change how content warnings and filters are displayed in web UI (#31365 by @Gargron)
+- Change how content warnings and filters are displayed in web UI (#31365, and #31761 by @Gargron)
+- Change preview card processing to ignore `undefined` as canonical url (#31882 by @oneiros)
+- Change embedded posts to use web UI (#31766 and #32135 by @Gargron)
+- Change inner borders in media galleries in web UI (#31852 by @Gargron)
+- Change design of media attachments and profile media tab in web UI (#31807, #32048, and #31967 by @Gargron)
+- Change labels on thread indicators in web UI (#31806 by @Gargron)
+- Change label of "Data export" menu item in settings interface (#32099 by @c960657)
+- Change responsive break points on navigation panel in web UI (#32034 by @Gargron)
+- Change cursor to `not-allowed` on disabled buttons (#32076 by @mjankowski)
+- Change OAuth authorization prompt to not refer to apps as “third-party” (#32005 by @Gargron)
+- Change Mastodon to issue correct HTTP signatures by default (#31994 by @ClearlyClaire)
+- Change zoom icon in web UI (#29683 by @Gargron)
+- Change directory page to use URL query strings for options (#31980, #31977 and #31984 by @ClearlyClaire and @renchap)
+- Change report action buttons to be disabled when action has already been taken (#31773, #31822, and #31899 by @ClearlyClaire and @ThisIsMissEm)
+- Change width of columns in advanced web UI (#31762 by @Gargron)
+- Change design of unread conversations in web UI (#31763 by @Gargron)
 - Change Web UI to allow viewing and severing relationships with suspended accounts (#27667 by @ClearlyClaire)\
   This also adds a `with_suspended` parameter to `GET /api/v1/accounts/relationships` in the REST API.
+- Change preview card image size limit from 2MB to 8MB when using libvips (#31904 by @ClearlyClaire)
 - Change avatars border radius (#31390 by @renchap)
 - Change counters to be displayed on profile timelines in web UI (#30525 by @Gargron)
 - Change disabled buttons color in light mode to make the difference more visible (#30998 by @renchap)
 - Change design of people tab on explore in web UI (#30059 by @Gargron)
 - Change sidebar text in web UI (#30696 by @Gargron)
-- Change "Follow" to "Follow back" and "Mutual" when appropriate in web UI (#28452 and #28465 by @Gargron and @renchap)
+- Change "Follow" to "Follow back" and "Mutual" when appropriate in web UI (#28452, #28465, and #31934 by @ClearlyClaire, @Gargron and @renchap)
 - Change media to be hidden/blurred by default in report modal (#28522 by @ClearlyClaire)
 - Change order of the "muting" and "blocking" list options in “Data Exports” (#26088 by @fixermark)
 - Change admin and moderation notes character limit from 500 to 2000 characters (#30288 by @ThisIsMissEm)
@@ -197,6 +228,7 @@ The following changelog entries focus on changes visible to users, administrator
 - Change dropdown menu icon to not be replaced by close icon when open in web UI (#29532 by @Gargron)
 - Change back button to always appear in advanced web UI (#29551 and #29669 by @Gargron)
 - Change border of active compose field search inputs (#29832 and #29839 by @vmstan)
+- Change instances of Nokogiri HTML4 parsing to HTML5 (#31812, #31815, #31813, and #31814 by @flavorjones)
 - Change link detection to allow `@` at the end of an URL (#31124 by @adamniedzielski)
 - Change User-Agent to use Mastodon as the product, and http.rb as platform details (#31192 by @ClearlyClaire)
 - Change layout and wording of the Content Retention server settings page (#27733 by @vmstan)
@@ -233,6 +265,7 @@ The following changelog entries focus on changes visible to users, administrator
 
 ### Removed
 
+- Remove unused E2EE messaging code and related `crypto` OAuth scope (#31193, #31945, #31963, and #31964 by @ClearlyClaire and @mjankowski)
 - Remove StatsD integration (replaced by OpenTelemetry) (#30240 by @mjankowski)
 - Remove `CacheBuster` default options (#30718 by @mjankowski)
 - Remove home marker updates from the Web UI (#22721 by @davbeck)\
@@ -248,14 +281,35 @@ The following changelog entries focus on changes visible to users, administrator
 - Fix log out from user menu not working on Safari (#31402 by @renchap)
 - Fix various issues when in link preview card generation (#28748, #30017, #30362, #30173, #30853, #30929, #30933, #30957, #30987, and #31144 by @adamniedzielski, @oneiros, @phocks, @timothyjrogers, and @tribela)
 - Fix handling of missing links in Webfinger responses (#31030 by @adamniedzielski)
+- Fix error when accepting an appeal for sensitive posts deleted in the meantime (#32037 by @ClearlyClaire)
+- Fix error when encountering reblog of deleted post in feed rebuild (#32001 by @ClearlyClaire)
+- Fix Safari browser glitch related to horizontal scrolling (#31960 by @Gargron)
+- Fix too many requests caused by relationship look-ups in web UI (#32042 by @Gargron)
+- Fix links for reblogs in moderation interface (#31979 by @ClearlyClaire)
+- Fix the appearance of avatars when they do not load (#31966 by @renchap)
+- Fix spurious error notifications for aborted requests in web UI (#31952 by @c960657)
 - Fix HTTP 500 error in `/api/v1/polls/:id/votes` when required `choices` parameter is missing (#25598 by @danielmbrasil)
+- Fix security context sometimes not being added in LD-Signed activities (#31871 by @ClearlyClaire)
 - Fix cross-origin loading of `inert.css` polyfill (#30687 by @louis77)
+- Fix wrapping in dashboard quick access buttons (#32043 by @renchap)
+- Fix recently used tags hint being displayed in profile edition page when there is none (#32120 by @mjankowski)
+- Fix checkbox lists on narrow screens in the settings interface (#32112 by @mjankowski)
+- Fix the position of status action buttons being affected by interaction counters (#32084 by @renchap)
+- Fix the summary of converted ActivityPub object types to be treated as HTML (#28629 by @Menrath)
 - Fix cutoff of instance name in sign-up form (#30598 by @oneiros)
+- Fix invalid date searches returning 503 errors (#31526 by @notchairmk)
+- Fix invalid `visibility` values in `POST /api/v1/statuses` returning 500 errors (#31571 by @c960657)
+- Fix some components re-rendering spuriously in web UI (#31879 and #31881 by @ClearlyClaire and @Gargron)
+- Fix sort order of moderation notes on Reports and Accounts (#31528 by @ThisIsMissEm)
+- Fix email language when recipient has no selected locale (#31747 by @ClearlyClaire)
+- Fix frequently-used languages not correctly updating in the web UI (#31386 by @c960657)
+- Fix `POST /api/v1/statuses` silently ignoring invalid `media_ids` parameter (#31681 by @c960657)
+- Fix handling of the `BIND` environment variable in the streaming server (#31624 by @ThisIsMissEm)
 - Fix empty `aria-hidden` attribute value in logo resources area (#30570 by @mjankowski)
 - Fix “Redirect URI” field not being marked as required in “New application” form (#30311 by @ThisIsMissEm)
 - Fix right-to-left text in preview cards (#30930 by @ClearlyClaire)
 - Fix rack attack `match_type` value typo in logging config (#30514 by @mjankowski)
-- Fix various cases of duplicate, missing, or inconsistent borders or scrollbar styles (#31068, #31286, #31268, #31275, #31284, #31305, #31346, #31372, #31373, #31389, #31432, #31391, and #31445 by @valtlai and @vmstan)
+- Fix various cases of duplicate, missing, or inconsistent borders or scrollbar styles (#31068, #31286, #31268, #31275, #31284, #31305, #31346, #31372, #31373, #31389, #31432, #31391, #31445 and #32091 by @ClearlyClaire, @valtlai and @vmstan)
 - Fix race condition in `POST /api/v1/push/subscription` (#30166 by @ClearlyClaire)
 - Fix post deletion not being delayed when those are part of an account warning (#30163 by @ClearlyClaire)
 - Fix rendering error on `/start` when not logged in (#30023 by @timothyjrogers)

Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker/dockerfile:1.9
+# syntax=docker/dockerfile:1.10
 
 # This file is designed for production server deployment, not local development work
 # For a containerized local dev environment, see: https://github.com/mastodon/mastodon/blob/main/README.md#docker
@@ -214,7 +214,7 @@ FROM build AS ffmpeg
 
 # ffmpeg version to compile, change with [--build-arg FFMPEG_VERSION="7.0.x"]
 # renovate: datasource=repology depName=ffmpeg packageName=openpkg_current/ffmpeg
-ARG FFMPEG_VERSION=7.0.2
+ARG FFMPEG_VERSION=7.1
 # ffmpeg download URL, change with [--build-arg FFMPEG_URL="https://ffmpeg.org/releases"]
 ARG FFMPEG_URL=https://ffmpeg.org/releases
 

Gemfile

@@ -47,7 +47,6 @@ gem 'color_diff', '~> 0.1'
 gem 'csv', '~> 3.2'
 gem 'discard', '~> 1.2'
 gem 'doorkeeper', '~> 5.6'
-gem 'ed25519', '~> 1.3'
 gem 'fast_blank', '~> 1.0'
 gem 'fastimage'
 gem 'hiredis', '~> 0.6'
@@ -111,7 +110,7 @@ group :opentelemetry do
   gem 'opentelemetry-instrumentation-http', '~> 0.23.2', require: false
   gem 'opentelemetry-instrumentation-http_client', '~> 0.22.3', require: false
   gem 'opentelemetry-instrumentation-net_http', '~> 0.22.4', require: false
-  gem 'opentelemetry-instrumentation-pg', '~> 0.28.0', require: false
+  gem 'opentelemetry-instrumentation-pg', '~> 0.29.0', require: false
   gem 'opentelemetry-instrumentation-rack', '~> 0.24.1', require: false
   gem 'opentelemetry-instrumentation-rails', '~> 0.31.0', require: false
   gem 'opentelemetry-instrumentation-redis', '~> 0.25.3', require: false

Gemfile.lock

@@ -100,20 +100,20 @@ GEM
     attr_required (1.0.2)
     awrence (1.2.1)
     aws-eventstream (1.3.0)
-    aws-partitions (1.974.0)
-    aws-sdk-core (3.205.0)
+    aws-partitions (1.983.0)
+    aws-sdk-core (3.209.1)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.9)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.91.0)
-      aws-sdk-core (~> 3, >= 3.205.0)
+    aws-sdk-kms (1.94.0)
+      aws-sdk-core (~> 3, >= 3.207.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.162.0)
-      aws-sdk-core (~> 3, >= 3.205.0)
+    aws-sdk-s3 (1.167.0)
+      aws-sdk-core (~> 3, >= 3.207.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
-    aws-sigv4 (1.9.1)
+    aws-sigv4 (1.10.0)
       aws-eventstream (~> 1, >= 1.0.2)
     azure-storage-blob (2.0.3)
       azure-storage-common (~> 2.0)
@@ -134,7 +134,7 @@ GEM
     bindata (2.5.0)
     binding_of_caller (1.0.1)
       debug_inspector (>= 1.2.0)
-    blurhash (0.1.7)
+    blurhash (0.1.8)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
     brakeman (6.2.1)
@@ -197,7 +197,7 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise-two-factor (5.1.0)
+    devise-two-factor (6.0.0)
       activesupport (~> 7.0)
       devise (~> 4.0)
       railties (~> 7.0)
@@ -212,9 +212,8 @@ GEM
     domain_name (0.6.20240107)
     doorkeeper (5.7.1)
       railties (>= 5)
-    dotenv (3.1.2)
+    dotenv (3.1.4)
     drb (2.2.1)
-    ed25519 (1.3.0)
     elasticsearch (7.17.11)
       elasticsearch-api (= 7.17.11)
       elasticsearch-transport (= 7.17.11)
@@ -290,7 +289,7 @@ GEM
       raabro (~> 1.4)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-protobuf (3.25.4)
+    google-protobuf (3.25.5)
     googleapis-common-protos-types (1.15.0)
       google-protobuf (>= 3.18, < 5.a)
     haml (6.3.0)
@@ -302,7 +301,7 @@ GEM
       activesupport (>= 5.1)
       haml (>= 4.0.6)
       railties (>= 5.1)
-    haml_lint (0.58.0)
+    haml_lint (0.59.0)
       haml (>= 5.0)
       parallel (~> 1.10)
       rainbow
@@ -331,7 +330,7 @@ GEM
     httplog (1.7.0)
       rack (>= 2.0)
       rainbow (>= 2.0.0)
-    i18n (1.14.5)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
     i18n-tasks (1.0.14)
       activesupport (>= 4.0.2)
@@ -348,7 +347,7 @@ GEM
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.7.2)
-    irb (1.14.0)
+    irb (1.14.1)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
@@ -370,7 +369,7 @@ GEM
     json-ld-preloaded (3.3.0)
       json-ld (~> 3.3)
       rdf (~> 3.3)
-    json-schema (5.0.0)
+    json-schema (5.0.1)
       addressable (~> 2.8)
     jsonapi-renderer (0.2.2)
     jwt (2.7.1)
@@ -407,7 +406,7 @@ GEM
     llhttp-ffi (0.5.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    logger (1.6.0)
+    logger (1.6.1)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
@@ -429,7 +428,7 @@ GEM
       addressable (~> 2.5)
       azure-storage-blob (~> 2.0.1)
       hashie (~> 5.0)
-    memory_profiler (1.0.2)
+    memory_profiler (1.1.0)
     mime-types (3.5.2)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2024.0820)
@@ -472,9 +471,9 @@ GEM
     omniauth-rails_csrf_protection (1.0.2)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    omniauth-saml (2.1.0)
-      omniauth (~> 2.0)
-      ruby-saml (~> 1.12)
+    omniauth-saml (2.2.1)
+      omniauth (~> 2.1)
+      ruby-saml (~> 1.17)
     omniauth_openid_connect (0.6.1)
       omniauth (>= 1.9, < 3)
       openid_connect (~> 1.1)
@@ -502,8 +501,8 @@ GEM
       opentelemetry-common (~> 0.20)
       opentelemetry-sdk (~> 1.2)
       opentelemetry-semantic_conventions
-    opentelemetry-helpers-sql-obfuscation (0.1.0)
-      opentelemetry-common (~> 0.20)
+    opentelemetry-helpers-sql-obfuscation (0.2.0)
+      opentelemetry-common (~> 0.21)
     opentelemetry-instrumentation-action_mailer (0.1.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-active_support (~> 0.1)
@@ -528,8 +527,9 @@ GEM
     opentelemetry-instrumentation-active_support (0.6.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-base (0.22.3)
+    opentelemetry-instrumentation-base (0.22.6)
       opentelemetry-api (~> 1.0)
+      opentelemetry-common (~> 0.21)
       opentelemetry-registry (~> 0.1)
     opentelemetry-instrumentation-concurrent_ruby (0.21.4)
       opentelemetry-api (~> 1.0)
@@ -549,7 +549,7 @@ GEM
     opentelemetry-instrumentation-net_http (0.22.7)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-pg (0.28.0)
+    opentelemetry-instrumentation-pg (0.29.0)
       opentelemetry-api (~> 1.0)
       opentelemetry-helpers-sql-obfuscation
       opentelemetry-instrumentation-base (~> 0.22.1)
@@ -601,7 +601,7 @@ GEM
       actionmailer (>= 3)
       net-smtp
       premailer (~> 1.7, >= 1.7.9)
-    propshaft (1.0.0)
+    propshaft (1.1.0)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
       rack
@@ -609,7 +609,7 @@ GEM
     psych (5.1.2)
       stringio
     public_suffix (6.0.1)
-    puma (6.4.2)
+    puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.4.0)
       activesupport (>= 3.0.0)
@@ -698,7 +698,7 @@ GEM
     responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
-    rexml (3.3.7)
+    rexml (3.3.8)
     rotp (6.3.0)
     rouge (4.3.0)
     rpam2 (4.0.2)
@@ -748,22 +748,22 @@ GEM
       parser (>= 3.3.1.0)
     rubocop-capybara (2.21.0)
       rubocop (~> 1.41)
-    rubocop-performance (1.21.1)
+    rubocop-performance (1.22.1)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rails (2.25.1)
+    rubocop-rails (2.26.2)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
+      rubocop (>= 1.52.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.0.4)
+    rubocop-rspec (3.1.0)
       rubocop (~> 1.61)
     rubocop-rspec_rails (2.30.0)
       rubocop (~> 1.61)
       rubocop-rspec (~> 3, >= 3.0.1)
     ruby-prof (1.7.0)
     ruby-progressbar (1.13.0)
-    ruby-saml (1.16.0)
+    ruby-saml (1.17.0)
       nokogiri (>= 1.13.10)
       rexml
     ruby-vips (2.2.2)
@@ -781,7 +781,7 @@ GEM
     scenic (1.8.0)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
-    selenium-webdriver (4.24.0)
+    selenium-webdriver (4.25.0)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
@@ -815,7 +815,7 @@ GEM
       docile (~> 1.1)
       simplecov-html (~> 0.11)
       simplecov_json_formatter (~> 0.1)
-    simplecov-html (0.12.3)
+    simplecov-html (0.13.1)
     simplecov-lcov (0.8.0)
     simplecov_json_formatter (0.1.4)
     stackprof (0.2.26)
@@ -862,7 +862,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.9.1)
-    unicode-display_width (2.5.0)
+    unicode-display_width (2.6.0)
     uri (0.13.1)
     validate_email (0.1.6)
       activemodel (>= 3.0)
@@ -884,7 +884,7 @@ GEM
     webfinger (1.2.0)
       activesupport
       httpclient (>= 2.4)
-    webmock (3.23.1)
+    webmock (3.24.0)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -893,7 +893,7 @@ GEM
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
-    webrick (1.8.1)
+    webrick (1.8.2)
     websocket (1.2.11)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
@@ -936,7 +936,6 @@ DEPENDENCIES
   discard (~> 1.2)
   doorkeeper (~> 5.6)
   dotenv
-  ed25519 (~> 1.3)
   email_spec
   fabrication (~> 2.30)
   faker (~> 3.2)
@@ -991,7 +990,7 @@ DEPENDENCIES
   opentelemetry-instrumentation-http (~> 0.23.2)
   opentelemetry-instrumentation-http_client (~> 0.22.3)
   opentelemetry-instrumentation-net_http (~> 0.22.4)
-  opentelemetry-instrumentation-pg (~> 0.28.0)
+  opentelemetry-instrumentation-pg (~> 0.29.0)
   opentelemetry-instrumentation-rack (~> 0.24.1)
   opentelemetry-instrumentation-rails (~> 0.31.0)
   opentelemetry-instrumentation-redis (~> 0.25.3)

app/controllers/activitypub/claims_controller.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class ActivityPub::ClaimsController < ActivityPub::BaseController
-  skip_before_action :authenticate_user!
-
-  before_action :require_account_signature!
-  before_action :set_claim_result
-
-  def create
-    render json: @claim_result, serializer: ActivityPub::OneTimeKeySerializer
-  end
-
-  private
-
-  def set_claim_result
-    @claim_result = ::Keys::ClaimService.new.call(@account.id, params[:id])
-  end
-end

app/controllers/activitypub/collections_controller.rb

@@ -22,8 +22,6 @@ class ActivityPub::CollectionsController < ActivityPub::BaseController
       @items = @items.map { |item| item.distributable? ? item : ActivityPub::TagManager.instance.uri_for(item) }
     when 'tags'
       @items = for_signed_account { @account.featured_tags }
-    when 'devices'
-      @items = @account.devices
     else
       not_found
     end
@@ -31,7 +29,7 @@ class ActivityPub::CollectionsController < ActivityPub::BaseController
 
   def set_size
     case params[:id]
-    when 'featured', 'devices', 'tags'
+    when 'featured', 'tags'
       @size = @items.size
     else
       not_found
@@ -42,7 +40,7 @@ class ActivityPub::CollectionsController < ActivityPub::BaseController
     case params[:id]
     when 'featured'
       @type = :ordered
-    when 'devices', 'tags'
+    when 'tags'
       @type = :unordered
     else
       not_found

app/controllers/activitypub/likes_controller.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class ActivityPub::LikesController < ActivityPub::BaseController
+  include Authorization
+
+  vary_by -> { 'Signature' if authorized_fetch_mode? }
+
+  before_action :require_account_signature!, if: :authorized_fetch_mode?
+  before_action :set_status
+
+  def index
+    expires_in 0, public: @status.distributable? && public_fetch_mode?
+    render json: likes_collection_presenter, serializer: ActivityPub::CollectionSerializer, adapter: ActivityPub::Adapter, content_type: 'application/activity+json'
+  end
+
+  private
+
+  def pundit_user
+    signed_request_account
+  end
+
+  def set_status
+    @status = @account.statuses.find(params[:status_id])
+    authorize @status, :show?
+  rescue Mastodon::NotPermittedError
+    not_found
+  end
+
+  def likes_collection_presenter
+    ActivityPub::CollectionPresenter.new(
+      id: account_status_likes_url(@account, @status),
+      type: :unordered,
+      size: @status.favourites_count
+    )
+  end
+end

app/controllers/activitypub/replies_controller.rb

@@ -12,7 +12,7 @@ class ActivityPub::RepliesController < ActivityPub::BaseController
   before_action :set_replies
 
   def index
-    expires_in 0, public: public_fetch_mode?
+    expires_in 0, public: @status.distributable? && public_fetch_mode?
     render json: replies_collection_presenter, serializer: ActivityPub::CollectionSerializer, adapter: ActivityPub::Adapter, content_type: 'application/activity+json', skip_activities: true
   end
 

app/controllers/activitypub/shares_controller.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class ActivityPub::SharesController < ActivityPub::BaseController
+  include Authorization
+
+  vary_by -> { 'Signature' if authorized_fetch_mode? }
+
+  before_action :require_account_signature!, if: :authorized_fetch_mode?
+  before_action :set_status
+
+  def index
+    expires_in 0, public: @status.distributable? && public_fetch_mode?
+    render json: shares_collection_presenter, serializer: ActivityPub::CollectionSerializer, adapter: ActivityPub::Adapter, content_type: 'application/activity+json'
+  end
+
+  private
+
+  def pundit_user
+    signed_request_account
+  end
+
+  def set_status
+    @status = @account.statuses.find(params[:status_id])
+    authorize @status, :show?
+  rescue Mastodon::NotPermittedError
+    not_found
+  end
+
+  def shares_collection_presenter
+    ActivityPub::CollectionPresenter.new(
+      id: account_status_shares_url(@account, @status),
+      type: :unordered,
+      size: @status.reblogs_count
+    )
+  end
+end

app/controllers/admin/announcements_controller.rb

@@ -6,6 +6,7 @@ class Admin::AnnouncementsController < Admin::BaseController
 
   def index
     authorize :announcement, :index?
+    @published_announcements_count = Announcement.published.async_count
   end
 
   def new

app/controllers/admin/disputes/appeals_controller.rb

@@ -6,6 +6,7 @@ class Admin::Disputes::AppealsController < Admin::BaseController
   def index
     authorize :appeal, :index?
 
+    @pending_appeals_count = Appeal.pending.async_count
     @appeals = filtered_appeals.page(params[:page])
   end
 

app/controllers/admin/trends/links/preview_card_providers_controller.rb

@@ -4,6 +4,7 @@ class Admin::Trends::Links::PreviewCardProvidersController < Admin::BaseControll
   def index
     authorize :preview_card_provider, :review?
 
+    @pending_preview_card_providers_count = PreviewCardProvider.unreviewed.async_count
     @preview_card_providers = filtered_preview_card_providers.page(params[:page])
     @form = Trends::PreviewCardProviderBatch.new
   end

app/controllers/admin/trends/tags_controller.rb

@@ -4,6 +4,7 @@ class Admin::Trends::TagsController < Admin::BaseController
   def index
     authorize :tag, :review?
 
+    @pending_tags_count = Tag.pending_review.async_count
     @tags = filtered_tags.page(params[:page])
     @form = Trends::TagBatch.new
   end

app/controllers/api/oembed_controller.rb

@@ -7,7 +7,7 @@ class Api::OEmbedController < Api::BaseController
   before_action :require_public_status!
 
   def show
-    render json: @status, serializer: OEmbedSerializer, width: maxwidth_or_default, height: maxheight_or_default
+    render json: @status, serializer: OEmbedSerializer, width: params[:maxwidth], height: params[:maxheight]
   end
 
   private
@@ -23,12 +23,4 @@ class Api::OEmbedController < Api::BaseController
   def status_finder
     StatusFinder.new(params[:url])
   end
-
-  def maxwidth_or_default
-    (params[:maxwidth].presence || 400).to_i
-  end
-
-  def maxheight_or_default
-    params[:maxheight].present? ? params[:maxheight].to_i : nil
-  end
 end

app/controllers/api/v1/crypto/deliveries_controller.rb

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Crypto::DeliveriesController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :crypto }
-  before_action :require_user!
-  before_action :set_current_device
-
-  def create
-    devices.each do |device_params|
-      DeliverToDeviceService.new.call(current_account, @current_device, device_params)
-    end
-
-    render_empty
-  end
-
-  private
-
-  def set_current_device
-    @current_device = Device.find_by!(access_token: doorkeeper_token)
-  end
-
-  def resource_params
-    params.require(:device)
-    params.permit(device: [:account_id, :device_id, :type, :body, :hmac])
-  end
-
-  def devices
-    Array(resource_params[:device])
-  end
-end

app/controllers/api/v1/crypto/encrypted_messages_controller.rb

@@ -1,47 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Crypto::EncryptedMessagesController < Api::BaseController
-  LIMIT = 80
-
-  before_action -> { doorkeeper_authorize! :crypto }
-  before_action :require_user!
-  before_action :set_current_device
-
-  before_action :set_encrypted_messages,    only: :index
-  after_action  :insert_pagination_headers, only: :index
-
-  def index
-    render json: @encrypted_messages, each_serializer: REST::EncryptedMessageSerializer
-  end
-
-  def clear
-    @current_device.encrypted_messages.up_to(params[:up_to_id]).delete_all
-    render_empty
-  end
-
-  private
-
-  def set_current_device
-    @current_device = Device.find_by!(access_token: doorkeeper_token)
-  end
-
-  def set_encrypted_messages
-    @encrypted_messages = @current_device.encrypted_messages.to_a_paginated_by_id(limit_param(LIMIT), params_slice(:max_id, :since_id, :min_id))
-  end
-
-  def next_path
-    api_v1_crypto_encrypted_messages_url pagination_params(max_id: pagination_max_id) if records_continue?
-  end
-
-  def prev_path
-    api_v1_crypto_encrypted_messages_url pagination_params(min_id: pagination_since_id) unless @encrypted_messages.empty?
-  end
-
-  def pagination_collection
-    @encrypted_messages
-  end
-
-  def records_continue?
-    @encrypted_messages.size == limit_param(LIMIT)
-  end
-end

app/controllers/api/v1/crypto/keys/claims_controller.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Crypto::Keys::ClaimsController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :crypto }
-  before_action :require_user!
-  before_action :set_claim_results
-
-  def create
-    render json: @claim_results, each_serializer: REST::Keys::ClaimResultSerializer
-  end
-
-  private
-
-  def set_claim_results
-    @claim_results = devices.filter_map { |device_params| ::Keys::ClaimService.new.call(current_account, device_params[:account_id], device_params[:device_id]) }
-  end
-
-  def resource_params
-    params.permit(device: [:account_id, :device_id])
-  end
-
-  def devices
-    Array(resource_params[:device])
-  end
-end

app/controllers/api/v1/crypto/keys/counts_controller.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Crypto::Keys::CountsController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :crypto }
-  before_action :require_user!
-  before_action :set_current_device
-
-  def show
-    render json: { one_time_keys: @current_device.one_time_keys.count }
-  end
-
-  private
-
-  def set_current_device
-    @current_device = Device.find_by!(access_token: doorkeeper_token)
-  end
-end

app/controllers/api/v1/crypto/keys/queries_controller.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Crypto::Keys::QueriesController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :crypto }
-  before_action :require_user!
-  before_action :set_accounts
-  before_action :set_query_results
-
-  def create
-    render json: @query_results, each_serializer: REST::Keys::QueryResultSerializer
-  end
-
-  private
-
-  def set_accounts
-    @accounts = Account.where(id: account_ids).includes(:devices)
-  end
-
-  def set_query_results
-    @query_results = @accounts.filter_map { |account| ::Keys::QueryService.new.call(account) }
-  end
-
-  def account_ids
-    Array(params[:id]).map(&:to_i)
-  end
-end

app/controllers/api/v1/crypto/keys/uploads_controller.rb

@@ -1,29 +0,0 @@
-# frozen_string_literal: true
-
-class Api::V1::Crypto::Keys::UploadsController < Api::BaseController
-  before_action -> { doorkeeper_authorize! :crypto }
-  before_action :require_user!
-
-  def create
-    device = Device.find_or_initialize_by(access_token: doorkeeper_token)
-
-    device.transaction do
-      device.account = current_account
-      device.update!(resource_params[:device])
-
-      if resource_params[:one_time_keys].present? && resource_params[:one_time_keys].is_a?(Enumerable)
-        resource_params[:one_time_keys].each do |one_time_key_params|
-          device.one_time_keys.create!(one_time_key_params)
-        end
-      end
-    end
-
-    render json: device, serializer: REST::Keys::DeviceSerializer
-  end
-
-  private
-
-  def resource_params
-    params.permit(device: [:device_id, :name, :fingerprint_key, :identity_key], one_time_keys: [:key_id, :key, :signature])
-  end
-end

app/controllers/api/v1/domain_blocks/previews_controller.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Api::V1::DomainBlocks::PreviewsController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :follow, :write, :'write:blocks' }
+  before_action :require_user!
+  before_action :set_domain
+  before_action :set_domain_block_preview
+
+  def show
+    render json: @domain_block_preview, serializer: REST::DomainBlockPreviewSerializer
+  end
+
+  private
+
+  def set_domain
+    @domain = TagManager.instance.normalize_domain(params[:domain])
+  end
+
+  def set_domain_block_preview
+    @domain_block_preview = with_read_replica do
+      DomainBlockPreviewPresenter.new(
+        following_count: current_account.following.where(domain: @domain).count,
+        followers_count: current_account.followers.where(domain: @domain).count
+      )
+    end
+  end
+end

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

@@ -7,6 +7,8 @@ class Api::V1::Peers::SearchController < Api::BaseController
   skip_before_action :require_authenticated_user!, unless: :limited_federation_mode?
   skip_around_action :set_locale
 
+  LIMIT = 10
+
   vary_by ''
 
   def index
@@ -35,10 +37,10 @@ class Api::V1::Peers::SearchController < Api::BaseController
           field: 'accounts_count',
           modifier: 'log2p',
         },
-      }).limit(10).pluck(:domain)
+      }).limit(LIMIT).pluck(:domain)
     else
       domain = normalized_domain
-      @domains = Instance.searchable.domain_starts_with(domain).limit(10).pluck(:domain)
+      @domains = Instance.searchable.domain_starts_with(domain).limit(LIMIT).pluck(:domain)
     end
   rescue Addressable::URI::InvalidURIError
     @domains = []

app/controllers/api/v2/notifications/accounts_controller.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Api::V2Alpha::Notifications::AccountsController < Api::BaseController
+class Api::V2::Notifications::AccountsController < Api::BaseController
   before_action -> { doorkeeper_authorize! :read, :'read:notifications' }
   before_action :require_user!
   before_action :set_notifications!
@@ -33,11 +33,11 @@ class Api::V2Alpha::Notifications::AccountsController < Api::BaseController
   end
 
   def next_path
-    api_v2_alpha_notification_accounts_url pagination_params(max_id: pagination_max_id) if records_continue?
+    api_v2_notification_accounts_url pagination_params(max_id: pagination_max_id) if records_continue?
   end
 
   def prev_path
-    api_v2_alpha_notification_accounts_url pagination_params(min_id: pagination_since_id) unless @paginated_notifications.empty?
+    api_v2_notification_accounts_url pagination_params(min_id: pagination_since_id) unless @paginated_notifications.empty?
   end
 
   def pagination_collection

app/controllers/api/v2/notifications_controller.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Api::V2Alpha::NotificationsController < Api::BaseController
+class Api::V2::NotificationsController < Api::BaseController
   before_action -> { doorkeeper_authorize! :read, :'read:notifications' }, except: [:clear, :dismiss]
   before_action -> { doorkeeper_authorize! :write, :'write:notifications' }, only: [:clear, :dismiss]
   before_action :require_user!
@@ -21,7 +21,7 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
       ActiveRecord::Associations::Preloader.new(records: @presenter.accounts, associations: [:account_stat, { user: :role }]).call
     end
 
-    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#index rendering') do |span|
+    MastodonOTELTracer.in_span('Api::V2::NotificationsController#index rendering') do |span|
       statuses = @grouped_notifications.filter_map { |group| group.target_status&.id }
 
       span.add_attributes(
@@ -64,7 +64,7 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
   private
 
   def load_notifications
-    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_notifications') do
+    MastodonOTELTracer.in_span('Api::V2::NotificationsController#load_notifications') do
       notifications = browserable_account_notifications.includes(from_account: [:account_stat, :user]).to_a_grouped_paginated_by_id(
         limit_param(DEFAULT_NOTIFICATIONS_LIMIT),
         params.slice(:max_id, :since_id, :min_id, :grouped_types).permit(:max_id, :since_id, :min_id, grouped_types: [])
@@ -79,7 +79,7 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
   def load_grouped_notifications
     return [] if @notifications.empty?
 
-    MastodonOTELTracer.in_span('Api::V2Alpha::NotificationsController#load_grouped_notifications') do
+    MastodonOTELTracer.in_span('Api::V2::NotificationsController#load_grouped_notifications') do
       NotificationGroup.from_notifications(@notifications, pagination_range: (@notifications.last.id)..(@notifications.first.id), grouped_types: params[:grouped_types])
     end
   end
@@ -101,11 +101,11 @@ class Api::V2Alpha::NotificationsController < Api::BaseController
   end
 
   def next_path
-    api_v2_alpha_notifications_url pagination_params(max_id: pagination_max_id) unless @notifications.empty?
+    api_v2_notifications_url pagination_params(max_id: pagination_max_id) unless @notifications.empty?
   end
 
   def prev_path
-    api_v2_alpha_notifications_url pagination_params(min_id: pagination_since_id) unless @notifications.empty?
+    api_v2_notifications_url pagination_params(min_id: pagination_since_id) unless @notifications.empty?
   end
 
   def pagination_collection

app/controllers/api/web/embeds_controller.rb

@@ -9,7 +9,7 @@ class Api::Web::EmbedsController < Api::Web::BaseController
     return not_found if @status.hidden?
 
     if @status.local?
-      render json: @status, serializer: OEmbedSerializer, width: 400
+      render json: @status, serializer: OEmbedSerializer
     else
       return not_found unless user_signed_in?
 

app/controllers/auth/sessions_controller.rb

@@ -20,11 +20,6 @@ class Auth::SessionsController < Devise::SessionsController
     p.form_action(false)
   end
 
-  def check_suspicious!
-    user = find_user
-    @login_is_suspicious = suspicious_sign_in?(user) unless user.nil?
-  end
-
   def create
     super do |resource|
       # We only need to call this if this hasn't already been
@@ -101,6 +96,11 @@ class Auth::SessionsController < Devise::SessionsController
 
   private
 
+  def check_suspicious!
+    user = find_user
+    @login_is_suspicious = suspicious_sign_in?(user) unless user.nil?
+  end
+
   def home_paths(resource)
     paths = [about_path, '/explore']
 

app/controllers/concerns/web_app_controller_concern.rb

@@ -13,7 +13,7 @@ module WebAppControllerConcern
       policy = ContentSecurityPolicy.new
 
       if policy.sso_host.present?
-        p.form_action policy.sso_host
+        p.form_action policy.sso_host, -> { "https://#{request.host}/auth/auth/" }
       else
         p.form_action :none
       end
@@ -31,7 +31,7 @@ module WebAppControllerConcern
   def redirect_unauthenticated_to_permalinks!
     return if user_signed_in? && current_account.moved_to_account_id.nil?
 
-    permalink_redirector = PermalinkRedirector.new(request.path)
+    permalink_redirector = PermalinkRedirector.new(request.original_fullpath)
     return if permalink_redirector.redirect_path.blank?
 
     expires_in(15.seconds, public: true, stale_while_revalidate: 30.seconds, stale_if_error: 1.day) unless user_signed_in?

app/controllers/settings/exports_controller.rb

@@ -9,7 +9,7 @@ class Settings::ExportsController < Settings::BaseController
   skip_before_action :require_functional!
 
   def show
-    @export  = Export.new(current_account)
+    @export_summary = ExportSummary.new(preloaded_account)
     @backups = current_user.backups
   end
 
@@ -25,4 +25,15 @@ class Settings::ExportsController < Settings::BaseController
 
     redirect_to settings_export_path
   end
+
+  private
+
+  def preloaded_account
+    current_account.tap do |account|
+      ActiveRecord::Associations::Preloader.new(
+        records: [account],
+        associations: :account_stat
+      ).call
+    end
+  end
 end

app/controllers/settings/two_factor_authentication/otp_authentication_controller.rb

@@ -15,7 +15,7 @@ module Settings
       end
 
       def create
-        session[:new_otp_secret] = User.generate_otp_secret(32)
+        session[:new_otp_secret] = User.generate_otp_secret
 
         redirect_to new_settings_two_factor_authentication_confirmation_path
       end

app/controllers/well_known/host_meta_controller.rb

@@ -7,7 +7,23 @@ module WellKnown
     def show
       @webfinger_template = "#{webfinger_url}?resource={uri}"
       expires_in 3.days, public: true
-      render content_type: 'application/xrd+xml', formats: [:xml]
+
+      respond_to do |format|
+        format.any do
+          render content_type: 'application/xrd+xml', formats: [:xml]
+        end
+
+        format.json do
+          render json: {
+            links: [
+              {
+                rel: 'lrdd',
+                template: @webfinger_template,
+              },
+            ],
+          }
+        end
+      end
     end
   end
 end

app/helpers/admin/action_logs_helper.rb

@@ -35,4 +35,11 @@ module Admin::ActionLogsHelper
       end
     end
   end
+
+  def sorted_action_log_types
+    Admin::ActionLogFilter::ACTION_TYPE_MAP
+      .keys
+      .map { |key| [I18n.t("admin.action_logs.action_types.#{key}"), key] }
+      .sort_by(&:first)
+  end
 end

app/helpers/admin/dashboard_helper.rb

@@ -18,6 +18,11 @@ module Admin::DashboardHelper
     end
   end
 
+  def date_range(range)
+    [l(range.first), l(range.last)]
+      .join(' - ')
+  end
+
   def relevant_account_timestamp(account)
     timestamp, exact = if account.user_current_sign_in_at && account.user_current_sign_in_at < 24.hours.ago
                          [account.user_current_sign_in_at, true]
@@ -25,6 +30,8 @@ module Admin::DashboardHelper
                          [account.user_current_sign_in_at, false]
                        elsif account.user_pending?
                          [account.user_created_at, true]
+                       elsif account.suspended_at.present? && account.local? && account.user.nil?
+                         [account.suspended_at, true]
                        elsif account.last_status_at.present?
                          [account.last_status_at, true]
                        else

app/helpers/application_helper.rb

@@ -1,12 +1,6 @@
 # frozen_string_literal: true
 
 module ApplicationHelper
-  DANGEROUS_SCOPES = %w(
-    read
-    write
-    follow
-  ).freeze
-
   RTL_LOCALES = %i(
     ar
     ckb
@@ -95,8 +89,11 @@ module ApplicationHelper
     Rails.env.production? ? site_title : "#{site_title} (Dev)"
   end
 
-  def class_for_scope(scope)
-    'scope-danger' if DANGEROUS_SCOPES.include?(scope.to_s)
+  def label_for_scope(scope)
+    safe_join [
+      tag.samp(scope, class: { 'scope-danger' => SessionActivation::DEFAULT_SCOPES.include?(scope.to_s) }),
+      tag.span(t("doorkeeper.scopes.#{scope}"), class: :hint),
+    ]
   end
 
   def can?(action, record)
@@ -243,6 +240,10 @@ module ApplicationHelper
     full_asset_url(instance_presenter.mascot&.file&.url || frontend_asset_path('images/elephant_ui_plane.svg'))
   end
 
+  def copyable_input(options = {})
+    tag.input(type: :text, maxlength: 999, spellcheck: false, readonly: true, **options)
+  end
+
   private
 
   def storage_host_var

app/helpers/context_helper.rb

@@ -23,23 +23,6 @@ module ContextHelper
     indexable: { 'toot' => 'http://joinmastodon.org/ns#', 'indexable' => 'toot:indexable' },
     memorial: { 'toot' => 'http://joinmastodon.org/ns#', 'memorial' => 'toot:memorial' },
     voters_count: { 'toot' => 'http://joinmastodon.org/ns#', 'votersCount' => 'toot:votersCount' },
-    olm: {
-      'toot' => 'http://joinmastodon.org/ns#',
-      'Device' => 'toot:Device',
-      'Ed25519Signature' => 'toot:Ed25519Signature',
-      'Ed25519Key' => 'toot:Ed25519Key',
-      'Curve25519Key' => 'toot:Curve25519Key',
-      'EncryptedMessage' => 'toot:EncryptedMessage',
-      'publicKeyBase64' => 'toot:publicKeyBase64',
-      'deviceId' => 'toot:deviceId',
-      'claim' => { '@type' => '@id', '@id' => 'toot:claim' },
-      'fingerprintKey' => { '@type' => '@id', '@id' => 'toot:fingerprintKey' },
-      'identityKey' => { '@type' => '@id', '@id' => 'toot:identityKey' },
-      'devices' => { '@type' => '@id', '@id' => 'toot:devices' },
-      'messageFranking' => 'toot:messageFranking',
-      'messageType' => 'toot:messageType',
-      'cipherText' => 'toot:cipherText',
-    },
     suspended: { 'toot' => 'http://joinmastodon.org/ns#', 'suspended' => 'toot:suspended' },
     attribution_domains: { 'toot' => 'http://joinmastodon.org/ns#', 'attributionDomains' => { '@id' => 'toot:attributionDomains', '@type' => '@id' } },
   }.freeze

app/helpers/settings_helper.rb

@@ -10,16 +10,17 @@ module SettingsHelper
   end
 
   def featured_tags_hint(recently_used_tags)
-    safe_join(
-      [
-        t('simple_form.hints.featured_tag.name'),
-        safe_join(
-          links_for_featured_tags(recently_used_tags),
-          ', '
-        ),
-      ],
-      ' '
-    )
+    recently_used_tags.present? &&
+      safe_join(
+        [
+          t('simple_form.hints.featured_tag.name'),
+          safe_join(
+            links_for_featured_tags(recently_used_tags),
+            ', '
+          ),
+        ],
+        ' '
+      )
   end
 
   def session_device_icon(session)

app/helpers/webfinger_helper.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-module WebfingerHelper
-  def webfinger!(uri)
-    Webfinger.new(uri).perform
-  end
-end

app/javascript/hooks/useSearchParam.ts

@@ -0,0 +1,31 @@
+import { useMemo, useCallback } from 'react';
+
+import { useLocation, useHistory } from 'react-router';
+
+export function useSearchParams() {
+  const { search } = useLocation();
+
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+
+export function useSearchParam(name: string, defaultValue?: string) {
+  const searchParams = useSearchParams();
+  const history = useHistory();
+
+  const value = searchParams.get(name) ?? defaultValue;
+
+  const setValue = useCallback(
+    (value: string | null) => {
+      if (value === null) {
+        searchParams.delete(name);
+      } else {
+        searchParams.set(name, value);
+      }
+
+      history.push({ search: searchParams.toString() });
+    },
+    [history, name, searchParams],
+  );
+
+  return [value, setValue] as const;
+}

app/javascript/mastodon/actions/accounts.js

@@ -1,4 +1,5 @@
 import { browserHistory } from 'mastodon/components/router';
+import { debounceWithDispatchAndArguments } from 'mastodon/utils/debounce';
 
 import api, { getLinks } from '../api';
 
@@ -449,6 +450,20 @@ export function expandFollowingFail(id, error) {
   };
 }
 
+const debouncedFetchRelationships = debounceWithDispatchAndArguments((dispatch, ...newAccountIds) => {
+  if (newAccountIds.length === 0) {
+    return;
+  }
+
+  dispatch(fetchRelationshipsRequest(newAccountIds));
+
+  api().get(`/api/v1/accounts/relationships?with_suspended=true&${newAccountIds.map(id => `id[]=${id}`).join('&')}`).then(response => {
+    dispatch(fetchRelationshipsSuccess({ relationships: response.data }));
+  }).catch(error => {
+    dispatch(fetchRelationshipsFail(error));
+  });
+}, { delay: 500 });
+
 export function fetchRelationships(accountIds) {
   return (dispatch, getState) => {
     const state = getState();
@@ -460,13 +475,7 @@ export function fetchRelationships(accountIds) {
       return;
     }
 
-    dispatch(fetchRelationshipsRequest(newAccountIds));
-
-    api().get(`/api/v1/accounts/relationships?with_suspended=true&${newAccountIds.map(id => `id[]=${id}`).join('&')}`).then(response => {
-      dispatch(fetchRelationshipsSuccess({ relationships: response.data }));
-    }).catch(error => {
-      dispatch(fetchRelationshipsFail(error));
-    });
+    debouncedFetchRelationships(dispatch, ...newAccountIds);
   };
 }
 

app/javascript/mastodon/actions/alerts.js

@@ -1,5 +1,7 @@
 import { defineMessages } from 'react-intl';
 
+import { AxiosError } from 'axios';
+
 const messages = defineMessages({
   unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
   unexpectedMessage: { id: 'alert.unexpected.message', defaultMessage: 'An unexpected error occurred.' },
@@ -50,6 +52,11 @@ export const showAlertForError = (error, skipNotFound = false) => {
     });
   }
 
+  // An aborted request, e.g. due to reloading the browser window, it not really error
+  if (error.code === AxiosError.ECONNABORTED) {
+    return { type: ALERT_NOOP };
+  }
+
   console.error(error);
 
   return showAlert({

app/javascript/mastodon/actions/markers.ts

@@ -2,7 +2,6 @@ import { debounce } from 'lodash';
 
 import type { MarkerJSON } from 'mastodon/api_types/markers';
 import { getAccessToken } from 'mastodon/initial_state';
-import { selectUseGroupedNotifications } from 'mastodon/selectors/settings';
 import type { AppDispatch, RootState } from 'mastodon/store';
 import { createAppAsyncThunk } from 'mastodon/store/typed_functions';
 
@@ -38,8 +37,7 @@ export const synchronouslySubmitMarkers = createAppAsyncThunk(
       });
 
       return;
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    } else if ('navigator' && 'sendBeacon' in navigator) {
+    } else if ('sendBeacon' in navigator) {
       // Failing that, we can use sendBeacon, but we have to encode the data as
       // FormData for DoorKeeper to recognize the token.
       const formData = new FormData();
@@ -76,12 +74,7 @@ interface MarkerParam {
 }
 
 function getLastNotificationId(state: RootState): string | undefined {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return selectUseGroupedNotifications(state)
-    ? state.notificationGroups.lastReadId
-    : // @ts-expect-error state.notifications is not yet typed
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      state.getIn(['notifications', 'lastReadId']);
+  return state.notificationGroups.lastReadId;
 }
 
 const buildPostMarkersParams = (state: RootState) => {

app/javascript/mastodon/actions/notification_groups.ts

@@ -2,7 +2,7 @@ import { createAction } from '@reduxjs/toolkit';
 
 import {
   apiClearNotifications,
-  apiFetchNotifications,
+  apiFetchNotificationGroups,
 } from 'mastodon/api/notifications';
 import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
 import type {
@@ -68,10 +68,19 @@ function dispatchAssociatedRecords(
     dispatch(importFetchedStatuses(fetchedStatuses));
 }
 
+const supportedGroupedNotificationTypes = ['favourite', 'reblog'];
+
+export function shouldGroupNotificationType(type: string) {
+  return supportedGroupedNotificationTypes.includes(type);
+}
+
 export const fetchNotifications = createDataLoadingThunk(
   'notificationGroups/fetch',
   async (_params, { getState }) =>
-    apiFetchNotifications({ exclude_types: getExcludedTypes(getState()) }),
+    apiFetchNotificationGroups({
+      grouped_types: supportedGroupedNotificationTypes,
+      exclude_types: getExcludedTypes(getState()),
+    }),
   ({ notifications, accounts, statuses }, { dispatch }) => {
     dispatch(importFetchedAccounts(accounts));
     dispatch(importFetchedStatuses(statuses));
@@ -92,7 +101,8 @@ export const fetchNotifications = createDataLoadingThunk(
 export const fetchNotificationsGap = createDataLoadingThunk(
   'notificationGroups/fetchGap',
   async (params: { gap: NotificationGap }, { getState }) =>
-    apiFetchNotifications({
+    apiFetchNotificationGroups({
+      grouped_types: supportedGroupedNotificationTypes,
       max_id: params.gap.maxId,
       exclude_types: getExcludedTypes(getState()),
     }),
@@ -108,7 +118,8 @@ export const fetchNotificationsGap = createDataLoadingThunk(
 export const pollRecentNotifications = createDataLoadingThunk(
   'notificationGroups/pollRecentNotifications',
   async (_params, { getState }) => {
-    return apiFetchNotifications({
+    return apiFetchNotificationGroups({
+      grouped_types: supportedGroupedNotificationTypes,
       max_id: undefined,
       exclude_types: getExcludedTypes(getState()),
       // In slow mode, we don't want to include notifications that duplicate the already-displayed ones

app/javascript/mastodon/actions/notification_policies.ts

@@ -17,6 +17,6 @@ export const updateNotificationsPolicy = createDataLoadingThunk(
   (policy: Partial<NotificationPolicy>) => apiUpdateNotificationsPolicy(policy),
 );
 
-export const decreasePendingNotificationsCount = createAction<number>(
-  'notificationPolicy/decreasePendingNotificationCount',
+export const decreasePendingRequestsCount = createAction<number>(
+  'notificationPolicy/decreasePendingRequestsCount',
 );

app/javascript/mastodon/actions/notification_requests.ts

@@ -0,0 +1,214 @@
+import {
+  apiFetchNotificationRequest,
+  apiFetchNotificationRequests,
+  apiFetchNotifications,
+  apiAcceptNotificationRequest,
+  apiDismissNotificationRequest,
+  apiAcceptNotificationRequests,
+  apiDismissNotificationRequests,
+} from 'mastodon/api/notifications';
+import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
+import type {
+  ApiNotificationGroupJSON,
+  ApiNotificationJSON,
+} from 'mastodon/api_types/notifications';
+import type { ApiStatusJSON } from 'mastodon/api_types/statuses';
+import type { AppDispatch } from 'mastodon/store';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+import { importFetchedAccounts, importFetchedStatuses } from './importer';
+import { decreasePendingRequestsCount } from './notification_policies';
+
+// TODO: refactor with notification_groups
+function dispatchAssociatedRecords(
+  dispatch: AppDispatch,
+  notifications: ApiNotificationGroupJSON[] | ApiNotificationJSON[],
+) {
+  const fetchedAccounts: ApiAccountJSON[] = [];
+  const fetchedStatuses: ApiStatusJSON[] = [];
+
+  notifications.forEach((notification) => {
+    if (notification.type === 'admin.report') {
+      fetchedAccounts.push(notification.report.target_account);
+    }
+
+    if (notification.type === 'moderation_warning') {
+      fetchedAccounts.push(notification.moderation_warning.target_account);
+    }
+
+    if ('status' in notification && notification.status) {
+      fetchedStatuses.push(notification.status);
+    }
+  });
+
+  if (fetchedAccounts.length > 0)
+    dispatch(importFetchedAccounts(fetchedAccounts));
+
+  if (fetchedStatuses.length > 0)
+    dispatch(importFetchedStatuses(fetchedStatuses));
+}
+
+export const fetchNotificationRequests = createDataLoadingThunk(
+  'notificationRequests/fetch',
+  async (_params, { getState }) => {
+    let sinceId = undefined;
+
+    if (getState().notificationRequests.items.length > 0) {
+      sinceId = getState().notificationRequests.items[0]?.id;
+    }
+
+    return apiFetchNotificationRequests({
+      since_id: sinceId,
+    });
+  },
+  ({ requests, links }, { dispatch }) => {
+    const next = links.refs.find((link) => link.rel === 'next');
+
+    dispatch(importFetchedAccounts(requests.map((request) => request.account)));
+
+    return { requests, next: next?.uri };
+  },
+  {
+    condition: (_params, { getState }) =>
+      !getState().notificationRequests.isLoading,
+  },
+);
+
+export const fetchNotificationRequest = createDataLoadingThunk(
+  'notificationRequest/fetch',
+  async ({ id }: { id: string }) => apiFetchNotificationRequest(id),
+  {
+    condition: ({ id }, { getState }) =>
+      !(
+        getState().notificationRequests.current.item?.id === id ||
+        getState().notificationRequests.current.isLoading
+      ),
+  },
+);
+
+export const expandNotificationRequests = createDataLoadingThunk(
+  'notificationRequests/expand',
+  async (_, { getState }) => {
+    const nextUrl = getState().notificationRequests.next;
+    if (!nextUrl) throw new Error('missing URL');
+
+    return apiFetchNotificationRequests(undefined, nextUrl);
+  },
+  ({ requests, links }, { dispatch }) => {
+    const next = links.refs.find((link) => link.rel === 'next');
+
+    dispatch(importFetchedAccounts(requests.map((request) => request.account)));
+
+    return { requests, next: next?.uri };
+  },
+  {
+    condition: (_, { getState }) =>
+      !!getState().notificationRequests.next &&
+      !getState().notificationRequests.isLoading,
+  },
+);
+
+export const fetchNotificationsForRequest = createDataLoadingThunk(
+  'notificationRequest/fetchNotifications',
+  async ({ accountId }: { accountId: string }, { getState }) => {
+    const sinceId =
+      // @ts-expect-error current.notifications.items is not yet typed
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      getState().notificationRequests.current.notifications.items[0]?.get(
+        'id',
+      ) as string | undefined;
+
+    return apiFetchNotifications({
+      since_id: sinceId,
+      account_id: accountId,
+    });
+  },
+  ({ notifications, links }, { dispatch }) => {
+    const next = links.refs.find((link) => link.rel === 'next');
+
+    dispatchAssociatedRecords(dispatch, notifications);
+
+    return { notifications, next: next?.uri };
+  },
+  {
+    condition: ({ accountId }, { getState }) => {
+      const current = getState().notificationRequests.current;
+      return !(
+        current.item?.account_id === accountId &&
+        current.notifications.isLoading
+      );
+    },
+  },
+);
+
+export const expandNotificationsForRequest = createDataLoadingThunk(
+  'notificationRequest/expandNotifications',
+  async (_, { getState }) => {
+    const nextUrl = getState().notificationRequests.current.notifications.next;
+    if (!nextUrl) throw new Error('missing URL');
+
+    return apiFetchNotifications(undefined, nextUrl);
+  },
+  ({ notifications, links }, { dispatch }) => {
+    const next = links.refs.find((link) => link.rel === 'next');
+
+    dispatchAssociatedRecords(dispatch, notifications);
+
+    return { notifications, next: next?.uri };
+  },
+  {
+    condition: ({ accountId }: { accountId: string }, { getState }) => {
+      const url = getState().notificationRequests.current.notifications.next;
+
+      return (
+        !!url &&
+        !getState().notificationRequests.current.notifications.isLoading &&
+        getState().notificationRequests.current.item?.account_id === accountId
+      );
+    },
+  },
+);
+
+export const acceptNotificationRequest = createDataLoadingThunk(
+  'notificationRequest/accept',
+  ({ id }: { id: string }) => apiAcceptNotificationRequest(id),
+  (_data, { dispatch, discardLoadData }) => {
+    dispatch(decreasePendingRequestsCount(1));
+
+    // The payload is not used in any functions
+    return discardLoadData;
+  },
+);
+
+export const dismissNotificationRequest = createDataLoadingThunk(
+  'notificationRequest/dismiss',
+  ({ id }: { id: string }) => apiDismissNotificationRequest(id),
+  (_data, { dispatch, discardLoadData }) => {
+    dispatch(decreasePendingRequestsCount(1));
+
+    // The payload is not used in any functions
+    return discardLoadData;
+  },
+);
+
+export const acceptNotificationRequests = createDataLoadingThunk(
+  'notificationRequests/acceptBulk',
+  ({ ids }: { ids: string[] }) => apiAcceptNotificationRequests(ids),
+  (_data, { dispatch, discardLoadData, actionArg: { ids } }) => {
+    dispatch(decreasePendingRequestsCount(ids.length));
+
+    // The payload is not used in any functions
+    return discardLoadData;
+  },
+);
+
+export const dismissNotificationRequests = createDataLoadingThunk(
+  'notificationRequests/dismissBulk',
+  ({ ids }: { ids: string[] }) => apiDismissNotificationRequests(ids),
+  (_data, { dispatch, discardLoadData, actionArg: { ids } }) => {
+    dispatch(decreasePendingRequestsCount(ids.length));
+
+    // The payload is not used in any functions
+    return discardLoadData;
+  },
+);

app/javascript/mastodon/actions/notifications.js

@@ -10,7 +10,7 @@ import api, { getLinks } from '../api';
 import { unescapeHTML } from '../utils/html';
 import { requestNotificationPermission } from '../utils/notifications';
 
-import { fetchFollowRequests, fetchRelationships } from './accounts';
+import { fetchFollowRequests } from './accounts';
 import {
   importFetchedAccount,
   importFetchedAccounts,
@@ -18,7 +18,6 @@ import {
   importFetchedStatuses,
 } from './importer';
 import { submitMarkers } from './markers';
-import { decreasePendingNotificationsCount } from './notification_policies';
 import { notificationsUpdate } from "./notifications_typed";
 import { register as registerPushNotifications } from './push_notifications';
 import { saveSettings } from './settings';
@@ -44,26 +43,6 @@ export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
 export const NOTIFICATIONS_SET_BROWSER_SUPPORT    = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
 export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
 
-export const NOTIFICATION_REQUESTS_FETCH_REQUEST = 'NOTIFICATION_REQUESTS_FETCH_REQUEST';
-export const NOTIFICATION_REQUESTS_FETCH_SUCCESS = 'NOTIFICATION_REQUESTS_FETCH_SUCCESS';
-export const NOTIFICATION_REQUESTS_FETCH_FAIL    = 'NOTIFICATION_REQUESTS_FETCH_FAIL';
-
-export const NOTIFICATION_REQUESTS_EXPAND_REQUEST = 'NOTIFICATION_REQUESTS_EXPAND_REQUEST';
-export const NOTIFICATION_REQUESTS_EXPAND_SUCCESS = 'NOTIFICATION_REQUESTS_EXPAND_SUCCESS';
-export const NOTIFICATION_REQUESTS_EXPAND_FAIL    = 'NOTIFICATION_REQUESTS_EXPAND_FAIL';
-
-export const NOTIFICATION_REQUEST_FETCH_REQUEST = 'NOTIFICATION_REQUEST_FETCH_REQUEST';
-export const NOTIFICATION_REQUEST_FETCH_SUCCESS = 'NOTIFICATION_REQUEST_FETCH_SUCCESS';
-export const NOTIFICATION_REQUEST_FETCH_FAIL    = 'NOTIFICATION_REQUEST_FETCH_FAIL';
-
-export const NOTIFICATION_REQUEST_ACCEPT_REQUEST = 'NOTIFICATION_REQUEST_ACCEPT_REQUEST';
-export const NOTIFICATION_REQUEST_ACCEPT_SUCCESS = 'NOTIFICATION_REQUEST_ACCEPT_SUCCESS';
-export const NOTIFICATION_REQUEST_ACCEPT_FAIL    = 'NOTIFICATION_REQUEST_ACCEPT_FAIL';
-
-export const NOTIFICATION_REQUEST_DISMISS_REQUEST = 'NOTIFICATION_REQUEST_DISMISS_REQUEST';
-export const NOTIFICATION_REQUEST_DISMISS_SUCCESS = 'NOTIFICATION_REQUEST_DISMISS_SUCCESS';
-export const NOTIFICATION_REQUEST_DISMISS_FAIL    = 'NOTIFICATION_REQUEST_DISMISS_FAIL';
-
 export const NOTIFICATION_REQUESTS_ACCEPT_REQUEST = 'NOTIFICATION_REQUESTS_ACCEPT_REQUEST';
 export const NOTIFICATION_REQUESTS_ACCEPT_SUCCESS = 'NOTIFICATION_REQUESTS_ACCEPT_SUCCESS';
 export const NOTIFICATION_REQUESTS_ACCEPT_FAIL    = 'NOTIFICATION_REQUESTS_ACCEPT_FAIL';
@@ -72,33 +51,11 @@ export const NOTIFICATION_REQUESTS_DISMISS_REQUEST = 'NOTIFICATION_REQUESTS_DISM
 export const NOTIFICATION_REQUESTS_DISMISS_SUCCESS = 'NOTIFICATION_REQUESTS_DISMISS_SUCCESS';
 export const NOTIFICATION_REQUESTS_DISMISS_FAIL    = 'NOTIFICATION_REQUESTS_DISMISS_FAIL';
 
-export const NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST = 'NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST';
-export const NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS = 'NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS';
-export const NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL    = 'NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL';
-
-export const NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST = 'NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST';
-export const NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS = 'NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS';
-export const NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL    = 'NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL';
-
 defineMessages({
   mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
   group: { id: 'notifications.group', defaultMessage: '{count} notifications' },
 });
 
-const fetchRelatedRelationships = (dispatch, notifications) => {
-  const accountIds = notifications.filter(item => ['follow', 'follow_request', 'admin.sign_up'].indexOf(item.type) !== -1).map(item => item.account.id);
-
-  if (accountIds.length > 0) {
-    dispatch(fetchRelationships(accountIds));
-  }
-};
-
-const selectNotificationCountForRequest = (state, id) => {
-  const requests = state.getIn(['notificationRequests', 'items']);
-  const thisRequest = requests.find(request => request.get('id') === id);
-  return thisRequest ? thisRequest.get('notifications_count') : 0;
-};
-
 export const loadPending = () => ({
   type: NOTIFICATIONS_LOAD_PENDING,
 });
@@ -141,8 +98,6 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
 
 
       dispatch(notificationsUpdate({ notification, preferPendingItems, playSound: playSound && !filtered}));
-
-      fetchRelatedRelationships(dispatch, [notification]);
     } else if (playSound && !filtered) {
       dispatch({
         type: NOTIFICATIONS_UPDATE_NOOP,
@@ -234,7 +189,6 @@ export function expandNotifications({ maxId = undefined, forceLoad = false }) {
       dispatch(importFetchedAccounts(response.data.filter(item => item.report).map(item => item.report.target_account)));
 
       dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore, isLoadingRecent, isLoadingRecent && preferPendingItems));
-      fetchRelatedRelationships(dispatch, response.data);
       dispatch(submitMarkers());
     } catch(error) {
       dispatch(expandNotificationsFail(error, isLoadingMore));
@@ -343,296 +297,3 @@ export function setBrowserPermission (value) {
     value,
   };
 }
-
-export const fetchNotificationRequests = () => (dispatch, getState) => {
-  const params = {};
-
-  if (getState().getIn(['notificationRequests', 'isLoading'])) {
-    return;
-  }
-
-  if (getState().getIn(['notificationRequests', 'items'])?.size > 0) {
-    params.since_id = getState().getIn(['notificationRequests', 'items', 0, 'id']);
-  }
-
-  dispatch(fetchNotificationRequestsRequest());
-
-  api().get('/api/v1/notifications/requests', { params }).then(response => {
-    const next = getLinks(response).refs.find(link => link.rel === 'next');
-    dispatch(importFetchedAccounts(response.data.map(x => x.account)));
-    dispatch(fetchNotificationRequestsSuccess(response.data, next ? next.uri : null));
-  }).catch(err => {
-    dispatch(fetchNotificationRequestsFail(err));
-  });
-};
-
-export const fetchNotificationRequestsRequest = () => ({
-  type: NOTIFICATION_REQUESTS_FETCH_REQUEST,
-});
-
-export const fetchNotificationRequestsSuccess = (requests, next) => ({
-  type: NOTIFICATION_REQUESTS_FETCH_SUCCESS,
-  requests,
-  next,
-});
-
-export const fetchNotificationRequestsFail = error => ({
-  type: NOTIFICATION_REQUESTS_FETCH_FAIL,
-  error,
-});
-
-export const expandNotificationRequests = () => (dispatch, getState) => {
-  const url = getState().getIn(['notificationRequests', 'next']);
-
-  if (!url || getState().getIn(['notificationRequests', 'isLoading'])) {
-    return;
-  }
-
-  dispatch(expandNotificationRequestsRequest());
-
-  api().get(url).then(response => {
-    const next = getLinks(response).refs.find(link => link.rel === 'next');
-    dispatch(importFetchedAccounts(response.data.map(x => x.account)));
-    dispatch(expandNotificationRequestsSuccess(response.data, next?.uri));
-  }).catch(err => {
-    dispatch(expandNotificationRequestsFail(err));
-  });
-};
-
-export const expandNotificationRequestsRequest = () => ({
-  type: NOTIFICATION_REQUESTS_EXPAND_REQUEST,
-});
-
-export const expandNotificationRequestsSuccess = (requests, next) => ({
-  type: NOTIFICATION_REQUESTS_EXPAND_SUCCESS,
-  requests,
-  next,
-});
-
-export const expandNotificationRequestsFail = error => ({
-  type: NOTIFICATION_REQUESTS_EXPAND_FAIL,
-  error,
-});
-
-export const fetchNotificationRequest = id => (dispatch, getState) => {
-  const current = getState().getIn(['notificationRequests', 'current']);
-
-  if (current.getIn(['item', 'id']) === id || current.get('isLoading')) {
-    return;
-  }
-
-  dispatch(fetchNotificationRequestRequest(id));
-
-  api().get(`/api/v1/notifications/requests/${id}`).then(({ data }) => {
-    dispatch(fetchNotificationRequestSuccess(data));
-  }).catch(err => {
-    dispatch(fetchNotificationRequestFail(id, err));
-  });
-};
-
-export const fetchNotificationRequestRequest = id => ({
-  type: NOTIFICATION_REQUEST_FETCH_REQUEST,
-  id,
-});
-
-export const fetchNotificationRequestSuccess = request => ({
-  type: NOTIFICATION_REQUEST_FETCH_SUCCESS,
-  request,
-});
-
-export const fetchNotificationRequestFail = (id, error) => ({
-  type: NOTIFICATION_REQUEST_FETCH_FAIL,
-  id,
-  error,
-});
-
-export const acceptNotificationRequest = (id) => (dispatch, getState) => {
-  const count = selectNotificationCountForRequest(getState(), id);
-  dispatch(acceptNotificationRequestRequest(id));
-
-  api().post(`/api/v1/notifications/requests/${id}/accept`).then(() => {
-    dispatch(acceptNotificationRequestSuccess(id));
-    dispatch(decreasePendingNotificationsCount(count));
-  }).catch(err => {
-    dispatch(acceptNotificationRequestFail(id, err));
-  });
-};
-
-export const acceptNotificationRequestRequest = id => ({
-  type: NOTIFICATION_REQUEST_ACCEPT_REQUEST,
-  id,
-});
-
-export const acceptNotificationRequestSuccess = id => ({
-  type: NOTIFICATION_REQUEST_ACCEPT_SUCCESS,
-  id,
-});
-
-export const acceptNotificationRequestFail = (id, error) => ({
-  type: NOTIFICATION_REQUEST_ACCEPT_FAIL,
-  id,
-  error,
-});
-
-export const dismissNotificationRequest = (id) => (dispatch, getState) => {
-  const count = selectNotificationCountForRequest(getState(), id);
-  dispatch(dismissNotificationRequestRequest(id));
-
-  api().post(`/api/v1/notifications/requests/${id}/dismiss`).then(() =>{
-    dispatch(dismissNotificationRequestSuccess(id));
-    dispatch(decreasePendingNotificationsCount(count));
-  }).catch(err => {
-    dispatch(dismissNotificationRequestFail(id, err));
-  });
-};
-
-export const dismissNotificationRequestRequest = id => ({
-  type: NOTIFICATION_REQUEST_DISMISS_REQUEST,
-  id,
-});
-
-export const dismissNotificationRequestSuccess = id => ({
-  type: NOTIFICATION_REQUEST_DISMISS_SUCCESS,
-  id,
-});
-
-export const dismissNotificationRequestFail = (id, error) => ({
-  type: NOTIFICATION_REQUEST_DISMISS_FAIL,
-  id,
-  error,
-});
-
-export const acceptNotificationRequests = (ids) => (dispatch, getState) => {
-  const count = ids.reduce((count, id) => count + selectNotificationCountForRequest(getState(), id), 0);
-  dispatch(acceptNotificationRequestsRequest(ids));
-
-  api().post(`/api/v1/notifications/requests/accept`, { id: ids }).then(() => {
-    dispatch(acceptNotificationRequestsSuccess(ids));
-    dispatch(decreasePendingNotificationsCount(count));
-  }).catch(err => {
-    dispatch(acceptNotificationRequestFail(ids, err));
-  });
-};
-
-export const acceptNotificationRequestsRequest = ids => ({
-  type: NOTIFICATION_REQUESTS_ACCEPT_REQUEST,
-  ids,
-});
-
-export const acceptNotificationRequestsSuccess = ids => ({
-  type: NOTIFICATION_REQUESTS_ACCEPT_SUCCESS,
-  ids,
-});
-
-export const acceptNotificationRequestsFail = (ids, error) => ({
-  type: NOTIFICATION_REQUESTS_ACCEPT_FAIL,
-  ids,
-  error,
-});
-
-export const dismissNotificationRequests = (ids) => (dispatch, getState) => {
-  const count = ids.reduce((count, id) => count + selectNotificationCountForRequest(getState(), id), 0);
-  dispatch(acceptNotificationRequestsRequest(ids));
-
-  api().post(`/api/v1/notifications/requests/dismiss`, { id: ids }).then(() => {
-    dispatch(dismissNotificationRequestsSuccess(ids));
-    dispatch(decreasePendingNotificationsCount(count));
-  }).catch(err => {
-    dispatch(dismissNotificationRequestFail(ids, err));
-  });
-};
-
-export const dismissNotificationRequestsRequest = ids => ({
-  type: NOTIFICATION_REQUESTS_DISMISS_REQUEST,
-  ids,
-});
-
-export const dismissNotificationRequestsSuccess = ids => ({
-  type: NOTIFICATION_REQUESTS_DISMISS_SUCCESS,
-  ids,
-});
-
-export const dismissNotificationRequestsFail = (ids, error) => ({
-  type: NOTIFICATION_REQUESTS_DISMISS_FAIL,
-  ids,
-  error,
-});
-
-export const fetchNotificationsForRequest = accountId => (dispatch, getState) => {
-  const current = getState().getIn(['notificationRequests', 'current']);
-  const params = { account_id: accountId };
-
-  if (current.getIn(['item', 'account']) === accountId) {
-    if (current.getIn(['notifications', 'isLoading'])) {
-      return;
-    }
-
-    if (current.getIn(['notifications', 'items'])?.size > 0) {
-      params.since_id = current.getIn(['notifications', 'items', 0, 'id']);
-    }
-  }
-
-  dispatch(fetchNotificationsForRequestRequest());
-
-  api().get('/api/v1/notifications', { params }).then(response => {
-    const next = getLinks(response).refs.find(link => link.rel === 'next');
-    dispatch(importFetchedAccounts(response.data.map(item => item.account)));
-    dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
-    dispatch(importFetchedAccounts(response.data.filter(item => item.report).map(item => item.report.target_account)));
-
-    dispatch(fetchNotificationsForRequestSuccess(response.data, next?.uri));
-  }).catch(err => {
-    dispatch(fetchNotificationsForRequestFail(err));
-  });
-};
-
-export const fetchNotificationsForRequestRequest = () => ({
-  type: NOTIFICATIONS_FOR_REQUEST_FETCH_REQUEST,
-});
-
-export const fetchNotificationsForRequestSuccess = (notifications, next) => ({
-  type: NOTIFICATIONS_FOR_REQUEST_FETCH_SUCCESS,
-  notifications,
-  next,
-});
-
-export const fetchNotificationsForRequestFail = (error) => ({
-  type: NOTIFICATIONS_FOR_REQUEST_FETCH_FAIL,
-  error,
-});
-
-export const expandNotificationsForRequest = () => (dispatch, getState) => {
-  const url = getState().getIn(['notificationRequests', 'current', 'notifications', 'next']);
-
-  if (!url || getState().getIn(['notificationRequests', 'current', 'notifications', 'isLoading'])) {
-    return;
-  }
-
-  dispatch(expandNotificationsForRequestRequest());
-
-  api().get(url).then(response => {
-    const next = getLinks(response).refs.find(link => link.rel === 'next');
-    dispatch(importFetchedAccounts(response.data.map(item => item.account)));
-    dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
-    dispatch(importFetchedAccounts(response.data.filter(item => item.report).map(item => item.report.target_account)));
-
-    dispatch(expandNotificationsForRequestSuccess(response.data, next?.uri));
-  }).catch(err => {
-    dispatch(expandNotificationsForRequestFail(err));
-  });
-};
-
-export const expandNotificationsForRequestRequest = () => ({
-  type: NOTIFICATIONS_FOR_REQUEST_EXPAND_REQUEST,
-});
-
-export const expandNotificationsForRequestSuccess = (notifications, next) => ({
-  type: NOTIFICATIONS_FOR_REQUEST_EXPAND_SUCCESS,
-  notifications,
-  next,
-});
-
-export const expandNotificationsForRequestFail = (error) => ({
-  type: NOTIFICATIONS_FOR_REQUEST_EXPAND_FAIL,
-  error,
-});

app/javascript/mastodon/actions/notifications_migration.tsx

@@ -1,14 +1,10 @@
-import { selectUseGroupedNotifications } from 'mastodon/selectors/settings';
 import { createAppAsyncThunk } from 'mastodon/store';
 
 import { fetchNotifications } from './notification_groups';
-import { expandNotifications } from './notifications';
 
 export const initializeNotifications = createAppAsyncThunk(
   'notifications/initialize',
-  (_, { dispatch, getState }) => {
-    if (selectUseGroupedNotifications(getState()))
-      void dispatch(fetchNotifications());
-    else void dispatch(expandNotifications({}));
+  (_, { dispatch }) => {
+    void dispatch(fetchNotifications());
   },
 );

app/javascript/mastodon/actions/streaming.js

@@ -1,7 +1,5 @@
 // @ts-check
 
-import { selectUseGroupedNotifications } from 'mastodon/selectors/settings';
-
 import { getLocale } from '../locales';
 import { connectStream } from '../stream';
 
@@ -105,19 +103,16 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
           const notificationJSON = JSON.parse(data.payload);
           dispatch(updateNotifications(notificationJSON, messages, locale));
           // TODO: remove this once the groups feature replaces the previous one
-          if(selectUseGroupedNotifications(getState())) {
-            dispatch(processNewNotificationForGroups(notificationJSON));
-          }
+          dispatch(processNewNotificationForGroups(notificationJSON));
           break;
         }
-        case 'notifications_merged':
+        case 'notifications_merged': {
           const state = getState();
           if (state.notifications.top || !state.notifications.mounted)
             dispatch(expandNotifications({ forceLoad: true, maxId: undefined }));
-          if (selectUseGroupedNotifications(state)) {
-            dispatch(refreshStaleNotificationGroups());
-          }
+          dispatch(refreshStaleNotificationGroups());
           break;
+        }
         case 'conversation':
           // @ts-expect-error
           dispatch(updateConversations(JSON.parse(data.payload)));
@@ -141,21 +136,15 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
 
 /**
  * @param {Function} dispatch
- * @param {Function} getState
  */
-async function refreshHomeTimelineAndNotification(dispatch, getState) {
+async function refreshHomeTimelineAndNotification(dispatch) {
   await dispatch(expandHomeTimeline({ maxId: undefined }));
 
-  // TODO: remove this once the groups feature replaces the previous one
-  if(selectUseGroupedNotifications(getState())) {
-    // TODO: polling for merged notifications
-    try {
-      await dispatch(pollRecentGroupNotifications());
-    } catch {
-      // TODO
-    }
-  } else {
-    await dispatch(expandNotifications({}));
+  // TODO: polling for merged notifications
+  try {
+    await dispatch(pollRecentGroupNotifications());
+  } catch {
+    // TODO
   }
 
   await dispatch(fetchAnnouncements());

app/javascript/mastodon/api.ts

@@ -42,6 +42,9 @@ const authorizationTokenFromInitialState = (): RawAxiosRequestHeaders => {
 // eslint-disable-next-line import/no-default-export
 export default function api(withAuthorization = true) {
   return axios.create({
+    transitional: {
+      clarifyTimeoutError: true,
+    },
     headers: {
       ...csrfHeader,
       ...(withAuthorization ? authorizationTokenFromInitialState() : {}),
@@ -67,6 +70,7 @@ export async function apiRequest<ApiResponse = unknown>(
   args: {
     params?: RequestParamsOrData;
     data?: RequestParamsOrData;
+    timeout?: number;
   } = {},
 ) {
   const { data } = await api().request<ApiResponse>({

app/javascript/mastodon/api/notifications.ts

@@ -1,14 +1,44 @@
-import api, { apiRequest, getLinks } from 'mastodon/api';
-import type { ApiNotificationGroupsResultJSON } from 'mastodon/api_types/notifications';
+import api, {
+  apiRequest,
+  getLinks,
+  apiRequestGet,
+  apiRequestPost,
+} from 'mastodon/api';
+import type {
+  ApiNotificationGroupsResultJSON,
+  ApiNotificationRequestJSON,
+  ApiNotificationJSON,
+} from 'mastodon/api_types/notifications';
 
-export const apiFetchNotifications = async (params?: {
+export const apiFetchNotifications = async (
+  params?: {
+    account_id?: string;
+    since_id?: string;
+  },
+  url?: string,
+) => {
+  const response = await api().request<ApiNotificationJSON[]>({
+    method: 'GET',
+    url: url ?? '/api/v1/notifications',
+    params,
+  });
+
+  return {
+    notifications: response.data,
+    links: getLinks(response),
+  };
+};
+
+export const apiFetchNotificationGroups = async (params?: {
+  url?: string;
+  grouped_types?: string[];
   exclude_types?: string[];
   max_id?: string;
   since_id?: string;
 }) => {
   const response = await api().request<ApiNotificationGroupsResultJSON>({
     method: 'GET',
-    url: '/api/v2_alpha/notifications',
+    url: '/api/v2/notifications',
     params,
   });
 
@@ -24,3 +54,43 @@ export const apiFetchNotifications = async (params?: {
 
 export const apiClearNotifications = () =>
   apiRequest<undefined>('POST', 'v1/notifications/clear');
+
+export const apiFetchNotificationRequests = async (
+  params?: {
+    since_id?: string;
+  },
+  url?: string,
+) => {
+  const response = await api().request<ApiNotificationRequestJSON[]>({
+    method: 'GET',
+    url: url ?? '/api/v1/notifications/requests',
+    params,
+  });
+
+  return {
+    requests: response.data,
+    links: getLinks(response),
+  };
+};
+
+export const apiFetchNotificationRequest = async (id: string) => {
+  return apiRequestGet<ApiNotificationRequestJSON>(
+    `v1/notifications/requests/${id}`,
+  );
+};
+
+export const apiAcceptNotificationRequest = async (id: string) => {
+  return apiRequestPost(`v1/notifications/requests/${id}/accept`);
+};
+
+export const apiDismissNotificationRequest = async (id: string) => {
+  return apiRequestPost(`v1/notifications/requests/${id}/dismiss`);
+};
+
+export const apiAcceptNotificationRequests = async (id: string[]) => {
+  return apiRequestPost('v1/notifications/requests/accept', { id });
+};
+
+export const apiDismissNotificationRequests = async (id: string[]) => {
+  return apiRequestPost('v1/notifications/requests/dismiss', { id });
+};

app/javascript/mastodon/api_types/notifications.ts

@@ -149,3 +149,12 @@ export interface ApiNotificationGroupsResultJSON {
   statuses: ApiStatusJSON[];
   notification_groups: ApiNotificationGroupJSON[];
 }
+
+export interface ApiNotificationRequestJSON {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  notifications_count: string;
+  account: ApiAccountJSON;
+  last_status?: ApiStatusJSON;
+}

app/javascript/mastodon/components/alt_text_badge.tsx

@@ -0,0 +1,67 @@
+import { useState, useCallback, useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import Overlay from 'react-overlays/Overlay';
+import type {
+  OffsetValue,
+  UsePopperOptions,
+} from 'react-overlays/esm/usePopper';
+
+const offset = [0, 4] as OffsetValue;
+const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
+
+export const AltTextBadge: React.FC<{
+  description: string;
+}> = ({ description }) => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleClick = useCallback(() => {
+    setOpen((v) => !v);
+  }, [setOpen]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <>
+      <button
+        ref={anchorRef}
+        className='media-gallery__alt__label'
+        onClick={handleClick}
+      >
+        ALT
+      </button>
+
+      <Overlay
+        rootClose
+        onHide={handleClose}
+        show={open}
+        target={anchorRef.current}
+        placement='top-end'
+        flip
+        offset={offset}
+        popperConfig={popperConfig}
+      >
+        {({ props }) => (
+          <div {...props} className='hover-card-controller'>
+            <div
+              className='media-gallery__alt__popover dropdown-animation'
+              role='tooltip'
+            >
+              <h4>
+                <FormattedMessage
+                  id='alt_text_badge.title'
+                  defaultMessage='Alt text'
+                />
+              </h4>
+              <p>{description}</p>
+            </div>
+          </div>
+        )}
+      </Overlay>
+    </>
+  );
+};

app/javascript/mastodon/components/button.tsx

@@ -7,6 +7,7 @@ interface BaseProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
+  dangerous?: boolean;
 }
 
 interface PropsChildren extends PropsWithChildren<BaseProps> {
@@ -26,6 +27,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  dangerous,
   className,
   title,
   text,
@@ -46,6 +48,7 @@ export const Button: React.FC<Props> = ({
       className={classNames('button', className, {
         'button-secondary': secondary,
         'button--block': block,
+        'button--dangerous': dangerous,
       })}
       disabled={disabled}
       onClick={handleClick}

app/javascript/mastodon/components/follow_button.tsx

@@ -75,10 +75,10 @@ export const FollowButton: React.FC<{
     label = <LoadingIndicator />;
   } else if (relationship.following && relationship.followed_by) {
     label = intl.formatMessage(messages.mutual);
-  } else if (!relationship.following && relationship.followed_by) {
-    label = intl.formatMessage(messages.followBack);
   } else if (relationship.following || relationship.requested) {
     label = intl.formatMessage(messages.unfollow);
+  } else if (relationship.followed_by) {
+    label = intl.formatMessage(messages.followBack);
   } else {
     label = intl.formatMessage(messages.follow);
   }

app/javascript/mastodon/components/media_gallery.jsx

@@ -10,7 +10,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { debounce } from 'lodash';
 
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
+import { formatTime } from 'mastodon/features/video';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 
@@ -57,7 +59,7 @@ class Item extends PureComponent {
 
   hoverToPlay () {
     const { attachment } = this.props;
-    return !this.getAutoPlay() && attachment.get('type') === 'gifv';
+    return !this.getAutoPlay() && ['gifv', 'video'].includes(attachment.get('type'));
   }
 
   handleClick = (e) => {
@@ -96,7 +98,7 @@ class Item extends PureComponent {
     }
 
     if (attachment.get('description')?.length > 0) {
-      badges.push(<span key='alt' className='media-gallery__alt__label'>ALT</span>);
+      badges.push(<AltTextBadge key='alt' description={attachment.get('description')} />);
     }
 
     const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
@@ -150,10 +152,15 @@ class Item extends PureComponent {
           />
         </a>
       );
-    } else if (attachment.get('type') === 'gifv') {
+    } else if (['gifv', 'video'].includes(attachment.get('type'))) {
       const autoPlay = this.getAutoPlay();
+      const duration = attachment.getIn(['meta', 'original', 'duration']);
 
-      badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
+      if (attachment.get('type') === 'gifv') {
+        badges.push(<span key='gif' className='media-gallery__alt__label media-gallery__alt__label--non-interactive'>GIF</span>);
+      } else {
+        badges.push(<span key='video' className='media-gallery__alt__label media-gallery__alt__label--non-interactive'>{formatTime(Math.floor(duration))}</span>);
+      }
 
       thumbnail = (
         <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
@@ -167,6 +174,7 @@ class Item extends PureComponent {
             onClick={this.handleClick}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
+            onLoadedData={this.handleImageLoad}
             autoPlay={autoPlay}
             playsInline
             loop
@@ -188,7 +196,7 @@ class Item extends PureComponent {
 
         {visible && thumbnail}
 
-        {badges && (
+        {visible && badges && (
           <div className='media-gallery__item__badges'>
             {badges}
           </div>
@@ -328,14 +336,14 @@ class MediaGallery extends PureComponent {
 
     return (
       <div className={`media-gallery media-gallery--layout-${size}`} style={style} ref={this.handleRef}>
+        {children}
+
         {(!visible || uncached) && (
           <div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
             {spoilerButton}
           </div>
         )}
 
-        {children}
-
         {(visible && !uncached) && (
           <div className='media-gallery__actions'>
             <button className='media-gallery__actions__pill' onClick={this.handleOpen}><FormattedMessage id='media_gallery.hide' defaultMessage='Hide' /></button>

app/javascript/mastodon/components/modal_root.jsx

@@ -148,7 +148,7 @@ class ModalRoot extends PureComponent {
     return (
       <div className='modal-root' ref={this.setRef}>
         <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
-          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.7)` : null }} />
+          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.9)` : null }} />
           <div role='dialog' className='modal-root__container'>{children}</div>
         </div>
       </div>

app/javascript/mastodon/components/navigation_portal.tsx

@@ -4,22 +4,22 @@ import AccountNavigation from 'mastodon/features/account/navigation';
 import Trends from 'mastodon/features/getting_started/containers/trends_container';
 import { showTrends } from 'mastodon/initial_state';
 
-const DefaultNavigation: React.FC = () =>
-  showTrends ? (
-    <>
-      <div className='flex-spacer' />
-      <Trends />
-    </>
-  ) : null;
+const DefaultNavigation: React.FC = () => (showTrends ? <Trends /> : null);
 
 export const NavigationPortal: React.FC = () => (
-  <Switch>
-    <Route path='/@:acct' exact component={AccountNavigation} />
-    <Route path='/@:acct/tagged/:tagged?' exact component={AccountNavigation} />
-    <Route path='/@:acct/with_replies' exact component={AccountNavigation} />
-    <Route path='/@:acct/followers' exact component={AccountNavigation} />
-    <Route path='/@:acct/following' exact component={AccountNavigation} />
-    <Route path='/@:acct/media' exact component={AccountNavigation} />
-    <Route component={DefaultNavigation} />
-  </Switch>
+  <div className='navigation-panel__portal'>
+    <Switch>
+      <Route path='/@:acct' exact component={AccountNavigation} />
+      <Route
+        path='/@:acct/tagged/:tagged?'
+        exact
+        component={AccountNavigation}
+      />
+      <Route path='/@:acct/with_replies' exact component={AccountNavigation} />
+      <Route path='/@:acct/followers' exact component={AccountNavigation} />
+      <Route path='/@:acct/following' exact component={AccountNavigation} />
+      <Route path='/@:acct/media' exact component={AccountNavigation} />
+      <Route component={DefaultNavigation} />
+    </Switch>
+  </div>
 );

app/javascript/mastodon/components/router.tsx

@@ -51,7 +51,8 @@ function normalizePath(
 
   if (
     layoutFromWindow() === 'multi-column' &&
-    !location.pathname?.startsWith('/deck')
+    location.pathname &&
+    !location.pathname.startsWith('/deck')
   ) {
     location.pathname = `/deck${location.pathname}`;
   }

app/javascript/mastodon/components/status.jsx

@@ -454,7 +454,25 @@ class Status extends ImmutablePureComponent {
     } else if (status.get('media_attachments').size > 0) {
       const language = status.getIn(['translation', 'language']) || status.get('language');
 
-      if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+      if (['image', 'gifv'].includes(status.getIn(['media_attachments', 0, 'type'])) || status.get('media_attachments').size > 1) {
+        media = (
+          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
+            {Component => (
+              <Component
+                media={status.get('media_attachments')}
+                lang={language}
+                sensitive={status.get('sensitive')}
+                height={110}
+                onOpenMedia={this.handleOpenMedia}
+                cacheWidth={this.props.cacheMediaWidth}
+                defaultWidth={this.props.cachedMediaWidth}
+                visible={this.state.showMedia}
+                onToggleVisibility={this.handleToggleMediaVisibility}
+              />
+            )}
+          </Bundle>
+        );
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
         const attachment = status.getIn(['media_attachments', 0]);
         const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
@@ -506,24 +524,6 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
-      } else {
-        media = (
-          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
-            {Component => (
-              <Component
-                media={status.get('media_attachments')}
-                lang={language}
-                sensitive={status.get('sensitive')}
-                height={110}
-                onOpenMedia={this.handleOpenMedia}
-                cacheWidth={this.props.cacheMediaWidth}
-                defaultWidth={this.props.cachedMediaWidth}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>
-        );
       }
     } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
       media = (

app/javascript/mastodon/components/status_action_bar.jsx

@@ -375,20 +375,29 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
-        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
-        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
-        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
-
-        <DropdownMenuContainer
-          scrollKey={scrollKey}
-          status={status}
-          items={menu}
-          icon='ellipsis-h'
-          iconComponent={MoreHorizIcon}
-          direction='right'
-          title={intl.formatMessage(messages.more)}
-        />
+        <div className='status__action-bar__button-wrapper'>
+          <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
+        </div>
+        <div className='status__action-bar__button-wrapper'>
+          <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        </div>
+        <div className='status__action-bar__button-wrapper'>
+          <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        </div>
+        <div className='status__action-bar__button-wrapper'>
+          <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
+        </div>
+        <div className='status__action-bar__button-wrapper'>
+          <DropdownMenuContainer
+            scrollKey={scrollKey}
+            status={status}
+            items={menu}
+            icon='ellipsis-h'
+            iconComponent={MoreHorizIcon}
+            direction='right'
+            title={intl.formatMessage(messages.more)}
+          />
+        </div>
       </div>
     );
   }

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

@@ -92,10 +92,10 @@ const messageForFollowButton = relationship => {
 
   if (relationship.get('following') && relationship.get('followed_by')) {
     return messages.mutual;
-  } else if (!relationship.get('following') && relationship.get('followed_by')) {
-    return messages.followBack;
   } else if (relationship.get('following') || relationship.get('requested')) {
     return messages.unfollow;
+  } else if (relationship.get('followed_by')) {
+    return messages.followBack;
   } else {
     return messages.follow;
   }

app/javascript/mastodon/features/account/navigation.jsx

@@ -43,10 +43,7 @@ class AccountNavigation extends PureComponent {
     }
 
     return (
-      <>
-        <div className='flex-spacer' />
-        <FeaturedTags accountId={accountId} tagged={tagged} />
-      </>
+      <FeaturedTags accountId={accountId} tagged={tagged} />
     );
   }
 

app/javascript/mastodon/features/account_gallery/components/media_item.jsx

@@ -1,158 +0,0 @@
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import AudiotrackIcon from '@/material-icons/400-24px/music_note.svg?react';
-import PlayArrowIcon from '@/material-icons/400-24px/play_arrow.svg?react';
-import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
-import { Blurhash } from 'mastodon/components/blurhash';
-import { Icon }  from 'mastodon/components/icon';
-import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
-
-export default class MediaItem extends ImmutablePureComponent {
-
-  static propTypes = {
-    attachment: ImmutablePropTypes.map.isRequired,
-    displayWidth: PropTypes.number.isRequired,
-    onOpenMedia: PropTypes.func.isRequired,
-  };
-
-  state = {
-    visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
-    loaded: false,
-  };
-
-  handleImageLoad = () => {
-    this.setState({ loaded: true });
-  };
-
-  handleMouseEnter = e => {
-    if (this.hoverToPlay()) {
-      e.target.play();
-    }
-  };
-
-  handleMouseLeave = e => {
-    if (this.hoverToPlay()) {
-      e.target.pause();
-      e.target.currentTime = 0;
-    }
-  };
-
-  hoverToPlay () {
-    return !autoPlayGif && ['gifv', 'video'].indexOf(this.props.attachment.get('type')) !== -1;
-  }
-
-  handleClick = e => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-
-      if (this.state.visible) {
-        this.props.onOpenMedia(this.props.attachment);
-      } else {
-        this.setState({ visible: true });
-      }
-    }
-  };
-
-  render () {
-    const { attachment, displayWidth } = this.props;
-    const { visible, loaded } = this.state;
-
-    const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
-    const height = width;
-    const status = attachment.get('status');
-    const title  = status.get('spoiler_text') || attachment.get('description');
-
-    let thumbnail, label, icon, content;
-
-    if (!visible) {
-      icon = (
-        <span className='account-gallery__item__icons'>
-          <Icon id='eye-slash' icon={VisibilityOffIcon} />
-        </span>
-      );
-    } else {
-      if (['audio', 'video'].includes(attachment.get('type'))) {
-        content = (
-          <img
-            src={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
-            alt={attachment.get('description')}
-            lang={status.get('language')}
-            onLoad={this.handleImageLoad}
-          />
-        );
-
-        if (attachment.get('type') === 'audio') {
-          label = <Icon id='music' icon={AudiotrackIcon} />;
-        } else {
-          label = <Icon id='play' icon={PlayArrowIcon} />;
-        }
-      } else if (attachment.get('type') === 'image') {
-        const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
-        const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
-        const x      = ((focusX /  2) + .5) * 100;
-        const y      = ((focusY / -2) + .5) * 100;
-
-        content = (
-          <img
-            src={attachment.get('preview_url')}
-            alt={attachment.get('description')}
-            lang={status.get('language')}
-            style={{ objectPosition: `${x}% ${y}%` }}
-            onLoad={this.handleImageLoad}
-          />
-        );
-      } else if (attachment.get('type') === 'gifv') {
-        content = (
-          <video
-            className='media-gallery__item-gifv-thumbnail'
-            aria-label={attachment.get('description')}
-            title={attachment.get('description')}
-            lang={status.get('language')}
-            role='application'
-            src={attachment.get('url')}
-            onMouseEnter={this.handleMouseEnter}
-            onMouseLeave={this.handleMouseLeave}
-            autoPlay={autoPlayGif}
-            playsInline
-            loop
-            muted
-          />
-        );
-
-        label = 'GIF';
-      }
-
-      thumbnail = (
-        <div className='media-gallery__gifv'>
-          {content}
-
-          {label && (
-            <div className='media-gallery__item__badges'>
-              <span className='media-gallery__gifv__label'>{label}</span>
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    return (
-      <div className='account-gallery__item' style={{ width, height }}>
-        <a className='media-gallery__item-thumbnail' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'>
-          <Blurhash
-            hash={attachment.get('blurhash')}
-            className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })}
-            dummy={!useBlurhash}
-          />
-
-          {visible ? thumbnail : icon}
-        </a>
-      </div>
-    );
-  }
-
-}

app/javascript/mastodon/features/account_gallery/components/media_item.tsx

@@ -0,0 +1,200 @@
+import { useState, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import HeadphonesIcon from '@/material-icons/400-24px/headphones-fill.svg?react';
+import MovieIcon from '@/material-icons/400-24px/movie-fill.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
+import { Blurhash } from 'mastodon/components/blurhash';
+import { Icon } from 'mastodon/components/icon';
+import { formatTime } from 'mastodon/features/video';
+import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
+import type { Status, MediaAttachment } from 'mastodon/models/status';
+
+export const MediaItem: React.FC<{
+  attachment: MediaAttachment;
+  onOpenMedia: (arg0: MediaAttachment) => void;
+}> = ({ attachment, onOpenMedia }) => {
+  const [visible, setVisible] = useState(
+    (displayMedia !== 'hide_all' &&
+      !attachment.getIn(['status', 'sensitive'])) ||
+      displayMedia === 'show_all',
+  );
+  const [loaded, setLoaded] = useState(false);
+
+  const handleImageLoad = useCallback(() => {
+    setLoaded(true);
+  }, [setLoaded]);
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLVideoElement>) => {
+      if (e.target instanceof HTMLVideoElement) {
+        void e.target.play();
+      }
+    },
+    [],
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLVideoElement>) => {
+      if (e.target instanceof HTMLVideoElement) {
+        e.target.pause();
+        e.target.currentTime = 0;
+      }
+    },
+    [],
+  );
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+
+        if (visible) {
+          onOpenMedia(attachment);
+        } else {
+          setVisible(true);
+        }
+      }
+    },
+    [attachment, visible, onOpenMedia, setVisible],
+  );
+
+  const status = attachment.get('status') as Status;
+  const description = (attachment.getIn(['translation', 'description']) ||
+    attachment.get('description')) as string | undefined;
+  const previewUrl = attachment.get('preview_url') as string;
+  const fullUrl = attachment.get('url') as string;
+  const avatarUrl = status.getIn(['account', 'avatar_static']) as string;
+  const lang = status.get('language') as string;
+  const blurhash = attachment.get('blurhash') as string;
+  const statusId = status.get('id') as string;
+  const acct = status.getIn(['account', 'acct']) as string;
+  const type = attachment.get('type') as string;
+
+  let thumbnail;
+
+  const badges = [];
+
+  if (description && description.length > 0) {
+    badges.push(<AltTextBadge key='alt' description={description} />);
+  }
+
+  if (!visible) {
+    thumbnail = (
+      <div className='media-gallery__item__overlay'>
+        <Icon id='eye-slash' icon={VisibilityOffIcon} />
+      </div>
+    );
+  } else if (type === 'audio') {
+    thumbnail = (
+      <>
+        <img
+          src={previewUrl || avatarUrl}
+          alt={description}
+          title={description}
+          lang={lang}
+          onLoad={handleImageLoad}
+        />
+
+        <div className='media-gallery__item__overlay media-gallery__item__overlay--corner'>
+          <Icon id='music' icon={HeadphonesIcon} />
+        </div>
+      </>
+    );
+  } else if (type === 'image') {
+    const focusX = (attachment.getIn(['meta', 'focus', 'x']) || 0) as number;
+    const focusY = (attachment.getIn(['meta', 'focus', 'y']) || 0) as number;
+    const x = (focusX / 2 + 0.5) * 100;
+    const y = (focusY / -2 + 0.5) * 100;
+
+    thumbnail = (
+      <img
+        src={previewUrl}
+        alt={description}
+        title={description}
+        lang={lang}
+        style={{ objectPosition: `${x}% ${y}%` }}
+        onLoad={handleImageLoad}
+      />
+    );
+  } else if (['video', 'gifv'].includes(type)) {
+    const duration = attachment.getIn([
+      'meta',
+      'original',
+      'duration',
+    ]) as number;
+
+    thumbnail = (
+      <div className='media-gallery__gifv'>
+        <video
+          className='media-gallery__item-gifv-thumbnail'
+          aria-label={description}
+          title={description}
+          lang={lang}
+          src={fullUrl}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onLoadedData={handleImageLoad}
+          autoPlay={autoPlayGif}
+          playsInline
+          loop
+          muted
+        />
+
+        {type === 'video' && (
+          <div className='media-gallery__item__overlay media-gallery__item__overlay--corner'>
+            <Icon id='play' icon={MovieIcon} />
+          </div>
+        )}
+      </div>
+    );
+
+    if (type === 'gifv') {
+      badges.push(
+        <span
+          key='gif'
+          className='media-gallery__alt__label media-gallery__alt__label--non-interactive'
+        >
+          GIF
+        </span>,
+      );
+    } else {
+      badges.push(
+        <span
+          key='video'
+          className='media-gallery__alt__label media-gallery__alt__label--non-interactive'
+        >
+          {formatTime(Math.floor(duration))}
+        </span>,
+      );
+    }
+  }
+
+  return (
+    <div className='media-gallery__item media-gallery__item--square'>
+      <Blurhash
+        hash={blurhash}
+        className={classNames('media-gallery__preview', {
+          'media-gallery__preview--hidden': visible && loaded,
+        })}
+        dummy={!useBlurhash}
+      />
+
+      <a
+        className='media-gallery__item-thumbnail'
+        href={`/@${acct}/${statusId}`}
+        onClick={handleClick}
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        {thumbnail}
+      </a>
+
+      {badges.length > 0 && (
+        <div className='media-gallery__item__badges'>{badges}</div>
+      )}
+    </div>
+  );
+};

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

@@ -20,7 +20,7 @@ import { expandAccountMediaTimeline } from '../../actions/timelines';
 import HeaderContainer from '../account_timeline/containers/header_container';
 import Column from '../ui/components/column';
 
-import MediaItem from './components/media_item';
+import { MediaItem } from './components/media_item';
 
 const mapStateToProps = (state, { params: { acct, id } }) => {
   const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]);

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

@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-import { useDispatch, useSelector } from 'react-redux';
-
-import spring from 'react-motion/lib/spring';
-
-import CloseIcon from '@/material-icons/400-20px/close.svg?react';
-import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
-import { undoUploadCompose, initMediaEditModal } from 'mastodon/actions/compose';
-import { Blurhash } from 'mastodon/components/blurhash';
-import { Icon }  from 'mastodon/components/icon';
-import Motion from 'mastodon/features/ui/util/optional_motion';
-
-export const Upload = ({ id, onDragStart, onDragEnter, onDragEnd }) => {
-  const dispatch = useDispatch();
-  const media = useSelector(state => state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id));
-  const sensitive = useSelector(state => state.getIn(['compose', 'spoiler']));
-
-  const handleUndoClick = useCallback(() => {
-    dispatch(undoUploadCompose(id));
-  }, [dispatch, id]);
-
-  const handleFocalPointClick = useCallback(() => {
-    dispatch(initMediaEditModal(id));
-  }, [dispatch, id]);
-
-  const handleDragStart = useCallback(() => {
-    onDragStart(id);
-  }, [onDragStart, id]);
-
-  const handleDragEnter = useCallback(() => {
-    onDragEnter(id);
-  }, [onDragEnter, id]);
-
-  if (!media) {
-    return null;
-  }
-
-  const focusX = media.getIn(['meta', 'focus', 'x']);
-  const focusY = media.getIn(['meta', 'focus', 'y']);
-  const x = ((focusX /  2) + .5) * 100;
-  const y = ((focusY / -2) + .5) * 100;
-  const missingDescription = (media.get('description') || '').length === 0;
-
-  return (
-    <div className='compose-form__upload' draggable onDragStart={handleDragStart} onDragEnter={handleDragEnter} onDragEnd={onDragEnd}>
-      <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
-        {({ scale }) => (
-          <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
-            {sensitive && <Blurhash
-              hash={media.get('blurhash')}
-              className='compose-form__upload__preview'
-            />}
-
-            <div className='compose-form__upload__actions'>
-              <button type='button' className='icon-button compose-form__upload__delete' onClick={handleUndoClick}><Icon icon={CloseIcon} /></button>
-              <button type='button' className='icon-button' onClick={handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
-            </div>
-
-            <div className='compose-form__upload__warning'>
-              <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
-            </div>
-          </div>
-        )}
-      </Motion>
-    </div>
-  );
-};
-
-Upload.propTypes = {
-  id: PropTypes.string,
-  onDragEnter: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragEnd: PropTypes.func,
-};

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

@@ -0,0 +1,130 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import CloseIcon from '@/material-icons/400-20px/close.svg?react';
+import EditIcon from '@/material-icons/400-24px/edit.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import {
+  undoUploadCompose,
+  initMediaEditModal,
+} from 'mastodon/actions/compose';
+import { Blurhash } from 'mastodon/components/blurhash';
+import { Icon } from 'mastodon/components/icon';
+import type { MediaAttachment } from 'mastodon/models/media_attachment';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+export const Upload: React.FC<{
+  id: string;
+  dragging?: boolean;
+  overlay?: boolean;
+  tall?: boolean;
+  wide?: boolean;
+}> = ({ id, dragging, overlay, tall, wide }) => {
+  const dispatch = useAppDispatch();
+  const media = useAppSelector(
+    (state) =>
+      state.compose // eslint-disable-line @typescript-eslint/no-unsafe-call
+        .get('media_attachments') // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+        .find((item: MediaAttachment) => item.get('id') === id) as  // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+        | MediaAttachment
+        | undefined,
+  );
+  const sensitive = useAppSelector(
+    (state) => state.compose.get('spoiler') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+  );
+
+  const handleUndoClick = useCallback(() => {
+    dispatch(undoUploadCompose(id));
+  }, [dispatch, id]);
+
+  const handleFocalPointClick = useCallback(() => {
+    dispatch(initMediaEditModal(id));
+  }, [dispatch, id]);
+
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  if (!media) {
+    return null;
+  }
+
+  const focusX = media.getIn(['meta', 'focus', 'x']) as number;
+  const focusY = media.getIn(['meta', 'focus', 'y']) as number;
+  const x = (focusX / 2 + 0.5) * 100;
+  const y = (focusY / -2 + 0.5) * 100;
+  const missingDescription =
+    ((media.get('description') as string | undefined) ?? '').length === 0;
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      className={classNames('compose-form__upload media-gallery__item', {
+        dragging,
+        overlay,
+        'media-gallery__item--tall': tall,
+        'media-gallery__item--wide': wide,
+      })}
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+    >
+      <div
+        className='compose-form__upload__thumbnail'
+        style={{
+          backgroundImage: !sensitive
+            ? `url(${media.get('preview_url') as string})`
+            : undefined,
+          backgroundPosition: `${x}% ${y}%`,
+        }}
+      >
+        {sensitive && (
+          <Blurhash
+            hash={media.get('blurhash') as string}
+            className='compose-form__upload__preview'
+          />
+        )}
+
+        <div className='compose-form__upload__actions'>
+          <button
+            type='button'
+            className='icon-button compose-form__upload__delete'
+            onClick={handleUndoClick}
+          >
+            <Icon id='close' icon={CloseIcon} />
+          </button>
+          <button
+            type='button'
+            className='icon-button'
+            onClick={handleFocalPointClick}
+          >
+            <Icon id='edit' icon={EditIcon} />{' '}
+            <FormattedMessage id='upload_form.edit' defaultMessage='Edit' />
+          </button>
+        </div>
+
+        <div className='compose-form__upload__warning'>
+          <button
+            type='button'
+            className={classNames('icon-button', {
+              active: missingDescription,
+            })}
+            onClick={handleFocalPointClick}
+          >
+            {missingDescription && <Icon id='warning' icon={WarningIcon} />} ALT
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,53 +0,0 @@
-import { useRef, useCallback } from 'react';
-
-import { useSelector, useDispatch } from 'react-redux';
-
-import { changeMediaOrder } from 'mastodon/actions/compose';
-
-import { Upload } from './upload';
-import { UploadProgress } from './upload_progress';
-
-export const UploadForm = () => {
-  const dispatch = useDispatch();
-  const mediaIds = useSelector(state => state.getIn(['compose', 'media_attachments']).map(item => item.get('id')));
-  const active = useSelector(state => state.getIn(['compose', 'is_uploading']));
-  const progress = useSelector(state => state.getIn(['compose', 'progress']));
-  const isProcessing = useSelector(state => state.getIn(['compose', 'is_processing']));
-
-  const dragItem = useRef();
-  const dragOverItem = useRef();
-
-  const handleDragStart = useCallback(id => {
-    dragItem.current = id;
-  }, [dragItem]);
-
-  const handleDragEnter = useCallback(id => {
-    dragOverItem.current = id;
-  }, [dragOverItem]);
-
-  const handleDragEnd = useCallback(() => {
-    dispatch(changeMediaOrder(dragItem.current, dragOverItem.current));
-    dragItem.current = null;
-    dragOverItem.current = null;
-  }, [dispatch, dragItem, dragOverItem]);
-
-  return (
-    <>
-      <UploadProgress active={active} progress={progress} isProcessing={isProcessing} />
-
-      {mediaIds.size > 0 && (
-        <div className='compose-form__uploads'>
-          {mediaIds.map(id => (
-            <Upload
-              key={id}
-              id={id}
-              onDragStart={handleDragStart}
-              onDragEnter={handleDragEnter}
-              onDragEnd={handleDragEnd}
-            />
-          ))}
-        </div>
-      )}
-    </>
-  );
-};

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

@@ -0,0 +1,185 @@
+import { useState, useCallback, useMemo } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import type { List } from 'immutable';
+
+import type {
+  DragStartEvent,
+  DragEndEvent,
+  UniqueIdentifier,
+  Announcements,
+  ScreenReaderInstructions,
+} from '@dnd-kit/core';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragOverlay,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+} from '@dnd-kit/sortable';
+
+import { changeMediaOrder } from 'mastodon/actions/compose';
+import type { MediaAttachment } from 'mastodon/models/media_attachment';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+import { Upload } from './upload';
+import { UploadProgress } from './upload_progress';
+
+const messages = defineMessages({
+  screenReaderInstructions: {
+    id: 'upload_form.drag_and_drop.instructions',
+    defaultMessage:
+      'To pick up a media attachment, press space or enter. While dragging, use the arrow keys to move the media attachment in any given direction. Press space or enter again to drop the media attachment in its new position, or press escape to cancel.',
+  },
+  onDragStart: {
+    id: 'upload_form.drag_and_drop.on_drag_start',
+    defaultMessage: 'Picked up media attachment {item}.',
+  },
+  onDragOver: {
+    id: 'upload_form.drag_and_drop.on_drag_over',
+    defaultMessage: 'Media attachment {item} was moved.',
+  },
+  onDragEnd: {
+    id: 'upload_form.drag_and_drop.on_drag_end',
+    defaultMessage: 'Media attachment {item} was dropped.',
+  },
+  onDragCancel: {
+    id: 'upload_form.drag_and_drop.on_drag_cancel',
+    defaultMessage:
+      'Dragging was cancelled. Media attachment {item} was dropped.',
+  },
+});
+
+export const UploadForm: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+  const mediaIds = useAppSelector(
+    (state) =>
+      state.compose // eslint-disable-line @typescript-eslint/no-unsafe-call
+        .get('media_attachments') // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+        .map((item: MediaAttachment) => item.get('id')) as List<string>, // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+  );
+  const active = useAppSelector(
+    (state) => state.compose.get('is_uploading') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+  );
+  const progress = useAppSelector(
+    (state) => state.compose.get('progress') as number, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+  );
+  const isProcessing = useAppSelector(
+    (state) => state.compose.get('is_processing') as boolean, // eslint-disable-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+  );
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragStart = useCallback(
+    (e: DragStartEvent) => {
+      const { active } = e;
+
+      setActiveId(active.id);
+    },
+    [setActiveId],
+  );
+
+  const handleDragEnd = useCallback(
+    (e: DragEndEvent) => {
+      const { active, over } = e;
+
+      if (over && active.id !== over.id) {
+        dispatch(changeMediaOrder(active.id, over.id));
+      }
+
+      setActiveId(null);
+    },
+    [dispatch, setActiveId],
+  );
+
+  const accessibility: {
+    screenReaderInstructions: ScreenReaderInstructions;
+    announcements: Announcements;
+  } = useMemo(
+    () => ({
+      screenReaderInstructions: {
+        draggable: intl.formatMessage(messages.screenReaderInstructions),
+      },
+
+      announcements: {
+        onDragStart({ active }) {
+          return intl.formatMessage(messages.onDragStart, { item: active.id });
+        },
+
+        onDragOver({ active }) {
+          return intl.formatMessage(messages.onDragOver, { item: active.id });
+        },
+
+        onDragEnd({ active }) {
+          return intl.formatMessage(messages.onDragEnd, { item: active.id });
+        },
+
+        onDragCancel({ active }) {
+          return intl.formatMessage(messages.onDragCancel, { item: active.id });
+        },
+      },
+    }),
+    [intl],
+  );
+
+  return (
+    <>
+      <UploadProgress
+        active={active}
+        progress={progress}
+        isProcessing={isProcessing}
+      />
+
+      {mediaIds.size > 0 && (
+        <div
+          className={`compose-form__uploads media-gallery media-gallery--layout-${mediaIds.size}`}
+        >
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            accessibility={accessibility}
+          >
+            <SortableContext
+              items={mediaIds.toArray()}
+              strategy={rectSortingStrategy}
+            >
+              {mediaIds.map((id, idx) => (
+                <Upload
+                  key={id}
+                  id={id}
+                  dragging={id === activeId}
+                  tall={mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)}
+                  wide={mediaIds.size === 1}
+                />
+              ))}
+            </SortableContext>
+
+            <DragOverlay>
+              {activeId ? <Upload id={activeId as string} overlay /> : null}
+            </DragOverlay>
+          </DndContext>
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -1,5 +1,5 @@
 import type { ChangeEventHandler } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -23,6 +23,8 @@ import { RadioButton } from 'mastodon/components/radio_button';
 import ScrollContainer from 'mastodon/containers/scroll_container';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
+import { useSearchParam } from '../../../hooks/useSearchParam';
+
 import { AccountCard } from './components/account_card';
 
 const messages = defineMessages({
@@ -47,18 +49,19 @@ export const Directory: React.FC<{
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [state, setState] = useState<{
-    order: string | null;
-    local: boolean | null;
-  }>({
-    order: null,
-    local: null,
-  });
-
   const column = useRef<Column>(null);
 
-  const order = state.order ?? params?.order ?? 'active';
-  const local = state.local ?? params?.local ?? false;
+  const [orderParam, setOrderParam] = useSearchParam('order');
+  const [localParam, setLocalParam] = useSearchParam('local');
+
+  let localParamBool: boolean | undefined;
+
+  if (localParam === 'false') {
+    localParamBool = false;
+  }
+
+  const order = orderParam ?? params?.order ?? 'active';
+  const local = localParamBool ?? params?.local ?? true;
 
   const handlePin = useCallback(() => {
     if (columnId) {
@@ -101,10 +104,10 @@ export const Directory: React.FC<{
       if (columnId) {
         dispatch(changeColumnParams(columnId, ['order'], e.target.value));
       } else {
-        setState((s) => ({ order: e.target.value, local: s.local }));
+        setOrderParam(e.target.value);
       }
     },
-    [dispatch, columnId],
+    [dispatch, columnId, setOrderParam],
   );
 
   const handleChangeLocal = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -113,11 +116,13 @@ export const Directory: React.FC<{
         dispatch(
           changeColumnParams(columnId, ['local'], e.target.value === '1'),
         );
+      } else if (e.target.value === '1') {
+        setLocalParam('true');
       } else {
-        setState((s) => ({ local: e.target.value === '1', order: s.order }));
+        setLocalParam('false');
       }
     },
-    [dispatch, columnId],
+    [dispatch, columnId, setLocalParam],
   );
 
   const handleLoadMore = useCallback(() => {

app/javascript/mastodon/features/notifications/components/column_settings.jsx

@@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { forceGroupedNotifications } from 'mastodon/initial_state';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_REPORTS } from 'mastodon/permissions';
 
 import ClearColumnButton from './clear_column_button';
@@ -36,7 +35,6 @@ class ColumnSettings extends PureComponent {
 
     const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
     const unreadMarkersShowStr = <FormattedMessage id='notifications.column_settings.unread_notifications.highlight' defaultMessage='Highlight unread notifications' />;
-    const groupingShowStr = <FormattedMessage id='notifications.column_settings.beta.grouping' defaultMessage='Group notifications' />;
     const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
     const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
     const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
@@ -68,18 +66,6 @@ class ColumnSettings extends PureComponent {
 
         <PolicyControls />
 
-        {!forceGroupedNotifications && (
-          <section role='group' aria-labelledby='notifications-beta'>
-            <h3 id='notifications-beta'>
-              <FormattedMessage id='notifications.column_settings.beta.category' defaultMessage='Experimental features' />
-            </h3>
-
-            <div className='column-settings__row'>
-              <SettingToggle id='unread-notification-markers' prefix='notifications' settings={settings} settingPath={['groupingBeta']} onChange={onChange} label={groupingShowStr} />
-            </div>
-          </section>
-        )}
-
         <section role='group' aria-labelledby='notifications-unread-markers'>
           <h3 id='notifications-unread-markers'>
             <FormattedMessage id='notifications.column_settings.unread_notifications.category' defaultMessage='Unread notifications' />

app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx

@@ -31,7 +31,7 @@ export const FilteredNotificationsIconButton: React.FC<{
     history.push('/notifications/requests');
   }, [history]);
 
-  if (policy === null || policy.summary.pending_notifications_count === 0) {
+  if (policy === null || policy.summary.pending_requests_count <= 0) {
     return null;
   }
 
@@ -70,7 +70,7 @@ export const FilteredNotificationsBanner: React.FC = () => {
     };
   }, [dispatch]);
 
-  if (policy === null || policy.summary.pending_notifications_count === 0) {
+  if (policy === null || policy.summary.pending_requests_count <= 0) {
     return null;
   }
 

app/javascript/mastodon/features/notifications/components/notification_request.jsx

@@ -12,7 +12,7 @@ import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { initBlockModal } from 'mastodon/actions/blocks';
 import { initMuteModal } from 'mastodon/actions/mutes';
-import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
+import { acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notification_requests';
 import { initReport } from 'mastodon/actions/reports';
 import { Avatar } from 'mastodon/components/avatar';
 import { CheckBox } from 'mastodon/components/check_box';
@@ -40,11 +40,11 @@ export const NotificationRequest = ({ id, accountId, notificationsCount, checked
   const { push: historyPush } = useHistory();
 
   const handleDismiss = useCallback(() => {
-    dispatch(dismissNotificationRequest(id));
+    dispatch(dismissNotificationRequest({ id }));
   }, [dispatch, id]);
 
   const handleAccept = useCallback(() => {
-    dispatch(acceptNotificationRequest(id));
+    dispatch(acceptNotificationRequest({ id }));
   }, [dispatch, id]);
 
   const handleMute = useCallback(() => {

app/javascript/mastodon/features/notifications/request.jsx

@@ -10,7 +10,13 @@ import { useSelector, useDispatch } from 'react-redux';
 import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import DoneIcon from '@/material-icons/400-24px/done.svg?react';
 import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react';
-import { fetchNotificationRequest, fetchNotificationsForRequest, expandNotificationsForRequest, acceptNotificationRequest, dismissNotificationRequest } from 'mastodon/actions/notifications';
+import {
+  fetchNotificationRequest,
+  fetchNotificationsForRequest,
+  expandNotificationsForRequest,
+  acceptNotificationRequest,
+  dismissNotificationRequest,
+} from 'mastodon/actions/notification_requests';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -44,28 +50,28 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => {
   const columnRef = useRef();
   const intl = useIntl();
   const dispatch = useDispatch();
-  const notificationRequest = useSelector(state => state.getIn(['notificationRequests', 'current', 'item', 'id']) === id ? state.getIn(['notificationRequests', 'current', 'item']) : null);
-  const accountId = notificationRequest?.get('account');
+  const notificationRequest = useSelector(state => state.notificationRequests.current.item?.id === id ? state.notificationRequests.current.item : null);
+  const accountId = notificationRequest?.account_id;
   const account = useSelector(state => state.getIn(['accounts', accountId]));
-  const notifications = useSelector(state => state.getIn(['notificationRequests', 'current', 'notifications', 'items']));
-  const isLoading = useSelector(state => state.getIn(['notificationRequests', 'current', 'notifications', 'isLoading']));
-  const hasMore = useSelector(state => !!state.getIn(['notificationRequests', 'current', 'notifications', 'next']));
-  const removed = useSelector(state => state.getIn(['notificationRequests', 'current', 'removed']));
+  const notifications = useSelector(state => state.notificationRequests.current.notifications.items);
+  const isLoading = useSelector(state => state.notificationRequests.current.notifications.isLoading);
+  const hasMore = useSelector(state => !!state.notificationRequests.current.notifications.next);
+  const removed = useSelector(state => state.notificationRequests.current.removed);
 
   const handleHeaderClick = useCallback(() => {
     columnRef.current?.scrollTop();
   }, [columnRef]);
 
   const handleLoadMore = useCallback(() => {
-    dispatch(expandNotificationsForRequest());
-  }, [dispatch]);
+    dispatch(expandNotificationsForRequest({ accountId }));
+  }, [dispatch, accountId]);
 
   const handleDismiss = useCallback(() => {
-    dispatch(dismissNotificationRequest(id));
+    dispatch(dismissNotificationRequest({ id }));
   }, [dispatch, id]);
 
   const handleAccept = useCallback(() => {
-    dispatch(acceptNotificationRequest(id));
+    dispatch(acceptNotificationRequest({ id }));
   }, [dispatch, id]);
 
   const handleMoveUp = useCallback(id => {
@@ -79,12 +85,12 @@ export const NotificationRequest = ({ multiColumn, params: { id } }) => {
   }, [columnRef, notifications]);
 
   useEffect(() => {
-    dispatch(fetchNotificationRequest(id));
+    dispatch(fetchNotificationRequest({ id }));
   }, [dispatch, id]);
 
   useEffect(() => {
     if (accountId) {
-      dispatch(fetchNotificationsForRequest(accountId));
+      dispatch(fetchNotificationsForRequest({ accountId }));
     }
   }, [dispatch, accountId]);
 

app/javascript/mastodon/features/notifications/requests.jsx

@@ -11,7 +11,12 @@ import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?rea
 import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { openModal } from 'mastodon/actions/modal';
-import { fetchNotificationRequests, expandNotificationRequests, acceptNotificationRequests, dismissNotificationRequests } from 'mastodon/actions/notifications';
+import {
+  fetchNotificationRequests,
+  expandNotificationRequests,
+  acceptNotificationRequests,
+  dismissNotificationRequests,
+} from 'mastodon/actions/notification_requests';
 import { changeSetting } from 'mastodon/actions/settings';
 import { CheckBox } from 'mastodon/components/check_box';
 import Column from 'mastodon/components/column';
@@ -84,7 +89,7 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM
         message: intl.formatMessage(messages.confirmAcceptMultipleMessage, { count: selectedItems.length }),
         confirm: intl.formatMessage(messages.confirmAcceptMultipleButton, { count: selectedItems.length}),
         onConfirm: () =>
-          dispatch(acceptNotificationRequests(selectedItems)),
+          dispatch(acceptNotificationRequests({ ids: selectedItems })),
       },
     }));
   }, [dispatch, intl, selectedItems]);
@@ -97,7 +102,7 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM
         message: intl.formatMessage(messages.confirmDismissMultipleMessage, { count: selectedItems.length }),
         confirm: intl.formatMessage(messages.confirmDismissMultipleButton, { count: selectedItems.length}),
         onConfirm: () =>
-          dispatch(dismissNotificationRequests(selectedItems)),
+          dispatch(dismissNotificationRequests({ ids: selectedItems })),
       },
     }));
   }, [dispatch, intl, selectedItems]);
@@ -161,9 +166,9 @@ export const NotificationRequests = ({ multiColumn }) => {
   const columnRef = useRef();
   const intl = useIntl();
   const dispatch = useDispatch();
-  const isLoading = useSelector(state => state.getIn(['notificationRequests', 'isLoading']));
-  const notificationRequests = useSelector(state => state.getIn(['notificationRequests', 'items']));
-  const hasMore = useSelector(state => !!state.getIn(['notificationRequests', 'next']));
+  const isLoading = useSelector(state => state.notificationRequests.isLoading);
+  const notificationRequests = useSelector(state => state.notificationRequests.items);
+  const hasMore = useSelector(state => !!state.notificationRequests.next);
 
   const [selectionMode, setSelectionMode] = useState(false);
   const [checkedRequestIds, setCheckedRequestIds] = useState([]);
@@ -182,7 +187,7 @@ export const NotificationRequests = ({ multiColumn }) => {
       else
         ids.push(id);
 
-      setSelectAllChecked(ids.length === notificationRequests.size);
+      setSelectAllChecked(ids.length === notificationRequests.length);
 
       return [...ids];
     });
@@ -193,7 +198,7 @@ export const NotificationRequests = ({ multiColumn }) => {
       if(checked)
         setCheckedRequestIds([]);
       else
-        setCheckedRequestIds(notificationRequests.map(request => request.get('id')).toArray());
+        setCheckedRequestIds(notificationRequests.map(request => request.id));
 
       return !checked;
     });
@@ -217,7 +222,7 @@ export const NotificationRequests = ({ multiColumn }) => {
         multiColumn={multiColumn}
         showBackButton
         appendContent={
-          notificationRequests.size > 0 && (
+          notificationRequests.length > 0 && (
             <SelectRow selectionMode={selectionMode} setSelectionMode={setSelectionMode} selectAllChecked={selectAllChecked} toggleSelectAll={toggleSelectAll} selectedItems={checkedRequestIds} />
           )}
       >
@@ -236,12 +241,12 @@ export const NotificationRequests = ({ multiColumn }) => {
       >
         {notificationRequests.map(request => (
           <NotificationRequest
-            key={request.get('id')}
-            id={request.get('id')}
-            accountId={request.get('account')}
-            notificationsCount={request.get('notifications_count')}
+            key={request.id}
+            id={request.id}
+            accountId={request.account_id}
+            notificationsCount={request.notifications_count}
             showCheckbox={selectionMode}
-            checked={checkedRequestIds.includes(request.get('id'))}
+            checked={checkedRequestIds.includes(request.id)}
             toggleCheck={handleCheck}
           />
         ))}

app/javascript/mastodon/features/notifications_wrapper.jsx

@@ -1,13 +1,8 @@
-import Notifications from 'mastodon/features/notifications';
 import Notifications_v2 from 'mastodon/features/notifications_v2';
-import { selectUseGroupedNotifications } from 'mastodon/selectors/settings';
-import { useAppSelector } from 'mastodon/store';
 
 export const NotificationsWrapper = (props) => {
-  const optedInGroupedNotifications = useAppSelector(selectUseGroupedNotifications);
-
   return (
-    optedInGroupedNotifications ? <Notifications_v2 {...props} /> : <Notifications {...props} />
+    <Notifications_v2 {...props} />
   );
 };
 

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

@@ -160,7 +160,25 @@ export const DetailedStatus: React.FC<{
   if (pictureInPicture.get('inUse')) {
     media = <PictureInPicturePlaceholder aspectRatio={attachmentAspectRatio} />;
   } else if (status.get('media_attachments').size > 0) {
-    if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+    if (
+      ['image', 'gifv'].includes(
+        status.getIn(['media_attachments', 0, 'type']) as string,
+      ) ||
+      status.get('media_attachments').size > 1
+    ) {
+      media = (
+        <MediaGallery
+          standalone
+          sensitive={status.get('sensitive')}
+          media={status.get('media_attachments')}
+          lang={language}
+          height={300}
+          onOpenMedia={onOpenMedia}
+          visible={showMedia}
+          onToggleVisibility={onToggleMediaVisibility}
+        />
+      );
+    } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
       const attachment = status.getIn(['media_attachments', 0]);
       const description =
         attachment.getIn(['translation', 'description']) ||
@@ -209,19 +227,6 @@ export const DetailedStatus: React.FC<{
           onToggleVisibility={onToggleMediaVisibility}
         />
       );
-    } else {
-      media = (
-        <MediaGallery
-          standalone
-          sensitive={status.get('sensitive')}
-          media={status.get('media_attachments')}
-          lang={language}
-          height={300}
-          onOpenMedia={onOpenMedia}
-          visible={showMedia}
-          onToggleVisibility={onToggleMediaVisibility}
-        />
-      );
     }
   } else if (status.get('spoiler_text').length === 0) {
     media = (

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

@@ -99,7 +99,7 @@ export const BlockModal = ({ accountId, acct }) => {
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
           </button>
 
-          <Button onClick={handleClick} autoFocus>
+          <Button onClick={handleClick} dangerous autoFocus>
             <FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
           </Button>
         </div>

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

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useRouteMatch, NavLink } from 'react-router-dom';
 
-import { Icon }  from 'mastodon/components/icon';
+import { Icon } from 'mastodon/components/icon';
 
-const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, href, method, badge, transparent, ...other }) => {
+const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, href, method, badge, transparent, optional, ...other }) => {
   const match = useRouteMatch(to);
-  const className = classNames('column-link', { 'column-link--transparent': transparent });
+  const className = classNames('column-link', { 'column-link--transparent': transparent, 'column-link--optional': optional });
   const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
   const iconElement = (typeof icon === 'string' || iconComponent) ? <Icon id={icon} icon={iconComponent} className='column-link__icon' /> : icon;
   const activeIconElement = activeIcon ?? (activeIconComponent ? <Icon id={icon} icon={activeIconComponent} className='column-link__icon' /> : iconElement);
@@ -15,7 +15,7 @@ const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text
 
   if (href) {
     return (
-      <a href={href} className={className} data-method={method} title={text} {...other}>
+      <a href={href} className={className} data-method={method} {...other}>
         {active ? activeIconElement : iconElement}
         <span>{text}</span>
         {badgeElement}
@@ -23,7 +23,7 @@ const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text
     );
   } else {
     return (
-      <NavLink to={to} className={className} title={text} exact {...other}>
+      <NavLink to={to} className={className} exact {...other}>
         {active ? activeIconElement : iconElement}
         <span>{text}</span>
         {badgeElement}
@@ -43,6 +43,7 @@ ColumnLink.propTypes = {
   method: PropTypes.string,
   badge: PropTypes.node,
   transparent: PropTypes.bool,
+  optional: PropTypes.bool,
 };
 
 export default ColumnLink;

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

@@ -4,8 +4,6 @@ import { Children, cloneElement, useCallback } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { supportsPassiveEvents } from 'detect-passive-events';
-
 import { scrollRight } from '../../../scroll';
 import BundleContainer from '../containers/bundle_container';
 import {
@@ -63,7 +61,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     children: PropTypes.node,
   };
 
-  // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS
+  // Corresponds to (max-width: $no-gap-breakpoint - 1px) in SCSS
   mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 1174px)');
 
   state = {
@@ -71,10 +69,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
   };
 
   componentDidMount() {
-    if (!this.props.singleColumn) {
-      this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
-    }
-
     if (this.mediaQuery) {
       if (this.mediaQuery.addEventListener) {
         this.mediaQuery.addEventListener('change', this.handleLayoutChange);
@@ -87,23 +81,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
   }
 
-  UNSAFE_componentWillUpdate(nextProps) {
-    if (this.props.singleColumn !== nextProps.singleColumn && nextProps.singleColumn) {
-      this.node.removeEventListener('wheel', this.handleWheel);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) {
-      this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
-    }
-  }
-
   componentWillUnmount () {
-    if (!this.props.singleColumn) {
-      this.node.removeEventListener('wheel', this.handleWheel);
-    }
-
     if (this.mediaQuery) {
       if (this.mediaQuery.removeEventListener) {
         this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
@@ -116,7 +94,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
   handleChildrenContentChange() {
     if (!this.props.singleColumn) {
       const modifier = this.isRtlLayout ? -1 : 1;
-      this._interruptScrollAnimation = scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
+      scrollRight(this.node, (this.node.scrollWidth - window.innerWidth) * modifier);
     }
   }
 
@@ -124,14 +102,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
     this.setState({ renderComposePanel: !e.matches });
   };
 
-  handleWheel = () => {
-    if (typeof this._interruptScrollAnimation !== 'function') {
-      return;
-    }
-
-    this._interruptScrollAnimation();
-  };
-
   setRef = (node) => {
     this.node = node;
   };

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

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import { useDispatch } from 'react-redux';
-
-import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
-import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react';
-import HistoryIcon from '@/material-icons/400-24px/history.svg?react';
-import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react';
-import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
-import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
-import { blockAccount } from 'mastodon/actions/accounts';
-import { blockDomain } from 'mastodon/actions/domain_blocks';
-import { closeModal } from 'mastodon/actions/modal';
-import { Button } from 'mastodon/components/button';
-import { Icon } from 'mastodon/components/icon';
-
-export const DomainBlockModal = ({ domain, accountId, acct }) => {
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback(() => {
-    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
-    dispatch(blockDomain(domain));
-  }, [dispatch, domain]);
-
-  const handleSecondaryClick = useCallback(() => {
-    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
-    dispatch(blockAccount(accountId));
-  }, [dispatch, accountId]);
-
-  const handleCancel = useCallback(() => {
-    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
-  }, [dispatch]);
-
-  return (
-    <div className='modal-root__modal safety-action-modal'>
-      <div className='safety-action-modal__top'>
-        <div className='safety-action-modal__header'>
-          <div className='safety-action-modal__header__icon'>
-            <Icon icon={DomainDisabledIcon} />
-          </div>
-
-          <div>
-            <h1><FormattedMessage id='domain_block_modal.title' defaultMessage='Block domain?' /></h1>
-            <div>{domain}</div>
-          </div>
-        </div>
-
-        <div className='safety-action-modal__bullet-points'>
-          <div>
-            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
-            <div><FormattedMessage id='domain_block_modal.they_wont_know' defaultMessage="They won't know they've been blocked." /></div>
-          </div>
-
-          <div>
-            <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
-            <div><FormattedMessage id='domain_block_modal.you_wont_see_posts' defaultMessage="You won't see posts or notifications from users on this server." /></div>
-          </div>
-
-          <div>
-            <div className='safety-action-modal__bullet-points__icon'><Icon icon={PersonRemoveIcon} /></div>
-            <div><FormattedMessage id='domain_block_modal.you_will_lose_followers' defaultMessage='All your followers from this server will be removed.' /></div>
-          </div>
-
-          <div>
-            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
-            <div><FormattedMessage id='domain_block_modal.they_cant_follow' defaultMessage='Nobody from this server can follow you.' /></div>
-          </div>
-
-          <div>
-            <div className='safety-action-modal__bullet-points__icon'><Icon icon={HistoryIcon} /></div>
-            <div><FormattedMessage id='domain_block_modal.they_can_interact_with_old_posts' defaultMessage='People from this server can interact with your old posts.' /></div>
-          </div>
-        </div>
-      </div>
-
-      <div className='safety-action-modal__bottom'>
-        <div className='safety-action-modal__actions'>
-          <Button onClick={handleSecondaryClick} secondary>
-            <FormattedMessage id='domain_block_modal.block_account_instead' defaultMessage='Block @{name} instead' values={{ name: acct.split('@')[0] }} />
-          </Button>
-
-          <div className='spacer' />
-
-          <button onClick={handleCancel} className='link-button'>
-            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </button>
-
-          <Button onClick={handleClick} autoFocus>
-            <FormattedMessage id='domain_block_modal.block' defaultMessage='Block server' />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-DomainBlockModal.propTypes = {
-  domain: PropTypes.string.isRequired,
-  accountId: PropTypes.string.isRequired,
-  acct: PropTypes.string.isRequired,
-};
-
-export default DomainBlockModal;

app/javascript/mastodon/features/ui/components/domain_block_modal.tsx

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import DomainDisabledIcon from '@/material-icons/400-24px/domain_disabled.svg?react';
+import HistoryIcon from '@/material-icons/400-24px/history.svg?react';
+import PersonRemoveIcon from '@/material-icons/400-24px/person_remove.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { blockAccount } from 'mastodon/actions/accounts';
+import { blockDomain } from 'mastodon/actions/domain_blocks';
+import { closeModal } from 'mastodon/actions/modal';
+import { apiRequest } from 'mastodon/api';
+import { Button } from 'mastodon/components/button';
+import { Icon } from 'mastodon/components/icon';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { ShortNumber } from 'mastodon/components/short_number';
+import { useAppDispatch } from 'mastodon/store';
+
+interface DomainBlockPreviewResponse {
+  following_count: number;
+  followers_count: number;
+}
+
+export const DomainBlockModal: React.FC<{
+  domain: string;
+  accountId: string;
+  acct: string;
+}> = ({ domain, accountId, acct }) => {
+  const dispatch = useAppDispatch();
+  const [loading, setLoading] = useState(true);
+  const [preview, setPreview] = useState<
+    DomainBlockPreviewResponse | 'error' | null
+  >(null);
+
+  const handleClick = useCallback(() => {
+    if (loading) {
+      return; // Prevent destructive action before the preview finishes loading or times out
+    }
+
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockDomain(domain));
+  }, [dispatch, loading, domain]);
+
+  const handleSecondaryClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockAccount(accountId));
+  }, [dispatch, accountId]);
+
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
+
+  useEffect(() => {
+    setLoading(true);
+
+    apiRequest<DomainBlockPreviewResponse>('GET', 'v1/domain_blocks/preview', {
+      params: { domain },
+      timeout: 5000,
+    })
+      .then((data) => {
+        setPreview(data);
+        setLoading(false);
+        return '';
+      })
+      .catch(() => {
+        setPreview('error');
+        setLoading(false);
+      });
+  }, [setPreview, setLoading, domain]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal' aria-live='polite'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon id='' icon={DomainDisabledIcon} />
+          </div>
+
+          <div>
+            <h1>
+              <FormattedMessage
+                id='domain_block_modal.title'
+                defaultMessage='Block domain?'
+              />
+            </h1>
+            <div>{domain}</div>
+          </div>
+        </div>
+
+        <div className='safety-action-modal__bullet-points'>
+          {preview &&
+            preview !== 'error' &&
+            preview.followers_count + preview.following_count > 0 && (
+              <div>
+                <div className='safety-action-modal__bullet-points__icon'>
+                  <Icon id='' icon={PersonRemoveIcon} />
+                </div>
+                <div>
+                  <strong>
+                    <FormattedMessage
+                      id='domain_block_modal.you_will_lose_num_followers'
+                      defaultMessage='You will lose {followersCount, plural, one {{followersCountDisplay} follower} other {{followersCountDisplay} followers}} and {followingCount, plural, one {{followingCountDisplay} person you follow} other {{followingCountDisplay} people you follow}}.'
+                      values={{
+                        followersCount: preview.followers_count,
+                        followersCountDisplay: (
+                          <ShortNumber value={preview.followers_count} />
+                        ),
+                        followingCount: preview.following_count,
+                        followingCountDisplay: (
+                          <ShortNumber value={preview.following_count} />
+                        ),
+                      }}
+                    />
+                  </strong>
+                </div>
+              </div>
+            )}
+
+          {preview === 'error' && (
+            <div>
+              <div className='safety-action-modal__bullet-points__icon'>
+                <Icon id='' icon={PersonRemoveIcon} />
+              </div>
+              <div>
+                <strong>
+                  <FormattedMessage
+                    id='domain_block_modal.you_will_lose_relationships'
+                    defaultMessage='You will lose all followers and people you follow from this server.'
+                  />
+                </strong>
+              </div>
+            </div>
+          )}
+
+          <div className='safety-action-modal__bullet-points--deemphasized'>
+            <div className='safety-action-modal__bullet-points__icon'>
+              <Icon id='' icon={CampaignIcon} />
+            </div>
+            <div>
+              <FormattedMessage
+                id='domain_block_modal.they_wont_know'
+                defaultMessage="They won't know they've been blocked."
+              />
+            </div>
+          </div>
+
+          <div className='safety-action-modal__bullet-points--deemphasized'>
+            <div className='safety-action-modal__bullet-points__icon'>
+              <Icon id='' icon={VisibilityOffIcon} />
+            </div>
+            <div>
+              <FormattedMessage
+                id='domain_block_modal.you_wont_see_posts'
+                defaultMessage="You won't see posts or notifications from users on this server."
+              />
+            </div>
+          </div>
+
+          <div className='safety-action-modal__bullet-points--deemphasized'>
+            <div className='safety-action-modal__bullet-points__icon'>
+              <Icon id='' icon={ReplyIcon} />
+            </div>
+            <div>
+              <FormattedMessage
+                id='domain_block_modal.they_cant_follow'
+                defaultMessage='Nobody from this server can follow you.'
+              />
+            </div>
+          </div>
+
+          <div className='safety-action-modal__bullet-points--deemphasized'>
+            <div className='safety-action-modal__bullet-points__icon'>
+              <Icon id='' icon={HistoryIcon} />
+            </div>
+            <div>
+              <FormattedMessage
+                id='domain_block_modal.they_can_interact_with_old_posts'
+                defaultMessage='People from this server can interact with your old posts.'
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          <Button onClick={handleSecondaryClick} secondary>
+            <FormattedMessage
+              id='domain_block_modal.block_account_instead'
+              defaultMessage='Block @{name} instead'
+              values={{ name: acct.split('@')[0] }}
+            />
+          </Button>
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage
+              id='confirmation_modal.cancel'
+              defaultMessage='Cancel'
+            />
+          </button>
+
+          <Button onClick={handleClick} dangerous aria-busy={loading}>
+            {loading ? (
+              <LoadingIndicator />
+            ) : (
+              <FormattedMessage
+                id='domain_block_modal.block'
+                defaultMessage='Block server'
+              />
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default DomainBlockModal;

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

@@ -17,7 +17,7 @@ export default class ImageLoader extends PureComponent {
     width: PropTypes.number,
     height: PropTypes.number,
     onClick: PropTypes.func,
-    zoomButtonHidden: PropTypes.bool,
+    zoomedIn: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -134,7 +134,7 @@ export default class ImageLoader extends PureComponent {
   };
 
   render () {
-    const { alt, lang, src, width, height, onClick } = this.props;
+    const { alt, lang, src, width, height, onClick, zoomedIn } = this.props;
     const { loading } = this.state;
 
     const className = classNames('image-loader', {
@@ -149,6 +149,7 @@ export default class ImageLoader extends PureComponent {
             <div className='loading-bar__container' style={{ width: this.state.width || width }}>
               <LoadingBar className='loading-bar' loading={1} />
             </div>
+
             <canvas
               className='image-loader__preview-canvas'
               ref={this.setCanvasRef}
@@ -164,7 +165,7 @@ export default class ImageLoader extends PureComponent {
             onClick={onClick}
             width={width}
             height={height}
-            zoomButtonHidden={this.props.zoomButtonHidden}
+            zoomedIn={zoomedIn}
           />
         )}
       </div>

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

@@ -12,6 +12,8 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import FitScreenIcon from '@/material-icons/400-24px/fit_screen.svg?react';
+import ActualSizeIcon from '@/svg-icons/actual_size.svg?react';
 import { getAverageFromBlurhash } from 'mastodon/blurhash';
 import { GIFV } from 'mastodon/components/gifv';
 import { Icon }  from 'mastodon/components/icon';
@@ -26,6 +28,8 @@ const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
   next: { id: 'lightbox.next', defaultMessage: 'Next' },
+  zoomIn: { id: 'lightbox.zoom_in', defaultMessage: 'Zoom to actual size' },
+  zoomOut: { id: 'lightbox.zoom_out', defaultMessage: 'Zoom to fit' },
 });
 
 class MediaModal extends ImmutablePureComponent {
@@ -46,30 +50,39 @@ class MediaModal extends ImmutablePureComponent {
   state = {
     index: null,
     navigationHidden: false,
-    zoomButtonHidden: false,
+    zoomedIn: false,
+  };
+
+  handleZoomClick = () => {
+    this.setState(prevState => ({
+      zoomedIn: !prevState.zoomedIn,
+    }));
   };
 
   handleSwipe = (index) => {
-    this.setState({ index: index % this.props.media.size });
+    this.setState({
+      index: index % this.props.media.size,
+      zoomedIn: false,
+    });
   };
 
   handleTransitionEnd = () => {
     this.setState({
-      zoomButtonHidden: false,
+      zoomedIn: false,
     });
   };
 
   handleNextClick = () => {
     this.setState({
       index: (this.getIndex() + 1) % this.props.media.size,
-      zoomButtonHidden: true,
+      zoomedIn: false,
     });
   };
 
   handlePrevClick = () => {
     this.setState({
       index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size,
-      zoomButtonHidden: true,
+      zoomedIn: false,
     });
   };
 
@@ -78,7 +91,7 @@ class MediaModal extends ImmutablePureComponent {
 
     this.setState({
       index: index % this.props.media.size,
-      zoomButtonHidden: true,
+      zoomedIn: false,
     });
   };
 
@@ -130,15 +143,22 @@ class MediaModal extends ImmutablePureComponent {
     return this.state.index !== null ? this.state.index : this.props.index;
   }
 
-  toggleNavigation = () => {
+  handleToggleNavigation = () => {
     this.setState(prevState => ({
       navigationHidden: !prevState.navigationHidden,
     }));
   };
 
+  setRef = c => {
+    this.setState({
+      viewportWidth: c?.clientWidth,
+      viewportHeight: c?.clientHeight,
+    });
+  };
+
   render () {
     const { media, statusId, lang, intl, onClose } = this.props;
-    const { navigationHidden } = this.state;
+    const { navigationHidden, zoomedIn, viewportWidth, viewportHeight } = this.state;
 
     const index = this.getIndex();
 
@@ -160,8 +180,8 @@ class MediaModal extends ImmutablePureComponent {
             alt={description}
             lang={lang}
             key={image.get('url')}
-            onClick={this.toggleNavigation}
-            zoomButtonHidden={this.state.zoomButtonHidden}
+            onClick={this.handleToggleNavigation}
+            zoomedIn={zoomedIn}
           />
         );
       } else if (image.get('type') === 'video') {
@@ -230,9 +250,12 @@ class MediaModal extends ImmutablePureComponent {
       ));
     }
 
+    const currentMedia = media.get(index);
+    const zoomable = currentMedia.get('type') === 'image' && (currentMedia.getIn(['meta', 'original', 'width']) > viewportWidth || currentMedia.getIn(['meta', 'original', 'height']) > viewportHeight);
+
     return (
-      <div className='modal-root__modal media-modal'>
-        <div className='media-modal__closer' role='presentation' onClick={onClose} >
+      <div className='modal-root__modal media-modal' ref={this.setRef}>
+        <div className='media-modal__closer' role='presentation' onClick={onClose}>
           <ReactSwipeableViews
             style={swipeableViewsStyle}
             containerStyle={containerStyle}
@@ -246,7 +269,10 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} size={40} />
+          <div className='media-modal__buttons'>
+            {zoomable && <IconButton title={intl.formatMessage(zoomedIn ? messages.zoomOut : messages.zoomIn)} iconComponent={zoomedIn ? FitScreenIcon : ActualSizeIcon} onClick={this.handleZoomClick} />}
+            <IconButton title={intl.formatMessage(messages.close)} icon='times' iconComponent={CloseIcon} onClick={onClose} />
+          </div>
 
           {leftNav}
           {rightNav}

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

@@ -37,7 +37,6 @@ import { timelinePreview, trendsEnabled } from 'mastodon/initial_state';
 import { transientSingleColumn } from 'mastodon/is_mobile';
 import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
 import { selectUnreadNotificationGroupsCount } from 'mastodon/selectors/notifications';
-import { selectUseGroupedNotifications } from 'mastodon/selectors/settings';
 
 import ColumnLink from './column_link';
 import DisabledAccountBanner from './disabled_account_banner';
@@ -65,19 +64,17 @@ const messages = defineMessages({
 });
 
 const NotificationsLink = () => {
-  const optedInGroupedNotifications = useSelector(selectUseGroupedNotifications);
-  const count = useSelector(state => state.getIn(['notifications', 'unread']));
-  const intl = useIntl();
 
-  const newCount = useSelector(selectUnreadNotificationGroupsCount);
+  const count = useSelector(selectUnreadNotificationGroupsCount);
+  const intl = useIntl();
 
   return (
     <ColumnLink
       key='notifications'
       transparent
       to='/notifications'
-      icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
-      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={optedInGroupedNotifications ? newCount : count} className='column-link__icon' />}
+      icon={<IconWithBadge id='bell' icon={NotificationsIcon} count={count} className='column-link__icon' />}
+      activeIcon={<IconWithBadge id='bell' icon={NotificationsActiveIcon} count={count} className='column-link__icon' />}
       text={intl.formatMessage(messages.notifications)}
     />
   );
@@ -123,14 +120,17 @@ class NavigationPanel extends Component {
 
     let banner = undefined;
 
-    if(transientSingleColumn)
-      banner = (<div className='switch-to-advanced'>
-        {intl.formatMessage(messages.openedInClassicInterface)}
-        {" "}
-        <a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
-          {intl.formatMessage(messages.advancedInterface)}
-        </a>
-      </div>);
+    if (transientSingleColumn) {
+      banner = (
+        <div className='switch-to-advanced'>
+          {intl.formatMessage(messages.openedInClassicInterface)}
+          {" "}
+          <a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
+            {intl.formatMessage(messages.advancedInterface)}
+          </a>
+        </div>
+      );
+    }
 
     return (
       <div className='navigation-panel'>
@@ -144,54 +144,58 @@ class NavigationPanel extends Component {
           </div>
         }
 
-        {signedIn && (
-          <>
-            <ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} activeIconComponent={HomeActiveIcon} text={intl.formatMessage(messages.home)} />
-            <NotificationsLink />
-            <FollowRequestsLink />
-          </>
-        )}
+        <div className='navigation-panel__menu'>
+          {signedIn && (
+            <>
+              <ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} activeIconComponent={HomeActiveIcon} text={intl.formatMessage(messages.home)} />
+              <NotificationsLink />
+              <FollowRequestsLink />
+            </>
+          )}
 
-        {trendsEnabled ? (
-          <ColumnLink transparent to='/explore' icon='explore' iconComponent={ExploreIcon} activeIconComponent={ExploreActiveIcon} text={intl.formatMessage(messages.explore)} />
-        ) : (
-          <ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
-        )}
+          {trendsEnabled ? (
+            <ColumnLink transparent to='/explore' icon='explore' iconComponent={ExploreIcon} activeIconComponent={ExploreActiveIcon} text={intl.formatMessage(messages.explore)} />
+          ) : (
+            <ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
+          )}
 
-        {(signedIn || timelinePreview) && (
-          <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
-        )}
+          {(signedIn || timelinePreview) && (
+            <ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.firehose)} />
+          )}
 
-        {!signedIn && (
-          <div className='navigation-panel__sign-in-banner'>
+          {!signedIn && (
+            <div className='navigation-panel__sign-in-banner'>
+              <hr />
+              { disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
+            </div>
+          )}
+
+          {signedIn && (
+            <>
+              <ColumnLink transparent to='/conversations' icon='at' iconComponent={AlternateEmailIcon} text={intl.formatMessage(messages.direct)} />
+              <ColumnLink transparent to='/bookmarks' icon='bookmarks' iconComponent={BookmarksIcon} activeIconComponent={BookmarksActiveIcon} text={intl.formatMessage(messages.bookmarks)} />
+              <ColumnLink transparent to='/favourites' icon='star' iconComponent={StarIcon} activeIconComponent={StarActiveIcon} text={intl.formatMessage(messages.favourites)} />
+              <ColumnLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} />
+
+              <ListPanel />
+
+              <hr />
+
+              <ColumnLink transparent href='/settings/preferences' icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} />
+
+              {canManageReports(permissions) && <ColumnLink optional transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
+              {canViewAdminDashboard(permissions) && <ColumnLink optional transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
+            </>
+          )}
+
+          <div className='navigation-panel__legal'>
             <hr />
-            { disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner /> }
+            <ColumnLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} />
           </div>
-        )}
-
-        {signedIn && (
-          <>
-            <ColumnLink transparent to='/conversations' icon='at' iconComponent={AlternateEmailIcon} text={intl.formatMessage(messages.direct)} />
-            <ColumnLink transparent to='/bookmarks' icon='bookmarks' iconComponent={BookmarksIcon} activeIconComponent={BookmarksActiveIcon} text={intl.formatMessage(messages.bookmarks)} />
-            <ColumnLink transparent to='/favourites' icon='star' iconComponent={StarIcon} activeIconComponent={StarActiveIcon} text={intl.formatMessage(messages.favourites)} />
-            <ColumnLink transparent to='/lists' icon='list-ul' iconComponent={ListAltIcon} activeIconComponent={ListAltActiveIcon} text={intl.formatMessage(messages.lists)} />
-
-            <ListPanel />
-
-            <hr />
-
-            <ColumnLink transparent href='/settings/preferences' icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} />
-
-            {canManageReports(permissions) && <ColumnLink transparent href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
-            {canViewAdminDashboard(permissions) && <ColumnLink transparent href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
-          </>
-        )}
-
-        <div className='navigation-panel__legal'>
-          <hr />
-          <ColumnLink transparent to='/about' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.about)} />
         </div>
 
+        <div className='flex-spacer' />
+
         <NavigationPortal />
       </div>
     );

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

@@ -1,17 +1,6 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { defineMessages, injectIntl } from 'react-intl';
-
-import FullscreenExitIcon from '@/material-icons/400-24px/fullscreen_exit.svg?react';
-import RectangleIcon from '@/material-icons/400-24px/rectangle.svg?react';
-import { IconButton } from 'mastodon/components/icon_button';
-
-const messages = defineMessages({
-  compress: { id: 'lightbox.compress', defaultMessage: 'Compress image view box' },
-  expand: { id: 'lightbox.expand', defaultMessage: 'Expand image view box' },
-});
-
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
 const NAV_BAR_HEIGHT = 66;
@@ -104,8 +93,7 @@ class ZoomableImage extends PureComponent {
     width: PropTypes.number,
     height: PropTypes.number,
     onClick: PropTypes.func,
-    zoomButtonHidden: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
+    zoomedIn: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -131,8 +119,6 @@ class ZoomableImage extends PureComponent {
       translateX: null,
       translateY: null,
     },
-    zoomState: 'expand', // 'expand' 'compress'
-    navigationHidden: false,
     dragPosition: { top: 0, left: 0, x: 0, y: 0 },
     dragged: false,
     lockScroll: { x: 0, y: 0 },
@@ -169,35 +155,20 @@ class ZoomableImage extends PureComponent {
     this.container.addEventListener('DOMMouseScroll', handler);
     this.removers.push(() => this.container.removeEventListener('DOMMouseScroll', handler));
 
-    this.initZoomMatrix();
+    this._initZoomMatrix();
   }
 
   componentWillUnmount () {
-    this.removeEventListeners();
+    this._removeEventListeners();
   }
 
-  componentDidUpdate () {
-    this.setState({ zoomState: this.state.scale >= this.state.zoomMatrix.rate ? 'compress' : 'expand' });
-
-    if (this.state.scale === MIN_SCALE) {
-      this.container.style.removeProperty('cursor');
+  componentDidUpdate (prevProps) {
+    if (prevProps.zoomedIn !== this.props.zoomedIn) {
+      this._toggleZoom();
     }
   }
 
-  UNSAFE_componentWillReceiveProps () {
-    // reset when slide to next image
-    if (this.props.zoomButtonHidden) {
-      this.setState({
-        scale: MIN_SCALE,
-        lockTranslate: { x: 0, y: 0 },
-      }, () => {
-        this.container.scrollLeft = 0;
-        this.container.scrollTop = 0;
-      });
-    }
-  }
-
-  removeEventListeners () {
+  _removeEventListeners () {
     this.removers.forEach(listeners => listeners());
     this.removers = [];
   }
@@ -220,9 +191,6 @@ class ZoomableImage extends PureComponent {
   };
 
   mouseDownHandler = e => {
-    this.container.style.cursor = 'grabbing';
-    this.container.style.userSelect = 'none';
-
     this.setState({ dragPosition: {
       left: this.container.scrollLeft,
       top: this.container.scrollTop,
@@ -246,9 +214,6 @@ class ZoomableImage extends PureComponent {
   };
 
   mouseUpHandler = () => {
-    this.container.style.cursor = 'grab';
-    this.container.style.removeProperty('user-select');
-
     this.image.removeEventListener('mousemove', this.mouseMoveHandler);
     this.image.removeEventListener('mouseup', this.mouseUpHandler);
   };
@@ -276,13 +241,13 @@ class ZoomableImage extends PureComponent {
     const _MAX_SCALE = Math.max(MAX_SCALE, this.state.zoomMatrix.rate);
     const scale = clamp(MIN_SCALE, _MAX_SCALE, this.state.scale * distance / this.lastDistance);
 
-    this.zoom(scale, midpoint);
+    this._zoom(scale, midpoint);
 
     this.lastMidpoint = midpoint;
     this.lastDistance = distance;
   };
 
-  zoom(nextScale, midpoint) {
+  _zoom(nextScale, midpoint) {
     const { scale, zoomMatrix } = this.state;
     const { scrollLeft, scrollTop } = this.container;
 
@@ -318,14 +283,13 @@ class ZoomableImage extends PureComponent {
     if (dragged) return;
     const handler = this.props.onClick;
     if (handler) handler();
-    this.setState({ navigationHidden: !this.state.navigationHidden });
   };
 
   handleMouseDown = e => {
     e.preventDefault();
   };
 
-  initZoomMatrix = () => {
+  _initZoomMatrix = () => {
     const { width, height } = this.props;
     const { clientWidth, clientHeight } = this.container;
     const { offsetWidth, offsetHeight } = this.image;
@@ -357,10 +321,7 @@ class ZoomableImage extends PureComponent {
     });
   };
 
-  handleZoomClick = e => {
-    e.preventDefault();
-    e.stopPropagation();
-
+  _toggleZoom () {
     const { scale, zoomMatrix } = this.state;
 
     if ( scale >= zoomMatrix.rate ) {
@@ -394,10 +355,7 @@ class ZoomableImage extends PureComponent {
         this.container.scrollTop = zoomMatrix.scrollTop;
       });
     }
-
-    this.container.style.cursor = 'grab';
-    this.container.style.removeProperty('user-select');
-  };
+  }
 
   setContainerRef = c => {
     this.container = c;
@@ -408,52 +366,37 @@ class ZoomableImage extends PureComponent {
   };
 
   render () {
-    const { alt, lang, src, width, height, intl } = this.props;
-    const { scale, lockTranslate } = this.state;
+    const { alt, lang, src, width, height } = this.props;
+    const { scale, lockTranslate, dragged } = this.state;
     const overflow = scale === MIN_SCALE ? 'hidden' : 'scroll';
-    const zoomButtonShouldHide = this.state.navigationHidden || this.props.zoomButtonHidden || this.state.zoomMatrix.rate <= MIN_SCALE ? 'media-modal__zoom-button--hidden' : '';
-    const zoomButtonTitle = this.state.zoomState === 'compress' ? intl.formatMessage(messages.compress) : intl.formatMessage(messages.expand);
+    const cursor = scale === MIN_SCALE ? null : (dragged ? 'grabbing' : 'grab');
 
     return (
-      <>
-        <IconButton
-          className={`media-modal__zoom-button ${zoomButtonShouldHide}`}
-          title={zoomButtonTitle}
-          icon={this.state.zoomState}
-          iconComponent={this.state.zoomState === 'compress' ? FullscreenExitIcon : RectangleIcon}
-          onClick={this.handleZoomClick}
-          size={40}
+      <div
+        className='zoomable-image'
+        ref={this.setContainerRef}
+        style={{ overflow, cursor, userSelect: 'none' }}
+      >
+        <img
+          role='presentation'
+          ref={this.setImageRef}
+          alt={alt}
+          title={alt}
+          lang={lang}
+          src={src}
+          width={width}
+          height={height}
           style={{
-            fontSize: '30px', /* Fontawesome's fa-compress fa-expand is larger than fa-close */
+            transform: `scale(${scale}) translate(-${lockTranslate.x}px, -${lockTranslate.y}px)`,
+            transformOrigin: '0 0',
           }}
+          draggable={false}
+          onClick={this.handleClick}
+          onMouseDown={this.handleMouseDown}
         />
-        <div
-          className='zoomable-image'
-          ref={this.setContainerRef}
-          style={{ overflow }}
-        >
-          <img
-            role='presentation'
-            ref={this.setImageRef}
-            alt={alt}
-            title={alt}
-            lang={lang}
-            src={src}
-            width={width}
-            height={height}
-            style={{
-              transform: `scale(${scale}) translate(-${lockTranslate.x}px, -${lockTranslate.y}px)`,
-              transformOrigin: '0 0',
-            }}
-            draggable={false}
-            onClick={this.handleClick}
-            onMouseDown={this.handleMouseDown}
-          />
-        </div>
-      </>
+      </div>
     );
   }
-
 }
 
-export default injectIntl(ZoomableImage);
+export default ZoomableImage;

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

@@ -186,7 +186,7 @@ class SwitchingColumnsArea extends PureComponent {
             {redirect}
 
             {singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
-            {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={pathName.slice(5)} /> : null}
+            {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={{...this.props.location, pathname: pathName.slice(5)}} /> : null}
             {/* Redirect old bookmarks (without /deck) with home-like routes to the advanced interface */}
             {!singleColumn && pathName === '/getting-started' ? <Redirect from='/getting-started' to='/deck/getting-started' exact /> : null}
             {!singleColumn && pathName === '/home' ? <Redirect from='/home' to='/deck/getting-started' exact /> : null}

app/javascript/mastodon/initial_state.js

@@ -43,7 +43,6 @@
  * @property {boolean=} use_pending_items
  * @property {string} version
  * @property {string} sso_redirect
- * @property {boolean} force_grouped_notifications
  */
 
 /**
@@ -119,7 +118,6 @@ export const criticalUpdatesPending = initialState?.critical_updates_pending;
 // @ts-expect-error
 export const statusPageUrl = getMeta('status_page_url');
 export const sso_redirect = getMeta('sso_redirect');
-export const forceGroupedNotifications = getMeta('force_grouped_notifications');
 
 /**
  * @returns {string | undefined}

app/javascript/mastodon/locales/an.json

@@ -288,8 +288,6 @@
   "keyboard_shortcuts.unfocus": "Retirar lo foco d'a caixa de redacción/busqueda",
   "keyboard_shortcuts.up": "Ir enta alto en a lista",
   "lightbox.close": "Zarrar",
-  "lightbox.compress": "Comprimir quadro de visualización d'imachen",
-  "lightbox.expand": "Expandir quadro de visualización d'imachen",
   "lightbox.next": "Siguient",
   "lightbox.previous": "Anterior",
   "limited_account_hint.action": "Amostrar perfil de totz modos",
@@ -480,7 +478,6 @@
   "status.detailed_status": "Vista de conversación detallada",
   "status.edit": "Editar",
   "status.edited_x_times": "Editau {count, plural, one {{count} vez} other {{count} veces}}",
-  "status.embed": "Incrustado",
   "status.filter": "Filtrar esta publicación",
   "status.history.created": "{name} creyó {date}",
   "status.history.edited": "{name} editó {date}",

app/javascript/mastodon/locales/ar.json

@@ -3,7 +3,7 @@
   "about.contact": "للاتصال:",
   "about.disclaimer": "ماستدون برنامج حر ومفتوح المصدر وعلامة تجارية لـ Mastodon GmbH.",
   "about.domain_blocks.no_reason_available": "السبب غير متوفر",
-  "about.domain_blocks.preamble": "يسمح لك ماستدون عموماً بعرض المحتوى من المستخدمين من أي خادم آخر في الفدرالية والتفاعل معهم. وهذه هي الاستثناءات التي وضعت على هذا الخادم بالذات.",
+  "about.domain_blocks.preamble": "يتيح مَستُدون عمومًا لمستخدميه مطالعة المحتوى من المستخدمين من الخواديم الأخرى في الفدرالية والتفاعل معهم. وهذه هي الاستثناءات التي وضعت على هذا الخادوم.",
   "about.domain_blocks.silenced.explanation": "لن تظهر لك ملفات التعريف الشخصية والمحتوى من هذا الخادوم، إلا إن بحثت عنه عمدًا أو تابعته.",
   "about.domain_blocks.silenced.title": "محدود",
   "about.domain_blocks.suspended.explanation": "لن يتم معالجة أي بيانات من هذا الخادم أو تخزينها أو تبادلها، مما يجعل أي تفاعل أو اتصال مع المستخدمين من هذا الخادم مستحيلا.",
@@ -34,8 +34,9 @@
   "account.follow_back": "تابعه بالمثل",
   "account.followers": "مُتابِعون",
   "account.followers.empty": "لا أحدَ يُتابع هذا المُستخدم إلى حد الآن.",
-  "account.followers_counter": "{count, plural, zero {}one {{counter} متابع} two {{counter} متابعين} few {{counter} متابعين} many {{counter} متابعين} other {{counter} متابعين}}",
+  "account.followers_counter": "{count, plural, zero{لا مُتابع} one {مُتابعٌ واحِد} two {مُتابعانِ اِثنان} few {{counter} مُتابِعين} many {{counter} مُتابِعًا} other {{counter} مُتابع}}",
   "account.following": "الاشتراكات",
+  "account.following_counter": "{count, plural, zero{لا يُتابِع أحدًا} one {يُتابِعُ واحد} two{يُتابِعُ اِثنان} few{يُتابِعُ {counter}} many{يُتابِعُ {counter}} other {يُتابِعُ {counter}}}",
   "account.follows.empty": "لا يُتابع هذا المُستخدمُ أيَّ أحدٍ حتى الآن.",
   "account.go_to_profile": "اذهب إلى الملف الشخصي",
   "account.hide_reblogs": "إخفاء المعاد نشرها مِن @{name}",
@@ -43,7 +44,7 @@
   "account.joined_short": "انضم في",
   "account.languages": "تغيير اللغات المشترَك فيها",
   "account.link_verified_on": "تمَّ التَّحقق مِن مِلْكيّة هذا الرابط بتاريخ {date}",
-  "account.locked_info": "تمَّ تعيين حالة خصوصية هذا الحساب إلى مُقفَل. يُراجع المالك يدويًا من يمكنه متابعته.",
+  "account.locked_info": "تم ضبط حالة خصوصية هذا الحساب على أنه مؤمّن. إذ يراجع صاحبه يدويًا من يُسمح له بالمتابعة.",
   "account.media": "وسائط",
   "account.mention": "أذكُر @{name}",
   "account.moved_to": "أشار {name} إلى أن حسابه الجديد الآن:",
@@ -83,6 +84,7 @@
   "alert.rate_limited.title": "معدل الطلبات محدود",
   "alert.unexpected.message": "لقد طرأ خطأ غير متوقّع.",
   "alert.unexpected.title": "المعذرة!",
+  "alt_text_badge.title": "نص بديل",
   "announcement.announcement": "إعلان",
   "attachments_list.unprocessed": "(غير معالَج)",
   "audio.hide": "إخفاء المقطع الصوتي",
@@ -219,7 +221,6 @@
   "domain_block_modal.they_cant_follow": "لا أحد من هذا الخادم يمكنه متابعتك.",
   "domain_block_modal.they_wont_know": "لن يَعرف أنه قد تم حظره.",
   "domain_block_modal.title": "أتريد حظر النطاق؟",
-  "domain_block_modal.you_will_lose_followers": "سيتم إزالة جميع متابعيك من هذا الخادم.",
   "domain_block_modal.you_wont_see_posts": "لن ترى منشورات أو إشعارات من المستخدمين على هذا الخادم.",
   "domain_pill.activitypub_lets_connect": "يتيح لك التواصل والتفاعل مع الناس ليس فقط على ماستدون، ولكن عبر تطبيقات اجتماعية مختلفة أيضا.",
   "domain_pill.activitypub_like_language": "إنّ ActivityPub مثل لغة ماستدون التي يتحدث بها مع شبكات اجتماعية أخرى.",
@@ -309,7 +310,7 @@
   "follow_request.authorize": "ترخيص",
   "follow_request.reject": "رفض",
   "follow_requests.unlocked_explanation": "حتى وإن كان حسابك غير مقفل، يعتقد فريق {domain} أنك قد ترغب في مراجعة طلبات المتابعة من هذه الحسابات يدوياً.",
-  "follow_suggestions.curated_suggestion": "اختيار الموظفين",
+  "follow_suggestions.curated_suggestion": "انتقاه الفريق",
   "follow_suggestions.dismiss": "لا تُظهرها مجدّدًا",
   "follow_suggestions.featured_longer": "مختار يدوياً من قِبل فريق {domain}",
   "follow_suggestions.friends_of_friends_longer": "مشهور بين الأشخاص الذين تتابعهم",
@@ -419,8 +420,6 @@
   "keyboard_shortcuts.unfocus": "لإلغاء التركيز على حقل النص أو نافذة البحث",
   "keyboard_shortcuts.up": "للانتقال إلى أعلى القائمة",
   "lightbox.close": "إغلاق",
-  "lightbox.compress": "ضغط مربع عرض الصورة",
-  "lightbox.expand": "توسيع مربع عرض الصور",
   "lightbox.next": "التالي",
   "lightbox.previous": "العودة",
   "limited_account_hint.action": "إظهار الملف التعريفي على أي حال",
@@ -443,6 +442,7 @@
   "lists.subheading": "قوائمك",
   "load_pending": "{count, plural, one {# عنصر جديد} other {# عناصر جديدة}}",
   "loading_indicator.label": "جاري التحميل…",
+  "media_gallery.hide": "إخفاء",
   "moved_to_account_banner.text": "حسابك {disabledAccount} معطل حاليًا لأنك انتقلت إلى {movedToAccount}.",
   "mute_modal.hide_from_notifications": "إخفاء من قائمة الإشعارات",
   "mute_modal.hide_options": "إخفاء الخيارات",
@@ -527,8 +527,6 @@
   "notifications.column_settings.admin.report": "التبليغات الجديدة:",
   "notifications.column_settings.admin.sign_up": "التسجيلات الجديدة:",
   "notifications.column_settings.alert": "إشعارات سطح المكتب",
-  "notifications.column_settings.beta.category": "ميزات تجريبية",
-  "notifications.column_settings.beta.grouping": "جمّع الإشعارات",
   "notifications.column_settings.favourite": "المفضلة:",
   "notifications.column_settings.filter_bar.advanced": "عرض جميع الفئات",
   "notifications.column_settings.filter_bar.category": "شريط التصفية السريعة",
@@ -744,6 +742,7 @@
   "status.bookmark": "أضفه إلى الفواصل المرجعية",
   "status.cancel_reblog_private": "إلغاء إعادة النشر",
   "status.cannot_reblog": "لا يمكن إعادة نشر هذا المنشور",
+  "status.continued_thread": "تكملة للخيط",
   "status.copy": "انسخ رابط الرسالة",
   "status.delete": "احذف",
   "status.detailed_status": "تفاصيل المحادثة",
@@ -752,7 +751,7 @@
   "status.edit": "تعديل",
   "status.edited": "آخر تعديل يوم {date}",
   "status.edited_x_times": "عُدّل {count, plural, zero {} one {مرةً واحدة} two {مرّتان} few {{count} مرات} many {{count} مرة} other {{count} مرة}}",
-  "status.embed": "إدماج",
+  "status.embed": "الحصول على شيفرة الدمج",
   "status.favourite": "فضّل",
   "status.favourites": "{count, plural, zero {}one {مفضلة واحدة} two {مفضلتان} few {# مفضلات} many {# مفضلات} other {# مفضلات}}",
   "status.filter": "تصفية هذا المنشور",
@@ -760,7 +759,7 @@
   "status.history.edited": "عدله {name} {date}",
   "status.load_more": "حمّل المزيد",
   "status.media.open": "اضغط للفتح",
-  "status.media.show": "اضغط لإظهاره",
+  "status.media.show": "اضغط لإظهارها",
   "status.media_hidden": "وسائط مخفية",
   "status.mention": "أذكُر @{name}",
   "status.more": "المزيد",
@@ -773,10 +772,11 @@
   "status.reblog": "إعادة النشر",
   "status.reblog_private": "إعادة النشر إلى الجمهور الأصلي",
   "status.reblogged_by": "شارَكَه {name}",
-  "status.reblogs": "{count, plural, one {تعزيز واحد} two {تعزيزتان} few {# تعزيزات} many {# تعزيزات} other {# تعزيزات}}",
+  "status.reblogs": "{count, plural, one {إعادة نشر واحدة} two {معاد نشرها مرتان} few {# إعادات نشر} many {# إعادات نشر} other {# إعادة نشر}}",
   "status.reblogs.empty": "لم يقم أي أحد بمشاركة هذا المنشور بعد. عندما يقوم أحدهم بذلك سوف يظهر هنا.",
   "status.redraft": "إزالة وإعادة الصياغة",
   "status.remove_bookmark": "احذفه مِن الفواصل المرجعية",
+  "status.replied_in_thread": "رد في خيط",
   "status.replied_to": "رَدًا على {name}",
   "status.reply": "ردّ",
   "status.replyAll": "رُد على الخيط",

app/javascript/mastodon/locales/ast.json

@@ -297,7 +297,6 @@
   "notifications.clear": "Borrar los avisos",
   "notifications.column_settings.admin.report": "Informes nuevos:",
   "notifications.column_settings.admin.sign_up": "Rexistros nuevos:",
-  "notifications.column_settings.beta.category": "Funciones esperimentales",
   "notifications.column_settings.follow": "Siguidores nuevos:",
   "notifications.column_settings.follow_request": "Solicitúes de siguimientu nueves:",
   "notifications.column_settings.mention": "Menciones:",
@@ -419,7 +418,6 @@
   "status.direct": "Mentar a @{name} per privao",
   "status.direct_indicator": "Mención privada",
   "status.edited_x_times": "Editóse {count, plural, one {{count} vegada} other {{count} vegaes}}",
-  "status.embed": "Empotrar",
   "status.filter": "Peñerar esti artículu",
   "status.history.created": "{name} creó {date}",
   "status.history.edited": "{name} editó {date}",

app/javascript/mastodon/locales/be.json

@@ -219,7 +219,6 @@
   "domain_block_modal.they_cant_follow": "Ніхто з гэтага сервера не зможа падпісацца на вас.",
   "domain_block_modal.they_wont_know": "Карыстальнік не будзе ведаць пра блакіроўку.",
   "domain_block_modal.title": "Заблакіраваць дамен?",
-  "domain_block_modal.you_will_lose_followers": "Усе падпісчыкі з гэтага сервера будуць выдаленыя.",
   "domain_block_modal.you_wont_see_posts": "Вы не ўбачыце допісаў і апавяшчэнняў ад карыстальнікаў з гэтага сервера.",
   "domain_pill.activitypub_lets_connect": "Ён дазваляе вам узаемадзейнічаць не толькі з карыстальнікамі Mastodon, але і розных іншых сацыяльных платформ.",
   "domain_pill.activitypub_like_language": "ActivityPub — гэта мова, на якой Mastodon размаўляе з іншымі сацыяльнымі сеткамі.",
@@ -412,8 +411,6 @@
   "keyboard_shortcuts.unfocus": "Расфакусаваць тэкставую вобласць/пошукавы радок",
   "keyboard_shortcuts.up": "Перамясціцца ўверх па спісе",
   "lightbox.close": "Закрыць",
-  "lightbox.compress": "Сціснуць бачную вобласць выявы",
-  "lightbox.expand": "Павялічыць бачную вобласць выявы",
   "lightbox.next": "Далей",
   "lightbox.previous": "Назад",
   "limited_account_hint.action": "Усе роўна паказваць профіль",
@@ -523,8 +520,6 @@
   "notifications.column_settings.admin.report": "Новыя скаргі:",
   "notifications.column_settings.admin.sign_up": "Новыя ўваходы:",
   "notifications.column_settings.alert": "Апавяшчэнні на працоўным стале",
-  "notifications.column_settings.beta.category": "Эксперыментальныя функцыі",
-  "notifications.column_settings.beta.grouping": "Групаваць апавяшчэннi",
   "notifications.column_settings.favourite": "Упадабанае:",
   "notifications.column_settings.filter_bar.advanced": "Паказаць усе катэгорыі",
   "notifications.column_settings.filter_bar.category": "Панэль хуткай фільтрацыі",
@@ -748,7 +743,6 @@
   "status.edit": "Рэдагаваць",
   "status.edited": "Апошняе рэдагаванне {date}",
   "status.edited_x_times": "Рэдагавана {count, plural, one {{count} раз} few {{count} разы} many {{count} разоў} other {{count} разу}}",
-  "status.embed": "Убудаваць",
   "status.favourite": "Упадабанае",
   "status.favourites": "{count, plural, one {# упадабанае} few {# упадабаныя} many {# упадабаных} other {# упадабанага}}",
   "status.filter": "Фільтраваць гэты допіс",

app/javascript/mastodon/locales/bg.json

@@ -85,6 +85,7 @@
   "alert.rate_limited.title": "Скоростта е ограничена",
   "alert.unexpected.message": "Възникна неочаквана грешка.",
   "alert.unexpected.title": "Опаа!",
+  "alt_text_badge.title": "Алтернативен текст",
   "announcement.announcement": "Оповестяване",
   "attachments_list.unprocessed": "(необработено)",
   "audio.hide": "Скриване на звука",
@@ -220,7 +221,6 @@
   "domain_block_modal.they_cant_follow": "Никого от този сървър не може да ви последва.",
   "domain_block_modal.they_wont_know": "Няма да узнаят, че са били блокирани.",
   "domain_block_modal.title": "Блокирате ли домейн?",
-  "domain_block_modal.you_will_lose_followers": "Всичките ви последователи от този сървър ще се премахнат.",
   "domain_block_modal.you_wont_see_posts": "Няма да виждате публикации или известия от потребителите на този сървър.",
   "domain_pill.activitypub_lets_connect": "Позволява ви да се свързвате и взаимодействате с хора не само в Mastodon, но и през различни социални приложения.",
   "domain_pill.activitypub_like_language": "ActivityPub е като език на Mastodon, говорещ с други социални мрежи.",
@@ -419,8 +419,6 @@
   "keyboard_shortcuts.unfocus": "Разфокусиране на текстовото поле за съставяне/търсене",
   "keyboard_shortcuts.up": "Преместване нагоре в списъка",
   "lightbox.close": "Затваряне",
-  "lightbox.compress": "Свиване на полето за преглед на образи",
-  "lightbox.expand": "Разгъване на полето за преглед на образи",
   "lightbox.next": "Напред",
   "lightbox.previous": "Назад",
   "limited_account_hint.action": "Показване на профила въпреки това",
@@ -540,8 +538,6 @@
   "notifications.column_settings.admin.report": "Нови доклади:",
   "notifications.column_settings.admin.sign_up": "Нови регистрации:",
   "notifications.column_settings.alert": "Известия на работния плот",
-  "notifications.column_settings.beta.category": "Експериментални функции",
-  "notifications.column_settings.beta.grouping": "Групови известия",
   "notifications.column_settings.favourite": "Любими:",
   "notifications.column_settings.filter_bar.advanced": "Показване на всички категории",
   "notifications.column_settings.filter_bar.category": "Лента за бърз филтър",
@@ -766,7 +762,6 @@
   "status.edit": "Редактиране",
   "status.edited": "Последно редактирано на {date}",
   "status.edited_x_times": "Редактирано {count, plural,one {{count} път} other {{count} пъти}}",
-  "status.embed": "Вграждане",
   "status.favourite": "Любимо",
   "status.favourites": "{count, plural, one {любимо} other {любими}}",
   "status.filter": "Филтриране на публ.",

app/javascript/mastodon/locales/bn.json

@@ -408,7 +408,6 @@
   "status.detailed_status": "বিস্তারিত কথোপকথনের হিসেবে দেখতে",
   "status.edit": "সম্পাদন",
   "status.edited_x_times": "Edited {count, plural, one {# time} other {# times}}",
-  "status.embed": "এমবেড করতে",
   "status.favourite": "পছন্দ",
   "status.load_more": "আরো দেখুন",
   "status.media_hidden": "মিডিয়া লুকানো আছে",

app/javascript/mastodon/locales/br.json

@@ -338,8 +338,6 @@
   "keyboard_shortcuts.unfocus": "Difokus an dachenn testenn/klask",
   "keyboard_shortcuts.up": "Pignat er roll",
   "lightbox.close": "Serriñ",
-  "lightbox.compress": "Bihanaat boest hewel ar skeudenn",
-  "lightbox.expand": "Ledanaat boest hewel ar skeudenn",
   "lightbox.next": "Da-heul",
   "lightbox.previous": "A-raok",
   "limited_account_hint.action": "Diskouez an aelad memes tra",
@@ -575,7 +573,6 @@
   "status.edit": "Kemmañ",
   "status.edited": "Kemmet da ziwezhañ d'an {date}",
   "status.edited_x_times": "Edited {count, plural, one {# time} other {# times}}",
-  "status.embed": "Enframmañ",
   "status.favourite": "Muiañ-karet",
   "status.filter": "Silañ ar c'hannad-mañ",
   "status.history.created": "Krouet gant {name} {date}",