Merge: Significant rework.

2023-05-11 10:20:09 +01:00 · 2023-05-11 10:20:09 +01:00 · 1fda4a737f
parent a4e33cd038 2d087be65b
commit 1fda4a737f
416 changed files with 9497 additions and 4680 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -56,6 +56,7 @@ module.exports = {
    },
    polyfills: [
      'es:all', // core-js
+      'fetch', // not polyfilled, but ignore it
      'IntersectionObserver', // npm:intersection-observer
      'Promise', // core-js
      'ResizeObserver', // npm:resize-observer-polyfill
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,4 +1,4 @@
-image: node:18
+image: node:20

 variables:
  NODE_ENV: test
--- a/.tool-versions
+++ b/.tool-versions
@ -1 +1 @@
-nodejs 18.14.0
+nodejs 20.0.0
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -10,10 +10,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: Support posts filtering on recent Mastodon versions
 - Reactions: Support custom emoji reactions
 - Compatbility: Support Mastodon v2 timeline filters.
+- Compatbility: Preliminary support for Ditto backend.
+- Posts: Support dislikes on Friendica.
+- UI: added a character counter to some textareas.

 ### Changed
 - Posts: truncate Nostr pubkeys in reply mentions.
 - Posts: upgraded emoji picker component.
+- Posts: improved design of threads.
+- UI: unified design of "approve" and "reject" buttons in follow requests and waitlist.
+- UI: added sticky column header.
+- UI: add specific zones the user can drag-and-drop files.

 ### Fixed
 - Posts: fixed emojis being cut off in reactions modal.
@ -23,6 +30,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Profile: fix "load more" button height on account gallery page.
 - 18n: fixed Chinese language being detected from the browser.
 - Conversations: fixed pagination (Mastodon).
+- Compatibility: fix version parsing for Friendica.
+- UI: fixed various overflow issues related to long usernames.
+- UI: fixed display of Markdown code blocks in the reply indicator.

 ## [3.2.0] - 2023-02-15

--- a/2
+++ b/2
@ -1,4 +1,4 @@
-FROM node:18 as build
+FROM node:20 as build
 WORKDIR /app
 COPY package.json .
 COPY yarn.lock .
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@ -1,4 +1,4 @@
-FROM node:18
+FROM node:20

 RUN apt-get update &&\
    apt-get install -y inotify-tools &&\
--- a/app/soapbox/actions/tests/account-notes.test.ts
+++ b/app/soapbox/actions/tests/account-notes.test.ts
@ -1,10 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';

 import { __stub } from 'soapbox/api';
+import { buildRelationship } from 'soapbox/jest/factory';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { ReducerRecord, EditRecord } from 'soapbox/reducers/account-notes';

-import { normalizeAccount, normalizeRelationship } from '../../normalizers';
+import { normalizeAccount } from '../../normalizers';
 import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';

 import type { Account } from 'soapbox/types/entities';
@ -66,7 +67,7 @@ describe('initAccountNoteModal()', () => {

  beforeEach(() => {
    const state = rootState
-      .set('relationships', ImmutableMap({ '1': normalizeRelationship({ note: 'hello' }) }));
+      .set('relationships', ImmutableMap({ '1': buildRelationship({ note: 'hello' }) }));
    store = mockStore(state);
  });

--- a/app/soapbox/actions/tests/accounts.test.ts
+++ b/app/soapbox/actions/tests/accounts.test.ts
@ -1,10 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';

 import { __stub } from 'soapbox/api';
+import { buildRelationship } from 'soapbox/jest/factory';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { ListRecord, ReducerRecord } from 'soapbox/reducers/user-lists';

-import { normalizeAccount, normalizeInstance, normalizeRelationship } from '../../normalizers';
+import { normalizeAccount, normalizeInstance } from '../../normalizers';
 import {
  authorizeFollowRequest,
  blockAccount,
@ -1340,7 +1341,7 @@ describe('fetchRelationships()', () => {
    describe('without newAccountIds', () => {
      beforeEach(() => {
        const state = rootState
-          .set('relationships', ImmutableMap({ [id]: normalizeRelationship({}) }))
+          .set('relationships', ImmutableMap({ [id]: buildRelationship() }))
          .set('me', '123');
        store = mockStore(state);
      });
--- a/app/soapbox/actions/auth.ts
+++ b/app/soapbox/actions/auth.ts
@ -242,7 +242,8 @@ export const fetchOwnAccounts = () =>
    return state.auth.users.forEach((user) => {
      const account = state.accounts.get(user.id);
      if (!account) {
-        dispatch(verifyCredentials(user.access_token, user.url));
+        dispatch(verifyCredentials(user.access_token, user.url))
+          .catch(() => console.warn(`Failed to load account: ${user.url}`));
      }
    });
  };
--- a/app/soapbox/actions/compose.ts
+++ b/app/soapbox/actions/compose.ts
@ -22,6 +22,7 @@ import { createStatus } from './statuses';

 import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import type { Emoji } from 'soapbox/features/emoji';
+import type { Group } from 'soapbox/schemas';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { Account, APIEntity, Status, Tag } from 'soapbox/types/entities';
 import type { History } from 'soapbox/types/history';
@ -48,6 +49,7 @@ const COMPOSE_UPLOAD_FAIL     = 'COMPOSE_UPLOAD_FAIL';
 const COMPOSE_UPLOAD_PROGRESS = 'COMPOSE_UPLOAD_PROGRESS';
 const COMPOSE_UPLOAD_UNDO     = 'COMPOSE_UPLOAD_UNDO';
 const COMPOSE_GROUP_POST      = 'COMPOSE_GROUP_POST';
+const COMPOSE_SET_GROUP_TIMELINE_VISIBLE = 'COMPOSE_SET_GROUP_TIMELINE_VISIBLE';

 const COMPOSE_SUGGESTIONS_CLEAR = 'COMPOSE_SUGGESTIONS_CLEAR';
 const COMPOSE_SUGGESTIONS_READY = 'COMPOSE_SUGGESTIONS_READY';
@ -167,6 +169,14 @@ const cancelQuoteCompose = () => ({
  id: 'compose-modal',
 });

+const groupComposeModal = (group: Group) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const composeId = `group:${group.id}`;
+
+    dispatch(groupCompose(composeId, group.id));
+    dispatch(openModal('COMPOSE', { composeId }));
+  };
+
 const resetCompose = (composeId = 'compose-modal') => ({
  type: COMPOSE_RESET,
  id: composeId,
@ -292,7 +302,10 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false
      to,
    };

-    if (compose.privacy === 'group') params.group_id = compose.group_id;
+    if (compose.privacy === 'group') {
+      params.group_id = compose.group_id;
+      params.group_timeline_visible = compose.group_timeline_visible; // Truth Social
+    }

    dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) {
      if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && routerHistory) {
@ -483,6 +496,12 @@ const groupCompose = (composeId: string, groupId: string) =>
    });
  };

+const setGroupTimelineVisible = (composeId: string, groupTimelineVisible: boolean) => ({
+  type: COMPOSE_SET_GROUP_TIMELINE_VISIBLE,
+  id: composeId,
+  groupTimelineVisible,
+});
+
 const clearComposeSuggestions = (composeId: string) => {
  if (cancelFetchComposeSuggestionsAccounts) {
    cancelFetchComposeSuggestionsAccounts();
@ -792,6 +811,7 @@ export {
  COMPOSE_ADD_TO_MENTIONS,
  COMPOSE_REMOVE_FROM_MENTIONS,
  COMPOSE_SET_STATUS,
+  COMPOSE_SET_GROUP_TIMELINE_VISIBLE,
  setComposeToStatus,
  changeCompose,
  replyCompose,
@ -818,6 +838,8 @@ export {
  uploadComposeFail,
  undoUploadCompose,
  groupCompose,
+  groupComposeModal,
+  setGroupTimelineVisible,
  clearComposeSuggestions,
  fetchComposeSuggestions,
  readyComposeSuggestionsEmojis,
--- a/app/soapbox/actions/groups.ts
+++ b/app/soapbox/actions/groups.ts
@ -1,21 +1,14 @@
-import { defineMessages } from 'react-intl';
-
 import { deleteEntities } from 'soapbox/entity-store/actions';
-import toast from 'soapbox/toast';

 import api, { getLinks } from '../api';

 import { fetchRelationships } from './accounts';
 import { importFetchedGroups, importFetchedAccounts } from './importer';
-import { closeModal, openModal } from './modals';
-import { deleteFromTimelines } from './timelines';

 import type { AxiosError } from 'axios';
 import type { GroupRole } from 'soapbox/reducers/group-memberships';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Group } from 'soapbox/types/entities';
-
-const GROUP_EDITOR_SET = 'GROUP_EDITOR_SET';
+import type { APIEntity } from 'soapbox/types/entities';

 const GROUP_CREATE_REQUEST = 'GROUP_CREATE_REQUEST';
 const GROUP_CREATE_SUCCESS = 'GROUP_CREATE_SUCCESS';
@ -41,10 +34,6 @@ const GROUP_RELATIONSHIPS_FETCH_REQUEST = 'GROUP_RELATIONSHIPS_FETCH_REQUEST';
 const GROUP_RELATIONSHIPS_FETCH_SUCCESS = 'GROUP_RELATIONSHIPS_FETCH_SUCCESS';
 const GROUP_RELATIONSHIPS_FETCH_FAIL    = 'GROUP_RELATIONSHIPS_FETCH_FAIL';

-const GROUP_DELETE_STATUS_REQUEST = 'GROUP_DELETE_STATUS_REQUEST';
-const GROUP_DELETE_STATUS_SUCCESS = 'GROUP_DELETE_STATUS_SUCCESS';
-const GROUP_DELETE_STATUS_FAIL    = 'GROUP_DELETE_STATUS_FAIL';
-
 const GROUP_KICK_REQUEST = 'GROUP_KICK_REQUEST';
 const GROUP_KICK_SUCCESS = 'GROUP_KICK_SUCCESS';
 const GROUP_KICK_FAIL    = 'GROUP_KICK_FAIL';
@ -97,100 +86,6 @@ const GROUP_MEMBERSHIP_REQUEST_REJECT_REQUEST = 'GROUP_MEMBERSHIP_REQUEST_REJECT
 const GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS = 'GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS';
 const GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL    = 'GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL';

-const GROUP_EDITOR_TITLE_CHANGE       = 'GROUP_EDITOR_TITLE_CHANGE';
-const GROUP_EDITOR_DESCRIPTION_CHANGE = 'GROUP_EDITOR_DESCRIPTION_CHANGE';
-const GROUP_EDITOR_PRIVACY_CHANGE     = 'GROUP_EDITOR_PRIVACY_CHANGE';
-const GROUP_EDITOR_MEDIA_CHANGE       = 'GROUP_EDITOR_MEDIA_CHANGE';
-
-const GROUP_EDITOR_RESET = 'GROUP_EDITOR_RESET';
-
-const messages = defineMessages({
-  success: { id: 'manage_group.submit_success', defaultMessage: 'The group was created' },
-  editSuccess: { id: 'manage_group.edit_success', defaultMessage: 'The group was edited' },
-  joinSuccess: { id: 'group.join.success', defaultMessage: 'Joined the group' },
-  joinRequestSuccess: { id: 'group.join.request_success', defaultMessage: 'Requested to join the group' },
-  leaveSuccess: { id: 'group.leave.success', defaultMessage: 'Left the group' },
-  view: { id: 'toast.view', defaultMessage: 'View' },
-});
-
-const editGroup = (group: Group) => (dispatch: AppDispatch) => {
-  dispatch({
-    type: GROUP_EDITOR_SET,
-    group,
-  });
-  dispatch(openModal('MANAGE_GROUP'));
-};
-
-const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    dispatch(createGroupRequest());
-
-    return api(getState).post('/api/v1/groups', params, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    })
-      .then(({ data }) => {
-        dispatch(importFetchedGroups([data]));
-        dispatch(createGroupSuccess(data));
-        toast.success(messages.success, {
-          actionLabel: messages.view,
-          actionLink: `/groups/${data.id}`,
-        });
-
-        if (shouldReset) {
-          dispatch(resetGroupEditor());
-        }
-
-        return data;
-      }).catch(err => dispatch(createGroupFail(err)));
-  };
-
-const createGroupRequest = () => ({
-  type: GROUP_CREATE_REQUEST,
-});
-
-const createGroupSuccess = (group: APIEntity) => ({
-  type: GROUP_CREATE_SUCCESS,
-  group,
-});
-
-const createGroupFail = (error: AxiosError) => ({
-  type: GROUP_CREATE_FAIL,
-  error,
-});
-
-const updateGroup = (id: string, params: Record<string, any>, shouldReset?: boolean) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    dispatch(updateGroupRequest());
-
-    return api(getState).put(`/api/v1/groups/${id}`, params)
-      .then(({ data }) => {
-        dispatch(importFetchedGroups([data]));
-        dispatch(updateGroupSuccess(data));
-        toast.success(messages.editSuccess);
-
-        if (shouldReset) {
-          dispatch(resetGroupEditor());
-        }
-        dispatch(closeModal('MANAGE_GROUP'));
-      }).catch(err => dispatch(updateGroupFail(err)));
-  };
-
-const updateGroupRequest = () => ({
-  type: GROUP_UPDATE_REQUEST,
-});
-
-const updateGroupSuccess = (group: APIEntity) => ({
-  type: GROUP_UPDATE_SUCCESS,
-  group,
-});
-
-const updateGroupFail = (error: AxiosError) => ({
-  type: GROUP_UPDATE_FAIL,
-  error,
-});
-
 const deleteGroup = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => {
  dispatch(deleteEntities([id], 'Group'));

@ -306,36 +201,6 @@ const fetchGroupRelationshipsFail = (error: AxiosError) => ({
  skipNotFound: true,
 });

-const groupDeleteStatus = (groupId: string, statusId: string) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    dispatch(groupDeleteStatusRequest(groupId, statusId));
-
-    return api(getState).delete(`/api/v1/groups/${groupId}/statuses/${statusId}`)
-      .then(() => {
-        dispatch(deleteFromTimelines(statusId));
-        dispatch(groupDeleteStatusSuccess(groupId, statusId));
-      }).catch(err => dispatch(groupDeleteStatusFail(groupId, statusId, err)));
-  };
-
-const groupDeleteStatusRequest = (groupId: string, statusId: string) => ({
-  type: GROUP_DELETE_STATUS_REQUEST,
-  groupId,
-  statusId,
-});
-
-const groupDeleteStatusSuccess = (groupId: string, statusId: string) => ({
-  type: GROUP_DELETE_STATUS_SUCCESS,
-  groupId,
-  statusId,
-});
-
-const groupDeleteStatusFail = (groupId: string, statusId: string, error: AxiosError) => ({
-  type: GROUP_DELETE_STATUS_SUCCESS,
-  groupId,
-  statusId,
-  error,
-});
-
 const groupKick = (groupId: string, accountId: string) =>
  (dispatch: AppDispatch, getState: () => RootState) => {
    dispatch(groupKickRequest(groupId, accountId));
@ -758,55 +623,7 @@ const rejectGroupMembershipRequestFail = (groupId: string, accountId: string, er
  error,
 });

-const changeGroupEditorTitle = (value: string) => ({
-  type: GROUP_EDITOR_TITLE_CHANGE,
-  value,
-});
-
-const changeGroupEditorDescription = (value: string) => ({
-  type: GROUP_EDITOR_DESCRIPTION_CHANGE,
-  value,
-});
-
-const changeGroupEditorPrivacy = (value: boolean) => ({
-  type: GROUP_EDITOR_PRIVACY_CHANGE,
-  value,
-});
-
-const changeGroupEditorMedia = (mediaType: 'header' | 'avatar', file: File) => ({
-  type: GROUP_EDITOR_MEDIA_CHANGE,
-  mediaType,
-  value: file,
-});
-
-const resetGroupEditor = () => ({
-  type: GROUP_EDITOR_RESET,
-});
-
-const submitGroupEditor = (shouldReset?: boolean) => (dispatch: AppDispatch, getState: () => RootState) => {
-  const groupId     = getState().group_editor.groupId;
-  const displayName = getState().group_editor.displayName;
-  const note        = getState().group_editor.note;
-  const avatar      = getState().group_editor.avatar;
-  const header      = getState().group_editor.header;
-
-  const params: Record<string, any> = {
-    display_name: displayName,
-    note,
-  };
-
-  if (avatar) params.avatar = avatar;
-  if (header) params.header = header;
-
-  if (groupId === null) {
-    return dispatch(createGroup(params, shouldReset));
-  } else {
-    return dispatch(updateGroup(groupId, params, shouldReset));
-  }
-};
-
 export {
-  GROUP_EDITOR_SET,
  GROUP_CREATE_REQUEST,
  GROUP_CREATE_SUCCESS,
  GROUP_CREATE_FAIL,
@ -825,9 +642,6 @@ export {
  GROUP_RELATIONSHIPS_FETCH_REQUEST,
  GROUP_RELATIONSHIPS_FETCH_SUCCESS,
  GROUP_RELATIONSHIPS_FETCH_FAIL,
-  GROUP_DELETE_STATUS_REQUEST,
-  GROUP_DELETE_STATUS_SUCCESS,
-  GROUP_DELETE_STATUS_FAIL,
  GROUP_KICK_REQUEST,
  GROUP_KICK_SUCCESS,
  GROUP_KICK_FAIL,
@ -867,20 +681,6 @@ export {
  GROUP_MEMBERSHIP_REQUEST_REJECT_REQUEST,
  GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS,
  GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL,
-  GROUP_EDITOR_TITLE_CHANGE,
-  GROUP_EDITOR_DESCRIPTION_CHANGE,
-  GROUP_EDITOR_PRIVACY_CHANGE,
-  GROUP_EDITOR_MEDIA_CHANGE,
-  GROUP_EDITOR_RESET,
-  editGroup,
-  createGroup,
-  createGroupRequest,
-  createGroupSuccess,
-  createGroupFail,
-  updateGroup,
-  updateGroupRequest,
-  updateGroupSuccess,
-  updateGroupFail,
  deleteGroup,
  deleteGroupRequest,
  deleteGroupSuccess,
@ -897,10 +697,6 @@ export {
  fetchGroupRelationshipsRequest,
  fetchGroupRelationshipsSuccess,
  fetchGroupRelationshipsFail,
-  groupDeleteStatus,
-  groupDeleteStatusRequest,
-  groupDeleteStatusSuccess,
-  groupDeleteStatusFail,
  groupKick,
  groupKickRequest,
  groupKickSuccess,
@ -953,10 +749,4 @@ export {
  rejectGroupMembershipRequestRequest,
  rejectGroupMembershipRequestSuccess,
  rejectGroupMembershipRequestFail,
-  changeGroupEditorTitle,
-  changeGroupEditorDescription,
-  changeGroupEditorPrivacy,
-  changeGroupEditorMedia,
-  resetGroupEditor,
-  submitGroupEditor,
 };
--- a/app/soapbox/actions/importer/index.ts
+++ b/app/soapbox/actions/importer/index.ts
@ -74,7 +74,7 @@ const importFetchedGroup = (group: APIEntity) =>
  importFetchedGroups([group]);

 const importFetchedGroups = (groups: APIEntity[]) => {
-  const entities = filteredArray(groupSchema).catch([]).parse(groups);
+  const entities = filteredArray(groupSchema).parse(groups);
  return importGroups(entities);
 };

--- a/app/soapbox/actions/interactions.ts
+++ b/app/soapbox/actions/interactions.ts
@ -20,6 +20,10 @@ const FAVOURITE_REQUEST = 'FAVOURITE_REQUEST';
 const FAVOURITE_SUCCESS = 'FAVOURITE_SUCCESS';
 const FAVOURITE_FAIL    = 'FAVOURITE_FAIL';

+const DISLIKE_REQUEST = 'DISLIKE_REQUEST';
+const DISLIKE_SUCCESS = 'DISLIKE_SUCCESS';
+const DISLIKE_FAIL    = 'DISLIKE_FAIL';
+
 const UNREBLOG_REQUEST = 'UNREBLOG_REQUEST';
 const UNREBLOG_SUCCESS = 'UNREBLOG_SUCCESS';
 const UNREBLOG_FAIL    = 'UNREBLOG_FAIL';
@ -28,6 +32,10 @@ const UNFAVOURITE_REQUEST = 'UNFAVOURITE_REQUEST';
 const UNFAVOURITE_SUCCESS = 'UNFAVOURITE_SUCCESS';
 const UNFAVOURITE_FAIL    = 'UNFAVOURITE_FAIL';

+const UNDISLIKE_REQUEST = 'UNDISLIKE_REQUEST';
+const UNDISLIKE_SUCCESS = 'UNDISLIKE_SUCCESS';
+const UNDISLIKE_FAIL    = 'UNDISLIKE_FAIL';
+
 const REBLOGS_FETCH_REQUEST = 'REBLOGS_FETCH_REQUEST';
 const REBLOGS_FETCH_SUCCESS = 'REBLOGS_FETCH_SUCCESS';
 const REBLOGS_FETCH_FAIL    = 'REBLOGS_FETCH_FAIL';
@ -36,6 +44,10 @@ const FAVOURITES_FETCH_REQUEST = 'FAVOURITES_FETCH_REQUEST';
 const FAVOURITES_FETCH_SUCCESS = 'FAVOURITES_FETCH_SUCCESS';
 const FAVOURITES_FETCH_FAIL    = 'FAVOURITES_FETCH_FAIL';

+const DISLIKES_FETCH_REQUEST = 'DISLIKES_FETCH_REQUEST';
+const DISLIKES_FETCH_SUCCESS = 'DISLIKES_FETCH_SUCCESS';
+const DISLIKES_FETCH_FAIL    = 'DISLIKES_FETCH_FAIL';
+
 const REACTIONS_FETCH_REQUEST = 'REACTIONS_FETCH_REQUEST';
 const REACTIONS_FETCH_SUCCESS = 'REACTIONS_FETCH_SUCCESS';
 const REACTIONS_FETCH_FAIL    = 'REACTIONS_FETCH_FAIL';
@ -96,7 +108,7 @@ const unreblog = (status: StatusEntity) =>
  };

 const toggleReblog = (status: StatusEntity) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
+  (dispatch: AppDispatch) => {
    if (status.reblogged) {
      dispatch(unreblog(status));
    } else {
@ -169,7 +181,7 @@ const unfavourite = (status: StatusEntity) =>
  };

 const toggleFavourite = (status: StatusEntity) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
+  (dispatch: AppDispatch) => {
    if (status.favourited) {
      dispatch(unfavourite(status));
    } else {
@ -215,6 +227,79 @@ const unfavouriteFail = (status: StatusEntity, error: AxiosError) => ({
  skipLoading: true,
 });

+const dislike = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(dislikeRequest(status));
+
+    api(getState).post(`/api/friendica/statuses/${status.get('id')}/dislike`).then(function() {
+      dispatch(dislikeSuccess(status));
+    }).catch(function(error) {
+      dispatch(dislikeFail(status, error));
+    });
+  };
+
+const undislike = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(undislikeRequest(status));
+
+    api(getState).post(`/api/friendica/statuses/${status.get('id')}/undislike`).then(() => {
+      dispatch(undislikeSuccess(status));
+    }).catch(error => {
+      dispatch(undislikeFail(status, error));
+    });
+  };
+
+const toggleDislike = (status: StatusEntity) =>
+  (dispatch: AppDispatch) => {
+    if (status.disliked) {
+      dispatch(undislike(status));
+    } else {
+      dispatch(dislike(status));
+    }
+  };
+
+const dislikeRequest = (status: StatusEntity) => ({
+  type: DISLIKE_REQUEST,
+  status: status,
+  skipLoading: true,
+});
+
+const dislikeSuccess = (status: StatusEntity) => ({
+  type: DISLIKE_SUCCESS,
+  status: status,
+  skipLoading: true,
+});
+
+const dislikeFail = (status: StatusEntity, error: AxiosError) => ({
+  type: DISLIKE_FAIL,
+  status: status,
+  error: error,
+  skipLoading: true,
+});
+
+const undislikeRequest = (status: StatusEntity) => ({
+  type: UNDISLIKE_REQUEST,
+  status: status,
+  skipLoading: true,
+});
+
+const undislikeSuccess = (status: StatusEntity) => ({
+  type: UNDISLIKE_SUCCESS,
+  status: status,
+  skipLoading: true,
+});
+
+const undislikeFail = (status: StatusEntity, error: AxiosError) => ({
+  type: UNDISLIKE_FAIL,
+  status: status,
+  error: error,
+  skipLoading: true,
+});
+
 const bookmark = (status: StatusEntity) =>
  (dispatch: AppDispatch, getState: () => RootState) => {
    dispatch(bookmarkRequest(status));
@ -351,6 +436,38 @@ const fetchFavouritesFail = (id: string, error: AxiosError) => ({
  error,
 });

+const fetchDislikes = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(fetchDislikesRequest(id));
+
+    api(getState).get(`/api/friendica/statuses/${id}/disliked_by`).then(response => {
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
+      dispatch(fetchDislikesSuccess(id, response.data));
+    }).catch(error => {
+      dispatch(fetchDislikesFail(id, error));
+    });
+  };
+
+const fetchDislikesRequest = (id: string) => ({
+  type: DISLIKES_FETCH_REQUEST,
+  id,
+});
+
+const fetchDislikesSuccess = (id: string, accounts: APIEntity[]) => ({
+  type: DISLIKES_FETCH_SUCCESS,
+  id,
+  accounts,
+});
+
+const fetchDislikesFail = (id: string, error: AxiosError) => ({
+  type: DISLIKES_FETCH_FAIL,
+  id,
+  error,
+});
+
 const fetchReactions = (id: string) =>
  (dispatch: AppDispatch, getState: () => RootState) => {
    dispatch(fetchReactionsRequest(id));
@ -498,18 +615,27 @@ export {
  FAVOURITE_REQUEST,
  FAVOURITE_SUCCESS,
  FAVOURITE_FAIL,
+  DISLIKE_REQUEST,
+  DISLIKE_SUCCESS,
+  DISLIKE_FAIL,
  UNREBLOG_REQUEST,
  UNREBLOG_SUCCESS,
  UNREBLOG_FAIL,
  UNFAVOURITE_REQUEST,
  UNFAVOURITE_SUCCESS,
  UNFAVOURITE_FAIL,
+  UNDISLIKE_REQUEST,
+  UNDISLIKE_SUCCESS,
+  UNDISLIKE_FAIL,
  REBLOGS_FETCH_REQUEST,
  REBLOGS_FETCH_SUCCESS,
  REBLOGS_FETCH_FAIL,
  FAVOURITES_FETCH_REQUEST,
  FAVOURITES_FETCH_SUCCESS,
  FAVOURITES_FETCH_FAIL,
+  DISLIKES_FETCH_REQUEST,
+  DISLIKES_FETCH_SUCCESS,
+  DISLIKES_FETCH_FAIL,
  REACTIONS_FETCH_REQUEST,
  REACTIONS_FETCH_SUCCESS,
  REACTIONS_FETCH_FAIL,
@ -546,6 +672,15 @@ export {
  unfavouriteRequest,
  unfavouriteSuccess,
  unfavouriteFail,
+  dislike,
+  undislike,
+  toggleDislike,
+  dislikeRequest,
+  dislikeSuccess,
+  dislikeFail,
+  undislikeRequest,
+  undislikeSuccess,
+  undislikeFail,
  bookmark,
  unbookmark,
  toggleBookmark,
@ -563,6 +698,10 @@ export {
  fetchFavouritesRequest,
  fetchFavouritesSuccess,
  fetchFavouritesFail,
+  fetchDislikes,
+  fetchDislikesRequest,
+  fetchDislikesSuccess,
+  fetchDislikesFail,
  fetchReactions,
  fetchReactionsRequest,
  fetchReactionsSuccess,
--- a/app/soapbox/actions/moderation.tsx
+++ b/app/soapbox/actions/moderation.tsx
@ -112,27 +112,6 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
    }));
  };

-const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () => {}) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    const state = getState();
-    const acct = state.accounts.get(accountId)!.acct;
-    const name = state.accounts.get(accountId)!.username;
-
-    dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/user-off.svg'),
-      heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
-      message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
-      confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
-      onConfirm: () => {
-        dispatch(deleteUsers([accountId]))
-          .then(() => {
-            afterConfirm();
-          })
-          .catch(() => {});
-      },
-    }));
-  };
-
 const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensitive: boolean, afterConfirm = () => {}) =>
  (dispatch: AppDispatch, getState: () => RootState) => {
    const state = getState();
@ -163,7 +142,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
    dispatch(openModal('CONFIRM', {
      icon: require('@tabler/icons/trash.svg'),
      heading: intl.formatMessage(messages.deleteStatusHeading),
-      message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
+      message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
      confirm: intl.formatMessage(messages.deleteStatusConfirm),
      onConfirm: () => {
        dispatch(deleteStatus(statusId)).then(() => {
@ -178,7 +157,6 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
 export {
  deactivateUserModal,
  deleteUserModal,
-  rejectUserModal,
  toggleStatusSensitivityModal,
  deleteStatusModal,
 };
--- a/app/soapbox/actions/reports.ts
+++ b/app/soapbox/actions/reports.ts
@ -4,7 +4,7 @@ import { openModal } from './modals';

 import type { AxiosError } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Account, ChatMessage, Status } from 'soapbox/types/entities';
+import type { Account, ChatMessage, Group, Status } from 'soapbox/types/entities';

 const REPORT_INIT   = 'REPORT_INIT';
 const REPORT_CANCEL = 'REPORT_CANCEL';
@ -20,19 +20,29 @@ const REPORT_BLOCK_CHANGE   = 'REPORT_BLOCK_CHANGE';

 const REPORT_RULE_CHANGE    = 'REPORT_RULE_CHANGE';

+enum ReportableEntities {
+  ACCOUNT = 'ACCOUNT',
+  CHAT_MESSAGE = 'CHAT_MESSAGE',
+  GROUP = 'GROUP',
+  STATUS = 'STATUS'
+}
+
 type ReportedEntity = {
  status?: Status
  chatMessage?: ChatMessage
+  group?: Group
 }

-const initReport = (account: Account, entities?: ReportedEntity) => (dispatch: AppDispatch) => {
-  const { status, chatMessage } = entities || {};
+const initReport = (entityType: ReportableEntities, account: Account, entities?: ReportedEntity) => (dispatch: AppDispatch) => {
+  const { status, chatMessage, group } = entities || {};

  dispatch({
    type: REPORT_INIT,
+    entityType,
    account,
    status,
    chatMessage,
+    group,
  });

  return dispatch(openModal('REPORT'));
@ -56,7 +66,8 @@ const submitReport = () =>
    return api(getState).post('/api/v1/reports', {
      account_id: reports.getIn(['new', 'account_id']),
      status_ids: reports.getIn(['new', 'status_ids']),
-      message_ids: [reports.getIn(['new', 'chat_message', 'id'])],
+      message_ids: [reports.getIn(['new', 'chat_message', 'id'])].filter(Boolean),
+      group_id: reports.getIn(['new', 'group', 'id']),
      rule_ids: reports.getIn(['new', 'rule_ids']),
      comment: reports.getIn(['new', 'comment']),
      forward: reports.getIn(['new', 'forward']),
@ -97,6 +108,7 @@ const changeReportRule = (ruleId: string) => ({
 });

 export {
+  ReportableEntities,
  REPORT_INIT,
  REPORT_CANCEL,
  REPORT_SUBMIT_REQUEST,
--- a/app/soapbox/actions/search.ts
+++ b/app/soapbox/actions/search.ts
@ -1,7 +1,7 @@
 import api from '../api';

 import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedGroups, importFetchedStatuses } from './importer';
+import { importFetchedAccounts, importFetchedStatuses } from './importer';

 import type { AxiosError } from 'axios';
 import type { SearchFilter } from 'soapbox/reducers/search';
@ -83,10 +83,6 @@ const submitSearch = (filter?: SearchFilter) =>
        dispatch(importFetchedStatuses(response.data.statuses));
      }

-      if (response.data.groups) {
-        dispatch(importFetchedGroups(response.data.groups));
-      }
-
      dispatch(fetchSearchSuccess(response.data, value, type));
      dispatch(fetchRelationships(response.data.accounts.map((item: APIEntity) => item.id)));
    }).catch(error => {
@ -143,10 +139,6 @@ const expandSearch = (type: SearchFilter) => (dispatch: AppDispatch, getState: (
      dispatch(importFetchedStatuses(data.statuses));
    }

-    if (data.groups) {
-      dispatch(importFetchedGroups(data.groups));
-    }
-
    dispatch(expandSearchSuccess(data, value, type));
    dispatch(fetchRelationships(data.accounts.map((item: APIEntity) => item.id)));
  }).catch(error => {
--- a/app/soapbox/actions/statuses.ts
+++ b/app/soapbox/actions/statuses.ts
@ -5,6 +5,7 @@ import { shouldHaveCard } from 'soapbox/utils/status';
 import api, { getNextLink } from '../api';

 import { setComposeToStatus } from './compose';
+import { fetchGroupRelationships } from './groups';
 import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { openModal } from './modals';
 import { deleteFromTimelines } from './timelines';
@ -124,6 +125,9 @@ const fetchStatus = (id: string) => {

    return api(getState).get(`/api/v1/statuses/${id}`).then(({ data: status }) => {
      dispatch(importFetchedStatus(status));
+      if (status.group) {
+        dispatch(fetchGroupRelationships([status.group.id]));
+      }
      dispatch({ type: STATUS_FETCH_SUCCESS, status, skipLoading });
      return status;
    }).catch(error => {
--- a/app/soapbox/actions/timelines.ts
+++ b/app/soapbox/actions/timelines.ts
@ -4,7 +4,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { normalizeStatus } from 'soapbox/normalizers';
 import { shouldFilter } from 'soapbox/utils/timelines';

-import api, { getLinks } from '../api';
+import api, { getNextLink, getPrevLink } from '../api';

 import { importFetchedStatus, importFetchedStatuses } from './importer';

@ -139,7 +139,7 @@ const parseTags = (tags: Record<string, any[]> = {}, mode: 'any' | 'all' | 'none
 };

 const replaceHomeTimeline = (
-  accountId: string | null,
+  accountId: string | undefined,
  { maxId }: Record<string, any> = {},
  done?: () => void,
 ) => (dispatch: AppDispatch, _getState: () => RootState) => {
@ -162,7 +162,12 @@ const expandTimeline = (timelineId: string, path: string, params: Record<string,
      return dispatch(noOpAsync());
    }

-    if (!params.max_id && !params.pinned && (timeline.items || ImmutableOrderedSet()).size > 0) {
+    if (
+      !params.max_id &&
+      !params.pinned &&
+      (timeline.items || ImmutableOrderedSet()).size > 0 &&
+      !path.includes('max_id=')
+    ) {
      params.since_id = timeline.getIn(['items', 0]);
    }

@ -171,9 +176,16 @@ const expandTimeline = (timelineId: string, path: string, params: Record<string,
    dispatch(expandTimelineRequest(timelineId, isLoadingMore));

    return api(getState).get(path, { params }).then(response => {
-      const next = getLinks(response).refs.find(link => link.rel === 'next');
      dispatch(importFetchedStatuses(response.data));
-      dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.status === 206, isLoadingRecent, isLoadingMore));
+      dispatch(expandTimelineSuccess(
+        timelineId,
+        response.data,
+        getNextLink(response),
+        getPrevLink(response),
+        response.status === 206,
+        isLoadingRecent,
+        isLoadingMore,
+      ));
      done();
    }).catch(error => {
      dispatch(expandTimelineFail(timelineId, error, isLoadingMore));
@ -181,9 +193,26 @@ const expandTimeline = (timelineId: string, path: string, params: Record<string,
    });
  };

-const expandHomeTimeline = ({ accountId, maxId }: Record<string, any> = {}, done = noOp) => {
-  const endpoint = accountId ? `/api/v1/accounts/${accountId}/statuses` : '/api/v1/timelines/home';
-  const params: any = { max_id: maxId };
+interface ExpandHomeTimelineOpts {
+  accountId?: string
+  maxId?: string
+  url?: string
+}
+
+interface HomeTimelineParams {
+  max_id?: string
+  exclude_replies?: boolean
+  with_muted?: boolean
+}
+
+const expandHomeTimeline = ({ url, accountId, maxId }: ExpandHomeTimelineOpts = {}, done = noOp) => {
+  const endpoint = url || (accountId ? `/api/v1/accounts/${accountId}/statuses` : '/api/v1/timelines/home');
+  const params: HomeTimelineParams = {};
+
+  if (!url && maxId) {
+    params.max_id = maxId;
+  }
+
  if (accountId) {
    params.exclude_replies = true;
    params.with_muted = true;
@ -219,6 +248,9 @@ const expandListTimeline = (id: string, { maxId }: Record<string, any> = {}, don
 const expandGroupTimeline = (id: string, { maxId }: Record<string, any> = {}, done = noOp) =>
  expandTimeline(`group:${id}`, `/api/v1/timelines/group/${id}`, { max_id: maxId }, done);

+const expandGroupTimelineFromTag = (id: string, tagName: string, { maxId }: Record<string, any> = {}, done = noOp) =>
+  expandTimeline(`group:tags:${id}:${tagName}`, `/api/v1/timelines/group/${id}/tags/${tagName}`, { max_id: maxId }, done);
+
 const expandGroupMediaTimeline = (id: string | number, { maxId }: Record<string, any> = {}) =>
  expandTimeline(`group:${id}:media`, `/api/v1/timelines/group/${id}`, { max_id: maxId, only_media: true, limit: 40, with_muted: true });

@ -237,11 +269,20 @@ const expandTimelineRequest = (timeline: string, isLoadingMore: boolean) => ({
  skipLoading: !isLoadingMore,
 });

-const expandTimelineSuccess = (timeline: string, statuses: APIEntity[], next: string | null, partial: boolean, isLoadingRecent: boolean, isLoadingMore: boolean) => ({
+const expandTimelineSuccess = (
+  timeline: string,
+  statuses: APIEntity[],
+  next: string | undefined,
+  prev: string | undefined,
+  partial: boolean,
+  isLoadingRecent: boolean,
+  isLoadingMore: boolean,
+) => ({
  type: TIMELINE_EXPAND_SUCCESS,
  timeline,
  statuses,
  next,
+  prev,
  partial,
  isLoadingRecent,
  skipLoading: !isLoadingMore,
@ -312,6 +353,7 @@ export {
  expandAccountMediaTimeline,
  expandListTimeline,
  expandGroupTimeline,
+  expandGroupTimelineFromTag,
  expandGroupMediaTimeline,
  expandHashtagTimeline,
  expandTimelineRequest,
--- a/app/soapbox/api/hooks/accounts/useAccount.ts
+++ b/app/soapbox/api/hooks/accounts/useAccount.ts
@ -0,0 +1,26 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { type Account, accountSchema } from 'soapbox/schemas';
+
+
+import { useRelationships } from './useRelationships';
+
+function useAccount(id: string) {
+  const api = useApi();
+
+  const { entity: account, ...result } = useEntity<Account>(
+    [Entities.ACCOUNTS, id],
+    () => api.get(`/api/v1/accounts/${id}`),
+    { schema: accountSchema },
+  );
+  const { relationships, isLoading } = useRelationships([account?.id as string]);
+
+  return {
+    ...result,
+    isLoading: result.isLoading || isLoading,
+    account: account ? { ...account, relationship: relationships[0] || null } : undefined,
+  };
+}
+
+export { useAccount };
--- a/app/soapbox/api/hooks/accounts/useRelationships.ts
+++ b/app/soapbox/api/hooks/accounts/useRelationships.ts
@ -0,0 +1,21 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+
+function useRelationships(ids: string[]) {
+  const api = useApi();
+
+  const { entities: relationships, ...result } = useEntities<Relationship>(
+    [Entities.RELATIONSHIPS],
+    () => api.get(`/api/v1/accounts/relationships?${ids.map(id => `id[]=${id}`).join('&')}`),
+    { schema: relationshipSchema, enabled: ids.filter(Boolean).length > 0 },
+  );
+
+  return {
+    ...result,
+    relationships,
+  };
+}
+
+export { useRelationships };
--- a/app/soapbox/api/hooks/groups/useBlockGroupMember.ts
+++ b/app/soapbox/api/hooks/groups/useBlockGroupMember.ts
--- a/app/soapbox/api/hooks/groups/useCancelMembershipRequest.ts
+++ b/app/soapbox/api/hooks/groups/useCancelMembershipRequest.ts
@ -0,0 +1,22 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useCreateEntity } from 'soapbox/entity-store/hooks';
+import { useApi, useOwnAccount } from 'soapbox/hooks';
+
+import type { Group } from 'soapbox/schemas';
+
+function useCancelMembershipRequest(group: Group) {
+  const api = useApi();
+  const me = useOwnAccount();
+
+  const { createEntity, isSubmitting } = useCreateEntity(
+    [Entities.GROUP_RELATIONSHIPS],
+    () => api.post(`/api/v1/groups/${group.id}/membership_requests/${me?.id}/reject`),
+  );
+
+  return {
+    mutate: createEntity,
+    isSubmitting,
+  };
+}
+
+export { useCancelMembershipRequest };
--- a/app/soapbox/api/hooks/groups/useCreateGroup.ts
+++ b/app/soapbox/api/hooks/groups/useCreateGroup.ts
@ -0,0 +1,33 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useCreateEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { groupSchema } from 'soapbox/schemas';
+
+interface CreateGroupParams {
+  display_name?: string
+  note?: string
+  avatar?: File
+  header?: File
+  group_visibility?: 'members_only' | 'everyone'
+  discoverable?: boolean
+  tags?: string[]
+}
+
+function useCreateGroup() {
+  const api = useApi();
+
+  const { createEntity, ...rest } = useCreateEntity([Entities.GROUPS, 'search', ''], (params: CreateGroupParams) => {
+    return api.post('/api/v1/groups', params, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }, { schema: groupSchema });
+
+  return {
+    createGroup: createEntity,
+    ...rest,
+  };
+}
+
+export { useCreateGroup, type CreateGroupParams };
--- a/app/soapbox/api/hooks/groups/useDeleteGroup.ts
+++ b/app/soapbox/api/hooks/groups/useDeleteGroup.ts
@ -4,14 +4,14 @@ import { useEntityActions } from 'soapbox/entity-store/hooks';
 import type { Group } from 'soapbox/schemas';

 function useDeleteGroup() {
-  const { deleteEntity, isLoading } = useEntityActions<Group>(
+  const { deleteEntity, isSubmitting } = useEntityActions<Group>(
    [Entities.GROUPS],
    { delete: '/api/v1/groups/:id' },
  );

  return {
    mutate: deleteEntity,
-    isLoading,
+    isSubmitting,
  };
 }

--- a/app/soapbox/api/hooks/groups/useDeleteGroupStatus.ts
+++ b/app/soapbox/api/hooks/groups/useDeleteGroupStatus.ts
@ -0,0 +1,20 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useDeleteEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+
+import type { Group } from 'soapbox/schemas';
+
+function useDeleteGroupStatus(group: Group, statusId: string) {
+  const api = useApi();
+  const { deleteEntity, isSubmitting } = useDeleteEntity(
+    Entities.STATUSES,
+    () => api.delete(`/api/v1/groups/${group.id}/statuses/${statusId}`),
+  );
+
+  return {
+    mutate: deleteEntity,
+    isSubmitting,
+  };
+}
+
+export { useDeleteGroupStatus };
--- a/app/soapbox/api/hooks/groups/useDemoteGroupMember.ts
+++ b/app/soapbox/api/hooks/groups/useDemoteGroupMember.ts
--- a/app/soapbox/api/hooks/groups/useGroup.ts
+++ b/app/soapbox/api/hooks/groups/useGroup.ts
@ -0,0 +1,24 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+import { type Group, groupSchema } from 'soapbox/schemas';
+
+import { useGroupRelationship } from './useGroupRelationship';
+
+function useGroup(groupId: string, refetch = true) {
+  const api = useApi();
+
+  const { entity: group, ...result } = useEntity<Group>(
+    [Entities.GROUPS, groupId],
+    () => api.get(`/api/v1/groups/${groupId}`),
+    { schema: groupSchema, refetch },
+  );
+  const { entity: relationship } = useGroupRelationship(groupId);
+
+  return {
+    ...result,
+    group: group ? { ...group, relationship: relationship || null } : undefined,
+  };
+}
+
+export { useGroup };
--- a/app/soapbox/api/hooks/groups/useGroupLookup.ts
+++ b/app/soapbox/api/hooks/groups/useGroupLookup.ts
@ -0,0 +1,17 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntityLookup } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { groupSchema } from 'soapbox/schemas';
+
+function useGroupLookup(slug: string) {
+  const api = useApi();
+
+  return useEntityLookup(
+    Entities.GROUPS,
+    (group) => group.slug === slug,
+    () => api.get(`/api/v1/groups/lookup?name=${slug}`),
+    { schema: groupSchema },
+  );
+}
+
+export { useGroupLookup };
--- a/app/soapbox/api/hooks/groups/useGroupMedia.ts
+++ b/app/soapbox/api/hooks/groups/useGroupMedia.ts
@ -0,0 +1,17 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { normalizeStatus } from 'soapbox/normalizers';
+import { toSchema } from 'soapbox/utils/normalizers';
+
+const statusSchema = toSchema(normalizeStatus);
+
+function useGroupMedia(groupId: string) {
+  const api = useApi();
+
+  return useEntities([Entities.STATUSES, 'groupMedia', groupId], () => {
+    return api.get(`/api/v1/timelines/group/${groupId}?only_media=true`);
+  }, { schema: statusSchema });
+}
+
+export { useGroupMedia };
--- a/app/soapbox/api/hooks/groups/useGroupMembers.ts
+++ b/app/soapbox/api/hooks/groups/useGroupMembers.ts
@ -1,11 +1,16 @@
 import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { GroupMember, groupMemberSchema } from 'soapbox/schemas';
+import { GroupRoles } from 'soapbox/schemas/group-member';
+
+import { useApi } from '../../../hooks/useApi';
+
+function useGroupMembers(groupId: string, role: GroupRoles) {
+  const api = useApi();

-function useGroupMembers(groupId: string, role: string) {
  const { entities, ...result } = useEntities<GroupMember>(
    [Entities.GROUP_MEMBERSHIPS, groupId, role],
-    `/api/v1/groups/${groupId}/memberships?role=${role}`,
+    () => api.get(`/api/v1/groups/${groupId}/memberships?role=${role}`),
    { schema: groupMemberSchema },
  );

--- a/app/soapbox/api/hooks/groups/useGroupMembershipRequests.ts
+++ b/app/soapbox/api/hooks/groups/useGroupMembershipRequests.ts
@ -0,0 +1,47 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useDismissEntity, useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { accountSchema } from 'soapbox/schemas';
+import { GroupRoles } from 'soapbox/schemas/group-member';
+
+import { useGroupRelationship } from './useGroupRelationship';
+
+import type { ExpandedEntitiesPath } from 'soapbox/entity-store/hooks/types';
+
+function useGroupMembershipRequests(groupId: string) {
+  const api = useApi();
+  const path: ExpandedEntitiesPath = [Entities.ACCOUNTS, 'membership_requests', groupId];
+
+  const { entity: relationship } = useGroupRelationship(groupId);
+
+  const { entities, invalidate, fetchEntities, ...rest } = useEntities(
+    path,
+    () => api.get(`/api/v1/groups/${groupId}/membership_requests`),
+    {
+      schema: accountSchema,
+      enabled: relationship?.role === GroupRoles.OWNER || relationship?.role === GroupRoles.ADMIN,
+    },
+  );
+
+  const { dismissEntity: authorize } = useDismissEntity(path, async (accountId: string) => {
+    const response = await api.post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/authorize`);
+    invalidate();
+    return response;
+  });
+
+  const { dismissEntity: reject } = useDismissEntity(path, async (accountId: string) => {
+    const response = await api.post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/reject`);
+    invalidate();
+    return response;
+  });
+
+  return {
+    accounts: entities,
+    refetch: fetchEntities,
+    authorize,
+    reject,
+    ...rest,
+  };
+}
+
+export { useGroupMembershipRequests };
--- a/app/soapbox/api/hooks/groups/useGroupRelationship.ts
+++ b/app/soapbox/api/hooks/groups/useGroupRelationship.ts
@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { z } from 'zod';
+
+import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups';
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+
+function useGroupRelationship(groupId: string) {
+  const api = useApi();
+  const dispatch = useAppDispatch();
+
+  const { entity: groupRelationship, ...result } = useEntity<GroupRelationship>(
+    [Entities.GROUP_RELATIONSHIPS, groupId],
+    () => api.get(`/api/v1/groups/relationships?id[]=${groupId}`),
+    { schema: z.array(groupRelationshipSchema).transform(arr => arr[0]) },
+  );
+
+  useEffect(() => {
+    if (groupRelationship?.id) {
+      dispatch(fetchGroupRelationshipsSuccess([groupRelationship]));
+    }
+  }, [groupRelationship?.id]);
+
+  return {
+    entity: groupRelationship,
+    ...result,
+  };
+}
+
+export { useGroupRelationship };
--- a/app/soapbox/api/hooks/groups/useGroupRelationships.ts
+++ b/app/soapbox/api/hooks/groups/useGroupRelationships.ts
@ -0,0 +1,27 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+
+function useGroupRelationships(groupIds: string[]) {
+  const api = useApi();
+  const q = groupIds.map(id => `id[]=${id}`).join('&');
+
+  const { entities, ...result } = useEntities<GroupRelationship>(
+    [Entities.GROUP_RELATIONSHIPS, ...groupIds],
+    () => api.get(`/api/v1/groups/relationships?${q}`),
+    { schema: groupRelationshipSchema, enabled: groupIds.length > 0 },
+  );
+
+  const relationships = entities.reduce<Record<string, GroupRelationship>>((map, relationship) => {
+    map[relationship.id] = relationship;
+    return map;
+  }, {});
+
+  return {
+    ...result,
+    relationships,
+  };
+}
+
+export { useGroupRelationships };
--- a/app/soapbox/api/hooks/groups/useGroupSearch.ts
+++ b/app/soapbox/api/hooks/groups/useGroupSearch.ts
@ -0,0 +1,37 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi, useFeatures } from 'soapbox/hooks';
+import { groupSchema } from 'soapbox/schemas';
+
+import { useGroupRelationships } from './useGroupRelationships';
+
+import type { Group } from 'soapbox/schemas';
+
+function useGroupSearch(search: string) {
+  const api = useApi();
+  const features = useFeatures();
+
+  const { entities, ...result } = useEntities<Group>(
+    [Entities.GROUPS, 'discover', 'search', search],
+    () => api.get('/api/v1/groups/search', {
+      params: {
+        q: search,
+      },
+    }),
+    { enabled: features.groupsDiscovery && !!search, schema: groupSchema },
+  );
+
+  const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
+
+  const groups = entities.map((group) => ({
+    ...group,
+    relationship: relationships[group.id] || null,
+  }));
+
+  return {
+    ...result,
+    groups,
+  };
+}
+
+export { useGroupSearch };
--- a/app/soapbox/api/hooks/groups/useGroupTag.ts
+++ b/app/soapbox/api/hooks/groups/useGroupTag.ts
@ -0,0 +1,21 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+
+function useGroupTag(tagId: string) {
+  const api = useApi();
+
+  const { entity: tag, ...result } = useEntity<GroupTag>(
+    [Entities.GROUP_TAGS, tagId],
+    () => api.get(`/api/v1/tags/${tagId }`),
+    { schema: groupTagSchema },
+  );
+
+  return {
+    ...result,
+    tag,
+  };
+}
+
+export { useGroupTag };
--- a/app/soapbox/api/hooks/groups/useGroupTags.ts
+++ b/app/soapbox/api/hooks/groups/useGroupTags.ts
@ -0,0 +1,23 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { groupTagSchema } from 'soapbox/schemas';
+
+import type { GroupTag } from 'soapbox/schemas';
+
+function useGroupTags(groupId: string) {
+  const api = useApi();
+
+  const { entities, ...result } = useEntities<GroupTag>(
+    [Entities.GROUP_TAGS, groupId],
+    () => api.get(`/api/v1/truth/trends/groups/${groupId}/tags`),
+    { schema: groupTagSchema },
+  );
+
+  return {
+    ...result,
+    tags: entities,
+  };
+}
+
+export { useGroupTags };
--- a/app/soapbox/api/hooks/groups/useGroupValidation.ts
+++ b/app/soapbox/api/hooks/groups/useGroupValidation.ts
@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useApi } from 'soapbox/hooks/useApi';
+import { useFeatures } from 'soapbox/hooks/useFeatures';
+
+type Validation = {
+  error: string
+  message: string
+}
+
+const ValidationKeys = {
+  validation: (name: string) => ['group', 'validation', name] as const,
+};
+
+function useGroupValidation(name: string = '') {
+  const api = useApi();
+  const features = useFeatures();
+
+  const getValidation = async() => {
+    const { data } = await api.get<Validation>('/api/v1/groups/validate', {
+      params: { name },
+    })
+      .catch((error) => {
+        if (error.response.status === 422) {
+          return { data: error.response.data };
+        }
+
+        throw error;
+      });
+
+    return data;
+  };
+
+  const queryInfo = useQuery<Validation>(ValidationKeys.validation(name), getValidation, {
+    enabled: features.groupsValidation && !!name,
+  });
+
+  return {
+    ...queryInfo,
+    data: {
+      ...queryInfo.data,
+      isValid: !queryInfo.data?.error ?? true,
+    },
+  };
+}
+
+export { useGroupValidation };
--- a/app/soapbox/api/hooks/groups/useGroups.ts
+++ b/app/soapbox/api/hooks/groups/useGroups.ts
@ -0,0 +1,31 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks';
+import { useFeatures } from 'soapbox/hooks/useFeatures';
+import { groupSchema, type Group } from 'soapbox/schemas/group';
+
+import { useGroupRelationships } from './useGroupRelationships';
+
+function useGroups(q: string = '') {
+  const api = useApi();
+  const features = useFeatures();
+
+  const { entities, ...result } = useEntities<Group>(
+    [Entities.GROUPS, 'search', q],
+    () => api.get('/api/v1/groups', { params: { q } }),
+    { enabled: features.groups, schema: groupSchema },
+  );
+  const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
+
+  const groups = entities.map((group) => ({
+    ...group,
+    relationship: relationships[group.id] || null,
+  }));
+
+  return {
+    ...result,
+    groups,
+  };
+}
+
+export { useGroups };
--- a/app/soapbox/api/hooks/groups/useGroupsFromTag.ts
+++ b/app/soapbox/api/hooks/groups/useGroupsFromTag.ts
@ -0,0 +1,35 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi, useFeatures } from 'soapbox/hooks';
+import { groupSchema } from 'soapbox/schemas';
+
+import { useGroupRelationships } from './useGroupRelationships';
+
+import type { Group } from 'soapbox/schemas';
+
+function useGroupsFromTag(tagId: string) {
+  const api = useApi();
+  const features = useFeatures();
+
+  const { entities, ...result } = useEntities<Group>(
+    [Entities.GROUPS, 'tags', tagId],
+    () => api.get(`/api/v1/tags/${tagId}/groups`),
+    {
+      schema: groupSchema,
+      enabled: features.groupsDiscovery,
+    },
+  );
+  const { relationships } = useGroupRelationships(entities.map(entity => entity.id));
+
+  const groups = entities.map((group) => ({
+    ...group,
+    relationship: relationships[group.id] || null,
+  }));
+
+  return {
+    ...result,
+    groups,
+  };
+}
+
+export { useGroupsFromTag };
--- a/app/soapbox/api/hooks/groups/useJoinGroup.ts
+++ b/app/soapbox/api/hooks/groups/useJoinGroup.ts
@ -2,10 +2,14 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntityActions } from 'soapbox/entity-store/hooks';
 import { groupRelationshipSchema } from 'soapbox/schemas';

+import { useGroups } from './useGroups';
+
 import type { Group, GroupRelationship } from 'soapbox/schemas';

 function useJoinGroup(group: Group) {
-  const { createEntity, isLoading } = useEntityActions<GroupRelationship>(
+  const { invalidate } = useGroups();
+
+  const { createEntity, isSubmitting } = useEntityActions<GroupRelationship>(
    [Entities.GROUP_RELATIONSHIPS, group.id],
    { post: `/api/v1/groups/${group.id}/join` },
    { schema: groupRelationshipSchema },
@ -13,7 +17,8 @@ function useJoinGroup(group: Group) {

  return {
    mutate: createEntity,
-    isLoading,
+    isSubmitting,
+    invalidate,
  };
 }

--- a/app/soapbox/api/hooks/groups/useLeaveGroup.ts
+++ b/app/soapbox/api/hooks/groups/useLeaveGroup.ts
@ -1,9 +1,15 @@
 import { Entities } from 'soapbox/entity-store/entities';
 import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { Group, GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+import { groupRelationshipSchema } from 'soapbox/schemas';
+
+import { useGroups } from './useGroups';
+
+import type { Group, GroupRelationship } from 'soapbox/schemas';

 function useLeaveGroup(group: Group) {
-  const { createEntity, isLoading } = useEntityActions<GroupRelationship>(
+  const { invalidate } = useGroups();
+
+  const { createEntity, isSubmitting } = useEntityActions<GroupRelationship>(
    [Entities.GROUP_RELATIONSHIPS, group.id],
    { post: `/api/v1/groups/${group.id}/leave` },
    { schema: groupRelationshipSchema },
@ -11,7 +17,8 @@ function useLeaveGroup(group: Group) {

  return {
    mutate: createEntity,
-    isLoading,
+    isSubmitting,
+    invalidate,
  };
 }

--- a/app/soapbox/api/hooks/groups/usePopularGroups.ts
+++ b/app/soapbox/api/hooks/groups/usePopularGroups.ts
@ -2,15 +2,18 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { Group, groupSchema } from 'soapbox/schemas';

-import { useFeatures } from '../useFeatures';
-import { useGroupRelationships } from '../useGroups';
+import { useApi } from '../../../hooks/useApi';
+import { useFeatures } from '../../../hooks/useFeatures';
+
+import { useGroupRelationships } from './useGroupRelationships';

 function usePopularGroups() {
+  const api = useApi();
  const features = useFeatures();

  const { entities, ...result } = useEntities<Group>(
    [Entities.GROUPS, 'popular'],
-    '/api/mock/groups', // '/api/v1/truth/trends/groups'
+    () => api.get('/api/v1/truth/trends/groups'),
    {
      schema: groupSchema,
      enabled: features.groupsDiscovery,
--- a/app/soapbox/api/hooks/groups/usePopularTags.ts
+++ b/app/soapbox/api/hooks/groups/usePopularTags.ts
@ -0,0 +1,25 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { useApi, useFeatures } from 'soapbox/hooks';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+
+function usePopularTags() {
+  const api = useApi();
+  const features = useFeatures();
+
+  const { entities, ...result } = useEntities<GroupTag>(
+    [Entities.GROUP_TAGS],
+    () => api.get('/api/v1/groups/tags'),
+    {
+      schema: groupTagSchema,
+      enabled: features.groupsDiscovery,
+    },
+  );
+
+  return {
+    ...result,
+    tags: entities,
+  };
+}
+
+export { usePopularTags };
--- a/app/soapbox/api/hooks/groups/usePromoteGroupMember.ts
+++ b/app/soapbox/api/hooks/groups/usePromoteGroupMember.ts
--- a/app/soapbox/api/hooks/groups/useSuggestedGroups.ts
+++ b/app/soapbox/api/hooks/groups/useSuggestedGroups.ts
@ -1,16 +1,17 @@
 import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
-import { Group, groupSchema } from 'soapbox/schemas';
+import { useApi, useFeatures } from 'soapbox/hooks';
+import { type Group, groupSchema } from 'soapbox/schemas';

-import { useFeatures } from '../useFeatures';
-import { useGroupRelationships } from '../useGroups';
+import { useGroupRelationships } from './useGroupRelationships';

 function useSuggestedGroups() {
+  const api = useApi();
  const features = useFeatures();

  const { entities, ...result } = useEntities<Group>(
    [Entities.GROUPS, 'suggested'],
-    '/api/mock/groups', // '/api/v1/truth/suggestions/groups'
+    () => api.get('/api/v1/truth/suggestions/groups'),
    {
      schema: groupSchema,
      enabled: features.groupsDiscovery,
--- a/app/soapbox/api/hooks/groups/useUpdateGroup.ts
+++ b/app/soapbox/api/hooks/groups/useUpdateGroup.ts
@ -0,0 +1,33 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useCreateEntity } from 'soapbox/entity-store/hooks';
+import { useApi } from 'soapbox/hooks/useApi';
+import { groupSchema } from 'soapbox/schemas';
+
+interface UpdateGroupParams {
+  display_name?: string
+  note?: string
+  avatar?: File
+  header?: File
+  group_visibility?: string
+  discoverable?: boolean
+  tags?: string[]
+}
+
+function useUpdateGroup(groupId: string) {
+  const api = useApi();
+
+  const { createEntity, ...rest } = useCreateEntity([Entities.GROUPS], (params: UpdateGroupParams) => {
+    return api.put(`/api/v1/groups/${groupId}`, params, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }, { schema: groupSchema });
+
+  return {
+    updateGroup: createEntity,
+    ...rest,
+  };
+}
+
+export { useUpdateGroup };
--- a/app/soapbox/api/hooks/groups/useUpdateGroupTag.ts
+++ b/app/soapbox/api/hooks/groups/useUpdateGroupTag.ts
@ -0,0 +1,18 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntityActions } from 'soapbox/entity-store/hooks';
+
+import type { GroupTag } from 'soapbox/schemas';
+
+function useUpdateGroupTag(groupId: string, tagId: string) {
+  const { updateEntity, ...rest } = useEntityActions<GroupTag>(
+    [Entities.GROUP_TAGS, groupId, tagId],
+    { patch: `/api/v1/groups/${groupId}/tags/${tagId}` },
+  );
+
+  return {
+    updateGroupTag: updateEntity,
+    ...rest,
+  };
+}
+
+export { useUpdateGroupTag };
--- a/app/soapbox/api/hooks/index.ts
+++ b/app/soapbox/api/hooks/index.ts
@ -0,0 +1,40 @@
+
+/**
+ * Accounts
+ */
+export { useAccount } from './accounts/useAccount';
+
+/**
+ * Groups
+ */
+export { useBlockGroupMember } from './groups/useBlockGroupMember';
+export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest';
+export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup';
+export { useDeleteGroup } from './groups/useDeleteGroup';
+export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
+export { useGroup } from './groups/useGroup';
+export { useGroupLookup } from './groups/useGroupLookup';
+export { useGroupMedia } from './groups/useGroupMedia';
+export { useGroupMembers } from './groups/useGroupMembers';
+export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests';
+export { useGroupRelationship } from './groups/useGroupRelationship';
+export { useGroupRelationships } from './groups/useGroupRelationships';
+export { useGroupSearch } from './groups/useGroupSearch';
+export { useGroupTag } from './groups/useGroupTag';
+export { useGroupTags } from './groups/useGroupTags';
+export { useGroupValidation } from './groups/useGroupValidation';
+export { useGroups } from './groups/useGroups';
+export { useGroupsFromTag } from './groups/useGroupsFromTag';
+export { useJoinGroup } from './groups/useJoinGroup';
+export { useLeaveGroup } from './groups/useLeaveGroup';
+export { usePopularGroups } from './groups/usePopularGroups';
+export { usePopularTags } from './groups/usePopularTags';
+export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
+export { useSuggestedGroups } from './groups/useSuggestedGroups';
+export { useUpdateGroup } from './groups/useUpdateGroup';
+export { useUpdateGroupTag } from './groups/useUpdateGroupTag';
+
+/**
+ * Relationships
+ */
+export { useRelationships } from './accounts/useRelationships';
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@ -193,7 +193,7 @@ const Account = ({
              <Avatar src={account.avatar} size={avatarSize} />
              {emoji && (
                <Emoji
-                  className='absolute bottom-0 -right-1.5 h-5 w-5'
+                  className='absolute -right-1.5 bottom-0 h-5 w-5'
                  emoji={emoji}
                  src={emojiUrl}
                />
--- a/app/soapbox/components/authorize-reject-buttons.tsx
+++ b/app/soapbox/components/authorize-reject-buttons.tsx
@ -0,0 +1,180 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { HStack, IconButton, Text } from 'soapbox/components/ui';
+
+interface IAuthorizeRejectButtons {
+  onAuthorize(): Promise<unknown> | unknown
+  onReject(): Promise<unknown> | unknown
+  countdown?: number
+}
+
+/** Buttons to approve or reject a pending item, usually an account. */
+const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
+  const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
+  const timeout = useRef<NodeJS.Timeout>();
+  const interval = useRef<ReturnType<typeof setInterval>>();
+
+  const [progress, setProgress] = useState<number>(0);
+
+  const startProgressInterval = () => {
+    let startValue = 1;
+    interval.current = setInterval(() => {
+      startValue++;
+      const newValue = startValue * 3.6; // get to 360 (deg)
+      setProgress(newValue);
+
+      if (newValue >= 360) {
+        clearInterval(interval.current as NodeJS.Timeout);
+        setProgress(0);
+      }
+    }, (countdown as number) / 100);
+  };
+
+  function handleAction(
+    present: 'authorizing' | 'rejecting',
+    past: 'authorized' | 'rejected',
+    action: () => Promise<unknown> | unknown,
+  ): void {
+    if (state === present) {
+      if (interval.current) {
+        clearInterval(interval.current);
+      }
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      setState('pending');
+    } else {
+      const doAction = async () => {
+        try {
+          await action();
+          setState(past);
+        } catch (e) {
+          if (e) console.error(e);
+        }
+      };
+      if (typeof countdown === 'number') {
+        setState(present);
+        timeout.current = setTimeout(doAction, countdown);
+        startProgressInterval();
+      } else {
+        doAction();
+      }
+    }
+  }
+
+  const handleAuthorize = async () => handleAction('authorizing', 'authorized', onAuthorize);
+  const handleReject = async () => handleAction('rejecting', 'rejected', onReject);
+
+  const renderStyle = (selectedState: typeof state) => {
+    if (state === 'authorizing' && selectedState === 'authorizing') {
+      return {
+        background: `conic-gradient(rgb(var(--color-primary-500)) ${progress}deg, rgb(var(--color-primary-500) / 0.1) 0deg)`,
+      };
+    } else if (state === 'rejecting' && selectedState === 'rejecting') {
+      return {
+        background: `conic-gradient(rgb(var(--color-danger-600)) ${progress}deg, rgb(var(--color-danger-600) / 0.1) 0deg)`,
+      };
+    }
+
+    return {};
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      if (interval.current) {
+        clearInterval(interval.current);
+      }
+    };
+  }, []);
+
+  switch (state) {
+    case 'authorized':
+      return (
+        <ActionEmblem text={<FormattedMessage id='authorize.success' defaultMessage='Approved' />} />
+      );
+    case 'rejected':
+      return (
+        <ActionEmblem text={<FormattedMessage id='reject.success' defaultMessage='Rejected' />} />
+      );
+    default:
+      return (
+        <HStack space={3} alignItems='center'>
+          <AuthorizeRejectButton
+            theme='danger'
+            icon={require('@tabler/icons/x.svg')}
+            action={handleReject}
+            isLoading={state === 'rejecting'}
+            disabled={state === 'authorizing'}
+            style={renderStyle('rejecting')}
+          />
+          <AuthorizeRejectButton
+            theme='primary'
+            icon={require('@tabler/icons/check.svg')}
+            action={handleAuthorize}
+            isLoading={state === 'authorizing'}
+            disabled={state === 'rejecting'}
+            style={renderStyle('authorizing')}
+          />
+        </HStack>
+      );
+  }
+};
+
+interface IActionEmblem {
+  text: React.ReactNode
+}
+
+const ActionEmblem: React.FC<IActionEmblem> = ({ text }) => {
+  return (
+    <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
+      <Text theme='muted' size='sm'>
+        {text}
+      </Text>
+    </div>
+  );
+};
+
+interface IAuthorizeRejectButton {
+  theme: 'primary' | 'danger'
+  icon: string
+  action(): void
+  isLoading?: boolean
+  disabled?: boolean
+  style: React.CSSProperties
+}
+
+const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, style, disabled }) => {
+  return (
+    <div className='relative'>
+      <div
+        style={style}
+        className={
+          clsx({
+            'flex h-11 w-11 items-center justify-center rounded-full': true,
+            'bg-danger-600/10': theme === 'danger',
+            'bg-primary-500/10': theme === 'primary',
+          })
+        }
+      >
+        <IconButton
+          src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
+          onClick={action}
+          theme='seamless'
+          className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
+          iconClassName={clsx('h-6 w-6', {
+            'text-primary-500': theme === 'primary',
+            'text-danger-600': theme === 'danger',
+          })}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+};
+
+export { AuthorizeRejectButtons };
--- a/app/soapbox/components/birthday-panel.tsx
+++ b/app/soapbox/components/birthday-panel.tsx
@ -58,6 +58,7 @@ const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
          key={accountId}
          // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
          id={accountId}
+          withRelationship={false}
        />
      ))}
    </Widget>
--- a/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx
@ -69,7 +69,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
  }, [itemRef.current, index]);

  if (item === null) {
-    return <li className='my-1 mx-2 h-[2px] bg-gray-100 dark:bg-gray-800' />;
+    return <li className='mx-2 my-1 h-[2px] bg-gray-100 dark:bg-gray-800' />;
  }

  return (
@ -94,7 +94,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
      >
        {item.icon && <Icon src={item.icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}

-        <span className='truncate'>{item.text}</span>
+        <span className='truncate font-medium'>{item.text}</span>

        {item.count ? (
          <span className='ml-auto h-5 w-5 flex-none'>
--- a/app/soapbox/components/error-boundary.tsx
+++ b/app/soapbox/components/error-boundary.tsx
@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
    const errorText = this.getErrorText();

    return (
-      <div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'>
+      <div className='flex h-screen flex-col bg-white pb-12 pt-16 dark:bg-primary-900'>
        <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
          <div className='flex shrink-0 justify-center'>
            <a href='/' className='inline-flex'>
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@ -52,7 +52,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,

  return (
    <div className={clsx('relative w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-primary-800', className)}>
-      <div className='absolute top-28 right-3'>
+      <div className='absolute right-3 top-28'>
        {floatingAction && action}
      </div>
      <div className='h-40 bg-primary-200 dark:bg-gray-600'>
@ -65,7 +65,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
          {!floatingAction && action}
        </HStack>

-        <div className='flex flex-wrap gap-y-1 gap-x-2 text-gray-700 dark:text-gray-600'>
+        <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
          <HStack alignItems='center' space={2}>
            <Icon src={require('@tabler/icons/user.svg')} />
            <HStack space={1} alignItems='center' grow>
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@ -31,7 +31,7 @@ const GdprBanner: React.FC = () => {

  return (
    <Banner theme='opaque' className={clsx('transition-transform', { 'translate-y-full': slideout })}>
-      <div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4'>
+      <div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-x-4 lg:space-y-0'>
        <Stack space={2}>
          <Text size='xl' weight='bold'>
            <FormattedMessage id='gdpr.title' defaultMessage='{siteTitle} uses cookies' values={{ siteTitle: instance.title }} />
--- a/app/soapbox/components/group-card.tsx
+++ b/app/soapbox/components/group-card.tsx
@ -1,6 +1,6 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';

+import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
 import GroupRelationship from 'soapbox/features/group/components/group-relationship';
@ -10,17 +10,11 @@ import { HStack, Stack, Text } from './ui';

 import type { Group as GroupEntity } from 'soapbox/types/entities';

-const messages = defineMessages({
-  groupHeader: { id: 'group.header.alt', defaultMessage: 'Group header' },
-});
-
 interface IGroupCard {
  group: GroupEntity
 }

 const GroupCard: React.FC<IGroupCard> = ({ group }) => {
-  const intl = useIntl();
-
  return (
    <Stack
      className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900'
@ -28,22 +22,26 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
    >
      {/* Group Cover Image */}
      <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
-        {group.header && (
-          <img
-            className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
-            src={group.header} alt={intl.formatMessage(messages.groupHeader)}
-          />
-        )}
+        <GroupHeaderImage
+          group={group}
+          className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
+        />
      </Stack>

      {/* Group Avatar */}
-      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+      <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
        <GroupAvatar group={group} size={64} withRing />
      </div>

      {/* Group Info */}
      <Stack alignItems='center' justifyContent='end' grow className='basis-1/2 py-4' space={0.5}>
-        <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+        <HStack alignItems='center' space={1.5}>
+          <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+
+          {group.relationship?.pending_requests && (
+            <div className='h-2 w-2 rounded-full bg-secondary-500' />
+          )}
+        </HStack>

        <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
          <GroupRelationship group={group} />
--- a/app/soapbox/components/groups/group-avatar.tsx
+++ b/app/soapbox/components/groups/group-avatar.tsx
@ -23,8 +23,9 @@ const GroupAvatar = (props: IGroupAvatar) => {
      className={
        clsx('relative rounded-full', {
          'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
+          'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing,
          'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
-          'shadow-[0_0_0_2px_theme(colors.white)]': !isOwner && withRing,
+          'shadow-[0_0_0_2px_theme(colors.white)] dark:shadow-[0_0_0_2px_theme(colors.gray.800)]': !isOwner && withRing,
        })
      }
      src={group.avatar}
--- a/app/soapbox/components/groups/popover/group-popover.tsx
+++ b/app/soapbox/components/groups/popover/group-popover.tsx
@ -0,0 +1,108 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link, matchPath, useHistory } from 'react-router-dom';
+
+import { Button, Divider, HStack, Popover, Stack, Text } from 'soapbox/components/ui';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+
+import GroupAvatar from '../group-avatar';
+
+import type { Group } from 'soapbox/schemas';
+
+interface IGroupPopoverContainer {
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  isEnabled: boolean
+  group: Group
+}
+
+const messages = defineMessages({
+  title: { id: 'group.popover.title', defaultMessage: 'Membership required' },
+  summary: { id: 'group.popover.summary', defaultMessage: 'You must be a member of the group in order to reply to this status.' },
+  action: { id: 'group.popover.action', defaultMessage: 'View Group' },
+});
+
+const GroupPopover = (props: IGroupPopoverContainer) => {
+  const { children, group, isEnabled } = props;
+
+  const intl = useIntl();
+  const history = useHistory();
+
+  const path = history.location.pathname;
+  const shouldHideAction = matchPath(path, {
+    path: ['/group/:groupSlug'],
+    exact: true,
+  });
+
+  if (!isEnabled) {
+    return children;
+  }
+
+  return (
+    <Popover
+      interaction='click'
+      referenceElementClassName='cursor-pointer'
+      content={
+        <Stack space={4} className='w-80 pb-4'>
+          <Stack
+            className='relative h-60 rounded-lg bg-white dark:border-primary-800 dark:bg-primary-900'
+            data-testid='group-card'
+          >
+            {/* Group Cover Image */}
+            <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
+              {group.header && (
+                <img
+                  className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
+                  src={group.header}
+                  alt=''
+                />
+              )}
+            </Stack>
+
+            {/* Group Avatar */}
+            <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
+              <GroupAvatar group={group} size={64} withRing />
+            </div>
+
+            {/* Group Info */}
+            <Stack alignItems='center' justifyContent='end' grow className='basis-1/2 py-4' space={0.5}>
+              <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+
+              <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
+                <GroupPrivacy group={group} />
+                <GroupMemberCount group={group} />
+              </HStack>
+            </Stack>
+          </Stack>
+
+          <Divider />
+
+          <Stack space={0.5} className='px-4'>
+            <Text weight='semibold'>
+              {intl.formatMessage(messages.title)}
+            </Text>
+            <Text theme='muted'>
+              {intl.formatMessage(messages.summary)}
+            </Text>
+          </Stack>
+
+          {!shouldHideAction && (
+            <div className='px-4'>
+              <Link to={`/group/${group.slug}`}>
+                <Button type='button' theme='secondary' block>
+                  {intl.formatMessage(messages.action)}
+                </Button>
+              </Link>
+            </div>
+          )}
+        </Stack>
+      }
+      isFlush
+      children={
+        <div className='inline-block'>{children}</div>
+      }
+    />
+  );
+};
+
+export default GroupPopover;
--- a/app/soapbox/components/hoc/group-lookup-hoc.tsx
+++ b/app/soapbox/components/hoc/group-lookup-hoc.tsx
@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useGroupLookup } from 'soapbox/api/hooks';
+import ColumnLoading from 'soapbox/features/ui/components/column-loading';
+
+import { Layout } from '../ui';
+
+interface IGroupLookup {
+  params: {
+    groupSlug: string
+  }
+}
+
+interface IMaybeGroupLookup {
+  params?: {
+    groupSlug?: string
+    groupId?: string
+  }
+}
+
+function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) {
+  const GroupLookup: React.FC<IGroupLookup> = (props) => {
+    const { entity: group } = useGroupLookup(props.params.groupSlug);
+
+    if (!group) return (
+      <>
+        <Layout.Main>
+          <ColumnLoading />
+        </Layout.Main>
+
+        <Layout.Aside />
+      </>
+    );
+
+    const newProps = {
+      ...props,
+      params: {
+        ...props.params,
+        id: group.id,
+        groupId: group.id,
+      },
+    };
+
+    return (
+      <Component {...newProps} />
+    );
+  };
+
+  const MaybeGroupLookup: React.FC<IMaybeGroupLookup> = (props) => {
+    const { params } = props;
+
+    if (params?.groupId) {
+      return <Component {...props} params={{ ...params, groupId: params.groupId }} />;
+    } else {
+      return <GroupLookup {...props} params={{ ...params, groupSlug: params?.groupSlug || '' }} />;
+    }
+  };
+
+  return MaybeGroupLookup;
+}
+
+export default GroupLookupHoc;
--- a/app/soapbox/components/hoc/with-hoc.tsx
+++ b/app/soapbox/components/hoc/with-hoc.tsx
@ -0,0 +1,11 @@
+type HOC<P, R> = (Component: React.ComponentType<P>) => React.ComponentType<R>
+type AsyncComponent<P> = () => Promise<{ default: React.ComponentType<P> }>
+
+const withHoc = <P, R>(asyncComponent: AsyncComponent<P>, hoc: HOC<P, R>) => {
+  return async () => {
+    const { default: component } = await asyncComponent();
+    return { default: hoc(component) };
+  };
+};
+
+export default withHoc;
--- a/app/soapbox/components/icon-with-counter.tsx
+++ b/app/soapbox/components/icon-with-counter.tsx
@ -16,7 +16,7 @@ const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ..
      <Icon id={icon} {...rest as IIcon} />

      {count > 0 && (
-        <span className='absolute -top-2 -right-3'>
+        <span className='absolute -right-3 -top-2'>
          <Counter count={count} countMax={countMax} />
        </span>
      )}
--- a/app/soapbox/components/icon.tsx
+++ b/app/soapbox/components/icon.tsx
@ -14,6 +14,9 @@ export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
 }

+/**
+ * @deprecated Use the UI Icon component directly.
+ */
 const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
  return (
    <div
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@ -4,8 +4,7 @@ import { v4 as uuidv4 } from 'uuid';

 import { SelectDropdown } from '../features/forms';

-import Icon from './icon';
-import { HStack, Select } from './ui';
+import { Icon, HStack, Select } from './ui';

 interface IList {
  children: React.ReactNode
@ -57,9 +56,8 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec

  return (
    <Comp
-      className={clsx({
-        'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10': true,
-        'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
+      className={clsx('flex items-center justify-between overflow-hidden bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 px-4 py-2 first:rounded-t-lg last:rounded-b-lg dark:from-gradient-start/10 dark:to-gradient-end/10', {
+        'cursor-pointer hover:from-gradient-start/30 hover:to-gradient-end/30 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
      })}
      {...linkProps}
    >
@ -72,7 +70,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
      </div>

      {onClick ? (
-        <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
+        <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
          {children}

          <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
@ -83,12 +81,26 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
        <div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
          {children}

-          {isSelected ? (
+          <div
+            className={
+              clsx({
+                'flex h-6 w-6 items-center justify-center rounded-full border-2 border-solid border-primary-500 dark:border-primary-400 transition': true,
+                'bg-primary-500 dark:bg-primary-400': isSelected,
+                'bg-transparent': !isSelected,
+              })
+            }
+          >
            <Icon
-              src={require('@tabler/icons/circle-check.svg')}
-              className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+              src={require('@tabler/icons/check.svg')}
+              className={
+                clsx({
+                  'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
+                  'opacity-0 scale-50': !isSelected,
+                  'opacity-100 scale-100': isSelected,
+                })
+              }
            />
-          ) : null}
+          </div>
        </div>
      ) : null}

--- a/app/soapbox/components/modal-root.tsx
+++ b/app/soapbox/components/modal-root.tsx
@ -181,7 +181,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
  };

  const getSiblings = () => {
-    return Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[])).filter(node => node !== ref.current);
+    return Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[]))
+      .filter(node => (node as HTMLDivElement).id !== 'toaster')
+      .filter(node => node !== ref.current);
  };

  useEffect(() => {
--- a/app/soapbox/components/pending-items-row.tsx
+++ b/app/soapbox/components/pending-items-row.tsx
@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { HStack, Icon, Text } from 'soapbox/components/ui';
+
+interface IPendingItemsRow {
+  /** Path to navigate the user when clicked. */
+  to: string
+  /** Number of pending items. */
+  count: number
+  /** Size of the icon. */
+  size?: 'md' | 'lg'
+}
+
+const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' }) => {
+  return (
+    <Link to={to} className='group' data-testid='pending-items-row'>
+      <HStack alignItems='center' justifyContent='between'>
+        <HStack alignItems='center' space={2}>
+          <div className={clsx('rounded-full bg-primary-200 text-primary-500 dark:bg-primary-800 dark:text-primary-200', {
+            'p-3': size === 'lg',
+            'p-2.5': size === 'md',
+          })}
+          >
+            <Icon
+              src={require('@tabler/icons/exclamation-circle.svg')}
+              className={clsx({
+                'h-5 w-5': size === 'md',
+                'h-7 w-7': size === 'lg',
+              })}
+            />
+          </div>
+
+          <Text weight='bold' size='md'>
+            <FormattedMessage
+              id='groups.pending.count'
+              defaultMessage='{number, plural, one {# pending request} other {# pending requests}}'
+              values={{ number: count }}
+            />
+          </Text>
+        </HStack>
+
+        <Icon
+          src={require('@tabler/icons/chevron-right.svg')}
+          className='h-5 w-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
+        />
+      </HStack>
+    </Link>
+  );
+};
+
+export { PendingItemsRow };
--- a/app/soapbox/components/polls/tests/poll-footer.test.tsx
+++ b/app/soapbox/components/polls/tests/poll-footer.test.tsx
@ -4,14 +4,22 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';

 import { __stub } from 'soapbox/api';
-import { normalizePoll } from 'soapbox/normalizers/poll';
+import { mockStore, render, screen, rootState } from 'soapbox/jest/test-helpers';
+import { type Poll } from 'soapbox/schemas';

-import { mockStore, render, screen, rootState } from '../../../jest/test-helpers';
 import PollFooter from '../poll-footer';

-let poll = normalizePoll({
-  id: 1,
-  options: [{ title: 'Apples', votes_count: 0 }],
+let poll: Poll = {
+  id: '1',
+  options: [{
+    title: 'Apples',
+    votes_count: 0,
+    title_emojified: 'Apples',
+  }, {
+    title: 'Oranges',
+    votes_count: 0,
+    title_emojified: 'Oranges',
+  }],
  emojis: [],
  expired: false,
  expires_at: '2020-03-24T19:33:06.000Z',
@ -20,7 +28,7 @@ let poll = normalizePoll({
  votes_count: 0,
  own_votes: null,
  voted: false,
-});
+};

 describe('<PollFooter />', () => {
  describe('with "showResults" enabled', () => {
@ -62,10 +70,10 @@ describe('<PollFooter />', () => {

    describe('when the Poll has not expired', () => {
      beforeEach(() => {
-        poll = normalizePoll({
-          ...poll.toJS(),
+        poll = {
+          ...poll,
          expired: false,
-        });
+        };
      });

      it('renders time remaining', () => {
@ -77,10 +85,10 @@ describe('<PollFooter />', () => {

    describe('when the Poll has expired', () => {
      beforeEach(() => {
-        poll = normalizePoll({
-          ...poll.toJS(),
+        poll = {
+          ...poll,
          expired: true,
-        });
+        };
      });

      it('renders closed', () => {
@ -100,10 +108,10 @@ describe('<PollFooter />', () => {

    describe('when the Poll is multiple', () => {
      beforeEach(() => {
-        poll = normalizePoll({
-          ...poll.toJS(),
+        poll = {
+          ...poll,
          multiple: true,
-        });
+        };
      });

      it('renders the Vote button', () => {
@ -115,10 +123,10 @@ describe('<PollFooter />', () => {

    describe('when the Poll is not multiple', () => {
      beforeEach(() => {
-        poll = normalizePoll({
-          ...poll.toJS(),
+        poll = {
+          ...poll,
          multiple: false,
-        });
+        };
      });

      it('does not render the Vote button', () => {
--- a/app/soapbox/components/polls/poll-footer.tsx
+++ b/app/soapbox/components/polls/poll-footer.tsx
@ -40,21 +40,21 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
  let votesCount = null;

  if (poll.voters_count !== null && poll.voters_count !== undefined) {
-    votesCount = <FormattedMessage id='poll.total_people' defaultMessage='{count, plural, one {# person} other {# people}}' values={{ count: poll.get('voters_count') }} />;
+    votesCount = <FormattedMessage id='poll.total_people' defaultMessage='{count, plural, one {# person} other {# people}}' values={{ count: poll.voters_count }} />;
  } else {
-    votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.get('votes_count') }} />;
+    votesCount = <FormattedMessage id='poll.total_votes' defaultMessage='{count, plural, one {# vote} other {# votes}}' values={{ count: poll.votes_count }} />;
  }

  return (
    <Stack space={4} data-testid='poll-footer'>
-      {(!showResults && poll?.multiple) && (
+      {(!showResults && poll.multiple) && (
        <Button onClick={handleVote} theme='primary' block>
          <FormattedMessage id='poll.vote' defaultMessage='Vote' />
        </Button>
      )}

      <HStack space={1.5} alignItems='center' wrap>
-        {poll.pleroma.get('non_anonymous') && (
+        {poll.pleroma?.non_anonymous && (
          <>
            <Tooltip text={intl.formatMessage(messages.nonAnonymous)}>
              <Text theme='muted' weight='medium'>
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@ -112,10 +112,13 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {

  const pollVotesCount = poll.voters_count || poll.votes_count;
  const percent = pollVotesCount === 0 ? 0 : (option.votes_count / pollVotesCount) * 100;
-  const leading = poll.options.filterNot(other => other.title === option.title).every(other => option.votes_count >= other.votes_count);
  const voted = poll.own_votes?.includes(index);
  const message = intl.formatMessage(messages.votes, { votes: option.votes_count });

+  const leading = poll.options
+    .filter(other => other.title !== option.title)
+    .every(other => option.votes_count >= other.votes_count);
+
  return (
    <div key={option.title}>
      {showResults ? (
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@ -106,7 +106,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
      onMouseEnter={handleMouseEnter(dispatch)}
      onMouseLeave={handleMouseLeave(dispatch)}
    >
-      <Card variant='rounded' className='relative isolate'>
+      <Card variant='rounded' className='relative isolate overflow-hidden'>
        <CardBody>
          <Stack space={2}>
            <BundleContainer fetchComponent={UserPanel}>
@ -142,7 +142,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
          </Stack>

          {followedBy && (
-            <div className='absolute top-2 left-2'>
+            <div className='absolute left-2 top-2'>
              <Badge
                slug='opaque'
                title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
            src={require('@tabler/icons/x.svg')}
            ref={closeButtonRef}
            iconClassName='h-6 w-6'
-            className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
+            className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
          />

          <div className='relative h-full w-full overflow-auto overflow-y-scroll'>
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@ -7,23 +7,27 @@ import { blockAccount } from 'soapbox/actions/accounts';
 import { launchChat } from 'soapbox/actions/chats';
 import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
 import { editEvent } from 'soapbox/actions/events';
-import { groupBlock, groupDeleteStatus, groupKick } from 'soapbox/actions/groups';
-import { toggleBookmark, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
+import { toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport } from 'soapbox/actions/reports';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports';
 import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
+import { deleteFromTimelines } from 'soapbox/actions/timelines';
+import { useDeleteGroupStatus } from 'soapbox/api/hooks/groups/useDeleteGroupStatus';
 import DropdownMenu from 'soapbox/components/dropdown-menu';
 import StatusActionButton from 'soapbox/components/status-action-button';
 import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper';
 import { HStack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
 import { isLocal, isRemote } from 'soapbox/utils/accounts';
 import copy from 'soapbox/utils/copy';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts';

+import GroupPopover from './groups/popover/group-popover';
+
 import type { Menu } from 'soapbox/components/dropdown-menu';
 import type { Account, Group, Status } from 'soapbox/types/entities';

@ -45,6 +49,7 @@ const messages = defineMessages({
  cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
  favourite: { id: 'status.favourite', defaultMessage: 'Like' },
+  disfavourite: { id: 'status.disfavourite', defaultMessage: 'Disike' },
  open: { id: 'status.open', defaultMessage: 'Expand this post' },
  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
  unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
@ -84,16 +89,7 @@ const messages = defineMessages({
  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
  replies_disabled_group: { id: 'status.disabled_replies.group_membership', defaultMessage: 'Only group members can reply' },
  groupModDelete: { id: 'status.group_mod_delete', defaultMessage: 'Delete post from group' },
-  groupModKick: { id: 'status.group_mod_kick', defaultMessage: 'Kick @{name} from group' },
-  groupModBlock: { id: 'status.group_mod_block', defaultMessage: 'Block @{name} from group' },
-  deleteFromGroupHeading: { id: 'confirmations.delete_from_group.heading', defaultMessage: 'Delete from group' },
  deleteFromGroupMessage: { id: 'confirmations.delete_from_group.message', defaultMessage: 'Are you sure you want to delete @{name}\'s post?' },
-  kickFromGroupHeading: { id: 'confirmations.kick_from_group.heading', defaultMessage: 'Kick group member' },
-  kickFromGroupMessage: { id: 'confirmations.kick_from_group.message', defaultMessage: 'Are you sure you want to kick @{name} from this group?' },
-  kickFromGroupConfirm: { id: 'confirmations.kick_from_group.confirm', defaultMessage: 'Kick' },
-  blockFromGroupHeading: { id: 'confirmations.block_from_group.heading', defaultMessage: 'Block group member' },
-  blockFromGroupMessage: { id: 'confirmations.block_from_group.message', defaultMessage: 'Are you sure you want to block @{name} from interacting with this group?' },
-  blockFromGroupConfirm: { id: 'confirmations.block_from_group.confirm', defaultMessage: 'Block' },
 });

 interface IStatusActionBar {
@ -118,6 +114,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
  const features = useFeatures();
  const settings = useSettings();
  const soapboxConfig = useSoapboxConfig();
+  const deleteGroupStatus = useDeleteGroupStatus(status?.group as Group, status.id);

  const { allowedEmoji } = soapboxConfig;

@ -161,6 +158,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
    }
  };

+  const handleDislikeClick: React.EventHandler<React.MouseEvent> = (e) => {
+    if (me) {
+      dispatch(toggleDislike(status));
+    } else {
+      onOpenUnauthorizedModal('DISLIKE');
+    }
+  };
+
  const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
    dispatch(toggleBookmark(status));
  };
@ -247,14 +252,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({

    dispatch(openModal('CONFIRM', {
      icon: require('@tabler/icons/ban.svg'),
-      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+      heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
      confirm: intl.formatMessage(messages.blockConfirm),
      onConfirm: () => dispatch(blockAccount(account.id)),
      secondary: intl.formatMessage(messages.blockAndReport),
      onSecondary: () => {
        dispatch(blockAccount(account.id));
-        dispatch(initReport(account, { status }));
+        dispatch(initReport(ReportableEntities.STATUS, account, { status }));
      },
    }));
  };
@ -271,7 +276,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
  };

  const handleReport: React.EventHandler<React.MouseEvent> = (e) => {
-    dispatch(initReport(status.account as Account, { status }));
+    dispatch(initReport(ReportableEntities.STATUS, status.account as Account, { status }));
  };

  const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
@ -302,31 +307,15 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({

    dispatch(openModal('CONFIRM', {
      heading: intl.formatMessage(messages.deleteHeading),
-      message: intl.formatMessage(messages.deleteFromGroupMessage, { name: account.username }),
+      message: intl.formatMessage(messages.deleteFromGroupMessage, { name: <strong className='break-words'>{account.username}</strong> }),
      confirm: intl.formatMessage(messages.deleteConfirm),
-      onConfirm: () => dispatch(groupDeleteStatus((status.group as Group).id, status.id)),
-    }));
-  };
-
-  const handleKickFromGroup: React.EventHandler<React.MouseEvent> = () => {
-    const account = status.account as Account;
-
-    dispatch(openModal('CONFIRM', {
-      heading: intl.formatMessage(messages.kickFromGroupHeading),
-      message: intl.formatMessage(messages.kickFromGroupMessage, { name: account.username }),
-      confirm: intl.formatMessage(messages.kickFromGroupConfirm),
-      onConfirm: () => dispatch(groupKick((status.group as Group).id, account.id)),
-    }));
-  };
-
-  const handleBlockFromGroup: React.EventHandler<React.MouseEvent> = () => {
-    const account = status.account as Account;
-
-    dispatch(openModal('CONFIRM', {
-      heading: intl.formatMessage(messages.blockFromGroupHeading),
-      message: intl.formatMessage(messages.blockFromGroupMessage, { name: account.username }),
-      confirm: intl.formatMessage(messages.blockFromGroupConfirm),
-      onConfirm: () => dispatch(groupBlock((status.group as Group).id, account.id)),
+      onConfirm: () => {
+        deleteGroupStatus.mutate(status.id, {
+          onSuccess() {
+            dispatch(deleteFromTimelines(status.id));
+          },
+        });
+      },
    }));
  };

@ -351,7 +340,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
      menu.push({
        text: intl.formatMessage(messages.copy),
        action: handleCopy,
-        icon: require('@tabler/icons/link.svg'),
+        icon: require('@tabler/icons/clipboard-copy.svg'),
      });

      if (features.embeds && isLocal(account)) {
@ -455,7 +444,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
      menu.push({
        text: intl.formatMessage(messages.mute, { name: username }),
        action: handleMuteClick,
-        icon: require('@tabler/icons/circle-x.svg'),
+        icon: require('@tabler/icons/volume-3.svg'),
      });
      menu.push({
        text: intl.formatMessage(messages.block, { name: username }),
@ -469,23 +458,17 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
      });
    }

-    if (status.group && groupRelationship?.role && ['admin', 'moderator'].includes(groupRelationship.role)) {
+    if (status.group &&
+      groupRelationship?.role &&
+      [GroupRoles.OWNER].includes(groupRelationship.role) &&
+      !ownAccount
+    ) {
      menu.push(null);
      menu.push({
        text: intl.formatMessage(messages.groupModDelete),
        action: handleDeleteFromGroup,
        icon: require('@tabler/icons/trash.svg'),
-      });
-      // TODO: figure out when an account is not in the group anymore
-      menu.push({
-        text: intl.formatMessage(messages.groupModKick, { name: account.get('username') }),
-        action: handleKickFromGroup,
-        icon: require('@tabler/icons/user-minus.svg'),
-      });
-      menu.push({
-        text: intl.formatMessage(messages.groupModBlock, { name: account.get('username') }),
-        action: handleBlockFromGroup,
-        icon: require('@tabler/icons/ban.svg'),
+        destructive: true,
      });
    }

@ -525,7 +508,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
    return menu;
  };

-  const publicStatus = ['public', 'unlisted'].includes(status.visibility);
+  const publicStatus = ['public', 'unlisted', 'group'].includes(status.visibility);

  const replyCount = status.replies_count;
  const reblogCount = status.reblogs_count;
@ -598,7 +581,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
    replyTitle = intl.formatMessage(messages.replyAll);
  }

-  const canShare = ('share' in navigator) && status.visibility === 'public';
+  const canShare = ('share' in navigator) && (status.visibility === 'public' || status.visibility === 'group');

  return (
    <HStack data-testid='status-action-bar'>
@ -608,14 +591,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
        grow={space === 'expand'}
        onClick={e => e.stopPropagation()}
      >
-        <StatusActionButton
-          title={replyTitle}
-          icon={require('@tabler/icons/message-circle-2.svg')}
-          onClick={handleReplyClick}
-          count={replyCount}
-          text={withLabels ? intl.formatMessage(messages.reply) : undefined}
-          disabled={replyDisabled}
-        />
+        <GroupPopover
+          group={status.group as any}
+          isEnabled={replyDisabled}
+        >
+          <StatusActionButton
+            title={replyTitle}
+            icon={require('@tabler/icons/message-circle-2.svg')}
+            onClick={handleReplyClick}
+            count={replyCount}
+            text={withLabels ? intl.formatMessage(messages.reply) : undefined}
+            disabled={replyDisabled}
+          />
+        </GroupPopover>

        {(features.quotePosts && me) ? (
          <DropdownMenu
@ -645,7 +633,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
        ) : (
          <StatusActionButton
            title={intl.formatMessage(messages.favourite)}
-            icon={require('@tabler/icons/heart.svg')}
+            icon={features.dislikes ? require('@tabler/icons/thumb-up.svg') : require('@tabler/icons/heart.svg')}
            color='accent'
            filled
            onClick={handleFavouriteClick}
@ -655,6 +643,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
          />
        )}

+        {features.dislikes && (
+          <StatusActionButton
+            title={intl.formatMessage(messages.disfavourite)}
+            icon={require('@tabler/icons/thumb-down.svg')}
+            color='accent'
+            filled
+            onClick={handleDislikeClick}
+            active={status.disliked}
+            count={status.dislikes_count}
+            text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined}
+          />
+        )}
+
        {canShare && (
          <StatusActionButton
            title={intl.formatMessage(messages.share)}
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@ -53,7 +53,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
          src={icon}
          className={clsx(
            {
-              'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
+              'fill-accent-300 text-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
            },
            iconClassName,
          )}
--- a/app/soapbox/components/status-list.tsx
+++ b/app/soapbox/components/status-list.tsx
@ -139,6 +139,7 @@ const StatusList: React.FC<IStatusList> = ({
        onMoveDown={handleMoveDown}
        contextType={timelineId}
        showGroup={showGroup}
+        variant={divideType === 'border' ? 'slim' : 'rounded'}
      />
    );
  };
@ -172,6 +173,7 @@ const StatusList: React.FC<IStatusList> = ({
        onMoveDown={handleMoveDown}
        contextType={timelineId}
        showGroup={showGroup}
+        variant={divideType === 'border' ? 'slim' : 'default'}
      />
    ));
  };
@ -245,7 +247,7 @@ const StatusList: React.FC<IStatusList> = ({
      isLoading={isLoading}
      showLoading={isLoading && statusIds.size === 0}
      onLoadMore={handleLoadOlder}
-      placeholderComponent={PlaceholderStatus}
+      placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
      placeholderCount={20}
      ref={node}
      className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@ -2,6 +2,7 @@ import React, { useState } from 'react';

 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
 import Card from 'soapbox/features/status/components/card';
 import Bundle from 'soapbox/features/ui/components/bundle';
@ -153,6 +154,10 @@ const StatusMedia: React.FC<IStatusMedia> = ({
        </Bundle>
      );
    }
+  } else if (status.spoiler_text.length === 0 && !status.quote && status.card?.group) {
+    media = (
+      <GroupLinkPreview card={status.card} />
+    );
  } else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
    media = (
      <Card
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/app/soapbox/components/status-reply-mentions.tsx
@ -54,7 +54,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
      <Link
        key={account.id}
        to={`/@${account.acct}`}
-        className='reply-mentions__account'
+        className='reply-mentions__account max-w-[200px] truncate align-bottom'
        onClick={(e) => e.stopPropagation()}
      >
        @{isPubkey(account.username) ? account.username.slice(0, 8) : account.username}
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@ -2,13 +2,12 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';

 import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
 import TranslateButton from 'soapbox/components/translate-button';
 import AccountContainer from 'soapbox/containers/account-container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
@ -22,7 +21,8 @@ import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
 import StatusInfo from './statuses/status-info';
-import { Card, Stack, Text } from './ui';
+import Tombstone from './tombstone';
+import { Card, Icon, Stack, Text } from './ui';

 import type {
  Account as AccountEntity,
@ -51,7 +51,7 @@ export interface IStatus {
  featured?: boolean
  hideActionBar?: boolean
  hoverable?: boolean
-  variant?: 'default' | 'rounded'
+  variant?: 'default' | 'rounded' | 'slim'
  showGroup?: boolean
  accountAction?: React.ReactElement
 }
@ -212,26 +212,67 @@ const Status: React.FC<IStatus> = (props) => {
  };

  const renderStatusInfo = () => {
-    if (isReblog) {
+    if (isReblog && showGroup && group) {
      return (
        <StatusInfo
          avatarSize={avatarSize}
-          to={`/@${status.getIn(['account', 'acct'])}`}
-          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />}
+          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
+          text={
+            <FormattedMessage
+              id='status.reblogged_by_with_group'
+              defaultMessage='{name} reposted from {group}'
+              values={{
+                name: (
+                  <Link
+                    to={`/@${status.getIn(['account', 'acct'])}`}
+                    className='hover:underline'
+                  >
+                    <bdi className='truncate'>
+                      <strong
+                        className='text-gray-800 dark:text-gray-200'
+                        dangerouslySetInnerHTML={{
+                          __html: String(status.getIn(['account', 'display_name_html'])),
+                        }}
+                      />
+                    </bdi>
+                  </Link>
+                ),
+                group: (
+                  <Link to={`/group/${(status.group as GroupEntity).slug}`} className='hover:underline'>
+                    <strong
+                      className='text-gray-800 dark:text-gray-200'
+                      dangerouslySetInnerHTML={{
+                        __html: (status.group as GroupEntity).display_name_html,
+                      }}
+                    />
+                  </Link>
+                ),
+              }}
+            />
+          }
+        />
+      );
+    } else if (isReblog) {
+      return (
+        <StatusInfo
+          avatarSize={avatarSize}
+          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
          text={
            <FormattedMessage
              id='status.reblogged_by'
              defaultMessage='{name} reposted'
              values={{
                name: (
-                  <bdi className='truncate pr-1 rtl:pl-1'>
-                    <strong
-                      className='text-gray-800 dark:text-gray-200'
-                      dangerouslySetInnerHTML={{
-                        __html: String(status.getIn(['account', 'display_name_html'])),
-                      }}
-                    />
-                  </bdi>
+                  <Link to={`/@${status.getIn(['account', 'acct'])}`} className='hover:underline'>
+                    <bdi className='truncate'>
+                      <strong
+                        className='text-gray-800 dark:text-gray-200'
+                        dangerouslySetInnerHTML={{
+                          __html: String(status.getIn(['account', 'display_name_html'])),
+                        }}
+                      />
+                    </bdi>
+                  </Link>
                ),
              }}
            />
@ -242,11 +283,9 @@ const Status: React.FC<IStatus> = (props) => {
      return (
        <StatusInfo
          avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={require('@tabler/icons/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
          text={
-            <Text size='xs' theme='muted' weight='medium'>
-              <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
-            </Text>
+            <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
          }
        />
      );
@ -254,18 +293,23 @@ const Status: React.FC<IStatus> = (props) => {
      return (
        <StatusInfo
          avatarSize={avatarSize}
-          to={`/groups/${group.id}`}
-          icon={<Icon src={require('@tabler/icons/circles.svg')} className='text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={require('@tabler/icons/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
          text={
-            <Text size='xs' theme='muted' weight='medium'>
-              <FormattedMessage
-                id='status.group'
-                defaultMessage='Posted in {group}'
-                values={{ group: (
-                  <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
-                ) }}
-              />
-            </Text>
+            <FormattedMessage
+              id='status.group'
+              defaultMessage='Posted in {group}'
+              values={{
+                group: (
+                  <Link to={`/group/${group.slug}`} className='hover:underline'>
+                    <bdi className='truncate'>
+                      <strong className='text-gray-800 dark:text-gray-200'>
+                        <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+                      </strong>
+                    </bdi>
+                  </Link>
+                ),
+              }}
+            />
          }
        />
      );
@ -345,6 +389,17 @@ const Status: React.FC<IStatus> = (props) => {

  const isUnderReview = actualStatus.visibility === 'self';
  const isSensitive = actualStatus.hidden;
+  const isSoftDeleted = status.tombstone?.reason === 'deleted';
+
+  if (isSoftDeleted) {
+    return (
+      <Tombstone
+        id={status.id}
+        onMoveUp={(id) => onMoveUp ? onMoveUp(id) : null}
+        onMoveDown={(id) => onMoveDown ? onMoveDown(id) : null}
+      />
+    );
+  }

  return (
    <HotKeys handlers={handlers} data-testid='status'>
--- a/app/soapbox/components/statuses/status-info.tsx
+++ b/app/soapbox/components/statuses/status-info.tsx
@ -1,37 +1,44 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+
+import { HStack, Text } from '../ui';

 interface IStatusInfo {
  avatarSize: number
-  to?: string
  icon: React.ReactNode
  text: React.ReactNode
 }

 const StatusInfo = (props: IStatusInfo) => {
-  const { avatarSize, to, icon, text } = props;
+  const { avatarSize, icon, text } = props;

-  const onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.stopPropagation();
  };

-  const Container = to ? Link : 'div';
-  const containerProps: any = to ? { onClick, to } : {};
-
  return (
-    <Container
-      {...containerProps}
-      className='flex items-center space-x-3 text-xs font-medium text-gray-700 hover:underline rtl:space-x-reverse dark:text-gray-600'
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      // eslint-disable-next-line jsx-a11y/aria-role
+      role='status-info'
+      onClick={onClick}
    >
-      <div
-        className='flex justify-end'
-        style={{ width: avatarSize }}
+      <HStack
+        space={3}
+        alignItems='center'
+        className='cursor-default text-xs font-medium text-gray-700 rtl:space-x-reverse dark:text-gray-600'
      >
-        {icon}
-      </div>
+        <div
+          className='flex justify-end'
+          style={{ width: avatarSize }}
+        >
+          {icon}
+        </div>

-      {text}
-    </Container>
+        <Text size='xs' theme='muted' weight='medium'>
+          {text}
+        </Text>
+      </HStack>
+    </div>
  );
 };

--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@ -3,7 +3,7 @@ import React, { useRef } from 'react';

 import { useSettings } from 'soapbox/hooks';

-interface IStillImage {
+export interface IStillImage {
  /** Image alt text. */
  alt?: string
  /** Extra class names for the outer <div> container. */
@ -16,10 +16,12 @@ interface IStillImage {
  letterboxed?: boolean
  /** Whether to show the file extension in the corner. */
  showExt?: boolean
+  /** Callback function if the image fails to load */
+  onError?(): void
 }

 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false, showExt = false }) => {
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false, showExt = false, onError }) => {
  const settings = useSettings();
  const autoPlayGif = settings.get('autoPlayGif');

@ -55,6 +57,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
        alt={alt}
        ref={img}
        onLoad={handleImageLoad}
+        onError={onError}
        className={clsx(baseClassName, {
          'invisible group-hover:visible': hoverToPlay,
        })}
@ -70,7 +73,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
      )}

      {(hoverToPlay && showExt) && (
-        <div className='pointer-events-none absolute left-2 bottom-2 opacity-90 group-hover:hidden'>
+        <div className='pointer-events-none absolute bottom-2 left-2 opacity-90 group-hover:hidden'>
          <ExtensionBadge ext='GIF' />
        </div>
      )}
--- a/app/soapbox/components/tombstone.tsx
+++ b/app/soapbox/components/tombstone.tsx
@ -19,10 +19,17 @@ const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {

  return (
    <HotKeys handlers={handlers}>
-      <div className='focusable flex items-center justify-center border border-solid border-gray-200 bg-gray-100 p-9 dark:border-gray-800 dark:bg-gray-900 sm:rounded-xl' tabIndex={0}>
-        <Text>
-          <FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts are unavailable.' />
-        </Text>
+      <div className='h-16'>
+        <div
+          className='focusable flex h-[42px] items-center justify-center rounded-lg border-2 border-gray-200 text-center'
+        >
+          <Text theme='muted'>
+            <FormattedMessage
+              id='statuses.tombstone'
+              defaultMessage='One or more posts are unavailable.'
+            />
+          </Text>
+        </div>
      </div>
    </HotKeys>
  );
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/app/soapbox/components/ui/accordion/accordion.tsx
@ -21,13 +21,16 @@ interface IAccordion {
  menu?: Menu
  expanded?: boolean
  onToggle?: (value: boolean) => void
+  action?: () => void
+  actionIcon?: string
+  actionLabel?: string
 }

 /**
 * Accordion
 * An accordion is a vertically stacked group of collapsible sections.
 */
-const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {} }) => {
+const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {}, action, actionIcon, actionLabel }) => {
  const intl = useIntl();

  const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
@ -35,6 +38,13 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
    e.preventDefault();
  };

+  const handleAction = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!action) return;
+
+    action();
+    e.preventDefault();
+  };
+
  return (
    <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
      <button
@ -53,6 +63,14 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
              src={require('@tabler/icons/dots-vertical.svg')}
            />
          )}
+          {action && actionIcon && (
+            <button onClick={handleAction} title={actionLabel}>
+              <Icon
+                src={actionIcon}
+                className='h-5 w-5 text-gray-700 dark:text-gray-600'
+              />
+            </button>
+          )}
          <Icon
            src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')}
            className='h-5 w-5 text-gray-700 dark:text-gray-600'
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@ -1,34 +1,54 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';

-import StillImage from 'soapbox/components/still-image';
+import StillImage, { IStillImage } from 'soapbox/components/still-image';
+
+import Icon from '../icon/icon';

 const AVATAR_SIZE = 42;

-interface IAvatar {
-  /** URL to the avatar image. */
-  src: string
+interface IAvatar extends Pick<IStillImage, 'src' | 'onError' | 'className'> {
  /** Width and height of the avatar in pixels. */
  size?: number
-  /** Extra class names for the div surrounding the avatar image. */
-  className?: string
 }

 /** Round profile avatar for accounts. */
 const Avatar = (props: IAvatar) => {
  const { src, size = AVATAR_SIZE, className } = props;

+  const [isAvatarMissing, setIsAvatarMissing] = useState<boolean>(false);
+
+  const handleLoadFailure = () => setIsAvatarMissing(true);
+
  const style: React.CSSProperties = React.useMemo(() => ({
    width: size,
    height: size,
  }), [size]);

+  if (isAvatarMissing) {
+    return (
+      <div
+        style={{
+          width: size,
+          height: size,
+        }}
+        className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)}
+      >
+        <Icon
+          src={require('@tabler/icons/photo-off.svg')}
+          className='h-4 w-4 text-gray-500 dark:text-gray-700'
+        />
+      </div>
+    );
+  }
+
  return (
    <StillImage
      className={clsx('rounded-full', className)}
      style={style}
      src={src}
      alt='Avatar'
+      onError={handleLoadFailure}
    />
  );
 };
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@ -9,7 +9,7 @@ const themes = {
    'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
  accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
  danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
-  transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
+  transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
  outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
  muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
 };
@ -39,7 +39,7 @@ const useButtonStyles = ({
  size,
 }: IButtonStyles) => {
  const buttonStyle = clsx({
-    'inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all': true,
+    'inline-flex items-center place-content-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all': true,
    'select-none disabled:opacity-75 disabled:cursor-default': disabled,
    [`${themes[theme]}`]: true,
    [`${sizes[size]}`]: true,
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@ -16,11 +16,13 @@ const messages = defineMessages({
  back: { id: 'card.back.label', defaultMessage: 'Back' },
 });

+export type CardSizes = keyof typeof sizes
+
 interface ICard {
  /** The type of card. */
-  variant?: 'default' | 'rounded'
+  variant?: 'default' | 'rounded' | 'slim'
  /** Card size preset. */
-  size?: keyof typeof sizes
+  size?: CardSizes
  /** Extra classnames for the <div> element. */
  className?: string
  /** Elements inside the card. */
@ -33,8 +35,9 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
    ref={ref}
    {...filteredProps}
    className={clsx({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
      [sizes[size]]: variant === 'rounded',
+      'py-4': variant === 'slim',
    }, className)}
  >
    {children}
@ -64,7 +67,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
    const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };

    return (
-      <Comp {...backAttributes} className='text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
        <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
        <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
      </Comp>
@ -72,7 +75,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
  };

  return (
-    <HStack alignItems='center' space={2} className={clsx('mb-4', className)}>
+    <HStack alignItems='center' space={2} className={className}>
      {renderBackButton()}

      {children}
--- a/app/soapbox/components/ui/carousel/carousel.tsx
+++ b/app/soapbox/components/ui/carousel/carousel.tsx
@ -13,16 +13,19 @@ interface ICarousel {
  itemCount: number
  /** The minimum width per item */
  itemWidth: number
+  /** Should the controls be disabled? */
+  isDisabled?: boolean
 }

 /**
 * Carousel
 */
 const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
-  const { children, controlsHeight, itemCount, itemWidth } = props;
+  const { children, controlsHeight, isDisabled, itemCount, itemWidth } = props;

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_ref, setContainerRef, { width: containerWidth }] = useDimensions();
+  const [ref, setContainerRef, { width: finalContainerWidth }] = useDimensions();
+  const containerWidth = finalContainerWidth || ref?.clientWidth;

  const [pageSize, setPageSize] = useState<number>(0);
  const [currentPage, setCurrentPage] = useState<number>(1);
@ -62,7 +65,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
          data-testid='prev-page'
          onClick={handlePrevPage}
          className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25'
-          disabled={!hasPrevPage}
+          disabled={!hasPrevPage || isDisabled}
        >
          <Icon
            src={require('@tabler/icons/chevron-left.svg')}
@ -94,7 +97,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
          data-testid='next-page'
          onClick={handleNextPage}
          className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25'
-          disabled={!hasNextPage}
+          disabled={!hasNextPage || isDisabled}
        >
          <Icon
            src={require('@tabler/icons/chevron-right.svg')}
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@ -1,11 +1,12 @@
 import clsx from 'clsx';
-import React from 'react';
+import throttle from 'lodash/throttle';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';

 import Helmet from 'soapbox/components/helmet';
 import { useSoapboxConfig } from 'soapbox/hooks';

-import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card';

 type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;

@ -54,13 +55,29 @@ export interface IColumn {
  ref?: React.Ref<HTMLDivElement>
  /** Children to display in the column. */
  children?: React.ReactNode
+  /** Action for the ColumnHeader, displayed at the end. */
  action?: React.ReactNode
+  /** Column size, inherited from Card. */
+  size?: CardSizes
 }

 /** A backdrop for the main section of the UI. */
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true, className, action } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props;
  const soapboxConfig = useSoapboxConfig();
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const handleScroll = useCallback(throttle(() => {
+    setIsScrolled(window.pageYOffset > 32);
+  }, 50), []);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);

  return (
    <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>
@ -76,12 +93,18 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
        )}
      </Helmet>

-      <Card variant={transparent ? undefined : 'rounded'} className={className}>
+      <Card size={size} variant={transparent ? undefined : 'rounded'} className={className}>
        {withHeader && (
          <ColumnHeader
            label={label}
            backHref={backHref}
-            className={clsx({ 'px-4 pt-4 sm:p-0': transparent })}
+            className={clsx({
+              'rounded-t-3xl': !isScrolled && !transparent,
+              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 backdrop-blur lg:top-16': !transparent,
+              'p-4 sm:p-0 sm:pb-4': transparent,
+              '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
+              '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
+            })}
            action={action}
          />
        )}
--- a/app/soapbox/components/ui/file-input/file-input.tsx
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@ -8,7 +8,7 @@ const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
      {...props}
      ref={ref}
      type='file'
-      className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:py-1.5 file:px-3 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
+      className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
    />
  );
 });
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@ -86,6 +86,12 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
      )}

      <div className='mt-1 dark:text-white'>
+        {hintText && (
+          <p data-testid='form-group-hint' className='mb-0.5 text-xs text-gray-700 dark:text-gray-600'>
+            {hintText}
+          </p>
+        )}
+
        {firstChild}
        {inputChildren.filter((_, i) => i !== 0)}

@ -97,12 +103,6 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
            {errors.join(', ')}
          </p>
        )}
-
-        {hintText && (
-          <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-700 dark:text-gray-600'>
-            {hintText}
-          </p>
-        )}
      </div>
    </div>
  );
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@ -11,25 +11,24 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  src: string
  /** Text to display next ot the button. */
  text?: string
-  /** Don't render a background behind the icon. */
-  transparent?: boolean
  /** Predefined styles to display for the button. */
-  theme?: 'seamless' | 'outlined'
+  theme?: 'seamless' | 'outlined' | 'secondary' | 'transparent'
  /** Override the data-testid */
  'data-testid'?: string
 }

 /** A clickable icon. */
 const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
-  const { src, className, iconClassName, text, transparent = false, theme = 'seamless', ...filteredProps } = props;
+  const { src, className, iconClassName, text, theme = 'seamless', ...filteredProps } = props;

  return (
    <button
      ref={ref}
      type='button'
      className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
-        'bg-white dark:bg-transparent': !transparent,
+        'bg-white dark:bg-transparent': theme === 'seamless',
        'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
+        'border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200': theme === 'secondary',
        'opacity-50': filteredProps.disabled,
      }, className)}
      {...filteredProps}
--- a/app/soapbox/components/ui/icon/icon.tsx
+++ b/app/soapbox/components/ui/icon/icon.tsx
@ -23,7 +23,7 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
  <div className='relative flex shrink-0 flex-col' data-testid='icon'>
    {count ? (
-      <span className='absolute -top-2 -right-3 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
+      <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>
        <Counter count={count} countMax={countMax} />
      </span>
    ) : null}
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@ -84,8 +84,10 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
          type={revealed ? 'text' : type}
          ref={ref}
          className={clsx('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
-            'text-gray-900 dark:text-gray-100 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            'block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
              ['normal', 'search'].includes(theme),
+            'text-gray-900 dark:text-gray-100': !props.disabled,
+            'text-gray-600': props.disabled,
            'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
            'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': theme === 'search',
            'pr-7 rtl:pl-7 rtl:pr-3': isPassword || append,
--- a/app/soapbox/components/ui/menu/menu.tsx
+++ b/app/soapbox/components/ui/menu/menu.tsx
@ -37,6 +37,6 @@ const MenuList: React.FC<IMenuList> = (props) => {
 };

 /** Divides menu items. */
-const MenuDivider = () => <hr className='my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800' />;
+const MenuDivider = () => <hr className='mx-2 my-1 border-t-2 border-gray-100 dark:border-gray-800' />;

 export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@ -55,10 +55,11 @@ interface IModal {
  title?: React.ReactNode
  width?: keyof typeof widths
  children?: React.ReactNode
+  className?: string
 }

 /** Displays a modal dialog box. */
-const Modal: React.FC<IModal> = ({
+const Modal = React.forwardRef<HTMLDivElement, IModal>(({
  cancelAction,
  cancelText,
  children,
@ -76,7 +77,8 @@ const Modal: React.FC<IModal> = ({
  skipFocus = false,
  title,
  width = 'xl',
-}) => {
+  className,
+}, ref) => {
  const intl = useIntl();
  const buttonRef = React.useRef<HTMLButtonElement>(null);

@ -87,7 +89,11 @@ const Modal: React.FC<IModal> = ({
  }, [skipFocus, buttonRef]);

  return (
-    <div data-testid='modal' className={clsx('pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 dark:text-gray-100', widths[width])}>
+    <div
+      ref={ref}
+      data-testid='modal'
+      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:bg-primary-900 dark:text-gray-100', widths[width])}
+    >
      <div className='w-full justify-between sm:flex sm:items-start'>
        <div className='w-full'>
          {title && (
@ -96,7 +102,7 @@ const Modal: React.FC<IModal> = ({
                'flex-row-reverse': closePosition === 'left',
              })}
            >
-              <h3 className='grow text-lg font-bold leading-6 text-gray-900 dark:text-white'>
+              <h3 className='grow truncate text-lg font-bold leading-6 text-gray-900 dark:text-white'>
                {title}
              </h3>

@ -157,6 +163,6 @@ const Modal: React.FC<IModal> = ({
      )}
    </div>
  );
-};
+});

 export default Modal;
--- a/app/soapbox/components/ui/popover/popover.tsx
+++ b/app/soapbox/components/ui/popover/popover.tsx
@ -1,18 +1,30 @@
 import {
  arrow,
+  autoPlacement,
  FloatingArrow,
  offset,
  useClick,
  useDismiss,
  useFloating,
+  useHover,
  useInteractions,
  useTransitionStyles,
 } from '@floating-ui/react';
+import clsx from 'clsx';
 import React, { useRef, useState } from 'react';

+import Portal from '../portal/portal';
+
 interface IPopover {
  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  /** The content of the popover */
  content: React.ReactNode
+  /** Should we remove padding on the Popover */
+  isFlush?: boolean
+  /** Should the popover trigger via click or hover */
+  interaction?: 'click' | 'hover'
+  /** Add a class to the reference (trigger) element */
+  referenceElementClassName?: string
 }

 /**
@ -22,7 +34,7 @@ interface IPopover {
 * of information.
 */
 const Popover: React.FC<IPopover> = (props) => {
-  const { children, content } = props;
+  const { children, content, referenceElementClassName, interaction = 'hover', isFlush = false } = props;

  const [isOpen, setIsOpen] = useState<boolean>(false);

@ -33,6 +45,9 @@ const Popover: React.FC<IPopover> = (props) => {
    onOpenChange: setIsOpen,
    placement: 'top',
    middleware: [
+      autoPlacement({
+        allowedPlacements: ['top', 'bottom'],
+      }),
      offset(10),
      arrow({
        element: arrowRef,
@ -40,8 +55,6 @@ const Popover: React.FC<IPopover> = (props) => {
    ],
  });

-  const click = useClick(context);
-  const dismiss = useDismiss(context);
  const { isMounted, styles } = useTransitionStyles(context, {
    initial: {
      opacity: 0,
@ -53,8 +66,13 @@ const Popover: React.FC<IPopover> = (props) => {
    },
  });

+  const click = useClick(context, { enabled: interaction === 'click' });
+  const hover = useHover(context, { enabled: interaction === 'hover' });
+  const dismiss = useDismiss(context);
+
  const { getReferenceProps, getFloatingProps } = useInteractions([
    click,
+    hover,
    dismiss,
  ]);

@ -63,25 +81,37 @@ const Popover: React.FC<IPopover> = (props) => {
      {React.cloneElement(children, {
        ref: refs.setReference,
        ...getReferenceProps(),
-        className: 'cursor-help',
+        className: clsx(children.props.className, referenceElementClassName),
      })}

      {(isMounted) && (
-        <div
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-            ...styles,
-          }}
-          className='rounded-lg bg-white p-6 shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
-          {...getFloatingProps()}
-        >
-          {content}
+        <Portal>
+          <div
+            ref={refs.setFloating}
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              ...styles,
+            }}
+            className={
+              clsx({
+                'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
+                'p-6': !isFlush,
+              })
+            }
+            {...getFloatingProps()}
+          >
+            {content}

-          <FloatingArrow ref={arrowRef} context={context} className='fill-white dark:hidden' />
-        </div>
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
+              tipRadius={3}
+            />
+          </div>
+        </Portal>
      )}
    </>
  );
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@ -16,6 +16,7 @@ const messages = defineMessages({
 export type StreamfieldComponent<T> = React.ComponentType<{
  value: T
  onChange: (value: T) => void
+  autoFocus: boolean
 }>;

 interface IStreamfield {
@ -69,14 +70,19 @@ const Streamfield: React.FC<IStreamfield> = ({
      </Stack>

      {(values.length > 0) && (
-        <Stack>
+        <Stack space={1}>
          {values.map((value, i) => value?._destroy ? null : (
            <HStack space={2} alignItems='center'>
-              <Component key={i} onChange={handleChange(i)} value={value} />
+              <Component
+                key={i}
+                onChange={handleChange(i)}
+                value={value}
+                autoFocus={i > 0}
+              />
              {values.length > minItems && onRemoveItem && (
                <IconButton
                  iconClassName='h-4 w-4'
-                  className='bg-transparent text-gray-400 hover:text-gray-600'
+                  className='bg-transparent text-gray-600 hover:text-gray-600'
                  src={require('@tabler/icons/x.svg')}
                  onClick={() => onRemoveItem(i)}
                  title={intl.formatMessage(messages.remove)}
@ -87,11 +93,9 @@ const Streamfield: React.FC<IStreamfield> = ({
        </Stack>
      )}

-      {onAddItem && (
+      {(onAddItem && (values.length < maxItems)) && (
        <Button
-          icon={require('@tabler/icons/plus.svg')}
          onClick={onAddItem}
-          disabled={values.length >= maxItems}
          theme='secondary'
          block
        >
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@ -156,7 +156,7 @@ const Tabs = ({ items, activeItem }: ITabs) => {
      >
        <div className='relative'>
          {count ? (
-            <span className='absolute -top-2 left-full ml-1'>
+            <span className='absolute left-full ml-2'>
              <Counter count={count} />
            </span>
          ) : null}
--- a/app/soapbox/components/ui/tag-input/tag.tsx
+++ b/app/soapbox/components/ui/tag-input/tag.tsx
@ -20,7 +20,6 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
        iconClassName='h-4 w-4'
        src={require('@tabler/icons/x.svg')}
        onClick={() => onDelete(tag)}
-        transparent
      />
    </div>
  );
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@ -1,5 +1,9 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Stack from '../stack/stack';
+import Text from '../text/text';

 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
  /** Put the cursor into the input on mount. */
@ -28,6 +32,8 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
  isResizeable?: boolean
  /** Textarea theme. */
  theme?: 'default' | 'transparent'
+  /** Whether to display a character counter below the textarea. */
+  withCounter?: boolean
 }

 /** Textarea with custom styles. */
@ -40,8 +46,11 @@ const Textarea = React.forwardRef(({
  maxRows = 10,
  minRows = 1,
  theme = 'default',
+  maxLength,
+  value,
  ...props
 }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
+  const length = value?.length || 0;
  const [rows, setRows] = useState<number>(autoGrow ? 1 : 4);

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@ -70,20 +79,35 @@ const Textarea = React.forwardRef(({
  };

  return (
-    <textarea
-      {...props}
-      ref={ref}
-      rows={rows}
-      onChange={handleChange}
-      className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
-        'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
-          theme === 'default',
-        'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
-        'font-mono': isCodeEditor,
-        'text-red-600 border-red-600': hasError,
-        'resize-none': !isResizeable,
-      })}
-    />
+    <Stack space={1.5}>
+      <textarea
+        {...props}
+        value={value}
+        ref={ref}
+        rows={rows}
+        onChange={handleChange}
+        className={clsx('block w-full rounded-md text-gray-900 placeholder:text-gray-600 dark:text-gray-100 dark:placeholder:text-gray-600 sm:text-sm', {
+          'bg-white dark:bg-transparent shadow-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+            theme === 'default',
+          'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
+          'font-mono': isCodeEditor,
+          'text-red-600 border-red-600': hasError,
+          'resize-none': !isResizeable,
+        })}
+      />
+
+      {maxLength && (
+        <div className='text-right rtl:text-left'>
+          <Text size='xs' theme={maxLength - length < 0 ? 'danger' : 'muted'}>
+            <FormattedMessage
+              id='textarea.counter.label'
+              defaultMessage='{count} characters remaining'
+              values={{ count: maxLength - length }}
+            />
+          </Text>
+        </div>
+      )}
+    </Stack>
  );
 },
 );
--- a/app/soapbox/components/ui/toast/toast.tsx
+++ b/app/soapbox/components/ui/toast/toast.tsx
@ -8,6 +8,8 @@ import { ToastText, ToastType } from 'soapbox/toast';

 import HStack from '../hstack/hstack';
 import Icon from '../icon/icon';
+import Stack from '../stack/stack';
+import Text from '../text/text';

 const renderText = (text: ToastText) => {
  if (typeof text === 'string') {
@ -24,13 +26,14 @@ interface IToast {
  action?(): void
  actionLink?: string
  actionLabel?: ToastText
+  summary?: string
 }

 /**
 * Customizable Toasts for in-app notifications.
 */
 const Toast = (props: IToast) => {
-  const { t, message, type, action, actionLink, actionLabel } = props;
+  const { t, message, type, action, actionLink, actionLabel, summary } = props;

  const dismissToast = () => toast.dismiss(t.id);

@ -109,35 +112,46 @@ const Toast = (props: IToast) => {
        })
      }
    >
-      <HStack space={4} alignItems='start'>
-        <HStack space={3} justifyContent='between' alignItems='start' className='w-0 flex-1'>
-          <HStack space={3} alignItems='start' className='w-0 flex-1'>
-            <div className='shrink-0'>
-              {renderIcon()}
-            </div>
+      <Stack space={2}>
+        <HStack space={4} alignItems='start'>
+          <HStack space={3} justifyContent='between' alignItems='start' className='w-0 flex-1'>
+            <HStack space={3} alignItems='start' className='w-0 flex-1'>
+              <div className='shrink-0'>
+                {renderIcon()}
+              </div>

-            <p className='pt-0.5 text-sm text-gray-900 dark:text-gray-100' data-testid='toast-message'>
-              {renderText(message)}
-            </p>
+              <Text
+                size='sm'
+                data-testid='toast-message'
+                className='pt-0.5'
+                weight={typeof summary === 'undefined' ? 'normal' : 'medium'}
+              >
+                {renderText(message)}
+              </Text>
+            </HStack>
+
+            {/* Action */}
+            {renderAction()}
          </HStack>

-          {/* Action */}
-          {renderAction()}
+          {/* Dismiss Button */}
+          <div className='flex shrink-0 pt-0.5'>
+            <button
+              type='button'
+              className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
+              onClick={dismissToast}
+              data-testid='toast-dismiss'
+            >
+              <span className='sr-only'>Close</span>
+              <Icon src={require('@tabler/icons/x.svg')} className='h-5 w-5' />
+            </button>
+          </div>
        </HStack>

-        {/* Dismiss Button */}
-        <div className='flex shrink-0 pt-0.5'>
-          <button
-            type='button'
-            className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
-            onClick={dismissToast}
-            data-testid='toast-dismiss'
-          >
-            <span className='sr-only'>Close</span>
-            <Icon src={require('@tabler/icons/x.svg')} className='h-5 w-5' />
-          </button>
-        </div>
-      </HStack>
+        {summary ? (
+          <Text theme='muted' size='sm'>{summary}</Text>
+        ) : null}
+      </Stack>
    </div>
  );
 };
--- a/app/soapbox/components/ui/toggle/toggle.tsx
+++ b/app/soapbox/components/ui/toggle/toggle.tsx
@ -1,13 +1,53 @@
-import React from 'react';
-import ReactToggle, { ToggleProps } from 'react-toggle';
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+
+interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> {
+  size?: 'sm' | 'md'
+}
+
+/** A glorified checkbox. */
+const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked, onChange, required, disabled }) => {
+  const input = useRef<HTMLInputElement>(null);
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+    input.current?.focus();
+    input.current?.click();
+  };

-/** A glorified checkbox. Wrapper around react-toggle. */
-const Toggle: React.FC<ToggleProps> = ({ icons = false, ...rest }) => {
  return (
-    <ReactToggle
-      icons={icons}
-      {...rest}
-    />
+    <button
+      className={clsx('flex-none rounded-full', {
+        'bg-gray-500': !checked && !disabled,
+        'bg-primary-600': checked && !disabled,
+        'bg-gray-200': !checked && disabled,
+        'bg-primary-200': checked && disabled,
+        'w-9 p-0.5': size === 'sm',
+        'w-11 p-0.5': size === 'md',
+        'cursor-default': disabled,
+      })}
+      onClick={handleClick}
+      type='button'
+    >
+      <div className={clsx('rounded-full bg-white transition-transform', {
+        'h-4.5 w-4.5': size === 'sm',
+        'translate-x-3.5': size === 'sm' && checked,
+        'h-6 w-6': size === 'md',
+        'translate-x-4': size === 'md' && checked,
+      })}
+      />
+
+      <input
+        id={id}
+        ref={input}
+        name={name}
+        type='checkbox'
+        className='sr-only'
+        checked={checked}
+        onChange={onChange}
+        required={required}
+        disabled={disabled}
+      />
+    </button>
  );
 };

--- a/app/soapbox/components/ui/tooltip/tooltip.css
+++ b/app/soapbox/components/ui/tooltip/tooltip.css
@ -1,12 +0,0 @@
-:root {
-  --reach-tooltip: 1;
-}
-
-[data-reach-tooltip] {
-  @apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-gray-100 dark:bg-gray-100 dark:text-gray-900;
-  z-index: 100;
-}
-
-[data-reach-tooltip-arrow] {
-  @apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-100;
-}
--- a/Show more
+++ b/Show more