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)
+      }
+    />
+  );
+};