Progress

2020-12-15 19:31:30 -05:00
parent de0c977950
commit 75d52c841e
129 changed files with 2559 additions and 910 deletions
--- a/app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
@@ -0,0 +1,135 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import { closePopover } from '../../actions/popover'
+import { changeExpiresAt } from '../../actions/compose'
+import {
+  EXPIRATION_OPTION_5_MINUTES,
+  EXPIRATION_OPTION_60_MINUTES,
+  EXPIRATION_OPTION_6_HOURS,
+  EXPIRATION_OPTION_24_HOURS,
+  EXPIRATION_OPTION_3_DAYS,
+  EXPIRATION_OPTION_7_DAYS,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+class ChatConversationExpirationOptionsPopover extends React.PureComponent {
+
+  handleOnSetExpiration = (expiresAt) => {
+    this.props.onChangeExpiresAt(expiresAt)
+    this.handleOnClosePopover()
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      expiresAtValue,
+      intl,
+      isXS,
+    } = this.props
+
+    const listItems = [
+      {
+        hideArrow: true,
+        title: 'None',
+        onClick: () => this.handleOnSetStatusExpiration(null),
+        isActive: !expiresAtValue,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.minutes, { number: 5 }),
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_5_MINUTES),
+        isActive: expiresAtValue === EXPIRATION_OPTION_5_MINUTES,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.minutes, { number: 60 }),
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_60_MINUTES),
+        isActive: expiresAtValue === EXPIRATION_OPTION_60_MINUTES,
+      },
+      {
+        hideArrow: true,
+        title: '6 hours',
+        title: intl.formatMessage(messages.hours, { number: 6 }),
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_6_HOURS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_6_HOURS,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.hours, { number: 24 }),
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_24_HOURS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_24_HOURS,
+      },
+      {
+        hideArrow: true,
+        title: '3 days',
+        title: intl.formatMessage(messages.days, { number: 3 }),
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_3_DAYS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_3_DAYS,
+      },
+      {
+        hideArrow: true,
+        title: intl.formatMessage(messages.days, { number: 7 }),
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_7_DAYS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_7_DAYS,
+      },
+    ]
+
+    if (expiresAtValue) {
+      listItems.unshift({
+        hideArrow: true,
+        title: 'Remove expiration',
+        onClick: () => this.handleOnSetStatusExpiration(null),
+      },)
+    }
+
+    return (
+      <PopoverLayout
+        width={210}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>This chats delete after:</Text>
+        <List
+          scrollKey='chat_conversation_expiration'
+          items={listItems}
+          size={isXS ? 'large' : 'small'}
+        />
+      </PopoverLayout>
+    )
+  }
+
+}
+
+const messages = defineMessages({
+  minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
+  hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' },
+  days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' },
+})
+
+const mapStateToProps = (state) => ({
+  expiresAtValue: state.getIn(['compose', 'expires_at']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onChangeExpiresAt(expiresAt)  {
+    dispatch(changeExpiresAt(expiresAt))
+  },
+  onClosePopover() {
+    dispatch(closePopover())
+  },
+})
+
+ChatConversationExpirationOptionsPopover.defaultProps = {
+  expiresAtValue: PropTypes.string.isRequired,
+  intl: PropTypes.object.isRequired,
+  isXS: PropTypes.bool,
+  onChangeExpiresAt: PropTypes.func.isRequired,
+}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ChatConversationExpirationOptionsPopover))
--- a/app/javascript/gabsocial/components/popover/chat_conversation_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_conversation_options_popover.js
@@ -5,14 +5,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { connect } from 'react-redux'
 import { closePopover } from '../../actions/popover'
 import { openModal } from '../../actions/modal'
-import {
-  isChatMessengerBlocked,
-  isChatMessengerMuted,
-  blockChatMessenger,
-  unblockChatMessenger,
-  muteChatMessenger,
-  unmuteChatMessenger,
-} from '../../actions/chat_conversation_accounts'
+import { hideChatConversation } from '../../actions/chat_conversations'
+import { purgeChatMessages } from '../../actions/chat_messages'
 import { MODAL_PRO_UPGRADE } from '../../constants'
 import { me } from '../../initial_state'
 import { makeGetChatConversation } from '../../selectors'
