[Glitch] Allow hiding featured tab from empty state

Port 19ef4e5c40 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx

@@ -1,13 +1,18 @@
+import { useCallback } from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
+import { openModal } from '@/flavours/glitch/actions/modal';
+import { Button } from '@/flavours/glitch/components/button';
 import { EmptyState } from '@/flavours/glitch/components/empty_state';
 import { LimitedAccountHint } from '@/flavours/glitch/features/account_timeline/components/limited_account_hint';
 import { areCollectionsEnabled } from '@/flavours/glitch/features/collections/utils';
 import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
 import { useTheme } from '@/flavours/glitch/hooks/useTheme';
+import { useAppDispatch } from '@/flavours/glitch/store';
 import ElephantDarkImage from '@/images/elephant_ui_dark.svg?react';
 import ElephantLightImage from '@/images/elephant_ui_light.svg?react';
 
@@ -16,6 +21,7 @@ interface EmptyMessageProps {
   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 {