Merge branch 'self-status' into 'develop'

Support 'in review' sensitive content

See merge request soapbox-pub/soapbox-fe!1741

app/soapbox/__fixtures__/pleroma-status.json

@@ -0,0 +1,183 @@
+{
+  "account": {
+    "acct": "alex",
+    "avatar": "https://media.gleasonator.com/6d64aecb17348b23aaff78db4687b9476cb0da1c07cc6a819c2e6ec7144c18b1.png",
+    "avatar_static": "https://media.gleasonator.com/6d64aecb17348b23aaff78db4687b9476cb0da1c07cc6a819c2e6ec7144c18b1.png",
+    "bot": false,
+    "created_at": "2020-01-08T01:25:43.000Z",
+    "display_name": "Alex Gleason",
+    "emojis": [],
+    "fields": [
+      {
+        "name": "Website",
+        "value": "<a href=\"https://alexgleason.me\" rel=\"ugc\">https://alexgleason.me</a>"
+      },
+      {
+        "name": "Soapbox",
+        "value": "<a href=\"https://soapbox.pub\" rel=\"ugc\">https://soapbox.pub</a>"
+      },
+      {
+        "name": "Email",
+        "value": "alex@alexgleason.me"
+      },
+      {
+        "name": "Gender identity",
+        "value": "Soyboy"
+      },
+      {
+        "name": "Donate (PayPal)",
+        "value": "<a href=\"https://paypal.me/gleasonator\" rel=\"ugc\">https://paypal.me/gleasonator</a>"
+      },
+      {
+        "name": "$BTC",
+        "value": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n"
+      },
+      {
+        "name": "$ETH",
+        "value": "0xAc9aB5Fc04Dc1cB1789Af75b523Bd23C70B2D717"
+      },
+      {
+        "name": "$DOGE",
+        "value": "D5zVZs6jrRakaPVGiErkQiHt9sayzm6V5D"
+      },
+      {
+        "name": "$XMR",
+        "value": "45JDCLrjJ4bgVUSbbs2yjy9m5Mf4VLPW8fG7jw9sq5u69rXZZopQogZNeyYkMBnXpkaip4p4QwaaJNhdTotPa9g44DBCzdK"
+      }
+    ],
+    "followers_count": 2465,
+    "following_count": 1581,
+    "fqn": "alex@gleasonator.com",
+    "header": "https://media.gleasonator.com/accounts/headers/000/000/001/original/9d0e4dbf1c9dbc8f.png",
+    "header_static": "https://media.gleasonator.com/accounts/headers/000/000/001/original/9d0e4dbf1c9dbc8f.png",
+    "id": "9v5bmRalQvjOy0ECcC",
+    "last_status_at": "2022-03-10T18:19:50",
+    "locked": false,
+    "note": "I create Fediverse software that empowers people online.<br/><br/>I&#39;m vegan btw<br/><br/>Note: If you have a question for me, please tag me publicly. This gives the opportunity for others to chime in, and bystanders to learn.",
+    "pleroma": {
+      "accepts_chat_messages": true,
+      "also_known_as": [
+        "https://mitra.social/users/alex"
+      ],
+      "ap_id": "https://gleasonator.com/users/alex",
+      "background_image": null,
+      "birthday": "1993-07-03",
+      "favicon": "https://gleasonator.com/favicon.png",
+      "hide_favorites": true,
+      "hide_followers": false,
+      "hide_followers_count": false,
+      "hide_follows": false,
+      "hide_follows_count": false,
+      "is_admin": true,
+      "is_confirmed": true,
+      "is_moderator": false,
+      "is_suggested": true,
+      "relationship": {},
+      "skip_thread_containment": false,
+      "tags": []
+    },
+    "source": {
+      "fields": [
+        {
+          "name": "Website",
+          "value": "https://alexgleason.me"
+        },
+        {
+          "name": "Soapbox",
+          "value": "https://soapbox.pub"
+        },
+        {
+          "name": "Email",
+          "value": "alex@alexgleason.me"
+        },
+        {
+          "name": "Gender identity",
+          "value": "Soyboy"
+        },
+        {
+          "name": "Donate (PayPal)",
+          "value": "https://paypal.me/gleasonator"
+        },
+        {
+          "name": "$BTC",
+          "value": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n"
+        },
+        {
+          "name": "$ETH",
+          "value": "0xAc9aB5Fc04Dc1cB1789Af75b523Bd23C70B2D717"
+        },
+        {
+          "name": "$DOGE",
+          "value": "D5zVZs6jrRakaPVGiErkQiHt9sayzm6V5D"
+        },
+        {
+          "name": "$XMR",
+          "value": "45JDCLrjJ4bgVUSbbs2yjy9m5Mf4VLPW8fG7jw9sq5u69rXZZopQogZNeyYkMBnXpkaip4p4QwaaJNhdTotPa9g44DBCzdK"
+        }
+      ],
+      "note": "I create Fediverse software that empowers people online.\r\n\r\nI'm vegan btw\r\n\r\nNote: If you have a question for me, please tag me publicly. This gives the opportunity for others to chime in, and bystanders to learn.",
+      "pleroma": {
+        "actor_type": "Person",
+        "discoverable": false
+      },
+      "sensitive": false
+    },
+    "statuses_count": 23648,
+    "url": "https://gleasonator.com/users/alex",
+    "username": "alex"
+  },
+  "application": null,
+  "bookmarked": false,
+  "card": null,
+  "content": "<p>Good morning! Hope you have a wonderful day.</p>",
+  "created_at": "2020-03-23T19:33:06.000Z",
+  "emojis": [],
+  "favourited": false,
+  "favourites_count": 49,
+  "id": "103874034845713213",
+  "in_reply_to_account_id": null,
+  "in_reply_to_id": null,
+  "language": null,
+  "media_attachments": [],
+  "mentions": [],
+  "muted": false,
+  "pinned": true,
+  "pleroma": {
+    "content": {
+      "text/plain": "What is tolerance?"
+    },
+    "conversation_id": "3023268",
+    "direct_conversation_id": null,
+    "emoji_reactions": [
+      {
+        "count": 3,
+        "me": false,
+        "name": "❤️"
+      }
+    ],
+    "expires_at": null,
+    "in_reply_to_account_acct": null,
+    "local": true,
+    "parent_visible": false,
+    "pinned_at": "2021-11-23T01:38:44.000Z",
+    "quote": null,
+    "quote_url": null,
+    "quote_visible": false,
+    "spoiler_text": {
+      "text/plain": ""
+    },
+    "thread_muted": false
+  },
+  "poll": null,
+  "reblog": null,
+  "reblogged": false,
+  "reblogs_count": 27,
+  "replies_count": 15,
+  "sensitive": false,
+  "spoiler_text": "",
+  "tags": [],
+  "text": null,
+  "uri": "https://gleasonator.com/users/alex/statuses/103874034847713213",
+  "url": "https://gleasonator.com/notice/103874034847713213",
+  "visibility": "public"
+}

