[WIP] Initial status work

* Adjust tag and accounts page

* Remove units from 0px paddings

.dockerignore

@@ -4,7 +4,6 @@ public/system
 public/assets
 public/packs
 node_modules
-storybook
 neo4j
 vendor/bundle
 .DS_Store

.env.production.sample

@@ -69,7 +69,7 @@ SMTP_FROM_ADDRESS=notifications@example.com
 #SMTP_CA_FILE=/etc/ssl/certs/ca-certificates.crt
 #SMTP_OPENSSL_VERIFY_MODE=peer
 #SMTP_ENABLE_STARTTLS_AUTO=true
-
+#SMTP_TLS=true
 
 # Optional user upload path and URL (images, avatars). Default is :rails_root/public/system. If you set this variable, you are responsible for making your HTTP server (eg. nginx) serve these files.
 # PAPERCLIP_ROOT_PATH=/var/lib/mastodon/public-system

.eslintrc.yml

@@ -112,7 +112,7 @@ rules:
   jsx-a11y/iframe-has-title: warn
   jsx-a11y/img-has-alt: warn
   jsx-a11y/img-redundant-alt: warn
-  jsx-a11y/label-has-for: warn
+  jsx-a11y/label-has-for: off
   jsx-a11y/mouse-events-have-key-events: warn
   jsx-a11y/no-access-key: warn
   jsx-a11y/no-distracting-elements: warn
@@ -121,6 +121,6 @@ rules:
   jsx-a11y/onclick-has-focus: warn
   jsx-a11y/onclick-has-role: warn
   jsx-a11y/role-has-required-aria-props: warn
-  jsx-a11y/role-supports-aria-props: warn
+  jsx-a11y/role-supports-aria-props: off
   jsx-a11y/scope: warn
   jsx-a11y/tabindex-no-positive: warn

.gitignore

@@ -21,7 +21,6 @@ public/system
 public/assets
 public/packs
 public/packs-test
-public/sw.js
 .env
 .env.production
 node_modules/

.nanoignore

@@ -14,7 +14,6 @@ node_modules/
 public/assets/
 public/system/
 spec/
-storybook/
 tmp/
 .vagrant/
 vendor/bundle/

.rubocop.yml

@@ -27,6 +27,7 @@ Metrics/AbcSize:
   Max: 100
 
 Metrics/BlockLength:
+  Max: 35
   Exclude:
     - 'lib/tasks/**/*'
 
@@ -35,10 +36,10 @@ Metrics/BlockNesting:
 
 Metrics/ClassLength:
   CountComments: false
-  Max: 200
+  Max: 300
 
 Metrics/CyclomaticComplexity:
-  Max: 15
+  Max: 25
 
 Metrics/LineLength:
   AllowURI: true
@@ -53,11 +54,11 @@ Metrics/ModuleLength:
   Max: 200
 
 Metrics/ParameterLists:
-  Max: 4
+  Max: 5
   CountKeywordArgs: true
 
 Metrics/PerceivedComplexity:
-  Max: 10
+  Max: 20
 
 Rails:
   Enabled: true

.slugignore

@@ -2,4 +2,3 @@ node_modules/
 .cache/
 docs/
 spec/
-storybook/

.travis.yml

@@ -6,6 +6,7 @@ cache:
   - node_modules
   - public/assets
   - public/packs-test
+  - tmp/cache/babel-loader
 dist: trusty
 sudo: required
 

Aptfile

@@ -1,7 +1,9 @@
-protobuf-compiler
-libprotobuf-dev
 ffmpeg
+libicu-dev
+libidn11
+libidn11-dev
+libpq-dev
+libprotobuf-dev
 libxdamage1
 libxfixes3
-libicu-dev
-libidn11-dev
+protobuf-compiler

Dockerfile

@@ -7,6 +7,9 @@ ENV UID=991 GID=991 \
     RAILS_SERVE_STATIC_FILES=true \
     RAILS_ENV=production NODE_ENV=production
 
+ARG LIBICONV_VERSION=1.15
+ARG LIBICONV_DOWNLOAD_SHA256=ccf536620a45458d26ba83887a983b96827001e92a13847b45e4925cc8913178
+
 EXPOSE 3000 4000
 
 WORKDIR /mastodon
@@ -18,8 +21,7 @@ RUN echo "@edge https://nl.alpinelinux.org/alpine/edge/main" >> /etc/apk/reposit
     build-base \
     icu-dev \
     libidn-dev \
-    libxml2-dev \
-    libxslt-dev \
+    libtool \
     postgresql-dev \
     protobuf-dev \
     python \
@@ -32,8 +34,6 @@ RUN echo "@edge https://nl.alpinelinux.org/alpine/edge/main" >> /etc/apk/reposit
     imagemagick@edge \
     libidn \
     libpq \
-    libxml2 \
-    libxslt \
     nodejs-npm@edge \
     nodejs@edge \
     protobuf \
@@ -41,11 +41,23 @@ RUN echo "@edge https://nl.alpinelinux.org/alpine/edge/main" >> /etc/apk/reposit
     tini \
     yarn@edge \
  && update-ca-certificates \
+ && wget -O libiconv.tar.gz "http://ftp.gnu.org/pub/gnu/libiconv/libiconv-$LIBICONV_VERSION.tar.gz" \
+ && echo "$LIBICONV_DOWNLOAD_SHA256 *libiconv.tar.gz" | sha256sum -c - \
+ && mkdir -p /tmp/src \
+ && tar -xzf libiconv.tar.gz -C /tmp/src \
+ && rm libiconv.tar.gz \
+ && cd /tmp/src/libiconv-$LIBICONV_VERSION \
+ && ./configure --prefix=/usr/local \
+ && make -j$(getconf _NPROCESSORS_ONLN)\
+ && make install \
+ && libtool --finish /usr/local/lib \
+ && cd /mastodon \
  && rm -rf /tmp/* /var/cache/apk/*
 
 COPY Gemfile Gemfile.lock package.json yarn.lock /mastodon/
 
-RUN bundle install --deployment --without test development \
+RUN bundle config build.nokogiri --with-iconv-lib=/usr/local/lib --with-iconv-include=/usr/local/include \
+ && bundle install -j$(getconf _NPROCESSORS_ONLN) --deployment --without test development \
  && yarn --ignore-optional --pure-lockfile
 
 COPY . /mastodon

Gemfile.lock

@@ -1,25 +1,25 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.1.2)
-      actionpack (= 5.1.2)
+    actioncable (5.1.3)
+      actionpack (= 5.1.3)
       nio4r (~> 2.0)
       websocket-driver (~> 0.6.1)
-    actionmailer (5.1.2)
-      actionpack (= 5.1.2)
-      actionview (= 5.1.2)
-      activejob (= 5.1.2)
+    actionmailer (5.1.3)
+      actionpack (= 5.1.3)
+      actionview (= 5.1.3)
+      activejob (= 5.1.3)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.1.2)
-      actionview (= 5.1.2)
-      activesupport (= 5.1.2)
+    actionpack (5.1.3)
+      actionview (= 5.1.3)
+      activesupport (= 5.1.3)
       rack (~> 2.0)
       rack-test (~> 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.1.2)
-      activesupport (= 5.1.2)
+    actionview (5.1.3)
+      activesupport (= 5.1.3)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
@@ -30,16 +30,16 @@ GEM
       case_transform (>= 0.2)
       jsonapi-renderer (>= 0.1.1.beta1, < 0.2)
     active_record_query_trace (1.5.4)
-    activejob (5.1.2)
-      activesupport (= 5.1.2)
+    activejob (5.1.3)
+      activesupport (= 5.1.3)
       globalid (>= 0.3.6)
-    activemodel (5.1.2)
-      activesupport (= 5.1.2)
-    activerecord (5.1.2)
-      activemodel (= 5.1.2)
-      activesupport (= 5.1.2)
+    activemodel (5.1.3)
+      activesupport (= 5.1.3)
+    activerecord (5.1.3)
+      activemodel (= 5.1.3)
+      activesupport (= 5.1.3)
       arel (~> 8.0)
-    activesupport (5.1.2)
+    activesupport (5.1.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (~> 0.7)
       minitest (~> 5.1)
@@ -57,14 +57,14 @@ GEM
       encryptor (~> 3.0.0)
     av (0.9.0)
       cocaine (~> 0.5.3)
-    aws-sdk (2.10.6)
-      aws-sdk-resources (= 2.10.6)
-    aws-sdk-core (2.10.6)
+    aws-sdk (2.10.21)
+      aws-sdk-resources (= 2.10.21)
+    aws-sdk-core (2.10.21)
       aws-sigv4 (~> 1.0)
       jmespath (~> 1.0)
-    aws-sdk-resources (2.10.6)
-      aws-sdk-core (= 2.10.6)
-    aws-sigv4 (1.0.0)
+    aws-sdk-resources (2.10.21)
+      aws-sdk-core (= 2.10.21)
+    aws-sigv4 (1.0.1)
     bcrypt (3.1.11)
     better_errors (2.1.1)
       coderay (>= 1.0.0)
@@ -72,7 +72,7 @@ GEM
       rack (>= 0.9.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootsnap (1.1.1)
+    bootsnap (1.1.2)
       msgpack (~> 1.0)
     brakeman (3.6.2)
     browser (2.4.0)
@@ -155,7 +155,7 @@ GEM
     et-orbi (1.0.5)
       tzinfo
     execjs (2.7.0)
-    fabrication (2.16.1)
+    fabrication (2.16.2)
     faker (1.7.3)
       i18n (~> 0.5)
     fast_blank (1.0.0)
@@ -165,7 +165,7 @@ GEM
       ruby-progressbar (~> 1.4)
     globalid (0.4.0)
       activesupport (>= 4.2.0)
-    goldfinger (2.0.0)
+    goldfinger (2.0.1)
       addressable (~> 2.5)
       http (~> 2.2)
       nokogiri (~> 1.8)
@@ -179,7 +179,7 @@ GEM
       activesupport (>= 4.0.1)
       hamlit (>= 1.2.0)
       railties (>= 4.0.1)
-    hashdiff (0.3.4)
+    hashdiff (0.3.5)
     highline (1.7.8)
     hiredis (0.6.1)
     hkdf (0.3.0)
@@ -194,11 +194,11 @@ GEM
     http-form_data (1.0.3)
     http_accept_language (2.1.1)
     http_parser.rb (0.6.0)
-    httplog (0.99.4)
+    httplog (0.99.7)
       colorize
       rack
-    i18n (0.8.4)
-    i18n-tasks (0.9.15)
+    i18n (0.8.6)
+    i18n-tasks (0.9.16)
       activesupport (>= 4.0.2)
       ast (>= 2.1.0)
       easy_translate (>= 0.5.0)
@@ -211,7 +211,7 @@ GEM
     idn-ruby (0.1.0)
     jmespath (1.3.1)
     json (2.1.0)
-    jsonapi-renderer (0.1.2)
+    jsonapi-renderer (0.1.3)
     jwt (1.5.6)
     kaminari (1.0.1)
       activesupport (>= 4.1.0)
@@ -253,7 +253,7 @@ GEM
     mime-types-data (3.2016.0521)
     mimemagic (0.3.2)
     mini_portile2 (2.2.0)
-    minitest (5.10.2)
+    minitest (5.10.3)
     msgpack (1.1.0)
     multi_json (1.12.1)
     net-scp (1.2.1)
@@ -264,7 +264,7 @@ GEM
       mini_portile2 (~> 2.2.0)
     nokogumbo (1.4.13)
       nokogiri
-    oj (3.2.0)
+    oj (3.3.4)
     openssl (2.0.4)
     orm_adapter (0.5.0)
     ostatus2 (2.0.1)
@@ -283,14 +283,14 @@ GEM
       av (~> 0.9.0)
       paperclip (>= 2.5.2)
     parallel (1.11.2)
-    parallel_tests (2.14.1)
+    parallel_tests (2.14.2)
       parallel
     parser (2.4.0.0)
       ast (~> 2.2)
     pg (0.21.0)
     pghero (1.7.0)
       activerecord
-    pkg-config (1.2.3)
+    pkg-config (1.2.4)
     powerpack (0.1.1)
     pry (0.10.4)
       coderay (~> 1.1.0)
@@ -313,17 +313,17 @@ GEM
     rack-test (0.6.3)
       rack (>= 1.0)
     rack-timeout (0.4.2)
-    rails (5.1.2)
-      actioncable (= 5.1.2)
-      actionmailer (= 5.1.2)
-      actionpack (= 5.1.2)
-      actionview (= 5.1.2)
-      activejob (= 5.1.2)
-      activemodel (= 5.1.2)
-      activerecord (= 5.1.2)
-      activesupport (= 5.1.2)
-      bundler (>= 1.3.0, < 2.0)
-      railties (= 5.1.2)
+    rails (5.1.3)
+      actioncable (= 5.1.3)
+      actionmailer (= 5.1.3)
+      actionpack (= 5.1.3)
+      actionview (= 5.1.3)
+      activejob (= 5.1.3)
+      activemodel (= 5.1.3)
+      activerecord (= 5.1.3)
+      activesupport (= 5.1.3)
+      bundler (>= 1.3.0)
+      railties (= 5.1.3)
       sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)
@@ -337,11 +337,11 @@ GEM
     rails-i18n (5.0.4)
       i18n (~> 0.7)
       railties (~> 5.0)
-    rails-settings-cached (0.6.5)
+    rails-settings-cached (0.6.6)
       rails (>= 4.2.0)
-    railties (5.1.2)
-      actionpack (= 5.1.2)
-      activesupport (= 5.1.2)
+    railties (5.1.3)
+      actionpack (= 5.1.3)
+      activesupport (= 5.1.3)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
@@ -353,7 +353,7 @@ GEM
       actionpack (>= 4.0, < 6)
       redis-rack (>= 1, < 3)
       redis-store (>= 1.1.0, < 1.4.0)
-    redis-activesupport (5.0.2)
+    redis-activesupport (5.0.3)
       activesupport (>= 3, < 6)
       redis-store (~> 1.3.0)
     redis-namespace (1.5.3)
@@ -413,7 +413,7 @@ GEM
     scss_lint (0.54.0)
       rake (>= 0.9, < 13)
       sass (~> 3.4.20)
-    sidekiq (5.0.3)
+    sidekiq (5.0.4)
       concurrent-ruby (~> 1.0)
       connection_pool (~> 2.2, >= 2.2.0)
       rack-protection (>= 1.5.0)
@@ -421,12 +421,12 @@ GEM
     sidekiq-bulk (0.1.1)
       activesupport
       sidekiq
-    sidekiq-scheduler (2.1.7)
+    sidekiq-scheduler (2.1.8)
       redis (~> 3)
       rufus-scheduler (~> 3.2)
       sidekiq (>= 3)
       tilt (>= 1.4.0)
-    sidekiq-unique-jobs (5.0.8)
+    sidekiq-unique-jobs (5.0.9)
       sidekiq (>= 4.0, <= 6.0)
       thor (~> 0)
     simple-navigation (4.0.5)
@@ -450,15 +450,15 @@ GEM
     sshkit (1.13.1)
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
-    statsd-instrument (2.1.2)
+    statsd-instrument (2.1.4)
     temple (0.8.0)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thor (0.19.4)
     thread (0.2.2)
     thread_safe (0.3.6)
-    tilt (2.0.7)
-    twitter-text (1.14.6)
+    tilt (2.0.8)
+    twitter-text (1.14.7)
       unf (~> 0.1.0)
     tzinfo (1.2.3)
       thread_safe (~> 0.1)
@@ -590,4 +590,4 @@ RUBY VERSION
    ruby 2.4.1p111
 
 BUNDLED WITH
-   1.15.2
+   1.15.3

README.md

@@ -8,4 +8,3 @@ So here's the deal: we all work on this code, and then it runs on dev.glitch.soc
 
 - You can view documentation for this project at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/).
 - And contributing guidelines are available [here](CONTRIBUTING.md) and [here](https://glitch-soc.github.io/docs/contributing/).
-

app.json

@@ -2,7 +2,7 @@
   "name": "Mastodon",
   "description": "A GNU Social-compatible microblogging server",
   "repository": "https://github.com/tootsuite/mastodon",
-  "logo": "https://github.com/tootsuite/mastodon/raw/master/app/javascript/images/logo.svg",
+  "logo": "https://github.com/tootsuite.png",
   "env": {
     "HEROKU": {
       "description": "Leave this as true",

app/controllers/application_controller.rb

@@ -43,6 +43,10 @@ class ApplicationController < ActionController::Base
     forbidden if current_user.account.suspended?
   end
 
+  def after_sign_out_path_for(_resource_or_scope)
+    new_user_session_path
+  end
+
   protected
 
   def forbidden

app/controllers/auth/passwords_controller.rb

@@ -1,5 +1,20 @@
 # frozen_string_literal: true
 
 class Auth::PasswordsController < Devise::PasswordsController
+  before_action :check_validity_of_reset_password_token, only: :edit
+
   layout 'auth'
+
+  private
+
+  def check_validity_of_reset_password_token
+    unless reset_password_token_is_valid?
+      flash[:error] = I18n.t('auth.invalid_reset_password_token')
+      redirect_to new_password_path(resource_name)
+    end
+  end
+
+  def reset_password_token_is_valid?
+    resource_class.with_reset_password_token(params[:reset_password_token]).present?
+  end
 end

app/controllers/authorize_follows_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class AuthorizeFollowsController < ApplicationController
-  layout 'public'
+  layout 'modal'
 
   before_action :authenticate_user!
 

app/controllers/home_controller.rb

@@ -6,6 +6,7 @@ class HomeController < ApplicationController
 
   def index
     @body_classes = 'app-body'
+    @frontend     = (params[:frontend] and Rails.configuration.x.available_frontends.include? params[:frontend] + '.js') ? params[:frontend] : 'mastodon'
   end
 
   private

app/controllers/remote_follow_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class RemoteFollowController < ApplicationController
-  layout 'public'
+  layout 'modal'
 
   before_action :set_account
   before_action :gone, if: :suspended_account?

app/controllers/settings/two_factor_authentications_controller.rb

@@ -18,7 +18,7 @@ module Settings
     end
 
     def destroy
-      if current_user.validate_and_consume_otp!(confirmation_params[:code])
+      if acceptable_code?
         current_user.otp_required_for_login = false
         current_user.save!
         redirect_to settings_two_factor_authentication_path
@@ -38,5 +38,10 @@ module Settings
     def verify_otp_required
       redirect_to settings_two_factor_authentication_path if current_user.otp_required_for_login?
     end
+
+    def acceptable_code?
+      current_user.validate_and_consume_otp!(confirmation_params[:code]) ||
+        current_user.invalidate_otp_backup_code!(confirmation_params[:code])
+    end
   end
 end

app/helpers/instance_helper.rb

@@ -2,7 +2,7 @@
 
 module InstanceHelper
   def site_title
-    Setting.site_title.to_s
+    Setting.site_title.presence || site_hostname
   end
 
   def site_hostname

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'

app/javascript/glitch/components/column/notif_cleaning_widget/container.js

@@ -1,56 +0,0 @@
-/*
-
-`<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);

app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js

@@ -1,100 +0,0 @@
-/**
- * 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>
-    );
-  }
-
-}

app/javascript/glitch/components/common/avatar/index.js

@@ -0,0 +1,113 @@
+//  <CommonAvatar>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/common/avatar
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class CommonAvatar extends React.PureComponent {
+
+  //  Props and state.
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    animate: PropTypes.bool,
+    circular: PropTypes.bool,
+    className: PropTypes.string,
+    comrade: ImmutablePropTypes.map,
+  }
+  state = {
+    hovering: false,
+  }
+
+  //  Starts or stops animation on hover.
+  handleMouseEnter = () => {
+    if (this.props.animate) return;
+    this.setState({ hovering: true });
+  }
+  handleMouseLeave = () => {
+    if (this.props.animate) return;
+    this.setState({ hovering: false });
+  }
+
+  //  Renders the component.
+  render () {
+    const {
+      handleMouseEnter,
+      handleMouseLeave,
+    } = this;
+    const {
+      account,
+      animate,
+      circular,
+      className,
+      comrade,
+      ...others
+    } = this.props;
+    const { hovering } = this.state;
+    const computedClass = classNames('glitch', 'glitch__common__avatar', {
+      _circular: circular,
+    }, className);
+
+    //  We store the image srcs here for later.
+    const src = account.get('avatar');
+    const staticSrc = account.get('avatar_static');
+    const comradeSrc = comrade ? comrade.get('avatar') : null;
+    const comradeStaticSrc = comrade ? comrade.get('avatar_static') : null;
+
+    //  Avatars are a straightforward div with image(s) inside.
+    return comrade ? (
+      <div
+        className={computedClass}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...others}
+      >
+        <img
+          className='avatar\main'
+          src={hovering || animate ? src : staticSrc}
+          alt=''
+        />
+        <img
+          className='avatar\comrade'
+          src={hovering || animate ? comradeSrc : comradeStaticSrc}
+          alt=''
+        />
+      </div>
+    ) : (
+      <div
+        className={computedClass}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...others}
+      >
+        <img
+          className='avatar\solo'
+          src={hovering || animate ? src : staticSrc}
+          alt=''
+        />
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/common/avatar/style.scss

@@ -0,0 +1,41 @@
+@import 'variables';
+
+.glitch.glitch__common__avatar {
+  display: inline-block;
+  position: relative;
+
+  & > img {
+    display: block;
+    position: static;
+    margin: 0;
+    border-radius: $ui-avatar-border-size;
+    width: 100%;
+    height: 100%;
+
+    &.avatar\\comrade {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 50%;
+      height: 50%;
+    }
+
+    &.avatar\\main {
+      margin: 0 30% 30% 0;
+      width: 70%;
+      height: 70%;
+    }
+  }
+
+  &._circular {
+    & > img {
+      transition: border-radius ($glitch-animation-speed * .3s);
+    }
+
+    &:not(:hover) {
+      & > img {
+        border-radius: 50%;
+      }
+    }
+  }
+}

app/javascript/glitch/components/common/button/index.js

@@ -0,0 +1,146 @@
+//  <CommonButton>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/common/button
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//  Our imports.
+import CommonLink from 'glitch/components/common/link';
+import CommonIcon from 'glitch/components/common/icon';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class CommonButton extends React.PureComponent {
+
+  static propTypes = {
+    active: PropTypes.bool,
+    animate: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    href: PropTypes.string,
+    icon: PropTypes.string,
+    onClick: PropTypes.func,
+    showTitle: PropTypes.bool,
+    title: PropTypes.string,
+  }
+  state = {
+    loaded: false,
+  }
+
+  //  The `loaded` state property activates our animations. We wait
+  //  until an activation change in order to prevent unsightly
+  //  animations when the component first mounts.
+  componentWillReceiveProps (nextProps) {
+    const { active } = this.props;
+
+    //  The double "not"s here cast both arguments to booleans.
+    if (!nextProps.active !== !active) this.setState({ loaded: true });
+  }
+
+  handleClick = (e) => {
+    const { onClick } = this.props;
+    if (!onClick) return;
+    onClick(e);
+    e.preventDefault();
+  }
+
+  //  Rendering the component.
+  render () {
+    const { handleClick } = this;
+    const {
+      active,
+      animate,
+      children,
+      className,
+      disabled,
+      href,
+      icon,
+      onClick,
+      showTitle,
+      title,
+      ...others
+    } = this.props;
+    const { loaded } = this.state;
+    const computedClass = classNames('glitch', 'glitch__common__button', className, {
+      _active: active && !href,  //  Links can't be active
+      _animated: animate && loaded,
+      _disabled: disabled,
+      _link: href,
+      _star: icon === 'star',
+      '_with-text': children || title && showTitle,
+    });
+    let conditionalProps = {};
+
+    //  If href is provided, we render a link.
+    if (href) {
+      if (!disabled && href) conditionalProps.href = href;
+      if (title && !showTitle) {
+        if (!children) conditionalProps.title = title;
+        else conditionalProps['aria-label'] = title;
+      }
+      if (onClick) {
+        if (!disabled) conditionalProps.onClick = handleClick;
+        else conditionalProps['aria-disabled'] = true;
+        conditionalProps.role = 'button';
+        conditionalProps.tabIndex = 0;
+      }
+      return (
+        <CommonLink
+          className={computedClass}
+          {...conditionalProps}
+          {...others}
+        >
+          {children}
+          {title && showTitle ? <span className='button\title'>{title}</span> : null}
+          <CommonIcon name={icon} className='button\icon' />
+        </CommonLink>
+      );
+
+    //  Otherwise, we render a button.
+    } else {
+      if (active !== void 0) conditionalProps['aria-pressed'] = active;
+      if (title && !showTitle) {
+        if (!children) conditionalProps.title = title;
+        else conditionalProps['aria-label'] = title;
+      }
+      if (onClick && !disabled) {
+        conditionalProps.onClick = handleClick;
+      }
+      return (
+        <button
+          className={computedClass}
+          {...conditionalProps}
+          disabled={disabled}
+          {...others}
+          tabIndex='0'
+          type='button'
+        >
+          {children}
+          {title && showTitle ? <span className='button\title'>{title}</span> : null}
+          <CommonIcon name={icon} className='button\icon' />
+        </button>
+      );
+    }
+  };
+
+}

app/javascript/glitch/components/common/button/style.scss

@@ -0,0 +1,134 @@
+@import 'variables';
+
+.glitch.glitch__common__button {
+  display: inline-block;
+  border: none;
+  padding: 0;
+  color: $ui-base-lighter-color;
+  background: transparent;
+  outline: thin transparent dotted;
+  font-size: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color ($glitch-animation-speed * .15s) ease-in, outline-color ($glitch-animation-speed * .3s) ease-in-out;
+
+  &._animated .button\\icon {
+    animation-name: glitch__common__button__deactivate;
+    animation-duration: .9s;
+    animation-timing-function: ease-in-out;
+
+    @keyframes glitch__common__button__deactivate {
+      from {
+        transform: rotate(360deg);
+      }
+      57% {
+        transform: rotate(-60deg);
+      }
+      86% {
+        transform: rotate(30deg);
+      }
+      to {
+        transform: rotate(0deg);
+      }
+    }
+  }
+
+  &._active {
+    .button\\icon {
+      color: $ui-highlight-color;
+    }
+
+    &._animated .button\\icon {
+      animation-name: glitch__common__button__activate;
+
+      @keyframes glitch__common__button__activate {
+        from {
+          transform: rotate(0deg);
+        }
+        57% {
+          transform: rotate(420deg);  //  Blazin' 😎
+        }
+        86% {
+          transform: rotate(330deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    }
+
+    /*
+    The special `._star` class is given to buttons which have a star
+    icon (see JS). When they are active, we give them a gold star ⭐️.
+    */
+    &._star .button\\icon {
+      color: $gold-star;
+    }
+  }
+
+  /*
+  For links, we consider them disabled if they don't have an `href`
+  attribute (see JS).
+  */
+  &._disabled {
+    opacity: $glitch-disabled-opacity;
+    cursor: default;
+  }
+
+  /*
+  This is confusing becuase of the names, but the `color .3 ease-out`
+  transition is actually used when easing *in* to a hovering/active/
+  focusing state, and the default transition is used when leaving. Our
+  buttons are a little slower to glow than they are to fade.
+  */
+  &:active,
+  &:focus,
+  &:hover {
+    color: $glitch-lighter-color;
+    transition: color ($glitch-animation-speed * .3s) ease-out, outline-color ($glitch-animation-speed * .15s) ease-in-out;
+  }
+
+  &:focus {
+    outline-color: currentColor;
+  }
+
+  /*
+  Buttons with text have a number of different styling rules and an
+  overall different appearance.
+  */
+  &._with-text {
+    display: inline-block;
+    border: none;
+    border-radius: .35em;
+    padding: 0 .5em;
+    color: $glitch-texture-color;
+    background: $ui-base-lighter-color;
+    font-size: .75em;
+    font-weight: inherit;
+    text-transform: uppercase;
+    line-height: 1.6;
+    cursor: pointer;
+    vertical-align: baseline;
+    transition: background-color ($glitch-animation-speed * .15s) ease-in, outline-color ($glitch-animation-speed * .3s) ease-in-out;
+
+    .button\\icon {
+      display: inline-block;
+      font-size: 1.25em;
+      vertical-align: -.1em;
+    }
+
+    & > *:not(:first-child) {
+      margin: 0 0 0 .4em;
+      border-left: 1px solid currentColor;
+      padding: 0 0 0 .3em;
+    }
+
+    &:active,
+    &:hover,
+    &:focus {
+      color: $glitch-texture-color;
+      background: $glitch-lighter-color;
+      transition: background-color ($glitch-animation-speed * .3s) ease-out, outline-color ($glitch-animation-speed * .15s) ease-in-out;
+    }
+  }
+}

