Merge remote-tracking branch 'upstream/main'

app/javascript/entrypoints/embed.tsx

@@ -1,7 +1,7 @@
 import './public-path';
 import { createRoot } from 'react-dom/client';
 
-import { afterInitialRender } from 'mastodon/../hooks/useRenderSignal';
+import { afterInitialRender } from 'mastodon/hooks/useRenderSignal';
 
 import { start } from '../mastodon/common';
 import { Status } from '../mastodon/features/standalone/status';
@@ -60,6 +60,10 @@ window.addEventListener('message', (e) => {
 
   const data = e.data;
 
+  // Only set overflow to `hidden` once we got the expected `message` so the post can still be scrolled if
+  // embedded without parent Javascript support
+  document.body.style.overflow = 'hidden';
+
   // We use a timeout to allow for the React page to render before calculating the height
   afterInitialRender(() => {
     window.parent.postMessage(

app/javascript/entrypoints/public.tsx

@@ -119,7 +119,11 @@ function loaded() {
         formattedContent = dateFormat.format(datetime);
       }
 
-      content.title = formattedContent;
+      const timeGiven = content.dateTime.includes('T');
+      content.title = timeGiven
+        ? dateTimeFormat.format(datetime)
+        : dateFormat.format(datetime);
+
       content.textContent = formattedContent;
     });
 
@@ -230,62 +234,6 @@ function loaded() {
       }
     },
   );
-
-  Rails.delegate(
-    document,
-    'button.status__content__spoiler-link',
-    'click',
-    function () {
-      if (!(this instanceof HTMLButtonElement)) return;
-
-      const statusEl = this.parentNode?.parentNode;
-
-      if (
-        !(
-          statusEl instanceof HTMLDivElement &&
-          statusEl.classList.contains('.status__content')
-        )
-      )
-        return;
-
-      if (statusEl.dataset.spoiler === 'expanded') {
-        statusEl.dataset.spoiler = 'folded';
-        this.textContent = new IntlMessageFormat(
-          localeData['status.show_more'] ?? 'Show more',
-          locale,
-        ).format() as string;
-      } else {
-        statusEl.dataset.spoiler = 'expanded';
-        this.textContent = new IntlMessageFormat(
-          localeData['status.show_less'] ?? 'Show less',
-          locale,
-        ).format() as string;
-      }
-    },
-  );
-
-  document
-    .querySelectorAll<HTMLButtonElement>('button.status__content__spoiler-link')
-    .forEach((spoilerLink) => {
-      const statusEl = spoilerLink.parentNode?.parentNode;
-
-      if (
-        !(
-          statusEl instanceof HTMLDivElement &&
-          statusEl.classList.contains('.status__content')
-        )
-      )
-        return;
-
-      const message =
-        statusEl.dataset.spoiler === 'expanded'
-          ? (localeData['status.show_less'] ?? 'Show less')
-          : (localeData['status.show_more'] ?? 'Show more');
-      spoilerLink.textContent = new IntlMessageFormat(
-        message,
-        locale,
-      ).format() as string;
-    });
 }
 
 Rails.delegate(
@@ -439,6 +387,24 @@ Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
   });
 });
 
