Room header & details UI refresh (+ what's needed to remove from Labs)

[germain-gg]

Design: Figma document Trust & Decoration

Updated figma May 2024: https://www.figma.com/design/gpxHFDTNK796n84r1ZxYG2/Room-Header-%26-Details-(2024)?node-id=0-1

Designer: @americanrefugee PM: @daniellekirkwood / @nadonomy Developer: @germain-gg

### Room header
- [ ] https://github.com/vector-im/element-web/issues/25887
- [ ] https://github.com/vector-im/element-web/issues/25902
- [ ] https://github.com/vector-im/element-web/issues/25905
- [ ] https://github.com/vector-im/element-web/issues/25910
- [ ] https://github.com/vector-im/element-web/issues/26027
- [ ] https://github.com/vector-im/element-web/issues/25892
- [ ] https://github.com/vector-im/element-web/issues/26028
- [ ] https://github.com/vector-im/element-web/issues/25884
- [ ] https://github.com/vector-im/element-internal/issues/444
- [ ] https://github.com/matrix-org/matrix-react-sdk/pull/11448
- [ ] https://github.com/vector-im/element-web/pull/26089
- [ ] https://github.com/vector-im/element-desktop/pull/1194
- [ ] https://github.com/vector-im/element-web/issues/26326
- [ ] https://github.com/vector-im/element-web/issues/26569
- [ ] https://github.com/vector-im/element-web/issues/26568
- [ ] https://github.com/vector-im/element-web/issues/26570
- [ ] https://github.com/vector-im/element-web/issues/26571
- [ ] https://github.com/vector-im/element-web/issues/26181
- [ ] https://github.com/vector-im/compound/issues/274
- [ ] https://github.com/vector-im/element-web/issues/26585
- [ ] https://github.com/vector-im/element-web/pull/26630
- [ ] https://github.com/vector-im/element-desktop/pull/1345
- [ ] https://github.com/vector-im/element-web/issues/26656
- [ ] https://github.com/vector-im/element-web/issues/26634
- [x] Hide the Call buttons in group rooms: https://github.com/element-hq/wat-internal/issues/157
- [x] Hide the Voice Call button: https://github.com/element-hq/wat-internal/issues/190

### Room details
- [ ] https://github.com/vector-im/element-web/issues/26558
- [x] Close button should have a hover state
- [x] Room Name: Add padding/margin on the right and left (16px)
- [ ] https://github.com/vector-im/element-web/issues/26595
- [ ] https://github.com/vector-im/element-web/issues/26597
- [x] New room info menu options list missing (order, name, icons, section dividers, etc.)
- [ ] https://github.com/vector-im/element-web/issues/26596
- [ ] https://github.com/vector-im/element-web/issues/26645

Open Questions

• [x] @nadonomy to scrutinise whether we keep providing support for feature_right_panel_default_open
• [x] @nadonomy what do we handle the notifications panel?
• [x] @nadonomy @daniellekirkwood Resolve if we can deprecate feature_state_counters: https://github.com/vector-im/element-web/issues/25884
• [x] Opening room details requires clicking room header somewhere which is hardly discoverable
• [x] Cannot click to enlarge avatar from header; opens details instead
• [x] Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work
• [ ] Room details don't help mitigate scroll-on-hover concern on room topic

Time sheeting ⏱️

WEB: Room header & details

[daniellekirkwood]

pulling over from @t3chguy's comment in the now-closed issue:

https://github.com/vector-im/element-web/issues/2401 https://github.com/vector-im/element-web/issues/8667

are related and may need closing/dealing with as a part of this

[daniellekirkwood]

Also copying from the previous issue:

Is https://github.com/vector-im/element-web/issues/25534 invalid as we're no longer providing a drop-down header?

@nadonomy or @americanrefugee this is a question for you :)

[americanrefugee]

Correct @daniellekirkwood - there is no longer a drop-down menu from the room header. Click to expand the right sidebar only.

[nadonomy]

pulling over from @t3chguy's comment in the now-closed issue: #2401

Closed this as it's ambiguous. Tough to action. We can get fresh insights once the new implementation is testable

#8667

@americanrefugee for this I think we should stress test in Figma and propose the smallest width we think works.

@daniellekirkwood would you be able to pull some analytics insights on this pls? Knowing what resolutions are in use in the wild would help. We could also formalise this in the project README (with browser support etc) for posterity.

https://github.com/vector-im/element-web/issues/25534

Commenting there - @americanrefugee your input is welcome too.

[nadonomy]

@germain-gg updated the issue tasklist to include https://github.com/vector-im/element-internal/issues/444 which details how we should solve notifications.

[nadonomy]

@germain-gg on feature_right_panel_default_open - I talked through this logic with others today and the sentiment was that's really difficult to work on simple stuff in Element Web today so let's simplify the flags where we can.

I checked analytics and there's little useful to discern on this one. So, I think let's remove it and monitor for any feedback we get on develop after we merge.

[Ai-rin]

I never liked defaults with no member list visible. Now when you removed feature_right_panel_default_open, i have no way to fix it. 👎👎👎

[daniellekirkwood]

