Implement new "talk to a person" UI

[ara4n]

Filing this as a design-tagged issue to differentiate from the existing #1392 and friends.

The result of talking to @antikewl this morning about having clear separate first-class citizens for "talk to user" versus "join/create a room" was to discuss 3 options:

1. make the (+) button in the bottom left give the choice of 'are you adding a direct chat or a room' before proceeding. this was dismissed as the thing users are complaining about is the idea that you have to 'add' or 'create' anything when you start talking to a person. People exist already; you just want to talk to them.
2. make the (+) button take you to a modal "Start!" screen of some kind which has both "talk to peeople" and "join/create rooms" sections or tabs. Dismissed for same reason as the first option.
3. replace the current (+) and (directory) buttons with two new buttons: one for initiating direct chats; the other for joining/creating rooms. Thus creating new rooms could be seen as part of directory management (or perhaps vice versa). => Trevor to flesh this out.

Conclusion:

1. Switch icons on bottom-left menu for design (as per http://zpl.io/1BkPWb)
2. Add hoverover tooltip as per design for bottom-left menu icons (as per http://zpl.io/1BkPWb)
3. Implement new 'Start chat with a person' screen (as per http://zpl.io/23ggM9 and http://zpl.io/1iXBEQ and http://zpl.io/1VAP77). We do not need the "manage networks" or searching external networks for now, we can search the current user DB that vector's old invite code maintains.

We do not need the final screen (http://zpl.io/Z7mQSg) as far as I can see.

[antikewl]

Status update: Complete, BUT bottom left icons (rooms/new 1:1) need to be changed now that I’ve used the “add person” icon for the icon in the bottom right to invite someone to a room.
https://zpl.io/1BkPWb

[ara4n]

This looks very promising - thanks. I still think that the (+) icon for 'join/start a room' may need to somehow indicate rooms, rather than being a generic plus.

Something we have lost (and it seems to be my fault when writing up our conversation when I was in Rennes the other week) is the ability to locate who we are trying to talk to (or the room we are trying to join) based on remote network.

So, if I want to "speak to Trevor on ribot.slack.com", how do I tell the search thing that the 'trevor' i'm autocompleting should be looking for him on ribot.slack.com, rather than a different slack, or a different IRC network, or indeed Matrix proper? Likewise if I want to join "#general", how do I say that's on ribot.slack.com, rather than an IRC channel called #general on (say) Freenode?

Both finding people & rooms is going to need some way to specify the target network. For people, we also have the (existing) option of inviting by email address and giving them the option of how to join.

[antikewl]

Ah, ok. I think this is probably a sub-task of #1756. I'll add your comment there.

[ara4n]

The design here is good to go for the 'find people' screens as per:

• zpl.io/1BkPWb (and the next 4 screens, linked below for completness):
• zpl.io/23ggM9
• zpl.io/1iXBEQ <-- with the simplification of skipping remote networks until the contact lookup API is available.
• zpl.io/1VAP77
• zpl.io/Z7mQSg <-- I don't think this screen is actually needed, as per the comment on it.

The one proviso is that the 'room' icon still doesn't seem right, but this can be changed down the line.

The 'find room' screens are not finished or signed off yet, however.