Progress

2020-05-06 19:40:54 -04:00 · 2020-05-06 19:40:54 -04:00 · c1131db577
commit c1131db577
parent 4dfb7c9fd6
30 changed files with 811 additions and 452 deletions
--- a/app/javascript/gabsocial/actions/compose.js
+++ b/app/javascript/gabsocial/actions/compose.js
@ -1,4 +1,5 @@
 import api from '../api';
+import { FormattedMessage } from 'react-intl'
 import { CancelToken, isCancel } from 'axios';
 import throttle from 'lodash.throttle'
 import moment from 'moment-mini'
@ -13,6 +14,7 @@ import { updateTimeline, dequeueTimeline } from './timelines';
 import { defineMessages } from 'react-intl';
 import { openModal, closeModal } from './modal';
 import { me } from '../initial_state';
+import { makeGetStatus } from '../selectors'

 let cancelFetchComposeSuggestionsAccounts;

@ -79,14 +81,88 @@ export const ensureComposeIsVisible = (getState, routerHistory) => {
 };

 export function changeCompose(text, markdown, replyId) {
-  console.log("changeCompose:", text)
-  return {
+  return function (dispatch, getState) {
+    const reduxReplyToId = getState().getIn(['compose', 'in_reply_to'])
+    const existingText = getState().getIn(['compose', 'text']).trim()
+    const isModalOpen = getState().getIn(['modal', 'modalType']) === 'COMPOSE'
+
+    let status
+    if (!!replyId) {
+      status = getState().getIn(['statuses', replyId])
+      status = makeGetStatus()(getState(), {
+        id: status.get('id')
+      })
+    }
+
+    if (!!replyId && replyId !== reduxReplyToId && !isModalOpen) {
+      if (existingText.length === 0 && text.trim().length > 0) {
+        dispatch({
+          type: COMPOSE_REPLY,
+          status: status,
+        })
+        dispatch({
          type: COMPOSE_CHANGE,
          text: text,
          markdown: markdown,
-    replyId: replyId,
-  };
-};
+        })
+      } else if (existingText.length > 0 && text.trim().length > 0) {
+        dispatch(openModal('CONFIRM', {
+          message: <FormattedMessage id='confirmations.reply.message' defaultMessage='Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' />,
+          confirm: <FormattedMessage id='confirmations.reply.confirm' defaultMessage='Reply' />,
+          onConfirm: () => {
+            dispatch({
+              type: COMPOSE_REPLY,
+              status: status,
+            })
+            dispatch({
+              type: COMPOSE_CHANGE,
+              text: text,
+              markdown: markdown,
+            })
+          }
+        }))
+      } else {
+        dispatch({
+          type: COMPOSE_REPLY_CANCEL,
+        })
+      }
+    } else if (!replyId && !!reduxReplyToId && !isModalOpen) {
+      if (existingText.length === 0 && text.trim().length > 0) {
+        dispatch({
+          type: COMPOSE_REPLY_CANCEL,
+        })
+        dispatch({
+          type: COMPOSE_CHANGE,
+          text: text,
+          markdown: markdown,
+        })
+      } else if (existingText.length > 0 && text.trim().length > 0) {
+        dispatch(openModal('CONFIRM', {
+          message: <FormattedMessage id='confirmations.new_compose.message' defaultMessage='Composing now will overwrite the reply you are currently writing. Are you sure you want to proceed?' />,
+          confirm: <FormattedMessage id='confirmations.new_compose.confirm' defaultMessage='Yes' />,
+          onConfirm: () => {
+            dispatch({
+              type: COMPOSE_REPLY_CANCEL,
+            })
+            dispatch({
+              type: COMPOSE_CHANGE,
+              text: text,
+              markdown: markdown,
+            })
+          },
+        }))    
+      } else {
+        //
+      }
+    } else {
+      dispatch({
+        type: COMPOSE_CHANGE,
+        text: text,
+        markdown: markdown,
+      })
+    }
+  }
+}

 export function replyCompose(status, router, showModal) {
  return (dispatch) => {
--- a/app/javascript/gabsocial/assets/block_icon.js
+++ b/app/javascript/gabsocial/assets/block_icon.js
@ -0,0 +1,24 @@
+const BlockIcon = ({
+  className = '',
+  size = '16px',
+  title = '',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d='M 24 0 C 10.800781 0 0 10.800781 0 24 C 0 37.199219 10.800781 48 24 48 C 37.199219 48 48 37.199219 48 24 C 48 10.800781 37.199219 0 24 0 Z M 4.800781 24 C 4.800781 13.441406 13.441406 4.800781 24 4.800781 C 28.320312 4.800781 32.398438 6.238281 35.761719 8.878906 L 8.878906 35.761719 C 6.238281 32.398438 4.800781 28.320312 4.800781 24 Z M 24 43.199219 C 19.679688 43.199219 15.601562 41.761719 12.238281 39.121094 L 39.121094 12.238281 C 41.761719 15.601562 43.199219 19.679688 43.199219 24 C 43.199219 34.558594 34.558594 43.199219 24 43.199219 Z M 24 43.199219' />
+    </g>
+  </svg>
+)
+
+export default BlockIcon
--- a/app/javascript/gabsocial/assets/trash_icon.js
+++ b/app/javascript/gabsocial/assets/trash_icon.js
@ -0,0 +1,26 @@
+const TrashIcon = ({
+  className = '',
+  size = '32px',
+  title = 'Trash',
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={size}
+    height={size}
+    viewBox='0 0 48 48'
+    xmlSpace='preserve'
+    aria-label={title}
+  >
+    <g>
+      <path d='M 16.171875 4.363281 C 16.171875 2.929688 17.289062 1.886719 18.71875 1.886719 L 29.1875 1.886719 C 30.617188 1.886719 31.734375 2.929688 31.734375 4.363281 L 31.734375 7.074219 L 33.617188 7.074219 L 33.617188 4.363281 C 33.617188 1.890625 31.65625 0 29.1875 0 L 18.71875 0 C 16.25 0 14.285156 1.890625 14.285156 4.363281 L 14.285156 7.074219 L 16.171875 7.074219 Z M 16.171875 4.363281' />
+      <path d='M 12.800781 47.976562 L 35.105469 47.976562 C 37.253906 47.976562 38.921875 46.085938 38.921875 43.734375 L 38.921875 14.617188 L 8.980469 14.617188 L 8.980469 43.734375 C 8.980469 46.085938 10.652344 47.976562 12.800781 47.976562 Z M 29.964844 19.121094 C 29.964844 18.597656 30.386719 18.175781 30.90625 18.175781 C 31.429688 18.175781 31.851562 18.597656 31.851562 19.121094 L 31.851562 41.398438 C 31.851562 41.917969 31.429688 42.339844 30.90625 42.339844 C 30.386719 42.339844 29.964844 41.917969 29.964844 41.398438 Z M 23.007812 19.121094 C 23.007812 18.597656 23.433594 18.175781 23.953125 18.175781 C 24.472656 18.175781 24.894531 18.597656 24.894531 19.121094 L 24.894531 41.398438 C 24.894531 41.917969 24.472656 42.339844 23.953125 42.339844 C 23.433594 42.339844 23.007812 41.917969 23.007812 41.398438 Z M 16.054688 19.121094 C 16.054688 18.597656 16.476562 18.175781 16.996094 18.175781 C 17.519531 18.175781 17.941406 18.597656 17.941406 19.121094 L 17.941406 41.398438 C 17.941406 41.917969 17.519531 42.339844 16.996094 42.339844 C 16.476562 42.339844 16.054688 41.917969 16.054688 41.398438 Z M 16.054688 19.121094' />
+      <path d='M 8.015625 12.730469 L 39.890625 12.730469 C 41.191406 12.730469 42.246094 11.675781 42.246094 10.375 C 42.246094 9.070312 41.191406 8.015625 39.890625 8.015625 L 8.015625 8.015625 C 6.714844 8.015625 5.65625 9.070312 5.65625 10.375 C 5.65625 11.675781 6.714844 12.730469 8.015625 12.730469 Z M 8.015625 12.730469' />
+    </g>
+  </svg>
+)
+
+export default TrashIcon
--- 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,11 +218,13 @@ class Comment extends ImmutablePureComponent {
                  title={intl.formatMessage(messages.reply)}
                  onClick={this.handleOnReply}
                />
+                <div ref={this.setMoreNode}>
                  <CommentButton
                    title='···'
                    onClick={this.handleOnOpenStatusOptions}
                  />
                </div>
+              </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) => ({
+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,6 +61,8 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
      >
      
        <div className={[_s.default, _s.pb10].join(' ')}>
+          {
+            /*
            <SettingSwitch
              prefix='home_timeline'
              settings={settings}
@ -84,6 +86,8 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
              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',
  ]

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

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

-    this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
+    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,6 +200,8 @@ 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(' ')}>
+            {
+              !isReduced &&
              <div className={[_s.default, _s.width100PC].join(' ')}>
                <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
                  {!!embed && embed}
@ -215,6 +218,7 @@ export default class Card extends ImmutablePureComponent {
                  }
                </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(' ')}>
--- a/app/javascript/gabsocial/containers/status_container.js
+++ b/app/javascript/gabsocial/containers/status_container.js
@ -9,29 +9,17 @@ import {
  favorite,
  unrepost,
  unfavorite,
-  pin,
-  unpin,
 } from '../actions/interactions';
 import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-  editStatus,
  hideStatus,
  revealStatus,
  fetchComments,
  fetchContext,
 } from '../actions/statuses';
-import { initMuteModal } from '../actions/mutes';
-import { initReport } from '../actions/reports';
 import { openModal } from '../actions/modal';
 import { openPopover } from '../actions/popover';
-import { me, deleteModal } from '../initial_state';
-import {
-  createRemovedAccount,
-  groupRemoveStatus,
-} from '../actions/groups';
-import { makeGetStatus } from '../selectors';
+import { me } from '../initial_state';
+import { makeGetStatus } from '../selectors'
 import Status from '../components/status';

 const getDescendants = (state, status, highlightStatusId) => {
@ -123,6 +111,7 @@ const makeMapStateToProps = () => {
      ancestorStatus,
      descendantsIds,
      isComment,
+      isComposeModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
    }
  }

@ -195,36 +184,6 @@ const mapDispatchToProps = (dispatch) => ({
    }
  },

-  onPin (status) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    if (status.get('pinned')) {
-      dispatch(unpin(status));
-    } else {
-      dispatch(pin(status));
-    }
-  },
-
-  onDelete (status, history) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-    
-    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) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    dispatch(editStatus(status));
-  },
-
  onMention (account, router) {
    if (!me) return dispatch(openModal('UNAUTHORIZED'))

@ -239,35 +198,6 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(openModal('VIDEO', { media, time }));
  },

-  onBlock (status) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    const account = status.get('account')
-    dispatch(openModal('BLOCK_ACCOUNT', {
-      accountId: account.get('id'),
-    }))
-  },
-
-  onReport (status) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    dispatch(initReport(status.get('account'), status));
-  },
-
-  onMute (account) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    dispatch(initMuteModal(account));
-  },
-
-  onMuteConversation (status) {
-    if (status.get('muted')) {
-      dispatch(unmuteStatus(status.get('id')));
-    } else {
-      dispatch(muteStatus(status.get('id')));
-    }
-  },
-
  onToggleHidden (status) {
    if (!me) return dispatch(openModal('UNAUTHORIZED'))

@ -278,18 +208,6 @@ const mapDispatchToProps = (dispatch) => ({
    }
  },

-  onGroupRemoveAccount(groupId, accountId) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    dispatch(createRemovedAccount(groupId, accountId));
-  },
-
-  onGroupRemoveStatus(groupId, statusId) {
-    if (!me) return dispatch(openModal('UNAUTHORIZED'))
-
-    dispatch(groupRemoveStatus(groupId, statusId));
-  },
-
  onFetchComments(statusId) {
    dispatch(fetchComments(statusId))
  },
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@ -14,27 +14,25 @@ import Avatar from '../../../components/avatar'
 import Button from '../../../components/button'
 import CharacterCounter from '../../../components/character_counter'
 import EmojiPickerButton from './emoji_picker_button'
-import GifSelectorButton from './gif_selector_button'
 import PollButton from './poll_button'
 import PollForm from './poll_form'
-import RichTextEditorButton from './rich_text_editor_button'
 import SchedulePostButton from './schedule_post_button'
 import SpoilerButton from './spoiler_button'
 import StatusContainer from '../../../containers/status_container'
 import StatusVisibilityButton from './status_visibility_button'
 import UploadButton from './media_upload_button'
 import UploadForm from './upload_form'
-import GifForm from './gif_form'
 import Input from '../../../components/input'

 const messages = defineMessages({
  placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
  commentPlaceholder: { id: 'compose_form.comment_placeholder', defaultMessage: "Write a comment..." },
  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
-  publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
+  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
+  publishEdit: { id: 'compose_form.publish_edit', defaultMessage: 'Publish Edit' },
  publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}' },
  schedulePost: { id: 'compose_form.schedule_post', defaultMessage: 'Schedule Post' },
-});
+})

 export default
@injectIntl
@ -278,14 +276,16 @@ class ComposeForm extends ImmutablePureComponent {
    })

    return (
-      <div className={parentContainerClasses}>
-        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+      <div className={[_s.default, _s.width100PC].join(' ')}>
        {
          shouldCondense &&
+          <div className={parentContainerClasses}>
+            <div className={[_s.default, _s.width100PC].join(' ')}>
+
+              <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
                <div className={[_s.default, _s.mr10, _s.mt5].join(' ')}>
                  <Avatar account={account} size={28} noHover />
                </div>
-          }

                <div
                  className={childContainerClasses}
@ -293,8 +293,73 @@ class ComposeForm extends ImmutablePureComponent {
                  onClick={this.handleClick}
                >

+                  <AutosuggestTextbox
+                    ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
+                    placeholder={intl.formatMessage(messages.commentPlaceholder)}
+                    disabled={disabled}
+                    value={this.props.text}
+                    onChange={this.handleChange}
+                    suggestions={this.props.suggestions}
+                    onKeyDown={this.handleKeyDown}
+                    onFocus={this.handleComposeFocus}
+                    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                    onSuggestionSelected={this.onSuggestionSelected}
+                    onPaste={onPaste}
+                    autoFocus={shouldAutoFocus}
+                    small={shouldCondense}
+                    textarea
+                  />
+
+                  <div className={actionsContainerClasses}>
+                    <div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
+
+                      <EmojiPickerButton small={shouldCondense} isMatch={isMatch} />
+
+                      <UploadButton small={shouldCondense} />
+
+                      <div className={commentPublishBtnClasses}>
+                        <Button
+                          isNarrow
+                          onClick={this.handleSubmit}
+                          isDisabled={disabledButton}
+                          className={_s.px10}
+                        >
+                          {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+                        </Button>
+                      </div>
+
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+
              {
-              !!reduxReplyToId && isModalOpen && !shouldCondense &&
+                (isUploading || anyMedia) &&
+                <div className={[_s.default, _s.width100PC, _s.pl35, _s.mt5].join(' ')}>
+                  <UploadForm
+                    replyToId={replyToId}
+                    isModalOpen={isModalOpen}
+                  />
+                </div>
+              }
+            </div>
+          </div>
+        }
+
+        {
+          !shouldCondense &&
+          <div className={parentContainerClasses}>
+            <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+              <div
+                className={childContainerClasses}
+                ref={this.setForm}
+                onClick={this.handleClick}
+              >
+
+                {
+                  !!reduxReplyToId && isModalOpen &&
                  <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
                    <StatusContainer
                      contextType='compose'
@ -321,7 +386,7 @@ class ComposeForm extends ImmutablePureComponent {

                <AutosuggestTextbox
                  ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
-              placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) ? messages.commentPlaceholder : messages.placeholder)}
+                  placeholder={intl.formatMessage((shouldCondense || !!reduxReplyToId) && isMatch ? messages.commentPlaceholder : messages.placeholder)}
                  disabled={disabled}
                  value={this.props.text}
                  onChange={this.handleChange}
@ -340,7 +405,10 @@ class ComposeForm extends ImmutablePureComponent {
                {
                  (isUploading || anyMedia) &&
                  <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
-                <UploadForm replyToId={replyToId} />
+                    <UploadForm
+                      replyToId={replyToId}
+                      isModalOpen={isModalOpen}
+                    />
                  </div>
                }

@ -381,40 +449,21 @@ class ComposeForm extends ImmutablePureComponent {
                    <EmojiPickerButton small={shouldCondense} isMatch={isMatch} />

                    <UploadButton small={shouldCondense} />
-                { /* <GifSelectorButton small={shouldCondense} /> */ }
+                    { /* <GifSelectorButton small={shouldCondense} /> */}

                    {
-                  !edit && !shouldCondense &&
+                      !edit &&
                      <PollButton />
                    }

-                { !shouldCondense && <StatusVisibilityButton /> }
-                { !shouldCondense && <SpoilerButton /> }
-                { !shouldCondense && <SchedulePostButton /> }
-                { /* !shouldCondense && <RichTextEditorButton /> */ }
-
-                {
-                  shouldCondense &&
-                  <div className={commentPublishBtnClasses}>
-                    <Button
-                      isNarrow
-                      onClick={this.handleSubmit}
-                      isDisabled={disabledButton}
-                      className={_s.px10}
-                    >
-                      {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
-                    </Button>
-                  </div>
-                }
+                    <StatusVisibilityButton />
+                    <SpoilerButton />
+                    <SchedulePostButton />
+                    { /* !shouldCondense && <RichTextEditorButton /> */}
                  </div>

-              {
-                !shouldCondense &&
                  <CharacterCounter max={MAX_POST_CHARACTER_COUNT} text={text} />
-              }

-              {
-                !shouldCondense &&
                  <Button
                    isOutline
                    isDisabled={disabledButton}
@ -423,14 +472,15 @@ class ComposeForm extends ImmutablePureComponent {
                    className={[_s.fs15PX, _s.px15].join(' ')}
                    onClick={this.handleSubmit}
                  >
-                  {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+                    {intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.publishEdit : messages.publish)}
                  </Button>
-              }
                </div>

              </div>
            </div>
          </div>
+        }
+      </div>
    )
  }

--- a/app/javascript/gabsocial/features/compose/components/upload_form.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_form.js
@ -15,8 +15,9 @@ export default
 class UploadForm extends ImmutablePureComponent {

  static propTypes = {
-    mediaIds: ImmutablePropTypes.list.isRequired,
+    isModalOpen: PropTypes.bool,
    isUploading: PropTypes.bool,
+    mediaIds: ImmutablePropTypes.list.isRequired,
    uploadProgress: PropTypes.number,
  };

--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
@ -15,12 +15,24 @@ import { me } from '../../../initial_state'
 const mapStateToProps = (state, { replyToId }) => {

  const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
-  let isMatch = !!reduxReplyToId
-  if (!isMatch) isMatch = replyToId ? reduxReplyToId === replyToId : true
+  const isModalOpen = state.getIn(['modal', 'modalType']) === 'COMPOSE'
+  let isMatch;
+
+  if (!!reduxReplyToId && !!replyToId && replyToId === reduxReplyToId) {
+    isMatch = true
+  } else if (!reduxReplyToId && !replyToId) {
+    isMatch = true
+  } else {
+    isMatch = false
+  }
+
+  if (isModalOpen) isMatch = true

  if (!isMatch) {
    return {
      isMatch,
+      isModalOpen,
+      reduxReplyToId,
      edit: null,
      text: '',
      suggestions: ImmutableList(),
@ -35,20 +47,22 @@ const mapStateToProps = (state, { replyToId }) => {
      isUploading: false,
      showSearch: false,
      anyMedia: false,
-      isModalOpen: false,
      quoteOfId: null,
      scheduledAt: null,
      account: state.getIn(['accounts', me]),
      hasPoll: false,
      selectedGifSrc: null,
-      reduxReplyToId
    }
  }

  // console.log("isMatch:", isMatch, reduxReplyToId, replyToId, state.getIn(['compose', 'text']))

+  // console.log("reduxReplyToId:", reduxReplyToId, isModalOpen)
+
  return {
    isMatch,
+    isModalOpen,
+    reduxReplyToId,
    edit: state.getIn(['compose', 'id']) !== null,
    text: state.getIn(['compose', 'text']),
    suggestions: state.getIn(['compose', 'suggestions']),
@ -63,21 +77,17 @@ const mapStateToProps = (state, { replyToId }) => {
    isUploading: state.getIn(['compose', 'is_uploading']),
    showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
    anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
-    isModalOpen: state.getIn(['modal', 'modalType']) === 'COMPOSE',
    quoteOfId: state.getIn(['compose', 'quote_of_id']),
    scheduledAt: state.getIn(['compose', 'scheduled_at']),
    account: state.getIn(['accounts', me]),
    hasPoll: state.getIn(['compose', 'poll']),
    selectedGifSrc: state.getIn(['tenor', 'selectedGif', 'src']),
-    reduxReplyToId,
  }
 }

 const mapDispatchToProps = (dispatch, { reduxReplyToId, replyToId }) => ({

  onChange(text, markdown, newReplyToId) {
-    // : todo :
-    console.log("text:", text, newReplyToId, replyToId, reduxReplyToId)
    dispatch(changeCompose(text, markdown, newReplyToId))
  },

--- a/app/javascript/gabsocial/features/group_timeline.js
+++ b/app/javascript/gabsocial/features/group_timeline.js
@ -91,7 +91,6 @@ class GroupTimeline extends ImmutablePureComponent {
 				timelineId={`group:${id}`}
 				onLoadMore={this.handleLoadMore}
 				group={group}
-				withGroupAdmin={relationships && relationships.get('admin')}
 				emptyMessage={intl.formatMessage(messages.empty)}
 			/>
 		)
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/app/javascript/gabsocial/layouts/layout.js
@ -78,7 +78,7 @@ export default class Layout extends PureComponent {
                    {
                      !!tabs &&
                      <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-                        <div className={[_s.default, _s.mt10, _s.pb15].join(' ')}>
+                        <div className={[_s.default, _s.pb15].join(' ')}>
                          <Pills pills={tabs} />
                        </div>
                      </Responsive>
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@ -72,11 +72,10 @@ class HomePage extends PureComponent {
      <DefaultLayout
        title={intl.formatMessage(messages.home)}
        actions={[
-          // : todo :
-          // {
-          //   icon: 'ellipsis',
-          //   onClick: onOpenHomePageSettingsModal,
-          // },
+          {
+            icon: 'ellipsis',
+            onClick: onOpenHomePageSettingsModal,
+          },
        ]}
        layout={(
          <Fragment>
--- a/app/javascript/gabsocial/reducers/compose.js
+++ b/app/javascript/gabsocial/reducers/compose.js
@ -269,14 +269,8 @@ export default function compose(state = initialState, action) {
      map.set('caretPosition', null);
      map.set('preselectDate', new Date());
      map.set('idempotencyKey', uuid());
-
-      if (action.status.get('spoiler_text').length > 0) {
-        map.set('spoiler', true);
-        map.set('spoiler_text', action.status.get('spoiler_text'));
-      } else {
      map.set('spoiler', false);
      map.set('spoiler_text', '');
-      }
    });
  case COMPOSE_QUOTE:
    return state.withMutations(map => {
@ -287,14 +281,8 @@ export default function compose(state = initialState, action) {
      map.set('caretPosition', null);
      map.set('preselectDate', new Date());
      map.set('idempotencyKey', uuid());
-
-      if (action.status.get('spoiler_text').length > 0) {
-        map.set('spoiler', true);
-        map.set('spoiler_text', action.status.get('spoiler_text'));
-      } else {
      map.set('spoiler', false);
      map.set('spoiler_text', '');
-      }
    });
  case COMPOSE_REPLY_CANCEL:
  case COMPOSE_RESET:
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@ -238,6 +238,7 @@ body {
 }

 .overflowYHidden { overflow-y: hidden; }
+.overflowXScroll { overflow-x: scroll; }

 .textOverflowEllipsis {
  max-width: 100%;
@ -439,6 +440,7 @@ body {
 .height158PX { height: 158px; }
 .height122PX { height: 122px; }
 .height72PX { height: 72px; }
+.height60PX { height: 60px; }
 .height53PX { height: 53px; }
 .height40PX { height: 40px; }
 .height24PX { height: 24px; }
@ -451,6 +453,7 @@ body {

 .maxWidth100PC { max-width: 100%; }
 .maxWidth640PX { max-width: 640px; }
+.maxWidth180PX { max-width: 180px; }
 .maxWidth100PC42PX { max-width: calc(100% - 42px); }

 .width100PC { width: 100%; }
@ -466,6 +469,7 @@ body {
 .width160PX { width: 160px; }
 .width84PX { width: 84px; }
 .width72PX { width: 72px; }
+.width60PX { width: 60px; }
 .width50PX { width: 50px; }
 .width20PX { width: 20px; }
 .width10PX { width: 10px; }
@ -659,6 +663,7 @@ body {
 .pb10 { padding-bottom: 10px; }
 .pb5 { padding-bottom: 5px; }

+.pl35 { padding-left: 35px; }
 .pl25 { padding-left: 25px; }
 .pl15 { padding-left: 15px; }
 .pl10 { padding-left: 10px; }
@ -830,6 +835,14 @@ body {
  color: rgba(255,255,255,0.65);
 }

+.noScrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.noScrollbar {
+  -ms-overflow-style: none;
+}
+
 /**
 * Rich Text Editor
 */