Merge branch 'master' into glitch-soc/merge-upstream

Conflicts: - `.github/dependabot.yml`: Updated upstream, we deleted it to not be flooded by Depandabot. Kept deleted. - `Gemfile.lock`: Puma updated on both sides, went for the most recent version. - `app/controllers/api/v1/mutes_controller.rb`: Upstream updated the serializer to support timed mutes, while glitch-soc added a custom API ages ago to get information that is already available elsewhere. Dropped the glitch-soc-specific API, went with upstream changes. - `app/javascript/core/admin.js`: Conflict due to changing how assets are loaded. Went with upstream. - `app/javascript/packs/public.js`: Conflict due to changing how assets are loaded. Went with upstream. - `app/models/mute.rb`: 🤷 - `app/models/user.rb`: New user setting added upstream while we have glitch-soc-specific user settings. Added upstream's user setting. - `config/settings.yml`: Upstream added a new user setting close to a user setting we had changed the defaults for. Added the new upstream setting. - `package.json`: Upstream dependency updated “too close” to a glitch-soc-specific dependency. No real conflict. Updated the dependency.
2 years ago · ec49aa8175
parent 29870d2be6 ca56527140
commit ec49aa8175
131 changed files with 2530 additions and 794 deletions
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@ -30,7 +30,7 @@ plugins:
    channel: eslint-7
  rubocop:
    enabled: true
-    channel: rubocop-0-88
+    channel: rubocop-0-92
  sass-lint:
    enabled: true
 exclude_patterns:
--- a/10
+++ b/10
@ -20,7 +20,7 @@ gem 'makara', '~> 0.4'
 gem 'pghero', '~> 2.7'
 gem 'dotenv-rails', '~> 2.7'

-gem 'aws-sdk-s3', '~> 1.81', require: false
+gem 'aws-sdk-s3', '~> 1.83', require: false
 gem 'fog-core', '<= 2.1.0'
 gem 'fog-openstack', '~> 0.3', require: false
 gem 'paperclip', '~> 6.0'
@ -54,7 +54,6 @@ gem 'doorkeeper', '~> 5.4'
 gem 'ed25519', '~> 1.2'
 gem 'fast_blank', '~> 1.0'
 gem 'fastimage'
-gem 'goldfinger', '~> 2.1'
 gem 'hiredis', '~> 0.6'
 gem 'redis-namespace', '~> 1.8'
 gem 'health_check', git: 'https://github.com/ianheggie/health_check', ref: '0b799ead604f900ed50685e9b2d469cd2befba5b'
@ -142,9 +141,9 @@ group :development do
  gem 'letter_opener', '~> 1.7'
  gem 'letter_opener_web', '~> 1.4'
  gem 'memory_profiler'
-  gem 'rubocop', '~> 0.91', require: false
+  gem 'rubocop', '~> 0.93', require: false
  gem 'rubocop-rails', '~> 2.8', require: false
-  gem 'brakeman', '~> 4.9', require: false
+  gem 'brakeman', '~> 4.10', require: false
  gem 'bundler-audit', '~> 0.7', require: false

  gem 'capistrano', '~> 3.14'
@ -162,3 +161,6 @@ end

 gem 'concurrent-ruby', require: false
 gem 'connection_pool', require: false
+
+gem 'xorcist', '~> 1.1'
+gem 'pluck_each', '~> 0.1.3'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -79,23 +79,23 @@ GEM
      cocaine (~> 0.5.3)
    awrence (1.1.1)
    aws-eventstream (1.1.0)
-    aws-partitions (1.373.0)
-    aws-sdk-core (3.107.0)
+    aws-partitions (1.380.0)
+    aws-sdk-core (3.109.1)
      aws-eventstream (~> 1, >= 1.0.2)
      aws-partitions (~> 1, >= 1.239.0)
      aws-sigv4 (~> 1.1)
      jmespath (~> 1.0)
-    aws-sdk-kms (1.38.0)
-      aws-sdk-core (~> 3, >= 3.99.0)
+    aws-sdk-kms (1.39.0)
+      aws-sdk-core (~> 3, >= 3.109.0)
      aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.81.0)
-      aws-sdk-core (~> 3, >= 3.104.3)
+    aws-sdk-s3 (1.83.0)
+      aws-sdk-core (~> 3, >= 3.109.0)
      aws-sdk-kms (~> 1)
      aws-sigv4 (~> 1.1)
    aws-sigv4 (1.2.2)
      aws-eventstream (~> 1, >= 1.0.2)
    bcrypt (3.1.16)
-    better_errors (2.8.1)
+    better_errors (2.8.3)
      coderay (>= 1.0.0)
      erubi (>= 1.0.0)
      rack (>= 0.9.0)
@ -106,7 +106,7 @@ GEM
      ffi (~> 1.10.0)
    bootsnap (1.4.8)
      msgpack (~> 1.0)
-    brakeman (4.9.1)
+    brakeman (4.10.0)
    browser (4.2.0)
    builder (3.2.4)
    bullet (6.1.0)
@ -240,12 +240,7 @@ GEM
      ruby-progressbar (~> 1.4)
    globalid (0.4.2)
      activesupport (>= 4.2.0)
