Split collection editor into dedicated routes (#37731)

app/javascript/mastodon/api_types/collections.ts

@@ -70,7 +70,8 @@ type CommonPayloadFields = Pick<
   ApiCollectionJSON,
   'name' | 'description' | 'sensitive' | 'discoverable'
 > & {
-  tag_name?: string;
+  tag_name?: string | null;
+  language?: ApiCollectionJSON['language'];
 };
 
 export interface ApiUpdateCollectionPayload extends Partial<CommonPayloadFields> {

app/javascript/mastodon/components/form_fields/index.ts

@@ -1,6 +1,8 @@
 export { FormStack } from './form_stack';
+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 { RadioButtonField, RadioButton } from './radio_button_field';
 export { ToggleField, Toggle } from './toggle_field';
 export { SelectField, Select } from './select_field';

app/javascript/mastodon/features/collections/editor.tsx

@@ -1,268 +0,0 @@
-import { useCallback, useState, useEffect } from 'react';
-
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-import { useParams, useHistory } from 'react-router-dom';
-
-import { isFulfilled } from '@reduxjs/toolkit';
-
-import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
-import type {
-  ApiCollectionJSON,
-  ApiCreateCollectionPayload,
-  ApiUpdateCollectionPayload,
-} from 'mastodon/api_types/collections';
-import { Button } from 'mastodon/components/button';
-import { Column } from 'mastodon/components/column';
-import { ColumnHeader } from 'mastodon/components/column_header';
-import {
-  CheckboxField,
-  FormStack,
-  TextAreaField,
-} from 'mastodon/components/form_fields';
-import { TextInputField } from 'mastodon/components/form_fields/text_input_field';
-import { LoadingIndicator } from 'mastodon/components/loading_indicator';
-import {
-  createCollection,
-  fetchCollection,
-  updateCollection,
-} from 'mastodon/reducers/slices/collections';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-const messages = defineMessages({
-  edit: { id: 'column.edit_collection', defaultMessage: 'Edit collection' },
-  create: {
-    id: 'column.create_collection',
-    defaultMessage: 'Create collection',
-  },
-});
-
-const CollectionSettings: React.FC<{
-  collection?: ApiCollectionJSON | null;
-}> = ({ collection }) => {
-  const dispatch = useAppDispatch();
-  const history = useHistory();
-
-  const {
-    id,
-    name: initialName = '',
-    description: initialDescription = '',
-    tag,
-    discoverable: initialDiscoverable = true,
-    sensitive: initialSensitive = false,
-  } = collection ?? {};
-
-  const [name, setName] = useState(initialName);
-  const [description, setDescription] = useState(initialDescription);
-  const [topic, setTopic] = useState(tag?.name ?? '');
-  const [discoverable] = useState(initialDiscoverable);
-  const [sensitive, setSensitive] = useState(initialSensitive);
-
-  const handleNameChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setName(event.target.value);
-    },
-    [],
-  );
-
-  const handleDescriptionChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setDescription(event.target.value);
-    },
-    [],
-  );
-
-  const handleTopicChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setTopic(event.target.value);
-    },
-    [],
-  );
-
-  const handleSensitiveChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSensitive(event.target.checked);
-    },
-    [],
-  );
-
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-
-      if (id) {
-        const payload: ApiUpdateCollectionPayload = {
-          id,
-          name,
-          description,
-          tag_name: topic,
-          discoverable,
-          sensitive,
-        };
-
-        void dispatch(updateCollection({ payload })).then(() => {
-          history.push(`/collections`);
-        });
-      } else {
-        const payload: ApiCreateCollectionPayload = {
-          name,
-          description,
-          discoverable,
-          sensitive,
-        };
-        if (topic) {
-          payload.tag_name = topic;
-        }
-
-        void dispatch(
-          createCollection({
-            payload,
-          }),
-        ).then((result) => {
-          if (isFulfilled(result)) {
-            history.replace(
-              `/collections/${result.payload.collection.id}/edit`,
-            );
-            history.push(`/collections`);
-          }
-        });
-      }
-    },
-    [id, dispatch, name, description, topic, discoverable, sensitive, history],
-  );
-
-  return (
-    <FormStack as='form' onSubmit={handleSubmit}>
-      <TextInputField
-        required
-        label={
-          <FormattedMessage
-            id='collections.collection_name'
-            defaultMessage='Name'
-          />
-        }
-        hint={
-          <FormattedMessage
-            id='collections.name_length_hint'
-            defaultMessage='40 characters limit'
-          />
-        }
-        value={name}
-        onChange={handleNameChange}
-        maxLength={40}
-      />
-
-      <TextAreaField
-        required
-        label={
-          <FormattedMessage
-            id='collections.collection_description'
-            defaultMessage='Description'
-          />
-        }
-        hint={
-          <FormattedMessage
-            id='collections.description_length_hint'
-            defaultMessage='100 characters limit'
-          />
-        }
-        value={description}
-        onChange={handleDescriptionChange}
-        maxLength={100}
-      />
-
-      <TextInputField
-        required={false}
-        label={
-          <FormattedMessage
-            id='collections.collection_topic'
-            defaultMessage='Topic'
-          />
-        }
-        hint={
-          <FormattedMessage
-            id='collections.topic_hint'
-            defaultMessage='Add a hashtag that helps others understand the main topic of this collection.'
-          />
-        }
-        value={topic}
-        onChange={handleTopicChange}
-        maxLength={40}
-      />
-
-      <CheckboxField
-        label={
-          <FormattedMessage
-            id='collections.mark_as_sensitive'
-            defaultMessage='Mark as sensitive'
-          />
-        }
-        hint={
-          <FormattedMessage
-            id='collections.mark_as_sensitive_hint'
-            defaultMessage="Hides the collection's description and accounts behind a content warning. The collection name will still be visible."
-          />
-        }
-        checked={sensitive}
-        onChange={handleSensitiveChange}
-      />
-
-      <div className='actions'>
-        <Button type='submit'>
-          {id ? (
-            <FormattedMessage id='lists.save' defaultMessage='Save' />
-          ) : (
-            <FormattedMessage id='lists.create' defaultMessage='Create' />
-          )}
-        </Button>
-      </div>
-    </FormStack>
-  );
-};
-
-export const CollectionEditorPage: React.FC<{
-  multiColumn?: boolean;
-}> = ({ multiColumn }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const { id } = useParams<{ id?: string }>();
-  const collection = useAppSelector((state) =>
-    id ? state.collections.collections[id] : undefined,
-  );
-  const isEditMode = !!id;
-  const isLoading = isEditMode && !collection;
-
-  useEffect(() => {
-    if (id) {
-      void dispatch(fetchCollection({ collectionId: id }));
-    }
-  }, [dispatch, id]);
-
-  const pageTitle = intl.formatMessage(id ? messages.edit : messages.create);
-
-  return (
-    <Column bindToDocument={!multiColumn} label={pageTitle}>
-      <ColumnHeader
-        title={pageTitle}
-        icon='list-ul'
-        iconComponent={ListAltIcon}
-        multiColumn={multiColumn}
-        showBackButton
-      />
-
-      <div className='scrollable'>
-        {isLoading ? (
-          <LoadingIndicator />
-        ) : (
-          <CollectionSettings collection={collection} />
-        )}
-      </div>
-
-      <Helmet>
-        <title>{pageTitle}</title>
-        <meta name='robots' content='noindex' />
-      </Helmet>
-    </Column>
-  );
-};

