Merge branch 'refs/heads/glitch' into develop

# Conflicts:
#	app/javascript/flavours/glitch/actions/interactions.js

.devcontainer/codespaces/devcontainer.json

@@ -39,7 +39,7 @@
   },
 
   "onCreateCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
-  "postCreateCommand": "bin/setup",
+  "postCreateCommand": "COREPACK_ENABLE_DOWNLOAD_PROMPT=0 bin/setup",
   "waitFor": "postCreateCommand",
 
   "customizations": {

.nvmrc

@@ -1 +1 @@
-20.15
+20.16

Dockerfile

@@ -1,4 +1,4 @@
-# syntax=docker/dockerfile:1.8
+# syntax=docker/dockerfile:1.9
 
 # 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

Gemfile

@@ -100,7 +100,7 @@ gem 'json-ld'
 gem 'json-ld-preloaded', '~> 3.2'
 gem 'rdf-normalize', '~> 0.5'
 
-gem 'opentelemetry-api', '~> 1.2.5'
+gem 'opentelemetry-api', '~> 1.3.0'
 
 group :opentelemetry do
   gem 'opentelemetry-exporter-otlp', '~> 0.28.0', require: false

Gemfile.lock

@@ -222,9 +222,9 @@ GEM
     elasticsearch-transport (7.17.10)
       faraday (>= 1, < 3)
       multi_json
-    email_spec (2.2.2)
+    email_spec (2.3.0)
       htmlentities (~> 4.3.3)
-      launchy (~> 2.1)
+      launchy (>= 2.1, < 4.0)
       mail (~> 2.7)
     erubi (1.13.0)
     et-orbi (1.2.11)
@@ -289,7 +289,7 @@ GEM
       ruby-progressbar (~> 1.4)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-protobuf (3.25.3)
+    google-protobuf (3.25.4)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
     haml (6.3.0)
@@ -440,7 +440,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.12)
+    net-imap (0.4.14)
       date
       net-protocol
     net-ldap (0.19.0)
@@ -451,7 +451,7 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.3)
-    nokogiri (1.16.6)
+    nokogiri (1.16.7)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     nsa (0.3.0)
@@ -492,10 +492,10 @@ GEM
     openssl (3.2.0)
     openssl-signature_algorithm (1.3.0)
       openssl (> 2.0)
-    opentelemetry-api (1.2.5)
+    opentelemetry-api (1.3.0)
     opentelemetry-common (0.20.1)
       opentelemetry-api (~> 1.0)
-    opentelemetry-exporter-otlp (0.28.0)
+    opentelemetry-exporter-otlp (0.28.1)
       google-protobuf (>= 3.18)
       googleapis-common-protos-types (~> 1.3)
       opentelemetry-api (~> 1.1)
@@ -512,14 +512,14 @@ GEM
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
       opentelemetry-instrumentation-rack (~> 0.21)
-    opentelemetry-instrumentation-action_view (0.7.0)
+    opentelemetry-instrumentation-action_view (0.7.1)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-active_support (~> 0.1)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-active_job (0.7.2)
+    opentelemetry-instrumentation-active_job (0.7.3)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-active_model_serializers (0.20.1)
+    opentelemetry-instrumentation-active_model_serializers (0.20.2)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
     opentelemetry-instrumentation-active_record (0.7.2)
@@ -531,32 +531,32 @@ GEM
     opentelemetry-instrumentation-base (0.22.3)
       opentelemetry-api (~> 1.0)
       opentelemetry-registry (~> 0.1)
-    opentelemetry-instrumentation-concurrent_ruby (0.21.3)
+    opentelemetry-instrumentation-concurrent_ruby (0.21.4)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-excon (0.22.3)
+    opentelemetry-instrumentation-excon (0.22.4)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-faraday (0.24.5)
+    opentelemetry-instrumentation-faraday (0.24.6)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-http (0.23.3)
+    opentelemetry-instrumentation-http (0.23.4)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-http_client (0.22.6)
+    opentelemetry-instrumentation-http_client (0.22.7)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-net_http (0.22.6)
+    opentelemetry-instrumentation-net_http (0.22.7)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-pg (0.27.3)
+    opentelemetry-instrumentation-pg (0.27.4)
       opentelemetry-api (~> 1.0)
       opentelemetry-helpers-sql-obfuscation
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-rack (0.24.5)
+    opentelemetry-instrumentation-rack (0.24.6)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-rails (0.31.0)
+    opentelemetry-instrumentation-rails (0.31.1)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-action_mailer (~> 0.1.0)
       opentelemetry-instrumentation-action_pack (~> 0.9.0)
@@ -565,20 +565,20 @@ GEM
       opentelemetry-instrumentation-active_record (~> 0.7.0)
       opentelemetry-instrumentation-active_support (~> 0.6.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-redis (0.25.6)
+    opentelemetry-instrumentation-redis (0.25.7)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
-    opentelemetry-instrumentation-sidekiq (0.25.6)
+    opentelemetry-instrumentation-sidekiq (0.25.7)
       opentelemetry-api (~> 1.0)
       opentelemetry-instrumentation-base (~> 0.22.1)
     opentelemetry-registry (0.3.1)
       opentelemetry-api (~> 1.1)
-    opentelemetry-sdk (1.4.1)
+    opentelemetry-sdk (1.5.0)
       opentelemetry-api (~> 1.1)
       opentelemetry-common (~> 0.20)
       opentelemetry-registry (~> 0.2)
       opentelemetry-semantic_conventions
-    opentelemetry-semantic_conventions (1.10.0)
+    opentelemetry-semantic_conventions (1.10.1)
       opentelemetry-api (~> 1.0)
     orm_adapter (0.5.0)
     ox (2.14.18)
@@ -589,7 +589,7 @@ GEM
     parslet (2.0.0)
     pastel (0.8.0)
       tty-color (~> 0.5)
-    pg (1.5.6)
+    pg (1.5.7)
     pghero (3.6.0)
       activerecord (>= 6.1)
     premailer (1.23.0)
@@ -607,7 +607,7 @@ GEM
       railties (>= 7.0.0)
     psych (5.1.2)
       stringio
-    public_suffix (6.0.0)
+    public_suffix (6.0.1)
     puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.2)
@@ -775,7 +775,7 @@ GEM
       fugit (~> 1.1, >= 1.1.6)
     safety_net_attestation (0.4.0)
       jwt (~> 2.0)
-    sanitize (6.1.1)
+    sanitize (6.1.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     scenic (1.8.0)
@@ -983,7 +983,7 @@ DEPENDENCIES
   omniauth-rails_csrf_protection (~> 1.0)
   omniauth-saml (~> 2.0)
   omniauth_openid_connect (~> 0.6.1)
-  opentelemetry-api (~> 1.2.5)
+  opentelemetry-api (~> 1.3.0)
   opentelemetry-exporter-otlp (~> 0.28.0)
   opentelemetry-instrumentation-active_job (~> 0.7.1)
   opentelemetry-instrumentation-active_model_serializers (~> 0.20.1)

app/controllers/admin/instances_controller.rb

@@ -13,6 +13,7 @@ module Admin
     def show
       authorize :instance, :show?
       @time_period = (6.days.ago.to_date...Time.now.utc.to_date)
+      @action_logs = Admin::ActionLogFilter.new(target_domain: @instance.domain).results.limit(5)
     end
 
     def destroy

app/controllers/admin/tags_controller.rb

@@ -2,7 +2,15 @@
 
 module Admin
   class TagsController < BaseController
-    before_action :set_tag
+    before_action :set_tag, except: [:index]
+
+    PER_PAGE = 20
+
+    def index
+      authorize :tag, :index?
+
+      @tags = filtered_tags.page(params[:page]).per(PER_PAGE)
+    end
 
     def show
       authorize @tag, :show?
@@ -31,5 +39,13 @@ module Admin
     def tag_params
       params.require(:tag).permit(:name, :display_name, :trendable, :usable, :listable)
     end
+
+    def filtered_tags
+      TagFilter.new(filter_params.with_defaults(order: 'newest')).results
+    end
+
+    def filter_params
+      params.slice(:page, *TagFilter::KEYS).permit(:page, *TagFilter::KEYS)
+    end
   end
 end

app/controllers/application_controller.rb

@@ -23,7 +23,6 @@ class ApplicationController < ActionController::Base
   helper_method :current_theme
   helper_method :single_user_mode?
   helper_method :use_seamless_external_login?
-  helper_method :omniauth_only?
   helper_method :sso_account_settings
   helper_method :limited_federation_mode?
   helper_method :body_class_string
@@ -140,10 +139,6 @@ class ApplicationController < ActionController::Base
     Devise.pam_authentication || Devise.ldap_authentication
   end
 
-  def omniauth_only?
-    ENV['OMNIAUTH_ONLY'] == 'true'
-  end
-
   def sso_account_settings
     ENV.fetch('SSO_ACCOUNT_SETTINGS', nil)
   end

app/helpers/admin/tags_helper.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Admin::TagsHelper
+  def admin_tags_moderation_options
+    [
+      [t('admin.tags.moderation.reviewed'), 'reviewed'],
+      [t('admin.tags.moderation.review_requested'), 'review_requested'],
+      [t('admin.tags.moderation.unreviewed'), 'unreviewed'],
+      [t('admin.tags.moderation.trendable'), 'trendable'],
+      [t('admin.tags.moderation.not_trendable'), 'not_trendable'],
+      [t('admin.tags.moderation.usable'), 'usable'],
+      [t('admin.tags.moderation.not_usable'), 'not_usable'],
+    ]
+  end
+end

app/javascript/entrypoints/public.tsx

@@ -316,8 +316,8 @@ function loaded() {
 
       const message =
         statusEl.dataset.spoiler === 'expanded'
-          ? localeData['status.show_less'] ?? 'Show less'
-          : localeData['status.show_more'] ?? 'Show more';
+          ? (localeData['status.show_less'] ?? 'Show less')
+          : (localeData['status.show_more'] ?? 'Show more');
       spoilerLink.textContent = new IntlMessageFormat(
         message,
         locale,

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

@@ -1,3 +1,5 @@
+import { browserHistory } from 'flavours/glitch/components/router';
+
 import api, { getLinks } from '../api';
 
 import {
@@ -722,6 +724,16 @@ export const updateAccount = ({ displayName, note, avatar, header, discoverable,
   });
 };
 
+export const navigateToProfile = (accountId) => {
+  return (_dispatch, getState) => {
+    const acct = getState().accounts.getIn([accountId, 'acct']);
+  
+    if (acct) {
+      browserHistory.push(`/@${acct}`);
+    }
+  };
+};
+
 export function fetchPinnedAccountsSuggestions(q) {
   return (dispatch) => {
     dispatch(fetchPinnedAccountsSuggestionsRequest());

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

@@ -131,6 +131,18 @@ export function replyCompose(status) {
   };
 }
 
+export function replyComposeById(statusId) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const status = state.statuses.get(statusId);
+
+    if (status) {
+      const account = state.accounts.get(status.get('account'));
+      dispatch(replyCompose(status.set('account', account)));
+    }
+  };
+}
+
 export function cancelReplyCompose() {
   return {
     type: COMPOSE_REPLY_CANCEL,
@@ -163,6 +175,12 @@ export function mentionCompose(account) {
   };
 }
 
+export function mentionComposeById(accountId) {
+  return (dispatch, getState) => {
+    dispatch(mentionCompose(getState().accounts.get(accountId)));
+  };
+}
+
 export function directCompose(account) {
   return (dispatch, getState) => {
     dispatch({

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

@@ -1,7 +1,11 @@
+import { boostModal, favouriteModal } from 'flavours/glitch/initial_state';
+
 import api, { getLinks } from '../api';
 
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
+import { unreblog, reblog } from './interactions_typed';
+import { openModal } from './modal';
 
 export const REBLOGS_EXPAND_REQUEST = 'REBLOGS_EXPAND_REQUEST';
 export const REBLOGS_EXPAND_SUCCESS = 'REBLOGS_EXPAND_SUCCESS';
@@ -443,6 +447,64 @@ export function unpinFail(status, error) {
   };
 }
 
+function toggleReblogWithoutConfirmation(status, privacy) {
+  return (dispatch) => {
+    if (status.get('reblogged')) {
+      dispatch(unreblog({ statusId: status.get('id') }));
+    } else {
+      dispatch(reblog({ statusId: status.get('id'), privacy }));
+    }
+  };
+}
+
+export function toggleReblog(statusId, skipModal = false) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let status = state.statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    // The reblog modal expects a pre-filled account in status
+    // TODO: fix this by having the reblog modal get a statusId and do the work itself
+    status = status.set('account', state.accounts.get(status.get('account')));
+
+    const missing_description_setting = state.getIn(['local_settings', 'confirm_boost_missing_media_description']);
+    const missing_description = status.get('media_attachments').some(item => !item.get('description'));
+    if (missing_description_setting && missing_description && !status.get('reblogged')) {
+      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)), missingMediaDescription: true } }));
+    } else if (boostModal && !skipModal) {
+      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)) } }));
+    } else {
+      dispatch(toggleReblogWithoutConfirmation(status));
+    }
+  };
+}
+
+export function toggleFavourite(statusId, skipModal = false) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let status = state.statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    // The favourite modal expects a pre-filled account in status
+    // TODO: fix this by having the reblog modal get a statusId and do the work itself
+    status = status.set('account', state.accounts.get(status.get('account')));
+
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      if (favouriteModal && !skipModal) {
+        dispatch(openModal({ modalType: 'FAVOURITE', modalProps: { status, onFavourite: (status) => dispatch(favourite(status)) } }));
+      } else {
+        dispatch(favourite(status));
+      }
+    }
+  };
+}
+
 export const addReaction = (statusId, name, url) => (dispatch, getState) => {
   const status = getState().get('statuses').get(statusId);
   let alreadyAdded = false;

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

@@ -1,3 +1,5 @@
+import { createAction } from '@reduxjs/toolkit';
+
 import {
   apiGetNotificationPolicy,
   apiUpdateNotificationsPolicy,
@@ -14,3 +16,7 @@ export const updateNotificationsPolicy = createDataLoadingThunk(
   'notificationPolicy/update',
   (policy: Partial<NotificationPolicy>) => apiUpdateNotificationsPolicy(policy),
 );
+
+export const decreasePendingNotificationsCount = createAction<number>(
+  'notificationPolicy/decreasePendingNotificationCount',
+);

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

@@ -18,6 +18,7 @@ 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';
@@ -96,6 +97,12 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
   }
 };
 
+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,
 });
@@ -522,11 +529,13 @@ export const fetchNotificationRequestFail = (id, error) => ({
   error,
 });
 
-export const acceptNotificationRequest = id => (dispatch) => {
+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));
   });
@@ -548,11 +557,13 @@ export const acceptNotificationRequestFail = (id, error) => ({
   error,
 });
 
-export const dismissNotificationRequest = id => (dispatch) => {
+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));
   });

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

@@ -1,3 +1,5 @@
+import { browserHistory } from 'flavours/glitch/components/router';
+
 import api from '../api';
 
 import { ensureComposeIsVisible, setComposeToStatus } from './compose';
@@ -309,6 +311,21 @@ export function revealStatus(ids) {
   };
 }
 
+export function toggleStatusSpoilers(statusId) {
+  return (dispatch, getState) => {
+    const status = getState().statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    if (status.get('hidden')) {
+      dispatch(revealStatus(statusId));
+    } else {
+      dispatch(hideStatus(statusId));
+    }
+  };
+}
+
 export function toggleStatusCollapse(id, isCollapsed) {
   return {
     type: STATUS_COLLAPSE,
@@ -349,3 +366,15 @@ export const undoStatusTranslation = (id, pollId) => ({
   id,
   pollId,
 });
+
+export const navigateToStatus = (statusId) => {
+  return (_dispatch, getState) => {
+    const state = getState();
+    const accountId = state.statuses.getIn([statusId, 'account']);
+    const acct = state.accounts.getIn([accountId, 'acct']);
+
+    if (acct) {
+      browserHistory.push(`/@${acct}/${statusId}`);
+    }
+  };
+};

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

@@ -3,6 +3,8 @@ import { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import { unblockDomain } from 'flavours/glitch/actions/domain_blocks';
+import { useAppDispatch } from 'flavours/glitch/store';
 
 import { IconButton } from './icon_button';
 
@@ -13,17 +15,15 @@ const messages = defineMessages({
   },
 });
 
-interface Props {
+export const Domain: React.FC<{
   domain: string;
-  onUnblockDomain: (domain: string) => void;
-}
-
-export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
+}> = ({ domain }) => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
 
   const handleDomainUnblock = useCallback(() => {
-    onUnblockDomain(domain);
-  }, [domain, onUnblockDomain]);
+    dispatch(unblockDomain(domain));
+  }, [dispatch, domain]);
 
   return (
     <div className='domain'>

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

@@ -1,12 +1,11 @@
 import { useCallback, useEffect } from 'react';
 
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
 import { useIdentity } from '@/flavours/glitch/identity_context';
 import {
   fetchRelationships,
   followAccount,
-  unfollowAccount,
 } from 'flavours/glitch/actions/accounts';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { Button } from 'flavours/glitch/components/button';
@@ -59,29 +58,14 @@ export const FollowButton: React.FC<{
 
     if (accountId === me) {
       return;
-    } else if (relationship.following || relationship.requested) {
+    } else if (account && (relationship.following || relationship.requested)) {
       dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account?.acct}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollow),
-            onConfirm: () => {
-              dispatch(unfollowAccount(accountId));
-            },
-          },
-        }),
+        openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
       );
     } else {
       dispatch(followAccount(accountId));
     }
-  }, [dispatch, intl, accountId, relationship, account, signedIn]);
+  }, [dispatch, accountId, relationship, account, signedIn]);
 
   let label;
 

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

