From 297921fce570bfab413bab4e16a4ae694ecc4f28 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Wed, 12 Jul 2017 01:02:51 -0700
Subject: Moved glitch files to their own location ;)

---
 .../glitch/components/status/action_bar.js         | 159 +++++
 app/javascript/glitch/components/status/content.js | 239 +++++++
 .../glitch/components/status/gallery/index.js      |  79 +++
 .../glitch/components/status/gallery/item.js       | 132 ++++
 app/javascript/glitch/components/status/header.js  | 247 +++++++
 app/javascript/glitch/components/status/index.js   | 719 +++++++++++++++++++++
 app/javascript/glitch/components/status/prepend.js | 164 +++++
 .../glitch/components/status/video_player.js       | 199 ++++++
 8 files changed, 1938 insertions(+)
 create mode 100644 app/javascript/glitch/components/status/action_bar.js
 create mode 100644 app/javascript/glitch/components/status/content.js
 create mode 100644 app/javascript/glitch/components/status/gallery/index.js
 create mode 100644 app/javascript/glitch/components/status/gallery/item.js
 create mode 100644 app/javascript/glitch/components/status/header.js
 create mode 100644 app/javascript/glitch/components/status/index.js
 create mode 100644 app/javascript/glitch/components/status/prepend.js
 create mode 100644 app/javascript/glitch/components/status/video_player.js

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
new file mode 100644
index 000000000..f298dcaa8
--- /dev/null
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -0,0 +1,159 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+import RelativeTimestamp from '../../../mastodon/components/relative_timestamp';
+import IconButton from '../../../mastodon/components/icon_button';
+import DropdownMenu from '../../../mastodon/components/dropdown_menu';
+
+const messages = defineMessages({
+  delete: { id: 'status.delete', defaultMessage: 'Delete' },
+  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
+  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
+  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
+  reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
+  reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
+  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  open: { id: 'status.open', defaultMessage: 'Expand this status' },
+  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
+  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
+  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+});
+
+@injectIntl
+export default class StatusActionBar extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onReply: PropTypes.func,
+    onFavourite: PropTypes.func,
+    onReblog: PropTypes.func,
+    onDelete: PropTypes.func,
+    onMention: PropTypes.func,
+    onMute: PropTypes.func,
+    onBlock: PropTypes.func,
+    onReport: PropTypes.func,
+    onMuteConversation: PropTypes.func,
+    me: PropTypes.number.isRequired,
+    withDismiss: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+  };
+
+  // Avoid checking props that are functions (and whose equality will always
+  // evaluate to false. See react-immutable-pure-component for usage.
+  updateOnProps = [
+    'status',
+    'me',
+    'withDismiss',
+  ]
+
+  handleReplyClick = () => {
+    this.props.onReply(this.props.status, this.context.router.history);
+  }
+
+  handleFavouriteClick = () => {
+    this.props.onFavourite(this.props.status);
+  }
+
+  handleReblogClick = (e) => {
+    this.props.onReblog(this.props.status, e);
+  }
+
+  handleDeleteClick = () => {
+    this.props.onDelete(this.props.status);
+  }
+
+  handleMentionClick = () => {
+    this.props.onMention(this.props.status.get('account'), this.context.router.history);
+  }
+
+  handleMuteClick = () => {
+    this.props.onMute(this.props.status.get('account'));
+  }
+
+  handleBlockClick = () => {
+    this.props.onBlock(this.props.status.get('account'));
+  }
+
+  handleOpen = () => {
+    this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
+  }
+
+  handleReport = () => {
+    this.props.onReport(this.props.status);
+  }
+
+  handleConversationMuteClick = () => {
+    this.props.onMuteConversation(this.props.status);
+  }
+
+  render () {
+    const { status, me, intl, withDismiss } = this.props;
+    const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
+    const mutingConversation = status.get('muted');
+
+    let menu = [];
+    let reblogIcon = 'retweet';
+    let replyIcon;
+    let replyTitle;
+
+    menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
+    menu.push(null);
+
+    if (withDismiss) {
+      menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
+      menu.push(null);
+    }
+
+    if (status.getIn(['account', 'id']) === me) {
+      menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
+    } else {
+      menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
+      menu.push(null);
+      menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
+      menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
+      menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
+    }
+
+    /*
+    if (status.get('visibility') === 'direct') {
+      reblogIcon = 'envelope';
+    } else if (status.get('visibility') === 'private') {
+      reblogIcon = 'lock';
+    }
+    */
+
+    if (status.get('in_reply_to_id', null) === null) {
+      replyIcon = 'reply';
+      replyTitle = intl.formatMessage(messages.reply);
+    } else {
+      replyIcon = 'reply-all';
+      replyTitle = intl.formatMessage(messages.replyAll);
+    }
+
+    return (
+      <div className='status__action-bar'>
+        <IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
+        <IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+
+        <div className='status__action-bar-dropdown'>
+          <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
+        </div>
+
+        <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js
new file mode 100644
index 000000000..76f5b765a
--- /dev/null
+++ b/app/javascript/glitch/components/status/content.js
@@ -0,0 +1,239 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import escapeTextContentForBrowser from 'escape-html';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+//  Mastodon imports  //
+import emojify from '../../../mastodon/emoji';
+import { isRtl } from '../../../mastodon/rtl';
+import Permalink from '../../../mastodon/components/permalink';
+
+export default class StatusContent extends React.PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    expanded: PropTypes.oneOf([true, false, null]),
+    setExpansion: PropTypes.func,
+    onHeightUpdate: PropTypes.func,
+    media: PropTypes.element,
+    mediaIcon: PropTypes.string,
+    parseClick: PropTypes.func,
+  };
+
+  state = {
+    hidden: true,
+  };
+
+  componentDidMount () {
+    const node  = this.node;
+    const links = node.querySelectorAll('a');
+
+    for (var i = 0; i < links.length; ++i) {
+      let link    = links[i];
+      let mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
+
+      if (mention) {
+        link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
+        link.setAttribute('title', mention.get('acct'));
+      } else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
+        link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
+      } else {
+        link.addEventListener('click', this.onLinkClick.bind(this), false);
+        link.setAttribute('target', '_blank');
+        link.setAttribute('rel', 'noopener');
+        link.setAttribute('title', link.href);
+      }
+    }
+  }
+
+  componentDidUpdate () {
+    if (this.props.onHeightUpdate) {
+      this.props.onHeightUpdate();
+    }
+  }
+
+  onLinkClick = (e) => {
+    if (this.props.expanded === false) {
+      if (this.props.parseClick) this.props.parseClick(e);
+    }
+  }
+
+  onMentionClick = (mention, e) => {
+    if (this.props.parseClick) {
+      this.props.parseClick(e, `/accounts/${mention.get('id')}`);
+    }
+  }
+
+  onHashtagClick = (hashtag, e) => {
+    hashtag = hashtag.replace(/^#/, '').toLowerCase();
+
+    if (this.props.parseClick) {
+      this.props.parseClick(e, `/timelines/tag/${hashtag}`);
+    }
+  }
+
+  handleMouseDown = (e) => {
+    this.startXY = [e.clientX, e.clientY];
+  }
+
+  handleMouseUp = (e) => {
+    const { parseClick } = this.props;
+
+    if (!this.startXY) {
+      return;
+    }
+
+    const [ startX, startY ] = this.startXY;
+    const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
+
+    if (e.target.localName === 'button' || e.target.localName === 'a' || (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) {
+      return;
+    }
+
+    if (deltaX + deltaY < 5 && e.button === 0 && parseClick) {
+      parseClick(e);
+    }
+
+    this.startXY = null;
+  }
+
+  handleSpoilerClick = (e) => {
+    e.preventDefault();
+
+    if (this.props.setExpansion) {
+      this.props.setExpansion(this.props.expanded ? null : true);
+    } else {
+      this.setState({ hidden: !this.state.hidden });
+    }
+  }
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  render () {
+    const { status, media, mediaIcon } = this.props;
+
+    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 directionStyle = { direction: 'ltr' };
+
+    if (isRtl(status.get('search_index'))) {
+      directionStyle.direction = 'rtl';
+    }
+
+    if (status.get('spoiler_text').length > 0) {
+      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'
+        >
+          @<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'
+        />,
+      ];
+
+      if (hidden) {
+        mentionsPlaceholder = <div>{mentionLinks}</div>;
+      }
+
+      return (
+        <div className='status__content status__content--with-action' ref={this.setRef}>
+          <p
+            style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+          >
+            <span dangerouslySetInnerHTML={spoilerContent} />
+            {' '}
+            <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
+              {toggleText}
+            </button>
+          </p>
+
+          {mentionsPlaceholder}
+
+          <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
+            <div
+              style={directionStyle}
+              onMouseDown={this.handleMouseDown}
+              onMouseUp={this.handleMouseUp}
+              dangerouslySetInnerHTML={content}
+            />
+            {media}
+          </div>
+
+        </div>
+      );
+    } else if (this.props.parseClick) {
+      return (
+        <div
+          ref={this.setRef}
+          className='status__content status__content--with-action'
+          style={directionStyle}
+        >
+          <div
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+            dangerouslySetInnerHTML={content}
+          />
+          {media}
+        </div>
+      );
+    } else {
+      return (
+        <div
+          ref={this.setRef}
+          className='status__content'
+          style={directionStyle}
+        >
+          <div dangerouslySetInnerHTML={content} />
+          {media}
+        </div>
+      );
+    }
+  }
+
+}
diff --git a/app/javascript/glitch/components/status/gallery/index.js b/app/javascript/glitch/components/status/gallery/index.js
new file mode 100644
index 000000000..ae03dc08d
--- /dev/null
+++ b/app/javascript/glitch/components/status/gallery/index.js
@@ -0,0 +1,79 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+//  Mastodon imports  //
+import IconButton from '../../../../mastodon/components/icon_button';
+
+//  Our imports  //
+import StatusGalleryItem from './item';
+
+const messages = defineMessages({
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+});
+
+@injectIntl
+export default class StatusGallery extends React.PureComponent {
+
+  static propTypes = {
+    sensitive: PropTypes.bool,
+    media: ImmutablePropTypes.list.isRequired,
+    letterbox: PropTypes.bool,
+    fullwidth: PropTypes.bool,
+    height: PropTypes.number.isRequired,
+    onOpenMedia: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired,
+  };
+
+  state = {
+    visible: !this.props.sensitive,
+  };
+
+  handleOpen = () => {
+    this.setState({ visible: !this.state.visible });
+  }
+
+  handleClick = (index) => {
+    this.props.onOpenMedia(this.props.media, index);
+  }
+
+  render () {
+    const { media, intl, sensitive, letterbox, fullwidth } = this.props;
+
+    let children;
+
+    if (!this.state.visible) {
+      let warning;
+
+      if (sensitive) {
+        warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+      } else {
+        warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
+      }
+
+      children = (
+        <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
+          <span className='media-spoiler__warning'>{warning}</span>
+          <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+        </div>
+      );
+    } else {
+      const size = media.take(4).size;
+      children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
+    }
+
+    return (
+      <div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
+        <div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
+          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
+        </div>
+
+        {children}
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/status/gallery/item.js b/app/javascript/glitch/components/status/gallery/item.js
new file mode 100644
index 000000000..d646825a3
--- /dev/null
+++ b/app/javascript/glitch/components/status/gallery/item.js
@@ -0,0 +1,132 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+
+//  Mastodon imports  //
+import { isIOS } from '../../../../mastodon/is_mobile';
+
+export default class StatusGalleryItem extends React.PureComponent {
+
+  static propTypes = {
+    attachment: ImmutablePropTypes.map.isRequired,
+    index: PropTypes.number.isRequired,
+    size: PropTypes.number.isRequired,
+    letterbox: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired,
+  };
+
+  handleClick = (e) => {
+    const { index, onClick } = this.props;
+
+    if (e.button === 0) {
+      e.preventDefault();
+      onClick(index);
+    }
+
+    e.stopPropagation();
+  }
+
+  render () {
+    const { attachment, index, size, letterbox } = this.props;
+
+    let width  = 50;
+    let height = 100;
+    let top    = 'auto';
+    let left   = 'auto';
+    let bottom = 'auto';
+    let right  = 'auto';
+
+    if (size === 1) {
+      width = 100;
+    }
+
+    if (size === 4 || (size === 3 && index > 0)) {
+      height = 50;
+    }
+
+    if (size === 2) {
+      if (index === 0) {
+        right = '2px';
+      } else {
+        left = '2px';
+      }
+    } else if (size === 3) {
+      if (index === 0) {
+        right = '2px';
+      } else if (index > 0) {
+        left = '2px';
+      }
+
+      if (index === 1) {
+        bottom = '2px';
+      } else if (index > 1) {
+        top = '2px';
+      }
+    } else if (size === 4) {
+      if (index === 0 || index === 2) {
+        right = '2px';
+      }
+
+      if (index === 1 || index === 3) {
+        left = '2px';
+      }
+
+      if (index < 2) {
+        bottom = '2px';
+      } else {
+        top = '2px';
+      }
+    }
+
+    let thumbnail = '';
+
+    if (attachment.get('type') === 'image') {
+      const previewUrl = attachment.get('preview_url');
+      const previewWidth = attachment.getIn(['meta', 'small', 'width']);
+
+      const originalUrl = attachment.get('url');
+      const originalWidth = attachment.getIn(['meta', 'original', 'width']);
+
+      const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
+      const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
+
+      thumbnail = (
+        <a
+          className='media-gallery__item-thumbnail'
+          href={attachment.get('remote_url') || originalUrl}
+          onClick={this.handleClick}
+          target='_blank'
+        >
+          <img className={letterbox ? 'letterbox' : ''} src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
+        </a>
+      );
+    } else if (attachment.get('type') === 'gifv') {
+      const autoPlay = !isIOS() && this.props.autoPlayGif;
+
+      thumbnail = (
+        <div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
+          <video
+            className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
+            role='application'
+            src={attachment.get('url')}
+            onClick={this.handleClick}
+            autoPlay={autoPlay}
+            loop
+            muted
+          />
+
+          <span className='media-gallery__gifv__label'>GIF</span>
+        </div>
+      );
+    }
+
+    return (
+      <div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
+        {thumbnail}
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
new file mode 100644
index 000000000..78aef1ed5
--- /dev/null
+++ b/app/javascript/glitch/components/status/header.js
@@ -0,0 +1,247 @@
+/*
+
+`<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:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl } from 'react-intl';
+
+//  Mastodon imports  //
+import Avatar from '../../../mastodon/components/avatar';
+import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
+import DisplayName from '../../../mastodon/components/display_name';
+import IconButton from '../../../mastodon/components/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' },
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+});
+
+                            /* * * * */
+
+/*
+
+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,
+    visibility: PropTypes.string,
+  };
+
+/*
+
+###  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,
+      visibility,
+    } = this.props;
+
+    const visibilityClass = {
+      public: 'globe',
+      unlisted: 'unlock-alt',
+      private: 'lock',
+      direct: 'envelope',
+    }[visibility];
+
+    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}
+          {(
+            <i
+              className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
+              title={intl.formatMessage(messages[visibility])}
+              aria-hidden='true'
+            />
+          )}
+          {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/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
new file mode 100644
index 000000000..a11cc0b6e
--- /dev/null
+++ b/app/javascript/glitch/components/status/index.js
@@ -0,0 +1,719 @@
+/*
+
+`<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:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task';
+
+//  Our imports  //
+import StatusPrepend from './prepend';
+import StatusHeader from './header';
+import StatusContent from './content';
+import StatusActionBar from './action_bar';
+import StatusGallery from './gallery';
+import StatusVideoPlayer from './video_player';
+
+                            /* * * * */
+
+/*
+
+The `<Status>` component:
+-------------------------
+
+The `<Status>` component is a container for statuses. It consists of a
+few parts:
+
+ -  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.
+
+###  Context
+
+ -  __`router` (`PropTypes.object`) :__
+    We need to get our router from the surrounding React context.
+
+###  Props
+
+ -  __`id` (`PropTypes.number`) :__
+    The id of the status.
+
+ -  __`status` (`ImmutablePropTypes.map`) :__
+    The status object, straight from the store.
+
+ -  __`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.
+
+###  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,
+  };
+
+  static propTypes = {
+    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                  : null,
+    isIntersecting              : true,
+    isHidden                    : false,
+  }
+
+/*
+
+###  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',
+    'prepend',
+    'me',
+    'boostModal',
+    'autoPlayGif',
+    'muted',
+    'collapse',
+  ]
+
+  updateOnStates = [
+    'isExpanded',
+  ]
+
+/*
+
+####  `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.setExpansion(true);
+    } 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) {
+    switch (true) {
+    case !nextState.isIntersecting && nextState.isHidden:
+      return this.state.isIntersecting || !this.state.isHidden;
+    case nextState.isIntersecting && !this.state.isIntersecting:
+      return true;
+    default:
+      return super.shouldComponentUpdate(nextProps, nextState);
+    }
+  }
+
+/*
+
+####  `componentDidUpdate()`.
+
+If our component is being rendered for any reason and an update has
+triggered, this will save its height.
+
+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.
+
+*/
+
+  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;
+  }
+
+/*
+
+####  `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) => {
+    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,
+        };
+      }
+    );
+  }
+
+/*
+
+####  `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.
+
+*/
+
+  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) {
+      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();
+  }
+
+/*
+
+####  `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) {
+      if (isExpanded === false) this.setExpansion(null);
+      else if (e.shiftKey) {
+        this.setExpansion(false);
+        document.getSelection().removeAllRanges();
+      } else router.history.push(destination);
+      e.preventDefault();
+    }
+  }
+
+/*
+
+####  `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;
+
+/*
+
+If we don't have a status, then we don't render anything.
+
+*/
+
+    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'])
+          }
+          {status.get('content')}
+        </div>
+      );
+    }
+
+/*
+
+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'
+          <StatusVideoPlayer
+            media={attachments.get(0)}
+            sensitive={status.get('sensitive')}
+            letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
+            height={250}
+            onOpenVideo={onOpenVideo}
+          />
+        );
+        mediaIcon = 'video-camera';
+      } else {  //  Media type is 'image' or 'gifv'
+        media = (
+          <StatusGallery
+            media={attachments}
+            sensitive={status.get('sensitive')}
+            letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
+            height={250}
+            onOpenMedia={onOpenMedia}
+            autoPlayGif={autoPlayGif}
+          />
+        );
+        mediaIcon = 'picture-o';
+      }
+
+      if (
+        !status.get('sensitive') &&
+        !(status.get('spoiler_text').length > 0) &&
+        settings.getIn(['collapsed', 'backgrounds', 'preview_images'])
+      ) background = attachments.getIn([0, 'preview_url']);
+    }
+
+
+/*
+
+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.
+
+*/
+
+    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}
+          visibility={status.get('visibility')}
+          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/glitch/components/status/prepend.js b/app/javascript/glitch/components/status/prepend.js
new file mode 100644
index 000000000..ef9209e81
--- /dev/null
+++ b/app/javascript/glitch/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:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import escapeTextContentForBrowser from 'escape-html';
+import { FormattedMessage } from 'react-intl';
+
+//  Mastodon imports  //
+import emojify from '../../../mastodon/emoji';
+
+                            /* * * * */
+
+/*
+
+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/glitch/components/status/video_player.js b/app/javascript/glitch/components/status/video_player.js
new file mode 100644
index 000000000..6583107c8
--- /dev/null
+++ b/app/javascript/glitch/components/status/video_player.js
@@ -0,0 +1,199 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+//  Mastodon imports  //
+import IconButton from '../../../mastodon/components/icon_button';
+import { isIOS } from '../../../mastodon/is_mobile';
+
+const messages = defineMessages({
+  toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
+  toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
+  expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
+});
+
+@injectIntl
+export default class StatusVideoPlayer extends React.PureComponent {
+
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    letterbox: PropTypes.bool,
+    fullwidth: PropTypes.bool,
+    height: PropTypes.number,
+    sensitive: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    autoplay: PropTypes.bool,
+    onOpenVideo: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    height: 110,
+  };
+
+  state = {
+    visible: !this.props.sensitive,
+    preview: true,
+    muted: true,
+    hasAudio: true,
+    videoError: false,
+  };
+
+  handleClick = () => {
+    this.setState({ muted: !this.state.muted });
+  }
+
+  handleVideoClick = (e) => {
+    e.stopPropagation();
+
+    const node = this.video;
+
+    if (node.paused) {
+      node.play();
+    } else {
+      node.pause();
+    }
+  }
+
+  handleOpen = () => {
+    this.setState({ preview: !this.state.preview });
+  }
+
+  handleVisibility = () => {
+    this.setState({
+      visible: !this.state.visible,
+      preview: true,
+    });
+  }
+
+  handleExpand = () => {
+    this.video.pause();
+    this.props.onOpenVideo(this.props.media, this.video.currentTime);
+  }
+
+  setRef = (c) => {
+    this.video = c;
+  }
+
+  handleLoadedData = () => {
+    if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
+      this.setState({ hasAudio: false });
+    }
+  }
+
+  handleVideoError = () => {
+    this.setState({ videoError: true });
+  }
+
+  componentDidMount () {
+    if (!this.video) {
+      return;
+    }
+
+    this.video.addEventListener('loadeddata', this.handleLoadedData);
+    this.video.addEventListener('error', this.handleVideoError);
+  }
+
+  componentDidUpdate () {
+    if (!this.video) {
+      return;
+    }
+
+    this.video.addEventListener('loadeddata', this.handleLoadedData);
+    this.video.addEventListener('error', this.handleVideoError);
+  }
+
+  componentWillUnmount () {
+    if (!this.video) {
+      return;
+    }
+
+    this.video.removeEventListener('loadeddata', this.handleLoadedData);
+    this.video.removeEventListener('error', this.handleVideoError);
+  }
+
+  render () {
+    const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
+
+    let spoilerButton = (
+      <div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
+        <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
+      </div>
+    );
+
+    let expandButton = (
+      <div className='status__video-player-expand'>
+        <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
+      </div>
+    );
+
+    let muteButton = '';
+
+    if (this.state.hasAudio) {
+      muteButton = (
+        <div className='status__video-player-mute'>
+          <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
+        </div>
+      );
+    }
+
+    if (!this.state.visible) {
+      if (sensitive) {
+        return (
+          <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
+            {spoilerButton}
+            <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+          </div>
+        );
+      } else {
+        return (
+          <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
+            {spoilerButton}
+            <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+          </div>
+        );
+      }
+    }
+
+    if (this.state.preview && !autoplay) {
+      return (
+        <div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
+          {spoilerButton}
+          <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
+        </div>
+      );
+    }
+
+    if (this.state.videoError) {
+      return (
+        <div style={{ height: `${height}px` }} className='video-error-cover' >
+          <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
+        {spoilerButton}
+        {muteButton}
+        {expandButton}
+
+        <video
+          className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
+          role='button'
+          tabIndex='0'
+          ref={this.setRef}
+          src={media.get('url')}
+          autoPlay={!isIOS()}
+          loop
+          muted={this.state.muted}
+          onClick={this.handleVideoClick}
+        />
+      </div>
+    );
+  }
+
+}
-- 
cgit 


From 66b1174d258e4ee0b4a410f2aa3b63f1e6cf280e Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Wed, 12 Jul 2017 19:52:36 +0200
Subject: Fix CW auto-expanding if collapsed toots are disabled

---
 app/javascript/glitch/components/status/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index a11cc0b6e..12ea0e9aa 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -233,7 +233,9 @@ uncollapse our status accordingly.
 
   componentWillReceiveProps (nextProps) {
     if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
-      this.setExpansion(true);
+      if (this.state.isExpanded === false) {
+        this.setExpansion(null);
+      }
     } else if (
       nextProps.collapse !== this.props.collapse &&
       nextProps.collapse !== undefined
-- 
cgit 


From 5770d461b21cf5b6a8adcaa44d19832e11289960 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Thu, 13 Jul 2017 02:40:16 -0700
Subject: Moved glitch containers and commented unused files

---
 .../glitch/components/compose/advanced_options.js  | 137 -----------
 .../compose/advanced_options/container.js          |  22 ++
 .../components/compose/advanced_options/index.js   | 137 +++++++++++
 .../glitch/components/notification/container.js    |  21 ++
 .../glitch/components/notification/index.js        |   2 +-
 .../glitch/components/settings/container.js        |  27 +++
 .../glitch/components/status/container.js          | 252 +++++++++++++++++++++
 app/javascript/glitch/components/status/index.js   |   4 +-
 app/javascript/glitch/components/status/player.js  | 199 ++++++++++++++++
 .../glitch/components/status/video_player.js       | 199 ----------------
 .../glitch/containers/compose/advanced_options.js  |  22 --
 .../glitch/containers/notification/index.js        |  21 --
 app/javascript/glitch/containers/settings/index.js |  27 ---
 app/javascript/glitch/containers/status/index.js   | 252 ---------------------
 .../mastodon/components/media_gallery.js           |   3 +
 app/javascript/mastodon/components/status.js       |   3 +
 .../mastodon/components/status_action_bar.js       |   3 +
 .../mastodon/components/status_content.js          |   3 +
 app/javascript/mastodon/components/status_list.js  |   2 +-
 app/javascript/mastodon/components/video_player.js |   3 +
 .../mastodon/containers/status_container.js        |   3 +
 .../mastodon/features/account/components/header.js |   3 +
 .../features/compose/components/compose_form.js    |   2 +-
 .../features/compose/components/search_results.js  |   2 +-
 .../notifications/components/notification.js       |   3 +
 .../containers/notification_container.js           |   3 +
 .../mastodon/features/notifications/index.js       |   2 +-
 .../features/status/components/detailed_status.js  |   4 +-
 app/javascript/mastodon/features/status/index.js   |   2 +-
 .../mastodon/features/ui/util/async-components.js  |   4 +-
 30 files changed, 697 insertions(+), 670 deletions(-)
 delete mode 100644 app/javascript/glitch/components/compose/advanced_options.js
 create mode 100644 app/javascript/glitch/components/compose/advanced_options/container.js
 create mode 100644 app/javascript/glitch/components/compose/advanced_options/index.js
 create mode 100644 app/javascript/glitch/components/notification/container.js
 create mode 100644 app/javascript/glitch/components/settings/container.js
 create mode 100644 app/javascript/glitch/components/status/container.js
 create mode 100644 app/javascript/glitch/components/status/player.js
 delete mode 100644 app/javascript/glitch/components/status/video_player.js
 delete mode 100644 app/javascript/glitch/containers/compose/advanced_options.js
 delete mode 100644 app/javascript/glitch/containers/notification/index.js
 delete mode 100644 app/javascript/glitch/containers/settings/index.js
 delete mode 100644 app/javascript/glitch/containers/status/index.js

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/compose/advanced_options.js b/app/javascript/glitch/components/compose/advanced_options.js
deleted file mode 100644
index 17fc1d801..000000000
--- a/app/javascript/glitch/components/compose/advanced_options.js
+++ /dev/null
@@ -1,137 +0,0 @@
-//  Package imports  //
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import Toggle from 'react-toggle';
-import { injectIntl, defineMessages } from 'react-intl';
-
-//  Mastodon imports  //
-import IconButton from '../../../mastodon/components/icon_button';
-
-const messages = defineMessages({
-  local_only_short: { id: 'advanced-options.local-only.short', defaultMessage: 'Local-only' },
-  local_only_long: { id: 'advanced-options.local-only.long', defaultMessage: 'Do not post to other instances' },
-  advanced_options_icon_title: { id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
-});
-
-const iconStyle = {
-  height: null,
-  lineHeight: '27px',
-};
-
-class AdvancedOptionToggle extends React.PureComponent {
-
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    active: PropTypes.bool.isRequired,
-    name: PropTypes.string.isRequired,
-    shortText: PropTypes.string.isRequired,
-    longText: PropTypes.string.isRequired,
-  }
-
-  onToggle = () => {
-    this.props.onChange(this.props.name);
-  }
-
-  render() {
-    const { active, shortText, longText } = this.props;
-    return (
-      <div role='button' tabIndex='0' className='advanced-options-dropdown__option' onClick={this.onToggle}>
-        <div className='advanced-options-dropdown__option__toggle'>
-          <Toggle checked={active} onChange={this.onToggle} />
-        </div>
-        <div className='advanced-options-dropdown__option__content'>
-          <strong>{shortText}</strong>
-          {longText}
-        </div>
-      </div>
-    );
-  }
-
-}
-
-@injectIntl
-export default class ComposeAdvancedOptions extends React.PureComponent {
-
-  static propTypes = {
-    values: ImmutablePropTypes.contains({
-      do_not_federate: PropTypes.bool.isRequired,
-    }).isRequired,
-    onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  onToggleDropdown = () => {
-    this.setState({ open: !this.state.open });
-  };
-
-  onGlobalClick = (e) => {
-    if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
-      this.setState({ open: false });
-    }
-  }
-
-  componentDidMount () {
-    window.addEventListener('click', this.onGlobalClick);
-    window.addEventListener('touchstart', this.onGlobalClick);
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('click', this.onGlobalClick);
-    window.removeEventListener('touchstart', this.onGlobalClick);
-  }
-
-  state = {
-    open: false,
-  };
-
-  handleClick = (e) => {
-    const option = e.currentTarget.getAttribute('data-index');
-    e.preventDefault();
-    this.props.onChange(option);
-  }
-
-  setRef = (c) => {
-    this.node = c;
-  }
-
-  render () {
-    const { open } = this.state;
-    const { intl, values } = this.props;
-
-    const options = [
-      { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' },
-    ];
-
-    const anyEnabled = values.some((enabled) => enabled);
-    const optionElems = options.map((option) => {
-      return (
-        <AdvancedOptionToggle
-          onChange={this.props.onChange}
-          active={values.get(option.key)}
-          key={option.key}
-          name={option.key}
-          shortText={intl.formatMessage(option.shortText)}
-          longText={intl.formatMessage(option.longText)}
-        />
-      );
-    });
-
-    return (<div ref={this.setRef} className={`advanced-options-dropdown ${open ?  'open' : ''} ${anyEnabled ? 'active' : ''} `}>
-      <div className='advanced-options-dropdown__value'>
-        <IconButton
-          className='advanced-options-dropdown__value'
-          title={intl.formatMessage(messages.advanced_options_icon_title)}
-          icon='ellipsis-h' active={open || anyEnabled}
-          size={18}
-          style={iconStyle}
-          onClick={this.onToggleDropdown}
-        />
-      </div>
-      <div className='advanced-options-dropdown__dropdown'>
-        {optionElems}
-      </div>
-    </div>);
-  }
-
-}
diff --git a/app/javascript/glitch/components/compose/advanced_options/container.js b/app/javascript/glitch/components/compose/advanced_options/container.js
new file mode 100644
index 000000000..10804454a
--- /dev/null
+++ b/app/javascript/glitch/components/compose/advanced_options/container.js
@@ -0,0 +1,22 @@
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Mastodon imports  //
+import { toggleComposeAdvancedOption } from '../../../../mastodon/actions/compose';
+
+//  Our imports  //
+import ComposeAdvancedOptions from '.';
+
+const mapStateToProps = state => ({
+  values: state.getIn(['compose', 'advanced_options']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (option) {
+    dispatch(toggleComposeAdvancedOption(option));
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeAdvancedOptions);
diff --git a/app/javascript/glitch/components/compose/advanced_options/index.js b/app/javascript/glitch/components/compose/advanced_options/index.js
new file mode 100644
index 000000000..dabf66095
--- /dev/null
+++ b/app/javascript/glitch/components/compose/advanced_options/index.js
@@ -0,0 +1,137 @@
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Toggle from 'react-toggle';
+import { injectIntl, defineMessages } from 'react-intl';
+
+//  Mastodon imports  //
+import IconButton from '../../../../mastodon/components/icon_button';
+
+const messages = defineMessages({
+  local_only_short: { id: 'advanced-options.local-only.short', defaultMessage: 'Local-only' },
+  local_only_long: { id: 'advanced-options.local-only.long', defaultMessage: 'Do not post to other instances' },
+  advanced_options_icon_title: { id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
+});
+
+const iconStyle = {
+  height: null,
+  lineHeight: '27px',
+};
+
+class AdvancedOptionToggle extends React.PureComponent {
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    active: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    shortText: PropTypes.string.isRequired,
+    longText: PropTypes.string.isRequired,
+  }
+
+  onToggle = () => {
+    this.props.onChange(this.props.name);
+  }
+
+  render() {
+    const { active, shortText, longText } = this.props;
+    return (
+      <div role='button' tabIndex='0' className='advanced-options-dropdown__option' onClick={this.onToggle}>
+        <div className='advanced-options-dropdown__option__toggle'>
+          <Toggle checked={active} onChange={this.onToggle} />
+        </div>
+        <div className='advanced-options-dropdown__option__content'>
+          <strong>{shortText}</strong>
+          {longText}
+        </div>
+      </div>
+    );
+  }
+
+}
+
+@injectIntl
+export default class ComposeAdvancedOptions extends React.PureComponent {
+
+  static propTypes = {
+    values: ImmutablePropTypes.contains({
+      do_not_federate: PropTypes.bool.isRequired,
+    }).isRequired,
+    onChange: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  onToggleDropdown = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  onGlobalClick = (e) => {
+    if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
+      this.setState({ open: false });
+    }
+  }
+
+  componentDidMount () {
+    window.addEventListener('click', this.onGlobalClick);
+    window.addEventListener('touchstart', this.onGlobalClick);
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('click', this.onGlobalClick);
+    window.removeEventListener('touchstart', this.onGlobalClick);
+  }
+
+  state = {
+    open: false,
+  };
+
+  handleClick = (e) => {
+    const option = e.currentTarget.getAttribute('data-index');
+    e.preventDefault();
+    this.props.onChange(option);
+  }
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  render () {
+    const { open } = this.state;
+    const { intl, values } = this.props;
+
+    const options = [
+      { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' },
+    ];
+
+    const anyEnabled = values.some((enabled) => enabled);
+    const optionElems = options.map((option) => {
+      return (
+        <AdvancedOptionToggle
+          onChange={this.props.onChange}
+          active={values.get(option.key)}
+          key={option.key}
+          name={option.key}
+          shortText={intl.formatMessage(option.shortText)}
+          longText={intl.formatMessage(option.longText)}
+        />
+      );
+    });
+
+    return (<div ref={this.setRef} className={`advanced-options-dropdown ${open ?  'open' : ''} ${anyEnabled ? 'active' : ''} `}>
+      <div className='advanced-options-dropdown__value'>
+        <IconButton
+          className='advanced-options-dropdown__value'
+          title={intl.formatMessage(messages.advanced_options_icon_title)}
+          icon='ellipsis-h' active={open || anyEnabled}
+          size={18}
+          style={iconStyle}
+          onClick={this.onToggleDropdown}
+        />
+      </div>
+      <div className='advanced-options-dropdown__dropdown'>
+        {optionElems}
+      </div>
+    </div>);
+  }
+
+}
diff --git a/app/javascript/glitch/components/notification/container.js b/app/javascript/glitch/components/notification/container.js
new file mode 100644
index 000000000..c58ef4bd2
--- /dev/null
+++ b/app/javascript/glitch/components/notification/container.js
@@ -0,0 +1,21 @@
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Mastodon imports  //
+import { makeGetNotification } from '../../../mastodon/selectors';
+
+//  Our imports  //
+import Notification from '.';
+
+const makeMapStateToProps = () => {
+  const getNotification = makeGetNotification();
+
+  const mapStateToProps = (state, props) => ({
+    notification: getNotification(state, props.notification, props.accountId),
+    settings: state.get('local_settings'),
+  });
+
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps)(Notification);
diff --git a/app/javascript/glitch/components/notification/index.js b/app/javascript/glitch/components/notification/index.js
index 3f424d85d..34e03cdca 100644
--- a/app/javascript/glitch/components/notification/index.js
+++ b/app/javascript/glitch/components/notification/index.js
@@ -11,7 +11,7 @@ import Permalink from '../../../mastodon/components/permalink';
 import emojify from '../../../mastodon/emoji';
 
 //  Our imports  //
-import StatusContainer from '../../containers/status';
+import StatusContainer from '../status';
 
 export default class Notification extends ImmutablePureComponent {
 
diff --git a/app/javascript/glitch/components/settings/container.js b/app/javascript/glitch/components/settings/container.js
new file mode 100644
index 000000000..6034935eb
--- /dev/null
+++ b/app/javascript/glitch/components/settings/container.js
@@ -0,0 +1,27 @@
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Mastodon imports  //
+import { closeModal } from '../../../mastodon/actions/modal';
+
+//  Our imports  //
+import { changeLocalSetting } from '../../actions/local_settings';
+import Settings from '../../components/settings';
+
+const mapStateToProps = state => ({
+  settings: state.get('local_settings'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleSetting (setting, e) {
+    dispatch(changeLocalSetting(setting, e.target.checked));
+  },
+  changeSetting (setting, e) {
+    dispatch(changeLocalSetting(setting, e.target.value));
+  },
+  onClose () {
+    dispatch(closeModal());
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Settings);
diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
new file mode 100644
index 000000000..a8aa6efe9
--- /dev/null
+++ b/app/javascript/glitch/components/status/container.js
@@ -0,0 +1,252 @@
+/*
+
+`<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:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  defineMessages,
+  injectIntl,
+  FormattedMessage,
+} from 'react-intl';
+
+//  Mastodon imports  //
+import { makeGetStatus } from '../../../mastodon/selectors';
+import {
+  replyCompose,
+  mentionCompose,
+} from '../../../mastodon/actions/compose';
+import {
+  reblog,
+  favourite,
+  unreblog,
+  unfavourite,
+} from '../../../mastodon/actions/interactions';
+import {
+  blockAccount,
+  muteAccount,
+} from '../../../mastodon/actions/accounts';
+import {
+  muteStatus,
+  unmuteStatus,
+  deleteStatus,
+} from '../../../mastodon/actions/statuses';
+import { initReport } from '../../../mastodon/actions/reports';
+import { openModal } from '../../../mastodon/actions/modal';
+
+//  Our imports  //
+import Status from '.';
+
+                            /* * * * */
+
+/*
+
+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',
+  },
+});
+
+                            /* * * * */
+
+/*
+
+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, 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) {
+    dispatch(replyCompose(status, router));
+  },
+
+  onModalReblog (status) {
+    dispatch(reblog(status));
+  },
+
+  onReblog (status, e) {
+    if (status.get('reblogged')) {
+      dispatch(unreblog(status));
+    } else {
+      if (e.shiftKey || !this.reblogModal) {
+        this.onModalReblog(status);
+      } else {
+        dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
+      }
+    }
+  },
+
+  onFavourite (status) {
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
+  },
+
+  onDelete (status) {
+    if (!this.deleteModal) {
+      dispatch(deleteStatus(status.get('id')));
+    } else {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.deleteMessage),
+        confirm: intl.formatMessage(messages.deleteConfirm),
+        onConfirm: () => dispatch(deleteStatus(status.get('id'))),
+      }));
+    }
+  },
+
+  onMention (account, router) {
+    dispatch(mentionCompose(account, router));
+  },
+
+  onOpenMedia (media, index) {
+    dispatch(openModal('MEDIA', { media, index }));
+  },
+
+  onOpenVideo (media, time) {
+    dispatch(openModal('VIDEO', { media, time }));
+  },
+
+  onBlock (account) {
+    dispatch(openModal('CONFIRM', {
+      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+      confirm: intl.formatMessage(messages.blockConfirm),
+      onConfirm: () => dispatch(blockAccount(account.get('id'))),
+    }));
+  },
+
+  onReport (status) {
+    dispatch(initReport(status.get('account'), status));
+  },
+
+  onMute (account) {
+    dispatch(openModal('CONFIRM', {
+      message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+      confirm: intl.formatMessage(messages.muteConfirm),
+      onConfirm: () => dispatch(muteAccount(account.get('id'))),
+    }));
+  },
+
+  onMuteConversation (status) {
+    if (status.get('muted')) {
+      dispatch(unmuteStatus(status.get('id')));
+    } else {
+      dispatch(muteStatus(status.get('id')));
+    }
+  },
+
+});
+
+export default injectIntl(
+  connect(makeMapStateToProps, mapDispatchToProps)(Status)
+);
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 12ea0e9aa..1d135754a 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -46,7 +46,7 @@ import StatusHeader from './header';
 import StatusContent from './content';
 import StatusActionBar from './action_bar';
 import StatusGallery from './gallery';
-import StatusVideoPlayer from './video_player';
+import StatusPlayer from './player';
 
                             /* * * * */
 