app/javascript/mastodon/features/collections/editor/accounts.tsx

@@ -0,0 +1,67 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
+import { Button } from 'mastodon/components/button';
+import { FormStack } from 'mastodon/components/form_fields';
+
+import type { TempCollectionState } from './state';
+import { getInitialState } from './state';
+import { WizardStepHeader } from './wizard_step_header';
+
+export const CollectionAccounts: React.FC<{
+  collection?: ApiCollectionJSON | null;
+}> = ({ collection }) => {
+  const history = useHistory();
+  const location = useLocation<TempCollectionState>();
+
+  const { id } = getInitialState(collection, location.state);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+
+      if (!id) {
+        history.push(`/collections/new/details`);
+      }
+    },
+    [id, history],
+  );
+
+  return (
+    <FormStack as='form' onSubmit={handleSubmit}>
+      {!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.'
+            />
+          }
+        />
+      )}
+      <div className='actions'>
+        <Button type='submit'>
+          {id ? (
+            <FormattedMessage id='lists.save' defaultMessage='Save' />
+          ) : (
+            <FormattedMessage
+              id='collections.continue'
+              defaultMessage='Continue'
+            />
+          )}
+        </Button>
+      </div>
+    </FormStack>
+  );
+};

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useState } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import type {
+  ApiCollectionJSON,
+  ApiCreateCollectionPayload,
+  ApiUpdateCollectionPayload,
+} from 'mastodon/api_types/collections';
+import { Button } from 'mastodon/components/button';
+import { FormStack, TextAreaField } from 'mastodon/components/form_fields';
+import { TextInputField } from 'mastodon/components/form_fields/text_input_field';
+import { updateCollection } from 'mastodon/reducers/slices/collections';
+import { useAppDispatch } from 'mastodon/store';
+
+import type { TempCollectionState } from './state';
+import { getInitialState } from './state';
+import { WizardStepHeader } from './wizard_step_header';
+
+export const CollectionDetails: React.FC<{
+  collection?: ApiCollectionJSON | null;
+}> = ({ collection }) => {
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const location = useLocation<TempCollectionState>();
+
+  const { id, initialName, initialDescription, initialTopic } = getInitialState(
+    collection,
+    location.state,
+  );
+
+  const [name, setName] = useState(initialName);
+  const [description, setDescription] = useState(initialDescription);
+  const [topic, setTopic] = useState(initialTopic);
+
+  const handleNameChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setName(event.target.value);
+    },
+    [],
+  );
+
+  const handleDescriptionChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setDescription(event.target.value);
+    },
+    [],
+  );
+
+  const handleTopicChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setTopic(event.target.value);
+    },
+    [],
+  );
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+
+      if (id) {
+        const payload: ApiUpdateCollectionPayload = {
+          id,
+          name,
+          description,
+          tag_name: topic || null,
+        };
+
+        void dispatch(updateCollection({ payload })).then(() => {
+          history.push(`/collections`);
+        });
+      } else {
+        const payload: Partial<ApiCreateCollectionPayload> = {
+          name,
+          description,
+          tag_name: topic || null,
+        };
+
+        history.replace('/collections/new', payload);
+        history.push('/collections/new/settings', payload);
+      }
+    },
+    [id, dispatch, name, description, topic, history],
+  );
+
+  return (
+    <FormStack as='form' onSubmit={handleSubmit}>
+      {!id && (
+        <WizardStepHeader
+          step={2}
+          title={
+            <FormattedMessage
+              id='collections.create.basic_details_title'
+              defaultMessage='Basic details'
+            />
+          }
+        />
+      )}
+      <TextInputField
+        required
+        label={
+          <FormattedMessage
+            id='collections.collection_name'
+            defaultMessage='Name'
+          />
+        }
+        hint={
+          <FormattedMessage
+            id='collections.name_length_hint'
+            defaultMessage='40 characters limit'
+          />
+        }
+        value={name}
+        onChange={handleNameChange}
+        maxLength={40}
+      />
+
+      <TextAreaField
+        required
+        label={
+          <FormattedMessage
+            id='collections.collection_description'
+            defaultMessage='Description'
+          />
+        }
+        hint={
+          <FormattedMessage
+            id='collections.description_length_hint'
+            defaultMessage='100 characters limit'
+          />
+        }
+        value={description}
+        onChange={handleDescriptionChange}
+        maxLength={100}
+      />
+
+      <TextInputField
+        required={false}
+        label={
+          <FormattedMessage
+            id='collections.collection_topic'
+            defaultMessage='Topic'
+          />
+        }
+        hint={
+          <FormattedMessage
+            id='collections.topic_hint'
+            defaultMessage='Add a hashtag that helps others understand the main topic of this collection.'
+          />
+        }
+        value={topic}
+        onChange={handleTopicChange}
+        maxLength={40}
+      />
+
+      <div className='actions'>
+        <Button type='submit'>
+          {id ? (
+            <FormattedMessage id='lists.save' defaultMessage='Save' />
+          ) : (
+            <FormattedMessage
+              id='collections.continue'
+              defaultMessage='Continue'
+            />
+          )}
+        </Button>
+      </div>
+    </FormStack>
+  );
+};

