Progress

2020-04-22 01:00:11 -04:00
parent 4d7aee59c9
commit fed036be08
46 changed files with 883 additions and 1134 deletions
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -92,7 +92,7 @@ class Account extends ImmutablePureComponent {
    onMute: PropTypes.func.isRequired,
    onMuteNotifications: PropTypes.func,
    intl: PropTypes.object.isRequired,
-    hidden: PropTypes.bool,
+    isHidden: PropTypes.bool,
    actionIcon: PropTypes.string,
    actionTitle: PropTypes.string,
    onActionClick: PropTypes.func,
@@ -134,7 +134,7 @@ class Account extends ImmutablePureComponent {
    const {
      account,
      intl,
-      hidden,
+      isHidden,
      onActionClick,
      actionIcon,
      actionTitle,
@@ -146,7 +146,7 @@ class Account extends ImmutablePureComponent {

    if (!account) return null

-    if (hidden) {
+    if (isHidden) {
      return (
        <Fragment>
          {account.get('display_name')}
@@ -207,7 +207,6 @@ class Account extends ImmutablePureComponent {
    const dismissBtn = (
      <Button
        narrow
-        circle
        backgroundColor='none'
        className={_s.px5}
        onClick={dismissAction}
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -52,7 +52,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
    tokenStart: 0,
  }

-  onChange = (e, value, selectionStart) => {
+  onChange = (e, value, selectionStart, markdown) => {
    if (!isObject(e)) {
      e = {
        target: {
@@ -60,8 +60,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
          selectionStart,
        },
      }
-
-      console.log("new e:", e)
    }

    const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
@@ -76,7 +74,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
      this.props.onSuggestionsClearRequested();
    }

-    this.props.onChange(e);
+    this.props.onChange(e, markdown);
  }

  onKeyDown = (e) => {
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -2,8 +2,12 @@ import {
  Editor,
  EditorState,
  CompositeDecorator,
-  RichUtils
+  RichUtils,
+  convertToRaw,
+  convertFromRaw
 } from 'draft-js'
+import { draftToMarkdown } from 'markdown-draft-js'
+// import draftToMarkdown from 'draftjs-to-markdown'
 import { urlRegex } from '../features/compose/util/url_regex'
 import classNames from 'classnames/bind'
 import RichTextEditorBar from './rich_text_editor_bar'
@@ -101,14 +105,34 @@ class Composer extends PureComponent {

  onChange = (editorState) => {
    this.setState({ editorState })
-    const text = editorState.getCurrentContent().getPlainText('\u0001')
+    const content = this.state.editorState.getCurrentContent();
+    const text = content.getPlainText('\u0001')
    
    const selectionState = editorState.getSelection()
    const selectionStart = selectionState.getStartOffset()

-    this.props.onChange(null, text, selectionStart)
+    const rawObject = convertToRaw(content);
+    const markdownString = draftToMarkdown(rawObject);
+    // const markdownString = draftToMarkdown(rawObject, {
+    //   trigger: '#',
+    //   separator: ' ',
+    // });
+
+    console.log("markdownString:", markdownString)
+
+    this.props.onChange(null, text, selectionStart, markdownString)
  }

+// **bold**
+// *italic*
+// __underline__
+// ~strikethrough~
+// # title
+// > quote
+// `code`
+// ```code```
+
+
  focus = () => {
    this.textbox.editor.focus()
  }
--- a/app/javascript/gabsocial/components/intersection_observer_article.js
+++ b/app/javascript/gabsocial/components/intersection_observer_article.js
@@ -135,10 +135,7 @@ class IntersectionObserverArticle extends React.Component {
          data-id={id}
          tabIndex='0'
        >
-          {
-            children &&
-            React.cloneElement(children, { hidden: true })
-          }
+          {React.cloneElement(children, { isHidden: true })}
        </article>
      )
    }
@@ -151,10 +148,7 @@ class IntersectionObserverArticle extends React.Component {
        data-id={id}
        tabIndex='0'
      >
-        {
-          children &&
-          React.cloneElement(children, { hidden: false })
-        }
+        {React.cloneElement(children, { isHidden: false, isIntersecting })}
      </article>
    )
  }
--- a/app/javascript/gabsocial/components/list.js
+++ b/app/javascript/gabsocial/components/list.js
@@ -6,7 +6,10 @@ import ListItem from './list_item'
 export default class List extends ImmutablePureComponent {

  static propTypes = {
-    items: PropTypes.array,
+    items: PropTypes.oneOfType([
+      PropTypes.array,
+      // immutatable...
+    ]),
    scrollKey: PropTypes.string,
    emptyMessage: PropTypes.any,
    size: PropTypes.oneOf([
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -99,9 +99,9 @@ class ModalRoot extends PureComponent {

  componentDidUpdate(prevProps, prevState, { visible }) {
    if (visible) {
-      document.body.classList.add('with-modals--active')
+      document.body.classList.add(_s.overflowYHidden)
    } else {
-      document.body.classList.remove('with-modals--active')
+      document.body.classList.remove(_s.overflowYHidden)
    }
  }

--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/app/javascript/gabsocial/components/panel/panel_layout.js
@@ -10,10 +10,10 @@ export default class PanelLayout extends PureComponent {
    children: PropTypes.node,
    headerButtonTitle: PropTypes.string,
    headerButtonAction: PropTypes.func,
-    headerButtonTo: PropTypes.func,
+    headerButtonTo: PropTypes.string,
    footerButtonTitle: PropTypes.string,
    footerButtonAction: PropTypes.func,
-    footerButtonTo: PropTypes.func,
+    footerButtonTo: PropTypes.string,
    noPadding: PropTypes.bool,
  }

--- a/app/javascript/gabsocial/components/popover/status_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_options_popover.js
@@ -1,6 +1,7 @@
 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 PopoverLayout from './popover_layout'
 import List from '../list'

@@ -22,13 +23,11 @@ const messages = defineMessages({
  cannot_repost: { id: 'status.cannot_repost', defaultMessage: 'This post cannot be reposted' },
  cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
  like: { id: 'status.like', defaultMessage: 'Like' },
-  open: { id: 'status.open', defaultMessage: 'Expand this status' },
  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
-  embed: { id: 'status.embed', defaultMessage: 'Embed' },
  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
  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' },
@@ -40,6 +39,7 @@ export default
 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,
@@ -51,47 +51,83 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    onMute: PropTypes.func,
    onBlock: PropTypes.func,
    onReport: PropTypes.func,
-    onEmbed: PropTypes.func,
    onMuteConversation: PropTypes.func,
    onPin: PropTypes.func,
-    withDismiss: PropTypes.bool,
-    withGroupAdmin: PropTypes.bool,
    intl: PropTypes.object.isRequired,
  }
+
+  updateOnProps = ['status', 'account']
+
+  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;
+
+    this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
+  }
+
+  handleReport = () => {
+    this.props.onReport(this.props.status);
+  }
+
+  handleBlockClick = () => {
+    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);
+  }
+
+  handlePinClick = () => {
+    this.props.onPin(this.props.status);
+  }
+
+  handleDeleteClick = () => {
+    this.props.onDelete(this.props.status, this.context.router.history);
+  }
+
+  handleEditClick = () => {
+    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()
+    }
+  }
+
  getItems = () => {
-    const { status, intl, withDismiss, withGroupAdmin } = this.props
+    const {
+      status,
+      intl,
+      account,
+    } = this.props
+
    const mutingConversation = status.get('muted')
+    const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))

    let menu = [];

-    menu.push({
-      icon: 'circle',
-      hideArrow: true,
-      title: intl.formatMessage(messages.open),
-      onClick: this.handleOpen
-    });
-
-    if (publicStatus) {
-      menu.push({
-        icon: 'circle',
-        hideArrow: true,
-        title: intl.formatMessage(messages.copy),
-        onClick: this.handleCopy,
-      })
-      menu.push({
-        icon: 'circle',
-        hideArrow: true,
-        title: intl.formatMessage(messages.embed),
-        onClick: this.handleEmbed,
-      })
-    }
-
    if (!me) return menu

-    if (status.getIn(['account', 'id']) === me || withDismiss) {
+    if (status.getIn(['account', 'id']) === me) {
      menu.push({
-        icon: 'circle',
+        icon: 'mute',
        hideArrow: true,
        title: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
        onClick: this.handleConversationMuteClick,
@@ -109,27 +145,75 @@ class StatusOptionsPopover extends ImmutablePureComponent {
      } else {
        if (status.get('visibility') === 'private') {
          menu.push({
+            icon: 'circle',
+            hideArrow: true,
            title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
            onClick: this.handleRepostClick
          })
        }
      }
-      menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
-      menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
+      menu.push({
+        icon: 'circle',
+        hideArrow: true,
+        title: intl.formatMessage(messages.delete),
+        action: this.handleDeleteClick
+      });
+      menu.push({
+        icon: 'circle',
+        hideArrow: true,
+        title: intl.formatMessage(messages.edit), action:
+        this.handleEditClick
+      });
    } else {
-      menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
-      menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
-      menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
-      menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
+      menu.push({
+        icon: 'comment',
+        hideArrow: true,
+        title: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }),
+        action: this.handleMentionClick
+      });
+      menu.push({
+        icon: 'mute',
+        hideArrow: true,
+        title: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
+        action: this.handleMuteClick
+      });
+      menu.push({
+        icon: 'circle',
+        hideArrow: true,
+        title: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
+        action: this.handleBlockClick
+      });
+      menu.push({
+        icon: 'circle',
+        hideArrow: true,
+        title: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
+        action: this.handleReport
+      });
+
+      // if (withGroupAdmin) {
+      //   menu.push({
+      //     icon: 'circle',
+      //     hideArrow: true,
+      //     title: intl.formatMessage(messages.group_remove_account),
+      //     action: this.handleGroupRemoveAccount
+      //   });
+      //   menu.push({
+      //     icon: 'circle',
+      //     hideArrow: true,
+      //     title: intl.formatMessage(messages.group_remove_post),
+      //     action: this.handleGroupRemovePost
+      //   });
+      // }

      if (isStaff) {
-        menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
-        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
-      }
-
-      if (withGroupAdmin) {
-        menu.push({ text: intl.formatMessage(messages.group_remove_account), action: this.handleGroupRemoveAccount });
-        menu.push({ text: intl.formatMessage(messages.group_remove_post), action: this.handleGroupRemovePost });
+        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')}`
+        });
      }
    }

--- a/app/javascript/gabsocial/components/scrollable_list.js
+++ b/app/javascript/gabsocial/components/scrollable_list.js
@@ -121,7 +121,7 @@ export default class ScrollableList extends PureComponent {
      const { innerHeight } = this.window;
      const offset = scrollHeight - scrollTop - innerHeight;

-      if (400 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
+      if (600 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
        this.props.onLoadMore();
      }

--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -80,13 +80,11 @@ export default class SidebarSectionItem extends PureComponent {
      fontSize15PX: 1,
      text: 1,
      textOverflowEllipsis: 1,
-      colorSecondary: !hovering && !active && !me && !shouldShowActive,
-      colorPrimary: shouldShowActive || me,
+      colorPrimary: 1,
    })

    const iconClasses = cx({
-      fillColorSecondary: !hovering && !active && !shouldShowActive,
-      fillColorBlack: shouldShowActive,
+      fillColorBlack: 1,
    })

    const countClasses = cx({
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -1,48 +1,51 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, defineMessages } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { HotKeys } from 'react-hotkeys';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { HotKeys } from 'react-hotkeys'
 import classNames from 'classnames/bind'
-import { me, displayMedia } from '../initial_state';
+import { me, displayMedia } from '../initial_state'
 import StatusCard from './status_card'
-import { MediaGallery, Video } from '../features/ui/util/async_components';
+import { MediaGallery, Video } from '../features/ui/util/async_components'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
 import StatusContent from './status_content'
 import StatusPrepend from './status_prepend'
-import StatusActionBar from './status_action_bar';
-import Poll from './poll';
+import StatusActionBar from './status_action_bar'
+import Poll from './poll'
 import StatusHeader from './status_header'
-import Text from './text'
+import CommentList from './comment_list'

 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
-import Bundle from '../features/ui/util/bundle';
+import Bundle from '../features/ui/util/bundle'

 const cx = classNames.bind(_s)

 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
-  const displayName = status.getIn(['account', 'display_name']);
+  if (!intl || !status) return ''
+
+  const displayName = status.getIn(['account', 'display_name'])

-  // : todo :
  const values = [
-    // displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
-    // status.get('spoiler_text') && status.get('hidden')
-    //   ? status.get('spoiler_text')
-    //   : status.get('search_index').slice(status.get('spoiler_text').length),
-    // intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
-    // status.getIn(['account', 'acct']),
-  ];
+    displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
+    status.get('spoiler_text') && status.get('hidden')
+      ? status.get('spoiler_text')
+      : status.get('search_index').slice(status.get('spoiler_text').length),
+    intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
+    `@${status.getIn(['account', 'acct'])}`,
+  ]

  if (rebloggedByText) {
-    values.push(rebloggedByText);
+    values.push(rebloggedByText)
  }

-  return values.join(', ');
-};
+  return values.join(', ')
+}

-export const defaultMediaVisibility = status => {
+export const defaultMediaVisibility = (status) => {
  if (!status) return undefined

+  // console.log("status:", status)
+
  if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
    status = status.get('reblog')
  }
@@ -50,63 +53,68 @@ export const defaultMediaVisibility = status => {
  return (displayMedia !== 'hide_all' && !status.get('sensitive')) || displayMedia === 'show_all'
 }

-const messages = defineMessages({
-  filtered: { id: 'status.filtered', defaultMessage: 'Filtered' },
-})
-
 export default
@injectIntl
 class Status extends ImmutablePureComponent {

  static contextTypes = {
    router: PropTypes.object,
-  };
+  }

  static propTypes = {
+    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map,
+    descendantsIds: ImmutablePropTypes.list,
+    isChild: PropTypes.bool,
+    isPromoted: PropTypes.bool,
+    isFeatured: PropTypes.bool,
+    isMuted: PropTypes.bool,
+    isHidden: PropTypes.bool,
+    isIntersecting: PropTypes.bool,
    onClick: PropTypes.func,
    onReply: PropTypes.func,
-    onShowRevisions: PropTypes.func,
    onQuote: PropTypes.func,
    onFavorite: PropTypes.func,
-    onRepost: PropTypes.func,
-    onDelete: PropTypes.func,
-    onEdit: PropTypes.func,
    onMention: PropTypes.func,
-    onPin: PropTypes.func,
    onOpenMedia: PropTypes.func,
    onOpenVideo: PropTypes.func,
-    onBlock: PropTypes.func,
-    onEmbed: PropTypes.func,
    onHeightChange: PropTypes.func,
    onToggleHidden: PropTypes.func,
-    muted: PropTypes.bool,
-    hidden: PropTypes.bool,
+    onShare: PropTypes.func,
    onMoveUp: PropTypes.func,
    onMoveDown: PropTypes.func,
+    onFetchComments: PropTypes.func,
    getScrollPosition: PropTypes.func,
    updateScrollBottom: PropTypes.func,
    cacheMediaWidth: PropTypes.func,
    cachedMediaWidth: PropTypes.number,
-    group: ImmutablePropTypes.map,
-    promoted: PropTypes.bool,
-    onOpenProUpgradeModal: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-    isChild: PropTypes.bool,
+    contextType: PropTypes.string,
  }

  // Avoid checking props that are functions (and whose equality will always
  // evaluate to false. See react-immutable-pure-component for usage.
-  updateOnProps = ['status', 'account', 'muted', 'hidden']
+  updateOnProps = [
+    'status',
+    'descendantsIds',
+    'isChild',
+    'isPromoted',
+    'isFeatured',
+    'isMuted',
+    'isHidden',
+    'isIntersecting',
+  ]

  state = {
+    loadedComments: false,
    showMedia: defaultMediaVisibility(this.props.status),
    statusId: undefined,
+    height: undefined,
  }

  // Track height changes we know about to compensate scrolling
  componentDidMount() {
-    this.didShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
+    const { isMuted, isHidden, status } = this.props
+    this.didShowCard = !isMuted && !isHidden && status && status.get('card')
  }

  getSnapshotBeforeUpdate() {
@@ -118,38 +126,100 @@ class Status extends ImmutablePureComponent {
  }

  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.loadedComments) {
+      return {
+        loadedComments: true
+      }
+    }
+
    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
      return {
        showMedia: defaultMediaVisibility(nextProps.status),
        statusId: nextProps.status.get('id'),
-      };
+      }
    }

-    return null;
+    return null
  }

  // Compensate height changes
  componentDidUpdate(prevProps, prevState, snapshot) {
-    const doShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
+    if (!prevState.loadedComments && this.state.loadedComments && this.props.status) {
+      const commentCount = this.props.status.get('replies_count');
+      if (commentCount > 0) {
+        this.props.onFetchComments(this.props.status.get('id'))
+        this._measureHeight(prevState.height !== this.state.height)
+      }
+    }
+
+    const doShowCard = !this.props.isMuted && !this.props.isHidden && this.props.status && this.props.status.get('card')

    if (doShowCard && !this.didShowCard) {
-      this.didShowCard = true;
+      this.didShowCard = true

      if (snapshot !== null && this.props.updateScrollBottom) {
        if (this.node && this.node.offsetTop < snapshot.top) {
-          this.props.updateScrollBottom(snapshot.height - snapshot.top);
+          this.props.updateScrollBottom(snapshot.height - snapshot.top)
        }
      }
    }
  }

+  handleMoveUp = id => {
+    const { status, ancestorsIds, descendantsIds } = this.props;
+
+    if (id === status.get('id')) {
+      this._selectChild(ancestorsIds.size - 1, true);
+    } else {
+      let index = ancestorsIds.indexOf(id);
+
+      if (index === -1) {
+        index = descendantsIds.indexOf(id);
+        this._selectChild(ancestorsIds.size + index, true);
+      } else {
+        this._selectChild(index - 1, true);
+      }
+    }
+  }
+
+  handleMoveDown = id => {
+    const { status, ancestorsIds, descendantsIds } = this.props;
+
+    if (id === status.get('id')) {
+      this._selectChild(ancestorsIds.size + 1, false);
+    } else {
+      let index = ancestorsIds.indexOf(id);
+
+      if (index === -1) {
+        index = descendantsIds.indexOf(id);
+        this._selectChild(ancestorsIds.size + index + 2, false);
+      } else {
+        this._selectChild(index + 1, false);
+      }
+    }
+  }
+
+  _selectChild(index, align_top) {
+    const container = this.node;
+    const element = container.querySelectorAll('.focusable')[index];
+
+    if (element) {
+      if (align_top && container.scrollTop > element.offsetTop) {
+        element.scrollIntoView(true);
+      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
+        element.scrollIntoView(false);
+      }
+      element.focus();
+    }
+  }
+
  componentWillUnmount() {
    if (this.node && this.props.getScrollPosition) {
-      const position = this.props.getScrollPosition();
+      const position = this.props.getScrollPosition()
      if (position !== null && this.node.offsetTop < position.top) {
        requestAnimationFrame(() => {
-          this.props.updateScrollBottom(position.height - position.top);
-        });
+          this.props.updateScrollBottom(position.height - position.top)
+        })
      }
    }
  }
@@ -160,11 +230,11 @@ class Status extends ImmutablePureComponent {

  handleClick = () => {
    if (this.props.onClick) {
-      this.props.onClick();
-      return;
+      this.props.onClick()
+      return
    }

-    if (!this.context.router) return;
+    if (!this.context.router) return

    this.context.router.history.push(
      `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
@@ -173,57 +243,53 @@ class Status extends ImmutablePureComponent {

  handleExpandClick = e => {
    if (e.button === 0) {
-      if (!this.context.router) return;
+      if (!this.context.router) return

      this.context.router.history.push(
        `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
-      );
+      )
    }
-  };
-
-  handleExpandedToggle = () => {
-    this.props.onToggleHidden(this._properStatus());
-  };
-
-  renderLoadingMediaGallery() {
-    return <div className='media_gallery' style={{ height: '110px' }} />;
  }

-  renderLoadingVideoPlayer() {
-    return <div className='media-spoiler-video' style={{ height: '110px' }} />;
+  handleExpandedToggle = () => {
+    this.props.onToggleHidden(this._properStatus())
+  }
+
+  renderLoadingMedia() {
+    return <div className={_s.backgroundColorPanel} style={{ height: '110px' }} />
  }

  handleOpenVideo = (media, startTime) => {
-    this.props.onOpenVideo(media, startTime);
-  };
+    this.props.onOpenVideo(media, startTime)
+  }

  handleHotkeyReply = e => {
-    e.preventDefault();
-    this.props.onReply(this._properStatus(), this.context.router.history);
-  };
+    e.preventDefault()
+    this.props.onReply(this._properStatus(), this.context.router.history)
+  }

  handleHotkeyFavorite = () => {
-    this.props.onFavorite(this._properStatus());
-  };
+    this.props.onFavorite(this._properStatus())
+  }

-  handleHotkeyBoost = e => {
-    this.props.onRepost(this._properStatus(), e);
-  };
+  handleHotkeyRepost = e => {
+    this.props.onQuote(this._properStatus(), e)
+  }

  handleHotkeyMention = e => {
-    e.preventDefault();
-    this.props.onMention(this._properStatus().get('account'), this.context.router.history);
-  };
+    e.preventDefault()
+    this.props.onMention(this._properStatus().get('account'), this.context.router.history)
+  }

  handleHotkeyOpen = () => {
    this.context.router.history.push(
      `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
-    );
-  };
+    )
+  }

  handleHotkeyOpenProfile = () => {
-    this.context.router.history.push(`/${this._properStatus().getIn(['account', 'acct'])}`);
-  };
+    this.context.router.history.push(`/${this._properStatus().getIn(['account', 'acct'])}`)
+  }

  handleHotkeyMoveUp = e => {
    this.props.onMoveUp(this.props.status.get('id'), e.target.getAttribute('data-featured'))
@@ -251,63 +317,73 @@ class Status extends ImmutablePureComponent {
    return status
  }

-  handleRef = c => {
-    this.node = c
+  _measureHeight (heightJustChanged) {
+    try {
+      scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }))
+      
+      if (heightJustChanged) {
+        this.props.onHeightChange()
+      } 
+    } catch (error) {
+      
+    }
  }

-
-  handleOpenProUpgradeModal = () => {
-    this.props.onOpenProUpgradeModal();
+  handleRef = c => {
+    this.node = c
+    this._measureHeight()
  }

  render() {
    const {
      intl,
-      hidden,
-      featured,
-      group,
-      promoted,
+      status,
+      isFeatured,
+      isPromoted,
      isChild,
+      isHidden,
+      descendantsIds,
+      commentsLimited,
    } = this.props

-    let media = null
-    let rebloggedByText, reblogContent
-
-    //   rebloggedByText = intl.formatMessage(
-    //     { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
-    //     { name: status.getIn(['account', 'acct']) }
-    //   );
-
-    //   reblogContent = status.get('contentHtml');
-    //   status = status.get('reblog');
-    // }
-
-    const { status, ...other } = this.props;
-
    if (!status) return null

-    if (hidden) {
+    let media, reblogContent, rebloggedByText = null
+
+    if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
+      rebloggedByText = intl.formatMessage(
+        { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
+        { name: status.getIn(['account', 'acct']) }
+      )
+      reblogContent = status.get('contentHtml')
+    }
+
+    const handlers = this.props.isMuted ? {} : {
+      reply: this.handleHotkeyReply,
+      favorite: this.handleHotkeyFavorite,
+      repost: this.handleHotkeyRepost,
+      mention: this.handleHotkeyMention,
+      open: this.handleHotkeyOpen,
+      openProfile: this.handleHotkeyOpenProfile,
+      moveUp: this.handleHotkeyMoveUp,
+      moveDown: this.handleHotkeyMoveDown,
+      toggleHidden: this.handleHotkeyToggleHidden,
+      toggleSensitive: this.handleHotkeyToggleSensitive,
+    }
+
+     if (isHidden) {
      return (
-        <div ref={this.handleRef}>
-          {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
-          {status.get('content')}
-        </div>
+        <HotKeys handlers={handlers}>
+          <div ref={this.handleRef} className={classNames({ focusable: !this.props.muted })} tabIndex='0'>
+            {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
+            {status.get('content')}
+          </div>
+        </HotKeys>
      );
    }

    if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) {
-      const minHandlers = this.props.muted ? {} : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      }
-
-      return (
-        <HotKeys handlers={minHandlers}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex='0' ref={this.handleRef}>
-            <Text>{intl.formatMessage(messages.filtered)}</Text>
-          </div>
-        </HotKeys>
-      )
+      return null
    }

    if (status.get('poll')) {
@@ -317,7 +393,7 @@ class Status extends ImmutablePureComponent {
        const video = status.getIn(['media_attachments', 0])

        media = (
-          <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer}>
+          <Bundle fetchComponent={Video} loading={this.renderLoadingMedia}>
            {Component => (
              <Component
                inline
@@ -339,7 +415,7 @@ class Status extends ImmutablePureComponent {
        )
      } else {
        media = (
-          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
+          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMedia}>
            {Component => (
              <Component
                reduced={isChild}
@@ -367,27 +443,16 @@ class Status extends ImmutablePureComponent {
      )
    }

-    const handlers = this.props.muted ? {} : {
-      reply: this.handleHotkeyReply,
-      favorite: this.handleHotkeyFavorite,
-      boost: this.handleHotkeyBoost,
-      mention: this.handleHotkeyMention,
-      open: this.handleHotkeyOpen,
-      openProfile: this.handleHotkeyOpenProfile,
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
-      toggleHidden: this.handleHotkeyToggleHidden,
-      toggleSensitive: this.handleHotkeyToggleSensitive,
-    }
-
    const containerClasses = cx({
      default: 1,
      radiusSmall: !isChild,
-      // mb15: !isChild,
-      // backgroundColorPrimary: 1,
-      pb15: featured,
-      borderBottom1PX: featured && !isChild,
-      borderColorSecondary: featured && !isChild,
+      pb15: isFeatured,
+      radiusSmall: !isChild,
+      backgroundColorPrimary: !isChild,
+      mb15: !isChild,
+      border1PX: !isChild,
+      borderBottom1PX: isFeatured && !isChild,
+      borderColorSecondary: !isChild,
    })

    const innerContainerClasses = cx({
@@ -405,9 +470,9 @@ class Status extends ImmutablePureComponent {
    return (
      <HotKeys handlers={handlers}>
        <div
-        className={containerClasses}
-          tabIndex={this.props.muted ? null : 0}
-          data-featured={featured ? 'true' : null}
+          className={containerClasses}
+          tabIndex={this.props.isMuted ? null : 0}
+          data-featured={isFeatured ? 'true' : null}
          aria-label={textForScreenReader(intl, status, rebloggedByText)}
          ref={this.handleRef}
          // onClick={this.handleClick}
@@ -416,7 +481,7 @@ class Status extends ImmutablePureComponent {

            <div data-id={status.get('id')}>

-              <StatusPrepend status={status} promoted={promoted} featured={featured} />
+              <StatusPrepend status={status} isPromoted={isPromoted} isFeatured={isFeatured} />

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

@@ -442,7 +507,13 @@ class Status extends ImmutablePureComponent {

              {
                !isChild &&
-                <StatusActionBar status={status} {...other} />
+                <StatusActionBar
+                  status={status}
+                  onFavorite={this.props.onFavorite}
+                  onReply={this.props.onReply}
+                  onQuote={this.props.onQuote}
+                  onShare={this.props.onShare}
+                />
              }

              {
@@ -451,11 +522,24 @@ class Status extends ImmutablePureComponent {
                  <ComposeFormContainer replyToId={status.get('id')} shouldCondense />
                </div>
              }
+
+              {
+                descendantsIds && !isChild && descendantsIds.size > 0 &&
+                <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
+              }
+              
+              {
+                descendantsIds && !isChild && descendantsIds.size > 0 &&
+                <CommentList
+                  commentsLimited={commentsLimited}
+                  descendants={descendantsIds}
+                />
+              }
            </div>
          </div>
        </div>
      </HotKeys>
-    );
+    )
  }

 }
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -2,66 +2,23 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
-import { openModal } from '../actions/modal'
-import { openPopover } from '../actions/popover'
-import { me } from '../initial_state'
 import Text from './text'
-import Button from './button'
 import StatusActionBarItem from './status_action_bar_item'

 const messages = defineMessages({
-  delete: { id: 'status.delete', defaultMessage: 'Delete' },
-  edit: { id: 'status.edit', defaultMessage: 'Edit' },
-  mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
-  mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
-  block: { id: 'account.block', defaultMessage: 'Block @{name}' },
-  reply: { id: 'status.reply', defaultMessage: 'Reply' },
  comment: { id: 'status.comment', defaultMessage: 'Comment' },
-  more: { id: 'status.more', defaultMessage: 'More' },
  share: { id: 'status.share', defaultMessage: 'Share' },
-  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' },
-  cancel_repost_private: { id: 'status.cancel_repost_private', defaultMessage: 'Un-repost' },
+  repost: { id: 'status.repost', defaultMessage: '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' },
  like: { id: 'status.like', defaultMessage: 'Like' },
  likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
  repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
  commentsLabel: { id: 'comments.label', defaultMessage: '{number, plural, one {# comment} other {# comments}}' },
-  open: { id: 'status.open', defaultMessage: 'Expand this status' },
-  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
-  muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
-  unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
-  pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
-  unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
-  embed: { id: 'status.embed', defaultMessage: 'Embed' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
-  admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
-  copy: { id: 'status.copy', defaultMessage: 'Copy link to status' },
-  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' },
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  onOpenUnauthorizedModal() {
-    dispatch(openModal('UNAUTHORIZED'))
-  },
-  onOpenStatusSharePopover(targetRef, status) {
-    console.log("targetRef, status:", targetRef, status)
-    dispatch(openPopover('STATUS_SHARE', {
-      status,
-      targetRef,
-      position: 'top',
-    }))
-  },
 })

 const cx = classNames.bind(_s)

 export default
-@connect(null, mapDispatchToProps)
@injectIntl
 class StatusActionBar extends ImmutablePureComponent {

@@ -70,72 +27,43 @@ class StatusActionBar extends ImmutablePureComponent {
  }

  static propTypes = {
-    status: 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,
-    onEmbed: PropTypes.func,
-    onMuteConversation: PropTypes.func,
-    onPin: PropTypes.func,
-    withDismiss: PropTypes.bool,
-    withGroupAdmin: PropTypes.bool,
    intl: PropTypes.object.isRequired,
+    onFavorite: PropTypes.func.isRequired,
+    onShare: PropTypes.func.isRequired,
+    onReply: PropTypes.func.isRequired,
+    onQuote: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
  }

-  // Avoid checking props that are functions (and whose equality will always
-  // evaluate to false. See react-immutable-pure-component for usage.
-  updateOnProps = [
-    'status',
-    'withDismiss',
-  ]
+  updateOnProps = ['status']

  handleReplyClick = () => {
-    if (me) {
-      this.props.onReply(this.props.status, this.context.router.history)
-    } else {
-      this.props.onOpenUnauthorizedModal()
-    }
+    this.props.onReply(this.props.status, this.context.router.history)
  }

  handleFavoriteClick = () => {
-    if (me) {
-      this.props.onFavorite(this.props.status)
-    } else {
-      this.props.onOpenUnauthorizedModal()
-    }
+    this.props.onFavorite(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()
-    }
+  handleRepostClick = (e) => {
+    // this.props.onRepost(this.props.status, e)
+    this.props.onQuote(this.props.status, this.context.router.history)
  }

  handleShareClick = () => {
-    this.props.onOpenStatusSharePopover(this.shareButton, this.props.status)
+    this.props.onShare(this.shareButton, this.props.status)
  }

  openLikesList = () => {
-    
+    // : todo :
  }

  toggleCommentsVisible = () => {
-    
+    // : todo :
  }

  openRepostsList = () => {
-    
+    // : todo :
  }

  setShareButton = (n) => {
@@ -143,7 +71,7 @@ class StatusActionBar extends ImmutablePureComponent {
  }

  render() {
-    const { status, intl: { formatMessage } } = this.props
+    const { status, intl } = this.props

    const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))

@@ -194,7 +122,7 @@ class StatusActionBar extends ImmutablePureComponent {
              favoriteCount > 0 &&
              <button className={interactionBtnClasses} onClick={this.openLikesList}>
                <Text color='secondary' size='small'>
-                  {formatMessage(messages.likesLabel, {
+                  {intl.formatMessage(messages.likesLabel, {
                    number: favoriteCount,
                  })}
                </Text>
@@ -204,7 +132,7 @@ class StatusActionBar extends ImmutablePureComponent {
              replyCount > 0 &&
              <button className={interactionBtnClasses} onClick={this.toggleCommentsVisible}>
                <Text color='secondary' size='small'>
-                  {formatMessage(messages.commentsLabel, {
+                  {intl.formatMessage(messages.commentsLabel, {
                    number: replyCount,
                  })}
                </Text>
@@ -214,7 +142,7 @@ class StatusActionBar extends ImmutablePureComponent {
              repostCount > 0 &&
              <button className={interactionBtnClasses} onClick={this.openRepostsList}>
                <Text color='secondary' size='small'>
-                  {formatMessage(messages.repostsLabel, {
+                  {intl.formatMessage(messages.repostsLabel, {
                    number: repostCount,
                  })}
                </Text>
@@ -225,19 +153,19 @@ class StatusActionBar extends ImmutablePureComponent {
        <div className={innerContainerClasses}>
          <div className={[_s.default, _s.flexRow, _s.py2, _s.width100PC].join(' ')}>
            <StatusActionBarItem
-              title={formatMessage(messages.like)}
+              title={intl.formatMessage(messages.like)}
              icon={!!status.get('favourited') ? 'liked' : 'like'}
              active={!!status.get('favourited')}
              onClick={this.handleFavoriteClick}
            />
            <StatusActionBarItem
-              title={formatMessage(messages.comment)}
+              title={intl.formatMessage(messages.comment)}
              icon='comment'
              onClick={this.handleReplyClick}
            />
            <StatusActionBarItem
-              title={formatMessage(messages.repost)}
-              altTitle={!publicStatus ? formatMessage(messages.cannot_repost) : ''}
+              title={intl.formatMessage(messages.repost)}
+              altTitle={!publicStatus ? intl.formatMessage(messages.cannot_repost) : ''}
              icon={!publicStatus ? 'lock' : 'repost'}
              disabled={!publicStatus}
              active={!!status.get('reblogged')}
@@ -245,7 +173,7 @@ class StatusActionBar extends ImmutablePureComponent {
            />
            <StatusActionBarItem
              buttonRef={this.setShareButton}
-              title={formatMessage(messages.share)}
+              title={intl.formatMessage(messages.share)}
              icon='share'
              onClick={this.handleShareClick}
            />
@@ -255,4 +183,4 @@ class StatusActionBar extends ImmutablePureComponent {
    )
  }

-}
+}
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -1,7 +1,6 @@
-import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'
+import { injectIntl, defineMessages } from 'react-intl'
 import classNames from 'classnames/bind'
 import { isRtl } from '../utils/rtl'
 import Button from './button'
@@ -34,7 +33,6 @@ class StatusContent extends ImmutablePureComponent {

  static propTypes = {
    status: ImmutablePropTypes.map.isRequired,
-    reblogStatus: PropTypes.string,
    expanded: PropTypes.bool,
    onExpandedToggle: PropTypes.func,
    onClick: PropTypes.func,
@@ -48,6 +46,13 @@ class StatusContent extends ImmutablePureComponent {
    collapsed: null, // `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't).
  }

+  updateOnProps = [
+    'status',
+    'expanded',
+    'collapsable',
+    'isComment',
+  ]
+
  _updateStatusLinks() {
    const node = this.node

--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import classNames from 'classnames/bind'
 import { openPopover } from '../actions/popover'
 import { openModal } from '../actions/modal'
+import { me } from '../initial_state'
 import RelativeTimestamp from './relative_timestamp'
 import DisplayName from './display_name'
 import Text from './text'
@@ -50,77 +51,6 @@ class StatusHeader extends ImmutablePureComponent {
    this.props.onOpenStatusRevisionsPopover(this.props.status)
  }

-  handleDeleteClick = () => {
-    this.props.onDelete(this.props.status, this.context.router.history);
-  }
-
-  handleEditClick = () => {
-    this.props.onEdit(this.props.status);
-  }
-
-  handlePinClick = () => {
-    this.props.onPin(this.props.status);
-  }
-
-  handleMentionClick = () => {
-    this.props.onMention(this.props.status.get('account'), this.context.router.history);
-  }
-
-  handleMuteClick = () => {
-    this.props.onMute(this.props.status.get('account'));
-  }
-
-  handleBlockClick = () => {
-    this.props.onBlock(this.props.status);
-  }
-
-  handleOpen = () => {
-    this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
-  }
-
-  handleEmbed = () => {
-    this.props.onEmbed(this.props.status);
-  }
-
-  handleReport = () => {
-    this.props.onReport(this.props.status);
-  }
-
-  handleConversationMuteClick = () => {
-    this.props.onMuteConversation(this.props.status);
-  }
-
-  handleCopy = () => {
-    const url = this.props.status.get('url');
-    const textarea = document.createElement('textarea');
-
-    textarea.textContent = url;
-    textarea.style.position = 'fixed';
-
-    document.body.appendChild(textarea);
-
-    try {
-      textarea.select();
-      document.execCommand('copy');
-    } catch (e) {
-      //
-    } finally {
-      document.body.removeChild(textarea);
-    }
-  }
-
-  handleGroupRemoveAccount = () => {
-    const { status } = this.props;
-
-    this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
-  }
-
-  handleGroupRemovePost = () => {
-    const { status } = this.props;
-
-    this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
-  }
-
  setStatusOptionsButton = n => {
    this.statusOptionsButton = n
  }
@@ -167,7 +97,7 @@ class StatusHeader extends ImmutablePureComponent {
              </NavLink>

              {
-                !reduced &&
+                !reduced && !!me &&
                <Button
                  text
                  backgroundColor='none'
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -9,8 +9,7 @@ import { me, promotions } from '../initial_state';
 import { dequeueTimeline } from '../actions/timelines';
 import { scrollTopTimeline } from '../actions/timelines';
 import { fetchStatus } from '../actions/statuses';
-// import StatusContainer from '../containers/status_container';
-import Status from '../features/status';
+import StatusContainer from '../containers/status_container';
 import ScrollableList from './scrollable_list';
 import TimelineQueueButtonHeader from './timeline_queue_button_header';
 import ColumnIndicator from './column_indicator';
@@ -48,7 +47,7 @@ const mapStateToProps = (state, { timelineId }) => {
    statusIds: getStatusIds(state, { type: timelineId.substring(0,5) === 'group' ? 'group' : timelineId, id: timelineId }),
    isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
    isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
-    hasMore:   state.getIn(['timelines', timelineId, 'hasMore']),
+    hasMore: state.getIn(['timelines', timelineId, 'hasMore']),
    totalQueuedItemsCount: state.getIn(['timelines', timelineId, 'totalQueuedItemsCount']),
    promotion: promotion,
    promotedStatus: promotion && state.getIn(['statuses', promotion.status_id])
@@ -175,35 +174,26 @@ class StatusList extends ImmutablePureComponent {
          onClick={onLoadMore}
        />
      ) : (
-        <Fragment key={statusId}>
-          <Status
-            id={statusId}
-            onMoveUp={this.handleMoveUp}
-            onMoveDown={this.handleMoveDown}
-            contextType={timelineId}
-            group={group}
-            withGroupAdmin={withGroupAdmin}
-            commentsLimited
-          />
-          { /* : todo : */
-            promotedStatus && index === promotion.position &&
-            <Status
-              id={promotion.status_id}
-              contextType={timelineId}
-              promoted
-              commentsLimited
-            />
-          }
-        </Fragment>
+        <StatusContainer
+          key={statusId}
+          id={statusId}
+          onMoveUp={this.handleMoveUp}
+          onMoveDown={this.handleMoveDown}
+          contextType={timelineId}
+          // : todo :
+          // group={group}
+          // withGroupAdmin={withGroupAdmin}
+          commentsLimited
+        />
      ))
    ) : null;

    if (scrollableContent && featuredStatusIds) {
      scrollableContent = featuredStatusIds.map(statusId => (
-        <Status
+        <StatusContainer
          key={`f-${statusId}`}
          id={statusId}
-          featured
+          isFeatured
          onMoveUp={this.handleMoveUp}
          onMoveDown={this.handleMoveDown}
          contextType={timelineId}
--- a/app/javascript/gabsocial/components/status_prepend.js
+++ b/app/javascript/gabsocial/components/status_prepend.js
@@ -19,25 +19,25 @@ class StatusPrepend extends ImmutablePureComponent {
  static propTypes = {
    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map,
-    featured: PropTypes.bool,
-    promoted: PropTypes.bool,
+    isFeatured: PropTypes.bool,
+    isPromoted: PropTypes.bool,
  }

  render() {
    const {
      intl,
      status,
-      featured,
-      promoted,
+      isFeatured,
+      isPromoted,
    } = this.props

    if (!status) return null

    const isRepost = (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object')

-    if (!featured && !promoted && !isRepost) return null
+    if (!isFeatured && !isPromoted && !isRepost) return null

-    const iconId = featured ? 'pin' : promoted ? 'star' : 'repost'
+    const iconId = isFeatured ? 'pin' : isPromoted ? 'star' : 'repost'

    return (
      <div className={[_s.default, _s.width100PC, _s.alignItemsStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
@@ -71,7 +71,7 @@ class StatusPrepend extends ImmutablePureComponent {
          {
            !isRepost &&
            <Text color='secondary' size='small'>
-              {intl.formatMessage(featured ? messages.pinned : messages.promoted)}
+              {intl.formatMessage(isFeatured ? messages.pinned : messages.promoted)}
            </Text>
          }
        </div>