Merge remote-tracking branch 'parent/main' into upstream-20240319

app/javascript/mastodon/components/check_box.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+
+import DoneIcon from '@/material-icons/400-24px/done.svg?react';
+
+import { Icon } from './icon';
+
+interface Props {
+  value: string;
+  checked: boolean;
+  name: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: React.ReactNode;
+}
+
+export const CheckBox: React.FC<Props> = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+}) => {
+  return (
+    <label className='check-box'>
+      <input
+        name={name}
+        type='checkbox'
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+
+      <span className={classNames('check-box__input', { checked })}>
+        {checked && <Icon id='check' icon={DoneIcon} />}
+      </span>
+
+      <span>{label}</span>
+    </label>
+  );
+};

app/javascript/mastodon/components/column_header.jsx

@@ -199,7 +199,7 @@ class ColumnHeader extends PureComponent {
         <h1 className={buttonClassName}>
           {hasTitle && (
             <>
-              {backButton}
+              {showBackButton && backButton}
 
               <button onClick={this.handleTitleClick} className='column-header__title'>
                 {!showBackButton && <Icon id={icon} icon={iconComponent} className='column-header__icon' />}
@@ -208,7 +208,7 @@ class ColumnHeader extends PureComponent {
             </>
           )}
 
-          {!hasTitle && backButton}
+          {!hasTitle && showBackButton && backButton}
 
           <div className='column-header__buttons'>
             {extraButton}

app/javascript/mastodon/components/edited_timestamp/index.jsx

@@ -5,9 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react';
 import { openModal } from 'mastodon/actions/modal';
-import { Icon }  from 'mastodon/components/icon';
 import InlineAccount from 'mastodon/components/inline_account';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 
@@ -67,7 +65,7 @@ class EditedTimestamp extends PureComponent {
     return (
       <DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
         <button className='dropdown-menu__text-button'>
-          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' icon={ArrowDropDownIcon} />
+          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: <span className='animated-number'>{intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span> }} />
         </button>
       </DropdownMenu>
     );

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -102,7 +102,7 @@ const getUnitDelay = (units: string) => {
 };
 
 export const timeAgoString = (
-  intl: IntlShape,
+  intl: Pick<IntlShape, 'formatDate' | 'formatMessage'>,
   date: Date,
   now: number,
   year: number,

app/javascript/mastodon/components/status.jsx

@@ -28,6 +28,7 @@ import Card from '../features/status/components/card';
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
+import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
 import { displayMedia, enableEmojiReaction, isShowItem, isHideItem } from '../initial_state';
 
 import { Avatar } from './avatar';
@@ -82,6 +83,8 @@ const messages = defineMessages({
 
 class Status extends ImmutablePureComponent {
 
+  static contextType = SensitiveMediaContext;
+
   static propTypes = {
     status: ImmutablePropTypes.map,
     account: ImmutablePropTypes.record,
@@ -142,19 +145,21 @@ class Status extends ImmutablePureComponent {
   ];
 
   state = {
-    showMedia: defaultMediaVisibility(this.props.status),
-    statusId: undefined,
+    showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
     forceFilter: undefined,
   };
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
-      return {
-        showMedia: defaultMediaVisibility(nextProps.status),
-        statusId: nextProps.status.get('id'),
-      };
-    } else {
-      return null;
+  componentDidUpdate (prevProps) {
+    // This will potentially cause a wasteful redraw, but in most cases `Status` components are used
+    // with a `key` directly depending on their `id`, preventing re-use of the component across
+    // different IDs.
+    // But just in case this does change, reset the state on status change.
+
+    if (this.props.status?.get('id') !== prevProps.status?.get('id')) {
+      this.setState({
+        showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
+        forceFilter: undefined,
+      });
     }
   }
 

app/javascript/mastodon/components/status_action_bar.jsx

@@ -252,7 +252,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const { status, onBlockDomain } = this.props;
     const account = status.get('account');
 
-    onBlockDomain(account.get('acct').split('@')[1]);
+    onBlockDomain(account);
   };
 
   handleUnblockDomain = () => {