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

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');
 }