Add a post visibility icon

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

@@ -253,7 +253,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
     return (
       <div style={outerStyle}>
-        <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
+        <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}>
           <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
             <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />

app/javascript/styles/mastodon/components.scss

@@ -1063,6 +1063,29 @@
       }
     }
   }
+
+  &-unlisted time::after,
+  &-private time::after,
+  &-direct time::after {
+      display: inline-block;
+      text-align: center;
+      width: 14px;
+      height: 14px;
+      font: 14px/1 FontAwesome;
+      margin-left: 4px;
+  }
+
+  &-unlisted time::after {
+      content: "\f09C";
+  }
+
+  &-private time::after {
+      content: "\F023";
+  }
+
+  &-direct time::after {
+      content: "\F0E0";
+  }
 }
 
 .notification-favourite {
@@ -1196,6 +1219,7 @@
 .detailed-status {
   background: lighten($ui-base-color, 4%);
   padding: 14px 10px;
+  position: relative;
 
   &--flex {
     display: flex;
@@ -1209,6 +1233,37 @@
     }
   }
 
+  &-unlisted::before,
+  &-private::before,
+  &-direct::before {
+    display: block;
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    right: 10px;
+    top: 20px;
+    font: 14px/1 FontAwesome;
+    color: #606984;
+  }
+
+  &-unlisted .display-name,
+  &-private .display-name,
+  &-direct .display-name {
+    padding-right: 10px;
+  }
+
+  &-unlisted::before {
+      content: "\f09C";
+  }
+
+  &-private::before {
+      content: "\F023";
+  }
+
+  &-direct::before {
+      content: "\F0E0";
+  }
+
   .status__content {
     font-size: 19px;
     line-height: 24px;