Merge remote-tracking branch 'soapbox/develop' into lexical

.eslintrc.cjs

@@ -55,6 +55,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

CHANGELOG.md

@@ -10,6 +10,8 @@ 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.
+- Posts: Support dislikes on Friendica.
+- UI: added a character counter to some textareas.
 
 ### Changed
 - Posts: truncate Nostr pubkeys in reply mentions.
@@ -24,6 +26,7 @@ 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.
 
 ## [3.2.0] - 2023-02-15
 

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,

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();
@@ -178,7 +157,6 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
 export {
   deactivateUserModal,
   deleteUserModal,
-  rejectUserModal,
   toggleStatusSensitivityModal,
   deleteStatusModal,
 };

app/soapbox/components/authorize-reject-buttons.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
@@ -6,67 +7,133 @@ 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 }) => {
+const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
-  const [state, setState] = useState<'authorized' | 'rejected' | 'pending'>('pending');
+  const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
+  const timeout = useRef<NodeJS.Timeout>();
 
-  async function handleAuthorize() {
+  function handleAction(
-    try {
+    present: 'authorizing' | 'rejecting',
-      await onAuthorize();
+    past: 'authorized' | 'rejected',
-      setState('authorized');
+    action: () => Promise<unknown> | unknown,
-    } catch (e) {
+  ): void {
-      console.error(e);
+    if (state === present) {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      setState('pending');
+    } else {
+      const doAction = async () => {
+        try {
+          await action();
+          setState(past);
+        } catch (e) {
+          console.error(e);
+        }
+      };
+      if (typeof countdown === 'number') {
+        setState(present);
+        timeout.current = setTimeout(doAction, countdown);
+      } else {
+        doAction();
+      }
     }
   }
 
-  async function handleReject() {
+  const handleAuthorize = async () => handleAction('authorizing', 'authorized', onAuthorize);
-    try {
+  const handleReject = async () => handleAction('rejecting', 'rejected', onReject);
-      await onReject();
+
-      setState('rejected');
+  useEffect(() => {
-    } catch (e) {
+    return () => {
-      console.error(e);
+      if (timeout.current) {
-    }
+        clearTimeout(timeout.current);
-  }
+      }
+    };
+  }, []);
 
   switch (state) {
-    case 'pending':
-      return (
-        <HStack space={3} alignItems='center'>
-          <IconButton
-            src={require('@tabler/icons/x.svg')}
-            onClick={handleReject}
-            theme='seamless'
-            className='h-10 w-10 items-center justify-center border-2 border-danger-600/10 hover:border-danger-600'
-            iconClassName='h-6 w-6 text-danger-600'
-          />
-          <IconButton
-            src={require('@tabler/icons/check.svg')}
-            onClick={handleAuthorize}
-            theme='seamless'
-            className='h-10 w-10 items-center justify-center border-2 border-primary-500/10 hover:border-primary-500'
-            iconClassName='h-6 w-6 text-primary-500'
-          />
-        </HStack>
-      );
     case 'authorized':
       return (
-        <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
+        <ActionEmblem text={<FormattedMessage id='authorize.success' defaultMessage='Approved' />} />
-          <Text theme='muted' size='sm'>
-            <FormattedMessage id='authorize.success' defaultMessage='Approved' />
-          </Text>
-        </div>
       );
     case 'rejected':
       return (
-        <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
+        <ActionEmblem text={<FormattedMessage id='reject.success' defaultMessage='Rejected' />} />
-          <Text theme='muted' size='sm'>
+      );
-            <FormattedMessage id='reject.success' defaultMessage='Rejected' />
+    default:
-          </Text>
+      return (
-        </div>
+        <HStack space={3} alignItems='center'>
+          <AuthorizeRejectButton
+            theme='danger'
+            icon={require('@tabler/icons/x.svg')}
+            action={handleReject}
+            isLoading={state === 'rejecting'}
+            disabled={state === 'authorizing'}
+          />
+          <AuthorizeRejectButton
+            theme='primary'
+            icon={require('@tabler/icons/check.svg')}
+            action={handleAuthorize}
+            isLoading={state === 'authorizing'}
+            disabled={state === 'rejecting'}
+          />
+        </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
+}
+
+const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, disabled }) => {
+  return (
+    <div className='relative'>
+      <IconButton
+        src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
+        onClick={action}
+        theme='seamless'
+        className={clsx('h-10 w-10 items-center justify-center border-2', {
+          'border-primary-500/10 hover:border-primary-500': theme === 'primary',
+          'border-danger-600/10 hover:border-danger-600': theme === 'danger',
+        })}
+        iconClassName={clsx('h-6 w-6', {
+          'text-primary-500': theme === 'primary',
+          'text-danger-600': theme === 'danger',
+        })}
+        disabled={disabled}
+      />
+      {(isLoading) && (
+        <div
+          className={clsx('pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent', {
+            'border-t-primary-500': theme === 'primary',
+            'border-t-danger-600': theme === 'danger',
+          })}
+        />
+      )}
+    </div>
+  );
+};
+
 export { AuthorizeRejectButtons };

app/soapbox/components/group-card.tsx

@@ -43,7 +43,13 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
 
       {/* 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} />

app/soapbox/components/groups/popover/group-popover.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link } 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();
+
+  if (!isEnabled) {
+    return children;
+  }
+
+  return (
+    <Popover
+      interaction='click'
+      referenceElementClassName='cursor-pointer'
+      content={
+        <Stack space={4} className='w-80'>
+          <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 top-1/2 left-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>
+
+          <div className='px-4 pb-4'>
+            <Link to={`/groups/${group.id}`}>
+              <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;

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

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 { Icon, HStack, Select } from './ui';
-import { HStack, Select } from './ui';
 
 interface IList {
   children: React.ReactNode
@@ -58,13 +57,13 @@ 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,
+        'flex items-center justify-between px-4 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark: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',
+        '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}
     >
       <div className='flex flex-col py-1.5 pr-4 rtl:pl-4 rtl:pr-0'>
-        <LabelComp className='text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
+        <LabelComp className='font-medium text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
 
         {hint ? (
           <span className='text-sm text-gray-700 dark:text-gray-600'>{hint}</span>
@@ -83,12 +82,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')}
+              src={require('@tabler/icons/check.svg')}
-              className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+              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}
 

app/soapbox/components/status-action-bar.tsx

@@ -8,7 +8,7 @@ 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';
@@ -24,6 +24,8 @@ 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 +47,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' },
@@ -161,6 +164,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));
   };
@@ -608,14 +619,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         grow={space === 'expand'}
         onClick={e => e.stopPropagation()}
       >
-        <StatusActionButton
+        <GroupPopover
-          title={replyTitle}
+          group={status.group as any}
-          icon={require('@tabler/icons/message-circle-2.svg')}
+          isEnabled={replyDisabled}
-          onClick={handleReplyClick}
+        >
-          count={replyCount}
+          <StatusActionButton
-          text={withLabels ? intl.formatMessage(messages.reply) : undefined}
+            title={replyTitle}
-          disabled={replyDisabled}
+            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 +661,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 +671,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)}

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -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,

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')}

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>
   );

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,

app/soapbox/components/ui/popover/popover.tsx

@@ -1,18 +1,28 @@
 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';
 
 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 +32,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 +43,9 @@ const Popover: React.FC<IPopover> = (props) => {
     onOpenChange: setIsOpen,
     placement: 'top',
     middleware: [
+      autoPlacement({
+        allowedPlacements: ['top', 'bottom'],
+      }),
       offset(10),
       arrow({
         element: arrowRef,
@@ -40,8 +53,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 +64,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,7 +79,7 @@ const Popover: React.FC<IPopover> = (props) => {
       {React.cloneElement(children, {
         ref: refs.setReference,
         ...getReferenceProps(),
-        className: 'cursor-help',
+        className: clsx(children.props.className, referenceElementClassName),
       })}
 
       {(isMounted) && (
@@ -75,12 +91,22 @@ const Popover: React.FC<IPopover> = (props) => {
             left: x ?? 0,
             ...styles,
           }}
-          className='rounded-lg bg-white p-6 shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
+          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' />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
+            tipRadius={3}
+          />
         </div>
       )}
     </>

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
+    <Stack space={1.5}>
-      {...props}
+      <textarea
-      ref={ref}
+        {...props}
-      rows={rows}
+        value={value}
-      onChange={handleChange}
+        ref={ref}
-      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', {
+        rows={rows}
-        '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':
+        onChange={handleChange}
-          theme === 'default',
+        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-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
+          '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':
-        'font-mono': isCodeEditor,
+            theme === 'default',
-        'text-red-600 border-red-600': hasError,
+          'bg-transparent border-0 focus:border-0 focus:ring-0': theme === 'transparent',
-        'resize-none': !isResizeable,
+          '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>
   );
 },
 );

app/soapbox/features/admin/components/unapproved-account.tsx

@@ -1,18 +1,10 @@
 import React, { useCallback } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 
-import { approveUsers } from 'soapbox/actions/admin';
+import { approveUsers, deleteUsers } from 'soapbox/actions/admin';
-import { rejectUserModal } from 'soapbox/actions/moderation';
 import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
 import { Stack, HStack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
-
-const messages = defineMessages({
-  approved: { id: 'admin.awaiting_approval.approved_message', defaultMessage: '{acct} was approved!' },
-  rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },
-});
 
 interface IUnapprovedAccount {
   accountId: string
@@ -20,7 +12,6 @@ interface IUnapprovedAccount {
 
 /** Displays an unapproved account for moderation purposes. */
 const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
-  const intl = useIntl();
   const dispatch = useAppDispatch();
   const getAccount = useCallback(makeGetAccount(), []);
 
@@ -29,23 +20,8 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
 
   if (!account) return null;
 
-  const handleApprove = () => {
+  const handleApprove = () => dispatch(approveUsers([account.id]));
-    return dispatch(approveUsers([account.id]))
+  const handleReject = () => dispatch(deleteUsers([account.id]));
-      .then(() => {
-        const message = intl.formatMessage(messages.approved, { acct: `@${account.acct}` });
-        toast.success(message);
-      });
-  };
-
-  const handleReject = () => {
-    return new Promise<void>((resolve) => {
-      dispatch(rejectUserModal(intl, account.id, () => {
-        const message = intl.formatMessage(messages.rejected, { acct: `@${account.acct}` });
-        toast.info(message);
-        resolve();
-      }));
-    });
-  };
 
   return (
     <HStack space={4} justifyContent='between'>
@@ -62,6 +38,7 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
         <AuthorizeRejectButtons
           onAuthorize={handleApprove}
           onReject={handleReject}
+          countdown={3000}
         />
       </Stack>
     </HStack>

app/soapbox/features/auth-login/components/registration-form.tsx

@@ -28,6 +28,7 @@ const messages = defineMessages({
   newsletter: { id: 'registration.newsletter', defaultMessage: 'Subscribe to newsletter.' },
   needsConfirmationHeader: { id: 'confirmations.register.needs_confirmation.header', defaultMessage: 'Confirmation needed' },
   needsApprovalHeader: { id: 'confirmations.register.needs_approval.header', defaultMessage: 'Approval needed' },
+  reasonHint: { id: 'registration.reason_hint', defaultMessage: 'This will help us review your application' },
 });
 
 interface IRegistrationForm {
@@ -296,13 +297,14 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           {needsApproval && (
             <FormGroup
               labelText={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}
-              hintText={<FormattedMessage id='registration.reason_hint' defaultMessage='This will help us review your application' />}
             >
               <Textarea
                 name='reason'
+                placeholder={intl.formatMessage(messages.reasonHint)}
                 maxLength={500}
                 onChange={onInputChange}
                 value={params.get('reason', '')}
+                autoGrow
                 required
               />
             </FormGroup>

app/soapbox/features/follow-requests/components/account-authorize.tsx

@@ -29,6 +29,7 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
           <AuthorizeRejectButtons
             onAuthorize={onAuthorize}
             onReject={onReject}
+            countdown={3000}
           />
         }
       />

app/soapbox/features/group/components/group-action-button.tsx

@@ -40,6 +40,8 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
 
   const onJoinGroup = () => joinGroup.mutate({}, {
     onSuccess() {
+      joinGroup.invalidate();
+
       toast.success(
         group.locked
           ? intl.formatMessage(messages.joinRequestSuccess)
@@ -53,8 +55,9 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
       heading: intl.formatMessage(messages.confirmationHeading),
       message: intl.formatMessage(messages.confirmationMessage),
       confirm: intl.formatMessage(messages.confirmationConfirm),
-      onConfirm: () => leaveGroup.mutate({}, {
+      onConfirm: () => leaveGroup.mutate(group.relationship?.id as string, {
         onSuccess() {
+          leaveGroup.invalidate();
           toast.success(intl.formatMessage(messages.leaveSuccess));
         },
       }),

app/soapbox/features/group/components/group-privacy.tsx

@@ -10,6 +10,7 @@ interface IGroupPolicy {
 
 const GroupPrivacy = ({ group }: IGroupPolicy) => (
   <Popover
+    referenceElementClassName='cursor-help'
     content={
       <Stack space={4} alignItems='center' className='w-72'>
         <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>

app/soapbox/features/group/components/group-relationship.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
+import { GroupRoles } from 'soapbox/schemas/group-member';
 import { Group } from 'soapbox/types/entities';
 
 interface IGroupRelationship {
@@ -9,10 +10,10 @@ interface IGroupRelationship {
 }
 
 const GroupRelationship = ({ group }: IGroupRelationship) => {
-  const isAdmin = group.relationship?.role === 'admin';
+  const isOwner = group.relationship?.role === GroupRoles.OWNER;
-  const isModerator = group.relationship?.role === 'moderator';
+  const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
 
-  if (!isAdmin || !isModerator) {
+  if (!isOwner || !isAdmin) {
     return null;
   }
 
@@ -21,14 +22,14 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
       <Icon
         className='h-4 w-4'
         src={
-          isAdmin
+          isOwner
             ? require('@tabler/icons/users.svg')
             : require('@tabler/icons/gavel.svg')
         }
       />
 
       <Text tag='span' weight='medium' size='sm' theme='inherit'>
-        {isAdmin
+        {isOwner
           ? <FormattedMessage id='group.role.admin' defaultMessage='Admin' />
           : <FormattedMessage id='group.role.moderator' defaultMessage='Moderator' />}
       </Text>

app/soapbox/features/group/edit-group.tsx

@@ -0,0 +1,184 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import Icon from 'soapbox/components/icon';
+import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Spinner, Text, Textarea } from 'soapbox/components/ui';
+import { useAppSelector, useInstance } from 'soapbox/hooks';
+import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
+import { useImageField, useTextField } from 'soapbox/hooks/forms';
+import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+
+import type { List as ImmutableList } from 'immutable';
+
+const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
+const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
+
+interface IMediaInput {
+  src: string | undefined
+  accept: string
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  disabled: boolean
+}
+
+const messages = defineMessages({
+  heading: { id: 'navigation_bar.edit_group', defaultMessage: 'Edit Group' },
+  groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
+  groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
+});
+
+const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
+  return (
+    <label
+      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+    >
+      {src && <img className='h-full w-full object-cover' src={src} alt='' />}
+      <HStack
+        className={clsx('absolute top-0 h-full w-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
+        })}
+        space={1.5}
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Icon
+          src={require('@tabler/icons/photo-plus.svg')}
+          className='h-4.5 w-4.5'
+        />
+
+        <Text size='md' theme='primary' weight='semibold'>
+          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
+        </Text>
+
+        <input
+          ref={ref}
+          name='header'
+          type='file'
+          accept={accept}
+          onChange={onChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </HStack>
+    </label>
+  );
+});
+
+const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
+  return (
+    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+      {src && <Avatar src={src} size={80} />}
+      <HStack
+        alignItems='center'
+        justifyContent='center'
+
+        className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-500': src,
+        })}
+      >
+        <Icon
+          src={require('@tabler/icons/camera-plus.svg')}
+          className='h-5 w-5 text-white'
+        />
+      </HStack>
+      <span className='sr-only'>Upload avatar</span>
+      <input
+        ref={ref}
+        name='avatar'
+        type='file'
+        accept={accept}
+        onChange={onChange}
+        disabled={disabled}
+        className='hidden'
+      />
+    </label>
+  );
+});
+
+interface IEditGroup {
+  params: {
+    id: string
+  }
+}
+
+const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
+  const intl = useIntl();
+  const instance = useInstance();
+
+  const { group, isLoading } = useGroup(groupId);
+  const { updateGroup } = useUpdateGroup(groupId);
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const avatar = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) });
+  const header = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) });
+
+  const displayName = useTextField(group?.display_name);
+  const note = useTextField(group?.note);
+
+  const maxName = Number(instance.configuration.getIn(['groups', 'max_characters_name']));
+  const maxNote = Number(instance.configuration.getIn(['groups', 'max_characters_description']));
+
+  const attachmentTypes = useAppSelector(
+    state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>,
+  )?.filter(type => type.startsWith('image/')).toArray().join(',');
+
+  async function handleSubmit() {
+    setIsSubmitting(true);
+
+    await updateGroup({
+      display_name: displayName.value,
+      note: note.value,
+      avatar: avatar.file,
+      header: header.file,
+    });
+
+    setIsSubmitting(false);
+  }
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Form onSubmit={handleSubmit}>
+        <div className='relative mb-12 flex'>
+          <HeaderPicker accept={attachmentTypes} disabled={isSubmitting} {...header} />
+          <AvatarPicker accept={attachmentTypes} disabled={isSubmitting} {...avatar} />
+        </div>
+        <FormGroup
+          labelText={<FormattedMessage id='manage_group.fields.name_label_optional' defaultMessage='Group name' />}
+          hintText={<FormattedMessage id='manage_group.fields.cannot_change_hint' defaultMessage='This cannot be changed after the group is created.' />}
+        >
+          <Input
+            type='text'
+            placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
+            maxLength={maxName}
+            {...displayName}
+            append={<Icon className='h-5 w-5 text-gray-600' src={require('@tabler/icons/lock.svg')} />}
+            disabled
+          />
+        </FormGroup>
+        <FormGroup
+          labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
+        >
+          <Textarea
+            autoComplete='off'
+            placeholder={intl.formatMessage(messages.groupDescriptionPlaceholder)}
+            maxLength={maxNote}
+            {...note}
+          />
+        </FormGroup>
+
+        <FormActions>
+          <Button theme='primary' type='submit' disabled={isSubmitting} block>
+            <FormattedMessage id='edit_profile.save' defaultMessage='Save' />
+          </Button>
+        </FormActions>
+      </Form>
+    </Column>
+  );
+};
+
+export default EditGroup;

app/soapbox/features/group/group-blocked-members.tsx

@@ -5,7 +5,8 @@ import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups';
 import Account from 'soapbox/components/account';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Button, Column, HStack, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useGroup } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useGroup } from 'soapbox/hooks/api';
 import { makeGetAccount } from 'soapbox/selectors';
 import toast from 'soapbox/toast';
 

app/soapbox/features/group/group-members.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 
 import { PendingItemsRow } from 'soapbox/components/pending-items-row';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { useGroup } from 'soapbox/hooks';
+import { useGroup } from 'soapbox/hooks/api';
 import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
 import { useGroupMembers } from 'soapbox/hooks/api/useGroupMembers';
 import { GroupRoles } from 'soapbox/schemas/group-member';

app/soapbox/features/group/group-membership-requests.tsx

@@ -5,7 +5,7 @@ import Account from 'soapbox/components/account';
 import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Column, HStack, Spinner } from 'soapbox/components/ui';
