Merge commit '16c41e035bdd6e08927c950aeeb5332adbe8b6d5' into glitch-soc/merge-upstream

Conflicts:
- `lib/mastodon/version.rb`:
  Upstream bumped the Mastodon API version, glitch-soc has an extra glitch version.
  Bumped the Mastodon API version as upstream did.

app/javascript/mastodon/actions/compose_typed.ts

@@ -273,3 +273,7 @@ export const quoteComposeCancel = createAction('compose/quoteComposeCancel');
 export const setComposeQuotePolicy = createAction<ApiQuotePolicy>(
   'compose/setQuotePolicy',
 );
+
+export const setDragUploadEnabled = createAction<boolean>(
+  'compose/setDragUploadEnabled',
+);

app/javascript/mastodon/api/accounts.ts

@@ -67,5 +67,11 @@ export const apiGetFamiliarFollowers = (id: string) =>
 
 export const apiGetProfile = () => apiRequestGet<ApiProfileJSON>('v1/profile');
 
-export const apiPatchProfile = (params: ApiProfileUpdateParams) =>
+export const apiPatchProfile = (params: ApiProfileUpdateParams | FormData) =>
   apiRequestPatch<ApiProfileJSON>('v1/profile', params);
+
+export const apiDeleteProfileAvatar = () =>
+  apiRequestDelete('v1/profile/avatar');
+
+export const apiDeleteProfileHeader = () =>
+  apiRequestDelete('v1/profile/header');

app/javascript/mastodon/api_types/profile.ts

@@ -27,6 +27,8 @@ export interface ApiProfileJSON {
 export type ApiProfileUpdateParams = Partial<
   Pick<
     ApiProfileJSON,
+    | 'avatar_description'
+    | 'header_description'
     | 'display_name'
     | 'note'
     | 'locked'

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

@@ -26,6 +26,7 @@ export const CharacterCounter = polymorphicForwardRef<
       maxLength,
       as: Component = 'span',
       recommended = false,
+      className,
       ...props
     },
     ref,