@@ -27,21 +21,6 @@ class ChatConversationOptionsPopover extends ImmutablePureComponent {
    this.handleOnClosePopover()
  }

-  handleOnBlock = () => {
-    this.props.onBlock()
-    this.handleOnClosePopover()
-  }
-
-  handleOnUnblock = () => {
-    this.props.onUnblock()
-    this.handleOnClosePopover()
-  }
-
-  handleOnMute = () => {
-    this.props.onMute()
-    this.handleOnClosePopover()
-  }
-
  handleOnUnmute = () => {
    this.props.onUnute()
    this.handleOnClosePopover()
@@ -51,7 +30,7 @@ class ChatConversationOptionsPopover extends ImmutablePureComponent {
    if (!this.props.isPro) {
      this.props.openProUpgradeModal()
    } else {
-      this.props.onPurge()
+      this.props.onPurge(this.props.chatConversationId)
    }

    this.handleOnClosePopover()
@@ -68,18 +47,6 @@ class ChatConversationOptionsPopover extends ImmutablePureComponent {
    } = this.props

    const items = [
-      {
-        hideArrow: true,
-        title: 'Block Messenger',
-        subtitle: 'The messenger will not be able to message you.',
-        onClick: () => this.handleOnBlock(),
-      },
-      {
-        hideArrow: true,
-        title: 'Mute Messenger',
-        subtitle: 'You will not be notified of new messsages',
-        onClick: () => this.handleOnMute(),
-      },
      {
        hideArrow: true,
        title: 'Hide Conversation',
@@ -123,6 +90,12 @@ const mapDispatchToProps = (dispatch) => ({
  onSetCommentSortingSetting(type) {
    dispatch(closePopover())
  },
+  onPurge(chatConversationId) {
+    dispatch(purgeChatMessages(chatConversationId))
+  },
+  onHide(chatConversationId) {
+    dispatch(hideChatConversation(chatConversationId))
+  },
  onClosePopover: () => dispatch(closePopover()),
 })

--- a/app/javascript/gabsocial/components/popover/chat_message_delete_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_message_delete_popover.js
@@ -1,58 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { closePopover } from '../../actions/popover'
-import { deleteChatMessage } from '../../actions/chat_messages'
-import PopoverLayout from './popover_layout'
-import Button from '../button'
-import Text from '../text'
-
-class ChatMessageDeletePopover extends React.PureComponent {
-
-  handleOnClick = () => {
-    this.props.onDeleteChatMessage(this.props.chatMessageId)
-  }
-
-  handleOnClosePopover = () => {
-    this.props.onClosePopover()
-  }
-
-  render() {
-    const { isXS } = this.props
-
-    return (
-      <PopoverLayout
-        width={96}
-        isXS={isXS}
-        onClose={this.handleOnClosePopover}
-      >
-        <Button
-          onClick={this.handleOnClick}
-          color='primary'
-          backgroundColor='tertiary'
-          className={[_s.radiusSmall].join(' ')}
-        >
-          <Text align='center' color='inherit'>Remove</Text>
-        </Button>
-      </PopoverLayout>
-    )
-  }
-}
-
-const mapDispatchToProps = (dispatch) => ({
-  onDeleteChatMessage(chatMessageId) {
-    dispatch(deleteChatMessage(chatMessageId))
-    dispatch(closePopover())
-  },
-  onClosePopover() {
-    dispatch(closePopover())
-  },
-})
-
-ChatMessageDeletePopover.propTypes = {
-  isXS: PropTypes.bool,
-  chatMessageId: PropTypes.string.isRequired,
-  onDeleteChatMessage: PropTypes.func.isRequired,
-}
-
-export default connect(null, mapDispatchToProps)(ChatMessageDeletePopover)
--- a/app/javascript/gabsocial/components/popover/chat_message_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_message_options_popover.js
@@ -0,0 +1,139 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { closePopover } from '../../actions/popover'
+import { deleteChatMessage } from '../../actions/chat_messages'
+import {
+  isChatMessengerBlocked,
+  isChatMessengerMuted,
+  blockChatMessenger,
+  unblockChatMessenger,
+  muteChatMessenger,
+  unmuteChatMessenger,
+  reportChatMessage,
+} from '../../actions/chat_conversation_accounts'
+import { makeGetChatMessage } from '../../selectors'
+import { me } from '../../initial_state'
+import PopoverLayout from './popover_layout'
+import Button from '../button'
+import List from '../list'
+import Text from '../text'
+
+class ChatMessageOptionsPopover extends React.PureComponent {
+
+  handleOnDelete = () => {
+    this.props.onDeleteChatMessage(this.props.chatMessageId)
+  }
+
+  handleOnReport = () => {
+    this.props.onReportChatMessage(this.props.chatMessageId)
+  }
+
+  handleOnBlock = () => {
+    if (this.props.isBlocked) {
+      this.props.unblockChatMessenger(this.props.fromAccountId)
+    } else {
+      this.props.blockChatMessenger(this.props.fromAccountId)
+    }
+  }
+  
+  handleOnMute = () => {
+    if (this.props.isMuted) {
+      this.props.unmuteChatMessenger(this.props.fromAccountId)
+    } else {
+      this.props.muteChatMessenger(this.props.fromAccountId)
+    }
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      isXS,
+      isMine,
+      isMuted,
+      isBlocked,
+    } = this.props
+
+    const items = isMine ? [
+      {
+        hideArrow: true,
+        title: 'Delete Message',
+        onClick: () => this.handleOnDelete(),
+      }
+    ] : [
+      {
+        hideArrow: true,
+        title: 'Report Messenger',
+        onClick: () => this.handleOnReport(),
+      },
+      {},
+      {
+        hideArrow: true,
+        title: isBlocked ? 'Unblock Messenger' : 'Block Messenger',
+        subtitle: isBlocked ? '' : 'The messenger will not be able to message you.',
+        onClick: () => this.handleOnBlock(),
+      },
+      {
+        hideArrow: true,
+        title: isMuted ? 'Unmute Messenger' : 'Mute Messenger',
+        subtitle: isMuted ? '' : 'You will not be notified of new messsages',
+        onClick: () => this.handleOnMute(),
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={isMine ? 160 : 200}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List items={items} />
+      </PopoverLayout>
+    )
+  }
+}
+
+const mapStateToProps = (state, { chatMessageId }) => ({
+  isMine: state.getIn(['chat_messages', chatMessageId, 'from_account_id']) === me,
+  fromAccountId: state.getIn(['chat_messages', chatMessageId, 'from_account_id']),
+  isBlocked: state.getIn(['chat_messages', chatMessageId, 'from_account_id']),
+  isMuted: state.getIn(['chat_messages', chatMessageId, 'from_account_id']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onDeleteChatMessage(chatMessageId) {
+    dispatch(deleteChatMessage(chatMessageId))
+    dispatch(closePopover())
+  },
+  onBlock(accountId) {
+    dispatch(blockChatMessenger(accountId))
+  },
+  onUnblock(accountId) {
+    dispatch(unblockChatMessenger(accountId))
+  },
+  onMute(accountId) {
+    dispatch(muteChatMessenger(accountId))
+  },
+  onUnmute(accountId) {
+    dispatch(unmuteChatMessenger(accountId))
+  },
+  onReportChatMessage(chatMessageId) {
+    dispatch(reportChatMessage(chatMessageId))
+  },
+  onClosePopover() {
+    dispatch(closePopover())
+  },
+})
+
+ChatMessageOptionsPopover.propTypes = {
+  isXS: PropTypes.bool,
+  chatMessageId: PropTypes.string.isRequired,
+  isBlocked: PropTypes.bool.isRequired,
+  isMuted: PropTypes.bool.isRequired,
+  onDeleteChatMessage: PropTypes.func.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatMessageOptionsPopover)
--- a/app/javascript/gabsocial/components/popover/compose_post_destination_popover.js
+++ b/app/javascript/gabsocial/components/popover/compose_post_destination_popover.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { closePopover } from '../../actions/popover'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+import Text from '../text'
+
+class ComposePostDesinationPopover extends React.PureComponent {
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      isXS,
+    } = this.props
+
+    // TIMELINE
+    // GROUP - MY GROUPS
+    
+    const items = [
+      {
+        hideArrow: true,
+        title: 'Timeline',
+        onClick: () => this.handleOnDelete(),
+      },
+      {
+        title: 'Group',
+        onClick: () => this.handleOnReport(),
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={180}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>Post to:</Text>
+        <List items={items} />
+      </PopoverLayout>
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({
+  // 
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+ComposePostDesinationPopover.propTypes = {
+  isXS: PropTypes.bool,
+  onClosePopover: PropTypes.func.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposePostDesinationPopover)
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -1,8 +1,9 @@
 import {
  BREAKPOINT_EXTRA_SMALL,
  POPOVER_CHAT_CONVERSATION_OPTIONS,
-  POPOVER_CHAT_MESSAGE_DELETE,
+  POPOVER_CHAT_MESSAGE_OPTIONS,
  POPOVER_COMMENT_SORTING_OPTIONS,
+  POPOVER_COMPOSE_POST_DESTINATION,
  POPOVER_DATE_PICKER,
  POPOVER_EMOJI_PICKER,
  POPOVER_GROUP_LIST_SORT_OPTIONS,
@@ -23,8 +24,9 @@ import {
 } from '../../constants'
 import {
  ChatConversationOptionsPopover,
-  ChatMessageDeletePopover,
+  ChatMessageOptionsPopover,
  CommentSortingOptionsPopover,
+  ComposePostDesinationPopover,
  DatePickerPopover,
  EmojiPickerPopover,
  GroupListSortOptionsPopover,
@@ -59,8 +61,9 @@ const initialState = getWindowDimension()

 const POPOVER_COMPONENTS = {
  [POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
-  [POPOVER_CHAT_MESSAGE_DELETE]: ChatMessageDeletePopover,
+  [POPOVER_CHAT_MESSAGE_OPTIONS]: ChatMessageOptionsPopover,
  [POPOVER_COMMENT_SORTING_OPTIONS]: CommentSortingOptionsPopover,
+  [POPOVER_COMPOSE_POST_DESTINATION]: ComposePostDesinationPopover,
  [POPOVER_DATE_PICKER]: DatePickerPopover,
  [POPOVER_EMOJI_PICKER]: EmojiPickerPopover,
  [POPOVER_GROUP_LIST_SORT_OPTIONS]: GroupListSortOptionsPopover,
--- a/app/javascript/gabsocial/components/popover/status_expiration_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_expiration_options_popover.js
@@ -5,15 +5,16 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { closePopover } from '../../actions/popover'
 import { changeExpiresAt } from '../../actions/compose'
 import {
-  STATUS_EXPIRATION_OPTION_5_MINUTES,
-  STATUS_EXPIRATION_OPTION_60_MINUTES,
-  STATUS_EXPIRATION_OPTION_6_HOURS,
-  STATUS_EXPIRATION_OPTION_24_HOURS,
-  STATUS_EXPIRATION_OPTION_3_DAYS,
-  STATUS_EXPIRATION_OPTION_7_DAYS,
+  EXPIRATION_OPTION_5_MINUTES,
+  EXPIRATION_OPTION_60_MINUTES,
+  EXPIRATION_OPTION_6_HOURS,
+  EXPIRATION_OPTION_24_HOURS,
+  EXPIRATION_OPTION_3_DAYS,
+  EXPIRATION_OPTION_7_DAYS,
 } from '../../constants'
 import PopoverLayout from './popover_layout'
 import List from '../list'
+import Text from '../text'

 class StatusExpirationOptionsPopover extends React.PureComponent {

@@ -34,43 +35,49 @@ class StatusExpirationOptionsPopover extends React.PureComponent {
    } = this.props

    const listItems = [
+      {
+        hideArrow: true,
+        title: 'None',
+        onClick: () => this.handleOnSetStatusExpiration(null),
+        isActive: !expiresAtValue,
+      },
      {
        hideArrow: true,
        title: intl.formatMessage(messages.minutes, { number: 5 }),
-        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_5_MINUTES),
-        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_5_MINUTES,
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_5_MINUTES),
+        isActive: expiresAtValue === EXPIRATION_OPTION_5_MINUTES,
      },
      {
        hideArrow: true,
        title: intl.formatMessage(messages.minutes, { number: 60 }),
-        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_60_MINUTES),
-        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_60_MINUTES,
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_60_MINUTES),
+        isActive: expiresAtValue === EXPIRATION_OPTION_60_MINUTES,
      },
      {
        hideArrow: true,
        title: '6 hours',
        title: intl.formatMessage(messages.hours, { number: 6 }),
-        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_6_HOURS),
-        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_6_HOURS,
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_6_HOURS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_6_HOURS,
      },
      {
        hideArrow: true,
        title: intl.formatMessage(messages.hours, { number: 24 }),
-        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_24_HOURS),
-        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_24_HOURS,
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_24_HOURS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_24_HOURS,
      },
      {
        hideArrow: true,
        title: '3 days',
        title: intl.formatMessage(messages.days, { number: 3 }),
-        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_3_DAYS),
-        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_3_DAYS,
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_3_DAYS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_3_DAYS,
      },
      {
        hideArrow: true,
        title: intl.formatMessage(messages.days, { number: 7 }),
-        onClick: () => this.handleOnSetStatusExpiration(STATUS_EXPIRATION_OPTION_7_DAYS),
-        isActive: expiresAtValue === STATUS_EXPIRATION_OPTION_7_DAYS,
+        onClick: () => this.handleOnSetStatusExpiration(EXPIRATION_OPTION_7_DAYS),
+        isActive: expiresAtValue === EXPIRATION_OPTION_7_DAYS,
      },
    ]

@@ -88,8 +95,9 @@ class StatusExpirationOptionsPopover extends React.PureComponent {
        isXS={isXS}
        onClose={this.handleOnClosePopover}
      >
+        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>This gab deletes after:</Text>
        <List
-          scrollKey='group_list_sort_options'
+          scrollKey='status_expiration'
          items={listItems}
          size={isXS ? 'large' : 'small'}
        />
--- a/app/javascript/gabsocial/components/popover/status_share_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_share_popover.js
@@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
 import { openModal } from '../../actions/modal'
+import { showToast } from '../../actions/toasts'
 import { closePopover } from '../../actions/popover'
 import PopoverLayout from './popover_layout'
 import Button from '../button'
@@ -31,6 +32,7 @@ class StatusSharePopover extends ImmutablePureComponent {
    }

    document.body.removeChild(textarea)
+    this.props.onShowCopyToast()
    this.handleClosePopover()
  }

@@ -157,6 +159,9 @@ const messages = defineMessages({

 const mapDispatchToProps = (dispatch) => ({
  onClosePopover: () => dispatch(closePopover()),
+  onShowCopyToast() {
+    dispatch(showToast())
+  },
 })

 StatusSharePopover.propTypes = {
--- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
@@ -49,6 +49,7 @@ class StatusVisibilityDropdown extends React.PureComponent {
        isXS={isXS}
        onClose={this.handleOnClosePopover}
      >
+        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>Status Visibility:</Text>
        <div className={[_s.d].join(' ')}>
          {
            options.map((option, i) => {