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

app/javascript/mastodon/components/media_gallery.jsx

@@ -113,12 +113,12 @@ class Item extends PureComponent {
       width = 25;
     }
 
-    if (attachment.get('description')?.length > 0) {
-      badges.push(<AltTextBadge key='alt' description={attachment.get('description')} />);
-    }
-
     const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
+    if (description?.length > 0) {
+      badges.push(<AltTextBadge key='alt' description={description} />);
+    }
+
     if (attachment.get('type') === 'unknown') {
       return (
         <div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>

app/javascript/mastodon/components/modal_root.jsx

@@ -13,11 +13,14 @@ class ModalRoot extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
-    backgroundColor: PropTypes.shape({
-      r: PropTypes.number,
-      g: PropTypes.number,
-      b: PropTypes.number,
-    }),
+    backgroundColor: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        r: PropTypes.number,
+        g: PropTypes.number,
+        b: PropTypes.number,
+      }),
+    ]),
     ignoreFocus: PropTypes.bool,
     ...WithOptionalRouterPropTypes,
   };
@@ -141,14 +144,17 @@ class ModalRoot extends PureComponent {
 
     let backgroundColor = null;
 
-    if (this.props.backgroundColor) {
-      backgroundColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
+    if (this.props.backgroundColor && typeof this.props.backgroundColor === 'string') {
+      backgroundColor = this.props.backgroundColor;
+    } else if (this.props.backgroundColor) {
+      const darkenedColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
+      backgroundColor = `rgb(${darkenedColor.r}, ${darkenedColor.g}, ${darkenedColor.b})`;
     }
 
     return (
       <div className='modal-root' ref={this.setRef}>
         <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
-          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.9)` : null }} />
+          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor }} />
           <div role='dialog' className='modal-root__container'>{children}</div>
         </div>
       </div>

app/javascript/mastodon/components/status.jsx

@@ -405,13 +405,16 @@ class Status extends ImmutablePureComponent {
     };
 
     let media, statusAvatar, prepend, rebloggedByText;
+    const matchedFilters = status.get('matched_filters');
+    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
 
     if (hidden) {
       return (
         <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
           <div ref={this.handleRef} className={classNames('status__wrapper', { focusable: !this.props.muted })} tabIndex={unfocusable ? null : 0}>
             <span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
-            <span>{status.get('content')}</span>
+            {status.get('spoiler_text').length > 0 && (<span>{status.get('spoiler_text')}</span>)}
+            {expanded && <span>{status.get('content')}</span>}
           </div>
         </HotKeys>
       );
@@ -420,7 +423,6 @@ class Status extends ImmutablePureComponent {
     const connectUp = previousId && previousId === status.get('in_reply_to_id');
     const connectToRoot = rootId && rootId === status.get('in_reply_to_id');
     const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
-    const matchedFilters = status.get('matched_filters');
 
     let visibilityName = status.get('limited_scope') || status.get('visibility_ex') || status.get('visibility');
 
@@ -578,7 +580,6 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
 
     const withLimited = status.get('visibility_ex') === 'limited' && status.get('limited_scope') ? <span className='status__visibility-icon'><Icon id='get-pocket' icon={LimitedIcon} title={intl.formatMessage(messages.limited_short)} /></span> : null;
     const withQuote = status.get('quote_id') ? <span className='status__visibility-icon'><Icon id='quote-right' icon={QuoteIcon} title='Quote' /></span> : null;