@@ -525,7 +525,7 @@ class Status extends ImmutablePureComponent {
   }
 
   render () {
-    const { intl, hidden, featured, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
+    const { intl, hidden, featured, unfocusable, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
 
     const {
       parseClick,
@@ -591,8 +591,8 @@ class Status extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <HotKeys handlers={handlers}>
-          <div ref={this.handleRef} className='status focusable' tabIndex={0}>
+        <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
+          <div ref={this.handleRef} className='status focusable' tabIndex={unfocusable ? null : 0}>
             <span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
             <span>{status.get('content')}</span>
           </div>
@@ -612,8 +612,8 @@ class Status extends ImmutablePureComponent {
       };
 
       return (
-        <HotKeys handlers={minHandlers}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
+        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
+          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
             {' '}
             <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
@@ -793,11 +793,11 @@ class Status extends ImmutablePureComponent {
     contentMedia.push(hashtagBar);
 
     return (
-      <HotKeys handlers={handlers}>
+      <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
         <div
           className={classNames('status__wrapper', 'focusable', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, collapsed: isCollapsed })}
           {...selectorAttribs}
-          tabIndex={0}
+          tabIndex={unfocusable ? null : 0}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
           ref={this.handleRef}

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

@@ -1,24 +1,20 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import { openModal } from 'flavours/glitch/actions/modal';
+
 import {
   followAccount,
-  unfollowAccount,
   blockAccount,
   unblockAccount,
   muteAccount,
   unmuteAccount,
 } from '../actions/accounts';
-import { openModal } from '../actions/modal';
 import { initMuteModal } from '../actions/mutes';
 import Account from '../components/account';
 import { makeGetAccount } from '../selectors';
 
-const messages = defineMessages({
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-});
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
@@ -29,18 +25,11 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.unfollowConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }));
     } else {
       dispatch(followAccount(account.get('id')));
     }

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

@@ -1,36 +0,0 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { blockDomain, unblockDomain } from '../actions/domain_blocks';
-import { openModal } from '../actions/modal';
-import { Domain } from '../components/domain';
-
-const messages = defineMessages({
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = () => ({});
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onBlockDomain (domain) {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => dispatch(blockDomain(domain)),
-      },
-    }));
-  },
-
-  onUnblockDomain (domain) {
-    dispatch(unblockDomain(domain));
-  },
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain));

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

@@ -1,5 +1,3 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
 import { connect } from 'react-redux';
 
 import { initBlockModal } from 'flavours/glitch/actions/blocks';
@@ -12,18 +10,15 @@ import {
   initAddFilter,
 } from 'flavours/glitch/actions/filters';
 import {
-  reblog,
-  favourite,
+  toggleReblog,
+  toggleFavourite,
   bookmark,
-  unreblog,
-  unfavourite,
   unbookmark,
   pin,
   unpin,
   addReaction,
   removeReaction,
 } from 'flavours/glitch/actions/interactions';
-import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { initMuteModal } from 'flavours/glitch/actions/mutes';
 import { deployPictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
@@ -32,33 +27,17 @@ import {
   muteStatus,
   unmuteStatus,
   deleteStatus,
-  hideStatus,
-  revealStatus,
+  toggleStatusSpoilers,
   editStatus,
   translateStatus,
   undoStatusTranslation,
 } from 'flavours/glitch/actions/statuses';
 import Status from 'flavours/glitch/components/status';
-import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
+import { deleteModal } from 'flavours/glitch/initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
 
 import { showAlertForError } from '../actions/alerts';
 
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
-  editMessage: { id: 'confirmations.edit.message', defaultMessage: 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  unfilterConfirm: { id: 'confirmations.unfilter.confirm', defaultMessage: 'Show' },
-  author: { id: 'confirmations.unfilter.author', defaultMessage: 'Author' },
-  matchingFilters: { id: 'confirmations.unfilter.filters', defaultMessage: 'Matching {count, plural, one {filter} other {filters}}' },
-  editFilter: { id: 'confirmations.unfilter.edit_filter', defaultMessage: 'Edit filter' },
-});
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
   const getPictureInPicture = makeGetPictureInPicture();
@@ -93,47 +72,22 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
+const mapDispatchToProps = (dispatch, { contextType }) => ({
 
   onReply (status) {
     dispatch((_, getState) => {
       let state = getState();
 
       if (state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
-            onConfirm: () => dispatch(replyCompose(status)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         dispatch(replyCompose(status));
       }
     });
   },
 
-  onModalReblog (status, privacy) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-    }
-  },
-
   onReblog (status, e) {
-    dispatch((_, getState) => {
-      let state = getState();
-      if (state.getIn(['local_settings', 'confirm_boost_missing_media_description']) && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog, missingMediaDescription: true } }));
-      } else if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    });
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
   },
 
   onBookmark (status) {
@@ -144,26 +98,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
-  onModalFavourite (status) {
-    dispatch(favourite(status));
-  },
-
   onFavourite (status, e) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      if (e.shiftKey || !favouriteModal) {
-        this.onModalFavourite(status);
-      } else {
-        dispatch(openModal({
-          modalType: 'FAVOURITE',
-          modalProps: {
-            status,
-            onFavourite: this.onModalFavourite,
-          },
-        }));
-      }
-    }
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
   },
 
   onPin (status) {
@@ -196,14 +132,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
     }
   },
 
@@ -211,14 +140,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch((_, getState) => {
       let state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.editMessage),
-            confirm: intl.formatMessage(messages.editConfirm),
-            onConfirm: () => dispatch(editStatus(status.get('id'))),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_EDIT_STATUS', modalProps: { statusId: status.get('id') } }));
       } else {
         dispatch(editStatus(status.get('id')));
       }
@@ -281,11 +203,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(status.get('id')));
   },
 
   deployPictureInPicture (status, type, mediaProps) {
@@ -309,4 +227,4 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
 
 });
 
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
+export default connect(makeMapStateToProps, mapDispatchToProps)(Status);

app/javascript/flavours/glitch/entrypoints/public.tsx

@@ -316,8 +316,8 @@ function loaded() {
 
       const message =
         statusEl.dataset.spoiler === 'expanded'
-          ? localeData['status.show_less'] ?? 'Show less'
-          : localeData['status.show_more'] ?? 'Show more';
+          ? (localeData['status.show_less'] ?? 'Show less')
+          : (localeData['status.show_more'] ?? 'Show more');
       spoilerLink.textContent = new IntlMessageFormat(
         message,
         locale,

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

@@ -1,10 +1,9 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
 import {
   followAccount,
-  unfollowAccount,
   unblockAccount,
   unmuteAccount,
   pinAccount,
@@ -22,11 +21,6 @@ import { initReport } from '../../../actions/reports';
 import { makeGetAccount, getAccountHidden } from '../../../selectors';
 import Header from '../components/header';
 
-const messages = defineMessages({
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
@@ -39,18 +33,11 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.unfollowConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }));
     } else {
       dispatch(followAccount(account.get('id')));
     }

app/javascript/flavours/glitch/features/compose/components/action_bar.jsx

@@ -7,7 +7,6 @@ import { useDispatch } from 'react-redux';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
-import { logOut } from 'flavours/glitch/utils/log_out';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
@@ -23,8 +22,6 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 export const ActionBar = () => {
@@ -32,16 +29,8 @@ export const ActionBar = () => {
   const intl = useIntl();
 
   const handleLogoutClick = useCallback(() => {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
-  }, [dispatch, intl]);
+    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
+  }, [dispatch]);
 
   let menu = [];
 

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

@@ -24,7 +24,6 @@ import { Icon }  from 'flavours/glitch/components/icon';
 import glitchedElephant1 from 'flavours/glitch/images/mbstobon-ui-0.png';
 import glitchedElephant2 from 'flavours/glitch/images/mbstobon-ui-1.png';
 import glitchedElephant3 from 'flavours/glitch/images/mbstobon-ui-2.png';
-import { logOut } from 'flavours/glitch/utils/log_out';
 
 import elephantUIPlane from '../../../../images/elephant_ui_plane.svg';
 import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose';
@@ -45,8 +44,6 @@ const messages = defineMessages({
   settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 const mapStateToProps = (state, ownProps) => ({
@@ -88,20 +85,12 @@ class Compose extends PureComponent {
   }
 
   handleLogoutClick = e => {
-    const { dispatch, intl } = this.props;
+    const { dispatch } = this.props;
 
     e.preventDefault();
     e.stopPropagation();
 
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
 
     return false;
   };

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -18,7 +18,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import { replyCompose } from 'flavours/glitch/actions/compose';
 import { markConversationRead, deleteConversation } from 'flavours/glitch/actions/conversations';
 import { openModal } from 'flavours/glitch/actions/modal';
-import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'flavours/glitch/actions/statuses';
+import { muteStatus, unmuteStatus, toggleStatusSpoilers } from 'flavours/glitch/actions/statuses';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -37,8 +37,6 @@ const messages = defineMessages({
   delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
 
 const getAccounts = createSelector(
@@ -121,19 +119,12 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
       let state = getState();
 
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(lastStatus)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status: lastStatus } }));
       } else {
         dispatch(replyCompose(lastStatus));
       }
     });
-  }, [dispatch, lastStatus, intl]);
+  }, [dispatch, lastStatus]);
 
   const handleDelete = useCallback(() => {
     dispatch(deleteConversation(id));
@@ -156,11 +147,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
   }, [dispatch, lastStatus]);
 
   const handleShowMore = useCallback(() => {
-    if (lastStatus.get('hidden')) {
-      dispatch(revealStatus(lastStatus.get('id')));
-    } else {
-      dispatch(hideStatus(lastStatus.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(lastStatus.get('id')));
 
     if (lastStatus.get('spoiler_text')) {
       setExpanded(!expanded);

app/javascript/flavours/glitch/features/directory/components/account_card.tsx

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 
 import {
   followAccount,
-  unfollowAccount,
   unblockAccount,
   unmuteAccount,
 } from 'flavours/glitch/actions/accounts';
@@ -29,20 +28,12 @@ const messages = defineMessages({
     id: 'account.cancel_follow_request',
     defaultMessage: 'Withdraw follow request',
   },
-  cancelFollowRequestConfirm: {
-    id: 'confirmations.cancel_follow_request.confirm',
-    defaultMessage: 'Withdraw request',
-  },
   requested: {
     id: 'account.requested',
     defaultMessage: 'Awaiting approval. Click to cancel follow request',
   },
   unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
   unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
-  unfollowConfirm: {
-    id: 'confirmations.unfollow.confirm',
-    defaultMessage: 'Unfollow',
-  },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 });
 
@@ -89,48 +80,17 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
   const handleFollow = useCallback(() => {
     if (!account) return;
 
-    if (account.getIn(['relationship', 'following'])) {
+    if (
+      account.getIn(['relationship', 'following']) ||
+      account.getIn(['relationship', 'requested'])
+    ) {
       dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollowConfirm),
-            onConfirm: () => {
-              dispatch(unfollowAccount(account.get('id')));
-            },
-          },
-        }),
-      );
-    } else if (account.getIn(['relationship', 'requested'])) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.cancel_follow_request.message'
-                defaultMessage='Are you sure you want to withdraw your request to follow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
-            onConfirm: () => {
-              dispatch(unfollowAccount(account.get('id')));
-            },
-          },
-        }),
+        openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
       );
     } else {
       dispatch(followAccount(account.get('id')));
     }
-  }, [account, dispatch, intl]);
+  }, [account, dispatch]);
 
   const handleBlock = useCallback(() => {
     if (account?.relationship?.blocking) {

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

@@ -11,16 +11,15 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
+import { Domain } from 'flavours/glitch/components/domain';
 
 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import DomainContainer from '../../containers/domain_container';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' },
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
 });
 
 const mapStateToProps = state => ({
@@ -70,7 +69,7 @@ class Blocks extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {domains.map(domain =>
-            <DomainContainer key={domain} domain={domain} />,
+            <Domain key={domain} domain={domain} />,
           )}
         </ScrollableList>
 

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

@@ -15,7 +15,7 @@ import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
-import { fetchList, deleteList, updateList } from 'flavours/glitch/actions/lists';
+import { fetchList, updateList } from 'flavours/glitch/actions/lists';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { connectListStream } from 'flavours/glitch/actions/streaming';
 import { expandListTimeline } from 'flavours/glitch/actions/timelines';
@@ -29,8 +29,6 @@ import StatusListContainer from 'flavours/glitch/features/ui/containers/status_l
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 const messages = defineMessages({
-  deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
-  deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
   followed:   { id: 'lists.replies_policy.followed', defaultMessage: 'Any followed user' },
   none:    { id: 'lists.replies_policy.none', defaultMessage: 'No one' },
   list:  { id: 'lists.replies_policy.list', defaultMessage: 'Members of the list' },
@@ -125,25 +123,10 @@ class ListTimeline extends PureComponent {
   };
 
   handleDeleteClick = () => {
-    const { dispatch, columnId, intl } = this.props;
+    const { dispatch, columnId } = this.props;
     const { id } = this.props.params;
 
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.deleteMessage),
-        confirm: intl.formatMessage(messages.deleteConfirm),
-        onConfirm: () => {
-          dispatch(deleteList(id));
-
-          if (columnId) {
-            dispatch(removeColumn(columnId));
-          } else {
-            this.props.history.push('/lists');
-          }
-        },
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_DELETE_LIST', modalProps: { listId: id, columnId } }));
   };
 
   handleRepliesPolicyChange = ({ target }) => {

app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js

@@ -2,11 +2,10 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import { openModal } from 'flavours/glitch/actions/modal';
 import { initializeNotifications } from 'flavours/glitch/actions/notifications_migration';
 
 import { showAlert } from '../../../actions/alerts';
-import { openModal } from '../../../actions/modal';
-import { clearNotifications } from '../../../actions/notification_groups';
 import { updateNotificationsPolicy } from '../../../actions/notification_policies';
 import { setFilter, requestBrowserPermission } from '../../../actions/notifications';
 import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
@@ -14,8 +13,6 @@ import { changeSetting } from '../../../actions/settings';
 import ColumnSettings from '../components/column_settings';
 
 const messages = defineMessages({
-  clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' },
-  clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
   permissionDenied: { id: 'notifications.permission_denied_alert', defaultMessage: 'Desktop notifications can\'t be enabled, as browser permission has been denied before' },
 });
 
@@ -31,7 +28,7 @@ const mapStateToProps = state => ({
   notificationPolicy: state.notificationPolicy,
 });
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onChange (path, checked) {
     if (path[0] === 'push') {
@@ -70,14 +67,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onClear () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.clearMessage),
-        confirm: intl.formatMessage(messages.clearConfirm),
-        onConfirm: () => dispatch(clearNotifications()),
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_CLEAR_NOTIFICATIONS' }));
   },
 
   onRequestNotificationPermission () {

app/javascript/flavours/glitch/features/notifications/containers/notification_container.js

@@ -2,13 +2,9 @@ import { connect } from 'react-redux';
 
 import { mentionCompose } from '../../../actions/compose';
 import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
+  toggleReblog,
+  toggleFavourite,
 } from '../../../actions/interactions';
-import { openModal } from '../../../actions/modal';
-import { boostModal } from '../../../initial_state';
 import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
 import Notification from '../components/notification';
 
@@ -35,28 +31,12 @@ const mapDispatchToProps = dispatch => ({
     dispatch(mentionCompose(account));
   },
 
-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  },
-
   onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
   },
 
-  onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+  onFavourite (status, e) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
   },
 });
 

app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -22,6 +22,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
 }) => {
   const history = useHistory();
+  const clickCoordinatesRef = useRef<[number, number] | null>();
 
   const status = useAppSelector(
     (state) => state.statuses.get(statusId) as Status | undefined,
@@ -31,11 +32,69 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
     state.accounts.get(status?.get('account') as string),
   );
 
-  const handleClick = useCallback(() => {
-    if (!account) return;
+  const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ clientX, clientY }) => {
+      clickCoordinatesRef.current = [clientX, clientY];
+    },
+    [clickCoordinatesRef],
+  );
 
