New 'Direct Chat' sublist on the RoomList

[ara4n]

Splitting this out as a dedicated design bug from #1392

Having decided to consider 'Direct Chats' as a first class citizen and having worked out how to create them in #1882, we need a way to mange them in the UI.

The idea is to have a new sub list (aka tag) in the RoomList positioned above the 'Rooms' tag which tracks all the direct chats that have been started or you have been invited to. Open questions here are:

• How do you distinguish direct chats from normal rooms when they are tagged as Favourite, Low-Priority or (in future) other types of tags? Suggestion is some kind of badge on the top-right of the avatar, a bit like the "power level" sheriff's badges we use in the MemberList
• How do you manage both a 'Rooms' and 'Direct Chats' sublist such that the most recently active rooms rise to the top in both, without one sublist pushing the other off the bottom of the page?

[antikewl]

Added visual to demonstrate left hand nav UI when we have direct messages. Actual create 1:1 etc UI to follow https://zpl.io/Z1nTA4u

[antikewl]

Updated UI. https://zpl.io/1BkPWb

[ara4n]

How does the new 'direct messages' sublist behave when you have lots of rooms, or favourites, such that we can still easily see new direct messages as they come in? This is the main interaction that I got stuck on - the second checkbox on the original bug here.

[wmwragg]

@ara4n I just want to check that I am filtering 1:1 messages (direct messages) correctly, I'm currently using the following code:

if (me.membership == "join" || me.membership === "ban" ||
        (me.membership === "leave" && me.events.member.getSender() !== me.events.member.getStateKey()))
{
    // Used to split rooms via tags
    var tagNames = Object.keys(room.tags);
    // Used for 1:1 direct chats
    var joinedMembers = room.getJoinedMembers();

    // Show 1:1 chats in seperate "Direct Messages" section as long as they haven't
    // been moved to a different tag section
    if (joinedMembers.length === 2 && !tagNames.length) {
        var otherMember = joinedMembers.filter(function(m) {
            return m.userId !== me.userId
        })[0];

        var ConfHandler = self.props.ConferenceHandler;
        if (ConfHandler && ConfHandler.isConferenceUser(otherMember.userId)) {
            // console.log("Hiding conference 1:1 room %s", room.roomId);
            if (!HIDE_CONFERENCE_CHANS) {
                s.lists["im.vector.fake.direct"].push(room);
            }
        } else if (otherMember) {
            s.lists["im.vector.fake.direct"].push(room);
        }
    }
}

I modified from the conference code that has now been rolled into it. Would this be the correct way to filter for direct messages?

[ara4n]

@wmwragg: the intention in the near future is to change how we track these by tagging them with userdata. This isn't implemented yet; for now factoring out the current heuristic (which looks plausible from your paste) to somewhere helpful sounds good.

[wmwragg]

@ara4n I've refactored that out into MatrixTools as the isDirectMessageRoom method:

    isDirectMessageRoom: function(room, me, ConferenceHandler, hideConferenceChans) {
        if (me.membership == "join" || me.membership === "ban" ||
            (me.membership === "leave" && me.events.member.getSender() !== me.events.member.getStateKey()))
        {
            // Used to split rooms via tags
            var tagNames = Object.keys(room.tags);
            // Used for 1:1 direct chats
            var joinedMembers = room.getJoinedMembers();

            // Show 1:1 chats in seperate "Direct Messages" section as long as they haven't
            // been moved to a different tag section
            if (joinedMembers.length === 2 && !tagNames.length) {
                var otherMember = joinedMembers.filter(function(m) {
                    return m.userId !== me.userId
                })[0];

                if (ConferenceHandler && ConferenceHandler.isConferenceUser(otherMember.userId)) {
                    // console.log("Hiding conference 1:1 room %s", room.roomId);
                    if (!hideConferenceChans) {
                        return true;
                    }
                } else {
                    return true;
                }
            }
        }
        return false;
    }

[wmwragg]

Would the notifications not handle seeing new Direct Messages coming in? Having anything in the room list would either fail, as in user scrolled down so can't see them, or be very bad UX e.g. sticky Direct Message rooms at top of room list minimising space for other rooms; jumping to the top when new Direct Messages come in etc.

[ara4n]

The problem we are trying to fix here is that unread DMs are often missed - if you don't see the notification, then the highlight can be lost in a sea of group chats.

Having mentions bubble to the top of a RoomSubList would help a bit, as per #732 - however, we've also had constant requests for a separate sublist for DMs, so that even if they are relatively inactive they are easy to locate, separate from group chats and at a higher priority.

This is where this problem arises:

How do you manage both a 'Rooms' and 'Direct Chats' sublist such that the most recently active rooms rise to the top in both, without one sublist pushing the other off the bottom of the page?

Possible solutions that we threw around were:

• Scroll each sublist separately, and stop the overall LeftPanel scrolling at all. This seems like it might work, whilst being slightly fiddly, in terms of letting all the RoomSubLists being visible simultaneously, and have both DMs and Rooms bubble to the top of their lists without displacing everything.
• Have two parallel columns for DMs and Rooms (ugh)
• Some kind of smart expand/collapse for DM & Room sublists to limit them to fit on the page at the same time, but expand to show more options on hoverover or similar?
• Some kind of smart notifications that make it really clear when there are notifications for rooms scrolled off the top/bottom of the page?
• ...something else.

Typical users have at least a page's worth of DMs and Rooms, so I'm not sure how showing Rooms above DMs will work here as proposed in the current design, as Rooms will always push DMs off the bottom of the page (unless the section is completely collapsed). And if DMs were above Rooms, they'd push Rooms off the bottom of the page.

Now, it's possible that the Notifications Panel on the right-hand-side (once landed) may help avoid missing DM notifs, but intuitively it feels like they are so important that DMs should be centerstage in the LeftPanel when they have unread messages.

Any suggestions very welcome on how to solve this. As per the prioritisation, it's probably most important design issue we have left to solve right now.

[wmwragg]

@ara4n @antikewl OK, sounds like there is more design work required for this, so I'll block this for now until the design is sorted

[ara4n]

i think this particular issue was intended as design only from the tagging. and yes, the design is not resolved nor signed off yet.

[wmwragg]

@ara4n I thought the you wanted the Direct Message stuff implemented, did I get the wrong end of the stick somewhere?

[ara4n]

I was waiting for the design to be signed off, unless i've managed to give misdirection; apologies if so. I have certainly been trying to highlight the urgency for nailing this UI/UX to trevor though so it can get impl'd!

@bradlegge: might be worth working out the right workflow to ensure that we only try to implement signed off designs

[wmwragg]

@ara4n @antikewl Sorry my bad, I got the wrong end of the stick yesterday about the status of #1884

[antikewl]

Ok, here's a possible new direction which builds upon the previous iteration.

When a new unread direct message in any of the major room categories (not user created tags, or it'll get messy fast!) we display an "unread messages offscreen" notification for that category. If two are below/above the fold we display them separately. This clearly shows whether the off-screen messages are direct, mentions, or not.

https://zpl.io/Z1befrI
https://zpl.io/1MHLjl
https://zpl.io/Z252P2U
https://zpl.io/1w5bJI

[ara4n]

Final design in zeplin is awesome and signed off with no provisos - thanks @antikewl!

[ara4n]

ftr this will close up #269 and much of #281 when implemented

[ara4n]

Let's spin off the backend for 1:1 heuristics into a separate ticket and close this one.

[ara4n]

the 1:1 heuristics got spun off to #2070