Add visibility icon to Detailed status

app/javascript/glitch/components/status/header.js

@@ -29,6 +29,7 @@ import Avatar from '../../../mastodon/components/avatar';
 import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
 import DisplayName from '../../../mastodon/components/display_name';
 import IconButton from '../../../mastodon/components/icon_button';
+import VisibilityIcon from './visibility_icon';
 
                             /* * * * */
 
@@ -94,7 +95,7 @@ icons) into a single `<header>` element.
 export default class StatusHeader extends React.PureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
     friend: ImmutablePropTypes.map,
     mediaIcon: PropTypes.string,
     collapsible: PropTypes.bool,
@@ -102,7 +103,6 @@ export default class StatusHeader extends React.PureComponent {
     parseClick: PropTypes.func.isRequired,
     setExpansion: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-    visibility: PropTypes.string,
   };
 
 /*
@@ -135,8 +135,8 @@ status.
 */
 
   handleAccountClick = (e) => {
-    const { account, parseClick } = this.props;
+    const { status, parseClick } = this.props;
-    parseClick(e, `/accounts/${+account.get('id')}`);
+    parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
   }
 
 /*
@@ -150,21 +150,15 @@ has a very straightforward rendering process.
 
   render () {
     const {
-      account,
+      status,
       friend,
       mediaIcon,
       collapsible,
       collapsed,
       intl,
-      visibility,
     } = this.props;
 
-    const visibilityClass = {
+    const account = status.get('account');
-      public: 'globe',
-      unlisted: 'unlock-alt',
-      private: 'lock',
-      direct: 'envelope',
-    }[visibility];
 
     return (
       <header className='status__info'>
@@ -186,11 +180,7 @@ it is rendered as a float.
             />
           ) : null}
           {(
-            <i
+            <VisibilityIcon visibility={status.get('visibility')} />
-              className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
-              title={intl.formatMessage(messages[visibility])}
-              aria-hidden='true'
-            />
           )}
           {collapsible ? (
             <IconButton

app/javascript/glitch/components/status/index.js

@@ -704,10 +704,9 @@ collapsed.
           />
         ) : null}
         <StatusHeader
-          account={status.get('account')}
+          status={status}
           friend={account}
           mediaIcon={mediaIcon}
-          visibility={status.get('visibility')}
           collapsible={settings.getIn(['collapsed', 'enabled'])}
           collapsed={isExpanded === false}
           parseClick={parseClick}

app/javascript/glitch/components/status/visibility_icon.js

@@ -0,0 +1,48 @@
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+const messages = defineMessages({
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+});
+
+@injectIntl
+export default class VisibilityIcon extends ImmutablePureComponent {
+
+  static propTypes = {
+    visibility: PropTypes.string,
+    intl: PropTypes.object.isRequired,
+    withLabel: PropTypes.bool,
+  };
+
+  render() {
+    const { withLabel, visibility, intl } = this.props;
+
+    const visibilityClass = {
+      public: 'globe',
+      unlisted: 'unlock-alt',
+      private: 'lock',
+      direct: 'envelope',
+    }[visibility];
+
+    const label = intl.formatMessage(messages[visibility]);
+
+    const icon = (<i
+      className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
+      title={label}
+      aria-hidden='true'
+    />);
+
+    if (withLabel) {
+      return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
+    } else {
+      return icon;
+    }
+  }
+
+}

app/javascript/mastodon/features/status/components/action_bar.js

@@ -72,8 +72,8 @@ export default class ActionBar extends React.PureComponent {
     }
 
     let reblogIcon = 'retweet';
-    if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
+    //if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
-    else if (status.get('visibility') === 'private') reblogIcon = 'lock';
+    // else if (status.get('visibility') === 'private') reblogIcon = 'lock';
 
     let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
 

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -11,6 +11,7 @@ import Link from 'react-router-dom/Link';
 import { FormattedDate, FormattedNumber } from 'react-intl';
 import CardContainer from '../containers/card_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import VisibilityIcon from '../../../../glitch/components/status/visibility_icon';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -103,7 +104,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             <span className='detailed-status__favorites'>
               <FormattedNumber value={status.get('favourites_count')} />
             </span>
-          </Link>
+          </Link> · <VisibilityIcon visibility={status.get('visibility')} />
         </div>
       </div>
     );

app/javascript/styles/components.scss

@@ -836,11 +836,11 @@
   position: relative;
   float: right;
   color: lighten($ui-base-color, 26%);
-}
 
   .status__visibility-icon {
     padding-left: 6px;
   }
+}
 
 .status-check-box {
   border-bottom: 1px solid $ui-secondary-color;