Cascade mute/block destruction to notes (#193)

Some database systems can make better use of an index if the index
columns are ordered left-to-right in increasing specificity.  I'm not
sure if Postgres is one of those databases, but it also makes sense to
me to read an index as "ordered by type and then ID".

.codeclimate.yml

@@ -27,6 +27,7 @@ plugins:
     enabled: true
   eslint:
     enabled: true
+    channel: eslint-4
   rubocop:
     enabled: true
   scss-lint:

.eslintrc.yml

@@ -17,11 +17,9 @@ plugins:
 parserOptions:
   sourceType: module
   ecmaFeatures:
-    arrowFunctions: true
+    experimentalObjectRestSpread: true
     jsx: true
-    destructuring: true
-    modules: true
-    spread: true
+  ecmaVersion: 2018
 
 settings:
   import/extensions:
@@ -114,6 +112,7 @@ rules:
   react/self-closing-comp: error
 
   jsx-a11y/accessible-emoji: warn
+  jsx-a11y/alt-text: warn
   jsx-a11y/anchor-has-content: warn
   jsx-a11y/aria-activedescendant-has-tabindex: warn
   jsx-a11y/aria-props: warn
@@ -124,16 +123,22 @@ rules:
   jsx-a11y/href-no-hash: warn
   jsx-a11y/html-has-lang: warn
   jsx-a11y/iframe-has-title: warn
-  jsx-a11y/img-has-alt: warn
   jsx-a11y/img-redundant-alt: warn
+  jsx-a11y/interactive-supports-focus: warn
   jsx-a11y/label-has-for: off
   jsx-a11y/mouse-events-have-key-events: warn
   jsx-a11y/no-access-key: warn
   jsx-a11y/no-distracting-elements: warn
+  jsx-a11y/no-noninteractive-element-interactions:
+  - warn
+  - handlers:
+    - onClick
   jsx-a11y/no-onchange: warn
   jsx-a11y/no-redundant-roles: warn
-  jsx-a11y/onclick-has-focus: warn
-  jsx-a11y/onclick-has-role: warn
+  jsx-a11y/no-static-element-interactions:
+  - warn
+  - handlers:
+    - onClick
   jsx-a11y/role-has-required-aria-props: warn
   jsx-a11y/role-supports-aria-props: off
   jsx-a11y/scope: warn

.ruby-version

@@ -1 +1 @@
-2.4.2
+2.5.0

.travis.yml

@@ -8,7 +8,7 @@ cache:
   - public/packs-test
   - tmp/cache/babel-loader
 dist: trusty
-sudo: required
+sudo: false
 
 notifications:
   email: false
@@ -37,8 +37,8 @@ addons:
     - yarn
 
 rvm:
-  - 2.3.4
   - 2.4.2
+  - 2.5.0
 
 services:
   - redis-server
@@ -49,8 +49,7 @@ install:
   - yarn install
 
 before_script:
-  - bundle exec rake parallel:create parallel:load_schema parallel:prepare
-  - bundle exec rails assets:precompile
+  - ./bin/rails parallel:create parallel:load_schema parallel:prepare assets:precompile
   - ln -s /usr/bin/x86_64-linux-gnu-g++-6 "$HOME/g++"
 
 script:

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:2.4.2-alpine3.6
+FROM ruby:2.5.0-alpine3.7
 
 LABEL maintainer="https://github.com/tootsuite/mastodon" \
       description="A GNU Social-compatible microblogging server"
@@ -40,6 +40,7 @@ RUN apk -U upgrade \
     protobuf \
     su-exec \
     tini \
+    tzdata \
  && update-ca-certificates \
  && mkdir -p /tmp/src /opt \
  && wget -O yarn.tar.gz "https://github.com/yarnpkg/yarn/releases/download/v$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
@@ -61,6 +62,9 @@ RUN apk -U upgrade \
  && rm -rf /tmp/* /var/cache/apk/*
 
 COPY Gemfile Gemfile.lock package.json yarn.lock .yarnclean /mastodon/
+COPY stack-fix.c /lib
+RUN gcc -shared -fPIC /lib/stack-fix.c -o /lib/stack-fix.so
+RUN rm /lib/stack-fix.c
 
 RUN bundle config build.nokogiri --with-iconv-lib=/usr/local/lib --with-iconv-include=/usr/local/include \
  && bundle install -j$(getconf _NPROCESSORS_ONLN) --deployment --without test development \

Gemfile

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 source 'https://rubygems.org'
-ruby '>= 2.3.0', '< 2.5.0'
+ruby '>= 2.3.0', '< 2.6.0'
 
 gem 'pkg-config', '~> 1.2'
 
@@ -29,15 +29,15 @@ gem 'browser'
 gem 'charlock_holmes', '~> 0.7.5'
 gem 'iso-639'
 gem 'cld3', '~> 3.2.0'
-gem 'devise', '~> 4.3'
+gem 'devise', '~> 4.4'
 gem 'devise-two-factor', '~> 3.0'
 gem 'doorkeeper', '~> 4.2'
 gem 'fast_blank', '~> 1.0'
-gem 'goldfinger', '~> 2.0'
+gem 'goldfinger', '~> 2.1'
 gem 'hiredis', '~> 0.6'
 gem 'redis-namespace', '~> 1.5'
 gem 'htmlentities', '~> 4.3'
-gem 'http', '~> 2.2'
+gem 'http', '~> 3.0'
 gem 'http_accept_language', '~> 2.1'
 gem 'httplog', '~> 0.99'
 gem 'idn-ruby', require: 'idn'
@@ -50,6 +50,7 @@ gem 'oj', '~> 3.3'
 gem 'ostatus2', '~> 2.0'
 gem 'ox', '~> 2.8'
 gem 'pundit', '~> 1.1'
+gem 'premailer-rails'
 gem 'rack-attack', '~> 5.0'
 gem 'rack-cors', '~> 0.4', require: 'rack/cors'
 gem 'rack-timeout', '~> 0.4'

Gemfile.lock

@@ -70,7 +70,7 @@ GEM
       coderay (>= 1.0.0)
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
-    binding_of_caller (0.7.3)
+    binding_of_caller (0.8.0)
       debug_inspector (>= 0.0.1)
     bootsnap (1.1.5)
       msgpack (~> 1.0)
@@ -110,7 +110,7 @@ GEM
       activesupport
     charlock_holmes (0.7.5)
     chunky_png (1.3.8)
-    cld3 (3.2.1)
+    cld3 (3.2.2)
       ffi (>= 1.1.0, < 1.10.0)
     climate_control (0.2.0)
     cocaine (0.5.8)
@@ -122,8 +122,10 @@ GEM
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
     crass (1.0.3)
+    css_parser (1.6.0)
+      addressable
     debug_inspector (0.0.3)
-    devise (4.3.0)
+    devise (4.4.0)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0, < 5.2)
@@ -179,9 +181,9 @@ GEM
       ruby-progressbar (~> 1.4)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
-    goldfinger (2.0.1)
+    goldfinger (2.1.0)
       addressable (~> 2.5)
-      http (~> 2.2)
+      http (~> 3.0)
       nokogiri (~> 1.8)
       oj (~> 3.0)
     hamlit (2.8.5)
@@ -200,14 +202,14 @@ GEM
     hiredis (0.6.1)
     hkdf (0.3.0)
     htmlentities (4.3.4)
-    http (2.2.2)
+    http (3.0.0)
       addressable (~> 2.3)
       http-cookie (~> 1.0)
-      http-form_data (~> 1.0.1)
+      http-form_data (>= 2.0.0.pre.pre2, < 3)
       http_parser.rb (~> 0.6.0)
     http-cookie (1.0.3)
       domain_name (~> 0.5)
-    http-form_data (1.0.3)
+    http-form_data (2.0.0)
     http_accept_language (2.1.1)
     http_parser.rb (0.6.0)
     httplog (0.99.7)
@@ -298,14 +300,12 @@ GEM
       concurrent-ruby (~> 1.0.0)
       sidekiq (>= 3.5.0)
       statsd-ruby (~> 1.2.0)
-    oj (3.3.9)
-    openssl (2.0.6)
+    oj (3.3.10)
     orm_adapter (0.5.0)
-    ostatus2 (2.0.1)
-      addressable (~> 2.4)
-      http (~> 2.0)
-      nokogiri (~> 1.6)
-      openssl (~> 2.0)
+    ostatus2 (2.0.3)
+      addressable (~> 2.5)
+      http (~> 3.0)
+      nokogiri (~> 1.8)
     ox (2.8.2)
     paperclip (5.1.0)
       activemodel (>= 4.2.0)
@@ -327,6 +327,13 @@ GEM
     pkg-config (1.2.8)
     posix-spawn (0.3.13)
     powerpack (0.1.1)
+    premailer (1.11.1)
+      addressable
+      css_parser (>= 1.6.0)
+      htmlentities (>= 4.0.0)
+    premailer-rails (1.10.1)
+      actionmailer (>= 3, < 6)
+      premailer (~> 1.7, >= 1.7.9)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -562,7 +569,7 @@ DEPENDENCIES
   charlock_holmes (~> 0.7.5)
   cld3 (~> 3.2.0)
   climate_control (~> 0.2)
-  devise (~> 4.3)
+  devise (~> 4.4)
   devise-two-factor (~> 3.0)
   doorkeeper (~> 4.2)
   dotenv-rails (~> 2.2)
@@ -573,11 +580,11 @@ DEPENDENCIES
   fog-local (~> 0.4)
   fog-openstack (~> 0.1)
   fuubar (~> 2.2)
-  goldfinger (~> 2.0)
+  goldfinger (~> 2.1)
   hamlit-rails (~> 0.2)
   hiredis (~> 0.6)
   htmlentities (~> 4.3)
-  http (~> 2.2)
+  http (~> 3.0)
   http_accept_language (~> 2.1)
   httplog (~> 0.99)
   i18n-tasks (~> 0.9)
@@ -604,6 +611,7 @@ DEPENDENCIES
   pghero (~> 1.7)
   pkg-config (~> 1.2)
   posix-spawn
+  premailer-rails
   pry-rails (~> 0.3)
   puma (~> 3.10)
   pundit (~> 1.1)
@@ -643,7 +651,7 @@ DEPENDENCIES
   webpush
 
 RUBY VERSION
-   ruby 2.4.2p198
+   ruby 2.5.0p0
 
 BUNDLED WITH
    1.16.1

Vagrantfile

@@ -79,7 +79,7 @@ VAGRANTFILE_API_VERSION = "2"
 
 Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
 
-  config.vm.box = "ubuntu/trusty64"
+  config.vm.box = "ubuntu/xenial64"
 
   config.vm.provider :virtualbox do |vb|
     vb.name = "mastodon"

app/controllers/accounts_controller.rb

@@ -2,7 +2,8 @@
 
 class AccountsController < ApplicationController
   include AccountControllerConcern
-  include SignatureVerification
+
+  before_action :set_cache_headers
 
   def show
     respond_to do |format|
@@ -27,10 +28,11 @@ class AccountsController < ApplicationController
       end
 
       format.json do
-        render json: @account,
-               serializer: ActivityPub::ActorSerializer,
-               adapter: ActivityPub::Adapter,
-               content_type: 'application/activity+json'
+        skip_session!
+
+        render_cached_json(['activitypub', 'actor', @account.cache_key], content_type: 'application/activity+json') do
+          ActiveModelSerializers::SerializableResource.new(@account, serializer: ActivityPub::ActorSerializer, adapter: ActivityPub::Adapter)
+        end
       end
     end
   end

app/controllers/activitypub/follows_controller.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class ActivityPub::FollowsController < Api::BaseController
-  include SignatureVerification
-
-  def show
-    render(
-      json: FollowRequest.includes(:account).references(:account).find_by!(
-        id: params.require(:id),
-        accounts: { domain: nil, username: params.require(:account_username) },
-        target_account: signed_request_account
-      ),
-      serializer: ActivityPub::FollowSerializer,
-      adapter: ActivityPub::Adapter,
-      content_type: 'application/activity+json'
-    )
-  end
-end

app/controllers/activitypub/inboxes_controller.rb

@@ -28,7 +28,7 @@ class ActivityPub::InboxesController < Api::BaseController
   def upgrade_account
     if signed_request_account.ostatus?
       signed_request_account.update(last_webfingered_at: nil)
-      ResolveRemoteAccountWorker.perform_async(signed_request_account.acct)
+      ResolveAccountWorker.perform_async(signed_request_account.acct)
     end
 
     Pubsubhubbub::UnsubscribeWorker.perform_async(signed_request_account.id) if signed_request_account.subscribed?

app/controllers/api/base_controller.rb

@@ -6,8 +6,8 @@ class Api::BaseController < ApplicationController
 
   include RateLimitHeaders
 
-  skip_before_action :verify_authenticity_token
   skip_before_action :store_current_location
+  protect_from_forgery with: :null_session
 
   rescue_from ActiveRecord::RecordInvalid, Mastodon::ValidationError do |e|
     render json: { error: e.to_s }, status: 422

app/controllers/api/v1/accounts_controller.rb

@@ -21,12 +21,12 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def block
-    BlockService.new.call(current_user.account, @account)
+    BlockService.new.call(current_user.account, @account, note: params[:note])
     render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships
   end
 
   def mute
-    MuteService.new.call(current_user.account, @account, notifications: params[:notifications])
+    MuteService.new.call(current_user.account, @account, notifications: params[:notifications], note: params[:note])
     render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships
   end
 

app/controllers/api/v1/instances/activity_controller.rb

@@ -21,9 +21,9 @@ class Api::V1::Instances::ActivityController < Api::BaseController
 
       weeks << {
         week: week.to_time.to_i.to_s,
-        statuses: Redis.current.get("activity:statuses:local:#{week_id}") || 0,
-        logins: Redis.current.pfcount("activity:logins:#{week_id}"),
-        registrations: Redis.current.get("activity:accounts:local:#{week_id}") || 0,
+        statuses: Redis.current.get("activity:statuses:local:#{week_id}") || '0',
+        logins: Redis.current.pfcount("activity:logins:#{week_id}").to_s,
+        registrations: Redis.current.get("activity:accounts:local:#{week_id}") || '0',
       }
     end
 

app/controllers/api/v1/timelines/home_controller.rb

@@ -9,7 +9,11 @@ class Api::V1::Timelines::HomeController < Api::BaseController
 
   def show
     @statuses = load_statuses
-    render json: @statuses, each_serializer: REST::StatusSerializer, relationships: StatusRelationshipsPresenter.new(@statuses, current_user&.account_id)
+
+    render json: @statuses,
+           each_serializer: REST::StatusSerializer,
+           relationships: StatusRelationshipsPresenter.new(@statuses, current_user&.account_id),
+           status: regeneration_in_progress? ? 206 : 200
   end
 
   private
@@ -57,4 +61,8 @@ class Api::V1::Timelines::HomeController < Api::BaseController
   def pagination_since_id
     @statuses.first.id
   end
+
+  def regeneration_in_progress?
+    Redis.current.exists("account:#{current_account.id}:regeneration")
+  end
 end

app/controllers/api/web/push_subscriptions_controller.rb

@@ -4,6 +4,7 @@ class Api::Web::PushSubscriptionsController < Api::BaseController
   respond_to :json
 
   before_action :require_user!
+  protect_from_forgery with: :exception
 
   def create
     params.require(:subscription).require(:endpoint)

app/controllers/application_controller.rb

@@ -31,7 +31,7 @@ class ApplicationController < ActionController::Base
   private
 
   def https_enabled?
-    Rails.env.production? && ENV['LOCAL_HTTPS'] == 'true'
+    Rails.env.production?
   end
 
   def store_current_location
@@ -192,17 +192,31 @@ class ApplicationController < ActionController::Base
       format.any  { head code }
       format.html do
         set_locale
+        use_pack 'error'
         render "errors/#{code}", layout: 'error', status: code
       end
     end
   end
 
   def render_cached_json(cache_key, **options)
+    options[:expires_in] ||= 3.minutes
+    cache_key              = cache_key.join(':') if cache_key.is_a?(Enumerable)
+    cache_public           = options.key?(:public) ? options.delete(:public) : true
+    content_type           = options.delete(:content_type) || 'application/json'
+
     data = Rails.cache.fetch(cache_key, { raw: true }.merge(options)) do
       yield.to_json
     end
 
-    expires_in options[:expires_in], public: true
-    render json: data
+    expires_in options[:expires_in], public: cache_public
+    render json: data, content_type: content_type
+  end
+
+  def set_cache_headers
+    response.headers['Vary'] = 'Accept'
+  end
+
+  def skip_session!
+    request.session_options[:skip] = true
   end
 end

app/controllers/authorize_follows_controller.rb

@@ -46,7 +46,7 @@ class AuthorizeFollowsController < ApplicationController
   end
 
   def account_from_remote_follow
-    ResolveRemoteAccountService.new.call(acct_without_prefix)
+    ResolveAccountService.new.call(acct_without_prefix)
   end
 
   def acct_param_is_url?

app/controllers/concerns/signature_verification.rb

@@ -114,7 +114,7 @@ module SignatureVerification
 
   def account_from_key_id(key_id)
     if key_id.start_with?('acct:')
-      ResolveRemoteAccountService.new.call(key_id.gsub(/\Aacct:/, ''))
+      ResolveAccountService.new.call(key_id.gsub(/\Aacct:/, ''))
     elsif !ActivityPub::TagManager.instance.local_uri?(key_id)
       account   = ActivityPub::TagManager.instance.uri_to_resource(key_id, Account)
       account ||= ActivityPub::FetchRemoteKeyService.new.call(key_id, id: false)

app/controllers/concerns/user_tracking_concern.rb

@@ -3,7 +3,6 @@
 module UserTrackingConcern
   extend ActiveSupport::Concern
 
-  REGENERATE_FEED_DAYS = 14
   UPDATE_SIGN_IN_HOURS = 24
 
   included do
@@ -14,25 +13,10 @@ module UserTrackingConcern
 
   def set_user_activity
     return unless user_needs_sign_in_update?
-
-    # Mark as signed-in today
     current_user.update_tracked_fields!(request)
-    ActivityTracker.record('activity:logins', current_user.id)
-
-    # Regenerate feed if needed
-    regenerate_feed! if user_needs_feed_update?
   end
 
   def user_needs_sign_in_update?
     user_signed_in? && (current_user.current_sign_in_at.nil? || current_user.current_sign_in_at < UPDATE_SIGN_IN_HOURS.hours.ago)
   end
-
-  def user_needs_feed_update?
-    current_user.last_sign_in_at < REGENERATE_FEED_DAYS.days.ago
-  end
-
-  def regenerate_feed!
-    Redis.current.setnx("account:#{current_user.account_id}:regeneration", true) == 1 && Redis.current.expire("account:#{current_user.account_id}:regeneration", 3_600 * 24)
-    RegenerationWorker.perform_async(current_user.account_id)
-  end
 end

app/controllers/emojis_controller.rb

@@ -2,14 +2,16 @@
 
 class EmojisController < ApplicationController
   before_action :set_emoji
+  before_action :set_cache_headers
 
   def show
     respond_to do |format|
       format.json do
-        render json: @emoji,
-               serializer: ActivityPub::EmojiSerializer,
-               adapter: ActivityPub::Adapter,
-               content_type: 'application/activity+json'
+        skip_session!
+
+        render_cached_json(['activitypub', 'emoji', @emoji.cache_key], content_type: 'application/activity+json') do
+          ActiveModelSerializers::SerializableResource.new(@emoji, serializer: ActivityPub::EmojiSerializer, adapter: ActivityPub::Adapter)
+        end
       end
     end
   end

app/controllers/settings/flavours_controller.rb

@@ -1,13 +1,12 @@
 # frozen_string_literal: true
 
 class Settings::FlavoursController < Settings::BaseController
-
   def index
     redirect_to action: 'show', flavour: current_flavour
   end
 
   def show
-    unless Themes.instance.flavours.include?(params[:flavour]) or params[:flavour] == current_flavour
+    unless Themes.instance.flavours.include?(params[:flavour]) || (params[:flavour] == current_flavour)
       redirect_to action: 'show', flavour: current_flavour
     end
 
@@ -16,7 +15,7 @@ class Settings::FlavoursController < Settings::BaseController
   end
 
   def update
-    user_settings.update(user_settings_params(params[:flavour]).to_h)
+    user_settings.update(user_settings_params)
     redirect_to action: 'show', flavour: params[:flavour]
   end
 
@@ -26,10 +25,8 @@ class Settings::FlavoursController < Settings::BaseController
     UserSettingsDecorator.new(current_user)
   end
 
-  def user_settings_params(flavour)
-    params.require(:user).merge({ setting_flavour: flavour }).permit(
-      :setting_flavour,
-      :setting_skin
-    )
+  def user_settings_params
+    { setting_flavour: params.require(:flavour),
+      setting_skin: params.dig(:user, :setting_skin) }.with_indifferent_access
   end
 end

app/controllers/settings/two_factor_authentication/confirmations_controller.rb

@@ -3,6 +3,8 @@
 module Settings
   module TwoFactorAuthentication
     class ConfirmationsController < BaseController
+      before_action :ensure_otp_secret
+
       def new
         prepare_two_factor_form
       end
@@ -34,6 +36,10 @@ module Settings
         @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Rails.configuration.x.local_domain)
         @qrcode = RQRCode::QRCode.new(@provision_url)
       end
+
+      def ensure_otp_secret
+        redirect_to settings_two_factor_authentication_path unless current_user.otp_secret
+      end
     end
   end
 end

app/controllers/shares_controller.rb

@@ -15,13 +15,14 @@ class SharesController < ApplicationController
   private
 
   def initial_state_params
+    text = [params[:title], params[:text], params[:url]].compact.join(' ')
     {
       settings: Web::Setting.find_by(user: current_user)&.data || {},
       push_subscription: current_account.user.web_push_subscription(current_session),
       current_account: current_account,
       token: current_session.token,
       admin: Account.find_local(Setting.site_contact_username),
-      text: params[:text],
+      text: text,
     }
   end
 

app/controllers/statuses_controller.rb

@@ -10,7 +10,7 @@ class StatusesController < ApplicationController
   before_action :set_link_headers
   before_action :check_account_suspension
   before_action :redirect_to_original, only: [:show]
-  before_action { response.headers['Vary'] = 'Accept' }
+  before_action :set_cache_headers
 
   def show
     respond_to do |format|
@@ -23,25 +23,21 @@ class StatusesController < ApplicationController
       end
 
       format.json do
-        render json: @status,
-               serializer: ActivityPub::NoteSerializer,
-               adapter: ActivityPub::Adapter,
-               content_type: 'application/activity+json'
+        skip_session! unless @stream_entry.hidden?
 
-        # Allow HTTP caching for 3 minutes if the status is public
-        unless @stream_entry.hidden?
-          request.session_options[:skip] = true
-          expires_in(3.minutes, public: true)
+        render_cached_json(['activitypub', 'note', @status.cache_key], content_type: 'application/activity+json', public: !@stream_entry.hidden?) do
+          ActiveModelSerializers::SerializableResource.new(@status, serializer: ActivityPub::NoteSerializer, adapter: ActivityPub::Adapter)
         end
       end
     end
   end
 
   def activity
-    render json: @status,
-           serializer: ActivityPub::ActivitySerializer,
-           adapter: ActivityPub::Adapter,
-           content_type: 'application/activity+json'
+    skip_session!
+
+    render_cached_json(['activitypub', 'activity', @status.cache_key], content_type: 'application/activity+json', public: !@stream_entry.hidden?) do
+      ActiveModelSerializers::SerializableResource.new(@status, serializer: ActivityPub::ActivitySerializer, adapter: ActivityPub::Adapter)
+    end
   end
 
   def embed

app/helpers/admin/action_logs_helper.rb

@@ -34,7 +34,7 @@ module Admin::ActionLogsHelper
       link_to attributes['domain'], "https://#{attributes['domain']}"
     when 'Status'
       tmp_status = Status.new(attributes)
-      link_to tmp_status.account.acct, TagManager.instance.url_for(tmp_status)
+      link_to tmp_status.account&.acct || "##{tmp_status.account_id}", TagManager.instance.url_for(tmp_status)
     end
   end
 

app/helpers/instance_helper.rb

@@ -6,6 +6,6 @@ module InstanceHelper
   end
 
   def site_hostname
-    Rails.configuration.x.local_domain
+    @site_hostname ||= Addressable::URI.parse("//#{Rails.configuration.x.local_domain}").display_uri.host
   end
 end

app/helpers/jsonld_helper.rb

@@ -39,6 +39,10 @@ module JsonLdHelper
     !json.nil? && equals_or_includes?(json['@context'], ActivityPub::TagManager::CONTEXT)
   end
 
+  def unsupported_uri_scheme?(uri)
+    !uri.start_with?('http://', 'https://')
+  end
+
   def canonicalize(json)
     graph = RDF::Graph.new << JSON::LD::API.toRdf(json)
     graph.dump(:normalize)

app/helpers/mailer_helper.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module MailerHelper
+end

app/helpers/routing_helper.rb

@@ -4,6 +4,7 @@ module RoutingHelper
   extend ActiveSupport::Concern
   include Rails.application.routes.url_helpers
   include ActionView::Helpers::AssetTagHelper
+  include Webpacker::Helper
 
   included do
     def default_url_options
@@ -17,6 +18,10 @@ module RoutingHelper
     URI.join(root_url, source).to_s
   end
 
+  def full_pack_url(source, **options)
+    full_asset_url(asset_pack_path(source, options))
+  end
+
   private
 
   def use_storage?

app/helpers/settings_helper.rb

@@ -16,6 +16,7 @@ module SettingsHelper
     he: 'עברית',
     hr: 'Hrvatski',
     hu: 'Magyar',
+    hy: 'Հայերեն',
     id: 'Bahasa Indonesia',
     io: 'Ido',
     it: 'Italiano',

app/javascript/core/admin.js

@@ -30,13 +30,13 @@ delegate(document, batchCheckboxClassName, 'change', () => {
 });
 
 delegate(document, '.media-spoiler-show-button', 'click', () => {
-  [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => {
-    content.classList.add('media-spoiler-wrapper__visible');
+  [].forEach.call(document.querySelectorAll('button.media-spoiler'), (element) => {
+    element.click();
   });
 });
 
 delegate(document, '.media-spoiler-hide-button', 'click', () => {
-  [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => {
-    content.classList.remove('media-spoiler-wrapper__visible');
+  [].forEach.call(document.querySelectorAll('.spoiler-button.spoiler-button--visible button'), (element) => {
+    element.click();
   });
 });

app/javascript/core/mailer.js

@@ -0,0 +1 @@
+import 'styles/mailer.scss';

app/javascript/core/theme.yml

@@ -10,6 +10,9 @@ pack:
   embed: embed.js
   error:
   home:
+  mailer:
+    filename: mailer.js
+    stylesheet: true
   modal:
   public: public.js
   settings: settings.js

app/javascript/flavours/glitch/actions/compose.js

@@ -12,6 +12,7 @@ import {
 } from './timelines';
 
 export const COMPOSE_CHANGE          = 'COMPOSE_CHANGE';
+export const COMPOSE_CYCLE_ELEFRIEND = 'COMPOSE_CYCLE_ELEFRIEND';
 export const COMPOSE_SUBMIT_REQUEST  = 'COMPOSE_SUBMIT_REQUEST';
 export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
@@ -54,6 +55,12 @@ export function changeCompose(text) {
   };
 };
 
+export function cycleElefriendCompose() {
+  return {
+    type: COMPOSE_CYCLE_ELEFRIEND,
+  };
+};
+
 export function replyCompose(status, router) {
   return (dispatch, getState) => {
     dispatch({
@@ -61,7 +68,7 @@ export function replyCompose(status, router) {
       status: status,
     });
 
-    if (!getState().getIn(['compose', 'mounted'])) {
+    if (router && !getState().getIn(['compose', 'mounted'])) {
       router.push('/statuses/new');
     }
   };
@@ -118,6 +125,11 @@ export function submitCompose() {
     }).then(function (response) {
       dispatch(submitComposeSuccess({ ...response.data }));
 
+      //  If the response has no data then we can't do anything else.
+      if (!response.data) {
+        return;
+      }
+
       // To make the app more responsive, immediately get the status into the columns
 
       const insertOrRefresh = (timelineId, refreshAction) => {
@@ -341,10 +353,11 @@ export function unmountCompose() {
   };
 };
 
-export function toggleComposeAdvancedOption(option) {
+export function changeComposeAdvancedOption(option, value) {
   return {
+    option,
     type: COMPOSE_ADVANCED_OPTIONS_CHANGE,
-    option: option,
+    value,
   };
 }
 

app/javascript/flavours/glitch/actions/favourites.js

@@ -10,6 +10,10 @@ export const FAVOURITED_STATUSES_EXPAND_FAIL    = 'FAVOURITED_STATUSES_EXPAND_FA
 
 export function fetchFavouritedStatuses() {
   return (dispatch, getState) => {
+    if (getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
+      return;
+    }
+
     dispatch(fetchFavouritedStatusesRequest());
 
     api(getState).get('/api/v1/favourites').then(response => {
@@ -46,7 +50,7 @@ export function expandFavouritedStatuses() {
   return (dispatch, getState) => {
     const url = getState().getIn(['status_lists', 'favourites', 'next'], null);
 
-    if (url === null) {
+    if (url === null || getState().getIn(['status_lists', 'favourites', 'isLoading'])) {
       return;
     }
 

app/javascript/flavours/glitch/actions/notifications.js

@@ -42,7 +42,7 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
 
 const unescapeHTML = (html) => {
   const wrapper = document.createElement('div');
-  html = html.replace(/<br \/>|<br>|\n/, ' ');
+  html = html.replace(/<br \/>|<br>|\n/g, ' ');
   wrapper.innerHTML = html;
   return wrapper.textContent;
 };

app/javascript/flavours/glitch/actions/push_notifications/index.js

@@ -0,0 +1,23 @@
+import {
+  SET_BROWSER_SUPPORT,
+  SET_SUBSCRIPTION,
+  CLEAR_SUBSCRIPTION,
+  SET_ALERTS,
+  setAlerts,
+} from './setter';
+import { register, saveSettings } from './registerer';
+
+export {
+  SET_BROWSER_SUPPORT,
+  SET_SUBSCRIPTION,
+  CLEAR_SUBSCRIPTION,
+  SET_ALERTS,
+  register,
+};
+
+export function changeAlerts(path, value) {
+  return dispatch => {
+    dispatch(setAlerts(path, value));
+    dispatch(saveSettings());
+  };
+}

app/javascript/flavours/glitch/actions/push_notifications/registerer.js

@@ -0,0 +1,149 @@
+import api from 'flavours/glitch/util/api';
+import { pushNotificationsSetting } from 'flavours/glitch/util/settings';
+import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
+
+// Taken from https://www.npmjs.com/package/web-push
+const urlBase64ToUint8Array = (base64String) => {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding)
+    .replace(/\-/g, '+')
+    .replace(/_/g, '/');
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+};
+
+const getApplicationServerKey = () => document.querySelector('[name="applicationServerKey"]').getAttribute('content');
+
+const getRegistration = () => navigator.serviceWorker.ready;
+
+const getPushSubscription = (registration) =>
+  registration.pushManager.getSubscription()
+    .then(subscription => ({ registration, subscription }));
+
+const subscribe = (registration) =>
+  registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: urlBase64ToUint8Array(getApplicationServerKey()),
+  });
+
+const unsubscribe = ({ registration, subscription }) =>
+  subscription ? subscription.unsubscribe().then(() => registration) : registration;
+
+const sendSubscriptionToBackend = (getState, subscription, me) => {
+  const params = { subscription };
+
+  if (me) {
+    const data = pushNotificationsSetting.get(me);
+    if (data) {
+      params.data = data;
+    }
+  }
+
+  return api(getState).post('/api/web/push_subscriptions', params).then(response => response.data);
+};
+
+// Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
+const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype);
+
+export function register () {
+  return (dispatch, getState) => {
+    dispatch(setBrowserSupport(supportsPushNotifications));
+    const me = getState().getIn(['meta', 'me']);
+
+    if (me && !pushNotificationsSetting.get(me)) {
+      const alerts = getState().getIn(['push_notifications', 'alerts']);
+      if (alerts) {
+        pushNotificationsSetting.set(me, { alerts: alerts });
+      }
+    }
+
+    if (supportsPushNotifications) {
+      if (!getApplicationServerKey()) {
+        console.error('The VAPID public key is not set. You will not be able to receive Web Push Notifications.');
+        return;
+      }
+
+      getRegistration()
+        .then(getPushSubscription)
+        .then(({ registration, subscription }) => {
+          if (subscription !== null) {
+            // We have a subscription, check if it is still valid
+            const currentServerKey = (new Uint8Array(subscription.options.applicationServerKey)).toString();
+            const subscriptionServerKey = urlBase64ToUint8Array(getApplicationServerKey()).toString();
+            const serverEndpoint = getState().getIn(['push_notifications', 'subscription', 'endpoint']);
+
+            // If the VAPID public key did not change and the endpoint corresponds
+            // to the endpoint saved in the backend, the subscription is valid
+            if (subscriptionServerKey === currentServerKey && subscription.endpoint === serverEndpoint) {
+              return subscription;
+            } else {
+              // Something went wrong, try to subscribe again
+              return unsubscribe({ registration, subscription }).then(subscribe).then(
+                subscription => sendSubscriptionToBackend(getState, subscription, me));
+            }
+          }
+
+          // No subscription, try to subscribe
+          return subscribe(registration).then(
+            subscription => sendSubscriptionToBackend(getState, subscription, me));
+        })
+        .then(subscription => {
+          // If we got a PushSubscription (and not a subscription object from the backend)
+          // it means that the backend subscription is valid (and was set during hydration)
+          if (!(subscription instanceof PushSubscription)) {
+            dispatch(setSubscription(subscription));
+            if (me) {
+              pushNotificationsSetting.set(me, { alerts: subscription.alerts });
+            }
+          }
+        })
+        .catch(error => {
+          if (error.code === 20 && error.name === 'AbortError') {
+            console.warn('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.');
+          } else if (error.code === 5 && error.name === 'InvalidCharacterError') {
+            console.error('The VAPID public key seems to be invalid:', getApplicationServerKey());
+          }
+
+          // Clear alerts and hide UI settings
+          dispatch(clearSubscription());
+          if (me) {
+            pushNotificationsSetting.remove(me);
+          }
+
+          try {
+            getRegistration()
+              .then(getPushSubscription)
+              .then(unsubscribe);
+          } catch (e) {
+
+          }
+        });
+    } else {
+      console.warn('Your browser does not support Web Push Notifications.');
+    }
+  };
+}
+
+export function saveSettings() {
+  return (_, getState) => {
+    const state = getState().get('push_notifications');
+    const subscription = state.get('subscription');
+    const alerts = state.get('alerts');
+    const data = { alerts };
+
+    api(getState).put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
+      data,
+    }).then(() => {
+      const me = getState().getIn(['meta', 'me']);
+      if (me) {
+        pushNotificationsSetting.set(me, data);
+      }
+    });
+  };
+}

app/javascript/flavours/glitch/actions/push_notifications/setter.js

@@ -1,9 +1,7 @@
-import axios from 'axios';
-
 export const SET_BROWSER_SUPPORT = 'PUSH_NOTIFICATIONS_SET_BROWSER_SUPPORT';
 export const SET_SUBSCRIPTION = 'PUSH_NOTIFICATIONS_SET_SUBSCRIPTION';
 export const CLEAR_SUBSCRIPTION = 'PUSH_NOTIFICATIONS_CLEAR_SUBSCRIPTION';
-export const ALERTS_CHANGE = 'PUSH_NOTIFICATIONS_ALERTS_CHANGE';
+export const SET_ALERTS = 'PUSH_NOTIFICATIONS_SET_ALERTS';
 
 export function setBrowserSupport (value) {
   return {
@@ -25,28 +23,12 @@ export function clearSubscription () {
   };
 }
 
-export function changeAlerts(key, value) {
+export function setAlerts (path, value) {
   return dispatch => {
     dispatch({
-      type: ALERTS_CHANGE,
-      key,
+      type: SET_ALERTS,
+      path,
       value,
     });
-
-    dispatch(saveSettings());
-  };
-}
-
-export function saveSettings() {
-  return (_, getState) => {
-    const state = getState().get('push_notifications');
-    const subscription = state.get('subscription');
-    const alerts = state.get('alerts');
-
-    axios.put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
-      data: {
-        alerts,
-      },
-    });
   };
 }

app/javascript/flavours/glitch/actions/settings.js

@@ -1,14 +1,14 @@
-import axios from 'axios';
+import api from 'flavours/glitch/util/api';
 import { debounce } from 'lodash';
 
 export const SETTING_CHANGE = 'SETTING_CHANGE';
 export const SETTING_SAVE   = 'SETTING_SAVE';
 
-export function changeSetting(key, value) {
+export function changeSetting(path, value) {
   return dispatch => {
     dispatch({
       type: SETTING_CHANGE,
-      key,
+      path,
       value,
     });
 
@@ -21,9 +21,9 @@ const debouncedSave = debounce((dispatch, getState) => {
     return;
   }
 
-  const data = getState().get('settings').filter((_, key) => key !== 'saved').toJS();
+  const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
 
-  axios.put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE }));
+  api(getState).put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE }));
 }, 5000, { trailing: true });
 
 export function saveSettings() {

app/javascript/flavours/glitch/actions/timelines.js

@@ -19,13 +19,14 @@ export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
 
 export const TIMELINE_CONTEXT_UPDATE = 'CONTEXT_UPDATE';
 
-export function refreshTimelineSuccess(timeline, statuses, skipLoading, next) {
+export function refreshTimelineSuccess(timeline, statuses, skipLoading, next, partial) {
   return {
     type: TIMELINE_REFRESH_SUCCESS,
     timeline,
     statuses,
     skipLoading,
     next,
+    partial,
   };
 };
 
@@ -88,7 +89,7 @@ export function refreshTimeline(timelineId, path, params = {}) {
   return function (dispatch, getState) {
     const timeline = getState().getIn(['timelines', timelineId], ImmutableMap());
 
-    if (timeline.get('isLoading') || timeline.get('online')) {
+    if (timeline.get('isLoading') || (timeline.get('online') && !timeline.get('isPartial'))) {
       return;
     }
 
@@ -104,8 +105,12 @@ export function refreshTimeline(timelineId, path, params = {}) {
     dispatch(refreshTimelineRequest(timelineId, skipLoading));
 
     api(getState).get(path, { params }).then(response => {
-      const next = getLinks(response).refs.find(link => link.rel === 'next');
-      dispatch(refreshTimelineSuccess(timelineId, response.data, skipLoading, next ? next.uri : null));
+      if (response.status === 206) {
+        dispatch(refreshTimelineSuccess(timelineId, [], skipLoading, null, true));
+      } else {
+        const next = getLinks(response).refs.find(link => link.rel === 'next');
+        dispatch(refreshTimelineSuccess(timelineId, response.data, skipLoading, next ? next.uri : null, false));
+      }
     }).catch(error => {
       dispatch(refreshTimelineFail(timelineId, error, skipLoading));
     });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import Avatar from './avatar';
@@ -94,21 +94,33 @@ export default class Account extends ImmutablePureComponent {
           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
         }
         buttons = (
-          <div>
+          <Fragment>
             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
             {hidingNotificationsButton}
-          </div>
+          </Fragment>
         );
-      } else {
+      } else if (!account.get('moved')) {
         buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
       }
     }
 
     return small ? (
-      <div className='account small'>
-        <div className='account__avatar-wrapper'><Avatar account={account} size={18} /></div>
-        <DisplayName account={account} />
-      </div>
+      <Permalink
+        className='account small'
+        href={account.get('url')}
+        to={`/accounts/${account.get('id')}`}
+      >
+        <div className='account__avatar-wrapper'>
+          <Avatar
+            account={account}
+            size={24}
+          />
+        </div>
+        <DisplayName
+          account={account}
+          inline
+        />
+      </Permalink>
     ) : (
       <div className='account'>
         <div className='account__wrapper'>
@@ -120,7 +132,7 @@ export default class Account extends ImmutablePureComponent {
             <div className='account__relationship'>
               {buttons}
             </div>
-          : null}
+            : null}
         </div>
       </div>
     );

app/javascript/flavours/glitch/components/attachment_list.js

@@ -21,9 +21,9 @@ export default class AttachmentList extends ImmutablePureComponent {
 
         <ul className='attachment-list__list'>
           {media.map(attachment =>
-            <li key={attachment.get('id')}>
+            (<li key={attachment.get('id')}>
               <a href={attachment.get('remote_url')} target='_blank' rel='noopener'>{filename(attachment.get('remote_url'))}</a>
-            </li>
+            </li>)
           )}
         </ul>
       </div>

app/javascript/flavours/glitch/components/collapsable.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 const Collapsable = ({ fullHeight, isVisible, children }) => (
   <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}>
     {({ opacity, height }) =>
-      <div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}>
+      (<div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}>
         {children}
-      </div>
+      </div>)
     }
   </Motion>
 );

app/javascript/flavours/glitch/components/display_name.js

@@ -1,28 +1,30 @@
+//  Package imports.
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-export default class DisplayName extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
-    className: PropTypes.string,
-  };
-
-  render () {
-    const {
-      account,
-      className,
-    } = this.props;
-    const computedClass = classNames('display-name', className);
-    const displayNameHtml = { __html: account.get('display_name_html') };
-
-    return (
-      <span className={computedClass}>
-        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
-      </span>
-    );
-  }
+//  The component.
+export default function DisplayName ({
+  account,
+  className,
+  inline,
+}) {
+  const computedClass = classNames('display-name', { inline }, className);
 
+  //  The result.
+  return account ? (
+    <span className={computedClass}>
+      <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
+      {inline ? ' ' : null}
+      <span className='display-name__account'>@{account.get('acct')}</span>
+    </span>
+  ) : null;
 }
+
+//  Props.
+DisplayName.propTypes = {
+  account: ImmutablePropTypes.map,
+  className: PropTypes.string,
+  inline: PropTypes.bool,
+};

app/javascript/flavours/glitch/components/dropdown_menu.js

@@ -137,7 +137,7 @@ export default class Dropdown extends React.PureComponent {
           (item, i) => item ? {
             ...item,
             name: `${item.text}-${i}`,
-            onClick: this.handleItemClick.bind(i),
+            onClick: this.handleItemClick.bind(this, i),
           } : null
         ),
       });

app/javascript/flavours/glitch/components/icon_button.js

@@ -116,7 +116,7 @@ export default class IconButton extends React.PureComponent {
     return (
       <Motion defaultStyle={motionDefaultStyle} style={motionStyle}>
         {({ rotate }) =>
-          <button
+          (<button
             aria-label={title}
             aria-pressed={pressed}
             aria-expanded={expanded}
@@ -128,7 +128,7 @@ export default class IconButton extends React.PureComponent {
           >
             <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
             {this.props.label}
-          </button>
+          </button>)
         }
       </Motion>
     );

app/javascript/flavours/glitch/components/media_gallery.js

@@ -9,7 +9,26 @@ import classNames from 'classnames';
 import { autoPlayGif } from 'flavours/glitch/util/initial_state';
 
 const messages = defineMessages({
-  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
+  hidden: {
+    defaultMessage: 'Media hidden',
+    id: 'status.media_hidden',
+  },
+  sensitive: {
+    defaultMessage: 'Sensitive',
+    id: 'media_gallery.sensitive',
+  },
+  toggle: {
+    defaultMessage: 'Click to view',
+    id: 'status.sensitive_toggle',
+  },
+  toggle_visible: {
+    defaultMessage: 'Toggle visibility',
+    id: 'media_gallery.toggle_visible',
+  },
+  warning: {
+    defaultMessage: 'Sensitive content',
+    id: 'status.sensitive_warning',
+  },
 });
 
 class Item extends React.PureComponent {
@@ -206,48 +225,79 @@ export default class MediaGallery extends React.PureComponent {
     this.props.onOpenMedia(this.props.media, index);
   }
 
-  isStandaloneEligible() {
-    const { media, standalone } = this.props;
-    return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
-  }
-
   render () {
-    const { media, intl, sensitive, letterbox, fullwidth } = this.props;
+    const {
+      handleClick,
+      handleOpen,
+    } = this;
+    const {
+      fullwidth,
+      intl,
+      letterbox,
+      media,
+      sensitive,
+      standalone,
+    } = this.props;
     const { visible } = this.state;
     const size = media.take(4).size;
-
-    let children;
-
-    if (!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 = (
-        <button className='media-spoiler' onClick={this.handleOpen}>
-          <span className='media-spoiler__warning'>{warning}</span>
-          <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-        </button>
-      );
-    } else {
-      if (this.isStandaloneEligible()) {
-        children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;
-      } else {
-        children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} />);
-      }
-    }
+    const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
 
     return (
-      <div className={`media-gallery size-${size} ${fullwidth ? 'full-width' : ''}`}>
-        <div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>
-          <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
-        </div>
-
-        {children}
+      <div className={computedClass}>
+        {visible ? (
+          <div className='sensitive-info'>
+            <IconButton
+              icon='eye'
+              onClick={handleOpen}
+              overlay
+              title={intl.formatMessage(messages.toggle_visible)}
+            />
+            {sensitive ? (
+              <span className='sensitive-marker'>
+                <FormattedMessage {...messages.sensitive} />
+              </span>
+            ) : null}
+          </div>
+        ) : null}
+        {function () {
+          switch (true) {
+          case !visible:
+            return (
+              <button
+                className='media-spoiler'
+                onClick={handleOpen}
+              >
+                <span className='media-spoiler__warning'>
+                  <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />
+                </span>
+                <span className='media-spoiler__trigger'>
+                  <FormattedMessage {...messages.toggle} />
+                </span>
+              </button>
+            );
+          case standalone && media.size === 1 && !!media.getIn([0, 'meta', 'small', 'aspect']):
+            return (
+              <Item
+                attachment={media.get(0)}
+                onClick={handleClick}
+                standalone
+              />
+            );
+          default:
+            return media.take(4).map(
+              (attachment, i) => (
+                <Item
+                  attachment={attachment}
+                  index={i}
+                  key={attachment.get('id')}
+                  letterbox={letterbox}
+                  onClick={handleClick}
+                  size={size}
+                />
+              )
+            );
+          }
+        }()}
       </div>
     );
   }

app/javascript/flavours/glitch/components/missing_indicator.js

@@ -2,9 +2,14 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 const MissingIndicator = () => (
-  <div className='missing-indicator'>
+  <div className='regeneration-indicator missing-indicator'>
     <div>
-      <FormattedMessage id='missing_indicator.label' defaultMessage='Not found' />
+      <div className='regeneration-indicator__figure' />
+
+      <div className='regeneration-indicator__label'>
+        <FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' />
+        <FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' />
+      </div>
     </div>
   </div>
 );

app/javascript/flavours/glitch/components/permalink.js

@@ -22,7 +22,13 @@ export default class Permalink extends React.PureComponent {
   }
 
   render () {
-    const { href, children, className, ...other } = this.props;
+    const {
+      children,
+      className,
+      href,
+      to,
+      ...other
+    } = this.props;
 
     return (
       <a target='_blank' href={href} onClick={this.handleClick} {...other} className={`permalink${className ? ' ' + className : ''}`}>

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

@@ -47,7 +47,6 @@ export default class Status extends ImmutablePureComponent {
 
   state = {
     isExpanded: null,
-    markedForDelete: false,
   }
 
   // Avoid checking props that are functions (and whose equality will always
@@ -67,7 +66,6 @@ export default class Status extends ImmutablePureComponent {
 
   updateOnStates = [
     'isExpanded',
-    'markedForDelete',
   ]
 
   //  If our settings have changed to disable collapsed statuses, then we
@@ -121,15 +119,15 @@ export default class Status extends ImmutablePureComponent {
 
     if (function () {
       switch (true) {
-      case collapse:
-      case autoCollapseSettings.get('all'):
-      case autoCollapseSettings.get('notifications') && muted:
+      case !!collapse:
+      case !!autoCollapseSettings.get('all'):
+      case autoCollapseSettings.get('notifications') && !!muted:
       case autoCollapseSettings.get('lengthy') && node.clientHeight > (
         status.get('media_attachments').size && !muted ? 650 : 400
       ):
       case autoCollapseSettings.get('reblogs') && prepend === 'reblogged_by':
       case autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null:
-      case autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && status.get('media_attachments').size:
+      case autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && !!status.get('media_attachments').size:
         return true;
       default:
         return false;
@@ -318,14 +316,14 @@ export default class Status extends ImmutablePureComponent {
 
         media = (
           <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
-            {Component => <Component
+            {Component => (<Component
               preview={video.get('preview_url')}
               src={video.get('url')}
               sensitive={status.get('sensitive')}
               letterbox={settings.getIn(['media', 'letterbox'])}
               fullwidth={settings.getIn(['media', 'fullwidth'])}
               onOpenVideo={this.handleOpenVideo}
-            />}
+            />)}
           </Bundle>
         );
         mediaIcon = 'video-camera';
@@ -382,7 +380,6 @@ export default class Status extends ImmutablePureComponent {
     const computedClass = classNames('status', `status-${status.get('visibility')}`, {
       collapsed: isExpanded === false,
       'has-background': isExpanded === false && background,
-      'marked-for-delete': this.state.markedForDelete,
       muted,
     }, 'focusable');
 

app/javascript/flavours/glitch/components/status_header.js

@@ -104,8 +104,8 @@ export default class StatusHeader extends React.PureComponent {
               active={collapsed}
               title={
                 collapsed ?
-                intl.formatMessage(messages.uncollapse) :
-                intl.formatMessage(messages.collapse)
+                  intl.formatMessage(messages.uncollapse) :
+                  intl.formatMessage(messages.collapse)
               }
               icon='angle-double-up'
               onClick={this.handleCollapsedClick}

app/javascript/flavours/glitch/components/status_list.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from './scrollable_list';
+import { FormattedMessage } from 'react-intl';
 
 export default class StatusList extends ImmutablePureComponent {
 
@@ -16,6 +17,7 @@ export default class StatusList extends ImmutablePureComponent {
     trackScroll: PropTypes.bool,
     shouldUpdateScroll: PropTypes.func,
     isLoading: PropTypes.bool,
+    isPartial: PropTypes.bool,
     hasMore: PropTypes.bool,
     prepend: PropTypes.node,
     emptyMessage: PropTypes.node,
@@ -48,8 +50,23 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   render () {
-    const { statusIds, ...other } = this.props;
-    const { isLoading } = other;
+    const { statusIds, ...other }  = this.props;
+    const { isLoading, isPartial } = other;
+
+    if (isPartial) {
+      return (
+        <div className='regeneration-indicator'>
+          <div>
+            <div className='regeneration-indicator__figure' />
+
+            <div className='regeneration-indicator__label'>
+              <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
+              <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
+            </div>
+          </div>
+        </div>
+      );
+    }
 
     const scrollableContent = (isLoading || statusIds.size > 0) ? (
       statusIds.map((statusId) => (

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

@@ -64,11 +64,11 @@ export default class Header extends ImmutablePureComponent {
         <div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
           <div>
             <a
-                href={account.get('url')}
-                className='account__header__avatar'
-                role='presentation'
-                target='_blank'
-                rel='noopener'
+              href={account.get('url')}
+              className='account__header__avatar'
+              role='presentation'
+              target='_blank'
+              rel='noopener'
             >
               <Avatar account={account} size={90} />
             </a>

app/javascript/flavours/glitch/features/account_gallery/index.js

@@ -95,10 +95,10 @@ export default class AccountGallery extends ImmutablePureComponent {
 
             <div className='account-gallery__container'>
               {medias.map(media =>
-                <MediaItem
+                (<MediaItem
                   key={media.get('id')}
                   media={media}
-                />
+                />)
               )}
               {loadMore}
             </div>

app/javascript/flavours/glitch/features/community_timeline/containers/column_settings_container.js

@@ -8,8 +8,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
 
-  onChange (key, checked) {
-    dispatch(changeSetting(['community', ...key], checked));
+  onChange (path, checked) {
+    dispatch(changeSetting(['community', ...path], checked));
   },
 
 });

app/javascript/flavours/glitch/features/composer/hashtag_warning/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Motion from 'flavours/glitch/util/optional_motion';
+import spring from 'react-motion/lib/spring';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+//  This is the spring used with our motion.
+const motionSpring = spring(1, { damping: 35, stiffness: 400 });
+
+//  Messages.
+const messages = defineMessages({
+  disclaimer: {
+    defaultMessage: 'This toot won\'t be listed under any hashtag as it is unlisted. Only public toots can be searched by hashtag.',
+    id: 'compose_form.hashtag_warning',
+  },
+});
+
+//  The component.
+export default function ComposerHashtagWarning () {
+  return (
+    <Motion
+      defaultStyle={{
+        opacity: 0,
+        scaleX: 0.85,
+        scaleY: 0.75,
+      }}
+      style={{
+        opacity: motionSpring,
+        scaleX: motionSpring,
+        scaleY: motionSpring,
+      }}
+    >
+      {({ opacity, scaleX, scaleY }) => (
+        <div
+          className='composer--warning'
+          style={{
+            opacity: opacity,
+            transform: `scale(${scaleX}, ${scaleY})`,
+          }}
+        >
+          <FormattedMessage
+            {...messages.disclaimer}
+          />
+        </div>
+      )}
+    </Motion>
+  );
+}
+
+ComposerHashtagWarning.propTypes = {};

app/javascript/flavours/glitch/features/composer/index.js

@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
+const APPROX_HASHTAG_RE = /(?:^|[^\/\)\w])#(\S+)/i;
+
 //  Actions.
 import {
   cancelReplyCompose,
   changeCompose,
+  changeComposeAdvancedOption,
   changeComposeSensitivity,
   changeComposeSpoilerText,
   changeComposeSpoilerness,
@@ -15,10 +18,11 @@ import {
   clearComposeSuggestions,
   fetchComposeSuggestions,
   insertEmojiCompose,
+  mountCompose,
   selectComposeSuggestion,
   submitCompose,
-  toggleComposeAdvancedOption,
   undoUploadCompose,
+  unmountCompose,
   uploadCompose,
 } from 'flavours/glitch/actions/compose';
 import {
@@ -34,6 +38,7 @@ import ComposerSpoiler from './spoiler';
 import ComposerTextarea from './textarea';
 import ComposerUploadForm from './upload_form';
 import ComposerWarning from './warning';
+import ComposerHashtagWarning from './hashtag_warning';
 
 //  Utils.
 import { countableText } from 'flavours/glitch/util/counter';
@@ -47,8 +52,8 @@ function mapStateToProps (state) {
   const inReplyTo = state.getIn(['compose', 'in_reply_to']);
   return {
     acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','),
+    advancedOptions: state.getIn(['compose', 'advanced_options']),
     amUnlocked: !state.getIn(['accounts', me, 'locked']),
-    doNotFederate: state.getIn(['compose', 'advanced_options', 'do_not_federate']),
     focusDate: state.getIn(['compose', 'focusDate']),
     isSubmitting: state.getIn(['compose', 'is_submitting']),
     isUploading: state.getIn(['compose', 'is_uploading']),
@@ -57,7 +62,7 @@ function mapStateToProps (state) {
     preselectDate: state.getIn(['compose', 'preselectDate']),
     privacy: state.getIn(['compose', 'privacy']),
     progress: state.getIn(['compose', 'progress']),
-    replyAccount: inReplyTo ? state.getIn(['accounts', state.getIn(['statuses', inReplyTo, 'account'])]) : null,
+    replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
     replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
     resetFileKey: state.getIn(['compose', 'resetFileKey']),
     sideArm: state.getIn(['local_settings', 'side_arm']),
@@ -74,6 +79,7 @@ function mapStateToProps (state) {
 //  Dispatch mapping.
 const mapDispatchToProps = {
   onCancelReply: cancelReplyCompose,
+  onChangeAdvancedOption: changeComposeAdvancedOption,
   onChangeDescription: changeUploadCompose,
   onChangeSensitivity: changeComposeSensitivity,
   onChangeSpoilerText: changeComposeSpoilerText,
@@ -84,12 +90,13 @@ const mapDispatchToProps = {
   onCloseModal: closeModal,
   onFetchSuggestions: fetchComposeSuggestions,
   onInsertEmoji: insertEmojiCompose,
+  onMount: mountCompose,
   onOpenActionsModal: openModal.bind(null, 'ACTIONS'),
   onOpenDoodleModal: openModal.bind(null, 'DOODLE', { noEsc: true }),
   onSelectSuggestion: selectComposeSuggestion,
   onSubmit: submitCompose,
-  onToggleAdvancedOption: toggleComposeAdvancedOption,
   onUndoUpload: undoUploadCompose,
+  onUnmount: unmountCompose,
   onUpload: uploadCompose,
 };
 
@@ -188,6 +195,22 @@ class Composer extends React.Component {
     }
   }
 
+  //  Tells our state the composer has been mounted.
+  componentDidMount () {
+    const { onMount } = this.props;
+    if (onMount) {
+      onMount();
+    }
+  }
+
+  //  Tells our state the composer has been unmounted.
+  componentWillUnmount () {
+    const { onUnmount } = this.props;
+    if (onUnmount) {
+      onUnmount();
+    }
+  }
+
   //  This statement does several things:
   //  - If we're beginning a reply, and,
   //      - Replying to zero or one users, places the cursor at the end
@@ -245,17 +268,17 @@ class Composer extends React.Component {
       handleSubmit,
       handleRefTextarea,
     } = this.handlers;
-    const { history } = this.context;
     const {
       acceptContentTypes,
+      advancedOptions,
       amUnlocked,
-      doNotFederate,
       intl,
       isSubmitting,
       isUploading,
       layout,
       media,
       onCancelReply,
+      onChangeAdvancedOption,
       onChangeDescription,
       onChangeSensitivity,
       onChangeSpoilerness,
@@ -266,7 +289,6 @@ class Composer extends React.Component {
       onFetchSuggestions,
       onOpenActionsModal,
       onOpenDoodleModal,
-      onToggleAdvancedOption,
       onUndoUpload,
       onUpload,
       privacy,
@@ -293,16 +315,17 @@ class Composer extends React.Component {
           text={spoilerText}
         />
         {privacy === 'private' && amUnlocked ? <ComposerWarning /> : null}
+        {privacy !== 'public' && APPROX_HASHTAG_RE.test(text) ? <ComposerHashtagWarning /> : null}
         {replyContent ? (
           <ComposerReply
             account={replyAccount}
             content={replyContent}
-            history={history}
             intl={intl}
             onCancel={onCancelReply}
           />
         ) : null}
         <ComposerTextarea
+          advancedOptions={advancedOptions}
           autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
           disabled={isSubmitting}
           intl={intl}
@@ -329,19 +352,19 @@ class Composer extends React.Component {
         ) : null}
         <ComposerOptions
           acceptContentTypes={acceptContentTypes}
+          advancedOptions={advancedOptions}
           disabled={isSubmitting}
-          doNotFederate={doNotFederate}
-          full={media.size >= 4 || media.some(
+          full={media ? media.size >= 4 || media.some(
             item => item.get('type') === 'video'
-          )}
-          hasMedia={!!media.size}
+          ) : false}
+          hasMedia={media && !!media.size}
           intl={intl}
+          onChangeAdvancedOption={onChangeAdvancedOption}
           onChangeSensitivity={onChangeSensitivity}
           onChangeVisibility={onChangeVisibility}
           onDoodleOpen={onOpenDoodleModal}
           onModalClose={onCloseModal}
           onModalOpen={onOpenActionsModal}
-          onToggleAdvancedOption={onToggleAdvancedOption}
           onToggleSpoiler={onChangeSpoilerness}
           onUpload={onUpload}
           privacy={privacy}
@@ -350,7 +373,7 @@ class Composer extends React.Component {
           spoiler={spoiler}
         />
         <ComposerPublisher
-          countText={`${spoilerText}${countableText(text)}${doNotFederate ? ' 👁️' : ''}`}
+          countText={`${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`}
           disabled={isSubmitting || isUploading || !!text.length && !text.trim().length}
           intl={intl}
           onSecondarySubmit={handleSecondarySubmit}
@@ -364,19 +387,14 @@ class Composer extends React.Component {
 
 }
 
-//  Context
-Composer.contextTypes = {
-  history: PropTypes.object,
-};
-
 //  Props.
 Composer.propTypes = {
   intl: PropTypes.object.isRequired,
 
   //  State props.
   acceptContentTypes: PropTypes.string,
+  advancedOptions: ImmutablePropTypes.map,
   amUnlocked: PropTypes.bool,
-  doNotFederate: PropTypes.bool,
   focusDate: PropTypes.instanceOf(Date),
   isSubmitting: PropTypes.bool,
   isUploading: PropTypes.bool,
@@ -385,7 +403,7 @@ Composer.propTypes = {
   preselectDate: PropTypes.instanceOf(Date),
   privacy: PropTypes.string,
   progress: PropTypes.number,
-  replyAccount: ImmutablePropTypes.map,
+  replyAccount: PropTypes.string,
   replyContent: PropTypes.string,
   resetFileKey: PropTypes.number,
   sideArm: PropTypes.string,
@@ -399,6 +417,7 @@ Composer.propTypes = {
 
   //  Dispatch props.
   onCancelReply: PropTypes.func,
+  onChangeAdvancedOption: PropTypes.func,
   onChangeDescription: PropTypes.func,
   onChangeSensitivity: PropTypes.func,
   onChangeSpoilerText: PropTypes.func,
@@ -409,12 +428,13 @@ Composer.propTypes = {
   onCloseModal: PropTypes.func,
   onFetchSuggestions: PropTypes.func,
   onInsertEmoji: PropTypes.func,
+  onMount: PropTypes.func,
   onOpenActionsModal: PropTypes.func,
   onOpenDoodleModal: PropTypes.func,
   onSelectSuggestion: PropTypes.func,
   onSubmit: PropTypes.func,
-  onToggleAdvancedOption: PropTypes.func,
   onUndoUpload: PropTypes.func,
+  onUnmount: PropTypes.func,
   onUpload: PropTypes.func,
 };
 

app/javascript/flavours/glitch/features/composer/options/dropdown/content/index.js

@@ -96,7 +96,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
               transform: `scale(${scaleX}, ${scaleY})`,
             }}
           >
-            {items.map(
+            {items ? items.map(
               ({
                 name,
                 ...rest
@@ -110,7 +110,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
                   options={rest}
                 />
               )
-            )}
+            ) : null}
           </div>
         )}
       </Motion>
@@ -127,7 +127,7 @@ ComposerOptionsDropdownContent.propTypes = {
     name: PropTypes.string.isRequired,
     on: PropTypes.bool,
     text: PropTypes.node,
-  })).isRequired,
+  })),
   onChange: PropTypes.func,
   onClose: PropTypes.func,
   style: PropTypes.object,

app/javascript/flavours/glitch/features/composer/options/dropdown/content/item/index.js

@@ -104,7 +104,10 @@ export default class ComposerOptionsDropdownContentItem extends React.PureCompon
             <strong>{text}</strong>
             {meta}
           </div>
-        ) : <div className='content'>{text}</div>}
+        ) :
+          <div className='content'>
+            <strong>{text}</strong>
+          </div>}
       </div>
     );
   }

app/javascript/flavours/glitch/features/composer/options/index.js

@@ -1,6 +1,7 @@
 //  Package imports.
 import PropTypes from 'prop-types';
 import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import {
   FormattedMessage,
   defineMessages,
@@ -47,11 +48,11 @@ const messages = defineMessages({
   },
   local_only_long: {
     defaultMessage: 'Do not post to other instances',
-    id: 'advanced-options.local-only.long',
+    id: 'advanced_options.local-only.long',
   },
   local_only_short: {
     defaultMessage: 'Local-only',
-    id: 'advanced-options.local-only.short',
+    id: 'advanced_options.local-only.short',
   },
   private_long: {
     defaultMessage: 'Post to followers only',
@@ -77,6 +78,14 @@ const messages = defineMessages({
     defaultMessage: 'Hide text behind warning',
     id: 'compose_form.spoiler',
   },
+  threaded_mode_long: {
+    defaultMessage: 'Automatically opens a reply on posting',
+    id: 'advanced_options.threaded_mode.long',
+  },
+  threaded_mode_short: {
+    defaultMessage: 'Threaded mode',
+    id: 'advanced_options.threaded_mode.short',
+  },
   unlisted_long: {
     defaultMessage: 'Do not show in public timelines',
     id: 'privacy.unlisted.long',
@@ -149,16 +158,16 @@ export default class ComposerOptions extends React.PureComponent {
     } = this.handlers;
     const {
       acceptContentTypes,
+      advancedOptions,
       disabled,
-      doNotFederate,
       full,
       hasMedia,
       intl,
+      onChangeAdvancedOption,
       onChangeSensitivity,
       onChangeVisibility,
       onModalClose,
       onModalOpen,
-      onToggleAdvancedOption,
       onToggleSpoiler,
       privacy,
       resetFileKey,
@@ -284,18 +293,24 @@ export default class ComposerOptions extends React.PureComponent {
           title={intl.formatMessage(messages.spoiler)}
         />
         <Dropdown
-          active={doNotFederate}
+          active={advancedOptions && advancedOptions.some(value => !!value)}
           disabled={disabled}
-          icon='home'
-          items={[
+          icon='ellipsis-h'
+          items={advancedOptions ? [
             {
               meta: <FormattedMessage {...messages.local_only_long} />,
               name: 'do_not_federate',
-              on: doNotFederate,
+              on: advancedOptions.get('do_not_federate'),
               text: <FormattedMessage {...messages.local_only_short} />,
             },
-          ]}
-          onChange={onToggleAdvancedOption}
+            {
+              meta: <FormattedMessage {...messages.threaded_mode_long} />,
+              name: 'threaded_mode',
+              on: advancedOptions.get('threaded_mode'),
+              text: <FormattedMessage {...messages.threaded_mode_short} />,
+            },
+          ] : null}
+          onChange={onChangeAdvancedOption}
           onModalClose={onModalClose}
           onModalOpen={onModalOpen}
           title={intl.formatMessage(messages.advanced_options_icon_title)}
@@ -309,17 +324,17 @@ export default class ComposerOptions extends React.PureComponent {
 //  Props.
 ComposerOptions.propTypes = {
   acceptContentTypes: PropTypes.string,
+  advancedOptions: ImmutablePropTypes.map,
   disabled: PropTypes.bool,
-  doNotFederate: PropTypes.bool,
   full: PropTypes.bool,
   hasMedia: PropTypes.bool,
   intl: PropTypes.object.isRequired,
+  onChangeAdvancedOption: PropTypes.func,
   onChangeSensitivity: PropTypes.func,
   onChangeVisibility: PropTypes.func,
   onDoodleOpen: PropTypes.func,
   onModalClose: PropTypes.func,
   onModalOpen: PropTypes.func,
-  onToggleAdvancedOption: PropTypes.func,
   onToggleSpoiler: PropTypes.func,
   onUpload: PropTypes.func,
   privacy: PropTypes.string,

app/javascript/flavours/glitch/features/composer/publisher/index.js

@@ -85,6 +85,7 @@ export default function ComposerPublisher ({
                     unlisted: 'unlock-alt',
                   }[privacy]}
                 />
+                {' '}
                 <FormattedMessage {...messages.publish} />
               </span>
             );

app/javascript/flavours/glitch/features/composer/reply/index.js

@@ -1,12 +1,10 @@
 //  Package imports.
 import PropTypes from 'prop-types';
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages } from 'react-intl';
 
 //  Components.
-import Avatar from 'flavours/glitch/components/avatar';
-import DisplayName from 'flavours/glitch/components/display_name';
+import AccountContainer from 'flavours/glitch/containers/account_container';
 import IconButton from 'flavours/glitch/components/icon_button';
 
 //  Utils.
@@ -31,17 +29,6 @@ const handlers = {
       onCancel();
     }
   },
-
-  //  Handles a click on the status's account.
-  handleClickAccount () {
-    const {
-      account,
-      history,
-    } = this.props;
-    if (history) {
-      history.push(`/accounts/${account.get('id')}`);
-    }
-  },
 };
 
 //  The component.
@@ -55,10 +42,7 @@ export default class ComposerReply extends React.PureComponent {
 
   //  Rendering.
   render () {
-    const {
-      handleClick,
-      handleClickAccount,
-    } = this.handlers;
+    const { handleClick } = this.handlers;
     const {
       account,
       content,
@@ -76,21 +60,10 @@ export default class ComposerReply extends React.PureComponent {
             title={intl.formatMessage(messages.cancel)}
           />
           {account ? (
-            <a
-              className='account'
-              href={account.get('url')}
-              onClick={handleClickAccount}
-            >
-              <Avatar
-                account={account}
-                className='avatar'
-                size={24}
-              />
-              <DisplayName
-                account={account}
-                className='display_name'
-              />
-            </a>
+            <AccountContainer
+              id={account}
+              small
+            />
           ) : null}
         </header>
         <div
@@ -105,9 +78,8 @@ export default class ComposerReply extends React.PureComponent {
 }
 
 ComposerReply.propTypes = {
-  account: ImmutablePropTypes.map,
+  account: PropTypes.string,
   content: PropTypes.string,
-  history: PropTypes.object,
   intl: PropTypes.object.isRequired,
   onCancel: PropTypes.func,
 };

app/javascript/flavours/glitch/features/composer/textarea/icons/index.js

@@ -0,0 +1,60 @@
+//  Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages } from 'react-intl';
+
+//  Components.
+import Icon from 'flavours/glitch/components/icon';
+
+//  Messages.
+const messages = defineMessages({
+  localOnly: {
+    defaultMessage: 'This post is local-only',
+    id: 'advanced_options.local-only.tooltip',
+  },
+  threadedMode: {
+    defaultMessage: 'Threaded mode enabled',
+    id: 'advanced_options.threaded_mode.tooltip',
+  },
+});
+
+//  We use an array of tuples here instead of an object because it
+//  preserves order.
+const iconMap = [
+  ['do_not_federate', 'home', messages.localOnly],
+  ['threaded_mode', 'comments', messages.threadedMode],
+];
+
+//  The component.
+export default function ComposerTextareaIcons ({
+  advancedOptions,
+  intl,
+}) {
+
+  //  The result. We just map every active option to its icon.
+  return (
+    <div className='composer--textarea--icons'>
+      {advancedOptions ? iconMap.map(
+        ([key, icon, message]) => advancedOptions.get(key) ? (
+          <span
+            className='textarea_icon'
+            key={key}
+            title={intl.formatMessage(message)}
+          >
+            <Icon
+              fullwidth
+              icon={icon}
+            />
+          </span>
+        ) : null
+      ) : null}
+    </div>
+  );
+}
+
+//  Props.
+ComposerTextareaIcons.propTypes = {
+  advancedOptions: ImmutablePropTypes.map,
+  intl: PropTypes.object.isRequired,
+};

app/javascript/flavours/glitch/features/composer/textarea/index.js

@@ -10,6 +10,7 @@ import Textarea from 'react-textarea-autosize';
 
 //  Components.
 import EmojiPicker from 'flavours/glitch/features/emoji_picker';
+import ComposerTextareaIcons from './icons';
 import ComposerTextareaSuggestions from './suggestions';
 
 //  Utils.
@@ -32,7 +33,7 @@ const handlers = {
 
   //  When blurring the textarea, suggestions are hidden.
   handleBlur () {
-    //this.setState({ suggestionsHidden: true });
+    this.setState({ suggestionsHidden: true });
   },
 
   //  When the contents of the textarea change, we have to pull up new
@@ -57,7 +58,7 @@ const handlers = {
     const right = value.slice(selectionStart).search(/[\s\u200B]/);
     const token = function () {
       switch (true) {
-      case left < 0 || /[@:]/.test(!value[left]):
+      case left < 0 || !/[@:]/.test(value[left]):
         return null;
       case right < 0:
         return value.slice(left);
@@ -127,6 +128,11 @@ const handlers = {
       return;
     }
 
+    //  We submit the status on control/meta + enter.
+    if (onSubmit && e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+      onSubmit();
+    }
+
     //  Switches over the pressed key.
     switch(e.key) {
 
@@ -156,11 +162,6 @@ const handlers = {
       }
       return;
     }
-
-    //  We submit the status on control/meta + enter.
-    if (onSubmit && e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      onSubmit();
-    }
   },
 
   //  When the escape key is released, we either close the suggestions
@@ -232,6 +233,7 @@ export default class ComposerTextarea extends React.Component {
       handleRefTextarea,
     } = this.handlers;
     const {
+      advancedOptions,
       autoFocus,
       disabled,
       intl,
@@ -249,6 +251,10 @@ export default class ComposerTextarea extends React.Component {
       <div className='composer--textarea'>
         <label>
           <span {...hiddenComponent}><FormattedMessage {...messages.placeholder} /></span>
+          <ComposerTextareaIcons
+            advancedOptions={advancedOptions}
+            intl={intl}
+          />
           <Textarea
             aria-autocomplete='list'
             autoFocus={autoFocus}
@@ -280,6 +286,7 @@ export default class ComposerTextarea extends React.Component {
 
 //  Props.
 ComposerTextarea.propTypes = {
+  advancedOptions: ImmutablePropTypes.map,
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
   intl: PropTypes.object.isRequired,

app/javascript/flavours/glitch/features/composer/textarea/suggestions/item/index.js

@@ -24,9 +24,16 @@ const handlers = {
     } = this.props;
     if (onClick) {
       e.preventDefault();
+      e.stopPropagation();  //  Prevents following account links
       onClick(index);
     }
   },
+
+  //  This prevents the focus from changing, which would mess with
+  //  our suggestion code.
+  handleMouseDown (e) {
+    e.preventDefault();
+  },
 };
 
 //  The component.
@@ -40,7 +47,10 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
 
   //  Rendering.
   render () {
-    const { handleClick } = this.handlers;
+    const {
+      handleMouseDown,
+      handleClick,
+    } = this.handlers;
     const {
       selected,
       suggestion,
@@ -51,7 +61,8 @@ export default class ComposerTextareaSuggestionsItem extends React.Component {
     return (
       <div
         className={computedClass}
-        onMouseDown={handleClick}
+        onMouseDown={handleMouseDown}
+        onClickCapture={handleClick}  //  Jumps in front of contents
         role='button'
         tabIndex='0'
       >

app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js

@@ -36,10 +36,10 @@ export default function ComposerUploadFormProgress ({ progress }) {
             style={{ width: spring(progress) }}
           >
             {({ width }) =>
-              <div
+              (<div
                 className='tracker'
                 style={{ width: `${width}%` }}
-              />
+              />)
             }
           </Motion>
         </div>

app/javascript/flavours/glitch/features/direct_timeline/containers/column_settings_container.js

@@ -8,8 +8,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
 
-  onChange (key, checked) {
-    dispatch(changeSetting(['direct', ...key], checked));
+  onChange (path, checked) {
+    dispatch(changeSetting(['direct', ...path], checked));
   },
 
 });

app/javascript/flavours/glitch/features/drawer/index.js

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
 
 //  Actions.
 import { openModal } from 'flavours/glitch/actions/modal';
@@ -11,6 +12,7 @@ import {
   showSearch,
   submitSearch,
 } from 'flavours/glitch/actions/search';
+import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
 
 //  Components.
 import Composer from 'flavours/glitch/features/composer';
@@ -27,6 +29,7 @@ import { wrap } from 'flavours/glitch/util/redux_helpers';
 const mapStateToProps = state => ({
   account: state.getIn(['accounts', me]),
   columns: state.getIn(['settings', 'columns']),
+  elefriend: state.getIn(['compose', 'elefriend']),
   results: state.getIn(['search', 'results']),
   searchHidden: state.getIn(['search', 'hidden']),
   searchValue: state.getIn(['search', 'value']),
@@ -37,6 +40,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = {
   onChange: changeSearch,
   onClear: clearSearch,
+  onClickElefriend: cycleElefriendCompose,
   onShow: showSearch,
   onSubmit: submitSearch,
   onOpenSettings: openModal.bind(null, 'SETTINGS', {}),
@@ -55,10 +59,12 @@ class Drawer extends React.Component {
     const {
       account,
       columns,
+      elefriend,
       intl,
       multiColumn,
       onChange,
       onClear,
+      onClickElefriend,
       onOpenSettings,
       onShow,
       onSubmit,
@@ -67,10 +73,11 @@ class Drawer extends React.Component {
       searchValue,
       submitted,
     } = this.props;
+    const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
 
     //  The result.
     return (
-      <div className='drawer'>
+      <div className={computedClass}>
         {multiColumn ? (
           <DrawerHeader
             columns={columns}
@@ -90,6 +97,7 @@ class Drawer extends React.Component {
         <div className='contents'>
           <DrawerAccount account={account} />
           <Composer />
+          {multiColumn && <button className='mastodon' onClick={onClickElefriend} />}
           <DrawerResults
             results={results}
             visible={submitted && !searchHidden}
@@ -110,6 +118,7 @@ Drawer.propTypes = {
   account: ImmutablePropTypes.map,
   columns: ImmutablePropTypes.list,
   results: ImmutablePropTypes.map,
+  elefriend: PropTypes.number,
   searchHidden: PropTypes.bool,
   searchValue: PropTypes.string,
   submitted: PropTypes.bool,
@@ -117,6 +126,7 @@ Drawer.propTypes = {
   //  Dispatch props.
   onChange: PropTypes.func,
   onClear: PropTypes.func,
+  onClickElefriend: PropTypes.func,
   onShow: PropTypes.func,
   onSubmit: PropTypes.func,
   onOpenSettings: PropTypes.func,

app/javascript/flavours/glitch/features/drawer/search/index.js

@@ -45,10 +45,10 @@ const handlers = {
     const {
       onClear,
       submitted,
-      value: { length },
+      value,
     } = this.props;
     e.preventDefault();  //  Prevents focus change ??
-    if (onClear && (submitted || length)) {
+    if (onClear && (submitted || value && value.length)) {
       onClear();
     }
   },
@@ -100,7 +100,8 @@ export default class DrawerSearch extends React.PureComponent {
       value,
     } = this.props;
     const { expanded } = this.state;
-    const computedClass = classNames('drawer--search', { active: value.length || submitted });
+    const active = value && value.length || submitted;
+    const computedClass = classNames('drawer--search', { active });
 
     return (
       <div className={computedClass}>
@@ -126,11 +127,11 @@ export default class DrawerSearch extends React.PureComponent {
           tabIndex='0'
         >
           <Icon icon='search' />
-          <Icon icon='fa-times-circle' />
+          <Icon icon='times-circle' />
         </div>
         <Overlay
           placement='bottom'
-          show={expanded && !(value || '').length && !submitted}
+          show={expanded && !active}
           target={this}
         ><DrawerSearchPopout /></Overlay>
       </div>

app/javascript/flavours/glitch/features/drawer/search/popout/index.js

@@ -42,56 +42,61 @@ export default function DrawerSearchPopout ({ style }) {
 
   //  The result.
   return (
-    <Motion
-      defaultStyle={{
-        opacity: 0,
-        scaleX: 0.85,
-        scaleY: 0.75,
-      }}
+    <div
+      className='drawer--search--popout'
       style={{
-        opacity: motionSpring,
-        scaleX: motionSpring,
-        scaleY: motionSpring,
+        ...style,
+        position: 'absolute',
+        width: 285,
       }}
     >
-      {({ opacity, scaleX, scaleY }) => (
-        <div
-          className='drawer--search--popout'
-          style={{
-            ...style,
-            position: 'absolute',
-            width: 285,
-            opacity: opacity,
-            transform: `scale(${scaleX}, ${scaleY})`,
-          }}
-        >
-          <h4><FormattedMessage {...messages.format} /></h4>
-          <ul>
-            <li>
-              <em>#example</em>
-              {' '}
-              <FormattedMessage {...messages.hashtag} />
-            </li>
-            <li>
-              <em>@username@domain</em>
-              {' '}
-              <FormattedMessage {...messages.user} />
-            </li>
-            <li>
-              <em>URL</em>
-              {' '}
-              <FormattedMessage {...messages.user} />
-            </li>
-            <li>
-              <em>URL</em>
-              {' '}
-              <FormattedMessage {...messages.status} />
-            </li>
-          </ul>
-          <FormattedMessage {...messages.text} />
-        </div>
-      )}
-    </Motion>
+      <Motion
+        defaultStyle={{
+          opacity: 0,
+          scaleX: 0.85,
+          scaleY: 0.75,
+        }}
+        style={{
+          opacity: motionSpring,
+          scaleX: motionSpring,
+          scaleY: motionSpring,
+        }}
+      >
+        {({ opacity, scaleX, scaleY }) => (
+          <div
+            style={{
+              opacity: opacity,
+              transform: `scale(${scaleX}, ${scaleY})`,
+            }}
+          >
+            <h4><FormattedMessage {...messages.format} /></h4>
+            <ul>
+              <li>
+                <em>#example</em>
+                {' '}
+                <FormattedMessage {...messages.hashtag} />
+              </li>
+              <li>
+                <em>@username@domain</em>
+                {' '}
+                <FormattedMessage {...messages.user} />
+              </li>
+              <li>
+                <em>URL</em>
+                {' '}
+                <FormattedMessage {...messages.user} />
+              </li>
+              <li>
+                <em>URL</em>
+                {' '}
+                <FormattedMessage {...messages.status} />
+              </li>
+            </ul>
+            <FormattedMessage {...messages.text} />
+          </div>
+        )}
+      </Motion>
+    </div>
   );
 }
 

app/javascript/flavours/glitch/features/favourited_statuses/index.js

@@ -9,6 +9,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import StatusList from 'flavours/glitch/components/status_list';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { debounce } from 'lodash';
 
 const messages = defineMessages({
   heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
@@ -16,6 +17,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   statusIds: state.getIn(['status_lists', 'favourites', 'items']),
+  isLoading: state.getIn(['status_lists', 'favourites', 'isLoading'], true),
   hasMore: !!state.getIn(['status_lists', 'favourites', 'next']),
 });
 
@@ -30,6 +32,7 @@ export default class Favourites extends ImmutablePureComponent {
     columnId: PropTypes.string,
     multiColumn: PropTypes.bool,
     hasMore: PropTypes.bool,
+    isLoading: PropTypes.bool,
   };
 
   componentWillMount () {
@@ -59,12 +62,12 @@ export default class Favourites extends ImmutablePureComponent {
     this.column = c;
   }
 
-  handleScrollToBottom = () => {
+  handleScrollToBottom = debounce(() => {
     this.props.dispatch(expandFavouritedStatuses());
-  }
+  }, 300, { leading: true })
 
   render () {
-    const { intl, statusIds, columnId, multiColumn, hasMore } = this.props;
+    const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
     const pinned = !!columnId;
 
     return (
@@ -85,6 +88,7 @@ export default class Favourites extends ImmutablePureComponent {
           statusIds={statusIds}
           scrollKey={`favourited_statuses-${columnId}`}
           hasMore={hasMore}
+          isLoading={isLoading}
           onScrollToBottom={this.handleScrollToBottom}
         />
       </Column>

app/javascript/flavours/glitch/features/getting_started/index.js

@@ -79,7 +79,7 @@ export default class GettingStarted extends ImmutablePureComponent {
   render () {
     const { intl, myAccount, columns, multiColumn, lists } = this.props;
 
-    let navItems = [];
+    const navItems = [];
     let listItems = [];
 
     if (multiColumn) {
@@ -111,10 +111,10 @@ export default class GettingStarted extends ImmutablePureComponent {
     navItems.push(<ColumnLink key='6' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
 
     listItems = listItems.concat([
-      <div>
-        <ColumnLink key='7' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
+      <div key='7'>
+        <ColumnLink key='8' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
         {lists.map(list =>
-          <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />
+          <ColumnLink key={(8 + Number(list.get('id'))).toString()} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />
         )}
       </div>,
     ]);

app/javascript/flavours/glitch/features/home_timeline/containers/column_settings_container.js

@@ -8,8 +8,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
 
-  onChange (key, checked) {
-    dispatch(changeSetting(['home', ...key], checked));
+  onChange (path, checked) {
+    dispatch(changeSetting(['home', ...path], checked));
   },
 
   onSave () {

app/javascript/flavours/glitch/features/home_timeline/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { expandHomeTimeline } from 'flavours/glitch/actions/timelines';
+import { expandHomeTimeline, refreshHomeTimeline } from 'flavours/glitch/actions/timelines';
 import PropTypes from 'prop-types';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 import Column from 'flavours/glitch/components/column';
@@ -16,6 +16,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
+  isPartial: state.getIn(['timelines', 'home', 'isPartial'], false),
 });
 
 @connect(mapStateToProps)
@@ -26,6 +27,7 @@ export default class HomeTimeline extends React.PureComponent {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     hasUnread: PropTypes.bool,
+    isPartial: PropTypes.bool,
     columnId: PropTypes.string,
     multiColumn: PropTypes.bool,
   };
@@ -57,6 +59,39 @@ export default class HomeTimeline extends React.PureComponent {
     this.props.dispatch(expandHomeTimeline());
   }
 
+  componentDidMount () {
+    this._checkIfReloadNeeded(false, this.props.isPartial);
+  }
+
+  componentDidUpdate (prevProps) {
+    this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial);
+  }
+
+  componentWillUnmount () {
+    this._stopPolling();
+  }
+
+  _checkIfReloadNeeded (wasPartial, isPartial) {
+    const { dispatch } = this.props;
+
+    if (wasPartial === isPartial) {
+      return;
+    } else if (!wasPartial && isPartial) {
+      this.polling = setInterval(() => {
+        dispatch(refreshHomeTimeline());
+      }, 3000);
+    } else if (wasPartial && !isPartial) {
+      this._stopPolling();
+    }
+  }
+
+  _stopPolling () {
+    if (this.polling) {
+      clearInterval(this.polling);
+      this.polling = null;
+    }
+  }
+
   render () {
     const { intl, hasUnread, columnId, multiColumn } = this.props;
     const pinned = !!columnId;

app/javascript/flavours/glitch/features/list_editor/index.js

@@ -67,9 +67,9 @@ export default class ListEditor extends ImmutablePureComponent {
 
           <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
             {({ x }) =>
-              <div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
+              (<div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
                 {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
-              </div>
+              </div>)
             }
           </Motion>
         </div>

app/javascript/flavours/glitch/features/list_timeline/index.js

@@ -120,13 +120,17 @@ export default class ListTimeline extends React.PureComponent {
     if (typeof list === 'undefined') {
       return (
         <Column>
-          <LoadingIndicator />
+          <div className='scrollable'>
+            <LoadingIndicator />
+          </div>
         </Column>
       );
     } else if (list === false) {
       return (
         <Column>
-          <MissingIndicator />
+          <div className='scrollable'>
+            <MissingIndicator />
+          </div>
         </Column>
       );
     }

app/javascript/flavours/glitch/features/notifications/components/column_settings.js

@@ -11,12 +11,11 @@ export default class ColumnSettings extends React.PureComponent {
     settings: ImmutablePropTypes.map.isRequired,
     pushSettings: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
-    onSave: PropTypes.func.isRequired,
     onClear: PropTypes.func.isRequired,
   };
 
-  onPushChange = (key, checked) => {
-    this.props.onChange(['push', ...key], checked);
+  onPushChange = (path, checked) => {
+    this.props.onChange(['push', ...path], checked);
   }
 
   render () {

app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import ColumnSettings from '../components/column_settings';
-import { changeSetting, saveSettings } from 'flavours/glitch/actions/settings';
+import { changeSetting } from 'flavours/glitch/actions/settings';
 import { clearNotifications } from 'flavours/glitch/actions/notifications';
-import { changeAlerts as changePushNotifications, saveSettings as savePushNotificationSettings } from 'flavours/glitch/actions/push_notifications';
+import { changeAlerts as changePushNotifications } from 'flavours/glitch/actions/push_notifications';
 import { openModal } from 'flavours/glitch/actions/modal';
 
 const messages = defineMessages({
@@ -18,19 +18,14 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
-  onChange (key, checked) {
-    if (key[0] === 'push') {
-      dispatch(changePushNotifications(key.slice(1), checked));
+  onChange (path, checked) {
+    if (path[0] === 'push') {
+      dispatch(changePushNotifications(path.slice(1), checked));
     } else {
-      dispatch(changeSetting(['notifications', ...key], checked));
+      dispatch(changeSetting(['notifications', ...path], checked));
     }
   },
 
-  onSave () {
-    dispatch(saveSettings());
-    dispatch(savePushNotificationSettings());
-  },
-
   onClear () {
     dispatch(openModal('CONFIRM', {
       message: intl.formatMessage(messages.clearMessage),

app/javascript/flavours/glitch/features/public_timeline/containers/column_settings_container.js

@@ -8,8 +8,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
 
-  onChange (key, checked) {
-    dispatch(changeSetting(['public', ...key], checked));
+  onChange (path, checked) {
+    dispatch(changeSetting(['public', ...path], checked));
   },
 
 });

app/javascript/flavours/glitch/features/ui/components/embed_modal.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import axios from 'axios';
+import api from 'flavours/glitch/util/api';
 
 @injectIntl
 export default class EmbedModal extends ImmutablePureComponent {
@@ -23,7 +23,7 @@ export default class EmbedModal extends ImmutablePureComponent {
 
     this.setState({ loading: true });
 
-    axios.post('/api/web/embed', { url }).then(res => {
+    api().post('/api/web/embed', { url }).then(res => {
       this.setState({ loading: false, oembed: res.data });
 
       const iframeDocument = this.iframe.contentWindow.document;

app/javascript/flavours/glitch/features/ui/components/modal_root.js

@@ -124,7 +124,7 @@ export default class ModalRoot extends React.PureComponent {
                 (<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
                   {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
                 </BundleContainer>) :
-              null
+                null
             }
           </div>
         </div>

app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js

@@ -38,11 +38,6 @@ PageOne.propTypes = {
   domain: PropTypes.string.isRequired,
 };
 
-const composerState = {
-  showSearch: true,
-  text: 'Awoo! #introductions',
-};
-
 const PageTwo = ({ intl, myAccount }) => (
   <div className='onboarding-modal__page onboarding-modal__page-two'>
     <div className='figure non-interactive'>
@@ -50,7 +45,8 @@ const PageTwo = ({ intl, myAccount }) => (
         <DrawerAccount account={myAccount} />
         <RawComposer
           intl={intl}
-          state={composerState}
+          privacy='public'
+          text='Awoo! #introductions'
         />
       </div>
     </div>

app/javascript/flavours/glitch/features/ui/components/upload_area.js

@@ -38,12 +38,12 @@ export default class UploadArea extends React.PureComponent {
     return (
       <Motion defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }} style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}>
         {({ backgroundOpacity, backgroundScale }) =>
-          <div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
+          (<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
             <div className='upload-area__drop'>
               <div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
               <div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
             </div>
-          </div>
+          </div>)
         }
       </Motion>
     );

app/javascript/flavours/glitch/features/ui/components/video_modal.js

@@ -23,6 +23,7 @@ export default class VideoModal extends ImmutablePureComponent {
             src={media.get('url')}
             startTime={time}
             onCloseVideo={onClose}
+            detailed
             description={media.get('description')}
           />
         </div>

app/javascript/flavours/glitch/features/ui/containers/status_list_container.js

@@ -51,6 +51,7 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, { timelineId }) => ({
     statusIds: getStatusIds(state, { type: timelineId }),
     isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
+    isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
     hasMore: !!state.getIn(['timelines', timelineId, 'next']),
   });
 

app/javascript/flavours/glitch/features/video/index.js

@@ -17,6 +17,17 @@ const messages = defineMessages({
   exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
 });
 
+const formatTime = secondsNum => {
+  let hours   = Math.floor(secondsNum / 3600);
+  let minutes = Math.floor((secondsNum - (hours * 3600)) / 60);
+  let seconds = secondsNum - (hours * 3600) - (minutes * 60);
+
+  if (hours   < 10) hours   = '0' + hours;
+  if (minutes < 10) minutes = '0' + minutes;
+  if (seconds < 10) seconds = '0' + seconds;
+  return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
+};
+
 const findElementPosition = el => {
   let box;
 
@@ -85,11 +96,13 @@ export default class Video extends React.PureComponent {
     onCloseVideo: PropTypes.func,
     letterbox: PropTypes.bool,
     fullwidth: PropTypes.bool,
+    detailed: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
   state = {
-    progress: 0,
+    currentTime: 0,
+    duration: 0,
     paused: true,
     dragging: false,
     fullscreen: false,
@@ -119,7 +132,10 @@ export default class Video extends React.PureComponent {
   }
 
   handleTimeUpdate = () => {
-    this.setState({ progress: 100 * (this.video.currentTime / this.video.duration) });
+    this.setState({
+      currentTime: Math.floor(this.video.currentTime),
+      duration: Math.floor(this.video.duration),
+    });
   }
 
   handleMouseDown = e => {
@@ -145,8 +161,10 @@ export default class Video extends React.PureComponent {
 
   handleMouseMove = throttle(e => {
     const { x } = getPointerPosition(this.seek, e);
-    this.video.currentTime = this.video.duration * x;
-    this.setState({ progress: x * 100 });
+    const currentTime = Math.floor(this.video.duration * x);
+
+    this.video.currentTime = currentTime;
+    this.setState({ currentTime });
   }, 60);
 
   togglePlay = () => {
@@ -228,11 +246,12 @@ export default class Video extends React.PureComponent {
   }
 
   render () {
-    const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth } = this.props;
-    const { progress, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
+    const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props;
+    const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
+    const progress = (currentTime / duration) * 100;
 
     return (
-      <div className={classNames('video-player', { inactive: !revealed, inline: !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <div className={classNames('video-player', { inactive: !revealed, detailed, inline: width && height && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
         <video
           ref={this.setVideoRef}
           src={src}
@@ -269,16 +288,27 @@ export default class Video extends React.PureComponent {
             />
           </div>
 
-          <div className='video-player__buttons left'>
-            <button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button>
-            <button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button>
-            {!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>}
-          </div>
+          <div className='video-player__buttons-bar'>
+            <div className='video-player__buttons left'>
+              <button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button>
+              <button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button>
 
-          <div className='video-player__buttons right'>
-            {(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>}
-            {onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-times' /></button>}
-            <button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button>
+              {!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>}
+
+              {(detailed || fullscreen) &&
+                <span>
+                  <span className='video-player__time-current'>{formatTime(currentTime)}</span>
+                  <span className='video-player__time-sep'>/</span>
+                  <span className='video-player__time-total'>{formatTime(duration)}</span>
+                </span>
+              }
+            </div>
+
+            <div className='video-player__buttons right'>
+              {(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>}
+              {onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-compress' /></button>}
+              <button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button>
+            </div>
           </div>
         </div>
       </div>

app/javascript/flavours/glitch/locales/en.js

@@ -34,6 +34,8 @@ const messages = {
   'status.collapse': 'Collapse',
   'status.uncollapse': 'Uncollapse',
 
+  'media_gallery.sensitive': 'Sensitive',
+
   'favourite_modal.combo': 'You can press {combo} to skip this next time',
 
   'home.column_settings.show_direct': 'Show DMs',
@@ -52,9 +54,13 @@ const messages = {
   'compose.attach.doodle': 'Draw something',
   'compose.attach': 'Attach...',
 
-  'advanced-options.local-only.short': 'Local-only',
-  'advanced-options.local-only.long': 'Do not post to other instances',
+  'advanced_options.local-only.short': 'Local-only',
+  'advanced_options.local-only.long': 'Do not post to other instances',
+  'advanced_options.local-only.tooltip': 'This post is local-only',
   'advanced_options.icon_title': 'Advanced options',
+  'advanced_options.threaded_mode.short': 'Threaded mode',
+  'advanced_options.threaded_mode.long': 'Automatically opens a reply on posting',
+  'advanced_options.threaded_mode.tooltip': 'Threaded mode enabled',
 };
 
 export default Object.assign({}, inherited, messages);

app/javascript/flavours/glitch/locales/ja.js

@@ -55,9 +55,13 @@ const messages = {
   'compose.attach.doodle': '落書きをする',
   'compose.attach': 'アタッチ...',
 
-  'advanced-options.local-only.short': 'ローカル限定',
-  'advanced-options.local-only.long': '他のインスタンスには投稿されません',
+  'advanced_options.local-only.short': 'ローカル限定',
+  'advanced_options.local-only.long': '他のインスタンスには投稿されません',
+  'advanced_options.local-only.tooltip': 'この投稿はローカル限定投稿です',
   'advanced_options.icon_title': '高度な設定',
+  'advanced_options.threaded_mode.short': 'スレッドモード',
+  'advanced_options.threaded_mode.long': '投稿時に自動的に返信するように設定します',
+  'advanced_options.threaded_mode.tooltip': 'スレッドモードを有効にする',
 };
 
 export default Object.assign({}, inherited, messages);

app/javascript/flavours/glitch/locales/pl.js

@@ -28,12 +28,18 @@ const messages = {
   'settings.media': 'Zawartość multimedialna',
   'settings.media_letterbox': 'Letterbox media',
   'settings.media_fullwidth': 'Podgląd zawartości multimedialnej o pełnej szerokości',
-  'settings.preferences': 'Preferencje użyytkownika',
+  'settings.preferences': 'Preferencje użytkownika',
   'settings.wide_view': 'Szeroki widok (tylko w trybie desktopowym)',
   'settings.navbar_under': 'Pasek nawigacji na dole (tylko w trybie mobilnym)',
   'status.collapse': 'Zwiń',
   'status.uncollapse': 'Rozwiń',
 
+  'media_gallery.sensitive': 'Zawartość wrażliwa',
+
+  'favourite_modal.combo': 'Możesz nacisnąć {combo}, aby pominąć to następnym razem',
+
+  'home.column_settings.show_direct': 'Pokaż wiadomości bezpośrednie',
+
   'notification.markForDeletion': 'Oznacz do usunięcia',
   'notifications.clear': 'Wyczyść wszystkie powiadomienia',
   'notifications.marked_clear_confirmation': 'Czy na pewno chcesz bezpowrtonie usunąć wszystkie powiadomienia?',
@@ -43,6 +49,18 @@ const messages = {
   'notification_purge.btn_none': 'Odznacz\nwszystkie',
   'notification_purge.btn_invert': 'Odwróć\nzaznaczenie',
   'notification_purge.btn_apply': 'Usuń\nzaznaczone',
+
+  'compose.attach.upload': 'Wyślij plik',
+  'compose.attach.doodle': 'Narysuj coś',
+  'compose.attach': 'Załącz coś',
+
+  'advanced_options.local-only.short': 'Tylko lokalnie',
+  'advanced_options.local-only.long': 'Nie wysyłaj na inne instancje',
+  'advanced_options.local-only.tooltip': 'Ten wpis jest widoczny tylko lokalnie',
+  'advanced_options.icon_title': 'Ustawienia zaawansowane',
+  'advanced_options.threaded_mode.short': 'Tryb wątków',
+  'advanced_options.threaded_mode.long': 'Przechodzi do tworzenia odpowiedzi po publikacji wpisu',
+  'advanced_options.threaded_mode.tooltip': 'Włączono tryb wątków',
 };
 
 export default Object.assign({}, inherited, messages);

app/javascript/flavours/glitch/names.yml

@@ -6,3 +6,10 @@ en:
   skins:
     glitch:
       default: Default
+pl:
+  flavours:
+    glitch:
+      description: Domyślny motyw instancji GlitchSoc.
+  skins:
+    glitch:
+      default: Domyślny