6 files changed, 61 insertions(+), 35 deletions(-)

M app/javascript/mastodon/components/account.jsx
M app/javascript/mastodon/components/display_name.tsx
A app/javascript/mastodon/components/empty_account.tsx
M app/javascript/mastodon/features/onboarding/follows.jsx
M app/javascript/mastodon/features/onboarding/index.jsx
M app/javascript/mastodon/features/onboarding/share.jsx

@@ 8,12 8,12 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
 import { RelativeTimestamp } from './relative_timestamp';
-import Skeleton from 'mastodon/components/skeleton';
 import { Link } from 'react-router-dom';
 import { counterRenderer } from 'mastodon/components/common_counter';
 import ShortNumber from 'mastodon/components/short_number';
 import classNames from 'classnames';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { EmptyAccount } from 'mastodon/components/empty_account';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },


@@ 77,20 77,7 @@ class Account extends ImmutablePureComponent {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
-      return (
-        <div className={classNames('account', { 'account--minimal': minimal })}>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
-
-              <div>
-                <DisplayName />
-                <Skeleton width='7ch' />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return <EmptyAccount size={size} minimal={minimal} />;
     }
 
     if (hidden) {

@@ 8,10 8,11 @@ import { autoPlayGif } from '../initial_state';
 import Skeleton from './skeleton';
 
 interface Props {
-  account: Account;
-  others: List<Account>;
-  localDomain: string;
+  account?: Account;
+  others?: List<Account>;
+  localDomain?: string;
 }
+
 export class DisplayName extends React.PureComponent<Props> {
   handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
     currentTarget,


@@ 48,7 49,15 @@ export class DisplayName extends React.PureComponent<Props> {
   render() {
     const { others, localDomain } = this.props;
 
-    let displayName: React.ReactNode, suffix: React.ReactNode, account: Account;
+    let displayName: React.ReactNode,
+      suffix: React.ReactNode,
+      account: Account | undefined;
+
+    if (others && others.size > 0) {
+      account = others.first();
+    } else if (this.props.account) {
+      account = this.props.account;
+    }
 
     if (others && others.size > 1) {
       displayName = others


@@ 66,13 75,7 @@ export class DisplayName extends React.PureComponent<Props> {
       if (others.size - 2 > 0) {
         suffix = `+${others.size - 2}`;
       }
-    } else if ((others && others.size > 0) || this.props.account) {
-      if (others && others.size > 0) {
-        account = others.first();
-      } else {
-        account = this.props.account;
-      }
-
+    } else if (account) {
       let acct = account.get('acct');
 
       if (acct.indexOf('@') === -1 && localDomain) {

@@ 0,0 1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'mastodon/components/display_name';
+import Skeleton from 'mastodon/components/skeleton';
+
+interface Props {
+  size?: number;
+  minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+  size = 46,
+  minimal = false,
+}) => {
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <Skeleton width={size} height={size} />
+          </div>
+
+          <div>
+            <DisplayName />
+            <Skeleton width='7ch' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

@@ 7,7 7,7 @@ import { fetchSuggestions } from 'mastodon/actions/suggestions';
 import { markAsPartial } from 'mastodon/actions/timelines';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Account from 'mastodon/containers/account_container';
-import EmptyAccount from 'mastodon/components/account';
+import { EmptyAccount } from 'mastodon/components/empty_account';
 import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import { makeGetAccount } from 'mastodon/selectors';
 import { me } from 'mastodon/initial_state';


@@ 31,6 31,7 @@ class Follows extends React.PureComponent {
     suggestions: ImmutablePropTypes.list,
     account: ImmutablePropTypes.map,
     isLoading: PropTypes.bool,
+    multiColumn: PropTypes.bool,
   };
 
   componentDidMount () {


@@ 44,7 45,7 @@ class Follows extends React.PureComponent {
   }
 
   render () {
-    const { onBack, isLoading, suggestions, account } = this.props;
+    const { onBack, isLoading, suggestions, account, multiColumn } = this.props;
 
     let loadedContent;
 


@@ 58,7 59,7 @@ class Follows extends React.PureComponent {
 
     return (
       <Column>
-        <ColumnBackButton onClick={onBack} />
+        <ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
 
         <div className='scrollable privacy-policy'>
           <div className='column-title'>


@@ 84,4 85,4 @@ class Follows extends React.PureComponent {
 
 }
 
-export default connect(mapStateToProps)(Follows);>
\ No newline at end of file
+export default connect(mapStateToProps)(Follows);

@@ 40,6 40,7 @@ class Onboarding extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     account: ImmutablePropTypes.map,
+    multiColumn: PropTypes.bool,
   };
 
   state = {


@@ 93,14 94,14 @@ class Onboarding extends ImmutablePureComponent {
   }
 
   render () {
-    const { account } = this.props;
+    const { account, multiColumn } = this.props;
     const { step, shareClicked } = this.state;
 
     switch(step) {
     case 'follows':
-      return <Follows onBack={this.handleBackClick} />;
+      return <Follows onBack={this.handleBackClick} multiColumn={multiColumn} />;
     case 'share':
-      return <Share onBack={this.handleBackClick} />;
+      return <Share onBack={this.handleBackClick} multiColumn={multiColumn} />;
     }
 
     return (

@@ 140,17 140,18 @@ class Share extends React.PureComponent {
   static propTypes = {
     onBack: PropTypes.func,
     account: ImmutablePropTypes.map,
+    multiColumn: PropTypes.bool,
     intl: PropTypes.object,
   };
 
   render () {
-    const { onBack, account, intl } = this.props;
+    const { onBack, account, multiColumn, intl } = this.props;
 
     const url = (new URL(`/@${account.get('username')}`, document.baseURI)).href;
 
     return (
       <Column>
-        <ColumnBackButton onClick={onBack} />
+        <ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
 
         <div className='scrollable privacy-policy'>
           <div className='column-title'>