Progress

2020-05-04 14:44:37 -04:00
parent 4cf0713b37
commit 498f163880
66 changed files with 1192 additions and 246 deletions
--- a/app/javascript/gabsocial/actions/compose.js
+++ b/app/javascript/gabsocial/actions/compose.js
@@ -166,7 +166,8 @@ export function handleComposeSubmit(dispatch, getState, response, status) {
    }
  };

-  if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
+  if (response.data.visibility === 'public') {
+    // console.log("response.data.in_reply_to_id:", response.data.in_reply_to_id)
    insertIfOnline('home');
    insertIfOnline('community');
    insertIfOnline('public');
--- a/app/javascript/gabsocial/actions/lists.js
+++ b/app/javascript/gabsocial/actions/lists.js
@@ -112,8 +112,6 @@ export const submitListEditor = (shouldReset) => (dispatch, getState) => {
  const listId = getState().getIn(['listEditor', 'listId']);
  const title  = getState().getIn(['listEditor', 'title']);

-  console.log("submitListEditor:", title)
-
  if (listId === null) {
    dispatch(createList(title, shouldReset));
  } else {
--- a/app/javascript/gabsocial/actions/search.js
+++ b/app/javascript/gabsocial/actions/search.js
@@ -1,5 +1,6 @@
 import api from '../api';
 import { fetchRelationships } from './accounts';
+import { fetchGroupsSuccess, fetchGroupRelationships } from './groups'
 import { importFetchedAccounts, importFetchedStatuses } from './importer';

 export const SEARCH_CHANGE = 'SEARCH_CHANGE';
@@ -48,11 +49,10 @@ export function submitSearch() {
        dispatch(importFetchedStatuses(response.data.statuses));
      }

-      console.log("response.data.", response.data)
-
-      // if (response.data.groups) {
-      //   dispatch(importFetchedStatuses(response.data.statuses));
-      // }
+      if (response.data.groups) {
+        dispatch(fetchGroupsSuccess(response.data.groups))
+        dispatch(fetchGroupRelationships(response.data.groups.map(item => item.id)))
+      }

      dispatch(fetchSearchSuccess(response.data));
    }).catch(error => {
--- a/app/javascript/gabsocial/assets/donor_icon.js
+++ b/app/javascript/gabsocial/assets/donor_icon.js
@@ -1,24 +0,0 @@
-const DonorIcon = ({
-  className = '',
-  size = '24px',
-  title = 'Gab.com Donor',
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={size}
-    height={size}
-    viewBox='0 0 24 24'
-    xmlSpace='preserve'
-    aria-label={title}
-  >
-    <g>
-      <path fill='purple' d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' />
-    </g>
-  </svg>
-)
-
-export default DonorIcon
--- a/app/javascript/gabsocial/assets/investor_icon.js
+++ b/app/javascript/gabsocial/assets/investor_icon.js
@@ -1,24 +0,0 @@
-const InvestorIcon = ({
-  className = '',
-  size = '24px',
-  title = 'Gab.com Investor',
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={size}
-    height={size}
-    viewBox='0 0 24 24'
-    xmlSpace='preserve'
-    aria-label={title}
-  >
-    <g>
-      <path fill='red' d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' />
-    </g>
-  </svg>
-)
-
-export default InvestorIcon
--- a/app/javascript/gabsocial/assets/pro_icon.js
+++ b/app/javascript/gabsocial/assets/pro_icon.js
@@ -1,24 +0,0 @@
-const ProIcon = ({
-  className = '',
-  size = '24px',
-  title = 'GabPRO Account',
-}) => (
-  <svg
-    className={className}
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-    x='0px'
-    y='0px'
-    width={size}
-    height={size}
-    viewBox='0 0 24 24'
-    xmlSpace='preserve'
-    aria-label={title}
-  >
-    <g>
-      <path fill='green' d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' />
-    </g>
-  </svg>
-)
-
-export default ProIcon
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -235,6 +235,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
      bgTransparent: 1,
      outlineNone: 1,
      lineHeight125: 1,
+      colorPrimary: 1,
      height100PC: small,
      width100PC: !small,
      pt15: !small,
@@ -265,7 +266,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
              className={textareaClasses}
              disabled={disabled}
              placeholder={placeholder}
-            dautoFocus={false}
+              autoFocus={false}
              value={value}
              onChange={this.onChange}
              // onKeyDown={this.onKeyDown}
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -30,7 +30,7 @@ const makeMapStateToProps = (state, props) => ({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onReply (status, router) {
+  onReply(status, router) {
    if (!me) return dispatch(openModal('UNAUTHORIZED'))

    dispatch((_, getState) => {
@@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch) => ({
      }
    })
  },
-  onFavorite (status) {
+  onFavorite(status) {
    if (!me) return dispatch(openModal('UNAUTHORIZED'))

    if (status.get('favourited')) {
@@ -58,6 +58,12 @@ const mapDispatchToProps = (dispatch) => ({
  onOpenStatusOptions(status) {
    dispatch(openPopover('STATUS_OPTOINS', { status }))
  },
+  onOpenLikes(status) {
+    dispatch(openModal('STATUS_LIKES', { status }))
+  },
+  onOpenReposts(status) {
+    dispatch(openModal('STATUS_REPOSTS', { status }))
+  },
 })

 export default
@@ -74,6 +80,8 @@ class Comment extends ImmutablePureComponent {
    onReply: PropTypes.func.isRequired,
    onFavorite: PropTypes.func.isRequired,
    onOpenStatusOptions: PropTypes.func.isRequired,
+    onOpenLikes: PropTypes.func.isRequired,
+    onOpenReposts: PropTypes.func.isRequired,
  }

  updateOnProps = [
@@ -85,6 +93,8 @@ class Comment extends ImmutablePureComponent {

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

  handleOnReply = () => {
@@ -117,7 +127,7 @@ class Comment extends ImmutablePureComponent {
    }

    const style = {
-      paddingLeft: `${indent * 40}px`,
+      paddingLeft: `${indent * 42}px`,
    }

    return (
@@ -133,9 +143,13 @@ class Comment extends ImmutablePureComponent {
              <Avatar account={status.get('account')} size={32} />
            </NavLink>

-            <div className={[_s.default, _s.flexNormal].join(' ')}>
+            <div className={[_s.default, _s.flexShrink1, _s.maxWidth100PC42PX].join(' ')}>
              <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.bgSubtle].join(' ')}>
-                <CommentHeader status={status} />
+                <CommentHeader
+                  status={status}
+                  onOpenLikes={this.props.onOpenLikes}
+                  onOpenReposts={this.props.onOpenReposts}
+                />
                <StatusContent
                  status={status}
                  onClick={this.handleClick}
@@ -159,7 +173,7 @@ class Comment extends ImmutablePureComponent {

              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
                <CommentButton
-                  title={intl.formatMessage(status.get('favourited') ? messages.unlike: messages.like)}
+                  title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)}
                  onClick={this.handleOnFavorite}
                />
                <CommentButton
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
-import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Button from './button'
 import DisplayName from './display_name'
@@ -9,16 +9,36 @@ import DotTextSeperator from './dot_text_seperator'
 import RelativeTimestamp from './relative_timestamp'
 import Text from './text'

+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}}' },
+})
+
 export default
@injectIntl
 class CommentHeader extends ImmutablePureComponent {

  static propTypes = {
+    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map.isRequired,
+    openLikesList: PropTypes.func.isRequired,
+    openRepostsList: PropTypes.func.isRequired,
+  }
+
+  openLikesList = () => {
+    this.props.onOpenLikes(this.props.status)
+  }
+
+  openRepostsList = () => {
+    this.props.onOpenReposts(this.props.status)
  }

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

    const repostCount = status.get('reblogs_count')
    const favoriteCount = status.get('favourites_count')
@@ -50,7 +70,7 @@ class CommentHeader extends ImmutablePureComponent {
                className={_s.ml5}
              >
                <Text size='extraSmall' color='inherit'>
-                  Edited
+                  {intl.formatMessage(messages.edited)}
                </Text>
              </Button>
            </Fragment>
@@ -65,12 +85,13 @@ class CommentHeader extends ImmutablePureComponent {
                  underlineOnHover
                  backgroundColor='none'
                  color='tertiary'
-                  to={statusUrl}
                  className={_s.ml5}
+                  onClick={this.openLikesList}
                >
                <Text size='extraSmall' color='inherit'>
-                  {favoriteCount}
-                  &nbsp;Likes
+                  {intl.formatMessage(messages.likesLabel, {
+                    number: favoriteCount,
+                  })}
                </Text>
              </Button>
            </Fragment>
@@ -85,12 +106,13 @@ class CommentHeader extends ImmutablePureComponent {
                  underlineOnHover
                  backgroundColor='none'
                  color='tertiary'
-                  to={statusUrl}
                  className={_s.ml5}
+                  onClick={this.openRepostsList}
                >
                <Text size='extraSmall' color='inherit'>
-                  {repostCount}
-                  &nbsp;Reposts
+                  {intl.formatMessage(messages.repostsLabel, {
+                    number: repostCount,
+                  })}
                </Text>
              </Button>
            </Fragment>
--- a/app/javascript/gabsocial/components/comment_list.js
+++ b/app/javascript/gabsocial/components/comment_list.js
@@ -11,24 +11,23 @@ export default class CommentList extends ImmutablePureComponent {
  static propTypes = {
    commentsLimited: PropTypes.bool,
    descendants: ImmutablePropTypes.list,
-  }
-
-  handleLoadMore = () => {
-    //
+    onViewComments: PropTypes.func.isRequired,
  }

  render() {
    const {
      descendants,
      commentsLimited,
+      onViewComments
    } = this.props

-    const upperLimit = 6
    const size = descendants.size
+    const upperLimit = commentsLimited ? 6 : size
    const max = Math.min(commentsLimited ? 2 : upperLimit, size)

+    console.log("size, max:", size, max)
+
    const Wrapper = !commentsLimited ? ScrollableList : DummyContainer
-    console.log("Wrapper:", Wrapper)

    return (
      <div>
@@ -50,7 +49,7 @@ export default class CommentList extends ImmutablePureComponent {
              isText
              backgroundColor='none'
              color='tertiary'
-              onClick={this.handleLoadMore}
+              onClick={onViewComments}
            >
              <Text weight='bold' color='inherit'>
                View more comments
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -17,7 +17,6 @@ import CogIcon from '../assets/cog_icon'
 import CommentIcon from '../assets/comment_icon'
 import CopyIcon from '../assets/copy_icon'
 import DissenterIcon from '../assets/dissenter_icon'
-import DonorIcon from '../assets/donor_icon'
 import EllipsisIcon from '../assets/ellipsis_icon'
 import EmailIcon from '../assets/email_icon'
 import ErrorIcon from '../assets/error_icon'
@@ -31,7 +30,6 @@ import GroupAddIcon from '../assets/group_add_icon'
 import HappyIcon from '../assets/happy_icon'
 import HiddenIcon from '../assets/hidden_icon'
 import HomeIcon from '../assets/home_icon'
-import InvestorIcon from '../assets/investor_icon'
 import ItalicIcon from '../assets/italic_icon'
 import LikeIcon from '../assets/like_icon'
 import LikedIcon from '../assets/liked_icon'
@@ -52,7 +50,6 @@ import PencilIcon from '../assets/pencil_icon'
 import PinIcon from '../assets/pin_icon'
 import PlayIcon from '../assets/play_icon'
 import PollIcon from '../assets/poll_icon'
-import ProIcon from '../assets/pro_icon'
 import RepostIcon from '../assets/repost_icon'
 import RichTextIcon from '../assets/rich_text_icon'
 import SearchIcon from '../assets/search_icon'
@@ -90,7 +87,6 @@ const ICONS = {
  'comment': CommentIcon,
  'copy': CopyIcon,
  'dissenter': DissenterIcon,
-  'donor': DonorIcon,
  'ellipsis': EllipsisIcon,
  'email': EmailIcon,
  'error': ErrorIcon,
@@ -104,7 +100,6 @@ const ICONS = {
  'hidden': HiddenIcon,
  'happy': HappyIcon,
  'home': HomeIcon,
-  'investor': InvestorIcon,
  'italic': ItalicIcon,
  'like': LikeIcon,
  'liked': LikedIcon,
@@ -125,7 +120,6 @@ const ICONS = {
  'pin': PinIcon,
  'play': PlayIcon,
  'poll': PollIcon,
-  'pro': ProIcon,
  'repost': RepostIcon,
  'rich-text': RichTextIcon,
  'search': SearchIcon,
--- a/app/javascript/gabsocial/components/intersection_observer_article.js
+++ b/app/javascript/gabsocial/components/intersection_observer_article.js
@@ -45,21 +45,8 @@ class IntersectionObserverArticle extends React.Component {
  }

  state = {
-    isHidden: false, // set to true in requestIdleCallback to trigger un-render
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const isUnrendered = !this.state.isIntersecting && (this.state.isHidden || this.props.cachedHeight);
-    const willBeUnrendered = !nextState.isIntersecting && (nextState.isHidden || nextProps.cachedHeight);
-
-    // If we're going from rendered to unrendered (or vice versa) then update
-    if (!!isUnrendered !== !!willBeUnrendered) {
-      return true;
-    }
-
-    // Otherwise, diff based on props
-    const propsToDiff = isUnrendered ? updateOnPropsForUnrendered : updateOnPropsForRendered;
-    return !propsToDiff.every(prop => is(nextProps[prop], this.props[prop]));
+    isIntersecting: false,
+    isHidden: true,
  }

  componentDidMount() {
@@ -81,6 +68,20 @@ class IntersectionObserverArticle extends React.Component {
    this.componentMounted = false;
  }

+  shouldComponentUpdate(nextProps, nextState) {
+    const isUnrendered = !this.state.isIntersecting && (this.state.isHidden || this.props.cachedHeight);
+    const willBeUnrendered = !nextState.isIntersecting && (nextState.isHidden || nextProps.cachedHeight);
+
+    // If we're going from rendered to unrendered (or vice versa) then update
+    if (!!isUnrendered !== !!willBeUnrendered) {
+      return true;
+    }
+
+    // Otherwise, diff based on props
+    const propsToDiff = isUnrendered ? updateOnPropsForUnrendered : updateOnPropsForRendered;
+    return !propsToDiff.every(prop => is(nextProps[prop], this.props[prop]));
+  }
+  
  handleIntersection = (entry) => {
    this.entry = entry;

@@ -113,9 +114,6 @@ class IntersectionObserverArticle extends React.Component {
  hideIfNotIntersecting = () => {
    if (!this.componentMounted) return

-    // When the browser gets a chance, test if we're still not intersecting,
-    // and if so, set our isHidden to true to trigger an unrender. The point of
-    // this is to save DOM nodes and avoid using up too much memory.
    this.setState((prevState) => ({ isHidden: !prevState.isIntersecting }))
  }

--- a/app/javascript/gabsocial/components/modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal.js
@@ -163,18 +163,14 @@ class MediaModal extends ImmutablePureComponent {
          outlineNone: 1,
          circle: 1,
          cursorPointer: 1,
-          colorPrimary: i === index,
-          lineHeight0825: i === index,
          bgPrimaryOpaque: i !== index,
          bgPrimary: i === index,
+          boxShadowDot: i === index,
        })
-        const activeText = i === index ? '•' : ''

        return (
          <li className={[_s.default, _s.px5].join(' ')} key={`media-pagination-${i}`}>
-            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i}>
-              {activeText}
-            </button>
+            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i} />
          </li>
        )
      })
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -91,9 +91,24 @@ class ProfileInfoPanel extends ImmutablePureComponent {
            <Fragment>
              <Divider isSmall />
              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-                { isPro && <Icon id='pro' size='16px' className={_s.mr5} /> }
-                { isInvestor && <Icon id='investor' size='16px' className={_s.mr5} /> }
-                { isDonor && <Icon id='donor' size='16px' /> }
+                { 
+                  isPro &&
+                  <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
+                    <Text weight='bold' size='small' color='white' isBadge>PRO</Text>
+                  </div>
+                }
+                {
+                  isInvestor && 
+                  <div className={[_s.mr5, _s.radiusSmall, _s.bgInvestor, _s.py2, _s.px5].join(' ')}>
+                    <Text weight='bold' size='small' color='white' isBadge>INVESTOR</Text>
+                  </div>
+                }
+                {
+                  isDonor &&
+                  <div className={[_s.mr5, _s.radiusSmall, _s.bgDonor, _s.py2, _s.px5].join(' ')}>
+                    <Text weight='bold' size='small' color='white' isBadge>DONOR</Text>
+                  </div>
+                }
              </div>
            </Fragment>
          }
--- a/app/javascript/gabsocial/components/panel/progress_panel.js
+++ b/app/javascript/gabsocial/components/panel/progress_panel.js
@@ -25,8 +25,6 @@ class ProgressPanel extends PureComponent {

    const value = Math.min(parseFloat(monthlyExpensesComplete), 100)

-    console.log("monthlyExpensesComplete:", monthlyExpensesComplete)
-
    return (
      <PanelLayout
        title={intl.formatMessage(messages.operationsTitle)}
--- a/app/javascript/gabsocial/components/panel/search_filter_panel.js
+++ b/app/javascript/gabsocial/components/panel/search_filter_panel.js
@@ -19,12 +19,13 @@ export default
 class SearchFilterPanel extends ImmutablePureComponent {

  static propTypes = {
-    group: ImmutablePropTypes.list.isRequired,
    intl: PropTypes.object.isRequired,
  }

  render() {
-    const { intl, group } = this.props
+    const { intl } = this.props
+
+    // verified or not

    return (
      <PanelLayout title={intl.formatMessage(messages.title)}>
--- a/app/javascript/gabsocial/components/popover/emoji_picker_popover.js
+++ b/app/javascript/gabsocial/components/popover/emoji_picker_popover.js
@@ -221,7 +221,6 @@ const mapDispatchToProps = (dispatch) => ({

  onPickEmoji: (emoji) => {
    dispatch(useEmoji(emoji))
-    console.log("emoji:", emoji)
    dispatch(insertEmojiCompose(0, emoji, false))
  },
 })
--- a/app/javascript/gabsocial/components/popover/group_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/group_options_popover.js
@@ -84,7 +84,7 @@ class GroupOptionsPopover extends ImmutablePureComponent {
    ]

    return (
-      <PopoverLayout width={220}>
+      <PopoverLayout>
        <List
          scrollKey='repost_options'
          items={listItems}
--- a/app/javascript/gabsocial/components/popover/search_popover.js
+++ b/app/javascript/gabsocial/components/popover/search_popover.js
@@ -1,5 +1,6 @@
 export default class SearchPopover extends PureComponent {
  render() {
+    // : todo :
    // <div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
    //   <Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
    //     {({ opacity, scaleX, scaleY }) => (
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -4,14 +4,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { HotKeys } from 'react-hotkeys'
 import classNames from 'classnames/bind'
 import { me, displayMedia, compactMode } from '../initial_state'
-import StatusCard from './status_card'
-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 StatusMedia from './status_media'
-import Poll from './poll'
 import StatusHeader from './status_header'
 import CommentList from './comment_list'

@@ -26,13 +23,14 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {

  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) {
@@ -64,6 +62,7 @@ class Status extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map,
    descendantsIds: ImmutablePropTypes.list,
+    ancestorStatus: ImmutablePropTypes.map,
    isChild: PropTypes.bool,
    isPromoted: PropTypes.bool,
    isFeatured: PropTypes.bool,
@@ -136,7 +135,7 @@ class Status extends ImmutablePureComponent {

    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
      return {
-        loadedComments: false,
+        loadedComments: false, //reset
        showMedia: defaultMediaVisibility(nextProps.status),
        statusId: nextProps.status.get('id'),
      }
@@ -418,6 +417,8 @@ class Status extends ImmutablePureComponent {
      bgSubtle_onHover: isChild,
    })

+    console.log("status:", status)
+
    return (
      <HotKeys handlers={handlers}>
        <div
@@ -496,6 +497,7 @@ class Status extends ImmutablePureComponent {
                <CommentList
                  commentsLimited={commentsLimited}
                  descendants={descendantsIds}
+                  onViewComments={this.handleClick}
                />
              }
            </div>
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -78,20 +78,6 @@ class StatusContent extends ImmutablePureComponent {
      } else {
        link.setAttribute('title', link.href)
      }
-
-      const descendents = link.getElementsByTagName('*')
-      for (let j = 0; j < descendents.length; j++) {
-        const descendent = descendents[j];
-        
-        if (descendent.classList.contains('invisible')) {
-          descendent.classList.remove('invisible')
-          descendent.classList.add(_s.fs0, _s.text, _s.inherit)
-        }
-        if (descendent.classList.contains('ellipsis')) {
-          descendent.classList.remove('ellipsis')
-          descendent.classList.add(_s.noSelect, _s.text, _s.inherit)
-        } 
-      }
    }

    if (
@@ -299,7 +285,7 @@ class StatusContent extends ImmutablePureComponent {

      const statusContentClasses = cx({
        statusContent: 1,
-        height220PX: collapsed,
+        height215PX: collapsed,
        overflowHidden: collapsed,
      })

--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -16,6 +16,7 @@ import Button from './button'
 import Avatar from './avatar'

 const messages = defineMessages({
+  edited: { id: 'status.edited', defaultMessage: 'Edited' },
  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
  public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
@@ -193,7 +194,7 @@ class StatusHeader extends ImmutablePureComponent {
                    className={_s.ml5}
                  >
                    <Text size='small' color='secondary'>
-                      Edited
+                      {intl.formatMessage(messages.edited)}
                    </Text>
                  </Button>
                </Fragment>
--- a/app/javascript/gabsocial/components/trends_item.js
+++ b/app/javascript/gabsocial/components/trends_item.js
@@ -50,7 +50,7 @@ export default class TrendingItem extends ImmutablePureComponent {

    if (!trend) return null

-    const title = trend.get('title') || ''
+    const title = `${trend.get('title')}`.trim()
    const description = trend.get('description') || ''
      
    const correctedAuthor = trend.getIn(['author', 'name'], '').replace('www.', '')
--- a/app/javascript/gabsocial/containers/display.js
+++ b/app/javascript/gabsocial/containers/display.js
@@ -45,7 +45,6 @@ class Display extends PureComponent {
  }

  static getDerivedStateFromProps(nextProps, prevState) {
-    console.log("nextProps:", nextProps)
    if (nextProps.theme !== prevState.theme ||
      nextProps.radiusSmallDisabled !== prevState.radiusSmallDisabled ||
      nextProps.radiusCircleDisabled !== prevState.radiusCircleDisabled ||
--- a/app/javascript/gabsocial/containers/gabsocial.js
+++ b/app/javascript/gabsocial/containers/gabsocial.js
@@ -79,6 +79,16 @@ export default class GabSocial extends PureComponent {
      this.disconnect = store.dispatch(connectUserStream())
      store.dispatch(connectStatusUpdateStream())
    }
+
+    console.log('%c Gab Social ', [
+      , 'color: #30CE7D'
+      , 'display: block'
+      , 'line-height: 80px'
+      , 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", sans-serif'
+      , 'font-size: 36px'
+      , 'text-align: center'
+      , 'font-weight: bold'
+    ].join(';'))
  }

  componentWillUnmount () {
--- a/app/javascript/gabsocial/containers/status_container.js
+++ b/app/javascript/gabsocial/containers/status_container.js
@@ -3,7 +3,6 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import {
  replyCompose,
  mentionCompose,
-  quoteCompose,
 } from '../actions/compose';
 import {
  repost,
@@ -21,12 +20,13 @@ import {
  hideStatus,
  revealStatus,
  fetchComments,
+  fetchAncestors,
 } 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, boostModal, deleteModal } from '../initial_state';
+import { me, deleteModal } from '../initial_state';
 import {
  createRemovedAccount,
  groupRemoveStatus,
@@ -46,18 +46,14 @@ const makeMapStateToProps = () => {
      username: username,
    })

-    // : todo : if is comment (i.e. if any ancestorsIds) use comment not status
-
    let descendantsIds = ImmutableList()
+    let ancestorStatus

-    if (status) {
+    if (status && status.get('replies_count') > 0) {
      let indent = -1
      descendantsIds = descendantsIds.withMutations(mutable => {
        const ids = [status.get('id')]

-        const r = state.getIn(['contexts', 'replies', ids[0]])
-        // console.log("r:", r)
-
        while (ids.length > 0) {
          let id = ids.shift()
          const replies = state.getIn(['contexts', 'replies', id])
@@ -75,14 +71,26 @@ const makeMapStateToProps = () => {
            });
            indent++
            indent = Math.min(2, indent)
+          } else {
+            indent = 0 // reset
          }
        }
      })
    }
+    
+    if (status && status.get('in_reply_to_account_id')) {
+      // : todo :
+      // console.log("FIND ANCESTOR")
+      const ids = [status.get('id')]
+      const reps = state.getIn(['contexts', 'inReplyTos'])
+    }
+
+    // console.log("ancestorStatus:", ancestorStatus)

    return {
      status,
-      descendantsIds
+      descendantsIds,
+      ancestorStatus,
    }
  }

@@ -254,6 +262,10 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(fetchComments(statusId))
  },

+  onFetchAncestors(statusId) {
+    dispatch(fetchAncestors(statusId))
+  },
+
  onOpenLikes(status) {
    dispatch(openModal('STATUS_LIKES', { status }))
  },
--- a/app/javascript/gabsocial/features/account_timeline.js
+++ b/app/javascript/gabsocial/features/account_timeline.js
@@ -91,8 +91,6 @@ class AccountTimeline extends ImmutablePureComponent {

    if (!account) return null

-    console.log("statusIds:", statusIds)
-
    return (
      <StatusList
        scrollKey='account_timeline'
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -277,6 +277,8 @@ class ComposeForm extends ImmutablePureComponent {
      displayNone: length(this.props.text) === 0 || anyMedia,
    })

+    console.log("reduxReplyToId:", reduxReplyToId, shouldCondense, isModalOpen)
+
    return (
      <div className={parentContainerClasses}>
        <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
@@ -294,7 +296,7 @@ class ComposeForm extends ImmutablePureComponent {
          >

            {
-              !!reduxReplyToId && !shouldCondense && isModalOpen &&
+              !!reduxReplyToId && isModalOpen &&
              <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
                <StatusContainer
                  id={reduxReplyToId}
@@ -344,7 +346,7 @@ class ComposeForm extends ImmutablePureComponent {
            }

            {
-              /*
+              /* : todo :
              !!selectedGifSrc && !anyMedia &&
              <div className={[_s.default, _s.px15].join(' ')}>
                <GifForm
--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
@@ -15,7 +15,8 @@ import { me } from '../../../initial_state'
 const mapStateToProps = (state, { replyToId }) => {

  const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
-  const isMatch = reduxReplyToId || replyToId ? reduxReplyToId === replyToId : true
+  let isMatch = !!reduxReplyToId
+  if (!isMatch) isMatch = replyToId ? reduxReplyToId === replyToId : true

  if (!isMatch) {
    return {
--- a/app/javascript/gabsocial/features/search.js
+++ b/app/javascript/gabsocial/features/search.js
@@ -109,14 +109,16 @@ class Search extends ImmutablePureComponent {
              Showing {size} of {results.get('groups').size} results
            </Text>
          </div>
-          {
-            results.get('groups').slice(0, size).map(group => (
-              <GroupListItem
-                key={`search-${group.get('name')}`}
-                id={group.get('id')}
-              />
-            ))
-          }
+          <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
+            {
+              results.get('groups').slice(0, size).map(group => (
+                <GroupListItem
+                  key={`search-${group.get('name')}`}
+                  id={group.get('id')}
+                />
+              ))
+            }
+          </div>
        </PanelLayout>
      )
    }
--- a/app/javascript/gabsocial/features/status.js
+++ b/app/javascript/gabsocial/features/status.js
@@ -39,6 +39,7 @@ class Status extends ImmutablePureComponent {
  render() {
    const { status } = this.props
    
+    // : todo :
    // - if comment render as such
    
    if (!status) {
@@ -46,7 +47,7 @@ class Status extends ImmutablePureComponent {
    }

    return (
-      <StatusContainer {...this.props} />
+      <StatusContainer {...this.props} contextType='feature' />
    )
  }

--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -72,10 +72,11 @@ class HomePage extends PureComponent {
      <DefaultLayout
        title={intl.formatMessage(messages.home)}
        actions={[
-          {
-            icon: 'ellipsis',
-            onClick: onOpenHomePageSettingsModal,
-          },
+          // : todo :
+          // {
+          //   icon: 'ellipsis',
+          //   onClick: onOpenHomePageSettingsModal,
+          // },
        ]}
        layout={(
          <Fragment>
--- a/app/javascript/gabsocial/reducers/group_lists.js
+++ b/app/javascript/gabsocial/reducers/group_lists.js
@@ -1,22 +1,23 @@
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import { GROUPS_FETCH_SUCCESS } from '../actions/groups';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable'
+import { GROUPS_FETCH_SUCCESS } from '../actions/groups'

 const initialState = ImmutableMap({
  new: ImmutableList(),
  featured: ImmutableList(),
  member: ImmutableList(),
  admin: ImmutableList(),
-});
+})

 const normalizeList = (state, type, id, groups) => {
-  return state.set(type, ImmutableList(groups.map(item => item.id)));
-};
+  return state.set(type, ImmutableList(groups.map(item => item.id)))
+}

 export default function groupLists(state = initialState, action) {
  switch(action.type) {
  case GROUPS_FETCH_SUCCESS:
-    return normalizeList(state, action.tab, action.id, action.groups);
+    if (!action.tab) return state
+    return normalizeList(state, action.tab, action.id, action.groups)
  default:
-    return state;
+    return state
  }
-};
+}
--- a/app/javascript/gabsocial/reducers/timelines.js
+++ b/app/javascript/gabsocial/reducers/timelines.js
@@ -92,7 +92,8 @@ const updateTimelineQueue = (state, timeline, status) => {
  let alreadyExists = queuedStatuses.find(existingQueuedStatus => existingQueuedStatus.get('id') === status.get('id'));
  if (!alreadyExists) alreadyExists = listedStatuses.find(existingListedStatusId => existingListedStatusId === status.get('id'));

-  if (alreadyExists) {
+  const isReply = !!status.get('in_reply_to_id')
+  if (alreadyExists || isReply) {
    return state;
  }

--- a/app/javascript/gabsocial/selectors/index.js
+++ b/app/javascript/gabsocial/selectors/index.js
@@ -1,21 +1,21 @@
-import { createSelector } from 'reselect';
-import { List as ImmutableList } from 'immutable';
-import { me } from '../initial_state';
+import { createSelector } from 'reselect'
+import { List as ImmutableList } from 'immutable'
+import { me } from '../initial_state'

-const getAccountBase = (state, id) => state.getIn(['accounts', id], null);
-const getAccountCounters = (state, id) => state.getIn(['accounts_counters', id], null);
-const getAccountRelationship = (state, id) => state.getIn(['relationships', id], null);
-const getAccountMoved = (state, id) => state.getIn(['accounts', state.getIn(['accounts', id, 'moved'])]);
+const getAccountBase = (state, id) => state.getIn(['accounts', id], null)
+const getAccountCounters = (state, id) => state.getIn(['accounts_counters', id], null)
+const getAccountRelationship = (state, id) => state.getIn(['relationships', id], null)
+const getAccountMoved = (state, id) => state.getIn(['accounts', state.getIn(['accounts', id, 'moved'])])

 export const makeGetAccount = () => {
  return createSelector([getAccountBase, getAccountCounters, getAccountRelationship, getAccountMoved], (base, counters, relationship, moved) => {
    if (base === null) {
-      return null;
+      return null
    }

    return base.merge(counters).withMutations(map => {
-      map.set('relationship', relationship);
-      map.set('moved', moved);
+      map.set('relationship', relationship)
+      map.set('moved', moved)
    });
  });
 };
@@ -26,12 +26,12 @@ const toServerSideType = columnType => {
    case 'notifications':
    case 'public':
    case 'thread':
-      return columnType;
+      return columnType
    default:
      if (columnType.indexOf('list:') > -1) {
-        return 'home';
+        return 'home'
      } else {
-        return 'public'; // community, account, hashtag
+        return 'public' // community, account, hashtag
      }
  }
 };
@@ -66,6 +66,7 @@ export const regexFromFilters = filters => {
 export const makeGetStatus = () => {
  return createSelector(
    [
+      (state) => state,
      (state, { id }) => state.getIn(['statuses', id]),
      (state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'quote_of_id'])]),
      (state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
@@ -76,19 +77,33 @@ export const makeGetStatus = () => {
      getFilters,
    ],

-    (statusBase, quotedStatus, statusRepost, accountBase, accountQuoted, accountRepost, username, filters) => {
+    (state, statusBase, quotedStatus, statusRepost, accountBase, accountQuoted, accountRepost, username, filters) => {
      if (!statusBase) {
-        return null;
+        return null
      }

      const accountUsername = accountBase.get('acct');
      //Must be owner of status if username exists
      if (accountUsername !== username && username !== undefined) {
-        return null;
+        return null
      }

      if (statusRepost) {
-        statusRepost = statusRepost.set('account', accountRepost);
+        statusRepost = statusRepost.set('account', accountRepost)
+
+        //Check if theres a quoted post that
+        const statusRepostQuoteId = statusRepost.get('quote_of_id')
+        if (!!statusRepostQuoteId) {
+          //Get repost's quoted post
+          let repostedQuotedStatus = state.getIn(['statuses', statusRepostQuoteId])
+          if (repostedQuotedStatus) {
+            //Get/set account and set quoted_status
+            const repostedQuotedStatusAccount = state.getIn(['accounts', repostedQuotedStatus.get('account')])
+            repostedQuotedStatus = repostedQuotedStatus.set('account', repostedQuotedStatusAccount)
+
+            statusRepost = statusRepost.set('quoted_status', repostedQuotedStatus)
+          }
+        }
      } else {
        statusRepost = null;
      }
@@ -97,6 +112,8 @@ export const makeGetStatus = () => {
        quotedStatus = quotedStatus.set('account', accountQuoted);
      }

+      //Find ancestor status
+
      const regex = (accountRepost || accountBase).get('id') !== me && regexFromFilters(filters);
      const filtered = regex && regex.test(statusBase.get('reblog') ? statusRepost.get('search_index') : statusBase.get('search_index'));

--- a/app/javascript/gabsocial/utils/cursor_token_match.js
+++ b/app/javascript/gabsocial/utils/cursor_token_match.js
@@ -12,8 +12,6 @@ export function textAtCursorMatchesToken(str, caretPosition, searchTokens) {
    word = str.slice(left, right + caretPosition);
  }

-  console.log("left, right, word, caretPosition:", left, right, word, caretPosition)
-
  if (!word || word.trim().length < 2 || searchTokens.indexOf(word[0]) === -1) {
    return [null, null];
  }
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -109,6 +109,10 @@ body {
  min-height: 18px;
 }

+.statusContent p:not(:last-of-type) {
+  margin-bottom: 18px;
+}
+
 .statusContent em {
  font-style: italic;
 }
@@ -345,6 +349,10 @@ body {
 .bgDanger { background-color: var(--color_red); }
 .bgDangerDark_onHover:hover { background-color: var(--color_red-dark); }

+.bgPro { background-color: var(--color_gold); }
+.bgDonor { background-color: #4DA6FF; }
+.bgInvestor { background-color: #6DD900; }
+
 /*  */

 .colorPrimary { color: var(--text_color_primary); }
@@ -389,7 +397,6 @@ body {

 /*  */

-.lineHeight0825 { line-height: 0.825em; }
 .lineHeight125 { line-height: 1.25em; }
 .lineHeight15 { line-height: 1.5em; }
 .lineHeight2 { line-height: 2em; }
@@ -424,6 +431,7 @@ body {
 .height350PX { height: 350px; }
 .height260PX { height: 260px; }
 .height220PX { height: 220px; }
+.height215PX { height: 215px; }
 .height158PX { height: 158px; }
 .height122PX { height: 122px; }
 .height72PX { height: 72px; }
@@ -439,6 +447,7 @@ body {

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

 .width100PC { width: 100%; }
 .width50PC { width: 50%; }
@@ -692,6 +701,7 @@ body {
 .boxShadow1 { box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .25); }
 .boxShadowPopover { box-shadow: 0 0 15px -5px rgba(0,0,0,0.15); }
 .boxShadowBlock { box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+.boxShadowDot { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #000; }

 .boxShadowNone .boxShadowBlock {
  box-shadow: none !important;
@@ -745,6 +755,23 @@ body {
  width: 20px;
 }

+:global(.invisible) {
+  font-size: 0px;
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+}
+
+:global(.ellipsis) {
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+  color: inherit;
+  user-select: none;
+}
+
 /* .videoPlayerVolume:before {
  content: '';
  display: block;