Merge commit '4d2a148ccbedc818c98fd712a0b44869c1019321' into glitch-soc/merge-upstream

2026-02-25 19:11:22 +01:00
commit e3cb4dea42
@@ -1,125 +0,0 @@
-import type { FC } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import { useParams } from 'react-router';
-
-import { AccountBio } from '@/mastodon/components/account_bio';
-import { Column } from '@/mastodon/components/column';
-import { ColumnBackButton } from '@/mastodon/components/column_back_button';
-import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
-import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
-import type { AccountId } from '@/mastodon/hooks/useAccountId';
-import { useAccountId } from '@/mastodon/hooks/useAccountId';
-import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
-import { createAppSelector, useAppSelector } from '@/mastodon/store';
-
-import { AccountHeader } from '../account_timeline/components/account_header';
-import { AccountHeaderFields } from '../account_timeline/components/fields';
-import { LimitedAccountHint } from '../account_timeline/components/limited_account_hint';
-
-import classes from './styles.module.css';
-
-const selectIsProfileEmpty = createAppSelector(
-  [(state) => state.accounts, (_, accountId: AccountId) => accountId],
-  (accounts, accountId) => {
-    // Null means still loading, otherwise it's a boolean.
-    if (!accountId) {
-      return null;
-    }
-    const account = accounts.get(accountId);
-    if (!account) {
-      return null;
-    }
-    return !account.note && !account.fields.size;
-  },
-);
-
-export const AccountAbout: FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
-  const accountId = useAccountId();
-  const { blockedBy, hidden, suspended } = useAccountVisibility(accountId);
-  const forceEmptyState = blockedBy || hidden || suspended;
-
-  const isProfileEmpty = useAppSelector((state) =>
-    selectIsProfileEmpty(state, accountId),
-  );
-
-  if (accountId === null) {
-    return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
-  }
-
-  if (!accountId || isProfileEmpty === null) {
-    return (
-      <Column bindToDocument={!multiColumn}>
-        <LoadingIndicator />
-      </Column>
-    );
-  }
-
-  const showEmptyMessage = forceEmptyState || isProfileEmpty;
-
-  return (
-    <Column bindToDocument={!multiColumn}>
-      <ColumnBackButton />
-      <div className='scrollable scrollable--flex'>
-        <AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
-        <div className={classes.wrapper}>
-          {!showEmptyMessage ? (
-            <>
-              <AccountBio
-                accountId={accountId}
-                className={`${classes.bio} account__header__content`}
-              />
-              <AccountHeaderFields accountId={accountId} />
-            </>
-          ) : (
-            <div className='empty-column-indicator'>
-              <EmptyMessage accountId={accountId} />
-            </div>
-          )}
-        </div>
-      </div>
-    </Column>
-  );
-};
-
-const EmptyMessage: FC<{ accountId: string }> = ({ accountId }) => {
-  const { blockedBy, hidden, suspended } = useAccountVisibility(accountId);
-  const currentUserId = useAppSelector(
-    (state) => state.meta.get('me') as string | null,
-  );
-  const { acct } = useParams<{ acct?: string }>();
-
-  if (suspended) {
-    return (
-      <FormattedMessage
-        id='empty_column.account_suspended'
-        defaultMessage='Account suspended'
-      />
-    );
-  } else if (hidden) {
-    return <LimitedAccountHint accountId={accountId} />;
-  } else if (blockedBy) {
-    return (
-      <FormattedMessage
-        id='empty_column.account_unavailable'
-        defaultMessage='Profile unavailable'
-      />
-    );
-  } else if (accountId === currentUserId) {
-    return (
-      <FormattedMessage
-        id='empty_column.account_about.me'
-        defaultMessage='You have not added any information about yourself yet.'
-      />
-    );
-  }
-
-  return (
-    <FormattedMessage
-      id='empty_column.account_about.other'
-      defaultMessage='{acct} has not added any information about themselves yet.'
-      values={{ acct }}
-    />
-  );
-};
@@ -1,7 +0,0 @@
-.wrapper {
-  padding: 16px;
-}
-
-.bio {
-  color: var(--color-text-primary);
-}
@@ -17,8 +17,15 @@ import BundleColumnError from 'mastodon/features/ui/components/bundle_column_err
 import Column from 'mastodon/features/ui/components/column';
 import { useAccountId } from 'mastodon/hooks/useAccountId';
 import { useAccountVisibility } from 'mastodon/hooks/useAccountVisibility';
+import {
+  fetchAccountCollections,
+  selectAccountCollections,
+} from 'mastodon/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';

+import { CollectionListItem } from '../collections/detail/collection_list_item';
+import { areCollectionsEnabled } from '../collections/utils';
+
 import { EmptyMessage } from './components/empty_message';
 import { FeaturedTag } from './components/featured_tag';
 import type { TagMap } from './components/featured_tag';
@@ -42,6 +49,9 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
    if (accountId) {
      void dispatch(fetchFeaturedTags({ accountId }));
      void dispatch(fetchEndorsedAccounts({ accountId }));
+      if (areCollectionsEnabled()) {
+        void dispatch(fetchAccountCollections({ accountId }));
+      }
    }
  }, [accountId, dispatch]);

@@ -64,6 +74,14 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
        ImmutableList(),
      ) as ImmutableList<string>,
  );