-    history.push(`/@${account.acct}/${statusId}`);
-  }, [statusId, account, history]);
+  const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ clientX, clientY, target, button }) => {
+      const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
+      const [deltaX, deltaY] = [
+        Math.abs(clientX - startX),
+        Math.abs(clientY - startY),
+      ];
+
+      let element: HTMLDivElement | null = target as HTMLDivElement;
+
+      while (element) {
+        if (
+          element.localName === 'button' ||
+          element.localName === 'a' ||
+          element.localName === 'label'
+        ) {
+          return;
+        }
+
+        element = element.parentNode as HTMLDivElement | null;
+      }
+
+      if (deltaX + deltaY < 5 && button === 0 && account) {
+        history.push(`/@${account.acct}/${statusId}`);
+      }
+
+      clickCoordinatesRef.current = null;
+    },
+    [clickCoordinatesRef, statusId, account, history],
+  );
+
+  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ currentTarget }) => {
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      for (const emoji of emojis) {
+        const newSrc = emoji.getAttribute('data-original');
+        if (newSrc) emoji.src = newSrc;
+      }
+    },
+    [],
+  );
+
+  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ currentTarget }) => {
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      for (const emoji of emojis) {
+        const newSrc = emoji.getAttribute('data-static');
+        if (newSrc) emoji.src = newSrc;
+      }
+    },
+    [],
+  );
 
   if (!status) {
     return null;
@@ -51,7 +110,15 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   ).size;
 
   return (
-    <div className='notification-group__embedded-status'>
+    <div
+      className='notification-group__embedded-status'
+      role='button'
+      tabIndex={-1}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <div className='notification-group__embedded-status__account'>
         <Avatar account={account} size={16} />
         <DisplayName account={account} />
@@ -62,7 +129,6 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         content={contentHtml}
         language={language}
         mentions={mentions}
-        onClick={handleClick}
       />
 
       {(poll || mediaAttachmentsSize > 0) && (

app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status_content.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { useHistory } from 'react-router-dom';
 
@@ -34,76 +34,10 @@ export const EmbeddedStatusContent: React.FC<{
   content: string;
   mentions: List<Mention>;
   language: string;
-  onClick?: () => void;
   className?: string;
-}> = ({ content, mentions, language, onClick, className }) => {
-  const clickCoordinatesRef = useRef<[number, number] | null>();
+}> = ({ content, mentions, language, className }) => {
   const history = useHistory();
 
-  const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ clientX, clientY }) => {
-      clickCoordinatesRef.current = [clientX, clientY];
-    },
-    [clickCoordinatesRef],
-  );
-
-  const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ clientX, clientY, target, button }) => {
-      const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
-      const [deltaX, deltaY] = [
-        Math.abs(clientX - startX),
-        Math.abs(clientY - startY),
-      ];
-
-      let element: HTMLDivElement | null = target as HTMLDivElement;
-
-      while (element) {
-        if (
-          element.localName === 'button' ||
-          element.localName === 'a' ||
-          element.localName === 'label'
-        ) {
-          return;
-        }
-
-        element = element.parentNode as HTMLDivElement | null;
-      }
-
-      if (deltaX + deltaY < 5 && button === 0 && onClick) {
-        onClick();
-      }
-
-      clickCoordinatesRef.current = null;
-    },
-    [clickCoordinatesRef, onClick],
-  );
-
-  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ currentTarget }) => {
-      const emojis =
-        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
-
-      for (const emoji of emojis) {
-        const newSrc = emoji.getAttribute('data-original');
-        if (newSrc) emoji.src = newSrc;
-      }
-    },
-    [],
-  );
-
-  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ currentTarget }) => {
-      const emojis =
-        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
-
-      for (const emoji of emojis) {
-        const newSrc = emoji.getAttribute('data-static');
-        if (newSrc) emoji.src = newSrc;
-      }
-    },
-    [],
-  );
-
   const handleContentRef = useCallback(
     (node: HTMLDivElement | null) => {
       if (!node) {
@@ -150,16 +84,10 @@ export const EmbeddedStatusContent: React.FC<{
 
   return (
     <div
-      role='button'
-      tabIndex={0}
       className={className}
       ref={handleContentRef}
       lang={language}
       dangerouslySetInnerHTML={{ __html: content }}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     />
   );
 };

app/javascript/flavours/glitch/features/notifications_v2/components/notification_group.tsx

@@ -2,8 +2,10 @@ import { useMemo } from 'react';
 
 import { HotKeys } from 'react-hotkeys';
 
+import { navigateToProfile } from 'flavours/glitch/actions/accounts';
+import { mentionComposeById } from 'flavours/glitch/actions/compose';
 import type { NotificationGroup as NotificationGroupModel } from 'flavours/glitch/models/notification_group';
-import { useAppSelector } from 'flavours/glitch/store';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
 import { NotificationAdminReport } from './notification_admin_report';
 import { NotificationAdminSignUp } from './notification_admin_sign_up';
@@ -31,6 +33,13 @@ export const NotificationGroup: React.FC<{
     ),
   );
 
+  const dispatch = useAppDispatch();
+
+  const accountId =
+    notificationGroup?.type === 'gap'
+      ? undefined
+      : notificationGroup?.sampleAccountIds[0];
+
   const handlers = useMemo(
     () => ({
       moveUp: () => {
@@ -40,8 +49,16 @@ export const NotificationGroup: React.FC<{
       moveDown: () => {
         onMoveDown(notificationGroupId);
       },
+
+      openProfile: () => {
+        if (accountId) dispatch(navigateToProfile(accountId));
+      },
+
+      mention: () => {
+        if (accountId) dispatch(mentionComposeById(accountId));
+      },
     }),
-    [notificationGroupId, onMoveUp, onMoveDown],
+    [dispatch, notificationGroupId, accountId, onMoveUp, onMoveDown],
   );
 
   if (!notificationGroup || notificationGroup.type === 'gap') return null;

app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx

@@ -2,9 +2,14 @@ import { useMemo } from 'react';
 
 import classNames from 'classnames';
 
+import { HotKeys } from 'react-hotkeys';
+
+import { replyComposeById } from 'flavours/glitch/actions/compose';
+import { navigateToStatus } from 'flavours/glitch/actions/statuses';
 import type { IconProp } from 'flavours/glitch/components/icon';
 import { Icon } from 'flavours/glitch/components/icon';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
+import { useAppDispatch } from 'flavours/glitch/store';
 
 import { AvatarGroup } from './avatar_group';
 import { EmbeddedStatus } from './embedded_status';
@@ -39,6 +44,8 @@ export const NotificationGroupWithStatus: React.FC<{
   type,
   unread,
 }) => {
+  const dispatch = useAppDispatch();
+
   const label = useMemo(
     () =>
       labelRenderer({
@@ -53,39 +60,54 @@ export const NotificationGroupWithStatus: React.FC<{
     [labelRenderer, accountIds, count, labelSeeMoreHref],
   );
 
+  const handlers = useMemo(
+    () => ({
+      open: () => {
+        dispatch(navigateToStatus(statusId));
+      },
+
+      reply: () => {
+        dispatch(replyComposeById(statusId));
+      },
+    }),
+    [dispatch, statusId],
+  );
+
   return (
-    <div
-      role='button'
-      className={classNames(
-        `notification-group focusable notification-group--${type}`,
-        { 'notification-group--unread': unread },
-      )}
-      tabIndex={0}
-    >
-      <div className='notification-group__icon'>
-        <Icon icon={icon} id={iconId} />
-      </div>
-
-      <div className='notification-group__main'>
-        <div className='notification-group__main__header'>
-          <div className='notification-group__main__header__wrapper'>
-            <AvatarGroup accountIds={accountIds} />
-
-            {actions}
-          </div>
-
-          <div className='notification-group__main__header__label'>
-            {label}
-            {timestamp && <RelativeTimestamp timestamp={timestamp} />}
-          </div>
+    <HotKeys handlers={handlers}>
+      <div
+        role='button'
+        className={classNames(
+          `notification-group focusable notification-group--${type}`,
+          { 'notification-group--unread': unread },
+        )}
+        tabIndex={0}
+      >
+        <div className='notification-group__icon'>
+          <Icon icon={icon} id={iconId} />
         </div>
 
-        {statusId && (
-          <div className='notification-group__main__status'>
-            <EmbeddedStatus statusId={statusId} />
+        <div className='notification-group__main'>
+          <div className='notification-group__main__header'>
+            <div className='notification-group__main__header__wrapper'>
+              <AvatarGroup accountIds={accountIds} />
+
+              {actions}
+            </div>
+
+            <div className='notification-group__main__header__label'>
+              {label}
+              {timestamp && <RelativeTimestamp timestamp={timestamp} />}
+            </div>
           </div>
-        )}
+
+          {statusId && (
+            <div className='notification-group__main__status'>
+              <EmbeddedStatus statusId={statusId} />
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </HotKeys>
   );
 };

app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx

@@ -2,10 +2,21 @@ import { useMemo } from 'react';
 
 import classNames from 'classnames';
 
+import { HotKeys } from 'react-hotkeys';
+
+import { replyComposeById } from 'flavours/glitch/actions/compose';
+import {
+  toggleReblog,
+  toggleFavourite,
+} from 'flavours/glitch/actions/interactions';
+import {
+  navigateToStatus,
+  toggleStatusSpoilers,
+} from 'flavours/glitch/actions/statuses';
 import type { IconProp } from 'flavours/glitch/components/icon';
 import { Icon } from 'flavours/glitch/components/icon';
 import Status from 'flavours/glitch/containers/status_container';
-import { useAppSelector } from 'flavours/glitch/store';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
 import { NamesList } from './names_list';
 import type { LabelRenderer } from './notification_group_with_status';
@@ -29,6 +40,8 @@ export const NotificationWithStatus: React.FC<{
   type,
   unread,
 }) => {
+  const dispatch = useAppDispatch();
+
   const label = useMemo(
     () =>
       labelRenderer({
@@ -41,33 +54,62 @@ export const NotificationWithStatus: React.FC<{
     (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
   );
 
-  return (
-    <div
-      role='button'
-      className={classNames(
-        `notification-ungrouped focusable notification-ungrouped--${type}`,
-        {
-          'notification-ungrouped--unread': unread,
-          'notification-ungrouped--direct': isPrivateMention,
-        },
-      )}
-      tabIndex={0}
-    >
-      <div className='notification-ungrouped__header'>
-        <div className='notification-ungrouped__header__icon'>
-          <Icon icon={icon} id={iconId} />
-        </div>
-        {label}
-      </div>
+  const handlers = useMemo(
+    () => ({
+      open: () => {
+        dispatch(navigateToStatus(statusId));
+      },
 
-      <Status
-        // @ts-expect-error -- <Status> is not yet typed
-        id={statusId}
-        contextType='notifications'
-        withDismiss
-        skipPrepend
-        avatarSize={40}
-      />
-    </div>
+      reply: () => {
+        dispatch(replyComposeById(statusId));
+      },
+
+      boost: () => {
+        dispatch(toggleReblog(statusId));
+      },
+
+      favourite: () => {
+        dispatch(toggleFavourite(statusId));
+      },
+
+      toggleHidden: () => {
+        // TODO: glitch-soc is different and needs different handling of CWs
+        dispatch(toggleStatusSpoilers(statusId));
+      },
+    }),
+    [dispatch, statusId],
+  );
+
+  return (
+    <HotKeys handlers={handlers}>
+      <div
+        role='button'
+        className={classNames(
+          `notification-ungrouped focusable notification-ungrouped--${type}`,
+          {
+            'notification-ungrouped--unread': unread,
+            'notification-ungrouped--direct': isPrivateMention,
+          },
+        )}
+        tabIndex={0}
+      >
+        <div className='notification-ungrouped__header'>
+          <div className='notification-ungrouped__header__icon'>
+            <Icon icon={icon} id={iconId} />
+          </div>
+          {label}
+        </div>
+
+        <Status
+          // @ts-expect-error -- <Status> is not yet typed
+          id={statusId}
+          contextType='notifications'
+          withDismiss
+          skipPrepend
+          avatarSize={40}
+          unfocusable
+        />
+      </div>
+    </HotKeys>
   );
 };

app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx

@@ -15,11 +15,11 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { replyCompose } from 'flavours/glitch/actions/compose';
-import { reblog, favourite, unreblog, unfavourite } from 'flavours/glitch/actions/interactions';
+import { toggleReblog, toggleFavourite } from 'flavours/glitch/actions/interactions';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-import { me, boostModal } from 'flavours/glitch/initial_state';
+import { me } from 'flavours/glitch/initial_state';
 import { makeGetStatus } from 'flavours/glitch/selectors';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
@@ -31,8 +31,6 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
 });
 
@@ -73,19 +71,13 @@ class Footer extends ImmutablePureComponent {
   };
 
   handleReplyClick = () => {
-    const { dispatch, askReplyConfirmation, status, intl } = this.props;
+    const { dispatch, askReplyConfirmation, status, onClose } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
       if (askReplyConfirmation) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: this._performReply,
-          },
-        }));
+        onClose(true);
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         this._performReply();
       }
@@ -101,16 +93,12 @@ class Footer extends ImmutablePureComponent {
     }
   };
 
-  handleFavouriteClick = () => {
+  handleFavouriteClick = e => {
     const { dispatch, status } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
+      dispatch(toggleFavourite(status.get('id'), e && e.shiftKey));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',
@@ -123,23 +111,12 @@ class Footer extends ImmutablePureComponent {
     }
   };
 
-  _performReblog = (status, privacy) => {
-    const { dispatch } = this.props;
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  };
-
   handleReblogClick = e => {
     const { dispatch, status } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('reblogged')) {
-        dispatch(unreblog({ statusId: status.get('id') }));
-      } else if ((e && e.shiftKey) || !boostModal) {
-        this._performReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this._performReblog } }));
-      }
+      dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',

app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js

@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
@@ -10,10 +10,8 @@ import {
   directCompose,
 } from '../../../actions/compose';
 import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
+  toggleReblog,
+  toggleFavourite,
   pin,
   unpin,
 } from '../../../actions/interactions';
@@ -25,19 +23,10 @@ import {
   unmuteStatus,
   deleteStatus,
 } from '../../../actions/statuses';
-import { boostModal, deleteModal } from '../../../initial_state';
+import { deleteModal } from '../../../initial_state';
 import { makeGetStatus } from '../../../selectors';
 import DetailedStatus from '../components/detailed_status';
 
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-});
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
 
@@ -50,48 +39,25 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onReply (status) {
     dispatch((_, getState) => {
       let state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         dispatch(replyCompose(status));
       }
     });
   },
 
-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  },
-
   onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
   },
 
-  onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+  onFavourite (status, e) {
+    dispatch(toggleFavourite(status.get('id'), e.shiftKey));
   },
 
   onPin (status) {
@@ -116,14 +82,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
     }
   },
 

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

@@ -32,18 +32,15 @@ import {
   directCompose,
 } from '../../actions/compose';
 import {
-  favourite,
-  unfavourite,
+  toggleFavourite,
   bookmark,
   unbookmark,
-  reblog,
-  unreblog,
+  toggleReblog,
   pin,
   unpin,
   addReaction,
   removeReaction,
 } from '../../actions/interactions';
-import { changeLocalSetting } from '../../actions/local_settings';
 import { openModal } from '../../actions/modal';
 import { initMuteModal } from '../../actions/mutes';
 import { initReport } from '../../actions/reports';
@@ -61,7 +58,7 @@ import {
 import ColumnHeader from '../../components/column_header';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import StatusContainer from '../../containers/status_container';
-import { boostModal, favouriteModal, deleteModal } from '../../initial_state';
+import { deleteModal } from '../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
 import Column from '../ui/components/column';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
@@ -71,16 +68,10 @@ import DetailedStatus from './components/detailed_status';
 
 
 const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
   revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
   hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
   statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' },
   detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   tootHeading: { id: 'account.posts_with_replies', defaultMessage: 'Posts and replies' },
 });
 
@@ -270,30 +261,13 @@ class Status extends ImmutablePureComponent {
     this.setState({ showMedia: !this.state.showMedia });
   };
 
-  handleModalFavourite = (status) => {
-    this.props.dispatch(favourite(status));
-  };
 
   handleFavouriteClick = (status, e) => {
     const { dispatch } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        if ((e && e.shiftKey) || !favouriteModal) {
-          this.handleModalFavourite(status);
-        } else {
-          dispatch(openModal({
-            modalType: 'FAVOURITE',
-            modalProps: {
-              status,
-              onFavourite: this.handleModalFavourite,
-            },
-          }));
-        }
-      }
+      dispatch(toggleFavourite(status.get('id'), e && e.shiftKey));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',
@@ -328,20 +302,12 @@ class Status extends ImmutablePureComponent {
   };
 
   handleReplyClick = (status) => {
-    const { askReplyConfirmation, dispatch, intl } = this.props;
+    const { askReplyConfirmation, dispatch } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
       if (askReplyConfirmation) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
-            onConfirm: () => dispatch(replyCompose(status)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         dispatch(replyCompose(status));
       }
@@ -357,28 +323,12 @@ class Status extends ImmutablePureComponent {
     }
   };
 