app/javascript/mastodon/features/collections/editor/index.tsx

@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+import {
+  Switch,
+  Route,
+  useParams,
+  useRouteMatch,
+  matchPath,
+  useLocation,
+} from 'react-router-dom';
+
+import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
+import { Column } from 'mastodon/components/column';
+import { ColumnHeader } from 'mastodon/components/column_header';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { fetchCollection } from 'mastodon/reducers/slices/collections';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+import { CollectionAccounts } from './accounts';
+import { CollectionDetails } from './details';
+import { CollectionSettings } from './settings';
+
+export const messages = defineMessages({
+  create: {
+    id: 'collections.create_collection',
+    defaultMessage: 'Create collection',
+  },
+  newCollection: {
+    id: 'collections.new_collection',
+    defaultMessage: 'New collection',
+  },
+  editDetails: {
+    id: 'collections.edit_details',
+    defaultMessage: 'Edit basic details',
+  },
+  manageAccounts: {
+    id: 'collections.manage_accounts',
+    defaultMessage: 'Manage accounts',
+  },
+  manageAccountsLong: {
+    id: 'collections.manage_accounts_in_collection',
+    defaultMessage: 'Manage accounts in this collection',
+  },
+  editSettings: {
+    id: 'collections.edit_settings',
+    defaultMessage: 'Edit settings',
+  },
+});
+
+function usePageTitle(id: string | undefined) {
+  const { path } = useRouteMatch();
+  const location = useLocation();
+
+  if (!id) {
+    return messages.newCollection;
+  }
+
+  if (matchPath(location.pathname, { path, exact: true })) {
+    return messages.manageAccounts;
+  } else if (matchPath(location.pathname, { path: `${path}/details` })) {
+    return messages.editDetails;
+  } else if (matchPath(location.pathname, { path: `${path}/settings` })) {
+    return messages.editSettings;
+  } else {
+    throw new Error('No page title defined for route');
+  }
+}
+
+export const CollectionEditorPage: React.FC<{
+  multiColumn?: boolean;
+}> = ({ multiColumn }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const { id } = useParams<{ id?: string }>();
+  const { path } = useRouteMatch();
+  const collection = useAppSelector((state) =>
+    id ? state.collections.collections[id] : undefined,
+  );
+  const isEditMode = !!id;
+  const isLoading = isEditMode && !collection;
+
+  useEffect(() => {
+    if (id) {
+      void dispatch(fetchCollection({ collectionId: id }));
+    }
+  }, [dispatch, id]);
+
+  const pageTitle = intl.formatMessage(usePageTitle(id));
+
+  return (
+    <Column bindToDocument={!multiColumn} label={pageTitle}>
+      <ColumnHeader
+        title={pageTitle}
+        icon='list-ul'
+        iconComponent={ListAltIcon}
+        multiColumn={multiColumn}
+        showBackButton
+      />
+
+      <div className='scrollable'>
+        {isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          <Switch>
+            <Route
+              exact
+              path={path}
+              // eslint-disable-next-line react/jsx-no-bind
+              render={() => <CollectionAccounts collection={collection} />}
+            />
+            <Route
+              exact
+              path={`${path}/details`}
+              // eslint-disable-next-line react/jsx-no-bind
+              render={() => <CollectionDetails collection={collection} />}
+            />
+            <Route
+              path={`${path}/settings`}
+              // eslint-disable-next-line react/jsx-no-bind
+              render={() => <CollectionSettings collection={collection} />}
+            />
+          </Switch>
+        )}
+      </div>
+
+      <Helmet>
+        <title>{pageTitle}</title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};

