Break ScrollableList component into parts (#38059)

2026-03-29 03:00:33 +02:00 · 2026-03-04 17:18:05 +01:00
parent 3fbb7424fa
commit a70079968c
11 changed files with 219 additions and 93 deletions
--- a/app/javascript/mastodon/components/scrollable_list/components.tsx
+++ b/app/javascript/mastodon/components/scrollable_list/components.tsx
@@ -0,0 +1,85 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { Children, forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import { LoadingIndicator } from '../loading_indicator';
+
+export const Scrollable = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<'div'> & {
+    flex?: boolean;
+    fullscreen?: boolean;
+  }
+>(({ flex = true, fullscreen, className, children, ...otherProps }, ref) => {
+  return (
+    <div
+      className={classNames(
+        'scrollable',
+        { 'scrollable--flex': flex, fullscreen },
+        className,
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+});
+
+Scrollable.displayName = 'Scrollable';
+
+export const ItemList = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<'div'> & {
+    isLoading?: boolean;
+    emptyMessage?: React.ReactNode;
+  }
+>(({ isLoading, emptyMessage, className, children, ...otherProps }, ref) => {
+  if (Children.count(children) === 0 && emptyMessage) {
+    return <div className='empty-column-indicator'>{emptyMessage}</div>;
+  }
+
+  return (
+    <>
+      <div
+        role='feed'
+        className={classNames('item-list', className)}
+        ref={ref}
+        {...otherProps}
+      >
+        {!isLoading && children}
+      </div>
+      {isLoading && (
+        <div className='scrollable__append'>
+          <LoadingIndicator />
+        </div>
+      )}
+    </>
+  );
+});
+
+ItemList.displayName = 'ItemList';
+
+export const Article = forwardRef<
+  HTMLElement,
+  ComponentPropsWithoutRef<'article'> & {
+    focusable?: boolean;
+    'data-id'?: string;
+    'aria-posinset': number;
+    'aria-setsize': number;
+  }
+>(({ focusable, className, children, ...otherProps }, ref) => {
+  return (
+    <article
+      ref={ref}
+      className={classNames(className, { focusable })}
+      tabIndex={-1}
+      {...otherProps}
+    >
+      {children}
+    </article>
+  );
+});
+
+Article.displayName = 'Article';
--- a/app/javascript/mastodon/components/scrollable_list/index.jsx
+++ b/app/javascript/mastodon/components/scrollable_list/index.jsx
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import { Children, cloneElement, PureComponent } from 'react';

-import classNames from 'classnames';
 import { useLocation } from 'react-router-dom';

 import { List as ImmutableList } from 'immutable';
@@ -12,13 +11,14 @@ import { throttle } from 'lodash';

 import { ScrollContainer } from 'mastodon/containers/scroll_container';

-import IntersectionObserverArticleContainer from '../containers/intersection_observer_article_container';
-import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
-import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
+import IntersectionObserverArticleContainer from '../../containers/intersection_observer_article_container';
+import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../../features/ui/util/fullscreen';
+import IntersectionObserverWrapper from '../../features/ui/util/intersection_observer_wrapper';

-import { LoadMore } from './load_more';
-import { LoadPending } from './load_pending';
-import { LoadingIndicator } from './loading_indicator';
+import { LoadMore } from '../load_more';
+import { LoadPending } from '../load_pending';
+import { LoadingIndicator } from '../loading_indicator';
+import { Scrollable, ItemList } from './components';

 const MOUSE_IDLE_DELAY = 300;

@@ -336,24 +336,20 @@ class ScrollableList extends PureComponent {

    if (showLoading) {
      scrollableArea = (
-        <div className='scrollable scrollable--flex' ref={this.setRef}>
+        <Scrollable ref={this.setRef}>
          {prepend}

-          <div role='feed' className='item-list' />
-
-          <div className='scrollable__append'>
-            <LoadingIndicator />
-          </div>
+          <ItemList isLoading />

          {footer}
-        </div>
+        </Scrollable>
      );
    } else if (isLoading || childrenCount > 0 || numPending > 0 || hasMore || !emptyMessage) {
      scrollableArea = (
-        <div className={classNames('scrollable scrollable--flex', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove}>
+        <Scrollable fullscreen={fullscreen} ref={this.setRef} onMouseMove={this.handleMouseMove}>
          {prepend}

-          <div role='feed' className={classNames('item-list', className)}>
+          <ItemList className={className}>
            {loadPending}

            {Children.map(this.props.children, (child, index) => (
@@ -378,14 +374,14 @@ class ScrollableList extends PureComponent {
            {loadMore}

            {!hasMore && append}
-          </div>
+          </ItemList>

          {footer}
-        </div>
+        </Scrollable>
      );
    } else {
      scrollableArea = (
-        <div className={classNames('scrollable scrollable--flex', { fullscreen })} ref={this.setRef}>
+        <Scrollable fullscreen={fullscreen} ref={this.setRef}>
          {alwaysPrepend && prepend}

          <div className='empty-column-indicator'>
@@ -393,7 +389,7 @@ class ScrollableList extends PureComponent {
          </div>

          {footer}
-        </div>
+        </Scrollable>
      );
    }

--- a/app/javascript/mastodon/components/scrollable_list/intersection_observer_article.jsx
+++ b/app/javascript/mastodon/components/scrollable_list/intersection_observer_article.jsx
@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import { cloneElement, Component } from 'react';

-import getRectFromEntry from '../features/ui/util/get_rect_from_entry';
-import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
+import getRectFromEntry from '../../features/ui/util/get_rect_from_entry';
+import scheduleIdleTask from '../../features/ui/util/schedule_idle_task';
+import { Article } from './components';

 // Diff these props in the "unrendered" state
 const updateOnPropsForUnrendered = ['id', 'index', 'listLength', 'cachedHeight'];
@@ -108,23 +109,22 @@ export default class IntersectionObserverArticle extends Component {

    if (!isIntersecting && (isHidden || cachedHeight)) {
      return (
-        <article
+        <Article
          ref={this.handleRef}
          aria-posinset={index + 1}
          aria-setsize={listLength}
          style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
          data-id={id}
-          tabIndex={-1}
        >
          {children && cloneElement(children, { hidden: true })}
-        </article>
+        </Article>
      );
    }

    return (
-      <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={-1}>
+      <Article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id}>
        {children && cloneElement(children, { hidden: false })}
-      </article>
+      </Article>
    );
  }

--- a/app/javascript/mastodon/containers/intersection_observer_article_container.js
+++ b/app/javascript/mastodon/containers/intersection_observer_article_container.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';

 import { setHeight } from '../actions/height_cache';
-import IntersectionObserverArticle from '../components/intersection_observer_article';
+import IntersectionObserverArticle from '../components/scrollable_list/intersection_observer_article';

 const makeMapStateToProps = (state, props) => ({
  cachedHeight: state.getIn(['height_cache', props.saveHeightKey, props.id]),
--- a/app/javascript/mastodon/features/account_featured/index.tsx
+++ b/app/javascript/mastodon/features/account_featured/index.tsx
@@ -12,6 +12,11 @@ import { Account } from 'mastodon/components/account';
 import { ColumnBackButton } from 'mastodon/components/column_back_button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { RemoteHint } from 'mastodon/components/remote_hint';
+import {
+  Article,
+  ItemList,
+  Scrollable,
+} from 'mastodon/components/scrollable_list/components';
 import { AccountHeader } from 'mastodon/features/account_timeline/components/account_header';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 import Column from 'mastodon/features/ui/components/column';
@@ -115,7 +120,7 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
    <Column>
      <ColumnBackButton />

-      <div className='scrollable scrollable--flex'>
+      <Scrollable>
        {accountId && (
          <AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
        )}
@@ -127,15 +132,17 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
                defaultMessage='Collections'
              />
            </h4>
-            <section>
+            <ItemList>
              {publicCollections.map((item, index) => (
                <CollectionListItem
                  key={item.id}
                  collection={item}
                  withoutBorder={index === publicCollections.length - 1}
+                  positionInList={index + 1}
+                  listSize={publicCollections.length}
                />
              ))}
-            </section>
+            </ItemList>
          </>
        )}
        {!featuredTags.isEmpty() && (
@@ -146,9 +153,18 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
                defaultMessage='Hashtags'
              />
            </h4>
-            {featuredTags.map((tag) => (
-              <FeaturedTag key={tag.get('id')} tag={tag} account={acct} />
+            <ItemList>
+              {featuredTags.map((tag, index) => (
+                <Article
+                  focusable
+                  key={tag.get('id')}
+                  aria-posinset={index + 1}
+                  aria-setsize={featuredTags.size}
+                >
+                  <FeaturedTag tag={tag} account={acct} />
+                </Article>
              ))}
+            </ItemList>
          </>
        )}
        {!featuredAccountIds.isEmpty() && (
@@ -159,13 +175,22 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
                defaultMessage='Profiles'
              />
            </h4>
-            {featuredAccountIds.map((featuredAccountId) => (
-              <Account key={featuredAccountId} id={featuredAccountId} />
+            <ItemList>
+              {featuredAccountIds.map((featuredAccountId, index) => (
+                <Article
+                  focusable
+                  key={featuredAccountId}
+                  aria-posinset={index + 1}
+                  aria-setsize={featuredAccountIds.size}
+                >
+                  <Account id={featuredAccountId} />
+                </Article>
              ))}
+            </ItemList>
          </>
        )}
        <RemoteHint accountId={accountId} />
-      </div>
+      </Scrollable>
    </Column>
  );
 };
--- a/app/javascript/mastodon/features/collections/detail/collection_list_item.tsx
+++ b/app/javascript/mastodon/features/collections/detail/collection_list_item.tsx
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';

 import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
+import { Article } from 'mastodon/components/scrollable_list/components';

 import classes from './collection_list_item.module.scss';
 import { CollectionMenu } from './collection_menu';
@@ -68,19 +69,22 @@ export const CollectionMetaData: React.FC<{
 export const CollectionListItem: React.FC<{
  collection: ApiCollectionJSON;
  withoutBorder?: boolean;
-}> = ({ collection, withoutBorder }) => {
+  positionInList: number;
+  listSize: number;
+}> = ({ collection, withoutBorder, positionInList, listSize }) => {
  const { id, name } = collection;
  const linkId = useId();

  return (
-    <article
+    <Article
+      focusable
      className={classNames(
        classes.wrapper,
-        'focusable',
        withoutBorder && classes.wrapperWithoutBorder,
      )}
-      tabIndex={-1}
      aria-labelledby={linkId}
+      aria-posinset={positionInList}
+      aria-setsize={listSize}
    >
      <div className={classes.content}>
        <h2 id={linkId}>
@@ -92,6 +96,6 @@ export const CollectionListItem: React.FC<{
      </div>

      <CollectionMenu context='list' collection={collection} />
-    </article>
+    </Article>
  );
 };
--- a/app/javascript/mastodon/features/collections/detail/index.tsx
+++ b/app/javascript/mastodon/features/collections/detail/index.tsx
@@ -19,7 +19,11 @@ import {
  LinkedDisplayName,
 } from 'mastodon/components/display_name';
 import { IconButton } from 'mastodon/components/icon_button';
-import ScrollableList from 'mastodon/components/scrollable_list';
+import {
+  Article,
+  ItemList,
+  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';
@@ -202,24 +206,27 @@ export const CollectionDetailPage: React.FC<{
        multiColumn={multiColumn}
      />

-      <ScrollableList
-        scrollKey='collection-detail'
+      <Scrollable>
+        {collection && <CollectionHeader collection={collection} />}
+        <ItemList
+          isLoading={isLoading}
          emptyMessage={intl.formatMessage(messages.empty)}
-        showLoading={isLoading}
-        bindToDocument={!multiColumn}
-        alwaysPrepend
-        prepend={
-          collection ? <CollectionHeader collection={collection} /> : null
-        }
        >
-        {collection?.items.map(({ account_id }) => (
-          <CollectionAccountItem
+          {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>
          ))}
-      </ScrollableList>
+        </ItemList>
+      </Scrollable>

      <Helmet>
        <title>{pageTitle}</title>
--- a/app/javascript/mastodon/features/collections/editor/accounts.tsx
+++ b/app/javascript/mastodon/features/collections/editor/accounts.tsx
@@ -21,7 +21,11 @@ import { EmptyState } from 'mastodon/components/empty_state';
 import { FormStack, Combobox } from 'mastodon/components/form_fields';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
-import ScrollableList from 'mastodon/components/scrollable_list';
+import {
+  Article,
+  ItemList,
+  Scrollable,
+} from 'mastodon/components/scrollable_list/components';
 import { useSearchAccounts } from 'mastodon/features/lists/use_search_accounts';
 import { useAccount } from 'mastodon/hooks/useAccount';
 import { me } from 'mastodon/initial_state';
@@ -390,9 +394,8 @@ export const CollectionAccounts: React.FC<{
          </Callout>
        )}

-        <div className={classes.scrollableWrapper}>
-          <ScrollableList
-            scrollKey='collection-items'
+        <Scrollable className={classes.scrollableWrapper}>
+          <ItemList
            className={classes.scrollableInner}
            emptyMessage={
              <EmptyState
@@ -413,18 +416,22 @@ export const CollectionAccounts: React.FC<{
                }
              />
            }
-            // TODO: Re-add `bindToDocument={!multiColumn}`
          >
-            {accountIds.map((accountId) => (
-              <AddedAccountItem
+            {accountIds.map((accountId, index) => (
+              <Article
                key={accountId}
+                aria-posinset={index}
+                aria-setsize={accountIds.length}
+              >
+                <AddedAccountItem
                  accountId={accountId}
                  isRemovable={!isEditMode || !hasMinAccounts}
                  onRemove={handleRemoveAccountItem}
                />
+              </Article>
            ))}
-          </ScrollableList>
-        </div>
+          </ItemList>
+        </Scrollable>
      </FormStack>
      {!isEditMode && (
        <div className={classes.stickyFooter}>
--- a/app/javascript/mastodon/features/collections/editor/styles.module.scss
+++ b/app/javascript/mastodon/features/collections/editor/styles.module.scss
@@ -49,12 +49,7 @@
  flex-grow: 1;
 }

-.scrollableWrapper {
-  display: flex;
-  flex: 1;
-  margin-inline: -8px;
-}
-
+.scrollableWrapper,
 .scrollableInner {
  margin-inline: -8px;
 }
--- a/app/javascript/mastodon/features/collections/index.tsx
+++ b/app/javascript/mastodon/features/collections/index.tsx
@@ -11,7 +11,10 @@ import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { Icon } from 'mastodon/components/icon';
-import ScrollableList from 'mastodon/components/scrollable_list';
+import {
+  ItemList,
+  Scrollable,
+} from 'mastodon/components/scrollable_list/components';
 import {
  fetchAccountCollections,
  selectAccountCollections,
@@ -85,16 +88,18 @@ export const Collections: React.FC<{
        }
      />

-      <ScrollableList
-        scrollKey='collections'
-        emptyMessage={emptyMessage}
-        isLoading={status === 'loading'}
-        bindToDocument={!multiColumn}
-      >
-        {collections.map((item) => (
-          <CollectionListItem key={item.id} collection={item} />
+      <Scrollable>
+        <ItemList emptyMessage={emptyMessage} isLoading={status === 'loading'}>
+          {collections.map((item, index) => (
+            <CollectionListItem
+              key={item.id}
+              collection={item}
+              positionInList={index + 1}
+              listSize={collections.length}
+            />
          ))}
-      </ScrollableList>
+        </ItemList>
+      </Scrollable>

      <Helmet>
        <title>{intl.formatMessage(messages.heading)}</title>
--- a/app/javascript/mastodon/features/ui/util/focusUtils.ts
+++ b/app/javascript/mastodon/features/ui/util/focusUtils.ts
@@ -169,7 +169,9 @@ export function focusItemSibling(index: number, direction: 1 | -1) {
  }

  // Check if the sibling is a post or a 'follow suggestions' widget
-  let targetElement = siblingItem.querySelector<HTMLElement>('.focusable');
+  let targetElement = siblingItem.matches('.focusable')
+    ? siblingItem
+    : siblingItem.querySelector<HTMLElement>('.focusable');

  // Otherwise, check if the item is a 'load more' button.
  if (!targetElement && siblingItem.matches('.load-more')) {