Profile redesign: Account featured tab (#38529)

Co-authored-by: diondiondion <mail@diondiondion.com>

app/javascript/mastodon/features/account_featured/components/empty_message.tsx

@@ -1,9 +1,15 @@
 import { FormattedMessage } from 'react-intl';
 
 import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
 
-import { LimitedAccountHint } from 'mastodon/features/account_timeline/components/limited_account_hint';
-import { me } from 'mastodon/initial_state';
+import ElephantDarkImage from '@/images/elephant_ui_dark.svg?react';
+import ElephantLightImage from '@/images/elephant_ui_light.svg?react';
+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';
 
 interface EmptyMessageProps {
   suspended: boolean;
@@ -19,21 +25,59 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
   blockedBy,
 }) => {
   const { acct } = useParams<{ acct?: string }>();
+  const me = useCurrentAccountId();
+  const theme = useTheme();
+  const ElephantImage =
+    theme === 'dark' ? ElephantDarkImage : ElephantLightImage;
+
   if (!accountId) {
     return null;
   }
 
+  let title: React.ReactNode = null;
   let message: React.ReactNode = null;
 
+  const hasCollections = areCollectionsEnabled();
+
+  const image = <ElephantImage />;
+
   if (me === accountId) {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_featured.me'
-        defaultMessage='You have not featured anything yet. Did you know that you can feature your hashtags you use the most, and even your friend’s accounts on your profile?'
-      />
-    );
+    if (hasCollections) {
+      // Return only here to insert the "Create a collection" button as the action for the empty state.
+      return (
+        <EmptyState
+          image={image}
+          title={
+            <FormattedMessage
+              id='empty_column.account_featured_self.no_collections'
+              defaultMessage='No collections yet'
+            />
+          }
+        >
+          <Link to='/collections/new' className='button'>
+            <FormattedMessage
+              id='empty_column.account_featured_self.no_collections_button'
+              defaultMessage='Create a collection'
+            />
+          </Link>
+        </EmptyState>
+      );
+    } else {
+      title = (
+        <FormattedMessage
+          id='empty_column.account_featured_self.pre_collections'
+          defaultMessage='Stay tuned for Collections'
+        />
+      );
+      message = (
+        <FormattedMessage
+          id='empty_column.account_featured_self.pre_collections_desc'
+          defaultMessage='Collections (coming in Mastodon 4.6) allows you to create your own curated lists of accounts to recommend to others.'
+        />
+      );
+    }
   } else if (suspended) {
-    message = (
+    title = (
       <FormattedMessage
         id='empty_column.account_suspended'
         defaultMessage='Account suspended'
@@ -42,32 +86,56 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
   } else if (hidden) {
     message = <LimitedAccountHint accountId={accountId} />;
   } else if (blockedBy) {
-    message = (
+    title = (
       <FormattedMessage
         id='empty_column.account_unavailable'
         defaultMessage='Profile unavailable'
       />
     );
-  } else if (acct) {
-    message = (
-      <FormattedMessage
-        id='empty_column.account_featured.other'
-        defaultMessage='{acct} has not featured anything yet. Did you know that you can feature your hashtags you use the most, and even your friend’s accounts on your profile?'
-        values={{ acct }}
-      />
-    );
   } else {
-    message = (
+    // Standard other account empty state.
+    title = (
       <FormattedMessage
-        id='empty_column.account_featured_other.unknown'
-        defaultMessage='This account has not featured anything yet.'
+        id='empty_column.account_featured_other.title'
+        defaultMessage='Nothing to see here'
       />
     );
+    if (hasCollections) {
+      if (acct) {
+        message = (
+          <FormattedMessage
+            id='empty_column.account_featured_other.no_collections_desc'
+            defaultMessage='{acct} hasn’t created any collections yet.'
+            values={{ acct }}
+          />
+        );
+      } else {
+        message = (
+          <FormattedMessage
+            id='empty_column.account_featured_unknown.no_collections_desc'
+            defaultMessage='This account hasn’t created any collections yet.'
+          />
+        );
+      }
+    } else {
+      if (acct) {
+        message = (
+          <FormattedMessage
+            id='empty_column.account_featured.other'
+            defaultMessage='{acct} hasn’t featured anything yet.'
+            values={{ acct }}
+          />
+        );
+      } else {
+        message = (
+          <FormattedMessage
+            id='empty_column.account_featured_unknown.other'
+            defaultMessage='This account hasn’t featured anything yet.'
+          />
+        );
+      }
+    }
   }
 
-  return (
-    <div className='empty-column-indicator'>
-      <span>{message}</span>
-    </div>
-  );
+  return <EmptyState title={title} message={message} image={image} />;
 };

app/javascript/mastodon/features/account_featured/components/featured_tag.tsx

@@ -1,52 +0,0 @@
-import { defineMessages, useIntl } from 'react-intl';
-
-import type { Map as ImmutableMap } from 'immutable';
-
-import { Hashtag } from 'mastodon/components/hashtag';
-
-export type TagMap = ImmutableMap<
-  'id' | 'name' | 'url' | 'statuses_count' | 'last_status_at' | 'accountId',
-  string | null
->;
-
-interface FeaturedTagProps {
-  tag: TagMap;
-  account: string;
-}
-
-const messages = defineMessages({
-  lastStatusAt: {
-    id: 'account.featured_tags.last_status_at',
-    defaultMessage: 'Last post on {date}',
-  },
-  empty: {
-    id: 'account.featured_tags.last_status_never',
-    defaultMessage: 'No posts',
-  },
-});
-
-export const FeaturedTag: React.FC<FeaturedTagProps> = ({ tag, account }) => {
-  const intl = useIntl();
-  const name = tag.get('name') ?? '';
-  const count = Number.parseInt(tag.get('statuses_count') ?? '');
-  return (
-    <Hashtag
-      key={name}
-      name={name}
-      to={`/@${account}/tagged/${name}`}
-      uses={count}
-      withGraph={false}
-      description={
-        count > 0
-          ? intl.formatMessage(messages.lastStatusAt, {
-              date: intl.formatDate(tag.get('last_status_at') ?? '', {
-                month: 'short',
-                day: '2-digit',
-                year: 'numeric',
-              }),
-            })
-          : intl.formatMessage(messages.empty)
-      }
-    />
-  );
-};