Progress

Gemfile

@@ -56,6 +56,7 @@ gem 'http_parser.rb', '~> 0.6', git: 'https://github.com/tmm1/http_parser.rb', r
 gem 'httplog', '~> 1.3'
 gem 'idn-ruby', require: 'idn'
 gem 'kaminari', '~> 1.1'
+gem 'kramdown', '~> 2.1.0'
 gem 'link_header', '~> 0.0'
 gem 'mime-types', '~> 3.2', require: 'mime/types/columnar'
 gem 'nokogiri', '~> 1.10'
@@ -89,6 +90,7 @@ gem 'twitter-text', '~> 1.14'
 gem 'tzinfo-data', '~> 1.2019'
 gem 'webpacker', '~> 4.0'
 gem 'webpush'
+gem 'redcarpet', '~> 3.5.0'
 
 gem 'json-ld', '~> 3.0'
 gem 'json-ld-preloaded', '~> 3.0'

Gemfile.lock

@@ -311,6 +311,7 @@ GEM
       activerecord
       kaminari-core (= 1.1.1)
     kaminari-core (1.1.1)
+    kramdown (2.1.0)
     launchy (2.4.3)
       addressable (~> 2.3)
     letter_opener (1.7.0)
@@ -478,6 +479,7 @@ GEM
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.3.3)
       rdf (>= 2.2, < 4.0)
+    redcarpet (3.5.0)
     redis (4.1.2)
     redis-actionpack (5.0.2)
       actionpack (>= 4.0, < 6)
@@ -701,6 +703,7 @@ DEPENDENCIES
   json-ld (~> 3.0)
   json-ld-preloaded (~> 3.0)
   kaminari (~> 1.1)
+  kramdown (~> 2.1.0)
   letter_opener (~> 1.7)
   letter_opener_web (~> 1.3)
   link_header (~> 0.0)
@@ -739,6 +742,7 @@ DEPENDENCIES
   rails-i18n (~> 5.1)
   rails-settings-cached (~> 0.6)
   rdf-normalize (~> 0.3)
+  redcarpet (~> 3.5.0)
   redis (~> 4.1)
   redis-namespace (~> 1.5)
   redis-rails (~> 5.0)

app/controllers/api/v1/statuses_controller.rb

@@ -5,8 +5,8 @@ class Api::V1::StatusesController < Api::BaseController
 
   before_action -> { authorize_if_got_token! :read, :'read:statuses' }, except: [:create, :update, :destroy]
   before_action -> { doorkeeper_authorize! :write, :'write:statuses' }, only:   [:create, :update, :destroy]
-  before_action :require_user!, except:  [:show, :context, :card]
+  before_action :require_user!, except:  [:show, :comments, :context, :card]
-  before_action :set_status, only:       [:show, :context, :card, :update, :revisions]
+  before_action :set_status, only:       [:show, :comments, :context, :card, :update, :revisions]
 
   respond_to :json
 
@@ -14,13 +14,24 @@ class Api::V1::StatusesController < Api::BaseController
   # breaking backwards-compatibility. Arbitrarily high number to cover most
   # conversations as quasi-unlimited, it would be too much work to render more
   # than this anyway
-  CONTEXT_LIMIT = 4_096
+  # : TODO :
+  CONTEXT_LIMIT = 4_096 
 
   def show
     @status = cache_collection([@status], Status).first
     render json: @status, serializer: REST::StatusSerializer
   end
 
+  def comments
+    descendants_results = @status.descendants(CONTEXT_LIMIT, current_account)
+    loaded_descendants  = cache_collection(descendants_results, Status)
+    
+    @context = Context.new(descendants: loaded_descendants)
+    statuses = [@status] + @context.descendants
+
+    render json: @context, serializer: REST::ContextSerializer, relationships: StatusRelationshipsPresenter.new(statuses, current_user&.account_id)
+  end
+
   def context
     ancestors_results   = @status.in_reply_to_id.nil? ? [] : @status.ancestors(CONTEXT_LIMIT, current_account)
     descendants_results = @status.descendants(CONTEXT_LIMIT, current_account)