+  const { collections, status } = useAppSelector((state) =>
+    selectAccountCollections(state, accountId ?? null),
+  );
+  const publicCollections = collections.filter(
+    // This filter only applies when viewing your own profile, where the endpoint
+    // returns all collections, but we hide unlisted ones here to avoid confusion
+    (item) => item.discoverable,
+  );

  if (accountId === null) {
    return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
@@ -101,6 +119,25 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
        {accountId && (
          <AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
        )}
+        {publicCollections.length > 0 && status === 'idle' && (
+          <>
+            <h4 className='column-subheading'>
+              <FormattedMessage
+                id='account.featured.collections'
+                defaultMessage='Collections'
+              />
+            </h4>
+            <section>
+              {publicCollections.map((item, index) => (
+                <CollectionListItem
+                  key={item.id}
+                  collection={item}
+                  withoutBorder={index === publicCollections.length - 1}
+                />
+              ))}
+            </section>
+          </>
+        )}
        {!featuredTags.isEmpty() && (
          <>
            <h4 className='column-subheading'>
@@ -1,5 +1,12 @@
+import type { AccountFieldShape } from '@/mastodon/models/account';
 import { isServerFeatureEnabled } from '@/mastodon/utils/environment';

 export function isRedesignEnabled() {
  return isServerFeatureEnabled('profile_redesign');
 }
+
+export interface AccountField extends AccountFieldShape {
+  nameHasEmojis: boolean;
+  value_plain: string;
+  valueHasEmojis: boolean;
+}
@@ -210,18 +210,14 @@ export const AccountHeader: React.FC<{
                    <AccountNote accountId={accountId} />
                  ))}

-                {(!isRedesign || layout === 'single-column') && (
-                  <>
-                    <AccountBio
-                      accountId={accountId}
-                      className={classNames(
-                        'account__header__content',
-                        isRedesign && redesignClasses.bio,
-                      )}
-                    />
-                    <AccountHeaderFields accountId={accountId} />
-                  </>
-                )}
+                <AccountBio
+                  accountId={accountId}
+                  className={classNames(
+                    'account__header__content',
+                    isRedesign && redesignClasses.bio,
+                  )}
+                />
+                <AccountHeaderFields accountId={accountId} />
              </div>

              <AccountNumberFields accountId={accountId} />
@@ -1,25 +1,31 @@
-import { useCallback, useMemo, useState } from 'react';
-import type { FC, Key } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import type { FC } from 'react';

 import { defineMessage, FormattedMessage, useIntl } from 'react-intl';

 import classNames from 'classnames';

-import htmlConfig from '@/config/html-tags.json';
 import IconVerified from '@/images/icons/icon_verified.svg?react';
+import { openModal } from '@/mastodon/actions/modal';
 import { AccountFields } from '@/mastodon/components/account_fields';
 import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';
 import type { EmojiHTMLProps } from '@/mastodon/components/emoji/html';
 import { EmojiHTML } from '@/mastodon/components/emoji/html';
 import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
 import { Icon } from '@/mastodon/components/icon';
+import { IconButton } from '@/mastodon/components/icon_button';
+import { MiniCard } from '@/mastodon/components/mini_card';
 import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
 import { useAccount } from '@/mastodon/hooks/useAccount';
-import type { Account, AccountFieldShape } from '@/mastodon/models/account';
-import type { OnElementHandler } from '@/mastodon/utils/html';
+import { useResizeObserver } from '@/mastodon/hooks/useObserver';
+import type { Account } from '@/mastodon/models/account';
+import { useAppDispatch } from '@/mastodon/store';
+import MoreIcon from '@/material-icons/400-24px/more_horiz.svg?react';

 import { cleanExtraEmojis } from '../../emoji/normalize';
+import type { AccountField } from '../common';
 import { isRedesignEnabled } from '../common';
+import { useFieldHtml } from '../hooks/useFieldHtml';

 import classes from './redesign.module.scss';

@@ -74,172 +80,310 @@ const RedesignAccountHeaderFields: FC<{ account: Account }> = ({ account }) => {
    () => cleanExtraEmojis(account.emojis),
    [account.emojis],
  );
-  const textHasCustomEmoji = useCallback(
-    (text?: string | null) => {
-      if (!emojis || !text) {
-        return false;
-      }
-      for (const emoji of Object.keys(emojis)) {
-        if (text.includes(`:${emoji}:`)) {
-          return true;
-        }
-      }
-      return false;
-    },
-    [emojis],
-  );
+  const fields: AccountField[] = useMemo(() => {
+    const fields = account.fields.toJS();
+    if (!emojis) {
+      return fields.map((field) => ({
+        ...field,
+        nameHasEmojis: false,
+        value_plain: field.value_plain ?? '',
+        valueHasEmojis: false,
+      }));
+    }
+
+    const shortcodes = Object.keys(emojis);
+    return fields.map((field) => ({
+      ...field,
+      nameHasEmojis: shortcodes.some((code) =>
+        field.name.includes(`:${code}:`),
+      ),
+      value_plain: field.value_plain ?? '',
+      valueHasEmojis: shortcodes.some((code) =>
+        field.value_plain?.includes(`:${code}:`),
+      ),
+    }));
+  }, [account.fields, emojis]);
+
  const htmlHandlers = useElementHandledLink({
    hashtagAccountId: account.id,
  });

-  if (account.fields.isEmpty()) {
+  const { wrapperRef } = useColumnWrap();
+
+  if (fields.length === 0) {
    return null;
  }

  return (
    <CustomEmojiProvider emojis={emojis}>
-      <dl className={classes.fieldList}>
-        {account.fields.map((field, key) => (
-          <FieldRow
-            key={key}
-            {...field.toJSON()}
-            htmlHandlers={htmlHandlers}
-            textHasCustomEmoji={textHasCustomEmoji}
-          />
+      <dl className={classes.fieldList} ref={wrapperRef}>
+        {fields.map((field, key) => (
+          <FieldRow key={key} field={field} htmlHandlers={htmlHandlers} />
        ))}
      </dl>
    </CustomEmojiProvider>
  );
 };

-const FieldRow: FC<
-  {
-    textHasCustomEmoji: (text?: string | null) => boolean;
-    htmlHandlers: ReturnType<typeof useElementHandledLink>;
-  } & AccountFieldShape
-> = ({
-  textHasCustomEmoji,
-  htmlHandlers,
-  name,
-  name_emojified,
-  value_emojified,
-  value_plain,
-  verified_at,
-}) => {
+const FieldRow: FC<{
+  htmlHandlers: ReturnType<typeof useElementHandledLink>;
+  field: AccountField;
+}> = ({ htmlHandlers, field }) => {
  const intl = useIntl();
-  const [showAll, setShowAll] = useState(false);
-  const handleClick = useCallback(() => {
-    setShowAll((prev) => !prev);
-  }, []);
+  const {
+    name,
+    name_emojified,
+    nameHasEmojis,
+    value_emojified,
+    value_plain,
+    valueHasEmojis,
+    verified_at,
+  } = field;
+
+  const { wrapperRef, isLabelOverflowing, isValueOverflowing } =
+    useFieldOverflow();
+
+  const dispatch = useAppDispatch();
+  const handleOverflowClick = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'ACCOUNT_FIELD_OVERFLOW',
+        modalProps: { field },
+      }),
+    );
+  }, [dispatch, field]);

  return (
-    /* eslint-disable -- This method of showing field contents is not very accessible, but it's what we've got for now */
-    <div
+    <MiniCard
      className={classNames(
-        classes.fieldRow,
+        classes.fieldItem,
        verified_at && classes.fieldVerified,
-        showAll && classes.fieldShowAll,
      )}
-      onClick={handleClick}
-      /* eslint-enable */
-    >
-      <FieldHTML
-        as='dt'
-        text={name}
-        textEmojified={name_emojified}
-        textHasCustomEmoji={textHasCustomEmoji(name)}
-        titleLength={50}
-        className='translate'
-        {...htmlHandlers}
-      />
-      <dd>
+      label={
        <FieldHTML
-          as='span'
-          text={value_plain ?? ''}
-          textEmojified={value_emojified}
-          textHasCustomEmoji={textHasCustomEmoji(value_plain ?? '')}
-          titleLength={120}
+          text={name}
+          textEmojified={name_emojified}
+          textHasCustomEmoji={nameHasEmojis}
+          className='translate'
+          isOverflowing={isLabelOverflowing}
+          onOverflowClick={handleOverflowClick}
          {...htmlHandlers}
        />
-
-        {verified_at && (
-          <Icon
-            id='verified'
-            icon={IconVerified}
-            className={classes.fieldVerifiedIcon}
-            aria-label={intl.formatMessage(verifyMessage, {
-              date: intl.formatDate(verified_at, dateFormatOptions),
-            })}
-            noFill
-          />
-        )}
-      </dd>
-    </div>
+      }
+      value={
+        <FieldHTML
+          text={value_plain}
+          textEmojified={value_emojified}
+          textHasCustomEmoji={valueHasEmojis}
+          isOverflowing={isValueOverflowing}
+          onOverflowClick={handleOverflowClick}
+          {...htmlHandlers}
+        />
+      }
+      ref={wrapperRef}
+    >
+      {verified_at && (
+        <Icon
+          id='verified'
+          icon={IconVerified}
+          className={classes.fieldVerifiedIcon}
+          aria-label={intl.formatMessage(verifyMessage, {
+            date: intl.formatDate(verified_at, dateFormatOptions),
+          })}
+          noFill
+        />
+      )}
+    </MiniCard>
  );
 };