app/javascript/glitch/components/common/icon/index.js

@@ -0,0 +1,59 @@
+//  <CommonIcon>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/common/icon
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+const CommonIcon = ({
+  className,
+  name,
+  proportional,
+  title,
+  ...others
+}) => name ? (
+  <span
+    className={classNames('glitch', 'glitch__common__icon', className)}
+    {...others}
+  >
+    <span
+      aria-hidden
+      className={`fa ${proportional ? '' : 'fa-fw'} fa-${name} icon\fa`}
+      {...(title ? { title } : {})}
+    />
+    {title ? (
+      <span className='_for-screenreader'>{title}</span>
+    ) : null}
+  </span>
+) : null;
+
+//  Props.
+CommonIcon.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.string,
+  proportional: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+//  Export.
+export default CommonIcon;

app/javascript/glitch/components/common/icon/style.scss

@@ -0,0 +1,14 @@
+@import 'variables';
+
+.glitch.glitch__common__icon {
+  display: inline-block;
+
+  ._for-screenreader {
+    position: absolute;
+    margin: -1px -1px;
+    width: 1px;
+    height: 1px;
+    clip: rect(0, 0, 0, 0);
+    overflow: hidden;
+  }
+}

app/javascript/glitch/components/common/link/index.js

@@ -0,0 +1,74 @@
+//  <CommonLink>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/common/link
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class CommonLink extends React.PureComponent {
+
+  //  Props.
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    destination: PropTypes.string,
+    history: PropTypes.object,
+    href: PropTypes.string,
+  };
+
+  //  We only reroute the link if it is an unadorned click, we have
+  //  access to the router, and there is somewhere to reroute it *to*.
+  handleClick = (e) => {
+    const { destination, history } = this.props;
+    if (!history || !destination || e.button || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) return;
+    history.push(destination);
+    e.preventDefault();
+  }
+
+  //  Rendering.
+  render () {
+    const { handleClick } = this;
+    const { children, className, destination, history, href, ...others } = this.props;
+    const computedClass = classNames('glitch', 'glitch__common__link', className);
+    const conditionalProps = {};
+    if (href) {
+      conditionalProps.href = href;
+      conditionalProps.onClick = handleClick;
+    } else if (destination) {
+      conditionalProps.onClick = handleClick;
+      conditionalProps.role = 'link';
+      conditionalProps.tabIndex = 0;
+    } else conditionalProps.role = 'presentation';
+
+    return (
+      <a
+        className={computedClass}
+        {...conditionalProps}
+        {...others}
+        rel='noopener'
+        target='_blank'
+      >{children}</a>
+    );
+  }
+
+}

app/javascript/glitch/components/common/link/style.scss

@@ -0,0 +1,11 @@
+@import 'variables';
+
+/*
+Most link styling happens elsewhere but we disable text-decoration
+here.
+*/
+.glitch.glitch__common__link {
+  display: inline;
+  color: $ui-secondary-color;
+  text-decoration: none;
+}

app/javascript/glitch/components/common/separator/index.js

@@ -0,0 +1,49 @@
+//  <CommonSeparator>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/common/separator
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+const CommonSeparator = ({
+  className,
+  visible,
+  ...others
+}) => visible ? (
+  <span
+    className={
+      classNames('glitch', 'glitch__common__separator', className)
+    }
+    {...others}
+    role='separator'
+  />  //  Contents provided via CSS.
+) : null;
+
+//  Props.
+CommonSeparator.propTypes = {
+  className: PropTypes.string,
+  visible: PropTypes.bool,
+};
+
+//  Export.
+export default CommonSeparator;

app/javascript/glitch/components/common/separator/style.scss

@@ -0,0 +1,15 @@
+@import 'variables';
+
+/*
+The default contents for a separator is an interpunct, surrounded by
+spaces. However, this can be changed using CSS selectors.
+*/
+.glitch.glitch__common__separator {
+  display: inline-block;
+
+  &::after {
+    display: inline-block;
+    padding: 0 .3em;
+    content: "·";
+  }
+}

app/javascript/glitch/components/list/conversation/container.js

@@ -0,0 +1,52 @@
+//  <ListConversationContainer>
+//  =================
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/list/conversation/container
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import { connect } from 'react-redux';
+
+//  Mastodon imports.
+import { fetchContext } from 'mastodon/actions/statuses';
+
+//  Our imports.
+import ListConversation from '.';
+
+//  * * * * * * *  //
+
+//  State mapping
+//  -------------
+
+const mapStateToProps = (state, { id }) => {
+  return {
+    ancestors   : state.getIn(['contexts', 'ancestors', id]),
+    descendants : state.getIn(['contexts', 'descendants', id]),
+  };
+};
+
+//  * * * * * * *  //
+
+//  Dispatch mapping
+//  ----------------
+
+const mapDispatchToProps = (dispatch) => ({
+  fetch (id) {
+    dispatch(fetchContext(id));
+  },
+});
+
+//  * * * * * * *  //
+
+//  Connecting
+//  ----------
+
+export default connect(mapStateToProps, mapDispatchToProps)(ListConversation);

app/javascript/glitch/components/list/conversation/index.js

@@ -0,0 +1,80 @@
+//  <ListConversation>
+//  ====================
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/list/conversation
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import React from 'react';
+import PropTypes from 'prop-types';
+import ScrollContainer from 'react-router-scroll';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Our imports.
+import StatusContainer from 'glitch/components/status/container';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * * //
+
+//  The component
+//  -------------
+
+export default class ListConversation extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    id: PropTypes.number.isRequired,
+    ancestors: ImmutablePropTypes.list,
+    descendants: ImmutablePropTypes.list,
+    fetch: PropTypes.func.isRequired,
+  }
+
+  //  If this is a detailed status, we should fetch its contents and
+  //  context upon mounting.
+  componentWillMount () {
+    const { id, fetch } = this.props;
+    fetch(id);
+  }
+
+  //  Similarly, if the component receives new props, we need to fetch
+  //  the new status.
+  componentWillReceiveProps (nextProps) {
+    const { id, fetch } = this.props;
+    if (nextProps.id !== id) fetch(nextProps.id);
+  }
+
+  //  We just render our status inside a column with its
+  //  ancestors and decendants.
+  render () {
+    const { id, ancestors, descendants } = this.props;
+    return (
+      <ScrollContainer scrollKey='thread'>
+        <div className='glitch glitch__list__conversation scrollable'>
+          {ancestors && ancestors.size > 0 ? (
+            ancestors.map(
+              ancestor => <StatusContainer key={ancestor} id={ancestor} route />
+            )
+          ) : null}
+          <StatusContainer key={id} id={id} detailed route />
+          {descendants && descendants.size > 0 ? (
+            descendants.map(
+              descendant => <StatusContainer key={descendant} id={descendant} route />
+            )
+          ) : null}
+        </div>
+      </ScrollContainer>
+    );
+  }
+
+};

app/javascript/glitch/components/list/notif_cleaning_widget/container.js