app/javascript/mastodon/features/collections/editor/settings.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useState } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { isFulfilled } from '@reduxjs/toolkit';
+
+import type {
+  ApiCollectionJSON,
+  ApiCreateCollectionPayload,
+  ApiUpdateCollectionPayload,
+} from 'mastodon/api_types/collections';
+import { Button } from 'mastodon/components/button';
+import {
+  Fieldset,
+  FormStack,
+  CheckboxField,
+  RadioButtonField,
+} from 'mastodon/components/form_fields';
+import {
+  createCollection,
+  updateCollection,
+} from 'mastodon/reducers/slices/collections';
+import { useAppDispatch } from 'mastodon/store';
+
+import type { TempCollectionState } from './state';
+import { getInitialState } from './state';
+import { WizardStepHeader } from './wizard_step_header';
+
+export const CollectionSettings: React.FC<{
+  collection?: ApiCollectionJSON | null;
+}> = ({ collection }) => {
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const location = useLocation<TempCollectionState>();
+
+  const { id, initialDiscoverable, initialSensitive, ...temporaryState } =
+    getInitialState(collection, location.state);
+
+  const [discoverable, setDiscoverable] = useState(initialDiscoverable);
+  const [sensitive, setSensitive] = useState(initialSensitive);
+
+  const handleDiscoverableChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setDiscoverable(event.target.value === 'public');
+    },
+    [],
+  );
+
+  const handleSensitiveChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSensitive(event.target.checked);
+    },
+    [],
+  );
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+
+      if (id) {
+        const payload: ApiUpdateCollectionPayload = {
+          id,
+          discoverable,
+          sensitive,
+        };
+
+        void dispatch(updateCollection({ payload })).then(() => {
+          history.push(`/collections`);
+        });
+      } else {
+        const payload: ApiCreateCollectionPayload = {
+          name: temporaryState.initialName,
+          description: temporaryState.initialDescription,
+          discoverable,
+          sensitive,
+        };
+        if (temporaryState.initialTopic) {
+          payload.tag_name = temporaryState.initialTopic;
+        }
+
+        void dispatch(
+          createCollection({
+            payload,
+          }),
+        ).then((result) => {
+          if (isFulfilled(result)) {
+            history.replace(
+              `/collections/${result.payload.collection.id}/edit/settings`,
+            );
+            history.push(`/collections`);
+          }
+        });
+      }
+    },
+    [id, discoverable, sensitive, dispatch, history, temporaryState],
+  );
+
+  return (
+    <FormStack as='form' onSubmit={handleSubmit}>
+      {!id && (
+        <WizardStepHeader
+          step={3}
+          title={
+            <FormattedMessage
+              id='collections.create.settings_title'
+              defaultMessage='Settings'
+            />
+          }
+        />
+      )}
+      <Fieldset
+        legend={
+          <FormattedMessage
+            id='collections.visibility_title'
+            defaultMessage='Visibility'
+          />
+        }
+      >
+        <RadioButtonField
+          label={
+            <FormattedMessage
+              id='collections.visibility_public'
+              defaultMessage='Public'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='collections.visibility_public_hint'
+              defaultMessage='Discoverable in search results and other areas where recommendations appear.'
+            />
+          }
+          value='public'
+          checked={discoverable}
+          onChange={handleDiscoverableChange}
+        />
+        <RadioButtonField
+          label={
+            <FormattedMessage
+              id='collections.visibility_unlisted'
+              defaultMessage='Unlisted'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='collections.visibility_unlisted_hint'
+              defaultMessage='Visible to anyone with a link. Hidden from search results and recommendations.'
+            />
+          }
+          value='unlisted'
+          checked={!discoverable}
+          onChange={handleDiscoverableChange}
+        />
+      </Fieldset>
+
+      <Fieldset
+        legend={
+          <FormattedMessage
+            id='collections.content_warning'
+            defaultMessage='Content warning'
+          />
+        }
+      >
+        <CheckboxField
+          label={
+            <FormattedMessage
+              id='collections.mark_as_sensitive'
+              defaultMessage='Mark as sensitive'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='collections.mark_as_sensitive_hint'
+              defaultMessage="Hides the collection's description and accounts behind a content warning. The collection name will still be visible."
+            />
+          }
+          checked={sensitive}
+          onChange={handleSensitiveChange}
+        />
+      </Fieldset>
+
+      <div className='actions'>
+        <Button type='submit'>
+          {id ? (
+            <FormattedMessage id='lists.save' defaultMessage='Save' />
+          ) : (
+            <FormattedMessage
+              id='collections.create_collection'
+              defaultMessage='Create collection'
+            />
+          )}
+        </Button>
+      </div>
+    </FormStack>
+  );
+};

