fix wrong name in extension route

This is in line with cwebber's proposal at
https://github.com/swicg/general/issues/22

.env.production.sample

@@ -26,7 +26,7 @@ LOCAL_HTTPS=true
 # ALTERNATE_DOMAINS=example1.com,example2.com
 
 # Application secrets
-# Generate each with the `rake secret` task (`docker-compose run --rm web rake secret` if you use docker compose)
+# Generate each with the `RAILS_ENV=production bundle exec rake secret` task (`docker-compose run --rm web rake secret` if you use docker compose)
 PAPERCLIP_SECRET=
 SECRET_KEY_BASE=
 OTP_SECRET=
@@ -36,7 +36,7 @@ OTP_SECRET=
 # You should only generate this once per instance. If you later decide to change it, all push subscription will
 # be invalidated, requiring the users to access the website again to resubscribe.
 #
-# Generate with `rake mastodon:webpush:generate_vapid_key` task (`docker-compose run --rm web rake mastodon:webpush:generate_vapid_key` if you use docker compose)
+# Generate with `RAILS_ENV=production bundle exec rake mastodon:webpush:generate_vapid_key` task (`docker-compose run --rm web rake mastodon:webpush:generate_vapid_key` if you use docker compose)
 #
 # For more information visit https://rossta.net/blog/using-the-web-push-api-with-vapid.html
 VAPID_PRIVATE_KEY=
@@ -98,6 +98,15 @@ SMTP_FROM_ADDRESS=notifications@example.com
 # S3_ENDPOINT=
 # S3_SIGNATURE_VERSION=
 
+# Swift (optional)
+# SWIFT_ENABLED=true
+# SWIFT_USERNAME=
+# SWIFT_TENANT=
+# SWIFT_PASSWORD=
+# SWIFT_AUTH_URL=
+# SWIFT_CONTAINER=
+# SWIFT_OBJECT_URL=
+
 # Optional alias for S3 if you want to use Cloudfront or Cloudflare in front
 # S3_CLOUDFRONT_HOST=
 

CONTRIBUTING.md

