Profile editing: Finish image editing (#38235)

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

@@ -7,6 +7,7 @@ import { useHistory } from 'react-router-dom';
 
 import type { ModalType } from '@/mastodon/actions/modal';
 import { openModal } from '@/mastodon/actions/modal';
+import { AccountBio } from '@/mastodon/components/account_bio';
 import { Avatar } from '@/mastodon/components/avatar';
 import { Button } from '@/mastodon/components/button';
 import { DismissibleCallout } from '@/mastodon/components/callout/dismissible';
@@ -201,7 +202,11 @@ export const AccountEdit: FC = () => {
             />
           }
         >
-          <EmojiHTML htmlString={profile.bio} {...htmlHandlers} />
+          <AccountBio
+            showDropdown
+            accountId={profile.id}
+            className={classes.bio}
+          />
         </AccountEditSection>
 
         <AccountEditSection

app/javascript/mastodon/features/account_edit/modals/image_alt.tsx

@@ -1,12 +1,147 @@
-import type { FC } from 'react';
+import type { ChangeEventHandler, FC } from 'react';
+import { useCallback, useState } from 'react';
 
+import { FormattedMessage } from 'react-intl';
+
+import { CharacterCounter } from '@/mastodon/components/character_counter';
+import { Details } from '@/mastodon/components/details';
+import { TextAreaField } from '@/mastodon/components/form_fields';
+import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import { patchProfile } from '@/mastodon/reducers/slices/profile_edit';
 import type { ImageLocation } from '@/mastodon/reducers/slices/profile_edit';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
-import { DialogModal } from '../../ui/components/dialog_modal';
+import { ConfirmationModal } from '../../ui/components/confirmation_modals';
 import type { DialogModalProps } from '../../ui/components/dialog_modal';
 
+import classes from './styles.module.scss';
+
 export const ImageAltModal: FC<
   DialogModalProps & { location: ImageLocation }
-> = ({ onClose }) => {
-  return <DialogModal title='TODO' onClose={onClose} />;
+> = ({ onClose, location }) => {
+  const { profile, isPending } = useAppSelector((state) => state.profileEdit);
+
+  const initialAlt = profile?.[`${location}Description`];
+  const imageSrc = profile?.[`${location}Static`];
+
+  const [altText, setAltText] = useState(initialAlt ?? '');
+
+  const dispatch = useAppDispatch();
+  const handleSave = useCallback(() => {
+    void dispatch(
+      patchProfile({
+        [`${location}_description`]: altText,
+      }),
+    ).then(onClose);
+  }, [altText, dispatch, location, onClose]);
+
+  if (!imageSrc) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <ConfirmationModal
+      title={
+        initialAlt ? (
+          <FormattedMessage
+            id='account_edit.image_alt_modal.edit_title'
+            defaultMessage='Edit alt text'
+          />
+        ) : (
+          <FormattedMessage
+            id='account_edit.image_alt_modal.add_title'
+            defaultMessage='Add alt text'
+          />
+        )
+      }
+      onClose={onClose}
+      onConfirm={handleSave}
+      confirm={
+        <FormattedMessage
+          id='account_edit.upload_modal.done'
+          defaultMessage='Done'
+        />
+      }
+      updating={isPending}
+    >
+      <div className={classes.wrapper}>
+        <ImageAltTextField
+          imageSrc={imageSrc}
+          altText={altText}
+          onChange={setAltText}
+        />
+      </div>
+    </ConfirmationModal>
+  );
+};
+
+export const ImageAltTextField: FC<{
+  imageSrc: string;
+  altText: string;
+  onChange: (altText: string) => void;
+}> = ({ imageSrc, altText, onChange }) => {
+  const altLimit = useAppSelector(
+    (state) =>
+      state.server.getIn(
+        ['server', 'configuration', 'media_attachments', 'description_limit'],
+        150,
+      ) as number,
+  );
+
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+    (event) => {
+      onChange(event.currentTarget.value);
+    },
+    [onChange],
+  );
+
+  return (
+    <>
+      <img src={imageSrc} alt='' className={classes.altImage} />
+
+      <div>
+        <TextAreaField
+          label={
+            <FormattedMessage
+              id='account_edit.image_alt_modal.text_label'
+              defaultMessage='Alt text'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='account_edit.image_alt_modal.text_hint'
+              defaultMessage='Alt text helps screen reader users to understand your content.'
+            />
+          }
+          onChange={handleChange}
+          value={altText}
+        />
+        <CharacterCounter
+          currentString={altText}
+          maxLength={altLimit}
+          className={classes.altCounter}
+        />
+      </div>
+
+      <Details
+        summary={
+          <FormattedMessage
+            id='account_edit.image_alt_modal.details_title'
+            defaultMessage='Tips: Alt text for profile photos'
+          />
+        }
+        className={classes.altHint}
+      >
+        <FormattedMessage
+          id='account_edit.image_alt_modal.details_content'
+          defaultMessage='DO: <ul> <li>Describe yourself as pictured</li> <li>Use third person language (e.g. “Alex” instead of “me”)</li> <li>Be succinct – a few words is often enough</li> </ul> DON’T: <ul> <li>Start with “Photo of” – it’s redundant for screen readers</li> </ul> EXAMPLE: <ul> <li>“Alex wearing a green shirt and glasses”</li> </ul>'
+          values={{
+            ul: (chunks) => <ul>{chunks}</ul>,
+            li: (chunks) => <li>{chunks}</li>,
+          }}
+          tagName='div'
+        />
+      </Details>
+    </>
+  );
 };