@@ -0,0 +1,80 @@
+/*
+
+`<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,
+  markAllNotifications,
+} from '../../../../mastodon/actions/notifications';
+import { defineMessages, injectIntl } from 'react-intl';
+import { openModal } from '../../../../mastodon/actions/modal';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+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 messages = defineMessages({
+  clearMessage: { id: 'notifications.marked_clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all selected notifications?' },
+  clearConfirm: { id: 'notifications.marked_clear', defaultMessage: 'Clear selected notifications' },
+});
+
+const mapDispatchToProps = (dispatch, { intl }) => ({
+  onEnterCleaningMode(yes) {
+    dispatch(enterNotificationClearingMode(yes));
+  },
+
+  onDeleteMarked() {
+    dispatch(openModal('CONFIRM', {
+      message: intl.formatMessage(messages.clearMessage),
+      confirm: intl.formatMessage(messages.clearConfirm),
+      onConfirm: () => dispatch(deleteMarkedNotifications()),
+    }));
+  },
+
+  onMarkAll() {
+    dispatch(markAllNotifications(true));
+  },
+
+  onMarkNone() {
+    dispatch(markAllNotifications(false));
+  },
+
+  onInvert() {
+    dispatch(markAllNotifications(null));
+  },
+});
+
+const mapStateToProps = state => ({
+  markNewForDelete: state.getIn(['notifications', 'markNewForDelete']),
+});
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons));

app/javascript/glitch/components/list/notif_cleaning_widget/notification_purge_buttons.js

@@ -0,0 +1,62 @@
+/**
+ * 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({
+  btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' },
+  btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' },
+  btnInvert : { id: 'notification_purge.btn_invert', defaultMessage: 'Invert\nselection' },
+  btnApply : { id: 'notification_purge.btn_apply', defaultMessage: 'Clear\nselected' },
+});
+
+@injectIntl
+export default class NotificationPurgeButtons extends ImmutablePureComponent {
+
+  static propTypes = {
+    onDeleteMarked : PropTypes.func.isRequired,
+    onMarkAll : PropTypes.func.isRequired,
+    onMarkNone : PropTypes.func.isRequired,
+    onInvert : PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    markNewForDelete: PropTypes.bool,
+  };
+
+  render () {
+    const { intl, markNewForDelete } = this.props;
+
+    //className='active'
+    return (
+      <div className='column-header__notif-cleaning-buttons'>
+        <button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}>
+          <b>∀</b><br />{intl.formatMessage(messages.btnAll)}
+        </button>
+
+        <button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}>
+          <b>∅</b><br />{intl.formatMessage(messages.btnNone)}
+        </button>
+
+        <button onClick={this.props.onInvert}>
+          <b>¬</b><br />{intl.formatMessage(messages.btnInvert)}
+        </button>
+
+        <button onClick={this.props.onDeleteMarked}>
+          <i className='fa fa-trash' /><br />{intl.formatMessage(messages.btnApply)}
+        </button>
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/list/statuses/index.js

@@ -0,0 +1,209 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { ScrollContainer } from 'react-router-scroll';
+import PropTypes from 'prop-types';
+import IntersectionObserverWrapper from 'mastodon/features/ui/util/intersection_observer_wrapper';
+import { throttle } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import StatusContainer from 'glitch/components/status/container';
+import CommonButton from 'glitch/components/common/button';
+
+const messages = defineMessages({
+  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+@injectIntl
+export default class ListStatuses extends ImmutablePureComponent {
+
+  static propTypes = {
+    scrollKey: PropTypes.string.isRequired,
+    statusIds: ImmutablePropTypes.list.isRequired,
+    onScrollToBottom: PropTypes.func,
+    onScrollToTop: PropTypes.func,
+    onScroll: PropTypes.func,
+    trackScroll: PropTypes.bool,
+    shouldUpdateScroll: PropTypes.func,
+    isLoading: PropTypes.bool,
+    hasMore: PropTypes.bool,
+    prepend: PropTypes.node,
+    emptyMessage: PropTypes.node,
+  };
+  static defaultProps = {
+    trackScroll: true,
+  };
+  state = {
+    currentDetail: null,
+  };
+
+  intersectionObserverWrapper = new IntersectionObserverWrapper();
+
+  handleScroll = throttle(() => {
+    if (this.node) {
+      const { scrollTop, scrollHeight, clientHeight } = this.node;
+      const offset = scrollHeight - scrollTop - clientHeight;
+      this._oldScrollPosition = scrollHeight - scrollTop;
+
+      if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
+        this.props.onScrollToBottom();
+      } else if (scrollTop < 100 && this.props.onScrollToTop) {
+        this.props.onScrollToTop();
+      } else if (this.props.onScroll) {
+        this.props.onScroll();
+      }
+    }
+  }, 150, {
+    trailing: true,
+  });
+
+  componentDidMount () {
+    this.attachScrollListener();
+    this.attachIntersectionObserver();
+
+    // Handle initial scroll posiiton
+    this.handleScroll();
+  }
+
+  componentDidUpdate (prevProps) {
+    // Reset the scroll position when a new toot comes in in order not to
+    // jerk the scrollbar around if you're already scrolled down the page.
+    if (prevProps.statusIds.size < this.props.statusIds.size && this._oldScrollPosition && this.node.scrollTop > 0) {
+      if (prevProps.statusIds.first() !== this.props.statusIds.first()) {
+        let newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
+        if (this.node.scrollTop !== newScrollTop) {
+          this.node.scrollTop = newScrollTop;
+        }
+      } else {
+        this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
+      }
+    }
+  }
+
+  componentWillUnmount () {
+    this.detachScrollListener();
+    this.detachIntersectionObserver();
+  }
+
+  attachIntersectionObserver () {
+    this.intersectionObserverWrapper.connect({
+      root: this.node,
+      rootMargin: '300% 0px',
+    });
+  }
+
+  detachIntersectionObserver () {
+    this.intersectionObserverWrapper.disconnect();
+  }
+
+  attachScrollListener () {
+    this.node.addEventListener('scroll', this.handleScroll);
+  }
+
+  detachScrollListener () {
+    this.node.removeEventListener('scroll', this.handleScroll);
+  }
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  handleLoadMore = (e) => {
+    e.preventDefault();
+    this.props.onScrollToBottom();
+  }
+
+  handleKeyDown = (e) => {
+    if (['PageDown', 'PageUp'].includes(e.key) || (e.ctrlKey && ['End', 'Home'].includes(e.key))) {
+      const article = (() => {
+        switch (e.key) {
+        case 'PageDown':
+          return e.target.nodeName === 'ARTICLE' && e.target.nextElementSibling;
+        case 'PageUp':
+          return e.target.nodeName === 'ARTICLE' && e.target.previousElementSibling;
+        case 'End':
+          return this.node.querySelector('[role="feed"] > article:last-of-type');
+        case 'Home':
+          return this.node.querySelector('[role="feed"] > article:first-of-type');
+        default:
+          return null;
+        }
+      })();
+
+
+      if (article) {
+        e.preventDefault();
+        article.focus();
+        article.scrollIntoView();
+      }
+    }
+  }
+
+  handleSetDetail = (id) => {
+    this.setState({ currentDetail : id });
+  }
+
+  render () {
+    const {
+      handleKeyDown,
+      handleLoadMore,
+      handleSetDetail,
+      intersectionObserverWrapper,
+      setRef,
+    } = this;
+    const { statusIds, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, intl } = this.props;
+    const { currentDetail } = this.state;
+
+    const loadMore = (
+      <CommonButton
+        className='load-more'
+        disabled={isLoading || statusIds.size > 0 && hasMore}
+        onClick={handleLoadMore}
+        showTitle
+        title={intl.formatMessage(messages.load_more)}
+      />
+    );
+    let scrollableArea = null;
+
+    if (isLoading || statusIds.size > 0 || !emptyMessage) {
+      scrollableArea = (
+        <div className='scrollable' ref={setRef}>
+          <div role='feed' className='status-list' onKeyDown={handleKeyDown}>
+            {prepend}
+
+            {statusIds.map((statusId, index) => (
+              <StatusContainer
+                key={statusId}
+                id={statusId}
+                index={index}
+                listLength={statusIds.size}
+                detailed={currentDetail === statusId}
+                setDetail={handleSetDetail}
+                intersectionObserverWrapper={intersectionObserverWrapper}
+              />
+            ))}
+
+            {loadMore}
+          </div>
+        </div>
+      );
+    } else {
+      scrollableArea = (
+        <div className='empty-column-indicator' ref={setRef}>
+          {emptyMessage}
+        </div>
+      );
+    }
+
+    if (trackScroll) {
+      return (
+        <ScrollContainer scrollKey={scrollKey} shouldUpdateScroll={shouldUpdateScroll}>
+          {scrollableArea}
+        </ScrollContainer>
+      );
+    } else {
+      return scrollableArea;
+    }
+  }
+
+}

app/javascript/glitch/components/notification/container.js

@@ -45,6 +45,7 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => ({
     notification: getNotification(state, props.notification, props.accountId),
     settings: state.get('local_settings'),
+    notifCleaning: state.getIn(['notifications', 'cleaningMode']),
   });
 
   return mapStateToProps;

app/javascript/glitch/components/notification/index.js

@@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  Our imports  //
 import StatusContainer from '../status/container';
 import NotificationFollow from './follow';
+import NotificationOverlayContainer from './overlay/container';
 
 export default class Notification extends ImmutablePureComponent {
 
@@ -65,18 +66,25 @@ export default class Notification extends ImmutablePureComponent {
   render () {
     const { notification } = this.props;
 
-    switch(notification.get('type')) {
-    case 'follow':
-      return this.renderFollow(notification);
-    case 'mention':
-      return this.renderMention(notification);
-    case 'favourite':
-      return this.renderFavourite(notification);
-    case 'reblog':
-      return this.renderReblog(notification);
-    }
-
-    return null;
+    return (
+      <div class='status'>
+        {(() => {
+          switch (notification.get('type')) {
+          case 'follow':
+            return this.renderFollow(notification);
+          case 'mention':
+            return this.renderMention(notification);
+          case 'favourite':
+            return this.renderFavourite(notification);
+          case 'reblog':
+            return this.renderReblog(notification);
+          default:
+            return null;
+          }
+        })()}
+        <NotificationOverlayContainer notification={notification} />
+      </div>
+    );
   }
 
 }

app/javascript/glitch/components/notification/overlay/container.js

@@ -1,40 +1,34 @@
-/*
+//  <NotificationOverlayContainer>
+//  ==============================
 
-`<NotificationOverlayContainer>`
-=========================
 
-This container connects `<NotificationOverlay>`s to the Redux store.
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/notification/overlay/container
 
-*/
+//  * * * * * * *  //
 
-//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
-/*
+//  Imports
+//  -------
 
-Imports:
---------
-
-*/
-
-//  Package imports  //
+//  Package imports.
 import { connect } from 'react-redux';
 
-//  Our imports  //
+//  Mastodon imports.
+import { markNotificationForDelete } from 'mastodon/actions/notifications';
+
+//  Our imports.
 import NotificationOverlay from './notification_overlay';
-import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
 
-//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+//  State mapping
+//  -------------
 
-/*
+const mapStateToProps = state => ({
+  show: state.getIn(['notifications', 'cleaningMode']),
+});
 
-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.
-
-*/
+//  Dispatch mapping
+//  ----------------
 
 const mapDispatchToProps = dispatch => ({
   onMarkForDelete(id, yes) {
@@ -42,8 +36,4 @@ const mapDispatchToProps = dispatch => ({
   },
 });
 
-const mapStateToProps = state => ({
-  revealed: state.getIn(['notifications', 'cleaningMode']),
-});
-
 export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);

app/javascript/glitch/components/notification/overlay/notification_overlay.js

@@ -10,10 +10,6 @@ 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' },
 });
@@ -24,7 +20,7 @@ export default class NotificationOverlay extends ImmutablePureComponent {
   static propTypes = {
     notification    : ImmutablePropTypes.map.isRequired,
     onMarkForDelete : PropTypes.func.isRequired,
-    revealed        : PropTypes.bool.isRequired,
+    show            : PropTypes.bool.isRequired,
     intl            : PropTypes.object.isRequired,
   };
 
@@ -35,25 +31,27 @@ export default class NotificationOverlay extends ImmutablePureComponent {
   }
 
   render () {
-    const { notification, revealed, intl } = this.props;
+    const { notification, show, intl } = this.props;
 
     const active = notification.get('markedForDelete');
     const label = intl.formatMessage(messages.markForDeletion);
 
-    return (
+    return show ? (
       <div
         aria-label={label}
         role='checkbox'
         aria-checked={active}
         tabIndex={0}
-        className={`notification__dismiss-overlay ${active ? 'active' : ''} ${revealed ? 'show' : ''}`}
+        className={`notification__dismiss-overlay ${active ? 'active' : ''}`}
         onClick={this.onToggleMark}
       >
-        <div className='notification__dismiss-overlay__ckbox' aria-hidden='true' title={label}>
-          {active ? (<i className='fa fa-check' />) : ''}
+        <div className='wrappy'>
+          <div className='ckbox' aria-hidden='true' title={label}>
+            {active ? (<i className='fa fa-check' />) : ''}
+          </div>
         </div>
       </div>
-    );
+    ) : null;
   }
 
 }

app/javascript/glitch/components/status/action_bar.js

@@ -1,160 +0,0 @@
-//  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,
-    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');
-    const anonymousAccess = !me;
-
-    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' 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} 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>
-      </div>
-    );
-  }
-
-}

app/javascript/glitch/components/status/action_bar/index.js

@@ -0,0 +1,268 @@
+//  <StatusActionBar>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/action_bar
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages } from 'react-intl';
+
+//  Mastodon imports.
+import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
+
+//  Our imports.
+import CommonButton from 'glitch/components/common/button';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Holds our localization messages.
+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' },
+  share:
+    { id: 'status.share', defaultMessage: 'Share' },
+  more:
+    { id: 'status.more', defaultMessage: 'More' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusActionBar extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    detailed: PropTypes.bool,
+    handler: PropTypes.objectOf(PropTypes.func).isRequired,
+    history: PropTypes.object,
+    intl: PropTypes.object.isRequired,
+    me: PropTypes.number,
+    status: ImmutablePropTypes.map.isRequired,
+  };
+
+  //  These handle all of our actions.
+  handleReplyClick = () => {
+    const { handler, history, status } = this.props;
+    handler.reply(status, { history });  //  hack
+  }
+  handleFavouriteClick = () => {
+    const { handler, status } = this.props;
+    handler.favourite(status);
+  }
+  handleReblogClick = (e) => {
+    const { handler, status } = this.props;
+    handler.reblog(status, e.shiftKey);
+  }
+  handleDeleteClick = () => {
+    const { handler, status } = this.props;
+    handler.delete(status);
+  }
+  handleMentionClick = () => {
+    const { handler, history, status } = this.props;
+    handler.mention(status.get('account'), { history });  //  hack
+  }
+  handleMuteClick = () => {
+    const { handler, status } = this.props;
+    handler.mute(status.get('account'));
+  }
+  handleBlockClick = () => {
+    const { handler, status } = this.props;
+    handler.block(status.get('account'));
+  }
+  handleOpen = () => {
+    const { history, status } = this.props;
+    history.push(`/statuses/${status.get('id')}`);
+  }
+  handleReport = () => {
+    const { handler, status } = this.props;
+    handler.report(status);
+  }
+  handleShare = () => {
+    const { status } = this.props;
+    navigator.share({
+      text: status.get('search_index'),
+      url: status.get('url'),
+    });
+  }
+  handleConversationMuteClick = () => {
+    const { handler, status } = this.props;
+    handler.muteConversation(status);
+  }
+
+  //  Renders our component.
+  render () {
+    const {
+      handleBlockClick,
+      handleConversationMuteClick,
+      handleDeleteClick,
+      handleFavouriteClick,
+      handleMentionClick,
+      handleMuteClick,
+      handleOpen,
+      handleReblogClick,
+      handleReplyClick,
+      handleReport,
+      handleShare,
+    } = this;
+    const { detailed, intl, me, status } = this.props;
+    const account = status.get('account');
+    const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
+    const reblogTitle = reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog);
+    const mutingConversation = status.get('muted');
+    const anonymousAccess = !me;
+    let menu = [];
+    let replyIcon;
+    let replyTitle;
+
+    //  This builds our menu.
+    if (!detailed) {
+      menu.push({
+        text: intl.formatMessage(messages.open),
+        action: handleOpen,
+      });
+      menu.push(null);
+    }
+    menu.push({
+      text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
+      action: handleConversationMuteClick,
+    });
+    menu.push(null);
+    if (account.get('id') === me) {
+      menu.push({
+        text: intl.formatMessage(messages.delete),
+        action: handleDeleteClick,
+      });
+    } else {
+      menu.push({
+        text: intl.formatMessage(messages.mention, {
+          name: account.get('username'),
+        }),
+        action: handleMentionClick,
+      });
+      menu.push(null);
+      menu.push({
+        text: intl.formatMessage(messages.mute, {
+          name: account.get('username'),
+        }),
+        action: handleMuteClick,
+      });
+      menu.push({
+        text: intl.formatMessage(messages.block, {
+          name: account.get('username'),
+        }),
+        action: handleBlockClick,
+      });
+      menu.push({
+        text: intl.formatMessage(messages.report, {
+          name: account.get('username'),
+        }),
+        action: handleReport,
+      });
+    }
+
+    //  This selects our reply icon.
+    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);
+    }
+
+    //  Now we can render the component.
+    return (
+      <div className='glitch glitch__status__action-bar'>
+        <CommonButton
+          className='action-bar\button'
+          disabled={anonymousAccess}
+          title={replyTitle}
+          icon={replyIcon}
+          onClick={handleReplyClick}
+        />
+        <CommonButton
+          className='action-bar\button'
+          disabled={anonymousAccess || reblogDisabled}
+          active={status.get('reblogged')}
+          title={reblogTitle}
+          icon='retweet'
+          onClick={handleReblogClick}
+        />
+        <CommonButton
+          className='action-bar\button'
+          disabled={anonymousAccess}
+          animate
+          active={status.get('favourited')}
+          title={intl.formatMessage(messages.favourite)}
+          icon='star'
+          onClick={handleFavouriteClick}
+        />
+        {
+          'share' in navigator ? (
+            <CommonButton
+              className='action-bar\button'
+              disabled={status.get('visibility') !== 'public'}
+              title={intl.formatMessage(messages.share)}
+              icon='share-alt'
+              onClick={handleShare}
+            />
+          ) : null
+        }
+        <div className='action-bar\button'>
+          <DropdownMenuContainer
+            items={menu}
+            disabled={anonymousAccess}
+            icon='ellipsis-h'
+            size={18}
+            direction='right'
+            aria-label={intl.formatMessage(messages.more)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/status/action_bar/style.scss

@@ -0,0 +1,28 @@
+@import 'variables';
+
+.glitch.glitch__status__action-bar {
+  display: block;
+  height: 1.25em;
+  font-size: 1.25em;
+  line-height: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+
+  // Dropdown style override for centering on the icon
+  .dropdown--active {
+    position: relative;
+
+    .dropdown__content.dropdown__right {
+      left: calc(50% + 3px);
+      right: initial;
+      transform: translate(-50%, 0);
+      top: 22px;
+    }
+
+    &::after {
+      right: 1px;
+      bottom: -2px;
+    }
+  }
+}

app/javascript/glitch/components/status/container.js

@@ -1,73 +1,64 @@
-/*
+//  <StatusContainer>
+//  =================
 
-`<StatusContainer>`
-===================
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/container
 
-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>.
+//  For more information, please contact:
+//  @kibi@glitch.social
 
-*/
+//  * * * * * * *  //
 
-                            /* * * * */
+//  Imports
+//  -------
 
-/*
-
-Imports:
---------
-
-*/
-
-//  Package imports  //
+//  Package imports.
 import React from 'react';
-import { connect } from 'react-redux';
 import {
   defineMessages,
   injectIntl,
   FormattedMessage,
 } from 'react-intl';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { createStructuredSelector } from 'reselect';
 
-//  Mastodon imports  //
-import { makeGetStatus } from '../../../mastodon/selectors';
+//  Mastodon imports.
+import { blockAccount, muteAccount } from 'mastodon/actions/accounts';
 import {
   replyCompose,
   mentionCompose,
-} from '../../../mastodon/actions/compose';
+} from 'mastodon/actions/compose';
 import {
   reblog,
   favourite,
   unreblog,
   unfavourite,
-} from '../../../mastodon/actions/interactions';
-import {
-  blockAccount,
-  muteAccount,
-} from '../../../mastodon/actions/accounts';
+} from 'mastodon/actions/interactions';
+import { openModal } from 'mastodon/actions/modal';
+import { initReport } from 'mastodon/actions/reports';
 import {
   muteStatus,
   unmuteStatus,
   deleteStatus,
-} from '../../../mastodon/actions/statuses';
-import { initReport } from '../../../mastodon/actions/reports';
-import { openModal } from '../../../mastodon/actions/modal';
+} from 'mastodon/actions/statuses';
+import { fetchStatusCard } from 'mastodon/actions/cards';
 
-//  Our imports  //
+//  Our imports.
 import Status from '.';
+import makeStatusSelector from 'glitch/selectors/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.
-
-*/
+//  Initial setup
+//  -------------
 