@@ -1,3 +1,36 @@
+#  Contributing to Mastodon Glitch Edition  #
+
+Thank you for your interest in contributing to the `glitch-soc` project!
+Here are some guidelines, and ways you can help.
+
+>   (This document is a bit of a work-in-progress, so please bear with us.
+>   If you don't see what you're looking for here, please don't hesitate to reach out!)
+
+##  Planning  ##
+
+Right now a lot of the planning for this project takes place in our development Discord, or through GitHub Issues and Projects.
+We're working on ways to improve the planning structure and better solicit feedback, and if you feel like you can help in this respect, feel free to give us a holler.
+
+##  Documentation  ##
+
+The documentation for this repository is available at [`glitch-soc/docs`](https://github.com/glitch-soc/docs) (online at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/)).
+Right now, we've mostly focused on the features that make this fork different from upstream in some manner.
+Adding screenshots, improving descriptions, and so forth are all ways to help contribute to the project even if you don't know any code.
+
+##  Frontend Development  ##
+
+Check out [the documentation here](https://glitch-soc.github.io/docs/contributing/frontend/) for more information.
+
+##  Backend Development  ##
+
+See the guidelines below.
+
+ - - -
+
+You should also try to follow the guidelines set out in the original `CONTRIBUTING.md` from `tootsuite/mastodon`, reproduced below.
+
+<blockquote>
+
 CONTRIBUTING
 ============
 
@@ -49,3 +82,5 @@ It is expected that you have a working development environment set up (see back-
 * If you are introducing new strings, they must be using localization methods
 
 If the JavaScript or CSS assets won't compile due to a syntax error, it's a good sign that the pull request isn't ready for submission yet.
+
+</blockquote>

Gemfile

@@ -15,6 +15,7 @@ gem 'pghero', '~> 1.7'
 gem 'dotenv-rails', '~> 2.2'
 
 gem 'aws-sdk', '~> 2.9'
+gem 'fog-openstack', '~> 0.1'
 gem 'paperclip', '~> 5.1'
 gem 'paperclip-av-transcoder', '~> 0.6'
 
@@ -23,6 +24,7 @@ gem 'addressable', '~> 2.5'
 gem 'bootsnap'
 gem 'browser'
 gem 'charlock_holmes', '~> 0.7.5'
+gem 'iso-639'
 gem 'cld3', '~> 3.1'
 gem 'devise', '~> 4.2'
 gem 'devise-two-factor', '~> 3.0'

Gemfile.lock

@@ -154,12 +154,25 @@ GEM
     erubis (2.7.0)
     et-orbi (1.0.5)
       tzinfo
+    excon (0.58.0)
     execjs (2.7.0)
     fabrication (2.16.2)
     faker (1.7.3)
       i18n (~> 0.5)
     fast_blank (1.0.0)
     ffi (1.9.18)
+    fog-core (1.45.0)
+      builder
+      excon (~> 0.58)
+      formatador (~> 0.2)
+    fog-json (1.0.2)
+      fog-core (~> 1.0)
+      multi_json (~> 1.10)
+    fog-openstack (0.1.21)
+      fog-core (>= 1.40)
+      fog-json (>= 1.0)
+      ipaddress (>= 0.8)
+    formatador (0.2.5)
     fuubar (2.2.0)
       rspec-core (~> 3.0)
       ruby-progressbar (~> 1.4)
@@ -211,6 +224,8 @@ GEM
       rainbow (~> 2.2)
       terminal-table (>= 1.5.1)
     idn-ruby (0.1.0)
+    ipaddress (0.8.3)
+    iso-639 (0.2.8)
     jmespath (1.3.1)
     json (2.1.0)
     json-ld (2.1.5)
@@ -535,6 +550,7 @@ DEPENDENCIES
   fabrication (~> 2.16)
   faker (~> 1.7)
   fast_blank (~> 1.0)
+  fog-openstack (~> 0.1)
   fuubar (~> 2.2)
   goldfinger (~> 2.0)
   hamlit-rails (~> 0.2)
@@ -545,6 +561,7 @@ DEPENDENCIES
   httplog (~> 0.99)
   i18n-tasks (~> 0.9)
   idn-ruby
+  iso-639
   json-ld-preloaded (~> 2.2.1)
   kaminari (~> 1.0)
   letter_opener (~> 1.4)

README.md

@@ -1,70 +1,10 @@
-![Mastodon](https://i.imgur.com/NhZc40l.png)
-========
+#  Mastodon Glitch Edition  #
 
-[![Build Status](http://img.shields.io/travis/tootsuite/mastodon.svg)][travis]
-[![Code Climate](https://img.shields.io/codeclimate/github/tootsuite/mastodon.svg)][code_climate]
+>   Now with automated deploys!
 
-[travis]: https://travis-ci.org/tootsuite/mastodon
-[code_climate]: https://codeclimate.com/github/tootsuite/mastodon
+[![Build Status](https://travis-ci.org/glitch-soc/mastodon.svg?branch=master)](https://travis-ci.org/glitch-soc/mastodon)
 
-Mastodon is a free, open-source social network server. A decentralized solution to commercial platforms, it avoids the risks of a single company monopolizing your communication. Anyone can run Mastodon and participate in the social network seamlessly.
+So here's the deal: we all work on this code, and then it runs on dev.glitch.social and anyone who uses that does so absolutely at their own risk. can you dig it?
 
-An alternative implementation of the GNU social project. Based on [ActivityStreams](https://en.wikipedia.org/wiki/Activity_Streams_(format)), [Webfinger](https://en.wikipedia.org/wiki/WebFinger), [WebSub](https://en.wikipedia.org/wiki/WebSub) and [Salmon](https://en.wikipedia.org/wiki/Salmon_(protocol)).
-
-Click on the screenshot to watch a demo of the UI:
-
-[![Screenshot](https://i.imgur.com/pG3Nnz3.jpg)][youtube_demo]
-
-[youtube_demo]: https://www.youtube.com/watch?v=YO1jQ8_rAMU
-
-The project focus is a clean REST API and a good user interface. Ruby on Rails is used for the back-end, while React.js and Redux are used for the dynamic front-end. A static front-end for public resources (profiles and statuses) is also provided.
-
-If you would like, you can [support the development of this project on Patreon][patreon]. Alternatively, you can donate to this BTC address: `17j2g7vpgHhLuXhN4bueZFCvdxxieyRVWd`
-
-[patreon]: https://www.patreon.com/user?u=619786
-
-## Resources
-
-- [List of Mastodon instances](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/List-of-Mastodon-instances.md)
-- [Use this tool to find Twitter friends on Mastodon](https://mastodon-bridge.herokuapp.com)
-- [API overview](https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md)
-- [Frequently Asked Questions](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md)
-- [List of apps](https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md)
-
-## Features
-
-- **Fully interoperable with GNU social and any OStatus platform**
-  Whatever implements Atom feeds, ActivityStreams, Salmon, WebSub and Webfinger is part of the network
-- **Real-time timeline updates**
-  See the updates of people you're following appear in real-time in the UI via WebSockets
-- **Federated thread resolving**
-  If someone you follow replies to a user unknown to the server, the server fetches the full thread so you can view it without leaving the UI
-- **Media attachments like images and WebM**
-  Upload and view images and WebM videos attached to the updates
-- **OAuth2 and a straightforward REST API**
-  Mastodon acts as an OAuth2 provider so 3rd party apps can use the API, which is RESTful and simple
-- **Background processing for long-running tasks**
-  Mastodon tries to be as fast and responsive as possible, so all long-running tasks that can be delegated to background processing, are
-- **Deployable via Docker**
-  You don't need to mess with dependencies and configuration if you want to try Mastodon, if you have Docker and Docker Compose the deployment is extremely easy
-  
-## Development
-
-Please follow the [development guide](https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Development-guide.md) from the documentation repository.
-
-## Deployment
-
-There are guides in the documentation repository for [deploying on various platforms](https://github.com/tootsuite/documentation#running-mastodon).
-
-## Contributing
-
-You can open issues for bugs you've found or features you think are missing. You can also submit pull requests to this repository. [Here are the guidelines for code contributions](CONTRIBUTING.md)
-
-**IRC channel**: #mastodon on irc.freenode.net
-
-## Extra credits
-
-- The [Emoji One](https://github.com/Ranks/emojione) pack has been used for the emojis
-- The error page image courtesy of [Dopatwo](https://www.youtube.com/user/dopatwo)
-
-![Mastodon error image](https://mastodon.social/oops.png)
+- 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/controllers/accounts_controller.rb

@@ -14,7 +14,7 @@ class AccountsController < ApplicationController
           return
         end
 
-        @pinned_statuses = cache_collection(@account.pinned_statuses, Status) unless media_requested?
+        @pinned_statuses = cache_collection(@account.pinned_statuses, Status) if show_pinned_statuses?
         @statuses        = filtered_statuses.paginate_by_max_id(20, params[:max_id], params[:since_id])
         @statuses        = cache_collection(@statuses, Status)
         @next_url        = next_url unless @statuses.empty?
@@ -22,7 +22,7 @@ class AccountsController < ApplicationController
 
       format.atom do
         @entries = @account.stream_entries.where(hidden: false).with_includes.paginate_by_max_id(20, params[:max_id], params[:since_id])
-        render xml: OStatus::AtomSerializer.render(OStatus::AtomSerializer.new.feed(@account, @entries.to_a))
+        render xml: OStatus::AtomSerializer.render(OStatus::AtomSerializer.new.feed(@account, @entries.reject { |entry| entry.status.nil? }))
       end
 
       format.json do
@@ -33,6 +33,10 @@ class AccountsController < ApplicationController
 
   private
 
+  def show_pinned_statuses?
+    [replies_requested?, media_requested?, params[:max_id].present?, params[:since_id].present?].none?
+  end
+
   def filtered_statuses
     default_statuses.tap do |statuses|
       statuses.merge!(only_media_scope) if media_requested?

app/controllers/activitypub/inboxes_controller.rb

@@ -26,8 +26,12 @@ class ActivityPub::InboxesController < Api::BaseController
   end
 
   def upgrade_account
-    return unless signed_request_account.subscribed?
-    Pubsubhubbub::UnsubscribeWorker.perform_async(signed_request_account.id)
+    if signed_request_account.ostatus?
+      signed_request_account.update(last_webfingered_at: nil)
+      ResolveRemoteAccountWorker.perform_async(signed_request_account.acct)
+    end
+
+    Pubsubhubbub::UnsubscribeWorker.perform_async(signed_request_account.id) if signed_request_account.subscribed?
   end
 
   def process_payload

app/controllers/admin/settings_controller.rb

@@ -13,6 +13,7 @@ module Admin
       closed_registrations_message
       open_deletion
       timeline_preview
+      bootstrap_timeline_accounts
     ).freeze
 
     BOOLEAN_SETTINGS = %w(

app/controllers/api/v1/accounts_controller.rb

@@ -14,7 +14,10 @@ class Api::V1::AccountsController < Api::BaseController
 
   def follow
     FollowService.new.call(current_user.account, @account.acct)
-    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships
+
+    options = @account.locked? ? {} : { following_map: { @account.id => true }, requested_map: { @account.id => false } }
+
+    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships(options)
   end
 
   def block
@@ -23,7 +26,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def mute
-    MuteService.new.call(current_user.account, @account)
+    MuteService.new.call(current_user.account, @account, notifications: params[:notifications])
     render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships
   end
 
@@ -48,7 +51,7 @@ class Api::V1::AccountsController < Api::BaseController
     @account = Account.find(params[:id])
   end
 
-  def relationships
-    AccountRelationshipsPresenter.new([@account.id], current_user.account_id)
+  def relationships(options = {})
+    AccountRelationshipsPresenter.new([@account.id], current_user.account_id, options)
   end
 end

app/controllers/api/v1/extensions_controller.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+require 'mastodon/extension'
+
+class Api::V1::ExtensionsController < Api::BaseController
+  def index
+    render json: Mastodon::Extension.all
+  end
+end

app/controllers/api/v1/follows_controller.rb

@@ -10,6 +10,12 @@ class Api::V1::FollowsController < Api::BaseController
     raise ActiveRecord::RecordNotFound if follow_params[:uri].blank?
 
     @account = FollowService.new.call(current_user.account, target_uri).try(:target_account)
+
+    if @account.nil?
+      username, domain = target_uri.split('@')
+      @account         = Account.find_remote!(username, domain)
+    end
+
     render json: @account, serializer: REST::AccountSerializer
   end
 

app/controllers/api/v1/mutes_controller.rb

@@ -8,10 +8,15 @@ class Api::V1::MutesController < Api::BaseController
   respond_to :json
 
   def index
-    @accounts = load_accounts
+    @data = @accounts = load_accounts
     render json: @accounts, each_serializer: REST::AccountSerializer
   end
 
+  def details
+    @data = @mutes = load_mutes
+    render json: @mutes, each_serializer: REST::MuteSerializer
+  end 
+
   private
 
   def load_accounts
@@ -22,6 +27,10 @@ class Api::V1::MutesController < Api::BaseController
     Account.includes(:muted_by).references(:muted_by)
   end
 
+  def load_mutes
+    paginated_mutes.includes(:account, :target_account).to_a
+  end
+
   def paginated_mutes
     Mute.where(account: current_account).paginate_by_max_id(
       limit_param(DEFAULT_ACCOUNTS_LIMIT),
@@ -36,26 +45,34 @@ class Api::V1::MutesController < Api::BaseController
 
   def next_path
     if records_continue?
-      api_v1_mutes_url pagination_params(max_id: pagination_max_id)
+      url_for pagination_params(max_id: pagination_max_id)
     end
   end
 
   def prev_path
-    unless @accounts.empty?
-      api_v1_mutes_url pagination_params(since_id: pagination_since_id)
+    unless@data.empty?
+      url_for pagination_params(since_id: pagination_since_id)
     end
   end
 
   def pagination_max_id
-    @accounts.last.muted_by_ids.last
+    if params[:action] == "details"
+      @mutes.last.id
+    else
+      @accounts.last.muted_by_ids.last
+    end
   end
 
   def pagination_since_id
-    @accounts.first.muted_by_ids.first
+    if params[:action] == "details"
+      @mutes.first.id
+    else
+      @accounts.first.muted_by_ids.first
+    end
   end
 
   def records_continue?
-    @accounts.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
+    @data.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
   end
 
   def pagination_params(core_params)

app/controllers/api/v1/notifications_controller.rb

@@ -24,11 +24,20 @@ class Api::V1::NotificationsController < Api::BaseController
     render_empty
   end
 
+  def destroy
+    dismiss
+  end
+
   def dismiss
     current_account.notifications.find_by!(id: params[:id]).destroy!
     render_empty
   end
 
+  def destroy_multiple
+    current_account.notifications.where(id: params[:ids]).destroy_all
+    render_empty
+  end
+
   private
 
   def load_notifications

app/controllers/api/v1/search_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::SearchController < Api::BaseController
-  RESULTS_LIMIT = 5
+  RESULTS_LIMIT = 10
 
   before_action -> { doorkeeper_authorize! :read }
   before_action :require_user!

app/controllers/auth/confirmations_controller.rb

@@ -2,4 +2,10 @@
 
 class Auth::ConfirmationsController < Devise::ConfirmationsController
   layout 'auth'
+
+  def show
+    super do |user|
+      BootstrapTimelineWorker.perform_async(user.account_id) if user.errors.empty?
+    end
+  end
 end

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/helpers/routing_helper.rb

@@ -12,8 +12,14 @@ module RoutingHelper
   end
 
   def full_asset_url(source, options = {})
-    source = ActionController::Base.helpers.asset_url(source, options) unless Rails.configuration.x.use_s3
+    source = ActionController::Base.helpers.asset_url(source, options) unless use_storage?
 
     URI.join(root_url, source).to_s
   end
+
+  private
+
+  def use_storage?
+    Rails.configuration.x.use_s3 || Rails.configuration.x.use_swift
+  end
 end

app/helpers/settings_helper.rb

@@ -30,6 +30,7 @@ module SettingsHelper
     th: 'ภาษาไทย',
     tr: 'Türkçe',
     uk: 'Українська',
+    zh: '中文',
     'zh-CN': '简体中文',
     'zh-HK': '繁體中文（香港）',
     'zh-TW': '繁體中文（臺灣）',
@@ -39,6 +40,10 @@ module SettingsHelper
     HUMAN_LOCALES[locale]
   end
 
+  def filterable_languages
+    I18n.available_locales.map { |locale| locale.to_s.split('-').first.to_sym }.uniq
+  end
+
   def hash_to_object(hash)
     HashObject.new(hash)
   end

app/javascript/glitch/actions/local_settings.js

@@ -0,0 +1,93 @@
+/*
+
+`actions/local_settings`
+========================
+
+>   For more information on the contents of this file, please contact:
+>
+>   - kibigo! [@kibi@glitch.social]
+
+This file provides our Redux actions related to local settings. It
+consists of the following:
+
+ -  __`changesLocalSetting(key, value)` :__
+    Changes the local setting with the given `key` to the given
+    `value`. `key` **MUST** be an array of strings, as required by
+    `Immutable.Map.prototype.getIn()`.
+
+ -  __`saveLocalSettings()` :__
+    Saves the local settings to `localStorage` as a JSON object. We
+    shouldn't ever need to call this ourselves.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Constants:
+----------
+
+We provide the following constants:
+
+ -  __`LOCAL_SETTING_CHANGE` :__
+    This string constant is used to dispatch a setting change to our
+    reducer in `reducers/local_settings`, where the setting is
+    actually changed.
+
+*/
+
+export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+`changeLocalSetting(key, value)`:
+---------------------------------
+
+Changes the local setting with the given `key` to the given `value`.
+`key` **MUST** be an array of strings, as required by
+`Immutable.Map.prototype.getIn()`.
+
+To accomplish this, we just dispatch a `LOCAL_SETTING_CHANGE` to our
+reducer in `reducers/local_settings`.
+
+*/
+
+export function changeLocalSetting(key, value) {
+  return dispatch => {
+    dispatch({
+      type: LOCAL_SETTING_CHANGE,
+      key,
+      value,
+    });
+
+    dispatch(saveLocalSettings());
+  };
+};
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+`saveLocalSettings()`:
+----------------------
+
+Saves the local settings to `localStorage` as a JSON object.
+`changeLocalSetting()` calls this whenever it changes a setting. We
+shouldn't ever need to call this ourselves.
+
+>   __TODO :__
+>   Right now `saveLocalSettings()` doesn't keep track of which user
+>   is currently signed in, but it might be better to give each user
+>   their *own* local settings.
+
+*/
+
+export function saveLocalSettings() {
+  return (_, getState) => {
+    const localSettings = getState().get('local_settings').toJS();
+    localStorage.setItem('mastodon-settings', JSON.stringify(localSettings));
+  };
+};

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

@@ -0,0 +1,237 @@
+/*
+
+`<AccountHeader>`
+=================
+
+>   For more information on the contents of this file, please contact:
+>
+>   - kibigo! [@kibi@glitch.social]
+
+Original file by @gargron@mastodon.social et al as part of
+tootsuite/mastodon. We've expanded it in order to handle user bio
+frontmatter.
+
+The `<AccountHeader>` component provides the header for account
+timelines. It is a fairly simple component which mostly just consists
+of a `render()` method.
+
+__Props:__
+
+ -  __`account` (`ImmutablePropTypes.map`) :__
+    The account to render a header for.
+
+ -  __`me` (`PropTypes.number.isRequired`) :__
+    The id of the currently-signed-in account.
+
+ -  __`onFollow` (`PropTypes.func.isRequired`) :__
+    The function to call when the user clicks the "follow" button.
+
+ -  __`intl` (`PropTypes.object.isRequired`) :__
+    Our internationalization object, inserted by `@injectIntl`.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import escapeTextContentForBrowser from 'escape-html';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+import emojify from '../../../mastodon/emoji';
+import IconButton from '../../../mastodon/components/icon_button';
+import Avatar from '../../../mastodon/components/avatar';
+
+//  Our imports  //
+import { processBio } from '../../util/bio_metadata';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Inital setup:
+-------------
+
+The `messages` constant is used to define any messages that we need
+from inside props. In our case, these are the `unfollow`, `follow`, and
+`requested` messages used in the `title` of our buttons.
+
+*/
+
+const messages = defineMessages({
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
+});
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Implementation:
+---------------
+
+*/
+
+@injectIntl
+export default class AccountHeader extends ImmutablePureComponent {
+
+  static propTypes = {
+    account  : ImmutablePropTypes.map,
+    me       : PropTypes.number.isRequired,
+    onFollow : PropTypes.func.isRequired,
+    intl     : PropTypes.object.isRequired,
+  };
+
+/*
+
+###  `render()`
+
+The `render()` function is used to render our component.
+
+*/
+
+  render () {
+    const { account, me, intl } = this.props;
+
+/*
+
+If no `account` is provided, then we can't render a header. Otherwise,
+we get the `displayName` for the account, if available. If it's blank,
+then we set the `displayName` to just be the `username` of the account.
+
+*/
+
+    if (!account) {
+      return null;
+    }
+
+    let displayName = account.get('display_name');
+    let info        = '';
+    let actionBtn   = '';
+    let following   = false;
+
+    if (displayName.length === 0) {
+      displayName = account.get('username');
+    }
+
+/*
+
+Next, we handle the account relationships. If the account follows the
+user, then we add an `info` message. If the user has requested a
+follow, then we disable the `actionBtn` and display an hourglass.
+Otherwise, if the account isn't blocked, we set the `actionBtn` to the
+appropriate icon.
+
+*/
+
+    if (me !== account.get('id')) {
+      if (account.getIn(['relationship', 'followed_by'])) {
+        info = (
+          <span className='account--follows-info'>
+            <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
+          </span>
+        );
+      }
+      if (account.getIn(['relationship', 'requested'])) {
+        actionBtn = (
+          <div className='account--action-button'>
+            <IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />
+          </div>
+        );
+      } else if (!account.getIn(['relationship', 'blocking'])) {
+        following = account.getIn(['relationship', 'following']);
+        actionBtn = (
+          <div className='account--action-button'>
+            <IconButton
+              size={26}
+              icon={following ? 'user-times' : 'user-plus'}
+              active={following}
+              title={intl.formatMessage(following ? messages.unfollow : messages.follow)}
+              onClick={this.props.onFollow}
+            />
+          </div>
+        );
+      }
+    }
+
+/*
+
+`displayNameHTML` processes the `displayName` and prepares it for
+insertion into the document. Meanwhile, we extract the `text` and
+`metadata` from our account's `note` using `processBio()`.
+
+*/
+
+    const displayNameHTML    = {
+      __html : emojify(escapeTextContentForBrowser(displayName)),
+    };
+    const { text, metadata } = processBio(account.get('note'));
+
+/*
+
+Here, we render our component using all the things we've defined above.
+
+*/
+
+    return (
+      <div className='account__header__wrapper'>
+        <div
+          className='account__header'
+          style={{ backgroundImage: `url(${account.get('header')})` }}
+        >
+          <div>
+            <a href={account.get('url')} target='_blank' rel='noopener'>
+              <span className='account__header__avatar'>
+                <Avatar account={account} size={90} />
+              </span>
+              <span
+                className='account__header__display-name'
+                dangerouslySetInnerHTML={displayNameHTML}
+              />
+            </a>
+            <span className='account__header__username'>
+              @{account.get('acct')}
+              {account.get('locked') ? <i className='fa fa-lock' /> : null}
+            </span>
+            <div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
+
+            {info}
+            {actionBtn}
+          </div>
+        </div>
+
+        {metadata.length && (
+          <table className='account__metadata'>
+            <tbody>
+              {(() => {
+                let data = [];
+                for (let i = 0; i < metadata.length; i++) {
+                  data.push(
+                    <tr key={i}>
+                      <th scope='row'><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][0]) }} /></th>
+                      <td><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][1]) }} /></td>
+                    </tr>
+                  );
+                }
+                return data;
+              })()}
+            </tbody>
+          </table>
+        ) || null}
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/column/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/column/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/compose/advanced_options/container.js

@@ -0,0 +1,66 @@
+/*
+
+`<ComposeAdvancedOptionsContainer>`
+===================================
+
+This container connects `<ComposeAdvancedOptions>` to the Redux store.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Mastodon imports  //
+import { toggleComposeAdvancedOption } from '../../../../mastodon/actions/compose';
+
+//  Our imports  //
+import ComposeAdvancedOptions from '.';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+State mapping:
+--------------
+
+The `mapStateToProps()` function maps various state properties to the
+props of our component. The only property we care about is
+`compose.advanced_options`.
+
+*/
+
+const mapStateToProps = state => ({
+  values: state.getIn(['compose', 'advanced_options']),
+});
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Dispatch mapping:
+-----------------
+
+The `mapDispatchToProps()` function maps dispatches to our store to the
+various props of our component. We just need to provide a dispatch for
+when an advanced option toggle changes.
+
+*/
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (option) {
+    dispatch(toggleComposeAdvancedOption(option));
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeAdvancedOptions);

app/javascript/glitch/components/compose/advanced_options/index.js

@@ -0,0 +1,241 @@
+/*
+
+`<ComposeAdvancedOptions>`
+==========================
+
+>   For more information on the contents of this file, please contact:
+>
+>   - surinna [@srn@dev.glitch.social]
+
+This adds an advanced options dropdown to the toot compose box, for
+toggles that don't necessarily fit elsewhere.
+
+__Props:__
+
+ -  __`values` (`ImmutablePropTypes.contains(…).isRequired`) :__
+    An Immutable map with the following values:
+
+     -  __`do_not_federate` (`PropTypes.bool.isRequired`) :__
+        Specifies whether or not to federate the status.
+
+ -  __`onChange` (`PropTypes.func.isRequired`) :__
+    The function to call when a toggle is changed. We pass this from
+    our container to the toggle.
+
+ -  __`intl` (`PropTypes.object.isRequired`) :__
+    Our internationalization object, inserted by `@injectIntl`.
+
+__State:__
+
+ -  __`open` :__
+    This tells whether the dropdown is currently open or closed.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, defineMessages } from 'react-intl';
+
+//  Mastodon imports  //
+import IconButton from '../../../../mastodon/components/icon_button';
+
+//  Our imports  //
+import ComposeAdvancedOptionsToggle from './toggle';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Inital setup:
+-------------
+
+The `messages` constant is used to define any messages that we need
+from inside props. These are the various titles and labels on our
+toggles.
+
+`iconStyle` styles the icon used for the dropdown button.
+
+*/
+
+const messages = defineMessages({
+  local_only_short            :
+    { id: 'advanced-options.local-only.short', defaultMessage: 'Local-only' },
+  local_only_long             :
+    { id: 'advanced-options.local-only.long', defaultMessage: 'Do not post to other instances' },
+  advanced_options_icon_title :
+    { id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
+});
+
+const iconStyle = {
+  height     : null,
+  lineHeight : '27px',
+};
+
+/*
+
+Implementation:
+---------------
+
+*/
+
+@injectIntl
+export default class ComposeAdvancedOptions extends React.PureComponent {
+
+  static propTypes = {
+    values   : ImmutablePropTypes.contains({
+      do_not_federate : PropTypes.bool.isRequired,
+    }).isRequired,
+    onChange : PropTypes.func.isRequired,
+    intl     : PropTypes.object.isRequired,
+  };
+
+  state = {
+    open: false,
+  };
+
+/*
+
+###  `onToggleDropdown()`
+
+This function toggles the opening and closing of the advanced options
+dropdown.
+
+*/
+
+  onToggleDropdown = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+/*
+
+###  `onGlobalClick(e)`
+
+This function closes the advanced options dropdown if you click
+anywhere else on the screen.
+
+*/
+
+  onGlobalClick = (e) => {
+    if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
+      this.setState({ open: false });
+    }
+  }
+
+/*
+
+###  `componentDidMount()`, `componentWillUnmount()`
+
+This function closes the advanced options dropdown if you click
+anywhere else on the screen.
+
+*/
+
+  componentDidMount () {
+    window.addEventListener('click', this.onGlobalClick);
+    window.addEventListener('touchstart', this.onGlobalClick);
+  }
+  componentWillUnmount () {
+    window.removeEventListener('click', this.onGlobalClick);
+    window.removeEventListener('touchstart', this.onGlobalClick);
+  }
+
+/*
+
+###  `setRef(c)`
+
+`setRef()` stores a reference to the dropdown's `<div> in `this.node`.
+
+*/
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+/*
+
+###  `render()`
+
+`render()` actually puts our component on the screen.
+
+*/
+
+  render () {
+    const { open } = this.state;
+    const { intl, values } = this.props;
+
+/*
+
+The `options` array provides all of the available advanced options
+alongside their icon, text, and name.
+
+*/
+    const options = [
+      { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, name: 'do_not_federate' },
+    ];
+
+/*
+
+`anyEnabled` tells us if any of our advanced options have been enabled.
+
+*/
+
+    const anyEnabled = values.some((enabled) => enabled);
+
+/*
+
+`optionElems` takes our `options` and creates
+`<ComposeAdvancedOptionsToggle>`s out of them. We use the `name` of the
+toggle as its `key` so that React can keep track of it.
+
+*/
+
+    const optionElems = options.map((option) => {
+      return (
+        <ComposeAdvancedOptionsToggle
+          onChange={this.props.onChange}
+          active={values.get(option.name)}
+          key={option.name}
+          name={option.name}
+          shortText={intl.formatMessage(option.shortText)}
+          longText={intl.formatMessage(option.longText)}
+        />
+      );
+    });
+
+/*
+
+Finally, we can render our component.
+
+*/
+
+    return (
+      <div ref={this.setRef} className={`advanced-options-dropdown ${open ?  'open' : ''} ${anyEnabled ? 'active' : ''} `}>
+        <div className='advanced-options-dropdown__value'>
+          <IconButton
+            className='advanced-options-dropdown__value'
+            title={intl.formatMessage(messages.advanced_options_icon_title)}
+            icon='ellipsis-h' active={open || anyEnabled}
+            size={18}
+            style={iconStyle}
+            onClick={this.onToggleDropdown}
+          />
+        </div>
+        <div className='advanced-options-dropdown__dropdown'>
+          {optionElems}
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/compose/advanced_options/toggle.js

@@ -0,0 +1,103 @@
+/*
+
+`<ComposeAdvancedOptionsToggle>`
+================================
+
+>   For more information on the contents of this file, please contact:
+>
+>   - surinna [@srn@dev.glitch.social]
+
+This creates the toggle used by `<ComposeAdvancedOptions>`.
+
+__Props:__
+
+ -  __`onChange` (`PropTypes.func`) :__
+    This provides the function to call when the toggle is
+    (de-?)activated.
+
+ -  __`active` (`PropTypes.bool`) :__
+    This prop controls whether the toggle is currently active or not.
+
+ -  __`name` (`PropTypes.string`) :__
+    This identifies the toggle, and is sent to `onChange()` when it is
+    called.
+
+ -  __`shortText` (`PropTypes.string`) :__
+    This is a short string used as the title of the toggle.
+
+ -  __`longText` (`PropTypes.string`) :__
+    This is a longer string used as a subtitle for the toggle.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import Toggle from 'react-toggle';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Implementation:
+---------------
+
+*/
+
+export default class ComposeAdvancedOptionsToggle extends React.PureComponent {
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    active: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    shortText: PropTypes.string.isRequired,
+    longText: PropTypes.string.isRequired,
+  }
+
+/*
+
+###  `onToggle()`
+
+The `onToggle()` function simply calls the `onChange()` prop with the
+toggle's `name`.
+
+*/
+
+  onToggle = () => {
+    this.props.onChange(this.props.name);
+  }
+
+/*
+
+###  `render()`
+
+The `render()` function is used to render our component. We just render
+a `<Toggle>` and place next to it our text.
+
+*/
+
+  render() {
+    const { active, shortText, longText } = this.props;
+    return (
+      <div role='button' tabIndex='0' className='advanced-options-dropdown__option' onClick={this.onToggle}>
+        <div className='advanced-options-dropdown__option__toggle'>
+          <Toggle checked={active} onChange={this.onToggle} />
+        </div>
+        <div className='advanced-options-dropdown__option__content'>
+          <strong>{shortText}</strong>
+          {longText}
+        </div>
+      </div>
+    );
+  }
+
+}

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

@@ -0,0 +1,24 @@
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Mastodon imports  //
+import { closeModal } from 'mastodon/actions/modal';
+
+//  Our imports  //
+import { changeLocalSetting } from 'glitch/actions/local_settings';
+import LocalSettings from '.';
+
+const mapStateToProps = state => ({
+  settings: state.get('local_settings'),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onChange (setting, value) {
+    dispatch(changeLocalSetting(setting, value));
+  },
+  onClose () {
+    dispatch(closeModal());
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LocalSettings);

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

@@ -0,0 +1,50 @@
+//  Package imports
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  Our imports
+import LocalSettingsPage from './page';
+import LocalSettingsNavigation from './navigation';
+
+//  Stylesheet imports
+import './style';
+
+export default class LocalSettings extends React.PureComponent {
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+  };
+
+  state = {
+    currentIndex: 0,
+  };
+
+  navigateTo = (index) =>
+    this.setState({ currentIndex: +index });
+
+  render () {
+
+    const { navigateTo } = this;
+    const { onChange, onClose, settings } = this.props;
+    const { currentIndex } = this.state;
+
+    return (
+      <div className='glitch modal-root__modal local-settings'>
+        <LocalSettingsNavigation
+          index={currentIndex}
+          onClose={onClose}
+          onNavigate={navigateTo}
+        />
+        <LocalSettingsPage
+          index={currentIndex}
+          onChange={onChange}
+          settings={settings}
+        />
+      </div>
+    );
+  }
+
+}

app/javascript/glitch/components/local_settings/navigation/index.js

@@ -0,0 +1,74 @@
+//  Package imports
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages } from 'react-intl';
+
+//  Our imports
+import LocalSettingsNavigationItem from './item';
+
+//  Stylesheet imports
+import './style';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+  general: {  id: 'settings.general', defaultMessage: 'General' },
+  collapsed: { id: 'settings.collapsed_statuses', defaultMessage: 'Collapsed toots' },
+  media: { id: 'settings.media', defaultMessage: 'Media' },
+  preferences: { id: 'settings.preferences', defaultMessage: 'Preferences' },
+  close: { id: 'settings.close', defaultMessage: 'Close' },
+});
+
+@injectIntl
+export default class LocalSettingsNavigation extends React.PureComponent {
+
+  static propTypes = {
+    index      : PropTypes.number,
+    intl       : PropTypes.object.isRequired,
+    onClose    : PropTypes.func.isRequired,
+    onNavigate : PropTypes.func.isRequired,
+  };
+
+  render () {
+
+    const { index, intl, onClose, onNavigate } = this.props;
+
+    return (
+      <nav className='glitch local-settings__navigation'>
+        <LocalSettingsNavigationItem
+          active={index === 0}
+          index={0}
+          onNavigate={onNavigate}
+          title={intl.formatMessage(messages.general)}
+        />
+        <LocalSettingsNavigationItem
+          active={index === 1}
+          index={1}
+          onNavigate={onNavigate}
+          title={intl.formatMessage(messages.collapsed)}
+        />
+        <LocalSettingsNavigationItem
+          active={index === 2}
+          index={2}
+          onNavigate={onNavigate}
+          title={intl.formatMessage(messages.media)}
+        />
+        <LocalSettingsNavigationItem
+          active={index === 3}
+          href='/settings/preferences'
+          index={3}
+          icon='cog'
+          title={intl.formatMessage(messages.preferences)}
+        />
+        <LocalSettingsNavigationItem
+          active={index === 4}
+          className='close'
+          index={4}
+          onNavigate={onClose}
+          title={intl.formatMessage(messages.close)}
+        />
+      </nav>
+    );
+  }
+
+}

app/javascript/glitch/components/local_settings/navigation/item/index.js

@@ -0,0 +1,69 @@
+//  Package imports
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+//  Stylesheet imports
+import './style';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+export default class LocalSettingsPage extends React.PureComponent {
+
+  static propTypes = {
+    active: PropTypes.bool,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    icon: PropTypes.string,
+    index: PropTypes.number.isRequired,
+    onNavigate: PropTypes.func,
+    title: PropTypes.string,
+  };
+
+  handleClick = (e) => {
+    const { index, onNavigate } = this.props;
+    if (onNavigate) {
+      onNavigate(index);
+      e.preventDefault();
+    }
+  }
+
+  render () {
+    const { handleClick } = this;
+    const {
+      active,
+      className,
+      href,
+      icon,
+      onNavigate,
+      title,
+    } = this.props;
+
+    const finalClassName = classNames('glitch', 'local-settings__navigation__item', {
+      active,
+    }, className);
+
+    const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null;
+
+    if (href) return (
+      <a
+        href={href}
+        className={finalClassName}
+      >
+        {iconElem} {title}
+      </a>
+    );
+    else if (onNavigate) return (
+      <a
+        onClick={handleClick}
+        role='button'
+        tabIndex='0'
+        className={finalClassName}
+      >
+        {iconElem} {title}
+      </a>
+    );
+    else return null;
+  }
+
+}

app/javascript/glitch/components/local_settings/navigation/item/style.scss

@@ -0,0 +1,27 @@
+@import 'variables';
+
+.glitch.local-settings__navigation__item {
+  display: block;
+  padding: 15px 20px;
+  color: inherit;
+  background: $primary-text-color;
+  border-bottom: 1px $ui-primary-color solid;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
+  transition: background .3s;
+
+  &:hover {
+    background: $ui-secondary-color;
+  }
+
+  &.active {
+    background: $ui-highlight-color;
+    color: $primary-text-color;
+  }
+
+  &.close, &.close:hover {
+    background: $error-value-color;
+    color: $primary-text-color;
+  }
+}

app/javascript/glitch/components/local_settings/navigation/style.scss

@@ -0,0 +1,10 @@
+@import 'variables';
+
+.glitch.local-settings__navigation {
+  background: $primary-text-color;
+  color: $ui-base-color;
+  width: 200px;
+  font-size: 15px;
+  line-height: 20px;
+  overflow-y: auto;
+}

app/javascript/glitch/components/local_settings/page/index.js

@@ -0,0 +1,183 @@
+//  Package imports
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+
+//  Our imports
+import LocalSettingsPageItem from './item';
+
+//  Stylesheet imports
+import './style';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+  layout_auto: {  id: 'layout.auto', defaultMessage: 'Auto' },
+  layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' },
+  layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' },
+});
+
+@injectIntl
+export default class LocalSettingsPage extends React.PureComponent {
+
+  static propTypes = {
+    index    : PropTypes.number,
+    intl     : PropTypes.object.isRequired,
+    onChange : PropTypes.func.isRequired,
+    settings : ImmutablePropTypes.map.isRequired,
+  };
+
+  pages = [
+    ({ intl, onChange, settings }) => (
+      <div className='glitch local-settings__page general'>
+        <h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['layout']}
+          id='mastodon-settings--layout'
+          options={[
+            { value: 'auto', message: intl.formatMessage(messages.layout_auto) },
+            { value: 'multiple', message: intl.formatMessage(messages.layout_desktop) },
+            { value: 'single', message: intl.formatMessage(messages.layout_mobile) },
+          ]}
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.layout' defaultMessage='Layout:' />
+        </LocalSettingsPageItem>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['stretch']}
+          id='mastodon-settings--stretch'
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' />
+        </LocalSettingsPageItem>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['navbar_under']}
+          id='mastodon-settings--navbar_under'
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' />
+        </LocalSettingsPageItem>
+      </div>
+    ),
+    ({ onChange, settings }) => (
+      <div className='glitch local-settings__page collapsed'>
+        <h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['collapsed', 'enabled']}
+          id='mastodon-settings--collapsed-enabled'
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
+        </LocalSettingsPageItem>
+        <section>
+          <h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'auto', 'all']}
+            id='mastodon-settings--collapsed-auto-all'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+          >
+            <FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'auto', 'notifications']}
+            id='mastodon-settings--collapsed-auto-notifications'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+            dependsOnNot={[['collapsed', 'auto', 'all']]}
+          >
+            <FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'auto', 'lengthy']}
+            id='mastodon-settings--collapsed-auto-lengthy'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+            dependsOnNot={[['collapsed', 'auto', 'all']]}
+          >
+            <FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'auto', 'replies']}
+            id='mastodon-settings--collapsed-auto-replies'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+            dependsOnNot={[['collapsed', 'auto', 'all']]}
+          >
+            <FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'auto', 'media']}
+            id='mastodon-settings--collapsed-auto-media'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+            dependsOnNot={[['collapsed', 'auto', 'all']]}
+          >
+            <FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
+          </LocalSettingsPageItem>
+        </section>
+        <section>
+          <h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'backgrounds', 'user_backgrounds']}
+            id='mastodon-settings--collapsed-user-backgrouns'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+          >
+            <FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' />
+          </LocalSettingsPageItem>
+          <LocalSettingsPageItem
+            settings={settings}
+            item={['collapsed', 'backgrounds', 'preview_images']}
+            id='mastodon-settings--collapsed-preview-images'
+            onChange={onChange}
+            dependsOn={[['collapsed', 'enabled']]}
+          >
+            <FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
+          </LocalSettingsPageItem>
+        </section>
+      </div>
+    ),
+    ({ onChange, settings }) => (
+      <div className='glitch local-settings__page media'>
+        <h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['media', 'letterbox']}
+          id='mastodon-settings--media-letterbox'
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' />
+        </LocalSettingsPageItem>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['media', 'fullwidth']}
+          id='mastodon-settings--media-fullwidth'
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' />
+        </LocalSettingsPageItem>
+      </div>
+    ),
+  ];
+
+  render () {
+    const { pages } = this;
+    const { index, intl, onChange, settings } = this.props;
+    const CurrentPage = pages[index] || pages[0];
+
+    return <CurrentPage intl={intl} onChange={onChange} settings={settings} />;
+  }
+
+}

