Add a way to easily unpin profiles from the featured account area (#34931)

app/javascript/mastodon/actions/accounts.js

@@ -2,6 +2,7 @@ import { browserHistory } from 'mastodon/components/router';
 import { debounceWithDispatchAndArguments } from 'mastodon/utils/debounce';
 
 import api, { getLinks } from '../api';
+import { me } from '../initial_state';
 
 import {
   followAccountSuccess, unfollowAccountSuccess,
@@ -12,6 +13,7 @@ import {
   blockAccountSuccess, unblockAccountSuccess,
   pinAccountSuccess, unpinAccountSuccess,
   fetchRelationshipsSuccess,
+  fetchEndorsedAccounts,
 } from './accounts_typed';
 import { importFetchedAccount, importFetchedAccounts } from './importer';
 
@@ -634,6 +636,7 @@ export function pinAccount(id) {
 
     api().post(`/api/v1/accounts/${id}/pin`).then(response => {
       dispatch(pinAccountSuccess({ relationship: response.data }));
+      dispatch(fetchEndorsedAccounts({ accountId: me }));
     }).catch(error => {
       dispatch(pinAccountFail(error));
     });
@@ -646,6 +649,7 @@ export function unpinAccount(id) {
 
     api().post(`/api/v1/accounts/${id}/unpin`).then(response => {
       dispatch(unpinAccountSuccess({ relationship: response.data }));
+      dispatch(fetchEndorsedAccounts({ accountId: me }));
     }).catch(error => {
       dispatch(unpinAccountFail(error));
     });

app/javascript/mastodon/components/account.tsx

@@ -12,6 +12,8 @@ import {
   muteAccount,
   unmuteAccount,
   followAccountSuccess,
+  unpinAccount,
+  pinAccount,
 } from 'mastodon/actions/accounts';
 import { showAlertForError } from 'mastodon/actions/alerts';
 import { openModal } from 'mastodon/actions/modal';
@@ -62,14 +64,23 @@ const messages = defineMessages({
   },
 });
 
-export const Account: React.FC<{
+interface AccountProps {
   size?: number;
   id: string;
   hidden?: boolean;
   minimal?: boolean;
   defaultAction?: 'block' | 'mute';
   withBio?: boolean;
-}> = ({ id, size = 46, hidden, minimal, defaultAction, withBio }) => {
+}
+
+export const Account: React.FC<AccountProps> = ({
+  id,
+  size = 46,
+  hidden,
+  minimal,
+  defaultAction,
+  withBio,
+}) => {
   const intl = useIntl();
   const { signedIn } = useIdentity();
   const account = useAppSelector((state) => state.accounts.get(id));
@@ -119,8 +130,6 @@ export const Account: React.FC<{
         },
       ];
     } else if (defaultAction !== 'block') {
-      arr = [];
-
       if (isRemote && accountUrl) {
         arr.push({
           text: intl.formatMessage(messages.openOriginalPage),
@@ -173,6 +182,25 @@ export const Account: React.FC<{
           text: intl.formatMessage(messages.addToLists),
           action: handleAddToLists,
         });
+
+        if (id !== me && (relationship?.following || relationship?.requested)) {
+          const handleEndorseToggle = () => {
+            if (relationship.endorsed) {
+              dispatch(unpinAccount(id));
+            } else {
+              dispatch(pinAccount(id));
+            }
+          };
+          arr.push({
+            text: intl.formatMessage(
+              // Defined in features/account_timeline/components/account_header.tsx
+              relationship.endorsed
+                ? { id: 'account.unendorse' }
+                : { id: 'account.endorse' },
+            ),
+            action: handleEndorseToggle,
+          });
+        }
       }
     }