@@ -39,6 +40,7 @@ export const CharacterCounter = polymorphicForwardRef<
         {...props}
         ref={ref}
         className={classNames(
+          className,
           classes.counter,
           currentLength > maxLength && !recommended && classes.counterError,
         )}

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Details } from './index';
+
+const meta = {
+  component: Details,
+  title: 'Components/Details',
+  args: {
+    summary: 'Here is the summary title',
+    children: (
+      <p>
+        And here are the details that are hidden until you click the summary.
+      </p>
+    ),
+  },
+  render(props) {
+    return (
+      <div style={{ width: '400px' }}>
+        <Details {...props} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof Details>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

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

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import ExpandArrowIcon from '@/material-icons/400-24px/expand_more.svg?react';
+
+import { Icon } from '../icon';
+
+import classes from './styles.module.scss';
+
+export const Details = forwardRef<
+  HTMLDetailsElement,
+  {
+    summary: ReactNode;
+    children: ReactNode;
+    className?: string;
+  } & ComponentPropsWithoutRef<'details'>
+>(({ summary, children, className, ...rest }, ref) => {
+  return (
+    <details
+      ref={ref}
+      className={classNames(classes.details, className)}
+      {...rest}
+    >
+      <summary>
+        {summary}
+        <Icon icon={ExpandArrowIcon} id='arrow' />
+      </summary>
+
+      {children}
+    </details>
+  );
+});
+Details.displayName = 'Details';

app/javascript/mastodon/components/details/styles.module.scss

@@ -0,0 +1,25 @@
+.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/components/image_edit.tsx

@@ -12,11 +12,9 @@ import { openModal } from '@/mastodon/actions/modal';
 import { Dropdown } from '@/mastodon/components/dropdown_menu';
 import { IconButton } from '@/mastodon/components/icon_button';
 import type { MenuItem } from '@/mastodon/models/dropdown_menu';
-import {
-  createAppSelector,
-  useAppDispatch,
-  useAppSelector,
-} from '@/mastodon/store';
+import type { ImageLocation } from '@/mastodon/reducers/slices/profile_edit';
+import { selectImageInfo } from '@/mastodon/reducers/slices/profile_edit';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
@@ -50,36 +48,15 @@ const messages = defineMessages({
   },
 });
 
-export type ImageLocation = 'avatar' | 'header';
-
-const selectImageInfo = createAppSelector(
-  [
-    (state) => state.profileEdit.profile,
-    (_, location: ImageLocation) => location,
-  ],
-  (profile, location) => {
-    if (!profile) {
-      return {
-        hasImage: false,
-        hasAlt: false,
-      };
-    }
-
-    return {
-      hasImage: !!profile[`${location}Static`],
-      hasAlt: !!profile[`${location}Description`],
-    };
-  },
-);
-
 export const AccountImageEdit: FC<{
   className?: string;
   location: ImageLocation;
 }> = ({ className, location }) => {
   const intl = useIntl();
-  const { hasAlt, hasImage } = useAppSelector((state) =>
+  const { alt, src } = useAppSelector((state) =>
     selectImageInfo(state, location),
   );
+  const hasAlt = !!alt;
   const dispatch = useAppDispatch();
 
   const handleModal = useCallback(
@@ -125,7 +102,7 @@ export const AccountImageEdit: FC<{
 
   const iconClassName = classNames(classes.imageButton, className);
 
-  if (!hasImage) {
+  if (!src) {
     return (
       <IconButton
         title={intl.formatMessage(messages.add)}

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,11 +1,147 @@
-import type { FC } from 'react';
+import type { ChangeEventHandler, FC } from 'react';
+import { useCallback, useState } from 'react';
 
-import { DialogModal } from '../../ui/components/dialog_modal';
+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 { ConfirmationModal } from '../../ui/components/confirmation_modals';
 import type { DialogModalProps } from '../../ui/components/dialog_modal';
-import type { ImageLocation } from '../components/image_edit';
+
+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,11 +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';
-import type { ImageLocation } from '../components/image_edit';
 
 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

@@ -1,11 +1,438 @@
-import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ChangeEventHandler, FC } from 'react';
+
+import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
+
+import type { Area } from 'react-easy-crop';
+import Cropper from 'react-easy-crop';
+
+import { setDragUploadEnabled } from '@/mastodon/actions/compose_typed';
+import { Button } from '@/mastodon/components/button';
+import { RangeInput } from '@/mastodon/components/form_fields/range_input_field';
+import {
+  selectImageInfo,
+  uploadImage,
+} 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';
-import type { ImageLocation } from '../components/image_edit';
+
+import { ImageAltTextField } from './image_alt';
+import classes from './styles.module.scss';
+
+import 'react-easy-crop/react-easy-crop.css';
 
 export const ImageUploadModal: FC<
   DialogModalProps & { location: ImageLocation }
-> = ({ onClose }) => {
-  return <DialogModal title='TODO' onClose={onClose} />;
+> = ({ onClose, location }) => {
+  const { src: oldSrc } = useAppSelector((state) =>
+    selectImageInfo(state, location),
+  );
+  const hasImage = !!oldSrc;
+  const [step, setStep] = useState<'select' | 'crop' | 'alt'>('select');
+
+  // State for individual steps.
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [imageBlob, setImageBlob] = useState<Blob | null>(null);
+
+  const handleFile = useCallback((file: File) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      const result = reader.result;
+      if (typeof result === 'string' && result.length > 0) {
+        setImageSrc(result);
+        setStep('crop');
+      }
+    });
+    reader.readAsDataURL(file);
+  }, []);
+
+  const handleCrop = useCallback(
+    (crop: Area) => {
+      if (!imageSrc) {
+        setStep('select');
+        return;
+      }
+      void calculateCroppedImage(imageSrc, crop).then((blob) => {
+        setImageBlob(blob);
+        setStep('alt');
+      });
+    },
+    [imageSrc],
+  );
+
+  const dispatch = useAppDispatch();
+  const handleSave = useCallback(
+    (altText: string) => {
+      if (!imageBlob) {
+        setStep('crop');
+        return;
+      }
+      void dispatch(uploadImage({ location, imageBlob, altText })).then(
+        onClose,
+      );
+    },
+    [dispatch, imageBlob, location, onClose],
+  );
+
+  const handleCancel = useCallback(() => {
+    switch (step) {
+      case 'crop':
+        setImageSrc(null);
+        setStep('select');
+        break;
+      case 'alt':
+        setImageBlob(null);
+        setStep('crop');
+        break;
+      default:
+        onClose();
+    }
+  }, [onClose, step]);
+
+  return (
+    <DialogModal
+      title={
+        hasImage ? (
+          <FormattedMessage
+            id='account_edit.upload_modal.title_replace'
+            defaultMessage='Replace profile photo'
+          />
+        ) : (
+          <FormattedMessage
+            id='account_edit.upload_modal.title_add'
+            defaultMessage='Add profile photo'
+          />
+        )
+      }
+      onClose={onClose}
+      wrapperClassName={classes.uploadWrapper}
+      noCancelButton
+    >
+      {step === 'select' && (
+        <StepUpload location={location} onFile={handleFile} />
+      )}
+      {step === 'crop' && imageSrc && (
+        <StepCrop
+          src={imageSrc}
+          location={location}
+          onCancel={handleCancel}
+          onComplete={handleCrop}
+        />
+      )}
+      {step === 'alt' && imageBlob && (
+        <StepAlt
+          imageBlob={imageBlob}
+          onCancel={handleCancel}
+          onComplete={handleSave}
+        />
+      )}
+    </DialogModal>
+  );
 };
+
+// Taken from app/models/concerns/account/header.rb and app/models/concerns/account/avatar.rb
+const ALLOWED_MIME_TYPES = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+];
+
+const StepUpload: FC<{
+  location: ImageLocation;
+  onFile: (file: File) => void;
+}> = ({ location, onFile }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleUploadClick = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+
+  const handleFileChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      const file = event.currentTarget.files?.[0];
+      if (!file || !ALLOWED_MIME_TYPES.includes(file.type)) {
+        return;
+      }
+      onFile(file);
+    },
+    [onFile],
+  );
+
+  // Handle drag and drop
+  const [isDragging, setDragging] = useState(false);
+
+  const handleDragOver = useCallback((event: DragEvent) => {
+    event.preventDefault();
+    if (!event.dataTransfer?.types.includes('Files')) {
+      return;
+    }
+
+    const items = Array.from(event.dataTransfer.items);
+    if (
+      !items.some(
+        (item) =>
+          item.kind === 'file' && ALLOWED_MIME_TYPES.includes(item.type),
+      )
+    ) {
+      return;
+    }
+
+    setDragging(true);
+  }, []);
+  const handleDragDrop = useCallback(
+    (event: DragEvent) => {
+      event.preventDefault();
+      setDragging(false);
+
+      if (!event.dataTransfer?.files) {
+        return;
+      }
+
+      const file = Array.from(event.dataTransfer.files).find((f) =>
+        ALLOWED_MIME_TYPES.includes(f.type),
+      );
+      if (!file) {
+        return;
+      }
+
+      onFile(file);
+    },
+    [onFile],
+  );
+  const handleDragLeave = useCallback((event: DragEvent) => {
+    event.preventDefault();
+    setDragging(false);
+  }, []);
+
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(setDragUploadEnabled(false));
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('drop', handleDragDrop);
+    document.addEventListener('dragleave', handleDragLeave);
+
+    return () => {
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('drop', handleDragDrop);
+      document.removeEventListener('dragleave', handleDragLeave);
+      dispatch(setDragUploadEnabled(true));
+    };
+  }, [handleDragLeave, handleDragDrop, handleDragOver, dispatch]);
+
+  if (isDragging) {
+    return (
+      <div className={classes.uploadStepSelect}>
+        <FormattedMessage
+          id='account_edit.upload_modal.step_upload.dragging'
+          defaultMessage='Drop to upload'
+          tagName='h2'
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.uploadStepSelect}>
+      <FormattedMessage
+        id='account_edit.upload_modal.step_upload.header'
+        defaultMessage='Choose an image'
+        tagName='h2'
+      />
+      <FormattedMessage
+        id='account_edit.upload_modal.step_upload.hint'
+        defaultMessage='WEBP, PNG, GIF or JPG format, up to {limit}MB.{br}Image will be scaled to {width}x{height}px.'
+        description='Guideline for avatar and header images.'
+        values={{
+          br: <br />,
+          limit: 8,
+          width: location === 'avatar' ? 400 : 1500,
+          height: location === 'avatar' ? 400 : 500,
+        }}
+        tagName='p'
+      />
+      <Button
+        onClick={handleUploadClick}
+        // eslint-disable-next-line jsx-a11y/no-autofocus -- This is the main input, so auto-focus on it.
+        autoFocus
+      >
+        <FormattedMessage
+          id='account_edit.upload_modal.step_upload.button'
+          defaultMessage='Browse files'
+        />
+      </Button>
+
+      <input
+        hidden
+        type='file'
+        ref={inputRef}
+        accept={ALLOWED_MIME_TYPES.join(',')}
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+};
+
+const zoomLabel = defineMessage({
+  id: 'account_edit.upload_modal.step_crop.zoom',
+  defaultMessage: 'Zoom',
+});
+
+const StepCrop: FC<{
+  src: string;
+  location: ImageLocation;
+  onCancel: () => void;
+  onComplete: (crop: Area) => void;
+}> = ({ src, location, onCancel, onComplete }) => {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [croppedArea, setCroppedArea] = useState<Area | null>(null);
+  const [zoom, setZoom] = useState(1);
+  const intl = useIntl();
+
+  const handleZoomChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      setZoom(event.currentTarget.valueAsNumber);
+    },
+    [],
+  );
+  const handleCropComplete = useCallback((_: Area, croppedAreaPixels: Area) => {
+    setCroppedArea(croppedAreaPixels);
+  }, []);
+
+  const handleNext = useCallback(() => {
+    if (croppedArea) {
+      onComplete(croppedArea);
+    }
+  }, [croppedArea, onComplete]);
+
+  return (
+    <>
+      <div className={classes.cropContainer}>
+        <Cropper
+          image={src}
+          crop={crop}
+          zoom={zoom}
+          onCropChange={setCrop}
+          onCropComplete={handleCropComplete}
+          aspect={location === 'avatar' ? 1 : 3 / 1}
+          disableAutomaticStylesInjection
+        />
+      </div>
+
+      <div className={classes.cropActions}>
+        <RangeInput
+          min={1}
+          max={3}
+          step={0.1}
+          value={zoom}
+          onChange={handleZoomChange}
+          className={classes.zoomControl}
+          aria-label={intl.formatMessage(zoomLabel)}
+        />
+        <Button onClick={onCancel} secondary>
+          <FormattedMessage
+            id='account_edit.upload_modal.back'
+            defaultMessage='Back'
+          />
+        </Button>
+        <Button onClick={handleNext} disabled={!croppedArea}>
+          <FormattedMessage
+            id='account_edit.upload_modal.next'
+            defaultMessage='Next'
+          />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const StepAlt: FC<{
+  imageBlob: Blob;
+  onCancel: () => void;
+  onComplete: (altText: string) => void;
+}> = ({ imageBlob, onCancel, onComplete }) => {
+  const [altText, setAltText] = useState('');
+
+  const handleComplete = useCallback(() => {
+    onComplete(altText);
+  }, [altText, onComplete]);
+
+  const imageSrc = useMemo(() => URL.createObjectURL(imageBlob), [imageBlob]);
+
+  return (
+    <>
+      <ImageAltTextField
+        imageSrc={imageSrc}
+        altText={altText}
+        onChange={setAltText}
+      />
+
+      <div className={classes.cropActions}>
+        <Button onClick={onCancel} secondary>
+          <FormattedMessage
+            id='account_edit.upload_modal.back'
+            defaultMessage='Back'
+          />
+        </Button>
+
+        <Button onClick={handleComplete}>
+          <FormattedMessage
+            id='account_edit.upload_modal.done'
+            defaultMessage='Done'
+          />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+async function calculateCroppedImage(
+  imageSrc: string,
+  crop: Area,
+): Promise<Blob> {
+  const image = await dataUriToImage(imageSrc);
+  const canvas = new OffscreenCanvas(crop.width, crop.height);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Failed to get canvas context');
+  }
+
+  ctx.imageSmoothingQuality = 'high';
+
+  // Draw the image
+  ctx.drawImage(
+    image,
+    crop.x,
+    crop.y,
+    crop.width,
+    crop.height,
+    0,
+    0,
+    crop.width,
+    crop.height,
+  );
+
+  return canvas.convertToBlob({
+    quality: 0.7,
+    type: 'image/jpeg',
+  });
+}
+
+function dataUriToImage(dataUri: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => {
+      resolve(image);
+    });
+    image.addEventListener('error', (event) => {
+      if (event.error instanceof Error) {
+        reject(event.error);
+      } else {
+        reject(new Error('Failed to load image'));
+      }
+    });
+    image.src = dataUri;
+  });
+}

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

