Progress

2020-12-09 15:02:43 -05:00
parent f9c1246fac
commit 6c13144fbc
24 changed files with 577 additions and 416 deletions
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -8,6 +8,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import {
  favorite,
  unfavorite,
+  repost,
+  unrepost,
 } from '../actions/interactions'
 import { replyCompose } from '../actions/compose'
 import { openModal } from '../actions/modal'
@@ -15,8 +17,9 @@ import { openPopover } from '../actions/popover'
 import { makeGetStatus } from '../selectors'
 import {
  CX,
+  MODAL_BOOST,
 } from '../constants'
-import { me } from '../initial_state'
+import { me, boostModal } from '../initial_state'
 import Avatar from './avatar'
 import Button from './button'
 import CommentHeader from './comment_header'
@@ -49,6 +52,10 @@ class Comment extends ImmutablePureComponent {
    this.props.onFavorite(this.props.status)
  }

+  handleOnRepost = () => {
+    this.props.onRepost(this.props.status)
+  }
+
  handleOnOpenStatusOptions = () => {
    this.props.onOpenStatusOptions(this.moreNode, this.props.status)
  }
@@ -57,6 +64,26 @@ class Comment extends ImmutablePureComponent {
    this.setState({ showMedia: !this.state.showMedia })
  }

+  handleOnThreadMouseEnter = (event) => {
+    if (event.target) {
+      const threadKey = event.target.getAttribute('data-threader-indent')
+      const elems = document.querySelectorAll(`[data-threader-indent="${threadKey}"]`)
+      elems.forEach((elem) => elem.classList.add('thread-hovering'))
+    }
+  }
+  
+  handleOnThreadMouseLeave = (event) => {
+    if (event.target) {
+      const threadKey = event.target.getAttribute('data-threader-indent')
+      const elems = document.querySelectorAll(`[data-threader-indent="${threadKey}"]`)
+      elems.forEach((elem) => elem.classList.remove('thread-hovering'))
+    }
+  }
+  
+  handleOnThreadClick = (event) => {
+    // : todo :
+  }
+
  setMoreNode = (c) => {
    this.moreNode = c
  }