@germain-gg & @janogarcia / @americanrefugee I don't have enough familiarity with screen widths to be able to read this chart... however, as asked for here's some data!

https://posthog.hss.element.io/insights/8oug6Lje

[germain-gg]

We need to accomodate this https://github.com/matrix-org/matrix-react-sdk/pull/11475 in the new room header too

Looping @charlynguyen in as the developer who's been looking at the knocking feature

[americanrefugee]

@kerryarchibald Here are the deltas I found between develop.element.io vs. the design...

Room Header

• Order of buttons on the right should be Video Call, Voice Call, Threads, Facepile
• Change Video icon to Video Solid
• Public Room icon button missing background on hover
• Check spacing of icon buttons, should be 8px between all items
• Clicking the header should expand/close on-click (currently, clicking the header when the side panel is open to another section goes to Info)

Details

• Search button
  • Hover effect should be instant, not dissolve/animate
  • Tooltip should appear below icon button (after 300ms)
• Close button
  • There should be a hover state
  • Tooltip doesn't match the design, and should appear below icon button (after 300ms)
• Room Name
  • Add padding/margin on the right and left (16px)
• Room description missing
• Tab navigation missing
• New room info menu options list missing (order, name, icons, section dividers, etc.)
• People view (mostly) not implemented
  • Sub nav missing
  • New Search button missing
  • Invite people button wrong (should be an icon-only primary)
  • People list not done
• Threads view not implemented
  • Sub nav missing
  • Total number of threads missing
  • "Mark all as read" text link missing
  • Change Thread icons in list to outline version, not solid
• Profile views not implemented
• Room details for a direct message not implemented

@nad Did I miss anything?

[nadonomy]

@nad Did I miss anything?

Wrong username btw 😬. But the major one to add from my side is Widgets not being implemented, as they're designed as a subview now.

[Johennes]

Thanks both, I've added your points to the task list in the issue

[daniellekirkwood]

"Facepile & room icon layout issues when the window isn't wide enough"

i added as this happened...

Context: In terms of how wide Element is, it's just over half my laptop screen.

[daniellekirkwood]

Threads view not implemented: "Mark all as read" text link missing

We don't have this functionality (only at a room level) so I'm going to remove it from the DoD of this issue and the iterations issue

[daniellekirkwood]

There's a "post removing the room header from labs" version of this issue that I've taken some details from here and added to it: https://github.com/vector-im/wat-internal/issues/75

I've also moved some of @Johennes ' questions to the questions section as they're not yet actionable, they need to be discussed.

Will cross reference the list in Aaron's comment to make sure nothing has been lost in the move over.

Thanks!

[nadonomy]

@kerryarchibald on the open questions:

Opening room details requires clicking room header somewhere which is hardly discoverable

Do you have any background context to adding this here? We did user testing and this hasn't come up so far. The collective conclusion we arrived at was to ship and learn.

Cannot click to enlarge avatar from header; opens details instead

Happy to defer to @americanrefugee on this.

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

We're making a bunch of known compromises here until we have unified search. @kerryarchibald is there anything specific you think we should address before shipping? @americanrefugee are there any low hanging tweaks you think we should entertain?

Room details don't help mitigate scroll-on-hover concern on room topic

