From 8491a3532dba7176fbeb7b9283ca3abd07858b3a Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Sun, 9 Oct 2022 10:49:51 +0900
Subject: [Glitch] Remove timeline preview link from nav panel when not
 signed-in

Port e82467ca41f4940add32061ca70214e236cc435f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/server_banner.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
index 16360ec56..2bb0381da 100644
--- a/app/javascript/flavours/glitch/components/server_banner.js
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -1,12 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { domain } from 'flavours/glitch/initial_state';
-import { fetchServer } from 'flavours/glitch/actions/server';
+import React from 'react';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import Account from 'flavours/glitch/containers/account_container';
+import { fetchServer } from 'flavours/glitch/actions/server';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import Account from 'flavours/glitch/containers/account_container';
+import { domain } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
-- 
cgit 


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

Port f41ec9af05d3e2145e62f705225dbabb7e04e242 to glitch-soc

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/dismissable_banner.js        | 51 ++++++++++++++++++++++
 .../flavours/glitch/features/about/index.js        |  3 +-
 .../glitch/features/community_timeline/index.js    |  9 +++-
 .../flavours/glitch/features/directory/index.js    |  3 +-
 .../flavours/glitch/features/explore/index.js      |  3 +-
 .../flavours/glitch/features/explore/links.js      | 11 +++++
 .../flavours/glitch/features/explore/results.js    |  3 +-
 .../flavours/glitch/features/explore/statuses.js   | 29 +++++++-----
 .../flavours/glitch/features/explore/tags.js       | 11 +++++
 .../glitch/features/hashtag_timeline/index.js      |  3 +-
 .../glitch/features/home_timeline/index.js         |  5 +--
 .../glitch/features/notifications/index.js         |  3 +-
 .../glitch/features/privacy_policy/index.js        |  3 +-
 .../glitch/features/public_timeline/index.js       |  8 +++-
 app/javascript/flavours/glitch/settings.js         |  1 +
 .../flavours/glitch/styles/components/columns.scss | 25 +++++++++++
 16 files changed, 139 insertions(+), 32 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/dismissable_banner.js

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.js b/app/javascript/flavours/glitch/components/dismissable_banner.js
new file mode 100644
index 000000000..ff52a619d
--- /dev/null
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js
index 9f7c90d91..4500480f5 100644
--- a/app/javascript/flavours/glitch/features/about/index.js
+++ b/app/javascript/flavours/glitch/features/about/index.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import Column from 'flavours/glitch/components/column';
 import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
@@ -25,7 +24,7 @@ class About extends React.PureComponent {
         <LinkFooter />
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js
index 5ee46ca3b..77809574d 100644
--- a/app/javascript/flavours/glitch/features/community_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.js
@@ -10,7 +10,8 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
+import { domain } from 'flavours/glitch/initial_state';
+import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
 
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
@@ -138,6 +139,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}`}
@@ -149,7 +154,7 @@ class CommunityTimeline extends React.PureComponent {
         />
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/directory/index.js b/app/javascript/flavours/glitch/features/directory/index.js
index dce8fa4e7..672a11430 100644
--- a/app/javascript/flavours/glitch/features/directory/index.js
+++ b/app/javascript/flavours/glitch/features/directory/index.js
@@ -13,7 +13,6 @@ import RadioButton from 'flavours/glitch/components/radio_button';
 import LoadMore from 'flavours/glitch/components/load_more';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -169,7 +168,7 @@ class Directory extends React.PureComponent {
         {multiColumn && !pinned ? <ScrollContainer scrollKey='directory'>{scrollableArea}</ScrollContainer> : scrollableArea}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/explore/index.js b/app/javascript/flavours/glitch/features/explore/index.js
index f37793732..934e309f8 100644
--- a/app/javascript/flavours/glitch/features/explore/index.js
+++ b/app/javascript/flavours/glitch/features/explore/index.js
@@ -13,7 +13,6 @@ import Search from 'flavours/glitch/features/compose/containers/search_container
 import SearchResults from './results';
 import { showTrends } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'explore.title', defaultMessage: 'Explore' },
@@ -85,7 +84,7 @@ class Explore extends React.PureComponent {
               </Switch>
 
               <Helmet>
-                <title>{intl.formatMessage(messages.title)} - {title}</title>
+                <title>{intl.formatMessage(messages.title)}</title>
               </Helmet>
             </React.Fragment>
           )}
diff --git a/app/javascript/flavours/glitch/features/explore/links.js b/app/javascript/flavours/glitch/features/explore/links.js
index 6adc2f6fb..092f86b29 100644
--- a/app/javascript/flavours/glitch/features/explore/links.js
+++ b/app/javascript/flavours/glitch/features/explore/links.js
@@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import { connect } from 'react-redux';
 import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
 import { FormattedMessage } from 'react-intl';
+import DismissableBanner from 'flavours/glitch/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/flavours/glitch/features/explore/results.js b/app/javascript/flavours/glitch/features/explore/results.js
index e37379686..892980d95 100644
--- a/app/javascript/flavours/glitch/features/explore/results.js
+++ b/app/javascript/flavours/glitch/features/explore/results.js
@@ -10,7 +10,6 @@ import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'
 import { List as ImmutableList } from 'immutable';
 import LoadMore from 'flavours/glitch/components/load_more';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -118,7 +117,7 @@ class Results extends React.PureComponent {
         </div>
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title, { q })} - {title}</title>
+          <title>{intl.formatMessage(messages.title, { q })}</title>
         </Helmet>
       </React.Fragment>
     );
diff --git a/app/javascript/flavours/glitch/features/explore/statuses.js b/app/javascript/flavours/glitch/features/explore/statuses.js
index fe08ce466..0a5c9de23 100644
--- a/app/javascript/flavours/glitch/features/explore/statuses.js
+++ b/app/javascript/flavours/glitch/features/explore/statuses.js
@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/actions/trends';
 import { debounce } from 'lodash';
+import DismissableBanner from 'flavours/glitch/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/flavours/glitch/features/explore/tags.js b/app/javascript/flavours/glitch/features/explore/tags.js
index 465fad0df..938036b64 100644
--- a/app/javascript/flavours/glitch/features/explore/tags.js
+++ b/app/javascript/flavours/glitch/features/explore/tags.js
@@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import { connect } from 'react-redux';
 import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
 import { FormattedMessage } from 'react-intl';
+import DismissableBanner from 'flavours/glitch/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/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
index 5e098514a..80b4c82be 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
@@ -14,7 +14,6 @@ import { isEqual } from 'lodash';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';
 import Icon from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
-import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -228,7 +227,7 @@ class HashtagTimeline extends React.PureComponent {
         />
 
         <Helmet>
-          <title>{`#${id}`} - {title}</title>
+          <title>#{id}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js
index 86aaa0258..aa319b576 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/home_timeline/index.js
@@ -15,13 +15,12 @@ import classNames from 'classnames';
 import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
 import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
 
 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,
