Statuses redux!

- Better unified reblogs, statuses, and notifications
- Polished up collapsed toots greatly
- Apologies to bea if this makes everything more difficult

8 files changed, 1228 insertions, 332 deletions

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 28f89a783..027aa8a8f 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -1,136 +1,215 @@
+/*
+
+`<Status>`
+==========
+
+Original file by @gargron@mastodon.social et al as part of
+tootsuite/mastodon. *Heavily* rewritten (and documented!) by
+@kibi@glitch.social as a part of glitch-soc/mastodon. The following
+features have been added:
+
+ -  Better separating the "guts" of statuses from their wrapper(s)
+ -  Collapsing statuses
+ -  Moving images inside of CWs
+
+A number of aspects of this original file have been split off into
+their own components for better maintainance; for these, see:
+
+ -  <StatusHeader>
+ -  <StatusPrepend>
+
+…And, of course, the other <Status>-related components as well.
+
+*/
+
+                            /* * * * */
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Our standard React imports:
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from './avatar';
-import AvatarOverlay from './avatar_overlay';
-import DisplayName from './display_name';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  `ImmutablePureComponent` gives us `updateOnProps` and
+//  `updateOnStates`:
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  These are our various media types:
 import MediaGallery from './media_gallery';
 import VideoPlayer from './video_player';
+
+//  These are our core status components:
+import StatusPrepend from './status_prepend';
+import StatusHeader from './status_header';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
-import IconButton from './icon_button';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import emojify from '../emoji';
-import escapeTextContentForBrowser from 'escape-html';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  This is used to schedule tasks at the browser's convenience:
 import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
 
-const messages = defineMessages({
-  collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
-  uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
-});
+                            /* * * * */
 
