Message/event pinning #5142

turt2live · 2017-09-29T17:44:53Z

Many users have requested the ability to pin messages in a room, either for pinning the rules of the room or having more context than a topic can provide. This PR adds basic message pinning and prepares for the future of pinning threads.

This addresses #1858

Here's what it looks like (when opened):

Pin/unpin messages from context menu
Only support m.room.message events in Riot
Button for the top of the room to show/hide pinned messages

Required partner PRs

Signed-off-by: Travis Ralston <travpc@gmail.com>

dbkr

Most of these comments are little things. The main concern is whether pinned events will fail to load for new people joining the room.

Also the format they're being stored in could lead to multiple writes clobbering each other as it's one state event with a list, but the alternative would gradually build up state since we can't delete state events, so maybe this is preferable.

@ara4n wdyt?

dbkr · 2017-09-29T18:05:56Z

src/components/views/context_menus/MessageContextMenu.js

@@ -122,6 +133,28 @@ module.exports = React.createClass({
        this.closeMenu();
    },

+    onPinClick: function() {
+        MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
+            .then(null, e => {


dbkr · 2017-09-29T18:07:16Z

src/components/views/rooms/PinnedEventsPanel.js

+
+'use strict';
+
+var React = require('react');


These should really be imports in new code

dbkr · 2017-09-29T18:07:31Z

src/components/views/rooms/PinnedEventsPanel.js

+limitations under the License.
+*/
+
+'use strict';


We shouldn't really be writing this in new files

copy/paste fails (as with most of the comments). will fix.

dbkr · 2017-09-29T18:08:02Z

src/components/views/rooms/PinnedEventsPanel.js

+const PinnedEventTile = React.createClass({
+    displayName: 'PinnedEventTile',
+    propTypes: {
+        mxRoom: React.PropTypes.object.isRequired,


Ideally these would use the prop-types module in new code

dbkr · 2017-09-29T18:09:14Z

src/components/views/rooms/PinnedEventsPanel.js

+
+        let unpinButton = null;
+        if (this._canUnpin()) {
+            unpinButton = <img src="img/cancel-red.svg" className="mx_PinnedEventTile_unpinButton" width="8" height="8"


This should probably be an AccessibleButton?

dbkr · 2017-09-29T18:11:48Z

src/components/views/rooms/PinnedEventsPanel.js

+import { _t } from "matrix-react-sdk/lib/languageHandler";
+import { EventTimeline } from "matrix-js-sdk";
+
+const PinnedEventTile = React.createClass({


Not a huge deal but this is probably chunky enough to warrant its own file

dbkr · 2017-09-29T18:14:47Z

src/components/views/rooms/PinnedEventsPanel.js

+            const cli = MatrixClientPeg.get();
+
+            pinnedEvents.getContent().pinned.map(eventId => {
+                promises.push(cli.getEventTimeline(this.props.room.getUnfilteredTimelineSet(), eventId, 0).then(timeline => {


Hmm, I don't think this will necessarily find the event as you'll only get whatever has been loaded into the unfiltered timeline set, ie. someone newly entering a room won't be able to load a pinned event posted longer ago than the brief bit of scrollback their client loads, I think.

Watching the network pane, it does a request to the context API. It does try to hit the cache first though.

Oh I see - I didn't realise that hit the context API! That sounds like exactly what it should be doing then.

dbkr · 2017-09-29T18:15:43Z

src/components/views/rooms/PinnedEventsPanel.js

+
+    _getPinnedTiles: function() {
+        if (this.state.pinned.length == 0) {
+            return <div>{ _t("No pinned messages.") }</div>;


Would we ever show this? Surely if there are no pinned messages, you'd just show nothing at the top?

The pinned messages pane is a drawer that is dismissed by default. This is more to communicate to people that there's nothing to see when they pop it open.

dbkr · 2017-09-29T18:17:01Z

src/i18n/strings/en_US.json

+    "Unpin Message": "Unpin Message",
+    "Jump to message": "Jump to message",
+    "No pinned messages.": "No pinned messages.",
+    "Loading...": "Loading...",


Ftr these will just fall back to UK English if they're not there so adding them here doesn't actually do anything

The only reason I include these is to make weblate not complain about en-us being <100%.

dbkr · 2017-09-29T18:19:44Z

src/components/views/rooms/PinnedEventsPanel.js

@@ -0,0 +1,171 @@
+/*


We do do it elsewhere at the moment, but generally putting components in riot-web that are referenced from react-sdk is a big no-no since it worsens react-sdk's dependency on riot-web.

turt2live · 2017-09-29T18:56:15Z

For whatever it's worth, the following semantics are applied based on the event spec:

If a pinned message is redacted, pretend it isn't pinned
If a pinned event is not a message, pretend it isn't pinned
If an event is not accessible, pretend it isn't pinned
- Eg: Pinned event is before the user's join, and they can't see past history
- Eg: Pinned event is not in the room
- Eg: Pinned event does not exist

Signed-off-by: Travis Ralston <travpc@gmail.com>

turt2live · 2017-09-29T19:39:17Z

@dbkr Both sides updated. Thanks for the feedback!

dbkr

OK by me - letting @ara4n take a look as it's a reasonably chunky feature

ara4n · 2017-10-14T22:02:30Z

okay, i'm a terrible terrible person and had completely missed/forgotten this PR whilst submerged in funding crap over the last few weeks; sorry @turt2live! @dbkr/@turt2live please stab me in the eye (via Matrix or IRL) if this happens again...

In other news, WOO!!!! This is awesome! We desperately need the feature, and this looks like a great implementation of it (modulo perhaps a little bit of CSS on my side).

My only thoughts are:

Please can we shove it behind a labs flag at first, so we can play with it slightly more gently in the wild?
While the m.room.pinned_events state event is a simple way to do this, it's worth noting that pinning could be seen as a special-case form of message reactions: the act of upvoting/downvoting etc a message is quite similar to saying "i've reacted to this message with a 'pin' reaction". So we might want to converge the two in future. Until we have reactions though I think this is a great solution.
We'll need to make sure it's on the radar of the mobile riot clients (which will be an interesting UX challenge, as we don't want to constantly suck up screen real estate there)

This is fantastic! :D :D :D

turt2live · 2017-10-14T22:06:39Z

I have a feeling that using reactions for pinning might be a bit harder, although it might work out in the end (assuming there's some way to say "give me all the events that have an m.pinned reaction" with minimal performance loss).

As for the labs setting: I meant to do that, and seemingly forgot. I'll figure out how the new system works and get this PR up to speed.

ara4n · 2017-10-14T22:14:07Z

the new system should be simpler (although I haven't touched it myself yet). And yup, using reactions would be contingent on being able to rapidly filter events in a room based on a tag, effectively. But saying "hey, give me all the events i've starred" or "give me all the pinned events" or "give me all the events tagged spam" all feel fairly reasonable things to optimise for in the long term.

Signed-off-by: Travis Ralston <travpc@gmail.com>

turt2live · 2017-10-14T22:44:42Z

@ara4n it's now behind a labs setting.

It won't prevent the timeline text if someone in the room pins something, but it'll prevent the happy paths for people to pin messages (context menu and the list itself).

The build error is due to matrix-org/matrix-react-sdk#1483

ara4n · 2017-10-14T23:05:46Z

hm. how hard is it to hide the pinned messages themselves behind the labs flag? as i'm most worried that the pinned messages may surprise/break innocent users (especially until CSS is tweaked a bit)...

turt2live · 2017-10-14T23:07:55Z

The pinned messages are behind a drawer that requires a manual click, like in Discord. I've put the button behind the labs flag, so the drawer can't even open without some Hard Work.

Personally I'm not a fan of pinned messages automatically showing, which is why the PR intentionally puts it behind a drawer.

ara4n · 2017-10-15T00:02:46Z

okay. i can see a real use for pinned messages being used as a topic analog, though, but let's have a play! thanks :D

turt2live added 12 commits September 29, 2017 10:42

Pin/unpin message option in a message's context menu

774c3db

Signed-off-by: Travis Ralston <travpc@gmail.com>

Add panel for pinned messages.

5daa16a

Signed-off-by: Travis Ralston <travpc@gmail.com>

Permalink pins to their original events

fa5a23e

Signed-off-by: Travis Ralston <travpc@gmail.com>

Add action bar to pinned event tiles; support unpinning from the panel

9b11f57

Signed-off-by: Travis Ralston <travpc@gmail.com>

Don't show the unpin button if the user can't unpin the message.

59a253a

Signed-off-by: Travis Ralston <travpc@gmail.com>

i18n for 'Jump to message' button

efdb4b0

Signed-off-by: Travis Ralston <travpc@gmail.com>

Hide the pin option in the context menu if the user can't pin messages

f7389b7

Signed-off-by: Travis Ralston <travpc@gmail.com>

Fix bug where rooms missing m.room.pinned_events could not pin messages

965a25b

Signed-off-by: Travis Ralston <travpc@gmail.com>

Don't fail if an event doesn't belong to a room.

aff0288

Signed-off-by: Travis Ralston <travpc@gmail.com>

Don't try to show redacted messages

0a3bc1c

Signed-off-by: Travis Ralston <travpc@gmail.com>

i18n for remaining strings

b0190f6

Signed-off-by: Travis Ralston <travpc@gmail.com>

Filter pinned events before rendering

2d5acfc

Signed-off-by: Travis Ralston <travpc@gmail.com>

turt2live mentioned this pull request Sep 29, 2017

Message/event pinning matrix-org/matrix-react-sdk#1439

Merged

dbkr reviewed Sep 29, 2017

View reviewed changes

dbkr assigned ara4n Sep 29, 2017

turt2live added 2 commits September 29, 2017 13:15

Move the PinnedEventsPanel to the react-sdk

078ee54

Signed-off-by: Travis Ralston <travpc@gmail.com>

Split up CSS; use .catch instead of .then

2d153a7

Signed-off-by: Travis Ralston <travpc@gmail.com>

t3chguy mentioned this pull request Oct 3, 2017

Features for Status #5157

Closed

3 tasks

dbkr approved these changes Oct 11, 2017

View reviewed changes

ara4n assigned turt2live and unassigned ara4n Oct 14, 2017

Merge branch 'develop' into travis/pinned_messages

3e066d3

Hide pinning messages behind a labs settings

6926c96

Signed-off-by: Travis Ralston <travpc@gmail.com>

ara4n merged commit f143315 into element-hq:develop Oct 15, 2017

ara4n mentioned this pull request Oct 15, 2017

Add spec for m.room.pinned_events matrix-org/matrix-spec-proposals#1007

Merged

ara4n mentioned this pull request Jan 10, 2018

Pinned threads to replace FAQs element-hq/element-meta#1300

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Message/event pinning #5142

Message/event pinning #5142

turt2live commented Sep 29, 2017 •

edited

Loading

dbkr left a comment

dbkr Sep 29, 2017

dbkr Sep 29, 2017

dbkr Sep 29, 2017

turt2live Sep 29, 2017

dbkr Sep 29, 2017

dbkr Sep 29, 2017

dbkr Sep 29, 2017

dbkr Sep 29, 2017

turt2live Sep 29, 2017

dbkr Sep 29, 2017

dbkr Sep 29, 2017

turt2live Sep 29, 2017

dbkr Sep 29, 2017

turt2live Sep 29, 2017

dbkr Sep 29, 2017

turt2live commented Sep 29, 2017

turt2live commented Sep 29, 2017

dbkr left a comment

ara4n commented Oct 14, 2017

turt2live commented Oct 14, 2017

ara4n commented Oct 14, 2017

turt2live commented Oct 14, 2017 •

edited

Loading

ara4n commented Oct 14, 2017

turt2live commented Oct 14, 2017

ara4n commented Oct 15, 2017

Message/event pinning #5142

Message/event pinning #5142

Conversation

turt2live commented Sep 29, 2017 • edited Loading

Required partner PRs

dbkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turt2live commented Sep 29, 2017

turt2live commented Sep 29, 2017

dbkr left a comment

Choose a reason for hiding this comment

ara4n commented Oct 14, 2017

turt2live commented Oct 14, 2017

ara4n commented Oct 14, 2017

turt2live commented Oct 14, 2017 • edited Loading

ara4n commented Oct 14, 2017

turt2live commented Oct 14, 2017

ara4n commented Oct 15, 2017

turt2live commented Sep 29, 2017 •

edited

Loading

turt2live commented Oct 14, 2017 •

edited

Loading