app/soapbox/__fixtures__/truthsocial-status-in-moderation.json

@@ -0,0 +1,85 @@
+{
+  "id": "108046224464672537",
+  "created_at": "2022-03-30T15:40:53.287Z",
+  "in_reply_to_id": null,
+  "in_reply_to_account_id": null,
+  "sensitive": false,
+  "spoiler_text": "",
+  "visibility": "self",
+  "language": null,
+  "uri": "https://truthsocial.com/users/alex/statuses/108046244464677537",
+  "url": "https://truthsocial.com/@alex/108046244464677537",
+  "replies_count": 0,
+  "reblogs_count": 0,
+  "favourites_count": 0,
+  "favourited": false,
+  "reblogged": false,
+  "muted": false,
+  "bookmarked": false,
+  "pinned": false,
+  "content": "<p>A federal agent inspects a 'lumber' truck after smelling alcohol during the prohibition period. Los Angeles, 1926 (during the Prohibition era).</p>",
+  "reblog": null,
+  "application": {
+    "name": "Soapbox FE",
+    "website": "https://soapbox.pub/"
+  },
+  "account": {
+    "id": "107759994408336377",
+    "username": "alex",
+    "acct": "alex",
+    "display_name": "Alex Gleason",
+    "locked": false,
+    "bot": false,
+    "discoverable": null,
+    "group": false,
+    "created_at": "2022-02-08T00:00:00.000Z",
+    "note": "<p>Launching Truth Social</p>",
+    "url": "https://truthsocial.com/@alex",
+    "avatar": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/avatars/107/759/994/408/336/377/original/119cb0dd1fa615b7.png",
+    "avatar_static": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/avatars/107/759/994/408/336/377/original/119cb0dd1fa615b7.png",
+    "header": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/headers/107/759/994/408/336/377/original/31f62b0453ccf554.png",
+    "header_static": "https://static-assets.truthsocial.com/tmtg:prime-truth-social-assets/accounts/headers/107/759/994/408/336/377/original/31f62b0453ccf554.png",
+    "followers_count": 4713,
+    "following_count": 43,
+    "statuses_count": 7,
+    "last_status_at": "2022-03-30",
+    "verified": true,
+    "location": "Texas",
+    "website": "https://soapbox.pub/",
+    "emojis": [],
+    "fields": []
+  },
+  "media_attachments": [
+    {
+      "id": "108635651287436632",
+      "type": "image",
+      "url": "https://static-assets-1.truthsocial.com/tmtg:prime-ts-assets/media_attachments/files/108/635/651/487/436/632/original/7873bda5a7ab45d3.jpeg",
+      "preview_url": "https://static-assets-1.truthsocial.com/tmtg:prime-ts-assets/media_attachments/files/108/635/651/487/436/632/small/7873bda5a7ab45d3.jpeg",
+      "external_video_id": null,
+      "remote_url": null,
+      "preview_remote_url": null,
+      "text_url": "https://truthsocial.com/media/_Kc-2w2Pe7knhYJV-CM",
+      "meta": {
+        "original": {
+          "width": 1080,
+          "height": 841,
+          "size": "1080x841",
+          "aspect": 1.2841854934601664
+        },
+        "small": {
+          "width": 907,
+          "height": 706,
+          "size": "907x706",
+          "aspect": 1.2847025495750708
+        }
+      },
+      "description": null,
+      "blurhash": "UIIY5?4n~q9FIUIUD%WB?bt7M{t7of%MofIU"
+    }
+  ],
+  "mentions": [],
+  "tags": [],
+  "emojis": [],
+  "card": null,
+  "poll": null
+}