@@ -80,6 +80,66 @@
   }
 }
 
+.uploadWrapper {
+  min-height: min(400px, 70vh);
+  justify-content: center;
+}
+
+.uploadStepSelect {
+  text-align: center;
+
+  h2 {
+    color: var(--color-text-primary);
+    font-size: 15px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  button {
+    margin-top: 16px;
+  }
+}
+
+.cropContainer {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+}
+
+.cropActions {
+  margin-top: 8px; // 16px gap from DialogModal, plus 8px = 24px to look like normal action buttons.
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+
+  .zoomControl {
+    width: min(100%, 200px);
+    margin-right: auto;
+  }
+}
+
+.altImage {
+  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;
 
@@ -108,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',

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

@@ -103,7 +103,11 @@ const mapStateToProps = state => ({
   layout: state.getIn(['meta', 'layout']),
   isComposing: state.getIn(['compose', 'is_composing']),
   hasComposingContents: state.getIn(['compose', 'text']).trim().length !== 0 || state.getIn(['compose', 'media_attachments']).size > 0 || state.getIn(['compose', 'poll']) !== null || state.getIn(['compose', 'quoted_status_id']) !== null,
-  canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments']),
+  canUploadMore:
+    !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type')))
+    && state.getIn(['compose', 'media_attachments']).size < state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments']),
+  isUploadEnabled:
+    state.getIn(['compose', 'isDragDisabled']) !== true,
   firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
   newAccount: !state.getIn(['accounts', me, 'note']) && !state.getIn(['accounts', me, 'bot']) && state.getIn(['accounts', me, 'following_count'], 0) === 0 && state.getIn(['accounts', me, 'statuses_count'], 0) === 0,
   username: state.getIn(['accounts', me, 'username']),
@@ -324,6 +328,9 @@ class UI extends PureComponent {
   };
 
   handleDragEnter = (e) => {
+    if (!this.props.isUploadEnabled) {
+      return;
+    }
     e.preventDefault();
 
     if (!this.dragTargets) {
@@ -340,6 +347,9 @@ class UI extends PureComponent {
   };
 
   handleDragOver = (e) => {
+    if (!this.props.isUploadEnabled) {
+      return;
+    }
     if (this.dataTransferIsText(e.dataTransfer)) return false;
 
     e.preventDefault();
@@ -355,6 +365,9 @@ class UI extends PureComponent {
   };
 
   handleDrop = (e) => {
+    if (!this.props.isUploadEnabled) {
+      return;
+    }
     if (this.dataTransferIsText(e.dataTransfer)) return;
 
     e.preventDefault();
@@ -429,7 +442,6 @@ class UI extends PureComponent {
     document.addEventListener('dragover', this.handleDragOver, false);
     document.addEventListener('drop', this.handleDrop, false);
     document.addEventListener('dragleave', this.handleDragLeave, false);
-    document.addEventListener('dragend', this.handleDragEnd, false);
 
     if ('serviceWorker' in  navigator) {
       navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
@@ -456,7 +468,6 @@ class UI extends PureComponent {
     document.removeEventListener('dragover', this.handleDragOver);
     document.removeEventListener('drop', this.handleDrop);
     document.removeEventListener('dragleave', this.handleDragLeave);
-    document.removeEventListener('dragend', this.handleDragEnd);
   }
 
   setRef = c => {

app/javascript/mastodon/locales/en.json

@@ -184,6 +184,15 @@
   "account_edit.field_reorder_modal.drag_start": "Picked up field \"{item}\".",
   "account_edit.field_reorder_modal.handle_label": "Drag field \"{item}\"",
   "account_edit.field_reorder_modal.title": "Rearrange fields",
+  "account_edit.image_alt_modal.add_title": "Add alt text",
+  "account_edit.image_alt_modal.details_content": "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>",
+  "account_edit.image_alt_modal.details_title": "Tips: Alt text for profile photos",
+  "account_edit.image_alt_modal.edit_title": "Edit alt text",
+  "account_edit.image_alt_modal.text_hint": "Alt text helps screen reader users to understand your content.",
+  "account_edit.image_alt_modal.text_label": "Alt text",
+  "account_edit.image_delete_modal.confirm": "Are you sure you want to delete this image? This action can’t be undone.",
+  "account_edit.image_delete_modal.delete_button": "Delete",
+  "account_edit.image_delete_modal.title": "Delete image?",
   "account_edit.image_edit.add_button": "Add image",
   "account_edit.image_edit.alt_add_button": "Add alt text",
   "account_edit.image_edit.alt_edit_button": "Edit alt text",
@@ -203,6 +212,16 @@
   "account_edit.profile_tab.subtitle": "Customize the tabs on your profile and what they display.",
   "account_edit.profile_tab.title": "Profile tab settings",
   "account_edit.save": "Save",
+  "account_edit.upload_modal.back": "Back",
+  "account_edit.upload_modal.done": "Done",
+  "account_edit.upload_modal.next": "Next",
+  "account_edit.upload_modal.step_crop.zoom": "Zoom",
+  "account_edit.upload_modal.step_upload.button": "Browse files",
+  "account_edit.upload_modal.step_upload.dragging": "Drop to upload",
+  "account_edit.upload_modal.step_upload.header": "Choose an image",
+  "account_edit.upload_modal.step_upload.hint": "WEBP, PNG, GIF or JPG format, up to {limit}MB.{br}Image will be scaled to {width}x{height}px.",
+  "account_edit.upload_modal.title_add": "Add profile photo",
+  "account_edit.upload_modal.title_replace": "Replace profile photo",
   "account_edit.verified_modal.details": "Add credibility to your Mastodon profile by verifying links to personal websites. Here’s how it works:",
   "account_edit.verified_modal.invisible_link.details": "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.",
   "account_edit.verified_modal.invisible_link.summary": "How do I make the link invisible?",

app/javascript/mastodon/reducers/compose.js

@@ -8,6 +8,7 @@ import {
   setComposeQuotePolicy,
   pasteLinkCompose,
   cancelPasteLinkCompose,
+  setDragUploadEnabled,
 } from '@/mastodon/actions/compose_typed';
 import { timelineDelete } from 'mastodon/actions/timelines_typed';
 
@@ -75,6 +76,7 @@ const initialState = ImmutableMap({
   is_submitting: false,
   is_changing_upload: false,
   is_uploading: false,
+  isDragDisabled: false,
   should_redirect_to_compose_page: false,
   progress: 0,
   isUploadingThumbnail: false,
@@ -132,6 +134,7 @@ function clearAll(state) {
     map.set('idempotencyKey', uuid());
     map.set('quoted_status_id', null);
     map.set('quote_policy', state.get('default_quote_policy'));
+    map.set('isDragDisabled', false);
   });
 }
 
@@ -359,6 +362,8 @@ export const composeReducer = (state = initialState, action) => {
     return action.meta.requestId === state.get('fetching_link') ? state.set('fetching_link', null) : state;
   } else if (cancelPasteLinkCompose.match(action)) {
     return state.set('fetching_link', null);
+  } else if (setDragUploadEnabled.match(action)) {
+    return state.set('isDragDisabled', !action.payload);
   }
 
   switch(action.type) {

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

@@ -3,8 +3,11 @@ import { createSlice } from '@reduxjs/toolkit';
 
 import { debounce } from 'lodash';
 
+import { fetchAccount } from '@/mastodon/actions/accounts';
 import {
   apiDeleteFeaturedTag,
+  apiDeleteProfileAvatar,
+  apiDeleteProfileHeader,
   apiGetCurrentFeaturedTags,
   apiGetProfile,
   apiGetTagSuggestions,
@@ -109,6 +112,27 @@ const profileEditSlice = createSlice({
       state.isPending = false;
     });
 
+    builder.addCase(uploadImage.pending, (state) => {
+      state.isPending = true;
+    });
+    builder.addCase(uploadImage.rejected, (state) => {
+      state.isPending = false;
+    });
+    builder.addCase(uploadImage.fulfilled, (state, action) => {
+      state.profile = action.payload;
+      state.isPending = false;
+    });
+
+    builder.addCase(deleteImage.pending, (state) => {
+      state.isPending = true;
+    });
+    builder.addCase(deleteImage.rejected, (state) => {
+      state.isPending = false;
+    });
+    builder.addCase(deleteImage.fulfilled, (state) => {
+      state.isPending = false;
+    });
+
     builder.addCase(addFeaturedTag.pending, (state) => {
       state.isPending = true;
     });
@@ -220,7 +244,10 @@ export const fetchProfile = createDataLoadingThunk(
 export const patchProfile = createDataLoadingThunk(
   `${profileEditSlice.name}/patchProfile`,
   (params: Partial<ApiProfileUpdateParams>) => apiPatchProfile(params),
-  transformProfile,
+  (response, { dispatch }) => {
+    dispatch(fetchAccount(response.id));
+    return transformProfile(response);
+  },
   {
     useLoadingBar: false,
     condition(_, { getState }) {
@@ -229,6 +256,67 @@ export const patchProfile = createDataLoadingThunk(
   },
 );
 
+export type ImageLocation = 'avatar' | 'header';
+
+export const selectImageInfo = createAppSelector(
+  [
+    (state) => state.profileEdit.profile,
+    (_, location: ImageLocation) => location,
+  ],
+  (profile, location) => {
+    if (!profile) {
+      return {};
+    }
+
+    return {
+      src: profile[location],
+      static: profile[`${location}Static`],
+      alt: profile[`${location}Description`],
+    };
+  },
+);
+
+export const uploadImage = createDataLoadingThunk(
+  `${profileEditSlice.name}/uploadImage`,
+  (arg: { location: ImageLocation; imageBlob: Blob; altText: string }) => {
+    const formData = new FormData();
+    formData.append(arg.location, arg.imageBlob);
+    if (arg.altText) {
+      formData.append(`${arg.location}_description`, arg.altText);
+    }
+
+    return apiPatchProfile(formData);
+  },
+  (response, { dispatch }) => {
+    dispatch(fetchAccount(response.id));
+    return transformProfile(response);
+  },
+  {
+    useLoadingBar: false,
+  },
+);
+
+export const deleteImage = createDataLoadingThunk(
+  `${profileEditSlice.name}/deleteImage`,
+  (arg: { location: ImageLocation }) => {
+    if (arg.location === 'avatar') {
+      return apiDeleteProfileAvatar();
+    } else {
+      return apiDeleteProfileHeader();
+    }
+  },
+  async (_, { dispatch, getState }) => {
+    await dispatch(fetchProfile());
+    const accountId = getState().profileEdit.profile?.id;
+    if (accountId) {
+      dispatch(fetchAccount(accountId));
+    }
+  },
+  {
+    useLoadingBar: false,
+  },
+);
+
 export const selectFieldById = createAppSelector(
   [(state) => state.profileEdit.profile?.fields, (_, id?: string) => id],
   (fields, fieldId) => {