app/javascript/mastodon/features/collections/editor/state.ts

@@ -0,0 +1,41 @@
+import type {
+  ApiCollectionJSON,
+  ApiCreateCollectionPayload,
+} from '@/mastodon/api_types/collections';
+
+/**
+ * Temporary editor state across creation steps,
+ * kept in location state
+ */
+export type TempCollectionState =
+  | Partial<ApiCreateCollectionPayload>
+  | undefined;
+
+/**
+ * Resolve initial editor state. Temporary location state
+ * trumps stored data, otherwise initial values are returned.
+ */
+export function getInitialState(
+  collection: ApiCollectionJSON | null | undefined,
+  locationState: TempCollectionState,
+) {
+  const {
+    id,
+    name = '',
+    description = '',
+    tag,
+    language = '',
+    discoverable = true,
+    sensitive = false,
+  } = collection ?? {};
+
+  return {
+    id,
+    initialName: locationState?.name ?? name,
+    initialDescription: locationState?.description ?? description,
+    initialTopic: locationState?.tag_name ?? tag?.name ?? '',
+    initialLanguage: locationState?.language ?? language,
+    initialDiscoverable: locationState?.discoverable ?? discoverable,
+    initialSensitive: locationState?.sensitive ?? sensitive,
+  };
+}

app/javascript/mastodon/features/collections/editor/styles.module.scss