-  handleModalReblog = (status, privacy) => {
-    const { dispatch } = this.props;
-
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-    }
-  };
-
   handleReblogClick = (status, e) => {
-    const { settings, dispatch } = this.props;
+    const { dispatch } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog, missingMediaDescription: true } }));
-      } else if ((e && e.shiftKey) || !boostModal) {
-        this.handleModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog } }));
-      }
+      dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',
@@ -400,24 +350,23 @@ class Status extends ImmutablePureComponent {
   };
 
   handleDeleteClick = (status, withRedraft = false) => {
-    const { dispatch, intl } = this.props;
+    const { dispatch } = this.props;
 
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
     }
   };
 
   handleEditClick = (status) => {
-    this.props.dispatch(editStatus(status.get('id')));
+    const { dispatch, askReplyConfirmation } = this.props;
+
+    if (askReplyConfirmation) {
+      dispatch(openModal({ modalType: 'CONFIRM_EDIT_STATUS', modalProps: { statusId: status.get('id') } }));
+    } else {
+      dispatch(editStatus(status.get('id')));
+    }
   };
 
   handleDirectClick = (account) => {

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

@@ -1,83 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, FormattedMessage } from 'react-intl';
-
-import { Button } from '../../../components/button';
-
-class ConfirmationModal extends PureComponent {
-
-  static propTypes = {
-    message: PropTypes.node.isRequired,
-    confirm: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    secondary: PropTypes.string,
-    onSecondary: PropTypes.func,
-    closeWhenConfirm: PropTypes.bool,
-    onDoNotAsk: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-  };
-
-  static defaultProps = {
-    closeWhenConfirm: true,
-  };
-
-  handleClick = () => {
-    if (this.props.closeWhenConfirm) {
-      this.props.onClose();
-    }
-    this.props.onConfirm();
-    if (this.props.onDoNotAsk && this.doNotAskCheckbox.checked) {
-      this.props.onDoNotAsk();
-    }
-  };
-
-  handleSecondary = () => {
-    this.props.onClose();
-    this.props.onSecondary();
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  setDoNotAskRef = (c) => {
-    this.doNotAskCheckbox = c;
-  };
-
-  render () {
-    const { message, confirm, secondary, onDoNotAsk } = this.props;
-
-    return (
-      <div className='modal-root__modal confirmation-modal'>
-        <div className='confirmation-modal__container'>
-          {message}
-        </div>
-
-        <div>
-          { onDoNotAsk && (
-            <div className='confirmation-modal__do_not_ask_again'>
-              <input type='checkbox' id='confirmation-modal__do_not_ask_again-checkbox' ref={this.setDoNotAskRef} />
-              <label htmlFor='confirmation-modal__do_not_ask_again-checkbox'>
-                <FormattedMessage id='confirmation_modal.do_not_ask_again' defaultMessage='Do not ask for confirmation again' />
-              </label>
-            </div>
-          )}
-          <div className='confirmation-modal__action-bar'>
-            <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
-              <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-            </Button>
-            {secondary !== undefined && (
-              <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
-            )}
-            <Button text={confirm} onClick={this.handleClick} autoFocus />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(ConfirmationModal);

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/clear_notifications.tsx

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { clearNotifications } from 'flavours/glitch/actions/notification_groups';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  clearTitle: {
+    id: 'notifications.clear_title',
+    defaultMessage: 'Clear notifications?',
+  },
+  clearMessage: {
+    id: 'notifications.clear_confirmation',
+    defaultMessage:
+      'Are you sure you want to permanently clear all your notifications?',
+  },
+  clearConfirm: {
+    id: 'notifications.clear',
+    defaultMessage: 'Clear notifications',
+  },
+});
+
+export const ConfirmClearNotificationsModal: React.FC<
+  BaseConfirmationModalProps
+> = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    void dispatch(clearNotifications());
+  }, [dispatch]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.clearTitle)}
+      message={intl.formatMessage(messages.clearMessage)}
+      confirm={intl.formatMessage(messages.clearConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -0,0 +1,87 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+import { Button } from 'flavours/glitch/components/button';
+
+export interface BaseConfirmationModalProps {
+  onClose: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- keep the message around while we find a place to show it
+const messages = defineMessages({
+  doNotAskAgain: {
+    id: 'confirmation_modal.do_not_ask_again',
+    defaultMessage: 'Do not ask for confirmation again',
+  },
+});
+
+export const ConfirmationModal: React.FC<
+  {
+    title: React.ReactNode;
+    message: React.ReactNode;
+    confirm: React.ReactNode;
+    secondary?: React.ReactNode;
+    onSecondary?: () => void;
+    onConfirm: () => void;
+    closeWhenConfirm?: boolean;
+  } & BaseConfirmationModalProps
+> = ({
+  title,
+  message,
+  confirm,
+  onClose,
+  onConfirm,
+  secondary,
+  onSecondary,
+  closeWhenConfirm = true,
+}) => {
+  const handleClick = useCallback(() => {
+    if (closeWhenConfirm) {
+      onClose();
+    }
+
+    onConfirm();
+  }, [onClose, onConfirm, closeWhenConfirm]);
+
+  const handleSecondary = useCallback(() => {
+    onClose();
+    onSecondary?.();
+  }, [onClose, onSecondary]);
+
+  const handleCancel = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__confirmation'>
+          <h1>{title}</h1>
+          <p>{message}</p>
+        </div>
+      </div>
+
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          {secondary && (
+            <>
+              <Button onClick={handleSecondary}>{secondary}</Button>
+
+              <div className='spacer' />
+            </>
+          )}
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage
+              id='confirmation_modal.cancel'
+              defaultMessage='Cancel'
+            />
+          </button>
+
+          <Button onClick={handleClick}>{confirm}</Button>
+        </div>
+      </div>
+    </div>
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/delete_list.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useHistory } from 'react-router';
+
+import { removeColumn } from 'flavours/glitch/actions/columns';
+import { deleteList } from 'flavours/glitch/actions/lists';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  deleteListTitle: {
+    id: 'confirmations.delete_list.title',
+    defaultMessage: 'Delete list?',
+  },
+  deleteListMessage: {
+    id: 'confirmations.delete_list.message',
+    defaultMessage: 'Are you sure you want to permanently delete this list?',
+  },
+  deleteListConfirm: {
+    id: 'confirmations.delete_list.confirm',
+    defaultMessage: 'Delete',
+  },
+});
+
+export const ConfirmDeleteListModal: React.FC<
+  {
+    listId: string;
+    columnId: string;
+  } & BaseConfirmationModalProps
+> = ({ listId, columnId, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const onConfirm = useCallback(() => {
+    dispatch(deleteList(listId));
+
+    if (columnId) {
+      dispatch(removeColumn(columnId));
+    } else {
+      history.push('/lists');
+    }
+  }, [dispatch, history, columnId, listId]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.deleteListTitle)}
+      message={intl.formatMessage(messages.deleteListMessage)}
+      confirm={intl.formatMessage(messages.deleteListConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/delete_status.tsx

@@ -0,0 +1,67 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { deleteStatus } from 'flavours/glitch/actions/statuses';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  deleteAndRedraftTitle: {
+    id: 'confirmations.redraft.title',
+    defaultMessage: 'Delete & redraft post?',
+  },
+  deleteAndRedraftMessage: {
+    id: 'confirmations.redraft.message',
+    defaultMessage:
+      'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.',
+  },
+  deleteAndRedraftConfirm: {
+    id: 'confirmations.redraft.confirm',
+    defaultMessage: 'Delete & redraft',
+  },
+  deleteTitle: {
+    id: 'confirmations.delete.title',
+    defaultMessage: 'Delete post?',
+  },
+  deleteMessage: {
+    id: 'confirmations.delete.message',
+    defaultMessage: 'Are you sure you want to delete this status?',
+  },
+  deleteConfirm: {
+    id: 'confirmations.delete.confirm',
+    defaultMessage: 'Delete',
+  },
+});
+
+export const ConfirmDeleteStatusModal: React.FC<
+  {
+    statusId: string;
+    withRedraft: boolean;
+  } & BaseConfirmationModalProps
+> = ({ statusId, withRedraft, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    dispatch(deleteStatus(statusId, withRedraft));
+  }, [dispatch, statusId, withRedraft]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(
+        withRedraft ? messages.deleteAndRedraftTitle : messages.deleteTitle,
+      )}
+      message={intl.formatMessage(
+        withRedraft ? messages.deleteAndRedraftMessage : messages.deleteMessage,
+      )}
+      confirm={intl.formatMessage(
+        withRedraft ? messages.deleteAndRedraftConfirm : messages.deleteConfirm,
+      )}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { editStatus } from 'flavours/glitch/actions/statuses';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  editTitle: {
+    id: 'confirmations.edit.title',
+    defaultMessage: 'Overwrite post?',
+  },
+  editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
+  editMessage: {
+    id: 'confirmations.edit.message',
+    defaultMessage:
+      'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?',
+  },
+});
+
+export const ConfirmEditStatusModal: React.FC<
+  {
+    statusId: string;
+  } & BaseConfirmationModalProps
+> = ({ statusId, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    dispatch(editStatus(statusId));
+  }, [dispatch, statusId]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.editTitle)}
+      message={intl.formatMessage(messages.editMessage)}
+      confirm={intl.formatMessage(messages.editConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts

@@ -0,0 +1,8 @@
+export { ConfirmationModal } from './confirmation_modal';
+export { ConfirmDeleteStatusModal } from './delete_status';
+export { ConfirmDeleteListModal } from './delete_list';
+export { ConfirmReplyModal } from './reply';
+export { ConfirmEditStatusModal } from './edit_status';
+export { ConfirmUnfollowModal } from './unfollow';
+export { ConfirmClearNotificationsModal } from './clear_notifications';
+export { ConfirmLogOutModal } from './log_out';

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/log_out.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { logOut } from 'flavours/glitch/utils/log_out';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  logoutTitle: { id: 'confirmations.logout.title', defaultMessage: 'Log out?' },
+  logoutMessage: {
+    id: 'confirmations.logout.message',
+    defaultMessage: 'Are you sure you want to log out?',
+  },
+  logoutConfirm: {
+    id: 'confirmations.logout.confirm',
+    defaultMessage: 'Log out',
+  },
+});
+
+export const ConfirmLogOutModal: React.FC<BaseConfirmationModalProps> = ({
+  onClose,
+}) => {
+  const intl = useIntl();
+
+  const onConfirm = useCallback(() => {
+    logOut();
+  }, []);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.logoutTitle)}
+      message={intl.formatMessage(messages.logoutMessage)}
+      confirm={intl.formatMessage(messages.logoutConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { replyCompose } from 'flavours/glitch/actions/compose';
+import type { Status } from 'flavours/glitch/models/status';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  replyTitle: {
+    id: 'confirmations.reply.title',
+    defaultMessage: 'Overwrite post?',
+  },
+  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+  replyMessage: {
+    id: 'confirmations.reply.message',
+    defaultMessage:
+      'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?',
+  },
+});
+
+export const ConfirmReplyModal: React.FC<
+  {
+    status: Status;
+  } & BaseConfirmationModalProps
+> = ({ status, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    dispatch(replyCompose(status));
+  }, [dispatch, status]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.replyTitle)}
+      message={intl.formatMessage(messages.replyMessage)}
+      confirm={intl.formatMessage(messages.replyConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/unfollow.tsx

@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { unfollowAccount } from 'flavours/glitch/actions/accounts';
+import type { Account } from 'flavours/glitch/models/account';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  unfollowTitle: {
+    id: 'confirmations.unfollow.title',
+    defaultMessage: 'Unfollow user?',
+  },
+  unfollowConfirm: {
+    id: 'confirmations.unfollow.confirm',
+    defaultMessage: 'Unfollow',
+  },
+});
+
+export const ConfirmUnfollowModal: React.FC<
+  {
+    account: Account;
+  } & BaseConfirmationModalProps
+> = ({ account, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    dispatch(unfollowAccount(account.id));
+  }, [dispatch, account.id]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.unfollowTitle)}
+      message={
+        <FormattedMessage
+          id='confirmations.unfollow.message'
+          defaultMessage='Are you sure you want to unfollow {name}?'
+          values={{ name: <strong>@{account.acct}</strong> }}
+        />
+      }
+      confirm={intl.formatMessage(messages.unfollowConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
@@ -9,29 +9,15 @@ import { connect } from 'react-redux';
 
 import { openModal } from 'flavours/glitch/actions/modal';
 import { disabledAccountId, movedToAccountId, domain } from 'flavours/glitch/initial_state';
-import { logOut } from 'flavours/glitch/utils/log_out';
-
-const messages = defineMessages({
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
-});
 
 const mapStateToProps = (state) => ({
   disabledAcct: state.getIn(['accounts', disabledAccountId, 'acct']),
   movedToAcct: movedToAccountId ? state.getIn(['accounts', movedToAccountId, 'acct']) : undefined,
 });
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
   onLogout () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
   },
 });
 

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
@@ -11,24 +11,11 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
 import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'flavours/glitch/initial_state';
 import { PERMISSION_INVITE_USERS } from 'flavours/glitch/permissions';
-import { logOut } from 'flavours/glitch/utils/log_out';
 
-const messages = defineMessages({
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
-});
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
   onLogout () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
+
   },
 });
 

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

@@ -28,7 +28,16 @@ import ActionsModal from './actions_modal';
 import AudioModal from './audio_modal';
 import { BoostModal } from './boost_modal';
 import BundleModalError from './bundle_modal_error';
-import ConfirmationModal from './confirmation_modal';
+import {
+  ConfirmationModal,
+  ConfirmDeleteStatusModal,
+  ConfirmDeleteListModal,
+  ConfirmReplyModal,
+  ConfirmEditStatusModal,
+  ConfirmUnfollowModal,
+  ConfirmClearNotificationsModal,
+  ConfirmLogOutModal,
+} from './confirmation_modals';
 import DeprecatedSettingsModal from './deprecated_settings_modal';
 import DoodleModal from './doodle_modal';
 import FavouriteModal from './favourite_modal';