-import { useGroup } from 'soapbox/hooks';
+import { useGroup } from 'soapbox/hooks/api';
 import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
 import toast from 'soapbox/toast';
 
@@ -42,6 +42,7 @@ const MembershipRequest: React.FC<IMembershipRequest> = ({ account, onAuthorize,
       <AuthorizeRejectButtons
         onAuthorize={handleAuthorize}
         onReject={handleReject}
+        countdown={3000}
       />
     </HStack>
   );

app/soapbox/features/group/group-timeline.tsx

@@ -7,7 +7,8 @@ import { connectGroupStream } from 'soapbox/actions/streaming';
 import { expandGroupTimeline } from 'soapbox/actions/timelines';
 import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import ComposeForm from 'soapbox/features/compose/components/compose-form';
-import { useAppDispatch, useGroup, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { useGroup } from 'soapbox/hooks/api';
 
 import Timeline from '../ui/components/timeline';
 

app/soapbox/features/group/manage-group.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { editGroup } from 'soapbox/actions/groups';
 import { openModal } from 'soapbox/actions/modals';
 import List, { ListItem } from 'soapbox/components/list';
 import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useGroup, useGroupsPath } from 'soapbox/hooks';
+import { useAppDispatch, useGroupsPath } from 'soapbox/hooks';
-import { useDeleteGroup } from 'soapbox/hooks/api';
+import { useDeleteGroup, useGroup } from 'soapbox/hooks/api';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 import toast from 'soapbox/toast';
 
@@ -58,9 +57,6 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
     return (<ColumnForbidden />);
   }
 
