Allow hiding featured tab from empty state (#38625)

2026-04-09 12:59:11 +02:00 · 2026-04-09 12:59:11 +02:00 · 19ef4e5c40
commit 19ef4e5c40
parent 245c03664a
5 changed files with 142 additions and 19 deletions
--- a/app/javascript/mastodon/features/account_featured/components/empty_message.tsx
+++ b/app/javascript/mastodon/features/account_featured/components/empty_message.tsx
@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { FormattedMessage } from 'react-intl';

 import { useParams } from 'react-router';
@ -5,17 +7,21 @@ import { Link } from 'react-router-dom';

 import ElephantDarkImage from '@/images/elephant_ui_dark.svg?react';
 import ElephantLightImage from '@/images/elephant_ui_light.svg?react';
+import { openModal } from '@/mastodon/actions/modal';
+import { Button } from '@/mastodon/components/button';
 import { EmptyState } from '@/mastodon/components/empty_state';
 import { LimitedAccountHint } from '@/mastodon/features/account_timeline/components/limited_account_hint';
 import { areCollectionsEnabled } from '@/mastodon/features/collections/utils';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
 import { useTheme } from '@/mastodon/hooks/useTheme';
+import { useAppDispatch } from '@/mastodon/store';

 interface EmptyMessageProps {
  suspended: boolean;
  hidden: boolean;
  blockedBy: boolean;
  accountId?: string;
+  withImage?: boolean;
 }

 export const EmptyMessage: React.FC<EmptyMessageProps> = ({
@ -23,6 +29,7 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
  suspended,
  hidden,
  blockedBy,
+  withImage = true,
 }) => {
  const { acct } = useParams<{ acct?: string }>();
  const me = useCurrentAccountId();
@ -30,6 +37,17 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
  const ElephantImage =
    theme === 'dark' ? ElephantDarkImage : ElephantLightImage;

+  const dispatch = useAppDispatch();
+
+  const confirmHideFeaturedTab = useCallback(() => {
+    void dispatch(
+      openModal({
+        modalType: 'ACCOUNT_HIDE_FEATURED_TAB',
+        modalProps: {},
+      }),
+    );
+  }, [dispatch]);
+
  if (!accountId) {
    return null;
  }
@ -39,7 +57,7 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({

  const hasCollections = areCollectionsEnabled();

-  const image = <ElephantImage />;
+  const image = withImage && <ElephantImage />;

  if (me === accountId) {
    if (hasCollections) {
@ -66,6 +84,12 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
              defaultMessage='Create a collection'
            />
          </Link>
+          <Button secondary onClick={confirmHideFeaturedTab}>
+            <FormattedMessage
+              id='empty_column.account_featured_self.no_collections_hide_tab'
+              defaultMessage='Hide this tab instead'
+            />
+          </Button>
        </EmptyState>
      );
    } else {
--- a/app/javascript/mastodon/features/account_featured/index.tsx
+++ b/app/javascript/mastodon/features/account_featured/index.tsx
@ -35,6 +35,8 @@ import { areCollectionsEnabled } from '../collections/utils';
 import { EmptyMessage } from './components/empty_message';
 import { Subheading, SubheadingLink } from './components/subheading';

+const collectionsEnabled = areCollectionsEnabled();
+
 const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
  multiColumn,
 }) => {
@ -56,13 +58,12 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
    if (accountId) {
      void dispatch(fetchEndorsedAccounts({ accountId }));

-      if (areCollectionsEnabled()) {
+      if (collectionsEnabled) {
        void dispatch(fetchAccountCollections({ accountId }));
      }
    }
  }, [accountId, dispatch]);

-  const isLoading = !accountId;
  const featuredAccountIds = useAppSelector(
    (state) =>
      state.user_lists.getIn(
@ -70,8 +71,8 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
        ImmutableList(),
      ) as ImmutableList<string>,
  );
-  const { collections, status } = useAppSelector((state) =>
-    selectAccountCollections(state, accountId ?? null),
+  const { collections, status: collectionsLoadStatus } = useAppSelector(
+    (state) => selectAccountCollections(state, accountId ?? null),
  );
  const listedCollections = collections.filter(
    // Hide unlisted and empty collections to avoid confusion
@ -80,6 +81,15 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
    (item) => item.discoverable && !!item.item_count,
  );

+  const hasCollections =
+    collectionsEnabled &&
+    collectionsLoadStatus === 'idle' &&
+    listedCollections.length > 0;
+
+  const hasFeaturedAccounts = !featuredAccountIds.isEmpty();
+
+  const isLoading = !accountId || collectionsLoadStatus !== 'idle';
+
  if (accountId === null) {
    return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
  }
@ -94,7 +104,7 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
    );
  }

-  if (featuredAccountIds.isEmpty() && listedCollections.length === 0) {
+  if (!hasFeaturedAccounts && !hasCollections) {
    return (
      <AccountFeaturedWrapper accountId={accountId}>
        <EmptyMessage
@ -138,7 +148,7 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
            </ItemList>
          </>
        )}
-        {listedCollections.length > 0 && status === 'idle' && (
+        {collectionsEnabled && (
          <>
            <Subheading as='header'>
              <h2>
@ -154,18 +164,28 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
                />
              </SubheadingLink>
            </Subheading>
-            <ItemList>
-              {listedCollections.map((item, index) => (
-                <CollectionListItem
-                  key={item.id}
-                  collection={item}
-                  withoutBorder={index === listedCollections.length - 1}
-                  withAuthorHandle={false}
-                  positionInList={index + 1}
-                  listSize={listedCollections.length}
-                />
-              ))}
-            </ItemList>
+            {hasCollections ? (
+              <ItemList>
+                {listedCollections.map((item, index) => (
+                  <CollectionListItem
+                    key={item.id}
+                    collection={item}
+                    withoutBorder={index === listedCollections.length - 1}
+                    withAuthorHandle={false}
+                    positionInList={index + 1}
+                    listSize={listedCollections.length}
+                  />
+                ))}
+              </ItemList>
+            ) : (
+              <EmptyMessage
+                withImage={false}
+                blockedBy={blockedBy}
+                hidden={hidden}
+                suspended={suspended}
+                accountId={accountId}
+              />
+            )}
          </>
        )}
        <RemoteHint accountId={accountId} />
--- a/app/javascript/mastodon/features/ui/components/confirmation_modals/hide_featured_tab.tsx
+++ b/app/javascript/mastodon/features/ui/components/confirmation_modals/hide_featured_tab.tsx
@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useHistory } from 'react-router';
+
+import { useAccount } from '@/mastodon/hooks/useAccount';
+import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
+import { domain } from '@/mastodon/initial_state';
+import { patchProfile } from '@/mastodon/reducers/slices/profile_edit';
+import { useAppDispatch } from 'mastodon/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  title: {
+    id: 'confirmations.hide_featured_tab.title',
+    defaultMessage: 'Hide "Featured" tab?',
+  },
+  intro: {
+    id: 'confirmations.hide_featured_tab.intro',
+    defaultMessage:
+      'You can change this at any time under <i>Edit profile > Profile tab settings</i>.',
+  },
+  message: {
+    id: 'confirmations.hide_featured_tab.message',
+    defaultMessage:
+      'This will hide the tab for users on {serverName} and other servers running the latest version of Mastodon. Other displays may vary.',
+  },
+  confirm: {
+    id: 'confirmations.hide_featured_tab.confirm',
+    defaultMessage: 'Hide tab',
+  },
+});
+
+export const ConfirmHideFeaturedTabModal: React.FC<
+  BaseConfirmationModalProps
+> = ({ onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const currentAccountId = useCurrentAccountId();
+  const { acct: currentUserName } = useAccount(currentAccountId) ?? {};
+
+  const onConfirm = useCallback(() => {
+    void dispatch(patchProfile({ show_featured: false }));
+    history.push(`/@${currentUserName}`);
+  }, [currentUserName, dispatch, history]);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.title)}
+      extraContent={
+        <div className='prose'>
+          <p>
+            {intl.formatMessage(messages.intro, {
+              i: (words) => <i>{words}</i>,
+            })}
+          </p>
+          <p>
+            {intl.formatMessage(messages.message, {
+              serverName: domain,
+            })}
+          </p>
+        </div>
+      }
+      confirm={intl.formatMessage(messages.confirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};
--- a/app/javascript/mastodon/features/ui/components/modal_root.jsx
+++ b/app/javascript/mastodon/features/ui/components/modal_root.jsx
@ -105,6 +105,7 @@ export const MODAL_COMPONENTS = {
  'ACCOUNT_EDIT_IMAGE_ALT': accountEditModal('ImageAltModal'),
  'ACCOUNT_EDIT_IMAGE_DELETE': accountEditModal('ImageDeleteModal'),
  'ACCOUNT_EDIT_IMAGE_UPLOAD': accountEditModal('ImageUploadModal'),
+  'ACCOUNT_HIDE_FEATURED_TAB': () => import('@/mastodon/features/ui/components/confirmation_modals/hide_featured_tab').then(module => ({ default: module.ConfirmHideFeaturedTabModal })),
 };

 /** @arg {keyof import('@/mastodon/features/account_edit/modals')} type */
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@ -503,6 +503,10 @@
  "confirmations.follow_to_list.confirm": "Follow and add to list",
  "confirmations.follow_to_list.message": "You need to be following {name} to add them to a list.",
  "confirmations.follow_to_list.title": "Follow user?",
+  "confirmations.hide_featured_tab.confirm": "Hide tab",
+  "confirmations.hide_featured_tab.intro": "You can change this at any time under <i>Edit profile > Profile tab settings</i>.",
+  "confirmations.hide_featured_tab.message": "This will hide the tab for users on {serverName} and other servers running the latest version of Mastodon. Other displays may vary.",
+  "confirmations.hide_featured_tab.title": "Hide \"Featured\" tab?",
  "confirmations.logout.confirm": "Log out",
  "confirmations.logout.message": "Are you sure you want to log out?",
  "confirmations.logout.title": "Log out?",
@ -609,6 +613,7 @@
  "emoji_button.travel": "Travel & Places",
  "empty_column.account_featured.other": "{acct} has not featured anything yet.",
  "empty_column.account_featured_self.no_collections_button": "Create a collection",
+  "empty_column.account_featured_self.no_collections_hide_tab": "Hide this tab instead",
  "empty_column.account_featured_self.pre_collections": "Stay tuned for Collections",
  "empty_column.account_featured_self.pre_collections_desc": "Collections (coming in Mastodon 4.6) allow you to create your own curated lists of accounts to recommend to others.",
  "empty_column.account_featured_self.showcase_accounts": "Showcase your favorite accounts",