app/javascript/glitch/components/local_settings/page/item/index.js

@@ -0,0 +1,90 @@
+//  Package imports
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+//  Stylesheet imports
+import './style';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+export default class LocalSettingsPageItem extends React.PureComponent {
+
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    dependsOn: PropTypes.array,
+    dependsOnNot: PropTypes.array,
+    id: PropTypes.string.isRequired,
+    item: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      message: PropTypes.string.isRequired,
+    })),
+    settings: ImmutablePropTypes.map.isRequired,
+  };
+
+  handleChange = e => {
+    const { target } = e;
+    const { item, onChange, options } = this.props;
+    if (options && options.length > 0) onChange(item, target.value);
+    else onChange(item, target.checked);
+  }
+
+  render () {
+    const { handleChange } = this;
+    const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props;
+    let enabled = true;
+
+    if (dependsOn) {
+      for (let i = 0; i < dependsOn.length; i++) {
+        enabled = enabled && settings.getIn(dependsOn[i]);
+      }
+    }
+    if (dependsOnNot) {
+      for (let i = 0; i < dependsOnNot.length; i++) {
+        enabled = enabled && !settings.getIn(dependsOnNot[i]);
+      }
+    }
+
+    if (options && options.length > 0) {
+      const currentValue = settings.getIn(item);
+      const optionElems = options && options.length > 0 && options.map((opt) => (
+        <option
+          key={opt.value}
+          value={opt.value}
+        >
+          {opt.message}
+        </option>
+      ));
+      return (
+        <label className='glitch local-settings__page__item' htmlFor={id}>
+          <p>{children}</p>
+          <p>
+            <select
+              id={id}
+              disabled={!enabled}
+              onBlur={handleChange}
+              onChange={handleChange}
+              value={currentValue}
+            >
+              {optionElems}
+            </select>
+          </p>
+        </label>
+      );
+    } else return (
+      <label className='glitch local-settings__page__item' htmlFor={id}>
+        <input
+          id={id}
+          type='checkbox'
+          checked={settings.getIn(item)}
+          onChange={handleChange}
+          disabled={!enabled}
+        />
+        {children}
+      </label>
+    );
+  }
+
+}

app/javascript/glitch/components/local_settings/page/item/style.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+
+.glitch.local-settings__page__item {
+  select {
+    margin-bottom: 5px;
+  }
+}

app/javascript/glitch/components/local_settings/page/style.scss

@@ -0,0 +1,9 @@
+@import 'variables';
+
+.glitch.local-settings__page {
+  display: block;
+  flex: auto;
+  padding: 15px 20px 15px 20px;
+  width: 360px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,34 @@
+@import 'variables';
+
+.glitch.local-settings {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  background: $ui-secondary-color;
+  color: $ui-base-color;
+  border-radius: 8px;
+  height: 80vh;
+  width: 80vw;
+  max-width: 740px;
+  max-height: 450px;
+  overflow: hidden;
+
+  label {
+    display: block;
+  }
+
+  h1 {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 20px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+}

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

@@ -0,0 +1,56 @@
+/*
+
+`<NotificationContainer>`
+=========================
+
+This container connects `<Notification>`s to the Redux store.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Mastodon imports  //
+import { makeGetNotification } from '../../../mastodon/selectors';
+
+//  Our imports  //
+import Notification from '.';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+State mapping:
+--------------
+
+The `mapStateToProps()` function maps various state properties to the
+props of our component. We wrap this in `makeMapStateToProps()` so that
+we only have to call `makeGetNotification()` once instead of every
+time.
+
+*/
+
+const makeMapStateToProps = () => {
+  const getNotification = makeGetNotification();
+
+  const mapStateToProps = (state, props) => ({
+    notification: getNotification(state, props.notification, props.accountId),
+    settings: state.get('local_settings'),
+    notifCleaning: state.getIn(['notifications', 'cleaningMode']),
+  });
+
+  return mapStateToProps;
+};
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+export default connect(makeMapStateToProps)(Notification);

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

@@ -0,0 +1,75 @@
+//  `<NotificationFollow>`
+//  ======================
+
+//  * * * * * * *  //
+
+//  Imports
+//  -------
+
+//  Package imports.
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import escapeTextContentForBrowser from 'escape-html';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports.
+import emojify from '../../../mastodon/emoji';
+import Permalink from '../../../mastodon/components/permalink';
+import AccountContainer from '../../../mastodon/containers/account_container';
+
+// Our imports.
+import NotificationOverlayContainer from '../notification/overlay/container';
+
+//  * * * * * * *  //
+
+//  Implementation
+//  --------------
+
+export default class NotificationFollow extends ImmutablePureComponent {
+
+  static propTypes = {
+    id                   : PropTypes.number.isRequired,
+    account              : ImmutablePropTypes.map.isRequired,
+    notification         : ImmutablePropTypes.map.isRequired,
+  };
+
+  render () {
+    const { account, notification } = this.props;
+
+    //  Links to the display name.
+    const displayName = account.get('display_name') || account.get('username');
+    const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
+    const link = (
+      <Permalink
+        className='notification__display-name'
+        href={account.get('url')}
+        title={account.get('acct')}
+        to={`/accounts/${account.get('id')}`}
+        dangerouslySetInnerHTML={displayNameHTML}
+      />
+    );
+
+    //  Renders.
+    return (
+      <div className='notification notification-follow'>
+        <div className='notification__message'>
+          <div className='notification__favourite-icon-wrapper'>
+            <i className='fa fa-fw fa-user-plus' />
+          </div>
+
+          <FormattedMessage
+            id='notification.follow'
+            defaultMessage='{name} followed you'
+            values={{ name: link }}
+          />
+        </div>
+
+        <AccountContainer id={account.get('id')} withNote={false} />
+        <NotificationOverlayContainer notification={notification} />
+      </div>
+    );
+  }
+
+}

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

@@ -0,0 +1,82 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+
+//  Our imports  //
+import StatusContainer from '../status/container';
+import NotificationFollow from './follow';
+
+export default class Notification extends ImmutablePureComponent {
+
+  static propTypes = {
+    notification: ImmutablePropTypes.map.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+  };
+
+  renderFollow (notification) {
+    return (
+      <NotificationFollow
+        id={notification.get('id')}
+        account={notification.get('account')}
+        notification={notification}
+      />
+    );
+  }
+
+  renderMention (notification) {
+    return (
+      <StatusContainer
+        id={notification.get('status')}
+        notification={notification}
+        withDismiss
+      />
+    );
+  }
+
+  renderFavourite (notification) {
+    return (
+      <StatusContainer
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='favourite'
+        muted
+        notification={notification}
+        withDismiss
+      />
+    );
+  }
+
+  renderReblog (notification) {
+    return (
+      <StatusContainer
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='reblog'
+        muted
+        notification={notification}
+        withDismiss
+      />
+    );
+  }
+
+  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;
+  }
+
+}

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

@@ -0,0 +1,49 @@
+/*
+
+`<NotificationOverlayContainer>`
+=========================
+
+This container connects `<NotificationOverlay>`s to the Redux store.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import { connect } from 'react-redux';
+
+//  Our imports  //
+import NotificationOverlay from './notification_overlay';
+import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Dispatch mapping:
+-----------------
+
+The `mapDispatchToProps()` function maps dispatches to our store to the
+various props of our component. We only need to provide a dispatch for
+deleting notifications.
+
+*/
+
+const mapDispatchToProps = dispatch => ({
+  onMarkForDelete(id, yes) {
+    dispatch(markNotificationForDelete(id, yes));
+  },
+});
+
+const mapStateToProps = state => ({
+  show: state.getIn(['notifications', 'cleaningMode']),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);

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

@@ -0,0 +1,61 @@
+/**
+ * Notification overlay
+ */
+
+
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+
+//  Mastodon imports  //
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+  markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
+});
+
+@injectIntl
+export default class NotificationOverlay extends ImmutablePureComponent {
+
+  static propTypes = {
+    notification    : ImmutablePropTypes.map.isRequired,
+    onMarkForDelete : PropTypes.func.isRequired,
+    show            : PropTypes.bool.isRequired,
+    intl            : PropTypes.object.isRequired,
+  };
+
+  onToggleMark = () => {
+    const mark = !this.props.notification.get('markedForDelete');
+    const id = this.props.notification.get('id');
+    this.props.onMarkForDelete(id, mark);
+  }
+
+  render () {
+    const { notification, show, intl } = this.props;
+
+    const active = notification.get('markedForDelete');
+    const label = intl.formatMessage(messages.markForDeletion);
+
+    return show ? (
+      <div
+        aria-label={label}
+        role='checkbox'
+        aria-checked={active}
+        tabIndex={0}
+        className={`notification__dismiss-overlay ${active ? 'active' : ''}`}
+        onClick={this.onToggleMark}
+      >
+        <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

@@ -0,0 +1,188 @@
+//  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 DropdownMenuContainer from '../../../mastodon/containers/dropdown_menu_container';
+
+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' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
+  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
+  reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
+  cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
+  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' },
+  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
+  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
+  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+});
+
+@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,
+    onEmbed: PropTypes.func,
+    onMuteConversation: PropTypes.func,
+    onPin: 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);
+  }
+
+  handleShareClick = () => {
+    navigator.share({
+      text: this.props.status.get('search_index'),
+      url: this.props.status.get('url'),
+    });
+  }
+
+  handleFavouriteClick = () => {
+    this.props.onFavourite(this.props.status);
+  }
+
+  handleReblogClick = (e) => {
+    this.props.onReblog(this.props.status, e);
+  }
+
+  handleDeleteClick = () => {
+    this.props.onDelete(this.props.status);
+  }
+
+  handlePinClick = () => {
+    this.props.onPin(this.props.status);
+  }
+
+  handleMentionClick = () => {
+    this.props.onMention(this.props.status.get('account'), this.context.router.history);
+  }
+
+  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')}`);
+  }
+
+  handleEmbed = () => {
+    this.props.onEmbed(this.props.status);
+  }
+
+  handleReport = () => {
+    this.props.onReport(this.props.status);
+  }
+
+  handleConversationMuteClick = () => {
+    this.props.onMuteConversation(this.props.status);
+  }
+
+  render () {
+    const { status, me, intl, withDismiss } = this.props;
+
+    const mutingConversation = status.get('muted');
+    const anonymousAccess = !me;
+    const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
+
+    let menu = [];
+    let reblogIcon = 'retweet';
+    let replyIcon;
+    let replyTitle;
+
+    menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
+
+    if (publicStatus) {
+      menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
+    }
+
+    menu.push(null);
+
+    if (status.getIn(['account', 'id']) === me || withDismiss) {
+      menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
+      menu.push(null);
+    }
+
+    if (status.getIn(['account', 'id']) === me) {
+      if (publicStatus) {
+        menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
+      }
+
+      menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
+    } else {
+      menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
+      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('in_reply_to_id', null) === null) {
+      replyIcon = 'reply';
+      replyTitle = intl.formatMessage(messages.reply);
+    } else {
+      replyIcon = 'reply-all';
+      replyTitle = intl.formatMessage(messages.replyAll);
+    }
+
+    const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
+      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
+    );
+
+    return (
+      <div className='status__action-bar'>
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+        <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+        {shareButton}
+
+        <div className='status__action-bar-dropdown'>
+          <DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
+        </div>
+
+        <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+      </div>
+    );
+  }
+
+}

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

@@ -0,0 +1,255 @@
+/*
+
+`<StatusContainer>`
+===================
+
+Original file by @gargron@mastodon.social et al as part of
+tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
+detecting reblogs has been moved here from <Status>.
+
+*/
+
+                            /* * * * */
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  defineMessages,
+  injectIntl,
+  FormattedMessage,
+} from 'react-intl';
+
+//  Mastodon imports  //
+import { makeGetStatus } from '../../../mastodon/selectors';
+import {
+  replyCompose,
+  mentionCompose,
+} from '../../../mastodon/actions/compose';
+import {
+  reblog,
+  favourite,
+  unreblog,
+  unfavourite,
+  pin,
+  unpin,
+} from '../../../mastodon/actions/interactions';
+import { blockAccount } from '../../../mastodon/actions/accounts';
+import { initMuteModal } from '../../../mastodon/actions/mutes';
+import {
+  muteStatus,
+  unmuteStatus,
+  deleteStatus,
+} from '../../../mastodon/actions/statuses';
+import { initReport } from '../../../mastodon/actions/reports';
+import { openModal } from '../../../mastodon/actions/modal';
+
+//  Our imports  //
+import Status from '.';
+
+                            /* * * * */
+
+/*
+
+Inital setup:
+-------------
+
+The `messages` constant is used to define any messages that we will
+need in our component. In our case, these are the various confirmation
+messages used with statuses.
+
+*/
+
+const messages = defineMessages({
+  deleteConfirm : {
+    id             : 'confirmations.delete.confirm',
+    defaultMessage : 'Delete',
+  },
+  deleteMessage : {
+    id             : 'confirmations.delete.message',
+    defaultMessage : 'Are you sure you want to delete this status?',
+  },
+  blockConfirm  : {
+    id             : 'confirmations.block.confirm',
+    defaultMessage : 'Block',
+  },
+});
+
+                            /* * * * */
+
+/*
+
+State mapping:
+--------------
+
+The `mapStateToProps()` function maps various state properties to the
+props of our component. We wrap this in a `makeMapStateToProps()`
+function to give us closure and preserve `getStatus()` across function
+calls.
+
+*/
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = (state, ownProps) => {
+
+    let status = getStatus(state, ownProps.id);
+    let reblogStatus = status.get('reblog', null);
+    let account = undefined;
+    let prepend = undefined;
+
+/*
+
+Here we process reblogs. If our status is a reblog, then we create a
+`prependMessage` to pass along to our `<Status>` along with the
+reblogger's `account`, and set `coreStatus` (the one we will actually
+render) to the status which has been reblogged.
+
+*/
+
+    if (reblogStatus !== null && typeof reblogStatus === 'object') {
+      account = status.get('account');
+      status = reblogStatus;
+      prepend = 'reblogged_by';
+    }
+
+/*
+
+Here are the props we pass to `<Status>`.
+
+*/
+
+    return {
+      status      : status,
+      account     : account || ownProps.account,
+      me          : state.getIn(['meta', 'me']),
+      settings    : state.get('local_settings'),
+      prepend     : prepend || ownProps.prepend,
+      reblogModal : state.getIn(['meta', 'boost_modal']),
+      deleteModal : state.getIn(['meta', 'delete_modal']),
+      autoPlayGif : state.getIn(['meta', 'auto_play_gif']),
+    };
+  };
+
+  return mapStateToProps;
+};
+
+                            /* * * * */
+
+/*
+
+Dispatch mapping:
+-----------------
+
+The `mapDispatchToProps()` function maps dispatches to our store to the
+various props of our component. We need to provide dispatches for all
+of the things you can do with a status: reply, reblog, favourite, et
+cetera.
+
+For a few of these dispatches, we open up confirmation modals; the rest
+just immediately execute their corresponding actions.
+
+*/
+
+const mapDispatchToProps = (dispatch, { intl }) => ({
+
+  onReply (status, router) {
+    dispatch(replyCompose(status, router));
+  },
+
+  onModalReblog (status) {
+    dispatch(reblog(status));
+  },
+
+  onReblog (status, e) {
+    if (status.get('reblogged')) {
+      dispatch(unreblog(status));
+    } else {
+      if (e.shiftKey || !this.reblogModal) {
+        this.onModalReblog(status);
+      } else {
+        dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
+      }
+    }
+  },
+
+  onFavourite (status) {
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
+  },
+
+  onPin (status) {
+    if (status.get('pinned')) {
+      dispatch(unpin(status));
+    } else {
+      dispatch(pin(status));
+    }
+  },
+
+  onEmbed (status) {
+    dispatch(openModal('EMBED', { url: status.get('url') }));
+  },
+
+  onDelete (status) {
+    if (!this.deleteModal) {
+      dispatch(deleteStatus(status.get('id')));
+    } 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(initMuteModal(account));
+  },
+
+  onMuteConversation (status) {
+    if (status.get('muted')) {
+      dispatch(unmuteStatus(status.get('id')));
+    } else {
+      dispatch(muteStatus(status.get('id')));
+    }
+  },
+});
+
+export default injectIntl(
+  connect(makeMapStateToProps, mapDispatchToProps)(Status)
+);

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

