Hide account list in sensitive collections (#38081)

2026-03-29 11:11:11 +02:00 · 2026-03-05 16:43:57 +01:00
parent 0f37901955
commit 3557be5d4d
9 changed files with 267 additions and 62 deletions
--- a/app/javascript/mastodon/components/account/account.stories.tsx
+++ b/app/javascript/mastodon/components/account/account.stories.tsx
@@ -50,6 +50,10 @@ const meta = {
      type: 'boolean',
      description: 'Whether to display the account menu or not',
    },
+    withBorder: {
+      type: 'boolean',
+      description: 'Whether to display the bottom border or not',
+    },
  },
  args: {
    name: 'Test User',
@@ -60,6 +64,7 @@ const meta = {
    defaultAction: 'mute',
    withBio: false,
    withMenu: true,
+    withBorder: true,
  },
  parameters: {
    state: {
@@ -103,6 +108,12 @@ export const NoMenu: Story = {
  },
 };

+export const NoBorder: Story = {
+  args: {
+    withBorder: false,
+  },
+};
+
 export const Blocked: Story = {
  args: {
    defaultAction: 'block',
--- a/app/javascript/mastodon/components/account/index.tsx
+++ b/app/javascript/mastodon/components/account/index.tsx
@@ -73,6 +73,7 @@ interface AccountProps {
  defaultAction?: 'block' | 'mute';
  withBio?: boolean;
  withMenu?: boolean;
+  withBorder?: boolean;
  extraAccountInfo?: React.ReactNode;
  children?: React.ReactNode;
 }
@@ -85,6 +86,7 @@ export const Account: React.FC<AccountProps> = ({
  defaultAction,
  withBio,
  withMenu = true,
+  withBorder = true,
  extraAccountInfo,
  children,
 }) => {
@@ -290,6 +292,7 @@ export const Account: React.FC<AccountProps> = ({
    <div
      className={classNames('account', {
        'account--minimal': minimal,
+        'account--without-border': !withBorder,
      })}
    >
      <div
--- a/app/javascript/mastodon/components/scrollable_list/components.tsx
+++ b/app/javascript/mastodon/components/scrollable_list/components.tsx
@@ -36,7 +36,7 @@ export const ItemList = forwardRef<
    emptyMessage?: React.ReactNode;
  }
 >(({ isLoading, emptyMessage, className, children, ...otherProps }, ref) => {
-  if (Children.count(children) === 0 && emptyMessage) {
+  if (!isLoading && Children.count(children) === 0 && emptyMessage) {
    return <div className='empty-column-indicator'>{emptyMessage}</div>;
  }

--- a/app/javascript/mastodon/features/collections/detail/collection_list.tsx
+++ b/app/javascript/mastodon/features/collections/detail/collection_list.tsx
@@ -0,0 +1,212 @@
+import { Fragment, useCallback, useRef, useState } from 'react';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { Button } from '@/mastodon/components/button';
+import { useRelationship } from '@/mastodon/hooks/useRelationship';
+import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
+import { Account } from 'mastodon/components/account';
+import { DisplayName } from 'mastodon/components/display_name';
+import {
+  Article,
+  ItemList,
+} from 'mastodon/components/scrollable_list/components';
+import { useAccount } from 'mastodon/hooks/useAccount';
+import { me } from 'mastodon/initial_state';
+
+import classes from './styles.module.scss';
+
+const messages = defineMessages({
+  empty: {
+    id: 'collections.accounts.empty_title',
+    defaultMessage: 'This collection is empty',
+  },
+  accounts: {
+    id: 'collections.detail.accounts_heading',
+    defaultMessage: 'Accounts',
+  },
+});
+
+const SimpleAuthorName: React.FC<{ id: string }> = ({ id }) => {
+  const account = useAccount(id);
+  return <DisplayName account={account} variant='simple' />;
+};
+
+const AccountItem: React.FC<{
+  accountId: string | undefined;
+  collectionOwnerId: string;
+  withBorder?: boolean;
+}> = ({ accountId, withBorder = true, 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}
+      withBorder={withBorder}
+      id={accountId}
+    />
+  );
+};
+
+const SensitiveScreen: React.FC<{
+  sensitive: boolean | undefined;
+  focusTargetRef: React.RefObject<HTMLHeadingElement>;
+  children: React.ReactNode;
+}> = ({ sensitive, focusTargetRef, children }) => {
+  const [isVisible, setIsVisible] = useState(!sensitive);
+
+  const showAnyway = useCallback(() => {
+    setIsVisible(true);
+    setTimeout(() => {
+      focusTargetRef.current?.focus();
+    }, 0);
+  }, [focusTargetRef]);
+
+  if (isVisible) {
+    return children;
+  }
+
+  return (
+    <div className={classes.sensitiveWarning}>
+      <FormattedMessage
+        id='collections.detail.sensitive_note'
+        defaultMessage='This collection contains accounts and content that may be sensitive to some users.'
+        tagName='p'
+      />
+      <Button onClick={showAnyway}>
+        <FormattedMessage
+          id='content_warning.show'
+          defaultMessage='Show anyway'
+          tagName={Fragment}
+        />
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * Returns the collection's account items. If the current user's account
+ * is part of the collection, it will be returned separately.
+ */
+function getCollectionItems(collection: ApiCollectionJSON | undefined) {
+  if (!collection)
+    return {
+      currentUserInCollection: null,
+      items: [],
+    };
+
+  const { account_id, items } = collection;
+
+  const isOwnCollection = account_id === me;
+  const currentUserIndex = items.findIndex(
+    (account) => account.account_id === me,
+  );
+
+  if (isOwnCollection || currentUserIndex === -1) {
+    return {
+      currentUserInCollection: null,
+      items,
+    };
+  } else {
+    return {
+      currentUserInCollection: items.at(currentUserIndex) ?? null,
+      items: items.toSpliced(currentUserIndex, 1),
+    };
+  }
+}
+
+export const CollectionAccountsList: React.FC<{
+  collection?: ApiCollectionJSON;
+  isLoading: boolean;
+}> = ({ collection, isLoading }) => {
+  const intl = useIntl();
+  const listHeadingRef = useRef<HTMLHeadingElement>(null);
+
+  const isOwnCollection = collection?.account_id === me;
+  const { items, currentUserInCollection } = getCollectionItems(collection);
+
+  return (
+    <ItemList
+      isLoading={isLoading}
+      emptyMessage={intl.formatMessage(messages.empty)}
+    >
+      {collection && currentUserInCollection ? (
+        <>
+          <h3 className={classes.columnSubheading}>
+            <FormattedMessage
+              id='collections.detail.author_added_you'
+              defaultMessage='{author} added you to this collection'
+              values={{
+                author: <SimpleAuthorName id={collection.account_id} />,
+              }}
+              tagName={Fragment}
+            />
+          </h3>
+          <Article
+            key={currentUserInCollection.account_id}
+            aria-posinset={1}
+            aria-setsize={items.length}
+          >
+            <AccountItem
+              withBorder={false}
+              accountId={currentUserInCollection.account_id}
+              collectionOwnerId={collection.account_id}
+            />
+          </Article>
+          <h3
+            className={classes.columnSubheading}
+            tabIndex={-1}
+            ref={listHeadingRef}
+          >
+            <FormattedMessage
+              id='collections.detail.other_accounts_in_collection'
+              defaultMessage='Others in this collection:'
+              tagName={Fragment}
+            />
+          </h3>
+        </>
+      ) : (
+        <h3
+          className='column-subheading sr-only'
+          tabIndex={-1}
+          ref={listHeadingRef}
+        >
+          {intl.formatMessage(messages.accounts)}
+        </h3>
+      )}
+      {collection && (
+        <SensitiveScreen
+          sensitive={!isOwnCollection && collection.sensitive}
+          focusTargetRef={listHeadingRef}
+        >
+          {items.map(({ account_id }, index, items) => (
+            <Article
+              key={account_id}
+              aria-posinset={index + (currentUserInCollection ? 2 : 1)}
+              aria-setsize={items.length}
+            >
+              <AccountItem
+                accountId={account_id}
+                collectionOwnerId={collection.account_id}
+              />
+            </Article>
+          ))}
+        </SensitiveScreen>
+      )}
+    </ItemList>
+  );
+};
--- a/app/javascript/mastodon/features/collections/detail/index.tsx
+++ b/app/javascript/mastodon/features/collections/detail/index.tsx
@@ -6,11 +6,9 @@ import { Helmet } from 'react-helmet';
 import { useLocation, useParams } from 'react-router';

 import { openModal } from '@/mastodon/actions/modal';
-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 type { ApiCollectionJSON } from 'mastodon/api_types/collections';
-import { Account } from 'mastodon/components/account';
 import { Avatar } from 'mastodon/components/avatar';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
@@ -19,26 +17,19 @@ import {
  LinkedDisplayName,
 } from 'mastodon/components/display_name';
 import { IconButton } from 'mastodon/components/icon_button';
-import {
-  Article,
-  ItemList,
-  Scrollable,
-} from 'mastodon/components/scrollable_list/components';
+import { Scrollable } from 'mastodon/components/scrollable_list/components';
 import { Tag } from 'mastodon/components/tags/tag';
 import { useAccount } from 'mastodon/hooks/useAccount';
 import { me } from 'mastodon/initial_state';
 import { fetchCollection } from 'mastodon/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';

+import { CollectionAccountsList } from './collection_list';
 import { CollectionMetaData } from './collection_list_item';
 import { CollectionMenu } from './collection_menu';
 import classes from './styles.module.scss';

 const messages = defineMessages({
-  empty: {
-    id: 'collections.accounts.empty_title',
-    defaultMessage: 'This collection is empty',
-  },
  loading: {
    id: 'collections.detail.loading',
    defaultMessage: 'Loading collection…',
@@ -47,10 +38,6 @@ const messages = defineMessages({
    id: 'collections.detail.share',
    defaultMessage: 'Share this collection',
  },
-  accounts: {
-    id: 'collections.detail.accounts_heading',
-    defaultMessage: 'Accounts',
-  },
 });

 export const AuthorNote: React.FC<{ id: string; previewMode?: boolean }> = ({
@@ -149,33 +136,10 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
        collection={collection}
        className={classes.metaData}
      />
-      <h2 className='sr-only'>{intl.formatMessage(messages.accounts)}</h2>
    </div>
  );
 };

-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 }) => {
@@ -185,7 +149,6 @@ export const CollectionDetailPage: React.FC<{
  const collection = useAppSelector((state) =>
    id ? state.collections.collections[id] : undefined,
  );
-
  const isLoading = !!id && !collection;

  useEffect(() => {
@@ -208,24 +171,7 @@ export const CollectionDetailPage: React.FC<{

      <Scrollable>
        {collection && <CollectionHeader collection={collection} />}
-        <ItemList
-          isLoading={isLoading}
-          emptyMessage={intl.formatMessage(messages.empty)}
-        >
-          {collection?.items.map(({ account_id }, index, items) => (
-            <Article
-              key={account_id}
-              data-id={account_id}
-              aria-posinset={index + 1}
-              aria-setsize={items.length}
-            >
-              <CollectionAccountItem
-                accountId={account_id}
-                collectionOwnerId={collection.account_id}
-              />
-            </Article>
-          ))}
-        </ItemList>
+        <CollectionAccountsList collection={collection} isLoading={isLoading} />
      </Scrollable>

      <Helmet>
--- a/app/javascript/mastodon/features/collections/detail/styles.module.scss
+++ b/app/javascript/mastodon/features/collections/detail/styles.module.scss
@@ -57,6 +57,18 @@
  font-size: 15px;
 }

+.columnSubheading {
+  background: var(--color-bg-secondary);
+  padding: 15px 20px;
+  font-size: 15px;
+  font-weight: 500;
+
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+    outline-offset: -2px;
+  }
+}
+
 .displayNameWithAvatar {
  display: inline-flex;
  gap: 4px;
@@ -76,3 +88,18 @@
    align-self: center;
  }
 }
+
+.sensitiveWarning {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 460px;
+  margin: auto;
+  padding: 60px 30px;
+  gap: 20px;
+  text-align: center;
+  text-wrap: balance;
+  font-size: 15px;
+  line-height: 1.5;
+  cursor: default;
+}
--- a/app/javascript/mastodon/features/collections/index.tsx
+++ b/app/javascript/mastodon/features/collections/index.tsx
@@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';

 import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
+import CollectionsFilledIcon from '@/material-icons/400-24px/category-fill.svg?react';
 import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
@@ -73,8 +73,8 @@ export const Collections: React.FC<{
    >
      <ColumnHeader
        title={intl.formatMessage(messages.heading)}
-        icon='list-ul'
-        iconComponent={ListAltIcon}
+        icon='collections'
+        iconComponent={CollectionsFilledIcon}
        multiColumn={multiColumn}
        extraButton={
          <Link
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -327,9 +327,12 @@
  "collections.delete_collection": "Delete collection",
  "collections.description_length_hint": "100 characters limit",
  "collections.detail.accounts_heading": "Accounts",
+  "collections.detail.author_added_you": "{author} added you to this collection",
  "collections.detail.curated_by_author": "Curated by {author}",
  "collections.detail.curated_by_you": "Curated by you",
  "collections.detail.loading": "Loading collection…",
+  "collections.detail.other_accounts_in_collection": "Others in this collection:",
+  "collections.detail.sensitive_note": "This collection contains accounts and content that may be sensitive to some users.",
  "collections.detail.share": "Share this collection",
  "collections.edit_details": "Edit details",
  "collections.error_loading_collections": "There was an error when trying to load your collections.",
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2009,7 +2009,10 @@ body > [data-popper-placement] {

 .account {
  padding: 16px;
-  border-bottom: 1px solid var(--color-border-primary);
+
+  &:not(&--without-border) {
+    border-bottom: 1px solid var(--color-border-primary);
+  }

  .account__display-name {
    flex: 1 1 auto;