@@ -81,7 +108,7 @@ class Comment extends ImmutablePureComponent {
    }

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

    const contentClasses = CX({
@@ -95,8 +122,28 @@ class Comment extends ImmutablePureComponent {
    })

    return (
-      <div className={[_s.d, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
-        <div className={_s.d} style={style}>
+      <div className={[_s.d, _s.px15, _s.py5].join(' ')} data-comment={status.get('id')}>
+        {
+          indent > 0 &&
+          <div className={[_s.d, _s.z3, _s.flexRow, _s.posAbs, _s.topNeg20PX, _s.left0, _s.bottom20PX, _s.aiCenter, _s.jcCenter].join(' ')}>
+            {Array.apply(null, {
+              length: indent
+            }).map((_, i) => (
+              <button
+                key={`thread-${status.get('id')}-${i}`}
+                data-threader
+                data-threader-indent={i}
+                onMouseEnter={this.handleOnThreadMouseEnter}
+                onMouseLeave={this.handleOnThreadMouseLeave}
+                onClick={this.handleOnThreadClick}
+                className={[_s.d, _s.w14PX, _s.h100PC, _s.outlineNone, _s.bgTransparent, _s.ml20, _s.cursorPointer].join(' ')}
+              >
+                <span className={[_s.d, _s.w2PX, _s.h100PC, _s.mlAuto, _s.mr2, _s.bgSubtle].join(' ')} />
+              </button>
+            ))}
+          </div>
+        }
+        <div className={[_s.d, _s.mb10].join(' ')} style={style}>

          <div className={[_s.d, _s.flexRow].join(' ')}>
            <NavLink
@@ -104,7 +151,7 @@ class Comment extends ImmutablePureComponent {
              title={status.getIn(['account', 'acct'])}
              className={[_s.d, _s.mr10, _s.pt5].join(' ')}
            >
-              <Avatar account={status.get('account')} size={32} />
+              <Avatar account={status.get('account')} size={30} />
            </NavLink>

            <div className={[_s.d, _s.flexShrink1, _s.maxW100PC42PX].join(' ')}>
@@ -145,6 +192,10 @@ class Comment extends ImmutablePureComponent {
                  title={intl.formatMessage(messages.reply)}
                  onClick={this.handleOnReply}
                />
+                <CommentButton
+                  title={intl.formatMessage(status.get('reblogged') ? messages.unrepost : messages.repost)}
+                  onClick={this.handleOnRepost}
+                />
                <div ref={this.setMoreNode}>
                  <CommentButton
                    title='···'
@@ -193,6 +244,8 @@ CommentButton.propTypes = {

 const messages = defineMessages({
  reply: { id: 'status.reply', defaultMessage: 'Reply' },
+  repost: { id: 'status.repost', defaultMessage: 'Repost' },
+  unrepost: { id: 'status.unrepost', defaultMessage: 'Unrepost' },
  like: { id: 'status.like', defaultMessage: 'Like' },
  unlike: { id: 'status.unlike', defaultMessage: 'Unlike' },
 })
@@ -227,6 +280,24 @@ const mapDispatchToProps = (dispatch) => ({
      dispatch(favorite(status))
    }
  },
+  onRepost(status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
+    const alreadyReposted = status.get('reblogged')
+
+    if (boostModal && !alreadyReposted) {
+      dispatch(openModal(MODAL_BOOST, {
+        status,
+        onRepost: () => dispatch(repost(status)),
+      }))
+    } else {
+      if (alreadyReposted) {
+        dispatch(unrepost(status))
+      } else {
+        dispatch(repost(status))
+      }
+    }
+  },
  onOpenStatusOptions(targetRef, status) {
    dispatch(openPopover('STATUS_OPTIONS', {
      targetRef,
@@ -260,6 +331,7 @@ Comment.propTypes = {
  isHighlighted: PropTypes.bool,
  onReply: PropTypes.func.isRequired,
  onFavorite: PropTypes.func.isRequired,
+  onRepost: PropTypes.func.isRequired,
  onOpenStatusOptions: PropTypes.func.isRequired,
  onOpenLikes: PropTypes.func.isRequired,
  onOpenReposts: PropTypes.func.isRequired,
--- a/app/javascript/gabsocial/components/modal/compose_modal.js
+++ b/app/javascript/gabsocial/components/modal/compose_modal.js
@@ -5,8 +5,11 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { openModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
-import ModalLayout from './modal_layout'
 import TimelineComposeBlock from '../timeline_compose_block'
+import Block from '../block'
+import Heading from '../heading'
+import Text from '../text'
+import Button from '../button'

 class ComposeModal extends ImmutablePureComponent {

@@ -32,6 +35,10 @@ class ComposeModal extends ImmutablePureComponent {
    }
  }

+  onHandleSubmit = () => {
+    
+  }
+
  render() {
    const {
      intl,
@@ -42,13 +49,35 @@ class ComposeModal extends ImmutablePureComponent {
    const title = isEditing ? messages.edit : isComment ? messages.comment : messages.title

    return (
-      <ModalLayout
-        noPadding
-        title={intl.formatMessage(title)}
-        onClose={this.onClickClose}
-      >
-        <TimelineComposeBlock modal />
-      </ModalLayout>
+      <div style={{width: '512px'}} className={[_s.d, _s.modal].join(' ')}>
+        <Block>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+            <Button
+              backgroundColor='none'
+              title={intl.formatMessage(messages.close)}
+              onClick={this.onClickClose}
+              color='secondary'
+              icon='close'
+              iconSize='10px'
+            />
+            <Heading size='h2'>
+              {intl.formatMessage(title)}
+            </Heading>
+            <Button
+              backgroundColor='none'
+              title={intl.formatMessage(messages.close)}
+              className={_s.mlAuto}
+              onClick={this.onHandleSubmit}
+              color='secondary'
+            >
+              <Text>Post</Text>
+            </Button>
+          </div>
+          <div className={[_s.d].join(' ')}>
+            <TimelineComposeBlock isModal />
+          </div>
+        </Block>
+      </div>
    )
  }
 }
@@ -58,6 +87,7 @@ const messages = defineMessages({
  title: { id: 'navigation_bar.compose', defaultMessage: 'Compose new gab' },
  comment: { id: 'navigation_bar.compose_comment', defaultMessage: 'Compose new comment' },
  edit: { id: 'navigation_bar.edit_gab', defaultMessage: 'Edit' },
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
 })

 const mapStateToProps = (state) => {
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -99,7 +99,7 @@ const mapDispatchToProps = (dispatch) => ({
 GroupsPanel.propTypes = {
  groupIds: ImmutablePropTypes.list,
  isLazy: PropTypes.bool, 
-  onFetchGroups: PropTypes.func.isRequired,
+  onFetchGroupsByTab: PropTypes.func.isRequired,
  shouldLoad: PropTypes.bool,
  groupType: PropTypes.string,
 }
--- a/app/javascript/gabsocial/components/popover/status_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_options_popover.js
@@ -160,12 +160,6 @@ class StatusOptionsPopover extends ImmutablePureComponent {

    if (me) {
      if (isReply) {
-        menu.push({
-          icon: 'repost',
-          hideArrow: true,
-          title: intl.formatMessage(status.get('reblogged') ? messages.cancel_repost_private : messages.repost_private),
-          onClick: this.handleRepostClick,
-        })
        menu.push({
          icon: 'pencil',
          hideArrow: true,
--- a/app/javascript/gabsocial/components/sidebar_panel_group.js
+++ b/app/javascript/gabsocial/components/sidebar_panel_group.js
@@ -35,7 +35,7 @@ class SidebarPanelGroup extends React.PureComponent {
    return (
      <React.Fragment>
        {
-          layout.map((panel) => {
+          layout.map((panel, i) => {
            if (!panel) return null

            if (typeof panel !== 'function' || panel.key === 'status-promotion-panel') {
@@ -44,6 +44,7 @@ class SidebarPanelGroup extends React.PureComponent {

            return (
              <Bundle
+                key={`sidebar-panel-group-item-${i}`}
                fetchComponent={panel}
                loading={this.renderLoading}
                error={this.renderError}
--- a/app/javascript/gabsocial/components/status_list.js
+++ b/app/javascript/gabsocial/components/status_list.js
@@ -403,7 +403,6 @@ StatusList.propTypes = {
  timelineId: PropTypes.string,
  queuedItemSize: PropTypes.number,
  onDequeueTimeline: PropTypes.func.isRequired,
-  onClearTimeline: PropTypes.func.isRequired,
  onScrollToTop: PropTypes.func.isRequired,
  onScroll: PropTypes.func.isRequired,
  onFetchContext: PropTypes.func.isRequired,
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -19,15 +19,15 @@ class TimelineComposeBlock extends ImmutablePureComponent {
      account,
      size,
      intl,
-      modal,
+      isModal,
      ...rest
    } = this.props

-    if (modal) {
+    if (isModal) {
      return (
        <section className={_s.d}>
          <div className={[_s.d, _s.flexRow].join(' ')}>
-            <ComposeFormContainer {...rest} modal={modal} />
+            <ComposeFormContainer {...rest} isModal={isModal} />
          </div>
        </section>
      )
@@ -69,7 +69,7 @@ TimelineComposeBlock.propTypes = {
  intl: PropTypes.object.isRequired,
  account: ImmutablePropTypes.map.isRequired,
  size: PropTypes.number,
-  modal: PropTypes.bool,
+  isModal: PropTypes.bool,
 }

 TimelineComposeBlock.defaultProps = {
--- a/app/javascript/gabsocial/components/user_stat.js
+++ b/app/javascript/gabsocial/components/user_stat.js
@@ -71,7 +71,7 @@ UserStat.propTypes = {
    PropTypes.number,
    PropTypes.object,
  ]).isRequired,
-  isCentered: PropTypes.bool.isRequired,
+  isCentered: PropTypes.bool,
 }

 export default UserStat
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button_list.js
@@ -43,10 +43,10 @@ class ComposeExtraButtonList extends React.PureComponent {
    

  render() {
-    const { isMatch, edit, hidePro } = this.props
+    const { isMatch, edit, hidePro, isModal } = this.props
    const { height } = this.state

-    const small = height <= 660
+    const small = height <= 660 || isModal

    const containerClasses = CX({
      d: 1,
@@ -83,6 +83,7 @@ ComposeExtraButtonList.propTypes = {
  hidePro: PropTypes.bool,
  edit: PropTypes.bool,
  isMatch: PropTypes.bool,
+  isModal: PropTypes.bool,
 }

 export default ComposeExtraButtonList
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -35,14 +35,14 @@ import Text from '../../../components/text'
 import Icon from '../../../components/icon'
 import ComposeExtraButtonList from './compose_extra_button_list'
 import ComposeDestinationHeader from './compose_destination_header'
+import ComposeFormSubmitButton from './compose_form_submit_button'

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

@@ -73,12 +73,19 @@ class ComposeForm extends ImmutablePureComponent {
  }

  handleClick = (e) => {
-    if (!this.form) return false;
+    const { isStandalone, isModalOpen, shouldCondense } = this.props
+    
+    if (!this.form) return false
    if (e.target) {
      if (e.target.classList.contains('react-datepicker__time-list-item')) return false
    }
    if (!this.form.contains(e.target)) {
-      this.handleClickOutside();
+      this.handleClickOutside()
+    } else {
+      if (!isStandalone && !isModalOpen && !shouldCondense) {
+        this.props.openComposeModal()
+        return false
+      }
    }
  }

@@ -287,7 +294,7 @@ class ComposeForm extends ImmutablePureComponent {
                      isDisabled={disabledButton}
                      className={_s.px10}
                    >
-                      {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+                      {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.post)}
                    </Button>
                  </div>

@@ -307,15 +314,11 @@ class ComposeForm extends ImmutablePureComponent {
      )
    }

-    if (isModalOpen) {
-      //
-    }
-
    if (isStandalone || isModalOpen) {
      return (
        <div className={[_s.d, _s.w100PC, _s.flexGrow1, _s.bgTertiary].join(' ')}>
          
-          <div className={[_s.d, _s.calcMaxH370PX, _s.overflowYScroll, _s.boxShadowBlock, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.pb10, _s.calcMaxH370PX, _s.overflowYScroll, _s.boxShadowBlock, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
            <ComposeDestinationHeader account={account} />

            <div
@@ -327,11 +330,7 @@ class ComposeForm extends ImmutablePureComponent {
              {
                !!reduxReplyToId && isModalOpen && isMatch &&
                <div className={[_s.d, _s.px15, _s.py10, _s.mt5].join(' ')}>
-                  <StatusContainer
-                    contextType='compose'
-                    id={reduxReplyToId}
-                    isChild
-                  />
+                  <StatusContainer contextType='compose' id={reduxReplyToId} isChild />
                </div>
              }

@@ -374,10 +373,7 @@ class ComposeForm extends ImmutablePureComponent {
              {
                (isUploading || anyMedia) &&
                <div className={[_s.d, _s.px15, _s.mt5].join(' ')}>
-                  <UploadForm
-                    replyToId={replyToId}
-                    isModalOpen={isModalOpen}
-                  />
+                  <UploadForm replyToId={replyToId} isModalOpen={isModalOpen} />
                </div>
              }

@@ -391,33 +387,15 @@ class ComposeForm extends ImmutablePureComponent {
              {
                !!quoteOfId && isModalOpen && isMatch &&
                <div className={[_s.d, _s.px15, _s.py10, _s.mt5].join(' ')}>
-                  <StatusContainer
-                    contextType='compose'
-                    id={quoteOfId}
-                    isChild
-                  />
+                  <StatusContainer contextType='compose' id={quoteOfId} isChild />
                </div>
              }
-
            </div>
          </div>

-         <div className={[_s.d, _s.w100PC, _s.pt10, _s.px10].join(' ')}>
-            <Button
-              isBlock
-              isDisabled={disabledButton}
-              backgroundColor={disabledButton ? 'secondary' : 'brand'}
-              color={disabledButton ? 'tertiary' : 'white'}
-              className={[_s.fs15PX, _s.px15, _s.flexGrow1, _s.mlAuto].join(' ')}
-              onClick={this.handleSubmit}
-            >
-              <Text color='inherit' weight='medium' align='center'>
-                {intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.publishEdit : messages.publish)}
-              </Text>
-            </Button>
-          </div>
+          { !isModalOpen && <ComposeFormSubmitButton /> }
            
-          <ComposeExtraButtonList isMatch={isMatch} hidePro={hidePro} edit={edit} />
+          <ComposeExtraButtonList isMatch={isMatch} hidePro={hidePro} edit={edit} isModal={isModalOpen} />
        </div>
      )
    }
@@ -431,26 +409,13 @@ class ComposeForm extends ImmutablePureComponent {
        <Text className={[_s.d, _s.px15, _s.pt15, _s.pb10].join(' ')} size='medium' color='tertiary'>
          {intl.formatMessage((shouldCondense || !!reduxReplyToId) && isMatch ? messages.commentPlaceholder : messages.placeholder)}
        </Text>
-
        <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mt5, _s.px10, _s.flexWrap].join(' ')}>
          <UploadButton />
          <EmojiPickerButton isMatch={isMatch} />
-          <Responsive min={BREAKPOINT_EXTRA_EXTRA_SMALL}>
-            <PollButton />
-          </Responsive>
-          <Button
-            isOutline
-            isDisabled={disabledButton}
-            backgroundColor='none'
-            color='brand'
-            className={[_s.fs15PX, _s.px15, _s.flexGrow1, _s.maxW212PX, _s.mlAuto].join(' ')}
-            onClick={this.handleSubmit}
-          >
-            <Text color='inherit' weight='medium' align='center'>
-              {intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.publishEdit : messages.publish)}
-            </Text>
-          </Button>
+          <PollButton />
+          <ComposeFormSubmitButton />
        </div>
+        <div className={[_s.d, _s.posAbs, _s.z2, _s.left0, _s.right0, _s.bottom0, _s.top0].join(' ')} />
      </div>
    )
  }
@@ -481,6 +446,7 @@ ComposeForm.propTypes = {
  onFetchSuggestions: PropTypes.func.isRequired,
  onSuggestionSelected: PropTypes.func.isRequired,
  onChangeSpoilerText: PropTypes.func.isRequired,
+  openComposeModal: PropTypes.func.isRequired,
  onPaste: PropTypes.func.isRequired,
  showSearch: PropTypes.bool,
  anyMedia: PropTypes.bool,
--- a/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form_submit_button.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CX } from '../../../constants'
+import Button from '../../../components/button'
+import Text from '../../../components/text'
+
+class ComposeFormSubmitButton extends React.PureComponent {
+
+  render() {
+    const {
+      title,
+      active,
+      small,
+      disabledButton,
+    } = this.props
+
+    const containerClasses = CX({
+      d: 1,
+      mr5: 1,
+      jcCenter: 1,
+      h40PX: 1,
+    })
+
+    const btnClasses = CX({
+      d: 1,
+      circle: 1,
+      noUnderline: 1,
+      font: 1,
+      cursorPointer: 1,
+      textAlignCenter: 1,
+      outlineNone: 1,
+      bgTransparent: 1,
+      flexRow: 1,
+      bgSubtle_onHover: !active,
+      bgBrandLight: active,
+      py10: 1,
+      px10: 1,
+    })
+
+    const iconClasses = CX({
+      cSecondary: !active,
+      cWhite: active,
+      mr10: 1,
+      py2: small,
+      ml10: small,
+    })
+
+    const iconSize = !small ? '18px' : '16px'
+    const textColor = !active ? 'primary' : 'white'
+
+    return (
+      <div className={containerClasses}>
+        <div className={[_s.d, _s.w100PC, _s.py10, _s.px10].join(' ')}>
+          <Button
+            isBlock
+            isDisabled={disabledButton}
+            backgroundColor={disabledButton ? 'secondary' : 'brand'}
+            color={disabledButton ? 'tertiary' : 'white'}
+            className={[_s.fs15PX, _s.px15, _s.flexGrow1, _s.mlAuto].join(' ')}
+            onClick={this.handleSubmit}
+          >
+            <Text color='inherit' weight='medium' align='center'>
+              post
+            </Text>
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+// {intl.formatMessage(scheduledAt ? messages.schedulePost : edit ? messages.postEdit : messages.post)}
+ComposeFormSubmitButton.propTypes = {
+  
+}
+
+export default ComposeFormSubmitButton
--- a/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
+++ b/app/javascript/gabsocial/features/compose/containers/compose_form_container.js
@@ -13,6 +13,8 @@ import {
  uploadCompose,
  changeScheduledAt,
 } from '../../../actions/compose'
+import { openModal } from '../../../actions/modal'
+import { MODAL_COMPOSE } from '../../../constants'
 import { me } from '../../../initial_state'

 const mapStateToProps = (state, props) => {
@@ -20,7 +22,7 @@ const mapStateToProps = (state, props) => {
    replyToId,
    isStandalone,
    shouldCondense,
-    modal,
+    isModal,
  } = props

  const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
@@ -37,7 +39,7 @@ const mapStateToProps = (state, props) => {

  if (isModalOpen) isMatch = true
  if (isModalOpen && shouldCondense) isMatch = false
-  if (isModalOpen && (!modal && !isStandalone)) isMatch = false
+  if (isModalOpen && (!isModal && !isStandalone)) isMatch = false
  
  if (!isMatch) {
    return {
@@ -126,6 +128,10 @@ const mapDispatchToProps = (dispatch, { isStandalone }) => ({
  setScheduledAt(date) {
    dispatch(changeScheduledAt(date))
  },
+
+  openComposeModal() {
+    dispatch(openModal(MODAL_COMPOSE))
+  },
 })

 function mergeProps(stateProps, dispatchProps, ownProps) {
--- a/app/javascript/gabsocial/features/deck.js
+++ b/app/javascript/gabsocial/features/deck.js
@@ -43,7 +43,6 @@ class Deck extends React.PureComponent {

  componentDidMount () {
    this.props.dispatch(deckConnect())
-    console.log("this.props.isPro:", this.props)
    if (!this.props.isPro) this.handleOnOpenProUpgradeModal()
  }

@@ -52,7 +51,6 @@ class Deck extends React.PureComponent {
  }

  handleOnOpenProUpgradeModal = () => {
-    console.log("handleOnOpenProUpgradeModal")
    this.props.dispatch(openModal(MODAL_PRO_UPGRADE))
  }

@@ -71,7 +69,7 @@ class Deck extends React.PureComponent {
  }

  getDeckColumn = (deckColumn, index) => {
-    if (!deckColumn || !isPro) return null
+    if (!deckColumn || !this.props.isPro) return null

    let Component = null
    let componentParams = {}
@@ -178,7 +176,7 @@ class Deck extends React.PureComponent {
              <DeckColumn title='Gab Deck for GabPRO' icon='pro' noButtons>
                <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
                  <Text>
-                    Gab Deck for GabPRO
+                    Gab Deck for GabPRO. Some text about what it does and some buttons on going pro to use it.
                  </Text>
                </div>
              </DeckColumn>
@@ -188,7 +186,7 @@ class Deck extends React.PureComponent {
        }
        {
          !isEmpty && isPro &&
-          gabDeckOrder.splice(0, GAB_DECK_MAX_ITEMS).map((deckOption, i) => this.getDeckColumn(deckOption, i))
+          gabDeckOrder.map((deckOption, i) => this.getDeckColumn(deckOption, i))
        }
      </SortableContainer>
    )
--- a/app/javascript/gabsocial/locales/es.json
+++ b/app/javascript/gabsocial/locales/es.json
@@ -14,7 +14,7 @@
  "account.follows": "Sigue",
  "account.follows.empty": "Este usuario todavía no sigue a nadie.",
  "account.follows_you": "Te sigue",
-  "account.hide_reposts": "Ocultar retoots de @{name}",
+  "account.hide_reposts": "Ocultar reposts de @{name}",
  "account.link_verified_on": "Ownership of this link was checked on {date}",
  "account.locked_info": "This account privacy status is set to locked. The owner manually reviews who can follow them.",
  "account.media": "Media",
@@ -28,7 +28,7 @@
  "account.report": "Reportar a @{name}",
  "account.requested": "Esperando aprobación",
  "account.share": "Compartir el perfil de @{name}",
-  "account.show_reposts": "Mostrar retoots de @{name}",
+  "account.show_reposts": "Mostrar reposts de @{name}",
  "account.unblock": "Desbloquear a @{name}",
  "account.unblock_domain": "Mostrar a {domain}",
  "account.unendorse": "No mostrar en el perfil",
@@ -155,7 +155,7 @@
  "hashtag.column_settings.tag_mode.none": "None of these",
  "hashtag.column_settings.tag_toggle": "Include additional tags in this column",
  "home.column_settings.basic": "Básico",
-  "home.column_settings.show_reposts": "Mostrar retoots",
+  "home.column_settings.show_reposts": "Mostrar reposts",
  "home.column_settings.show_replies": "Mostrar respuestas",
  "intervals.full.days": "{number, plural, one {# day} other {# days}}",
  "intervals.full.hours": "{number, plural, one {# hour} other {# hours}}",
@@ -263,7 +263,7 @@
  "notifications.column_settings.mention": "Menciones:",
  "notifications.column_settings.poll": "Poll results:",
  "notifications.column_settings.push": "Notificaciones push",
-  "notifications.column_settings.repost": "Retoots:",
+  "notifications.column_settings.repost": "reposts:",
  "notifications.column_settings.show": "Mostrar en columna",
  "notifications.column_settings.sound": "Reproducir sonido",
  "notifications.filter.all": "All",
--- a/app/javascript/gabsocial/pages/groups_page.js
+++ b/app/javascript/gabsocial/pages/groups_page.js
@@ -79,6 +79,10 @@ class GroupsPage extends React.PureComponent {
            to: isPro ? '/groups/create' : undefined,
            onClick: isPro ? undefined : this.handleOpenProUpgradeModal,
          },
+          {
+            icon: 'search',
+            to: '/search',
+          },
        ]}
        tabs={tabs}
        page='groups'
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -95,7 +95,7 @@ class HomePage extends React.PureComponent {
          UserPanel,
          ProgressPanel,
          <WrappedBundle component={ProPanel} componentParams={{ isPro: isPro }} />,
-          <WrappedBundle component={TrendsBreakingPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={TrendsBreakingPanel} />,
          <WrappedBundle component={ShopPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
          <WrappedBundle component={ListsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
          <WrappedBundle component={UserSuggestionsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -491,6 +491,7 @@ pre {
 /*  */

 .topNeg50PX { top: -50px; }
+.topNeg20PX { top: -20px; }
 .top0 { top: 0; }
 .top120PX { top: 120px; }
 .top60PX { top: 60px; }
@@ -499,6 +500,7 @@ pre {
 .top50PC { top: 50%; }

 .bottom0 { bottom: 0; }
+.bottom20PX { bottom: 20px; }
 .bottom55PX { bottom: 55px; }
 .bottom60PX { bottom: 60px; }
 .bottomAuto { bottom: auto; }
@@ -617,6 +619,7 @@ pre {
 .w14PX { width: 14px; }
 .w10PX { width: 10px; }
 .w4PX { width: 4px; }
+.w2PX { width: 2px; }
 .w1PX { width: 1px; }
 .wAuto { width: auto; }

@@ -808,6 +811,7 @@ pre {
 .mr2 { margin-right: 2px; }
 .mrAuto { margin-right: auto; }

+.ml20 { margin-left: 20px; }
 .ml15 { margin-left: 15px; }
 .ml10 { margin-left: 10px; }
 .ml7 { margin-left: 7px; }
@@ -1205,6 +1209,11 @@ pre {
  margin-bottom: 0.5rem;
 }

+/* */
+:global(.thread-hovering > span) {
+  background-color: var(--solid_color_secondary) !important;
+}
+
 /*  */

 :global(.emoji-mart-search input) {