Merge upstream changes up to e08d22724d9baf6c639466507c2b117788e5b8de

app/javascript/flavours/glitch/locales/en.json

@@ -144,12 +144,17 @@
   "settings.wide_view": "Wide view (Desktop mode only)",
   "settings.wide_view_hint": "Stretches columns to better fill the available space.",
   "status.collapse": "Collapse",
+  "status.filtered": "Filtered",
   "status.has_audio": "Features attached audio files",
   "status.has_pictures": "Features attached pictures",
   "status.has_preview_card": "Features an attached preview card",
   "status.has_video": "Features attached videos",
+  "status.hide": "Hide post",
   "status.in_reply_to": "This toot is a reply",
   "status.is_poll": "This toot is a poll",
   "status.local_only": "Only visible from your instance",
+  "status.show_filter_reason": "Show anyway",
+  "status.show_less": "Show less",
+  "status.show_more": "Show more",
   "status.uncollapse": "Uncollapse"
 }

app/javascript/flavours/glitch/styles/widgets.scss

@@ -1,10 +1,4 @@
-@use 'sass:math';
-
 .directory {
-  background: var(--background-color);
-  border-radius: 4px;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
   &__tag {
     box-sizing: border-box;
     margin-bottom: 10px;
@@ -65,7 +59,8 @@
     &.active h4 {
       &,
       .fa,
-      small {
+      small,
+      .trends__item__current {
         color: $primary-text-color;
       }
     }
@@ -78,6 +73,10 @@
     &.active .avatar-stack .account__avatar {
       border-color: $ui-highlight-color;
     }
+
+    .trends__item__current {
+      padding-inline-end: 0;
+    }
   }
 }
 
@@ -153,8 +152,9 @@
     vertical-align: initial !important;
   }
 
-  &__interrelationships {
+  tbody td.accounts-table__interrelationships {
     width: 21px;
+    padding-inline-end: 16px;
   }
 
   .icon {

app/javascript/mastodon/components/content_warning.tsx

@@ -0,0 +1,15 @@
+import { StatusBanner, BannerVariant } from './status_banner';
+
+export const ContentWarning: React.FC<{
+  text: string;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ text, expanded, onClick }) => (
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Yellow}
+  >
+    <p dangerouslySetInnerHTML={{ __html: text }} />
+  </StatusBanner>
+);

app/javascript/mastodon/components/filter_warning.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+
+import { StatusBanner, BannerVariant } from './status_banner';
+
+export const FilterWarning: React.FC<{
+  title: string;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ title, expanded, onClick }) => (
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Blue}
+  >
+    <p>
+      <FormattedMessage
+        id='filter_warning.matches_filter'
+        defaultMessage='Matches filter “{title}”'
+        values={{ title }}
+      />
+    </p>
+  </StatusBanner>
+);

app/javascript/mastodon/components/status.jsx

@@ -13,6 +13,8 @@ import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?re
 import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import { ContentWarning } from 'mastodon/components/content_warning';
+import { FilterWarning } from 'mastodon/components/filter_warning';
 import { Icon }  from 'mastodon/components/icon';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 import { withOptionalRouter, WithOptionalRouterPropTypes } from 'mastodon/utils/react_router';
