From 71c59eff2c439922bbc73b048d23f61023eb2275 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 3 Nov 2017 11:19:29 +0000
Subject: [PATCH 1/3] Add a GeminiScrollbar to Your Communities

---
 src/components/structures/MyGroups.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index b6a450fbb4..cc4783fdac 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import GeminiScrollbar from 'react-gemini-scrollbar';
 import {MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../index';
 import { _t, _tJsx } from '../../languageHandler';
 import withMatrixClient from '../../wrappers/withMatrixClient';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import dis from '../../dispatcher';
-import PropTypes from 'prop-types';
 import Modal from '../../Modal';
 
 import FlairStore from '../../stores/FlairStore';
@@ -115,18 +116,17 @@ export default withMatrixClient(React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let content;
+        let contentHeader;
         if (this.state.groups) {
             const groupNodes = [];
             this.state.groups.forEach((g) => {
                 groupNodes.push(<GroupTile groupId={g} />);
             });
+            contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <div>
-                    <h3>{ _t('Your Communities') }</h3>
-                    <div className="mx_MyGroups_joinedGroups">
-                        { groupNodes }
-                    </div>
-                </div> :
+                <GeminiScrollbar className="mx_MyGroups_joinedGroups">
+                    { groupNodes }
+                </GeminiScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",
@@ -176,6 +176,7 @@ export default withMatrixClient(React.createClass({
                 </div>
             </div>
             <div className="mx_MyGroups_content">
+                { contentHeader }
                 { content }
             </div>
         </div>;

From 151f9917b1232ec8658aef5821db3d59c5b01212 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 3 Nov 2017 12:19:37 +0000
Subject: [PATCH 2/3] Fix group invites such that they look similar to room
 invites

 - Change GroupInviteTile to use RoomTile CSS
 - Give group invites their own sub list, with heading "Community Invites"
---
 src/components/views/groups/GroupInviteTile.js | 12 ++++++------
 src/components/views/rooms/RoomList.js         | 15 ++++++++++++---
 src/i18n/strings/en_EN.json                    |  1 +
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index d7a04247ec..fcc9acb00b 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -44,21 +44,21 @@ export default React.createClass({
 
         const label = <EmojiText
             element="div"
-            title={groupName}
-            className="mx_GroupInviteTile_name"
+            title={this.props.group.groupId}
+            className="mx_RoomTile_name"
             dir="auto"
         >
             { groupName }
         </EmojiText>;
 
-        const badge = <div className="mx_GroupInviteTile_badge">!</div>;
+        const badge = <div className="mx_RoomSubList_badge mx_RoomSubList_badgeHighlight">!</div>;
 
         return (
-            <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
-                <div className="mx_GroupInviteTile_avatarContainer">
+            <AccessibleButton className="mx_RoomTile mx_RoomTile_highlight" onClick={this.onClick}>
+                <div className="mx_RoomTile_avatar">
                     { av }
                 </div>
-                <div className="mx_GroupInviteTile_nameContainer">
+                <div className="mx_RoomTile_nameContainer">
                     { label }
                     { badge }
                 </div>
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index e689579650..1a9fa5d4e9 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -555,13 +555,23 @@ module.exports = React.createClass({
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
 
-        const inviteSectionExtraTiles = this._makeGroupInviteTiles();
-
         const self = this;
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar"
                  autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
             <div className="mx_RoomList">
+                <RoomSubList list={[]}
+                             extraTiles={this._makeGroupInviteTiles()}
+                             label={_t('Community Invites')}
+                             editable={false}
+                             order="recent"
+                             isInvite={true}
+                             collapsed={self.props.collapsed}
+                             searchFilter={self.props.searchFilter}
+                             onHeaderClick={self.onSubListHeaderClick}
+                             onShowMoreRooms={self.onShowMoreRooms}
+                />
+
                 <RoomSubList list={self.state.lists['im.vector.fake.invite']}
                              label={_t('Invites')}
                              editable={false}
@@ -573,7 +583,6 @@ module.exports = React.createClass({
                              searchFilter={self.props.searchFilter}
                              onHeaderClick={self.onSubListHeaderClick}
                              onShowMoreRooms={self.onShowMoreRooms}
-                             extraTiles={inviteSectionExtraTiles}
                 />
 
                 <RoomSubList list={self.state.lists['m.favourite']}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc2f0754a7..83211f6e27 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -326,6 +326,7 @@
     "Drop here to tag %(section)s": "Drop here to tag %(section)s",
     "Press <StartChatButton> to start a chat with someone": "Press <StartChatButton> to start a chat with someone",
     "You're not in any rooms yet! Press <CreateRoomButton> to make a room or <RoomDirectoryButton> to browse the directory": "You're not in any rooms yet! Press <CreateRoomButton> to make a room or <RoomDirectoryButton> to browse the directory",
+    "Community Invites": "Community Invites",
     "Invites": "Invites",
     "Favourites": "Favourites",
     "People": "People",

From 802ab1674660c864edda59c0aa2aa8d4d6574e67 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Nov 2017 14:06:59 +0000
Subject: [PATCH 3/3] Fix multiple pills on one line

---
 src/components/views/messages/TextualBody.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index faa4d6cf77..911f2c98d1 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -194,6 +194,9 @@ module.exports = React.createClass({
                     node.parentNode.replaceChild(pillContainer, node);
                     // Pills within pills aren't going to go well, so move on
                     pillified = true;
+
+                    // update the current node with one that's now taken its place
+                    node = pillContainer;
                 }
             } else if (node.nodeType == Node.TEXT_NODE) {
                 const Pill = sdk.getComponent('elements.Pill');