+//  Localization messages.
 const messages = defineMessages({
+  blockConfirm  : {
+    id             : 'confirmations.block.confirm',
+    defaultMessage : 'Block',
+  },
   deleteConfirm : {
     id             : 'confirmations.delete.confirm',
     defaultMessage : 'Delete',
@@ -76,176 +67,146 @@ const messages = defineMessages({
     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.
-
-*/
+//  State mapping
+//  -------------
 
+//  We wrap our `mapStateToProps()` function in a
+//  `makeMapStateToProps()` to give us a closure and preserve
+//  `makeGetStatus()`'s value.
 const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
+  const statusSelector = makeStatusSelector();
 
-  const mapStateToProps = (state, ownProps) => {
-
-    let status = getStatus(state, ownProps.id);
+  //  State mapping.
+  return (state, ownProps) => {
+    let status = statusSelector(state, ownProps.id);
     let reblogStatus = status.get('reblog', null);
-    let account = undefined;
+    let comrade = 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.
-
-*/
-
+    //  Processes reblogs and generates their prepend.
     if (reblogStatus !== null && typeof reblogStatus === 'object') {
-      account = status.get('account');
+      comrade = status.get('account');
       status = reblogStatus;
-      prepend = 'reblogged_by';
+      prepend = 'reblogged';
     }
 
-/*
-
-Here are the props we pass to `<Status>`.
-
-*/
-
+    //  This is what 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']),
+      autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
+      comrade: comrade || ownProps.comrade,
+      deleteModal: state.getIn(['meta', 'delete_modal']),
+      me: state.getIn(['meta', 'me']),
+      prepend: prepend || ownProps.prepend,
+      reblogModal: state.getIn(['meta', 'boost_modal']),
+      settings: state.get('local_settings'),
+      status: status,
     };
   };
-
-  return mapStateToProps;
 };
 
-                            /* * * * */
+//  * * * * * * *  //
 
-/*
+//  Dispatch mapping
+//  ----------------
 
-Dispatch mapping:
------------------
+const makeMapDispatchToProps = (dispatch) => {
+  const dispatchSelector = createStructuredSelector({
+    handler: ({ intl }) => ({
+      block (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'))),
+        }));
+      },
+      delete (status) {
+        if (!this.deleteModal) {  //  TODO: THIS IS BORKN (this refers to handler)
+          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'))),
+          }));
+        }
+      },
+      favourite (status) {
+        if (status.get('favourited')) {
+          dispatch(unfavourite(status));
+        } else {
+          dispatch(favourite(status));
+        }
+      },
+      fetchCard (status) {
+        dispatch(fetchStatusCard(status.get('id')));
+      },
+      mention (account, router) {
+        dispatch(mentionCompose(account, router));
+      },
+      modalReblog (status) {
+        dispatch(reblog(status));
+      },
+      mute (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'))),
+        }));
+      },
+      muteConversation (status) {
+        if (status.get('muted')) {
+          dispatch(unmuteStatus(status.get('id')));
+        } else {
+          dispatch(muteStatus(status.get('id')));
+        }
+      },
+      openMedia (media, index) {
+        dispatch(openModal('MEDIA', { media, index }));
+      },
+      openVideo (media, time) {
+        dispatch(openModal('VIDEO', { media, time }));
+      },
+      reblog (status, withShift) {
+        if (status.get('reblogged')) {
+          dispatch(unreblog(status));
+        } else {
+          if (withShift || !this.reblogModal) {  //  TODO: THIS IS BORKN (this refers to handler)
+            this.modalReblog(status);
+          } else {
+            dispatch(openModal('BOOST', { status, onReblog: this.modalReblog }));
+          }
+        }
+      },
+      reply (status, router) {
+        dispatch(replyCompose(status, router));
+      },
+      report (status) {
+        dispatch(initReport(status.get('account'), status));
+      },
+    }),
+  });
+  return (_, ownProps) => dispatchSelector(ownProps);
+};
 
-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')));
-    }
-  },
-});
+//  Connecting
+//  ----------
 
+//  `connect` will only update when its resultant props change. So
+//  `withRouter` won't get called unless an update is already planned.
+//  This is intended behaviour because we only care about the (mutable)
+//  `history` object.
 export default injectIntl(
-  connect(makeMapStateToProps, mapDispatchToProps)(Status)
+  connect(makeMapStateToProps, makeMapDispatchToProps)(
+    withRouter(Status)
+  )
 );

app/javascript/glitch/components/status/content.js

@@ -1,247 +0,0 @@
-//  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';
-
-export default class StatusContent extends React.PureComponent {
-
-  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,
-    disabled: PropTypes.bool,
-  };
-
-  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('title', link.href);
-      }
-
-      link.setAttribute('target', '_blank');
-      link.setAttribute('rel', 'noopener');
-    }
-  }
-
-  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,
-      parseClick,
-      disabled,
-    } = 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' };
-    const classNames = classnames('status__content', {
-      'status__content--with-action': parseClick && !disabled,
-    });
-
-    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={classNames} 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 (parseClick) {
-      return (
-        <div
-          ref={this.setRef}
-          className={classNames}
-          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>
-      );
-    }
-  }
-
-}

app/javascript/glitch/components/status/content/card/index.js

@@ -0,0 +1,190 @@
+//  <StatusContentCard>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/content/card
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import punycode from 'punycode';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports.
+import emojify from 'mastodon/emoji';
+
+//  Our imports.
+import CommonLink from 'glitch/components/common/link';
+import CommonSeparator from 'glitch/components/common/separator';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Reliably gets the hostname from a URL.
+const getHostname = url => {
+  const parser = document.createElement('a');
+  parser.href = url;
+  return parser.hostname;
+};
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+export default class Card extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    card: ImmutablePropTypes.map.isRequired,
+    fullwidth: PropTypes.bool,
+    letterbox: PropTypes.bool,
+  }
+
+  //  Rendering.
+  render () {
+    const { card, fullwidth, letterbox } = this.props;
+    let media = null;
+    let text = null;
+    let author = null;
+    let provider = null;
+    let caption = null;
+
+    //  This gets all of our card properties.
+    const authorName = card.get('author_name');
+    const authorUrl = card.get('author_url');
+    const description = card.get('description');
+    const html = card.get('html');
+    const image = card.get('image');
+    const providerName = card.get('provider_name');
+    const providerUrl = card.get('provider_url');
+    const title = card.get('title');
+    const type = card.get('type');
+    const url = card.get('url');
+
+    //  Sets our class.
+    const computedClass = classNames('glitch', 'glitch__status__content__card', type, {
+      _fullwidth: fullwidth,
+      _letterbox: letterbox,
+    });
+
+    //  A card is required to render.
+    if (!card) return null;
+
+    //  This generates our card media (image or video).
+    switch(type) {
+    case 'photo':
+      media = (
+        <CommonLink
+          className='card\media card\photo'
+          href={url}
+        >
+          <img
+            alt={title}
+            src={image}
+          />
+        </CommonLink>
+      );
+      break;
+    case 'video':
+      media = (
+        <div
+          className='card\media card\video'
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      );
+      break;
+    }
+
+    //  If we have at least a title or a description, then we can
+    //  render some textual contents.
+    if (title || description) {
+      text = (
+        <CommonLink
+          className='card\description'
+          href={url}
+        >
+          {type === 'link' && image ? (
+            <div className='card\thumbnail'>
+              <img
+                alt=''
+                className='card\image'
+                src={image}
+              />
+            </div>
+          ) : null}
+          {title ? (
+            <h1 className='card\title'>{title}</h1>
+          ) : null}
+          {emojify(description)}
+        </CommonLink>
+      );
+    }
+
+    //  This creates links or spans (depending on whether a URL was
+    //  provided) for the card author and provider.
+    if (authorUrl) {
+      author = (
+        <CommonLink
+          className='card\author card\link'
+          href={authorUrl}
+        >
+          {authorName ? authorName : punycode.toUnicode(getHostname(authorUrl))}
+        </CommonLink>
+      );
+    } else if (authorName) {
+      author = <span className='card\author'>{authorName}</span>;
+    }
+    if (providerUrl) {
+      provider = (
+        <CommonLink
+          className='card\provider card\link'
+          href={providerUrl}
+        >
+          {providerName ? providerName : punycode.toUnicode(getHostname(providerUrl))}
+        </CommonLink>
+      );
+    } else if (providerName) {
+      provider = <span className='card\provider'>{providerName}</span>;
+    }
+
+    //  If we have either the author or the provider, then we can
+    //  render an attachment.
+    if (author || provider) {
+      caption = (
+        <figcaption className='card\caption'>
+          {author}
+          <CommonSeparator
+            className='card\separator'
+            visible={author && provider}
+          />
+          {provider}
+        </figcaption>
+      );
+    }
+
+    //  Putting the pieces together and returning.
+    return (
+      <figure className={computedClass}>
+        {media}
+        {text}
+        {caption}
+      </figure>
+    );
+  }
+
+}

app/javascript/glitch/components/status/content/card/style.scss

@@ -0,0 +1,123 @@
+@import 'variables';
+
+.glitch.glitch__content__card {
+  display: block;
+  border: thin $glitch-texture-color solid;
+  border-radius: .35em;
+  background: $glitch-darker-color;
+
+  .card\\caption {
+    color: $ui-primary-color;
+    background: $glitch-texture-color;
+    font-size: (1.25em / 1.35);  //  approx. .925em
+
+    .card\\link {  //  caption links
+      color: inherit;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .card\\media {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 13.5em;
+
+    /*
+    Our fallback styles letterbox the media, but we'll expand it to
+    fill the container if supported. This won't do anything for
+    `<iframe>`s, but we'll just have to trust them to manage their
+    own content.
+    */
+    & > * {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: auto;
+      max-width: 100%;
+      height: auto;
+      max-height: 100%;
+
+      @supports (object-fit: cover) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .card\\description {
+    color: $ui-secondary-color;
+    background: $ui-base-color;
+
+    .card\\thumbnail {
+      position: relative;
+      float: left;
+      width: 6.75em;
+      height: 100%;
+      background: $glitch-darker-color;
+
+      & > img {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: auto;
+        max-width: 100%;
+        height: auto;
+        max-height: 100%;
+
+        @supports (object-fit: cover) {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+
+    /*
+    We have to divide the bottom margin of titles by their font-size to
+    get them to match what we use elsewhere.
+    */
+    .card\\title {
+      margin-bottom: (.75em * 1.35 / 1.5);
+      font-size: 1.5em;
+      line-height: 1.125;  //  = 1.35 * (1.25 / 1.5)
+    }
+  }
+
+  &._fullwidth {
+    margin-left: -.75em;
+    width: calc(100% + 1.5em);
+  }
+
+  /*
+  If `letterbox` is specified, then we don't need object-fit (since
+  we essentially just do a scale-down).
+  */
+  &._letterbox {
+    .card\\description .card\\thumbnail {
+      & > img {
+        width: auto;
+        height: auto;
+        object-fit: fill;
+      }
+    }
+
+    .card\\media {
+      & > * {
+        width: auto;
+        height: auto;
+        object-fit: fill;
+      }
+    }
+  }
+}

app/javascript/glitch/components/status/content/gallery/index.js

@@ -0,0 +1,191 @@
+//  <StatusContentGallery>
+//  ======================
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/content/gallery
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports:
+//  --------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+//  Our imports.
+import StatusContentGalleryItem from './item';
+import StatusContentGalleryPlayer from './player';
+import CommonButton from 'glitch/components/common/button';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Holds our localization messages.
+const messages = defineMessages({
+  hide: { id: 'media_gallery.hide_media', defaultMessage: 'Hide media' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusContentGallery extends ImmutablePureComponent {
+
+  //  Props and state.
+  static propTypes = {
+    attachments: ImmutablePropTypes.list.isRequired,
+    autoPlayGif: PropTypes.bool,
+    fullwidth: PropTypes.bool,
+    height: PropTypes.number.isRequired,
+    intl: PropTypes.object.isRequired,
+    letterbox: PropTypes.bool,
+    onOpenMedia: PropTypes.func.isRequired,
+    onOpenVideo: PropTypes.func.isRequired,
+    sensitive: PropTypes.bool,
+    standalone: PropTypes.bool,
+  };
+  state = {
+    visible: !this.props.sensitive,
+  };
+
+  //  Handles media clicks.
+  handleMediaClick = index => {
+    const { attachments, onOpenMedia, standalone } = this.props;
+    if (standalone) return;
+    onOpenMedia(attachments, index);
+  }
+
+  //  Handles showing and hiding.
+  handleToggle = () => {
+    this.setState({ visible: !this.state.visible });
+  }
+
+  //  Handles video clicks.
+  handleVideoClick = time => {
+    const { attachments, onOpenVideo, standalone } = this.props;
+    if (standalone) return;
+    onOpenVideo(attachments.get(0), time);
+  }
+
+  //  Renders.
+  render () {
+    const { handleMediaClick, handleToggle, handleVideoClick } = this;
+    const {
+      attachments,
+      autoPlayGif,
+      fullwidth,
+      intl,
+      letterbox,
+      sensitive,
+    } = this.props;
+    const { visible } = this.state;
+    const computedClass = classNames('glitch', 'glitch__status__content__gallery', {
+      _fullwidth: fullwidth,
+    });
+    const useableAttachments = attachments.take(4);
+    let button;
+    let children;
+    let size;
+
+    //  This handles hidden media
+    if (!this.state.visible) {
+      button = (
+        <CommonButton
+          active
+          className='gallery\sensitive gallery\curtain'
+          title={intl.formatMessage(messages.hide)}
+          onClick={handleToggle}
+        >
+          <span className='gallery\message'>
+            <strong className='gallery\warning'>
+              {sensitive ? (
+                <FormattedMessage
+                  id='status.sensitive_warning'
+                  defaultMessage='Sensitive content'
+                />
+              ) : (
+                <FormattedMessage
+                  id='status.media_hidden'
+                  defaultMessage='Media hidden'
+                />
+              )}
+            </strong>
+            <FormattedMessage
+              defaultMessage='Click to view'
+              id='status.sensitive_toggle'
+            />
+          </span>
+        </CommonButton>
+      );  //  No children with hidden media
+
+    //  If our media is visible, then we render it alongside the
+    //  "eyeball" button.
+    } else {
+      button = (
+        <CommonButton
+          className='gallery\sensitive gallery\button'
+          icon={visible ? 'eye' : 'eye-slash'}
+          title={intl.formatMessage(messages.hide)}
+          onClick={handleToggle}
+        />
+      );
+
+      //  If our first item is a video, we render a player. Otherwise,
+      //  we render our images.
+      if (attachments.getIn([0, 'type']) === 'video') {
+        size = 1;
+        children = (
+          <StatusContentGalleryPlayer
+            attachment={attachments.get(0)}
+            autoPlayGif={autoPlayGif}
+            intl={intl}
+            letterbox={letterbox}
+            onClick={handleVideoClick}
+          />
+        );
+      } else {
+        size = useableAttachments.size;
+        children = useableAttachments.map(
+          (attachment, index) => (
+            <StatusContentGalleryItem
+              attachment={attachment}
+              autoPlayGif={autoPlayGif}
+              gallerySize={size}
+              index={index}
+              intl={intl}
+              key={attachment.get('id')}
+              letterbox={letterbox}
+              onClick={handleMediaClick}
+            />
+          )
+        );
+      }
+    }
+
+    //  Renders the gallery.
+    return (
+      <div
+        className={computedClass}
+        style={{ height: `${this.props.height}px` }}
+      >
+        {button}
+        {children}
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/status/content/gallery/item/index.js

@@ -0,0 +1,141 @@
+//  <StatusContentGalleryItem>
+//  ==============
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/content/gallery/item
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports:
+//  --------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages } from 'react-intl';
+
+//  Mastodon imports.
+import { isIOS } from 'mastodon/is_mobile';
+
+//  Our imports.
+import CommonButton from 'glitch/components/common/button';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Holds our localization messages.
+const messages = defineMessages({
+  expand: { id: 'media_gallery.expand', defaultMessage: 'Expand image' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusContentGalleryItem extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    attachment: ImmutablePropTypes.map.isRequired,
+    autoPlayGif: PropTypes.bool,
+    gallerySize: PropTypes.number.isRequired,
+    index: PropTypes.number.isRequired,
+    intl: PropTypes.object.isRequired,
+    letterbox: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+  };
+
+  //  Click handling.
+  handleClick = this.props.onClick.bind(this, this.props.index);
+
+  //  Item rendering.
+  render () {
+    const { handleClick } = this;
+    const {
+      attachment,
+      autoPlayGif,
+      gallerySize,
+      intl,
+      letterbox,
+    } = this.props;
+    const originalUrl = attachment.get('url');
+    const previewUrl = attachment.get('preview_url');
+    const remoteUrl = attachment.get('remote_url');
+    let thumbnail = '';
+    const computedClass = classNames('glitch', 'glitch__status__content__gallery__item', {
+      _letterbox: letterbox,
+    });
+
+    //  If our gallery has more than one item, our images only take up
+    //  half the width. We need this for image `sizes` calculations.
+    let multiplier = gallerySize === 1 ? 1 : .5;
+
+    //  Image attachments
+    if (attachment.get('type') === 'image') {
+      const previewWidth = attachment.getIn(['meta', 'small', 'width']);
+      const originalWidth = attachment.getIn(['meta', 'original', 'width']);
+
+      //  This lets the browser conditionally select the preview or
+      //  original image depending on what the rendered size ends up
+      //  being. We, of course, have no way of knowing what the width
+      //  of the gallery will be post–CSS, but we conservatively roll
+      //  with 400px. (Note: Upstream Mastodon used media queries here,
+      //  but because our page layout is user-configurable, we don't
+      //  bother.)
+      const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
+      const sizes = `${(400 * multiplier) >> 0}px`;
+
+      //  The image.
+      thumbnail = (
+        <img
+          alt=''
+          className='item\image'
+          sizes={sizes}
+          src={previewUrl}
+          srcSet={srcSet}
+        />
+      );
+
+    //  Gifv attachments.
+    } else if (attachment.get('type') === 'gifv') {
+      const autoPlay = !isIOS() && autoPlayGif;
+      thumbnail = (
+        <video
+          autoPlay={autoPlay}
+          className='item\gifv'
+          loop
+          muted
+          poster={previewUrl}
+          src={originalUrl}
+        />
+      );
+    }
+
+    //  Rendering. We render the item inside of a button+link, which
+    //  provides the original. (We can do this for gifvs because we
+    //  don't show the controls.)
+    return (
+      <CommonButton
+        className={computedClass}
+        data-gallery-size={gallerySize}
+        href={remoteUrl || originalUrl}
+        key={attachment.get('id')}
+        onClick={handleClick}
+        title={intl.formatMessage(messages.expand)}
+      >{thumbnail}</CommonButton>
+    );
+  }
+
+}

app/javascript/glitch/components/status/content/gallery/item/style.scss

@@ -0,0 +1,88 @@
+@import 'variables';
+
+.glitch.glitch__status__content__gallery__item {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: zoom-in;
+
+  .item\\image,
+  .item\\gifv {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+
+    @supports (object-fit: cover) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &.letterbox {
+    .item\\image,
+    .item\\gifv {
+      width: auto;
+      height: auto;
+      object-fit: fill;
+    }
+  }
+
+  &[data-gallery-size="2"] {
+    width: calc(50% - .5625em);
+    height: calc(100% - .75em);
+    margin: .375em .1875em .375em .375em;
+
+    &:last-child {
+      margin: .375em .375em .375em .1875em;
+    }
+  }
+
+  &[data-gallery-size="3"] {
+    width: calc(50% - .5625em);
+    height: calc(100% - .75em);
+    margin: .375em .1875em .375em .375em;
+
+    &:nth-last-child(2) {
+      float: right;
+      height: calc(50% - .5625em);
+      margin: .375em .375em .1875em .1875em;
+    }
+
+    &:last-child {
+      float: right;
+      height: calc(50% - .5625em);
+      margin: .1875em .375em .1875em .375em;
+    }
+  }
+
+  &[data-gallery-size="4"] {
+    width: calc(50% - .5625em);
+    height: calc(50% - .5625em);
+    margin: .375em .1875em .1875em .375em;
+
+    &:nth-last-child(3) {
+      margin: .375em .375em .1875em .1875em;
+    }
+
+    &:nth-last-child(2) {
+      margin: .1875em .1875em .375em .375em;
+    }
+
+    &:last-child {
+      margin: .1875em .375em .375em .1875em;
+    }
+  }
+}
+
+
+//  add GIF label in CSS

app/javascript/glitch/components/status/content/gallery/player/index.js

@@ -0,0 +1,233 @@
+//  <StatusContentGalleryPlayer>
+//  ==============
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/content/gallery/player
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports:
+//  --------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+//  Mastodon imports.
+import { isIOS } from 'mastodon/is_mobile';
+
+//  Our imports.
+import CommonButton from 'glitch/components/common/button';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Holds our localization messages.
+const messages = defineMessages({
+  mute: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
+  open: { id: 'video_player.open', defaultMessage: 'Open video' },
+  play: { id: 'video_player.play', defaultMessage: 'Play video' },
+  pause: { id: 'video_player.pause', defaultMessage: 'Pause video' },
+  expand: { id: 'video_player.expand', defaultMessage: 'Expand video' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusContentGalleryPlayer extends ImmutablePureComponent {
+
+  //  Props and state.
+  static propTypes = {
+    attachment: ImmutablePropTypes.map.isRequired,
+    autoPlayGif: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    letterbox: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+  }
+  state = {
+    hasAudio: true,
+    muted: true,
+    preview: !isIOS() && this.props.autoPlayGif,
+    videoError: false,
+  }
+
+  //  Basic video controls.
+  handleMute = () => {
+    this.setState({ muted: !this.state.muted });
+  }
+  handlePlayPause = () => {
+    const { video } = this;
+    if (video.paused) {
+      video.play();
+    } else {
+      video.pause();
+    }
+  }
+
+  //  When clicking we either open (de-preview) the video or we
+  //  expand it, depending. Note that when we de-preview the video will
+  //  also begin playing (except on iOS) due to its `autoplay`
+  //  attribute.
+  handleClick = () => {
+    const { setState, video } = this;
+    const { onClick } = this.props;
+    const { preview } = this.state;
+    if (preview) setState({ preview: false });
+    else {
+      video.pause();
+      onClick(video.currentTime);
+    }
+  }
+
+  //  Loading and errors. We have to do some hacks in order to check if
+  //  the video has audio imo. There's probably a better way to do this
+  //  but that's how upstream has it.
+  handleLoadedData = () => {
+    const { video } = this;
+    if (('WebkitAppearance' in document.documentElement.style && video.audioTracks.length === 0) || video.mozHasAudio === false) {
+      this.setState({ hasAudio: false });
+    }
+  }
+  handleVideoError = () => {
+    this.setState({ videoError: true });
+  }
+
+  //  On mounting or update, we ensure our video has the needed event
+  //  listeners. We can't necessarily do this right away because there
+  //  might be a preview up.
+  componentDidMount () {
+    this.componentDidUpdate();
+  }
+  componentDidUpdate () {
+    const { handleLoadedData, handleVideoError, video } = this;
+    if (!video) return;
+    video.addEventListener('loadeddata', handleLoadedData);
+    video.addEventListener('error', handleVideoError);
+  }
+
+  //  On unmounting, we remove the listeners from the video element.
+  componentWillUnmount () {
+    const { handleLoadedData, handleVideoError, video } = this;
+    if (!video) return;
+    video.removeEventListener('loadeddata', handleLoadedData);
+    video.removeEventListener('error', handleVideoError);
+  }
+
+  //  Getting a reference to our video.
+  setRef = (c) => {
+    this.video = c;
+  }
+
+  //  Rendering.
+  render () {
+    const {
+      handleClick,
+      handleMute,
+      handlePlayPause,
+      setRef,
+      video,
+    } = this;
+    const {
+      attachment,
+      letterbox,
+      intl,
+    } = this.props;
+    const {
+      hasAudio,
+      muted,
+      preview,
+      videoError,
+    } = this.state;
+    const originalUrl = attachment.get('url');
+    const previewUrl = attachment.get('preview_url');
+    const remoteUrl = attachment.get('remote_url');
+    let content = null;
+    const computedClass = classNames('glitch', 'glitch__status__content__gallery__player', {
+      _letterbox: letterbox,
+    });
+
+    //  This gets our content: either a preview image, an error
+    //  message, or the video.
+    switch (true) {
+    case preview:
+      content = (
+        <img
+          alt=''
+          className='player\preview'
+          src={previewUrl}
+        />
+      );
+      break;
+    case videoError:
+      content = (
+        <span className='player\error'>
+          <FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' />
+        </span>
+      );
+      break;
+    default:
+      content = (
+        <video
+          autoPlay={!isIOS()}
+          className='player\video'
+          loop
+          muted={muted}
+          poster={previewUrl}
+          ref={setRef}
+          src={originalUrl}
+        />
+      );
+      break;
+    }
+
+    //  Everything goes inside of a button because everything is a
+    //  button. This is okay wrt the video element because it doesn't
+    //  have controls.
+    return (
+      <div className={computedClass}>
+        <CommonButton
+          className='player\box'
+          href={remoteUrl || originalUrl}
+          key='box'
+          onClick={handleClick}
+          title={intl.formatMessage(preview ? messages.open : messages.expand)}
+        >{content}</CommonButton>
+        {!preview ? (
+          <CommonButton
+            active={!video.paused}
+            className='player\play-pause player\button'
+            icon={video.paused ? 'play' : 'pause'}
+            key='play'
+            onClick={handlePlayPause}
+            title={intl.formatMessage(messages.play)}
+          />
+        ) : null}
+        {!preview && hasAudio ? (
+          <CommonButton
+            active={!muted}
+            className='player\mute player\button'
+            icon={muted ? 'volume-off' : 'volume-up'}
+            key='mute'
+            onClick={handleMute}
+            title={intl.formatMessage(messages.mute)}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/status/content/gallery/player/style.scss

@@ -0,0 +1,71 @@
+@import 'variables';
+
+.glitch.glitch__status__content__gallery__player {
+  display: block;
+  padding: (1.5em * 1.35) 0;  //  Creates black bars at the bottom/top
+  width: 100%;
+  height: calc(100% - (1.5em * 1.35 * 2));
+  cursor: zoom-in;
+
+  .player\\box {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    & > img,
+    & > video {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: auto;
+      max-width: 100%;
+      height: auto;
+      max-height: 100%;
+
+      @supports (object-fit: cover) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .player\\button {
+    position: absolute;
+    margin: .35em;
+    border-radius: .35em;
+    padding: .1625em;
+    height: 1em;  // 1 + 2*.35 + 2*.1625 = 1.5*1.35
+    color: $primary-text-color;
+    background: $base-overlay-background;
+    font-size: 1em;
+    line-height: 1;
+    opacity: .7;
+
+    &.player\\play-pause {
+      bottom: 0;
+      left: 0;
+    }
+
+    &.player\\mute {
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  &._letterbox {
+    .player\\box {
+      & > img,
+      & > video {
+        width: auto;
+        height: auto;
+        object-fit: fill;
+      }
+    }
+  }
+}

app/javascript/glitch/components/status/content/gallery/style.scss

@@ -0,0 +1,74 @@
+@import 'variables';
+
+.glitch.glitch__status__content__gallery {
+  display: block;
+  position: relative;
+  color: $ui-primary-color;
+  background: $base-shadow-color;
+
+  .gallery\\button {
+    position: absolute;
+    margin: .35em;
+    border-radius: .35em;
+    padding: .1625em;
+    height: 1em;  // 1 + 2*.35 + 2*.1625 = 1.5*1.35
+    color: $primary-text-color;
+    background: $base-overlay-background;
+    font-size: 1em;
+    line-height: 1;
+    opacity: .7;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.gallery\\sensitive {
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .gallery\\curtain.gallery\\sensitive {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0;
+    padding: 0;
+    color: $ui-secondary-color;
+    background: $base-overlay-background;
+    font-size: (1.25em / 1.35);  //  approx. .925em
+    line-height: 1.35;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color ($glitch-animation-speed * .15s) ease-in;
+
+    .gallery\\message {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2.6em;
+      margin: auto;
+
+      .gallery\\warning {
+        display: block;
+        font-size: (1.35em / 1.25);
+        line-height: 1.35;
+      }
+    }
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: $primary-text-color;
+      background: $base-overlay-background;  //  No change
+      transition: color ($glitch-animation-speed * .3s) ease-out;
+    }
+  }
+}

app/javascript/glitch/components/status/content/index.js

@@ -0,0 +1,520 @@
+//  <StatusContent>
+//  ===============
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/content
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+//  Mastodon imports.
+import { isRtl } from 'mastodon/rtl';
+
+//  Our imports.
+import StatusContentCard from './card';
+import StatusContentGallery from './gallery';
+import StatusContentUnknown from './unknown';
+import CommonButton from 'glitch/components/common/button';
+import CommonLink from 'glitch/components/common/link';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Holds our localization messages.
+const messages = defineMessages({
+  card_link :
+    { id: 'status.card', defaultMessage: 'Card' },
+  video_link :
+    { id: 'status.video', defaultMessage: 'Video' },
+  image_link :
+    { id: 'status.image', defaultMessage: 'Image' },
+  unknown_link :
+    { id: 'status.unknown_attachment', defaultMessage: 'Unknown attachment' },
+  hashtag    :
+    { id: 'status.hashtag', defaultMessage: 'Hashtag @{name}' },
+  show_more  :
+    { id: 'status.show_more', defaultMessage: 'Show more' },
+  show_less  :
+    { id: 'status.show_less', defaultMessage: 'Show less' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusContent extends ImmutablePureComponent {
+
+  //  Props and state.
+  static propTypes = {
+    autoPlayGif: PropTypes.bool,
+    detailed: PropTypes.bool,
+    expanded: PropTypes.oneOf([true, false, null]),
+    handler: PropTypes.object.isRequired,
+    hideMedia: PropTypes.bool,
+    history: PropTypes.object,
+    intl: PropTypes.object.isRequired,
+    letterbox: PropTypes.bool,
+    onClick: PropTypes.func,
+    onHeightUpdate: PropTypes.func,
+    setExpansion: PropTypes.func,
+    status: ImmutablePropTypes.map.isRequired,
+  }
+  state = {
+    hidden: true,
+  }
+
+  //  Variables.
+  text = null
+
+  //  Our constructor preprocesses our status content and turns it into
+  //  an array of React elements, stored in `this.text`.
+  constructor (props) {
+    super(props);
+    const { intl, history, status } = props;
+
+    //  This creates a document fragment with the DOM contents of our
+    //  status's text and a TreeWalker to walk them.
+    const range = document.createRange();
+    range.selectNode(document.body);
+    const walker = document.createTreeWalker(
+      range.createContextualFragment(status.get('contentHtml')),
+      NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+      { acceptNode (node) {
+        const name = node.nodeName;
+        switch (true) {
+        case node.parentElement && node.parentElement.nodeName.toUpperCase() === 'A':
+          return NodeFilter.FILTER_REJECT;  //  No link children
+        case node.nodeType === Node.TEXT_NODE:
+        case name.toUpperCase() === 'A':
+        case name.toUpperCase() === 'P':
+        case name.toUpperCase() === 'BR':
+        case name.toUpperCase() === 'IMG':  //  Emoji
+          return NodeFilter.FILTER_ACCEPT;
+        default:
+          return NodeFilter.FILTER_SKIP;
+        }
+      } },
+    );
+    const attachments = status.get('attachments');
+    const card = (!attachments || !attachments.size) && status.get('card');
+    this.text = [];
+    let currentP = [];
+
+    //  This walks the contents of our status.
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      const nodeName = node.nodeName.toUpperCase();
+      switch (nodeName) {
+
+      //  If our element is a link, then we process it here.
+      case 'A':
+        currentP.push((() => {
+
+          //  Here we detect what kind of link we're dealing with.
+          let mention = status.get('mentions') ? status.get('mentions').find(
+            item => node.href === item.get('url')
+          ) : null;
+          let tag = status.get('tags') ? status.get('tags').find(
+            item => node.href === item.get('url')
+          ) : null;
+          let attachment = attachments ? attachments.find(
+            item => node.href === item.get('url') || node.href === item.get('text_url') || node.href === item.get('remote_url')
+          ) : null;
+          let text = node.textContent;
+          let icon = '';
+          let type = '';
+
+          //  We use a switch to select our link type.
+          switch (true) {
+
+          //  This handles cards.
+          case card && node.href === card.get('url'):
+            text = card.get('title') || intl.formatMessage(messages.card);
+            icon = 'id-card-o';
+            return (
+              <CommonButton
+                className={'content\card content\button'}
+                href={node.href}
+                icon={icon}
+                key={currentP.length}
+                showTitle
+                title={text}
+              />
+            );
+
+          //  This handles mentions.
+          case mention && (text.replace(/^@/, '') === mention.get('username') || text.replace(/^@/, '') === mention.get('acct')):
+            icon = text[0] === '@' ? '@' : '';
+            text = mention.get('acct').split('@');
+            if (text[1]) text[1].replace(/[@.][^.]*/g, (m) => m.substr(0, 2));
+            return (
+              <CommonLink
+                className='content\mention content\link'
+                destination={`/accounts/${mention.get('id')}`}
+                history={history}
+                href={node.href}
+                key={currentP.length}
+                title={'@' + mention.get('acct')}
+              >
+                {icon ? <span className='content\at'>{icon}</span> : null}
+                <span className='content\username'>{text[0]}</span>
+                {text[1] ? <span className='content\at'>@</span> : null}
+                {text[1] ? <span className='content\instance'>{text[1]}</span> : null}
+              </CommonLink>
+            );
+
+          //  This handles attachment links.
+          case !!attachment:
+            type = attachment.get('type');
+            switch (type) {
+            case 'unknown':
+              text = intl.formatMessage(messages.unknown_attachment);
+              icon = 'question';
+              break;
+            case 'video':
+              text = intl.formatMessage(messages.video);
+              icon = 'video-camera';
+              break;
+            default:
+              text = intl.formatMessage(messages.image);
+              icon = 'picture-o';
+              break;
+            }
+            return (
+              <CommonButton
+                className={`content\\${type} content\\button`}
+                href={node.href}
+                icon={icon}
+                key={currentP.length}
+                showTitle
+                title={text}
+              />
+            );
+
+          //  This handles hashtag links.
+          case !!tag && (text.replace(/^#/, '') === tag.get('name')):
+            icon = text[0] === '#' ? '#' : '';
+            text = tag.get('name');
+            return (
+              <CommonLink
+                className='content\tag content\link'
+                destination={`/timelines/tag/${tag.get('name')}`}
+                history={history}
+                href={node.href}
+                key={currentP.length}
+                title={intl.formatMessage(messages.hashtag, { name: tag.get('name') })}
+              >
+                {icon ? <span className='content\hash'>{icon}</span> : null}
+                <span className='content\tagname'>{text}</span>
+              </CommonLink>
+            );
+
+          //  This handles all other links.
+          default:
+            if (text === node.href && text.length > 23) {
+              text = text.substr(0, 22) + '…';
+            }
+            return (
+              <CommonLink
+                className='content\link'
+                href={node.href}
+                key={currentP.length}
+                title={node.href}
+              >{text}</CommonLink>
+            );
+          }
+        })());
+        break;
+
+      //  If our element is an IMG, we only render it if it's an emoji.
+      case 'IMG':
+        if (!node.classList.contains('emojione')) break;
+        currentP.push(
+          <img
+            alt={node.alt}
+            className={'content\emojione'}
+            draggable={false}
+            key={currentP.length}
+            src={node.src}
+            {...(node.title ? { title: node.title } : {})}
+          />
+        );
+        break;
+
+      //  If our element is a BR, we pass it along.
+      case 'BR':
+        currentP.push(<br key={currentP.length} />);
+        break;
+
+      //  If our element is a P, then we need to start a new paragraph.
+      //  If our paragraph has content, we need to push it first.
+      case 'P':
+        if (currentP.length) this.text.push(
+          <p key={this.text.length}>
+            {currentP}
+          </p>
+        );
+        currentP = [];
+        break;
+
+      //  Otherwise we just push the text.
+      default:
+        currentP.push(node.textContent);
+      }
+    }
+
+    //  If there is unpushed paragraph content after walking the entire
+    //  status contents, we push it here.
+    if (currentP.length) this.text.push(
+      <p key={this.text.length}>
+        {currentP}
+      </p>
+    );
+  }
+
+  //  When our content changes, we need to update the height of the
+  //  status.
+  componentDidUpdate () {
+    if (this.props.onHeightUpdate) {
+      this.props.onHeightUpdate();
+    }
+  }
+
+  //  When the mouse is pressed down, we grab its position.
+  handleMouseDown = (e) => {
+    this.startXY = [e.clientX, e.clientY];
+  }
+
+  //  When the mouse is raised, we handle the click if it wasn't a part
+  //  of a drag.
+  handleMouseUp = (e) => {
+    const { startXY } = this;
+    const { onClick } = this.props;
+    const { button, clientX, clientY, target } = e;
+
+    //  This gets the change in mouse position. If `startXY` isn't set,
+    //  it means that the click originated elsewhere.
+    if (!startXY) return;
+    const [ deltaX, deltaY ] = [clientX - startXY[0], clientY - startXY[1]];
+
+    //  This switch prevents an overly lengthy if.
+    switch (true) {
+
+    //  If the button being released isn't the main mouse button, or if
+    //  we don't have a click parsing function, or if the mouse has
+    //  moved more than 5px, OR if the target of the mouse event is a
+    //  button or a link, we do nothing.
+    case button !== 0:
+    case !onClick:
+    case Math.sqrt(deltaX ** 2 + deltaY ** 2) >= 5:
+    case (
+      target.matches || target.msMatchesSelector || target.webkitMatchesSelector || (() => void 0)
+    ).call(target, 'button, button *, a, a *'):
+      break;
+
+    //  Otherwise, we parse the click.
+    default:
+      onClick(e);
+      break;
+    }
+
+    //  This resets our mouse location.
+    this.startXY = null;
+  }
+
+  //  This expands and collapses our spoiler.
+  handleSpoilerClick = (e) => {
+    e.preventDefault();
+    if (this.props.setExpansion) {
+      this.props.setExpansion(this.props.expanded ? null : true);
+    } else {
+      this.setState({ hidden: !this.state.hidden });
+    }
+  }
+
+  //  Renders our component.
+  render () {
+    const {
+      handleMouseDown,
+      handleMouseUp,
+      handleSpoilerClick,
+      text,
+    } = this;
+    const {
+      autoPlayGif,
+      detailed,
+      expanded,
+      handler,
+      hideMedia,
+      intl,
+      letterbox,
+      onClick,
+      setExpansion,
+      status,
+    } = this.props;
+    const attachments = status.get('attachments');
+    const card = status.get('card');
+    const hidden = setExpansion ? !expanded : this.state.hidden;
+    const computedClass = classNames('glitch', 'glitch__status__content', {
+      _actionable: !detailed && onClick,
+      _rtl: isRtl(status.get('search_index')),
+    });
+    let media = null;
+    let mediaIcon = '';
+
+    //  This defines our media.
+    if (!hideMedia) {
+
+      //  If there aren't any attachments, we try showing a card.
+      if ((!attachments || !attachments.size) && card) {
+        media = (
+          <StatusContentCard
+            card={card}
+            className='content\attachments content\card'
+            fullwidth={detailed}
+            letterbox={letterbox}
+          />
+        );
+        mediaIcon = 'id-card-o';
+
+      //  If any of the attachments are of unknown type, we render an
+      //  unknown attachments list.
+      } else if (attachments && attachments.some(
+        (item) => item.get('type') === 'unknown'
+      )) {
+        media = (
+          <StatusContentUnknown
+            attachments={attachments}
+            className='content\attachments content\unknown'
+            fullwidth={detailed}
+          />
+        );
+        mediaIcon = 'question';
+
+      //  Otherwise, we display the gallery.
+      } else if (attachments) {
+        media = (
+          <StatusContentGallery
+            attachments={attachments}
+            autoPlayGif={autoPlayGif}
+            className='content\attachments content\gallery'
+            fullwidth={detailed}
+            intl={intl}
+            letterbox={letterbox}
+            onOpenMedia={handler.openMedia}
+            onOpenVideo={handler.openVideo}
+            sensitive={status.get('sensitive')}
+            standalone={!history}
+          />
+        );
+        mediaIcon = attachments.getIn([0, 'type']) === 'video' ? 'film' : 'picture-o';
+      }
+    }
+
+    //  Spoiler stuff.
+    if (status.get('spoiler_text').length > 0) {
+
+      //  This gets our list of mentions.
+      const mentionLinks = status.get('mentions').map(mention => {
+        const text = mention.get('acct').split('@');
+        if (text[1]) text[1].replace(/[@.][^.]*/g, (m) => m.substr(0, 2));
+        return (
+          <CommonLink
+            className='content\mention content\link'
+            destination={`/accounts/${mention.get('id')}`}
+            history={history}
+            href={mention.get('url')}
+            key={mention.get('id')}
+            title={'@' + mention.get('acct')}
+          >
+            <span className='content\at'>@</span>
+            <span className='content\username'>{text[0]}</span>
+            {text[1] ? <span className='content\at'>@</span> : null}
+            {text[1] ? <span className='content\instance'>{text[1]}</span> : null}
+          </CommonLink>
+        );
+      }).reduce((aggregate, item) => [...aggregate, ' ', item], []);
+
+      //  Component rendering.
+      return (
+        <div className={computedClass}>
+          <div
+            className='content\spoiler'
+            {...(onClick ? {
+              onMouseDown: handleMouseDown,
+              onMouseUp: handleMouseUp,
+            } : {})}
+          >
+            <p>
+              <span
+                className='content\warning'
+                dangerouslySetInnerHTML={status.get('spoilerHtml')}
+              />
+              {' '}
+              <CommonButton
+                active={!hidden}
+                className='content\showmore'
+                icon={hidden && mediaIcon}
+                onClick={handleSpoilerClick}
+                showTitle={hidden}
+                title={intl.formatMessage(messages.show_more)}
+              >
+                {hidden ? null : (
+                  <FormattedMessage {...messages.show_less} />
+                )}
+              </CommonButton>
+            </p>
+          </div>
+          {hidden ? mentionLinks : null}
+          <div className='content\contents' hidden={hidden}>
+            <div
+              className='content\text'
+              {...(onClick ? {
+                onMouseDown: handleMouseDown,
+                onMouseUp: handleMouseUp,
+              } : {})}
+            >{text}</div>
+            {media}
+          </div>
+        </div>
+      );
+
+    //  Non-spoiler statuses.
+    } else {
+      return (
+        <div className={computedClass}>
+          <div className='content\contents'>
+            <div
+              className='content\text'
+              {...(onClick ? {
+                onMouseDown: handleMouseDown,
+                onMouseUp: handleMouseUp,
+              } : {})}
+            >{text}</div>
+            {media}
+          </div>
+        </div>
+      );
+    }
+  }
+
+}

app/javascript/glitch/components/status/content/style.scss

@@ -0,0 +1,101 @@
+@import 'variables';
+
+.glitch.glitch__status__content {
+  position: relative;
+  padding: (.75em * 1.35) .75em;
+  color: $primary-text-color;
+  direction: ltr;  //  but see `&.rtl` below
+  word-wrap: break-word;
+  overflow: visible;
+  white-space: pre-wrap;
+
+  .content\\contents {
+    .content\\attachments {
+      .content\\text + & {
+        margin-top: (.75em * 1.35);
+      }
+    }
+
+    &[hidden] {
+      display: none;
+    }
+
+    .content\\spoiler + & {
+      margin-top: (.75em * 1.35);
+    }
+  }
+
+  .content\\emojione {
+    width: 1.2em;
+    height: 1.2em;
+  }
+
+  .content\\spoiler,
+  .content\\text {  //  text-containing elements
+    p {
+      margin-bottom: (.75em * 1.35);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .content\\link {
+      color: $ui-secondary-color;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+
+      /*
+      For mentions, we only underline the username and instance (not
+      the @'s).
+      */
+      &.content\\mention {
+        .content\\at {
+          color: $glitch-lighter-color;
+        }
+
+        &:hover {
+          text-decoration: none;
+
+          .content\\instance,
+          .content\\username {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      /*
+      Similarly, for tags, we only underline the tag name (not the
+      hash).
+      */
+      &.content\\tag {
+        .content\\hash {
+          color: $glitch-lighter-color;
+        }
+
+        &:hover {
+          text-decoration: none;
+
+          .content\\tagname {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+  &._actionable {
+    .content\\text,
+    .content\\spoiler {
+      cursor: pointer;
+    }
+  }
+
+  &._rtl {
+    direction: rtl;
+  }
+}

app/javascript/glitch/components/status/content/unknown/index.js

@@ -0,0 +1,70 @@
+//  <StatusContentUnknown>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/content/unknown
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Our imports.
+import CommonIcon from 'glitch/components/common/icon';
+import CommonLink from 'glitch/components/common/link';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+export default class StatusContentUnknown extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    attachments: ImmutablePropTypes.list.isRequired,
+    fullwidth: PropTypes.bool,
+  }
+
+  render () {
+    const { attachments, fullwidth } = this.props;
+    const computedClass = classNames('glitch', 'glitch__status__content__unknown', {
+      _fullwidth: fullwidth,
+    });
+
+    return (
+      <ul className={computedClass}>
+        {attachments.map(attachment => (
+          <li
+            className='unknown\attachment'
+            key={attachment.get('id')}
+          >
+            <CommonLink
+              className='unknown\link'
+              href={attachment.get('remote_url')}
+            >
+              <CommonIcon
+                className='unknown\icon'
+                name='link'
+              />
+              {attachment.get('title') || attachment.get('remote_url')}
+            </CommonLink>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+}

app/javascript/glitch/components/status/footer/index.js

@@ -0,0 +1,141 @@
+//  <StatusFooter>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/footer
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, FormattedDate } from 'react-intl';
+
+//  Mastodon imports.
+import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+
+//  Our imports.
+import CommonIcon from 'glitch/components/common/icon';
+import CommonLink from 'glitch/components/common/link';
+import CommonSeparator from 'glitch/components/common/separator';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Localization messages.
+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' },
+  permalink:
+    { id: 'status.permalink', defaultMessage: 'Permalink' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusFooter extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    application: ImmutablePropTypes.map.isRequired,
+    datetime: PropTypes.string,
+    detailed: PropTypes.bool,
+    href: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+    visibility: PropTypes.string,
+  }
+
+  //  Rendering.
+  render () {
+    const { application, datetime, detailed, href, intl, visibility } = this.props;
+    const visibilityIcon = {
+      public: 'globe',
+      unlisted: 'unlock-alt',
+      private: 'lock',
+      direct: 'envelope',
+    }[visibility];
+    const computedClass = classNames('glitch', 'glitch__status__footer', {
+      _detailed: detailed,
+    });
+
+    //  If our status isn't detailed, our footer only contains the
+    //  relative timestamp and visibility information.
+    if (!detailed) return (
+      <footer className={computedClass}>
+        <CommonLink
+          className='footer\timestamp footer\link'
+          href={href}
+          title={intl.formatMessage(messages.permalink)}
+        ><RelativeTimestamp timestamp={datetime} /></CommonLink>
+        <CommonSeparator className='footer\separator' visible />
+        <CommonIcon
+          className='footer\icon'
+          name={visibilityIcon}
+          proportional
+          title={intl.formatMessage(messages[visibility])}
+        />
+      </footer>
+    );
+
+    //  Otherwise, we give the full timestamp and include a link to the
+    //  application which posted the status if applicable.
+    return (
+      <footer className={computedClass}>
+        <CommonLink
+          className='footer\timestamp'
+          href={href}
+          title={intl.formatMessage(messages.permalink)}
+        >
+          <FormattedDate
+            value={new Date(datetime)}
+            hour12={false}
+            year='numeric'
+            month='short'
+            day='2-digit'
+            hour='2-digit'
+            minute='2-digit'
+          />
+        </CommonLink>
+        <CommonSeparator className='footer\separator' visible={!!application} />
+        {
+          application ? (
+            <CommonLink
+              className='footer\application footer\link'
+              href={application.get('website')}
+            >{application.get('name')}</CommonLink>
+          ) : null
+        }
+        <CommonSeparator className='footer\separator' visible />
+        <CommonIcon
+          name={visibilityIcon}
+          className='footer\icon'
+          proportional
+          title={intl.formatMessage(messages[visibility])}
+        />
+      </footer>
+    );
+  }
+
+}

app/javascript/glitch/components/status/footer/style.scss

@@ -0,0 +1,18 @@
+@import 'variables';
+
+.glitch.glitch__status__footer {
+  display: block;
+  height: 1.25em;
+  font-size: (1.25em / 1.35);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .footer\\link {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

app/javascript/glitch/components/status/gallery/index.js

@@ -1,79 +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';
-
-//  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>
-    );
-  }
-
-}

app/javascript/glitch/components/status/gallery/item.js

@@ -1,132 +0,0 @@
-//  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>
-    );
-  }
-
-}

app/javascript/glitch/components/status/header.js

@@ -1,238 +0,0 @@
-/*
-
-`<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';
-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.
-
-*/
-
-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 = {
-    status: ImmutablePropTypes.map.isRequired,
-    friend: ImmutablePropTypes.map,
-    mediaIcon: PropTypes.string,
-    collapsible: PropTypes.bool,
-    collapsed: PropTypes.bool,
-    parseClick: PropTypes.func.isRequired,
-    setExpansion: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-/*
-
-###  Implementation
-
-####  `handleCollapsedClick()`.
-
-`handleCollapsedClick()` is just a simple callback for our collapsing
-button. It calls `setExpansion` to set the collapsed state of the
-status.
-
-*/
-
-  handleCollapsedClick = (e) => {
-    const { collapsed, setExpansion } = this.props;
-    if (e.button === 0) {
-      setExpansion(collapsed ? null : false);
-      e.preventDefault();
-    }
-  }
-
-/*
-
-####  `handleAccountClick()`.
-
-`handleAccountClick()` handles any clicks on the header info. It calls
-`parseClick()` with our `account` as the anticipatory `destination`.
-
-*/
-
-  handleAccountClick = (e) => {
-    const { 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.
-
-*/
-
-  render () {
-    const {
-      status,
-      friend,
-      mediaIcon,
-      collapsible,
-      collapsed,
-      intl,
-    } = this.props;
-
-    const account = status.get('account');
-
-    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}
-          {(
-            <VisibilityIcon visibility={status.get('visibility')} />
-          )}
-          {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')}
-          target='_blank'
-          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>
-    );
-  }
-
-}

app/javascript/glitch/components/status/header/index.js

@@ -0,0 +1,76 @@
+//  <StatusHeader>
+//  ==============
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/header
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  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';
+
+//  Our imports.
+import CommonAvatar from 'glitch/components/common/avatar';
+import CommonLink from 'glitch/components/common/link';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component:
+//  --------------
+
+export default class StatusHeader extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    comrade: ImmutablePropTypes.map,
+    history: PropTypes.object,
+  };
+
+  //  Renders our component.
+  render () {
+    const {
+      account,
+      comrade,
+      history,
+    } = this.props;
+
+    //  This displays our header.
+    return (
+      <header className='glitch glitch__status__header'>
+        <CommonLink
+          className='header\link'
+          destination={`/accounts/${account.get('id')}`}
+          history={history}
+          href={account.get('url')}
+        >
+          <CommonAvatar
+            account={account}
+            className='header\avatar'
+            comrade={comrade}
+          />
+        </CommonLink>
+        <b
+          className='header\display-name'
+          dangerouslySetInnerHTML={{
+            __html: account.get('display_name_html'),
+          }}
+        />
+        <code className='header\account'>@{account.get('acct')}</code>
+      </header>
+    );
+  }
+
+}

app/javascript/glitch/components/status/header/style.scss

@@ -0,0 +1,45 @@
+@import 'variables';
+
+.glitch.glitch__status__header {
+  display: block;
+  height: 3.35em;
+
+  /*
+  Note that the computed value of `em` changes for `.account`, since it
+  has a different font-size.
+  */
+  .header\\account,
+  .header\\display-name {
+    display: block;
+    border: none;  //  masto compat.
+    padding: 0;  //  masto compat.
+    max-width: none;  //  masto compat.
+    height: 1.35em;
+    overflow: hidden;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /*
+  This means that the heights of the account and display name together
+  are 2.6em.
+  */
+  .header\\account {
+    font-size: (1.25em / 1.35);  //  approx. .925em
+  }
+
+  .header\\avatar {
+    float: left;
+    margin-right: .75em;
+    width: 3.35em;
+    height: 3.35em;
+  }
+
+  .header\\display-name {
+    padding-top: .75em;
+  }
+}

app/javascript/glitch/components/status/index.js

@@ -1,339 +1,128 @@
-/*
+//  <Status>
+//  ========
 
-`<Status>`
-==========
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/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:
+//  For more information, please contact:
+//  @kibi@glitch.social
 
- -  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:
+//  Imports
+//  -------
 
- -  <StatusHeader>
- -  <StatusPrepend>
-
-…And, of course, the other <Status>-related components as well.
-
-*/
-
-                            /* * * * */
-
-/*
-
-Imports:
---------
-
-*/
-
-//  Package imports  //
-import React from 'react';
+//  Package imports.
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { defineMessages } from 'react-intl';
 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';
+//  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';
+//  Our imports.
 import StatusActionBar from './action_bar';
-import StatusGallery from './gallery';
-import StatusPlayer from './player';
-import NotificationOverlayContainer from '../notification/overlay/container';
+import StatusContent from './content';
+import StatusFooter from './footer';
+import StatusHeader from './header';
+import StatusMissing from './missing';
+import StatusNav from './nav';
+import StatusPrepend from './prepend';
+import CommonButton from 'glitch/components/common/button';
 
-                            /* * * * */
+//  Stylesheet imports.
+import './style';
 
-/*
+//  * * * * * * *  //
 
-The `<Status>` component:
--------------------------
+//  Initial setup
+//  -------------
 
-The `<Status>` component is a container for statuses. It consists of a
-few parts:
+//  Holds our localization messages.
+const messages = defineMessages({
+  detailed:
+    { id: 'status.detailed', defaultMessage: 'Detailed view' },
+});
 
- -  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.
-
-*/
+//  The component
+//  -------------
 
 export default class Status extends ImmutablePureComponent {
 
-  static contextTypes = {
-    router                      : PropTypes.object,
-  };
-
+  //  Props, and state.
   static propTypes = {
-    id                          : PropTypes.number,
-    status                      : ImmutablePropTypes.map,
-    account                     : ImmutablePropTypes.map,
-    settings                    : ImmutablePropTypes.map,
-    notification                : 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,
-  };
-
+    autoPlayGif: PropTypes.bool,
+    comrade: ImmutablePropTypes.map,
+    deleteModal: PropTypes.bool,
+    detailed: PropTypes.bool,
+    handler: PropTypes.objectOf(PropTypes.func).isRequired,
+    history: PropTypes.object,
+    index: PropTypes.number,
+    id: PropTypes.number,
+    listLength: PropTypes.number,
+    me: PropTypes.number,
+    muted: PropTypes.bool,
+    prepend: PropTypes.string,
+    reblogModal: PropTypes.bool,
+    setDetail: PropTypes.func,
+    settings: ImmutablePropTypes.map,
+    status: ImmutablePropTypes.map,
+    intersectionObserverWrapper: PropTypes.object,
+    intl : PropTypes.object,
+  }
   state = {
-    isExpanded                  : null,
-    isIntersecting              : true,
-    isHidden                    : false,
-    markedForDelete             : false,
+    isExpanded: null,
+    isIntersecting: true,
+    isHidden: false,
   }
 
-/*
+  //  Instance variables.
+  componentMounted = 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',
-    'notification',
-  ]
-
-  updateOnStates = [
-    'isExpanded',
-    'markedForDelete',
-  ]
-
-/*
-
-####  `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'])) {
-      if (this.state.isExpanded === false) {
-        this.setExpansion(null);
-      }
-    } else if (
-      nextProps.collapse !== this.props.collapse &&
-      nextProps.collapse !== undefined
-    ) this.setExpansion(nextProps.collapse ? false : null);
+  //  Prior to mounting, we fetch the status's card if this is a
+  //  detailed status and we don't already have it.
+  componentWillMount () {
+    const { detailed, handler, status } = this.props;
+    if (!status.get('card') && detailed) handler.fetchCard(status);
   }
 
-/*
-
-####  `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.
-
-*/
-
+  //  On mounting, we start up our intersection observer.
+  //  `componentMounted` tells us everything worked out OK.
   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);
-
+    const { handleIntersection, node } = this;
+    const { id, intersectionObserverWrapper } = this.props;
     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.
-
-*/
-
+  //  If the status is about to be both offscreen (not intersecting)
+  //  and hidden, then we don't bother updating unless it's not already
+  //  that way currently. Alternatively, if we're moving from offscreen
+  //  to onscreen, we *have* to re-render. As a default case we just
+  //  rely on `updateOnProps` and `updateOnStates` via the
+  //  built-in `shouldComponentUpdate()` function.
   shouldComponentUpdate (nextProps, nextState) {
     switch (true) {
     case !nextState.isIntersecting && nextState.isHidden:
-      return this.state.isIntersecting || !this.state.isHidden;
+      switch (true) {
+      case this.state.isIntersecting:
+      case !this.state.isHidden:
+      case nextProps.listLength !== this.props.listLength:
+      case nextProps.index !== this.props.index:
+        return true;
+      default:
+        return false;
+      }
     case nextState.isIntersecting && !this.state.isIntersecting:
       return true;
     default:
@@ -341,398 +130,259 @@ If neither of these cases are true, we can leave it up to our
     }
   }
 
-/*
-
-####  `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();
+  //  If our component is about to update and is detailed, we request
+  //  its card if we don't have it.
+  componentWillUpdate (nextProps) {
+    const { detailed, handler, status } = this.props;
+    if (!status.get('card') && nextProps.detailed && !detailed) {
+      handler.fetchCard(status);
+    }
   }
 
-/*
-
-####  `componentWillUnmount()`.
-
-If our component is about to unmount, then we'd better unset
-`this.componentMounted`.
-
-*/
+  //  If the component is updated for any reason we save the height.
+  componentDidUpdate () {
+    const { isHidden, isIntersecting } = this.state;
+    if (isIntersecting || !isHidden) this.saveHeight();
+  }
 
+  //  If our component is about to unmount, we'd better unset
+  //  `componentMounted` lol.
   componentWillUnmount () {
+    const { node } = this;
+    const { id, intersectionObserverWrapper } = this.props;
+    intersectionObserverWrapper.unobserve(id, node);
     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.
-
-*/
-
+  //  Doesn't quite work on Edge 15 but it gets close. This tells us if
+  //  our status is onscreen, and if not we hide it at the next
+  //  available opportunity. This isn't a huge deal (but it saves some
+  //  rendering cycles if we don't have as much DOM) so we schedule
+  //  it using `scheduleIdleTask`.
   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,
-        };
+    this.setState((prevState) => {
+      if (prevState.isIntersecting && !isIntersecting) {
+        scheduleIdleTask(this.hideIfNotIntersecting);
       }
-    );
+      return {
+        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.
-
-*/
-
+  //  Because we scheduled toot-hiding as an idle task (see above), we
+  //  *do* need to ensure that it's still not intersecting before we
+  //  hide it lol.
   hideIfNotIntersecting = () => {
     if (!this.componentMounted) return;
-    this.setState(
-      (prevState) => ({ isHidden: !prevState.isIntersecting })
-    );
+    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()` saves the status height so that we preserve its
+  //  dimensions when it's being 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` handles expanding and collapsing statuses. Note
+  //  that `isExpanded` is a *trinary* value:
   setExpansion = (value) => {
+    const { detailed } = this.props;
     switch (true) {
+
+    //  A value of `null` or `undefined` means the status should be
+    //  neither expanded or collapsed.
     case value === undefined || value === null:
       this.setState({ isExpanded: null });
       break;
-    case !value && this.props.settings.getIn(['collapsed', 'enabled']):
-      this.setState({ isExpanded: false });
+
+    //  A value of `false` means that the status should be collapsed.
+    case !value:
+      if (!detailed) this.setState({ isExpanded: false });
+      else this.setState({ isExpanded: null });  //  fallback
       break;
+
+    //  A value of `true` means that the status should be expanded.
     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.
-
-*/
-
+  //  Stores our node and saves its height.
   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 (!router) return;
-    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();
-    }
+  //  `handleClick()` handles all clicking stuff. We route links and
+  //  make our status detailed if it isn't already.
+  handleClick = (e) => {
+    const { detailed, history, id, setDetail, status } = this.props;
+    if (!history || e.button || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) return;
+    if (setDetail) setDetail(detailed ? null : id);
+    else history.push(`/statuses/${status.get('id')}`);
+    e.preventDefault();
   }
 
-/*
-
-####  `render()`.
-
-`render()` actually puts our element on the screen. The particulars of
-this operation are further explained in the code below.
-
-*/
-
+  //  Puts our element on the screen.
   render () {
     const {
-      parseClick,
-      setExpansion,
-      saveHeight,
       handleRef,
+      handleClick,
+      saveHeight,
+      setExpansion,
     } = this;
-    const { router } = this.context;
     const {
-      status,
-      account,
-      settings,
-      collapsed,
+      autoPlayGif,
+      comrade,
+      detailed,
+      handler,
+      history,
+      index,
+      intl,
+      listLength,
+      me,
       muted,
       prepend,
-      intersectionObserverWrapper,
-      onOpenVideo,
-      onOpenMedia,
-      autoPlayGif,
-      notification,
-      ...other
+      setDetail,
+      settings,
+      status,
     } = 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.
-
-*/
+    const {
+      isExpanded,
+      isHidden,
+      isIntersecting,
+    } = this.state;
+    let account = status.get('account');
+    let computedClass = 'glitch glitch__status';
+    let conditionalProps = {};
+    let selectorAttribs = {};
 
+    //  If there's no status, we can't render lol.
     if (status === null) {
-      return null;
+      return <StatusMissing />;
     }
 
-/*
+    //  Here are extra data-* attributes for use with CSS selectors.
+    //  We don't use these but users can via UserStyles.
+    selectorAttribs = {
+      'data-status-by': `@${account.get('acct')}`,
+    };
+    if (prepend && comrade) {
+      selectorAttribs[`data-${prepend === 'favourite' ? 'favourited' : 'boosted'}-by`] = `@${comrade.get('acct')}`;
+    }
 
-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 our index and list length have been set, we can set the
+    //  corresponding ARIA attributes.
+    if (isFinite(index) && isFinite(listLength)) conditionalProps = {
+      'aria-posinset': index,
+      'aria-setsize': listLength,
+    };
 
-*/
+    //  This sets our class names.
+    computedClass = classNames('glitch', 'glitch__status', {
+      _detailed: detailed,
+      _muted: muted,
+    }, `_${status.get('visibility')}`);
 
+    //  If our status is offscreen and hidden, we render an empty div.
     if (!isIntersecting && isHidden) {
       return (
-        <div
-          ref={this.handleRef}
+        <article
+          {...conditionalProps}
           data-id={status.get('id')}
+          ref={handleRef}
           style={{
-            height   : `${this.height}px`,
-            opacity  : 0,
-            overflow : 'hidden',
+            height: `${this.height}px`,
+            opacity: 0,
+            overflow: 'hidden',
+            visibility: 'hidden',
           }}
+          tabIndex='0'
         >
-          {
-            status.getIn(['account', 'display_name']) ||
-            status.getIn(['account', 'username'])
-          }
-          {status.get('content')}
-        </div>
+          <div hidden>
+            {account.get('display_name') || account.get('username')}
+            {' '}
+            {status.get('content')}
+          </div>
+        </article>
       );
     }
 
-/*
-
-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'
-          <StatusPlayer
-            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.
-
-*/
-
+    //  Otherwise, we can render our status!
     return (
       <article
-        className={
-          `status${
-            muted ? ' muted' : ''
-          } status-${status.get('visibility')}${
-            isExpanded === false ? ' collapsed' : ''
-          }${
-            isExpanded === false && background ? ' has-background' : ''
-          }${
-            this.state.markedForDelete ? ' marked-for-delete' : ''
-          }`
-        }
-        style={{
-          backgroundImage: (
-            isExpanded === false && background ?
-            `url(${background})` :
-            'none'
-          ),
-        }}
+        className={computedClass}
+        {...conditionalProps}
+        data-id={status.get('id')}
         ref={handleRef}
+        {...selectorAttribs}
+        tabIndex='0'
       >
-        {prepend && account ? (
+        {prepend && comrade ? (
           <StatusPrepend
+            comrade={comrade}
+            history={history}
             type={prepend}
-            account={account}
-            parseClick={parseClick}
-            notificationId={this.props.notificationId}
+          />
+        ) : null}
+        {setDetail ? (
+          <CommonButton
+            active={detailed}
+            className='status\detail status\button'
+            icon={detailed ? 'minus' : 'plus'}
+            onClick={handleClick}
+            title={intl.formatMessage(messages.detailed)}
           />
         ) : null}
         <StatusHeader
-          status={status}
-          friend={account}
-          mediaIcon={mediaIcon}
-          collapsible={settings.getIn(['collapsed', 'enabled'])}
-          collapsed={isExpanded === false}
-          parseClick={parseClick}
-          setExpansion={setExpansion}
+          account={account}
+          comrade={comrade}
+          history={history}
         />
         <StatusContent
-          status={status}
-          media={media}
-          mediaIcon={mediaIcon}
+          autoPlayGif={autoPlayGif}
+          detailed={detailed}
           expanded={isExpanded}
-          setExpansion={setExpansion}
+          handler={handler}
+          hideMedia={muted}
+          history={history}
+          intl={intl}
+          letterbox={settings.getIn(['media', 'letterbox'])}
+          onClick={handleClick}
           onHeightUpdate={saveHeight}
-          parseClick={parseClick}
-          disabled={!router}
+          setExpansion={setExpansion}
+          status={status}
         />
-        {isExpanded !== false ? (
-          <StatusActionBar
-            {...other}
-            status={status}
-            account={status.get('account')}
-          />
-        ) : null}
-        {notification ? (
-          <NotificationOverlayContainer
-            notification={notification}
-          />
+        <StatusFooter
+          application={status.get('application')}
+          datetime={status.get('created_at')}
+          detailed={detailed}
+          href={status.get('url')}
+          intl={intl}
+          visibility={status.get('visibility')}
+        />
+        <StatusActionBar
+          detailed={detailed}
+          handler={handler}
+          history={history}
+          intl={intl}
+          me={me}
+          status={status}
+        />
+        {detailed ? (
+          <StatusNav id={status.get('id')} intl={intl} />
         ) : null}
       </article>
     );

app/javascript/glitch/components/status/missing/index.js

@@ -0,0 +1,33 @@
+//  <StatusMissing>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/missing
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+const StatusMissing = () => (
+  <div className='glitch glitch__status__missing'>
+    <FormattedMessage id='missing_indicator.label' defaultMessage='Not found' />
+  </div>
+);
+
+export default StatusMissing;

app/javascript/glitch/components/status/nav/index.js

@@ -0,0 +1,95 @@
+//  <StatusNav>
+//  ========
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/nav
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages } from 'react-intl';
+
+//  Our imports.
+import CommonIcon from 'glitch/components/common/icon';
+import CommonLink from 'glitch/components/common/link';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Localization messages.
+const messages = defineMessages({
+  conversation:
+    { id : 'status.view_conversation', defaultMessage : 'View conversation' },
+  reblogs:
+    { id : 'status.view_reblogs', defaultMessage : 'View reblogs' },
+  favourites:
+    { id : 'status.view_favourites', defaultMessage : 'View favourites' },
+});
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+
+export default class StatusNav extends ImmutablePureComponent {
+
+  //  Props.
+  static propTypes = {
+    id: PropTypes.number.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  //  Rendering.
+  render () {
+    const { id, intl } = this.props;
+    return (
+      <nav className='glitch glitch__status__nav'>
+        <CommonLink
+          className='nav\conversation'
+          destination={`/statuses/${id}`}
+          title={intl.formatMessage(messages.conversation)}
+        >
+          <CommonIcon
+            className='nav\icon'
+            name='comments-o'
+          />
+        </CommonLink>
+        <CommonLink
+          className='nav\reblogs'
+          destination={`/statuses/${id}/reblogs`}
+          title={intl.formatMessage(messages.reblogs)}
+        >
+          <CommonIcon
+            className='nav\icon'
+            name='retweet'
+          />
+        </CommonLink>
+        <CommonLink
+          className='nav\favourites'
+          destination={`/statuses/${id}/favourites`}
+          title={intl.formatMessage(messages.favourites)}
+        >
+          <CommonIcon
+            className='nav\icon'
+            name='star'
+          />
+        </CommonLink>
+      </nav>
+    );
+  }
+
+}

app/javascript/glitch/components/status/player.js

@@ -1,203 +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 StatusPlayer extends React.PureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  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 = !this.context.router ? '' : (
-      <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>
-    );
-  }
-
-}

app/javascript/glitch/components/status/prepend.js

@@ -1,165 +0,0 @@
-/*
-
-`<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,
-    notificationId: PropTypes.number,
-  };
-
-/*
-
-###  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>
-    );
-  }
-
-}

app/javascript/glitch/components/status/prepend/index.js

@@ -0,0 +1,99 @@
+//  <StatusPrepend>
+//  ==============
+
+//  For code documentation, please see:
+//  https://glitch-soc.github.io/docs/javascript/glitch/status/header
+
+//  For more information, please contact:
+//  @kibi@glitch.social
+
+//  * * * * * * *  //
+
+//  Imports:
+//  --------
+
+//  Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage } from 'react-intl';
+
+//  Our imports.
+import CommonIcon from 'glitch/components/common/icon';
+import CommonLink from 'glitch/components/common/link';
+
+//  Stylesheet imports.
+import './style';
+
+//  * * * * * * *  //
+
+//  The component
+//  -------------
+export default class StatusPrepend extends React.PureComponent {
+
+  //  Props.
+  static propTypes = {
+    comrade: ImmutablePropTypes.map.isRequired,
+    history: PropTypes.object,
+    type: PropTypes.string.isRequired,
+  };
+
+  //  This is a quick functional React component to get the prepend
+  //  message.
+  Message = () => {
+    const { comrade, history, type } = this.props;
+    let link = (
+      <CommonLink
+        className='prepend\comrade'
+        destination={`/accounts/${comrade.get('id')}`}
+        history={history}
+        href={comrade.get('url')}
+      >
+        {comrade.get('display_name_html') || comrade.get('username')}
+      </CommonLink>
+    );
+    switch (type) {
+    case 'favourite':
+      return (
+        <FormattedMessage
+          defaultMessage='{name} favourited your status'
+          id='notification.favourite'
+          values={{ name : link }}
+        />
+      );
+    case 'reblog':
+      return (
+        <FormattedMessage
+          defaultMessage='{name} boosted your status'
+          id='notification.reblog'
+          values={{ name : link }}
+        />
+      );
+    case 'reblogged':
+      return (
+        <FormattedMessage
+          defaultMessage='{name} boosted'
+          id='status.reblogged_by'
+          values={{ name : link }}
+        />
+      );
+    }
+    return null;
+  }
+
+  //  This renders the prepend icon and the prepend message in sequence.
+  render () {
+    const { Message } = this;
+    const { type } = this.props;
+    return type ? (
+      <aside className='glitch glitch__status__prepend'>
+        <CommonIcon
+          className={`prepend\\icon prepend\\${type}`}
+          name={type === 'favourite' ? 'star' : 'retweet'}
+        />
+        <Message />
+      </aside>
+    ) : null;
+  }
+
+}

app/javascript/glitch/components/status/prepend/style.scss

@@ -0,0 +1,33 @@
+@import 'variables';
+
+.glitch.glitch__status__prepend {
+  display: block;
+  position: relative;
+  margin: 0 0 1em;
+  color: $ui-base-lighter-color;
+  padding: 0 0 0 (3.35em * .7);
+
+  .prepend\\icon {
+    display: block;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    width: (3.35em * .7);
+    height: 1.35em;
+    text-align: center;
+
+    &.prepend\\reblog,
+    &.prepend\\reblogged {
+      color: $ui-highlight-color;
+    }
+
+    &.prepend\\favourite {
+      color: $gold-star;
+    }
+  }
+
+  .prepend\\comrade {
+    color: $glitch-lighter-color;
+  }
+}

app/javascript/glitch/components/status/style.scss

@@ -0,0 +1,34 @@
+@import 'variables';
+
+.glitch.glitch__status {
+  display: block;
+  border-bottom: 1px solid $glitch-texture-color;
+  padding: (.75em * 1.35) .75em;
+  color: $ui-secondary-color;
+  font-size: medium;
+  line-height: 1.35;
+  cursor: default;
+  animation: fade 150ms linear;
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  /*
+  The detail button is styled to line up with the textual content of
+  status headers. See the `<StatusHeader>` CSS for more details on
+  their specific layout.
+  */
+  .status\\detail.status\\button {
+    float: right;
+    width: 1.35em;  //  2.6em of parent
+    height: 1.35em;  //  2.6em of parent
+    font-size: (2.6em / 1.35);  //  approx. 1.925em
+    text-align: center;
+  }
+
+  &._direct:not(._muted) {
+    background: $glitch-texture-color;
+  }
+}

app/javascript/glitch/components/status/visibility_icon.js

@@ -1,48 +0,0 @@
-//  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;
-    }
-  }
-
-}

app/javascript/glitch/locales/en.json

@@ -29,5 +29,14 @@
   "settings.navbar_under": "Navbar at the bottom (Mobile only)",
   "status.collapse": "Collapse",
   "status.uncollapse": "Uncollapse",
-  "notification.markForDeletion": "Mark for deletion"
+
+  "notification.markForDeletion": "Mark for deletion",
+  "notifications.clear": "Clear all my notifications",
+  "notifications.marked_clear_confirmation": "Are you sure you want to permanently clear all selected notifications?",
+  "notifications.marked_clear": "Clear selected notifications",
+
+  "notification_purge.btn_all": "Select\nall",
+  "notification_purge.btn_none": "Select\nnone",
+  "notification_purge.btn_invert": "Invert\nselection",
+  "notification_purge.btn_apply": "Clear\nselected"
 }

app/javascript/glitch/selectors/intl.js

@@ -0,0 +1,7 @@
+import { createStructuredSelector } from 'reselect';
+
+const makeIntlSelector = () => createStructuredSelector({
+  intl: ({ intl }) => intl,
+});
+
+export default makeIntlSelector;

app/javascript/glitch/selectors/status.js

@@ -0,0 +1,33 @@
+import { createSelector } from 'reselect';
+
+const makeStatusSelector = () => {
+  return createSelector(
+    [
+      (state, id) => state.getIn(['statuses', id]),
+      (state, id) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
+      (state, id) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
+      (state, id) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
+      (state, id) => state.getIn(['cards', id], null),
+    ],
+
+    (statusBase, statusReblog, accountBase, accountReblog, card) => {
+      if (!statusBase) {
+        return null;
+      }
+
+      if (statusReblog) {
+        statusReblog = statusReblog.set('account', accountReblog);
+      } else {
+        statusReblog = null;
+      }
+
+      return statusBase.withMutations(map => {
+        map.set('reblog', statusReblog);
+        map.set('account', accountBase);
+        map.set('card', card);
+      });
+    }
+  );
+};
+
+export default makeStatusSelector;

app/javascript/glitch/util/bio_metadata.js

@@ -74,17 +74,27 @@ functions are:
 
 \*********************************************************************/
 
+/*  "u" FLAG COMPATABILITY  */
+
+let compat_mode = false;
+try {
+  new RegExp('.', 'u');
+} catch (e) {
+  compat_mode = true;
+}
+
 /*  CONVENIENCE FUNCTIONS  */
 
-const unirex = str => new RegExp(str, 'u');
+const unirex = str => compat_mode ? new RegExp(str) : new RegExp(str, 'u');
 const rexstr = exp => '(?:' + exp.source + ')';
 
 /*  CHARACTER CLASSES  */
 
 const DOCUMENT_START    = /^/;
 const DOCUMENT_END      = /$/;
-const ALLOWED_CHAR      =  //  `c-printable` in the YAML 1.2 spec.
-  /[\t\n\r\x20-\x7e\x85\xa0-\ud7ff\ue000-\ufffd\u{10000}-\u{10FFFF}]/u;
+const ALLOWED_CHAR      =  unirex( //  `c-printable` in the YAML 1.2 spec.
+    compat_mode ? '[\t\n\r\x20-\x7e\x85\xa0-\ufffd]' : '[\t\n\r\x20-\x7e\x85\xa0-\ud7ff\ue000-\ufffd\u{10000}-\u{10FFFF}]'
+  );
 const WHITE_SPACE       = /[ \t]/;
 const INDENTATION       = / */;  //  Indentation must be only spaces.
 const LINE_BREAK        = /\r?\n|\r|<br\s*\/?>/;

app/javascript/images/index.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 39.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 313.82 155.40609 265.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="#3000d4"/><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 299.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 66.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 66.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 100.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#25FF25"/></svg>

app/javascript/mastodon/actions/notifications.js

@@ -10,6 +10,7 @@ export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
 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_MARK_ALL_FOR_DELETE = 'NOTIFICATIONS_MARK_ALL_FOR_DELETE';
 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';
@@ -210,13 +211,11 @@ export function deleteMarkedNotifications() {
     });
 
     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));
@@ -231,6 +230,13 @@ export function enterNotificationClearingMode(yes) {
   };
 };
 
+export function markAllNotifications(yes) {
+  return {
+    type: NOTIFICATIONS_MARK_ALL_FOR_DELETE,
+    yes: yes, // true, false or null. null = invert
+  };
+};
+
 export function deleteMarkedNotificationsRequest() {
   return {
     type: NOTIFICATIONS_DELETE_MARKED_REQUEST,

app/javascript/mastodon/actions/statuses.js

@@ -23,6 +23,9 @@ export const STATUS_UNMUTE_REQUEST = 'STATUS_UNMUTE_REQUEST';
 export const STATUS_UNMUTE_SUCCESS = 'STATUS_UNMUTE_SUCCESS';
 export const STATUS_UNMUTE_FAIL    = 'STATUS_UNMUTE_FAIL';
 
+export const STATUS_SET_HEIGHT = 'STATUS_SET_HEIGHT';
+export const STATUSES_CLEAR_HEIGHT = 'STATUSES_CLEAR_HEIGHT';
+
 export function fetchStatusRequest(id, skipLoading) {
   return {
     type: STATUS_FETCH_REQUEST,
@@ -215,3 +218,17 @@ export function unmuteStatusFail(id, error) {
     error,
   };
 };
+
+export function setStatusHeight (id, height) {
+  return {
+    type: STATUS_SET_HEIGHT,
+    id,
+    height,
+  };
+};
+
+export function clearStatusesHeight () {
+  return {
+    type: STATUSES_CLEAR_HEIGHT,
+  };
+};

app/javascript/mastodon/components/account.js

@@ -70,7 +70,7 @@ export default class Account extends ImmutablePureComponent {
       <div className='account'>
         <div className='account__wrapper'>
           <Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
-            <div className='account__avatar-wrapper'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div>
+            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
             <DisplayName account={account} />
           </Permalink>
 

app/javascript/mastodon/components/autosuggest_textarea.js

@@ -162,20 +162,23 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
     return (
       <div className='autosuggest-textarea'>
-        <Textarea
-          inputRef={this.setTextarea}
-          className='autosuggest-textarea__textarea'
-          disabled={disabled}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-          value={value}
-          onChange={this.onChange}
-          onKeyDown={this.onKeyDown}
-          onKeyUp={onKeyUp}
-          onBlur={this.onBlur}
-          onPaste={this.onPaste}
-          style={style}
-        />
+        <label>
+          <span style={{ display: 'none' }}>{placeholder}</span>
+          <Textarea
+            inputRef={this.setTextarea}
+            className='autosuggest-textarea__textarea'
+            disabled={disabled}
+            placeholder={placeholder}
+            autoFocus={autoFocus}
+            value={value}
+            onChange={this.onChange}
+            onKeyDown={this.onKeyDown}
+            onKeyUp={onKeyUp}
+            onBlur={this.onBlur}
+            onPaste={this.onPaste}
+            style={style}
+          />
+        </label>
 
         <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
           {suggestions.map((suggestion, i) => (

app/javascript/mastodon/components/avatar.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
 export default class Avatar extends React.PureComponent {
 
   static propTypes = {
-    src: PropTypes.string.isRequired,
-    staticSrc: PropTypes.string,
+    account: ImmutablePropTypes.map.isRequired,
     size: PropTypes.number.isRequired,
     style: PropTypes.object,
     animate: PropTypes.bool,
@@ -33,9 +33,12 @@ export default class Avatar extends React.PureComponent {
   }
 
   render () {
-    const { src, size, staticSrc, animate, inline } = this.props;
+    const { account, size, animate, inline } = this.props;
     const { hovering } = this.state;
 
+    const src = account.get('avatar');
+    const staticSrc = account.get('avatar_static');
+
     let className = 'account__avatar';
 
     if (inline) {
@@ -61,6 +64,7 @@ export default class Avatar extends React.PureComponent {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
+        data-avatar-of={`@${account.get('acct')}`}
       />
     );
   }

app/javascript/mastodon/components/avatar_overlay.js

@@ -1,28 +1,28 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
 export default class AvatarOverlay extends React.PureComponent {
 
   static propTypes = {
-    staticSrc: PropTypes.string.isRequired,
-    overlaySrc: PropTypes.string.isRequired,
+    account: ImmutablePropTypes.map.isRequired,
+    friend: ImmutablePropTypes.map.isRequired,
   };
 
   render() {
-    const { staticSrc, overlaySrc } = this.props;
+    const { account, friend } = this.props;
 
     const baseStyle = {
-      backgroundImage: `url(${staticSrc})`,
+      backgroundImage: `url(${account.get('avatar_static')})`,
     };
 
     const overlayStyle = {
-      backgroundImage: `url(${overlaySrc})`,
+      backgroundImage: `url(${friend.get('avatar_static')})`,
     };
 
     return (
       <div className='account__avatar-overlay'>
-        <div className='account__avatar-overlay-base' style={baseStyle} />
-        <div className='account__avatar-overlay-overlay' style={overlayStyle} />
+        <div className='account__avatar-overlay-base' style={baseStyle} data-avatar-of={`@${account.get('acct')}`} />
+        <div className='account__avatar-overlay-overlay' style={overlayStyle} data-avatar-of={`@${friend.get('acct')}`} />
       </div>
     );
   }

app/javascript/mastodon/components/column.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import detectPassiveEvents from 'detect-passive-events';
-import scrollTop from '../scroll';
+import { scrollTop } from '../scroll';
 
 export default class Column extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
+    extraClasses: PropTypes.string,
   };
 
   scrollTop () {
@@ -40,10 +41,10 @@ export default class Column extends React.PureComponent {
   }
 
   render () {
-    const { children } = this.props;
+    const { children, extraClasses } = this.props;
 
     return (
-      <div role='region' className='column' ref={this.setRef}>
+      <div role='region' className={`column ${extraClasses || ''}`} ref={this.setRef}>
         {children}
       </div>
     );

app/javascript/mastodon/components/column_back_button.js

@@ -19,10 +19,10 @@ export default class ColumnBackButton extends React.PureComponent {
 
   render () {
     return (
-      <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
+      <button onClick={this.handleClick} className='column-back-button'>
         <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
-      </div>
+      </button>
     );
   }
 

app/javascript/mastodon/components/column_header.js

@@ -5,11 +5,14 @@ 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';
+import NotificationPurgeButtonsContainer from 'glitch/components/list/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:' },
+  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
+  moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
+  moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
+  enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' },
 });
 
 @injectIntl
@@ -20,14 +23,17 @@ export default class ColumnHeader extends React.PureComponent {
   };
 
   static propTypes = {
+    intl: PropTypes.object.isRequired,
     title: PropTypes.node.isRequired,
     icon: PropTypes.string.isRequired,
     active: PropTypes.bool,
     localSettings : ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
+    focusable: PropTypes.bool,
     showBackButton: PropTypes.bool,
     notifCleaning: PropTypes.bool, // true only for the notification column
     notifCleaningActive: PropTypes.bool,
+    onEnterCleaningMode: PropTypes.func,
     children: PropTypes.node,
     pinned: PropTypes.bool,
     onPin: PropTypes.func,
@@ -36,9 +42,14 @@ export default class ColumnHeader extends React.PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
+  static defaultProps = {
+    focusable: true,
+  }
+
   state = {
     collapsed: true,
     animating: false,
+    animatingNCD: false,
   };
 
   handleToggleClick = (e) => {
@@ -71,16 +82,20 @@ export default class ColumnHeader extends React.PureComponent {
     this.setState({ animating: false });
   }
 
+  handleTransitionEndNCD = () => {
+    this.setState({ animatingNCD: false });
+  }
+
+  onEnterCleaningMode = () => {
+    this.setState({ animatingNCD: true });
+    this.props.onEnterCleaningMode(!this.props.notifCleaningActive);
+  }
+
   render () {
-    const { intl, icon, active, children, pinned, onPin, multiColumn, showBackButton, notifCleaning, localSettings } = this.props;
-    const { collapsed, animating } = this.state;
+    const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
+    const { collapsed, animating, animatingNCD } = 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,
@@ -99,8 +114,20 @@ export default class ColumnHeader extends React.PureComponent {
       'active': !collapsed,
     });
 
+    const notifCleaningButtonClassName = classNames('column-header__button', {
+      'active': notifCleaningActive,
+    });
+
+    const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', {
+      'collapsed': !notifCleaningActive,
+      'animating': animatingNCD,
+    });
+
     let extraContent, pinButton, moveButtons, backButton, collapseButton;
 
+    //*glitch
+    const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning);
+
     if (children) {
       extraContent = (
         <div key='extra-content' className='column-header__collapsible__extra'>
@@ -114,8 +141,8 @@ export default class ColumnHeader extends React.PureComponent {
 
       moveButtons = (
         <div key='move-buttons' className='column-header__setting-arrows'>
-          <button className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button>
-          <button className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button>
         </div>
       );
     } else if (multiColumn) {
@@ -141,23 +168,39 @@ export default class ColumnHeader extends React.PureComponent {
     }
 
     if (children || multiColumn) {
-      collapseButton = <button className={collapsibleButtonClassName} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>;
+      collapseButton = <button className={collapsibleButtonClassName} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>;
     }
 
     return (
       <div className={wrapperClassName}>
-        <div role='button heading' tabIndex='0' className={buttonClassName} onClick={this.handleTitleClick}>
+        <h1 tabIndex={focusable && '0'} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
           <i className={`fa fa-fw fa-${icon} column-header__icon`} />
           {title}
-
           <div className='column-header__buttons'>
-            {notifCleaning ? (<NotificationPurgeButtonsContainer />) : null}
             {backButton}
+            { notifCleaning ? (
+              <button
+                aria-label={msgEnterNotifCleaning}
+                title={msgEnterNotifCleaning}
+                onClick={this.onEnterCleaningMode}
+                className={notifCleaningButtonClassName}
+              >
+                <i className='fa fa-eraser' />
+              </button>
+            ) : null}
             {collapseButton}
           </div>
-        </div>
+        </h1>
 
-        <div className={collapsibleClassName} onTransitionEnd={this.handleTransitionEnd}>
+        { notifCleaning ? (
+          <div className={notifCleaningDrawerClassName} onTransitionEnd={this.handleTransitionEndNCD}>
+            <div className='column-header__collapsible-inner nopad-drawer'>
+              {(notifCleaningActive || animatingNCD) ? (<NotificationPurgeButtonsContainer />) : null }
+            </div>
+          </div>
+        ) : null}
+
+        <div className={collapsibleClassName} tabIndex={collapsed && -1} onTransitionEnd={this.handleTransitionEnd}>
           <div className='column-header__collapsible-inner'>
             {(!collapsed || animating) && collapsedContent}
           </div>

app/javascript/mastodon/components/display_name.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import escapeTextContentForBrowser from 'escape-html';
-import emojify from '../emoji';
 
 export default class DisplayName extends React.PureComponent {
 
@@ -10,12 +8,11 @@ export default class DisplayName extends React.PureComponent {
   };
 
   render () {
-    const displayName     = this.props.account.get('display_name').length === 0 ? this.props.account.get('username') : this.props.account.get('display_name');
-    const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+    const displayNameHtml = { __html: this.props.account.get('display_name_html') };
 
     return (
       <span className='display-name'>
-        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHTML} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
+        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
       </span>
     );
   }

app/javascript/mastodon/components/dropdown_menu.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
 import PropTypes from 'prop-types';
 
@@ -9,16 +10,23 @@ export default class DropdownMenu extends React.PureComponent {
   };
 
   static propTypes = {
+    isUserTouching: PropTypes.func,
+    isModalOpen: PropTypes.bool.isRequired,
+    onModalOpen: PropTypes.func,
+    onModalClose: PropTypes.func,
     icon: PropTypes.string.isRequired,
     items: PropTypes.array.isRequired,
     size: PropTypes.number.isRequired,
     direction: PropTypes.string,
+    status: ImmutablePropTypes.map,
     ariaLabel: PropTypes.string,
     disabled: PropTypes.bool,
   };
 
   static defaultProps = {
     ariaLabel: 'Menu',
+    isModalOpen: false,
+    isUserTouching: () => false,
   };
 
   state = {
@@ -34,6 +42,10 @@ export default class DropdownMenu extends React.PureComponent {
     const i = Number(e.currentTarget.getAttribute('data-index'));
     const { action, to } = this.props.items[i];
 
+    if (this.props.isModalOpen) {
+      this.props.onModalClose();
+    }
+
     // Don't call e.preventDefault() when the item uses 'href' property.
     // ex. "Edit profile" on the account action bar
 
@@ -48,10 +60,32 @@ export default class DropdownMenu extends React.PureComponent {
     this.dropdown.hide();
   }
 
-  handleShow = () => this.setState({ expanded: true })
+  handleShow = () => {
+    if (this.props.isUserTouching()) {
+      this.props.onModalOpen({
+        status: this.props.status,
+        actions: this.props.items,
+        onClick: this.handleClick,
+      });
+    } else {
+      this.setState({ expanded: true });
+    }
+  }
 
   handleHide = () => this.setState({ expanded: false })
 
+  handleToggle = (e) => {
+    if (e.key === 'Enter') {
+      if (this.props.isUserTouching()) {
+        this.handleShow();
+      } else {
+        this.setState({ expanded: !this.state.expanded });
+      }
+    } else if (e.key === 'Escape') {
+      this.setState({ expanded: false });
+    }
+  }
+
   renderItem = (item, i) => {
     if (item === null) {
       return <li key={`sep-${i}`} className='dropdown__sep' />;
@@ -61,7 +95,7 @@ export default class DropdownMenu extends React.PureComponent {
 
     return (
       <li className='dropdown__content-list-item' key={`${text}-${i}`}>
-        <a href={href} target='_blank' rel='noopener' onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'>
+        <a href={href} target='_blank' rel='noopener' role='button' tabIndex='0' autoFocus={i === 0} onClick={this.handleClick} data-index={i} className='dropdown__content-list-link'>
           {text}
         </a>
       </li>
@@ -71,6 +105,7 @@ export default class DropdownMenu extends React.PureComponent {
   render () {
     const { icon, items, size, direction, ariaLabel, disabled } = this.props;
     const { expanded }   = this.state;
+    const isUserTouching = this.props.isUserTouching();
     const directionClass = (direction === 'left') ? 'dropdown__left' : 'dropdown__right';
     const iconStyle      = { fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` };
     const iconClassname  = `fa fa-fw fa-${icon} dropdown__icon`;
@@ -84,20 +119,26 @@ export default class DropdownMenu extends React.PureComponent {
     }
 
     const dropdownItems = expanded && (
-      <ul className='dropdown__content-list'>
+      <ul role='group' className='dropdown__content-list' onClick={this.handleHide}>
         {items.map(this.renderItem)}
       </ul>
     );
 
+    // No need to render the actual dropdown if we use the modal. If we
+    // don't render anything <Dropdow /> breaks, so we just put an empty div.
+    const dropdownContent = !isUserTouching ? (
+      <DropdownContent className={directionClass} >
+        {dropdownItems}
+      </DropdownContent>
+    ) : <div />;
+
     return (
-      <Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}>
-        <DropdownTrigger className='icon-button' style={iconStyle} aria-label={ariaLabel}>
+      <Dropdown ref={this.setRef} active={isUserTouching ? false : expanded} onShow={this.handleShow} onHide={this.handleHide}>
+        <DropdownTrigger className='icon-button' style={iconStyle} role='button' aria-expanded={expanded} onKeyDown={this.handleToggle} tabIndex='0' aria-label={ariaLabel}>
           <i className={iconClassname} aria-hidden />
         </DropdownTrigger>
 
-        <DropdownContent className={directionClass}>
-          {dropdownItems}
-        </DropdownContent>
+        {dropdownContent}
       </Dropdown>
     );
   }

app/javascript/mastodon/components/icon_button.js

@@ -12,6 +12,8 @@ export default class IconButton extends React.PureComponent {
     onClick: PropTypes.func,
     size: PropTypes.number,
     active: PropTypes.bool,
+    pressed: PropTypes.bool,
+    expanded: PropTypes.bool,
     style: PropTypes.object,
     activeStyle: PropTypes.object,
     disabled: PropTypes.bool,
@@ -19,6 +21,7 @@ export default class IconButton extends React.PureComponent {
     animate: PropTypes.bool,
     flip: PropTypes.bool,
     overlay: PropTypes.bool,
+    tabIndex: PropTypes.string,
   };
 
   static defaultProps = {
@@ -27,6 +30,7 @@ export default class IconButton extends React.PureComponent {
     disabled: false,
     animate: false,
     overlay: false,
+    tabIndex: '0',
   };
 
   handleClick = (e) =>  {
@@ -74,10 +78,13 @@ export default class IconButton extends React.PureComponent {
         {({ rotate }) =>
           <button
             aria-label={this.props.title}
+            aria-pressed={this.props.pressed}
+            aria-expanded={this.props.expanded}
             title={this.props.title}
             className={classes.join(' ')}
             onClick={this.handleClick}
             style={style}
+            tabIndex={this.props.tabIndex}
           >
             <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
           </button>

app/javascript/mastodon/components/media_gallery.js

@@ -215,10 +215,10 @@ export default class MediaGallery extends React.PureComponent {
       }
 
       children = (
-        <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
+        <button 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>
+        </button>
       );
     } else {
       const size = media.take(4).size;

app/javascript/mastodon/components/setting_text.js

@@ -19,12 +19,15 @@ export default class SettingText extends React.PureComponent {
     const { settings, settingKey, label } = this.props;
 
     return (
-      <input
-        className='setting-text'
-        value={settings.getIn(settingKey)}
-        onChange={this.handleChange}
-        placeholder={label}
-      />
+      <label>
+        <span style={{ display: 'none' }}>{label}</span>
+        <input
+          className='setting-text'
+          value={settings.getIn(settingKey)}
+          onChange={this.handleChange}
+          placeholder={label}
+        />
+      </label>
     );
   }
 

app/javascript/mastodon/components/status.js

@@ -11,8 +11,6 @@ import DisplayName from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
 import { FormattedMessage } from 'react-intl';
-import emojify from '../emoji';
-import escapeTextContentForBrowser from 'escape-html';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import scheduleIdleTask from '../features/ui/util/schedule_idle_task';
 import { MediaGallery, VideoPlayer } from '../features/ui/util/async-components';
@@ -39,16 +37,18 @@ export default class Status extends ImmutablePureComponent {
     onOpenMedia: PropTypes.func,
     onOpenVideo: PropTypes.func,
     onBlock: PropTypes.func,
+    onHeightChange: PropTypes.func,
     me: PropTypes.number,
     boostModal: PropTypes.bool,
     autoPlayGif: PropTypes.bool,
     muted: PropTypes.bool,
     intersectionObserverWrapper: PropTypes.object,
+    index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    listLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   };
 
   state = {
     isExpanded: false,
-    isIntersecting: true, // assume intersecting until told otherwise
     isHidden: false, // set to true in requestIdleCallback to trigger un-render
   }
 
@@ -62,6 +62,7 @@ export default class Status extends ImmutablePureComponent {
     'boostModal',
     'autoPlayGif',
     'muted',
+    'listLength',
   ]
 
   updateOnStates = ['isExpanded']
@@ -70,8 +71,8 @@ export default class Status extends ImmutablePureComponent {
     if (!nextState.isIntersecting && nextState.isHidden) {
       // It's only if we're not intersecting (i.e. offscreen) and isHidden is true
       // that either "isIntersecting" or "isHidden" matter, and then they're
-      // the only things that matter.
-      return this.state.isIntersecting || !this.state.isHidden;
+      // the only things that matter (and updated ARIA attributes).
+      return this.state.isIntersecting || !this.state.isHidden || nextProps.listLength !== this.props.listLength;
     } else if (nextState.isIntersecting && !this.state.isIntersecting) {
       // If we're going from a non-intersecting state to an intersecting state,
       // (i.e. offscreen to onscreen), then we definitely need to re-render
@@ -108,19 +109,18 @@ export default class Status extends ImmutablePureComponent {
     if (this.node && this.node.children.length !== 0) {
       // save the height of the fully-rendered element
       this.height = getRectFromEntry(entry).height;
+
+      if (this.props.onHeightChange) {
+        this.props.onHeightChange(this.props.status, this.height);
+      }
     }
 
-    // Edge 15 doesn't support isIntersecting, but we can infer it
-    // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/
-    // https://github.com/WICG/IntersectionObserver/issues/211
-    const isIntersecting = (typeof entry.isIntersecting === 'boolean') ?
-      entry.isIntersecting : entry.intersectionRect.height > 0;
     this.setState((prevState) => {
-      if (prevState.isIntersecting && !isIntersecting) {
+      if (prevState.isIntersecting && !entry.isIntersecting) {
         scheduleIdleTask(this.hideIfNotIntersecting);
       }
       return {
-        isIntersecting: isIntersecting,
+        isIntersecting: entry.isIntersecting,
         isHidden: false,
       };
     });
@@ -177,40 +177,38 @@ export default class Status extends ImmutablePureComponent {
 
     // Exclude intersectionObserverWrapper from `other` variable
     // because intersection is managed in here.
-    const { status, account, intersectionObserverWrapper, ...other } = this.props;
+    const { status, account, intersectionObserverWrapper, index, listLength, wrapped, ...other } = this.props;
     const { isExpanded, isIntersecting, isHidden } = this.state;
 
     if (status === null) {
       return null;
     }
 
-    if (!isIntersecting && isHidden) {
+    const hasIntersectionObserverWrapper = !!this.props.intersectionObserverWrapper;
+    const isHiddenForSure = isIntersecting === false && isHidden;
+    const visibilityUnknownButHeightIsCached = isIntersecting === undefined && status.has('height');
+
+    if (hasIntersectionObserverWrapper && (isHiddenForSure || visibilityUnknownButHeightIsCached)) {
       return (
-        <div ref={this.handleRef} data-id={status.get('id')} style={{ height: `${this.height}px`, opacity: 0, overflow: 'hidden' }}>
+        <article ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength} tabIndex='0' style={{ height: `${this.height || status.get('height')}px`, opacity: 0, overflow: 'hidden' }}>
           {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
           {status.get('content')}
-        </div>
+        </article>
       );
     }
 
     if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
-      let displayName = status.getIn(['account', 'display_name']);
-
-      if (displayName.length === 0) {
-        displayName = status.getIn(['account', 'username']);
-      }
-
-      const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+      const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
 
       return (
-        <div className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} >
+        <article className='status__wrapper' ref={this.handleRef} data-id={status.get('id')} aria-posinset={index} aria-setsize={listLength} tabIndex='0'>
           <div className='status__prepend'>
             <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
-            <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
+            <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={display_name_html} /></a> }} />
           </div>
 
           <Status {...other} wrapped status={status.get('reblog')} account={status.get('account')} />
-        </div>
+        </article>
       );
     }
 
@@ -233,13 +231,13 @@ export default class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />;
+      statusAvatar = <Avatar account={status.get('account')} size={48} />;
     }else{
-      statusAvatar = <AvatarOverlay staticSrc={status.getIn(['account', 'avatar_static'])} overlaySrc={account.get('avatar_static')} />;
+      statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
 
     return (
-      <div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`} data-id={status.get('id')} ref={this.handleRef}>
+      <article aria-posinset={index} aria-setsize={listLength} className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')}`} data-id={status.get('id')} tabIndex={wrapped ? null : '0'}  ref={this.handleRef}>
         <div className='status__info'>
           <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
 
@@ -257,7 +255,7 @@ export default class Status extends ImmutablePureComponent {
         {media}
 
         <StatusActionBar {...this.props} />
-      </div>
+      </article>
     );
   }
 

app/javascript/mastodon/components/status_action_bar.js

@@ -5,7 +5,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import IconButton from './icon_button';
-import DropdownMenu from './dropdown_menu';
+import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -154,12 +154,12 @@ export default class StatusActionBar extends ImmutablePureComponent {
     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 || reblogDisabled} active={status.get('reblogged')} pressed={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')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
         {shareButton}
 
         <div className='status__action-bar-dropdown'>
-          <DropdownMenu disabled={anonymousAccess} items={menu} 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>
       </div>
     );

app/javascript/mastodon/components/status_content.js

@@ -3,9 +3,7 @@
 
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import escapeTextContentForBrowser from 'escape-html';
 import PropTypes from 'prop-types';
-import emojify from '../emoji';
 import { isRtl } from '../rtl';
 import { FormattedMessage } from 'react-intl';
 import Permalink from './permalink';
@@ -122,8 +120,8 @@ export default class StatusContent extends React.PureComponent {
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
-    const content = { __html: emojify(status.get('content')) };
-    const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };
+    const content = { __html: status.get('contentHtml') };
+    const spoilerContent = { __html: status.get('spoilerHtml') };
     const directionStyle = { direction: 'ltr' };
     const classNames = classnames('status__content', {
       'status__content--with-action': this.props.onClick && this.context.router,
@@ -149,7 +147,7 @@ export default class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <div className={classNames} ref={this.setRef} tabIndex='0' aria-label={status.get('search_index')} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}
@@ -158,13 +156,15 @@ export default class StatusContent extends React.PureComponent {
 
           {mentionsPlaceholder}
 
-          <div className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} />
+          <div tabIndex={!hidden && 0} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} />
         </div>
       );
     } else if (this.props.onClick) {
       return (
         <div
           ref={this.setRef}
+          tabIndex='0'
+          aria-label={status.get('search_index')}
           className={classNames}
           style={directionStyle}
           onMouseDown={this.handleMouseDown}
@@ -175,6 +175,8 @@ export default class StatusContent extends React.PureComponent {
     } else {
       return (
         <div
+          tabIndex='0'
+          aria-label={status.get('search_index')}
           ref={this.setRef}
           className='status__content'
           style={directionStyle}