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

app/javascript/mastodon/components/button.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, JSX } from 'react';
 import { useCallback } from 'react';
 
 import classNames from 'classnames';

app/javascript/mastodon/components/content_warning.tsx

@@ -8,7 +8,7 @@ export const ContentWarning: React.FC<{
   <StatusBanner
     expanded={expanded}
     onClick={onClick}
-    variant={BannerVariant.Yellow}
+    variant={BannerVariant.Warning}
   >
     <p dangerouslySetInnerHTML={{ __html: text }} />
   </StatusBanner>

app/javascript/mastodon/components/filter_warning.tsx

@@ -10,13 +10,16 @@ export const FilterWarning: React.FC<{
   <StatusBanner
     expanded={expanded}
     onClick={onClick}
-    variant={BannerVariant.Blue}
+    variant={BannerVariant.Filter}
   >
     <p>
       <FormattedMessage
         id='filter_warning.matches_filter'
-        defaultMessage='Matches filter “{title}”'
-        values={{ title }}
+        defaultMessage='Matches filter “<span>{title}</span>”'
+        values={{
+          title,
+          span: (chunks) => <span className='filter-name'>{chunks}</span>,
+        }}
       />
     </p>
   </StatusBanner>

app/javascript/mastodon/components/short_number.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import type { JSX } from 'react';
 
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 

app/javascript/mastodon/components/status.jsx

@@ -477,7 +477,7 @@ class Status extends ImmutablePureComponent {
             media={status.get('media_attachments')}
           />
         );
-      } else if (['image', 'gifv'].includes(status.getIn(['media_attachments', 0, 'type'])) || status.get('media_attachments').size > 1) {
+      } else if (['image', 'gifv', 'unknown'].includes(status.getIn(['media_attachments', 0, 'type'])) || status.get('media_attachments').size > 1) {
         media = (
           <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
             {Component => (

app/javascript/mastodon/components/status_banner.tsx

@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
 export enum BannerVariant {
-  Yellow = 'yellow',
-  Blue = 'blue',
+  Warning = 'warning',
+  Filter = 'filter',
 }
 
 export const StatusBanner: React.FC<{
@@ -11,9 +11,9 @@ export const StatusBanner: React.FC<{
   expanded?: boolean;
   onClick?: () => void;
 }> = ({ children, variant, expanded, onClick }) => (
-  <div
+  <label
     className={
-      variant === BannerVariant.Yellow
+      variant === BannerVariant.Warning
         ? 'content-warning'
         : 'content-warning content-warning--filter'
     }
@@ -26,6 +26,11 @@ export const StatusBanner: React.FC<{
           id='content_warning.hide'
           defaultMessage='Hide post'
         />
+      ) : variant === BannerVariant.Warning ? (
+        <FormattedMessage
+          id='content_warning.show_more'
+          defaultMessage='Show more'
+        />
       ) : (
         <FormattedMessage
           id='content_warning.show'
@@ -33,5 +38,5 @@ export const StatusBanner: React.FC<{
         />
       )}
     </button>
-  </div>
+  </label>
 );