-export default class StatusOrReblog extends ImmutablePureComponent {
+/*
 
-  static propTypes = {
-    status: ImmutablePropTypes.map,
-    account: ImmutablePropTypes.map,
-    settings: ImmutablePropTypes.map,
-    wrapped: PropTypes.bool,
-    onReply: PropTypes.func,
-    onFavourite: PropTypes.func,
-    onReblog: PropTypes.func,
-    onDelete: PropTypes.func,
-    onOpenMedia: PropTypes.func,
-    onOpenVideo: PropTypes.func,
-    onBlock: PropTypes.func,
-    me: PropTypes.number,
-    boostModal: PropTypes.bool,
-    autoPlayGif: PropTypes.bool,
-    muted: PropTypes.bool,
-    collapse: PropTypes.bool,
-    intersectionObserverWrapper: PropTypes.object,
-    intl: PropTypes.object.isRequired,
-  };
+The `<Status>` component:
+-------------------------
 
-  // Avoid checking props that are functions (and whose equality will always
-  // evaluate to false. See react-immutable-pure-component for usage.
-  updateOnProps = [
-    'status',
-    'account',
-    'settings',
-    'wrapped',
-    'me',
-    'boostModal',
-    'autoPlayGif',
-    'muted',
-    'collapse',
-  ]
+The `<Status>` component is a container for statuses. It consists of a
+few parts:
 
-  render () {
-    // Exclude intersectionObserverWrapper from `other` variable
-    // because intersection is managed in here.
-    const { status, account, ...other } = this.props;
+ -  The `<StatusPrepend>`, which contains tangential information about
+    the status, such as who reblogged it.
+ -  The `<StatusHeader>`, which contains the avatar and username of the
+    status author, as well as a media icon and the "collapse" toggle.
+ -  The `<StatusContent>`, which contains the content of the status.
+ -  The `<StatusActionBar>`, which provides actions to be performed
+    on statuses, like reblogging or sending a reply.
 
-    if (status === null) {
-      return null;
-    }
+###  Context
 
-    if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
-      let displayName = status.getIn(['account', 'display_name']);
+ -  __`router` (`PropTypes.object`) :__
+    We need to get our router from the surrounding React context.
 
-      if (displayName.length === 0) {
-        displayName = status.getIn(['account', 'username']);
-      }
+###  Props
 
-      const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+ -  __`id` (`PropTypes.number`) :__
+    The id of the status.
 
-      return (
-        <div className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} >
-          <div className='status__prepend'>
-            <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
-            <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
-          </div>
+ -  __`status` (`ImmutablePropTypes.map`) :__
+    The status object, straight from the store.
 
-          <Status {...other} status={status.get('reblog')} account={status.get('account')} wrapped />
-        </div>
-      );
-    } else return <Status {...this.props} />;
-  }
+ -  __`account` (`ImmutablePropTypes.map`) :__
+    Don't be confused by this one! This is **not** the account which
+    posted the status, but the associated account with any further
+    action (eg, a reblog or a favourite).
 
-}
+ -  __`settings` (`ImmutablePropTypes.map`) :__
+    These are our local settings, fetched from our store. We need this
+    to determine how best to collapse our statuses, among other things.
+
+ -  __`me` (`PropTypes.number`) :__
+    This is the id of the currently-signed-in user.
+
+ -  __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`,
+    `onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
+    `onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__
+    These are all functions passed through from the
+    `<StatusContainer>`. We don't deal with them directly here.
+
+ -  __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__
+    These tell whether or not the user has modals activated for
+    reblogging and deleting statuses. They are used by the `onReblog`
+    and `onDelete` functions, but we don't deal with them here.
+
+ -  __`autoPlayGif` (`PropTypes.bool`) :__
+    This tells the frontend whether or not to autoplay gifs!
+
+ -  __`muted` (`PropTypes.bool`) :__
+    This has nothing to do with a user or conversation mute! "Muted" is
+    what Mastodon internally calls the subdued look of statuses in the
+    notifications column. This should be `true` for notifications, and
+    `false` otherwise.
+
+ -  __`collapse` (`PropTypes.bool`) :__
+    This prop signals a directive from a higher power to (un)collapse
+    a status. Most of the time it should be `undefined`, in which case
+    we do nothing.
+
+ -  __`prepend` (`PropTypes.string`) :__
+    The type of prepend: `'reblogged_by'`, `'reblog'`, or
+    `'favourite'`.
+
+ -  __`withDismiss` (`PropTypes.bool`) :__
+    Whether or not the status can be dismissed. Used for notifications.
+
+ -  __`intersectionObserverWrapper` (`PropTypes.object`) :__
+    This holds our intersection observer. In Mastodon parlance,
+    an "intersection" is just when the status is viewable onscreen.
 
-class Status extends ImmutablePureComponent {
+###  State
+
+ -  __`isExpanded` :__
+    Should be either `true`, `false`, or `null`. The meanings of
+    these values are as follows:
+
+     -  __`true` :__ The status contains a CW and the CW is expanded.
+     -  __`false` :__ The status is collapsed.
+     -  __`null` :__ The status is not collapsed or expanded.
+
+ -  __`isIntersecting` :__
+    This boolean tells us whether or not the status is currently
+    onscreen.
+
+ -  __`isHidden` :__
+    This boolean tells us if the status has been unrendered to save
+    CPUs.
+
+*/
+
+export default class Status extends ImmutablePureComponent {
 
   static contextTypes = {
-    router: PropTypes.object,
+    router                      : PropTypes.object,
   };
 
   static propTypes = {
-    status: ImmutablePropTypes.map,
-    account: ImmutablePropTypes.map,
-    settings: ImmutablePropTypes.map,
-    wrapped: PropTypes.bool,
-    onReply: PropTypes.func,
-    onFavourite: PropTypes.func,
-    onReblog: PropTypes.func,
-    onDelete: PropTypes.func,
-    onOpenMedia: PropTypes.func,
-    onOpenVideo: PropTypes.func,
-    onBlock: PropTypes.func,
-    me: PropTypes.number,
-    boostModal: PropTypes.bool,
-    autoPlayGif: PropTypes.bool,
-    muted: PropTypes.bool,
-    collapse: PropTypes.bool,
-    intersectionObserverWrapper: PropTypes.object,
-    intl: PropTypes.object.isRequired,
+    id                          : PropTypes.number,
+    status                      : ImmutablePropTypes.map,
+    account                     : ImmutablePropTypes.map,
+    settings                    : ImmutablePropTypes.map,
+    me                          : PropTypes.number,
+    onFavourite                 : PropTypes.func,
+    onReblog                    : PropTypes.func,
+    onModalReblog               : PropTypes.func,
+    onDelete                    : PropTypes.func,
+    onMention                   : PropTypes.func,
+    onMute                      : PropTypes.func,
+    onMuteConversation          : PropTypes.func,
+    onBlock                     : PropTypes.func,
+    onReport                    : PropTypes.func,
+    onOpenMedia                 : PropTypes.func,
+    onOpenVideo                 : PropTypes.func,
+    reblogModal                 : PropTypes.bool,
+    deleteModal                 : PropTypes.bool,
+    autoPlayGif                 : PropTypes.bool,
+    muted                       : PropTypes.bool,
+    collapse                    : PropTypes.bool,
+    prepend                     : PropTypes.string,
+    withDismiss                 : PropTypes.bool,
+    intersectionObserverWrapper : PropTypes.object,
   };
 
   state = {
-    isExpanded: false,
-    isIntersecting: true, // assume intersecting until told otherwise
-    isHidden: false, // set to true in requestIdleCallback to trigger un-render
-    isCollapsed: false,
+    isExpanded                  : null,
+    isIntersecting              : true,
+    isHidden                    : false,
   }
 
-  // Avoid checking props that are functions (and whose equality will always
-  // evaluate to false. See react-immutable-pure-component for usage.
+/*
+
+###  Implementation
+
+####  `updateOnProps` and `updateOnStates`.
+
+`updateOnProps` and `updateOnStates` tell the component when to update.
+We specify them explicitly because some of our props are dynamically=
+generated functions, which would otherwise always trigger an update.
+Of course, this means that if we add an important prop, we will need
+to remember to specify it here.
+
+*/
+
   updateOnProps = [
     'status',
     'account',
     'settings',
-    'wrapped',
+    'prepend',
     'me',
     'boostModal',
     'autoPlayGif',
@@ -140,230 +219,503 @@ class Status extends ImmutablePureComponent {
 
   updateOnStates = [
     'isExpanded',
-    'isCollapsed',
   ]
 
+/*
+
+####  `componentWillReceiveProps()`.
+
+If our settings have changed to disable collapsed statuses, then we
+need to make sure that we uncollapse every one. We do that by watching
+for changes to `settings.collapsed.enabled` in
+`componentWillReceiveProps()`.
+
+We also need to watch for changes on the `collapse` prop---if this
+changes to anything other than `undefined`, then we need to collapse or
+uncollapse our status accordingly.
+
+*/
+
   componentWillReceiveProps (nextProps) {
-    if (!nextProps.settings.getIn(['collapsed', 'enabled'])) this.collapse(false);
-    else if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.collapse(this.props.collapse);
+    if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
+      this.setExpansion(false);
+    } else if (
+      nextProps.collapse !== this.props.collapse &&
+      nextProps.collapse !== undefined
+    ) this.setExpansion(nextProps.collapse ? false : null);
+  }
+
+/*
+
+####  `componentDidMount()`.
+
+When mounting, we just check to see if our status should be collapsed,
+and collapse it if so. We don't need to worry about whether collapsing
+is enabled here, because `setExpansion()` already takes that into
+account.
+
+The cases where a status should be collapsed are:
+
+ -  The `collapse` prop has been set to `true`
+ -  The user has decided in local settings to collapse all statuses.
+ -  The user has decided to collapse all notifications ('muted'
+    statuses).
+ -  The user has decided to collapse long statuses and the status is
+    over 400px (without media, or 650px with).
+ -  The status is a reply and the user has decided to collapse all
+    replies.
+ -  The status contains media and the user has decided to collapse all
+    statuses with media.
+
+We also start up our intersection observer to monitor our statuses.
+`componentMounted` lets us know that everything has been set up
+properly and our intersection observer is good to go.
+
+*/
+
+  componentDidMount () {
+    const { node, handleIntersection } = this;
+    const {
+      status,
+      settings,
+      collapse,
+      muted,
+      id,
+      intersectionObserverWrapper,
+    } = this.props;
+    const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
+
+    if (
+      collapse ||
+      autoCollapseSettings.get('all') || (
+        autoCollapseSettings.get('notifications') && muted
+      ) || (
+        autoCollapseSettings.get('lengthy') &&
+        node.clientHeight > (
+          status.get('media_attachments').size && !muted ? 650 : 400
+        )
+      ) || (
+        autoCollapseSettings.get('replies') &&
+        status.get('in_reply_to_id', null) !== null
+      ) || (
+        autoCollapseSettings.get('media') &&
+        !(status.get('spoiler_text').length) &&
+        status.get('media_attachments').size
+      )
+    ) this.setExpansion(false);
+
+    if (!intersectionObserverWrapper) return;
+    else intersectionObserverWrapper.observe(
+      id,
+      node,
+      handleIntersection
+    );
+
+    this.componentMounted = true;
   }
 
+/*
+
+####  `shouldComponentUpdate()`.
+
+If the status is about to be both offscreen (not intersecting) and
+hidden, then we only need to update it if it's not that way currently.
+If the status is moving from offscreen to onscreen, then we *have* to
+re-render, so that we can unhide the element if necessary.
+
+If neither of these cases are true, we can leave it up to our
+`updateOnProps` and `updateOnStates` arrays.
+
+*/
+
   shouldComponentUpdate (nextProps, nextState) {
-    if (!nextState.isIntersecting && nextState.isHidden) {
-      // It's only if we're not intersecting (i.e. offscreen) and isHidden is true
-      // that either "isIntersecting" or "isHidden" matter, and then they're
-      // the only things that matter.
+    switch (true) {
+    case !nextState.isIntersecting && nextState.isHidden:
       return this.state.isIntersecting || !this.state.isHidden;
-    } else if (nextState.isIntersecting && !this.state.isIntersecting) {
-      // If we're going from a non-intersecting state to an intersecting state,
-      // (i.e. offscreen to onscreen), then we definitely need to re-render
+    case nextState.isIntersecting && !this.state.isIntersecting:
       return true;
+    default:
+      return super.shouldComponentUpdate(nextProps, nextState);
     }
-    // Otherwise, diff based on "updateOnProps" and "updateOnStates"
-    return super.shouldComponentUpdate(nextProps, nextState);
   }
 
-  componentDidUpdate () {
-    if (this.state.isIntersecting || !this.state.isHidden) this.saveHeight();
-  }
+/*
 
-  componentDidMount () {
-    const node = this.node;
+####  `componentDidUpdate()`.
 
-    const { collapse, settings, status } = this.props;
+If our component is being rendered for any reason and an update has
+triggered, this will save its height.
 
-    if (collapse !== undefined) this.collapse(collapse);
-    else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse();
-    else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > (status.get('media_attachments').size > 0 && !this.props.muted ? 650 : 400)) this.collapse();
-    else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse();
-    else if (settings.getIn(['collapsed', 'auto', 'media']) && !(status.get('spoiler_text').length > 0) && status.get('media_attachments').size > 0) this.collapse();
+This is, frankly, a bit overkill, as the only instance when we
+actually *need* to update the height right now should be when the
+value of `isExpanded` has changed. But it makes for more readable
+code and prevents bugs in the future where the height isn't set
+properly after some change.
 
-    if (!this.props.intersectionObserverWrapper) {
-      // TODO: enable IntersectionObserver optimization for notification statuses.
-      // These are managed in notifications/index.js rather than status_list.js
-      return;
-    }
-    this.props.intersectionObserverWrapper.observe(
-      this.props.id,
-      this.node,
-      this.handleIntersection
-    );
+*/
 
-    this.componentMounted = true;
+  componentDidUpdate () {
+    if (
+      this.state.isIntersecting || !this.state.isHidden
+    ) this.saveHeight();
   }
 
+/*
+
+####  `componentWillUnmount()`.
+
+If our component is about to unmount, then we'd better unset
+`this.componentMounted`.
+
+*/
+
   componentWillUnmount () {
     this.componentMounted = false;
   }
 
-  collapse = (collapsedOrNot) => {
-    if (collapsedOrNot === undefined) collapsedOrNot = true;
-    if (this.props.settings.getIn(['collapsed', 'enabled'])) this.setState({ isCollapsed: !!collapsedOrNot });
-  }
+/*
+
+####  `handleIntersection()`.
+
+`handleIntersection()` either hides the status (if it is offscreen) or
+unhides it (if it is onscreen). It's called by
+`intersectionObserverWrapper.observe()`.
+
+If our status isn't intersecting, we schedule an idle task (using the
+aptly-named `scheduleIdleTask()`) to hide the status at the next
+available opportunity.
+
+tootsuite/mastodon left us with the following enlightening comment
+regarding this function:
+
+>   Edge 15 doesn't support isIntersecting, but we can infer it
+
+It then implements a polyfill (intersectionRect.height > 0) which isn't
+actually sufficient. The short answer is, this behaviour isn't really
+supported on Edge but we can get kinda close.
+
+*/
 
   handleIntersection = (entry) => {
-    // Edge 15 doesn't support isIntersecting, but we can infer it
-    // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/
-    // https://github.com/WICG/IntersectionObserver/issues/211
-    const isIntersecting = (typeof entry.isIntersecting === 'boolean') ?
-    entry.isIntersecting : entry.intersectionRect.height > 0;
-    this.setState((prevState) => {
-      if (prevState.isIntersecting && !isIntersecting) {
-        scheduleIdleTask(this.hideIfNotIntersecting);
+    const isIntersecting = (
+      typeof entry.isIntersecting === 'boolean' ?
+      entry.isIntersecting :
+      entry.intersectionRect.height > 0
+    );
+    this.setState(
+      (prevState) => {
+        if (prevState.isIntersecting && !isIntersecting) {
+          scheduleIdleTask(this.hideIfNotIntersecting);
+        }
+        return {
+          isIntersecting : isIntersecting,
+          isHidden       : false,
+        };
       }
-      return {
-        isIntersecting: isIntersecting,
-        isHidden: false,
-      };
-    });
+    );
   }
 
-  hideIfNotIntersecting = () => {
-    if (!this.componentMounted) {
-      return;
-    }
+/*
+
+####  `hideIfNotIntersecting()`.
+
+This function will hide the status if we're still not intersecting.
+Hiding the status means that it will just render an empty div instead
+of actual content, which saves RAMS and CPUs or some such.
 
-    // When the browser gets a chance, test if we're still not intersecting,
-    // and if so, set our isHidden to true to trigger an unrender. The point of
-    // this is to save DOM nodes and avoid using up too much memory.
-    // See: https://github.com/tootsuite/mastodon/issues/2900
-    this.setState((prevState) => ({ isHidden: !prevState.isIntersecting }));
+*/
+
+  hideIfNotIntersecting = () => {
+    if (!this.componentMounted) return;
+    this.setState(
+      (prevState) => ({ isHidden: !prevState.isIntersecting })
+    );
   }
 
+/*
+
+####  `saveHeight()`.
+
+`saveHeight()` saves the height of our status so that when whe hide it
+we preserve its dimensions. We only want to store our height, though,
+if our status has content (otherwise, it would imply that it is
+already hidden).
+
+*/
+
   saveHeight = () => {
-    if (this.node && this.node.children.length !== 0) {
+    if (this.node && this.node.children.length) {
       this.height = this.node.getBoundingClientRect().height;
     }
   }
 
+/*
+
+####  `setExpansion()`.
+
+`setExpansion()` sets the value of `isExpanded` in our state. It takes
+one argument, `value`, which gives the desired value for `isExpanded`.
+The default for this argument is `null`.
+
+`setExpansion()` automatically checks for us whether toot collapsing
+is enabled, so we don't have to.
+
+We use a `switch` statement to simplify our code.
+
+*/
+
+  setExpansion = (value) => {
+    switch (true) {
+    case value === undefined || value === null:
+      this.setState({ isExpanded: null });
+      break;
+    case !value && this.props.settings.getIn(['collapsed', 'enabled']):
+      this.setState({ isExpanded: false });
+      break;
+    case !!value:
+      this.setState({ isExpanded: true });
+      break;
+    }
+  }
+
+/*
+
+####  `handleRef()`.
+
+`handleRef()` just saves a reference to our status node to `this.node`.
+It also saves our height, in case the height of our node has changed.
+
+*/
+
   handleRef = (node) => {
     this.node = node;
     this.saveHeight();
   }
 
-  handleClick = () => {
-    const { status } = this.props;
-    const { isCollapsed } = this.state;
-    if (isCollapsed) this.handleCollapsedClick();
-    else this.context.router.history.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
-  }
+/*
 
-  handleAccountClick = (e) => {
+####  `parseClick()`.
+
+`parseClick()` takes a click event and responds appropriately.
+If our status is collapsed, then clicking on it should uncollapse it.
+If `Shift` is held, then clicking on it should collapse it.
+Otherwise, we open the url handed to us in `destination`, if
+applicable.
+
+*/
+
+  parseClick = (e, destination) => {
+    const { router } = this.context;
+    const { status } = this.props;
+    const { isExpanded } = this.state;
+    if (destination === undefined) {
+      destination = `/statuses/${
+        status.getIn(['reblog', 'id'], status.get('id'))
+      }`;
+    }
     if (e.button === 0) {
-      const id = Number(e.currentTarget.getAttribute('data-id'));
+      if (isExpanded === false) this.setExpansion(null);
+      else if (e.shiftKey) {
+        this.setExpansion(false);
+        document.getSelection().removeAllRanges();
+      } else router.history.push(destination);
       e.preventDefault();
-      if (this.state.isCollapsed) this.handleCollapsedClick();
-      else this.context.router.history.push(`/accounts/${id}`);
     }
   }
 
-  handleExpandedToggle = () => {
-    this.setState({ isExpanded: !this.state.isExpanded, isCollapsed: false });
-  };
+/*
 
-  handleCollapsedClick = () => {
-    this.collapse(!this.state.isCollapsed);
-    this.setState({ isExpanded: false });
-  }
+####  `render()`.
+
+`render()` actually puts our element on the screen. The particulars of
+this operation are further explained in the code below.
+
+*/
 
   render () {
+    const { parseClick, setExpansion, handleRef } = this;
+    const {
+      status,
+      account,
+      settings,
+      collapsed,
+      muted,
+      prepend,
+      intersectionObserverWrapper,
+      onOpenVideo,
+      onOpenMedia,
+      autoPlayGif,
+      ...other
+    } = this.props;
+    const { isExpanded, isIntersecting, isHidden } = this.state;
+    let background = null;
+    let attachments = null;
     let media = null;
     let mediaIcon = null;
-    let statusAvatar;
 
-    // Exclude intersectionObserverWrapper from `other` variable
-    // because intersection is managed in here.
-    const { status, account, settings, intersectionObserverWrapper, intl, ...other } = this.props;
-    const { isExpanded, isIntersecting, isHidden, isCollapsed } = this.state;
+/*
 
+If we don't have a status, then we don't render anything.
 
-    let background = settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds']) ? status.getIn(['account', 'header']) : null;
+*/
 
     if (status === null) {
       return null;
     }
 
+/*
+
+If our status is offscreen and hidden, then we render an empty <div> in
+its place. We fill it with "content" but note that opacity is set to 0.
+
+*/
+
     if (!isIntersecting && isHidden) {
       return (
-        <div ref={this.handleRef} data-id={status.get('id')} style={{ height: `${this.height}px`, opacity: 0, overflow: 'hidden' }}>
-          {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
+        <div
+          ref={this.handleRef}
+          data-id={status.get('id')}
+          style={{
+            height   : `${this.height}px`,
+            opacity  : 0,
+            overflow : 'hidden',
+          }}
+        >
+          {
+            status.getIn(['account', 'display_name']) ||
+            status.getIn(['account', 'username'])
+          }
           {status.get('content')}
         </div>
       );
     }
 
-    if (status.get('media_attachments').size > 0 && !this.props.muted) {
-      if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
+/*
 
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = (
+If user backgrounds for collapsed statuses are enabled, then we
+initialize our background accordingly. This will only be rendered if
+the status is collapsed.
+
+*/
+
+    if (
+      settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])
+    ) background = status.getIn(['account', 'header']);
+
+/*
+
+This handles our media attachments. Note that we don't show media on
+muted (notification) statuses. If the media type is unknown, then we
+simply ignore it.
+
+After we have generated our appropriate media element and stored it in
+`media`, we snatch the thumbnail to use as our `background` if media
+backgrounds for collapsed statuses are enabled.
+
+*/
+
+    attachments = status.get('media_attachments');
+    if (attachments.size && !muted) {
+      if (attachments.some((item) => item.get('type') === 'unknown')) {
+
+      } else if (
+        attachments.getIn([0, 'type']) === 'video'
+      ) {
+        media = (  //  Media type is 'video'
           <VideoPlayer
-            media={status.getIn(['media_attachments', 0])}
+            media={attachments.get(0)}
             sensitive={status.get('sensitive')}
             letterbox={settings.getIn(['media', 'letterbox'])}
             height={250}
-            onOpenVideo={this.props.onOpenVideo}
+            onOpenVideo={onOpenVideo}
           />
         );
         mediaIcon = 'video-camera';
-      } else {
+      } else {  //  Media type is 'image' or 'gifv'
         media = (
           <MediaGallery
-            media={status.get('media_attachments')}
+            media={attachments}
             sensitive={status.get('sensitive')}
             letterbox={settings.getIn(['media', 'letterbox'])}
             height={250}
-            onOpenMedia={this.props.onOpenMedia}
-            autoPlayGif={this.props.autoPlayGif}
+            onOpenMedia={onOpenMedia}
+            autoPlayGif={autoPlayGif}
           />
         );
         mediaIcon = 'picture-o';
       }
 
-      if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) background = status.getIn(['media_attachments', 0]).get('preview_url');
-    }
-
-    if (account === undefined || account === null) {
-      statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />;
-    }else{
-      statusAvatar = <AvatarOverlay staticSrc={status.getIn(['account', 'avatar_static'])} overlaySrc={account.get('avatar_static')} />;
+      if (
+        !status.get('sensitive') &&
+        !(status.get('spoiler_text').length > 0) &&
+        settings.getIn(['collapsed', 'backgrounds', 'preview_images'])
+      ) background = attachments.getIn([0, 'preview_url']);
     }
 
-    return (
-      <div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef} style={{ backgroundImage: background && isCollapsed ? 'url(' + background + ')' : 'none' }}>
-        <div className='status__info'>
-
-          <div className='status__info__icons'>
-            {mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null}
-            {settings.getIn(['collapsed', 'enabled']) ? <IconButton
-              className='status__collapse-button'
-              animate flip
-              active={isCollapsed}
-              title={isCollapsed ? intl.formatMessage(messages.uncollapse) : intl.formatMessage(messages.collapse)}
-              icon='angle-double-up'
-              onClick={this.handleCollapsedClick}
-            /> : null}
-          </div>
-
-          <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name'>
-            <div className='status__avatar'>
-              {statusAvatar}
-            </div>
-
-            <DisplayName account={status.get('account')} />
-          </a>
-
-        </div>
 
-        <StatusContent status={status} mediaIcon={mediaIcon} onClick={this.handleClick} expanded={isExpanded} collapsed={isCollapsed} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
+/*
 
-          {isCollapsed ? null : media}
+Finally, we can render our status. We just put the pieces together
+from above. We only render the action bar if the status isn't
+collapsed.
 
-        </StatusContent>
+*/
 
-        {isCollapsed ? null : <StatusActionBar status={status} account={account} {...other} />}
-      </div>
+    return (
+      <article
+        className={
+          `status${
+            muted ? ' muted' : ''
+          } status-${status.get('visibility')}${
+            isExpanded === false ? ' collapsed' : ''
+          }${
+            isExpanded === false && background ? ' has-background' : ''
+          }`
+        }
+        style={{
+          backgroundImage: (
+            isExpanded === false && background ?
+            `url(${background})` :
+            'none'
+          ),
+        }}
+        ref={handleRef}
+      >
+        {prepend && account ? (
+          <StatusPrepend
+            type={prepend}
+            account={account}
+            parseClick={parseClick}
+          />
+        ) : null}
+        <StatusHeader
+          account={status.get('account')}
+          friend={account}
+          mediaIcon={mediaIcon}
+          collapsible={settings.getIn(['collapsed', 'enabled'])}
+          collapsed={isExpanded === false}
+          parseClick={parseClick}
+          setExpansion={setExpansion}
+        />
+        <StatusContent
+          status={status}
+          media={media}
+          mediaIcon={mediaIcon}
+          expanded={isExpanded}
+          setExpansion={this.setExpansion}
+          onHeightUpdate={this.saveHeight}
+          parseClick={parseClick}
+        />
+        {isExpanded !== false ? (
+          <StatusActionBar
+            {...other}
+            status={status}
+            account={status.get('account')}
+          />
+        ) : null}
+      </article>
     );
+
   }
 
 }
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index c60d4f5a5..26103e1a3 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -15,13 +15,12 @@ export default class StatusContent extends React.PureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
-    expanded: PropTypes.bool,
-    collapsed: PropTypes.bool,
-    onExpandedToggle: PropTypes.func,
+    expanded: PropTypes.oneOf([true, false, null]),
+    setExpansion: PropTypes.func,
     onHeightUpdate: PropTypes.func,
-    onClick: PropTypes.func,
+    media: PropTypes.element,
     mediaIcon: PropTypes.string,
-    children: PropTypes.element,
+    parseClick: PropTypes.func,
   };
 
   state = {
@@ -57,27 +56,22 @@ export default class StatusContent extends React.PureComponent {
   }
 
   onLinkClick = (e) => {
-    if (e.button === 0 && this.props.collapsed) {
-      e.preventDefault();
-      if (this.props.onClick) this.props.onClick();
+    if (this.props.expanded === false) {
+      if (this.props.parseClick) this.props.parseClick(e);
     }
   }
 
   onMentionClick = (mention, e) => {
-    if (e.button === 0) {
-      e.preventDefault();
-      if (!this.props.collapsed) this.context.router.history.push(`/accounts/${mention.get('id')}`);
-      else if (this.props.onClick) this.props.onClick();
+    if (this.props.parseClick) {
+      this.props.parseClick(e, `/accounts/${mention.get('id')}`);
     }
   }
 
   onHashtagClick = (hashtag, e) => {
     hashtag = hashtag.replace(/^#/, '').toLowerCase();
 
-    if (e.button === 0) {
-      e.preventDefault();
-      if (!this.props.collapsed) this.context.router.history.push(`/timelines/tag/${hashtag}`);
-      else if (this.props.onClick) this.props.onClick();
+    if (this.props.parseClick) {
+      this.props.parseClick(e, `/timelines/tag/${hashtag}`);
     }
   }
 
@@ -86,6 +80,8 @@ export default class StatusContent extends React.PureComponent {
   }
 
   handleMouseUp = (e) => {
+    const { parseClick } = this.props;
+
     if (!this.startXY) {
       return;
     }
@@ -97,8 +93,8 @@ export default class StatusContent extends React.PureComponent {
       return;
     }
 
-    if (deltaX + deltaY < 5 && e.button === 0 && this.props.onClick) {
-      this.props.onClick();
+    if (deltaX + deltaY < 5 && e.button === 0 && parseClick) {
+      parseClick(e);
     }
 
     this.startXY = null;
@@ -107,9 +103,8 @@ export default class StatusContent extends React.PureComponent {
   handleSpoilerClick = (e) => {
     e.preventDefault();
 
-    if (this.props.onExpandedToggle) {
-      // The parent manages the state
-      this.props.onExpandedToggle();
+    if (this.props.setExpansion) {
+      this.props.setExpansion(this.props.expanded ? null : true);
     } else {
       this.setState({ hidden: !this.state.hidden });
     }
@@ -120,12 +115,20 @@ export default class StatusContent extends React.PureComponent {
   }
 
   render () {
-    const { status, children, mediaIcon } = this.props;
+    const { status, media, mediaIcon } = this.props;
 
-    const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
+    const hidden = (
+      this.props.setExpansion ?
+      !this.props.expanded :
+      this.state.hidden
+    );
 
     const content = { __html: emojify(status.get('content')) };
-    const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };
+    const spoilerContent = {
+      __html: emojify(escapeTextContentForBrowser(
+        status.get('spoiler_text', '')
+      )),
+    };
     const directionStyle = { direction: 'ltr' };
 
     if (isRtl(status.get('search_index'))) {
@@ -136,12 +139,38 @@ export default class StatusContent extends React.PureComponent {
       let mentionsPlaceholder = '';
 
       const mentionLinks = status.get('mentions').map(item => (
-        <Permalink to={`/accounts/${item.get('id')}`} href={item.get('url')} key={item.get('id')} className='mention'>
+        <Permalink
+          to={`/accounts/${item.get('id')}`}
+          href={item.get('url')}
+          key={item.get('id')}
+          className='mention'
+        >
           @<span>{item.get('username')}</span>
         </Permalink>
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      const toggleText = hidden ? [<FormattedMessage id='status.show_more' defaultMessage='Show more' key='0' />, mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`} aria-hidden='true' key='1' /> : null] : [<FormattedMessage id='status.show_less' defaultMessage='Show less' key='0' />];
+      const toggleText = hidden ? [
+        <FormattedMessage
+          id='status.show_more'
+          defaultMessage='Show more'
+          key='0'
+        />,
+        mediaIcon ? (
+          <i
+            className={
+              `fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`
+            }
+            aria-hidden='true'
+            key='1'
+          />
+        ) : null,
+      ] : [
+        <FormattedMessage
+          id='status.show_less'
+          defaultMessage='Show less'
+          key='0'
+        />,
+      ];
 
       if (hidden) {
         mentionsPlaceholder = <div>{mentionLinks}</div>;
@@ -170,12 +199,12 @@ export default class StatusContent extends React.PureComponent {
               onMouseUp={this.handleMouseUp}
               dangerouslySetInnerHTML={content}
             />
-            {children}
+            {media}
           </div>
 
         </div>
       );
-    } else if (this.props.onClick) {
+    } else if (this.props.parseClick) {
       return (
         <div
           ref={this.setRef}
@@ -187,7 +216,7 @@ export default class StatusContent extends React.PureComponent {
             onMouseUp={this.handleMouseUp}
             dangerouslySetInnerHTML={content}
           />
-          {children}
+          {media}
         </div>
       );
     } else {
@@ -198,7 +227,7 @@ export default class StatusContent extends React.PureComponent {
           style={directionStyle}
         >
           <div dangerouslySetInnerHTML={content} />
-          {children}
+          {media}
         </div>
       );
     }
diff --git a/app/javascript/mastodon/components/status_header.js b/app/javascript/mastodon/components/status_header.js
new file mode 100644
index 000000000..e8216e3d0
--- /dev/null
+++ b/app/javascript/mastodon/components/status_header.js
@@ -0,0 +1,229 @@
+/*
+
+`<StatusHeader>`
+================
+
+Originally a part of `<Status>`, but extracted into a separate
+component for better documentation and maintainance by
+@kibi@glitch.social as a part of glitch-soc/mastodon.
+
+*/
+
+                            /* * * * */
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Our standard React imports:
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  We will need internationalization in this component:
+import { defineMessages, injectIntl } from 'react-intl';
+
+//  The various components used when constructing our header:
+import Avatar from './avatar';
+import AvatarOverlay from './avatar_overlay';
+import DisplayName from './display_name';
+import IconButton from './icon_button';
+
+                            /* * * * */
+
+/*
+
+Inital setup:
+-------------
+
+The `messages` constant is used to define any messages that we need
+from inside props. In our case, these are the `collapse` and
+`uncollapse` messages used with our collapse/uncollapse buttons.
+
+*/
+
+const messages = defineMessages({
+  collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
+  uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
+});
+
+                            /* * * * */
+
+/*
+
+The `<StatusHeader>` component:
+-------------------------------
+
+The `<StatusHeader>` component wraps together the header information
+(avatar, display name) and upper buttons and icons (collapsing, media
+icons) into a single `<header>` element.
+
+###  Props
+
+ -  __`account`, `friend` (`ImmutablePropTypes.map`) :__
+    These give the accounts associated with the status. `account` is
+    the author of the post; `friend` will have their avatar appear
+    in the overlay if provided.
+
+ -  __`mediaIcon` (`PropTypes.string`) :__
+    If a mediaIcon should be placed in the header, this string
+    specifies it.
+
+ -  __`collapsible`, `collapsed` (`PropTypes.bool`) :__
+    These props tell whether a post can be, and is, collapsed.
+
+ -  __`parseClick` (`PropTypes.func`) :__
+    This function will be called when the user clicks inside the header
+    information.
+
+ -  __`setExpansion` (`PropTypes.func`) :__
+    This function is used to set the expansion state of the post.
+
+ -  __`intl` (`PropTypes.object`) :__
+    This is our internationalization object, provided by
+    `injectIntl()`.
+
+*/
+
+@injectIntl
+export default class StatusHeader extends React.PureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    friend: ImmutablePropTypes.map,
+    mediaIcon: PropTypes.string,
+    collapsible: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    parseClick: PropTypes.func.isRequired,
+    setExpansion: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+/*
+
+###  Implementation
+
+####  `handleCollapsedClick()`.
+
+`handleCollapsedClick()` is just a simple callback for our collapsing
+button. It calls `setExpansion` to set the collapsed state of the
+status.
+
+*/
+
+  handleCollapsedClick = (e) => {
+    const { collapsed, setExpansion } = this.props;
+    if (e.button === 0) {
+      setExpansion(collapsed ? null : false);
+      e.preventDefault();
+    }
+  }
+
+/*
+
+####  `handleAccountClick()`.
+
+`handleAccountClick()` handles any clicks on the header info. It calls
+`parseClick()` with our `account` as the anticipatory `destination`.
+
+*/
+
+  handleAccountClick = (e) => {
+    const { account, parseClick } = this.props;
+    parseClick(e, `/accounts/${+account.get('id')}`);
+  }
+
+/*
+
+####  `render()`.
+
+`render()` actually puts our element on the screen. `<StatusHeader>`
+has a very straightforward rendering process.
+
+*/
+
+  render () {
+    const {
+      account,
+      friend,
+      mediaIcon,
+      collapsible,
+      collapsed,
+      intl,
+    } = this.props;
+
+    return (
+      <header className='status__info'>
+        {
+
+/*
+
+We have to include the status icons before the header content because
+it is rendered as a float.
+
+*/
+
+        }
+        <div className='status__info__icons'>
+          {mediaIcon ? (
+            <i
+              className={`fa fa-fw fa-${mediaIcon}`}
+              aria-hidden='true'
+            />
+          ) : null}
+          {collapsible ? (
+            <IconButton
+              className='status__collapse-button'
+              animate flip
+              active={collapsed}
+              title={
+                collapsed ?
+                intl.formatMessage(messages.uncollapse) :
+                intl.formatMessage(messages.collapse)
+              }
+              icon='angle-double-up'
+              onClick={this.handleCollapsedClick}
+            />
+          ) : null}
+        </div>
+        {
+
+/*
+
+This begins our header content. It is all wrapped inside of a link
+which gets handled by `handleAccountClick`. We use an `<AvatarOverlay>`
+if we have a `friend` and a normal `<Avatar>` if we don't.
+
+*/
+
+        }
+        <a
+          href={account.get('url')}
+          className='status__display-name'
+          onClick={this.handleAccountClick}
+        >
+          <div className='status__avatar'>{
+            friend ? (
+              <AvatarOverlay
+                staticSrc={account.get('avatar_static')}
+                overlaySrc={friend.get('avatar_static')}
+              />
+            ) : (
+              <Avatar
+                src={account.get('avatar')}
+                staticSrc={account.get('avatar_static')}
+                size={48}
+              />
+            )
+          }</div>
+          <DisplayName account={account} />
+        </a>
+
+      </header>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/components/status_prepend.js b/app/javascript/mastodon/components/status_prepend.js
new file mode 100644
index 000000000..34ccee358
--- /dev/null
+++ b/app/javascript/mastodon/components/status_prepend.js
@@ -0,0 +1,164 @@
+/*
+
+`<StatusPrepend>`
+=================
+
+Originally a part of `<Status>`, but extracted into a separate
+component for better documentation and maintainance by
+@kibi@glitch.social as a part of glitch-soc/mastodon.
+
+*/
+
+                            /* * * * */
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Our standard React imports:
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  This helps us process our text:
+import emojify from '../emoji';
+import escapeTextContentForBrowser from 'escape-html';
+import { FormattedMessage } from 'react-intl';
+
+                            /* * * * */
+
+/*
+
+The `<StatusPrepend>` component:
+--------------------------------
+
+The `<StatusPrepend>` component holds a status's prepend, ie the text
+that says “X reblogged this,” etc. It is represented by an `<aside>`
+element.
+
+###  Props
+
+ -  __`type` (`PropTypes.string`) :__
+    The type of prepend. One of `'reblogged_by'`, `'reblog'`,
+    `'favourite'`.
+
+ -  __`account` (`ImmutablePropTypes.map`) :__
+    The account associated with the prepend.
+
+ -  __`parseClick` (`PropTypes.func.isRequired`) :__
+    Our click parsing function.
+
+*/
+
+export default class StatusPrepend extends React.PureComponent {
+
+  static propTypes = {
+    type: PropTypes.string.isRequired,
+    account: ImmutablePropTypes.map.isRequired,
+    parseClick: PropTypes.func.isRequired,
+  };
+
+/*
+
+###  Implementation
+
+####  `handleClick()`.
+
+This is just a small wrapper for `parseClick()` that gets fired when
+an account link is clicked.
+
+*/
+
+  handleClick = (e) => {
+    const { account, parseClick } = this.props;
+    parseClick(e, `/accounts/${+account.get('id')}`);
+  }
+
+/*
+
+####  `<Message>`.
+
+`<Message>` is a quick functional React component which renders the
+actual prepend message based on our provided `type`. First we create a
+`link` for the account's name, and then use `<FormattedMessage>` to
+generate the message.
+
+*/
+
+  Message = () => {
+    const { type, account } = this.props;
+    let link = (
+      <a
+        onClick={this.handleClick}
+        href={account.get('url')}
+        className='status__display-name'
+      >
+        <b
+          dangerouslySetInnerHTML={{
+            __html : emojify(escapeTextContentForBrowser(
+              account.get('display_name') || account.get('username')
+            )),
+          }}
+        />
+      </a>
+    );
+    switch (type) {
+    case 'reblogged_by':
+      return (
+        <FormattedMessage
+          id='status.reblogged_by'
+          defaultMessage='{name} boosted'
+          values={{ name : link }}
+        />
+      );
+    case 'favourite':
+      return (
+        <FormattedMessage
+          id='notification.favourite'
+          defaultMessage='{name} favourited your status'
+          values={{ name : link }}
+        />
+      );
+    case 'reblog':
+      return (
+        <FormattedMessage
+          id='notification.reblog'
+          defaultMessage='{name} boosted your status'
+          values={{ name : link }}
+        />
+      );
+    }
+    return null;
+  }
+
+/*
+
+####  `render()`.
+
+Our `render()` is incredibly simple; we just render the icon and then
+the `<Message>` inside of an <aside>.
+
+*/
+
+  render () {
+    const { Message } = this;
+    const { type } = this.props;
+
+    return !type ? null : (
+      <aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
+        <div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
+          <i
+            className={`fa fa-fw fa-${
+              type === 'favourite' ? 'star star-icon' : 'retweet'
+            } status__prepend-icon`}
+          />
+        </div>
+        <Message />
+      </aside>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index bf4ef5532..4c0829fd0 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -1,7 +1,34 @@
+/*
+
+`<StatusContainer>`
+===================
+
+Original file by @gargron@mastodon.social et al as part of
+tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
+detecting reblogs has been moved here from <Status>.
+
+*/
+
+                            /* * * * */
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Our standard React/Redux imports:
 import React from 'react';
 import { connect } from 'react-redux';
+
+//  Our `<Status>`:
 import Status from '../components/status';
+
+//  This selector helps us get our status from the store:
 import { makeGetStatus } from '../selectors';
+
+//  These are our various `<Status>`-related actions:
 import {
   replyCompose,
   mentionCompose,
@@ -16,33 +43,130 @@ import {
   blockAccount,
   muteAccount,
 } from '../actions/accounts';
-import { muteStatus, unmuteStatus, deleteStatus } from '../actions/statuses';
+import {
+  muteStatus,
+  unmuteStatus,
+  deleteStatus,
+} from '../actions/statuses';
 import { initReport } from '../actions/reports';
 import { openModal } from '../actions/modal';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+//  We will need internationalization in this component:
+import {
+  defineMessages,
+  injectIntl,
+  FormattedMessage,
+} from 'react-intl';
+
+                            /* * * * */
+
+/*
+
+Inital setup:
+-------------
+
+The `messages` constant is used to define any messages that we will
+need in our component. In our case, these are the various confirmation
+messages used with statuses.
+
+*/
 
 const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
-  muteConfirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+  deleteConfirm : {
+    id             : 'confirmations.delete.confirm',
+    defaultMessage : 'Delete',
+  },
+  deleteMessage : {
+    id             : 'confirmations.delete.message',
+    defaultMessage : 'Are you sure you want to delete this status?',
+  },
+  blockConfirm  : {
+    id             : 'confirmations.block.confirm',
+    defaultMessage : 'Block',
+  },
+  muteConfirm : {
+    id             : 'confirmations.mute.confirm',
+    defaultMessage : 'Mute',
+  },
 });
 
+                            /* * * * */
+
+/*
+
+State mapping:
+--------------
+
+The `mapStateToProps()` function maps various state properties to the
+props of our component. We wrap this in a `makeMapStateToProps()`
+function to give us closure and preserve `getStatus()` across function
+calls.
+
+*/
+
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
 
-  const mapStateToProps = (state, props) => ({
-    status: getStatus(state, props.id),
-    me: state.getIn(['meta', 'me']),
-    settings: state.get('local_settings'),
-    boostModal: state.getIn(['meta', 'boost_modal']),
-    deleteModal: state.getIn(['meta', 'delete_modal']),
-    autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
-  });
+  const mapStateToProps = (state, ownProps) => {
+
+    let status = getStatus(state, ownProps.id);
+    let reblogStatus = status.get('reblog', null);
+    let account = undefined;
+    let prepend = undefined;
+
+/*
+
+Here we process reblogs. If our status is a reblog, then we create a
+`prependMessage` to pass along to our `<Status>` along with the
+reblogger's `account`, and set `coreStatus` (the one we will actually
+render) to the status which has been reblogged.
+
+*/
+
+    if (reblogStatus !== null && typeof reblogStatus === 'object') {
+      account = status.get('account');
+      status = reblogStatus;
+      prepend = 'reblogged_by';
+    }
+
+/*
+
+Here are the props we pass to `<Status>`.
+
+*/
+
+    return {
+      status      : status,
+      account     : account || ownProps.account,
+      me          : state.getIn(['meta', 'me']),
+      settings    : state.get('local_settings'),
+      prepend     : prepend || ownProps.prepend,
+      reblogModal : state.getIn(['meta', 'boost_modal']),
+      deleteModal : state.getIn(['meta', 'delete_modal']),
+      autoPlayGif : state.getIn(['meta', 'auto_play_gif']),
+    };
+  };
 
   return mapStateToProps;
 };
 
+                            /* * * * */
+
+/*
+
+Dispatch mapping:
+-----------------
+
+The `mapDispatchToProps()` function maps dispatches to our store to the
+various props of our component. We need to provide dispatches for all
+of the things you can do with a status: reply, reblog, favourite, et
+cetera.
+
+For a few of these dispatches, we open up confirmation modals; the rest
+just immediately execute their corresponding actions.
+
+*/
+
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onReply (status, router) {
@@ -57,7 +181,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     if (status.get('reblogged')) {
       dispatch(unreblog(status));
     } else {
-      if (e.shiftKey || !this.boostModal) {
+      if (e.shiftKey || !this.reblogModal) {
         this.onModalReblog(status);
       } else {
         dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
@@ -127,4 +251,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
 });
 
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
+export default injectIntl(
+  connect(makeMapStateToProps, mapDispatchToProps)(Status)
+);
diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js
index 6c1985174..2b2171f8b 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.js
+++ b/app/javascript/mastodon/features/notifications/components/notification.js
@@ -15,7 +15,11 @@ export default class Notification extends ImmutablePureComponent {
     settings: ImmutablePropTypes.map.isRequired,
   };
 
-  renderFollow (account, link) {
+  renderFollow (notification) {
+    const account          = notification.get('account');
+    const displayName      = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
+    const displayNameHTML  = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+    const link             = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
     return (
       <div className='notification notification-follow'>
         <div className='notification__message'>
@@ -32,55 +36,50 @@ export default class Notification extends ImmutablePureComponent {
   }
 
   renderMention (notification) {
-    return <StatusContainer id={notification.get('status')} withDismiss />;
+    return (
+      <StatusContainer
+        id={notification.get('status')}
+        withDismiss
+      />
+    );
   }
 
-  renderFavourite (notification, settings, link) {
+  renderFavourite (notification) {
     return (
-      <div className='notification notification-favourite'>
-        <div className='notification__message'>
-          <div className='notification__favourite-icon-wrapper'>
-            <i className='fa fa-fw fa-star star-icon' />
-          </div>
-          <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
-        </div>
-
-        <StatusContainer id={notification.get('status')} account={notification.get('account')} muted collapse={settings.getIn(['collapsed', 'auto', 'notifications'])} withDismiss />
-      </div>
+      <StatusContainer
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='favourite'
+        muted
+        withDismiss
+      />
     );
   }
 
-  renderReblog (notification, settings, link) {
+  renderReblog (notification) {
     return (
-      <div className='notification notification-reblog'>
-        <div className='notification__message'>
-          <div className='notification__favourite-icon-wrapper'>
-            <i className='fa fa-fw fa-retweet' />
-          </div>
-          <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
-        </div>
-
-        <StatusContainer id={notification.get('status')} account={notification.get('account')} muted collapse={settings.getIn(['collapsed', 'auto', 'notifications'])} withDismiss />
-      </div>
+      <StatusContainer
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='reblog'
+        muted
+        withDismiss
+      />
     );
   }
 
   render () {
-    const { notification, settings } = this.props;
-    const account          = notification.get('account');
-    const displayName      = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
-    const displayNameHTML  = { __html: emojify(escapeTextContentForBrowser(displayName)) };
-    const link             = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
+    const { notification } = this.props;
 
     switch(notification.get('type')) {
     case 'follow':
-      return this.renderFollow(account, link);
+      return this.renderFollow(notification);
     case 'mention':
       return this.renderMention(notification);
     case 'favourite':
-      return this.renderFavourite(notification, settings, link);
+      return this.renderFavourite(notification);
     case 'reblog':
-      return this.renderReblog(notification, settings, link);
+      return this.renderReblog(notification);
     }
 
     return null;
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 6c3585489..277b79810 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -84,7 +84,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <DisplayName account={status.get('account')} />
         </a>
 
-        <StatusContent status={status} mediaIcon={mediaIcon}>{media}</StatusContent>
+        <StatusContent
+          status={status}
+          media={media}
+          mediaIcon={mediaIcon}
+        />
 
         <div className='detailed-status__meta'>
           <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 7ec712723..9e91cd713 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -577,19 +577,19 @@
     }
   }
 
-  &.status-collapsed {
-    height: 48px;
+  &.collapsed {
     background-position: center;
     background-size: cover;
+    user-select: none;
 
-    &::before {
+    &.has-background::before {
       display: block;
       position: absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
-    	background-image: linear-gradient(to bottom, transparentize($ui-base-color, .15), transparentize($ui-base-color, .3) 24px, transparentize($ui-base-color, .35));
+    	background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
       content: "";
     }
 
@@ -601,6 +601,10 @@
       height: 20px;
       overflow: hidden;
       text-overflow: ellipsis;
+
+      a:hover {
+        text-decoration: none;
+      }
     }
   }
 }
@@ -673,10 +677,9 @@
 }
 
 .status__prepend {
-  margin-left: 68px;
+  margin: -10px 0 10px;
   color: lighten($ui-base-color, 26%);
-  padding: 8px 0;
-  padding-bottom: 2px;
+  padding: 8px 0 2px;
   font-size: 14px;
   position: relative;
 
@@ -1072,12 +1075,6 @@
   strong {
     color: $primary-text-color;
   }
-
-  &.muted {
-    .emojione {
-      opacity: 0.5;
-    }
-  }
 }
 
 .status__display-name,
@@ -1122,10 +1119,9 @@
 }
 
 .status__avatar {
-  height: 48px;
-  left: 10px;
   position: absolute;
-  top: 10px;
+  margin-left: -58px;
+  height: 48px;
   width: 48px;
 }
 
@@ -1139,7 +1135,7 @@
     color: lighten($ui-base-color, 26%);
   }
 
-  .status__avatar {
+  .status__avatar, .emojione {
     opacity: 0.5;
   }
 
@@ -1155,7 +1151,7 @@
 }
 
 .notification__message {
-  margin-left: 68px;
+  margin: -10px 0 10px;
   padding: 8px 0;
   padding-bottom: 0;
   cursor: default;
@@ -2314,9 +2310,6 @@ button.icon-button.active i.fa-retweet {
   position: relative;
   text-align: center;
   z-index: 100;
-  margin-top: 15px;
-  margin-left:-68px;
-  width: calc(100% + 80px);
 }
 
 .media-spoiler__warning {