Progress

2020-05-06 19:40:54 -04:00
parent 4dfb7c9fd6
commit c1131db577
30 changed files with 811 additions and 452 deletions
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -58,8 +58,12 @@ const mapDispatchToProps = (dispatch) => ({
      dispatch(favorite(status))
    }
  },
-  onOpenStatusOptions(status) {
-    dispatch(openPopover('STATUS_OPTOINS', { status }))
+  onOpenStatusOptions(targetRef, status) {
+    dispatch(openPopover('STATUS_OPTIONS', {
+      targetRef,
+      status,
+      position: 'top',
+    }))
  },
  onOpenLikes(status) {
    dispatch(openModal('STATUS_LIKES', { status }))
@@ -67,6 +71,11 @@ const mapDispatchToProps = (dispatch) => ({
  onOpenReposts(status) {
    dispatch(openModal('STATUS_REPOSTS', { status }))
  },
+  onOpenStatusRevisionsPopover(status) {
+    dispatch(openModal('STATUS_REVISIONS', {
+      status,
+    }))
+  },
 })

 export default
@@ -87,6 +96,7 @@ class Comment extends ImmutablePureComponent {
    onOpenStatusOptions: PropTypes.func.isRequired,
    onOpenLikes: PropTypes.func.isRequired,
    onOpenReposts: PropTypes.func.isRequired,
+    onOpenStatusRevisionsPopover: PropTypes.func.isRequired,
  }

  updateOnProps = [
@@ -103,6 +113,10 @@ class Comment extends ImmutablePureComponent {
    height: undefined,
  }

+  handleClick = () => {
+    //
+  }
+
  handleOnReply = () => {
    this.props.onReply(this.props.status)
  }
@@ -112,7 +126,11 @@ class Comment extends ImmutablePureComponent {
  }

  handleOnOpenStatusOptions = () => {
-    this.props.onOpenStatusOptions(this.props.status)
+    this.props.onOpenStatusOptions(this.moreNode, this.props.status)
+  }
+
+  setMoreNode = (c) => {
+    this.moreNode = c
  }

  render() {
@@ -150,7 +168,7 @@ class Comment extends ImmutablePureComponent {

    return (
      <div className={[_s.default, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
-        <div className={[_s.default].join(' ')} style={style}>
+        <div className={_s.default} style={style}>

          <div className={[_s.default, _s.flexRow].join(' ')}>
            <NavLink
@@ -166,6 +184,7 @@ class Comment extends ImmutablePureComponent {
                <CommentHeader
                  ancestorAccountId={ancestorAccountId}
                  status={status}
+                  onOpenRevisions={this.props.onOpenStatusRevisionsPopover}
                  onOpenLikes={this.props.onOpenLikes}
                  onOpenReposts={this.props.onOpenReposts}
                />
@@ -199,10 +218,12 @@ class Comment extends ImmutablePureComponent {
                  title={intl.formatMessage(messages.reply)}
                  onClick={this.handleOnReply}
                />
-                <CommentButton
-                  title='···'
-                  onClick={this.handleOnOpenStatusOptions}
-                />
+                <div ref={this.setMoreNode}>
+                  <CommentButton
+                    title='···'
+                    onClick={this.handleOnOpenStatusOptions}
+                  />
+                </div>
              </div>

            </div>
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -14,6 +14,7 @@ const messages = defineMessages({
  edited: { id: 'status.edited', defaultMessage: 'Edited' },
  likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
  repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
+  original: { id: 'original_gabber', defaultMessage: 'Original Gabber' },
 })

 export default
@@ -24,8 +25,9 @@ class CommentHeader extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    ancestorAccountId: PropTypes.string.isRequired,
    status: ImmutablePropTypes.map.isRequired,
-    openLikesList: PropTypes.func.isRequired,
-    openRepostsList: PropTypes.func.isRequired,
+    onOpenLikes: PropTypes.func.isRequired,
+    onOpenReposts: PropTypes.func.isRequired,
+    onOpenRevisions: PropTypes.func.isRequired,
  }

  openLikesList = () => {
@@ -36,6 +38,10 @@ class CommentHeader extends ImmutablePureComponent {
    this.props.onOpenReposts(this.props.status)
  }

+  openRevisions = () => {
+    this.props.onOpenRevisions(this.props.status)
+  }
+
  render() {
    const {
      intl,
@@ -52,27 +58,50 @@ class CommentHeader extends ImmutablePureComponent {
    const isOwner = ancestorAccountId === status.getIn(['account', 'id'])

    return (
-      <div className={[_s.default, _s.alignItemsStart, _s.py2, _s.flexGrow1].join(' ')}>
+      <div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}>

-        <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
          <NavLink
            className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
            to={`/${status.getIn(['account', 'acct'])}`}
            title={status.getIn(['account', 'acct'])}
          >
-            <DisplayName account={status.get('account')} isSmall />
+            <DisplayName
+              account={status.get('account')}
+              isSmall
+              isComment
+            />
          </NavLink>

          {
            isOwner &&
            <div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}>
              <span className={_s.visiblyHidden}>
-                Original Gabber
+                {intl.formatMessage(messages.original)}
              </span>
              <Icon id='mic' size='10px' className={_s.fillBrand} />
            </div>
          }

+          {
+            !!status.get('group') &&
+            <Fragment>
+              <DotTextSeperator />
+              <Button
+                isText
+                underlineOnHover
+                backgroundColor='none'
+                color='tertiary'
+                to={`/groups/${status.getIn(['group', 'id'])}`}
+                className={_s.ml5}
+              >
+                <Text size='extraSmall' color='inherit'>
+                  {status.getIn(['group', 'title'])}
+                </Text>
+              </Button>
+            </Fragment>
+          }
+
          {
            status.get('revised_at') !== null &&
            <Fragment>
@@ -82,7 +111,7 @@ class CommentHeader extends ImmutablePureComponent {
                underlineOnHover
                backgroundColor='none'
                color='tertiary'
-                onClick={this.handleOpenStatusEdits}
+                onClick={this.openRevisions}
                className={_s.ml5}
              >
                <Text size='extraSmall' color='inherit'>
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -32,6 +32,7 @@ class DisplayName extends ImmutablePureComponent {
    noHover: PropTypes.bool,
    noRelationship: PropTypes.bool,
    noUsername: PropTypes.bool,
+    isComment: PropTypes.bool,
  }

  updateOnProps = [
@@ -42,6 +43,7 @@ class DisplayName extends ImmutablePureComponent {
    'noHover',
    'noRelationship',
    'noUsername',
+    'isComment',
  ]

  mouseOverTimeout = null
@@ -77,7 +79,8 @@ class DisplayName extends ImmutablePureComponent {
      noHover,
      noUsername,
      noRelationship,
-      isSmall
+      isSmall,
+      isComment,
    } = this.props

    if (!account) return null
@@ -122,6 +125,7 @@ class DisplayName extends ImmutablePureComponent {

    const iconSize =
      !!isLarge ? '19px' :
+      !!isComment ? '12px' :
      !!isSmall ? '14px' : '15px'

    const domain = account.get('acct').split('@')[1]
@@ -153,7 +157,7 @@ class DisplayName extends ImmutablePureComponent {
        onMouseLeave={noHover ? undefined : this.handleMouseLeave}
        ref={this.setRef}
      >
-        <span className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+        <span className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.maxWidth180PX, _s.maxWidth100PC].join(' ')}>
          <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
            <strong
              className={displayNameClasses}
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button.js
@@ -31,10 +31,11 @@ class FloatingActionButton extends PureComponent {
    return (
      <Button
        onClick={onOpenCompose}
-        className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom50PX, _s.right0].join(' ')}
+        className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom50PX, _s.height60PX, _s.width60PX, _s.right0, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
        title={message}
        aria-label={message}
        icon='pencil'
+        iconSize='20px'
      />
    )
  }
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -6,6 +6,7 @@ import ArrowRightIcon from '../assets/arrow_right_icon'
 import AudioIcon from '../assets/audio_icon'
 import AudioMuteIcon from '../assets/audio_mute_icon'
 import BackIcon from '../assets/back_icon'
+import BlockIcon from '../assets/block_icon'
 import BlockquoteIcon from '../assets/blockquote_icon'
 import BoldIcon from '../assets/bold_icon'
 import CalendarIcon from '../assets/calendar_icon'
@@ -61,6 +62,7 @@ import ShopIcon from '../assets/shop_icon'
 import StrikethroughIcon from '../assets/strikethrough_icon'
 import SubtractIcon from '../assets/subtract_icon'
 import TextSizeIcon from '../assets/text_size_icon'
+import TrashIcon from '../assets/trash_icon'
 import TrendsIcon from '../assets/trends_icon'
 import ULListIcon from '../assets/ul_list_icon'
 import UnderlineIcon from '../assets/underline_icon'
@@ -78,6 +80,7 @@ const ICONS = {
  'audio': AudioIcon,
  'audio-mute': AudioMuteIcon,
  'back': BackIcon,
+  'block': BlockIcon,
  'blockquote': BlockquoteIcon,
  'bold': BoldIcon,
  'calendar': CalendarIcon,
@@ -132,6 +135,7 @@ const ICONS = {
  'strikethrough': StrikethroughIcon,
  'subtract': SubtractIcon,
  'text-size': TextSizeIcon,
+  'trash': TrashIcon,
  'trends': TrendsIcon,
  'ul-list': ULListIcon,
  'underline': UnderlineIcon,
--- a/app/javascript/gabsocial/components/modal/compose_modal.js
+++ b/app/javascript/gabsocial/components/modal/compose_modal.js
@@ -8,11 +8,19 @@ import TimelineComposeBlock from '../timeline_compose_block'
 const messages = defineMessages({
  confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
  title: { id: 'navigation_bar.compose', defaultMessage: 'Compose new gab' },
+  comment: { id: 'navigation_bar.compose_comment', defaultMessage: 'Compose new comment' },
+  edit: { id: 'navigation_bar.edit_gab', defaultMessage: 'Edit' },
 })

-const mapStateToProps = (state) => ({
-  composeText: state.getIn(['compose', 'text']),
-})
+const mapStateToProps = (state) => {
+  const status = state.getIn(['statuses', state.getIn(['compose', 'id'])])
+
+  return {
+    composeText: state.getIn(['compose', 'text']),
+    isEditing: !!status,
+    isComment: !!state.getIn(['compose', 'in_reply_to']),
+  }
+}

 export default
@connect(mapStateToProps)
@@ -24,10 +32,17 @@ class ComposeModal extends ImmutablePureComponent {
    onClose: PropTypes.func.isRequired,
    composeText: PropTypes.string,
    dispatch: PropTypes.func.isRequired,
-  };
+    isEditing: PropTypes.bool,
+    isComment: PropTypes.bool,
+  }

  onClickClose = () => {
-    const { composeText, dispatch, onClose, intl } = this.props;
+    const {
+      composeText,
+      dispatch,
+      onClose,
+      intl,
+    } = this.props

    if (composeText) {
      dispatch(openModal('CONFIRM', {
@@ -36,24 +51,30 @@ class ComposeModal extends ImmutablePureComponent {
        confirm: intl.formatMessage(messages.confirm),
        onConfirm: () => dispatch(cancelReplyCompose()),
        onCancel: () => dispatch(openModal('COMPOSE')),
-      }));
+      }))
    }
    else {
-      onClose('COMPOSE');
+      onClose('COMPOSE')
    }
-  };
+  }

  render() {
-    const { intl } = this.props
+    const {
+      intl,
+      isEditing,
+      isComment,
+    } = this.props
+
+    const title = isEditing ? messages.edit : isComment ? messages.comment : messages.title

    return (
      <ModalLayout
        noPadding
-        title={intl.formatMessage(messages.title)}
+        title={intl.formatMessage(title)}
        onClose={this.onClickClose}
      >
        <TimelineComposeBlock modal />
      </ModalLayout>
-    );
+    )
  }
 }
--- a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
@@ -61,29 +61,33 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
      >
      
        <div className={[_s.default, _s.pb10].join(' ')}>
-          <SettingSwitch
-            prefix='home_timeline'
-            settings={settings}
-            settingPath={['shows', 'polls']}
-            onChange={onChange}
-            label={intl.formatMessage(messages.showPolls)}
-          />
+          {
+            /*
+            <SettingSwitch
+              prefix='home_timeline'
+              settings={settings}
+              settingPath={['shows', 'polls']}
+              onChange={onChange}
+              label={intl.formatMessage(messages.showPolls)}
+            />

-          <SettingSwitch
-            prefix='home_timeline'
-            settings={settings}
-            settingPath={['shows', 'photos']}
-            onChange={onChange}
-            label={intl.formatMessage(messages.showPhotos)}
-          />
+            <SettingSwitch
+              prefix='home_timeline'
+              settings={settings}
+              settingPath={['shows', 'photos']}
+              onChange={onChange}
+              label={intl.formatMessage(messages.showPhotos)}
+            />

-          <SettingSwitch
-            prefix='home_timeline'
-            settings={settings}
-            settingPath={['shows', 'videos']}
-            onChange={onChange}
-            label={intl.formatMessage(messages.showVideos)}
-          />
+            <SettingSwitch
+              prefix='home_timeline'
+              settings={settings}
+              settingPath={['shows', 'videos']}
+              onChange={onChange}
+              label={intl.formatMessage(messages.showVideos)}
+            />
+            */
+          }

          <SettingSwitch
            prefix='home_timeline'
--- a/app/javascript/gabsocial/components/modal/unauthorized_modal.js
+++ b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
@@ -23,23 +23,24 @@ class UnauthorizedModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl } = this.props
+    const { intl, onClose } = this.props

    return (
      <ModalLayout
        title={intl.formatMessage(messages.signup)}
        onClose={onClose}
+        width={400}
      >
        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
-          <Text className={_s.mb15}>
+          <Text className={_s.mb15} align='center'>
            {intl.formatMessage(messages.text)}
          </Text>
-          <Button href='/auth/sign_up' className={[_s.width240PX, _s.mlAuto, _s.mlAuto].join(' ')}>
+          <Button isBlock href='/auth/sign_up' className={[_s.mr15, _s.ml15, _s.mlAuto, _s.mrAuto].join(' ')}>
            {intl.formatMessage(messages.register)}
          </Button>
        </div>
-        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
-          <Text color='secondary'>
+        <div className={[_s.default, _s.px10, _s.py5].join(' ')}>
+          <Text color='secondary' size='small' align='center'>
            {
              intl.formatMessage(messages.login, {
                login: (
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -128,7 +128,7 @@ class NavigationBar extends ImmutablePureComponent {
                    noClasses
                    color='primary'
                    backgroundColor='none'
-                    className={[_s.alignItemsCenter, _s.height53PX, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
+                    className={[_s.height53PX, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
                    icon='arrow-left'
                    iconSize='32px'
                    iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
--- a/app/javascript/gabsocial/components/pills.js
+++ b/app/javascript/gabsocial/components/pills.js
@@ -1,3 +1,4 @@
+import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 import PillItem from './pill_item'

 /**
@@ -14,7 +15,10 @@ export default class Pills extends PureComponent {
    const { pills } = this.props

    return (
-      <div className={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}>
+      <ResponsiveClassesComponent
+        classNames={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
+        classNamesXS={[_s.default, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
+      >
        {
          !!pills &&
          pills.map((tab, i) => (
@@ -27,7 +31,7 @@ export default class Pills extends PureComponent {
            />
          ))
        }
-      </div>
+      </ResponsiveClassesComponent>
    )
  }

--- a/app/javascript/gabsocial/components/popover/popover_base.js
+++ b/app/javascript/gabsocial/components/popover/popover_base.js
@@ -145,7 +145,7 @@ class PopoverBase extends ImmutablePureComponent {
          referenceElement={targetRef}
        >
          {({ ref, style, placement, arrowProps }) => (
-            <div ref={ref} style={style} data-placement={placement} className={[_s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
+            <div ref={ref} style={style} data-placement={placement} className={[_s.z4, _s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
              <div ref={arrowProps.ref} style={arrowProps.style} />
              <div ref={this.setRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
                {children}
--- a/app/javascript/gabsocial/components/popover/status_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_options_popover.js
@@ -1,7 +1,28 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { defineMessages, injectIntl } from 'react-intl'
-import { me, isStaff } from '../../initial_state'
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'
+import { me, isStaff, boostModal, deleteModal } from '../../initial_state'
+import {
+  repost,
+  unrepost,
+  pin,
+  unpin,
+} from '../../actions/interactions';
+import {
+  muteStatus,
+  unmuteStatus,
+  deleteStatus,
+  editStatus,
+} from '../../actions/statuses';
+import {
+  fetchGroupRelationships,
+  createRemovedAccount,
+  groupRemoveStatus,
+} from '../../actions/groups'
+import { initMuteModal } from '../../actions/mutes'
+import { initReport } from '../../actions/reports'
+import { openModal } from '../../actions/modal'
+import { closePopover } from '../../actions/popover'
 import PopoverLayout from './popover_layout'
 import List from '../list'

@@ -16,7 +37,7 @@ const messages = defineMessages({
  replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
  repost: { id: 'repost', defaultMessage: 'Repost' },
  quote: { id: 'status.quote', defaultMessage: 'Quote' },
-  repost_private: { id: 'status.repost_private', defaultMessage: 'Repost to original audience' },
+  repost_private: { id: 'status.repost', defaultMessage: 'Repost' },
  cancel_repost_private: { id: 'status.cancel_repost_private', defaultMessage: 'Remove Repost' },
  cannot_repost: { id: 'status.cannot_repost', defaultMessage: 'This post cannot be reposted' },
  cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
@@ -30,14 +51,128 @@ const messages = defineMessages({
  admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
  group_remove_account: { id: 'status.remove_account_from_group', defaultMessage: 'Remove account from group' },
  group_remove_post: { id: 'status.remove_post_from_group', defaultMessage: 'Remove status from group' },
+  repostWithComment: { id: 'repost_with_comment', defaultMessage: 'Repost with comment' },
 })

-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, { status }) => {
+  if (!me) return null

-})
+  const groupId = status ? status.getIn(['group', 'id']) : undefined
+  const groupRelationships = state.getIn(['group_relationships', groupId])
+
+  return {
+    groupId,
+    groupRelationships,
+  }
+}

 const mapDispatchToProps = (dispatch) => ({

+  onMuteConversation(status) {
+    dispatch(closePopover())
+
+    if (status.get('muted')) {
+      dispatch(unmuteStatus(status.get('id')))
+    } else {
+      dispatch(muteStatus(status.get('id')))
+    }
+  },
+
+  onPin(status) {
+    dispatch(closePopover())
+
+    if (status.get('pinned')) {
+      dispatch(unpin(status))
+    } else {
+      dispatch(pin(status))
+    }
+  },
+
+  onQuote(status, router) {
+    dispatch(closePopover())
+
+    dispatch((_, getState) => {
+      const state = getState()
+      if (state.getIn(['compose', 'text']).trim().length !== 0) {
+        dispatch(openModal(MODAL_CONFIRM, {
+          message: intl.formatMessage(messages.quoteMessage),
+          confirm: intl.formatMessage(messages.quoteConfirm),
+          onConfirm: () => dispatch(quoteCompose(status, router)),
+        }))
+      } else {
+        dispatch(quoteCompose(status, router))
+      }
+    })
+  },
+
+  onRepost(status) {
+    dispatch(closePopover())
+    const alreadyReposted = status.get('reblogged')
+
+    if (boostModal && !alreadyReposted) {
+      dispatch(openModal(MODAL_BOOST, {
+        status,
+        onRepost: () => dispatch(repost(status)),
+      }))
+    } else {
+      if (alreadyReposted) {
+        dispatch(unrepost(status))
+      } else {
+        dispatch(repost(status))
+      }
+    }
+  },
+
+  onDelete(status, history) {
+    dispatch(closePopover())
+
+    if (!deleteModal) {
+      dispatch(deleteStatus(status.get('id'), history))
+    } else {
+      dispatch(openModal('CONFIRM', {
+        message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
+        confirm: <FormattedMessage id='confirmations.delete.confirm' defaultMessage='Delete' />,
+        onConfirm: () => dispatch(deleteStatus(status.get('id'), history)),
+      }))
+    }
+  },
+
+  onEdit(status) {
+    dispatch(closePopover())
+    dispatch(editStatus(status))
+  },
+
+  onMute(account) {
+    dispatch(closePopover())
+    dispatch(initMuteModal(account))
+  },
+
+  onBlock(status) {
+    dispatch(closePopover())
+    const account = status.get('account')
+    dispatch(openModal('BLOCK_ACCOUNT', {
+      accountId: account.get('id'),
+    }))
+  },
+
+  onReport(status) {
+    dispatch(closePopover())
+    dispatch(initReport(status.get('account'), status))
+  },
+
+  onGroupRemoveAccount(groupId, accountId) {
+    dispatch(closePopover())
+    dispatch(createRemovedAccount(groupId, accountId))
+  },
+
+  onGroupRemoveStatus(groupId, statusId) {
+    dispatch(closePopover())
+    dispatch(groupRemoveStatus(groupId, statusId))
+  },
+
+  onFetchGroupRelationships(groupId) {
+    dispatch(fetchGroupRelationships([groupId]))
+  }
 })

 export default
@@ -47,184 +182,187 @@ class StatusOptionsPopover extends ImmutablePureComponent {

  static propTypes = {
    status: ImmutablePropTypes.map.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    onOpenUnauthorizedModal: PropTypes.func.isRequired,
-    onOpenStatusSharePopover: PropTypes.func.isRequired,
-    onReply: PropTypes.func,
-    onQuote: PropTypes.func,
-    onFavorite: PropTypes.func,
-    onRepost: PropTypes.func,
-    onDelete: PropTypes.func,
-    onMention: PropTypes.func,
-    onMute: PropTypes.func,
-    onBlock: PropTypes.func,
-    onReport: PropTypes.func,
-    onMuteConversation: PropTypes.func,
-    onPin: PropTypes.func,
+    groupRelationships: ImmutablePropTypes.map,
+    groupId: PropTypes.string,
+    onQuote: PropTypes.func.isRequired,
+    onRepost: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onMute: PropTypes.func.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    onReport: PropTypes.func.isRequired,
+    onMuteConversation: PropTypes.func.isRequired,
+    onPin: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
+    onFetchGroupRelationships: PropTypes.func.isRequired,
  }

  updateOnProps = [
    'status',
-    'account',
+    'groupRelationships',
  ]

-  handleConversationMuteClick = () => {
-    this.props.onMuteConversation(this.props.status);
+  componentDidMount() {
+    if (!this.props.groupRelationships && this.props.groupId) {
+      this.props.onFetchGroupRelationships(this.props.groupId)
+    }
  }
-  
-  handleGroupRemoveAccount = () => {
-    const { status } = this.props;

-    this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
+  handleConversationMuteClick = () => {
+    this.props.onMuteConversation(this.props.status)
+  }
+
+  handleGroupRemoveAccount = () => {
+    const { status } = this.props
+
+    this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']))
  }

  handleGroupRemovePost = () => {
-    const { status } = this.props;
+    const { status } = this.props

-    this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
+    this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'))
  }

  handleReport = () => {
-    this.props.onReport(this.props.status);
+    this.props.onReport(this.props.status)
  }

  handleBlockClick = () => {
-    this.props.onBlock(this.props.status);
+    this.props.onBlock(this.props.status)
  }

  handleMuteClick = () => {
-    this.props.onMute(this.props.status.get('account'));
-  }
-
-  handleMentionClick = () => {
-    this.props.onMention(this.props.status.get('account'), this.context.router.history);
+    this.props.onMute(this.props.status.get('account'))
  }

  handlePinClick = () => {
-    this.props.onPin(this.props.status);
+    this.props.onPin(this.props.status)
  }

  handleDeleteClick = () => {
-    this.props.onDelete(this.props.status, this.context.router.history);
+    this.props.onDelete(this.props.status)
  }

  handleEditClick = () => {
-    this.props.onEdit(this.props.status);
+    this.props.onEdit(this.props.status)
  }

  handleRepostClick = (e) => {
-    if (me) {
-      // this.props.onRepost(this.props.status, e)
-      this.props.onQuote(this.props.status, this.context.router.history)
-    } else {
-      this.props.onOpenUnauthorizedModal()
-    }
+    this.props.onRepost(this.props.status, e)
  }

  render() {
    const {
      status,
      intl,
-      account,
+      groupRelationships,
    } = this.props

    const mutingConversation = status.get('muted')
    const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))
+    const isReply = !!status.get('in_reply_to_id')
+    const withGroupAdmin = !!groupRelationships ? groupRelationships.get('admin') : false
+    console.log("withGroupAdmin:", withGroupAdmin, groupRelationships ? groupRelationships.get('admin') : '')

-    let menu = [];
+    let menu = []

    if (me) {
-      // if (status.getIn(['account', 'id']) === me) {
+      if (status.getIn(['account', 'id']) === me) {
        menu.push({
          icon: 'audio-mute',
          hideArrow: true,
          title: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
          onClick: this.handleConversationMuteClick,
        })
-      // }
+      }

-      // if (status.getIn(['account', 'id']) === me) {
-      //   if (publicStatus) {
+      if (isReply) {
+        menu.push({
+          icon: 'repost',
+          hideArrow: true,
+          title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
+          onClick: this.handleRepostClick,
+        })
+        menu.push({
+          icon: 'pencil',
+          hideArrow: true,
+          title: intl.formatMessage(messages.repostWithComment),
+          onClick: this.handleRepostClick,
+        })
+      }
+
+      if (status.getIn(['account', 'id']) === me) {
+        if (publicStatus) {
          menu.push({
            icon: 'pin',
            hideArrow: true,
            title: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
            onClick: this.handlePinClick,
          })
-        // } else {
-          // if (status.get('visibility') === 'private') {
-            menu.push({
-              icon: 'repost',
-              hideArrow: true,
-              title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
-              onClick: this.handleRepostClick
-            })
-        //   }
-        // }
+        }
+        
        menu.push({
          icon: 'trash',
          hideArrow: true,
          title: intl.formatMessage(messages.delete),
-          action: this.handleDeleteClick
-        });
+          onClick: this.handleDeleteClick,
+        })
        menu.push({
          icon: 'pencil',
          hideArrow: true,
-          title: intl.formatMessage(messages.edit), action:
-          this.handleEditClick
-        });
-      // } else {
+          title: intl.formatMessage(messages.edit),
+          onClick: this.handleEditClick,
+        })
+      } else {
        menu.push({
          icon: 'audio-mute',
          hideArrow: true,
          title: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
-          action: this.handleMuteClick
-        });
+          onClick: this.handleMuteClick,
+        })
        menu.push({
-          icon: 'circle',
+          icon: 'block',
          hideArrow: true,
          title: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
-          action: this.handleBlockClick
-        });
+          onClick: this.handleBlockClick,
+        })
        menu.push({
-          icon: 'circle',
+          icon: 'warning',
          hideArrow: true,
          title: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
-          action: this.handleReport
-        });
+          onClick: this.handleReport,
+        })

-        // : todo :
-        // if (withGroupAdmin) {
+        if (withGroupAdmin) {
          menu.push({
-            icon: 'circle',
+            icon: 'trash',
            hideArrow: true,
            title: intl.formatMessage(messages.group_remove_account),
-            action: this.handleGroupRemoveAccount
-          });
+            onClick: this.handleGroupRemoveAccount,
+          })
          menu.push({
-            icon: 'circle',
+            icon: 'trash',
            hideArrow: true,
            title: intl.formatMessage(messages.group_remove_post),
-            action: this.handleGroupRemovePost
-          });
-        // }
+            onClick: this.handleGroupRemovePost,
+          })
+        }

-        // if (isStaff) {
+        if (isStaff) {
          menu.push({
            title: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
            href: `/admin/accounts/${status.getIn(['account', 'id'])}`
-          });
+          })
          menu.push({
            title: intl.formatMessage(messages.admin_status),
            href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}`
-          });
-        // }
-      // }
+          })
+        }
+      }
    }

    return (
-      <PopoverLayout className={_s.width240PX}>
+      <PopoverLayout>
        <List
          size='large'
          scrollKey='profile_options'
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -95,6 +95,7 @@ class Status extends ImmutablePureComponent {
    commentsLimited: PropTypes.bool,
    onOpenLikes: PropTypes.func.isRequired,
    onOpenReposts: PropTypes.func.isRequired,
+    isComposeModalOpen: PropTypes.bool,
  }

  // Avoid checking props that are functions (and whose equality will always
@@ -136,14 +137,12 @@ class Status extends ImmutablePureComponent {
    if (nextProps.isChild) return null

    if (!nextProps.isHidden && (nextProps.isIntersecting || !nextProps.commentsLimited) && !prevState.loadedComments) {
-      console.log("111111111111111111111111111111111111", nextProps.isHidden, nextProps.isIntersecting)
      return {
        loadedComments: true
      }
    }

    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
-      console.log("2222222222222222222222222222222222222")
      return {
        loadedComments: false, //reset
        showMedia: defaultMediaVisibility(nextProps.status),
@@ -369,6 +368,7 @@ class Status extends ImmutablePureComponent {
      ancestorStatus,
      isComment,
      contextType,
+      isComposeModalOpen,
    } = this.props
    // const { height } = this.state

@@ -423,10 +423,12 @@ class Status extends ImmutablePureComponent {
    })

    const containerClassesXS = cx({
+      default: 1,
      bgPrimary: !isChild,
      boxShadowBlock: !isChild && !compactMode,
+      borderTop1PX: !isChild,
      borderBottom1PX: !isChild && compactMode,
-      borderColorSecondary: !isChild && compactMode,
+      borderColorSecondary: !isChild,
    })

    const innerContainerClasses = cx({
@@ -482,7 +484,10 @@ class Status extends ImmutablePureComponent {
                    isComment={isComment && !isChild}
                  />

-                  <StatusHeader status={status} reduced={isChild} />
+                  <StatusHeader
+                    status={status}
+                    reduced={isChild}
+                  />

                  <div className={_s.default}>
                    <StatusContent
@@ -497,6 +502,7 @@ class Status extends ImmutablePureComponent {

                  <StatusMedia
                    isChild={isChild}
+                    isComposeModalOpen={isComposeModalOpen}
                    status={status}
                    onOpenMedia={this.props.onOpenMedia}
                    cacheWidth={this.props.cacheMediaWidth}
--- a/app/javascript/gabsocial/components/status_card.js
+++ b/app/javascript/gabsocial/components/status_card.js
@@ -54,13 +54,14 @@ const addAutoPlay = html => {
  return html
 }

-export default class Card extends ImmutablePureComponent {
+export default class StatusCard extends ImmutablePureComponent {

  static propTypes = {
    card: ImmutablePropTypes.map,
    onOpenMedia: PropTypes.func.isRequired,
    defaultWidth: PropTypes.number,
    cacheWidth: PropTypes.func,
+    isReduced: PropTypes.bool,
  }

  state = {
@@ -129,7 +130,7 @@ export default class Card extends ImmutablePureComponent {
  }

  render() {
-    const { card } = this.props
+    const { card, isReduced } = this.props
    const { width, embedded } = this.state

    if (card === null) return null
@@ -199,22 +200,25 @@ export default class Card extends ImmutablePureComponent {
      return (
        <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
          <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
-              <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
-                {!!embed && embed}
-                {!embed && thumbnail}
-                {!embed &&
-                  <div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-                    <button
-                      className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
-                      onClick={this.handleEmbedClick}
-                    >
-                      <Icon id={iconVariant} size='22px' className={[_s.fillWhite].join(' ')} />
-                    </button>
-                  </div>
-                }
+            {
+              !isReduced &&
+              <div className={[_s.default, _s.width100PC].join(' ')}>
+                <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
+                  {!!embed && embed}
+                  {!embed && thumbnail}
+                  {!embed &&
+                    <div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+                      <button
+                        className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
+                        onClick={this.handleEmbedClick}
+                      >
+                        <Icon id={iconVariant} size='22px' className={[_s.fillWhite].join(' ')} />
+                      </button>
+                    </div>
+                  }
+                </div>
              </div>
-            </div>
+            }
            {description}
          </div>
        </div>
@@ -245,7 +249,7 @@ export default class Card extends ImmutablePureComponent {
            classNames={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
            classNamesSmall={!cardImg ? undefined : [_s.default, _s.width100PC].join(' ')}
          >
-            {embed}
+            {!isReduced && embed}
            {description}
          </ResponsiveClassesComponent>
        </a>
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -230,6 +230,7 @@ class StatusContent extends ImmutablePureComponent {
        statusContent: 1,
        px15: !isComment,
        outlineNone: 1,
+        mt5: isComment,
      })

      return (
@@ -290,8 +291,10 @@ class StatusContent extends ImmutablePureComponent {

      const statusContentClasses = cx({
        statusContent: 1,
-        height215PX: collapsed,
+        height215PX: collapsed & !isComment,
+        height122PX: collapsed && isComment,
        overflowHidden: collapsed,
+        mt5: isComment,
      })

      return (
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -25,6 +25,8 @@ const makeGetStatusIds = () => createSelector([
    const statusForId = statuses.get(id);
    let showStatus    = true;

+    console.log("columnSettings:", columnSettings)
+
    if (columnSettings.getIn(['shows', 'reblog']) === false) {
      showStatus = showStatus && statusForId.get('reblog') === null;
    }
@@ -91,7 +93,6 @@ class StatusList extends ImmutablePureComponent {
    queuedItemSize: PropTypes.number,
    onDequeueTimeline: PropTypes.func,
    group: ImmutablePropTypes.map,
-    withGroupAdmin: PropTypes.bool,
    onScrollToTop: PropTypes.func,
    onScroll: PropTypes.func,
    promotion: PropTypes.object, // : todo :
@@ -164,7 +165,19 @@ class StatusList extends ImmutablePureComponent {
  }

  render () {
-    const { statusIds, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, promotion, promotedStatus, ...other }  = this.props;
+    const {
+      statusIds,
+      featuredStatusIds,
+      onLoadMore,
+      timelineId,
+      totalQueuedItemsCount,
+      isLoading,
+      isPartial,
+      group,
+      promotion,
+      promotedStatus,
+      ...other
+    }  = this.props

    if (isPartial) {
      return <ColumnIndicator type='loading' />
@@ -185,9 +198,6 @@ class StatusList extends ImmutablePureComponent {
          onMoveUp={this.handleMoveUp}
          onMoveDown={this.handleMoveDown}
          contextType={timelineId}
-          // : todo :
-          // group={group}
-          // withGroupAdmin={withGroupAdmin}
          commentsLimited
        />
      ))
--- a/app/javascript/gabsocial/components/status_media.js
+++ b/app/javascript/gabsocial/components/status_media.js
@@ -22,6 +22,7 @@ export default class StatusMedia extends ImmutablePureComponent {
    visible: PropTypes.bool,
    defaultWidth: PropTypes.number,
    cacheWidth: PropTypes.number,
+    isComposeModalOpen: PropTypes.bool,
  }

  // Avoid checking props that are functions (and whose equality will always
@@ -34,6 +35,7 @@ export default class StatusMedia extends ImmutablePureComponent {
    'defaultWidth',
    'visible',
    'width',
+    'isComposeModalOpen',
  ]

  renderLoadingMedia() {
@@ -52,6 +54,7 @@ export default class StatusMedia extends ImmutablePureComponent {
      visible,
      defaultWidth,
      cacheWidth,
+      isComposeModalOpen,
    } = this.props

    if (!status) return null
@@ -113,6 +116,7 @@ export default class StatusMedia extends ImmutablePureComponent {
          cacheWidth={cacheWidth}
          defaultWidth={defaultWidth}
          isComment={isComment}
+          isReduced={isComposeModalOpen}
        />
      )
    }
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -42,6 +42,7 @@ class TimelineComposeBlock extends ImmutablePureComponent {
    } = this.props

    if (modal) {
+      console.log("modal timeline composer: ", this.props)
      return (
        <section className={_s.default}>
          <div className={[_s.default, _s.flexRow].join(' ')}>