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
2022-10-20 14:35:29 +02:00 · 2022-10-20 14:35:29 +02:00 · 839f893168
commit 839f893168
parent b0e3f0312c
101 changed files with 393 additions and 2468 deletions
--- 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>
    );
  }
--- 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>
 );

--- 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>
--- 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>
    );
--- 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>
    );
--- a/app/javascript/mastodon/features/account_timeline/index.js
+++ b/app/javascript/mastodon/features/account_timeline/index.js
@ -142,7 +142,13 @@ 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>
+          <LoadingIndicator />
+        </Column>
+      );
+    } else if (!isLoading && !isAccount) {
      return (
        <Column>
          <ColumnBackButton multiColumn={multiColumn} />
@ -151,14 +157,6 @@ class AccountTimeline extends ImmutablePureComponent {
      );
    }

-    if (!statusIds && isLoading) {
-      return (
-        <Column>
-          <LoadingIndicator />
-        </Column>
-      );
-    }
-
    let emptyMessage;

    const forceEmptyState = suspended || blockedBy || hidden;
--- 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>
    );
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
--- 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>
    );
--- 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>
    );
  }
--- 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>
          )}
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
    );
--- 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>
    );
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
--- 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>
    );
  }
--- 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>
    );
--- 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 () {
--- 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>
    );
--- 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} />
--- 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');
 }
--- 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) => {
--- 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'));
--- 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:
--- 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;
      }

--- 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 (clientList.length !== 0 && 'navigate' in clientList[0]) { // Chrome 42-48 does not support navigate
+      const client = findBestClient(clientList);

-      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);
-
-        return client.navigate(url).then(client => client.focus());
-      }
+      return client.navigate(url).then(client => client.focus());
    }

    return self.clients.openWindow(url);