Add boost visibility icon

app/javascript/mastodon/components/status.js

@@ -392,6 +392,15 @@ class Status extends ImmutablePureComponent {
       openMedia: this.handleHotkeyOpenMedia,
     };
 
+    const visibilityIconInfo = {
+      'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
+      'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
+      'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
+      'mutual': { icon: 'exchange', text: intl.formatMessage(messages.mutual_short) },
+      'limited': { icon: 'user-circle', text: intl.formatMessage(messages.limited_short) },
+      'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) },
+    };
+
     if (hidden) {
       return (
         <HotKeys handlers={handlers}>
@@ -427,11 +436,14 @@ class Status extends ImmutablePureComponent {
       );
     } else if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
       const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
+      const visibilityReblogIcon = visibilityIconInfo[status.get('visibility')];
+      const visibilityReblogLink = <Icon id={visibilityReblogIcon.icon} className='status__prepend-icon' title={visibilityReblogIcon.text} />;
 
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend-icon-wrapper'><Icon id='retweet' className='status__prepend-icon' fixedWidth /></div>
           <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} data-group={status.getIn(['account', 'group'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
+          {visibilityReblogLink}
         </div>
       );
 
@@ -537,15 +549,6 @@ class Status extends ImmutablePureComponent {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
 
-    const visibilityIconInfo = {
-      'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
-      'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
-      'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
-      'mutual': { icon: 'exchange', text: intl.formatMessage(messages.mutual_short) },
-      'limited': { icon: 'user-circle', text: intl.formatMessage(messages.limited_short) },
-      'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) },
-    };
-
     const visibilityIcon = visibilityIconInfo[status.get('visibility')];
     const visibilityLink = <Icon id={visibilityIcon.icon} title={visibilityIcon.text} />;
 
@@ -582,7 +585,7 @@ class Status extends ImmutablePureComponent {
                   height={70}
                   cacheWidth={this.props.cacheMediaWidth}
                   deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
-                  />
+                />
               )}
             </Bundle>
           );

app/javascript/styles/mastodon/components.scss

@@ -1274,9 +1274,9 @@
   }
 
   > span {
-    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-right: 4px;
   }
 }
 

app/javascript/styles/mastodon/rtl.scss

@@ -158,6 +158,10 @@ body.rtl {
   .status__prepend {
     margin-left: 0;
     margin-right: 68px;
+
+    > span {
+      margin-left: 4px;
+    }
   }
 
   .status__prepend-icon-wrapper {

app/views/statuses/_status.html.haml

@@ -31,6 +31,7 @@
           %bdi
             %strong.emojify= display_name(status.account, custom_emojify: true)
         = t('stream_entries.reblogged')
+      = visibility_icon status
   - elsif pinned
     .status__prepend
       .status__prepend-icon-wrapper