@@ -0,0 +1,247 @@
+//  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}>
+          <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
+              ref={this.setRef}
+              style={directionStyle}
+              onMouseDown={this.handleMouseDown}
+              onMouseUp={this.handleMouseUp}
+              dangerouslySetInnerHTML={content}
+            />
+            {media}
+          </div>
+
+        </div>
+      );
+    } else if (parseClick) {
+      return (
+        <div
+          className={classNames}
+          style={directionStyle}
+        >
+          <div
+            ref={this.setRef}
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+            dangerouslySetInnerHTML={content}
+          />
+          {media}
+        </div>
+      );
+    } else {
+      return (
+        <div
+          className='status__content'
+          style={directionStyle}
+        >
+          <div ref={this.setRef} dangerouslySetInnerHTML={content} />
+          {media}
+        </div>
+      );
+    }
+  }
+
+}

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

@@ -0,0 +1,79 @@
+//  Package imports  //
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+
+//  Mastodon imports  //
+import IconButton from '../../../../mastodon/components/icon_button';
+
+//  Our imports  //
+import StatusGalleryItem from './item';
+
+const messages = defineMessages({
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+});
+
+@injectIntl
+export default class StatusGallery extends React.PureComponent {
+
+  static propTypes = {
+    sensitive: PropTypes.bool,
+    media: ImmutablePropTypes.list.isRequired,
+    letterbox: PropTypes.bool,
+    fullwidth: PropTypes.bool,
+    height: PropTypes.number.isRequired,
+    onOpenMedia: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired,
+  };
+
+  state = {
+    visible: !this.props.sensitive,
+  };
+
+  handleOpen = () => {
+    this.setState({ visible: !this.state.visible });
+  }
+
+  handleClick = (index) => {
+    this.props.onOpenMedia(this.props.media, index);
+  }
+
+  render () {
+    const { media, intl, sensitive, letterbox, fullwidth } = this.props;
+
+    let children;
+
+    if (!this.state.visible) {
+      let warning;
+
+      if (sensitive) {
+        warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+      } else {
+        warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
+      }
+
+      children = (
+        <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
+          <span className='media-spoiler__warning'>{warning}</span>
+          <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+        </div>
+      );
+    } else {
+      const size = media.take(4).size;
+      children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
+    }
+
+    return (
+      <div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
+        <div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
+          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
+        </div>
+
+        {children}
+      </div>
+    );
+  }
+
+}

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

@@ -0,0 +1,152 @@
+//  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,
+  };
+
+  handleMouseEnter = (e) => {
+    if (this.hoverToPlay()) {
+      e.target.play();
+    }
+  }
+
+  handleMouseLeave = (e) => {
+    if (this.hoverToPlay()) {
+      e.target.pause();
+      e.target.currentTime = 0;
+    }
+  }
+
+  hoverToPlay () {
+    const { attachment, autoPlayGif } = this.props;
+    return !autoPlayGif && attachment.get('type') === 'gifv';
+  }
+
+  handleClick = (e) => {
+    const { index, onClick } = this.props;
+
+    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}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+            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

@@ -0,0 +1,146 @@
+/*
+
+`<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';
+
+//  * * * * * * *  //
+
+//  Initial setup
+//  -------------
+
+//  Messages for use with internationalization stuff.
+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 component
+//  -------------
+
+@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,
+  };
+
+  //  Handles clicks on collapsed button
+  handleCollapsedClick = (e) => {
+    const { collapsed, setExpansion } = this.props;
+    if (e.button === 0) {
+      setExpansion(collapsed ? null : false);
+      e.preventDefault();
+    }
+  }
+
+  //  Handles clicks on account name/image
+  handleAccountClick = (e) => {
+    const { status, parseClick } = this.props;
+    parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
+  }
+
+  //  Rendering.
+  render () {
+    const {
+      status,
+      friend,
+      mediaIcon,
+      collapsible,
+      collapsed,
+      intl,
+    } = this.props;
+
+    const account = status.get('account');
+
+    return (
+      <header className='status__info'>
+        <a
+          href={account.get('url')}
+          target='_blank'
+          className='status__avatar'
+          onClick={this.handleAccountClick}
+        >
+          {
+            friend ? (
+              <AvatarOverlay account={account} friend={friend} />
+            ) : (
+              <Avatar account={account} size={48} />
+            )
+          }
+        </a>
+        <a
+          href={account.get('url')}
+          target='_blank'
+          className='status__display-name'
+          onClick={this.handleAccountClick}
+        >
+          <DisplayName account={account} />
+        </a>
+        <div className='status__info__icons'>
+          {mediaIcon ? (
+            <i
+              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>
+
+      </header>
+    );
+  }
+
+}

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

@@ -0,0 +1,766 @@
+/*
+
+`<Status>`
+==========
+
+Original file by @gargron@mastodon.social et al as part of
+tootsuite/mastodon. *Heavily* rewritten (and documented!) by
+@kibi@glitch.social as a part of glitch-soc/mastodon. The following
+features have been added:
+
+ -  Better separating the "guts" of statuses from their wrapper(s)
+ -  Collapsing statuses
+ -  Moving images inside of CWs
+
+A number of aspects of this original file have been split off into
+their own components for better maintainance; for these, see:
+
+ -  <StatusHeader>
+ -  <StatusPrepend>
+
+…And, of course, the other <Status>-related components as well.
+
+*/
+
+                            /* * * * */
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Mastodon imports  //
+import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task';
+
+//  Our imports  //
+import StatusPrepend from './prepend';
+import StatusHeader from './header';
+import StatusContent from './content';
+import StatusActionBar from './action_bar';
+import StatusGallery from './gallery';
+import StatusPlayer from './player';
+import NotificationOverlayContainer from '../notification/overlay/container';
+
+                            /* * * * */
+
+/*
+
+The `<Status>` component:
+-------------------------
+
+The `<Status>` component is a container for statuses. It consists of a
+few parts:
+
+ -  The `<StatusPrepend>`, which contains tangential information about
+    the status, such as who reblogged it.
+ -  The `<StatusHeader>`, which contains the avatar and username of the
+    status author, as well as a media icon and the "collapse" toggle.
+ -  The `<StatusContent>`, which contains the content of the status.
+ -  The `<StatusActionBar>`, which provides actions to be performed
+    on statuses, like reblogging or sending a reply.
+
+###  Context
+
+ -  __`router` (`PropTypes.object`) :__
+    We need to get our router from the surrounding React context.
+
+###  Props
+
+ -  __`id` (`PropTypes.number`) :__
+    The id of the status.
+
+ -  __`status` (`ImmutablePropTypes.map`) :__
+    The status object, straight from the store.
+
+ -  __`account` (`ImmutablePropTypes.map`) :__
+    Don't be confused by this one! This is **not** the account which
+    posted the status, but the associated account with any further
+    action (eg, a reblog or a favourite).
+
+ -  __`settings` (`ImmutablePropTypes.map`) :__
+    These are our local settings, fetched from our store. We need this
+    to determine how best to collapse our statuses, among other things.
+
+ -  __`me` (`PropTypes.number`) :__
+    This is the id of the currently-signed-in user.
+
+ -  __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`,
+    `onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
+    `onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__
+    These are all functions passed through from the
+    `<StatusContainer>`. We don't deal with them directly here.
+
+ -  __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__
+    These tell whether or not the user has modals activated for
+    reblogging and deleting statuses. They are used by the `onReblog`
+    and `onDelete` functions, but we don't deal with them here.
+
+ -  __`autoPlayGif` (`PropTypes.bool`) :__
+    This tells the frontend whether or not to autoplay gifs!
+
+ -  __`muted` (`PropTypes.bool`) :__
+    This has nothing to do with a user or conversation mute! "Muted" is
+    what Mastodon internally calls the subdued look of statuses in the
+    notifications column. This should be `true` for notifications, and
+    `false` otherwise.
+
+ -  __`collapse` (`PropTypes.bool`) :__
+    This prop signals a directive from a higher power to (un)collapse
+    a status. Most of the time it should be `undefined`, in which case
+    we do nothing.
+
+ -  __`prepend` (`PropTypes.string`) :__
+    The type of prepend: `'reblogged_by'`, `'reblog'`, or
+    `'favourite'`.
+
+ -  __`withDismiss` (`PropTypes.bool`) :__
+    Whether or not the status can be dismissed. Used for notifications.
+
+ -  __`intersectionObserverWrapper` (`PropTypes.object`) :__
+    This holds our intersection observer. In Mastodon parlance,
+    an "intersection" is just when the status is viewable onscreen.
+
+###  State
+
+ -  __`isExpanded` :__
+    Should be either `true`, `false`, or `null`. The meanings of
+    these values are as follows:
+
+     -  __`true` :__ The status contains a CW and the CW is expanded.
+     -  __`false` :__ The status is collapsed.
+     -  __`null` :__ The status is not collapsed or expanded.
+
+ -  __`isIntersecting` :__
+    This boolean tells us whether or not the status is currently
+    onscreen.
+
+ -  __`isHidden` :__
+    This boolean tells us if the status has been unrendered to save
+    CPUs.
+
+*/
+
+export default class Status extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router                      : PropTypes.object,
+  };
+
+  static propTypes = {
+    id                          : PropTypes.number,
+    status                      : ImmutablePropTypes.map,
+    account                     : ImmutablePropTypes.map,
+    settings                    : ImmutablePropTypes.map,
+    notification                : ImmutablePropTypes.map,
+    me                          : PropTypes.number,
+    onFavourite                 : PropTypes.func,
+    onReblog                    : PropTypes.func,
+    onModalReblog               : PropTypes.func,
+    onDelete                    : PropTypes.func,
+    onPin                       : PropTypes.func,
+    onMention                   : PropTypes.func,
+    onMute                      : PropTypes.func,
+    onMuteConversation          : PropTypes.func,
+    onBlock                     : PropTypes.func,
+    onEmbed                     : PropTypes.func,
+    onHeightChange              : PropTypes.func,
+    onReport                    : PropTypes.func,
+    onOpenMedia                 : PropTypes.func,
+    onOpenVideo                 : PropTypes.func,
+    reblogModal                 : PropTypes.bool,
+    deleteModal                 : PropTypes.bool,
+    autoPlayGif                 : PropTypes.bool,
+    muted                       : PropTypes.bool,
+    collapse                    : PropTypes.bool,
+    prepend                     : PropTypes.string,
+    withDismiss                 : PropTypes.bool,
+    intersectionObserverWrapper : PropTypes.object,
+  };
+
+  state = {
+    isExpanded                  : null,
+    isIntersecting              : true,
+    isHidden                    : false,
+    markedForDelete             : 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);
+  }
+
+/*
+
+####  `componentDidMount()`.
+
+When mounting, we just check to see if our status should be collapsed,
+and collapse it if so. We don't need to worry about whether collapsing
+is enabled here, because `setExpansion()` already takes that into
+account.
+
+The cases where a status should be collapsed are:
+
+ -  The `collapse` prop has been set to `true`
+ -  The user has decided in local settings to collapse all statuses.
+ -  The user has decided to collapse all notifications ('muted'
+    statuses).
+ -  The user has decided to collapse long statuses and the status is
+    over 400px (without media, or 650px with).
+ -  The status is a reply and the user has decided to collapse all
+    replies.
+ -  The status contains media and the user has decided to collapse all
+    statuses with media.
+
+We also start up our intersection observer to monitor our statuses.
+`componentMounted` lets us know that everything has been set up
+properly and our intersection observer is good to go.
+
+*/
+
+  componentDidMount () {
+    const { node, handleIntersection } = this;
+    const {
+      status,
+      settings,
+      collapse,
+      muted,
+      id,
+      intersectionObserverWrapper,
+    } = this.props;
+    const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
+
+    if (
+      collapse ||
+      autoCollapseSettings.get('all') || (
+        autoCollapseSettings.get('notifications') && muted
+      ) || (
+        autoCollapseSettings.get('lengthy') &&
+        node.clientHeight > (
+          status.get('media_attachments').size && !muted ? 650 : 400
+        )
+      ) || (
+        autoCollapseSettings.get('replies') &&
+        status.get('in_reply_to_id', null) !== null
+      ) || (
+        autoCollapseSettings.get('media') &&
+        !(status.get('spoiler_text').length) &&
+        status.get('media_attachments').size
+      )
+    ) this.setExpansion(false);
+
+    if (!intersectionObserverWrapper) return;
+    else intersectionObserverWrapper.observe(
+      id,
+      node,
+      handleIntersection
+    );
+
+    this.componentMounted = true;
+  }
+
+/*
+
+####  `shouldComponentUpdate()`.
+
+If the status is about to be both offscreen (not intersecting) and
+hidden, then we only need to update it if it's not that way currently.
+If the status is moving from offscreen to onscreen, then we *have* to
+re-render, so that we can unhide the element if necessary.
+
+If neither of these cases are true, we can leave it up to our
+`updateOnProps` and `updateOnStates` arrays.
+
+*/
+
+  shouldComponentUpdate (nextProps, nextState) {
+    switch (true) {
+    case !nextState.isIntersecting && nextState.isHidden:
+      return this.state.isIntersecting || !this.state.isHidden;
+    case nextState.isIntersecting && !this.state.isIntersecting:
+      return true;
+    default:
+      return super.shouldComponentUpdate(nextProps, nextState);
+    }
+  }
+
+/*
+
+####  `componentDidUpdate()`.
+
+If our component is being rendered for any reason and an update has
+triggered, this will save its height.
+
+This is, frankly, a bit overkill, as the only instance when we
+actually *need* to update the height right now should be when the
+value of `isExpanded` has changed. But it makes for more readable
+code and prevents bugs in the future where the height isn't set
+properly after some change.
+
+*/
+
+  componentDidUpdate () {
+    if (
+      this.state.isIntersecting || !this.state.isHidden
+    ) this.saveHeight();
+  }
+
+/*
+
+####  `componentWillUnmount()`.
+
+If our component is about to unmount, then we'd better unset
+`this.componentMounted`.
+
+*/
+
+  componentWillUnmount () {
+    this.componentMounted = false;
+  }
+
+/*
+
+####  `handleIntersection()`.
+
+`handleIntersection()` either hides the status (if it is offscreen) or
+unhides it (if it is onscreen). It's called by
+`intersectionObserverWrapper.observe()`.
+
+If our status isn't intersecting, we schedule an idle task (using the
+aptly-named `scheduleIdleTask()`) to hide the status at the next
+available opportunity.
+
+tootsuite/mastodon left us with the following enlightening comment
+regarding this function:
+
+>   Edge 15 doesn't support isIntersecting, but we can infer it
+
+It then implements a polyfill (intersectionRect.height > 0) which isn't
+actually sufficient. The short answer is, this behaviour isn't really
+supported on Edge but we can get kinda close.
+
+*/
+
+  handleIntersection = (entry) => {
+    const isIntersecting = (
+      typeof entry.isIntersecting === 'boolean' ?
+      entry.isIntersecting :
+      entry.intersectionRect.height > 0
+    );
+    this.setState(
+      (prevState) => {
+        if (prevState.isIntersecting && !isIntersecting) {
+          scheduleIdleTask(this.hideIfNotIntersecting);
+        }
+        return {
+          isIntersecting : isIntersecting,
+          isHidden       : false,
+        };
+      }
+    );
+  }
+
+/*
+
+####  `hideIfNotIntersecting()`.
+
+This function will hide the status if we're still not intersecting.
+Hiding the status means that it will just render an empty div instead
+of actual content, which saves RAMS and CPUs or some such.
+
+*/
+
+  hideIfNotIntersecting = () => {
+    if (!this.componentMounted) return;
+    this.setState(
+      (prevState) => ({ isHidden: !prevState.isIntersecting })
+    );
+  }
+
+/*
+
+####  `saveHeight()`.
+
+`saveHeight()` saves the height of our status so that when whe hide it
+we preserve its dimensions. We only want to store our height, though,
+if our status has content (otherwise, it would imply that it is
+already hidden).
+
+*/
+
+  saveHeight = () => {
+    if (this.node && this.node.children.length) {
+      this.height = this.node.getBoundingClientRect().height;
+    }
+  }
+
+/*
+
+####  `setExpansion()`.
+
+`setExpansion()` sets the value of `isExpanded` in our state. It takes
+one argument, `value`, which gives the desired value for `isExpanded`.
+The default for this argument is `null`.
+
+`setExpansion()` automatically checks for us whether toot collapsing
+is enabled, so we don't have to.
+
+We use a `switch` statement to simplify our code.
+
+*/
+
+  setExpansion = (value) => {
+    switch (true) {
+    case value === undefined || value === null:
+      this.setState({ isExpanded: null });
+      break;
+    case !value && this.props.settings.getIn(['collapsed', 'enabled']):
+      this.setState({ isExpanded: false });
+      break;
+    case !!value:
+      this.setState({ isExpanded: true });
+      break;
+    }
+  }
+
+/*
+
+####  `handleRef()`.
+
+`handleRef()` just saves a reference to our status node to `this.node`.
+It also saves our height, in case the height of our node has changed.
+
+*/
+
+  handleRef = (node) => {
+    this.node = node;
+    this.saveHeight();
+  }
+
+/*
+
+####  `parseClick()`.
+
+`parseClick()` takes a click event and responds appropriately.
+If our status is collapsed, then clicking on it should uncollapse it.
+If `Shift` is held, then clicking on it should collapse it.
+Otherwise, we open the url handed to us in `destination`, if
+applicable.
+
+*/
+
+  parseClick = (e, destination) => {
+    const { router } = this.context;
+    const { status } = this.props;
+    const { isExpanded } = this.state;
+    if (!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();
+    }
+  }
+
+/*
+
+####  `render()`.
+
+`render()` actually puts our element on the screen. The particulars of
+this operation are further explained in the code below.
+
+*/
+
+  render () {
+    const {
+      parseClick,
+      setExpansion,
+      saveHeight,
+      handleRef,
+    } = this;
+    const { router } = this.context;
+    const {
+      status,
+      account,
+      settings,
+      collapsed,
+      muted,
+      prepend,
+      intersectionObserverWrapper,
+      onOpenVideo,
+      onOpenMedia,
+      autoPlayGif,
+      notification,
+      ...other
+    } = this.props;
+    const { isExpanded, isIntersecting, isHidden } = this.state;
+    let background = null;
+    let attachments = null;
+    let media = null;
+    let mediaIcon = null;
+
+/*
+
+If we don't have a status, then we don't render anything.
+
+*/
+
+    if (status === null) {
+      return null;
+    }
+
+/*
+
+If our status is offscreen and hidden, then we render an empty <div> in
+its place. We fill it with "content" but note that opacity is set to 0.
+
+*/
+
+    if (!isIntersecting && isHidden) {
+      return (
+        <div
+          ref={this.handleRef}
+          data-id={status.get('id')}
+          style={{
+            height   : `${this.height}px`,
+            opacity  : 0,
+            overflow : 'hidden',
+          }}
+        >
+          {
+            status.getIn(['account', 'display_name']) ||
+            status.getIn(['account', 'username'])
+          }
+          {status.get('content')}
+        </div>
+      );
+    }
+
+/*
+
+If user backgrounds for collapsed statuses are enabled, then we
+initialize our background accordingly. This will only be rendered if
+the status is collapsed.
+
+*/
+
+    if (
+      settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])
+    ) background = status.getIn(['account', 'header']);
+
+/*
+
+This handles our media attachments. Note that we don't show media on
+muted (notification) statuses. If the media type is unknown, then we
+simply ignore it.
+
+After we have generated our appropriate media element and stored it in
+`media`, we snatch the thumbnail to use as our `background` if media
+backgrounds for collapsed statuses are enabled.
+
+*/
+
+    attachments = status.get('media_attachments');
+    if (attachments.size && !muted) {
+      if (attachments.some((item) => item.get('type') === 'unknown')) {
+
+      } else if (
+        attachments.getIn([0, 'type']) === 'video'
+      ) {
+        media = (  //  Media type is 'video'
+          <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']);
+    }
+
+/*
+
+Here we prepare extra data-* attributes for CSS selectors.
+Users can use those for theming, hiding avatars etc via UserStyle
+
+*/
+
+    const selectorAttribs = {
+      'data-status-by': `@${status.getIn(['account', 'acct'])}`,
+    };
+
+    if (prepend && account) {
+      const notifKind = {
+        favourite: 'favourited',
+        reblog: 'boosted',
+        reblogged_by: 'boosted',
+      }[prepend];
+
+      selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
+    }
+
+/*
+
+Finally, we can render our status. We just put the pieces together
+from above. We only render the action bar if the status isn't
+collapsed.
+
+*/
+
+    return (
+      <article
+        className={
+          `status${
+            muted ? ' muted' : ''
+          } status-${status.get('visibility')}${
+            isExpanded === false ? ' collapsed' : ''
+          }${
+            isExpanded === false && background ? ' has-background' : ''
+          }${
+            this.state.markedForDelete ? ' marked-for-delete' : ''
+          }`
+        }
+        style={{
+          backgroundImage: (
+            isExpanded === false && background ?
+            `url(${background})` :
+            'none'
+          ),
+        }}
+        ref={handleRef}
+        {...selectorAttribs}
+      >
+        {prepend && account ? (
+          <StatusPrepend
+            type={prepend}
+            account={account}
+            parseClick={parseClick}
+            notificationId={this.props.notificationId}
+          />
+        ) : null}
+        <StatusHeader
+          status={status}
+          friend={account}
+          mediaIcon={mediaIcon}
+          collapsible={settings.getIn(['collapsed', 'enabled'])}
+          collapsed={isExpanded === false}
+          parseClick={parseClick}
+          setExpansion={setExpansion}
+        />
+        <StatusContent
+          status={status}
+          media={media}
+          mediaIcon={mediaIcon}
+          expanded={isExpanded}
+          setExpansion={setExpansion}
+          onHeightUpdate={saveHeight}
+          parseClick={parseClick}
+          disabled={!router}
+        />
+        {isExpanded !== false ? (
+          <StatusActionBar
+            {...other}
+            status={status}
+            account={status.get('account')}
+          />
+        ) : null}
+        {notification ? (
+          <NotificationOverlayContainer
+            notification={notification}
+          />
+        ) : null}
+      </article>
+    );
+
+  }
+
+}

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