@@ -42,6 +53,7 @@ class Api::V1::StatusesController < Api::BaseController
   def create
     @status = PostStatusService.new.call(current_user.account,
                                          text: status_params[:status],
+                                         markdown: status_params[:markdown],
                                          thread: status_params[:in_reply_to_id].blank? ? nil : Status.find(status_params[:in_reply_to_id]),
                                          media_ids: status_params[:media_ids],
                                          sensitive: status_params[:sensitive],
@@ -93,6 +105,7 @@ class Api::V1::StatusesController < Api::BaseController
   def status_params
     params.permit(
       :status,
+      :markdown,
       :in_reply_to_id,
       :quote_of_id,
       :sensitive,

app/javascript/gabsocial/actions/compose.js

@@ -77,10 +77,12 @@ export const ensureComposeIsVisible = (getState, routerHistory) => {
   }
 };
 
-export function changeCompose(text) {
+export function changeCompose(text, markdown) {
+  console.log("changeCompose:", markdown)
   return {
     type: COMPOSE_CHANGE,
     text: text,
+    markdown: markdown,
   };
 };
 
@@ -173,7 +175,7 @@ export function submitCompose(routerHistory, group) {
     if (!me) return;
 
     let status = getState().getIn(['compose', 'text'], '');
-    const statusMarkdown = getState().getIn(['compose', 'text_markdown'], '');
+    const markdown = getState().getIn(['compose', 'markdown'], '');
     const media  = getState().getIn(['compose', 'media_attachments']);
 
     // : hack :
@@ -182,11 +184,13 @@ export function submitCompose(routerHistory, group) {
       const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
       return hasProtocol ? match : `http://${match}`
     })
-    // statusMarkdown = statusMarkdown.replace(urlRegex, (match) =>{
+    // markdown = statusMarkdown.replace(urlRegex, (match) =>{
     //   const hasProtocol = match.startsWith('https://') || match.startsWith('http://')
     //   return hasProtocol ? match : `http://${match}`
     // })
 
+    console.log("markdown:", markdown)
+
     dispatch(submitComposeRequest());
     dispatch(closeModal());
 
@@ -202,7 +206,7 @@ export function submitCompose(routerHistory, group) {
 
     api(getState)[method](endpoint, {
       status,
-      // statusMarkdown,
+      markdown,
       scheduled_at,
       in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
       quote_of_id: getState().getIn(['compose', 'quote_of_id'], null),

app/javascript/gabsocial/actions/importer/index.js

@@ -1,4 +1,5 @@
 import { normalizeAccount, normalizeStatus, normalizePoll } from './normalizer';
+import { fetchContext } from '../statuses'
 
 export const ACCOUNT_IMPORT  = 'ACCOUNT_IMPORT';
 export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
@@ -78,6 +79,10 @@ export function importFetchedStatuses(statuses) {
       if (status.poll && status.poll.id) {
         pushUnique(polls, normalizePoll(status.poll));
       }
+
+      // if (status.replies_count > 0) {
+      //   dispatch(fetchComments(status.id));
+      // }
     }
 
     statuses.forEach(processStatus);

app/javascript/gabsocial/actions/importer/normalizer.js

@@ -62,9 +62,10 @@ export function normalizeStatus(status, normalOldStatus) {
     const spoilerText   = normalStatus.spoiler_text || '';
     const searchContent = [spoilerText, status.content].join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
     const emojiMap      = makeEmojiMap(normalStatus);
+    const theContent = !!normalStatus.rich_content ? normalStatus.rich_content : normalStatus.content;
 
     normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent;
-    normalStatus.contentHtml  = emojify(normalStatus.content, emojiMap);
+    normalStatus.contentHtml  = emojify(theContent, emojiMap);
     normalStatus.spoilerHtml  = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
     normalStatus.hidden       = expandSpoilers ? false : spoilerText.length > 0 || normalStatus.sensitive;
   }

app/javascript/gabsocial/actions/statuses.js

@@ -18,6 +18,10 @@ export const CONTEXT_FETCH_REQUEST = 'CONTEXT_FETCH_REQUEST';
 export const CONTEXT_FETCH_SUCCESS = 'CONTEXT_FETCH_SUCCESS';
 export const CONTEXT_FETCH_FAIL    = 'CONTEXT_FETCH_FAIL';
 
+export const COMMENTS_FETCH_REQUEST = 'COMMENTS_FETCH_REQUEST';
+export const COMMENTS_FETCH_SUCCESS = 'COMMENTS_FETCH_SUCCESS';
+export const COMMENTS_FETCH_FAIL    = 'COMMENTS_FETCH_FAIL';
+
 export const STATUS_MUTE_REQUEST = 'STATUS_MUTE_REQUEST';
 export const STATUS_MUTE_SUCCESS = 'STATUS_MUTE_SUCCESS';
 export const STATUS_MUTE_FAIL    = 'STATUS_MUTE_FAIL';
@@ -85,8 +89,6 @@ export function fetchStatus(id) {
   return (dispatch, getState) => {
     const skipLoading = getState().getIn(['statuses', id], null) !== null;
 
-    dispatch(fetchContext(id));
-
     if (skipLoading) {
       return;
     }
@@ -205,6 +207,24 @@ export function fetchContext(id) {
   };
 };
 
+export function fetchComments(id) {
+  return (dispatch, getState) => {
+    dispatch(fetchCommentsRequest(id));
+
+    api(getState).get(`/api/v1/statuses/${id}/comments`).then(response => {
+      dispatch(importFetchedStatuses(response.data.descendants));
+      dispatch(fetchCommentsSuccess(id, response.data.descendants));
+
+    }).catch(error => {
+      if (error.response && error.response.status === 404) {
+        dispatch(deleteFromTimelines(id));
+      }
+
+      dispatch(fetchCommentsFail(id, error));
+    });
+  };
+};
+
 export function fetchContextRequest(id) {
   return {
     type: CONTEXT_FETCH_REQUEST,
@@ -231,6 +251,30 @@ export function fetchContextFail(id, error) {
   };
 };
 
+export function fetchCommentsRequest(id) {
+  return {
+    type: COMMENTS_FETCH_REQUEST,
+    id,
+  };
+};
+
+export function fetchCommentsSuccess(id, descendants) {
+  return {
+    type: COMMENTS_FETCH_SUCCESS,
+    id,
+    descendants,
+  };
+};
+
+export function fetchCommentsFail(id, error) {
+  return {
+    type: COMMENTS_FETCH_FAIL,
+    id,
+    error,
+    skipAlert: true,
+  };
+};
+
 export function muteStatus(id) {
   return (dispatch, getState) => {
     if (!me) return;

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}

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) => {

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()
   }

app/javascript/gabsocial/components/intersection_observer_article.js

@@ -135,10 +135,7 @@ class IntersectionObserverArticle extends React.Component {
           data-id={id}
           tabIndex='0'
         >
-          {
+          {React.cloneElement(children, { isHidden: true })}
-            children &&
-            React.cloneElement(children, { hidden: true })
-          }
         </article>
       )
     }
@@ -151,10 +148,7 @@ class IntersectionObserverArticle extends React.Component {
         data-id={id}
         tabIndex='0'
       >
-        {
+        {React.cloneElement(children, { isHidden: false, isIntersecting })}
-          children &&
-          React.cloneElement(children, { hidden: false })
-        }
       </article>
     )
   }

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([

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)
     }
   }
 

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,
   }
 

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({
-      menu.push({ text: intl.formatMessage(messages.edit), action: this.handleEditClick });
+        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({
-      menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
+        icon: 'comment',
-      menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
+        hideArrow: true,
-      menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
+        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({
-        menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
+          title: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
-      }
+          href: `/admin/accounts/${status.getIn(['account', 'id'])}`
-
+        });
-      if (withGroupAdmin) {
+        menu.push({
-        menu.push({ text: intl.formatMessage(messages.group_remove_account), action: this.handleGroupRemoveAccount });
+          title: intl.formatMessage(messages.admin_status),
-        menu.push({ text: intl.formatMessage(messages.group_remove_post), action: this.handleGroupRemovePost });
+          href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}`
+        });
       }
     }
 

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();
       }
 

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: 1,
-      colorPrimary: shouldShowActive || me,
     })
 
     const iconClasses = cx({
-      fillColorSecondary: !hovering && !active && !shouldShowActive,
+      fillColorBlack: 1,
-      fillColorBlack: shouldShowActive,
     })
 
     const countClasses = cx({

app/javascript/gabsocial/components/status.js

@@ -1,48 +1,51 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePropTypes from 'react-immutable-proptypes'
-import { injectIntl, defineMessages } from 'react-intl';
+import { injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePureComponent from 'react-immutable-pure-component'
-import { HotKeys } from 'react-hotkeys';
+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 StatusActionBar from './status_action_bar'
-import Poll from './poll';
+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,
+    displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
-    // status.get('spoiler_text') && status.get('hidden')
+    status.get('spoiler_text') && status.get('hidden')
-    //   ? status.get('spoiler_text')
+      ? status.get('spoiler_text')
-    //   : status.get('search_index').slice(status.get('spoiler_text').length),
+      : 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' }),
+    intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
-    // status.getIn(['account', 'acct']),
+    `@${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,
+    onShare: PropTypes.func,
-    hidden: PropTypes.bool,
     onMoveUp: PropTypes.func,
     onMoveDown: PropTypes.func,
+    onFetchComments: PropTypes.func,
     getScrollPosition: PropTypes.func,
     updateScrollBottom: PropTypes.func,
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
-    group: ImmutablePropTypes.map,
+    contextType: PropTypes.string,
-    promoted: PropTypes.bool,
-    onOpenProUpgradeModal: PropTypes.func,
-    intl: PropTypes.object.isRequired,
-    isChild: PropTypes.bool,
   }
 
   // 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();
+      this.props.onClick()
-      return;
+      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() {
+  handleExpandedToggle = () => {
-    return <div className='media-spoiler-video' style={{ height: '110px' }} />;
+    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();
+    e.preventDefault()
-    this.props.onReply(this._properStatus(), this.context.router.history);
+    this.props.onReply(this._properStatus(), this.context.router.history)
-  };
+  }
 
   handleHotkeyFavorite = () => {
-    this.props.onFavorite(this._properStatus());
+    this.props.onFavorite(this._properStatus())
-  };
+  }
 
-  handleHotkeyBoost = e => {
+  handleHotkeyRepost = e => {
-    this.props.onRepost(this._properStatus(), e);
+    this.props.onQuote(this._properStatus(), e)
-  };
+  }
 
   handleHotkeyMention = e => {
-    e.preventDefault();
+    e.preventDefault()
-    this.props.onMention(this._properStatus().get('account'), this.context.router.history);
+    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 => {
+  _measureHeight (heightJustChanged) {
-    this.node = c
+    try {
+      scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }))
+      
+      if (heightJustChanged) {
+        this.props.onHeightChange()
+      } 
+    } catch (error) {
+      
+    }
   }
 
-
+  handleRef = c => {
-  handleOpenProUpgradeModal = () => {
+    this.node = c
-    this.props.onOpenProUpgradeModal();
+    this._measureHeight()
   }
 
   render() {
     const {
       intl,
-      hidden,
+      status,
-      featured,
+      isFeatured,
-      group,
+      isPromoted,
-      promoted,
       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}>
+        <HotKeys handlers={handlers}>
-          {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
+          <div ref={this.handleRef} className={classNames({ focusable: !this.props.muted })} tabIndex='0'>
-          {status.get('content')}
+            {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
-        </div>
+            {status.get('content')}
+          </div>
+        </HotKeys>
       );
     }
 
     if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) {
-      const minHandlers = this.props.muted ? {} : {
+      return null
-        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>
-      )
     }
 
     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,
+      pb15: isFeatured,
-      // backgroundColorPrimary: 1,
+      radiusSmall: !isChild,
-      pb15: featured,
+      backgroundColorPrimary: !isChild,
-      borderBottom1PX: featured && !isChild,
+      mb15: !isChild,
-      borderColorSecondary: featured && !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}
+          className={containerClasses}
-          tabIndex={this.props.muted ? null : 0}
+          tabIndex={this.props.isMuted ? null : 0}
-          data-featured={featured ? 'true' : null}
+          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>
-    );
+    )
   }
 
 }

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: 'status.repost', defaultMessage: 'Repost' },
-  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' },
   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
+  updateOnProps = ['status']
-  // evaluate to false. See react-immutable-pure-component for usage.
-  updateOnProps = [
-    'status',
-    'withDismiss',
-  ]
 
   handleReplyClick = () => {
-    if (me) {
+    this.props.onReply(this.props.status, this.context.router.history)
-      this.props.onReply(this.props.status, this.context.router.history)
-    } else {
-      this.props.onOpenUnauthorizedModal()
-    }
   }
 
   handleFavoriteClick = () => {
-    if (me) {
+    this.props.onFavorite(this.props.status)
-      this.props.onFavorite(this.props.status)
-    } else {
-      this.props.onOpenUnauthorizedModal()
-    }
   }
 
-  handleRepostClick = e => {
+  handleRepostClick = (e) => {
-    if (me) {
+    // this.props.onRepost(this.props.status, e)
-      // this.props.onRepost(this.props.status, e)
+    this.props.onQuote(this.props.status, this.context.router.history)
-      this.props.onQuote(this.props.status, this.context.router.history)
-    } else {
-      this.props.onOpenUnauthorizedModal()
-    }
   }
 
   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)}
