Merge commit 'c36db57acedf0033c090748125c665a0360cd11f' into glitch-soc/merge-upstream

app/javascript/mastodon/api/collections.ts

@@ -0,0 +1,39 @@
+import {
+  apiRequestPost,
+  apiRequestPut,
+  apiRequestGet,
+  apiRequestDelete,
+} from 'mastodon/api';
+
+import type {
+  ApiWrappedCollectionJSON,
+  ApiCollectionWithAccountsJSON,
+  ApiCreateCollectionPayload,
+  ApiPatchCollectionPayload,
+  ApiCollectionsJSON,
+} from '../api_types/collections';
+
+export const apiCreateCollection = (collection: ApiCreateCollectionPayload) =>
+  apiRequestPost<ApiWrappedCollectionJSON>('v1_alpha/collections', collection);
+
+export const apiUpdateCollection = ({
+  id,
+  ...collection
+}: ApiPatchCollectionPayload) =>
+  apiRequestPut<ApiWrappedCollectionJSON>(
+    `v1_alpha/collections/${id}`,
+    collection,
+  );
+
+export const apiDeleteCollection = (collectionId: string) =>
+  apiRequestDelete(`v1_alpha/collections/${collectionId}`);
+
+export const apiGetCollection = (collectionId: string) =>
+  apiRequestGet<ApiCollectionWithAccountsJSON[]>(
+    `v1_alpha/collections/${collectionId}`,
+  );
+
+export const apiGetAccountCollections = (accountId: string) =>
+  apiRequestGet<ApiCollectionsJSON>(
+    `v1_alpha/accounts/${accountId}/collections`,
+  );

app/javascript/mastodon/api_types/collections.ts

@@ -0,0 +1,82 @@
+// See app/serializers/rest/base_collection_serializer.rb
+
+import type { ApiAccountJSON } from './accounts';
+import type { ApiTagJSON } from './statuses';
+
+/**
+ * Returned when fetching all collections for an account,
+ * doesn't contain account and item data
+ */
+export interface ApiCollectionJSON {
+  account_id: string;
+
+  id: string;
+  uri: string;
+  local: boolean;
+  item_count: number;
+
+  name: string;
+  description: string;
+  tag?: ApiTagJSON;
+  language: string;
+  sensitive: boolean;
+  discoverable: boolean;
+
+  created_at: string;
+  updated_at: string;
+
+  items: CollectionAccountItem[];
+}
+
+/**
+ * Returned when fetching all collections for an account
+ */
+export interface ApiCollectionsJSON {
+  collections: ApiCollectionJSON[];
+}
+
+/**
+ * Returned when creating, updating, and adding to a collection
+ */
+export interface ApiWrappedCollectionJSON {
+  collection: ApiCollectionJSON;
+}
+
+/**
+ * Returned when fetching a single collection
+ */
+export interface ApiCollectionWithAccountsJSON extends ApiWrappedCollectionJSON {
+  accounts: ApiAccountJSON[];
+}
+
+/**
+ * Nested account item
+ */
+interface CollectionAccountItem {
+  account_id?: string; // Only present when state is 'accepted' (or the collection is your own)
+  state: 'pending' | 'accepted' | 'rejected' | 'revoked';
+  position: number;
+}
+
+export interface WrappedCollectionAccountItem {
+  collection_item: CollectionAccountItem;
+}
+
+/**
+ * Payload types
+ */
+
+type CommonPayloadFields = Pick<
+  ApiCollectionJSON,
+  'name' | 'description' | 'sensitive' | 'discoverable'
+> & {
+  tag?: string;
+};
+
+export interface ApiPatchCollectionPayload extends Partial<CommonPayloadFields> {
+  id: string;
+}
+
+export interface ApiCreateCollectionPayload extends CommonPayloadFields {
+  account_ids?: string[];
+}