@@ -0,0 +1,203 @@
+//  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

@@ -0,0 +1,165 @@
+/*
+
+`<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/visibility_icon.js

@@ -0,0 +1,48 @@
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const messages = defineMessages({
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+});
+
+@injectIntl
+export default class VisibilityIcon extends ImmutablePureComponent {
+
+  static propTypes = {
+    visibility: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+    withLabel: PropTypes.bool,
+  };
+
+  render() {
+    const { withLabel, visibility, intl } = this.props;
+
+    const visibilityClass = {
+      public: 'globe',
+      unlisted: 'unlock-alt',
+      private: 'lock',
+      direct: 'envelope',
+    }[visibility];
+
+    const label = intl.formatMessage(messages[visibility]);
+
+    const icon = (<i
+      className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
+      title={label}
+      aria-hidden='true'
+    />);
+
+    if (withLabel) {
+      return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
+    } else {
+      return icon;
+    }
+  }
+
+}

app/javascript/glitch/locales/en.json

@@ -0,0 +1,43 @@
+{
+  "getting_started.open_source_notice": "Glitchsoc is free open source software forked from {Mastodon}. You can contribute or report issues on GitHub at {github}.",
+  "layout.auto": "Auto",
+  "layout.current_is": "Your current layout is:",
+  "layout.desktop": "Desktop",
+  "layout.mobile": "Mobile",
+  "navigation_bar.app_settings": "App settings",
+  "getting_started.onboarding": "Show me around",
+  "onboarding.page_one.federation": "{domain} is an 'instance' of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
+  "onboarding.page_one.welcome": "Welcome to {domain}!",
+  "onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}, and is compatible with any Mastodon instance or app. Glitchsoc is entirely free and open-source. You can report bugs, request features, or contribute to the code on {github}.",
+  "settings.auto_collapse": "Automatic collapsing",
+  "settings.auto_collapse_all": "Everything",
+  "settings.auto_collapse_lengthy": "Lengthy toots",
+  "settings.auto_collapse_media": "Toots with media",
+  "settings.auto_collapse_notifications": "Notifications",
+  "settings.auto_collapse_replies": "Replies",
+  "settings.close": "Close",
+  "settings.collapsed_statuses": "Collapsed toots",
+  "settings.enable_collapsed": "Enable collapsed toots",
+  "settings.general": "General",
+  "settings.image_backgrounds": "Image backgrounds",
+  "settings.image_backgrounds_media": "Preview collapsed toot media",
+  "settings.image_backgrounds_users": "Give collapsed toots an image background",
+  "settings.media": "Media",
+  "settings.media_letterbox": "Letterbox media",
+  "settings.media_fullwidth": "Full-width media previews",
+  "settings.preferences": "User preferences",
+  "settings.wide_view": "Wide view (Desktop mode only)",
+  "settings.navbar_under": "Navbar at the bottom (Mobile only)",
+  "status.collapse": "Collapse",
+  "status.uncollapse": "Uncollapse",
+
+  "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/reducers/local_settings.js

@@ -0,0 +1,124 @@
+/*
+
+`reducers/local_settings`
+========================
+
+>   For more information on the contents of this file, please contact:
+>
+>   - kibigo! [@kibi@glitch.social]
+
+This file provides our Redux reducers related to local settings. The
+associated actions are:
+
+ -  __`STORE_HYDRATE` :__
+    Used to hydrate the store with its initial values.
+
+ -  __`LOCAL_SETTING_CHANGE` :__
+    Used to change the value of a local setting in the store.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Imports:
+--------
+
+*/
+
+//  Package imports  //
+import { Map as ImmutableMap } from 'immutable';
+
+//  Mastodon imports  //
+import { STORE_HYDRATE } from '../../mastodon/actions/store';
+
+//  Our imports  //
+import { LOCAL_SETTING_CHANGE } from '../actions/local_settings';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+initialState:
+-------------
+
+You can see the default values for all of our local settings here.
+These are only used if no previously-saved values exist.
+
+*/
+
+const initialState = ImmutableMap({
+  layout    : 'auto',
+  stretch   : true,
+  navbar_under : false,
+  collapsed : ImmutableMap({
+    enabled     : true,
+    auto        : ImmutableMap({
+      all              : false,
+      notifications    : true,
+      lengthy          : true,
+      replies          : false,
+      media            : false,
+    }),
+    backgrounds : ImmutableMap({
+      user_backgrounds : false,
+      preview_images   : false,
+    }),
+  }),
+  media     : ImmutableMap({
+    letterbox   : true,
+    fullwidth   : true,
+  }),
+});
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+Helper functions:
+-----------------
+
+###  `hydrate(state, localSettings)`
+
+`hydrate()` is used to hydrate the `local_settings` part of our store
+with its initial values. The `state` will probably just be the
+`initialState`, and the `localSettings` should be whatever we pulled
+from `localStorage`.
+
+*/
+
+const hydrate = (state, localSettings) => state.mergeDeep(localSettings);
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*
+
+`localSettings(state = initialState, action)`:
+----------------------------------------------
+
+This function holds our actual reducer.
+
+If our action is `STORE_HYDRATE`, then we call `hydrate()` with the
+`local_settings` property of the provided `action.state`.
+
+If our action is `LOCAL_SETTING_CHANGE`, then we set `action.key` in
+our state to the provided `action.value`. Note that `action.key` MUST
+be an array, since we use `setIn()`.
+
+>   __Note :__
+>   We call this function `localSettings`, but its associated object
+>   in the store is `local_settings`.
+
+*/
+
+export default function localSettings(state = initialState, action) {
+  switch(action.type) {
+  case STORE_HYDRATE:
+    return hydrate(state, action.state.get('local_settings'));
+  case LOCAL_SETTING_CHANGE:
+    return state.setIn(action.key, action.value);
+  default:
+    return state;
+  }
+};

app/javascript/glitch/util/bio_metadata.js