-  const onEditGroup = () =>
-    dispatch(editGroup(group));
-
   const onDeleteGroup = () =>
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/trash.svg'),
@@ -77,6 +73,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
       },
     }));
 
+  const navigateToEdit = () => history.push(`/groups/${id}/manage/edit`);
   const navigateToPending = () => history.push(`/groups/${id}/manage/requests`);
   const navigateToBlocks = () => history.push(`/groups/${id}/manage/blocks`);
 
@@ -90,7 +87,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
             </CardHeader>
 
             <List>
-              <ListItem label={intl.formatMessage(messages.editGroup)} onClick={onEditGroup}>
+              <ListItem label={intl.formatMessage(messages.editGroup)} onClick={navigateToEdit}>
                 <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
               </ListItem>
             </List>

app/soapbox/features/groups/components/discover/group-grid-item.tsx

@@ -1,26 +1,22 @@
 import React, { forwardRef } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
-import { useJoinGroup } from 'soapbox/hooks/api';
+
-import { Group as GroupEntity } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/schemas';
 
 interface IGroup {
-  group: GroupEntity
+  group: Group
   width?: number
 }
 
 const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDivElement>) => {
   const { group, width = 'auto' } = props;
 
-  const joinGroup = useJoinGroup(group);
-
-  const onJoinGroup = () => joinGroup.mutate(group);
-
   return (
     <div
       key={group.id}
@@ -71,16 +67,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
         </Stack>
       </Link>
 
-      <Button
+      <GroupActionButton group={group} />
-        theme='primary'
-        block
-        onClick={onJoinGroup}
-        disabled={joinGroup.isLoading}
-      >
-        {group.locked
-          ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
-          : <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}
-      </Button>
     </div>
   );
 });

