Change display of quote posts to strip fallback link and preview cards (#34772)

app/javascript/mastodon/components/status.jsx

@@ -519,7 +519,7 @@ class Status extends ImmutablePureComponent {
           </Bundle>
         );
       }
-    } else if (status.get('card')) {
+    } else if (status.get('card') && !status.get('quote')) {
       media = (
         <Card
           onOpenMedia={this.handleOpenMedia}
@@ -543,7 +543,19 @@ class Status extends ImmutablePureComponent {
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>
           {!skipPrepend && prepend}
 
-          <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'status--is-quote': isQuotedPost })} data-id={status.get('id')}>
+          <div
+            className={
+              classNames('status', `status-${status.get('visibility')}`,
+              {
+                'status-reply': !!status.get('in_reply_to_id'),
+                'status--in-thread': !!rootId,
+                'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted,
+                'status--is-quote': isQuotedPost,
+                'status--has-quote': !!status.get('quote'),
+              })
+            }
+            data-id={status.get('id')}
+          >
             {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
 
             <div onClick={this.handleHeaderClick} onAuxClick={this.handleHeaderClick} className='status__info'>

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -227,7 +227,7 @@ export const DetailedStatus: React.FC<{
         />
       );
     }
-  } else if (status.get('card')) {
+  } else if (status.get('card') && !status.get('quote')) {
     media = (
       <Card
         sensitive={status.get('sensitive')}
@@ -307,7 +307,12 @@ export const DetailedStatus: React.FC<{
 
   return (
     <div style={outerStyle}>
-      <div ref={handleRef} className={classNames('detailed-status')}>
+      <div
+        ref={handleRef}
+        className={classNames('detailed-status', {
+          'status--has-quote': !!status.get('quote'),
+        })}
+      >
         {status.get('visibility') === 'direct' && (
           <div className='status__prepend'>
             <div className='status__prepend-icon-wrapper'>

app/javascript/styles/mastodon/components.scss

@@ -1421,6 +1421,10 @@ body > [data-popper-placement] {
   }
 }
 
+.status--has-quote .quote-inline {
+  display: none;
+}
+
 .status {
   padding: 16px;
   min-height: 54px;

lib/sanitize_ext/sanitize_config.rb

@@ -31,6 +31,7 @@ class Sanitize
         next true if /^(h|p|u|dt|e)-/.match?(e) # microformats classes
         next true if /^(mention|hashtag)$/.match?(e) # semantic classes
         next true if /^(ellipsis|invisible)$/.match?(e) # link formatting classes
+        next true if e == 'quote-inline'
       end
 
       node['class'] = class_list.join(' ')
@@ -110,6 +111,7 @@ class Sanitize
         'span' => %w(class translate),
         'ol' => %w(start reversed),
         'li' => %w(value),
+        'p' => %w(class),
       },
 
       add_attributes: {