app/javascript/mastodon/features/account_edit/modals/image_delete.tsx

@@ -1,12 +1,48 @@
+import { useCallback } from 'react';
 import type { FC } from 'react';
 
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '@/mastodon/components/button';
+import { deleteImage } from '@/mastodon/reducers/slices/profile_edit';
 import type { ImageLocation } from '@/mastodon/reducers/slices/profile_edit';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
 import { DialogModal } from '../../ui/components/dialog_modal';
 import type { DialogModalProps } from '../../ui/components/dialog_modal';
 
 export const ImageDeleteModal: FC<
   DialogModalProps & { location: ImageLocation }
-> = ({ onClose }) => {
-  return <DialogModal title='TODO' onClose={onClose} />;
+> = ({ onClose, location }) => {
+  const isPending = useAppSelector((state) => state.profileEdit.isPending);
+  const dispatch = useAppDispatch();
+  const handleDelete = useCallback(() => {
+    void dispatch(deleteImage({ location })).then(onClose);
+  }, [dispatch, location, onClose]);
+
+  return (
+    <DialogModal
+      onClose={onClose}
+      title={
+        <FormattedMessage
+          id='account_edit.image_delete_modal.title'
+          defaultMessage='Delete image?'
+        />
+      }
+      buttons={
+        <Button dangerous onClick={handleDelete} disabled={isPending}>
+          <FormattedMessage
+            id='account_edit.image_delete_modal.delete_button'
+            defaultMessage='Delete'
+          />
+        </Button>
+      }
+    >
+      <FormattedMessage
+        id='account_edit.image_delete_modal.confirm'
+        defaultMessage='Are you sure you want to delete this image? This action can’t be undone.'
+        tagName='p'
+      />
+    </DialogModal>
+  );
 };

app/javascript/mastodon/features/account_edit/modals/image_upload.tsx

@@ -8,9 +8,6 @@ import Cropper from 'react-easy-crop';
 
 import { setDragUploadEnabled } from '@/mastodon/actions/compose_typed';
 import { Button } from '@/mastodon/components/button';
-import { Callout } from '@/mastodon/components/callout';
-import { CharacterCounter } from '@/mastodon/components/character_counter';
-import { TextAreaField } from '@/mastodon/components/form_fields';
 import { RangeInput } from '@/mastodon/components/form_fields/range_input_field';
 import {
   selectImageInfo,
@@ -22,6 +19,7 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import { DialogModal } from '../../ui/components/dialog_modal';
 import type { DialogModalProps } from '../../ui/components/dialog_modal';
 
+import { ImageAltTextField } from './image_alt';
 import classes from './styles.module.scss';
 
 import 'react-easy-crop/react-easy-crop.css';
@@ -357,66 +355,19 @@ const StepAlt: FC<{
 }> = ({ imageBlob, onCancel, onComplete }) => {
   const [altText, setAltText] = useState('');
 
-  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
-    (event) => {
-      setAltText(event.currentTarget.value);
-    },
-    [],
-  );
-
   const handleComplete = useCallback(() => {
     onComplete(altText);
   }, [altText, onComplete]);
 
   const imageSrc = useMemo(() => URL.createObjectURL(imageBlob), [imageBlob]);
-  const altLimit = useAppSelector(
-    (state) =>
-      state.server.getIn(
-        ['server', 'configuration', 'media_attachments', 'description_limit'],
-        150,
-      ) as number,
-  );
 
   return (
     <>
-      <img src={imageSrc} alt='' className={classes.altImage} />
-
-      <div>
-        <TextAreaField
-          label={
-            <FormattedMessage
-              id='account_edit.upload_modal.step_alt.text_label'
-              defaultMessage='Alt text'
-            />
-          }
-          hint={
-            <FormattedMessage
-              id='account_edit.upload_modal.step_alt.text_hint'
-              defaultMessage='E.g. “Close-up photo of me wearing glasses and a blue shirt”'
-            />
-          }
-          onChange={handleChange}
-        />
-        <CharacterCounter
-          currentString={altText}
-          maxLength={altLimit}
-          className={classes.altCounter}
-        />
-      </div>
-
-      <Callout
-        title={
-          <FormattedMessage
-            id='account_edit.upload_modal.step_alt.callout_title'
-            defaultMessage='Let’s make Mastodon accessible for all'
-          />
-        }
-      >
-        <FormattedMessage
-          id='account_edit.upload_modal.step_alt.callout_text'
-          defaultMessage='Adding alt text to media helps people using screen readers to understand your content.'
-        />
-      </Callout>
+      <ImageAltTextField
+        imageSrc={imageSrc}
+        altText={altText}
+        onChange={setAltText}
+      />
 
       <div className={classes.cropActions}>
         <Button onClick={onCancel} secondary>

app/javascript/mastodon/features/account_edit/modals/index.ts

@@ -1,7 +1,7 @@
 export * from './bio_modal';
 export * from './fields_modals';
 export * from './fields_reorder_modal';
-export * from './image_alt';
+export { ImageAltModal } from './image_alt';
 export * from './image_delete';
 export * from './image_upload';
 export * from './name_modal';

app/javascript/mastodon/features/account_edit/modals/styles.module.scss

@@ -121,14 +121,25 @@
 }
 
 .altImage {
-  max-height: 300px;
+  max-height: 150px;
   object-fit: contain;
+  align-self: flex-start;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--avatar-border-radius);
 }
 
 .altCounter {
   color: var(--color-text-secondary);
 }
 
+.altHint {
+  ul {
+    padding-left: 1em;
+    list-style: disc;
+    margin-bottom: 1em;
+  }
+}
+
 .verifiedSteps {
   font-size: 15px;
 
@@ -157,29 +168,3 @@
     }
   }
 }