@@ -0,0 +1,15 @@
+.step {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.title {
+  font-size: 22px;
+  line-height: 1.2;
+  margin-top: 4px;
+}
+
+.description {
+  font-size: 15px;
+  margin-top: 8px;
+}

app/javascript/mastodon/features/collections/editor/wizard_step_header.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+
+import classes from './styles.module.scss';
+
+export const WizardStepHeader: React.FC<{
+  step: number;
+  title: React.ReactElement;
+  description?: React.ReactElement;
+}> = ({ step, title, description }) => {
+  return (
+    <header>
+      <FormattedMessage
+        id='collections.create.steps'
+        defaultMessage='Step {step}/{total}'
+        values={{ step, total: 3 }}
+      >
+        {(content) => <p className={classes.step}>{content}</p>}
+      </FormattedMessage>
+      <h2 className={classes.title}>{title}</h2>
+      {!!description && <p className={classes.description}>{description}</p>}
+    </header>
+  );
+};

app/javascript/mastodon/features/collections/index.tsx

@@ -21,12 +21,10 @@ import {
 } from 'mastodon/reducers/slices/collections';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
+import { messages as editorMessages } from './editor';
+
 const messages = defineMessages({
   heading: { id: 'column.collections', defaultMessage: 'My collections' },
-  create: {
-    id: 'collections.create_collection',
-    defaultMessage: 'Create collection',
-  },
   view: {
     id: 'collections.view_collection',
     defaultMessage: 'View collection',
@@ -60,14 +58,35 @@ const ListItem: React.FC<{
   const menu = useMemo(
     () => [
       { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
-      { text: intl.formatMessage(messages.delete), action: handleDeleteClick },
+      null,
+      {
+        text: intl.formatMessage(editorMessages.manageAccounts),
+        to: `/collections/${id}/edit`,
+      },
+      {
+        text: intl.formatMessage(editorMessages.editDetails),
+        to: `/collections/${id}/edit/details`,
+      },
+      {
+        text: intl.formatMessage(editorMessages.editSettings),
+        to: `/collections/${id}/edit/settings`,
+      },
+      null,
+      {
+        text: intl.formatMessage(messages.delete),
+        action: handleDeleteClick,
+        dangerous: true,
+      },
     ],
     [intl, id, handleDeleteClick],
   );
 
   return (
     <div className='lists__item'>
-      <Link to={`/collections/${id}/edit`} className='lists__item__title'>
+      <Link
+        to={`/collections/${id}/edit/details`}
+        className='lists__item__title'
+      >
         <span>{name}</span>
       </Link>
 
@@ -132,8 +151,8 @@ export const Collections: React.FC<{
           <Link
             to='/collections/new'
             className='column-header__button'
-            title={intl.formatMessage(messages.create)}
-            aria-label={intl.formatMessage(messages.create)}
+            title={intl.formatMessage(editorMessages.create)}
+            aria-label={intl.formatMessage(editorMessages.create)}
           >
             <Icon id='plus' icon={AddIcon} />
           </Link>

app/javascript/mastodon/features/ui/index.jsx

@@ -231,10 +231,7 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/mutes' component={Mutes} content={children} />
             <WrappedRoute path='/lists' component={Lists} content={children} />
             {areCollectionsEnabled() &&
-              <WrappedRoute path='/collections/new' component={CollectionsEditor} content={children} />
-            }
-            {areCollectionsEnabled() &&
-              <WrappedRoute path='/collections/:id/edit' component={CollectionsEditor} content={children} />
+              <WrappedRoute path={['/collections/new', '/collections/:id/edit']} component={CollectionsEditor} content={children} />
             }
             {areCollectionsEnabled() &&
               <WrappedRoute path='/collections' component={Collections} content={children} />

app/javascript/mastodon/locales/en.json

@@ -236,28 +236,43 @@
   "collections.collection_description": "Description",
   "collections.collection_name": "Name",
   "collections.collection_topic": "Topic",
+  "collections.content_warning": "Content warning",
+  "collections.continue": "Continue",
+  "collections.create.accounts_subtitle": "Only accounts you follow who have opted into discovery can be added.",
+  "collections.create.accounts_title": "Who will you feature in this collection?",
+  "collections.create.basic_details_title": "Basic details",
+  "collections.create.settings_title": "Settings",
+  "collections.create.steps": "Step {step}/{total}",
   "collections.create_a_collection_hint": "Create a collection to recommend or share your favourite accounts with others.",
   "collections.create_collection": "Create collection",
   "collections.delete_collection": "Delete collection",
   "collections.description_length_hint": "100 characters limit",
+  "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.manage_accounts": "Manage accounts",
+  "collections.manage_accounts_in_collection": "Manage accounts in this collection",
   "collections.mark_as_sensitive": "Mark as sensitive",
   "collections.mark_as_sensitive_hint": "Hides the collection's description and accounts behind a content warning. The collection name will still be visible.",
   "collections.name_length_hint": "100 characters limit",
+  "collections.new_collection": "New collection",
   "collections.no_collections_yet": "No collections yet.",
   "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",
+  "collections.visibility_public_hint": "Discoverable in search results and other areas where recommendations appear.",
+  "collections.visibility_title": "Visibility",
+  "collections.visibility_unlisted": "Unlisted",
+  "collections.visibility_unlisted_hint": "Visible to anyone with a link. Hidden from search results and recommendations.",
   "column.about": "About",
   "column.blocks": "Blocked users",
   "column.bookmarks": "Bookmarks",
   "column.collections": "My collections",
   "column.community": "Local timeline",
-  "column.create_collection": "Create collection",
   "column.create_list": "Create list",
   "column.direct": "Private mentions",
   "column.directory": "Browse profiles",
   "column.domain_blocks": "Blocked domains",
-  "column.edit_collection": "Edit collection",
   "column.edit_list": "Edit list",
   "column.favourites": "Favorites",
   "column.firehose": "Live feeds",