+Rails.delegate(document, '.rules-list button', 'click', ({ target }) => {
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+
+  const button = target.closest('button');
+
+  if (!button) {
+    return;
+  }
+
+  if (button.ariaExpanded === 'true') {
+    button.ariaExpanded = 'false';
+  } else {
+    button.ariaExpanded = 'true';
+  }
+});
+
 function main() {
   ready(loaded).catch((error: unknown) => {
     console.error(error);

app/javascript/mastodon/actions/accounts.js

@@ -142,6 +142,13 @@ export function fetchAccountFail(id, error) {
   };
 }
 
+/**
+ * @param {string} id
+ * @param {Object} options
+ * @param {boolean} [options.reblogs]
+ * @param {boolean} [options.notify]
+ * @returns {function(): void}
+ */
 export function followAccount(id, options = { reblogs: true }) {
   return (dispatch, getState) => {
     const alreadyFollowing = getState().getIn(['relationships', id, 'following']);

app/javascript/mastodon/actions/alerts.js

@@ -1,66 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-import { AxiosError } from 'axios';
-
-const messages = defineMessages({
-  unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
-  unexpectedMessage: { id: 'alert.unexpected.message', defaultMessage: 'An unexpected error occurred.' },
-  rateLimitedTitle: { id: 'alert.rate_limited.title', defaultMessage: 'Rate limited' },
-  rateLimitedMessage: { id: 'alert.rate_limited.message', defaultMessage: 'Please retry after {retry_time, time, medium}.' },
-});
-
-export const ALERT_SHOW    = 'ALERT_SHOW';
-export const ALERT_DISMISS = 'ALERT_DISMISS';
-export const ALERT_CLEAR   = 'ALERT_CLEAR';
-export const ALERT_NOOP    = 'ALERT_NOOP';
-
-export const dismissAlert = alert => ({
-  type: ALERT_DISMISS,
-  alert,
-});
-
-export const clearAlert = () => ({
-  type: ALERT_CLEAR,
-});
-
-export const showAlert = alert => ({
-  type: ALERT_SHOW,
-  alert,
-});
-
-export const showAlertForError = (error, skipNotFound = false) => {
-  if (error.response) {
-    const { data, status, statusText, headers } = error.response;
-
-    // Skip these errors as they are reflected in the UI
-    if (skipNotFound && (status === 404 || status === 410)) {
-      return { type: ALERT_NOOP };
-    }
-
-    // Rate limit errors
-    if (status === 429 && headers['x-ratelimit-reset']) {
-      return showAlert({
-        title: messages.rateLimitedTitle,
-        message: messages.rateLimitedMessage,
-        values: { 'retry_time': new Date(headers['x-ratelimit-reset']) },
-      });
-    }
-
-    return showAlert({
-      title: `${status}`,
-      message: data.error || statusText,
-    });
-  }
-
-  // An aborted request, e.g. due to reloading the browser window, it not really error
-  if (error.code === AxiosError.ECONNABORTED) {
-    return { type: ALERT_NOOP };
-  }
-
-  console.error(error);
-
-  return showAlert({
-    title: messages.unexpectedTitle,
-    message: messages.unexpectedMessage,
-  });
-};

app/javascript/mastodon/actions/alerts.ts

@@ -0,0 +1,90 @@
+import { defineMessages } from 'react-intl';
+import type { MessageDescriptor } from 'react-intl';
+
+import { AxiosError } from 'axios';
+import type { AxiosResponse } from 'axios';
+
+interface Alert {
+  title: string | MessageDescriptor;
+  message: string | MessageDescriptor;
+  values?: Record<string, string | number | Date>;
+}
+
+interface ApiErrorResponse {
+  error?: string;
+}
+
+const messages = defineMessages({
+  unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
+  unexpectedMessage: {
+    id: 'alert.unexpected.message',
+    defaultMessage: 'An unexpected error occurred.',
+  },
+  rateLimitedTitle: {
+    id: 'alert.rate_limited.title',
+    defaultMessage: 'Rate limited',
+  },
+  rateLimitedMessage: {
+    id: 'alert.rate_limited.message',
+    defaultMessage: 'Please retry after {retry_time, time, medium}.',
+  },
+});
+
+export const ALERT_SHOW = 'ALERT_SHOW';
+export const ALERT_DISMISS = 'ALERT_DISMISS';
+export const ALERT_CLEAR = 'ALERT_CLEAR';
+export const ALERT_NOOP = 'ALERT_NOOP';
+
+export const dismissAlert = (alert: Alert) => ({
+  type: ALERT_DISMISS,
+  alert,
+});
+
+export const clearAlert = () => ({
+  type: ALERT_CLEAR,
+});
+
+export const showAlert = (alert: Alert) => ({
+  type: ALERT_SHOW,
+  alert,
+});
+
+export const showAlertForError = (error: unknown, skipNotFound = false) => {
+  if (error instanceof AxiosError && error.response) {
+    const { status, statusText, headers } = error.response;
+    const { data } = error.response as AxiosResponse<ApiErrorResponse>;
+
+    // Skip these errors as they are reflected in the UI
+    if (skipNotFound && (status === 404 || status === 410)) {
+      return { type: ALERT_NOOP };
+    }
+
+    // Rate limit errors
+    if (status === 429 && headers['x-ratelimit-reset']) {
+      return showAlert({
+        title: messages.rateLimitedTitle,
+        message: messages.rateLimitedMessage,
+        values: {
+          retry_time: new Date(headers['x-ratelimit-reset'] as string),
+        },
+      });
+    }
+
+    return showAlert({
+      title: `${status}`,
+      message: data.error ?? statusText,
+    });
+  }
+
+  // An aborted request, e.g. due to reloading the browser window, it not really error
+  if (error instanceof AxiosError && error.code === AxiosError.ECONNABORTED) {
+    return { type: ALERT_NOOP };
+  }
+
+  console.error(error);
+
+  return showAlert({
+    title: messages.unexpectedTitle,
+    message: messages.unexpectedMessage,
+  });
+};

app/javascript/mastodon/actions/compose.js

@@ -414,7 +414,7 @@ export function initMediaEditModal(id) {
 
     dispatch(openModal({
       modalType: 'FOCAL_POINT',
-      modalProps: { id },
+      modalProps: { mediaId: id },
     }));
   };
 }

app/javascript/mastodon/actions/compose_typed.ts

@@ -0,0 +1,70 @@
+import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
+
+import { apiUpdateMedia } from 'mastodon/api/compose';
+import type { ApiMediaAttachmentJSON } from 'mastodon/api_types/media_attachments';
+import type { MediaAttachment } from 'mastodon/models/media_attachment';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+type SimulatedMediaAttachmentJSON = ApiMediaAttachmentJSON & {
+  unattached?: boolean;
+};
+
+const simulateModifiedApiResponse = (
+  media: MediaAttachment,
+  params: { description?: string; focus?: string },
+): SimulatedMediaAttachmentJSON => {
+  const [x, y] = (params.focus ?? '').split(',');
+
+  const data = {
+    ...media.toJS(),
+    ...params,
+    meta: {
+      focus: {
+        x: parseFloat(x ?? '0'),
+        y: parseFloat(y ?? '0'),
+      },
+    },
+  } as unknown as SimulatedMediaAttachmentJSON;
+
+  return data;
+};
+
+export const changeUploadCompose = createDataLoadingThunk(
+  'compose/changeUpload',
+  async (
+    {
+      id,
+      ...params
+    }: {
+      id: string;
+      description: string;
+      focus: string;
+    },
+    { getState },
+  ) => {
+    const media = (
+      (getState().compose as ImmutableMap<string, unknown>).get(
+        'media_attachments',
+      ) as ImmutableList<MediaAttachment>
+    ).find((item) => item.get('id') === id);
+
+    // Editing already-attached media is deferred to editing the post itself.
+    // For simplicity's sake, fake an API reply.
+    if (media && !media.get('unattached')) {
+      return new Promise<SimulatedMediaAttachmentJSON>((resolve) => {
+        resolve(simulateModifiedApiResponse(media, params));
+      });
+    }
+
+    return apiUpdateMedia(id, params);
+  },
+  (media: SimulatedMediaAttachmentJSON) => {
+    return {
+      media,
+      attached: typeof media.unattached !== 'undefined' && !media.unattached,
+    };
+  },
+  {
+    useLoadingBar: false,
+  },
+);

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

@@ -1,10 +1,12 @@
+import { createPollFromServerJSON } from 'mastodon/models/poll';
+
 import { importAccounts } from '../accounts_typed';
 
-import { normalizeStatus, normalizePoll } from './normalizer';
+import { normalizeStatus } from './normalizer';
+import { importPolls } from './polls';
 
 export const STATUS_IMPORT   = 'STATUS_IMPORT';
 export const STATUSES_IMPORT = 'STATUSES_IMPORT';
-export const POLLS_IMPORT    = 'POLLS_IMPORT';
 export const FILTERS_IMPORT  = 'FILTERS_IMPORT';
 
 function pushUnique(array, object) {
@@ -25,10 +27,6 @@ export function importFilters(filters) {
   return { type: FILTERS_IMPORT, filters };
 }
 
-export function importPolls(polls) {
-  return { type: POLLS_IMPORT, polls };
-}
-
 export function importFetchedAccount(account) {
   return importFetchedAccounts([account]);
 }
@@ -73,7 +71,7 @@ export function importFetchedStatuses(statuses) {
       }
 
       if (status.poll?.id) {
-        pushUnique(polls, normalizePoll(status.poll, getState().getIn(['polls', status.poll.id])));
+        pushUnique(polls, createPollFromServerJSON(status.poll, getState().polls.get(status.poll.id)));
       }
 
       if (status.card) {
@@ -83,15 +81,9 @@ export function importFetchedStatuses(statuses) {
 
     statuses.forEach(processStatus);
 
-    dispatch(importPolls(polls));
+    dispatch(importPolls({ polls }));
     dispatch(importFetchedAccounts(accounts));
     dispatch(importStatuses(normalStatuses));
     dispatch(importFilters(filters));
   };
 }
-
-export function importFetchedPoll(poll) {
-  return (dispatch, getState) => {
-    dispatch(importPolls([normalizePoll(poll, getState().getIn(['polls', poll.id]))]));
-  };
-}

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

@@ -1,15 +1,12 @@
 import escapeTextContentForBrowser from 'escape-html';
 
+import { makeEmojiMap } from 'mastodon/models/custom_emoji';
+
 import emojify from '../../features/emoji/emoji';
 import { expandSpoilers } from '../../initial_state';
 
 const domParser = new DOMParser();
 
-const makeEmojiMap = emojis => emojis.reduce((obj, emoji) => {
-  obj[`:${emoji.shortcode}:`] = emoji;
-  return obj;
-}, {});
-
 export function searchTextFromRawStatus (status) {
   const spoilerText   = status.spoiler_text || '';
   const searchContent = ([spoilerText, status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
@@ -112,38 +109,6 @@ export function normalizeStatusTranslation(translation, status) {
   return normalTranslation;
 }
 
-export function normalizePoll(poll, normalOldPoll) {
-  const normalPoll = { ...poll };
-  const emojiMap = makeEmojiMap(poll.emojis);
-
-  normalPoll.options = poll.options.map((option, index) => {
-    const normalOption = {
-      ...option,
-      voted: poll.own_votes && poll.own_votes.includes(index),
-      titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
-    };
-
-    if (normalOldPoll && normalOldPoll.getIn(['options', index, 'title']) === option.title) {
-      normalOption.translation = normalOldPoll.getIn(['options', index, 'translation']);
-    }
-
-    return normalOption;
-  });
-
-  return normalPoll;
-}
-
-export function normalizePollOptionTranslation(translation, poll) {
-  const emojiMap = makeEmojiMap(poll.get('emojis').toJS());
-
-  const normalTranslation = {
-    ...translation,
-    titleHtml: emojify(escapeTextContentForBrowser(translation.title), emojiMap),
-  };
-
-  return normalTranslation;
-}
-
 export function normalizeAnnouncement(announcement) {
   const normalAnnouncement = { ...announcement };
   const emojiMap = makeEmojiMap(normalAnnouncement.emojis);

app/javascript/mastodon/actions/importer/polls.ts

@@ -0,0 +1,7 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import type { Poll } from 'mastodon/models/poll';
+
+export const importPolls = createAction<{ polls: Poll[] }>(
+  'poll/importMultiple',
+);

app/javascript/mastodon/actions/lists.js

@@ -1,8 +1,5 @@
 import api from '../api';
 
-import { showAlertForError } from './alerts';
-import { importFetchedAccounts } from './importer';
-
 export const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
 export const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';
 export const LIST_FETCH_FAIL    = 'LIST_FETCH_FAIL';
@@ -11,45 +8,10 @@ export const LISTS_FETCH_REQUEST = 'LISTS_FETCH_REQUEST';
 export const LISTS_FETCH_SUCCESS = 'LISTS_FETCH_SUCCESS';
 export const LISTS_FETCH_FAIL    = 'LISTS_FETCH_FAIL';
 
-export const LIST_EDITOR_TITLE_CHANGE = 'LIST_EDITOR_TITLE_CHANGE';
-export const LIST_EDITOR_RESET        = 'LIST_EDITOR_RESET';
-export const LIST_EDITOR_SETUP        = 'LIST_EDITOR_SETUP';
-
-export const LIST_CREATE_REQUEST = 'LIST_CREATE_REQUEST';
-export const LIST_CREATE_SUCCESS = 'LIST_CREATE_SUCCESS';
-export const LIST_CREATE_FAIL    = 'LIST_CREATE_FAIL';
-
-export const LIST_UPDATE_REQUEST = 'LIST_UPDATE_REQUEST';
-export const LIST_UPDATE_SUCCESS = 'LIST_UPDATE_SUCCESS';
-export const LIST_UPDATE_FAIL    = 'LIST_UPDATE_FAIL';
-
 export const LIST_DELETE_REQUEST = 'LIST_DELETE_REQUEST';
 export const LIST_DELETE_SUCCESS = 'LIST_DELETE_SUCCESS';
 export const LIST_DELETE_FAIL    = 'LIST_DELETE_FAIL';
 
-export const LIST_ACCOUNTS_FETCH_REQUEST = 'LIST_ACCOUNTS_FETCH_REQUEST';
-export const LIST_ACCOUNTS_FETCH_SUCCESS = 'LIST_ACCOUNTS_FETCH_SUCCESS';
-export const LIST_ACCOUNTS_FETCH_FAIL    = 'LIST_ACCOUNTS_FETCH_FAIL';
-
-export const LIST_EDITOR_SUGGESTIONS_CHANGE = 'LIST_EDITOR_SUGGESTIONS_CHANGE';
-export const LIST_EDITOR_SUGGESTIONS_READY  = 'LIST_EDITOR_SUGGESTIONS_READY';
-export const LIST_EDITOR_SUGGESTIONS_CLEAR  = 'LIST_EDITOR_SUGGESTIONS_CLEAR';
-
-export const LIST_EDITOR_ADD_REQUEST = 'LIST_EDITOR_ADD_REQUEST';
-export const LIST_EDITOR_ADD_SUCCESS = 'LIST_EDITOR_ADD_SUCCESS';
-export const LIST_EDITOR_ADD_FAIL    = 'LIST_EDITOR_ADD_FAIL';
-
-export const LIST_EDITOR_REMOVE_REQUEST = 'LIST_EDITOR_REMOVE_REQUEST';
-export const LIST_EDITOR_REMOVE_SUCCESS = 'LIST_EDITOR_REMOVE_SUCCESS';
-export const LIST_EDITOR_REMOVE_FAIL    = 'LIST_EDITOR_REMOVE_FAIL';
-
-export const LIST_ADDER_RESET = 'LIST_ADDER_RESET';
-export const LIST_ADDER_SETUP = 'LIST_ADDER_SETUP';
-
-export const LIST_ADDER_LISTS_FETCH_REQUEST = 'LIST_ADDER_LISTS_FETCH_REQUEST';
-export const LIST_ADDER_LISTS_FETCH_SUCCESS = 'LIST_ADDER_LISTS_FETCH_SUCCESS';
-export const LIST_ADDER_LISTS_FETCH_FAIL    = 'LIST_ADDER_LISTS_FETCH_FAIL';
-
 export const fetchList = id => (dispatch, getState) => {
   if (getState().getIn(['lists', id])) {
     return;
@@ -100,89 +62,6 @@ export const fetchListsFail = error => ({
   error,
 });
 
-export const submitListEditor = shouldReset => (dispatch, getState) => {
-  const listId = getState().getIn(['listEditor', 'listId']);
-  const title  = getState().getIn(['listEditor', 'title']);
-
-  if (listId === null) {
-    dispatch(createList(title, shouldReset));
-  } else {
-    dispatch(updateList(listId, title, shouldReset));
-  }
-};
-
-export const setupListEditor = listId => (dispatch, getState) => {
-  dispatch({
-    type: LIST_EDITOR_SETUP,
-    list: getState().getIn(['lists', listId]),
-  });
-
-  dispatch(fetchListAccounts(listId));
-};
-
-export const changeListEditorTitle = value => ({
-  type: LIST_EDITOR_TITLE_CHANGE,
-  value,
-});
-
-export const createList = (title, shouldReset) => (dispatch) => {
-  dispatch(createListRequest());
-
-  api().post('/api/v1/lists', { title }).then(({ data }) => {
-    dispatch(createListSuccess(data));
-
-    if (shouldReset) {
-      dispatch(resetListEditor());
-    }
-  }).catch(err => dispatch(createListFail(err)));
-};
-
-export const createListRequest = () => ({
-  type: LIST_CREATE_REQUEST,
-});
-
-export const createListSuccess = list => ({
-  type: LIST_CREATE_SUCCESS,
-  list,
-});
-
-export const createListFail = error => ({
-  type: LIST_CREATE_FAIL,
-  error,
-});
-
-export const updateList = (id, title, shouldReset, isExclusive, replies_policy) => (dispatch) => {
-  dispatch(updateListRequest(id));
-
-  api().put(`/api/v1/lists/${id}`, { title, replies_policy, exclusive: typeof isExclusive === 'undefined' ? undefined : !!isExclusive }).then(({ data }) => {
-    dispatch(updateListSuccess(data));
-
-    if (shouldReset) {
-      dispatch(resetListEditor());
-    }
-  }).catch(err => dispatch(updateListFail(id, err)));
-};
-
-export const updateListRequest = id => ({
-  type: LIST_UPDATE_REQUEST,
-  id,
-});
-
-export const updateListSuccess = list => ({
-  type: LIST_UPDATE_SUCCESS,
-  list,
-});
-
-export const updateListFail = (id, error) => ({
-  type: LIST_UPDATE_FAIL,
-  id,
-  error,
-});
-
-export const resetListEditor = () => ({
-  type: LIST_EDITOR_RESET,
-});
-
 export const deleteList = id => (dispatch) => {
   dispatch(deleteListRequest(id));
 
@@ -206,167 +85,3 @@ export const deleteListFail = (id, error) => ({
   id,
   error,
 });
-
-export const fetchListAccounts = listId => (dispatch) => {
-  dispatch(fetchListAccountsRequest(listId));
-
-  api().get(`/api/v1/lists/${listId}/accounts`, { params: { limit: 0 } }).then(({ data }) => {
-    dispatch(importFetchedAccounts(data));
-    dispatch(fetchListAccountsSuccess(listId, data));
-  }).catch(err => dispatch(fetchListAccountsFail(listId, err)));
-};
-
-export const fetchListAccountsRequest = id => ({
-  type: LIST_ACCOUNTS_FETCH_REQUEST,
-  id,
-});
-
-export const fetchListAccountsSuccess = (id, accounts, next) => ({
-  type: LIST_ACCOUNTS_FETCH_SUCCESS,
-  id,
-  accounts,
-  next,
-});
-
-export const fetchListAccountsFail = (id, error) => ({
-  type: LIST_ACCOUNTS_FETCH_FAIL,
-  id,
-  error,
-});
-
-export const fetchListSuggestions = q => (dispatch) => {
-  const params = {
-    q,
-    resolve: false,
-    limit: 4,
-    following: true,
-  };
-
-  api().get('/api/v1/accounts/search', { params }).then(({ data }) => {
-    dispatch(importFetchedAccounts(data));
-    dispatch(fetchListSuggestionsReady(q, data));
-  }).catch(error => dispatch(showAlertForError(error)));
-};
-
-export const fetchListSuggestionsReady = (query, accounts) => ({
-  type: LIST_EDITOR_SUGGESTIONS_READY,
-  query,
-  accounts,
-});
-
-export const clearListSuggestions = () => ({
-  type: LIST_EDITOR_SUGGESTIONS_CLEAR,
-});
-
-export const changeListSuggestions = value => ({
-  type: LIST_EDITOR_SUGGESTIONS_CHANGE,
-  value,
-});
-
-export const addToListEditor = accountId => (dispatch, getState) => {
-  dispatch(addToList(getState().getIn(['listEditor', 'listId']), accountId));
-};
-
-export const addToList = (listId, accountId) => (dispatch) => {
-  dispatch(addToListRequest(listId, accountId));
-
-  api().post(`/api/v1/lists/${listId}/accounts`, { account_ids: [accountId] })
-    .then(() => dispatch(addToListSuccess(listId, accountId)))
-    .catch(err => dispatch(addToListFail(listId, accountId, err)));
-};
-
-export const addToListRequest = (listId, accountId) => ({
-  type: LIST_EDITOR_ADD_REQUEST,
-  listId,
-  accountId,
-});
-
-export const addToListSuccess = (listId, accountId) => ({
-  type: LIST_EDITOR_ADD_SUCCESS,
-  listId,
-  accountId,
-});
-
-export const addToListFail = (listId, accountId, error) => ({
-  type: LIST_EDITOR_ADD_FAIL,
-  listId,
-  accountId,
-  error,
-});
-
-export const removeFromListEditor = accountId => (dispatch, getState) => {
-  dispatch(removeFromList(getState().getIn(['listEditor', 'listId']), accountId));
-};
-
-export const removeFromList = (listId, accountId) => (dispatch) => {
-  dispatch(removeFromListRequest(listId, accountId));
-
-  api().delete(`/api/v1/lists/${listId}/accounts`, { params: { account_ids: [accountId] } })
-    .then(() => dispatch(removeFromListSuccess(listId, accountId)))
-    .catch(err => dispatch(removeFromListFail(listId, accountId, err)));
-};
-
-export const removeFromListRequest = (listId, accountId) => ({
-  type: LIST_EDITOR_REMOVE_REQUEST,
-  listId,
-  accountId,
-});
-
-export const removeFromListSuccess = (listId, accountId) => ({
-  type: LIST_EDITOR_REMOVE_SUCCESS,
-  listId,
-  accountId,
-});
-
-export const removeFromListFail = (listId, accountId, error) => ({
-  type: LIST_EDITOR_REMOVE_FAIL,
-  listId,
-  accountId,
-  error,
-});
-
-export const resetListAdder = () => ({
-  type: LIST_ADDER_RESET,
-});
-
-export const setupListAdder = accountId => (dispatch, getState) => {
-  dispatch({
-    type: LIST_ADDER_SETUP,
-    account: getState().getIn(['accounts', accountId]),
-  });
-  dispatch(fetchLists());
-  dispatch(fetchAccountLists(accountId));
-};
-
-export const fetchAccountLists = accountId => (dispatch) => {
-  dispatch(fetchAccountListsRequest(accountId));
-
-  api().get(`/api/v1/accounts/${accountId}/lists`)
-    .then(({ data }) => dispatch(fetchAccountListsSuccess(accountId, data)))
-    .catch(err => dispatch(fetchAccountListsFail(accountId, err)));
-};
-
-export const fetchAccountListsRequest = id => ({
-  type:LIST_ADDER_LISTS_FETCH_REQUEST,
-  id,
-});
-
-export const fetchAccountListsSuccess = (id, lists) => ({
-  type: LIST_ADDER_LISTS_FETCH_SUCCESS,
-  id,
-  lists,
-});
-
-export const fetchAccountListsFail = (id, err) => ({
-  type: LIST_ADDER_LISTS_FETCH_FAIL,
-  id,
-  err,
-});
-
-export const addToListAdder = listId => (dispatch, getState) => {
-  dispatch(addToList(listId, getState().getIn(['listAdder', 'accountId'])));
-};
-
-export const removeFromListAdder = listId => (dispatch, getState) => {
-  dispatch(removeFromList(listId, getState().getIn(['listAdder', 'accountId'])));
-};

app/javascript/mastodon/actions/lists_typed.ts

@@ -0,0 +1,13 @@
+import { apiCreate, apiUpdate } from 'mastodon/api/lists';
+import type { List } from 'mastodon/models/list';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+export const createList = createDataLoadingThunk(
+  'list/create',
+  (list: Partial<List>) => apiCreate(list),
+);
+
+export const updateList = createDataLoadingThunk(
+  'list/update',
+  (list: Partial<List>) => apiUpdate(list),
+);

app/javascript/mastodon/actions/modal.ts

@@ -9,6 +9,7 @@ export type ModalType = keyof typeof MODAL_COMPONENTS;
 interface OpenModalPayload {
   modalType: ModalType;
   modalProps: ModalProps;
+  previousModalProps?: ModalProps;
 }
 export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');
 

app/javascript/mastodon/actions/notification_groups.ts

@@ -141,6 +141,9 @@ export const pollRecentNotifications = createDataLoadingThunk(
 
     return { notifications };
   },
+  {
+    useLoadingBar: false,
+  },
 );
 
 export const processNewNotificationForGroups = createAppAsyncThunk(
@@ -152,7 +155,7 @@ export const processNewNotificationForGroups = createAppAsyncThunk(
 
     const showInColumn =
       activeFilter === 'all'
-        ? notificationShows[notification.type]
+        ? notificationShows[notification.type] !== false
         : activeFilter === notification.type;
 
     if (!showInColumn) return;

app/javascript/mastodon/actions/notifications.js

@@ -1,69 +1,31 @@
 import { IntlMessageFormat } from 'intl-messageformat';
 import { defineMessages } from 'react-intl';
 
-import { List as ImmutableList } from 'immutable';
-
-import { compareId } from 'mastodon/compare_id';
-import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
-
-import api, { getLinks } from '../api';
 import { unescapeHTML } from '../utils/html';
 import { requestNotificationPermission } from '../utils/notifications';
 
 import { fetchFollowRequests } from './accounts';
 import {
   importFetchedAccount,
-  importFetchedAccounts,
-  importFetchedStatus,
-  importFetchedStatuses,
 } from './importer';
 import { submitMarkers } from './markers';
 import { notificationsUpdate } from "./notifications_typed";
 import { register as registerPushNotifications } from './push_notifications';
-import { saveSettings } from './settings';
 
 export * from "./notifications_typed";
 
-export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
-
-export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST';
-export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
-export const NOTIFICATIONS_EXPAND_FAIL    = 'NOTIFICATIONS_EXPAND_FAIL';
-
 export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
 
-export const NOTIFICATIONS_SCROLL_TOP   = 'NOTIFICATIONS_SCROLL_TOP';
-export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';
-
-export const NOTIFICATIONS_MOUNT   = 'NOTIFICATIONS_MOUNT';
-export const NOTIFICATIONS_UNMOUNT = 'NOTIFICATIONS_UNMOUNT';
-
-export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
-
 export const NOTIFICATIONS_SET_BROWSER_SUPPORT    = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
 export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
 
-export const NOTIFICATION_REQUESTS_ACCEPT_REQUEST = 'NOTIFICATION_REQUESTS_ACCEPT_REQUEST';
-export const NOTIFICATION_REQUESTS_ACCEPT_SUCCESS = 'NOTIFICATION_REQUESTS_ACCEPT_SUCCESS';
-export const NOTIFICATION_REQUESTS_ACCEPT_FAIL    = 'NOTIFICATION_REQUESTS_ACCEPT_FAIL';
-
-export const NOTIFICATION_REQUESTS_DISMISS_REQUEST = 'NOTIFICATION_REQUESTS_DISMISS_REQUEST';
-export const NOTIFICATION_REQUESTS_DISMISS_SUCCESS = 'NOTIFICATION_REQUESTS_DISMISS_SUCCESS';
-export const NOTIFICATION_REQUESTS_DISMISS_FAIL    = 'NOTIFICATION_REQUESTS_DISMISS_FAIL';
-
 defineMessages({
   mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
   group: { id: 'notifications.group', defaultMessage: '{count} notifications' },
 });
 
-export const loadPending = () => ({
-  type: NOTIFICATIONS_LOAD_PENDING,
-});
-
 export function updateNotifications(notification, intlMessages, intlLocale) {
   return (dispatch, getState) => {
-    const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
-    const showInColumn = activeFilter === 'all' ? getState().getIn(['settings', 'notifications', 'shows', notification.type], true) : activeFilter === notification.type;
     const showAlert    = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true);
     const playSound    = getState().getIn(['settings', 'notifications', 'sounds', notification.type], true);
 
@@ -85,25 +47,9 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
 
     dispatch(submitMarkers());
 
-    if (showInColumn) {
-      dispatch(importFetchedAccount(notification.account));
-
-      if (notification.status) {
-        dispatch(importFetchedStatus(notification.status));
-      }
-
-      if (notification.report) {
-        dispatch(importFetchedAccount(notification.report.target_account));
-      }
-
-
-      dispatch(notificationsUpdate({ notification, preferPendingItems, playSound: playSound && !filtered}));
-    } else if (playSound && !filtered) {
-      dispatch({
-        type: NOTIFICATIONS_UPDATE_NOOP,
-        meta: { sound: 'boop' },
-      });
-    }
+    // `notificationsUpdate` is still used in `user_lists` and `relationships` reducers
+    dispatch(importFetchedAccount(notification.account));
+    dispatch(notificationsUpdate({ notification, playSound: playSound && !filtered}));
 
     // Desktop notifications
     if (typeof window.Notification !== 'undefined' && showAlert && !filtered) {
@@ -120,141 +66,8 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
   };
 }
 
-const excludeTypesFromSettings = state => state.getIn(['settings', 'notifications', 'shows']).filter(enabled => !enabled).keySeq().toJS();
-
-const excludeTypesFromFilter = filter => {
-  const allTypes = ImmutableList([
-    'follow',
-    'follow_request',
-    'favourite',
-    'reblog',
-    'mention',
-    'poll',
-    'status',
-    'update',
-    'admin.sign_up',
-    'admin.report',
-  ]);
-
-  return allTypes.filterNot(item => item === filter).toJS();
-};
-
 const noOp = () => {};
 
-let expandNotificationsController = new AbortController();
-
-export function expandNotifications({ maxId = undefined, forceLoad = false }) {
-  return async (dispatch, getState) => {
-    const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
-    const notifications = getState().get('notifications');
-    const isLoadingMore = !!maxId;
-
-    if (notifications.get('isLoading')) {
-      if (forceLoad) {
-        expandNotificationsController.abort();
-        expandNotificationsController = new AbortController();
-      } else {
-        return;
-      }
-    }
-
-    const params = {
-      max_id: maxId,
-      exclude_types: activeFilter === 'all'
-        ? excludeTypesFromSettings(getState())
-        : excludeTypesFromFilter(activeFilter),
-    };
-
-    if (!params.max_id && (notifications.get('items', ImmutableList()).size + notifications.get('pendingItems', ImmutableList()).size) > 0) {
-      const a = notifications.getIn(['pendingItems', 0, 'id']);
-      const b = notifications.getIn(['items', 0, 'id']);
-
-      if (a && b && compareId(a, b) > 0) {
-        params.since_id = a;
-      } else {
-        params.since_id = b || a;
-      }
-    }
-
-    const isLoadingRecent = !!params.since_id;
-
-    dispatch(expandNotificationsRequest(isLoadingMore));
-
-    try {
-      const response = await api().get('/api/v1/notifications', { params, signal: expandNotificationsController.signal });
-      const next = getLinks(response).refs.find(link => link.rel === 'next');
-
-      dispatch(importFetchedAccounts(response.data.map(item => item.account)));
-      dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
-      dispatch(importFetchedAccounts(response.data.filter(item => item.report).map(item => item.report.target_account)));
-
-      dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore, isLoadingRecent, isLoadingRecent && preferPendingItems));
-      dispatch(submitMarkers());
-    } catch(error) {
-      dispatch(expandNotificationsFail(error, isLoadingMore));
-    }
-  };
-}
-
-export function expandNotificationsRequest(isLoadingMore) {
-  return {
-    type: NOTIFICATIONS_EXPAND_REQUEST,
-    skipLoading: !isLoadingMore,
-  };
-}
-
-export function expandNotificationsSuccess(notifications, next, isLoadingMore, isLoadingRecent, usePendingItems) {
-  return {
-    type: NOTIFICATIONS_EXPAND_SUCCESS,
-    notifications,
-    next,
-    isLoadingRecent: isLoadingRecent,
-    usePendingItems,
-    skipLoading: !isLoadingMore,
-  };
-}
-
-export function expandNotificationsFail(error, isLoadingMore) {
-  return {
-    type: NOTIFICATIONS_EXPAND_FAIL,
-    error,
-    skipLoading: !isLoadingMore,
-    skipAlert: !isLoadingMore || error.name === 'AbortError',
-  };
-}
-
-export function scrollTopNotifications(top) {
-  return {
-    type: NOTIFICATIONS_SCROLL_TOP,
-    top,
-  };
-}
-
-export function setFilter (filterType) {
-  return dispatch => {
-    dispatch({
-      type: NOTIFICATIONS_FILTER_SET,
-      path: ['notifications', 'quickFilter', 'active'],
-      value: filterType,
-    });
-    dispatch(expandNotifications({ forceLoad: true }));
-    dispatch(saveSettings());
-  };
-}
-
-export const mountNotifications = () => ({
-  type: NOTIFICATIONS_MOUNT,
-});
-
-export const unmountNotifications = () => ({
-  type: NOTIFICATIONS_UNMOUNT,
-});
-
-
-export const markNotificationsAsRead = () => ({
-  type: NOTIFICATIONS_MARK_AS_READ,
-});
-
 // Browser support
 export function setupBrowserNotifications() {
   return dispatch => {

app/javascript/mastodon/actions/notifications_migration.tsx

@@ -1,10 +0,0 @@
-import { createAppAsyncThunk } from 'mastodon/store';
-
-import { fetchNotifications } from './notification_groups';
-
-export const initializeNotifications = createAppAsyncThunk(
-  'notifications/initialize',
-  (_, { dispatch }) => {
-    void dispatch(fetchNotifications());
-  },
-);

app/javascript/mastodon/actions/notifications_typed.ts

@@ -9,7 +9,6 @@ export const notificationsUpdate = createAction(
     ...args
   }: {
     notification: ApiNotificationJSON;
-    usePendingItems: boolean;
     playSound: boolean;
   }) => ({
     payload: args,

app/javascript/mastodon/actions/polls.js

@@ -1,61 +0,0 @@
-import api from '../api';
-
-import { importFetchedPoll } from './importer';
-
-export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';
-export const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS';
-export const POLL_VOTE_FAIL    = 'POLL_VOTE_FAIL';
-
-export const POLL_FETCH_REQUEST = 'POLL_FETCH_REQUEST';
-export const POLL_FETCH_SUCCESS = 'POLL_FETCH_SUCCESS';
-export const POLL_FETCH_FAIL    = 'POLL_FETCH_FAIL';
-
-export const vote = (pollId, choices) => (dispatch) => {
-  dispatch(voteRequest());
-
-  api().post(`/api/v1/polls/${pollId}/votes`, { choices })
-    .then(({ data }) => {
-      dispatch(importFetchedPoll(data));
-      dispatch(voteSuccess(data));
-    })
-    .catch(err => dispatch(voteFail(err)));
-};
-
-export const fetchPoll = pollId => (dispatch) => {
-  dispatch(fetchPollRequest());
-
-  api().get(`/api/v1/polls/${pollId}`)
-    .then(({ data }) => {
-      dispatch(importFetchedPoll(data));
-      dispatch(fetchPollSuccess(data));
-    })
-    .catch(err => dispatch(fetchPollFail(err)));
-};
-
-export const voteRequest = () => ({
-  type: POLL_VOTE_REQUEST,
-});
-
-export const voteSuccess = poll => ({
-  type: POLL_VOTE_SUCCESS,
-  poll,
-});
-
-export const voteFail = error => ({
-  type: POLL_VOTE_FAIL,
-  error,
-});
-
-export const fetchPollRequest = () => ({
-  type: POLL_FETCH_REQUEST,
-});
-
-export const fetchPollSuccess = poll => ({
-  type: POLL_FETCH_SUCCESS,
-  poll,
-});
-
-export const fetchPollFail = error => ({
-  type: POLL_FETCH_FAIL,
-  error,
-});

app/javascript/mastodon/actions/polls.ts

@@ -0,0 +1,40 @@
+import { apiGetPoll, apiPollVote } from 'mastodon/api/polls';
+import type { ApiPollJSON } from 'mastodon/api_types/polls';
+import { createPollFromServerJSON } from 'mastodon/models/poll';
+import {
+  createAppAsyncThunk,
+  createDataLoadingThunk,
+} from 'mastodon/store/typed_functions';
+
+import { importPolls } from './importer/polls';
+
+export const importFetchedPoll = createAppAsyncThunk(
+  'poll/importFetched',
+  (args: { poll: ApiPollJSON }, { dispatch, getState }) => {
+    const { poll } = args;
+
+    dispatch(
+      importPolls({
+        polls: [createPollFromServerJSON(poll, getState().polls.get(poll.id))],
+      }),
+    );
+  },
+);
+
+export const vote = createDataLoadingThunk(
+  'poll/vote',
+  ({ pollId, choices }: { pollId: string; choices: string[] }) =>
+    apiPollVote(pollId, choices),
+  async (poll, { dispatch, discardLoadData }) => {
+    await dispatch(importFetchedPoll({ poll }));
+    return discardLoadData;
+  },
+);
+
+export const fetchPoll = createDataLoadingThunk(
+  'poll/fetch',
+  ({ pollId }: { pollId: string }) => apiGetPoll(pollId),
+  async (poll, { dispatch }) => {
+    await dispatch(importFetchedPoll({ poll }));
+  },
+);

app/javascript/mastodon/actions/push_notifications/registerer.js

@@ -33,7 +33,7 @@ const unsubscribe = ({ registration, subscription }) =>
   subscription ? subscription.unsubscribe().then(() => registration) : registration;
 
 const sendSubscriptionToBackend = (subscription) => {
-  const params = { subscription };
+  const params = { subscription: { ...subscription.toJSON(), standard: true } };
 
   if (me) {
     const data = pushNotificationsSetting.get(me);

app/javascript/mastodon/actions/search.js

@@ -1,215 +0,0 @@
-import { fromJS } from 'immutable';
-
-import { searchHistory } from 'mastodon/settings';
-
-import api from '../api';
-
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatuses } from './importer';
-
-export const SEARCH_CHANGE = 'SEARCH_CHANGE';
-export const SEARCH_CLEAR  = 'SEARCH_CLEAR';
-export const SEARCH_SHOW   = 'SEARCH_SHOW';
-
-export const SEARCH_FETCH_REQUEST = 'SEARCH_FETCH_REQUEST';
-export const SEARCH_FETCH_SUCCESS = 'SEARCH_FETCH_SUCCESS';
-export const SEARCH_FETCH_FAIL    = 'SEARCH_FETCH_FAIL';
-
-export const SEARCH_EXPAND_REQUEST = 'SEARCH_EXPAND_REQUEST';
-export const SEARCH_EXPAND_SUCCESS = 'SEARCH_EXPAND_SUCCESS';
-export const SEARCH_EXPAND_FAIL    = 'SEARCH_EXPAND_FAIL';
-
-export const SEARCH_HISTORY_UPDATE  = 'SEARCH_HISTORY_UPDATE';
-
-export function changeSearch(value) {
-  return {
-    type: SEARCH_CHANGE,
-    value,
-  };
-}
-
-export function clearSearch() {
-  return {
-    type: SEARCH_CLEAR,
-  };
-}
-
-export function submitSearch(type) {
-  return (dispatch, getState) => {
-    const value    = getState().getIn(['search', 'value']);
-    const signedIn = !!getState().getIn(['meta', 'me']);
-
-    if (value.length === 0) {
-      dispatch(fetchSearchSuccess({ accounts: [], statuses: [], hashtags: [] }, '', type));
-      return;
-    }
-
-    dispatch(fetchSearchRequest(type));
-
-    api().get('/api/v2/search', {
-      params: {
-        q: value,
-        resolve: signedIn,
-        limit: 11,
-        type,
-      },
-    }).then(response => {
-      if (response.data.accounts) {
-        dispatch(importFetchedAccounts(response.data.accounts));
-      }
-
-      if (response.data.statuses) {
-        dispatch(importFetchedStatuses(response.data.statuses));
-      }
-
-      dispatch(fetchSearchSuccess(response.data, value, type));
-      dispatch(fetchRelationships(response.data.accounts.map(item => item.id)));
-    }).catch(error => {
-      dispatch(fetchSearchFail(error));
-    });
-  };
-}
-
-export function fetchSearchRequest(searchType) {
-  return {
-    type: SEARCH_FETCH_REQUEST,
-    searchType,
-  };
-}
-
-export function fetchSearchSuccess(results, searchTerm, searchType) {
-  return {
-    type: SEARCH_FETCH_SUCCESS,
-    results,
-    searchType,
-    searchTerm,
-  };
-}
-
-export function fetchSearchFail(error) {
-  return {
-    type: SEARCH_FETCH_FAIL,
-    error,
-  };
-}
-
-export const expandSearch = type => (dispatch, getState) => {
-  const value  = getState().getIn(['search', 'value']);
-  const offset = getState().getIn(['search', 'results', type]).size - 1;
-
-  dispatch(expandSearchRequest(type));
-
-  api().get('/api/v2/search', {
-    params: {
-      q: value,
-      type,
-      offset,
-      limit: 11,
-    },
-  }).then(({ data }) => {
-    if (data.accounts) {
-      dispatch(importFetchedAccounts(data.accounts));
-    }
-
-    if (data.statuses) {
-      dispatch(importFetchedStatuses(data.statuses));
-    }
-
-    dispatch(expandSearchSuccess(data, value, type));
-    dispatch(fetchRelationships(data.accounts.map(item => item.id)));
-  }).catch(error => {
-    dispatch(expandSearchFail(error));
-  });
-};
-
-export const expandSearchRequest = (searchType) => ({
-  type: SEARCH_EXPAND_REQUEST,
-  searchType,
-});
-
-export const expandSearchSuccess = (results, searchTerm, searchType) => ({
-  type: SEARCH_EXPAND_SUCCESS,
-  results,
-  searchTerm,
-  searchType,
-});
-
-export const expandSearchFail = error => ({
-  type: SEARCH_EXPAND_FAIL,
-  error,
-});
-
-export const showSearch = () => ({
-  type: SEARCH_SHOW,
-});
-
-export const openURL = (value, history, onFailure) => (dispatch, getState) => {
-  const signedIn = !!getState().getIn(['meta', 'me']);
-
-  if (!signedIn) {
-    if (onFailure) {
-      onFailure();
-    }
-
-    return;
-  }
-
-  dispatch(fetchSearchRequest());
-
-  api().get('/api/v2/search', { params: { q: value, resolve: true } }).then(response => {
-    if (response.data.accounts?.length > 0) {
-      dispatch(importFetchedAccounts(response.data.accounts));
-      history.push(`/@${response.data.accounts[0].acct}`);
-    } else if (response.data.statuses?.length > 0) {
-      dispatch(importFetchedStatuses(response.data.statuses));
-      history.push(`/@${response.data.statuses[0].account.acct}/${response.data.statuses[0].id}`);
-    } else if (onFailure) {
-      onFailure();
-    }
-
-    dispatch(fetchSearchSuccess(response.data, value));
-  }).catch(err => {
-    dispatch(fetchSearchFail(err));
-
-    if (onFailure) {
-      onFailure();
-    }
-  });
-};
-
-export const clickSearchResult = (q, type) => (dispatch, getState) => {
-  const previous = getState().getIn(['search', 'recent']);
-
-  if (previous.some(x => x.get('q') === q && x.get('type') === type)) {
-    return;
-  }
-
-  const me = getState().getIn(['meta', 'me']);
-  const current = previous.add(fromJS({ type, q })).takeLast(4);
-
-  searchHistory.set(me, current.toJS());
-  dispatch(updateSearchHistory(current));
-};
-
-export const forgetSearchResult = q => (dispatch, getState) => {
-  const previous = getState().getIn(['search', 'recent']);
-  const me = getState().getIn(['meta', 'me']);
-  const current = previous.filterNot(result => result.get('q') === q);
-
-  searchHistory.set(me, current.toJS());
-  dispatch(updateSearchHistory(current));
-};
-
-export const updateSearchHistory = recent => ({
-  type: SEARCH_HISTORY_UPDATE,
-  recent,
-});
-
-export const hydrateSearch = () => (dispatch, getState) => {
-  const me = getState().getIn(['meta', 'me']);
-  const history = searchHistory.get(me);
-
-  if (history !== null) {
-    dispatch(updateSearchHistory(history));
-  }
-};

app/javascript/mastodon/actions/search.ts

@@ -0,0 +1,148 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import { apiGetSearch } from 'mastodon/api/search';
+import type { ApiSearchType } from 'mastodon/api_types/search';
+import type {
+  RecentSearch,
+  SearchType as RecentSearchType,
+} from 'mastodon/models/search';
+import { searchHistory } from 'mastodon/settings';
+import {
+  createDataLoadingThunk,
+  createAppAsyncThunk,
+} from 'mastodon/store/typed_functions';
+
+import { fetchRelationships } from './accounts';
+import { importFetchedAccounts, importFetchedStatuses } from './importer';
+
+export const SEARCH_HISTORY_UPDATE = 'SEARCH_HISTORY_UPDATE';
+
+export const submitSearch = createDataLoadingThunk(
+  'search/submit',
+  async ({ q, type }: { q: string; type?: ApiSearchType }, { getState }) => {
+    const signedIn = !!getState().meta.get('me');
+
+    return apiGetSearch({
+      q,
+      type,
+      resolve: signedIn,
+      limit: 11,
+    });
+  },
+  (data, { dispatch }) => {
+    if (data.accounts.length > 0) {
+      dispatch(importFetchedAccounts(data.accounts));
+      dispatch(fetchRelationships(data.accounts.map((account) => account.id)));
+    }
+
+    if (data.statuses.length > 0) {
+      dispatch(importFetchedStatuses(data.statuses));
+    }
+
+    return data;
+  },
+  {
+    useLoadingBar: false,
+  },
+);
+
+export const expandSearch = createDataLoadingThunk(
+  'search/expand',
+  async ({ type }: { type: ApiSearchType }, { getState }) => {
+    const q = getState().search.q;
+    const results = getState().search.results;
+    const offset = results?.[type].length;
+
+    return apiGetSearch({
+      q,
+      type,
+      limit: 10,
+      offset,
+    });
+  },
+  (data, { dispatch }) => {
+    if (data.accounts.length > 0) {
+      dispatch(importFetchedAccounts(data.accounts));
+      dispatch(fetchRelationships(data.accounts.map((account) => account.id)));
+    }
+
+    if (data.statuses.length > 0) {
+      dispatch(importFetchedStatuses(data.statuses));
+    }
+
+    return data;
+  },
+  {
+    useLoadingBar: true,
+  },
+);
+
+export const openURL = createDataLoadingThunk(
+  'search/openURL',
+  ({ url }: { url: string }) =>
+    apiGetSearch({
+      q: url,
+      resolve: true,
+      limit: 1,
+    }),
+  (data, { dispatch }) => {
+    if (data.accounts.length > 0) {
+      dispatch(importFetchedAccounts(data.accounts));
+    } else if (data.statuses.length > 0) {
+      dispatch(importFetchedStatuses(data.statuses));
+    }
+
+    return data;
+  },
+  {
+    useLoadingBar: true,
+  },
+);
+
+export const clickSearchResult = createAppAsyncThunk(
+  'search/clickResult',
+  (
+    { q, type }: { q: string; type?: RecentSearchType },
+    { dispatch, getState },
+  ) => {
+    const previous = getState().search.recent;
+
+    if (previous.some((x) => x.q === q && x.type === type)) {
+      return;
+    }
+
+    const me = getState().meta.get('me') as string;
+    const current = [{ type, q }, ...previous].slice(0, 4);
+
+    searchHistory.set(me, current);
+    dispatch(updateSearchHistory(current));
+  },
+);
+
+export const forgetSearchResult = createAppAsyncThunk(
+  'search/forgetResult',
+  (q: string, { dispatch, getState }) => {
+    const previous = getState().search.recent;
+    const me = getState().meta.get('me') as string;
+    const current = previous.filter((result) => result.q !== q);
+
+    searchHistory.set(me, current);
+    dispatch(updateSearchHistory(current));
+  },
+);
+
+export const updateSearchHistory = createAction<RecentSearch[]>(
+  'search/updateHistory',
+);
+
+export const hydrateSearch = createAppAsyncThunk(
+  'search/hydrate',
+  (_args, { dispatch, getState }) => {
+    const me = getState().meta.get('me') as string;
+    const history = searchHistory.get(me) as RecentSearch[] | null;
+
+    if (history !== null) {
+      dispatch(updateSearchHistory(history));
+    }
+  },
+);

app/javascript/mastodon/actions/settings.js

@@ -29,7 +29,7 @@ const debouncedSave = debounce((dispatch, getState) => {
   api().put('/api/web/settings', { data })
     .then(() => dispatch({ type: SETTING_SAVE }))
     .catch(error => dispatch(showAlertForError(error)));
-}, 5000, { trailing: true });
+}, 2000, { leading: true, trailing: true });
 
 export function saveSettings() {
   return (dispatch, getState) => debouncedSave(dispatch, getState);

app/javascript/mastodon/actions/statuses.js

@@ -138,7 +138,7 @@ export function deleteStatus(id, withRedraft = false) {
 
     dispatch(deleteStatusRequest(id));
 
-    api().delete(`/api/v1/statuses/${id}`).then(response => {
+    api().delete(`/api/v1/statuses/${id}`, { params: { delete_media: !withRedraft } }).then(response => {
       dispatch(deleteStatusSuccess(id));
       dispatch(deleteFromTimelines(id));
       dispatch(importFetchedAccount(response.data.account));

app/javascript/mastodon/actions/store.js

@@ -1,4 +1,4 @@
-import { Iterable, fromJS } from 'immutable';
+import { fromJS, isIndexed } from 'immutable';
 
 import { hydrateCompose } from './compose';
 import { importFetchedAccounts } from './importer';
@@ -9,8 +9,7 @@ export const STORE_HYDRATE_LAZY = 'STORE_HYDRATE_LAZY';
 
 const convertState = rawState =>
   fromJS(rawState, (k, v) =>
-    Iterable.isIndexed(v) ? v.toList() : v.toMap());
-
+    isIndexed(v) ? v.toList() : v.toMap());
 
 export function hydrateStore(rawState) {
   return dispatch => {

app/javascript/mastodon/actions/streaming.js

@@ -11,7 +11,7 @@ import {
 } from './announcements';
 import { updateConversations } from './conversations';
 import { processNewNotificationForGroups, refreshStaleNotificationGroups, pollRecentNotifications as pollRecentGroupNotifications } from './notification_groups';
-import { updateNotifications, expandNotifications } from './notifications';
+import { updateNotifications } from './notifications';
 import { updateStatus } from './statuses';
 import {
   updateTimeline,
@@ -107,9 +107,6 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
           break;
         }
         case 'notifications_merged': {
-          const state = getState();
-          if (state.notifications.top || !state.notifications.mounted)
-            dispatch(expandNotifications({ forceLoad: true, maxId: undefined }));
           dispatch(refreshStaleNotificationGroups());
           break;
         }

app/javascript/mastodon/actions/suggestions.js

@@ -1,58 +0,0 @@
-import api from '../api';
-
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
-
-export const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
-export const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
-export const SUGGESTIONS_FETCH_FAIL    = 'SUGGESTIONS_FETCH_FAIL';
-
-export const SUGGESTIONS_DISMISS = 'SUGGESTIONS_DISMISS';
-
-export function fetchSuggestions(withRelationships = false) {
-  return (dispatch) => {
-    dispatch(fetchSuggestionsRequest());
-
-    api().get('/api/v2/suggestions', { params: { limit: 20 } }).then(response => {
-      dispatch(importFetchedAccounts(response.data.map(x => x.account)));
-      dispatch(fetchSuggestionsSuccess(response.data));
-
-      if (withRelationships) {
-        dispatch(fetchRelationships(response.data.map(item => item.account.id)));
-      }
-    }).catch(error => dispatch(fetchSuggestionsFail(error)));
-  };
-}
-
-export function fetchSuggestionsRequest() {
-  return {
-    type: SUGGESTIONS_FETCH_REQUEST,
-    skipLoading: true,
-  };
-}
-
-export function fetchSuggestionsSuccess(suggestions) {
-  return {
-    type: SUGGESTIONS_FETCH_SUCCESS,
-    suggestions,
-    skipLoading: true,
-  };
-}
-
-export function fetchSuggestionsFail(error) {
-  return {
-    type: SUGGESTIONS_FETCH_FAIL,
-    error,
-    skipLoading: true,
-    skipAlert: true,
-  };
-}
-
-export const dismissSuggestion = accountId => (dispatch) => {
-  dispatch({
-    type: SUGGESTIONS_DISMISS,
-    id: accountId,
-  });
-
-  api().delete(`/api/v1/suggestions/${accountId}`).catch(() => {});
-};

app/javascript/mastodon/actions/suggestions.ts

@@ -0,0 +1,24 @@
+import {
+  apiGetSuggestions,
+  apiDeleteSuggestion,
+} from 'mastodon/api/suggestions';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+import { fetchRelationships } from './accounts';
+import { importFetchedAccounts } from './importer';
+
+export const fetchSuggestions = createDataLoadingThunk(
+  'suggestions/fetch',
+  () => apiGetSuggestions(20),
+  (data, { dispatch }) => {
+    dispatch(importFetchedAccounts(data.map((x) => x.account)));
+    dispatch(fetchRelationships(data.map((x) => x.account.id)));
+
+    return data;
+  },
+);
+
+export const dismissSuggestion = createDataLoadingThunk(
+  'suggestions/dismiss',
+  ({ accountId }: { accountId: string }) => apiDeleteSuggestion(accountId),
+);

app/javascript/mastodon/actions/tags.js

@@ -1,9 +1,5 @@
 import api, { getLinks } from '../api';
 
-export const HASHTAG_FETCH_REQUEST = 'HASHTAG_FETCH_REQUEST';
-export const HASHTAG_FETCH_SUCCESS = 'HASHTAG_FETCH_SUCCESS';
-export const HASHTAG_FETCH_FAIL    = 'HASHTAG_FETCH_FAIL';
-
 export const FOLLOWED_HASHTAGS_FETCH_REQUEST = 'FOLLOWED_HASHTAGS_FETCH_REQUEST';
 export const FOLLOWED_HASHTAGS_FETCH_SUCCESS = 'FOLLOWED_HASHTAGS_FETCH_SUCCESS';
 export const FOLLOWED_HASHTAGS_FETCH_FAIL    = 'FOLLOWED_HASHTAGS_FETCH_FAIL';
@@ -12,39 +8,6 @@ export const FOLLOWED_HASHTAGS_EXPAND_REQUEST = 'FOLLOWED_HASHTAGS_EXPAND_REQUES
 export const FOLLOWED_HASHTAGS_EXPAND_SUCCESS = 'FOLLOWED_HASHTAGS_EXPAND_SUCCESS';
 export const FOLLOWED_HASHTAGS_EXPAND_FAIL    = 'FOLLOWED_HASHTAGS_EXPAND_FAIL';
 
-export const HASHTAG_FOLLOW_REQUEST = 'HASHTAG_FOLLOW_REQUEST';
-export const HASHTAG_FOLLOW_SUCCESS = 'HASHTAG_FOLLOW_SUCCESS';
-export const HASHTAG_FOLLOW_FAIL    = 'HASHTAG_FOLLOW_FAIL';
-
-export const HASHTAG_UNFOLLOW_REQUEST = 'HASHTAG_UNFOLLOW_REQUEST';
-export const HASHTAG_UNFOLLOW_SUCCESS = 'HASHTAG_UNFOLLOW_SUCCESS';
-export const HASHTAG_UNFOLLOW_FAIL    = 'HASHTAG_UNFOLLOW_FAIL';
-
-export const fetchHashtag = name => (dispatch) => {
-  dispatch(fetchHashtagRequest());
-
-  api().get(`/api/v1/tags/${name}`).then(({ data }) => {
-    dispatch(fetchHashtagSuccess(name, data));
-  }).catch(err => {
-    dispatch(fetchHashtagFail(err));
-  });
-};
-
-export const fetchHashtagRequest = () => ({
-  type: HASHTAG_FETCH_REQUEST,
-});
-
-export const fetchHashtagSuccess = (name, tag) => ({
-  type: HASHTAG_FETCH_SUCCESS,
-  name,
-  tag,
-});
-
-export const fetchHashtagFail = error => ({
-  type: HASHTAG_FETCH_FAIL,
-  error,
-});
-
 export const fetchFollowedHashtags = () => (dispatch) => {
   dispatch(fetchFollowedHashtagsRequest());
 
@@ -116,57 +79,3 @@ export function expandFollowedHashtagsFail(error) {
     error,
   };
 }
-
-export const followHashtag = name => (dispatch) => {
-  dispatch(followHashtagRequest(name));
-
-  api().post(`/api/v1/tags/${name}/follow`).then(({ data }) => {
-    dispatch(followHashtagSuccess(name, data));
-  }).catch(err => {
-    dispatch(followHashtagFail(name, err));
-  });
-};
-
-export const followHashtagRequest = name => ({
-  type: HASHTAG_FOLLOW_REQUEST,
-  name,
-});
-
-export const followHashtagSuccess = (name, tag) => ({
-  type: HASHTAG_FOLLOW_SUCCESS,
-  name,
-  tag,
-});
-
-export const followHashtagFail = (name, error) => ({
-  type: HASHTAG_FOLLOW_FAIL,
-  name,
-  error,
-});
-
-export const unfollowHashtag = name => (dispatch) => {
-  dispatch(unfollowHashtagRequest(name));
-
-  api().post(`/api/v1/tags/${name}/unfollow`).then(({ data }) => {
-    dispatch(unfollowHashtagSuccess(name, data));
-  }).catch(err => {
-    dispatch(unfollowHashtagFail(name, err));
-  });
-};
-
-export const unfollowHashtagRequest = name => ({
-  type: HASHTAG_UNFOLLOW_REQUEST,
-  name,
-});
-
-export const unfollowHashtagSuccess = (name, tag) => ({
-  type: HASHTAG_UNFOLLOW_SUCCESS,
-  name,
-  tag,
-});
-
-export const unfollowHashtagFail = (name, error) => ({
-  type: HASHTAG_UNFOLLOW_FAIL,
-  name,
-  error,
-});

app/javascript/mastodon/actions/tags_typed.ts

@@ -0,0 +1,17 @@
+import { apiGetTag, apiFollowTag, apiUnfollowTag } from 'mastodon/api/tags';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+export const fetchHashtag = createDataLoadingThunk(
+  'tags/fetch',
+  ({ tagId }: { tagId: string }) => apiGetTag(tagId),
+);
+
+export const followHashtag = createDataLoadingThunk(
+  'tags/follow',
+  ({ tagId }: { tagId: string }) => apiFollowTag(tagId),
+);
+
+export const unfollowHashtag = createDataLoadingThunk(
+  'tags/unfollow',
+  ({ tagId }: { tagId: string }) => apiUnfollowTag(tagId),
+);

app/javascript/mastodon/api.ts

@@ -68,6 +68,7 @@ export async function apiRequest<ApiResponse = unknown>(
   method: Method,
   url: string,
   args: {
+    signal?: AbortSignal;
     params?: RequestParamsOrData;
     data?: RequestParamsOrData;
     timeout?: number;

app/javascript/mastodon/api/accounts.ts

@@ -5,3 +5,16 @@ export const apiSubmitAccountNote = (id: string, value: string) =>
   apiRequestPost<ApiRelationshipJSON>(`v1/accounts/${id}/note`, {
     comment: value,
   });
+
+export const apiFollowAccount = (
+  id: string,
+  params?: {
+    reblogs: boolean;
+  },
+) =>
+  apiRequestPost<ApiRelationshipJSON>(`v1/accounts/${id}/follow`, {
+    ...params,
+  });
+
+export const apiUnfollowAccount = (id: string) =>
+  apiRequestPost<ApiRelationshipJSON>(`v1/accounts/${id}/unfollow`);

app/javascript/mastodon/api/compose.ts

@@ -0,0 +1,7 @@
+import { apiRequestPut } from 'mastodon/api';
+import type { ApiMediaAttachmentJSON } from 'mastodon/api_types/media_attachments';
+
+export const apiUpdateMedia = (
+  id: string,
+  params?: { description?: string; focus?: string },
+) => apiRequestPut<ApiMediaAttachmentJSON>(`v1/media/${id}`, params);

app/javascript/mastodon/api/instance.ts

@@ -0,0 +1,15 @@
+import { apiRequestGet } from 'mastodon/api';
+import type {
+  ApiTermsOfServiceJSON,
+  ApiPrivacyPolicyJSON,
+} from 'mastodon/api_types/instance';
+
+export const apiGetTermsOfService = (version?: string) =>
+  apiRequestGet<ApiTermsOfServiceJSON>(
+    version
+      ? `v1/instance/terms_of_service/${version}`
+      : 'v1/instance/terms_of_service',
+  );
+
+export const apiGetPrivacyPolicy = () =>
+  apiRequestGet<ApiPrivacyPolicyJSON>('v1/instance/privacy_policy');

app/javascript/mastodon/api/lists.ts

@@ -0,0 +1,32 @@
+import {
+  apiRequestPost,
+  apiRequestPut,
+  apiRequestGet,
+  apiRequestDelete,
+} from 'mastodon/api';
+import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
+import type { ApiListJSON } from 'mastodon/api_types/lists';
+
+export const apiCreate = (list: Partial<ApiListJSON>) =>
+  apiRequestPost<ApiListJSON>('v1/lists', list);
+
+export const apiUpdate = (list: Partial<ApiListJSON>) =>
+  apiRequestPut<ApiListJSON>(`v1/lists/${list.id}`, list);
+
+export const apiGetAccounts = (listId: string) =>
+  apiRequestGet<ApiAccountJSON[]>(`v1/lists/${listId}/accounts`, {
+    limit: 0,
+  });
+
+export const apiGetAccountLists = (accountId: string) =>
+  apiRequestGet<ApiListJSON[]>(`v1/accounts/${accountId}/lists`);
+
+export const apiAddAccountToList = (listId: string, accountId: string) =>
+  apiRequestPost(`v1/lists/${listId}/accounts`, {
+    account_ids: [accountId],
+  });
+
+export const apiRemoveAccountFromList = (listId: string, accountId: string) =>
+  apiRequestDelete(`v1/lists/${listId}/accounts`, {
+    account_ids: [accountId],
+  });

app/javascript/mastodon/api/polls.ts

@@ -0,0 +1,10 @@
+import { apiRequestGet, apiRequestPost } from 'mastodon/api';
+import type { ApiPollJSON } from 'mastodon/api_types/polls';
+
+export const apiGetPoll = (pollId: string) =>
+  apiRequestGet<ApiPollJSON>(`/v1/polls/${pollId}`);
+
+export const apiPollVote = (pollId: string, choices: string[]) =>
+  apiRequestPost<ApiPollJSON>(`/v1/polls/${pollId}/votes`, {
+    choices,
+  });

app/javascript/mastodon/api/search.ts

@@ -0,0 +1,16 @@
+import { apiRequestGet } from 'mastodon/api';
+import type {
+  ApiSearchType,
+  ApiSearchResultsJSON,
+} from 'mastodon/api_types/search';
+
+export const apiGetSearch = (params: {
+  q: string;
+  resolve?: boolean;
+  type?: ApiSearchType;
+  limit?: number;
+  offset?: number;
+}) =>
+  apiRequestGet<ApiSearchResultsJSON>('v2/search', {
+    ...params,
+  });

app/javascript/mastodon/api/suggestions.ts

@@ -0,0 +1,8 @@
+import { apiRequestGet, apiRequestDelete } from 'mastodon/api';
+import type { ApiSuggestionJSON } from 'mastodon/api_types/suggestions';
+
+export const apiGetSuggestions = (limit: number) =>
+  apiRequestGet<ApiSuggestionJSON[]>('v2/suggestions', { limit });
+
+export const apiDeleteSuggestion = (accountId: string) =>
+  apiRequestDelete(`v1/suggestions/${accountId}`);

app/javascript/mastodon/api/tags.ts

@@ -0,0 +1,11 @@
+import { apiRequestPost, apiRequestGet } from 'mastodon/api';
+import type { ApiHashtagJSON } from 'mastodon/api_types/tags';
+
+export const apiGetTag = (tagId: string) =>
+  apiRequestGet<ApiHashtagJSON>(`v1/tags/${tagId}`);
+
+export const apiFollowTag = (tagId: string) =>
+  apiRequestPost<ApiHashtagJSON>(`v1/tags/${tagId}/follow`);
+
+export const apiUnfollowTag = (tagId: string) =>
+  apiRequestPost<ApiHashtagJSON>(`v1/tags/${tagId}/unfollow`);

app/javascript/mastodon/api_types/accounts.ts

@@ -19,7 +19,7 @@ export interface BaseApiAccountJSON {
   avatar_static: string;
   bot: boolean;
   created_at: string;
-  discoverable: boolean;
+  discoverable?: boolean;
   indexable: boolean;
   display_name: string;
   emojis: ApiCustomEmojiJSON[];

app/javascript/mastodon/api_types/instance.ts

@@ -0,0 +1,11 @@
+export interface ApiTermsOfServiceJSON {
+  effective_date: string;
+  effective: boolean;
+  succeeded_by: string | null;
+  content: string;
+}
+
+export interface ApiPrivacyPolicyJSON {
+  updated_at: string;
+  content: string;
+}

app/javascript/mastodon/api_types/lists.ts

@@ -0,0 +1,10 @@
+// See app/serializers/rest/list_serializer.rb
+
+export type RepliesPolicyType = 'list' | 'followed' | 'none';
+
+export interface ApiListJSON {
+  id: string;
+  title: string;
+  exclusive: boolean;
+  replies_policy: RepliesPolicyType;
+}

app/javascript/mastodon/api_types/notifications.ts

@@ -20,6 +20,7 @@ export const allNotificationTypes = [
   'admin.report',
   'moderation_warning',
   'severed_relationships',
+  'annual_report',
 ];
 
 export type NotificationWithStatusType =
@@ -37,7 +38,8 @@ export type NotificationType =
   | 'moderation_warning'
   | 'severed_relationships'
   | 'admin.sign_up'
-  | 'admin.report';
+  | 'admin.report'
+  | 'annual_report';
 
 export interface BaseNotificationJSON {
   id: string;
@@ -130,6 +132,15 @@ interface AccountRelationshipSeveranceNotificationJSON
   event: ApiAccountRelationshipSeveranceEventJSON;
 }
 
+export interface ApiAnnualReportEventJSON {
+  year: string;
+}
+
+interface AnnualReportNotificationGroupJSON extends BaseNotificationGroupJSON {
+  type: 'annual_report';
+  annual_report: ApiAnnualReportEventJSON;
+}
+
 export type ApiNotificationJSON =
   | SimpleNotificationJSON
   | ReportNotificationJSON
@@ -142,7 +153,8 @@ export type ApiNotificationGroupJSON =
   | ReportNotificationGroupJSON
   | AccountRelationshipSeveranceNotificationGroupJSON
   | NotificationGroupWithStatusJSON
-  | ModerationWarningNotificationGroupJSON;
+  | ModerationWarningNotificationGroupJSON
+  | AnnualReportNotificationGroupJSON;
 
 export interface ApiNotificationGroupsResultJSON {
   accounts: ApiAccountJSON[];

app/javascript/mastodon/api_types/polls.ts

@@ -18,6 +18,6 @@ export interface ApiPollJSON {
   options: ApiPollOptionJSON[];
   emojis: ApiCustomEmojiJSON[];
 
-  voted: boolean;
-  own_votes: number[];
+  voted?: boolean;
+  own_votes?: number[];
 }

app/javascript/mastodon/api_types/search.ts

@@ -0,0 +1,11 @@
+import type { ApiAccountJSON } from './accounts';
+import type { ApiStatusJSON } from './statuses';
+import type { ApiHashtagJSON } from './tags';
+
+export type ApiSearchType = 'accounts' | 'statuses' | 'hashtags';
+
+export interface ApiSearchResultsJSON {
+  accounts: ApiAccountJSON[];
+  statuses: ApiStatusJSON[];
+  hashtags: ApiHashtagJSON[];
+}

app/javascript/mastodon/api_types/suggestions.ts

@@ -0,0 +1,13 @@
+import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
+
+export type ApiSuggestionSourceJSON =
+  | 'featured'
+  | 'most_followed'
+  | 'most_interactions'
+  | 'similar_to_recently_followed'
+  | 'friends_of_friends';
+
+export interface ApiSuggestionJSON {
+  sources: [ApiSuggestionSourceJSON, ...ApiSuggestionSourceJSON[]];
+  account: ApiAccountJSON;
+}

app/javascript/mastodon/api_types/tags.ts

@@ -0,0 +1,13 @@
+interface ApiHistoryJSON {
+  day: string;
+  accounts: string;
+  uses: string;
+}
+
+export interface ApiHashtagJSON {
+  id: string;
+  name: string;
+  url: string;
+  history: [ApiHistoryJSON, ...ApiHistoryJSON[]];
+  following?: boolean;
+}

app/javascript/mastodon/components/account.jsx

@@ -1,181 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
-
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { EmptyAccount } from 'mastodon/components/empty_account';
-import { ShortNumber } from 'mastodon/components/short_number';
-import { VerifiedBadge } from 'mastodon/components/verified_badge';
-
-import DropdownMenuContainer from '../containers/dropdown_menu_container';
-import { me } from '../initial_state';
-
-import { Avatar } from './avatar';
-import { Button } from './button';
-import { FollowersCounter } from './counters';
-import { DisplayName } from './display_name';
-import { RelativeTimestamp } from './relative_timestamp';
-
-const messages = defineMessages({
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
-  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
-  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
-  mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' },
-  unmute_notifications: { id: 'account.unmute_notifications_short', defaultMessage: 'Unmute notifications' },
-  mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
-  block: { id: 'account.block_short', defaultMessage: 'Block' },
-  more: { id: 'status.more', defaultMessage: 'More' },
-});
-
-const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifications, hidden, minimal, defaultAction, withBio }) => {
-  const intl = useIntl();
-
-  const handleFollow = useCallback(() => {
-    onFollow(account);
-  }, [onFollow, account]);
-
-  const handleBlock = useCallback(() => {
-    onBlock(account);
-  }, [onBlock, account]);
-
-  const handleMute = useCallback(() => {
-    onMute(account);
-  }, [onMute, account]);
-
-  const handleMuteNotifications = useCallback(() => {
-    onMuteNotifications(account, true);
-  }, [onMuteNotifications, account]);
-
-  const handleUnmuteNotifications = useCallback(() => {
-    onMuteNotifications(account, false);
-  }, [onMuteNotifications, account]);
-
-  if (!account) {
-    return <EmptyAccount size={size} minimal={minimal} />;
-  }
-
-  if (hidden) {
-    return (
-      <>
-        {account.get('display_name')}
-        {account.get('username')}
-      </>
-    );
-  }
-
-  let buttons;
-
-  if (account.get('id') !== me && account.get('relationship', null) !== null) {
-    const following = account.getIn(['relationship', 'following']);
-    const requested = account.getIn(['relationship', 'requested']);
-    const blocking  = account.getIn(['relationship', 'blocking']);
-    const muting  = account.getIn(['relationship', 'muting']);
-
-    if (requested) {
-      buttons = <Button text={intl.formatMessage(messages.cancel_follow_request)} onClick={handleFollow} />;
-    } else if (blocking) {
-      buttons = <Button text={intl.formatMessage(messages.unblock)} onClick={handleBlock} />;
-    } else if (muting) {
-      let menu;
-
-      if (account.getIn(['relationship', 'muting_notifications'])) {
-        menu = [{ text: intl.formatMessage(messages.unmute_notifications), action: handleUnmuteNotifications }];
-      } else {
-        menu = [{ text: intl.formatMessage(messages.mute_notifications), action: handleMuteNotifications }];
-      }
-
-      buttons = (
-        <>
-          <DropdownMenuContainer
-            items={menu}
-            icon='ellipsis-h'
-            iconComponent={MoreHorizIcon}
-            direction='right'
-            title={intl.formatMessage(messages.more)}
-          />
-
-          <Button text={intl.formatMessage(messages.unmute)} onClick={handleMute} />
-        </>
-      );
-    } else if (defaultAction === 'mute') {
-      buttons = <Button text={intl.formatMessage(messages.mute)} onClick={handleMute} />;
-    } else if (defaultAction === 'block') {
-      buttons = <Button text={intl.formatMessage(messages.block)} onClick={handleBlock} />;
-    } else if (!account.get('suspended') && !account.get('moved') || following) {
-      buttons = <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={handleFollow} />;
-    }
-  }
-
-  let muteTimeRemaining;
-
-  if (account.get('mute_expires_at')) {
-    muteTimeRemaining = <>· <RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></>;
-  }
-
-  let verification;
-
-  const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
-
-  if (firstVerifiedField) {
-    verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
-  }
-
-  return (
-    <div className={classNames('account', { 'account--minimal': minimal })}>
-      <div className='account__wrapper'>
-        <Link key={account.get('id')} className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`} data-hover-card-account={account.get('id')}>
-          <div className='account__avatar-wrapper'>
-            <Avatar account={account} size={size} />
-          </div>
-
-          <div className='account__contents'>
-            <DisplayName account={account} />
-            {!minimal && (
-              <div className='account__details'>
-                <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} /> {verification} {muteTimeRemaining}
-              </div>
-            )}
-          </div>
-        </Link>
-
-        {!minimal && (
-          <div className='account__relationship'>
-            {buttons}
-          </div>
-        )}
-      </div>
-
-      {withBio && (account.get('note').length > 0 ? (
-        <div
-          className='account__note translate'
-          dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
-        />
-      ) : (
-        <div className='account__note account__note--missing'><FormattedMessage id='account.no_bio' defaultMessage='No description provided.' /></div>
-      ))}
-    </div>
-  );
-};
-
-Account.propTypes = {
-  size: PropTypes.number,
-  account: ImmutablePropTypes.record,
-  onFollow: PropTypes.func,
-  onBlock: PropTypes.func,
-  onMute: PropTypes.func,
-  onMuteNotifications: PropTypes.func,
-  hidden: PropTypes.bool,
-  minimal: PropTypes.bool,
-  defaultAction: PropTypes.string,
-  withBio: PropTypes.bool,
-};
-
-export default Account;

app/javascript/mastodon/components/account.tsx

@@ -0,0 +1,235 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import {
+  blockAccount,
+  unblockAccount,
+  muteAccount,
+  unmuteAccount,
+} from 'mastodon/actions/accounts';
+import { initMuteModal } from 'mastodon/actions/mutes';
+import { Avatar } from 'mastodon/components/avatar';
+import { Button } from 'mastodon/components/button';
+import { FollowersCounter } from 'mastodon/components/counters';
+import { DisplayName } from 'mastodon/components/display_name';
+import { FollowButton } from 'mastodon/components/follow_button';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+import { ShortNumber } from 'mastodon/components/short_number';
+import { Skeleton } from 'mastodon/components/skeleton';
+import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import DropdownMenu from 'mastodon/containers/dropdown_menu_container';
+import { me } from 'mastodon/initial_state';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+const messages = defineMessages({
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  cancel_follow_request: {
+    id: 'account.cancel_follow_request',
+    defaultMessage: 'Withdraw follow request',
+  },
+  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
+  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
+  mute_notifications: {
+    id: 'account.mute_notifications_short',
+    defaultMessage: 'Mute notifications',
+  },
+  unmute_notifications: {
+    id: 'account.unmute_notifications_short',
+    defaultMessage: 'Unmute notifications',
+  },
+  mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
+  block: { id: 'account.block_short', defaultMessage: 'Block' },
+  more: { id: 'status.more', defaultMessage: 'More' },
+});
+
+export const Account: React.FC<{
+  size?: number;
+  id: string;
+  hidden?: boolean;
+  minimal?: boolean;
+  defaultAction?: 'block' | 'mute';
+  withBio?: boolean;
+}> = ({ id, size = 46, hidden, minimal, defaultAction, withBio }) => {
+  const intl = useIntl();
+  const account = useAppSelector((state) => state.accounts.get(id));
+  const relationship = useAppSelector((state) => state.relationships.get(id));
+  const dispatch = useAppDispatch();
+
+  const handleBlock = useCallback(() => {
+    if (relationship?.blocking) {
+      dispatch(unblockAccount(id));
+    } else {
+      dispatch(blockAccount(id));
+    }
+  }, [dispatch, id, relationship]);
+
+  const handleMute = useCallback(() => {
+    if (relationship?.muting) {
+      dispatch(unmuteAccount(id));
+    } else {
+      dispatch(initMuteModal(account));
+    }
+  }, [dispatch, id, account, relationship]);
+
+  const handleMuteNotifications = useCallback(() => {
+    dispatch(muteAccount(id, true));
+  }, [dispatch, id]);
+
+  const handleUnmuteNotifications = useCallback(() => {
+    dispatch(muteAccount(id, false));
+  }, [dispatch, id]);
+
+  if (hidden) {
+    return (
+      <>
+        {account?.display_name}
+        {account?.username}
+      </>
+    );
+  }
+
+  let buttons;
+
+  if (account && account.id !== me && relationship) {
+    const { requested, blocking, muting } = relationship;
+
+    if (requested) {
+      buttons = <FollowButton accountId={id} />;
+    } else if (blocking) {
+      buttons = (
+        <Button
+          text={intl.formatMessage(messages.unblock)}
+          onClick={handleBlock}
+        />
+      );
+    } else if (muting) {
+      const menu = [
+        {
+          text: intl.formatMessage(
+            relationship.muting_notifications
+              ? messages.unmute_notifications
+              : messages.mute_notifications,
+          ),
+          action: relationship.muting_notifications
+            ? handleUnmuteNotifications
+            : handleMuteNotifications,
+        },
+      ];
+
+      buttons = (
+        <>
+          <DropdownMenu
+            items={menu}
+            icon='ellipsis-h'
+            iconComponent={MoreHorizIcon}
+            direction='right'
+            title={intl.formatMessage(messages.more)}
+          />
+
+          <Button
+            text={intl.formatMessage(messages.unmute)}
+            onClick={handleMute}
+          />
+        </>
+      );
+    } else if (defaultAction === 'mute') {
+      buttons = (
+        <Button text={intl.formatMessage(messages.mute)} onClick={handleMute} />
+      );
+    } else if (defaultAction === 'block') {
+      buttons = (
+        <Button
+          text={intl.formatMessage(messages.block)}
+          onClick={handleBlock}
+        />
+      );
+    } else {
+      buttons = <FollowButton accountId={id} />;
+    }
+  } else {
+    buttons = <FollowButton accountId={id} />;
+  }
+
+  let muteTimeRemaining;
+
+  if (account?.mute_expires_at) {
+    muteTimeRemaining = (
+      <>
+        · <RelativeTimestamp timestamp={account.mute_expires_at} futureDate />
+      </>
+    );
+  }
+
+  let verification;
+
+  const firstVerifiedField = account?.fields.find((item) => !!item.verified_at);
+
+  if (firstVerifiedField) {
+    verification = <VerifiedBadge link={firstVerifiedField.value} />;
+  }
+
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <Link
+          className='account__display-name'
+          title={account?.acct}
+          to={`/@${account?.acct}`}
+          data-hover-card-account={id}
+        >
+          <div className='account__avatar-wrapper'>
+            {account ? (
+              <Avatar account={account} size={size} />
+            ) : (
+              <Skeleton width={size} height={size} />
+            )}
+          </div>
+
+          <div className='account__contents'>
+            <DisplayName account={account} />
+
+            {!minimal && (
+              <div className='account__details'>
+                {account ? (
+                  <>
+                    <ShortNumber
+                      value={account.followers_count}
+                      renderer={FollowersCounter}
+                    />{' '}
+                    {verification} {muteTimeRemaining}
+                  </>
+                ) : (
+                  <Skeleton width='7ch' />
+                )}
+              </div>
+            )}
+          </div>
+        </Link>
+
+        {!minimal && <div className='account__relationship'>{buttons}</div>}
+      </div>
+
+      {account &&
+        withBio &&
+        (account.note.length > 0 ? (
+          <div
+            className='account__note translate'
+            dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+          />
+        ) : (
+          <div className='account__note account__note--missing'>
+            <FormattedMessage
+              id='account.no_bio'
+              defaultMessage='No description provided.'
+            />
+          </div>
+        ))}
+    </div>
+  );
+};

app/javascript/mastodon/components/account_bio.tsx

@@ -1,4 +1,4 @@
-import { useLinks } from 'mastodon/../hooks/useLinks';
+import { useLinks } from 'mastodon/hooks/useLinks';
 
 export const AccountBio: React.FC<{
   note: string;

app/javascript/mastodon/components/account_fields.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import { useLinks } from 'mastodon/../hooks/useLinks';
 import { Icon } from 'mastodon/components/icon';
+import { useLinks } from 'mastodon/hooks/useLinks';
 import type { Account } from 'mastodon/models/account';
 
 export const AccountFields: React.FC<{

app/javascript/mastodon/components/alt_text_badge.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useId } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -8,12 +8,15 @@ import type {
   UsePopperOptions,
 } from 'react-overlays/esm/usePopper';
 
+import { useSelectableClick } from 'mastodon/hooks/useSelectableClick';
+
 const offset = [0, 4] as OffsetValue;
 const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
 
 export const AltTextBadge: React.FC<{
   description: string;
 }> = ({ description }) => {
+  const accessibilityId = useId();
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
 
@@ -25,12 +28,16 @@ export const AltTextBadge: React.FC<{
     setOpen(false);
   }, [setOpen]);
 
+  const [handleMouseDown, handleMouseUp] = useSelectableClick(handleClose);
+
   return (
     <>
       <button
         ref={anchorRef}
         className='media-gallery__alt__label'
         onClick={handleClick}
+        aria-expanded={open}
+        aria-controls={accessibilityId}
       >
         ALT
       </button>
@@ -47,9 +54,12 @@ export const AltTextBadge: React.FC<{
       >
         {({ props }) => (
           <div {...props} className='hover-card-controller'>
-            <div
+            <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
               className='media-gallery__alt__popover dropdown-animation'
-              role='tooltip'
+              role='region'
+              id={accessibilityId}
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
             >
               <h4>
                 <FormattedMessage

app/javascript/mastodon/components/attachment_list.jsx

@@ -36,7 +36,7 @@ export default class AttachmentList extends ImmutablePureComponent {
 
             return (
               <li key={attachment.get('id')}>
-                <a href={displayUrl} target='_blank' rel='noopener noreferrer'>
+                <a href={displayUrl} target='_blank' rel='noopener'>
                   {compact && <Icon id='link' icon={LinkIcon} />}
                   {compact && ' ' }
                   {displayUrl ? filename(displayUrl) : <FormattedMessage id='attachments_list.unprocessed' defaultMessage='(unprocessed)' />}

app/javascript/mastodon/components/avatar.tsx

@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react';
 
 import classNames from 'classnames';
 
-import { useHovering } from 'mastodon/../hooks/useHovering';
+import { useHovering } from 'mastodon/hooks/useHovering';
 import { autoPlayGif } from 'mastodon/initial_state';
 import type { Account } from 'mastodon/models/account';
 

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -1,8 +1,7 @@
+import { useHovering } from 'mastodon/hooks/useHovering';
+import { autoPlayGif } from 'mastodon/initial_state';
 import type { Account } from 'mastodon/models/account';
 
-import { useHovering } from '../../hooks/useHovering';
-import { autoPlayGif } from '../initial_state';
-
 interface Props {
   account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
   friend: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there

app/javascript/mastodon/components/button.tsx

@@ -7,6 +7,7 @@ interface BaseProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   block?: boolean;
   secondary?: boolean;
+  compact?: boolean;
   dangerous?: boolean;
 }
 
@@ -27,6 +28,7 @@ export const Button: React.FC<Props> = ({
   disabled,
   block,
   secondary,
+  compact,
   dangerous,
   className,
   title,
@@ -47,6 +49,7 @@ export const Button: React.FC<Props> = ({
     <button
       className={classNames('button', className, {
         'button-secondary': secondary,
+        'button--compact': compact,
         'button--block': block,
         'button--dangerous': dangerous,
       })}

app/javascript/mastodon/components/check_box.tsx

@@ -7,11 +7,11 @@ import { Icon } from './icon';
 
 interface Props {
   value: string;
-  checked: boolean;
-  indeterminate: boolean;
-  name: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  label: React.ReactNode;
+  checked?: boolean;
+  indeterminate?: boolean;
+  name?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: React.ReactNode;
 }
 
 export const CheckBox: React.FC<Props> = ({
@@ -30,6 +30,7 @@ export const CheckBox: React.FC<Props> = ({
         value={value}
         checked={checked}
         onChange={onChange}
+        readOnly={!onChange}
       />
 
       <span
@@ -42,7 +43,7 @@ export const CheckBox: React.FC<Props> = ({
         )}
       </span>
 
-      <span>{label}</span>
+      {label && <span>{label}</span>}
     </label>
   );
 };

app/javascript/mastodon/components/column.jsx

@@ -1,72 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { supportsPassiveEvents } from 'detect-passive-events';
-
-import { scrollTop } from '../scroll';
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
-export default class Column extends PureComponent {
-
-  static propTypes = {
-    children: PropTypes.node,
-    label: PropTypes.string,
-    bindToDocument: PropTypes.bool,
-  };
-
-  scrollTop () {
-    let scrollable = null;
-
-    if (this.props.bindToDocument) {
-      scrollable = document.scrollingElement;
-    } else {
-      scrollable = this.node.querySelector('.scrollable');
-    }
-
-    if (!scrollable) {
-      return;
-    }
-
-    this._interruptScrollAnimation = scrollTop(scrollable);
-  }
-
-  handleWheel = () => {
-    if (typeof this._interruptScrollAnimation !== 'function') {
-      return;
-    }
-
-    this._interruptScrollAnimation();
-  };
-
-  setRef = c => {
-    this.node = c;
-  };
-
-  componentDidMount () {
-    if (this.props.bindToDocument) {
-      document.addEventListener('wheel', this.handleWheel, listenerOptions);
-    } else {
-      this.node.addEventListener('wheel', this.handleWheel, listenerOptions);
-    }
-  }
-
-  componentWillUnmount () {
-    if (this.props.bindToDocument) {
-      document.removeEventListener('wheel', this.handleWheel, listenerOptions);
-    } else {
-      this.node.removeEventListener('wheel', this.handleWheel, listenerOptions);
-    }
-  }
-
-  render () {
-    const { label, children } = this.props;
-
-    return (
-      <div role='region' aria-label={label} className='column' ref={this.setRef}>
-        {children}
-      </div>
-    );
-  }
-
-}

app/javascript/mastodon/components/column.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import type { Ref } from 'react';
+
+import { scrollTop } from 'mastodon/scroll';
+
+export interface ColumnRef {
+  scrollTop: () => void;
+  node: HTMLDivElement | null;
+}
+
+interface ColumnProps {
+  children?: React.ReactNode;
+  label?: string;
+  bindToDocument?: boolean;
+}
+
+export const Column = forwardRef<ColumnRef, ColumnProps>(
+  ({ children, label, bindToDocument }, ref: Ref<ColumnRef>) => {
+    const nodeRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      node: nodeRef.current,
+
+      scrollTop() {
+        let scrollable = null;
+
+        if (bindToDocument) {
+          scrollable = document.scrollingElement;
+        } else {
+          scrollable = nodeRef.current?.querySelector('.scrollable');
+        }
+
+        if (!scrollable) {
+          return;
+        }
+
+        scrollTop(scrollable);
+      },
+    }));
+
+    return (
+      <div role='region' aria-label={label} className='column' ref={nodeRef}>
+        {children}
+      </div>
+    );
+  },
+);
+
+Column.displayName = 'Column';
+
+// eslint-disable-next-line import/no-default-export
+export default Column;

app/javascript/mastodon/components/column_back_button.tsx

@@ -24,7 +24,7 @@ function useHandleClick(onClick?: OnClickCallback) {
   }, [history, onClick]);
 }
 
-export const ColumnBackButton: React.FC<{ onClick: OnClickCallback }> = ({
+export const ColumnBackButton: React.FC<{ onClick?: OnClickCallback }> = ({
   onClick,
 }) => {
   const handleClick = useHandleClick(onClick);

app/javascript/mastodon/components/column_search_header.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useState, useEffect, useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+export const ColumnSearchHeader: React.FC<{
+  onBack: () => void;
+  onSubmit: (value: string) => void;
+  onActivate: () => void;
+  placeholder: string;
+  active: boolean;
+}> = ({ onBack, onActivate, onSubmit, placeholder, active }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    if (!active) {
+      setValue('');
+    }
+  }, [active]);
+
+  const handleChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(value);
+      onSubmit(value);
+    },
+    [setValue, onSubmit],
+  );
+
+  const handleKeyUp = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onBack();
+        inputRef.current?.blur();
+      }
+    },
+    [onBack],
+  );
+
+  const handleFocus = useCallback(() => {
+    onActivate();
+  }, [onActivate]);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(value);
+  }, [onSubmit, value]);
+
+  return (
+    <form className='column-search-header' onSubmit={handleSubmit}>
+      <input
+        ref={inputRef}
+        type='search'
+        value={value}
+        onChange={handleChange}
+        onKeyUp={handleKeyUp}
+        placeholder={placeholder}
+        onFocus={handleFocus}
+      />
+
+      {active && (
+        <button type='button' className='link-button' onClick={onBack}>
+          <FormattedMessage id='column_search.cancel' defaultMessage='Cancel' />
+        </button>
+      )}
+    </form>
+  );
+};

app/javascript/mastodon/components/copy_paste_text.tsx

@@ -5,8 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 
 import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
-import { useTimeout } from 'mastodon/../hooks/useTimeout';
 import { Icon } from 'mastodon/components/icon';
+import { useTimeout } from 'mastodon/hooks/useTimeout';
 
 export const CopyPasteText: React.FC<{ value: string }> = ({ value }) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -124,7 +124,7 @@ class DropdownMenu extends PureComponent {
 
     return (
       <li className={classNames('dropdown-menu__item', { 'dropdown-menu__item--dangerous': dangerous })} key={`${text}-${i}`}>
-        <a href={href} target={target} data-method={method} rel='noopener noreferrer' role='button' tabIndex={0} ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
+        <a href={href} target={target} data-method={method} rel='noopener' role='button' tabIndex={0} ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
           {text}
         </a>
       </li>

app/javascript/mastodon/components/empty_account.tsx

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

app/javascript/mastodon/components/error_boundary.jsx

@@ -98,7 +98,7 @@ export default class ErrorBoundary extends PureComponent {
             )}
           </p>
 
-          <p className='error-boundary__footer'>Mastodon v{version} · <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='errors.unexpected_crash.report_issue' defaultMessage='Report issue' /></a> · <button onClick={this.handleCopyStackTrace} className={copied ? 'copied' : ''}><FormattedMessage id='errors.unexpected_crash.copy_stacktrace' defaultMessage='Copy stacktrace to clipboard' /></button></p>
+          <p className='error-boundary__footer'>Mastodon v{version} · <a href={source_url} rel='noopener' target='_blank'><FormattedMessage id='errors.unexpected_crash.report_issue' defaultMessage='Report issue' /></a> · <button onClick={this.handleCopyStackTrace} className={copied ? 'copied' : ''}><FormattedMessage id='errors.unexpected_crash.copy_stacktrace' defaultMessage='Copy stacktrace to clipboard' /></button></p>
         </div>
 
         <Helmet>

app/javascript/mastodon/components/follow_button.tsx

@@ -2,6 +2,8 @@ import { useCallback, useEffect } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
+import classNames from 'classnames';
+
 import { useIdentity } from '@/mastodon/identity_context';
 import { fetchRelationships, followAccount } from 'mastodon/actions/accounts';
 import { openModal } from 'mastodon/actions/modal';
@@ -20,7 +22,8 @@ const messages = defineMessages({
 
 export const FollowButton: React.FC<{
   accountId?: string;
-}> = ({ accountId }) => {
+  compact?: boolean;
+}> = ({ accountId, compact }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { signedIn } = useIdentity();
@@ -52,7 +55,7 @@ export const FollowButton: React.FC<{
       );
     }
 
-    if (!relationship) return;
+    if (!relationship || !accountId) return;
 
     if (accountId === me) {
       return;
@@ -88,8 +91,10 @@ export const FollowButton: React.FC<{
       <a
         href='/settings/profile'
         target='_blank'
-        rel='noreferrer noopener'
-        className='button button-secondary'
+        rel='noopener'
+        className={classNames('button button-secondary', {
+          'button--compact': compact,
+        })}
       >
         {label}
       </a>
@@ -99,8 +104,14 @@ export const FollowButton: React.FC<{
   return (
     <Button
       onClick={handleClick}
-      disabled={relationship?.blocked_by || relationship?.blocking}
+      disabled={
+        relationship?.blocked_by ||
+        relationship?.blocking ||
+        (!(relationship?.following || relationship?.requested) &&
+          (account?.suspended || !!account?.moved))
+      }
       secondary={following}
+      compact={compact}
       className={following ? 'button--destructive' : undefined}
     >
       {label}

app/javascript/mastodon/components/gif.tsx

@@ -0,0 +1,22 @@
+import { useHovering } from 'mastodon/hooks/useHovering';
+import { autoPlayGif } from 'mastodon/initial_state';
+
+export const GIF: React.FC<{
+  src: string;
+  staticSrc: string;
+  className: string;
+  animate?: boolean;
+}> = ({ src, staticSrc, className, animate = autoPlayGif }) => {
+  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
+
+  return (
+    <img
+      className={className}
+      src={hovering || animate ? src : staticSrc}
+      alt=''
+      role='presentation'
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    />
+  );
+};

app/javascript/mastodon/components/gifv.tsx

@@ -1,70 +1,70 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, forwardRef } from 'react';
 
 interface Props {
   src: string;
-  key: string;
   alt?: string;
   lang?: string;
-  width: number;
-  height: number;
-  onClick?: () => void;
+  width?: number;
+  height?: number;
+  onClick?: React.MouseEventHandler;
+  onMouseDown?: React.MouseEventHandler;
+  onTouchStart?: React.TouchEventHandler;
 }
 
-export const GIFV: React.FC<Props> = ({
-  src,
-  alt,
-  lang,
-  width,
-  height,
-  onClick,
-}) => {
-  const [loading, setLoading] = useState(true);
+export const GIFV = forwardRef<HTMLVideoElement, Props>(
+  (
+    { src, alt, lang, width, height, onClick, onMouseDown, onTouchStart },
+    ref,
+  ) => {
+    const [loading, setLoading] = useState(true);
 
-  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> =
-    useCallback(() => {
+    const handleLoadedData = useCallback(() => {
       setLoading(false);
     }, [setLoading]);
 
-  const handleClick: React.MouseEventHandler = useCallback(
-    (e) => {
-      if (onClick) {
+    const handleClick = useCallback(
+      (e: React.MouseEvent) => {
         e.stopPropagation();
-        onClick();
-      }
-    },
-    [onClick],
-  );
+        onClick?.(e);
+      },
+      [onClick],
+    );
 
-  return (
-    <div className='gifv' style={{ position: 'relative' }}>
-      {loading && (
-        <canvas
-          width={width}
-          height={height}
+    return (
+      <div className='gifv'>
+        {loading && (
+          <canvas
+            role='button'
+            tabIndex={0}
+            aria-label={alt}
+            title={alt}
+            lang={lang}
+            onClick={handleClick}
+          />
+        )}
+
+        <video
+          ref={ref}
+          src={src}
           role='button'
           tabIndex={0}
           aria-label={alt}
           title={alt}
           lang={lang}
+          width={width}
+          height={height}
+          muted
+          loop
+          autoPlay
+          playsInline
           onClick={handleClick}
+          onLoadedData={handleLoadedData}
+          onMouseDown={onMouseDown}
+          onTouchStart={onTouchStart}
         />
-      )}
+      </div>
+    );
+  },
+);
 
-      <video
-        src={src}
-        role='button'
-        tabIndex={0}
-        aria-label={alt}
-        title={alt}
-        lang={lang}
-        muted
-        loop
-        autoPlay
-        playsInline
-        onClick={handleClick}
-        onLoadedData={handleLoadedData}
-        style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }}
-      />
-    </div>
-  );
-};
+GIFV.displayName = 'GIFV';

app/javascript/mastodon/components/hashtag.tsx

@@ -12,6 +12,7 @@ import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
 import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
+import type { Hashtag as HashtagType } from 'mastodon/models/tags';
 
 interface SilentErrorBoundaryProps {
   children: React.ReactNode;
@@ -80,6 +81,22 @@ export const ImmutableHashtag = ({ hashtag }: ImmutableHashtagProps) => (
   />
 );
 
+export const CompatibilityHashtag: React.FC<{
+  hashtag: HashtagType;
+}> = ({ hashtag }) => (
+  <Hashtag
+    name={hashtag.name}
+    to={`/tags/${hashtag.name}`}
+    people={
+      (hashtag.history[0].accounts as unknown as number) * 1 +
+      ((hashtag.history[1]?.accounts ?? 0) as unknown as number) * 1
+    }
+    history={hashtag.history
+      .map((day) => (day.uses as unknown as number) * 1)
+      .reverse()}
+  />
+);
+
 export interface HashtagProps {
   className?: string;
   description?: React.ReactNode;
@@ -134,7 +151,7 @@ export const Hashtag: React.FC<HashtagProps> = ({
           <Sparklines
             width={50}
             height={28}
-            data={history ? history : Array.from(Array(7)).map(() => 0)}
+            data={history ?? Array.from(Array(7)).map(() => 0)}
           >
             <SparklinesCurve style={{ fill: 'none' }} />
           </Sparklines>

app/javascript/mastodon/components/hover_card_controller.tsx

@@ -8,8 +8,8 @@ import type {
   UsePopperOptions,
 } from 'react-overlays/esm/usePopper';
 
-import { useTimeout } from 'mastodon/../hooks/useTimeout';
 import { HoverCardAccount } from 'mastodon/components/hover_card_account';
+import { useTimeout } from 'mastodon/hooks/useTimeout';
 
 const offset = [-12, 4] as OffsetValue;
 const enterDelay = 750;

app/javascript/mastodon/components/icon_button.tsx

@@ -149,6 +149,7 @@ export class IconButton extends PureComponent<Props, States> {
         onClick={this.handleClick}
         onMouseDown={this.handleMouseDown}
         onKeyDown={this.handleKeyDown}
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         onKeyPress={this.handleKeyPress}
         style={style}
         tabIndex={tabIndex}

app/javascript/mastodon/components/load_gap.tsx

@@ -1,9 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { Icon } from 'mastodon/components/icon';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -17,10 +18,12 @@ interface Props<T> {
 
 export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
   const intl = useIntl();
+  const [loading, setLoading] = useState(false);
 
   const handleClick = useCallback(() => {
+    setLoading(true);
     onClick(param);
-  }, [param, onClick]);
+  }, [setLoading, param, onClick]);
 
   return (
     <button
@@ -28,8 +31,13 @@ export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
       disabled={disabled}
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
+      title={intl.formatMessage(messages.load_more)}
     >
-      <Icon id='ellipsis-h' icon={MoreHorizIcon} />
+      {loading ? (
+        <LoadingIndicator />
+      ) : (
+        <Icon id='ellipsis-h' icon={MoreHorizIcon} />
+      )}
     </button>
   );
 };

app/javascript/mastodon/components/media_gallery.jsx

@@ -97,16 +97,16 @@ class Item extends PureComponent {
       height = 50;
     }
 
-    if (attachment.get('description')?.length > 0) {
-      badges.push(<AltTextBadge key='alt' description={attachment.get('description')} />);
-    }
-
     const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
+    if (description?.length > 0) {
+      badges.push(<AltTextBadge key='alt' description={description} />);
+    }
+
     if (attachment.get('type') === 'unknown') {
       return (
         <div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
-          <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={description} lang={lang} target='_blank' rel='noopener noreferrer'>
+          <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={description} lang={lang} target='_blank' rel='noopener'>
             <Blurhash
               hash={attachment.get('blurhash')}
               className='media-gallery__preview'
@@ -138,14 +138,13 @@ class Item extends PureComponent {
           href={attachment.get('remote_url') || originalUrl}
           onClick={this.handleClick}
           target='_blank'
-          rel='noopener noreferrer'
+          rel='noopener'
         >
           <img
             src={previewUrl}
             srcSet={srcSet}
             sizes={sizes}
             alt={description}
-            title={description}
             lang={lang}
             style={{ objectPosition: `${x}% ${y}%` }}
             onLoad={this.handleImageLoad}
@@ -167,7 +166,6 @@ class Item extends PureComponent {
           <video
             className='media-gallery__item-gifv-thumbnail'
             aria-label={description}
-            title={description}
             lang={lang}
             role='application'
             src={attachment.get('url')}

app/javascript/mastodon/components/modal_root.jsx

@@ -13,11 +13,14 @@ class ModalRoot extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
-    backgroundColor: PropTypes.shape({
-      r: PropTypes.number,
-      g: PropTypes.number,
-      b: PropTypes.number,
-    }),
+    backgroundColor: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        r: PropTypes.number,
+        g: PropTypes.number,
+        b: PropTypes.number,
+      }),
+    ]),
     ignoreFocus: PropTypes.bool,
     ...WithOptionalRouterPropTypes,
   };
@@ -115,9 +118,9 @@ class ModalRoot extends PureComponent {
   }
 
   _ensureHistoryBuffer () {
-    const { pathname, state } = this.history.location;
+    const { pathname, search, hash, state } = this.history.location;
     if (!state || state.mastodonModalKey !== this._modalHistoryKey) {
-      this.history.push(pathname, { ...state, mastodonModalKey: this._modalHistoryKey });
+      this.history.push({ pathname, search, hash }, { ...state, mastodonModalKey: this._modalHistoryKey });
     }
   }
 
@@ -141,14 +144,17 @@ class ModalRoot extends PureComponent {
 
     let backgroundColor = null;
 
-    if (this.props.backgroundColor) {
-      backgroundColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
+    if (this.props.backgroundColor && typeof this.props.backgroundColor === 'string') {
+      backgroundColor = this.props.backgroundColor;
+    } else if (this.props.backgroundColor) {
+      const darkenedColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
+      backgroundColor = `rgb(${darkenedColor.r}, ${darkenedColor.g}, ${darkenedColor.b})`;
     }
 
     return (
       <div className='modal-root' ref={this.setRef}>
         <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
-          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.9)` : null }} />
+          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor }} />
           <div role='dialog' className='modal-root__container'>{children}</div>
         </div>
       </div>

app/javascript/mastodon/components/poll.jsx

@@ -33,20 +33,17 @@ const messages = defineMessages({
   },
 });
 
-const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
-  obj[`:${emoji.get('shortcode')}:`] = emoji.toJS();
-  return obj;
-}, {});
-
 class Poll extends ImmutablePureComponent {
   static propTypes = {
     identity: identityContextPropShape,
-    poll: ImmutablePropTypes.map,
+    poll: ImmutablePropTypes.record.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
     lang: PropTypes.string,
     intl: PropTypes.object.isRequired,
     disabled: PropTypes.bool,
     refresh: PropTypes.func,
     onVote: PropTypes.func,
+    onInteractionModal: PropTypes.func,
   };
 
   state = {
@@ -117,7 +114,11 @@ class Poll extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onVote(Object.keys(this.state.selected));
+    if (this.props.identity.signedIn) {
+      this.props.onVote(Object.keys(this.state.selected));
+    } else {
+      this.props.onInteractionModal('vote', this.props.status);
+    }
   };
 
   handleRefresh = () => {
@@ -144,7 +145,7 @@ class Poll extends ImmutablePureComponent {
     let titleHtml = option.getIn(['translation', 'titleHtml']) || option.get('titleHtml');
 
     if (!titleHtml) {
-      const emojiMap = makeEmojiMap(poll);
+      const emojiMap = emojiMap(poll);
       titleHtml = emojify(escapeTextContentForBrowser(title), emojiMap);
     }
 
@@ -232,7 +233,7 @@ class Poll extends ImmutablePureComponent {
         </ul>
 
         <div className='poll__footer'>
-          {!showResults && <button className='button button-secondary' disabled={disabled || !this.props.identity.signedIn} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
+          {!showResults && <button className='button button-secondary' disabled={disabled} onClick={this.handleVote}><FormattedMessage id='poll.vote' defaultMessage='Vote' /></button>}
           {!showResults && <><button className='poll__link' onClick={this.handleReveal}><FormattedMessage id='poll.reveal' defaultMessage='See results' /></button> · </>}
           {showResults && !this.props.disabled && <><button className='poll__link' onClick={this.handleRefresh}><FormattedMessage id='poll.refresh' defaultMessage='Refresh' /></button> · </>}
           {votesCount}

app/javascript/mastodon/components/regeneration_indicator.jsx

@@ -1,18 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import illustration from '@/images/elephant_ui_working.svg';
-
-const RegenerationIndicator = () => (
-  <div className='regeneration-indicator'>
-    <div className='regeneration-indicator__figure'>
-      <img src={illustration} alt='' />
-    </div>
-
-    <div className='regeneration-indicator__label'>
-      <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
-      <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
-    </div>
-  </div>
-);
-
-export default RegenerationIndicator;

app/javascript/mastodon/components/regeneration_indicator.tsx

@@ -0,0 +1,26 @@
+import { FormattedMessage } from 'react-intl';
+
+import { GIF } from './gif';
+
+export const RegenerationIndicator: React.FC = () => (
+  <div className='regeneration-indicator'>
+    <GIF
+      src='/loading.gif'
+      staticSrc='/loading.png'
+      className='regeneration-indicator__figure'
+    />
+
+    <div className='regeneration-indicator__label'>
+      <strong>
+        <FormattedMessage
+          id='regeneration_indicator.preparing_your_home_feed'
+          defaultMessage='Preparing your home feed…'
+        />
+      </strong>
+      <FormattedMessage
+        id='regeneration_indicator.please_stand_by'
+        defaultMessage='Please stand by.'
+      />
+    </div>
+  </div>
+);

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 
-import type { IntlShape } from 'react-intl';
+import type { MessageDescriptor, PrimitiveType, IntlShape } from 'react-intl';
 import { injectIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
@@ -102,7 +102,13 @@ const getUnitDelay = (units: string) => {
 };
 
 export const timeAgoString = (
-  intl: Pick<IntlShape, 'formatDate' | 'formatMessage'>,
+  intl: {
+    formatDate: IntlShape['formatDate'];
+    formatMessage: (
+      { id, defaultMessage }: MessageDescriptor,
+      values?: Record<string, PrimitiveType>,
+    ) => string;
+  },
   date: Date,
   now: number,
   year: number,

app/javascript/mastodon/components/scrollable_list.jsx

@@ -80,6 +80,8 @@ class ScrollableList extends PureComponent {
     children: PropTypes.node,
     bindToDocument: PropTypes.bool,
     preventScroll: PropTypes.bool,
+    footer: PropTypes.node,
+    className: PropTypes.string,
   };
 
   static defaultProps = {
@@ -324,7 +326,7 @@ class ScrollableList extends PureComponent {
   };
 
   render () {
-    const { children, scrollKey, trackScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, emptyMessage, onLoadMore } = this.props;
+    const { children, scrollKey, className, trackScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, footer, emptyMessage, onLoadMore } = this.props;
     const { fullscreen } = this.state;
     const childrenCount = Children.count(children);
 
@@ -335,21 +337,23 @@ class ScrollableList extends PureComponent {
     if (showLoading) {
       scrollableArea = (
         <div className='scrollable scrollable--flex' ref={this.setRef}>
-          <div role='feed' className='item-list'>
-            {prepend}
-          </div>
+          {prepend}
+
+          <div role='feed' className='item-list' />
 
           <div className='scrollable__append'>
             <LoadingIndicator />
           </div>
+
+          {footer}
         </div>
       );
     } else if (isLoading || childrenCount > 0 || numPending > 0 || hasMore || !emptyMessage) {
       scrollableArea = (
-        <div className={classNames('scrollable', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove}>
-          <div role='feed' className='item-list'>
-            {prepend}
+        <div className={classNames('scrollable scrollable--flex', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove}>
+          {prepend}
 
+          <div role='feed' className={classNames('item-list', className)}>
             {loadPending}
 
             {Children.map(this.props.children, (child, index) => (
@@ -375,6 +379,8 @@ class ScrollableList extends PureComponent {
 
             {!hasMore && append}
           </div>
+
+          {footer}
         </div>
       );
     } else {
@@ -385,6 +391,8 @@ class ScrollableList extends PureComponent {
           <div className='empty-column-indicator'>
             {emptyMessage}
           </div>
+
+          {footer}
         </div>
       );
     }

app/javascript/mastodon/components/server_banner.jsx

@@ -8,10 +8,10 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import { fetchServer } from 'mastodon/actions/server';
+import { Account } from 'mastodon/components/account';
 import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
-import Account from 'mastodon/containers/account_container';
 import { domain } from 'mastodon/initial_state';
 
 const messages = defineMessages({
@@ -42,7 +42,7 @@ class ServerBanner extends PureComponent {
     return (
       <div className='server-banner'>
         <div className='server-banner__introduction'>
-          <FormattedMessage id='server_banner.is_one_of_many' defaultMessage='{domain} is one of the many independent Mastodon servers you can use to participate in the fediverse.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
+          <FormattedMessage id='server_banner.is_one_of_many' defaultMessage='{domain} is one of the many independent Mastodon servers you can use to participate in the fediverse.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank' rel='noopener'>Mastodon</a> }} />
         </div>
 
         <Link to='/about'>

app/javascript/mastodon/components/status.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -164,32 +166,23 @@ class Status extends ImmutablePureComponent {
   };
 
   handleClick = e => {
-    if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+
+    if (e?.button === 0 && !(e?.ctrlKey || e?.metaKey)) {
+      this._openStatus();
+    } else if (e?.button === 1 || (e?.button === 0 && (e?.ctrlKey || e?.metaKey))) {
+      this._openStatus(true);
+    }
+  };
+
+  handleMouseUp = e => {
+    // Only handle clicks on the empty space above the content
+
+    if (e.target !== e.currentTarget && e.detail >= 1) {
       return;
     }
 
-    if (e) {
-      e.preventDefault();
-    }
-
-    this.handleHotkeyOpen();
-  };
-
-  handlePrependAccountClick = e => {
-    this.handleAccountClick(e, false);
-  };
-
-  handleAccountClick = (e, proper = true) => {
-    if (e && (e.button !== 0 || e.ctrlKey || e.metaKey))  {
-      return;
-    }
-
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-
-    this._openProfile(proper);
+    this.handleClick(e);
   };
 
   handleExpandedToggle = () => {
@@ -288,6 +281,10 @@ class Status extends ImmutablePureComponent {
   };
 
   handleHotkeyOpen = () => {
+    this._openStatus();
+  };
+
+  _openStatus = (newTab = false) => {
     if (this.props.onClick) {
       this.props.onClick();
       return;
@@ -300,7 +297,13 @@ class Status extends ImmutablePureComponent {
       return;
     }
 
-    history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`);
+    const path = `/@${status.getIn(['account', 'acct'])}/${status.get('id')}`;
+
+    if (newTab) {
+      window.open(path, '_blank', 'noopener');
+    } else {
+      history.push(path);
+    }
   };
 
   handleHotkeyOpenProfile = () => {
@@ -330,7 +333,7 @@ class Status extends ImmutablePureComponent {
     const { onToggleHidden } = this.props;
     const status = this._properStatus();
 
-    if (status.get('matched_filters')) {
+    if (this.props.status.get('matched_filters')) {
       const expandedBecauseOfCW = !status.get('hidden') || status.get('spoiler_text').length === 0;
       const expandedBecauseOfFilter = this.state.showDespiteFilter;
 
@@ -390,21 +393,11 @@ class Status extends ImmutablePureComponent {
       toggleHidden: this.handleHotkeyToggleHidden,
       toggleSensitive: this.handleHotkeyToggleSensitive,
       openMedia: this.handleHotkeyOpenMedia,
+      onTranslate: this.handleTranslate,
     };
 
     let media, statusAvatar, prepend, rebloggedByText;
 
-    if (hidden) {
-      return (
-        <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>
-        </HotKeys>
-      );
-    }
-
     const connectUp = previousId && previousId === status.get('in_reply_to_id');
     const connectToRoot = rootId && rootId === status.get('in_reply_to_id');
     const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
@@ -423,7 +416,7 @@ class Status extends ImmutablePureComponent {
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend__icon'><Icon id='retweet' icon={RepeatIcon} /></div>
-          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
+          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <Link data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} to={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></Link> }} />
         </div>
       );
 
@@ -444,6 +437,20 @@ class Status extends ImmutablePureComponent {
       );
     }
 
+    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
+
+    if (hidden) {
+      return (
+        <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>
+            {status.get('spoiler_text').length > 0 && (<span>{status.get('spoiler_text')}</span>)}
+            {expanded && <span>{status.get('content')}</span>}
+          </div>
+        </HotKeys>
+      );
+    }
+
     if (pictureInPicture.get('inUse')) {
       media = <PictureInPicturePlaceholder aspectRatio={this.getAttachmentAspectRatio()} />;
     } else if (status.get('media_attachments').size > 0) {
@@ -520,7 +527,7 @@ class Status extends ImmutablePureComponent {
           </Bundle>
         );
       }
-    } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
+    } else if (status.get('card')) {
       media = (
         <Card
           onOpenMedia={this.handleOpenMedia}
@@ -538,7 +545,6 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
 
     return (
       <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
@@ -548,20 +554,19 @@ class Status extends ImmutablePureComponent {
           <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')}>
             {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
 
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-            <div onClick={this.handleClick} className='status__info'>
-              <a href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+            <div onMouseUp={this.handleMouseUp} className='status__info'>
+              <Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time'>
                 <span className='status__visibility-icon'><VisibilityIcon visibility={status.get('visibility')} /></span>
                 <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
-              </a>
+              </Link>
 
-              <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
+              <Link to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name'>
                 <div className='status__avatar'>
                   {statusAvatar}
                 </div>
 
                 <DisplayName account={status.get('account')} />
-              </a>
+              </Link>
             </div>
 
             {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}

app/javascript/mastodon/components/status_action_bar.jsx

@@ -47,6 +47,7 @@ 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' },
+  removeFavourite: { id: 'status.remove_favourite', defaultMessage: 'Remove from favorites' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   removeBookmark: { id: 'status.remove_bookmark', defaultMessage: 'Remove bookmark' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
@@ -271,8 +272,6 @@ class StatusActionBar extends ImmutablePureComponent {
     if (signedIn) {
       menu.push(null);
 
-      menu.push({ text: intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark), action: this.handleBookmarkClick });
-
       if (writtenByMe && pinnableStatus) {
         menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
       }
@@ -371,6 +370,9 @@ class StatusActionBar extends ImmutablePureComponent {
       reblogIconComponent = RepeatDisabledIcon;
     }
 
+
+    const bookmarkTitle = intl.formatMessage(status.get('bookmarked') ? messages.removeBookmark : messages.bookmark);
+    const favouriteTitle = intl.formatMessage(status.get('favourited') ? messages.removeFavourite : messages.favourite);
     const isReply = status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
 
     return (
@@ -382,10 +384,10 @@ class StatusActionBar extends ImmutablePureComponent {
           <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
         </div>
         <div className='status__action-bar__button-wrapper'>
-          <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+          <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={favouriteTitle} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         </div>
         <div className='status__action-bar__button-wrapper'>
-          <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
+          <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={bookmarkTitle} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
         </div>
         <div className='status__action-bar__button-wrapper'>
           <DropdownMenuContainer

app/javascript/mastodon/components/status_content.jsx

@@ -38,7 +38,7 @@ class TranslateButton extends PureComponent {
 
     if (translation) {
       const language     = preloadedLanguages.find(lang => lang[0] === translation.get('detected_source_language'));
-      const languageName = language ? language[2] : translation.get('detected_source_language');
+      const languageName = language ? language[1] : translation.get('detected_source_language');
       const provider     = translation.get('provider');
 
       return (
@@ -204,8 +204,8 @@ class StatusContent extends PureComponent {
       element = element.parentNode;
     }
 
-    if (deltaX + deltaY < 5 && e.button === 0 && this.props.onClick) {
-      this.props.onClick();
+    if (deltaX + deltaY < 5 && (e.button === 0 || e.button === 1) && e.detail >= 1 && this.props.onClick) {
+      this.props.onClick(e);
     }
 
     this.startXY = null;
@@ -245,7 +245,7 @@ class StatusContent extends PureComponent {
     );
 
     const poll = !!status.get('poll') && (
-      <PollContainer pollId={status.get('poll')} lang={language} />
+      <PollContainer pollId={status.get('poll')} status={status} lang={language} />
     );
 
     if (this.props.onClick) {

app/javascript/mastodon/components/status_list.jsx

@@ -6,7 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { debounce } from 'lodash';
 
 import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'mastodon/actions/timelines';
-import RegenerationIndicator from 'mastodon/components/regeneration_indicator';
+import { RegenerationIndicator } from 'mastodon/components/regeneration_indicator';
 import { InlineFollowSuggestions } from 'mastodon/features/home_timeline/components/inline_follow_suggestions';
 
 import StatusContainer from '../containers/status_container';

app/javascript/mastodon/containers/account_container.jsx

@@ -1,60 +0,0 @@
-import { injectIntl } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { openModal } from 'mastodon/actions/modal';
-
-import {
-  followAccount,
-  blockAccount,
-  unblockAccount,
-  muteAccount,
-  unmuteAccount,
-} from '../actions/accounts';
-import { initMuteModal } from '../actions/mutes';
-import Account from '../components/account';
-import { makeGetAccount } from '../selectors';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, props) => ({
-    account: getAccount(state, props.id),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch) => ({
-
-  onFollow (account) {
-    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }));
-    } else {
-      dispatch(followAccount(account.get('id')));
-    }
-  },
-
-  onBlock (account) {
-    if (account.getIn(['relationship', 'blocking'])) {
-      dispatch(unblockAccount(account.get('id')));
-    } else {
-      dispatch(blockAccount(account.get('id')));
-    }
-  },
-
-  onMute (account) {
-    if (account.getIn(['relationship', 'muting'])) {
-      dispatch(unmuteAccount(account.get('id')));
-    } else {
-      dispatch(initMuteModal(account));
-    }
-  },
-
-
-  onMuteNotifications (account, notifications) {
-    dispatch(muteAccount(account.get('id'), notifications));
-  },
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account));

app/javascript/mastodon/containers/compose_container.jsx

@@ -1,6 +1,7 @@
 import { Provider } from 'react-redux';
 
 import { fetchCustomEmojis } from 'mastodon/actions/custom_emojis';
+import { fetchServer } from 'mastodon/actions/server';
 import { hydrateStore } from 'mastodon/actions/store';
 import { Router } from 'mastodon/components/router';
 import Compose from 'mastodon/features/standalone/compose';
@@ -13,6 +14,7 @@ if (initialState) {
 }
 
 store.dispatch(fetchCustomEmojis());
+store.dispatch(fetchServer());
 
 const ComposeContainer = () => (
   <IntlProvider>

app/javascript/mastodon/containers/dropdown_menu_container.js

@@ -15,6 +15,13 @@ const mapStateToProps = state => ({
   openedViaKeyboard: state.dropdownMenu.keyboard,
 });
 
+/**
+ * @param {any} dispatch
+ * @param {Object} root0
+ * @param {any} [root0.status]
+ * @param {any} root0.items
+ * @param {any} [root0.scrollKey]
+ */
 const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
   onOpen(id, onItemClick, keyboard) {
     if (status) {

app/javascript/mastodon/containers/poll_container.js

@@ -2,25 +2,37 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
+import { openModal } from 'mastodon/actions/modal';
 import { fetchPoll, vote } from 'mastodon/actions/polls';
 import Poll from 'mastodon/components/poll';
 
 const mapDispatchToProps = (dispatch, { pollId }) => ({
   refresh: debounce(
     () => {
-      dispatch(fetchPoll(pollId));
+      dispatch(fetchPoll({ pollId }));
     },
     1000,
     { leading: true },
   ),
 
   onVote (choices) {
-    dispatch(vote(pollId, choices));
+    dispatch(vote({ pollId, choices }));
   },
+
+  onInteractionModal (type, status) {
+    dispatch(openModal({
+      modalType: 'INTERACTION',
+      modalProps: {
+        type,
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('uri'),
+      },
+    }));
+  }
 });
 
 const mapStateToProps = (state, { pollId }) => ({
-  poll: state.getIn(['polls', pollId]),
+  poll: state.polls.get(pollId),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Poll);

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

@@ -13,12 +13,12 @@ import { connect } from 'react-redux';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'mastodon/actions/server';
+import { Account } from 'mastodon/components/account';
 import Column from 'mastodon/components/column';
 import { Icon  }  from 'mastodon/components/icon';
 import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { Skeleton } from 'mastodon/components/skeleton';
-import Account from 'mastodon/containers/account_container';
-import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import { LinkFooter } from 'mastodon/features/ui/components/link_footer';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
@@ -140,7 +140,7 @@ class About extends PureComponent {
             ) : (extendedDescription.get('content')?.length > 0 ? (
               <div
                 className='prose'
-                dangerouslySetInnerHTML={{__html: extendedDescription.get('content')}}
+                dangerouslySetInnerHTML={{ __html: extendedDescription.get('content') }}
               />
             ) : (
               <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
@@ -165,8 +165,7 @@ class About extends PureComponent {
 
           <Section title={intl.formatMessage(messages.rules)}>
             {!isLoading && (server.get('rules', ImmutableList()).isEmpty() ? (
-              <p><FormattedMessage id='about.not_available'
-                                   defaultMessage='This information has not been made available on this server.'/></p>
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
             ) : (
               <ol className='rules-list'>
                 {server.get('rules').map(rule => (

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

@@ -1,86 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useRef, useCallback } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-
-import Overlay from 'react-overlays/Overlay';
-
-
-
-import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
-import BadgeIcon from '@/material-icons/400-24px/badge.svg?react';
-import GlobeIcon from '@/material-icons/400-24px/globe.svg?react';
-import { Icon } from 'mastodon/components/icon';
-
-export const DomainPill = ({ domain, username, isSelf }) => {
-  const [open, setOpen] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-  const triggerRef = useRef(null);
-
-  const handleClick = useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
-
-  const handleExpandClick = useCallback(() => {
-    setExpanded(!expanded);
-  }, [expanded, setExpanded]);
-
-  return (
-    <>
-      <button className={classNames('account__domain-pill', { active: open })} ref={triggerRef} onClick={handleClick}>{domain}</button>
-
-      <Overlay show={open} rootClose onHide={handleClick} offset={[5, 5]} target={triggerRef}>
-        {({ props }) => (
-          <div {...props} className='account__domain-pill__popout dropdown-animation'>
-            <div className='account__domain-pill__popout__header'>
-              <div className='account__domain-pill__popout__header__icon'><Icon icon={BadgeIcon} /></div>
-              <h3><FormattedMessage id='domain_pill.whats_in_a_handle' defaultMessage="What's in a handle?" /></h3>
-            </div>
-
-            <div className='account__domain-pill__popout__handle'>
-              <div className='account__domain-pill__popout__handle__label'>{isSelf ? <FormattedMessage id='domain_pill.your_handle' defaultMessage='Your handle:' /> : <FormattedMessage id='domain_pill.their_handle' defaultMessage='Their handle:' />}</div>
-              <div className='account__domain-pill__popout__handle__handle'>@{username}@{domain}</div>
-            </div>
-
-            <div className='account__domain-pill__popout__parts'>
-              <div>
-                <div className='account__domain-pill__popout__parts__icon'><Icon icon={AlternateEmailIcon} /></div>
-
-                <div>
-                  <h6><FormattedMessage id='domain_pill.username' defaultMessage='Username' /></h6>
-                  <p>{isSelf ? <FormattedMessage id='domain_pill.your_username' defaultMessage='Your unique identifier on this server. It’s possible to find users with the same username on different servers.' /> : <FormattedMessage id='domain_pill.their_username' defaultMessage='Their unique identifier on their server. It’s possible to find users with the same username on different servers.' />}</p>
-                </div>
-              </div>
-
-              <div>
-                <div className='account__domain-pill__popout__parts__icon'><Icon icon={GlobeIcon} /></div>
-
-                <div>
-                  <h6><FormattedMessage id='domain_pill.server' defaultMessage='Server' /></h6>
-                  <p>{isSelf ? <FormattedMessage id='domain_pill.your_server' defaultMessage='Your digital home, where all of your posts live. Don’t like this one? Transfer servers at any time and bring your followers, too.' /> : <FormattedMessage id='domain_pill.their_server' defaultMessage='Their digital home, where all of their posts live.' />}</p>
-                </div>
-              </div>
-            </div>
-
-            <p>{isSelf ? <FormattedMessage id='domain_pill.who_you_are' defaultMessage='Because your handle says who you are and where you are, people can interact with you across the social web of <button>ActivityPub-powered platforms</button>.' values={{ button: x => <button onClick={handleExpandClick} className='link-button'>{x}</button> }} /> : <FormattedMessage id='domain_pill.who_they_are' defaultMessage='Since handles say who someone is and where they are, you can interact with people across the social web of <button>ActivityPub-powered platforms</button>.' values={{ button: x => <button onClick={handleExpandClick} className='link-button'>{x}</button> }} />}</p>
-
-            {expanded && (
-              <>
-                <p><FormattedMessage id='domain_pill.activitypub_like_language' defaultMessage='ActivityPub is like the language Mastodon speaks with other social networks.' /></p>
-                <p><FormattedMessage id='domain_pill.activitypub_lets_connect' defaultMessage='It lets you connect and interact with people not just on Mastodon, but across different social apps too.' /></p>
-              </>
-            )}
-          </div>
-        )}
-      </Overlay>
-    </>
-  );
-};
-
-DomainPill.propTypes = {
-  username: PropTypes.string.isRequired,
-  domain: PropTypes.string.isRequired,
-  isSelf: PropTypes.bool,
-};

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

@@ -0,0 +1,202 @@
+import { useState, useRef, useCallback, useId } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import Overlay from 'react-overlays/Overlay';
+
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import BadgeIcon from '@/material-icons/400-24px/badge.svg?react';
+import GlobeIcon from '@/material-icons/400-24px/globe.svg?react';
+import { Icon } from 'mastodon/components/icon';
+
+export const DomainPill: React.FC<{
+  domain: string;
+  username: string;
+  isSelf: boolean;
+}> = ({ domain, username, isSelf }) => {
+  const accessibilityId = useId();
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const triggerRef = useRef(null);
+
+  const handleClick = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+
+  const handleExpandClick = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded, setExpanded]);
+
+  return (
+    <>
+      <button
+        className={classNames('account__domain-pill', { active: open })}
+        ref={triggerRef}
+        onClick={handleClick}
+        aria-expanded={open}
+        aria-controls={accessibilityId}
+      >
+        {domain}
+      </button>
+
+      <Overlay
+        show={open}
+        rootClose
+        onHide={handleClick}
+        offset={[5, 5]}
+        target={triggerRef}
+      >
+        {({ props }) => (
+          <div
+            {...props}
+            role='region'
+            id={accessibilityId}
+            className='account__domain-pill__popout dropdown-animation'
+          >
+            <div className='account__domain-pill__popout__header'>
+              <div className='account__domain-pill__popout__header__icon'>
+                <Icon id='' icon={BadgeIcon} />
+              </div>
+              <h3>
+                <FormattedMessage
+                  id='domain_pill.whats_in_a_handle'
+                  defaultMessage="What's in a handle?"
+                />
+              </h3>
+            </div>
+
+            <div className='account__domain-pill__popout__handle'>
+              <div className='account__domain-pill__popout__handle__label'>
+                {isSelf ? (
+                  <FormattedMessage
+                    id='domain_pill.your_handle'
+                    defaultMessage='Your handle:'
+                  />
+                ) : (
+                  <FormattedMessage
+                    id='domain_pill.their_handle'
+                    defaultMessage='Their handle:'
+                  />
+                )}
+              </div>
+              <div className='account__domain-pill__popout__handle__handle'>
+                @{username}@{domain}
+              </div>
+            </div>
+
+            <div className='account__domain-pill__popout__parts'>
+              <div>
+                <div className='account__domain-pill__popout__parts__icon'>
+                  <Icon id='' icon={AlternateEmailIcon} />
+                </div>
+
+                <div>
+                  <h6>
+                    <FormattedMessage
+                      id='domain_pill.username'
+                      defaultMessage='Username'
+                    />
+                  </h6>
+                  <p>
+                    {isSelf ? (
+                      <FormattedMessage
+                        id='domain_pill.your_username'
+                        defaultMessage='Your unique identifier on this server. It’s possible to find users with the same username on different servers.'
+                      />
+                    ) : (
+                      <FormattedMessage
+                        id='domain_pill.their_username'
+                        defaultMessage='Their unique identifier on their server. It’s possible to find users with the same username on different servers.'
+                      />
+                    )}
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <div className='account__domain-pill__popout__parts__icon'>
+                  <Icon id='' icon={GlobeIcon} />
+                </div>
+
+                <div>
+                  <h6>
+                    <FormattedMessage
+                      id='domain_pill.server'
+                      defaultMessage='Server'
+                    />
+                  </h6>
+                  <p>
+                    {isSelf ? (
+                      <FormattedMessage
+                        id='domain_pill.your_server'
+                        defaultMessage='Your digital home, where all of your posts live. Don’t like this one? Transfer servers at any time and bring your followers, too.'
+                      />
+                    ) : (
+                      <FormattedMessage
+                        id='domain_pill.their_server'
+                        defaultMessage='Their digital home, where all of their posts live.'
+                      />
+                    )}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <p>
+              {isSelf ? (
+                <FormattedMessage
+                  id='domain_pill.who_you_are'
+                  defaultMessage='Because your handle says who you are and where you are, people can interact with you across the social web of <button>ActivityPub-powered platforms</button>.'
+                  values={{
+                    button: (x) => (
+                      <button
+                        onClick={handleExpandClick}
+                        className='link-button'
+                      >
+                        {x}
+                      </button>
+                    ),
+                  }}
+                />
+              ) : (
+                <FormattedMessage
+                  id='domain_pill.who_they_are'
+                  defaultMessage='Since handles say who someone is and where they are, you can interact with people across the social web of <button>ActivityPub-powered platforms</button>.'
+                  values={{
+                    button: (x) => (
+                      <button
+                        onClick={handleExpandClick}
+                        className='link-button'
+                      >
+                        {x}
+                      </button>
+                    ),
+                  }}
+                />
+              )}
+            </p>
+
+            {expanded && (
+              <>
+                <p>
+                  <FormattedMessage
+                    id='domain_pill.activitypub_like_language'
+                    defaultMessage='ActivityPub is like the language Mastodon speaks with other social networks.'
+                  />
+                </p>
+                <p>
+                  <FormattedMessage
+                    id='domain_pill.activitypub_lets_connect'
+                    defaultMessage='It lets you connect and interact with people not just on Mastodon, but across different social apps too.'
+                  />
+                </p>
+              </>
+            )}
+          </div>
+        )}
+      </Overlay>
+    </>
+  );
+};

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

@@ -1,515 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
-import { NavLink, withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import CheckIcon from '@/material-icons/400-24px/check.svg?react';
-import LockIcon from '@/material-icons/400-24px/lock.svg?react';
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
-import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
-import ShareIcon from '@/material-icons/400-24px/share.svg?react';
-import { Avatar } from 'mastodon/components/avatar';
-import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
-import { Button } from 'mastodon/components/button';
-import { CopyIconButton } from 'mastodon/components/copy_icon_button';
-import { FollowersCounter, FollowingCounter, StatusesCounter } from 'mastodon/components/counters';
-import { Icon }  from 'mastodon/components/icon';
-import { IconButton } from 'mastodon/components/icon_button';
-import { LoadingIndicator } from 'mastodon/components/loading_indicator';
-import { ShortNumber } from 'mastodon/components/short_number';
-import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { autoPlayGif, me, domain as localDomain } from 'mastodon/initial_state';
-import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
-
-import AccountNoteContainer from '../containers/account_note_container';
-import FollowRequestNoteContainer from '../containers/follow_request_note_container';
-
-import { DomainPill } from './domain_pill';
-
-const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
-  mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
-  cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
-  unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-  linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
-  account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
-  mention: { id: 'account.mention', defaultMessage: 'Mention @{name}' },
-  direct: { id: 'account.direct', defaultMessage: 'Privately mention @{name}' },
-  unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
-  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
-  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
-  report: { id: 'account.report', defaultMessage: 'Report @{name}' },
-  share: { id: 'account.share', defaultMessage: 'Share @{name}\'s profile' },
-  copy: { id: 'account.copy', defaultMessage: 'Copy link to profile' },
-  media: { id: 'account.media', defaultMessage: 'Media' },
-  blockDomain: { id: 'account.block_domain', defaultMessage: 'Block domain {domain}' },
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
-  hideReblogs: { id: 'account.hide_reblogs', defaultMessage: 'Hide boosts from @{name}' },
-  showReblogs: { id: 'account.show_reblogs', defaultMessage: 'Show boosts from @{name}' },
-  enableNotifications: { id: 'account.enable_notifications', defaultMessage: 'Notify me when @{name} posts' },
-  disableNotifications: { id: 'account.disable_notifications', defaultMessage: 'Stop notifying me when @{name} posts' },
-  pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
-  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
-  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
-  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
-  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
-  followed_tags: { id: 'navigation_bar.followed_tags', defaultMessage: 'Followed hashtags' },
-  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
-  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' },
-  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
-  endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
-  unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
-  add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
-  admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
-  languages: { id: 'account.languages', defaultMessage: 'Change subscribed languages' },
-  openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
-});
-
-const titleFromAccount = account => {
-  const displayName = account.get('display_name');
-  const acct = account.get('acct') === account.get('username') ? `${account.get('username')}@${localDomain}` : account.get('acct');
-  const prefix = displayName.trim().length === 0 ? account.get('username') : displayName;
-
-  return `${prefix} (@${acct})`;
-};
-
-const messageForFollowButton = relationship => {
-  if(!relationship) return messages.follow;
-
-  if (relationship.get('following') && relationship.get('followed_by')) {
-    return messages.mutual;
-  } else if (relationship.get('following') || relationship.get('requested')) {
-    return messages.unfollow;
-  } else if (relationship.get('followed_by')) {
-    return messages.followBack;
-  } else {
-    return messages.follow;
-  }
-};
-
-const dateFormatOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
-class Header extends ImmutablePureComponent {
-
-  static propTypes = {
-    identity: identityContextPropShape,
-    account: ImmutablePropTypes.record,
-    identity_props: ImmutablePropTypes.list,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onMention: PropTypes.func.isRequired,
-    onDirect: PropTypes.func.isRequired,
-    onReblogToggle: PropTypes.func.isRequired,
-    onNotifyToggle: PropTypes.func.isRequired,
-    onReport: PropTypes.func.isRequired,
-    onMute: PropTypes.func.isRequired,
-    onBlockDomain: PropTypes.func.isRequired,
-    onUnblockDomain: PropTypes.func.isRequired,
-    onEndorseToggle: PropTypes.func.isRequired,
-    onAddToList: PropTypes.func.isRequired,
-    onEditAccountNote: PropTypes.func.isRequired,
-    onChangeLanguages: PropTypes.func.isRequired,
-    onInteractionModal: PropTypes.func.isRequired,
-    onOpenAvatar: PropTypes.func.isRequired,
-    onOpenURL: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    domain: PropTypes.string.isRequired,
-    hidden: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  setRef = c => {
-    this.node = c;
-  };
-
-  openEditProfile = () => {
-    window.open('/settings/profile', '_blank');
-  };
-
-  isStatusesPageActive = (match, location) => {
-    if (!match) {
-      return false;
-    }
-
-    return !location.pathname.match(/\/(followers|following)\/?$/);
-  };
-
-  handleMouseEnter = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-original');
-    }
-  };
-
-  handleMouseLeave = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-static');
-    }
-  };
-
-  handleAvatarClick = e => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.props.onOpenAvatar();
-    }
-  };
-
-  handleShare = () => {
-    const { account } = this.props;
-
-    navigator.share({
-      url: account.get('url'),
-    }).catch((e) => {
-      if (e.name !== 'AbortError') console.error(e);
-    });
-  };
-
-  handleHashtagClick = e => {
-    const { history } = this.props;
-    const value = e.currentTarget.textContent.replace(/^#/, '');
-
-    if (history && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      history.push(`/tags/${value}`);
-    }
-  };
-
-  handleMentionClick = e => {
-    const { history, onOpenURL } = this.props;
-
-    if (history && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-
-      const link = e.currentTarget;
-
-      onOpenURL(link.href, history, () => {
-        window.location = link.href;
-      });
-    }
-  };
-
-  _attachLinkEvents () {
-    const node = this.node;
-
-    if (!node) {
-      return;
-    }
-
-    const links = node.querySelectorAll('a');
-
-    let link;
-
-    for (var i = 0; i < links.length; ++i) {
-      link = links[i];
-
-      if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
-        link.addEventListener('click', this.handleHashtagClick, false);
-      } else if (link.classList.contains('mention')) {
-        link.addEventListener('click', this.handleMentionClick, false);
-      }
-    }
-  }
-
-  componentDidMount () {
-    this._attachLinkEvents();
-  }
-
-  componentDidUpdate () {
-    this._attachLinkEvents();
-  }
-
-  render () {
-    const { account, hidden, intl } = this.props;
-    const { signedIn, permissions } = this.props.identity;
-
-    if (!account) {
-      return null;
-    }
-
-    const suspended    = account.get('suspended');
-    const isRemote     = account.get('acct') !== account.get('username');
-    const remoteDomain = isRemote ? account.get('acct').split('@')[1] : null;
-
-    let actionBtn, bellBtn, lockedIcon, shareBtn;
-
-    let info = [];
-    let menu = [];
-
-    if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
-      info.push(<span key='blocked' className='relationship-tag'><FormattedMessage id='account.blocked' defaultMessage='Blocked' /></span>);
-    }
-
-    if (me !== account.get('id') && account.getIn(['relationship', 'muting'])) {
-      info.push(<span key='muted' className='relationship-tag'><FormattedMessage id='account.muted' defaultMessage='Muted' /></span>);
-    } else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
-      info.push(<span key='domain_blocked' className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>);
-    }
-
-    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
-      bellBtn = <IconButton icon={account.getIn(['relationship', 'notifying']) ? 'bell' : 'bell-o'} iconComponent={account.getIn(['relationship', 'notifying']) ? NotificationsActiveIcon : NotificationsIcon} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
-    }
-
-    if ('share' in navigator) {
-      shareBtn = <IconButton className='optional' iconComponent={ShareIcon} title={intl.formatMessage(messages.share, { name: account.get('username') })} onClick={this.handleShare} />;
-    } else {
-      shareBtn = <CopyIconButton className='optional' title={intl.formatMessage(messages.copy)} value={account.get('url')} />;
-    }
-
-    if (me !== account.get('id')) {
-      if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded
-        actionBtn = <Button disabled><LoadingIndicator /></Button>;
-      } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) })} text={intl.formatMessage(messageForFollowButton(account.get('relationship')))} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
-      } else if (account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
-      }
-    } else {
-      actionBtn = <Button text={intl.formatMessage(messages.edit_profile)} onClick={this.openEditProfile} />;
-    }
-
-    if (account.get('moved') && !account.getIn(['relationship', 'following'])) {
-      actionBtn = '';
-    }
-
-    if (account.get('locked')) {
-      lockedIcon = <Icon id='lock' icon={LockIcon} title={intl.formatMessage(messages.account_locked)} />;
-    }
-
-    if (signedIn && account.get('id') !== me && !account.get('suspended')) {
-      menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention });
-      menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect });
-      menu.push(null);
-    }
-
-    if (isRemote) {
-      menu.push({ text: intl.formatMessage(messages.openOriginalPage), href: account.get('url') });
-      menu.push(null);
-    }
-
-    if (account.get('id') === me) {
-      menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
-      menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
-      menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' });
-      menu.push(null);
-      menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
-      menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' });
-      menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' });
-      menu.push({ text: intl.formatMessage(messages.followed_tags), to: '/followed_tags' });
-      menu.push(null);
-      menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
-      menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
-      menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
-    } else if (signedIn) {
-      if (account.getIn(['relationship', 'following'])) {
-        if (!account.getIn(['relationship', 'muting'])) {
-          if (account.getIn(['relationship', 'showing_reblogs'])) {
-            menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
-          } else {
-            menu.push({ text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
-          }
-
-          menu.push({ text: intl.formatMessage(messages.languages), action: this.props.onChangeLanguages });
-          menu.push(null);
-        }
-
-        menu.push({ text: intl.formatMessage(account.getIn(['relationship', 'endorsed']) ? messages.unendorse : messages.endorse), action: this.props.onEndorseToggle });
-        menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: this.props.onAddToList });
-        menu.push(null);
-      }
-
-      if (account.getIn(['relationship', 'muting'])) {
-        menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.props.onMute });
-      } else {
-        menu.push({ text: intl.formatMessage(messages.mute, { name: account.get('username') }), action: this.props.onMute, dangerous: true });
-      }
-
-      if (account.getIn(['relationship', 'blocking'])) {
-        menu.push({ text: intl.formatMessage(messages.unblock, { name: account.get('username') }), action: this.props.onBlock });
-      } else {
-        menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.props.onBlock, dangerous: true });
-      }
-
-      if (!account.get('suspended')) {
-        menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport, dangerous: true });
-      }
-    }
-
-    if (signedIn && isRemote) {
-      menu.push(null);
-
-      if (account.getIn(['relationship', 'domain_blocking'])) {
-        menu.push({ text: intl.formatMessage(messages.unblockDomain, { domain: remoteDomain }), action: this.props.onUnblockDomain });
-      } else {
-        menu.push({ text: intl.formatMessage(messages.blockDomain, { domain: remoteDomain }), action: this.props.onBlockDomain, dangerous: true });
-      }
-    }
-
-    if ((account.get('id') !== me && (permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) || (isRemote && (permissions & PERMISSION_MANAGE_FEDERATION) === PERMISSION_MANAGE_FEDERATION)) {
-      menu.push(null);
-      if ((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) {
-        menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/admin/accounts/${account.get('id')}` });
-      }
-      if (isRemote && (permissions & PERMISSION_MANAGE_FEDERATION) === PERMISSION_MANAGE_FEDERATION) {
-        menu.push({ text: intl.formatMessage(messages.admin_domain, { domain: remoteDomain }), href: `/admin/instances/${remoteDomain}` });
-      }
-    }
-
-    const content         = { __html: account.get('note_emojified') };
-    const displayNameHtml = { __html: account.get('display_name_html') };
-    const fields          = account.get('fields');
-    const isLocal         = account.get('acct').indexOf('@') === -1;
-    const username        = account.get('acct').split('@')[0];
-    const domain          = isLocal ? localDomain : account.get('acct').split('@')[1];
-    const isIndexable     = !account.get('noindex');
-
-    const badges = [];
-
-    if (account.get('bot')) {
-      badges.push(<AutomatedBadge key='bot-badge' />);
-    } else if (account.get('group')) {
-      badges.push(<GroupBadge key='group-badge' />);
-    }
-
-    account.get('roles', []).forEach((role) => {
-      badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} roleId={role.get('id')} />);
-    });
-
-    return (
-      <div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-        {!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && <FollowRequestNoteContainer account={account} />}
-
-        <div className='account__header__image'>
-          <div className='account__header__info'>
-            {info}
-          </div>
-
-          {!(suspended || hidden) && <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' className='parallax' />}
-        </div>
-
-        <div className='account__header__bar'>
-          <div className='account__header__tabs'>
-            <a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}>
-              <Avatar account={suspended || hidden ? undefined : account} size={90} />
-            </a>
-
-            <div className='account__header__tabs__buttons'>
-              {!hidden && bellBtn}
-              {!hidden && shareBtn}
-              <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' iconComponent={MoreHorizIcon} size={24} direction='right' />
-              {!hidden && actionBtn}
-            </div>
-          </div>
-
-          <div className='account__header__tabs__name'>
-            <h1>
-              <span dangerouslySetInnerHTML={displayNameHtml} />
-              <small>
-                <span>@{username}<span className='invisible'>@{domain}</span></span>
-                <DomainPill username={username} domain={domain} isSelf={me === account.get('id')} />
-                {lockedIcon}
-              </small>
-            </h1>
-          </div>
-
-          {badges.length > 0 && (
-            <div className='account__header__badges'>
-              {badges}
-            </div>
-          )}
-
-          {!(suspended || hidden) && (
-            <div className='account__header__extra'>
-              <div className='account__header__bio' ref={this.setRef}>
-                {(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />}
-
-                {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
-
-                <div className='account__header__fields'>
-                  <dl>
-                    <dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>
-                    <dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd>
-                  </dl>
-
-                  {fields.map((pair, i) => (
-                    <dl key={i} className={classNames({ verified: pair.get('verified_at') })}>
-                      <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
-
-                      <dd className='translate' title={pair.get('value_plain')}>
-                        {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' icon={CheckIcon} className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
-                      </dd>
-                    </dl>
-                  ))}
-                </div>
-              </div>
-
-              <div className='account__header__extra__links'>
-                <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
-                  <ShortNumber
-                    value={account.get('statuses_count')}
-                    renderer={StatusesCounter}
-                  />
-                </NavLink>
-
-                <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
-                  <ShortNumber
-                    value={account.get('following_count')}
-                    renderer={FollowingCounter}
-                  />
-                </NavLink>
-
-                <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
-                  <ShortNumber
-                    value={account.get('followers_count')}
-                    renderer={FollowersCounter}
-                  />
-                </NavLink>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <Helmet>
-          <title>{titleFromAccount(account)}</title>
-          <meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
-          <link rel='canonical' href={account.get('url')} />
-        </Helmet>
-      </div>
-    );
-  }
-
-}
-
-export default withRouter(withIdentity(injectIntl(Header)));

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

@@ -11,11 +11,15 @@ import { Icon } from 'mastodon/components/icon';
 import { formatTime } from 'mastodon/features/video';
 import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
 import type { Status, MediaAttachment } from 'mastodon/models/status';
+import { useAppSelector } from 'mastodon/store';
 
 export const MediaItem: React.FC<{
   attachment: MediaAttachment;
   onOpenMedia: (arg0: MediaAttachment) => void;
 }> = ({ attachment, onOpenMedia }) => {
+  const account = useAppSelector((state) =>
+    state.accounts.get(attachment.getIn(['status', 'account']) as string),
+  );
   const [visible, setVisible] = useState(
     (displayMedia !== 'hide_all' &&
       !attachment.getIn(['status', 'sensitive'])) ||
@@ -66,11 +70,10 @@ export const MediaItem: React.FC<{
     attachment.get('description')) as string | undefined;
   const previewUrl = attachment.get('preview_url') as string;
   const fullUrl = attachment.get('url') as string;
-  const avatarUrl = status.getIn(['account', 'avatar_static']) as string;
+  const avatarUrl = account?.avatar_static;
   const lang = status.get('language') as string;
   const blurhash = attachment.get('blurhash') as string;
   const statusId = status.get('id') as string;
-  const acct = status.getIn(['account', 'acct']) as string;
   const type = attachment.get('type') as string;
 
   let thumbnail;
@@ -93,7 +96,6 @@ export const MediaItem: React.FC<{
         <img
           src={previewUrl || avatarUrl}
           alt={description}
-          title={description}
           lang={lang}
           onLoad={handleImageLoad}
         />
@@ -113,7 +115,6 @@ export const MediaItem: React.FC<{
       <img
         src={previewUrl}
         alt={description}
-        title={description}
         lang={lang}
         style={{ objectPosition: `${x}% ${y}%` }}
         onLoad={handleImageLoad}
@@ -131,7 +132,6 @@ export const MediaItem: React.FC<{
         <video
           className='media-gallery__item-gifv-thumbnail'
           aria-label={description}
-          title={description}
           lang={lang}
           src={fullUrl}
           onMouseEnter={handleMouseEnter}
@@ -184,7 +184,7 @@ export const MediaItem: React.FC<{
 
       <a
         className='media-gallery__item-thumbnail'
-        href={`/@${acct}/${statusId}`}
+        href={`/@${account?.acct}/${statusId}`}
         onClick={handleClick}
         target='_blank'
         rel='noopener noreferrer'

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

@@ -1,241 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import { lookupAccount, fetchAccount } from 'mastodon/actions/accounts';
-import { openModal } from 'mastodon/actions/modal';
-import { ColumnBackButton } from 'mastodon/components/column_back_button';
-import { LoadMore } from 'mastodon/components/load_more';
-import { LoadingIndicator } from 'mastodon/components/loading_indicator';
-import ScrollContainer from 'mastodon/containers/scroll_container';
-import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
-import { normalizeForLookup } from 'mastodon/reducers/accounts_map';
-import { getAccountGallery } from 'mastodon/selectors';
-
-import { expandAccountMediaTimeline } from '../../actions/timelines';
-import HeaderContainer from '../account_timeline/containers/header_container';
-import Column from '../ui/components/column';
-
-import { MediaItem } from './components/media_item';
-
-const mapStateToProps = (state, { params: { acct, id } }) => {
-  const accountId = id || state.getIn(['accounts_map', normalizeForLookup(acct)]);
-
-  if (!accountId) {
-    return {
-      isLoading: true,
-    };
-  }
-
-  return {
-    accountId,
-    isAccount: !!state.getIn(['accounts', accountId]),
-    attachments: getAccountGallery(state, accountId),
-    isLoading: state.getIn(['timelines', `account:${accountId}:media`, 'isLoading']),
-    hasMore: state.getIn(['timelines', `account:${accountId}:media`, 'hasMore']),
-    suspended: state.getIn(['accounts', accountId, 'suspended'], false),
-    blockedBy: state.getIn(['relationships', accountId, 'blocked_by'], false),
-  };
-};
-
-class LoadMoreMedia extends ImmutablePureComponent {
-
-  static propTypes = {
-    maxId: PropTypes.string,
-    onLoadMore: PropTypes.func.isRequired,
-  };
-
-  handleLoadMore = () => {
-    this.props.onLoadMore(this.props.maxId);
-  };
-
-  render () {
-    return (
-      <LoadMore
-        disabled={this.props.disabled}
-        onClick={this.handleLoadMore}
-      />
-    );
-  }
-
-}
-
-class AccountGallery extends ImmutablePureComponent {
-
-  static propTypes = {
-    params: PropTypes.shape({
-      acct: PropTypes.string,
-      id: PropTypes.string,
-    }).isRequired,
-    accountId: PropTypes.string,
-    dispatch: PropTypes.func.isRequired,
-    attachments: ImmutablePropTypes.list.isRequired,
-    isLoading: PropTypes.bool,
-    hasMore: PropTypes.bool,
-    isAccount: PropTypes.bool,
-    blockedBy: PropTypes.bool,
-    suspended: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-  };
-
-  state = {
-    width: 323,
-  };
-
-  _load () {
-    const { accountId, isAccount, dispatch } = this.props;
-
-    if (!isAccount) dispatch(fetchAccount(accountId));
-    dispatch(expandAccountMediaTimeline(accountId));
-  }
-
-  componentDidMount () {
-    const { params: { acct }, accountId, dispatch } = this.props;
-
-    if (accountId) {
-      this._load();
-    } else {
-      dispatch(lookupAccount(acct));
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    const { params: { acct }, accountId, dispatch } = this.props;
-
-    if (prevProps.accountId !== accountId && accountId) {
-      this._load();
-    } else if (prevProps.params.acct !== acct) {
-      dispatch(lookupAccount(acct));
-    }
-  }
-
-  handleScrollToBottom = () => {
-    if (this.props.hasMore) {
-      this.handleLoadMore(this.props.attachments.size > 0 ? this.props.attachments.last().getIn(['status', 'id']) : undefined);
-    }
-  };
-
-  handleScroll = e => {
-    const { scrollTop, scrollHeight, clientHeight } = e.target;
-    const offset = scrollHeight - scrollTop - clientHeight;
-
-    if (150 > offset && !this.props.isLoading) {
-      this.handleScrollToBottom();
-    }
-  };
-
-  handleLoadMore = maxId => {
-    this.props.dispatch(expandAccountMediaTimeline(this.props.accountId, { maxId }));
-  };
-
-  handleLoadOlder = e => {
-    e.preventDefault();
-    this.handleScrollToBottom();
-  };
-
-  handleOpenMedia = attachment => {
-    const { dispatch } = this.props;
-    const statusId = attachment.getIn(['status', 'id']);
-    const lang = attachment.getIn(['status', 'language']);
-
-    if (attachment.get('type') === 'video') {
-      dispatch(openModal({
-        modalType: 'VIDEO',
-        modalProps: { media: attachment, statusId, lang, options: { autoPlay: true } },
-      }));
-    } else if (attachment.get('type') === 'audio') {
-      dispatch(openModal({
-        modalType: 'AUDIO',
-        modalProps: { media: attachment, statusId, lang, options: { autoPlay: true } },
-      }));
-    } else {
-      const media = attachment.getIn(['status', 'media_attachments']);
-      const index = media.findIndex(x => x.get('id') === attachment.get('id'));
-
-      dispatch(openModal({
-        modalType: 'MEDIA',
-        modalProps: { media, index, statusId, lang },
-      }));
-    }
-  };
-
-  handleRef = c => {
-    if (c) {
-      this.setState({ width: c.offsetWidth });
-    }
-  };
-
-  render () {
-    const { attachments, isLoading, hasMore, isAccount, multiColumn, blockedBy, suspended } = this.props;
-    const { width } = this.state;
-
-    if (!isAccount) {
-      return (
-        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
-      );
-    }
-
-    if (!attachments && isLoading) {
-      return (
-        <Column>
-          <LoadingIndicator />
-        </Column>
-      );
-    }
-
-    let loadOlder = null;
-
-    if (hasMore && !(isLoading && attachments.size === 0)) {
-      loadOlder = <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />;
-    }
-
-    let emptyMessage;
-
-    if (suspended) {
-      emptyMessage = <FormattedMessage id='empty_column.account_suspended' defaultMessage='Account suspended' />;
-    } else if (blockedBy) {
-      emptyMessage = <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />;
-    }
-
-    return (
-      <Column>
-        <ColumnBackButton />
-
-        <ScrollContainer scrollKey='account_gallery'>
-          <div className='scrollable scrollable--flex' onScroll={this.handleScroll}>
-            <HeaderContainer accountId={this.props.accountId} />
-
-            {(suspended || blockedBy) ? (
-              <div className='empty-column-indicator'>
-                {emptyMessage}
-              </div>
-            ) : (
-              <div role='feed' className='account-gallery__container' ref={this.handleRef}>
-                {attachments.map((attachment, index) => attachment === null ? (
-                  <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
-                ) : (
-                  <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
-                ))}
-
-                {loadOlder}
-              </div>
-            )}
-
-            {isLoading && attachments.size === 0 && (
-              <div className='scrollable__append'>
-                <LoadingIndicator />
-              </div>
-            )}
-          </div>
-        </ScrollContainer>
-      </Column>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(AccountGallery);