@@ -47,6 +56,13 @@ export const MODAL_COMPONENTS = {
   'FAVOURITE': () => Promise.resolve({ default: FavouriteModal }),
   'DOODLE': () => Promise.resolve({ default: DoodleModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
+  'CONFIRM_DELETE_STATUS': () => Promise.resolve({ default: ConfirmDeleteStatusModal }),
+  'CONFIRM_DELETE_LIST': () => Promise.resolve({ default: ConfirmDeleteListModal }),
+  'CONFIRM_REPLY': () => Promise.resolve({ default: ConfirmReplyModal }),
+  'CONFIRM_EDIT_STATUS': () => Promise.resolve({ default: ConfirmEditStatusModal }),
+  'CONFIRM_UNFOLLOW': () => Promise.resolve({ default: ConfirmUnfollowModal }),
+  'CONFIRM_CLEAR_NOTIFICATIONS': () => Promise.resolve({ default: ConfirmClearNotificationsModal }),
+  'CONFIRM_LOG_OUT': () => Promise.resolve({ default: ConfirmLogOutModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
   'DOMAIN_BLOCK': DomainBlockModal,

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

@@ -34,10 +34,6 @@
   "confirmations.missing_media_description.confirm": "Send anyway",
   "confirmations.missing_media_description.edit": "Edit media",
   "confirmations.missing_media_description.message": "At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.",
-  "confirmations.unfilter.author": "Author",
-  "confirmations.unfilter.confirm": "Show",
-  "confirmations.unfilter.edit_filter": "Edit filter",
-  "confirmations.unfilter.filters": "Matching {count, plural, one {filter} other {filters}}",
   "direct.group_by_conversations": "Group by conversation",
   "endorsed_accounts_editor.endorsed_accounts": "Featured accounts",
   "favourite_modal.combo": "You can press {combo} to skip this next time",

app/javascript/flavours/glitch/reducers/notification_policy.ts

@@ -2,17 +2,25 @@ import { createReducer, isAnyOf } from '@reduxjs/toolkit';
 
 import {
   fetchNotificationPolicy,
+  decreasePendingNotificationsCount,
   updateNotificationsPolicy,
 } from 'flavours/glitch/actions/notification_policies';
 import type { NotificationPolicy } from 'flavours/glitch/models/notification_policy';
 
 export const notificationPolicyReducer =
   createReducer<NotificationPolicy | null>(null, (builder) => {
-    builder.addMatcher(
-      isAnyOf(
-        fetchNotificationPolicy.fulfilled,
-        updateNotificationsPolicy.fulfilled,
-      ),
-      (_state, action) => action.payload,
-    );
+    builder
+      .addCase(decreasePendingNotificationsCount, (state, action) => {
+        if (state) {
+          state.summary.pending_notifications_count -= action.payload;
+          state.summary.pending_requests_count -= 1;
+        }
+      })
+      .addMatcher(
+        isAnyOf(
+          fetchNotificationPolicy.fulfilled,
+          updateNotificationsPolicy.fulfilled,
+        ),
+        (_state, action) => action.payload,
+      );
   });

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

@@ -10,7 +10,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
   }
@@ -18,7 +18,9 @@
   &__img {
     height: 130px;
     position: relative;
-    background: darken($ui-base-color, 12%);
+    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-bottom: none;
 
     img {
       display: block;
@@ -39,7 +41,9 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: lighten($ui-base-color, 4%);
+    background: var(--background-color);
+    border: 1px solid var(--background-border-color);
+    border-top: none;
 
     .avatar {
       flex: 0 0 auto;
@@ -355,6 +359,10 @@
       color: $primary-text-color;
       font-weight: 700;
     }
+
+    .warning-hint {
+      font-weight: normal !important;
+    }
   }
 
   &__body {

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

@@ -1,7 +1,7 @@
 @use 'sass:math';
 
-$no-columns-breakpoint: 600px;
-$sidebar-width: 240px;
+$no-columns-breakpoint: 890px;
+$sidebar-width: 300px;
 $content-width: 840px;
 
 .admin-wrapper {
@@ -19,7 +19,7 @@ $content-width: 840px;
     &__inner {
       display: flex;
       justify-content: flex-end;
-      background: $ui-base-color;
+      background: var(--background-color);
       height: 100%;
     }
   }
@@ -31,7 +31,7 @@ $content-width: 840px;
 
     &__toggle {
       display: none;
-      background: darken($ui-base-color, 4%);
+      background: var(--background-color);
       border-bottom: 1px solid lighten($ui-base-color, 4%);
       align-items: center;
 
@@ -96,7 +96,6 @@ $content-width: 840px;
 
     ul {
       list-style: none;
-      border-radius: 4px 0 0 4px;
       overflow: hidden;
       margin-bottom: 20px;
 
@@ -105,13 +104,13 @@ $content-width: 840px;
       }
 
       a {
+        font-size: 14px;
         display: block;
         padding: 15px;
         color: $darker-text-color;
         text-decoration: none;
         transition: all 200ms linear;
         transition-property: color, background-color;
-        border-radius: 4px 0 0 4px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -122,19 +121,13 @@ $content-width: 840px;
 
         &:hover {
           color: $primary-text-color;
-          background-color: darken($ui-base-color, 5%);
           transition: all 100ms linear;
           transition-property: color, background-color;
         }
-
-        &.selected {
-          border-radius: 4px 0 0;
-        }
       }
 
       ul {
-        background: darken($ui-base-color, 4%);
-        border-radius: 0 0 0 4px;
+        background: var(--background-color);
         margin: 0;
 
         a {
@@ -149,16 +142,10 @@ $content-width: 840px;
       }
 
       .simple-navigation-active-leaf a {
-        color: $primary-text-color;
-        background-color: $ui-highlight-color;
+        color: $highlight-text-color;
         border-bottom: 0;
-        border-radius: 0;
       }
     }
-
-    & > ul > .simple-navigation-active-leaf a {
-      border-radius: 4px 0 0 4px;
-    }
   }
 
   .content-wrapper {
@@ -292,7 +279,7 @@ $content-width: 840px;
       color: $darker-text-color;
       padding-bottom: 8px;
       margin-bottom: 8px;
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
     }
 
     h6 {
@@ -365,7 +352,7 @@ $content-width: 840px;
       width: 100%;
       height: 0;
       border: 0;
-      border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
+      border-bottom: 1px solid var(--background-border-color);
       margin: 20px 0;
 
       &.spacer {
@@ -403,14 +390,14 @@ $content-width: 840px;
           inset-inline-start: 0;
           bottom: 0;
           overflow-y: auto;
-          background: $ui-base-color;
+          background: var(--background-color);
         }
       }
 
       ul a,
       ul ul a {
+        font-size: 16px;
         border-radius: 0;
-        border-bottom: 1px solid lighten($ui-base-color, 4%);
         transition: none;
 
         &:hover {
@@ -697,8 +684,10 @@ body,
   line-height: 20px;
   padding: 15px;
   padding-inline-start: 15px * 2 + 40px;
-  background: $ui-base-color;
-  border-bottom: 1px solid darken($ui-base-color, 8%);
+  background: var(--background-color);
+  border-right: 1px solid var(--background-border-color);
+  border-left: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
   position: relative;
   text-decoration: none;
   color: $darker-text-color;
@@ -707,18 +696,13 @@ body,
   &:first-child {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
+    border-top: 1px solid var(--background-border-color);
   }
 
   &:last-child {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
-    border-bottom: 0;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: lighten($ui-base-color, 4%);
+    border-bottom: 1px solid var(--background-border-color);
   }
 
   &__avatar {
@@ -758,6 +742,47 @@ body,
   }
 }
 
+.strike-entry {
+  display: block;
+  line-height: 20px;
+  padding: 15px;
+  padding-inline-start: 15px * 2 + 40px;
+  background: var(--background-color);
+  border: 1px solid var(--background-border-color);
+  border-radius: 4px;
+  position: relative;
+  text-decoration: none;
+  color: $darker-text-color;
+  font-size: 14px;
+  margin-bottom: 15px;
+
+  &__avatar {
+    position: absolute;
+    inset-inline-start: 15px;
+    top: 15px;
+
+    .avatar {
+      border-radius: 4px;
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__title {
+    word-wrap: break-word;
+  }
+
+  &__timestamp {
+    color: $dark-text-color;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: $ui-base-color;
+  }
+}
+
 a.name-tag,
 .name-tag,
 a.inline-name-tag,
@@ -765,6 +790,10 @@ a.inline-name-tag,
   text-decoration: none;
   color: $secondary-text-color;
 
+  &:hover {
+    color: $highlight-text-color;
+  }
+
   .username {
     font-weight: 500;
   }
@@ -844,7 +873,8 @@ a.name-tag,
 }
 
 .report-card {
-  background: $ui-base-color;
+  background: var(--background-color);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
   margin-bottom: 20px;
 
@@ -856,7 +886,6 @@ a.name-tag,
 
     .account {
       padding: 0;
-      border: 0;
 
       &__avatar-wrapper {
         margin-inline-start: 0;
@@ -877,7 +906,7 @@ a.name-tag,
         &:focus,
         &:hover,
         &:active {
-          color: lighten($darker-text-color, 8%);
+          color: $highlight-text-color;
         }
       }
 
@@ -891,11 +920,7 @@ a.name-tag,
     &__item {
       display: flex;
       justify-content: flex-start;
-      border-top: 1px solid darken($ui-base-color, 4%);
-
-      &:hover {
-        background: lighten($ui-base-color, 2%);
-      }
+      border-top: 1px solid var(--background-border-color);
 
       &__reported-by,
       &__assigned {
@@ -918,7 +943,6 @@ a.name-tag,
         max-width: calc(100% - 300px);
 
         &__icon {
-          color: $dark-text-color;
           margin-inline-end: 4px;
           font-weight: 500;
         }
@@ -931,6 +955,10 @@ a.name-tag,
         padding: 15px;
         text-decoration: none;
         color: $darker-text-color;
+
+        &:hover {
+          color: $highlight-text-color;
+        }
       }
     }
   }
@@ -966,14 +994,15 @@ a.name-tag,
 
   .account__header__fields,
   .account__header__content {
-    background: lighten($ui-base-color, 8%);
+    background: var(--background-color);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     height: 100%;
   }
 
   .account__header__fields {
     margin: 0;
-    border: 0;
+    border: 1px solid var(--background-border-color);
 
     a {
       color: $highlight-text-color;
@@ -1002,8 +1031,8 @@ a.name-tag,
 .applications-list__item,
 .filters-list__item {
   padding: 15px 0;
-  background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 4%);
+  background: var(--background-color);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
   margin-top: 15px;
 }
@@ -1014,13 +1043,13 @@ a.name-tag,
 
 .announcements-list,
 .filters-list {
-  border: 1px solid lighten($ui-base-color, 4%);
+  border: 1px solid var(--background-border-color);
   border-radius: 4px;
+  border-bottom: none;
 
   &__item {
     padding: 15px 0;
-    background: $ui-base-color;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid var(--background-border-color);
 
     &__title {
       padding: 0 15px;
@@ -1032,6 +1061,10 @@ a.name-tag,
       text-decoration: none;
       margin-bottom: 10px;
 
+      &:hover {
+        color: $highlight-text-color;
+      }
+
       .account-role {
         vertical-align: middle;
       }
@@ -1070,10 +1103,6 @@ a.name-tag,
     &__permissions {
       margin-top: 10px;
     }
-
-    &:last-child {
-      border-bottom: 0;
-    }
   }
 }
 
@@ -1123,7 +1152,7 @@ a.name-tag,
 
   &__table {
     &__number {
-      color: $secondary-text-color;
+      color: var(--background-color);
       padding: 10px;
     }
 
@@ -1150,7 +1179,7 @@ a.name-tag,
 
     &__box {
       box-sizing: border-box;
-      background: $ui-highlight-color;
+      background: var(--background-color);
       padding: 10px;
       font-weight: 500;
       color: $primary-text-color;
@@ -1172,8 +1201,9 @@ a.name-tag,
 .sparkline {
   display: block;
   text-decoration: none;
-  background: lighten($ui-base-color, 4%);
+  background: var(--background-color);
   border-radius: 4px;
+  border: 1px solid var(--background-border-color);
   padding: 0;
   position: relative;
   padding-bottom: 55px + 20px;
@@ -1245,12 +1275,12 @@ a.sparkline {
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 6%);
+    background: $ui-base-color;
   }
 }
 
 .skeleton {
-  background-color: lighten($ui-base-color, 8%);
+  background-color: var(--background-color);
   background-image: linear-gradient(
     90deg,
     lighten($ui-base-color, 8%),
@@ -1330,17 +1360,13 @@ a.sparkline {
 
 .report-reason-selector {
   border-radius: 4px;
-  background: $ui-base-color;
+  background: var(--background-color);
   margin-bottom: 20px;
 
   &__category {
     cursor: pointer;
     border-bottom: 1px solid darken($ui-base-color, 8%);
 
-    &:last-child {
-      border-bottom: 0;
-    }
-
     &__label {
       padding: 15px;
       display: flex;
@@ -1369,7 +1395,7 @@ a.sparkline {
 
   &__details {
     &__item {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
       padding: 15px 0;
 
       &:last-child {
@@ -1400,7 +1426,7 @@ a.sparkline {
 
 .account-card {
   border-radius: 4px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   position: relative;
 
   &__warning-badge {
@@ -1488,7 +1514,6 @@ a.sparkline {
       position: absolute;
       bottom: 0;
       inset-inline-end: 15px;
-      background: linear-gradient(to left, $ui-base-color, transparent);
       pointer-events: none;
     }
 
@@ -1564,11 +1589,11 @@ a.sparkline {
   margin-bottom: 20px;
 
   &__item {
-    background: $ui-base-color;
+    background: var(--background-color);
     position: relative;
     padding: 15px;
     padding-inline-start: 15px * 2 + 40px;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
 
     &:first-child {
       border-top-left-radius: 4px;
@@ -1578,11 +1603,6 @@ a.sparkline {
     &:last-child {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
-      border-bottom: 0;
-    }
-
-    &:hover {
-      background-color: lighten($ui-base-color, 4%);
     }
 
     &__avatar {
@@ -1660,13 +1680,10 @@ a.sparkline {
 }
 
 .report-actions {
-  border: 1px solid darken($ui-base-color, 8%);
-
   &__item {
     display: flex;
     align-items: center;
     line-height: 18px;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
 
     &:last-child {
       border-bottom: 0;
@@ -1729,8 +1746,6 @@ a.sparkline {
 
 .strike-card {
   padding: 15px;
-  border-radius: 4px;
-  background: $ui-base-color;
   font-size: 15px;
   line-height: 20px;
   word-wrap: break-word;
@@ -1738,6 +1753,8 @@ a.sparkline {
   color: $primary-text-color;
   box-sizing: border-box;
   min-height: 100%;
+  border: 1px solid var(--background-border-color);
+  border-radius: 4px;
 
   a {
     color: $highlight-text-color;
@@ -1778,15 +1795,14 @@ a.sparkline {
 
   &__statuses-list {
     border-radius: 4px;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     font-size: 13px;
     line-height: 18px;
     overflow: hidden;
 
     &__item {
       padding: 16px;
-      background: lighten($ui-base-color, 2%);
-      border-bottom: 1px solid darken($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
 
       &:last-child {
         border-bottom: 0;

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

@@ -122,7 +122,7 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
+    background: var(--background-color);
     padding: 0;
   }
 

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

@@ -521,7 +521,7 @@ body > [data-popper-placement] {
     gap: 16px;
     flex: 0 1 auto;
     border-radius: 4px;
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     transition: border-color 300ms linear;
     min-height: 0;
     position: relative;
@@ -587,7 +587,7 @@ body > [data-popper-placement] {
 
     .autosuggest-input {
       flex: 1 1 auto;
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid var(--background-border-color);
     }
   }
 
@@ -1505,7 +1505,7 @@ body > [data-popper-placement] {
   }
 
   &--first-in-thread {
-    border-top: 1px solid lighten($ui-base-color, 8%);
+    border-top: 1px solid var(--background-border-color);
   }
 
   &__line {
@@ -1989,7 +1989,6 @@ body > [data-popper-placement] {
 
 .account {
   padding: 10px; // glitch: reduced padding
-  border-bottom: 1px solid var(--background-border-color);
 
   .account__display-name {
     flex: 1 1 auto;
@@ -3522,7 +3521,7 @@ $ui-header-logo-wordmark-width: 99px;
 .copy-paste-text {
   background: lighten($ui-base-color, 4%);
   border-radius: 8px;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   padding: 16px;
   color: $primary-text-color;
   font-size: 15px;
@@ -5097,7 +5096,7 @@ a.status-card {
 
   section {
     padding: 16px;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid var(--background-border-color);
 
     &:last-child {
       border-bottom: 0;
@@ -5801,7 +5800,7 @@ a.status-card {
       input {
         padding: 8px 12px;
         background: $ui-base-color;
-        border: 1px solid lighten($ui-base-color, 8%);
+        border: 1px solid var(--background-border-color);
         color: $darker-text-color;
 
         @media screen and (width <= 600px) {
@@ -5887,7 +5886,7 @@ a.status-card {
     margin-top: -2px;
     width: 100%;
     background: $ui-base-color;
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-radius: 0 0 4px 4px;
     box-shadow: var(--dropdown-shadow);
     z-index: 99;
@@ -6541,6 +6540,25 @@ a.status-card {
     }
   }
 
+  &__confirmation {
+    font-size: 14px;
+    line-height: 20px;
+    color: $darker-text-color;
+
+    h1 {
+      font-size: 16px;
+      line-height: 24px;
+      color: $primary-text-color;
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+
+    strong {
+      font-weight: 700;
+      color: $primary-text-color;
+    }
+  }
+
   &__bullet-points {
     display: flex;
     flex-direction: column;
@@ -6627,11 +6645,8 @@ a.status-card {
 
 .doodle-modal,
 .boost-modal,
-.confirmation-modal,
 .report-modal,
 .actions-modal,
-.mute-modal,
-.block-modal,
 .compare-history-modal {
   background: lighten($ui-secondary-color, 8%);
   color: $inverted-text-color;
@@ -6666,10 +6681,7 @@ a.status-card {
 }
 
 .doodle-modal__action-bar,
-.boost-modal__action-bar,
-.confirmation-modal__action-bar,
-.mute-modal__action-bar,
-.block-modal__action-bar {
+.boost-modal__action-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -6692,16 +6704,6 @@ a.status-card {
   }
 }
 
-.mute-modal,
-.block-modal {
-  line-height: 24px;
-}
-
-.mute-modal .react-toggle,
-.block-modal .react-toggle {
-  vertical-align: middle;
-}
-
 .report-modal {
   width: 90vw;
   max-width: 700px;
@@ -7096,31 +7098,7 @@ a.status-card {
   }
 }
 
-.confirmation-modal__action-bar,
-.mute-modal__action-bar,
-.block-modal__action-bar {
-  .confirmation-modal__secondary-button {
-    flex-shrink: 1;
-  }
-}
-
-.confirmation-modal__secondary-button,
-.confirmation-modal__cancel-button,
-.mute-modal__cancel-button,
-.block-modal__cancel-button {
-  background-color: transparent;
-  color: $lighter-text-color;
-  font-size: 14px;
-  font-weight: 500;
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: darken($lighter-text-color, 4%);
-    background-color: transparent;
-  }
-}
-
+// TODO
 .confirmation-modal__do_not_ask_again {
   padding-inline-start: 20px;
   padding-inline-end: 20px;
@@ -7133,9 +7111,6 @@ a.status-card {
   }
 }
 
-.confirmation-modal__container,
-.mute-modal__container,
-.block-modal__container,
 .report-modal__target {
   padding: 30px;
   font-size: 16px;
@@ -7169,31 +7144,10 @@ a.status-card {
   }
 }
 
-.confirmation-modal__container,
 .report-modal__target {
   text-align: center;
 }
 
-.block-modal,
-.mute-modal {
-  &__explanation {
-    margin-top: 20px;
-  }
-
-  .setting-toggle {
-    margin-top: 20px;
-    margin-bottom: 24px;
-    display: flex;
-    align-items: center;
-
-    &__label {
-      color: $inverted-text-color;
-      margin: 0;
-      margin-inline-start: 8px;
-    }
-  }
-}
-
 .report-modal__target {
   padding: 15px;
 
@@ -9366,13 +9320,13 @@ noscript {
   }
 
   .search__input {
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     padding: 10px;
     padding-inline-end: 30px;
   }
 
   .search__popout {
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
   }
 
   .search .icon {
@@ -9691,7 +9645,7 @@ noscript {
     &__input {
       @include search-input;
 
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
       padding: 4px 6px;
       color: $primary-text-color;
       font-size: 16px;
@@ -9726,7 +9680,7 @@ noscript {
       margin-top: -1px;
       padding-top: 5px;
       padding-bottom: 5px;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
     }
 
     &.focused &__input {
@@ -11038,6 +10992,8 @@ noscript {
   }
 
   &__embedded-status {
+    cursor: pointer;
+
     &__account {
       display: flex;
       align-items: center;
@@ -11059,7 +11015,6 @@ noscript {
       font-size: 15px;
       line-height: 22px;
       color: $dark-text-color;
-      cursor: pointer;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
       max-height: 4 * 22px;
@@ -11123,15 +11078,7 @@ noscript {
   $icon-margin: 48px; // 40px avatar + 8px gap
 
   .status__content,
-  .status__action-bar,
-  .media-gallery,
-  .video-player,
-  .audio-player,
-  .attachment-list,
-  .picture-in-picture-placeholder,
-  .more-from-author,
-  .status-card,
-  .hashtag-bar {
+  .status__action-bar {
     margin-inline-start: $icon-margin;
     width: calc(100% - $icon-margin);
   }

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

@@ -63,7 +63,7 @@
   padding: 20px 0;
   margin-top: 40px;
   margin-bottom: 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   @media screen and (width <= 440px) {
     width: 100%;

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

@@ -13,8 +13,9 @@
     & > div,
     & > a {
       padding: 20px;
-      background: lighten($ui-base-color, 4%);
+      background: var(--background-color);
       border-radius: 4px;
+      border: 1px solid var(--background-border-color);
       box-sizing: border-box;
       height: 100%;
     }
@@ -27,7 +28,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
   }

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

@@ -105,7 +105,7 @@
     width: 100%;
     background: $ui-base-color;
     color: $darker-text-color;
-    border: 1px solid lighten($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
 
     &::-moz-focus-inner {

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

@@ -415,7 +415,7 @@ code {
   }
 
   .input.static .label_input__wrapper {
-    font-size: 16px;
+    font-size: 14px;
     padding: 10px;
     border: 1px solid $dark-text-color;
     border-radius: 4px;
@@ -437,13 +437,14 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%);
-    border: 1px solid darken($ui-base-color, 10%);
-    border-radius: 8px;
+    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-radius: 4px;
     padding: 10px 16px;
 
     &::placeholder {
-      color: lighten($darker-text-color, 4%);
+      color: $dark-text-color;
+      opacity: 1;
     }
 
     &:invalid {
@@ -454,11 +455,6 @@ code {
       border-color: $valid-value-color;
     }
 
-    &:active,
-    &:focus {
-      border-color: $highlight-text-color;
-    }
-
     @media screen and (width <= 600px) {
       font-size: 16px;
     }
@@ -577,21 +573,25 @@ code {
   select {
     appearance: none;
     box-sizing: border-box;
-    font-size: 16px;
+    font-size: 14px;
     color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%)
+    background: $ui-base-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
-      no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($ui-base-color, 14%);
+      no-repeat right 8px center / auto 14px;
+    border: 1px solid var(--background-border-color);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
     height: 41px;
+
+    @media screen and (width <= 600px) {
+      font-size: 16px;
+    }
   }
 
   h4 {
@@ -644,8 +644,9 @@ code {
 }
 
 .flash-message {
-  background: lighten($ui-base-color, 8%);
-  color: $darker-text-color;
+  background: var(--background-color);
+  color: $highlight-text-color;
+  border: 1px solid $highlight-text-color;
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
@@ -1336,7 +1337,7 @@ code {
 
     &__toggle > div {
       display: flex;
-      border-inline-start: 1px solid lighten($ui-base-color, 8%);
+      border-inline-start: 1px solid var(--background-border-color);
       padding-inline-start: 16px;
     }
   }

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

@@ -23,7 +23,7 @@ html {
 // Change default background colors of columns
 .interaction-modal {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .rules-list li::before {
@@ -75,8 +75,8 @@ html {
 }
 
 .getting-started .navigation-bar {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-top: 0;
@@ -88,7 +88,7 @@ html {
 .setting-text,
 .report-dialog-modal__textarea,
 .audio-player {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .report-dialog-modal .dialog-option .poll__input {
@@ -140,7 +140,6 @@ html {
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
 .simple_form .block-button,
 .simple_form .button,
 .simple_form button {
@@ -175,7 +174,7 @@ html {
 .picture-in-picture__footer,
 .reactions-bar__item {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .reactions-bar__item:hover,
@@ -217,7 +216,7 @@ html {
 
 .column-header__collapsible-inner {
   background: darken($ui-base-color, 4%);
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   border-bottom: 0;
 }
 
@@ -259,7 +258,7 @@ html {
 
 .embed-modal .embed-modal__container .embed-modal__html {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   &:focus {
     border-color: lighten($ui-base-color, 12%);
@@ -298,25 +297,7 @@ html {
 .directory__tag > a,
 .directory__tag > div {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-left: 0;
-    border-right: 0;
-    border-top: 0;
-  }
-}
-
-.simple_form {
-  input[type='text'],
-  input[type='number'],
-  input[type='email'],
-  input[type='password'],
-  textarea {
-    &:hover {
-      border-color: lighten($ui-base-color, 12%);
-    }
-  }
+  border: 1px solid var(--background-border-color);
 }
 
 .picture-in-picture-placeholder {
@@ -331,10 +312,6 @@ html {
   &:focus {
     background: $ui-base-color;
   }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border: 0;
-  }
 }
 
 .batch-table {
@@ -346,7 +323,7 @@ html {
 }
 
 .activity-stream {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   &--under-tabs {
     border-top: 0;
@@ -411,6 +388,22 @@ html {
     color: $ui-highlight-color;
     background-color: rgba($ui-highlight-color, 0.1);
   }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='datetime-local'],
+  textarea {
+    background: darken($ui-base-color, 10%);
+  }
+
+  select {
+    background: darken($ui-base-color, 10%)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
+      no-repeat right 8px center / auto 14px;
+  }
 }
 
 .compose-form .compose-form__warning {
@@ -449,8 +442,24 @@ html {
   box-shadow: none;
 }
 
+.card {
+  &__img {
+    background: darken($ui-base-color, 10%);
+  }
+
+  & > a {
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
 .mute-modal select {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   background: $simple-background-color
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
     no-repeat right 8px center / auto 16px;
@@ -554,6 +563,7 @@ html {
 .search__popout,
 .emoji-mart-search input,
 .language-dropdown__dropdown .emoji-mart-search input,
+// .strike-card,
 .poll__option input[type='text'] {
   background: darken($ui-base-color, 10%);
 }
@@ -570,3 +580,43 @@ html {
 .inline-follow-suggestions__body__scroll-button__icon {
   color: $white;
 }
+
+a.sparkline {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.dashboard__counters {
+  & > div {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.directory {
+  &__tag {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.strike-entry {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}

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

@@ -101,7 +101,7 @@ body.rtl {
   }
 
   .simple_form select {
-    background: darken($ui-base-color, 10%)
+    background: $ui-base-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
       no-repeat left 8px center / auto 16px;
   }

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

@@ -9,9 +9,9 @@
     padding: 8px;
     line-height: 18px;
     vertical-align: top;
-    border-top: 1px solid $ui-base-color;
+    border-bottom: 1px solid var(--background-border-color);
     text-align: start;
-    background: darken($ui-base-color, 4%);
+    background: var(--background-color);
 
     &.critical {
       font-weight: 700;
@@ -21,8 +21,6 @@
 
   & > thead > tr > th {
     vertical-align: bottom;
-    border-bottom: 2px solid $ui-base-color;
-    border-top: 0;
     font-weight: 500;
   }
 
@@ -32,15 +30,20 @@
 
   & > tbody > tr:nth-child(odd) > td,
   & > tbody > tr:nth-child(odd) > th {
-    background: $ui-base-color;
+    background: var(--background-color);
+  }
+
+  & > tbody > tr:last-child > td,
+  & > tbody > tr:last-child > th {
+    border-bottom: 0;
   }
 
   a {
-    color: $highlight-text-color;
-    text-decoration: underline;
+    color: $darker-text-color;
+    text-decoration: none;
 
     &:hover {
-      text-decoration: none;
+      color: $highlight-text-color;
     }
   }
 
@@ -78,7 +81,7 @@
     & > tbody > tr > td {
       padding: 11px 10px;
       background: transparent;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
       color: $secondary-text-color;
     }
 
@@ -90,18 +93,18 @@
 
   &.batch-table {
     & > thead > tr > th {
-      background: $ui-base-color;
-      border-top: 1px solid darken($ui-base-color, 8%);
-      border-bottom: 1px solid darken($ui-base-color, 8%);
+      background: var(--background-color);
+      border-top: 1px solid var(--background-border-color);
+      border-bottom: 1px solid var(--background-border-color);
 
       &:first-child {
         border-radius: 4px 0 0;
-        border-inline-start: 1px solid darken($ui-base-color, 8%);
+        border-inline-start: 1px solid var(--background-border-color);
       }
 
       &:last-child {
         border-radius: 0 4px 0 0;
-        border-inline-end: 1px solid darken($ui-base-color, 8%);
+        border-inline-end: 1px solid var(--background-border-color);
       }
     }
   }
@@ -136,7 +139,7 @@ a.table-action-link {
   font-weight: 500;
 
   &:hover {
-    color: $primary-text-color;
+    color: $highlight-text-color;
   }
 
   i.fa {
@@ -186,9 +189,9 @@ a.table-action-link {
     position: sticky;
     top: 0;
     z-index: 1;
-    border: 1px solid darken($ui-base-color, 8%);
-    background: $ui-base-color;
-    border-radius: 4px 0 0;
+    border: 1px solid var(--background-border-color);
+    background: var(--background-color);
+    border-radius: 4px 4px 0 0;
     height: 47px;
     align-items: center;
 
@@ -199,11 +202,11 @@ a.table-action-link {
   }
 
   &__select-all {
-    background: $ui-base-color;
+    background: var(--background-color);
     height: 47px;
     align-items: center;
     justify-content: center;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
     color: $secondary-text-color;
     display: none;
@@ -249,9 +252,9 @@ a.table-action-link {
 
   &__form {
     padding: 16px;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    background: $ui-base-color;
+    background: var(--background-color);
 
     .fields-row {
       padding-top: 0;
@@ -260,26 +263,18 @@ a.table-action-link {
   }
 
   &__row {
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
-    background: darken($ui-base-color, 4%);
+    background: var(--background-color);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       .optional &:first-child {
-        border-top: 1px solid darken($ui-base-color, 8%);
+        border-top: 1px solid var(--background-border-color);
       }
     }
 
-    &:hover {
-      background: darken($ui-base-color, 2%);
-    }
-
     &:nth-child(even) {
-      background: $ui-base-color;
-
-      &:hover {
-        background: lighten($ui-base-color, 2%);
-      }
+      background: var(--background-color);
     }
 
     &__content {
@@ -291,6 +286,10 @@ a.table-action-link {
         padding: 0;
       }
 
+      &--padded {
+        padding: 12px 16px 16px;
+      }
+
       &--with-image {
         display: flex;
         align-items: center;
@@ -353,12 +352,13 @@ a.table-action-link {
   }
 
   .nothing-here {
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid var(--background-border-color);
     border-top: 0;
     box-shadow: none;
+    background: var(--background-color);
 
     @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid darken($ui-base-color, 8%);
+      border-top: 1px solid var(--background-border-color);
     }
   }
 

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

@@ -198,7 +198,7 @@
 }
 
 .directory {
-  background: $ui-base-color;
+  background: var(--background-color);
   border-radius: 4px;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 
@@ -211,7 +211,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background: $ui-base-color;
+      border: 1px solid lighten($ui-base-color, 8%);
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
@@ -223,7 +223,7 @@
       &:hover,
       &:active,
       &:focus {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
 
@@ -340,7 +340,7 @@
       &:focus,
       &:hover,
       &:active {
-        text-decoration: underline;
+        color: $highlight-text-color;
       }
     }
   }

app/javascript/mastodon/actions/accounts.js

@@ -1,3 +1,5 @@
+import { browserHistory } from 'mastodon/components/router';
+
 import api, { getLinks } from '../api';
 
 import {
@@ -676,3 +678,13 @@ export const updateAccount = ({ displayName, note, avatar, header, discoverable,
     dispatch(importFetchedAccount(response.data));
   });
 };
+
+export const navigateToProfile = (accountId) => {
+  return (_dispatch, getState) => {
+    const acct = getState().accounts.getIn([accountId, 'acct']);
+
+    if (acct) {
+      browserHistory.push(`/@${acct}`);
+    }
+  };
+};

app/javascript/mastodon/actions/compose.js

@@ -122,6 +122,18 @@ export function replyCompose(status) {
   };
 }
 
+export function replyComposeById(statusId) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const status = state.statuses.get(statusId);
+
+    if (status) {
+      const account = state.accounts.get(status.get('account'));
+      dispatch(replyCompose(status.set('account', account)));
+    }
+  };
+}
+
 export function cancelReplyCompose() {
   return {
     type: COMPOSE_REPLY_CANCEL,
@@ -154,6 +166,12 @@ export function mentionCompose(account) {
   };
 }
 
+export function mentionComposeById(accountId) {
+  return (dispatch, getState) => {
+    dispatch(mentionCompose(getState().accounts.get(accountId)));
+  };
+}
+
 export function directCompose(account) {
   return (dispatch, getState) => {
     dispatch({

app/javascript/mastodon/actions/interactions.js

@@ -1,7 +1,11 @@
+import { boostModal } from 'mastodon/initial_state';
+
 import api, { getLinks } from '../api';
 
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
+import { unreblog, reblog } from './interactions_typed';
+import { openModal } from './modal';
 
 export const REBLOGS_EXPAND_REQUEST = 'REBLOGS_EXPAND_REQUEST';
 export const REBLOGS_EXPAND_SUCCESS = 'REBLOGS_EXPAND_SUCCESS';
@@ -432,3 +436,49 @@ export function unpinFail(status, error) {
     skipLoading: true,
   };
 }
+
+function toggleReblogWithoutConfirmation(status, privacy) {
+  return (dispatch) => {
+    if (status.get('reblogged')) {
+      dispatch(unreblog({ statusId: status.get('id') }));
+    } else {
+      dispatch(reblog({ statusId: status.get('id'), privacy }));
+    }
+  };
+}
+
+export function toggleReblog(statusId, skipModal = false) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let status = state.statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    // The reblog modal expects a pre-filled account in status
+    // TODO: fix this by having the reblog modal get a statusId and do the work itself
+    status = status.set('account', state.accounts.get(status.get('account')));
+
+    if (boostModal && !skipModal) {
+      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: (status, privacy) => dispatch(toggleReblogWithoutConfirmation(status, privacy)) } }));
+    } else {
+      dispatch(toggleReblogWithoutConfirmation(status));
+    }
+  };
+}
+
+export function toggleFavourite(statusId) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const status = state.statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
+  };
+}

app/javascript/mastodon/actions/notification_policies.ts

@@ -1,3 +1,5 @@
+import { createAction } from '@reduxjs/toolkit';
+
 import {
   apiGetNotificationPolicy,
   apiUpdateNotificationsPolicy,
@@ -14,3 +16,7 @@ export const updateNotificationsPolicy = createDataLoadingThunk(
   'notificationPolicy/update',
   (policy: Partial<NotificationPolicy>) => apiUpdateNotificationsPolicy(policy),
 );
+
+export const decreasePendingNotificationsCount = createAction<number>(
+  'notificationPolicy/decreasePendingNotificationCount',
+);

app/javascript/mastodon/actions/notifications.js

@@ -18,6 +18,7 @@ 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';
@@ -84,6 +85,12 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
   }
 };
 
+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,
 });
@@ -433,11 +440,13 @@ export const fetchNotificationRequestFail = (id, error) => ({
   error,
 });
 
-export const acceptNotificationRequest = id => (dispatch) => {
+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));
   });
@@ -459,11 +468,13 @@ export const acceptNotificationRequestFail = (id, error) => ({
   error,
 });
 
-export const dismissNotificationRequest = id => (dispatch) => {
+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));
   });

app/javascript/mastodon/actions/statuses.js

@@ -1,3 +1,5 @@
+import { browserHistory } from 'mastodon/components/router';
+
 import api from '../api';
 
 import { ensureComposeIsVisible, setComposeToStatus } from './compose';
@@ -308,6 +310,21 @@ export function revealStatus(ids) {
   };
 }
 
+export function toggleStatusSpoilers(statusId) {
+  return (dispatch, getState) => {
+    const status = getState().statuses.get(statusId);
+
+    if (!status)
+      return;
+
+    if (status.get('hidden')) {
+      dispatch(revealStatus(statusId));
+    } else {
+      dispatch(hideStatus(statusId));
+    }
+  };
+}
+
 export function toggleStatusCollapse(id, isCollapsed) {
   return {
     type: STATUS_COLLAPSE,
@@ -348,3 +365,15 @@ export const undoStatusTranslation = (id, pollId) => ({
   id,
   pollId,
 });
+
+export const navigateToStatus = (statusId) => {
+  return (_dispatch, getState) => {
+    const state = getState();
+    const accountId = state.statuses.getIn([statusId, 'account']);
+    const acct = state.accounts.getIn([accountId, 'acct']);
+
+    if (acct) {
+      browserHistory.push(`/@${acct}/${statusId}`);
+    }
+  };
+};

app/javascript/mastodon/components/domain.tsx

@@ -3,6 +3,8 @@ import { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import { unblockDomain } from 'mastodon/actions/domain_blocks';
+import { useAppDispatch } from 'mastodon/store';
 
 import { IconButton } from './icon_button';
 
@@ -13,17 +15,15 @@ const messages = defineMessages({
   },
 });
 
-interface Props {
+export const Domain: React.FC<{
   domain: string;
-  onUnblockDomain: (domain: string) => void;
-}
-
-export const Domain: React.FC<Props> = ({ domain, onUnblockDomain }) => {
+}> = ({ domain }) => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
 
   const handleDomainUnblock = useCallback(() => {
-    onUnblockDomain(domain);
-  }, [domain, onUnblockDomain]);
+    dispatch(unblockDomain(domain));
+  }, [dispatch, domain]);
 
   return (
     <div className='domain'>

app/javascript/mastodon/components/follow_button.tsx

@@ -1,13 +1,9 @@
 import { useCallback, useEffect } from 'react';
 
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
 import { useIdentity } from '@/mastodon/identity_context';
-import {
-  fetchRelationships,
-  followAccount,
-  unfollowAccount,
-} from 'mastodon/actions/accounts';
+import { fetchRelationships, followAccount } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
 import { Button } from 'mastodon/components/button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
@@ -60,29 +56,14 @@ export const FollowButton: React.FC<{
 
     if (accountId === me) {
       return;
-    } else if (relationship.following || relationship.requested) {
+    } else if (account && (relationship.following || relationship.requested)) {
       dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account?.acct}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollow),
-            onConfirm: () => {
-              dispatch(unfollowAccount(accountId));
-            },
-          },
-        }),
+        openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
       );
     } else {
       dispatch(followAccount(accountId));
     }
-  }, [dispatch, intl, accountId, relationship, account, signedIn]);
+  }, [dispatch, accountId, relationship, account, signedIn]);
 
   let label;
 

app/javascript/mastodon/components/status.jsx

@@ -119,6 +119,7 @@ class Status extends ImmutablePureComponent {
     skipPrepend: PropTypes.bool,
     avatarSize: PropTypes.number,
     deployPictureInPicture: PropTypes.func,
+    unfocusable: PropTypes.bool,
     pictureInPicture: ImmutablePropTypes.contains({
       inUse: PropTypes.bool,
       available: PropTypes.bool,
@@ -355,7 +356,7 @@ class Status extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, hidden, featured, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
+    const { intl, hidden, featured, unfocusable, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
 
     let { status, account, ...other } = this.props;
 
@@ -381,8 +382,8 @@ class Status extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <HotKeys handlers={handlers}>
-          <div ref={this.handleRef} className={classNames('status__wrapper', { focusable: !this.props.muted })} tabIndex={0}>
+        <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
+          <div ref={this.handleRef} className={classNames('status__wrapper', { focusable: !this.props.muted })} tabIndex={unfocusable ? null : 0}>
             <span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
             <span>{status.get('content')}</span>
           </div>
@@ -402,8 +403,8 @@ class Status extends ImmutablePureComponent {
       };
 
       return (
-        <HotKeys handlers={minHandlers}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
+        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
+          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
             {' '}
             <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
@@ -550,8 +551,8 @@ class Status extends ImmutablePureComponent {
     const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
 
     return (
-      <HotKeys handlers={handlers}>
-        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
+      <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
+        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
           {!skipPrepend && prepend}
 
           <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted })} data-id={status.get('id')}>

app/javascript/mastodon/containers/account_container.jsx

@@ -1,24 +1,20 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import { openModal } from 'mastodon/actions/modal';
+
 import {
   followAccount,
-  unfollowAccount,
   blockAccount,
   unblockAccount,
   muteAccount,
   unmuteAccount,
 } from '../actions/accounts';
-import { openModal } from '../actions/modal';
 import { initMuteModal } from '../actions/mutes';
 import Account from '../components/account';
 import { makeGetAccount } from '../selectors';
 
-const messages = defineMessages({
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-});
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
@@ -29,18 +25,11 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.unfollowConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }));
     } else {
       dispatch(followAccount(account.get('id')));
     }

app/javascript/mastodon/containers/domain_container.jsx

@@ -1,36 +0,0 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { blockDomain, unblockDomain } from '../actions/domain_blocks';
-import { openModal } from '../actions/modal';
-import { Domain } from '../components/domain';
-
-const messages = defineMessages({
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = () => ({});
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onBlockDomain (domain) {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
-        confirm: intl.formatMessage(messages.blockDomainConfirm),
-        onConfirm: () => dispatch(blockDomain(domain)),
-      },
-    }));
-  },
-
-  onUnblockDomain (domain) {
-    dispatch(unblockDomain(domain));
-  },
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain));

app/javascript/mastodon/containers/status_container.jsx

@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
@@ -21,11 +21,9 @@ import {
   initAddFilter,
 } from '../actions/filters';
 import {
-  reblog,
-  favourite,
+  toggleReblog,
+  toggleFavourite,
   bookmark,
-  unreblog,
-  unfavourite,
   unbookmark,
   pin,
   unpin,
@@ -38,29 +36,16 @@ import {
   muteStatus,
   unmuteStatus,
   deleteStatus,
-  hideStatus,
-  revealStatus,
+  toggleStatusSpoilers,
   toggleStatusCollapse,
   editStatus,
   translateStatus,
   undoStatusTranslation,
 } from '../actions/statuses';
 import Status from '../components/status';
-import { boostModal, deleteModal } from '../initial_state';
+import { deleteModal } from '../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
 
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
-  editMessage: { id: 'confirmations.edit.message', defaultMessage: 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
   const getPictureInPicture = makeGetPictureInPicture();
@@ -74,48 +59,26 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
+const mapDispatchToProps = (dispatch, { contextType }) => ({
 
   onReply (status) {
     dispatch((_, getState) => {
       let state = getState();
 
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status)) },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         dispatch(replyCompose(status));
       }
     });
   },
 
-  onModalReblog (status, privacy) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-    }
-  },
-
   onReblog (status, e) {
-    if ((e && e.shiftKey) || !boostModal) {
-      this.onModalReblog(status);
-    } else {
-      dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
   },
 
   onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+    dispatch(toggleFavourite(status.get('id')));
   },
 
   onBookmark (status) {
@@ -148,14 +111,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
     }
   },
 
@@ -163,14 +119,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch((_, getState) => {
       let state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.editMessage),
-            confirm: intl.formatMessage(messages.editConfirm),
-            onConfirm: () => dispatch(editStatus(status.get('id'))),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_EDIT_STATUS', modalProps: { statusId: status.get('id') } }));
       } else {
         dispatch(editStatus(status.get('id')));
       }
@@ -241,11 +190,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(status.get('id')));
   },
 
   onToggleCollapsed (status, isCollapsed) {

app/javascript/mastodon/features/account_timeline/containers/header_container.jsx

@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
@@ -6,7 +6,6 @@ import { openURL } from 'mastodon/actions/search';
 
 import {
   followAccount,
-  unfollowAccount,
   unblockAccount,
   unmuteAccount,
   pinAccount,
@@ -24,11 +23,6 @@ import { initReport } from '../../../actions/reports';
 import { makeGetAccount, getAccountHidden } from '../../../selectors';
 import Header from '../components/header';
 
-const messages = defineMessages({
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
@@ -41,18 +35,11 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onFollow (account) {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.unfollowConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }));
     } else {
       dispatch(followAccount(account.get('id')));
     }

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

@@ -7,7 +7,6 @@ import { useDispatch } from 'react-redux';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { openModal } from 'mastodon/actions/modal';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
-import { logOut } from 'mastodon/utils/log_out';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
@@ -23,8 +22,6 @@ const messages = defineMessages({
   filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 export const ActionBar = () => {
@@ -32,16 +29,8 @@ export const ActionBar = () => {
   const intl = useIntl();
 
   const handleLogoutClick = useCallback(() => {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
-  }, [dispatch, intl]);
+    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
+  }, [dispatch]);
 
   let menu = [];
 

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

@@ -21,7 +21,6 @@ import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
 import { openModal } from 'mastodon/actions/modal';
 import Column from 'mastodon/components/column';
 import { Icon }  from 'mastodon/components/icon';
-import { logOut } from 'mastodon/utils/log_out';
 
 import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
 import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose';
@@ -42,8 +41,6 @@ const messages = defineMessages({
   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
-  logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' },
-  logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' },
 });
 
 const mapStateToProps = (state, ownProps) => ({
@@ -72,20 +69,12 @@ class Compose extends PureComponent {
   }
 
   handleLogoutClick = e => {
-    const { dispatch, intl } = this.props;
+    const { dispatch } = this.props;
 
     e.preventDefault();
     e.stopPropagation();
 
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.logoutMessage),
-        confirm: intl.formatMessage(messages.logoutConfirm),
-        closeWhenConfirm: false,
-        onConfirm: () => logOut(),
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
 
     return false;
   };

app/javascript/mastodon/features/direct_timeline/components/conversation.jsx

@@ -18,7 +18,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import { replyCompose } from 'mastodon/actions/compose';
 import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
 import { openModal } from 'mastodon/actions/modal';
-import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'mastodon/actions/statuses';
+import { muteStatus, unmuteStatus, toggleStatusSpoilers } from 'mastodon/actions/statuses';
 import AttachmentList from 'mastodon/components/attachment_list';
 import AvatarComposite from 'mastodon/components/avatar_composite';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -36,8 +36,6 @@ const messages = defineMessages({
   delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
 
 const getAccounts = createSelector(
@@ -103,19 +101,12 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
       let state = getState();
 
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(lastStatus)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status: lastStatus } }));
       } else {
         dispatch(replyCompose(lastStatus));
       }
     });
-  }, [dispatch, lastStatus, intl]);
+  }, [dispatch, lastStatus]);
 
   const handleDelete = useCallback(() => {
     dispatch(deleteConversation(id));
@@ -138,11 +129,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
   }, [dispatch, lastStatus]);
 
   const handleShowMore = useCallback(() => {
-    if (lastStatus.get('hidden')) {
-      dispatch(revealStatus(lastStatus.get('id')));
-    } else {
-      dispatch(hideStatus(lastStatus.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(lastStatus.get('id')));
   }, [dispatch, lastStatus]);
 
   if (!lastStatus) {

app/javascript/mastodon/features/directory/components/account_card.tsx

@@ -8,7 +8,6 @@ import { Link } from 'react-router-dom';
 
 import {
   followAccount,
-  unfollowAccount,
   unblockAccount,
   unmuteAccount,
 } from 'mastodon/actions/accounts';
@@ -29,20 +28,12 @@ const messages = defineMessages({
     id: 'account.cancel_follow_request',
     defaultMessage: 'Withdraw follow request',
   },
-  cancelFollowRequestConfirm: {
-    id: 'confirmations.cancel_follow_request.confirm',
-    defaultMessage: 'Withdraw request',
-  },
   requested: {
     id: 'account.requested',
     defaultMessage: 'Awaiting approval. Click to cancel follow request',
   },
   unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
   unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
-  unfollowConfirm: {
-    id: 'confirmations.unfollow.confirm',
-    defaultMessage: 'Unfollow',
-  },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 });
 
@@ -89,48 +80,17 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
   const handleFollow = useCallback(() => {
     if (!account) return;
 
-    if (account.getIn(['relationship', 'following'])) {
+    if (
+      account.getIn(['relationship', 'following']) ||
+      account.getIn(['relationship', 'requested'])
+    ) {
       dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollowConfirm),
-            onConfirm: () => {
-              dispatch(unfollowAccount(account.get('id')));
-            },
-          },
-        }),
-      );
-    } else if (account.getIn(['relationship', 'requested'])) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.cancel_follow_request.message'
-                defaultMessage='Are you sure you want to withdraw your request to follow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
-            onConfirm: () => {
-              dispatch(unfollowAccount(account.get('id')));
-            },
-          },
-        }),
+        openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
       );
     } else {
       dispatch(followAccount(account.get('id')));
     }
-  }, [account, dispatch, intl]);
+  }, [account, dispatch]);
 
   const handleBlock = useCallback(() => {
     if (account?.relationship?.blocking) {

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

@@ -11,16 +11,15 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
+import { Domain } from 'mastodon/components/domain';
 
 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import DomainContainer from '../../containers/domain_container';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' },
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
 });
 
 const mapStateToProps = state => ({
@@ -70,7 +69,7 @@ class Blocks extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {domains.map(domain =>
-            <DomainContainer key={domain} domain={domain} />,
+            <Domain key={domain} domain={domain} />,
           )}
         </ScrollableList>
 

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

@@ -15,7 +15,7 @@ import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
-import { fetchList, deleteList, updateList } from 'mastodon/actions/lists';
+import { fetchList, updateList } from 'mastodon/actions/lists';
 import { openModal } from 'mastodon/actions/modal';
 import { connectListStream } from 'mastodon/actions/streaming';
 import { expandListTimeline } from 'mastodon/actions/timelines';
@@ -29,8 +29,6 @@ import StatusListContainer from 'mastodon/features/ui/containers/status_list_con
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 const messages = defineMessages({
-  deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
-  deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
   followed:   { id: 'lists.replies_policy.followed', defaultMessage: 'Any followed user' },
   none:    { id: 'lists.replies_policy.none', defaultMessage: 'No one' },
   list:  { id: 'lists.replies_policy.list', defaultMessage: 'Members of the list' },
@@ -125,25 +123,10 @@ class ListTimeline extends PureComponent {
   };
 
   handleDeleteClick = () => {
-    const { dispatch, columnId, intl } = this.props;
+    const { dispatch, columnId } = this.props;
     const { id } = this.props.params;
 
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.deleteMessage),
-        confirm: intl.formatMessage(messages.deleteConfirm),
-        onConfirm: () => {
-          dispatch(deleteList(id));
-
-          if (columnId) {
-            dispatch(removeColumn(columnId));
-          } else {
-            this.props.history.push('/lists');
-          }
-        },
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_DELETE_LIST', modalProps: { listId: id, columnId } }));
   };
 
   handleRepliesPolicyChange = ({ target }) => {

app/javascript/mastodon/features/notifications/containers/column_settings_container.js

@@ -2,11 +2,10 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
+import { openModal } from 'mastodon/actions/modal';
 import { initializeNotifications } from 'mastodon/actions/notifications_migration';
 
 import { showAlert } from '../../../actions/alerts';
-import { openModal } from '../../../actions/modal';
-import { clearNotifications } from '../../../actions/notification_groups';
 import { updateNotificationsPolicy } from '../../../actions/notification_policies';
 import { setFilter, requestBrowserPermission } from '../../../actions/notifications';
 import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
@@ -14,8 +13,6 @@ import { changeSetting } from '../../../actions/settings';
 import ColumnSettings from '../components/column_settings';
 
 const messages = defineMessages({
-  clearMessage: { id: 'notifications.clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all your notifications?' },
-  clearConfirm: { id: 'notifications.clear', defaultMessage: 'Clear notifications' },
   permissionDenied: { id: 'notifications.permission_denied_alert', defaultMessage: 'Desktop notifications can\'t be enabled, as browser permission has been denied before' },
 });
 
@@ -31,7 +28,7 @@ const mapStateToProps = state => ({
   notificationPolicy: state.notificationPolicy,
 });
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onChange (path, checked) {
     if (path[0] === 'push') {
@@ -70,14 +67,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onClear () {
-    dispatch(openModal({
-      modalType: 'CONFIRM',
-      modalProps: {
-        message: intl.formatMessage(messages.clearMessage),
-        confirm: intl.formatMessage(messages.clearConfirm),
-        onConfirm: () => dispatch(clearNotifications()),
-      },
-    }));
+    dispatch(openModal({ modalType: 'CONFIRM_CLEAR_NOTIFICATIONS' }));
   },
 
   onRequestNotificationPermission () {

app/javascript/mastodon/features/notifications/containers/notification_container.js

@@ -2,17 +2,12 @@ import { connect } from 'react-redux';
 
 import { mentionCompose } from '../../../actions/compose';
 import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
+  toggleFavourite,
+  toggleReblog,
 } from '../../../actions/interactions';
-import { openModal } from '../../../actions/modal';
 import {
-  hideStatus,
-  revealStatus,
+  toggleStatusSpoilers,
 } from '../../../actions/statuses';
-import { boostModal } from '../../../initial_state';
 import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
 import Notification from '../components/notification';
 
@@ -38,36 +33,16 @@ const mapDispatchToProps = dispatch => ({
     dispatch(mentionCompose(account));
   },
 
-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  },
-
   onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
   },
 
   onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+    dispatch(toggleFavourite(status.get('id')));
   },
 
   onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(status.get('id')));
   },
 });
 

app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -22,6 +22,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
 }) => {
   const history = useHistory();
+  const clickCoordinatesRef = useRef<[number, number] | null>();
 
   const status = useAppSelector(
     (state) => state.statuses.get(statusId) as Status | undefined,
@@ -31,11 +32,69 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
     state.accounts.get(status?.get('account') as string),
   );
 
-  const handleClick = useCallback(() => {
-    if (!account) return;
+  const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ clientX, clientY }) => {
+      clickCoordinatesRef.current = [clientX, clientY];
+    },
+    [clickCoordinatesRef],
+  );
 
-    history.push(`/@${account.acct}/${statusId}`);
-  }, [statusId, account, history]);
+  const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ clientX, clientY, target, button }) => {
+      const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
+      const [deltaX, deltaY] = [
+        Math.abs(clientX - startX),
+        Math.abs(clientY - startY),
+      ];
+
+      let element: HTMLDivElement | null = target as HTMLDivElement;
+
+      while (element) {
+        if (
+          element.localName === 'button' ||
+          element.localName === 'a' ||
+          element.localName === 'label'
+        ) {
+          return;
+        }
+
+        element = element.parentNode as HTMLDivElement | null;
+      }
+
+      if (deltaX + deltaY < 5 && button === 0 && account) {
+        history.push(`/@${account.acct}/${statusId}`);
+      }
+
+      clickCoordinatesRef.current = null;
+    },
+    [clickCoordinatesRef, statusId, account, history],
+  );
+
+  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ currentTarget }) => {
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      for (const emoji of emojis) {
+        const newSrc = emoji.getAttribute('data-original');
+        if (newSrc) emoji.src = newSrc;
+      }
+    },
+    [],
+  );
+
+  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
+    ({ currentTarget }) => {
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      for (const emoji of emojis) {
+        const newSrc = emoji.getAttribute('data-static');
+        if (newSrc) emoji.src = newSrc;
+      }
+    },
+    [],
+  );
 
   if (!status) {
     return null;
@@ -51,7 +110,15 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   ).size;
 
   return (
-    <div className='notification-group__embedded-status'>
+    <div
+      className='notification-group__embedded-status'
+      role='button'
+      tabIndex={-1}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <div className='notification-group__embedded-status__account'>
         <Avatar account={account} size={16} />
         <DisplayName account={account} />
@@ -62,7 +129,6 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         content={contentHtml}
         language={language}
         mentions={mentions}
-        onClick={handleClick}
       />
 
       {(poll || mediaAttachmentsSize > 0) && (

app/javascript/mastodon/features/notifications_v2/components/embedded_status_content.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { useHistory } from 'react-router-dom';
 
@@ -34,76 +34,10 @@ export const EmbeddedStatusContent: React.FC<{
   content: string;
   mentions: List<Mention>;
   language: string;
-  onClick?: () => void;
   className?: string;
-}> = ({ content, mentions, language, onClick, className }) => {
-  const clickCoordinatesRef = useRef<[number, number] | null>();
+}> = ({ content, mentions, language, className }) => {
   const history = useHistory();
 
-  const handleMouseDown = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ clientX, clientY }) => {
-      clickCoordinatesRef.current = [clientX, clientY];
-    },
-    [clickCoordinatesRef],
-  );
-
-  const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ clientX, clientY, target, button }) => {
-      const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
-      const [deltaX, deltaY] = [
-        Math.abs(clientX - startX),
-        Math.abs(clientY - startY),
-      ];
-
-      let element: HTMLDivElement | null = target as HTMLDivElement;
-
-      while (element) {
-        if (
-          element.localName === 'button' ||
-          element.localName === 'a' ||
-          element.localName === 'label'
-        ) {
-          return;
-        }
-
-        element = element.parentNode as HTMLDivElement | null;
-      }
-
-      if (deltaX + deltaY < 5 && button === 0 && onClick) {
-        onClick();
-      }
-
-      clickCoordinatesRef.current = null;
-    },
-    [clickCoordinatesRef, onClick],
-  );
-
-  const handleMouseEnter = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ currentTarget }) => {
-      const emojis =
-        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
-
-      for (const emoji of emojis) {
-        const newSrc = emoji.getAttribute('data-original');
-        if (newSrc) emoji.src = newSrc;
-      }
-    },
-    [],
-  );
-
-  const handleMouseLeave = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ currentTarget }) => {
-      const emojis =
-        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
-
-      for (const emoji of emojis) {
-        const newSrc = emoji.getAttribute('data-static');
-        if (newSrc) emoji.src = newSrc;
-      }
-    },
-    [],
-  );
-
   const handleContentRef = useCallback(
     (node: HTMLDivElement | null) => {
       if (!node) {
@@ -150,16 +84,10 @@ export const EmbeddedStatusContent: React.FC<{
 
   return (
     <div
-      role='button'
-      tabIndex={0}
       className={className}
       ref={handleContentRef}
       lang={language}
       dangerouslySetInnerHTML={{ __html: content }}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     />
   );
 };

app/javascript/mastodon/features/notifications_v2/components/notification_group.tsx

@@ -2,8 +2,10 @@ import { useMemo } from 'react';
 
 import { HotKeys } from 'react-hotkeys';
 
+import { navigateToProfile } from 'mastodon/actions/accounts';
+import { mentionComposeById } from 'mastodon/actions/compose';
 import type { NotificationGroup as NotificationGroupModel } from 'mastodon/models/notification_group';
-import { useAppSelector } from 'mastodon/store';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { NotificationAdminReport } from './notification_admin_report';
 import { NotificationAdminSignUp } from './notification_admin_sign_up';
@@ -30,6 +32,13 @@ export const NotificationGroup: React.FC<{
     ),
   );
 
+  const dispatch = useAppDispatch();
+
+  const accountId =
+    notificationGroup?.type === 'gap'
+      ? undefined
+      : notificationGroup?.sampleAccountIds[0];
+
   const handlers = useMemo(
     () => ({
       moveUp: () => {
@@ -39,8 +48,16 @@ export const NotificationGroup: React.FC<{
       moveDown: () => {
         onMoveDown(notificationGroupId);
       },
+
+      openProfile: () => {
+        if (accountId) dispatch(navigateToProfile(accountId));
+      },
+
+      mention: () => {
+        if (accountId) dispatch(mentionComposeById(accountId));
+      },
     }),
-    [notificationGroupId, onMoveUp, onMoveDown],
+    [dispatch, notificationGroupId, accountId, onMoveUp, onMoveDown],
   );
 
   if (!notificationGroup || notificationGroup.type === 'gap') return null;

app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx

@@ -2,9 +2,14 @@ import { useMemo } from 'react';
 
 import classNames from 'classnames';
 
+import { HotKeys } from 'react-hotkeys';
+
+import { replyComposeById } from 'mastodon/actions/compose';
+import { navigateToStatus } from 'mastodon/actions/statuses';
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+import { useAppDispatch } from 'mastodon/store';
 
 import { AvatarGroup } from './avatar_group';
 import { EmbeddedStatus } from './embedded_status';
@@ -39,6 +44,8 @@ export const NotificationGroupWithStatus: React.FC<{
   type,
   unread,
 }) => {
+  const dispatch = useAppDispatch();
+
   const label = useMemo(
     () =>
       labelRenderer({
@@ -53,39 +60,54 @@ export const NotificationGroupWithStatus: React.FC<{
     [labelRenderer, accountIds, count, labelSeeMoreHref],
   );
 
+  const handlers = useMemo(
+    () => ({
+      open: () => {
+        dispatch(navigateToStatus(statusId));
+      },
+
+      reply: () => {
+        dispatch(replyComposeById(statusId));
+      },
+    }),
+    [dispatch, statusId],
+  );
+
   return (
-    <div
-      role='button'
-      className={classNames(
-        `notification-group focusable notification-group--${type}`,
-        { 'notification-group--unread': unread },
-      )}
-      tabIndex={0}
-    >
-      <div className='notification-group__icon'>
-        <Icon icon={icon} id={iconId} />
-      </div>
-
-      <div className='notification-group__main'>
-        <div className='notification-group__main__header'>
-          <div className='notification-group__main__header__wrapper'>
-            <AvatarGroup accountIds={accountIds} />
-
-            {actions}
-          </div>
-
-          <div className='notification-group__main__header__label'>
-            {label}
-            {timestamp && <RelativeTimestamp timestamp={timestamp} />}
-          </div>
+    <HotKeys handlers={handlers}>
+      <div
+        role='button'
+        className={classNames(
+          `notification-group focusable notification-group--${type}`,
+          { 'notification-group--unread': unread },
+        )}
+        tabIndex={0}
+      >
+        <div className='notification-group__icon'>
+          <Icon icon={icon} id={iconId} />
         </div>
 
-        {statusId && (
-          <div className='notification-group__main__status'>
-            <EmbeddedStatus statusId={statusId} />
+        <div className='notification-group__main'>
+          <div className='notification-group__main__header'>
+            <div className='notification-group__main__header__wrapper'>
+              <AvatarGroup accountIds={accountIds} />
+
+              {actions}
+            </div>
+
+            <div className='notification-group__main__header__label'>
+              {label}
+              {timestamp && <RelativeTimestamp timestamp={timestamp} />}
+            </div>
           </div>
-        )}
+
+          {statusId && (
+            <div className='notification-group__main__status'>
+              <EmbeddedStatus statusId={statusId} />
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </HotKeys>
   );
 };

app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx

@@ -2,10 +2,18 @@ import { useMemo } from 'react';
 
 import classNames from 'classnames';
 
+import { HotKeys } from 'react-hotkeys';
+
+import { replyComposeById } from 'mastodon/actions/compose';
+import { toggleReblog, toggleFavourite } from 'mastodon/actions/interactions';
+import {
+  navigateToStatus,
+  toggleStatusSpoilers,
+} from 'mastodon/actions/statuses';
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
 import Status from 'mastodon/containers/status_container';
-import { useAppSelector } from 'mastodon/store';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { NamesList } from './names_list';
 import type { LabelRenderer } from './notification_group_with_status';
@@ -29,6 +37,8 @@ export const NotificationWithStatus: React.FC<{
   type,
   unread,
 }) => {
+  const dispatch = useAppDispatch();
+
   const label = useMemo(
     () =>
       labelRenderer({
@@ -41,33 +51,61 @@ export const NotificationWithStatus: React.FC<{
     (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
   );
 
-  return (
-    <div
-      role='button'
-      className={classNames(
-        `notification-ungrouped focusable notification-ungrouped--${type}`,
-        {
-          'notification-ungrouped--unread': unread,
-          'notification-ungrouped--direct': isPrivateMention,
-        },
-      )}
-      tabIndex={0}
-    >
-      <div className='notification-ungrouped__header'>
-        <div className='notification-ungrouped__header__icon'>
-          <Icon icon={icon} id={iconId} />
-        </div>
-        {label}
-      </div>
+  const handlers = useMemo(
+    () => ({
+      open: () => {
+        dispatch(navigateToStatus(statusId));
+      },
 
-      <Status
-        // @ts-expect-error -- <Status> is not yet typed
-        id={statusId}
-        contextType='notifications'
-        withDismiss
-        skipPrepend
-        avatarSize={40}
-      />
-    </div>
+      reply: () => {
+        dispatch(replyComposeById(statusId));
+      },
+
+      boost: () => {
+        dispatch(toggleReblog(statusId));
+      },
+
+      favourite: () => {
+        dispatch(toggleFavourite(statusId));
+      },
+
+      toggleHidden: () => {
+        dispatch(toggleStatusSpoilers(statusId));
+      },
+    }),
+    [dispatch, statusId],
+  );
+
+  return (
+    <HotKeys handlers={handlers}>
+      <div
+        role='button'
+        className={classNames(
+          `notification-ungrouped focusable notification-ungrouped--${type}`,
+          {
+            'notification-ungrouped--unread': unread,
+            'notification-ungrouped--direct': isPrivateMention,
+          },
+        )}
+        tabIndex={0}
+      >
+        <div className='notification-ungrouped__header'>
+          <div className='notification-ungrouped__header__icon'>
+            <Icon icon={icon} id={iconId} />
+          </div>
+          {label}
+        </div>
+
+        <Status
+          // @ts-expect-error -- <Status> is not yet typed
+          id={statusId}
+          contextType='notifications'
+          withDismiss
+          skipPrepend
+          avatarSize={40}
+          unfocusable
+        />
+      </div>
+    </HotKeys>
   );
 };

app/javascript/mastodon/features/picture_in_picture/components/footer.jsx

@@ -15,11 +15,11 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { replyCompose } from 'mastodon/actions/compose';
-import { reblog, favourite, unreblog, unfavourite } from 'mastodon/actions/interactions';
+import { toggleReblog, toggleFavourite } from 'mastodon/actions/interactions';
 import { openModal } from 'mastodon/actions/modal';
 import { IconButton } from 'mastodon/components/icon_button';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { me, boostModal } from 'mastodon/initial_state';
+import { me } from 'mastodon/initial_state';
 import { makeGetStatus } from 'mastodon/selectors';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
@@ -31,8 +31,6 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
 });
 
@@ -71,19 +69,13 @@ class Footer extends ImmutablePureComponent {
   };
 
   handleReplyClick = () => {
-    const { dispatch, askReplyConfirmation, status, intl } = this.props;
+    const { dispatch, askReplyConfirmation, status, onClose } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
       if (askReplyConfirmation) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: this._performReply,
-          },
-        }));
+        onClose(true);
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         this._performReply();
       }
@@ -104,11 +96,7 @@ class Footer extends ImmutablePureComponent {
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
+      dispatch(toggleFavourite(status.get('id')));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',
@@ -121,23 +109,12 @@ class Footer extends ImmutablePureComponent {
     }
   };
 
-  _performReblog = (status, privacy) => {
-    const { dispatch } = this.props;
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  };
-
   handleReblogClick = e => {
     const { dispatch, status } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('reblogged')) {
-        dispatch(unreblog({ statusId: status.get('id') }));
-      } else if ((e && e.shiftKey) || !boostModal) {
-        this._performReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this._performReblog } }));
-      }
+      dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',

app/javascript/mastodon/features/status/containers/detailed_status_container.js

@@ -1,4 +1,4 @@
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
@@ -10,10 +10,8 @@ import {
   directCompose,
 } from '../../../actions/compose';
 import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
+  toggleReblog,
+  toggleFavourite,
   pin,
   unpin,
 } from '../../../actions/interactions';
@@ -24,22 +22,12 @@ import {
   muteStatus,
   unmuteStatus,
   deleteStatus,
-  hideStatus,
-  revealStatus,
+  toggleStatusSpoilers,
 } from '../../../actions/statuses';
-import { boostModal, deleteModal } from '../../../initial_state';
+import { deleteModal } from '../../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../../selectors';
 import DetailedStatus from '../components/detailed_status';
 
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-});
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
   const getPictureInPicture = makeGetPictureInPicture();
@@ -53,48 +41,25 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
 
   onReply (status) {
     dispatch((_, getState) => {
       let state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         dispatch(replyCompose(status));
       }
     });
   },
 
-  onModalReblog (status, privacy) {
-    dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  },
-
   onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog({ statusId: status.get('id') }));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.onModalReblog } }));
-      }
-    }
+    dispatch(toggleReblog(status.get('id'), e.shiftKey));
   },
 
   onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
+    dispatch(toggleFavourite(status.get('id')));
   },
 
   onPin (status) {
@@ -119,14 +84,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
     }
   },
 
@@ -174,11 +132,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
+    dispatch(toggleStatusSpoilers(status.get('id')));
   },
 
 });

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

@@ -38,12 +38,10 @@ import {
   unblockDomain,
 } from '../../actions/domain_blocks';
 import {
-  favourite,
-  unfavourite,
+  toggleFavourite,
   bookmark,
   unbookmark,
-  reblog,
-  unreblog,
+  toggleReblog,
   pin,
   unpin,
 } from '../../actions/interactions';
@@ -64,7 +62,7 @@ import {
 import ColumnHeader from '../../components/column_header';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import StatusContainer from '../../containers/status_container';
-import { boostModal, deleteModal } from '../../initial_state';
+import { deleteModal } from '../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
 import Column from '../ui/components/column';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
@@ -74,17 +72,10 @@ import DetailedStatus from './components/detailed_status';
 
 
 const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
   revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
   hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
   statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' },
   detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
 });
 
 const makeMapStateToProps = () => {
@@ -244,11 +235,7 @@ class Status extends ImmutablePureComponent {
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('favourited')) {
-        dispatch(unfavourite(status));
-      } else {
-        dispatch(favourite(status));
-      }
+      dispatch(toggleFavourite(status.get('id')));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',
@@ -270,19 +257,12 @@ class Status extends ImmutablePureComponent {
   };
 
   handleReplyClick = (status) => {
-    const { askReplyConfirmation, dispatch, intl } = this.props;
+    const { askReplyConfirmation, dispatch } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
       if (askReplyConfirmation) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status)),
-          },
-        }));
+        dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
       } else {
         dispatch(replyCompose(status));
       }
@@ -298,24 +278,12 @@ class Status extends ImmutablePureComponent {
     }
   };
 
-  handleModalReblog = (status, privacy) => {
-    this.props.dispatch(reblog({ statusId: status.get('id'), visibility: privacy }));
-  };
-
   handleReblogClick = (status, e) => {
     const { dispatch } = this.props;
     const { signedIn } = this.props.identity;
 
     if (signedIn) {
-      if (status.get('reblogged')) {
-        dispatch(unreblog({ statusId: status.get('id') }));
-      } else {
-        if ((e && e.shiftKey) || !boostModal) {
-          this.handleModalReblog(status);
-        } else {
-          dispatch(openModal({ modalType: 'BOOST', modalProps: { status, onReblog: this.handleModalReblog } }));
-        }
-      }
+      dispatch(toggleReblog(status.get('id'), e && e.shiftKey));
     } else {
       dispatch(openModal({
         modalType: 'INTERACTION',
@@ -337,24 +305,23 @@ class Status extends ImmutablePureComponent {
   };
 
   handleDeleteClick = (status, withRedraft = false) => {
-    const { dispatch, intl } = this.props;
+    const { dispatch } = this.props;
 
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), withRedraft));
     } else {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-          onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
-        },
-      }));
+      dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
     }
   };
 
   handleEditClick = (status) => {
-    this.props.dispatch(editStatus(status.get('id')));
+    const { dispatch, askReplyConfirmation } = this.props;
+
+    if (askReplyConfirmation) {
+      dispatch(openModal({ modalType: 'CONFIRM_EDIT_STATUS', modalProps: { statusId: status.get('id') } }));
+    } else {
+      dispatch(editStatus(status.get('id')));
+    }
   };
 
   handleDirectClick = (account) => {

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

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, FormattedMessage } from 'react-intl';
-
-import { Button } from '../../../components/button';
-
-class ConfirmationModal extends PureComponent {
-
-  static propTypes = {
-    message: PropTypes.node.isRequired,
-    confirm: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    secondary: PropTypes.string,
-    onSecondary: PropTypes.func,
-    closeWhenConfirm: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-  };
-
-  static defaultProps = {
-    closeWhenConfirm: true,
-  };
-
-  handleClick = () => {
-    if (this.props.closeWhenConfirm) {
-      this.props.onClose();
-    }
-    this.props.onConfirm();
-  };
-
-  handleSecondary = () => {
-    this.props.onClose();
-    this.props.onSecondary();
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  render () {
-    const { message, confirm, secondary } = this.props;
-
-    return (
-      <div className='modal-root__modal confirmation-modal'>
-        <div className='confirmation-modal__container'>
-          {message}
-        </div>
-
-        <div className='confirmation-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
-            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          {secondary !== undefined && (
-            <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
-          )}
-          <Button text={confirm} onClick={this.handleClick} autoFocus />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(ConfirmationModal);

app/javascript/mastodon/features/ui/components/confirmation_modals/clear_notifications.tsx

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { clearNotifications } from 'mastodon/actions/notification_groups';
+import { useAppDispatch } from 'mastodon/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  clearTitle: {
+    id: 'notifications.clear_title',
+    defaultMessage: 'Clear notifications?',
+  },
+  clearMessage: {
+    id: 'notifications.clear_confirmation',
+    defaultMessage:
+      'Are you sure you want to permanently clear all your notifications?',
+  },
+  clearConfirm: {
+    id: 'notifications.clear',
+    defaultMessage: 'Clear notifications',
+  },
+});
+
+export const ConfirmClearNotificationsModal: React.FC<
+  BaseConfirmationModalProps
+> = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const onConfirm = useCallback(() => {
+    void dispatch(clearNotifications());
+  }, [dispatch]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.clearTitle)}
+      message={intl.formatMessage(messages.clearMessage)}
+      confirm={intl.formatMessage(messages.clearConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from 'mastodon/components/button';
+
+export interface BaseConfirmationModalProps {
+  onClose: () => void;
+}
+
+export const ConfirmationModal: React.FC<
+  {
+    title: React.ReactNode;
+    message: React.ReactNode;
+    confirm: React.ReactNode;
+    secondary?: React.ReactNode;
+    onSecondary?: () => void;
+    onConfirm: () => void;
+    closeWhenConfirm?: boolean;
+  } & BaseConfirmationModalProps
+> = ({
+  title,
+  message,
+  confirm,
+  onClose,
+  onConfirm,
+  secondary,
+  onSecondary,
+  closeWhenConfirm = true,
+}) => {
+  const handleClick = useCallback(() => {
+    if (closeWhenConfirm) {
+      onClose();
+    }
+
+    onConfirm();
+  }, [onClose, onConfirm, closeWhenConfirm]);
+
+  const handleSecondary = useCallback(() => {
+    onClose();
+    onSecondary?.();
+  }, [onClose, onSecondary]);
+
+  const handleCancel = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__confirmation'>
+          <h1>{title}</h1>
+          <p>{message}</p>
+        </div>
+      </div>
+
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          {secondary && (
+            <>
+              <Button onClick={handleSecondary}>{secondary}</Button>
+
+              <div className='spacer' />
+            </>
+          )}
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage
+              id='confirmation_modal.cancel'
+              defaultMessage='Cancel'
+            />
+          </button>
+
+          <Button onClick={handleClick}>{confirm}</Button>
+        </div>
+      </div>
+    </div>
+  );
+};

app/javascript/mastodon/features/ui/components/confirmation_modals/delete_list.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useHistory } from 'react-router';
+
+import { removeColumn } from 'mastodon/actions/columns';
+import { deleteList } from 'mastodon/actions/lists';
+import { useAppDispatch } from 'mastodon/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  deleteListTitle: {
+    id: 'confirmations.delete_list.title',
+    defaultMessage: 'Delete list?',
+  },
+  deleteListMessage: {
+    id: 'confirmations.delete_list.message',
+    defaultMessage: 'Are you sure you want to permanently delete this list?',
+  },
+  deleteListConfirm: {
+    id: 'confirmations.delete_list.confirm',
+    defaultMessage: 'Delete',
+  },
+});
+
+export const ConfirmDeleteListModal: React.FC<
+  {
+    listId: string;
+    columnId: string;
+  } & BaseConfirmationModalProps
+> = ({ listId, columnId, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const onConfirm = useCallback(() => {
+    dispatch(deleteList(listId));
+
+    if (columnId) {
+      dispatch(removeColumn(columnId));
+    } else {
+      history.push('/lists');
+    }
+  }, [dispatch, history, columnId, listId]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.deleteListTitle)}
+      message={intl.formatMessage(messages.deleteListMessage)}
+      confirm={intl.formatMessage(messages.deleteListConfirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};