@@ -140,7 +142,7 @@ class Status extends ImmutablePureComponent {
 
   state = {
     showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-    forceFilter: undefined,
+    showDespiteFilter: undefined,
   };
 
   componentDidUpdate (prevProps) {
@@ -152,7 +154,7 @@ class Status extends ImmutablePureComponent {
     if (this.props.status?.get('id') !== prevProps.status?.get('id')) {
       this.setState({
         showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-        forceFilter: undefined,
+        showDespiteFilter: undefined,
       });
     }
   }
@@ -325,20 +327,32 @@ class Status extends ImmutablePureComponent {
   };
 
   handleHotkeyToggleHidden = () => {
-    this.props.onToggleHidden(this._properStatus());
+    const { onToggleHidden } = this.props;
+    const status = this._properStatus();
+
+    if (status.get('matched_filters')) {
+      const expandedBecauseOfCW = !status.get('hidden') || status.get('spoiler_text').length === 0;
+      const expandedBecauseOfFilter = this.state.showDespiteFilter;
+
+      if (expandedBecauseOfFilter && !expandedBecauseOfCW) {
+        onToggleHidden(status);
+      } else if (expandedBecauseOfFilter && expandedBecauseOfCW) {
+        onToggleHidden(status);
+        this.handleFilterToggle();
+      } else  {
+        this.handleFilterToggle();
+      }
+    } else {
+      onToggleHidden(status);
+    }
   };
 
   handleHotkeyToggleSensitive = () => {
     this.handleToggleMediaVisibility();
   };
 
-  handleUnfilterClick = e => {
-    this.setState({ forceFilter: false });
-    e.preventDefault();
-  };
-
-  handleFilterClick = () => {
-    this.setState({ forceFilter: true });
+  handleFilterToggle = () => {
+    this.setState(state => ({ ...state, showDespiteFilter: !state.showDespiteFilter }));
   };
 
   _properStatus () {
@@ -396,25 +410,6 @@ class Status extends ImmutablePureComponent {
     const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
     const matchedFilters = status.get('matched_filters');
 
-    if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
-      const minHandlers = this.props.muted ? {} : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      };
-
-      return (
-        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
-            {' '}
-            <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
-              <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
-            </button>
-          </div>
-        </HotKeys>
-      );
-    }
-
     if (featured) {
       prepend = (
         <div className='status__prepend'>
@@ -548,7 +543,7 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-    const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
+    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
 
     return (
       <HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
@@ -574,22 +569,27 @@ class Status extends ImmutablePureComponent {
               </a>
             </div>
 
-            <StatusContent
-              status={status}
-              onClick={this.handleClick}
-              expanded={expanded}
-              onExpandedToggle={this.handleExpandedToggle}
-              onTranslate={this.handleTranslate}
-              collapsible
-              onCollapsedToggle={this.handleCollapsedToggle}
-              {...statusContentProps}
-            />
+            {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}
 
-            {media}
+            {(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
 
-            {expanded && hashtagBar}
+            {expanded && (
+              <>
+                <StatusContent
+                  status={status}
+                  onClick={this.handleClick}
+                  onTranslate={this.handleTranslate}
+                  collapsible
+                  onCollapsedToggle={this.handleCollapsedToggle}
+                  {...statusContentProps}
+                />
+
+                {media}
+                {hashtagBar}
+              </>
+            )}
 
-            <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
+            <StatusActionBar scrollKey={scrollKey} status={status} account={account}  {...other} />
           </div>
         </div>
       </HotKeys>

app/javascript/mastodon/components/status_action_bar.jsx

@@ -17,7 +17,6 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
-import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
 import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
 import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
@@ -61,7 +60,6 @@ const messages = defineMessages({
   admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
   admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
   copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
-  hide: { id: 'status.hide', defaultMessage: 'Hide post' },
   blockDomain: { id: 'account.block_domain', defaultMessage: 'Block domain {domain}' },
   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
@@ -241,10 +239,6 @@ class StatusActionBar extends ImmutablePureComponent {
     navigator.clipboard.writeText(url);
   };
 
-  handleHideClick = () => {
-    this.props.onFilter();
-  };
-
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
     const { signedIn, permissions } = this.props.identity;
@@ -377,10 +371,6 @@ class StatusActionBar extends ImmutablePureComponent {
       reblogIconComponent = RepeatDisabledIcon;
     }
 
-    const filterButton = this.props.onFilter && (
-      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
-    );
-
     const isReply = status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
 
     return (
@@ -390,8 +380,6 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
 
-        {filterButton}
-
         <DropdownMenuContainer
           scrollKey={scrollKey}
           status={status}

app/javascript/mastodon/components/status_banner.tsx

@@ -0,0 +1,37 @@
+import { FormattedMessage } from 'react-intl';
+
+export enum BannerVariant {
+  Yellow = 'yellow',
+  Blue = 'blue',
+}
+
+export const StatusBanner: React.FC<{
+  children: React.ReactNode;
+  variant: BannerVariant;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ children, variant, expanded, onClick }) => (
+  <div
+    className={
+      variant === BannerVariant.Yellow
+        ? 'content-warning'
+        : 'content-warning content-warning--filter'
+    }
+  >
+    {children}
+
+    <button className='link-button' onClick={onClick}>
+      {expanded ? (
+        <FormattedMessage
+          id='content_warning.hide'
+          defaultMessage='Hide post'
+        />
+      ) : (
+        <FormattedMessage
+          id='content_warning.show'
+          defaultMessage='Show anyway'
+        />
+      )}
+    </button>
+  </div>
+);