-
-.details {
-  color: var(--color-text-secondary);
-  font-size: 13px;
-  margin-top: 8px;
-
-  summary {
-    cursor: pointer;
-    font-weight: 600;
-    list-style: none;
-    margin-bottom: 8px;
-    text-decoration: underline;
-    text-decoration-style: dotted;
-  }
-
-  :global(.icon) {
-    width: 1.4em;
-    height: 1.4em;
-    vertical-align: middle;
-    transition: transform 0.2s ease-in-out;
-  }
-
-  &[open] :global(.icon) {
-    transform: rotate(-180deg);
-  }
-}

app/javascript/mastodon/features/account_edit/modals/verified_modal.tsx

@@ -2,10 +2,9 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { Details } from '@/mastodon/components/details';
 import { CopyLinkField } from '@/mastodon/components/form_fields/copy_link_field';
-import { Icon } from '@/mastodon/components/icon';
 import { createAppSelector, useAppSelector } from '@/mastodon/store';
-import ExpandArrowIcon from '@/material-icons/400-24px/expand_more.svg?react';
 
 import type { DialogModalProps } from '../../ui/components/dialog_modal';
 import { DialogModal } from '../../ui/components/dialog_modal';
@@ -53,20 +52,20 @@ export const VerifiedModal: FC<DialogModalProps> = ({ onClose }) => {
             }
             value={`<a rel="me" href="${accountUrl}">Mastodon</a>`}
           />
-          <details className={classes.details}>
-            <summary>
+          <Details
+            summary={
               <FormattedMessage
                 id='account_edit.verified_modal.invisible_link.summary'
                 defaultMessage='How do I make the link invisible?'
               />
-              <Icon icon={ExpandArrowIcon} id='arrow' />
-            </summary>
+            }
+          >
             <FormattedMessage
               id='account_edit.verified_modal.invisible_link.details'
               defaultMessage='Add the link to your header. The important part is rel="me" which prevents impersonation on websites with user-generated content. You can even use a link tag in the header of the page instead of {tag}, but the HTML must be accessible without executing JavaScript.'
               values={{ tag: <code>&lt;a&gt;</code> }}
             />
-          </details>
+          </Details>
         </li>
         <li>
           <FormattedMessage

app/javascript/mastodon/features/account_edit/styles.module.scss

@@ -40,6 +40,19 @@
   }
 }
 
+.bio {
+  unicode-bidi: plaintext;
+
+  p:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
 .field {
   padding: 12px 0;
   display: flex;

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -211,6 +211,7 @@ export const AccountHeader: React.FC<{
                   ))}
 
                 <AccountBio
+                  showDropdown
                   accountId={accountId}
                   className={classNames(
                     'account__header__content',