Allow managing collection accounts (#37812)

2026-03-29 03:00:33 +02:00 · 2026-02-16 19:17:20 +01:00
parent cff25c186b
commit a644a4a762
15 changed files with 590 additions and 75 deletions
--- a/app/javascript/mastodon/api/collections.ts
+++ b/app/javascript/mastodon/api/collections.ts
@@ -11,6 +11,7 @@ import type {
  ApiCreateCollectionPayload,
  ApiUpdateCollectionPayload,
  ApiCollectionsJSON,
+  WrappedCollectionAccountItem,
 } from '../api_types/collections';

 export const apiCreateCollection = (collection: ApiCreateCollectionPayload) =>
@@ -37,3 +38,14 @@ export const apiGetAccountCollections = (accountId: string) =>
  apiRequestGet<ApiCollectionsJSON>(
    `v1_alpha/accounts/${accountId}/collections`,
  );
+
+export const apiAddCollectionItem = (collectionId: string, accountId: string) =>
+  apiRequestPost<WrappedCollectionAccountItem>(
+    `v1_alpha/collections/${collectionId}/items`,
+    { account_id: accountId },
+  );
+
+export const apiRemoveCollectionItem = (collectionId: string, itemId: string) =>
+  apiRequestDelete<WrappedCollectionAccountItem>(
+    `v1_alpha/collections/${collectionId}/items/${itemId}`,
+  );
--- a/app/javascript/mastodon/api_types/collections.ts
+++ b/app/javascript/mastodon/api_types/collections.ts
@@ -53,6 +53,7 @@ export interface ApiCollectionWithAccountsJSON extends ApiWrappedCollectionJSON
 * Nested account item
 */
 interface CollectionAccountItem {
+  id: string;
  account_id?: string; // Only present when state is 'accepted' (or the collection is your own)
  state: 'pending' | 'accepted' | 'rejected' | 'revoked';
  position: number;
--- 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;
+  children?: React.ReactNode;
 }

 export const Account: React.FC<AccountProps> = ({
@@ -83,6 +84,7 @@ export const Account: React.FC<AccountProps> = ({
  defaultAction,
  withBio,
  withMenu = true,
+  children,
 }) => {
  const intl = useIntl();
  const { signedIn } = useIdentity();
@@ -353,6 +355,8 @@ export const Account: React.FC<AccountProps> = ({
            {button}
          </div>
        )}
+
+        {children}
      </div>
    </div>
  );
--- a/app/javascript/mastodon/components/form_fields/combobox.module.scss
+++ b/app/javascript/mastodon/components/form_fields/combobox.module.scss
@@ -25,14 +25,17 @@
 .popover {
  z-index: 9999;
  box-sizing: border-box;
+  max-height: max(200px, 30dvh);
  padding: 4px;
  border-radius: 4px;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--dropdown-shadow);
-
-  // backdrop-filter: $backdrop-blur-filter;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  overscroll-behavior-y: contain;
 }

 .menuItem {
@@ -47,7 +50,7 @@
  cursor: pointer;
  user-select: none;

-  &[aria-selected='true'] {
+  &[data-highlighted='true'] {
    color: var(--color-text-on-brand-base);
    background: var(--color-bg-brand-base);

--- a/app/javascript/mastodon/components/form_fields/combobox_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/combobox_field.tsx
@@ -18,24 +18,30 @@ import { FormFieldWrapper } from './form_field_wrapper';
 import type { CommonFieldWrapperProps } from './form_field_wrapper';
 import { TextInput } from './text_input_field';

-interface Item {
+interface ComboboxItem {
  id: string;
 }

+export interface ComboboxItemState {
+  isSelected: boolean;
+  isDisabled: boolean;
+}
+
 interface ComboboxProps<
-  T extends Item,
+  T extends ComboboxItem,
 > extends ComponentPropsWithoutRef<'input'> {
  value: string;
  onChange: React.ChangeEventHandler<HTMLInputElement>;
  isLoading?: boolean;
  items: T[];
  getItemId: (item: T) => string;
+  getIsItemSelected?: (item: T) => boolean;
  getIsItemDisabled?: (item: T) => boolean;
-  renderItem: (item: T) => React.ReactElement;
+  renderItem: (item: T, state: ComboboxItemState) => React.ReactElement;
  onSelectItem: (item: T) => void;
 }

-interface Props<T extends Item>
+interface Props<T extends ComboboxItem>
  extends ComboboxProps<T>, CommonFieldWrapperProps {}

 /**
@@ -43,7 +49,7 @@ interface Props<T extends Item>
 * from a large list of options by searching or filtering.
 */

-export const ComboboxFieldWithRef = <T extends Item>(
+export const ComboboxFieldWithRef = <T extends ComboboxItem>(
  { id, label, hint, hasError, required, ...otherProps }: Props<T>,
  ref: React.ForwardedRef<HTMLInputElement>,
 ) => (
@@ -61,7 +67,7 @@ export const ComboboxFieldWithRef = <T extends Item>(
 // Using a type assertion to maintain the full type signature of ComboboxWithRef
 // (including its generic type) after wrapping it with `forwardRef`.
 export const ComboboxField = forwardRef(ComboboxFieldWithRef) as {
-  <T extends Item>(
+  <T extends ComboboxItem>(
    props: Props<T> & { ref?: React.ForwardedRef<HTMLInputElement> },
  ): ReturnType<typeof ComboboxFieldWithRef>;
  displayName: string;
@@ -69,13 +75,15 @@ export const ComboboxField = forwardRef(ComboboxFieldWithRef) as {

 ComboboxField.displayName = 'ComboboxField';

-const ComboboxWithRef = <T extends Item>(
+const ComboboxWithRef = <T extends ComboboxItem>(
  {
    value,
    isLoading = false,
    items,
    getItemId,
    getIsItemDisabled,
+    getIsItemSelected,
+    disabled,
    renderItem,
    onSelectItem,
    onChange,
@@ -88,6 +96,7 @@ const ComboboxWithRef = <T extends Item>(
  const intl = useIntl();
  const wrapperRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement | null>();
+  const popoverRef = useRef<HTMLDivElement>(null);

  const [highlightedItemId, setHighlightedItemId] = useState<string | null>(
    null,
@@ -101,11 +110,13 @@ const ComboboxWithRef = <T extends Item>(
  });
  const showStatusMessageInMenu =
    !!statusMessage && value.length > 0 && items.length === 0;
-  const hasMenuContent = items.length > 0 || showStatusMessageInMenu;
+  const hasMenuContent =
+    !disabled && (items.length > 0 || showStatusMessageInMenu);
  const isMenuOpen = shouldMenuOpen && hasMenuContent;

  const openMenu = useCallback(() => {
    setShouldMenuOpen(true);
+    inputRef.current?.focus();
  }, []);

  const closeMenu = useCallback(() => {
@@ -118,6 +129,18 @@ const ComboboxWithRef = <T extends Item>(
    setHighlightedItemId(firstItemId);
  }, [getItemId, items]);

+  const highlightItem = useCallback((id: string | null) => {
+    setHighlightedItemId(id);
+    if (id) {
+      const itemElement = popoverRef.current?.querySelector<HTMLLIElement>(
+        `[data-item-id='${id}']`,
+      );
+      if (itemElement && popoverRef.current) {
+        scrollItemIntoView(itemElement, popoverRef.current);
+      }
+    }
+  }, []);
+
  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      onChange(e);
@@ -127,14 +150,14 @@ const ComboboxWithRef = <T extends Item>(
    [onChange, resetHighlight],
  );

-  const handleHighlightItem = useCallback(
+  const handleItemMouseEnter = useCallback(
    (e: React.MouseEvent<HTMLLIElement>) => {
      const { itemId } = e.currentTarget.dataset;
      if (itemId) {
-        setHighlightedItemId(itemId);
+        highlightItem(itemId);
      }
    },
-    [],
+    [highlightItem],
  );

  const selectItem = useCallback(
@@ -175,10 +198,10 @@ const ComboboxWithRef = <T extends Item>(
        // If no item is highlighted yet, highlight the first or last
        if (direction > 0) {
          const firstItem = items.at(0);
-          setHighlightedItemId(firstItem ? getItemId(firstItem) : null);
+          highlightItem(firstItem ? getItemId(firstItem) : null);
        } else {
          const lastItem = items.at(-1);
-          setHighlightedItemId(lastItem ? getItemId(lastItem) : null);
+          highlightItem(lastItem ? getItemId(lastItem) : null);
        }
      } else {
        // If there is a highlighted item, select the next or previous item
@@ -191,12 +214,12 @@ const ComboboxWithRef = <T extends Item>(
        }

        const newHighlightedItem = items[newIndex];
-        setHighlightedItemId(
+        highlightItem(
          newHighlightedItem ? getItemId(newHighlightedItem) : null,
        );
      }
    },
-    [getItemId, highlightedItemId, items],
+    [getItemId, highlightItem, highlightedItemId, items],
  );

  useOnClickOutside(wrapperRef, closeMenu);
@@ -231,7 +254,6 @@ const ComboboxWithRef = <T extends Item>(
        if (isMenuOpen) {
          e.preventDefault();
          selectHighlightedItem();
-          closeMenu();
        }
      }
      if (e.key === 'Escape') {
@@ -271,9 +293,10 @@ const ComboboxWithRef = <T extends Item>(
      <TextInput
        role='combobox'
        {...otherProps}
+        disabled={disabled}
        aria-controls={listId}
        aria-expanded={isMenuOpen ? 'true' : 'false'}
-        aria-haspopup='true'
+        aria-haspopup='listbox'
        aria-activedescendant={
          isMenuOpen && highlightedItemId ? highlightedItemId : undefined
        }
@@ -311,11 +334,11 @@ const ComboboxWithRef = <T extends Item>(
        {isMenuOpen && statusMessage}
      </span>
      <Overlay
-        flip
        show={isMenuOpen}
        offset={[0, 1]}
        placement='bottom-start'
        onHide={closeMenu}
+        ref={popoverRef}
        target={inputRef as React.RefObject<HTMLInputElement>}
        container={wrapperRef}
        popperConfig={{
@@ -331,19 +354,30 @@ const ComboboxWithRef = <T extends Item>(
                {items.map((item) => {
                  const id = getItemId(item);
                  const isDisabled = getIsItemDisabled?.(item);
+                  const isHighlighted = id === highlightedItemId;
+                  // If `getIsItemSelected` is defined, we assume 'multi-select'
+                  // behaviour and don't set `aria-selected` based on highlight,
+                  // but based on selected item state.
+                  const isSelected = getIsItemSelected
+                    ? getIsItemSelected(item)
+                    : isHighlighted;
                  return (
                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
                    <li
                      key={id}
                      role='option'
                      className={classes.menuItem}
-                      aria-selected={id === highlightedItemId}
+                      data-highlighted={isHighlighted}
+                      aria-selected={isSelected}
                      aria-disabled={isDisabled}
                      data-item-id={id}
-                      onMouseEnter={handleHighlightItem}
+                      onMouseEnter={handleItemMouseEnter}
                      onClick={handleSelectItem}
                    >
-                      {renderItem(item)}
+                      {renderItem(item, {
+                        isSelected,
+                        isDisabled: isDisabled ?? false,
+                      })}
                    </li>
                  );
                })}
@@ -359,7 +393,7 @@ const ComboboxWithRef = <T extends Item>(
 // Using a type assertion to maintain the full type signature of ComboboxWithRef
 // (including its generic type) after wrapping it with `forwardRef`.
 export const Combobox = forwardRef(ComboboxWithRef) as {
-  <T extends Item>(
+  <T extends ComboboxItem>(
    props: ComboboxProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },
  ): ReturnType<typeof ComboboxWithRef>;
  displayName: string;
@@ -406,3 +440,23 @@ function useGetA11yStatusMessage({
  }
  return '';
 }
+
+const SCROLL_MARGIN = 6;
+
+function scrollItemIntoView(item: HTMLElement, scrollParent: HTMLElement) {
+  const itemTopEdge = item.offsetTop;
+  const itemBottomEdge = itemTopEdge + item.offsetHeight;
+
+  // If item is above scroll area, scroll up
+  if (itemTopEdge < scrollParent.scrollTop) {
+    scrollParent.scrollTop = itemTopEdge - SCROLL_MARGIN;
+  }
+  // If item is below scroll area, scroll down
+  else if (
+    itemBottomEdge >
+    scrollParent.scrollTop + scrollParent.offsetHeight
+  ) {
+    scrollParent.scrollTop =
+      itemBottomEdge - scrollParent.offsetHeight + SCROLL_MARGIN;
+  }
+}
--- a/app/javascript/mastodon/components/form_fields/index.ts
+++ b/app/javascript/mastodon/components/form_fields/index.ts
@@ -3,7 +3,11 @@ export { Fieldset } from './fieldset';
 export { TextInputField, TextInput } from './text_input_field';
 export { TextAreaField, TextArea } from './text_area_field';
 export { CheckboxField, Checkbox } from './checkbox_field';
-export { ComboboxField, Combobox } from './combobox_field';
+export {
+  ComboboxField,
+  Combobox,
+  type ComboboxItemState,
+} from './combobox_field';
 export { RadioButtonField, RadioButton } from './radio_button_field';
 export { ToggleField, Toggle } from './toggle_field';
 export { SelectField, Select } from './select_field';
--- a/app/javascript/mastodon/features/collections/editor/accounts.tsx
+++ b/app/javascript/mastodon/features/collections/editor/accounts.tsx
@@ -1,67 +1,363 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo, useState } from 'react';

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

 import { useHistory, useLocation } from 'react-router-dom';

+import CancelIcon from '@/material-icons/400-24px/cancel.svg?react';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
+import { Account } from 'mastodon/components/account';
+import { Avatar } from 'mastodon/components/avatar';
 import { Button } from 'mastodon/components/button';
-import { FormStack } from 'mastodon/components/form_fields';
+import { Callout } from 'mastodon/components/callout';
+import { DisplayName } from 'mastodon/components/display_name';
+import { EmptyState } from 'mastodon/components/empty_state';
+import { FormStack, ComboboxField } 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 { useSearchAccounts } from 'mastodon/features/lists/use_search_accounts';
+import {
+  addCollectionItem,
+  removeCollectionItem,
+} from 'mastodon/reducers/slices/collections';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';

 import type { TempCollectionState } from './state';
-import { getInitialState } from './state';
+import { getCollectionEditorState } from './state';
+import classes from './styles.module.scss';
 import { WizardStepHeader } from './wizard_step_header';

+const MIN_ACCOUNT_COUNT = 1;
+const MAX_ACCOUNT_COUNT = 25;
+
+const AddedAccountItem: React.FC<{
+  accountId: string;
+  isRemovable: boolean;
+  onRemove: (id: string) => void;
+}> = ({ accountId, isRemovable, onRemove }) => {
+  const intl = useIntl();
+
+  const handleRemoveAccount = useCallback(() => {
+    onRemove(accountId);
+  }, [accountId, onRemove]);
+
+  return (
+    <Account minimal key={accountId} id={accountId}>
+      {isRemovable && (
+        <IconButton
+          title={intl.formatMessage({
+            id: 'collections.remove_account',
+            defaultMessage: 'Remove this account',
+          })}
+          icon='remove'
+          iconComponent={CancelIcon}
+          onClick={handleRemoveAccount}
+        />
+      )}
+    </Account>
+  );
+};
+
+interface SuggestionItem {
+  id: string;
+  isSelected: boolean;
+}
+
+const SuggestedAccountItem: React.FC<SuggestionItem> = ({ id, isSelected }) => {
+  const account = useAppSelector((state) => state.accounts.get(id));
+
+  if (!account) return null;
+
+  return (
+    <>
+      <Avatar account={account} />
+      <DisplayName account={account} />
+      {isSelected && (
+        <Icon
+          id='checked'
+          icon={CheckIcon}
+          className={classes.selectedSuggestionIcon}
+        />
+      )}
+    </>
+  );
+};
+
+const renderAccountItem = (item: SuggestionItem) => (
+  <SuggestedAccountItem id={item.id} isSelected={item.isSelected} />
+);
+
+const getItemId = (item: SuggestionItem) => item.id;
+const getIsItemSelected = (item: SuggestionItem) => item.isSelected;
+
 export const CollectionAccounts: React.FC<{
  collection?: ApiCollectionJSON | null;
 }> = ({ collection }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
  const history = useHistory();
  const location = useLocation<TempCollectionState>();
+  const { id, initialItemIds } = getCollectionEditorState(
+    collection,
+    location.state,
+  );
+  const isEditMode = !!id;
+  const collectionItems = collection?.items;

-  const { id } = getInitialState(collection, location.state);
+  const [searchValue, setSearchValue] = useState('');
+  // This state is only used when creating a new collection.
+  // In edit mode, the collection will be updated instantly
+  const [addedAccountIds, setAccountIds] = useState(initialItemIds);
+  const accountIds = useMemo(
+    () =>
+      isEditMode
+        ? (collectionItems
+            ?.map((item) => item.account_id)
+            .filter((id): id is string => !!id) ?? [])
+        : addedAccountIds,
+    [isEditMode, collectionItems, addedAccountIds],
+  );
+
+  const hasMaxAccounts = accountIds.length === MAX_ACCOUNT_COUNT;
+  const hasMinAccounts = accountIds.length === MIN_ACCOUNT_COUNT;
+  const hasTooFewAccounts = accountIds.length < MIN_ACCOUNT_COUNT;
+  const canSubmit = !hasTooFewAccounts;
+
+  const {
+    accountIds: suggestedAccountIds,
+    isLoading: isLoadingSuggestions,
+    searchAccounts,
+  } = useSearchAccounts();
+
+  const suggestedItems = suggestedAccountIds.map((id) => ({
+    id,
+    isSelected: accountIds.includes(id),
+  }));
+
+  const handleSearchValueChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchValue(e.target.value);
+      searchAccounts(e.target.value);
+    },
+    [searchAccounts],
+  );
+
+  const handleSearchKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    },
+    [],
+  );
+
+  const toggleAccountItem = useCallback((item: SuggestionItem) => {
+    setAccountIds((ids) =>
+      ids.includes(item.id)
+        ? ids.filter((id) => id !== item.id)
+        : [...ids, item.id],
+    );
+  }, []);
+
+  const instantRemoveAccountItem = useCallback(
+    (accountId: string) => {
+      const itemId = collectionItems?.find(
+        (item) => item.account_id === accountId,
+      )?.id;
+      if (itemId && id) {
+        if (
+          window.confirm(
+            intl.formatMessage({
+              id: 'collections.confirm_account_removal',
+              defaultMessage:
+                'Are you sure you want to remove this account from this collection?',
+            }),
+          )
+        ) {
+          void dispatch(removeCollectionItem({ collectionId: id, itemId }));
+        }
+      }
+    },
+    [collectionItems, dispatch, id, intl],
+  );
+
+  const instantToggleAccountItem = useCallback(
+    (item: SuggestionItem) => {
+      if (accountIds.includes(item.id)) {
+        instantRemoveAccountItem(item.id);
+      } else {
+        if (id) {
+          void dispatch(
+            addCollectionItem({ collectionId: id, accountId: item.id }),
+          );
+        }
+      }
+    },
+    [accountIds, dispatch, id, instantRemoveAccountItem],
+  );
+
+  const handleRemoveAccountItem = useCallback(
+    (accountId: string) => {
+      if (isEditMode) {
+        instantRemoveAccountItem(accountId);
+      } else {
+        setAccountIds((ids) => ids.filter((id) => id !== accountId));
+      }
+    },
+    [isEditMode, instantRemoveAccountItem],
+  );

  const handleSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();

+      if (!canSubmit) {
+        return;
+      }
+
      if (!id) {
-        history.push(`/collections/new/details`);
+        history.push(`/collections/new/details`, {
+          account_ids: accountIds,
+        });
      }
    },
-    [id, history],
+    [canSubmit, id, history, accountIds],
  );

  return (
-    <FormStack as='form' onSubmit={handleSubmit}>
-      {!id && (
-        <WizardStepHeader
-          step={1}
-          title={
+    <form onSubmit={handleSubmit} className={classes.form}>
+      <FormStack className={classes.formFieldStack}>
+        {!id && (
+          <WizardStepHeader
+            step={1}
+            title={
+              <FormattedMessage
+                id='collections.create.accounts_title'
+                defaultMessage='Who will you feature in this collection?'
+              />
+            }
+            description={
+              <FormattedMessage
+                id='collections.create.accounts_subtitle'
+                defaultMessage='Only accounts you follow who have opted into discovery can be added.'
+              />
+            }
+          />
+        )}
+        <ComboboxField
+          label={
            <FormattedMessage
-              id='collections.create.accounts_title'
-              defaultMessage='Who will you feature in this collection?'
+              id='collections.search_accounts_label'
+              defaultMessage='Search for accounts to add…'
            />
          }
-          description={
-            <FormattedMessage
-              id='collections.create.accounts_subtitle'
-              defaultMessage='Only accounts you follow who have opted into discovery can be added.'
-            />
+          hint={
+            hasMaxAccounts ? (
+              <FormattedMessage
+                id='collections.search_accounts_max_reached'
+                defaultMessage='You have added the maximum number of accounts'
+              />
+            ) : undefined
+          }
+          value={hasMaxAccounts ? '' : searchValue}
+          onChange={handleSearchValueChange}
+          onKeyDown={handleSearchKeyDown}
+          disabled={hasMaxAccounts}
+          isLoading={isLoadingSuggestions}
+          items={suggestedItems}
+          getItemId={getItemId}
+          getIsItemSelected={getIsItemSelected}
+          renderItem={renderAccountItem}
+          onSelectItem={
+            isEditMode ? instantToggleAccountItem : toggleAccountItem
          }
        />
-      )}
-      <div className='actions'>
-        <Button type='submit'>
-          {id ? (
-            <FormattedMessage id='lists.save' defaultMessage='Save' />
-          ) : (
+
+        {hasMinAccounts && (
+          <Callout>
            <FormattedMessage
-              id='collections.continue'
-              defaultMessage='Continue'
+              id='collections.hints.can_not_remove_more_accounts'
+              defaultMessage='Collections must contain at least {count, plural, one {# account} other {# accounts}}. Removing more accounts is not possible.'
+              values={{ count: MIN_ACCOUNT_COUNT }}
            />
+          </Callout>
+        )}
+
+        <div className={classes.scrollableWrapper}>
+          <ScrollableList
+            scrollKey='collection-items'
+            className={classes.scrollableInner}
+            emptyMessage={
+              <EmptyState
+                title={
+                  <FormattedMessage
+                    id='collections.accounts.empty_title'
+                    defaultMessage='This collection is empty'
+                  />
+                }
+                message={
+                  <FormattedMessage
+                    id='collections.accounts.empty_description'
+                    defaultMessage='Add up to {count} accounts you follow'
+                    values={{
+                      count: MAX_ACCOUNT_COUNT,
+                    }}
+                  />
+                }
+              />
+            }
+            // TODO: Re-add `bindToDocument={!multiColumn}`
+          >
+            {accountIds.map((accountId) => (
+              <AddedAccountItem
+                key={accountId}
+                accountId={accountId}
+                isRemovable={!isEditMode || !hasMinAccounts}
+                onRemove={handleRemoveAccountItem}
+              />
+            ))}
+          </ScrollableList>
+        </div>
+      </FormStack>
+      {!isEditMode && (
+        <div className={classes.stickyFooter}>
+          {hasTooFewAccounts ? (
+            <Callout icon={false} className={classes.submitDisabledCallout}>
+              <FormattedMessage
+                id='collections.hints.add_more_accounts'
+                defaultMessage='Add at least {count, plural, one {# account} other {# accounts}} to continue'
+                values={{ count: MIN_ACCOUNT_COUNT }}
+              />
+            </Callout>
+          ) : (
+            <div className={classes.actionWrapper}>
+              <FormattedMessage
+                id='collections.hints.accounts_counter'
+                defaultMessage='{count} / {max} accounts'
+                values={{ count: accountIds.length, max: MAX_ACCOUNT_COUNT }}
+              >
+                {(text) => (
+                  <div className={classes.itemCountReadout}>{text}</div>
+                )}
+              </FormattedMessage>
+              {canSubmit && (
+                <Button type='submit'>
+                  {id ? (
+                    <FormattedMessage id='lists.save' defaultMessage='Save' />
+                  ) : (
+                    <FormattedMessage
+                      id='collections.continue'
+                      defaultMessage='Continue'
+                    />
+                  )}
+                </Button>
+              )}
+            </div>
          )}
-        </Button>
-      </div>
-    </FormStack>
+        </div>
+      )}
+    </form>
  );
 };
--- a/app/javascript/mastodon/features/collections/editor/details.tsx
+++ b/app/javascript/mastodon/features/collections/editor/details.tsx
@@ -16,7 +16,8 @@ import { updateCollection } from 'mastodon/reducers/slices/collections';
 import { useAppDispatch } from 'mastodon/store';

 import type { TempCollectionState } from './state';
-import { getInitialState } from './state';
+import { getCollectionEditorState } from './state';
+import classes from './styles.module.scss';
 import { WizardStepHeader } from './wizard_step_header';

 export const CollectionDetails: React.FC<{
@@ -26,10 +27,8 @@ export const CollectionDetails: React.FC<{
  const history = useHistory();
  const location = useLocation<TempCollectionState>();

-  const { id, initialName, initialDescription, initialTopic } = getInitialState(
-    collection,
-    location.state,
-  );
+  const { id, initialName, initialDescription, initialTopic, initialItemIds } =
+    getCollectionEditorState(collection, location.state);

  const [name, setName] = useState(initialName);
  const [description, setDescription] = useState(initialDescription);
@@ -76,13 +75,14 @@ export const CollectionDetails: React.FC<{
          name,
          description,
          tag_name: topic || null,
+          account_ids: initialItemIds,
        };

        history.replace('/collections/new', payload);
        history.push('/collections/new/settings', payload);
      }
    },
-    [id, dispatch, name, description, topic, history],
+    [id, name, description, topic, dispatch, history, initialItemIds],
  );

  return (
@@ -155,7 +155,7 @@ export const CollectionDetails: React.FC<{
        maxLength={40}
      />

-      <div className='actions'>
+      <div className={classes.actionWrapper}>
        <Button type='submit'>
          {id ? (
            <FormattedMessage id='lists.save' defaultMessage='Save' />
--- a/app/javascript/mastodon/features/collections/editor/settings.tsx
+++ b/app/javascript/mastodon/features/collections/editor/settings.tsx
@@ -25,7 +25,8 @@ import {
 import { useAppDispatch } from 'mastodon/store';

 import type { TempCollectionState } from './state';
-import { getInitialState } from './state';
+import { getCollectionEditorState } from './state';
+import classes from './styles.module.scss';
 import { WizardStepHeader } from './wizard_step_header';

 export const CollectionSettings: React.FC<{
@@ -35,8 +36,8 @@ export const CollectionSettings: React.FC<{
  const history = useHistory();
  const location = useLocation<TempCollectionState>();

-  const { id, initialDiscoverable, initialSensitive, ...temporaryState } =
-    getInitialState(collection, location.state);
+  const { id, initialDiscoverable, initialSensitive, ...editorState } =
+    getCollectionEditorState(collection, location.state);

  const [discoverable, setDiscoverable] = useState(initialDiscoverable);
  const [sensitive, setSensitive] = useState(initialSensitive);
@@ -71,13 +72,14 @@ export const CollectionSettings: React.FC<{
        });
      } else {
        const payload: ApiCreateCollectionPayload = {
-          name: temporaryState.initialName,
-          description: temporaryState.initialDescription,
+          name: editorState.initialName,
+          description: editorState.initialDescription,
          discoverable,
          sensitive,
+          account_ids: editorState.initialItemIds,
        };
-        if (temporaryState.initialTopic) {
-          payload.tag_name = temporaryState.initialTopic;
+        if (editorState.initialTopic) {
+          payload.tag_name = editorState.initialTopic;
        }

        void dispatch(
@@ -94,7 +96,7 @@ export const CollectionSettings: React.FC<{
        });
      }
    },
-    [id, discoverable, sensitive, dispatch, history, temporaryState],
+    [id, discoverable, sensitive, dispatch, history, editorState],
  );

  return (
@@ -180,7 +182,7 @@ export const CollectionSettings: React.FC<{
        />
      </Fieldset>

-      <div className='actions'>
+      <div className={classes.actionWrapper}>
        <Button type='submit'>
          {id ? (
            <FormattedMessage id='lists.save' defaultMessage='Save' />
--- a/app/javascript/mastodon/features/collections/editor/state.ts
+++ b/app/javascript/mastodon/features/collections/editor/state.ts
@@ -15,7 +15,7 @@ export type TempCollectionState =
 * Resolve initial editor state. Temporary location state
 * trumps stored data, otherwise initial values are returned.
 */
-export function getInitialState(
+export function getCollectionEditorState(
  collection: ApiCollectionJSON | null | undefined,
  locationState: TempCollectionState,
 ) {
@@ -27,10 +27,19 @@ export function getInitialState(
    language = '',
    discoverable = true,
    sensitive = false,
+    items,
  } = collection ?? {};

+  const collectionItemIds =
+    items?.map((item) => item.account_id).filter(onlyExistingIds) ?? [];
+
+  const initialItemIds = (
+    locationState?.account_ids ?? collectionItemIds
+  ).filter(onlyExistingIds);
+
  return {
    id,
+    initialItemIds,
    initialName: locationState?.name ?? name,
    initialDescription: locationState?.description ?? description,
    initialTopic: locationState?.tag_name ?? tag?.name ?? '',
@@ -39,3 +48,5 @@ export function getInitialState(
    initialSensitive: locationState?.sensitive ?? sensitive,
  };
 }
+
+const onlyExistingIds = (id?: string): id is string => !!id;
--- a/app/javascript/mastodon/features/collections/editor/styles.module.scss
+++ b/app/javascript/mastodon/features/collections/editor/styles.module.scss
@@ -13,3 +13,76 @@
  font-size: 15px;
  margin-top: 8px;
 }
+
+/* Make form stretch full height of the column */
+.form {
+  --bottom-spacing: 0;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding-bottom: var(--bottom-spacing);
+
+  @media (width < 760px) {
+    --bottom-spacing: var(--mobile-bottom-nav-height);
+  }
+}
+
+.selectedSuggestionIcon {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  margin-left: auto;
+  padding: 2px;
+  border-radius: 100%;
+  color: var(--color-text-on-brand-base);
+  background: var(--color-bg-brand-base);
+
+  [data-highlighted='true'] & {
+    color: var(--color-bg-brand-base);
+    background: var(--color-text-on-brand-base);
+  }
+}
+
+.formFieldStack {
+  flex-grow: 1;
+}
+
+.scrollableWrapper {
+  display: flex;
+  flex: 1;
+  margin-inline: -8px;
+}
+
+.scrollableInner {
+  margin-inline: -8px;
+}
+
+.submitDisabledCallout {
+  align-self: center;
+}
+
+.stickyFooter {
+  position: sticky;
+  bottom: var(--bottom-spacing);
+  padding: 16px;
+  background-image: linear-gradient(
+    to bottom,
+    transparent,
+    var(--color-bg-primary) 32px
+  );
+}
+
+.itemCountReadout {
+  text-align: center;
+}
+
+.actionWrapper {
+  display: flex;
+  flex-direction: column;
+  width: min-content;
+  min-width: 240px;
+  margin-inline: auto;
+  gap: 8px;
+}
--- a/app/javascript/mastodon/features/lists/members.tsx
+++ b/app/javascript/mastodon/features/lists/members.tsx
@@ -165,10 +165,11 @@ const ListMembers: React.FC<{
  const [mode, setMode] = useState<Mode>('remove');

  const {
-    accountIds: searchAccountIds = [],
+    accountIds: searchAccountIds,
    isLoading: loadingSearchResults,
    searchAccounts: handleSearch,
  } = useSearchAccounts({
+    resetOnInputClear: false,
    onSettled: (value) => {
      if (value.trim().length === 0) {
        setSearching(false);
--- a/app/javascript/mastodon/features/lists/use_search_accounts.ts
+++ b/app/javascript/mastodon/features/lists/use_search_accounts.ts
@@ -8,13 +8,15 @@ import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
 import { useAppDispatch } from 'mastodon/store';

 export function useSearchAccounts({
+  resetOnInputClear = true,
  onSettled,
 }: {
  onSettled?: (value: string) => void;
+  resetOnInputClear?: boolean;
 } = {}) {
  const dispatch = useAppDispatch();

-  const [accountIds, setAccountIds] = useState<string[]>();
+  const [accountIds, setAccountIds] = useState<string[]>([]);
  const [loadingState, setLoadingState] = useState<
    'idle' | 'loading' | 'error'
  >('idle');
@@ -29,6 +31,9 @@ export function useSearchAccounts({

      if (value.trim().length === 0) {
        onSettled?.('');
+        if (resetOnInputClear) {
+          setAccountIds([]);
+        }
        return;
      }

--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -244,9 +244,12 @@
  "closed_registrations_modal.preamble": "Mastodon is decentralized, so no matter where you create your account, you will be able to follow and interact with anyone on this server. You can even self-host it!",
  "closed_registrations_modal.title": "Signing up on Mastodon",
  "collections.account_count": "{count, plural, one {# account} other {# accounts}}",
+  "collections.accounts.empty_description": "Add up to {count} accounts you follow",
+  "collections.accounts.empty_title": "This collection is empty",
  "collections.collection_description": "Description",
  "collections.collection_name": "Name",
  "collections.collection_topic": "Topic",
+  "collections.confirm_account_removal": "Are you sure you want to remove this account from this collection?",
  "collections.content_warning": "Content warning",
  "collections.continue": "Continue",
  "collections.create.accounts_subtitle": "Only accounts you follow who have opted into discovery can be added.",
@@ -261,6 +264,9 @@
  "collections.edit_details": "Edit basic details",
  "collections.edit_settings": "Edit settings",
  "collections.error_loading_collections": "There was an error when trying to load your collections.",
+  "collections.hints.accounts_counter": "{count} / {max} accounts",
+  "collections.hints.add_more_accounts": "Add at least {count, plural, one {# account} other {# accounts}} to continue",
+  "collections.hints.can_not_remove_more_accounts": "Collections must contain at least {count, plural, one {# account} other {# accounts}}. Removing more accounts is not possible.",
  "collections.last_updated_at": "Last updated: {date}",
  "collections.manage_accounts": "Manage accounts",
  "collections.manage_accounts_in_collection": "Manage accounts in this collection",
@@ -269,6 +275,9 @@
  "collections.name_length_hint": "100 characters limit",
  "collections.new_collection": "New collection",
  "collections.no_collections_yet": "No collections yet.",
+  "collections.remove_account": "Remove this account",
+  "collections.search_accounts_label": "Search for accounts to add…",
+  "collections.search_accounts_max_reached": "You have added the maximum number of accounts",
  "collections.topic_hint": "Add a hashtag that helps others understand the main topic of this collection.",
  "collections.view_collection": "View collection",
  "collections.visibility_public": "Public",
--- a/app/javascript/mastodon/reducers/slices/collections.ts
+++ b/app/javascript/mastodon/reducers/slices/collections.ts
@@ -7,6 +7,8 @@ import {
  apiUpdateCollection,
  apiGetCollection,
  apiDeleteCollection,
+  apiAddCollectionItem,
+  apiRemoveCollectionItem,
 } from '@/mastodon/api/collections';
 import type {
  ApiCollectionJSON,
@@ -131,6 +133,32 @@ const collectionSlice = createSlice({
        };
      }
    });
+
+    /**
+     * Adding an account to a collection
+     */
+
+    builder.addCase(addCollectionItem.fulfilled, (state, action) => {
+      const { collection_item } = action.payload;
+      const { collectionId } = action.meta.arg;
+
+      state.collections[collectionId]?.items.push(collection_item);
+    });
+
+    /**
+     * Removing an account from a collection
+     */
+
+    builder.addCase(removeCollectionItem.fulfilled, (state, action) => {
+      const { itemId, collectionId } = action.meta.arg;
+
+      const collection = state.collections[collectionId];
+      if (collection) {
+        collection.items = collection.items.filter(
+          (item) => item.id !== itemId,
+        );
+      }
+    });
  },
 });

@@ -169,6 +197,18 @@ export const deleteCollection = createDataLoadingThunk(
    apiDeleteCollection(collectionId),
 );

+export const addCollectionItem = createDataLoadingThunk(
+  `${collectionSlice.name}/addCollectionItem`,
+  ({ collectionId, accountId }: { collectionId: string; accountId: string }) =>
+    apiAddCollectionItem(collectionId, accountId),
+);
+
+export const removeCollectionItem = createDataLoadingThunk(
+  `${collectionSlice.name}/removeCollectionItem`,
+  ({ collectionId, itemId }: { collectionId: string; itemId: string }) =>
+    apiRemoveCollectionItem(collectionId, itemId),
+);
+
 export const collections = collectionSlice.reducer;

 /**