refactor: Revert styles, implement quote posts as nested Status

app/javascript/mastodon/components/quote.tsx

@@ -1,73 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import { Map as ImmutableMap } from 'immutable';
-
-import { useAppSelector } from 'mastodon/store';
-import { EmbeddedStatus } from 'mastodon/features/notifications_v2/components/embedded_status';
-
-type QuoteMap = ImmutableMap<'state' | 'quoted_status', string | null>;
-
-export const Quote: React.FC<{ quote: QuoteMap }> = ({ quote }) => {
-  const quotedStatusId = quote.get('quoted_status');
-  const state = quote.get('state');
-  const status = useAppSelector((state) =>
-    quotedStatusId ? state.statuses.get(quotedStatusId) : undefined,
-  );
-  const accountId = status?.get('account') as string | undefined;
-  const account = useAppSelector((state) =>
-    accountId ? state.accounts.get(accountId) : undefined,
-  );
-
-  if (!status || !quotedStatusId) {
-    return (
-      <div className='status__quote'>
-        <FormattedMessage
-          id=''
-          defaultMessage='This post cannot be displayed.'
-        />
-      </div>
-    );
-  } else if (state === 'deleted') {
-    return (
-      <div className='status__quote'>
-        <FormattedMessage
-          id=''
-          defaultMessage='This post was removed by its author.'
-        />
-      </div>
-    );
-  } else if (state === 'unauthorized') {
-    return (
-      <div className='status__quote'>
-        <FormattedMessage
-          id=''
-          defaultMessage='This post cannot be displayed as you are not authorized to view it.'
-        />
-      </div>
-    );
-  } else if (state === 'pending') {
-    return (
-      <div className='status__quote'>
-        <FormattedMessage
-          id=''
-          defaultMessage='This post is pending approval from the original author.'
-        />
-      </div>
-    );
-  } else if (state === 'rejected' || state === 'revoked') {
-    return (
-      <div className='status__quote'>
-        <FormattedMessage
-          id=''
-          defaultMessage='This post cannot be displayed as the original author does not allow it to be quoted.'
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className='status__quote'>
-      <EmbeddedStatus statusId={quotedStatusId} />
-    </div>
-  );
-};

app/javascript/mastodon/components/status.jsx

@@ -5,14 +5,12 @@ import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
-
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { HotKeys } from 'react-hotkeys';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
-import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import { ContentWarning } from 'mastodon/components/content_warning';
 import { FilterWarning } from 'mastodon/components/filter_warning';
@@ -37,7 +35,6 @@ import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import { StatusThreadLabel } from './status_thread_label';
 import { VisibilityIcon } from './visibility_icon';
-import { Quote } from './quote';
 
 const domParser = new DOMParser();
 
@@ -89,6 +86,7 @@ class Status extends ImmutablePureComponent {
   static propTypes = {
     status: ImmutablePropTypes.map,
     account: ImmutablePropTypes.record,
+    children: PropTypes.node,
     previousId: PropTypes.string,
     nextInReplyToId: PropTypes.string,
     rootId: PropTypes.string,
@@ -116,6 +114,7 @@ class Status extends ImmutablePureComponent {
     onMoveUp: PropTypes.func,
     onMoveDown: PropTypes.func,
     showThread: PropTypes.bool,
+    showActionBar: PropTypes.bool,
     getScrollPosition: PropTypes.func,
     updateScrollBottom: PropTypes.func,
     cacheMediaWidth: PropTypes.func,
@@ -373,7 +372,7 @@ class Status extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, hidden, featured, unfocusable, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
+    const { intl, hidden, featured, unfocusable, unread, showThread, showActionBar = true, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46, children } = this.props;
 
     let { status, account, ...other } = this.props;
 
@@ -568,8 +567,6 @@ class Status extends ImmutablePureComponent {
 
             {expanded && (
               <>
-                {status.get('quote') && <Quote quote={status.get('quote')} />}
-
                 <StatusContent
                   status={status}
                   onClick={this.handleClick}
@@ -579,12 +576,16 @@ class Status extends ImmutablePureComponent {
                   {...statusContentProps}
                 />
 
+                {children}
+
                 {media}
                 {hashtagBar}
               </>
             )}
 
-            <StatusActionBar scrollKey={scrollKey} status={status} account={account}  {...other} />
+            {showActionBar &&
+              <StatusActionBar scrollKey={scrollKey} status={status} account={account}  {...other} />
+            }
           </div>
         </div>
       </HotKeys>

app/javascript/mastodon/components/status_list.jsx

@@ -9,7 +9,7 @@ import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'mastodon/actions/timelines';
 import { RegenerationIndicator } from 'mastodon/components/regeneration_indicator';
 import { InlineFollowSuggestions } from 'mastodon/features/home_timeline/components/inline_follow_suggestions';
 
-import StatusContainer from '../containers/status_container';
+import { StatusQuoteManager } from '../components/status_quoted';
 
 import { LoadGap } from './load_gap';
 import ScrollableList from './scrollable_list';
@@ -113,7 +113,7 @@ export default class StatusList extends ImmutablePureComponent {
           );
         default:
           return (
-            <StatusContainer
+            <StatusQuoteManager
               key={statusId}
               id={statusId}
               onMoveUp={this.handleMoveUp}
@@ -130,7 +130,7 @@ export default class StatusList extends ImmutablePureComponent {
 
     if (scrollableContent && featuredStatusIds) {
       scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusContainer
+        <StatusQuoteManager
           key={`f-${statusId}`}
           id={statusId}
           featured

app/javascript/mastodon/components/status_quoted.tsx

@@ -0,0 +1,87 @@
+import { FormattedMessage } from 'react-intl';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+import StatusContainer from 'mastodon/containers/status_container';
+import { useAppSelector } from 'mastodon/store';
+
+type QuoteMap = ImmutableMap<'state' | 'quoted_status', string | null>;
+
+export const QuotedStatus: React.FC<{ quote: QuoteMap }> = ({ quote }) => {
+  const quotedStatusId = quote.get('quoted_status');
+  const state = quote.get('state');
+  const status = useAppSelector((state) =>
+    quotedStatusId ? state.statuses.get(quotedStatusId) : undefined,
+  );
+
+  if (!status || !quotedStatusId) {
+    return (
+      <FormattedMessage id='' defaultMessage='This post cannot be displayed.' />
+    );
+  } else if (state === 'deleted') {
+    return (
+      <FormattedMessage
+        id=''
+        defaultMessage='This post was removed by its author.'
+      />
+    );
+  } else if (state === 'unauthorized') {
+    return (
+      <FormattedMessage
+        id=''
+        defaultMessage='This post cannot be displayed as you are not authorized to view it.'
+      />
+    );
+  } else if (state === 'pending') {
+    return (
+      <FormattedMessage
+        id=''
+        defaultMessage='This post is pending approval from the original author.'
+      />
+    );
+  } else if (state === 'rejected' || state === 'revoked') {
+    return (
+      <FormattedMessage
+        id=''
+        defaultMessage='This post cannot be displayed as the original author does not allow it to be quoted.'
+      />
+    );
+  }
+
+  return (
+    <StatusContainer
+      // @ts-expect-error Status isn't typed yet
+      showActionBar={false}
+      id={quotedStatusId}
+      avatarSize={40}
+    />
+  );
+};
+
+interface StatusQuoteManagerProps {
+  id: string;
+  [key: string]: unknown;
+}
+
+/**
+ * This wrapper component takes a status ID and, if the associated status
+ * is a quote post, it renders the quote into `StatusContainer` as a child.
+ * It passes all other props through to `StatusContainer`.
+ */
+
+export const StatusQuoteManager = (props: StatusQuoteManagerProps) => {
+  const status = useAppSelector((state) => state.statuses.get(props.id));
+  const quote = status?.get('quote') as QuoteMap | undefined;
+
+  if (quote) {
+    return (
+      <StatusContainer {...props}>
+        <div className='status__quote'>
+          <QuotedStatus quote={quote} />
+        </div>
+      </StatusContainer>
+    );
+  }
+
+  return <StatusContainer {...props} />;
+};

app/javascript/mastodon/containers/status_container.jsx

@@ -42,8 +42,10 @@ import {
   undoStatusTranslation,
 } from '../actions/statuses';
 import Status from '../components/status';
+import { QuotedStatus } from '../components/status_quoted';
 import { deleteModal } from '../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
+import { useAppSelector } from '../store';
 
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
@@ -218,4 +220,4 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({
 
 });
 
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
+export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));

app/javascript/mastodon/features/account_featured/index.tsx

@@ -14,7 +14,7 @@ import { Account } from 'mastodon/components/account';
 import { ColumnBackButton } from 'mastodon/components/column_back_button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { RemoteHint } from 'mastodon/components/remote_hint';
-import StatusContainer from 'mastodon/containers/status_container';
+import { StatusQuoteManager } from 'mastodon/components/status_quoted';
 import { AccountHeader } from 'mastodon/features/account_timeline/components/account_header';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 import Column from 'mastodon/features/ui/components/column';
@@ -142,9 +142,8 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
               />
             </h4>
             {featuredStatusIds.map((statusId) => (
-              <StatusContainer
+              <StatusQuoteManager
                 key={`f-${statusId}`}
-                // @ts-expect-error inferred props are wrong
                 id={statusId}
                 contextType='account'
               />

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -20,7 +20,7 @@ import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { Account } from 'mastodon/components/account';
 import { Icon }  from 'mastodon/components/icon';
-import StatusContainer from 'mastodon/containers/status_container';
+import { StatusQuoteManager } from 'mastodon/components/status_quoted';
 import { me } from 'mastodon/initial_state';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
@@ -175,7 +175,7 @@ class Notification extends ImmutablePureComponent {
 
   renderMention (notification) {
     return (
-      <StatusContainer
+      <StatusQuoteManager
         id={notification.get('status')}
         withDismiss
         hidden={this.props.hidden}
@@ -205,7 +205,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <StatusContainer
+          <StatusQuoteManager
             id={notification.get('status')}
             account={notification.get('account')}
             muted
@@ -235,7 +235,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <StatusContainer
+          <StatusQuoteManager
             id={notification.get('status')}
             account={notification.get('account')}
             muted
@@ -269,7 +269,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <StatusContainer
+          <StatusQuoteManager
             id={notification.get('status')}
             account={notification.get('account')}
             contextType='notifications'
@@ -304,7 +304,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <StatusContainer
+          <StatusQuoteManager
             id={notification.get('status')}
             account={notification.get('account')}
             contextType='notifications'
@@ -345,7 +345,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <StatusContainer
+          <StatusQuoteManager
             id={notification.get('status')}
             account={account}
             contextType='notifications'

app/javascript/mastodon/features/notifications_v2/components/notification_with_status.tsx

@@ -12,7 +12,7 @@ import {
 } from 'mastodon/actions/statuses';
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
-import Status from 'mastodon/containers/status_container';
+import { StatusQuoteManager } from 'mastodon/components/status_quoted';
 import { getStatusHidden } from 'mastodon/selectors/filters';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
@@ -102,8 +102,7 @@ export const NotificationWithStatus: React.FC<{
           {label}
         </div>
 
-        <Status
+        <StatusQuoteManager
-          // @ts-expect-error -- <Status> is not yet typed
           id={statusId}
           contextType='notifications'
           withDismiss

app/javascript/mastodon/features/search/index.tsx

@@ -17,7 +17,7 @@ import { ColumnHeader } from 'mastodon/components/column_header';
 import { CompatibilityHashtag as Hashtag } from 'mastodon/components/hashtag';
 import { Icon } from 'mastodon/components/icon';
 import ScrollableList from 'mastodon/components/scrollable_list';
-import Status from 'mastodon/containers/status_container';
+import { StatusQuoteManager } from 'mastodon/components/status_quoted';
 import { Search } from 'mastodon/features/compose/components/search';
 import { useSearchParam } from 'mastodon/hooks/useSearchParam';
 import type { Hashtag as HashtagType } from 'mastodon/models/tags';
@@ -53,8 +53,7 @@ const renderHashtags = (hashtags: HashtagType[]) =>
 
 const renderStatuses = (statusIds: string[]) =>
   hidePeek<string>(statusIds).map((id) => (
-    // @ts-expect-error inferred props are wrong
+    <StatusQuoteManager key={id} id={id} />
-    <Status key={id} id={id} />
   ));
 
 type SearchType = 'all' | ApiSearchType;
@@ -190,8 +189,7 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
                   onClickMore={handleSelectStatuses}
                 >
                   {results.statuses.slice(0, INITIAL_DISPLAY).map((id) => (
-                    // @ts-expect-error inferred props are wrong
+                    <StatusQuoteManager key={id} id={id} />
-                    <Status key={id} id={id} />
                   ))}
                 </SearchSection>
               )}

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

@@ -25,8 +25,8 @@ import { Icon } from 'mastodon/components/icon';
 import { IconLogo } from 'mastodon/components/logo';
 import MediaGallery from 'mastodon/components/media_gallery';
 import { PictureInPicturePlaceholder } from 'mastodon/components/picture_in_picture_placeholder';
-import { Quote } from 'mastodon/components/quote';
 import StatusContent from 'mastodon/components/status_content';
+import { QuotedStatus } from 'mastodon/components/status_quoted';
 import { VisibilityIcon } from 'mastodon/components/visibility_icon';
 import { Audio } from 'mastodon/features/audio';
 import scheduleIdleTask from 'mastodon/features/ui/util/schedule_idle_task';
@@ -366,14 +366,18 @@ export const DetailedStatus: React.FC<{
 
         {expanded && (
           <>
-            {status.get('quote') && <Quote quote={status.get('quote')} />}
-
             <StatusContent
               status={status}
               onTranslate={handleTranslate}
               {...(statusContentProps as any)}
             />
 
+            {status.get('quote') && (
+              <div className='status__quote'>
+                <QuotedStatus quote={status.get('quote')} />
+              </div>
+            )}
+
             {media}
             {hashtagBar}
           </>

app/javascript/mastodon/features/status/index.jsx

@@ -6,8 +6,6 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { withRouter } from 'react-router-dom';
 
-import { createSelector } from '@reduxjs/toolkit';
-import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
@@ -62,7 +60,7 @@ import {
 } from '../../actions/statuses';
 import ColumnHeader from '../../components/column_header';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
-import StatusContainer from '../../containers/status_container';
+import { StatusQuoteManager } from '../../components/status_quoted';
 import { deleteModal } from '../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
 import { getAncestorsIds, getDescendantsIds } from 'mastodon/selectors/contexts';
@@ -477,7 +475,7 @@ class Status extends ImmutablePureComponent {
     const { params: { statusId } } = this.props;
 
     return list.map((id, i) => (
-      <StatusContainer
+      <StatusQuoteManager
         key={id}
         id={id}
         onMoveUp={this.handleMoveUp}

app/javascript/styles/mastodon/components.scss

@@ -1491,34 +1491,34 @@ body > [data-popper-placement] {
     }
   }
 
-  $thread-margin: 46px + 8px;
-
   &--in-thread {
+    --thread-margin: calc(46px + 8px);
+
     border-bottom: 0;
-  }
 
-  .status__content,
+    .status__content,
-  .status__action-bar,
+    .status__action-bar,
-  .media-gallery,
+    .media-gallery,
-  .video-player,
+    .video-player,
-  .audio-player,
+    .audio-player,
-  .attachment-list,
+    .attachment-list,
-  .picture-in-picture-placeholder,
+    .picture-in-picture-placeholder,
-  .more-from-author,
+    .more-from-author,
-  .status-card,
+    .status-card,
-  .hashtag-bar,
+    .hashtag-bar,
-  .content-warning,
+    .content-warning,
-  .filter-warning {
+    .filter-warning {
-    margin-inline-start: $thread-margin;
+      margin-inline-start: var(--thread-margin);
-    width: calc(100% - $thread-margin);
+      width: calc(100% - var(--thread-margin));
-  }
+    }
 
-  .more-from-author {
+    .more-from-author {
-    width: calc(100% - $thread-margin + 2px);
+      width: calc(100% - var(--thread-margin) + 2px);
-  }
+    }
 
-  .status__content__read-more-button {
+    .status__content__read-more-button {
-    margin-inline-start: $thread-margin;
+      margin-inline-start: var(--thread-margin);
+    }
   }
 
   &__action-bar__button-wrapper {
@@ -1571,6 +1571,8 @@ body > [data-popper-placement] {
 
 .status__relative-time {
   display: block;
+  font-size: 15px;
+  line-height: 22px;
   height: 40px;
   order: 2;
   flex: 0 0 auto;
@@ -1601,8 +1603,10 @@ body > [data-popper-placement] {
 .status__info .status__display-name {
   max-width: 100%;
   display: flex;
+  font-size: 15px;
+  line-height: 22px;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   overflow: hidden;
 
   .display-name {
@@ -1626,7 +1630,7 @@ body > [data-popper-placement] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
   cursor: pointer;
 }
 
@@ -1681,7 +1685,6 @@ body > [data-popper-placement] {
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
-    margin-inline-start: 30px;
 
     .icon {
       width: 16px;
@@ -10503,7 +10506,6 @@ noscript {
 
       .account__avatar {
         flex: 0 0 auto;
-        --avatar-border-radius: 4px;
       }
     }
 
@@ -10937,43 +10939,3 @@ noscript {
 .lists-scrollable {
   min-height: 50vh;
 }
-
-.status__quote {
-  padding-inline-start: 46px + 8px;
-  position: relative;
-  margin-bottom: 16px;
-
-  & > div {
-    background: var(--rich-text-container-color);
-    padding: 8px;
-    border-radius: 8px;
-    color: var(--rich-text-text-color);
-  }
-
-  .notification-group__embedded-status__account bdi,
-  .notification-group__embedded-status__content,
-  .notification-group__embedded-status__content a {
-    color: var(--rich-text-text-color);
-  }
-
-  .notification-group__embedded-status__account .display-name__account {
-    color: var(--rich-text-text-color);
-    opacity: 0.7;
-  }
-
-  .notification-group__embedded-status__account {
-    margin-bottom: 4px;
-  }
-
-  &::before {
-    display: block;
-    content: '';
-    width: 24px;
-    height: 20px;
-    mask-image: url('../images/quote.svg');
-    background-color: var(--rich-text-decorations-color);
-    position: absolute;
-    inset-inline-start: 20px;
-    top: 4px;
-  }
-}