differentiate local-only posts in the web app

3 files changed, 10 insertions, 1 deletions

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 39b03b68d..cd09ab587 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -619,7 +619,7 @@ export default class Status extends ImmutablePureComponent {
       toggleSensitive: this.handleHotkeyToggleSensitive,
     };
 
-    const computedClass = classNames('status', `status-${status.get('visibility')}`, {
+    const computedClass = classNames('status', `status-${status.get('visibility')}`, `status-${status.get('local_only') ? 'local-only' : 'federatable'}`, {
       collapsed: isCollapsed,
       'has-background': isCollapsed && background,
       'status__wrapper-reply': !!status.get('in_reply_to_id'),
diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js
index bba2fac87..72cc456a2 100644
--- a/app/javascript/flavours/glitch/components/status_icons.js
+++ b/app/javascript/flavours/glitch/components/status_icons.js
@@ -70,6 +70,9 @@ export default class StatusIcons extends React.PureComponent {
         {status.get('reject_replies') ? (
           <i className='fa fa-microphone-slash' title='Rejecting replies' aria-hidden='true' />
         ) : null}
+        {status.get('local_only') ? (
+          <i className='fa fa-chain-broken' title='Local-only' aria-hidden='true' />
+        ) : null}
         {!directMessage && <VisibilityIcon visibility={status.get('visibility')} />}
         {collapsible ? (
           <IconButton
diff --git a/app/javascript/flavours/glitch/styles/monsterpit.scss b/app/javascript/flavours/glitch/styles/monsterpit.scss
index 13c0441af..ae66cb4b7 100644
--- a/app/javascript/flavours/glitch/styles/monsterpit.scss
+++ b/app/javascript/flavours/glitch/styles/monsterpit.scss
@@ -1,3 +1,9 @@
+.status {
+  &.status-local-only {
+    background: darken($ui-base-color, 4%);
+  }
+}
+
 .composer--reply > .content,
 .status__content__text,
 .e-content