-const FieldHTML: FC<
-  {
-    as?: 'span' | 'dt';
-    text: string;
-    textEmojified: string;
-    textHasCustomEmoji: boolean;
-    titleLength: number;
-  } & Omit<EmojiHTMLProps, 'htmlString'>
-> = ({
-  as,
+type FieldHTMLProps = {
+  text: string;
+  textEmojified: string;
+  textHasCustomEmoji: boolean;
+  isOverflowing?: boolean;
+  onOverflowClick?: () => void;
+} & Omit<EmojiHTMLProps, 'htmlString'>;
+
+const FieldHTML: FC<FieldHTMLProps> = ({
  className,
  extraEmojis,
  text,
  textEmojified,
  textHasCustomEmoji,
-  titleLength,
+  isOverflowing,
+  onOverflowClick,
  onElement,
  ...props
 }) => {
-  const handleElement: OnElementHandler = useCallback(
-    (element, props, children, extra) => {
-      if (element instanceof HTMLAnchorElement) {
-        // Don't allow custom emoji and links in the same field to prevent verification spoofing.
-        if (textHasCustomEmoji) {
-          return (
-            <span {...filterAttributesForSpan(props)} key={props.key as Key}>
-              {children}
-            </span>
-          );
-        }
-        return onElement?.(element, props, children, extra);
-      }
-      return undefined;
-    },
-    [onElement, textHasCustomEmoji],
-  );
+  const intl = useIntl();
+  const handleElement = useFieldHtml(textHasCustomEmoji, onElement);

-  return (
+  const html = (
    <EmojiHTML
-      as={as}
+      as='span'
      htmlString={textEmojified}
-      title={showTitleOnLength(text, titleLength)}
      className={className}
      onElement={handleElement}
+      data-contents
      {...props}
    />
  );
+  if (!isOverflowing) {
+    return html;
+  }
+
+  return (
+    <>
+      {html}
+      <IconButton
+        icon='ellipsis'
+        iconComponent={MoreIcon}
+        title={intl.formatMessage({
+          id: 'account.field_overflow',
+          defaultMessage: 'Show full content',
+        })}
+        className={classes.fieldOverflowButton}
+        onClick={onOverflowClick}
+      />
+    </>
+  );
 };

-function filterAttributesForSpan(props: Record<string, unknown>) {
-  const validAttributes: Record<string, unknown> = {};
-  for (const key of Object.keys(props)) {
-    if (key in htmlConfig.tags.span.attributes) {
-      validAttributes[key] = props[key];
+function useColumnWrap() {
+  const listRef = useRef<HTMLDListElement | null>(null);
+
+  const handleRecalculate = useCallback(() => {
+    const listEle = listRef.current;
+    if (!listEle) {
+      return;
    }
-  }
-  return validAttributes;
+
+    // Calculate dimensions from styles and element size to determine column spans.
+    const styles = getComputedStyle(listEle);
+    const gap = parseFloat(styles.columnGap || styles.gap || '0');
+    const columnCount = parseInt(styles.getPropertyValue('--cols')) || 2;
+    const listWidth = listEle.offsetWidth;
+    const colWidth = (listWidth - gap * (columnCount - 1)) / columnCount;
+
+    // Matrix to hold the grid layout.
+    const itemGrid: { ele: HTMLElement; span: number }[][] = [];
+
+    // First, determine the column span for each item and populate the grid matrix.
+    let currentRow = 0;
+    for (const child of listEle.children) {
+      if (!(child instanceof HTMLElement)) {
+        continue;
+      }
+
+      // This uses a data attribute to detect which elements to measure that overflow.
+      const contents = child.querySelectorAll('[data-contents]');
+
+      const childStyles = getComputedStyle(child);
+      const padding =
+        parseFloat(childStyles.paddingLeft) +
+        parseFloat(childStyles.paddingRight);
+
+      const contentWidth =
+        Math.max(
+          ...Array.from(contents).map((content) => content.scrollWidth),
+        ) + padding;
+
+      const contentSpan = Math.ceil(contentWidth / colWidth);
+      const maxColSpan = Math.min(contentSpan, columnCount);
+
+      const curRow = itemGrid[currentRow] ?? [];
+      const availableCols =
+        columnCount - curRow.reduce((carry, curr) => carry + curr.span, 0);
+      // Move to next row if current item doesn't fit.
+      if (maxColSpan > availableCols) {
+        currentRow++;
+      }
+
+      itemGrid[currentRow] = (itemGrid[currentRow] ?? []).concat({
+        ele: child,
+        span: maxColSpan,
+      });
+    }
+
+    // Next, iterate through the grid matrix and set the column spans and row breaks.
+    for (const row of itemGrid) {
+      let remainingRowSpan = columnCount;
+      for (let i = 0; i < row.length; i++) {
+        const item = row[i];
+        if (!item) {
+          break;
+        }
+        const { ele, span } = item;
+        if (i < row.length - 1) {
+          ele.dataset.cols = span.toString();
+          remainingRowSpan -= span;
+        } else {
+          // Last item in the row takes up remaining space to fill the row.
+          ele.dataset.cols = remainingRowSpan.toString();
+          break;
+        }
+      }
+    }
+  }, []);
+
+  const observer = useResizeObserver(handleRecalculate);
+
+  const wrapperRefCallback = useCallback(
+    (element: HTMLDListElement | null) => {
+      if (element) {
+        listRef.current = element;
+        observer.observe(element);
+      }
+    },
+    [observer],
+  );
+
+  return { wrapperRef: wrapperRefCallback };
 }

-function showTitleOnLength(value: string | null, maxLength: number) {
-  if (value && value.length > maxLength) {
-    return value;
-  }
-  return undefined;
+function useFieldOverflow() {
+  const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);
+  const [isValueOverflowing, setIsValueOverflowing] = useState(false);
+
+  const wrapperRef = useRef<HTMLElement | null>(null);
+
+  const handleRecalculate = useCallback(() => {
+    const wrapperEle = wrapperRef.current;
+    if (!wrapperEle) return;
+
+    const wrapperStyles = getComputedStyle(wrapperEle);
+    const maxWidth =
+      wrapperEle.offsetWidth -
+      (parseFloat(wrapperStyles.paddingLeft) +
+        parseFloat(wrapperStyles.paddingRight));
+
+    const label = wrapperEle.querySelector<HTMLSpanElement>(
+      'dt > [data-contents]',
+    );
+    const value = wrapperEle.querySelector<HTMLSpanElement>(
+      'dd > [data-contents]',
+    );
+
+    setIsLabelOverflowing(label ? label.scrollWidth > maxWidth : false);
+    setIsValueOverflowing(value ? value.scrollWidth > maxWidth : false);
+  }, []);
+
+  const observer = useResizeObserver(handleRecalculate);
+
+  const wrapperRefCallback = useCallback(
+    (element: HTMLElement | null) => {
+      if (element) {
+        wrapperRef.current = element;
+        observer.observe(element);
+      }
+    },
+    [observer],
+  );
+
+  return {
+    isLabelOverflowing,
+    isValueOverflowing,
+    wrapperRef: wrapperRefCallback,
+  };
 }
@@ -214,64 +214,90 @@ svg.badgeIcon {
 }

 .fieldList {
+  --cols: 4;
+
+  position: relative;
  display: grid;
-  grid-template-columns: 160px 1fr;
-  column-gap: 12px;
+  grid-template-columns: repeat(var(--cols), 1fr);
+  gap: 4px;
  margin: 16px 0;
-  border-top: 0.5px solid var(--color-border-primary);

  @container (width < 420px) {
-    grid-template-columns: 100px 1fr;
+    --cols: 2;
  }
 }

-.fieldRow {
-  display: grid;
-  grid-column: 1 / -1;
-  align-items: start;
-  grid-template-columns: subgrid;
-  padding: 8px;
-  border-bottom: 0.5px solid var(--color-border-primary);
+.fieldItem {
+  --col-span: 1;

-  > :is(dt, dd) {
-    &:not(.fieldShowAll) {
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      overflow: hidden;
-      text-overflow: ellipsis;
+  grid-column: span var(--col-span);
+  position: relative;
+
+  @for $col from 2 through 4 {
+    &[data-cols='#{$col}'] {
+      --col-span: #{$col};
    }
  }

-  > dt {
-    color: var(--color-text-secondary);
+  dt {
+    font-weight: normal;
  }

-  > dd {
-    display: flex;
-    align-items: center;
-    gap: 4px;
+  dd {
+    font-weight: 500;
  }

-  a {
-    color: inherit;
-    text-decoration: none;
+  :is(dt, dd) {
+    text-overflow: initial;

-    &:hover,
-    &:focus {
-      text-decoration: underline;
+    // Override the MiniCard link styles
+    a {
+      color: inherit;
+      font-weight: inherit;
+
+      &:hover,
+      &:focus {
+        color: inherit;
+        text-decoration: underline;
+      }
    }
  }
 }

 .fieldVerified {
  background-color: var(--color-bg-success-softer);
+
+  dt {
+    padding-right: 24px;
+  }
 }

 .fieldVerifiedIcon {
  width: 16px;
  height: 16px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.fieldOverflowButton {
+  --default-bg-color: var(--color-bg-secondary-solid);
+  --hover-bg-color: color-mix(
+    in oklab,
+    var(--color-bg-brand-base),
+    var(--default-bg-color) var(--overlay-strength-brand)
+  );
+
+  position: absolute;
+  right: 8px;
+  padding: 0 2px;
+  transition: background-color 0.2s ease-in-out;
+  border: 2px solid var(--color-bg-primary);
+
+  > svg {
+    width: 16px;
+    height: 12px;
+  }
 }

 .fieldNumbersWrapper {
@@ -5,23 +5,15 @@ import { FormattedMessage } from 'react-intl';
 import type { NavLinkProps } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';

-import { useLayout } from '@/mastodon/hooks/useLayout';
-
 import { isRedesignEnabled } from '../common';

 import classes from './redesign.module.scss';

 export const AccountTabs: FC<{ acct: string }> = ({ acct }) => {
-  const { layout } = useLayout();
  if (isRedesignEnabled()) {
    return (
      <div className={classes.tabs}>
-        {layout !== 'single-column' && (
-          <NavLink exact to={`/@${acct}/about`}>
-            <FormattedMessage id='account.about' defaultMessage='About' />
-          </NavLink>
-        )}
-        <NavLink isActive={isActive} to={`/@${acct}/posts`}>
+        <NavLink isActive={isActive} to={`/@${acct}`}>
          <FormattedMessage id='account.activity' defaultMessage='Activity' />
        </NavLink>
        <NavLink exact to={`/@${acct}/media`}>
@@ -0,0 +1,38 @@
+import type { Key } from 'react';
+import { useCallback } from 'react';
+
+import htmlConfig from '@/config/html-tags.json';
+import type { OnElementHandler } from '@/mastodon/utils/html';
+
+export function useFieldHtml(
+  hasCustomEmoji: boolean,
+  onElement?: OnElementHandler,
+): OnElementHandler {
+  return useCallback(
+    (element, props, children, extra) => {
+      if (element instanceof HTMLAnchorElement) {
+        // Don't allow custom emoji and links in the same field to prevent verification spoofing.
+        if (hasCustomEmoji) {
+          return (
+            <span {...filterAttributesForSpan(props)} key={props.key as Key}>
+              {children}
+            </span>
+          );
+        }
+        return onElement?.(element, props, children, extra);
+      }
+      return undefined;
+    },
+    [onElement, hasCustomEmoji],
+  );
+}
+
+function filterAttributesForSpan(props: Record<string, unknown>) {
+  const validAttributes: Record<string, unknown> = {};
+  for (const key of Object.keys(props)) {
+    if (key in htmlConfig.tags.span.attributes) {
+      validAttributes[key] = props[key];
+    }
+  }
+  return validAttributes;
+}
@@ -0,0 +1,44 @@
+import type { FC } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { EmojiHTML } from '@/mastodon/components/emoji/html';
+
+import type { AccountField } from '../common';
+import { useFieldHtml } from '../hooks/useFieldHtml';
+
+import classes from './styles.module.css';
+
+export const AccountFieldModal: FC<{
+  onClose: () => void;
+  field: AccountField;
+}> = ({ onClose, field }) => {
+  const handleLabelElement = useFieldHtml(field.nameHasEmojis);
+  const handleValueElement = useFieldHtml(field.valueHasEmojis);
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__confirmation'>
+          <EmojiHTML
+            as='p'
+            htmlString={field.name_emojified}
+            onElement={handleLabelElement}
+          />
+          <EmojiHTML
+            as='p'
+            htmlString={field.value_emojified}
+            onElement={handleValueElement}
+            className={classes.fieldValue}
+          />
+        </div>
+      </div>
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          <button onClick={onClose} className='link-button' type='button'>
+            <FormattedMessage id='lightbox.close' defaultMessage='Close' />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';

 import { ConfirmationModal } from '../../ui/components/confirmation_modals';

-import classes from './modals.module.css';
+import classes from './styles.module.css';

 const messages = defineMessages({
  newTitle: {
@@ -19,3 +19,9 @@
  outline: var(--outline-focus-default);
  outline-offset: 2px;
 }
+
+.fieldValue {
+  color: var(--color-text-primary);
+  font-weight: 600;
+  margin-top: 4px;
+}
@@ -2,15 +2,17 @@
  display: flex;
  align-items: center;
  gap: 16px;
-  margin-inline: 10px;
-  padding-inline-end: 5px;
-  border-bottom: 1px solid var(--color-border-primary);
+  padding-inline: 16px;
+
+  &:not(.wrapperWithoutBorder) {
+    border-bottom: 1px solid var(--color-border-primary);
+  }
 }

 .content {
  position: relative;
  flex-grow: 1;
-  padding: 15px 5px;
+  padding-block: 15px;
 }

 .link {
@@ -67,13 +67,18 @@ export const CollectionMetaData: React.FC<{

 export const CollectionListItem: React.FC<{
  collection: ApiCollectionJSON;
-}> = ({ collection }) => {
+  withoutBorder?: boolean;
+}> = ({ collection, withoutBorder }) => {
  const { id, name } = collection;
  const linkId = useId();

  return (
    <article
-      className={classNames(classes.wrapper, 'focusable')}
+      className={classNames(
+        classes.wrapper,
+        'focusable',
+        withoutBorder && classes.wrapperWithoutBorder,
+      )}
      tabIndex={-1}
      aria-labelledby={linkId}
    >
@@ -2,11 +2,16 @@ import { useCallback, useMemo } from 'react';

 import { defineMessages, useIntl } from 'react-intl';

+import { matchPath } from 'react-router';
+
+import { useAccount } from '@/mastodon/hooks/useAccount';
 import MoreVertIcon from '@/material-icons/400-24px/more_vert.svg?react';
 import { openModal } from 'mastodon/actions/modal';
 import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
 import { Dropdown } from 'mastodon/components/dropdown_menu';
 import { IconButton } from 'mastodon/components/icon_button';
+import { me } from 'mastodon/initial_state';
+import type { MenuItem } from 'mastodon/models/dropdown_menu';
 import { useAppDispatch } from 'mastodon/store';

 import { messages as editorMessages } from '../editor';
@@ -16,10 +21,18 @@ const messages = defineMessages({
    id: 'collections.view_collection',
    defaultMessage: 'View collection',
  },
+  viewOtherCollections: {
+    id: 'collections.view_other_collections_by_user',
+    defaultMessage: 'View other collections by this user',
+  },
  delete: {
    id: 'collections.delete_collection',
    defaultMessage: 'Delete collection',
  },
+  report: {
+    id: 'collections.report_collection',
+    defaultMessage: 'Report this collection',
+  },
  more: { id: 'status.more', defaultMessage: 'More' },
 });

@@ -31,9 +44,11 @@ export const CollectionMenu: React.FC<{
  const dispatch = useAppDispatch();
  const intl = useIntl();

-  const { id, name } = collection;
+  const { id, name, account_id } = collection;
+  const isOwnCollection = account_id === me;
+  const ownerAccount = useAccount(account_id);

-  const handleDeleteClick = useCallback(() => {
+  const openDeleteConfirmation = useCallback(() => {
    dispatch(
      openModal({
        modalType: 'CONFIRM_DELETE_COLLECTION',
@@ -45,34 +60,83 @@ export const CollectionMenu: React.FC<{
    );
  }, [dispatch, id, name]);

-  const menu = useMemo(() => {
-    const commonItems = [
-      {
-        text: intl.formatMessage(editorMessages.manageAccounts),
-        to: `/collections/${id}/edit`,
-      },
-      {
-        text: intl.formatMessage(editorMessages.editDetails),
-        to: `/collections/${id}/edit/details`,
-      },
-      null,
-      {
-        text: intl.formatMessage(messages.delete),
-        action: handleDeleteClick,
-        dangerous: true,
-      },
-    ];
+  const openReportModal = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'REPORT_COLLECTION',
+        modalProps: {
+          collection,
+        },
+      }),
+    );
+  }, [collection, dispatch]);

-    if (context === 'list') {
-      return [
-        { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
+  const menu = useMemo(() => {
+    if (isOwnCollection) {
+      const commonItems: MenuItem[] = [
+        {
+          text: intl.formatMessage(editorMessages.manageAccounts),
+          to: `/collections/${id}/edit`,
+        },
+        {
+          text: intl.formatMessage(editorMessages.editDetails),
+          to: `/collections/${id}/edit/details`,
+        },
        null,
-        ...commonItems,
+        {
+          text: intl.formatMessage(messages.delete),
+          action: openDeleteConfirmation,
+          dangerous: true,
+        },
      ];
+
+      if (context === 'list') {
+        return [
+          { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
+          null,
+          ...commonItems,
+        ];
+      } else {
+        return commonItems;
+      }
+    } else if (ownerAccount) {
+      const items: MenuItem[] = [
+        {
+          text: intl.formatMessage(messages.report),
+          action: openReportModal,
+        },
+      ];
+      const featuredCollectionsPath = `/@${ownerAccount.acct}/featured`;
+      // Don't show menu link to featured collections while on that very page
+      if (
+        !matchPath(location.pathname, {
+          path: featuredCollectionsPath,
+          exact: true,
+        })
+      ) {
+        items.unshift(
+          ...[
+            {
+              text: intl.formatMessage(messages.viewOtherCollections),
+              to: featuredCollectionsPath,
+            },
+            null,
+          ],
+        );
+      }
+      return items;
    } else {
-      return commonItems;
+      return [];
    }
-  }, [intl, id, handleDeleteClick, context]);
+  }, [
+    isOwnCollection,
+    intl,
+    id,
+    openDeleteConfirmation,
+    context,
+    ownerAccount,
+    openReportModal,
+  ]);

  return (
    <Dropdown scrollKey='collections' items={menu}>
@@ -5,6 +5,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router';

+import { useRelationship } from '@/mastodon/hooks/useRelationship';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import ShareIcon from '@/material-icons/400-24px/share.svg?react';
 import { showAlert } from 'mastodon/actions/alerts';
@@ -79,7 +80,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
  collection,
 }) => {
  const intl = useIntl();
-  const { name, description, tag } = collection;
+  const { name, description, tag, account_id } = collection;
  const dispatch = useAppDispatch();

  const handleShare = useCallback(() => {
@@ -114,7 +115,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
      {description && <p className={classes.description}>{description}</p>}
      <AuthorNote id={collection.account_id} />
      <CollectionMetaData
-        extended
+        extended={account_id === me}
        collection={collection}
        className={classes.metaData}
      />
@@ -123,6 +124,28 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
  );
 };

+const CollectionAccountItem: React.FC<{
+  accountId: string | undefined;
+  collectionOwnerId: string;
+}> = ({ accountId, collectionOwnerId }) => {
+  const relationship = useRelationship(accountId);
+
+  if (!accountId) {
+    return null;
+  }
+
+  // When viewing your own collection, only show the Follow button
+  // for accounts you're not following (anymore).
+  // Otherwise, always show the follow button in its various states.
+  const withoutButton =
+    accountId === me ||
+    !relationship ||
+    (collectionOwnerId === me &&
+      (relationship.following || relationship.requested));
+
+  return <Account minimal={withoutButton} withMenu={false} id={accountId} />;
+};
+
 export const CollectionDetailPage: React.FC<{
  multiColumn?: boolean;
 }> = ({ multiColumn }) => {
@@ -163,11 +186,13 @@ export const CollectionDetailPage: React.FC<{
          collection ? <CollectionHeader collection={collection} /> : null
        }
      >
-        {collection?.items.map(({ account_id }) =>
-          account_id ? (
-            <Account key={account_id} minimal id={account_id} />
-          ) : null,
-        )}
+        {collection?.items.map(({ account_id }) => (
+          <CollectionAccountItem
+            key={account_id}
+            accountId={account_id}
+            collectionOwnerId={collection.account_id}
+          />
+        ))}
      </ScrollableList>

      <Helmet>
@@ -14,7 +14,7 @@ import { Icon } from 'mastodon/components/icon';
 import ScrollableList from 'mastodon/components/scrollable_list';
 import {
  fetchAccountCollections,
-  selectMyCollections,
+  selectAccountCollections,
 } from 'mastodon/reducers/slices/collections';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';

@@ -31,7 +31,9 @@ export const Collections: React.FC<{
  const dispatch = useAppDispatch();
  const intl = useIntl();
  const me = useAppSelector((state) => state.meta.get('me') as string);
-  const { collections, status } = useAppSelector(selectMyCollections);
+  const { collections, status } = useAppSelector((state) =>
+    selectAccountCollections(state, me),
+  );

  useEffect(() => {
    void dispatch(fetchAccountCollections({ accountId: me }));
@@ -1,121 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef } from 'react';
-
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-
-import { createSelector } from '@reduxjs/toolkit';
-import { OrderedSet, List as ImmutableList } from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { shallowEqual } from 'react-redux';
-
-import Toggle from 'react-toggle';
-
-import { fetchAccount } from 'mastodon/actions/accounts';
-import { Button } from 'mastodon/components/button';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-const messages = defineMessages({
-  placeholder: { id: 'report.placeholder', defaultMessage: 'Type or paste additional comments' },
-});
-
-const selectRepliedToAccountIds = createSelector(
-  [
-    (state) => state.get('statuses'),
-    (_, statusIds) => statusIds,
-  ],
-  (statusesMap, statusIds) => statusIds.map((statusId) => statusesMap.getIn([statusId, 'in_reply_to_account_id'])),
-  {
-    resultEqualityCheck: shallowEqual,
-  }
-);
-
-const Comment = ({ comment, domain, statusIds, isRemote, isSubmitting, selectedDomains, onSubmit, onChangeComment, onToggleDomain }) => {
-  const intl = useIntl();
-
-  const dispatch = useAppDispatch();
-  const loadedRef = useRef(false);
-
-  const handleClick = useCallback(() => onSubmit(), [onSubmit]);
-  const handleChange = useCallback((e) => onChangeComment(e.target.value), [onChangeComment]);
-  const handleToggleDomain = useCallback(e => onToggleDomain(e.target.value, e.target.checked), [onToggleDomain]);
-
-  const handleKeyDown = useCallback((e) => {
-    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      handleClick();
-    }
-  }, [handleClick]);
-
-  // Memoize accountIds since we don't want it to trigger `useEffect` on each render
-  const accountIds = useAppSelector((state) => domain ? selectRepliedToAccountIds(state, statusIds) : ImmutableList());
-
-  // While we could memoize `availableDomains`, it is pretty inexpensive to recompute
-  const accountsMap = useAppSelector((state) => state.get('accounts'));
-  const availableDomains = domain ? OrderedSet([domain]).union(accountIds.map((accountId) => accountsMap.getIn([accountId, 'acct'], '').split('@')[1]).filter(domain => !!domain)) : OrderedSet();
-
-  useEffect(() => {
-    if (loadedRef.current) {
-      return;
-    }
-
-    loadedRef.current = true;
-
-    // First, pre-select known domains
-    availableDomains.forEach((domain) => {
-      onToggleDomain(domain, true);
-    });
-
-    // Then, fetch missing replied-to accounts
-    const unknownAccounts = OrderedSet(accountIds.filter(accountId => accountId && !accountsMap.has(accountId)));
-    unknownAccounts.forEach((accountId) => {
-      dispatch(fetchAccount(accountId));
-    });
-  });
-
-  return (
-    <>
-      <h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
-
-      <textarea
-        className='report-dialog-modal__textarea'
-        placeholder={intl.formatMessage(messages.placeholder)}
-        value={comment}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        disabled={isSubmitting}
-      />
-
-      {isRemote && (
-        <>
-          <p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
-
-          { availableDomains.map((domain) => (
-            <label className='report-dialog-modal__toggle' key={`toggle-${domain}`}>
-              <Toggle checked={selectedDomains.includes(domain)} disabled={isSubmitting} onChange={handleToggleDomain} value={domain} />
-              <FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} />
-            </label>
-          ))}
-        </>
-      )}
-
-      <div className='flex-spacer' />
-
-      <div className='report-dialog-modal__actions'>
-        <Button onClick={handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
-      </div>
-    </>
-  );
-};
-
-Comment.propTypes = {
-  comment: PropTypes.string.isRequired,
-  domain: PropTypes.string,
-  statusIds: ImmutablePropTypes.list.isRequired,
-  isRemote: PropTypes.bool,
-  isSubmitting: PropTypes.bool,
-  selectedDomains: ImmutablePropTypes.set.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onChangeComment: PropTypes.func.isRequired,
-  onToggleDomain: PropTypes.func.isRequired,
-};
-
-export default Comment;
@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useId, useRef } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import type { Map } from 'immutable';
+import { OrderedSet } from 'immutable';
+import { shallowEqual } from 'react-redux';
+
+import Toggle from 'react-toggle';
+
+import { fetchAccount } from 'mastodon/actions/accounts';
+import { Button } from 'mastodon/components/button';
+import type { Status } from 'mastodon/models/status';
+import type { RootState } from 'mastodon/store';
+import {
+  createAppSelector,
+  useAppDispatch,
+  useAppSelector,
+} from 'mastodon/store';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'report.placeholder',
+    defaultMessage: 'Type or paste additional comments',
+  },
+});
+
+const selectRepliedToAccountIds = createAppSelector(
+  [
+    (state: RootState) => state.statuses,
+    (_: unknown, statusIds: string[]) => statusIds,
+  ],
+  (statusesMap: Map<string, Status>, statusIds: string[]) =>
+    statusIds.map(
+      (statusId) =>
+        statusesMap.getIn([statusId, 'in_reply_to_account_id']) as string,
+    ),
+  {
+    memoizeOptions: {
+      resultEqualityCheck: shallowEqual,
+    },
+  },
+);
+
+interface Props {
+  modalTitle?: React.ReactNode;
+  comment: string;
+  domain?: string;
+  statusIds: string[];
+  isRemote?: boolean;
+  isSubmitting?: boolean;
+  selectedDomains: string[];
+  submitError?: React.ReactNode;
+  onSubmit: () => void;
+  onChangeComment: (newComment: string) => void;
+  onToggleDomain: (toggledDomain: string, checked: boolean) => void;
+}
+
+const Comment: React.FC<Props> = ({
+  modalTitle,
+  comment,
+  domain,
+  statusIds,
+  isRemote,
+  isSubmitting,
+  selectedDomains,
+  submitError,
+  onSubmit,
+  onChangeComment,
+  onToggleDomain,
+}) => {
+  const intl = useIntl();
+
+  const dispatch = useAppDispatch();
+  const loadedRef = useRef(false);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit();
+  }, [onSubmit]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChangeComment(e.target.value);
+    },
+    [onChangeComment],
+  );
+
+  const handleToggleDomain = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onToggleDomain(e.target.value, e.target.checked);
+    },
+    [onToggleDomain],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  // Memoize accountIds since we don't want it to trigger `useEffect` on each render
+  const accountIds = useAppSelector((state) =>
+    domain ? selectRepliedToAccountIds(state, statusIds) : [],
+  );
+
+  // While we could memoize `availableDomains`, it is pretty inexpensive to recompute
+  const accountsMap = useAppSelector((state) => state.accounts);
+
+  const availableDomains = domain
+    ? OrderedSet([domain]).union(
+        accountIds
+          .map(
+            (accountId) =>
+              (accountsMap.getIn([accountId, 'acct'], '') as string).split(
+                '@',
+              )[1],
+          )
+          .filter((domain): domain is string => !!domain),
+      )
+    : OrderedSet<string>();
+
+  useEffect(() => {
+    if (loadedRef.current) {
+      return;
+    }
+
+    loadedRef.current = true;
+
+    // First, pre-select known domains
+    availableDomains.forEach((domain) => {
+      onToggleDomain(domain, true);
+    });
+
+    // Then, fetch missing replied-to accounts
+    const unknownAccounts = OrderedSet(
+      accountIds.filter(
+        (accountId) => accountId && !accountsMap.has(accountId),
+      ),
+    );
+    unknownAccounts.forEach((accountId) => {
+      dispatch(fetchAccount(accountId));
+    });
+  });
+
+  const titleId = useId();
+
+  return (
+    <>
+      <h3 className='report-dialog-modal__title' id={titleId}>
+        {modalTitle ?? (
+          <FormattedMessage
+            id='report.comment.title'
+            defaultMessage='Is there anything else you think we should know?'
+          />
+        )}
+      </h3>
+
+      <textarea
+        className='report-dialog-modal__textarea'
+        placeholder={intl.formatMessage(messages.placeholder)}
+        aria-labelledby={titleId}
+        value={comment}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        disabled={isSubmitting}
+      />
+
+      {isRemote && (
+        <>
+          <p className='report-dialog-modal__lead'>
+            <FormattedMessage
+              id='report.forward_hint'
+              defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?'
+            />
+          </p>
+
+          {availableDomains.map((domain) => (
+            <label
+              className='report-dialog-modal__toggle'
+              key={`toggle-${domain}`}
+              htmlFor={`input-${domain}`}
+            >
+              <Toggle
+                checked={selectedDomains.includes(domain)}
+                disabled={isSubmitting}
+                onChange={handleToggleDomain}
+                value={domain}
+                id={`input-${domain}`}
+              />
+              <FormattedMessage
+                id='report.forward'
+                defaultMessage='Forward to {target}'
+                values={{ target: domain }}
+              />
+            </label>
+          ))}
+        </>
+      )}
+
+      {submitError}
+
+      <div className='flex-spacer' />
+
+      <div className='report-dialog-modal__actions'>
+        <Button onClick={handleSubmit} disabled={isSubmitting}>
+          <FormattedMessage id='report.submit' defaultMessage='Submit report' />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Comment;
@@ -10,6 +10,7 @@ import {
  BlockModal,
  DomainBlockModal,
  ReportModal,
+  ReportCollectionModal,
  EmbedModal,
  ListAdder,
  CompareHistoryModal,
@@ -77,6 +78,7 @@ export const MODAL_COMPONENTS = {
  'BLOCK': BlockModal,
  'DOMAIN_BLOCK': DomainBlockModal,
  'REPORT': ReportModal,
+  'REPORT_COLLECTION': ReportCollectionModal,
  'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
  'EMBED': EmbedModal,
  'FOCAL_POINT': () => Promise.resolve({ default: AltTextModal }),
@@ -90,6 +92,7 @@ export const MODAL_COMPONENTS = {
  'ANNUAL_REPORT': AnnualReportModal,
  'COMPOSE_PRIVACY': () => Promise.resolve({ default: VisibilityModal }),
  'ACCOUNT_NOTE': () => import('@/mastodon/features/account_timeline/modals/note_modal').then(module => ({ default: module.AccountNoteModal })),
+  'ACCOUNT_FIELD_OVERFLOW': () => import('@/mastodon/features/account_timeline/modals/field_modal').then(module => ({ default: module.AccountFieldModal })),
  'ACCOUNT_EDIT_NAME': () => import('@/mastodon/features/account_edit/components/name_modal').then(module => ({ default: module.NameModal })),
  'ACCOUNT_EDIT_BIO': () => import('@/mastodon/features/account_edit/components/bio_modal').then(module => ({ default: module.BioModal })),
 };
@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { Callout } from '@/mastodon/components/callout';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { submitReport } from 'mastodon/actions/reports';
+import { fetchServer } from 'mastodon/actions/server';
+import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
+import { Button } from 'mastodon/components/button';
+import { IconButton } from 'mastodon/components/icon_button';
+import { useAccount } from 'mastodon/hooks/useAccount';
+import { useAppDispatch } from 'mastodon/store';
+
+import Comment from '../../report/comment';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+const CollectionThanks: React.FC<{
+  onClose: () => void;
+}> = ({ onClose }) => {
+  return (
+    <>
+      <h3 className='report-dialog-modal__title'>
+        <FormattedMessage
+          id='report.thanks.title_actionable'
+          defaultMessage="Thanks for reporting, we'll look into this."
+        />
+      </h3>
+
+      <div className='flex-spacer' />
+
+      <div className='report-dialog-modal__actions'>
+        <Button onClick={onClose}>
+          <FormattedMessage id='report.close' defaultMessage='Done' />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export const ReportCollectionModal: React.FC<{
+  collection: ApiCollectionJSON;
+  onClose: () => void;
+}> = ({ collection, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const { id: collectionId, name, account_id } = collection;
+  const account = useAccount(account_id);
+
+  useEffect(() => {
+    dispatch(fetchServer());
+  }, [dispatch]);
+
+  const [submitState, setSubmitState] = useState<
+    'idle' | 'submitting' | 'submitted' | 'error'
+  >('idle');
+
+  const [step, setStep] = useState<'comment' | 'thanks'>('comment');
+
+  const [comment, setComment] = useState('');
+  const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
+
+  const handleDomainToggle = useCallback((domain: string, checked: boolean) => {
+    if (checked) {
+      setSelectedDomains((domains) => [...domains, domain]);
+    } else {
+      setSelectedDomains((domains) => domains.filter((d) => d !== domain));
+    }
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    setSubmitState('submitting');
+
+    dispatch(
+      submitReport(
+        {
+          account_id,
+          status_ids: [],
+          collection_ids: [collectionId],
+          forward_to_domains: selectedDomains,
+          comment,
+          forward: selectedDomains.length > 0,
+          category: 'spam',
+        },
+        () => {
+          setSubmitState('submitted');
+          setStep('thanks');
+        },
+        () => {
+          setSubmitState('error');
+        },
+      ),
+    );
+  }, [account_id, comment, dispatch, collectionId, selectedDomains]);
+
+  if (!account) {
+    return null;
+  }
+
+  const domain = account.get('acct').split('@')[1];
+  const isRemote = !!domain;
+
+  let stepComponent;
+
+  switch (step) {
+    case 'comment':
+      stepComponent = (
+        <Comment
+          modalTitle={
+            <FormattedMessage
+              id='report.collection_comment'
+              defaultMessage='Why do you want to report this collection?'
+            />
+          }
+          submitError={
+            submitState === 'error' && (
+              <Callout
+                variant='error'
+                title={
+                  <FormattedMessage
+                    id='report.submission_error'
+                    defaultMessage='Report could not be submitted'
+                  />
+                }
+              >
+                <FormattedMessage
+                  id='report.submission_error_details'
+                  defaultMessage='Please check your network connection and try again later.'
+                />
+              </Callout>
+            )
+          }
+          onSubmit={handleSubmit}
+          isSubmitting={submitState === 'submitting'}
+          isRemote={isRemote}
+          comment={comment}
+          domain={domain}
+          onChangeComment={setComment}
+          statusIds={[]}
+          selectedDomains={selectedDomains}
+          onToggleDomain={handleDomainToggle}
+        />
+      );
+      break;
+    case 'thanks':
+      stepComponent = <CollectionThanks onClose={onClose} />;
+  }
+
+  return (
+    <div className='modal-root__modal report-dialog-modal'>
+      <div className='report-modal__target'>
+        <IconButton
+          className='report-modal__close'
+          title={intl.formatMessage(messages.close)}
+          icon='times'
+          iconComponent={CloseIcon}
+          onClick={onClose}
+        />
+        <FormattedMessage
+          id='report.target'
+          defaultMessage='Report {target}'
+          values={{ target: <strong>{name}</strong> }}
+        />
+      </div>
+
+      <div className='report-dialog-modal__container'>{stepComponent}</div>
+    </div>
+  );
+};
@@ -22,7 +22,7 @@ import { identityContextPropShape, withIdentity } from 'mastodon/identity_contex
 import { layoutFromWindow } from 'mastodon/is_mobile';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 import { checkAnnualReport } from '@/mastodon/reducers/slices/annual_report';
-import { isClientFeatureEnabled, isServerFeatureEnabled } from '@/mastodon/utils/environment';
+import { isClientFeatureEnabled } from '@/mastodon/utils/environment';

 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
@@ -80,7 +80,6 @@ import {
  PrivacyPolicy,
  TermsOfService,
  AccountFeatured,
-  AccountAbout,
  AccountEdit,
  AccountEditFeaturedTags,
  Quotes,
@@ -166,36 +165,6 @@ class SwitchingColumnsArea extends PureComponent {
    }

    const profileRedesignRoutes = [];
-    if (isServerFeatureEnabled('profile_redesign')) {
-      profileRedesignRoutes.push(
-        <WrappedRoute key="posts" path={['/@:acct/posts', '/accounts/:id/posts']} exact component={AccountTimeline} content={children} />,
-      );
-      // Check if we're in single-column mode. Confusingly, the singleColumn prop includes mobile.
-      if (this.props.layout === 'single-column') {
-        // When in single column mode (desktop w/o advanced view), redirect both the root and about to the posts tab.
-        profileRedesignRoutes.push(
-          <Redirect key="acct-redirect" from='/@:acct' to='/@:acct/posts' exact />,
-          <Redirect key="id-redirect" from='/accounts/:id' to='/accounts/:id/posts' exact />,
-          <Redirect key="about-acct-redirect" from='/@:acct/about' to='/@:acct/posts' exact />,
-          <Redirect key="about-id-redirect" from='/accounts/:id/about' to='/accounts/:id/posts' exact />,
-        );
-      } else {
-        // Otherwise, provide and redirect to the /about page.
-        profileRedesignRoutes.push(
-          <WrappedRoute key="about" path={['/@:acct/about', '/accounts/:id/about']} component={AccountAbout} content={children} />,
-          <Redirect key="acct-redirect" from='/@:acct' to='/@:acct/about' exact />,
-          <Redirect key="id-redirect" from='/accounts/:id' to='/accounts/:id/about' exact />
-        );
-      }
-    } else {
-      profileRedesignRoutes.push(
-        <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />,
-        // If the redesign is not enabled but someone shares an /about link, redirect to the root.
-        <Redirect key="about-acct-redirect" from='/@:acct/about' to='/@:acct' exact />,
-        <Redirect key="about-id-redirect" from='/accounts/:id/about' to='/accounts/:id' exact />
-      );
-    }
-
    if (isClientFeatureEnabled('profile_editing')) {
      profileRedesignRoutes.push(
        <WrappedRoute key="edit" path='/profile/edit' component={AccountEdit} content={children} />,
@@ -257,6 +226,7 @@ class SwitchingColumnsArea extends PureComponent {

            {...profileRedesignRoutes}

+            <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
            <WrappedRoute path={['/@:acct/featured', '/accounts/:id/featured']} component={AccountFeatured} content={children} />
            <WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
            <WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
@@ -93,11 +93,6 @@ export function AccountFeatured() {
  return import('../../account_featured');
 }

-export function AccountAbout() {
-  return import('../../account_about')
-    .then((module) => ({ default: module.AccountAbout }));
-}
-
 export function AccountEdit() {
  return import('../../account_edit')
  .then((module) => ({ default: module.AccountEdit }));
@@ -172,6 +167,11 @@ export function ReportModal () {
  return import('../components/report_modal');
 }

+export function ReportCollectionModal () {
+  return import('../components/report_collection_modal')
+    .then((module) => ({ default: module.ReportCollectionModal }));;
+}
+
 export function IgnoreNotificationsModal () {
  return import('../components/ignore_notifications_modal');
 }