-    goldfinger (2.1.1)
-      addressable (~> 2.5)
-      http (~> 4.0)
-      nokogiri (~> 1.8)
-      oj (~> 3.0)
-    hamlit (2.11.1)
+    hamlit (2.13.0)
      temple (>= 0.8.2)
      thor
      tilt
@ -399,7 +394,7 @@ GEM
    parallel (1.19.2)
    parallel_tests (3.3.0)
      parallel
-    parser (2.7.1.4)
+    parser (2.7.2.0)
      ast (~> 2.4.1)
    parslet (2.0.0)
    pastel (0.8.0)
@ -407,7 +402,10 @@ GEM
    pg (1.2.3)
    pghero (2.7.2)
      activerecord (>= 5)
-    pkg-config (1.4.3)
+    pkg-config (1.4.4)
+    pluck_each (0.1.3)
+      activerecord (> 3.2.0)
+      activesupport (> 3.0.0)
    posix-spawn (0.3.15)
    premailer (1.14.2)
      addressable
@ -426,11 +424,11 @@ GEM
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (4.0.6)
-    puma (5.0.1)
+    puma (5.0.2)
      nio4r (~> 2.0)
    pundit (2.1.0)
      activesupport (>= 3.0.0)
-    raabro (1.3.1)
+    raabro (1.3.3)
    rack (2.2.3)
    rack-attack (6.3.1)
      rack (>= 1.0, < 3)
@ -500,7 +498,7 @@ GEM
      redis-store (>= 1.2, < 2)
    redis-store (1.9.0)
      redis (>= 4, < 5)
-    regexp_parser (1.8.0)
+    regexp_parser (1.8.2)
    request_store (1.5.0)
      rack (>= 1.4)
    responders (3.0.1)
@ -513,7 +511,7 @@ GEM
      chunky_png (~> 1.0)
      rqrcode_core (~> 0.1)
    rqrcode_core (0.1.2)
-    rspec-core (3.9.2)
+    rspec-core (3.9.3)
      rspec-support (~> 3.9.3)
    rspec-expectations (3.9.2)
      diff-lcs (>= 1.2.0, < 2.0)
@ -535,17 +533,17 @@ GEM
    rspec-support (3.9.3)
    rspec_junit_formatter (0.4.1)
      rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (0.91.0)
+    rubocop (0.93.0)
      parallel (~> 1.10)
-      parser (>= 2.7.1.1)
+      parser (>= 2.7.1.5)
      rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.7)
+      regexp_parser (>= 1.8)
      rexml
-      rubocop-ast (>= 0.4.0, < 1.0)
+      rubocop-ast (>= 0.6.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 1.4.0, < 2.0)
-    rubocop-ast (0.4.2)
-      parser (>= 2.7.1.4)
+    rubocop-ast (0.7.1)
+      parser (>= 2.7.1.5)
    rubocop-rails (2.8.1)
      activesupport (>= 4.2.0)
      rack (>= 1.1)
@ -576,19 +574,19 @@ GEM
      sidekiq (>= 3)
      thwait
      tilt (>= 1.4.0)
-    sidekiq-unique-jobs (6.0.23)
+    sidekiq-unique-jobs (6.0.24)
      concurrent-ruby (~> 1.0, >= 1.0.5)
      sidekiq (>= 4.0, < 7.0)
      thor (>= 0.20, < 2.0)
    simple-navigation (4.1.0)
      activesupport (>= 2.3.2)
-    simple_form (5.0.2)
+    simple_form (5.0.3)
      actionpack (>= 5.0)
      activemodel (>= 5.0)
    simplecov (0.19.0)
      docile (~> 1.1)
      simplecov-html (~> 0.11)