@@ -170,7 +169,7 @@ class HomeTimeline extends React.PureComponent {
         ) : <NotSignedInIndicator />}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index 26eeba168..0b26a3d9e 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -30,7 +30,6 @@ import compareId from 'flavours/glitch/compare_id';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
 import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
 
 import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
 
@@ -373,7 +372,7 @@ class Notifications extends React.PureComponent {
         {scrollContainer}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js
index 816010294..c1f7c4f1e 100644
--- a/app/javascript/flavours/glitch/features/privacy_policy/index.js
+++ b/app/javascript/flavours/glitch/features/privacy_policy/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
 import Column from 'flavours/glitch/components/column';
@@ -51,7 +50,7 @@ class PrivacyPolicy extends React.PureComponent {
         </div>
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/public_timeline/index.js b/app/javascript/flavours/glitch/features/public_timeline/index.js
index aa70acf15..49015c2fb 100644
--- a/app/javascript/flavours/glitch/features/public_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.js
@@ -10,7 +10,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectPublicStream } from 'flavours/glitch/actions/streaming';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
+import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Federated timeline' },
@@ -143,6 +143,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' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`}
           onLoadMore={this.handleLoadMore}
@@ -154,7 +158,7 @@ class PublicTimeline extends React.PureComponent {
         />
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/settings.js b/app/javascript/flavours/glitch/settings.js
index 7643a508e..46cfadfa3 100644
--- a/app/javascript/flavours/glitch/settings.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 1827e8c01..6f878f791 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -936,3 +936,28 @@ $ui-header-height: 55px;
     color: $darker-text-color;
   }
 }
+
+.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 c36f28ba77d784cff6f5dba109e1286b13204221 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 9 Oct 2022 15:55:32 +0200
Subject: [Glitch] Fix intermediary responsive layout, accessibility on
 navigation in web UI

Port 07653246223251052f5150e1e74139bf8ff41ec4 to glitch-soc

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/avatar.js           |  2 +
 app/javascript/flavours/glitch/components/logo.js  |  3 +-
 .../glitch/features/ui/components/column_link.js   | 24 ++++++----
 .../ui/components/follow_requests_column_link.js   | 51 ++++++++++++++++++++
 .../ui/components/follow_requests_nav_link.js      | 39 ---------------
 .../glitch/features/ui/components/header.js        |  3 +-
 .../features/ui/components/navigation_panel.js     | 56 ++++++++++++++--------
 .../flavours/glitch/styles/components/columns.scss |  3 ++
 .../glitch/styles/components/single_column.scss    | 31 ++++++++++--
 .../flavours/glitch/styles/variables.scss          |  2 +-
 10 files changed, 137 insertions(+), 77 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js
 delete mode 100644 app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js
index ce91d401d..1da4a861c 100644
--- a/app/javascript/flavours/glitch/components/avatar.js
+++ b/app/javascript/flavours/glitch/components/avatar.js
@@ -70,6 +70,8 @@ export default class Avatar extends React.PureComponent {
         onMouseLeave={this.handleMouseLeave}
         style={style}
         data-avatar-of={account && `@${account.get('acct')}`}
+        role='img'
+        aria-label={account.get('acct')}
       />
     );
   }
diff --git a/app/javascript/flavours/glitch/components/logo.js b/app/javascript/flavours/glitch/components/logo.js
index 3570b3644..ee5c22496 100644
--- a/app/javascript/flavours/glitch/components/logo.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js
index d04b869b6..1c475d087 100644
--- a/app/javascript/flavours/glitch/features/ui/components/column_link.js
+++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js
@@ -1,26 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import Icon from 'flavours/glitch/components/icon';
+import classNames from 'classnames';
 
-const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
+const ColumnLink = ({ icon, text, to, onClick, 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 if (to) {
     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>
     );
   } else {
     const handleOnClick = (e) => {
@@ -29,8 +32,8 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
       return onClick(e);
     }
     return (
-      <a href='#' onClick={onClick && handleOnClick} className='column-link' tabIndex='0'>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+      <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex='0'>
+        {iconElement}
         {text}
         {badgeElement}
       </a>
@@ -39,13 +42,14 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
 };
 
 ColumnLink.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   text: PropTypes.string.isRequired,
   to: PropTypes.string,
   onClick: PropTypes.func,
   href: PropTypes.string,
   method: PropTypes.string,
   badge: PropTypes.node,
+  transparent: PropTypes.bool,
 };
 
 export default ColumnLink;
diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js
new file mode 100644
index 000000000..301392a52
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
+import { connect } from 'react-redux';
+import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
+import IconWithBadge from 'flavours/glitch/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/flavours/glitch/features/ui/components/follow_requests_nav_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js
deleted file mode 100644
index c30427896..000000000
--- a/app/javascript/flavours/glitch/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 'flavours/glitch/actions/accounts';
-import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-import IconWithBadge from 'flavours/glitch/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/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js
index 041bdff05..5fdef0af4 100644
--- a/app/javascript/flavours/glitch/features/ui/components/header.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
index 754c651c2..0955b3cf8 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
@@ -1,17 +1,34 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Link, NavLink } from 'react-router-dom';
-import Icon from 'flavours/glitch/components/icon';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container';
 import { showTrends, timelinePreview } from 'flavours/glitch/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 { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
+import ColumnLink from 'flavours/glitch/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' },
+  app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
+});
 