app/soapbox/components/status-media.tsx

@@ -144,6 +144,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
             <Component
               media={status.media_attachments}
               sensitive={status.sensitive}
+              inReview={status.visibility === 'self'}
               height={285}
               onOpenMedia={openMedia}
               visible={showMedia}

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent'
+type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent' | 'outline'
 type ButtonSizes = 'sm' | 'md' | 'lg'
 
 type IButtonStyles = {
@@ -27,6 +27,7 @@ const useButtonStyles = ({
     accent: 'border-transparent bg-secondary-500 hover:bg-secondary-300 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
     danger: 'border-transparent bg-danger-600 text-gray-100 hover:bg-danger-500 dark:hover:bg-danger-700 focus:bg-danger-600 dark:focus:bg-danger-600',
     transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
+    outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   };
 
   const sizes = {

app/soapbox/features/test_timeline/index.tsx

@@ -18,11 +18,13 @@ const messages = defineMessages({
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
 const MOCK_STATUSES: any[] = [
+  require('soapbox/__fixtures__/pleroma-status.json'),
   require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
   require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
   require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
   require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
   require('soapbox/__fixtures__/truthsocial-status-with-external-video.json'),
+  require('soapbox/__fixtures__/truthsocial-status-in-moderation.json'),
 ];
 
 const timelineId = 'test';

app/soapbox/locales/en.json

@@ -989,6 +989,10 @@
   "status.embed": "Embed post",
   "status.favourite": "Like",
   "status.filtered": "Filtered",
+  "status.in_review_warning": "Content Under Review",
+  "status.in_review_summary.summary": "This Truth has been sent to Moderation for review and is only visible to you.",
+  "status.in_review_summary.contact": "If you believe this is in error please {link}.",
+  "status.in_review_summary.link": "Contact Support",
   "status.load_more": "Load more",
   "status.media_hidden": "Media hidden",
   "status.mention": "Mention @{name}",

app/soapbox/normalizers/status.ts

@@ -19,7 +19,7 @@ import { normalizePoll } from 'soapbox/normalizers/poll';
 import type { ReducerAccount } from 'soapbox/reducers/accounts';
 import type { Account, Attachment, Card, Emoji, Mention, Poll, EmbeddedEntity } from 'soapbox/types/entities';
 
-export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct';
+export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct' | 'self';
 
 // https://docs.joinmastodon.org/entities/status/
 export const StatusRecord = ImmutableRecord({

app/soapbox/utils/status.ts

@@ -11,7 +11,9 @@ export const defaultMediaVisibility = (status: StatusEntity | undefined | null,
     status = status.reblog;
   }
 
-  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
+  const isSensitive = status.sensitive || status.visibility === 'self';
+
+  return (displayMedia !== 'hide_all' && !isSensitive || displayMedia === 'show_all');
 };
 
 /** Grab the first external link from a status. */