From e2b561e3a521ff893943c0e9e32952e35934ca54 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 4 Oct 2022 20:13:23 +0200
Subject: Fix logged-out web UI on smaller screens (#19263)

---
 app/javascript/styles/mastodon/components.scss | 270 ++++++++++++++++---------
 app/javascript/styles/mastodon/variables.scss  |   2 +-
 2 files changed, 172 insertions(+), 100 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 87ec6bb8a..e831fce53 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2191,27 +2191,62 @@ a.account__display-name {
     &__main {
       box-sizing: border-box;
       width: 100%;
-      max-width: 600px;
       flex: 0 0 auto;
       display: flex;
       flex-direction: column;
 
       @media screen and (min-width: $no-gap-breakpoint) {
         padding: 0 10px;
+        max-width: 600px;
       }
     }
   }
 }
 
+$ui-header-height: 55px;
+
+.ui__header {
+  display: none;
+  box-sizing: border-box;
+  height: $ui-header-height;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  justify-content: space-between;
+  align-items: center;
+
+  &__logo {
+    display: inline-flex;
+    padding: 15px;
+
+    .logo {
+      height: $ui-header-height - 30px;
+      width: auto;
+    }
+  }
+
+  &__links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 10px;
+
+    .button {
+      flex: 0 0 auto;
+    }
+  }
+}
+
 .tabs-bar__wrapper {
   background: darken($ui-base-color, 8%);
   position: sticky;
-  top: 0;
+  top: $ui-header-height;
   z-index: 2;
   padding-top: 0;
 
   @media screen and (min-width: $no-gap-breakpoint) {
     padding-top: 10px;
+    top: 0;
   }
 
   .tabs-bar {
@@ -2419,100 +2454,98 @@ a.account__display-name {
     padding-top: 0;
   }
 
-  @media screen and (min-width: 630px) {
-    .detailed-status {
-      padding: 15px;
+  .detailed-status {
+    padding: 15px;
 
-      .media-gallery,
-      .video-player,
-      .audio-player {
-        margin-top: 15px;
-      }
+    .media-gallery,
+    .video-player,
+    .audio-player {
+      margin-top: 15px;
     }
+  }
 
-    .account__header__bar {
-      padding: 5px 10px;
-    }
+  .account__header__bar {
+    padding: 5px 10px;
+  }
 
-    .navigation-bar,
-    .compose-form {
-      padding: 15px;
-    }
+  .navigation-bar,
+  .compose-form {
+    padding: 15px;
+  }
 
-    .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-      padding-top: 15px;
-    }
+  .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
+    padding-top: 15px;
+  }
 
-    .notification__report {
-      padding: 15px 15px 15px (48px + 15px * 2);
-      min-height: 48px + 2px;
+  .notification__report {
+    padding: 15px 15px 15px (48px + 15px * 2);
+    min-height: 48px + 2px;
 
-      &__avatar {
-        left: 15px;
-        top: 17px;
-      }
+    &__avatar {
+      left: 15px;
+      top: 17px;
     }
+  }
 
-    .status {
-      padding: 15px 15px 15px (48px + 15px * 2);
-      min-height: 48px + 2px;
+  .status {
+    padding: 15px 15px 15px (48px + 15px * 2);
+    min-height: 48px + 2px;
 
-      &__avatar {
-        left: 15px;
-        top: 17px;
-      }
+    &__avatar {
+      left: 15px;
+      top: 17px;
+    }
 
-      &__content {
-        padding-top: 5px;
-      }
+    &__content {
+      padding-top: 5px;
+    }
 
-      &__prepend {
-        margin-left: 48px + 15px * 2;
-        padding-top: 15px;
-      }
+    &__prepend {
+      margin-left: 48px + 15px * 2;
+      padding-top: 15px;
+    }
 
-      &__prepend-icon-wrapper {
-        left: -32px;
-      }
+    &__prepend-icon-wrapper {
+      left: -32px;
+    }
 
-      .media-gallery,
-      &__action-bar,
-      .video-player,
-      .audio-player {
-        margin-top: 10px;
-      }
+    .media-gallery,
+    &__action-bar,
+    .video-player,
+    .audio-player {
+      margin-top: 10px;
     }
+  }
 
-    .account {
-      padding: 15px 10px;
+  .account {
+    padding: 15px 10px;
 
-      &__header__bio {
-        margin: 0 -10px;
-      }
+    &__header__bio {
+      margin: 0 -10px;
     }
+  }
 
-    .notification {
-      &__message {
-        margin-left: 48px + 15px * 2;
-        padding-top: 15px;
-      }
+  .notification {
+    &__message {
+      margin-left: 48px + 15px * 2;
+      padding-top: 15px;
+    }
 
-      &__favourite-icon-wrapper {
-        left: -32px;
-      }
+    &__favourite-icon-wrapper {
+      left: -32px;
+    }
 
-      .status {
-        padding-top: 8px;
-      }
+    .status {
+      padding-top: 8px;
+    }
 
-      .account {
-        padding-top: 8px;
-      }
+    .account {
+      padding-top: 8px;
+    }
 
-      .account__avatar-wrapper {
-        margin-left: 17px;
-        margin-right: 15px;
-      }
+    .account__avatar-wrapper {
+      margin-left: 17px;
+      margin-right: 15px;
     }
   }
 }
@@ -2554,39 +2587,85 @@ a.account__display-name {
   .search {
     margin-bottom: 10px;
   }
-}
 
-@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
-  .columns-area__panels__pane--compositional {
+  .floating-action-button,
+  .tabs-bar__link.optional {
+    display: none;
+  }
+
+  .search-page .search {
+    display: none;
+  }
+
+  .navigation-panel__legal {
     display: none;
   }
+}
 
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
   .with-fab .scrollable .item-list:last-child {
     padding-bottom: 5.25rem;
   }
-}
 
-@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
-  .floating-action-button,
-  .tabs-bar__link.optional {
-    display: none;
+  .columns-area__panels__main {
+    width: calc(100% - 55px);
   }
 
-  .search-page .search {
-    display: none;
+  .columns-area__panels {
+    min-height: calc(100vh - $ui-header-height);
   }
-}
 
-@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
   .columns-area__panels__pane--navigational {
-    display: none;
+    min-width: 55px;
+
+    .columns-area__panels__pane__inner {
+      width: 55px;
+    }
+
+    .navigation-panel {
+      margin: 0;
+      background: $ui-base-color;
+      border-left: 1px solid lighten($ui-base-color, 8%);
+      height: 100vh;
+    }
+
+    .column-link span,
+    .navigation-panel__sign-in-banner,
+    .navigation-panel__logo,
+    .getting-started__trends {
+      display: none;
+    }
+
+    .column-link__icon {
+      font-size: 18px;
+    }
+  }
+
+  .ui__header {
+    display: flex;
+    background: $ui-base-color;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
+  .column-header,
+  .column-back-button,
+  .scrollable {
+    border-radius: 0 !important;
   }
 }
 
-@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
-  .tabs-bar {
+.explore__search-header {
+  display: none;
+}
+
+@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) {
+  .columns-area__panels__pane--compositional {
     display: none;
   }
+
+  .explore__search-header {
+    display: flex;
+  }
 }
 
 .icon-with-badge {
@@ -7360,7 +7439,7 @@ noscript {
 
       path:first-child {
         fill: rgba($highlight-text-color, 0.25) !important;
-        fill-opacity: 1 !important;
+        fill-opacity: 100% !important;
       }
 
       path:last-child {
@@ -7832,10 +7911,9 @@ noscript {
 }
 
 .explore__search-header {
-  background: $ui-base-color;
-  display: flex;
-  align-items: flex-start;
+  background: darken($ui-base-color, 4%);
   justify-content: center;
+  align-items: center;
   padding: 15px;
 
   .search {
@@ -7844,14 +7922,8 @@ noscript {
   }
 
   .search__input {
-    border-radius: 4px;
-    color: $inverted-text-color;
-    background: $simple-background-color;
+    border: 1px solid lighten($ui-base-color, 8%);
     padding: 10px;
-
-    &::placeholder {
-      color: $dark-text-color;
-    }
   }
 
   .search .fa {
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index be2c900ea..775a12e68 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -53,7 +53,7 @@ $media-modal-media-max-width: 100%;
 // put margins on top and bottom of image to avoid the screen covered by image.
 $media-modal-media-max-height: 80%;
 
-$no-gap-breakpoint: 415px;
+$no-gap-breakpoint: 890px;
 
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
-- 
cgit 


From d2528b26b6da34f34b5d7a392e263428d3c09d69 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 5 Oct 2022 03:47:56 +0200
Subject: Add server banner to web app, add `GET /api/v2/instance` to REST API
 (#19294)

---
 app/controllers/about_controller.rb                |   2 +-
 app/controllers/api/v1/instances_controller.rb     |   2 +-
 app/controllers/api/v2/instances_controller.rb     |   8 ++
 app/javascript/mastodon/actions/rules.js           |  27 ------
 app/javascript/mastodon/actions/server.js          |  30 ++++++
 app/javascript/mastodon/components/account.js      |  14 ++-
 app/javascript/mastodon/components/display_name.js |   8 +-
 .../mastodon/components/server_banner.js           |  91 ++++++++++++++++++
 app/javascript/mastodon/features/report/rules.js   |   2 +-
 .../features/ui/components/compose_panel.js        |   2 +
 .../features/ui/components/report_modal.js         |   4 +-
 app/javascript/mastodon/features/ui/index.js       |   4 +-
 app/javascript/mastodon/initial_state.js           |   1 -
 app/javascript/mastodon/reducers/index.js          |   4 +-
 app/javascript/mastodon/reducers/rules.js          |  13 ---
 app/javascript/mastodon/reducers/server.js         |  19 ++++
 app/javascript/styles/mastodon/components.scss     |  82 +++++++++++++++++
 app/presenters/instance_presenter.rb               |  64 +++++++++----
 app/serializers/initial_state_serializer.rb        |  19 ++--
 app/serializers/manifest_serializer.rb             |   4 +-
 app/serializers/rest/instance_serializer.rb        |  81 +++++-----------
 app/serializers/rest/v1/instance_serializer.rb     | 102 +++++++++++++++++++++
 app/views/about/more.html.haml                     |   8 +-
 app/views/about/show.html.haml                     |   6 +-
 app/views/application/_sidebar.html.haml           |   4 +-
 app/views/privacy/show.html.haml                   |   2 +-
 app/views/shared/_og.html.haml                     |   4 +-
 config/routes.rb                                   |   4 +-
 spec/presenters/instance_presenter_spec.rb         |  38 ++++----
 spec/views/about/show.html.haml_spec.rb            |  20 +---
 30 files changed, 473 insertions(+), 196 deletions(-)
 create mode 100644 app/controllers/api/v2/instances_controller.rb
 delete mode 100644 app/javascript/mastodon/actions/rules.js
 create mode 100644 app/javascript/mastodon/actions/server.js
 create mode 100644 app/javascript/mastodon/components/server_banner.js
 delete mode 100644 app/javascript/mastodon/reducers/rules.js
 create mode 100644 app/javascript/mastodon/reducers/server.js
 create mode 100644 app/serializers/rest/v1/instance_serializer.rb

(limited to 'app/javascript/styles')

diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb
index 4fc2fbe34..8da4a19ab 100644
--- a/app/controllers/about_controller.rb
+++ b/app/controllers/about_controller.rb
@@ -18,7 +18,7 @@ class AboutController < ApplicationController
   def more
     flash.now[:notice] = I18n.t('about.instance_actor_flash') if params[:instance_actor]
 
-    toc_generator = TOCGenerator.new(@instance_presenter.site_extended_description)
+    toc_generator = TOCGenerator.new(@instance_presenter.extended_description)
 
     @rules             = Rule.ordered
     @contents          = toc_generator.html
diff --git a/app/controllers/api/v1/instances_controller.rb b/app/controllers/api/v1/instances_controller.rb
index 5b5058a7b..913319a86 100644
--- a/app/controllers/api/v1/instances_controller.rb
+++ b/app/controllers/api/v1/instances_controller.rb
@@ -6,6 +6,6 @@ class Api::V1::InstancesController < Api::BaseController
 
   def show
     expires_in 3.minutes, public: true
-    render_with_cache json: {}, serializer: REST::InstanceSerializer, root: 'instance'
+    render_with_cache json: InstancePresenter.new, serializer: REST::V1::InstanceSerializer, root: 'instance'
   end
 end
diff --git a/app/controllers/api/v2/instances_controller.rb b/app/controllers/api/v2/instances_controller.rb
new file mode 100644
index 000000000..bcd90cff2
--- /dev/null
+++ b/app/controllers/api/v2/instances_controller.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Api::V2::InstancesController < Api::V1::InstancesController
+  def show
+    expires_in 3.minutes, public: true
+    render_with_cache json: InstancePresenter.new, serializer: REST::InstanceSerializer, root: 'instance'
+  end
+end
diff --git a/app/javascript/mastodon/actions/rules.js b/app/javascript/mastodon/actions/rules.js
deleted file mode 100644
index 34e60a121..000000000
--- a/app/javascript/mastodon/actions/rules.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import api from '../api';
-
-export const RULES_FETCH_REQUEST = 'RULES_FETCH_REQUEST';
-export const RULES_FETCH_SUCCESS = 'RULES_FETCH_SUCCESS';
-export const RULES_FETCH_FAIL    = 'RULES_FETCH_FAIL';
-
-export const fetchRules = () => (dispatch, getState) => {
-  dispatch(fetchRulesRequest());
-
-  api(getState)
-    .get('/api/v1/instance').then(({ data }) => dispatch(fetchRulesSuccess(data.rules)))
-    .catch(err => dispatch(fetchRulesFail(err)));
-};
-
-const fetchRulesRequest = () => ({
-  type: RULES_FETCH_REQUEST,
-});
-
-const fetchRulesSuccess = rules => ({
-  type: RULES_FETCH_SUCCESS,
-  rules,
-});
-
-const fetchRulesFail = error => ({
-  type: RULES_FETCH_FAIL,
-  error,
-});
diff --git a/app/javascript/mastodon/actions/server.js b/app/javascript/mastodon/actions/server.js
new file mode 100644
index 000000000..af8fef780
--- /dev/null
+++ b/app/javascript/mastodon/actions/server.js
@@ -0,0 +1,30 @@
+import api from '../api';
+import { importFetchedAccount } from './importer';
+
+export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST';
+export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS';
+export const SERVER_FETCH_FAIL    = 'Server_FETCH_FAIL';
+
+export const fetchServer = () => (dispatch, getState) => {
+  dispatch(fetchServerRequest());
+
+  api(getState)
+    .get('/api/v2/instance').then(({ data }) => {
+      if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
+      dispatch(fetchServerSuccess(data));
+    }).catch(err => dispatch(fetchServerFail(err)));
+};
+
+const fetchServerRequest = () => ({
+  type: SERVER_FETCH_REQUEST,
+});
+
+const fetchServerSuccess = server => ({
+  type: SERVER_FETCH_SUCCESS,
+  server,
+});
+
+const fetchServerFail = error => ({
+  type: SERVER_FETCH_FAIL,
+  error,
+});
diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js
index af9f119c8..36429e647 100644
--- a/app/javascript/mastodon/components/account.js
+++ b/app/javascript/mastodon/components/account.js
@@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
 import RelativeTimestamp from './relative_timestamp';
+import Skeleton from 'mastodon/components/skeleton';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -26,7 +27,7 @@ export default @injectIntl
 class Account extends ImmutablePureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
+    account: ImmutablePropTypes.map,
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     onMute: PropTypes.func.isRequired,
@@ -67,7 +68,16 @@ class Account extends ImmutablePureComponent {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction } = this.props;
 
     if (!account) {
-      return <div />;
+      return (
+        <div className='account'>
+          <div className='account__wrapper'>
+            <div className='account__display-name'>
+              <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
+              <DisplayName />
+            </div>
+          </div>
+        </div>
+      );
     }
 
     if (hidden) {
diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js
index 7ccfbd0cd..e9139ab0f 100644
--- a/app/javascript/mastodon/components/display_name.js
+++ b/app/javascript/mastodon/components/display_name.js
@@ -2,11 +2,12 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { autoPlayGif } from 'mastodon/initial_state';
+import Skeleton from 'mastodon/components/skeleton';
 
 export default class DisplayName extends React.PureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
+    account: ImmutablePropTypes.map,
     others: ImmutablePropTypes.list,
     localDomain: PropTypes.string,
   };
@@ -48,7 +49,7 @@ export default class DisplayName extends React.PureComponent {
       if (others.size - 2 > 0) {
         suffix = `+${others.size - 2}`;
       }
-    } else {
+    } else if ((others && others.size > 0) || this.props.account) {
       if (others && others.size > 0) {
         account = others.first();
       } else {
@@ -63,6 +64,9 @@ export default class DisplayName extends React.PureComponent {
 
       displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
       suffix      = <span className='display-name__account'>@{acct}</span>;
+    } else {
+      displayName = <bdi><strong className='display-name__html'><Skeleton width='10ch' /></strong></bdi>;
+      suffix = <span className='display-name__account'><Skeleton width='7ch' /></span>;
     }
 
     return (
diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js
new file mode 100644
index 000000000..bdd7f7380
--- /dev/null
+++ b/app/javascript/mastodon/components/server_banner.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { domain } from 'mastodon/initial_state';
+import { fetchServer } from 'mastodon/actions/server';
+import { connect } from 'react-redux';
+import Account from 'mastodon/containers/account_container';
+import ShortNumber from 'mastodon/components/short_number';
+import Skeleton from 'mastodon/components/skeleton';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
+});
+
+const mapStateToProps = state => ({
+  server: state.get('server'),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class ServerBanner extends React.PureComponent {
+
+  static propTypes = {
+    server: PropTypes.object,
+    dispatch: PropTypes.func,
+    intl: PropTypes.object,
+  };
+
+  componentDidMount () {
+    const { dispatch } = this.props;
+    dispatch(fetchServer());
+  }
+
+  render () {
+    const { server, intl } = this.props;
+    const isLoading = server.get('isLoading');
+
+    return (
+      <div className='server-banner'>
+        <div className='server-banner__introduction'>
+          <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
+        </div>
+
+        <img src={server.get('thumbnail')} alt={server.get('title')} className='server-banner__hero' />
+
+        <div className='server-banner__description'>
+          {isLoading ? (
+            <>
+              <Skeleton width='100%' />
+              <br />
+              <Skeleton width='100%' />
+              <br />
+              <Skeleton width='70%' />
+            </>
+          ) : server.get('description')}
+        </div>
+
+        <div className='server-banner__meta'>
+          <div className='server-banner__meta__column'>
+            <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
+
+            <Account id={server.getIn(['contact', 'account', 'id'])} />
+          </div>
+
+          <div className='server-banner__meta__column'>
+            <h4><FormattedMessage id='server_banner.server_stats' defaultMessage='Server stats:' /></h4>
+
+            {isLoading ? (
+              <>
+                <strong className='server-banner__number'><Skeleton width='10ch' /></strong>
+                <br />
+                <span className='server-banner__number-label'><Skeleton width='5ch' /></span>
+              </>
+            ) : (
+              <>
+                <strong className='server-banner__number'><ShortNumber value={server.getIn(['usage', 'users', 'active_month'])} /></strong>
+                <br />
+                <span className='server-banner__number-label' title={intl.formatMessage(messages.aboutActiveUsers)}><FormattedMessage id='server_banner.active_users' defaultMessage='active users' /></span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <hr className='spacer' />
+
+        <a className='button button--block button-secondary' href='/about/more' target='_blank'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></a>
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/report/rules.js b/app/javascript/mastodon/features/report/rules.js
index f2db0d9e4..2cb4a95b5 100644
--- a/app/javascript/mastodon/features/report/rules.js
+++ b/app/javascript/mastodon/features/report/rules.js
@@ -7,7 +7,7 @@ import Button from 'mastodon/components/button';
 import Option from './components/option';
 
 const mapStateToProps = state => ({
-  rules: state.get('rules'),
+  rules: state.getIn(['server', 'rules']),
 });
 
 export default @connect(mapStateToProps)
diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js
index 655c202fa..1d481eab5 100644
--- a/app/javascript/mastodon/features/ui/components/compose_panel.js
+++ b/app/javascript/mastodon/features/ui/components/compose_panel.js
@@ -5,6 +5,7 @@ import SearchContainer from 'mastodon/features/compose/containers/search_contain
 import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
 import NavigationContainer from 'mastodon/features/compose/containers/navigation_container';
 import LinkFooter from './link_footer';
+import ServerBanner from 'mastodon/components/server_banner';
 import { changeComposing } from 'mastodon/actions/compose';
 
 export default @connect()
@@ -35,6 +36,7 @@ class ComposePanel extends React.PureComponent {
 
         {!signedIn && (
           <React.Fragment>
+            <ServerBanner />
             <div className='flex-spacer' />
           </React.Fragment>
         )}
diff --git a/app/javascript/mastodon/features/ui/components/report_modal.js b/app/javascript/mastodon/features/ui/components/report_modal.js
index 744dd248b..264da07ce 100644
--- a/app/javascript/mastodon/features/ui/components/report_modal.js
+++ b/app/javascript/mastodon/features/ui/components/report_modal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { submitReport } from 'mastodon/actions/reports';
 import { expandAccountTimeline } from 'mastodon/actions/timelines';
-import { fetchRules } from 'mastodon/actions/rules';
+import { fetchServer } from 'mastodon/actions/server';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { makeGetAccount } from 'mastodon/selectors';
@@ -117,7 +117,7 @@ class ReportModal extends ImmutablePureComponent {
     const { dispatch, accountId } = this.props;
 
     dispatch(expandAccountTimeline(accountId, { withReplies: true }));
-    dispatch(fetchRules());
+    dispatch(fetchServer());
   }
 
   render () {
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 4e37908c8..bc6ff1866 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -13,7 +13,7 @@ import { debounce } from 'lodash';
 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { expandHomeTimeline } from '../../actions/timelines';
 import { expandNotifications } from '../../actions/notifications';
-import { fetchRules } from '../../actions/rules';
+import { fetchServer } from '../../actions/server';
 import { clearHeight } from '../../actions/height_cache';
 import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
@@ -392,7 +392,7 @@ class UI extends React.PureComponent {
       this.props.dispatch(expandHomeTimeline());
       this.props.dispatch(expandNotifications());
 
-      setTimeout(() => this.props.dispatch(fetchRules()), 3000);
+      setTimeout(() => this.props.dispatch(fetchServer()), 3000);
     }
 
     this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js
index 81607a03b..9ecbfe576 100644
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@@ -28,6 +28,5 @@ export const title = getMeta('title');
 export const cropImages = getMeta('crop_images');
 export const disableSwiping = getMeta('disable_swiping');
 export const languages = initialState && initialState.languages;
-export const server = initialState && initialState.server;
 
 export default initialState;
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js
index d3d0303df..bccdc1865 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.js
@@ -17,7 +17,7 @@ import status_lists from './status_lists';
 import mutes from './mutes';
 import blocks from './blocks';
 import boosts from './boosts';
-import rules from './rules';
+import server from './server';
 import contexts from './contexts';
 import compose from './compose';
 import search from './search';
@@ -62,7 +62,7 @@ const reducers = {
   mutes,
   blocks,
   boosts,
-  rules,
+  server,
   contexts,
   compose,
   search,
diff --git a/app/javascript/mastodon/reducers/rules.js b/app/javascript/mastodon/reducers/rules.js
deleted file mode 100644
index c1180b520..000000000
--- a/app/javascript/mastodon/reducers/rules.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { RULES_FETCH_SUCCESS } from 'mastodon/actions/rules';
-import { List as ImmutableList, fromJS } from 'immutable';
-
-const initialState = ImmutableList();
-
-export default function rules(state = initialState, action) {
-  switch (action.type) {
-  case RULES_FETCH_SUCCESS:
-    return fromJS(action.rules);
-  default:
-    return state;
-  }
-}
diff --git a/app/javascript/mastodon/reducers/server.js b/app/javascript/mastodon/reducers/server.js
new file mode 100644
index 000000000..68131c6dd
--- /dev/null
+++ b/app/javascript/mastodon/reducers/server.js
@@ -0,0 +1,19 @@
+import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'mastodon/actions/server';
+import { Map as ImmutableMap, fromJS } from 'immutable';
+
+const initialState = ImmutableMap({
+  isLoading: true,
+});
+
+export default function server(state = initialState, action) {
+  switch (action.type) {
+  case SERVER_FETCH_REQUEST:
+    return state.set('isLoading', true);
+  case SERVER_FETCH_SUCCESS:
+    return fromJS(action.server).set('isLoading', false);
+  case SERVER_FETCH_FAIL:
+    return state.set('isLoading', false);
+  default:
+    return state;
+  }
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index e831fce53..4bdd5accf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8021,3 +8021,85 @@ noscript {
     }
   }
 }
+
+.server-banner {
+  padding: 20px 0;
+
+  &__introduction {
+    color: $darker-text-color;
+    margin-bottom: 20px;
+
+    strong {
+      font-weight: 600;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &__hero {
+    display: block;
+    border-radius: 4px;
+    width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+    aspect-ratio: 1.9;
+    border: 0;
+    background: $ui-base-color;
+    object-fit: cover;
+  }
+
+  &__description {
+    margin-bottom: 20px;
+  }
+
+  &__meta {
+    display: flex;
+    gap: 10px;
+    max-width: 100%;
+
+    &__column {
+      flex: 0 0 auto;
+      width: calc(50% - 5px);
+      overflow: hidden;
+    }
+  }
+
+  &__number {
+    font-weight: 600;
+    color: $primary-text-color;
+  }
+
+  &__number-label {
+    color: $darker-text-color;
+    font-weight: 500;
+  }
+
+  h4 {
+    text-transform: uppercase;
+    color: $darker-text-color;
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-left: 0;
+  }
+
+  .spacer {
+    margin: 10px 0;
+  }
+}
diff --git a/app/presenters/instance_presenter.rb b/app/presenters/instance_presenter.rb
index 3e85faa92..c461ac55f 100644
--- a/app/presenters/instance_presenter.rb
+++ b/app/presenters/instance_presenter.rb
@@ -1,19 +1,51 @@
 # frozen_string_literal: true
 
-class InstancePresenter
-  delegate(
-    :site_contact_email,
-    :site_title,
-    :site_short_description,
-    :site_description,
-    :site_extended_description,
-    :site_terms,
-    :closed_registrations_message,
-    to: Setting
-  )
-
-  def contact_account
-    Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, ''))
+class InstancePresenter < ActiveModelSerializers::Model
+  attributes :domain, :title, :version, :source_url,
+             :description, :languages, :rules, :contact
+
+  class ContactPresenter < ActiveModelSerializers::Model
+    attributes :email, :account
+
+    def email
+      Setting.site_contact_email
+    end
+
+    def account
+      Account.find_local(Setting.site_contact_username.strip.gsub(/\A@/, ''))
+    end
+  end
+
+  def contact
+    ContactPresenter.new
+  end
+
+  def closed_registrations_message
+    Setting.closed_registrations_message
+  end
+
+  def description
+    Setting.site_short_description
+  end
+
+  def extended_description
+    Setting.site_extended_description
+  end
+
+  def privacy_policy
+    Setting.site_terms
+  end
+
+  def domain
+    Rails.configuration.x.local_domain
+  end
+
+  def title
+    Setting.site_title
+  end
+
+  def languages
+    [I18n.default_locale]
   end
 
   def rules
@@ -40,8 +72,8 @@ class InstancePresenter
     Rails.cache.fetch('sample_accounts', expires_in: 12.hours) { Account.local.discoverable.popular.limit(3) }
   end
 
-  def version_number
-    Mastodon::Version
+  def version
+    Mastodon::Version.to_s
   end
 
   def source_url
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index 87f4db83d..1a49182a8 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -5,23 +5,24 @@ class InitialStateSerializer < ActiveModel::Serializer
 
   attributes :meta, :compose, :accounts,
              :media_attachments, :settings,
-             :languages, :server
+             :languages
 
   has_one :push_subscription, serializer: REST::WebPushSubscriptionSerializer
   has_one :role, serializer: REST::RoleSerializer
 
+  # rubocop:disable Metrics/AbcSize
   def meta
     store = {
       streaming_api_base_url: Rails.configuration.x.streaming_api_base_url,
       access_token: object.token,
       locale: I18n.locale,
-      domain: Rails.configuration.x.local_domain,
-      title: instance_presenter.site_title,
+      domain: instance_presenter.domain,
+      title: instance_presenter.title,
       admin: object.admin&.id&.to_s,
       search_enabled: Chewy.enabled?,
       repository: Mastodon::Version.repository,
-      source_url: Mastodon::Version.source_url,
-      version: Mastodon::Version.to_s,
+      source_url: instance_presenter.source_url,
+      version: instance_presenter.version,
       limited_federation_mode: Rails.configuration.x.whitelist_mode,
       mascot: instance_presenter.mascot&.file&.url,
       profile_directory: Setting.profile_directory,
@@ -54,6 +55,7 @@ class InitialStateSerializer < ActiveModel::Serializer
 
     store
   end
+  # rubocop:enable Metrics/AbcSize
 
   def compose
     store = {}
@@ -85,13 +87,6 @@ class InitialStateSerializer < ActiveModel::Serializer
     LanguagesHelper::SUPPORTED_LOCALES.map { |(key, value)| [key, value[0], value[1]] }
   end
 
-  def server
-    {
-      hero: instance_presenter.hero&.file&.url || instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'),
-      description: instance_presenter.site_short_description.presence || I18n.t('about.about_mastodon_html'),
-    }
-  end
-
   private
 
   def instance_presenter
diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb
index 9827323a8..6b5296480 100644
--- a/app/serializers/manifest_serializer.rb
+++ b/app/serializers/manifest_serializer.rb
@@ -22,11 +22,11 @@ class ManifestSerializer < ActiveModel::Serializer
              :share_target, :shortcuts
 
   def name
-    object.site_title
+    object.title
   end
 
   def short_name
-    object.site_title
+    object.title
   end
 
   def icons
diff --git a/app/serializers/rest/instance_serializer.rb b/app/serializers/rest/instance_serializer.rb
index 9cc245422..f4ea49427 100644
--- a/app/serializers/rest/instance_serializer.rb
+++ b/app/serializers/rest/instance_serializer.rb
@@ -1,61 +1,39 @@
 # frozen_string_literal: true
 
 class REST::InstanceSerializer < ActiveModel::Serializer
-  include RoutingHelper
-
-  attributes :uri, :title, :short_description, :description, :email,
-             :version, :urls, :stats, :thumbnail,
-             :languages, :registrations, :approval_required, :invites_enabled,
-             :configuration
-
-  has_one :contact_account, serializer: REST::AccountSerializer
-
-  has_many :rules, serializer: REST::RuleSerializer
-
-  delegate :contact_account, :rules, to: :instance_presenter
-
-  def uri
-    Rails.configuration.x.local_domain
-  end
+  class ContactSerializer < ActiveModel::Serializer
+    attributes :email
 
-  def title
-    Setting.site_title
+    has_one :account, serializer: REST::AccountSerializer
   end
 
-  def short_description
-    Setting.site_short_description
-  end
-
-  def description
-    Setting.site_description
-  end
+  include RoutingHelper
 
-  def email
-    Setting.site_contact_email
-  end
+  attributes :domain, :title, :version, :source_url, :description,
+             :usage, :thumbnail, :languages, :configuration,
+             :registrations
 
-  def version
-    Mastodon::Version.to_s
-  end
+  has_one :contact, serializer: ContactSerializer
+  has_many :rules, serializer: REST::RuleSerializer
 
   def thumbnail
-    instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png')
+    object.thumbnail ? full_asset_url(object.thumbnail.file.url) : full_pack_url('media/images/preview.png')
   end
 
-  def stats
+  def usage
     {
-      user_count: instance_presenter.user_count,
-      status_count: instance_presenter.status_count,
-      domain_count: instance_presenter.domain_count,
+      users: {
+        active_month: object.active_user_count(4),
+      },
     }
   end
 
-  def urls
-    { streaming_api: Rails.configuration.x.streaming_api_base_url }
-  end
-
   def configuration
     {
+      urls: {
+        streaming: Rails.configuration.x.streaming_api_base_url,
+      },
+
       statuses: {
         max_characters: StatusLengthValidator::MAX_CHARS,
         max_media_attachments: 4,
@@ -80,25 +58,10 @@ class REST::InstanceSerializer < ActiveModel::Serializer
     }
   end
 
-  def languages
-    [I18n.default_locale]
-  end
-
   def registrations
-    Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode
-  end
-
-  def approval_required
-    Setting.registrations_mode == 'approved'
-  end
-
-  def invites_enabled
-    UserRole.everyone.can?(:invite_users)
-  end
-
-  private
-
-  def instance_presenter
-    @instance_presenter ||= InstancePresenter.new
+    {
+      enabled: Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode,
+      approval_required: Setting.registrations_mode == 'approved',
+    }
   end
 end
diff --git a/app/serializers/rest/v1/instance_serializer.rb b/app/serializers/rest/v1/instance_serializer.rb
new file mode 100644
index 000000000..47fa086fc
--- /dev/null
+++ b/app/serializers/rest/v1/instance_serializer.rb
@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+class REST::V1::InstanceSerializer < ActiveModel::Serializer
+  include RoutingHelper
+
+  attributes :uri, :title, :short_description, :description, :email,
+             :version, :urls, :stats, :thumbnail,
+             :languages, :registrations, :approval_required, :invites_enabled,
+             :configuration
+
+  has_one :contact_account, serializer: REST::AccountSerializer
+
+  has_many :rules, serializer: REST::RuleSerializer
+
+  def uri
+    object.domain
+  end
+
+  def short_description
+    object.description
+  end
+
+  def description
+    Setting.site_description # Legacy
+  end
+
+  def email
+    object.contact.email
+  end
+
+  def contact_account
+    object.contact.account
+  end
+
+  def thumbnail
+    instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png')
+  end
+
+  def stats
+    {
+      user_count: instance_presenter.user_count,
+      status_count: instance_presenter.status_count,
+      domain_count: instance_presenter.domain_count,
+    }
+  end
+
+  def urls
+    { streaming_api: Rails.configuration.x.streaming_api_base_url }
+  end
+
+  def usage
+    {
+      users: {
+        active_month: instance_presenter.active_user_count(4),
+      },
+    }
+  end
+
+  def configuration
+    {
+      statuses: {
+        max_characters: StatusLengthValidator::MAX_CHARS,
+        max_media_attachments: 4,
+        characters_reserved_per_url: StatusLengthValidator::URL_PLACEHOLDER_CHARS,
+      },
+
+      media_attachments: {
+        supported_mime_types: MediaAttachment::IMAGE_MIME_TYPES + MediaAttachment::VIDEO_MIME_TYPES + MediaAttachment::AUDIO_MIME_TYPES,
+        image_size_limit: MediaAttachment::IMAGE_LIMIT,
+        image_matrix_limit: Attachmentable::MAX_MATRIX_LIMIT,
+        video_size_limit: MediaAttachment::VIDEO_LIMIT,
+        video_frame_rate_limit: MediaAttachment::MAX_VIDEO_FRAME_RATE,
+        video_matrix_limit: MediaAttachment::MAX_VIDEO_MATRIX_LIMIT,
+      },
+
+      polls: {
+        max_options: PollValidator::MAX_OPTIONS,
+        max_characters_per_option: PollValidator::MAX_OPTION_CHARS,
+        min_expiration: PollValidator::MIN_EXPIRATION,
+        max_expiration: PollValidator::MAX_EXPIRATION,
+      },
+    }
+  end
+
+  def registrations
+    Setting.registrations_mode != 'none' && !Rails.configuration.x.single_user_mode
+  end
+
+  def approval_required
+    Setting.registrations_mode == 'approved'
+  end
+
+  def invites_enabled
+    UserRole.everyone.can?(:invite_users)
+  end
+
+  private
+
+  def instance_presenter
+    @instance_presenter ||= InstancePresenter.new
+  end
+end
diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml
index 3b48afc0c..a5a10b620 100644
--- a/app/views/about/more.html.haml
+++ b/app/views/about/more.html.haml
@@ -9,7 +9,7 @@
   .column-0
     .public-account-header.public-account-header--no-bar
       .public-account-header__image
-        = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title, class: 'parallax'
+        = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title, class: 'parallax'
 
   .column-1
     .landing-page__call-to-action{ dir: 'ltr' }
@@ -31,14 +31,14 @@
     .contact-widget
       %h4= t 'about.administered_by'
 
-      = account_link_to(@instance_presenter.contact_account)
+      = account_link_to(@instance_presenter.contact.account)
 
-      - if @instance_presenter.site_contact_email.present?
+      - if @instance_presenter.contact.email.present?
         %h4
           = succeed ':' do
             = t 'about.contact'
 
-        = mail_to @instance_presenter.site_contact_email, nil, title: @instance_presenter.site_contact_email
+        = mail_to @instance_presenter.contact.email, nil, title: @instance_presenter.contact.email
 
   .column-3
     = render 'application/flashes'
diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
index d61b3cd51..75124d5e2 100644
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@@ -40,11 +40,11 @@
 
       .hero-widget
         .hero-widget__img
-          = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title
+          = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title
 
         .hero-widget__text
           %p
-            = @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html')
+            = @instance_presenter.description.html_safe.presence || t('about.about_mastodon_html')
             = link_to about_more_path do
               = t('about.learn_more')
               = fa_icon 'angle-double-right'
@@ -53,7 +53,7 @@
           .hero-widget__footer__column
             %h4= t 'about.administered_by'
 
-            = account_link_to @instance_presenter.contact_account
+            = account_link_to @instance_presenter.contact.account
 
           .hero-widget__footer__column
             %h4= t 'about.server_stats'
diff --git a/app/views/application/_sidebar.html.haml b/app/views/application/_sidebar.html.haml
index cc157bf47..eb2813dd0 100644
--- a/app/views/application/_sidebar.html.haml
+++ b/app/views/application/_sidebar.html.haml
@@ -1,9 +1,9 @@
 .hero-widget
   .hero-widget__img
-    = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title
+    = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title
 
   .hero-widget__text
-    %p= @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html')
+    %p= @instance_presenter.description.html_safe.presence || t('about.about_mastodon_html')
 
 - if Setting.trends && !(user_signed_in? && !current_user.setting_trends)
   - trends = Trends.tags.query.allowed.limit(3)
diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml
index 9d076a91b..cdd38a595 100644
--- a/app/views/privacy/show.html.haml
+++ b/app/views/privacy/show.html.haml
@@ -4,6 +4,6 @@
 .grid
   .column-0
     .box-widget
-      .rich-formatting= @instance_presenter.site_terms.html_safe.presence || t('terms.body_html')
+      .rich-formatting= @instance_presenter.privacy_policy.html_safe.presence || t('terms.body_html')
   .column-1
     = render 'application/sidebar'
diff --git a/app/views/shared/_og.html.haml b/app/views/shared/_og.html.haml
index 7feae1b8b..b54ab2429 100644
--- a/app/views/shared/_og.html.haml
+++ b/app/views/shared/_og.html.haml
@@ -1,12 +1,12 @@
 - thumbnail     = @instance_presenter.thumbnail
-- description ||= strip_tags(@instance_presenter.site_short_description.presence || t('about.about_mastodon_html'))
+- description ||= strip_tags(@instance_presenter.description.presence || t('about.about_mastodon_html'))
 
 %meta{ name: 'description', content: description }/
 
 = opengraph 'og:site_name', t('about.hosted_on', domain: site_hostname)
 = opengraph 'og:url', url_for(only_path: false)
 = opengraph 'og:type', 'website'
-= opengraph 'og:title', @instance_presenter.site_title
+= opengraph 'og:title', @instance_presenter.title
 = opengraph 'og:description', description
 = opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('media/images/preview.png', protocol: :request))
 = opengraph 'og:image:width', thumbnail ? thumbnail.meta['width'] : '1200'
diff --git a/config/routes.rb b/config/routes.rb
index d2ede87d3..188898fd0 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -616,10 +616,12 @@ Rails.application.routes.draw do
     end
 
     namespace :v2 do
-      resources :media, only: [:create]
       get '/search', to: 'search#index', as: :search
+
+      resources :media,       only: [:create]
       resources :suggestions, only: [:index]
       resources :filters,     only: [:index, :create, :show, :update, :destroy]
+      resource  :instance,    only: [:show]
 
       namespace :admin do
         resources :accounts, only: [:index]
diff --git a/spec/presenters/instance_presenter_spec.rb b/spec/presenters/instance_presenter_spec.rb
index 973b3e23c..a0a8628e8 100644
--- a/spec/presenters/instance_presenter_spec.rb
+++ b/spec/presenters/instance_presenter_spec.rb
@@ -3,21 +3,20 @@ require 'rails_helper'
 describe InstancePresenter do
   let(:instance_presenter) { InstancePresenter.new }
 
-  context do
+  describe '#description' do
     around do |example|
-      site_description = Setting.site_description
+      site_description = Setting.site_short_description
       example.run
-      Setting.site_description = site_description
+      Setting.site_short_description = site_description
     end
 
     it "delegates site_description to Setting" do
-      Setting.site_description = "Site desc"
-
-      expect(instance_presenter.site_description).to eq "Site desc"
+      Setting.site_short_description = "Site desc"
+      expect(instance_presenter.description).to eq "Site desc"
     end
   end
 
-  context do
+  describe '#extended_description' do
     around do |example|
       site_extended_description = Setting.site_extended_description
       example.run
@@ -26,12 +25,11 @@ describe InstancePresenter do
 
     it "delegates site_extended_description to Setting" do
       Setting.site_extended_description = "Extended desc"
-
-      expect(instance_presenter.site_extended_description).to eq "Extended desc"
+      expect(instance_presenter.extended_description).to eq "Extended desc"
     end
   end
 
-  context do
+  describe '#email' do
     around do |example|
       site_contact_email = Setting.site_contact_email
       example.run
@@ -40,12 +38,11 @@ describe InstancePresenter do
 
     it "delegates contact_email to Setting" do
       Setting.site_contact_email = "admin@example.com"
-
-      expect(instance_presenter.site_contact_email).to eq "admin@example.com"
+      expect(instance_presenter.contact.email).to eq "admin@example.com"
     end
   end
 
-  describe "contact_account" do
+  describe '#account' do
     around do |example|
       site_contact_username = Setting.site_contact_username
       example.run
@@ -55,12 +52,11 @@ describe InstancePresenter do
     it "returns the account for the site contact username" do
       Setting.site_contact_username = "aaa"
       account = Fabricate(:account, username: "aaa")
-
-      expect(instance_presenter.contact_account).to eq(account)
+      expect(instance_presenter.contact.account).to eq(account)
     end
   end
 
-  describe "user_count" do
+  describe '#user_count' do
     it "returns the number of site users" do
       Rails.cache.write 'user_count', 123
 
@@ -68,7 +64,7 @@ describe InstancePresenter do
     end
   end
 
-  describe "status_count" do
+  describe '#status_count' do
     it "returns the number of local statuses" do
       Rails.cache.write 'local_status_count', 234
 
@@ -76,7 +72,7 @@ describe InstancePresenter do
     end
   end
 
-  describe "domain_count" do
+  describe '#domain_count' do
     it "returns the number of known domains" do
       Rails.cache.write 'distinct_domain_count', 345
 
@@ -84,9 +80,9 @@ describe InstancePresenter do
     end
   end
 
-  describe '#version_number' do
-    it 'returns Mastodon::Version' do
-      expect(instance_presenter.version_number).to be(Mastodon::Version)
+  describe '#version' do
+    it 'returns string' do
+      expect(instance_presenter.version).to be_a String
     end
   end
 
diff --git a/spec/views/about/show.html.haml_spec.rb b/spec/views/about/show.html.haml_spec.rb
index 4eab97da9..bf6e19d2b 100644
--- a/spec/views/about/show.html.haml_spec.rb
+++ b/spec/views/about/show.html.haml_spec.rb
@@ -12,25 +12,7 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do
   end
 
   it 'has valid open graph tags' do
-    instance_presenter = double(
-      :instance_presenter,
-      site_title: 'something',
-      site_short_description: 'something',
-      site_description: 'something',
-      version_number: '1.0',
-      source_url: 'https://github.com/mastodon/mastodon',
-      open_registrations: false,
-      thumbnail: nil,
-      hero: nil,
-      mascot: nil,
-      user_count: 420,
-      status_count: 69,
-      active_user_count: 420,
-      contact_account: nil,
-      sample_accounts: []
-    )
-
-    assign(:instance_presenter, instance_presenter)
+    assign(:instance_presenter, InstancePresenter.new)
     render
 
     header_tags = view.content_for(:header_tags)
-- 
cgit 


From 0e41d360c068deb8655dc1b9facfa4c15985c271 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 5 Oct 2022 07:02:09 +0200
Subject: Change font size of active users in server banner to be larger in web
 UI (#19295)

---
 app/javascript/styles/mastodon/components.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 4bdd5accf..491aec339 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8076,11 +8076,13 @@ noscript {
   &__number {
     font-weight: 600;
     color: $primary-text-color;
+    font-size: 14px;
   }
 
   &__number-label {
     color: $darker-text-color;
     font-weight: 500;
+    font-size: 14px;
   }
 
   h4 {
-- 
cgit 


From 679274465b3a2aaf87a13553f08104d6d3f1d275 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 5 Oct 2022 18:57:33 +0200
Subject: Add server rules to sign-up flow (#19296)

---
 app/controllers/auth/registrations_controller.rb | 16 +++++++-
 app/javascript/styles/mastodon/containers.scss   |  6 +--
 app/javascript/styles/mastodon/forms.scss        | 49 +++++++++++++++++++++---
 app/views/auth/registrations/new.html.haml       | 29 +++++++-------
 app/views/auth/registrations/rules.html.haml     | 20 ++++++++++
 config/locales/en.yml                            | 11 ++++--
 6 files changed, 101 insertions(+), 30 deletions(-)
 create mode 100644 app/views/auth/registrations/rules.html.haml

(limited to 'app/javascript/styles')

diff --git a/app/controllers/auth/registrations_controller.rb b/app/controllers/auth/registrations_controller.rb
index 7e86e01ba..84a802447 100644
--- a/app/controllers/auth/registrations_controller.rb
+++ b/app/controllers/auth/registrations_controller.rb
@@ -14,6 +14,8 @@ class Auth::RegistrationsController < Devise::RegistrationsController
   before_action :set_body_classes, only: [:new, :create, :edit, :update]
   before_action :require_not_suspended!, only: [:update]
   before_action :set_cache_headers, only: [:edit, :update]
+  before_action :set_rules, only: :new
+  before_action :require_rules_acceptance!, only: :new
   before_action :set_registration_form_time, only: :new
 
   skip_before_action :require_functional!, only: [:edit, :update]
@@ -55,7 +57,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController
 
   def configure_sign_up_params
     devise_parameter_sanitizer.permit(:sign_up) do |u|
-      u.permit({ account_attributes: [:username], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password)
+      u.permit({ account_attributes: [:username, :display_name], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password)
     end
   end
 
@@ -138,6 +140,18 @@ class Auth::RegistrationsController < Devise::RegistrationsController
     forbidden if current_account.suspended?
   end
 
+  def set_rules
+    @rules = Rule.ordered
+  end
+
+  def require_rules_acceptance!
+    return if @rules.empty? || (session[:accept_token].present? && params[:accept] == session[:accept_token])
+
+    @accept_token = session[:accept_token] = SecureRandom.hex
+
+    set_locale { render :rules }
+  end
+
   def set_cache_headers
     response.headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate'
   end
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 5703a64e3..01ee56219 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -9,11 +9,7 @@
 }
 
 .logo-container {
-  margin: 100px auto 50px;
-
-  @media screen and (max-width: 500px) {
-    margin: 40px auto 0;
-  }
+  margin: 50px auto;
 
   h1 {
     display: flex;
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index a6419821f..3d67f3b56 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -6,9 +6,10 @@ code {
 }
 
 .form-container {
-  max-width: 400px;
+  max-width: 450px;
   padding: 20px;
-  margin: 0 auto;
+  padding-bottom: 50px;
+  margin: 50px auto;
 }
 
 .indicator-icon {
@@ -124,11 +125,32 @@ code {
   }
 
   .title {
-    color: #d9e1e8;
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 400;
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
+  }
+
+  .lead {
+    font-size: 17px;
+    line-height: 22px;
+    color: $secondary-text-color;
+    margin-bottom: 30px;
+  }
+
+  .rules-list {
+    list-style: decimal;
+    font-size: 17px;
+    line-height: 22px;
+    font-weight: 500;
+    background: transparent;
+    border: 0;
+    padding: 0.5em 1em !important;
     margin-bottom: 30px;
+
+    li {
+      border-color: lighten($ui-base-color, 8%);
+    }
   }
 
   .hint {
@@ -461,6 +483,11 @@ code {
     }
   }
 
+  .stacked-actions {
+    margin-top: 30px;
+    margin-bottom: 15px;
+  }
+
   button,
   .button,
   .block-button {
@@ -512,6 +539,16 @@ code {
     }
   }
 
+  .button.button-tertiary {
+    padding: 9px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      padding: 10px;
+    }
+  }
+
   select {
     appearance: none;
     box-sizing: border-box;
diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml
index 6981195ed..5eb3f937c 100644
--- a/app/views/auth/registrations/new.html.haml
+++ b/app/views/auth/registrations/new.html.haml
@@ -5,6 +5,9 @@
   = render partial: 'shared/og', locals: { description: description_for_sign_up }
 
 = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { novalidate: false }) do |f|
+  %h1.title= t('auth.sign_up.title', domain: site_hostname)
+  %p.lead= t('auth.sign_up.preamble')
+
   = render 'shared/error_messages', object: resource
 
   - if @invite.present? && @invite.autofollow?
@@ -12,31 +15,27 @@
       %p.hint= t('invites.invited_by')
       = render 'application/card', account: @invite.user.account
 
-  = f.simple_fields_for :account do |ff|
-    .fields-group
-      = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: t('simple_form.hints.defaults.username', domain: site_hostname)
-
-  .fields-group
-    = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }
-
   .fields-group
-    = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off', :minlength => User.password_length.first, :maxlength => User.password_length.last }
-
-  .fields-group
-    = f.input :password_confirmation, wrapper: :with_label, label: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'off' }
-    = f.input :confirm_password, as: :string, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), :autocomplete => 'off' }
-
-  = f.input :website, as: :url, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: 'Website'), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: 'Website'), :autocomplete => 'off' }
+    = f.simple_fields_for :account do |ff|
+      = ff.input :display_name, wrapper: :with_label, label: false, required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.display_name'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.display_name') }
+      = ff.input :username, wrapper: :with_label, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username'), pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: false
+    = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false
+    = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'new-password', :minlength => User.password_length.first, :maxlength => User.password_length.last }, hint: false
+    = f.input :password_confirmation, placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'new-password' }, hint: false
+    = f.input :confirm_password, as: :string, placeholder: t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), :autocomplete => 'off' }, hint: false
+    = f.input :website, as: :url, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: 'Website'), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: 'Website'), :autocomplete => 'off' }
 
   - if approved_registrations? && !@invite.present?
     .fields-group
       = f.simple_fields_for :invite_request, resource.invite_request || resource.build_invite_request do |invite_request_fields|
         = invite_request_fields.input :text, as: :text, wrapper: :with_block_label, required: Setting.require_invite_text
 
+
+  = hidden_field_tag :accept, params[:accept]
   = f.input :invite_code, as: :hidden
 
   .fields-group
-    = f.input :agreement, as: :boolean, wrapper: :with_label, label: whitelist_mode? ? t('auth.checkbox_agreement_without_rules_html', terms_path: terms_path) : t('auth.checkbox_agreement_html', rules_path: about_more_path, terms_path: terms_path), required: true
+    = f.input :agreement, as: :boolean, wrapper: :with_label, label: t('auth.privacy_policy_agreement_html', rules_path: about_more_path, privacy_policy_path: privacy_policy_path), required: true
 
   .actions
     = f.button :button, @invite.present? ? t('auth.register') : sign_up_message, type: :submit
diff --git a/app/views/auth/registrations/rules.html.haml b/app/views/auth/registrations/rules.html.haml
new file mode 100644
index 000000000..a41581b32
--- /dev/null
+++ b/app/views/auth/registrations/rules.html.haml
@@ -0,0 +1,20 @@
+- content_for :page_title do
+  = t('auth.register')
+
+- content_for :header_tags do
+  = render partial: 'shared/og', locals: { description: description_for_sign_up }
+
+.simple_form
+  %h1.title= t('auth.rules.title')
+  %p.lead= t('auth.rules.preamble', domain: site_hostname)
+
+  %ol.rules-list
+    - @rules.each do |rule|
+      %li
+        .rules-list__text= rule.text
+
+  .stacked-actions
+    = link_to t('auth.rules.accept'), new_user_registration_path(accept: @accept_token), class: 'button'
+    = link_to t('auth.rules.back'), root_path, class: 'button button-tertiary'
+
+.form-footer= render 'auth/shared/links'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8f4ea652b..5050cee42 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1001,10 +1001,8 @@ en:
     warning: Be very careful with this data. Never share it with anyone!
     your_token: Your access token
   auth:
-    apply_for_account: Request an invite
+    apply_for_account: Get on waitlist
     change_password: Password
-    checkbox_agreement_html: I agree to the <a href="%{rules_path}" target="_blank">server rules</a> and <a href="%{terms_path}" target="_blank">terms of service</a>
-    checkbox_agreement_without_rules_html: I agree to the <a href="%{terms_path}" target="_blank">terms of service</a>
     delete_account: Delete account
     delete_account_html: If you wish to delete your account, you can <a href="%{path}">proceed here</a>. You will be asked for confirmation.
     description:
@@ -1023,6 +1021,7 @@ en:
     migrate_account: Move to a different account
     migrate_account_html: If you wish to redirect this account to a different one, you can <a href="%{path}">configure it here</a>.
     or_log_in_with: Or log in with
+    privacy_policy_agreement_html: I have read and agree to the <a href="%{privacy_policy_path}" target="_blank">privacy policy</a>
     providers:
       cas: CAS
       saml: SAML
@@ -1030,12 +1029,18 @@ en:
     registration_closed: "%{instance} is not accepting new members"
     resend_confirmation: Resend confirmation instructions
     reset_password: Reset password
+    rules:
+      preamble: These are set and enforced by the %{domain} moderators.
+      title: Some ground rules.
     security: Security
     set_new_password: Set new password
     setup:
       email_below_hint_html: If the below e-mail address is incorrect, you can change it here and receive a new confirmation e-mail.
       email_settings_hint_html: The confirmation e-mail was sent to %{email}. If that e-mail address is not correct, you can change it in account settings.
       title: Setup
+    sign_up:
+      preamble: With an account on this Mastodon server, you'll be able to follow any other person on the network, regardless of where their account is hosted.
+      title: Let's get you set up on %{domain}.
     status:
       account_status: Account status
       confirming: Waiting for e-mail confirmation to be completed.
-- 
cgit 


From 7fb738c8372a700e1b42534cb202005b8c73b946 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 7 Oct 2022 10:14:31 +0200
Subject: Add interaction modal to logged-out web UI (#19306)

---
 app/javascript/mastodon/components/status.js       |   1 +
 .../mastodon/components/status_action_bar.js       |  23 ++--
 .../mastodon/containers/status_container.js        |   8 ++
 .../mastodon/features/account/components/header.js |   3 +-
 .../features/account_timeline/components/header.js |   6 +
 .../containers/header_container.js                 |   8 ++
 .../mastodon/features/interaction_modal/index.js   | 132 +++++++++++++++++++++
 .../picture_in_picture/components/footer.js        |  66 ++++++++---
 .../features/status/components/action_bar.js       |   7 +-
 app/javascript/mastodon/features/status/index.js   |  67 ++++++++---
 .../mastodon/features/ui/components/modal_root.js  |   2 +
 app/javascript/styles/mastodon/components.scss     | 121 +++++++++++++++++++
 12 files changed, 394 insertions(+), 50 deletions(-)
 create mode 100644 app/javascript/mastodon/features/interaction_modal/index.js

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 0d3b51f07..381088be7 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -86,6 +86,7 @@ class Status extends ImmutablePureComponent {
     onToggleHidden: PropTypes.func,
     onToggleCollapsed: PropTypes.func,
     onTranslate: PropTypes.func,
+    onInteractionModal: PropTypes.func,
     muted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 4b384e6e5..9e8cadce2 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -82,6 +82,7 @@ class StatusActionBar extends ImmutablePureComponent {
     onBookmark: PropTypes.func,
     onFilter: PropTypes.func,
     onAddFilter: PropTypes.func,
+    onInteractionModal: PropTypes.func,
     withDismiss: PropTypes.bool,
     withCounters: PropTypes.bool,
     scrollKey: PropTypes.string,
@@ -97,10 +98,12 @@ class StatusActionBar extends ImmutablePureComponent {
   ]
 
   handleReplyClick = () => {
-    if (me) {
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
       this.props.onReply(this.props.status, this.context.router.history);
     } else {
-      this._openInteractionDialog('reply');
+      this.props.onInteractionModal('reply', this.props.status);
     }
   }
 
@@ -114,25 +117,25 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   handleFavouriteClick = () => {
-    if (me) {
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
       this.props.onFavourite(this.props.status);
     } else {
-      this._openInteractionDialog('favourite');
+      this.props.onInteractionModal('favourite', this.props.status);
     }
   }
 
   handleReblogClick = e => {
-    if (me) {
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
       this.props.onReblog(this.props.status, e);
     } else {
-      this._openInteractionDialog('reblog');
+      this.props.onInteractionModal('reblog', this.props.status);
     }
   }
 
-  _openInteractionDialog = type => {
-    window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
-  }
-
   handleBookmarkClick = () => {
     this.props.onBookmark(this.props.status);
   }
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index 9280a6ee3..294105f25 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -237,6 +237,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch(deployPictureInPicture(status.get('id'), status.getIn(['account', 'id']), type, mediaProps));
   },
 
+  onInteractionModal (type, status) {
+    dispatch(openModal('INTERACTION', {
+      type,
+      accountId: status.getIn(['account', 'id']),
+      url: status.get('url'),
+    }));
+  },
+
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index e407a0d55..765b3cc1e 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -96,6 +96,7 @@ class Header extends ImmutablePureComponent {
     onAddToList: PropTypes.func.isRequired,
     onEditAccountNote: PropTypes.func.isRequired,
     onChangeLanguages: PropTypes.func.isRequired,
+    onInteractionModal: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     domain: PropTypes.string.isRequired,
     hidden: PropTypes.bool,
@@ -177,7 +178,7 @@ class Header extends ImmutablePureComponent {
       } else if (account.getIn(['relationship', 'requested'])) {
         actionBtn = <Button className={classNames('logo-button', { 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : undefined} />;
+        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={signedIn ? this.props.onFollow : this.props.onInteractionModal} />;
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }
diff --git a/app/javascript/mastodon/features/account_timeline/components/header.js b/app/javascript/mastodon/features/account_timeline/components/header.js
index f9838442f..f31848f41 100644
--- a/app/javascript/mastodon/features/account_timeline/components/header.js
+++ b/app/javascript/mastodon/features/account_timeline/components/header.js
@@ -23,6 +23,7 @@ export default class Header extends ImmutablePureComponent {
     onEndorseToggle: PropTypes.func.isRequired,
     onAddToList: PropTypes.func.isRequired,
     onChangeLanguages: PropTypes.func.isRequired,
+    onInteractionModal: PropTypes.func.isRequired,
     hideTabs: PropTypes.bool,
     domain: PropTypes.string.isRequired,
     hidden: PropTypes.bool,
@@ -96,6 +97,10 @@ export default class Header extends ImmutablePureComponent {
     this.props.onChangeLanguages(this.props.account);
   }
 
+  handleInteractionModal = () => {
+    this.props.onInteractionModal(this.props.account);
+  }
+
   render () {
     const { account, hidden, hideTabs } = this.props;
 
@@ -123,6 +128,7 @@ export default class Header extends ImmutablePureComponent {
           onAddToList={this.handleAddToList}
           onEditAccountNote={this.handleEditAccountNote}
           onChangeLanguages={this.handleChangeLanguages}
+          onInteractionModal={this.handleInteractionModal}
           domain={this.props.domain}
           hidden={hidden}
         />
diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.js b/app/javascript/mastodon/features/account_timeline/containers/header_container.js
index 3d6eb487d..46fa573dd 100644
--- a/app/javascript/mastodon/features/account_timeline/containers/header_container.js
+++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.js
@@ -57,6 +57,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onInteractionModal (account) {
+    dispatch(openModal('INTERACTION', {
+      type: 'follow',
+      accountId: account.get('id'),
+      url: account.get('url'),
+    }));
+  },
+
   onBlock (account) {
     if (account.getIn(['relationship', 'blocking'])) {
       dispatch(unblockAccount(account.get('id')));
diff --git a/app/javascript/mastodon/features/interaction_modal/index.js b/app/javascript/mastodon/features/interaction_modal/index.js
new file mode 100644
index 000000000..6a7aa9c1c
--- /dev/null
+++ b/app/javascript/mastodon/features/interaction_modal/index.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { registrationsOpen } from 'mastodon/initial_state';
+import { connect } from 'react-redux';
+import Icon from 'mastodon/components/icon';
+import classNames from 'classnames';
+
+const mapStateToProps = (state, { accountId }) => ({
+  displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
+});
+
+class Copypaste extends React.PureComponent {
+
+  static propTypes = {
+    value: PropTypes.string,
+  };
+
+  state = {
+    copied: false,
+  };
+
+  setRef = c => {
+    this.input = c;
+  }
+
+  handleInputClick = () => {
+    this.setState({ copied: false });
+    this.input.focus();
+    this.input.select();
+    this.input.setSelectionRange(0, this.input.value.length);
+  }
+
+  handleButtonClick = () => {
+    const { value } = this.props;
+    navigator.clipboard.writeText(value);
+    this.input.blur();
+    this.setState({ copied: true });
+    this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
+  }
+
+  componentWillUnmount () {
+    if (this.timeout) clearTimeout(this.timeout);
+  }
+
+  render () {
+    const { value } = this.props;
+    const { copied } = this.state;
+
+    return (
+      <div className={classNames('copypaste', { copied })}>
+        <input
+          type='text'
+          ref={this.setRef}
+          value={value}
+          readOnly
+          onClick={this.handleInputClick}
+        />
+
+        <button className='button' onClick={this.handleButtonClick}>
+          {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy' defaultMessage='Copy' />}
+        </button>
+      </div>
+    );
+  }
+
+}
+
+export default @connect(mapStateToProps)
+class InteractionModal extends React.PureComponent {
+
+  static propTypes = {
+    displayNameHtml: PropTypes.string,
+    url: PropTypes.string,
+    type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
+  };
+
+  render () {
+    const { url, type, displayNameHtml } = this.props;
+
+    const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
+
+    let title, actionDescription, icon;
+
+    switch(type) {
+    case 'reply':
+      icon = <Icon id='reply' />;
+      title = <FormattedMessage id='interaction_modal.title.reply' defaultMessage="Reply to {name}'s post" values={{ name }} />;
+      actionDescription = <FormattedMessage id='interaction_modal.description.reply' defaultMessage='With an account on Mastodon, you can respond to this post.' />;
+      break;
+    case 'reblog':
+      icon = <Icon id='retweet' />;
+      title = <FormattedMessage id='interaction_modal.title.reblog' defaultMessage="Boost {name}'s post" values={{ name }} />;
+      actionDescription = <FormattedMessage id='interaction_modal.description.reblog' defaultMessage='With an account on Mastodon, you can boost this post to share it with your own followers.' />;
+      break;
+    case 'favourite':
+      icon = <Icon id='star' />;
+      title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favourite {name}'s post" values={{ name }} />;
+      actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favourite this post to let the author know you appreciate it and save it for later.' />;
+      break;
+    case 'follow':
+      icon = <Icon id='user-plus' />;
+      title = <FormattedMessage id='interaction_modal.title.follow' defaultMessage='Follow {name}' values={{ name }} />;
+      actionDescription = <FormattedMessage id='interaction_modal.description.follow' defaultMessage='With an account on Mastodon, you can follow {name} to receive their posts in your home feed.' values={{ name }} />;
+      break;
+    }
+
+    return (
+      <div className='modal-root__modal interaction-modal'>
+        <div className='interaction-modal__lead'>
+          <h3><span className='interaction-modal__icon'>{icon}</span> {title}</h3>
+          <p>{actionDescription} <FormattedMessage id='interaction_modal.preamble' defaultMessage="Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one." /></p>
+        </div>
+
+        <div className='interaction-modal__choices'>
+          <div className='interaction-modal__choices__choice'>
+            <h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
+            <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
+            <a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a>
+          </div>
+
+          <div className='interaction-modal__choices__choice'>
+            <h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3>
+            <p><FormattedMessage id='interaction_modal.other_server_instructions' defaultMessage='Simply copy and paste this URL into the search bar of your favourite app or the web interface where you are signed in.' /></p>
+            <Copypaste value={url} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.js b/app/javascript/mastodon/features/picture_in_picture/components/footer.js
index 0cb42b25a..0beb2e14d 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/footer.js
+++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.js
@@ -43,6 +43,7 @@ class Footer extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -67,26 +68,44 @@ class Footer extends ImmutablePureComponent {
   };
 
   handleReplyClick = () => {
-    const { dispatch, askReplyConfirmation, intl } = this.props;
-
-    if (askReplyConfirmation) {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(messages.replyMessage),
-        confirm: intl.formatMessage(messages.replyConfirm),
-        onConfirm: this._performReply,
-      }));
+    const { dispatch, askReplyConfirmation, status, intl } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (askReplyConfirmation) {
+        dispatch(openModal('CONFIRM', {
+          message: intl.formatMessage(messages.replyMessage),
+          confirm: intl.formatMessage(messages.replyConfirm),
+          onConfirm: this._performReply,
+        }));
+      } else {
+        this._performReply();
+      }
     } else {
-      this._performReply();
+      dispatch(openModal('INTERACTION', {
+        type: 'reply',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
     }
   };
 
   handleFavouriteClick = () => {
     const { dispatch, status } = this.props;
-
-    if (status.get('favourited')) {
-      dispatch(unfavourite(status));
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (status.get('favourited')) {
+        dispatch(unfavourite(status));
+      } else {
+        dispatch(favourite(status));
+      }
     } else {
-      dispatch(favourite(status));
+      dispatch(openModal('INTERACTION', {
+        type: 'favourite',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
     }
   };
 
@@ -97,13 +116,22 @@ class Footer extends ImmutablePureComponent {
 
   handleReblogClick = e => {
     const { dispatch, status } = this.props;
-
-    if (status.get('reblogged')) {
-      dispatch(unreblog(status));
-    } else if ((e && e.shiftKey) || !boostModal) {
-      this._performReblog(status);
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (status.get('reblogged')) {
+        dispatch(unreblog(status));
+      } else if ((e && e.shiftKey) || !boostModal) {
+        this._performReblog(status);
+      } else {
+        dispatch(initBoostModal({ status, onReblog: this._performReblog }));
+      }
     } else {
-      dispatch(initBoostModal({ status, onReblog: this._performReblog }));
+      dispatch(openModal('INTERACTION', {
+        type: 'reblog',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
     }
   };
 
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index 50bda69f8..2e240c414 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -194,6 +194,7 @@ class ActionBar extends React.PureComponent {
 
   render () {
     const { status, relationship, intl } = this.props;
+    const { signedIn, permissions } = this.context.identity;
 
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
     const pinnableStatus     = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
@@ -250,7 +251,7 @@ class ActionBar extends React.PureComponent {
         }
       }
 
-      if ((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) {
+      if ((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) {
         menu.push(null);
         menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
         menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses?id=${status.get('id')}` });
@@ -287,10 +288,10 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
         {shareButton}
-        <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
+        <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         <div className='detailed-status__action-bar-dropdown'>
-          <DropdownMenuContainer size={18} icon='ellipsis-h' status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
+          <DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>
       </div>
     );
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index 748dc7a92..3d238e7ee 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -180,6 +180,7 @@ class Status extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -228,10 +229,21 @@ class Status extends ImmutablePureComponent {
   }
 
   handleFavouriteClick = (status) => {
-    if (status.get('favourited')) {
-      this.props.dispatch(unfavourite(status));
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (status.get('favourited')) {
+        dispatch(unfavourite(status));
+      } else {
+        dispatch(favourite(status));
+      }
     } else {
-      this.props.dispatch(favourite(status));
+      dispatch(openModal('INTERACTION', {
+        type: 'favourite',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
     }
   }
 
@@ -244,15 +256,25 @@ class Status extends ImmutablePureComponent {
   }
 
   handleReplyClick = (status) => {
-    let { askReplyConfirmation, dispatch, intl } = this.props;
-    if (askReplyConfirmation) {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(messages.replyMessage),
-        confirm: intl.formatMessage(messages.replyConfirm),
-        onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
-      }));
+    const { askReplyConfirmation, dispatch, intl } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (askReplyConfirmation) {
+        dispatch(openModal('CONFIRM', {
+          message: intl.formatMessage(messages.replyMessage),
+          confirm: intl.formatMessage(messages.replyConfirm),
+          onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
+        }));
+      } else {
+        dispatch(replyCompose(status, this.context.router.history));
+      }
     } else {
-      dispatch(replyCompose(status, this.context.router.history));
+      dispatch(openModal('INTERACTION', {
+        type: 'reply',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
     }
   }
 
@@ -261,14 +283,25 @@ class Status extends ImmutablePureComponent {
   }
 
   handleReblogClick = (status, e) => {
-    if (status.get('reblogged')) {
-      this.props.dispatch(unreblog(status));
-    } else {
-      if ((e && e.shiftKey) || !boostModal) {
-        this.handleModalReblog(status);
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (status.get('reblogged')) {
+        dispatch(unreblog(status));
       } else {
-        this.props.dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
+        if ((e && e.shiftKey) || !boostModal) {
+          this.handleModalReblog(status);
+        } else {
+          dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
+        }
       }
+    } else {
+      dispatch(openModal('INTERACTION', {
+        type: 'reblog',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
     }
   }
 
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
index dfa89f2ce..5c273ffa4 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -13,6 +13,7 @@ import AudioModal from './audio_modal';
 import ConfirmationModal from './confirmation_modal';
 import SubscribedLanguagesModal from 'mastodon/features/subscribed_languages_modal';
 import FocalPointModal from './focal_point_modal';
+import InteractionModal from 'mastodon/features/interaction_modal';
 import {
   MuteModal,
   BlockModal,
@@ -41,6 +42,7 @@ const MODAL_COMPONENTS = {
   'COMPARE_HISTORY': CompareHistoryModal,
   'FILTER': FilterModal,
   'SUBSCRIBED_LANGUAGES': () => Promise.resolve({ default: SubscribedLanguagesModal }),
+  'INTERACTION': () => Promise.resolve({ default: InteractionModal }),
 };
 
 export default class ModalRoot extends React.PureComponent {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 491aec339..a3dc4c637 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4899,6 +4899,7 @@ a.status-card.compact:hover {
   left: 0;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8105,3 +8106,123 @@ noscript {
     margin: 10px 0;
   }
 }
+
+.interaction-modal {
+  max-width: 90vw;
+  width: 600px;
+  background: $ui-base-color;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  padding: 20px;
+
+  h3 {
+    font-size: 22px;
+    line-height: 33px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  &__icon {
+    color: $highlight-text-color;
+    margin: 0 5px;
+  }
+
+  &__lead {
+    padding: 20px;
+    text-align: center;
+
+    h3 {
+      margin-bottom: 15px;
+    }
+
+    p {
+      font-size: 17px;
+      line-height: 22px;
+      color: $darker-text-color;
+    }
+  }
+
+  &__choices {
+    display: flex;
+
+    &__choice {
+      flex: 0 0 auto;
+      width: 50%;
+      box-sizing: border-box;
+      padding: 20px;
+
+      h3 {
+        margin-bottom: 20px;
+      }
+
+      p {
+        color: $darker-text-color;
+        margin-bottom: 20px;
+      }
+
+      .button {
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint - 1px) {
+    &__choices {
+      display: block;
+
+      &__choice {
+        width: auto;
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+.copypaste {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  input {
+    display: block;
+    font-family: inherit;
+    background: darken($ui-base-color, 8%);
+    border: 1px solid $highlight-text-color;
+    color: $darker-text-color;
+    border-radius: 4px;
+    padding: 6px 9px;
+    line-height: 22px;
+    font-size: 14px;
+    transition: border-color 300ms linear;
+    flex: 1 1 auto;
+    overflow: hidden;
+
+    &:focus {
+      outline: 0;
+      background: darken($ui-base-color, 4%);
+    }
+  }
+
+  .button {
+    flex: 0 0 auto;
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    input {
+      border: 1px solid $valid-value-color;
+      transition: none;
+    }
+
+    .button {
+      background: $valid-value-color;
+      transition: none;
+    }
+  }
+}
-- 
cgit 


From a2ba01132603174c43c5788a95f9ee127b684c0a Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 8 Oct 2022 06:01:11 +0200
Subject: Change privacy policy to be rendered in web UI, add REST API (#19310)

Source string no longer localized, Markdown instead of raw HTML
---
 Gemfile                                            |  1 +
 Gemfile.lock                                       |  8 +-
 .../v1/instances/privacy_policies_controller.rb    | 18 +++++
 app/controllers/privacy_controller.rb              | 17 +----
 .../mastodon/features/privacy_policy/index.js      | 60 +++++++++++++++
 .../mastodon/features/ui/components/link_footer.js |  2 +-
 app/javascript/mastodon/features/ui/index.js       |  2 +
 .../mastodon/features/ui/util/async-components.js  |  4 +
 app/javascript/styles/mastodon/components.scss     | 88 +++++++++++++++++++++-
 app/models/privacy_policy.rb                       | 77 +++++++++++++++++++
 app/serializers/rest/privacy_policy_serializer.rb  | 19 +++++
 app/views/privacy/show.html.haml                   |  9 +--
 config/i18n-tasks.yml                              |  1 -
 config/locales/en.yml                              | 85 +--------------------
 config/routes.rb                                   |  3 +-
 15 files changed, 282 insertions(+), 112 deletions(-)
 create mode 100644 app/controllers/api/v1/instances/privacy_policies_controller.rb
 create mode 100644 app/javascript/mastodon/features/privacy_policy/index.js
 create mode 100644 app/models/privacy_policy.rb
 create mode 100644 app/serializers/rest/privacy_policy_serializer.rb

(limited to 'app/javascript/styles')

diff --git a/Gemfile b/Gemfile
index fedd55f2f..34899967b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -72,6 +72,7 @@ gem 'rack-attack', '~> 6.6'
 gem 'rack-cors', '~> 1.1', require: 'rack/cors'
 gem 'rails-i18n', '~> 6.0'
 gem 'rails-settings-cached', '~> 0.6'
+gem 'redcarpet', '~> 3.5'
 gem 'redis', '~> 4.5', require: ['redis', 'redis/connection/hiredis']
 gem 'mario-redis-lock', '~> 1.2', require: 'redis_lock'
 gem 'rqrcode', '~> 2.1'
diff --git a/Gemfile.lock b/Gemfile.lock
index 6866ef721..5788c857d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -402,7 +402,6 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2022.0105)
     mini_mime (1.1.2)
-    mini_portile2 (2.8.0)
     minitest (5.16.3)
     msgpack (1.5.4)
     multi_json (1.15.0)
@@ -412,8 +411,7 @@ GEM
       net-ssh (>= 2.6.5, < 8.0.0)
     net-ssh (7.0.1)
     nio4r (2.5.8)
-    nokogiri (1.13.8)
-      mini_portile2 (~> 2.8.0)
+    nokogiri (1.13.8-x86_64-linux)
       racc (~> 1.4)
     nsa (0.2.8)
       activesupport (>= 4.2, < 7)
@@ -539,6 +537,7 @@ GEM
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.5.0)
       rdf (~> 3.2)
+    redcarpet (3.5.1)
     redis (4.5.1)
     redis-namespace (1.9.0)
       redis (>= 4)
@@ -727,7 +726,7 @@ GEM
     zeitwerk (2.6.0)
 
 PLATFORMS
-  ruby
+  x86_64-linux
 
 DEPENDENCIES
   active_model_serializers (~> 0.10)
@@ -819,6 +818,7 @@ DEPENDENCIES
   rails-i18n (~> 6.0)
   rails-settings-cached (~> 0.6)
   rdf-normalize (~> 0.5)
+  redcarpet (~> 3.5)
   redis (~> 4.5)
   redis-namespace (~> 1.9)
   rexml (~> 3.2)
diff --git a/app/controllers/api/v1/instances/privacy_policies_controller.rb b/app/controllers/api/v1/instances/privacy_policies_controller.rb
new file mode 100644
index 000000000..dbd69f54d
--- /dev/null
+++ b/app/controllers/api/v1/instances/privacy_policies_controller.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Api::V1::Instances::PrivacyPoliciesController < Api::BaseController
+  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+
+  before_action :set_privacy_policy
+
+  def show
+    expires_in 1.day, public: true
+    render json: @privacy_policy, serializer: REST::PrivacyPolicySerializer
+  end
+
+  private
+
+  def set_privacy_policy
+    @privacy_policy = PrivacyPolicy.current
+  end
+end
diff --git a/app/controllers/privacy_controller.rb b/app/controllers/privacy_controller.rb
index ced84dbe5..bc98bca51 100644
--- a/app/controllers/privacy_controller.rb
+++ b/app/controllers/privacy_controller.rb
@@ -1,22 +1,11 @@
 # frozen_string_literal: true
 
 class PrivacyController < ApplicationController
-  layout 'public'
-
-  before_action :set_instance_presenter
-  before_action :set_expires_in
+  include WebAppControllerConcern
 
   skip_before_action :require_functional!
 
-  def show; end
-
-  private
-
-  def set_instance_presenter
-    @instance_presenter = InstancePresenter.new
-  end
-
-  def set_expires_in
-    expires_in 0, public: true
+  def show
+    expires_in 0, public: true if current_account.nil?
   end
 end
diff --git a/app/javascript/mastodon/features/privacy_policy/index.js b/app/javascript/mastodon/features/privacy_policy/index.js
new file mode 100644
index 000000000..b7ca03d2c
--- /dev/null
+++ b/app/javascript/mastodon/features/privacy_policy/index.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { title } from 'mastodon/initial_state';
+import { Helmet } from 'react-helmet';
+import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
+import Column from 'mastodon/components/column';
+import api from 'mastodon/api';
+import Skeleton from 'mastodon/components/skeleton';
+
+const messages = defineMessages({
+  title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
+});
+
+export default @injectIntl
+class PrivacyPolicy extends React.PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object,
+  };
+
+  state = {
+    content: null,
+    lastUpdated: null,
+    isLoading: true,
+  };
+
+  componentDidMount () {
+    api().get('/api/v1/instance/privacy_policy').then(({ data }) => {
+      this.setState({ content: data.content, lastUpdated: data.updated_at, isLoading: false });
+    }).catch(() => {
+      this.setState({ isLoading: false });
+    });
+  }
+
+  render () {
+    const { intl } = this.props;
+    const { isLoading, content, lastUpdated } = this.state;
+
+    return (
+      <Column>
+        <div className='scrollable privacy-policy'>
+          <div className='column-title'>
+            <h3><FormattedMessage id='privacy_policy.title' defaultMessage='Privacy Policy' /></h3>
+            <p><FormattedMessage id='privacy_policy.last_updated' defaultMessage='Last updated {date}' values={{ date: isLoading ? <Skeleton width='10ch' /> : <FormattedDate value={lastUpdated} year='numeric' month='short' day='2-digit' /> }} /></p>
+          </div>
+
+          <div
+            className='privacy-policy__body'
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        </div>
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.title)} - {title}</title>
+        </Helmet>
+      </Column>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js
index 2b092a182..c4ce2a985 100644
--- a/app/javascript/mastodon/features/ui/components/link_footer.js
+++ b/app/javascript/mastodon/features/ui/components/link_footer.js
@@ -54,7 +54,7 @@ class LinkFooter extends React.PureComponent {
     items.push(<a key='about' href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About' /></a>);
     items.push(<a key='mastodon' href='https://joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.what_is_mastodon' defaultMessage='About Mastodon' /></a>);
     items.push(<a key='docs' href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a>);
-    items.push(<a key='privacy-policy' href='/privacy-policy' target='_blank'><FormattedMessage id='getting_started.privacy_policy' defaultMessage='Privacy Policy' /></a>);
+    items.push(<Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='getting_started.privacy_policy' defaultMessage='Privacy Policy' /></Link>);
     items.push(<Link key='hotkeys' to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link>);
 
     if (profileDirectory) {
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index bc6ff1866..bd1930368 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -52,6 +52,7 @@ import {
   Explore,
   FollowRecommendations,
   About,
+  PrivacyPolicy,
 } from './util/async-components';
 import { me, title } from '../../initial_state';
 import { closeOnboarding, INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
@@ -173,6 +174,7 @@ class SwitchingColumnsArea extends React.PureComponent {
           <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
           <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
           <WrappedRoute path='/about' component={About} content={children} />
+          <WrappedRoute path='/privacy-policy' component={PrivacyPolicy} content={children} />
 
           <WrappedRoute path={['/home', '/timelines/home']} component={HomeTimeline} content={children} />
           <WrappedRoute path={['/public', '/timelines/public']} exact component={PublicTimeline} content={children} />
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index 5907e0772..c79dc014c 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -169,3 +169,7 @@ export function FilterModal () {
 export function About () {
   return import(/*webpackChunkName: "features/about" */'../../about');
 }
+
+export function PrivacyPolicy () {
+  return import(/*webpackChunkName: "features/privacy_policy" */'../../privacy_policy');
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a3dc4c637..cc8455ce3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2283,7 +2283,8 @@ $ui-header-height: 55px;
 
   > .scrollable {
     background: $ui-base-color;
-    border-radius: 0 0 4px 4px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
 }
 
@@ -8226,3 +8227,88 @@ noscript {
     }
   }
 }
+
+.privacy-policy {
+  background: $ui-base-color;
+  padding: 20px;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__body {
+    margin-top: 20px;
+    color: $secondary-text-color;
+    font-size: 15px;
+    line-height: 22px;
+
+    h1,
+    p,
+    ul,
+    ol {
+      margin-bottom: 20px;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    ol {
+      list-style: decimal;
+    }
+
+    ul,
+    ol {
+      padding-left: 1em;
+    }
+
+    li {
+      margin-bottom: 10px;
+
+      &::marker {
+        color: $darker-text-color;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    h1 {
+      color: $primary-text-color;
+      font-size: 19px;
+      line-height: 24px;
+      font-weight: 700;
+      margin-top: 30px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    strong {
+      font-weight: 700;
+      color: $primary-text-color;
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    a {
+      color: $highlight-text-color;
+      text-decoration: underline;
+
+      &:focus,
+      &:hover,
+      &:active {
+        text-decoration: none;
+      }
+    }
+
+    hr {
+      border: 1px solid lighten($ui-base-color, 4%);
+      margin: 30px 0;
+    }
+  }
+}
diff --git a/app/models/privacy_policy.rb b/app/models/privacy_policy.rb
new file mode 100644
index 000000000..b93b6cf35
--- /dev/null
+++ b/app/models/privacy_policy.rb
@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+class PrivacyPolicy < ActiveModelSerializers::Model
+  DEFAULT_PRIVACY_POLICY = <<~TXT
+    This privacy policy describes how %{domain} ("%{domain}", "we", "us") collects, protects and uses the personally identifiable information you may provide through the %{domain} website or its API. The policy also describes the choices available to you regarding our use of your personal information and how you can access and update this information. This policy does not apply to the practices of companies that %{domain} does not own or control, or to individuals that %{domain} does not employ or manage.
+
+    # What information do we collect?
+
+    - **Basic account information**: If you register on this server, you may be asked to enter a username, an e-mail address and a password. You may also enter additional profile information such as a display name and biography, and upload a profile picture and header image. The username, display name, biography, profile picture and header image are always listed publicly.
+    - **Posts, following and other public information**: The list of people you follow is listed publicly, the same is true for your followers. When you submit a message, the date and time is stored as well as the application you submitted the message from. Messages may contain media attachments, such as pictures and videos. Public and unlisted posts are available publicly. When you feature a post on your profile, that is also publicly available information. Your posts are delivered to your followers, in some cases it means they are delivered to different servers and copies are stored there. When you delete posts, this is likewise delivered to your followers. The action of reblogging or favouriting another post is always public.
+    - **Direct and followers-only posts**: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it's important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. **Please keep in mind that the operators of the server and any receiving server may view such messages**, and that recipients may screenshot, copy or otherwise re-share them. **Do not share any sensitive information over Mastodon.**
+    - **IPs and other metadata**: When you log in, we record the IP address you log in from, as well as the name of your browser application. All the logged in sessions are available for your review and revocation in the settings. The latest IP address used is stored for up to 12 months. We also may retain server logs which include the IP address of every request to our server.
+
+    # What do we use your information for?
+
+    Any of the information we collect from you may be used in the following ways:
+
+    - To provide the core functionality of Mastodon. You can only interact with other people's content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.
+    - To aid moderation of the community, for example comparing your IP address with other known ones to determine ban evasion or other violations.
+    - The email address you provide may be used to send you information, notifications about other people interacting with your content or sending you messages, and to respond to inquiries, and/or other requests or questions.
+
+    # How do we protect your information?
+
+    We implement a variety of security measures to maintain the safety of your personal information when you enter, submit, or access your personal information. Among other things, your browser session, as well as the traffic between your applications and the API, are secured with SSL, and your password is hashed using a strong one-way algorithm. You may enable two-factor authentication to further secure access to your account.
+
+    # What is our data retention policy?
+
+    We will make a good faith effort to:
+
+    - Retain server logs containing the IP address of all requests to this server, in so far as such logs are kept, no more than 90 days.
+    - Retain the IP addresses associated with registered users no more than 12 months.
+
+    You can request and download an archive of your content, including your posts, media attachments, profile picture, and header image.
+
+    You may irreversibly delete your account at any time.
+
+    # Do we use cookies?
+
+    Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.
+
+    We use cookies to understand and save your preferences for future visits.
+
+    # Do we disclose any information to outside parties?
+
+    We do not sell, trade, or otherwise transfer to outside parties your personally identifiable information. This does not include trusted third parties who assist us in operating our site, conducting our business, or servicing you, so long as those parties agree to keep this information confidential. We may also release your information when we believe release is appropriate to comply with the law, enforce our site policies, or protect ours or others rights, property, or safety.
+
+    Your public content may be downloaded by other servers in the network. Your public and followers-only posts are delivered to the servers where your followers reside, and direct messages are delivered to the servers of the recipients, in so far as those followers or recipients reside on a different server than this.
+
+    When you authorize an application to use your account, depending on the scope of permissions you approve, it may access your public profile information, your following list, your followers, your lists, all your posts, and your favourites. Applications can never access your e-mail address or password.
+
+    # Site usage by children
+
+    If this server is in the EU or the EEA: Our site, products and services are all directed to people who are at least 16 years old. If you are under the age of 16, per the requirements of the GDPR (General Data Protection Regulation) do not use this site.
+
+    If this server is in the USA: Our site, products and services are all directed to people who are at least 13 years old. If you are under the age of 13, per the requirements of COPPA (Children's Online Privacy Protection Act) do not use this site.
+
+    Law requirements can be different if this server is in another jurisdiction.
+
+    ___
+
+    This document is CC-BY-SA. Originally adapted from the [Discourse privacy policy](https://github.com/discourse/discourse).
+  TXT
+
+  DEFAULT_UPDATED_AT = DateTime.new(2022, 10, 7).freeze
+
+  attributes :updated_at, :text
+
+  def self.current
+    custom = Setting.find_by(var: 'site_terms')
+
+    if custom
+      new(text: custom.value, updated_at: custom.updated_at)
+    else
+      new(text: DEFAULT_PRIVACY_POLICY, updated_at: DEFAULT_UPDATED_AT)
+    end
+  end
+end
diff --git a/app/serializers/rest/privacy_policy_serializer.rb b/app/serializers/rest/privacy_policy_serializer.rb
new file mode 100644
index 000000000..f0572e714
--- /dev/null
+++ b/app/serializers/rest/privacy_policy_serializer.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class REST::PrivacyPolicySerializer < ActiveModel::Serializer
+  attributes :updated_at, :content
+
+  def updated_at
+    object.updated_at.iso8601
+  end
+
+  def content
+    markdown.render(object.text % { domain: Rails.configuration.x.local_domain })
+  end
+
+  private
+
+  def markdown
+    @markdown ||= Redcarpet::Markdown.new(Redcarpet::Render::HTML, escape_html: true, no_images: true)
+  end
+end
diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml
index cdd38a595..cfc285925 100644
--- a/app/views/privacy/show.html.haml
+++ b/app/views/privacy/show.html.haml
@@ -1,9 +1,4 @@
 - content_for :page_title do
-  = t('terms.title', instance: site_hostname)
+  = t('privacy_policy.title')
 
-.grid
-  .column-0
-    .box-widget
-      .rich-formatting= @instance_presenter.privacy_policy.html_safe.presence || t('terms.body_html')
-  .column-1
-    = render 'application/sidebar'
+= render 'shared/web_app'
diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml
index 1bebae5e9..c1da42bd8 100644
--- a/config/i18n-tasks.yml
+++ b/config/i18n-tasks.yml
@@ -40,7 +40,6 @@ ignore_missing:
   - 'errors.messages.*'
   - 'activerecord.errors.models.doorkeeper/*'
   - 'sessions.{browsers,platforms}.*'
-  - 'terms.body_html'
   - 'application_mailer.salutation'
   - 'errors.500'
   - 'auth.providers.*'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 505a2f9fc..cdac4fb54 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1405,6 +1405,8 @@ en:
     other: Other
     posting_defaults: Posting defaults
     public_timelines: Public timelines
+  privacy_policy:
+    title: Privacy Policy
   reactions:
     errors:
       limit_reached: Limit of different reactions reached
@@ -1614,89 +1616,6 @@ en:
       too_late: It is too late to appeal this strike
   tags:
     does_not_match_previous_name: does not match the previous name
-  terms:
-    body_html: |
-      <h2>Privacy Policy</h2>
-      <h3 id="collect">What information do we collect?</h3>
-
-      <ul>
-        <li><em>Basic account information</em>: If you register on this server, you may be asked to enter a username, an e-mail address and a password. You may also enter additional profile information such as a display name and biography, and upload a profile picture and header image. The username, display name, biography, profile picture and header image are always listed publicly.</li>
-        <li><em>Posts, following and other public information</em>: The list of people you follow is listed publicly, the same is true for your followers. When you submit a message, the date and time is stored as well as the application you submitted the message from. Messages may contain media attachments, such as pictures and videos. Public and unlisted posts are available publicly. When you feature a post on your profile, that is also publicly available information. Your posts are delivered to your followers, in some cases it means they are delivered to different servers and copies are stored there. When you delete posts, this is likewise delivered to your followers. The action of reblogging or favouriting another post is always public.</li>
-        <li><em>Direct and followers-only posts</em>: All posts are stored and processed on the server. Followers-only posts are delivered to your followers and users who are mentioned in them, and direct posts are delivered only to users mentioned in them. In some cases it means they are delivered to different servers and copies are stored there. We make a good faith effort to limit the access to those posts only to authorized persons, but other servers may fail to do so. Therefore it's important to review servers your followers belong to. You may toggle an option to approve and reject new followers manually in the settings. <em>Please keep in mind that the operators of the server and any receiving server may view such messages</em>, and that recipients may screenshot, copy or otherwise re-share them. <em>Do not share any sensitive information over Mastodon.</em></li>
-        <li><em>IPs and other metadata</em>: When you log in, we record the IP address you log in from, as well as the name of your browser application. All the logged in sessions are available for your review and revocation in the settings. The latest IP address used is stored for up to 12 months. We also may retain server logs which include the IP address of every request to our server.</li>
-      </ul>
-
-      <hr class="spacer" />
-
-      <h3 id="use">What do we use your information for?</h3>
-
-      <p>Any of the information we collect from you may be used in the following ways:</p>
-
-      <ul>
-        <li>To provide the core functionality of Mastodon. You can only interact with other people's content and post your own content when you are logged in. For example, you may follow other people to view their combined posts in your own personalized home timeline.</li>
-        <li>To aid moderation of the community, for example comparing your IP address with other known ones to determine ban evasion or other violations.</li>
-        <li>The email address you provide may be used to send you information, notifications about other people interacting with your content or sending you messages, and to respond to inquiries, and/or other requests or questions.</li>
-      </ul>
-
-      <hr class="spacer" />
-
-      <h3 id="protect">How do we protect your information?</h3>
-
-      <p>We implement a variety of security measures to maintain the safety of your personal information when you enter, submit, or access your personal information. Among other things, your browser session, as well as the traffic between your applications and the API, are secured with SSL, and your password is hashed using a strong one-way algorithm. You may enable two-factor authentication to further secure access to your account.</p>
-
-      <hr class="spacer" />
-
-      <h3 id="data-retention">What is our data retention policy?</h3>
-
-      <p>We will make a good faith effort to:</p>
-
-      <ul>
-        <li>Retain server logs containing the IP address of all requests to this server, in so far as such logs are kept, no more than 90 days.</li>
-        <li>Retain the IP addresses associated with registered users no more than 12 months.</li>
-      </ul>
-
-      <p>You can request and download an archive of your content, including your posts, media attachments, profile picture, and header image.</p>
-
-      <p>You may irreversibly delete your account at any time.</p>
-
-      <hr class="spacer"/>
-
-      <h3 id="cookies">Do we use cookies?</h3>
-
-      <p>Yes. Cookies are small files that a site or its service provider transfers to your computer's hard drive through your Web browser (if you allow). These cookies enable the site to recognize your browser and, if you have a registered account, associate it with your registered account.</p>
-
-      <p>We use cookies to understand and save your preferences for future visits.</p>
-
-      <hr class="spacer" />
-
-      <h3 id="disclose">Do we disclose any information to outside parties?</h3>
-
-      <p>We do not sell, trade, or otherwise transfer to outside parties your personally identifiable information. This does not include trusted third parties who assist us in operating our site, conducting our business, or servicing you, so long as those parties agree to keep this information confidential. We may also release your information when we believe release is appropriate to comply with the law, enforce our site policies, or protect ours or others rights, property, or safety.</p>
-
-      <p>Your public content may be downloaded by other servers in the network. Your public and followers-only posts are delivered to the servers where your followers reside, and direct messages are delivered to the servers of the recipients, in so far as those followers or recipients reside on a different server than this.</p>
-
-      <p>When you authorize an application to use your account, depending on the scope of permissions you approve, it may access your public profile information, your following list, your followers, your lists, all your posts, and your favourites. Applications can never access your e-mail address or password.</p>
-
-      <hr class="spacer" />
-
-      <h3 id="children">Site usage by children</h3>
-
-      <p>If this server is in the EU or the EEA: Our site, products and services are all directed to people who are at least 16 years old. If you are under the age of 16, per the requirements of the GDPR (<a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation">General Data Protection Regulation</a>) do not use this site.</p>
-
-      <p>If this server is in the USA: Our site, products and services are all directed to people who are at least 13 years old. If you are under the age of 13, per the requirements of COPPA (<a href="https://en.wikipedia.org/wiki/Children%27s_Online_Privacy_Protection_Act">Children's Online Privacy Protection Act</a>) do not use this site.</p>
-
-      <p>Law requirements can be different if this server is in another jurisdiction.</p>
-
-      <hr class="spacer" />
-
-      <h3 id="changes">Changes to our Privacy Policy</h3>
-
-      <p>If we decide to change our privacy policy, we will post those changes on this page.</p>
-
-      <p>This document is CC-BY-SA. It was last updated May 26, 2022.</p>
-
-      <p>Originally adapted from the <a href="https://github.com/discourse/discourse">Discourse privacy policy</a>.</p>
-    title: "%{instance} Privacy Policy"
   themes:
     contrast: Mastodon (High contrast)
     default: Mastodon (Dark)
diff --git a/config/routes.rb b/config/routes.rb
index 472e6aa6b..e6098cd17 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -486,8 +486,9 @@ Rails.application.routes.draw do
 
       resource :instance, only: [:show] do
         resources :peers, only: [:index], controller: 'instances/peers'
-        resource :activity, only: [:show], controller: 'instances/activity'
         resources :rules, only: [:index], controller: 'instances/rules'
+        resource :privacy_policy, only: [:show], controller: 'instances/privacy_policies'
+        resource :activity, only: [:show], controller: 'instances/activity'
       end
 
       resource :domain_blocks, only: [:show, :create, :destroy]
-- 
cgit 


From f41ec9af05d3e2145e62f705225dbabb7e04e242 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 9 Oct 2022 06:08:37 +0200
Subject: Add dismissable hints to various timelines in web UI (#19315)

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
---
 .../mastodon/components/dismissable_banner.js      | 51 ++++++++++++++++++++++
 .../mastodon/features/community_timeline/index.js  |  6 +++
 app/javascript/mastodon/features/explore/links.js  | 11 +++++
 .../mastodon/features/explore/statuses.js          | 29 +++++++-----
 app/javascript/mastodon/features/explore/tags.js   | 11 +++++
 .../mastodon/features/public_timeline/index.js     |  5 +++
 app/javascript/mastodon/settings.js                |  1 +
 app/javascript/styles/mastodon/components.scss     | 25 +++++++++++
 8 files changed, 128 insertions(+), 11 deletions(-)
 create mode 100644 app/javascript/mastodon/components/dismissable_banner.js

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/dismissable_banner.js b/app/javascript/mastodon/components/dismissable_banner.js
new file mode 100644
index 000000000..1ee032056
--- /dev/null
+++ b/app/javascript/mastodon/components/dismissable_banner.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import IconButton from './icon_button';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages } from 'react-intl';
+import { bannerSettings } from 'mastodon/settings';
+
+const messages = defineMessages({
+  dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' },
+});
+
+export default @injectIntl
+class DismissableBanner extends React.PureComponent {
+
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    visible: !bannerSettings.get(this.props.id),
+  };
+
+  handleDismiss = () => {
+    const { id } = this.props;
+    this.setState({ visible: false }, () => bannerSettings.set(id, true));
+  }
+
+  render () {
+    const { visible } = this.state;
+
+    if (!visible) {
+      return null;
+    }
+
+    const { children, intl } = this.props;
+
+    return (
+      <div className='dismissable-banner'>
+        <div className='dismissable-banner__message'>
+          {children}
+        </div>
+
+        <div className='dismissable-banner__action'>
+          <IconButton icon='times' title={intl.formatMessage(messages.dismiss)} onClick={this.handleDismiss} />
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js
index afa7b3ed4..757521802 100644
--- a/app/javascript/mastodon/features/community_timeline/index.js
+++ b/app/javascript/mastodon/features/community_timeline/index.js
@@ -10,6 +10,8 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectCommunityStream } from '../../actions/streaming';
 import { Helmet } from 'react-helmet';
+import { domain } from 'mastodon/initial_state';
+import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
@@ -134,6 +136,10 @@ class CommunityTimeline extends React.PureComponent {
           <ColumnSettingsContainer columnId={columnId} />
         </ColumnHeader>
 
+        <DismissableBanner id='community_timeline'>
+          <FormattedMessage id='dismissable_banner.community_timeline' defaultMessage='These are the most recent public posts from people whose accounts are hosted by {domain}.' values={{ domain }} />
+        </DismissableBanner>
+
         <StatusListContainer
           trackScroll={!pinned}
           scrollKey={`community_timeline-${columnId}`}
diff --git a/app/javascript/mastodon/features/explore/links.js b/app/javascript/mastodon/features/explore/links.js
index d3aaa9cdd..b47fc8fcf 100644
--- a/app/javascript/mastodon/features/explore/links.js
+++ b/app/javascript/mastodon/features/explore/links.js
@@ -6,6 +6,7 @@ import LoadingIndicator from 'mastodon/components/loading_indicator';
 import { connect } from 'react-redux';
 import { fetchTrendingLinks } from 'mastodon/actions/trends';
 import { FormattedMessage } from 'react-intl';
+import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 const mapStateToProps = state => ({
   links: state.getIn(['trends', 'links', 'items']),
@@ -29,9 +30,17 @@ class Links extends React.PureComponent {
   render () {
     const { isLoading, links } = this.props;
 
+    const banner = (
+      <DismissableBanner id='explore/links'>
+        <FormattedMessage id='dismissable_banner.explore_links' defaultMessage='These news stories are being talked about by people on this and other servers of the decentralized network right now.' />
+      </DismissableBanner>
+    );
+
     if (!isLoading && links.isEmpty()) {
       return (
         <div className='explore__links scrollable scrollable--flex'>
+          {banner}
+
           <div className='empty-column-indicator'>
             <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
           </div>
@@ -41,6 +50,8 @@ class Links extends React.PureComponent {
 
     return (
       <div className='explore__links'>
+        {banner}
+
         {isLoading ? (<LoadingIndicator />) : links.map(link => (
           <Story
             key={link.get('id')}
diff --git a/app/javascript/mastodon/features/explore/statuses.js b/app/javascript/mastodon/features/explore/statuses.js
index 33e5b4179..791f11b9f 100644
--- a/app/javascript/mastodon/features/explore/statuses.js
+++ b/app/javascript/mastodon/features/explore/statuses.js
@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { fetchTrendingStatuses, expandTrendingStatuses } from 'mastodon/actions/trends';
 import { debounce } from 'lodash';
+import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 const mapStateToProps = state => ({
   statusIds: state.getIn(['status_lists', 'trending', 'items']),
@@ -40,17 +41,23 @@ class Statuses extends React.PureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />;
 
     return (
-      <StatusList
-        trackScroll
-        statusIds={statusIds}
-        scrollKey='explore-statuses'
-        hasMore={hasMore}
-        isLoading={isLoading}
-        onLoadMore={this.handleLoadMore}
-        emptyMessage={emptyMessage}
-        bindToDocument={!multiColumn}
-        withCounters
-      />
+      <>
+        <DismissableBanner id='explore/statuses'>
+          <FormattedMessage id='dismissable_banner.explore_statuses' defaultMessage='These posts from this and other servers in the decentralized network are gaining traction on this server right now.' />
+        </DismissableBanner>
+
+        <StatusList
+          trackScroll
+          statusIds={statusIds}
+          scrollKey='explore-statuses'
+          hasMore={hasMore}
+          isLoading={isLoading}
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={emptyMessage}
+          bindToDocument={!multiColumn}
+          withCounters
+        />
+      </>
     );
   }
 
diff --git a/app/javascript/mastodon/features/explore/tags.js b/app/javascript/mastodon/features/explore/tags.js
index 6cd3a6fb1..258dc392f 100644
--- a/app/javascript/mastodon/features/explore/tags.js
+++ b/app/javascript/mastodon/features/explore/tags.js
@@ -6,6 +6,7 @@ import LoadingIndicator from 'mastodon/components/loading_indicator';
 import { connect } from 'react-redux';
 import { fetchTrendingHashtags } from 'mastodon/actions/trends';
 import { FormattedMessage } from 'react-intl';
+import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 const mapStateToProps = state => ({
   hashtags: state.getIn(['trends', 'tags', 'items']),
@@ -29,9 +30,17 @@ class Tags extends React.PureComponent {
   render () {
     const { isLoading, hashtags } = this.props;
 
+    const banner = (
+      <DismissableBanner id='explore/tags'>
+        <FormattedMessage id='dismissable_banner.explore_tags' defaultMessage='These hashtags are gaining traction among people on this and other servers of the decentralized network right now.' />
+      </DismissableBanner>
+    );
+
     if (!isLoading && hashtags.isEmpty()) {
       return (
         <div className='explore__links scrollable scrollable--flex'>
+          {banner}
+
           <div className='empty-column-indicator'>
             <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
           </div>
@@ -41,6 +50,8 @@ class Tags extends React.PureComponent {
 
     return (
       <div className='explore__links'>
+        {banner}
+
         {isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
           <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
         ))}
diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js
index 5b1b7c650..8dbef98c0 100644
--- a/app/javascript/mastodon/features/public_timeline/index.js
+++ b/app/javascript/mastodon/features/public_timeline/index.js
@@ -10,6 +10,7 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectPublicStream } from '../../actions/streaming';
 import { Helmet } from 'react-helmet';
+import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Federated timeline' },
@@ -137,6 +138,10 @@ class PublicTimeline extends React.PureComponent {
           <ColumnSettingsContainer columnId={columnId} />
         </ColumnHeader>
 
+        <DismissableBanner id='public_timeline'>
+          <FormattedMessage id='dismissable_banner.public_timeline' defaultMessage='These are the most recent public posts from people on this and other servers of the decentralized network that this server knows about.' />
+        </DismissableBanner>
+
         <StatusListContainer
           timelineId={`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`}
           onLoadMore={this.handleLoadMore}
diff --git a/app/javascript/mastodon/settings.js b/app/javascript/mastodon/settings.js
index 7643a508e..46cfadfa3 100644
--- a/app/javascript/mastodon/settings.js
+++ b/app/javascript/mastodon/settings.js
@@ -45,3 +45,4 @@ export default class Settings {
 
 export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
 export const tagHistory = new Settings('mastodon_tag_history');
+export const bannerSettings = new Settings('mastodon_banner_settings');
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index cc8455ce3..02c2a14bf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8312,3 +8312,28 @@ noscript {
     }
   }
 }
+
+.dismissable-banner {
+  background: $ui-base-color;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  align-items: center;
+  gap: 30px;
+
+  &__message {
+    flex: 1 1 auto;
+    padding: 20px 15px;
+    cursor: default;
+    font-size: 14px;
+    line-height: 18px;
+    color: $primary-text-color;
+  }
+
+  &__action {
+    padding: 15px;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
-- 
cgit 


From 07653246223251052f5150e1e74139bf8ff41ec4 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 9 Oct 2022 15:55:32 +0200
Subject: Fix intermediary responsive layout, accessibility on navigation in
 web UI (#19324)

* Fix intermediary responsive layout, accessibility on navigation in web UI

* `yarn test:jest -u`

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
---
 .../__tests__/__snapshots__/avatar-test.js.snap    |  4 ++
 app/javascript/mastodon/components/avatar.js       |  2 +
 app/javascript/mastodon/components/logo.js         |  3 +-
 .../mastodon/features/ui/components/column_link.js | 20 +++++---
 .../ui/components/follow_requests_column_link.js   | 51 +++++++++++++++++++
 .../ui/components/follow_requests_nav_link.js      | 39 --------------
 .../mastodon/features/ui/components/header.js      |  3 +-
 .../features/ui/components/navigation_panel.js     | 59 +++++++++++++++-------
 app/javascript/styles/mastodon/components.scss     | 34 +++++++++++--
 app/javascript/styles/mastodon/variables.scss      |  2 +-
 10 files changed, 142 insertions(+), 75 deletions(-)
 create mode 100644 app/javascript/mastodon/features/ui/components/follow_requests_column_link.js
 delete mode 100644 app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
index 1c200b184..f5c10aa37 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
@@ -2,9 +2,11 @@
 
 exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 <div
+  aria-label="alice"
   className="account__avatar"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  role="img"
   style={
     {
       "backgroundImage": "url(/animated/alice.gif)",
@@ -18,9 +20,11 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 
 exports[`<Avatar /> Still renders a still avatar 1`] = `
 <div
+  aria-label="alice"
   className="account__avatar"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
+  role="img"
   style={
     {
       "backgroundImage": "url(/static/alice.jpg)",
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index 12ab7d2df..976d85cdb 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/app/javascript/mastodon/components/avatar.js
@@ -63,6 +63,8 @@ export default class Avatar extends React.PureComponent {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
+        role='img'
+        aria-label={account.get('acct')}
       />
     );
   }
diff --git a/app/javascript/mastodon/components/logo.js b/app/javascript/mastodon/components/logo.js
index 3570b3644..ee5c22496 100644
--- a/app/javascript/mastodon/components/logo.js
+++ b/app/javascript/mastodon/components/logo.js
@@ -1,7 +1,8 @@
 import React from 'react';
 
 const Logo = () => (
-  <svg viewBox='0 0 261 66' className='logo'>
+  <svg viewBox='0 0 261 66' className='logo' role='img'>
+    <title>Mastodon</title>
     <use xlinkHref='#logo-symbol-wordmark' />
   </svg>
 );
diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js
index 0a25f1ea2..42da05c0a 100644
--- a/app/javascript/mastodon/features/ui/components/column_link.js
+++ b/app/javascript/mastodon/features/ui/components/column_link.js
@@ -1,37 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import Icon from 'mastodon/components/icon';
+import classNames from 'classnames';
 
-const ColumnLink = ({ icon, text, to, href, method, badge }) => {
+const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other }) => {
+  const className = classNames('column-link', { 'column-link--transparent': transparent });
   const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
+  const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
 
   if (href) {
     return (
-      <a href={href} className='column-link' data-method={method}>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+      <a href={href} className={className} data-method={method} title={text} {...other}>
+        {iconElement}
         {text}
         {badgeElement}
       </a>
     );
   } else {
     return (
-      <Link to={to} className='column-link'>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+      <NavLink to={to} className={className} title={text} {...other}>
+        {iconElement}
         {text}
         {badgeElement}
-      </Link>
+      </NavLink>
     );
   }
 };
 
 ColumnLink.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   text: PropTypes.string.isRequired,
   to: PropTypes.string,
   href: PropTypes.string,
   method: PropTypes.string,
   badge: PropTypes.node,
+  transparent: PropTypes.bool,
 };
 
 export default ColumnLink;
diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_column_link.js b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.js
new file mode 100644
index 000000000..8d4057782
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { fetchFollowRequests } from 'mastodon/actions/accounts';
+import { connect } from 'react-redux';
+import ColumnLink from 'mastodon/features/ui/components/column_link';
+import IconWithBadge from 'mastodon/components/icon_with_badge';
+import { List as ImmutableList } from 'immutable';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  text: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+});
+
+const mapStateToProps = state => ({
+  count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
+});
+
+export default @injectIntl
+@connect(mapStateToProps)
+class FollowRequestsColumnLink extends React.Component {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    count: PropTypes.number.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  componentDidMount () {
+    const { dispatch } = this.props;
+
+    dispatch(fetchFollowRequests());
+  }
+
+  render () {
+    const { count, intl } = this.props;
+
+    if (count === 0) {
+      return null;
+    }
+
+    return (
+      <ColumnLink
+        transparent
+        to='/follow_requests'
+        icon={<IconWithBadge className='column-link__icon' id='user-plus' count={count} />}
+        text={intl.formatMessage(messages.text)}
+      />
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js b/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
deleted file mode 100644
index 950ed7b27..000000000
--- a/app/javascript/mastodon/features/ui/components/follow_requests_nav_link.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { fetchFollowRequests } from 'mastodon/actions/accounts';
-import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-import IconWithBadge from 'mastodon/components/icon_with_badge';
-import { List as ImmutableList } from 'immutable';
-import { FormattedMessage } from 'react-intl';
-
-const mapStateToProps = state => ({
-  count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
-});
-
-export default @withRouter
-@connect(mapStateToProps)
-class FollowRequestsNavLink extends React.Component {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    count: PropTypes.number.isRequired,
-  };
-
-  componentDidMount () {
-    const { dispatch } = this.props;
-
-    dispatch(fetchFollowRequests());
-  }
-
-  render () {
-    const { count } = this.props;
-
-    if (count === 0) {
-      return null;
-    }
-
-    return <NavLink className='column-link column-link--transparent' to='/follow_requests'><IconWithBadge className='column-link__icon' id='user-plus' count={count} /><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></NavLink>;
-  }
-
-}
diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js
index cddab820c..c49f48cc9 100644
--- a/app/javascript/mastodon/features/ui/components/header.js
+++ b/app/javascript/mastodon/features/ui/components/header.js
@@ -11,8 +11,7 @@ import { connect } from 'react-redux';
 const Account = connect(state => ({
   account: state.getIn(['accounts', me]),
 }))(({ account }) => (
-  <Permalink href={account.get('url')} to={`/@${account.get('acct')}`}>
-    <span style={{ display: 'none' }}>{account.get('acct')}</span>
+  <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} title={account.get('acct')}>
     <Avatar account={account} size={35} />
   </Permalink>
 ));
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index a9b80e71d..aa917c1ca 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -1,24 +1,45 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Link, NavLink } from 'react-router-dom';
-import Icon from 'mastodon/components/icon';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 import Logo from 'mastodon/components/logo';
 import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
 import { showTrends, timelinePreview } from 'mastodon/initial_state';
-import FollowRequestsNavLink from './follow_requests_nav_link';
+import FollowRequestsColumnLink from './follow_requests_column_link';
 import ListPanel from './list_panel';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import SignInBanner from './sign_in_banner';
+import ColumnLink from 'mastodon/features/ui/components/column_link';
+
+const messages = defineMessages({
+  home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
+  notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
+  explore: { id: 'explore.title', defaultMessage: 'Explore' },
+  local: { id: 'tabs_bar.local_timeline', defaultMessage: 'Local' },
+  federated: { id: 'tabs_bar.federated_timeline', defaultMessage: 'Federated' },
+  direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
+  bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
+  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
+  about: { id: 'navigation_bar.about', defaultMessage: 'About' },
+});
 
-export default class NavigationPanel extends React.Component {
+export default @injectIntl
+class NavigationPanel extends React.Component {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
     identity: PropTypes.object.isRequired,
   };
 
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  };
+
   render () {
+    const { intl } = this.props;
     const { signedIn } = this.context.identity;
 
     return (
@@ -30,17 +51,17 @@ export default class NavigationPanel extends React.Component {
 
         {signedIn && (
           <React.Fragment>
-            <NavLink className='column-link column-link--transparent' to='/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' id='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
-            <NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
-            <FollowRequestsNavLink />
+            <ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
+            <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
+            <FollowRequestsColumnLink />
           </React.Fragment>
         )}
 
-        <NavLink className='column-link column-link--transparent' to='/explore' data-preview-title-id='explore.title' data-preview-icon='hashtag'><Icon className='column-link__icon' id='hashtag' fixedWidth /><FormattedMessage id='explore.title' defaultMessage='Explore' /></NavLink>
+        <ColumnLink transparent to='/explore' icon='hashtag' text={intl.formatMessage(messages.explore)} />
         {signedIn || timelinePreview && (
           <>
-            <NavLink className='column-link column-link--transparent' to='/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
-            <NavLink className='column-link column-link--transparent' exact to='/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
+            <ColumnLink transparent to='/public/local' icon='users' text={intl.formatMessage(messages.local)} />
+            <ColumnLink transparent exact to='/public' icon='globe' text={intl.formatMessage(messages.federated)} />
           </>
         )}
 
@@ -53,23 +74,23 @@ export default class NavigationPanel extends React.Component {
 
         {signedIn && (
           <React.Fragment>
-            <NavLink className='column-link column-link--transparent' to='/conversations'><Icon className='column-link__icon' id='at' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
-            <NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
-            <NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon className='column-link__icon' id='bookmark' fixedWidth /><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmarks' /></NavLink>
-            <NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' id='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
+            <ColumnLink transparent to='/conversations' icon='at' text={intl.formatMessage(messages.direct)} />
+            <ColumnLink transparent to='/favourites' icon='star' text={intl.formatMessage(messages.favourites)} />
+            <ColumnLink transparent to='/bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} />
+            <ColumnLink transparent to='/lists' icon='list-ul' text={intl.formatMessage(messages.lists)} />
 
             <ListPanel />
 
             <hr />
 
-            <a className='column-link column-link--transparent' href='/settings/preferences'><Icon className='column-link__icon' id='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
-            <a className='column-link column-link--transparent' href='/relationships'><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>
+            <ColumnLink transparent href='/settings/preferences' icon='cog' text={intl.formatMessage(messages.preferences)} />
+            <ColumnLink transparent href='/relationships' icon='users' text={intl.formatMessage(messages.followsAndFollowers)} />
           </React.Fragment>
         )}
 
         <div className='navigation-panel__legal'>
           <hr />
-          <NavLink className='column-link column-link--transparent' to='/about'><Icon className='column-link__icon' id='ellipsis-h' fixedWidth /><FormattedMessage id='navigation_bar.about' defaultMessage='About' /></NavLink>
+          <ColumnLink transparent to='/about' icon='ellipsis-h' text={intl.formatMessage(messages.about)} />
         </div>
 
         {showTrends && (
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 02c2a14bf..039d0b904 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2604,12 +2604,14 @@ $ui-header-height: 55px;
 }
 
 @media screen and (max-width: $no-gap-breakpoint - 1px) {
+  $sidebar-width: 285px;
+
   .with-fab .scrollable .item-list:last-child {
     padding-bottom: 5.25rem;
   }
 
   .columns-area__panels__main {
-    width: calc(100% - 55px);
+    width: calc(100% - $sidebar-width);
   }
 
   .columns-area__panels {
@@ -2617,10 +2619,10 @@ $ui-header-height: 55px;
   }
 
   .columns-area__panels__pane--navigational {
-    min-width: 55px;
+    min-width: $sidebar-width;
 
     .columns-area__panels__pane__inner {
-      width: 55px;
+      width: $sidebar-width;
     }
 
     .navigation-panel {
@@ -2630,7 +2632,6 @@ $ui-header-height: 55px;
       height: 100vh;
     }
 
-    .column-link span,
     .navigation-panel__sign-in-banner,
     .navigation-panel__logo,
     .getting-started__trends {
@@ -2655,11 +2656,31 @@ $ui-header-height: 55px;
   }
 }
 
+@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
+  $sidebar-width: 55px;
+
+  .columns-area__panels__main {
+    width: calc(100% - $sidebar-width);
+  }
+
+  .columns-area__panels__pane--navigational {
+    min-width: $sidebar-width;
+
+    .columns-area__panels__pane__inner {
+      width: $sidebar-width;
+    }
+
+    .column-link span {
+      display: none;
+    }
+  }
+}
+
 .explore__search-header {
   display: none;
 }
 
-@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) {
+@media screen and (max-width: $no-gap-breakpoint - 1px) {
   .columns-area__panels__pane--compositional {
     display: none;
   }
@@ -3145,6 +3166,9 @@ $ui-header-height: 55px;
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:hover,
   &:focus,
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 775a12e68..2f6c41d5f 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -53,7 +53,7 @@ $media-modal-media-max-width: 100%;
 // put margins on top and bottom of image to avoid the screen covered by image.
 $media-modal-media-max-height: 80%;
 
-$no-gap-breakpoint: 890px;
+$no-gap-breakpoint: 1175px;
 
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
-- 
cgit 


From d7873433256746c9b453aeca31520d68c6de4975 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Tue, 11 Oct 2022 04:41:25 +0900
Subject: Hide list panel from nav bar in mobile layout (#19337)

---
 .../mastodon/features/ui/components/list_panel.js           | 12 ++++++------
 .../mastodon/features/ui/components/navigation_panel.js     |  2 +-
 app/javascript/mastodon/is_mobile.js                        | 13 ++++++++++++-
 app/javascript/styles/mastodon/about.scss                   |  4 ++--
 app/javascript/styles/mastodon/components.scss              |  6 +++++-
 5 files changed, 26 insertions(+), 11 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/features/ui/components/list_panel.js b/app/javascript/mastodon/features/ui/components/list_panel.js
index 411f62508..2f92a9254 100644
--- a/app/javascript/mastodon/features/ui/components/list_panel.js
+++ b/app/javascript/mastodon/features/ui/components/list_panel.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { createSelector } from 'reselect';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { fetchLists } from 'mastodon/actions/lists';
 import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { NavLink, withRouter } from 'react-router-dom';
-import Icon from 'mastodon/components/icon';
+import { withRouter } from 'react-router-dom';
+import { fetchLists } from 'mastodon/actions/lists';
+import ColumnLink from './column_link';
 
 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
   if (!lists) {
@@ -42,11 +42,11 @@ class ListPanel extends ImmutablePureComponent {
     }
 
     return (
-      <div>
+      <div className='list-panel'>
         <hr />
 
         {lists.map(list => (
-          <NavLink key={list.get('id')} className='column-link column-link--transparent' strict to={`/lists/${list.get('id')}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.get('title')}</NavLink>
+          <ColumnLink icon='list-ul' key={list.get('id')} strict text={list.get('title')} to={`/lists/${list.get('id')}`} transparent />
         ))}
       </div>
     );
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index 4dadf294d..166d3552b 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -5,11 +5,11 @@ import { Link } from 'react-router-dom';
 import Logo from 'mastodon/components/logo';
 import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
 import { showTrends, timelinePreview } from 'mastodon/initial_state';
+import ColumnLink from './column_link';
 import FollowRequestsColumnLink from './follow_requests_column_link';
 import ListPanel from './list_panel';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import SignInBanner from './sign_in_banner';
-import ColumnLink from 'mastodon/features/ui/components/column_link';
 
 const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js
index 2926eb4b1..3c8ec1545 100644
--- a/app/javascript/mastodon/is_mobile.js
+++ b/app/javascript/mastodon/is_mobile.js
@@ -1,10 +1,19 @@
+// @ts-check
+
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { forceSingleColumn } from 'mastodon/initial_state';
 
 const LAYOUT_BREAKPOINT = 630;
 
+/**
+ * @param {number} width
+ * @returns {boolean}
+ */
 export const isMobile = width => width <= LAYOUT_BREAKPOINT;
 
+/**
+ * @returns {string}
+ */
 export const layoutFromWindow = () => {
   if (isMobile(window.innerWidth)) {
     return 'mobile';
@@ -17,11 +26,13 @@ export const layoutFromWindow = () => {
 
 const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 
+const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+
 let userTouching = false;
-let listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 const touchListener = () => {
   userTouching = true;
+
   window.removeEventListener('touchstart', touchListener, listenerOptions);
 };
 
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index c82be742d..8893e3cf0 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -163,8 +163,8 @@ $small-breakpoint: 960px;
     th,
     td {
       padding: 8px;
-      align-self: start;
-      align-items: start;
+      align-self: flex-start;
+      align-items: flex-start;
       word-break: break-all;
 
       &.nowrap {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 039d0b904..a8919b9cb 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2673,6 +2673,10 @@ $ui-header-height: 55px;
     .column-link span {
       display: none;
     }
+
+    .list-panel {
+      display: none;
+    }
   }
 }
 
@@ -2755,7 +2759,7 @@ $ui-header-height: 55px;
 
 .column-actions {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: center;
   padding: 40px;
   padding-top: 40px;
-- 
cgit 


From 1bd00036c284bcafb419eaf80347ba49d1b491d9 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 13 Oct 2022 14:42:37 +0200
Subject: Change about page to be mounted in the web UI (#19345)

---
 app/controllers/about_controller.rb                |  60 +-
 .../api/v1/instances/domain_blocks_controller.rb   |  23 +
 .../instances/extended_descriptions_controller.rb  |  18 +
 .../fonts/montserrat/Montserrat-Medium.ttf         | Bin 192488 -> 0 bytes
 .../fonts/montserrat/Montserrat-Regular.ttf        | Bin 191860 -> 0 bytes
 .../fonts/montserrat/Montserrat-Regular.woff       | Bin 81244 -> 0 bytes
 .../fonts/montserrat/Montserrat-Regular.woff2      | Bin 61840 -> 0 bytes
 app/javascript/mastodon/actions/server.js          |  61 ++
 app/javascript/mastodon/components/image.js        |  33 +
 .../mastodon/components/server_banner.js           |   8 +-
 app/javascript/mastodon/components/skeleton.js     |   4 +-
 app/javascript/mastodon/features/about/index.js    | 195 ++++-
 .../mastodon/features/privacy_policy/index.js      |   2 +-
 app/javascript/mastodon/features/report/rules.js   |   2 +-
 .../mastodon/features/ui/components/link_footer.js |   2 +-
 app/javascript/mastodon/reducers/server.js         |  46 +-
 app/javascript/styles/application.scss             |   2 -
 app/javascript/styles/contrast/diff.scss           |   4 -
 app/javascript/styles/fonts/montserrat.scss        |  21 -
 app/javascript/styles/mastodon-light/diff.scss     |  86 +-
 app/javascript/styles/mastodon/about.scss          | 902 +--------------------
 app/javascript/styles/mastodon/compact_header.scss |  34 -
 app/javascript/styles/mastodon/components.scss     | 474 +++++++++--
 app/javascript/styles/mastodon/containers.scss     |   1 -
 app/javascript/styles/mastodon/dashboard.scss      |   1 -
 app/javascript/styles/mastodon/forms.scss          |  63 +-
 app/javascript/styles/mastodon/widgets.scss        | 229 +-----
 app/models/domain_block.rb                         |   4 +-
 app/models/extended_description.rb                 |  15 +
 app/serializers/rest/domain_block_serializer.rb    |  17 +
 .../rest/extended_description_serializer.rb        |  13 +
 app/views/about/_domain_blocks.html.haml           |  12 -
 app/views/about/more.html.haml                     |  96 ---
 app/views/about/show.html.haml                     |   4 +
 config/locales/en.yml                              |  28 +-
 config/routes.rb                                   |   6 +-
 spec/controllers/about_controller_spec.rb          |   8 +-
 37 files changed, 900 insertions(+), 1574 deletions(-)
 create mode 100644 app/controllers/api/v1/instances/domain_blocks_controller.rb
 create mode 100644 app/controllers/api/v1/instances/extended_descriptions_controller.rb
 delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Medium.ttf
 delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Regular.ttf
 delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Regular.woff
 delete mode 100644 app/javascript/fonts/montserrat/Montserrat-Regular.woff2
 create mode 100644 app/javascript/mastodon/components/image.js
 delete mode 100644 app/javascript/styles/fonts/montserrat.scss
 delete mode 100644 app/javascript/styles/mastodon/compact_header.scss
 create mode 100644 app/models/extended_description.rb
 create mode 100644 app/serializers/rest/domain_block_serializer.rb
 create mode 100644 app/serializers/rest/extended_description_serializer.rb
 delete mode 100644 app/views/about/_domain_blocks.html.haml
 delete mode 100644 app/views/about/more.html.haml
 create mode 100644 app/views/about/show.html.haml

(limited to 'app/javascript/styles')

diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb
index eae7de8c8..0fbc6a800 100644
--- a/app/controllers/about_controller.rb
+++ b/app/controllers/about_controller.rb
@@ -1,63 +1,11 @@
 # frozen_string_literal: true
 
 class AboutController < ApplicationController
-  include RegistrationSpamConcern
+  include WebAppControllerConcern
 
-  layout 'public'
+  skip_before_action :require_functional!
 
-  before_action :require_open_federation!, only: [:more]
-  before_action :set_body_classes, only: :show
-  before_action :set_instance_presenter
-  before_action :set_expires_in, only: [:more]
-
-  skip_before_action :require_functional!, only: [:more]
-
-  def more
-    flash.now[:notice] = I18n.t('about.instance_actor_flash') if params[:instance_actor]
-
-    toc_generator = TOCGenerator.new(@instance_presenter.extended_description)
-
-    @rules             = Rule.ordered
-    @contents          = toc_generator.html
-    @table_of_contents = toc_generator.toc
-    @blocks            = DomainBlock.with_user_facing_limitations.by_severity if display_blocks?
-  end
-
-  helper_method :display_blocks?
-  helper_method :display_blocks_rationale?
-  helper_method :public_fetch_mode?
-  helper_method :new_user
-
-  private
-
-  def require_open_federation!
-    not_found if whitelist_mode?
-  end
-
-  def display_blocks?
-    Setting.show_domain_blocks == 'all' || (Setting.show_domain_blocks == 'users' && user_signed_in?)
-  end
-
-  def display_blocks_rationale?
-    Setting.show_domain_blocks_rationale == 'all' || (Setting.show_domain_blocks_rationale == 'users' && user_signed_in?)
-  end
-
-  def new_user
-    User.new.tap do |user|
-      user.build_account
-      user.build_invite_request
-    end
-  end
-
-  def set_instance_presenter
-    @instance_presenter = InstancePresenter.new
-  end
-
-  def set_body_classes
-    @hide_navbar = true
-  end
-
-  def set_expires_in
-    expires_in 0, public: true
+  def show
+    expires_in 0, public: true unless user_signed_in?
   end
 end
diff --git a/app/controllers/api/v1/instances/domain_blocks_controller.rb b/app/controllers/api/v1/instances/domain_blocks_controller.rb
new file mode 100644
index 000000000..37a6906fb
--- /dev/null
+++ b/app/controllers/api/v1/instances/domain_blocks_controller.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Api::V1::Instances::DomainBlocksController < Api::BaseController
+  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+
+  before_action :require_enabled_api!
+  before_action :set_domain_blocks
+
+  def index
+    expires_in 3.minutes, public: true
+    render json: @domain_blocks, each_serializer: REST::DomainBlockSerializer, with_comment: (Setting.show_domain_blocks_rationale == 'all' || (Setting.show_domain_blocks_rationale == 'users' && user_signed_in?))
+  end
+
+  private
+
+  def require_enabled_api!
+    head 404 unless Setting.show_domain_blocks == 'all' || (Setting.show_domain_blocks == 'users' && user_signed_in?)
+  end
+
+  def set_domain_blocks
+    @domain_blocks = DomainBlock.with_user_facing_limitations.by_severity
+  end
+end
diff --git a/app/controllers/api/v1/instances/extended_descriptions_controller.rb b/app/controllers/api/v1/instances/extended_descriptions_controller.rb
new file mode 100644
index 000000000..c72e16cff
--- /dev/null
+++ b/app/controllers/api/v1/instances/extended_descriptions_controller.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Api::V1::Instances::ExtendedDescriptionsController < Api::BaseController
+  skip_before_action :require_authenticated_user!, unless: :whitelist_mode?
+
+  before_action :set_extended_description
+
+  def show
+    expires_in 3.minutes, public: true
+    render json: @extended_description, serializer: REST::ExtendedDescriptionSerializer
+  end
+
+  private
+
+  def set_extended_description
+    @extended_description = ExtendedDescription.current
+  end
+end
diff --git a/app/javascript/fonts/montserrat/Montserrat-Medium.ttf b/app/javascript/fonts/montserrat/Montserrat-Medium.ttf
deleted file mode 100644
index 88d70b89c..000000000
Binary files a/app/javascript/fonts/montserrat/Montserrat-Medium.ttf and /dev/null differ
diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.ttf b/app/javascript/fonts/montserrat/Montserrat-Regular.ttf
deleted file mode 100644
index 29ca85d4a..000000000
Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.ttf and /dev/null differ
diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.woff b/app/javascript/fonts/montserrat/Montserrat-Regular.woff
deleted file mode 100644
index af3b5ec44..000000000
Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.woff and /dev/null differ
diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.woff2 b/app/javascript/fonts/montserrat/Montserrat-Regular.woff2
deleted file mode 100644
index 3d75434dd..000000000
Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.woff2 and /dev/null differ
diff --git a/app/javascript/mastodon/actions/server.js b/app/javascript/mastodon/actions/server.js
index af8fef780..31d4aea10 100644
--- a/app/javascript/mastodon/actions/server.js
+++ b/app/javascript/mastodon/actions/server.js
@@ -5,6 +5,14 @@ export const SERVER_FETCH_REQUEST = 'Server_FETCH_REQUEST';
 export const SERVER_FETCH_SUCCESS = 'Server_FETCH_SUCCESS';
 export const SERVER_FETCH_FAIL    = 'Server_FETCH_FAIL';
 
+export const EXTENDED_DESCRIPTION_REQUEST = 'EXTENDED_DESCRIPTION_REQUEST';
+export const EXTENDED_DESCRIPTION_SUCCESS = 'EXTENDED_DESCRIPTION_SUCCESS';
+export const EXTENDED_DESCRIPTION_FAIL    = 'EXTENDED_DESCRIPTION_FAIL';
+
+export const SERVER_DOMAIN_BLOCKS_FETCH_REQUEST = 'SERVER_DOMAIN_BLOCKS_FETCH_REQUEST';
+export const SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS = 'SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS';
+export const SERVER_DOMAIN_BLOCKS_FETCH_FAIL    = 'SERVER_DOMAIN_BLOCKS_FETCH_FAIL';
+
 export const fetchServer = () => (dispatch, getState) => {
   dispatch(fetchServerRequest());
 
@@ -28,3 +36,56 @@ const fetchServerFail = error => ({
   type: SERVER_FETCH_FAIL,
   error,
 });
+
+export const fetchExtendedDescription = () => (dispatch, getState) => {
+  dispatch(fetchExtendedDescriptionRequest());
+
+  api(getState)
+    .get('/api/v1/instance/extended_description')
+    .then(({ data }) => dispatch(fetchExtendedDescriptionSuccess(data)))
+    .catch(err => dispatch(fetchExtendedDescriptionFail(err)));
+};
+
+const fetchExtendedDescriptionRequest = () => ({
+  type: EXTENDED_DESCRIPTION_REQUEST,
+});
+
+const fetchExtendedDescriptionSuccess = description => ({
+  type: EXTENDED_DESCRIPTION_SUCCESS,
+  description,
+});
+
+const fetchExtendedDescriptionFail = error => ({
+  type: EXTENDED_DESCRIPTION_FAIL,
+  error,
+});
+
+export const fetchDomainBlocks = () => (dispatch, getState) => {
+  dispatch(fetchDomainBlocksRequest());
+
+  api(getState)
+    .get('/api/v1/instance/domain_blocks')
+    .then(({ data }) => dispatch(fetchDomainBlocksSuccess(true, data)))
+    .catch(err => {
+      if (err.response.status === 404) {
+        dispatch(fetchDomainBlocksSuccess(false, []));
+      } else {
+        dispatch(fetchDomainBlocksFail(err));
+      }
+    });
+};
+
+const fetchDomainBlocksRequest = () => ({
+  type: SERVER_DOMAIN_BLOCKS_FETCH_REQUEST,
+});
+
+const fetchDomainBlocksSuccess = (isAvailable, blocks) => ({
+  type: SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS,
+  isAvailable,
+  blocks,
+});
+
+const fetchDomainBlocksFail = error => ({
+  type: SERVER_DOMAIN_BLOCKS_FETCH_FAIL,
+  error,
+});
diff --git a/app/javascript/mastodon/components/image.js b/app/javascript/mastodon/components/image.js
new file mode 100644
index 000000000..6e81ddf08
--- /dev/null
+++ b/app/javascript/mastodon/components/image.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Blurhash from './blurhash';
+import classNames from 'classnames';
+
+export default class Image extends React.PureComponent {
+
+  static propTypes = {
+    src: PropTypes.string,
+    srcSet: PropTypes.string,
+    blurhash: PropTypes.string,
+    className: PropTypes.string,
+  };
+
+  state = {
+    loaded: false,
+  };
+
+  handleLoad = () => this.setState({ loaded: true });
+
+  render () {
+    const { src, srcSet, blurhash, className } = this.props;
+    const { loaded } = this.state;
+
+    return (
+      <div className={classNames('image', { loaded }, className)} role='presentation'>
+        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js
index ae4e200c3..c2336e43d 100644
--- a/app/javascript/mastodon/components/server_banner.js
+++ b/app/javascript/mastodon/components/server_banner.js
@@ -7,13 +7,15 @@ import ShortNumber from 'mastodon/components/short_number';
 import Skeleton from 'mastodon/components/skeleton';
 import Account from 'mastodon/containers/account_container';
 import { domain } from 'mastodon/initial_state';
+import Image from 'mastodon/components/image';
+import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
   aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
 });
 
 const mapStateToProps = state => ({
-  server: state.get('server'),
+  server: state.getIn(['server', 'server']),
 });
 
 export default @connect(mapStateToProps)
@@ -41,7 +43,7 @@ class ServerBanner extends React.PureComponent {
           <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
         </div>
 
-        <img src={server.get('thumbnail')} alt={server.get('title')} className='server-banner__hero' />
+        <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' />
 
         <div className='server-banner__description'>
           {isLoading ? (
@@ -83,7 +85,7 @@ class ServerBanner extends React.PureComponent {
 
         <hr className='spacer' />
 
-        <a className='button button--block button-secondary' href='/about/more' target='_blank'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></a>
+        <Link className='button button--block button-secondary' to='/about'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></Link>
       </div>
     );
   }
diff --git a/app/javascript/mastodon/components/skeleton.js b/app/javascript/mastodon/components/skeleton.js
index 09093e99c..6a17ffb26 100644
--- a/app/javascript/mastodon/components/skeleton.js
+++ b/app/javascript/mastodon/components/skeleton.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>&zwnj;</span>;
 
 Skeleton.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 export default Skeleton;
diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js
index bc8d3a41b..e9212565a 100644
--- a/app/javascript/mastodon/features/about/index.js
+++ b/app/javascript/mastodon/features/about/index.js
@@ -1,27 +1,214 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Column from 'mastodon/components/column';
 import LinkFooter from 'mastodon/features/ui/components/link_footer';
 import { Helmet } from 'react-helmet';
+import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server';
+import Account from 'mastodon/containers/account_container';
+import Skeleton from 'mastodon/components/skeleton';
+import Icon from 'mastodon/components/icon';
+import classNames from 'classnames';
+import Image from 'mastodon/components/image';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
+  rules: { id: 'about.rules', defaultMessage: 'Server rules' },
+  blocks: { id: 'about.blocks', defaultMessage: 'Moderated servers' },
+  silenced: { id: 'about.domain_blocks.silenced.title', defaultMessage: 'Limited' },
+  silencedExplanation: { id: 'about.domain_blocks.silenced.explanation', defaultMessage: 'You will generally not see profiles and content from this server, unless you explicitly look it up or opt into it by following.' },
+  suspended: { id: 'about.domain_blocks.suspended.title', defaultMessage: 'Suspended' },
+  suspendedExplanation: { id: 'about.domain_blocks.suspended.explanation', defaultMessage: 'No data from this server will be processed, stored or exchanged, making any interaction or communication with users from this server impossible.' },
 });
 
-export default @injectIntl
+const severityMessages = {
+  silence: {
+    title: messages.silenced,
+    explanation: messages.silencedExplanation,
+  },
+
+  suspend: {
+    title: messages.suspended,
+    explanation: messages.suspendedExplanation,
+  },
+};
+
+const mapStateToProps = state => ({
+  server: state.getIn(['server', 'server']),
+  extendedDescription: state.getIn(['server', 'extendedDescription']),
+  domainBlocks: state.getIn(['server', 'domainBlocks']),
+});
+
+class Section extends React.PureComponent {
+
+  static propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+    open: PropTypes.bool,
+    onOpen: PropTypes.func,
+  };
+
+  state = {
+    collapsed: !this.props.open,
+  };
+
+  handleClick = () => {
+    const { onOpen } = this.props;
+    const { collapsed } = this.state;
+
+    this.setState({ collapsed: !collapsed }, () => onOpen && onOpen());
+  }
+
+  render () {
+    const { title, children } = this.props;
+    const { collapsed } = this.state;
+
+    return (
+      <div className={classNames('about__section', { active: !collapsed })}>
+        <div className='about__section__title' role='button' tabIndex='0' onClick={this.handleClick}>
+          <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} fixedWidth /> {title}
+        </div>
+
+        {!collapsed && (
+          <div className='about__section__body'>{children}</div>
+        )}
+      </div>
+    );
+  }
+
+}
+
+export default @connect(mapStateToProps)
+@injectIntl
 class About extends React.PureComponent {
 
   static propTypes = {
+    server: ImmutablePropTypes.map,
+    extendedDescription: ImmutablePropTypes.map,
+    domainBlocks: ImmutablePropTypes.contains({
+      isLoading: PropTypes.bool,
+      isAvailable: PropTypes.bool,
+      items: ImmutablePropTypes.list,
+    }),
+    dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
+  componentDidMount () {
+    const { dispatch } = this.props;
+    dispatch(fetchServer());
+    dispatch(fetchExtendedDescription());
+  }
+
+  handleDomainBlocksOpen = () => {
+    const { dispatch } = this.props;
+    dispatch(fetchDomainBlocks());
+  }
+
   render () {
-    const { intl } = this.props;
+    const { intl, server, extendedDescription, domainBlocks } = this.props;
+    const isLoading = server.get('isLoading');
 
     return (
       <Column>
-        <LinkFooter />
+        <div className='scrollable about'>
+          <div className='about__header'>
+            <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
+            <h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1>
+            <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p>
+          </div>
+
+          <div className='about__meta'>
+            <div className='about__meta__column'>
+              <h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
+
+              <Account id={server.getIn(['contact', 'account', 'id'])} />
+            </div>
+
+            <hr className='about__meta__divider' />
+
+            <div className='about__meta__column'>
+              <h4><FormattedMessage id='about.contact' defaultMessage='Contact:' /></h4>
+
+              {isLoading ? <Skeleton width='10ch' /> : <a className='about__mail' href={`mailto:${server.getIn(['contact', 'email'])}`}>{server.getIn(['contact', 'email'])}</a>}
+            </div>
+          </div>
+
+          <Section open title={intl.formatMessage(messages.title)}>
+            {extendedDescription.get('isLoading') ? (
+              <>
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='70%' />
+              </>
+            ) : (extendedDescription.get('content')?.length > 0 ? (
+              <div
+                className='prose'
+                dangerouslySetInnerHTML={{ __html: extendedDescription.get('content') }}
+              />
+            ) : (
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
+            ))}
+          </Section>
+
+          <Section title={intl.formatMessage(messages.rules)}>
+            {!isLoading && (server.get('rules').isEmpty() ? (
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
+            ) : (
+              <ol className='rules-list'>
+                {server.get('rules').map(rule => (
+                  <li key={rule.get('id')}>
+                    <span className='rules-list__text'>{rule.get('text')}</span>
+                  </li>
+                ))}
+              </ol>
+            ))}
+          </Section>
+
+          <Section title={intl.formatMessage(messages.blocks)} onOpen={this.handleDomainBlocksOpen}>
+            {domainBlocks.get('isLoading') ? (
+              <>
+                <Skeleton width='100%' />
+                <br />
+                <Skeleton width='70%' />
+              </>
+            ) : (domainBlocks.get('isAvailable') ? (
+              <>
+                <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p>
+
+                <table className='about__domain-blocks'>
+                  <thead>
+                    <tr>
+                      <th><FormattedMessage id='about.domain_blocks.domain' defaultMessage='Domain' /></th>
+                      <th><FormattedMessage id='about.domain_blocks.severity' defaultMessage='Severity' /></th>
+                      <th><FormattedMessage id='about.domain_blocks.comment' defaultMessage='Reason' /></th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {domainBlocks.get('items').map(block => (
+                      <tr key={block.get('domain')}>
+                        <td><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></td>
+                        <td><span title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span></td>
+                        <td>{block.get('comment')}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </>
+            ) : (
+              <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
+            ))}
+          </Section>
+
+          <LinkFooter />
+        </div>
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
diff --git a/app/javascript/mastodon/features/privacy_policy/index.js b/app/javascript/mastodon/features/privacy_policy/index.js
index 5fbe340c0..eee4255f4 100644
--- a/app/javascript/mastodon/features/privacy_policy/index.js
+++ b/app/javascript/mastodon/features/privacy_policy/index.js
@@ -44,7 +44,7 @@ class PrivacyPolicy extends React.PureComponent {
           </div>
 
           <div
-            className='privacy-policy__body'
+            className='privacy-policy__body prose'
             dangerouslySetInnerHTML={{ __html: content }}
           />
         </div>
diff --git a/app/javascript/mastodon/features/report/rules.js b/app/javascript/mastodon/features/report/rules.js
index 2cb4a95b5..920da68d6 100644
--- a/app/javascript/mastodon/features/report/rules.js
+++ b/app/javascript/mastodon/features/report/rules.js
@@ -7,7 +7,7 @@ import Button from 'mastodon/components/button';
 import Option from './components/option';
 
 const mapStateToProps = state => ({
-  rules: state.getIn(['server', 'rules']),
+  rules: state.getIn(['server', 'server', 'rules']),
 });
 
 export default @connect(mapStateToProps)
diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js
index c4ce2a985..cc3d83572 100644
--- a/app/javascript/mastodon/features/ui/components/link_footer.js
+++ b/app/javascript/mastodon/features/ui/components/link_footer.js
@@ -51,7 +51,7 @@ class LinkFooter extends React.PureComponent {
     const items = [];
 
     items.push(<a key='apps' href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Get the app' /></a>);
-    items.push(<a key='about' href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About' /></a>);
+    items.push(<Link key='about' to='/about'><FormattedMessage id='navigation_bar.info' defaultMessage='About' /></Link>);
     items.push(<a key='mastodon' href='https://joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.what_is_mastodon' defaultMessage='About Mastodon' /></a>);
     items.push(<a key='docs' href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a>);
     items.push(<Link key='privacy-policy' to='/privacy-policy'><FormattedMessage id='getting_started.privacy_policy' defaultMessage='Privacy Policy' /></Link>);
diff --git a/app/javascript/mastodon/reducers/server.js b/app/javascript/mastodon/reducers/server.js
index 68131c6dd..db9f2b5e6 100644
--- a/app/javascript/mastodon/reducers/server.js
+++ b/app/javascript/mastodon/reducers/server.js
@@ -1,18 +1,52 @@
-import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'mastodon/actions/server';
-import { Map as ImmutableMap, fromJS } from 'immutable';
+import {
+  SERVER_FETCH_REQUEST,
+  SERVER_FETCH_SUCCESS,
+  SERVER_FETCH_FAIL,
+  EXTENDED_DESCRIPTION_REQUEST,
+  EXTENDED_DESCRIPTION_SUCCESS,
+  EXTENDED_DESCRIPTION_FAIL,
+  SERVER_DOMAIN_BLOCKS_FETCH_REQUEST,
+  SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS,
+  SERVER_DOMAIN_BLOCKS_FETCH_FAIL,
+} from 'mastodon/actions/server';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
 const initialState = ImmutableMap({
-  isLoading: true,
+  server: ImmutableMap({
+    isLoading: true,
+  }),
+
+  extendedDescription: ImmutableMap({
+    isLoading: true,
+  }),
+
+  domainBlocks: ImmutableMap({
+    isLoading: true,
+    isAvailable: true,
+    items: ImmutableList(),
+  }),
 });
 
 export default function server(state = initialState, action) {
   switch (action.type) {
   case SERVER_FETCH_REQUEST:
-    return state.set('isLoading', true);
+    return state.setIn(['server', 'isLoading'], true);
   case SERVER_FETCH_SUCCESS:
-    return fromJS(action.server).set('isLoading', false);
+    return state.set('server', fromJS(action.server)).setIn(['server', 'isLoading'], false);
   case SERVER_FETCH_FAIL:
-    return state.set('isLoading', false);
+    return state.setIn(['server', 'isLoading'], false);
+  case EXTENDED_DESCRIPTION_REQUEST:
+    return state.setIn(['extendedDescription', 'isLoading'], true);
+  case EXTENDED_DESCRIPTION_SUCCESS:
+    return state.set('extendedDescription', fromJS(action.description)).setIn(['extendedDescription', 'isLoading'], false);
+  case EXTENDED_DESCRIPTION_FAIL:
+    return state.setIn(['extendedDescription', 'isLoading'], false);
+  case SERVER_DOMAIN_BLOCKS_FETCH_REQUEST:
+    return state.setIn(['domainBlocks', 'isLoading'], true);
+  case SERVER_DOMAIN_BLOCKS_FETCH_SUCCESS:
+    return state.setIn(['domainBlocks', 'items'], fromJS(action.blocks)).setIn(['domainBlocks', 'isLoading'], false).setIn(['domainBlocks', 'isAvailable'], action.isAvailable);
+  case SERVER_DOMAIN_BLOCKS_FETCH_FAIL:
+    return state.setIn(['domainBlocks', 'isLoading'], false);
   default:
     return state;
   }
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index bbea06195..e9f596e2f 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -2,7 +2,6 @@
 @import 'mastodon/variables';
 @import 'fonts/roboto';
 @import 'fonts/roboto-mono';
-@import 'fonts/montserrat';
 
 @import 'mastodon/reset';
 @import 'mastodon/basics';
@@ -10,7 +9,6 @@
 @import 'mastodon/containers';
 @import 'mastodon/lists';
 @import 'mastodon/footer';
-@import 'mastodon/compact_header';
 @import 'mastodon/widgets';
 @import 'mastodon/forms';
 @import 'mastodon/accounts';
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index 841ed6648..22f5bcc94 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -13,10 +13,6 @@
   }
 }
 
-.rich-formatting a,
-.rich-formatting p a,
-.rich-formatting li a,
-.landing-page__short-description p a,
 .status__content a,
 .reply-indicator__content a {
   color: lighten($ui-highlight-color, 12%);
diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
deleted file mode 100644
index 170fe6542..000000000
--- a/app/javascript/styles/fonts/montserrat.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
-  font-family: mastodon-font-display;
-  src:
-    local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-    url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
-    url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: mastodon-font-display;
-  src:
-    local('Montserrat Medium'),
-    url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 0bc6247ef..4b27e6b4f 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -36,6 +36,20 @@ html {
   border-top: 0;
 }
 
+.column > .scrollable.about {
+  border-top: 1px solid lighten($ui-base-color, 8%);
+}
+
+.about__meta,
+.about__section__title {
+  background: $white;
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
+.rules-list li::before {
+  background: $ui-highlight-color;
+}
+
 .directory__card__img {
   background: lighten($ui-base-color, 12%);
 }
@@ -45,10 +59,6 @@ html {
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 }
 
-.table-of-contents {
-  border: 1px solid lighten($ui-base-color, 8%);
-}
-
 .column-back-button,
 .column-header {
   background: $white;
@@ -138,11 +148,6 @@ html {
 .compose-form__poll-wrapper select,
 .search__input,
 .setting-text,
-.box-widget input[type="text"],
-.box-widget input[type="email"],
-.box-widget input[type="password"],
-.box-widget textarea,
-.statuses-grid .detailed-status,
 .report-dialog-modal__textarea,
 .audio-player {
   border: 1px solid lighten($ui-base-color, 8%);
@@ -480,52 +485,16 @@ html {
   background: $white;
 }
 
-.tabs-bar {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border-top: 0;
-  }
-
-  &__link {
-    padding-bottom: 14px;
-    border-bottom-width: 1px;
-    border-bottom-color: lighten($ui-base-color, 8%);
-
-    &:hover,
-    &:active,
-    &:focus {
-      background: $ui-base-color;
-    }
-
-    &.active {
-      &:hover,
-      &:active,
-      &:focus {
-        background: transparent;
-        border-bottom-color: $ui-highlight-color;
-      }
-    }
-  }
-}
-
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
   background: $account-background-color;
   border-bottom-color: lighten($ui-base-color, 8%);
 }
 
-.box-widget,
 .nothing-here,
 .page-header,
 .directory__tag > a,
-.directory__tag > div,
-.landing-page__call-to-action,
-.contact-widget,
-.landing .hero-widget__text,
-.landing-page__information.contact-widget {
+.directory__tag > div {
   background: $white;
   border: 1px solid lighten($ui-base-color, 8%);
 
@@ -536,11 +505,6 @@ html {
   }
 }
 
-.landing .hero-widget__text {
-  border-top: 0;
-  border-bottom: 0;
-}
-
 .simple_form {
   input[type="text"],
   input[type="number"],
@@ -553,26 +517,12 @@ html {
   }
 }
 
-.landing .hero-widget__footer {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border: 0;
-  }
-}
-
 .picture-in-picture-placeholder {
   background: $white;
   border-color: lighten($ui-base-color, 8%);
   color: lighten($ui-base-color, 8%);
 }
 
-.brand__tagline {
-  color: $ui-secondary-color;
-}
-
 .directory__tag > a {
   &:hover,
   &:active,
@@ -666,8 +616,7 @@ html {
   }
 }
 
-.simple_form,
-.table-form {
+.simple_form {
   .warning {
     box-shadow: none;
     background: rgba($error-red, 0.5);
@@ -801,9 +750,6 @@ html {
 }
 
 .hero-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
 .moved-account-widget,
 .memoriam-widget,
 .activity-stream,
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 8893e3cf0..0183c43d5 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -1,7 +1,5 @@
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
-$column-breakpoint: 700px;
-$small-breakpoint: 960px;
 
 .container {
   box-sizing: border-box;
@@ -15,892 +13,44 @@ $small-breakpoint: 960px;
   }
 }
 
-.rich-formatting {
-  font-family: $font-sans-serif, sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.7;
-  word-wrap: break-word;
-  color: $darker-text-color;
-
-  a {
-    color: $highlight-text-color;
-    text-decoration: underline;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: none;
-    }
-  }
-
-  p,
-  li {
-    color: $darker-text-color;
-  }
-
-  p {
-    margin-top: 0;
-    margin-bottom: 0.85em;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  strong {
-    font-weight: 700;
-    color: $secondary-text-color;
-  }
-
-  em {
-    font-style: italic;
-    color: $secondary-text-color;
-  }
-
-  code {
-    font-size: 0.85em;
-    background: darken($ui-base-color, 8%);
-    border-radius: 4px;
-    padding: 0.2em 0.3em;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: $font-display, sans-serif;
-    margin-top: 1.275em;
-    margin-bottom: 0.85em;
-    font-weight: 500;
-    color: $secondary-text-color;
-  }
-
-  h1 {
-    font-size: 2em;
-  }
-
-  h2 {
-    font-size: 1.75em;
-  }
-
-  h3 {
-    font-size: 1.5em;
-  }
-
-  h4 {
-    font-size: 1.25em;
-  }
-
-  h5,
-  h6 {
-    font-size: 1em;
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0;
-    padding-left: 2em;
-    margin-bottom: 0.85em;
-
-    &[type='a'] {
-      list-style-type: lower-alpha;
-    }
-
-    &[type='i'] {
-      list-style-type: lower-roman;
-    }
-  }
-
-  hr {
-    width: 100%;
-    height: 0;
-    border: 0;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-    margin: 1.7em 0;
-
-    &.spacer {
-      height: 1px;
-      border: 0;
-    }
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    break-inside: auto;
-    margin-top: 24px;
-    margin-bottom: 32px;
-
-    thead tr,
-    tbody tr {
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
-      font-size: 1em;
-      line-height: 1.625;
-      font-weight: 400;
-      text-align: left;
-      color: $darker-text-color;
-    }
-
-    thead tr {
-      border-bottom-width: 2px;
-      line-height: 1.5;
-      font-weight: 500;
-      color: $dark-text-color;
-    }
-
-    th,
-    td {
-      padding: 8px;
-      align-self: flex-start;
-      align-items: flex-start;
-      word-break: break-all;
-
-      &.nowrap {
-        width: 25%;
-        position: relative;
-
-        &::before {
-          content: '&nbsp;';
-          visibility: hidden;
-        }
-
-        span {
-          position: absolute;
-          left: 8px;
-          right: 8px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  & > :first-child {
-    margin-top: 0;
-  }
+.brand {
+  position: relative;
+  text-decoration: none;
 }
 
-.information-board {
-  background: darken($ui-base-color, 4%);
-  padding: 20px 0;
-
-  .container-alt {
-    position: relative;
-    padding-right: 280px + 15px;
-  }
-
-  &__sections {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-
-  &__section {
-    flex: 1 0 0;
-    font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    line-height: 28px;
-    color: $primary-text-color;
-    text-align: right;
-    padding: 10px 15px;
-
-    span,
-    strong {
-      display: block;
-    }
-
-    span {
-      &:last-child {
-        color: $secondary-text-color;
-      }
-    }
-
-    strong {
-      font-family: $font-display, sans-serif;
-      font-weight: 500;
-      font-size: 32px;
-      line-height: 48px;
-    }
-
-    @media screen and (max-width: $column-breakpoint) {
-      text-align: center;
-    }
-  }
-
-  .panel {
-    position: absolute;
-    width: 280px;
-    box-sizing: border-box;
-    background: darken($ui-base-color, 8%);
-    padding: 20px;
-    padding-top: 10px;
-    border-radius: 4px 4px 0 0;
-    right: 0;
-    bottom: -40px;
-
-    .panel-header {
-      font-family: $font-display, sans-serif;
-      font-size: 14px;
-      line-height: 24px;
-      font-weight: 500;
-      color: $darker-text-color;
-      padding-bottom: 5px;
-      margin-bottom: 15px;
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      a,
-      span {
-        font-weight: 400;
-        color: darken($darker-text-color, 10%);
-      }
-
-      a {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .owner {
-    text-align: center;
-
-    .avatar {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto;
-      margin-bottom: 15px;
-
-      img {
-        display: block;
-        width: 80px;
-        height: 80px;
-        border-radius: 48px;
-      }
-    }
-
-    .name {
-      font-size: 14px;
-
-      a {
-        display: block;
-        color: $primary-text-color;
-        text-decoration: none;
-
-        &:hover {
-          .display_name {
-            text-decoration: underline;
-          }
-        }
-      }
-
-      .username {
-        display: block;
-        color: $darker-text-color;
-      }
-    }
-  }
-}
+.rules-list {
+  font-size: 15px;
+  line-height: 22px;
+  color: $primary-text-color;
+  counter-reset: list-counter;
 
-.landing-page {
-  p,
   li {
-    font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 30px;
-    margin-bottom: 12px;
-    color: $darker-text-color;
-
-    a {
-      color: $highlight-text-color;
-      text-decoration: underline;
-    }
-  }
-
-  em {
-    display: inline;
-    margin: 0;
-    padding: 0;
-    font-weight: 700;
-    background: transparent;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: lighten($darker-text-color, 10%);
-  }
-
-  h1 {
-    font-family: $font-display, sans-serif;
-    font-size: 26px;
-    line-height: 30px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-
-    small {
-      font-family: $font-sans-serif, sans-serif;
-      display: block;
-      font-size: 18px;
-      font-weight: 400;
-      color: lighten($darker-text-color, 10%);
-    }
-  }
-
-  h2 {
-    font-family: $font-display, sans-serif;
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h3 {
-    font-family: $font-display, sans-serif;
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h4 {
-    font-family: $font-display, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h5 {
-    font-family: $font-display, sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  h6 {
-    font-family: $font-display, sans-serif;
-    font-size: 12px;
-    line-height: 24px;
+    position: relative;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    padding: 1em 1.75em;
+    padding-left: 3em;
     font-weight: 500;
-    margin-bottom: 20px;
-    color: $secondary-text-color;
-  }
-
-  ul,
-  ol {
-    margin-left: 20px;
-
-    &[type='a'] {
-      list-style-type: lower-alpha;
-    }
-
-    &[type='i'] {
-      list-style-type: lower-roman;
-    }
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  li > ol,
-  li > ul {
-    margin-top: 6px;
-  }
-
-  hr {
-    width: 100%;
-    height: 0;
-    border: 0;
-    border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
-    margin: 20px 0;
-
-    &.spacer {
-      height: 1px;
-      border: 0;
-    }
-  }
-
-  &__information,
-  &__forms {
-    padding: 20px;
-  }
-
-  &__call-to-action {
-    background: $ui-base-color;
-    border-radius: 4px;
-    padding: 25px 40px;
-    overflow: hidden;
-    box-sizing: border-box;
-
-    .row {
-      width: 100%;
-      display: flex;
-      flex-direction: row-reverse;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .row__information-board {
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-
-      .information-board__section {
-        flex: 1 0 auto;
-        padding: 0 10px;
-      }
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        width: 100%;
-        justify-content: space-between;
-      }
-    }
-
-    .row__mascot {
-      flex: 1;
-      margin: 10px -50px 0 0;
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        display: none;
-      }
-    }
-  }
-
-  &__logo {
-    margin-right: 20px;
-
-    img {
-      height: 50px;
-      width: auto;
-      mix-blend-mode: lighten;
-    }
-  }
-
-  &__information {
-    padding: 45px 40px;
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    strong {
+    counter-increment: list-counter;
+
+    &::before {
+      content: counter(list-counter);
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      background: $highlight-text-color;
+      color: $ui-base-color;
+      border-radius: 50%;
+      width: 4ch;
+      height: 4ch;
       font-weight: 500;
-      color: lighten($darker-text-color, 10%);
-    }
-
-    .account {
-      border-bottom: 0;
-      padding: 0;
-
-      &__display-name {
-        align-items: center;
-        display: flex;
-        margin-right: 5px;
-      }
-
-      div.account__display-name {
-        &:hover {
-          .display-name strong {
-            text-decoration: none;
-          }
-        }
-
-        .account__avatar {
-          cursor: default;
-        }
-      }
-
-      &__avatar-wrapper {
-        margin-left: 0;
-        flex: 0 0 auto;
-      }
-
-      .display-name {
-        font-size: 15px;
-
-        &__account {
-          font-size: 14px;
-        }
-      }
-    }
-
-    @media screen and (max-width: $small-breakpoint) {
-      .contact {
-        margin-top: 30px;
-      }
-    }
-
-    @media screen and (max-width: $column-breakpoint) {
-      padding: 25px 20px;
-    }
-  }
-
-  &__information,
-  &__forms,
-  #mastodon-timeline {
-    box-sizing: border-box;
-    background: $ui-base-color;
-    border-radius: 4px;
-    box-shadow: 0 0 6px rgba($black, 0.1);
-  }
-
-  &__mascot {
-    height: 104px;
-    position: relative;
-    left: -40px;
-    bottom: 25px;
-
-    img {
-      height: 190px;
-      width: auto;
-    }
-  }
-
-  &__short-description {
-    .row {
       display: flex;
-      flex-wrap: wrap;
+      justify-content: center;
       align-items: center;
-      margin-bottom: 40px;
-    }
-
-    @media screen and (max-width: $column-breakpoint) {
-      .row {
-        margin-bottom: 20px;
-      }
-    }
-
-    p a {
-      color: $secondary-text-color;
-    }
-
-    h1 {
-      font-weight: 500;
-      color: $primary-text-color;
-      margin-bottom: 0;
-
-      small {
-        color: $darker-text-color;
-
-        span {
-          color: $secondary-text-color;
-        }
-      }
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__hero {
-    margin-bottom: 10px;
-
-    img {
-      display: block;
-      margin: 0;
-      max-width: 100%;
-      height: auto;
-      border-radius: 4px;
-    }
-  }
-
-  @media screen and (max-width: 840px) {
-    .information-board {
-      .container-alt {
-        padding-right: 20px;
-      }
-
-      .panel {
-        position: static;
-        margin-top: 20px;
-        width: 100%;
-        border-radius: 4px;
-
-        .panel-header {
-          text-align: center;
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 675px) {
-    .header-wrapper {
-      padding-top: 0;
-
-      &.compact {
-        padding-bottom: 0;
-      }
-
-      &.compact .hero .heading {
-        text-align: initial;
-      }
     }
 
-    .header .container-alt,
-    .features .container-alt {
-      display: block;
-    }
-  }
-
-  .cta {
-    margin: 20px;
-  }
-}
-
-.landing {
-  margin-bottom: 100px;
-
-  @media screen and (max-width: 738px) {
-    margin-bottom: 0;
-  }
-
-  &__brand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 50px;
-
-    .logo {
-      fill: $primary-text-color;
-      height: 52px;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding: 0;
-      margin-bottom: 30px;
-    }
-  }
-
-  .directory {
-    margin-top: 30px;
-    background: transparent;
-    box-shadow: none;
-    border-radius: 0;
-  }
-
-  .hero-widget {
-    margin-top: 30px;
-    margin-bottom: 0;
-
-    h4 {
-      padding: 10px;
-      text-transform: uppercase;
-      font-weight: 700;
-      font-size: 13px;
-      color: $darker-text-color;
-    }
-
-    &__text {
-      border-radius: 0;
-      padding-bottom: 0;
-    }
-
-    &__footer {
-      background: $ui-base-color;
-      padding: 10px;
-      border-radius: 0 0 4px 4px;
-      display: flex;
-
-      &__column {
-        flex: 1 1 50%;
-        overflow-x: hidden;
-      }
-    }
-
-    .account {
-      padding: 10px 0;
-      border-bottom: 0;
-
-      .account__display-name {
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    &__counters__wrapper {
-      display: flex;
-    }
-
-    &__counter {
-      padding: 10px;
-      width: 50%;
-
-      strong {
-        font-family: $font-display, sans-serif;
-        font-size: 15px;
-        font-weight: 700;
-        display: block;
-      }
-
-      span {
-        font-size: 14px;
-        color: $darker-text-color;
-      }
-    }
-  }
-
-  .simple_form .user_agreement .label_input > label {
-    font-weight: 400;
-    color: $darker-text-color;
-  }
-
-  .simple_form p.lead {
-    color: $darker-text-color;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
-    margin-bottom: 25px;
-  }
-
-  &__grid {
-    max-width: 960px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-    grid-gap: 30px;
-
-    @media screen and (max-width: 738px) {
-      grid-template-columns: minmax(0, 100%);
-      grid-gap: 10px;
-
-      &__column-login {
-        grid-row: 1;
-        display: flex;
-        flex-direction: column;
-
-        .box-widget {
-          order: 2;
-          flex: 0 0 auto;
-        }
-
-        .hero-widget {
-          margin-top: 0;
-          margin-bottom: 10px;
-          order: 1;
-          flex: 0 0 auto;
-        }
-      }
-
-      &__column-registration {
-        grid-row: 2;
-      }
-
-      .directory {
-        margin-top: 10px;
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      grid-gap: 0;
-
-      .hero-widget {
-        display: block;
-        margin-bottom: 0;
-        box-shadow: none;
-
-        &__img,
-        &__img img,
-        &__footer {
-          border-radius: 0;
-        }
-      }
-
-      .hero-widget,
-      .box-widget,
-      .directory__tag {
-        border-bottom: 1px solid lighten($ui-base-color, 8%);
-      }
-
-      .directory {
-        margin-top: 0;
-
-        &__tag {
-          margin-bottom: 0;
-
-          & > a,
-          & > div {
-            border-radius: 0;
-            box-shadow: none;
-          }
-
-          &:last-child {
-            border-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-.brand {
-  position: relative;
-  text-decoration: none;
-}
-
-.brand__tagline {
-  display: block;
-  position: absolute;
-  bottom: -10px;
-  left: 50px;
-  width: 300px;
-  color: $ui-primary-color;
-  text-decoration: none;
-  font-size: 14px;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    position: static;
-    width: auto;
-    margin-top: 20px;
-    color: $dark-text-color;
-  }
-}
-
-.rules-list {
-  background: darken($ui-base-color, 2%);
-  border: 1px solid darken($ui-base-color, 8%);
-  border-radius: 4px;
-  padding: 0.5em 2.5em !important;
-  margin-top: 1.85em !important;
-
-  li {
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-    color: $dark-text-color;
-    padding: 1em;
-
     &:last-child {
       border-bottom: 0;
     }
   }
-
-  &__text {
-    color: $primary-text-color;
-  }
 }
diff --git a/app/javascript/styles/mastodon/compact_header.scss b/app/javascript/styles/mastodon/compact_header.scss
deleted file mode 100644
index 4980ab5f1..000000000
--- a/app/javascript/styles/mastodon/compact_header.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.compact-header {
-  h1 {
-    font-size: 24px;
-    line-height: 28px;
-    color: $darker-text-color;
-    font-weight: 500;
-    margin-bottom: 20px;
-    padding: 0 10px;
-    word-wrap: break-word;
-
-    @media screen and (max-width: 740px) {
-      text-align: center;
-      padding: 20px 10px 0;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    small {
-      font-weight: 400;
-      color: $secondary-text-color;
-    }
-
-    img {
-      display: inline-block;
-      margin-bottom: -5px;
-      margin-right: 15px;
-      width: 36px;
-      height: 36px;
-    }
-  }
-}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a8919b9cb..d4657d180 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3261,6 +3261,7 @@ $ui-header-height: 55px;
     padding: 10px;
     padding-top: 20px;
     z-index: 1;
+    font-size: 13px;
 
     ul {
       margin-bottom: 10px;
@@ -3272,7 +3273,6 @@ $ui-header-height: 55px;
 
     p {
       color: $dark-text-color;
-      font-size: 13px;
       margin-bottom: 20px;
 
       a {
@@ -8266,79 +8266,202 @@ noscript {
 
   &__body {
     margin-top: 20px;
-    color: $secondary-text-color;
-    font-size: 15px;
-    line-height: 22px;
+  }
+}
 
-    h1,
-    p,
-    ul,
-    ol {
-      margin-bottom: 20px;
-    }
+.prose {
+  color: $secondary-text-color;
+  font-size: 15px;
+  line-height: 22px;
 
-    ul {
-      list-style: disc;
-    }
+  p,
+  ul,
+  ol {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
 
-    ol {
-      list-style: decimal;
-    }
+  img {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
 
-    ul,
-    ol {
-      padding-left: 1em;
+  video {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  figure {
+    margin-top: 2em;
+    margin-bottom: 2em;
+
+    figcaption {
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
     }
+  }
 
-    li {
-      margin-bottom: 10px;
+  figure > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
-      &::marker {
-        color: $darker-text-color;
-      }
+  h1 {
+    font-size: 1.5em;
+    margin-top: 0;
+    margin-bottom: 1em;
+    line-height: 1.33;
+  }
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+  h2 {
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
 
-    h1 {
-      color: $primary-text-color;
-      font-size: 19px;
-      line-height: 24px;
-      font-weight: 700;
-      margin-top: 30px;
+  ol {
+    counter-reset: list-counter;
+  }
 
-      &:first-child {
-        margin-top: 0;
-      }
-    }
+  li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
 
-    strong {
-      font-weight: 700;
-      color: $primary-text-color;
-    }
+  ol > li {
+    counter-increment: list-counter;
 
-    em {
-      font-style: italic;
+    &::before {
+      content: counter(list-counter) ".";
+      position: absolute;
+      left: 0;
     }
+  }
 
-    a {
-      color: $highlight-text-color;
-      text-decoration: underline;
+  ul > li::before {
+    content: "";
+    position: absolute;
+    background-color: $darker-text-color;
+    border-radius: 50%;
+    width: 0.375em;
+    height: 0.375em;
+    top: 0.5em;
+    left: 0.25em;
+  }
 
-      &:focus,
-      &:hover,
-      &:active {
-        text-decoration: none;
-      }
-    }
+  ul > li,
+  ol > li {
+    position: relative;
+    padding-left: 1.75em;
+  }
 
-    hr {
-      border: 1px solid lighten($ui-base-color, 4%);
-      margin: 30px 0;
+  & > ul > li p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  & > ul > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ul > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  & > ol > li > *:first-child {
+    margin-top: 1.25em;
+  }
+
+  & > ol > li > *:last-child {
+    margin-bottom: 1.25em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b {
+    color: $primary-text-color;
+    font-weight: 700;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: underline;
+
+    &:focus,
+    &:hover,
+    &:active {
+      text-decoration: none;
     }
   }
+
+  code {
+    font-size: 0.875em;
+    background: darken($ui-base-color, 8%);
+    border-radius: 4px;
+    padding: 0.2em 0.3em;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid lighten($ui-base-color, 4%);
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  hr + * {
+    margin-top: 0;
+  }
+
+  h2 + * {
+    margin-top: 0;
+  }
+
+  h3 + * {
+    margin-top: 0;
+  }
+
+  h4 + *,
+  h5 + *,
+  h6 + * {
+    margin-top: 0;
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 .dismissable-banner {
@@ -8365,3 +8488,242 @@ noscript {
     justify-content: center;
   }
 }
+
+.image {
+  position: relative;
+  overflow: hidden;
+
+  &__preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.loaded &__preview {
+    display: none;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: 0;
+    background: transparent;
+    opacity: 0;
+  }
+
+  &.loaded img {
+    opacity: 1;
+  }
+}
+
+.about {
+  padding: 20px;
+
+  @media screen and (min-width: $no-gap-breakpoint) {
+    border-radius: 4px;
+  }
+
+  &__header {
+    margin-bottom: 30px;
+
+    &__hero {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1.9;
+      background: lighten($ui-base-color, 4%);
+      border-radius: 8px;
+      margin-bottom: 30px;
+    }
+
+    h1,
+    p {
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      line-height: 1.5;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 400;
+      color: $darker-text-color;
+    }
+  }
+
+  &__meta {
+    background: lighten($ui-base-color, 4%);
+    border-radius: 4px;
+    display: flex;
+    margin-bottom: 30px;
+    font-size: 15px;
+
+    &__column {
+      box-sizing: border-box;
+      width: 50%;
+      padding: 20px;
+    }
+
+    &__divider {
+      width: 0;
+      border: 0;
+      border-style: solid;
+      border-color: lighten($ui-base-color, 8%);
+      border-left-width: 1px;
+      min-height: calc(100% - 60px);
+      flex: 0 0 auto;
+    }
+
+    h4 {
+      font-size: 15px;
+      text-transform: uppercase;
+      color: $darker-text-color;
+      font-weight: 500;
+      margin-bottom: 20px;
+    }
+
+    @media screen and (max-width: 600px) {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+
+    .layout-multiple-columns & {
+      display: block;
+
+      h4 {
+        text-align: center;
+      }
+
+      &__column {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &__divider {
+        min-height: 0;
+        width: 100%;
+        border-left-width: 0;
+        border-top-width: 1px;
+      }
+    }
+  }
+
+  &__mail {
+    color: $primary-text-color;
+    text-decoration: none;
+    font-weight: 500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .getting-started__footer {
+    padding: 0;
+    margin-top: 60px;
+    text-align: center;
+    font-size: 15px;
+    line-height: 22px;
+
+    @media screen and (min-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  .account__avatar-wrapper {
+    margin-left: 0;
+  }
+
+  .account__relationship {
+    display: none;
+  }
+
+  &__section {
+    margin-bottom: 10px;
+
+    &__title {
+      font-size: 17px;
+      font-weight: 600;
+      line-height: 22px;
+      padding: 20px;
+      border-radius: 4px;
+      background: lighten($ui-base-color, 4%);
+      color: $highlight-text-color;
+      cursor: pointer;
+    }
+
+    &.active &__title {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__body {
+      border: 1px solid lighten($ui-base-color, 4%);
+      border-top: 0;
+      padding: 20px;
+      font-size: 15px;
+      line-height: 22px;
+    }
+  }
+
+  &__domain-blocks {
+    margin-top: 30px;
+    width: 100%;
+    border-collapse: collapse;
+    break-inside: auto;
+
+    th {
+      text-align: left;
+      font-weight: 500;
+      color: $darker-text-color;
+    }
+
+    thead tr,
+    tbody tr {
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    tbody tr:last-child {
+      border-bottom: 0;
+    }
+
+    th,
+    td {
+      padding: 8px;
+    }
+  }
+}
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 01ee56219..8e5ed03f0 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -30,7 +30,6 @@
       outline: 0;
       padding: 12px 16px;
       line-height: 32px;
-      font-family: $font-display, sans-serif;
       font-weight: 500;
       font-size: 14px;
     }
diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index c21fc9eba..f25765d1d 100644
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -38,7 +38,6 @@
     font-weight: 500;
     font-size: 24px;
     color: $primary-text-color;
-    font-family: $font-display, sans-serif;
     margin-bottom: 20px;
     line-height: 30px;
   }
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 3d67f3b56..69a0b22d6 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -139,18 +139,9 @@ code {
   }
 
   .rules-list {
-    list-style: decimal;
     font-size: 17px;
     line-height: 22px;
-    font-weight: 500;
-    background: transparent;
-    border: 0;
-    padding: 0.5em 1em !important;
     margin-bottom: 30px;
-
-    li {
-      border-color: lighten($ui-base-color, 8%);
-    }
   }
 
   .hint {
@@ -603,41 +594,6 @@ code {
       }
     }
   }
-
-  &__overlay-area {
-    position: relative;
-
-    &__blurred form {
-      filter: blur(2px);
-    }
-
-    &__overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: rgba($ui-base-color, 0.65);
-      border-radius: 4px;
-      margin-left: -4px;
-      margin-top: -4px;
-      padding: 4px;
-
-      &__content {
-        text-align: center;
-
-        &.rich-formatting {
-          &,
-          p {
-            color: $primary-text-color;
-          }
-        }
-      }
-    }
-  }
 }
 
 .block-icon {
@@ -908,24 +864,7 @@ code {
   }
 }
 
-.table-form {
-  p {
-    margin-bottom: 15px;
-
-    strong {
-      font-weight: 500;
-
-      @each $lang in $cjk-langs {
-        &:lang(#{$lang}) {
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
-
-.simple_form,
-.table-form {
+.simple_form {
   .warning {
     box-sizing: border-box;
     background: rgba($error-value-color, 0.5);
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 43284eb48..260a97c6d 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -112,13 +112,6 @@
   }
 }
 
-.box-widget {
-  padding: 20px;
-  border-radius: 4px;
-  background: $ui-base-color;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-}
-
 .placeholder-widget {
   padding: 16px;
   border-radius: 4px;
@@ -128,47 +121,6 @@
   margin-bottom: 10px;
 }
 
-.contact-widget {
-  min-height: 100%;
-  font-size: 15px;
-  color: $darker-text-color;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  padding: 0;
-
-  h4 {
-    padding: 10px;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 13px;
-    color: $darker-text-color;
-  }
-
-  .account {
-    border-bottom: 0;
-    padding: 10px 0;
-    padding-top: 5px;
-  }
-
-  & > a {
-    display: inline-block;
-    padding: 10px;
-    padding-top: 0;
-    color: $darker-text-color;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-}
-
 .moved-account-widget {
   padding: 15px;
   padding-bottom: 20px;
@@ -249,37 +201,6 @@
   margin-bottom: 10px;
 }
 
-.page-header {
-  background: lighten($ui-base-color, 8%);
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  border-radius: 4px;
-  padding: 60px 15px;
-  text-align: center;
-  margin: 10px 0;
-
-  h1 {
-    color: $primary-text-color;
-    font-size: 36px;
-    line-height: 1.1;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
-
-  p {
-    font-size: 15px;
-    color: $darker-text-color;
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    margin-top: 0;
-    background: lighten($ui-base-color, 4%);
-
-    h1 {
-      font-size: 24px;
-    }
-  }
-}
-
 .directory {
   background: $ui-base-color;
   border-radius: 4px;
@@ -366,34 +287,6 @@
   }
 }
 
-.avatar-stack {
-  display: flex;
-  justify-content: flex-end;
-
-  .account__avatar {
-    flex: 0 0 auto;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    position: relative;
-    margin-left: -10px;
-    background: darken($ui-base-color, 8%);
-    border: 2px solid $ui-base-color;
-
-    &:nth-child(1) {
-      z-index: 1;
-    }
-
-    &:nth-child(2) {
-      z-index: 2;
-    }
-
-    &:nth-child(3) {
-      z-index: 3;
-    }
-  }
-}
-
 .accounts-table {
   width: 100%;
 
@@ -495,11 +388,7 @@
 
 .moved-account-widget,
 .memoriam-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
-.directory,
-.page-header {
+.directory {
   @media screen and (max-width: $no-gap-breakpoint) {
     margin-bottom: 0;
     box-shadow: none;
@@ -507,88 +396,6 @@
   }
 }
 
-$maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
-
-.statuses-grid {
-  min-height: 600px;
-
-  @media screen and (max-width: 640px) {
-    width: 100% !important; // Masonry layout is unnecessary at this width
-  }
-
-  &__item {
-    width: math.div(960px - 20px, 3);
-
-    @media screen and (max-width: $fluid-breakpoint) {
-      width: math.div(940px - 20px, 3);
-    }
-
-    @media screen and (max-width: 640px) {
-      width: 100%;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      width: 100vw;
-    }
-  }
-
-  .detailed-status {
-    border-radius: 4px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid lighten($ui-base-color, 16%);
-    }
-
-    &.compact {
-      .detailed-status__meta {
-        margin-top: 15px;
-      }
-
-      .status__content {
-        font-size: 15px;
-        line-height: 20px;
-
-        .emojione {
-          width: 20px;
-          height: 20px;
-          margin: -3px 0 0;
-        }
-
-        .status__content__spoiler-link {
-          line-height: 20px;
-          margin: 0;
-        }
-      }
-
-      .media-gallery,
-      .status-card,
-      .video-player {
-        margin-top: 15px;
-      }
-    }
-  }
-}
-
-.notice-widget {
-  margin-bottom: 10px;
-  color: $darker-text-color;
-
-  p {
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-.notice-widget,
 .placeholder-widget {
   a {
     text-decoration: none;
@@ -602,37 +409,3 @@ $fluid-breakpoint: $maximum-width + 20px;
     }
   }
 }
-
-.table-of-contents {
-  background: darken($ui-base-color, 4%);
-  min-height: 100%;
-  font-size: 14px;
-  border-radius: 4px;
-
-  li a {
-    display: block;
-    font-weight: 500;
-    padding: 15px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: none;
-    color: $primary-text-color;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-
-  li:last-child a {
-    border-bottom: 0;
-  }
-
-  li ul {
-    padding-left: 20px;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
-  }
-}
diff --git a/app/models/domain_block.rb b/app/models/domain_block.rb
index b08687787..ad1dc2a38 100644
--- a/app/models/domain_block.rb
+++ b/app/models/domain_block.rb
@@ -28,8 +28,8 @@ class DomainBlock < ApplicationRecord
   delegate :count, to: :accounts, prefix: true
 
   scope :matches_domain, ->(value) { where(arel_table[:domain].matches("%#{value}%")) }
-  scope :with_user_facing_limitations, -> { where(severity: [:silence, :suspend]).or(where(reject_media: true)) }
-  scope :by_severity, -> { order(Arel.sql('(CASE severity WHEN 0 THEN 1 WHEN 1 THEN 2 WHEN 2 THEN 0 END), reject_media, domain')) }
+  scope :with_user_facing_limitations, -> { where(severity: [:silence, :suspend]) }
+  scope :by_severity, -> { order(Arel.sql('(CASE severity WHEN 0 THEN 1 WHEN 1 THEN 2 WHEN 2 THEN 0 END), domain')) }
 
   def to_log_human_identifier
     domain
diff --git a/app/models/extended_description.rb b/app/models/extended_description.rb
new file mode 100644
index 000000000..6e5c0d1b6
--- /dev/null
+++ b/app/models/extended_description.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class ExtendedDescription < ActiveModelSerializers::Model
+  attributes :updated_at, :text
+
+  def self.current
+    custom = Setting.find_by(var: 'site_extended_description')
+
+    if custom&.value.present?
+      new(text: custom.value, updated_at: custom.updated_at)
+    else
+      new
+    end
+  end
+end
diff --git a/app/serializers/rest/domain_block_serializer.rb b/app/serializers/rest/domain_block_serializer.rb
new file mode 100644
index 000000000..678463e13
--- /dev/null
+++ b/app/serializers/rest/domain_block_serializer.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class REST::DomainBlockSerializer < ActiveModel::Serializer
+  attributes :domain, :digest, :severity, :comment
+
+  def domain
+    object.public_domain
+  end
+
+  def digest
+    object.domain_digest
+  end
+
+  def comment
+    object.public_comment if instance_options[:with_comment]
+  end
+end
diff --git a/app/serializers/rest/extended_description_serializer.rb b/app/serializers/rest/extended_description_serializer.rb
new file mode 100644
index 000000000..0c3649033
--- /dev/null
+++ b/app/serializers/rest/extended_description_serializer.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class REST::ExtendedDescriptionSerializer < ActiveModel::Serializer
+  attributes :updated_at, :content
+
+  def updated_at
+    object.updated_at&.iso8601
+  end
+
+  def content
+    object.text
+  end
+end
diff --git a/app/views/about/_domain_blocks.html.haml b/app/views/about/_domain_blocks.html.haml
deleted file mode 100644
index 35a30f16e..000000000
--- a/app/views/about/_domain_blocks.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-%table
-  %thead
-    %tr
-      %th= t('about.unavailable_content_description.domain')
-      %th= t('about.unavailable_content_description.reason')
-  %tbody
-    - domain_blocks.each do |domain_block|
-      %tr
-        %td.nowrap
-          %span{ title: "SHA-256: #{domain_block.domain_digest}" }= domain_block.public_domain
-        %td
-          = domain_block.public_comment if display_blocks_rationale?
diff --git a/app/views/about/more.html.haml b/app/views/about/more.html.haml
deleted file mode 100644
index a5a10b620..000000000
--- a/app/views/about/more.html.haml
+++ /dev/null
@@ -1,96 +0,0 @@
-- content_for :page_title do
-  = site_hostname
-
-- content_for :header_tags do
-  = javascript_pack_tag 'public', crossorigin: 'anonymous'
-  = render partial: 'shared/og'
-
-.grid-4
-  .column-0
-    .public-account-header.public-account-header--no-bar
-      .public-account-header__image
-        = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.title, class: 'parallax'
-
-  .column-1
-    .landing-page__call-to-action{ dir: 'ltr' }
-      .row
-        .row__information-board
-          .information-board__section
-            %span= t 'about.user_count_before'
-            %strong= friendly_number_to_human @instance_presenter.user_count
-            %span= t 'about.user_count_after', count: @instance_presenter.user_count
-          .information-board__section
-            %span= t 'about.status_count_before'
-            %strong= friendly_number_to_human @instance_presenter.status_count
-            %span= t 'about.status_count_after', count: @instance_presenter.status_count
-        .row__mascot
-          .landing-page__mascot
-            = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'), alt: ''
-
-  .column-2
-    .contact-widget
-      %h4= t 'about.administered_by'
-
-      = account_link_to(@instance_presenter.contact.account)
-
-      - if @instance_presenter.contact.email.present?
-        %h4
-          = succeed ':' do
-            = t 'about.contact'
-
-        = mail_to @instance_presenter.contact.email, nil, title: @instance_presenter.contact.email
-
-  .column-3
-    = render 'application/flashes'
-
-    - if @contents.blank? && @rules.empty? && (!display_blocks? || @blocks&.empty?)
-      = nothing_here
-    - else
-      .box-widget
-        .rich-formatting
-          - unless @rules.empty?
-            %h2#rules= t('about.rules')
-
-            %p= t('about.rules_html')
-
-            %ol.rules-list
-              - @rules.each do |rule|
-                %li
-                  .rules-list__text= rule.text
-
-          = @contents.html_safe
-
-          - if display_blocks? && !@blocks.empty?
-            %h2#unavailable-content= t('about.unavailable_content')
-
-            %p= t('about.unavailable_content_html')
-
-            - if (blocks = @blocks.select(&:reject_media?)) && !blocks.empty?
-              %h3= t('about.unavailable_content_description.rejecting_media_title')
-              %p= t('about.unavailable_content_description.rejecting_media')
-              = render partial: 'domain_blocks', locals: { domain_blocks: blocks }
-            - if (blocks = @blocks.select(&:silence?)) && !blocks.empty?
-              %h3= t('about.unavailable_content_description.silenced_title')
-              %p= t('about.unavailable_content_description.silenced')
-              = render partial: 'domain_blocks', locals: { domain_blocks: blocks }
-            - if (blocks = @blocks.select(&:suspend?)) && !blocks.empty?
-              %h3= t('about.unavailable_content_description.suspended_title')
-              %p= t('about.unavailable_content_description.suspended')
-              = render partial: 'domain_blocks', locals: { domain_blocks: blocks }
-
-  .column-4
-    %ul.table-of-contents
-      - unless @rules.empty?
-        %li= link_to t('about.rules'), '#rules'
-
-      - @table_of_contents.each do |item|
-        %li
-          = link_to item.title, "##{item.anchor}"
-
-          - unless item.children.empty?
-            %ul
-              - item.children.each do |sub_item|
-                %li= link_to sub_item.title, "##{sub_item.anchor}"
-
-      - if display_blocks? && !@blocks.empty?
-        %li= link_to t('about.unavailable_content'), '#unavailable-content'
diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
new file mode 100644
index 000000000..aff28b9a9
--- /dev/null
+++ b/app/views/about/show.html.haml
@@ -0,0 +1,4 @@
+- content_for :page_title do
+  = t('about.title')
+
+= render partial: 'shared/web_app'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8a70bd8ca..11716234e 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2,41 +2,15 @@
 en:
   about:
     about_mastodon_html: 'The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!'
-    about_this: About
-    administered_by: 'Administered by:'
     api: API
     apps: Mobile apps
-    contact: Contact
     contact_missing: Not set
     contact_unavailable: N/A
     documentation: Documentation
     hosted_on: Mastodon hosted on %{domain}
-    instance_actor_flash: |
-      This account is a virtual actor used to represent the server itself and not any individual user.
-      It is used for federation purposes and should not be blocked unless you want to block the whole instance, in which case you should use a domain block.
     privacy_policy: Privacy Policy
-    rules: Server rules
-    rules_html: 'Below is a summary of rules you need to follow if you want to have an account on this server of Mastodon:'
     source_code: Source code
-    status_count_after:
-      one: post
-      other: posts
-    status_count_before: Who published
-    unavailable_content: Moderated servers
-    unavailable_content_description:
-      domain: Server
-      reason: Reason
-      rejecting_media: 'Media files from these servers will not be processed or stored, and no thumbnails will be displayed, requiring manual click-through to the original file:'
-      rejecting_media_title: Filtered media
-      silenced: 'Posts from these servers will be hidden in public timelines and conversations, and no notifications will be generated from their users interactions, unless you are following them:'
-      silenced_title: Limited servers
-      suspended: 'No data from these servers will be processed, stored or exchanged, making any interaction or communication with users from these servers impossible:'
-      suspended_title: Suspended servers
-    unavailable_content_html: Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.
-    user_count_after:
-      one: user
-      other: users
-    user_count_before: Home to
+    title: About
     what_is_mastodon: What is Mastodon?
   accounts:
     choices_html: "%{name}'s choices:"
diff --git a/config/routes.rb b/config/routes.rb
index e6098cd17..29ec0f8a5 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -487,7 +487,9 @@ Rails.application.routes.draw do
       resource :instance, only: [:show] do
         resources :peers, only: [:index], controller: 'instances/peers'
         resources :rules, only: [:index], controller: 'instances/rules'
+        resources :domain_blocks, only: [:index], controller: 'instances/domain_blocks'
         resource :privacy_policy, only: [:show], controller: 'instances/privacy_policies'
+        resource :extended_description, only: [:show], controller: 'instances/extended_descriptions'
         resource :activity, only: [:show], controller: 'instances/activity'
       end
 
@@ -642,8 +644,8 @@ Rails.application.routes.draw do
 
   get '/web/(*any)', to: 'home#index', as: :web
 
-  get '/about',        to: redirect('/')
-  get '/about/more',   to: 'about#more'
+  get '/about',        to: 'about#show'
+  get '/about/more',   to: redirect('/about')
 
   get '/privacy-policy', to: 'privacy#show', as: :privacy_policy
   get '/terms',          to: redirect('/privacy-policy')
diff --git a/spec/controllers/about_controller_spec.rb b/spec/controllers/about_controller_spec.rb
index 20069e413..97143ec43 100644
--- a/spec/controllers/about_controller_spec.rb
+++ b/spec/controllers/about_controller_spec.rb
@@ -3,13 +3,9 @@ require 'rails_helper'
 RSpec.describe AboutController, type: :controller do
   render_views
 
-  describe 'GET #more' do
+  describe 'GET #show' do
     before do
-      get :more
-    end
-
-    it 'assigns @instance_presenter' do
-      expect(assigns(:instance_presenter)).to be_kind_of InstancePresenter
+      get :show
     end
 
     it 'returns http success' do
-- 
cgit 


From 4c7b5fb6c1787438ef130d9aecd5d0a4d54d08a9 Mon Sep 17 00:00:00 2001
From: Takeshi Umeda <noel.yoshiba@gmail.com>
Date: Sun, 16 Oct 2022 15:43:59 +0900
Subject: Add featured tags selector for WebUI (#19358)

* Add featured tags selector for WebUI

* Add title to tag count
---
 app/javascript/mastodon/actions/featured_tags.js   | 34 +++++++++++
 app/javascript/mastodon/actions/timelines.js       |  4 +-
 .../features/account/components/featured_tags.js   | 71 ++++++++++++++++++++++
 .../features/account_timeline/components/header.js | 20 +++---
 .../mastodon/features/account_timeline/index.js    | 26 +++++---
 app/javascript/mastodon/features/ui/index.js       |  1 +
 app/javascript/mastodon/locales/en.json            |  3 +
 app/javascript/mastodon/reducers/user_lists.js     | 28 ++++++++-
 app/javascript/styles/mastodon/components.scss     | 27 ++++++++
 9 files changed, 194 insertions(+), 20 deletions(-)
 create mode 100644 app/javascript/mastodon/actions/featured_tags.js
 create mode 100644 app/javascript/mastodon/features/account/components/featured_tags.js

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/actions/featured_tags.js b/app/javascript/mastodon/actions/featured_tags.js
new file mode 100644
index 000000000..18bb61539
--- /dev/null
+++ b/app/javascript/mastodon/actions/featured_tags.js
@@ -0,0 +1,34 @@
+import api from '../api';
+
+export const FEATURED_TAGS_FETCH_REQUEST = 'FEATURED_TAGS_FETCH_REQUEST';
+export const FEATURED_TAGS_FETCH_SUCCESS = 'FEATURED_TAGS_FETCH_SUCCESS';
+export const FEATURED_TAGS_FETCH_FAIL    = 'FEATURED_TAGS_FETCH_FAIL';
+
+export const fetchFeaturedTags = (id) => (dispatch, getState) => {
+  if (getState().getIn(['user_lists', 'featured_tags', id, 'items'])) {
+    return;
+  }
+
+  dispatch(fetchFeaturedTagsRequest(id));
+
+  api(getState).get(`/api/v1/accounts/${id}/featured_tags`)
+    .then(({ data }) => dispatch(fetchFeaturedTagsSuccess(id, data)))
+    .catch(err => dispatch(fetchFeaturedTagsFail(id, err)));
+};
+
+export const fetchFeaturedTagsRequest = (id) => ({
+  type: FEATURED_TAGS_FETCH_REQUEST,
+  id,
+});
+
+export const fetchFeaturedTagsSuccess = (id, tags) => ({
+  type: FEATURED_TAGS_FETCH_SUCCESS,
+  id,
+  tags,
+});
+
+export const fetchFeaturedTagsFail = (id, error) => ({
+  type: FEATURED_TAGS_FETCH_FAIL,
+  id,
+  error,
+});
diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js
index 44fedd5c2..a3434908f 100644
--- a/app/javascript/mastodon/actions/timelines.js
+++ b/app/javascript/mastodon/actions/timelines.js
@@ -143,8 +143,8 @@ export function fillTimelineGaps(timelineId, path, params = {}, done = noOp) {
 export const expandHomeTimeline            = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done);
 export const expandPublicTimeline          = ({ maxId, onlyMedia, onlyRemote } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, max_id: maxId, only_media: !!onlyMedia }, done);
 export const expandCommunityTimeline       = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done);
-export const expandAccountTimeline         = (accountId, { maxId, withReplies } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, max_id: maxId });
-export const expandAccountFeaturedTimeline = accountId => expandTimeline(`account:${accountId}:pinned`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true });
+export const expandAccountTimeline         = (accountId, { maxId, withReplies, tagged } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { exclude_replies: !withReplies, tagged, max_id: maxId });
+export const expandAccountFeaturedTimeline = (accountId, { tagged } = {}) => expandTimeline(`account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, `/api/v1/accounts/${accountId}/statuses`, { pinned: true, tagged });
 export const expandAccountMediaTimeline    = (accountId, { maxId } = {}) => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { max_id: maxId, only_media: true, limit: 40 });
 export const expandListTimeline            = (id, { maxId } = {}, done = noOp) => expandTimeline(`list:${id}`, `/api/v1/timelines/list/${id}`, { max_id: maxId }, done);
 export const expandHashtagTimeline         = (hashtag, { maxId, tags, local } = {}, done = noOp) => {
diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js
new file mode 100644
index 000000000..3d5b8b079
--- /dev/null
+++ b/app/javascript/mastodon/features/account/components/featured_tags.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import classNames from 'classnames';
+import Permalink from 'mastodon/components/permalink';
+import ShortNumber from 'mastodon/components/short_number';
+import { List as ImmutableList } from 'immutable';
+
+const messages = defineMessages({
+  hashtag_all: { id: 'account.hashtag_all', defaultMessage: 'All' },
+  hashtag_all_description: { id: 'account.hashtag_all_description', defaultMessage: 'All posts (deselect hashtags)' },
+  hashtag_select_description: { id: 'account.hashtag_select_description', defaultMessage: 'Select hashtag #{name}' },
+  statuses_counter: { id: 'account.statuses_counter', defaultMessage: '{count, plural, one {{counter} Post} other {{counter} Posts}}' },
+});
+
+const mapStateToProps = (state, { account }) => ({
+  featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class FeaturedTags extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    featuredTags: ImmutablePropTypes.list,
+    tagged: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+  };
+
+  render () {
+    const { account, featuredTags, tagged, intl } = this.props;
+
+    if (!account || featuredTags.isEmpty()) {
+      return null;
+    }
+
+    const suspended = account.get('suspended');
+
+    return (
+      <div className={classNames('account__header', 'advanced', { inactive: !!account.get('moved') })}>
+        <div className='account__header__extra'>
+          <div className='account__header__extra__hashtag-links'>
+            <Permalink key='all' className={classNames('account__hashtag-link', { active: !tagged })} title={intl.formatMessage(messages.hashtag_all_description)} href={account.get('url')} to={`/@${account.get('acct')}`}>{intl.formatMessage(messages.hashtag_all)}</Permalink>
+            {!suspended && featuredTags.map(featuredTag => {
+              const name  = featuredTag.get('name');
+              const url   = featuredTag.get('url');
+              const to    = `/@${account.get('acct')}/tagged/${name}`;
+              const desc  = intl.formatMessage(messages.hashtag_select_description, { name });
+              const count = featuredTag.get('statuses_count');
+
+              return (
+                <Permalink key={`#${name}`} className={classNames('account__hashtag-link', { active: this.context.router.history.location.pathname === to })} title={desc} href={url} to={to}>
+                  #{name} <span title={intl.formatMessage(messages.statuses_counter, { count: count, counter: intl.formatNumber(count) })}>({<ShortNumber value={count} />})</span>
+                </Permalink>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/account_timeline/components/header.js b/app/javascript/mastodon/features/account_timeline/components/header.js
index f31848f41..ea34a934a 100644
--- a/app/javascript/mastodon/features/account_timeline/components/header.js
+++ b/app/javascript/mastodon/features/account_timeline/components/header.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import InnerHeader from '../../account/components/header';
+import FeaturedTags from '../../account/components/featured_tags';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import MovedNote from './moved_note';
 import { FormattedMessage } from 'react-intl';
@@ -27,6 +28,7 @@ export default class Header extends ImmutablePureComponent {
     hideTabs: PropTypes.bool,
     domain: PropTypes.string.isRequired,
     hidden: PropTypes.bool,
+    tagged: PropTypes.string,
   };
 
   static contextTypes = {
@@ -102,7 +104,7 @@ export default class Header extends ImmutablePureComponent {
   }
 
   render () {
-    const { account, hidden, hideTabs } = this.props;
+    const { account, hidden, hideTabs, tagged } = this.props;
 
     if (account === null) {
       return null;
@@ -134,11 +136,15 @@ export default class Header extends ImmutablePureComponent {
         />
 
         {!(hideTabs || hidden) && (
-          <div className='account__section-headline'>
-            <NavLink exact to={`/@${account.get('acct')}`}><FormattedMessage id='account.posts' defaultMessage='Posts' /></NavLink>
-            <NavLink exact to={`/@${account.get('acct')}/with_replies`}><FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' /></NavLink>
-            <NavLink exact to={`/@${account.get('acct')}/media`}><FormattedMessage id='account.media' defaultMessage='Media' /></NavLink>
-          </div>
+          <Fragment>
+            <div className='account__section-headline'>
+              <NavLink exact to={`/@${account.get('acct')}`}><FormattedMessage id='account.posts' defaultMessage='Posts' /></NavLink>
+              <NavLink exact to={`/@${account.get('acct')}/with_replies`}><FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' /></NavLink>
+              <NavLink exact to={`/@${account.get('acct')}/media`}><FormattedMessage id='account.media' defaultMessage='Media' /></NavLink>
+            </div>
+
+            <FeaturedTags account={account} tagged={tagged} />
+          </Fragment>
         )}
       </div>
     );
diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js
index 5b592c5a7..51fb76f1f 100644
--- a/app/javascript/mastodon/features/account_timeline/index.js
+++ b/app/javascript/mastodon/features/account_timeline/index.js
@@ -18,10 +18,11 @@ import { me } from 'mastodon/initial_state';
 import { connectTimeline, disconnectTimeline } from 'mastodon/actions/timelines';
 import LimitedAccountHint from './components/limited_account_hint';
 import { getAccountHidden } from 'mastodon/selectors';
+import { fetchFeaturedTags } from '../../actions/featured_tags';
 
 const emptyList = ImmutableList();
 
-const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) => {
+const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = false }) => {
   const accountId = id || state.getIn(['accounts_map', acct]);
 
   if (!accountId) {
@@ -30,7 +31,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) =
     };
   }
 
-  const path = withReplies ? `${accountId}:with_replies` : accountId;
+  const path = withReplies ? `${accountId}:with_replies` : `${accountId}${tagged ? `:${tagged}` : ''}`;
 
   return {
     accountId,
@@ -38,7 +39,7 @@ const mapStateToProps = (state, { params: { acct, id }, withReplies = false }) =
     remoteUrl: state.getIn(['accounts', accountId, 'url']),
     isAccount: !!state.getIn(['accounts', accountId]),
     statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList),
-    featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], emptyList),
+    featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned${tagged ? `:${tagged}` : ''}`, 'items'], emptyList),
     isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
     hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
     suspended: state.getIn(['accounts', accountId, 'suspended'], false),
@@ -62,6 +63,7 @@ class AccountTimeline extends ImmutablePureComponent {
     params: PropTypes.shape({
       acct: PropTypes.string,
       id: PropTypes.string,
+      tagged: PropTypes.string,
     }).isRequired,
     accountId: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
@@ -80,15 +82,16 @@ class AccountTimeline extends ImmutablePureComponent {
   };
 
   _load () {
-    const { accountId, withReplies, dispatch } = this.props;
+    const { accountId, withReplies, params: { tagged }, dispatch } = this.props;
 
     dispatch(fetchAccount(accountId));
 
     if (!withReplies) {
-      dispatch(expandAccountFeaturedTimeline(accountId));
+      dispatch(expandAccountFeaturedTimeline(accountId, { tagged }));
     }
 
-    dispatch(expandAccountTimeline(accountId, { withReplies }));
+    dispatch(fetchFeaturedTags(accountId));
+    dispatch(expandAccountTimeline(accountId, { withReplies, tagged }));
 
     if (accountId === me) {
       dispatch(connectTimeline(`account:${me}`));
@@ -106,12 +109,17 @@ class AccountTimeline extends ImmutablePureComponent {
   }
 
   componentDidUpdate (prevProps) {
-    const { params: { acct }, accountId, dispatch } = this.props;
+    const { params: { acct, tagged }, accountId, withReplies, dispatch } = this.props;
 
     if (prevProps.accountId !== accountId && accountId) {
       this._load();
     } else if (prevProps.params.acct !== acct) {
       dispatch(lookupAccount(acct));
+    } else if (prevProps.params.tagged !== tagged) {
+      if (!withReplies) {
+        dispatch(expandAccountFeaturedTimeline(accountId, { tagged }));
+      }
+      dispatch(expandAccountTimeline(accountId, { withReplies, tagged }));
     }
 
     if (prevProps.accountId === me && accountId !== me) {
@@ -128,7 +136,7 @@ class AccountTimeline extends ImmutablePureComponent {
   }
 
   handleLoadMore = maxId => {
-    this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies }));
+    this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies, tagged: this.props.params.tagged }));
   }
 
   render () {
@@ -174,7 +182,7 @@ class AccountTimeline extends ImmutablePureComponent {
         <ColumnBackButton multiColumn={multiColumn} />
 
         <StatusList
-          prepend={<HeaderContainer accountId={this.props.accountId} hideTabs={forceEmptyState} />}
+          prepend={<HeaderContainer accountId={this.props.accountId} hideTabs={forceEmptyState} tagged={this.props.params.tagged} />}
           alwaysPrepend
           append={remoteMessage}
           scrollKey='account_timeline'
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 8333ea282..8f9f38036 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -195,6 +195,7 @@ class SwitchingColumnsArea extends React.PureComponent {
           <WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
 
           <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
+          <WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
           <WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
           <WrappedRoute path={['/@:acct/followers', '/accounts/:id/followers']} component={Followers} content={children} />
           <WrappedRoute path={['/@:acct/following', '/accounts/:id/following']} component={Following} content={children} />
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 3eb13a8ea..d840a7103 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -35,6 +35,9 @@
   "account.following_counter": "{count, plural, one {{counter} Following} other {{counter} Following}}",
   "account.follows.empty": "This user doesn't follow anyone yet.",
   "account.follows_you": "Follows you",
+  "account.hashtag_all": "All",
+  "account.hashtag_all_description": "All posts (deselect hashtags)",
+  "account.hashtag_select_description": "Select hashtag #{name}",
   "account.hide_reblogs": "Hide boosts from @{name}",
   "account.joined": "Joined {date}",
   "account.languages": "Change subscribed languages",
diff --git a/app/javascript/mastodon/reducers/user_lists.js b/app/javascript/mastodon/reducers/user_lists.js
index 10aaa2d68..f19c1e2e9 100644
--- a/app/javascript/mastodon/reducers/user_lists.js
+++ b/app/javascript/mastodon/reducers/user_lists.js
@@ -22,7 +22,7 @@ import {
   FOLLOW_REQUESTS_EXPAND_FAIL,
   FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
   FOLLOW_REQUEST_REJECT_SUCCESS,
-} from '../actions/accounts';
+  } from '../actions/accounts';
 import {
   REBLOGS_FETCH_SUCCESS,
   FAVOURITES_FETCH_SUCCESS,
@@ -51,7 +51,12 @@ import {
   DIRECTORY_EXPAND_SUCCESS,
   DIRECTORY_EXPAND_FAIL,
 } from 'mastodon/actions/directory';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import {
+  FEATURED_TAGS_FETCH_REQUEST,
+  FEATURED_TAGS_FETCH_SUCCESS,
+  FEATURED_TAGS_FETCH_FAIL,
+} from 'mastodon/actions/featured_tags';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
 const initialListState = ImmutableMap({
   next: null,
@@ -67,6 +72,7 @@ const initialState = ImmutableMap({
   follow_requests: initialListState,
   blocks: initialListState,
   mutes: initialListState,
+  featured_tags: initialListState,
 });
 
 const normalizeList = (state, path, accounts, next) => {
@@ -89,6 +95,18 @@ const normalizeFollowRequest = (state, notification) => {
   });
 };
 
+const normalizeFeaturedTag = (featuredTags, accountId) => {
+  const normalizeFeaturedTag = { ...featuredTags, accountId: accountId };
+  return fromJS(normalizeFeaturedTag);
+};
+
+const normalizeFeaturedTags = (state, path, featuredTags, accountId) => {
+  return state.setIn(path, ImmutableMap({
+    items: ImmutableList(featuredTags.map(featuredTag => normalizeFeaturedTag(featuredTag, accountId)).sort((a, b) => b.get('statuses_count') - a.get('statuses_count'))),
+    isLoading: false,
+  }));
+};
+
 export default function userLists(state = initialState, action) {
   switch(action.type) {
   case FOLLOWERS_FETCH_SUCCESS:
@@ -160,6 +178,12 @@ export default function userLists(state = initialState, action) {
   case DIRECTORY_FETCH_FAIL:
   case DIRECTORY_EXPAND_FAIL:
     return state.setIn(['directory', 'isLoading'], false);
+  case FEATURED_TAGS_FETCH_SUCCESS:
+    return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id);
+  case FEATURED_TAGS_FETCH_REQUEST:
+    return state.setIn(['featured_tags', action.id, 'isLoading'], true);
+  case FEATURED_TAGS_FETCH_FAIL:
+    return state.setIn(['featured_tags', action.id, 'isLoading'], false);
   default:
     return state;
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d4657d180..f8f9200f4 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7338,6 +7338,33 @@ noscript {
         }
       }
     }
+
+    &__hashtag-links {
+      overflow: hidden;
+      padding: 10px 5px;
+      margin: 0;
+      color: $darker-text-color;
+      border-bottom: 1px solid lighten($ui-base-color, 12%);
+
+      a {
+        display: inline-block;
+        color: $darker-text-color;
+        text-decoration: none;
+        padding: 5px 10px;
+        font-weight: 500;
+
+        strong {
+          font-weight: 700;
+          color: $primary-text-color;
+        }
+      }
+
+      a.active {
+        color: darken($ui-base-color, 4%);
+        background: $darker-text-color;
+        border-radius: 18px;
+      }
+    }
   }
 
   &__account-note {
-- 
cgit 


From aefa9253d61def572396c18a8d2ac3cc706ffa2e Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 19 Oct 2022 11:30:59 +0200
Subject: Change featured hashtags to be displayed in navigation panel (#19382)

---
 app/javascript/mastodon/components/hashtag.js      | 36 +++++++++----
 .../mastodon/components/navigation_portal.js       | 30 +++++++++++
 .../features/account/components/featured_tags.js   | 60 ++++++++--------------
 .../account/containers/featured_tags_container.js  | 15 ++++++
 .../mastodon/features/account/navigation.js        | 51 ++++++++++++++++++
 .../features/account_timeline/components/header.js | 20 +++-----
 .../features/ui/components/navigation_panel.js     | 11 ++--
 app/javascript/styles/mastodon/components.scss     | 33 ------------
 app/serializers/rest/featured_tag_serializer.rb    |  8 +++
 9 files changed, 162 insertions(+), 102 deletions(-)
 create mode 100644 app/javascript/mastodon/components/navigation_portal.js
 create mode 100644 app/javascript/mastodon/features/account/containers/featured_tags_container.js
 create mode 100644 app/javascript/mastodon/features/account/navigation.js

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/hashtag.js b/app/javascript/mastodon/components/hashtag.js
index 4a5a4bb57..8dd27290a 100644
--- a/app/javascript/mastodon/components/hashtag.js
+++ b/app/javascript/mastodon/components/hashtag.js
@@ -65,23 +65,35 @@ ImmutableHashtag.propTypes = {
   hashtag: ImmutablePropTypes.map.isRequired,
 };
 
-const Hashtag = ({ name, href, to, people, history, className }) => (
+const Hashtag = ({ name, href, to, people, uses, history, className, description, withGraph }) => (
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
       <Permalink href={href} to={to}>
         {name ? <React.Fragment>#<span>{name}</span></React.Fragment> : <Skeleton width={50} />}
       </Permalink>
 
-      {typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}
+      {description ? (
+        <span>{description}</span>
+      ) : (
+        typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />
+      )}
     </div>
 
-    <div className='trends__item__sparkline'>
-      <SilentErrorBoundary>
-        <Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
-          <SparklinesCurve style={{ fill: 'none' }} />
-        </Sparklines>
-      </SilentErrorBoundary>
-    </div>
+    {typeof uses !== 'undefined' && (
+      <div className='trends__item__current'>
+        <ShortNumber value={uses} />
+      </div>
+    )}
+
+    {withGraph && (
+      <div className='trends__item__sparkline'>
+        <SilentErrorBoundary>
+          <Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
+            <SparklinesCurve style={{ fill: 'none' }} />
+          </Sparklines>
+        </SilentErrorBoundary>
+      </div>
+    )}
   </div>
 );
 
@@ -90,9 +102,15 @@ Hashtag.propTypes = {
   href: PropTypes.string,
   to: PropTypes.string,
   people: PropTypes.number,
+  description: PropTypes.node,
   uses: PropTypes.number,
   history: PropTypes.arrayOf(PropTypes.number),
   className: PropTypes.string,
+  withGraph: PropTypes.bool,
+};
+
+Hashtag.defaultProps = {
+  withGraph: true,
 };
 
 export default Hashtag;
diff --git a/app/javascript/mastodon/components/navigation_portal.js b/app/javascript/mastodon/components/navigation_portal.js
new file mode 100644
index 000000000..b2d054a3b
--- /dev/null
+++ b/app/javascript/mastodon/components/navigation_portal.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Switch, Route, withRouter } from 'react-router-dom';
+import { showTrends } from 'mastodon/initial_state';
+import Trends from 'mastodon/features/getting_started/containers/trends_container';
+import AccountNavigation from 'mastodon/features/account/navigation';
+
+const DefaultNavigation = () => (
+  <>
+    {showTrends && (
+      <>
+        <div className='flex-spacer' />
+        <Trends />
+      </>
+    )}
+  </>
+);
+
+export default @withRouter
+class NavigationPortal extends React.PureComponent {
+
+  render () {
+    return (
+      <Switch>
+        <Route path='/@:acct/(tagged/:tagged?)?' component={AccountNavigation} />
+        <Route component={DefaultNavigation} />
+      </Switch>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js
index 3d5b8b079..5837f6e6d 100644
--- a/app/javascript/mastodon/features/account/components/featured_tags.js
+++ b/app/javascript/mastodon/features/account/components/featured_tags.js
@@ -1,27 +1,16 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import classNames from 'classnames';
-import Permalink from 'mastodon/components/permalink';
-import ShortNumber from 'mastodon/components/short_number';
-import { List as ImmutableList } from 'immutable';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import Hashtag from 'mastodon/components/hashtag';
 
 const messages = defineMessages({
-  hashtag_all: { id: 'account.hashtag_all', defaultMessage: 'All' },
-  hashtag_all_description: { id: 'account.hashtag_all_description', defaultMessage: 'All posts (deselect hashtags)' },
-  hashtag_select_description: { id: 'account.hashtag_select_description', defaultMessage: 'Select hashtag #{name}' },
-  statuses_counter: { id: 'account.statuses_counter', defaultMessage: '{count, plural, one {{counter} Post} other {{counter} Posts}}' },
+  lastStatusAt: { id: 'account.featured_tags.last_status_at', defaultMessage: 'Last post on {date}' },
+  empty: { id: 'account.featured_tags.last_status_never', defaultMessage: 'No posts' },
 });
 
-const mapStateToProps = (state, { account }) => ({
-  featuredTags: state.getIn(['user_lists', 'featured_tags', account.get('id'), 'items'], ImmutableList()),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
+export default @injectIntl
 class FeaturedTags extends ImmutablePureComponent {
 
   static contextTypes = {
@@ -36,34 +25,27 @@ class FeaturedTags extends ImmutablePureComponent {
   };
 
   render () {
-    const { account, featuredTags, tagged, intl } = this.props;
+    const { account, featuredTags, intl } = this.props;
 
-    if (!account || featuredTags.isEmpty()) {
+    if (!account || account.get('suspended') || featuredTags.isEmpty()) {
       return null;
     }
 
-    const suspended = account.get('suspended');
-
     return (
-      <div className={classNames('account__header', 'advanced', { inactive: !!account.get('moved') })}>
-        <div className='account__header__extra'>
-          <div className='account__header__extra__hashtag-links'>
-            <Permalink key='all' className={classNames('account__hashtag-link', { active: !tagged })} title={intl.formatMessage(messages.hashtag_all_description)} href={account.get('url')} to={`/@${account.get('acct')}`}>{intl.formatMessage(messages.hashtag_all)}</Permalink>
-            {!suspended && featuredTags.map(featuredTag => {
-              const name  = featuredTag.get('name');
-              const url   = featuredTag.get('url');
-              const to    = `/@${account.get('acct')}/tagged/${name}`;
-              const desc  = intl.formatMessage(messages.hashtag_select_description, { name });
-              const count = featuredTag.get('statuses_count');
-
-              return (
-                <Permalink key={`#${name}`} className={classNames('account__hashtag-link', { active: this.context.router.history.location.pathname === to })} title={desc} href={url} to={to}>
-                  #{name} <span title={intl.formatMessage(messages.statuses_counter, { count: count, counter: intl.formatNumber(count) })}>({<ShortNumber value={count} />})</span>
-                </Permalink>
-              );
-            })}
-          </div>
-        </div>
+      <div className='getting-started__trends'>
+        <h4><FormattedMessage id='account.featured_tags.title' defaultMessage="{name}'s featured hashtags" values={{ name: <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /> }} /></h4>
+
+        {featuredTags.map(featuredTag => (
+          <Hashtag
+            key={featuredTag.get('name')}
+            name={featuredTag.get('name')}
+            href={featuredTag.get('url')}
+            to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
+            uses={featuredTag.get('statuses_count')}
+            withGraph={false}
+            description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
+          />
+        ))}
       </div>
     );
   }
diff --git a/app/javascript/mastodon/features/account/containers/featured_tags_container.js b/app/javascript/mastodon/features/account/containers/featured_tags_container.js
new file mode 100644
index 000000000..7e206567f
--- /dev/null
+++ b/app/javascript/mastodon/features/account/containers/featured_tags_container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import FeaturedTags from '../components/featured_tags';
+import { makeGetAccount } from 'mastodon/selectors';
+import { List as ImmutableList } from 'immutable';
+
+const mapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  return (state, { accountId }) => ({
+    account: getAccount(state, accountId),
+    featuredTags: state.getIn(['user_lists', 'featured_tags', accountId, 'items'], ImmutableList()),
+  });
+};
+
+export default connect(mapStateToProps)(FeaturedTags);
diff --git a/app/javascript/mastodon/features/account/navigation.js b/app/javascript/mastodon/features/account/navigation.js
new file mode 100644
index 000000000..122674139
--- /dev/null
+++ b/app/javascript/mastodon/features/account/navigation.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import FeaturedTags from 'mastodon/features/account/containers/featured_tags_container';
+
+const mapStateToProps = (state, { match: { params: { acct } } }) => {
+  const accountId = state.getIn(['accounts_map', acct]);
+
+  if (!accountId) {
+    return {
+      isLoading: true,
+    };
+  }
+
+  return {
+    accountId,
+    isLoading: false,
+  };
+};
+
+export default @connect(mapStateToProps)
+class AccountNavigation extends React.PureComponent {
+
+  static propTypes = {
+    match: PropTypes.shape({
+      params: PropTypes.shape({
+        acct: PropTypes.string,
+        tagged: PropTypes.string,
+      }).isRequired,
+    }).isRequired,
+
+    accountId: PropTypes.string,
+    isLoading: PropTypes.bool,
+  };
+
+  render () {
+    const { accountId, isLoading, match: { params: { tagged } } } = this.props;
+
+    if (isLoading) {
+      return null;
+    }
+
+    return (
+      <>
+        <div className='flex-spacer' />
+        <FeaturedTags accountId={accountId} tagged={tagged} />
+      </>
+    );
+  }
+
+}
diff --git a/app/javascript/mastodon/features/account_timeline/components/header.js b/app/javascript/mastodon/features/account_timeline/components/header.js
index ea34a934a..f31848f41 100644
--- a/app/javascript/mastodon/features/account_timeline/components/header.js
+++ b/app/javascript/mastodon/features/account_timeline/components/header.js
@@ -1,8 +1,7 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import InnerHeader from '../../account/components/header';
-import FeaturedTags from '../../account/components/featured_tags';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import MovedNote from './moved_note';
 import { FormattedMessage } from 'react-intl';
@@ -28,7 +27,6 @@ export default class Header extends ImmutablePureComponent {
     hideTabs: PropTypes.bool,
     domain: PropTypes.string.isRequired,
     hidden: PropTypes.bool,
-    tagged: PropTypes.string,
   };
 
   static contextTypes = {
@@ -104,7 +102,7 @@ export default class Header extends ImmutablePureComponent {
   }
 
   render () {
-    const { account, hidden, hideTabs, tagged } = this.props;
+    const { account, hidden, hideTabs } = this.props;
 
     if (account === null) {
       return null;
@@ -136,15 +134,11 @@ export default class Header extends ImmutablePureComponent {
         />
 
         {!(hideTabs || hidden) && (
-          <Fragment>
-            <div className='account__section-headline'>
-              <NavLink exact to={`/@${account.get('acct')}`}><FormattedMessage id='account.posts' defaultMessage='Posts' /></NavLink>
-              <NavLink exact to={`/@${account.get('acct')}/with_replies`}><FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' /></NavLink>
-              <NavLink exact to={`/@${account.get('acct')}/media`}><FormattedMessage id='account.media' defaultMessage='Media' /></NavLink>
-            </div>
-
-            <FeaturedTags account={account} tagged={tagged} />
-          </Fragment>
+          <div className='account__section-headline'>
+            <NavLink exact to={`/@${account.get('acct')}`}><FormattedMessage id='account.posts' defaultMessage='Posts' /></NavLink>
+            <NavLink exact to={`/@${account.get('acct')}/with_replies`}><FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' /></NavLink>
+            <NavLink exact to={`/@${account.get('acct')}/media`}><FormattedMessage id='account.media' defaultMessage='Media' /></NavLink>
+          </div>
         )}
       </div>
     );
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index 166d3552b..757ef54ae 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import Logo from 'mastodon/components/logo';
-import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
-import { showTrends, timelinePreview } from 'mastodon/initial_state';
+import { timelinePreview } from 'mastodon/initial_state';
 import ColumnLink from './column_link';
 import FollowRequestsColumnLink from './follow_requests_column_link';
 import ListPanel from './list_panel';
 import NotificationsCounterIcon from './notifications_counter_icon';
 import SignInBanner from './sign_in_banner';
+import NavigationPortal from 'mastodon/components/navigation_portal';
 
 const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
@@ -93,12 +93,7 @@ class NavigationPanel extends React.Component {
           <ColumnLink transparent to='/about' icon='ellipsis-h' text={intl.formatMessage(messages.about)} />
         </div>
 
-        {showTrends && (
-          <React.Fragment>
-            <div className='flex-spacer' />
-            <TrendsContainer />
-          </React.Fragment>
-        )}
+        <NavigationPortal />
       </div>
     );
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f8f9200f4..587eba663 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7338,33 +7338,6 @@ noscript {
         }
       }
     }
-
-    &__hashtag-links {
-      overflow: hidden;
-      padding: 10px 5px;
-      margin: 0;
-      color: $darker-text-color;
-      border-bottom: 1px solid lighten($ui-base-color, 12%);
-
-      a {
-        display: inline-block;
-        color: $darker-text-color;
-        text-decoration: none;
-        padding: 5px 10px;
-        font-weight: 500;
-
-        strong {
-          font-weight: 700;
-          color: $primary-text-color;
-        }
-      }
-
-      a.active {
-        color: darken($ui-base-color, 4%);
-        background: $darker-text-color;
-        border-radius: 18px;
-      }
-    }
   }
 
   &__account-note {
@@ -7482,12 +7455,6 @@ noscript {
       margin-left: 5px;
       color: $secondary-text-color;
       text-decoration: none;
-
-      &__asterisk {
-        color: $darker-text-color;
-        font-size: 18px;
-        vertical-align: super;
-      }
     }
 
     &__sparkline {
diff --git a/app/serializers/rest/featured_tag_serializer.rb b/app/serializers/rest/featured_tag_serializer.rb
index 8abcd9b90..c4b35ab03 100644
--- a/app/serializers/rest/featured_tag_serializer.rb
+++ b/app/serializers/rest/featured_tag_serializer.rb
@@ -16,4 +16,12 @@ class REST::FeaturedTagSerializer < ActiveModel::Serializer
   def name
     object.display_name
   end
+
+  def statuses_count
+    object.statuses_count.to_s
+  end
+
+  def last_status_at
+    object.last_status_at&.to_date&.iso8601
+  end
 end
-- 
cgit 


From 839f893168ab221b08fa439012189e6c29a2721a Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 20 Oct 2022 14:35:29 +0200
Subject: Change public accounts pages to mount the web UI (#19319)

* Change public accounts pages to mount the web UI

* Fix handling of remote usernames in routes

- When logged in, serve web app
- When logged out, redirect to permalink
- Fix `app-body` class not being set sometimes due to name conflict

* Fix missing `multiColumn` prop

* Fix failing test

* Use `discoverable` attribute to control indexing directives

* Fix `<ColumnLoading />` not using `multiColumn`

* Add `noindex` to accounts in REST API

* Change noindex directive to not be rendered by default before a route is mounted

* Add loading indicator for detailed status in web UI

* Fix missing indicator appearing while account is loading in web UI
---
 app/controllers/about_controller.rb                |   8 +
 app/controllers/account_follow_controller.rb       |  12 -
 app/controllers/account_unfollow_controller.rb     |  12 -
 app/controllers/accounts_controller.rb             |  58 --
 .../concerns/account_controller_concern.rb         |   3 +-
 .../concerns/web_app_controller_concern.rb         |  13 +-
 app/controllers/follower_accounts_controller.rb    |   5 +-
 app/controllers/following_accounts_controller.rb   |   5 +-
 app/controllers/home_controller.rb                 |  13 +-
 app/controllers/privacy_controller.rb              |   8 +
 app/controllers/remote_follow_controller.rb        |  41 --
 app/controllers/remote_interaction_controller.rb   |  55 --
 app/controllers/statuses_controller.rb             |   2 +-
 app/controllers/tags_controller.rb                 |  10 +-
 app/helpers/accounts_helper.rb                     |  50 +-
 .../mastodon/components/error_boundary.js          |   7 +
 .../mastodon/components/missing_indicator.js       |   5 +
 app/javascript/mastodon/containers/mastodon.js     |   2 +-
 app/javascript/mastodon/features/about/index.js    |   6 +-
 .../mastodon/features/account/components/header.js |   5 +-
 .../mastodon/features/account_timeline/index.js    |  12 +-
 .../mastodon/features/bookmarked_statuses/index.js |   1 +
 .../mastodon/features/community_timeline/index.js  |   1 +
 app/javascript/mastodon/features/compose/index.js  |   5 +
 .../mastodon/features/direct_timeline/index.js     |   1 +
 .../mastodon/features/directory/index.js           |   1 +
 .../mastodon/features/domain_blocks/index.js       |   6 +
 app/javascript/mastodon/features/explore/index.js  |   1 +
 .../mastodon/features/favourited_statuses/index.js |   1 +
 .../mastodon/features/favourites/index.js          |   5 +
 .../features/follow_recommendations/index.js       |   5 +
 .../mastodon/features/follow_requests/index.js     |   5 +
 .../mastodon/features/getting_started/index.js     |   1 +
 .../mastodon/features/hashtag_timeline/index.js    |   1 +
 .../mastodon/features/home_timeline/index.js       |   3 +-
 .../mastodon/features/keyboard_shortcuts/index.js  |   5 +
 .../mastodon/features/list_timeline/index.js       |   1 +
 app/javascript/mastodon/features/lists/index.js    |   1 +
 app/javascript/mastodon/features/mutes/index.js    |   5 +
 .../mastodon/features/notifications/index.js       |   1 +
 .../mastodon/features/pinned_statuses/index.js     |   4 +
 .../mastodon/features/privacy_policy/index.js      |   6 +-
 .../mastodon/features/public_timeline/index.js     |   1 +
 app/javascript/mastodon/features/reblogs/index.js  |   5 +
 app/javascript/mastodon/features/status/index.js   |  17 +-
 .../features/ui/components/bundle_column_error.js  |  27 +-
 .../features/ui/components/column_loading.js       |   6 +-
 .../features/ui/components/columns_area.js         |   4 +-
 .../mastodon/features/ui/components/modal_root.js  |  21 +-
 app/javascript/mastodon/features/ui/index.js       |   4 +-
 .../mastodon/features/ui/util/async-components.js  |   8 +
 .../features/ui/util/react_router_helpers.js       |   4 +-
 app/javascript/mastodon/main.js                    |   8 -
 app/javascript/mastodon/reducers/statuses.js       |   6 +
 app/javascript/mastodon/selectors/index.js         |   2 +-
 .../service_worker/web_push_notifications.js       |  26 +-
 app/javascript/packs/public.js                     |  29 -
 app/javascript/styles/application.scss             |   1 -
 app/javascript/styles/contrast/diff.scss           |   4 -
 app/javascript/styles/mastodon-light/diff.scss     |  89 ---
 app/javascript/styles/mastodon/containers.scss     | 782 ---------------------
 app/javascript/styles/mastodon/footer.scss         | 152 ----
 app/javascript/styles/mastodon/rtl.scss            |  74 --
 app/javascript/styles/mastodon/statuses.scss       |   3 +-
 app/lib/permalink_redirector.rb                    |  36 +-
 app/models/account.rb                              |   1 +
 app/models/user.rb                                 |   4 +
 app/serializers/rest/account_serializer.rb         |   7 +-
 app/views/about/show.html.haml                     |   3 +
 app/views/accounts/_bio.html.haml                  |  21 -
 app/views/accounts/_header.html.haml               |  43 --
 app/views/accounts/_moved.html.haml                |  20 -
 app/views/accounts/show.html.haml                  |  76 +-
 app/views/follower_accounts/index.html.haml        |  18 +-
 app/views/following_accounts/index.html.haml       |  18 +-
 app/views/home/index.html.haml                     |   3 +
 app/views/layouts/public.html.haml                 |  60 --
 app/views/privacy/show.html.haml                   |   3 +
 app/views/remote_follow/new.html.haml              |  20 -
 app/views/remote_interaction/new.html.haml         |  24 -
 app/views/statuses/_detailed_status.html.haml      |   6 +-
 app/views/statuses/_simple_status.html.haml        |   6 +-
 app/views/statuses/show.html.haml                  |   2 +-
 app/views/tags/show.html.haml                      |   5 +
 config/locales/en.yml                              |  40 --
 config/routes.rb                                   |  57 +-
 package.json                                       |   1 -
 spec/controllers/account_follow_controller_spec.rb |  64 --
 .../account_unfollow_controller_spec.rb            |  64 --
 spec/controllers/accounts_controller_spec.rb       | 194 -----
 .../authorize_interactions_controller_spec.rb      |   4 +-
 .../follower_accounts_controller_spec.rb           |  21 -
 .../following_accounts_controller_spec.rb          |  21 -
 spec/controllers/remote_follow_controller_spec.rb  | 135 ----
 .../remote_interaction_controller_spec.rb          |  39 -
 spec/controllers/tags_controller_spec.rb           |   7 +-
 spec/features/profile_spec.rb                      |  26 +-
 spec/lib/permalink_redirector_spec.rb              |  31 +-
 spec/requests/account_show_page_spec.rb            |  15 -
 spec/routing/accounts_routing_spec.rb              |  88 ++-
 yarn.lock                                          |   5 -
 101 files changed, 389 insertions(+), 2464 deletions(-)
 delete mode 100644 app/controllers/account_follow_controller.rb
 delete mode 100644 app/controllers/account_unfollow_controller.rb
 delete mode 100644 app/controllers/remote_follow_controller.rb
 delete mode 100644 app/controllers/remote_interaction_controller.rb
 delete mode 100644 app/javascript/styles/mastodon/footer.scss
 delete mode 100644 app/views/accounts/_bio.html.haml
 delete mode 100644 app/views/accounts/_header.html.haml
 delete mode 100644 app/views/accounts/_moved.html.haml
 delete mode 100644 app/views/layouts/public.html.haml
 delete mode 100644 app/views/remote_follow/new.html.haml
 delete mode 100644 app/views/remote_interaction/new.html.haml
 create mode 100644 app/views/tags/show.html.haml
 delete mode 100644 spec/controllers/account_follow_controller_spec.rb
 delete mode 100644 spec/controllers/account_unfollow_controller_spec.rb
 delete mode 100644 spec/controllers/remote_follow_controller_spec.rb
 delete mode 100644 spec/controllers/remote_interaction_controller_spec.rb

(limited to 'app/javascript/styles')

diff --git a/app/controllers/about_controller.rb b/app/controllers/about_controller.rb
index 0fbc6a800..104348614 100644
--- a/app/controllers/about_controller.rb
+++ b/app/controllers/about_controller.rb
@@ -5,7 +5,15 @@ class AboutController < ApplicationController
 
   skip_before_action :require_functional!
 
+  before_action :set_instance_presenter
+
   def show
     expires_in 0, public: true unless user_signed_in?
   end
+
+  private
+
+  def set_instance_presenter
+    @instance_presenter = InstancePresenter.new
+  end
 end
diff --git a/app/controllers/account_follow_controller.rb b/app/controllers/account_follow_controller.rb
deleted file mode 100644
index 33394074d..000000000
--- a/app/controllers/account_follow_controller.rb
+++ /dev/null
@@ -1,12 +0,0 @@
-# frozen_string_literal: true
-
-class AccountFollowController < ApplicationController
-  include AccountControllerConcern
-
-  before_action :authenticate_user!
-
-  def create
-    FollowService.new.call(current_user.account, @account, with_rate_limit: true)
-    redirect_to account_path(@account)
-  end
-end
diff --git a/app/controllers/account_unfollow_controller.rb b/app/controllers/account_unfollow_controller.rb
deleted file mode 100644
index 378ec86dc..000000000
--- a/app/controllers/account_unfollow_controller.rb
+++ /dev/null
@@ -1,12 +0,0 @@
-# frozen_string_literal: true
-
-class AccountUnfollowController < ApplicationController
-  include AccountControllerConcern
-
-  before_action :authenticate_user!
-
-  def create
-    UnfollowService.new.call(current_user.account, @account)
-    redirect_to account_path(@account)
-  end
-end
diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb
index d92f91b30..5ceea5d3c 100644
--- a/app/controllers/accounts_controller.rb
+++ b/app/controllers/accounts_controller.rb
@@ -9,7 +9,6 @@ class AccountsController < ApplicationController
 
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
   before_action :set_cache_headers
-  before_action :set_body_classes
 
   skip_around_action :set_locale, if: -> { [:json, :rss].include?(request.format&.to_sym) }
   skip_before_action :require_functional!, unless: :whitelist_mode?
@@ -18,24 +17,6 @@ class AccountsController < ApplicationController
     respond_to do |format|
       format.html do
         expires_in 0, public: true unless user_signed_in?
-
-        @pinned_statuses   = []
-        @endorsed_accounts = @account.endorsed_accounts.to_a.sample(4)
-        @featured_hashtags = @account.featured_tags.order(statuses_count: :desc)
-
-        if current_account && @account.blocking?(current_account)
-          @statuses = []
-          return
-        end
-
-        @pinned_statuses = cached_filtered_status_pins if show_pinned_statuses?
-        @statuses        = cached_filtered_status_page
-        @rss_url         = rss_url
-
-        unless @statuses.empty?
-          @older_url = older_url if @statuses.last.id > filtered_statuses.last.id
-          @newer_url = newer_url if @statuses.first.id < filtered_statuses.first.id
-        end
       end
 
       format.rss do
@@ -55,18 +36,6 @@ class AccountsController < ApplicationController
 
   private
 
-  def set_body_classes
-    @body_classes = 'with-modals'
-  end
-
-  def show_pinned_statuses?
-    [replies_requested?, media_requested?, tag_requested?, params[:max_id].present?, params[:min_id].present?].none?
-  end
-
-  def filtered_pinned_statuses
-    @account.pinned_statuses.where(visibility: [:public, :unlisted])
-  end
-
   def filtered_statuses
     default_statuses.tap do |statuses|
       statuses.merge!(hashtag_scope)    if tag_requested?
@@ -113,26 +82,6 @@ class AccountsController < ApplicationController
     end
   end
 
-  def older_url
-    pagination_url(max_id: @statuses.last.id)
-  end
-
-  def newer_url
-    pagination_url(min_id: @statuses.first.id)
-  end
-
-  def pagination_url(max_id: nil, min_id: nil)
-    if tag_requested?
-      short_account_tag_url(@account, params[:tag], max_id: max_id, min_id: min_id)
-    elsif media_requested?
-      short_account_media_url(@account, max_id: max_id, min_id: min_id)
-    elsif replies_requested?
-      short_account_with_replies_url(@account, max_id: max_id, min_id: min_id)
-    else
-      short_account_url(@account, max_id: max_id, min_id: min_id)
-    end
-  end
-
   def media_requested?
     request.path.split('.').first.end_with?('/media') && !tag_requested?
   end
@@ -145,13 +94,6 @@ class AccountsController < ApplicationController
     request.path.split('.').first.end_with?(Addressable::URI.parse("/tagged/#{params[:tag]}").normalize)
   end
 
-  def cached_filtered_status_pins
-    cache_collection(
-      filtered_pinned_statuses,
-      Status
-    )
-  end
-
   def cached_filtered_status_page
     cache_collection_paginated_by_id(
       filtered_statuses,
diff --git a/app/controllers/concerns/account_controller_concern.rb b/app/controllers/concerns/account_controller_concern.rb
index 11eac0eb6..2f7d84df0 100644
--- a/app/controllers/concerns/account_controller_concern.rb
+++ b/app/controllers/concerns/account_controller_concern.rb
@@ -3,13 +3,12 @@
 module AccountControllerConcern
   extend ActiveSupport::Concern
 
+  include WebAppControllerConcern
   include AccountOwnedConcern
 
   FOLLOW_PER_PAGE = 12
 
   included do
-    layout 'public'
-
     before_action :set_instance_presenter
     before_action :set_link_headers, if: -> { request.format.nil? || request.format == :html }
   end
diff --git a/app/controllers/concerns/web_app_controller_concern.rb b/app/controllers/concerns/web_app_controller_concern.rb
index 8a6c73af3..c671ce785 100644
--- a/app/controllers/concerns/web_app_controller_concern.rb
+++ b/app/controllers/concerns/web_app_controller_concern.rb
@@ -4,15 +4,24 @@ module WebAppControllerConcern
   extend ActiveSupport::Concern
 
   included do
-    before_action :set_body_classes
+    before_action :redirect_unauthenticated_to_permalinks!
+    before_action :set_app_body_class
     before_action :set_referrer_policy_header
   end
 
-  def set_body_classes
+  def set_app_body_class
     @body_classes = 'app-body'
   end
 
   def set_referrer_policy_header
     response.headers['Referrer-Policy'] = 'origin'
   end
+
+  def redirect_unauthenticated_to_permalinks!
+    return if user_signed_in?
+
+    redirect_path = PermalinkRedirector.new(request.path).redirect_path
+
+    redirect_to(redirect_path) if redirect_path.present?
+  end
 end
diff --git a/app/controllers/follower_accounts_controller.rb b/app/controllers/follower_accounts_controller.rb
index da7bb4ed2..e4d8cc495 100644
--- a/app/controllers/follower_accounts_controller.rb
+++ b/app/controllers/follower_accounts_controller.rb
@@ -3,6 +3,7 @@
 class FollowerAccountsController < ApplicationController
   include AccountControllerConcern
   include SignatureVerification
+  include WebAppControllerConcern
 
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
   before_action :set_cache_headers
@@ -14,10 +15,6 @@ class FollowerAccountsController < ApplicationController
     respond_to do |format|
       format.html do
         expires_in 0, public: true unless user_signed_in?
-
-        next if @account.hide_collections?
-
-        follows
       end
 
       format.json do
diff --git a/app/controllers/following_accounts_controller.rb b/app/controllers/following_accounts_controller.rb
index c37e3b68c..f84dca1e5 100644
--- a/app/controllers/following_accounts_controller.rb
+++ b/app/controllers/following_accounts_controller.rb
@@ -3,6 +3,7 @@
 class FollowingAccountsController < ApplicationController
   include AccountControllerConcern
   include SignatureVerification
+  include WebAppControllerConcern
 
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
   before_action :set_cache_headers
@@ -14,10 +15,6 @@ class FollowingAccountsController < ApplicationController
     respond_to do |format|
       format.html do
         expires_in 0, public: true unless user_signed_in?
-
-        next if @account.hide_collections?
-
-        follows
       end
 
       format.json do
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index b4d6578b9..d8ee82a7a 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -3,21 +3,14 @@
 class HomeController < ApplicationController
   include WebAppControllerConcern
 
-  before_action :redirect_unauthenticated_to_permalinks!
   before_action :set_instance_presenter
 
-  def index; end
+  def index
+    expires_in 0, public: true unless user_signed_in?
+  end
 
   private
 
-  def redirect_unauthenticated_to_permalinks!
-    return if user_signed_in?
-
-    redirect_path = PermalinkRedirector.new(request.path).redirect_path
-
-    redirect_to(redirect_path) if redirect_path.present?
-  end
-
   def set_instance_presenter
     @instance_presenter = InstancePresenter.new
   end
diff --git a/app/controllers/privacy_controller.rb b/app/controllers/privacy_controller.rb
index bc98bca51..2c98bf3bf 100644
--- a/app/controllers/privacy_controller.rb
+++ b/app/controllers/privacy_controller.rb
@@ -5,7 +5,15 @@ class PrivacyController < ApplicationController
 
   skip_before_action :require_functional!
 
+  before_action :set_instance_presenter
+
   def show
     expires_in 0, public: true if current_account.nil?
   end
+
+  private
+
+  def set_instance_presenter
+    @instance_presenter = InstancePresenter.new
+  end
 end
diff --git a/app/controllers/remote_follow_controller.rb b/app/controllers/remote_follow_controller.rb
deleted file mode 100644
index db1604644..000000000
--- a/app/controllers/remote_follow_controller.rb
+++ /dev/null
@@ -1,41 +0,0 @@
-# frozen_string_literal: true
-
-class RemoteFollowController < ApplicationController
-  include AccountOwnedConcern
-
-  layout 'modal'
-
-  before_action :set_body_classes
-
-  skip_before_action :require_functional!
-
-  def new
-    @remote_follow = RemoteFollow.new(session_params)
-  end
-
-  def create
-    @remote_follow = RemoteFollow.new(resource_params)
-
-    if @remote_follow.valid?
-      session[:remote_follow] = @remote_follow.acct
-      redirect_to @remote_follow.subscribe_address_for(@account)
-    else
-      render :new
-    end
-  end
-
-  private
-
-  def resource_params
-    params.require(:remote_follow).permit(:acct)
-  end
-
-  def session_params
-    { acct: session[:remote_follow] || current_account&.username }
-  end
-
-  def set_body_classes
-    @body_classes = 'modal-layout'
-    @hide_header  = true
-  end
-end
diff --git a/app/controllers/remote_interaction_controller.rb b/app/controllers/remote_interaction_controller.rb
deleted file mode 100644
index 6c29a2b9f..000000000
--- a/app/controllers/remote_interaction_controller.rb
+++ /dev/null
@@ -1,55 +0,0 @@
-# frozen_string_literal: true
-
-class RemoteInteractionController < ApplicationController
-  include Authorization
-
-  layout 'modal'
-
-  before_action :authenticate_user!, if: :whitelist_mode?
-  before_action :set_interaction_type
-  before_action :set_status
-  before_action :set_body_classes
-
-  skip_before_action :require_functional!, unless: :whitelist_mode?
-
-  def new
-    @remote_follow = RemoteFollow.new(session_params)
-  end
-
-  def create
-    @remote_follow = RemoteFollow.new(resource_params)
-
-    if @remote_follow.valid?
-      session[:remote_follow] = @remote_follow.acct
-      redirect_to @remote_follow.interact_address_for(@status)
-    else
-      render :new
-    end
-  end
-
-  private
-
-  def resource_params
-    params.require(:remote_follow).permit(:acct)
-  end
-
-  def session_params
-    { acct: session[:remote_follow] || current_account&.username }
-  end
-
-  def set_status
-    @status = Status.find(params[:id])
-    authorize @status, :show?
-  rescue Mastodon::NotPermittedError
-    not_found
-  end
-
-  def set_body_classes
-    @body_classes = 'modal-layout'
-    @hide_header  = true
-  end
-
-  def set_interaction_type
-    @interaction_type = %w(reply reblog favourite).include?(params[:type]) ? params[:type] : 'reply'
-  end
-end
diff --git a/app/controllers/statuses_controller.rb b/app/controllers/statuses_controller.rb
index 181c76c9a..bb4e5b01f 100644
--- a/app/controllers/statuses_controller.rb
+++ b/app/controllers/statuses_controller.rb
@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 class StatusesController < ApplicationController
+  include WebAppControllerConcern
   include StatusControllerConcern
   include SignatureAuthentication
   include Authorization
   include AccountOwnedConcern
-  include WebAppControllerConcern
 
   before_action :require_account_signature!, only: [:show, :activity], if: -> { request.format == :json && authorized_fetch_mode? }
   before_action :set_status
diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb
index 2890c179d..f0a099350 100644
--- a/app/controllers/tags_controller.rb
+++ b/app/controllers/tags_controller.rb
@@ -2,18 +2,16 @@
 
 class TagsController < ApplicationController
   include SignatureVerification
+  include WebAppControllerConcern
 
   PAGE_SIZE     = 20
   PAGE_SIZE_MAX = 200
 
-  layout 'public'
-
   before_action :require_account_signature!, if: -> { request.format == :json && authorized_fetch_mode? }
   before_action :authenticate_user!, if: :whitelist_mode?
   before_action :set_local
   before_action :set_tag
   before_action :set_statuses
-  before_action :set_body_classes
   before_action :set_instance_presenter
 
   skip_before_action :require_functional!, unless: :whitelist_mode?
@@ -21,7 +19,7 @@ class TagsController < ApplicationController
   def show
     respond_to do |format|
       format.html do
-        redirect_to web_path("tags/#{@tag.name}")
+        expires_in 0, public: true unless user_signed_in?
       end
 
       format.rss do
@@ -54,10 +52,6 @@ class TagsController < ApplicationController
     end
   end
 
-  def set_body_classes
-    @body_classes = 'with-modals'
-  end
-
   def set_instance_presenter
     @instance_presenter = InstancePresenter.new
   end
diff --git a/app/helpers/accounts_helper.rb b/app/helpers/accounts_helper.rb
index 59664373d..6301919a9 100644
--- a/app/helpers/accounts_helper.rb
+++ b/app/helpers/accounts_helper.rb
@@ -20,54 +20,10 @@ module AccountsHelper
   end
 
   def account_action_button(account)
-    if user_signed_in?
-      if account.id == current_user.account_id
-        link_to settings_profile_url, class: 'button logo-button' do
-          safe_join([logo_as_symbol, t('settings.edit_profile')])
-        end
-      elsif current_account.following?(account) || current_account.requested?(account)
-        link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do
-          safe_join([logo_as_symbol, t('accounts.unfollow')])
-        end
-      elsif !(account.memorial? || account.moved?)
-        link_to account_follow_path(account), class: "button logo-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post } do
-          safe_join([logo_as_symbol, t('accounts.follow')])
-        end
-      end
-    elsif !(account.memorial? || account.moved?)
-      link_to account_remote_follow_path(account), class: 'button logo-button modal-button', target: '_new' do
-        safe_join([logo_as_symbol, t('accounts.follow')])
-      end
-    end
-  end
-
-  def minimal_account_action_button(account)
-    if user_signed_in?
-      return if account.id == current_user.account_id
-
-      if current_account.following?(account) || current_account.requested?(account)
-        link_to account_unfollow_path(account), class: 'icon-button active', data: { method: :post }, title: t('accounts.unfollow') do
-          fa_icon('user-times fw')
-        end
-      elsif !(account.memorial? || account.moved?)
-        link_to account_follow_path(account), class: "icon-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post }, title: t('accounts.follow') do
-          fa_icon('user-plus fw')
-        end
-      end
-    elsif !(account.memorial? || account.moved?)
-      link_to account_remote_follow_path(account), class: 'icon-button modal-button', target: '_new', title: t('accounts.follow') do
-        fa_icon('user-plus fw')
-      end
-    end
-  end
+    return if account.memorial? || account.moved?
 
-  def account_badge(account)
-    if account.bot?
-      content_tag(:div, content_tag(:div, t('accounts.roles.bot'), class: 'account-role bot'), class: 'roles')
-    elsif account.group?
-      content_tag(:div, content_tag(:div, t('accounts.roles.group'), class: 'account-role group'), class: 'roles')
-    elsif account.user_role&.highlighted?
-      content_tag(:div, content_tag(:div, account.user_role.name, class: "account-role user-role-#{account.user_role.id}"), class: 'roles')
+    link_to ActivityPub::TagManager.instance.url_for(account), class: 'button logo-button', target: '_new' do
+      safe_join([logo_as_symbol, t('accounts.follow')])
     end
   end
 
diff --git a/app/javascript/mastodon/components/error_boundary.js b/app/javascript/mastodon/components/error_boundary.js
index ca4a2cfe1..02d5616d6 100644
--- a/app/javascript/mastodon/components/error_boundary.js
+++ b/app/javascript/mastodon/components/error_boundary.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { version, source_url } from 'mastodon/initial_state';
 import StackTrace from 'stacktrace-js';
+import { Helmet } from 'react-helmet';
 
 export default class ErrorBoundary extends React.PureComponent {
 
@@ -84,6 +85,7 @@ export default class ErrorBoundary extends React.PureComponent {
               <FormattedMessage id='error.unexpected_crash.explanation' defaultMessage='Due to a bug in our code or a browser compatibility issue, this page could not be displayed correctly.' />
             )}
           </p>
+
           <p>
             { likelyBrowserAddonIssue ? (
               <FormattedMessage id='error.unexpected_crash.next_steps_addons' defaultMessage='Try disabling them and refreshing the page. If that does not help, you may still be able to use Mastodon through a different browser or native app.' />
@@ -91,8 +93,13 @@ export default class ErrorBoundary extends React.PureComponent {
               <FormattedMessage id='error.unexpected_crash.next_steps' defaultMessage='Try refreshing the page. If that does not help, you may still be able to use Mastodon through a different browser or native app.' />
             )}
           </p>
+
           <p className='error-boundary__footer'>Mastodon v{version} · <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='errors.unexpected_crash.report_issue' defaultMessage='Report issue' /></a> · <button onClick={this.handleCopyStackTrace} className={copied ? 'copied' : ''}><FormattedMessage id='errors.unexpected_crash.copy_stacktrace' defaultMessage='Copy stacktrace to clipboard' /></button></p>
         </div>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </div>
     );
   }
diff --git a/app/javascript/mastodon/components/missing_indicator.js b/app/javascript/mastodon/components/missing_indicator.js
index 7b0101bab..05e0d653d 100644
--- a/app/javascript/mastodon/components/missing_indicator.js
+++ b/app/javascript/mastodon/components/missing_indicator.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import illustration from 'mastodon/../images/elephant_ui_disappointed.svg';
 import classNames from 'classnames';
+import { Helmet } from 'react-helmet';
 
 const MissingIndicator = ({ fullPage }) => (
   <div className={classNames('regeneration-indicator', { 'regeneration-indicator--without-header': fullPage })}>
@@ -14,6 +15,10 @@ const MissingIndicator = ({ fullPage }) => (
       <FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' />
       <FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' />
     </div>
+
+    <Helmet>
+      <meta name='robots' content='noindex' />
+    </Helmet>
   </div>
 );
 
diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js
index 8e5a1fa3a..730695c49 100644
--- a/app/javascript/mastodon/containers/mastodon.js
+++ b/app/javascript/mastodon/containers/mastodon.js
@@ -78,7 +78,7 @@ export default class Mastodon extends React.PureComponent {
       <IntlProvider locale={locale} messages={messages}>
         <ReduxProvider store={store}>
           <ErrorBoundary>
-            <BrowserRouter basename='/web'>
+            <BrowserRouter>
               <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
                 <Route path='/' component={UI} />
               </ScrollContext>
diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js
index e9212565a..75fed9b95 100644
--- a/app/javascript/mastodon/features/about/index.js
+++ b/app/javascript/mastodon/features/about/index.js
@@ -94,6 +94,7 @@ class About extends React.PureComponent {
     }),
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    multiColumn: PropTypes.bool,
   };
 
   componentDidMount () {
@@ -108,11 +109,11 @@ class About extends React.PureComponent {
   }
 
   render () {
-    const { intl, server, extendedDescription, domainBlocks } = this.props;
+    const { multiColumn, intl, server, extendedDescription, domainBlocks } = this.props;
     const isLoading = server.get('isLoading');
 
     return (
-      <Column>
+      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
         <div className='scrollable about'>
           <div className='about__header'>
             <Image blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
@@ -212,6 +213,7 @@ class About extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='all' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index 44c53f9ce..954cb0ee7 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -270,7 +270,9 @@ class Header extends ImmutablePureComponent {
     const content         = { __html: account.get('note_emojified') };
     const displayNameHtml = { __html: account.get('display_name_html') };
     const fields          = account.get('fields');
-    const acct            = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
+    const isLocal         = account.get('acct').indexOf('@') === -1;
+    const acct            = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
+    const isIndexable     = !account.get('noindex');
 
     let badge;
 
@@ -373,6 +375,7 @@ class Header extends ImmutablePureComponent {
 
         <Helmet>
           <title>{titleFromAccount(account)}</title>
+          <meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
         </Helmet>
       </div>
     );
diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js
index 51fb76f1f..437cee95c 100644
--- a/app/javascript/mastodon/features/account_timeline/index.js
+++ b/app/javascript/mastodon/features/account_timeline/index.js
@@ -142,19 +142,17 @@ class AccountTimeline extends ImmutablePureComponent {
   render () {
     const { accountId, statusIds, featuredStatusIds, isLoading, hasMore, blockedBy, suspended, isAccount, hidden, multiColumn, remote, remoteUrl } = this.props;
 
-    if (!isAccount) {
+    if (isLoading && statusIds.isEmpty()) {
       return (
         <Column>
-          <ColumnBackButton multiColumn={multiColumn} />
-          <MissingIndicator />
+          <LoadingIndicator />
         </Column>
       );
-    }
-
-    if (!statusIds && isLoading) {
+    } else if (!isLoading && !isAccount) {
       return (
         <Column>
-          <LoadingIndicator />
+          <ColumnBackButton multiColumn={multiColumn} />
+          <MissingIndicator />
         </Column>
       );
     }
diff --git a/app/javascript/mastodon/features/bookmarked_statuses/index.js b/app/javascript/mastodon/features/bookmarked_statuses/index.js
index 0e466e5ed..097be17c9 100644
--- a/app/javascript/mastodon/features/bookmarked_statuses/index.js
+++ b/app/javascript/mastodon/features/bookmarked_statuses/index.js
@@ -99,6 +99,7 @@ class Bookmarks extends ImmutablePureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.heading)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js
index 757521802..7b3f8845f 100644
--- a/app/javascript/mastodon/features/community_timeline/index.js
+++ b/app/javascript/mastodon/features/community_timeline/index.js
@@ -151,6 +151,7 @@ class CommunityTimeline extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js
index c27556a0e..763c715de 100644
--- a/app/javascript/mastodon/features/compose/index.js
+++ b/app/javascript/mastodon/features/compose/index.js
@@ -18,6 +18,7 @@ import { mascot } from '../../initial_state';
 import Icon from 'mastodon/components/icon';
 import { logOut } from 'mastodon/utils/log_out';
 import Column from 'mastodon/components/column';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -145,6 +146,10 @@ class Compose extends React.PureComponent {
       <Column onFocus={this.onFocus}>
         <NavigationContainer onClose={this.onBlur} />
         <ComposeFormContainer />
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/direct_timeline/index.js b/app/javascript/mastodon/features/direct_timeline/index.js
index cfaa9c4c5..8dcc43e28 100644
--- a/app/javascript/mastodon/features/direct_timeline/index.js
+++ b/app/javascript/mastodon/features/direct_timeline/index.js
@@ -98,6 +98,7 @@ class DirectTimeline extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/directory/index.js b/app/javascript/mastodon/features/directory/index.js
index 0ce7919b6..b45faa049 100644
--- a/app/javascript/mastodon/features/directory/index.js
+++ b/app/javascript/mastodon/features/directory/index.js
@@ -169,6 +169,7 @@ class Directory extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/domain_blocks/index.js b/app/javascript/mastodon/features/domain_blocks/index.js
index edb80aef4..43b275c2d 100644
--- a/app/javascript/mastodon/features/domain_blocks/index.js
+++ b/app/javascript/mastodon/features/domain_blocks/index.js
@@ -11,6 +11,7 @@ import ColumnBackButtonSlim from '../../components/column_back_button_slim';
 import DomainContainer from '../../containers/domain_container';
 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
 import ScrollableList from '../../components/scrollable_list';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' },
@@ -59,6 +60,7 @@ class Blocks extends ImmutablePureComponent {
     return (
       <Column bindToDocument={!multiColumn} icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
         <ColumnBackButtonSlim />
+
         <ScrollableList
           scrollKey='domain_blocks'
           onLoadMore={this.handleLoadMore}
@@ -70,6 +72,10 @@ class Blocks extends ImmutablePureComponent {
             <DomainContainer key={domain} domain={domain} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/explore/index.js b/app/javascript/mastodon/features/explore/index.js
index 566be631e..1c7049e97 100644
--- a/app/javascript/mastodon/features/explore/index.js
+++ b/app/javascript/mastodon/features/explore/index.js
@@ -84,6 +84,7 @@ class Explore extends React.PureComponent {
 
               <Helmet>
                 <title>{intl.formatMessage(messages.title)}</title>
+                <meta name='robots' content={isSearching ? 'noindex' : 'all'} />
               </Helmet>
             </React.Fragment>
           )}
diff --git a/app/javascript/mastodon/features/favourited_statuses/index.js b/app/javascript/mastodon/features/favourited_statuses/index.js
index f1d32eff1..3741f68f6 100644
--- a/app/javascript/mastodon/features/favourited_statuses/index.js
+++ b/app/javascript/mastodon/features/favourited_statuses/index.js
@@ -99,6 +99,7 @@ class Favourites extends ImmutablePureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.heading)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/favourites/index.js b/app/javascript/mastodon/features/favourites/index.js
index 673317f04..ad10744da 100644
--- a/app/javascript/mastodon/features/favourites/index.js
+++ b/app/javascript/mastodon/features/favourites/index.js
@@ -11,6 +11,7 @@ import LoadingIndicator from 'mastodon/components/loading_indicator';
 import ScrollableList from 'mastodon/components/scrollable_list';
 import AccountContainer from 'mastodon/containers/account_container';
 import Column from 'mastodon/features/ui/components/column';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   refresh: { id: 'refresh', defaultMessage: 'Refresh' },
@@ -80,6 +81,10 @@ class Favourites extends ImmutablePureComponent {
             <AccountContainer key={id} id={id} withNote={false} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/follow_recommendations/index.js b/app/javascript/mastodon/features/follow_recommendations/index.js
index 32b55eeb3..5f7baa64c 100644
--- a/app/javascript/mastodon/features/follow_recommendations/index.js
+++ b/app/javascript/mastodon/features/follow_recommendations/index.js
@@ -12,6 +12,7 @@ import Column from 'mastodon/features/ui/components/column';
 import Account from './components/account';
 import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg';
 import Button from 'mastodon/components/button';
+import { Helmet } from 'react-helmet';
 
 const mapStateToProps = state => ({
   suggestions: state.getIn(['suggestions', 'items']),
@@ -104,6 +105,10 @@ class FollowRecommendations extends ImmutablePureComponent {
             </React.Fragment>
           )}
         </div>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/follow_requests/index.js b/app/javascript/mastodon/features/follow_requests/index.js
index 1f9b635bb..d16aa7737 100644
--- a/app/javascript/mastodon/features/follow_requests/index.js
+++ b/app/javascript/mastodon/features/follow_requests/index.js
@@ -12,6 +12,7 @@ import AccountAuthorizeContainer from './containers/account_authorize_container'
 import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
 import ScrollableList from '../../components/scrollable_list';
 import { me } from '../../initial_state';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
@@ -87,6 +88,10 @@ class FollowRequests extends ImmutablePureComponent {
             <AccountAuthorizeContainer key={id} id={id} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index 42a5b581f..f002ffc77 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -138,6 +138,7 @@ class GettingStarted extends ImmutablePureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.menu)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js
index 0f7df5036..ec524be8f 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/index.js
+++ b/app/javascript/mastodon/features/hashtag_timeline/index.js
@@ -228,6 +228,7 @@ class HashtagTimeline extends React.PureComponent {
 
         <Helmet>
           <title>#{id}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js
index 68770b739..838ed7dd8 100644
--- a/app/javascript/mastodon/features/home_timeline/index.js
+++ b/app/javascript/mastodon/features/home_timeline/index.js
@@ -20,7 +20,7 @@ const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
   show_announcements: { id: 'home.show_announcements', defaultMessage: 'Show announcements' },
   hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' },
-});  
+});
 
 const mapStateToProps = state => ({
   hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
@@ -167,6 +167,7 @@ class HomeTimeline extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js b/app/javascript/mastodon/features/keyboard_shortcuts/index.js
index 2a32577ba..9a870478d 100644
--- a/app/javascript/mastodon/features/keyboard_shortcuts/index.js
+++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.js
@@ -4,6 +4,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ColumnHeader from 'mastodon/components/column_header';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
@@ -164,6 +165,10 @@ class KeyboardShortcuts extends ImmutablePureComponent {
             </tbody>
           </table>
         </div>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js
index f0a7a0c7f..fd9d33df7 100644
--- a/app/javascript/mastodon/features/list_timeline/index.js
+++ b/app/javascript/mastodon/features/list_timeline/index.js
@@ -212,6 +212,7 @@ class ListTimeline extends React.PureComponent {
 
         <Helmet>
           <title>{title}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/lists/index.js b/app/javascript/mastodon/features/lists/index.js
index 389a0c5c8..017595ba0 100644
--- a/app/javascript/mastodon/features/lists/index.js
+++ b/app/javascript/mastodon/features/lists/index.js
@@ -80,6 +80,7 @@ class Lists extends ImmutablePureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.heading)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/mutes/index.js b/app/javascript/mastodon/features/mutes/index.js
index c21433cc4..65df6149f 100644
--- a/app/javascript/mastodon/features/mutes/index.js
+++ b/app/javascript/mastodon/features/mutes/index.js
@@ -11,6 +11,7 @@ import ColumnBackButtonSlim from '../../components/column_back_button_slim';
 import AccountContainer from '../../containers/account_container';
 import { fetchMutes, expandMutes } from '../../actions/mutes';
 import ScrollableList from '../../components/scrollable_list';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.mutes', defaultMessage: 'Muted users' },
@@ -72,6 +73,10 @@ class Mutes extends ImmutablePureComponent {
             <AccountContainer key={id} id={id} defaultAction='mute' />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index 4577bcb2d..f1bc5f160 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -281,6 +281,7 @@ class Notifications extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/pinned_statuses/index.js b/app/javascript/mastodon/features/pinned_statuses/index.js
index 67b13f10a..c6790ea06 100644
--- a/app/javascript/mastodon/features/pinned_statuses/index.js
+++ b/app/javascript/mastodon/features/pinned_statuses/index.js
@@ -8,6 +8,7 @@ import ColumnBackButtonSlim from '../../components/column_back_button_slim';
 import StatusList from '../../components/status_list';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.pins', defaultMessage: 'Pinned post' },
@@ -54,6 +55,9 @@ class PinnedStatuses extends ImmutablePureComponent {
           hasMore={hasMore}
           bindToDocument={!multiColumn}
         />
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/privacy_policy/index.js b/app/javascript/mastodon/features/privacy_policy/index.js
index eee4255f4..3df487e8f 100644
--- a/app/javascript/mastodon/features/privacy_policy/index.js
+++ b/app/javascript/mastodon/features/privacy_policy/index.js
@@ -15,6 +15,7 @@ class PrivacyPolicy extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object,
+    multiColumn: PropTypes.bool,
   };
 
   state = {
@@ -32,11 +33,11 @@ class PrivacyPolicy extends React.PureComponent {
   }
 
   render () {
-    const { intl } = this.props;
+    const { intl, multiColumn } = this.props;
     const { isLoading, content, lastUpdated } = this.state;
 
     return (
-      <Column>
+      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
         <div className='scrollable privacy-policy'>
           <div className='column-title'>
             <h3><FormattedMessage id='privacy_policy.title' defaultMessage='Privacy Policy' /></h3>
@@ -51,6 +52,7 @@ class PrivacyPolicy extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='all' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js
index 8dbef98c0..a41be07e1 100644
--- a/app/javascript/mastodon/features/public_timeline/index.js
+++ b/app/javascript/mastodon/features/public_timeline/index.js
@@ -153,6 +153,7 @@ class PublicTimeline extends React.PureComponent {
 
         <Helmet>
           <title>{intl.formatMessage(messages.title)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/reblogs/index.js b/app/javascript/mastodon/features/reblogs/index.js
index 7704a049f..70d338ef1 100644
--- a/app/javascript/mastodon/features/reblogs/index.js
+++ b/app/javascript/mastodon/features/reblogs/index.js
@@ -11,6 +11,7 @@ import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
 import Icon from 'mastodon/components/icon';
 import ColumnHeader from '../../components/column_header';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   refresh: { id: 'refresh', defaultMessage: 'Refresh' },
@@ -80,6 +81,10 @@ class Reblogs extends ImmutablePureComponent {
             <AccountContainer key={id} id={id} withNote={false} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index f9a97c9b5..02f390c6a 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { createSelector } from 'reselect';
 import { fetchStatus } from '../../actions/statuses';
 import MissingIndicator from '../../components/missing_indicator';
+import LoadingIndicator from 'mastodon/components/loading_indicator';
 import DetailedStatus from './components/detailed_status';
 import ActionBar from './components/action_bar';
 import Column from '../ui/components/column';
@@ -145,6 +146,7 @@ const makeMapStateToProps = () => {
     }
 
     return {
+      isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']),
       status,
       ancestorsIds,
       descendantsIds,
@@ -187,6 +189,7 @@ class Status extends ImmutablePureComponent {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
+    isLoading: PropTypes.bool,
     ancestorsIds: ImmutablePropTypes.list,
     descendantsIds: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
@@ -566,9 +569,17 @@ class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants;
-    const { status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
+    const { isLoading, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
     const { fullscreen } = this.state;
 
+    if (isLoading) {
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
+    }
+
     if (status === null) {
       return (
         <Column>
@@ -586,6 +597,9 @@ class Status extends ImmutablePureComponent {
       descendants = <div>{this.renderChildren(descendantsIds)}</div>;
     }
 
+    const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
+    const isIndexable = !status.getIn(['account', 'noindex']);
+
     const handlers = {
       moveUp: this.handleHotkeyMoveUp,
       moveDown: this.handleHotkeyMoveDown,
@@ -659,6 +673,7 @@ class Status extends ImmutablePureComponent {
 
         <Helmet>
           <title>{titleFromStatus(status)}</title>
+          <meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error.js b/app/javascript/mastodon/features/ui/components/bundle_column_error.js
index f39ebd900..ab6d4aa44 100644
--- a/app/javascript/mastodon/features/ui/components/bundle_column_error.js
+++ b/app/javascript/mastodon/features/ui/components/bundle_column_error.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-
-import Column from './column';
-import ColumnHeader from './column_header';
-import ColumnBackButtonSlim from '../../../components/column_back_button_slim';
-import IconButton from '../../../components/icon_button';
+import Column from 'mastodon/components/column';
+import ColumnHeader from 'mastodon/components/column_header';
+import IconButton from 'mastodon/components/icon_button';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
@@ -18,6 +17,7 @@ class BundleColumnError extends React.PureComponent {
   static propTypes = {
     onRetry: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    multiColumn: PropTypes.bool,
   }
 
   handleRetry = () => {
@@ -25,16 +25,25 @@ class BundleColumnError extends React.PureComponent {
   }
 
   render () {
-    const { intl: { formatMessage } } = this.props;
+    const { multiColumn, intl: { formatMessage } } = this.props;
 
     return (
-      <Column>
-        <ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
-        <ColumnBackButtonSlim />
+      <Column bindToDocument={!multiColumn} label={formatMessage(messages.title)}>
+        <ColumnHeader
+          icon='exclamation-circle'
+          title={formatMessage(messages.title)}
+          showBackButton
+          multiColumn={multiColumn}
+        />
+
         <div className='error-column'>
           <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
           {formatMessage(messages.body)}
         </div>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/mastodon/features/ui/components/column_loading.js b/app/javascript/mastodon/features/ui/components/column_loading.js
index 0cdfd05d8..e5ed22584 100644
--- a/app/javascript/mastodon/features/ui/components/column_loading.js
+++ b/app/javascript/mastodon/features/ui/components/column_loading.js
@@ -10,6 +10,7 @@ export default class ColumnLoading extends ImmutablePureComponent {
   static propTypes = {
     title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
     icon: PropTypes.string,
+    multiColumn: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -18,10 +19,11 @@ export default class ColumnLoading extends ImmutablePureComponent {
   };
 
   render() {
-    let { title, icon } = this.props;
+    let { title, icon, multiColumn } = this.props;
+
     return (
       <Column>
-        <ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} placeholder />
+        <ColumnHeader icon={icon} title={title} multiColumn={multiColumn} focusable={false} placeholder />
         <div className='scrollable' />
       </Column>
     );
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index cc1bc83e0..9ee6fca43 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -139,11 +139,11 @@ class ColumnsArea extends ImmutablePureComponent {
   }
 
   renderLoading = columnId => () => {
-    return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
+    return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading multiColumn />;
   }
 
   renderError = (props) => {
-    return <BundleColumnError {...props} />;
+    return <BundleColumnError multiColumn {...props} />;
   }
 
   render () {
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
index 5c273ffa4..2224a8207 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -11,9 +11,7 @@ import VideoModal from './video_modal';
 import BoostModal from './boost_modal';
 import AudioModal from './audio_modal';
 import ConfirmationModal from './confirmation_modal';
-import SubscribedLanguagesModal from 'mastodon/features/subscribed_languages_modal';
 import FocalPointModal from './focal_point_modal';
-import InteractionModal from 'mastodon/features/interaction_modal';
 import {
   MuteModal,
   BlockModal,
@@ -23,7 +21,10 @@ import {
   ListAdder,
   CompareHistoryModal,
   FilterModal,
+  InteractionModal,
+  SubscribedLanguagesModal,
 } from 'mastodon/features/ui/util/async-components';
+import { Helmet } from 'react-helmet';
 
 const MODAL_COMPONENTS = {
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
@@ -41,8 +42,8 @@ const MODAL_COMPONENTS = {
   'LIST_ADDER': ListAdder,
   'COMPARE_HISTORY': CompareHistoryModal,
   'FILTER': FilterModal,
-  'SUBSCRIBED_LANGUAGES': () => Promise.resolve({ default: SubscribedLanguagesModal }),
-  'INTERACTION': () => Promise.resolve({ default: InteractionModal }),
+  'SUBSCRIBED_LANGUAGES': SubscribedLanguagesModal,
+  'INTERACTION': InteractionModal,
 };
 
 export default class ModalRoot extends React.PureComponent {
@@ -111,9 +112,15 @@ export default class ModalRoot extends React.PureComponent {
     return (
       <Base backgroundColor={backgroundColor} onClose={this.handleClose} ignoreFocus={ignoreFocus}>
         {visible && (
-          <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
-            {(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
-          </BundleContainer>
+          <>
+            <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
+              {(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}
+            </BundleContainer>
+
+            <Helmet>
+              <meta name='robots' content='noindex' />
+            </Helmet>
+          </>
         )}
       </Base>
     );
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 8f9f38036..003991857 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -197,8 +197,8 @@ class SwitchingColumnsArea extends React.PureComponent {
           <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
           <WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
           <WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
-          <WrappedRoute path={['/@:acct/followers', '/accounts/:id/followers']} component={Followers} content={children} />
-          <WrappedRoute path={['/@:acct/following', '/accounts/:id/following']} component={Following} content={children} />
+          <WrappedRoute path={['/accounts/:id/followers', '/users/:acct/followers', '/@:acct/followers']} component={Followers} content={children} />
+          <WrappedRoute path={['/accounts/:id/following', '/users/:acct/following', '/@:acct/following']} component={Following} content={children} />
           <WrappedRoute path={['/@:acct/media', '/accounts/:id/media']} component={AccountGallery} content={children} />
           <WrappedRoute path='/@:acct/:statusId' exact component={Status} content={children} />
           <WrappedRoute path='/@:acct/:statusId/reblogs' component={Reblogs} content={children} />
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index c79dc014c..7686a69ea 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -166,6 +166,14 @@ export function FilterModal () {
   return import(/*webpackChunkName: "modals/filter_modal" */'../components/filter_modal');
 }
 
+export function InteractionModal () {
+  return import(/*webpackChunkName: "modals/interaction_modal" */'../../interaction_modal');
+}
+
+export function SubscribedLanguagesModal () {
+  return import(/*webpackChunkName: "modals/subscribed_languages_modal" */'../../subscribed_languages_modal');
+}
+
 export function About () {
   return import(/*webpackChunkName: "features/about" */'../../about');
 }
diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js
index d452b871f..a65d79def 100644
--- a/app/javascript/mastodon/features/ui/util/react_router_helpers.js
+++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js
@@ -53,7 +53,9 @@ export class WrappedRoute extends React.Component {
   }
 
   renderLoading = () => {
-    return <ColumnLoading />;
+    const { multiColumn } = this.props;
+
+    return <ColumnLoading multiColumn={multiColumn} />;
   }
 
   renderError = (props) => {
diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js
index f33375b50..d0337ce0c 100644
--- a/app/javascript/mastodon/main.js
+++ b/app/javascript/mastodon/main.js
@@ -12,14 +12,6 @@ const perf = require('mastodon/performance');
 function main() {
   perf.start('main()');
 
-  if (window.history && history.replaceState) {
-    const { pathname, search, hash } = window.location;
-    const path = pathname + search + hash;
-    if (!(/^\/web($|\/)/).test(path)) {
-      history.replaceState(null, document.title, `/web${path}`);
-    }
-  }
-
   return ready(async () => {
     const mountNode = document.getElementById('mastodon');
     const props = JSON.parse(mountNode.getAttribute('data-props'));
diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js
index 7efb49d85..c30c1e2cc 100644
--- a/app/javascript/mastodon/reducers/statuses.js
+++ b/app/javascript/mastodon/reducers/statuses.js
@@ -15,6 +15,8 @@ import {
   STATUS_COLLAPSE,
   STATUS_TRANSLATE_SUCCESS,
   STATUS_TRANSLATE_UNDO,
+  STATUS_FETCH_REQUEST,
+  STATUS_FETCH_FAIL,
 } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer';
@@ -37,6 +39,10 @@ const initialState = ImmutableMap();
 
 export default function statuses(state = initialState, action) {
   switch(action.type) {
+  case STATUS_FETCH_REQUEST:
+    return state.setIn([action.id, 'isLoading'], true);
+  case STATUS_FETCH_FAIL:
+    return state.delete(action.id);
   case STATUS_IMPORT:
     return importStatus(state, action.status);
   case STATUSES_IMPORT:
diff --git a/app/javascript/mastodon/selectors/index.js b/app/javascript/mastodon/selectors/index.js
index 3dd7f4897..bf46c810e 100644
--- a/app/javascript/mastodon/selectors/index.js
+++ b/app/javascript/mastodon/selectors/index.js
@@ -41,7 +41,7 @@ export const makeGetStatus = () => {
     ],
 
     (statusBase, statusReblog, accountBase, accountReblog, filters) => {
-      if (!statusBase) {
+      if (!statusBase || statusBase.get('isLoading')) {
         return null;
       }
 
diff --git a/app/javascript/mastodon/service_worker/web_push_notifications.js b/app/javascript/mastodon/service_worker/web_push_notifications.js
index 9b75e9b9d..f12595777 100644
--- a/app/javascript/mastodon/service_worker/web_push_notifications.js
+++ b/app/javascript/mastodon/service_worker/web_push_notifications.js
@@ -15,7 +15,7 @@ const notify = options =>
         icon: '/android-chrome-192x192.png',
         tag: GROUP_TAG,
         data: {
-          url: (new URL('/web/notifications', self.location)).href,
+          url: (new URL('/notifications', self.location)).href,
           count: notifications.length + 1,
           preferred_locale: options.data.preferred_locale,
         },
@@ -90,7 +90,7 @@ export const handlePush = (event) => {
       options.tag       = notification.id;
       options.badge     = '/badge.png';
       options.image     = notification.status && notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url || undefined;
-      options.data      = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/web/@${notification.account.acct}/${notification.status.id}` : `/web/@${notification.account.acct}` };
+      options.data      = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.acct}/${notification.status.id}` : `/@${notification.account.acct}` };
 
       if (notification.status && notification.status.spoiler_text || notification.status.sensitive) {
         options.data.hiddenBody  = htmlToPlainText(notification.status.content);
@@ -115,7 +115,7 @@ export const handlePush = (event) => {
         tag: notification_id,
         timestamp: new Date(),
         badge: '/badge.png',
-        data: { access_token, preferred_locale, url: '/web/notifications' },
+        data: { access_token, preferred_locale, url: '/notifications' },
       });
     }),
   );
@@ -166,24 +166,10 @@ const removeActionFromNotification = (notification, action) => {
 
 const openUrl = url =>
   self.clients.matchAll({ type: 'window' }).then(clientList => {
-    if (clientList.length !== 0) {
-      const webClients = clientList.filter(client => /\/web\//.test(client.url));
-
-      if (webClients.length !== 0) {
-        const client       = findBestClient(webClients);
-        const { pathname } = new URL(url, self.location);
-
-        if (pathname.startsWith('/web/')) {
-          return client.focus().then(client => client.postMessage({
-            type: 'navigate',
-            path: pathname.slice('/web/'.length - 1),
-          }));
-        }
-      } else if ('navigate' in clientList[0]) { // Chrome 42-48 does not support navigate
-        const client = findBestClient(clientList);
+    if (clientList.length !== 0 && 'navigate' in clientList[0]) { // Chrome 42-48 does not support navigate
+      const client = findBestClient(clientList);
 
-        return client.navigate(url).then(client => client.focus());
-      }
+      return client.navigate(url).then(client => client.focus());
     }
 
     return self.clients.openWindow(url);
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index e42468e0c..5ff45fa55 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -33,7 +33,6 @@ function main() {
   const { messages } = getLocale();
   const React = require('react');
   const ReactDOM = require('react-dom');
-  const Rellax = require('rellax');
   const { createBrowserHistory } = require('history');
 
   const scrollToDetailedStatus = () => {
@@ -112,12 +111,6 @@ function main() {
       scrollToDetailedStatus();
     }
 
-    const parallaxComponents = document.querySelectorAll('.parallax');
-
-    if (parallaxComponents.length > 0 ) {
-      new Rellax('.parallax', { speed: -1 });
-    }
-
     delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => {
       const password = document.getElementById('registration_user_password');
       const confirmation = document.getElementById('registration_user_password_confirmation');
@@ -168,28 +161,6 @@ function main() {
     });
   });
 
-  delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
-    if (button !== 0) {
-      return true;
-    }
-    window.location.href = target.href;
-    return false;
-  });
-
-  delegate(document, '.modal-button', 'click', e => {
-    e.preventDefault();
-
-    let href;
-
-    if (e.target.nodeName !== 'A') {
-      href = e.target.parentNode.href;
-    } else {
-      href = e.target.href;
-    }
-
-    window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
-  });
-
   delegate(document, '#account_display_name', 'input', ({ target }) => {
     const name = document.querySelector('.card .display-name strong');
     if (name) {
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index e9f596e2f..81a040108 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -8,7 +8,6 @@
 @import 'mastodon/branding';
 @import 'mastodon/containers';
 @import 'mastodon/lists';
-@import 'mastodon/footer';
 @import 'mastodon/widgets';
 @import 'mastodon/forms';
 @import 'mastodon/accounts';
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index 22f5bcc94..27eb837df 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -68,10 +68,6 @@
   color: $darker-text-color;
 }
 
-.public-layout .public-account-header__tabs__tabs .counter.active::after {
-  border-bottom: 4px solid $ui-highlight-color;
-}
-
 .compose-form .autosuggest-textarea__textarea::placeholder,
 .compose-form .spoiler-input__input::placeholder {
   color: $inverted-text-color;
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 4b27e6b4f..20e973b8b 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -655,95 +655,6 @@ html {
   }
 }
 
-.public-layout {
-  .account__section-headline {
-    border: 1px solid lighten($ui-base-color, 8%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 0;
-    }
-  }
-
-  .header,
-  .public-account-header,
-  .public-account-bio {
-    box-shadow: none;
-  }
-
-  .public-account-bio,
-  .hero-widget__text {
-    background: $account-background-color;
-  }
-
-  .header {
-    background: $ui-base-color;
-    border: 1px solid lighten($ui-base-color, 8%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border: 0;
-    }
-
-    .brand {
-      &:hover,
-      &:focus,
-      &:active {
-        background: lighten($ui-base-color, 4%);
-      }
-    }
-  }
-
-  .public-account-header {
-    &__image {
-      background: lighten($ui-base-color, 12%);
-
-      &::after {
-        box-shadow: none;
-      }
-    }
-
-    &__bar {
-      &::before {
-        background: $account-background-color;
-        border: 1px solid lighten($ui-base-color, 8%);
-        border-top: 0;
-      }
-
-      .avatar img {
-        border-color: $account-background-color;
-      }
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        background: $account-background-color;
-        border: 1px solid lighten($ui-base-color, 8%);
-        border-top: 0;
-      }
-    }
-
-    &__tabs {
-      &__name {
-        h1,
-        h1 small {
-          color: $white;
-
-          @media screen and (max-width: $no-columns-breakpoint) {
-            color: $primary-text-color;
-          }
-        }
-      }
-    }
-
-    &__extra {
-      .public-account-bio {
-        border: 0;
-      }
-
-      .public-account-bio .account__header__fields {
-        border-color: lighten($ui-base-color, 8%);
-      }
-    }
-  }
-}
-
 .notification__filter-bar button.active::after,
 .account__section-headline a.active::after {
   border-color: transparent transparent $white;
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 8e5ed03f0..b49b93984 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -104,785 +104,3 @@
     margin-left: 10px;
   }
 }
-
-.grid-3 {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: 3fr 1fr;
-  grid-auto-columns: 25%;
-  grid-auto-rows: max-content;
-
-  .column-0 {
-    grid-column: 1 / 3;
-    grid-row: 1;
-  }
-
-  .column-1 {
-    grid-column: 1;
-    grid-row: 2;
-  }
-
-  .column-2 {
-    grid-column: 2;
-    grid-row: 2;
-  }
-
-  .column-3 {
-    grid-column: 1 / 3;
-    grid-row: 3;
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    grid-gap: 0;
-    grid-template-columns: minmax(0, 100%);
-
-    .column-0 {
-      grid-column: 1;
-    }
-
-    .column-1 {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .column-2 {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .column-3 {
-      grid-column: 1;
-      grid-row: 4;
-    }
-  }
-}
-
-.grid-4 {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  grid-auto-columns: 25%;
-  grid-auto-rows: max-content;
-
-  .column-0 {
-    grid-column: 1 / 5;
-    grid-row: 1;
-  }
-
-  .column-1 {
-    grid-column: 1 / 4;
-    grid-row: 2;
-  }
-
-  .column-2 {
-    grid-column: 4;
-    grid-row: 2;
-  }
-
-  .column-3 {
-    grid-column: 2 / 5;
-    grid-row: 3;
-  }
-
-  .column-4 {
-    grid-column: 1;
-    grid-row: 3;
-  }
-
-  .landing-page__call-to-action {
-    min-height: 100%;
-  }
-
-  .flash-message {
-    margin-bottom: 10px;
-  }
-
-  @media screen and (max-width: 738px) {
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-
-    .landing-page__call-to-action {
-      padding: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .row__information-board {
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .row__mascot {
-      display: none;
-    }
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    grid-gap: 0;
-    grid-template-columns: minmax(0, 100%);
-
-    .column-0 {
-      grid-column: 1;
-    }
-
-    .column-1 {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .column-2 {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .column-3 {
-      grid-column: 1;
-      grid-row: 5;
-    }
-
-    .column-4 {
-      grid-column: 1;
-      grid-row: 4;
-    }
-  }
-}
-
-.public-layout {
-  @media screen and (max-width: $no-gap-breakpoint) {
-    padding-top: 48px;
-  }
-
-  .container {
-    max-width: 960px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding: 0;
-    }
-  }
-
-  .header {
-    background: lighten($ui-base-color, 8%);
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    border-radius: 4px;
-    height: 48px;
-    margin: 10px 0;
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
-    flex-wrap: nowrap;
-    overflow: hidden;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      position: fixed;
-      width: 100%;
-      top: 0;
-      left: 0;
-      margin: 0;
-      border-radius: 0;
-      box-shadow: none;
-      z-index: 110;
-    }
-
-    & > div {
-      flex: 1 1 33.3%;
-      min-height: 1px;
-    }
-
-    .nav-left {
-      display: flex;
-      align-items: stretch;
-      justify-content: flex-start;
-      flex-wrap: nowrap;
-    }
-
-    .nav-center {
-      display: flex;
-      align-items: stretch;
-      justify-content: center;
-      flex-wrap: nowrap;
-    }
-
-    .nav-right {
-      display: flex;
-      align-items: stretch;
-      justify-content: flex-end;
-      flex-wrap: nowrap;
-    }
-
-    .brand {
-      display: block;
-      padding: 15px;
-
-      .logo {
-        display: block;
-        height: 18px;
-        width: auto;
-        position: relative;
-        bottom: -2px;
-        fill: $primary-text-color;
-
-        @media screen and (max-width: $no-gap-breakpoint) {
-          height: 20px;
-        }
-      }
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: lighten($ui-base-color, 12%);
-      }
-    }
-
-    .nav-link {
-      display: flex;
-      align-items: center;
-      padding: 0 1rem;
-      font-size: 12px;
-      font-weight: 500;
-      text-decoration: none;
-      color: $darker-text-color;
-      white-space: nowrap;
-      text-align: center;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-        color: $primary-text-color;
-      }
-
-      @media screen and (max-width: 550px) {
-        &.optional {
-          display: none;
-        }
-      }
-    }
-
-    .nav-button {
-      background: lighten($ui-base-color, 16%);
-      margin: 8px;
-      margin-left: 0;
-      border-radius: 4px;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: none;
-        background: lighten($ui-base-color, 20%);
-      }
-    }
-  }
-
-  $no-columns-breakpoint: 600px;
-
-  .grid {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
-    grid-auto-columns: 25%;
-    grid-auto-rows: max-content;
-
-    .column-0 {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    .column-1 {
-      grid-row: 1;
-      grid-column: 2;
-    }
-
-    @media screen and (max-width: $no-columns-breakpoint) {
-      grid-template-columns: 100%;
-      grid-gap: 0;
-
-      .column-1 {
-        display: none;
-      }
-    }
-  }
-
-  .page-header {
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-bottom: 0;
-    }
-  }
-
-  .public-account-header {
-    overflow: hidden;
-    margin-bottom: 10px;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
-    &.inactive {
-      opacity: 0.5;
-
-      .public-account-header__image,
-      .avatar {
-        filter: grayscale(100%);
-      }
-
-      .logo-button {
-        background-color: $secondary-text-color;
-      }
-    }
-
-    .logo-button {
-      padding: 3px 15px;
-    }
-
-    &__image {
-      border-radius: 4px 4px 0 0;
-      overflow: hidden;
-      height: 300px;
-      position: relative;
-      background: darken($ui-base-color, 12%);
-
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
-        top: 0;
-        left: 0;
-      }
-
-      img {
-        object-fit: cover;
-        display: block;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border-radius: 4px 4px 0 0;
-      }
-
-      @media screen and (max-width: 600px) {
-        height: 200px;
-      }
-    }
-
-    &--no-bar {
-      margin-bottom: 0;
-
-      .public-account-header__image,
-      .public-account-header__image img {
-        border-radius: 4px;
-
-        @media screen and (max-width: $no-gap-breakpoint) {
-          border-radius: 0;
-        }
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      margin-bottom: 0;
-      box-shadow: none;
-
-      &__image::after {
-        display: none;
-      }
-
-      &__image,
-      &__image img {
-        border-radius: 0;
-      }
-    }
-
-    &__bar {
-      position: relative;
-      margin-top: -80px;
-      display: flex;
-      justify-content: flex-start;
-
-      &::before {
-        content: "";
-        display: block;
-        background: lighten($ui-base-color, 4%);
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 60px;
-        border-radius: 0 0 4px 4px;
-        z-index: -1;
-      }
-
-      .avatar {
-        display: block;
-        width: 120px;
-        height: 120px;
-        padding-left: 20px - 4px;
-        flex: 0 0 auto;
-
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          border-radius: 50%;
-          border: 4px solid lighten($ui-base-color, 4%);
-          background: darken($ui-base-color, 8%);
-        }
-      }
-
-      @media screen and (max-width: 600px) {
-        margin-top: 0;
-        background: lighten($ui-base-color, 4%);
-        border-radius: 0 0 4px 4px;
-        padding: 5px;
-
-        &::before {
-          display: none;
-        }
-
-        .avatar {
-          width: 48px;
-          height: 48px;
-          padding: 7px 0;
-          padding-left: 10px;
-
-          img {
-            border: 0;
-            border-radius: 4px;
-          }
-
-          @media screen and (max-width: 360px) {
-            display: none;
-          }
-        }
-      }
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        border-radius: 0;
-      }
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        flex-wrap: wrap;
-      }
-    }
-
-    &__tabs {
-      flex: 1 1 auto;
-      margin-left: 20px;
-
-      &__name {
-        padding-top: 20px;
-        padding-bottom: 8px;
-
-        h1 {
-          font-size: 20px;
-          line-height: 18px * 1.5;
-          color: $primary-text-color;
-          font-weight: 500;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          text-shadow: 1px 1px 1px $base-shadow-color;
-
-          small {
-            display: block;
-            font-size: 14px;
-            color: $primary-text-color;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-
-      @media screen and (max-width: 600px) {
-        margin-left: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        &__name {
-          padding-top: 0;
-          padding-bottom: 0;
-
-          h1 {
-            font-size: 16px;
-            line-height: 24px;
-            text-shadow: none;
-
-            small {
-              color: $darker-text-color;
-            }
-          }
-        }
-      }
-
-      &__tabs {
-        display: flex;
-        justify-content: flex-start;
-        align-items: stretch;
-        height: 58px;
-
-        .details-counters {
-          display: flex;
-          flex-direction: row;
-          min-width: 300px;
-        }
-
-        @media screen and (max-width: $no-columns-breakpoint) {
-          .details-counters {
-            display: none;
-          }
-        }
-
-        .counter {
-          min-width: 33.3%;
-          box-sizing: border-box;
-          flex: 0 0 auto;
-          color: $darker-text-color;
-          padding: 10px;
-          border-right: 1px solid lighten($ui-base-color, 4%);
-          cursor: default;
-          text-align: center;
-          position: relative;
-
-          a {
-            display: block;
-          }
-
-          &:last-child {
-            border-right: 0;
-          }
-
-          &::after {
-            display: block;
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            border-bottom: 4px solid $ui-primary-color;
-            opacity: 0.5;
-            transition: all 400ms ease;
-          }
-
-          &.active {
-            &::after {
-              border-bottom: 4px solid $highlight-text-color;
-              opacity: 1;
-            }
-
-            &.inactive::after {
-              border-bottom-color: $secondary-text-color;
-            }
-          }
-
-          &:hover {
-            &::after {
-              opacity: 1;
-              transition-duration: 100ms;
-            }
-          }
-
-          a {
-            text-decoration: none;
-            color: inherit;
-          }
-
-          .counter-label {
-            font-size: 12px;
-            display: block;
-          }
-
-          .counter-number {
-            font-weight: 500;
-            font-size: 18px;
-            margin-bottom: 5px;
-            color: $primary-text-color;
-            font-family: $font-display, sans-serif;
-          }
-        }
-
-        .spacer {
-          flex: 1 1 auto;
-          height: 1px;
-        }
-
-        &__buttons {
-          padding: 7px 8px;
-        }
-      }
-    }
-
-    &__extra {
-      display: none;
-      margin-top: 4px;
-
-      .public-account-bio {
-        border-radius: 0;
-        box-shadow: none;
-        background: transparent;
-        margin: 0 -5px;
-
-        .account__header__fields {
-          border-top: 1px solid lighten($ui-base-color, 12%);
-        }
-
-        .roles {
-          display: none;
-        }
-      }
-
-      &__links {
-        margin-top: -15px;
-        font-size: 14px;
-        color: $darker-text-color;
-
-        a {
-          display: inline-block;
-          color: $darker-text-color;
-          text-decoration: none;
-          padding: 15px;
-          font-weight: 500;
-
-          strong {
-            font-weight: 700;
-            color: $primary-text-color;
-          }
-        }
-      }
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        display: block;
-        flex: 100%;
-      }
-    }
-  }
-
-  .account__section-headline {
-    border-radius: 4px 4px 0 0;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-radius: 0;
-    }
-  }
-
-  .detailed-status__meta {
-    margin-top: 25px;
-  }
-
-  .public-account-bio {
-    background: lighten($ui-base-color, 8%);
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    border-radius: 4px;
-    overflow: hidden;
-    margin-bottom: 10px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      box-shadow: none;
-      margin-bottom: 0;
-      border-radius: 0;
-    }
-
-    .account__header__fields {
-      margin: 0;
-      border-top: 0;
-
-      a {
-        color: $highlight-text-color;
-      }
-
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
-
-      .verified a {
-        color: $valid-value-color;
-      }
-    }
-
-    .account__header__content {
-      padding: 20px;
-      padding-bottom: 0;
-      color: $primary-text-color;
-    }
-
-    &__extra,
-    .roles {
-      padding: 20px;
-      font-size: 14px;
-      color: $darker-text-color;
-    }
-
-    .roles {
-      padding-bottom: 0;
-    }
-  }
-
-  .directory__list {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-
-    .account-card {
-      display: flex;
-      flex-direction: column;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      display: block;
-
-      .account-card {
-        margin-bottom: 10px;
-        display: block;
-      }
-    }
-  }
-
-  .card-grid {
-    display: flex;
-    flex-wrap: wrap;
-    min-width: 100%;
-    margin: 0 -5px;
-
-    & > div {
-      box-sizing: border-box;
-      flex: 1 0 auto;
-      width: 300px;
-      padding: 0 5px;
-      margin-bottom: 10px;
-      max-width: 33.333%;
-
-      @media screen and (max-width: 900px) {
-        max-width: 50%;
-      }
-
-      @media screen and (max-width: 600px) {
-        max-width: 100%;
-      }
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      margin: 0;
-      border-top: 1px solid lighten($ui-base-color, 8%);
-
-      & > div {
-        width: 100%;
-        padding: 0;
-        margin-bottom: 0;
-        border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-        &:last-child {
-          border-bottom: 0;
-        }
-
-        .card__bar {
-          background: $ui-base-color;
-
-          &:hover,
-          &:active,
-          &:focus {
-            background: lighten($ui-base-color, 4%);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss
deleted file mode 100644
index 0c3e42033..000000000
--- a/app/javascript/styles/mastodon/footer.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-.public-layout {
-  .footer {
-    text-align: left;
-    padding-top: 20px;
-    padding-bottom: 60px;
-    font-size: 12px;
-    color: lighten($ui-base-color, 34%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-
-    .grid {
-      display: grid;
-      grid-gap: 10px;
-      grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
-
-      .column-0 {
-        grid-column: 1;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      .column-1 {
-        grid-column: 2;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      .column-2 {
-        grid-column: 3;
-        grid-row: 1;
-        min-width: 0;
-        text-align: center;
-
-        h4 a {
-          color: lighten($ui-base-color, 34%);
-        }
-      }
-
-      .column-3 {
-        grid-column: 4;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      .column-4 {
-        grid-column: 5;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      @media screen and (max-width: 690px) {
-        grid-template-columns: 1fr 2fr 1fr;
-
-        .column-0,
-        .column-1 {
-          grid-column: 1;
-        }
-
-        .column-1 {
-          grid-row: 2;
-        }
-
-        .column-2 {
-          grid-column: 2;
-        }
-
-        .column-3,
-        .column-4 {
-          grid-column: 3;
-        }
-
-        .column-4 {
-          grid-row: 2;
-        }
-      }
-
-      @media screen and (max-width: 600px) {
-        .column-1 {
-          display: block;
-        }
-      }
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        .column-0,
-        .column-1,
-        .column-3,
-        .column-4 {
-          display: none;
-        }
-
-        .column-2 h4 {
-          display: none;
-        }
-      }
-    }
-
-    .legal-xs {
-      display: none;
-      text-align: center;
-      padding-top: 20px;
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        display: block;
-      }
-    }
-
-    h4 {
-      text-transform: uppercase;
-      font-weight: 700;
-      margin-bottom: 8px;
-      color: $darker-text-color;
-
-      a {
-        color: inherit;
-        text-decoration: none;
-      }
-    }
-
-    ul a,
-    .legal-xs a {
-      text-decoration: none;
-      color: lighten($ui-base-color, 34%);
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-
-    .brand {
-      .logo {
-        display: block;
-        height: 36px;
-        width: auto;
-        margin: 0 auto;
-        color: lighten($ui-base-color, 34%);
-      }
-
-      &:hover,
-      &:focus,
-      &:active {
-        .logo {
-          color: lighten($ui-base-color, 38%);
-        }
-      }
-    }
-  }
-}
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index 98eb1511c..ccec8e95e 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -53,16 +53,6 @@ body.rtl {
     right: -26px;
   }
 
-  .landing-page__logo {
-    margin-right: 0;
-    margin-left: 20px;
-  }
-
-  .landing-page .features-list .features-list__row .visual {
-    margin-left: 0;
-    margin-right: 15px;
-  }
-
   .column-link__icon,
   .column-header__icon {
     margin-right: 0;
@@ -350,44 +340,6 @@ body.rtl {
     margin-left: 45px;
   }
 
-  .landing-page .header-wrapper .mascot {
-    right: 60px;
-    left: auto;
-  }
-
-  .landing-page__call-to-action .row__information-board {
-    direction: rtl;
-  }
-
-  .landing-page .header .hero .floats .float-1 {
-    left: -120px;
-    right: auto;
-  }
-
-  .landing-page .header .hero .floats .float-2 {
-    left: 210px;
-    right: auto;
-  }
-
-  .landing-page .header .hero .floats .float-3 {
-    left: 110px;
-    right: auto;
-  }
-
-  .landing-page .header .links .brand img {
-    left: 0;
-  }
-
-  .landing-page .fa-external-link {
-    padding-right: 5px;
-    padding-left: 0 !important;
-  }
-
-  .landing-page .features #mastodon-timeline {
-    margin-right: 0;
-    margin-left: 30px;
-  }
-
   @media screen and (min-width: 631px) {
     .column,
     .drawer {
@@ -415,32 +367,6 @@ body.rtl {
     padding-right: 0;
   }
 
-  .public-layout {
-    .header {
-      .nav-button {
-        margin-left: 8px;
-        margin-right: 0;
-      }
-    }
-
-    .public-account-header__tabs {
-      margin-left: 0;
-      margin-right: 20px;
-    }
-  }
-
-  .landing-page__information {
-    .account__display-name {
-      margin-right: 0;
-      margin-left: 5px;
-    }
-
-    .account__avatar-wrapper {
-      margin-left: 12px;
-      margin-right: 0;
-    }
-  }
-
   .card__bar .display-name {
     margin-left: 0;
     margin-right: 15px;
diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss
index a3237a630..ce71d11e4 100644
--- a/app/javascript/styles/mastodon/statuses.scss
+++ b/app/javascript/styles/mastodon/statuses.scss
@@ -137,8 +137,7 @@ a.button.logo-button {
   justify-content: center;
 }
 
-.embed,
-.public-layout {
+.embed {
   .status__content[data-spoiler="folded"] {
     .e-content {
       display: none;
diff --git a/app/lib/permalink_redirector.rb b/app/lib/permalink_redirector.rb
index 6d15f3963..cf1a37625 100644
--- a/app/lib/permalink_redirector.rb
+++ b/app/lib/permalink_redirector.rb
@@ -8,16 +8,14 @@ class PermalinkRedirector
   end
 
   def redirect_path
-    if path_segments[0] == 'web'
-      if path_segments[1].present? && path_segments[1].start_with?('@') && path_segments[2] =~ /\d/
-        find_status_url_by_id(path_segments[2])
-      elsif path_segments[1].present? && path_segments[1].start_with?('@')
-        find_account_url_by_name(path_segments[1])
-      elsif path_segments[1] == 'statuses' && path_segments[2] =~ /\d/
-        find_status_url_by_id(path_segments[2])
-      elsif path_segments[1] == 'accounts' && path_segments[2] =~ /\d/
-        find_account_url_by_id(path_segments[2])
-      end
+    if path_segments[0].present? && path_segments[0].start_with?('@') && path_segments[1] =~ /\d/
+      find_status_url_by_id(path_segments[1])
+    elsif path_segments[0].present? && path_segments[0].start_with?('@')
+      find_account_url_by_name(path_segments[0])
+    elsif path_segments[0] == 'statuses' && path_segments[1] =~ /\d/
+      find_status_url_by_id(path_segments[1])
+    elsif path_segments[0] == 'accounts' && path_segments[1] =~ /\d/
+      find_account_url_by_id(path_segments[1])
     end
   end
 
@@ -29,18 +27,12 @@ class PermalinkRedirector
 
   def find_status_url_by_id(id)
     status = Status.find_by(id: id)
-
-    return unless status&.distributable?
-
-    ActivityPub::TagManager.instance.url_for(status)
+    ActivityPub::TagManager.instance.url_for(status) if status&.distributable? && !status.account.local?
   end
 
   def find_account_url_by_id(id)
     account = Account.find_by(id: id)
-
-    return unless account
-
-    ActivityPub::TagManager.instance.url_for(account)
+    ActivityPub::TagManager.instance.url_for(account) if account.present? && !account.local?
   end
 
   def find_account_url_by_name(name)
@@ -48,12 +40,6 @@ class PermalinkRedirector
     domain           = nil if TagManager.instance.local_domain?(domain)
     account          = Account.find_remote(username, domain)
 
-    return unless account
-
-    ActivityPub::TagManager.instance.url_for(account)
-  end
-
-  def find_tag_url_by_name(name)
-    tag_path(CGI.unescape(name))
+    ActivityPub::TagManager.instance.url_for(account) if account.present? && !account.local?
   end
 end
diff --git a/app/models/account.rb b/app/models/account.rb
index 1be7b4d12..df7fa8d50 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -134,6 +134,7 @@ class Account < ApplicationRecord
            :role,
            :locale,
            :shows_application?,
+           :prefers_noindex?,
            to: :user,
            prefix: true,
            allow_nil: true
diff --git a/app/models/user.rb b/app/models/user.rb
index 4767189a0..6d566b1c2 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -281,6 +281,10 @@ class User < ApplicationRecord
     save!
   end
 
+  def prefers_noindex?
+    setting_noindex
+  end
+
   def preferred_posting_language
     valid_locale_cascade(settings.default_language, locale, I18n.locale)
   end
diff --git a/app/serializers/rest/account_serializer.rb b/app/serializers/rest/account_serializer.rb
index c52a89d87..e521dacaa 100644
--- a/app/serializers/rest/account_serializer.rb
+++ b/app/serializers/rest/account_serializer.rb
@@ -14,6 +14,7 @@ class REST::AccountSerializer < ActiveModel::Serializer
 
   attribute :suspended, if: :suspended?
   attribute :silenced, key: :limited, if: :silenced?
+  attribute :noindex, if: :local?
 
   class FieldSerializer < ActiveModel::Serializer
     include FormattingHelper
@@ -103,7 +104,11 @@ class REST::AccountSerializer < ActiveModel::Serializer
     object.silenced?
   end
 
-  delegate :suspended?, :silenced?, to: :object
+  def noindex
+    object.user_prefers_noindex?
+  end
+
+  delegate :suspended?, :silenced?, :local?, to: :object
 
   def moved_and_not_nested?
     object.moved? && object.moved_to_account.moved_to_account_id.nil?
diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
index aff28b9a9..05d8989ad 100644
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@@ -1,4 +1,7 @@
 - content_for :page_title do
   = t('about.title')
 
+- content_for :header_tags do
+  = render partial: 'shared/og'
+
 = render partial: 'shared/web_app'
diff --git a/app/views/accounts/_bio.html.haml b/app/views/accounts/_bio.html.haml
deleted file mode 100644
index e2539b1d4..000000000
--- a/app/views/accounts/_bio.html.haml
+++ /dev/null
@@ -1,21 +0,0 @@
-- fields = account.fields
-
-.public-account-bio
-  - unless fields.empty?
-    .account__header__fields
-      - fields.each do |field|
-        %dl
-          %dt.emojify{ title: field.name }= prerender_custom_emojis(h(field.name), account.emojis)
-          %dd{ title: field.value, class: custom_field_classes(field) }
-            - if field.verified?
-              %span.verified__mark{ title: t('accounts.link_verified_on', date: l(field.verified_at)) }
-                = fa_icon 'check'
-            = prerender_custom_emojis(account_field_value_format(field), account.emojis)
-
-  = account_badge(account)
-
-  - if account.note.present?
-    .account__header__content.emojify= prerender_custom_emojis(account_bio_format(account), account.emojis)
-
-  .public-account-bio__extra
-    = t 'accounts.joined', date: l(account.created_at, format: :month)
diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml
deleted file mode 100644
index d9966723a..000000000
--- a/app/views/accounts/_header.html.haml
+++ /dev/null
@@ -1,43 +0,0 @@
-.public-account-header{:class => ("inactive" if account.moved?)}
-  .public-account-header__image
-    = image_tag (prefers_autoplay? ? account.header_original_url : account.header_static_url), class: 'parallax'
-  .public-account-header__bar
-    = link_to short_account_url(account), class: 'avatar' do
-      = image_tag (prefers_autoplay? ? account.avatar_original_url : account.avatar_static_url), id: 'profile_page_avatar', data: { original: full_asset_url(account.avatar_original_url), static: full_asset_url(account.avatar_static_url), autoplay: prefers_autoplay? }
-    .public-account-header__tabs
-      .public-account-header__tabs__name
-        %h1
-          = display_name(account, custom_emojify: true)
-          %small
-            = acct(account)
-            = fa_icon('lock') if account.locked?
-      .public-account-header__tabs__tabs
-        .details-counters
-          .counter{ class: active_nav_class(short_account_url(account), short_account_with_replies_url(account), short_account_media_url(account)) }
-            = link_to short_account_url(account), class: 'u-url u-uid', title: number_with_delimiter(account.statuses_count) do
-              %span.counter-number= friendly_number_to_human account.statuses_count
-              %span.counter-label= t('accounts.posts', count: account.statuses_count)
-
-          .counter{ class: active_nav_class(account_following_index_url(account)) }
-            = link_to account_following_index_url(account), title: number_with_delimiter(account.following_count) do
-              %span.counter-number= friendly_number_to_human account.following_count
-              %span.counter-label= t('accounts.following', count: account.following_count)
-
-          .counter{ class: active_nav_class(account_followers_url(account)) }
-            = link_to account_followers_url(account), title: number_with_delimiter(account.followers_count) do
-              %span.counter-number= friendly_number_to_human account.followers_count
-              %span.counter-label= t('accounts.followers', count: account.followers_count)
-        .spacer
-        .public-account-header__tabs__tabs__buttons
-          = account_action_button(account)
-
-    .public-account-header__extra
-      = render 'accounts/bio', account: account
-
-      .public-account-header__extra__links
-        = link_to account_following_index_url(account) do
-          %strong= friendly_number_to_human account.following_count
-          = t('accounts.following', count: account.following_count)
-        = link_to account_followers_url(account) do
-          %strong= friendly_number_to_human account.followers_count
-          = t('accounts.followers', count: account.followers_count)
diff --git a/app/views/accounts/_moved.html.haml b/app/views/accounts/_moved.html.haml
deleted file mode 100644
index 2f46e0dd0..000000000
--- a/app/views/accounts/_moved.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-- moved_to_account = account.moved_to_account
-
-.moved-account-widget
-  .moved-account-widget__message
-    = fa_icon 'suitcase'
-    = t('accounts.moved_html', name: content_tag(:bdi, content_tag(:strong, display_name(account, custom_emojify: true), class: :emojify)), new_profile_link: link_to(content_tag(:strong, safe_join(['@', content_tag(:span, moved_to_account.pretty_acct)])), ActivityPub::TagManager.instance.url_for(moved_to_account), class: 'mention'))
-
-  .moved-account-widget__card
-    = link_to ActivityPub::TagManager.instance.url_for(moved_to_account), class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'me noopener noreferrer' do
-      .detailed-status__display-avatar
-        .account__avatar-overlay
-          .account__avatar-overlay-base
-            = image_tag moved_to_account.avatar_static_url
-          .account__avatar-overlay-overlay
-            = image_tag account.avatar_static_url
-
-      %span.display-name
-        %bdi
-          %strong.emojify= display_name(moved_to_account, custom_emojify: true)
-        %span @#{moved_to_account.pretty_acct}
diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml
index 7fa688bd3..a51dcd7be 100644
--- a/app/views/accounts/show.html.haml
+++ b/app/views/accounts/show.html.haml
@@ -2,85 +2,13 @@
   = "#{display_name(@account)} (#{acct(@account)})"
 
 - content_for :header_tags do
-  - if @account.user&.setting_noindex
+  - if @account.user_prefers_noindex?
     %meta{ name: 'robots', content: 'noindex, noarchive' }/
 
   %link{ rel: 'alternate', type: 'application/rss+xml', href: @rss_url }/
   %link{ rel: 'alternate', type: 'application/activity+json', href: ActivityPub::TagManager.instance.uri_for(@account) }/
 
-  - if @older_url
-    %link{ rel: 'next', href: @older_url }/
-  - if @newer_url
-    %link{ rel: 'prev', href: @newer_url }/
-
   = opengraph 'og:type', 'profile'
   = render 'og', account: @account, url: short_account_url(@account, only_path: false)
 
-
-= render 'header', account: @account, with_bio: true
-
-.grid
-  .column-0
-    .h-feed
-      %data.p-name{ value: "#{@account.username} on #{site_hostname}" }/
-
-      .account__section-headline
-        = active_link_to t('accounts.posts_tab_heading'), short_account_url(@account)
-        = active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account)
-        = active_link_to t('accounts.media'), short_account_media_url(@account)
-
-      - if user_signed_in? && @account.blocking?(current_account)
-        .nothing-here.nothing-here--under-tabs= t('accounts.unavailable')
-      - elsif @statuses.empty?
-        = nothing_here 'nothing-here--under-tabs'
-      - else
-        .activity-stream.activity-stream--under-tabs
-          - if params[:page].to_i.zero?
-            = render partial: 'statuses/status', collection: @pinned_statuses, as: :status, locals: { pinned: true }
-
-          - if @newer_url
-            .entry= link_to_newer @newer_url
-
-          = render partial: 'statuses/status', collection: @statuses, as: :status
-
-          - if @older_url
-            .entry= link_to_older @older_url
-
-  .column-1
-    - if @account.memorial?
-      .memoriam-widget= t('in_memoriam_html')
-    - elsif @account.moved?
-      = render 'moved', account: @account
-
-    = render 'bio', account: @account
-
-    - if @endorsed_accounts.empty? && @account.id == current_account&.id
-      .placeholder-widget= t('accounts.endorsements_hint')
-    - elsif !@endorsed_accounts.empty?
-      .endorsements-widget
-        %h4= t 'accounts.choices_html', name: content_tag(:bdi, display_name(@account, custom_emojify: true))
-
-        - @endorsed_accounts.each do |account|
-          = account_link_to account
-
-    - if @featured_hashtags.empty? && @account.id == current_account&.id
-      .placeholder-widget
-        = t('accounts.featured_tags_hint')
-        = link_to settings_featured_tags_path do
-          = t('featured_tags.add_new')
-          = fa_icon 'chevron-right fw'
-    - else
-      - @featured_hashtags.each do |featured_tag|
-        .directory__tag{ class: params[:tag] == featured_tag.name ? 'active' : nil }
-          = link_to short_account_tag_path(@account, featured_tag.tag) do
-            %h4
-              = fa_icon 'hashtag'
-              = featured_tag.display_name
-              %small
-                - if featured_tag.last_status_at.nil?
-                  = t('accounts.nothing_here')
-                - else
-                  %time.formatted{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at
-            .trends__item__current= friendly_number_to_human featured_tag.statuses_count
-
-    = render 'application/sidebar'
+= render partial: 'shared/web_app'
diff --git a/app/views/follower_accounts/index.html.haml b/app/views/follower_accounts/index.html.haml
index 92de35a9f..d93540c02 100644
--- a/app/views/follower_accounts/index.html.haml
+++ b/app/views/follower_accounts/index.html.haml
@@ -1,20 +1,6 @@
-- content_for :page_title do
-  = t('accounts.people_who_follow', name: display_name(@account))
-
 - content_for :header_tags do
   %meta{ name: 'robots', content: 'noindex' }/
-  = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false)
 
-= render 'accounts/header', account: @account
-
-- if @account.hide_collections?
-  .nothing-here= t('accounts.network_hidden')
-- elsif user_signed_in? && @account.blocking?(current_account)
-  .nothing-here= t('accounts.unavailable')
-- elsif @follows.empty?
-  = nothing_here
-- else
-  .card-grid
-    = render partial: 'application/card', collection: @follows.map(&:account), as: :account
+  = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false)
 
-  = paginate @follows
+= render 'shared/web_app'
diff --git a/app/views/following_accounts/index.html.haml b/app/views/following_accounts/index.html.haml
index 9bb1a9edd..d93540c02 100644
--- a/app/views/following_accounts/index.html.haml
+++ b/app/views/following_accounts/index.html.haml
@@ -1,20 +1,6 @@
-- content_for :page_title do
-  = t('accounts.people_followed_by', name: display_name(@account))
-
 - content_for :header_tags do
   %meta{ name: 'robots', content: 'noindex' }/
-  = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false)
 
-= render 'accounts/header', account: @account
-
-- if @account.hide_collections?
-  .nothing-here= t('accounts.network_hidden')
-- elsif user_signed_in? && @account.blocking?(current_account)
-  .nothing-here= t('accounts.unavailable')
-- elsif @follows.empty?
-  = nothing_here
-- else
-  .card-grid
-    = render partial: 'application/card', collection: @follows.map(&:target_account), as: :account
+  = render 'accounts/og', account: @account, url: account_followers_url(@account, only_path: false)
 
-  = paginate @follows
+= render 'shared/web_app'
diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 76a02e0f0..45990cd10 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -1,4 +1,7 @@
 - content_for :header_tags do
+  - unless request.path == '/'
+    %meta{ name: 'robots', content: 'noindex' }/
+
   = render partial: 'shared/og'
 
 = render 'shared/web_app'
diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml
deleted file mode 100644
index 9b9e725e9..000000000
--- a/app/views/layouts/public.html.haml
+++ /dev/null
@@ -1,60 +0,0 @@
-- content_for :header_tags do
-  = render_initial_state
-  = javascript_pack_tag 'public', crossorigin: 'anonymous'
-
-- content_for :content do
-  .public-layout
-    - unless @hide_navbar
-      .container
-        %nav.header
-          .nav-left
-            = link_to root_url, class: 'brand' do
-              = logo_as_symbol(:wordmark)
-
-            - unless whitelist_mode?
-              = link_to t('about.about_this'), about_more_path, class: 'nav-link optional'
-              = link_to t('about.apps'), 'https://joinmastodon.org/apps', class: 'nav-link optional'
-
-          .nav-center
-
-          .nav-right
-            - if user_signed_in?
-              = link_to t('settings.back'), root_url, class: 'nav-link nav-button webapp-btn'
-            - else
-              = link_to_login t('auth.login'), class: 'webapp-btn nav-link nav-button'
-              = link_to t('auth.register'), available_sign_up_path, class: 'webapp-btn nav-link nav-button'
-
-    .container= yield
-
-    .container
-      .footer
-        .grid
-          .column-0
-            %h4= t 'footer.resources'
-            %ul
-              %li= link_to t('about.privacy_policy'), privacy_policy_path
-          .column-1
-            %h4= t 'footer.developers'
-            %ul
-              %li= link_to t('about.documentation'), 'https://docs.joinmastodon.org/'
-              %li= link_to t('about.api'), 'https://docs.joinmastodon.org/client/intro/'
-          .column-2
-            %h4= link_to t('about.what_is_mastodon'), 'https://joinmastodon.org/'
-            = link_to logo_as_symbol, root_url, class: 'brand'
-          .column-3
-            %h4= site_hostname
-            %ul
-              - unless whitelist_mode?
-                %li= link_to t('about.about_this'), about_more_path
-              %li= "v#{Mastodon::Version.to_s}"
-          .column-4
-            %h4= t 'footer.more'
-            %ul
-              %li= link_to t('about.source_code'), Mastodon::Version.source_url
-              %li= link_to t('about.apps'), 'https://joinmastodon.org/apps'
-        .legal-xs
-          = link_to "v#{Mastodon::Version.to_s}", Mastodon::Version.source_url
-          ·
-          = link_to t('about.privacy_policy'), privacy_policy_path
-
-= render template: 'layouts/application'
diff --git a/app/views/privacy/show.html.haml b/app/views/privacy/show.html.haml
index cfc285925..95e506641 100644
--- a/app/views/privacy/show.html.haml
+++ b/app/views/privacy/show.html.haml
@@ -1,4 +1,7 @@
 - content_for :page_title do
   = t('privacy_policy.title')
 
+- content_for :header_tags do
+  = render partial: 'shared/og'
+
 = render 'shared/web_app'
diff --git a/app/views/remote_follow/new.html.haml b/app/views/remote_follow/new.html.haml
deleted file mode 100644
index 4e9601f6a..000000000
--- a/app/views/remote_follow/new.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-- content_for :header_tags do
-  %meta{ name: 'robots', content: 'noindex' }/
-
-.form-container
-  .follow-prompt
-    %h2= t('remote_follow.prompt')
-
-    = render partial: 'application/card', locals: { account: @account }
-
-  = simple_form_for @remote_follow, as: :remote_follow, url: account_remote_follow_path(@account) do |f|
-    = render 'shared/error_messages', object: @remote_follow
-
-    = f.input :acct, placeholder: t('remote_follow.acct'), input_html: { autocapitalize: 'none', autocorrect: 'off' }
-
-    .actions
-      = f.button :button, t('remote_follow.proceed'), type: :submit
-
-    %p.hint.subtle-hint
-      = t('remote_follow.reason_html', instance: site_hostname)
-      = t('remote_follow.no_account_html', sign_up_path: available_sign_up_path)
diff --git a/app/views/remote_interaction/new.html.haml b/app/views/remote_interaction/new.html.haml
deleted file mode 100644
index 2cc0fcb93..000000000
--- a/app/views/remote_interaction/new.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-- content_for :header_tags do
-  %meta{ name: 'robots', content: 'noindex' }/
-
-.form-container
-  .follow-prompt
-    %h2= t("remote_interaction.#{@interaction_type}.prompt")
-
-    .public-layout
-      .activity-stream.activity-stream--highlighted
-        = render 'statuses/status', status: @status
-
-  = simple_form_for @remote_follow, as: :remote_follow, url: remote_interaction_path(@status) do |f|
-    = render 'shared/error_messages', object: @remote_follow
-
-    = hidden_field_tag :type, @interaction_type
-
-    = f.input :acct, placeholder: t('remote_follow.acct'), input_html: { autocapitalize: 'none', autocorrect: 'off' }
-
-    .actions
-      = f.button :button, t("remote_interaction.#{@interaction_type}.proceed"), type: :submit
-
-    %p.hint.subtle-hint
-      = t('remote_follow.reason_html', instance: site_hostname)
-      = t('remote_follow.no_account_html', sign_up_path: available_sign_up_path)
diff --git a/app/views/statuses/_detailed_status.html.haml b/app/views/statuses/_detailed_status.html.haml
index c67f0e4d9..37001b022 100644
--- a/app/views/statuses/_detailed_status.html.haml
+++ b/app/views/statuses/_detailed_status.html.haml
@@ -56,7 +56,7 @@
       - else
         = link_to status.application.name, status.application.website, class: 'detailed-status__application', target: '_blank', rel: 'noopener noreferrer'
       ·
-    = link_to remote_interaction_path(status, type: :reply), class: 'modal-button detailed-status__link' do
+    %span.detailed-status__link
       - if status.in_reply_to_id.nil?
         = fa_icon('reply')
       - else
@@ -65,12 +65,12 @@
       = " "
     ·
     - if status.public_visibility? || status.unlisted_visibility?
-      = link_to remote_interaction_path(status, type: :reblog), class: 'modal-button detailed-status__link' do
+      %span.detailed-status__link
         = fa_icon('retweet')
         %span.detailed-status__reblogs>= friendly_number_to_human status.reblogs_count
         = " "
       ·
-    = link_to remote_interaction_path(status, type: :favourite), class: 'modal-button detailed-status__link' do
+    %span.detailed-status__link
       = fa_icon('star')
       %span.detailed-status__favorites>= friendly_number_to_human status.favourites_count
       = " "
diff --git a/app/views/statuses/_simple_status.html.haml b/app/views/statuses/_simple_status.html.haml
index f16d2c186..bfde3a260 100644
--- a/app/views/statuses/_simple_status.html.haml
+++ b/app/views/statuses/_simple_status.html.haml
@@ -53,18 +53,18 @@
       = t 'statuses.show_thread'
 
   .status__action-bar
-    = link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button icon-button--with-counter modal-button' do
+    %span.status__action-bar-button.icon-button.icon-button--with-counter
       - if status.in_reply_to_id.nil?
         = fa_icon 'reply fw'
       - else
         = fa_icon 'reply-all fw'
       %span.icon-button__counter= obscured_counter status.replies_count
-    = link_to remote_interaction_path(status, type: :reblog), class: 'status__action-bar-button icon-button modal-button' do
+    %span.status__action-bar-button.icon-button
       - if status.distributable?
         = fa_icon 'retweet fw'
       - elsif status.private_visibility? || status.limited_visibility?
         = fa_icon 'lock fw'
       - else
         = fa_icon 'at fw'
-    = link_to remote_interaction_path(status, type: :favourite), class: 'status__action-bar-button icon-button modal-button' do
+    %span.status__action-bar-button.icon-button
       = fa_icon 'star fw'
diff --git a/app/views/statuses/show.html.haml b/app/views/statuses/show.html.haml
index 5a3c94b84..106c41725 100644
--- a/app/views/statuses/show.html.haml
+++ b/app/views/statuses/show.html.haml
@@ -2,7 +2,7 @@
   = t('statuses.title', name: display_name(@account), quote: truncate(@status.spoiler_text.presence || @status.text, length: 50, omission: '…', escape: false))
 
 - content_for :header_tags do
-  - if @account.user&.setting_noindex
+  - if @account.user_prefers_noindex?
     %meta{ name: 'robots', content: 'noindex, noarchive' }/
 
   %link{ rel: 'alternate', type: 'application/json+oembed', href: api_oembed_url(url: short_account_status_url(@account, @status), format: 'json') }/
diff --git a/app/views/tags/show.html.haml b/app/views/tags/show.html.haml
new file mode 100644
index 000000000..4b4967a8f
--- /dev/null
+++ b/app/views/tags/show.html.haml
@@ -0,0 +1,5 @@
+- content_for :header_tags do
+  %meta{ name: 'robots', content: 'noindex' }/
+  = render partial: 'shared/og'
+
+= render partial: 'shared/web_app'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 504f1b364..412178ca3 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2,47 +2,26 @@
 en:
   about:
     about_mastodon_html: 'The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!'
-    api: API
-    apps: Mobile apps
     contact_missing: Not set
     contact_unavailable: N/A
-    documentation: Documentation
     hosted_on: Mastodon hosted on %{domain}
-    privacy_policy: Privacy Policy
-    source_code: Source code
     title: About
-    what_is_mastodon: What is Mastodon?
   accounts:
-    choices_html: "%{name}'s choices:"
-    endorsements_hint: You can endorse people you follow from the web interface, and they will show up here.
-    featured_tags_hint: You can feature specific hashtags that will be displayed here.
     follow: Follow
     followers:
       one: Follower
       other: Followers
     following: Following
     instance_actor_flash: This account is a virtual actor used to represent the server itself and not any individual user. It is used for federation purposes and should not be suspended.
-    joined: Joined %{date}
     last_active: last active
     link_verified_on: Ownership of this link was checked on %{date}
-    media: Media
-    moved_html: "%{name} has moved to %{new_profile_link}:"
-    network_hidden: This information is not available
     nothing_here: There is nothing here!
-    people_followed_by: People whom %{name} follows
-    people_who_follow: People who follow %{name}
     pin_errors:
       following: You must be already following the person you want to endorse
     posts:
       one: Post
       other: Posts
     posts_tab_heading: Posts
-    posts_with_replies: Posts and replies
-    roles:
-      bot: Bot
-      group: Group
-    unavailable: Profile unavailable
-    unfollow: Unfollow
   admin:
     account_actions:
       action: Perform action
@@ -1176,9 +1155,6 @@ en:
         hint: This filter applies to select individual posts regardless of other criteria. You can add more posts to this filter from the web interface.
         title: Filtered posts
   footer:
-    developers: Developers
-    more: More…
-    resources: Resources
     trending_now: Trending now
   generic:
     all: All
@@ -1221,7 +1197,6 @@ en:
       following: Following list
       muting: Muting list
     upload: Upload
-  in_memoriam_html: In Memoriam.
   invites:
     delete: Deactivate
     expired: Expired
@@ -1402,22 +1377,7 @@ en:
     remove_selected_follows: Unfollow selected users
     status: Account status
   remote_follow:
-    acct: Enter your username@domain you want to act from
     missing_resource: Could not find the required redirect URL for your account
-    no_account_html: Don't have an account? You can <a href='%{sign_up_path}' target='_blank'>sign up here</a>
-    proceed: Proceed to follow
-    prompt: 'You are going to follow:'
-    reason_html: "<strong>Why is this step necessary?</strong> <code>%{instance}</code> might not be the server where you are registered, so we need to redirect you to your home server first."
-  remote_interaction:
-    favourite:
-      proceed: Proceed to favourite
-      prompt: 'You want to favourite this post:'
-    reblog:
-      proceed: Proceed to boost
-      prompt: 'You want to boost this post:'
-    reply:
-      proceed: Proceed to reply
-      prompt: 'You want to reply to this post:'
   reports:
     errors:
       invalid_rules: does not reference valid rules
diff --git a/config/routes.rb b/config/routes.rb
index 29ec0f8a5..1ed585f19 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -3,6 +3,31 @@
 require 'sidekiq_unique_jobs/web'
 require 'sidekiq-scheduler/web'
 
+# Paths of routes on the web app that to not require to be indexed or
+# have alternative format representations requiring separate controllers
+WEB_APP_PATHS = %w(
+  /getting-started
+  /keyboard-shortcuts
+  /home
+  /public
+  /public/local
+  /conversations
+  /lists/(*any)
+  /notifications
+  /favourites
+  /bookmarks
+  /pinned
+  /start
+  /directory
+  /explore/(*any)
+  /search
+  /publish
+  /follow_requests
+  /blocks
+  /domain_blocks
+  /mutes
+).freeze
+
 Rails.application.routes.draw do
   root 'home#index'
 
@@ -59,9 +84,6 @@ Rails.application.routes.draw do
   get '/authorize_follow', to: redirect { |_, request| "/authorize_interaction?#{request.params.to_query}" }
 
   resources :accounts, path: 'users', only: [:show], param: :username do
-    get :remote_follow,  to: 'remote_follow#new'
-    post :remote_follow, to: 'remote_follow#create'
-
     resources :statuses, only: [:show] do
       member do
         get :activity
@@ -85,16 +107,21 @@ Rails.application.routes.draw do
 
   resource :inbox, only: [:create], module: :activitypub
 
-  get '/@:username', to: 'accounts#show', as: :short_account
-  get '/@:username/with_replies', to: 'accounts#show', as: :short_account_with_replies
-  get '/@:username/media', to: 'accounts#show', as: :short_account_media
-  get '/@:username/tagged/:tag', to: 'accounts#show', as: :short_account_tag
-  get '/@:account_username/:id', to: 'statuses#show', as: :short_account_status
-  get '/@:account_username/:id/embed', to: 'statuses#embed', as: :embed_short_account_status
+  constraints(username: /[^@\/.]+/) do
+    get '/@:username', to: 'accounts#show', as: :short_account
+    get '/@:username/with_replies', to: 'accounts#show', as: :short_account_with_replies
+    get '/@:username/media', to: 'accounts#show', as: :short_account_media
+    get '/@:username/tagged/:tag', to: 'accounts#show', as: :short_account_tag
+  end
 
-  get  '/interact/:id', to: 'remote_interaction#new', as: :remote_interaction
-  post '/interact/:id', to: 'remote_interaction#create'
+  constraints(account_username: /[^@\/.]+/) do
+    get '/@:account_username/following', to: 'following_accounts#index'
+    get '/@:account_username/followers', to: 'follower_accounts#index'
+    get '/@:account_username/:id', to: 'statuses#show', as: :short_account_status
+    get '/@:account_username/:id/embed', to: 'statuses#embed', as: :embed_short_account_status
+  end
 
+  get '/@:username_with_domain/(*any)', to: 'home#index', constraints: { username_with_domain: /([^\/])+?/ }, format: false
   get '/settings', to: redirect('/settings/profile')
 
   namespace :settings do
@@ -187,9 +214,6 @@ Rails.application.routes.draw do
   resource :relationships, only: [:show, :update]
   resource :statuses_cleanup, controller: :statuses_cleanup, only: [:show, :update]
 
-  get '/explore', to: redirect('/web/explore')
-  get '/public', to: redirect('/web/public')
-  get '/public/local', to: redirect('/web/public/local')
   get '/media_proxy/:id/(*any)', to: 'media_proxy#show', as: :media_proxy
 
   resource :authorize_interaction, only: [:show, :create]
@@ -642,8 +666,11 @@ Rails.application.routes.draw do
     end
   end
 
-  get '/web/(*any)', to: 'home#index', as: :web
+  WEB_APP_PATHS.each do |path|
+    get path, to: 'home#index'
+  end
 
+  get '/web/(*any)',   to: redirect('/%{any}', status: 302), as: :web
   get '/about',        to: 'about#show'
   get '/about/more',   to: redirect('/about')
 
diff --git a/package.json b/package.json
index 5d8f20abf..0a57336d6 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,6 @@
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.4.1",
     "regenerator-runtime": "^0.13.9",
-    "rellax": "^1.12.1",
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.1.6",
     "rimraf": "^3.0.2",
diff --git a/spec/controllers/account_follow_controller_spec.rb b/spec/controllers/account_follow_controller_spec.rb
deleted file mode 100644
index d33cd0499..000000000
--- a/spec/controllers/account_follow_controller_spec.rb
+++ /dev/null
@@ -1,64 +0,0 @@
-require 'rails_helper'
-
-describe AccountFollowController do
-  render_views
-
-  let(:user) { Fabricate(:user) }
-  let(:alice) { Fabricate(:account, username: 'alice') }
-
-  describe 'POST #create' do
-    let(:service) { double }
-
-    subject { post :create, params: { account_username: alice.username } }
-
-    before do
-      allow(FollowService).to receive(:new).and_return(service)
-      allow(service).to receive(:call)
-    end
-
-    context 'when account is permanently suspended' do
-      before do
-        alice.suspend!
-        alice.deletion_request.destroy
-        subject
-      end
-
-      it 'returns http gone' do
-        expect(response).to have_http_status(410)
-      end
-    end
-
-    context 'when account is temporarily suspended' do
-      before do
-        alice.suspend!
-        subject
-      end
-
-      it 'returns http forbidden' do
-        expect(response).to have_http_status(403)
-      end
-    end
-
-    context 'when signed out' do
-      before do
-        subject
-      end
-
-      it 'does not follow' do
-        expect(FollowService).not_to receive(:new)
-      end
-    end
-
-    context 'when signed in' do
-      before do
-        sign_in(user)
-        subject
-      end
-
-      it 'redirects to account path' do
-        expect(service).to have_received(:call).with(user.account, alice, with_rate_limit: true)
-        expect(response).to redirect_to(account_path(alice))
-      end
-    end
-  end
-end
diff --git a/spec/controllers/account_unfollow_controller_spec.rb b/spec/controllers/account_unfollow_controller_spec.rb
deleted file mode 100644
index a11f7aa68..000000000
--- a/spec/controllers/account_unfollow_controller_spec.rb
+++ /dev/null
@@ -1,64 +0,0 @@
-require 'rails_helper'
-
-describe AccountUnfollowController do
-  render_views
-
-  let(:user) { Fabricate(:user) }
-  let(:alice) { Fabricate(:account, username: 'alice') }
-
-  describe 'POST #create' do
-    let(:service) { double }
-
-    subject { post :create, params: { account_username: alice.username } }
-
-    before do
-      allow(UnfollowService).to receive(:new).and_return(service)
-      allow(service).to receive(:call)
-    end
-
-    context 'when account is permanently suspended' do
-      before do
-        alice.suspend!
-        alice.deletion_request.destroy
-        subject
-      end
-
-      it 'returns http gone' do
-        expect(response).to have_http_status(410)
-      end
-    end
-
-    context 'when account is temporarily suspended' do
-      before do
-        alice.suspend!
-        subject
-      end
-
-      it 'returns http forbidden' do
-        expect(response).to have_http_status(403)
-      end
-    end
-
-    context 'when signed out' do
-      before do
-        subject
-      end
-
-      it 'does not unfollow' do
-        expect(UnfollowService).not_to receive(:new)
-      end
-    end
-
-    context 'when signed in' do
-      before do
-        sign_in(user)
-        subject
-      end
-
-      it 'redirects to account path' do
-        expect(service).to have_received(:call).with(user.account, alice)
-        expect(response).to redirect_to(account_path(alice))
-      end
-    end
-  end
-end
diff --git a/spec/controllers/accounts_controller_spec.rb b/spec/controllers/accounts_controller_spec.rb
index 12266c800..defa8b2d3 100644
--- a/spec/controllers/accounts_controller_spec.rb
+++ b/spec/controllers/accounts_controller_spec.rb
@@ -99,100 +99,6 @@ RSpec.describe AccountsController, type: :controller do
         end
 
         it_behaves_like 'common response characteristics'
-
-        it 'renders public status' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status))
-        end
-
-        it 'renders self-reply' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_self_reply))
-        end
-
-        it 'renders status with media' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_media))
-        end
-
-        it 'renders reblog' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog))
-        end
-
-        it 'renders pinned status' do
-          expect(response.body).to include(I18n.t('stream_entries.pinned'))
-        end
-
-        it 'does not render private status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private))
-        end
-
-        it 'does not render direct status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct))
-        end
-
-        it 'does not render reply to someone else' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply))
-        end
-      end
-
-      context 'when signed-in' do
-        let(:user) { Fabricate(:user) }
-
-        before do
-          sign_in(user)
-        end
-
-        context 'when user follows account' do
-          before do
-            user.account.follow!(account)
-            get :show, params: { username: account.username, format: format }
-          end
-
-          it 'does not render private status' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private))
-          end
-        end
-
-        context 'when user is blocked' do
-          before do
-            account.block!(user.account)
-            get :show, params: { username: account.username, format: format }
-          end
-
-          it 'renders unavailable message' do
-            expect(response.body).to include(I18n.t('accounts.unavailable'))
-          end
-
-          it 'does not render public status' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status))
-          end
-
-          it 'does not render self-reply' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_self_reply))
-          end
-
-          it 'does not render status with media' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_media))
-          end
-
-          it 'does not render reblog' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog))
-          end
-
-          it 'does not render pinned status' do
-            expect(response.body).to_not include(I18n.t('stream_entries.pinned'))
-          end
-
-          it 'does not render private status' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private))
-          end
-
-          it 'does not render direct status' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct))
-          end
-
-          it 'does not render reply to someone else' do
-            expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply))
-          end
-        end
       end
 
       context 'with replies' do
@@ -202,38 +108,6 @@ RSpec.describe AccountsController, type: :controller do
         end
 
         it_behaves_like 'common response characteristics'
-
-        it 'renders public status' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status))
-        end
-
-        it 'renders self-reply' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_self_reply))
-        end
-
-        it 'renders status with media' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_media))
-        end
-
-        it 'renders reblog' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog))
-        end
-
-        it 'does not render pinned status' do
-          expect(response.body).to_not include(I18n.t('stream_entries.pinned'))
-        end
-
-        it 'does not render private status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private))
-        end
-
-        it 'does not render direct status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct))
-        end
-
-        it 'renders reply to someone else' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_reply))
-        end
       end
 
       context 'with media' do
@@ -243,38 +117,6 @@ RSpec.describe AccountsController, type: :controller do
         end
 
         it_behaves_like 'common response characteristics'
-
-        it 'does not render public status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status))
-        end
-
-        it 'does not render self-reply' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_self_reply))
-        end
-
-        it 'renders status with media' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_media))
-        end
-
-        it 'does not render reblog' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog))
-        end
-
-        it 'does not render pinned status' do
-          expect(response.body).to_not include(I18n.t('stream_entries.pinned'))
-        end
-
-        it 'does not render private status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private))
-        end
-
-        it 'does not render direct status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct))
-        end
-
-        it 'does not render reply to someone else' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply))
-        end
       end
 
       context 'with tag' do
@@ -289,42 +131,6 @@ RSpec.describe AccountsController, type: :controller do
         end
 
         it_behaves_like 'common response characteristics'
-
-        it 'does not render public status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status))
-        end
-
-        it 'does not render self-reply' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_self_reply))
-        end
-
-        it 'does not render status with media' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_media))
-        end
-
-        it 'does not render reblog' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reblog.reblog))
-        end
-
-        it 'does not render pinned status' do
-          expect(response.body).to_not include(I18n.t('stream_entries.pinned'))
-        end
-
-        it 'does not render private status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_private))
-        end
-
-        it 'does not render direct status' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_direct))
-        end
-
-        it 'does not render reply to someone else' do
-          expect(response.body).to_not include(ActivityPub::TagManager.instance.url_for(status_reply))
-        end
-
-        it 'renders status with tag' do
-          expect(response.body).to include(ActivityPub::TagManager.instance.url_for(status_tag))
-        end
       end
     end
 
diff --git a/spec/controllers/authorize_interactions_controller_spec.rb b/spec/controllers/authorize_interactions_controller_spec.rb
index 99f3f6ffc..44f52df69 100644
--- a/spec/controllers/authorize_interactions_controller_spec.rb
+++ b/spec/controllers/authorize_interactions_controller_spec.rb
@@ -39,7 +39,7 @@ describe AuthorizeInteractionsController do
       end
 
       it 'sets resource from url' do
-        account = Account.new
+        account = Fabricate(:account)
         service = double
         allow(ResolveURLService).to receive(:new).and_return(service)
         allow(service).to receive(:call).with('http://example.com').and_return(account)
@@ -51,7 +51,7 @@ describe AuthorizeInteractionsController do
       end
 
       it 'sets resource from acct uri' do
-        account = Account.new
+        account = Fabricate(:account)
         service = double
         allow(ResolveAccountService).to receive(:new).and_return(service)
         allow(service).to receive(:call).with('found@hostname').and_return(account)
diff --git a/spec/controllers/follower_accounts_controller_spec.rb b/spec/controllers/follower_accounts_controller_spec.rb
index 4d2a6e01a..ab2e82e85 100644
--- a/spec/controllers/follower_accounts_controller_spec.rb
+++ b/spec/controllers/follower_accounts_controller_spec.rb
@@ -34,27 +34,6 @@ describe FollowerAccountsController do
           expect(response).to have_http_status(403)
         end
       end
-
-      it 'assigns follows' do
-        expect(response).to have_http_status(200)
-
-        assigned = assigns(:follows).to_a
-        expect(assigned.size).to eq 2
-        expect(assigned[0]).to eq follow1
-        expect(assigned[1]).to eq follow0
-      end
-
-      it 'does not assign blocked users' do
-        user = Fabricate(:user)
-        user.account.block!(follower0)
-        sign_in(user)
-
-        expect(response).to have_http_status(200)
-
-        assigned = assigns(:follows).to_a
-        expect(assigned.size).to eq 1
-        expect(assigned[0]).to eq follow1
-      end
     end
 
     context 'when format is json' do
diff --git a/spec/controllers/following_accounts_controller_spec.rb b/spec/controllers/following_accounts_controller_spec.rb
index bb6d221ca..e43dbf882 100644
--- a/spec/controllers/following_accounts_controller_spec.rb
+++ b/spec/controllers/following_accounts_controller_spec.rb
@@ -34,27 +34,6 @@ describe FollowingAccountsController do
           expect(response).to have_http_status(403)
         end
       end
-
-      it 'assigns follows' do
-        expect(response).to have_http_status(200)
-
-        assigned = assigns(:follows).to_a
-        expect(assigned.size).to eq 2
-        expect(assigned[0]).to eq follow1
-        expect(assigned[1]).to eq follow0
-      end
-
-      it 'does not assign blocked users' do
-        user = Fabricate(:user)
-        user.account.block!(followee0)
-        sign_in(user)
-
-        expect(response).to have_http_status(200)
-
-        assigned = assigns(:follows).to_a
-        expect(assigned.size).to eq 1
-        expect(assigned[0]).to eq follow1
-      end
     end
 
     context 'when format is json' do
diff --git a/spec/controllers/remote_follow_controller_spec.rb b/spec/controllers/remote_follow_controller_spec.rb
deleted file mode 100644
index 01d43f48c..000000000
--- a/spec/controllers/remote_follow_controller_spec.rb
+++ /dev/null
@@ -1,135 +0,0 @@
-# frozen_string_literal: true
-
-require 'rails_helper'
-
-describe RemoteFollowController do
-  render_views
-
-  describe '#new' do
-    it 'returns success when session is empty' do
-      account = Fabricate(:account)
-      get :new, params: { account_username: account.to_param }
-
-      expect(response).to have_http_status(200)
-      expect(response).to render_template(:new)
-      expect(assigns(:remote_follow).acct).to be_nil
-    end
-
-    it 'populates the remote follow with session data when session exists' do
-      session[:remote_follow] = 'user@example.com'
-      account = Fabricate(:account)
-      get :new, params: { account_username: account.to_param }
-
-      expect(response).to have_http_status(200)
-      expect(response).to render_template(:new)
-      expect(assigns(:remote_follow).acct).to eq 'user@example.com'
-    end
-  end
-
-  describe '#create' do
-    before do
-      @account = Fabricate(:account, username: 'test_user')
-    end
-
-    context 'with a valid acct' do
-      context 'when webfinger values are wrong' do
-        it 'renders new when redirect url is nil' do
-          resource_with_nil_link = double(link: nil)
-          allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_return(resource_with_nil_link)
-          post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } }
-
-          expect(response).to render_template(:new)
-          expect(response.body).to include(I18n.t('remote_follow.missing_resource'))
-        end
-
-        it 'renders new when template is nil' do
-          resource_with_link = double(link: nil)
-          allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_return(resource_with_link)
-          post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } }
-
-          expect(response).to render_template(:new)
-          expect(response.body).to include(I18n.t('remote_follow.missing_resource'))
-        end
-      end
-
-      context 'when webfinger values are good' do
-        before do
-          resource_with_link = double(link: 'http://example.com/follow_me?acct={uri}')
-          allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_return(resource_with_link)
-          post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } }
-        end
-
-        it 'saves the session' do
-          expect(session[:remote_follow]).to eq 'user@example.com'
-        end
-
-        it 'redirects to the remote location' do
-          expect(response).to redirect_to("http://example.com/follow_me?acct=https%3A%2F%2F#{Rails.configuration.x.local_domain}%2Fusers%2Ftest_user")
-        end
-      end
-    end
-
-    context 'with an invalid acct' do
-      it 'renders new when acct is missing' do
-        post :create, params: { account_username: @account.to_param, remote_follow: { acct: '' } }
-
-        expect(response).to render_template(:new)
-      end
-
-      it 'renders new with error when webfinger fails' do
-        allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@example.com').and_raise(Webfinger::Error)
-        post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@example.com' } }
-
-        expect(response).to render_template(:new)
-        expect(response.body).to include(I18n.t('remote_follow.missing_resource'))
-      end
-
-      it 'renders new when occur HTTP::ConnectionError' do
-        allow_any_instance_of(WebfingerHelper).to receive(:webfinger!).with('acct:user@unknown').and_raise(HTTP::ConnectionError)
-        post :create, params: { account_username: @account.to_param, remote_follow: { acct: 'user@unknown' } }
-
-        expect(response).to render_template(:new)
-        expect(response.body).to include(I18n.t('remote_follow.missing_resource'))
-      end
-    end
-  end
-
-  context 'with a permanently suspended account' do
-    before do
-      @account = Fabricate(:account)
-      @account.suspend!
-      @account.deletion_request.destroy
-    end
-
-    it 'returns http gone on GET to #new' do
-      get :new, params: { account_username: @account.to_param }
-
-      expect(response).to have_http_status(410)
-    end
-
-    it 'returns http gone on POST to #create' do
-      post :create, params: { account_username: @account.to_param }
-
-      expect(response).to have_http_status(410)
-    end
-  end
-
-  context 'with a temporarily suspended account' do
-    before do
-      @account = Fabricate(:account)
-      @account.suspend!
-    end
-
-    it 'returns http forbidden on GET to #new' do
-      get :new, params: { account_username: @account.to_param }
-
-      expect(response).to have_http_status(403)
-    end
-
-    it 'returns http forbidden on POST to #create' do
-      post :create, params: { account_username: @account.to_param }
-
-      expect(response).to have_http_status(403)
-    end
-  end
-end
diff --git a/spec/controllers/remote_interaction_controller_spec.rb b/spec/controllers/remote_interaction_controller_spec.rb
deleted file mode 100644
index bb0074b11..000000000
--- a/spec/controllers/remote_interaction_controller_spec.rb
+++ /dev/null
@@ -1,39 +0,0 @@
-# frozen_string_literal: true
-
-require 'rails_helper'
-
-describe RemoteInteractionController, type: :controller do
-  render_views
-
-  let(:status) { Fabricate(:status) }
-
-  describe 'GET #new' do
-    it 'returns 200' do
-      get :new, params: { id: status.id }
-      expect(response).to have_http_status(200)
-    end
-  end
-
-  describe 'POST #create' do
-    context '@remote_follow is valid' do
-      it 'returns 302' do
-        allow_any_instance_of(RemoteFollow).to receive(:valid?) { true }
-        allow_any_instance_of(RemoteFollow).to receive(:addressable_template) do
-          Addressable::Template.new('https://hoge.com')
-        end
-
-        post :create, params: { id: status.id, remote_follow: { acct: '@hoge' } }
-        expect(response).to have_http_status(302)
-      end
-    end
-
-    context '@remote_follow is invalid' do
-      it 'returns 200' do
-        allow_any_instance_of(RemoteFollow).to receive(:valid?) { false }
-        post :create, params: { id: status.id, remote_follow: { acct: '@hoge' } }
-
-        expect(response).to have_http_status(200)
-      end
-    end
-  end
-end
diff --git a/spec/controllers/tags_controller_spec.rb b/spec/controllers/tags_controller_spec.rb
index 1fd8494d6..547bcfb39 100644
--- a/spec/controllers/tags_controller_spec.rb
+++ b/spec/controllers/tags_controller_spec.rb
@@ -10,16 +10,15 @@ RSpec.describe TagsController, type: :controller do
     let!(:late)    { Fabricate(:status, tags: [tag], text: 'late #test') }
 
     context 'when tag exists' do
-      it 'redirects to web version' do
+      it 'returns http success' do
         get :show, params: { id: 'test', max_id: late.id }
-        expect(response).to redirect_to('/web/tags/test')
+        expect(response).to have_http_status(200)
       end
     end
 
     context 'when tag does not exist' do
-      it 'returns http missing for non-existent tag' do
+      it 'returns http not found' do
         get :show, params: { id: 'none' }
-
         expect(response).to have_http_status(404)
       end
     end
diff --git a/spec/features/profile_spec.rb b/spec/features/profile_spec.rb
index b6de3e9d1..ec4f9a53f 100644
--- a/spec/features/profile_spec.rb
+++ b/spec/features/profile_spec.rb
@@ -18,36 +18,16 @@ feature 'Profile' do
     visit account_path('alice')
 
     is_expected.to have_title("alice (@alice@#{local_domain})")
-
-    within('.public-account-header h1') do
-      is_expected.to have_content("alice @alice@#{local_domain}")
-    end
-
-    bio_elem = first('.public-account-bio')
-    expect(bio_elem).to have_content(alice_bio)
-    # The bio has hashtags made clickable
-    expect(bio_elem).to have_link('cryptology')
-    expect(bio_elem).to have_link('science')
-    # Nicknames are make clickable
-    expect(bio_elem).to have_link('@alice')
-    expect(bio_elem).to have_link('@bob')
-    # Nicknames not on server are not clickable
-    expect(bio_elem).not_to have_link('@pepe')
   end
 
   scenario 'I can change my account' do
     visit settings_profile_path
+
     fill_in 'Display name', with: 'Bob'
     fill_in 'Bio', with: 'Bob is silent'
-    first('.btn[type=submit]').click
-    is_expected.to have_content 'Changes successfully saved!'
 
-    # View my own public profile and see the changes
-    click_link "Bob @bob@#{local_domain}"
+    first('button[type=submit]').click
 
-    within('.public-account-header h1') do
-      is_expected.to have_content("Bob @bob@#{local_domain}")
-    end
-    expect(first('.public-account-bio')).to have_content('Bob is silent')
+    is_expected.to have_content 'Changes successfully saved!'
   end
 end
diff --git a/spec/lib/permalink_redirector_spec.rb b/spec/lib/permalink_redirector_spec.rb
index abda57da4..a00913656 100644
--- a/spec/lib/permalink_redirector_spec.rb
+++ b/spec/lib/permalink_redirector_spec.rb
@@ -3,40 +3,31 @@
 require 'rails_helper'
 
 describe PermalinkRedirector do
+  let(:remote_account) { Fabricate(:account, username: 'alice', domain: 'example.com', url: 'https://example.com/@alice', id: 2) }
+
   describe '#redirect_url' do
     before do
-      account = Fabricate(:account, username: 'alice', id: 1)
-      Fabricate(:status, account: account, id: 123)
+      Fabricate(:status, account: remote_account, id: 123, url: 'https://example.com/status-123')
     end
 
     it 'returns path for legacy account links' do
-      redirector = described_class.new('web/accounts/1')
-      expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice'
+      redirector = described_class.new('accounts/2')
+      expect(redirector.redirect_path).to eq 'https://example.com/@alice'
     end
 
     it 'returns path for legacy status links' do
-      redirector = described_class.new('web/statuses/123')
-      expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice/123'
-    end
-
-    it 'returns path for legacy tag links' do
-      redirector = described_class.new('web/timelines/tag/hoge')
-      expect(redirector.redirect_path).to be_nil
+      redirector = described_class.new('statuses/123')
+      expect(redirector.redirect_path).to eq 'https://example.com/status-123'
     end
 
     it 'returns path for pretty account links' do
-      redirector = described_class.new('web/@alice')
-      expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice'
+      redirector = described_class.new('@alice@example.com')
+      expect(redirector.redirect_path).to eq 'https://example.com/@alice'
     end
 
     it 'returns path for pretty status links' do
-      redirector = described_class.new('web/@alice/123')
-      expect(redirector.redirect_path).to eq 'https://cb6e6126.ngrok.io/@alice/123'
-    end
-
-    it 'returns path for pretty tag links' do
-      redirector = described_class.new('web/tags/hoge')
-      expect(redirector.redirect_path).to be_nil
+      redirector = described_class.new('@alice/123')
+      expect(redirector.redirect_path).to eq 'https://example.com/status-123'
     end
   end
 end
diff --git a/spec/requests/account_show_page_spec.rb b/spec/requests/account_show_page_spec.rb
index 4e51cf7ef..e84c46c47 100644
--- a/spec/requests/account_show_page_spec.rb
+++ b/spec/requests/account_show_page_spec.rb
@@ -3,17 +3,6 @@
 require 'rails_helper'
 
 describe 'The account show page' do
-  it 'Has an h-feed with correct number of h-entry objects in it' do
-    alice = Fabricate(:account, username: 'alice', display_name: 'Alice')
-    _status = Fabricate(:status, account: alice, text: 'Hello World')
-    _status2 = Fabricate(:status, account: alice, text: 'Hello World Again')
-    _status3 = Fabricate(:status, account: alice, text: 'Are You Still There World?')
-
-    get '/@alice'
-
-    expect(h_feed_entries.size).to eq(3)
-  end
-
   it 'has valid opengraph tags' do
     alice = Fabricate(:account, username: 'alice', display_name: 'Alice')
     _status = Fabricate(:status, account: alice, text: 'Hello World')
@@ -33,8 +22,4 @@ describe 'The account show page' do
   def head_section
     Nokogiri::Slop(response.body).html.head
   end
-
-  def h_feed_entries
-    Nokogiri::HTML(response.body).search('.h-feed .h-entry')
-  end
 end
diff --git a/spec/routing/accounts_routing_spec.rb b/spec/routing/accounts_routing_spec.rb
index d04cb27f0..3f0e9b3e9 100644
--- a/spec/routing/accounts_routing_spec.rb
+++ b/spec/routing/accounts_routing_spec.rb
@@ -1,31 +1,83 @@
 require 'rails_helper'
 
 describe 'Routes under accounts/' do
-  describe 'the route for accounts who are followers of an account' do
-    it 'routes to the followers action with the right username' do
-      expect(get('/users/name/followers')).
-        to route_to('follower_accounts#index', account_username: 'name')
+  context 'with local username' do
+    let(:username) { 'alice' }
+
+    it 'routes /@:username' do
+      expect(get("/@#{username}")).to route_to('accounts#show', username: username)
     end
-  end
 
-  describe 'the route for accounts who are followed by an account' do
-    it 'routes to the following action with the right username' do
-      expect(get('/users/name/following')).
-        to route_to('following_accounts#index', account_username: 'name')
+    it 'routes /@:username.json' do
+      expect(get("/@#{username}.json")).to route_to('accounts#show', username: username, format: 'json')
+    end
+
+    it 'routes /@:username.rss' do
+      expect(get("/@#{username}.rss")).to route_to('accounts#show', username: username, format: 'rss')
+    end
+
+    it 'routes /@:username/:id' do
+      expect(get("/@#{username}/123")).to route_to('statuses#show', account_username: username, id: '123')
+    end
+
+    it 'routes /@:username/:id/embed' do
+      expect(get("/@#{username}/123/embed")).to route_to('statuses#embed', account_username: username, id: '123')
+    end
+
+    it 'routes /@:username/following' do
+      expect(get("/@#{username}/following")).to route_to('following_accounts#index', account_username: username)
+    end
+
+    it 'routes /@:username/followers' do
+      expect(get("/@#{username}/followers")).to route_to('follower_accounts#index', account_username: username)
+    end
+
+    it 'routes /@:username/with_replies' do
+      expect(get("/@#{username}/with_replies")).to route_to('accounts#show', username: username)
+    end
+
+    it 'routes /@:username/media' do
+      expect(get("/@#{username}/media")).to route_to('accounts#show', username: username)
     end
-  end
 
-  describe 'the route for following an account' do
-    it 'routes to the follow create action with the right username' do
-      expect(post('/users/name/follow')).
-        to route_to('account_follow#create', account_username: 'name')
+    it 'routes /@:username/tagged/:tag' do
+      expect(get("/@#{username}/tagged/foo")).to route_to('accounts#show', username: username, tag: 'foo')
     end
   end
 
-  describe 'the route for unfollowing an account' do
-    it 'routes to the unfollow create action with the right username' do
-      expect(post('/users/name/unfollow')).
-        to route_to('account_unfollow#create', account_username: 'name')
+  context 'with remote username' do
+    let(:username) { 'alice@example.com' }
+
+    it 'routes /@:username' do
+      expect(get("/@#{username}")).to route_to('home#index', username_with_domain: username)
+    end
+
+    it 'routes /@:username/:id' do
+      expect(get("/@#{username}/123")).to route_to('home#index', username_with_domain: username, any: '123')
+    end
+
+    it 'routes /@:username/:id/embed' do
+      expect(get("/@#{username}/123/embed")).to route_to('home#index', username_with_domain: username, any: '123/embed')
+    end
+
+    it 'routes /@:username/following' do
+      expect(get("/@#{username}/following")).to route_to('home#index', username_with_domain: username, any: 'following')
+    end
+
+    it 'routes /@:username/followers' do
+      expect(get("/@#{username}/followers")).to route_to('home#index', username_with_domain: username, any: 'followers')
+    end
+
+    it 'routes /@:username/with_replies' do
+      expect(get("/@#{username}/with_replies")).to route_to('home#index', username_with_domain: username, any: 'with_replies')
+    end
+
+    it 'routes /@:username/media' do
+      expect(get("/@#{username}/media")).to route_to('home#index', username_with_domain: username, any: 'media')
+    end
+
+    it 'routes /@:username/tagged/:tag' do
+      expect(get("/@#{username}/tagged/foo")).to route_to('home#index', username_with_domain: username, any: 'tagged/foo')
     end
   end
 end
diff --git a/yarn.lock b/yarn.lock
index 6ae965464..98666f23d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9663,11 +9663,6 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
-rellax@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/rellax/-/rellax-1.12.1.tgz#1b433ef7ac4aa3573449a33efab391c112f6b34d"
-  integrity sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA==
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-- 
cgit 


From 7c152acb2cc545a87610de349a94e14f45fbed5d Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 22 Oct 2022 11:44:41 +0200
Subject: Change settings area to be separated into categories in admin UI
 (#19407)

And update all descriptions
---
 app/controllers/admin/settings/about_controller.rb |   9 ++
 .../admin/settings/appearance_controller.rb        |   9 ++
 .../admin/settings/branding_controller.rb          |   9 ++
 .../admin/settings/content_retention_controller.rb |   9 ++
 .../admin/settings/discovery_controller.rb         |   9 ++
 .../admin/settings/registrations_controller.rb     |   9 ++
 app/controllers/admin/settings_controller.rb       |  10 +-
 app/controllers/admin/site_uploads_controller.rb   |   2 +-
 app/helpers/admin/settings_helper.rb               |   7 --
 app/javascript/styles/mastodon/admin.scss          |  82 +++++++++++++----
 app/javascript/styles/mastodon/components.scss     |   5 +
 app/javascript/styles/mastodon/forms.scss          |  16 +++-
 app/models/form/admin_settings.rb                  |  57 +++++++-----
 .../rest/extended_description_serializer.rb        |  12 ++-
 app/views/admin/settings/about/show.html.haml      |  33 +++++++
 app/views/admin/settings/appearance/show.html.haml |  34 +++++++
 app/views/admin/settings/branding/show.html.haml   |  39 ++++++++
 .../settings/content_retention/show.html.haml      |  22 +++++
 app/views/admin/settings/discovery/show.html.haml  |  40 ++++++++
 app/views/admin/settings/edit.html.haml            | 102 ---------------------
 .../admin/settings/registrations/show.html.haml    |  27 ++++++
 app/views/admin/settings/shared/_links.html.haml   |   8 ++
 app/views/layouts/admin.html.haml                  |  11 ++-
 config/locales/en.yml                              |  87 +++++-------------
 config/locales/simple_form.en.yml                  |  37 ++++++++
 config/navigation.rb                               |   2 +-
 config/routes.rb                                   |  13 ++-
 .../admin/settings/branding_controller_spec.rb     |  53 +++++++++++
 spec/controllers/admin/settings_controller_spec.rb |  71 --------------
 29 files changed, 528 insertions(+), 296 deletions(-)
 create mode 100644 app/controllers/admin/settings/about_controller.rb
 create mode 100644 app/controllers/admin/settings/appearance_controller.rb
 create mode 100644 app/controllers/admin/settings/branding_controller.rb
 create mode 100644 app/controllers/admin/settings/content_retention_controller.rb
 create mode 100644 app/controllers/admin/settings/discovery_controller.rb
 create mode 100644 app/controllers/admin/settings/registrations_controller.rb
 create mode 100644 app/views/admin/settings/about/show.html.haml
 create mode 100644 app/views/admin/settings/appearance/show.html.haml
 create mode 100644 app/views/admin/settings/branding/show.html.haml
 create mode 100644 app/views/admin/settings/content_retention/show.html.haml
 create mode 100644 app/views/admin/settings/discovery/show.html.haml
 delete mode 100644 app/views/admin/settings/edit.html.haml
 create mode 100644 app/views/admin/settings/registrations/show.html.haml
 create mode 100644 app/views/admin/settings/shared/_links.html.haml
 create mode 100644 spec/controllers/admin/settings/branding_controller_spec.rb
 delete mode 100644 spec/controllers/admin/settings_controller_spec.rb

(limited to 'app/javascript/styles')

diff --git a/app/controllers/admin/settings/about_controller.rb b/app/controllers/admin/settings/about_controller.rb
new file mode 100644
index 000000000..86327fe39
--- /dev/null
+++ b/app/controllers/admin/settings/about_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Admin::Settings::AboutController < Admin::SettingsController
+  private
+
+  def after_update_redirect_path
+    admin_settings_about_path
+  end
+end
diff --git a/app/controllers/admin/settings/appearance_controller.rb b/app/controllers/admin/settings/appearance_controller.rb
new file mode 100644
index 000000000..39b2448d8
--- /dev/null
+++ b/app/controllers/admin/settings/appearance_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Admin::Settings::AppearanceController < Admin::SettingsController
+  private
+
+  def after_update_redirect_path
+    admin_settings_appearance_path
+  end
+end
diff --git a/app/controllers/admin/settings/branding_controller.rb b/app/controllers/admin/settings/branding_controller.rb
new file mode 100644
index 000000000..4a4d76f49
--- /dev/null
+++ b/app/controllers/admin/settings/branding_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Admin::Settings::BrandingController < Admin::SettingsController
+  private
+
+  def after_update_redirect_path
+    admin_settings_branding_path
+  end
+end
diff --git a/app/controllers/admin/settings/content_retention_controller.rb b/app/controllers/admin/settings/content_retention_controller.rb
new file mode 100644
index 000000000..b88336a2c
--- /dev/null
+++ b/app/controllers/admin/settings/content_retention_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Admin::Settings::ContentRetentionController < Admin::SettingsController
+  private
+
+  def after_update_redirect_path
+    admin_settings_content_retention_path
+  end
+end
diff --git a/app/controllers/admin/settings/discovery_controller.rb b/app/controllers/admin/settings/discovery_controller.rb
new file mode 100644
index 000000000..be4b57f79
--- /dev/null
+++ b/app/controllers/admin/settings/discovery_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Admin::Settings::DiscoveryController < Admin::SettingsController
+  private
+
+  def after_update_redirect_path
+    admin_settings_discovery_path
+  end
+end
diff --git a/app/controllers/admin/settings/registrations_controller.rb b/app/controllers/admin/settings/registrations_controller.rb
new file mode 100644
index 000000000..b4a74349c
--- /dev/null
+++ b/app/controllers/admin/settings/registrations_controller.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Admin::Settings::RegistrationsController < Admin::SettingsController
+  private
+
+  def after_update_redirect_path
+    admin_settings_registrations_path
+  end
+end
diff --git a/app/controllers/admin/settings_controller.rb b/app/controllers/admin/settings_controller.rb
index dc1c79b7f..338a3638c 100644
--- a/app/controllers/admin/settings_controller.rb
+++ b/app/controllers/admin/settings_controller.rb
@@ -2,7 +2,7 @@
 
 module Admin
   class SettingsController < BaseController
-    def edit
+    def show
       authorize :settings, :show?
 
       @admin_settings = Form::AdminSettings.new
@@ -15,14 +15,18 @@ module Admin
 
       if @admin_settings.save
         flash[:notice] = I18n.t('generic.changes_saved_msg')
-        redirect_to edit_admin_settings_path
+        redirect_to after_update_redirect_path
       else
-        render :edit
+        render :show
       end
     end
 
     private
 
+    def after_update_redirect_path
+      raise NotImplementedError
+    end
+
     def settings_params
       params.require(:form_admin_settings).permit(*Form::AdminSettings::KEYS)
     end
diff --git a/app/controllers/admin/site_uploads_controller.rb b/app/controllers/admin/site_uploads_controller.rb
index cacecedb0..a5d2cf41c 100644
--- a/app/controllers/admin/site_uploads_controller.rb
+++ b/app/controllers/admin/site_uploads_controller.rb
@@ -9,7 +9,7 @@ module Admin
 
       @site_upload.destroy!
 
-      redirect_to edit_admin_settings_path, notice: I18n.t('admin.site_uploads.destroyed_msg')
+      redirect_to admin_settings_path, notice: I18n.t('admin.site_uploads.destroyed_msg')
     end
 
     private
diff --git a/app/helpers/admin/settings_helper.rb b/app/helpers/admin/settings_helper.rb
index baf14ab25..a133b4e7d 100644
--- a/app/helpers/admin/settings_helper.rb
+++ b/app/helpers/admin/settings_helper.rb
@@ -1,11 +1,4 @@
 # frozen_string_literal: true
 
 module Admin::SettingsHelper
-  def site_upload_delete_hint(hint, var)
-    upload = SiteUpload.find_by(var: var.to_s)
-    return hint unless upload
-
-    link = link_to t('admin.site_uploads.delete'), admin_site_upload_path(upload), data: { method: :delete }
-    safe_join([hint, link], '<br/>'.html_safe)
-  end
 end
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 1c5494cde..affe1c79c 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -188,21 +188,70 @@ $content-width: 840px;
       padding-top: 30px;
     }
 
-    &-heading {
-      display: flex;
+    &__heading {
       padding-bottom: 36px;
       border-bottom: 1px solid lighten($ui-base-color, 8%);
-      margin: -15px -15px 40px 0;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
+      margin-bottom: 40px;
 
-      & > * {
-        margin-top: 15px;
-        margin-right: 15px;
+      &__row {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        margin: -15px -15px 0 0;
+
+        & > * {
+          margin-top: 15px;
+          margin-right: 15px;
+        }
       }
 
-      &-actions {
+      &__tabs {
+        margin-top: 30px;
+        margin-bottom: -31px;
+
+        & > div {
+          display: flex;
+          gap: 10px;
+        }
+
+        a {
+          font-size: 14px;
+          display: inline-flex;
+          align-items: center;
+          padding: 7px 15px;
+          border-radius: 4px;
+          color: $darker-text-color;
+          text-decoration: none;
+          position: relative;
+          font-weight: 500;
+          gap: 5px;
+          white-space: nowrap;
+
+          &.selected {
+            font-weight: 700;
+            color: $primary-text-color;
+
+            &::after {
+              content: "";
+              display: block;
+              width: 100%;
+              border-bottom: 1px solid $ui-highlight-color;
+              position: absolute;
+              bottom: -5px;
+              left: 0;
+            }
+          }
+
+          &:hover,
+          &:focus,
+          &:active {
+            background: lighten($ui-base-color, 4%);
+          }
+        }
+      }
+
+      &__actions {
         display: inline-flex;
 
         & > :not(:first-child) {
@@ -228,11 +277,7 @@ $content-width: 840px;
       color: $secondary-text-color;
       font-size: 24px;
       line-height: 36px;
-      font-weight: 400;
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        font-weight: 700;
-      }
+      font-weight: 700;
     }
 
     h3 {
@@ -437,6 +482,11 @@ body,
       }
     }
 
+    & > div {
+      display: flex;
+      gap: 5px;
+    }
+
     strong {
       font-weight: 500;
       text-transform: uppercase;
@@ -1143,7 +1193,7 @@ a.name-tag,
 
     path:first-child {
       fill: rgba($highlight-text-color, 0.25) !important;
-      fill-opacity: 1 !important;
+      fill-opacity: 100% !important;
     }
 
     path:last-child {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 587eba663..5d0ff8536 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -29,6 +29,11 @@
   background: transparent;
   padding: 0;
   cursor: pointer;
+  text-decoration: none;
+
+  &--destructive {
+    color: $error-value-color;
+  }
 
   &:hover,
   &:active {
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 69a0b22d6..25c9c9fe5 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -254,7 +254,7 @@ code {
 
     & > label {
       font-family: inherit;
-      font-size: 16px;
+      font-size: 14px;
       color: $primary-text-color;
       display: block;
       font-weight: 500;
@@ -291,6 +291,20 @@ code {
     .input:last-child {
       margin-bottom: 0;
     }
+
+    &__thumbnail {
+      display: block;
+      margin: 0;
+      margin-bottom: 10px;
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+      background: url("images/void.png");
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .fields-row {
diff --git a/app/models/form/admin_settings.rb b/app/models/form/admin_settings.rb
index b6bb3d795..957a32b7c 100644
--- a/app/models/form/admin_settings.rb
+++ b/app/models/form/admin_settings.rb
@@ -8,7 +8,6 @@ class Form::AdminSettings
     site_contact_email
     site_title
     site_short_description
-    site_description
     site_extended_description
     site_terms
     registrations_mode
@@ -53,45 +52,55 @@ class Form::AdminSettings
 
   attr_accessor(*KEYS)
 
-  validates :site_short_description, :site_description, html: { wrap_with: :p }
-  validates :site_extended_description, :site_terms, :closed_registrations_message, html: true
-  validates :registrations_mode, inclusion: { in: %w(open approved none) }
-  validates :site_contact_email, :site_contact_username, presence: true
-  validates :site_contact_username, existing_username: true
-  validates :bootstrap_timeline_accounts, existing_username: { multiple: true }
-  validates :show_domain_blocks, inclusion: { in: %w(disabled users all) }
-  validates :show_domain_blocks_rationale, inclusion: { in: %w(disabled users all) }
-  validates :media_cache_retention_period, :content_cache_retention_period, :backups_retention_period, numericality: { only_integer: true }, allow_blank: true
+  validates :registrations_mode, inclusion: { in: %w(open approved none) }, if: -> { defined?(@registrations_mode) }
+  validates :site_contact_email, :site_contact_username, presence: true, if: -> { defined?(@site_contact_username) || defined?(@site_contact_email) }
+  validates :site_contact_username, existing_username: true, if: -> { defined?(@site_contact_username) }
+  validates :bootstrap_timeline_accounts, existing_username: { multiple: true }, if: -> { defined?(@bootstrap_timeline_accounts) }
+  validates :show_domain_blocks, inclusion: { in: %w(disabled users all) }, if: -> { defined?(@show_domain_blocks) }
+  validates :show_domain_blocks_rationale, inclusion: { in: %w(disabled users all) }, if: -> { defined?(@show_domain_blocks_rationale) }
+  validates :media_cache_retention_period, :content_cache_retention_period, :backups_retention_period, numericality: { only_integer: true }, allow_blank: true, if: -> { defined?(@media_cache_retention_period) || defined?(@content_cache_retention_period) || defined?(@backups_retention_period) }
+  validates :site_short_description, length: { maximum: 200 }, if: -> { defined?(@site_short_description) }
 
-  def initialize(_attributes = {})
-    super
-    initialize_attributes
+  KEYS.each do |key|
+    define_method(key) do
+      return instance_variable_get("@#{key}") if instance_variable_defined?("@#{key}")
+
+      stored_value = begin
+        if UPLOAD_KEYS.include?(key)
+          SiteUpload.where(var: key).first_or_initialize(var: key)
+        else
+          Setting.public_send(key)
+        end
+      end
+
+      instance_variable_set("@#{key}", stored_value)
+    end
+  end
+
+  UPLOAD_KEYS.each do |key|
+    define_method("#{key}=") do |file|
+      value = public_send(key)
+      value.file = file
+    end
   end
 
   def save
     return false unless valid?
 
     KEYS.each do |key|
-      value = instance_variable_get("@#{key}")
+      next unless instance_variable_defined?("@#{key}")
 
-      if UPLOAD_KEYS.include?(key) && !value.nil?
-        upload = SiteUpload.where(var: key).first_or_initialize(var: key)
-        upload.update(file: value)
+      if UPLOAD_KEYS.include?(key)
+        public_send(key).save
       else
         setting = Setting.where(var: key).first_or_initialize(var: key)
-        setting.update(value: typecast_value(key, value))
+        setting.update(value: typecast_value(key, instance_variable_get("@#{key}")))
       end
     end
   end
 
   private
 
-  def initialize_attributes
-    KEYS.each do |key|
-      instance_variable_set("@#{key}", Setting.public_send(key)) if instance_variable_get("@#{key}").nil?
-    end
-  end
-
   def typecast_value(key, value)
     if BOOLEAN_KEYS.include?(key)
       value == '1'
diff --git a/app/serializers/rest/extended_description_serializer.rb b/app/serializers/rest/extended_description_serializer.rb
index 0c3649033..c0fa3450d 100644
--- a/app/serializers/rest/extended_description_serializer.rb
+++ b/app/serializers/rest/extended_description_serializer.rb
@@ -8,6 +8,16 @@ class REST::ExtendedDescriptionSerializer < ActiveModel::Serializer
   end
 
   def content
-    object.text
+    if object.text.present?
+      markdown.render(object.text)
+    else
+      ''
+    end
+  end
+
+  private
+
+  def markdown
+    @markdown ||= Redcarpet::Markdown.new(Redcarpet::Render::HTML)
   end
 end
diff --git a/app/views/admin/settings/about/show.html.haml b/app/views/admin/settings/about/show.html.haml
new file mode 100644
index 000000000..366d213f6
--- /dev/null
+++ b/app/views/admin/settings/about/show.html.haml
@@ -0,0 +1,33 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('admin.settings.about.title')
+
+- content_for :heading do
+  %h2= t('admin.settings.title')
+  = render partial: 'admin/settings/shared/links'
+
+= simple_form_for @admin_settings, url: admin_settings_about_path, html: { method: :patch } do |f|
+  = render 'shared/error_messages', object: @admin_settings
+
+  %p.lead= t('admin.settings.about.preamble')
+
+  .fields-group
+    = f.input :site_extended_description, wrapper: :with_block_label, as: :text, input_html: { rows: 8 }
+
+    %p.hint
+      = t 'admin.settings.about.rules_hint'
+      = link_to t('admin.settings.about.manage_rules'), admin_rules_path
+
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :show_domain_blocks, wrapper: :with_label, collection: %i(disabled users all), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :show_domain_blocks_rationale, wrapper: :with_label, collection: %i(disabled users all), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
+
+  .fields-group
+    = f.input :site_terms, wrapper: :with_block_label, as: :text, input_html: { rows: 8 }
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/appearance/show.html.haml b/app/views/admin/settings/appearance/show.html.haml
new file mode 100644
index 000000000..d321c4b04
--- /dev/null
+++ b/app/views/admin/settings/appearance/show.html.haml
@@ -0,0 +1,34 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('admin.settings.appearance.title')
+
+- content_for :heading do
+  %h2= t('admin.settings.title')
+  = render partial: 'admin/settings/shared/links'
+
+= simple_form_for @admin_settings, url: admin_settings_appearance_path, html: { method: :patch } do |f|
+  = render 'shared/error_messages', object: @admin_settings
+
+  %p.lead= t('admin.settings.appearance.preamble')
+
+  .fields-group
+    = f.input :theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false
+
+  .fields-group
+    = f.input :custom_css, wrapper: :with_block_label, as: :text, input_html: { rows: 8 }
+
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :mascot, as: :file, wrapper: :with_block_label
+
+    .fields-row__column.fields-row__column-6.fields-group
+      - if @admin_settings.mascot.persisted?
+        = image_tag @admin_settings.mascot.file.url, class: 'fields-group__thumbnail'
+        = link_to admin_site_upload_path(@admin_settings.mascot), data: { method: :delete }, class: 'link-button link-button--destructive' do
+          = fa_icon 'trash fw'
+          = t('admin.site_uploads.delete')
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/branding/show.html.haml b/app/views/admin/settings/branding/show.html.haml
new file mode 100644
index 000000000..74a6fadf9
--- /dev/null
+++ b/app/views/admin/settings/branding/show.html.haml
@@ -0,0 +1,39 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('admin.settings.branding.title')
+
+- content_for :heading do
+  %h2= t('admin.settings.title')
+  = render partial: 'admin/settings/shared/links'
+
+= simple_form_for @admin_settings, url: admin_settings_branding_path, html: { method: :patch } do |f|
+  = render 'shared/error_messages', object: @admin_settings
+
+  %p.lead= t('admin.settings.branding.preamble')
+
+  .fields-group
+    = f.input :site_title, wrapper: :with_label
+
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :site_contact_username, wrapper: :with_label
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :site_contact_email, wrapper: :with_label
+
+  .fields-group
+    = f.input :site_short_description, wrapper: :with_block_label, as: :text, input_html: { rows: 2, maxlength: 200 }
+
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :thumbnail, as: :file, wrapper: :with_block_label
+    .fields-row__column.fields-row__column-6.fields-group
+      - if @admin_settings.thumbnail.persisted?
+        = image_tag @admin_settings.thumbnail.file.url(:'@1x'), class: 'fields-group__thumbnail'
+        = link_to admin_site_upload_path(@admin_settings.thumbnail), data: { method: :delete }, class: 'link-button link-button--destructive' do
+          = fa_icon 'trash fw'
+          = t('admin.site_uploads.delete')
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/content_retention/show.html.haml b/app/views/admin/settings/content_retention/show.html.haml
new file mode 100644
index 000000000..36856127f
--- /dev/null
+++ b/app/views/admin/settings/content_retention/show.html.haml
@@ -0,0 +1,22 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('admin.settings.content_retention.title')
+
+- content_for :heading do
+  %h2= t('admin.settings.title')
+  = render partial: 'admin/settings/shared/links'
+
+= simple_form_for @admin_settings, url: admin_settings_content_retention_path, html: { method: :patch } do |f|
+  = render 'shared/error_messages', object: @admin_settings
+
+  %p.lead= t('admin.settings.content_retention.preamble')
+
+  .fields-group
+    = f.input :media_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' }
+    = f.input :content_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' }
+    = f.input :backups_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' }
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/discovery/show.html.haml b/app/views/admin/settings/discovery/show.html.haml
new file mode 100644
index 000000000..e63c853fb
--- /dev/null
+++ b/app/views/admin/settings/discovery/show.html.haml
@@ -0,0 +1,40 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('admin.settings.discovery.title')
+
+- content_for :heading do
+  %h2= t('admin.settings.title')
+  = render partial: 'admin/settings/shared/links'
+
+= simple_form_for @admin_settings, url: admin_settings_discovery_path, html: { method: :patch } do |f|
+  = render 'shared/error_messages', object: @admin_settings
+
+  %p.lead= t('admin.settings.discovery.preamble')
+
+  %h4= t('admin.settings.discovery.trends')
+
+  .fields-group
+    = f.input :trends, as: :boolean, wrapper: :with_label
+
+  .fields-group
+    = f.input :trendable_by_default, as: :boolean, wrapper: :with_label
+
+  %h4= t('admin.settings.discovery.public_timelines')
+
+  .fields-group
+    = f.input :timeline_preview, as: :boolean, wrapper: :with_label
+
+  %h4= t('admin.settings.discovery.follow_recommendations')
+
+  .fields-group
+    = f.input :bootstrap_timeline_accounts, wrapper: :with_block_label
+
+  %h4= t('admin.settings.discovery.profile_directory')
+
+  .fields-group
+    = f.input :profile_directory, as: :boolean, wrapper: :with_label
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/edit.html.haml b/app/views/admin/settings/edit.html.haml
deleted file mode 100644
index 15b1a2498..000000000
--- a/app/views/admin/settings/edit.html.haml
+++ /dev/null
@@ -1,102 +0,0 @@
-- content_for :header_tags do
-  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
-
-- content_for :page_title do
-  = t('admin.settings.title')
-
-  - content_for :heading_actions do
-    = button_tag t('generic.save_changes'), class: 'button', form: 'edit_admin'
-
-= simple_form_for @admin_settings, url: admin_settings_path, html: { method: :patch, id: 'edit_admin' } do |f|
-  = render 'shared/error_messages', object: @admin_settings
-
-  .fields-group
-    = f.input :site_title, wrapper: :with_label, label: t('admin.settings.site_title')
-
-  .fields-row
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :theme, collection: Themes.instance.names, label: t('simple_form.labels.defaults.setting_theme'), label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :registrations_mode, collection: %w(open approved none), wrapper: :with_label, label: t('admin.settings.registrations_mode.title'), include_blank: false, label_method: lambda { |mode| I18n.t("admin.settings.registrations_mode.modes.#{mode}") }
-
-  .fields-row
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :site_contact_username, wrapper: :with_label, label: t('admin.settings.contact_information.username')
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :site_contact_email, wrapper: :with_label, label: t('admin.settings.contact_information.email')
-
-  .fields-group
-    = f.input :site_short_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_short_description.title'), hint: t('admin.settings.site_short_description.desc_html'), input_html: { rows: 2 }
-
-  .fields-group
-    = f.input :site_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description.title'), hint: t('admin.settings.site_description.desc_html'), input_html: { rows: 2 }
-
-  .fields-row
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :thumbnail, as: :file, wrapper: :with_block_label, label: t('admin.settings.thumbnail.title'), hint: site_upload_delete_hint(t('admin.settings.thumbnail.desc_html'), :thumbnail)
-
-  .fields-row
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :mascot, as: :file, wrapper: :with_block_label, label: t('admin.settings.mascot.title'), hint: site_upload_delete_hint(t('admin.settings.mascot.desc_html'), :mascot)
-
-  %hr.spacer/
-
-  .fields-group
-    = f.input :require_invite_text, as: :boolean, wrapper: :with_label, label: t('admin.settings.registrations.require_invite_text.title'), hint: t('admin.settings.registrations.require_invite_text.desc_html'), disabled: !approved_registrations?
-
-  %hr.spacer/
-
-  .fields-group
-    = f.input :bootstrap_timeline_accounts, wrapper: :with_block_label, label: t('admin.settings.bootstrap_timeline_accounts.title'), hint: t('admin.settings.bootstrap_timeline_accounts.desc_html')
-
-  %hr.spacer/
-
-  - unless whitelist_mode?
-    .fields-group
-      = f.input :timeline_preview, as: :boolean, wrapper: :with_label, label: t('admin.settings.timeline_preview.title'), hint: t('admin.settings.timeline_preview.desc_html')
-
-  - unless whitelist_mode?
-    .fields-group
-      = f.input :activity_api_enabled, as: :boolean, wrapper: :with_label, label: t('admin.settings.activity_api_enabled.title'), hint: t('admin.settings.activity_api_enabled.desc_html'), recommended: true
-
-    .fields-group
-      = f.input :peers_api_enabled, as: :boolean, wrapper: :with_label, label: t('admin.settings.peers_api_enabled.title'), hint: t('admin.settings.peers_api_enabled.desc_html'), recommended: true
-
-    .fields-group
-      = f.input :preview_sensitive_media, as: :boolean, wrapper: :with_label, label: t('admin.settings.preview_sensitive_media.title'), hint: t('admin.settings.preview_sensitive_media.desc_html')
-
-    .fields-group
-      = f.input :profile_directory, as: :boolean, wrapper: :with_label, label: t('admin.settings.profile_directory.title'), hint: t('admin.settings.profile_directory.desc_html')
-
-    .fields-group
-      = f.input :trends, as: :boolean, wrapper: :with_label, label: t('admin.settings.trends.title'), hint: t('admin.settings.trends.desc_html')
-
-    .fields-group
-      = f.input :trendable_by_default, as: :boolean, wrapper: :with_label, label: t('admin.settings.trendable_by_default.title'), hint: t('admin.settings.trendable_by_default.desc_html'), recommended: :not_recommended
-
-    .fields-group
-      = f.input :noindex, as: :boolean, wrapper: :with_label, label: t('admin.settings.default_noindex.title'), hint: t('admin.settings.default_noindex.desc_html')
-
-  %hr.spacer/
-
-  .fields-row
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :show_domain_blocks, wrapper: :with_label, collection: %i(disabled users all), label: t('admin.settings.domain_blocks.title'), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :show_domain_blocks_rationale, wrapper: :with_label, collection: %i(disabled users all), label: t('admin.settings.domain_blocks_rationale.title'), label_method: lambda { |value| t("admin.settings.domain_blocks.#{value}") }, include_blank: false, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
-
-  .fields-group
-    = f.input :site_extended_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description_extended.title'), hint: t('admin.settings.site_description_extended.desc_html'), input_html: { rows: 8 } unless whitelist_mode?
-    = f.input :closed_registrations_message, as: :text, wrapper: :with_block_label, label: t('admin.settings.registrations.closed_message.title'), hint: t('admin.settings.registrations.closed_message.desc_html'), input_html: { rows: 8 }
-    = f.input :site_terms, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_terms.title'), hint: t('admin.settings.site_terms.desc_html'), input_html: { rows: 8 }
-    = f.input :custom_css, wrapper: :with_block_label, as: :text, input_html: { rows: 8 }, label: t('admin.settings.custom_css.title'), hint: t('admin.settings.custom_css.desc_html')
-
-  %hr.spacer/
-
-  .fields-group
-    = f.input :media_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' }
-    = f.input :content_cache_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' }
-    = f.input :backups_retention_period, wrapper: :with_block_label, input_html: { pattern: '[0-9]+' }
-
-  .actions
-    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/registrations/show.html.haml b/app/views/admin/settings/registrations/show.html.haml
new file mode 100644
index 000000000..0129332d7
--- /dev/null
+++ b/app/views/admin/settings/registrations/show.html.haml
@@ -0,0 +1,27 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('admin.settings.registrations.title')
+
+- content_for :heading do
+  %h2= t('admin.settings.title')
+  = render partial: 'admin/settings/shared/links'
+
+= simple_form_for @admin_settings, url: admin_settings_branding_path, html: { method: :patch } do |f|
+  = render 'shared/error_messages', object: @admin_settings
+
+  %p.lead= t('admin.settings.registrations.preamble')
+
+  .fields-row
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :registrations_mode, collection: %w(open approved none), wrapper: :with_label, include_blank: false, label_method: lambda { |mode| I18n.t("admin.settings.registrations_mode.modes.#{mode}") }
+
+    .fields-row__column.fields-row__column-6.fields-group
+      = f.input :require_invite_text, as: :boolean, wrapper: :with_label, disabled: !approved_registrations?
+
+  .fields-group
+    = f.input :closed_registrations_message, as: :text, wrapper: :with_block_label, input_html: { rows: 2 }
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit
diff --git a/app/views/admin/settings/shared/_links.html.haml b/app/views/admin/settings/shared/_links.html.haml
new file mode 100644
index 000000000..1294c26ce
--- /dev/null
+++ b/app/views/admin/settings/shared/_links.html.haml
@@ -0,0 +1,8 @@
+.content__heading__tabs
+  = render_navigation renderer: :links do |primary|
+    - primary.item :branding, safe_join([fa_icon('pencil fw'), t('admin.settings.branding.title')]), admin_settings_branding_path
+    - primary.item :about, safe_join([fa_icon('file-text fw'), t('admin.settings.about.title')]), admin_settings_about_path
+    - primary.item :registrations, safe_join([fa_icon('users fw'), t('admin.settings.registrations.title')]), admin_settings_registrations_path
+    - primary.item :discovery, safe_join([fa_icon('search fw'), t('admin.settings.discovery.title')]), admin_settings_discovery_path
+    - primary.item :content_retention, safe_join([fa_icon('history fw'), t('admin.settings.content_retention.title')]), admin_settings_content_retention_path
+    - primary.item :appearance, safe_join([fa_icon('desktop fw'), t('admin.settings.appearance.title')]), admin_settings_appearance_path
diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml
index e577b9803..59021ad88 100644
--- a/app/views/layouts/admin.html.haml
+++ b/app/views/layouts/admin.html.haml
@@ -22,15 +22,16 @@
 
     .content-wrapper
       .content
-        .content-heading
+        .content__heading
           - if content_for?(:heading)
             = yield :heading
           - else
-            %h2= yield :page_title
+            .content__heading__row
+              %h2= yield :page_title
 
-          - if :heading_actions
-            .content-heading-actions
-              = yield :heading_actions
+              - if content_for?(:heading_actions)
+                .content__heading__actions
+                  = yield :heading_actions
 
         = render 'application/flashes'
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 412178ca3..70850d478 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -667,79 +667,40 @@ en:
       empty: No server rules have been defined yet.
       title: Server rules
     settings:
-      activity_api_enabled:
-        desc_html: Counts of locally published posts, active users, and new registrations in weekly buckets
-        title: Publish aggregate statistics about user activity in the API
-      bootstrap_timeline_accounts:
-        desc_html: Separate multiple usernames by comma. These accounts will be guaranteed to be shown in follow recommendations
-        title: Recommend these accounts to new users
-      contact_information:
-        email: Business e-mail
-        username: Contact username
-      custom_css:
-        desc_html: Modify the look with CSS loaded on every page
-        title: Custom CSS
-      default_noindex:
-        desc_html: Affects all users who have not changed this setting themselves
-        title: Opt users out of search engine indexing by default
+      about:
+        manage_rules: Manage server rules
+        preamble: Provide in-depth information about how the server is operated, moderated, funded.
+        rules_hint: There is a dedicated area for rules that your users are expected to adhere to.
+        title: About
+      appearance:
+        preamble: Customize Mastodon's web interface.
+        title: Appearance
+      branding:
+        preamble: Your server's branding differentiates it from other servers in the network. This information may be displayed across a variety of environments, such as Mastodon's web interface, native applications, in link previews on other websites and within messaging apps, and so on. For this reason, it is best to keep this information clear, short and concise.
+        title: Branding
+      content_retention:
+        preamble: Control how user-generated content is stored in Mastodon.
+        title: Content retention
+      discovery:
+        follow_recommendations: Follow recommendations
+        preamble: Surfacing interesting content is instrumental in onboarding new users who may not know anyone Mastodon. Control how various discovery features work on your server.
+        profile_directory: Profile directory
+        public_timelines: Public timelines
+        title: Discovery
+        trends: Trends
       domain_blocks:
         all: To everyone
         disabled: To no one
-        title: Show domain blocks
         users: To logged-in local users
-      domain_blocks_rationale:
-        title: Show rationale
-      mascot:
-        desc_html: Displayed on multiple pages. At least 293×205px recommended. When not set, falls back to default mascot
-        title: Mascot image
-      peers_api_enabled:
-        desc_html: Domain names this server has encountered in the fediverse
-        title: Publish list of discovered servers in the API
-      preview_sensitive_media:
-        desc_html: Link previews on other websites will display a thumbnail even if the media is marked as sensitive
-        title: Show sensitive media in OpenGraph previews
-      profile_directory:
-        desc_html: Allow users to be discoverable
-        title: Enable profile directory
       registrations:
-        closed_message:
-          desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags
-          title: Closed registration message
-        require_invite_text:
-          desc_html: When registrations require manual approval, make the “Why do you want to join?” text input mandatory rather than optional
-          title: Require new users to enter a reason to join
+        preamble: Control who can create an account on your server.
+        title: Registrations
       registrations_mode:
         modes:
           approved: Approval required for sign up
           none: Nobody can sign up
           open: Anyone can sign up
-        title: Registrations mode
-      site_description:
-        desc_html: Introductory paragraph on the API. Describe what makes this Mastodon server special and anything else important. You can use HTML tags, in particular <code>&lt;a&gt;</code> and <code>&lt;em&gt;</code>.
-        title: Server description
-      site_description_extended:
-        desc_html: A good place for your code of conduct, rules, guidelines and other things that set your server apart. You can use HTML tags
-        title: Custom extended information
-      site_short_description:
-        desc_html: Displayed in sidebar and meta tags. Describe what Mastodon is and what makes this server special in a single paragraph.
-        title: Short server description
-      site_terms:
-        desc_html: You can write your own privacy policy. You can use HTML tags
-        title: Custom privacy policy
-      site_title: Server name
-      thumbnail:
-        desc_html: Used for previews via OpenGraph and API. 1200x630px recommended
-        title: Server thumbnail
-      timeline_preview:
-        desc_html: Display link to public timeline on landing page and allow API access to the public timeline without authentication
-        title: Allow unauthenticated access to public timeline
-      title: Site settings
-      trendable_by_default:
-        desc_html: Specific trending content can still be explicitly disallowed
-        title: Allow trends without prior review
-      trends:
-        desc_html: Publicly display previously reviewed content that is currently trending
-        title: Trends
+      title: Server Settings
     site_uploads:
       delete: Delete uploaded file
       destroyed_msg: Site upload successfully deleted!
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index db5b45e41..64281d7b7 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -75,8 +75,25 @@ en:
           warn: Hide the filtered content behind a warning mentioning the filter's title
       form_admin_settings:
         backups_retention_period: Keep generated user archives for the specified number of days.
+        bootstrap_timeline_accounts: These accounts will be pinned to the top of new users' follow recommendations.
+        closed_registrations_message: Displayed when sign-ups are closed
         content_cache_retention_period: Posts from other servers will be deleted after the specified number of days when set to a positive value. This may be irreversible.
+        custom_css: You can apply custom styles on the web version of Mastodon.
+        mascot: Overrides the illustration in the advanced web interface.
         media_cache_retention_period: Downloaded media files will be deleted after the specified number of days when set to a positive value, and re-downloaded on demand.
+        profile_directory: The profile directory lists all users who have opted-in to be discoverable.
+        require_invite_text: When sign-ups require manual approval, make the “Why do you want to join?” text input mandatory rather than optional
+        site_contact_email: How people can reach you for legal or support inquiries.
+        site_contact_username: How people can reach you on Mastodon.
+        site_extended_description: Any additional information that may be useful to visitors and your users. Can be structured with Markdown syntax.
+        site_short_description: A short description to help uniquely identify your server. Who is running it, who is it for?
+        site_terms: Use your own privacy policy or leave blank to use the default. Can be structured with Markdown syntax.
+        site_title: How people may refer to your server besides its domain name.
+        theme: Theme that logged out visitors and new users see.
+        thumbnail: A roughly 2:1 image displayed alongside your server information.
+        timeline_preview: Logged out visitors will be able to browse the most recent public posts available on the server.
+        trendable_by_default: Skip manual review of trending content. Individual items can still be removed from trends after the fact.
+        trends: Trends show which posts, hashtags and news stories are gaining traction on your server.
       form_challenge:
         current_password: You are entering a secure area
       imports:
@@ -213,8 +230,28 @@ en:
           warn: Hide with a warning
       form_admin_settings:
         backups_retention_period: User archive retention period
+        bootstrap_timeline_accounts: Always recommend these accounts to new users
+        closed_registrations_message: Custom message when sign-ups are not available
         content_cache_retention_period: Content cache retention period
+        custom_css: Custom CSS
+        mascot: Custom mascot (legacy)
         media_cache_retention_period: Media cache retention period
+        profile_directory: Enable profile directory
+        registrations_mode: Who can sign-up
+        require_invite_text: Require a reason to join
+        show_domain_blocks: Show domain blocks
+        show_domain_blocks_rationale: Show why domains were blocked
+        site_contact_email: Contact e-mail
+        site_contact_username: Contact username
+        site_extended_description: Extended description
+        site_short_description: Server description
+        site_terms: Privacy Policy
+        site_title: Server name
+        theme: Default theme
+        thumbnail: Server thumbnail
+        timeline_preview: Allow unauthenticated access to public timelines
+        trendable_by_default: Allow trends without prior review
+        trends: Enable trends
       interactions:
         must_be_follower: Block notifications from non-followers
         must_be_following: Block notifications from people you don't follow
diff --git a/config/navigation.rb b/config/navigation.rb
index 706de0471..e901fb932 100644
--- a/config/navigation.rb
+++ b/config/navigation.rb
@@ -52,7 +52,7 @@ SimpleNavigation::Configuration.run do |navigation|
 
     n.item :admin, safe_join([fa_icon('cogs fw'), t('admin.title')]), nil, if: -> { current_user.can?(:view_dashboard, :manage_settings, :manage_rules, :manage_announcements, :manage_custom_emojis, :manage_webhooks, :manage_federation) } do |s|
       s.item :dashboard, safe_join([fa_icon('tachometer fw'), t('admin.dashboard.title')]), admin_dashboard_path, if: -> { current_user.can?(:view_dashboard) }
-      s.item :settings, safe_join([fa_icon('cogs fw'), t('admin.settings.title')]), edit_admin_settings_path, if: -> { current_user.can?(:manage_settings) }, highlights_on: %r{/admin/settings}
+      s.item :settings, safe_join([fa_icon('cogs fw'), t('admin.settings.title')]), admin_settings_path, if: -> { current_user.can?(:manage_settings) }, highlights_on: %r{/admin/settings}
       s.item :rules, safe_join([fa_icon('gavel fw'), t('admin.rules.title')]), admin_rules_path, highlights_on: %r{/admin/rules}, if: -> { current_user.can?(:manage_rules) }
       s.item :roles, safe_join([fa_icon('vcard fw'), t('admin.roles.title')]), admin_roles_path, highlights_on: %r{/admin/roles}, if: -> { current_user.can?(:manage_roles) }
       s.item :announcements, safe_join([fa_icon('bullhorn fw'), t('admin.announcements.title')]), admin_announcements_path, highlights_on: %r{/admin/announcements}, if: -> { current_user.can?(:manage_announcements) }
diff --git a/config/routes.rb b/config/routes.rb
index 1ed585f19..b44479e77 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -241,7 +241,18 @@ Rails.application.routes.draw do
       end
     end
 
-    resource :settings, only: [:edit, :update]
+    get '/settings', to: redirect('/admin/settings/branding')
+    get '/settings/edit', to: redirect('/admin/settings/branding')
+
+    namespace :settings do
+      resource :branding, only: [:show, :update], controller: 'branding'
+      resource :registrations, only: [:show, :update], controller: 'registrations'
+      resource :content_retention, only: [:show, :update], controller: 'content_retention'
+      resource :about, only: [:show, :update], controller: 'about'
+      resource :appearance, only: [:show, :update], controller: 'appearance'
+      resource :discovery, only: [:show, :update], controller: 'discovery'
+    end
+
     resources :site_uploads, only: [:destroy]
 
     resources :invites, only: [:index, :create, :destroy] do
diff --git a/spec/controllers/admin/settings/branding_controller_spec.rb b/spec/controllers/admin/settings/branding_controller_spec.rb
new file mode 100644
index 000000000..ee1c441bc
--- /dev/null
+++ b/spec/controllers/admin/settings/branding_controller_spec.rb
@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Admin::Settings::BrandingController, type: :controller do
+  render_views
+
+  describe 'When signed in as an admin' do
+    before do
+      sign_in Fabricate(:user, role: UserRole.find_by(name: 'Admin')), scope: :user
+    end
+
+    describe 'GET #show' do
+      it 'returns http success' do
+        get :show
+
+        expect(response).to have_http_status(200)
+      end
+    end
+
+    describe 'PUT #update' do
+      before do
+        allow_any_instance_of(Form::AdminSettings).to receive(:valid?).and_return(true)
+      end
+
+      around do |example|
+        before = Setting.site_short_description
+        Setting.site_short_description = nil
+        example.run
+        Setting.site_short_description = before
+        Setting.new_setting_key = nil
+      end
+
+      it 'cannot create a setting value for a non-admin key' do
+        expect(Setting.new_setting_key).to be_blank
+
+        patch :update, params: { form_admin_settings: { new_setting_key: 'New key value' } }
+
+        expect(response).to redirect_to(admin_settings_branding_path)
+        expect(Setting.new_setting_key).to be_nil
+      end
+
+      it 'creates a settings value that didnt exist before for eligible key' do
+        expect(Setting.site_short_description).to be_blank
+
+        patch :update, params: { form_admin_settings: { site_short_description: 'New key value' } }
+
+        expect(response).to redirect_to(admin_settings_branding_path)
+        expect(Setting.site_short_description).to eq 'New key value'
+      end
+    end
+  end
+end
diff --git a/spec/controllers/admin/settings_controller_spec.rb b/spec/controllers/admin/settings_controller_spec.rb
deleted file mode 100644
index 46749f76c..000000000
--- a/spec/controllers/admin/settings_controller_spec.rb
+++ /dev/null
@@ -1,71 +0,0 @@
-# frozen_string_literal: true
-
-require 'rails_helper'
-
-RSpec.describe Admin::SettingsController, type: :controller do
-  render_views
-
-  describe 'When signed in as an admin' do
-    before do
-      sign_in Fabricate(:user, role: UserRole.find_by(name: 'Admin')), scope: :user
-    end
-
-    describe 'GET #edit' do
-      it 'returns http success' do
-        get :edit
-
-        expect(response).to have_http_status(200)
-      end
-    end
-
-    describe 'PUT #update' do
-      before do
-        allow_any_instance_of(Form::AdminSettings).to receive(:valid?).and_return(true)
-      end
-
-      describe 'for a record that doesnt exist' do
-        around do |example|
-          before = Setting.site_extended_description
-          Setting.site_extended_description = nil
-          example.run
-          Setting.site_extended_description = before
-          Setting.new_setting_key = nil
-        end
-
-        it 'cannot create a setting value for a non-admin key' do
-          expect(Setting.new_setting_key).to be_blank
-
-          patch :update, params: { form_admin_settings: { new_setting_key: 'New key value' } }
-
-          expect(response).to redirect_to(edit_admin_settings_path)
-          expect(Setting.new_setting_key).to be_nil
-        end
-
-        it 'creates a settings value that didnt exist before for eligible key' do
-          expect(Setting.site_extended_description).to be_blank
-
-          patch :update, params: { form_admin_settings: { site_extended_description: 'New key value' } }
-
-          expect(response).to redirect_to(edit_admin_settings_path)
-          expect(Setting.site_extended_description).to eq 'New key value'
-        end
-      end
-
-      context do
-        around do |example|
-          site_title = Setting.site_title
-          example.run
-          Setting.site_title = site_title
-        end
-
-        it 'updates a settings value' do
-          Setting.site_title = 'Original'
-          patch :update, params: { form_admin_settings: { site_title: 'New title' } }
-
-          expect(response).to redirect_to(edit_admin_settings_path)
-          expect(Setting.site_title).to eq 'New title'
-        end
-      end
-    end
-  end
-end
-- 
cgit 


From 56efa8d22f041ca87efdfb2e95e80d213e72dde9 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 22 Oct 2022 23:15:14 +0200
Subject: Fix reply not opening compose page on certain screen sizes in web UI
 (#19417)

Fix ellipsis next to icons on navigation panel on some browsers
---
 app/javascript/mastodon/actions/compose.js     | 4 +---
 app/javascript/styles/mastodon/components.scss | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
index 0cfc1868e..42d4ad8df 100644
--- a/app/javascript/mastodon/actions/compose.js
+++ b/app/javascript/mastodon/actions/compose.js
@@ -79,10 +79,8 @@ const messages = defineMessages({
   uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
 });
 
-const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1);
-
 export const ensureComposeIsVisible = (getState, routerHistory) => {
-  if (!getState().getIn(['compose', 'mounted']) && window.innerWidth < COMPOSE_PANEL_BREAKPOINT) {
+  if (!getState().getIn(['compose', 'mounted'])) {
     routerHistory.push('/publish');
   }
 };
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 5d0ff8536..107a4e586 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3176,7 +3176,6 @@ $ui-header-height: 55px;
   padding: 15px;
   text-decoration: none;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 
   &:hover,
-- 
cgit 


From a43a8237681187f6e56524aa3effcfc998a877de Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 22 Oct 2022 23:18:32 +0200
Subject: Add error boundary around routes in web UI (#19412)

* Add error boundary around routes in web UI

* Update app/javascript/mastodon/features/ui/util/react_router_helpers.js

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

* Update app/javascript/mastodon/features/ui/util/react_router_helpers.js

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

* Update app/javascript/mastodon/features/ui/components/bundle_column_error.js

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
---
 .../features/ui/components/bundle_column_error.js  | 157 +++++++++++++++++----
 app/javascript/mastodon/features/ui/index.js       |   6 +-
 .../features/ui/util/react_router_helpers.js       |  34 ++++-
 app/javascript/styles/mastodon/components.scss     |  53 ++++++-
 4 files changed, 219 insertions(+), 31 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/features/ui/components/bundle_column_error.js b/app/javascript/mastodon/features/ui/components/bundle_column_error.js
index ab6d4aa44..dfe970ad0 100644
--- a/app/javascript/mastodon/features/ui/components/bundle_column_error.js
+++ b/app/javascript/mastodon/features/ui/components/bundle_column_error.js
@@ -1,44 +1,155 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import Column from 'mastodon/components/column';
-import ColumnHeader from 'mastodon/components/column_header';
-import IconButton from 'mastodon/components/icon_button';
+import Button from 'mastodon/components/button';
 import { Helmet } from 'react-helmet';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import { autoPlayGif } from 'mastodon/initial_state';
 
-const messages = defineMessages({
-  title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
-  body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this component.' },
-  retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
-});
+class GIF extends React.PureComponent {
 
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+    staticSrc: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    animate: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    animate: autoPlayGif,
+  };
+
+  state = {
+    hovering: false,
+  };
+
+  handleMouseEnter = () => {
+    const { animate } = this.props;
+
+    if (!animate) {
+      this.setState({ hovering: true });
+    }
+  }
+
+  handleMouseLeave = () => {
+    const { animate } = this.props;
+
+    if (!animate) {
+      this.setState({ hovering: false });
+    }
+  }
+
+  render () {
+    const { src, staticSrc, className, animate } = this.props;
+    const { hovering } = this.state;
+
+    return (
+      <img
+        className={className}
+        src={(hovering || animate) ? src : staticSrc}
+        alt=''
+        role='presentation'
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      />
+    );
+  }
+
+}
+
+class CopyButton extends React.PureComponent {
+
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    value: PropTypes.string.isRequired,
+  };
+
+  state = {
+    copied: false,
+  };
+
+  handleClick = () => {
+    const { value } = this.props;
+    navigator.clipboard.writeText(value);
+    this.setState({ copied: true });
+    this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
+  }
+
+  componentWillUnmount () {
+    if (this.timeout) clearTimeout(this.timeout);
+  }
+
+  render () {
+    const { children } = this.props;
+    const { copied } = this.state;
+
+    return (
+      <Button onClick={this.handleClick} className={copied ? 'copied' : 'copyable'}>{copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : children}</Button>
+    );
+  }
+
+}
+
+export default @injectIntl
 class BundleColumnError extends React.PureComponent {
 
   static propTypes = {
-    onRetry: PropTypes.func.isRequired,
+    errorType: PropTypes.oneOf(['routing', 'network', 'error']),
+    onRetry: PropTypes.func,
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
-  }
+    stacktrace: PropTypes.string,
+  };
+
+  static defaultProps = {
+    errorType: 'routing',
+  };
 
   handleRetry = () => {
-    this.props.onRetry();
+    const { onRetry } = this.props;
+
+    if (onRetry) {
+      onRetry();
+    }
   }
 
   render () {
-    const { multiColumn, intl: { formatMessage } } = this.props;
+    const { errorType, multiColumn, stacktrace } = this.props;
 
-    return (
-      <Column bindToDocument={!multiColumn} label={formatMessage(messages.title)}>
-        <ColumnHeader
-          icon='exclamation-circle'
-          title={formatMessage(messages.title)}
-          showBackButton
-          multiColumn={multiColumn}
-        />
+    let title, body;
 
+    switch(errorType) {
+    case 'routing':
+      title = <FormattedMessage id='bundle_column_error.routing.title' defaultMessage='404' />;
+      body = <FormattedMessage id='bundle_column_error.routing.body' defaultMessage='The requested page could not be found. Are you sure the URL in the address bar is correct?' />;
+      break;
+    case 'network':
+      title = <FormattedMessage id='bundle_column_error.network.title' defaultMessage='Network error' />;
+      body = <FormattedMessage id='bundle_column_error.network.body' defaultMessage='There was an error when trying to load this page. This could be due to a temporary problem with your internet connection or this server.' />;
+      break;
+    case 'error':
+      title = <FormattedMessage id='bundle_column_error.error.title' defaultMessage='Oh, no!' />;
+      body = <FormattedMessage id='bundle_column_error.error.body' defaultMessage='The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.' />;
+      break;
+    }
+
+    return (
+      <Column bindToDocument={!multiColumn}>
         <div className='error-column'>
-          <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
-          {formatMessage(messages.body)}
+          <GIF src='/oops.gif' staticSrc='/oops.png' className='error-column__image' />
+
+          <div className='error-column__message'>
+            <h1>{title}</h1>
+            <p>{body}</p>
+
+            <div className='error-column__message__actions'>
+              {errorType === 'network' && <Button onClick={this.handleRetry}><FormattedMessage id='bundle_column_error.retry' defaultMessage='Try again' /></Button>}
+              {errorType === 'error' && <CopyButton value={stacktrace}><FormattedMessage id='bundle_column_error.copy_stacktrace' defaultMessage='Copy error report' /></CopyButton>}
+              <Link to='/' className={classNames('button', { 'button-tertiary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
+            </div>
+          </div>
         </div>
 
         <Helmet>
@@ -49,5 +160,3 @@ class BundleColumnError extends React.PureComponent {
   }
 
 }
-
-export default injectIntl(BundleColumnError);
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 531747cae..7cda5e106 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import { Redirect, withRouter } from 'react-router-dom';
+import { Redirect, Route, withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import NotificationsContainer from './containers/notifications_container';
 import LoadingBarContainer from './containers/loading_bar_container';
@@ -18,6 +18,7 @@ import { clearHeight } from '../../actions/height_cache';
 import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
+import BundleColumnError from './components/bundle_column_error';
 import UploadArea from './components/upload_area';
 import ColumnsAreaContainer from './containers/columns_area_container';
 import PictureInPicture from 'mastodon/features/picture_in_picture';
@@ -39,7 +40,6 @@ import {
   HashtagTimeline,
   Notifications,
   FollowRequests,
-  GenericNotFound,
   FavouritedStatuses,
   BookmarkedStatuses,
   ListTimeline,
@@ -219,7 +219,7 @@ class SwitchingColumnsArea extends React.PureComponent {
           <WrappedRoute path='/mutes' component={Mutes} content={children} />
           <WrappedRoute path='/lists' component={Lists} content={children} />
 
-          <WrappedRoute component={GenericNotFound} content={children} />
+          <Route component={BundleColumnError} />
         </WrappedSwitch>
       </ColumnsAreaContainer>
     );
diff --git a/app/javascript/mastodon/features/ui/util/react_router_helpers.js b/app/javascript/mastodon/features/ui/util/react_router_helpers.js
index a65d79def..2ee06c3ff 100644
--- a/app/javascript/mastodon/features/ui/util/react_router_helpers.js
+++ b/app/javascript/mastodon/features/ui/util/react_router_helpers.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';
-
+import StackTrace from 'stacktrace-js';
 import ColumnLoading from '../components/column_loading';
 import BundleColumnError from '../components/bundle_column_error';
 import BundleContainer from '../containers/bundle_container';
@@ -42,8 +42,38 @@ export class WrappedRoute extends React.Component {
     componentParams: {},
   };
 
+  static getDerivedStateFromError () {
+    return {
+      hasError: true,
+    };
+  };
+
+  state = {
+    hasError: false,
+    stacktrace: '',
+  };
+
+  componentDidCatch (error) {
+    StackTrace.fromError(error).then(stackframes => {
+      this.setState({ stacktrace: error.toString() + '\n' + stackframes.map(frame => frame.toString()).join('\n') });
+    }).catch(err => {
+      console.error(err);
+    });
+  }
+
   renderComponent = ({ match }) => {
     const { component, content, multiColumn, componentParams } = this.props;
+    const { hasError, stacktrace } = this.state;
+
+    if (hasError) {
+      return (
+        <BundleColumnError
+          stacktrace={stacktrace}
+          multiColumn={multiColumn}
+          errorType='error'
+        />
+      );
+    }
 
     return (
       <BundleContainer fetchComponent={component} loading={this.renderLoading} error={this.renderError}>
@@ -59,7 +89,7 @@ export class WrappedRoute extends React.Component {
   }
 
   renderError = (props) => {
-    return <BundleColumnError {...props} />;
+    return <BundleColumnError {...props} errorType='network' />;
   }
 
   render () {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 107a4e586..afe9f9da9 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -89,6 +89,15 @@
     cursor: default;
   }
 
+  &.copyable {
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    background: $valid-value-color;
+    transition: none;
+  }
+
   &::-moz-focus-inner {
     border: 0;
   }
@@ -2656,7 +2665,8 @@ $ui-header-height: 55px;
 
   .column-header,
   .column-back-button,
-  .scrollable {
+  .scrollable,
+  .error-column {
     border-radius: 0 !important;
   }
 }
@@ -4292,7 +4302,6 @@ a.status-card.compact:hover {
 }
 
 .empty-column-indicator,
-.error-column,
 .follow_requests-unlocked_explanation {
   color: $dark-text-color;
   background: $ui-base-color;
@@ -4330,7 +4339,47 @@ a.status-card.compact:hover {
 }
 
 .error-column {
+  padding: 20px;
+  background: $ui-base-color;
+  border-radius: 4px;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
   flex-direction: column;
+  cursor: default;
+
+  &__image {
+    max-width: 350px;
+    margin-top: -50px;
+  }
+
+  &__message {
+    text-align: center;
+    color: $darker-text-color;
+    font-size: 15px;
+    line-height: 22px;
+
+    h1 {
+      font-size: 28px;
+      line-height: 33px;
+      font-weight: 700;
+      margin-bottom: 15px;
+      color: $primary-text-color;
+    }
+
+    p {
+      max-width: 48ch;
+    }
+
+    &__actions {
+      margin-top: 30px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 
 @keyframes heartbeat {
-- 
cgit 


From 1fd6460b02d2e73c94e7c6b1fa8fdc4d2ae36241 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 23 Oct 2022 15:58:24 +0200
Subject: Change floating action button to be a button in header in web UI
 (#19422)

- Fix theme color
- Fix elephant being too big on error page on small screens
- Remove "Follows and Followers" link from navigation panel
---
 .../features/ui/components/columns_area.js         | 26 +++------------
 .../mastodon/features/ui/components/header.js      | 21 +++++++++---
 .../features/ui/components/navigation_panel.js     |  1 -
 app/javascript/mastodon/features/ui/index.js       |  2 +-
 app/javascript/styles/mastodon/components.scss     | 39 ++--------------------
 app/serializers/manifest_serializer.rb             |  2 +-
 app/views/layouts/application.html.haml            |  2 +-
 7 files changed, 25 insertions(+), 68 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index 9ee6fca43..f4824f045 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { Link } from 'react-router-dom';
 import BundleContainer from '../containers/bundle_container';
 import ColumnLoading from './column_loading';
 import DrawerLoading from './drawer_loading';
@@ -21,10 +19,8 @@ import {
   ListTimeline,
   Directory,
 } from '../../ui/util/async-components';
-import Icon from 'mastodon/components/icon';
 import ComposePanel from './compose_panel';
 import NavigationPanel from './navigation_panel';
-
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { scrollRight } from '../../../scroll';
 
@@ -43,22 +39,13 @@ const componentMap = {
   'DIRECTORY': Directory,
 };
 
-const messages = defineMessages({
-  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
-});
-
-const shouldHideFAB = path => path.match(/^\/statuses\/|^\/@[^/]+\/\d+|^\/publish|^\/explore|^\/getting-started|^\/start/);
-
-export default @(component => injectIntl(component, { withRef: true }))
-class ColumnsArea extends ImmutablePureComponent {
+export default class ColumnsArea extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
-    identity: PropTypes.object.isRequired,
   };
 
   static propTypes = {
-    intl: PropTypes.object.isRequired,
     columns: ImmutablePropTypes.list.isRequired,
     isModalOpen: PropTypes.bool.isRequired,
     singleColumn: PropTypes.bool,
@@ -143,17 +130,14 @@ class ColumnsArea extends ImmutablePureComponent {
   }
 
   renderError = (props) => {
-    return <BundleColumnError multiColumn {...props} />;
+    return <BundleColumnError multiColumn errorType='network' {...props} />;
   }
 
   render () {
-    const { columns, children, singleColumn, isModalOpen, intl } = this.props;
+    const { columns, children, singleColumn, isModalOpen } = this.props;
     const { renderComposePanel } = this.state;
-    const { signedIn } = this.context.identity;
 
     if (singleColumn) {
-      const floatingActionButton = (!signedIn || shouldHideFAB(this.context.router.history.location.pathname)) ? null : <Link key='floating-action-button' to='/publish' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
-
       return (
         <div className='columns-area__panels'>
           <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
@@ -162,7 +146,7 @@ class ColumnsArea extends ImmutablePureComponent {
             </div>
           </div>
 
-          <div className={`columns-area__panels__main ${floatingActionButton && 'with-fab'}`}>
+          <div className='columns-area__panels__main'>
             <div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div>
             <div className='columns-area columns-area--mobile'>{children}</div>
           </div>
@@ -172,8 +156,6 @@ class ColumnsArea extends ImmutablePureComponent {
               <NavigationPanel />
             </div>
           </div>
-
-          {floatingActionButton}
         </div>
       );
     }
diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js
index c49f48cc9..a1c281315 100644
--- a/app/javascript/mastodon/features/ui/components/header.js
+++ b/app/javascript/mastodon/features/ui/components/header.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Logo from 'mastodon/components/logo';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen, me } from 'mastodon/initial_state';
 import Avatar from 'mastodon/components/avatar';
@@ -16,25 +16,36 @@ const Account = connect(state => ({
   </Permalink>
 ));
 
-export default class Header extends React.PureComponent {
+export default @withRouter
+class Header extends React.PureComponent {
 
   static contextTypes = {
     identity: PropTypes.object,
   };
 
+  static propTypes = {
+    location: PropTypes.object,
+  };
+
   render () {
     const { signedIn } = this.context.identity;
+    const { location } = this.props;
 
     let content;
 
     if (signedIn) {
-      content = <Account />;
+      content = (
+        <>
+          {location.pathname !== '/publish' && <Link to='/publish' className='button'><FormattedMessage id='compose_form.publish' defaultMessage='Publish' /></Link>}
+          <Account />
+        </>
+      );
     } else {
       content = (
-        <React.Fragment>
+        <>
           <a href='/auth/sign_in' className='button'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a>
           <a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a>
-        </React.Fragment>
+        </>
       );
     }
 
diff --git a/app/javascript/mastodon/features/ui/components/navigation_panel.js b/app/javascript/mastodon/features/ui/components/navigation_panel.js
index 757ef54ae..10678f7d8 100644
--- a/app/javascript/mastodon/features/ui/components/navigation_panel.js
+++ b/app/javascript/mastodon/features/ui/components/navigation_panel.js
@@ -84,7 +84,6 @@ class NavigationPanel extends React.Component {
             <hr />
 
             <ColumnLink transparent href='/settings/preferences' icon='cog' text={intl.formatMessage(messages.preferences)} />
-            <ColumnLink transparent href='/relationships' icon='users' text={intl.formatMessage(messages.followsAndFollowers)} />
           </React.Fragment>
         )}
 
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 7cda5e106..298f2111d 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -145,7 +145,7 @@ class SwitchingColumnsArea extends React.PureComponent {
 
   setRef = c => {
     if (c) {
-      this.node = c.getWrappedInstance();
+      this.node = c;
     }
   }
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index afe9f9da9..cca29161a 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2565,30 +2565,6 @@ $ui-header-height: 55px;
   }
 }
 
-.floating-action-button {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 3.9375rem;
-  height: 3.9375rem;
-  bottom: 1.3125rem;
-  right: 1.3125rem;
-  background: darken($ui-highlight-color, 2%);
-  color: $white;
-  border-radius: 50%;
-  font-size: 21px;
-  line-height: 21px;
-  text-decoration: none;
-  box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: $ui-highlight-color;
-  }
-}
-
 @media screen and (min-width: $no-gap-breakpoint) {
   .tabs-bar {
     width: 100%;
@@ -2603,7 +2579,6 @@ $ui-header-height: 55px;
     margin-bottom: 10px;
   }
 
-  .floating-action-button,
   .tabs-bar__link.optional {
     display: none;
   }
@@ -2620,10 +2595,6 @@ $ui-header-height: 55px;
 @media screen and (max-width: $no-gap-breakpoint - 1px) {
   $sidebar-width: 285px;
 
-  .with-fab .scrollable .item-list:last-child {
-    padding-bottom: 5.25rem;
-  }
-
   .columns-area__panels__main {
     width: calc(100% - $sidebar-width);
   }
@@ -4350,6 +4321,7 @@ a.status-card.compact:hover {
   cursor: default;
 
   &__image {
+    width: 70%;
     max-width: 350px;
     margin-top: -50px;
   }
@@ -7270,6 +7242,7 @@ noscript {
     &__buttons {
       display: flex;
       align-items: center;
+      gap: 8px;
       padding-top: 55px;
       overflow: hidden;
 
@@ -7279,14 +7252,6 @@ noscript {
         box-sizing: content-box;
         padding: 2px;
       }
-
-      & > .icon-button {
-        margin-right: 8px;
-      }
-
-      .button {
-        margin: 0 8px;
-      }
     }
 
     &__name {
diff --git a/app/serializers/manifest_serializer.rb b/app/serializers/manifest_serializer.rb
index fb7ab563c..5604325be 100644
--- a/app/serializers/manifest_serializer.rb
+++ b/app/serializers/manifest_serializer.rb
@@ -40,7 +40,7 @@ class ManifestSerializer < ActiveModel::Serializer
   end
 
   def theme_color
-    '#6364FF'
+    '#191b22'
   end
 
   def background_color
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 3e50de3fb..52cdce7c6 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -21,7 +21,7 @@
 
     %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/
     %link{ rel: 'manifest', href: manifest_path(format: :json) }/
-    %meta{ name: 'theme-color', content: '#6364FF' }/
+    %meta{ name: 'theme-color', content: '#191b22' }/
     %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/
     %meta{ name: 'apple-itunes-app', content: 'app-id=1571998974' }/
 
-- 
cgit 


From 3ad0a2ae3dcd36e4a9e0be5f72273f9c30df7548 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 23 Oct 2022 23:38:20 +0200
Subject: Fix language dropdown causing zoom on mobile devices in web UI
 (#19428)

---
 app/javascript/styles/mastodon/components.scss   | 4 ----
 app/javascript/styles/mastodon/emoji_picker.scss | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index cca29161a..f6b34b5f3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4810,10 +4810,6 @@ a.status-card.compact:hover {
   &:focus {
     background: lighten($ui-base-color, 4%);
   }
-
-  @media screen and (max-width: 600px) {
-    font-size: 16px;
-  }
 }
 
 .search__icon {
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index 24061d2ca..e4ec96d89 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -111,7 +111,7 @@
   position: relative;
 
   input {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     padding: 7px 9px;
     padding-right: 25px;
-- 
cgit 


From fcca781aae609067bc9e43ad4a466ef6d2074bbb Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 25 Oct 2022 18:47:21 +0200
Subject: Change design of translations in web UI (#19453)

---
 .../mastodon/components/status_content.js          | 89 +++++++++++++++-------
 app/javascript/styles/mastodon/components.scss     | 12 ++-
 2 files changed, 67 insertions(+), 34 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index ff539268c..5e66c6fb3 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -10,6 +10,43 @@ import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 
+class TranslateButton extends React.PureComponent {
+
+  static propTypes = {
+    translation: ImmutablePropTypes.map,
+    onClick: PropTypes.func,
+  };
+
+  render () {
+    const { translation, onClick } = this.props;
+
+    if (translation) {
+      const language     = preloadedLanguages.find(lang => lang[0] === translation.get('detected_source_language'));
+      const languageName = language ? language[2] : translation.get('detected_source_language');
+      const provider     = translation.get('provider');
+
+      return (
+        <div className='translate-button'>
+          <div className='translate-button__meta'>
+            <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
+          </div>
+
+          <button className='link-button' onClick={onClick}>
+            <FormattedMessage id='status.show_original' defaultMessage='Show original' />
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <button className='status__content__read-more-button' onClick={onClick}>
+        <FormattedMessage id='status.translate' defaultMessage='Translate' />
+      </button>
+    );
+  }
+
+}
+
 export default @injectIntl
 class StatusContent extends React.PureComponent {
 
@@ -179,8 +216,6 @@ class StatusContent extends React.PureComponent {
     const renderReadMore = this.props.onClick && status.get('collapsed');
     const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
     const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language');
-    const language = preloadedLanguages.find(lang => lang[0] === status.get('language'));
-    const languageName = language ? language[2] : status.get('language');
 
     const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
     const spoilerContent = { __html: status.get('spoilerHtml') };
@@ -191,22 +226,24 @@ class StatusContent extends React.PureComponent {
       'status__content--collapsed': renderReadMore,
     });
 
-    const showThreadButton = (
+    const showThreadButton = renderViewThread && (
       <button className='status__content__read-more-button' onClick={this.props.onClick}>
         <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
       </button>
     );
 
-    const readMoreButton = (
+    const readMoreButton = renderReadMore && (
       <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
       </button>
     );
 
-    const translateButton = (
-      <button className='status__content__read-more-button' onClick={this.handleTranslate}>
-        {status.get('translation') ? <span><FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider: status.getIn(['translation', 'provider']) }} /> · <FormattedMessage id='status.show_original' defaultMessage='Show original' /></span> : <FormattedMessage id='status.translate' defaultMessage='Translate' />}
-      </button>
+    const translateButton = renderTranslate && (
+      <TranslateButton onClick={this.handleTranslate} translation={status.get('translation')} />
+    );
+
+    const poll = !!status.get('poll') && (
+      <PollContainer pollId={status.get('poll')} />
     );
 
     if (status.get('spoiler_text').length > 0) {
@@ -236,35 +273,33 @@ class StatusContent extends React.PureComponent {
 
           <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''} translate`} lang={lang} dangerouslySetInnerHTML={content} />
 
-          {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
-          {!hidden && renderTranslate && translateButton}
-          {renderViewThread && showThreadButton}
+          {!hidden && poll}
+          {!hidden && translateButton}
+          {showThreadButton}
         </div>
       );
     } else if (this.props.onClick) {
-      const output = [
-        <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
-
-          {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
-          {renderTranslate && translateButton}
-          {renderViewThread && showThreadButton}
-        </div>,
-      ];
+      return (
+        <>
+          <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+            <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
 
-      if (renderReadMore) {
-        output.push(readMoreButton);
-      }
+            {poll}
+            {translateButton}
+            {showThreadButton}
+          </div>
 
-      return output;
+          {readMoreButton}
+        </>
+      );
     } else {
       return (
         <div className={classNames} ref={this.setRef} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
 
-          {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
-          {renderTranslate && translateButton}
-          {renderViewThread && showThreadButton}
+          {poll}
+          {translateButton}
+          {showThreadButton}
         </div>
       );
     }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f6b34b5f3..15351d850 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -24,7 +24,7 @@
   display: block;
   font-size: 15px;
   line-height: 20px;
-  color: $ui-highlight-color;
+  color: $highlight-text-color;
   border: 0;
   background: transparent;
   padding: 0;
@@ -969,15 +969,13 @@
   }
 }
 
-.status__content__edited-label {
-  display: block;
-  cursor: default;
+.translate-button {
+  margin-top: 16px;
   font-size: 15px;
   line-height: 20px;
-  padding: 0;
-  padding-top: 8px;
+  display: flex;
+  justify-content: space-between;
   color: $dark-text-color;
-  font-weight: 500;
 }
 
 .status__content__spoiler-link {
-- 
cgit 


From 0ca29eaa3f762219cacce46059acfa71393533ad Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 25 Oct 2022 19:02:21 +0200
Subject: Change layout of posts in web UI (#19423)

---
 app/javascript/mastodon/components/account.js      |   2 +-
 app/javascript/mastodon/components/status.js       |  14 +-
 .../mastodon/components/status_action_bar.js       |  16 +-
 .../mastodon/components/status_content.js          |  11 -
 .../features/account/components/featured_tags.js   |   2 +-
 .../mastodon/features/account/components/header.js |  31 +-
 .../features/compose/components/action_bar.js      |   2 +-
 .../features/compose/components/navigation_bar.js  |   2 +-
 .../features/status/components/action_bar.js       |   3 +-
 .../features/status/components/detailed_status.js  |   2 +-
 .../features/ui/components/actions_modal.js        |  28 --
 .../mastodon/features/ui/components/boost_modal.js |  11 +-
 app/javascript/styles/mastodon/components.scss     | 424 +++++++--------------
 13 files changed, 193 insertions(+), 355 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js
index 36429e647..92d14da8b 100644
--- a/app/javascript/mastodon/components/account.js
+++ b/app/javascript/mastodon/components/account.js
@@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent {
       <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={`/@${account.get('acct')}`}>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <div className='account__avatar-wrapper'><Avatar account={account} size={46} /></div>
             {mute_expires_at}
             <DisplayName account={account} />
           </Permalink>
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 381088be7..3106a3ecd 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent {
 
       account = status.get('account');
       status  = status.get('reblog');
+    } else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
+      const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
+
+      prepend = (
+        <div className='status__prepend'>
+          <div className='status__prepend-icon-wrapper'><Icon id='reply' className='status__prepend-icon' fixedWidth /></div>
+          <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
+        </div>
+      );
     }
 
     if (pictureInPicture.get('inUse')) {
@@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={48} />;
+      statusAvatar = <Avatar account={status.get('account')} size={46} />;
     } else {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
@@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent {
           {prepend}
 
           <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
-            <div className='status__expand' onClick={this.handleClick} role='presentation' />
-
             <div className='status__info'>
               <a onClick={this.handleClick} href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
                 <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
@@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent {
               status={status}
               onClick={this.handleClick}
               expanded={!status.get('hidden')}
-              showThread={showThread}
               onExpandedToggle={this.handleExpandedToggle}
               onTranslate={this.handleTranslate}
               collapsable
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 9e8cadce2..17150524e 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent {
 
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
+    const { signedIn } = this.context.identity;
 
-    const anonymousAccess    = !me;
+    const anonymousAccess    = !signedIn;
     const publicStatus       = ['public', 'unlisted'].includes(status.get('visibility'));
     const pinnableStatus     = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
     const mutingConversation = status.get('muted');
@@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     const shareButton = ('share' in navigator) && publicStatus && (
-      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
+      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
     );
 
     const filterButton = this.props.onFilter && (
-      <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
+      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
-        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
-        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
+        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
         {shareButton}
 
         {filterButton}
 
-        <div className='status__action-bar-dropdown'>
+        <div className='status__action-bar__dropdown'>
           <DropdownMenuContainer
             scrollKey={scrollKey}
             disabled={anonymousAccess}
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index 5e66c6fb3..3e3ba7d0f 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -58,7 +58,6 @@ class StatusContent extends React.PureComponent {
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
     expanded: PropTypes.bool,
-    showThread: PropTypes.bool,
     onExpandedToggle: PropTypes.func,
     onTranslate: PropTypes.func,
     onClick: PropTypes.func,
@@ -214,7 +213,6 @@ class StatusContent extends React.PureComponent {
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
     const renderReadMore = this.props.onClick && status.get('collapsed');
-    const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
     const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language');
 
     const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
@@ -226,12 +224,6 @@ class StatusContent extends React.PureComponent {
       'status__content--collapsed': renderReadMore,
     });
 
-    const showThreadButton = renderViewThread && (
-      <button className='status__content__read-more-button' onClick={this.props.onClick}>
-        <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
-      </button>
-    );
-
     const readMoreButton = renderReadMore && (
       <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
@@ -275,7 +267,6 @@ class StatusContent extends React.PureComponent {
 
           {!hidden && poll}
           {!hidden && translateButton}
-          {showThreadButton}
         </div>
       );
     } else if (this.props.onClick) {
@@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent {
 
             {poll}
             {translateButton}
-            {showThreadButton}
           </div>
 
           {readMoreButton}
@@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent {
 
           {poll}
           {translateButton}
-          {showThreadButton}
         </div>
       );
     }
diff --git a/app/javascript/mastodon/features/account/components/featured_tags.js b/app/javascript/mastodon/features/account/components/featured_tags.js
index 51be9a609..8194c063a 100644
--- a/app/javascript/mastodon/features/account/components/featured_tags.js
+++ b/app/javascript/mastodon/features/account/components/featured_tags.js
@@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent {
             name={featuredTag.get('name')}
             href={featuredTag.get('url')}
             to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
-            uses={featuredTag.get('statuses_count')}
+            uses={featuredTag.get('statuses_count') * 1}
             withGraph={false}
             description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
           />
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index 954cb0ee7..e39f0158e 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -326,25 +326,26 @@ class Header extends ImmutablePureComponent {
           {!(suspended || hidden) && (
             <div className='account__header__extra'>
               <div className='account__header__bio'>
-                {fields.size > 0 && (
-                  <div className='account__header__fields'>
-                    {fields.map((pair, i) => (
-                      <dl key={i}>
-                        <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
-
-                        <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
-                          {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
-                        </dd>
-                      </dl>
-                    ))}
-                  </div>
-                )}
-
                 {(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />}
 
                 {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
 
-                <div className='account__header__joined'><FormattedMessage id='account.joined' defaultMessage='Joined {date}' values={{ date: intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' }) }} /></div>
+                <div className='account__header__fields'>
+                  <dl>
+                    <dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>
+                    <dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd>
+                  </dl>
+
+                  {fields.map((pair, i) => (
+                    <dl key={i}>
+                      <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
+
+                      <dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
+                        {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
+                      </dd>
+                    </dl>
+                  ))}
+                </div>
               </div>
 
               <div className='account__header__extra__links'>
diff --git a/app/javascript/mastodon/features/compose/components/action_bar.js b/app/javascript/mastodon/features/compose/components/action_bar.js
index 4ff0b7b94..ceed928bf 100644
--- a/app/javascript/mastodon/features/compose/components/action_bar.js
+++ b/app/javascript/mastodon/features/compose/components/action_bar.js
@@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent {
     return (
       <div className='compose__action-bar'>
         <div className='compose__action-bar-dropdown'>
-          <DropdownMenuContainer items={menu} icon='chevron-down' size={16} direction='right' />
+          <DropdownMenuContainer items={menu} icon='ellipsis-v' size={18} direction='right' />
         </div>
       </div>
     );
diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js
index e6ba7d8b7..372765ca4 100644
--- a/app/javascript/mastodon/features/compose/components/navigation_bar.js
+++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js
@@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent {
       <div className='navigation-bar'>
         <Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
           <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
-          <Avatar account={this.props.account} size={48} />
+          <Avatar account={this.props.account} size={46} />
         </Permalink>
 
         <div className='navigation-bar__profile'>
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index 2e240c414..a0a6a7894 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -287,9 +287,10 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
+        {shareButton}
+
         <div className='detailed-status__action-bar-dropdown'>
           <DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 320a847f7..1a2aab819 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent {
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}>
           <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
-            <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
+            <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />
           </a>
 
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js
index 875b2b75d..67be69d43 100644
--- a/app/javascript/mastodon/features/ui/components/actions_modal.js
+++ b/app/javascript/mastodon/features/ui/components/actions_modal.js
@@ -2,10 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusContent from '../../../components/status_content';
-import Avatar from '../../../components/avatar';
-import RelativeTimestamp from '../../../components/relative_timestamp';
-import DisplayName from '../../../components/display_name';
 import IconButton from '../../../components/icon_button';
 import classNames from 'classnames';
 
@@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent {
   }
 
   render () {
-    const status = this.props.status && (
-      <div className='status light'>
-        <div className='boost-modal__status-header'>
-          <div className='boost-modal__status-time'>
-            <a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-              <RelativeTimestamp timestamp={this.props.status.get('created_at')} />
-            </a>
-          </div>
-
-          <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
-            <div className='status__avatar'>
-              <Avatar account={this.props.status.get('account')} size={48} />
-            </div>
-
-            <DisplayName account={this.props.status.get('account')} />
-          </a>
-        </div>
-
-        <StatusContent status={this.props.status} />
-      </div>
-    );
-
     return (
       <div className='modal-root__modal actions-modal'>
-        {status}
-
         <ul className={classNames({ 'with-status': !!status })}>
           {this.props.actions.map(this.renderAction)}
         </ul>
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js
index ab87ee427..d7a6d711e 100644
--- a/app/javascript/mastodon/features/ui/components/boost_modal.js
+++ b/app/javascript/mastodon/features/ui/components/boost_modal.js
@@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent {
       <div className='modal-root__modal boost-modal'>
         <div className='boost-modal__container'>
           <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
-            <div className='boost-modal__status-header'>
-              <div className='boost-modal__status-time'>
-                <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-                  <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
-                  <RelativeTimestamp timestamp={status.get('created_at')} /></a>
-              </div>
+            <div className='status__info'>
+              <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+                <span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
+                <RelativeTimestamp timestamp={status.get('created_at')} />
+              </a>
 
               <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
                 <div className='status__avatar'>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 15351d850..633b9ed70 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -367,7 +367,7 @@
 }
 
 .compose-form {
-  padding: 10px;
+  padding: 15px;
 
   &__sensitive-button {
     padding: 10px;
@@ -714,7 +714,7 @@
 
     .compose-form__publish-button-wrapper {
       overflow: hidden;
-      padding-top: 10px;
+      padding-top: 15px;
     }
   }
 }
@@ -808,7 +808,7 @@
 .reply-indicator__content {
   position: relative;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 22px;
   word-wrap: break-word;
   font-weight: 400;
   overflow: hidden;
@@ -955,12 +955,12 @@
 .status__content__read-more-button {
   display: block;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 22px;
   color: $highlight-text-color;
   border: 0;
   background: transparent;
   padding: 0;
-  padding-top: 8px;
+  padding-top: 16px;
   text-decoration: none;
 
   &:hover,
@@ -972,7 +972,7 @@
 .translate-button {
   margin-top: 16px;
   font-size: 15px;
-  line-height: 20px;
+  line-height: 22px;
   display: flex;
   justify-content: space-between;
   color: $dark-text-color;
@@ -1022,11 +1022,6 @@
   }
 }
 
-.status__prepend-icon-wrapper {
-  left: -26px;
-  position: absolute;
-}
-
 .focusable {
   &:focus {
     outline: 0;
@@ -1040,19 +1035,11 @@
 }
 
 .status {
-  padding: 8px 10px;
-  padding-left: 68px;
-  position: relative;
+  padding: 16px;
   min-height: 54px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
 
-  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
-    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
-    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-right: 26px; // 10px + 16px
-  }
-
   @keyframes fade {
     0% { opacity: 0; }
     100% { opacity: 1; }
@@ -1061,9 +1048,11 @@
   opacity: 1;
   animation: fade 150ms linear;
 
+  .media-gallery,
   .video-player,
-  .audio-player {
-    margin-top: 8px;
+  .audio-player,
+  .attachment-list {
+    margin-top: 16px;
   }
 
   &.light {
@@ -1091,7 +1080,7 @@
         color: $highlight-text-color;
       }
 
-      a.status__content__spoiler-link {
+      &__spoiler-link {
         color: $primary-text-color;
         background: $ui-primary-color;
 
@@ -1104,7 +1093,16 @@
   }
 }
 
-.status__relative-time,
+.status__relative-time {
+  display: block;
+  font-size: 15px;
+  line-height: 22px;
+  height: 40px;
+  order: 2;
+  flex: 0 0 auto;
+  color: $dark-text-color;
+}
+
 .notification__relative_time {
   color: $dark-text-color;
   float: right;
@@ -1121,13 +1119,36 @@
 }
 
 .status__info .status__display-name {
-  display: block;
   max-width: 100%;
-  padding-right: 25px;
+  display: flex;
+  font-size: 15px;
+  line-height: 22px;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+
+  .display-name {
+    bdi {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__account {
+      white-space: nowrap;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
 
 .status__info {
   font-size: 15px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .status-check-box__status {
@@ -1166,12 +1187,14 @@
 }
 
 .status__prepend {
-  margin-left: 68px;
+  padding: 16px;
+  padding-bottom: 0;
+  display: flex;
+  gap: 10px;
+  font-size: 15px;
+  line-height: 22px;
+  font-weight: 500;
   color: $dark-text-color;
-  padding: 8px 0;
-  padding-bottom: 2px;
-  font-size: 14px;
-  position: relative;
 
   .status__display-name strong {
     color: $dark-text-color;
@@ -1185,22 +1208,11 @@
 }
 
 .status__action-bar {
-  align-items: center;
   display: flex;
-  margin-top: 8px;
-}
-
-.status__action-bar-button {
-  margin-right: 18px;
-
-  &.icon-button--with-counter {
-    margin-right: 14px;
-  }
-}
-
-.status__action-bar-dropdown {
-  height: 23.15px;
-  width: 23.15px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
+  margin-top: 16px;
 }
 
 .detailed-status__action-bar-dropdown {
@@ -1213,7 +1225,7 @@
 
 .detailed-status {
   background: lighten($ui-base-color, 4%);
-  padding: 14px 10px;
+  padding: 16px;
 
   &--flex {
     display: flex;
@@ -1243,14 +1255,15 @@
     }
   }
 
+  .media-gallery,
   .video-player,
   .audio-player {
-    margin-top: 8px;
+    margin-top: 16px;
   }
 }
 
 .detailed-status__meta {
-  margin-top: 15px;
+  margin-top: 16px;
   color: $dark-text-color;
   font-size: 14px;
   line-height: 18px;
@@ -1312,7 +1325,7 @@
 }
 
 .account {
-  padding: 10px;
+  padding: 16px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 
   &.compact {
@@ -1326,7 +1339,9 @@
 
   .account__display-name {
     flex: 1 1 auto;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 10px;
     color: $darker-text-color;
     overflow: hidden;
     text-decoration: none;
@@ -1359,12 +1374,7 @@
 
 .account__wrapper {
   display: flex;
-}
-
-.account__avatar-wrapper {
-  float: left;
-  margin-left: 12px;
-  margin-right: 12px;
+  gap: 10px;
 }
 
 .account__avatar {
@@ -1372,9 +1382,6 @@
 
   display: block;
   position: relative;
-  width: 36px;
-  height: 36px;
-  background-size: 36px 36px;
 
   &-inline {
     display: inline-block;
@@ -1414,7 +1421,7 @@ a .account__avatar {
 }
 
 .account__avatar-overlay {
-  @include avatar-size(48px);
+  @include avatar-size(46px);
 
   position: relative;
 
@@ -1615,10 +1622,13 @@ a.account__display-name {
 }
 
 .detailed-status__display-name {
-  color: $secondary-text-color;
-  display: block;
-  line-height: 24px;
-  margin-bottom: 15px;
+  color: $darker-text-color;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 15px;
+  line-height: 22px;
+  margin-bottom: 16px;
   overflow: hidden;
 
   strong,
@@ -1629,31 +1639,13 @@ a.account__display-name {
   }
 
   strong {
-    font-size: 16px;
     color: $primary-text-color;
   }
 }
 
-.detailed-status__display-avatar {
-  float: left;
-  margin-right: 10px;
-}
-
 .status__avatar {
-  height: 48px;
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  width: 48px;
-}
-
-.status__expand {
-  width: 68px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  cursor: pointer;
+  width: 46px;
+  height: 46px;
 }
 
 .muted {
@@ -1684,40 +1676,52 @@ a.account__display-name {
 }
 
 .notification__report {
-  padding: 8px 10px;
-  padding-left: 68px;
-  position: relative;
+  padding: 16px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
-  min-height: 54px;
+  display: flex;
+  gap: 10px;
+
+  &__avatar {
+    flex: 0 0 auto;
+  }
 
   &__details {
+    flex: 1 1 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: $darker-text-color;
+    gap: 10px;
     font-size: 15px;
     line-height: 22px;
+    white-space: nowrap;
+    overflow: hidden;
+
+    & > div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     strong {
       font-weight: 500;
     }
   }
 
-  &__avatar {
-    position: absolute;
-    left: 10px;
-    top: 10px;
+  &__actions {
+    flex: 0 0 auto;
   }
 }
 
 .notification__message {
-  margin: 0 10px 0 68px;
-  padding: 8px 0 0;
+  padding: 16px;
+  padding-bottom: 0;
   cursor: default;
   color: $darker-text-color;
   font-size: 15px;
   line-height: 22px;
-  position: relative;
+  font-weight: 500;
+  display: flex;
+  gap: 10px;
 
   .fa {
     color: $highlight-text-color;
@@ -1731,9 +1735,6 @@ a.account__display-name {
 }
 
 .notification__favourite-icon-wrapper {
-  left: -26px;
-  position: absolute;
-
   .star-icon {
     color: $gold-star;
   }
@@ -1767,15 +1768,10 @@ a.account__display-name {
   text-decoration: none;
 
   &:hover {
-    color: $primary-text-color;
     text-decoration: underline;
   }
 }
 
-.notification__relative_time {
-  float: right;
-}
-
 .display-name {
   display: block;
   max-width: 100%;
@@ -1788,10 +1784,6 @@ a.account__display-name {
   font-weight: 500;
 }
 
-.display-name__account {
-  font-size: 14px;
-}
-
 .status__relative-time,
 .detailed-status__datetime {
   &:hover {
@@ -1860,11 +1852,12 @@ a.account__display-name {
 }
 
 .navigation-bar {
-  padding: 10px;
+  padding: 15px;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   cursor: default;
+  gap: 10px;
   color: $darker-text-color;
 
   strong {
@@ -1899,9 +1892,7 @@ a.account__display-name {
 
 .navigation-bar__profile {
   flex: 1 1 auto;
-  margin-left: 8px;
   line-height: 20px;
-  margin-top: -1px;
   overflow: hidden;
 }
 
@@ -2466,101 +2457,6 @@ $ui-header-height: 55px;
     padding: 10px 0;
     padding-top: 0;
   }
-
-  .detailed-status {
-    padding: 15px;
-
-    .media-gallery,
-    .video-player,
-    .audio-player {
-      margin-top: 15px;
-    }
-  }
-
-  .account__header__bar {
-    padding: 5px 10px;
-  }
-
-  .navigation-bar,
-  .compose-form {
-    padding: 15px;
-  }
-
-  .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-    padding-top: 15px;
-  }
-
-  .notification__report {
-    padding: 15px 15px 15px (48px + 15px * 2);
-    min-height: 48px + 2px;
-
-    &__avatar {
-      left: 15px;
-      top: 17px;
-    }
-  }
-
-  .status {
-    padding: 15px 15px 15px (48px + 15px * 2);
-    min-height: 48px + 2px;
-
-    &__avatar {
-      left: 15px;
-      top: 17px;
-    }
-
-    &__content {
-      padding-top: 5px;
-    }
-
-    &__prepend {
-      margin-left: 48px + 15px * 2;
-      padding-top: 15px;
-    }
-
-    &__prepend-icon-wrapper {
-      left: -32px;
-    }
-
-    .media-gallery,
-    &__action-bar,
-    .video-player,
-    .audio-player {
-      margin-top: 10px;
-    }
-  }
-
-  .account {
-    padding: 15px 10px;
-
-    &__header__bio {
-      margin: 0 -10px;
-    }
-  }
-
-  .notification {
-    &__message {
-      margin-left: 48px + 15px * 2;
-      padding-top: 15px;
-    }
-
-    &__favourite-icon-wrapper {
-      left: -32px;
-    }
-
-    .status {
-      padding-top: 8px;
-    }
-
-    .account {
-      padding-top: 8px;
-    }
-
-    .account__avatar-wrapper {
-      margin-left: 17px;
-      margin-right: 15px;
-    }
-  }
 }
 
 @media screen and (min-width: $no-gap-breakpoint) {
@@ -2805,10 +2701,7 @@ $ui-header-height: 55px;
   }
 
   .navigation-bar {
-    padding-top: 20px;
-    padding-bottom: 20px;
     flex: 0 1 48px;
-    min-height: 20px;
   }
 
   .compose-form {
@@ -5303,24 +5196,6 @@ a.status-card.compact:hover {
   width: 480px;
   position: relative;
   flex-direction: column;
-
-  .status__display-name {
-    display: block;
-    max-width: 100%;
-    padding-right: 25px;
-  }
-
-  .status__avatar {
-    height: 28px;
-    left: 10px;
-    position: absolute;
-    top: 10px;
-    width: 48px;
-  }
-
-  .status__content__spoiler-link {
-    color: lighten($secondary-text-color, 8%);
-  }
 }
 
 .actions-modal {
@@ -5352,9 +5227,9 @@ a.status-card.compact:hover {
 .block-modal__action-bar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   background: $ui-secondary-color;
-  padding: 10px;
-  line-height: 36px;
+  padding: 15px;
 
   & > div {
     flex: 1 1 auto;
@@ -5368,15 +5243,6 @@ a.status-card.compact:hover {
   }
 }
 
-.boost-modal__status-header {
-  font-size: 15px;
-}
-
-.boost-modal__status-time {
-  float: right;
-  font-size: 14px;
-}
-
 .mute-modal,
 .block-modal {
   line-height: 24px;
@@ -5988,7 +5854,7 @@ a.status-card.compact:hover {
   font-size: 14px;
   border: 1px solid lighten($ui-base-color, 8%);
   border-radius: 4px;
-  margin-top: 14px;
+  margin-top: 16px;
   overflow: hidden;
 
   &__icon {
@@ -6034,7 +5900,6 @@ a.status-card.compact:hover {
 
   &.compact {
     border: 0;
-    margin-top: 4px;
 
     .attachment-list__list {
       padding: 0;
@@ -7177,6 +7042,7 @@ noscript {
 
 .account__header {
   overflow: hidden;
+  background: lighten($ui-base-color, 4%);
 
   &.inactive {
     opacity: 0.5;
@@ -7210,8 +7076,7 @@ noscript {
 
   &__bar {
     position: relative;
-    background: lighten($ui-base-color, 4%);
-    padding: 5px;
+    padding: 0 20px;
     border-bottom: 1px solid lighten($ui-base-color, 12%);
 
     .avatar {
@@ -7230,8 +7095,8 @@ noscript {
   &__tabs {
     display: flex;
     align-items: flex-start;
-    padding: 7px 10px;
     margin-top: -55px;
+    padding-top: 10px;
 
     &__buttons {
       display: flex;
@@ -7249,7 +7114,8 @@ noscript {
     }
 
     &__name {
-      padding: 5px 10px;
+      margin-top: 16px;
+      margin-bottom: 16px;
 
       .account-role {
         vertical-align: top;
@@ -7261,17 +7127,17 @@ noscript {
       }
 
       h1 {
-        font-size: 16px;
-        line-height: 24px;
+        font-size: 17px;
+        line-height: 22px;
         color: $primary-text-color;
-        font-weight: 500;
+        font-weight: 700;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
 
         small {
           display: block;
-          font-size: 14px;
+          font-size: 15px;
           color: $darker-text-color;
           font-weight: 400;
           overflow: hidden;
@@ -7286,34 +7152,41 @@ noscript {
   }
 
   &__bio {
-    overflow: hidden;
-    margin: 0 -5px;
-
     .account__header__content {
-      padding: 20px 15px;
-      padding-bottom: 5px;
       color: $primary-text-color;
+    }
 
-      .columns-area--mobile & {
-        padding-left: 20px;
-        padding-right: 20px;
+    .account__header__fields {
+      margin: 0;
+      margin-top: 16px;
+      border-radius: 4px;
+      background: darken($ui-base-color, 4%);
+      border: 0;
+
+      dl {
+        display: block;
+        padding: 11px 16px;
+        border-bottom-color: lighten($ui-base-color, 4%);
       }
-    }
 
-    .account__header__joined {
-      font-size: 14px;
-      padding: 5px 15px;
-      color: $darker-text-color;
+      dd,
+      dt {
+        font-size: 13px;
+        line-height: 18px;
+        padding: 0;
+        text-align: initial;
+      }
 
-      .columns-area--mobile & {
-        padding-left: 20px;
-        padding-right: 20px;
+      dt {
+        width: auto;
+        background: transparent;
+        text-transform: uppercase;
+        color: $dark-text-color;
       }
-    }
 
-    .account__header__fields {
-      margin: 0;
-      border-top: 1px solid lighten($ui-base-color, 12%);
+      dd {
+        color: $darker-text-color;
+      }
 
       a {
         color: lighten($ui-highlight-color, 8%);
@@ -7330,12 +7203,14 @@ noscript {
   }
 
   &__extra {
-    margin-top: 4px;
+    margin-top: 16px;
 
     &__links {
       font-size: 14px;
       color: $darker-text-color;
-      padding: 10px 0;
+      margin: 0 -10px;
+      padding-top: 16px;
+      padding-bottom: 10px;
 
       a {
         display: inline-block;
@@ -7353,17 +7228,10 @@ noscript {
   }
 
   &__account-note {
-    padding: 15px;
-    padding-bottom: 10px;
     color: $primary-text-color;
     font-size: 14px;
     font-weight: 400;
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
-
-    .columns-area--mobile & {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
+    margin-bottom: 10px;
 
     label {
       display: block;
-- 
cgit 


From 6f01111863bfb15b3574c95c8d60d59ae1d79772 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 25 Oct 2022 21:43:33 +0200
Subject: Fix wrong size of avatars in admin UI (#19457)

---
 app/helpers/home_helper.rb                  | 2 +-
 app/javascript/styles/mastodon/widgets.scss | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb
index 4da68500a..f41104709 100644
--- a/app/helpers/home_helper.rb
+++ b/app/helpers/home_helper.rb
@@ -23,7 +23,7 @@ module HomeHelper
                   else
                     link_to(path || ActivityPub::TagManager.instance.url_for(account), class: 'account__display-name') do
                       content_tag(:div, class: 'account__avatar-wrapper') do
-                        image_tag(full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), class: 'account__avatar')
+                        image_tag(full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), class: 'account__avatar', width: 46, height: 46)
                       end +
                         content_tag(:span, class: 'display-name') do
                           content_tag(:bdi) do
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 260a97c6d..0e39dc87b 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -359,8 +359,9 @@
     vertical-align: initial !important;
   }
 
-  &__interrelationships {
+  tbody td.accounts-table__interrelationships {
     width: 21px;
+    padding-right: 16px;
   }
 
   .fa {
-- 
cgit 


From f8ca3bb2a1dd648f41e8fea5b5eb87b53bc8d521 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 26 Oct 2022 13:42:29 +0200
Subject: Add ability to view previous edits of a status in admin UI (#19462)

* Add ability to view previous edits of a status in admin UI

* Change moderator access to posts to be controlled by a separate policy
---
 app/controllers/admin/statuses_controller.rb       | 16 +++++-
 .../admin/trends/statuses_controller.rb            |  4 +-
 .../mastodon/components/status_action_bar.js       |  2 +-
 .../features/status/components/action_bar.js       |  2 +-
 app/javascript/styles/mastodon/admin.scss          | 64 ++++++++++++++++++++++
 app/models/admin/status_filter.rb                  |  5 +-
 app/models/status_edit.rb                          | 13 ++++-
 app/policies/admin/status_policy.rb                | 29 ++++++++++
 app/policies/status_policy.rb                      | 12 +---
 .../admin/reports/_media_attachments.html.haml     |  8 +++
 app/views/admin/reports/_status.html.haml          | 11 +---
 .../admin/status_edits/_status_edit.html.haml      | 20 +++++++
 app/views/admin/statuses/show.html.haml            | 64 ++++++++++++++++++++++
 config/locales/en.yml                              | 13 +++++
 config/routes.rb                                   |  2 +-
 spec/policies/status_policy_spec.rb                | 22 --------
 16 files changed, 232 insertions(+), 55 deletions(-)
 create mode 100644 app/policies/admin/status_policy.rb
 create mode 100644 app/views/admin/reports/_media_attachments.html.haml
 create mode 100644 app/views/admin/status_edits/_status_edit.html.haml
 create mode 100644 app/views/admin/statuses/show.html.haml

(limited to 'app/javascript/styles')

diff --git a/app/controllers/admin/statuses_controller.rb b/app/controllers/admin/statuses_controller.rb
index 084921ceb..b80cd20f5 100644
--- a/app/controllers/admin/statuses_controller.rb
+++ b/app/controllers/admin/statuses_controller.rb
@@ -3,18 +3,23 @@
 module Admin
   class StatusesController < BaseController
     before_action :set_account
-    before_action :set_statuses
+    before_action :set_statuses, except: :show
+    before_action :set_status, only: :show
 
     PER_PAGE = 20
 
     def index
-      authorize :status, :index?
+      authorize [:admin, :status], :index?
 
       @status_batch_action = Admin::StatusBatchAction.new
     end
 
+    def show
+      authorize [:admin, @status], :show?
+    end
+
     def batch
-      authorize :status, :index?
+      authorize [:admin, :status], :index?
 
       @status_batch_action = Admin::StatusBatchAction.new(admin_status_batch_action_params.merge(current_account: current_account, report_id: params[:report_id], type: action_from_button))
       @status_batch_action.save!
@@ -32,6 +37,7 @@ module Admin
 
     def after_create_redirect_path
       report_id = @status_batch_action&.report_id || params[:report_id]
+
       if report_id.present?
         admin_report_path(report_id)
       else
@@ -43,6 +49,10 @@ module Admin
       @account = Account.find(params[:account_id])
     end
 
+    def set_status
+      @status = @account.statuses.find(params[:id])
+    end
+
     def set_statuses
       @statuses = Admin::StatusFilter.new(@account, filter_params).results.preload(:application, :preloadable_poll, :media_attachments, active_mentions: :account, reblog: [:account, :application, :preloadable_poll, :media_attachments, active_mentions: :account]).page(params[:page]).per(PER_PAGE)
     end
diff --git a/app/controllers/admin/trends/statuses_controller.rb b/app/controllers/admin/trends/statuses_controller.rb
index 004f42b0c..3d8b53ea8 100644
--- a/app/controllers/admin/trends/statuses_controller.rb
+++ b/app/controllers/admin/trends/statuses_controller.rb
@@ -2,7 +2,7 @@
 
 class Admin::Trends::StatusesController < Admin::BaseController
   def index
-    authorize :status, :review?
+    authorize [:admin, :status], :review?
 
     @locales  = StatusTrend.pluck('distinct language')
     @statuses = filtered_statuses.page(params[:page])
@@ -10,7 +10,7 @@ class Admin::Trends::StatusesController < Admin::BaseController
   end
 
   def batch
-    authorize :status, :review?
+    authorize [:admin, :status], :review?
 
     @form = Trends::StatusBatch.new(trends_status_batch_params.merge(current_account: current_account, action: action_from_button))
     @form.save
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 17150524e..fe8ece0f9 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -323,7 +323,7 @@ class StatusActionBar extends ImmutablePureComponent {
       if ((this.context.identity.permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) {
         menu.push(null);
         menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
-        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses?id=${status.get('id')}` });
+        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
       }
     }
 
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index a0a6a7894..4bd419ca4 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -254,7 +254,7 @@ class ActionBar extends React.PureComponent {
       if ((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) {
         menu.push(null);
         menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
-        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses?id=${status.get('id')}` });
+        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
       }
     }
 
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index affe1c79c..f86778399 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1752,3 +1752,67 @@ a.sparkline {
     }
   }
 }
+
+.history {
+  counter-reset: step 0;
+  font-size: 15px;
+  line-height: 22px;
+
+  li {
+    counter-increment: step 1;
+    padding-left: 2.5rem;
+    padding-bottom: 8px;
+    position: relative;
+    margin-bottom: 8px;
+
+    &::before {
+      position: absolute;
+      content: counter(step);
+      font-size: 0.625rem;
+      font-weight: 500;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: calc(1.375rem + 1px);
+      height: calc(1.375rem + 1px);
+      background: $ui-base-color;
+      border: 1px solid $highlight-text-color;
+      color: $highlight-text-color;
+      border-radius: 8px;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      width: 1px;
+      background: $highlight-text-color;
+      bottom: 0;
+      top: calc(1.875rem + 1px);
+      left: 0.6875rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  &__entry {
+    h5 {
+      font-weight: 500;
+      color: $primary-text-color;
+      line-height: 25px;
+      margin-bottom: 16px;
+    }
+
+    .status {
+      border: 1px solid lighten($ui-base-color, 4%);
+      background: $ui-base-color;
+      border-radius: 4px;
+    }
+  }
+}
diff --git a/app/models/admin/status_filter.rb b/app/models/admin/status_filter.rb
index 4fba612a6..d7a16f760 100644
--- a/app/models/admin/status_filter.rb
+++ b/app/models/admin/status_filter.rb
@@ -3,7 +3,6 @@
 class Admin::StatusFilter
   KEYS = %i(
     media
-    id
     report_id
   ).freeze
 
@@ -28,12 +27,10 @@ class Admin::StatusFilter
 
   private
 
-  def scope_for(key, value)
+  def scope_for(key, _value)
     case key.to_s
     when 'media'
       Status.joins(:media_attachments).merge(@account.media_attachments.reorder(nil)).group(:id).reorder('statuses.id desc')
-    when 'id'
-      Status.where(id: value)
     else
       raise "Unknown filter: #{key}"
     end
diff --git a/app/models/status_edit.rb b/app/models/status_edit.rb
index e9c8fbe98..e33470226 100644
--- a/app/models/status_edit.rb
+++ b/app/models/status_edit.rb
@@ -30,7 +30,7 @@ class StatusEdit < ApplicationRecord
              :preview_remote_url, :text_url, :meta, :blurhash,
              :not_processed?, :needs_redownload?, :local?,
              :file, :thumbnail, :thumbnail_remote_url,
-             :shortcode, to: :media_attachment
+             :shortcode, :video?, :audio?, to: :media_attachment
   end
 
   rate_limit by: :account, family: :statuses
@@ -40,7 +40,8 @@ class StatusEdit < ApplicationRecord
 
   default_scope { order(id: :asc) }
 
-  delegate :local?, to: :status
+  delegate :local?, :application, :edited?, :edited_at,
+           :discarded?, :visibility, to: :status
 
   def emojis
     return @emojis if defined?(@emojis)
@@ -59,4 +60,12 @@ class StatusEdit < ApplicationRecord
       end
     end
   end
+
+  def proper
+    self
+  end
+
+  def reblog?
+    false
+  end
 end
diff --git a/app/policies/admin/status_policy.rb b/app/policies/admin/status_policy.rb
new file mode 100644
index 000000000..ffaa30f13
--- /dev/null
+++ b/app/policies/admin/status_policy.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Admin::StatusPolicy < ApplicationPolicy
+  def initialize(current_account, record, preloaded_relations = {})
+    super(current_account, record)
+
+    @preloaded_relations = preloaded_relations
+  end
+
+  def index?
+    role.can?(:manage_reports, :manage_users)
+  end
+
+  def show?
+    role.can?(:manage_reports, :manage_users) && (record.public_visibility? || record.unlisted_visibility? || record.reported?)
+  end
+
+  def destroy?
+    role.can?(:manage_reports)
+  end
+
+  def update?
+    role.can?(:manage_reports)
+  end
+
+  def review?
+    role.can?(:manage_taxonomies)
+  end
+end
diff --git a/app/policies/status_policy.rb b/app/policies/status_policy.rb
index 2f48b5d70..f3d0ffdba 100644
--- a/app/policies/status_policy.rb
+++ b/app/policies/status_policy.rb
@@ -7,10 +7,6 @@ class StatusPolicy < ApplicationPolicy
     @preloaded_relations = preloaded_relations
   end
 
-  def index?
-    role.can?(:manage_reports, :manage_users)
-  end
-
   def show?
     return false if author.suspended?
 
@@ -32,17 +28,13 @@ class StatusPolicy < ApplicationPolicy
   end
 
   def destroy?
-    role.can?(:manage_reports) || owned?
+    owned?
   end
 
   alias unreblog? destroy?
 
   def update?
-    role.can?(:manage_reports) || owned?
-  end
-
-  def review?
-    role.can?(:manage_taxonomies)
+    owned?
   end
 
   private
diff --git a/app/views/admin/reports/_media_attachments.html.haml b/app/views/admin/reports/_media_attachments.html.haml
new file mode 100644
index 000000000..d0b7d52c3
--- /dev/null
+++ b/app/views/admin/reports/_media_attachments.html.haml
@@ -0,0 +1,8 @@
+- if status.ordered_media_attachments.first.video?
+  - video = status.ordered_media_attachments.first
+  = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), frameRate: video.file.meta.dig('original', 'frame_rate'), blurhash: video.blurhash, sensitive: status.sensitive?, visible: false, width: 610, height: 343, inline: true, alt: video.description, media: [ActiveModelSerializers::SerializableResource.new(video, serializer: REST::MediaAttachmentSerializer)].as_json
+- elsif status.ordered_media_attachments.first.audio?
+  - audio = status.ordered_media_attachments.first
+  = react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration)
+- else
+  = react_component :media_gallery, height: 343, sensitive: status.sensitive?, visible: false, media: status.ordered_media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }
diff --git a/app/views/admin/reports/_status.html.haml b/app/views/admin/reports/_status.html.haml
index 392fc8f81..b2982a42b 100644
--- a/app/views/admin/reports/_status.html.haml
+++ b/app/views/admin/reports/_status.html.haml
@@ -12,14 +12,7 @@
           = prerender_custom_emojis(status_content_format(status.proper), status.proper.emojis)
 
     - unless status.proper.ordered_media_attachments.empty?
-      - if status.proper.ordered_media_attachments.first.video?
-        - video = status.proper.ordered_media_attachments.first
-        = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), frameRate: video.file.meta.dig('original', 'frame_rate'), blurhash: video.blurhash, sensitive: status.proper.sensitive?, visible: false, width: 610, height: 343, inline: true, alt: video.description, media: [ActiveModelSerializers::SerializableResource.new(video, serializer: REST::MediaAttachmentSerializer)].as_json
-      - elsif status.proper.ordered_media_attachments.first.audio?
-        - audio = status.proper.ordered_media_attachments.first
-        = react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration)
-      - else
-        = react_component :media_gallery, height: 343, sensitive: status.proper.sensitive?, visible: false, media: status.proper.ordered_media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }
+      = render partial: 'admin/reports/media_attachments', locals: { status: status.proper }
 
     .detailed-status__meta
       - if status.application
@@ -29,7 +22,7 @@
         %time.formatted{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)
       - if status.edited?
         ·
-        = t('statuses.edited_at_html', date: content_tag(:time, l(status.edited_at), datetime: status.edited_at.iso8601, title: l(status.edited_at), class: 'formatted'))
+        = link_to t('statuses.edited_at_html', date: content_tag(:time, l(status.edited_at), datetime: status.edited_at.iso8601, title: l(status.edited_at), class: 'formatted')), admin_account_status_path(status.account_id, status), class: 'detailed-status__datetime'
       - if status.discarded?
         ·
         %span.negative-hint= t('admin.statuses.deleted')
diff --git a/app/views/admin/status_edits/_status_edit.html.haml b/app/views/admin/status_edits/_status_edit.html.haml
new file mode 100644
index 000000000..19a0e063d
--- /dev/null
+++ b/app/views/admin/status_edits/_status_edit.html.haml
@@ -0,0 +1,20 @@
+.status
+  .status__content><
+    - if status_edit.spoiler_text.blank?
+      = prerender_custom_emojis(status_content_format(status_edit), status_edit.emojis)
+    - else
+      %details<
+        %summary><
+          %strong> Content warning: #{prerender_custom_emojis(h(status_edit.spoiler_text), status_edit.emojis)}
+        = prerender_custom_emojis(status_content_format(status_edit), status_edit.emojis)
+
+  - unless status_edit.ordered_media_attachments.empty?
+    = render partial: 'admin/reports/media_attachments', locals: { status: status_edit }
+
+  .detailed-status__meta
+    %time.formatted{ datetime: status_edit.created_at.iso8601, title: l(status_edit.created_at) }= l(status_edit.created_at)
+
+    - if status_edit.sensitive?
+      ·
+      = fa_icon('eye-slash fw')
+      = t('stream_entries.sensitive_content')
diff --git a/app/views/admin/statuses/show.html.haml b/app/views/admin/statuses/show.html.haml
new file mode 100644
index 000000000..62b49de8c
--- /dev/null
+++ b/app/views/admin/statuses/show.html.haml
@@ -0,0 +1,64 @@
+- content_for :header_tags do
+  = javascript_pack_tag 'admin', async: true, crossorigin: 'anonymous'
+
+- content_for :page_title do
+  = t('statuses.title', name: display_name(@account), quote: truncate(@status.spoiler_text.presence || @status.text, length: 50, omission: '…', escape: false))
+
+- content_for :heading_actions do
+  = link_to t('admin.statuses.open'), ActivityPub::TagManager.instance.url_for(@status), class: 'button', target: '_blank'
+
+%h3= t('admin.statuses.metadata')
+
+.table-wrapper
+  %table.table.horizontal-table
+    %tbody
+      %tr
+        %th= t('admin.statuses.account')
+        %td= admin_account_link_to @status.account
+      - if @status.reply?
+        %tr
+          %th= t('admin.statuses.in_reply_to')
+          %td= admin_account_link_to @status.in_reply_to_account, path: admin_account_status_path(@status.thread.account_id, @status.in_reply_to_id)
+      %tr
+        %th= t('admin.statuses.application')
+        %td= @status.application&.name
+      %tr
+        %th= t('admin.statuses.language')
+        %td= standard_locale_name(@status.language)
+      %tr
+        %th= t('admin.statuses.visibility')
+        %td= t("statuses.visibilities.#{@status.visibility}")
+      - if @status.trend
+        %tr
+          %th= t('admin.statuses.trending')
+          %td
+            - if @status.trend.allowed?
+              %abbr{ title: t('admin.trends.tags.current_score', score: @status.trend.score) }= t('admin.trends.tags.trending_rank', rank: @status.trend.rank)
+            - elsif @status.trend.requires_review?
+              = t('admin.trends.pending_review')
+            - else
+              = t('admin.trends.not_allowed_to_trend')
+      %tr
+        %th= t('admin.statuses.reblogs')
+        %td= friendly_number_to_human @status.reblogs_count
+      %tr
+        %th= t('admin.statuses.favourites')
+        %td= friendly_number_to_human @status.favourites_count
+
+%hr.spacer/
+
+%h3= t('admin.statuses.history')
+
+%ol.history
+  - @status.edits.includes(:account, status: [:account]).each.with_index do |status_edit, i|
+    %li
+      .history__entry
+        %h5
+          - if i.zero?
+            = t('admin.statuses.original_status')
+          - else
+            = t('admin.statuses.status_changed')
+          ·
+          %time.formatted{ datetime: status_edit.created_at.iso8601, title: l(status_edit.created_at) }= l(status_edit.created_at)
+
+        = render status_edit
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 70850d478..fd845c3c2 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -705,16 +705,29 @@ en:
       delete: Delete uploaded file
       destroyed_msg: Site upload successfully deleted!
     statuses:
+      account: Author
+      application: Application
       back_to_account: Back to account page
       back_to_report: Back to report page
       batch:
         remove_from_report: Remove from report
         report: Report
       deleted: Deleted
+      favourites: Favourites
+      history: Version history
+      in_reply_to: Replying to
+      language: Language
       media:
         title: Media
+      metadata: Metadata
       no_status_selected: No posts were changed as none were selected
+      open: Open post
+      original_status: Original post
+      reblogs: Reblogs
+      status_changed: Post changed
       title: Account posts
+      trending: Trending
+      visibility: Visibility
       with_media: With media
     strikes:
       actions:
diff --git a/config/routes.rb b/config/routes.rb
index b44479e77..12726a677 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -325,7 +325,7 @@ Rails.application.routes.draw do
       resource :reset, only: [:create]
       resource :action, only: [:new, :create], controller: 'account_actions'
 
-      resources :statuses, only: [:index] do
+      resources :statuses, only: [:index, :show] do
         collection do
           post :batch
         end
diff --git a/spec/policies/status_policy_spec.rb b/spec/policies/status_policy_spec.rb
index 205ecd720..b88521708 100644
--- a/spec/policies/status_policy_spec.rb
+++ b/spec/policies/status_policy_spec.rb
@@ -96,10 +96,6 @@ RSpec.describe StatusPolicy, type: :model do
       expect(subject).to permit(status.account, status)
     end
 
-    it 'grants access when account is admin' do
-      expect(subject).to permit(admin.account, status)
-    end
-
     it 'denies access when account is not deleter' do
       expect(subject).to_not permit(bob, status)
     end
@@ -125,27 +121,9 @@ RSpec.describe StatusPolicy, type: :model do
     end
   end
 
-  permissions :index? do
-    it 'grants access if staff' do
-      expect(subject).to permit(admin.account)
-    end
-
-    it 'denies access unless staff' do
-      expect(subject).to_not permit(alice)
-    end
-  end
-
   permissions :update? do
-    it 'grants access if staff' do
-      expect(subject).to permit(admin.account, status)
-    end
-
     it 'grants access if owner' do
       expect(subject).to permit(status.account, status)
     end
-
-    it 'denies access unless staff' do
-      expect(subject).to_not permit(bob, status)
-    end
   end
 end
-- 
cgit 


From 8dfe5179ee7186e549dbe1186a151ffa848fe8ab Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 28 Oct 2022 00:48:45 +0200
Subject: Fix avatars not using image tags in web UI (#19488)

Fix #19483
---
 .../__tests__/__snapshots__/avatar-test.js.snap    | 22 +++++-----
 .../__snapshots__/avatar_overlay-test.js.snap      | 50 +++++++++++++++++-----
 app/javascript/mastodon/components/avatar.js       | 26 ++++-------
 .../mastodon/components/avatar_composite.js        |  7 +--
 .../mastodon/components/avatar_overlay.js          | 36 +++++++++++-----
 app/javascript/styles/mastodon/components.scss     | 39 ++++++-----------
 6 files changed, 102 insertions(+), 78 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
index f5c10aa37..7fbdedeb2 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
@@ -2,36 +2,38 @@
 
 exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 <div
-  aria-label="alice"
   className="account__avatar"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
-  role="img"
   style={
     {
-      "backgroundImage": "url(/animated/alice.gif)",
-      "backgroundSize": "100px 100px",
       "height": "100px",
       "width": "100px",
     }
   }
-/>
+>
+  <img
+    alt="alice"
+    src="/animated/alice.gif"
+  />
+</div>
 `;
 
 exports[`<Avatar /> Still renders a still avatar 1`] = `
 <div
-  aria-label="alice"
   className="account__avatar"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
-  role="img"
   style={
     {
-      "backgroundImage": "url(/static/alice.jpg)",
-      "backgroundSize": "100px 100px",
       "height": "100px",
       "width": "100px",
     }
   }
-/>
+>
+  <img
+    alt="alice"
+    src="/static/alice.jpg"
+  />
+</div>
 `;
diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap
index 58f27a321..f8385357a 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap
@@ -3,22 +3,52 @@
 exports[`<AvatarOverlay renders a overlay avatar 1`] = `
 <div
   className="account__avatar-overlay"
+  style={
+    {
+      "height": 46,
+      "width": 46,
+    }
+  }
 >
   <div
     className="account__avatar-overlay-base"
-    style={
-      {
-        "backgroundImage": "url(/static/alice.jpg)",
+  >
+    <div
+      className="account__avatar"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        {
+          "height": "36px",
+          "width": "36px",
+        }
       }
-    }
-  />
+    >
+      <img
+        alt="alice"
+        src="/static/alice.jpg"
+      />
+    </div>
+  </div>
   <div
     className="account__avatar-overlay-overlay"
-    style={
-      {
-        "backgroundImage": "url(/static/eve.jpg)",
+  >
+    <div
+      className="account__avatar"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        {
+          "height": "24px",
+          "width": "24px",
+        }
       }
-    }
-  />
+    >
+      <img
+        alt="eve@blackhat.lair"
+        src="/static/eve.jpg"
+      />
+    </div>
+  </div>
 </div>
 `;
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index dd3932ae6..207b26691 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/app/javascript/mastodon/components/avatar.js
@@ -42,30 +42,20 @@ export default class Avatar extends React.PureComponent {
       ...this.props.style,
       width: `${size}px`,
       height: `${size}px`,
-      backgroundSize: `${size}px ${size}px`,
     };
 
-    if (account) {
-      const src = account.get('avatar');
-      const staticSrc = account.get('avatar_static');
+    let src;
 
-      if (hovering || animate) {
-        style.backgroundImage = `url(${src})`;
-      } else {
-        style.backgroundImage = `url(${staticSrc})`;
-      }
+    if (hovering || animate) {
+      src = account?.get('avatar');
+    } else {
+      src = account?.get('avatar_static');
     }
 
-
     return (
-      <div
-        className={classNames('account__avatar', { 'account__avatar-inline': inline })}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        style={style}
-        role='img'
-        aria-label={account?.get('acct')}
-      />
+      <div className={classNames('account__avatar', { 'account__avatar-inline': inline })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style}>
+        <img src={src} alt={account?.get('acct')} />
+      </div>
     );
   }
 
diff --git a/app/javascript/mastodon/components/avatar_composite.js b/app/javascript/mastodon/components/avatar_composite.js
index 5d5b89749..220bf5b4f 100644
--- a/app/javascript/mastodon/components/avatar_composite.js
+++ b/app/javascript/mastodon/components/avatar_composite.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
+import Avatar from './avatar';
 
 export default class AvatarComposite extends React.PureComponent {
 
@@ -74,12 +75,12 @@ export default class AvatarComposite extends React.PureComponent {
       bottom: bottom,
       width: `${width}%`,
       height: `${height}%`,
-      backgroundSize: 'cover',
-      backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
     };
 
     return (
-      <div key={account.get('id')} style={style} />
+      <div key={account.get('id')} style={style}>
+        <Avatar account={account} animate={animate} />
+      </div>
     );
   }
 
diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js
index 3ec1d7730..8d5d44ea5 100644
--- a/app/javascript/mastodon/components/avatar_overlay.js
+++ b/app/javascript/mastodon/components/avatar_overlay.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
+import Avatar from './avatar';
 
 export default class AvatarOverlay extends React.PureComponent {
 
@@ -9,27 +10,40 @@ export default class AvatarOverlay extends React.PureComponent {
     account: ImmutablePropTypes.map.isRequired,
     friend: ImmutablePropTypes.map.isRequired,
     animate: PropTypes.bool,
+    size: PropTypes.number,
+    baseSize: PropTypes.number,
+    overlaySize: PropTypes.number,
   };
 
   static defaultProps = {
     animate: autoPlayGif,
+    size: 46,
+    baseSize: 36,
+    overlaySize: 24,
   };
 
-  render() {
-    const { account, friend, animate } = this.props;
+  state = {
+    hovering: false,
+  };
+
+  handleMouseEnter = () => {
+    if (this.props.animate) return;
+    this.setState({ hovering: true });
+  }
 
-    const baseStyle = {
-      backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
-    };
+  handleMouseLeave = () => {
+    if (this.props.animate) return;
+    this.setState({ hovering: false });
+  }
 
-    const overlayStyle = {
-      backgroundImage: `url(${friend.get(animate ? 'avatar' : 'avatar_static')})`,
-    };
+  render() {
+    const { account, friend, animate, size, baseSize, overlaySize } = this.props;
+    const { hovering } = this.state;
 
     return (
-      <div className='account__avatar-overlay'>
-        <div className='account__avatar-overlay-base' style={baseStyle} />
-        <div className='account__avatar-overlay-overlay' style={overlayStyle} />
+      <div className='account__avatar-overlay' style={{ width: size, height: size }}>
+        <div className='account__avatar-overlay-base'><Avatar animate={hovering || animate} account={account} size={baseSize} /></div>
+        <div className='account__avatar-overlay-overlay'><Avatar animate={hovering || animate} account={friend} size={overlaySize} /></div>
       </div>
     );
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 633b9ed70..69301fb05 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1382,6 +1382,14 @@
 
   display: block;
   position: relative;
+  overflow: hidden;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
   &-inline {
     display: inline-block;
@@ -1390,8 +1398,6 @@
   }
 
   &-composite {
-    @include avatar-radius;
-
     border-radius: 50%;
     overflow: hidden;
     position: relative;
@@ -1402,6 +1408,11 @@
       box-sizing: border-box;
     }
 
+    .account__avatar {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
     &__label {
       display: block;
       position: absolute;
@@ -1421,37 +1432,13 @@ a .account__avatar {
 }
 
 .account__avatar-overlay {
-  @include avatar-size(46px);
-
   position: relative;
 
-  &-base {
-    @include avatar-radius;
-    @include avatar-size(36px);
-
-    img {
-      @include avatar-radius;
-
-      width: 100%;
-      height: 100%;
-    }
-  }
-
   &-overlay {
-    @include avatar-radius;
-    @include avatar-size(24px);
-
     position: absolute;
     bottom: 0;
     right: 0;
     z-index: 1;
-
-    img {
-      @include avatar-radius;
-
-      width: 100%;
-      height: 100%;
-    }
   }
 }
 
-- 
cgit