-    simplecov-html (0.12.2)
+    simplecov-html (0.12.3)
    sprockets (3.7.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
@ -633,7 +631,7 @@ GEM
      unf (~> 0.1.0)
    tzinfo (1.2.7)
      thread_safe (~> 0.1)
-    tzinfo-data (1.2020.1)
+    tzinfo-data (1.2020.2)
      tzinfo (>= 1.0.0)
    unf (0.1.4)
      unf_ext
@ -668,6 +666,7 @@ GEM
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
    wisper (2.0.1)
+    xorcist (1.1.2)
    xpath (3.2.0)
      nokogiri (~> 1.8)

@ -679,12 +678,12 @@ DEPENDENCIES
  active_record_query_trace (~> 1.7)
  addressable (~> 2.7)
  annotate (~> 3.1)
-  aws-sdk-s3 (~> 1.81)
+  aws-sdk-s3 (~> 1.83)
  better_errors (~> 2.8)
  binding_of_caller (~> 0.7)
  blurhash (~> 0.1)
  bootsnap (~> 1.4)
-  brakeman (~> 4.9)
+  brakeman (~> 4.10)
  browser
  bullet (~> 6.1)
  bundler-audit (~> 0.7)
@ -715,7 +714,6 @@ DEPENDENCIES
  fog-core (<= 2.1.0)
  fog-openstack (~> 0.3)
  fuubar (~> 2.5)
-  goldfinger (~> 2.1)
  hamlit-rails (~> 0.2)
  health_check!
  hiredis (~> 0.6)
@ -755,6 +753,7 @@ DEPENDENCIES
  pg (~> 1.2)
  pghero (~> 2.7)
  pkg-config (~> 1.4)
+  pluck_each (~> 0.1.3)
  posix-spawn
  premailer-rails
  private_address_check (~> 0.5)
@ -778,7 +777,7 @@ DEPENDENCIES
  rspec-rails (~> 4.0)
  rspec-sidekiq (~> 3.1)
  rspec_junit_formatter (~> 0.4)
-  rubocop (~> 0.91)
+  rubocop (~> 0.93)
  rubocop-rails (~> 2.8)
  ruby-progressbar (~> 1.10)
  sanitize (~> 5.2)
@ -804,3 +803,4 @@ DEPENDENCIES
  webmock (~> 3.9)
  webpacker (~> 5.2)
  webpush
+  xorcist (~> 1.1)
--- a/app/controllers/activitypub/followers_synchronizations_controller.rb
+++ b/app/controllers/activitypub/followers_synchronizations_controller.rb
@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class ActivityPub::FollowersSynchronizationsController < ActivityPub::BaseController
+  include SignatureVerification
+  include AccountOwnedConcern
+
+  before_action :require_signature!
+  before_action :set_items
+  before_action :set_cache_headers
+
+  def show
+    expires_in 0, public: false
+    render json: collection_presenter,
+           serializer: ActivityPub::CollectionSerializer,
+           adapter: ActivityPub::Adapter,
+           content_type: 'application/activity+json'
+  end
+
+  private
+
+  def uri_prefix
+    signed_request_account.uri[/http(s?):\/\/[^\/]+\//]
+  end
+
+  def set_items
+    @items = @account.followers.where(Account.arel_table[:uri].matches(uri_prefix + '%', false, true)).pluck(:uri)
+  end
+
+  def collection_presenter
+    ActivityPub::CollectionPresenter.new(
+      id: account_followers_synchronization_url(@account),
+      type: :ordered,
+      items: @items
+    )
+  end
+end
--- a/app/controllers/activitypub/inboxes_controller.rb
+++ b/app/controllers/activitypub/inboxes_controller.rb
@ -11,6 +11,7 @@ class ActivityPub::InboxesController < ActivityPub::BaseController

  def create
    upgrade_account
+    process_collection_synchronization
    process_payload
    head 202
  end
@ -52,6 +53,19 @@ class ActivityPub::InboxesController < ActivityPub::BaseController
    DeliveryFailureTracker.reset!(signed_request_account.inbox_url)
  end

+  def process_collection_synchronization
+    raw_params = request.headers['Collection-Synchronization']
+    return if raw_params.blank? || ENV['DISABLE_FOLLOWERS_SYNCHRONIZATION'] == 'true'
+
+    # Re-using the syntax for signature parameters
+    tree   = SignatureParamsParser.new.parse(raw_params)
+    params = SignatureParamsTransformer.new.apply(tree)
+
+    ActivityPub::PrepareFollowersSynchronizationService.new.call(signed_request_account, params)
+  rescue Parslet::ParseFailed
+    Rails.logger.warn 'Error parsing Collection-Synchronization header'
+  end
+
  def process_payload
    ActivityPub::ProcessingWorker.perform_async(signed_request_account.id, body, @account&.id)
  end
--- a/app/controllers/admin/ip_blocks_controller.rb
+++ b/app/controllers/admin/ip_blocks_controller.rb
@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Admin
+  class IpBlocksController < BaseController
+    def index
+      authorize :ip_block, :index?
+
+      @ip_blocks = IpBlock.page(params[:page])
+      @form      = Form::IpBlockBatch.new
+    end
+
+    def new
+      authorize :ip_block, :create?
+
+      @ip_block = IpBlock.new(ip: '', severity: :no_access, expires_in: 1.year)
+    end
+
+    def create
+      authorize :ip_block, :create?
+
+      @ip_block = IpBlock.new(resource_params)
+
+      if @ip_block.save
+        log_action :create, @ip_block
+        redirect_to admin_ip_blocks_path, notice: I18n.t('admin.ip_blocks.created_msg')
+      else
+        render :new
+      end
+    end
+
+    def batch
+      @form = Form::IpBlockBatch.new(form_ip_block_batch_params.merge(current_account: current_account, action: action_from_button))
+      @form.save
+    rescue ActionController::ParameterMissing
+      flash[:alert] = I18n.t('admin.ip_blocks.no_ip_block_selected')
+    rescue Mastodon::NotPermittedError
+      flash[:alert] = I18n.t('admin.custom_emojis.not_permitted')
+    ensure
+      redirect_to admin_ip_blocks_path
+    end
+
+    private
+
+    def resource_params
+      params.require(:ip_block).permit(:ip, :severity, :comment, :expires_in)
+    end
+
+    def action_from_button
+      'delete' if params[:delete]
+    end
+
+    def form_ip_block_batch_params
+      params.require(:form_ip_block_batch).permit(ip_block_ids: [])
+    end
+  end
+end
--- a/app/controllers/api/v1/accounts_controller.rb
+++ b/app/controllers/api/v1/accounts_controller.rb
@ -20,7 +20,7 @@ class Api::V1::AccountsController < Api::BaseController
  end

  def create
-    token    = AppSignUpService.new.call(doorkeeper_token.application, account_params)
+    token    = AppSignUpService.new.call(doorkeeper_token.application, request.remote_ip, account_params)
    response = Doorkeeper::OAuth::TokenResponse.new(token)

    headers.merge!(response.headers)
@ -42,7 +42,7 @@ class Api::V1::AccountsController < Api::BaseController
  end

  def mute
-    MuteService.new.call(current_user.account, @account, notifications: truthy_param?(:notifications))
+    MuteService.new.call(current_user.account, @account, notifications: truthy_param?(:notifications), duration: (params[:duration] || 0))
    render json: @account, serializer: REST::RelationshipSerializer, relationships: relationships
  end

--- a/app/controllers/api/v1/mutes_controller.rb
+++ b/app/controllers/api/v1/mutes_controller.rb
@ -6,25 +6,16 @@ class Api::V1::MutesController < Api::BaseController
  after_action :insert_pagination_headers

  def index
-    @data = @accounts = load_accounts
-    render json: @accounts, each_serializer: REST::AccountSerializer
+    @accounts = load_accounts
+    render json: @accounts, each_serializer: REST::MutedAccountSerializer
  end

-  def details
-    @data = @mutes = load_mutes
-    render json: @mutes, each_serializer: REST::MuteSerializer
-  end 
-
  private

  def load_accounts
    paginated_mutes.map(&:target_account)
  end

-  def load_mutes
-    paginated_mutes.includes(:account, :target_account).to_a
-  end
-
  def paginated_mutes
    @paginated_mutes ||= Mute.eager_load(:target_account)
                             .joins(:target_account)
@ -43,34 +34,26 @@ class Api::V1::MutesController < Api::BaseController

  def next_path
    if records_continue?
-      url_for pagination_params(max_id: pagination_max_id)
+      api_v1_mutes_url pagination_params(max_id: pagination_max_id)
    end
  end

  def prev_path
-    unless @data.empty?
-      url_for pagination_params(since_id: pagination_since_id)
+    unless paginated_mutes.empty?
+      api_v1_mutes_url pagination_params(since_id: pagination_since_id)
    end
  end

  def pagination_max_id
-    if params[:action] == "details"
-      @mutes.last.id
-    else
-      paginated_mutes.last.id
-    end
+    paginated_mutes.last.id
  end

  def pagination_since_id
-    if params[:action] == "details"
-      @mutes.first.id
-    else
-      paginated_mutes.first.id
-    end
+    paginated_mutes.first.id
  end

  def records_continue?
-    @data.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
+    paginated_mutes.size == limit_param(DEFAULT_ACCOUNTS_LIMIT)
  end

  def pagination_params(core_params)
--- a/app/controllers/auth/registrations_controller.rb
+++ b/app/controllers/auth/registrations_controller.rb
@ -46,9 +46,9 @@ class Auth::RegistrationsController < Devise::RegistrationsController
  def build_resource(hash = nil)
    super(hash)

-    resource.locale             = I18n.locale
-    resource.invite_code        = params[:invite_code] if resource.invite_code.blank?
-    resource.current_sign_in_ip = request.remote_ip
+    resource.locale      = I18n.locale
+    resource.invite_code = params[:invite_code] if resource.invite_code.blank?
+    resource.sign_up_ip  = request.remote_ip

    resource.build_account if resource.account.nil?
  end
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@ -44,6 +44,7 @@ class Settings::PreferencesController < Settings::BaseController
      :setting_display_media,
      :setting_expand_spoilers,
      :setting_reduce_motion,
+      :setting_disable_swiping,
      :setting_system_font_ui,
      :setting_system_emoji_font,
      :setting_noindex,
--- a/app/helpers/admin/action_logs_helper.rb
+++ b/app/helpers/admin/action_logs_helper.rb
@ -29,6 +29,8 @@ module Admin::ActionLogsHelper
      link_to record.target_account.acct, admin_account_path(record.target_account_id)
    when 'Announcement'
      link_to truncate(record.text), edit_admin_announcement_path(record.id)
+    when 'IpBlock'
+      "#{record.ip}/#{record.ip.prefix} (#{I18n.t("simple_form.labels.ip_block.severities.#{record.severity}")})"
    end
  end

@ -48,6 +50,8 @@ module Admin::ActionLogsHelper
      end
    when 'Announcement'
      truncate(attributes['text'].is_a?(Array) ? attributes['text'].last : attributes['text'])
+    when 'IpBlock'
+      "#{attributes['ip']}/#{attributes['ip'].prefix} (#{I18n.t("simple_form.labels.ip_block.severities.#{attributes['severity']}")})"
    end
  end
 end
--- a/app/helpers/webfinger_helper.rb
+++ b/app/helpers/webfinger_helper.rb
@ -1,38 +1,7 @@
 # frozen_string_literal: true

-# Monkey-patch on monkey-patch.
-# Because it conflicts with the request.rb patch.
-class HTTP::Timeout::PerOperationOriginal < HTTP::Timeout::PerOperation
-  def connect(socket_class, host, port, nodelay = false)
-    ::Timeout.timeout(@connect_timeout, HTTP::TimeoutError) do
-      @socket = socket_class.open(host, port)
-      @socket.setsockopt(Socket::IPPROTO_TCP, Socket::TCP_NODELAY, 1) if nodelay
-    end
-  end
-end
-
 module WebfingerHelper
  def webfinger!(uri)
-    hidden_service_uri = /\.(onion|i2p)(:\d+)?$/.match(uri)
-
-    raise Mastodon::HostValidationError, 'Instance does not support hidden service connections' if !Rails.configuration.x.access_to_hidden_service && hidden_service_uri
-
-    opts = {
-      ssl: !hidden_service_uri,
-
-      headers: {
-        'User-Agent': Mastodon::Version.user_agent,
-      },
-
-      timeout_class: HTTP::Timeout::PerOperationOriginal,
-
-      timeout_options: {
-        write_timeout: 10,
-        connect_timeout: 5,
-        read_timeout: 10,
-      },
-    }
-
-    Goldfinger::Client.new(uri, opts.merge(Rails.configuration.x.http_client_proxy)).finger
+    Webfinger.new(uri).perform
  end
 end
--- a/app/javascript/core/admin.js
+++ b/app/javascript/core/admin.js
@ -1,5 +1,6 @@
 //  This file will be loaded on admin pages, regardless of theme.

+import './public-path';
 import { delegate } from '@rails/ujs';
 import ready from '../mastodon/ready';

--- a/app/javascript/mastodon/actions/accounts.js
+++ b/app/javascript/mastodon/actions/accounts.js
@ -257,11 +257,11 @@ export function unblockAccountFail(error) {
 };


-export function muteAccount(id, notifications) {
+export function muteAccount(id, notifications, duration=0) {
  return (dispatch, getState) => {
    dispatch(muteAccountRequest(id));

-    api(getState).post(`/api/v1/accounts/${id}/mute`, { notifications }).then(response => {
+    api(getState).post(`/api/v1/accounts/${id}/mute`, { notifications, duration }).then(response => {
      // Pass in entire statuses map so we can use it to filter stuff in different parts of the reducers
      dispatch(muteAccountSuccess(response.data, getState().get('statuses')));
    }).catch(error => {
--- a/app/javascript/mastodon/actions/markers.js
+++ b/app/javascript/mastodon/actions/markers.js
@ -100,8 +100,12 @@ export function submitMarkersSuccess({ home, notifications }) {
  };
 };

-export function submitMarkers() {
-  return (dispatch, getState) => debouncedSubmitMarkers(dispatch, getState);
+export function submitMarkers(params = {}) {
+  const result = (dispatch, getState) => debouncedSubmitMarkers(dispatch, getState);
+  if (params.immediate === true) {
+    debouncedSubmitMarkers.flush();
+  }
+  return result;
 };

 export const fetchMarkers = () => (dispatch, getState) => {
--- a/app/javascript/mastodon/actions/mutes.js
+++ b/app/javascript/mastodon/actions/mutes.js
@ -13,6 +13,7 @@ export const MUTES_EXPAND_FAIL    = 'MUTES_EXPAND_FAIL';

 export const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
 export const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
+export const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION';

 export function fetchMutes() {
  return (dispatch, getState) => {
@ -104,3 +105,12 @@ export function toggleHideNotifications() {
    dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS });
  };
 }
+
+export function changeMuteDuration(duration) {
+  return dispatch => {
+    dispatch({
+      type: MUTES_CHANGE_DURATION,
+      duration,
+    });
+  };
+}
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@ -16,6 +16,7 @@ import { getFiltersRegex } from '../selectors';
 import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
 import compareId from 'mastodon/compare_id';
 import { searchTextFromRawStatus } from 'mastodon/actions/importer/normalizer';
+import { requestNotificationPermission } from '../utils/notifications';

 export const NOTIFICATIONS_UPDATE      = 'NOTIFICATIONS_UPDATE';
 export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
@ -33,8 +34,12 @@ export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';
 export const NOTIFICATIONS_MOUNT   = 'NOTIFICATIONS_MOUNT';
 export const NOTIFICATIONS_UNMOUNT = 'NOTIFICATIONS_UNMOUNT';

+
 export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';

+export const NOTIFICATIONS_SET_BROWSER_SUPPORT    = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
+export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
+
 defineMessages({
  mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
  group: { id: 'notifications.group', defaultMessage: '{count} notifications' },
@ -234,3 +239,47 @@ export const mountNotifications = () => ({
 export const unmountNotifications = () => ({
  type: NOTIFICATIONS_UNMOUNT,
 });
+
+
+export const markNotificationsAsRead = () => ({
+  type: NOTIFICATIONS_MARK_AS_READ,
+});
+
+// Browser support
+export function setupBrowserNotifications() {
+  return dispatch => {
+    dispatch(setBrowserSupport('Notification' in window));
+    if ('Notification' in window) {
+      dispatch(setBrowserPermission(Notification.permission));
+    }
+
+    if ('Notification' in window && 'permissions' in navigator) {
+      navigator.permissions.query({ name: 'notifications' }).then((status) => {
+        status.onchange = () => dispatch(setBrowserPermission(Notification.permission));
+      });
+    }
+  };
+}
+
+export function requestBrowserPermission(callback = noOp) {
+  return dispatch => {
+    requestNotificationPermission((permission) => {
+      dispatch(setBrowserPermission(permission));
+      callback(permission);
+    });
+  };
+};
+
+export function setBrowserSupport (value) {
+  return {
+    type: NOTIFICATIONS_SET_BROWSER_SUPPORT,
+    value,
+  };
+}
+
+export function setBrowserPermission (value) {
+  return {
+    type: NOTIFICATIONS_SET_BROWSER_PERMISSION,
+    value,
+  };
+}
--- a/app/javascript/mastodon/actions/onboarding.js
+++ b/app/javascript/mastodon/actions/onboarding.js
@ -1,8 +1,21 @@
 import { changeSetting, saveSettings } from './settings';
+import { requestBrowserPermission } from './notifications';

 export const INTRODUCTION_VERSION = 20181216044202;

 export const closeOnboarding = () => dispatch => {
  dispatch(changeSetting(['introductionVersion'], INTRODUCTION_VERSION));
  dispatch(saveSettings());
+
+  dispatch(requestBrowserPermission((permission) => {
+    if (permission === 'granted') {
+      dispatch(changeSetting(['notifications', 'alerts', 'follow'], true));
+      dispatch(changeSetting(['notifications', 'alerts', 'favourite'], true));
+      dispatch(changeSetting(['notifications', 'alerts', 'reblog'], true));
+      dispatch(changeSetting(['notifications', 'alerts', 'mention'], true));
+      dispatch(changeSetting(['notifications', 'alerts', 'poll'], true));
+      dispatch(changeSetting(['notifications', 'alerts', 'status'], true));
+      dispatch(saveSettings());
+    }
+  }));
 };
--- a/app/javascript/mastodon/components/account.js
+++ b/app/javascript/mastodon/components/account.js
@ -8,6 +8,7 @@ import IconButton from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
+import RelativeTimestamp from './relative_timestamp';

 const messages = defineMessages({
  follow: { id: 'account.follow', defaultMessage: 'Follow' },
@ -107,11 +108,17 @@ class Account extends ImmutablePureComponent {
      }
    }

+    let mute_expires_at;
+    if (account.get('mute_expires_at')) {
+      mute_expires_at =  <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>;
+    }
+
    return (
      <div className='account'>
        <div className='account__wrapper'>
          <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            {mute_expires_at}
            <DisplayName account={account} />
          </Permalink>

--- a/app/javascript/mastodon/components/autosuggest_emoji.js
+++ b/app/javascript/mastodon/components/autosuggest_emoji.js
@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
-
-const assetHost = process.env.CDN_HOST || '';
+import { assetHost } from 'mastodon/utils/config';

 export default class AutosuggestEmoji extends React.PureComponent {

--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@ -34,6 +34,7 @@ class ColumnHeader extends React.PureComponent {
    onMove: PropTypes.func,
    onClick: PropTypes.func,
    appendContent: PropTypes.node,
+    collapseIssues: PropTypes.bool,
  };

  state = {
@ -83,7 +84,7 @@ class ColumnHeader extends React.PureComponent {
  }

  render () {
-    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props;
+    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
    const { collapsed, animating } = this.state;

    const wrapperClassName = classNames('column-header__wrapper', {
@ -145,7 +146,20 @@ class ColumnHeader extends React.PureComponent {
    }

    if (children || (multiColumn && this.props.onPin)) {
-      collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='sliders' /></button>;
+      collapseButton = (
+        <button
+          className={collapsibleButtonClassName}
+          title={formatMessage(collapsed ? messages.show : messages.hide)}
+          aria-label={formatMessage(collapsed ? messages.show : messages.hide)}
+          aria-pressed={collapsed ? 'false' : 'true'}
+          onClick={this.handleToggleClick}
+        >
+          <i className='icon-with-badge'>
+            <Icon id='sliders' />
+            {collapseIssues && <i className='icon-with-badge__issue-badge' />}
+          </i>
+        </button>
+      );
    }

    const hasTitle = icon && title;
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@ -116,6 +116,7 @@ export default class IconButton extends React.PureComponent {
      activate,
      deactivate,
      overlayed: overlay,
+      'icon-button--with-counter': typeof counter !== 'undefined',
    });

    if (typeof counter !== 'undefined') {
--- a/app/javascript/mastodon/components/icon_with_badge.js
+++ b/app/javascript/mastodon/components/icon_with_badge.js
@ -4,16 +4,18 @@ import Icon from 'mastodon/components/icon';

 const formatNumber = num => num > 40 ? '40+' : num;

-const IconWithBadge = ({ id, count, className }) => (
+const IconWithBadge = ({ id, count, issueBadge, className }) => (
  <i className='icon-with-badge'>
    <Icon id={id} fixedWidth className={className} />
    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+    {issueBadge && <i className='icon-with-badge__issue-badge' />}
  </i>
 );

 IconWithBadge.propTypes = {
  id: PropTypes.string.isRequired,
  count: PropTypes.number.isRequired,
+  issueBadge: PropTypes.bool,
  className: PropTypes.string,
 };

--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@ -7,6 +7,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import detectPassiveEvents from 'detect-passive-events';
 import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
+import { assetHost } from 'mastodon/utils/config';

 const messages = defineMessages({
  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@ -25,7 +26,6 @@ const messages = defineMessages({
  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
 });

-const assetHost = process.env.CDN_HOST || '';
 let EmojiPicker, Emoji; // load asynchronously

 const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`;
--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/app/javascript/mastodon/features/emoji/emoji.js
@ -1,11 +1,10 @@
 import { autoPlayGif } from '../../initial_state';
 import unicodeMapping from './emoji_unicode_mapping_light';
+import { assetHost } from 'mastodon/utils/config';
 import Trie from 'substring-trie';

 const trie = new Trie(Object.keys(unicodeMapping));

-const assetHost = process.env.CDN_HOST || '';
-
 // Convert to file names from emojis. (For different variation selector emojis)
 const emojiFilenames = (emojis) => {
  return emojis.map(v => unicodeMapping[v].filename);
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import IconButton from 'mastodon/components/icon_button';
 import Icon from 'mastodon/components/icon';
 import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
-import { autoPlayGif, reduceMotion } from 'mastodon/initial_state';
+import { autoPlayGif, reduceMotion, disableSwiping } from 'mastodon/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 import { mascot } from 'mastodon/initial_state';
 import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light';
@ -15,6 +15,7 @@ import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_pick
 import AnimatedNumber from 'mastodon/components/animated_number';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
+import { assetHost } from 'mastodon/utils/config';

 const messages = defineMessages({
  close: { id: 'lightbox.close', defaultMessage: 'Close' },
@ -153,8 +154,6 @@ class Content extends ImmutablePureComponent {

 }

-const assetHost = process.env.CDN_HOST || '';
-
 class Emoji extends React.PureComponent {

  static propTypes = {
@ -436,6 +435,7 @@ class Announcements extends ImmutablePureComponent {
                removeReaction={this.props.removeReaction}
                intl={intl}
                selected={index === idx}
+                disabled={disableSwiping}
              />
            ))}
          </ReactSwipeableViews>
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@ -10,7 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me, profile_directory, showTrends } from '../../initial_state';
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import { List as ImmutableList } from 'immutable';
-import NavigationBar from '../compose/components/navigation_bar';
+import NavigationContainer from '../compose/containers/navigation_container';
 import Icon from 'mastodon/components/icon';
 import LinkFooter from 'mastodon/features/ui/components/link_footer';
 import TrendsContainer from './containers/trends_container';
@ -168,7 +168,7 @@ class GettingStarted extends ImmutablePureComponent {

        <div className='getting-started'>
          <div className='getting-started__wrapper' style={{ height }}>
-            {!multiColumn && <NavigationBar account={myAccount} />}
+            {!multiColumn && <NavigationContainer />}
            {navItems}
          </div>

--- a/app/javascript/mastodon/features/introduction/index.js
+++ b/app/javascript/mastodon/features/introduction/index.js
@ -9,6 +9,7 @@ import screenHello from '../../../images/screen_hello.svg';
 import screenFederation from '../../../images/screen_federation.svg';
 import screenInteractions from '../../../images/screen_interactions.svg';
 import logoTransparent from '../../../images/logo_transparent.svg';
+import { disableSwiping } from 'mastodon/initial_state';

 const FrameWelcome = ({ domain, onNext }) => (
  <div className='introduction__frame'>
@ -171,7 +172,7 @@ class Introduction extends React.PureComponent {

    return (
      <div className='introduction'>
-        <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='introduction__pager'>
+        <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} disabled={disableSwiping} className='introduction__pager'>
          {pages.map((page, i) => (
            <div key={i} className={classNames('introduction__frame-wrapper', { 'active': i === currentIndex })}>{page}</div>
          ))}
--- a/app/javascript/mastodon/features/notifications/components/column_settings.js
+++ b/app/javascript/mastodon/features/notifications/components/column_settings.js
@ -12,6 +12,10 @@ export default class ColumnSettings extends React.PureComponent {
    pushSettings: ImmutablePropTypes.map.isRequired,
    onChange: PropTypes.func.isRequired,
    onClear: PropTypes.func.isRequired,
+    onRequestNotificationPermission: PropTypes.func,
+    alertsEnabled: PropTypes.bool,
+    browserSupport: PropTypes.bool,
+    browserPermission: PropTypes.bool,
  };

  onPushChange = (path, checked) => {
@ -19,7 +23,7 @@ export default class ColumnSettings extends React.PureComponent {
  }

  render () {
-    const { settings, pushSettings, onChange, onClear } = this.props;
+    const { settings, pushSettings, onChange, onClear, alertsEnabled, browserSupport, browserPermission } = this.props;

    const filterShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show' defaultMessage='Show' />;
    const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
@ -32,6 +36,12 @@ export default class ColumnSettings extends React.PureComponent {

    return (
      <div>
+        {alertsEnabled && browserSupport && browserPermission === 'denied' && (
+          <div className='column-settings__row column-settings__row--with-margin'>
+            <span className='warning-hint'><FormattedMessage id='notifications.permission_denied' defaultMessage='Desktop notifications are unavailable due to previously denied browser permissions request' /></span>
+          </div>
+        )}
+
        <div className='column-settings__row'>
          <ClearColumnButton onClick={onClear} />
        </div>
@ -40,6 +50,7 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-filter-bar' className='column-settings__section'>
            <FormattedMessage id='notifications.column_settings.filter_bar.category' defaultMessage='Quick filter bar' />
          </span>
+
          <div className='column-settings__row'>
            <SettingToggle id='show-filter-bar' prefix='notifications' settings={settings} settingPath={['quickFilter', 'show']} onChange={onChange} label={filterShowStr} />
            <SettingToggle id='show-filter-bar' prefix='notifications' settings={settings} settingPath={['quickFilter', 'advanced']} onChange={onChange} label={filterAdvancedStr} />
@ -50,7 +61,7 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-follow' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>

          <div className='column-settings__row'>
-            <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow']} onChange={onChange} label={alertStr} />
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow']} onChange={onChange} label={alertStr} />
            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow']} onChange={this.onPushChange} label={pushStr} />}
            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow']} onChange={onChange} label={showStr} />
            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow']} onChange={onChange} label={soundStr} />
@ -61,7 +72,7 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-follow-request' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow_request' defaultMessage='New follow requests:' /></span>

          <div className='column-settings__row'>
-            <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow_request']} onChange={onChange} label={alertStr} />
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow_request']} onChange={onChange} label={alertStr} />
            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow_request']} onChange={this.onPushChange} label={pushStr} />}
            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow_request']} onChange={onChange} label={showStr} />
            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow_request']} onChange={onChange} label={soundStr} />
@ -72,7 +83,7 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-favourite' className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>

          <div className='column-settings__row'>
-            <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favourite']} onChange={this.onPushChange} label={pushStr} />}
            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'favourite']} onChange={onChange} label={showStr} />
            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
@ -83,7 +94,7 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-mention' className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>

          <div className='column-settings__row'>
-            <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'mention']} onChange={onChange} label={alertStr} />
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'mention']} onChange={onChange} label={alertStr} />
            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'mention']} onChange={this.onPushChange} label={pushStr} />}
            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'mention']} onChange={onChange} label={showStr} />
            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'mention']} onChange={onChange} label={soundStr} />
@ -94,7 +105,7 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-reblog' className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>

          <div className='column-settings__row'>
-            <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reblog']} onChange={this.onPushChange} label={pushStr} />}
            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={showStr} />
            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'reblog']} onChange={onChange} label={soundStr} />
@ -105,12 +116,23 @@ export default class ColumnSettings extends React.PureComponent {
          <span id='notifications-poll' className='column-settings__section'><FormattedMessage id='notifications.column_settings.poll' defaultMessage='Poll results:' /></span>

          <div className='column-settings__row'>
-            <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'poll']} onChange={onChange} label={alertStr} />
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'poll']} onChange={onChange} label={alertStr} />
            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'poll']} onChange={this.onPushChange} label={pushStr} />}
            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'poll']} onChange={onChange} label={showStr} />
            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'poll']} onChange={onChange} label={soundStr} />
          </div>
        </div>
+
+        <div role='group' aria-labelledby='notifications-status'>
+          <span id='notifications-status' className='column-settings__section'><FormattedMessage id='notifications.column_settings.status' defaultMessage='New toots:' /></span>
+
+          <div className='column-settings__row'>
+            <SettingToggle disabled={browserPermission !== 'granted'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'status']} onChange={onChange} label={alertStr} />
+            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'status']} onChange={this.onPushChange} label={pushStr} />}
+            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'status']} onChange={onChange} label={showStr} />
+            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'status']} onChange={onChange} label={soundStr} />
+          </div>
+        </div>
      </div>
    );
  }
--- a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js
+++ b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.js
@ -0,0 +1,30 @@
+import React from 'react';
+import Icon from 'mastodon/components/icon';
+import Button from 'mastodon/components/button';
+import { requestBrowserPermission } from 'mastodon/actions/notifications';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+export default @connect(() => {})
+class NotificationsPermissionBanner extends React.PureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+  };
+
+  handleClick = () => {
+    this.props.dispatch(requestBrowserPermission());
+  }
+
+  render () {
+    return (
+      <div className='notifications-permission-banner'>
+        <h2><FormattedMessage id='notifications_permission_banner.title' defaultMessage='Never miss a thing' /></h2>
+        <p><FormattedMessage id='notifications_permission_banner.how_to_control' defaultMessage="To receive notifications when Mastodon isn't open, enable desktop notifications. You can control precisely which types of interactions generate desktop notifications through the {icon} button above once they're enabled." values={{ icon: <Icon id='sliders' /> }} /></p>
+        <Button onClick={this.handleClick}><FormattedMessage id='notifications_permission_banner.enable' defaultMessage='Enable desktop notifications' /></Button>
+      </div>
+    );
+  }
+
+}
--- a/app/javascript/mastodon/features/notifications/components/setting_toggle.js
+++ b/app/javascript/mastodon/features/notifications/components/setting_toggle.js
@ -12,6 +12,7 @@ export default class SettingToggle extends React.PureComponent {
    label: PropTypes.node.isRequired,
    onChange: PropTypes.func.isRequired,
    defaultValue: PropTypes.bool,
+    disabled: PropTypes.bool,
  }

  onChange = ({ target }) => {
@ -19,12 +20,12 @@ export default class SettingToggle extends React.PureComponent {
  }

  render () {
-    const { prefix, settings, settingPath, label, defaultValue } = this.props;
+    const { prefix, settings, settingPath, label, defaultValue, disabled } = this.props;
    const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');

    return (
      <div className='setting-toggle'>
-        <Toggle id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} />