@@ -619,7 +619,7 @@ backgrounds for collapsed statuses are enabled.
         attachments.getIn([0, 'type']) === 'video'
       ) {
         media = (  //  Media type is 'video'
-          <StatusVideoPlayer
+          <StatusPlayer
             media={attachments.get(0)}
             sensitive={status.get('sensitive')}
             letterbox={settings.getIn(['media', 'letterbox'])}
diff --git a/app/javascript/glitch/components/status/player.js b/app/javascript/glitch/components/status/player.js
new file mode 100644
index 000000000..37e4b8995
--- /dev/null
+++ b/app/javascript/glitch/components/status/player.js
@@ -0,0 +1,199 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+//  Mastodon imports  //
+import IconButton from '../../../mastodon/components/icon_button';
+import { isIOS } from '../../../mastodon/is_mobile';
+
+const messages = defineMessages({
+  toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
+  toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
+  expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
+});
+
+@injectIntl
+export default class StatusPlayer extends React.PureComponent {
+
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    letterbox: PropTypes.bool,
+    fullwidth: PropTypes.bool,
+    height: PropTypes.number,
+    sensitive: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    autoplay: PropTypes.bool,
+    onOpenVideo: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    height: 110,
+  };
+
+  state = {
+    visible: !this.props.sensitive,
+    preview: true,
+    muted: true,
+    hasAudio: true,
+    videoError: false,
+  };
+
+  handleClick = () => {
+    this.setState({ muted: !this.state.muted });
+  }
+
+  handleVideoClick = (e) => {
+    e.stopPropagation();
+
+    const node = this.video;
+
+    if (node.paused) {
+      node.play();
+    } else {
+      node.pause();
+    }
+  }
+
+  handleOpen = () => {
+    this.setState({ preview: !this.state.preview });
+  }
+
+  handleVisibility = () => {
+    this.setState({
+      visible: !this.state.visible,
+      preview: true,
+    });
+  }
+
+  handleExpand = () => {
+    this.video.pause();
+    this.props.onOpenVideo(this.props.media, this.video.currentTime);
+  }
+
+  setRef = (c) => {
+    this.video = c;
+  }
+
+  handleLoadedData = () => {
+    if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
+      this.setState({ hasAudio: false });
+    }
+  }
+
+  handleVideoError = () => {
+    this.setState({ videoError: true });
+  }
+
+  componentDidMount () {
+    if (!this.video) {
+      return;
+    }
+
+    this.video.addEventListener('loadeddata', this.handleLoadedData);
+    this.video.addEventListener('error', this.handleVideoError);
+  }
+
+  componentDidUpdate () {
+    if (!this.video) {
+      return;
+    }
+
+    this.video.addEventListener('loadeddata', this.handleLoadedData);
+    this.video.addEventListener('error', this.handleVideoError);
+  }
+
+  componentWillUnmount () {
+    if (!this.video) {
+      return;
+    }
+
+    this.video.removeEventListener('loadeddata', this.handleLoadedData);
+    this.video.removeEventListener('error', this.handleVideoError);
+  }
+
+  render () {
+    const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
+
+    let spoilerButton = (
+      <div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
+        <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
+      </div>
+    );
+
+    let expandButton = (
+      <div className='status__video-player-expand'>
+        <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
+      </div>
+    );
+
+    let muteButton = '';
+
+    if (this.state.hasAudio) {
+      muteButton = (
+        <div className='status__video-player-mute'>
+          <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
+        </div>
+      );
+    }
+
+    if (!this.state.visible) {
+      if (sensitive) {
+        return (
+          <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
+            {spoilerButton}
+            <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+          </div>
+        );
+      } else {
+        return (
+          <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
+            {spoilerButton}
+            <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
+            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+          </div>
+        );
+      }
+    }
+
+    if (this.state.preview && !autoplay) {
+      return (
+        <div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
+          {spoilerButton}
+          <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
+        </div>
+      );
+    }
+
+    if (this.state.videoError) {
+      return (
+        <div style={{ height: `${height}px` }} className='video-error-cover' >
+          <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
+        </div>
+      );
+    }
+
+    return (
+      <div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
+        {spoilerButton}
+        {muteButton}
+        {expandButton}
+
+        <video
+          className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
+          role='button'
+          tabIndex='0'
+          ref={this.setRef}
+          src={media.get('url')}
+          autoPlay={!isIOS()}
+          loop
+          muted={this.state.muted}
+          onClick={this.handleVideoClick}
+        />
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/status/video_player.js b/app/javascript/glitch/components/status/video_player.js
deleted file mode 100644
index 6583107c8..000000000
--- a/app/javascript/glitch/components/status/video_player.js
+++ /dev/null
@@ -1,199 +0,0 @@
-//  Package imports  //
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-//  Mastodon imports  //
-import IconButton from '../../../mastodon/components/icon_button';
-import { isIOS } from '../../../mastodon/is_mobile';
-
-const messages = defineMessages({
-  toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
-  toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
-  expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
-});
-
-@injectIntl
-export default class StatusVideoPlayer extends React.PureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    letterbox: PropTypes.bool,
-    fullwidth: PropTypes.bool,
-    height: PropTypes.number,
-    sensitive: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    autoplay: PropTypes.bool,
-    onOpenVideo: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    height: 110,
-  };
-
-  state = {
-    visible: !this.props.sensitive,
-    preview: true,
-    muted: true,
-    hasAudio: true,
-    videoError: false,
-  };
-
-  handleClick = () => {
-    this.setState({ muted: !this.state.muted });
-  }
-
-  handleVideoClick = (e) => {
-    e.stopPropagation();
-
-    const node = this.video;
-
-    if (node.paused) {
-      node.play();
-    } else {
-      node.pause();
-    }
-  }
-
-  handleOpen = () => {
-    this.setState({ preview: !this.state.preview });
-  }
-
-  handleVisibility = () => {
-    this.setState({
-      visible: !this.state.visible,
-      preview: true,
-    });
-  }
-
-  handleExpand = () => {
-    this.video.pause();
-    this.props.onOpenVideo(this.props.media, this.video.currentTime);
-  }
-
-  setRef = (c) => {
-    this.video = c;
-  }
-
-  handleLoadedData = () => {
-    if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
-      this.setState({ hasAudio: false });
-    }
-  }
-
-  handleVideoError = () => {
-    this.setState({ videoError: true });
-  }
-
-  componentDidMount () {
-    if (!this.video) {
-      return;
-    }
-
-    this.video.addEventListener('loadeddata', this.handleLoadedData);
-    this.video.addEventListener('error', this.handleVideoError);
-  }
-
-  componentDidUpdate () {
-    if (!this.video) {
-      return;
-    }
-
-    this.video.addEventListener('loadeddata', this.handleLoadedData);
-    this.video.addEventListener('error', this.handleVideoError);
-  }
-
-  componentWillUnmount () {
-    if (!this.video) {
-      return;
-    }
-
-    this.video.removeEventListener('loadeddata', this.handleLoadedData);
-    this.video.removeEventListener('error', this.handleVideoError);
-  }
-
-  render () {
-    const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
-
-    let spoilerButton = (
-      <div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
-        <IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
-      </div>
-    );
-
-    let expandButton = (
-      <div className='status__video-player-expand'>
-        <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
-      </div>
-    );
-
-    let muteButton = '';
-
-    if (this.state.hasAudio) {
-      muteButton = (
-        <div className='status__video-player-mute'>
-          <IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
-        </div>
-      );
-    }
-
-    if (!this.state.visible) {
-      if (sensitive) {
-        return (
-          <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
-            {spoilerButton}
-            <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
-            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-          </div>
-        );
-      } else {
-        return (
-          <div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
-            {spoilerButton}
-            <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
-            <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-          </div>
-        );
-      }
-    }
-
-    if (this.state.preview && !autoplay) {
-      return (
-        <div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
-          {spoilerButton}
-          <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
-        </div>
-      );
-    }
-
-    if (this.state.videoError) {
-      return (
-        <div style={{ height: `${height}px` }} className='video-error-cover' >
-          <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
-        </div>
-      );
-    }
-
-    return (
-      <div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
-        {spoilerButton}
-        {muteButton}
-        {expandButton}
-
-        <video
-          className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
-          role='button'
-          tabIndex='0'
-          ref={this.setRef}
-          src={media.get('url')}
-          autoPlay={!isIOS()}
-          loop
-          muted={this.state.muted}
-          onClick={this.handleVideoClick}
-        />
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/glitch/containers/compose/advanced_options.js b/app/javascript/glitch/containers/compose/advanced_options.js
deleted file mode 100644
index 92b989052..000000000
--- a/app/javascript/glitch/containers/compose/advanced_options.js
+++ /dev/null
@@ -1,22 +0,0 @@
-//  Package imports  //
-import { connect } from 'react-redux';
-
-//  Mastodon imports  //
-import { toggleComposeAdvancedOption } from '../../../mastodon/actions/compose';
-
-//  Our imports  //
-import ComposeAdvancedOptions from '../../components/compose/advanced_options';
-
-const mapStateToProps = state => ({
-  values: state.getIn(['compose', 'advanced_options']),
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onChange (option) {
-    dispatch(toggleComposeAdvancedOption(option));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ComposeAdvancedOptions);
diff --git a/app/javascript/glitch/containers/notification/index.js b/app/javascript/glitch/containers/notification/index.js
deleted file mode 100644
index 783c838ae..000000000
--- a/app/javascript/glitch/containers/notification/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-//  Package imports  //
-import { connect } from 'react-redux';
-
-//  Mastodon imports  //
-import { makeGetNotification } from '../../../mastodon/selectors';
-
-//  Our imports  //
-import Notification from '../../components/notification';
-
-const makeMapStateToProps = () => {
-  const getNotification = makeGetNotification();
-
-  const mapStateToProps = (state, props) => ({
-    notification: getNotification(state, props.notification, props.accountId),
-    settings: state.get('local_settings'),
-  });
-
-  return mapStateToProps;
-};
-
-export default connect(makeMapStateToProps)(Notification);
diff --git a/app/javascript/glitch/containers/settings/index.js b/app/javascript/glitch/containers/settings/index.js
deleted file mode 100644
index 6034935eb..000000000
--- a/app/javascript/glitch/containers/settings/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-//  Package imports  //
-import { connect } from 'react-redux';
-
-//  Mastodon imports  //
-import { closeModal } from '../../../mastodon/actions/modal';
-
-//  Our imports  //
-import { changeLocalSetting } from '../../actions/local_settings';
-import Settings from '../../components/settings';
-
-const mapStateToProps = state => ({
-  settings: state.get('local_settings'),
-});
-
-const mapDispatchToProps = dispatch => ({
-  toggleSetting (setting, e) {
-    dispatch(changeLocalSetting(setting, e.target.checked));
-  },
-  changeSetting (setting, e) {
-    dispatch(changeLocalSetting(setting, e.target.value));
-  },
-  onClose () {
-    dispatch(closeModal());
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Settings);
diff --git a/app/javascript/glitch/containers/status/index.js b/app/javascript/glitch/containers/status/index.js
deleted file mode 100644
index baf898e97..000000000
--- a/app/javascript/glitch/containers/status/index.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/*
-
-`<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:
---------
-
-*/
-
-//  Package imports  //
-import React from 'react';
-import { connect } from 'react-redux';
-import {
-  defineMessages,
-  injectIntl,
-  FormattedMessage,
-} from 'react-intl';
-
-//  Mastodon imports  //
-import { makeGetStatus } from '../../../mastodon/selectors';
-import {
-  replyCompose,
-  mentionCompose,
-} from '../../../mastodon/actions/compose';
-import {
-  reblog,
-  favourite,
-  unreblog,
-  unfavourite,
-} from '../../../mastodon/actions/interactions';
-import {
-  blockAccount,
-  muteAccount,
-} from '../../../mastodon/actions/accounts';
-import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-} from '../../../mastodon/actions/statuses';
-import { initReport } from '../../../mastodon/actions/reports';
-import { openModal } from '../../../mastodon/actions/modal';
-
-//  Our imports  //
-import Status from '../../components/status';
-
-                            /* * * * */
-
-/*
-
-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',
-  },
-});
-
-                            /* * * * */
-
-/*
-
-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, 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) {
-    dispatch(replyCompose(status, router));
-  },
-
-  onModalReblog (status) {
-    dispatch(reblog(status));
-  },
-
-  onReblog (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unreblog(status));
-    } else {
-      if (e.shiftKey || !this.reblogModal) {
-        this.onModalReblog(status);
-      } else {
-        dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
-      }
-    }
-  },
-
-  onFavourite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
-    } else {
-      dispatch(favourite(status));
-    }
-  },
-
-  onDelete (status) {
-    if (!this.deleteModal) {
-      dispatch(deleteStatus(status.get('id')));
-    } else {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(messages.deleteMessage),
-        confirm: intl.formatMessage(messages.deleteConfirm),
-        onConfirm: () => dispatch(deleteStatus(status.get('id'))),
-      }));
-    }
-  },
-
-  onMention (account, router) {
-    dispatch(mentionCompose(account, router));
-  },
-
-  onOpenMedia (media, index) {
-    dispatch(openModal('MEDIA', { media, index }));
-  },
-
-  onOpenVideo (media, time) {
-    dispatch(openModal('VIDEO', { media, time }));
-  },
-
-  onBlock (account) {
-    dispatch(openModal('CONFIRM', {
-      message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-      confirm: intl.formatMessage(messages.blockConfirm),
-      onConfirm: () => dispatch(blockAccount(account.get('id'))),
-    }));
-  },
-
-  onReport (status) {
-    dispatch(initReport(status.get('account'), status));
-  },
-
-  onMute (account) {
-    dispatch(openModal('CONFIRM', {
-      message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-      confirm: intl.formatMessage(messages.muteConfirm),
-      onConfirm: () => dispatch(muteAccount(account.get('id'))),
-    }));
-  },
-
-  onMuteConversation (status) {
-    if (status.get('muted')) {
-      dispatch(unmuteStatus(status.get('id')));
-    } else {
-      dispatch(muteStatus(status.get('id')));
-    }
-  },
-
-});
-
-export default injectIntl(
-  connect(makeMapStateToProps, mapDispatchToProps)(Status)
-);
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index 89a358e38..680a4e58a 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/gallery
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 6b9fdd2af..6605457f7 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 7bb394e71..2fad0fa5a 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/action_bar
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index 1b803a22e..ad925edef 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/content
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import escapeTextContentForBrowser from 'escape-html';
diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js
index b5c6c2053..94b348f25 100644
--- a/app/javascript/mastodon/components/status_list.js
+++ b/app/javascript/mastodon/components/status_list.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ScrollContainer } from 'react-router-scroll';
 import PropTypes from 'prop-types';
-import StatusContainer from '../../glitch/containers/status';
+import StatusContainer from '../../glitch/components/status/container';
 import LoadMore from './load_more';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js
index 999cf42d9..5f2447c6d 100644
--- a/app/javascript/mastodon/components/video_player.js
+++ b/app/javascript/mastodon/components/video_player.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/player
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index 438ecfe43..9b7f984e0 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/container
+
 import React from 'react';
 import { connect } from 'react-redux';
 import Status from '../components/status';
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index 3239b1085..1133e8a4e 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/account/header
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 4b14f8c81..de5b09834 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -11,7 +11,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Collapsable from '../../../components/collapsable';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
-import ComposeAdvancedOptionsContainer from '../../../../glitch/containers/compose/advanced_options';
+import ComposeAdvancedOptionsContainer from '../../../../glitch/components/compose/advanced_options/container';
 import SensitiveButtonContainer from '../containers/sensitive_button_container';
 import EmojiPickerDropdown from './emoji_picker_dropdown';
 import UploadFormContainer from '../containers/upload_form_container';
diff --git a/app/javascript/mastodon/features/compose/components/search_results.js b/app/javascript/mastodon/features/compose/components/search_results.js
index 3d1c3ca5e..cae4ca412 100644
--- a/app/javascript/mastodon/features/compose/components/search_results.js
+++ b/app/javascript/mastodon/features/compose/components/search_results.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
-import StatusContainer from '../../../../glitch/containers/status';
+import StatusContainer from '../../../../glitch/components/status/container';
 import Link from 'react-router-dom/Link';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js
index 9d631644a..0771849c2 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.js
+++ b/app/javascript/mastodon/features/notifications/components/notification.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/notification
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusContainer from '../../../containers/status_container';
diff --git a/app/javascript/mastodon/features/notifications/containers/notification_container.js b/app/javascript/mastodon/features/notifications/containers/notification_container.js
index 786222967..1f98a66d2 100644
--- a/app/javascript/mastodon/features/notifications/containers/notification_container.js
+++ b/app/javascript/mastodon/features/notifications/containers/notification_container.js
@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/notification/container
+
 import { connect } from 'react-redux';
 import { makeGetNotification } from '../../../selectors';
 import Notification from '../components/notification';
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index fb8f0d3cc..39fb4b26d 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -6,7 +6,7 @@ import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
 import { expandNotifications, scrollTopNotifications } from '../../actions/notifications';
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
-import NotificationContainer from '../../../glitch/containers/notification';
+import NotificationContainer from '../../../glitch/components/notification/container';
 import { ScrollContainer } from 'react-router-scroll';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index db0181f23..67d1e822d 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -5,7 +5,7 @@ import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import StatusContent from '../../../../glitch/components/status/content';
 import StatusGallery from '../../../../glitch/components/status/gallery';
-import StatusVideoPlayer from '../../../../glitch/components/status/video_player';
+import StatusPlayer from '../../../../glitch/components/status/player';
 import AttachmentList from '../../../components/attachment_list';
 import Link from 'react-router-dom/Link';
 import { FormattedDate, FormattedNumber } from 'react-intl';
@@ -48,7 +48,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
         media = <AttachmentList media={status.get('media_attachments')} />;
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
         media = (
-          <StatusVideoPlayer
+          <StatusPlayer
             sensitive={status.get('sensitive')}
             media={status.getIn(['media_attachments', 0])}
             letterbox={settings.getIn(['media', 'letterbox'])}
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index b24beadd2..d774dfdfe 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -22,7 +22,7 @@ import { initReport } from '../../actions/reports';
 import { makeGetStatus } from '../../selectors';
 import { ScrollContainer } from 'react-router-scroll';
 import ColumnBackButton from '../../components/column_back_button';
-import StatusContainer from '../../../glitch/containers/status';
+import StatusContainer from '../../../glitch/components/status/container';
 import { openModal } from '../../actions/modal';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index 8c9b1bd97..01e31749b 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -103,11 +103,11 @@ export function ReportModal () {
 }
 
 export function SettingsModal () {
-  return import(/* webpackChunkName: "modals/settings_modal" */'../../../../glitch/containers/settings');
+  return import(/* webpackChunkName: "modals/settings_modal" */'../../../../glitch/components/settings/container');
 }
 
 //  THESE AREN'T USED BY US; SEE `glitch/components/status` AND `mastodon/features/status`.  //
-//  HOWEVER, IF MASTODON EVER CHANGES DETAILED STATUSES SO THAT THEY NEED THEM, WE'LL NEED TO UPDATE THE URLS OR SOMETHING LOL.  //
+//  IF MASTODON EVER CHANGES DETAILED STATUSES TO REQUIRE THEM, WE'LL NEED TO UPDATE THE URLS OR SOMETHING LOL.  //
 
 export function MediaGallery () {
   return import(/* webpackChunkName: "status/MediaGallery" */'../../../components/media_gallery');
-- 
cgit 


From 75aafc932e42b5dba1030700bb47be0db41b1ab5 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Fri, 14 Jul 2017 17:03:43 +0200
Subject: Added buttons and menu items to dismiss individual notifications
 (#76)

* Added DELETE verb for notifications

* Added notification dismiss button to status dropdown

* Added reveal-on-hover notif dismiss button, added FollowNotification component
---
 app/controllers/api/v1/notifications_controller.rb |  4 ++
 .../glitch/components/notification/container.js    |  9 ++-
 .../components/notification/follow_notification.js | 78 ++++++++++++++++++++++
 .../glitch/components/notification/index.js        | 31 +++------
 .../glitch/components/status/action_bar.js         |  8 +++
 .../glitch/components/status/container.js          |  4 ++
 app/javascript/glitch/components/status/index.js   |  4 ++
 app/javascript/glitch/components/status/prepend.js | 29 +++++++-
 app/javascript/mastodon/actions/notifications.js   | 17 +++++
 app/javascript/mastodon/locales/en.json            |  1 +
 app/javascript/mastodon/reducers/notifications.js  |  7 ++
 app/javascript/styles/components.scss              | 21 ++++++
 config/routes.rb                                   |  2 +-
 13 files changed, 192 insertions(+), 23 deletions(-)
 create mode 100644 app/javascript/glitch/components/notification/follow_notification.js

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/controllers/api/v1/notifications_controller.rb b/app/controllers/api/v1/notifications_controller.rb
index 8910b77e9..55f35fa4b 100644
--- a/app/controllers/api/v1/notifications_controller.rb
+++ b/app/controllers/api/v1/notifications_controller.rb
@@ -24,6 +24,10 @@ class Api::V1::NotificationsController < Api::BaseController
     render_empty
   end
 
+  def destroy
+    dismiss
+  end
+
   def dismiss
     current_account.notifications.find_by!(id: params[:id]).destroy!
     render_empty
diff --git a/app/javascript/glitch/components/notification/container.js b/app/javascript/glitch/components/notification/container.js
index c58ef4bd2..60303537d 100644
--- a/app/javascript/glitch/components/notification/container.js
+++ b/app/javascript/glitch/components/notification/container.js
@@ -6,6 +6,7 @@ import { makeGetNotification } from '../../../mastodon/selectors';
 
 //  Our imports  //
 import Notification from '.';
+import { deleteNotification } from '../../../mastodon/actions/notifications';
 
 const makeMapStateToProps = () => {
   const getNotification = makeGetNotification();
@@ -18,4 +19,10 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-export default connect(makeMapStateToProps)(Notification);
+const mapDispatchToProps = (dispatch) => ({
+  onDeleteNotification (id) {
+    dispatch(deleteNotification(id));
+  },
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);
diff --git a/app/javascript/glitch/components/notification/follow_notification.js b/app/javascript/glitch/components/notification/follow_notification.js
new file mode 100644
index 000000000..7cabd91f6
--- /dev/null
+++ b/app/javascript/glitch/components/notification/follow_notification.js
@@ -0,0 +1,78 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import escapeTextContentForBrowser from 'escape-html';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+import emojify from '../../../mastodon/emoji';
+import Permalink from '../../../mastodon/components/permalink';
+import AccountContainer from '../../../mastodon/containers/account_container';
+
+const messages = defineMessages({
+  deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
+});
+
+
+@injectIntl
+export default class FollowNotification extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    notificationId: PropTypes.number.isRequired,
+    onDeleteNotification: PropTypes.func.isRequired,
+    account: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  // Avoid checking props that are functions (and whose equality will always
+  // evaluate to false. See react-immutable-pure-component for usage.
+  updateOnProps = [
+    'account',
+  ]
+
+  handleNotificationDeleteClick = () => {
+    this.props.onDeleteNotification(this.props.notificationId);
+  }
+
+  render () {
+    const { account, intl } = this.props;
+
+    const dismissTitle = intl.formatMessage(messages.deleteNotification);
+    const dismiss = (
+      <button
+        aria-label={dismissTitle}
+        title={dismissTitle}
+        onClick={this.handleNotificationDeleteClick}
+        className='status__prepend-dismiss-button'
+      >
+        <i className='fa fa-eraser' />
+      </button>
+    );
+
+    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'>
+          <div className='notification__favourite-icon-wrapper'>
+            <i className='fa fa-fw fa-user-plus' />
+          </div>
+
+          <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
+
+          {dismiss}
+        </div>
+
+        <AccountContainer id={account.get('id')} withNote={false} />
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/notification/index.js b/app/javascript/glitch/components/notification/index.js
index 83ac8dfc1..0cdc03cbe 100644
--- a/app/javascript/glitch/components/notification/index.js
+++ b/app/javascript/glitch/components/notification/index.js
@@ -1,42 +1,30 @@
 //  Package imports  //
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
-import escapeTextContentForBrowser from 'escape-html';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
 
 //  Mastodon imports  //
-import AccountContainer from '../../../mastodon/containers/account_container';
-import Permalink from '../../../mastodon/components/permalink';
-import emojify from '../../../mastodon/emoji';
 
 //  Our imports  //
 import StatusContainer from '../status/container';
+import FollowNotification from './follow_notification';
 
 export default class Notification extends ImmutablePureComponent {
 
   static propTypes = {
     notification: ImmutablePropTypes.map.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
+    onDeleteNotification: PropTypes.func.isRequired,
   };
 
   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'>
-          <div className='notification__favourite-icon-wrapper'>
-            <i className='fa fa-fw fa-user-plus' />
-          </div>
-
-          <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
-        </div>
-
-        <AccountContainer id={account.get('id')} withNote={false} />
-      </div>
+      <FollowNotification
+        notificationId={notification.get('id')}
+        account={notification.get('account')}
+        onDeleteNotification={this.props.onDeleteNotification}
+      />
     );
   }
 
@@ -44,6 +32,7 @@ export default class Notification extends ImmutablePureComponent {
     return (
       <StatusContainer
         id={notification.get('status')}
+        notificationId={notification.get('id')}
         withDismiss
       />
     );
@@ -56,6 +45,7 @@ export default class Notification extends ImmutablePureComponent {
         account={notification.get('account')}
         prepend='favourite'
         muted
+        notificationId={notification.get('id')}
         withDismiss
       />
     );
@@ -68,6 +58,7 @@ export default class Notification extends ImmutablePureComponent {
         account={notification.get('account')}
         prepend='reblog'
         muted
+        notificationId={notification.get('id')}
         withDismiss
       />
     );
diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
index f298dcaa8..6aa088c04 100644
--- a/app/javascript/glitch/components/status/action_bar.js
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -24,6 +24,7 @@ const messages = defineMessages({
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+  deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
 });
 
 @injectIntl
@@ -35,6 +36,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    notificationId: PropTypes.number,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
@@ -44,6 +46,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
     onBlock: PropTypes.func,
     onReport: PropTypes.func,
     onMuteConversation: PropTypes.func,
+    onDeleteNotification: PropTypes.func,
     me: PropTypes.number.isRequired,
     withDismiss: PropTypes.bool,
     intl: PropTypes.object.isRequired,
@@ -97,6 +100,10 @@ export default class StatusActionBar extends ImmutablePureComponent {
     this.props.onMuteConversation(this.props.status);
   }
 
+  handleNotificationDeleteClick = () => {
+    this.props.onDeleteNotification(this.props.notificationId);
+  }
+
   render () {
     const { status, me, intl, withDismiss } = this.props;
     const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
@@ -112,6 +119,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
     if (withDismiss) {
       menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
+      menu.push({ text: intl.formatMessage(messages.deleteNotification), action: this.handleNotificationDeleteClick });
       menu.push(null);
     }
 
diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
index a8aa6efe9..c45b2e0ec 100644
--- a/app/javascript/glitch/components/status/container.js
+++ b/app/javascript/glitch/components/status/container.js
@@ -50,6 +50,7 @@ import {
 } from '../../../mastodon/actions/statuses';
 import { initReport } from '../../../mastodon/actions/reports';
 import { openModal } from '../../../mastodon/actions/modal';
+import { deleteNotification } from '../../../mastodon/actions/notifications';
 
 //  Our imports  //
 import Status from '.';
@@ -245,6 +246,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onDeleteNotification (id) {
+    dispatch(deleteNotification(id));
+  },
 });
 
 export default injectIntl(
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 1d135754a..314e8b51c 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -170,6 +170,7 @@ export default class Status extends ImmutablePureComponent {
     onReport                    : PropTypes.func,
     onOpenMedia                 : PropTypes.func,
     onOpenVideo                 : PropTypes.func,
+    onDeleteNotification        : PropTypes.func,
     reblogModal                 : PropTypes.bool,
     deleteModal                 : PropTypes.bool,
     autoPlayGif                 : PropTypes.bool,
@@ -177,6 +178,7 @@ export default class Status extends ImmutablePureComponent {
     collapse                    : PropTypes.bool,
     prepend                     : PropTypes.string,
     withDismiss                 : PropTypes.bool,
+    notificationId              : PropTypes.number,
     intersectionObserverWrapper : PropTypes.object,
   };
 
@@ -685,6 +687,8 @@ collapsed.
             type={prepend}
             account={account}
             parseClick={parseClick}
+            notificationId={this.props.notificationId}
+            onDeleteNotification={this.props.onDeleteNotification}
           />
         ) : null}
         <StatusHeader
diff --git a/app/javascript/glitch/components/status/prepend.js b/app/javascript/glitch/components/status/prepend.js
index ef9209e81..d9b04b5ec 100644
--- a/app/javascript/glitch/components/status/prepend.js
+++ b/app/javascript/glitch/components/status/prepend.js
@@ -23,11 +23,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import escapeTextContentForBrowser from 'escape-html';
+import { defineMessages, injectIntl } from 'react-intl';
 import { FormattedMessage } from 'react-intl';
 
 //  Mastodon imports  //
 import emojify from '../../../mastodon/emoji';
 
+
+const messages = defineMessages({
+  deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
+});
+
                             /* * * * */
 
 /*
@@ -53,12 +59,16 @@ element.
 
 */
 
+@injectIntl
 export default class StatusPrepend extends React.PureComponent {
 
   static propTypes = {
     type: PropTypes.string.isRequired,
     account: ImmutablePropTypes.map.isRequired,
     parseClick: PropTypes.func.isRequired,
+    notificationId: PropTypes.number,
+    onDeleteNotification: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
 /*
@@ -77,6 +87,10 @@ an account link is clicked.
     parseClick(e, `/accounts/${+account.get('id')}`);
   }
 
+  handleNotificationDeleteClick = () => {
+    this.props.onDeleteNotification(this.props.notificationId);
+  }
+
 /*
 
 ####  `<Message>`.
@@ -145,7 +159,19 @@ the `<Message>` inside of an <aside>.
 
   render () {
     const { Message } = this;
-    const { type } = this.props;
+    const { type, intl } = this.props;
+
+    const dismissTitle = intl.formatMessage(messages.deleteNotification);
+    const dismiss = this.props.notificationId ? (
+      <button
+        aria-label={dismissTitle}
+        title={dismissTitle}
+        onClick={this.handleNotificationDeleteClick}
+        className='status__prepend-dismiss-button'
+      >
+        <i className='fa fa-eraser' />
+      </button>
+    ) : null;
 
     return !type ? null : (
       <aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
@@ -157,6 +183,7 @@ the `<Message>` inside of an <aside>.
           />
         </div>
         <Message />
+        {dismiss}
       </aside>
     );
   }
diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index c7d248122..b2a0f7ac3 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -6,6 +6,8 @@ import { defineMessages } from 'react-intl';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
 
+export const NOTIFICATION_DELETE_SUCCESS = 'NOTIFICATION_DELETE_SUCCESS';
+
 export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
 export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
 export const NOTIFICATIONS_REFRESH_FAIL    = 'NOTIFICATIONS_REFRESH_FAIL';
@@ -187,3 +189,18 @@ export function scrollTopNotifications(top) {
     top,
   };
 };
+
+export function deleteNotification(id) {
+  return (dispatch, getState) => {
+    api(getState).delete(`/api/v1/notifications/${id}`).then(() => {
+      dispatch(deleteNotificationSuccess(id));
+    });
+  };
+};
+
+export function deleteNotificationSuccess(id) {
+  return {
+    type: NOTIFICATION_DELETE_SUCCESS,
+    id: id,
+  };
+};
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index cf29e38da..d2e5f90ea 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -190,6 +190,7 @@
   "status.show_more": "Show more",
   "status.uncollapse": "Uncollapse",
   "status.unmute_conversation": "Unmute conversation",
+  "status.dismiss_notification": "Dismiss notification",
   "tabs_bar.compose": "Compose",
   "tabs_bar.federated_timeline": "Federated",
   "tabs_bar.home": "Home",
diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js
index 0063d24e4..da5fcde84 100644
--- a/app/javascript/mastodon/reducers/notifications.js
+++ b/app/javascript/mastodon/reducers/notifications.js
@@ -8,6 +8,7 @@ import {
   NOTIFICATIONS_EXPAND_FAIL,
   NOTIFICATIONS_CLEAR,
   NOTIFICATIONS_SCROLL_TOP,
+  NOTIFICATION_DELETE_SUCCESS,
 } from '../actions/notifications';
 import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
 import { TIMELINE_DELETE } from '../actions/timelines';
@@ -92,6 +93,10 @@ const deleteByStatus = (state, statusId) => {
   return state.update('items', list => list.filterNot(item => item.get('status') === statusId));
 };
 
+const deleteById = (state, notificationId) => {
+  return state.update('items', list => list.filterNot(item => item.get('id') === notificationId));
+};
+
 export default function notifications(state = initialState, action) {
   switch(action.type) {
   case NOTIFICATIONS_REFRESH_REQUEST:
@@ -113,6 +118,8 @@ export default function notifications(state = initialState, action) {
     return state.set('items', ImmutableList()).set('next', null);
   case TIMELINE_DELETE:
     return deleteByStatus(state, action.id);
+  case NOTIFICATION_DELETE_SUCCESS:
+    return deleteById(state, action.id);
   default:
     return state;
   }
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 6cca3666a..b06c99c95 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -617,6 +617,27 @@
   position: absolute;
 }
 
+.status__prepend-dismiss-button {
+  border: 0;
+  background: transparent;
+  position: absolute;
+  right: -3px;
+  opacity: 0;
+  transition: opacity 0.1s ease-in-out;
+
+  i.fa {
+    color: crimson;
+  }
+
+  .notification__message:hover & {
+    opacity: 1;
+  }
+
+  .notification-follow & {
+    right: 6px;
+  }
+}
+
 .status {
   padding: 8px 10px;
   padding-left: 68px;
diff --git a/config/routes.rb b/config/routes.rb
index 963fedcb4..a63fb3ae6 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -175,7 +175,7 @@ Rails.application.routes.draw do
         end
       end
 
-      resources :notifications, only: [:index, :show] do
+      resources :notifications, only: [:index, :show, :destroy] do
         collection do
           post :clear
           post :dismiss
-- 
cgit 


From bc4202d00b2956b630a7609fb74f31c04e9275f3 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 15 Jul 2017 15:10:06 -0700
Subject: Ported updates from #64

---
 .../glitch/components/status/action_bar.js         | 11 +++++----
 app/javascript/glitch/components/status/content.js | 28 ++++++++++++++--------
 app/javascript/glitch/components/status/header.js  |  1 +
 app/javascript/glitch/components/status/index.js   | 14 ++++++++---
 app/javascript/glitch/components/status/player.js  |  6 ++++-
 app/javascript/glitch/reducers/local_settings.js   | 20 ++++++++--------
 6 files changed, 51 insertions(+), 29 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
index 6aa088c04..df0904a7c 100644
--- a/app/javascript/glitch/components/status/action_bar.js
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -47,7 +47,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
     onReport: PropTypes.func,
     onMuteConversation: PropTypes.func,
     onDeleteNotification: PropTypes.func,
-    me: PropTypes.number.isRequired,
+    me: PropTypes.number,
     withDismiss: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
@@ -108,6 +108,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
     const { status, me, intl, withDismiss } = this.props;
     const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
     const mutingConversation = status.get('muted');
+    const anonymousAccess = !me;
 
     let menu = [];
     let reblogIcon = 'retweet';
@@ -151,12 +152,12 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
-        <IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+        <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
 
         <div className='status__action-bar-dropdown'>
-          <DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
+          <DropdownMenu items={menu} disabled={anonymousAccess} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
         </div>
 
         <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js
index 76f5b765a..06fe04ce0 100644
--- a/app/javascript/glitch/components/status/content.js
+++ b/app/javascript/glitch/components/status/content.js
@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import escapeTextContentForBrowser from 'escape-html';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import classnames from 'classnames';
 
 //  Mastodon imports  //
 import emojify from '../../../mastodon/emoji';
@@ -12,10 +13,6 @@ import Permalink from '../../../mastodon/components/permalink';
 
 export default class StatusContent extends React.PureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
     expanded: PropTypes.oneOf([true, false, null]),
@@ -24,6 +21,7 @@ export default class StatusContent extends React.PureComponent {
     media: PropTypes.element,
     mediaIcon: PropTypes.string,
     parseClick: PropTypes.func,
+    disabled: PropTypes.bool,
   };
 
   state = {
@@ -45,10 +43,11 @@ export default class StatusContent extends React.PureComponent {
         link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
       } else {
         link.addEventListener('click', this.onLinkClick.bind(this), false);
-        link.setAttribute('target', '_blank');
-        link.setAttribute('rel', 'noopener');
         link.setAttribute('title', link.href);
       }
+
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener');
     }
   }
 
@@ -118,7 +117,13 @@ export default class StatusContent extends React.PureComponent {
   }
 
   render () {
-    const { status, media, mediaIcon } = this.props;
+    const {
+      status,
+      media,
+      mediaIcon,
+      parseClick,
+      disabled,
+    } = this.props;
 
     const hidden = (
       this.props.setExpansion ?
@@ -133,6 +138,9 @@ export default class StatusContent extends React.PureComponent {
       )),
     };
     const directionStyle = { direction: 'ltr' };
+    const classNames = classnames('status__content', {
+      'status__content--with-action': parseClick && !disabled,
+    });
 
     if (isRtl(status.get('search_index'))) {
       directionStyle.direction = 'rtl';
@@ -180,7 +188,7 @@ export default class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className='status__content status__content--with-action' ref={this.setRef}>
+        <div className={classNames} ref={this.setRef}>
           <p
             style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
             onMouseDown={this.handleMouseDown}
@@ -207,11 +215,11 @@ export default class StatusContent extends React.PureComponent {
 
         </div>
       );
-    } else if (this.props.parseClick) {
+    } else if (parseClick) {
       return (
         <div
           ref={this.setRef}
-          className='status__content status__content--with-action'
+          className={classNames}
           style={directionStyle}
         >
           <div
diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
index 78aef1ed5..3187fa7fb 100644
--- a/app/javascript/glitch/components/status/header.js
+++ b/app/javascript/glitch/components/status/header.js
@@ -220,6 +220,7 @@ if we have a `friend` and a normal `<Avatar>` if we don't.
         }
         <a
           href={account.get('url')}
+          target='_blank'
           className='status__display-name'
           onClick={this.handleAccountClick}
         >
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 314e8b51c..4a91b5aa3 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -507,6 +507,7 @@ applicable.
     const { router } = this.context;
     const { status } = this.props;
     const { isExpanded } = this.state;
+    if (!router) return;
     if (destination === undefined) {
       destination = `/statuses/${
         status.getIn(['reblog', 'id'], status.get('id'))
@@ -532,7 +533,13 @@ this operation are further explained in the code below.
 */
 
   render () {
-    const { parseClick, setExpansion, handleRef } = this;
+    const {
+      parseClick,
+      setExpansion,
+      saveHeight,
+      handleRef,
+    } = this;
+    const { router } = this.context;
     const {
       status,
       account,
@@ -706,9 +713,10 @@ collapsed.
           media={media}
           mediaIcon={mediaIcon}
           expanded={isExpanded}
-          setExpansion={this.setExpansion}
-          onHeightUpdate={this.saveHeight}
+          setExpansion={setExpansion}
+          onHeightUpdate={saveHeight}
           parseClick={parseClick}
+          disabled={!router}
         />
         {isExpanded !== false ? (
           <StatusActionBar
diff --git a/app/javascript/glitch/components/status/player.js b/app/javascript/glitch/components/status/player.js
index 37e4b8995..cc65cd34e 100644
--- a/app/javascript/glitch/components/status/player.js
+++ b/app/javascript/glitch/components/status/player.js
@@ -17,6 +17,10 @@ const messages = defineMessages({
 @injectIntl
 export default class StatusPlayer extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
     letterbox: PropTypes.bool,
@@ -122,7 +126,7 @@ export default class StatusPlayer extends React.PureComponent {
       </div>
     );
 
-    let expandButton = (
+    let expandButton = !this.context.router ? '' : (
       <div className='status__video-player-expand'>
         <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
       </div>
diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js
index 79ff96307..776dcead7 100644
--- a/app/javascript/glitch/reducers/local_settings.js
+++ b/app/javascript/glitch/reducers/local_settings.js
@@ -28,7 +28,7 @@ Imports
 */
 
 //  Package imports  //
-import Immutable from 'immutable';
+import { Map as ImmutableMap } from 'immutable';
 
 //  Mastodon imports  //
 import { STORE_HYDRATE } from '../../mastodon/actions/store';
@@ -48,27 +48,27 @@ These are only used if no previously-saved values exist.
 
 */
 
-const initialState = Immutable.fromJS({
+const initialState = ImmutableMap({
   layout    : 'auto',
   stretch   : true,
-  collapsed : {
+  collapsed : ImmutableMap({
     enabled     : true,
-    auto        : {
+    auto        : ImmutableMap({
       all              : false,
       notifications    : true,
       lengthy          : true,
       replies          : false,
       media            : false,
-    },
-    backgrounds : {
+    }),
+    backgrounds : ImmutableMap({
       user_backgrounds : false,
       preview_images   : false,
-    },
-  },
-  media     : {
+    }),
+  }),
+  media     : ImmutableMap({
     letterbox   : true,
     fullwidth   : true,
-  },
+  }),
 });
 
                             /* * * * */
-- 
cgit 


From 604654ccb417ffdc9b48d876bea76c8bec14f360 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Fri, 21 Jul 2017 20:33:16 +0200
Subject: New notification cleaning mode (#89)

This PR adds a new notification cleaning mode, super perfectly tuned for accessibility, and removes the previous notification cleaning functionality as it's now redundant.

* w.i.p. notif clearing mode

* Better CSS for selected notification and shorter text if Stretch is off

* wip for rebase ~

* all working in notif clearing mode, except the actual removal

* bulk delete route for piggo

* cleaning + refactor. endpoint gives 422 for some reason

* formatting

* use the right route

* fix broken destroy_multiple

* load more notifs after succ cleaning

* satisfy eslint

* Removed CSS for the old notif delete button

* Tabindex=0 is mandatory

In order to make it possible to tab to this element you must have tab index = 0. Removing this violates WCAG and makes it impossible to use the interface without good eyesight and a mouse. So nobody with certain mobility impairments, vision impairments, or brain injuries would be able to use this feature if you don't have tabindex=0

* Corrected aria-label

Previous label implied a different behavior from what actually happens

* aria role localization & made the overlay behave like a checkbox

* checkboxes css and better contrast

* color tuning for the notif overlay

* fanceh checkboxes etc and nice backgrounds

* SHUT UP TRAVIS
---
 app/controllers/api/v1/notifications_controller.rb |   5 ++
 .../column/notif_cleaning_widget/container.js      |  56 ++++++++++++
 .../notification_purge_buttons.js                  | 100 +++++++++++++++++++++
 .../glitch/components/notification/container.js    |  20 +----
 .../glitch/components/notification/follow.js       |  61 ++-----------
 .../glitch/components/notification/index.js        |  10 +--
 .../components/notification/overlay/container.js   |  49 ++++++++++
 .../notification/overlay/notification_overlay.js   |  59 ++++++++++++
 .../glitch/components/status/action_bar.js         |   8 --
 .../glitch/components/status/container.js          |   5 --
 app/javascript/glitch/components/status/index.js   |  20 ++++-
 app/javascript/glitch/components/status/prepend.js |  28 +-----
 app/javascript/glitch/locales/en.json              |   2 +-
 app/javascript/mastodon/actions/notifications.js   |  64 +++++++++++--
 app/javascript/mastodon/components/column.js       |   7 +-
 .../mastodon/components/column_header.js           |  26 +++++-
 .../mastodon/features/notifications/index.js       |  16 +++-
 app/javascript/mastodon/reducers/notifications.js  |  42 +++++++--
 app/javascript/styles/components.scss              |  90 +++++++++++++++----
 config/routes.rb                                   |   1 +
 20 files changed, 513 insertions(+), 156 deletions(-)
 create mode 100644 app/javascript/glitch/components/column/notif_cleaning_widget/container.js
 create mode 100644 app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js
 create mode 100644 app/javascript/glitch/components/notification/overlay/container.js
 create mode 100644 app/javascript/glitch/components/notification/overlay/notification_overlay.js

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/controllers/api/v1/notifications_controller.rb b/app/controllers/api/v1/notifications_controller.rb
index 55f35fa4b..a949752fb 100644
--- a/app/controllers/api/v1/notifications_controller.rb
+++ b/app/controllers/api/v1/notifications_controller.rb
@@ -33,6 +33,11 @@ class Api::V1::NotificationsController < Api::BaseController
     render_empty
   end
 
+  def destroy_multiple
+    current_account.notifications.where(id: params[:ids]).destroy_all
+    render_empty
+  end
+
   private
 
   def load_notifications
diff --git a/app/javascript/glitch/components/column/notif_cleaning_widget/container.js b/app/javascript/glitch/components/column/notif_cleaning_widget/container.js
new file mode 100644
index 000000000..bf079e3c4
--- /dev/null
+++ b/app/javascript/glitch/components/column/notif_cleaning_widget/container.js
@@ -0,0 +1,56 @@
+/*
+
+`<NotificationPurgeButtonsContainer>`
+=========================
+
+This container connects `<NotificationPurgeButtons>`s to the Redux store.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Our imports  //
+import NotificationPurgeButtons from './notification_purge_buttons';
+import {
+  deleteMarkedNotifications,
+  enterNotificationClearingMode,
+} from '../../../../mastodon/actions/notifications';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Dispatch mapping:
+-----------------
+
+The `mapDispatchToProps()` function maps dispatches to our store to the
+various props of our component. We only need to provide a dispatch for
+deleting notifications.
+
+*/
+
+const mapDispatchToProps = dispatch => ({
+  onEnterCleaningMode(yes) {
+    dispatch(enterNotificationClearingMode(yes));
+  },
+
+  onDeleteMarkedNotifications() {
+    dispatch(deleteMarkedNotifications());
+  },
+});
+
+const mapStateToProps = state => ({
+  active: state.getIn(['notifications', 'cleaningMode']),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons);
diff --git a/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js b/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js
new file mode 100644
index 000000000..e41572256
--- /dev/null
+++ b/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js
@@ -0,0 +1,100 @@
+/**
+ * Buttons widget for controlling the notification clearing mode.
+ * In idle state, the cleaning mode button is shown. When the mode is active,
+ * a Confirm and Abort buttons are shown in its place.
+ */
+
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+  enter : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
+  accept : { id: 'notification_purge.confirm', defaultMessage: 'Dismiss selected notifications' },
+  abort : { id: 'notification_purge.abort', defaultMessage: 'Leave cleaning mode' },
+});
+
+@injectIntl
+export default class NotificationPurgeButtons extends ImmutablePureComponent {
+
+  static propTypes = {
+    // Nukes all marked notifications
+    onDeleteMarkedNotifications : PropTypes.func.isRequired,
+    // Enables or disables the mode
+    // and also clears the marked status of all notifications
+    onEnterCleaningMode : PropTypes.func.isRequired,
+    // Active state, changed via onStateChange()
+    active: PropTypes.bool.isRequired,
+    // i18n
+    intl: PropTypes.object.isRequired,
+  };
+
+  onEnterBtnClick = () => {
+    this.props.onEnterCleaningMode(true);
+  }
+
+  onAcceptBtnClick = () => {
+    this.props.onDeleteMarkedNotifications();
+  }
+
+  onAbortBtnClick = () => {
+    this.props.onEnterCleaningMode(false);
+  }
+
+  render () {
+    const { intl, active } = this.props;
+
+    const msgEnter = intl.formatMessage(messages.enter);
+    const msgAccept = intl.formatMessage(messages.accept);
+    const msgAbort = intl.formatMessage(messages.abort);
+
+    let enterButton, acceptButton, abortButton;
+
+    if (active) {
+      acceptButton = (
+        <button
+          className='active'
+          aria-label={msgAccept}
+          title={msgAccept}
+          onClick={this.onAcceptBtnClick}
+        >
+          <i className='fa fa-check' />
+        </button>
+      );
+      abortButton = (
+        <button
+          className='active'
+          aria-label={msgAbort}
+          title={msgAbort}
+          onClick={this.onAbortBtnClick}
+        >
+          <i className='fa fa-times' />
+        </button>
+      );
+    } else {
+      enterButton = (
+        <button
+          aria-label={msgEnter}
+          title={msgEnter}
+          onClick={this.onEnterBtnClick}
+        >
+          <i className='fa fa-eraser' />
+        </button>
+      );
+    }
+
+    return (
+      <div className='column-header__notif-cleaning-buttons'>
+        {acceptButton}{abortButton}{enterButton}
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/notification/container.js b/app/javascript/glitch/components/notification/container.js
index bed086172..7d2590684 100644
--- a/app/javascript/glitch/components/notification/container.js
+++ b/app/javascript/glitch/components/notification/container.js
@@ -24,7 +24,6 @@ import { makeGetNotification } from '../../../mastodon/selectors';
 
 //  Our imports  //
 import Notification from '.';
-import { deleteNotification } from '../../../mastodon/actions/notifications';
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
@@ -53,21 +52,4 @@ const makeMapStateToProps = () => {
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
-/*
-
-Dispatch mapping:
------------------
-
-The `mapDispatchToProps()` function maps dispatches to our store to the
-various props of our component. We only need to provide a dispatch for
-deleting notifications.
-
-*/
-
-const mapDispatchToProps = dispatch => ({
-  onDeleteNotification (id) {
-    dispatch(deleteNotification(id));
-  },
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);
+export default connect(makeMapStateToProps)(Notification);
diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js
index 26396478b..0e0065eb1 100644
--- a/app/javascript/glitch/components/notification/follow.js
+++ b/app/javascript/glitch/components/notification/follow.js
@@ -36,7 +36,7 @@ Imports:
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import escapeTextContentForBrowser from 'escape-html';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -45,22 +45,10 @@ import emojify from '../../../mastodon/emoji';
 import Permalink from '../../../mastodon/components/permalink';
 import AccountContainer from '../../../mastodon/containers/account_container';
 
-//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-
-/*
-
-Inital setup:
--------------
-
-The `messages` constant is used to define any messages that we need
-from inside props.
-
-*/
+// Our imports //
+import NotificationOverlayContainer from '../notification/overlay/container';
 
-const messages = defineMessages({
-  deleteNotification :
-    { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
-});
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
 /*
 
@@ -69,31 +57,16 @@ Implementation:
 
 */
 
-@injectIntl
 export default class NotificationFollow extends ImmutablePureComponent {
 
   static propTypes = {
     id                   : PropTypes.number.isRequired,
-    onDeleteNotification : PropTypes.func.isRequired,
     account              : ImmutablePropTypes.map.isRequired,
-    intl                 : PropTypes.object.isRequired,
+    notification         : ImmutablePropTypes.map.isRequired,
   };
 
 /*
 
-###  `handleNotificationDeleteClick()`
-
-This function just calls our `onDeleteNotification()` prop with the
-notification's `id`.
-
-*/
-
-  handleNotificationDeleteClick = () => {
-    this.props.onDeleteNotification(this.props.id);
-  }
-
-/*
-
 ###  `render()`
 
 This actually renders the component.
@@ -101,26 +74,7 @@ This actually renders the component.
 */
 
   render () {
-    const { account, intl } = this.props;
-
-/*
-
-`dismiss` creates the notification dismissal button. Its title is given
-by `dismissTitle`.
-
-*/
-
-    const dismissTitle = intl.formatMessage(messages.deleteNotification);
-    const dismiss = (
-      <button
-        aria-label={dismissTitle}
-        title={dismissTitle}
-        onClick={this.handleNotificationDeleteClick}
-        className='status__prepend-dismiss-button'
-      >
-        <i className='fa fa-eraser' />
-      </button>
-    );
+    const { account, notification } = this.props;
 
 /*
 
@@ -149,6 +103,7 @@ We can now render our component.
 
     return (
       <div className='notification notification-follow'>
+        <NotificationOverlayContainer notification={notification} />
         <div className='notification__message'>
           <div className='notification__favourite-icon-wrapper'>
             <i className='fa fa-fw fa-user-plus' />
@@ -159,8 +114,6 @@ We can now render our component.
             defaultMessage='{name} followed you'
             values={{ name: link }}
           />
-
-          {dismiss}
         </div>
 
         <AccountContainer id={account.get('id')} withNote={false} />
diff --git a/app/javascript/glitch/components/notification/index.js b/app/javascript/glitch/components/notification/index.js
index 556d5aea8..b2e55aad5 100644
--- a/app/javascript/glitch/components/notification/index.js
+++ b/app/javascript/glitch/components/notification/index.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import PropTypes from 'prop-types';
 
 //  Mastodon imports  //
 
@@ -15,7 +14,6 @@ export default class Notification extends ImmutablePureComponent {
   static propTypes = {
     notification: ImmutablePropTypes.map.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
-    onDeleteNotification: PropTypes.func.isRequired,
   };
 
   renderFollow (notification) {
@@ -23,7 +21,7 @@ export default class Notification extends ImmutablePureComponent {
       <NotificationFollow
         id={notification.get('id')}
         account={notification.get('account')}
-        onDeleteNotification={this.props.onDeleteNotification}
+        notification={notification}
       />
     );
   }
@@ -32,7 +30,7 @@ export default class Notification extends ImmutablePureComponent {
     return (
       <StatusContainer
         id={notification.get('status')}
-        notificationId={notification.get('id')}
+        notification={notification}
         withDismiss
       />
     );
@@ -45,7 +43,7 @@ export default class Notification extends ImmutablePureComponent {
         account={notification.get('account')}
         prepend='favourite'
         muted
-        notificationId={notification.get('id')}
+        notification={notification}
         withDismiss
       />
     );
@@ -58,7 +56,7 @@ export default class Notification extends ImmutablePureComponent {
         account={notification.get('account')}
         prepend='reblog'
         muted
-        notificationId={notification.get('id')}
+        notification={notification}
         withDismiss
       />
     );
diff --git a/app/javascript/glitch/components/notification/overlay/container.js b/app/javascript/glitch/components/notification/overlay/container.js
new file mode 100644
index 000000000..019b78d0b
--- /dev/null
+++ b/app/javascript/glitch/components/notification/overlay/container.js
@@ -0,0 +1,49 @@
+/*
+
+`<NotificationOverlayContainer>`
+=========================
+
+This container connects `<NotificationOverlay>`s to the Redux store.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Our imports  //
+import NotificationOverlay from './notification_overlay';
+import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Dispatch mapping:
+-----------------
+
+The `mapDispatchToProps()` function maps dispatches to our store to the
+various props of our component. We only need to provide a dispatch for
+deleting notifications.
+
+*/
+
+const mapDispatchToProps = dispatch => ({
+  onMarkForDelete(id, yes) {
+    dispatch(markNotificationForDelete(id, yes));
+  },
+});
+
+const mapStateToProps = state => ({
+  revealed: state.getIn(['notifications', 'cleaningMode']),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);
diff --git a/app/javascript/glitch/components/notification/overlay/notification_overlay.js b/app/javascript/glitch/components/notification/overlay/notification_overlay.js
new file mode 100644
index 000000000..73eda718f
--- /dev/null
+++ b/app/javascript/glitch/components/notification/overlay/notification_overlay.js
@@ -0,0 +1,59 @@
+/**
+ * Notification overlay
+ */
+
+
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+
+//  Mastodon imports  //
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+  markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
+});
+
+@injectIntl
+export default class NotificationOverlay extends ImmutablePureComponent {
+
+  static propTypes = {
+    notification    : ImmutablePropTypes.map.isRequired,
+    onMarkForDelete : PropTypes.func.isRequired,
+    revealed        : PropTypes.bool.isRequired,
+    intl            : PropTypes.object.isRequired,
+  };
+
+  onToggleMark = () => {
+    const mark = !this.props.notification.get('markedForDelete');
+    const id = this.props.notification.get('id');
+    this.props.onMarkForDelete(id, mark);
+  }
+
+  render () {
+    const { notification, revealed, intl } = this.props;
+
+    const active = notification.get('markedForDelete');
+    const label = intl.formatMessage(messages.markForDeletion);
+
+    return (
+      <div
+        aria-label={label}
+        role='checkbox'
+        aria-checked={active}
+        tabIndex={0}
+        className={`notification__dismiss-overlay ${active ? 'active' : ''} ${revealed ? 'show' : ''}`}
+        onClick={this.onToggleMark}
+      >
+        <div className='notification__dismiss-overlay__ckbox' aria-hidden='true' title={label}>
+          {active ? (<i className='fa fa-check' />) : ''}
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
index df0904a7c..7c73002c1 100644
--- a/app/javascript/glitch/components/status/action_bar.js
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -24,7 +24,6 @@ const messages = defineMessages({
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
 });
 
 @injectIntl
@@ -36,7 +35,6 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
-    notificationId: PropTypes.number,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
@@ -46,7 +44,6 @@ export default class StatusActionBar extends ImmutablePureComponent {
     onBlock: PropTypes.func,
     onReport: PropTypes.func,
     onMuteConversation: PropTypes.func,
-    onDeleteNotification: PropTypes.func,
     me: PropTypes.number,
     withDismiss: PropTypes.bool,
     intl: PropTypes.object.isRequired,
@@ -100,10 +97,6 @@ export default class StatusActionBar extends ImmutablePureComponent {
     this.props.onMuteConversation(this.props.status);
   }
 
-  handleNotificationDeleteClick = () => {
-    this.props.onDeleteNotification(this.props.notificationId);
-  }
-
   render () {
     const { status, me, intl, withDismiss } = this.props;
     const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
@@ -120,7 +113,6 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
     if (withDismiss) {
       menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
-      menu.push({ text: intl.formatMessage(messages.deleteNotification), action: this.handleNotificationDeleteClick });
       menu.push(null);
     }
 
diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
index c45b2e0ec..1d572e0e7 100644
--- a/app/javascript/glitch/components/status/container.js
+++ b/app/javascript/glitch/components/status/container.js
@@ -50,7 +50,6 @@ import {
 } from '../../../mastodon/actions/statuses';
 import { initReport } from '../../../mastodon/actions/reports';
 import { openModal } from '../../../mastodon/actions/modal';
-import { deleteNotification } from '../../../mastodon/actions/notifications';
 
 //  Our imports  //
 import Status from '.';
@@ -245,10 +244,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       dispatch(muteStatus(status.get('id')));
     }
   },
-
-  onDeleteNotification (id) {
-    dispatch(deleteNotification(id));
-  },
 });
 
 export default injectIntl(
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 4a91b5aa3..dc06250ec 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -47,6 +47,7 @@ import StatusContent from './content';
 import StatusActionBar from './action_bar';
 import StatusGallery from './gallery';
 import StatusPlayer from './player';
+import NotificationOverlayContainer from '../notification/overlay/container';
 
                             /* * * * */
 
@@ -158,6 +159,7 @@ export default class Status extends ImmutablePureComponent {
     status                      : ImmutablePropTypes.map,
     account                     : ImmutablePropTypes.map,
     settings                    : ImmutablePropTypes.map,
+    notification                : ImmutablePropTypes.map,
     me                          : PropTypes.number,
     onFavourite                 : PropTypes.func,
     onReblog                    : PropTypes.func,
@@ -170,7 +172,6 @@ export default class Status extends ImmutablePureComponent {
     onReport                    : PropTypes.func,
     onOpenMedia                 : PropTypes.func,
     onOpenVideo                 : PropTypes.func,
-    onDeleteNotification        : PropTypes.func,
     reblogModal                 : PropTypes.bool,
     deleteModal                 : PropTypes.bool,
     autoPlayGif                 : PropTypes.bool,
@@ -178,7 +179,6 @@ export default class Status extends ImmutablePureComponent {
     collapse                    : PropTypes.bool,
     prepend                     : PropTypes.string,
     withDismiss                 : PropTypes.bool,
-    notificationId              : PropTypes.number,
     intersectionObserverWrapper : PropTypes.object,
   };
 
@@ -186,6 +186,7 @@ export default class Status extends ImmutablePureComponent {
     isExpanded                  : null,
     isIntersecting              : true,
     isHidden                    : false,
+    markedForDelete             : false,
   }
 
 /*
@@ -212,10 +213,12 @@ to remember to specify it here.
     'autoPlayGif',
     'muted',
     'collapse',
+    'notification',
   ]
 
   updateOnStates = [
     'isExpanded',
+    'markedForDelete',
   ]
 
 /*
@@ -523,6 +526,10 @@ applicable.
     }
   }
 
+  markNotifForDelete = () => {
+    this.setState({ 'markedForDelete' : !this.state.markedForDelete });
+  }
+
 /*
 
 ####  `render()`.
@@ -551,6 +558,7 @@ this operation are further explained in the code below.
       onOpenVideo,
       onOpenMedia,
       autoPlayGif,
+      notification,
       ...other
     } = this.props;
     const { isExpanded, isIntersecting, isHidden } = this.state;
@@ -678,6 +686,8 @@ collapsed.
             isExpanded === false ? ' collapsed' : ''
           }${
             isExpanded === false && background ? ' has-background' : ''
+          }${
+            this.state.markedForDelete ? ' marked-for-delete' : ''
           }`
         }
         style={{
@@ -689,13 +699,17 @@ collapsed.
         }}
         ref={handleRef}
       >
+        {notification ? (
+          <NotificationOverlayContainer
+            notification={notification}
+          />
+        ) : null}
         {prepend && account ? (
           <StatusPrepend
             type={prepend}
             account={account}
             parseClick={parseClick}
             notificationId={this.props.notificationId}
-            onDeleteNotification={this.props.onDeleteNotification}
           />
         ) : null}
         <StatusHeader
diff --git a/app/javascript/glitch/components/status/prepend.js b/app/javascript/glitch/components/status/prepend.js
index d9b04b5ec..6213e4c8d 100644
--- a/app/javascript/glitch/components/status/prepend.js
+++ b/app/javascript/glitch/components/status/prepend.js
@@ -23,17 +23,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import escapeTextContentForBrowser from 'escape-html';
-import { defineMessages, injectIntl } from 'react-intl';
 import { FormattedMessage } from 'react-intl';
 
 //  Mastodon imports  //
 import emojify from '../../../mastodon/emoji';
 
-
-const messages = defineMessages({
-  deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' },
-});
-
                             /* * * * */
 
 /*
@@ -59,7 +53,6 @@ element.
 
 */
 
-@injectIntl
 export default class StatusPrepend extends React.PureComponent {
 
   static propTypes = {
@@ -67,8 +60,6 @@ export default class StatusPrepend extends React.PureComponent {
     account: ImmutablePropTypes.map.isRequired,
     parseClick: PropTypes.func.isRequired,
     notificationId: PropTypes.number,
-    onDeleteNotification: PropTypes.func,
-    intl: PropTypes.object.isRequired,
   };
 
 /*
@@ -87,10 +78,6 @@ an account link is clicked.
     parseClick(e, `/accounts/${+account.get('id')}`);
   }
 
-  handleNotificationDeleteClick = () => {
-    this.props.onDeleteNotification(this.props.notificationId);
-  }
-
 /*
 
 ####  `<Message>`.
@@ -159,19 +146,7 @@ the `<Message>` inside of an <aside>.
 
   render () {
     const { Message } = this;
-    const { type, intl } = this.props;
-
-    const dismissTitle = intl.formatMessage(messages.deleteNotification);
-    const dismiss = this.props.notificationId ? (
-      <button
-        aria-label={dismissTitle}
-        title={dismissTitle}
-        onClick={this.handleNotificationDeleteClick}
-        className='status__prepend-dismiss-button'
-      >
-        <i className='fa fa-eraser' />
-      </button>
-    ) : null;
+    const { type } = this.props;
 
     return !type ? null : (
       <aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
@@ -183,7 +158,6 @@ the `<Message>` inside of an <aside>.
           />
         </div>
         <Message />
-        {dismiss}
       </aside>
     );
   }
diff --git a/app/javascript/glitch/locales/en.json b/app/javascript/glitch/locales/en.json
index 80fdc3a39..d202d9c33 100644
--- a/app/javascript/glitch/locales/en.json
+++ b/app/javascript/glitch/locales/en.json
@@ -28,5 +28,5 @@
   "settings.wide_view": "Wide view (Desktop mode only)",
   "status.collapse": "Collapse",
   "status.uncollapse": "Uncollapse",
-  "status.dismiss_notification": "Dismiss notification"
+  "notification.markForDeletion": "Mark for deletion"
 }
diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index b2a0f7ac3..fca26516a 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -6,7 +6,15 @@ import { defineMessages } from 'react-intl';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
 
-export const NOTIFICATION_DELETE_SUCCESS = 'NOTIFICATION_DELETE_SUCCESS';
+// tracking the notif cleaning request
+export const NOTIFICATIONS_DELETE_MARKED_REQUEST = 'NOTIFICATIONS_DELETE_MARKED_REQUEST';
+export const NOTIFICATIONS_DELETE_MARKED_SUCCESS = 'NOTIFICATIONS_DELETE_MARKED_SUCCESS';
+export const NOTIFICATIONS_DELETE_MARKED_FAIL = 'NOTIFICATIONS_DELETE_MARKED_FAIL';
+export const NOTIFICATIONS_ENTER_CLEARING_MODE = 'NOTIFICATIONS_ENTER_CLEARING_MODE'; // arg: yes
+// Unmark notifications (when the cleaning mode is left)
+export const NOTIFICATIONS_UNMARK_ALL_FOR_DELETE = 'NOTIFICATIONS_UNMARK_ALL_FOR_DELETE';
+// Mark one for delete
+export const NOTIFICATION_MARK_FOR_DELETE = 'NOTIFICATION_MARK_FOR_DELETE';
 
 export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
 export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
@@ -190,17 +198,61 @@ export function scrollTopNotifications(top) {
   };
 };
 
-export function deleteNotification(id) {
+export function deleteMarkedNotifications() {
   return (dispatch, getState) => {
-    api(getState).delete(`/api/v1/notifications/${id}`).then(() => {
-      dispatch(deleteNotificationSuccess(id));
+    dispatch(deleteMarkedNotificationsRequest());
+
+    let ids = [];
+    getState().getIn(['notifications', 'items']).forEach((n) => {
+      if (n.get('markedForDelete')) {
+        ids.push(n.get('id'));
+      }
+    });
+
+    if (ids.length === 0) {
+      dispatch(enterNotificationClearingMode(false));
+      return;
+    }
+
+    api(getState).delete(`/api/v1/notifications/destroy_multiple?ids[]=${ids.join('&ids[]=')}`).then(() => {
+      dispatch(deleteMarkedNotificationsSuccess());
+      dispatch(expandNotifications()); // Load more (to fill the empty space)
+    }).catch(error => {
+      console.error(error);
+      dispatch(deleteMarkedNotificationsFail(error));
     });
   };
 };
 
-export function deleteNotificationSuccess(id) {
+export function enterNotificationClearingMode(yes) {
+  return {
+    type: NOTIFICATIONS_ENTER_CLEARING_MODE,
+    yes: yes,
+  };
+};
+
+export function deleteMarkedNotificationsRequest() {
   return {
-    type: NOTIFICATION_DELETE_SUCCESS,
+    type: NOTIFICATIONS_DELETE_MARKED_REQUEST,
+  };
+};
+
+export function deleteMarkedNotificationsFail() {
+  return {
+    type: NOTIFICATIONS_DELETE_MARKED_FAIL,
+  };
+};
+
+export function markNotificationForDelete(id, yes) {
+  return {
+    type: NOTIFICATION_MARK_FOR_DELETE,
     id: id,
+    yes: yes,
+  };
+};
+
+export function deleteMarkedNotificationsSuccess() {
+  return {
+    type: NOTIFICATIONS_DELETE_MARKED_SUCCESS,
   };
 };
diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js
index 3cbb745c5..0dd31e137 100644
--- a/app/javascript/mastodon/components/column.js
+++ b/app/javascript/mastodon/components/column.js
@@ -34,7 +34,12 @@ export default class Column extends React.PureComponent {
     const { children } = this.props;
 
     return (
-      <div role='region' className='column' ref={this.setRef} onWheel={this.handleWheel}>
+      <div
+        role='region'
+        className='column'
+        ref={this.setRef}
+        onWheel={this.handleWheel}
+      >
         {children}
       </div>
     );
diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js
index e9f041be6..045904206 100644
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@@ -1,8 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
+// Glitch imports
+import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container';
+
+const messages = defineMessages({
+  titleNotifClearing: { id: 'column.notifications_clearing', defaultMessage: 'Dismiss selected notifications:' },
+  titleNotifClearingShort: { id: 'column.notifications_clearing_short', defaultMessage: 'Dismiss selected:' },
+});
+
+@injectIntl
 export default class ColumnHeader extends React.PureComponent {
 
   static contextTypes = {
@@ -13,13 +23,17 @@ export default class ColumnHeader extends React.PureComponent {
     title: PropTypes.node.isRequired,
     icon: PropTypes.string.isRequired,
     active: PropTypes.bool,
+    localSettings : ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
     showBackButton: PropTypes.bool,
+    notifCleaning: PropTypes.bool, // true only for the notification column
+    notifCleaningActive: PropTypes.bool,
     children: PropTypes.node,
     pinned: PropTypes.bool,
     onPin: PropTypes.func,
     onMove: PropTypes.func,
     onClick: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
   state = {
@@ -58,9 +72,16 @@ export default class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton } = this.props;
+    const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, notifCleaning, localSettings } = this.props;
     const { collapsed, animating } = this.state;
 
+    let title = this.props.title;
+    if (notifCleaning && this.props.notifCleaningActive) {
+      title = intl.formatMessage(localSettings.getIn(['stretch']) ?
+        messages.titleNotifClearing :
+        messages.titleNotifClearingShort);
+    }
+
     const wrapperClassName = classNames('column-header__wrapper', {
       'active': active,
     });
@@ -130,6 +151,7 @@ export default class ColumnHeader extends React.PureComponent {
           {title}
 
           <div className='column-header__buttons'>
+            {notifCleaning ? (<NotificationPurgeButtonsContainer />) : null}
             {backButton}
             {collapseButton}
           </div>
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index 39fb4b26d..6a262a59e 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -4,7 +4,10 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
-import { expandNotifications, scrollTopNotifications } from '../../actions/notifications';
+import {
+  expandNotifications,
+  scrollTopNotifications,
+} from '../../actions/notifications';
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import NotificationContainer from '../../../glitch/components/notification/container';
 import { ScrollContainer } from 'react-router-scroll';
@@ -26,9 +29,11 @@ const getNotifications = createSelector([
 
 const mapStateToProps = state => ({
   notifications: getNotifications(state),
+  localSettings:  state.get('local_settings'),
   isLoading: state.getIn(['notifications', 'isLoading'], true),
   isUnread: state.getIn(['notifications', 'unread']) > 0,
   hasMore: !!state.getIn(['notifications', 'next']),
+  notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
 });
 
 @connect(mapStateToProps)
@@ -45,6 +50,8 @@ export default class Notifications extends React.PureComponent {
     isUnread: PropTypes.bool,
     multiColumn: PropTypes.bool,
     hasMore: PropTypes.bool,
+    localSettings: ImmutablePropTypes.map,
+    notifCleaningActive: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -164,7 +171,9 @@ export default class Notifications extends React.PureComponent {
     this.scrollableArea = scrollableArea;
 
     return (
-      <Column ref={this.setColumnRef}>
+      <Column
+        ref={this.setColumnRef}
+      >
         <ColumnHeader
           icon='bell'
           active={isUnread}
@@ -174,6 +183,9 @@ export default class Notifications extends React.PureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
+          localSettings={this.props.localSettings}
+          notifCleaning
+          notifCleaningActive={this.props.notifCleaningActive} // this is used to toggle the header text
         >
           <ColumnSettingsContainer />
         </ColumnHeader>
diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js
index da5fcde84..dd81653d6 100644
--- a/app/javascript/mastodon/reducers/notifications.js
+++ b/app/javascript/mastodon/reducers/notifications.js
@@ -8,7 +8,11 @@ import {
   NOTIFICATIONS_EXPAND_FAIL,
   NOTIFICATIONS_CLEAR,
   NOTIFICATIONS_SCROLL_TOP,
-  NOTIFICATION_DELETE_SUCCESS,
+  NOTIFICATIONS_DELETE_MARKED_REQUEST,
+  NOTIFICATIONS_DELETE_MARKED_SUCCESS,
+  NOTIFICATION_MARK_FOR_DELETE,
+  NOTIFICATIONS_DELETE_MARKED_FAIL,
+  NOTIFICATIONS_ENTER_CLEARING_MODE,
 } from '../actions/notifications';
 import { ACCOUNT_BLOCK_SUCCESS } from '../actions/accounts';
 import { TIMELINE_DELETE } from '../actions/timelines';
@@ -21,12 +25,14 @@ const initialState = ImmutableMap({
   unread: 0,
   loaded: false,
   isLoading: true,
+  cleaningMode: false,
 });
 
 const notificationToMap = notification => ImmutableMap({
   id: notification.id,
   type: notification.type,
   account: notification.account.id,
+  markedForDelete: false,
   status: notification.status ? notification.status.id : null,
 });
 
@@ -93,17 +99,34 @@ const deleteByStatus = (state, statusId) => {
   return state.update('items', list => list.filterNot(item => item.get('status') === statusId));
 };
 
-const deleteById = (state, notificationId) => {
-  return state.update('items', list => list.filterNot(item => item.get('id') === notificationId));
+const markForDelete = (state, notificationId, yes) => {
+  return state.update('items', list => list.map(item => {
+    if(item.get('id') === notificationId) {
+      return item.set('markedForDelete', yes);
+    } else {
+      return item;
+    }
+  }));
+};
+
+const unmarkAllForDelete = (state) => {
+  return state.update('items', list => list.map(item => item.set('markedForDelete', false)));
+};
+
+const deleteMarkedNotifs = (state) => {
+  return state.update('items', list => list.filterNot(item => item.get('markedForDelete')));
 };
 
 export default function notifications(state = initialState, action) {
   switch(action.type) {
   case NOTIFICATIONS_REFRESH_REQUEST:
   case NOTIFICATIONS_EXPAND_REQUEST:
+  case NOTIFICATIONS_DELETE_MARKED_REQUEST:
+    return state.set('isLoading', true);
+  case NOTIFICATIONS_DELETE_MARKED_FAIL:
   case NOTIFICATIONS_REFRESH_FAIL:
   case NOTIFICATIONS_EXPAND_FAIL:
-    return state.set('isLoading', true);
+    return state.set('isLoading', false);
   case NOTIFICATIONS_SCROLL_TOP:
     return updateTop(state, action.top);
   case NOTIFICATIONS_UPDATE:
@@ -118,8 +141,15 @@ export default function notifications(state = initialState, action) {
     return state.set('items', ImmutableList()).set('next', null);
   case TIMELINE_DELETE:
     return deleteByStatus(state, action.id);
-  case NOTIFICATION_DELETE_SUCCESS:
-    return deleteById(state, action.id);
+  case NOTIFICATION_MARK_FOR_DELETE:
+    return markForDelete(state, action.id, action.yes);
+  case NOTIFICATIONS_DELETE_MARKED_SUCCESS:
+    return deleteMarkedNotifs(state).set('isLoading', false).set('cleaningMode', false);
+  case NOTIFICATIONS_ENTER_CLEARING_MODE:
+    const st = state.set('cleaningMode', action.yes);
+    if (!action.yes)
+      return unmarkAllForDelete(st);
+    else return st;
   default:
     return state;
   }
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 0cd082985..dbdf286a9 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -451,6 +451,63 @@
   cursor: pointer;
 }
 
+.notification__dismiss-overlay {
+  position: absolute;
+  left: 0; top: 0; right: 0; bottom: 0;
+
+  $c1: #00000A;
+  $c2: #222228;
+  background: linear-gradient(to right,
+    rgba($c1, 0.1),
+    rgba($c1, 0.2) 60%,
+    rgba($c2, 1) 90%,
+    rgba($c2, 1));
+
+  z-index: 999;
+  align-items: center;
+  justify-content: flex-end;
+  cursor: pointer;
+
+  display: none;
+
+  &.show {
+    display: flex;
+  }
+
+  // make it brighter
+  &.active {
+    $c: #222931;
+    background: linear-gradient(to right,
+      rgba($c, 0.1),
+      rgba($c, 0.2) 60%,
+      rgba($c, 1) 90%,
+      rgba($c, 1));
+  }
+
+  &:focus {
+    outline: 0 !important;
+  }
+}
+
+.notification__dismiss-overlay__ckbox {
+  border: 2px solid #9baec8;
+  border-radius: 2px;
+  width: 30px;
+  height: 30px;
+  margin-right: 20px;
+  font-size: 20px;
+  color: #c3dcfd;
+  text-shadow: 0 0 5px black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :focus & {
+    outline: rgb(77, 144, 254) auto 10px;
+    outline: -webkit-focus-ring-color auto 10px;
+  }
+}
+
 // --- Extra clickable area in the status gutter ---
 .ui.wide {
   @mixin xtraspaces-full {
@@ -627,24 +684,14 @@
   position: absolute;
 }
 
-.status__prepend-dismiss-button {
-  border: 0;
-  background: transparent;
-  position: absolute;
-  right: -3px;
-  opacity: 0;
-  transition: opacity 0.1s ease-in-out;
-
-  i.fa {
-    color: crimson;
-  }
+.notification-follow {
+  position: relative;
 
-  .notification__message:hover & {
-    opacity: 1;
-  }
+  // same like Status
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 
-  .notification-follow & {
-    right: 6px;
+  .account {
+    border-bottom: 0 none;
   }
 }
 
@@ -2408,6 +2455,17 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
+.column-header__notif-cleaning-buttons {
+  display: flex;
+  align-items: stretch;
+
+  button {
+    @extend .column-header__button;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
 .column-header__collapsible {
   max-height: 70vh;
   overflow: hidden;
diff --git a/config/routes.rb b/config/routes.rb
index fb2051aad..ac505edc6 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -182,6 +182,7 @@ Rails.application.routes.draw do
         collection do
           post :clear
           post :dismiss
+          delete :destroy_multiple
         end
       end
 
-- 
cgit 


From 0244019ca17288802a144c84b7e0f319f1685695 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Fri, 21 Jul 2017 21:12:43 +0200
Subject: Fixed horrible outline around notif clearing checkbox & moved the
 overlay to a more sr-friendly place

---
 app/javascript/glitch/components/notification/follow.js |  2 +-
 app/javascript/glitch/components/status/index.js        | 14 +++++---------
 app/javascript/styles/components.scss                   |  3 +--
 3 files changed, 7 insertions(+), 12 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js
index 0e0065eb1..d340e83c8 100644
--- a/app/javascript/glitch/components/notification/follow.js
+++ b/app/javascript/glitch/components/notification/follow.js
@@ -103,7 +103,6 @@ We can now render our component.
 
     return (
       <div className='notification notification-follow'>
-        <NotificationOverlayContainer notification={notification} />
         <div className='notification__message'>
           <div className='notification__favourite-icon-wrapper'>
             <i className='fa fa-fw fa-user-plus' />
@@ -117,6 +116,7 @@ We can now render our component.
         </div>
 
         <AccountContainer id={account.get('id')} withNote={false} />
+        <NotificationOverlayContainer notification={notification} />
       </div>
     );
   }
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index dc06250ec..b7ec8b4ca 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -526,10 +526,6 @@ applicable.
     }
   }
 
-  markNotifForDelete = () => {
-    this.setState({ 'markedForDelete' : !this.state.markedForDelete });
-  }
-
 /*
 
 ####  `render()`.
@@ -699,11 +695,6 @@ collapsed.
         }}
         ref={handleRef}
       >
-        {notification ? (
-          <NotificationOverlayContainer
-            notification={notification}
-          />
-        ) : null}
         {prepend && account ? (
           <StatusPrepend
             type={prepend}
@@ -739,6 +730,11 @@ collapsed.
             account={status.get('account')}
           />
         ) : null}
+        {notification ? (
+          <NotificationOverlayContainer
+            notification={notification}
+          />
+        ) : null}
       </article>
     );
 
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index dbdf286a9..3e80569a9 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -503,8 +503,7 @@
   align-items: center;
 
   :focus & {
-    outline: rgb(77, 144, 254) auto 10px;
-    outline: -webkit-focus-ring-color auto 10px;
+    box-shadow: 0 0 2px 2px #3e6fc1;
   }
 }
 
-- 
cgit 


From cb69e35b3b13a67df5216b2c5fd657a62b3bda7a Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Thu, 27 Jul 2017 00:41:28 +0200
Subject: Add visibility icon to Detailed status

---
 app/javascript/glitch/components/status/header.js  | 24 ++++-------
 app/javascript/glitch/components/status/index.js   |  3 +-
 .../glitch/components/status/visibility_icon.js    | 48 ++++++++++++++++++++++
 .../features/status/components/action_bar.js       |  4 +-
 .../features/status/components/detailed_status.js  |  3 +-
 app/javascript/styles/components.scss              |  6 +--
 6 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 app/javascript/glitch/components/status/visibility_icon.js

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
index 3187fa7fb..5ce59fba4 100644
--- a/app/javascript/glitch/components/status/header.js
+++ b/app/javascript/glitch/components/status/header.js
@@ -29,6 +29,7 @@ import Avatar from '../../../mastodon/components/avatar';
 import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
 import DisplayName from '../../../mastodon/components/display_name';
 import IconButton from '../../../mastodon/components/icon_button';
+import VisibilityIcon from './visibility_icon';
 
                             /* * * * */
 
@@ -94,7 +95,7 @@ icons) into a single `<header>` element.
 export default class StatusHeader extends React.PureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
     friend: ImmutablePropTypes.map,
     mediaIcon: PropTypes.string,
     collapsible: PropTypes.bool,
@@ -102,7 +103,6 @@ export default class StatusHeader extends React.PureComponent {
     parseClick: PropTypes.func.isRequired,
     setExpansion: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-    visibility: PropTypes.string,
   };
 
 /*
@@ -135,8 +135,8 @@ status.
 */
 
   handleAccountClick = (e) => {
-    const { account, parseClick } = this.props;
-    parseClick(e, `/accounts/${+account.get('id')}`);
+    const { status, parseClick } = this.props;
+    parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
   }
 
 /*
@@ -150,21 +150,15 @@ has a very straightforward rendering process.
 
   render () {
     const {
-      account,
+      status,
       friend,
       mediaIcon,
       collapsible,
       collapsed,
       intl,
-      visibility,
     } = this.props;
 
-    const visibilityClass = {
-      public: 'globe',
-      unlisted: 'unlock-alt',
-      private: 'lock',
-      direct: 'envelope',
-    }[visibility];
+    const account = status.get('account');
 
     return (
       <header className='status__info'>
@@ -186,11 +180,7 @@ it is rendered as a float.
             />
           ) : null}
           {(
-            <i
-              className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
-              title={intl.formatMessage(messages[visibility])}
-              aria-hidden='true'
-            />
+            <VisibilityIcon visibility={status.get('visibility')} />
           )}
           {collapsible ? (
             <IconButton
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index b7ec8b4ca..5571b3c85 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -704,10 +704,9 @@ collapsed.
           />
         ) : null}
         <StatusHeader
-          account={status.get('account')}
+          status={status}
           friend={account}
           mediaIcon={mediaIcon}
-          visibility={status.get('visibility')}
           collapsible={settings.getIn(['collapsed', 'enabled'])}
           collapsed={isExpanded === false}
           parseClick={parseClick}
diff --git a/app/javascript/glitch/components/status/visibility_icon.js b/app/javascript/glitch/components/status/visibility_icon.js
new file mode 100644
index 000000000..017b69cbb
--- /dev/null
+++ b/app/javascript/glitch/components/status/visibility_icon.js
@@ -0,0 +1,48 @@
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const messages = defineMessages({
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+});
+
+@injectIntl
+export default class VisibilityIcon extends ImmutablePureComponent {
+
+  static propTypes = {
+    visibility: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+    withLabel: PropTypes.bool,
+  };
+
+  render() {
+    const { withLabel, visibility, intl } = this.props;
+
+    const visibilityClass = {
+      public: 'globe',
+      unlisted: 'unlock-alt',
+      private: 'lock',
+      direct: 'envelope',
+    }[visibility];
+
+    const label = intl.formatMessage(messages[visibility]);
+
+    const icon = (<i
+      className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
+      title={label}
+      aria-hidden='true'
+    />);
+
+    if (withLabel) {
+      return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
+    } else {
+      return icon;
+    }
+  }
+
+}
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index 5e150842e..1eff04e97 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -72,8 +72,8 @@ export default class ActionBar extends React.PureComponent {
     }
 
     let reblogIcon = 'retweet';
-    if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
-    else if (status.get('visibility') === 'private') reblogIcon = 'lock';
+    //if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
+    // else if (status.get('visibility') === 'private') reblogIcon = 'lock';
 
     let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
 
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 67d1e822d..5d28d4390 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -11,6 +11,7 @@ import Link from 'react-router-dom/Link';
 import { FormattedDate, FormattedNumber } from 'react-intl';
 import CardContainer from '../containers/card_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import VisibilityIcon from '../../../../glitch/components/status/visibility_icon';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -103,7 +104,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             <span className='detailed-status__favorites'>
               <FormattedNumber value={status.get('favourites_count')} />
             </span>
-          </Link>
+          </Link> · <VisibilityIcon visibility={status.get('visibility')} />
         </div>
       </div>
     );
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 9e5d34f53..fa44b825c 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -836,10 +836,10 @@
   position: relative;
   float: right;
   color: lighten($ui-base-color, 26%);
-}
 
-.status__visibility-icon {
-  padding-left: 6px;
+  .status__visibility-icon {
+    padding-left: 6px;
+  }
 }
 
 .status-check-box {
-- 
cgit 


From f34f33c19e14d03dfcdaa0d6c66460d3c248309f Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Fri, 4 Aug 2017 22:11:46 +0200
Subject: Add data- attributes to statuses for userstyle selectors (#117)

* Add data- attributes to statuses for userstyle selectors

* use const and template string, replace reblog->boosted and favourite->favourited

* more template strings because sorin-sama said so
---
 app/javascript/glitch/components/status/index.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 5571b3c85..4849170b0 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -664,6 +664,25 @@ backgrounds for collapsed statuses are enabled.
       ) background = attachments.getIn([0, 'preview_url']);
     }
 
+/*
+
+Here we prepare extra data-* attributes for CSS selectors.
+Users can use those for theming, hiding avatars etc via UserStyle
+
+*/
+
+    const selectorAttribs = {
+      'data-status-by': `@${status.getIn(['account', 'acct'])}`,
+    };
+
+    if (prepend && account) {
+      const notifKind = {
+        favourite: 'favourited',
+        reblog: 'boosted',
+      }[prepend];
+
+      selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
+    }
 
 /*
 
@@ -694,6 +713,7 @@ collapsed.
           ),
         }}
         ref={handleRef}
+        {...selectorAttribs}
       >
         {prepend && account ? (
           <StatusPrepend
-- 
cgit 


From 7b42d14f456d036e768015c2e12aa93c1bf9226d Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Fri, 4 Aug 2017 22:38:58 +0200
Subject: fix bug with data attrib for boost in home TL

---
 app/javascript/glitch/components/status/index.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 4849170b0..55e6f1876 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -679,6 +679,7 @@ Users can use those for theming, hiding avatars etc via UserStyle
       const notifKind = {
         favourite: 'favourited',
         reblog: 'boosted',
+        reblogged_by: 'boosted',
       }[prepend];
 
       selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
-- 
cgit 


From 7de0fa698dcdb6bd237b260fd42b1ce9bfc7191e Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Sun, 6 Aug 2017 20:59:53 +0200
Subject: Updated glitch files to use the new Avatar class correctly

---
 app/javascript/glitch/components/account/header.js |  6 +-----
 app/javascript/glitch/components/status/header.js  | 11 ++---------
 2 files changed, 3 insertions(+), 14 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js
index b79140c02..a1197c4be 100644
--- a/app/javascript/glitch/components/account/header.js
+++ b/app/javascript/glitch/components/account/header.js
@@ -194,11 +194,7 @@ Here, we render our component using all the things we've defined above.
           <div>
             <a href={account.get('url')} target='_blank' rel='noopener'>
               <span className='account__header__avatar'>
-                <Avatar
-                  src={account.get('avatar')}
-                  staticSrc={account.get('avatar_static')}
-                  size={90}
-                />
+                <Avatar account={account} size={90} />
               </span>
               <span
                 className='account__header__display-name'
diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
index 5ce59fba4..bdb868e4d 100644
--- a/app/javascript/glitch/components/status/header.js
+++ b/app/javascript/glitch/components/status/header.js
@@ -216,16 +216,9 @@ if we have a `friend` and a normal `<Avatar>` if we don't.
         >
           <div className='status__avatar'>{
             friend ? (
-              <AvatarOverlay
-                staticSrc={account.get('avatar_static')}
-                overlaySrc={friend.get('avatar_static')}
-              />
+              <AvatarOverlay account={account} friend={friend} />
             ) : (
-              <Avatar
-                src={account.get('avatar')}
-                staticSrc={account.get('avatar_static')}
-                size={48}
-              />
+              <Avatar account={account} size={48} />
             )
           }</div>
           <DisplayName account={account} />
-- 
cgit 


From 4612f7caea9086715c7c7405b03bf335f552860f Mon Sep 17 00:00:00 2001
From: Surinna Curtis <ekiru.0@gmail.com>
Date: Sun, 6 Aug 2017 19:36:04 -0300
Subject: Break out a separate mute modal with a hide-notifications checkbox.

---
 .../glitch/components/status/container.js          | 11 +--
 app/javascript/mastodon/actions/accounts.js        |  4 +-
 app/javascript/mastodon/actions/mutes.js           | 21 +++++
 .../mastodon/features/ui/components/modal_root.js  |  2 +
 .../mastodon/features/ui/components/mute_modal.js  | 98 ++++++++++++++++++++++
 .../mastodon/features/ui/util/async-components.js  |  4 +
 app/javascript/mastodon/reducers/index.js          |  2 +
 app/javascript/mastodon/reducers/mutes.js          | 29 +++++++
 app/javascript/styles/components.scss              | 11 ++-
 9 files changed, 168 insertions(+), 14 deletions(-)
 create mode 100644 app/javascript/mastodon/features/ui/components/mute_modal.js
 create mode 100644 app/javascript/mastodon/reducers/mutes.js

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
index 1d572e0e7..6e49081b7 100644
--- a/app/javascript/glitch/components/status/container.js
+++ b/app/javascript/glitch/components/status/container.js
@@ -43,6 +43,7 @@ import {
   blockAccount,
   muteAccount,
 } from '../../../mastodon/actions/accounts';
+import { initMuteModal } from '../../../mastodon/actions/mutes';
 import {
   muteStatus,
   unmuteStatus,
@@ -80,10 +81,6 @@ const messages = defineMessages({
     id             : 'confirmations.block.confirm',
     defaultMessage : 'Block',
   },
-  muteConfirm : {
-    id             : 'confirmations.mute.confirm',
-    defaultMessage : 'Mute',
-  },
 });
 
                             /* * * * */
@@ -230,11 +227,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onMute (account) {
-    dispatch(openModal('CONFIRM', {
-      message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-      confirm: intl.formatMessage(messages.muteConfirm),
-      onConfirm: () => dispatch(muteAccount(account.get('id'))),
-    }));
+    dispatch(initMuteModal(account));
   },
 
   onMuteConversation (status) {
diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js
index 03e3d3d9f..fc47110e3 100644
--- a/app/javascript/mastodon/actions/accounts.js
+++ b/app/javascript/mastodon/actions/accounts.js
@@ -240,11 +240,11 @@ export function unblockAccountFail(error) {
 };
 
 
-export function muteAccount(id) {
+export function muteAccount(id, notifications) {
   return (dispatch, getState) => {
     dispatch(muteAccountRequest(id));
 
-    api(getState).post(`/api/v1/accounts/${id}/mute`).then(response => {
+    api(getState).post(`/api/v1/accounts/${id}/mute`, { notifications }).then(response => {
       // Pass in entire statuses map so we can use it to filter stuff in different parts of the reducers
       dispatch(muteAccountSuccess(response.data, getState().get('statuses')));
     }).catch(error => {
diff --git a/app/javascript/mastodon/actions/mutes.js b/app/javascript/mastodon/actions/mutes.js
index febda7219..3474250fe 100644
--- a/app/javascript/mastodon/actions/mutes.js
+++ b/app/javascript/mastodon/actions/mutes.js
@@ -1,5 +1,6 @@
 import api, { getLinks } from '../api';
 import { fetchRelationships } from './accounts';
+import { openModal } from '../../mastodon/actions/modal';
 
 export const MUTES_FETCH_REQUEST = 'MUTES_FETCH_REQUEST';
 export const MUTES_FETCH_SUCCESS = 'MUTES_FETCH_SUCCESS';
@@ -9,6 +10,9 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST';
 export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS';
 export const MUTES_EXPAND_FAIL    = 'MUTES_EXPAND_FAIL';
 
+export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
+export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
+
 export function fetchMutes() {
   return (dispatch, getState) => {
     dispatch(fetchMutesRequest());
@@ -80,3 +84,20 @@ export function expandMutesFail(error) {
     error,
   };
 };
+
+export function initMuteModal(account) {
+  return dispatch => {
+    dispatch({
+      type: MUTES_INIT_MODAL,
+      account,
+    });
+
+    dispatch(openModal('MUTE'));
+  };
+}
+
+export function toggleHideNotifications() {
+  return dispatch => {
+    dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS });
+  };
+}
\ No newline at end of file
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
index 4588cd5fd..6347c4b22 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -12,6 +12,7 @@ import BoostModal from './boost_modal';
 import ConfirmationModal from './confirmation_modal';
 import {
   OnboardingModal,
+  MuteModal,
   ReportModal,
   SettingsModal,
   EmbedModal,
@@ -23,6 +24,7 @@ const MODAL_COMPONENTS = {
   'VIDEO': () => Promise.resolve({ default: VideoModal }),
   'BOOST': () => Promise.resolve({ default: BoostModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
+  'MUTE': MuteModal,
   'REPORT': ReportModal,
   'SETTINGS': SettingsModal,
   'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
diff --git a/app/javascript/mastodon/features/ui/components/mute_modal.js b/app/javascript/mastodon/features/ui/components/mute_modal.js
new file mode 100644
index 000000000..51a2d70e0
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/mute_modal.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import Button from '../../../components/button';
+import { closeModal } from '../../../actions/modal';
+import { muteAccount } from '../../../actions/accounts';
+import { toggleHideNotifications } from '../../../actions/mutes';
+
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+    notifications: state.getIn(['mutes', 'new', 'notifications']),
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+
+    onClose() {
+      dispatch(closeModal());
+    },
+
+    onToggleNotifications() {
+      dispatch(toggleHideNotifications());
+    },
+  };
+};
+
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+export default class MuteModal extends React.PureComponent {
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    notifications: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onToggleNotifications: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  componentDidMount() {
+    this.button.focus();
+  }
+
+  handleClick = () => {
+    this.props.onClose();
+    this.props.onConfirm(this.props.account, this.props.notifications);
+  }
+
+  handleCancel = () => {
+    this.props.onClose();
+  }
+
+  setRef = (c) => {
+    this.button = c;
+  }
+
+  toggleNotifications = () => {
+    this.props.onToggleNotifications();
+  }
+
+  render () {
+    const { account, notifications } = this.props;
+
+    return (
+      <div className='modal-root__modal mute-modal'>
+        <div className='mute-modal__container'>
+          <p>
+            <FormattedMessage id='confirmations.mute.message'
+              defaultMessage='Are you sure you want to mute {name}?'
+              values={{ name: <strong>@{account.get('acct')}</strong> }}
+            />
+          </p>
+          <p>
+            <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
+            <input type="checkbox" checked={notifications} onChange={this.toggleNotifications} />
+          </p>
+        </div>
+
+        <div className='mute-modal__action-bar'>
+          <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
+            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+          </Button>
+          <Button onClick={this.handleClick} ref={this.setRef}>
+            <FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index 219b8192b..2f5c52e9e 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -86,6 +86,10 @@ export function OnboardingModal () {
   return import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal');
 }
 
+export function MuteModal () {
+  return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal');
+}
+
 export function ReportModal () {
   return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
 }
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js
index 86cda2adc..a54fca530 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.js
@@ -14,6 +14,7 @@ import local_settings from '../../glitch/reducers/local_settings';
 import push_notifications from './push_notifications';
 import status_lists from './status_lists';
 import cards from './cards';
+import mutes from './mutes';
 import reports from './reports';
 import contexts from './contexts';
 import compose from './compose';
@@ -37,6 +38,7 @@ const reducers = {
   local_settings,
   push_notifications,
   cards,
+  mutes,
   reports,
   contexts,
   compose,
diff --git a/app/javascript/mastodon/reducers/mutes.js b/app/javascript/mastodon/reducers/mutes.js
new file mode 100644
index 000000000..6d6a9a3b8
--- /dev/null
+++ b/app/javascript/mastodon/reducers/mutes.js
@@ -0,0 +1,29 @@
+import Immutable from 'immutable';
+
+import {
+	MUTES_INIT_MODAL,
+	MUTES_TOGGLE_HIDE_NOTIFICATIONS,
+} from '../actions/mutes';
+
+const initialState = Immutable.Map({
+	new: Immutable.Map({
+		isSubmitting: false,
+		account: null,
+		notifications: true,
+	}),
+});
+
+export default function mutes(state = initialState, action) {
+	switch (action.type) {
+	case MUTES_INIT_MODAL:
+		return state.withMutations((state) => {
+			state.setIn(['new', 'isSubmitting'], false);
+			state.setIn(['new', 'account'], action.account);
+			state.setIn(['new', 'notifications'], true);
+		});
+	case MUTES_TOGGLE_HIDE_NOTIFICATIONS:
+		return state.setIn(['new', 'notifications'], !state.getIn(['new', 'notifications']));
+	default:
+		return state;
+	}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 16a87fcd8..6c29663f9 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3879,7 +3879,8 @@ button.icon-button.active i.fa-retweet {
 .boost-modal,
 .confirmation-modal,
 .report-modal,
-.actions-modal {
+.actions-modal,
+.mute-modal {
   background: lighten($ui-secondary-color, 8%);
   color: $ui-base-color;
   border-radius: 8px;
@@ -3925,6 +3926,7 @@ button.icon-button.active i.fa-retweet {
 
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
+.mute-modal__action-bar,
 .report-modal__action-bar {
   display: flex;
   justify-content: space-between;
@@ -4020,8 +4022,10 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.confirmation-modal__action-bar {
-  .confirmation-modal__cancel-button {
+.confirmation-modal__action-bar,
+.mute-modal__action-bar {
+  .confirmation-modal__cancel-button,
+  .mute-modal__cancel-button {
     background-color: transparent;
     color: darken($ui-secondary-color, 34%);
     font-size: 14px;
@@ -4036,6 +4040,7 @@ button.icon-button.active i.fa-retweet {
 }
 
 .confirmation-modal__container,
+.mute-modal__container,
 .report-modal__target {
   padding: 30px;
   font-size: 16px;
-- 
cgit 


From 2ea9b164d315cedd98618b8b9626c2a2bec3ff36 Mon Sep 17 00:00:00 2001
From: Surinna Curtis <ekiru.0@gmail.com>
Date: Sun, 6 Aug 2017 20:00:38 -0300
Subject: Satisfy eslint.

---
 .../glitch/components/status/container.js          |  5 +--
 .../containers/header_container.js                 |  1 -
 .../mastodon/features/ui/components/mute_modal.js  |  9 +++--
 app/javascript/mastodon/reducers/mutes.js          | 38 +++++++++++-----------
 4 files changed, 26 insertions(+), 27 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
index 6e49081b7..b4d7fb4cc 100644
--- a/app/javascript/glitch/components/status/container.js
+++ b/app/javascript/glitch/components/status/container.js
@@ -39,10 +39,7 @@ import {
   unreblog,
   unfavourite,
 } from '../../../mastodon/actions/interactions';
-import {
-  blockAccount,
-  muteAccount,
-} from '../../../mastodon/actions/accounts';
+import { blockAccount } from '../../../mastodon/actions/accounts';
 import { initMuteModal } from '../../../mastodon/actions/mutes';
 import {
   muteStatus,
diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.js b/app/javascript/mastodon/features/account_timeline/containers/header_container.js
index 3f521f048..ac1364441 100644
--- a/app/javascript/mastodon/features/account_timeline/containers/header_container.js
+++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.js
@@ -7,7 +7,6 @@ import {
   unfollowAccount,
   blockAccount,
   unblockAccount,
-  muteAccount,
   unmuteAccount,
 } from '../../../actions/accounts';
 import { mentionCompose } from '../../../actions/compose';
diff --git a/app/javascript/mastodon/features/ui/components/mute_modal.js b/app/javascript/mastodon/features/ui/components/mute_modal.js
index 51a2d70e0..0f3bcb708 100644
--- a/app/javascript/mastodon/features/ui/components/mute_modal.js
+++ b/app/javascript/mastodon/features/ui/components/mute_modal.js
@@ -19,7 +19,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
   return {
     onConfirm(account, notifications) {
-      dispatch(muteAccount(account.get('id'), notifications))
+      dispatch(muteAccount(account.get('id'), notifications));
     },
 
     onClose() {
@@ -35,6 +35,7 @@ const mapDispatchToProps = dispatch => {
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 export default class MuteModal extends React.PureComponent {
+
   static propTypes = {
     isSubmitting: PropTypes.bool.isRequired,
     account: PropTypes.object.isRequired,
@@ -73,14 +74,15 @@ export default class MuteModal extends React.PureComponent {
       <div className='modal-root__modal mute-modal'>
         <div className='mute-modal__container'>
           <p>
-            <FormattedMessage id='confirmations.mute.message'
+            <FormattedMessage
+              id='confirmations.mute.message'
               defaultMessage='Are you sure you want to mute {name}?'
               values={{ name: <strong>@{account.get('acct')}</strong> }}
             />
           </p>
           <p>
             <FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
-            <input type="checkbox" checked={notifications} onChange={this.toggleNotifications} />
+            <input type='checkbox' checked={notifications} onChange={this.toggleNotifications} />
           </p>
         </div>
 
@@ -95,4 +97,5 @@ export default class MuteModal extends React.PureComponent {
       </div>
     );
   }
+
 }
\ No newline at end of file
diff --git a/app/javascript/mastodon/reducers/mutes.js b/app/javascript/mastodon/reducers/mutes.js
index 6d6a9a3b8..400a7c423 100644
--- a/app/javascript/mastodon/reducers/mutes.js
+++ b/app/javascript/mastodon/reducers/mutes.js
@@ -1,29 +1,29 @@
 import Immutable from 'immutable';
 
 import {
-	MUTES_INIT_MODAL,
-	MUTES_TOGGLE_HIDE_NOTIFICATIONS,
+  MUTES_INIT_MODAL,
+  MUTES_TOGGLE_HIDE_NOTIFICATIONS,
 } from '../actions/mutes';
 
 const initialState = Immutable.Map({
-	new: Immutable.Map({
-		isSubmitting: false,
-		account: null,
-		notifications: true,
-	}),
+  new: Immutable.Map({
+    isSubmitting: false,
+    account: null,
+    notifications: true,
+  }),
 });
 
 export default function mutes(state = initialState, action) {
-	switch (action.type) {
-	case MUTES_INIT_MODAL:
-		return state.withMutations((state) => {
-			state.setIn(['new', 'isSubmitting'], false);
-			state.setIn(['new', 'account'], action.account);
-			state.setIn(['new', 'notifications'], true);
-		});
-	case MUTES_TOGGLE_HIDE_NOTIFICATIONS:
-		return state.setIn(['new', 'notifications'], !state.getIn(['new', 'notifications']));
-	default:
-		return state;
-	}
+  switch (action.type) {
+  case MUTES_INIT_MODAL:
+    return state.withMutations((state) => {
+      state.setIn(['new', 'isSubmitting'], false);
+      state.setIn(['new', 'account'], action.account);
+      state.setIn(['new', 'notifications'], true);
+    });
+  case MUTES_TOGGLE_HIDE_NOTIFICATIONS:
+    return state.setIn(['new', 'notifications'], !state.getIn(['new', 'notifications']));
+  default:
+    return state;
+  }
 }
\ No newline at end of file
-- 
cgit 


From fae8dce73813a2ac757ecd83a36e6d7262e158c6 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Wed, 20 Sep 2017 00:20:11 -0700
Subject: Fixed #133 (only parse links in status text)

---
 app/javascript/glitch/components/status/content.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js
index 06fe04ce0..2aad55070 100644
--- a/app/javascript/glitch/components/status/content.js
+++ b/app/javascript/glitch/components/status/content.js
@@ -188,7 +188,7 @@ export default class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className={classNames} ref={this.setRef}>
+        <div className={classNames}>
           <p
             style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
             onMouseDown={this.handleMouseDown}
@@ -205,6 +205,7 @@ export default class StatusContent extends React.PureComponent {
 
           <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
             <div
+              ref={this.setRef}
               style={directionStyle}
               onMouseDown={this.handleMouseDown}
               onMouseUp={this.handleMouseUp}
@@ -218,11 +219,11 @@ export default class StatusContent extends React.PureComponent {
     } else if (parseClick) {
       return (
         <div
-          ref={this.setRef}
           className={classNames}
           style={directionStyle}
         >
           <div
+            ref={this.setRef}
             onMouseDown={this.handleMouseDown}
             onMouseUp={this.handleMouseUp}
             dangerouslySetInnerHTML={content}
@@ -233,11 +234,10 @@ export default class StatusContent extends React.PureComponent {
     } else {
       return (
         <div
-          ref={this.setRef}
           className='status__content'
           style={directionStyle}
         >
-          <div dangerouslySetInnerHTML={content} />
+          <div ref={this.setRef} dangerouslySetInnerHTML={content} />
           {media}
         </div>
       );
-- 
cgit 


From 769f62d96fb34ae83e9b8197bccbb775a8cc5a5c Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Wed, 20 Sep 2017 01:57:08 -0700
Subject: Improvements to status headers

---
 app/javascript/glitch/components/status/header.js | 159 +++++-----------------
 app/javascript/styles/components.scss             |  97 +++++--------
 2 files changed, 74 insertions(+), 182 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
index bdb868e4d..7f12a05b4 100644
--- a/app/javascript/glitch/components/status/header.js
+++ b/app/javascript/glitch/components/status/header.js
@@ -9,41 +9,30 @@ component for better documentation and maintainance by
 
 */
 
-                            /* * * * */
+//  * * * * * * *  //
 
-/*
-
-Imports:
---------
+//  Imports
+//  -------
 
-*/
-
-//  Package imports  //
+//  Package imports.
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl } from 'react-intl';
 
-//  Mastodon imports  //
+//  Mastodon imports.
 import Avatar from '../../../mastodon/components/avatar';
 import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
 import DisplayName from '../../../mastodon/components/display_name';
 import IconButton from '../../../mastodon/components/icon_button';
 import VisibilityIcon from './visibility_icon';
 
-                            /* * * * */
-
-/*
-
-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.
-
-*/
+//  Initial setup
+//  -------------
 
+//  Messages for use with internationalization stuff.
 const messages = defineMessages({
   collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
   uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
@@ -53,43 +42,10 @@ const messages = defineMessages({
   direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
 });
 
-                            /* * * * */
-
-/*
-
-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()`.
-
-*/
+//  The component
+//  -------------
 
 @injectIntl
 export default class StatusHeader extends React.PureComponent {
@@ -105,18 +61,7 @@ export default class StatusHeader extends React.PureComponent {
     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.
-
-*/
-
+  //  Handles clicks on collapsed button
   handleCollapsedClick = (e) => {
     const { collapsed, setExpansion } = this.props;
     if (e.button === 0) {
@@ -125,29 +70,13 @@ status.
     }
   }
 
-/*
-
-####  `handleAccountClick()`.
-
-`handleAccountClick()` handles any clicks on the header info. It calls
-`parseClick()` with our `account` as the anticipatory `destination`.
-
-*/
-
+  //  Handles clicks on account name/image
   handleAccountClick = (e) => {
     const { status, parseClick } = this.props;
     parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
   }
 
-/*
-
-####  `render()`.
-
-`render()` actually puts our element on the screen. `<StatusHeader>`
-has a very straightforward rendering process.
-
-*/
-
+  //  Rendering.
   render () {
     const {
       status,
@@ -162,16 +91,28 @@ has a very straightforward rendering process.
 
     return (
       <header className='status__info'>
-        {
-
-/*
-
-We have to include the status icons before the header content because
-it is rendered as a float.
-
-*/
-
-        }
+        <a
+          href={account.get('url')}
+          target='_blank'
+          className='status__avatar'
+          onClick={this.handleAccountClick}
+        >
+            {
+              friend ? (
+                <AvatarOverlay account={account} friend={friend} />
+              ) : (
+                <Avatar account={account} size={48} />
+              )
+            }
+        </a>
+        <a
+          href={account.get('url')}
+          target='_blank'
+          className='status__display-name'
+          onClick={this.handleAccountClick}
+        >
+          <DisplayName account={account} />
+        </a>
         <div className='status__info__icons'>
           {mediaIcon ? (
             <i
@@ -197,32 +138,6 @@ it is rendered as a float.
             />
           ) : 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')}
-          target='_blank'
-          className='status__display-name'
-          onClick={this.handleAccountClick}
-        >
-          <div className='status__avatar'>{
-            friend ? (
-              <AvatarOverlay account={account} friend={friend} />
-            ) : (
-              <Avatar account={account} size={48} />
-            )
-          }</div>
-          <DisplayName account={account} />
-        </a>
 
       </header>
     );
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 2437d5a91..cb0b1e89d 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -550,6 +550,7 @@
 .status__content,
 .reply-indicator__content {
   position: relative;
+  padding: 5px 12px;
   font-size: 15px;
   line-height: 20px;
   color: $primary-text-color;
@@ -660,7 +661,6 @@
 
 .status {
   padding: 8px 10px;
-  padding-left: 68px;
   position: relative;
   height: auto;
   min-height: 48px;
@@ -736,7 +736,7 @@
       content: "";
     }
 
-    .status__display-name:hover strong {
+    .display-name:hover .display-name__html {
       text-decoration: none;
     }
 
@@ -780,26 +780,21 @@
 }
 
 .status__display-name {
+  margin: 0 auto 0 0;
   color: $ui-base-lighter-color;
 }
 
-.status__info .status__display-name {
-  display: block;
-  max-width: 100%;
-}
-
 .status__info {
-  margin: 2px 0 0;
+  display: flex;
+  margin: 2px 0 5px;
   font-size: 15px;
   line-height: 24px;
 }
 
 .status__info__icons {
-  display: inline-block;
+  flex: none;
   position: relative;
-  float: right;
   color: lighten($ui-base-color, 26%);
-  z-index: 5; // to make it clickable
 
   .status__visibility-icon {
     padding-left: 6px;
@@ -842,15 +837,7 @@
 .status__action-bar {
   align-items: center;
   display: flex;
-  margin-top: 10px;
-  margin-left: -58px;
-
-  &::before {
-    display: block;
-    flex: 1 1 0;
-    max-width: 58px;
-    content: "";
-  }
+  margin: 10px 12px 0;
 }
 
 .status__action-bar-button {
@@ -1268,15 +1255,6 @@
   }
 }
 
-.status__display-name,
-.reply-indicator__display-name,
-.detailed-status__display-name,
-.account__display-name {
-  &:hover strong {
-    text-decoration: underline;
-  }
-}
-
 .account__display-name strong {
   display: block;
 }
@@ -1312,8 +1290,8 @@
 }
 
 .status__avatar {
-  position: absolute;
-  margin-left: -58px;
+  flex: none;
+  margin: 0 10px 0 0;
   height: 48px;
   width: 48px;
 }
@@ -1383,28 +1361,37 @@
 
 .display-name {
   display: block;
-  position: relative;
+  padding: 6px 0;
   max-width: 100%;
-  //overflow: hidden;
-  //text-overflow: ellipsis;
-  //white-space: nowrap;
-}
+  height: 36px;
+  overflow: hidden;
 
-.display-name__html {
-  font-weight: 500;
-}
+  strong {
+    display: block;
+    height: 18px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-.display-name__account {
-  font-size: 14px;
-  display: block;
-  line-height: 1.1; // reduce the distance from the display name
-  padding-bottom: 3px;
+  span {
+    display: block;
+    height: 18px;
+    font-size: 15px;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
-  // block ellipsis
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  &:hover {
+    strong {
+      text-decoration: underline;
+    }
+  }
 }
 
 .status__relative-time,
@@ -3894,17 +3881,7 @@ button.icon-button.active i.fa-retweet {
   flex-direction: column;
 
   .status__display-name {
-    display: block;
-    max-width: 100%;
-    padding-right: 25px;
-  }
-
-  .status__avatar {
-    height: 28px;
-    left: 10px;
-    position: absolute;
-    top: 10px;
-    width: 48px;
+    display: flex;
   }
 }
 
-- 
cgit 


From 227dbb6adb0e573f162b20f7778f2bb7c5b70491 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Wed, 20 Sep 2017 02:19:36 -0700
Subject: Added GIF hover-to-play support

---
 .../glitch/components/status/gallery/item.js         | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/gallery/item.js b/app/javascript/glitch/components/status/gallery/item.js
index d646825a3..ab4aab8dc 100644
--- a/app/javascript/glitch/components/status/gallery/item.js
+++ b/app/javascript/glitch/components/status/gallery/item.js
@@ -17,6 +17,24 @@ export default class StatusGalleryItem extends React.PureComponent {
     autoPlayGif: PropTypes.bool.isRequired,
   };
 
+  handleMouseEnter = (e) => {
+    if (this.hoverToPlay()) {
+      e.target.play();
+    }
+  }
+
+  handleMouseLeave = (e) => {
+    if (this.hoverToPlay()) {
+      e.target.pause();
+      e.target.currentTime = 0;
+    }
+  }
+
+  hoverToPlay () {
+    const { attachment, autoPlayGif } = this.props;
+    return !autoPlayGif && attachment.get('type') === 'gifv';
+  }
+
   handleClick = (e) => {
     const { index, onClick } = this.props;
 
@@ -112,6 +130,8 @@ export default class StatusGalleryItem extends React.PureComponent {
             role='application'
             src={attachment.get('url')}
             onClick={this.handleClick}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
             autoPlay={autoPlay}
             loop
             muted
-- 
cgit 


From 15c9c2fd7e5603d48b5eeb966963138b454cfe2a Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Wed, 20 Sep 2017 02:50:53 -0700
Subject: Pinned toots; embeds

---
 .../glitch/components/status/action_bar.js         | 56 ++++++++++++++++------
 .../glitch/components/status/container.js          | 14 ++++++
 app/javascript/glitch/components/status/index.js   |  3 ++
 app/views/layouts/embedded.html.haml               |  1 +
 4 files changed, 60 insertions(+), 14 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
index 7c73002c1..d4d26c62c 100644
--- a/app/javascript/glitch/components/status/action_bar.js
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  Mastodon imports  //
 import RelativeTimestamp from '../../../mastodon/components/relative_timestamp';
 import IconButton from '../../../mastodon/components/icon_button';
-import DropdownMenu from '../../../mastodon/components/dropdown_menu';
+import DropdownMenuContainer from '../../../mastodon/containers/dropdown_menu_container';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -16,6 +16,7 @@ const messages = defineMessages({
   mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
   reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
   replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
@@ -24,6 +25,9 @@ const messages = defineMessages({
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
+  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
+  embed: { id: 'status.embed', defaultMessage: 'Embed' },
 });
 
 @injectIntl
@@ -43,7 +47,9 @@ export default class StatusActionBar extends ImmutablePureComponent {
     onMute: PropTypes.func,
     onBlock: PropTypes.func,
     onReport: PropTypes.func,
+    onEmbed: PropTypes.func,
     onMuteConversation: PropTypes.func,
+    onPin: PropTypes.func,
     me: PropTypes.number,
     withDismiss: PropTypes.bool,
     intl: PropTypes.object.isRequired,
@@ -61,6 +67,13 @@ export default class StatusActionBar extends ImmutablePureComponent {
     this.props.onReply(this.props.status, this.context.router.history);
   }
 
+  handleShareClick = () => {
+    navigator.share({
+      text: this.props.status.get('search_index'),
+      url: this.props.status.get('url'),
+    });
+  }
+
   handleFavouriteClick = () => {
     this.props.onFavourite(this.props.status);
   }
@@ -73,6 +86,10 @@ export default class StatusActionBar extends ImmutablePureComponent {
     this.props.onDelete(this.props.status);
   }
 
+  handlePinClick = () => {
+    this.props.onPin(this.props.status);
+  }
+
   handleMentionClick = () => {
     this.props.onMention(this.props.status.get('account'), this.context.router.history);
   }
@@ -89,6 +106,10 @@ export default class StatusActionBar extends ImmutablePureComponent {
     this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
   }
 
+  handleEmbed = () => {
+    this.props.onEmbed(this.props.status);
+  }
+
   handleReport = () => {
     this.props.onReport(this.props.status);
   }
@@ -99,9 +120,10 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
   render () {
     const { status, me, intl, withDismiss } = this.props;
-    const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
+
     const mutingConversation = status.get('muted');
     const anonymousAccess = !me;
+    const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
 
     let menu = [];
     let reblogIcon = 'retweet';
@@ -109,14 +131,23 @@ export default class StatusActionBar extends ImmutablePureComponent {
     let replyTitle;
 
     menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
+
+    if (publicStatus) {
+      menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
+    }
+
     menu.push(null);
 
-    if (withDismiss) {
+    if (status.getIn(['account', 'id']) === me || withDismiss) {
       menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
       menu.push(null);
     }
 
     if (status.getIn(['account', 'id']) === me) {
+      if (publicStatus) {
+        menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
+      }
+
       menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
     } else {
       menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
@@ -126,14 +157,6 @@ export default class StatusActionBar extends ImmutablePureComponent {
       menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
     }
 
-    /*
-    if (status.get('visibility') === 'direct') {
-      reblogIcon = 'envelope';
-    } else if (status.get('visibility') === 'private') {
-      reblogIcon = 'lock';
-    }
-    */
-
     if (status.get('in_reply_to_id', null) === null) {
       replyIcon = 'reply';
       replyTitle = intl.formatMessage(messages.reply);
@@ -142,14 +165,19 @@ export default class StatusActionBar extends ImmutablePureComponent {
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
+    const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
+      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
+    );
+
     return (
       <div className='status__action-bar'>
         <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
-        <IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
-        <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+        <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        {shareButton}
 
         <div className='status__action-bar-dropdown'>
-          <DropdownMenu items={menu} disabled={anonymousAccess} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
+          <DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
         </div>
 
         <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
index b4d7fb4cc..da2771c0b 100644
--- a/app/javascript/glitch/components/status/container.js
+++ b/app/javascript/glitch/components/status/container.js
@@ -38,6 +38,8 @@ import {
   favourite,
   unreblog,
   unfavourite,
+  pin,
+  unpin,
 } from '../../../mastodon/actions/interactions';
 import { blockAccount } from '../../../mastodon/actions/accounts';
 import { initMuteModal } from '../../../mastodon/actions/mutes';
@@ -187,6 +189,18 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onPin (status) {
+    if (status.get('pinned')) {
+      dispatch(unpin(status));
+    } else {
+      dispatch(pin(status));
+    }
+  },
+
+  onEmbed (status) {
+    dispatch(openModal('EMBED', { url: status.get('url') }));
+  },
+
   onDelete (status) {
     if (!this.deleteModal) {
       dispatch(deleteStatus(status.get('id')));
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 55e6f1876..4a2a0e1d4 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -165,10 +165,13 @@ export default class Status extends ImmutablePureComponent {
     onReblog                    : PropTypes.func,
     onModalReblog               : PropTypes.func,
     onDelete                    : PropTypes.func,
+    onPin                       : PropTypes.func,
     onMention                   : PropTypes.func,
     onMute                      : PropTypes.func,
     onMuteConversation          : PropTypes.func,
     onBlock                     : PropTypes.func,
+    onEmbed                     : PropTypes.func,
+    onHeightChange              : PropTypes.func,
     onReport                    : PropTypes.func,
     onOpenMedia                 : PropTypes.func,
     onOpenVideo                 : PropTypes.func,
diff --git a/app/views/layouts/embedded.html.haml b/app/views/layouts/embedded.html.haml
index 46dab2d0f..5fc60be17 100644
--- a/app/views/layouts/embedded.html.haml
+++ b/app/views/layouts/embedded.html.haml
@@ -6,6 +6,7 @@
 
     = stylesheet_pack_tag 'common', media: 'all'
     = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
+    = stylesheet_pack_tag 'application', integrity: true, media: 'all'
     = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
     = javascript_pack_tag 'public', integrity: true, crossorigin: 'anonymous'
   %body.embed
-- 
cgit 


From 36a35be2ad2ebd685987f0c9dac2d542edc94d9e Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Wed, 20 Sep 2017 20:34:11 +0200
Subject: Appease Travis

---
 app/javascript/glitch/components/status/header.js | 14 +++++++-------
 app/javascript/mastodon/components/icon_button.js | 17 ++++++++++++++++-
 2 files changed, 23 insertions(+), 8 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
index 7f12a05b4..f741950b1 100644
--- a/app/javascript/glitch/components/status/header.js
+++ b/app/javascript/glitch/components/status/header.js
@@ -97,13 +97,13 @@ export default class StatusHeader extends React.PureComponent {
           className='status__avatar'
           onClick={this.handleAccountClick}
         >
-            {
-              friend ? (
-                <AvatarOverlay account={account} friend={friend} />
-              ) : (
-                <Avatar account={account} size={48} />
-              )
-            }
+          {
+            friend ? (
+              <AvatarOverlay account={account} friend={friend} />
+            ) : (
+              <Avatar account={account} size={48} />
+            )
+          }
         </a>
         <a
           href={account.get('url')}
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 8c5b5e0b9..ca4b14b82 100644
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@@ -73,8 +73,23 @@ export default class IconButton extends React.PureComponent {
       classes.push(this.props.className);
     }
 
+    const flipDeg = this.props.flip ? -180 : -360;
+    const rotateDeg = this.props.active ? flipDeg : 0;
+
+    const motionDefaultStyle = {
+      rotate: rotateDeg,
+    };
+
+    const springOpts = {
+      stiffness: this.props.flip ? 60 : 120,
+      damping: 7,
+    };
+    const motionStyle = {
+      rotate: this.props.animate ? spring(rotateDeg, springOpts) : 0,
+    };
+
     return (
-      <Motion defaultStyle={{ rotate: this.props.active ? (this.props.flip ? -180 : -360) : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? (this.props.flip ? -180 : -360) : 0, { stiffness: this.props.flip ? 60 : 120, damping: 7 }) : 0 }}>
+      <Motion defaultStyle={motionDefaultStyle} style={motionStyle}>
         {({ rotate }) =>
           <button
             aria-label={this.props.title}
-- 
cgit 


From 9a5418942c03f51176faaeec33d2fdc1acc5c30e Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Thu, 28 Sep 2017 10:04:20 +0200
Subject: fix some js errors due to number->string change of status ID

---
 app/javascript/glitch/components/notification/follow.js | 2 +-
 app/javascript/glitch/components/status/action_bar.js   | 2 +-
 app/javascript/glitch/components/status/index.js        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js
index f471307b9..99a5c6219 100644
--- a/app/javascript/glitch/components/notification/follow.js
+++ b/app/javascript/glitch/components/notification/follow.js
@@ -30,7 +30,7 @@ import NotificationOverlayContainer from '../notification/overlay/container';
 export default class NotificationFollow extends ImmutablePureComponent {
 
   static propTypes = {
-    id                   : PropTypes.number.isRequired,
+    id                   : PropTypes.string.isRequired,
     account              : ImmutablePropTypes.map.isRequired,
     notification         : ImmutablePropTypes.map.isRequired,
   };
diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
index d4d26c62c..f4450d31b 100644
--- a/app/javascript/glitch/components/status/action_bar.js
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -50,7 +50,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
     onEmbed: PropTypes.func,
     onMuteConversation: PropTypes.func,
     onPin: PropTypes.func,
-    me: PropTypes.number,
+    me: PropTypes.string,
     withDismiss: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 4a2a0e1d4..9e758793c 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -155,12 +155,12 @@ export default class Status extends ImmutablePureComponent {
   };
 
   static propTypes = {
-    id                          : PropTypes.number,
+    id                          : PropTypes.string,
     status                      : ImmutablePropTypes.map,
     account                     : ImmutablePropTypes.map,
     settings                    : ImmutablePropTypes.map,
     notification                : ImmutablePropTypes.map,
-    me                          : PropTypes.number,
+    me                          : PropTypes.string,
     onFavourite                 : PropTypes.func,
     onReblog                    : PropTypes.func,
     onModalReblog               : PropTypes.func,
-- 
cgit 


From 74e4fc8f8aea01159e7d24b978322545afb70e94 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Thu, 28 Sep 2017 10:13:16 +0200
Subject: fix custom emoji not shown in statuses

---
 app/javascript/glitch/components/status/content.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js
index 2aad55070..9dd34fcb2 100644
--- a/app/javascript/glitch/components/status/content.js
+++ b/app/javascript/glitch/components/status/content.js
@@ -131,11 +131,9 @@ export default class StatusContent extends React.PureComponent {
       this.state.hidden
     );
 
-    const content = { __html: emojify(status.get('content')) };
+    const content = { __html: status.get('contentHtml') };
     const spoilerContent = {
-      __html: emojify(escapeTextContentForBrowser(
-        status.get('spoiler_text', '')
-      )),
+      __html: status.get('spoilerHtml'),
     };
     const directionStyle = { direction: 'ltr' };
     const classNames = classnames('status__content', {
-- 
cgit 


From cf24ce7e0300b8280631efddd58ce576e5cccabf Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Thu, 28 Sep 2017 11:03:23 +0200
Subject: remove wrong emojify usage in old glitch components

---
 app/javascript/glitch/components/account/header.js      | 14 ++++----------
 app/javascript/glitch/components/notification/follow.js |  7 ++-----
 app/javascript/glitch/components/status/content.js      |  8 ++------
 app/javascript/glitch/components/status/prepend.js      |  8 +-------
 4 files changed, 9 insertions(+), 28 deletions(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js
index a1197c4be..bc2ce30f6 100644
--- a/app/javascript/glitch/components/account/header.js
+++ b/app/javascript/glitch/components/account/header.js
@@ -44,7 +44,6 @@ Imports:
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import escapeTextContentForBrowser from 'escape-html';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -89,7 +88,7 @@ export default class AccountHeader extends ImmutablePureComponent {
 
   static propTypes = {
     account  : ImmutablePropTypes.map,
-    me       : PropTypes.number.isRequired,
+    me       : PropTypes.string.isRequired,
     onFollow : PropTypes.func.isRequired,
     intl     : PropTypes.object.isRequired,
   };
@@ -117,7 +116,7 @@ then we set the `displayName` to just be the `username` of the account.
       return null;
     }
 
-    let displayName = account.get('display_name');
+    let displayName = account.get('display_name_html');
     let info        = '';
     let actionBtn   = '';
     let following   = false;
@@ -167,16 +166,11 @@ appropriate icon.
     }
 
 /*
-
-`displayNameHTML` processes the `displayName` and prepares it for
-insertion into the document. Meanwhile, we extract the `text` and
+ we extract the `text` and
 `metadata` from our account's `note` using `processBio()`.
 
 */
 
-    const displayNameHTML    = {
-      __html : emojify(escapeTextContentForBrowser(displayName)),
-    };
     const { text, metadata } = processBio(account.get('note'));
 
 /*
@@ -198,7 +192,7 @@ Here, we render our component using all the things we've defined above.
               </span>
               <span
                 className='account__header__display-name'
-                dangerouslySetInnerHTML={displayNameHTML}
+                dangerouslySetInnerHTML={{ __html: displayName }}
               />
             </a>
             <span className='account__header__username'>
diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js
index 99a5c6219..e2c21bf35 100644
--- a/app/javascript/glitch/components/notification/follow.js
+++ b/app/javascript/glitch/components/notification/follow.js
@@ -11,11 +11,9 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import escapeTextContentForBrowser from 'escape-html';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Mastodon imports.
-import emojify from '../../../mastodon/emoji';
 import Permalink from '../../../mastodon/components/permalink';
 import AccountContainer from '../../../mastodon/containers/account_container';
 
@@ -39,15 +37,14 @@ export default class NotificationFollow extends ImmutablePureComponent {
     const { account, notification } = this.props;
 
     //  Links to the display name.
-    const displayName = account.get('display_name') || account.get('username');
-    const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+    const displayName = account.get('display_name_html') || account.get('username');
     const link = (
       <Permalink
         className='notification__display-name'
         href={account.get('url')}
         title={account.get('acct')}
         to={`/accounts/${account.get('id')}`}
-        dangerouslySetInnerHTML={displayNameHTML}
+        dangerouslySetInnerHTML={{ __html: displayName }}
       />
     );
 
diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js
index 9dd34fcb2..06015619b 100644
--- a/app/javascript/glitch/components/status/content.js
+++ b/app/javascript/glitch/components/status/content.js
@@ -1,13 +1,11 @@
 //  Package imports  //
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import escapeTextContentForBrowser from 'escape-html';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 
 //  Mastodon imports  //
-import emojify from '../../../mastodon/emoji';
 import { isRtl } from '../../../mastodon/rtl';
 import Permalink from '../../../mastodon/components/permalink';
 
@@ -32,7 +30,7 @@ export default class StatusContent extends React.PureComponent {
     const node  = this.node;
     const links = node.querySelectorAll('a');
 
-    for (var i = 0; i < links.length; ++i) {
+    for (let i = 0; i < links.length; ++i) {
       let link    = links[i];
       let mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
 
@@ -132,9 +130,7 @@ export default class StatusContent extends React.PureComponent {
     );
 
     const content = { __html: status.get('contentHtml') };
-    const spoilerContent = {
-      __html: status.get('spoilerHtml'),
-    };
+    const spoilerContent = { __html: status.get('spoilerHtml') };
     const directionStyle = { direction: 'ltr' };
     const classNames = classnames('status__content', {
       'status__content--with-action': parseClick && !disabled,
diff --git a/app/javascript/glitch/components/status/prepend.js b/app/javascript/glitch/components/status/prepend.js
index 6213e4c8d..8c0aed0f4 100644
--- a/app/javascript/glitch/components/status/prepend.js
+++ b/app/javascript/glitch/components/status/prepend.js
@@ -22,12 +22,8 @@ Imports:
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import escapeTextContentForBrowser from 'escape-html';
 import { FormattedMessage } from 'react-intl';
 
-//  Mastodon imports  //
-import emojify from '../../../mastodon/emoji';
-
                             /* * * * */
 
 /*
@@ -99,9 +95,7 @@ generate the message.
       >
         <b
           dangerouslySetInnerHTML={{
-            __html : emojify(escapeTextContentForBrowser(
-              account.get('display_name') || account.get('username')
-            )),
+            __html : account.get('display_name_html') || account.get('username'),
           }}
         />
       </a>
-- 
cgit 


From eeaa8fba43d40e9ecaf6c16c5989c8ead89b4935 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Wed, 11 Oct 2017 22:02:24 +0200
Subject: Fix our media gallery not having alt text and tooltips

---
 app/javascript/glitch/components/status/gallery/item.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/gallery/item.js b/app/javascript/glitch/components/status/gallery/item.js
index ab4aab8dc..7fcc14377 100644
--- a/app/javascript/glitch/components/status/gallery/item.js
+++ b/app/javascript/glitch/components/status/gallery/item.js
@@ -117,7 +117,13 @@ export default class StatusGalleryItem extends React.PureComponent {
           onClick={this.handleClick}
           target='_blank'
         >
-          <img className={letterbox ? 'letterbox' : ''} src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
+          <img
+            className={letterbox ? 'letterbox' : ''}
+            src={previewUrl} srcSet={srcSet}
+            sizes={sizes}
+            alt={attachment.get('description')}
+            title={attachment.get('description')}
+          />
         </a>
       );
     } else if (attachment.get('type') === 'gifv') {
-- 
cgit 


From 64a5e9a1ded9527e2d80a609666d4bbc28ed1570 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Mon, 16 Oct 2017 23:09:39 +0200
Subject: workaround for null status

---
 app/javascript/glitch/components/status/container.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js
index da2771c0b..24261e763 100644
--- a/app/javascript/glitch/components/status/container.js
+++ b/app/javascript/glitch/components/status/container.js
@@ -102,6 +102,16 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, ownProps) => {
 
     let status = getStatus(state, ownProps.id);
+
+    if(status === null) {
+      console.error(`ERROR! NULL STATUS! ${ownProps.id}`);
+      // work-around: find first good status
+      for (let k of state.get('statuses').keys()) {
+        status = getStatus(state, k);
+        if (status !== null) break;
+      }
+    }
+
     let reblogStatus = status.get('reblog', null);
     let account = undefined;
     let prepend = undefined;
-- 
cgit 


From e0298d66f8f807efe80cb01097b46e0ef33bd154 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sun, 5 Nov 2017 15:05:12 -0800
Subject: Autocollapse boosts option

---
 app/javascript/glitch/components/local_settings/page/index.js | 10 ++++++++++
 app/javascript/glitch/components/status/index.js              |  4 ++++
 app/javascript/glitch/locales/en.json                         |  1 +
 app/javascript/glitch/reducers/local_settings.js              |  1 +
 4 files changed, 16 insertions(+)

(limited to 'app/javascript/glitch/components/status')

diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js
index 366c113c0..498230f7b 100644
--- a/app/javascript/glitch/components/local_settings/page/index.js
+++ b/app/javascript/glitch/components/local_settings/page/index.js
@@ -124,6 +124,16 @@ export default class LocalSettingsPage extends React.PureComponent {
           >
             <FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
           </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'auto', 'reblogs']}
+            id='mastodon-settings--collapsed-auto-reblogs'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+            dependsOnNot={[['collapsed', 'auto', 'all']]}
+          >
+            <FormattedMessage id='settings.auto_collapse_reblogs' defaultMessage='Boosts' />
+          </LocalSettingsPageItem>
           <LocalSettingsPageItem
             settings={settings}
             item={['collapsed', 'auto', 'replies']}
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 9e758793c..6bd95b051 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -287,6 +287,7 @@ properly and our intersection observer is good to go.
       muted,
       id,
       intersectionObserverWrapper,
+      prepend,
     } = this.props;
     const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
 
@@ -299,6 +300,9 @@ properly and our intersection observer is good to go.
         node.clientHeight > (
           status.get('media_attachments').size && !muted ? 650 : 400
         )
+      ) || (
+        autoCollapseSettings.get('reblogs') &&
+        prepend === 'reblogged_by'
       ) || (
         autoCollapseSettings.get('replies') &&
         status.get('in_reply_to_id', null) !== null
diff --git a/app/javascript/glitch/locales/en.json b/app/javascript/glitch/locales/en.json
index 18e412356..69aa29108 100644
--- a/app/javascript/glitch/locales/en.json
+++ b/app/javascript/glitch/locales/en.json
@@ -14,6 +14,7 @@
   "settings.auto_collapse_lengthy": "Lengthy toots",
   "settings.auto_collapse_media": "Toots with media",
   "settings.auto_collapse_notifications": "Notifications",
+  "settings.auto_collapse_reblogs": "Boosts",
   "settings.auto_collapse_replies": "Replies",
   "settings.close": "Close",
   "settings.collapsed_statuses": "Collapsed toots",
diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js
index 813e130ca..03654fbe2 100644
--- a/app/javascript/glitch/reducers/local_settings.js
+++ b/app/javascript/glitch/reducers/local_settings.js
@@ -59,6 +59,7 @@ const initialState = ImmutableMap({
       all              : false,
       notifications    : true,
       lengthy          : true,
+      reblogs          : false,
       replies          : false,
       media            : false,
     }),
-- 
cgit