+              title={intl.formatMessage(messages.repost)}
-              altTitle={!publicStatus ? formatMessage(messages.cannot_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 {
     )
   }
 
-}
+}

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
 

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'

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 StatusContainer from '../containers/status_container';
-import Status from '../features/status';
 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}>
+        <StatusContainer
-          <Status
+          key={statusId}
-            id={statusId}
+          id={statusId}
-            onMoveUp={this.handleMoveUp}
+          onMoveUp={this.handleMoveUp}
-            onMoveDown={this.handleMoveDown}
+          onMoveDown={this.handleMoveDown}
-            contextType={timelineId}
+          contextType={timelineId}
-            group={group}
+          // : todo :
-            withGroupAdmin={withGroupAdmin}
+          // group={group}
-            commentsLimited
+          // withGroupAdmin={withGroupAdmin}
-          />
+          commentsLimited
-          { /* : todo : */
+        />
-            promotedStatus && index === promotion.position &&
-            <Status
-              id={promotion.status_id}
-              contextType={timelineId}
-              promoted
-              commentsLimited
-            />
-          }
-        </Fragment>
       ))
     ) : 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}

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,
+    isFeatured: PropTypes.bool,
-    promoted: PropTypes.bool,
+    isPromoted: PropTypes.bool,
   }
 
   render() {
     const {
       intl,
       status,
-      featured,
+      isFeatured,
-      promoted,
+      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>

app/javascript/gabsocial/containers/media_container.js

@@ -29,19 +29,19 @@ export default class MediaContainer extends PureComponent {
   };
 
   handleOpenMedia = (media, index) => {
-    document.body.classList.add('with-modals--active');
+    document.body.classList.add(_s.overflowYHidden);
     this.setState({ media, index });
   }
 
   handleOpenVideo = (video, time) => {
     const media = ImmutableList([video]);
 
-    document.body.classList.add('with-modals--active');
+    document.body.classList.add(_s.overflowYHidden);
     this.setState({ media, time });
   }
 
   handleCloseMedia = () => {
-    document.body.classList.remove('with-modals--active');
+    document.body.classList.remove(_s.overflowYHidden);
     this.setState({ media: null, index: null, time: null });
   }
 

app/javascript/gabsocial/containers/status_container.js

@@ -1,4 +1,5 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl'
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import {
   replyCompose,
   mentionCompose,
@@ -12,7 +13,6 @@ import {
   pin,
   unpin,
 } from '../actions/interactions';
-import { blockAccount } from '../actions/accounts';
 import {
   muteStatus,
   unmuteStatus,
@@ -20,12 +20,13 @@ import {
   editStatus,
   hideStatus,
   revealStatus,
+  fetchComments,
 } from '../actions/statuses';
 import { initMuteModal } from '../actions/mutes';
 import { initReport } from '../actions/reports';
 import { openModal } from '../actions/modal';
-import { boostModal, deleteModal } from '../initial_state';
+import { openPopover } from '../actions/popover';
-// import { showAlertForError } from '../actions/alerts';
+import { me, boostModal, deleteModal } from '../initial_state';
 import {
   createRemovedAccount,
   groupRemoveStatus,
@@ -46,17 +47,53 @@ const messages = defineMessages({
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
 
-  const mapStateToProps = (state, props) => ({
+  const mapStateToProps = (state, props) => {
-    status: getStatus(state, props),
+    const status = getStatus(state, props)
-    replies: state.getIn(['contexts', 'replies', props.id]),
-  });
 
-  return mapStateToProps;
+    // : todo : if is comment (i.e. if any ancestorsIds) use comment not status
+
+    let descendantsIds = ImmutableList()
+
+    if (status) {
+      let indent = -1
+      descendantsIds = descendantsIds.withMutations(mutable => {
+        const ids = [status.get('id')]
+      
+        while (ids.length > 0) {
+          let id = ids.shift();
+          const replies = state.getIn(['contexts', 'replies', id])
+
+          if (status.get('id') !== id) {
+            mutable.push(ImmutableMap({
+              statusId: id,
+              indent: indent,
+            }))
+          }
+
+          if (replies) {
+            replies.reverse().forEach(reply => {
+              ids.unshift(reply)
+            });
+            indent++
+            indent = Math.min(2, indent)
+          }
+        }
+      })
+    }
+
+    return {
+      status,
+      descendantsIds
+    }
+  }
+
+  return mapStateToProps
 };
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
-
   onReply (status, router) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch((_, getState) => {
       const state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
@@ -72,6 +109,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onQuote (status, router) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch((_, getState) => {
       const state = getState();
       if (state.getIn(['compose', 'text']).trim().length !== 0) {
@@ -87,6 +126,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onModalRepost (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     if (status.get('reblogged')) {
       dispatch(unrepost(status));
     } else {
@@ -94,7 +135,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onShare(targetRef, status) {
+    dispatch(openPopover('STATUS_SHARE', {
+      status,
+      targetRef,
+      position: 'top',
+    }))
+  },
+
   onRepost (status, e) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     if (e.shiftKey || !boostModal) {
       this.onModalRepost(status);
     } else {
@@ -103,21 +154,24 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onShowRevisions (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(openModal('STATUS_REVISION', { status }));
   },
 
   onFavorite (status) {
-    console.log('onFavorite...', status)
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     if (status.get('favourited')) {
-      console.log('unfav...')
       dispatch(unfavorite(status));
     } else {
-      console.log('fav...')
       dispatch(favorite(status));
     }
   },
 
   onPin (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     if (status.get('pinned')) {
       dispatch(unpin(status));
     } else {
@@ -133,6 +187,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onDelete (status, history) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+    
     if (!deleteModal) {
       dispatch(deleteStatus(status.get('id'), history));
     } else {
@@ -145,10 +201,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onEdit (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(editStatus(status));
   },
 
   onMention (account, router) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(mentionCompose(account, router));
   },
 
@@ -161,6 +221,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onBlock (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     const account = status.get('account')
     dispatch(openModal('BLOCK_ACCOUNT', {
       accountId: account.get('id'),
@@ -168,10 +230,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onReport (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(initReport(status.get('account'), status));
   },
 
   onMute (account) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(initMuteModal(account));
   },
 
@@ -184,6 +250,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onToggleHidden (status) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     if (status.get('hidden')) {
       dispatch(revealStatus(status.get('id')));
     } else {
@@ -192,17 +260,20 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onGroupRemoveAccount(groupId, accountId) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(createRemovedAccount(groupId, accountId));
   },
 
   onGroupRemoveStatus(groupId, statusId) {
+    if (!me) return dispatch(openModal('UNAUTHORIZED'))
+
     dispatch(groupRemoveStatus(groupId, statusId));
   },
 
-  onOpenProUpgradeModal() {
+  onFetchComments(statusId) {
-    dispatch(openModal('PRO_UPGRADE'));
+    dispatch(fetchComments(statusId))
   },
-
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));

app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js

@@ -25,7 +25,8 @@ const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u20
 const maxPostCharacterCount = 3000
 
 const messages = defineMessages({
-  placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
+  placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
+  commentPlaceholder: { id: 'compose_form.comment_placeholder', defaultMessage: "Write a comment..." },
   spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
   publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
   publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}' },
@@ -87,8 +88,8 @@ class ComposeForm extends ImmutablePureComponent {
     showSearch: false,
   };
 
-  handleChange = (e) => {
+  handleChange = (e, markdown) => {
-    this.props.onChange(e.target.value);
+    this.props.onChange(e.target.value, markdown);
   }
 
   handleComposeFocus = () => {
@@ -244,6 +245,7 @@ class ComposeForm extends ImmutablePureComponent {
 
     const parentContainerClasses = cx({
       default: 1,
+      width100PC: 1,
       flexRow: !shouldCondense,
       pb10: !shouldCondense,
     })
@@ -309,7 +311,7 @@ class ComposeForm extends ImmutablePureComponent {
 
             <AutosuggestTextbox
               ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
-              placeholder={intl.formatMessage(messages.placeholder)}
+              placeholder={intl.formatMessage(shouldCondense ? messages.commentPlaceholder : messages.placeholder)}
               disabled={disabled}
               value={this.props.text}
               onChange={this.handleChange}
@@ -327,12 +329,12 @@ class ComposeForm extends ImmutablePureComponent {
 
             {
               (isUploading || anyMedia) &&
-              <div className={[_s.default, _s.px15].join(' ')}>
+              <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
                 <UploadForm replyToId={replyToId} />
               </div>
             }
 
-            { /*
+            { /* : todo : for gif
               (isUploading || hasGif) &&
               <div className={[_s.default, _s.px15].join(' ')}>
                 <UploadForm replyToId={replyToId} />
@@ -342,13 +344,19 @@ class ComposeForm extends ImmutablePureComponent {
 
             {
               !edit && hasPoll &&
-              <div className={[_s.default, _s.px15].join(' ')}>
+              <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
                 <PollFormContainer replyToId={replyToId} />
               </div>
             }
 
             {
-              /* : todo : quoteOfId && <StatusContainer id={quoteOfId} /> */
+              quoteOfId &&
+              <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                <StatusContainer
+                  id={quoteOfId}
+                  isChild
+                />
+              </div>
             }
 
             <div className={actionsContainerClasses}>

app/javascript/gabsocial/features/compose/components/poll_form.js

@@ -197,9 +197,9 @@ class PollForm extends ImmutablePureComponent {
                 icon='add'
                 iconWidth='14px'
                 iconHeight='14px'
-                iconClassName={[_s.fillColorBrand, _s.mr5].join(' ')}
+                iconClassName={_s.mr5}
               >
-                <Text color='brand'>
+                <Text color='inherit'>
                   {intl.formatMessage(messages.add_option)}
                 </Text>
               </Button>

app/javascript/gabsocial/features/compose/containers/compose_form_container.js

@@ -46,8 +46,8 @@ const mapStateToProps = (state, { replyToId }) => {
 
 const mapDispatchToProps = (dispatch) => ({
 
-  onChange(text) {
+  onChange(text, markdown) {
-    dispatch(changeCompose(text))
+    dispatch(changeCompose(text, markdown))
   },
 
   onSubmit(router, group) {

app/javascript/gabsocial/features/lists_directory.js

@@ -33,16 +33,19 @@ export default
 class ListsDirectory extends ImmutablePureComponent {
 
   static propTypes = {
-    params: PropTypes.object.isRequired,
-    onFetchLists: PropTypes.func.isRequired,
-    lists: ImmutablePropTypes.list,
     intl: PropTypes.object.isRequired,
+    lists: ImmutablePropTypes.list,
+    onFetchLists: PropTypes.func.isRequired,
   }
 
   state = {
     fetched: false,
   }
 
+  updateOnProps = [
+    'lists'
+  ]
+
   componentWillMount() {
     this.props.onFetchLists()
       .then(() => this.setState({ fetched: true }))

app/javascript/gabsocial/features/status/containers/detailed_status_container.js

@@ -1,162 +0,0 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import {
-  replyCompose,
-  mentionCompose,
-} from '../../../actions/compose';
-import {
-  reblog,
-  favorite,
-  unreblog,
-  unfavorite,
-  pin,
-  unpin,
-} from '../../../actions/interactions';
-import { blockAccount } from '../../../actions/accounts';
-import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-  hideStatus,
-  revealStatus,
-} from '../../../actions/statuses';
-import { initMuteModal } from '../../../actions/mutes';
-import { initReport } from '../../../actions/reports';
-import { openModal } from '../../../actions/modal';
-// import { showAlertForError } from '../../../actions/alerts';
-import { boostModal, deleteModal } from '../../../initial_state';
-import { makeGetStatus } from '../../../selectors';
-import DetailedStatus from '../components/detailed_status';
-
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
-});
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = (state, props) => ({
-    status: getStatus(state, props),
-    domain: state.getIn(['meta', 'domain']),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-
-  onReply (status, router) {
-    dispatch((_, getState) => {
-      const state = getState();
-      if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal('CONFIRM', {
-          message: intl.formatMessage(messages.replyMessage),
-          confirm: intl.formatMessage(messages.replyConfirm),
-          onConfirm: () => dispatch(replyCompose(status, router)),
-        }));
-      } else {
-        dispatch(replyCompose(status, router));
-      }
-    });
-  },
-
-  onModalRepost (status) {
-    dispatch(repost(status));
-  },
-
-  onRepost (status, e) {
-    if (status.get('reblogged')) {
-      dispatch(unrepost(status));
-    } else {
-      if (e.shiftKey || !boostModal) {
-        this.onModalRepost(status);
-      } else {
-        dispatch(openModal('BOOST', { status, onRepost: this.onModalRepost }));
-      }
-    }
-  },
-
-  onFavorite (status) {
-    if (status.get('favourited')) {
-      dispatch(unfavorite(status));
-    } else {
-      dispatch(favorite(status));
-    }
-  },
-
-  onPin (status) {
-    if (status.get('pinned')) {
-      dispatch(unpin(status));
-    } else {
-      dispatch(pin(status));
-    }
-  },
-
-  onEmbed (status) {
-    // dispatch(openModal('EMBED', {
-    //   url: status.get('url'),
-    //   onError: error => dispatch(showAlertForError(error)),
-    // }));
-  },
-
-  onDelete (status, history) {
-    if (!deleteModal) {
-      dispatch(deleteStatus(status.get('id'), history));
-    } else {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(messages.deleteMessage),
-        confirm: intl.formatMessage(messages.deleteConfirm),
-        onConfirm: () => dispatch(deleteStatus(status.get('id'), history)),
-      }));
-    }
-  },
-
-  onMention (account, router) {
-    dispatch(mentionCompose(account, router));
-  },
-
-  onOpenMedia (media, index) {
-    dispatch(openModal('MEDIA', { media, index }));
-  },
-
-  onOpenVideo (media, time) {
-    dispatch(openModal('VIDEO', { media, time }));
-  },
-
-  onBlock (status) {
-    const account = status.get('account')
-    dispatch(openModal('BLOCK_ACCOUNT', {
-      accountId: account.get('id'),
-    }))
-  },
-
-  onReport (status) {
-    dispatch(initReport(status.get('account'), status));
-  },
-
-  onMute (account) {
-    dispatch(initMuteModal(account));
-  },
-
-  onMuteConversation (status) {
-    if (status.get('muted')) {
-      dispatch(unmuteStatus(status.get('id')));
-    } else {
-      dispatch(muteStatus(status.get('id')));
-    }
-  },
-
-  onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
-  },
-
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(DetailedStatus));

app/javascript/gabsocial/features/status/index.js

@@ -1 +0,0 @@
-export { default } from './status'

app/javascript/gabsocial/features/status/status.js

@@ -1,483 +0,0 @@
-import Immutable from 'immutable'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import { HotKeys } from 'react-hotkeys'
-import { fetchStatus } from '../../actions/statuses'
-import {
-  favorite,
-  unfavorite,
-  repost,
-  unrepost,
-  pin,
-  unpin,
-} from '../../actions/interactions'
-import {
-  replyCompose,
-  mentionCompose,
-} from '../../actions/compose'
-import { blockAccount } from '../../actions/accounts'
-import {
-  muteStatus,
-  unmuteStatus,
-  deleteStatus,
-  hideStatus,
-  revealStatus,
-} from '../../actions/statuses'
-import { initMuteModal } from '../../actions/mutes'
-import { initReport } from '../../actions/reports'
-import { openModal } from '../../actions/modal'
-import { boostModal, deleteModal, me } from '../../initial_state'
-import { makeGetStatus } from '../../selectors'
-import StatusContainer from '../../containers/status_container'
-import { textForScreenReader, defaultMediaVisibility } from '../../components/status'
-import ColumnIndicator from '../../components/column_indicator'
-import Block from '../../components/block'
-import CommentList from '../../components/comment_list'
-
-const messages = defineMessages({
-  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
-  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
-  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
-  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and reposts will be lost, and replies to the original post will be orphaned.' },
-  revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
-  hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
-  detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-  blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
-});
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus()
-
-  const mapStateToProps = (state, props) => {
-    const statusId = props.id || props.params.statusId
-    const username = props.params ? props.params.username : undefined
-
-    const status = getStatus(state, {
-      id: statusId,
-      username: username,
-    })
-
-    // : todo : if is comment (i.e. if any ancestorsIds) use comment not status
-
-    let ancestorsIds = Immutable.List()
-    let descendantsIds = Immutable.List()
-
-    if (status) {
-    //   ancestorsIds = ancestorsIds.withMutations(mutable => {
-    //     let id = status.get('in_reply_to_id');
-
-    //     while (id) {
-    //       mutable.unshift(id);
-    //       id = state.getIn(['contexts', 'inReplyTos', id]);
-    //     }
-    //   });
-
-    //   // ONLY Direct descendants
-    //   descendantsIds = state.getIn(['contexts', 'replies', status.get('id')])
-
-      let indent = -1
-      descendantsIds = descendantsIds.withMutations(mutable => {
-        const ids = [status.get('id')]
-      
-        while (ids.length > 0) {
-          let id = ids.shift();
-          const replies = state.getIn(['contexts', 'replies', id])
-
-          if (status.get('id') !== id) {
-            mutable.push(Immutable.Map({
-              statusId: id,
-              indent: indent,
-            }))
-          }
-
-          if (replies) {
-            replies.reverse().forEach(reply => {
-              ids.unshift(reply)
-            });
-            indent++
-            indent = Math.min(2, indent)
-          }
-        }
-      })
-    }
-
-    // console.log("descendantsIds:", descendantsIds)
-
-    return {
-      status,
-      ancestorsIds,
-      descendantsIds,
-      askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-export default
-@injectIntl
-@connect(makeMapStateToProps)
-class Status extends ImmutablePureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    status: ImmutablePropTypes.map,
-    ancestorsIds: ImmutablePropTypes.list,
-    descendantsIds: ImmutablePropTypes.list,
-    intl: PropTypes.object.isRequired,
-    askReplyConfirmation: PropTypes.bool,
-    contextType: PropTypes.string,
-  };
-
-  state = {
-    fullscreen: false,
-    showMedia: defaultMediaVisibility(this.props.status),
-    loadedStatusId: undefined,
-  };
-
-  componentWillMount() {
-    const statusId = this.props.id || this.props.params.statusId
-    // console.log("statusId:", statusId)
-    this.props.dispatch(fetchStatus(statusId));
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const statusId = this.props.id || this.props.params.statusId
-    const nextStatusId = nextProps.id || nextProps.params.statusId
-
-    if (nextStatusId !== statusId && nextStatusId) {
-      this._scrolledIntoView = false;
-      this.props.dispatch(fetchStatus(nextStatusId));
-    }
-
-    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
-    }
-  }
-
-  handleToggleMediaVisibility = () => {
-    this.setState({ showMedia: !this.state.showMedia });
-  }
-
-  handleFavoriteClick = (status) => {
-    if (status.get('favourited')) {
-      this.props.dispatch(unfavorite(status));
-    } else {
-      this.props.dispatch(favorite(status));
-    }
-  }
-
-  handlePin = (status) => {
-    if (status.get('pinned')) {
-      this.props.dispatch(unpin(status));
-    } else {
-      this.props.dispatch(pin(status));
-    }
-  }
-
-  handleReplyClick = (status) => {
-    let { askReplyConfirmation, dispatch, intl } = this.props;
-    if (askReplyConfirmation) {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(messages.replyMessage),
-        confirm: intl.formatMessage(messages.replyConfirm),
-        onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
-      }));
-    } else {
-      dispatch(replyCompose(status, this.context.router.history));
-    }
-  }
-
-  handleModalRepost = (status) => {
-    this.props.dispatch(repost(status));
-  }
-
-  handleRepostClick = (status, e) => {
-    if (status.get('reblogged')) {
-      this.props.dispatch(unrepost(status));
-    } else {
-      if ((e && e.shiftKey) || !boostModal) {
-        this.handleModalRepost(status);
-      } else {
-        this.props.dispatch(openModal('BOOST', { status, onRepost: this.handleModalRepost }));
-      }
-    }
-  }
-
-  handleDeleteClick = (status, history, withRedraft = false) => {
-    const { dispatch, intl } = this.props;
-
-    if (!deleteModal) {
-      dispatch(deleteStatus(status.get('id'), history, withRedraft));
-    } else {
-      dispatch(openModal('CONFIRM', {
-        message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
-        confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
-        onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
-      }));
-    }
-  }
-
-  handleMentionClick = (account, router) => {
-    this.props.dispatch(mentionCompose(account, router));
-  }
-
-  handleOpenMedia = (media, index) => {
-    this.props.dispatch(openModal('MEDIA', { media, index }));
-  }
-
-  handleOpenVideo = (media, time) => {
-    this.props.dispatch(openModal('VIDEO', { media, time }));
-  }
-
-  handleMuteClick = (account) => {
-    this.props.dispatch(initMuteModal(account));
-  }
-
-  handleConversationMuteClick = (status) => {
-    if (status.get('muted')) {
-      this.props.dispatch(unmuteStatus(status.get('id')));
-    } else {
-      this.props.dispatch(muteStatus(status.get('id')));
-    }
-  }
-
-  handleToggleHidden = (status) => {
-    if (status.get('hidden')) {
-      this.props.dispatch(revealStatus(status.get('id')));
-    } else {
-      this.props.dispatch(hideStatus(status.get('id')));
-    }
-  }
-
-  handleToggleAll = () => {
-    const { status, ancestorsIds, descendantsIds } = this.props;
-    const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
-
-    if (status.get('hidden')) {
-      this.props.dispatch(revealStatus(statusIds));
-    } else {
-      this.props.dispatch(hideStatus(statusIds));
-    }
-  }
-
-  handleBlockClick = (status) => {
-    const { dispatch } = this.props
-    const account = status.get('account')
-
-    dispatch(openModal('BLOCK_ACCOUNT', {
-      accountId: account.get('id'),
-    }))
-  }
-
-  handleReport = (status) => {
-    this.props.dispatch(initReport(status.get('account'), status));
-  }
-
-  handleEmbed = (status) => {
-    this.props.dispatch(openModal('EMBED', { url: status.get('url') }));
-  }
-
-  handleHotkeyMoveUp = () => {
-    this.handleMoveUp(this.props.status.get('id'));
-  }
-
-  handleHotkeyMoveDown = () => {
-    this.handleMoveDown(this.props.status.get('id'));
-  }
-
-  handleHotkeyReply = e => {
-    e.preventDefault();
-    this.handleReplyClick(this.props.status);
-  }
-
-  handleHotkeyFavorite = () => {
-    this.handleFavoriteClick(this.props.status);
-  }
-
-  handleHotkeyBoost = () => {
-    this.handleRepostClick(this.props.status);
-  }
-
-  handleHotkeyMention = e => {
-    e.preventDefault();
-    this.handleMentionClick(this.props.status.get('account'));
-  }
-
-  handleHotkeyOpenProfile = () => {
-    this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}`);
-  }
-
-  handleHotkeyToggleHidden = () => {
-    this.handleToggleHidden(this.props.status);
-  }
-
-  handleHotkeyToggleSensitive = () => {
-    this.handleToggleMediaVisibility();
-  }
-
-  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();
-    }
-  }
-
-  renderChildren(list) {
-    // console.log("list:", list)
-    return null
-    // : todo : comments
-    return list.map(id => (
-      <Comment
-        key={`comment-${id}`}
-        id={id}
-        onMoveUp={this.handleMoveUp}
-        onMoveDown={this.handleMoveDown}
-      />
-    ))
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  componentDidUpdate() {
-    if (this._scrolledIntoView) return
-
-    const { status, ancestorsIds } = this.props
-
-    if (status && ancestorsIds && ancestorsIds.size > 0) {
-      const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
-
-      window.requestAnimationFrame(() => {
-        element.scrollIntoView(true);
-      });
-      this._scrolledIntoView = true;
-    }
-  }
-
-  render() {
-    const {
-      status,
-      ancestorsIds,
-      descendantsIds,
-      intl,
-      contextType,
-      commentsLimited,
-    } = this.props
-
-    let ancestors, descendants
-
-    if (status === null) {
-      return <ColumnIndicator type='loading' />
-    }
-
-    // if (ancestorsIds && ancestorsIds.size > 0) {
-    //   ancestors = this.renderChildren(ancestorsIds)
-    // }
-
-    if (descendantsIds && descendantsIds.size > 0) {
-      descendants = this.renderChildren(descendantsIds)
-    }
-
-    const handlers = {
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
-      reply: this.handleHotkeyReply,
-      favorite: this.handleHotkeyFavorite,
-      boost: this.handleHotkeyBoost,
-      mention: this.handleHotkeyMention,
-      openProfile: this.handleHotkeyOpenProfile,
-      toggleHidden: this.handleHotkeyToggleHidden,
-      toggleSensitive: this.handleHotkeyToggleSensitive,
-    };
-
-    console.log("descendantsIds.size > 0:", descendantsIds.size > 0)
-
-    return (
-      <div ref={this.setRef} className={_s.mb15}>
-        <Block>
-          {
-            /* : todo : ancestors if is comment */
-          }
-
-          <HotKeys handlers={handlers}>
-            <div className={_s.outlineNone} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
-              
-              <StatusContainer
-                id={status.get('id')}
-                contextType={contextType}
-                // onOpenVideo={this.handleOpenVideo}
-                // onOpenMedia={this.handleOpenMedia}
-                // onToggleHidden={this.handleToggleHidden}
-                // showMedia={this.state.showMedia}
-                // onToggleMediaVisibility={this.handleToggleMediaVisibility}
-              />
-              
-            </div>
-          </HotKeys>
-
-          {
-            descendantsIds && descendantsIds.size > 0 &&
-            <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
-          }
-
-          <CommentList
-            commentsLimited={commentsLimited}
-            descendants={descendantsIds}
-          />
-        </Block>
-      </div>
-    )
-  }
-
-}

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -29,6 +29,6 @@ export function Notifications() { return import(/* webpackChunkName: "features/n
 export function Reposts() { return import(/* webpackChunkName: "features/reposts" */'../../reposts') }
 export function ReportModal() { return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal/report_modal') }
 export function Search() { return import(/*webpackChunkName: "features/search" */'../../search') }
-export function Status() { return import(/* webpackChunkName: "features/status" */'../../status') }
+export function Status() { return import(/* webpackChunkName: "components/status" */'../../../components/status') }
 export function StatusRevisionsModal() { return import(/* webpackChunkName: "modals/status_revisions_modal" */'../../../components/modal/status_revisions_modal') }
 export function Video() { return import(/* webpackChunkName: "components/video" */'../../../components/video') }

app/javascript/gabsocial/features/ui/util/page_title.js

@@ -2,11 +2,11 @@ import isEqual from 'lodash.isequal'
 
 export default class PageTitle extends PureComponent {
   static propTypes = {
-    badge: PropTypes.oneOf([
+    badge: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.string,
     ]),
-    path: PropTypes.oneOf([
+    path: PropTypes.oneOfType([
       PropTypes.sting,
       PropTypes.array,
     ]),

app/javascript/gabsocial/reducers/compose.js

@@ -54,7 +54,7 @@ const initialState = ImmutableMap({
   spoiler_text: '',
   privacy: null,
   text: '',
-  markdown_text: '',
+  markdown: null,
   focusDate: null,
   caretPosition: null,
   preselectDate: null,
@@ -248,6 +248,7 @@ export default function compose(state = initialState, action) {
   case COMPOSE_CHANGE:
     return state
       .set('text', action.text)
+      .set('markdown', action.markdown)
       .set('idempotencyKey', uuid());
   case COMPOSE_COMPOSING_CHANGE:
     return state.set('is_composing', action.value);

app/javascript/gabsocial/reducers/contexts.js

@@ -1,16 +1,19 @@
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts'
-import { CONTEXT_FETCH_SUCCESS } from '../actions/statuses';
+import {
-import { TIMELINE_DELETE, TIMELINE_UPDATE } from '../actions/timelines';
+  COMMENTS_FETCH_SUCCESS,
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+  CONTEXT_FETCH_SUCCESS,
-import compareId from '../utils/compare_id';
+} from '../actions/statuses'
+import { TIMELINE_DELETE, TIMELINE_UPDATE } from '../actions/timelines'
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable'
+import compareId from '../utils/compare_id'
 
 const initialState = ImmutableMap({
   inReplyTos: ImmutableMap(),
   replies: ImmutableMap(),
-});
+})
 
 const normalizeContext = (immutableState, id, ancestors, descendants) => immutableState.withMutations(state => {
   state.update('inReplyTos', immutableAncestors => immutableAncestors.withMutations(inReplyTos => {
@@ -96,6 +99,8 @@ export default function replies(state = initialState, action) {
     return filterContexts(state, action.relationship, action.statuses);
   case CONTEXT_FETCH_SUCCESS:
     return normalizeContext(state, action.id, action.ancestors, action.descendants);
+  case COMMENTS_FETCH_SUCCESS:
+    return normalizeContext(state, action.id, ImmutableList(), action.descendants);
   case TIMELINE_DELETE:
     return deleteFromContexts(state, [action.id]);
   case TIMELINE_UPDATE:

app/javascript/styles/global.css

@@ -24,6 +24,37 @@ body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
 }
 
+.statusContent p {
+  min-height: 18px;
+}
+
+.statusContent em {
+  font-style: italic;
+}
+
+.statusContent strong {
+  font-weight: 700;
+}
+
+.statusContent strike,
+.statusContent del {
+  text-decoration: line-through;
+}
+
+.statusContent h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.statusContent ul,
+.statusContent ol {
+  list-style-type: disc;
+  padding-left: 40px;
+  margin: 0;
+}
+
 .dangerousContent,
 .dangerousContent * {
   margin-top: 0;
@@ -144,6 +175,10 @@ body {
   overflow-y: hidden;
 }
 
+.overflowYHidden {
+  overflow-y: hidden;
+}
+
 .textOverflowEllipsis {
   max-width: 100%;
   overflow-x: hidden;
@@ -1079,10 +1114,14 @@ body {
   display: none;
 }
 
+/* :global(.public-DraftEditorPlaceholder-inner) {
+  font-weight: 400;
+  font-size: 16px;
+} */
+
 :global(.RichEditor-blockquote) {
   border-left: 5px solid #eee;
   color: #666;
-  font-family: 'Hoefler Text', 'Georgia', serif;
   font-style: italic;
   margin: 16px 0;
   padding: 10px 20px;

app/lib/formatter.rb

@@ -2,6 +2,7 @@
 
 require 'singleton'
 require_relative './sanitize_config'
+require 'redcarpet'
 
 class Formatter
   include Singleton
@@ -9,12 +10,24 @@ class Formatter
 
   include ActionView::Helpers::TextHelper
 
+  class CustomRender < Redcarpet::Render::HTML
+    def paragraph(text)
+      %(<p>#{text}</p>)
+    end
+  end
+
   def format(status, **options)
-    raw_content    = status.text
+    if options[:use_markdown]
-    raw_content    = ActionController::Base.helpers.strip_tags(raw_content) if status.id <= 11063737261633602 # #TODO: Migration fix
+      raw_content = status.markdown
+      return '' if raw_content.blank?
+    else
+      raw_content = status.text
+    end
+
+    raw_content = ActionController::Base.helpers.strip_tags(raw_content) if status.id <= 11063737261633602 # #TODO: Migration fix
 
     if status.reblog?
-      status         = status.proper
+      status = status.proper
     end
 
     if options[:inline_poll_options] && status.preloadable_poll
@@ -33,9 +46,33 @@ class Formatter
     linkable_accounts << status.account
 
     html = raw_content
+
+    # puts "BOLLI 1: " + html
+
     html = encode_and_link_urls(html, linkable_accounts)
+
+    # puts "BOLLI 2: " + html
+
+    if options[:use_markdown]
+      html = convert_headers(html)
+      html = convert_strong(html)
+      html = convert_italic(html)
+      html = convert_strikethrough(html)
+      html = convert_code(html)
+      html = convert_codeblock(html)
+      html = convert_links(html)
+      html = convert_lists(html)
+      html = convert_ordered_lists(html)
+      # puts "BOLLI 3: " + html
+    end
+
     html = encode_custom_emojis(html, status.emojis, options[:autoplay]) if options[:custom_emojify]
+    # puts "BOLLI 4: " + html
+
     html = simple_format(html, {}, sanitize: false)
+
+    # puts "BOLLI 5: " + html
+
     html = html.delete("\n")
 
     html.html_safe # rubocop:disable Rails/OutputSafety
@@ -296,4 +333,80 @@ class Formatter
   def mention_html(account)
     "<a data-focusable=\"true\" role=\"link\" href=\"#{encode(TagManager.instance.url_for(account))}\" class=\"u-url mention\">@#{encode(account.acct)}</a>"
   end
+
+  def convert_headers(html)
+    html.gsub(/^\#{1,6}.*$/) do |header|
+      weight = 0
+      header.split('').each do |char|
+        break unless char == '#'
+        weight += 1
+      end
+      content = header.sub(/^\#{1,6}/, '')
+      "<h#{weight}>#{content}</h#{weight}>"
+    end
+  end
+
+  def convert_strong(html)
+    html.gsub(/\*{2}.*\*{2}|_{2}.*_{2}/) do |strong|
+      content = strong.gsub(/\*{2}|_{2}/, '')
+      "<strong>#{content}</strong>"
+    end
+  end
+
+  def convert_italic(html)
+    html.gsub(/\*{1}(\w|\s)+\*{1}|_{1}(\w|\s)+_{1}/) do |italic|
+      content = italic.gsub(/\*{1}|_{1}/, '')
+      "<em>#{content}</em>"
+    end
+  end
+
+  def convert_strikethrough(html)
+    html.gsub(/~~(\w|\s)+~~/) do |strike|
+      content = strike.gsub(/~~/, '')
+      "<strike>#{content}</strike>"
+    end
+  end
+
+  def convert_code(html)
+    html.gsub(/`(\w|\s)+`/) do |code|
+      content = code.gsub(/`/, '')
+      "<code>#{content}</code>"
+    end
+  end
+
+  def convert_codeblock(html)
+    html.gsub(/```\w*(.*(\r\n|\r|\n))+```/) do |code|
+      lang = code.match(/```\w+/)[0].gsub(/`/, '')
+      content = code.gsub(/```\w+/, '```').gsub(/`/, '')
+      "<pre class=\"#{lang}\"><code>#{content}</code></pre>"
+    end
+  end
+
+  def convert_links(html)
+    html.gsub(/\[(\w|\s)+\]\((\w|\W)+\)/) do |anchor|
+      link_text = anchor.match(/\[(\w|\s)+\]/)[0].gsub(/[\[\]]/, '')
+      href = anchor.match(/\((\w|\W)+\)/)[0].gsub(/\(|\)/, '')
+      "<a href=\"#{href}\">#{link_text}</a>"
+    end
+  end
+
+  def convert_lists(html)
+    html.gsub(/(\-.+(\r|\n|\r\n))+/) do |list|
+      items = "<ul>\n"
+      list.gsub(/\-.+/) do |li|
+        items << "<li>#{li.sub(/^\-/, '').strip}</li>\n"
+      end
+      items << "</ul>\n"
+    end
+  end
+
+  def convert_ordered_lists(html)
+    html.gsub(/(\d\..+(\r|\n|\r\n))+/) do |list|
+      items = "<ol>\n"
+      list.gsub(/\d.+/) do |li|
+        items << "<li>#{li.sub(/^\d\./, '').strip}</li>\n"
+      end
+      items << "</ol>\n"
+    end
+  end
 end

app/models/status.rb

@@ -6,6 +6,7 @@
 #  id                     :bigint(8)        not null, primary key
 #  uri                    :string
 #  text                   :text             default(""), not null
+#  markdown               :text
 #  created_at             :datetime         not null
 #  updated_at             :datetime         not null
 #  in_reply_to_id         :bigint(8)

app/serializers/rest/status_serializer.rb

@@ -12,6 +12,7 @@ class REST::StatusSerializer < ActiveModel::Serializer
   attribute :pinned, if: :pinnable?
 
   attribute :content, unless: :source_requested?
+  attribute :rich_content, unless: :source_requested?
   attribute :text, if: :source_requested?
 
   belongs_to :reblog, serializer: REST::StatusSerializer
@@ -71,6 +72,10 @@ class REST::StatusSerializer < ActiveModel::Serializer
     Formatter.instance.format(object).strip
   end
 
+  def rich_content
+    Formatter.instance.format(object, use_markdown: true).strip
+  end
+
   def url
     TagManager.instance.url_for(object)
   end

app/services/post_status_service.rb

@@ -9,6 +9,7 @@ class PostStatusService < BaseService
   # @param [Account] account Account from which to post
   # @param [Hash] options
   # @option [String] :text Message
+  # @option [String] :markdown Optional message in markdown
   # @option [Status] :thread Optional status to reply to
   # @option [Boolean] :sensitive
   # @option [String] :visibility
@@ -25,6 +26,7 @@ class PostStatusService < BaseService
     @account     = account
     @options     = options
     @text        = @options[:text] || ''
+    @markdown    = @options[:markdown]
     @in_reply_to = @options[:thread]
 
     return idempotency_duplicate if idempotency_given? && idempotency_duplicate?
@@ -171,6 +173,7 @@ class PostStatusService < BaseService
   def status_attributes
     {
       text: @text,
+      markdown: @markdown,
       group_id: @options[:group_id],
       quote_of_id: @options[:quote_of_id],
       media_attachments: @media || [],

config/routes.rb

@@ -311,6 +311,7 @@ Rails.application.routes.draw do
         end
 
         member do
+          get :comments
           get :context
           get :card
           get :revisions

db/migrate/20200420223346_add_markdown_to_status.rb

@@ -0,0 +1,5 @@
+class AddMarkdownToStatus < ActiveRecord::Migration[5.2]
+  def change
+    add_column :statuses, :markdown, :text
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_03_10_224203) do
+ActiveRecord::Schema.define(version: 2020_04_20_223346) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -711,6 +711,7 @@ ActiveRecord::Schema.define(version: 2020_03_10_224203) do
     t.integer "group_id"
     t.bigint "quote_of_id"
     t.datetime "revised_at"
+    t.text "markdown"
     t.index ["account_id", "id", "visibility", "updated_at"], name: "index_statuses_20180106", order: { id: :desc }
     t.index ["group_id"], name: "index_statuses_on_group_id"
     t.index ["in_reply_to_account_id"], name: "index_statuses_on_in_reply_to_account_id"

package.json

@@ -90,6 +90,7 @@
     "detect-passive-events": "^1.0.2",
     "dotenv": "^8.0.0",
     "draft-js": "^0.11.4",
+    "draftjs-to-markdown": "^0.6.0",
     "emoji-mart": "^3.0.0",
     "es6-symbol": "^3.1.1",
     "escape-html": "^1.0.3",
@@ -113,6 +114,7 @@
     "lodash.throttle": "^4.1.1",
     "lodash.unescape": "^4.0.1",
     "mark-loader": "^0.1.6",
+    "markdown-draft-js": "^2.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "mkdirp": "^0.5.1",
     "npmlog": "^4.1.2",

yarn.lock

@@ -1472,7 +1472,7 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
-argparse@^1.0.7:
+argparse@^1.0.10, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -1640,6 +1640,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+autolinker@^3.11.0:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-3.14.1.tgz#6ae4b812b6eaf42d4d68138b9e67757cbf2bc1e4"
+  integrity sha512-yvsRHIaY51EYDml6MGlbqyJGfl4n7zezGYf+R7gvM8c5LNpRGc4SISkvgAswSS8SWxk/OrGCylKV9mJyVstz7w==
+  dependencies:
+    tslib "^1.9.3"
+
 autoprefixer@^9.5.1:
   version "9.7.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.6.tgz#63ac5bbc0ce7934e6997207d5bb00d68fa8293a4"
@@ -3260,6 +3267,11 @@ draft-js@^0.11.4:
     immutable "~3.7.4"
     object-assign "^4.1.1"
 
+draftjs-to-markdown@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/draftjs-to-markdown/-/draftjs-to-markdown-0.6.0.tgz#78ec1850c909a8d97132c211dc4d52345c79cd90"
+  integrity sha512-nmze89CrGOQCzPLd16i2hYpmVyQhZnZuIuuLK7SCuGCRCYTPSnf6PE2f9ONcvjT357G+yEdEQh3K3Ry5cNVMcQ==
+
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
@@ -6086,6 +6098,13 @@ mark-loader@^0.1.6:
   resolved "https://registry.yarnpkg.com/mark-loader/-/mark-loader-0.1.6.tgz#0abb477dca7421d70e20128ff6489f5cae8676d5"
   integrity sha1-CrtHfcp0IdcOIBKP9kifXK6GdtU=
 
+markdown-draft-js@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/markdown-draft-js/-/markdown-draft-js-2.2.0.tgz#1a4796c4d7907761ae417e2176ab858dfaa1166a"
+  integrity sha512-OW53nd5m7KrnuXjH8jNKB3SQ5KidKD/+pHS+3daVKTsyjsiozghjUxzNH+5JLxzaBECHmJ7itE39RzMgYm5EFQ==
+  dependencies:
+    remarkable "2.0.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8205,6 +8224,14 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
+remarkable@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-2.0.0.tgz#795f965bede8300362ce51a716edc322d9e7a4ca"
+  integrity sha512-3gvKFAgL4xmmVRKAMNm6UzDo/rO2gPVkZrWagp6AXEA4JvCcMcRx9aapYbb7AJAmLLvi/u06+EhzqoS7ha9qOg==
+  dependencies:
+    argparse "^1.0.10"
+    autolinker "^3.11.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -9415,7 +9442,7 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==