Getting-Started column customisation (panel, notice)

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

@@ -14,6 +14,7 @@ import { List as ImmutableList } from 'immutable';
 import { createSelector } from 'reselect';
 import { fetchLists } from 'flavours/glitch/actions/lists';
 import { preferencesLink, profileLink, signOutLink } from 'flavours/glitch/util/backend_links';
+import { fetchPanel, fetchPleromaConfig } from 'mastodon/actions/pleroma';
 
 const messages = defineMessages({
   heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -52,6 +53,8 @@ const makeMapStateToProps = () => {
     columns: state.getIn(['settings', 'columns']),
     unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
     unreadNotifications: state.getIn(['notifications', 'unread']),
+    customPanelEnabled: state.getIn(['custom_panel', 'enabled']),
+    customPanel: state.getIn(['custom_panel', 'panel']),
   });
 
   return mapStateToProps;
@@ -61,6 +64,8 @@ const mapDispatchToProps = dispatch => ({
   fetchFollowRequests: () => dispatch(fetchFollowRequests()),
   fetchLists: () => dispatch(fetchLists()),
   openSettings: () => dispatch(openModal('SETTINGS', {})),
+  fetchPanel: () => dispatch(fetchPanel()),
+  fetchPleromaConfig: () => dispatch(fetchPleromaConfig()),
 });
 
 const badgeDisplay = (number, limit) => {
@@ -88,6 +93,10 @@ export default class GettingStarted extends ImmutablePureComponent {
     lists: ImmutablePropTypes.list,
     fetchLists: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
+    fetchPanel: PropTypes.func.isRequired,
+    fetchPleromaConfig: PropTypes.func.isRequired,
+    customPanelEnabled: PropTypes.bool,
+    customPanel: PropTypes.string.isRequired,
   };
 
   componentWillMount () {
@@ -95,15 +104,18 @@ export default class GettingStarted extends ImmutablePureComponent {
   }
 
   componentDidMount () {
-    const { myAccount, fetchFollowRequests } = this.props;
+    const { myAccount, fetchFollowRequests, fetchPleromaConfig, fetchPanel } = this.props;
 
     if (myAccount.get('locked')) {
       fetchFollowRequests();
     }
+
+    fetchPleromaConfig();
+    fetchPanel();
   }
 
   render () {
-    const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props;
+    const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings, customPanelEnabled, customPanel } = this.props;
 
     const navItems = [];
     let listItems = [];
@@ -149,10 +161,11 @@ export default class GettingStarted extends ImmutablePureComponent {
       </div>,
     ]);
 
+    const instance_panel = (customPanelEnabled ? <div className='getting-started getting-started__panel scrollable' dangerouslySetInnerHTML={{__html: customPanel}} /> : null);
+
     return (
       <Column name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile>
-        <div className='scrollable optionally-scrollable'>
-          <div className='getting-started__wrapper'>
+        <div className='getting-started__wrapper scrollable'>
           <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />
           {navItems}
           <ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
@@ -163,26 +176,22 @@ export default class GettingStarted extends ImmutablePureComponent {
           <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href={signOutLink} method='delete' />
         </div>
 
-          <div className='getting-started__footer'>
-            <ul>
-              {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>}
-              <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></a> · </li>
-              <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li>
-              <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
-              <li><a href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a></li>
-            </ul>
+        {instance_panel}
 
+        <div className='getting-started__footer scrollable'>
           <p>
             <FormattedMessage
-                id='getting_started.open_source_notice'
-                defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
+              id='getting_started.mastofe_notice'
+              defaultMessage='Mastofe is a libre distribution of the frontend from {glitchsoc}, a friendly fork of {mastodon}. You can contribute or report issues at {mastofe}.'
               values={{
-                  github: <span><a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc/mastodon</a> (v{version})</span>,
-                  Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a> }}
+                mastofe: <a href='https://git.pleroma.social/pleroma/mastofe' rel='noopener' target='_blank'>Mastofe</a>,
+                glitchsoc: <a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc</a>,
+                mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a>,
+                pleroma: <a href='https://pleroma.social' rel='noopener' target='_blank'>Pleroma</a>
+              }}
             />
           </p>
         </div>
-        </div>
       </Column>
     );
   }

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

@@ -8,6 +8,7 @@ import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
 import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
 import { openModal } from 'flavours/glitch/actions/modal';
 import { connect } from 'react-redux';