@@ -0,0 +1,420 @@
+/*
+
+`util/bio_metadata`
+===================
+
+>   For more information on the contents of this file, please contact:
+>
+>   - kibigo! [@kibi@glitch.social]
+
+This file provides two functions for dealing with bio metadata. The
+functions are:
+
+ -  __`processBio(content)` :__
+    Processes `content` to extract any frontmatter. The returned
+    object has two properties: `text`, which contains the text of
+    `content` sans-frontmatter, and `metadata`, which is an array
+    of key-value pairs (in two-element array format). If no
+    frontmatter was provided in `content`, then `metadata` will be
+    an empty array.
+
+ -  __`createBio(note, data)` :__
+    Reverses the process in `processBio()`; takes a `note` and an
+    array of two-element arrays (which should give keys and values)
+    and outputs a string containing a well-formed bio with
+    frontmatter.
+
+*/
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+/*********************************************************************\
+
+                                       To my lovely code maintainers,
+
+  The syntax recognized by the Mastodon frontend for its bio metadata
+  feature is a subset of that provided by the YAML 1.2 specification.
+  In particular, Mastodon recognizes metadata which is provided as an
+  implicit YAML map, where each key-value pair takes up only a single
+  line (no multi-line values are permitted). To simplify the level of
+  processing required, Mastodon metadata frontmatter has been limited
+  to only allow those characters in the `c-printable` set, as defined
+  by the YAML 1.2 specification, instead of permitting those from the
+  `nb-json` characters inside double-quoted strings like YAML proper.
+    ¶ It is important to note that Mastodon only borrows the *syntax*
+  of YAML, not its semantics. This is to say, Mastodon won't make any
+  attempt to interpret the data it receives. `true` will not become a
+  boolean; `56` will not be interpreted as a number. Rather, each key
+  and every value will be read as a string, and as a string they will
+  remain. The order of the pairs is unchanged, and any duplicate keys
+  are preserved. However, YAML escape sequences will be replaced with
+  the proper interpretations according to the YAML 1.2 specification.
+    ¶ The implementation provided below interprets `<br>` as `\n` and
+  allows for an open <p> tag at the beginning of the bio. It replaces
+  the escaped character entities `&apos;` and `&quot;` with single or
+  double quotes, respectively, prior to processing. However, no other
+  escaped characters are replaced, not even those which might have an
+  impact on the syntax otherwise. These minor allowances are provided
+  because the Mastodon backend will insert these things automatically
+  into a bio before sending it through the API, so it is important we
+  account for them. Aside from this, the YAML frontmatter must be the
+  very first thing in the bio, leading with three consecutive hyphen-
+  minues (`---`), and ending with the same or, alternatively, instead
+  with three periods (`...`). No limits have been set with respect to
+  the number of characters permitted in the frontmatter, although one
+  should note that only limited space is provided for them in the UI.
+    ¶ The regular expression used to check the existence of, and then
+  process, the YAML frontmatter has been split into a number of small
+  components in the code below, in the vain hope that it will be much
+  easier to read and to maintain. I leave it to the future readers of
+  this code to determine the extent of my successes in this endeavor.
+
+                                       Sending love + warmth eternal,
+                                       - kibigo [@kibi@glitch.social]
+
+\*********************************************************************/
+
+/*  "u" FLAG COMPATABILITY  */
+
+let compat_mode = false;
+try {
+  new RegExp('.', 'u');
+} catch (e) {
+  compat_mode = true;
+}
+
+/*  CONVENIENCE FUNCTIONS  */
+
+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      =  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*\/?>/;
+const ESCAPE_CHAR       = /[0abt\tnvfre "\/\\N_LP]/;
+const HEXADECIMAL_CHARS = /[0-9a-fA-F]/;
+const INDICATOR         = /[-?:,[\]{}&#*!|>'"%@`]/;
+const FLOW_CHAR         = /[,[\]{}]/;
+
+/*  NEGATED CHARACTER CLASSES  */
+
+const NOT_WHITE_SPACE   = unirex('(?!' + rexstr(WHITE_SPACE) + ')[^]');
+const NOT_LINE_BREAK    = unirex('(?!' + rexstr(LINE_BREAK) + ')[^]');
+const NOT_INDICATOR     = unirex('(?!' + rexstr(INDICATOR) + ')[^]');
+const NOT_FLOW_CHAR     = unirex('(?!' + rexstr(FLOW_CHAR) + ')[^]');
+const NOT_ALLOWED_CHAR  = unirex(
+  '(?!' + rexstr(ALLOWED_CHAR) + ')[^]'
+);
+
+/*  BASIC CONSTRUCTS  */
+
+const ANY_WHITE_SPACE   = unirex(rexstr(WHITE_SPACE) + '*');
+const ANY_ALLOWED_CHARS = unirex(rexstr(ALLOWED_CHAR) + '*');
+const NEW_LINE          = unirex(
+  rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK)
+);
+const SOME_NEW_LINES    = unirex(
+  '(?:' + rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK) + ')+'
+);
+const POSSIBLE_STARTS   = unirex(
+  rexstr(DOCUMENT_START) + rexstr(/<p[^<>]*>/) + '?'
+);
+const POSSIBLE_ENDS     = unirex(
+  rexstr(SOME_NEW_LINES) + '|' +
+  rexstr(DOCUMENT_END) + '|' +
+  rexstr(/<\/p>/)
+);
+const CHARACTER_ESCAPE  = unirex(
+  rexstr(/\\/) +
+  '(?:' +
+    rexstr(ESCAPE_CHAR) + '|' +
+    rexstr(/x/) + rexstr(HEXADECIMAL_CHARS) + '{2}' + '|' +
+    rexstr(/u/) + rexstr(HEXADECIMAL_CHARS) + '{4}' + '|' +
+    rexstr(/U/) + rexstr(HEXADECIMAL_CHARS) + '{8}' +
+  ')'
+);
+const ESCAPED_CHAR      = unirex(
+  rexstr(/(?!["\\])/) + rexstr(NOT_LINE_BREAK) + '|' +
+  rexstr(CHARACTER_ESCAPE)
+);
+const ANY_ESCAPED_CHARS = unirex(
+  rexstr(ESCAPED_CHAR) + '*'
+);
+const ESCAPED_APOS      = unirex(
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' + rexstr(/[^']|''/)
+);
+const ANY_ESCAPED_APOS  = unirex(
+  rexstr(ESCAPED_APOS) + '*'
+);
+const FIRST_KEY_CHAR    = unirex(
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+  '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+  rexstr(NOT_INDICATOR) + '|' +
+  rexstr(/[?:-]/) +
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+  '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+  '(?=' + rexstr(NOT_FLOW_CHAR) + ')'
+);
+const FIRST_VALUE_CHAR  = unirex(
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+  '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+  rexstr(NOT_INDICATOR) + '|' +
+  rexstr(/[?:-]/) +
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+  '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
+  //  Flow indicators are allowed in values.
+);
+const LATER_KEY_CHAR    = unirex(
+  rexstr(WHITE_SPACE) + '|' +
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+  '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+  '(?=' + rexstr(NOT_FLOW_CHAR) + ')' +
+  rexstr(/[^:#]#?/) + '|' +
+  rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
+);
+const LATER_VALUE_CHAR  = unirex(
+  rexstr(WHITE_SPACE) + '|' +
+  '(?=' + rexstr(NOT_LINE_BREAK) + ')' +
+  '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +
+  //  Flow indicators are allowed in values.
+  rexstr(/[^:#]#?/) + '|' +
+  rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')'
+);
+
+/*  YAML CONSTRUCTS  */
+
+const YAML_START        = unirex(
+  rexstr(ANY_WHITE_SPACE) + rexstr(/---/)
+);
+const YAML_END          = unirex(
+  rexstr(ANY_WHITE_SPACE) + rexstr(/(?:---|\.\.\.)/)
+);
+const YAML_LOOKAHEAD    = unirex(
+  '(?=' +
+    rexstr(YAML_START) +
+    rexstr(ANY_ALLOWED_CHARS) + rexstr(NEW_LINE) +
+    rexstr(YAML_END) + rexstr(POSSIBLE_ENDS) +
+  ')'
+);
+const YAML_DOUBLE_QUOTE = unirex(
+  rexstr(/"/) + rexstr(ANY_ESCAPED_CHARS) + rexstr(/"/)
+);
+const YAML_SINGLE_QUOTE = unirex(
+  rexstr(/'/) + rexstr(ANY_ESCAPED_APOS) + rexstr(/'/)
+);
+const YAML_SIMPLE_KEY   = unirex(
+  rexstr(FIRST_KEY_CHAR) + rexstr(LATER_KEY_CHAR) + '*'
+);
+const YAML_SIMPLE_VALUE = unirex(
+  rexstr(FIRST_VALUE_CHAR) + rexstr(LATER_VALUE_CHAR) + '*'
+);
+const YAML_KEY          = unirex(
+  rexstr(YAML_DOUBLE_QUOTE) + '|' +
+  rexstr(YAML_SINGLE_QUOTE) + '|' +
+  rexstr(YAML_SIMPLE_KEY)
+);
+const YAML_VALUE        = unirex(
+  rexstr(YAML_DOUBLE_QUOTE) + '|' +
+  rexstr(YAML_SINGLE_QUOTE) + '|' +
+  rexstr(YAML_SIMPLE_VALUE)
+);
+const YAML_SEPARATOR    = unirex(
+  rexstr(ANY_WHITE_SPACE) +
+  ':' + rexstr(WHITE_SPACE) +
+  rexstr(ANY_WHITE_SPACE)
+);
+const YAML_LINE         = unirex(
+  '(' + rexstr(YAML_KEY) + ')' +
+  rexstr(YAML_SEPARATOR) +
+  '(' + rexstr(YAML_VALUE) + ')'
+);
+
+/*  FRONTMATTER REGEX  */
+
+const YAML_FRONTMATTER  = unirex(
+  rexstr(POSSIBLE_STARTS) +
+  rexstr(YAML_LOOKAHEAD) +
+  rexstr(YAML_START) + rexstr(SOME_NEW_LINES) +
+  '(?:' +
+    '(' + rexstr(INDENTATION) + ')' +
+    rexstr(YAML_LINE) + rexstr(SOME_NEW_LINES) +
+    '(?:' +
+      '\\1' + rexstr(YAML_LINE) + rexstr(SOME_NEW_LINES) +
+    '){0,4}' +
+  ')?' +
+  rexstr(YAML_END) + rexstr(POSSIBLE_ENDS)
+);
+
+/*  SEARCHES  */
+
+const FIND_YAML_LINES   = unirex(
+  rexstr(NEW_LINE) + rexstr(INDENTATION) + rexstr(YAML_LINE)
+);
+
+/*  STRING PROCESSING  */
+
+function processString(str) {
+  switch (str.charAt(0)) {
+  case '"':
+    return str
+      .substring(1, str.length - 1)
+      .replace(/\\0/g, '\x00')
+      .replace(/\\a/g, '\x07')
+      .replace(/\\b/g, '\x08')
+      .replace(/\\t/g, '\x09')
+      .replace(/\\\x09/g, '\x09')
+      .replace(/\\n/g, '\x0a')
+      .replace(/\\v/g, '\x0b')
+      .replace(/\\f/g, '\x0c')
+      .replace(/\\r/g, '\x0d')
+      .replace(/\\e/g, '\x1b')
+      .replace(/\\ /g, '\x20')
+      .replace(/\\"/g, '\x22')
+      .replace(/\\\//g, '\x2f')
+      .replace(/\\\\/g, '\x5c')
+      .replace(/\\N/g, '\x85')
+      .replace(/\\_/g, '\xa0')
+      .replace(/\\L/g, '\u2028')
+      .replace(/\\P/g, '\u2029')
+      .replace(
+        new RegExp(
+          unirex(
+            rexstr(/\\x/) + '(' + rexstr(HEXADECIMAL_CHARS) + '{2})'
+          ), 'gu'
+        ), (_, n) => String.fromCodePoint('0x' + n)
+      )
+      .replace(
+        new RegExp(
+          unirex(
+            rexstr(/\\u/) + '(' + rexstr(HEXADECIMAL_CHARS) + '{4})'
+          ), 'gu'
+        ), (_, n) => String.fromCodePoint('0x' + n)
+      )
+      .replace(
+        new RegExp(
+          unirex(
+            rexstr(/\\U/) + '(' + rexstr(HEXADECIMAL_CHARS) + '{8})'
+          ), 'gu'
+        ), (_, n) => String.fromCodePoint('0x' + n)
+      );
+  case '\'':
+    return str
+      .substring(1, str.length - 1)
+      .replace(/''/g, '\'');
+  default:
+    return str;
+  }
+}
+
+/*  BIO PROCESSING  */
+
+export function processBio(content) {
+  content = content.replace(/&quot;/g, '"').replace(/&apos;/g, '\'');
+  let result = {
+    text: content,
+    metadata: [],
+  };
+  let yaml = content.match(YAML_FRONTMATTER);
+  if (!yaml) return result;
+  else yaml = yaml[0];
+  let start = content.search(YAML_START);
+  let end = start + yaml.length - yaml.search(YAML_START);
+  result.text = content.substr(0, start) + content.substr(end);
+  let metadata = null;
+  let query = new RegExp(FIND_YAML_LINES, 'g');
+  while ((metadata = query.exec(yaml))) {
+    result.metadata.push([
+      processString(metadata[1]),
+      processString(metadata[2]),
+    ]);
+  }
+  return result;
+}
+
+/*  BIO CREATION  */
+
+export function createBio(note, data) {
+  if (!note) note = '';
+  let frontmatter = '';
+  if ((data && data.length) || note.match(/^\s*---\s+/)) {
+    if (!data) frontmatter = '---\n...\n';
+    else {
+      frontmatter += '---\n';
+      for (let i = 0; i < data.length; i++) {
+        let key = '' + data[i][0];
+        let val = '' + data[i][1];
+
+        //  Key processing
+        if (key === (key.match(YAML_SIMPLE_KEY) || [])[0]) /*  do nothing  */;
+        else if (key.indexOf('\'') === -1 && key === (key.match(ANY_ESCAPED_APOS) || [])[0]) key = '\'' + key + '\'';
+        else {
+          key = key
+            .replace(/\x00/g, '\\0')
+            .replace(/\x07/g, '\\a')
+            .replace(/\x08/g, '\\b')
+            .replace(/\x0a/g, '\\n')
+            .replace(/\x0b/g, '\\v')
+            .replace(/\x0c/g, '\\f')
+            .replace(/\x0d/g, '\\r')
+            .replace(/\x1b/g, '\\e')
+            .replace(/\x22/g, '\\"')
+            .replace(/\x5c/g, '\\\\');
+          let badchars = key.match(
+            new RegExp(rexstr(NOT_ALLOWED_CHAR), 'gu')
+          ) || [];
+          for (let j = 0; j < badchars.length; j++) {
+            key = key.replace(
+              badchars[i],
+              '\\u' + badchars[i].codePointAt(0).toLocaleString('en', {
+                useGrouping: false,
+                minimumIntegerDigits: 4,
+              })
+            );
+          }
+          key = '"' + key + '"';
+        }
+
+        //  Value processing
+        if (val === (val.match(YAML_SIMPLE_VALUE) || [])[0]) /*  do nothing  */;
+        else if (val.indexOf('\'') === -1 && val === (val.match(ANY_ESCAPED_APOS) || [])[0]) val = '\'' + val + '\'';
+        else {
+          val = val
+            .replace(/\x00/g, '\\0')
+            .replace(/\x07/g, '\\a')
+            .replace(/\x08/g, '\\b')
+            .replace(/\x0a/g, '\\n')
+            .replace(/\x0b/g, '\\v')
+            .replace(/\x0c/g, '\\f')
+            .replace(/\x0d/g, '\\r')
+            .replace(/\x1b/g, '\\e')
+            .replace(/\x22/g, '\\"')
+            .replace(/\x5c/g, '\\\\');
+          let badchars = val.match(
+            new RegExp(rexstr(NOT_ALLOWED_CHAR), 'gu')
+          ) || [];
+          for (let j = 0; j < badchars.length; j++) {
+            val = val.replace(
+              badchars[i],
+              '\\u' + badchars[i].codePointAt(0).toLocaleString('en', {
+                useGrouping: false,
+                minimumIntegerDigits: 4,
+              })
+            );
+          }
+          val = '"' + val + '"';
+        }
+
+        frontmatter += key + ': ' + val + '\n';
+      }
+      frontmatter += '...\n';
+    }
+  }
+  return frontmatter + note;
+}

app/javascript/mastodon/actions/accounts.js

@@ -240,11 +240,11 @@ export function unblockAccountFail(error) {
 };
 
 
-export function muteAccount(id) {
+export function muteAccount(id, notifications) {
   return (dispatch, getState) => {
     dispatch(muteAccountRequest(id));
 
-    api(getState).post(`/api/v1/accounts/${id}/mute`).then(response => {
+    api(getState).post(`/api/v1/accounts/${id}/mute`, { notifications }).then(response => {
       // Pass in entire statuses map so we can use it to filter stuff in different parts of the reducers
       dispatch(muteAccountSuccess(response.data, getState().get('statuses')));
     }).catch(error => {

app/javascript/mastodon/actions/compose.js

@@ -1,6 +1,12 @@
 import api from '../api';
+import emojione from 'emojione';
 
-import { updateTimeline } from './timelines';
+import {
+  updateTimeline,
+  refreshHomeTimeline,
+  refreshCommunityTimeline,
+  refreshPublicTimeline,
+} from './timelines';
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
 export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
@@ -17,11 +23,13 @@ export const COMPOSE_UPLOAD_UNDO     = 'COMPOSE_UPLOAD_UNDO';
 
 export const COMPOSE_SUGGESTIONS_CLEAR = 'COMPOSE_SUGGESTIONS_CLEAR';
 export const COMPOSE_SUGGESTIONS_READY = 'COMPOSE_SUGGESTIONS_READY';
+export const COMPOSE_SUGGESTIONS_READY_TXT = 'COMPOSE_SUGGESTIONS_READY_TXT';
 export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT';
 
 export const COMPOSE_MOUNT   = 'COMPOSE_MOUNT';
 export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
+export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE';
 export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
@@ -72,14 +80,16 @@ export function mentionCompose(account, router) {
 
 export function submitCompose() {
   return function (dispatch, getState) {
-    const status = getState().getIn(['compose', 'text'], '');
+    let status = getState().getIn(['compose', 'text'], '');
 
     if (!status || !status.length) {
       return;
     }
 
     dispatch(submitComposeRequest());
-
+    if (getState().getIn(['compose', 'advanced_options', 'do_not_federate'])) {
+      status = status + ' 👁️';
+    }
     api(getState).post('/api/v1/statuses', {
       status,
       in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
@@ -95,16 +105,20 @@ export function submitCompose() {
       dispatch(submitComposeSuccess({ ...response.data }));
 
       // To make the app more responsive, immediately get the status into the columns
-      dispatch(updateTimeline('home', { ...response.data }));
+
+      const insertOrRefresh = (timelineId, refreshAction) => {
+        if (getState().getIn(['timelines', timelineId, 'online'])) {
+          dispatch(updateTimeline(timelineId, { ...response.data }));
+        } else if (getState().getIn(['timelines', timelineId, 'loaded'])) {
+          dispatch(refreshAction());
+        }
+      };
+
+      insertOrRefresh('home', refreshHomeTimeline);
 
       if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
-        if (getState().getIn(['timelines', 'community', 'loaded'])) {
-          dispatch(updateTimeline('community', { ...response.data }));
-        }
-
-        if (getState().getIn(['timelines', 'public', 'loaded'])) {
-          dispatch(updateTimeline('public', { ...response.data }));
-        }
+        insertOrRefresh('community', refreshCommunityTimeline);
+        insertOrRefresh('public', refreshPublicTimeline);
       }
     }).catch(function (error) {
       dispatch(submitComposeFail(error));
@@ -199,18 +213,56 @@ export function clearComposeSuggestions() {
   };
 };
 
+let allShortcodes = null; // cached list of all shortcodes for suggestions
+
 export function fetchComposeSuggestions(token) {
-  return (dispatch, getState) => {
-    api(getState).get('/api/v1/accounts/search', {
-      params: {
-        q: token,
-        resolve: false,
-        limit: 4,
-      },
-    }).then(response => {
-      dispatch(readyComposeSuggestions(token, response.data));
-    });
-  };
+  let leading = token[0];
+
+  if (leading === '@') {
+    // handle search
+    return (dispatch, getState) => {
+      api(getState).get('/api/v1/accounts/search', {
+        params: {
+          q: token.slice(1), // remove the '@'
+          resolve: false,
+          limit: 4,
+        },
+      }).then(response => {
+        dispatch(readyComposeSuggestions(token, response.data));
+      });
+    };
+  } else if (leading === ':') {
+    // shortcode
+    if (!allShortcodes) {
+      allShortcodes = Object.keys(emojione.emojioneList);
+      // TODO when we have custom emojons merged, add them to this shortcode list
+    }
+    return (dispatch) => {
+      const innertxt = token.slice(1);
+      if (innertxt.length > 1) { // prevent searching single letter, causes lag
+        dispatch(readyComposeSuggestionsTxt(token, allShortcodes.filter((sc) => {
+          return sc.indexOf(innertxt) !== -1;
+        }).sort((a, b) => {
+          if (a.indexOf(token) === 0 && b.indexOf(token) === 0) return a.localeCompare(b);
+          if (a.indexOf(token) === 0) return -1;
+          if (b.indexOf(token) === 0) return 1;
+          return a.localeCompare(b);
+        })));
+      }
+    };
+  } else {
+    // hashtag
+    return (dispatch, getState) => {
+      api(getState).get('/api/v1/search', {
+        params: {
+          q: token,
+          resolve: true,
+        },
+      }).then(response => {
+        dispatch(readyComposeSuggestionsTxt(token, response.data.hashtags.map((ht) => `#${ht}`)));
+      });
+    };
+  }
 };
 
 export function readyComposeSuggestions(token, accounts) {
@@ -221,9 +273,19 @@ export function readyComposeSuggestions(token, accounts) {
   };
 };
 
+export function readyComposeSuggestionsTxt(token, items) {
+  return {
+    type: COMPOSE_SUGGESTIONS_READY_TXT,
+    token,
+    items,
+  };
+};
+
 export function selectComposeSuggestion(position, token, accountId) {
   return (dispatch, getState) => {
-    const completion = getState().getIn(['accounts', accountId, 'acct']);
+    const completion = (typeof accountId === 'string') ?
+      accountId.slice(1) : // text suggestion: discard the leading : or # - the replacing code replaces only what follows
+      getState().getIn(['accounts', accountId, 'acct']);
 
     dispatch({
       type: COMPOSE_SUGGESTION_SELECT,
@@ -246,6 +308,13 @@ export function unmountCompose() {
   };
 };
 
+export function toggleComposeAdvancedOption(option) {
+  return {
+    type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
+    option: option,
+  };
+}
+
 export function changeComposeSensitivity() {
   return {
     type: COMPOSE_SENSITIVITY_CHANGE,

app/javascript/mastodon/actions/mutes.js

@@ -1,5 +1,6 @@
 import api, { getLinks } from '../api';
 import { fetchRelationships } from './accounts';
+import { openModal } from '../../mastodon/actions/modal';
 
 export const MUTES_FETCH_REQUEST = 'MUTES_FETCH_REQUEST';
 export const MUTES_FETCH_SUCCESS = 'MUTES_FETCH_SUCCESS';
@@ -9,6 +10,9 @@ export const MUTES_EXPAND_REQUEST = 'MUTES_EXPAND_REQUEST';
 export const MUTES_EXPAND_SUCCESS = 'MUTES_EXPAND_SUCCESS';
 export const MUTES_EXPAND_FAIL    = 'MUTES_EXPAND_FAIL';
 
+export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
+export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
+
 export function fetchMutes() {
   return (dispatch, getState) => {
     dispatch(fetchMutesRequest());
@@ -80,3 +84,20 @@ export function expandMutesFail(error) {
     error,
   };
 };
+
+export function initMuteModal(account) {
+  return dispatch => {
+    dispatch({
+      type: MUTES_INIT_MODAL,
+      account,
+    });
+
+    dispatch(openModal('MUTE'));
+  };
+}
+
+export function toggleHideNotifications() {
+  return dispatch => {
+    dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS });
+  };
+}

app/javascript/mastodon/actions/notifications.js

@@ -6,6 +6,17 @@ import { defineMessages } from 'react-intl';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
 
+// tracking the notif cleaning request
+export const NOTIFICATIONS_DELETE_MARKED_REQUEST = 'NOTIFICATIONS_DELETE_MARKED_REQUEST';
+export const NOTIFICATIONS_DELETE_MARKED_SUCCESS = 'NOTIFICATIONS_DELETE_MARKED_SUCCESS';
+export const NOTIFICATIONS_DELETE_MARKED_FAIL = 'NOTIFICATIONS_DELETE_MARKED_FAIL';
+export const NOTIFICATIONS_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';
+// Mark one for delete
+export const NOTIFICATION_MARK_FOR_DELETE = 'NOTIFICATION_MARK_FOR_DELETE';
+
 export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
 export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
 export const NOTIFICATIONS_REFRESH_FAIL    = 'NOTIFICATIONS_REFRESH_FAIL';
@@ -187,3 +198,67 @@ export function scrollTopNotifications(top) {
     top,
   };
 };
+
+export function deleteMarkedNotifications() {
+  return (dispatch, getState) => {
+    dispatch(deleteMarkedNotificationsRequest());
+
+    let ids = [];
+    getState().getIn(['notifications', 'items']).forEach((n) => {
+      if (n.get('markedForDelete')) {
+        ids.push(n.get('id'));
+      }
+    });
+
+    if (ids.length === 0) {
+      return;
+    }
+
+    api(getState).delete(`/api/v1/notifications/destroy_multiple?ids[]=${ids.join('&ids[]=')}`).then(() => {
+      dispatch(deleteMarkedNotificationsSuccess());
+    }).catch(error => {
+      console.error(error);
+      dispatch(deleteMarkedNotificationsFail(error));
+    });
+  };
+};
+
+export function enterNotificationClearingMode(yes) {
+  return {
+    type: NOTIFICATIONS_ENTER_CLEARING_MODE,
+    yes: 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,
+  };
+};
+
+export function deleteMarkedNotificationsFail() {
+  return {
+    type: NOTIFICATIONS_DELETE_MARKED_FAIL,
+  };
+};
+
+export function markNotificationForDelete(id, yes) {
+  return {
+    type: NOTIFICATION_MARK_FOR_DELETE,
+    id: id,
+    yes: yes,
+  };
+};
+
+export function deleteMarkedNotificationsSuccess() {
+  return {
+    type: NOTIFICATIONS_DELETE_MARKED_SUCCESS,
+  };
+};

app/javascript/mastodon/actions/pin_statuses.js

@@ -0,0 +1,39 @@
+import api from '../api';
+
+export const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
+export const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';
+export const PINNED_STATUSES_FETCH_FAIL = 'PINNED_STATUSES_FETCH_FAIL';
+
+export function fetchPinnedStatuses() {
+  return (dispatch, getState) => {
+    dispatch(fetchPinnedStatusesRequest());
+
+    const accountId = getState().getIn(['meta', 'me']);
+    api(getState).get(`/api/v1/accounts/${accountId}/statuses`, { params: { pinned: true } }).then(response => {
+      dispatch(fetchPinnedStatusesSuccess(response.data, null));
+    }).catch(error => {
+      dispatch(fetchPinnedStatusesFail(error));
+    });
+  };
+};
+
+export function fetchPinnedStatusesRequest() {
+  return {
+    type: PINNED_STATUSES_FETCH_REQUEST,
+  };
+};
+
+export function fetchPinnedStatusesSuccess(statuses, next) {
+  return {
+    type: PINNED_STATUSES_FETCH_SUCCESS,
+    statuses,
+    next,
+  };
+};
+
+export function fetchPinnedStatusesFail(error) {
+  return {
+    type: PINNED_STATUSES_FETCH_FAIL,
+    error,
+  };
+};

app/javascript/mastodon/components/account.js

@@ -14,6 +14,8 @@ const messages = defineMessages({
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
+  mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'You are not currently muting notifications from @{name}. Click to mute notifications' },
+  unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'You are currently muting notifications from @{name}. Click to unmute notifications' },
 });
 
 @injectIntl
@@ -41,6 +43,14 @@ export default class Account extends ImmutablePureComponent {
     this.props.onMute(this.props.account);
   }
 
+  handleMuteNotifications = () => {
+    this.props.onMuteNotifications(this.props.account, true);
+  }
+
+  handleUnmuteNotifications = () => {
+    this.props.onMuteNotifications(this.props.account, false);
+  }
+
   render () {
     const { account, me, intl, hidden } = this.props;
 
@@ -70,7 +80,18 @@ export default class Account extends ImmutablePureComponent {
       } else if (blocking) {
         buttons = <IconButton active icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
       } else if (muting) {
-        buttons = <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />;
+        let hidingNotificationsButton;
+        if (muting.get('notifications')) {
+          hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username')  })} onClick={this.handleUnmuteNotifications} />;
+        } else {
+          hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
+        }
+        buttons = (
+          <div>
+            <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
+            {hidingNotificationsButton}
+          </div>
+        );
       } else {
         buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
       }

app/javascript/mastodon/components/autosuggest_textarea.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
+import AutosuggestShortcode from '../features/compose/components/autosuggest_shortcode';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { isRtl } from '../rtl';
@@ -18,11 +19,12 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
     word = str.slice(left, right + caretPosition);
   }
 
-  if (!word || word.trim().length < 2 || word[0] !== '@') {
+  if (!word || word.trim().length < 2 || ['@', ':', '#'].indexOf(word[0]) === -1) {
     return [null, null];
   }
 
-  word = word.trim().toLowerCase().slice(1);
+  word = word.trim().toLowerCase();
+  // was: .slice(1); - we leave the leading char there, handler can decide what to do based on it
 
   if (word.length > 0) {
     return [left + 1, word];
@@ -41,6 +43,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     onSuggestionSelected: PropTypes.func.isRequired,
     onSuggestionsClearRequested: PropTypes.func.isRequired,
     onSuggestionsFetchRequested: PropTypes.func.isRequired,
+    onLocalSuggestionsFetchRequested: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
     onKeyUp: PropTypes.func,
     onKeyDown: PropTypes.func,
@@ -64,7 +67,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
     if (token !== null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
-      this.props.onSuggestionsFetchRequested(token);
+      if (token[0] === ':') {
+        // faster debounce for shortcodes.
+        // hashtags have long debounce because they're fetched from server.
+        this.props.onLocalSuggestionsFetchRequested(token);
+      } else {
+        this.props.onSuggestionsFetchRequested(token);
+      }
     } else if (token === null) {
       this.setState({ lastToken: null });
       this.props.onSuggestionsClearRequested();
@@ -128,7 +137,9 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
   }
 
   onSuggestionClick = (e) => {
-    const suggestion = Number(e.currentTarget.getAttribute('data-index'));
+    // leave suggestion string unchanged if it's a hash / shortcode suggestion. convert account number to int.
+    const suggestionStr = e.currentTarget.getAttribute('data-index');
+    const suggestion = [':', '#'].indexOf(suggestionStr[0]) !== -1 ? suggestionStr : Number(suggestionStr);
     e.preventDefault();
     this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
     this.textarea.focus();
@@ -151,6 +162,15 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     }
   }
 
+  componentDidUpdate () {
+    if (this.refs.selected) {
+      if (this.refs.selected.scrollIntoViewIfNeeded)
+        this.refs.selected.scrollIntoViewIfNeeded();
+      else
+        this.refs.selected.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+    }
+  }
+
   render () {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
     const { suggestionsHidden, selectedSuggestion } = this.state;
@@ -160,6 +180,14 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
       style.direction = 'rtl';
     }
 
+    let makeItem = (suggestion) => {
+      if (suggestion[0] === ':') return <AutosuggestShortcode shortcode={suggestion} />;
+      if (suggestion[0] === '#') return suggestion; // hashtag
+
+      // else - accounts are always returned as IDs with no prefix
+      return <AutosuggestAccountContainer id={suggestion} />;
+    };
+
     return (
       <div className='autosuggest-textarea'>
         <label>
@@ -183,6 +211,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
         <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
           {suggestions.map((suggestion, i) => (
             <div
+              ref={i === selectedSuggestion ? 'selected' : null}
               role='button'
               tabIndex='0'
               key={suggestion}
@@ -190,7 +219,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
               className={`autosuggest-textarea__suggestions__item ${i === selectedSuggestion ? 'selected' : ''}`}
               onMouseDown={this.onSuggestionClick}
             >
-              <AutosuggestAccountContainer id={suggestion} />
+              {makeItem(suggestion)}
             </div>
           ))}
         </div>

app/javascript/mastodon/components/avatar.js

@@ -64,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

@@ -21,8 +21,8 @@ export default class AvatarOverlay extends React.PureComponent {
 
     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

@@ -7,6 +7,7 @@ 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

@@ -9,7 +9,8 @@ export default class ColumnBackButton extends React.PureComponent {
   };
 
   handleClick = () => {
-    if (window.history && window.history.length === 1) {
+    // if history is exhausted, or we would leave mastodon, just go to root.
+    if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
       this.context.router.history.push('/');
     } else {
       this.context.router.history.goBack();

app/javascript/mastodon/components/column_back_button_slim.js

@@ -9,8 +9,12 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
   };
 
   handleClick = () => {
-    if (window.history && window.history.length === 1) this.context.router.history.push('/');
-    else this.context.router.history.goBack();
+    // if history is exhausted, or we would leave mastodon, just go to root.
+    if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
+      this.context.router.history.push('/');
+    } else {
+      this.context.router.history.goBack();
+    }
   }
 
   render () {

app/javascript/mastodon/components/column_header.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+// Glitch imports
+import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container';
 
 const messages = defineMessages({
   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
@@ -22,14 +27,19 @@ export default class ColumnHeader extends React.PureComponent {
     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,
     onMove: PropTypes.func,
     onClick: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -39,6 +49,7 @@ export default class ColumnHeader extends React.PureComponent {
   state = {
     collapsed: true,
     animating: false,
+    animatingNCD: false,
   };
 
   handleToggleClick = (e) => {
@@ -59,17 +70,32 @@ export default class ColumnHeader extends React.PureComponent {
   }
 
   handleBackClick = () => {
-    if (window.history && window.history.length === 1) this.context.router.history.push('/');
-    else this.context.router.history.goBack();
+    // if history is exhausted, or we would leave mastodon, just go to root.
+    if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
+      this.context.router.history.push('/');
+    } else {
+      this.context.router.history.goBack();
+    }
   }
 
   handleTransitionEnd = () => {
     this.setState({ animating: false });
   }
 
+  handleTransitionEndNCD = () => {
+    this.setState({ animatingNCD: false });
+  }
+
+  onEnterCleaningMode = () => {
+    this.setState({ animatingNCD: true });
+    this.props.onEnterCleaningMode(!this.props.notifCleaningActive);
+  }
+
   render () {
-    const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = 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;
 
     const wrapperClassName = classNames('column-header__wrapper', {
       'active': active,
@@ -88,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'>
@@ -138,13 +176,30 @@ export default class ColumnHeader extends React.PureComponent {
         <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'>
             {backButton}
+            { notifCleaning ? (
+              <button
+                aria-label={msgEnterNotifCleaning}
+                title={msgEnterNotifCleaning}
+                onClick={this.onEnterCleaningMode}
+                className={notifCleaningButtonClassName}
+              >
+                <i className='fa fa-eraser' />
+              </button>
+            ) : null}
             {collapseButton}
           </div>
         </h1>
 
+        { 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}

app/javascript/mastodon/components/icon_button.js

@@ -19,6 +19,7 @@ export default class IconButton extends React.PureComponent {
     disabled: PropTypes.bool,
     inverted: PropTypes.bool,
     animate: PropTypes.bool,
+    flip: PropTypes.bool,
     overlay: PropTypes.bool,
     tabIndex: PropTypes.string,
   };
@@ -72,8 +73,23 @@ export default class IconButton extends React.PureComponent {
       classes.push(this.props.className);
     }
 
+    const flipDeg = this.props.flip ? -180 : -360;
+    const rotateDeg = this.props.active ? flipDeg : 0;
+
+    const motionDefaultStyle = {
+      rotate: rotateDeg,
+    };
+
+    const springOpts = {
+      stiffness: this.props.flip ? 60 : 120,
+      damping: 7,
+    };
+    const motionStyle = {
+      rotate: this.props.animate ? spring(rotateDeg, springOpts) : 0,
+    };
+
     return (
-      <Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
+      <Motion defaultStyle={motionDefaultStyle} style={motionStyle}>
         {({ rotate }) =>
           <button
             aria-label={this.props.title}

app/javascript/mastodon/components/media_gallery.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/gallery
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';

app/javascript/mastodon/components/scrollable_list.js

@@ -5,6 +5,7 @@ import IntersectionObserverArticle from './intersection_observer_article';
 import LoadMore from './load_more';
 import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
 import { throttle } from 'lodash';
+import { List as ImmutableList } from 'immutable';
 
 export default class ScrollableList extends PureComponent {
 
@@ -26,6 +27,10 @@ export default class ScrollableList extends PureComponent {
     trackScroll: true,
   };
 
+  state = {
+    lastMouseMove: null,
+  };
+
   intersectionObserverWrapper = new IntersectionObserverWrapper();
 
   handleScroll = throttle(() => {
@@ -46,6 +51,14 @@ export default class ScrollableList extends PureComponent {
     trailing: true,
   });
 
+  handleMouseMove = throttle(() => {
+    this._lastMouseMove = new Date();
+  }, 300);
+
+  handleMouseLeave = () => {
+    this._lastMouseMove = null;
+  }
+
   componentDidMount () {
     this.attachScrollListener();
     this.attachIntersectionObserver();
@@ -55,17 +68,20 @@ export default class ScrollableList extends PureComponent {
   }
 
   componentDidUpdate (prevProps) {
+    const someItemInserted = React.Children.count(prevProps.children) > 0 &&
+      React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
+      this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
+
     // Reset the scroll position when a new child comes in in order not to
     // jerk the scrollbar around if you're already scrolled down the page.
-    if (React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this._oldScrollPosition && this.node.scrollTop > 0) {
-      if (this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props)) {
-        const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
-        if (this.node.scrollTop !== newScrollTop) {
-          this.node.scrollTop = newScrollTop;
-        }
-      } else {
-        this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
+    if (someItemInserted && this._oldScrollPosition && this.node.scrollTop > 0) {
+      const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
+
+      if (this.node.scrollTop !== newScrollTop) {
+        this.node.scrollTop = newScrollTop;
       }
+    } else {
+      this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
     }
   }
 
@@ -95,7 +111,12 @@ export default class ScrollableList extends PureComponent {
 
   getFirstChildKey (props) {
     const { children } = props;
-    const firstChild = Array.isArray(children) ? children[0] : children;
+    let firstChild = children;
+    if (children instanceof ImmutableList) {
+      firstChild = children.get(0);
+    } else if (Array.isArray(children)) {
+      firstChild = children[0];
+    }
     return firstChild && firstChild.key;
   }
 
@@ -108,6 +129,10 @@ export default class ScrollableList extends PureComponent {
     this.props.onScrollToBottom();
   }
 
+  _recentlyMoved () {
+    return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
+  }
+
   handleKeyDown = (e) => {
     if (['PageDown', 'PageUp'].includes(e.key) || (e.ctrlKey && ['End', 'Home'].includes(e.key))) {
       const article = (() => {
@@ -143,7 +168,7 @@ export default class ScrollableList extends PureComponent {
 
     if (isLoading || childrenCount > 0 || !emptyMessage) {
       scrollableArea = (
-        <div className='scrollable' ref={this.setRef}>
+        <div className='scrollable' ref={this.setRef} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
           <div role='feed' className='item-list' onKeyDown={this.handleKeyDown}>
             {prepend}
 

app/javascript/mastodon/components/status.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';

app/javascript/mastodon/components/status_action_bar.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/action_bar
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -134,7 +137,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
     menu.push(null);
 
-    if (withDismiss) {
+    if (status.getIn(['account', 'id']) === me || withDismiss) {
       menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
       menu.push(null);
     }

app/javascript/mastodon/components/status_content.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/content
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';

app/javascript/mastodon/components/status_list.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import StatusContainer from '../containers/status_container';
+import StatusContainer from '../../glitch/components/status/container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from './scrollable_list';
 

app/javascript/mastodon/components/video_player.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/player
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -146,29 +149,29 @@ export default class VideoPlayer extends React.PureComponent {
     if (!this.state.visible) {
       if (sensitive) {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
+          <button style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' 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>
+          </button>
         );
       } else {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
+          <button style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' 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>
+          </button>
         );
       }
     }
 
     if (this.state.preview && !autoplay) {
       return (
-        <div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
+        <button className='media-spoiler-video' style={{ width: `${width}px`, 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>
+        </button>
       );
     }
 

app/javascript/mastodon/containers/account_container.js

@@ -12,6 +12,7 @@ import {
   unmuteAccount,
 } from '../actions/accounts';
 import { openModal } from '../actions/modal';
+import { initMuteModal } from '../actions/mutes';
 
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
@@ -32,7 +33,7 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onFollow (account) {
-    if (account.getIn(['relationship', 'following'])) {
+    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
       if (this.unfollowModal) {
         dispatch(openModal('CONFIRM', {
           message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
@@ -59,10 +60,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     if (account.getIn(['relationship', 'muting'])) {
       dispatch(unmuteAccount(account.get('id')));
     } else {
-      dispatch(muteAccount(account.get('id')));
+      dispatch(initMuteModal(account));
     }
   },
 
+
+  onMuteNotifications (account, notifications) {
+    dispatch(muteAccount(account.get('id'), notifications));
+  },
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account));

app/javascript/mastodon/containers/mastodon.js

@@ -15,7 +15,13 @@ const { localeData, messages } = getLocale();
 addLocaleData(localeData);
 
 export const store = configureStore();
-const hydrateAction = hydrateStore(JSON.parse(document.getElementById('initial-state').textContent));
+const initialState = JSON.parse(document.getElementById('initial-state').textContent);
+try {
+  initialState.local_settings = JSON.parse(localStorage.getItem('mastodon-settings'));
+} catch (e) {
+  initialState.local_settings = {};
+}
+const hydrateAction = hydrateStore(initialState);
 store.dispatch(hydrateAction);
 
 export default class Mastodon extends React.PureComponent {

app/javascript/mastodon/containers/status_container.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/status/container
+
 import React from 'react';
 import { connect } from 'react-redux';
 import Status from '../components/status';

app/javascript/mastodon/features/account/components/header.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/account/header
+
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -11,7 +14,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
+  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
 });
 
 const makeMapStateToProps = () => {
@@ -102,7 +105,7 @@ export default class Header extends ImmutablePureComponent {
       if (account.getIn(['relationship', 'requested'])) {
         actionBtn = (
           <div className='account--action-button'>
-            <IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />
+            <IconButton size={26} active icon='hourglass' title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />
           </div>
         );
       } else if (!account.getIn(['relationship', 'blocking'])) {

app/javascript/mastodon/features/account_timeline/components/header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import InnerHeader from '../../account/components/header';
+import InnerHeader from '../../../../glitch/components/account/header';
 import ActionBar from '../../account/components/action_bar';
 import MissingIndicator from '../../../components/missing_indicator';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/account_timeline/containers/header_container.js

@@ -7,10 +7,10 @@ import {
   unfollowAccount,
   blockAccount,
   unblockAccount,
-  muteAccount,
   unmuteAccount,
 } from '../../../actions/accounts';
 import { mentionCompose } from '../../../actions/compose';
+import { initMuteModal } from '../../../actions/mutes';
 import { initReport } from '../../../actions/reports';
 import { openModal } from '../../../actions/modal';
 import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
@@ -19,7 +19,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 const messages = defineMessages({
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
   blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
-  muteConfirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
 });
 
@@ -38,7 +37,7 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onFollow (account) {
-    if (account.getIn(['relationship', 'following'])) {
+    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
       if (this.unfollowModal) {
         dispatch(openModal('CONFIRM', {
           message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
@@ -77,11 +76,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     if (account.getIn(['relationship', 'muting'])) {
       dispatch(unmuteAccount(account.get('id')));
     } else {
-      dispatch(openModal('CONFIRM', {
-        message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-        confirm: intl.formatMessage(messages.muteConfirm),
-        onConfirm: () => dispatch(muteAccount(account.get('id'))),
-      }));
+      dispatch(initMuteModal(account));
     }
   },
 

app/javascript/mastodon/features/compose/components/autosuggest_shortcode.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import emojione from 'emojione';
+
+// This is bad, but I don't know how to make it work without importing the entirety of emojione.
+// taken from some old version of mastodon before they gutted emojione to "emojione_light"
+const shortnameToImage = str => str.replace(emojione.regShortNames, shortname => {
+  if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emojione.emojioneList)) {
+    return shortname;
+  }
+
+  const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1];
+  const alt     = emojione.convert(unicode.toUpperCase());
+
+  return `<img draggable="false" class="emojione" alt="${alt}" src="/emoji/${unicode}.svg" />`;
+});
+
+export default class AutosuggestShortcode extends ImmutablePureComponent {
+
+  static propTypes = {
+    shortcode: PropTypes.string.isRequired,
+  };
+
+  render () {
+    const { shortcode } = this.props;
+
+    let emoji = shortnameToImage(shortcode);
+
+    return (
+      <div className='autosuggest-account'>
+        <div className='autosuggest-account-icon' dangerouslySetInnerHTML={{ __html: emoji }} />
+        {shortcode}
+      </div>
+    );
+  }
+
+}

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -11,6 +11,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Collapsable from '../../../components/collapsable';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
+import ComposeAdvancedOptionsContainer from '../../../../glitch/components/compose/advanced_options/container';
 import SensitiveButtonContainer from '../containers/sensitive_button_container';
 import EmojiPickerDropdown from './emoji_picker_dropdown';
 import UploadFormContainer from '../containers/upload_form_container';
@@ -37,6 +38,9 @@ export default class ComposeForm extends ImmutablePureComponent {
     suggestions: ImmutablePropTypes.list,
     spoiler: PropTypes.bool,
     privacy: PropTypes.string,
+    advanced_options: ImmutablePropTypes.contains({
+      do_not_federate: PropTypes.bool,
+    }),
     spoiler_text: PropTypes.string,
     focusDate: PropTypes.instanceOf(Date),
     preselectDate: PropTypes.instanceOf(Date),
@@ -86,6 +90,10 @@ export default class ComposeForm extends ImmutablePureComponent {
     this.props.onFetchSuggestions(token);
   }, 500, { trailing: true })
 
+  onLocalSuggestionsFetchRequested = debounce((token) => {
+    this.props.onFetchSuggestions(token);
+  }, 100, { trailing: true })
+
   onSuggestionSelected = (tokenStart, token, value) => {
     this._restoreCaret = null;
     this.props.onSuggestionSelected(tokenStart, token, value);
@@ -146,7 +154,8 @@ export default class ComposeForm extends ImmutablePureComponent {
   render () {
     const { intl, onPaste, showSearch } = this.props;
     const disabled = this.props.is_submitting;
-    const text     = [this.props.spoiler_text, countableText(this.props.text)].join('');
+    const maybeEye = (this.props.advanced_options && this.props.advanced_options.do_not_federate) ? ' 👁️' : '';
+    const text     = [this.props.spoiler_text, countableText(this.props.text), maybeEye].join('');
 
     let publishText = '';
 
@@ -181,6 +190,7 @@ export default class ComposeForm extends ImmutablePureComponent {
             suggestions={this.props.suggestions}
             onKeyDown={this.handleKeyDown}
             onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+            onLocalSuggestionsFetchRequested={this.onLocalSuggestionsFetchRequested}
             onSuggestionsClearRequested={this.onSuggestionsClearRequested}
             onSuggestionSelected={this.onSuggestionSelected}
             onPaste={onPaste}
@@ -198,6 +208,7 @@ export default class ComposeForm extends ImmutablePureComponent {
           <div className='compose-form__buttons'>
             <UploadButtonContainer />
             <PrivacyDropdownContainer />
+            <ComposeAdvancedOptionsContainer />
             <SensitiveButtonContainer />
             <SpoilerButtonContainer />
           </div>

app/javascript/mastodon/features/compose/components/search_results.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
-import StatusContainer from '../../../containers/status_container';
+import StatusContainer from '../../../../glitch/components/status/container';
 import Link from 'react-router-dom/Link';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -15,6 +15,7 @@ const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestion_token: state.getIn(['compose', 'suggestion_token']),
   suggestions: state.getIn(['compose', 'suggestions']),
+  advanced_options: state.getIn(['compose', 'advanced_options']),
   spoiler: state.getIn(['compose', 'spoiler']),
   spoiler_text: state.getIn(['compose', 'spoiler_text']),
   privacy: state.getIn(['compose', 'privacy']),

app/javascript/mastodon/features/compose/index.js

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { mountCompose, unmountCompose } from '../../actions/compose';
+import { openModal } from '../../actions/modal';
+import { changeLocalSetting } from '../../../glitch/actions/local_settings';
 import Link from 'react-router-dom/Link';
 import { injectIntl, defineMessages } from 'react-intl';
 import SearchContainer from './containers/search_container';
@@ -19,7 +21,7 @@ const messages = defineMessages({
   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
   public: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
   community: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
-  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
 });
 
@@ -48,6 +50,16 @@ export default class Compose extends React.PureComponent {
     this.props.dispatch(unmountCompose());
   }
 
+  onLayoutClick = (e) => {
+    const layout = e.currentTarget.getAttribute('data-mastodon-layout');
+    this.props.dispatch(changeLocalSetting(['layout'], layout));
+    e.preventDefault();
+  }
+
+  openSettings = () => {
+    this.props.dispatch(openModal('SETTINGS', {}));
+  }
+
   onFocus = () => {
     this.props.dispatch(changeComposing(true));
   }
@@ -78,12 +90,14 @@ export default class Compose extends React.PureComponent {
           {!columns.some(column => column.get('id') === 'PUBLIC') && (
             <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i role='img' className='fa fa-fw fa-globe' /></Link>
           )}
-          <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fa fa-fw fa-cog' /></a>
+          <a onClick={this.openSettings} role='button' tabIndex='0' className='drawer__tab' title={intl.formatMessage(messages.settings)} aria-label={intl.formatMessage(messages.settings)}><i role='img' className='fa fa-fw fa-cogs' /></a>
           <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i role='img' className='fa fa-fw fa-sign-out' /></a>
         </nav>
       );
     }
 
+
+
     return (
       <div className='drawer'>
         {header}
@@ -104,6 +118,7 @@ export default class Compose extends React.PureComponent {
             }
           </Motion>
         </div>
+
       </div>
     );
   }

app/javascript/mastodon/features/favourited_statuses/index.js

@@ -77,6 +77,7 @@ export default class Favourites extends ImmutablePureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
+          showBackButton
         />
 
         <StatusList

app/javascript/mastodon/features/getting_started/index.js

@@ -4,6 +4,7 @@ import ColumnLink from '../ui/components/column_link';
 import ColumnSubheading from '../ui/components/column_subheading';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
+import { openModal } from '../../actions/modal';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -17,12 +18,15 @@ const messages = defineMessages({
   settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
   community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
   follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   sign_out: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
   favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
   blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
   info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' },
+  show_me_around: { id: 'getting_started.onboarding', defaultMessage: 'Show me around' },
+  pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' },
 });
 
 const mapStateToProps = state => ({
@@ -39,8 +43,18 @@ export default class GettingStarted extends ImmutablePureComponent {
     me: ImmutablePropTypes.map.isRequired,
     columns: ImmutablePropTypes.list,
     multiColumn: PropTypes.bool,
+    dispatch: PropTypes.func.isRequired,
   };
 
+  openSettings = () => {
+    this.props.dispatch(openModal('SETTINGS', {}));
+  }
+
+  openOnboardingModal = (e) => {
+    e.preventDefault();
+    this.props.dispatch(openModal('ONBOARDING'));
+  }
+
   render () {
     const { intl, me, columns, multiColumn } = this.props;
 
@@ -66,40 +80,56 @@ export default class GettingStarted extends ImmutablePureComponent {
 
     navItems = navItems.concat([
       <ColumnLink key='4' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
+      <ColumnLink key='5' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />,
     ]);
 
     if (me.get('locked')) {
-      navItems.push(<ColumnLink key='5' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />);
+      navItems.push(<ColumnLink key='6' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />);
     }
 
     navItems = navItems.concat([
-      <ColumnLink key='6' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />,
-      <ColumnLink key='7' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />,
+      <ColumnLink key='7' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />,
+      <ColumnLink key='8' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />,
     ]);
 
     return (
       <Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
-        <div className='getting-started__wrapper'>
-          <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />
-          {navItems}
-          <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
-          <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
-          <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
-          <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
-        </div>
+        <div className='scrollable optionally-scrollable'>
+          <div className='getting-started__wrapper'>
+            <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />
+            {navItems}
+            <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
+            <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
+            <ColumnLink icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />
+            <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
+            <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={this.openSettings} />
+            <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
+          </div>
 
-        <div className='getting-started__footer scrollable optionally-scrollable'>
-          <div className='static-content getting-started'>
-            <p>
-              <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a>
-            </p>
-            <p>
-              <FormattedMessage
-                id='getting_started.open_source_notice'
-                defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
-                values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }}
-              />
-            </p>
+          <div className='getting-started__footer'>
+            <div className='static-content getting-started'>
+              <p>
+                <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'>
+                  <FormattedMessage id='getting_started.faq' defaultMessage='FAQ' />
+                </a>&nbsp;•&nbsp;
+                <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'>
+                  <FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' />
+                </a>&nbsp;•&nbsp;
+                <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'>
+                  <FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' />
+                </a>
+              </p>
+              <p>
+                <FormattedMessage
+                  id='getting_started.open_source_notice'
+                  defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
+                  values={{
+                    github: <a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc/mastodon</a>,
+                    Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a>,
+                  }}
+                />
+              </p>
+            </div>
           </div>
         </div>
       </Column>

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

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/notification
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';

app/javascript/mastodon/features/notifications/components/setting_toggle.js

@@ -18,12 +18,6 @@ export default class SettingToggle extends React.PureComponent {
     this.props.onChange(this.props.settingKey, target.checked);
   }
 
-  onKeyDown = e => {
-    if (e.key === ' ') {
-      this.props.onChange(this.props.settingKey, !e.target.checked);
-    }
-  }
-
   render () {
     const { prefix, settings, settingKey, label, meta } = this.props;
     const id = ['setting-toggle', prefix, ...settingKey].filter(Boolean).join('-');

app/javascript/mastodon/features/notifications/containers/notification_container.js

@@ -1,3 +1,6 @@
+//  THIS FILE EXISTS FOR UPSTREAM COMPATIBILITY & SHOULDN'T BE USED !!
+//  SEE INSTEAD : glitch/components/notification/container
+
 import { connect } from 'react-redux';
 import { makeGetNotification } from '../../../selectors';
 import Notification from '../components/notification';

app/javascript/mastodon/features/notifications/index.js

@@ -4,9 +4,13 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../../components/column';
 import ColumnHeader from '../../components/column_header';
-import { expandNotifications, scrollTopNotifications } from '../../actions/notifications';
+import {
+  enterNotificationClearingMode,
+  expandNotifications,
+  scrollTopNotifications,
+} from '../../actions/notifications';
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
-import NotificationContainer from './containers/notification_container';
+import NotificationContainer from '../../../glitch/components/notification/container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { createSelector } from 'reselect';
@@ -25,12 +29,22 @@ const getNotifications = createSelector([
 
 const mapStateToProps = state => ({
   notifications: getNotifications(state),
+  localSettings:  state.get('local_settings'),
   isLoading: state.getIn(['notifications', 'isLoading'], true),
   isUnread: state.getIn(['notifications', 'unread']) > 0,
   hasMore: !!state.getIn(['notifications', 'next']),
+  notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
 });
 
-@connect(mapStateToProps)
+/* glitch */
+const mapDispatchToProps = dispatch => ({
+  onEnterCleaningMode(yes) {
+    dispatch(enterNotificationClearingMode(yes));
+  },
+  dispatch,
+});
+
+@connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 export default class Notifications extends React.PureComponent {
 
@@ -44,6 +58,9 @@ export default class Notifications extends React.PureComponent {
     isUnread: PropTypes.bool,
     multiColumn: PropTypes.bool,
     hasMore: PropTypes.bool,
+    localSettings: ImmutablePropTypes.map,
+    notifCleaningActive: PropTypes.bool,
+    onEnterCleaningMode: PropTypes.func,
   };
 
   static defaultProps = {
@@ -106,6 +123,7 @@ export default class Notifications extends React.PureComponent {
     const scrollContainer = (
       <ScrollableList
         scrollKey={`notifications-${columnId}`}
+        trackScroll={!pinned}
         isLoading={isLoading}
         hasMore={hasMore}
         emptyMessage={emptyMessage}
@@ -119,7 +137,10 @@ export default class Notifications extends React.PureComponent {
     );
 
     return (
-      <Column ref={this.setColumnRef}>
+      <Column
+        ref={this.setColumnRef}
+        extraClasses={this.props.notifCleaningActive ? 'notif-cleaning' : null}
+      >
         <ColumnHeader
           icon='bell'
           active={isUnread}
@@ -129,6 +150,10 @@ export default class Notifications extends React.PureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
+          localSettings={this.props.localSettings}
+          notifCleaning
+          notifCleaningActive={this.props.notifCleaningActive} // this is used to toggle the header text
+          onEnterCleaningMode={this.props.onEnterCleaningMode}
         >
           <ColumnSettingsContainer />
         </ColumnHeader>

app/javascript/mastodon/features/pinned_statuses/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { fetchPinnedStatuses } from '../../actions/pin_statuses';
+import Column from '../ui/components/column';
+import ColumnBackButtonSlim from '../../components/column_back_button_slim';
+import StatusList from '../../components/status_list';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const messages = defineMessages({
+  heading: { id: 'column.pins', defaultMessage: 'Pinned toot' },
+});
+
+const mapStateToProps = state => ({
+  statusIds: state.getIn(['status_lists', 'pins', 'items']),
+  hasMore: !!state.getIn(['status_lists', 'pins', 'next']),
+});
+
+@connect(mapStateToProps)
+@injectIntl
+export default class PinnedStatuses extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    statusIds: ImmutablePropTypes.list.isRequired,
+    intl: PropTypes.object.isRequired,
+    hasMore: PropTypes.bool.isRequired,
+  };
+
+  componentWillMount () {
+    this.props.dispatch(fetchPinnedStatuses());
+  }
+
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  }
+
+  setRef = c => {
+    this.column = c;
+  }
+
+  render () {
+    const { intl, statusIds, hasMore } = this.props;
+
+    return (
+      <Column icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
+        <ColumnBackButtonSlim />
+        <StatusList
+          statusIds={statusIds}
+          scrollKey='pinned_statuses'
+          hasMore={hasMore}
+        />
+      </Column>
+    );
+  }
+
+}

app/javascript/mastodon/features/status/components/action_bar.js

@@ -107,8 +107,8 @@ export default class ActionBar extends React.PureComponent {
     );
 
     let reblogIcon = 'retweet';
-    if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
-    else if (status.get('visibility') === 'private') reblogIcon = 'lock';
+    //if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
+    // else if (status.get('visibility') === 'private') reblogIcon = 'lock';
 
     let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
 

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

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
-import StatusContent from '../../../components/status_content';
-import MediaGallery from '../../../components/media_gallery';
-import VideoPlayer from '../../../components/video_player';
+import StatusContent from '../../../../glitch/components/status/content';
+import StatusGallery from '../../../../glitch/components/status/gallery';
+import StatusPlayer from '../../../../glitch/components/status/player';
 import AttachmentList from '../../../components/attachment_list';
 import Link from 'react-router-dom/Link';
 import { FormattedDate, FormattedNumber } from 'react-intl';
 import CardContainer from '../containers/card_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import VisibilityIcon from '../../../../glitch/components/status/visibility_icon';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -20,6 +21,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
     onOpenVideo: PropTypes.func.isRequired,
     autoPlayGif: PropTypes.bool,
@@ -36,21 +38,43 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   render () {
     const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
+    const { settings } = this.props;
 
     let media           = '';
+    let mediaIcon       = null;
     let applicationLink = '';
 
     if (status.get('media_attachments').size > 0) {
       if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
         media = <AttachmentList media={status.get('media_attachments')} />;
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
+        media = (
+          <StatusPlayer
+            sensitive={status.get('sensitive')}
+            media={status.getIn(['media_attachments', 0])}
+            letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
+            height={250}
+            onOpenVideo={this.props.onOpenVideo}
+            autoplay
+          />
+        );
+        mediaIcon = 'video-camera';
       } else {
-        media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
+        media = (
+          <StatusGallery
+            sensitive={status.get('sensitive')}
+            media={status.get('media_attachments')}
+            letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
+            height={250}
+            onOpenMedia={this.props.onOpenMedia}
+            autoPlayGif={this.props.autoPlayGif}
+          />
+        );
+        mediaIcon = 'picture-o';
       }
-    } else if (status.get('spoiler_text').length === 0) {
-      media = <CardContainer statusId={status.get('id')} />;
-    }
+    } else media = <CardContainer statusId={status.get('id')} />;
 
     if (status.get('application')) {
       applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>;
@@ -63,9 +87,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <DisplayName account={status.get('account')} />
         </a>
 
-        <StatusContent status={status} />
-
-        {media}
+        <StatusContent
+          status={status}
+          media={media}
+          mediaIcon={mediaIcon}
+        />
 
         <div className='detailed-status__meta'>
           <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
@@ -80,7 +106,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             <span className='detailed-status__favorites'>
               <FormattedNumber value={status.get('favourites_count')} />
             </span>
-          </Link>
+          </Link> · <VisibilityIcon visibility={status.get('visibility')} />
         </div>
       </div>
     );

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

@@ -24,7 +24,7 @@ import { initReport } from '../../actions/reports';
 import { makeGetStatus } from '../../selectors';
 import { ScrollContainer } from 'react-router-scroll';
 import ColumnBackButton from '../../components/column_back_button';
-import StatusContainer from '../../containers/status_container';
+import StatusContainer from '../../../glitch/components/status/container';
 import { openModal } from '../../actions/modal';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -39,6 +39,7 @@ const makeMapStateToProps = () => {
 
   const mapStateToProps = (state, props) => ({
     status: getStatus(state, Number(props.params.statusId)),
+    settings: state.get('local_settings'),
     ancestorsIds: state.getIn(['contexts', 'ancestors', Number(props.params.statusId)]),
     descendantsIds: state.getIn(['contexts', 'descendants', Number(props.params.statusId)]),
     me: state.getIn(['meta', 'me']),
@@ -62,6 +63,7 @@ export default class Status extends ImmutablePureComponent {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
+    settings: ImmutablePropTypes.map.isRequired,
     ancestorsIds: ImmutablePropTypes.list,
     descendantsIds: ImmutablePropTypes.list,
     me: PropTypes.number,
@@ -157,7 +159,7 @@ export default class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants;
-    const { status, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
+    const { status, settings, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
 
     if (status === null) {
       return (
@@ -186,6 +188,7 @@ export default class Status extends ImmutablePureComponent {
 
             <DetailedStatus
               status={status}
+              settings={settings}
               autoPlayGif={autoPlayGif}
               me={me}
               onOpenVideo={this.handleOpenVideo}

app/javascript/mastodon/features/ui/components/boost_modal.js

@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from '../../../components/button';
-import StatusContent from '../../../components/status_content';
+import StatusContent from '../../../../glitch/components/status/content';
 import Avatar from '../../../components/avatar';
 import RelativeTimestamp from '../../../components/relative_timestamp';
 import DisplayName from '../../../components/display_name';

app/javascript/mastodon/features/ui/components/column_link.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'react-router-dom/Link';
 
-const ColumnLink = ({ icon, text, to, href, method }) => {
+const ColumnLink = ({ icon, text, to, onClick, href, method }) => {
   if (href) {
     return (
       <a href={href} className='column-link' data-method={method}>
@@ -10,13 +10,20 @@ const ColumnLink = ({ icon, text, to, href, method }) => {
         {text}
       </a>
     );
-  } else {
+  } else if (to) {
     return (
       <Link to={to} className='column-link'>
         <i className={`fa fa-fw fa-${icon} column-link__icon`} />
         {text}
       </Link>
     );
+  } else {
+    return (
+      <a onClick={onClick} className='column-link' role='button' tabIndex='0' data-method={method}>
+        <i className={`fa fa-fw fa-${icon} column-link__icon`} />
+        {text}
+      </a>
+    );
   }
 };
 
@@ -24,9 +31,9 @@ ColumnLink.propTypes = {
   icon: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
   to: PropTypes.string,
+  onClick: PropTypes.func,
   href: PropTypes.string,
   method: PropTypes.string,
-  hideOnMobile: PropTypes.bool,
 };
 
 export default ColumnLink;

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -9,6 +9,7 @@ import { links, getIndex, getLink } from './tabs_bar';
 
 import BundleContainer from '../containers/bundle_container';
 import ColumnLoading from './column_loading';
+import DrawerLoading from './drawer_loading';
 import BundleColumnError from './bundle_column_error';
 import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses } from '../../ui/util/async-components';
 
@@ -129,8 +130,8 @@ export default class ColumnsArea extends ImmutablePureComponent {
     );
   }
 
-  renderLoading = () => {
-    return <ColumnLoading />;
+  renderLoading = columnId => () => {
+    return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
   }
 
   renderError = (props) => {
@@ -158,7 +159,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
           const params = column.get('params', null) === null ? null : column.get('params').toJS();
 
           return (
-            <BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading} error={this.renderError}>
+            <BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
               {SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn />}
             </BundleContainer>
           );