-export default class NavigationPanel extends React.Component {
+export default @injectIntl
+class NavigationPanel extends React.Component {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
@@ -23,24 +40,24 @@ export default class NavigationPanel extends React.Component {
   };
 
   render() {
+    const { intl, onOpenSettings } = this.props;
     const { signedIn } = this.context.identity;
-    const { onOpenSettings } = this.props;
 
     return (
       <div className='navigation-panel'>
         {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,17 +70,18 @@ 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='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></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 />
 
-            {!!preferencesLink && <a className='column-link column-link--transparent' href={preferencesLink} target='_blank'><Icon className='column-link__icon' id='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>}
-            <a className='column-link column-link--transparent' href='#' onClick={onOpenSettings}><Icon className='column-link__icon' id='cogs' fixedWidth /><FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' /></a>
-            {!!relationshipsLink && <a className='column-link column-link--transparent' href={relationshipsLink} target='_blank'><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>}
+            {!!preferencesLink && <ColumnLink transparent href={preferencesLink} icon='cog' text={intl.formatMessage(messages.preferences)} />}
+            <ColumnLink transparent href='#' onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
+            {!!relationshipsLink && <ColumnLink transparent href={relationshipsLink} icon='users' text={intl.formatMessage(messages.followsAndFollowers)} />}
           </React.Fragment>
         )}
 
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 6f878f791..3233506cc 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -214,6 +214,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/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 63bebc514..4a987a131 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -275,12 +275,14 @@
 }
 
 @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 {
@@ -288,10 +290,10 @@
   }
 
   .columns-area__panels__pane--navigational {
-    min-width: 55px;
+    min-width: $sidebar-width;
 
     .columns-area__panels__pane__inner {
-      width: 55px;
+      width: $sidebar-width;
     }
 
     .navigation-panel {
@@ -301,7 +303,6 @@
       height: 100vh;
     }
 
-    .column-link span,
     .navigation-panel__sign-in-banner,
     .navigation-panel__logo,
     .getting-started__trends {
@@ -326,11 +327,31 @@
   }
 }
 
+@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;
   }
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index 4b4f5ffbe..b865b5a2d 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -51,7 +51,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 67b4ecdd2124cb2cf05731b26a77129bb8151236 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 13 Oct 2022 14:42:37 +0200
Subject: [Glitch] Change about page to be mounted in the web UI

Port 1bd00036c284bcafb419eaf80347ba49d1b491d9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/actions/server.js   |  61 ++
 app/javascript/flavours/glitch/components/image.js |  33 +
 .../flavours/glitch/components/server_banner.js    |   8 +-
 .../flavours/glitch/components/skeleton.js         |   4 +-
 .../flavours/glitch/features/about/index.js        | 195 ++++-
 .../glitch/features/privacy_policy/index.js        |   2 +-
 .../flavours/glitch/features/report/rules.js       |   2 +-
 .../glitch/features/ui/components/link_footer.js   |   2 +-
 app/javascript/flavours/glitch/reducers/server.js  |  46 +-
 app/javascript/flavours/glitch/styles/about.scss   | 904 +--------------------
 .../flavours/glitch/styles/compact_header.scss     |  34 -
 .../flavours/glitch/styles/components/about.scss   | 238 ++++++
 .../flavours/glitch/styles/components/index.scss   |   3 +-
 .../glitch/styles/components/privacy_policy.scss   | 235 ++++--
 .../flavours/glitch/styles/containers.scss         |   1 -
 .../flavours/glitch/styles/contrast/diff.scss      |   4 -
 .../flavours/glitch/styles/dashboard.scss          |   1 -
 app/javascript/flavours/glitch/styles/forms.scss   |  63 +-
 app/javascript/flavours/glitch/styles/index.scss   |   2 -
 .../glitch/styles/mastodon-light/diff.scss         |   3 -
 app/javascript/flavours/glitch/styles/widgets.scss | 229 +-----
 21 files changed, 782 insertions(+), 1288 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/image.js
 delete mode 100644 app/javascript/flavours/glitch/styles/compact_header.scss
 create mode 100644 app/javascript/flavours/glitch/styles/components/about.scss

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/actions/server.js b/app/javascript/flavours/glitch/actions/server.js
index af8fef780..31d4aea10 100644
--- a/app/javascript/flavours/glitch/actions/server.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/image.js b/app/javascript/flavours/glitch/components/image.js
new file mode 100644
index 000000000..6e81ddf08
--- /dev/null
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/server_banner.js b/app/javascript/flavours/glitch/components/server_banner.js
index 2bb0381da..9cb0ef13c 100644
--- a/app/javascript/flavours/glitch/components/server_banner.js
+++ b/app/javascript/flavours/glitch/components/server_banner.js
@@ -7,13 +7,15 @@ import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
 import Account from 'flavours/glitch/containers/account_container';
 import { domain } from 'flavours/glitch/initial_state';
+import Image from 'flavours/glitch/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/flavours/glitch/components/skeleton.js b/app/javascript/flavours/glitch/components/skeleton.js
index 09093e99c..6a17ffb26 100644
--- a/app/javascript/flavours/glitch/components/skeleton.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js
index 4500480f5..8d7f9c108 100644
--- a/app/javascript/flavours/glitch/features/about/index.js
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/column';
 import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
 import { Helmet } from 'react-helmet';
+import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
+import Account from 'flavours/glitch/containers/account_container';
+import Skeleton from 'flavours/glitch/components/skeleton';
+import Icon from 'flavours/glitch/components/icon';
+import classNames from 'classnames';
+import Image from 'flavours/glitch/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/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js
index c1f7c4f1e..47ee80038 100644
--- a/app/javascript/flavours/glitch/features/privacy_policy/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/report/rules.js b/app/javascript/flavours/glitch/features/report/rules.js
index 599c04dbd..efcdf1fcf 100644
--- a/app/javascript/flavours/glitch/features/report/rules.js
+++ b/app/javascript/flavours/glitch/features/report/rules.js
@@ -7,7 +7,7 @@ import Button from 'flavours/glitch/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/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js
index 8c55a7337..2e061f760 100644
--- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/reducers/server.js b/app/javascript/flavours/glitch/reducers/server.js
index 977574148..cc5798fb3 100644
--- a/app/javascript/flavours/glitch/reducers/server.js
+++ b/app/javascript/flavours/glitch/reducers/server.js
@@ -1,18 +1,52 @@
-import { SERVER_FETCH_REQUEST, SERVER_FETCH_SUCCESS, SERVER_FETCH_FAIL } from 'flavours/glitch/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 'flavours/glitch/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/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 28761796b..0183c43d5 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/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,894 +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: .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: .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;
-      @include avatar-size(80px);
-      margin: 0 auto;
-      margin-bottom: 15px;
-
-      img {
-        display: block;
-        width: 80px;
-        height: 80px;
-        border-radius: 48px;
-        @include avatar-radius();
-      }
-    }
-
-    .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, .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/flavours/glitch/styles/compact_header.scss b/app/javascript/flavours/glitch/styles/compact_header.scss
deleted file mode 100644
index 4980ab5f1..000000000
--- a/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss
new file mode 100644
index 000000000..ca9ba3ebf
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/about.scss
@@ -0,0 +1,238 @@
+.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/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index a04482a79..81d90f442 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1034,6 +1034,7 @@
     padding: 10px;
     padding-top: 20px;
     z-index: 1;
+    font-size: 13px;
 
     ul {
       margin-bottom: 10px;
@@ -1045,7 +1046,6 @@
 
     p {
       color: $dark-text-color;
-      font-size: 13px;
       margin-bottom: 20px;
 
       a {
@@ -1779,3 +1779,4 @@ noscript {
 @import 'explore';
 @import 'signed_out';
 @import 'privacy_policy';
+@import 'about';
diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
index f69bf1a07..96cf06742 100644
--- a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
+++ b/app/javascript/flavours/glitch/styles/components/privacy_policy.scss
@@ -8,77 +8,200 @@
 
   &__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;
-    }
+.prose {
+  color: $secondary-text-color;
+  font-size: 15px;
+  line-height: 22px;
 
-    ol {
-      list-style: decimal;
-    }
+  p,
+  ul,
+  ol {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
 
-    ul,
-    ol {
-      padding-left: 1em;
-    }
+  img {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
 
-    li {
-      margin-bottom: 10px;
+  video {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
 
-      &::marker {
-        color: $darker-text-color;
-      }
+  figure {
+    margin-top: 2em;
+    margin-bottom: 2em;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    figcaption {
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
     }
+  }
 
-    h1 {
-      color: $primary-text-color;
-      font-size: 19px;
-      line-height: 24px;
-      font-weight: 700;
-      margin-top: 30px;
+  figure > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
-      &:first-child {
-        margin-top: 0;
-      }
-    }
+  h1 {
+    font-size: 1.5em;
+    margin-top: 0;
+    margin-bottom: 1em;
+    line-height: 1.33;
+  }
 
-    strong {
-      font-weight: 700;
-      color: $primary-text-color;
-    }
+  h2 {
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
 
-    em {
-      font-style: italic;
-    }
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
+
+  ol {
+    counter-reset: list-counter;
+  }
 
-    a {
-      color: $highlight-text-color;
-      text-decoration: underline;
+  li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  ol > li {
+    counter-increment: list-counter;
 
-      &:focus,
-      &:hover,
-      &:active {
-        text-decoration: none;
-      }
+    &::before {
+      content: counter(list-counter) ".";
+      position: absolute;
+      left: 0;
     }
+  }
+
+  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;
+  }
+
+  ul > li,
+  ol > li {
+    position: relative;
+    padding-left: 1.75em;
+  }
+
+  & > ul > li p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  & > ul > li > *:first-child {
+    margin-top: 1.25em;
+  }
 
-    hr {
-      border: 1px solid lighten($ui-base-color, 4%);
-      margin: 30px 0;
+  & > 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;
+  }
 }
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index f0caeb4c5..3f8165370 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.scss
index 9bd31cd7e..a9a203960 100644
--- a/app/javascript/flavours/glitch/styles/contrast/diff.scss
+++ b/app/javascript/flavours/glitch/styles/contrast/diff.scss
@@ -1,9 +1,5 @@
 // components.scss
 
-.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/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss
index 9b06b44d6..bb103e9ce 100644
--- a/app/javascript/flavours/glitch/styles/dashboard.scss
+++ b/app/javascript/flavours/glitch/styles/dashboard.scss
@@ -39,7 +39,6 @@
     font-size: 24px;
     line-height: 21px;
     color: $primary-text-color;
-    font-family: $font-display, sans-serif;
     margin-bottom: 20px;
     line-height: 30px;
   }
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 6ab1189da..57075a75f 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -138,18 +138,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 {
@@ -593,41 +584,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 {
@@ -898,24 +854,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/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
index f808773f3..5c2532758 100644
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ b/app/javascript/flavours/glitch/styles/index.scss
@@ -2,7 +2,6 @@
 @import 'variables';
 @import 'styles/fonts/roboto';
 @import 'styles/fonts/roboto-mono';
-@import 'styles/fonts/montserrat';
 
 @import 'reset';
 @import 'basics';
@@ -11,7 +10,6 @@
 @import 'lists';
 @import 'modal';
 @import 'footer';
-@import 'compact_header';
 @import 'widgets';
 @import 'forms';
 @import 'accounts';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index d16f23aed..64b86ffc1 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -390,9 +390,6 @@
 }
 
 .hero-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
 .moved-account-widget,
 .memoriam-widget,
 .activity-stream,
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index a88f3b2c7..fd091ee89 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -108,13 +108,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;
@@ -124,47 +117,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;
@@ -245,37 +197,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;
@@ -357,34 +278,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%;
 
@@ -486,11 +379,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;
@@ -498,88 +387,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;
@@ -593,37 +400,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%);
-  }
-}
-- 
cgit 


From 9363e5c24e48952ddb9a57a5b7d8cc8fe862fbd5 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 20 Oct 2022 14:35:29 +0200
Subject: [Glitch] Change public accounts pages to mount the web UI

Port 839f893168ab221b08fa439012189e6c29a2721a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/error_boundary.js   |   5 +
 .../glitch/components/missing_indicator.js         |   5 +
 .../flavours/glitch/containers/mastodon.js         |   2 +-
 .../flavours/glitch/features/about/index.js        |   6 +-
 .../glitch/features/account/components/header.js   |   5 +-
 .../glitch/features/account_timeline/index.js      |  12 +-
 .../glitch/features/bookmarked_statuses/index.js   |   1 +
 .../glitch/features/community_timeline/index.js    |   1 +
 .../flavours/glitch/features/compose/index.js      |   5 +
 .../glitch/features/direct_timeline/index.js       |   1 +
 .../flavours/glitch/features/directory/index.js    |   1 +
 .../glitch/features/domain_blocks/index.js         |   6 +
 .../flavours/glitch/features/explore/index.js      |   1 +
 .../glitch/features/favourited_statuses/index.js   |   1 +
 .../flavours/glitch/features/favourites/index.js   |   5 +
 .../features/follow_recommendations/index.js       |   5 +
 .../glitch/features/follow_requests/index.js       |   5 +
 .../glitch/features/getting_started/index.js       |   1 +
 .../glitch/features/hashtag_timeline/index.js      |   1 +
 .../glitch/features/home_timeline/index.js         |   3 +-
 .../glitch/features/keyboard_shortcuts/index.js    |   5 +
 .../glitch/features/list_timeline/index.js         |   1 +
 .../flavours/glitch/features/lists/index.js        |   1 +
 .../flavours/glitch/features/mutes/index.js        |   5 +
 .../glitch/features/notifications/index.js         |   1 +
 .../glitch/features/pinned_statuses/index.js       |   4 +
 .../glitch/features/privacy_policy/index.js        |   6 +-
 .../glitch/features/public_timeline/index.js       |   1 +
 .../flavours/glitch/features/reblogs/index.js      |   5 +
 .../flavours/glitch/features/status/index.js       |  16 +-
 .../features/ui/components/bundle_column_error.js  |  24 +-
 .../features/ui/components/column_loading.js       |   6 +-
 .../glitch/features/ui/components/columns_area.js  |   4 +-
 .../glitch/features/ui/components/modal_root.js    |  21 +-
 .../flavours/glitch/features/ui/index.js           |   4 +-
 .../glitch/features/ui/util/async-components.js    |   8 +
 .../features/ui/util/react_router_helpers.js       |   4 +-
 app/javascript/flavours/glitch/main.js             |   8 -
 app/javascript/flavours/glitch/packs/public.js     |   7 -
 .../flavours/glitch/reducers/statuses.js           |   6 +
 app/javascript/flavours/glitch/selectors/index.js  |   2 +-
 .../flavours/glitch/styles/containers.scss         | 786 ---------------------
 app/javascript/flavours/glitch/styles/footer.scss  | 152 ----
 app/javascript/flavours/glitch/styles/index.scss   |   1 -
 .../glitch/styles/mastodon-light/diff.scss         |  31 -
 app/javascript/flavours/glitch/styles/rtl.scss     |  74 --
 .../flavours/glitch/styles/statuses.scss           |   9 +-
 47 files changed, 162 insertions(+), 1102 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/styles/footer.scss

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js
index fd3659de7..e0ca3e2b0 100644
--- a/app/javascript/flavours/glitch/components/error_boundary.js
+++ b/app/javascript/flavours/glitch/components/error_boundary.js
@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { source_url } from 'flavours/glitch/initial_state';
 import { preferencesLink } from 'flavours/glitch/utils/backend_links';
 import StackTrace from 'stacktrace-js';
+import { Helmet } from 'react-helmet';
 
 export default class ErrorBoundary extends React.PureComponent {
 
@@ -122,6 +123,10 @@ export default class ErrorBoundary extends React.PureComponent {
             )}
           </ul>
         </div>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </div>
     );
   }
diff --git a/app/javascript/flavours/glitch/components/missing_indicator.js b/app/javascript/flavours/glitch/components/missing_indicator.js
index ee5bf7c1e..08e39c236 100644
--- a/app/javascript/flavours/glitch/components/missing_indicator.js
+++ b/app/javascript/flavours/glitch/components/missing_indicator.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import illustration from 'flavours/glitch/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/flavours/glitch/containers/mastodon.js b/app/javascript/flavours/glitch/containers/mastodon.js
index eb88c2655..cf870102b 100644
--- a/app/javascript/flavours/glitch/containers/mastodon.js
+++ b/app/javascript/flavours/glitch/containers/mastodon.js
@@ -83,7 +83,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/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js
index 8d7f9c108..3d26c59bc 100644
--- a/app/javascript/flavours/glitch/features/about/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js
index 9c7e62fc2..9aca72172 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.js
+++ b/app/javascript/flavours/glitch/features/account/components/header.js
@@ -273,7 +273,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;
 
@@ -353,6 +355,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/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js
index 68d558e66..222d40ca1 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/account_timeline/index.js
@@ -136,19 +136,17 @@ class AccountTimeline extends ImmutablePureComponent {
   render () {
     const { accountId, statusIds, featuredStatusIds, isLoading, hasMore, 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/flavours/glitch/features/bookmarked_statuses/index.js b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js
index 91dd0e892..8978ac5fc 100644
--- a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/community_timeline/index.js b/app/javascript/flavours/glitch/features/community_timeline/index.js
index 77809574d..67bf54875 100644
--- a/app/javascript/flavours/glitch/features/community_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/community_timeline/index.js
@@ -155,6 +155,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/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js
index 150e78c48..63cff836c 100644
--- a/app/javascript/flavours/glitch/features/compose/index.js
+++ b/app/javascript/flavours/glitch/features/compose/index.js
@@ -15,6 +15,7 @@ import { me, mascot } from 'flavours/glitch/initial_state';
 import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
 import HeaderContainer from './containers/header_container';
 import Column from 'flavours/glitch/components/column';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
@@ -114,6 +115,10 @@ class Compose extends React.PureComponent {
       <Column>
         <NavigationContainer />
         <ComposeFormContainer />
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/index.js b/app/javascript/flavours/glitch/features/direct_timeline/index.js
index cb209ed76..d55c63c2b 100644
--- a/app/javascript/flavours/glitch/features/direct_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/direct_timeline/index.js
@@ -147,6 +147,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/flavours/glitch/features/directory/index.js b/app/javascript/flavours/glitch/features/directory/index.js
index 672a11430..94bcd578c 100644
--- a/app/javascript/flavours/glitch/features/directory/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/domain_blocks/index.js b/app/javascript/flavours/glitch/features/domain_blocks/index.js
index acce87d5a..cb0b55c63 100644
--- a/app/javascript/flavours/glitch/features/domain_blocks/index.js
+++ b/app/javascript/flavours/glitch/features/domain_blocks/index.js
@@ -11,6 +11,7 @@ import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_bloc
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from 'flavours/glitch/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/flavours/glitch/features/explore/index.js b/app/javascript/flavours/glitch/features/explore/index.js
index 934e309f8..24fa26eec 100644
--- a/app/javascript/flavours/glitch/features/explore/index.js
+++ b/app/javascript/flavours/glitch/features/explore/index.js
@@ -85,6 +85,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/flavours/glitch/features/favourited_statuses/index.js b/app/javascript/flavours/glitch/features/favourited_statuses/index.js
index ae94f05ca..a03e1a4eb 100644
--- a/app/javascript/flavours/glitch/features/favourited_statuses/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/favourites/index.js b/app/javascript/flavours/glitch/features/favourites/index.js
index faaf62dee..47c3279c4 100644
--- a/app/javascript/flavours/glitch/features/favourites/index.js
+++ b/app/javascript/flavours/glitch/features/favourites/index.js
@@ -11,6 +11,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Column from 'flavours/glitch/features/ui/components/column';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.favourited_by', defaultMessage: 'Favourited by' },
@@ -91,6 +92,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/flavours/glitch/features/follow_recommendations/index.js b/app/javascript/flavours/glitch/features/follow_recommendations/index.js
index f934aeb35..d9d962b7c 100644
--- a/app/javascript/flavours/glitch/features/follow_recommendations/index.js
+++ b/app/javascript/flavours/glitch/features/follow_recommendations/index.js
@@ -12,6 +12,7 @@ import Column from 'flavours/glitch/features/ui/components/column';
 import Account from './components/account';
 import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg';
 import Button from 'flavours/glitch/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/flavours/glitch/features/follow_requests/index.js b/app/javascript/flavours/glitch/features/follow_requests/index.js
index 47ca1e1bf..7b35e3ec9 100644
--- a/app/javascript/flavours/glitch/features/follow_requests/index.js
+++ b/app/javascript/flavours/glitch/features/follow_requests/index.js
@@ -12,6 +12,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import { me } from 'flavours/glitch/initial_state';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
@@ -88,6 +89,10 @@ class FollowRequests extends ImmutablePureComponent {
             <AccountAuthorizeContainer key={id} id={id} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js
index 39e00e4af..b00383877 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.js
+++ b/app/javascript/flavours/glitch/features/getting_started/index.js
@@ -194,6 +194,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
 
         <Helmet>
           <title>{intl.formatMessage(messages.menu)}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
index 80b4c82be..f1827789f 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js
index aa319b576..23d0440a9 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/index.js
+++ b/app/javascript/flavours/glitch/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,
@@ -170,6 +170,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/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
index 06df2ed99..2bc0116d4 100644
--- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
+++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
@@ -5,6 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ColumnHeader from 'flavours/glitch/components/column_header';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
@@ -137,6 +138,10 @@ class KeyboardShortcuts extends ImmutablePureComponent {
             </tbody>
           </table>
         </div>
+
+        <Helmet>
+          <meta name='robots' content='noindex' />
+        </Helmet>
       </Column>
     );
   }
diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js
index 9cc5bc1c4..a94c05c56 100644
--- a/app/javascript/flavours/glitch/features/list_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.js
@@ -215,6 +215,7 @@ class ListTimeline extends React.PureComponent {
 
         <Helmet>
           <title>{title}</title>
+          <meta name='robots' content='noindex' />
         </Helmet>
       </Column>
     );
diff --git a/app/javascript/flavours/glitch/features/lists/index.js b/app/javascript/flavours/glitch/features/lists/index.js
index 32217cf41..8773be5e6 100644
--- a/app/javascript/flavours/glitch/features/lists/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/mutes/index.js b/app/javascript/flavours/glitch/features/mutes/index.js
index 764cbef1a..8da106e47 100644
--- a/app/javascript/flavours/glitch/features/mutes/index.js
+++ b/app/javascript/flavours/glitch/features/mutes/index.js
@@ -11,6 +11,7 @@ import AccountContainer from 'flavours/glitch/containers/account_container';
 import { fetchMutes, expandMutes } from 'flavours/glitch/actions/mutes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from 'flavours/glitch/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/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index 0b26a3d9e..67b155ced 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -373,6 +373,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/flavours/glitch/features/pinned_statuses/index.js b/app/javascript/flavours/glitch/features/pinned_statuses/index.js
index 518d0294b..eeeab46ab 100644
--- a/app/javascript/flavours/glitch/features/pinned_statuses/index.js
+++ b/app/javascript/flavours/glitch/features/pinned_statuses/index.js
@@ -8,6 +8,7 @@ import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_
 import StatusList from 'flavours/glitch/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/flavours/glitch/features/privacy_policy/index.js b/app/javascript/flavours/glitch/features/privacy_policy/index.js
index 47ee80038..4618d9e32 100644
--- a/app/javascript/flavours/glitch/features/privacy_policy/index.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/public_timeline/index.js b/app/javascript/flavours/glitch/features/public_timeline/index.js
index 49015c2fb..a61a47de1 100644
--- a/app/javascript/flavours/glitch/features/public_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.js
@@ -159,6 +159,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/flavours/glitch/features/reblogs/index.js b/app/javascript/flavours/glitch/features/reblogs/index.js
index ed646c6ed..b097ff9d7 100644
--- a/app/javascript/flavours/glitch/features/reblogs/index.js
+++ b/app/javascript/flavours/glitch/features/reblogs/index.js
@@ -11,6 +11,7 @@ import ColumnHeader from 'flavours/glitch/components/column_header';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   heading: { id: 'column.reblogged_by', defaultMessage: 'Boosted by' },
@@ -92,6 +93,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/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index f84928d2e..2560faf05 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -135,6 +135,7 @@ const makeMapStateToProps = () => {
     }
 
     return {
+      isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']),
       status,
       ancestorsIds,
       descendantsIds,
@@ -178,6 +179,7 @@ class Status extends ImmutablePureComponent {
     params: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
+    isLoading: PropTypes.bool,
     settings: ImmutablePropTypes.map.isRequired,
     ancestorsIds: ImmutablePropTypes.list,
     descendantsIds: ImmutablePropTypes.list,
@@ -589,9 +591,17 @@ class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants;
-    const { status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, usingPiP } = this.props;
+    const { isLoading, status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, usingPiP } = this.props;
     const { fullscreen } = this.state;
 
+    if (isLoading) {
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
+    }
+
     if (status === null) {
       return (
         <Column>
@@ -611,6 +621,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,
@@ -685,6 +698,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/flavours/glitch/features/ui/components/bundle_column_error.js b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js
index 3e979a250..382481905 100644
--- a/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js
+++ b/app/javascript/flavours/glitch/features/ui/components/bundle_column_error.js
@@ -2,10 +2,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 'flavours/glitch/components/column_back_button_slim';
+import Column from 'flavours/glitch/components/column';
+import ColumnHeader from 'flavours/glitch/components/column_header';
 import IconButton from 'flavours/glitch/components/icon_button';
+import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
   title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
@@ -18,6 +18,7 @@ class BundleColumnError extends React.Component {
   static propTypes = {
     onRetry: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    multiColumn: PropTypes.bool,
   }
 
   handleRetry = () => {
@@ -25,16 +26,25 @@ class BundleColumnError extends React.Component {
   }
 
   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/flavours/glitch/features/ui/components/column_loading.js b/app/javascript/flavours/glitch/features/ui/components/column_loading.js
index 22c00c915..b07385397 100644
--- a/app/javascript/flavours/glitch/features/ui/components/column_loading.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
index 8037c195d..76e9a3690 100644
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
@@ -140,11 +140,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/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js
index cedfabe03..8767840d6 100644
--- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js
+++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js
@@ -13,10 +13,8 @@ import FavouriteModal from './favourite_modal';
 import AudioModal from './audio_modal';
 import DoodleModal from './doodle_modal';
 import ConfirmationModal from './confirmation_modal';
-import SubscribedLanguagesModal from 'flavours/glitch/features/subscribed_languages_modal';
 import FocalPointModal from './focal_point_modal';
 import DeprecatedSettingsModal from './deprecated_settings_modal';
-import InteractionModal from 'flavours/glitch/features/interaction_modal';
 import {
   OnboardingModal,
   MuteModal,
@@ -29,7 +27,10 @@ import {
   PinnedAccountsEditor,
   CompareHistoryModal,
   FilterModal,
+  InteractionModal,
+  SubscribedLanguagesModal,
 } from 'flavours/glitch/features/ui/util/async-components';
+import { Helmet } from 'react-helmet';
 
 const MODAL_COMPONENTS = {
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
@@ -53,8 +54,8 @@ const MODAL_COMPONENTS = {
   'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor,
   '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 {
@@ -119,9 +120,15 @@ export default class ModalRoot extends React.PureComponent {
     return (
       <Base backgroundColor={backgroundColor} onClose={this.handleClose} noEsc={props ? props.noEsc : false} 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/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index eb5c3e87b..0b6ce2ba5 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -210,8 +210,8 @@ class SwitchingColumnsArea extends React.PureComponent {
 
           <WrappedRoute path={['/@:acct', '/accounts/:id']} 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/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js
index 5bf8d7fd6..e1a0723e1 100644
--- a/app/javascript/flavours/glitch/features/ui/util/async-components.js
+++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js
@@ -182,6 +182,14 @@ export function Explore () {
   return import(/* webpackChunkName: "flavours/glitch/async/explore" */'flavours/glitch/features/explore');
 }
 
+export function InteractionModal () {
+  return import(/*webpackChunkName: "flavours/glitch/async/modals/interaction_modal" */'flavours/glitch/features/interaction_modal');
+}
+
+export function SubscribedLanguagesModal () {
+  return import(/*webpackChunkName: "flavours/glitch/async/modals/subscribed_languages_modal" */'flavours/glitch/features/subscribed_languages_modal');
+}
+
 export function About () {
   return import(/*webpackChunkName: "features/glitch/async/about" */'flavours/glitch/features/about');
 }
diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js
index e36c512f3..60a81a581 100644
--- a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/main.js b/app/javascript/flavours/glitch/main.js
index ecb19ef54..f1e10df34 100644
--- a/app/javascript/flavours/glitch/main.js
+++ b/app/javascript/flavours/glitch/main.js
@@ -12,14 +12,6 @@ const perf = require('flavours/glitch/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/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index ae1899638..629ea32b7 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -12,7 +12,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 = () => {
@@ -90,12 +89,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');
diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js
index 333e4b45c..b47155c5f 100644
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@@ -13,6 +13,8 @@ import {
   STATUS_REVEAL,
   STATUS_HIDE,
   STATUS_COLLAPSE,
+  STATUS_FETCH_REQUEST,
+  STATUS_FETCH_FAIL,
 } from 'flavours/glitch/actions/statuses';
 import {
   TIMELINE_DELETE,
@@ -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/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js
index 8e6e40d24..df46b58a8 100644
--- a/app/javascript/flavours/glitch/selectors/index.js
+++ b/app/javascript/flavours/glitch/selectors/index.js
@@ -42,7 +42,7 @@ export const makeGetStatus = () => {
     ],
 
     (statusBase, statusReblog, accountBase, accountReblog, filters) => {
-      if (!statusBase) {
+      if (!statusBase || statusBase.get('isLoading')) {
         return null;
       }
 
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 3f8165370..75472646e 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -106,789 +106,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;
-        @include avatar-size(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%);
-          @include avatar-radius();
-        }
-      }
-
-      @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;
-          @include avatar-size(48px);
-          padding: 7px 0;
-          padding-left: 10px;
-
-          img {
-            border: 0;
-            border-radius: 4px;
-            @include avatar-radius();
-          }
-
-          @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/flavours/glitch/styles/footer.scss b/app/javascript/flavours/glitch/styles/footer.scss
deleted file mode 100644
index 0c3e42033..000000000
--- a/app/javascript/flavours/glitch/styles/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/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss
index 5c2532758..fbb02c788 100644
--- a/app/javascript/flavours/glitch/styles/index.scss
+++ b/app/javascript/flavours/glitch/styles/index.scss
@@ -9,7 +9,6 @@
 @import 'containers';
 @import 'lists';
 @import 'modal';
-@import 'footer';
 @import 'widgets';
 @import 'forms';
 @import 'accounts';
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 64b86ffc1..d4ac55847 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -354,37 +354,6 @@
   }
 }
 
-.public-layout {
-  .header,
-  .public-account-header,
-  .public-account-bio {
-    box-shadow: none;
-  }
-
-  .header {
-    background: lighten($ui-base-color, 12%);
-  }
-
-  .public-account-header {
-    &__image {
-      background: lighten($ui-base-color, 12%);
-
-      &::after {
-        box-shadow: none;
-      }
-    }
-
-    &__tabs {
-      &__name {
-        h1,
-        h1 small {
-          color: $white;
-        }
-      }
-    }
-  }
-}
-
 .account__section-headline a.active::after {
   border-color: transparent transparent $white;
 }
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index d0153c9f9..31d1de376 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -30,16 +30,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;
@@ -327,44 +317,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 {
@@ -392,32 +344,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/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss
index c302fc0d0..947a5d3ae 100644
--- a/app/javascript/flavours/glitch/styles/statuses.scss
+++ b/app/javascript/flavours/glitch/styles/statuses.scss
@@ -133,8 +133,7 @@ a.button.logo-button {
   justify-content: center;
 }
 
-.embed,
-.public-layout {
+.embed {
   .status__content[data-spoiler=folded] {
     .e-content {
       display: none;
@@ -204,8 +203,7 @@ a.button.logo-button {
 }
 
 // Styling from upstream's WebUI, as public pages use the same layout
-.embed,
-.public-layout {
+.embed {
   .status {
     .status__info {
       font-size: 15px;
@@ -244,8 +242,7 @@ a.button.logo-button {
 }
 
 .rtl {
-  .embed,
-  .public-layout {
+  .embed {
     .status {
       padding-left: 10px;
       padding-right: 68px;
-- 
cgit 


From 7d3acb1f2c984cb402aa507b51abf7c824227fc8 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 22 Oct 2022 18:30:20 +0200
Subject: [Glitch] Fix error when rendering limited account in web UI

Port 73a48318a19a207c63f6d03ecea8ce35b7e2364a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/avatar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js
index 1da4a861c..38fd99af5 100644
--- a/app/javascript/flavours/glitch/components/avatar.js
+++ b/app/javascript/flavours/glitch/components/avatar.js
@@ -71,7 +71,7 @@ export default class Avatar extends React.PureComponent {
         style={style}
         data-avatar-of={account && `@${account.get('acct')}`}
         role='img'
-        aria-label={account.get('acct')}
+        aria-label={account?.get('acct')}
       />
     );
   }
-- 
cgit 


From b36c58b99e33f134d12e2489a35475e561f612b7 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 26 Oct 2022 15:23:00 +0200
Subject: [Glitch] Change post editing to be enabled in web UI

Port 8ebff0efcb91e8b2a0805ebd4583a274ad5f1a69 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/status_action_bar.js         | 2 +-
 .../flavours/glitch/features/status/components/action_bar.js           | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index deb9cfc15..b260b5bca 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -242,7 +242,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }
 
     if (writtenByMe) {
-      // menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
+      menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
       menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
       menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
     } else {
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index 9868621fe..afcf4cc69 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -175,9 +175,8 @@ class ActionBar extends React.PureComponent {
 
       menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
       menu.push(null);
-      // menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
+      menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
       menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
-      menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
     } else {
       menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
       menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
-- 
cgit 


From a2942fd0b89a0adaf86231d0d580f695738f700c Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 25 Oct 2022 18:47:04 +0200
Subject: [Glitch] Fix `nofollow` rel being removed in web UI

Port 9757c917da1753a706c4cd9e191e77059620b022 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/status_content.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
index fe0d4c043..61788f350 100644
--- a/app/javascript/flavours/glitch/components/status_content.js
+++ b/app/javascript/flavours/glitch/components/status_content.js
@@ -124,6 +124,9 @@ export default class StatusContent extends React.PureComponent {
         link.setAttribute('title', link.href);
         link.classList.add('unhandled-link');
 
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener nofollow noreferrer');
+
         try {
           if (tagLinks && isLinkMisleading(link)) {
             // Add a tag besides the link to display its origin
@@ -149,9 +152,6 @@ export default class StatusContent extends React.PureComponent {
           if (tagLinks && e instanceof TypeError) link.removeAttribute('href');
         }
       }
-
-      link.setAttribute('target', '_blank');
-      link.setAttribute('rel', 'noopener noreferrer');
     }
   }
 
-- 
cgit 


From 2cea6e55646bf47feb96c43d5461fc36f7a828f4 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 30 Sep 2022 01:14:37 +0200
Subject: [Glitch] Remove volume number from hashtags in web UI

Port c55219efa811b3c6347774bec1b174d325e5f300 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/hashtag.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js
index 2bb7f02f7..e54cba5c4 100644
--- a/app/javascript/flavours/glitch/components/hashtag.js
+++ b/app/javascript/flavours/glitch/components/hashtag.js
@@ -1,7 +1,7 @@
 // @ts-check
 import React from 'react';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Permalink from './permalink';
@@ -9,10 +9,6 @@ import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
 import classNames from 'classnames';
 
-const messages = defineMessages({
-  totalVolume: { id: 'hashtag.total_volume', defaultMessage: 'Total volume in the last {days, plural, one {day} other {{days} days}}' },
-});
-
 class SilentErrorBoundary extends React.Component {
 
   static propTypes = {
@@ -69,7 +65,7 @@ ImmutableHashtag.propTypes = {
   hashtag: ImmutablePropTypes.map.isRequired,
 };
 
-const Hashtag = injectIntl(({ name, href, to, people, uses, history, className, intl }) => (
+const Hashtag = ({ name, href, to, people, history, className }) => (
   <div className={classNames('trends__item', className)}>
     <div className='trends__item__name'>
       <Permalink href={href} to={to}>
@@ -79,11 +75,6 @@ const Hashtag = injectIntl(({ name, href, to, people, uses, history, className,
       {typeof people !== 'undefined' ? <ShortNumber value={people} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}
     </div>
 
-    <abbr className='trends__item__current' title={intl.formatMessage(messages.totalVolume, { days: 2 })}>
-      {typeof uses !== 'undefined' ? <ShortNumber value={uses} /> : <Skeleton width={42} height={36} />}
-      <span className='trends__item__current__asterisk'>*</span>
-    </abbr>
-
     <div className='trends__item__sparkline'>
       <SilentErrorBoundary>
         <Sparklines width={50} height={28} data={history ? history : Array.from(Array(7)).map(() => 0)}>
@@ -92,7 +83,7 @@ const Hashtag = injectIntl(({ name, href, to, people, uses, history, className,
       </SilentErrorBoundary>
     </div>
   </div>
-));
+);
 
 Hashtag.propTypes = {
   name: PropTypes.string,
-- 
cgit 


From 7bb1b917b27760609b08c8c690c87a69ea321ce3 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 19 Oct 2022 11:30:59 +0200
Subject: [Glitch] Change featured hashtags to be displayed in navigation panel

Port aefa9253d61def572396c18a8d2ac3cc706ffa2e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/hashtag.js          | 36 +++++++++----
 .../glitch/components/navigation_portal.js         | 30 +++++++++++
 .../features/account/components/featured_tags.js   | 60 ++++++++--------------
 .../account/containers/featured_tags_container.js  | 15 ++++++
 .../flavours/glitch/features/account/navigation.js | 51 ++++++++++++++++++
 .../features/account_timeline/components/header.js |  3 +-
 .../features/ui/components/navigation_panel.js     | 12 ++---
 .../flavours/glitch/styles/components/search.scss  |  6 ---
 8 files changed, 148 insertions(+), 65 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/navigation_portal.js
 create mode 100644 app/javascript/flavours/glitch/features/account/containers/featured_tags_container.js
 create mode 100644 app/javascript/flavours/glitch/features/account/navigation.js

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js
index e54cba5c4..085591439 100644
--- a/app/javascript/flavours/glitch/components/hashtag.js
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/navigation_portal.js b/app/javascript/flavours/glitch/components/navigation_portal.js
new file mode 100644
index 000000000..16a8ca3f5
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/navigation_portal.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Switch, Route, withRouter } from 'react-router-dom';
+import { showTrends } from 'flavours/glitch/initial_state';
+import Trends from 'flavours/glitch/features/getting_started/containers/trends_container';
+import AccountNavigation from 'flavours/glitch/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/flavours/glitch/features/account/components/featured_tags.js b/app/javascript/flavours/glitch/features/account/components/featured_tags.js
index a273d8fc6..7466180c9 100644
--- a/app/javascript/flavours/glitch/features/account/components/featured_tags.js
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/permalink';
-import ShortNumber from 'flavours/glitch/components/short_number';
-import { List as ImmutableList } from 'immutable';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import Hashtag from 'flavours/glitch/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/flavours/glitch/features/account/containers/featured_tags_container.js b/app/javascript/flavours/glitch/features/account/containers/featured_tags_container.js
new file mode 100644
index 000000000..6f0b06941
--- /dev/null
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/account/navigation.js b/app/javascript/flavours/glitch/features/account/navigation.js
new file mode 100644
index 000000000..ebd37ec14
--- /dev/null
+++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/account_timeline/components/header.js b/app/javascript/flavours/glitch/features/account_timeline/components/header.js
index 3a4008310..eb332e296 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/header.js
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/header.js
@@ -28,7 +28,6 @@ export default class Header extends ImmutablePureComponent {
     hideTabs: PropTypes.bool,
     domain: PropTypes.string.isRequired,
     hidden: PropTypes.bool,
-    tagged: PropTypes.string,
   };
 
   static contextTypes = {
@@ -104,7 +103,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;
diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
index d7d3b8257..7c8da46bd 100644
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
-import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container';
-import { showTrends, timelinePreview } from 'flavours/glitch/initial_state';
+import { timelinePreview } from 'flavours/glitch/initial_state';
 import ColumnLink from 'flavours/glitch/features/ui/components/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 { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
+import NavigationPortal from 'flavours/glitch/components/navigation_portal';
 
 const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
@@ -89,13 +89,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/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index bb861a88e..ee6b1c0a7 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -173,12 +173,6 @@
       margin-left: 5px;
       color: $secondary-text-color;
       text-decoration: none;
-
-      &__asterisk {
-        color: $darker-text-color;
-        font-size: 18px;
-        vertical-align: super;
-      }
     }
 
     &__sparkline {
-- 
cgit 


From 9f6c175550cf419334ca65bd71b7a456c13cb5a4 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 28 Oct 2022 12:56:51 +0200
Subject: [Glitch] Fix number of uses being shown again on trending hashtags in
 web UI

Port 923f06a07c851b25b989412f341f87f8b8fff42f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/hashtag.js         | 1 -
 app/javascript/flavours/glitch/styles/components/search.scss | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/hashtag.js b/app/javascript/flavours/glitch/components/hashtag.js
index 085591439..422b9a8fa 100644
--- a/app/javascript/flavours/glitch/components/hashtag.js
+++ b/app/javascript/flavours/glitch/components/hashtag.js
@@ -56,7 +56,6 @@ export const ImmutableHashtag = ({ hashtag }) => (
     href={hashtag.get('url')}
     to={`/tags/${hashtag.get('name')}`}
     people={hashtag.getIn(['history', 0, 'accounts']) * 1 + hashtag.getIn(['history', 1, 'accounts']) * 1}
-    uses={hashtag.getIn(['history', 0, 'uses']) * 1 + hashtag.getIn(['history', 1, 'uses']) * 1}
     history={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()}
   />
 );
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index ee6b1c0a7..70af0f651 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -128,6 +128,7 @@
     align-items: center;
     padding: 15px;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
+    gap: 15px;
 
     &:last-child {
       border-bottom: 0;
@@ -169,8 +170,6 @@
       font-size: 24px;
       font-weight: 500;
       text-align: right;
-      padding-right: 15px;
-      margin-left: 5px;
       color: $secondary-text-color;
       text-decoration: none;
     }
-- 
cgit