+import { switchFlavour } from 'mastodon/actions/pleroma';
 
 const messages = defineMessages({
   heading: { id: 'column.heading', defaultMessage: 'Misc' },
@@ -22,6 +23,7 @@ const messages = defineMessages({
   info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' },
   keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
   featured_users: { id: 'navigation_bar.featured_users', defaultMessage: 'Featured users' },
+  switch_to_vanilla: { id: 'navigation_bar.switch_to_vanilla', defaultMessage: 'Switch to Vanilla Flavour' },
 });
 
 @connect()
@@ -31,6 +33,7 @@ export default class gettingStartedMisc extends ImmutablePureComponent {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired,
+    switchFlavour: PropTypes.func.isRequired,
   };
 
   openOnboardingModal = (e) => {
@@ -41,6 +44,10 @@ export default class gettingStartedMisc extends ImmutablePureComponent {
     this.props.dispatch(openModal('PINNED_ACCOUNTS_EDITOR'));
   }
 
+  switch_flavour_vanilla = (e) => {
+    this.props.dispatch(switchFlavour('vanilla'));
+  }
+
   render () {
     const { intl } = this.props;
 
@@ -61,6 +68,7 @@ export default class gettingStartedMisc extends ImmutablePureComponent {
           <ColumnLink key='{i++}' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
           <ColumnLink key='{i++}' icon='book' text={intl.formatMessage(messages.info)} href='/about/more' />
           <ColumnLink key='{i++}' icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />
+          <ColumnLink key='{i++}' icon='exchange' text={intl.formatMessage(messages.switch_to_vanilla)} onClick={this.switch_flavour_vanilla} />
         </div>
       </Column>
     );

app/javascript/flavours/glitch/reducers/index.js

@@ -32,6 +32,7 @@ import suggestions from './suggestions';
 import pinnedAccountsEditor from './pinned_accounts_editor';
 import polls from './polls';
 import identity_proofs from './identity_proofs';
+import custom_panel from './pleroma';
 
 const reducers = {
   dropdown_menu,
@@ -67,6 +68,7 @@ const reducers = {
   suggestions,
   pinnedAccountsEditor,
   polls,
+  custom_panel,
 };
 
 export default combineReducers(reducers);

app/javascript/flavours/glitch/reducers/pleroma.js

@@ -0,0 +1,18 @@
+import { Map as ImmutableMap } from 'immutable';
+import { PANEL_FETCH_SUCCESS, PLEROMA_CONFIG_FETCH_SUCCESS } from 'mastodon/actions/pleroma';
+
+const initialPanel = ImmutableMap({
+  enabled: false,
+  panel: ''
+});
+
+export default function custom_panel(state = initialPanel, action) {
+  switch (action.type) {
+  case PANEL_FETCH_SUCCESS:
+    return state.set('panel', action.panel); break;
+  case PLEROMA_CONFIG_FETCH_SUCCESS:
+    return state.set('enabled', (action.config || {}).showInstanceSpecificPanel);
+  }
+
+  return state;
+};

app/javascript/flavours/glitch/styles/components/index.scss

@@ -757,10 +757,15 @@
     color: $dark-text-color;
   }
 
+  &__panel {
+    height: min-content;
+  }
+
+  &__panel,
   &__footer {
-    flex: 0 0 auto;
     padding: 10px;
     padding-top: 20px;
+    flex: 0 1 auto;
 
     ul {
       margin-bottom: 10px;
@@ -773,7 +778,6 @@
     p {
       color: $dark-text-color;
       font-size: 13px;
-      margin-bottom: 20px;
 
       a {
         color: $dark-text-color;

app/javascript/mastodon/actions/pleroma.js

@@ -0,0 +1,112 @@
+import api from '../api';
+
+export const FLAVOUR_SWITCH_REQUEST = 'FLAVOUR_SWITCH_REQUEST';
+export const FLAVOUR_SWITCH_SUCCESS = 'FLAVOUR_SWITCH_SUCCESS';
+export const FLAVOUR_SWITCH_FAIL = 'FLAVOUR_SWITCH_FAIL';
+export const PANEL_FETCH_REQUEST = 'PANEL_FETCH_REQUEST';
+export const PANEL_FETCH_SUCCESS = 'PANEL_FETCH_SUCCESS';
+export const PANEL_FETCH_FAIL = 'PANEL_FETCH_FAIL';
+export const PLEROMA_CONFIG_FETCH_REQUEST = 'PLEROMA_CONFIG_FETCH_REQUEST';
+export const PLEROMA_CONFIG_FETCH_SUCCESS = 'PLEROMA_CONFIG_FETCH_SUCCESS';
+export const PLEROMA_CONFIG_FETCH_FAIL = 'PLEROMA_CONFIG_FETCH_FAIL';
+
+export function switchFlavour(flavour) {
+  return (dispatch, getState) => {
+    dispatch(switchFlavourRequest());
+    if(flavour === undefined) {
+      flavour = 'glitch';
+    }
+
+    api(getState).post('/api/v1/pleroma/flavour/'+flavour).then(response => {
+      dispatch(switchFlavourSuccess(response.data));
+      location.href = '/web/getting-started';
+    }).catch(error => {
+      dispatch(switchFlavourFail(error));
+    });
+  };
+};
+
+export function fetchPanel() {
+  return (dispatch, getState) => {
+    dispatch(fetchPanelRequest());
+
+    api(getState).get('/instance/panel.html').then(response => {
+      dispatch(fetchPanelSuccess(response.data));
+    }).catch(error => {
+      dispatch(fetchPanelFail(error));
+    });
+  };
+};
+
+export function fetchPleromaConfig() {
+  return (dispatch, getState) => {
+    dispatch(fetchPleromaConfigRequest());
+
+    api(getState).get('/api/pleroma/frontend_configurations').then(response => {
+      dispatch(fetchPleromaConfigSuccess(response.data.masto_fe));
+    }).catch(error => {
+      dispatch(fetchPleromaConfigFail(error));
+    });
+  };
+};
+
+export function switchFlavourRequest() {
+  return {
+    type: FLAVOUR_SWITCH_REQUEST,
+  };
+};
+
+export function switchFlavourSuccess(tos) {
+  return {
+    type: FLAVOUR_SWITCH_SUCCESS,
+    tos,
+  };
+};
+
+export function switchFlavourFail(error) {
+  return {
+    type: FLAVOUR_SWITCH_FAIL,
+    error,
+  };
+};
+
+
+export function fetchPanelRequest() {
+  return {
+    type: PANEL_FETCH_REQUEST,
+  };
+};
+
+export function fetchPanelSuccess(panel) {
+  return {
+    type: PANEL_FETCH_SUCCESS,
+    panel,
+  };
+};
+
+export function fetchPanelFail(error) {
+  return {
+    type: PANEL_FETCH_FAIL,
+    error,
+  };
+};
+
+export function fetchPleromaConfigRequest() {
+  return {
+    type: PLEROMA_CONFIG_FETCH_REQUEST,
+  };
+};
+
+export function fetchPleromaConfigSuccess(config) {
+  return {
+    type: PLEROMA_CONFIG_FETCH_SUCCESS,
+    config,
+  };
+};
+
+export function fetchPleromaConfigFail(error) {
+  return {
+    type: PLEROMA_CONFIG_FETCH_FAIL,
+    error,
+  };
+};

app/javascript/mastodon/features/getting_started/index.js

@@ -7,8 +7,9 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me, invitesEnabled, version, profile_directory, repository, source_url } from '../../initial_state';
+import { me, invitesEnabled, profile_directory, repository, source_url } from '../../initial_state';
 import { fetchFollowRequests } from '../../actions/accounts';
+import { fetchPanel, fetchPleromaConfig, switchFlavour } from 'mastodon/actions/pleroma';
 import { List as ImmutableList } from 'immutable';
 import { Link } from 'react-router-dom';
 import NavigationBar from '../compose/components/navigation_bar';
@@ -34,15 +35,21 @@ const messages = defineMessages({
   security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
   menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
   profile_directory: { id: 'getting_started.directory', defaultMessage: 'Profile directory' },
+  switch_to_glitch: { id: 'navigation_bar.switch_to_glitch', defaultMessage: 'Switch to Glitch Flavour' },
 });
 
 const mapStateToProps = state => ({
   myAccount: state.getIn(['accounts', me]),
   unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
+  customPanelEnabled: state.getIn(['custom_panel', 'enabled']),
+  customPanel: state.getIn(['custom_panel', 'panel']),
 });
 
 const mapDispatchToProps = dispatch => ({
   fetchFollowRequests: () => dispatch(fetchFollowRequests()),
+  fetchPanel: () => dispatch(fetchPanel()),
+  fetchPleromaConfig: () => dispatch(fetchPleromaConfig()),
+  switchFlavour: () => dispatch(switchFlavour()),
 });
 
 const badgeDisplay = (number, limit) => {
@@ -65,20 +72,32 @@ class GettingStarted extends ImmutablePureComponent {
     columns: ImmutablePropTypes.list,
     multiColumn: PropTypes.bool,
     fetchFollowRequests: PropTypes.func.isRequired,
+    fetchPanel: PropTypes.func.isRequired,
+    fetchPleromaConfig: PropTypes.func.isRequired,
+    switchFlavour: PropTypes.func.isRequired,
     unreadFollowRequests: PropTypes.number,
     unreadNotifications: PropTypes.number,
+    customPanelEnabled: PropTypes.bool,
+    customPanel: PropTypes.string.isRequired,
   };
 
+  switch_flavour_glitch = (e) => {
+    this.props.switchFlavour('glitch');
+  }
+
   componentDidMount () {
-    const { myAccount, fetchFollowRequests } = this.props;
+    const { myAccount, fetchFollowRequests, fetchPleromaConfig, fetchPanel } = this.props;
 
     if (myAccount.get('locked')) {
       fetchFollowRequests();
     }
+
+    fetchPleromaConfig();
+    fetchPanel();
   }
 
   render () {
-    const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props;
+    const { intl, myAccount, multiColumn, unreadFollowRequests, customPanelEnabled, customPanel } = this.props;
 
     const navItems = [];
     let i = 1;
@@ -117,7 +136,8 @@ class GettingStarted extends ImmutablePureComponent {
     navItems.push(
       <ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
       <ColumnLink key={i++} icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
-      <ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
+      <ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />,
+      <a key={i++} href='#' onClick={this.switch_flavour_glitch} className='column-link' tabIndex='0'><i className={`fa fa-fw fa-exchange column-link__icon`} />{intl.formatMessage(messages.switch_to_glitch)}</a>
     );
 
     height += 48*3;
@@ -130,12 +150,14 @@ class GettingStarted extends ImmutablePureComponent {
     if (!multiColumn) {
       navItems.push(
         <ColumnSubheading key={i++} text={intl.formatMessage(messages.settings_subheading)} />,
-        <ColumnLink key={i++} icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
+        <ColumnLink key={i++} icon='gears' text={intl.formatMessage(messages.preferences)} href='/user-settings' />,
       );
 
       height += 34 + 48;
     }
 
+    const instance_panel = (customPanelEnabled ? <div className='getting-started getting-started__panel scrollable' dangerouslySetInnerHTML={{__html: customPanel}} /> : null);
+
     return (
       <Column label={intl.formatMessage(messages.menu)}>
         {multiColumn && <div className='column-header__wrapper'>
@@ -148,31 +170,38 @@ class GettingStarted extends ImmutablePureComponent {
         </div>}
 
         <div className='getting-started'>
-          <div className='getting-started__wrapper' style={{ height }}>
+          <div className='getting-started__wrapper scrollable' style={{ height }}>
             {!multiColumn && <NavigationBar account={myAccount} />}
             {navItems}
           </div>
 
           {!multiColumn && <div className='flex-spacer' />}
 
-          <div className='getting-started__footer'>
+          {instance_panel}
+
+          {!multiColumn && <div className='flex-spacer' />}
+
+          <div className='getting-started__footer scrollable'>
             <ul>
               {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>}
               {multiColumn && <li><Link to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link> · </li>}
-              <li><a href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a> · </li>
-              <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></a> · </li>
-              <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li>
-              <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
-              <li><a href='/settings/applications' target='_blank'><FormattedMessage id='getting_started.developers' defaultMessage='Developers' /></a> · </li>
-              <li><a href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a> · </li>
               <li><a href='/auth/sign_out' data-method='delete'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a></li>
             </ul>
 
             <p>
               <FormattedMessage
-                id='getting_started.open_source_notice'
-                defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
-                values={{ github: <span><a href={source_url} rel='noopener' target='_blank'>{repository}</a> (v{version})</span> }}
+                id='getting_started.mastofe_notice'
+                defaultMessage='Mastofe is a libre distribution of the frontend from {glitchsoc}, a friendly fork of {mastodon}. You can contribute or report issues at {mastofe}.'
+                values={{
+                  mastofe: <a href='https://git.pleroma.social/pleroma/mastofe' rel='noopener' target='_blank'>Mastofe</a>,
+                  glitchsoc: <a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc</a>,
+                  mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a>,
+                  pleroma: <a href='https://pleroma.social' rel='noopener' target='_blank'>Pleroma</a>,
+                }}
+              />
+              <FormattedMessage
+                id='getting_started.vanilla_support_warning'
+                defaultMessage='Please be warned that the vanilla flavour isn’t as supported as the glitch one, expect bugs related to the API'
               />
             </p>
           </div>

app/javascript/mastodon/locales/en.json

@@ -145,6 +145,7 @@
   "getting_started.heading": "Getting started",
   "getting_started.invite": "Invite people",
   "getting_started.open_source_notice": "Mastodon is open source software. You can contribute or report issues on GitHub at {github}.",
+  "getting_started.mastofe_notice": "Mastofe is a libre distribution of the frontend from {glitchsoc}, a friendly fork of {mastodon}. You can contribute or report issues at {mastofe}.",
   "getting_started.security": "Security",
   "getting_started.terms": "Terms of service",
   "hashtag.column_header.tag_mode.all": "and {additional}",

app/javascript/mastodon/locales/fr.json

@@ -141,6 +141,7 @@
   "getting_started.heading": "Pour commencer",
   "getting_started.invite": "Inviter des gens",
   "getting_started.open_source_notice": "Mastodon est un logiciel libre. Vous pouvez contribuer et envoyer vos commentaires et rapports de bogues via {github} sur GitHub.",
+  "getting_started.mastofe_notice": "Mastofe est une distribution libre du frontend {glitchsoc}, un fork amical de {mastodon}. Vous pouvez contribuer ou rapporter des bogues via {mastofe}.",
   "getting_started.security": "Sécurité",
   "getting_started.terms": "Conditions d’utilisation",
   "hashtag.column_header.tag_mode.all": "et {additional}",

app/javascript/mastodon/reducers/index.js

@@ -31,6 +31,7 @@ import conversations from './conversations';
 import suggestions from './suggestions';
 import polls from './polls';
 import identity_proofs from './identity_proofs';
+import custom_panel from './pleroma';
 
 const reducers = {
   dropdown_menu,
@@ -65,6 +66,7 @@ const reducers = {
   conversations,
   suggestions,
   polls,
+  custom_panel,
 };
 
 export default combineReducers(reducers);

app/javascript/mastodon/reducers/pleroma.js

@@ -0,0 +1,18 @@
+import { Map as ImmutableMap } from 'immutable';
+import { PANEL_FETCH_SUCCESS, PLEROMA_CONFIG_FETCH_SUCCESS } from '../actions/pleroma';
+
+const initialPanel = ImmutableMap({
+  enabled: false,
+  panel: '',
+});
+
+export default function custom_panel(state = initialPanel, action) {
+  switch (action.type) {
+  case PANEL_FETCH_SUCCESS:
+    return state.set('panel', action.panel); break;
+  case PLEROMA_CONFIG_FETCH_SUCCESS:
+    return state.set('enabled', (action.config || {}).showInstanceSpecificPanel || false);
+  }
+
+  return state;
+};

app/javascript/styles/mastodon/components.scss

@@ -1821,11 +1821,19 @@ a.account__display-name {
     margin-bottom: 0;
   }
 
-  .getting-started__wrapper,
   .getting-started__trends,
   .search {
     margin-bottom: 10px;
   }
+
+  .getting-started__panel {
+    margin: 10px 0;
+  }
+
+  .column,
+  .drawer {
+    min-width: 330px;
+  }
 }
 
 @media screen and (max-width: 630px) {
@@ -2243,10 +2251,6 @@ a.account__display-name {
   background: $ui-base-color;
 }
 
-.getting-started__wrapper {
-  flex: 0 0 auto;
-}
-
 .flex-spacer {
   flex: 1 1 auto;
 }
@@ -2254,11 +2258,21 @@ a.account__display-name {
 .getting-started {
   color: $dark-text-color;
   overflow: auto;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
 
+  &__wrapper,
+  &__panel,
   &__footer {
-    flex: 0 0 auto;
+    height: min-content;
+  }
+
+  &__panel,
+  &__footer
+  {
     padding: 10px;
     padding-top: 20px;
+    flex-grow: 0;
 
     ul {
       margin-bottom: 10px;
@@ -2269,9 +2283,7 @@ a.account__display-name {
     }
 
     p {
-      color: $dark-text-color;
       font-size: 13px;
-      margin-bottom: 20px;
 
       a {
         color: $dark-text-color;
@@ -2291,6 +2303,12 @@ a.account__display-name {
     }
   }
 
+  &__wrapper,
+  &__footer
+  {
+    color: $dark-text-color;
+  }
+
   &__trends {
     background: $ui-base-color;
     flex: 0 1 auto;