Adds featured tab to web (#34405)

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

@@ -0,0 +1,50 @@
+import { FormattedMessage } from 'react-intl';
+
+import { LimitedAccountHint } from 'mastodon/features/account_timeline/components/limited_account_hint';
+
+interface EmptyMessageProps {
+  suspended: boolean;
+  hidden: boolean;
+  blockedBy: boolean;
+  accountId?: string;
+}
+
+export const EmptyMessage: React.FC<EmptyMessageProps> = ({
+  accountId,
+  suspended,
+  hidden,
+  blockedBy,
+}) => {
+  if (!accountId) {
+    return null;
+  }
+
+  let message: React.ReactNode = null;
+
+  if (suspended) {
+    message = (
+      <FormattedMessage
+        id='empty_column.account_suspended'
+        defaultMessage='Account suspended'
+      />
+    );
+  } else if (hidden) {
+    message = <LimitedAccountHint accountId={accountId} />;
+  } else if (blockedBy) {
+    message = (
+      <FormattedMessage
+        id='empty_column.account_unavailable'
+        defaultMessage='Profile unavailable'
+      />
+    );
+  } else {
+    message = (
+      <FormattedMessage
+        id='empty_column.account_featured'
+        defaultMessage='This list is empty'
+      />
+    );
+  }
+
+  return <div className='empty-column-indicator'>{message}</div>;
+};

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

@@ -0,0 +1,51 @@
+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',
+              }),
+            })
+          : intl.formatMessage(messages.empty)
+      }
+    />
+  );
+};

app/javascript/mastodon/features/account_featured/index.tsx

@@ -0,0 +1,156 @@
+import { useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useParams } from 'react-router';
+
+import type { Map as ImmutableMap } from 'immutable';
+import { List as ImmutableList } from 'immutable';
+
+import { fetchFeaturedTags } from 'mastodon/actions/featured_tags';
+import { expandAccountFeaturedTimeline } from 'mastodon/actions/timelines';
+import { ColumnBackButton } from 'mastodon/components/column_back_button';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { RemoteHint } from 'mastodon/components/remote_hint';
+import StatusContainer from 'mastodon/containers/status_container';
+import { useAccountId } from 'mastodon/hooks/useAccountId';
+import { useAccountVisibility } from 'mastodon/hooks/useAccountVisibility';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+import { AccountHeader } from '../account_timeline/components/account_header';
+import Column from '../ui/components/column';
+
+import { EmptyMessage } from './components/empty_message';
+import { FeaturedTag } from './components/featured_tag';
+import type { TagMap } from './components/featured_tag';
+
+interface Params {
+  acct?: string;
+  id?: string;
+}
+
+const AccountFeatured = () => {
+  const accountId = useAccountId();
+  const { suspended, blockedBy, hidden } = useAccountVisibility(accountId);
+  const forceEmptyState = suspended || blockedBy || hidden;
+  const { acct = '' } = useParams<Params>();
+
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (accountId) {
+      void dispatch(expandAccountFeaturedTimeline(accountId));
+      dispatch(fetchFeaturedTags(accountId));
+    }
+  }, [accountId, dispatch]);
+
+  const isLoading = useAppSelector(
+    (state) =>
+      !accountId ||
+      !!(state.timelines as ImmutableMap<string, unknown>).getIn([
+        `account:${accountId}:pinned`,
+        'isLoading',
+      ]) ||
+      !!state.user_lists.getIn(['featured_tags', accountId, 'isLoading']),
+  );
+  const featuredTags = useAppSelector(
+    (state) =>
+      state.user_lists.getIn(
+        ['featured_tags', accountId, 'items'],
+        ImmutableList(),
+      ) as ImmutableList<TagMap>,
+  );
+  const featuredStatusIds = useAppSelector(
+    (state) =>
+      (state.timelines as ImmutableMap<string, unknown>).getIn(
+        [`account:${accountId}:pinned`, 'items'],
+        ImmutableList(),
+      ) as ImmutableList<string>,
+  );
+
+  if (isLoading) {
+    return (
+      <AccountFeaturedWrapper accountId={accountId}>
+        <div className='scrollable__append'>
+          <LoadingIndicator />
+        </div>
+      </AccountFeaturedWrapper>
+    );
+  }
+
+  if (featuredStatusIds.isEmpty() && featuredTags.isEmpty()) {
+    return (
+      <AccountFeaturedWrapper accountId={accountId}>
+        <EmptyMessage
+          blockedBy={blockedBy}
+          hidden={hidden}
+          suspended={suspended}
+          accountId={accountId}
+        />
+        <RemoteHint accountId={accountId} />
+      </AccountFeaturedWrapper>
+    );
+  }
+
+  return (
+    <Column>
+      <ColumnBackButton />
+
+      <div className='scrollable scrollable--flex'>
+        {accountId && (
+          <AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
+        )}
+        {!featuredTags.isEmpty() && (
+          <>
+            <h4 className='column-subheading'>
+              <FormattedMessage
+                id='account.featured.hashtags'
+                defaultMessage='Hashtags'
+              />
+            </h4>
+            {featuredTags.map((tag) => (
+              <FeaturedTag key={tag.get('id')} tag={tag} account={acct} />
+            ))}
+          </>
+        )}
+        {!featuredStatusIds.isEmpty() && (
+          <>
+            <h4 className='column-subheading'>
+              <FormattedMessage
+                id='account.featured.posts'
+                defaultMessage='Posts'
+              />
+            </h4>
+            {featuredStatusIds.map((statusId) => (
+              <StatusContainer
+                key={`f-${statusId}`}
+                // @ts-expect-error inferred props are wrong
+                id={statusId}
+                contextType='account'
+              />
+            ))}
+          </>
+        )}
+        <RemoteHint accountId={accountId} />
+      </div>
+    </Column>
+  );
+};
+
+const AccountFeaturedWrapper = ({
+  children,
+  accountId,
+}: React.PropsWithChildren<{ accountId?: string }>) => {
+  return (
+    <Column>
+      <ColumnBackButton />
+      <div className='scrollable scrollable--flex'>
+        {accountId && <AccountHeader accountId={accountId} />}
+        {children}
+      </div>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default AccountFeatured;