UX: Allow collapsing of group posts after they've been expanded

app/assets/javascripts/discourse/components/expand-post.js.es6

@@ -2,17 +2,28 @@ import { ajax } from 'discourse/lib/ajax';
 
 export default Ember.Component.extend({
   tagName: '',
+  expanded: null,
+  _loading: false,
 
   actions: {
-    expandItem() {
+    toggleItem() {
+      if (this._loading) { return false; }
       const item = this.get('item');
+
+      if (this.get('expanded')) {
+        this.set('expanded', false);
+        item.set('expandedExcerpt', null);
+        return;
+      }
+
       const topicId = item.get('topic_id');
       const postNumber = item.get('post_number');
 
+      this._loading = true;
       return ajax(`/posts/by_number/${topicId}/${postNumber}.json`).then(result => {
-        item.set('truncated', false);
-        item.set('excerpt', result.cooked);
-      });
+        this.set('expanded', true);
+        item.set('expandedExcerpt', result.cooked);
+      }).finally(() => this._loading = false);
     }
   }
 });

app/assets/javascripts/discourse/templates/components/expand-post.hbs

@@ -1,5 +1,11 @@
 {{#if item.truncated}}
-  <a class="expand-item" href {{action "expandItem"}} title={{i18n "post.expand_collapse"}}>
-    {{d-icon "chevron-down"}}
-  </a>
+  {{#if expanded}}
+    <a class="collapse-item" onclick={{action "toggleItem"}} title={{i18n "post.expand_collapse"}}>
+      {{d-icon "chevron-up"}}
+    </a>
+  {{else}}
+    <a class="expand-item" onclick={{action "toggleItem"}} title={{i18n "post.expand_collapse"}}>
+      {{d-icon "chevron-down"}}
+    </a>
+  {{/if}}
 {{/if}}

app/assets/javascripts/discourse/templates/components/group-post.hbs

@@ -24,5 +24,9 @@
   </div>
 </div>
 <div class='group-post-excerpt'>
-  {{{post.excerpt}}}
+  {{#if post.expandedExcerpt}}
+    {{{post.expandedExcerpt}}}
+  {{else}}
+    {{{post.excerpt}}}
+  {{/if}}
 </div>