From 426677ab31c4c9a240edd440f88d74b6bb84ab31 Mon Sep 17 00:00:00 2001
From: CylonicRaider <CylonicRaider@users.noreply.github.com>
Date: Sun, 7 May 2017 17:44:05 +0200
Subject: [PATCH 1/4] Enforce finite initial display limit

---
 client/lib/ui/Message.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/lib/ui/Message.js b/client/lib/ui/Message.js
index 463390cf..695795c3 100644
--- a/client/lib/ui/Message.js
+++ b/client/lib/ui/Message.js
@@ -35,6 +35,7 @@ const Message = React.createClass({
     showAllReplies: React.PropTypes.bool,
     depth: React.PropTypes.number,
     visibleCount: React.PropTypes.number,
+    maxDepth: React.PropTypes.number,
     roomSettings: React.PropTypes.instanceOf(Immutable.Map),
   },
 
@@ -46,6 +47,7 @@ const Message = React.createClass({
 
   statics: {
     visibleCount: 5,
+    maxDepth: 50,
     newFadeDuration: 60 * 1000,
   },
 
@@ -53,6 +55,7 @@ const Message = React.createClass({
     return {
       depth: 0,
       visibleCount: this.visibleCount - 1,
+      maxDepth: this.maxDepth - 1,
       showTimeStamps: false,
       showTimeAgo: false,
       showAllReplies: false,
@@ -230,7 +233,12 @@ const Message = React.createClass({
     const contentExpanded = paneData.get('contentExpanded')
 
     let repliesExpanded
-    if (showAllReplies) {
+    if (this.props.maxDepth == 0) {
+      repliesExpanded = paneData.get('repliesExpanded')
+      if (repliesExpanded === null) {
+        repliesExpanded = false
+      }
+    } else if (showAllReplies) {
       repliesExpanded = true
     } else {
       repliesExpanded = paneData.get('repliesExpanded')
@@ -298,7 +306,8 @@ const Message = React.createClass({
       }
     } else if (children.size > 0 || focused) {
       const composingReply = focused && children.size === 0
-      const inlineReplies = composingReply || this.props.visibleCount > 0 || showAllReplies
+      const canCollapse = (children.size > this.props.visibleCount && !showAllReplies) || this.props.maxDepth == 0
+      const inlineReplies = composingReply || !canCollapse
       let childCount
       let childNewCount
       if (!inlineReplies && !repliesExpanded) {
@@ -341,7 +350,6 @@ const Message = React.createClass({
       } else {
         let focusAction
         let expandRestOfReplies
-        const canCollapse = !showAllReplies && children.size > this.props.visibleCount
         if (canCollapse && !repliesExpanded) {
           const descCount = this.props.tree.calculateDescendantCount(this.props.nodeId, this.props.visibleCount)
           childCount = descCount.get('descendants')
@@ -386,7 +394,7 @@ const Message = React.createClass({
             <FastButton className="indent-line" onClick={collapseAction} empty />
             <div className="content">
               {children.toIndexedSeq().map((nodeId, idx) =>
-                <Message key={nodeId} pane={this.props.pane} tree={this.props.tree} nodeId={nodeId} depth={this.props.depth + 1} visibleCount={repliesExpanded ? Message.visibleCount : Math.floor((this.props.visibleCount - 1) / 2)} showTimeAgo={!expandRestOfReplies && idx === children.size - 1} showTimeStamps={this.props.showTimeStamps} roomSettings={this.props.roomSettings} />
+                <Message key={nodeId} pane={this.props.pane} tree={this.props.tree} nodeId={nodeId} depth={this.props.depth + 1} visibleCount={repliesExpanded ? Message.visibleCount : Math.floor((this.props.visibleCount - 1) / 2)} maxDepth={this.props.maxDepth == 0 ? Message.maxDepth - 1 : this.props.maxDepth - 1} showTimeAgo={!expandRestOfReplies && idx === children.size - 1} showTimeStamps={this.props.showTimeStamps} roomSettings={this.props.roomSettings} />
               )}
               {focusAction}
             </div>

From 5c7bd61d2a60bdb7f0721a66f1f1a56364c2d4e1 Mon Sep 17 00:00:00 2001
From: CylonicRaider <CylonicRaider@users.noreply.github.com>
Date: Sun, 7 May 2017 19:18:50 +0200
Subject: [PATCH 2/4] Improve collapsing behavior

The previous version inadvertently turned collapsing into an
all-or-nothing behavior.
---
 client/lib/ui/Message.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/lib/ui/Message.js b/client/lib/ui/Message.js
index 695795c3..7d796874 100644
--- a/client/lib/ui/Message.js
+++ b/client/lib/ui/Message.js
@@ -306,11 +306,12 @@ const Message = React.createClass({
       }
     } else if (children.size > 0 || focused) {
       const composingReply = focused && children.size === 0
-      const canCollapse = (children.size > this.props.visibleCount && !showAllReplies) || this.props.maxDepth == 0
-      const inlineReplies = composingReply || !canCollapse
+      const fullCollapse = this.props.visibleCount == 0 && !showAllReplies || this.props.maxDepth == 0
+      const partialCollapse = children.size > this.props.visibleCount && !showAllReplies && !fullCollapse
+      const inlineReplies = composingReply || !fullCollapse
       let childCount
       let childNewCount
-      if (!inlineReplies && !repliesExpanded) {
+      if (fullCollapse && !repliesExpanded) {
         childCount = count.get('descendants')
         childNewCount = count.get('newDescendants')
         let replyLabel
@@ -350,7 +351,7 @@ const Message = React.createClass({
       } else {
         let focusAction
         let expandRestOfReplies
-        if (canCollapse && !repliesExpanded) {
+        if (partialCollapse && !repliesExpanded) {
           const descCount = this.props.tree.calculateDescendantCount(this.props.nodeId, this.props.visibleCount)
           childCount = descCount.get('descendants')
           childNewCount = descCount.get('newDescendants')
@@ -386,11 +387,11 @@ const Message = React.createClass({
           focusAction = <ChatEntry pane={pane} onChange={this.expandReplies} />
         }
         let collapseAction
-        if (canCollapse) {
+        if (fullCollapse || partialCollapse) {
           collapseAction = repliesExpanded ? this.collapseReplies : this.expandReplies
         }
         messageReplies = (
-          <div ref="replies" className={classNames('replies', {'collapsible': canCollapse, 'expanded': canCollapse && repliesExpanded, 'inline': inlineReplies, 'empty': children.size === 0, 'focused': focused})}>
+          <div ref="replies" className={classNames('replies', {'collapsible': fullCollapse || partialCollapse, 'expanded': repliesExpanded, 'inline': inlineReplies, 'empty': children.size === 0, 'focused': focused})}>
             <FastButton className="indent-line" onClick={collapseAction} empty />
             <div className="content">
               {children.toIndexedSeq().map((nodeId, idx) =>

From a1c8392c30824809a4721bbe68f1f0e99e4b3583 Mon Sep 17 00:00:00 2001
From: CylonicRaider <CylonicRaider@users.noreply.github.com>
Date: Sun, 7 May 2017 20:15:33 +0200
Subject: [PATCH 3/4] Improve reply nesting behavior

Resets the standard message collapsing value when a depth boundary
is encountered, makes the UI work in all combinations, and fixes
some some issues pointed out by the linter.
---
 client/lib/ui/Message.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/lib/ui/Message.js b/client/lib/ui/Message.js
index 7d796874..d4977a17 100644
--- a/client/lib/ui/Message.js
+++ b/client/lib/ui/Message.js
@@ -233,7 +233,7 @@ const Message = React.createClass({
     const contentExpanded = paneData.get('contentExpanded')
 
     let repliesExpanded
-    if (this.props.maxDepth == 0) {
+    if (this.props.maxDepth === 0) {
       repliesExpanded = paneData.get('repliesExpanded')
       if (repliesExpanded === null) {
         repliesExpanded = false
@@ -306,12 +306,12 @@ const Message = React.createClass({
       }
     } else if (children.size > 0 || focused) {
       const composingReply = focused && children.size === 0
-      const fullCollapse = this.props.visibleCount == 0 && !showAllReplies || this.props.maxDepth == 0
+      const fullCollapse = this.props.visibleCount === 0 && !showAllReplies || this.props.maxDepth === 0
       const partialCollapse = children.size > this.props.visibleCount && !showAllReplies && !fullCollapse
       const inlineReplies = composingReply || !fullCollapse
       let childCount
       let childNewCount
-      if (fullCollapse && !repliesExpanded) {
+      if (fullCollapse && !repliesExpanded && !composingReply) {
         childCount = count.get('descendants')
         childNewCount = count.get('newDescendants')
         let replyLabel
@@ -351,6 +351,7 @@ const Message = React.createClass({
       } else {
         let focusAction
         let expandRestOfReplies
+        const canCollapse = (fullCollapse || partialCollapse) && !composingReply
         if (partialCollapse && !repliesExpanded) {
           const descCount = this.props.tree.calculateDescendantCount(this.props.nodeId, this.props.visibleCount)
           childCount = descCount.get('descendants')
@@ -387,15 +388,15 @@ const Message = React.createClass({
           focusAction = <ChatEntry pane={pane} onChange={this.expandReplies} />
         }
         let collapseAction
-        if (fullCollapse || partialCollapse) {
+        if (canCollapse) {
           collapseAction = repliesExpanded ? this.collapseReplies : this.expandReplies
         }
         messageReplies = (
-          <div ref="replies" className={classNames('replies', {'collapsible': fullCollapse || partialCollapse, 'expanded': repliesExpanded, 'inline': inlineReplies, 'empty': children.size === 0, 'focused': focused})}>
+          <div ref="replies" className={classNames('replies', {'collapsible': canCollapse, 'expanded': repliesExpanded, 'inline': inlineReplies, 'empty': children.size === 0, 'focused': focused})}>
             <FastButton className="indent-line" onClick={collapseAction} empty />
             <div className="content">
               {children.toIndexedSeq().map((nodeId, idx) =>
-                <Message key={nodeId} pane={this.props.pane} tree={this.props.tree} nodeId={nodeId} depth={this.props.depth + 1} visibleCount={repliesExpanded ? Message.visibleCount : Math.floor((this.props.visibleCount - 1) / 2)} maxDepth={this.props.maxDepth == 0 ? Message.maxDepth - 1 : this.props.maxDepth - 1} showTimeAgo={!expandRestOfReplies && idx === children.size - 1} showTimeStamps={this.props.showTimeStamps} roomSettings={this.props.roomSettings} />
+                <Message key={nodeId} pane={this.props.pane} tree={this.props.tree} nodeId={nodeId} depth={this.props.depth + 1} visibleCount={canCollapse && repliesExpanded || this.props.maxDepth === 0 ? Message.visibleCount : Math.floor((this.props.visibleCount - 1) / 2)} maxDepth={this.props.maxDepth === 0 ? Message.maxDepth - 1 : this.props.maxDepth - 1} showTimeAgo={!expandRestOfReplies && idx === children.size - 1} showTimeStamps={this.props.showTimeStamps} roomSettings={this.props.roomSettings} />
               )}
               {focusAction}
             </div>

From 4ba109ecd6d733a384157f15dc41d83f96c63ede Mon Sep 17 00:00:00 2001
From: CylonicRaider <CylonicRaider@users.noreply.github.com>
Date: Tue, 9 May 2017 15:42:24 +0200
Subject: [PATCH 4/4] Correct UI issue

Apparently, the combination :not(collapsible).expanded is not meant to
be there.
---
 client/lib/ui/Message.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/lib/ui/Message.js b/client/lib/ui/Message.js
index d4977a17..2d922681 100644
--- a/client/lib/ui/Message.js
+++ b/client/lib/ui/Message.js
@@ -392,7 +392,7 @@ const Message = React.createClass({
           collapseAction = repliesExpanded ? this.collapseReplies : this.expandReplies
         }
         messageReplies = (
-          <div ref="replies" className={classNames('replies', {'collapsible': canCollapse, 'expanded': repliesExpanded, 'inline': inlineReplies, 'empty': children.size === 0, 'focused': focused})}>
+          <div ref="replies" className={classNames('replies', {'collapsible': canCollapse, 'expanded': canCollapse && repliesExpanded, 'inline': inlineReplies, 'empty': children.size === 0, 'focused': focused})}>
             <FastButton className="indent-line" onClick={collapseAction} empty />
             <div className="content">
               {children.toIndexedSeq().map((nodeId, idx) =>