@kerryarchibald Can you link to more context on the 'scroll-on-hover' concern? User quotes would be great (we could take this to internal if we don't want to look over verbatim quotes in public for privacy).

[t3chguy]

CMD+F doesn't work

Its a default-off pref

[Johennes]

All of the feedback quoted below was from me, not Kerry.

@kerryarchibald on the open questions:

Opening room details requires clicking room header somewhere which is hardly discoverable

Do you have any background context to adding this here? We did user testing and this hasn't come up so far. The collective conclusion we arrived at was to ship and learn.

There's no further background other than me finding this hard to discover and having seen other Element employees raise the same concern. Not a hard block if design is confident in this experience.

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

We're making a bunch of known compromises here until we have unified search. @kerryarchibald is there anything specific you think we should address before shipping? @americanrefugee are there any low hanging tweaks you think we should entertain?

I don't have a good alternative proposal. Searching just feels basic enough to me that I think I'd prefer it to be accessible with just one click or at least without having to cursor from left to right to left.

Room details don't help mitigate scroll-on-hover concern on room topic

@kerryarchibald Can you link to more context on the 'scroll-on-hover' concern? User quotes would be great (we could take this to internal if we don't want to look over verbatim quotes in public for privacy).

This was flagged by M in the WAT lobby a few weeks ago when briefly had the labs flag defaulted to on.

[Johennes]

CMD+F doesn't work

Its a default-off pref

Oh! Do you know why this is off by default?

[t3chguy]

I believe that was the ask at the time, however many years ago

[americanrefugee]

@kerryarchibald @nadonomy @Johennes

• Cannot click to enlarge avatar from header; opens details instead
  • Happy to defer to @americanrefugee on this.

I see no value in clicking to enlarge the room avatar from the header. If the user clicks the avatar in Room info, then show full size image.

• Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work
  • We're making a bunch of known compromises here until we have unified search. @kerryarchibald is there anything specific you think we should address before shipping? @americanrefugee are there any low hanging tweaks you think we should entertain?

Jano and I discussed this at length with Germain. We all felt that the solution we arrived at is the best compromise until we can properly address search globally.

The only other solution would be to add the search icon into the room header (example), as it is currently. However...

• This takes us further away from the vision/concept, and closer to what we have today
• A search icon in the header adds clutter, and we would probably need to explore a new search icon for this specific case so that it looks proportional to the other icon buttons
• Search is broken in general, and so we're spending a lot of time/energy on coming up with non-ideal solutions

As for the actual search box that appears below the header after clicking the search icon button...

• In order to prioritize delivery over perfection, we decided to keep the experience exactly as is. Otherwise, anything else we design / propose would incur further development time and possibly open other cans of worms downstream.

Bottom line: I say we ship what we envisioned (search from Room details panel) and learn. If there's significant blowback, we can move search back to the room header. But hopefully we can fix search for real and all of these issues go away :)

[Johennes]

There's a "post removing the room header from labs" version of this issue that I've taken some details from here and added to it: vector-im/wat-internal#75

Great, thank you. I'm wondering if we could move https://github.com/vector-im/element-web/issues/25884 back into this epic because it'll just mean deleting code so should be fairly trivial.

[daniellekirkwood]

There's a "post removing the room header from labs" version of this issue that I've taken some details from here and added to it: vector-im/wat-internal#75

Great, thank you. I'm wondering if we could move #25884 back into this epic because it'll just mean deleting code so should be fairly trivial.

Yes! We can do that. I wasn't sure if the deletion of old code would happen before or after we take the header our of labs. That item can sit in either Epic but must be done either way.

[daniellekirkwood]

Also @kerryarchibald (sorry for the number of pings on this issue for you now!) Can you confirm that we're maintaining all the Analytics events we currently have in the new version of the header and right panel? 🙏

[kerryarchibald]

Also @kerryarchibald (sorry for the number of pings on this issue for you now!) Can you confirm that we're maintaining all the Analytics events we currently have in the new version of the header and right panel? 🙏

All the right panel events are still in place

"WebRightPanelRoomInfoPeopleButton"
"WebRightPanelRoomUserInfoBackButton"
"WebRightPanelRoomInfoSettingsButton"
"WebRightPanelMemberListInviteButton"
"WebRightPanelRoomUserInfoInviteButton"
"WebRightPanelThreadPanelFilterDropdown"

Made a ticket to reinstate one that was lost: WebRoomHeaderButtonsThreadsButton https://github.com/vector-im/element-web/issues/26585

@daniellekirkwood some interactions have moved from the room context menu into the right panel - favourite, invite, leave - should we add new events for those actions, or reuse the context menu events? WebRoomListRoomTileContextMenuFavouriteToggle, WebRoomHeaderContextMenuLeaveItem

[janogarcia]

@americanrefugee Thanks for the mockup.

A search icon in the header adds clutter, and we would probably need to explore a new search icon for this specific case so that it looks proportional to the other icon buttons

If we moved Search back to the header, I wouldn't recommend coming up with an alternative Search icon for that context. The icon dimensions are already proportional, the main difference being its lighter visual weight being an outline icon while the other icons on the header are solid.

A solid magnifying glass icon for Search wouldn't be that recognizable/intuitive. So we either turn all icons there to outline style or just accept that difference. I'd say, let's accept the difference given that this would be just an interim workaround. We expect Search to be properly addressed at some point, moving it to a more appropriate place.

[daniellekirkwood]

Made a ticket to reinstate one that was lost: WebRoomHeaderButtonsThreadsButton #26585

Thank you, this button is the one I need to inform some decisions on the Stuck Notifications work. This issue should be done before we release from labs so I'll add it to the task list. Hopefully it won't take long?

@daniellekirkwood some interactions have moved from the room context menu into the right panel - favourite, invite, leave - should we add new events for those actions, or reuse the context menu events? WebRoomListRoomTileContextMenuFavouriteToggle, WebRoomHeaderContextMenuLeaveItem

On the posthog side I can combine events really easily so if we create new 'accurately' titled events then that's not a problem for me. It's fairly low priority so if it's going to take time, leave it be :)

[nadonomy]

@kerryarchibald pivoting from the internal discussion to here - on when to delabs.

We were guiding our decision making by ensuring we're not removing functionality outright, with things re-shuffling between the header and right panel. Once we've hit that point, then it just becomes a question of how polished we want the first thing we ship to be.

Personally I think it'd make sense to:

1. Delabs once the header, initial right panel, and navigation of subviews (controls for back/close/etc) are up to spec.
2. Delabs at the start of a release cycle, so we give ourselves maximum time on develop to iterate.
3. Ship iteratively after that.

[kerryarchibald]

Delabs once the header, initial right panel, and navigation of subviews (controls for back/close/etc) are up to spec.

@nadonomy what specifically does up to spec mean here?

[nadonomy]

Delabs once the header, initial right panel, and navigation of subviews (controls for back/close/etc) are up to spec.

@nadonomy what specifically does up to spec mean here?

LGTM from yourself/Aaron/Jano/Danielle.