app/soapbox/features/groups/components/discover/group-list-item.tsx

@@ -3,8 +3,8 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useJoinGroup } from 'soapbox/hooks/api';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button';
 import { Group as GroupEntity } from 'soapbox/types/entities';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
@@ -16,10 +16,6 @@ interface IGroup {
 const GroupListItem = (props: IGroup) => {
   const { group, withJoinAction = true } = props;
 
-  const joinGroup = useJoinGroup(group);
-
-  const onJoinGroup = () => joinGroup.mutate(group);
-
   return (
     <HStack
       alignItems='center'
@@ -74,11 +70,7 @@ const GroupListItem = (props: IGroup) => {
       </Link>
 
       {withJoinAction && (
-        <Button theme='primary' onClick={onJoinGroup} disabled={joinGroup.isLoading}>
+        <GroupActionButton group={group} />
-          {group.locked
-            ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
-            : <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}
-        </Button>
       )}
     </HStack>
   );

app/soapbox/features/groups/components/discover/popular-groups.tsx

@@ -46,11 +46,12 @@ const PopularGroups = () => {
           itemWidth={250}
           itemCount={groups.length}
           controlsHeight={groupCover?.clientHeight}
+          isDisabled={isFetching}
         >
           {({ width }: { width: number }) => (
             <>
               {isFetching ? (
-                new Array(20).fill(0).map((_, idx) => (
+                new Array(4).fill(0).map((_, idx) => (
                   <div
                     className='relative flex shrink-0 flex-col space-y-2 px-0.5'
                     style={{ width: width || 'auto' }}

app/soapbox/features/groups/components/discover/search/results.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useGroupSearch } from 'soapbox/queries/groups/search';
+import { useGroupSearch } from 'soapbox/hooks/api';
 import { Group } from 'soapbox/types/entities';
 
 import GroupGridItem from '../group-grid-item';

app/soapbox/features/groups/components/discover/search/search.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { Stack } from 'soapbox/components/ui';
 import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
 import { useDebounce, useOwnAccount } from 'soapbox/hooks';
-import { useGroupSearch } from 'soapbox/queries/groups/search';
+import { useGroupSearch } from 'soapbox/hooks/api';
 import { saveGroupSearch } from 'soapbox/utils/groups';
 
 import Blankslate from './blankslate';

app/soapbox/features/groups/components/discover/suggested-groups.tsx

@@ -46,6 +46,7 @@ const SuggestedGroups = () => {
           itemWidth={250}
           itemCount={groups.length}
           controlsHeight={groupCover?.clientHeight}
+          isDisabled={isFetching}
         >
           {({ width }: { width: number }) => (
             <>

app/soapbox/features/groups/index.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import GroupCard from 'soapbox/components/group-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import { Button, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useGroups, useFeatures } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useDebounce, useFeatures } from 'soapbox/hooks';
+import { useGroups } from 'soapbox/hooks/api';
 import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
@@ -14,15 +15,22 @@ import PlaceholderGroupCard from '../placeholder/components/placeholder-group-ca
 import PendingGroupsRow from './components/pending-groups-row';
 import TabBar, { TabItems } from './components/tab-bar';
 
-import type { Group as GroupEntity } from 'soapbox/types/entities';
+const messages = defineMessages({
+  placeholder: { id: 'groups.search.placeholder', defaultMessage: 'Search My Groups' },
+});
 
 const Groups: React.FC = () => {
+  const debounce = useDebounce;
   const dispatch = useAppDispatch();
   const features = useFeatures();
+  const intl = useIntl();
 
   const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
 
-  const { groups, isLoading } = useGroups();
+  const [searchValue, setSearchValue] = useState<string>('');
+  const debouncedValue = debounce(searchValue, 300);
+
+  const { groups, isLoading } = useGroups(debouncedValue);
 
   const createGroup = () => {
     dispatch(openModal('MANAGE_GROUP'));
@@ -76,6 +84,15 @@ const Groups: React.FC = () => {
         </Button>
       )}
 
+      {features.groupsSearch ? (
+        <Input
+          onChange={(event) => setSearchValue(event.target.value)}
+          placeholder={intl.formatMessage(messages.placeholder)}
+          theme='search'
+          value={searchValue}
+        />
+      ) : null}
+
       <PendingGroupsRow />
 
       <ScrollableList
@@ -90,7 +107,7 @@ const Groups: React.FC = () => {
       >
         {groups.map((group) => (
           <Link key={group.id} to={`/groups/${group.id}`}>
-            <GroupCard group={group as GroupEntity} />
+            <GroupCard group={group} />
           </Link>
         ))}
       </ScrollableList>

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -46,6 +46,13 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     }));
   };
 
+  const onOpenDislikesModal = (username: string, statusId: string): void => {
+    dispatch(openModal('DISLIKES', {
+      username,
+      statusId,
+    }));
+  };
+
   const onOpenReactionsModal = (username: string, statusId: string): void => {
     dispatch(openModal('REACTIONS', {
       username,
@@ -114,6 +121,13 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     else onOpenFavouritesModal(account.acct, status.id);
   };
 
+  const handleOpenDislikesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
+    e.preventDefault();
+
+    if (!me) onOpenUnauthorizedModal();
+    else onOpenDislikesModal(account.acct, status.id);
+  };
+
   const getFavourites = () => {
     if (status.favourites_count) {
       return (
@@ -130,6 +144,24 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     return null;
   };
 
+  const getDislikes = () => {
+    const dislikesCount = status.dislikes_count;
+
+    if (dislikesCount) {
+      return (
+        <InteractionCounter count={status.favourites_count} onClick={features.exposableReactions ? handleOpenDislikesModal : undefined}>
+          <FormattedMessage
+            id='status.interactions.dislikes'
+            defaultMessage='{count, plural, one {Dislike} other {Dislikes}}'
+            values={{ count: dislikesCount }}
+          />
+        </InteractionCounter>
+      );
+    }
+
+    return null;
+  };
+
   const handleOpenReactionsModal = () => {
     if (!me) {
       return onOpenUnauthorizedModal();
@@ -171,6 +203,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
       {getReposts()}
       {getQuotes()}
       {features.emojiReacts ? getEmojiReacts() : getFavourites()}
+      {getDislikes()}
     </HStack>
   );
 };

app/soapbox/features/ui/components/modal-root.tsx

@@ -13,6 +13,7 @@ import {
   ComposeModal,
   ConfirmationModal,
   CryptoDonateModal,
+  DislikesModal,
   EditAnnouncementModal,
   EditFederationModal,
   EmbedModal,
@@ -59,6 +60,7 @@ const MODAL_COMPONENTS = {
   'COMPOSE_EVENT': ComposeEventModal,
   'CONFIRM': ConfirmationModal,
   'CRYPTO_DONATE': CryptoDonateModal,
+  'DISLIKES': DislikesModal,
   'EDIT_ANNOUNCEMENT': EditAnnouncementModal,
   'EDIT_FEDERATION': EditFederationModal,
   'EMBED': EmbedModal,

app/soapbox/features/ui/components/modals/dislikes-modal.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { fetchDislikes } from 'soapbox/actions/interactions';
+import ScrollableList from 'soapbox/components/scrollable-list';
+import { Modal, Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account-container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+interface IDislikesModal {
+  onClose: (type: string) => void
+  statusId: string
+}
+
+const DislikesModal: React.FC<IDislikesModal> = ({ onClose, statusId }) => {
+  const dispatch = useAppDispatch();
+
+  const accountIds = useAppSelector((state) => state.user_lists.disliked_by.get(statusId)?.items);
+
+  const fetchData = () => {
+    dispatch(fetchDislikes(statusId));
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onClickClose = () => {
+    onClose('DISLIKES');
+  };
+
+  let body;
+
+  if (!accountIds) {
+    body = <Spinner />;
+  } else {
+    const emptyMessage = <FormattedMessage id='empty_column.dislikes' defaultMessage='No one has disliked this post yet. When someone does, they will show up here.' />;
+
+    body = (
+      <ScrollableList
+        scrollKey='dislikes'
+        emptyMessage={emptyMessage}
+        className='max-w-full'
+        itemClassName='pb-3'
+      >
+        {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    );
+  }
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.dislikes' defaultMessage='Dislikes' />}
+      onClose={onClickClose}
+    >
+      {body}
+    </Modal>
+  );
+};
+
+export default DislikesModal;

app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx

@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { submitGroupEditor } from 'soapbox/actions/groups';
 import { Modal, Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useDebounce } from 'soapbox/hooks';
+import { useGroupValidation } from 'soapbox/hooks/api';
 
 import ConfirmationStep from './steps/confirmation-step';
 import DetailsStep from './steps/details-step';
@@ -34,6 +35,7 @@ interface IManageGroupModal {
 
 const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
   const intl = useIntl();
+  const debounce = useDebounce;
   const dispatch = useAppDispatch();
 
   const id = useAppSelector((state) => state.group_editor.groupId);
@@ -43,6 +45,11 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
 
   const [currentStep, setCurrentStep] = useState<Steps>(id ? Steps.TWO : Steps.ONE);
 
+  const name = useAppSelector((state) => state.group_editor.displayName);
+  const debouncedName = debounce(name, 300);
+
+  const { data: { isValid } } = useGroupValidation(debouncedName);
+
   const handleClose = () => {
     onClose('MANAGE_GROUP');
   };
@@ -92,7 +99,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
         : <FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />}
       confirmationAction={handleNextStep}
       confirmationText={confirmationText}
-      confirmationDisabled={isSubmitting}
+      confirmationDisabled={isSubmitting || (currentStep === Steps.TWO && !isValid)}
       confirmationFullWidth
       onClose={handleClose}
     >

app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx

@@ -7,9 +7,9 @@ import {
   changeGroupEditorDescription,
   changeGroupEditorMedia,
 } from 'soapbox/actions/groups';
-import Icon from 'soapbox/components/icon';
+import { Avatar, Form, FormGroup, HStack, Icon, Input, Text, Textarea } from 'soapbox/components/ui';
-import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { useGroupValidation } from 'soapbox/hooks/api';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
 import resizeImage from 'soapbox/utils/resize-image';
 
@@ -30,7 +30,7 @@ const messages = defineMessages({
 const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
     <label
-      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-xl bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-44'
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack
@@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+    <label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-4 ring-white dark:ring-primary-900'>
       {src && <Avatar src={src} size={80} />}
       <HStack
         alignItems='center'
@@ -95,6 +95,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const DetailsStep = () => {
   const intl = useIntl();
+  const debounce = useDebounce;
   const dispatch = useAppDispatch();
   const instance = useInstance();
 
@@ -103,6 +104,10 @@ const DetailsStep = () => {
   const name = useAppSelector((state) => state.group_editor.displayName);
   const description = useAppSelector((state) => state.group_editor.note);
 
+  const debouncedName = debounce(name, 300);
+
+  const { data: { isValid, message: errorMessage } } = useGroupValidation(debouncedName);
+
   const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
   const [headerSrc, setHeaderSrc] = useState<string | null>(null);
 
@@ -153,8 +158,11 @@ const DetailsStep = () => {
         <HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
         <AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
       </div>
+
       <FormGroup
         labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
+        hintText={<FormattedMessage id='manage_group.fields.name_help' defaultMessage='This cannot be changed after the group is created.' />}
+        errors={isValid ? [] : [errorMessage as string]}
       >
         <Input
           type='text'
@@ -164,6 +172,7 @@ const DetailsStep = () => {
           maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
         />
       </FormGroup>
+
       <FormGroup
         labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
       >

app/soapbox/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx

@@ -17,11 +17,11 @@ const PrivacyStep = () => {
 
   return (
     <>
-      <Stack className='mx-auto max-w-sm' space={2}>
+      <Stack className='mx-auto max-w-xs py-10' space={2}>
         <Text size='3xl' weight='bold' align='center'>
           <FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
         </Text>
-        <Text size='lg' theme='muted' align='center'>
+        <Text theme='muted' align='center'>
           <FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
         </Text>
       </Stack>

app/soapbox/features/ui/components/modals/unauthorized-modal.tsx

@@ -15,7 +15,7 @@ const messages = defineMessages({
 
 interface IUnauthorizedModal {
   /** Unauthorized action type. */
-  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'POLL_VOTE' | 'JOIN'
+  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'DISLIKE' | 'POLL_VOTE' | 'JOIN'
   /** Close event handler. */
   onClose: (modalType: string) => void
   /** ActivityPub ID of the account OR status being acted upon. */
@@ -86,6 +86,9 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
     } else if (action === 'FAVOURITE') {
       header = <FormattedMessage id='remote_interaction.favourite_title' defaultMessage='Like a post remotely' />;
       button = <FormattedMessage id='remote_interaction.favourite' defaultMessage='Proceed to like' />;
+    } else if (action === 'DISLIKE') {
+      header = <FormattedMessage id='remote_interaction.dislike_title' defaultMessage='Dislike a post remotely' />;
+      button = <FormattedMessage id='remote_interaction.dislike' defaultMessage='Proceed to dislike' />;
     } else if (action === 'POLL_VOTE') {
       header = <FormattedMessage id='remote_interaction.poll_vote_title' defaultMessage='Vote in a poll remotely' />;
       button = <FormattedMessage id='remote_interaction.poll_vote' defaultMessage='Proceed to vote' />;

app/soapbox/features/ui/components/panels/my-groups-panel.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Widget } from 'soapbox/components/ui';
 import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
 import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
-import { useGroups } from 'soapbox/hooks';
+import { useGroups } from 'soapbox/hooks/api';
 
 const MyGroupsPanel = () => {
   const { groups, isFetching, isFetched, isError } = useGroups();

app/soapbox/features/ui/index.tsx

@@ -127,6 +127,7 @@ import {
   GroupBlockedMembers,
   GroupMembershipRequests,
   Announcements,
+  EditGroup,
 } from './util/async-components';
 import { WrappedRoute } from './util/react-router-helpers';
 
@@ -297,6 +298,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.groups && <WrappedRoute path='/groups/:id' exact page={GroupPage} component={GroupTimeline} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/members' exact page={GroupPage} component={GroupMembers} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage' exact page={DefaultPage} component={ManageGroup} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:id/manage/edit' exact page={DefaultPage} component={EditGroup} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/blocks' exact page={DefaultPage} component={GroupBlockedMembers} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:id/manage/requests' exact page={DefaultPage} component={GroupMembershipRequests} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:groupId/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}

app/soapbox/features/ui/util/async-components.ts

@@ -190,6 +190,10 @@ export function FavouritesModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/modals/favourites-modal');
 }
 
+export function DislikesModal() {
+  return import(/* webpackChunkName: "features/ui" */'../components/modals/dislikes-modal');
+}
+
 export function ReactionsModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/modals/reactions-modal');
 }
@@ -574,6 +578,10 @@ export function ManageGroup() {
   return import(/* webpackChunkName: "features/groups" */'../../group/manage-group');
 }
 
+export function EditGroup() {
+  return import(/* webpackChunkName: "features/groups" */'../../group/edit-group');
+}
+
 export function GroupBlockedMembers() {
   return import(/* webpackChunkName: "features/groups" */'../../group/group-blocked-members');
 }

app/soapbox/hooks/api/groups/useGroupSearch.ts

@@ -0,0 +1,39 @@
+import { Entities } from 'soapbox/entity-store/entities';
+import { useEntities } from 'soapbox/entity-store/hooks';
+import { groupSchema } from 'soapbox/schemas';
+
+import { useApi } from '../../useApi';
+import { useFeatures } from '../../useFeatures';
+
+import { useGroupRelationships } from './useGroups';
+
+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 };

app/soapbox/hooks/api/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 };

app/soapbox/hooks/api/groups/useGroups.ts

@@ -6,15 +6,15 @@ import { useApi } from 'soapbox/hooks';
 import { groupSchema, Group } from 'soapbox/schemas/group';
 import { groupRelationshipSchema, GroupRelationship } from 'soapbox/schemas/group-relationship';
 
-import { useFeatures } from './useFeatures';
+import { useFeatures } from '../../useFeatures';
 
-function useGroups() {
+function useGroups(q: string = '') {
   const api = useApi();
   const features = useFeatures();
 
   const { entities, ...result } = useEntities<Group>(
-    [Entities.GROUPS],
+    [Entities.GROUPS, 'search', q],
-    () => api.get('/api/v1/groups'),
+    () => api.get('/api/v1/groups', { params: { q } }),
     { enabled: features.groups, schema: groupSchema },
   );
   const { relationships } = useGroupRelationships(entities.map(entity => entity.id));

app/soapbox/hooks/api/groups/useJoinGroup.ts

@@ -2,9 +2,13 @@ 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 { invalidate } = useGroups();
+
   const { createEntity, isLoading } = useEntityActions<GroupRelationship>(
     [Entities.GROUP_RELATIONSHIPS, group.id],
     { post: `/api/v1/groups/${group.id}/join` },
@@ -14,6 +18,7 @@ function useJoinGroup(group: Group) {
   return {
     mutate: createEntity,
     isLoading,
+    invalidate,
   };
 }
 

app/soapbox/hooks/api/groups/useLeaveGroup.ts

@@ -1,8 +1,14 @@
 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 { invalidate } = useGroups();
+
   const { createEntity, isLoading } = useEntityActions<GroupRelationship>(
     [Entities.GROUP_RELATIONSHIPS, group.id],
     { post: `/api/v1/groups/${group.id}/leave` },
@@ -12,6 +18,7 @@ function useLeaveGroup(group: Group) {
   return {
     mutate: createEntity,
     isLoading,
+    invalidate,
   };
 }
 

app/soapbox/hooks/api/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 };

app/soapbox/hooks/api/index.ts

@@ -5,6 +5,10 @@ export { useBlockGroupMember } from './groups/useBlockGroupMember';
 export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest';
 export { useDeleteGroup } from './groups/useDeleteGroup';
 export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
+export { useGroup, useGroups } from './groups/useGroups';
+export { useGroupSearch } from './groups/useGroupSearch';
+export { useGroupValidation } from './groups/useGroupValidation';
 export { useJoinGroup } from './groups/useJoinGroup';
 export { useLeaveGroup } from './groups/useLeaveGroup';
 export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
+export { useUpdateGroup } from './groups/useUpdateGroup';

app/soapbox/hooks/api/usePopularGroups.ts

@@ -2,9 +2,9 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { Group, groupSchema } from 'soapbox/schemas';
 
+import { useGroupRelationships } from '../api/groups/useGroups';
 import { useApi } from '../useApi';
 import { useFeatures } from '../useFeatures';
-import { useGroupRelationships } from '../useGroups';
 
 function usePopularGroups() {
   const api = useApi();
@@ -12,7 +12,7 @@ function usePopularGroups() {
 
   const { entities, ...result } = useEntities<Group>(
     [Entities.GROUPS, 'popular'],
-    () => api.get('/api/mock/groups'), // '/api/v1/truth/trends/groups'
+    () => api.get('/api/v1/truth/trends/groups'),
     {
       schema: groupSchema,
       enabled: features.groupsDiscovery,

app/soapbox/hooks/api/useSuggestedGroups.ts

@@ -2,9 +2,9 @@ import { Entities } from 'soapbox/entity-store/entities';
 import { useEntities } from 'soapbox/entity-store/hooks';
 import { Group, groupSchema } from 'soapbox/schemas';
 
+import { useGroupRelationships } from '../api/groups/useGroups';
 import { useApi } from '../useApi';
 import { useFeatures } from '../useFeatures';
-import { useGroupRelationships } from '../useGroups';
 
 function useSuggestedGroups() {
   const api = useApi();
@@ -12,7 +12,7 @@ function useSuggestedGroups() {
 
   const { entities, ...result } = useEntities<Group>(
     [Entities.GROUPS, 'suggested'],
-    () => api.get('/api/mock/groups'), // '/api/v1/truth/suggestions/groups'
+    () => api.get('/api/v1/truth/suggestions/groups'),
     {
       schema: groupSchema,
       enabled: features.groupsDiscovery,

app/soapbox/hooks/forms/index.ts

@@ -0,0 +1,3 @@
+export { useImageField } from './useImageField';
+export { useTextField } from './useTextField';
+export { usePreview } from './usePreview';

app/soapbox/hooks/forms/useImageField.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import resizeImage from 'soapbox/utils/resize-image';
+
+import { usePreview } from './usePreview';
+
+interface UseImageFieldOpts {
+  /** Resize the image to the max dimensions, if defined. */
+  maxPixels?: number
+  /** Fallback URL before a file is uploaded. */
+  preview?: string
+}
+
+/** Returns props for `<input type="file">`, and optionally resizes the file. */
+function useImageField(opts: UseImageFieldOpts = {}) {
+  const [file, setFile] = useState<File>();
+  const src = usePreview(file) || opts.preview;
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = async ({ target: { files } }) => {
+    const file = files?.item(0);
+    if (!file) return;
+
+    if (typeof opts.maxPixels === 'number') {
+      setFile(await resizeImage(file, opts.maxPixels));
+    } else {
+      setFile(file);
+    }
+  };
+
+  return {
+    src,
+    file,
+    onChange,
+  };
+}
+
+export { useImageField };
+export type { UseImageFieldOpts };

app/soapbox/hooks/forms/usePreview.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+
+/** Return a preview URL for a file. */
+function usePreview(file: File | null | undefined): string | undefined {
+  return useMemo(() => {
+    if (file) {
+      return URL.createObjectURL(file);
+    }
+  }, [file]);
+}
+
+export { usePreview };

app/soapbox/hooks/forms/useTextField.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns props for `<input type="text">`.
+ * If `initialValue` changes from undefined to a string, it will set the value.
+ */
+function useTextField(initialValue: string | undefined) {
+  const [value, setValue] = useState(initialValue);
+  const hasInitialValue = typeof initialValue === 'string';
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
+    setValue(e.target.value);
+  };
+
+  useEffect(() => {
+    if (hasInitialValue) {
+      setValue(initialValue);
+    }
+  }, [hasInitialValue]);
+
+  return {
+    value: value || '',
+    onChange,
+  };
+}
+
+export { useTextField };

app/soapbox/hooks/index.ts

@@ -6,7 +6,6 @@ export { useClickOutside } from './useClickOutside';
 export { useCompose } from './useCompose';
 export { useDebounce } from './useDebounce';
 export { useGetState } from './useGetState';
-export { useGroup, useGroups } from './useGroups';
 export { useGroupsPath } from './useGroupsPath';
 export { useDimensions } from './useDimensions';
 export { useFeatures } from './useFeatures';

app/soapbox/hooks/useDimensions.ts

@@ -23,7 +23,7 @@ const useDimensions = (): UseDimensionsResult => {
     [],
   );
 
-  useEffect((): any => {
+  useEffect(() => {
     if (!element) return;
     observer.observe(element);
 

app/soapbox/hooks/useGroupsPath.ts

@@ -1,5 +1,4 @@
-import { useGroups } from 'soapbox/hooks';
+import { useGroups } from './api';
-
 import { useFeatures } from './useFeatures';
 
 /**

app/soapbox/locales/en.json

@@ -91,9 +91,7 @@
   "admin.announcements.edit": "Edit",
   "admin.announcements.ends_at": "Ends at:",
   "admin.announcements.starts_at": "Starts at:",
-  "admin.awaiting_approval.approved_message": "{acct} was approved!",
   "admin.awaiting_approval.empty_message": "There is nobody waiting for approval. When a new user signs up, you can review them here.",
-  "admin.awaiting_approval.rejected_message": "{acct} was rejected.",
   "admin.dashboard.registration_mode.approval_hint": "Users can sign up, but their account only gets activated when an admin approves it.",
   "admin.dashboard.registration_mode.approval_label": "Approval Required",
   "admin.dashboard.registration_mode.closed_hint": "Nobody can sign up. You can still invite people.",
@@ -318,6 +316,7 @@
   "column.developers.service_worker": "Service Worker",
   "column.direct": "Direct messages",
   "column.directory": "Browse profiles",
+  "column.dislikes": "Dislikes",
   "column.domain_blocks": "Hidden domains",
   "column.edit_profile": "Edit profile",
   "column.event_map": "Event location",
@@ -661,6 +660,7 @@
   "empty_column.bookmarks": "You don't have any bookmarks yet. When you add one, it will show up here.",
   "empty_column.community": "The local timeline is empty. Write something publicly to get the ball rolling!",
   "empty_column.direct": "You don't have any direct messages yet. When you send or receive one, it will show up here.",
+  "empty_column.dislikes": "No one has disliked this post yet. When someone does, they will show up here.",
   "empty_column.domain_blocks": "There are no hidden domains yet.",
   "empty_column.event_participant_requests": "There are no pending event participation requests.",
   "empty_column.event_participants": "No one joined this event yet. When someone does, they will show up here.",
@@ -785,6 +785,9 @@
   "group.leave": "Leave Group",
   "group.leave.success": "Left the group",
   "group.manage": "Manage Group",
+  "group.popover.action": "View Group",
+  "group.popover.summary": "You must be a member of the group in order to reply to this status.",
+  "group.popover.title": "Membership required",
   "group.privacy.locked": "Private",
   "group.privacy.locked.full": "Private Group",
   "group.privacy.locked.info": "Discoverable. Users can join after their request is approved.",
@@ -823,6 +826,7 @@
   "groups.pending.empty.title": "No pending requests",
   "groups.pending.label": "Pending Requests",
   "groups.popular.label": "Suggested Groups",
+  "groups.search.placeholder": "Search My Groups",
   "hashtag.column_header.tag_mode.all": "and {additional}",
   "hashtag.column_header.tag_mode.any": "or {additional}",
   "hashtag.column_header.tag_mode.none": "without {additional}",
@@ -937,9 +941,12 @@
   "manage_group.done": "Done",
   "manage_group.edit_group": "Edit group",
   "manage_group.edit_success": "The group was edited",
+  "manage_group.fields.cannot_change_hint": "This cannot be changed after the group is created.",
   "manage_group.fields.description_label": "Description",
   "manage_group.fields.description_placeholder": "Description",
+  "manage_group.fields.name_help": "This cannot be changed after the group is created.",
   "manage_group.fields.name_label": "Group name (required)",
+  "manage_group.fields.name_label_optional": "Group name",
   "manage_group.fields.name_placeholder": "Group Name",
   "manage_group.get_started": "Let’s get started!",
   "manage_group.next": "Next",
@@ -1213,6 +1220,8 @@
   "remote_instance.pin_host": "Pin {host}",
   "remote_instance.unpin_host": "Unpin {host}",
   "remote_interaction.account_placeholder": "Enter your username@domain you want to act from",
+  "remote_interaction.dislike": "Proceed to dislike",
+  "remote_interaction.dislike_title": "Dislike a post remotely",
   "remote_interaction.divider": "or",
   "remote_interaction.event_join": "Proceed to join",
   "remote_interaction.event_join_title": "Join an event remotely",
@@ -1396,6 +1405,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.disabled_replies.group_membership": "Only group members can reply",
+  "status.disfavourite": "Disike",
   "status.edit": "Edit",
   "status.embed": "Embed post",
   "status.external": "View post on {domain}",
@@ -1405,6 +1415,7 @@
   "status.group_mod_block": "Block @{name} from group",
   "status.group_mod_delete": "Delete post from group",
   "status.group_mod_kick": "Kick @{name} from group",
+  "status.interactions.dislikes": "{count, plural, one {Dislike} other {Dislikes}}",
   "status.interactions.favourites": "{count, plural, one {Like} other {Likes}}",
   "status.interactions.quotes": "{count, plural, one {Quote} other {Quotes}}",
   "status.interactions.reblogs": "{count, plural, one {Repost} other {Reposts}}",
@@ -1474,6 +1485,7 @@
   "tabs_bar.profile": "Profile",
   "tabs_bar.search": "Search",
   "tabs_bar.settings": "Settings",
+  "textarea.counter.label": "{count} characters remaining",
   "theme_editor.Reset": "Reset",
   "theme_editor.export": "Export theme",
   "theme_editor.import": "Import theme",

app/soapbox/normalizers/group-relationship.ts

@@ -8,13 +8,16 @@ import {
   fromJS,
 } from 'immutable';
 
+import { GroupRoles } from 'soapbox/schemas/group-member';
+
 export const GroupRelationshipRecord = ImmutableRecord({
   id: '',
   blocked_by: false,
   member: false,
   notifying: null,
   requested: false,
-  role: null as 'admin' | 'moderator' | 'user' | null,
+  role: 'user' as GroupRoles,
+  pending_requests: false,
 });
 
 export const normalizeGroupRelationship = (relationship: Record<string, any>) => {

app/soapbox/normalizers/status.ts

@@ -46,6 +46,8 @@ export const StatusRecord = ImmutableRecord({
   card: null as Card | null,
   content: '',
   created_at: '',
+  dislikes_count: 0,
+  disliked: false,
   edited_at: null as string | null,
   emojis: ImmutableList<Emoji>(),
   favourited: false,
@@ -217,6 +219,16 @@ const normalizeFilterResults = (status: ImmutableMap<string, any>) =>
     ),
   );
 
+const normalizeDislikes = (status: ImmutableMap<string, any>) => {
+  if (status.get('friendica')) {
+    return status
+      .set('dislikes_count', status.getIn(['friendica', 'dislikes_count']))
+      .set('disliked', status.getIn(['friendica', 'disliked']));
+  }
+
+  return status;
+};
+
 export const normalizeStatus = (status: Record<string, any>) => {
   return StatusRecord(
     ImmutableMap(fromJS(status)).withMutations(status => {
@@ -232,6 +244,7 @@ export const normalizeStatus = (status: Record<string, any>) => {
       normalizeEvent(status);
       fixContent(status);
       normalizeFilterResults(status);
+      normalizeDislikes(status);
     }),
   );
 };

app/soapbox/pages/group-page.tsx

@@ -12,7 +12,8 @@ import {
   SignUpPanel,
   SuggestedGroupsPanel,
 } from 'soapbox/features/ui/util/async-components';
-import { useGroup, useOwnAccount } from 'soapbox/hooks';
+import { useOwnAccount } from 'soapbox/hooks';
+import { useGroup } from 'soapbox/hooks/api';
 import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
 import { Group } from 'soapbox/schemas';
 

app/soapbox/queries/groups/members.ts

@@ -1,40 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { useApi } from 'soapbox/hooks';
-import { normalizeAccount } from 'soapbox/normalizers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-
-const GroupMemberKeys = {
-  members: (id: string, role: string) => ['group', id, role] as const,
-};
-
-const useGroupMembers = (groupId: string, role: GroupRoles) => {
-  const api = useApi();
-
-  const getQuery = async () => {
-    const { data } = await api.get(`/api/v1/groups/${groupId}/memberships`, {
-      params: {
-        role,
-      },
-    });
-
-    const result = data.map((member: any) => {
-      return {
-        ...member,
-        account: normalizeAccount(member.account),
-      };
-    });
-
-    return result;
-  };
-
-  return useQuery(
-    GroupMemberKeys.members(groupId, role),
-    getQuery,
-    {
-      placeholderData: [],
-    },
-  );
-};
-
-export { useGroupMembers };

app/soapbox/reducers/statuses.ts

@@ -26,6 +26,9 @@ import {
   FAVOURITE_REQUEST,
   UNFAVOURITE_REQUEST,
   FAVOURITE_FAIL,
+  DISLIKE_REQUEST,
+  UNDISLIKE_REQUEST,
+  DISLIKE_FAIL,
 } from '../actions/interactions';
 import {
   STATUS_CREATE_REQUEST,
@@ -204,6 +207,25 @@ const simulateFavourite = (
   return state.set(statusId, updatedStatus);
 };
 
+/** Simulate dislike/undislike of status for optimistic interactions */
+const simulateDislike = (
+  state: State,
+  statusId: string,
+  disliked: boolean,
+): State => {
+  const status = state.get(statusId);
+  if (!status) return state;
+
+  const delta = disliked ? +1 : -1;
+
+  const updatedStatus = status.merge({
+    disliked,
+    dislikes_count: Math.max(0, status.dislikes_count + delta),
+  });
+
+  return state.set(statusId, updatedStatus);
+};
+
 interface Translation {
   content: string
   detected_source_language: string
@@ -238,6 +260,10 @@ export default function statuses(state = initialState, action: AnyAction): State
       return simulateFavourite(state, action.status.id, true);
     case UNFAVOURITE_REQUEST:
       return simulateFavourite(state, action.status.id, false);
+    case DISLIKE_REQUEST:
+      return simulateDislike(state, action.status.id, true);
+    case UNDISLIKE_REQUEST:
+      return simulateDislike(state, action.status.id, false);
     case EMOJI_REACT_REQUEST:
       return state
         .updateIn(
@@ -252,6 +278,8 @@ export default function statuses(state = initialState, action: AnyAction): State
         );
     case FAVOURITE_FAIL:
       return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);
+    case DISLIKE_FAIL:
+      return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'disliked'], false);
     case REBLOG_REQUEST:
       return state.setIn([action.status.get('id'), 'reblogged'], true);
     case REBLOG_FAIL:

app/soapbox/reducers/user-lists.ts

@@ -60,6 +60,7 @@ import {
 import {
   REBLOGS_FETCH_SUCCESS,
   FAVOURITES_FETCH_SUCCESS,
+  DISLIKES_FETCH_SUCCESS,
   REACTIONS_FETCH_SUCCESS,
 } from 'soapbox/actions/interactions';
 import {
@@ -107,6 +108,7 @@ export const ReducerRecord = ImmutableRecord({
   following: ImmutableMap<string, List>(),
   reblogged_by: ImmutableMap<string, List>(),
   favourited_by: ImmutableMap<string, List>(),
+  disliked_by: ImmutableMap<string, List>(),
   reactions: ImmutableMap<string, ReactionList>(),
   follow_requests: ListRecord(),
   blocks: ListRecord(),
@@ -128,7 +130,7 @@ type ReactionList = ReturnType<typeof ReactionListRecord>;
 type ParticipationRequest = ReturnType<typeof ParticipationRequestRecord>;
 type ParticipationRequestList = ReturnType<typeof ParticipationRequestListRecord>;
 type Items = ImmutableOrderedSet<string>;
-type NestedListPath = ['followers' | 'following' | 'reblogged_by' | 'favourited_by' | 'reactions' | 'pinned' | 'birthday_reminders' | 'familiar_followers' | 'event_participations' | 'event_participation_requests' | 'membership_requests' | 'group_blocks', string];
+type NestedListPath = ['followers' | 'following' | 'reblogged_by' | 'favourited_by' | 'disliked_by' | 'reactions' | 'pinned' | 'birthday_reminders' | 'familiar_followers' | 'event_participations' | 'event_participation_requests' | 'membership_requests' | 'group_blocks', string];
 type ListPath = ['follow_requests' | 'blocks' | 'mutes' | 'directory'];
 
 const normalizeList = (state: State, path: NestedListPath | ListPath, accounts: APIEntity[], next?: string | null) => {
@@ -173,6 +175,8 @@ export default function userLists(state = ReducerRecord(), action: AnyAction) {
       return normalizeList(state, ['reblogged_by', action.id], action.accounts);
     case FAVOURITES_FETCH_SUCCESS:
       return normalizeList(state, ['favourited_by', action.id], action.accounts);
+    case DISLIKES_FETCH_SUCCESS:
+      return normalizeList(state, ['disliked_by', action.id], action.accounts);
     case REACTIONS_FETCH_SUCCESS:
       return state.setIn(['reactions', action.id], ReactionListRecord({
         items: ImmutableOrderedSet<Reaction>(action.reactions.map(({ accounts, ...reaction }: APIEntity) => ReactionRecord({

app/soapbox/schemas/group-relationship.ts

@@ -1,12 +1,15 @@
 import z from 'zod';
 
+import { GroupRoles } from './group-member';
+
 const groupRelationshipSchema = z.object({
   id: z.string(),
   member: z.boolean().catch(false),
   requested: z.boolean().catch(false),
-  role: z.string().nullish().catch(null),
+  role: z.nativeEnum(GroupRoles).catch(GroupRoles.USER),
   blocked_by: z.boolean().catch(false),
   notifying: z.boolean().nullable().catch(null),
+  pending_requests: z.boolean().catch(false),
 });
 
 type GroupRelationship = z.infer<typeof groupRelationshipSchema>;

app/soapbox/utils/features.ts

@@ -343,6 +343,13 @@ const getInstanceFeatures = (instance: Instance) => {
       v.software === PLEROMA && gte(v.version, '0.9.9'),
     ]),
 
+    /**
+     * @see POST /api/friendica/statuses/:id/dislike
+     * @see POST /api/friendica/statuses/:id/undislike
+     * @see GET  /api/friendica/statuses/:id/disliked_by
+     */
+    dislikes: v.software === FRIENDICA && gte(v.version, '2023.3.0'),
+
     /**
      * Ability to edit profile information.
      * @see PATCH /api/v1/accounts/update_credentials
@@ -542,6 +549,16 @@ const getInstanceFeatures = (instance: Instance) => {
     */
     groupsPromoteToAdmin: v.software !== TRUTHSOCIAL,
 
+    /**
+     * Can search my own groups.
+     */
+    groupsSearch: v.software === TRUTHSOCIAL,
+
+    /**
+     * Can validate group names.
+     */
+    groupsValidation: v.software === TRUTHSOCIAL,
+
     /**
      * Can hide follows/followers lists and counts.
      * @see PATCH /api/v1/accounts/update_credentials
@@ -716,6 +733,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/statuses
      */
     quotePosts: any([
+      v.software === FRIENDICA && gte(v.version, '2023.3.0'),
       v.software === PLEROMA && [REBASED, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'),
       features.includes('quote_posting'),
       instance.feature_quote === true,