app/javascript/mastodon/components/callout/callout.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { Callout } from '.';
+
+const meta = {
+  title: 'Components/Callout',
+  args: {
+    children: 'Contents here',
+    title: 'Title',
+    onPrimary: action('Primary action clicked'),
+    primaryLabel: 'Primary',
+    onSecondary: action('Secondary action clicked'),
+    secondaryLabel: 'Secondary',
+    onClose: action('Close clicked'),
+  },
+  component: Callout,
+  render(args) {
+    return (
+      <div style={{ minWidth: 'min(400px, calc(100vw - 2rem))' }}>
+        <Callout {...args} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof Callout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    icon: false,
+  },
+};
+
+export const NoActions: Story = {
+  args: {
+    onPrimary: undefined,
+    onSecondary: undefined,
+  },
+};
+
+export const OnlyText: Story = {
+  args: {
+    onClose: undefined,
+    onPrimary: undefined,
+    onSecondary: undefined,
+    icon: false,
+  },
+};
+
+// export const Subtle: Story = {
+//   args: {
+//     variant: 'subtle',
+//   },
+// };
+
+export const Feature: Story = {
+  args: {
+    variant: 'feature',
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    variant: 'inverted',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+  },
+};

app/javascript/mastodon/components/callout/dismissible.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import type { FC } from 'react';
+
+import { useDismissible } from '@/mastodon/hooks/useDismissible';
+
+import { Callout } from '.';
+import type { CalloutProps } from '.';
+
+type DismissibleCalloutProps = CalloutProps & {
+  id: string;
+};
+
+export const DismissibleCallout: FC<DismissibleCalloutProps> = (props) => {
+  const { dismiss, wasDismissed } = useDismissible(props.id);
+
+  const { onClose } = props;
+  const handleClose = useCallback(() => {
+    dismiss();
+    onClose?.();
+  }, [dismiss, onClose]);
+
+  if (wasDismissed) {
+    return null;
+  }
+
+  return <Callout {...props} onClose={handleClose} />;
+};

app/javascript/mastodon/components/callout/index.tsx

@@ -0,0 +1,150 @@
+import type { FC, ReactNode } from 'react';
+
+import { useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import ErrorIcon from '@/material-icons/400-24px/error.svg?react';
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+
+import type { IconProp } from '../icon';
+import { Icon } from '../icon';
+import { IconButton } from '../icon_button';
+
+import classes from './styles.module.css';
+
+export interface CalloutProps {
+  variant?:
+    | 'default'
+    // | 'subtle'
+    | 'feature'
+    | 'inverted'
+    | 'success'
+    | 'warning'
+    | 'error';
+  title?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  /** Set to false to hide the icon. */
+  icon?: IconProp | boolean;
+  onPrimary?: () => void;
+  primaryLabel?: string;
+  onSecondary?: () => void;
+  secondaryLabel?: string;
+  onClose?: () => void;
+  id?: string;
+}
+
+const variantClasses = {
+  default: classes.variantDefault as string,
+  // subtle: classes.variantSubtle as string,
+  feature: classes.variantFeature as string,
+  inverted: classes.variantInverted as string,
+  success: classes.variantSuccess as string,
+  warning: classes.variantWarning as string,
+  error: classes.variantError as string,
+} as const;
+
+export const Callout: FC<CalloutProps> = ({
+  className,
+  variant = 'default',
+  title,
+  children,
+  icon,
+  onPrimary: primaryAction,
+  primaryLabel,
+  onSecondary: secondaryAction,
+  secondaryLabel,
+  onClose,
+  id,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <aside
+      className={classNames(
+        className,
+        classes.wrapper,
+        variantClasses[variant],
+      )}
+      data-variant={variant}
+      id={id}
+    >
+      <CalloutIcon variant={variant} icon={icon} />
+      <div className={classes.content}>
+        <div className={classes.body}>
+          {title && <h3>{title}</h3>}
+          {children}
+        </div>
+
+        {(primaryAction ?? secondaryAction) && (
+          <div className={classes.actionWrapper}>
+            {secondaryAction && (
+              <button
+                type='button'
+                onClick={secondaryAction}
+                className={classes.action}
+              >
+                {secondaryLabel ?? 'Click'}
+              </button>
+            )}
+
+            {primaryAction && (
+              <button
+                type='button'
+                onClick={primaryAction}
+                className={classes.action}
+              >
+                {primaryLabel ?? 'Click'}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {onClose && (
+        <IconButton
+          icon='close'
+          title={intl.formatMessage({
+            id: 'callout.dismiss',
+            defaultMessage: 'Dismiss',
+          })}
+          iconComponent={CloseIcon}
+          className={classes.close}
+          onClick={onClose}
+        />
+      )}
+    </aside>
+  );
+};
+
+const CalloutIcon: FC<Pick<CalloutProps, 'variant' | 'icon'>> = ({
+  variant = 'default',
+  icon,
+}) => {
+  if (icon === false) {
+    return null;
+  }
+
+  if (!icon || icon === true) {
+    switch (variant) {
+      case 'inverted':
+      case 'success':
+        icon = CheckIcon;
+        break;
+      case 'warning':
+        icon = WarningIcon;
+        break;
+      case 'error':
+        icon = ErrorIcon;
+        break;
+      default:
+        icon = InfoIcon;
+    }
+  }
+
+  return <Icon id={variant} icon={icon} className={classes.icon} />;
+};

app/javascript/mastodon/components/callout/styles.module.css

@@ -0,0 +1,125 @@
+.wrapper {
+  display: flex;
+  align-items: start;
+  padding: 12px;
+  gap: 8px;
+  background-color: var(--color-bg-brand-softer);
+  color: var(--color-text-primary);
+  border-radius: 12px;
+}
+
+.icon {
+  padding: 4px;
+  border-radius: 9999px;
+  width: 1rem;
+  height: 1rem;
+}
+
+.content {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+@media screen and (width >= 630px) {
+  .content {
+    flex-direction: row;
+  }
+}
+
+.icon + .content,
+.wrapper:has(.close) .content {
+  margin-top: 2px;
+}
+
+.body {
+  flex-grow: 1;
+
+  h3 {
+    font-weight: 500;
+  }
+}
+
+.actionWrapper {
+  display: flex;
+  gap: 8px;
+  align-items: start;
+}
+
+.action {
+  appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  font-weight: 500;
+  padding: 0;
+  text-decoration: underline;
+  transition: color 0.1s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-brand-soft);
+  }
+}
+
+.close {
+  color: inherit;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.variantDefault {
+  .icon {
+    background-color: var(--color-bg-brand-soft);
+  }
+}
+
+/* .variantSubtle {
+  border: 1px solid var(--color-bg-brand-softer);
+  background-color: var(--color-bg-primary);
+
+  .icon {
+    background-color: var(--color-bg-brand-softer);
+  }
+} */
+
+.variantFeature {
+  background-color: var(--color-bg-brand-base);
+  color: var(--color-text-on-brand-base);
+
+  button:hover {
+    color: color-mix(var(--color-text-on-brand-base), transparent 20%);
+  }
+}
+
+.variantInverted {
+  background-color: var(--color-bg-inverted);
+  color: var(--color-text-on-inverted);
+}
+
+.variantSuccess {
+  background-color: var(--color-bg-success-softer);
+
+  .icon {
+    background-color: var(--color-bg-success-soft);
+  }
+}
+
+.variantWarning {
+  background-color: var(--color-bg-warning-softer);
+
+  .icon {
+    background-color: var(--color-bg-warning-soft);
+  }
+}
+
+.variantError {
+  background-color: var(--color-bg-error-softer);
+
+  .icon {
+    background-color: var(--color-bg-error-soft);
+  }
+}

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

@@ -0,0 +1,3 @@
+export { TextInputField } from './text_input_field';
+export { TextAreaField } from './text_area_field';
+export { SelectField } from './select_field';

app/javascript/mastodon/components/form_fields/select_field.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SelectField } from './select_field';
+
+const meta = {
+  title: 'Components/Form Fields/SelectField',
+  component: SelectField,
+  args: {
+    label: 'Fruit preference',
+    hint: 'Select your favourite fruit or not. Up to you.',
+  },
+  render(args) {
+    // Component styles require a wrapper class at the moment
+    return (
+      <div className='simple_form'>
+        <SelectField {...args}>
+          <option>Apple</option>
+          <option>Banana</option>
+          <option>Kiwi</option>
+          <option>Lemon</option>
+          <option>Mango</option>
+          <option>Orange</option>
+          <option>Pomelo</option>
+          <option>Strawberries</option>
+          <option>Something else</option>
+        </SelectField>
+      </div>
+    );
+  },
+} satisfies Meta<typeof SelectField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Optional: Story = {
+  args: {
+    required: false,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    required: false,
+    hasError: true,
+  },
+};

app/javascript/mastodon/components/form_fields/select_field.tsx

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
+
+import { FormFieldWrapper } from './wrapper';
+import type { CommonFieldWrapperProps } from './wrapper';
+
+interface Props
+  extends ComponentPropsWithoutRef<'select'>, CommonFieldWrapperProps {}
+
+/**
+ * A simple form field for single-item selections.
+ * Provide selectable items via nested `<option>` elements.
+ *
+ * Accepts an optional `hint` and can be marked as required
+ * or optional (by explicitly setting `required={false}`)
+ */
+
+export const SelectField = forwardRef<HTMLSelectElement, Props>(
+  ({ id, label, hint, required, hasError, children, ...otherProps }, ref) => (
+    <FormFieldWrapper
+      label={label}
+      hint={hint}
+      required={required}
+      hasError={hasError}
+      inputId={id}
+    >
+      {(inputProps) => (
+        <div className='select-wrapper'>
+          <select {...otherProps} {...inputProps} ref={ref}>
+            {children}
+          </select>
+        </div>
+      )}
+    </FormFieldWrapper>
+  ),
+);
+
+SelectField.displayName = 'SelectField';

app/javascript/mastodon/components/form_fields/text_area_field.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TextAreaField } from './text_area_field';
+
+const meta = {
+  title: 'Components/Form Fields/TextAreaField',
+  component: TextAreaField,
+  args: {
+    label: 'Label',
+    hint: 'This is a description of this form field',
+  },
+  render(args) {
+    // Component styles require a wrapper class at the moment
+    return (
+      <div className='simple_form'>
+        <TextAreaField {...args} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof TextAreaField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Optional: Story = {
+  args: {
+    required: false,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    required: false,
+    hasError: true,
+  },
+};

app/javascript/mastodon/components/form_fields/text_area_field.tsx

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
+
+import { FormFieldWrapper } from './wrapper';
+import type { CommonFieldWrapperProps } from './wrapper';
+
+interface Props
+  extends ComponentPropsWithoutRef<'textarea'>, CommonFieldWrapperProps {}
+
+/**
+ * A simple form field for multi-line text.
+ *
+ * Accepts an optional `hint` and can be marked as required
+ * or optional (by explicitly setting `required={false}`)
+ */
+
+export const TextAreaField = forwardRef<HTMLTextAreaElement, Props>(
+  ({ id, label, hint, required, hasError, ...otherProps }, ref) => (
+    <FormFieldWrapper
+      label={label}
+      hint={hint}
+      required={required}
+      hasError={hasError}
+      inputId={id}
+    >
+      {(inputProps) => <textarea {...otherProps} {...inputProps} ref={ref} />}
+    </FormFieldWrapper>
+  ),
+);
+
+TextAreaField.displayName = 'TextAreaField';

app/javascript/mastodon/components/form_fields/text_input_field.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TextInputField } from './text_input_field';
+
+const meta = {
+  title: 'Components/Form Fields/TextInputField',
+  component: TextInputField,
+  args: {
+    label: 'Label',
+    hint: 'This is a description of this form field',
+  },
+  render(args) {
+    // Component styles require a wrapper class at the moment
+    return (
+      <div className='simple_form'>
+        <TextInputField {...args} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof TextInputField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Optional: Story = {
+  args: {
+    required: false,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    required: false,
+    hasError: true,
+  },
+};

app/javascript/mastodon/components/form_fields/text_input_field.tsx

@@ -0,0 +1,36 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
+
+import { FormFieldWrapper } from './wrapper';
+import type { CommonFieldWrapperProps } from './wrapper';
+
+interface Props
+  extends ComponentPropsWithoutRef<'input'>, CommonFieldWrapperProps {}
+
+/**
+ * A simple form field for single-line text.
+ *
+ * Accepts an optional `hint` and can be marked as required
+ * or optional (by explicitly setting `required={false}`)
+ */
+
+export const TextInputField = forwardRef<HTMLInputElement, Props>(
+  (
+    { id, label, hint, hasError, required, type = 'text', ...otherProps },
+    ref,
+  ) => (
+    <FormFieldWrapper
+      label={label}
+      hint={hint}
+      required={required}
+      hasError={hasError}
+      inputId={id}
+    >
+      {(inputProps) => (
+        <input type={type} {...otherProps} {...inputProps} ref={ref} />
+      )}
+    </FormFieldWrapper>
+  ),
+);
+
+TextInputField.displayName = 'TextInputField';

app/javascript/mastodon/components/form_fields/toggle.module.css

@@ -0,0 +1,70 @@
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.toggle {
+  --diameter: 20px;
+  --padding: 2px;
+  --transition: 0.2s ease-in-out;
+
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  width: calc(var(--diameter) * 2);
+  background: var(--color-bg-tertiary);
+  padding: var(--padding);
+  transition: background var(--transition);
+  box-sizing: border-box;
+}
+
+.toggle::before {
+  content: '';
+  height: var(--diameter);
+  width: var(--diameter);
+  border-radius: 9999px;
+  background: var(--color-text-on-brand-base);
+  box-shadow: 0 2px 4px 0 color-mix(var(--color-black), transparent 75%);
+  transition: transform var(--transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle,
+  .toggle::before {
+    transition: none;
+  }
+}
+
+.input:checked + .toggle {
+  background: var(--color-bg-brand-base);
+}
+
+.input:checked:is(:hover, :focus) + .toggle {
+  background: var(--color-bg-brand-base-hover);
+}
+
+.input:focus-visible + .toggle {
+  outline: var(--outline-focus-default);
+  outline-offset: 2px;
+}
+
+.input:checked + .toggle::before {
+  transform: translateX(calc(var(--diameter) - (var(--padding) * 2)));
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.input:disabled + .toggle {
+  opacity: 0.6;
+}
+
+:global([dir='rtl']) .input:checked + .toggle::before {
+  transform: translateX(calc(-1 * (var(--diameter) - (var(--padding) * 2))));
+}

app/javascript/mastodon/components/form_fields/toggle_field.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PlainToggleField, ToggleField } from './toggle_field';
+
+const meta = {
+  title: 'Components/Form Fields/ToggleField',
+  component: ToggleField,
+  args: {
+    label: 'Label',
+    hint: 'This is a description of this form field',
+    disabled: false,
+    size: 20,
+  },
+  argTypes: {
+    size: {
+      control: { type: 'range', min: 10, max: 40, step: 1 },
+    },
+  },
+  render(args) {
+    // Component styles require a wrapper class at the moment
+    return (
+      <div className='simple_form'>
+        <ToggleField {...args} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof ToggleField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {};
+
+export const Required: Story = {
+  args: {
+    required: true,
+  },
+};
+
+export const Optional: Story = {
+  args: {
+    required: false,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    required: false,
+    hasError: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const Plain: Story = {
+  render(props) {
+    return <PlainToggleField {...props} />;
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 12,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 36,
+  },
+};

app/javascript/mastodon/components/form_fields/toggle_field.tsx

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithoutRef, CSSProperties } from 'react';
+import { forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+import classes from './toggle.module.css';
+import type { CommonFieldWrapperProps } from './wrapper';
+import { FormFieldWrapper } from './wrapper';
+
+type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
+  size?: number;
+};
+
+export const ToggleField = forwardRef<
+  HTMLInputElement,
+  Props & CommonFieldWrapperProps
+>(({ id, label, hint, hasError, required, ...otherProps }, ref) => (
+  <FormFieldWrapper
+    label={label}
+    hint={hint}
+    required={required}
+    hasError={hasError}
+    inputId={id}
+  >
+    {(inputProps) => (
+      <PlainToggleField {...otherProps} {...inputProps} ref={ref} />
+    )}
+  </FormFieldWrapper>
+));
+
+ToggleField.displayName = 'ToggleField';
+
+export const PlainToggleField = forwardRef<HTMLInputElement, Props>(
+  ({ className, size, ...otherProps }, ref) => (
+    <>
+      <input
+        {...otherProps}
+        type='checkbox'
+        className={classes.input}
+        ref={ref}
+      />
+      <span
+        className={classNames(classes.toggle, className)}
+        style={
+          { '--diameter': size ? `${size}px` : undefined } as CSSProperties
+        }
+        hidden
+      />
+    </>
+  ),
+);
+PlainToggleField.displayName = 'PlainToggleField';

app/javascript/mastodon/components/form_fields/wrapper.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+
+import type { ReactNode, FC } from 'react';
+import { useId } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+interface InputProps {
+  id: string;
+  required?: boolean;
+  'aria-describedby'?: string;
+}
+
+interface FieldWrapperProps {
+  label: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  hasError?: boolean;
+  inputId?: string;
+  children: (inputProps: InputProps) => ReactNode;
+}
+
+/**
+ * These types can be extended when creating individual field components.
+ */
+export type CommonFieldWrapperProps = Pick<
+  FieldWrapperProps,
+  'label' | 'hint' | 'hasError'
+>;
+
+/**
+ * A simple form field wrapper for adding a label and hint to enclosed components.
+ * Accepts an optional `hint` and can be marked as required
+ * or optional (by explicitly setting `required={false}`)
+ */
+
+export const FormFieldWrapper: FC<FieldWrapperProps> = ({
+  inputId: inputIdProp,
+  label,
+  hint,
+  required,
+  hasError,
+  children,
+}) => {
+  const uniqueId = useId();
+  const inputId = inputIdProp || `${uniqueId}-input`;
+  const hintId = `${inputIdProp || uniqueId}-hint`;
+  const hasHint = !!hint;
+
+  const inputProps: InputProps = {
+    required,
+    id: inputId,
+  };
+  if (hasHint) {
+    inputProps['aria-describedby'] = hintId;
+  }
+
+  return (
+    <div
+      className={classNames('input with_block_label', {
+        field_with_errors: hasError,
+      })}
+    >
+      <div className='label_input'>
+        <label htmlFor={inputId}>
+          {label}
+          {required !== undefined && <RequiredMark required={required} />}
+        </label>
+
+        {hasHint && (
+          <span className='hint' id={hintId}>
+            {hint}
+          </span>
+        )}
+
+        <div className='label_input__wrapper'>{children(inputProps)}</div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * If `required` is explicitly set to `false` rather than `undefined`,
+ * the field will be visually marked as "optional".
+ */
+
+const RequiredMark: FC<{ required?: boolean }> = ({ required }) =>
+  required ? (
+    <>
+      {' '}
+      <abbr aria-hidden='true'>*</abbr>
+    </>
+  ) : (
+    <>
+      {' '}
+      <FormattedMessage id='form_field.optional' defaultMessage='(optional)' />
+    </>
+  );

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

@@ -0,0 +1,179 @@
+import { useEffect, useMemo, useCallback } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+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 MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
+import { openModal } from 'mastodon/actions/modal';
+import { Column } from 'mastodon/components/column';
+import { ColumnHeader } from 'mastodon/components/column_header';
+import { Dropdown } from 'mastodon/components/dropdown_menu';
+import { Icon } from 'mastodon/components/icon';
+import ScrollableList from 'mastodon/components/scrollable_list';
+import {
+  createCollection,
+  fetchAccountCollections,
+  selectMyCollections,
+} from 'mastodon/reducers/slices/collections';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+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',
+  },
+  delete: {
+    id: 'collections.delete_collection',
+    defaultMessage: 'Delete collection',
+  },
+  more: { id: 'status.more', defaultMessage: 'More' },
+});
+
+const ListItem: React.FC<{
+  id: string;
+  name: string;
+}> = ({ id, name }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const handleDeleteClick = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'CONFIRM_DELETE_LIST',
+        modalProps: {
+          listId: id,
+        },
+      }),
+    );
+  }, [dispatch, id]);
+
+  const menu = useMemo(
+    () => [
+      { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
+      { text: intl.formatMessage(messages.delete), action: handleDeleteClick },
+    ],
+    [intl, id, handleDeleteClick],
+  );
+
+  return (
+    <div className='lists__item'>
+      <Link to={`/collections/${id}`} className='lists__item__title'>
+        <span>{name}</span>
+      </Link>
+
+      <Dropdown
+        scrollKey='collections'
+        items={menu}
+        icon='ellipsis-h'
+        iconComponent={MoreHorizIcon}
+        title={intl.formatMessage(messages.more)}
+      />
+    </div>
+  );
+};
+
+export const Collections: React.FC<{
+  multiColumn?: boolean;
+}> = ({ multiColumn }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+  const me = useAppSelector((state) => state.meta.get('me') as string);
+  const { collections, status } = useAppSelector(selectMyCollections);
+
+  useEffect(() => {
+    void dispatch(fetchAccountCollections({ accountId: me }));
+  }, [dispatch, me]);
+
+  const addDummyCollection = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+
+      void dispatch(
+        createCollection({
+          payload: {
+            name: 'Test Collection',
+            description: 'A useful test collection',
+            discoverable: true,
+            sensitive: false,
+          },
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  const emptyMessage =
+    status === 'error' ? (
+      <FormattedMessage
+        id='collections.error_loading_collections'
+        defaultMessage='There was an error when trying to load your collections.'
+      />
+    ) : (
+      <>
+        <span>
+          <FormattedMessage
+            id='collections.no_collections_yet'
+            defaultMessage='No collections yet.'
+          />
+          <br />
+          <FormattedMessage
+            id='collections.create_a_collection_hint'
+            defaultMessage='Create a collection to recommend or share your favourite accounts with others.'
+          />
+        </span>
+
+        <SquigglyArrow className='empty-column-indicator__arrow' />
+      </>
+    );
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      label={intl.formatMessage(messages.heading)}
+    >
+      <ColumnHeader
+        title={intl.formatMessage(messages.heading)}
+        icon='list-ul'
+        iconComponent={ListAltIcon}
+        multiColumn={multiColumn}
+        extraButton={
+          <Link
+            to='/collections/new'
+            className='column-header__button'
+            title={intl.formatMessage(messages.create)}
+            aria-label={intl.formatMessage(messages.create)}
+            onClick={addDummyCollection}
+          >
+            <Icon id='plus' icon={AddIcon} />
+          </Link>
+        }
+      />
+
+      <ScrollableList
+        scrollKey='collections'
+        emptyMessage={emptyMessage}
+        isLoading={status === 'loading'}
+        bindToDocument={!multiColumn}
+      >
+        {collections.map((item) => (
+          <ListItem key={item.id} id={item.id} name={item.name} />
+        ))}
+      </ScrollableList>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.heading)}</title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};

app/javascript/mastodon/features/collections/utils.ts

@@ -0,0 +1,11 @@
+import {
+  isClientFeatureEnabled,
+  isServerFeatureEnabled,
+} from '@/mastodon/utils/environment';
+
+export function areCollectionsEnabled() {
+  return (
+    isClientFeatureEnabled('collections') &&
+    isServerFeatureEnabled('collections')
+  );
+}

app/javascript/mastodon/features/compose/components/upload.tsx

@@ -10,8 +10,8 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
 import CloseIcon from '@/material-icons/400-20px/close.svg?react';
-import SoundIcon from '@/material-icons/400-24px/audio.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
+import SoundIcon from '@/material-icons/400-24px/graphic_eq.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import { undoUploadCompose } from 'mastodon/actions/compose';
 import { openModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/lists/new.tsx

@@ -20,6 +20,7 @@ import { Avatar } from 'mastodon/components/avatar';
 import { AvatarGroup } from 'mastodon/components/avatar_group';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
+import { SelectField, TextInputField } from 'mastodon/components/form_fields';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import type { List } from 'mastodon/models/list';
@@ -149,68 +150,49 @@ const NewList: React.FC<{ list?: List | null }> = ({ list }) => {
   return (
     <form className='simple_form app-form' onSubmit={handleSubmit}>
       <div className='fields-group'>
-        <div className='input with_label'>
-          <div className='label_input'>
-            <label htmlFor='list_title'>
-              <FormattedMessage
-                id='lists.list_name'
-                defaultMessage='List name'
-              />
-            </label>
-
-            <div className='label_input__wrapper'>
-              <input
-                id='list_title'
-                type='text'
-                value={title}
-                onChange={handleTitleChange}
-                maxLength={30}
-                required
-                placeholder=' '
-              />
-            </div>
-          </div>
-        </div>
+        <TextInputField
+          required
+          maxLength={30}
+          label={
+            <FormattedMessage id='lists.list_name' defaultMessage='List name' />
+          }
+          value={title}
+          onChange={handleTitleChange}
+          id='list_title'
+        />
       </div>
 
       <div className='fields-group'>
-        <div className='input with_label'>
-          <div className='label_input'>
-            <label htmlFor='list_replies_policy'>
-              <FormattedMessage
-                id='lists.show_replies_to'
-                defaultMessage='Include replies from list members to'
-              />
-            </label>
-
-            <div className='label_input__wrapper'>
-              <select
-                id='list_replies_policy'
-                value={repliesPolicy}
-                onChange={handleRepliesPolicyChange}
-              >
-                <FormattedMessage
-                  id='lists.replies_policy.none'
-                  defaultMessage='No one'
-                >
-                  {(msg) => <option value='none'>{msg}</option>}
-                </FormattedMessage>
-                <FormattedMessage
-                  id='lists.replies_policy.list'
-                  defaultMessage='Members of the list'
-                >
-                  {(msg) => <option value='list'>{msg}</option>}
-                </FormattedMessage>
-                <FormattedMessage
-                  id='lists.replies_policy.followed'
-                  defaultMessage='Any followed user'
-                >
-                  {(msg) => <option value='followed'>{msg}</option>}
-                </FormattedMessage>
-              </select>
-            </div>
-          </div>
-        </div>
+        <SelectField
+          label={
+            <FormattedMessage
+              id='lists.show_replies_to'
+              defaultMessage='Include replies from list members to'
+            />
+          }
+          value={repliesPolicy}
+          onChange={handleRepliesPolicyChange}
+          id='list_replies_policy'
+        >
+          <FormattedMessage
+            id='lists.replies_policy.none'
+            defaultMessage='No one'
+          >
+            {(msg) => <option value='none'>{msg}</option>}
+          </FormattedMessage>
+          <FormattedMessage
+            id='lists.replies_policy.list'
+            defaultMessage='Members of the list'
+          >
+            {(msg) => <option value='list'>{msg}</option>}
+          </FormattedMessage>
+          <FormattedMessage
+            id='lists.replies_policy.followed'
+            defaultMessage='Any followed user'
+          >
+            {(msg) => <option value='followed'>{msg}</option>}
+          </FormattedMessage>
+        </SelectField>
       </div>
 
       {id && (

app/javascript/mastodon/features/onboarding/profile.tsx

@@ -16,6 +16,7 @@ import { closeOnboarding } from 'mastodon/actions/onboarding';
 import { Button } from 'mastodon/components/button';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
+import { TextAreaField, TextInputField } from 'mastodon/components/form_fields';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { me } from 'mastodon/initial_state';
@@ -212,62 +213,47 @@ export const Profile: React.FC<{
           </div>
 
           <div className='fields-group'>
-            <div
-              className={classNames('input with_block_label', {
-                field_with_errors: !!errors?.display_name,
-              })}
-            >
-              <label htmlFor='display_name'>
+            <TextInputField
+              maxLength={30}
+              label={
                 <FormattedMessage
                   id='onboarding.profile.display_name'
                   defaultMessage='Display name'
                 />
-              </label>
-              <span className='hint'>
+              }
+              hint={
                 <FormattedMessage
                   id='onboarding.profile.display_name_hint'
                   defaultMessage='Your full name or your fun name…'
                 />
-              </span>
-              <div className='label_input'>
-                <input
-                  id='display_name'
-                  type='text'
-                  value={displayName}
-                  onChange={handleDisplayNameChange}
-                  maxLength={30}
-                />
-              </div>
-            </div>
+              }
+              value={displayName}
+              onChange={handleDisplayNameChange}
+              hasError={!!errors?.display_name}
+              id='display_name'
+            />
           </div>
 
           <div className='fields-group'>
-            <div
-              className={classNames('input with_block_label', {
-                field_with_errors: !!errors?.note,
-              })}
-            >
-              <label htmlFor='note'>
+            <TextAreaField
+              maxLength={500}
+              label={
                 <FormattedMessage
                   id='onboarding.profile.note'
                   defaultMessage='Bio'
                 />
-              </label>
-              <span className='hint'>
+              }
+              hint={
                 <FormattedMessage
                   id='onboarding.profile.note_hint'
                   defaultMessage='You can @mention other people or #hashtags…'
                 />
-              </span>
-              <div className='label_input'>
-                <textarea
-                  id='note'
-                  value={note}
-                  onChange={handleNoteChange}
-                  maxLength={500}
-                />
-              </div>
-            </div>
+              }
+              value={note}
+              onChange={handleNoteChange}
+              hasError={!!errors?.note}
+              id='note'
+            />
           </div>
 
           <label className='app-form__toggle'>

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

@@ -63,6 +63,7 @@ import {
   Lists,
   ListEdit,
   ListMembers,
+  Collections,
   Blocks,
   DomainBlocks,
   Mutes,
@@ -85,6 +86,7 @@ import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
 import '../../components/status';
+import { areCollectionsEnabled } from '../collections/utils';
 
 const messages = defineMessages({
   beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' },
@@ -227,6 +229,9 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
             <WrappedRoute path='/mutes' component={Mutes} content={children} />
             <WrappedRoute path='/lists' component={Lists} content={children} />
+            {areCollectionsEnabled() &&
+              <WrappedRoute path='/collections' component={Collections} content={children} />
+            }    
 
             <Route component={BundleColumnError} />
           </WrappedSwitch>

app/javascript/mastodon/features/ui/util/async-components.js

@@ -42,6 +42,12 @@ export function Lists () {
   return import('../../lists');
 }
 
+export function Collections () {
+  return import('../../collections').then(
+    module => ({default: module.Collections})
+  );
+}
+
 export function Status () {
   return import('../../status');
 }

app/javascript/mastodon/locales/be.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Прагледзець зыходны код",
   "footer.status": "Статус",
   "footer.terms_of_service": "Умовы выкарыстання",
+  "form_field.optional": "(неабавязкова)",
   "generic.saved": "Захавана",
   "getting_started.heading": "Пачатак працы",
   "hashtag.admin_moderation": "Адкрыць інтэрфейс мадэратара для #{name}",

app/javascript/mastodon/locales/da.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Vis kildekode",
   "footer.status": "Status",
   "footer.terms_of_service": "Tjenestevilkår",
+  "form_field.optional": "(valgfri)",
   "generic.saved": "Gemt",
   "getting_started.heading": "Startmenu",
   "hashtag.admin_moderation": "Åbn modereringsbrugerflade for #{name}",

app/javascript/mastodon/locales/de.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Quellcode anzeigen",
   "footer.status": "Status",
   "footer.terms_of_service": "Nutzungsbedingungen",
+  "form_field.optional": "(optional)",
   "generic.saved": "Gespeichert",
   "getting_started.heading": "Auf gehts!",
   "hashtag.admin_moderation": "#{name} moderieren",

app/javascript/mastodon/locales/el.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Προβολή πηγαίου κώδικα",
   "footer.status": "Κατάσταση",
   "footer.terms_of_service": "Όροι υπηρεσίας",
+  "form_field.optional": "(προαιρετικό)",
   "generic.saved": "Αποθηκεύτηκε",
   "getting_started.heading": "Ας ξεκινήσουμε",
   "hashtag.admin_moderation": "Άνοιγμα διεπαφής συντονισμού για το #{name}",

app/javascript/mastodon/locales/en-GB.json

@@ -454,6 +454,7 @@
   "footer.source_code": "View source code",
   "footer.status": "Status",
   "footer.terms_of_service": "Terms of service",
+  "form_field.optional": "(optional)",
   "generic.saved": "Saved",
   "getting_started.heading": "Getting started",
   "hashtag.admin_moderation": "Open moderation interface for #{name}",

app/javascript/mastodon/locales/en.json

@@ -187,6 +187,7 @@
   "bundle_modal_error.close": "Close",
   "bundle_modal_error.message": "Something went wrong while loading this screen.",
   "bundle_modal_error.retry": "Try again",
+  "callout.dismiss": "Dismiss",
   "carousel.current": "<sr>Slide</sr> {current, number} / {max, number}",
   "carousel.slide": "Slide {current, number} of {max, number}",
   "closed_registrations.other_server_instructions": "Since Mastodon is decentralized, you can create an account on another server and still interact with this one.",
@@ -194,9 +195,16 @@
   "closed_registrations_modal.find_another_server": "Find another server",
   "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.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.error_loading_collections": "There was an error when trying to load your collections.",
+  "collections.no_collections_yet": "No collections yet.",
+  "collections.view_collection": "View collection",
   "column.about": "About",
   "column.blocks": "Blocked users",
   "column.bookmarks": "Bookmarks",
+  "column.collections": "My collections",
   "column.community": "Local timeline",
   "column.create_list": "Create list",
   "column.direct": "Private mentions",
@@ -454,6 +462,7 @@
   "footer.source_code": "View source code",
   "footer.status": "Status",
   "footer.terms_of_service": "Terms of service",
+  "form_field.optional": "(optional)",
   "generic.saved": "Saved",
   "getting_started.heading": "Getting started",
   "hashtag.admin_moderation": "Open moderation interface for #{name}",

app/javascript/mastodon/locales/es-AR.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Ver código fuente",
   "footer.status": "Estado",
   "footer.terms_of_service": "Términos del servicio",
+  "form_field.optional": "(opcional)",
   "generic.saved": "Guardado",
   "getting_started.heading": "Inicio de Mastodon",
   "hashtag.admin_moderation": "Abrir interface de moderación para #{name}",

app/javascript/mastodon/locales/es-MX.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Ver código fuente",
   "footer.status": "Estado",
   "footer.terms_of_service": "Condiciones del servicio",
+  "form_field.optional": "(opcional)",
   "generic.saved": "Guardado",
   "getting_started.heading": "Primeros pasos",
   "hashtag.admin_moderation": "Abrir interfaz de moderación para #{name}",

app/javascript/mastodon/locales/es.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Ver código fuente",
   "footer.status": "Estado",
   "footer.terms_of_service": "Términos del servicio",
+  "form_field.optional": "(opcional)",
   "generic.saved": "Guardado",
   "getting_started.heading": "Primeros pasos",
   "hashtag.admin_moderation": "Abrir interfaz de moderación para #{name}",

app/javascript/mastodon/locales/fi.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Näytä lähdekoodi",
   "footer.status": "Tila",
   "footer.terms_of_service": "Käyttöehdot",
+  "form_field.optional": "(valinnainen)",
   "generic.saved": "Tallennettu",
   "getting_started.heading": "Näin pääset alkuun",
   "hashtag.admin_moderation": "Avaa tunnisteen #{name} moderointinäkymä",

app/javascript/mastodon/locales/gl.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Ver código fonte",
   "footer.status": "Estado",
   "footer.terms_of_service": "Condicións do servizo",
+  "form_field.optional": "(optativo)",
   "generic.saved": "Gardado",
   "getting_started.heading": "Primeiros pasos",
   "hashtag.admin_moderation": "Abrir interface de moderación para ##{name}",

app/javascript/mastodon/locales/is.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Skoða frumkóða",
   "footer.status": "Staða",
   "footer.terms_of_service": "Þjónustuskilmálar",
+  "form_field.optional": "(valfrjálst)",
   "generic.saved": "Vistað",
   "getting_started.heading": "Komast í gang",
   "hashtag.admin_moderation": "Opna umsjónarviðmót fyrir #{name}",

app/javascript/mastodon/locales/it.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Visualizza il codice sorgente",
   "footer.status": "Stato",
   "footer.terms_of_service": "Termini di servizio",
+  "form_field.optional": "(opzionale)",
   "generic.saved": "Salvato",
   "getting_started.heading": "Per iniziare",
   "hashtag.admin_moderation": "Apri l'interfaccia di moderazione per #{name}",

app/javascript/mastodon/locales/nl.json

@@ -57,6 +57,7 @@
   "account.go_to_profile": "Ga naar profiel",
   "account.hide_reblogs": "Boosts van @{name} verbergen",
   "account.in_memoriam": "In memoriam.",
+  "account.joined_long": "Lid geworden op {date}",
   "account.joined_short": "Geregistreerd op",
   "account.languages": "Getoonde talen wijzigen",
   "account.link_verified_on": "Eigendom van deze link is gecontroleerd op {date}",
@@ -90,6 +91,8 @@
   "account.unmute": "@{name} niet langer negeren",
   "account.unmute_notifications_short": "Meldingen niet langer negeren",
   "account.unmute_short": "Niet langer negeren",
+  "account_fields_modal.close": "Sluiten",
+  "account_fields_modal.title": "{name}'s info",
   "account_note.placeholder": "Klik om een opmerking toe te voegen",
   "admin.dashboard.daily_retention": "Retentiegraad van gebruikers per dag, vanaf registratie",
   "admin.dashboard.monthly_retention": "Retentiegraad van gebruikers per maand, vanaf registratie",
@@ -589,6 +592,7 @@
   "load_pending": "{count, plural, one {# nieuw item} other {# nieuwe items}}",
   "loading_indicator.label": "Laden…",
   "media_gallery.hide": "Verberg",
+  "minicard.more_items": "+{count}",
   "moved_to_account_banner.text": "Omdat je naar {movedToAccount} bent verhuisd is jouw account {disabledAccount} momenteel uitgeschakeld.",
   "mute_modal.hide_from_notifications": "Onder meldingen verbergen",
   "mute_modal.hide_options": "Opties verbergen",

app/javascript/mastodon/locales/pt-PT.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Ver código-fonte",
   "footer.status": "Estado",
   "footer.terms_of_service": "Termos de serviço",
+  "form_field.optional": "(opcional)",
   "generic.saved": "Guardado",
   "getting_started.heading": "Primeiros passos",
   "hashtag.admin_moderation": "Abrir interface de moderação para #{name}",

app/javascript/mastodon/locales/sq.json

@@ -452,6 +452,7 @@
   "footer.source_code": "Shihni kodin burim",
   "footer.status": "Gjendje",
   "footer.terms_of_service": "Kushte shërbimi",
+  "form_field.optional": "(opsionale)",
   "generic.saved": "U ruajt",
   "getting_started.heading": "Si t’ia fillohet",
   "hashtag.admin_moderation": "Hap ndërfaqe moderimi për #{name}",

app/javascript/mastodon/locales/vi.json

@@ -454,6 +454,7 @@
   "footer.source_code": "Mã nguồn",
   "footer.status": "Trạng thái",
   "footer.terms_of_service": "Điều khoản dịch vụ",
+  "form_field.optional": "(tùy chọn)",
   "generic.saved": "Đã lưu",
   "getting_started.heading": "Quản lý",
   "hashtag.admin_moderation": "Mở giao diện quản trị #{name}",

app/javascript/mastodon/locales/zh-CN.json

@@ -454,6 +454,7 @@
   "footer.source_code": "查看源代码",
   "footer.status": "状态",
   "footer.terms_of_service": "服务条款",
+  "form_field.optional": "（选填）",
   "generic.saved": "已保存",
   "getting_started.heading": "开始使用",
   "hashtag.admin_moderation": "打开 #{name} 的管理界面",

app/javascript/mastodon/locales/zh-TW.json

@@ -454,6 +454,7 @@
   "footer.source_code": "檢視原始碼",
   "footer.status": "狀態",
   "footer.terms_of_service": "服務條款",
+  "form_field.optional": "（可選的）",
   "generic.saved": "已儲存",
   "getting_started.heading": "開始使用",
   "hashtag.admin_moderation": "開啟 #{name} 的管理介面",

app/javascript/mastodon/reducers/slices/collections.ts

@@ -0,0 +1,158 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import {
+  apiCreateCollection,
+  apiGetAccountCollections,
+  // apiGetCollection,
+} from '@/mastodon/api/collections';
+import type {
+  ApiCollectionJSON,
+  ApiCreateCollectionPayload,
+} from '@/mastodon/api_types/collections';
+import {
+  createAppSelector,
+  createDataLoadingThunk,
+} from '@/mastodon/store/typed_functions';
+
+type QueryStatus = 'idle' | 'loading' | 'error';
+
+interface CollectionState {
+  // Collections mapped by collection id
+  collections: Record<string, ApiCollectionJSON>;
+  // Lists of collection ids mapped by account id
+  accountCollections: Record<
+    string,
+    {
+      collectionIds: string[];
+      status: QueryStatus;
+    }
+  >;
+}
+
+const initialState: CollectionState = {
+  collections: {},
+  accountCollections: {},
+};
+
+const collectionSlice = createSlice({
+  name: 'collections',
+  initialState,
+  reducers: {},
+  extraReducers(builder) {
+    /**
+     * Fetching account collections
+     */
+    builder.addCase(fetchAccountCollections.pending, (state, action) => {
+      const { accountId } = action.meta.arg;
+      state.accountCollections[accountId] ??= {
+        status: 'loading',
+        collectionIds: [],
+      };
+      state.accountCollections[accountId].status = 'loading';
+    });
+
+    builder.addCase(fetchAccountCollections.rejected, (state, action) => {
+      const { accountId } = action.meta.arg;
+      state.accountCollections[accountId] = {
+        status: 'error',
+        collectionIds: [],
+      };
+    });
+
+    builder.addCase(fetchAccountCollections.fulfilled, (state, actions) => {
+      const { collections } = actions.payload;
+
+      const collectionsMap: Record<string, ApiCollectionJSON> = {};
+      const collectionIds: string[] = [];
+
+      collections.forEach((collection) => {
+        const { id } = collection;
+        collectionsMap[id] = collection;
+        collectionIds.push(id);
+      });
+
+      state.collections = collectionsMap;
+      state.accountCollections[actions.meta.arg.accountId] = {
+        collectionIds,
+        status: 'idle',
+      };
+    });
+
+    /**
+     * Creating a collection
+     */
+
+    builder.addCase(createCollection.fulfilled, (state, actions) => {
+      const { collection } = actions.payload;
+
+      state.collections[collection.id] = collection;
+      if (state.accountCollections[collection.account_id]) {
+        state.accountCollections[collection.account_id]?.collectionIds.unshift(
+          collection.id,
+        );
+      } else {
+        state.accountCollections[collection.account_id] = {
+          collectionIds: [collection.id],
+          status: 'idle',
+        };
+      }
+    });
+  },
+});
+
+export const fetchAccountCollections = createDataLoadingThunk(
+  `${collectionSlice.name}/fetchAccountCollections`,
+  ({ accountId }: { accountId: string }) => apiGetAccountCollections(accountId),
+);
+
+// To be added soon…
+//
+// export const fetchCollection = createDataLoadingThunk(
+//   `${collectionSlice.name}/fetchCollection`,
+//   ({ collectionId }: { collectionId: string }) =>
+//     apiGetCollection(collectionId),
+// );
+
+export const createCollection = createDataLoadingThunk(
+  `${collectionSlice.name}/createCollection`,
+  ({ payload }: { payload: ApiCreateCollectionPayload }) =>
+    apiCreateCollection(payload),
+);
+
+export const collections = collectionSlice.reducer;
+
+/**
+ * Selectors
+ */
+
+interface AccountCollectionQuery {
+  status: QueryStatus;
+  collections: ApiCollectionJSON[];
+}
+
+export const selectMyCollections = createAppSelector(
+  [
+    (state) => state.meta.get('me') as string,
+    (state) => state.collections.accountCollections,
+    (state) => state.collections.collections,
+  ],
+  (me, collectionsByAccountId, collectionsById) => {
+    const myCollectionsQuery = collectionsByAccountId[me];
+
+    if (!myCollectionsQuery) {
+      return {
+        status: 'error',
+        collections: [] as ApiCollectionJSON[],
+      } satisfies AccountCollectionQuery;
+    }
+
+    const { status, collectionIds } = myCollectionsQuery;
+
+    return {
+      status,
+      collections: collectionIds
+        .map((id) => collectionsById[id])
+        .filter((c) => !!c),
+    } satisfies AccountCollectionQuery;
+  },
+);

app/javascript/mastodon/reducers/slices/index.ts

@@ -1,5 +1,7 @@
 import { annualReport } from './annual_report';
+import { collections } from './collections';
 
 export const sliceReducers = {
   annualReport,
+  collections,
 };

app/javascript/mastodon/utils/environment.ts

@@ -12,13 +12,13 @@ export function isProduction() {
   else return import.meta.env.PROD;
 }
 
-export type ServerFeatures = 'fasp';
+export type ServerFeatures = 'fasp' | 'collections';
 
 export function isServerFeatureEnabled(feature: ServerFeatures) {
   return initialState?.features.includes(feature) ?? false;
 }
 
-type ClientFeatures = 'profile_redesign';
+type ClientFeatures = 'profile_redesign' | 'collections';
 
 export function isClientFeatureEnabled(feature: ClientFeatures) {
   try {

app/javascript/material-icons/400-24px/audio.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M280-240v-480h80v480h-80ZM440-80v-800h80v800h-80ZM120-400v-160h80v160h-80Zm480 160v-480h80v480h-80Zm160-160v-160h80v160h-80Z"/></svg>

app/javascript/material-icons/400-24px/block-fill.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm197-147q16-12 30-26t26-30L283-733q-16 12-30 26t-26 30l450 450Z"/></svg>

app/javascript/material-icons/400-24px/block.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448ZM480-480Z"/></svg>

app/javascript/material-icons/400-24px/error-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>

app/javascript/material-icons/400-24px/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

app/javascript/material-icons/400-24px/graphic_eq-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-240v-480h80v480h-80ZM440-80v-800h80v800h-80ZM120-400v-160h80v160h-80Zm480 160v-480h80v480h-80Zm160-160v-160h80v160h-80Z"/></svg>

app/javascript/material-icons/400-24px/graphic_eq.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-240v-480h80v480h-80ZM440-80v-800h80v800h-80ZM120-400v-160h80v160h-80Zm480 160v-480h80v480h-80Zm160-160v-160h80v160h-80Z"/></svg>